restart redesign from latest master

2024-11-27 13:47:58 +01:00 · 2023-11-23 17:07:49 +01:00 · 2023-11-23 17:07:49 +01:00 · b872cb8db8
commit b872cb8db8
parent 064ad7c52d
207 changed files with 2839 additions and 4958 deletions
--- a/assets/css/application.scss
+++ b/assets/css/application.scss
@ -0,0 +1,51 @@
 /*
 * Main stylesheet file.
 *
 * This generates the base file for the stylesheets used throughout the project.
 * Themes should be contained within the "themes" folder, and only contain
 * color variations, and optional CSS changes.
 *
 */
 $fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
@import "~@fortawesome/fontawesome-free/scss/regular.scss";
@import "~@fortawesome/fontawesome-free/scss/brands.scss";
@import "~normalize-scss/sass/normalize/import-now";
 // Import the default theme to act as a fallback.
@import "~themes/dark-blue";
 // Files containing common properties, such as variable definitions.
@import "~common/measurements";
@import "~common/mixins";
 // General style elements that are used throughout the project.
@import "~elements/avatar";
@import "~elements/base";
@import "~elements/block";
@import "~elements/button";
@import "~elements/dropdown";
@import "~elements/flash";
@import "~elements/flex";
@import "~elements/heading";
@import "~elements/input";
@import "~elements/interaction";
@import "~elements/layout";
@import "~elements/media";
@import "~elements/mobile";
@import "~elements/separator";
@import "~elements/table";
 // Style elements specific to certain pages.
@import "~views/admin";
@import "~views/burger";
@import "~views/communication";
@import "~views/header";
@import "~views/markdown";
@import "~views/metabar";
@import "~views/pagination";
@import "~views/statistics";
@import "~views/tag";
--- a/assets/css/common/_barline.scss
+++ b/assets/css/common/_barline.scss
@ -1,13 +0,0 @@
 .sparkline {
  display: flex;
  height: 20px;
  border-bottom: 1px solid $sparkline_color;
 }
 .barline__bar {
  fill: $sparkline_color;
 }
 .barline__bar:hover {
  fill: red;
 }
--- a/assets/css/common/_base.scss
+++ b/assets/css/common/_base.scss
@ -1,503 +0,0 @@
 /*
 * This file contains base styles that are overridden by custom stylesheets. These stylesheets need
 * to be placed in this directory, and they are imported at the bottom of the file.
 *
 * Define rules that are not supposed to be overridden after the @imports at the bottom of the file.
 */
@import "dimensions";
@import "global";
 // Because FA is a SPECIAL SNOWFLAKE.
 $fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
@import "~@fortawesome/fontawesome-free/scss/regular.scss";
@import "~@fortawesome/fontawesome-free/scss/brands.scss";
@import "~normalize-scss/sass/normalize/import-now";
 body {
  background-color: $background_color;
  color: $foreground_color;
  font-family: $font_family_base;
  font-size: 13px;
  margin: 0;
  padding: 0;
  line-height: 1.15;
 }
 /* normalize.css breakage */
 sup, sub {
  line-height: 1.15em;
 }
 sub {
  bottom: -0.15em;
 }
 h1, h2, h3, h4, h5 {
  font-weight: normal;
  text-rendering: optimizeLegibility;
  margin-bottom: 0.62em;
  line-height: 1.15em;
 }
 h1 { font-size: 24px; }
 h2 { font-size: 22px; }
 h3 { font-size: 19px; }
 h4 {
  font-size: 17px;
  margin-top: 1em;
  margin-bottom: 0.5em;
 }
 // Slightly dirty, no clean way to strip top margins off headers though
 .remove-top-margin {
  margin-top: 0;
 }
 h5 {
  margin-top: 0.5em;
  margin-bottom: 0.3em;
  font-size: 15px;
 }
 h6 {
  font-size: 10px;
  margin: 2px;
  margin-bottom: 0;
 }
 .paragraph {
  hyphens: none;
  margin-bottom: var(--padding-small);
  margin-top: var(--padding-small);
  margin-left: 2px;
  line-height: 1.35em;
 }
 .communication__body__text .paragraph {
  margin-bottom: var(--padding-normal);
 }
 .paragraph img, .communication__body__text img, .block__content img {
  max-width: 100%;
 }
 p {
  @extend .paragraph;
 }
 pre {
  background-color: $meta_color;
  padding: 10px;
  font-size: 11px;
  font-family: $font_family_monospace;
  border: 1px solid $meta_border_color;
  max-width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  code {
    border: 0;
    background: 0;
    padding: 0;
  }
 }
 a, a:active, a:visited {
  color: $link_color;
  text-decoration: none;
 }
 a:hover {
  color: $link_hover_color;
 }
 img {
  margin: 0;
  border: 0;
  vertical-align: bottom;
 }
 .clearfix {
  clear: both;
  height: 0;
 }
 /* Child selectors, as opposed to flat BEM classes, are justified in this case.
 * HTML tables are bulky to begin with; adding .table__row and .table__cell to every
 * item will hinder the development speed and decrease readability. */
 .table {
  padding-left: 10px;
  width: 100%;
  border-collapse: collapse;
  border: $border;
  th {
    font-weight: bold;
    text-align: left;
    padding: 5px;
    &.center {
      text-align: center;
    }
  }
  > thead > tr {
    background: $background_color;
  }
  > tbody {
    border: $border;
    > tr {
      @include even-odd;
    }
  }
  td {
    padding: 5px;
  }
 }
 .table__tiny-column {
  width: 50px;
 }
 .border-vertical {
  border-top: 2px solid $border_color;
 }
 .background-success {
  background-color: $success_light_color;
 }
 .background-warning {
  background-color: $warning_light_color;
 }
 .background-danger {
  background-color: $danger_light_color;
 }
 hr {
  border: 0;
  height: 1px;
  background: $border_color;
  margin: var(--padding-small);
 }
 #error_explanation {
  margin: 1em 0;
  background: $warning_light_color;
  border: 1px solid $warning_color;
  padding: 0.62em;
  li {
    margin: 3px;
    margin-left: 15px;
  }
  h2 {
    font-size: 19px;
  }
 }
 //rules page. API page also borrows stuff from here
 .rule {
  padding: 5px;
  h2 {
    background: $background_odd_color;
    border: $border;
    padding: 5px;
    padding-bottom: 7px;
  }
  h2.important {
    background: $danger_light_color;
    border-color: $danger_color;
  }
  // Make HTML lists with multi-line text readable
  ul {
    margin: 0;
    padding: 5px 20px;
  }
  li {
    padding: 5px 0;
  }
 }
 .walloftext {
  font-size: 14px;
  @media (max-width: 900px) {
    width: 95%;
  }
 }
 // Text Editor
 blockquote {
  margin: 1em 2em;
  border: 1px dotted $foreground_color;
  padding: var(--padding-small);
  background-color: inherit;
 }
 blockquote .paragraph {
  &:first-child {
    margin-top: 0;
  }
  &:last-child {
    margin-bottom: 0;
  }
 }
 // Prevent blockquote from gaining far too much indentation and breaking.
 blockquote blockquote blockquote blockquote blockquote blockquote {
  margin: 1em 0;
  padding: 1em 2px;
 }
 // Horizontal space is at a high premium on mobile.
@media (max-width: $min_px_width_for_desktop_layout) {
  blockquote {
    margin: 1em 4px;
    padding: var(--padding-small) 4px;
  }
 }
 .spoiler, .spoiler-revealed {
  display: inline-block;
  position: relative;
 }
 .spoiler::before, .spoiler-revealed::before {
  content: ' ';
  display: block;
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $admin_links_hover_color;
 }
 .spoiler:hover::before, .spoiler-revealed::before {
  display: none;
 }
 .spoiler {
  background-color: $admin_links_hover_color;
  color: $admin_links_hover_color;
  a {
    color: $admin_links_hover_color;
  }
  code {
    background: 0;
    border: 0;
  }
  &:not(:hover) > .image-show-container {
    background: $admin_links_hover_color;
    > * {
      visibility: hidden;
    }
  }
 }
 .spoiler:hover, .spoiler-revealed {
  background-color: $admin_links_color;
  color: $foreground_color;
  a {
    color: $link_color;
  }
  a:hover {
    color: $link_dark_color;
  }
  code {
    @extend code;
  }
 }
 .literal {
  white-space: pre-wrap;
 }
 .editor-syntax-reference {
  margin-bottom: 6px;
 }
@mixin image-alt-size($name, $size) {
  @media (min-width: $size) {
    img[alt=#{$name}] {
      max-height: $size !important;
      max-width: $size !important;
    }
  }
 }
@include image-alt-size(tiny, $image_tiny_size);
@include image-alt-size(small, $image_small_size);
@include image-alt-size(medium, $image_medium_size);
@include image-alt-size(large, $image_large_size);
 table {
  @extend .table;
 }
 code {
  background-color: $meta_color;
  border: 1px solid $meta_border_color;
  padding: 0 4px;
 }
 //donations
 .donate-button {
  background: 0;
  border: 0;
  margin-left: 170px;
 }
 .button_to {
  display: inline;
 }
 /* User titles (admin/mod/assistant) and channel states (live/off air) */
 .label {
  padding: 6px;
  overflow-y: hidden;
 }
 .label--small {
  font-size: 9px;
  overflow: hidden;
 }
 .label--block {
  display: inline-block;
  margin: 2px 6px 6px 0;
 }
 .label--narrow {
  padding: 0 2px;
 }
 .label--success {
  background: $success_light_color;
  border: 1px solid $success_color;
 }
 .label--danger {
  background: $danger_light_color;
  border: 1px solid $danger_color;
 }
 .label--warning {
  background: $warning_light_color;
  border: 1px solid $warning_color;
 }
 .label--purple {
  background: $assistant_color;
  border: 1px solid $assistant_border_color;
 }
 .label--primary {
  background: $primary_light_color;
  border: 1px solid $primary_color;
 }
 .large-text {
  font-size: 15px;
 }
 .small-text {
  font-size: 10px;
 }
 .page-current {
  padding: 0 $header_spacing;
 }
 i.favicon-home {
  background-image: url("/favicon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  min-width: 1em;
  height: 1em;
  display: inline-block;
 }
 // changelog
 .commit-sha {
  @extend .label--purple;
  padding: 2px;
  font-size: 12px;
  font-family: $font_family_monospace;
  vertical-align: top;
 }
 .commit-message {
  display: block;
 }
 span.stat {
  font-size: 18px;
 }
 .seamless-frame {
  border: 0;
  overflow: hidden;
  padding: 0;
 }
@import "barline";
@import "blocks";
@import "burger";
@import "buttons";
@import "dropdown";
@import "forms";
@import "header";
@import "layout";
@import "media";
@import "shame";
@import "text";
@import "~views/adverts";
@import "~views/approval";
@import "~views/badges";
@import "~views/channels";
@import "~views/comments";
@import "~views/commissions";
@import "~views/communications";
@import "~views/duplicate_reports";
@import "~views/filters";
@import "~views/galleries";
@import "~views/images";
@import "~views/pages";
@import "~views/polls";
@import "~views/posts";
@import "~views/profiles";
@import "~views/pagination";
@import "~views/search";
@import "~views/staff";
@import "~views/stats";
@import "~views/tags";
 .no-overflow {
  overflow: hidden;
 }
 .no-overflow-x {
  overflow-x: hidden;
 }
 .hidden {
  display: none !important;
 }
--- a/assets/css/common/_blocks.scss
+++ b/assets/css/common/_blocks.scss
@ -1,245 +0,0 @@
 .block {
  margin-bottom: $block_spacing;
  .success {
    background-color: $success_color;
  }
  .warning {
    background-color: $warning_color;
  }
  .danger {
    background-color: $danger_color;
  }
 }
 .block__content, .block__tab {
  border-left: 1px solid $border_color;
  border-right: 1px solid $border_color;
  background: $background_color;
  padding: $block_spacing;
 }
 .block__content img, .block__tab img {
  max-width: 100%;
 }
 .block__content:first-child {
  border-top: 1px solid $border_color;
 }
 .block__content:last-child, .block__tab:not(.hidden) {
  border-bottom: 1px solid $border_color;
 }
 .block__content--destroyed {
  background-color: $destroyed_content_color !important;
 }
 .block__header {
  font-size: 14px;
  line-height: $block_header_height;
  background: $block_header_color;
  color: $foreground_color;
 }
 //FIXME This whole area has problems with structure, things are too coupled
 .block__header--sub {
  @extend .block__header;
  line-height: $block_header_sub_height;
  a {
    padding-left: $header_spacing*0.5;
    padding-right: $header_spacing*0.5;
  }
 }
 .block__header--user-credit {
  box-sizing: border-box;
  line-height: 20px;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 4px;
 }
 .block__header--single-item {
  @extend .block__header;
  display: block;
  width: 100%;
  box-sizing: border-box;
 }
 .block__header--single-item, .block__header__item, .block__header a {
  padding-left: $header_spacing;
  padding-right: $header_spacing;
 }
 a.block__header--single-item, .block__header a {
  color: $block_header_link_text_color;
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  &:hover {
    background: $block_header_hover_color;
    color: $block_header_link_text_hover_color;
  }
 }
 .block__header a, .header__span {
  background: $block_header_color;
 }
 .block__header__title {
  font-size: 14px;
  margin: 0;
  padding: 0 ($header_spacing * 0.5) 0 $header_spacing;
 }
 .block__header__buttons {
  display: flex;
  flex-direction: row;
  line-height: 100%;
  align-items: center;
  background: 0;
 }
 .block__tagbox {
  padding-top: $block_spacing + 5px;
 }
 .block__header--light {
  background: $block_header_light_color;
  a, .header__span {
    background: $block_header_light_color;
  }
  a {
    color: $block_header_light_link_text_color;
    &:hover {
      background: $block_header_light_hover_color;
      color: $block_header_light_link_text_hover_color;
    }
  }
 }
 .block__header--js-tabbed {
  @extend .block__header--light;
  background: transparent;
  border-bottom: $border;
  a {
    border-top: $border;
    /* hide the bottom border for tab links */
    margin-bottom: -1px;
    border-bottom: 1px solid $block_header_light_color;
  }
  a:hover {
    border-color: $block_header_light_hover_color;
  }
  a:first-child { border-left: $border; }
  a:last-child { border-right: $border; }
  a.selected, a.selected:hover {
    cursor: default;
    color: $foreground_color;
    background: $background_color;
    border-color: $block_header_light_color;
    border-bottom: 1px solid $background_color;
  }
 }
 /* Fixed blocks do not have header and content */
 .block--fixed {
  padding: 6px $header_spacing;
  background: $background_color;
  border: $border;
  line-height: 1.35;
 }
 .block--fixed--sub {
  padding: 3px $header_spacing;
 }
 .block--no-margin {
  margin: 0;
 }
 .block--success {
  background: $success_light_color;
  border-color: $success_color;
 }
 .block--warning {
  background: $warning_light_color;
  border-color: $warning_color;
 }
 .block--danger {
  background: $danger_light_color;
  border-color: $danger_color;
 }
 .block--primary {
  background: $primary_light_color;
  border-color: $primary_color;
 }
 .block--assistant {
  background: $assistant_color;
  border-color: $assistant_border_color;
 }
 /* Somewhat dirty workaround for <h*> margins */
 .block__content, .block__tab, .block--fixed {
  > h1, > h2, > h3, > h4, > h5, > h6 {
    margin-top: 6px;
  }
 }
 .block__header__dropdown-tab:hover > a {
  background-color: $block_header_hover_color;
  color: $block_header_link_text_hover_color;
 }
 /* Table-like lists */
 .block__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: $border;
  &:not(:last-child) { margin-bottom: 6px; }
  a.block__list__link {
    width: 100%;
    display: block;
    box-sizing: border-box;
    border: $border;
    margin-bottom: -1px; /* collapse borders */
    background: $background_color;
  }
  a.block__list__link.primary {
    background: $primary_light_color;
    border-color: $primary_color;
  }
  a.block__list__link:hover, a.block__list__link.active {
    background: $success_light_color;
    border-color: $success_color;
  }
  a.block__list__link.active:hover {
    background: $danger_light_color;
    border-color: $danger_color;
  }
  a.block__list__link.hidden {
    display: none;
  }
 }
 .block__content--top-border {
  border-top: $border;
 }
--- a/assets/css/common/_burger.scss
+++ b/assets/css/common/_burger.scss
@ -1,38 +0,0 @@
@mixin transform-n-animation($type, $dur, $delta) {
  transform: $delta;
  animation: $type $dur ease-in-out;
 }
 #burger.open {
  display: block !important;
  @include transform-n-animation(slidein, 0.4s, translate(0, 0));
 }
 #burger.close {
  display: none;
 }
 // content sliding open
 #container.open {
  @include transform-n-animation(open, 0.4s, translate(210px, 0));
 }
@keyframes open {
  0.00% { transform: translate(0, 0); }
  100% { transform: translate(210px, 0); }
 }
 // content closing
 #container.close {
  animation: close 0.3s ease-in-out;
 }
@keyframes close {
  0.00% { transform: translate(210px, 0); }
  100%  { transform: translate(0, 0); }
 }
@keyframes slidein {
  0.00% { transform: translate(-200px, 0); }
  100%  { transform: translate(0, 0); }
 }
--- a/assets/css/common/_buttons.scss
+++ b/assets/css/common/_buttons.scss
@ -1,102 +0,0 @@
 .button {
  background-color: $button_background_color;
  border: 1px solid $button_border_color;
  box-sizing: border-box;
  color: $button_text_color;
  display: inline-block;
  line-height: normal;
  font-family: $font_family_base;
  font-size: 14px;
  padding: 3px 5px;
  border-radius: 0; /* reset rounded borders on iOS/Safari */
  cursor: pointer;
  &:hover {
    background-color: $button_hover_background_color;
    border-color: $button_hover_border_color;
  }
  &:active, &:hover, &:visited {
    color: $button_text_color;
  }
  &:disabled {
    opacity: 0.7;
    pointer-events: none;
  }
 }
 .button--inline {
  padding: 0.25rem;
  border: 0;
  border-radius: 0.25rem;
  font-weight: 100;
 }
 .button--bold {
  font-weight: bold;
 }
 .button--full-width {
  width: 100%;
 }
 .button--link {
  color: $link_color;
  cursor: pointer;
  &:hover {
    color: $link_hover_color;
  }
  &:visited {
    color: $link_color;
  }
 }
 .button--separate-left {
  margin-left: 5px;
 }
 .button--separate-right {
  margin-right: 5px;
 }
 .button--small {
  padding: 0 3px;
 }
 .button--state-primary {
  background-color: $button_primary_background_color;
  border-color: $button_primary_border_color;
  &:hover {
    background-color: $button_primary_hover_background;
    border-color: $button_primary_hover_border;
  }
 }
 .button--state-success {
  background-color: $button_success_background_color;
  border-color: $button_success_border_color;
  &:hover {
    background-color: $button_success_hover_background;
    border-color: $button_success_hover_border;
  }
 }
 .button--state-warning {
  background-color: $button_warning_background_color;
  border-color: $button_warning_border_color;
  &:hover {
    background-color: $button_warning_hover_background;
    border-color: $button_warning_hover_border;
  }
 }
 .button--state-danger {
  background-color: $button_danger_background_color;
  border-color: $button_danger_border_color;
  &:hover {
    background-color: $button_danger_hover_background;
    border-color: $button_danger_hover_border;
  }
  &.button--inline {
    color: $button_danger_hover_border !important;
  }
 }
--- a/assets/css/common/_dimensions.scss
+++ b/assets/css/common/_dimensions.scss
@ -1,39 +0,0 @@
 /*
 * Shared layout properties, not unique to any theme
 */
 $border: 1px solid $border_color;
 $font_family_base: verdana, arial, helvetica, sans-serif;
 $font_family_monospace: "Droid Sans Mono", monospace;
 $max_px_width_for_limited_desktop_layout: 1150px;
 $min_px_width_for_desktop_layout: 800px;
 $min_px_width_for_desktop_thumb: 700px;
 $limited_layout_width: 980px;
 $medium_layout_width: 1330px;
 $centered_layout_side_margin: 24px;
 $layout_side_margin: 12px;
 $image_tiny_size: 64px;
 $image_small_size: 128px;
 $image_medium_size: 256px;
 $image_large_size: 512px;
 $header_height: 36px;
 $header_field_height: 28px;
 $header_sub_height: 32px;
 $header_font_size: 16px;
 $header_spacing: 12px;
 $header_field_spacing: 8px;
 $header_field_vertical_spacing: ($header_height - $header_field_height) * 0.5;
 $block_header_height: 32px;
 $block_header_sub_height: 26px;
 $block_spacing: 6px;
 $media_box_header_height: 22px;
 :root {
  --padding-small: 0.5em;
  --padding-normal: 1em;
 }
