Migrate assets to use Webpacker

app/javascript/src/styles/specific/admin_dashboards.scss

@@ -0,0 +1,5 @@
+#c-admin-dashboards {
+  .section {
+    margin-bottom: 2em;
+  }
+}

app/javascript/src/styles/specific/api_keys.scss

@@ -0,0 +1,11 @@
+@import "../common/020_base.scss";
+
+#c-maintenance-user-api-keys {
+  #api-key {
+    @extend code;
+  }
+
+  .button_to {
+    display: inline-block;
+  }
+}

app/javascript/src/styles/specific/artists.scss

@@ -0,0 +1,46 @@
+@import "../common/000_vars.scss";
+
+div#c-artists, div#excerpt {
+  span.new-artist {
+    font-weight: bold;
+    color: #A00;
+  }
+
+  div#a-banned {
+  }
+
+  ul ul {
+    margin-left: 1em;
+  }
+
+  div#a-show {
+    p.legend {
+      margin-bottom: 2em;
+      font-size: 0.8em;
+      font-style: italic;
+    }
+  }
+
+  div#a-edit, div#a-new {
+    textarea {
+      height: 10em;
+      
+      &#artist_other_names_comma {
+        height: 3em;
+      }
+    }
+
+    .hint {
+      display: block;
+    } 
+  }
+
+  div.recent-posts {
+    margin-top: 1em;
+
+    h1 {
+      font-size: $h2_size;
+      margin: 0;
+    }
+  }
+}

app/javascript/src/styles/specific/bans.scss

@@ -0,0 +1,19 @@
+@import "../common/000_vars.scss";
+
+#c-bans #a-index {
+  tr[data-expired="true"] {
+    background-color: $success_color !important;
+
+    &:hover {
+      background-color: darken($success_color, 5%) !important;
+    }
+  }
+
+  tr[data-expired="false"] {
+    background-color: $error_color !important;
+
+    &:hover {
+      background-color: darken($error_color, 5%) !important;
+    }
+  }
+}

app/javascript/src/styles/specific/bulk_update_requests.scss

@@ -0,0 +1,9 @@
+#c-bulk-update-requests {
+  s.approved {
+    color: green;
+  }
+
+  s.failed {
+    color: red;
+  }
+}

app/javascript/src/styles/specific/comments.scss

@@ -0,0 +1,140 @@
+@import "../common/000_vars.scss";
+
+div.comments-for-post {
+  div.notices {
+    margin: 1em 0;
+  }
+
+  div.list-of-comments {
+    article.comment {
+      margin-bottom: 2em;
+      word-wrap: break-word;
+      padding: 5px;
+
+      &[data-is-sticky="true"] {
+        background: $menu_color;
+      }
+
+      div.author {
+        width: 12em;
+        float: left;
+        overflow: hidden;
+        margin-right: 1em;
+
+        h1 {
+          display: block;
+          font-size: $h3_size;
+        }
+      }
+
+      div.content {
+        margin-left: 13em;
+        min-width: 17em;
+
+        menu {
+          li {
+            margin-right: 1em;
+          }
+        }
+      }
+    }
+
+    article.comment.below-threshold:not([data-is-sticky="true"]) {
+      opacity: 0.3;
+    }
+
+    article.comment.below-threshold:hover {
+      opacity: 1.0;
+    }
+  }
+}
+
+div#c-posts {
+  div.comments-for-post {
+    float: left;
+  }
+}
+
+div#c-comments {
+  div#a-index, div#a-show {
+    div.header {
+      span.info {
+        margin-right: 1.5em;
+      }
+
+      strong, time {
+        margin-right: 0.3em;
+      }
+
+      div.notices {
+        margin: 1em 0;
+      }
+    }
+
+    div.preview {
+      float: left;
+      width: 154px;
+      height: 154px;
+      margin-right: 30px;
+      overflow: hidden;
+      text-align: center;
+    }
+
+    div.post-preview {
+      &[data-tags~=animated], &[data-file-ext=swf], &[data-file-ext=webm], &[data-file-ext=zip], &[data-file-ext=mp4] {
+        div.preview {
+          position: relative;
+
+          &:before {
+            @include animated-icon;
+          }
+        }
+      }
+
+      &[data-has-sound=true] {
+        div.preview {
+          position: relative;
+
+          &:before {
+            @include sound-icon;
+          }
+        }
+      }
+    }
+
+    div.post {
+      margin-bottom: 4em;
+
+      div.comments-for-post {
+        margin-left: 184px;
+        min-width: 30em;
+        
+        div.list-of-comments {
+          float: left;
+          width: 100%;
+        }
+      }
+    }
+    
+    div.comments-for-post {
+      div.post {
+        article.comment {
+          margin-left: 184px;
+        }
+      }
+    }
+
+    div.post.blacklisted.blacklisted-active {
+      display: none;
+    }
+  }
+}
+
+form.edit_comment div.input.boolean {
+  display: inline-block;
+
+  label {
+    font-weight: normal;
+    vertical-align: initial;
+  }
+}

app/javascript/src/styles/specific/dmails.scss

@@ -0,0 +1,18 @@
+@import "../common/000_vars.scss";
+
+div#c-dmails {
+  tr.read-false {
+    font-weight: bold;
+  }
+
+  div#preview {
+    margin: 1em 0;
+    border: 1px solid #CCC;
+    padding: 1em;
+    width: 40em;
+
+    h1 {
+      font-size: $h2_size;
+    }
+  }
+}

app/javascript/src/styles/specific/dropzone.scss

@@ -0,0 +1,41 @@
+#filedropzone {
+  border: 4px dashed #DDD;
+  padding: 0;
+  min-height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+
+  .placeholder {
+    font-style: italic;
+    color: #333;
+    height: 100%;
+  }
+
+  &.error {
+    border-color: darken(#f2dede, 30%);
+    background-color: #f2dede;
+  }
+
+  &.success {
+    border-color: darken(#dff0d8, 30%);
+    background-color: #dff0d8;
+  }
+}
+
+.dz-preview {
+  margin-bottom: 1em;
+}
+
+.dz-progress {
+  height: 20px;
+  width: 300px;
+  border: 1px solid #CCC;
+
+  .dz-upload {
+    background-color: #F5F5FF;
+    display: block;
+    height: 20px;
+  }
+}

app/javascript/src/styles/specific/explore.scss

@@ -0,0 +1,27 @@
+@import "../common/000_vars.scss";
+
+div#c-explore-posts {
+  header {
+    text-align: center;
+
+    h1 {
+      font-size: 3em;
+    }
+
+    p.byline {
+      font-size: 1.2em;
+      font-style: italic;
+    }
+  }
+
+  div.posts {
+    padding: 1em;
+    margin-bottom: 2em;
+  }
+
+  div#a-intro {
+    width: 870px;
+    margin: 0 auto;
+    text-align: center;
+  }
+}

