fire.scss

---
---

/* This file is no longer the controlling version of CSS/SCSS used for FIRE. The CSS is now
 * contained as text in fire.user.js and loaded from there.
 * In the future, if you find it easier to write something as SCSS, feel free to write it that
 * way and convert it into CSS, but you will need to manually add it to injectMainCSS()
 * in order for it to be applied to pages in which FIRE runs.
 */

$blur: blur(2px);
$zIndex: 100;

$button-green: #3b0;
$button-red: #f00;
$button-orange: #f80;
$button-blue: #00f;

$shadow-color: #646464;
$transitionTime: 0.4s;
$codeBlockColor: #eff0f1;
$codeFont: Fira Code,Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif;

@mixin button-gradient($color) {
  $light: lighten($color, 20%);
  $dark: darken($color, 10%);

  border: 1px solid $dark;
  background-color: $dark;
  background: -webkit-gradient(linear, left top, left bottom, from($light), to($dark));
  background: -moz-linear-gradient(top, $light, $dark);
  background: linear-gradient(to bottom, $light, $dark);

  &.fire-submitted {
    text-decoration: underline;
  }

  &.fire-submitted,
  &:hover {
    -webkit-box-shadow: 0 -6px 6px 0 transparentize($light, 0.5);
    -moz-box-shadow: 0 -6px 6px 0 transparentize($light, 0.5);
    box-shadow: 0 -6px 6px 0 transparentize($light, 0.5);
  }
}

img.fire-emoji {
  width: 16px;
  height: 16px;
}

img.fire-emoji-large {
  width: 24px;
  height: 24px;
}

#toast-container {
  margin-top: 4px;

  > div.toast {
    opacity: 1;
  }

  a {
    text-decoration: underline;
    font-style: italic;
  }
}

.fire-blur {
  -webkit-filter: $blur;
  -moz-filter: $blur;
  -ms-filter: $blur;
  -o-filter: $blur;
  filter: $blur;
}

.fire-popup-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.fire-button {
  cursor: pointer;
  display: inline-block;
  width: 20px;
  position: relative;
  padding-left: 4px;
  box-sizing: border-box;

  &.fire-done {
    filter: grayscale(100%);
    opacity: 0.5;
  }

  .fire-emoji {
    position: relative;
    top: -2px;
  }

  .fire-button-inner {
    display: inline-block;
  }

  &.fire-data-loading .fire-button-inner {
    animation: spinner 0.6s linear infinite;
    cursor: wait;
  }
}