--- a/assets/css/common/_dropdown.scss
+++ b/assets/css/common/_dropdown.scss
@ -1,33 +0,0 @@
 .dropdown {
  position: relative;
  display: inline-block;
 }
 .dropdown .dropdown__content {
  position: absolute;
  display: none;
  /* align at top left (e.g., tag margins) */
  top: 100%;
  left: 0;
 }
 .dropdown__content.dropdown__content-right {
  left: inherit;
  right: 0;
 }
 /* Our child should be a block element */
 .dropdown .dropdown__content > *:not(.hidden) {
  display: block;
  white-space: nowrap;
 }
 .dropdown:hover .dropdown__content {
  /* show it */
  display: block;
  /* dropdowns should be at least as big as the button */
  min-width: 100%;
  /* and shouldn't sit below content */
  z-index: 999;
 }
--- a/assets/css/common/_forms.scss
+++ b/assets/css/common/_forms.scss
@ -1,182 +0,0 @@
 form p {
  margin-left: 0;
 }
 .field--block {
  display: block;
 }
 .field--inline {
  display: flex;
 }
 .field-error-js {
  background: $warning_light_color;
  padding: 3px;
 }
 .input {
  box-sizing: border-box;
  padding: 6px;
  border: 1px solid $input_border;
  font-size: 14px;
  font-family: $font_family_monospace;
  color: $input_text_color;
  background: $input_color;
  max-width: 100%; /* prevent resizable inputs from overflowing the container */
 }
 .input::placeholder {
  opacity: 0.54;
  color: inherit;
 }
 .input[required]:invalid {
  box-shadow: none;
 }
 .input:focus {
  outline: none;
  border: 1px solid $input_border_active;
  background: $input_color_active;
 }
 .input--wide {
  width: 100%;
 }
 .input--short {
  max-width: 30em;
 }
 .input--small {
  padding: 0 3px;
 }
 .input--text {
  min-height: 8.6em;
 }
 .input--separate-left {
  margin-left: 5px;
 }
 .input--separate-top {
  margin-top: 5px;
 }
 .input--decoy {
  display: inline-block;
  width: 0;
  height: 0;
  border: 0;
  padding: 0;
  box-sizing: border-box;
 }
 .input--resize-vertical {
  resize: vertical;
 }
 .checkbox {
  margin: 0.2em 0 0 0.4em;
  padding: 0;
 }
 textarea {
  height: 4em;
 }
 .field, .actions {
  margin-bottom: 6px;
 }
 .field_with_errors {
  background: $danger_color;
 }
 span.help-block {
  background: $danger_color;
  display: block;
 }
 /* hform is used for 30em inline 2-element textinput/button forms */
 .hform .field {
  display: flex;
  max-width: 30em;
  width: 100%;
 }
 /* text input - grow to container size */
 .hform__text {
  flex: 1 0 auto;
 }
 /* button - don't shrink or grow at all */
 .hform__button {
  flex: 0 0 auto;
  margin-left: 5px;
 }
 /* Click-toggleable */
 .toggle-box {
  display: none;
 }
 .toggle-box + label {
  @extend .button;
  position: relative;
  > * { display: inline; }
 }
 .toggle-box + label::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  display: inline-block;
  margin-right: 0.25em;
 }
 .toggle-box + label::before {
  border-width: 0.5em 0 0.5em 0.9em;
  border-color: transparent transparent transparent $foreground_color;
 }
 .toggle-box:checked + label::before {
  border-width: 0.9em 0.5em 0;
  border-color: $foreground_color transparent transparent transparent;
 }
 .toggle-box-container {
  overflow: hidden;
  position: relative;
  height: 0;
 }
 .toggle-box:checked + label + .toggle-box-container {
  height: auto;
 }
 .toggle-box:checked + label + .toggle-box-container > .toggle-box-container__content {
  margin-top: $block_spacing;
 }
 select.input, select.input:focus {
  -moz-appearance: none;
  appearance: none;
  background: linear-gradient(45deg, transparent 50%, $foreground_color 50%) calc(100% - 15px) 12px/5px 5px no-repeat,linear-gradient(135deg, $foreground_color 50%, transparent 50%) calc(100% - 10px) 12px/5px 5px no-repeat;
  padding-right: 25px;
  & option {
    background-color: $input_color;
  }
  &:hover option {
    background-color: $input_color_active;
  }
 }
 select.input:hover, select.input:focus:hover {
  cursor: pointer;
  background-color: $input_color_active;
 }
--- a/assets/css/common/_global.scss
+++ b/assets/css/common/_global.scss
@ -1,63 +0,0 @@
@mixin even-odd {
  &:nth-child(odd) {
    background: $background_odd_color;
  }
  &:nth-child(even) {
    background: $background_even_color;
  }
  /* Used in tag changes, among other things. See the definition of
   * _odd_color and _even_color for more information on cross-theme customization */
  //success bgs
  &:nth-child(odd).success,
  &:nth-child(odd) .success {
    background: $success_odd_color;
  }
  &:nth-child(even).success,
  &:nth-child(even) .success {
    background: $success_even_color;
  }
  &:nth-child(even) &:nth-child(odd).success,
  &:nth-child(even) &:nth-child(odd) .success {
    background: $success_odd_color;
  }
  //warning bgs
  &:nth-child(odd).warning,
  &:nth-child(odd) .warning {
    background: $warning_odd_color;
  }
  &:nth-child(even).warning,
  &:nth-child(even) .warning {
    background: $warning_even_color;
  }
  &:nth-child(even) &:nth-child(odd).warning,
  &:nth-child(even) &:nth-child(odd) .warning {
    background: $warning_odd_color;
  }
  //danger bg
  &:nth-child(odd).danger,
  &:nth-child(odd) .danger {
    background: $danger_odd_color;
  }
  &:nth-child(even).danger,
  &:nth-child(even) .danger {
    background: $danger_even_color;
  }
  &:nth-child(even) &:nth-child(odd).danger,
  &:nth-child(even) &:nth-child(odd) .danger {
    background: $danger_odd_color;
  }
 }
@mixin number-wrap($color) {
  display: inline-flex;
  padding: 0 6px;
  margin-left: 6px;
  line-height: inherit;
  font-size: 16px;
  text-align: center;
  background: $color;
 }
--- a/assets/css/common/_header.scss
+++ b/assets/css/common/_header.scss
@ -1,280 +0,0 @@
 .header {
  background: $header_color;
 }
 .header__force-right {
  margin-left: auto;
 }
 [data-notification-count="0"] {
  display: none !important;
 }
 .fa-search-button {
  padding: 0 0.5rem;
 }
 .fa-unread-icon {
  color: $unread_message_color;
 }
 // For text preceded by an icon
 .fa__text {
  padding-left: 6px;
 }
 a.header__link {
  display: inline-block;
  padding: 0 $header_spacing;
  line-height: $header_height;
  font-size: $header_font_size;
  color: $text_light_color;
  background: $header_color;
  flex-shrink: 0;
 }
 a.header__link:hover, .header__dropdown:hover > a {
  cursor: pointer;
  background-color: $header_hover_color;
 }
 .header__input, .header__input:focus {
  padding: 0 $header_field_spacing;
  border: none;
  height: $header_field_height;
  background: $header_field_color;
  color: $text_light_color;
  -webkit-text-fill-color: $text_light_color;
  text-overflow: ellipsis;
  /* reset rounded borders on iOS/Safari */
  border-radius: 0;
 }
 span.header__counter {
  @include number-wrap($header_hover_color);
 }
 select.header__input, select.header__input:focus {
  /* in case of <select>, a mere border-radius: 0; rule is not sufficient */
  appearance: none;
  /* setting "appearance: none;" removes dropdown arrow; the solution is to create a custom one:
   * (based on http://stackoverflow.com/a/28274325) the first two items create left and right triangles
   * that match up to create an arrow, the third one specifies dropdown background */
  background: linear-gradient(45deg, transparent 50%, $text_light_color 50%) calc(100% - 15px) 12px / 5px 5px no-repeat,
              linear-gradient(135deg, $text_light_color 50%, transparent 50%) calc(100% - 10px) 12px / 5px 5px no-repeat;
  background-color: $header_field_color;
  /* prevent the custom arrow from overlapping the content */
  padding-right: 25px;
  &:hover {
    cursor: pointer;
    background-color: $header_field_hover_color;
  }
  /* Remove dropdown arrow in IE11 - not needed in Edge */
  &::-ms-expand {
    display: none;
  }
  & option, & optgroup {
    background-color: $header_field_color;
  }
  &:hover option, &:hover optgroup {
    background-color: $header_field_hover_color;
  }
 }
 .header__input--search {
  width: 18vw;
  max-width: 300px;
 }
 /* fix webkit's invisible coloring of the search bar */
 .header__input--search:-webkit-autofill,
 .header__input--search:-webkit-autofill:hover,
 .header__input--search:-webkit-autofill:focus {
  -webkit-text-fill-color: $text_light_color;
  box-shadow: 0 0 0 1000px $header_field_color inset;
  border: none;
 }
 .header__search__button, .header__search__button:visited {
  border: none;
  // Chrome loves extra padding for some reason
  padding-top: 0;
  padding-bottom: 0;
  line-height: $header_field_height;
  font-size: 1.25em;
  background: $header_field_color;
  color: $text_light_color;
  &:hover {
    cursor: pointer;
    background: $header_field_hover_color;
  }
 }
 .header__filter-form {
  max-width: 15em; /* prevent long filter names from causing overflow */
  margin: $header_field_vertical_spacing $header_field_spacing;
 }
 a.header__link-user {
  display: flex;
  padding: $header_field_vertical_spacing $header_field_spacing;
 }
 span.header__link-user__dropdown-arrow {
  padding: 0 9px;
  background: linear-gradient(45deg, transparent 50%, $text_light_color 50%) calc(100% - 5px) 12px / 5px 5px no-repeat,
              linear-gradient(135deg, $text_light_color 50%, transparent 50%) calc(100%) 12px / 5px 5px no-repeat;
  background-color: $header_color;
 }
 span.header__link-user__dropdown-arrow:hover,
 .header__dropdown:hover span.header__link-user__dropdown-arrow {
  background-color: $header_hover_color;
 }
 .header--secondary {
  background: $header_secondary_color;
  line-height: $header_sub_height;
  a {
    line-height: $header_sub_height;
    color: $foreground_color;
    background: $header_secondary_color;
  }
  a:hover, .header__dropdown:hover > a {
    background-color: $header_secondary_hover_color;
  }
  div {
    height: $header_sub_height;
  }
  span.header__counter {
    @include number-wrap($header_secondary_hover_color);
  }
 }
 span.header__counter__admin {
  @include number-wrap($header_admin_hover_color);
 }
 .header--secondary__admin-links {
  margin-right: $header_spacing;
  background: $header_admin_color;
  a {
    background: $header_admin_color;
  }
  a:hover {
    background: $header_admin_hover_color;
  }
 }
 /* Flash notices */
 .flash {
  line-height: $header_field_height;
 }
 .flash--site-notice {
  background: $site_notice_color;
  color: $text_light_color;
  a, a:active, a:visited {
    text-decoration: underline;
    color: $site_notice_link_color;
  }
  a:hover {
    color: $site_notice_link_hover_color;
  }
 }
 .flash--warning {
  color: $foreground_color;
  background: $warning_light_color;
 }
 .flash--success {
  color: $foreground_color;
  background: $success_light_color;
 }
 /* Mobile layout */
@media (max-width: $min_px_width_for_desktop_layout) {
  .header > div {
    height: auto;
  }
  .header__search {
    width: 100%;
    order: 1; /* sets the item to be displayed after .header__row__right, i.e. on a new line */
  }
  .header__input--search {
    width: 100% !important;
    max-width: 100% !important;
  }
  select.header__input, select.header__input:focus {
    /* Using an absolute max-width resolves an issue with
     * Chrome on small viewports, where a long filter
     * name would cause a new row to be added. */
    max-width: 100px;
  }
  .header--secondary__admin-links {
    margin: 0;
  }
  .flash {
    padding: 0 6px;
  }
  span.header__counter__admin {
    margin-left: 1vw;
    padding: 0 1vw;
  }
 }
 /* Desktop layout */
@media (min-width: $min_px_width_for_desktop_layout) {
  .header > div, .flash {
    box-sizing: border-box;
  }
  .flash {
    width: 100%;
    padding-left: $layout_side_margin;
    padding-right: $layout_side_margin;
  }
  .layout--center-aligned {
    .header > div {
      padding-left: $centered_layout_side_margin;
      padding-right: $centered_layout_side_margin;
    }
    .flash {
      padding-left: $centered_layout_side_margin + $header_spacing;
      padding-right: $centered_layout_side_margin + $header_spacing;
    }
  }
 }
@media (max-width: $max_px_width_for_limited_desktop_layout) and (min-width: $min_px_width_for_desktop_layout) {
  .header > div {
    height: auto;
  }
 }
--- a/assets/css/common/_layout.scss
+++ b/assets/css/common/_layout.scss
@ -1,420 +0,0 @@
@media (max-width: $min_px_width_for_desktop_layout) {
  .hide-mobile {
    display: none !important;
  }
 }
@media (max-width: $min_px_width_for_desktop_thumb) {
  .hide-mobile-t {
    display: none !important;
  }
 }
@media (max-width: $max_px_width_for_limited_desktop_layout) and (min-width: $min_px_width_for_desktop_layout) {
  .hide-limited-desktop {
    display: none !important;
  }
 }
@media (min-width: $min_px_width_for_desktop_layout) {
  .hide-desktop {
    display: none !important;
  }
 }
@media (min-width: $min_px_width_for_desktop_thumb) {
  .hide-desktop-t {
    display: none !important;
  }
 }
 nav {
  display: inline-block;
 }
 #burger {
  font-size: 18px;
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  display: none;
  overflow: auto;
  background: $meta_color;
  padding: 5px;
  a {
    background: $meta_color;
    color: $foreground_color;
    display: block;
    padding: 5px;
  }
  a:hover {
    background: $base_color;
    color: $text_light_color;
  }
 }
 #container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: 100%;
  margin: auto;
  width: 100%;
  background: $page_background_color;
 }
 #content {
  margin-top: $header_spacing;
  margin-bottom: $header_spacing;
  flex: 1 0 auto;
  clear: both;
  > h1 {
    margin: 0 0 12px;
  }
  @media (max-width: $min_px_width_for_desktop_layout) {
    padding: 0 4px;
  }
 }
@media (min-width: $min_px_width_for_desktop_layout) {
  .layout--wide, .layout--medium, .layout--narrow {
    box-sizing: border-box;
  }
  .layout--narrow {
    width: 96vw;
    max-width: $limited_layout_width;
  }
  .layout--medium {
    width: 96vw;
    max-width: $medium_layout_width;
  }
  .layout--wide {
    width: 100%;
    padding-left: $layout_side_margin;
    padding-right: $layout_side_margin;
  }
  .layout--center-aligned {
    .layout--medium, .layout--narrow {
      margin-left: auto;
      margin-right: auto;
    }
    .layout--wide {
      padding-left: $centered_layout_side_margin;
      padding-right: $centered_layout_side_margin;
    }
  }
  #container:not(.layout--center-aligned) #content {
    padding-left: $layout_side_margin;
  }
 }
 /* Use the following two classes to center content when user has layout centering enabled: */
 // TODO replace this bullshit naming, this is not actually BEM at all and makes no sense
 #container.layout--center-aligned .center--layout {
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
 }
 #container.layout--center-aligned .center--layout--flex {
  display: flex;
  flex-direction: column;
  align-items: center;
 }
 #footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 6px;
  padding-bottom: 10px;
  font-size: 12px;
  color: $foreground_half_color;
  background: $background_color;
  line-height: 14px;
  #footer_content {
    display: flex;
    flex-direction: row;
  }
  .footercol {
    flex: 1 0 auto;
    width: auto;
    h5 {
      margin: 3px 0;
    }
  }
  .footercol + .footercol {
    margin-left: 15px;
  }
  #serving_info {
    text-align: center;
  }
 }
 .center {
  text-align: center;
 }
 .flex {
  display: flex;
 }
 .flex--centered {
  align-items: center;
 }
 .flex--center-distributed {
  justify-content: center;
 }
 // Mostly for the header
 .flex--start-bunched {
  justify-content: flex-start;
 }
 .flex--end-bunched {
  justify-content: flex-end;
 }
@media (max-width: $min_px_width_for_desktop_layout) {
  .flex--maybe-wrap {
    flex-wrap: wrap !important;
  }
  #footer {
    align-items: normal !important;
  }
  #footer_content {
    flex-direction: column !important;
  }
  .footercol {
    margin-left: 15px;
  }
 }
 .flex--maybe-wrap {
  flex-wrap: nowrap;
 }
 .flex--no-wrap {
  flex-wrap: nowrap;
 }
 .flex--wrap {
  flex-wrap: wrap;
 }
 .flex__right {
  flex: 1 1 auto;
  text-align: right;
 }
 .flex__grow {
  flex: 1 0 0;
 }
 .flex__shrink {
  flex: 0 1 auto;
 }
 .flex__fixed {
  flex: 0 0 auto;
 }
 .flex--column {
  flex-direction: column;
 }
 .flex--spaced-out {
  justify-content: space-between;
 }
 .grid {
  display: grid;
 }