app/javascript/src/styles/specific/favorite_groups.scss

@@ -0,0 +1,5 @@
+#c-favorite-groups #a-edit {
+  textarea {
+    height: 10em;
+  }
+}

app/javascript/src/styles/specific/favorites.scss

@@ -0,0 +1,7 @@
+@import "../common/000_vars.scss";
+
+div#c-favorites {
+  section#content > h1 {
+    font-size: $h3_size;
+  }
+}

app/javascript/src/styles/specific/forum.scss

@@ -0,0 +1,98 @@
+div.list-of-forum-posts {
+  article {
+    border: 1px solid #AAA;
+    margin: 1em 0em;
+    word-wrap: break-word;
+    box-shadow: 1px 1px 2px #AAA;
+
+    a.voted {
+      font-weight: bold;
+    }
+    
+    span.desc {
+      color: grey;
+    }
+
+    &:target {
+      background-color: #FFC;
+    }
+
+    .vote-score-up {
+      color: green;
+    }
+
+    .vote-score-meh {
+      color: goldenrod;
+    }
+
+    .vote-score-down {
+      color: red;
+    }
+
+    div.author {
+      padding: 1em 1em 0 1em;
+      width: 12em;
+      float: left;
+
+      time {
+        font-style: italic;
+      }
+    }
+
+    div.content {
+      padding: 1em;
+      margin-left: 14em;
+
+      menu {
+        margin-top: 0.5em;
+
+        ul.votes {
+          margin: 0.5em 0;
+        }
+
+        li {
+          margin-right: 1em;
+        }
+      }
+    }
+  }
+}
+
+div#c-forum-topics {
+  div.single-forum-post {
+  }
+
+  div#a-show {
+  }
+
+  span.info {
+    color: #AAA;
+  }
+
+  span.new {
+    font-size: 80%;
+    color: red;
+    margin-right: 0.5em;
+  }
+
+  span.locked-topic {
+    color: gray;
+  }
+
+  span.level-topic {
+    color: #f66;
+    font-weight: bold;
+  }
+  
+  tr.forum-topic-row td:last-child {
+    white-space: nowrap;
+  }
+}
+
+#c-forum-posts #a-index {
+  tr[data-topic-is-deleted="true"] .forum-post-topic-title::after,
+  tr[data-is-deleted="true"] .forum-post-excerpt::after {
+    content: " (deleted)";
+    color: gray;
+  }
+}

app/javascript/src/styles/specific/iqdb_queries.scss

@@ -0,0 +1,17 @@
+div#c-iqdb-queries {
+  div#a-check {
+    article.post-preview {
+      height: 180px;
+      width: 180px;
+      border: lightgrey solid 1px;
+
+      img {
+        margin-top: 10px;
+      }
+    }
+
+    #filedropzone {
+      margin: 1em 0;
+    }
+  }
+}

app/javascript/src/styles/specific/keyboard_shortcuts.scss

@@ -0,0 +1,21 @@
+@import "../common/000_vars.scss";
+
+div#c-static {
+  div#a-keyboard-shortcuts {
+    overflow: visible;
+
+    section {
+      min-width: 20%;
+      float: left;
+      margin-bottom: 1em;
+
+      h1 {
+        font-size: $h3_size;
+      }
+
+      li {
+        margin-bottom: 0.5em;
+      }
+    }
+  }
+}

app/javascript/src/styles/specific/maintenance.scss

@@ -0,0 +1,5 @@
+div#c-maintenance-user-login-reminders {
+  div#a-new {
+    width: 50em;
+  }
+}

app/javascript/src/styles/specific/meta_searches.scss

@@ -0,0 +1,5 @@
+#c-meta-searches {
+  section {
+    margin-bottom: 2em;
+  }
+}

app/javascript/src/styles/specific/mod_queue.scss.erb

@@ -0,0 +1,60 @@
+@import "../common/000_vars.scss";
+
+div#c-moderator-post-queues {
+  div.post {
+    margin-bottom: 4em;
+    overflow: hidden;
+
+    &.post-pos-score {
+      background: rgb(230, 255, 230);
+    }
+
+    &.post-neg-score {
+      background: rgb(255, 230, 230);
+    }
+
+    aside {
+      float: left;
+      width: 220px;
+      text-align: right;
+      padding-right: 20px;
+    }
+
+    section {
+      float: left;
+      width: 800px;
+    }
+
+    <% Danbooru.config.modqueue_quality_warning_tags.each do |tag| %>
+      &[data-tags~="<%= tag %>"] {
+        background-color: $preview_quality_warning_color;
+      }
+    <% end %>
+
+    <% Danbooru.config.modqueue_sample_warning_tags.each do |tag| %>
+      &[data-tags~="<%= tag %>"] {
+        background-color: $preview_sample_warning_color;
+      }
+    <% end %>
+
+    &[data-tags~=animated], &[data-file-ext=swf], &[data-file-ext=webm], &[data-file-ext=zip], &[data-file-ext=mp4] {
+      aside:before {
+        @include animated-icon;
+      }
+    }
+
+    &[data-has-sound=true] {
+      aside:before {
+        @include sound-icon;
+      }
+    }
+  }
+
+  div#moderation-guideline {
+    width: 900px;
+
+    h1 {
+      font-size: $h2_size;
+    }
+  }
+}

app/javascript/src/styles/specific/moderator_dashboard.scss