// Popup container
.fire-popup {
  position: fixed;
  z-index: $zIndex;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 20px 2px $shadow-color;
  width: calc(70% - 9vw);
  max-height: 85vh;
  left: 6vw;
  top: 2vh;
  box-sizing: border-box;

  .fire-popup-inner {
    display: flex;
    flex-direction: column;
    max-height: calc(85vh - 40px);
  }

  &.fire-readonly {
    .fire-popup-header .fire-site-logo {
      max-width: 475px;
    }
  }

  // Header
  .fire-popup-header {
    min-height: 40px;
    flex: none;

    a.button {
      margin: 0;

      &.fire-metasmoke-button {
        margin-right: 10px;
      }

      &.fire-close-button,
      &.fire-metasmoke-button {
        float: right;
        margin-bottom: 0;
      }

      &.fire-feedback-button {
        float: left;
        margin-right: 2px;
        transition: all 0.2s ease;

        &[disabled] {
          cursor: no-drop;
          opacity: 0.5;
        }

        &.fire-tpu-,
        &.fire-rude,
        &.fire-tp- { @include button-gradient($button-green); }
        &.fire-fp- { @include button-gradient($button-red); }
        &.fire-naa- { @include button-gradient($button-orange); }

        &.focus,
        &.fire-metasmoke { @include button-gradient($button-blue); }
      }
    }

    .fire-site-logo {
      background-position: top left;
      background-repeat: no-repeat;
      background-size: contain;
      display: inline-block;
      height: 40px;
      position: relative;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-size: 26px;
      color: #444;
      padding: 0 0 0 40px;
      line-height: 40px;
      white-space: nowrap;
      cursor: pointer;
      text-decoration: none;
      max-width: 440px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .fire-popup-feedbackButtonContainer {
      display: inline-block;
      vertical-align: middle;
    }

    .fire-popup-feedbackButtonGroup {
      display: inline-block;
      vertical-align: middle;
    }
  } // End Header

  // Body
  .fire-popup-body {
    max-height: calc(85vh - 160px);
    overflow-y: scroll;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    box-shadow: inset 0 0 10px -3px $shadow-color;
    position: relative;
    flex: auto;

    .fire-report-info .fire-username {
      float: right;
      font-weight: normal;
      margin-top: -17px;

      .fire-user-reputation {
        font-size: 0.8em;

        &.fire-has-rep {
          background-image: radial-gradient(ellipse at center, rgba(255, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 75%);
        }
      }
    }

    .fire-reported-post { // This is the div inside which the post is displayed.
      padding: 10px;
      margin: 0 -10px -10px -10px;
      overflow-wrap: break-word;
      --s-prose-spacing: 1.1em;

      &.fire-deleted {
        background-color: #f4eaea;
      }

      img {
        max-width: 100%;

        &[src^='http://placehold.it'] {
          cursor: pointer;
        }
      }

      a {
        font-weight: bold;
        text-decoration: underline;
        padding: 1px 5px;
        border-radius: 3px;
        box-shadow: 0 0 10px -2px $shadow-color;
        display: inline-block;
      }

      li {
        margin-left: 10px;
      }

      h1 {
          font-size: 23px;
      }

      h2 {
          font-size: 21px;
      }

      h3 {
          font-size: 19px;
      }

      h4 {
          font-size: 17px;
      }

      h5 {
          font-size: 15px;
      }

      h6 {
          font-size: 13px;
      }

      h1, h2, h3, h4, h5, h6 {
        line-height: 1.3;
        margin: 0 0 .5em 0;
        font-weight: bold;
      }

      img,
      dl,
      p,
      pre,
      blockquote,
      table,
      .s-table-container,
      .s-link-preview,
      dd,
      ul,
      ol {
        + h1, + h2, + h3, + h4, + h5, + h6 {
          margin-top: 1em;
        }
      }

      a {
        .href {
          display: none;
          word-break: break-all;
        }

        &:hover {
          .href {
            display: inline;
          }

          .text {
            display: none;
          }
        }
      }

      pre {
        margin-bottom: 1em;
        width: auto;
        max-height: 100px;
        overflow: auto;
        font-family: $codeFont;
        font-size: 13px;
        background-color: $codeBlockColor;
        box-shadow: 0 0 10px -1px $shadow-color;
        border-radius: 3px;
        padding: 6px 10px;
        -webkit-transition: max-height $transitionTime;
        -moz-transition: max-height $transitionTime;
        transition: max-height $transitionTime;
        overflow-wrap: normal;

        &.fire-expanded {
          max-height: 400px;
        }

        &.fire-markdown {
          max-height: none;
          white-space: pre-wrap;
        }

        code {
          padding: 0;
        }
      }

      .snippet-code {
        border: 1px solid #e4e6e8;
        padding: 10px;
      }

      code {
        font-family: Fira Code,Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif;
        font-size: 13px;
        background-color: #eff0f1;
        padding: 1px 5px;
      }


      // Tags: Ideally, these would be colored per-site
      a.post-tag {
        color: rgb(57, 115, 157);
        background-color: rgb(225, 236, 244);
        border-color: transparent;
      }

      a.post-tag {
        display: inline-block;
        padding: .4em .5em;
        margin: 2px 2px 2px 0;
        font-size: 11px;
        line-height: 1;
        white-space: nowrap;
        text-decoration: none;
        text-align: center;
        border-width: 1px;
        border-style: solid;
        border-radius: 3px;
      }


      // Spoilers and blockquotes:
      // Largely copied from Stack Exchange CSS
      blockquote {
        quotes: none;
        position: relative;
        margin: 0 1em 1.1em 1em;
        padding: .8em .8em .8em 1em;
        color: #535a60;
        background-color: #fbf2d4;
        color: #0d0e0f;
        border-left: 2px solid #ffeb8e;

        &::before {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          width: 4px;
          border-radius: 8px;
          background: #c8ccd0;
        }
      } // End blockquote

      .spoiler {
        background: #eff0f1;
        border-radius: 5px;
        color: #242729;
        cursor: pointer;
        min-height: 48px;

        &::after {
          content: attr(data-spoiler) " ";
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='rgb(132, 141, 149)' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 17A8 8 0 119 1a8 8 0 010 16zM8 4v6h2V4H8zm0 8v2h2v-2H8z'%3E%3C/path%3E%3C/svg%3E");
          background-repeat: no-repeat;
          background-position: center right;
          font-size: 13px;
          color: #6a737c;
          padding-right: 22px;
          position: absolute;
          top: 1em;
          right: 1em;
          transition: opacity .1s ease-in-out;
          pointer-events: none;
        }

        > * {
          visibility: hidden;
          opacity: 0;
          transition: opacity .1s ease-in-out;
        }

        &.is-visible {
          cursor: auto;

          > * {
            visibility: visible;
            opacity: 1;
          }

          &::after {
            opacity: 0;
          }
        }
      } // End .spoiler


      // tables
      // Largely copied from Stack Exchange CSS
      &.fire-deleted .s-table th {
        background-color: var(--red-075);
      }

      .s-table-container {
        margin-bottom: var(--s-prose-spacing);
        overflow-x: auto;
        scrollbar-color: var(--scrollbar) transparent;

        &:last-child,
        &:only-child {
          margin-bottom: 0;
        }

        &::-webkit-scrollbar {
          width: 10px;
          height: 10px;
          background-color: transparent;
        }

        &::-webkit-scrollbar-track {
          border-radius: 10px;
          background-color: transparent;
        }

        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background-color: var(--scrollbar);
        }

        &::-webkit-scrollbar-corner {
          background-color: transparent;
          border-color: transparent;
        }
      } // End .s-table-container

      .s-table {
        display: table;
        width: 100%;
        max-width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        font-size: 13px;

        th,
        td {
          padding: 8px;
          border-top: 1px solid var(--black-100);
          border-left: 1px solid var(--black-100);
          border-right: 1px solid var(--black-100);
          vertical-align: middle;
          color: var(--fc-medium);
          text-align: left;
        }

        th {
          font-weight: bold;
          color: var(--fc-dark);
        }

        thead th {
          vertical-align: bottom;
          white-space: nowrap;
          background-color: var(--black-025);
          line-height: 1.15384615;
        }

        tbody th {
          font-weight: normal;
        }

        tr:last-of-type td,
        tr:last-of-type th {
          border-bottom: 1px solid var(--black-100);
        }

        tbody+tbody {
          border-top: 2px solid var(--black-100);
        }
      } // End .s-table
    } // End .fire-reported-post
  } // End body

  .fire-version-link {
    margin: 2px 2px -14px 0;
    float: right;
    font-size: 0.8em;
  }

  .fire-settings-button {
    float: right;
    margin: 0 -16px -20px 0;
    cursor: pointer;
    text-decoration: none;
    line-height: 16px;

    &:hover {
      animation: spinner 0.6s linear infinite;
    }
  }

  .fire-popup-input {
    padding: 3px 6px;
    border-radius: 6px;
    margin: 0 4px;
  }

  .fire-position-select {
    text-transform: capitalize;
  }


  &.fire-settings-popup {
    min-height: 460px;

    .fire-popup-header h2 {
      display: inline-block;
    }

    .fire-settings-section {
      width: 290px;
      display: inline-block;
      vertical-align: top;
      padding: 5px;
    }

    #toastr_duration {
      max-width: 50px;
      margin-top: 4px;
    }
  }


  @media (min-width: 0px) and (max-width: 700px) {
    width: 96vw;
    max-height: 95vh;
    left: 2vw;
    top: 2vw;
    padding: 10px 10px 16px 10px;

    .fire-popup-body {
      max-height: calc(95vh - 120px);
    }

    .fire-popup-header .fire-site-logo {
      font-size: 18px;
    }

    .fire-settings-button {
      margin: 5px 0px -10px 0;
      line-height: 8px;
    }
  }

} // End Popup container