@media (max-width: $min_px_width_for_desktop_layout) {
  .stretched-mobile-links {
    display: flex;
    width: 100%;
    /* Do not use a descendant selector here as it affects dropdowns */
    > a, span {
      text-align: center;
      flex: 1 1 auto;
      padding: 0 1vw; /* Having smaller padding makes it harder to click the right link on small mobile screens */
    }
  }
 }
 .alternating-color {
  @include even-odd;
 }
 .spacing-right {
  margin-right: 12px;
 }
 .spacing-left {
  margin-left: 12px;
 }
 .column-layout {
  display: flex;
  @media (max-width: $min_px_width_for_desktop_layout) {
    display: block;
  }
 }
 .column-layout__left {
  flex: 0 0 auto;
  width: 326px;
  margin-right: $header_spacing;
  word-wrap: break-word;
  @media (max-width: $min_px_width_for_desktop_layout) {
    margin-right: 0;
    width: 100%;
  }
 }
 .column-layout__main {
  flex: 1 1 auto;
  word-wrap: break-word;
  /* prevent really long words from overflowing things */
  min-width: 0;
 }
 figure {
  display: table;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  img {
    width: 100%;
    height: auto;
    max-width: 400px;
    display: inline-block;
  }
  figcaption {
    display: block;
    font-weight: bold;
  }
 }
 .theme-preview-trixie {
  align-self: flex-end; /* place the image next to the theme switch (align it to the bottom of the container) */
  min-width: 0; /* allow the image to be downsized */
  padding-left: $block_spacing; /* on narrow screens, the image would sit uncomfortably close to the text */
 }
 .table-list__label {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-start;
  .table-list__label__text,
  .table-list__label__input {
    padding: 8px;
  }
  .table-list__label__text {
    flex: 1 0 30%;
    @media (min-width: $min_px_width_for_desktop_layout) {
      text-align: right;
    }
  }
  .table-list__label__input {
    flex: 1 1 60%;
  }
 }
 .permission-choices {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
 }
 .permission-choice__label {
  input {
    display: none;
    &:checked + {
      .permission-option--yes {
        border-color: $success_color;
        background-color: $success_light_color;
      }
      .permission-option--no {
        border-color: $danger_color;
        background-color: $danger_light_color;
      }
    }
    &:hover + {
      .permission-option--yes {
        background-color: $success_light_color;
      }
      .permission-option--no {
        background-color: $danger_light_color;
      }
    }
  }
 }
 .permission-option {
  text-align: center;
  border: 1px solid transparent;
  &:not(:last-child) {
    margin-right: 12px;
  }
 }
 .choice-text {
  display: flex;
  text-align: center;
  padding: 4px 16px;
 }
 .minimal {
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .minimal__message {
  padding: 30px;
  max-width: 560px;
  width: 100%;
  margin: auto;
  text-align: left;
  background-color: $header_secondary_color;
 }
 .minimal__message__header {
  margin: 0 0 10px 0;
 }
--- a/assets/css/common/_measurements.scss
+++ b/assets/css/common/_measurements.scss
@ -0,0 +1,67 @@
 $min-desktop-width: 1280px;
 $max-phone-width: 700px;
 $narrow-layout-width: 960px;
 $medium-layout-width: $min-desktop-width;
 $font-family-base: verdana, arial, helvetica, sans-serif;
 $font-family-monospace: "Droid Sans Mono", monospace;
 :root {
  --padding-tiny: 0.3rem;
  --padding-small: 0.4rem;
  --padding-normal: 0.75rem;
  --padding-large: 1.5rem;
  --block-header-height: 2rem;
  --navbar-size: 40px;
  --navbar-secondary-size: 36px;
  --navbar-avatar-size: 36px;
  --navbar-input-size: 32px;
  --button-group-height: 2rem;
  --button-group-tall-height: 2.5rem;
  --button-group-small-height: 1.5rem;
  --column-left-width: 360px;
  --border-radius-outer: 0.35rem;
  --border-radius-inner: 0.25rem;
  --media-container-width: 225px;
  --media-tiny-container-width: 50px;
  --media-small-container-width: 125px;
  --media-medium-container-width: 250px;
  --media-large-container-width: 500px;
  --media-full-container-width: 100%;
  --media-featured-width: 358px;
  --media-header-height: 2rem;
  --number-badge-size: 0.6rem;
  --number-badge-padding: 0.1rem;
  --number-badge-border: 2px;
  --number-badge-lower-offset: 0.7rem;
  --number-badge-upper-offset: 0.7rem;
  --font-family: #{$font-family-base};
  --font-family-monospace: #{$font-family-monospace};
  --font-size: 14px;
  --font-tiny-size: 12px;
  --font-header-size: 16px;
  --font-h1-size: 1.5rem;
  --font-h2-size: 1.35rem;
  --font-h3-size: 1.2rem;
  --font-h4-size: 1.1rem;
  --font-h5-size: 1rem;
  --font-h6-size: 1rem;
  --input-text-height: 9rem;
  --min-desktop-width: #{$min-desktop-width};
  --max-phone-width: #{$max-phone-width};
  --medium-layout-width: #{$medium-layout-width};
  --narrow-layout-width: #{$narrow-layout-width};
  --transition-animation-duration: 0.2s;
 }
--- a/assets/css/common/_media.scss
+++ b/assets/css/common/_media.scss
@ -1,114 +0,0 @@
 $media_border: 1px solid $media_box_color !default;
 $media_over_border: 1px dotted $vote_down_color;
 .media-box {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border: $media_border;
  margin: 0 6px 6px 0;
 }
 .media-box.over {
  border: $media_over_border;
 }
 .media-box__header {
  min-width: 100%;
  background: $media_box_color;
  color: $foreground_color;
  line-height: $media_box_header_height;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
 }
 /* Links that take up the whole width of .media-box (title links) should use this class along with .media-box__header (without containers) */
 a.media-box__header--link {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
  color: $media_box_header_link_text_color;
  &:hover {
    color: $media_box_header_link_text_hover_color;
    background-color: $media_box_hover_color;
  }
 }
 /* Containers with a row of links (e.g. image thumbnail header) should use this class. */
 .media-box__header--link-row > a {
  display: inline-block;
 }
 .media-box__header--link-row > a, .media-box__overlay {
  line-height: $media_box_header_height;
  padding: 0 4px;
 }
 .media-box__header--small {
  width: 150px;
  font-size: 11px;
  a {
    padding: 0 3px;
  }
 }
 .media-box__header--unselected {
  background-color: $danger_color;
 }
 .media-box__header--selected {
  background-color: $success_color;
 }
 // TODO: properly fix this
 .media-box__content {
  .image-container {
    width: 100%;
    height: 100%;
  }
 }
 .media-box__content--featured {
  width: 326px;
  height: 326px;
 }
 .media-box__content--large {
  width: 254px;
  height: 254px;
 }
 .media-box__content--small {
  width: 150px;
  height: 150px;
 }
 .media-box__overlay {
  display: block;
  position: absolute;
  z-index: 4;
  width: 100%;
  text-align: left;
  font-weight: bold;
  word-wrap: break-word;
  color: $image_overlay_color;
  background: $image_overlay_background_color;
  pointer-events: none;
 }
 .thumb_small .media-box__overlay {
  font-size: 11px;
 }
 .thumb_tiny .media-box__overlay {
  font-size: 10px;
  line-height: 16px;
 }
 /* TODO: replace absolute positioning with a more flexible solution */
 .media-box__overlay:nth-child(2) {
  top: $media_box_header_height;
 }
--- a/assets/css/common/_mixins.scss
+++ b/assets/css/common/_mixins.scss
@ -0,0 +1,58 @@
@mixin if-desktop {
  @media (min-width: $min-desktop-width + 1) {
    @content;
  }
 }
@mixin if-tablet {
  @media (max-width: $min-desktop-width) and (min-width: $max-phone-width + 1) {
    @content;
  }
 }
@mixin if-phone {
  @media (max-width: $max-phone-width) {
    @content;
  }
 }
@mixin if-mobile {
  @media (max-width: $min-desktop-width) {
    @content;
  }
 }
@mixin even-odd-type($type) {
  &:nth-child(odd).#{$type},
  &:nth-child(odd) .#{$type} {
    background: var(--#{$type}-color);
  }
  &:nth-child(even).#{$type},
  &:nth-child(even) .#{$type} {
    background: var(--#{$type}-dark-color);
  }
  &:nth-child(even) &:nth-child(odd).#{$type},
  &:nth-child(even) &:nth-child(odd) .#{$type} {
    background: var(--#{$type}-color);
  }
 }
@mixin even-odd {
  &:nth-child(odd) {
    background: var(--secondary-dark-color);
  }
  &:nth-child(even) {
    background: var(--secondary-muted-color);;
  }
  @include even-odd-type(primary);
  @include even-odd-type(success);
  @include even-odd-type(warning);
  @include even-odd-type(danger);
  @include even-odd-type(information);
  @include even-odd-type(purple);
 }
@mixin animated-transition {
  transition: color var(--transition-animation-duration) ease, background var(--transition-animation-duration) ease;
 }
--- a/assets/css/common/_shame.scss
+++ b/assets/css/common/_shame.scss
@ -1,6 +0,0 @@
 // For more shame related to this, see the <style> element inside app/views/adverts/index.html.slim
 // Until HTML/CSS includes a native way to resize iframes based on their content, we do this approximation with viewport units.
 .ad-sandbox {
  height: 18vw;
  max-height: 113px;
 }
--- a/assets/css/common/_text.scss
+++ b/assets/css/common/_text.scss
@ -1,7 +0,0 @@
 .line-spacing {
  line-height: 30px;
 }
 .fa--important{
  color: #fc7f1c;
 }
--- a/assets/css/elements/_avatar.scss
+++ b/assets/css/elements/_avatar.scss
@ -0,0 +1,4 @@
 .avatar--navbar {
  width: var(--navbar-avatar-size);
  height: var(--navbar-avatar-size);
 }
--- a/assets/css/elements/_base.scss
+++ b/assets/css/elements/_base.scss
@ -0,0 +1,34 @@
 html {
  font-family: var(--font-family);
  font-size: var(--font-size);
 }
 body {
  padding: 0;
  margin: 0;
  background: var(--background-color);
  color: var(--text-color);
 }
 main {
  padding: var(--padding-normal);
 }
@include if-mobile {
  main {
    padding: var(--padding-small);
  }
 }
 a, a:active, a:visited {
  color: var(--link-color);
  text-decoration: none;
 }
 a:hover {
  color: var(--link-hover-color);
 }
 .hidden {
  display: none !important;
 }
--- a/assets/css/elements/_block.scss
+++ b/assets/css/elements/_block.scss
@ -0,0 +1,139 @@
@mixin block-type($type) {
  .block--#{$type} {
    .block__content {
      border-color: var(--#{$type}-border-color);
      background: var(--#{$type}-dark-color);
    }
    .block__footer {
      background: var(--#{$type}-color);
    }
    &.block--muted {
      border-color: var(--#{$type}-color);
    }
    &.block--fixed {
      background: var(--#{$type}-color);
    }
    & a {
      color: var(--#{$type}-link-color);
      &:hover {
        color: var(--link-hover-color);
      }
    }
  }
 }
 .block {
  margin-bottom: var(--padding-normal);
  overflow: hidden;
 }
 .block .block {
  border-radius: var(--border-radius-inner);
 }
 .block--muted {
  border-color: var(--primary-color);
 }
 .block--borderless {
  border: 0;
  border-radius: 0;
 }
 .block__content {
  border: 1px solid var(--primary-border-color);
  border-radius: var(--border-radius-outer);
  padding: var(--padding-normal);
  background: var(--primary-dark-color);
 }
 .block__content--small {
  padding: var(--padding-small);
 }
 .block__footer {
  @extend .flex__row;
  background: var(--primary-muted-color);
  padding: var(--padding-normal);
  margin: var(--padding-normal);
  margin-top: 0;
 }
 .block__footer--small {
  @extend .block__footer;
  margin: var(--padding-small);
  margin-top: 0;
 }
@include if-phone {
  .block__content {
    padding: var(--padding-small);
  }
  .block__footer {
    margin: var(--padding-small);
    margin-top: 0;
  }
 }
 .block__header {
  line-height: var(--block-header-height);
  padding: 0 var(--padding-normal);
  font-size: var(--font-header-size);
  & > .fa {
    margin-right: var(--padding-normal);
  }
 }
 .block__header--single-item {
  @extend .block__header;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  font-weight: bold;
  color: var(--link-color) !important;
 }
 .block--fixed {
  padding: var(--padding-normal);
 }
 .block__tab {
  padding: var(--padding-normal);
 }
 .block__header--js-tabbed {
  display: flex;
  padding: 0;
  & a {
    display: block;
    color: var(--text-color);
    padding: 0 var(--padding-normal);
    &:hover {
      background: var(--background-color);
    }
  }
  .selected {
    background: var(--background-color);
  }
 }
 .block--spaced-top {
  margin-top: var(--padding-normal);
 }
@include block-type(secondary);
@include block-type(success);
@include block-type(warning);
@include block-type(danger);
@include block-type(information);
@include block-type(purple);
--- a/assets/css/elements/_button.scss
+++ b/assets/css/elements/_button.scss
@ -0,0 +1,117 @@
@mixin button-type($type) {
  .button--#{$type} {
    border-color: var(--#{$type}-border-color);
    &.button--important {
      background: var(--#{$type}-color) !important;
      box-shadow: 0 -1px var(--#{$type}-dark-color) inset;
    }
    &.button:hover {
      background: var(--#{$type}-dark-color) !important;
    }
  }
  .button__group--#{$type} {
    border-color: var(--#{$type}-color);
    background: var(--#{$type}-dark-color);
    & a {
      color: var(--#{$type}-link-color);
      &:hover {
        @include animated-transition;
        color: var(--text-color);
        background: var(--#{$type}-color);
      }
    }
  }
 }
 .button {
  @include animated-transition;
  display: block;
  width: fit-content;
  font-weight: bold;
  background: var(--background-color);
  color: var(--text-color) !important;
  font-size: var(--padding-normal);
  padding: var(--padding-small);
  border: 1px solid var(--primary-border-color);
  box-sizing: border-box;
  &:hover {
    @include animated-transition;
    background: var(--primary-dark-color);
    cursor: pointer;
  }
 }
 .button--important {
  background: var(--primary-color);
  box-shadow: 0 -1px var(--primary-dark-color) inset;
 }
 .button__row {
  @extend .flex__row;
  & > button {
    margin-right: var(--padding-small);
  }
 }
 .button__group {
  @extend .flex__row;
  border: 1px solid var(--secondary-color);
  border-radius: var(--border-radius-inner);
  margin-right: var(--padding-normal);
  background: var(--secondary-dark-color);
  line-height: var(--button-group-height);
  &:last-child {
    margin: 0;
  }
 }
 .button__group--tall {
  line-height: var(--button-group-tall-height)
 }
 .button__group--small {
  line-height: var(--button-group-small-height)
 }
 .button__group .button {
  border: 0;
  border-right: var(--secondary-color);
  &:last-child {
    border-right: 0;
  }
 }
 .button__group--single {
  @extend .button__group;
  margin-right: 0;
 }
 .button__group--standalone {
  @extend .button__group;
 }
 .button__group--standalone a {
  @include animated-transition;
  font-weight: bold;
  padding: 0 var(--padding-small);
  &:hover {
    @include animated-transition;
    background: var(--secondary-muted-color);
  }
 }
@include button-type(success);
@include button-type(warning);
@include button-type(danger);
@include button-type(information);
@include button-type(purple);
--- a/assets/css/elements/_dropdown.scss
+++ b/assets/css/elements/_dropdown.scss
@ -0,0 +1,69 @@
 .dropdown {
  position: relative;
  display: inline-block;
  &:hover {
    .dropdown__content {
      display: block;
      min-width: 100%;
      z-index: 999;
    }
  }
 }
 .dropdown__content {
  background: var(--primary-muted-color);
  border: 1px solid var(--primary-border-color);
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  & > :not(.hidden) {
    display: block;
    white-space: nowrap;
  }
 }
 .dropdown__content--right {
  left: inherit;
  right: 0;
 }
 .dropdown__item {
  display: grid;
  grid-template-columns: auto 1fr;
  color: var(--text-color);
  &:hover {
    .dropdown__text {
      background: var(--primary-dark-color);
    }
  }
 }
 .dropdown__icon {
  padding: 0 var(--padding-small);
  background: var(--primary-dark-color);
  border-right: 1px solid var(--primary-muted-color);
 }
 .dropdown__text {
  padding: 0 var(--padding-small);
  background: var(--primary-muted-color);
  border-left: 1px solid var(--primary-border-color);
 }
 .dropdown__separator {
  margin: 0;
  border-color: var(--primary-border-color);
 }
 .dropdown__link {
  padding: 0 var(--padding-small);
  color: var(--text-color) !important;
  &:hover {
    background: var(--primary-dark-color);
  }
 }
--- a/assets/css/elements/_flash.scss
+++ b/assets/css/elements/_flash.scss
@ -0,0 +1,52 @@
@mixin flash-type($type) {
  .flash--#{$type} {
    border: 1px solid var(--#{$type}-border-color);
    box-shadow: 0 -1px var(--#{$type}-dark-color) inset;
    background: var(--#{$type}-color);
    .flash__icon {
      border-right: 1px solid var(--#{$type}-dark-color);
    }
    .flash__message {
      border-left: 1px solid var(--#{$type}-border-color);
    }
    & a {
      color: var(--#{$type}-link-color);
      &:hover {
        color: var(--link-hover-color);
      }
    }
  }
 }
 .flash {
  display: grid;
  grid-template-columns: auto 1fr;
  margin: var(--padding-normal);
  margin-bottom: 0;
 }
@include if-phone {
  .flash {
    margin: var(--padding-small);
    margin-bottom: 0;
  }
 }
 .flash__icon {
  @extend .flex__column--centered;
  padding: var(--padding-normal);
 }
 .flash__message {
  padding: var(--padding-normal);
 }
@include flash-type(success);
@include flash-type(warning);
@include flash-type(danger);
@include flash-type(information);
@include flash-type(purple);
--- a/assets/css/elements/_flex.scss
+++ b/assets/css/elements/_flex.scss
@ -0,0 +1,90 @@
 .flex {
  display: flex;
 }
 .flex__row {
  display: flex;
  flex-direction: row;
 }
 .flex__column {
  display: flex;
  flex-direction: column;
 }
 .flex__row--centered {
  @extend .flex__row;
  align-items: center;
  justify-content: center;
 }
 .flex__column--centered {
  @extend .flex__column;
  align-items: center;
  justify-content: center;
 }
 .flex--centered {
  align-items: center;
 }
 .flex--center-distributed {
  justify-content: center;
 }
 .flex--no-wrap {
  flex-wrap: nowrap;
 }
 .flex--wrap {
  flex-wrap: wrap;
 }
 .flex__right {
  flex: 1 1 auto;
  text-align: right;
 }
 .flex__grow {
  flex: 1 0 0;
 }
 .flex__shrink {
  flex: 0 1 auto;
 }
 .flex__fixed {
  flex: 0 0 auto;
 }
 .flex--column {
  flex-direction: column;
 }
 .flex--spaced-out {
  justify-content: space-between;
 }
 .flex--start-bunched {
  justify-content: flex-start;
 }
 .flex--end-bunched {
  justify-content: flex-end;
 }
 .flex__spacer {
  flex: 1 0 auto;
 }
@include if-desktop {
  .flex--maybe-wrap {
    flex-wrap: nowrap;
  }
 }
@include if-mobile {
  .flex--maybe-wrap {
    flex-wrap: wrap;
  }
 }
--- a/assets/css/elements/_heading.scss
+++ b/assets/css/elements/_heading.scss
@ -0,0 +1,38 @@
@mixin heading($el) {
  #{$el} {
    font-size: var(--font-#{$el}-size);
    font-weight: bold;
    padding: var(--padding-small) 0;
    border-bottom: 1px solid var(--primary-border-color);
  }
 }
@mixin heading-type($type) {
  .heading--#{$type} {
    border-bottom-color: var(--#{$type}-border-color);
  }
  .block--#{$type} {
    h1, h2, h3, h4, h5, h6 {
      border-bottom-color: var(--#{$type}-border-color);
    }
  }
 }
@include heading(h1);
@include heading(h2);
@include heading(h3);
@include heading(h4);
@include heading(h5);
@include heading(h6);
 /* To differentiate between h5 and h6, simply make h6 not bold */
 h6 {
  font-weight: normal;
 }
@include heading-type(success);
@include heading-type(warning);
@include heading-type(danger);
@include heading-type(information);
@include heading-type(purple);
--- a/assets/css/elements/_input.scss
+++ b/assets/css/elements/_input.scss
@ -0,0 +1,26 @@
 .input {
  border: 1px solid var(--secondary-border-color);
  box-shadow: 0 -1px var(--secondary-dark-color) inset;
  background: var(--secondary-dark-color);
  color: var(--text-color);
  box-sizing: border-box;
  font-family: var(--font-family-monospace);
  &:focus {
    outline: none;
  }
  &::placeholder {
    color: var(--secondary-border-color);
  }
 }
 .input--wide {
  width: 100%;
 }
 .input--text {
  height: var(--input-text-height);
  padding: var(--padding-normal) var(--padding-small);
  cursor: text;
 }
--- a/assets/css/elements/_interaction.scss
+++ b/assets/css/elements/_interaction.scss
@ -0,0 +1,34 @@
@mixin interaction-type($type) {
  .interaction--#{$type} {
    position: relative;
    color: var(--#{$type}-color) !important;
    padding: 0 var(--padding-tiny);
    width: 1rem;
    &.active, &:hover {
      color: var(--text-color) !important;
      background-color: var(--#{$type}-color);
    }
  }
 }
@include interaction-type(fave);
@include interaction-type(upvote);
@include interaction-type(downvote);
@include interaction-type(comment);
@include interaction-type(hide);
 .comments_count {
  position: absolute;
  background: var(--background-color);
  border: var(--number-badge-border) solid var(--background-color);
  border-radius: 100%;
  padding: var(--number-badge-padding);
  line-height: var(--number-badge-size);
  min-width: var(--number-badge-size);
  top: var(--number-badge-lower-offset);
 }
 .interaction--comment:hover > .comments_count {
  visibility: hidden;
 }
--- a/assets/css/elements/_layout.scss
+++ b/assets/css/elements/_layout.scss
@ -0,0 +1,89 @@
 .column-layout {
  @extend .flex__row;
  width: 100%;
 }
 .column-layout__left {
  margin-right: var(--padding-normal);
  width: var(--column-left-width);
 }
 .column-layout__main {
  flex: 1 0 auto;
 }
@include if-mobile {
  .column-layout {
    flex-direction: column;
  }
  .column-layout__left {
    margin-right: 0;
  }
 }
 #container {
  @extend .flex__column;
  box-sizing: border-box;
  height: 100%;
  margin: auto;
  min-height: 100vh;
  width: 100%;
 }
 .layout--narrow {
  width: 96vw;
  max-width: var(--narrow-layout-width);
 }
 .layout--medium {
  width: 96vw;
  max-width: var(--medium-layout-width);
 }
@include if-desktop {
  .centered-layout {
    .layout--medium, .layout--narrow {
      margin-left: auto;
      margin-right: auto;
    }
  }
 }
 #container.centered-layout .layout--centered {
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
 }
 #container.centered-layout .layout--centered-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
 }
 .center {
  text-align: center;
  align-items: center;
  justify-content: center;
 }
 .spacing {
  margin: var(--padding-normal);
 }
 .spacing--right {
  margin-right: var(--padding-normal);
 }
 .spacing--left {
  margin-left: var(--padding-normal);
 }
 .spacing--top {
  margin-top: var(--padding-normal);
 }
 .spacing--bottom {
  margin-bottom: var(--padding-normal);
 }
--- a/assets/css/elements/_media.scss
+++ b/assets/css/elements/_media.scss
@ -0,0 +1,135 @@
 .image-constrained {
  @extend .flex__row--centered;
 }
 .media-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--media-container-width), 1fr));
  grid-auto-rows: 1fr;
  grid-gap: var(--padding-small);
 }
 .media-list::before {
  content: '';
  width: 0;
  padding-bottom: calc(100% + var(--media-header-height));
  grid-row: 1 / 1;
  grid-column: 1 / 1;
 }
@include if-phone {
  .media-list {
    grid-template-columns: repeat(auto-fill, minmax(var(--media-small-container-width), 1fr));
  }
 }
 .media-box {
  background: var(--background-color);
  border: 1px solid var(--secondary-muted-color);
  border-radius: var(--border-radius-inner);
  overflow: hidden;
 }
 .media-box:first-child {
  grid-row: 1 / 1;
  grid-column: 1 / 1;
 }
 .media-box__header {
  display: flex;
  line-height: var(--media-header-height);
  padding: 0 var(--padding-small);
  justify-content: center;
  font-size: var(--font-tiny-size);
 }
 .media-box__header--link-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr 1fr 1fr;
  text-align: center;
  width: fit-content;
 }
 .media-box__content {
  width: 100%;
  padding-top: 100%;
  position: relative;
  border-radius: 0 0 var(--border-radius-inner) var(--border-radius-inner);
  overflow: hidden;
  .image-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
 }
 .media-box__content--featured {
  .media-box__image {
    max-height: var(--media-featured-width);
  }
 }
 .media-box__overlay {
  display: block;
  position: absolute;
  z-index: 4;
  min-width: 95%;
  text-align: left;
  font-weight: bold;
  word-wrap: break-word;
  color: var(--text-color);
  background: var(--primary-color);
  padding: 0 var(--padding-normal);
  line-height: var(--media-header-height);
  pointer-events: none;
  top: 0;
 }
 .media-box__overlay:nth-child(2) {
  top: var(--media-header-height);
 }
 .image-container {
  @extend .flex__column--centered;
 }
 .image-container a {
  display: flex;
  max-height: 100%;
  // For some reason tall images don't center properly within the container
  // without this hack. I blame CSS.
  & > img {
    max-height: 100%;
    margin: auto;
  }
 }
 .media-box__image {
  max-width: 100%;
  height: auto;
 }
 .media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: var(--padding-small);
 }
 .image-scaled {
  max-width: 100%;
 }
 .media-tiny-container {
  width: var(--media-tiny-container-width);
  height: var(--media-tiny-container-width);
 }
 .thumb_tiny {
  max-width: var(--media-tiny-container-width);
  max-height: var(--media-tiny-container-width);
 }
--- a/assets/css/elements/_mobile.scss
+++ b/assets/css/elements/_mobile.scss
@ -0,0 +1,27 @@
 // Phones.
@include if-phone {
  .hidden--phone {
    display: none !important;
  }
 }
 // Tablets.
@include if-tablet {
  .hidden--tablet {
    display: none !important;
  }
 }
 // Phones and tablets.
@include if-mobile {
  .hidden--mobile {
    display: none !important;
  }
 }
 // Anything larger than 1280px (Desktops).
@include if-desktop {
  .hidden--desktop {
    display: none !important;
  }
 }
--- a/assets/css/elements/_separator.scss
+++ b/assets/css/elements/_separator.scss
@ -0,0 +1,39 @@
@mixin separator-type($type) {
  .separator--#{$type} {
    border-color: var(--#{$type}-border-color);
    &.separator--vertical {
      background: var(--#{$type}-border-color);
    }
  }
  .button__group--standalone .separator--#{$type},
  .button__group .separator--#{$type} {
    &.separator--vertical {
      background: var(--#{$type}-color) !important;
    }
  }
 }
 .separator {
  margin: var(--padding-normal) 0;
 }
 .separator--thin {
  margin: var(--padding-small) 0;
 }
 .separator--vertical {
  width: 1px;
  height: inherit;
  margin: 0 var(--padding-small);
  background: var(--primary-border-color);
 }
@include separator-type(primary);
@include separator-type(secondary);
@include separator-type(success);
@include separator-type(warning);
@include separator-type(danger);
@include separator-type(information);
@include separator-type(purple);
--- a/assets/css/elements/_table.scss
+++ b/assets/css/elements/_table.scss
@ -0,0 +1,14 @@
 .table {
  border-collapse: collapse;
  width: 100%;
 }
 .table td, th {
  padding: var(--padding-small);
  border: 1px solid var(--secondary-muted-color);
  text-align: left;
 }
 .table th {
  background: var(--secondary-color);
 }
--- a/assets/css/themes/dark-blue.scss
+++ b/assets/css/themes/dark-blue.scss
@ -0,0 +1,92 @@
 $background-color: #131a22;
 $text-color: #e0e0e0;
 $primary-color: #2e4c80;
 $secondary-color: #434f69;
 $danger-color: #57261f;
 $warning-color: #5c472a;
 $success-color: #255339;
 $information-color: #1f5057;
 $purple-color: #501f57;
 $upvote-color: #5b9b26;
 $downvote-color: #da3412;
 $fave-color: #a18e27;
 $comment-color: #b099dd;
 $hide-color: #da3412;
 $tag-default-color: #1b3c21;
 $tag-error-color: #4f181d;
 $tag-rating-color: #113456;
 $tag-origin-color: #1d1858;
 $tag-character-color: #193f47;
 $tag-oc-color: #451f47;
 $tag-species-color: #362118;
 $tag-body-type-color: #393939;
 $tag-content-fanmade-color: #622c4e;
 $tag-content-official-color: #4b491c;
 $tag-spoiler-color: #4f3811;
 $spoiler-color: #0f0f0f;
@mixin tag-color($tagname, $color, $text-percentage: 35%, $border-percentage: 15%) {
  --tag-#{$tagname}-color: #{$color};
  --tag-#{$tagname}-border-color: #{lighten($color, $border-percentage)};
  --tag-#{$tagname}-text-color: #{lighten($color, $text-percentage)};
 }
@mixin type-color($type, $color) {
  --#{$type}-color: #{$color};
  --#{$type}-border-color: #{lighten(desaturate($color, 20%), 10%)};
  --#{$type}-dark-color: #{darken(desaturate($color, 25%), 12%)};
  --#{$type}-link-color: #{lighten(saturate($color, 10%), 45%)};
 }
 :root {
  --background-color: #{$background-color};
  --text-color: #{$text-color};
  --link-color: #{lighten(saturate($primary-color, 7%), 35%)};
  --link-hover-color: #{$text-color};
  --primary-color: #{$primary-color};
  --primary-border-color: #{lighten(desaturate($primary-color, 20%), 10%)};
  --primary-muted-color: #{darken(desaturate($primary-color, 10%), 10%)};
  --primary-dark-color: #{darken(desaturate($primary-color, 15%), 20%)};
  --secondary-color: #{$secondary-color};
  --secondary-border-color: #{lighten($secondary-color, 10%)};
  --secondary-muted-color: #{darken(desaturate($secondary-color, 5%), 10%)};
  --secondary-dark-color: #{darken($secondary-color, 15%)};
  --secondary-link-color: #{lighten($secondary-color, 55%)};
  --upvote-color: #{$upvote-color};
  --downvote-color: #{$downvote-color};
  --fave-color: #{$fave-color};
  --comment-color: #{$comment-color};
  --hide-color: #{$hide-color};
  --spoiler-color: #{$spoiler-color};
  --spoiler-revealed-color: #{lighten($spoiler-color, 20%)};
  @include type-color(success, $success-color);
  @include type-color(warning, $warning-color);
  @include type-color(danger, $danger-color);
  @include type-color(information, $information-color);
  @include type-color(purple, $purple-color);
  @include tag-color(default, $tag-default-color);
  @include tag-color(error, $tag-error-color, 37%);
  @include tag-color(rating, $tag-rating-color, 37%);
  @include tag-color(origin, $tag-origin-color, 42%);
  @include tag-color(character, $tag-character-color);
  @include tag-color(oc, $tag-oc-color, 40%);
  @include tag-color(species, $tag-species-color, 37%);
  @include tag-color(body-type, $tag-body-type-color, 45%, 12%);
  @include tag-color(content-fanmade, $tag-content-fanmade-color, 40%);
  @include tag-color(content-official, $tag-content-official-color);
  @include tag-color(spoiler, $tag-spoiler-color);
  /* Exceptions to mixin colors */
  --tag-origin-border-color: #{lighten(desaturate($tag-origin-color, 10%), 22%)};
 }
--- a/assets/css/themes/dark-purple.scss
+++ b/assets/css/themes/dark-purple.scss
@ -0,0 +1,92 @@
 $background-color: #1d1924;
 $text-color: #dadada;
 $primary-color: #3e2d5c;
 $secondary-color: #4f4066;
 $danger-color: #57261f;
 $warning-color: #5c472a;
 $success-color: #255339;
 $information-color: #1f5057;
 $purple-color: #501f57;
 $upvote-color: #5b9b26;
 $downvote-color: #da3412;
 $fave-color: #a18e27;
 $comment-color: #b099dd;
 $hide-color: #da3412;
 $tag-default-color: #1b3c21;
 $tag-error-color: #4f181d;
 $tag-rating-color: #113456;
 $tag-origin-color: #1d1858;
 $tag-character-color: #193f47;
 $tag-oc-color: #451f47;
 $tag-species-color: #362118;
 $tag-body-type-color: #393939;
 $tag-content-fanmade-color: #622c4e;
 $tag-content-official-color: #4b491c;
 $tag-spoiler-color: #4f3811;
 $spoiler-color: #0f0f0f;
@mixin tag-color($tagname, $color, $text-percentage: 35%, $border-percentage: 15%) {
  --tag-#{$tagname}-color: #{$color};
  --tag-#{$tagname}-border-color: #{lighten($color, $border-percentage)};
  --tag-#{$tagname}-text-color: #{lighten($color, $text-percentage)};
 }
@mixin type-color($type, $color) {
  --#{$type}-color: #{$color};
  --#{$type}-border-color: #{lighten(desaturate($color, 5%), 30%)};
  --#{$type}-dark-color: #{darken($color, 15%)};
  --#{$type}-link-color: #{lighten($color, 45%)};
 }
 :root {
  --background-color: #{$background-color};
  --text-color: #{$text-color};
  --link-color: #{lighten(saturate($primary-color, 7%), 30%)};
  --link-hover-color: #{$text-color};
  --primary-color: #{$primary-color};
  --primary-border-color: #{lighten($primary-color, 20%)};
  --primary-muted-color: #{darken(desaturate($primary-color, 10%), 10%)};
  --primary-dark-color: #{darken(desaturate($primary-color, 5%), 15%)};
  --secondary-color: #{$secondary-color};
  --secondary-border-color: #{lighten($secondary-color, 20%)};
  --secondary-muted-color: #{darken(desaturate($secondary-color, 5%), 10%)};
  --secondary-dark-color: #{darken($secondary-color, 15%)};
  --secondary-link-color: #{lighten($secondary-color, 55%)};
  --upvote-color: #{$upvote-color};
  --downvote-color: #{$downvote-color};
  --fave-color: #{$fave-color};
  --comment-color: #{$comment-color};
  --hide-color: #{$hide-color};
  --spoiler-color: #{$spoiler-color};
  --spoiler-revealed-color: #{lighten($spoiler-color, 20%)};
  @include type-color(success, $success-color);
  @include type-color(warning, $warning-color);
  @include type-color(danger, $danger-color);
  @include type-color(information, $information-color);
  @include type-color(purple, $purple-color);
  @include tag-color(default, $tag-default-color);
  @include tag-color(error, $tag-error-color, 37%);
  @include tag-color(rating, $tag-rating-color, 37%);
  @include tag-color(origin, $tag-origin-color, 42%);
  @include tag-color(character, $tag-character-color);
  @include tag-color(oc, $tag-oc-color, 40%);
  @include tag-color(species, $tag-species-color, 37%);
  @include tag-color(body-type, $tag-body-type-color, 45%, 12%);
  @include tag-color(content-fanmade, $tag-content-fanmade-color, 40%);
  @include tag-color(content-official, $tag-content-official-color);
  @include tag-color(spoiler, $tag-spoiler-color);
  /* Exceptions to mixin colors */
  --tag-origin-border-color: #{lighten(desaturate($tag-origin-color, 10%), 22%)};
 }
--- a/assets/css/themes/dark.scss
+++ b/assets/css/themes/dark.scss
@ -1,193 +0,0 @@
 /*
 * Darker theme
 */
 // ///////////////////////////////////
 // ///// SECTION 1 - MAIN COLORS /////
 // ///////////////////////////////////
 $background_color: #1d242f;
 $page_background_color: #141a24;
 $foreground_color: #e0e0e0;
 $base_color: #546c99;
 $primary_light_color: #1a4c6b;
 $success_light_color: #144714;
 $danger_light_color: #66211f;
 $warning_light_color: #7d4825;
 $destroyed_content_color: #382c2f;
 $meta_color: #191f2a;
 $header_color: #284371;
 $header_field_color: #1c3252;
 $header_secondary_color: #1d2b44;
 $header_admin_color: #3b1d1d;
 $block_header_color: #2e3a52;
 $block_header_link_text_color: #4f95db;
 $block_header_light_color: #252d3c;
 $block_header_light_link_text_color: #6198c2;
 $border_color: #2d3649;
 $media_box_color: #3d4657;
 $link_color: #478acc;
 $link_hover_color: #b099dd;
 $fave_color: #a18e27;
 $vote_up_color: #5b9b26;
 $vote_down_color: #da3412;
 $hide_color: #da3412;
 $assistant_color: #511b4e;
 $unread_message_color: #ff8800;
 $tag_normal_color: #4aa158;
 $tag_category_rating_color: #418dd9;
 $tag_category_spoiler_color: #d49b39;
 $tag_category_origin_color: #6f66d6;
 $tag_category_oc_color: #b157b7;
 $tag_category_error_color: #d45460;
 $tag_category_character_color: #4aaabf;
 $tag_category_content_official_color: #b9b541;
 $tag_category_content_fanmade_color: #cc8eb5;
 $tag_category_species_color: #b16b50;
 $tag_category_body_type_color: #b8b8b8;
 $commission_category_color: #e07b27;
 $site_notice_color: #07070a;
 $image_overlay_color: #ffffff;
 $image_overlay_background_color: #000000;
 // //////////////////////////////////////
 // ///// SECTION 2 - DERIVED COLORS /////
 // //////////////////////////////////////
 $text_light_color: $foreground_color;
 $meta_color: mix($foreground_color, $background_color, 5%);
 $meta_border_color: mix($foreground_color, $meta_color, 30%);
 $primary_color: saturate(lighten($primary_light_color, 5%), 4%);
 $success_color: lighten($success_light_color, 4%);
 $danger_color: lighten($danger_light_color, 5%);
 $warning_color: lighten($warning_light_color, 6%);
 $header_hover_color: darken($header_color, 8%);
 $header_field_hover_color: darken($header_hover_color, 4%);
 $header_secondary_hover_color: darken($header_secondary_color, 4%);
 $header_admin_hover_color: darken($header_admin_color, 5%);
 $block_header_hover_color: adjust_hue(saturate(darken($block_header_color, 4%), 4%), -3deg);
 $block_header_link_text_hover_color: adjust_hue(desaturate(darken($block_header_link_text_color, 3%), 20%), 6deg);
 $block_header_light_hover_color: adjust_hue(saturate(darken($block_header_light_color, 4%), 10%), -4deg);
 $block_header_light_link_text_hover_color: adjust_hue(desaturate(darken($block_header_light_link_text_color, 2%), 10%), 8deg);
 $media_box_hover_color: darken($media_box_color, 4%);
 $media_box_header_link_text_hover_color: desaturate(darken($link_color, 3%), 18%);
 $media_box_header_link_text_color: $link_color;
 $media_box_header_link_text_hover_color: darken($media_box_header_link_text_color, 10%);
 $link_dark_color: mix($link_color, $foreground_color, 70%);
 $link_dark_hover_color: mix($link_hover_color, $foreground_color, 70%);
 $image_show_link_color: $link_dark_color;
 $image_show_link_hover_color: $link_dark_hover_color;
 $image_overlay_color: $foreground_color;
 $image_overlay_background: darken($background_color, 30%);
 $assistant_border_color: lighten($assistant_color, 8%);
 $admin_links_color: mix($vote_down_color, $background_color, 17%);
 $admin_links_hover_color: mix($vote_down_color, $background_color, 48%);
 $background_odd_color: darken($background_color, 3%);
 $background_even_color: $background_color;
 $success_odd_color: desaturate(darken($success_color, 9%), 2%);
 $success_even_color: saturate(darken($success_light_color, 2%), 2%);
 $warning_odd_color: saturate(darken($warning_color, 19%), 10%);
 $warning_even_color: saturate(darken($warning_light_color, 7%), 7%);
 $danger_odd_color: desaturate(darken($danger_color, 16%), 2%);
 $danger_even_color: darken($danger_light_color, 6%);
 $foreground_half_color: mix($foreground_color, $background_color);
 $sparkline_color: lighten($base_color, 5%);
 $input_text_color: $foreground_color;
 $input_color: $meta_color;
 $input_border: $meta_border_color;
 $input_color_active: lighten($meta_color, 5%);
 $input_border_active: desaturate(lighten($base_color, 2%), 10%);
 $tag_normal_background: darken($tag_normal_color, 29%);
 $tag_normal_border: darken($tag_normal_color, 18%);
 $tag_category_rating_background: darken($tag_category_rating_color, 35%);
 $tag_category_rating_border: desaturate(darken($tag_category_rating_color, 20%), 10%);
 $tag_category_spoiler_background: darken($tag_category_spoiler_color, 34%);
 $tag_category_spoiler_border: darken($tag_category_spoiler_color, 23%);
 $tag_category_origin_background: darken($tag_category_origin_color, 40%);
 $tag_category_origin_border: desaturate(darken($tag_category_origin_color, 22%), 28%);
 $tag_category_oc_background: darken($tag_category_oc_color, 33%);
 $tag_category_oc_border: darken($tag_category_oc_color, 15%);
 $tag_category_error_background: desaturate(darken($tag_category_error_color, 38%), 6%);
 $tag_category_error_border: darken($tag_category_error_color, 22%);
 $tag_category_character_background: darken($tag_category_character_color, 33%);
 $tag_category_character_border: darken($tag_category_character_color, 20%);
 $tag_category_content_official_background: desaturate(darken($tag_category_content_official_color, 29%), 2%);
 $tag_category_content_official_border: darken($tag_category_content_official_color, 20%);
 $tag_category_content_fanmade_background: darken($tag_category_content_fanmade_color, 40%);
 $tag_category_content_fanmade_border: desaturate(darken($tag_category_content_fanmade_color, 20%), 10%);
 $tag_category_species_background: darken($tag_category_species_color, 35%);
 $tag_category_species_border: desaturate(darken($tag_category_species_color, 20%), 10%);
 $tag_category_body_type_background: darken($tag_category_body_type_color, 50%);
 $tag_category_body_type_border: desaturate(darken($tag_category_body_type_color, 37%), 10%);
 $commission_category_background: darken($commission_category_color, 36%);
 $commission_category_border: darken($commission_category_color, 25%);
 $site_notice_link_color: desaturate(lighten($block_header_link_text_color, 8%), 20%);
 $site_notice_link_hover_color: darken($site_notice_link_color, 8%);
 $button_text_color: $foreground_color;
 $button_background_color: rgba($meta_color, 0.2);
 $button_hover_background_color: $input_color_active;
 $button_hover_border_color: $input_border_active;
 $button_border_color: $meta_border_color;
 $button_primary_background_color: $primary_light_color;
 $button_success_background_color: $success_light_color;
 $button_warning_background_color: $warning_light_color;
 $button_danger_background_color: $danger_light_color;
 $button_primary_border_color: saturate(lighten($primary_light_color, 14%), 22%);
 $button_success_border_color: saturate(lighten($success_light_color, 9%), 10%);
 $button_warning_border_color: saturate(lighten($warning_light_color, 12%), 10%);
 $button_danger_border_color: saturate(lighten($danger_light_color, 18%), 6%);
 $button_primary_hover_background: darken($button_primary_background_color, 5%);
 $button_primary_hover_border: darken($button_primary_border_color, 5%);
 $button_success_hover_background: darken($button_success_background_color, 5%);
 $button_success_hover_border: darken($button_success_border_color, 5%);
 $button_warning_hover_background: darken($button_warning_background_color, 6%);
 $button_warning_hover_border: darken($button_warning_border_color, 6%);
 $button_danger_hover_background: darken($button_danger_background_color, 5%);
 $button_danger_hover_border: darken($button_danger_border_color, 5%);
 $downvote_disabled_color: mix($vote_down_color, $block_header_light_color, 30%);
 $dnp_warning_hover_color: lighten($vote_down_color, 10%);
 $poll_form_label_background: lighten($border_color, 8);
 $tag_dropdown_hover_background: darken($meta_color, 4%);
@import "~common/base";
--- a/assets/css/themes/default.scss
+++ b/assets/css/themes/default.scss
@ -1,183 +0,0 @@
 /*
 * Default theme - the same colors they've been for years
 */
 // ///////////////////////////////////
 // ///// SECTION 1 - MAIN COLORS /////
 // ///////////////////////////////////
 $background_color: #ffffff;
 $page_background_color: #f8fafc;
 $foreground_color: #333333;
 $base_color: #62a7d9;
 $primary_color: #c1e4f9;
 $success_color: #bde9a3; /* tag added, currently banned, view post history--added */
 $danger_color: #ebc0bb; /* tag removed, currently not banned, view post history--deleted */
 $warning_color: #eee9bc; /* NSFW streams, image spoilered, things like that */
 $link_color: #419cd9;
 $link_hover_color: #9273d0;
 $fave_color: #c4b246;
 $vote_up_color: #67af2b;
 $vote_down_color: #cf0001;
 $hide_color: #cf0001;
 $destroyed_content_color: #ffdcdc;
 $assistant_color: #eeceed;
 $unread_message_color: #ff8800;
 $tag_normal_color: #6f8f0e;
 $tag_category_rating_color: #267ead;
 $tag_category_spoiler_color: #c24523;
 $tag_category_origin_color: #393f85;
 $tag_category_oc_color: #9852a3;
 $tag_category_error_color: #ad263f;
 $tag_category_character_color: #2d8677;
 $tag_category_content_official_color: #998e1a;
 $tag_category_content_fanmade_color: #bb5496;
 $tag_category_species_color: #8b552f;
 $tag_category_body_type_color: #4e4e4e; 
 $commission_category_color: #986f3d;
 $image_overlay_color: #ffffff;
 $image_overlay_background_color: #000000;
 // //////////////////////////////////////
 // ///// SECTION 2 - DERIVED COLORS /////
 // //////////////////////////////////////
 $text_light_color: $background_color;
 $meta_color: mix($foreground_color, $background_color, 5%);
 $meta_border_color: mix($foreground_color, $meta_color, 30%);
 $header_color: darken($base_color, 9%);
 $header_hover_color: darken($base_color, 16%);
 $header_field_color: $base_color;
 $header_field_hover_color: darken($base_color, 7%);
 $header_secondary_color: desaturate(lighten($base_color, 30%), 25%);
 $header_secondary_hover_color: darken($header_secondary_color, 7%);
 $header_admin_color: mix($vote_down_color, $background_color, 16%);
 $header_admin_hover_color: mix($vote_down_color, $background_color, 30%);
 $block_header_color: lighten($base_color, 28%);
 $block_header_hover_color: desaturate(lighten($base_color, 20%), 5%);
 $block_header_link_text_color: saturate(darken($header_color, 5%), 6%);
 $block_header_link_text_hover_color: darken($header_color, 15%);
 $block_header_light_color: desaturate(lighten($base_color, 31%), 16%);
 $block_header_light_hover_color: lighten($header_secondary_hover_color, 2%);
 $block_header_light_link_text_color: darken($block_header_light_color, 42%);
 $block_header_light_link_text_hover_color: darken($block_header_light_color, 52%);
 $border_color: darken($block_header_light_color, 3%);
 $media_box_color: desaturate($block_header_light_color, 10%);
 $media_box_hover_color: saturate(darken($media_box_color, 6%), 6%);
 $media_box_header_link_text_color: $link_color;
 $media_box_header_link_text_hover_color: darken($media_box_header_link_text_color, 10%);
 $primary_light_color: lighten($primary_color, 5%);
 $success_light_color: lighten($success_color, 7%);
 $danger_light_color: lighten($danger_color, 4%);
 $warning_light_color: lighten($warning_color, 6%);
 $link_dark_color: darken($link_color, 20%); //used in the tag table, amongst other things
 $link_hover_dark_color: darken($link_hover_color, 20%);
 $image_show_link_color: $link_color;
 $image_show_link_hover_color: $link_hover_color;
 /* In default theme, except odd color to be darker! */
 $background_odd_color: lighten($base_color, 35%); //also used as 'alt background color' in various places
 $background_even_color: $background_color;
 /* Depending on the theme, you may want to swap even and odd colors */
 $success_odd_color: saturate(darken($success_light_color, 3%), 8%);
 $success_even_color: lighten($success_color, 13%);
 $warning_odd_color: saturate(darken($warning_light_color, 7%), 10%);
 $warning_even_color: lighten($warning_color, 5%);
 $danger_odd_color: saturate(darken($danger_light_color, 1%), 12%);
 $danger_even_color: desaturate(lighten($danger_color, 7%), 10%);
 $foreground_half_color: mix($foreground_color, $background_color); //used for weird h's (on image pages like Metadata Editing and Information) and also footer text color
 $sparkline_color: lighten($base_color, 5%);
 $assistant_border_color: darken($assistant_color, 8%);
 $admin_links_color: mix($vote_down_color, $background_color, 17%);
 $admin_links_hover_color: mix($vote_down_color, $background_color, 48%);
 $input_text_color: $foreground_color;
 $input_color: $meta_color;
 $input_border: $meta_border_color;
 $input_color_active: desaturate(lighten($base_color, 30%), 16%);
 $input_border_active: lighten($base_color, 10%);
 $tag_normal_background: desaturate(lighten($tag_normal_color, 44%), 28%);
 $tag_normal_border: darken($tag_normal_background, 16%);
 $tag_category_rating_background: desaturate(lighten($tag_category_rating_color, 41%), 25%);
 $tag_category_rating_border: darken($tag_category_rating_background, 10%);
 $tag_category_spoiler_background: lighten($tag_category_spoiler_color, 41%);
 $tag_category_spoiler_border: darken($tag_category_spoiler_background, 8%);
 $tag_category_origin_background: lighten($tag_category_origin_color, 43%);
 $tag_category_origin_border: darken($tag_category_origin_background, 10%);
 $tag_category_oc_background: lighten($tag_category_oc_color, 35%);
 $tag_category_oc_border: darken($tag_category_oc_background, 9%);
 $tag_category_error_background: lighten($tag_category_error_color, 40%);
 $tag_category_error_border: darken($tag_category_error_background, 8%);
 $tag_category_character_background: desaturate(lighten($tag_category_character_color, 44%), 10%);
 $tag_category_character_border: lighten($tag_category_character_color, 22%);
 $tag_category_content_official_background: lighten($tag_category_content_official_color, 41%);
 $tag_category_content_official_border: lighten($tag_category_content_official_color, 18%);
 $tag_category_content_fanmade_background: lighten($tag_category_content_fanmade_color, 36%);
 $tag_category_content_fanmade_border: lighten($tag_category_content_fanmade_color, 18%);
 $tag_category_species_background: lighten($tag_category_species_color, 44%);
 $tag_category_species_border: lighten($tag_category_species_color, 25%);
 $tag_category_body_type_background: lighten($tag_category_body_type_color, 45%);
 $tag_category_body_type_border: lighten($tag_category_body_type_color, 35%);
 $commission_category_background: saturate(lighten($commission_category_color, 40%), 12%);
 $commission_category_border: lighten($commission_category_color, 20%);
 $site_notice_color: darken($base_color, 32%);
 $site_notice_link_color: $block_header_light_color;
 $site_notice_link_hover_color: $block_header_hover_color;
 $button_text_color: $foreground_color;
 $button_background_color: rgba($meta_color, 0.2);
 $button_hover_background_color: $input_color_active;
 $button_hover_border_color: $input_border_active;
 $button_border_color: $meta_border_color;
 $button_primary_background_color: $primary_light_color;
 $button_success_background_color: $success_light_color;
 $button_warning_background_color: $warning_light_color;
 $button_danger_background_color: $danger_light_color;
 $button_primary_border_color: darken($primary_color, 8%);
 $button_success_border_color: darken($success_color, 10%);
 $button_warning_border_color: darken($warning_color, 11%);
 $button_danger_border_color: darken($danger_color, 8%);
 $button_primary_hover_background: darken($button_primary_background_color, 5%);
 $button_primary_hover_border: darken($button_primary_border_color, 5%);
 $button_success_hover_background: darken($button_success_background_color, 5%);
 $button_success_hover_border: darken($button_success_border_color, 5%);
 $button_warning_hover_background: darken($button_warning_background_color, 6%);
 $button_warning_hover_border: darken($button_warning_border_color, 6%);
 $button_danger_hover_background: darken($button_danger_background_color, 5%);
 $button_danger_hover_border: darken($button_danger_border_color, 5%);
 $downvote_disabled_color: mix($vote_down_color, $block_header_light_color, 30%);
 $dnp_warning_hover_color: lighten($vote_down_color, 10%);
 $poll_form_label_background: lighten($border_color, 8);
 $tag_dropdown_hover_background: darken($meta_color, 4%);
@import "~common/base";
--- a/assets/css/themes/red.scss
+++ b/assets/css/themes/red.scss
@ -1,195 +0,0 @@
 /*
 * Red-yellow theme
 */
 // ///////////////////////////////////
 // ///// SECTION 1 - MAIN COLORS /////
 // ///////////////////////////////////
 $text_color: #eeeeee;
 $link_color: #dbdb00;
 $link_hover_color: #fff3bd;
 $grey: #3b3b3b;
 $background_color: #412121;
 $page_background_color: $background_color;
 $foreground_color: #e0e0e0;
 $base_color: #995454;
 $primary_light_color: #641f1f;
 $success_light_color: #2e4e2e;
 $danger_light_color: #7b3b00;
 $warning_light_color: #5b5b00;
 $destroyed_content_color: #412f2f;
 $meta_color: #411d1d;
 $header_color: #923131;
 $header_field_color: #5e2727;
 $header_secondary_color: #7a2d2d;
 $header_admin_color: $grey;
 $block_header_color: #812d2d;
 $block_header_link_text_color: $link_color;
 $block_header_light_color: #7a3030;
 $block_header_light_link_text_color: $link_color;
 $border_color: #7c2424;
 $media_box_color: #7c2424;
 $fave_color: #a18e27;
 $vote_up_color: #5b9b26;
 $vote_down_color: #da3412;
 $hide_color: #da3412;
 $assistant_color: #511b4e;
 $unread_message_color: #ff8800;
 $tag_normal_color: #d16767;
 $tag_category_rating_color: #9dc3e9;
 $tag_category_spoiler_color: #ddcf53;
 $tag_category_origin_color: #bbb6eb;
 $tag_category_oc_color: #dd7ee4;
 $tag_category_error_color: #ff5566;
 $tag_category_character_color: #82d0e2;
 $tag_category_content_official_color: #d1cf84;
 $tag_category_content_fanmade_color: #ebb1d6;
 $tag_category_species_color: #d2b48c;
 $tag_category_body_type_color: #b8b8b8;
 $commission_category_color: #e02727;
 $site_notice_color: $grey;
 $image_overlay_color: #ffffff;
 $image_overlay_background_color: #000000;
 // //////////////////////////////////////
 // ///// SECTION 2 - DERIVED COLORS /////
 // //////////////////////////////////////
 $text_light_color: $foreground_color;
 $meta_color: mix($foreground_color, $background_color, 5%);
 $meta_border_color: mix($foreground_color, $meta_color, 30%);
 $primary_color: saturate(lighten($primary_light_color, 5%), 4%);
 $success_color: lighten($success_light_color, 4%);
 $danger_color: lighten($danger_light_color, 5%);
 $warning_color: lighten($warning_light_color, 6%);
 $header_hover_color: darken($header_color, 8%);
 $header_field_hover_color: darken($header_hover_color, 4%);
 $header_secondary_hover_color: darken($header_secondary_color, 4%);
 $header_admin_hover_color: darken($header_admin_color, 5%);
 $block_header_hover_color: adjust_hue(saturate(darken($block_header_color, 4%), 4%), -3deg);
 $block_header_link_text_hover_color: adjust_hue(desaturate(darken($block_header_link_text_color, 3%), 20%), 6deg);
 $block_header_light_hover_color: adjust_hue(saturate(darken($block_header_light_color, 4%), 10%), -4deg);
 $block_header_light_link_text_hover_color: adjust_hue(desaturate(darken($block_header_light_link_text_color, 2%), 10%), 8deg);
 $media_box_hover_color: darken($media_box_color, 4%);
 $media_box_header_link_text_hover_color: desaturate(darken($link_color, 3%), 18%);
 $media_box_header_link_text_color: $link_color;
 $media_box_header_link_text_hover_color: darken($media_box_header_link_text_color, 10%);
 $link_dark_color: mix($link_color, $foreground_color, 70%);
 $link_dark_hover_color: mix($link_hover_color, $foreground_color, 70%);
 $image_show_link_color: $link_dark_color;
 $image_show_link_hover_color: $link_dark_hover_color;
 $image_overlay_color: $foreground_color;
 $image_overlay_background: darken($background_color, 30%);
 $assistant_border_color: lighten($assistant_color, 8%);
 $admin_links_color: mix($vote_down_color, $background_color, 17%);
 $admin_links_hover_color: mix($vote_down_color, $background_color, 48%);
 $background_odd_color: darken($background_color, 3%);
 $background_even_color: $background_color;
 $success_odd_color: desaturate(darken($success_color, 9%), 2%);
 $success_even_color: saturate(darken($success_light_color, 2%), 2%);
 $warning_odd_color: saturate(darken($warning_color, 19%), 10%);
 $warning_even_color: saturate(darken($warning_light_color, 7%), 7%);
 $danger_odd_color: desaturate(darken($danger_color, 16%), 2%);
 $danger_even_color: darken($danger_light_color, 6%);
 $foreground_half_color: mix($foreground_color, $background_color);
 $sparkline_color: lighten($base_color, 5%);
 $input_text_color: $foreground_color;
 $input_color: $meta_color;
 $input_border: $meta_border_color;
 $input_color_active: lighten($meta_color, 5%);
 $input_border_active: desaturate(lighten($base_color, 2%), 10%);
 $tag_normal_background: darken($tag_normal_color, 29%);
 $tag_normal_border: darken($tag_normal_color, 18%);
 $tag_category_rating_background: darken($tag_category_rating_color, 35%);
 $tag_category_rating_border: desaturate(darken($tag_category_rating_color, 20%), 10%);
 $tag_category_spoiler_background: darken($tag_category_spoiler_color, 34%);
 $tag_category_spoiler_border: darken($tag_category_spoiler_color, 23%);
 $tag_category_origin_background: darken($tag_category_origin_color, 30%);
 $tag_category_origin_border: desaturate(darken($tag_category_origin_color, 22%), 28%);
 $tag_category_oc_background: darken($tag_category_oc_color, 33%);
 $tag_category_oc_border: darken($tag_category_oc_color, 15%);
 $tag_category_error_background: desaturate(darken($tag_category_error_color, 38%), 6%);
 $tag_category_error_border: darken($tag_category_error_color, 22%);
 $tag_category_character_background: darken($tag_category_character_color, 33%);
 $tag_category_character_border: darken($tag_category_character_color, 20%);
 $tag_category_content_official_background: desaturate(darken($tag_category_content_official_color, 29%), 2%);
 $tag_category_content_official_border: darken($tag_category_content_official_color, 20%);
 $tag_category_content_fanmade_background: darken($tag_category_content_fanmade_color, 40%);
 $tag_category_content_fanmade_border: desaturate(darken($tag_category_content_fanmade_color, 20%), 10%);
 $tag_category_species_background: darken($tag_category_species_color, 40%);
 $tag_category_species_border: desaturate(darken($tag_category_species_color, 20%), 10%);
 $tag_category_body_type_background: darken($tag_category_body_type_color, 50%);
 $tag_category_body_type_border: desaturate(darken($tag_category_body_type_color, 37%), 10%);
 $commission_category_background: darken($commission_category_color, 36%);
 $commission_category_border: darken($commission_category_color, 25%);
 $site_notice_link_color: desaturate(lighten($block_header_link_text_color, 8%), 20%);
 $site_notice_link_hover_color: darken($site_notice_link_color, 8%);
 $button_text_color: $foreground_color;
 $button_background_color: rgba($meta_color, 0.2);
 $button_hover_background_color: $input_color_active;
 $button_hover_border_color: $input_border_active;
 $button_border_color: $meta_border_color;
 $button_primary_background_color: $primary_light_color;
 $button_success_background_color: $success_light_color;
 $button_warning_background_color: $warning_light_color;
 $button_danger_background_color: $danger_light_color;
 $button_primary_border_color: saturate(lighten($primary_light_color, 14%), 22%);
 $button_success_border_color: saturate(lighten($success_light_color, 9%), 10%);
 $button_warning_border_color: saturate(lighten($warning_light_color, 12%), 10%);
 $button_danger_border_color: saturate(lighten($danger_light_color, 18%), 6%);
 $button_primary_hover_background: darken($button_primary_background_color, 5%);
 $button_primary_hover_border: darken($button_primary_border_color, 5%);
 $button_success_hover_background: darken($button_success_background_color, 5%);
 $button_success_hover_border: darken($button_success_border_color, 5%);
 $button_warning_hover_background: darken($button_warning_background_color, 6%);
 $button_warning_hover_border: darken($button_warning_border_color, 6%);
 $button_danger_hover_background: darken($button_danger_background_color, 5%);
 $button_danger_hover_border: darken($button_danger_border_color, 5%);
 $downvote_disabled_color: mix($vote_down_color, $block_header_light_color, 30%);
 $dnp_warning_hover_color: lighten($vote_down_color, 10%);
 $poll_form_label_background: lighten($border_color, 8);
 $tag_dropdown_hover_background: darken($meta_color, 4%);
@import "~common/base";
--- a/assets/css/views/_admin.scss
+++ b/assets/css/views/_admin.scss
@ -0,0 +1,12 @@
 .header__counter__admin {
  position: absolute;
  background: var(--danger-color);
  border: 1px solid var(--danger-border-color);
  border-radius: var(--border-radius-inner);
  min-width: var(--number-badge-size);
  line-height: var(--number-badge-size);
  font-size: var(--number-badge-size);
  padding: var(--number-badge-padding);
  top: var(--number-badge-lower-offset);
  left: 0.25rem;
 }
--- a/assets/css/views/_adverts.scss
+++ b/assets/css/views/_adverts.scss
@ -1,30 +0,0 @@
 #imagespns {
  border: $border;
  padding: 2px 10px;
  background: $background_odd_color;
  text-align: center;
  .subtext {
    font-size: 10px;
  }
  .spnstxt {
    font-size: 10px;
    text-transform: uppercase;
    color: $foreground_half_color;
    margin: 2px;
    margin-bottom: 4px;
  }
  img {
    max-width: 100%;
    height: auto;
  }
 }
 #imagespns__link {
  display: flex;
  justify-content: center;
 }
 .table--adverts__image {
  width: 730px;
 }
--- a/assets/css/views/_badges.scss
+++ b/assets/css/views/_badges.scss
@ -1,15 +0,0 @@
 .badge {
  display: inline-block;
  line-height: 16px;
  margin: 0 1px;
 }
 .badges {
  display: inline-block;
  padding: 0 4px;
 }
 .badges > .badge > img {
  max-width: unset;
 }
--- a/assets/css/views/_burger.scss
+++ b/assets/css/views/_burger.scss
@ -0,0 +1,4 @@
 // Temporary; todo: make it work
 #burger {
  display: none;
 }
--- a/assets/css/views/_channels.scss
+++ b/assets/css/views/_channels.scss
@ -1,21 +0,0 @@
 .channel-strip__image {
  vertical-align: top;
 }
 .channel-strip__state {
  white-space: nowrap;
 }
 .media-box__header--channel {
  width: 240px;
 }
 .media-box__header--channel .label {
  vertical-align: middle;
  line-height: 11px;
 }
 .media-box__content--channel {
  width: 240px;
  height: 180px;
 }
--- a/assets/css/views/_comments.scss
+++ b/assets/css/views/_comments.scss
@ -1,17 +0,0 @@
 .fetched-comment {
  margin-bottom: -1px; /* collapse block borders */
 }
 .comment_deleted {
  color: $vote_down_color;
 }
 .comment_under_review {
  color: blue;
 }
 .post-image-container {
  width: 60px;
  text-align: center;
 }
--- a/assets/css/views/_commissions.scss
+++ b/assets/css/views/_commissions.scss
@ -1,38 +0,0 @@
 // Category Tag
 .commission__category {
  border: 1px solid;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
  margin-right: 5px;
  padding: 5px;
  background: $commission_category_background;
  border-color: $commission_category_border;
  color: $commission_category_color;
 }
 .commission__block_body {
  word-wrap: break-word;
 }
 .commission__category a {
  color: inherit;
 }
 .commission__listing_body {
  overflow: hidden;
 }
 .commission__listing_artist {
  font-size: 15px;
  font-weight: bold;
 }
 .commission__listing__body_text {
  img { max-width: 100%; }
  word-wrap: break-word;
  margin-top: 3px;
  margin-bottom: 6px;
 }
--- a/assets/css/views/_communication.scss
+++ b/assets/css/views/_communication.scss
@ -0,0 +1,45 @@
 .communication__toolbar {
  font-size: var(--font-size);
  background: var(--secondary-color);
  padding: 0 var(--padding-small);
  line-height: var(--block-header-height);
  border: 1px solid var(--secondary-border-color);
  border-bottom: 0;
  box-sizing: border-box;
 }
 .communication__toolbar__button {
  color: var(--text-color);
  background: 0;
  border: 0;
  padding: var(--padding-small);
  &:hover {
    background: var(--secondary-muted-color);
  }
 }
 .communication-edit__actions {
  @extend .flex__row;
  line-height: var(--block-header-height);
  border: 0;
  margin: var(--padding-normal);
  margin-top: 0;
  gap: var(--padding-normal);
 }
 .communication__anonymous {
  @extend .flex__row;
  line-height: ar(--block-header-height);
  background: var(--secondary-color);
  border: 1px solid var(--secondary-border-color);
 }
 .communication__anonymous--checkbox {
  padding: 0 var(--padding-small);
  border-right: 1px solid var(--secondary-border-color);
 }
 .communication__anonymous--label {
  padding: 0 var(--padding-small);
 }
--- a/assets/css/views/_communications.scss
+++ b/assets/css/views/_communications.scss
@ -1,104 +0,0 @@
 td.table--communication-list__name {
  font-size: 18px;
 }
 td.table--communication-list__stats {
  width: 6%;
 }
 td.table--communication-list__last-post,
 td.table--communication-list__options {
  width: 35%;
 }
 .communication:target {
  border: 1px solid $input_border_active;
 }
 .communication__body {
  overflow: hidden;
 }
 span.communication__body__sender-name {
  font-size: 15px;
  font-weight: bold;
 }
 .communication__body__text {
  img { max-width: 100%; }
  word-wrap: break-word;
  margin-top: 3px;
  margin-bottom: 6px;
  line-height: 1.35em;
 }
 span.communication__sender__stats,
 .communication__options {
  font-size: 0.86em;
 }
 .communication__options {
  background: $background_odd_color;
  border-top: $border;
 }
 .communication__interaction {
  margin-left: 6px;
 }
 .communication__info {
  display: unset;
  margin-left: 6px;
 }
 .communication-edit__tab {
  padding-bottom: 12px;
 }
 .communication-edit__actions {
  margin-top: -4px; /* Dirty! 1px to override the border, 3px to negate input margin */
  padding-top: 0;
 }
 .avatar-svg {
  max-width: 100%;
  max-height: 100%;
 }
 .communication__toolbar {
  margin-bottom: 6px;
 }
 .communication__toolbar__button {
  background-color: $meta_color;
  border: 1px solid $meta_border_color;
  color: $foreground_color;
  margin: 1px;
  padding: 4px;
  border-radius: 0;
  cursor: pointer;
  min-width: 30px;
  &:hover {
    background-color: $input_color_active;
  }
  &:focus, &:hover, &:active, &:visited {
    border-color: $input_border_active;
    outline: 0;
  }
 }
 .hyphenate-breaks{
  hyphens: auto;
 }
 .checkbox-label-of-doom {
  display: inline-block;
  margin-right: 2em;
 }
 .communication--destroyed {
  background-color: $destroyed_content_color;
 }
--- a/assets/css/views/_duplicate_reports.scss
+++ b/assets/css/views/_duplicate_reports.scss
@ -1,53 +0,0 @@
 // 16x16 checkerboard
@mixin img-checkerboard-background {
  img {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAGUlEQVR42mP474AKGdDhCFGALoChYWQoAACpW7+B5lv5BwAAAABJRU5ErkJggg==");
  }
 }
 .grid--dupe-report-list {
  grid-template-rows: auto;
  grid-template-columns: 200px [image-cell-1] 200px [image-cell-2] auto [diff] auto [status-options];
 }
 .grid--dupe-report-list__cell {
  padding: .5em .25em .5em .25em;
 }
 .dr__image-cell {
  .image-container {
    @include img-checkerboard-background;
  }
 }
 .dr__diff {
  white-space: nowrap;
 }
 .dr__status-options {
  padding: .5em;
 }
 .report-duplicate {
  margin-top: 1em;
 }
 .difference, .swipe, .onion-skin {
  display: flex;
  flex-direction: column;
  align-items: center;
 }
 .onion-skin__slider {
  width: 100%;
  margin-top: 10px;
  max-width: 500px;
 }
 .swipe__image {
  cursor: ew-resize;
 }
 .difference__image, .swipe__image, .onion-skin__image {
  max-height: 900px;
 }
--- a/assets/css/views/_filters.scss
+++ b/assets/css/views/_filters.scss
@ -1,31 +0,0 @@
 // Place all the styles related to the filters controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
 /* TODO: -> block */
 /* FIXME: ugly selectors (.filter .filter-options ul li a:hover) */
 .filter {
  background: $background_odd_color;
  border: $border;
  padding-left: $header_spacing;
  margin-bottom: 8px;
  h3 {
    margin: 0;
    margin-top: 10px;
  }
  .filter-options {
    ul {
      list-style: none;
      padding-left: 2px;
      li {
        display: inline;
        margin-right: 20px;
      }
    }
  }
 }
 .spoiler-filter-code {
  white-space: pre-wrap;
 }
--- a/assets/css/views/_galleries.scss
+++ b/assets/css/views/_galleries.scss
@ -1,67 +0,0 @@
 .media-box--js-sortable-chosen .media-box__header {
  background: $primary_color;
 }
 /* The server renders additional thumb(s) for extra images in a gallery,
 * if the user is allowed to edit it and it has multiple pages; hide these
 * until the user explicitly requests to edit it (if at all). */
 .js-sortable-has-next:not(.editing) .media-box:last-child,
 .js-sortable-has-prev:not(.editing) .media-box:first-child {
  display: none;
 }
 /* Make it clear that the extra images are not truly part of the page. */
 .js-sortable-has-next .media-box:last-child,
 .js-sortable-has-prev .media-box:first-child {
  opacity: 0.4;
 }
 .input--search-gallery-list {
  border: $border;
  width: 250px;
  padding: 0 4px;
  line-height: 28px;
  font-family: $font_family_base;
 }
 .input--search-gallery-list, .add-to-gallery-list ul a.block__list__link {
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
 }
 .add-to-gallery-list {
  ::-webkit-scrollbar-track
  {
    -webkit-box-shadow: inset 0 0 6px #ccc;
    background-color: $background_color;
  }
  ::-webkit-scrollbar
  {
    width: 6px;
    background-color: $background_color;
  }
  ::-webkit-scrollbar-thumb
  {
    background-color: $primary_color;
  }
  ul {
    max-height: 132px;
    overflow-y: auto;
    overflow-x: hidden; /* Scrollbar customization is only available in WebKit; Gecko and IE have wider bars that cause horizontal overflow */
  }
 }
 /* Limit the width of ul items inside gallery list (.add-to-gallery-list includes .block__list__link elements
 * that are not part of the list, hence nested selector) */
 .add-to-gallery-list li a.block__list__link {
  width: 244px; /* input--search-gallery-list width - 6px scrollbar */
 }
 .dragging {
  opacity: 0.4;
 }
--- a/assets/css/views/_header.scss
+++ b/assets/css/views/_header.scss
@ -0,0 +1,95 @@
 .header {
  background: var(--primary-color);
  line-height: var(--navbar-size);
  padding: 0 var(--padding-normal);
  border-bottom: 1px solid var(--primary-border-color);
  box-shadow: 0 1px var(--primary-muted-color) inset, 0 -1px var(--primary-dark-color) inset;
  font-size: var(--font-header-size);
 }
 .header--secondary {
  background: var(--secondary-dark-color);
  border-color: var(--secondary-color);
  line-height: var(--navbar-secondary-size);
  .header__link {
    border-right-color: var(--secondary-color);
    border-left-color: var(--secondary-dark-color);
    & > .fa {
      margin-right: var(--padding-small);
    }
    &:hover {
      background: var(--secondary-muted-color);
    }
  }
 }
 .header__spacer {
  flex: 1 0 auto;
  height: var(--navbar-size);
 }
 .header__link {
  color: var(--text-color) !important;
  display: block;
  position: relative;
  flex-shrink: 0;
  padding: 0 var(--padding-small);
  border-right: 1px solid var(--primary-border-color);
  border-left: 1px solid var(--primary-dark-color);
  &:hover {
    background: var(--primary-dark-color);
  }
 }
 .header__link--no-hover:hover {
  background: 0 !important;
 }
 .header__input {
  @include animated-transition;
  height: var(--navbar-input-size);
  background: var(--primary-muted-color);
  font-size: var(--font-size);
  border: 0;
 }
 select.header__input {
  cursor: pointer;
 }
 select.header__input:hover {
  @include animated-transition;
  background: var(--primary-dark-color) !important;
 }
 .header__search {
  @extend .flex__row;
  height: var(--navbar-size);
  padding: 0 var(--padding-small);
  border-right: 1px solid var(--primary-border-color);
  border-left: 1px solid var(--primary-dark-color);
 }
 .header__buttons {
  border: 0;
  border-radius: 0;
  border-left: 1px solid var(--primary-dark-color);
 }
 .header__search__button {
  height: var(--navbar-input-size);
  background: var(--primary-muted-color);
  box-shadow: 0 -1px var(--secondary-dark-color) inset;
 }
 .header__search__button:hover {
  background: var(--primary-dark-color) !important;
 }
 .header__filter-form {
  padding: 0 var(--padding-small);
 }
--- a/assets/css/views/_images.scss
+++ b/assets/css/views/_images.scss
@ -1,331 +0,0 @@
 .image-flex-grid {
  padding-right: 0;
  padding-bottom: 0;
 }
 .media-box__header {
  span.favorites,
  span.comments_count {
    padding-left: 4px;
  }
  span.score {
    padding: 0 4px;
  }
 }
 .media-box__header--small {
  span.favorites,
  span.comments_count {
    padding-left: 2px;
  }
  span.score {
    padding: 0 2px;
  }
 }
 a.interaction--fave {
  color: $fave_color;
  &.active,
  &:hover {
    background: $fave_color;
    color: $text_light_color;
  }
 }
 a.interaction--upvote {
  color: $vote_up_color;
  &.active,
  &:hover {
    background: $vote_up_color;
    color: $text_light_color;
  }
 }
 a.interaction--downvote {
  color: $vote_down_color;
  &.active,
  &:hover {
    background: $vote_down_color;
    color: $text_light_color;
  }
 }
 a.interaction--hide {
  color: $hide_color;
  &.active,
  &:hover {
    background: $hide_color;
    color: $text_light_color;
  }
 }
 a.interaction--comments {
  color: $link_hover_color;
  &:hover {
    background: $link_hover_color;
    color: $background_color;
  }
 }
 /* Disable spoilered image downvoting (see the interactions script) */
 .interaction--downvote.disabled,
 .interaction--downvote.disabled:hover {
  cursor: default;
  color: $downvote_disabled_color;
  background: $media_box_color;
 }
 .tag-info__image {
  border: $border;
  text-align: center;
  font-size: 12px;
 }
 /* Images rendered using the 'images/image_container' partial (image lists, comment list previews, gallery thumbs) */
 div.image-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
  /* prevent .media-box__overlay from overflowing the container */
  text-align: center;
  a::before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  img,
  video {
    vertical-align: middle;
    max-width: 100%;
    max-height: 100%;
  }
  /* Make the link cover the whole container if the image is oblong */
  a {
    width: 100%;
    height: 100%;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
  }
 }
 /* spoilered images inside communications */
 span.spoiler div.image-container {
  display: block;
 }
 /* .image-container sizes, set by the partial. */
 .thumb {
  max-width: 250px;
  max-height: 250px;
 }
 .thumb_small {
  max-width: 150px;
  max-height: 150px;
 }
 .thumb_tiny {
  width: 50px;
  height: 50px;
 }
 /* Used for elements that wrap .image-container */
 .thumb-tiny-container {
  width: 50px;
  height: 50px;
 }
 //embedded images. kinda like image-container, but this one also shows a text, link to filter page, etc
 .image-show-container {
  color: $foreground_color;
  display: inline-block;
  max-width: 100%;
  padding-bottom: 6px;
  span.spoileredtag,
  span.hiddentag {
    font-weight: bold;
  }
  a {
    color: $image_show_link_color;
  }
  &:hover a:hover {
    color: $image_show_link_hover_color;
  }
 }
 /* This and the one above needed for older browsers for some reason, appears to be a bug */
 .image-target {
  max-width: 100%;
 }
 /* Resizes large images to fit in a smaller container; width and height are defined inline */
 .image-constrained {
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    max-width: 100%;
    max-height: 100%;
  }
 }
 .image-scaled {
  max-width: 100%;
  max-height: 100%;
  /* Due to the address bar hiding/reappearing in mobile browsers, viewport
   * units are only reliable in desktop browsers. */
  @media (min-width: $min_px_width_for_desktop_layout) {
    max-height: 80vh;
  }
 }
 .image-partscaled {
  max-width: 100%;
 }
 .image-description {
  overflow: auto;
  img {
    max-width: 100%;
  }
 }
 .image-size {
  white-space: nowrap;
 }
 .js-source-link {
  word-wrap: break-word;
 }
 #image-source > p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }
 .interaction-user-list-item {
  display: inline-block;
  padding: 2px;
  padding-right: 7px;
 }
 .image_menu {
  padding-left: 0;
  margin: 1em 0 0 0;
 }
 .horizontal-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  li {
    display: inline-block;
  }
  li+li {
    margin-left: 1em;
  }
 }
 .dnp-warning {
  padding: 0.5em;
  border: 3px solid $vote_down_color;
  background: $admin_links_color;
  a {
    color: $vote_down_color;
    font-weight: bold;
    &:hover {
      color: $dnp_warning_hover_color;
    }
  }
  h4 {
    margin-top: 0.3em;
    margin-bottom: 0.2em;
  }
 }
 .derpy__2fa {
  width: 25%;
  min-width: 200px;
 }
 .derpy__login {
  margin-left: 8px;
  align-self: flex-end;
 }
 #js-image-upload-previews {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  &:empty {
    display: none;
  }
  img, video {
    max-height: 200px;
    max-width: 200px;
  }
  .scraper-preview--label {
    cursor: pointer;
    margin: 0 8px 8px 0;
    .scraper-preview--image-wrapper {
      display: inline-block;
      padding: 9px;
      border: 1px solid transparent;
      opacity: .6;
    }
    .scraper-preview--image {
      background: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxyZWN0IGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIvPjxyZWN0IGZpbGw9IiNFRkVGRUYiIHdpZHRoPSI4IiBoZWlnaHQ9IjgiLz48cmVjdCBmaWxsPSIjRUZFRkVGIiB3aWR0aD0iOCIgaGVpZ2h0PSI4IiB4PSI4IiB5PSI4Ii8+PC9zdmc+Cg==) repeat top left;
      background-size: 16px;
    }
    .scraper-preview--input {
      display: none;
    }
    &.checked>.scraper-preview--image-wrapper,
    .scraper-preview--input:checked+.scraper-preview--image-wrapper {
      opacity: 1;
      border-color: $input_border_active;
      background-color: $input_color_active;
    }
  }
 }
 .detail-link {
  margin-right: 8px;
 }
 .full-height {
  height: 100%;
 }
 .image_sources {
  display: grid;
  grid-template-columns: 2em auto;
 }
 .image_source__icon, .image_source__link {
  padding: 0.5em;
  overflow: hidden;
 }
 .image_source__icon {
  justify-self: center;
 }
--- a/assets/css/views/_markdown.scss
+++ b/assets/css/views/_markdown.scss
@ -0,0 +1,31 @@
 .textile-syntax-reference {
  @extend .flex__row;
  line-height: var(--block-header-height);
  vertical-align: center;
  margin-bottom: var(--padding-small);
  flex-wrap: wrap;
 }
 .textile-syntax-reference > span,
 .textile-syntax-reference > button {
  margin-left: var(--padding-normal);
 }
 .textile_help {
  width: 100%;
  margin-top: var(--padding-normal);
 }
 .spoiler, .spoiler a {
  color: var(--spoiler-color);
  background: var(--spoiler-color)
 }
 .spoiler-revealed, .spoiler:hover {
  color: var(--text-color);
  background: var(--spoiler-revealed-color);
 }
 .spoiler-revealed a, .spoiler:hover a {
  color: var(--link-color);
 }
--- a/assets/css/views/_metabar.scss
+++ b/assets/css/views/_metabar.scss
@ -0,0 +1,66 @@
@mixin fix-interaction($type) {
  .interaction--#{$type} {
    padding: var(--padding-tiny) var(--padding-small);
  }
 }