@@ -0,0 +1,42 @@
+div#c-moderator-dashboards {
+  div#col1 {
+    width: 45%;
+    float: left;
+    padding-right: 5%;
+  }
+
+  div#col2 {
+    width: 45%;
+    float: left;
+  }
+
+  div.activity {
+    margin-bottom: 1em;
+  }
+
+  div#ip-addr-search {
+    margin-bottom: 2em;
+
+    .hint {
+      display: block;
+    }
+  }
+
+  div#activity-search {
+    margin-bottom: 2em;
+  }
+
+  table {
+    width: 100%;
+  }
+
+  caption {
+    font-size: 1.1em;
+    font-weight: bold;
+    text-align: left;
+  }
+
+  th {
+    text-align: left;
+  }
+}

app/javascript/src/styles/specific/news_updates.scss

@@ -0,0 +1,7 @@
+div#c-news-updates {
+  div#a-edit, div#a-new {
+    .hint {
+      display: block;
+    } 
+  }
+}

app/javascript/src/styles/specific/notes.scss

@@ -0,0 +1,114 @@
+@import "../common/000_vars.scss";
+
+div#note-container {
+  position: absolute;
+  z-index: 50;
+
+  div.note-body {
+    position: absolute;
+    border: 1px solid black;
+    background: #FFE;
+    min-width: 140px;
+    min-height: 1em;
+    line-height: normal;
+    cursor: pointer;
+    padding: 4px;
+    z-index: 150;
+    overflow: auto;
+
+    h1, h2, h3, h4, h5, h6, a, span, div, blockquote, br, p, ul, li, ol, em, strong, small, big, b, i, font, u, s, code, center {
+      line-height: normal;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+
+    b, strong {
+      font-weight: bold;
+    }
+
+    i, em {
+      font-style: italic;
+    }
+
+    small {
+      font-size: 0.8em;
+    }
+
+    ruby {
+      rt {
+        font-size: 0.8em;
+      }
+    }
+
+    ul {
+      margin-left: 1em;
+      margin-bottom: 1em;
+
+      ul {
+        margin-bottom: 0;
+      }
+
+      li {
+        list-style-type: disc;
+
+        + br {
+          display: none;
+        }
+      }
+    }
+  }
+
+  div.note-box {
+    position: absolute;
+    border: 1px solid white;
+    min-width: 5px;
+    min-height: 5px;
+    width: 100px;
+    height: 100px;
+    cursor: move;
+    background: transparent;
+    line-height: normal;
+
+    div.note-box-inner-border {
+      border: 1px solid black;
+      background: #FFE;
+    }
+
+    div.note-box-inner-border.unsaved {
+      border: 1px solid red;
+    }
+
+    &.embedded {
+      div.bg {
+        height: 100%;
+        text-align: center;
+        display: table-cell;
+        vertical-align: middle;
+      }
+
+      div.note-box-inner-border {
+        text-align: center;
+        display: table-cell;
+        vertical-align: middle;
+      }
+    }
+
+    &.note-box-highlighted {
+      outline: 2px solid $note_highlight_color;
+    }
+  }
+}
+
+div#note-preview {
+  position: absolute;
+  border: 1px solid red;
+  opacity: 0.6;
+  display: none;
+  background: white;
+}
+
+div.note-edit-dialog {
+  font-size: 0.8em;
+}

app/javascript/src/styles/specific/pools.scss

@@ -0,0 +1,92 @@
+@import "../common/000_vars.scss";
+
+a.pool-category-series, .pool-category-series a {
+  color: #A0A;
+
+  &:hover {
+    color: #B6B;
+  }
+}
+
+a.pool-category-collection, .pool-category-collection a {
+  color: $link_color;
+
+  &:hover {
+    color: $link_hover_color;
+  }
+}
+
+div#add-to-pool-dialog {
+  font-size: 0.8em;
+
+  form {
+    margin-bottom: 1em;
+  }
+
+  li {
+    margin-left: 1em;
+    cursor: pointer;
+  }
+
+  h1 {
+    font-size: $h3_size;
+  }
+  
+  .hint {
+    display: block;
+  }
+}
+
+div#c-pools {
+  h1 {
+    font-size: $h2_size;
+  }
+
+  textarea {
+    height: 10em;
+  }
+
+  div#a-show {
+    div#description {
+      margin-bottom: 1em;
+    }
+  }
+}
+
+div#c-pool-orders, div#c-favorite-group-orders {
+  h1 {
+    font-size: $h2_size;
+  }
+
+  div#a-edit {
+    ul.ui-sortable {
+      list-style-type: none;
+
+      li {
+        cursor: pointer;
+        margin-right: 20px;
+        margin-bottom: 20px;
+        min-width: 150px;
+        min-height: 150px;
+        padding: 10px;
+        @include inline-block;
+      }
+
+      li.ui-state-default {
+        background: none;
+      }
+
+      li.ui-state-placeholder {
+        background: none;
+      }
+    }
+  }
+}
+
+ul.inline-pool-list {
+  display: inline;
+
+  li {
+    display: inline;
+  }
+}

app/javascript/src/styles/specific/post_appeals.scss

@@ -0,0 +1,5 @@
+div#c-post-appeals {
+  li {
+    list-style-type: disc;
+  }
+}

app/javascript/src/styles/specific/post_events.scss

@@ -0,0 +1,11 @@
+div#c-post-events {
+  #a-index {
+    tr.resolved-true {
+      background: #DDD;
+    }
+
+    tr.resolved-false {
+      background: #FFF;
+    }
+  }
+}

app/javascript/src/styles/specific/post_flags.scss

@@ -0,0 +1,13 @@
+div#c-post-flags {
+  li {
+    list-style-type: disc;
+  }
+
+  tr.resolved-true {
+    background: #DDD !important;
+  }
+
+  tr.resolved-false {
+    background: #FFF !important;
+  }
+}

app/javascript/src/styles/specific/post_mode_menu.scss

