diff --git a/assets/brunch-config.js b/assets/brunch-config.js new file mode 100644 index 00000000..651d8356 --- /dev/null +++ b/assets/brunch-config.js @@ -0,0 +1,41 @@ +module.exports = { + files: { + javascripts: {joinTo: 'js/app.js'}, + stylesheets: {joinTo: 'css/app.css'} + }, + plugins: { + rollup: { + buble: { + transforms: { dangerousForOf: true } + } + }, + sass: { + mode: 'native', + options: { + includePaths: ['css', 'node_modules/font-awesome/scss'] + } + }, + copycat: { + fonts: ['node_modules/font-awesome/fonts'], + verbose: false, + onlyChanged: true + } + }, + conventions: { + // This option sets where we should place non-css and non-js assets in. + // By default, we set this to "/assets/static". Files in this directory + // will be copied to `paths.public`, which is "priv/static" by default. + assets: /static\// + }, + paths: { + watched: ['css/themes/default.scss', 'js/app.js', 'vendor', 'fonts', 'static'], + public: '../priv/static' + }, + modules: { + definition: false, + wrapper: false + }, + npm: { + enabled: false + } +}; diff --git a/assets/css/app.css b/assets/css/app.css deleted file mode 100644 index fec0b3fc..00000000 --- a/assets/css/app.css +++ /dev/null @@ -1,3 +0,0 @@ -/* This file is for your main application css. */ - -@import "./phoenix.css"; diff --git a/assets/css/common/barline.scss b/assets/css/common/barline.scss new file mode 100644 index 00000000..58b4292b --- /dev/null +++ b/assets/css/common/barline.scss @@ -0,0 +1,13 @@ +.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 new file mode 100644 index 00000000..e65a3b8c --- /dev/null +++ b/assets/css/common/base.scss @@ -0,0 +1,401 @@ +/* + * 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 @import at the bottom of the file. + * + * NOTE: do not enable require_self and require_tree because it imports things the wrong way around! + * = require_self + * = require_tree . +*/ + +@import "global"; + +@import "../../node_modules/font-awesome/scss/font-awesome.scss"; +@import "../../node_modules/normalize-scss/sass/_normalize.scss"; + +body { + background-color: $background_color; + color: $foreground_color; + font-family: $font_family_base; + font-size: 13px; + margin: 0; + padding: 0; +} + +h1, h2, h3, h4, h5 { + font-weight: normal; + text-rendering: optimizeLegibility; + margin-bottom: 0.62em; +} + +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 tho +.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%; + } +} + +.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: 4px; + 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: $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/search"; +@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 new file mode 100644 index 00000000..db7ae345 --- /dev/null +++ b/assets/css/common/blocks.scss @@ -0,0 +1,216 @@ +.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__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 { + 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 { + background: $block_header_light_color; + 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; +} + +.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 new file mode 100644 index 00000000..f23c8224 --- /dev/null +++ b/assets/css/common/burger.scss @@ -0,0 +1,38 @@ +@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 new file mode 100644 index 00000000..8598627b --- /dev/null +++ b/assets/css/common/buttons.scss @@ -0,0 +1,91 @@ +.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/dropdown.scss b/assets/css/common/dropdown.scss new file mode 100644 index 00000000..30c06a50 --- /dev/null +++ b/assets/css/common/dropdown.scss @@ -0,0 +1,33 @@ +.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 new file mode 100644 index 00000000..9ffd3661 --- /dev/null +++ b/assets/css/common/forms.scss @@ -0,0 +1,148 @@ +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[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; +} + +/* 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; +} diff --git a/assets/css/common/global.scss b/assets/css/common/global.scss new file mode 100644 index 00000000..acb833c0 --- /dev/null +++ b/assets/css/common/global.scss @@ -0,0 +1,276 @@ +/* + * This file defines: + * 1) main colors, 2) main colors variations, 3) dimensions and other shared properties, 4) mixins + * Custom themes ('themes/default' and 'themes/dark') may override some or all of these settings. + * + * Note that individual stylesheets ('common/buttons') may have local properties. + * Those can be overridden in themes as well (see 'themes/dark' for an example of that). + */ + +// /////////////////////////////////// +// ///// SECTION 1 - MAIN COLORS ///// +// /////////////////////////////////// + +$background_color: #ffffff !default; +$page_background_color: #f8fafc !default; +$foreground_color: #333333 !default; + +$base_color: #62a7d9 !default; + +$primary_color: #c1e4f9 !default; +$success_color: #bde9a3 !default; /* tag added, currently banned, view post history--added */ +$danger_color: #ebc0bb !default; /* tag removed, currently not banned, view post history--deleted */ +$warning_color: #eee9bc !default; /* NSFW streams, image spoilered, things like that */ + +$link_color: #419cd9 !default; +$link_hover_color: #9273d0 !default; + +$fave_color: #c4b246 !default; +$vote_up_color: #67af2b !default; +$vote_down_color: #cf0001 !default; +$hide_color: #cf0001 !default; + +$assistant_color: #eeceed !default; + +$tag_normal_color: #6f8f0e !default; +$tag_category_rating_color: #267ead !default; +$tag_category_spoiler_color: #c24523 !default; +$tag_category_origin_color: #393f85 !default; +$tag_category_oc_color: #9852a3 !default; +$tag_category_error_color: #ad263f !default; +$tag_category_character_color: #2d8677 !default; +$tag_category_content_official_color: #998e1a !default; +$tag_category_content_fanmade_color: #bb5496 !default; + +$commission_category_color: #986f3d !default; + +$image_overlay_color: #ffffff !default; +$image_overlay_background_color: #000000 !default; + +// ////////////////////////////////////// +// ///// SECTION 2 - DERIVED COLORS ///// +// ////////////////////////////////////// + +$text_light_color: $background_color !default; + +$meta_color: mix($foreground_color, $background_color, 5%) !default; +$meta_border_color: mix($foreground_color, $meta_color, 30%) !default; + +$header_color: darken($base_color, 9%) !default; +$header_hover_color: darken($base_color, 16%) !default; +$header_field_color: $base_color !default; +$header_field_hover_color: darken($base_color, 7%) !default; +$header_secondary_color: desaturate(lighten($base_color, 30%), 25%) !default; +$header_secondary_hover_color: darken($header_secondary_color, 7%) !default; + +$header_admin_color: mix($vote_down_color, $background_color, 16%) !default; +$header_admin_hover_color: mix($vote_down_color, $background_color, 30%) !default; + +$block_header_color: lighten($base_color, 28%) !default; +$block_header_hover_color: desaturate(lighten($base_color, 20%), 5%) !default; +$block_header_link_text_color: saturate(darken($header_color, 5%), 6%) !default; +$block_header_link_text_hover_color: darken($header_color, 15%) !default; + +$block_header_light_color: desaturate(lighten($base_color, 31%), 16%) !default; +$block_header_light_hover_color: lighten($header_secondary_hover_color, 2%) !default; +$block_header_light_link_text_color: darken($block_header_light_color, 42%) !default; +$block_header_light_link_text_hover_color: darken($block_header_light_color, 52%) !default; + +$border_color: darken($block_header_light_color, 3%) !default; + +$media_box_color: desaturate($block_header_light_color, 10%) !default; +$media_box_hover_color: saturate(darken($media_box_color, 6%), 6%) !default; +$media_box_header_link_text_color: $link_color !default; +$media_box_header_link_text_hover_color: darken($media_box_header_link_text_color, 10%) !default; + +$primary_light_color: lighten($primary_color, 5%) !default; +$success_light_color: lighten($success_color, 7%) !default; +$danger_light_color: lighten($danger_color, 4%) !default; +$warning_light_color: lighten($warning_color, 6%) !default; + +$link_dark_color: darken($link_color, 20%) !default; //used in the tag table, amongst other things +$link_hover_dark_color: darken($link_hover_color, 20%) !default; + +$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%) !default; //also used as 'alt background color' in various places +$background_even_color: $background_color !default; +/* Depending on the theme, you may want to swap even and odd colors */ +$success_odd_color: saturate(darken($success_light_color, 3%), 8%) !default; +$success_even_color: lighten($success_color, 13%) !default; +$warning_odd_color: saturate(darken($warning_light_color, 7%), 10%) !default; +$warning_even_color: lighten($warning_color, 5%) !default; +$danger_odd_color: saturate(darken($danger_light_color, 1%), 12%) !default; +$danger_even_color: desaturate(lighten($danger_color, 7%), 10%) !default; + +$foreground_half_color: mix($foreground_color, $background_color) !default; //used for weird h's (on image pages like Metadata Editing and Information) and also footer text color + +$sparkline_color: lighten($base_color, 5%) !default; + +$assistant_border_color: darken($assistant_color, 8%) !default; + +$admin_links_color: mix($vote_down_color, $background_color, 17%) !default; +$admin_links_hover_color: mix($vote_down_color, $background_color, 48%) !default; + +$input_text_color: $foreground_color !default; +$input_color: $meta_color !default; +$input_border: $meta_border_color !default; +$input_color_active: desaturate(lighten($base_color, 30%), 16%) !default; +$input_border_active: lighten($base_color, 10%) !default; + +$tag_normal_background: desaturate(lighten($tag_normal_color, 44%), 28%) !default; +$tag_normal_border: darken($tag_normal_background, 16%) !default; +$tag_category_rating_background: desaturate(lighten($tag_category_rating_color, 41%), 25%) !default; +$tag_category_rating_border: darken($tag_category_rating_background, 10%) !default; +$tag_category_spoiler_background: lighten($tag_category_spoiler_color, 41%) !default; +$tag_category_spoiler_border: darken($tag_category_spoiler_background, 8%) !default; +$tag_category_origin_background: lighten($tag_category_origin_color, 43%) !default; +$tag_category_origin_border: darken($tag_category_origin_background, 10%) !default; +$tag_category_oc_background: lighten($tag_category_oc_color, 35%) !default; +$tag_category_oc_border: darken($tag_category_oc_background, 9%) !default; +$tag_category_error_background: lighten($tag_category_error_color, 40%) !default; +$tag_category_error_border: darken($tag_category_error_background, 8%) !default; +$tag_category_character_background: desaturate(lighten($tag_category_character_color, 44%), 10%) !default; +$tag_category_character_border: lighten($tag_category_character_color, 22%) !default; +$tag_category_content_official_background: lighten($tag_category_content_official_color, 41%) !default; +$tag_category_content_official_border: lighten($tag_category_content_official_color, 18%) !default; +$tag_category_content_fanmade_background: lighten($tag_category_content_fanmade_color, 36%) !default; +$tag_category_content_fanmade_border: lighten($tag_category_content_fanmade_color, 18%) !default; + +$commission_category_background: saturate(lighten($commission_category_color, 40%), 12%) !default; +$commission_category_border: lighten($commission_category_color, 20%) !default; + +$site_notice_color: darken($base_color, 32%) !default; +$site_notice_link_color: $block_header_light_color !default; +$site_notice_link_hover_color: $block_header_hover_color !default; + +// ///////////////////////////////////////// +// ///// SECTION 3 - SHARED PROPERTIES ///// +// ///////////////////////////////////////// + +$border: 1px solid $border_color !default; + +$font_family_base: verdana, arial, helvetica, sans-serif !default; +$font_family_monospace: "Droid Sans Mono", monospace !default; + +$max_px_width_for_limited_desktop_layout: 1150px !default; +$min_px_width_for_desktop_layout: 800px !default; +$min_px_width_for_desktop_thumb: 700px !default; + +$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; + +$button_text_color: $foreground_color !default; +$button_background_color: rgba($meta_color, 0.2) !default; +$button_hover_background_color: $input_color_active !default; +$button_hover_border_color: $input_border_active !default; +$button_border_color: $meta_border_color !default; + +$button_primary_background_color: $primary_light_color !default; +$button_success_background_color: $success_light_color !default; +$button_warning_background_color: $warning_light_color !default; +$button_danger_background_color: $danger_light_color !default; + +$button_primary_border_color: darken($primary_color, 8%) !default; +$button_success_border_color: darken($success_color, 10%) !default; +$button_warning_border_color: darken($warning_color, 11%) !default; +$button_danger_border_color: darken($danger_color, 8%) !default; + +$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%); + + +// ////////////////////////////// +// ///// SECTION 4 - MIXINS ///// +// ////////////////////////////// + +@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 new file mode 100644 index 00000000..717bcc6b --- /dev/null +++ b/assets/css/common/header.scss @@ -0,0 +1,289 @@ +.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; + + 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