@include if-phone {
  .metabar__interactions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(5, 1fr);
    @include fix-interaction(fave);
    @include fix-interaction(upvote);
    @include fix-interaction(downvote);
    @include fix-interaction(hide);
  }
  .metabar__interactions * {
    align-self: center;
    justify-self: center;
  }
  .metabar__mobile-separator {
    height: 1px;
    width: 100%;
    margin-top: var(--padding-small);
    margin-bottom: var(--padding-normal);
    background: var(--primary-color);
  }
  .metabar__navigation {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: var(--padding-small);
  }
  .metabar__navigation a {
    align-self: center;
    justify-self: center;
  }
 }
 .metabar {
  @extend .flex__row--centered;
  line-height: var(--block-header-height);
 }
 .metabar a,
 .metabar .score {
  padding: var(--padding-small);
 }
 .metabar__user-credit {
  box-sizing: border-box;
 }
 .metabar__mobile-info {
  & td {
    padding: var(--padding-small);
  }
 }
 .badges {
  display: inline-block;
 }
--- a/assets/css/views/_pages.scss
+++ b/assets/css/views/_pages.scss
@ -1,10 +0,0 @@
 .kiwiirc-frame {
  border: 0;
  width: 900px;
  height: 600px;
 }
 .static-page__diff {
  font-family: $font_family_monospace;
  white-space: pre-wrap;
 }