.fire-tooltip {
  position: fixed;
  background: #eee;
  padding: 5px;
  border-radius: 4px;
  box-shadow: 0 0 10px 0 #888;
  border: 1px solid #bbb;
  pointer-events: none;
  z-index: $zIndex;
  white-space: pre-line;
  font-weight: normal;
  font-style: normal;
  font-size: 12px;
  max-width: 70vw;
  cursor: pointer;
  word-wrap: break-word;
  word-break: break-word;
  cursor: auto;
  z-index: 1000;

  .fire-detections-list {
    margin-left: 13px;
  }

  .fire-watchlist-detection, .fire-blacklist-detection {
    .fire-detection-text, .fire-detection-name {
      font-weight: bold;
    }
    .fire-detection-data {
      margin-left: 10px;
      display: block;
    }
    .fire-detection-positions {
      display: block;
    }
    .fire-detection-list-separator {
      display: none;
    }
  } // End of .fire-watchlist-detection, .fire-blacklist-detection

  .fire-detection-positions {
    text-indent: -20px;
    &::before {
      content: "▸";
    }
  }

  .fire-detection-item {
    padding-left: 15px;
    text-indent: -15px;
  }
} // End .fire-tooltip


@keyframes spinner {
  to { transform: rotate(360deg); }
}

/* Used in table CSS; Largely copied from SE's Stacks CSS*/
body,
.theme-light__forced {
    --black-025: #fafafb;
    --black-100: #d6d9dc;
    --red-075: #f9d3d780;

}

@media (prefers-color-scheme:dark) {
    body.theme-system {
        --black-025: #393939;
        --black-100: #4a4e51;
        --red-075: #72373880;
    }
}

body.theme-dark,
.theme-dark__forced {
    --black-025: #393939;
    --black-100: #4a4e51;
    --red-075: #72373880;
}

/*The CSS for Search pages results in a different font-family, margin, padding, and line-height for h2. */
body.outside .fire-popup h2 {
  font-family: inherit;
  margin: 0 0 10px 0;
  padding: 0;
  line-height: inherit;
}

[data-fire-tooltip-can-lock-open] {
  cursor: pointer;
}

.fire-spinner {
  animation: spinner 0.6s linear infinite;
}

.fire-wait {
  cursor: wait;
  pointer-events: none;
}