PonyMirrors/philomena
1
0
Fork 0
mirror of https://github.com/philomena-dev/philomena.git synced 2025-01-31 19:36:44 +01:00
Code Issues Projects Releases Packages Wiki Activity

sass -> postcss, 3 themes -> 18 themes

Browse source
This commit is contained in:
Luna D. 2024-12-17 17:49:05 +01:00
parent 6ef53545dd
commit 9f081ac8d6
No known key found for this signature in database
GPG key ID: 4B1C63448394F688
90 changed files with 7469 additions and 4261 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
assets/.stylelintrc.yml Normal file
View file

@ -0,0 +1,78 @@
---
extends: stylelint-config-recommended
plugins:
- stylelint-prettier
rules:
block-no-empty: true
at-rule-no-unknown:
- true
- ignoreAtRules:
- mixin
- define-mixin
media-query-no-invalid:
rule-empty-line-before:
- always-multi-line
- except:
- after-single-line-comment
- first-nested
declaration-block-no-duplicate-custom-properties: true
declaration-block-no-duplicate-properties: true
font-family-no-duplicate-names: true
keyframe-block-no-duplicate-selectors: true
no-duplicate-at-import-rules: true
no-duplicate-selectors: true
color-no-invalid-hex: true
function-calc-no-unspaced-operator: true
named-grid-areas-no-invalid: true
no-invalid-double-slash-comments: true
no-invalid-position-at-import-rule: true
string-no-newline: true
no-irregular-whitespace: true
custom-property-no-missing-var-function: true
font-family-no-missing-generic-family-keyword: true
function-linear-gradient-no-nonstandard-direction: true
declaration-block-no-shorthand-property-overrides: true
selector-anb-no-unmatchable: true
function-no-unknown: true
media-feature-name-no-unknown: true
media-feature-name-value-no-unknown: true
no-unknown-animations: true
length-zero-no-unit: true
media-feature-name-no-vendor-prefix: true
selector-no-vendor-prefix: true
value-no-vendor-prefix: true
function-name-case: lower
selector-type-case: lower
value-keyword-case: lower
at-rule-empty-line-before:
- always
- except:
- first-nested
ignore:
- after-comment
- blockless-after-blockless
custom-property-empty-line-before: never
declaration-empty-line-before: never
declaration-block-single-line-max-declarations: 3
number-max-precision: 2
max-nesting-depth: 1
color-hex-length: long
alpha-value-notation: number
font-weight-notation: named-where-possible
hue-degree-notation: number
import-notation: string
keyframe-selector-notation: percentage-unless-within-keyword-only-block
lightness-notation: percentage
media-feature-range-notation: prefix
selector-not-notation: simple
selector-pseudo-element-colon-notation: single
custom-property-pattern: "[a-z\\-\\$]+"
selector-class-pattern: "^[a-z\\-_]+(\\-\\-|__)?[a-z\\-]*(\\-\\-|__)?[0-9a-z\\-]*$"
selector-id-pattern: "[a-z\\-]+"
font-family-name-quotes: always-unless-keyword
function-url-quotes: always
selector-attribute-quotes: always
declaration-block-no-redundant-longhand-properties: true
shorthand-property-no-redundant-values: true
comment-whitespace-inside: always
prettier/prettier: true

58
assets/css/application.css Normal file
View file

@ -0,0 +1,58 @@
/*
* 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.
*
*/
@import "@fortawesome/fontawesome-free/css/fontawesome.css";
@import "@fortawesome/fontawesome-free/css/solid.css";
@import "@fortawesome/fontawesome-free/css/regular.css";
@import "@fortawesome/fontawesome-free/css/brands.css";
@import "normalize.css";
/* Import the dark blue 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/base";
@import "elements/barline";
@import "elements/blocks";
@import "elements/burger";
@import "elements/button";
@import "elements/dropdown";
@import "elements/forms";
@import "elements/header";
@import "elements/layout";
@import "elements/media";
@import "elements/shame";
@import "elements/text";
/* Style elements specific to certain pages. */
@import "views/adverts";
@import "views/approval";
@import "views/badges";
@import "views/channels";
@import "views/comments";
@import "views/commissions";
@import "views/communications";
@import "views/duplicates";
@import "views/filters";
@import "views/galleries";
@import "views/images";
@import "views/notifications";
@import "views/pages";
@import "views/pagination";
@import "views/polls";
@import "views/posts";
@import "views/profiles";
@import "views/search";
@import "views/staff";
@import "views/stats";
@import "views/tags";

504
assets/css/common/_base.scss
View file

@ -1,504 +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/notifications";
@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;
}

247
assets/css/common/_blocks.scss
View file

@ -1,247 +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;
display: flex;
flex-wrap: wrap;
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;
}

38
assets/css/common/_burger.scss
View file

@ -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); }
}

102
assets/css/common/_buttons.scss
View file

@ -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;
}
}

39
assets/css/common/_dimensions.scss
View file

@ -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;
}

63
assets/css/common/_global.scss
View file

@ -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;
}

285
assets/css/common/_header.scss
View file

@ -1,285 +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;
}
.header__navigation {
display: flex;
flex-wrap: wrap;
}
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;
}
}

6
assets/css/common/_shame.scss
View file

@ -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;
}

40
assets/css/common/measurements.css Normal file
View file

@ -0,0 +1,40 @@
$font-family-base: verdana, arial, helvetica, sans-serif;
$font-family-monospace: "Droid Sans Mono", monospace;
$medium-layout-width: 1330px;
$max-limited-desktop-width: 1150px;
$min-desktop-width: 800px;
$limited-layout-width: 980px;
$min-desktop-thumb-width: 700px;
:root {
--medium-layout-width: $medium-layout-width;
--max-limited-desktop-width: $max-limited-desktop-width;
--min-desktop-width: $min-desktop-width;
--limited-layout-width: $limited-layout-width;
--min-desktop-thumb-width: $min-desktop-thumb-width;
--border: 1px solid var(--border-color);
--media-border: 1px solid var(--media-box-color);
--media-over-border: 1px dotted var(--vote-down-color);
--font-family-base: $font-family-base;
--font-family-monospace: $font-family-monospace;
--padding-small: 0.5em;
--padding-normal: 1em;
--centered-margin: 24px;
--normal-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: calc((var(--header-height) - var(--header-field-height)) * 0.5);
--block-header-height: 32px;
--block-header-sub-height: 26px;
--block-spacing: 6px;
--media-box-header-height: 22px;
}

75
assets/css/common/mixins.css Normal file
View file

@ -0,0 +1,75 @@
@define-mixin image-alt-size $name, $size {
@media (min-width: $(size)) {
img[alt="$(name)"] {
max-height: $(size) !important;
max-width: $(size) !important;
}
}
}
@define-mixin transform-n-animation $type, $dur, $delta {
transform: $(delta);
animation: $(type) $(dur) ease-in-out;
}
@define-mixin even-odd-type $classname, $type {
.$(classname):nth-child(odd).$(type),
.$(classname):nth-child(odd) .$(type) {
background: var(--$(type)-even-color);
}
.$(classname):nth-child(even).$(type),
.$(classname):nth-child(even) .$(type) {
background: var(--$(type)-even-color);
}
.$(classname):nth-child(even) .$(classname):nth-child(odd).$(type),
.$(classname):nth-child(even) .$(classname):nth-child(odd) .$(type) {
background: var(--$(type)-even-color);
}
}
@define-mixin even-odd $classname {
.$(classname):nth-child(odd) {
background: var(--background-odd-color);
}
.$(classname):nth-child(even) {
background: var(--background-even-color);
}
@mixin even-odd-type $classname, success;
@mixin even-odd-type $classname, warning;
@mixin even-odd-type $classname, danger;
}
@define-mixin even-odd-element $el {
$(el):nth-child(odd) {
background: var(--background-odd-color);
}
$(el):nth-child(even) {
background: var(--background-even-color);
}
@mixin even-odd-type $el, success;
@mixin even-odd-type $el, warning;
@mixin even-odd-type $el, danger;
}
@define-mixin number-wrap $color {
display: inline-flex;
padding: 0 6px;
margin-left: 6px;
line-height: inherit;
font-size: 16px;
text-align: center;
background: $(color);
}
/* 16x16 checkerboard */
@define-mixin img-checkerboard-background {
img {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAGUlEQVR42mP474AKGdDhCFGALoChYWQoAACpW7+B5lv5BwAAAABJRU5ErkJggg==");
}
}

4
assets/css/common/_barline.scss → assets/css/elements/barline.css
View file

@ -1,11 +1,11 @@
.sparkline {
display: flex;
height: 20px;
border-bottom: 1px solid $sparkline_color;
border-bottom: 1px solid var(--sparkline-color);
}
.barline__bar {
fill: $sparkline_color;
fill: var(--sparkline-color);
}
.barline__bar:hover {

480
assets/css/elements/base.css Normal file
View file

@ -0,0 +1,480 @@
body {
background-color: var(--background-color);
color: var(--foreground-color);
font-family: var(--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;
}
p,
.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);
}
img {
margin: 0;
border: 0;
vertical-align: bottom;
}
.paragraph img,
.communication__body__text img,
.block__content img {
max-width: 100%;
}
pre {
background-color: var(--meta-color);
padding: 10px;
font-size: 11px;
font-family: var(--font-family-monospace);
border: 1px solid var(--meta-border-color);
max-width: 100%;
overflow: auto hidden;
}
a,
a:active,
a:visited {
color: var(--link-color);
text-decoration: none;
}
a:hover {
color: var(--link-hover-color);
}
.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,
.table {
padding-left: 10px;
width: 100%;
border-collapse: collapse;
border: var(--border);
}
table th,
.table th {
font-weight: bold;
text-align: left;
padding: 5px;
}
th.center {
text-align: center;
}
table th > thead > tr,
.table th > thead > tr {
background: var(--background-color);
}
table > tbody,
.table > tbody {
border: var(--border);
}
/* I know this looks odd, but first one expands to
.table > ...
while the other one does the table verbatim */
@mixin even-odd table > tbody tr;
@mixin even-odd-element table > tbody tr;
td {
padding: 5px;
}
.table__tiny-column {
width: 50px;
}
.border-vertical {
border-top: 2px solid var(--border-color);
}
.background-success {
background-color: var(--success-light-color);
}
.background-warning {
background-color: var(--warning-light-color);
}
.background-danger {
background-color: var(--danger-light-color);
}
hr {
border: 0;
height: 1px;
background: var(--border-color);
margin: var(--padding-small);
}
/* rules page. API page also borrows stuff from here */
.rule {
padding: 5px;
}
.rule h2 {
background: var(--background-odd-color);
border: var(--border);
padding: 5px;
padding-bottom: 7px;
}
.rule h2.important {
background: var(--danger-light-color);
border-color: var(--danger-color);
}
/* Make HTML lists with multi-line text readable */
.rule ul {
margin: 0;
padding: 5px 20px;
}
.rule li {
padding: 5px 0;
}
#error_explanation {
margin: 1em 0;
background: var(--warning-light-color);
border: 1px solid var(--warning-color);
padding: 0.62em;
}
#error_explanation li {
margin: 3px;
margin-left: 15px;
}
#error_explanation h2 {
font-size: 19px;
}
.walloftext {
font-size: 14px;
}
@media (max-width: 900px) {
.walloftext {
width: 95%;
}
}
/* Text Editor */
blockquote {
margin: 1em 2em;
border: 1px dotted var(--foreground-color);
padding: var(--padding-small);
background-color: inherit;
}
blockquote .paragraph:first-child {
margin-top: 0;
}
blockquote .paragraph: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-desktop-width) {
blockquote {
margin: 1em 4px;
padding: var(--padding-small) 4px;
}
}
.spoiler {
background-color: var(--admin-links-hover-color);
color: var(--admin-links-hover-color);
}
.spoiler a {
color: var(--admin-links-hover-color);
}
.spoiler:not(:hover) > .image-show-container {
background: var(--admin-links-hover-color);
}
.spoiler:not(:hover) > .image-show-container > * {
visibility: hidden;
}
.spoiler,
.spoiler-revealed {
display: inline-block;
position: relative;
}
.spoiler:before,
.spoiler-revealed:before {
content: " ";
display: block;
position: absolute;
pointer-events: none;
inset: 0;
background-color: var(--admin-links-hover-color);
}
.spoiler:hover:before,
.spoiler-revealed:before {
display: none;
}
.spoiler:hover,
.spoiler-revealed {
background-color: var(--admin-links-color);
color: var(--foreground-color);
}
.spoiler-revealed a,
.spoiler:hover a {
color: var(--link-color);
}
.spoiler-revealed a:hover,
.spoiler:hover a:hover {
color: var(--link-dark-color);
}
.literal {
white-space: pre-wrap;
}
.editor-syntax-reference {
margin-bottom: 6px;
}
@mixin image-alt-size tiny, var(--image-tiny-size);
@mixin image-alt-size small, var(--image-small-size);
@mixin image-alt-size medium, var(--image-medium-size);
@mixin image-alt-size large, var(--image-large-size);
/* code styling */
/* You might be asking what's up with this silly mixin
* and the answer is just as silly, it's called
* stylelint. Can't define CSS classes in descending
* specificity so we do this silly thing */
@define-mixin code-style {
background-color: var(--meta-color);
border: 1px solid var(--meta-border-color);
padding: 0 4px;
}
code {
@mixin code-style;
}
pre code {
border: 0;
background: 0;
padding: 0;
}
.spoiler-revealed code,
.spoiler:hover code {
@mixin code-style;
}
.spoiler code {
background: 0;
border: 0;
}
/* 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: var(--success-light-color);
border: 1px solid var(--success-color);
}
.label--danger {
background: var(--danger-light-color);
border: 1px solid var(--danger-color);
}
.label--warning {
background: var(--warning-light-color);
border: 1px solid var(--warning-color);
}
.label--purple {
background: var(--assistant-color);
border: 1px solid var(--assistant-border-color);
}
.label--primary {
background: var(--primary-light-color);
border: 1px solid var(--primary-color);
}
.large-text {
font-size: 15px;
}
.small-text {
font-size: 10px;
}
.page-current {
padding: 0 var(--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 {
background: var(--assistant-color);
border: 1px solid var(--assistant-border-color);
padding: 2px;
font-size: 12px;
font-family: var(--font-family-monospace);
vertical-align: top;
}
.commit-message {
display: block;
}
span.stat {
font-size: 18px;
}
.seamless-frame {
border: 0;
overflow: hidden;
padding: 0;
}
.no-overflow {
overflow: hidden;
}
.no-overflow-x {
overflow-x: hidden;
}
.hidden {
display: none !important;
}

295
assets/css/elements/blocks.css Normal file
View file

@ -0,0 +1,295 @@
.block {
margin-bottom: var(--block-spacing);
}
.block .success {
background-color: var(--success-color);
}
.block .warning {
background-color: var(--warning-color);
}
.block .danger {
background-color: var(--danger-color);
}
.block__content,
.block__tab {
border-left: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
background: var(--background-color);
padding: var(--block-spacing);
}
.block__content img,
.block__tab img {
max-width: 100%;
}
.block__content:first-child {
border-top: 1px solid var(--border-color);
}
.block__content:last-child,
.block__tab:not(.hidden) {
border-bottom: 1px solid var(--border-color);
}
.block__content--destroyed {
background-color: var(--destroyed-content-color) !important;
}
.block__header {
font-size: 14px;
line-height: var(--block-header-height);
background: var(--block-header-color);
color: var(--foreground-color);
}
/* FIXME This whole area has problems with structure, things are too coupled */
.block__header--sub {
font-size: 14px;
background: var(--block-header-color);
color: var(--foreground-color);
line-height: var(--block-header-sub-height);
}
.block__header--user-credit {
box-sizing: border-box;
line-height: 20px;
padding-left: 12px;
padding-right: 12px;
padding-bottom: 4px;
}
.block__header--single-item {
font-size: 14px;
line-height: var(--block-header-height);
background: var(--block-header-color);
color: var(--foreground-color);
display: block;
width: 100%;
box-sizing: border-box;
}
.block__header__title {
font-size: 14px;
margin: 0;
padding: 0 calc(var(--header-spacing) * 0.5) 0 var(--header-spacing);
}
.block__header__buttons {
display: flex;
flex-direction: row;
line-height: 100%;
align-items: center;
background: 0;
}
.block__tagbox {
padding-top: calc(var(--block-spacing) + 5px);
}
.block__header--light,
.block__header--js-tabbed {
background: var(--block-header-light-color);
}
.block__header--js-tabbed {
background: transparent;
display: flex;
flex-wrap: wrap;
border-bottom: var(--border);
}
.block__header--light a {
color: var(--block-header-light-link-text-color);
}
.block__header--single-item,
.block__header__item,
.block__header a {
padding-left: var(--header-spacing);
padding-right: var(--header-spacing);
}
a.block__header--single-item,
.block__header a {
color: var(--block-header-link-text-color);
display: inline-block;
cursor: pointer;
font-weight: bold;
}
.block__header a,
.header__span {
background: var(--block-header-color);
}
.block__header--sub a {
padding-left: calc(var(--header-spacing) * 0.5);
padding-right: calc(var(--header-spacing) * 0.5);
}
.block__header--light a,
.block__header--js-tabbed a,
.block__header--light .header__span,
.block__header--js-tabbed .header__span {
background: var(--block-header-light-color);
}
.block__header--js-tabbed a {
border-top: var(--border);
/* hide the bottom border for tab links */
margin-bottom: -1px;
border-bottom: 1px solid var(--block-header-light-color);
}
.block__header--light a:hover {
background: var(--block-header-light-hover-color);
color: var(--block-header-light-link-text-hover-color);
}
a.block__header--single-item:hover,
.block__header a:hover {
background: var(--block-header-hover-color);
color: var(--block-header-link-text-hover-color);
}
.block__header--js-tabbed a:hover {
border-color: var(--block-header-light-hover-color);
background: var(--block-header-light-hover-color);
color: var(--block-header-light-link-text-hover-color);
}
.block__header--js-tabbed a:first-child {
border-left: var(--border);
}
.block__header--js-tabbed a:last-child {
border-right: var(--border);
}
.block__header--js-tabbed a.selected,
.block__header--js-tabbed a.selected:hover {
cursor: default;
color: var(--foreground-color);
background: var(--background-color);
border-color: var(--block-header-light-color);
border-bottom: 1px solid var(--background-color);
}
/* Fixed blocks do not have header and content */
.block--fixed {
padding: 6px var(--header-spacing);
background: var(--background-color);
border: var(--border);
line-height: 1.35;
}
.block--fixed--sub {
padding: 3px var(--header-spacing);
}
.block--no-margin {
margin: 0;
}
.block--success {
background: var(--success-light-color);
border-color: var(--success-color);
}
.block--warning {
background: var(--warning-light-color);
border-color: var(--warning-color);
}
.block--danger {
background: var(--danger-light-color);
border-color: var(--danger-color);
}
.block--primary {
background: var(--primary-light-color);
border-color: var(--primary-color);
}
.block--assistant {
background: var(--assistant-color);
border-color: var(--assistant-border-color);
}
/* Somewhat dirty workaround for <h*> margins */
/* Now even dirtier without nesting! */
.block__content > h1,
.block__content > h2,
.block__content > h3,
.block__content > h4,
.block__content > h5,
.block__content > h6,
.block__tab > h1,
.block__tab > h2,
.block__tab > h3,
.block__tab > h4,
.block__tab > h5,
.block__tab > h6,
.block--fixed > h1,
.block--fixed > h2,
.block--fixed > h3,
.block--fixed > h4,
.block--fixed > h5,
.block--fixed > h6 {
margin-top: 6px;
}
.block__header__dropdown-tab:hover > a {
background-color: var(--block-header-hover-color);
color: var(--block-header-link-text-hover-color);
}
/* Table-like lists */
.block__list {
list-style: none;
padding: 0;
margin: 0;
border-bottom: var(--border);
}
.block__list:not(:last-child) {
margin-bottom: 6px;
}
.block__list a.block__list__link {
width: 100%;
display: block;
box-sizing: border-box;
border: var(--border);
margin-bottom: -1px; /* collapse borders */
background: var(--background-color);
}
.block__list a.block__list__link.primary {
background: var(--primary-light-color);
border-color: var(--primary-color);
}
.block__list a.block__list__link:hover,
.block__list a.block__list__link.active {
background: var(--success-light-color);
border-color: var(--success-color);
}
.block__list a.block__list__link.active:hover {
background: var(--danger-light-color);
border-color: var(--danger-color);
}
.block__list a.block__list__link.hidden {
display: none;
}
.block__content--top-border {
border-top: var(--border);
}