--- a/assets/css/views/_pagination.scss
+++ b/assets/css/views/_pagination.scss
@ -1,44 +1,26 @@
-.page__header {
+.pagination {
  display: flex;
-  flex-wrap: wrap;
+  flex-direction: row;
  line-height: inherit;
 }
-.page__title {
+.pagination span {
-  overflow: hidden;
+  padding: 0 var(--padding-small);
  white-space: nowrap;
  text-overflow: ellipsis;
 }
-.page__title, .page__pagination {
+.pagination i {
-  flex-shrink: 0;
+  font-size: 0.8rem !important;
  display: block;
  box-sizing: border-box;
  max-width: 100%;
 }
-.pagination__dropdown {
+.pagination a {
-  min-width: 4em;
+  display: grid;
  grid-template-columns: auto auto;
  gap: var(--padding-tiny);
  align-items: center;
  padding: 0 var(--padding-small);
  font-weight: bold;
 }
-@media (max-width: $min_px_width_for_desktop_thumb) {
+.page__info {
-  .page__title, .page__options {
+  align-self: center;
    display: none;
  }
  .page__header, .page__pagination, .page__info {
    display: block;
    text-align: center;
  }
  .page__pagination nav {
    display: flex;
    width: 100%;
    a, span {
        text-align: center;
        flex: 1 1 auto;
        padding: 0 1vw;
      }
  }
 }
--- a/assets/css/views/_polls.scss
+++ b/assets/css/views/_polls.scss
@ -1,129 +0,0 @@
 .poll {
  margin-bottom: 1em;
 }
 .poll-area {
  border: 1px solid $border_color;
  background: $background_color;
  color: $foreground_color;
  padding: 10px;
 }
 .poll-area--in-tab {
  border: 0;
  background: transparent;
  padding: 4px;
 }
 .poll__header {
  margin: 0 0 5px;
  text-align: center;
 }
 .poll-vote-form, .poll-results {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
 }
 .poll-form__options {
  max-width: 100%;
  overflow: hidden;
 }
 .poll-form__options__label {
  padding: 5px;
  margin: 5px;
  border: 1px solid $border_color;
  background: $poll_form_label_background;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  cursor: pointer;
 }
 .poll-option__label,
 .poll-form__options__label span {
  white-space: pre-wrap;
  word-break: break-word;
 }
 .poll-form__status, .poll-results__concluded-at {
  margin-top: 5px;
  text-align: center;
 }
 .poll-form__actions {
  margin-top: 1em;
 }
 .poll-option-list {
  list-style: none;
  padding: 0;
  margin: 0;
 }
 .poll-option {
  padding: 5px;
 }
 .poll-option__text {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: flex-end;
 }
 .poll-option--top__text {
  color: $header_color;
 }
 .poll-option--top,
 .poll-option--user-vote {
  cursor: help;
 }
 .poll-option--user-vote {
  font-weight: bold;
 }
 .poll-option__label {
  padding-right: 5px;
 }
 .poll-option__counts {
  padding-left: 5px;
  display: flex;
  flex-flow: row nowrap;
  text-align: right;
 }
 .poll-bar {
  flex: 1 0 100%;
  height: 4px;
  border: 1px solid $border_color;
  background: $background_color;
  margin-top: 5px;
  user-select: none;
 }
 .poll-bar__image {
  display: block;
 }
 .poll-bar__fill  {
  fill: $header_color;
 }
 .poll-bar__fill--top {
  fill: $foreground_color;
 }
 #add-poll {
  margin-top:.5em;
 }
 #delete-poll-form {
  text-align: left;
 }
--- a/assets/css/views/_posts.scss
+++ b/assets/css/views/_posts.scss
@ -1,15 +0,0 @@
 // Place all the styles related to the Post controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
 // Post diffs
 del.differ {
  width: 670px;
  background: $danger_light_color;
 }
 ins.differ {
  width: 670px;
  background: $success_light_color;
 }
--- a/assets/css/views/_profiles.scss
+++ b/assets/css/views/_profiles.scss
@ -1,131 +0,0 @@
 .profile-top {
  display: flex;
  margin-bottom: 6px;
 }
 .profile-top__avatar {
  margin: 10px 10px 0 0;
 }
 .profile-top__name-and-links {
  // Allow options extra space on high width even when name is short
  flex: 1 1 0%;
 }
 // Lessen h1's margins because it's not butting up against text
 h1.profile-top__name-header {
  margin-top: 10px;
  margin-bottom: 0;
 }
 .table--stats {
  min-width: 220px;
  @media (max-width: 900px) {
    margin-left: 0;
  }
 }
 td.table--stats__parameter {
  width: 20%;
 }
 td.table--stats__value {
  width: 15%;
 }
 td.table--stats__sparkline {
  width: 65%;
 }
 .profile-top__options {
  display: flex;
  flex-wrap: wrap;
 }
 .profile-top__options__column {
  flex: 0 0 auto;
  // Override terrible browser styling
  list-style: none;
  padding: 0;
  margin: 0.5em 2em 0.5em 0;
 }
 .profile-admin__options__column {
  flex: 0 0 auto;
  list-style: none;
  padding: 4px;
  min-width: 200px;
  margin: 0.5em 2em 0.5em 0;
  li {
    padding: 6px;
    background: $header_secondary_color;
    margin: 4px 0;
  }
  li:hover {
    background: $header_secondary_hover_color;
  }
  a {
    display: block;
    color: $foreground_color !important;
  }
  .admin__button {
    margin-left: 4px;
  }
 }
@media (max-width: $min_px_width_for_desktop_layout) {
  .profile-admin__options__column {
    width: 100%;
  }
 }
 .profile-about {
  overflow: hidden;
 }
 .banner__2fa {
  margin-left: 8px;
  padding: 2px;
  .success {
    background: $success_color;
  }
  .danger {
    background: $danger_color;
  }
 }
 .enable-2fa {
  margin-top: 1em;
 }
 .break-word {
  word-wrap: break-word;
 }
 .avatar--28px {
  width: 28px;
  height: 28px;
 }
 .avatar--50px {
  width: 50px;
  height: 50px;
 }
 .avatar--100px {
  width: 100px;
  height: 100px;
 }
 .avatar--125px {
  width: 125px;
  height: 125px;
 }
--- a/assets/css/views/_search.scss
+++ b/assets/css/views/_search.scss
@ -1,3 +0,0 @@
 .flex-wrap {
  flex-wrap: wrap;
 }
--- a/assets/css/views/_statistics.scss
+++ b/assets/css/views/_statistics.scss
@ -0,0 +1,31 @@
 .statistics {
  @extend .flex__column;
  border: 1px solid var(--secondary-color);
 }
 .statistics__statistic {
  @include even-odd;
  display: grid;
  grid-template-columns: 15% 15% auto;
  background: var(--secondary-color);
 }
 .statistics__column {
  text-align: center;
  padding: var(--padding-small);
 }
 .sparkline {
  border-bottom: 1px solid var(--primary-border-color);
  display: flex;
  height: var(--padding-normal);
 }
 .barline__bar {
  fill: var(--primary-border-color);
  &:hover {
    fill: var(--danger-color);
  }
 }
--- a/assets/css/views/_stats.scss
+++ b/assets/css/views/_stats.scss
@ -1,7 +0,0 @@
 .upload-stats rect {
  fill: $sparkline_color;
 }
 .upload-stats rect:hover {
  fill: red;
 }
--- a/assets/css/views/_tag.scss
+++ b/assets/css/views/_tag.scss
@ -0,0 +1,88 @@
@mixin tag-color($tag_type) {
  &[data-tag-category=#{$tag_type}] {
    color: var(--tag-#{$tag_type}-text-color);
    background: var(--tag-#{$tag_type}-color);
    border-color: var(--tag-#{$tag_type}-border-color);
    .tag__state {
      color: var(--tag-#{$tag_type}-text-color);
    }
    .tag__name {
      color: var(--tag-#{$tag_type}-text-color);
    }
    .tag__count {
      background: var(--tag-#{$tag_type}-border-color);
    }
  }
 }
 .tag-list {
  @extend .flex__row;
  flex-wrap: wrap;
  margin-bottom: var(--padding-normal);
 }
 .tag {
  display: inline-table;
  width: fit-content;
  line-height: var(--padding-large);
  margin-right: var(--padding-small);
  margin-bottom: var(--padding-small);
  color: var(--tag-default-text-color);
  background: var(--tag-default-color);
  border: 1px solid var(--tag-default-border-color);
  font-weight: bold;
  a {
    color: inherit;
  }
  @include tag-color(error);
  @include tag-color(rating);
  @include tag-color(origin);
  @include tag-color(character);
  @include tag-color(oc);
  @include tag-color(species);
  @include tag-color(body-type);
  @include tag-color(content-fanmade);
  @include tag-color(content-official);
  @include tag-color(spoiler);
 }
 .tag > span {
  display: table-cell;
  white-space: pre;
 }
 .tag__state {
  color: var(--tag-default-text-color);
  padding-left: var(--padding-small);
 }
 .tag__name {
  color: var(--tag-default-text-color);
  padding-right: var(--padding-small);
 }
 .tag__count {
  background: var(--tag-default-border-color);
  color: var(--text-color);
  padding: 0 var(--padding-small);
 }
 .tag__dropdown__link {
  background-color: var(--primary-muted-color);
  padding: 0 var(--padding-small);
  &:hover {
    background-color: var(--primary-dark-color);
  }
 }
 .tag-info__image {
  border: 1px solid var(--secondary-color);
  font-size: var(--font-tiny-size);
  text-align: center;
 }
--- a/assets/css/views/_tags.scss
+++ b/assets/css/views/_tags.scss
@ -1,217 +0,0 @@
 // Tagsinput
 .tagsinput {
  display: block;
  background: $background_color;
  border: 1px solid $meta_border_color;
  box-sizing: border-box;
  height: 10.6em;
  overflow: auto;
  padding: 5px;
  resize: both;
 }
 .tag-page .tag, .tagsinput .tag {
  font-family: $font_family_base;
  padding: 5px;
 }
 .tagsinput .tag a {
  margin-left: 5px;
 }
 .tagsinput.js-taginput {
  height: auto;
  min-height: 7.33em;
  max-height: 50vh;
  padding-bottom: 0;
  margin-bottom: 4px;
 }
 .tagsinput.js-taginput .input {
  padding: 5px;
  margin-bottom: 5px;
 }
 // Autocomplete
 .autocomplete__list {
  cursor: pointer;
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  user-select: none;
  white-space: nowrap;
 }
 .autocomplete__item {
  background: $base_color;
  color: $text_light_color;
  padding: 5px;
 }
 .autocomplete__item--selected {
  background: $text_light_color;
  color: $base_color;
 }
 // Tags
 .tag {
  border: 1px solid;
  display: inline-table;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
  margin-right: 5px;
 }
 .tag > span {
  padding: 5px;
  display: table-cell;
  white-space: pre;
 }
 .tag a {
  color: inherit;
 }
 .tag__count {
  background-color: $tag_normal_border;
  color: $foreground-color;
  font-weight: normal;
 }
 .tag__dropdown__link {
  background-color: $meta_color;
  padding: 5px;
  &:hover {
    background-color: $tag_dropdown_hover_background;
  }
 }
 .tag {
  background: $tag_normal_background;
  border-color: $tag_normal_border;
  color: $tag_normal_color;
  &[data-tag-category="rating"] {
    background: $tag_category_rating_background;
    border-color: $tag_category_rating_border;
    color: $tag_category_rating_color;
    .tag__count {
      background: $tag_category_rating_border;
    }
  }
  &[data-tag-category="spoiler"] {
    background: $tag_category_spoiler_background;
    border-color: $tag_category_spoiler_border;
    color: $tag_category_spoiler_color;
    .tag__count {
      background: $tag_category_spoiler_border;
    }
  }
  &[data-tag-category="origin"] {
    background: $tag_category_origin_background;
    border-color: $tag_category_origin_border;
    color: $tag_category_origin_color;
    .tag__count {
      background: $tag_category_origin_border;
    }
  }
  &[data-tag-category="oc"] {
    background: $tag_category_oc_background;
    border-color: $tag_category_oc_border;
    color: $tag_category_oc_color;
    .tag__count {
      background: $tag_category_oc_border;
    }
  }
  &[data-tag-category="error"] {
    background: $tag_category_error_background;
    border-color: $tag_category_error_border;
    color: $tag_category_error_color;
    .tag__count {
      background: $tag_category_error_border;
    }
  }
  &[data-tag-category="character"] {
    background: $tag_category_character_background;
    border-color: $tag_category_character_border;
    color: $tag_category_character_color;
    .tag__count {
      background: $tag_category_character_border;
    }
  }
  &[data-tag-category="content-official"] {
    background: $tag_category_content_official_background;
    border-color: $tag_category_content_official_border;
    color: $tag_category_content_official_color;
    .tag__count {
      background: $tag_category_content_official_border;
    }
  }
  &[data-tag-category="content-fanmade"] {
    background: $tag_category_content_fanmade_background;
    border-color: $tag_category_content_fanmade_border;
    color: $tag_category_content_fanmade_color;
    .tag__count {
      background: $tag_category_content_fanmade_border;
    }
  }
  &[data-tag-category="species"] {
    background: $tag_category_species_background;
    border-color: $tag_category_species_border;
    color: $tag_category_species_color;
    .tag__count {
      background: $tag_category_species_border;
    }
  }
  &[data-tag-category="body-type"] {
    background: $tag_category_body_type_background;
    border-color: $tag_category_body_type_border;
    color: $tag_category_body_type_color;
    .tag__count {
      background: $tag_category_body_type_border;
    }
  }
 }
 // Quick Tag Table
 .quick-tag-table__tab {
  > div {
    display: inline-block;
    padding: 0 6px;
    vertical-align: top;
    border-right: $border;
    border-left: $border;
  }
  > div:last-child {
    border-right: none;
  }
 }
 span.quick-tag-table__tab-separator {
  background: $background_color;
  border: $border;
  border-bottom: 0;
  display: inline-block;
 }
 .tag-image--constrained {
  width: 50px;
  height: 50px;
 }
 .tag-info__category {
  margin-left: 20px;
 }
 .tag-info__heading {
  margin: 8px 0;
 }
 .tag-info__list {
  margin: 0;
  padding-left: 30px;
 }
--- a/assets/js/app.js
+++ b/assets/js/app.js
@ -5,14 +5,13 @@
 // the compiled file.
 //
 // Third-party code, polyfills
 import './vendor/promise.polyfill';
 import './vendor/fetch.polyfill';
 import './vendor/closest.polyfill';
 import './vendor/customevent.polyfill';
 import './vendor/es6.polyfill';
 import './vendor/values-entries.polyfill';
 // Our code
 import './ujs';
 import './when-ready';
 // Base stylesheet.
 import '../css/application.scss';
 // Themes.
 import '../css/themes/dark-blue.scss';
 import '../css/themes/dark-purple.scss';
--- a/assets/js/galleries.js
+++ b/assets/js/galleries.js
@ -12,7 +12,7 @@ export function setupGalleryEditing() {
  const [ rearrangeEl, saveEl ] = $$('.rearrange-button');
  const sortableEl = $('#sortable');
-  const containerEl = $('.js-resizable-media-container');
+  const containerEl = $('.media-list');
  // Copy array
  let oldImages = window.booru.galleryImages.slice();
--- a/assets/js/resizablemedia.js
+++ b/assets/js/resizablemedia.js
@ -1,71 +0,0 @@
 let mediaContainers;
 /* Hardcoded dimensions of thumb boxes; at mediaLargeMinSize, large box becomes a small one (font size gets diminished).
 * At minimum width, the large box still has four digit fave/score numbers and five digit comment number fitting in a single row
 * (small box may lose the number of comments in a hidden overflow) */
 const mediaLargeMaxSize = 250, mediaLargeMinSize = 190, mediaSmallMaxSize = 156, mediaSmallMinSize = 140;
 /* Margin between thumbs (6) + borders (2) + 1 extra px to correct rounding errors */
 const mediaBoxOffset = 9;
 export function processResizableMedia() {
  [].slice.call(mediaContainers).forEach(container => {
    const containerHasLargeBoxes = container.querySelector('.media-box__content--large') !== null,
          containerWidth = container.offsetWidth - 14; /* subtract container padding */
    /* If at least three large boxes fit in a single row, we do not downsize them to small ones.
     * This ensures that desktop users get less boxes in a row, but with bigger images inside. */
    const largeBoxesFitting = Math.floor(containerWidth / (mediaLargeMinSize + mediaBoxOffset));
    if (largeBoxesFitting >= 3) {
      /* At the same time, we don't want small boxes to be upscaled. */
      if (containerHasLargeBoxes) {
        /* Larger boxes are preferred to more items in a row */
        setMediaSize(container, containerWidth, mediaLargeMinSize, mediaLargeMaxSize);
      }
    }
    /* Mobile users, on the other hand, should get as many boxes in a row as possible */
    else {
      setMediaSize(container, containerWidth, mediaSmallMinSize, mediaSmallMaxSize);
    }
  });
 }
 function applyMediaSize(container, size) {
  const mediaItems = container.querySelectorAll('.media-box__content');
  [].slice.call(mediaItems).forEach(item => {
    item.style.width = `${size}px`;
    item.style.height = `${size}px`;
    const header = item.parentNode.firstElementChild;
    // TODO: Make this proper and/or rethink this entire croc of bullshit
    item.parentNode.style.width = `${size}px`;
    /* When the large box has width less than mediaLargeMinSize, the header gets wrapped and occupies more than one line.
     * To prevent that, we add a class that diminishes its padding and font size. */
    if (size < mediaLargeMinSize) {
      header.classList.add('media-box__header--small');
    }
    else {
      header.classList.remove('media-box__header--small');
    }
  });
 }
 function setMediaSize(container, containerWidth, minMediaSize, maxMediaSize) {
  const maxThumbsFitting = Math.floor(containerWidth / (minMediaSize + mediaBoxOffset)),
        minThumbsFitting = Math.floor(containerWidth / (maxMediaSize + mediaBoxOffset)),
        fitThumbs = Math.round((maxThumbsFitting + minThumbsFitting) / 2),
        thumbSize = Math.max(Math.floor(containerWidth / fitThumbs) - 9, minMediaSize);
  applyMediaSize(container, thumbSize);
 }
 function initializeListener() {
  mediaContainers = document.querySelectorAll('.js-resizable-media-container');
  if (mediaContainers.length > 0) {
    window.addEventListener('resize', processResizableMedia);
    processResizableMedia();
  }
 }
 export { initializeListener };
--- a/assets/js/vendor/closest.polyfill.js
+++ b/assets/js/vendor/closest.polyfill.js
@ -1,31 +0,0 @@
 // element-closest | CC0-1.0 | github.com/jonathantneal/closest
 if (typeof Element.prototype.matches !== 'function') {
  Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.webkitMatchesSelector || function matches(selector) {
    var element = this;
    var elements = (element.document || element.ownerDocument).querySelectorAll(selector);
    var index = 0;
    while (elements[index] && elements[index] !== element) {
      ++index;
    }
    return Boolean(elements[index]);
  };
 }
 if (typeof Element.prototype.closest !== 'function') {
  Element.prototype.closest = function closest(selector) {
    var element = this;
    while (element && element.nodeType === 1) {
      if (element.matches(selector)) {
        return element;
      }
      element = element.parentNode;
    }
    return null;
  };
 }
--- a/assets/js/vendor/customevent.polyfill.js
+++ b/assets/js/vendor/customevent.polyfill.js
@ -1,17 +0,0 @@
 // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
 (function () {
  if ( typeof window.CustomEvent === "function" ) return false;
  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   }
  CustomEvent.prototype = window.Event.prototype;
  window.CustomEvent = CustomEvent;
 })();
--- a/assets/js/vendor/es6.polyfill.js
+++ b/assets/js/vendor/es6.polyfill.js
@ -1,104 +0,0 @@
 /**
 * ES6 methods polyfill
 * Sourced from their respective articles on MDN
 */
 if (!Array.prototype.find) {
  Array.prototype.find = function(predicate) {
    'use strict';
    if (this == null) {
      throw new TypeError('Array.prototype.find called on null or undefined');
    }
    if (typeof predicate !== 'function') {
      throw new TypeError('predicate must be a function');
    }
    var list = Object(this);
    var length = list.length >>> 0;
    var thisArg = arguments[1];
    var value;
    for (var i = 0; i < length; i++) {
      value = list[i];
      if (predicate.call(thisArg, value, i, list)) {
        return value;
      }
    }
    return undefined;
  };
 }
 if (!Array.prototype.findIndex) {
  Array.prototype.findIndex = function(predicate) {
    'use strict';
    if (this == null) {
      throw new TypeError('Array.prototype.findIndex called on null or undefined');
    }
    if (typeof predicate !== 'function') {
      throw new TypeError('predicate must be a function');
    }
    var list = Object(this);
    var length = list.length >>> 0;
    var thisArg = arguments[1];
    var value;
    for (var i = 0; i < length; i++) {
      value = list[i];
      if (predicate.call(thisArg, value, i, list)) {
        return i;
      }
    }
    return -1;
  };
 }
 if (!Array.prototype.includes) {
  Array.prototype.includes = function(searchElement /*, fromIndex*/) {
    'use strict';
    if (this == null) {
      throw new TypeError('Array.prototype.includes called on null or undefined');
    }
    var O = Object(this);
    var len = parseInt(O.length, 10) || 0;
    if (len === 0) {
      return false;
    }
    var n = parseInt(arguments[1], 10) || 0;
    var k;
    if (n >= 0) {
      k = n;
    } else {
      k = len + n;
      if (k < 0) {k = 0;}
    }
    var currentElement;
    while (k < len) {
      currentElement = O[k];
      if (searchElement === currentElement ||
         (searchElement !== searchElement && currentElement !== currentElement)) { // NaN !== NaN
        return true;
      }
      k++;
    }
    return false;
  };
 }
 if (!String.prototype.startsWith) {
    String.prototype.startsWith = function(searchString, position){
      position = position || 0;
      return this.substr(position, searchString.length) === searchString;
  };
 }
 if (!String.prototype.endsWith) {
  String.prototype.endsWith = function(searchString, position) {
      var subjectString = this.toString();
      if (typeof position !== 'number' || !isFinite(position) || Math.floor(position) !== position || position > subjectString.length) {
        position = subjectString.length;
      }
      position -= searchString.length;
      var lastIndex = subjectString.lastIndexOf(searchString, position);
      return lastIndex !== -1 && lastIndex === position;
  };
 }
--- a/assets/js/vendor/fetch.polyfill.js
+++ b/assets/js/vendor/fetch.polyfill.js
@ -1,53 +0,0 @@
 if (typeof window.fetch !== 'function') {
  window.fetch = function fetch(url, options) {
    return new Promise((resolve, reject) => {
      let request = new XMLHttpRequest();
      options = options || {};
      request.open(options.method || 'GET', url);
      for (const i in options.headers) {
        request.setRequestHeader(i, options.headers[i]);
      }
      request.withCredentials = options.credentials === 'include' || options.credentials === 'same-origin';
      request.onload = () => resolve(response());
      request.onerror = reject;
      // IE11 hack: don't send null/undefined
      if (options.body != null)
        request.send(options.body);
      else
        request.send();
      function response() {
        const keys = [], all = [], headers = {};
        let header;
        request.getAllResponseHeaders().replace(/^(.*?):\s*([\s\S]*?)$/gm, (m, key, value) => {
          keys.push(key = key.toLowerCase());
          all.push([key, value]);
          header = headers[key];
          headers[key] = header ? `${header},${value}` : value;
        });
        return {
          ok: (request.status/200|0) === 1,
          status: request.status,
          statusText: request.statusText,
          url: request.responseURL,
          clone: response,
          text: () => Promise.resolve(request.responseText),
          json: () => Promise.resolve(request.responseText).then(JSON.parse),
          blob: () => Promise.resolve(new Blob([request.response])),
          headers: {
            keys: () => keys,
            entries: () => all,
            get: n => headers[n.toLowerCase()],
            has: n => n.toLowerCase() in headers
          }
        };
      }
    });
  };
 }
--- a/assets/js/vendor/promise.polyfill.js
+++ b/assets/js/vendor/promise.polyfill.js
@ -1,225 +0,0 @@
 (function (root) {
  if (root.Promise) return;
  // Store setTimeout reference so promise-polyfill will be unaffected by
  // other code modifying setTimeout (like sinon.useFakeTimers())
  var setTimeoutFunc = setTimeout;
  function noop() {
  }
  // Use polyfill for setImmediate for performance gains
  function asap(fn) {
    setTimeoutFunc(fn, 1);
  }
  var onUnhandledRejection = function onUnhandledRejection(err) {
    console.warn('Possible Unhandled Promise Rejection:', err); // eslint-disable-line no-console
  };
  // Polyfill for Function.prototype.bind
  function bind(fn, thisArg) {
    return function () {
      fn.apply(thisArg, arguments);
    };
  }
  var isArray = Array.isArray || function (value) {
    return Object.prototype.toString.call(value) === '[object Array]';
  };
  function Promise(fn) {
    if (typeof this !== 'object') throw new TypeError('Promises must be constructed via new');
    if (typeof fn !== 'function') throw new TypeError('not a function');
    this._state = 0;
    this._handled = false;
    this._value = undefined;
    this._deferreds = [];
    doResolve(fn, this);
  }
  function handle(self, deferred) {
    while (self._state === 3) {
      self = self._value;
    }
    if (self._state === 0) {
      self._deferreds.push(deferred);
      return;
    }
    self._handled = true;
    asap(function () {
      var cb = self._state === 1 ? deferred.onFulfilled : deferred.onRejected;
      if (cb === null) {
        (self._state === 1 ? resolve : reject)(deferred.promise, self._value);
        return;
      }
      var ret;
      try {
        ret = cb(self._value);
      } catch (e) {
        reject(deferred.promise, e);
        return;
      }
      resolve(deferred.promise, ret);
    });
  }
  function resolve(self, newValue) {
    try {
      // Promise Resolution Procedure: https://github.com/promises-aplus/promises-spec#the-promise-resolution-procedure
      if (newValue === self) throw new TypeError('A promise cannot be resolved with itself.');
      if (newValue && (typeof newValue === 'object' || typeof newValue === 'function')) {
        var then = newValue.then;
        if (newValue instanceof Promise) {
          self._state = 3;
          self._value = newValue;
          finale(self);
          return;
        } else if (typeof then === 'function') {
          doResolve(bind(then, newValue), self);
          return;
        }
      }
      self._state = 1;
      self._value = newValue;
      finale(self);
    } catch (e) {
      reject(self, e);
    }
  }
  function reject(self, newValue) {
    self._state = 2;
    self._value = newValue;
    finale(self);
  }
  function finale(self) {
    if (self._state === 2 && self._deferreds.length === 0) {
      setTimeout(function() {
        if (!self._handled) {
          onUnhandledRejection(self._value);
        }
      }, 1);
    }
    for (var i = 0, len = self._deferreds.length; i < len; i++) {
      handle(self, self._deferreds[i]);
    }
    self._deferreds = null;
  }
  function Handler(onFulfilled, onRejected, promise) {
    this.onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : null;
    this.onRejected = typeof onRejected === 'function' ? onRejected : null;
    this.promise = promise;
  }
  /**
   * Take a potentially misbehaving resolver function and make sure
   * onFulfilled and onRejected are only called once.
   *
   * Makes no guarantees about asynchrony.
   */
  function doResolve(fn, self) {
    var done = false;
    try {
      fn(function (value) {
        if (done) return;
        done = true;
        resolve(self, value);
      }, function (reason) {
        if (done) return;
        done = true;
        reject(self, reason);
      });
    } catch (ex) {
      if (done) return;
      done = true;
      reject(self, ex);
    }
  }
  Promise.prototype['catch'] = function (onRejected) {
    return this.then(null, onRejected);
  };
  Promise.prototype.then = function (onFulfilled, onRejected) {
    var prom = new Promise(noop);
    handle(this, new Handler(onFulfilled, onRejected, prom));
    return prom;
  };
  Promise.all = function () {
    var args = Array.prototype.slice.call(arguments.length === 1 && isArray(arguments[0]) ? arguments[0] : arguments);
    return new Promise(function (resolve, reject) {
      if (args.length === 0) return resolve([]);
      var remaining = args.length;
      function res(i, val) {
        try {
          if (val && (typeof val === 'object' || typeof val === 'function')) {
            var then = val.then;
            if (typeof then === 'function') {
              then.call(val, function (val) {
                res(i, val);
              }, reject);
              return;
            }
          }
          args[i] = val;
          if (--remaining === 0) {
            resolve(args);
          }
        } catch (ex) {
          reject(ex);
        }
      }
      for (var i = 0; i < args.length; i++) {
        res(i, args[i]);
      }
    });
  };
  Promise.resolve = function (value) {
    if (value && typeof value === 'object' && value.constructor === Promise) {
      return value;
    }
    return new Promise(function (resolve) {
      resolve(value);
    });
  };
  Promise.reject = function (value) {
    return new Promise(function (resolve, reject) {
      reject(value);
    });
  };
  Promise.race = function (values) {
    return new Promise(function (resolve, reject) {
      for (var i = 0, len = values.length; i < len; i++) {
        values[i].then(resolve, reject);
      }
    });
  };
  /**
   * Set the immediate function to execute callbacks
   * @param fn {function} Function to execute
   * @private
   */
  Promise._setImmediateFn = function _setImmediateFn(fn) {
    asap = fn;
  };
  Promise._setUnhandledRejectionFn = function _setUnhandledRejectionFn(fn) {
    onUnhandledRejection = fn;
  };
  root.Promise = Promise;
 })(window);
--- a/assets/js/vendor/values-entries.polyfill.js
+++ b/assets/js/vendor/values-entries.polyfill.js
@ -1,17 +0,0 @@
 // object-values | MIT | github.com/tc39/proposal-object-values-entries
 const reduce = Function.bind.call(Function.call, Array.prototype.reduce);
 const isEnumerable = Function.bind.call(Function.call, Object.prototype.propertyIsEnumerable);
 const concat = Function.bind.call(Function.call, Array.prototype.concat);
 if (!Object.values) {
  Object.values = function values(O) {
    return reduce(Object.keys(O), (v, k) => concat(v, typeof k === 'string' && isEnumerable(O, k) ? [O[k]] : []), []);
  };
 }
 if (!Object.entries) {
  Object.entries = function entries(O) {
    return reduce(Object.keys(O), (e, k) => concat(e, typeof k === 'string' && isEnumerable(O, k) ? [[k, O[k]]] : []), []);
  };
 }
--- a/assets/js/when-ready.js
+++ b/assets/js/when-ready.js
@ -22,7 +22,6 @@ import { setupEvents }          from './misc';
 import { setupNotifications }   from './notifications';
 import { setupPreviews }        from './preview';
 import { setupQuickTag }        from './quick-tag';
 import { initializeListener }   from './resizablemedia';
 import { setupSettings }        from './settings';
 import { listenForKeys }        from './shortcuts';
 import { initTagDropdown }      from './tags';
@ -56,7 +55,6 @@ whenReady(() => {
  setupNotifications();
  setupPreviews();
  setupQuickTag();
  initializeListener();
  setupSettings();
  listenForKeys();
  initTagDropdown();
--- a/assets/webpack.config.js
+++ b/assets/webpack.config.js
@ -64,6 +64,7 @@ export default {
  mode: isDevelopment ? 'development' : 'production',
  entry: {
    'js/app.js': './js/app.js',
    'css/application': './css/application.scss',
    ...themes
  },
  output: {
@ -80,6 +81,8 @@ export default {
  performance: { hints: false },
  resolve: {
    alias: {
      elements: path.resolve(__dirname, 'css/elements/'),
      themes: path.resolve(__dirname, 'css/themes/'),
      common: path.resolve(__dirname, 'css/common/'),
      views: path.resolve(__dirname, 'css/views/')
    }
@ -112,7 +115,7 @@ export default {
        ],
      },
      {
-        test: /\.scss$/,
+        test: /(themes\/[a-z\-]+\.scss|application.scss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
--- a/lib/philomena_web/controllers/admin/report/claim_controller.ex
+++ b/lib/philomena_web/controllers/admin/report/claim_controller.ex
@ -16,7 +16,7 @@ defmodule PhilomenaWeb.Admin.Report.ClaimController do
      {:error, _changeset} ->
        conn
-        |> put_flash(:error, "Couldn't claim that report!")
+        |> put_flash(:warning, "Couldn't claim that report!")
        |> redirect(to: Routes.admin_report_path(conn, :show, conn.assigns.report))
    end
  end
--- a/lib/philomena_web/controllers/admin/user/api_key_controller.ex
+++ b/lib/philomena_web/controllers/admin/user/api_key_controller.ex
@ -11,7 +11,7 @@ defmodule PhilomenaWeb.Admin.User.ApiKeyController do
    {:ok, user} = Users.reset_api_key(conn.assigns.user)
    conn
-    |> put_flash(:info, "API token successfully reset.")
+    |> put_flash(:info, "API token was successfully reset.")
    |> redirect(to: Routes.profile_path(conn, :show, user))
  end
--- a/lib/philomena_web/controllers/admin/user/downvote_controller.ex
+++ b/lib/philomena_web/controllers/admin/user/downvote_controller.ex
@ -11,7 +11,7 @@ defmodule PhilomenaWeb.Admin.User.DownvoteController do
    Exq.enqueue(Exq, "indexing", UserUnvoteWorker, [conn.assigns.user.id, false])
    conn
-    |> put_flash(:info, "Downvote wipe started.")
+    |> put_flash(:alert, "Downvote wipe started.")
    |> redirect(to: Routes.profile_path(conn, :show, conn.assigns.user))
  end
--- a/lib/philomena_web/controllers/admin/user/vote_controller.ex
+++ b/lib/philomena_web/controllers/admin/user/vote_controller.ex
@ -11,7 +11,7 @@ defmodule PhilomenaWeb.Admin.User.VoteController do
    Exq.enqueue(Exq, "indexing", UserUnvoteWorker, [conn.assigns.user.id, true])
    conn
-    |> put_flash(:info, "Vote and fave wipe started.")
+    |> put_flash(:alert, "Vote and fave wipe started.")
    |> redirect(to: Routes.profile_path(conn, :show, conn.assigns.user))
  end
--- a/lib/philomena_web/controllers/admin/user/wipe_controller.ex
+++ b/lib/philomena_web/controllers/admin/user/wipe_controller.ex
@ -12,7 +12,7 @@ defmodule PhilomenaWeb.Admin.User.WipeController do
    conn
    |> put_flash(
-      :info,
+      :alert,
      "PII wipe queued, please verify and then deactivate the account as necessary."
    )
    |> redirect(to: Routes.profile_path(conn, :show, conn.assigns.user))
--- a/lib/philomena_web/controllers/confirmation_controller.ex
+++ b/lib/philomena_web/controllers/confirmation_controller.ex
@ -21,7 +21,7 @@ defmodule PhilomenaWeb.ConfirmationController do
    # Regardless of the outcome, show an impartial success/error message.
    conn
    |> put_flash(
-      :info,
+      :alert,
      "If your email is in our system and it has not been confirmed yet, " <>
        "you will receive an email with instructions shortly."
    )
@ -39,7 +39,7 @@ defmodule PhilomenaWeb.ConfirmationController do
      :error ->
        conn
-        |> put_flash(:error, "Confirmation link is invalid or it has expired.")
+        |> put_flash(:warning, "Confirmation link is invalid or it has expired.")
        |> redirect(to: "/")
    end
  end
--- a/lib/philomena_web/controllers/duplicate_report/accept_controller.ex
+++ b/lib/philomena_web/controllers/duplicate_report/accept_controller.ex
@ -25,7 +25,7 @@ defmodule PhilomenaWeb.DuplicateReport.AcceptController do
      _error ->
        conn
-        |> put_flash(:error, "Failed to accept report! Maybe someone else already accepted it.")
+        |> put_flash(:warning, "Failed to accept report! Maybe someone else already accepted it.")
        |> redirect(to: Routes.duplicate_report_path(conn, :index))
    end
  end
--- a/lib/philomena_web/controllers/duplicate_report/accept_reverse_controller.ex
+++ b/lib/philomena_web/controllers/duplicate_report/accept_reverse_controller.ex
@ -25,7 +25,7 @@ defmodule PhilomenaWeb.DuplicateReport.AcceptReverseController do
      _error ->
        conn
-        |> put_flash(:error, "Failed to accept report! Maybe someone else already accepted it.")
+        |> put_flash(:warning, "Failed to accept report! Maybe someone else already accepted it.")
        |> redirect(to: Routes.duplicate_report_path(conn, :index))
    end
  end
--- a/lib/philomena_web/controllers/filter/current_controller.ex
+++ b/lib/philomena_web/controllers/filter/current_controller.ex
@ -21,7 +21,7 @@ defmodule PhilomenaWeb.Filter.CurrentController do
    conn
    |> update_filter(user, filter)
-    |> put_flash(:info, "Switched to filter #{filter.name}")
+    |> put_flash(:alert, "Switched to filter #{filter.name}")
    |> redirect(external: conn.assigns.referrer)
  end
--- a/lib/philomena_web/controllers/filter_controller.ex
+++ b/lib/philomena_web/controllers/filter_controller.ex
@ -189,7 +189,7 @@ defmodule PhilomenaWeb.FilterController do
      _error ->
        conn
-        |> put_flash(:error, "Filter is still in use, not deleted.")
+        |> put_flash(:warning, "Filter is still in use, not deleted.")
        |> redirect(to: Routes.filter_path(conn, :show, filter))
    end
  end
--- a/lib/philomena_web/controllers/image/feature_controller.ex
+++ b/lib/philomena_web/controllers/image/feature_controller.ex
@ -24,7 +24,7 @@ defmodule PhilomenaWeb.Image.FeatureController do
    case conn.assigns.image.hidden_from_users do
      true ->
        conn
-        |> put_flash(:error, "Cannot feature a hidden image.")
+        |> put_flash(:warning, "Cannot feature a hidden image.")
        |> redirect(to: Routes.image_path(conn, :show, conn.assigns.image))
        |> halt()
--- a/lib/philomena_web/controllers/image/file_controller.ex
+++ b/lib/philomena_web/controllers/image/file_controller.ex
@ -29,7 +29,7 @@ defmodule PhilomenaWeb.Image.FileController do
    case conn.assigns.image.hidden_from_users do
      true ->
        conn
-        |> put_flash(:error, "Cannot replace a hidden image.")
+        |> put_flash(:warning, "Cannot replace a hidden image.")
        |> redirect(to: Routes.image_path(conn, :show, conn.assigns.image))
        |> halt()
--- a/lib/philomena_web/controllers/image_controller.ex
+++ b/lib/philomena_web/controllers/image_controller.ex
@ -205,7 +205,7 @@ defmodule PhilomenaWeb.ImageController do
          not Canada.Can.can?(conn.assigns.current_user, :show, image) ->
        conn
        |> put_flash(
-          :info,
+          :alert,
          "The image you were looking for has been marked a duplicate of the image below"
        )
        |> redirect(to: Routes.image_path(conn, :show, image.duplicate_id))
--- a/lib/philomena_web/controllers/password_controller.ex
+++ b/lib/philomena_web/controllers/password_controller.ex
@ -23,7 +23,7 @@ defmodule PhilomenaWeb.PasswordController do
    # Regardless of the outcome, show an impartial success/error message.
    conn
    |> put_flash(
-      :info,
+      :alert,
      "If your email is in our system, you will receive instructions to reset your password shortly."
    )
    |> redirect(to: "/")
@ -54,7 +54,7 @@ defmodule PhilomenaWeb.PasswordController do
      conn |> assign(:user, user) |> assign(:token, token)
    else
      conn
-      |> put_flash(:error, "Reset password link is invalid or it has expired.")
+      |> put_flash(:warning, "Reset password link is invalid or it has expired.")
      |> redirect(to: "/")
      |> halt()
    end
--- a/lib/philomena_web/controllers/profile/artist_link_controller.ex
+++ b/lib/philomena_web/controllers/profile/artist_link_controller.ex
@ -49,7 +49,7 @@ defmodule PhilomenaWeb.Profile.ArtistLinkController do
      {:ok, artist_link} ->
        conn
        |> put_flash(
-          :info,
+          :alert,
          "Link submitted! Please put '#{artist_link.verification_code}' on your linked webpage now."
        )
        |> redirect(
--- a/lib/philomena_web/controllers/profile/commission/item_controller.ex
+++ b/lib/philomena_web/controllers/profile/commission/item_controller.ex
@ -99,7 +99,7 @@ defmodule PhilomenaWeb.Profile.Commission.ItemController do
    {:ok, _multi} = Commissions.delete_item(item)
    conn
-    |> put_flash(:info, "Item deleted successfully.")
+    |> put_flash(:info, "Item successfully deleted.")
    |> redirect(to: Routes.profile_commission_path(conn, :show, conn.assigns.user))
  end
--- a/lib/philomena_web/controllers/profile/commission_controller.ex
+++ b/lib/philomena_web/controllers/profile/commission_controller.ex
@ -153,7 +153,7 @@ defmodule PhilomenaWeb.Profile.CommissionController do
      false ->
        conn
        |> put_flash(
-          :error,
+          :warning,
          "You must have a verified artist link to create a commission listing."
        )
        |> redirect(to: Routes.commission_path(conn, :index))
--- a/lib/philomena_web/controllers/registration/email_controller.ex
+++ b/lib/philomena_web/controllers/registration/email_controller.ex
@ -16,7 +16,7 @@ defmodule PhilomenaWeb.Registration.EmailController do
        conn
        |> put_flash(
-          :info,
+          :alert,
          "A link to confirm your email change has been sent to the new address."
        )
        |> redirect(to: Routes.registration_path(conn, :edit))
@ -37,7 +37,7 @@ defmodule PhilomenaWeb.Registration.EmailController do
      :error ->
        conn
-        |> put_flash(:error, "Email change link is invalid or it has expired.")
+        |> put_flash(:warning, "Email change link is invalid or it has expired.")
        |> redirect(to: Routes.registration_path(conn, :edit))
    end
  end
--- a/lib/philomena_web/controllers/report_controller.ex
+++ b/lib/philomena_web/controllers/report_controller.ex
@ -40,7 +40,7 @@ defmodule PhilomenaWeb.ReportController do
      true ->
        conn
        |> put_flash(
-          :error,
+          :warning,
          "You may not have more than #{max_reports()} open reports at a time. Did you read the reporting tips?"
        )
        |> redirect(to: "/")
@ -50,7 +50,7 @@ defmodule PhilomenaWeb.ReportController do
          {:ok, _report} ->
            conn
            |> put_flash(
-              :info,
+              :alert,
              "Your report has been received and will be checked by staff shortly."
            )
            |> redirect(to: redirect_path(conn, conn.assigns.current_user))
--- a/lib/philomena_web/controllers/tag_controller.ex
+++ b/lib/philomena_web/controllers/tag_controller.ex
@ -164,7 +164,7 @@ defmodule PhilomenaWeb.TagController do
      %{aliased_tag: tag} ->
        conn
        |> put_flash(
-          :info,
+          :alert,
          "This tag (\"#{conn.assigns.tag.name}\") has been aliased into the tag \"#{tag.name}\"."
        )
        |> redirect(to: Routes.tag_path(conn, :show, tag))
--- a/lib/philomena_web/controllers/topic/poll/vote_controller.ex
+++ b/lib/philomena_web/controllers/topic/poll/vote_controller.ex
@ -46,7 +46,7 @@ defmodule PhilomenaWeb.Topic.Poll.VoteController do
      _error ->
        conn
-        |> put_flash(:error, "Your vote was not recorded.")
+        |> put_flash(:warning, "Your vote was not recorded.")
        |> redirect(to: Routes.forum_topic_path(conn, :show, topic.forum, topic))
    end
  end
--- a/lib/philomena_web/controllers/topic/post_controller.ex
+++ b/lib/philomena_web/controllers/topic/post_controller.ex
@ -64,7 +64,7 @@ defmodule PhilomenaWeb.Topic.PostController do
      _error ->
        conn
-        |> put_flash(:error, "There was an error creating the post")
+        |> put_flash(:warning, "There was an error creating the post")
        |> redirect(to: Routes.forum_topic_path(conn, :show, forum, topic))
    end
  end
--- a/lib/philomena_web/controllers/unlock_controller.ex
+++ b/lib/philomena_web/controllers/unlock_controller.ex
@ -21,7 +21,7 @@ defmodule PhilomenaWeb.UnlockController do
    # Regardless of the outcome, show an impartial success/error message.
    conn
    |> put_flash(
-      :info,
+      :alert,
      "If your email is in our system and your account has been locked, " <>
        "you will receive an email with instructions shortly."
    )
@ -39,7 +39,7 @@ defmodule PhilomenaWeb.UnlockController do
      :error ->
        conn
-        |> put_flash(:error, "Unlock link is invalid or it has expired.")
+        |> put_flash(:warning, "Unlock link is invalid or it has expired.")
        |> redirect(to: "/")
    end
  end
--- a/lib/philomena_web/plugs/check_captcha_plug.ex
+++ b/lib/philomena_web/plugs/check_captcha_plug.ex
@ -19,7 +19,7 @@ defmodule PhilomenaWeb.CheckCaptchaPlug do
      false ->
        conn
        |> put_flash(
-          :error,
+          :warning,
          "There was an error verifying you're not a robot. Please try again."
        )
        |> do_failure_response(conn.assigns.ajax?)
--- a/lib/philomena_web/plugs/compromised_password_check_plug.ex
+++ b/lib/philomena_web/plugs/compromised_password_check_plug.ex
@ -16,7 +16,7 @@ defmodule PhilomenaWeb.CompromisedPasswordCheckPlug do
      true ->
        conn
        |> put_flash(
-          :error,
+          :warning,
          "We've detected that the password you entered has been compromised during a data breach of another website. Please choose a different password."
        )
        |> redirect(external: conn.assigns.referrer)
--- a/lib/philomena_web/plugs/ensure_user_enabled_plug.ex
+++ b/lib/philomena_web/plugs/ensure_user_enabled_plug.ex
@ -29,7 +29,7 @@ defmodule PhilomenaWeb.EnsureUserEnabledPlug do
  defp maybe_halt(true, conn) do
    conn
-    |> Controller.put_flash(:error, "Your account is not currently active.")
+    |> Controller.put_flash(:alert, "Your account is not currently active.")
    |> UserAuth.log_out_user()
    |> Conn.halt()
  end
--- a/Show more
+++ b/Show more