@@ -0,0 +1,71 @@
+body.mode-view {
+  background-color: #FFF;
+}
+
+body.mode-edit {
+  background-color: #5C5;
+}
+
+body.mode-tag-script {
+  background-color: #D6D;
+}
+
+body.mode-add-fav {
+  background-color: #FFA;
+}
+
+body.mode-remove-fav {
+  background-color: #FFA;
+}
+
+body.mode-rating-s {
+  background-color: #6F6;
+}
+
+body.mode-rating-q {
+  background-color: #AAA;
+}
+
+body.mode-rating-e {
+  background-color: #F66;
+}
+
+body.mode-vote-up {
+  background-color: #AFA;
+}
+
+body.mode-vote-down {
+  background-color: #FAA;
+}
+
+body.mode-lock-rating {
+  background-color: #AA3;
+}
+
+body.mode-lock-note {
+  background-color: #3AA;
+}
+
+body.mode-approve {
+  background-color: #48C;
+}
+
+body.mode-unapprove {
+  background-color: #F66;
+}
+
+body.mode-add-to-pool {
+  background-color: #26A;
+}
+
+body.mode-translation {
+  background-color: #5CD;
+}
+
+body.mode-ban {
+  background-color: #F33;
+}
+
+#page, #top, #page-footer {
+  background-color: white;
+}

app/javascript/src/styles/specific/post_tooltips.scss

@@ -0,0 +1,117 @@
+@import "../common/000_vars.scss";
+
+$tooltip-line-height: 16px;
+$tooltip-body-height: $tooltip-line-height * 6; // 6 lines high.
+$tooltip-width: 164px * 3 - 10; // 3 thumbnails wide.
+
+@mixin thin-scrollbar {
+  &::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+
+  &::-webkit-scrollbar-button {
+    width: 0px;
+    height: 0px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #999999;
+    border: 0px none #FFFFFF;
+    border-radius: 0px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #AAAAAA;
+  }
+
+  &::-webkit-scrollbar-thumb:active {
+    background: #AAAAAA;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #EEEEEE;
+    border: 0px none #ffffff;
+    border-radius: 0px;
+  }
+
+  &::-webkit-scrollbar-track:hover {
+    background: #EEEEEE;
+  }
+
+  &::-webkit-scrollbar-track:active {
+    background: #EEEEEE;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+}
+
+
+.post-tooltip {
+  max-width: $tooltip-width;
+  min-width: $tooltip-width;
+  box-sizing: border-box;
+  font-size: 11px;
+  line-height: $tooltip-line-height;
+  border-color: #767676;
+
+  .qtip-content {
+    padding: 0;
+
+    > * {
+      padding: 2px 6px;
+    }
+
+    .post-tooltip-body {
+      @include thin-scrollbar;
+      max-height: $tooltip-body-height;
+      overflow-y: auto;
+
+      li {
+        margin-right: 0;
+      }
+    }
+
+    .post-tooltip-header {
+      background-color: $menu_color;
+      display: flex;
+      white-space: nowrap;
+      overflow: hidden;
+
+      .post-tooltip-header-left {
+        flex: 1;
+      }
+
+      .post-tooltip-header-right {
+        flex: 1;
+        text-align: right;
+      }
+
+      .fa-xs {
+        vertical-align: baseline;
+      }
+
+      .post-tooltip-disable {
+        margin-left: 0.5em;
+      }
+    }
+
+    .post-tooltip-info {
+      margin-left: 0.5em;
+      color: #555;
+      font-size: 10px;
+    }
+  }
+
+  &:not(:hover) {
+    a, span {
+      color: #777 !important;
+    }
+  }
+
+  &.post-tooltip-loading {
+    visibility: hidden;
+  }
+}

app/javascript/src/styles/specific/post_versions.scss

@@ -0,0 +1,9 @@
+@import "../common/000_vars.scss";
+
+div#c-post-versions {
+  div#a-index {
+    tr.hilite {
+      background: $highlight_color;
+    }
+  }
+}

app/javascript/src/styles/specific/posts.scss