49
assets/css/elements/burger.css Normal file
View file

@ -0,0 +1,49 @@
#burger.open {
display: block !important;
@mixin transform-n-animation slidein, 0.4s, translate(0, 0);
}
#burger.close {
display: none;
}
/* content sliding open */
#container.open {
@mixin 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);
}
}

118
assets/css/elements/button.css Normal file
View file

@ -0,0 +1,118 @@
.button,
.toggle-box + label {
background-color: var(--button-background-color);
border: 1px solid var(--button-border-color);
box-sizing: border-box;
color: var(--button-text-color);
display: inline-block;
line-height: normal;
font-family: var(--font-family-base);
font-size: 14px;
padding: 3px 5px;
border-radius: 0; /* reset rounded borders on iOS/Safari */
cursor: pointer;
}
.button:hover,
.toggle-box + label:hover {
background-color: var(--button-hover-background-color);
border-color: var(--button-hover-border-color);
}
.button:disabled,
.toggle-box + label:disabled {
opacity: 0.7;
pointer-events: none;
}
.button:active,
.button:hover,
.button:visited,
.toggle-box + label:visited,
.toggle-box + label:active .toggle-box + label:hover {
color: var(--button-text-color);
}
.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: var(--link-color);
cursor: pointer;
}
.button--link:hover {
color: var(--link-hover-color);
}
.button--link:visited {
color: var(--link-color);
}
.button--separate-left {
margin-left: 5px;
}
.button--separate-right {
margin-right: 5px;
}
.button--small {
padding: 0 3px;
}
.button--state-primary {
background-color: var(--button-primary-background-color);
border-color: var(--button-primary-border-color);
}
.button--state-primary:hover {
background-color: var(--button-primary-hover-background);
border-color: var(--button-primary-hover-border);
}
.button--state-success {
background-color: var(--button-success-background-color);
border-color: var(--button-success-border-color);
}
.button--state-success:hover {
background-color: var(--button-success-hover-background);
border-color: var(--button-success-hover-border);
}
.button--state-warning {
background-color: var(--button-warning-background-color);
border-color: var(--button-warning-border-color);
}
.button--state-warning :hover {
background-color: var(--button-warning-hover-background);
border-color: var(--button-warning-hover-border);
}
.button--state-danger {
background-color: var(--button-danger-background-color);
border-color: var(--button-danger-border-color);
}
.button--state-danger:hover {
background-color: var(--button-danger-hover-background);
border-color: var(--button-danger-hover-border);
}
.button--state-danger.button--inline {
color: var(--button-danger-hover-border) !important;
}

0
assets/css/common/_dropdown.scss → assets/css/elements/dropdown.css
View file

71
assets/css/common/_forms.scss → assets/css/elements/forms.css
View file

