diff --git a/assets/.stylelintrc.yml b/assets/.stylelintrc.yml new file mode 100644 index 000000000..3de2a6581 --- /dev/null +++ b/assets/.stylelintrc.yml @@ -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 diff --git a/assets/css/application.css b/assets/css/application.css new file mode 100644 index 000000000..2f6aea6de --- /dev/null +++ b/assets/css/application.css @@ -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"; diff --git a/assets/css/common/_base.scss b/assets/css/common/_base.scss deleted file mode 100644 index 0b3452dde..000000000 --- a/assets/css/common/_base.scss +++ /dev/null @@ -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; -} diff --git a/assets/css/common/_blocks.scss b/assets/css/common/_blocks.scss deleted file mode 100644 index 44538285e..000000000 --- a/assets/css/common/_blocks.scss +++ /dev/null @@ -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 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; -} diff --git a/assets/css/common/_burger.scss b/assets/css/common/_burger.scss deleted file mode 100644 index f23c8224b..000000000 --- a/assets/css/common/_burger.scss +++ /dev/null @@ -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); } -} diff --git a/assets/css/common/_buttons.scss b/assets/css/common/_buttons.scss deleted file mode 100644 index 7f4da42f0..000000000 --- a/assets/css/common/_buttons.scss +++ /dev/null @@ -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; - } -} diff --git a/assets/css/common/_dimensions.scss b/assets/css/common/_dimensions.scss deleted file mode 100644 index e8151ba95..000000000 --- a/assets/css/common/_dimensions.scss +++ /dev/null @@ -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; -} diff --git a/assets/css/common/_global.scss b/assets/css/common/_global.scss deleted file mode 100644 index c23f1d37c..000000000 --- a/assets/css/common/_global.scss +++ /dev/null @@ -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; -} diff --git a/assets/css/common/_header.scss b/assets/css/common/_header.scss deleted file mode 100644 index 5b1598405..000000000 --- a/assets/css/common/_header.scss +++ /dev/null @@ -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 , 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; + } +} diff --git a/assets/css/common/_layout.scss b/assets/css/elements/layout.css similarity index 51% rename from assets/css/common/_layout.scss rename to assets/css/elements/layout.css index 1da114d86..367fa248a 100644 --- a/assets/css/common/_layout.scss +++ b/assets/css/elements/layout.css @@ -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__text { - flex: 1 0 30%; +.table-list__label .table-list__label__text { + flex: 1 0 30%; +} - @media (min-width: $min_px_width_for_desktop_layout) { - text-align: right; - } +@media (min-width: $min-desktop-width) { + .table-list__label .table-list__label__text { + 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; } diff --git a/assets/css/common/_media.scss b/assets/css/elements/media.css similarity index 62% rename from assets/css/common/_media.scss rename to assets/css/elements/media.css index 8baa84417..a4b4158c6 100644 --- a/assets/css/common/_media.scss +++ b/assets/css/elements/media.css @@ -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); } diff --git a/assets/css/elements/shame.css b/assets/css/elements/shame.css new file mode 100644 index 000000000..95518174f --- /dev/null +++ b/assets/css/elements/shame.css @@ -0,0 +1,6 @@ +/* For more shame related to this, see the