diff --git a/assets/css/application.scss b/assets/css/application.scss new file mode 100644 index 00000000..1e1db42c --- /dev/null +++ b/assets/css/application.scss @@ -0,0 +1,50 @@ +/* + * Main stylesheet file. + * + * This generates the base file for the stylesheets used throughout the project. + * Themes should be contained within the "themes" folder, and only contain + * color variations, and optional CSS changes. + * + */ + +$fa-font-path: '~@fortawesome/fontawesome-free/webfonts'; + +@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss"; +@import "~@fortawesome/fontawesome-free/scss/solid.scss"; +@import "~@fortawesome/fontawesome-free/scss/regular.scss"; +@import "~@fortawesome/fontawesome-free/scss/brands.scss"; +@import "~normalize-scss/sass/normalize/import-now"; + +// Import the default theme to act as a fallback. +@import "~themes/dark-blue"; + +// Files containing common properties, such as variable definitions. +@import "~common/measurements"; +@import "~common/mixins"; + +// General style elements that are used throughout the project. +@import "~elements/avatar"; +@import "~elements/base"; +@import "~elements/block"; +@import "~elements/button"; +@import "~elements/dropdown"; +@import "~elements/flash"; +@import "~elements/flex"; +@import "~elements/heading"; +@import "~elements/input"; +@import "~elements/interaction"; +@import "~elements/layout"; +@import "~elements/media"; +@import "~elements/mobile"; +@import "~elements/separator"; +@import "~elements/table"; + +// Style elements specific to certain pages. +@import "~views/burger"; +@import "~views/communication"; +@import "~views/header"; +@import "~views/metabar"; +@import "~views/pagination"; +@import "~views/statistics"; +@import "~views/tag"; +@import "~views/textile"; diff --git a/assets/css/common/_barline.scss b/assets/css/common/_barline.scss deleted file mode 100644 index 58b4292b..00000000 --- a/assets/css/common/_barline.scss +++ /dev/null @@ -1,13 +0,0 @@ -.sparkline { - display: flex; - height: 20px; - border-bottom: 1px solid $sparkline_color; -} - -.barline__bar { - fill: $sparkline_color; -} - -.barline__bar:hover { - fill: red; -} diff --git a/assets/css/common/_base.scss b/assets/css/common/_base.scss deleted file mode 100644 index 99ccfa6f..00000000 --- a/assets/css/common/_base.scss +++ /dev/null @@ -1,412 +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; -} - -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 { - hyphens: none; - margin-top: 4px; - margin-bottom: 6px; - margin-left: 2px; -} - -pre { - background-color: $meta_color; - padding: 10px; - font-size: 11px; - font-family: $font_family_monospace; -} - -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; -} - -#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%; - } -} - -//textile -blockquote { - margin: 1em 2em; - border: 1px dotted $foreground_color; - padding: 1em; - background-color: inherit; -} - -.spoiler { - background-color: $admin_links_hover_color; - color: $admin_links_hover_color; - - a { - color: $admin_links_hover_color; - } - - &: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; - } -} - -.spoiler, .spoiler-revealed { - .imgspoiler { - background-color: $admin_links_hover_color; - img { - visibility: hidden; - } - } - - .imgspoiler:hover, .imgspoiler-revealed { - background-color: $admin_links_color; - img { - visibility: visible; - } - } - - .imgspoiler, .imgspoiler-revealed { - display: inline-block; - max-width: 100%; - } -} - -.literal { - white-space: pre-wrap; -} - -.textile-syntax-reference { - margin-bottom: 6px; -} - -//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/badges"; -@import "~views/channels"; -@import "~views/comments"; -@import "~views/commissions"; -@import "~views/communications"; -@import "~views/duplicate_reports"; -@import "~views/filters"; -@import "~views/galleries"; -@import "~views/images"; -@import "~views/pages"; -@import "~views/polls"; -@import "~views/posts"; -@import "~views/profiles"; -@import "~views/pagination"; -@import "~views/search"; -@import "~views/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 62b7e074..00000000 --- a/assets/css/common/_blocks.scss +++ /dev/null @@ -1,224 +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/2; - padding-right: $header_spacing/2; - } -} - -.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 / 2) 0 $header_spacing; -} - -.block__header--light { - background: $block_header_light_color; - a, .header__span { - background: $block_header_light_color; - } - - a { - color: $block_header_light_link_text_color; - &:hover { - background: $block_header_light_hover_color; - color: $block_header_light_link_text_hover_color; - } - } -} - -.block__header--js-tabbed { - @extend .block__header--light; - background: transparent; - - border-bottom: $border; - a { - border-top: $border; - /* hide the bottom border for tab links */ - margin-bottom: -1px; - border-bottom: 1px solid $block_header_light_color; - } - a:hover { - border-color: $block_header_light_hover_color; - } - a:first-child { border-left: $border; } - a:last-child { border-right: $border; } - - a.selected, a.selected:hover { - cursor: default; - color: $foreground_color; - background: $background_color; - border-color: $block_header_light_color; - border-bottom: 1px solid $background_color; - } -} - -/* Fixed blocks do not have header and content */ -.block--fixed { - padding: 6px $header_spacing; - background: $background_color; - border: $border; - line-height: 1.35; -} - -.block--fixed--sub { - padding: 3px $header_spacing; -} - -.block--no-margin { - margin: 0; -} - -.block--success { - background: $success_light_color; - border-color: $success_color; -} - -.block--warning { - background: $warning_light_color; - border-color: $warning_color; -} - -.block--danger { - background: $danger_light_color; - border-color: $danger_color; -} - -.block--primary { - background: $primary_light_color; - border-color: $primary_color; -} - -/* 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; - } -} diff --git a/assets/css/common/_burger.scss b/assets/css/common/_burger.scss deleted file mode 100644 index f23c8224..00000000 --- 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 8598627b..00000000 --- a/assets/css/common/_buttons.scss +++ /dev/null @@ -1,91 +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--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; - } -} diff --git a/assets/css/common/_dimensions.scss b/assets/css/common/_dimensions.scss deleted file mode 100644 index d9a43ccf..00000000 --- a/assets/css/common/_dimensions.scss +++ /dev/null @@ -1,29 +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; - -$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) / 2; -$block_header_height: 32px; -$block_header_sub_height: 26px; -$block_spacing: 6px; -$media_box_header_height: 22px; diff --git a/assets/css/common/_dropdown.scss b/assets/css/common/_dropdown.scss deleted file mode 100644 index 30c06a50..00000000 --- a/assets/css/common/_dropdown.scss +++ /dev/null @@ -1,33 +0,0 @@ -.dropdown { - position: relative; - display: inline-block; -} - -.dropdown .dropdown__content { - position: absolute; - display: none; - - /* align at top left (e.g., tag margins) */ - top: 100%; - left: 0; -} - -.dropdown__content.dropdown__content-right { - left: inherit; - right: 0; -} - -/* Our child should be a block element */ -.dropdown .dropdown__content > *:not(.hidden) { - display: block; - white-space: nowrap; -} - -.dropdown:hover .dropdown__content { - /* show it */ - display: block; - /* dropdowns should be at least as big as the button */ - min-width: 100%; - /* and shouldn't sit below content */ - z-index: 999; -} diff --git a/assets/css/common/_forms.scss b/assets/css/common/_forms.scss deleted file mode 100644 index 2d17ac9e..00000000 --- a/assets/css/common/_forms.scss +++ /dev/null @@ -1,170 +0,0 @@ -form p { - margin-left: 0; -} - -.field--block { - display: block; -} - -.field--inline { - display: flex; -} - -.field-error-js { - background: $warning_light_color; - padding: 3px; -} - -.input { - box-sizing: border-box; - padding: 6px; - border: 1px solid $input_border; - font-size: 14px; - font-family: $font_family_monospace; - color: $input_text_color; - background: $input_color; - max-width: 100%; /* prevent resizable inputs from overflowing the container */ -} - -.input::placeholder { - opacity: 0.54; - color: inherit; -} - -.input[required]:invalid { - box-shadow: none; -} - -.input:focus { - outline: none; - border: 1px solid $input_border_active; - background: $input_color_active; -} - -.input--wide { - width: 100%; -} - -.input--short { - max-width: 30em; -} - -.input--small { - padding: 0 3px; -} - -.input--text { - height: 8.6em; -} - -.input--separate-left { - margin-left: 5px; -} - -.input--separate-top { - margin-top: 5px; -} - -.input--decoy { - display: inline-block; - width: 0; - height: 0; - border: 0; - padding: 0; - box-sizing: border-box; -} - -.checkbox { - margin: 0.2em 0 0 0.4em; - padding: 0; -} - -textarea { - height: 4em; -} - -.field, .actions { - margin-bottom: 6px; -} - -.field_with_errors { - background: $danger_color; -} - -span.help-block { - background: $danger_color; - display: block; -} - -/* hform is used for 30em inline 2-element textinput/button forms */ -.hform .field { - display: flex; - max-width: 30em; - width: 100%; -} -/* text input - grow to container size */ -.hform__text { - flex: 1 0 auto; -} -/* button - don't shrink or grow at all */ -.hform__button { - flex: 0 0 auto; - margin-left: 5px; -} - -/* Click-toggleable */ - -.toggle-box { - display: none; -} - -.toggle-box + label { - @extend .button; - position: relative; - > * { display: inline; } -} - -.toggle-box + label::before { - content: ""; - width: 0; - height: 0; - border-style: solid; - display: inline-block; - margin-right: 0.25em; -} - -.toggle-box + label::before { - border-width: 0.5em 0 0.5em 0.9em; - border-color: transparent transparent transparent $foreground_color; -} - -.toggle-box:checked + label::before { - border-width: 0.9em 0.5em 0; - border-color: $foreground_color transparent transparent transparent; -} - -.toggle-box-container { - overflow: hidden; - position: relative; - height: 0; -} - -.toggle-box:checked + label + .toggle-box-container { - height: auto; -} - -.toggle-box:checked + label + .toggle-box-container > .toggle-box-container__content { - margin-top: $block_spacing; -} - -select.input, select.input:focus { - -moz-appearance: none; - appearance: none; - background: linear-gradient(45deg, transparent 50%, $foreground_color 50%) calc(100% - 15px) 12px/5px 5px no-repeat,linear-gradient(135deg, $foreground_color 50%, transparent 50%) calc(100% - 10px) 12px/5px 5px no-repeat; - padding-right: 25px; -} - -select.input:hover, select.input:focus:hover { - cursor: pointer; - background-color: $input_color_active; -} diff --git a/assets/css/common/_global.scss b/assets/css/common/_global.scss deleted file mode 100644 index c23f1d37..00000000 --- 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 a54f0edd..00000000 --- a/assets/css/common/_header.scss +++ /dev/null @@ -1,299 +0,0 @@ -.header { - background: $header_color; -} - -.header__force-right { - margin-left: auto; -} - -$search_icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMjE2IDgzMnEwLTE4NS0xMzEuNS0zMTYuNXQtMzE2LjUtMTMxLjUtMzE2LjUgMTMxLjUtMTMxLjUgMzE2LjUgMTMxLjUgMzE2LjUgMzE2LjUgMTMxLjUgMzE2LjUtMTMxLjUgMTMxLjUtMzE2LjV6bTUxMiA4MzJxMCA1Mi0zOCA5MHQtOTAgMzhxLTU0IDAtOTAtMzhsLTM0My0zNDJxLTE3OSAxMjQtMzk5IDEyNC0xNDMgMC0yNzMuNS01NS41dC0yMjUtMTUwLTE1MC0yMjUtNTUuNS0yNzMuNSA1NS41LTI3My41IDE1MC0yMjUgMjI1LTE1MCAyNzMuNS01NS41IDI3My41IDU1LjUgMjI1IDE1MCAxNTAgMjI1IDU1LjUgMjczLjVxMCAyMjAtMTI0IDM5OWwzNDMgMzQzcTM3IDM3IDM3IDkweiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=="); -$camera_icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik04OTYgNjcycTExOSAwIDIwMy41IDg0LjV0ODQuNSAyMDMuNS04NC41IDIwMy41LTIwMy41IDg0LjUtMjAzLjUtODQuNS04NC41LTIwMy41IDg0LjUtMjAzLjUgMjAzLjUtODQuNXptNzA0LTQxNnExMDYgMCAxODEgNzV0NzUgMTgxdjg5NnEwIDEwNi03NSAxODF0LTE4MSA3NWgtMTQwOHEtMTA2IDAtMTgxLTc1dC03NS0xODF2LTg5NnEwLTEwNiA3NS0xODF0MTgxLTc1aDIyNGw1MS0xMzZxMTktNDkgNjkuNS04NC41dDEwMy41LTM1LjVoNTEycTUzIDAgMTAzLjUgMzUuNXQ2OS41IDg0LjVsNTEgMTM2aDIyNHptLTcwNCAxMTUycTE4NSAwIDMxNi41LTEzMS41dDEzMS41LTMxNi41LTEzMS41LTMxNi41LTMxNi41LTEzMS41LTMxNi41IDEzMS41LTEzMS41IDMxNi41IDEzMS41IDMxNi41IDMxNi41IDEzMS41eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=="); -$help_icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMDg4IDEyNTZ2MjQwcTAgMTYtMTIgMjh0LTI4IDEyaC0yNDBxLTE2IDAtMjgtMTJ0LTEyLTI4di0yNDBxMC0xNiAxMi0yOHQyOC0xMmgyNDBxMTYgMCAyOCAxMnQxMiAyOHptMzE2LTYwMHEwIDU0LTE1LjUgMTAxdC0zNSA3Ni41LTU1IDU5LjUtNTcuNSA0My41LTYxIDM1LjVxLTQxIDIzLTY4LjUgNjV0LTI3LjUgNjdxMCAxNy0xMiAzMi41dC0yOCAxNS41aC0yNDBxLTE1IDAtMjUuNS0xOC41dC0xMC41LTM3LjV2LTQ1cTAtODMgNjUtMTU2LjV0MTQzLTEwOC41cTU5LTI3IDg0LTU2dDI1LTc2cTAtNDItNDYuNS03NHQtMTA3LjUtMzJxLTY1IDAtMTA4IDI5LTM1IDI1LTEwNyAxMTUtMTMgMTYtMzEgMTYtMTIgMC0yNS04bC0xNjQtMTI1cS0xMy0xMC0xNS41LTI1dDUuNS0yOHExNjAtMjY2IDQ2NC0yNjYgODAgMCAxNjEgMzF0MTQ2IDgzIDEwNiAxMjcuNSA0MSAxNTguNXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4="); -$notification_icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik05MTIgMTY5NnEwLTE2LTE2LTE2LTU5IDAtMTAxLjUtNDIuNXQtNDIuNS0xMDEuNXEwLTE2LTE2LTE2dC0xNiAxNnEwIDczIDUxLjUgMTI0LjV0MTI0LjUgNTEuNXExNiAwIDE2LTE2em04MTYtMjg4cTAgNTItMzggOTB0LTkwIDM4aC00NDhxMCAxMDYtNzUgMTgxdC0xODEgNzUtMTgxLTc1LTc1LTE4MWgtNDQ4cS01MiAwLTkwLTM4dC0zOC05MHE1MC00MiA5MS04OHQ4NS0xMTkuNSA3NC41LTE1OC41IDUwLTIwNiAxOS41LTI2MHEwLTE1MiAxMTctMjgyLjV0MzA3LTE1OC41cS04LTE5LTgtMzkgMC00MCAyOC02OHQ2OC0yOCA2OCAyOCAyOCA2OHEwIDIwLTggMzkgMTkwIDI4IDMwNyAxNTguNXQxMTcgMjgyLjVxMCAxMzkgMTkuNSAyNjB0NTAgMjA2IDc0LjUgMTU4LjUgODUgMTE5LjUgOTEgODh6IiBmaWxsPSIjZmZmIi8+PC9zdmc+"); -$message_icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNzkyIDcxMHY3OTRxMCA2Ni00NyAxMTN0LTExMyA0N2gtMTQ3MnEtNjYgMC0xMTMtNDd0LTQ3LTExM3YtNzk0cTQ0IDQ5IDEwMSA4NyAzNjIgMjQ2IDQ5NyAzNDUgNTcgNDIgOTIuNSA2NS41dDk0LjUgNDggMTEwIDI0LjVoMnE1MSAwIDExMC0yNC41dDk0LjUtNDggOTIuNS02NS41cTE3MC0xMjMgNDk4LTM0NSA1Ny0zOSAxMDAtODd6bTAtMjk0cTAgNzktNDkgMTUxdC0xMjIgMTIzcS0zNzYgMjYxLTQ2OCAzMjUtMTAgNy00Mi41IDMwLjV0LTU0IDM4LTUyIDMyLjUtNTcuNSAyNy01MCA5aC0ycS0yMyAwLTUwLTl0LTU3LjUtMjctNTItMzIuNS01NC0zOC00Mi41LTMwLjVxLTkxLTY0LTI2Mi0xODIuNXQtMjA1LTE0Mi41cS02Mi00Mi0xMTctMTE1LjV0LTU1LTEzNi41cTAtNzggNDEuNS0xMzB0MTE4LjUtNTJoMTQ3MnE2NSAwIDExMi41IDQ3dDQ3LjUgMTEzeiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=="); -$message_unread_icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNzkyIDcxMHY3OTRxMCA2Ni00NyAxMTN0LTExMyA0N2gtMTQ3MnEtNjYgMC0xMTMtNDd0LTQ3LTExM3YtNzk0cTQ0IDQ5IDEwMSA4NyAzNjIgMjQ2IDQ5NyAzNDUgNTcgNDIgOTIuNSA2NS41dDk0LjUgNDggMTEwIDI0LjVoMnE1MSAwIDExMC0yNC41dDk0LjUtNDggOTIuNS02NS41cTE3MC0xMjMgNDk4LTM0NSA1Ny0zOSAxMDAtODd6bTAtMjk0cTAgNzktNDkgMTUxdC0xMjIgMTIzcS0zNzYgMjYxLTQ2OCAzMjUtMTAgNy00Mi41IDMwLjV0LTU0IDM4LTUyIDMyLjUtNTcuNSAyNy01MCA5aC0ycS0yMyAwLTUwLTl0LTU3LjUtMjctNTItMzIuNS01NC0zOC00Mi41LTMwLjVxLTkxLTY0LTI2Mi0xODIuNXQtMjA1LTE0Mi41cS02Mi00Mi0xMTctMTE1LjV0LTU1LTEzNi41cTAtNzggNDEuNS0xMzB0MTE4LjUtNTJoMTQ3MnE2NSAwIDExMi41IDQ3dDQ3LjUgMTEzeiIgZmlsbD0iI2Y4MCIvPjwvc3ZnPgo="); - -i.fa-embedded--search { - background: $search_icon center 0px / 16px 16px no-repeat; - padding-left: 16px; -} - -i.fa-embedded--camera { - background: $camera_icon center 1px / 16px 16px no-repeat; - padding-left: 28px; -} - -i.fa-embedded--help { - background: $help_icon 4px -1px / 19px 19px no-repeat; - padding-left: 28px; -} - -i.fa-embedded--notification { - background: $notification_icon center / 15px 15px no-repeat; - padding-left: 16px; -} - -[data-notification-count="0"] { - display: none !important; -} - -i.fa-embedded--message { - background: $message_icon center / 16px 16px no-repeat; - padding-left: 16px; -} - -i.fa-embedded--unread-message { - background: $message_unread_icon center / 16px 16px no-repeat; - padding-left: 16px; -} - -// For text preceded by an icon -.fa__text { - padding-left: 6px; -} - -a.header__link { - display: inline-block; - padding: 0 $header_spacing; - line-height: $header_height; - font-size: $header_font_size; - color: $text_light_color; - background: $header_color; - flex-shrink: 0; -} - -a.header__link:hover, .header__dropdown:hover > a { - cursor: pointer; - background-color: $header_hover_color; -} - -.header__input, .header__input:focus { - padding: 0 $header_field_spacing; - border: none; - height: $header_field_height; - - background: $header_field_color; - color: $text_light_color; - -webkit-text-fill-color: $text_light_color; - - text-overflow: ellipsis; - - /* reset rounded borders on iOS/Safari */ - border-radius: 0; -} - -span.header__counter { - @include number-wrap($header_hover_color); -} - -select.header__input, select.header__input:focus { - /* in case of