@ -11,18 +11,18 @@ form p {
}
.field-error-js {
background: $warning_light_color;
background: var(--warning-light-color);
padding: 3px;
}
.input {
box-sizing: border-box;
padding: 6px;
border: 1px solid $input_border;
border: 1px solid var(--input-border);
font-size: 14px;
font-family: $font_family_monospace;
color: $input_text_color;
background: $input_color;
font-family: var(--font-family-monospace);
color: var(--input-text-color);
background: var(--input-color);
max-width: 100%; /* prevent resizable inputs from overflowing the container */
}
@ -37,8 +37,8 @@ form p {
.input:focus {
outline: none;
border: 1px solid $input_border_active;
background: $input_color_active;
border: 1px solid var(--input-border-active);
background: var(--input-color-active);
}
.input--wide {
@ -87,16 +87,17 @@ textarea {
height: 4em;
}
.field, .actions {
.field,
.actions {
margin-bottom: 6px;
}
.field_with_errors {
background: $danger_color;
background: var(--danger-color);
}
span.help-block {
background: $danger_color;
background: var(--danger-color);
display: block;
}
@ -117,34 +118,32 @@ span.help-block {
}
/* Click-toggleable */
.toggle-box {
display: none;
}
.toggle-box + label {
@extend .button;
position: relative;
> * { display: inline; }
}
.toggle-box + label::before {
.toggle-box + label > * {
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;
border-color: transparent transparent transparent var(--foreground-color);
}
.toggle-box:checked + label::before {
.toggle-box:checked + label:before {
border-width: 0.9em 0.5em 0;
border-color: $foreground_color transparent transparent transparent;
border-color: var(--foreground-color) transparent transparent transparent;
}
.toggle-box-container {
@ -158,25 +157,31 @@ span.help-block {
}
.toggle-box:checked + label + .toggle-box-container > .toggle-box-container__content {
margin-top: $block_spacing;
margin-top: var(--block-spacing);
}
select.input, select.input:focus {
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;
background:
linear-gradient(45deg, transparent 50%, var(--foreground-color) 50%) calc(100% - 15px) 12px/5px 5px no-repeat,
linear-gradient(135deg, var(--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 {
select.input option,
select.input:focus option {
background-color: var(--input-color);
}
select.input:hover option,
select.input:focus:hover option {
background-color: var(--input-color-active);
}
select.input:hover,
select.input:focus:hover {
cursor: pointer;
background-color: $input_color_active;
background-color: var(--input-color-active);
}

298
assets/css/elements/header.css Normal file
View file

@ -0,0 +1,298 @@
.header {
background: var(--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: var(--unread-message-color);
}
/* For text preceded by an icon */
.fa__text {
padding-left: 6px;
}
.header__navigation {
display: flex;
flex-wrap: wrap;
}
.header__input,
.header__input:focus {
padding: 0 var(--header-field-spacing);
border: none;
height: var(--header-field-height);
background: var(--header-field-color);
color: var(--text-light-color);
-webkit-text-fill-color: var(--text-light-color);
text-overflow: ellipsis;
/* reset rounded borders on iOS/Safari */
border-radius: 0;
}
span.header__counter {
@mixin number-wrap var(--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%, var(--text-light-color) 50%) calc(100% - 15px) 12px / 5px 5px no-repeat,
linear-gradient(135deg, var(--text-light-color) 50%, transparent 50%) calc(100% - 10px) 12px / 5px 5px no-repeat;
background-color: var(--header-field-color);
/* prevent the custom arrow from overlapping the content */
padding-right: 25px;
}
select.header__input:hover,
select.header__input:focus:hover {
cursor: pointer;
background-color: var(--header-field-hover-color);
}
select.header__input option,
select.header__input optgroup,
select.header__input:focus option,
select.header__input:focus optgroup {
background-color: var(--header-field-color);
}
select.header__input:hover option,
select.header__input:hover optgroup,
select.header__input:focus option,
select.header__input:focus optgroup {
background-color: var(--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: var(--text-light-color);
box-shadow: 0 0 0 1000px var(--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: var(--header-field-height);
font-size: 1.25em;
background: var(--header-field-color);
color: var(--text-light-color);
}
.header__search__button:hover,
.header__search__button:visited:hover {
cursor: pointer;
background: var(--header-field-hover-color);
}
.header__filter-form {
max-width: 15em; /* prevent long filter names from causing overflow */
margin: var(--header-field-vertical-spacing) var(--header-field-spacing);
}
span.header__link-user__dropdown-arrow {
padding: 0 9px;
background:
linear-gradient(45deg, transparent 50%, var(--text-light-color) 50%) calc(100% - 5px) 12px / 5px 5px no-repeat,
linear-gradient(135deg, var(--text-light-color) 50%, transparent 50%) calc(100%) 12px / 5px 5px no-repeat;
background-color: var(--header-color);
}
span.header__link-user__dropdown-arrow:hover,
.header__dropdown:hover span.header__link-user__dropdown-arrow {
background-color: var(--header-hover-color);
}
a.header__link {
display: inline-block;
padding: 0 var(--header-spacing);
font-size: var(--header-font-size);
color: var(--text-light-color);
background: var(--header-color);
flex-shrink: 0;
line-height: var(--header-height);
}
a.header__link-user {
display: flex;
padding: var(--header-field-vertical-spacing) var(--header-field-spacing);
}
.header--secondary {
background: var(--header-secondary-color);
line-height: var(--header-sub-height);
}
.header--secondary a {
line-height: var(--header-sub-height);
color: var(--foreground-color);
background: var(--header-secondary-color);
}
.header--secondary__admin-links a {
background: var(--header-admin-color);
}
.flash--site-notice a,
.flash--site-notice a:active,
.flash--site-notice a:visited {
text-decoration: underline;
color: var(--site-notice-link-color);
}
.flash--site-notice a:hover {
color: var(--site-notice-link-hover-color);
}
a.header__link:hover,
.header__dropdown:hover > a {
cursor: pointer;
background-color: var(--header-hover-color);
}
.header--secondary a:hover {
background-color: var(--header-secondary-hover-color);
}
.header--secondary__admin-links a:hover {
background: var(--header-admin-hover-color);
}
.header--secondary .header__dropdown:hover > a {
background-color: var(--header-secondary-hover-color);
}
.header--secondary div {
height: var(--header-sub-height);
}
.header--secondary span.header__counter {
@mixin number-wrap var(--header-secondary-hover-color);
}
span.header__counter__admin {
@mixin number-wrap var(--header-admin-hover-color);
}
.header--secondary__admin-links {
margin-right: var(--header-spacing);
background: var(--header-admin-color);
}
/* Flash notices */
.flash {
line-height: var(--header-field-height);
}
.flash--site-notice {
background: var(--site-notice-color);
color: var(--text-light-color);
}
.flash--warning {
color: var(--foreground-color);
background: var(--warning-light-color);
}
.flash--success {
color: var(--foreground-color);
background: var(--success-light-color);
}
/* Mobile layout */
@media (max-width: $min-desktop-width) {
.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-desktop-width) {
.header > div,
.flash {
box-sizing: border-box;
}
.flash {
width: 100%;
padding-left: var(--normal-margin);
padding-right: var(--normal-margin);
}
.layout--center-aligned .header > div {
padding-left: var(--centered-margin);
padding-right: var(--centered-margin);
}
.layout--center-aligned .flash {
padding-left: calc(var(--centered-margin) + var(--header-spacing));
padding-right: calc(var(--centered-margin) + var(--header-spacing));
}
}
@media (max-width: $max-limited-desktop-width) and (min-width: $min-desktop-width) {
.header > div {
height: auto;
}
}

260
assets/css/common/_layout.scss → assets/css/elements/layout.css
View file

@ -1,28 +1,28 @@
@media (max-width: $min_px_width_for_desktop_layout) {
@media (max-width: $min-desktop-width) {
.hide-mobile {
display: none !important;
}
}
@media (max-width: $min_px_width_for_desktop_thumb) {
@media (max-width: $min-desktop-thumb-width) {
.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) {
@media (max-width: $max-limited-desktop-width) and (min-width: $min-desktop-width) {
.hide-limited-desktop {
display: none !important;
}
}
@media (min-width: $min_px_width_for_desktop_layout) {
@media (min-width: $min-desktop-width) {
.hide-desktop {
display: none !important;
}
}
@media (min-width: $min_px_width_for_desktop_thumb) {
@media (min-width: $min-desktop-thumb-width) {
.hide-desktop-t {
display: none !important;
}
@ -41,18 +41,20 @@ nav {
height: 100%;
display: none;
overflow: auto;
background: $meta_color;
background: var(--meta-color);
padding: 5px;
a {
background: $meta_color;
color: $foreground_color;
display: block;
padding: 5px;
}
a:hover {
background: $base_color;
color: $text_light_color;
}
}
#burger a {
background: var(--meta-color);
color: var(--foreground-color);
display: block;
padding: 5px;
}
#burger a:hover {
background: var(--base-color);
color: var(--link-light-color);
}
#container {
@ -63,64 +65,67 @@ nav {
height: 100%;
margin: auto;
width: 100%;
background: $page_background_color;
background: var(--page-background-color);
}
#content {
margin-top: $header_spacing;
margin-bottom: $header_spacing;
margin-top: var(--header-spacing);
margin-bottom: var(--header-spacing);
flex: 1 0 auto;
clear: both;
}
> h1 {
margin: 0 0 12px;
}
#content > h1 {
margin: 0 0 12px;
}
@media (max-width: $min_px_width_for_desktop_layout) {
@media (max-width: $min-desktop-width) {
#content {
padding: 0 4px;
}
}
@media (min-width: $min_px_width_for_desktop_layout) {
.layout--wide, .layout--medium, .layout--narrow {
@media (min-width: $min-desktop-width) {
.layout--wide,
.layout--medium,
.layout--narrow {
box-sizing: border-box;
}
.layout--narrow {
width: 96vw;
max-width: $limited_layout_width;
max-width: var(--limited-layout-width);
}
.layout--medium {
width: 96vw;
max-width: $medium_layout_width;
max-width: var(--medium-layout-width);
}
.layout--wide {
width: 100%;
padding-left: $layout_side_margin;
padding-right: $layout_side_margin;
padding-left: var(--normal-margin);
padding-right: var(--normal-margin);
}
.layout--center-aligned {
.layout--medium, .layout--narrow {
margin-left: auto;
margin-right: auto;
}
.layout--center-aligned .layout--medium,
.layout--center-aligned .layout--narrow {
margin-left: auto;
margin-right: auto;
}
.layout--wide {
padding-left: $centered_layout_side_margin;
padding-right: $centered_layout_side_margin;
}
.layout--center-aligned .layout--wide {
padding-left: var(--centered-margin);
padding-right: var(--centered-margin);
}
#container:not(.layout--center-aligned) #content {
padding-left: $layout_side_margin;
padding-left: var(--normal-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
/* 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;
@ -140,29 +145,31 @@ nav {
padding-top: 6px;
padding-bottom: 10px;
font-size: 12px;
color: $foreground_half_color;
background: $background_color;
color: var(--foreground-half-color);
background: var(--background-color);
line-height: 14px;
}
#footer_content {
display: flex;
flex-direction: row;
}
#footer #footer_content {
display: flex;
flex-direction: row;
}
.footercol {
flex: 1 0 auto;
width: auto;
#footer .footercol {
flex: 1 0 auto;
width: auto;
}
h5 {
margin: 3px 0;
}
}
.footercol + .footercol {
margin-left: 15px;
}
#serving_info {
text-align: center;
}
#footer .footercol h5 {
margin: 3px 0;
}
#footer .footercol + .footercol {
margin-left: 15px;
}
#footer #serving_info {
text-align: center;
}
.center {
@ -181,7 +188,7 @@ nav {
justify-content: center;
}
// Mostly for the header
/* Mostly for the header */
.flex--start-bunched {
justify-content: flex-start;
}
@ -190,7 +197,7 @@ nav {
justify-content: flex-end;
}
@media (max-width: $min_px_width_for_desktop_layout) {
@media (max-width: $min-desktop-width) {
.flex--maybe-wrap {
flex-wrap: wrap !important;
}
@ -249,23 +256,22 @@ nav {
display: grid;
}
@media (max-width: $min_px_width_for_desktop_layout) {
@media (max-width: $min-desktop-width) {
.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 */
}
/* Do not use a descendant selector here as it affects dropdowns */
.stretched-mobile-links > a,
.stretched-mobile-links 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;
}
@mixin even-odd alternating-color;
.spacing-right {
margin-right: 12px;
@ -277,8 +283,10 @@ nav {
.column-layout {
display: flex;
}
@media (max-width: $min_px_width_for_desktop_layout) {
@media (max-width: $min-desktop-width) {
.column-layout {
display: block;
}
}
@ -286,10 +294,12 @@ nav {
.column-layout__left {
flex: 0 0 auto;
width: 326px;
margin-right: $header_spacing;
margin-right: var(--header-spacing);
word-wrap: break-word;
}
@media (max-width: $min_px_width_for_desktop_layout) {
@media (max-width: $min-desktop-width) {
.column-layout__left {
margin-right: 0;
width: 100%;
}
@ -307,22 +317,24 @@ figure {
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;
}
}
figure img {
width: 100%;
height: auto;
max-width: 400px;
display: inline-block;
}
figure 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 */
padding-left: var(--block-spacing); /* on narrow screens, the image would sit uncomfortably close to the text */
}
.table-list__label {
@ -331,23 +343,25 @@ figure {
flex-flow: row wrap;
align-items: center;
justify-content: flex-start;
}
.table-list__label__text,
.table-list__label__input {
padding: 8px;
.table-list__label .table-list__label__text,
.table-list__label .table-list__label__input {
padding: 8px;
}
.table-list__label .table-list__label__text {
flex: 1 0 30%;
}
@media (min-width: $min-desktop-width) {
.table-list__label .table-list__label__text {
text-align: right;
}
}
.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%;
}
.table-list__label .table-list__label__input {
flex: 1 1 60%;
}
.permission-choices {
@ -357,41 +371,35 @@ figure {
padding: 0;
}
.permission-choice__label {
input {
display: none;
.permission-choice__label input {
display: none;
}
&:checked + {
.permission-option--yes {
border-color: $success_color;
background-color: $success_light_color;
}
.permission-choice__label input:checked .permission-option--yes {
border-color: var(--success-color);
background-color: var(--success-light-color);
}
.permission-option--no {
border-color: $danger_color;
background-color: $danger_light_color;
}
}
.permission-choice__label input:checked .permission-option--no {
border-color: var(--danger-color);
background-color: var(--danger-light-color);
}
&:hover + {
.permission-option--yes {
background-color: $success_light_color;
}
.permission-choice__label input:hover .permission-option--yes {
background-color: var(--success-light-color);
}
.permission-option--no {
background-color: $danger_light_color;
}
}
}
.permission-choice__label input:hover .permission-option--no {
background-color: var(--danger-light-color);
}
.permission-option {
text-align: center;
border: 1px solid transparent;
}
&:not(:last-child) {
margin-right: 12px;
}
.permission-option:not(:last-child) {
margin-right: 12px;
}
.choice-text {
@ -412,9 +420,9 @@ figure {
width: 100%;
margin: auto;
text-align: left;
background-color: $header_secondary_color;
background-color: var(--header-secondary-color);
}
.minimal__message__header {
margin: 0 0 10px 0;
margin: 0 0 10px;
}

55
assets/css/common/_media.scss → assets/css/elements/media.css
View file

@ -1,23 +1,20 @@
$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;
border: var(--media-border);
margin: 0 6px 6px 0;
}
.media-box.over {
border: $media_over_border;
border: var(--media-over-border);
}
.media-box__header {
min-width: 100%;
background: $media_box_color;
color: $foreground_color;
line-height: $media_box_header_height;
background: var(--media-box-color);
color: var(--foreground-color);
line-height: var(--media-box-header-height);
font-size: 12px;
text-align: center;
white-space: nowrap;
@ -29,12 +26,12 @@ a.media-box__header--link {
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
color: $media_box_header_link_text_color;
color: var(--media-box-header-link-text-color);
}
&:hover {
color: $media_box_header_link_text_hover_color;
background-color: $media_box_hover_color;
}
a.media-box__header--link:hover {
color: var(--media-box-header-link-text-hover-color);
background-color: var(--media-box-hover-color);
}
/* Containers with a row of links (e.g. image thumbnail header) should use this class. */
@ -42,33 +39,33 @@ a.media-box__header--link {
display: inline-block;
}
.media-box__header--link-row > a, .media-box__overlay {
line-height: $media_box_header_height;
.media-box__header--link-row > a,
.media-box__overlay {
line-height: var(--media-box-header-height);
padding: 0 4px;
}
.media-box__header--small {
width: 150px;
font-size: 11px;
a {
padding: 0 3px;
}
}
.media-box__header--small a {
padding: 0 3px;
}
.media-box__header--unselected {
background-color: $danger_color;
background-color: var(--danger-color);
}
.media-box__header--selected {
background-color: $success_color;
background-color: var(--success-color);
}
// TODO: properly fix this
.media-box__content {
.image-container {
width: 100%;
height: 100%;
}
/* TODO: properly fix this */
.media-box__content .image-container {
width: 100%;
height: 100%;
}
.media-box__content--featured {
@ -94,8 +91,8 @@ a.media-box__header--link {
text-align: left;
font-weight: bold;
word-wrap: break-word;
color: $image_overlay_color;
background: $image_overlay_background_color;
color: var(--image-overlay-color);
background: var(--image-overlay-background-color);
pointer-events: none;
}
@ -110,5 +107,5 @@ a.media-box__header--link {
/* TODO: replace absolute positioning with a more flexible solution */
.media-box__overlay:nth-child(2) {
top: $media_box_header_height;
top: var(--media-box-header-height);
}

6
assets/css/elements/shame.css Normal file
View file

@ -0,0 +1,6 @@
/* 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;
}

2
assets/css/common/_text.scss → assets/css/elements/text.css
View file

@ -2,6 +2,6 @@
line-height: 30px;
}
.fa--important{
.fa--important {
color: #fc7f1c;
}

12
assets/css/options/example.css Normal file
View file

@ -0,0 +1,12 @@
/* CSS options folder
*
* This is where overrides go, such as those which are intended for
* specific options, for example - setting background to pure black
* if user chooses OLED-friendly version of the site.
*
* Right now this does nothing, reserved for future expansion.
*/
:root {
--some-variable: #ffffff;
}

260
assets/css/themes/base/dark.css Normal file
View file

@ -0,0 +1,260 @@
@define-mixin dark-theme-mutations {
:root {
/* Repeat above variable definitions as CSS variables */
--background-color: $background-color;
--page-background-color: $page-background-color;
--foreground-color: $foreground-color;
--base-color: $base-color;
--primary-light-color: $primary-light-color;
--success-light-color: $success-light-color;
--danger-light-color: $danger-light-color;
--warning-light-color: $warning-light-color;
--destroyed-content-color: $destroyed-content-color;
--header-color: $header-color;
--header-field-color: $header-field-color;
--header-secondary-color: $header-secondary-color;
--header-admin-color: $header-admin-color;
--block-header-color: $block-header-color;
--block-header-link-text-color: $block-header-link-text-color;
--block-header-light-color: $block-header-light-color;
--block-header-light-link-text-color: $block-header-light-link-text-color;
--border-color: $border-color;
--media-box-color: $media-box-color;
--link-color: $link-color;
--link-hover-color: $link-hover-color;
--fave-color: $fave-color;
--vote-up-color: $vote-up-color;
--vote-down-color: $vote-down-color;
--hide-color: $hide-color;
--assistant-color: $assistant-color;
--unread-message-color: $unread-message-color;
--tag-normal-color: $tag-normal-color;
--tag-category-rating-color: $tag-category-rating-color;
--tag-category-spoiler-color: $tag-category-spoiler-color;
--tag-category-origin-color: $tag-category-origin-color;
--tag-category-oc-color: $tag-category-oc-color;
--tag-category-error-color: $tag-category-error-color;
--tag-category-character-color: $tag-category-character-color;
--tag-category-content-official-color: $tag-category-content-official-color;
--tag-category-content-fanmade-color: $tag-category-content-fanmade-color;
--tag-category-species-color: $tag-category-species-color;
--tag-category-body-type-color: $tag-category-body-type-color;
--commission-category-color: $commission-category-color;
--site-notice-color: $site-notice-color;
--image-overlay-color: $image-overlay-color;
--image-overlay-background-color: $image-overlay-background-color;
--text-light-color: $foreground-color;
--meta-color: hsl(from $meta-color h calc(s - 8) calc(l + 6));
--meta-border-color: hsl(from $meta-color h calc(s - 15) calc(l + 25));
--comment-color: var(--link-hover-color);
--link-light-color: var(--foreground-color);
/* saturate(lighten($primary-light-color, 5%), 4%); */
--primary-color: hsl(from $primary-light-color h calc(s + 4) calc(l + 5));
/* lighten($success-light-color, 4%); */
--success-color: hsl(from $success-light-color h s calc(l + 4));
/* lighten($danger-light-color, 5%); */
--danger-color: hsl(from $danger-light-color h s calc(l + 5));
/* lighten($warning-light-color, 6%); */
--warning-color: hsl(from $warning-light-color h s calc(l + 5));
/* darken($header-color, 8%); */
--header-hover-color: hsl(from $header-color h s calc(l - 8));
/* darken($header-hover-color, 4%); */
--header-field-hover-color: hsl(from $header-color h s calc(l - 12));
/* darken($header-secondary-color, 4%); */
--header-secondary-hover-color: hsl(from $header-secondary-color h s calc(l - 4));
/* darken($header-admin-color, 5%); */
--header-admin-hover-color: hsl(from $header-admin-color h s calc(l - 5));
/* adjust-hue(saturate(darken($block-header-color, 4%), 4%), -3deg); */
--block-header-hover-color: hsl(from $block-header-color calc(h - 3) calc(s + 4) calc(l - 4));
/* adjust-hue(desaturate(darken($block-header-link-text-color, 3%), 20%), 6deg); */
--block-header-link-text-hover-color: hsl(from $block-header-link-text-color calc(h + 6) calc(s - 20) calc(l - 3));
/* adjust-hue(saturate(darken($block-header-light-color, 4%), 10%), -4deg); */
--block-header-light-hover-color: hsl(from $block-header-light-color calc(h - 4) calc(s + 10) calc(l - 4));
/* adjust-hue(desaturate(darken($block-header-light-link-text-color, 2%), 10%), 8deg); */
--block-header-light-link-text-hover-color: hsl(from $block-header-light-link-text-color calc(h + 8) calc(s - 10) calc(l - 2));
/* darken($media-box-color, 4%); */
--media-box-hover-color: hsl(from $media-box-color h s calc(l - 4));
/* desaturate(darken($link-color, 3%), 18%); */
--media-box-header-link-text-hover-color: hsl(from $link-color h calc(s - 18) calc(l - 3));
/* $link-color; */
--media-box-header-link-text-color: $link-color;
/* darken($media-box-header-link-text-color, 10%); */
--media-box-header-link-text-hover-color: hsl(from $link-color h s calc(l - 10));
/* mix($link-color, $foreground-color, 70%); */
--link-dark-color: hsl(from $link-color h calc(s - 15) calc(l + 40));
/* mix($link-hover-color, $foreground-color, 70%); */
--link-dark-hover-color: hsl(from $link-hover-color h s calc(l + 40));
/* $link-dark-color; */
--image-show-link-color: hsl(from $link-color h s calc(l + 40));
/* $link-dark-hover-color; */
--image-show-link-hover-color: hsl(from $link-hover-color h s calc(l + 40));
/* $foreground-color; */
--image-overlay-color: $foreground-color;
/* darken($background-color, 30%); */
--image-overlay-background: hsl(from $background-color h s calc(l - 30));
/* lighten($assistant-color, 8%); */
--assistant-border-color: hsl(from $assistant-color h s calc(l + 8));
/* mix($vote-down-color, $background-color, 17%); */
--admin-links-color: hsl(from $vote-down-color h calc(s - 50) calc(l - 28));
/* mix($vote-down-color, $background-color, 48%); */
--admin-links-hover-color: hsl(from $vote-down-color h calc(s - 20) calc(l - 20));
/* darken($background-color, 3%); */
--background-odd-color: hsl(from $background-color h s calc(l - 3));
/* $background-color; */
--background-even-color: $background-color;
/* desaturate(darken($success-color, 9%), 2%); */
--success-odd-color: hsl(from $success-light-color h calc(s - 2) calc(l - 5));
/* saturate(darken($success-light-color, 2%), 2%); */
--success-even-color: hsl(from $success-light-color h calc(s + 2) calc(l - 2));
/* saturate(darken($warning-color, 19%), 10%); */
--warning-odd-color: hsl(from $warning-light-color h calc(s + 10) calc(l - 15));
/* saturate(darken($warning-light-color, 7%), 7%); */
--warning-even-color: hsl(from $warning-light-color h calc(s + 7) calc(l - 7));
/* desaturate(darken($danger-color, 16%), 2%); */
--danger-odd-color: hsl(from $danger-light-color h calc(s - 2) calc(l - 11));
/* darken($danger-light-color, 6%); */
--danger-even-color: hsl(from $danger-light-color h s calc(l - 6));
/* mix($foreground-color, $background-color); */
--foreground-half-color: hsl(from $background-color h s calc(l + 50));
/* lighten($base-color, 5%); */
--sparkline-color: hsl(from $base-color h s calc(l + 5));
/* $foreground-color; */
--input-text-color: $foreground-color;
/* $meta-color; */
--input-color: var(--meta-color);
/* $meta-border-color; */
--input-border: var(--meta-border-color);
/* lighten($meta-color, 5%); */
--input-color-active: hsl(from $meta-color h s calc(l + 5));
/* desaturate(lighten($base-color, 2%), 10%); */
--input-border-active: hsl(from $base-color h calc(s - 10) calc(l + 2));
/* darken($tag-normal-color, 29%); */
--tag-normal-background: hsl(from $tag-normal-color h s calc(l - 29));
/* darken($tag-normal-color, 18%); */
--tag-normal-border: hsl(from $tag-normal-color h s calc(l - 18));
/* darken($tag-category-rating-color, 35%); */
--tag-category-rating-background: hsl(from $tag-category-rating-color h s calc(l - 35));
/* desaturate(darken($tag-category-rating-color, 20%), 10%); */
--tag-category-rating-border: hsl(from $tag-category-rating-color h calc(s - 10) calc(l - 20));
/* darken($tag-category-spoiler-color, 34%); */
--tag-category-spoiler-background: hsl(from $tag-category-spoiler-color h s calc(l - 34));
/* darken($tag-category-spoiler-color, 23%); */
--tag-category-spoiler-border: hsl(from $tag-category-spoiler-color h s calc(l - 23));
/* darken($tag-category-origin-color, 40%); */
--tag-category-origin-background: hsl(from $tag-category-origin-color h s calc(l - 40));
/* desaturate(darken($tag-category-origin-color, 22%), 28%); */
--tag-category-origin-border: hsl(from $tag-category-origin-color h calc(s - 28) calc(l - 22));
/* darken($tag-category-oc-color, 33%); */
--tag-category-oc-background: hsl(from $tag-category-oc-color h s calc(l - 33));
/* darken($tag-category-oc-color, 15%); */
--tag-category-oc-border: hsl(from $tag-category-oc-color h s calc(l - 15));
/* desaturate(darken($tag-category-error-color, 38%), 6%); */
--tag-category-error-background: hsl(from $tag-category-error-color h calc(s - 6) calc(l - 38));
/* darken($tag-category-error-color, 22%); */
--tag-category-error-border: hsl(from $tag-category-error-color h s calc(l - 22));
/* darken($tag-category-character-color, 33%); */
--tag-category-character-background: hsl(from $tag-category-character-color h s calc(l - 33));
/* darken($tag-category-character-color, 20%); */
--tag-category-character-border: hsl(from $tag-category-character-color h s calc(l - 20));
/* desaturate(darken($tag-category-content-official-color, 29%), 2%); */
--tag-category-content-official-background: hsl(from $tag-category-content-official-color h calc(s - 2) calc(l - 29));
/* darken($tag-category-content-official-color, 20%); */
--tag-category-content-official-border: hsl(from $tag-category-content-official-color h s calc(l - 20));
/* darken($tag-category-content-fanmade-color, 40%); */
--tag-category-content-fanmade-background: hsl(from $tag-category-content-fanmade-color h s calc(l - 40));
/* desaturate(darken($tag-category-content-fanmade-color, 20%), 10%); */
--tag-category-content-fanmade-border: hsl(from $tag-category-content-fanmade-color h calc(s - 10) calc(l - 20));
/* darken($tag-category-species-color, 35%); */
--tag-category-species-background: hsl(from $tag-category-species-color h s calc(l - 35));
/* desaturate(darken($tag-category-species-color, 20%), 10%); */
--tag-category-species-border: hsl(from $tag-category-species-color h calc(s - 10) calc(l - 20));
/* darken($tag-category-body-type-color, 50%); */
--tag-category-body-type-background: hsl(from $tag-category-body-type-color h s calc(l - 50));
/* desaturate(darken($tag-category-body-type-color, 37%), 10%); */
--tag-category-body-type-border: hsl(from $tag-category-body-type-color h calc(s - 10) calc(l - 37));
/* darken($commission-category-color, 36%); */
--commission-category-background: hsl(from $commission-category-color h s calc(l - 36));
/* darken($commission-category-color, 25%); */
--commission-category-border: hsl(from $commission-category-color h s calc(l - 25));
/* desaturate(lighten($block-header-link-text-color, 8%), 20%); */
--site-notice-link-color: hsl(from $block-header-link-text-color h calc(s - 20) calc(l + 8));
/* darken($site-notice-link-color, 8%); */
--site-notice-link-hover-color: hsl(from $block-header-link-text-color h calc(s - 20) l);
/* $foreground-color; */
--button-text-color: $foreground-color;
/* rgba($meta-color, 0.2); */
--button-background-color: rgba($meta-color, 0.2);
/* $input-color-active; */
--button-hover-background-color: var(--input-color-active);
/* $input-border-active; */
--button-hover-border-color: var(--input-border-active);
/* $meta-border-color; */
--button-border-color: var(--meta-border-color);
/* $primary-light-color; */
--button-primary-background-color: $primary-light-color;
/* $success-light-color; */
--button-success-background-color: $success-light-color;
/* $warning-light-color; */
--button-warning-background-color: $warning-light-color;
/* $danger-light-color; */
--button-danger-background-color: $danger-light-color;
/* saturate(lighten($primary-light-color, 14%), 22%); */
--button-primary-border-color: hsl(from $primary-light-color h calc(s + 22) calc(l + 14));
/* saturate(lighten($success-light-color, 9%), 10%); */
--button-success-border-color: hsl(from $success-light-color h calc(s + 10) calc(l + 9));
/* saturate(lighten($warning-light-color, 12%), 10%); */
--button-warning-border-color: hsl(from $warning-light-color h calc(s + 10) calc(l + 12));
/* saturate(lighten($danger-light-color, 18%), 6%); */
--button-danger-border-color: hsl(from $danger-light-color h calc(s + 6) calc(l + 18));
/* darken($button-primary-background-color, 5%); */
--button-primary-hover-background: hsl(from $primary-light-color h calc(s + 5) l);
/* darken($button-primary-border-color, 5%); */
--button-primary-hover-border: hsl(from $primary-light-color h calc(s + 5) l);
/* darken($button-success-background-color, 5%); */
--button-success-hover-background: hsl(from $success-light-color h s calc(l - 5));
/* darken($button-success-border-color, 5%); */
--button-success-hover-border: hsl(from $success-light-color h calc(s + 10) calc(l + 4));
/* darken($button-warning-background-color, 6%); */
--button-warning-hover-background: hsl(from $warning-light-color h s calc(l - 6));
/* darken($button-warning-border-color, 6%); */
--button-warning-hover-border: hsl(from $warning-light-color h calc(s + 10) calc(l + 6));
/* darken($button-danger-background-color, 5%); */
--button-danger-hover-background: hsl(from $danger-light-color h s calc(l - 5));
/* darken($button-danger-border-color, 5%); */
--button-danger-hover-border: hsl(from $danger-light-color h calc(s + 6) calc(l + 13));
/* mix($vote-down-color, $block-header-light-color, 30%); */
--downvote-disabled-color: hsl(from $vote-down-color h calc(s - 10) calc(l - 10));
/* lighten($vote-down-color, 10%); */
--dnp-warning-hover-color: hsl(from $vote-down-color h s calc(l + 10));
/* lighten($border-color, 8); */
--poll-form-label-background: hsl(from $border-color h s calc(l + 8));
/* darken($meta-color, 4%); */
--tag-dropdown-hover-background: hsl(from $meta-color h s calc(l - 4));
}
}

270
assets/css/themes/base/light.css Normal file
View file

@ -0,0 +1,270 @@
@define-mixin light-theme-mutations {
:root {
--background-color: $background-color;
--page-background-color: $page-background-color;
--foreground-color: $foreground-color;
--base-color: $base-color;
--primary-color: $primary-color;
--success-color: $success-color;
--danger-color: $danger-color;
--warning-color: $warning-color;
--link-color: $link-color;
--link-hover-color: $link-hover-color;
--fave-color: $fave-color;
--vote-up-color: $vote-up-color;
--vote-down-color: $vote-down-color;
--hide-color: $hide-color;
--destroyed-content-color: $destroyed-content-color;
--assistant-color: $assistant-color;
--unread-message-color: $unread-message-color;
--tag-normal-color: $tag-normal-color;
--tag-category-rating-color: $tag-category-rating-color;
--tag-category-spoiler-color: $tag-category-spoiler-color;
--tag-category-origin-color: $tag-category-origin-color;
--tag-category-oc-color: $tag-category-oc-color;
--tag-category-error-color: $tag-category-error-color;
--tag-category-character-color: $tag-category-character-color;
--tag-category-content-official-color: $tag-category-content-official-color;
--tag-category-content-fanmade-color: $tag-category-content-fanmade-color;
--tag-category-species-color: $tag-category-species-color;
--tag-category-body-type-color: $tag-category-body-type-color;
--commission-category-color: $commission-category-color;
--image-overlay-color: $image-overlay-color;
--image-overlay-background-color: $image-overlay-background-color;
/* $background-color */
--text-light-color: $background-color;
/* mix($foreground-color, $background-color, 5%) */
--meta-color: hsl(from $foreground-color h s calc(l + 77));
/* mix($foreground-color, $meta-color, 30%) */
--meta-border-color: hsl(from $foreground-color h s calc(l + 58));
--comment-color: var(--link-hover-color);
/* darken($base-color, 9%) */
--header-color: hsl(from $base-color h s calc(l - 9));
/* darken($base-color, 16%) */
--header-hover-color: hsl(from $base-color h s calc(l - 16));
/* $base-color */
--header-field-color: $base-color;
/* darken($base-color, 7%) */
--header-field-hover-color: hsl(from $base-color h s calc(l - 7));
/* desaturate(lighten($base-color, 30%), 25%) */
--header-secondary-color: hsl(from $base-color h calc(s - 25) calc(l + 30));
/* darken($header-secondary-color, 7%) */
--header-secondary-hover-color: hsl(from $base-color h calc(s - 25) calc(l + 23));
/* mix($vote-down-color, $background-color, 16%) */
--header-admin-color: hsl(from $vote-down-color h s calc(l + 50));
/* mix($vote-down-color, $background-color, 30%) */
--header-admin-hover-color: hsl(from $vote-down-color h s calc(l + 40));
/* lighten($base-color, 28%) */
--block-header-color: hsl(from $base-color h s calc(l + 28));
/* desaturate(lighten($base-color, 20%), 5%) */
--block-header-hover-color: hsl(from $base-color h calc(s - 5) calc(l + 20));
/* saturate(darken($header-color, 5%), 6%) */
--block-header-link-text-color: hsl(from $base-color h calc(s + 5) calc(l - 15));
/* darken($header-color, 15%) */
--block-header-link-text-hover-color: hsl(from $base-color h s calc(l - 24));
/* desaturate(lighten($base-color, 31%), 16%) */
--block-header-light-color: hsl(from $base-color h calc(s - 16) calc(l + 31));
/* lighten($header-secondary-hover-color, 2%) */
--block-header-light-hover-color: hsl(from $base-color h calc(s - 25) calc(l + 25));
/* darken($block-header-light-color, 42%) */
--block-header-light-link-text-color: hsl(from $base-color h calc(s - 16) calc(l - 11));
/* darken($block-header-light-color, 52%) */
--block-header-light-link-text-hover-color: hsl(from $base-color h calc(s - 16) calc(l - 21));
/* darken($block-header-light-color, 3%) */
--border-color: hsl(from $base-color h calc(s - 16) calc(l + 28));
/* desaturate($block-header-light-color, 10%) */
--media-box-color: hsl(from $base-color h calc(s - 26) calc(l + 31));
/* saturate(darken($media-box-color, 6%), 6%) */
--media-box-hover-color: hsl(from $base-color h calc(s - 20) calc(l + 25));
/* $link-color */
--media-box-header-link-text-color: $link-color;
/* darken($media-box-header-link-text-color, 10%) */
--media-box-header-link-text-hover-color: hsl(from $link-color h s calc(l - 10));
--link-light-color: var(--background-color);
/* lighten($primary-color, 5%) */
--primary-light-color: hsl(from $primary-color h s calc(l + 5));
/* lighten($success-color, 7%) */
--success-light-color: hsl(from $success-color h s calc(l + 7));
/* lighten($danger-color, 4%) */
--danger-light-color: hsl(from $danger-color h s calc(l + 4));
/* lighten($warning-color, 6%) */
--warning-light-color: hsl(from $warning-color h s calc(l + 6));
/* darken($link-color, 20%) */
--link-dark-color: hsl(from $link-color h s calc(l - 20));
/* darken($link-hover-color, 20%) */
--link-hover-dark-color: hsl(from $link-hover-color h s calc(l - 20));
/* $link-color */
--image-show-link-color: $link-color;
/* $link-hover-color */
--image-show-link-hover-color: $link-hover-color;
/* In default theme, expect odd color to be darker! */
/* lighten($base-color, 35%) */
--background-odd-color: hsl(from $base-color h s calc(l + 35));
/* $background-color */
--background-even-color: $background-color;
/* Depending on the theme, you may want to swap even and odd colors */
/* saturate(darken($success-light-color, 3%), 8%) */
--success-odd-color: hsl(from $success-color h calc(s + 8) calc(l + 4));
/* lighten($success-color, 13%) */
--success-even-color: hsl(from $success-color h s calc(l + 13));
/* saturate(darken($warning-light-color, 7%), 10%) */
--warning-odd-color: hsl(from $warning-color h calc(s + 10) calc(l - 1));
/* lighten($warning-color, 5%) */
--warning-even-color: hsl(from $warning-color h s calc(l + 5));
/* saturate(darken($danger-light-color, 1%), 12%) */
--danger-odd-color: hsl(from $danger-color h calc(s + 12) calc(l + 3));
/* desaturate(lighten($danger-color, 7%), 10%) */
--danger-even-color: hsl(from $danger-color h calc(s - 10) calc(l + 7));
/* mix($foreground-color, $background-color) */
--foreground-half-color: hsl(from $background-color h s calc(l - 45));
/* lighten($base-color, 5%) */
--sparkline-color: hsl(from $base-color h s calc(l + 5));
/* darken($assistant-color, 8%) */
--assistant-border-color: hsl(from $assistant-color h s calc(l - 8));
/* mix($vote-down-color, $background-color, 17%) */
--admin-links-color: hsl(from $vote-down-color h calc(s - 20) calc(l + 50));
/* mix($vote-down-color, $background-color, 48%) */
--admin-links-hover-color: hsl(from $vote-down-color h calc(s - 30) calc(l + 30));
/* $foreground-color */
--input-text-color: $foreground-color;
/* $meta-color */
--input-color: var(--meta-color);
/* $meta-border-color */
--input-border: var(--meta-border-color);
/* desaturate(lighten($base-color, 30%), 16%) */
--input-color-active: hsl(from $base-color h calc(s - 16) calc(l + 30));
/* lighten($base-color, 10%) */
--input-border-active: hsl(from $base-color h s calc(l + 10));
/* desaturate(lighten($tag-normal-color, 44%), 28%) */
--tag-normal-background: hsl(from $tag-normal-color h calc(s - 28) calc(l + 44));
/* darken($tag-normal-background, 16%) */
--tag-normal-border: hsl(from $tag-normal-color h calc(s - 28) calc(l + 28));
/* desaturate(lighten($tag-category-rating-color, 41%), 25%) */
--tag-category-rating-background: hsl(from $tag-category-rating-color h calc(s - 25) calc(l + 41));
/* darken($tag-category-rating-background, 10%) */
--tag-category-rating-border: hsl(from $tag-category-rating-color h calc(s - 25) calc(l + 31));
/* lighten($tag-category-spoiler-color, 41%) */
--tag-category-spoiler-background: hsl(from $tag-category-spoiler-color h s calc(l + 41));
/* darken($tag-category-spoiler-background, 8%) */
--tag-category-spoiler-border: hsl(from $tag-category-spoiler-color h s calc(l + 33));
/* lighten($tag-category-origin-color, 43%) */
--tag-category-origin-background: hsl(from $tag-category-origin-color h s calc(l + 43));
/* darken($tag-category-origin-background, 10%) */
--tag-category-origin-border: hsl(from $tag-category-origin-color h s calc(l + 33));
/* lighten($tag-category-oc-color, 35%) */
--tag-category-oc-background: hsl(from $tag-category-oc-color h s calc(l + 35));
/* darken($tag-category-oc-background, 9%) */
--tag-category-oc-border: hsl(from $tag-category-oc-color h s calc(l + 26));
/* lighten($tag-category-error-color, 40%) */
--tag-category-error-background: hsl(from $tag-category-error-color h s calc(l + 40));
/* darken($tag-category-error-background, 8%) */
--tag-category-error-border: hsl(from $tag-category-error-color h s calc(l + 32));
/* desaturate(lighten($tag-category-character-color, 44%), 10%) */
--tag-category-character-background: hsl(from $tag-category-character-color h calc(s - 10) calc(l + 44));
/* lighten($tag-category-character-color, 22%) */
--tag-category-character-border: hsl(from $tag-category-character-color h s calc(l + 22));
/* lighten($tag-category-content-official-color, 41%) */
--tag-category-content-official-background: hsl(from $tag-category-content-official-color h s calc(l + 41));
/* lighten($tag-category-content-official-color, 18%) */
--tag-category-content-official-border: hsl(from $tag-category-content-official-color h s calc(l + 18));
/* lighten($tag-category-content-fanmade-color, 36%) */
--tag-category-content-fanmade-background: hsl(from $tag-category-content-fanmade-color h s calc(l + 36));
/* lighten($tag-category-content-fanmade-color, 18%) */
--tag-category-content-fanmade-border: hsl(from $tag-category-content-fanmade-color h s calc(l + 18));
/* lighten($tag-category-species-color, 44%) */
--tag-category-species-background: hsl(from $tag-category-species-color h s calc(l + 44));
/* lighten($tag-category-species-color, 25%) */
--tag-category-species-border: hsl(from $tag-category-species-color h s calc(l + 25));
/* lighten($tag-category-body-type-color, 45%) */
--tag-category-body-type-background: hsl(from $tag-category-body-type-color h s calc(l + 45));
/* lighten($tag-category-body-type-color, 35%) */
--tag-category-body-type-border: hsl(from $tag-category-body-type-color h s calc(l + 35));
/* saturate(lighten($commission-category-color, 40%), 12%) */
--commission-category-background: hsl(from $commission-category-color h calc(s + 12) calc(l + 40));
/* lighten($commission-category-color, 20%) */
--commission-category-border: hsl(from $commission-category-color h s calc(l + 20));
/* darken($base-color, 32%) */
--site-notice-color: hsl(from $base-color h s calc(l - 32));
/* $block-header-light-color */
--site-notice-link-color: var(--block-header-light-color);
/* $block-header-hover-color */
--site-notice-link-hover-color: var(--block-header-hover-color);
/* $foreground-color */
--button-text-color: $foreground-color;
/* rgba($meta-color, 0.2) */
--button-background-color: rgba(var(--meta-color), 0.2);
/* $input-color-active */
--button-hover-background-color: var(--input-color-active);
/* $input-border-active */
--button-hover-border-color: var(--input-border-active);
/* $meta-border-color */
--button-border-color: var(--meta-border-color);
/* $primary-light-color */
--button-primary-background-color: hsl(from $primary-color h s calc(l + 5));
/* $success-light-color */
--button-success-background-color: hsl(from $success-color h s calc(l + 7));
/* $warning-light-color */
--button-warning-background-color: hsl(from $warning-color h s calc(l + 6));
/* $danger-light-color */
--button-danger-background-color: hsl(from $warning-color h s calc(l + 6));
/* darken($primary-color, 8%) */
--button-primary-border-color: hsl(from $primary-color h s calc(l - 8));
/* darken($success-color, 10%) */
--button-success-border-color: hsl(from $success-color h s calc(l - 10));
/* darken($warning-color, 11%) */
--button-warning-border-color: hsl(from $warning-color h s calc(l - 11));
/* darken($danger-color, 8%) */
--button-danger-border-color: hsl(from $danger-color h s calc(l - 8));
/* darken($button-primary-background-color, 5%) */
--button-primary-hover-background: $primary-color;
/* darken($button-primary-border-color, 5%) */
--button-primary-hover-border: hsl(from $primary-color h s calc(l - 13));
/* darken($button-success-background-color, 5%) */
--button-success-hover-background: hsl(from $success-color h s calc(l + 2));
/* darken($button-success-border-color, 5%) */
--button-success-hover-border: hsl(from $success-color h s calc(l - 15));
/* darken($button-warning-background-color, 6%) */
--button-warning-hover-background: $warning-color;
/* darken($button-warning-border-color, 6%) */
--button-warning-hover-border: hsl(from $warning-color h s calc(l - 17));
/* darken($button-danger-background-color, 5%) */
--button-danger-hover-background: hsl(from $danger-color h s calc(l + 1));
/* darken($button-danger-border-color, 5%) */
--button-danger-hover-border: hsl(from $danger-color h s calc(l - 13));
/* mix($vote-down-color, $block-header-light-color, 30%) */
--downvote-disabled-color: hsl(from $vote-down-color calc(s - 40) calc(l - 20));
/* lighten($vote-down-color, 10%) */
--dnp-warning-hover-color: hsl(from $vote-down-color h s calc(l + 10));
/* lighten($border-color, 8) */
--poll-form-label-background: hsl(from $base-color h calc(s - 16) calc(l + 36));
/* darken($meta-color, 4%) */
--tag-dropdown-hover-background: hsl(from $foreground-color h s calc(l - 10));
}
}

69
assets/css/themes/dark-blue.css Normal file
View file

@ -0,0 +1,69 @@
/* As originally seen on Derpibooru */
@import "themes/base/dark";
$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;
@mixin dark-theme-mutations;
/* put mutation overrides here */
:root {
--keep: #111111;
}

68
assets/css/themes/dark-cyan.css Normal file
View file

@ -0,0 +1,68 @@
@import "themes/base/dark";
$background-color: #1d2d2f;
$page-background-color: #0d1a1c;
$foreground-color: #e0e0e0;
$base-color: #549099;
$primary-light-color: #1a6b68;
$success-light-color: #144714;
$danger-light-color: #66211f;
$warning-light-color: #7d4825;
$destroyed-content-color: #382c2f;
$meta-color: #19282a;
$header-color: #1a6e75;
$header-field-color: #1c524e;
$header-secondary-color: #1d3d44;
$header-admin-color: #3b1d1d;
$block-header-color: #1d3d44;
$block-header-link-text-color: #15d1d4;
$block-header-light-color: #1d3d44;
$block-header-light-link-text-color: #15d1d4;
$border-color: #1d3d44;
$media-box-color: #2d3d41;
$link-color: #15d1d4;
$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;
@mixin dark-theme-mutations;
/* put mutation overrides here */
:root {
--keep: #222222;
}

68
assets/css/themes/dark-green.css Normal file
View file

@ -0,0 +1,68 @@
@import "themes/base/dark";
$background-color: #1d2f20;
$page-background-color: #091a11;
$foreground-color: #e0e0e0;
$base-color: #549975;
$primary-light-color: #1a6b51;
$success-light-color: #014b01;
$danger-light-color: #66211f;
$warning-light-color: #7d4825;
$destroyed-content-color: #382c2f;
$meta-color: #192a1e;
$header-color: #287139;
$header-field-color: #1c5225;
$header-secondary-color: #1d442f;
$header-admin-color: #3b1d1d;
$block-header-color: #1d442f;
$block-header-link-text-color: #11cf69;
$block-header-light-color: #1d442f;
$block-header-light-link-text-color: #11cf69;
$border-color: #1d442f;
$media-box-color: #36453d;
$link-color: #11cf69;
$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: #25c640;
$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;
@mixin dark-theme-mutations;
/* put mutation overrides here */
:root {
--keep: #333333;
}

68
assets/css/themes/dark-orange.css Normal file
View file

@ -0,0 +1,68 @@
@import "themes/base/dark";
$background-color: #2b1a15;
$page-background-color: #210f0c;
$foreground-color: #e0e0e0;
$base-color: #a04517;
$primary-light-color: #8c2a0f;
$success-light-color: #144714;
$danger-light-color: #66211f;
$warning-light-color: #7d4825;
$destroyed-content-color: #382c2f;
$meta-color: #2a1c19;
$header-color: #893a12;
$header-field-color: #492110;
$header-secondary-color: #44291d;
$header-admin-color: #480909;
$block-header-color: #44291d;
$block-header-link-text-color: #ec5f19;
$block-header-light-color: #44291d;
$block-header-light-link-text-color: #ec5f19;
$border-color: #44291d;
$media-box-color: #40312a;
$link-color: #ec5f19;
$link-hover-color: #ec1919;
$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;
@mixin dark-theme-mutations;
/* put mutation overrides here */
:root {
--comment-color: #b099dd;
}

68
assets/css/themes/dark-pink.css Normal file
View file

@ -0,0 +1,68 @@
@import "themes/base/dark";
$background-color: #2f1d26;
$page-background-color: #221117;
$foreground-color: #e0e0e0;
$base-color: #995470;
$primary-light-color: #6b1a40;
$success-light-color: #144714;
$danger-light-color: #66211f;
$warning-light-color: #7d4825;
$destroyed-content-color: #382c2f;
$meta-color: #2a1924;
$header-color: #811242;
$header-field-color: #521c3f;
$header-secondary-color: #501e36;
$header-admin-color: #3b1d1d;
$block-header-color: #501e36;
$block-header-link-text-color: #ee157a;
$block-header-light-color: #501e36;
$block-header-light-link-text-color: #ee157a;
$border-color: #501e36;
$media-box-color: #573142;
$link-color: #ee157a;
$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;
@mixin dark-theme-mutations;
/* put mutation overrides here */
:root {
--keep: #555555;
}

69
assets/css/themes/dark-purple.css Normal file
View file

@ -0,0 +1,69 @@
/* As originally seen on Furbooru */
@import "themes/base/dark";
$background-color: #1d1924;
$page-background-color: #15121a;
$foreground-color: #dadada;
$base-color: #785b99;
$primary-light-color: #46266b;
$success-light-color: #0f330f;
$danger-light-color: #66211f;
$warning-light-color: #7d4825;
$destroyed-content-color: #332025;
$meta-color: #22192a;
$header-color: #36274e;
$header-field-color: #241c2c;
$header-secondary-color: #251c36;
$header-admin-color: #3b1d1d;
$block-header-color: #3a314e;
$block-header-link-text-color: #a96fdb;
$block-header-light-color: #2d253c;
$block-header-light-link-text-color: #8f72c4;
$border-color: #332941;
$media-box-color: #311e49;
$link-color: #9747cc;
$link-hover-color: #cbb5f8;
$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;
@mixin dark-theme-mutations;
/* put mutation overrides here */
:root {
--keep: #666666;
}

70
assets/css/themes/dark-red.css Normal file
View file

@ -0,0 +1,70 @@
/* As originally seen on Derpibooru */
@import "themes/base/dark";
$background-color: #412121;
$page-background-color: $background-color;
$foreground-color: #e0e0e0;
$grey-color: #3b3b3b;
$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-color;
$link-color: #dbdb00;
$link-hover-color: #fff3bd;
$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-color;
$image-overlay-color: #ffffff;
$image-overlay-background-color: #000000;
@mixin dark-theme-mutations;
/* put mutation overrides here */
:root {
--keep: #777777;
}

68
assets/css/themes/dark-silver.css Normal file
View file

@ -0,0 +1,68 @@
@import "themes/base/dark";
$background-color: #17181a;
$page-background-color: #0c0c0c;
$foreground-color: #e0e0e0;
$base-color: #6a7280;
$primary-light-color: #4c555b;
$success-light-color: #144714;
$danger-light-color: #66211f;
$warning-light-color: #7d4825;
$destroyed-content-color: #382c2f;
$meta-color: #1c1e22;
$header-color: #171a1d;
$header-field-color: #2e3439;
$header-secondary-color: #262828;
$header-admin-color: #3b1d1d;
$block-header-color: #262828;
$block-header-link-text-color: #aec5d5;
$block-header-light-color: #262828;
$block-header-light-link-text-color: #aec5d5;
$border-color: #262828;
$media-box-color: #444444;
$link-color: #aec5d5;
$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: #38385a;
$image-overlay-color: #ffffff;
$image-overlay-background-color: #000000;
@mixin dark-theme-mutations;
/* put mutation overrides here */
:root {
--keep: #888888;
}

68
assets/css/themes/dark-yellow.css Normal file
View file

@ -0,0 +1,68 @@
@import "themes/base/dark";
$background-color: #2f281d;
$page-background-color: #1c1a0d;
$foreground-color: #e0e0e0;
$base-color: #999254;
$primary-light-color: #6b5f1a;
$success-light-color: #144714;
$danger-light-color: #66211f;
$warning-light-color: #7d4825;
$destroyed-content-color: #382c2f;
$meta-color: #2a2919;
$header-color: #857604;
$header-field-color: #52491c;
$header-secondary-color: #4f420a;
$header-admin-color: #400d0d;
$block-header-color: #4f420a;
$block-header-link-text-color: #ffdc18;
$block-header-light-color: #4f420a;
$block-header-light-link-text-color: #ffdc18;
$border-color: #4f420a;
$media-box-color: #504d31;
$link-color: #ffdc18;
$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;
@mixin dark-theme-mutations;
/* put mutation overrides here */
:root {
--keep: #999999;
}

193
assets/css/themes/dark.scss
View file

@ -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";

183
assets/css/themes/default.scss
View file

@ -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";

52
assets/css/themes/light-blue.css Normal file
View file

@ -0,0 +1,52 @@
/* As originally seen on Derpibooru
* Inspired by Trixie (My Little Pony character) colors
*/
@import "themes/base/light";
$background-color: #ffffff;
$page-background-color: #f8fafc;
$foreground-color: #333333;
$base-color: #62a7d9;
$primary-color: #c1e4f9;
$success-color: #bde9a3;
$danger-color: #ebc0bb;
$warning-color: #eee9bc;
$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;
@mixin light-theme-mutations;
/* put mutation overrides here */
:root {
--keep: #000000;
}

49
assets/css/themes/light-cyan.css Normal file
View file

@ -0,0 +1,49 @@
@import "themes/base/light";
$background-color: #ffffff;
$page-background-color: #f8fafc;
$foreground-color: #333333;
$base-color: #40c5c9;
$primary-color: #c1f6f9;
$success-color: #bde9a3;
$danger-color: #ebc0bb;
$warning-color: #eee9bc;
$link-color: #10a3ad;
$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;
@mixin light-theme-mutations;
/* put mutation overrides here */
:root {
--keep: #aaaaaa;
}

50
assets/css/themes/light-green.css Normal file
View file

@ -0,0 +1,50 @@
/* As originally seen on Manebooru */
@import "themes/base/light";
$background-color: #ffffff;
$page-background-color: #f8fafc;
$foreground-color: #333333;
$base-color: #50c878;
$primary-color: #baf4c2;
$success-color: #bde9a3;
$danger-color: #ebc0bb;
$warning-color: #eee9bc;
$link-color: #015a02;
$link-hover-color: #13bb16;
$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;
@mixin light-theme-mutations;
/* put mutation overrides here */
:root {
--comment-color: #9273d0;
}

49
assets/css/themes/light-orange.css Normal file
View file

@ -0,0 +1,49 @@
@import "themes/base/light";
$background-color: #ffffff;
$page-background-color: #f8fafc;
$foreground-color: #333333;
$base-color: #d98e62;
$primary-color: #f9d6c1;
$success-color: #bde9a3;
$danger-color: #ebbbbb;
$warning-color: #eee9bc;
$link-color: #d97441;
$link-hover-color: #d0b173;
$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;
@mixin light-theme-mutations;
/* put mutation overrides here */
:root {
--comment-color: #9273d0;
}

49
assets/css/themes/light-pink.css Normal file
View file

@ -0,0 +1,49 @@
@import "themes/base/light";
$background-color: #ffffff;
$page-background-color: #f8fafc;
$foreground-color: #333333;
$base-color: #d962bf;
$primary-color: #f9c1f4;
$success-color: #bde9a3;
$danger-color: #ebc0bb;
$warning-color: #eee9bc;
$link-color: #d941c0;
$link-hover-color: #9273d0;
$fave-color: #c4b246;
$vote-up-color: #67af2b;
$vote-down-color: #cf0001;
$hide-color: #cf0001;
$destroyed-content-color: #ffdcdc;
$assistant-color: #cfceee;
$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;
@mixin light-theme-mutations;
/* put mutation overrides here */
:root {
--keep: #dddddd;
}

49
assets/css/themes/light-purple.css Normal file
View file

@ -0,0 +1,49 @@
@import "themes/base/light";
$background-color: #ffffff;
$page-background-color: #f8fafc;
$foreground-color: #333333;
$base-color: #a362d9;
$primary-color: #dec1f9;
$success-color: #bde9a3;
$danger-color: #ebc0bb;
$warning-color: #eee9bc;
$link-color: #9241d9;
$link-hover-color: #cf73d0;
$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;
@mixin light-theme-mutations;
/* put mutation overrides here */
:root {
--keep: #eeeeee;
}

50
assets/css/themes/light-red.css Normal file
View file

@ -0,0 +1,50 @@
@import "themes/base/light";
$background-color: #ffffff;
$page-background-color: #f8fafc;
$foreground-color: #333333;
$base-color: #d96262;
$primary-color: #f9c6c1;
$success-color: #bde9a3;
$danger-color: #ebbbbb;
$warning-color: #eee9bc;
$link-color: #d94141;
$link-hover-color: #944563;
$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;
@mixin light-theme-mutations;
/* put mutation overrides here */
:root {
--header-admin-color: hsl(from $foreground-color h s calc(l + 60));
--header-admin-hover-color: hsl(from $foreground-color h s calc(l + 50));
}

59
assets/css/themes/light-silver.css Normal file
View file

@ -0,0 +1,59 @@
@import "themes/base/light";
$background-color: #ffffff;
$page-background-color: #f8fafc;
$foreground-color: #333333;
$base-color: #a1aab7;
$primary-color: #d7e2e8;
$success-color: #bde9a3;
$danger-color: #ebc0bb;
$warning-color: #eee9bc;
$link-color: #3e7da1;
$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;
@mixin light-theme-mutations;
/* put mutation overrides here */
:root {
--block-header-color: hsl(from $base-color h s calc(l + 15));
--block-header-hover-color: hsl(from $base-color h calc(s - 5) calc(l + 5));
--block-header-link-text-color: hsl(from $base-color h calc(s + 5) calc(l - 30));
--block-header-link-text-hover-color: hsl(from $base-color h s calc(l - 30));
--block-header-light-color: hsl(from $base-color h calc(s - 16) calc(l + 22));
--block-header-light-hover-color: hsl(from $base-color h calc(s - 25) calc(l + 12));
--block-header-light-link-text-color: hsl(from $base-color h calc(s - 16) calc(l - 11));
--block-header-light-link-text-hover-color: hsl(from $base-color h calc(s - 16) calc(l - 21));
--border-color: hsl(from $base-color h calc(s - 16) calc(l + 15));
--media-box-color: hsl(from $base-color h calc(s - 26) calc(l + 20));
--media-box-hover-color: hsl(from $base-color h calc(s - 20) calc(l + 14));
}

49
assets/css/themes/light-yellow.css Normal file
View file

@ -0,0 +1,49 @@
@import "themes/base/light";
$background-color: #ffffff;
$page-background-color: #f8fafc;
$foreground-color: #333333;
$base-color: #b8a93c;
$primary-color: #f9f0ab;
$success-color: #bde9a3;
$danger-color: #ebc0bb;
$warning-color: #eed0bc;
$link-color: #aa9812;
$link-hover-color: #d09873;
$fave-color: #ab9517;
$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;
@mixin light-theme-mutations;
/* put mutation overrides here */
:root {
--comment-color: #9273d0;
}

195
assets/css/themes/red.scss
View file

@ -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";

30
assets/css/views/_adverts.scss
View file

@ -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;
}

31
assets/css/views/_filters.scss
View file

@ -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;
}

325
assets/css/views/_images.scss
View file

@ -1,325 +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;
img,
video {
vertical-align: middle;
max-width: 100%;
max-height: 100%;
}
/* Make the link cover the whole container if the image is oblong */
a, picture, video {
width: 100%;
height: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
/* 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;
}

15
assets/css/views/_posts.scss
View file

@ -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;
}

222
assets/css/views/_tags.scss
View file

@ -1,222 +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;
z-index: 999;
}
.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;
}
.tag-list {
display: flex;
flex-wrap: wrap;
}
.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;
}

32
assets/css/views/adverts.css Normal file
View file

@ -0,0 +1,32 @@
#imagespns {
border: var(--border);
padding: 2px 10px;
background: var(--background-odd-color);
text-align: center;
}
#imagespns .subtext {
font-size: 10px;
}
#imagespns .spnstxt {
font-size: 10px;
text-transform: uppercase;
color: var(--foreground-half-color);
margin: 2px;
margin-bottom: 4px;
}
#imagespns img {
max-width: 100%;
height: auto;
}
#imagespns__link {
display: flex;
justify-content: center;
}
.table--adverts__image {
width: 730px;
}

11
assets/css/views/_approval.scss → assets/css/views/approval.css
View file

@ -37,13 +37,12 @@
line-height: 100%;
}
@media (max-width: $min_px_width_for_desktop_layout) {
@media (max-width: $min-desktop-width) {
.approval-grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas:
"main"
"footer";
grid-template:
"main" auto
"footer" auto
/ 1fr;
}
.approval-items--main {

1
assets/css/views/_badges.scss → assets/css/views/badges.css
View file

@ -1,4 +1,3 @@
.badge {
display: inline-block;
line-height: 16px;

0
assets/css/views/_channels.scss → assets/css/views/channels.css
View file

3
assets/css/views/_comments.scss → assets/css/views/comments.css
View file

@ -1,10 +1,9 @@
.fetched-comment {
margin-bottom: -1px; /* collapse block borders */
}
.comment_deleted {
color: $vote_down_color;
color: var(--vote-down-color);
}
.comment_under_review {

14
assets/css/views/_commissions.scss → assets/css/views/commissions.css
View file

@ -1,5 +1,4 @@
// Category Tag
/* Category Tag */
.commission__category {
border: 1px solid;
display: inline-block;
@ -8,9 +7,9 @@
margin-bottom: 5px;
margin-right: 5px;
padding: 5px;
background: $commission_category_background;
border-color: $commission_category_border;
color: $commission_category_color;
background: var(--commission-category-background);
border-color: var(--commission-category-border);
color: var(--commission-category-color);
}
.commission__block_body {
@ -34,5 +33,8 @@
word-wrap: break-word;
margin-top: 3px;
margin-bottom: 6px;
img { max-width: 100%; }
}
.commission__listing__body_text img {
max-width: 100%;
}

43
assets/css/views/_communications.scss → assets/css/views/communications.css
View file

@ -1,4 +1,3 @@
td.table--communication-list__name {
font-size: 18px;
}
@ -13,7 +12,7 @@ td.table--communication-list__options {
}
.communication:target {
border: 1px solid $input_border_active;
border: 1px solid var(--input-border-active);
}
.communication__body {
@ -30,7 +29,10 @@ span.communication__body__sender-name {
margin-top: 3px;
margin-bottom: 6px;
line-height: 1.35em;
img { max-width: 100%; }
}
.communication__body__text img {
max-width: 100%;
}
span.communication__sender__stats,
@ -39,8 +41,8 @@ span.communication__sender__stats,
}
.communication__options {
background: $background_odd_color;
border-top: $border;
background: var(--background-odd-color);
border-top: var(--border);
}
.communication__interaction {
@ -71,26 +73,29 @@ span.communication__sender__stats,
}
.communication__toolbar__button {
background-color: $meta_color;
border: 1px solid $meta_border_color;
color: $foreground_color;
background-color: var(--meta-color);
border: 1px solid var(--meta-border-color);
color: var(--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{
.communication__toolbar__button:hover {
background-color: var(--input-color-active);
}
.communication__toolbar__button:focus,
.communication__toolbar__button:hover,
.communication__toolbar__button:active,
.communication__toolbar__button:visited {
border-color: var(--input-border-active);
outline: 0;
}
.hyphenate-breaks {
hyphens: auto;
}
@ -100,5 +105,5 @@ span.communication__sender__stats,
}
.communication--destroyed {
background-color: $destroyed_content_color;
background-color: var(--destroyed-content-color);
}

25
assets/css/views/_duplicate_reports.scss → assets/css/views/duplicates.css
View file

@ -1,23 +1,14 @@
// 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;
padding: 0.5em 0.25em;
}
.dr__image-cell {
.image-container {
@include img-checkerboard-background;
}
.dr__image-cell .image-container {
@mixin img-checkerboard-background;
}
.dr__diff {
@ -25,14 +16,16 @@
}
.dr__status-options {
padding: .5em;
padding: 0.5em;
}
.report-duplicate {
margin-top: 1em;
}
.difference, .swipe, .onion-skin {
.difference,
.swipe,
.onion-skin {
display: flex;
flex-direction: column;
align-items: center;
@ -48,6 +41,8 @@
cursor: ew-resize;
}
.difference__image, .swipe__image, .onion-skin__image {
.difference__image,
.swipe__image,
.onion-skin__image {
max-height: 900px;
}

27
assets/css/views/filters.css Normal file
View file

@ -0,0 +1,27 @@
/* TODO: -> block */
/* FIXME: ugly selectors (.filter .filter-options ul li a:hover) */
.filter {
background: var(--background-odd-color);
border: var(--border);
padding-left: var(--header-spacing);
margin-bottom: 8px;
}
.filter h3 {
margin: 0;
margin-top: 10px;
}
.filter .filter-options ul {
list-style: none;
padding-left: 2px;
}
.filter .filter-options ul li {
display: inline;
margin-right: 20px;
}
.spoiler-filter-code {
white-space: pre-wrap;
}

62
assets/css/views/_galleries.scss → assets/css/views/galleries.css
View file

@ -1,14 +1,5 @@
.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;
background: var(--primary-color);
}
/* Make it clear that the extra images are not truly part of the page. */
@ -17,47 +8,52 @@
opacity: 0.4;
}
/* 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;
}
.input--search-gallery-list {
border: $border;
border: var(--border);
width: 250px;
padding: 0 4px;
line-height: 28px;
font-family: $font_family_base;
font-family: var(--font-family-base);
}
.input--search-gallery-list, .add-to-gallery-list ul a.block__list__link {
.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;
}
.add-to-gallery-list ::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px #cccccc;
background-color: var(--background-color);
}
::-webkit-scrollbar
{
width: 6px;
background-color: $background_color;
}
.add-to-gallery-list ::-webkit-scrollbar {
width: 6px;
background-color: var(--background-color);
}
::-webkit-scrollbar-thumb
{
background-color: $primary_color;
}
.add-to-gallery-list ::-webkit-scrollbar-thumb {
background-color: var(--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 */
}
.add-to-gallery-list ul {
max-height: 132px;
overflow: hidden auto; /* 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 */
}

317
assets/css/views/images.css Normal file
View file

@ -0,0 +1,317 @@
.image-flex-grid {
padding-right: 0;
padding-bottom: 0;
}
.media-box__header span.favorites,
.media-box__header span.comments_count {
padding-left: 4px;
}
.media-box__header span.score {
padding: 0 4px;
}
.media-box__header--small span.favorites,
.media-box__header--small span.comments_count {
padding-left: 2px;
}
.media-box__header--small span.score {
padding: 0 2px;
}
@define-mixin interaction-color $name, $col {
a.interaction--$(name) {
color: var(--$(col)-color);
}
a.interaction--$(name).active,
a.interaction--$(name):hover {
background: var(--$(col)-color);
color: var(--link-light-color);
}
}
@mixin interaction-color fave, fave;
@mixin interaction-color upvote, vote-up;
@mixin interaction-color downvote, vote-down;
@mixin interaction-color hide, hide;
a.interaction--comments {
color: var(--comment-color);
}
a.interaction--comments:hover {
background: var(--comment-color);
color: var(--background-color);
}
/* Disable spoilered image downvoting (see the interactions script) */
.interaction--downvote.disabled,
.interaction--downvote.disabled:hover {
cursor: default;
color: var(--downvote-disabled-color);
background: var(--media-box-color);
}
.tag-info__image {
border: var(--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;
}
/* 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: var(--foreground-color);
display: inline-block;
max-width: 100%;
padding-bottom: 6px;
}
.image-show-container span.spoileredtag,
.image-show-container span.hiddentag {
font-weight: bold;
}
.image-show-container a {
color: var(--image-show-link-color);
}
.dnp-warning a {
color: var(--vote-down-color);
font-weight: bold;
}
/* Make the link cover the whole container if the image is oblong */
div.image-container a,
div.image-container picture,
div.image-container video {
width: 100%;
height: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.dnp-warning a:hover {
color: var(--dnp-warning-hover-color);
}
.image-show-container:hover a:hover {
color: var(--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;
}
.image-constrained 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-desktop-width) {
.image-scaled {
max-height: 80vh;
}
}
.image-partscaled {
max-width: 100%;
}
.image-description {
overflow: auto;
}
.image-description img {
max-width: 100%;
}
.image-size {
white-space: nowrap;
}
.js-source-link {
word-wrap: break-word;
}
div.image-container img,
div.image-container video {
vertical-align: middle;
max-width: 100%;
max-height: 100%;
}
#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;
}
.horizontal-list {
margin: 0;
padding-left: 0;
list-style: none;
}
.horizontal-list li {
display: inline-block;
}
.horizontal-list li + li {
margin-left: 1em;
}
.dnp-warning {
padding: 0.5em;
border: 3px solid var(--vote-down-color);
background: var(--admin-links-color);
}
.dnp-warning 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;
}
#js-image-upload-previews:empty {
display: none;
}
#js-image-upload-previews img,
#js-image-upload-previews video {
max-height: 200px;
max-width: 200px;
}
#js-image-upload-previews .scraper-preview--label {
cursor: pointer;
margin: 0 8px 8px 0;
}
#js-image-upload-previews .scraper-preview--label .scraper-preview--image-wrapper {
display: inline-block;
padding: 9px;
border: 1px solid transparent;
opacity: 0.6;
}
#js-image-upload-previews .scraper-preview--label .scraper-preview--image {
background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxyZWN0IGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIvPjxyZWN0IGZpbGw9IiNFRkVGRUYiIHdpZHRoPSI4IiBoZWlnaHQ9IjgiLz48cmVjdCBmaWxsPSIjRUZFRkVGIiB3aWR0aD0iOCIgaGVpZ2h0PSI4IiB4PSI4IiB5PSI4Ii8+PC9zdmc+Cg==")
repeat top left;
background-size: 16px;
}
#js-image-upload-previews .scraper-preview--label .scraper-preview--input {
display: none;
}
#js-image-upload-previews .scraper-preview--label.checked > .scraper-preview--image-wrapper,
#js-image-upload-previews .scraper-preview--label .scraper-preview--input:checked + .scraper-preview--image-wrapper {
opacity: 1;
border-color: var(--input-border-active);
background-color: var(--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;
}

0
assets/css/views/_notifications.scss → assets/css/views/notifications.css
View file

2
assets/css/views/_pages.scss → assets/css/views/pages.css
View file

@ -5,6 +5,6 @@
}
.static-page__diff {
font-family: $font_family_monospace;
font-family: var(--font-family-monospace);
white-space: pre-wrap;
}

24
assets/css/views/_pagination.scss → assets/css/views/pagination.css
View file

@ -9,9 +9,9 @@
text-overflow: ellipsis;
}
.page__title, .page__pagination {
.page__title,
.page__pagination {
flex-shrink: 0;
display: block;
box-sizing: border-box;
max-width: 100%;
@ -21,12 +21,15 @@
min-width: 4em;
}
@media (max-width: $min_px_width_for_desktop_thumb) {
.page__title, .page__options {
@media (max-width: $min-desktop-thumb-width) {
.page__title,
.page__options {
display: none;
}
.page__header, .page__pagination, .page__info {
.page__header,
.page__pagination,
.page__info {
display: block;
text-align: center;
}
@ -34,11 +37,12 @@
.page__pagination nav {
display: flex;
width: 100%;
}
a, span {
text-align: center;
flex: 1 1 auto;
padding: 0 1vw;
}
.page__pagination nav a,
.page__pagination nav span {
text-align: center;
flex: 1 1 auto;
padding: 0 1vw;
}
}

31
assets/css/views/_polls.scss → assets/css/views/polls.css
View file

@ -1,12 +1,11 @@
.poll {
margin-bottom: 1em;
}
.poll-area {
border: 1px solid $border_color;
background: $background_color;
color: $foreground_color;
border: 1px solid var(--border-color);
background: var(--background-color);
color: var(--foreground-color);
padding: 10px;
}
@ -21,7 +20,8 @@
text-align: center;
}
.poll-vote-form, .poll-results {
.poll-vote-form,
.poll-results {
display: flex;
flex-flow: column nowrap;
align-items: center;
@ -35,8 +35,8 @@
.poll-form__options__label {
padding: 5px;
margin: 5px;
border: 1px solid $border_color;
background: $poll_form_label_background;
border: 1px solid var(--border-color);
background: var(--poll-form-label-background);
display: flex;
flex-flow: row nowrap;
align-items: center;
@ -49,7 +49,8 @@
word-break: break-word;
}
.poll-form__status, .poll-results__concluded-at {
.poll-form__status,
.poll-results__concluded-at {
margin-top: 5px;
text-align: center;
}
@ -76,7 +77,7 @@
}
.poll-option--top__text {
color: $header_color;
color: var(--header-color);
}
.poll-option--top,
@ -102,8 +103,8 @@
.poll-bar {
flex: 1 0 100%;
height: 4px;
border: 1px solid $border_color;
background: $background_color;
border: 1px solid var(--border-color);
background: var(--background-color);
margin-top: 5px;
user-select: none;
}
@ -112,16 +113,16 @@
display: block;
}
.poll-bar__fill {
fill: $header_color;
.poll-bar__fill {
fill: var(--header-color);
}
.poll-bar__fill--top {
fill: $foreground_color;
fill: var(--foreground-color);
}
#add-poll {
margin-top:.5em;
margin-top: 0.5em;
}
#delete-poll-form {

10
assets/css/views/posts.css Normal file
View file

@ -0,0 +1,10 @@
/* Post diffs */
del.differ {
width: 670px;
background: var(--danger-light-color);
}
ins.differ {
width: 670px;
background: var(--success-light-color);
}

63
assets/css/views/_profiles.scss → assets/css/views/profiles.css
View file

@ -1,4 +1,3 @@
.profile-top {
display: flex;
margin-bottom: 6px;
@ -9,11 +8,11 @@
}
.profile-top__name-and-links {
// Allow options extra space on high width even when name is short
/* 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
/* Lessen h1's margins because it's not butting up against text */
h1.profile-top__name-header {
margin-top: 10px;
margin-bottom: 0;
@ -21,8 +20,10 @@ h1.profile-top__name-header {
.table--stats {
min-width: 220px;
}
@media (max-width: 900px) {
@media (max-width: 900px) {
.table--stats {
margin-left: 0;
}
}
@ -46,7 +47,7 @@ td.table--stats__sparkline {
.profile-top__options__column {
flex: 0 0 auto;
// Override terrible browser styling
/* Override terrible browser styling */
list-style: none;
padding: 0;
margin: 0.5em 2em 0.5em 0;
@ -58,28 +59,28 @@ td.table--stats__sparkline {
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 li {
padding: 6px;
background: var(--header-secondary-color);
margin: 4px 0;
}
.profile-admin__options__column li:hover {
background: var(--header-secondary-hover-color);
}
.profile-admin__options__column a {
display: block;
color: var(--foreground-color) !important;
}
.profile-admin__options__column .admin__button {
margin-left: 4px;
}
@media (max-width: $min-desktop-width) {
.profile-admin__options__column {
width: 100%;
}
@ -92,14 +93,14 @@ td.table--stats__sparkline {
.banner__2fa {
margin-left: 8px;
padding: 2px;
}
.success {
background: $success_color;
}
.banner__2fa .success {
background: var(--success-color);
}
.danger {
background: $danger_color;
}
.banner__2fa .danger {
background: var(--danger-color);
}
.enable-2fa {

0
assets/css/views/_search.scss → assets/css/views/search.css
View file

5
assets/css/views/_staff.scss → assets/css/views/staff.css
View file

@ -23,7 +23,10 @@
.profile-block {
display: inline-block;
vertical-align: top;
b { display: block; }
}
.profile-block b {
display: block;
}
.staff-block__description {

2
assets/css/views/_stats.scss → assets/css/views/stats.css
View file

@ -1,5 +1,5 @@
.upload-stats rect {
fill: $sparkline_color;
fill: var(--sparkline-color);
}
.upload-stats rect:hover {

162
assets/css/views/tags.css Normal file
View file

@ -0,0 +1,162 @@
/* Tagsinput */
.tagsinput {
display: block;
background: var(--background-color);
border: 1px solid var(--meta-border-color);
box-sizing: border-box;
height: 10.6em;
overflow: auto;
padding: 5px;
resize: both;
}
.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;
z-index: 999;
}
.autocomplete__item {
background: var(--base-color);
color: var(--link-light-color);
padding: 5px;
}
.autocomplete__item--selected {
background: var(--link-light-color);
color: var(--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;
background: var(--tag-normal-background);
border-color: var(--tag-normal-border);
color: var(--tag-normal-color);
}
.tag > span {
padding: 5px;
display: table-cell;
}
.tag-list {
display: flex;
flex-wrap: wrap;
}
.tag a {
color: inherit;
}
.tag__count {
background-color: var(--tag-normal-border);
color: var(--foreground-color);
font-weight: normal;
}
.tag__dropdown__link {
background-color: var(--meta-color);
padding: 5px;
}
.tag__dropdown__link:hover {
background-color: var(--tag-dropdown-hover-background);
}
@define-mixin tag-category $cat {
.tag[data-tag-category="$(cat)"] {
background: var(--tag-category-$(cat)-background);
border-color: var(--tag-category-$(cat)-border);
color: var(--tag-category-$(cat)-color);
}
.tag[data-tag-category="$(cat)"] .tag__count {
background: var(--tag-category-$(cat)-border);
}
}
@mixin tag-category rating;
@mixin tag-category spoiler;
@mixin tag-category origin;
@mixin tag-category oc;
@mixin tag-category error;
@mixin tag-category character;
@mixin tag-category content-official;
@mixin tag-category content-fanmade;
@mixin tag-category species;
@mixin tag-category body-type;
.tag-page .tag,
.tagsinput .tag {
font-family: var(--font-family-base);
padding: 5px;
}
.tagsinput .tag a {
margin-left: 5px;
}
/* Quick Tag Table */
.quick-tag-table__tab > div {
display: inline-block;
padding: 0 6px;
vertical-align: top;
border-right: var(--border);
border-left: var(--border);
}
.quick-tag-table__tab > div:last-child {
border-right: none;
}
span.quick-tag-table__tab-separator {
background: var(--background-color);
border: var(--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;
}

10
assets/js/app.ts
View file

@ -13,7 +13,9 @@ import './when-ready';
// in order to enable HMR (live reload) on it.
// Would typically be either the theme file, or any additional file
// you later intend to put in the <link> tag.
// import '../css/themes/default.scss';
// import '../css/themes/dark.scss';
// import '../css/themes/red.scss';
//
// For example, if you'd like to work on the dark blue theme,
// import the following:
//
// import '../css/application.css';
// import '../css/themes/dark-blue.css';

22
assets/js/settings.ts
View file

@ -10,8 +10,12 @@ export function setupSettings() {
if (!$('#js-setting-table')) return;
const localCheckboxes = $$<HTMLInputElement>('[data-tab="local"] input[type="checkbox"]');
const themeSelect = $<HTMLSelectElement>('#user_theme');
const styleSheet = assertNotNull($<HTMLLinkElement>('head link[rel="stylesheet"]'));
const themeSelect = assertNotNull($<HTMLSelectElement>('#user_theme_name'));
const themeColorSelect = assertNotNull($<HTMLSelectElement>('#user_theme_color'));
const themePaths: Record<string, string> = JSON.parse(
assertNotUndefined(assertNotNull($<HTMLDivElement>('#js-theme-paths')).dataset.themePaths),
);
const styleSheet = assertNotNull($<HTMLLinkElement>('#js-theme-stylesheet'));
// Local settings
localCheckboxes.forEach(checkbox => {
@ -21,9 +25,13 @@ export function setupSettings() {
});
// Theme preview
if (themeSelect) {
themeSelect.addEventListener('change', () => {
styleSheet.href = assertNotUndefined(themeSelect.options[themeSelect.selectedIndex].dataset.themePath);
});
}
const themePreviewCallback = () => {
const themeName = assertNotUndefined(themeSelect.options[themeSelect.selectedIndex].value);
const themeColor = assertNotUndefined(themeColorSelect.options[themeColorSelect.selectedIndex].value);
styleSheet.href = themePaths[`${themeName}-${themeColor}`];
};
themeSelect.addEventListener('change', themePreviewCallback);
themeColorSelect.addEventListener('change', themePreviewCallback);
}

4652
assets/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

44
assets/package.json
View file

@ -2,7 +2,7 @@
"type": "module",
"scripts": {
"deploy": "cross-env NODE_ENV=production tsc && cross-env NODE_ENV=production vite build",
"lint": "eslint .",
"lint": "eslint . && stylelint ./css/**/*.css",
"test": "vitest run --coverage",
"test:watch": "vitest watch --coverage",
"dev": "vite",
@ -10,30 +10,36 @@
"preview": "vite preview"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^6.5.2",
"@types/web": "^0.0.148",
"autoprefixer": "^10.4.19",
"@csstools/postcss-relative-color-syntax": "^3.0.6",
"@fortawesome/fontawesome-free": "^6.7.1",
"@types/postcss-mixins": "^9.0.6",
"@types/web": "^0.0.185",
"autoprefixer": "^10.4.20",
"cross-env": "^7.0.3",
"eslint": "^9.4.0",
"jest-environment-jsdom": "^29.7.0",
"normalize-scss": "^8.0.0",
"sass": "^1.75.0",
"typescript": "^5.4",
"typescript-eslint": "8.0.0-alpha.39",
"vite": "^5.4"
"normalize.css": "^8.0.1",
"postcss-mixins": "^11.0.3",
"postcss-simple-vars": "^7.0.1",
"typescript": "^5.7.2",
"vite": "^6.0.2"
},
"devDependencies": {
"@testing-library/dom": "^10.1.0",
"@testing-library/jest-dom": "^6.4.6",
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.6.3",
"@types/chai-dom": "^1.11.3",
"@vitest/coverage-v8": "^1.6.0",
"@vitest/coverage-v8": "^2.1.8",
"chai": "^5",
"eslint": "^9.16.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-vitest": "^0.5.4",
"jsdom": "^24.1.0",
"prettier": "^3.3.2",
"vitest": "^1.6.0",
"vitest-fetch-mock": "^0.2.2"
"jest-environment-jsdom": "^29.7.0",
"jsdom": "^25.0.1",
"prettier": "^3.4.2",
"stylelint": "^16.11.0",
"stylelint-config-standard": "^36.0.1",
"stylelint-prettier": "^5.0.2",
"typescript-eslint": "8.17.0",
"vitest": "^2.1.8",
"vitest-fetch-mock": "^0.4.2"
}
}

30
assets/vite.config.ts
View file

@ -2,25 +2,26 @@
import fs from 'fs';
import path from 'path';
import autoprefixer from 'autoprefixer';
import postcssMixins from 'postcss-mixins';
import postcssSimpleVars from 'postcss-simple-vars';
import postcssRelativeColor from '@csstools/postcss-relative-color-syntax';
import { defineConfig, UserConfig, ConfigEnv } from 'vite';
export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
const isDev = command !== 'build' && mode !== 'test';
const targets = new Map();
const themeNames = fs.readdirSync(path.resolve(__dirname, 'css/themes/')).map(name => {
const m = name.match(/([-a-z]+).scss/);
fs.readdirSync(path.resolve(__dirname, 'css/themes/')).forEach(name => {
const m = name.match(/([-a-z]+).css/);
if (m) {
return m[1];
}
return null;
if (m) targets.set(`css/${m[1]}`, `./css/themes/${m[1]}.css`);
});
const themes = new Map();
fs.readdirSync(path.resolve(__dirname, 'css/options/')).forEach(name => {
const m = name.match(/([-a-z]+).css/);
for (const name of themeNames) {
themes.set(`css/${name}`, `./css/themes/${name}.scss`);
}
if (m) targets.set(`css/options/${m[1]}`, `./css/options/${m[1]}.css`);
});
return {
publicDir: 'static',
@ -33,6 +34,8 @@ export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
alias: {
common: path.resolve(__dirname, 'css/common/'),
views: path.resolve(__dirname, 'css/views/'),
elements: path.resolve(__dirname, 'css/elements/'),
themes: path.resolve(__dirname, 'css/themes/'),
},
},
build: {
@ -45,7 +48,8 @@ export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
rollupOptions: {
input: {
'js/app': './js/app.ts',
...Object.fromEntries(themes),
'css/application': './css/application.css',
...Object.fromEntries(targets),
},
output: {
entryFileNames: '[name].js',
@ -56,19 +60,19 @@ export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
},
css: {
postcss: {
plugins: [autoprefixer],
plugins: [postcssMixins(), postcssSimpleVars(), postcssRelativeColor(), autoprefixer],
},
},
test: {
globals: true,
environment: 'jsdom',
exclude: ['**/node_modules/**', '.*\\.test\\.ts$', '.*\\.d\\.ts$', '.*\\.spec\\.ts$'],
// TODO Jest --randomize CLI flag equivalent, consider enabling in the future
// sequence: { shuffle: true },
setupFiles: './test/vitest-setup.ts',
coverage: {
reporter: ['text', 'html'],
include: ['js/**/*.{js,ts}'],
exclude: ['node_modules/', '.*\\.test\\.ts$', '.*\\.d\\.ts$'],
thresholds: {
statements: 0,
branches: 0,

5
lib/philomena/users/user.ex
View file

@ -347,7 +347,10 @@ defmodule Philomena.Users.User do
:show_sidebar_and_watched_images
])
|> TagList.propagate_tag_list(:watched_tag_list, :watched_tag_ids)
|> validate_inclusion(:theme, ~W(default dark red))
|> validate_inclusion(
:theme,
~W(dark-red dark-orange dark-yellow dark-blue dark-green dark-purple dark-cyan dark-pink dark-silver light-red light-orange light-yellow light-blue light-green light-purple light-cyan light-pink light-silver)
)
|> validate_inclusion(:images_per_page, 1..50)
|> validate_inclusion(:comments_per_page, 1..100)
|> validate_inclusion(:scale_large_images, ["false", "partscaled", "true"])

19
lib/philomena_web/controllers/setting_controller.ex
View file

@ -9,6 +9,7 @@ defmodule PhilomenaWeb.SettingController do
def edit(conn, _params) do
changeset =
(conn.assigns.current_user || %User{})
|> assign_theme()
|> TagList.assign_tag_list(:watched_tag_ids, :watched_tag_list)
|> Users.change_user()
@ -57,10 +58,26 @@ defmodule PhilomenaWeb.SettingController do
)
end
defp assign_theme(%{theme: theme} = user) do
[theme_name, theme_color] = String.split(theme, "-")
user
|> Map.put(:theme_name, theme_name)
|> Map.put(:theme_color, theme_color)
end
defp assign_theme(_), do: assign_theme(%{theme: "dark-blue"})
defp determine_theme(%{"theme_name" => name, "theme_color" => color} = attrs)
when name != nil and color != nil,
do: Map.put(attrs, "theme", "#{name}-#{color}")
defp determine_theme(attrs), do: Map.put(attrs, "theme", "dark-blue")
defp maybe_update_user(conn, nil, _user_params), do: {:ok, conn}
defp maybe_update_user(conn, user, user_params) do
case Users.update_settings(user, user_params) do
case Users.update_settings(user, determine_theme(user_params)) do
{:ok, _user} ->
{:ok, conn}

5
lib/philomena_web/templates/error/show.html.slime
View file

@ -8,8 +8,9 @@ html lang="en"
title
=> @status
| - Philomena
link rel="stylesheet" href=stylesheet_path(nil)
link rel="stylesheet" href=dark_stylesheet_path() media="(prefers-color-scheme: dark)"
link rel="stylesheet" href=~p"/css/application.css"
link rel="stylesheet" href=stylesheet_path(@conn, nil)
link rel="stylesheet" href=light_stylesheet_path(@conn) media="(prefers-color-scheme: light)"
link rel="icon" href="/favicon.ico" type="image/x-icon"
link rel="icon" href="/favicon.svg" type="image/svg+xml"

5
lib/philomena_web/templates/layout/app.html.slime
View file

@ -11,9 +11,10 @@ html lang="en"
- else
' Derpibooru
link rel="preconnect" href="https://#{cdn_host()}"
link rel="stylesheet" href=stylesheet_path(@current_user)
link rel="stylesheet" href=~p"/css/application.css"
link#js-theme-stylesheet rel="stylesheet" href=stylesheet_path(@conn, @current_user)
= if is_nil(@current_user) do
link rel="stylesheet" href=dark_stylesheet_path() media="(prefers-color-scheme: dark)"
link#js-theme-stylesheet rel="stylesheet" href=light_stylesheet_path(@conn) media="(prefers-color-scheme: light)"
link rel="icon" href="/favicon.ico" type="image/x-icon"
link rel="icon" href="/favicon.svg" type="image/svg+xml"
link rel="search" type="application/opensearchdescription+xml" title="Derpibooru" href="/opensearch.xml"

5
lib/philomena_web/templates/layout/two_factor.html.slime
View file

@ -6,8 +6,9 @@ html lang="en"
= viewport_meta_tag(@conn)
title Two Factor Authentication - Derpibooru
link rel="stylesheet" href=stylesheet_path(nil)
link rel="stylesheet" href=dark_stylesheet_path() media="(prefers-color-scheme: dark)"
link rel="stylesheet" href=~p"/css/application.css"
link rel="stylesheet" href=stylesheet_path(@conn, nil)
link rel="stylesheet" href=light_stylesheet_path(@conn) media="(prefers-color-scheme: light)"
link rel="icon" href="/favicon.ico" type="image/x-icon"
link rel="icon" href="/favicon.svg" type="image/svg+xml"

14
lib/philomena_web/templates/setting/edit.html.slime
View file

@ -78,10 +78,16 @@ h1 Content Settings
' This is the number of images per page that are displayed on image listings and searches, up to a maximum of 50.
' For 1080p monitors, try 24.
.field
=> label f, :theme
=> select f, :theme, theme_options(), class: "input"
= error_tag f, :theme
.fieldlabel: i Preview themes by selecting one from the dropdown. Saving sets the currently selected theme.
label> Theme
=> select f, :theme_name, themes(), class: "input"
= error_tag f, :theme_name
.fieldlabel: i General appearance of the theme
.field
label> Theme color
=> select f, :theme_color, theme_colors(), class: "input"
= error_tag f, :theme_color
.fieldlabel: i Color of the theme, don't forget to save settings to apply the theme
.hidden#js-theme-paths data-theme-paths=theme_paths_json()
.field
=> label f, :scale_large_images
=> select f, :scale_large_images, scale_options(), class: "input"

4
lib/philomena_web/views/error_view.ex
View file

@ -3,8 +3,8 @@ defmodule PhilomenaWeb.ErrorView do
import PhilomenaWeb.LayoutView,
only: [
stylesheet_path: 1,
dark_stylesheet_path: 0,
stylesheet_path: 2,
light_stylesheet_path: 1,
viewport_meta_tag: 1
]

32
lib/philomena_web/views/layout_view.ex
View file

@ -69,10 +69,34 @@ defmodule PhilomenaWeb.LayoutView do
Config.get(:footer)
end
def stylesheet_path(%{theme: "dark"}), do: ~p"/css/dark.css"
def stylesheet_path(%{theme: "red"}), do: ~p"/css/red.css"
def stylesheet_path(_user), do: ~p"/css/default.css"
def dark_stylesheet_path, do: ~p"/css/dark.css"
def stylesheet_path(conn, %{theme: theme})
when theme in [
"dark-red",
"dark-orange",
"dark-yellow",
"dark-blue",
"dark-green",
"dark-purple",
"dark-cyan",
"dark-pink",
"dark-silver",
"light-red",
"light-orange",
"light-yellow",
"light-blue",
"light-green",
"light-purple",
"light-cyan",
"light-pink",
"light-silver"
],
do: static_path(conn, "/css/#{theme}.css")
def stylesheet_path(_conn, _user),
do: ~p"/css/dark-blue.css"
def light_stylesheet_path(_conn),
do: ~p"/css/light-blue.css"
def theme_name(%{theme: theme}), do: theme
def theme_name(_user), do: "default"

48
lib/philomena_web/views/setting_view.ex
View file

@ -1,18 +1,50 @@
defmodule PhilomenaWeb.SettingView do
use PhilomenaWeb, :view
def theme_options do
def themes do
[
[
key: "Default",
value: "default",
data: [theme_path: ~p"/css/default.css"]
],
[key: "Dark", value: "dark", data: [theme_path: ~p"/css/dark.css"]],
[key: "Red", value: "red", data: [theme_path: ~p"/css/red.css"]]
Dark: "dark",
Light: "light"
]
end
def theme_colors do
[
Red: "red",
Orange: "orange",
Yellow: "yellow",
Green: "green",
Blue: "blue",
Purple: "purple",
Cyan: "cyan",
Pink: "pink",
"Silver/Charcoal": "silver"
]
end
def theme_paths_json do
Jason.encode!(%{
"dark-red": ~p"/css/dark-red.css",
"dark-orange": ~p"/css/dark-orange.css",
"dark-yellow": ~p"/css/dark-yellow.css",
"dark-blue": ~p"/css/dark-blue.css",
"dark-green": ~p"/css/dark-green.css",
"dark-purple": ~p"/css/dark-purple.css",
"dark-cyan": ~p"/css/dark-cyan.css",
"dark-pink": ~p"/css/dark-pink.css",
"dark-silver": ~p"/css/dark-silver.css",
"light-red": ~p"/css/light-red.css",
"light-orange": ~p"/css/light-orange.css",
"light-yellow": ~p"/css/light-yellow.css",
"light-blue": ~p"/css/light-blue.css",
"light-green": ~p"/css/light-green.css",
"light-purple": ~p"/css/light-purple.css",
"light-cyan": ~p"/css/light-cyan.css",
"light-pink": ~p"/css/light-pink.css",
"light-silver": ~p"/css/light-silver.css"
})
end
def scale_options do
[
[key: "Load full images on image pages", value: "false"],

15
priv/repo/migrations/20241216165826_convert_user_themes.exs Normal file
View file

@ -0,0 +1,15 @@
defmodule Philomena.Repo.Migrations.ConvertUserThemes do
use Ecto.Migration
def up do
execute("update users set theme = 'light-blue' where theme = 'default';")
execute("update users set theme = 'dark-blue' where theme = 'dark';")
execute("update users set theme = 'dark-red' where theme = 'red';")
end
def down do
execute("update users set theme = 'default' where theme like 'light%';")
execute("update users set theme = 'red' where theme = 'dark-red';")
execute("update users set theme = 'dark' where theme like 'dark%';")
end
end

5
priv/repo/structure.sql
View file

@ -2,8 +2,8 @@
-- PostgreSQL database dump
--
-- Dumped from database version 16.3
-- Dumped by pg_dump version 16.3
-- Dumped from database version 16.4
-- Dumped by pg_dump version 16.6
SET statement_timeout = 0;
SET lock_timeout = 0;
@ -5447,3 +5447,4 @@ INSERT INTO public."schema_migrations" (version) VALUES (20211219194836);
INSERT INTO public."schema_migrations" (version) VALUES (20220321173359);
INSERT INTO public."schema_migrations" (version) VALUES (20240723122759);
INSERT INTO public."schema_migrations" (version) VALUES (20240728191353);
INSERT INTO public."schema_migrations" (version) VALUES (20241216165826);