@@ -0,0 +1,550 @@
+@import "../common/000_vars.scss";
+
+article.post-preview {
+  height: 154px;
+  width: 154px;
+  margin: 0 10px 10px 0;
+  overflow: hidden;
+  text-align: center;
+  @include inline-block;
+  position: relative;
+
+  a {
+    @include inline-block;
+  }
+
+  &.pooled {
+    height: 214px;
+  }
+
+  .desc {
+   font-size: 80%;
+  }
+
+  img {
+    margin: auto;
+  }
+
+  &[data-tags~=animated]:before, &[data-file-ext=swf]:before, &[data-file-ext=webm]:before, &[data-file-ext=mp4]:before, &[data-file-ext=zip]:before {
+    @include animated-icon;
+  }
+
+  &[data-has-sound=true]:before {
+    @include sound-icon;
+  }
+}
+
+#iqdb-similar {
+  overflow: hidden;
+
+  .post-preview {
+    height: auto;
+    margin-bottom: 0;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+}
+
+#saved-searches-nav {
+  margin-top: 1em;
+}
+
+a.blacklisted-active {
+  text-decoration: line-through;
+}
+
+.post-preview.blacklisted-active, #image-container.blacklisted-active {
+  display: none;
+}
+
+#excerpt p.links {
+  margin-top: 1em;
+}
+
+#image-container p.desc {
+  font-size: 80%;
+  color: grey;
+  font-style: italic;
+}
+
+#open-edit-dialog {
+  padding: 0;
+}
+
+#edit-dialog textarea {
+  margin-bottom: 0.25em;
+}
+
+.post-preview {
+  img {
+    border: 2px solid transparent;
+  }
+
+
+  &.post-status-has-children img {
+    border-color: $preview_has_children_color;
+  }
+
+  &.post-status-has-parent img {
+    border-color: $preview_has_parent_color;
+  }
+  
+  &.post-status-has-children.post-status-has-parent img {
+    border-color: $preview_has_children_color $preview_has_parent_color $preview_has_parent_color $preview_has_children_color;
+  }
+
+
+  &.post-status-deleted img {
+    border-color: $preview_deleted_color;
+  }
+
+  &.post-status-has-children.post-status-deleted img {
+    border-color: $preview_has_children_color $preview_deleted_color $preview_deleted_color $preview_has_children_color;
+  }
+
+  &.post-status-has-parent.post-status-deleted img {
+    border-color: $preview_has_parent_color $preview_deleted_color $preview_deleted_color $preview_has_parent_color;
+  }
+
+  &.post-status-has-children.post-status-has-parent.post-status-deleted img {
+    border-color: $preview_has_children_color $preview_deleted_color $preview_deleted_color $preview_has_parent_color;
+  }
+
+
+  /* Pending and flagged posts have blue borders (except in the modqueue). */
+  &.post-status-pending:not(.mod-queue-preview) img,
+  &.post-status-flagged:not(.mod-queue-preview) img {
+    border-color: $preview_pending_color;
+  }
+
+  &.post-status-has-children.post-status-pending:not(.mod-queue-preview) img,
+  &.post-status-has-children.post-status-flagged:not(.mod-queue-preview) img {
+    border-color: $preview_has_children_color $preview_pending_color $preview_pending_color $preview_has_children_color;
+  }
+
+  &.post-status-has-parent.post-status-pending:not(.mod-queue-preview) img,
+  &.post-status-has-parent.post-status-flagged:not(.mod-queue-preview) img {
+    border-color: $preview_has_parent_color $preview_pending_color $preview_pending_color $preview_has_parent_color;
+  }
+
+  &.post-status-has-children.post-status-has-parent.post-status-pending:not(.mod-queue-preview) img,
+  &.post-status-has-children.post-status-has-parent.post-status-flagged:not(.mod-queue-preview) img {
+    border-color: $preview_has_children_color $preview_pending_color $preview_pending_color $preview_has_parent_color;
+  }
+}
+
+/* Flagged posts have red borders for approvers. */
+body[data-user-can-approve-posts="true"] .post-preview {
+  &.post-status-flagged img {
+    border-color: $preview_flagged_color;
+  }
+
+  &.post-status-has-children.post-status-flagged img {
+    border-color: $preview_has_children_color $preview_flagged_color $preview_flagged_color $preview_has_children_color;
+  }
+
+  &.post-status-has-parent.post-status-flagged img {
+    border-color: $preview_has_parent_color $preview_flagged_color $preview_flagged_color $preview_has_parent_color;
+  }
+
+  &.post-status-has-children.post-status-has-parent.post-status-flagged img {
+    border-color: $preview_has_children_color $preview_flagged_color $preview_flagged_color $preview_has_parent_color;
+  }
+}
+
+.post-preview.current-post {
+  background-color: rgba(0,0,0,0.1);
+}
+
+#has-parent-relationship-preview, #has-children-relationship-preview {
+  overflow-x: auto;
+  white-space: nowrap;
+  
+  article.post-preview {
+    width: auto;
+    border: none;
+    margin: 0;
+    padding: 5px 5px 10px;
+  }
+}
+
+.post-count {
+  color: #CCC;
+  margin-left: 0.2em;
+}
+
+.low-post-count {
+  color: red;
+}
+
+div#c-posts {
+  .fav-buttons {
+    font-size: 14pt;
+    text-align: center;
+    margin: 0.5em 0;
+
+    input[type=submit] {
+      padding: 0.2em 0.75em;
+    }
+  }
+
+  #ugoira-controls {
+    div#seek-slider {
+      margin-top: 0.5em;
+      float: right;
+      overflow: visible;
+      background: #EEE;
+
+      .ui-progressbar-value {
+        background: white;
+      }
+    }
+
+    #save-video-link {
+      margin: 0.5em 0;
+    }
+
+    button {
+      margin-top: 0.3em;
+    }
+
+    #ugoira-load-progress {
+      display: inline;
+      margin-left: 17px;
+    }
+  }
+
+  .outer-recent-searches {
+    overflow: hidden;
+  }
+
+  div.notice {
+    font-size: 0.8em;
+    padding: 0.5em;
+    margin-bottom: 0.5em;
+    overflow: hidden;
+
+    ul {
+      margin-left: 1em;
+    }
+
+    p {
+      margin: 0;
+    }
+
+    .resolved {
+      margin-left: 0.5em;
+      font-weight: bold;
+    }
+
+    &.notice-parent {
+      border-color: #C0FCC0;
+      background: #D8FCD9;
+    }
+
+    &.notice-child {
+      border-color: #FCFCC0;
+      background: #FBFCD8;
+    }
+
+    &.notice-pending {
+      border-color: #C0C0FC;
+      background: #D8D8FC;
+    }
+
+    &.notice-flagged {
+      border-color: #FCC0C0;
+      background: #FCD9D8;
+    }
+
+    &.notice-deleted {
+      border-color: #FF8C8C;
+      background: #FFA7A5;
+    }
+
+    &.notice-appealed {
+      border-color: #C0ECFC;
+      background: #D8F2FC;
+    }
+
+    &.notice-resized {
+      border-color: #E4C0FC;
+      background: #EED8FC;
+    }
+  }
+
+  div.nav-notice {
+    padding: 0.5em;
+    margin: 1em 0;
+    background: #EEE;
+    border: 1px solid #AAA;
+    position: relative;
+
+    p {
+      margin: 0;
+      text-align: center;
+    }
+  }
+
+  aside#sidebar #tag-list h2 {
+    font-size: $h4_size;
+  }
+
+  aside#sidebar > section > ul {
+    margin-bottom: 1em;
+  }
+
+  aside#sidebar > section > ul li {
+    list-style-type: none;
+  }
+
+  aside#sidebar > section > ul ul li {
+    margin-left: 1em;
+  }
+
+  div#a-index {
+    menu#post-sections {
+      margin-bottom: 0.5em;
+      font-size: $h3_size;
+
+      li {
+        padding: 0 1em 0.5em 0;
+
+        &.active {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+
+  div#a-show {
+    .active {
+      font-weight: bold;
+    }
+
+    .recommended-posts {
+      margin-top: 1em;
+    }
+
+    #add-fav-button, #remove-fav-button {
+      margin-top: 1em;
+    }
+
+    menu#post-sections {
+      margin: 0;
+      font-size: $h3_size;
+
+      li {
+        padding: 0 1em 0 0;
+      }
+
+      div.share a {
+        margin: 0;
+      }
+    }
+
+    div.notices {
+      margin: 1em 0;
+    }
+
+    section {
+      margin-top: 1em;
+    }
+
+    span.quick-mod {
+      float: right;
+    }
+
+    .pool-name, .search-name {
+      word-wrap: break-word;
+    }
+
+    textarea {
+      margin-bottom: 0.25em;
+    }
+
+    #favlist {
+      margin-left: 1em;
+      word-wrap: break-word;
+    }
+
+    #search-seq-nav + #pool-nav, #search-seq-nav + #favgroup-nav, #pool-nav + #favgroup-nav {
+      margin-top: 0.5em;
+    }
+
+    #pool-nav, #search-seq-nav, #favgroup-nav {
+      li {
+        position: relative;
+        text-align: center;
+        padding: 0 5.5em;
+
+        .prev {
+          position: absolute;
+          left: 2em;
+          top: 0;
+        }
+
+        .next {
+          position: absolute;
+          right: 2em;
+          top: 0;
+        }
+
+        .first {
+          position: absolute;
+          left: 0.5em;
+          top: 0;
+        }
+
+        .last {
+          position: absolute;
+          right: 0.5em;
+          top: 0;
+        }
+
+        &:hover {
+          background: rgb(250, 250, 250);
+        }
+      }
+    }
+
+    span.close-button {
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      cursor: pointer;
+    }
+    
+    div.comments-for-post {
+      width:100%
+    }
+
+    #artist-commentary {
+      border: 1px solid #CCC;
+      border-radius: 8px;
+      background-color: #F8F8F8;
+      margin-top: 1em;
+      padding: 0.5em;
+
+      #original-artist-commentary, #translated-artist-commentary {
+        max-height: 20em;
+        overflow-y: auto;
+      }
+
+      .disabled {
+        color: gray;
+      }
+    }
+  }
+
+  div#quick-edit-div {
+    textarea {
+      width: 70%;
+      height: 4em;
+      display: block;
+    }
+  }
+}
+
+div#c-post-versions, div#c-artist-versions {
+  div#a-index {
+    a {
+      word-wrap: break-word
+    }
+  }
+}
+
+div#c-posts, div#c-uploads {
+  /* Fetch source data box */
+  div#source-info {
+    border-radius: 4px;
+    margin: 1em 0;
+    padding: 1em;
+    border: 1px solid #666;
+
+    p {
+      margin: 0;
+    }
+
+    > ul {
+      display: none;
+
+      .source-tags {
+        a {
+          margin-right: 1em;
+        }
+      }
+    }
+  }
+}
+
+div#c-explore-posts {
+  a.desc {
+    font-weight: bold;
+    margin: 0 0.5em;
+  }
+
+  #popular-nav-links {
+    text-align: center;
+  }
+
+  .period {
+    margin: 0 5em;
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
+
+.inline-blacklist {
+  #blacklist-box {
+    margin-bottom: 1em;
+  }
+
+  #blacklist-list {
+    display: inline;
+  }
+
+  #blacklist-list li {
+    display: inline;
+    margin-right: 1em;
+
+    a {
+      color: $link_color;
+      cursor: pointer;
+    }
+
+    span.count {
+      color: #AAA;
+      margin-left: 0;
+    }
+  }
+}
+
+div#unapprove-dialog {
+  p {
+    margin-bottom: 1em;
+  }
+}
+
+textarea[data-autocomplete="tag-edit"] {
+  font-family: monospace;
+}
+
+#add-commentary-dialog {
+  input {
+    width: 70%;
+  }
+
+  input[type=checkbox] {
+    width: auto;
+  }
+
+  textarea {
+    font-size: 1em;
+    width: 100%;
+  }
+}

