mirror of https://gitlab.com/tildes/tildes.git
Browse Source
CSS: Move all theme color rules into normal places
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.merge-requests/126/merge
Deimos
4 years ago
30 changed files with 547 additions and 724 deletions
-
78tildes/scss/_base.scss
-
25tildes/scss/modules/_breadcrumbs.scss
-
97tildes/scss/modules/_btn.scss
-
22tildes/scss/modules/_chip.scss
-
26tildes/scss/modules/_comment.scss
-
6tildes/scss/modules/_divider.scss
-
8tildes/scss/modules/_donation.scss
-
4tildes/scss/modules/_dropdown.scss
-
4tildes/scss/modules/_empty.scss
-
37tildes/scss/modules/_form.scss
-
6tildes/scss/modules/_group.scss
-
2tildes/scss/modules/_input.scss
-
79tildes/scss/modules/_label.scss
-
16tildes/scss/modules/_link.scss
-
5tildes/scss/modules/_logged-in-user.scss
-
4tildes/scss/modules/_menu.scss
-
5tildes/scss/modules/_message.scss
-
6tildes/scss/modules/_nav.scss
-
4tildes/scss/modules/_settings.scss
-
7tildes/scss/modules/_sidebar.scss
-
4tildes/scss/modules/_site-footer.scss
-
17tildes/scss/modules/_site-header.scss
-
13tildes/scss/modules/_tab.scss
-
8tildes/scss/modules/_table.scss
-
17tildes/scss/modules/_text.scss
-
14tildes/scss/modules/_toast.scss
-
42tildes/scss/modules/_topic.scss
-
1tildes/scss/styles.scss
-
686tildes/scss/themes/_theme_base.scss
-
28tildes/scss/themes/_theme_mixins.scss
@ -1,686 +0,0 @@ |
|||
// Copyright (c) 2018 Tildes contributors <code@tildes.net> |
|||
// 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-<name>` selector. |
|||
// The `use-theme` mixin is called inside the body.theme-<name> 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); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue