From 135a010aa4080ca3d91fdb446fbcd2f5e8fd38a6 Mon Sep 17 00:00:00 2001 From: Deimos Date: Mon, 28 Sep 2020 15:34:17 -0600 Subject: [PATCH] CSS: Move all theme color rules into normal places Now that we've switched to CSS custom properties, all the color rules don't need to be repeated for each theme via a mixin, so the _theme_base.scss could be split up with all its rules going into the expected modules/locations along with all the other associated styles. --- tildes/scss/_base.scss | 78 +++ tildes/scss/modules/_breadcrumbs.scss | 25 + tildes/scss/modules/_btn.scss | 97 ++++ tildes/scss/modules/_chip.scss | 22 + tildes/scss/modules/_comment.scss | 26 +- tildes/scss/modules/_divider.scss | 6 + tildes/scss/modules/_donation.scss | 8 + tildes/scss/modules/_dropdown.scss | 4 + tildes/scss/modules/_empty.scss | 4 + tildes/scss/modules/_form.scss | 37 +- tildes/scss/modules/_group.scss | 6 + tildes/scss/modules/_input.scss | 2 + tildes/scss/modules/_label.scss | 79 +++ tildes/scss/modules/_link.scss | 16 + tildes/scss/modules/_logged-in-user.scss | 5 + tildes/scss/modules/_menu.scss | 4 +- tildes/scss/modules/_message.scss | 5 +- tildes/scss/modules/_nav.scss | 6 + tildes/scss/modules/_settings.scss | 4 + tildes/scss/modules/_sidebar.scss | 7 + tildes/scss/modules/_site-footer.scss | 4 + tildes/scss/modules/_site-header.scss | 17 + tildes/scss/modules/_tab.scss | 13 + tildes/scss/modules/_table.scss | 8 + tildes/scss/modules/_text.scss | 17 + tildes/scss/modules/_toast.scss | 14 + tildes/scss/modules/_topic.scss | 42 +- tildes/scss/styles.scss | 1 - tildes/scss/themes/_theme_base.scss | 686 ----------------------- tildes/scss/themes/_theme_mixins.scss | 28 - 30 files changed, 547 insertions(+), 724 deletions(-) delete mode 100644 tildes/scss/themes/_theme_base.scss diff --git a/tildes/scss/_base.scss b/tildes/scss/_base.scss index ab5ed40..e17d26e 100644 --- a/tildes/scss/_base.scss +++ b/tildes/scss/_base.scss @@ -10,6 +10,28 @@ html { a { text-decoration: none; + + color: var(--link-color); + + &:hover { + color: var(--link-hover-color); + } + + &:visited { + color: var(--link-visited-color); + } + + code { + color: var(--link-color); + + &:hover { + text-decoration: underline; + } + } + + &:visited code { + color: var(--link-visited-color); + } } blockquote { @@ -19,6 +41,9 @@ blockquote { border-left: 1px dotted; + border-color: var(--foreground-highlight-color); + background-color: var(--background-secondary-color); + // nested blockquotes need reduced margin/padding > blockquote { margin: 0; @@ -26,6 +51,11 @@ blockquote { padding-top: 0; padding-bottom: 0; } + + code, + pre { + background-color: var(--background-primary-color); + } } body { @@ -33,6 +63,9 @@ body { min-height: 100vh; @include font-shrink-on-mobile(0.8rem); + + color: var(--foreground-primary-color); + background-color: var(--background-secondary-color); } button { @@ -44,6 +77,9 @@ code { font-size: inherit; -moz-tab-size: 4; tab-size: 4; + + color: var(--foreground-highlight-color); + background-color: var(--background-secondary-color); } dl dd { @@ -139,6 +175,8 @@ main { overflow: hidden; max-width: 100vw; + background-color: var(--background-primary-color); + @media (min-width: $size-md) { padding: 0.4rem; } @@ -153,6 +191,40 @@ menu { padding: 0; } +meter { + // Crazy styles to get this to work adapted from Spectre.css's _meters.scss + background: var(--background-secondary-color); + + &::-webkit-meter-bar { + background: var(--background-secondary-color); + } + + // For some mysterious reason, none of the below rules can be merged + &::-webkit-meter-optimum-value { + background: var(--success-color); + } + + &:-moz-meter-optimum::-moz-meter-bar { + background: var(--success-color); + } + + &::-webkit-meter-suboptimum-value { + background: var(--warning-color); + } + + &:-moz-meter-sub-optimum::-moz-meter-bar { + background: var(--warning-color); + } + + &::-webkit-meter-even-less-good-value { + background: var(--error-color); + } + + &:-moz-meter-sub-sub-optimum::-moz-meter-bar { + background: var(--error-color); + } +} + // We'll use lists for their semantic value sometimes, so we don't want them to // have the normal list numbering/etc. by default. We'll specifically add that // back in for text-based lists in places where it's needed. @@ -178,6 +250,8 @@ p:last-child { pre { overflow: auto; + color: var(--foreground-highlight-color); + background-color: var(--background-secondary-color); code { display: block; @@ -202,6 +276,10 @@ table { margin-bottom: 1rem; } +tbody tr:nth-of-type(2n + 1) { + background-color: var(--background-secondary-color); +} + td, th { border: $border-width solid; diff --git a/tildes/scss/modules/_breadcrumbs.scss b/tildes/scss/modules/_breadcrumbs.scss index af36092..7b349d6 100644 --- a/tildes/scss/modules/_breadcrumbs.scss +++ b/tildes/scss/modules/_breadcrumbs.scss @@ -1,3 +1,28 @@ +// Copyright (c) 2019 Tildes contributors +// SPDX-License-Identifier: AGPL-3.0-or-later + +.breadcrumb .breadcrumb-item { + color: var(--foreground-secondary-color); + + &:not(:last-child) { + a { + color: var(--foreground-secondary-color); + } + } + + &:not(:first-child) { + &::before { + color: var(--foreground-secondary-color); + } + } + + &:last-child { + a { + color: var(--link-color); + } + } +} + ol.breadcrumb, ul.breadcrumb { margin-left: 0; diff --git a/tildes/scss/modules/_btn.scss b/tildes/scss/modules/_btn.scss index 54b2e4a..9d32f26 100644 --- a/tildes/scss/modules/_btn.scss +++ b/tildes/scss/modules/_btn.scss @@ -10,12 +10,30 @@ font-size: 0.6rem; font-weight: bold; + + color: var(--button-color); + background-color: transparent; + border-color: var(--button-color); + + &:hover { + background-color: var(--button-transparent-color); + } } .btn.btn-sm { font-size: 0.6rem; } +.btn.btn-link { + color: var(--link-color); + background-color: transparent; + border-color: transparent; + + &:hover { + color: var(--link-color); + } +} + .btn-link-minimal { display: inline; height: auto; @@ -44,6 +62,10 @@ margin-right: 0.2rem; min-width: 0.8rem; } + + &:hover { + border-color: var(--border-color); + } } .btn-comment-collapse-label::after { @@ -73,8 +95,49 @@ } } +@mixin label-button($color) { + color: $color; + border-color: $color; + + &:hover { + color: $color; + } + + &.btn-used:hover { + background-color: $color; + color: var(--white-color); + } +} + +.btn-comment-label-exemplary { + @include label-button(var(--comment-label-exemplary-color)); +} + +.btn-comment-label-joke { + @include label-button(var(--comment-label-joke-color)); +} + +.btn-comment-label-noise { + @include label-button(var(--comment-label-noise-color)); +} + +.btn-comment-label-offtopic { + @include label-button(var(--comment-label-offtopic-color)); +} + +.btn-comment-label-malice { + @include label-button(var(--comment-label-malice-color)); +} + .btn-light { font-weight: normal; + + color: var(--foreground-secondary-color); + border-color: var(--border-color); + + &:hover { + color: var(--link-color); + } } .btn-post { @@ -122,8 +185,42 @@ line-height: 0.6rem; cursor: pointer; + + color: var(--foreground-secondary-color); + + &:hover { + color: var(--foreground-extreme-color); + } } .btn-post-action-used { text-decoration: underline; + color: var(--button-used-color); +} + +.btn.btn-primary { + color: var(--button-by-brightness-color); + + background-color: var(--button-color); + border-color: var(--button-color); + + &:hover { + background-color: var(--button-darkened-10-color); + border-color: var(--button-darkened-10-color); + } + + &:visited { + color: var(--button-by-brightness-color); + } +} + +.btn-used { + color: var(--button-used-color); + border-color: var(--button-used-darkened-3-color); + + &:hover { + background-color: var(--button-used-darkened-3-color); + border-color: var(--button-used-darkened-8-color); + color: var(--white-color); + } } diff --git a/tildes/scss/modules/_chip.scss b/tildes/scss/modules/_chip.scss index b4c4ef4..924321e 100644 --- a/tildes/scss/modules/_chip.scss +++ b/tildes/scss/modules/_chip.scss @@ -3,4 +3,26 @@ .chip { border-radius: 0; + + background-color: var(--background-secondary-color); + color: var(--foreground-highlight-color); + + &.active { + background-color: var(--button-color); + color: var(--button-by-brightness-color); + + .btn { + color: var(--button-by-brightness-color); + } + } + + &.error { + background-color: var(--error-color); + + color: var(--error-by-brightness-color); + + .btn { + color: var(--error-by-brightness-color); + } + } } diff --git a/tildes/scss/modules/_comment.scss b/tildes/scss/modules/_comment.scss index 88a2003..bb78d9d 100644 --- a/tildes/scss/modules/_comment.scss +++ b/tildes/scss/modules/_comment.scss @@ -7,7 +7,7 @@ margin-bottom: 0.4rem; &:target > .comment-itself { - border-left: 3px solid; + border-left: 3px solid var(--stripe-target-color); } } @@ -28,6 +28,9 @@ @media (min-width: $size-md) { padding: 0.2rem; } + + color: var(--foreground-highlight-color); + background-color: var(--background-secondary-color); } .comment-user-info { @@ -65,6 +68,8 @@ display: none; margin-right: 0.4rem; + + color: var(--foreground-secondary-color); } .comment-exemplary-reasons { @@ -96,6 +101,12 @@ @media (min-width: $size-md) { margin-left: 1rem; } + + color: var(--foreground-secondary-color); + + &:visited { + color: var(--foreground-secondary-color); + } } .comment-tree { @@ -164,6 +175,7 @@ .comment-removed-warning { font-weight: bold; font-size: 0.6rem; + color: var(--warning-color); } .comment-votes { @@ -217,6 +229,7 @@ font-size: 0.6rem; line-height: 0.8rem; white-space: nowrap; + background-color: var(--background-primary-color); } .btn-comment-collapse-label::after { @@ -249,26 +262,31 @@ .is-comment-removed { font-size: 0.7rem; font-style: italic; + color: var(--foreground-secondary-color); } .is-comment-mine { > .comment-itself { margin-left: -2px; - border-left: 3px solid; + border-left: 3px solid var(--stripe-mine-color); } } .is-comment-new { > .comment-itself { margin-left: -2px; - border-left: 3px solid; + border-left: 3px solid var(--alert-color); + } + + .comment-text { + color: var(--foreground-highlight-color); } } .is-comment-exemplary { > .comment-itself { margin-left: -2px; - border-left: 3px solid; + border-left: 3px solid var(--comment-label-exemplary-color); } } diff --git a/tildes/scss/modules/_divider.scss b/tildes/scss/modules/_divider.scss index 0b2d7b3..77734ef 100644 --- a/tildes/scss/modules/_divider.scss +++ b/tildes/scss/modules/_divider.scss @@ -4,4 +4,10 @@ .divider, .divider[data-content] { margin: 1rem; + border-color: var(--border-color); +} + +.divider[data-content]::after { + color: var(--foreground-primary-color); + background-color: var(--background-primary-color); } diff --git a/tildes/scss/modules/_donation.scss b/tildes/scss/modules/_donation.scss index 2bbbbab..1acf282 100644 --- a/tildes/scss/modules/_donation.scss +++ b/tildes/scss/modules/_donation.scss @@ -34,6 +34,14 @@ height: 0.4rem; } +.donation-goal-meter-over-goal { + background: var(--comment-label-exemplary-color); + + &::-webkit-meter-bar { + background: var(--comment-label-exemplary-color); + } +} + .donation-goal-progress { display: flex; align-items: center; diff --git a/tildes/scss/modules/_dropdown.scss b/tildes/scss/modules/_dropdown.scss index 88d4420..f154b9b 100644 --- a/tildes/scss/modules/_dropdown.scss +++ b/tildes/scss/modules/_dropdown.scss @@ -8,6 +8,10 @@ .btn-post-action { justify-content: left; width: 100%; + + &:hover { + background-color: var(--background-secondary-color); + } } } diff --git a/tildes/scss/modules/_empty.scss b/tildes/scss/modules/_empty.scss index 336b829..2685e0f 100644 --- a/tildes/scss/modules/_empty.scss +++ b/tildes/scss/modules/_empty.scss @@ -5,3 +5,7 @@ background: inherit; color: inherit; } + +.empty-subtitle { + color: var(--foreground-secondary-color); +} diff --git a/tildes/scss/modules/_form.scss b/tildes/scss/modules/_form.scss index f7f589e..a247d42 100644 --- a/tildes/scss/modules/_form.scss +++ b/tildes/scss/modules/_form.scss @@ -1,6 +1,16 @@ // Copyright (c) 2018 Tildes contributors // SPDX-License-Identifier: AGPL-3.0-or-later +.form-autocomplete { + .menu { + background-color: var(--background-secondary-color); + } + + .form-autocomplete-input .form-input { + border-color: transparent; + } +} + .form-group { .form-radio { margin-left: 1rem; @@ -15,10 +25,13 @@ } } -select.form-select:not([multiple]) { +select.form-select:not([multiple]):not([size]) { // would be better to implement autoprefixer to do this -moz-appearance: none; -webkit-appearance: none; + + border-color: var(--border-color); + background-color: var(--background-input-color); } .form-listing-options { @@ -59,6 +72,8 @@ select.form-select:not([multiple]) { padding: 0.4rem; border: 1px dashed; overflow: auto; + + border-color: var(--border-color); } .form-buttons { @@ -85,6 +100,26 @@ textarea.form-input { .form-input { max-width: 40rem; + + // error colors for :invalid inputs, using same approach as Spectre + &:not(:placeholder-shown):invalid { + border-color: var(--error-color); + + &:focus { + box-shadow: 0 0 0 1px var(--error-color); + } + + + .form-input-hint { + color: var(--error-color); + } + } +} + +.form-input, +.form-input[readonly] { + color: var(--foreground-primary-color); + background-color: var(--background-input-color); + border-color: var(--border-color); } .form-input-note { diff --git a/tildes/scss/modules/_group.scss b/tildes/scss/modules/_group.scss index 8a57888..578242e 100644 --- a/tildes/scss/modules/_group.scss +++ b/tildes/scss/modules/_group.scss @@ -28,6 +28,12 @@ line-height: 0.8rem; } +.group-list-item-not-subscribed { + a.link-group { + color: var(--warning-color); + } +} + .group-subscription { display: flex; align-items: center; diff --git a/tildes/scss/modules/_input.scss b/tildes/scss/modules/_input.scss index b57d9ee..36652bd 100644 --- a/tildes/scss/modules/_input.scss +++ b/tildes/scss/modules/_input.scss @@ -3,6 +3,8 @@ .input-group .input-group-addon { border-color: inherit; + background-color: var(--background-secondary-color); + color: var(--foreground-highlight-color); } .input-invite-code { diff --git a/tildes/scss/modules/_label.scss b/tildes/scss/modules/_label.scss index 33cd4b3..1f77ae8 100644 --- a/tildes/scss/modules/_label.scss +++ b/tildes/scss/modules/_label.scss @@ -12,15 +12,76 @@ text-transform: capitalize; } +@mixin theme-special-label($background-color, $foreground-color, $border-color) { + background-color: $background-color; + color: $foreground-color; + border: 1px solid $border-color; + padding: 0 0.2rem; + line-height: 0.9rem; + + a, + a:hover, + a:visited { + color: $foreground-color; + } +} + +.label-comment-exemplary { + @include theme-special-label( + var(--background-label-exemplary-color), + var(--foreground-label-exemplary-color), + var(--comment-label-exemplary-color) + ); +} + +.label-comment-joke { + @include theme-special-label( + var(--background-label-joke-color), + var(--foreground-label-joke-color), + var(--comment-label-joke-color) + ); +} + +.label-comment-noise { + @include theme-special-label( + var(--background-label-noise-color), + var(--foreground-label-noise-color), + var(--comment-label-noise-color) + ); +} + +.label-comment-offtopic { + @include theme-special-label( + var(--background-label-offtopic-color), + var(--foreground-label-offtopic-color), + var(--comment-label-offtopic-color) + ); +} + +.label-comment-malice { + @include theme-special-label( + var(--background-label-malice-color), + var(--foreground-label-malice-color), + var(--comment-label-malice-color) + ); +} + .label-topic-tag { background-color: transparent; margin: 0 0.4rem 0 0; + padding: 0; word-wrap: break-word; max-width: 100%; & + & { margin-left: 0.2rem; } + + a, + a:hover, + a:visited { + color: var(--foreground-primary-color); + } } .label-topic-tag-spoiler, @@ -29,3 +90,21 @@ .label-topic-tag[class*="label-topic-tag-spoiler-"] { font-weight: bold; } + +.label-topic-tag-nsfw, +.label-topic-tag[class*="label-topic-tag-nsfw-"] { + @include theme-special-label( + var(--topic-tag-nsfw-color), + var(--topic-tag-nsfw-foreground-color), + var(--topic-tag-nsfw-border-color) + ); +} + +.label-topic-tag-spoiler, +.label-topic-tag[class*="label-topic-tag-spoiler-"] { + @include theme-special-label( + var(--topic-tag-spoiler-color), + var(--topic-tag-spoiler-foreground-color), + var(--topic-tag-spoiler-border-color) + ); +} diff --git a/tildes/scss/modules/_link.scss b/tildes/scss/modules/_link.scss index ea7b8af..cbb07a4 100644 --- a/tildes/scss/modules/_link.scss +++ b/tildes/scss/modules/_link.scss @@ -9,4 +9,20 @@ a.link-group { &:hover { text-decoration: underline; } + + &:visited { + color: var(--link-color); + } +} + +.link-no-visited-color:visited { + color: var(--link-color); +} + +a.logged-in-user-alert { + color: var(--alert-color); + + &:visited { + color: var(--alert-color); + } } diff --git a/tildes/scss/modules/_logged-in-user.scss b/tildes/scss/modules/_logged-in-user.scss index 0a4ed28..5d72ad5 100644 --- a/tildes/scss/modules/_logged-in-user.scss +++ b/tildes/scss/modules/_logged-in-user.scss @@ -19,3 +19,8 @@ font-weight: bold; font-size: 0.5rem; } + +.logged-in-user-username, +.logged-in-user-username:visited { + color: var(--foreground-primary-color); +} diff --git a/tildes/scss/modules/_menu.scss b/tildes/scss/modules/_menu.scss index 96e3f0d..5caebf3 100644 --- a/tildes/scss/modules/_menu.scss +++ b/tildes/scss/modules/_menu.scss @@ -3,7 +3,9 @@ .menu { box-shadow: none; - border: 1px outset; + border: 1px outset var(--border-color); + + background-color: var(--background-primary-color); .menu-item { > a:hover, diff --git a/tildes/scss/modules/_message.scss b/tildes/scss/modules/_message.scss index 25af6e4..66325f4 100644 --- a/tildes/scss/modules/_message.scss +++ b/tildes/scss/modules/_message.scss @@ -13,6 +13,9 @@ font-size: 0.7rem; line-height: 0.9rem; + color: var(--foreground-highlight-color); + background-color: var(--background-secondary-color); + .link-user { margin-right: 0.2rem; } @@ -40,5 +43,5 @@ .is-message-mine { margin-left: -2px; - border-left: 3px solid; + border-left: 3px solid var(--stripe-mine-color); } diff --git a/tildes/scss/modules/_nav.scss b/tildes/scss/modules/_nav.scss index 05af473..ec5ebee 100644 --- a/tildes/scss/modules/_nav.scss +++ b/tildes/scss/modules/_nav.scss @@ -28,12 +28,18 @@ .nav-item a { cursor: pointer; + color: var(--link-color); &:hover { text-decoration: underline; + color: var(--link-hover-color); } } + .nav-item.active a { + color: var(--link-color); + } + .nav-item .btn-link { height: auto; font-size: 0.8rem; diff --git a/tildes/scss/modules/_settings.scss b/tildes/scss/modules/_settings.scss index 9b1c874..764ebdc 100644 --- a/tildes/scss/modules/_settings.scss +++ b/tildes/scss/modules/_settings.scss @@ -2,6 +2,10 @@ // SPDX-License-Identifier: AGPL-3.0-or-later .settings-list { + a:visited { + color: var(--link-color); + } + li { margin-bottom: 1rem; } diff --git a/tildes/scss/modules/_sidebar.scss b/tildes/scss/modules/_sidebar.scss index 0aef108..a609c2a 100644 --- a/tildes/scss/modules/_sidebar.scss +++ b/tildes/scss/modules/_sidebar.scss @@ -6,6 +6,11 @@ // that don't support *either* custom properties or the @supports test for them background-color: $body-bg; + // stylelint-disable-next-line declaration-block-no-duplicate-properties + background-color: var(--background-primary-color); + + border-left-color: var(--border-color); + .btn { width: 100%; } @@ -47,6 +52,8 @@ padding: 0.2rem 0.4rem; align-items: center; justify-content: space-between; + + background-color: var(--background-secondary-color); } .is-sidebar-displayed { diff --git a/tildes/scss/modules/_site-footer.scss b/tildes/scss/modules/_site-footer.scss index f4a592b..abd73f0 100644 --- a/tildes/scss/modules/_site-footer.scss +++ b/tildes/scss/modules/_site-footer.scss @@ -10,6 +10,10 @@ font-size: 0.6rem; text-align: center; + + a:visited { + color: var(--link-color); + } } .site-footer-links { diff --git a/tildes/scss/modules/_site-header.scss b/tildes/scss/modules/_site-header.scss index b972dc1..8cadff2 100644 --- a/tildes/scss/modules/_site-header.scss +++ b/tildes/scss/modules/_site-header.scss @@ -34,6 +34,16 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + + a, + a:visited { + color: var(--foreground-primary-color); + } + + .toast a, + .toast a:visited { + color: var(--link-color); + } } .site-header-logo { @@ -60,6 +70,12 @@ font-size: 1.2rem; font-weight: bold; + color: var(--foreground-highlight-color); + + &:visited { + color: var(--foreground-highlight-color); + } + &:hover, &:active, &:focus { @@ -83,6 +99,7 @@ font-size: 0.5rem; height: 0.7rem; transform: translate(50%, -40%); + background-color: var(--alert-color); } } } diff --git a/tildes/scss/modules/_tab.scss b/tildes/scss/modules/_tab.scss index 2857afe..ee767d6 100644 --- a/tildes/scss/modules/_tab.scss +++ b/tildes/scss/modules/_tab.scss @@ -3,6 +3,19 @@ .tab { font-size: 0.6rem; + border-color: var(--border-color); + + .tab-item { + a { + color: var(--foreground-primary-color); + } + + &.active a, + &.active button { + color: var(--link-color); + border-bottom-color: var(--link-color); + } + } } .tab-item { diff --git a/tildes/scss/modules/_table.scss b/tildes/scss/modules/_table.scss index 09fd900..4a013db 100644 --- a/tildes/scss/modules/_table.scss +++ b/tildes/scss/modules/_table.scss @@ -1,6 +1,14 @@ // Copyright (c) 2019 Tildes contributors // SPDX-License-Identifier: AGPL-3.0-or-later +.table td { + border-bottom-color: var(--border-color); +} + +.table th { + border-bottom-color: var(--foreground-highlight-color); +} + .table-financials { max-width: $paragraph-max-width; margin-top: 1rem; diff --git a/tildes/scss/modules/_text.scss b/tildes/scss/modules/_text.scss index b277d59..c453655 100644 --- a/tildes/scss/modules/_text.scss +++ b/tildes/scss/modules/_text.scss @@ -1,10 +1,22 @@ // Copyright (c) 2018 Tildes contributors // SPDX-License-Identifier: AGPL-3.0-or-later +.text-error { + color: var(--error-color); +} + .text-formatted { @extend %text-container; } +.text-link { + color: var(--link-color); +} + +.text-secondary { + color: var(--foreground-secondary-color); +} + .text-small { font-size: 0.6rem; line-height: 0.9rem; @@ -14,6 +26,10 @@ font-size: 0.6rem; } +.text-warning { + color: var(--warning-color); +} + // special formatting rules for wiki pages .text-wiki { h1, @@ -24,6 +40,7 @@ h6 { a { text-decoration: none; + color: var(--foreground-highlight-color); } } diff --git a/tildes/scss/modules/_toast.scss b/tildes/scss/modules/_toast.scss index 49119ed..110e7e9 100644 --- a/tildes/scss/modules/_toast.scss +++ b/tildes/scss/modules/_toast.scss @@ -7,6 +7,14 @@ margin: 1rem 0; font-weight: bold; + color: var(--foreground-highlight-color); + background-color: var(--background-secondary-color); + border-color: var(--border-color); + + a { + color: var(--link-color); + } + ul { margin-bottom: 1rem; } @@ -23,3 +31,9 @@ font-weight: bold; } } + +.toast.toast-warning { + border-color: var(--warning-color); + color: var(--warning-foreground-color); + background-color: var(--warning-background-color); +} diff --git a/tildes/scss/modules/_topic.scss b/tildes/scss/modules/_topic.scss index ebf33c8..fe26d79 100644 --- a/tildes/scss/modules/_topic.scss +++ b/tildes/scss/modules/_topic.scss @@ -3,6 +3,11 @@ .topic-listing > li { margin: 0; + + &:nth-of-type(2n) { + color: var(--foreground-mixed-color); + background-color: var(--background-mixed-color); + } } .topic-listing-filter { @@ -90,6 +95,11 @@ .btn-post-action { font-weight: normal; + color: var(--link-color); + } + + .btn-post-action-used { + color: var(--link-visited-color); } .dropdown-toggle .icon { @@ -155,6 +165,10 @@ margin-bottom: 0.8rem; } +.topic-log-entry-time { + color: var(--foreground-secondary-color); +} + .topic-metadata { display: flex; flex-wrap: wrap; @@ -194,6 +208,11 @@ &.btn-used { border-color: transparent; + &:hover { + background-color: var(--button-darkened-3-color); + border-color: var(--button-darkened-8-color); + } + .topic-voting-votes { font-weight: bold; } @@ -224,6 +243,8 @@ overflow: hidden; font-style: italic; + color: var(--foreground-secondary-color); + h1 { margin: 0 0 0.4rem; } @@ -236,11 +257,13 @@ font-style: italic; content: "Re-collapse topic text"; display: none; + color: var(--foreground-secondary-color); } &[open] { font-style: normal; font-size: 0.8rem; + color: var(--foreground-primary-color); summary { font-size: 0.6rem; @@ -275,6 +298,10 @@ } } +.topic-info-comments-new { + color: var(--alert-color); +} + .topic-info-source { display: flex; align-items: center; @@ -284,6 +311,7 @@ .topic-info-source-scheduled { font-style: italic; + color: var(--foreground-secondary-color); } .topic-full { @@ -299,6 +327,7 @@ .topic-full-byline { margin-bottom: 0.4rem; font-size: 0.6rem; + color: var(--foreground-secondary-color); } .topic-full-content-metadata { @@ -335,9 +364,11 @@ .topic-full-tags { margin-bottom: 0.4rem; font-size: 0.6rem; + color: var(--foreground-secondary-color); a { text-decoration: underline; + color: var(--foreground-secondary-color); &:hover { text-decoration: none; @@ -396,11 +427,18 @@ } .is-topic-mine { - border-left: 3px solid; + border-left: 3px solid var(--stripe-mine-color); margin-left: -3px; } .is-topic-official { - border-left: 3px solid; + border-left: 3px solid var(--alert-color); margin-left: -3px; + + h1 { + a, + a:visited { + color: var(--alert-color); + } + } } diff --git a/tildes/scss/styles.scss b/tildes/scss/styles.scss index 5b59ea2..16b1b7e 100644 --- a/tildes/scss/styles.scss +++ b/tildes/scss/styles.scss @@ -47,7 +47,6 @@ // Note: if you add a new theme, you may also want to add a new theme-color // meta tag inside the base.jinja2 template, so mobile browsers can match @import "themes/theme_mixins"; -@import "themes/theme_base"; @import "themes/default"; @import "themes/black"; @import "themes/dracula"; diff --git a/tildes/scss/themes/_theme_base.scss b/tildes/scss/themes/_theme_base.scss deleted file mode 100644 index c89f726..0000000 --- a/tildes/scss/themes/_theme_base.scss +++ /dev/null @@ -1,686 +0,0 @@ -// Copyright (c) 2018 Tildes contributors -// SPDX-License-Identifier: AGPL-3.0-or-later - -// This file should only contain rules that need to be affected by all the -// different themes, defined inside the `use-theme` mixin below. - -// Each theme should be defined in its own SCSS file, and consist of a SCSS map -// and a unique `body.theme-` selector. -// The `use-theme` mixin is called inside the body.theme- block and takes -// the theme's map as its only argument, applying each defined color available -// in the map. If a color variable is left undefined in the theme's map, it -// will fall back to the default value from `$default-theme` instead. - -body { - color: var(--foreground-primary-color); - background-color: var(--background-secondary-color); - - * { - border-color: var(--border-color); - } - - a { - color: var(--link-color); - - &:hover { - color: var(--link-hover-color); - } - - &:visited { - color: var(--link-visited-color); - } - - code { - color: var(--link-color); - - &:hover { - text-decoration: underline; - } - } - - &:visited code { - color: var(--link-visited-color); - } - } - - a.link-user, - a.link-group { - &:visited { - color: var(--link-color); - } - } - - a.logged-in-user-alert { - color: var(--alert-color); - - &:visited { - color: var(--alert-color); - } - } - - blockquote { - border-color: var(--foreground-highlight-color); - background-color: var(--background-secondary-color); - - code, - pre { - background-color: var(--background-primary-color); - } - } - - code, - pre { - color: var(--foreground-highlight-color); - background-color: var(--background-secondary-color); - } - - main { - background-color: var(--background-primary-color); - } - - meter { - // Crazy styles to get this to work adapted from Spectre.css's _meters.scss - background: var(--background-secondary-color); - - &::-webkit-meter-bar { - background: var(--background-secondary-color); - } - - // For some mysterious reason, none of the below rules can be merged - &::-webkit-meter-optimum-value { - background: var(--success-color); - } - - &:-moz-meter-optimum::-moz-meter-bar { - background: var(--success-color); - } - - &::-webkit-meter-suboptimum-value { - background: var(--warning-color); - } - - &:-moz-meter-sub-optimum::-moz-meter-bar { - background: var(--warning-color); - } - - &::-webkit-meter-even-less-good-value { - background: var(--error-color); - } - - &:-moz-meter-sub-sub-optimum::-moz-meter-bar { - background: var(--error-color); - } - } - - tbody tr:nth-of-type(2n + 1) { - background-color: var(--background-secondary-color); - } - - .table td { - border-bottom-color: var(--border-color); - } - - .table th { - border-bottom-color: var(--foreground-highlight-color); - } - - .form-autocomplete { - .menu { - background-color: var(--background-secondary-color); - } - } - - .breadcrumb .breadcrumb-item { - color: var(--foreground-secondary-color); - - &:not(:last-child) { - a { - color: var(--foreground-secondary-color); - } - } - - &:not(:first-child) { - &::before { - color: var(--foreground-secondary-color); - } - } - - &:last-child { - a { - color: var(--link-color); - } - } - } - - .btn { - color: var(--button-color); - background-color: transparent; - border-color: var(--button-color); - - &:hover { - background-color: var(--button-transparent-color); - } - } - - .btn-comment-collapse:hover { - border-color: var(--border-color); - } - - .btn-light { - color: var(--foreground-secondary-color); - border-color: var(--border-color); - - &:hover { - color: var(--link-color); - } - } - - .btn.btn-link { - color: var(--link-color); - background-color: transparent; - border-color: transparent; - - &:hover { - color: var(--link-color); - } - } - - .btn.btn-primary { - color: var(--button-by-brightness-color); - - background-color: var(--button-color); - border-color: var(--button-color); - - &:hover { - background-color: var(--button-darkened-10-color); - border-color: var(--button-darkened-10-color); - } - - &:visited { - color: var(--button-by-brightness-color); - } - } - - .btn-used { - color: var(--button-used-color); - border-color: var(--button-used-darkened-3-color); - - &:hover { - background-color: var(--button-used-darkened-3-color); - border-color: var(--button-used-darkened-8-color); - color: var(--white-color); - } - } - - .btn-post-action { - color: var(--foreground-secondary-color); - - &:hover { - color: var(--foreground-extreme-color); - } - } - - .btn-post-action-used { - color: var(--button-used-color); - } - - .btn-comment-label-exemplary { - @include label-button(var(--comment-label-exemplary-color)); - } - - .btn-comment-label-joke { - @include label-button(var(--comment-label-joke-color)); - } - - .btn-comment-label-noise { - @include label-button(var(--comment-label-noise-color)); - } - - .btn-comment-label-offtopic { - @include label-button(var(--comment-label-offtopic-color)); - } - - .btn-comment-label-malice { - @include label-button(var(--comment-label-malice-color)); - } - - .chip { - background-color: var(--background-secondary-color); - color: var(--foreground-highlight-color); - - &.active { - background-color: var(--button-color); - color: var(--button-by-brightness-color); - - .btn { - color: var(--button-by-brightness-color); - } - } - - &.error { - background-color: var(--error-color); - - color: var(--error-by-brightness-color); - - .btn { - color: var(--error-by-brightness-color); - } - } - } - - .comment-branch-counter { - color: var(--foreground-secondary-color); - } - - .comment-nav-link, - .comment-nav-link:visited { - color: var(--foreground-secondary-color); - } - - .comment-removed-warning { - color: var(--warning-color); - } - - .label-comment-exemplary { - @include theme-special-label( - var(--background-label-exemplary-color), - var(--foreground-label-exemplary-color), - var(--comment-label-exemplary-color) - ); - } - - .label-comment-joke { - @include theme-special-label( - var(--background-label-joke-color), - var(--foreground-label-joke-color), - var(--comment-label-joke-color) - ); - } - - .label-comment-noise { - @include theme-special-label( - var(--background-label-noise-color), - var(--foreground-label-noise-color), - var(--comment-label-noise-color) - ); - } - - .label-comment-offtopic { - @include theme-special-label( - var(--background-label-offtopic-color), - var(--foreground-label-offtopic-color), - var(--comment-label-offtopic-color) - ); - } - - .label-comment-malice { - @include theme-special-label( - var(--background-label-malice-color), - var(--foreground-label-malice-color), - var(--comment-label-malice-color) - ); - } - - %collapsed-theme { - .comment-header { - background-color: var(--background-primary-color); - } - } - - .is-comment-collapsed:not(:target) { - @extend %collapsed-theme; - } - - .is-comment-collapsed-individual:not(:target) { - > .comment-itself { - @extend %collapsed-theme; - } - } - - .comment-header { - color: var(--foreground-highlight-color); - background-color: var(--background-secondary-color); - } - - .comment:target > .comment-itself { - border-left-color: var(--stripe-target-color); - } - - .divider { - border-color: var(--border-color); - } - - .divider[data-content]::after { - color: var(--foreground-primary-color); - background-color: var(--background-primary-color); - } - - .donation-goal-meter-over-goal { - background: var(--comment-label-exemplary-color); - - &::-webkit-meter-bar { - background: var(--comment-label-exemplary-color); - } - } - - .dropdown .menu .btn-post-action:hover { - background-color: var(--background-secondary-color); - } - - .empty-subtitle { - color: var(--foreground-secondary-color); - } - - .form-autocomplete .form-autocomplete-input .form-input { - border-color: transparent; - } - - .form-input, - .form-input[readonly] { - color: var(--foreground-primary-color); - background-color: var(--background-input-color); - border-color: var(--border-color); - } - - // error colors for :invalid inputs, using same approach as Spectre - .form-input:not(:placeholder-shown):invalid { - border-color: var(--error-color); - - &:focus { - box-shadow: 0 0 0 1px var(--error-color); - } - - + .form-input-hint { - color: var(--error-color); - } - } - - .form-markdown-preview { - border-color: var(--border-color); - } - - .form-select { - border-color: var(--border-color); - } - - .form-select:not([multiple]):not([size]) { - background-color: var(--background-input-color); - } - - .group-list-item-not-subscribed { - a.link-group { - color: var(--warning-color); - } - } - - .input-group-addon { - background-color: var(--background-secondary-color); - color: var(--foreground-highlight-color); - } - - .label-topic-tag { - padding: 0; - - a, - a:hover, - a:visited { - color: var(--foreground-primary-color); - } - } - - .label-topic-tag-nsfw, - .label-topic-tag[class*="label-topic-tag-nsfw-"] { - @include theme-special-label( - var(--topic-tag-nsfw-color), - var(--topic-tag-nsfw-foreground-color), - var(--topic-tag-nsfw-border-color) - ); - } - - .label-topic-tag-spoiler, - .label-topic-tag[class*="label-topic-tag-spoiler-"] { - @include theme-special-label( - var(--topic-tag-spoiler-color), - var(--topic-tag-spoiler-foreground-color), - var(--topic-tag-spoiler-border-color) - ); - } - - .link-no-visited-color:visited { - color: var(--link-color); - } - - .logged-in-user-username, - .logged-in-user-username:visited { - color: var(--foreground-primary-color); - } - - .menu { - background-color: var(--background-primary-color); - border-color: var(--border-color); - } - - .message { - header { - color: var(--foreground-highlight-color); - background-color: var(--background-secondary-color); - } - } - - .nav .nav-item { - a { - color: var(--link-color); - - &:hover { - color: var(--link-hover-color); - } - } - - &.active a { - color: var(--link-color); - } - } - - .settings-list { - a:visited { - color: var(--link-color); - } - } - - .sidebar-controls { - background-color: var(--background-secondary-color); - } - - #sidebar { - background-color: var(--background-primary-color); - border-left-color: var(--border-color); - } - - #site-footer a:visited { - color: var(--link-color); - } - - .site-header-context { - a, - a:visited { - color: var(--foreground-primary-color); - } - - .toast a, - .toast a:visited { - color: var(--link-color); - } - } - - .site-header-logo, - .site-header-logo:visited { - color: var(--foreground-highlight-color); - } - - .site-header-sidebar-button.badge[data-badge]::after { - background-color: var(--alert-color); - } - - .tab { - border-color: var(--border-color); - } - - .tab .tab-item { - a { - color: var(--foreground-primary-color); - } - - &.active a, - &.active button { - color: var(--link-color); - border-bottom-color: var(--link-color); - } - } - - .text-error { - color: var(--error-color); - } - - .text-link { - color: var(--link-color); - } - - .text-secondary { - color: var(--foreground-secondary-color); - } - - .text-warning { - color: var(--warning-color); - } - - .text-wiki { - h1, - h2, - h3, - h4, - h5, - h6 { - a { - color: var(--foreground-highlight-color); - } - } - } - - .toast { - color: var(--foreground-highlight-color); - background-color: var(--background-secondary-color); - - a { - color: var(--link-color); - } - } - - .toast.toast-warning { - border-color: var(--warning-color); - color: var(--warning-foreground-color); - background-color: var(--warning-background-color); - } - - .topic-actions { - .btn-post-action { - color: var(--link-color); - } - - .btn-post-action-used { - color: var(--link-visited-color); - } - } - - .topic-listing { - > li:nth-of-type(2n) { - color: var(--foreground-mixed-color); - background-color: var(--background-mixed-color); - } - } - - .topic-full-byline { - color: var(--foreground-secondary-color); - } - - .topic-full-tags { - color: var(--foreground-secondary-color); - - a { - color: var(--foreground-secondary-color); - } - } - - .topic-info-comments-new { - color: var(--alert-color); - } - - .topic-info-source-scheduled { - color: var(--foreground-secondary-color); - } - - .topic-log-entry-time { - color: var(--foreground-secondary-color); - } - - .topic-text-excerpt { - color: var(--foreground-secondary-color); - - summary::after { - color: var(--foreground-secondary-color); - } - - &[open] { - color: var(--foreground-primary-color); - } - } - - .topic-voting.btn-used { - border-color: transparent; - - &:hover { - background-color: var(--button-darkened-3-color); - border-color: var(--button-darkened-8-color); - } - } - - .is-comment-deleted, - .is-comment-removed { - color: var(--foreground-secondary-color); - } - - .is-comment-mine > .comment-itself { - border-left-color: var(--stripe-mine-color); - } - - .is-comment-exemplary { - > .comment-itself { - border-left-color: var(--comment-label-exemplary-color); - } - } - - .is-comment-new { - > .comment-itself { - border-left-color: var(--alert-color); - } - - .comment-text { - color: var(--foreground-highlight-color); - } - } - - .is-message-mine, - .is-topic-mine { - border-left-color: var(--stripe-mine-color); - } - - .is-topic-official { - border-left-color: var(--alert-color); - - h1 { - a, - a:visited { - color: var(--alert-color); - } - } - } -} diff --git a/tildes/scss/themes/_theme_mixins.scss b/tildes/scss/themes/_theme_mixins.scss index edf02b8..d217cb1 100644 --- a/tildes/scss/themes/_theme_mixins.scss +++ b/tildes/scss/themes/_theme_mixins.scss @@ -1,20 +1,6 @@ // Copyright (c) 2020 Tildes contributors // SPDX-License-Identifier: AGPL-3.0-or-later -@mixin label-button($color) { - color: $color; - border-color: $color; - - &:hover { - color: $color; - } - - &.btn-used:hover { - background-color: $color; - color: var(--white-color); - } -} - @mixin theme-preview-block($name, $foreground, $background) { .theme-preview-block-#{$name} { background-color: $background; @@ -23,20 +9,6 @@ } } -@mixin theme-special-label($background-color, $foreground-color, $border-color) { - background-color: $background-color; - color: $foreground-color; - border: 1px solid $border-color; - padding: 0 0.2rem; - line-height: 0.9rem; - - a, - a:hover, - a:visited { - color: $foreground-color; - } -} - @function map-get-fallback($map, $preferred-key, $fallback-key) { // map-get that will fall back to a second key if the first isn't set @if (map-has-key($map, $preferred-key)) {