app/javascript/src/styles/specific/related_tags.scss

@@ -0,0 +1,52 @@
+@import "../common/000_vars.scss";
+
+div#related-tags-container {
+  padding-right: 2em;
+
+  h1 {
+    font-size: $h3_size;
+  }
+}
+
+div.related-tags {
+  width: 100%;
+  margin-bottom: 1em;
+  padding: 1em;
+  background: #EEE;
+  overflow: auto;
+  border-radius: 4px;
+
+  div.tag-column {
+    max-width: 15em;
+    margin-right: 2em;
+    float: left;
+
+    ul {
+      margin: 0;
+
+      li {
+        em {
+          font-weight: bold;
+        }
+
+        svg {
+          margin-top: 2px;
+          cursor: pointer;
+        }
+
+        a {
+          min-width: 3em;
+        }
+
+        a.selected {
+          background-color: $link_color;
+          color: white;
+        }
+      }
+    }
+  }
+  
+  div.wide-column {
+    max-width: 45em;
+  }
+}

app/javascript/src/styles/specific/reports.scss

@@ -0,0 +1,25 @@
+#c-reports {
+	#a-similar-users {
+    div.box {
+      h2, h3 {
+        color: #333;
+      }
+
+      margin-bottom: 2em;
+    }
+
+    span.accuracy {
+      color: #666;
+    }
+
+    /* clearfix hacks */
+    div.box:before, div.box:after {
+      content: "";
+      display: table;
+    }
+
+    div.box:after {
+      clear: both;
+    }
+  }
+}

app/javascript/src/styles/specific/saved_searches.scss

@@ -0,0 +1,7 @@
+#c-saved-searches {
+  #a-index {
+    table {
+      margin-bottom: 2em;
+    }
+  }
+}

app/javascript/src/styles/specific/sessions.scss

@@ -0,0 +1,11 @@
+@import "../common/000_vars.scss";
+
+div#c-sessions {
+  div#a-new {
+    label#remember-label {
+      display: inline;
+      font-weight: normal;
+      font-style: italic;
+    }
+  }
+}

app/javascript/src/styles/specific/site_map.scss

@@ -0,0 +1,25 @@
+@import "../common/000_vars.scss";
+
+div#c-static {
+  div#a-site-map {
+    width: 80em;
+
+    h1 {
+      display: none;
+    }
+
+    section {
+      width: 20em;
+      float: left;
+
+      h1 {
+        display: block;
+        font-size: $h3_size;
+      }
+
+      ul {
+        margin-bottom: 1.5em;
+      }
+    }
+  }
+}

app/javascript/src/styles/specific/tags.scss

@@ -0,0 +1,13 @@
+div#c-tags {
+  div#a-index table.striped {
+    td:nth-child(1), th:nth-child(1) {
+      width: 5em;
+      text-align: right;
+    }
+
+    td:nth-child(2), th:nth-child(2) {
+      padding-left: 1em;
+      width: 40em;
+    }
+  }
+}

app/javascript/src/styles/specific/terms_of_service.scss

@@ -0,0 +1,26 @@
+@import "../common/000_vars.scss";
+
+div#c-static div#a-terms-of-service {
+  width: 40em;
+
+  h1 {
+    font-size: $h2_size;
+  }
+
+  p {
+    margin-bottom: 1em;
+  }
+
+  ul {
+    margin-left: 1em;
+    margin-bottom: 1em;
+  }
+
+  li {
+    list-style-type: disc;
+  }
+
+  section {
+    margin-bottom: 2em;
+  }
+}

app/javascript/src/styles/specific/uploads.scss

@@ -0,0 +1,68 @@
+div#c-uploads {
+  div#a-new {
+    .artist-commentary {
+      margin-top: 1em;
+      margin-left: 1em;
+    }
+
+    div#upload-guide-notice {
+      margin-bottom: 2em;
+    }
+
+    ul#links {
+      margin-bottom: 1em;
+    }
+
+    label[for="upload_as_pending"] {
+      display: inline;
+    }
+
+    fieldset.ratings {
+      label {
+        display: inline;
+      }
+    }
+
+    textarea {
+      margin-bottom: 0.25em;
+    }
+
+    .hint {
+      display: block;
+    }
+
+    div.field_with_errors {
+      display: inline;
+    }
+  }
+
+  div#a-index {
+    .info {
+      margin-right: 1.5em;
+    }
+  }
+
+  div.upload-preview {
+    display: inline-block;
+
+    > a {
+      width: 154px;
+      height: 154px;
+      margin: 0 10px 10px 0;
+      display: inline-block;
+
+      img {
+        margin: auto;
+        border: 2px solid transparent;
+
+        max-width: 154px;
+        max-height: 154px;
+      }
+    }
+
+    .caption-top {
+      font-size: 0.8em;
+      margin-bottom: 0;
+    }
+  }
+}

app/javascript/src/styles/specific/user_deletions.scss

@@ -0,0 +1,10 @@
+div#c-maintenance-user-deletions {
+  ul {
+    margin-left: 1em;
+    margin-bottom: 1em;
+  }
+
+  li {
+    list-style-type: disc;
+  }
+}

app/javascript/src/styles/specific/user_feedback.scss

@@ -0,0 +1,17 @@
+div#c-user-feedbacks, div#c-moderator-dashboards div#col2 {
+  .feedback-category-positive {
+    background: #DDFFDD !important;
+  }
+
+  .feedback-category-negative {
+    background: #FFDDDD !important;
+  }
+
+  .feedback-category-neutral {
+    background: #FFFFFF !important;
+  }
+  
+  blockquote {
+    padding: 0.5em;
+  }
+}

app/javascript/src/styles/specific/user_name_change_requests.scss

@@ -0,0 +1,25 @@
+#c-user-name-change-requests {
+  .feedback-category-positive {
+    background: #DDFFDD !important;
+  }
+
+  .feedback-category-negative {
+    background: #FFDDDD !important;
+  }
+  
+  li {
+    margin-bottom: 1em;
+  }
+  
+  form {
+    margin-bottom: 2em;
+  }
+  
+  p {
+    margin: 0;
+  }
+  
+  section {
+    margin-bottom: 1em;
+  }
+}

app/javascript/src/styles/specific/user_upgrades.scss

@@ -0,0 +1,56 @@
+div#c-user-upgrades {
+  div#a-new {
+    max-width: 40em;
+    font-size: 1.2em;
+
+    form.stripe {
+      display: inline;
+    }
+
+    div.section {
+      margin-bottom: 2em;
+    }
+
+    div#feature-comparison {
+      overflow: hidden;
+      margin-bottom: 1em;
+
+      table {
+        width: 100%;
+
+        colgroup {
+          width: 10em;
+        }
+
+        colgroup#basic {
+        }
+
+        colgroup#gold  {
+          background-color: #FFF380;
+        }
+
+        colgroup#platinum {
+          background-color: #eee;
+        }
+
+        td, th {
+          text-align: center;
+          vertical-align: top;
+          padding: 0.5em 0;
+        }
+
+        tbody {
+          tr:hover {
+            background-color: #FEF;
+          }
+        }
+
+        p.cost-footnote {
+          font-size: 80%;
+          color: gray;
+          margin: 0;
+        }
+      }
+    }
+  }
+}

app/javascript/src/styles/specific/users.scss

@@ -0,0 +1,89 @@
+@import "../common/000_vars.scss";
+
+div#c-users {
+  div#a-show {
+    div.box {
+      h2, h3 {
+        color: #333;
+      }
+
+      margin-bottom: 2em;
+    }
+
+    /* clearfix hacks */
+    div.box:before, div.box:after {
+      content: "";
+      display: table;
+    }
+
+    div.box:after {
+      clear: both;
+    }
+
+    table.user-statistics {
+      tr {
+        height: 1.75em;
+      }
+
+      th {
+        width: 15%;
+        text-align: right;
+        padding-right: 1em;
+        vertical-align: top;
+      }
+
+      td {
+        width: 85%;
+        vertical-align: top;
+      }
+
+      p {
+        margin-bottom: 0.5em;
+      }
+    }
+  }
+
+  div#a-edit {
+    h1 {
+      margin: 0.5em 0;
+    }
+
+    h2 {
+      margin: 0.5em 0;
+    }
+
+    div.input {
+      margin-bottom: 2em;
+    }
+
+    div.input span.hint {
+      display: block;
+      max-width: 70%;
+    }
+
+    .active {
+      color: black;
+    }
+  }
+
+  div#a-new {
+    max-width: 60em;
+
+    p {
+      font-size: 1.2em;
+      margin-bottom: 1em;
+      line-height: 1.4em;
+    }
+
+    footer.nav-links {
+      font-size: 1.4545em;
+      font-weight: bold;
+      text-align: center;
+      display: block;
+    }
+
+    div#p2 ul {
+      margin-bottom: 2em;
+    }
+  }
+}

app/javascript/src/styles/specific/wiki_page_versions.scss

@@ -0,0 +1,25 @@
+div#c-wiki-page-versions {
+  #a-diff {
+    del {
+      background: #FCC;
+      text-decoration: none;
+    }
+
+    ins {
+      background: #CFC;
+      text-decoration: none;
+    }
+  }
+
+  #a-index {
+    table {
+      margin-bottom: 1em;
+    }
+  }
+
+  #a-show {
+    span.version {
+      color: #AAA;
+    }
+  }
+}

app/javascript/src/styles/specific/wiki_pages.scss

@@ -0,0 +1,19 @@
+div#c-wiki-pages {
+  form span.hint {
+    display: block;
+  }
+
+  #a-new {
+    div.notice {
+      font-size: 0.8em;
+      padding: 1em;
+      margin: 1em 0;
+    }
+  }
+}
+
+.wiki-other-name {
+  background-color: #EEE;
+  padding: 3px;
+  border-radius: 3px;
+}

app/javascript/src/styles/specific/z_responsive.scss

@@ -0,0 +1,283 @@
+@import "../common/000_vars.scss";
+
+#desktop-version-link {
+  display: none;
+}
+
+#searchbox-redirect-link {
+  display: none;
+}
+
+@media screen and (max-width: 660px) {
+  #desktop-version-link {
+    display: inline;
+  }
+
+  #searchbox-redirect-link {
+    display: inline;
+  }
+
+  #saved-searches-nav {
+    display: none;
+  }
+
+  div#page aside#sidebar {
+    padding: 5px;
+
+    input#tags {
+      width: 80%;
+    }
+
+    button[type=submit] {
+      font-size: 1.4em;
+      background-color: #EEE;
+      height: 42px;
+      padding: 2px 10px;
+    }
+  }
+
+  div#page {
+    padding: 0 0.25vw;
+    > div /* div#c-$controller */ {
+      > div /* div#a-$action */ {
+        display: flex;
+        flex-direction: column;
+
+        /* Move #sidebar below #content. */
+        > aside#sidebar {
+          font-size: 1.5em;
+          float: none;
+          width: auto;
+          order: 2;
+        }
+      }
+    }
+  }
+
+  #maintoggle {
+    display: block;
+    font-weight: bold;
+    position: absolute;
+    top: 3vw;
+    right: 4vw;
+    font-size: 2em;
+
+    &.toggler-active {
+      background-color: lighten($link_color, 25%);
+      color: #000;    
+    }
+  }
+
+  /* Make the quick search box in the navbar full width. */
+  header#top menu form input {
+    width: auto;
+  }
+
+  h1 {
+    display: none;
+  }
+
+  form {
+    input[type=text] {
+      vertical-align: top;
+      font-size: 24pt;
+      border: 1px solid #c5c5c5;
+    }
+
+    textarea {
+      vertical-align: top;
+      border: 1px solid #c5c5c5;
+    }
+
+    input[type=submit] {
+      font-size: 160%;
+    }
+
+    input[type=submit].tiny {
+      font-size: 120%;
+      vertical-align: top;
+    }
+  }
+
+  div#page section#content {
+    margin: 0;
+    padding: 0;
+  }
+
+  #comments h2 {
+    display: none;
+  }
+
+  div.paginator {
+    font-size: 24pt;
+    font-weight: bold;
+    text-align: center;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    margin-top: 1em;
+
+    li {
+      display: inline-block;
+      margin: 0 0.25em;
+
+      a, span {
+        margin: 0;
+        padding: 0;
+        border: none;
+      }
+
+      &.current-page {
+        text-align: center;
+      }
+
+      &.arrow:last-child {
+        text-align: right;
+      }
+
+      &.numbered-page, &.more {
+        display: none;
+      }
+    }
+  }
+
+  #posts #posts-container {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  article.post-preview {
+    float: none;
+    margin: 0; 
+    text-align: center;
+    vertical-align: middle;
+    display: inline-block;
+
+    a {
+      margin: 0 auto;
+    }
+
+    img {
+      width: 33.3vw;
+      border: none !important;
+    }
+
+    &[data-tags~=animated]:before, &[data-file-ext=swf]:before, &[data-file-ext=webm]:before, &[data-file-ext=mp4]:before, &[data-file-ext=zip]:before {
+      @include animated-icon;
+    }
+
+    &[data-has-sound=true]:before {
+      @include sound-icon;
+    }
+  }
+
+  .user-disable-cropped-false {
+    article.post-preview {
+      width: 33.3%;
+      height: 33.3vw;
+      overflow: hidden;
+    }
+
+    img {
+      width: 33.3vw;
+      height: 33.3vw;
+
+      &.has-cropped-false {
+        object-fit: cover;
+      }
+    }
+  }
+
+  img#image {
+    margin-top: 5px;
+  }
+
+  #image-container {
+    overflow: scroll;
+  }
+
+  div#options {
+    margin-top: 10px;
+    font-size: 24pt;
+    font-weight: bold;
+  }
+
+  div#tags {
+    margin-top: 30px;
+
+    li {
+      margin: 10px 0;
+    }
+
+    a.search-tag {
+      font-size: 24pt;
+      font-weight: bold;
+    }
+  }
+
+  div#page {
+    div.comments-for-post div.list-of-comments article.comment div.content {
+      clear: both;
+      margin: 0;
+    }
+  }
+
+  #nav {
+    font-size: 2em;
+    line-height: 2em;
+    display: none;
+  }
+  
+  header#top menu.main {
+    background-color: lighten($link_color, 25%);
+    padding: 5px 10px;
+  }
+  
+  h1 {
+    display: block;
+    font-size: 2em;
+    margin: 1em 0 0 0;
+  }
+  
+  h2 {
+    font-size: 0.825em;
+    margin: 1em 0 0 0;
+  }
+  
+  header {
+    text-align: center;
+    line-height: 2em;
+    h1 {
+      display: inline; //Needed for menu button
+    }
+  }
+  
+  div#page {
+    margin: 0;
+  }
+}
+
+@media screen and (max-width: 440px) {
+  input#expand-search {
+    display: none;
+  }
+
+  body {
+    width: 100%;
+  }
+
+  #post-sections {
+    font-size: 1em;
+  }
+  
+  div article.post-preview {
+    overflow: visible;
+  }
+}
+
+#tos-notice {
+  display: none;
+}