IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

FEATURE: automatic dark mode (#10341)

Browse Source 
A first step to adding automatic dark mode color scheme switching. Adds a new SCSS file at `color_definitions.scss` that serves to output all SCSS color variables as CSS custom properties. And replaces all SCSS color variables with the new CSS custom properties throughout the stylesheets. 

This is an alpha feature at this point, can only be enabled via console using the `default_dark_mode_color_scheme_id` site setting.
This commit is contained in:
Penar Musaraj 2020-08-03 22:57:10 -04:00 committed by GitHub
parent 041cd15667
commit c937afc75e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
142 changed files with 1583 additions and 1311 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
app/assets/stylesheets/color_definitions.scss Normal file
View File

@ -0,0 +1,117 @@
// This file maps all SCSS color variables to CSS custom properties.
// It is compiled to CSS separately from the rest of the app.
// The source variables come from color_transformations.scss and variables.scss
@import "common/foundation/variables";
// this converts HEX colors to RGBs so they can be used in vanilla CSS
// i.e.: rgba(var(--primary-low-rgb), 0.5)
//
// Note that "rgba(var(--primary-low), 0.5)" will not work,
// because --primary-low has a HEX color value
@function hexToRGB($hex) {
@return red($hex), green($hex), blue($hex);
}
:root {
--primary: #{$primary};
--secondary: #{$secondary};
--tertiary: #{$tertiary};
--quaternary: #{$quaternary};
--header_background: #{$header_background};
--header_primary: #{$header_primary};
--highlight: #{$highlight};
--danger: #{$danger};
--success: #{$success};
--love: #{$love};
--primary-rgb: #{hexToRGB($primary)};
--primary-low-rgb: #{hexToRGB($primary-low)};
--secondary-rgb: #{hexToRGB($secondary)};
--header_background-rgb: #{hexToRGB($header_background)};
--primary-very-low: #{$primary-very-low};
--primary-low: #{$primary-low};
--primary-low-mid: #{$primary-low-mid};
--primary-medium: #{$primary-medium};
--primary-high: #{$primary-high};
--primary-very-high: #{$primary-very-high};
--header_primary-low: #{$header_primary-low};
--header_primary-low-mid: #{$header_primary-low-mid};
--header_primary-medium: #{$header_primary-medium};
--header_primary-high: #{$header_primary-high};
--header_primary-very-high: #{$header_primary-very-high};
--secondary-low: #{$secondary-low};
--secondary-medium: #{$secondary-medium};
--secondary-high: #{$secondary-high};
--secondary-very-high: #{$secondary-very-high};
--tertiary-low: #{$tertiary-low};
--tertiary-medium: #{$tertiary-medium};
--tertiary-high: #{$tertiary-high};
--tertiary-hover: #{$tertiary-hover};
--quaternary-low: #{$quaternary-low};
--highlight-low: #{$highlight-low};
--highlight-medium: #{$highlight-medium};
--highlight-high: #{$highlight-high};
--danger-low: #{$danger-low};
--danger-low-mid: #{$danger-low-mid};
--danger-medium: #{$danger-medium};
--danger-hover: #{$danger-hover};
--success-low: #{$success-low};
--success-medium: #{$success-medium};
--success-hover: #{$success-hover};
--love-low: #{$love-low};
--wiki: #{$wiki};
--blend-primary-secondary-5: #{$blend-primary-secondary-5};
--primary-med-or-secondary-med: #{$primary-med-or-secondary-med};
--primary-med-or-secondary-high: #{$primary-med-or-secondary-high};
--primary-high-or-secondary-low: #{$primary-high-or-secondary-low};
--primary-low-mid-or-secondary-high: #{$primary-low-mid-or-secondary-high};
--primary-low-mid-or-secondary-low: #{$primary-low-mid-or-secondary-low};
--primary-or-primary-low-mid: #{$primary-or-primary-low-mid};
--highlight-low-or-medium: #{$highlight-low-or-medium};
--tertiary-low-or-tertiary-high: #{$tertiary-low-or-tertiary-high};
--tertiary-med-or-tertiary: #{$tertiary-med-or-tertiary};
--secondary-or-primary: #{$secondary-or-primary};
--tertiary-or-white: #{$tertiary-or-white};
--facebook-or-white: #{$facebook-or-white};
--twitter-or-white: #{$twitter-or-white};
--hljs-comment: #{$hljs-comment};
--hljs-number: #{$hljs-number};
--hljs-string: #{$hljs-string};
--hljs-literal: #{$hljs-literal};
--hljs-tag: #{$hljs-tag};
--hljs-attribute: #{$hljs-attribute};
--hljs-symbol: #{$hljs-symbol};
--hljs-bg: #{$hljs-bg};
--google: #{$google};
--google-hover: #{$google-hover};
--instagram: #{$instagram};
--instagram-hover: #{$instagram-hover};
--facebook: #{$facebook};
--facebook-hover: #{$facebook-hover};
--cas: #{$cas};
--twitter: #{$twitter};
--twitter-hover: #{$twitter-hover};
--github: #{$github};
--github-hover: #{$github-hover};
--discord: #{$discord};
--discord-hover: #{$discord-hover};
--gold: #{$gold};
--silver: #{$silver};
--bronze: #{$bronze};
}

88
app/assets/stylesheets/common/admin/admin_base.scss
View File

@ -59,8 +59,8 @@ $mobile-breakpoint: 700px;
height: 100%; height: 100%;
background: linear-gradient( background: linear-gradient(
to right, to right,
rgba($secondary, 1) 0%, rgba(var(--secondary-rgb), 1) 0%,
rgba($secondary, 0) 100% rgba(var(--secondary-rgb), 0) 100%
); );
} }
&:after { &:after {
@ -71,8 +71,8 @@ $mobile-breakpoint: 700px;
height: 100%; height: 100%;
background: linear-gradient( background: linear-gradient(
to right, to right,
rgba($secondary, 0) 0%, rgba(var(--secondary-rgb), 0) 0%,
rgba($secondary, 1) 100% rgba(var(--secondary-rgb), 1) 100%
); );
} }
} }
@ -100,10 +100,10 @@ $mobile-breakpoint: 700px;
padding: 8px; padding: 8px;
} }
tr:hover { tr:hover {
background-color: $primary-very-low; background-color: var(--primary-very-low);
} }
tr.selected { tr.selected {
background-color: $primary-low; background-color: var(--primary-low);
} }
.filters input { .filters input {
margin-bottom: 0; margin-bottom: 0;
@ -134,7 +134,7 @@ $mobile-breakpoint: 700px;
} }
.label { .label {
display: block; display: block;
color: $primary-medium; color: var(--primary-medium);
font-size: $font-down-1; font-size: $font-down-1;
margin: 0.5em 0 0.15em 0; margin: 0.5em 0 0.15em 0;
} }
@ -213,10 +213,10 @@ $mobile-breakpoint: 700px;
} }
.site-text { .site-text {
cursor: pointer; cursor: pointer;
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
margin-bottom: 0.5em; margin-bottom: 0.5em;
&.overridden { &.overridden {
background-color: $highlight-medium; background-color: var(--highlight-medium);
} }
h3 { h3 {
font-weight: normal; font-weight: normal;
@ -236,7 +236,7 @@ $mobile-breakpoint: 700px;
@include breakpoint(mobile-extra-large) { @include breakpoint(mobile-extra-large) {
word-wrap: break-word; word-wrap: break-word;
} }
color: $primary-medium; color: var(--primary-medium);
} }
} }
.edit-site-text { .edit-site-text {
@ -258,7 +258,7 @@ $mobile-breakpoint: 700px;
} }
} }
p.warning { p.warning {
color: $danger; color: var(--danger);
} }
} }
@ -269,10 +269,10 @@ $mobile-breakpoint: 700px;
font-size: $font-down-1; font-size: $font-down-1;
float: right; float: right;
margin-right: 10px; margin-right: 10px;
background-color: $primary-low; background-color: var(--primary-low);
padding: 2px 5px; padding: 2px 5px;
border-radius: 5px; border-radius: 5px;
color: $primary; color: var(--primary);
} }
} }
@ -324,11 +324,11 @@ $mobile-breakpoint: 700px;
display: inline-block; display: inline-block;
.bar { .bar {
margin-top: 5px; margin-top: 5px;
background-color: $tertiary; background-color: var(--tertiary);
display: inline-block; display: inline-block;
text-align: right; text-align: right;
padding-right: 8px; padding-right: 8px;
color: $secondary; color: var(--secondary);
} }
} }
} }
@ -340,7 +340,7 @@ $mobile-breakpoint: 700px;
.admin-users .users-list { .admin-users .users-list {
.username .d-icon { .username .d-icon {
color: $primary-medium; color: var(--primary-medium);
} }
} }
@ -354,7 +354,7 @@ $mobile-breakpoint: 700px;
z-index: z("dropdown"); z-index: z("dropdown");
box-shadow: shadow("card"); box-shadow: shadow("card");
margin-top: -2px; margin-top: -2px;
background-color: $secondary; background-color: var(--secondary);
padding: 12px 12px 5px; padding: 12px 12px 5px;
.powered-by { .powered-by {
font-size: $font-down-1; font-size: $font-down-1;
@ -438,14 +438,14 @@ $mobile-breakpoint: 700px;
.admin-controls { .admin-controls {
display: flex; display: flex;
background-color: $primary-low; background-color: var(--primary-low);
align-items: center; align-items: center;
.admin-actions { .admin-actions {
margin-left: auto; margin-left: auto;
} }
nav { nav {
background-color: $primary-low; background-color: var(--primary-low);
width: 100%; width: 100%;
} }
nav { nav {
@ -472,8 +472,8 @@ $mobile-breakpoint: 700px;
height: calc(100% - 5px); height: calc(100% - 5px);
background: linear-gradient( background: linear-gradient(
to right, to right,
rgba($primary-low, 1) 0%, rgba(var(--primary-low-rgb), 1) 0%,
rgba($primary-low, 0) 100% rgba(var(--primary-low-rgb), 0) 100%
); );
} }
@ -485,8 +485,8 @@ $mobile-breakpoint: 700px;
height: calc(100% - 5px); height: calc(100% - 5px);
background: linear-gradient( background: linear-gradient(
to right, to right,
rgba($primary-low, 0) 0%, rgba(var(--primary-low-rgb), 0) 0%,
rgba($primary-low, 1) 100% rgba(var(--primary-low-rgb), 1) 100%
); );
} }
} }
@ -510,7 +510,7 @@ $mobile-breakpoint: 700px;
> li { > li {
margin: 0; margin: 0;
a.active { a.active {
background: $primary-medium; background: var(--primary-medium);
} }
&:last-of-type { &:last-of-type {
> a { > a {
@ -522,10 +522,10 @@ $mobile-breakpoint: 700px;
h1 { h1 {
font-size: $font-up-3; font-size: $font-up-3;
line-height: $line-height-medium; line-height: $line-height-medium;
color: $primary; color: var(--primary);
} }
.controls { .controls {
background: $primary-low; background: var(--primary-low);
width: 100%; width: 100%;
padding: 10px; padding: 10px;
display: flex; display: flex;
@ -561,12 +561,12 @@ $mobile-breakpoint: 700px;
float: left; float: left;
padding: 5px 10px; padding: 5px 10px;
margin-right: 15px; margin-right: 15px;
border: 1px solid $primary-medium; border: 1px solid var(--primary-medium);
border-radius: 3px; border-radius: 3px;
background: transparent; background: transparent;
color: $primary; color: var(--primary);
&:hover { &:hover {
background-color: $primary-low-mid; background-color: var(--primary-low-mid);
} }
@media (max-width: $mobile-breakpoint) { @media (max-width: $mobile-breakpoint) {
display: inline-block; display: inline-block;
@ -646,15 +646,15 @@ $mobile-breakpoint: 700px;
} }
.text-successful { .text-successful {
color: $success; color: var(--success);
} }
.text-danger { .text-danger {
color: $danger; color: var(--danger);
} }
.text-muted { .text-muted {
color: $primary-medium; color: var(--primary-medium);
} }
.admin-nav { .admin-nav {
@ -677,10 +677,12 @@ $mobile-breakpoint: 700px;
width: 100%; width: 100%;
} }
background-color: $secondary; // Todo: set this properly - it needs to be >= the menu height background-color: var(
--secondary
); // Todo: set this properly - it needs to be >= the menu height
min-height: 875px; min-height: 875px;
margin-left: 0; margin-left: 0;
border-left: solid 1px $primary-low; border-left: solid 1px var(--primary-low);
padding: 30px 0 30px 30px; padding: 30px 0 30px 30px;
@media (max-width: $mobile-breakpoint) { @media (max-width: $mobile-breakpoint) {
padding: 30px 0; padding: 30px 0;
@ -711,10 +713,10 @@ $mobile-breakpoint: 700px;
section.details { section.details {
h1 { h1 {
font-size: $font-up-3; font-size: $font-up-3;
color: $primary; color: var(--primary);
padding: 5px 10px; padding: 5px 10px;
margin: 30px 0 5px 0; margin: 30px 0 5px 0;
border-bottom: 5px solid $primary-low; border-bottom: 5px solid var(--primary-low);
} }
} }
@ -754,10 +756,10 @@ section.details {
.tl3-requirements { .tl3-requirements {
.d-icon-check { .d-icon-check {
color: $success; color: var(--success);
} }
.d-icon-times { .d-icon-times {
color: $danger; color: var(--danger);
} }
} }
@ -844,12 +846,12 @@ table#user-badges {
@mixin value-btn { @mixin value-btn {
width: 29px; width: 29px;
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
outline: none; outline: none;
padding: 0; padding: 0;
&:focus { &:focus {
border-color: $tertiary; border-color: var(--tertiary);
} }
} }
@ -866,12 +868,12 @@ table#user-badges {
.value-input { .value-input {
box-sizing: border-box; box-sizing: border-box;
flex: 1 0 0px; flex: 1 0 0px;
border-color: $primary-low; border-color: var(--primary-low);
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
&:focus { &:focus {
border-color: $tertiary; border-color: var(--tertiary);
box-shadow: none; box-shadow: none;
} }
} }
@ -968,7 +970,7 @@ table#user-badges {
} }
a.inline-editable-field { a.inline-editable-field {
color: $primary; color: var(--primary);
cursor: pointer; cursor: pointer;
} }

34
app/assets/stylesheets/common/admin/admin_report.scss
View File

@ -8,7 +8,7 @@
.header { .header {
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
margin-bottom: 0.5em; margin-bottom: 0.5em;
padding-bottom: 0.5em; padding-bottom: 0.5em;
} }
@ -30,16 +30,16 @@
font-weight: 700; font-weight: 700;
.report-url { .report-url {
color: $primary; color: var(--primary);
} }
.info { .info {
cursor: pointer; cursor: pointer;
margin-left: 0.25em; margin-left: 0.25em;
color: $primary-low-mid; color: var(--primary-low-mid);
&:hover { &:hover {
color: $primary-medium; color: var(--primary-medium);
} }
} }
} }
@ -51,16 +51,16 @@
&.trending-down, &.trending-down,
&.high-trending-down { &.high-trending-down {
color: $danger; color: var(--danger);
} }
&.trending-up, &.trending-up,
&.high-trending-up { &.high-trending-up {
color: $success; color: var(--success);
} }
&.no-change { &.no-change {
color: $primary-medium; color: var(--primary-medium);
.d-icon { .d-icon {
display: none; display: none;
} }
@ -91,7 +91,7 @@
border: 1px solid transparent; border: 1px solid transparent;
a { a {
color: $primary-medium; color: var(--primary-medium);
} }
.d-icon { .d-icon {
@ -103,19 +103,19 @@
&.no-data, &.no-data,
&.rate-limited { &.rate-limited {
background: $secondary; background: var(--secondary);
border-color: $primary-low; border-color: var(--primary-low);
color: $primary-low-mid; color: var(--primary-low-mid);
} }
&.rate-limited .d-icon { &.rate-limited .d-icon {
color: $danger; color: var(--danger);
} }
&.timeout, &.timeout,
&.exception { &.exception {
border-color: $danger-low; border-color: var(--danger-low);
color: $danger; color: var(--danger);
} }
} }
@ -135,7 +135,7 @@
flex: 1 0 0px; flex: 1 0 0px;
.mode-btn.is-current { .mode-btn.is-current {
color: $tertiary; color: var(--tertiary);
} }
} }
} }
@ -147,8 +147,8 @@
margin-bottom: 1em; margin-bottom: 1em;
.chart-grouping.active { .chart-grouping.active {
background: $tertiary; background: var(--tertiary);
color: $secondary; color: var(--secondary);
} }
} }

8
app/assets/stylesheets/common/admin/admin_report_counters.scss
View File

@ -16,7 +16,7 @@
@include ellipsis; @include ellipsis;
.d-icon { .d-icon {
color: $primary-low-mid; color: var(--primary-low-mid);
min-width: 14px; min-width: 14px;
text-align: center; text-align: center;
} }
@ -33,20 +33,20 @@
} }
.d-icon-minus { .d-icon-minus {
color: $primary-medium; color: var(--primary-medium);
font-size: $font-down-3; font-size: $font-down-3;
} }
&.high-trending-up, &.high-trending-up,
&.trending-up { &.trending-up {
.d-icon { .d-icon {
color: $success; color: var(--success);
} }
} }
&.high-trending-down, &.high-trending-down,
&.trending-down { &.trending-down {
.d-icon { .d-icon {
color: $danger; color: var(--danger);
} }
} }
} }

18
app/assets/stylesheets/common/admin/admin_report_table.scss
View File

@ -17,7 +17,7 @@
.table { .table {
margin: 0; margin: 0;
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
table-layout: fixed; table-layout: fixed;
tbody { tbody {
@ -35,12 +35,12 @@
&.is-current-sort { &.is-current-sort {
.d-icon { .d-icon {
color: $tertiary; color: var(--tertiary);
} }
.sort-btn:hover { .sort-btn:hover {
color: $primary-medium; color: var(--primary-medium);
background: $primary-low; background: var(--primary-low);
} }
} }
@ -48,10 +48,10 @@
background: none; background: none;
&:hover { &:hover {
color: $primary-medium; color: var(--primary-medium);
background: $primary-low; background: var(--primary-low);
.d-icon { .d-icon {
color: $primary-medium; color: var(--primary-medium);
} }
} }
} }
@ -64,7 +64,7 @@
} }
.total-row { .total-row {
background: $primary-very-low; background: var(--primary-very-low);
td { td {
font-weight: 700; font-weight: 700;
@ -81,7 +81,7 @@
margin-left: 0.5em; margin-left: 0.5em;
&.is-current { &.is-current {
color: $tertiary; color: var(--tertiary);
} }
} }
} }

2
app/assets/stylesheets/common/admin/admin_reports.scss
View File

@ -5,7 +5,7 @@
.report-header { .report-header {
padding-bottom: 0.5em; padding-bottom: 0.5em;
margin-bottom: 1em; margin-bottom: 1em;
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
} }
} }

6
app/assets/stylesheets/common/admin/api.scss
View File

@ -53,7 +53,7 @@ table.api-keys {
} }
tr.revoked { tr.revoked {
color: $primary-medium; color: var(--primary-medium);
} }
@include breakpoint(tablet) { @include breakpoint(tablet) {
@ -160,12 +160,12 @@ table.api-keys {
> p { > p {
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: $primary-low 1px solid; border-bottom: var(--primary-low) 1px solid;
} }
.filters { .filters {
margin: 5px 0; margin: 5px 0;
padding-bottom: 5px; padding-bottom: 5px;
border-bottom: $primary-low 1px solid; border-bottom: var(--primary-low) 1px solid;
.filter { .filter {
margin-bottom: 1em; margin-bottom: 1em;
} }

4
app/assets/stylesheets/common/admin/backups.scss
View File

@ -4,10 +4,10 @@ $rollback: #3d9970;
$rollback-dark: darken($rollback, 10%) !default; $rollback-dark: darken($rollback, 10%) !default;
$rollback-darker: darken($rollback, 20%) !default; $rollback-darker: darken($rollback, 20%) !default;
.btn-rollback { .btn-rollback {
color: $secondary; color: var(--secondary);
background: $rollback; background: $rollback;
.d-icon { .d-icon {
color: $secondary; color: var(--secondary);
} }
&:hover { &:hover {
background: $rollback-dark; background: $rollback-dark;

30
app/assets/stylesheets/common/admin/badges.scss
View File

@ -23,8 +23,8 @@
} }
.badges-header { .badges-header {
padding: 10px 0; padding: 10px 0;
border-top: 1px solid $primary-low; border-top: 1px solid var(--primary-low);
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
.badges-heading { .badges-heading {
margin: 0; margin: 0;
padding: 0 10px; padding: 0 10px;
@ -34,9 +34,9 @@
.admin-badge-list { .admin-badge-list {
height: 70vh; height: 70vh;
overflow-y: scroll; overflow-y: scroll;
border-right: 1px solid $primary-low; border-right: 1px solid var(--primary-low);
border-left: 1px solid $primary-low; border-left: 1px solid var(--primary-low);
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
.admin-badge-list-item { .admin-badge-list-item {
&:first-child { &:first-child {
border-top: none; border-top: none;
@ -50,8 +50,8 @@
font-size: $font-down-1; font-size: $font-down-1;
font-weight: normal; font-weight: normal;
padding: 0 6px; padding: 0 6px;
color: $secondary; color: var(--secondary);
background-color: $tertiary-medium; background-color: var(--tertiary-medium);
border-radius: 3px; border-radius: 3px;
} }
} }
@ -65,7 +65,7 @@
p.help { p.help {
margin: 0; margin: 0;
margin-top: 5px; margin-top: 5px;
color: $primary-medium; color: var(--primary-medium);
font-size: $font-down-1; font-size: $font-down-1;
} }
.badge-grouping-control { .badge-grouping-control {
@ -109,7 +109,7 @@
.current-badge-actions { .current-badge-actions {
margin: 10px; margin: 10px;
padding: 10px; padding: 10px;
border-top: 1px solid $primary-low; border-top: 1px solid var(--primary-low);
} }
.buttons { .buttons {
display: flex; display: flex;
@ -132,8 +132,8 @@
max-width: 300px; max-width: 300px;
display: flex; display: flex;
align-items: center; align-items: center;
background-color: $primary-very-low; background-color: var(--primary-very-low);
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
padding: 0 10px 0 10px; padding: 0 10px 0 10px;
img, img,
@ -160,7 +160,7 @@
list-style: none; list-style: none;
margin: 0; margin: 0;
.badge-grouping-item { .badge-grouping-item {
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -179,17 +179,17 @@
.badge-errors, .badge-errors,
.badge-query-plan { .badge-query-plan {
padding: 5px; padding: 5px;
background-color: $primary-low; background-color: var(--primary-low);
} }
.count-warning { .count-warning {
background-color: $danger-low; background-color: var(--danger-low);
margin-bottom: 5px; margin-bottom: 5px;
padding: 10px; padding: 10px;
p { p {
margin: 0; margin: 0;
} }
.heading { .heading {
color: $danger; color: var(--danger);
font-weight: bold; font-weight: bold;
} }
} }

20
app/assets/stylesheets/common/admin/customize-install-theme.scss
View File

@ -8,12 +8,12 @@
} }
.install-theme-item { .install-theme-item {
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
border-bottom: none; border-bottom: none;
position: relative; position: relative;
&:last-child { &:last-child {
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
} }
input, input,
@ -29,11 +29,11 @@
} }
input:checked + label { input:checked + label {
color: $secondary; color: var(--secondary);
background-color: $tertiary; background-color: var(--tertiary);
+ .d-icon { + .d-icon {
display: block; display: block;
color: $secondary; color: var(--secondary);
} }
} }
@ -63,7 +63,7 @@
} }
.popular-theme-item { .popular-theme-item {
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
padding: 8px 0px; padding: 8px 0px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -72,16 +72,16 @@
.popular-theme-type { .popular-theme-type {
font-weight: normal; font-weight: normal;
font-size: $font-down-2; font-size: $font-down-2;
color: $primary-medium; color: var(--primary-medium);
} }
a { a {
color: $primary-very-high; color: var(--primary-very-high);
font-weight: bold; font-weight: bold;
&:hover, &:hover,
&:visited, &:visited,
&:active { &:active {
color: $primary-high; color: var(--primary-high);
} }
} }
@ -94,7 +94,7 @@
> span { > span {
font-style: italic; font-style: italic;
font-size: $font-down-1; font-size: $font-down-1;
color: $primary-medium; color: var(--primary-medium);
margin-right: 8px; margin-right: 8px;
} }

82
app/assets/stylesheets/common/admin/customize.scss
View File

@ -8,7 +8,7 @@
width: 54.054%; width: 54.054%;
margin-left: 1.8018%; margin-left: 1.8018%;
p.description { p.description {
color: $primary; color: var(--primary);
} }
.controls { .controls {
margin-top: 10px; margin-top: 10px;
@ -54,7 +54,7 @@
} }
.error { .error {
color: $danger; color: var(--danger);
} }
} }
@ -66,11 +66,11 @@
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;
.fa { .fa {
color: $danger; color: var(--danger);
} }
} }
.raw-error { .raw-error {
background-color: $primary-very-low; background-color: var(--primary-very-low);
padding: 5px; padding: 5px;
} }
} }
@ -87,7 +87,7 @@
.field-error { .field-error {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
background-color: $quaternary-low; background-color: var(--quaternary-low);
padding: 5px; padding: 5px;
} }
@ -101,7 +101,7 @@
.color-schemes li { .color-schemes li {
.d-icon { .d-icon {
margin-right: 0.25em; margin-right: 0.25em;
color: $primary-medium; color: var(--primary-medium);
} }
} }
.show-current-style { .show-current-style {
@ -183,9 +183,9 @@
.themes-list-header { .themes-list-header {
width: 100%; width: 100%;
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
border-top: 1px solid $primary-low; border-top: 1px solid var(--primary-low);
border-right: 1px solid $primary-low; border-right: 1px solid var(--primary-low);
display: flex; display: flex;
.tab { .tab {
@ -199,7 +199,7 @@
} }
&:last-child { &:last-child {
border-left: 1px solid $primary-low; border-left: 1px solid var(--primary-low);
} }
} }
} }
@ -214,24 +214,24 @@
@media screen and (max-height: 800px) { @media screen and (max-height: 800px) {
max-height: 40vh; max-height: 40vh;
} }
border-right: 1px solid $primary-low; border-right: 1px solid var(--primary-low);
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
width: 100%; width: 100%;
.themes-list-item:last-child { .themes-list-item:last-child {
border-bottom: none; border-bottom: none;
} }
.themes-list-item { .themes-list-item {
color: $primary; color: var(--primary);
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
display: flex; display: flex;
border-left: 1px solid $primary-low; border-left: 1px solid var(--primary-low);
&.inactive-indicator { &.inactive-indicator {
border-right: 0; border-right: 0;
border-left: 0; border-left: 0;
font-weight: bold; font-weight: bold;
color: $primary-medium; color: var(--primary-medium);
span.empty { span.empty {
padding-left: 5px; padding-left: 5px;
@ -239,17 +239,17 @@
} }
} }
&:not(.inactive-indicator):not(.selected):hover { &:not(.inactive-indicator):not(.selected):hover {
background-color: $primary-very-low; background-color: var(--primary-very-low);
.component { .component {
border-color: $primary-low-mid; border-color: var(--primary-low-mid);
} }
} }
&.selected { &.selected {
color: $secondary; color: var(--secondary);
background-color: $tertiary; background-color: var(--tertiary);
.components-list { .components-list {
color: $secondary; color: var(--secondary);
} }
.fa { .fa {
color: inherit; color: inherit;
@ -257,18 +257,18 @@
} }
&:not(.selected) { &:not(.selected) {
.broken-indicator { .broken-indicator {
color: $danger; color: var(--danger);
} }
.fa { .fa {
opacity: 0.7; opacity: 0.7;
} }
.default-indicator { .default-indicator {
color: $success; color: var(--success);
} }
} }
.light-grey-icon { .light-grey-icon {
color: $primary-medium; color: var(--primary-medium);
} }
.info { .info {
@ -287,11 +287,11 @@
display: inline-block; display: inline-block;
font-size: $font-down-1; font-size: $font-down-1;
align-items: baseline; align-items: baseline;
color: $primary-high; color: var(--primary-high);
.others-count, .others-count,
.others-count:hover { .others-count:hover {
color: $primary-high; color: var(--primary-high);
text-decoration: underline; text-decoration: underline;
} }
} }
@ -367,8 +367,8 @@
} }
.edit-main-nav .nav-pills > li a.active { .edit-main-nav .nav-pills > li a.active {
background-color: $quaternary; background-color: var(--quaternary);
color: $secondary; color: var(--secondary);
} }
.edit-main-nav ul { .edit-main-nav ul {
@ -398,12 +398,12 @@
} }
a.active { a.active {
background: $primary-medium; background: var(--primary-medium);
color: $secondary; color: var(--secondary);
} }
a.blank:not(.active) { a.blank:not(.active) {
color: $primary-medium; color: var(--primary-medium);
} }
input { input {
@ -462,7 +462,7 @@
padding: 5px 0 0 0; padding: 5px 0 0 0;
margin-left: 10px; margin-left: 10px;
width: 80px; width: 80px;
color: $primary; color: var(--primary);
} }
} }
} }
@ -500,7 +500,7 @@
} }
.description { .description {
margin: 0.15em 0 0; margin: 0.15em 0 0;
color: $primary-high; color: var(--primary-high);
font-size: $font-down-1; font-size: $font-down-1;
line-height: $line-height-medium; line-height: $line-height-medium;
} }
@ -508,7 +508,7 @@
.invalid .hex input { .invalid .hex input {
background-color: white; background-color: white;
color: black; color: black;
border-color: $danger; border-color: var(--danger);
} }
} }
@ -524,7 +524,7 @@
li { li {
&.disabled-child { &.disabled-child {
.child-link { .child-link {
color: $primary-medium; color: var(--primary-medium);
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
@ -551,7 +551,7 @@
display: block; display: block;
margin-bottom: 0.25em; margin-bottom: 0.25em;
+ label { + label {
color: $primary-medium; color: var(--primary-medium);
} }
} }
label { label {
@ -638,7 +638,7 @@
} }
.permalink-description { .permalink-description {
color: $primary-medium; color: var(--primary-medium);
} }
// embedding // embedding
@ -666,7 +666,7 @@
div.label { div.label {
display: block; display: block;
font-size: $font-down-1; font-size: $font-down-1;
color: $primary-medium; color: var(--primary-medium);
} }
td.controls, td.controls,
td.editing-controls { td.editing-controls {
@ -718,7 +718,7 @@
margin: 0.75em 0; margin: 0.75em 0;
} }
p.description { p.description {
color: $primary-medium; color: var(--primary-medium);
margin-bottom: 1em; margin-bottom: 1em;
max-width: 700px; max-width: 700px;
} }
@ -735,7 +735,7 @@
.user-field { .user-field {
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
.form-display { .form-display {
width: 25%; width: 25%;
display: inline-block; display: inline-block;
@ -793,7 +793,7 @@
.robots-txt-edit { .robots-txt-edit {
div.overridden { div.overridden {
background: $highlight-medium; background: var(--highlight-medium);
padding: 7px; padding: 7px;
margin-bottom: 7px; margin-bottom: 7px;
} }

62
app/assets/stylesheets/common/admin/dashboard.scss
View File

@ -15,12 +15,12 @@
.navigation { .navigation {
display: flex; display: flex;
margin: 0 0 2.5em 0; margin: 0 0 2.5em 0;
border-bottom: 1px solid $primary-low-mid; border-bottom: 1px solid var(--primary-low-mid);
.navigation-item { .navigation-item {
display: inline; display: inline;
&:hover { &:hover {
background: $primary-very-low; background: var(--primary-very-low);
} }
} }
@ -33,7 +33,7 @@
@mixin active-navigation-item { @mixin active-navigation-item {
.navigation-link { .navigation-link {
border-bottom: 0.4em solid $tertiary; border-bottom: 0.4em solid var(--tertiary);
} }
} }
@ -105,7 +105,7 @@
margin: 0 0.5em 0 0; margin: 0 0.5em 0 0;
a { a {
color: $primary; color: var(--primary);
} }
} }
@ -115,7 +115,7 @@
} }
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
margin-bottom: 0.5em; margin-bottom: 0.5em;
padding-bottom: 0.5em; padding-bottom: 0.5em;
} }
@ -167,7 +167,7 @@
.misc { .misc {
display: flex; display: flex;
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
.storage-stats, .storage-stats,
.last-dashboard-update { .last-dashboard-update {
@ -181,7 +181,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
border-right: 1px solid $primary-low; border-right: 1px solid var(--primary-low);
.backups, .backups,
.uploads { .uploads {
@ -204,7 +204,7 @@
display: block; display: block;
margin: 0 20px 20px 20px; margin: 0 20px 20px 20px;
padding: 20px 0 0 0; padding: 20px 0 0 0;
border-top: 1px solid $primary-low; border-top: 1px solid var(--primary-low);
border-left: none; border-left: none;
} }
} }
@ -250,14 +250,14 @@
margin-bottom: 2.5em; margin-bottom: 2.5em;
.d-icon-exclamation-triangle { .d-icon-exclamation-triangle {
color: $danger; color: var(--danger);
} }
.actions { .actions {
margin: 1em 0 0 0; margin: 1em 0 0 0;
display: flex; display: flex;
align-items: center; align-items: center;
color: $primary-medium; color: var(--primary-medium);
.btn { .btn {
margin-right: 1em; margin-right: 1em;
} }
@ -274,7 +274,7 @@
display: grid; display: grid;
flex: 1 0 auto; flex: 1 0 auto;
grid-template-columns: 33% repeat(auto-fit, minmax(20px, 1fr)); grid-template-columns: 33% repeat(auto-fit, minmax(20px, 1fr));
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
border-bottom: 0; border-bottom: 0;
font-weight: 700; font-weight: 700;
text-align: right; text-align: right;
@ -283,10 +283,10 @@
} }
.admin-report .main { .admin-report .main {
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
&:hover { &:hover {
background-color: $primary-very-low; background-color: var(--primary-very-low);
} }
} }
@ -306,7 +306,7 @@
padding: 0.5em 0.25em; padding: 0.5em 0.25em;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
.title { .title {
font-size: $font-0; font-size: $font-0;
@ -329,13 +329,13 @@
border: 0; border: 0;
&:hover { &:hover {
background-color: $primary-very-low; background-color: var(--primary-very-low);
} }
.d-icon { .d-icon {
font-size: $font-up-1; font-size: $font-up-1;
margin: 0 0.25em 0 0; margin: 0 0.25em 0 0;
color: $primary-low-mid; color: var(--primary-low-mid);
} }
} }
} }
@ -365,7 +365,7 @@
.label { .label {
display: flex; display: flex;
align-items: center; align-items: center;
color: $primary; color: var(--primary);
justify-content: center; justify-content: center;
border-radius: 9px 0 0 9px; border-radius: 9px 0 0 9px;
padding: 0 5px 0 8px; padding: 0 5px 0 8px;
@ -377,33 +377,33 @@
} }
.value { .value {
background: $secondary; background: var(--secondary);
border-radius: 0 9px 9px 0; border-radius: 0 9px 9px 0;
padding: 0 8px 0 5px; padding: 0 8px 0 5px;
} }
&.user-newuser { &.user-newuser {
.label { .label {
color: $primary-high; color: var(--primary-high);
} }
} }
&.user-basic, &.user-basic,
&.user-member { &.user-member {
background: $bronze; background: var(--bronze);
.label { .label {
color: $secondary; color: var(--secondary);
} }
} }
&.user-regular { &.user-regular {
background: $silver; background: var(--silver);
.label { .label {
color: $secondary; color: var(--secondary);
} }
} }
&.user-leader { &.user-leader {
background: $gold; background: var(--gold);
.label { .label {
color: $secondary; color: var(--secondary);
} }
} }
} }
@ -495,7 +495,7 @@
} }
.report { .report {
margin: 1.5%; margin: 1.5%;
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
flex: 1 1 28%; flex: 1 1 28%;
transition: box-shadow 0.25s; transition: box-shadow 0.25s;
min-width: 225px; min-width: 225px;
@ -507,7 +507,7 @@
box-sizing: border-box; box-sizing: border-box;
padding: 1em; padding: 1em;
.report-description { .report-description {
color: $primary-high; color: var(--primary-high);
} }
} }
&:hover { &:hover {
@ -521,7 +521,7 @@
flex-wrap: wrap; flex-wrap: wrap;
.section-title { .section-title {
flex: 1 1 100%; flex: 1 1 100%;
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
} }
@ -597,13 +597,13 @@
font-size: $font-up-4; font-size: $font-up-4;
} }
.up-to-date { .up-to-date {
color: $success; color: var(--success);
} }
.updates-available { .updates-available {
color: $danger; color: var(--danger);
} }
.critical-updates-available { .critical-updates-available {
color: $danger; color: var(--danger);
} }
} }

6
app/assets/stylesheets/common/admin/emails.scss
View File

@ -11,7 +11,7 @@
.reply-key { .reply-key {
display: block; display: block;
font-size: $font-down-1; font-size: $font-down-1;
color: $primary-medium; color: var(--primary-medium);
} }
.username div { .username div {
max-width: 180px; max-width: 180px;
@ -35,7 +35,7 @@
margin: 5px 10px; margin: 5px 10px;
} }
.error-description { .error-description {
color: $primary-medium; color: var(--primary-medium);
font-size: $font-down-1; font-size: $font-down-1;
} }
hr { hr {
@ -62,7 +62,7 @@
.admin-list-item { .admin-list-item {
width: 100%; width: 100%;
border-top: 1px solid $primary-low; border-top: 1px solid var(--primary-low);
padding: 0.25em 0; padding: 0.25em 0;
} }

2
app/assets/stylesheets/common/admin/plugins.scss
View File

@ -41,5 +41,5 @@
} }
.admin-plugins-official-badge { .admin-plugins-official-badge {
color: $success; color: var(--success);
} }

18
app/assets/stylesheets/common/admin/settings.scss
View File

@ -43,7 +43,7 @@
.uploaded-image-preview { .uploaded-image-preview {
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: $primary-medium; background-color: var(--primary-medium);
} }
} }
.setting-controls { .setting-controls {
@ -64,8 +64,8 @@
width: 100%; width: 100%;
} }
padding: 1px; padding: 1px;
background-color: $secondary; background-color: var(--secondary);
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
border-radius: 3px; border-radius: 3px;
transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s;
li.sortable-placeholder { li.sortable-placeholder {
@ -74,7 +74,7 @@
position: relative; position: relative;
line-height: $line-height-small; line-height: $line-height-small;
cursor: default; cursor: default;
border: 1px dashed $primary-low-mid; border: 1px dashed var(--primary-low-mid);
border-radius: 3px; border-radius: 3px;
background-clip: padding-box; background-clip: padding-box;
-moz-user-select: none; -moz-user-select: none;
@ -90,10 +90,10 @@
line-height: $line-height-large; line-height: $line-height-large;
} }
.validation-error { .validation-error {
color: $danger; color: var(--danger);
} }
.desc { .desc {
color: $primary-medium; color: var(--primary-medium);
} }
h3 { h3 {
font-size: $font-0; font-size: $font-0;
@ -111,17 +111,17 @@
} }
.setting.overridden { .setting.overridden {
h3 { h3 {
color: $highlight-high; color: var(--highlight-high);
} }
} }
.setting.overridden.string { .setting.overridden.string {
input[type="text"], input[type="text"],
input[type="password"], input[type="password"],
textarea { textarea {
background-color: $highlight-medium; background-color: var(--highlight-medium);
} }
} }
.warning { .warning {
color: $danger; color: var(--danger);
} }
} }

22
app/assets/stylesheets/common/admin/staff_logs.scss
View File

@ -1,10 +1,10 @@
// Styles for /admin/logs // Styles for /admin/logs
.web-hook-events { .web-hook-events {
border-bottom: dotted 1px $primary-low-mid; border-bottom: dotted 1px var(--primary-low-mid);
.heading-container { .heading-container {
width: 100%; width: 100%;
background-color: $primary-low; background-color: var(--primary-low);
} }
.col.heading { .col.heading {
font-weight: bold; font-weight: bold;
@ -19,7 +19,7 @@
} }
.ember-list-item-view { .ember-list-item-view {
width: 100%; width: 100%;
border-top: solid 1px $primary-low; border-top: solid 1px var(--primary-low);
} }
} }
@ -155,12 +155,12 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
margin-bottom: 0.25em; margin-bottom: 0.25em;
background-color: $primary-low; background-color: var(--primary-low);
padding: 3px 10px; padding: 3px 10px;
color: $primary; color: var(--primary);
&:hover { &:hover {
color: $primary; color: var(--primary);
background-color: $primary-low; background-color: var(--primary-low);
} }
.label { .label {
font-weight: bold; font-weight: bold;
@ -239,10 +239,10 @@ table.screened-ip-addresses {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
.d-icon-check { .d-icon-check {
color: $success; color: var(--success);
} }
.d-icon-ban { .d-icon-ban {
color: $danger; color: var(--danger);
} }
.d-icon { .d-icon {
margin-right: 0.25em; margin-right: 0.25em;
@ -363,10 +363,10 @@ table.screened-ip-addresses {
cursor: pointer; cursor: pointer;
.d-icon { .d-icon {
margin-right: 0.25em; margin-right: 0.25em;
color: $primary-medium; color: var(--primary-medium);
} }
&:hover .d-icon { &:hover .d-icon {
color: $danger; color: var(--danger);
} }
} }

6
app/assets/stylesheets/common/admin/users.scss
View File

@ -18,9 +18,9 @@
border-top: 0; border-top: 0;
} }
&.highlight-danger { &.highlight-danger {
background-color: $danger-low; background-color: var(--danger-low);
} }
border-top: 1px solid $primary-low; border-top: 1px solid var(--primary-low);
&:before, &:before,
&:after { &:after {
display: table; display: table;
@ -92,7 +92,7 @@
} }
.users-list { .users-list {
.username .d-icon { .username .d-icon {
color: $primary-medium; color: var(--primary-medium);
} }
} }
} }

38
app/assets/stylesheets/common/base/_topic-list.scss
View File

@ -15,9 +15,9 @@
clear: both; clear: both;
margin-bottom: 5px; margin-bottom: 5px;
.combo-box .combo-box-header { .combo-box .combo-box-header {
background: $secondary; background: var(--secondary);
color: $primary; color: var(--primary);
border: 1px solid $primary-medium; border: 1px solid var(--primary-medium);
font-size: $font-0; font-size: $font-0;
transition: none; transition: none;
} }
@ -50,13 +50,13 @@
.latest-topic-list-item.visited, .latest-topic-list-item.visited,
.category-topic-link.visited { .category-topic-link.visited {
a.title:not(.badge-notification) { a.title:not(.badge-notification) {
color: $primary-medium; color: var(--primary-medium);
} }
span.badge-category { span.badge-category {
color: $primary-medium; color: var(--primary-medium);
} }
a.discourse-tag { a.discourse-tag {
color: $primary-medium; color: var(--primary-medium);
} }
} }
@ -73,17 +73,17 @@
a.title { a.title {
padding: 15px 0; padding: 15px 0;
word-break: break-word; word-break: break-word;
color: $primary; color: var(--primary);
} }
.anon & { .anon & {
a.title:visited:not(.badge-notification) { a.title:visited:not(.badge-notification) {
color: $primary-medium; color: var(--primary-medium);
} }
} }
a.title.visited:not(.badge-notification) { a.title.visited:not(.badge-notification) {
color: $primary-medium; color: var(--primary-medium);
} }
} }
@ -110,15 +110,15 @@
border: none; border: none;
td { td {
border-bottom: 1px solid $danger-medium; border-bottom: 1px solid var(--danger-medium);
line-height: 0.1em; line-height: 0.1em;
padding: 0; padding: 0;
text-align: center; text-align: center;
} }
td span { td span {
background-color: $secondary; background-color: var(--secondary);
color: $danger-medium; color: var(--danger-medium);
padding: 0 8px; padding: 0 8px;
font-size: $font-down-1; font-size: $font-down-1;
} }
@ -132,11 +132,11 @@
} }
th { th {
button .d-icon { button .d-icon {
color: $primary-medium; color: var(--primary-medium);
} }
} }
td { td {
color: $primary-medium; color: var(--primary-medium);
font-size: $font-0; font-size: $font-0;
} }
@ -184,7 +184,7 @@
.topic-excerpt { .topic-excerpt {
font-size: $font-down-1; font-size: $font-down-1;
margin-top: 5px; margin-top: 5px;
color: $primary-high; color: var(--primary-high);
word-wrap: break-word; word-wrap: break-word;
line-height: $line-height-large; line-height: $line-height-large;
padding-right: 20px; padding-right: 20px;
@ -250,7 +250,7 @@
background-color: transparent; background-color: transparent;
padding: 0; padding: 0;
border: 0; border: 0;
color: $danger-medium; color: var(--danger-medium);
font-size: $font-0; font-size: $font-0;
cursor: default; cursor: default;
} }
@ -302,7 +302,7 @@ ol.category-breadcrumb {
} }
div.education { div.education {
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
.badge-notification.new-posts { .badge-notification.new-posts {
vertical-align: text-bottom; vertical-align: text-bottom;
} }
@ -310,12 +310,12 @@ div.education {
.list-cell { .list-cell {
padding: 12px 5px; padding: 12px 5px;
color: $primary-med-or-secondary-high; color: var(--primary-med-or-secondary-high);
} }
.table-heading { .table-heading {
@extend .list-cell; @extend .list-cell;
border-bottom: 3px solid $primary-low; border-bottom: 3px solid var(--primary-low);
} }
// This is not what we want: // This is not what we want:

2
app/assets/stylesheets/common/base/activation.scss
View File

@ -3,7 +3,7 @@
#simple-container { #simple-container {
border-radius: 10px; border-radius: 10px;
background-color: $secondary; background-color: var(--secondary);
padding: 20px; padding: 20px;
width: 550px; width: 550px;
margin: 0 auto; margin: 0 auto;

20
app/assets/stylesheets/common/base/alert.scss
View File

@ -1,7 +1,7 @@
.alert { .alert {
padding: 0.5em 2.5em 0.5em 1em; padding: 0.5em 2.5em 0.5em 1em;
background-color: $danger-low; background-color: var(--danger-low);
color: $primary; color: var(--primary);
position: relative; position: relative;
margin-bottom: 1em; margin-bottom: 1em;
@ -11,23 +11,23 @@
top: 0.265em; top: 0.265em;
right: 0.66em; right: 0.66em;
.d-icon { .d-icon {
color: $primary-medium; color: var(--primary-medium);
} }
} }
&.alert-success { &.alert-success {
background-color: $success-low; background-color: var(--success-low);
color: $primary; color: var(--primary);
} }
&.alert-error { &.alert-error {
background-color: $danger-low; background-color: var(--danger-low);
color: $primary; color: var(--primary);
} }
&.alert-info { &.alert-info {
background-color: $tertiary-low; background-color: var(--tertiary-low);
color: $primary; color: var(--primary);
&.clickable { &.clickable {
color: $tertiary; color: var(--tertiary);
} }
} }
} }

30
app/assets/stylesheets/common/base/category-list.scss
View File

@ -38,7 +38,7 @@
border-width: 0; border-width: 0;
border-left-width: 6px; border-left-width: 6px;
border-style: solid; border-style: solid;
border-color: $primary-low; border-color: var(--primary-low);
.mobile-view & { .mobile-view & {
width: 100%; width: 100%;
@ -85,7 +85,7 @@
border-left-width: 0; border-left-width: 0;
border-style: solid; border-style: solid;
border-color: $primary-low; border-color: var(--primary-low);
} }
&.no-logos { &.no-logos {
@ -123,7 +123,7 @@
margin-bottom: 1em; margin-bottom: 1em;
text-align: center; text-align: center;
font-size: $font-0; font-size: $font-0;
color: $primary-med-or-secondary-high; color: var(--primary-med-or-secondary-high);
position: relative; position: relative;
@include line-clamp(4); @include line-clamp(4);
@ -144,12 +144,12 @@
margin-top: 0.25em; margin-top: 0.25em;
line-height: $line-height-medium; line-height: $line-height-medium;
text-align: center; text-align: center;
color: $primary; color: var(--primary);
overflow: hidden; overflow: hidden;
} }
h4 a { h4 a {
color: $primary; color: var(--primary);
} }
.subcategory.with-subcategories { .subcategory.with-subcategories {
@ -186,7 +186,7 @@
} }
.subcategory-box-inner { .subcategory-box-inner {
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
border-left: none; border-left: none;
padding: 0.5em 0.5em 0.4em 0.5em; padding: 0.5em 0.5em 0.4em 0.5em;
} }
@ -248,14 +248,14 @@
padding: 1em 1em 0.5em 1em; padding: 1em 1em 0.5em 1em;
a[href] { a[href] {
width: 100%; width: 100%;
color: $primary; color: var(--primary);
} }
} }
.featured-topics { .featured-topics {
padding: 0.5em 1em 1em 1em; padding: 0.5em 1em 1em 1em;
ul { ul {
color: $primary-medium; color: var(--primary-medium);
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -281,7 +281,7 @@
h4 { h4 {
margin-bottom: 0; margin-bottom: 0;
.d-icon { .d-icon {
color: $primary-high; color: var(--primary-high);
height: 0.76em; height: 0.76em;
width: 0.76em; width: 0.76em;
vertical-align: baseline; vertical-align: baseline;
@ -291,7 +291,7 @@
.category-description { .category-description {
margin-top: 0.5em; margin-top: 0.5em;
overflow: hidden; overflow: hidden;
color: $primary-high; color: var(--primary-high);
} }
.category-logo.aspect-image { .category-logo.aspect-image {
margin-top: 0.5em; margin-top: 0.5em;
@ -308,7 +308,7 @@
.category-list.subcategories-with-subcategories { .category-list.subcategories-with-subcategories {
margin-top: 1em; margin-top: 1em;
margin-bottom: 0; margin-bottom: 0;
border-top: 1px solid $primary-low; border-top: 1px solid var(--primary-low);
.category-description { .category-description {
font-size: $font-down-1; font-size: $font-down-1;
} }
@ -320,7 +320,7 @@
.category-list .category.muted { .category-list .category.muted {
> h3 a.category-title-link, > h3 a.category-title-link,
> h4 a.category-title-link { > h4 a.category-title-link {
color: $primary-medium; color: var(--primary-medium);
font-size: $font-down-1; font-size: $font-down-1;
} }
> .category-description, > .category-description,
@ -346,7 +346,7 @@
} }
.muted-categories-link { .muted-categories-link {
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0.75em; padding: 0.75em;
@ -355,13 +355,13 @@
margin: 0 0 1em -3px; margin: 0 0 1em -3px;
.d-icon { .d-icon {
color: $primary-medium; color: var(--primary-medium);
margin-top: 0.25em; margin-top: 0.25em;
} }
} }
.muted-categories-heading { .muted-categories-heading {
color: $primary-medium; color: var(--primary-medium);
margin: 0; margin: 0;
} }

36
app/assets/stylesheets/common/base/code_highlighting.scss
View File

@ -7,12 +7,12 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
.hljs { .hljs {
display: block; display: block;
padding: 0.5em; padding: 0.5em;
color: $primary-very-high; color: var(--primary-very-high);
} }
.hljs-comment, .hljs-comment,
.hljs-doctag { .hljs-doctag {
color: $hljs-comment; color: var(--hljs-comment);
font-style: italic; font-style: italic;
} }
@ -22,26 +22,26 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
.hljs-subst, .hljs-subst,
.hljs-request, .hljs-request,
.hljs-status { .hljs-status {
color: $primary-very-high; color: var(--primary-very-high);
font-weight: bold; font-weight: bold;
} }
.hljs-number, .hljs-number,
.ruby .hljs-constant { .ruby .hljs-constant {
color: $hljs-number; color: var(--hljs-number);
} }
.hljs-string, .hljs-string,
.hljs-tag .hljs-string, .hljs-tag .hljs-string,
.tex .hljs-formula { .tex .hljs-formula {
color: $hljs-string; color: var(--hljs-string);
} }
.hljs-title, .hljs-title,
.hljs-name, .hljs-name,
.coffeescript .hljs-params, .coffeescript .hljs-params,
.scss .hljs-meta { .scss .hljs-meta {
color: $hljs-string; color: var(--hljs-string);
font-weight: bold; font-weight: bold;
} }
@ -56,14 +56,14 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
.haskell .hljs-type, .haskell .hljs-type,
.vhdl .hljs-literal, .vhdl .hljs-literal,
.tex .hljs-command { .tex .hljs-command {
color: $hljs-literal; color: var(--hljs-literal);
font-weight: bold; font-weight: bold;
} }
.hljs-tag, .hljs-tag,
.hljs-tag .hljs-title, .hljs-tag .hljs-title,
.django .hljs-tag .hljs-keyword { .django .hljs-tag .hljs-keyword {
color: $hljs-tag; color: var(--hljs-tag);
font-weight: normal; font-weight: normal;
} }
@ -71,11 +71,11 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
.css .hljs-keyword, .css .hljs-keyword,
.hljs-variable, .hljs-variable,
.lisp .hljs-body { .lisp .hljs-body {
color: $hljs-attribute; color: var(--hljs-attribute);
} }
.hljs-regexp { .hljs-regexp {
color: $success; color: var(--success);
} }
.hljs-symbol, .hljs-symbol,
@ -83,31 +83,31 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
.lisp .hljs-keyword, .lisp .hljs-keyword,
.tex .hljs-special, .tex .hljs-special,
.hljs-prompt { .hljs-prompt {
color: $hljs-symbol; color: var(--hljs-symbol);
} }
.hljs-built_in, .hljs-built_in,
.lisp .hljs-title, .lisp .hljs-title,
.clojure .hljs-built_in, .clojure .hljs-built_in,
.hljs-builtin-name { .hljs-builtin-name {
color: $tertiary-high; color: var(--tertiary-high);
} }
.meta { .meta {
color: $primary-medium; color: var(--primary-medium);
font-weight: bold; font-weight: bold;
} }
.hljs-deletion { .hljs-deletion {
background: $danger-low; background: var(--danger-low);
} }
.hljs-addition { .hljs-addition {
background: $success-low; background: var(--success-low);
} }
.diff .hljs-meta { .diff .hljs-meta {
color: $primary-low; color: var(--primary-low);
} }
/* /*
@ -119,8 +119,8 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
p > code, p > code,
li > code, li > code,
pre > code { pre > code {
color: $primary-very-high; color: var(--primary-very-high);
background: $hljs-bg; background: var(--hljs-bg);
} }
// removed some unnecessary styles here // removed some unnecessary styles here

2
app/assets/stylesheets/common/base/colorpicker.scss
View File

@ -28,7 +28,7 @@
.colorpicker { .colorpicker {
position: relative; position: relative;
margin: 0 0.125em 0.25em; margin: 0 0.125em 0.25em;
border: 1px solid $primary-medium; border: 1px solid var(--primary-medium);
width: 1.25em; width: 1.25em;
height: 1.2em; height: 1.2em;
padding: 0; padding: 0;

58
app/assets/stylesheets/common/base/compose.scss
View File

@ -19,7 +19,7 @@
z-index: z("composer", "content"); z-index: z("composer", "content");
transition: height 250ms ease, background 250ms ease, transform 250ms ease, transition: height 250ms ease, background 250ms ease, transform 250ms ease,
max-width 250ms ease, padding-bottom 250ms ease; max-width 250ms ease, padding-bottom 250ms ease;
background-color: $secondary; background-color: var(--secondary);
box-shadow: shadow("composer"); box-shadow: shadow("composer");
.reply-area { .reply-area {
@ -33,11 +33,11 @@
padding-left: 10px; padding-left: 10px;
.spinner { .spinner {
margin-left: 5px; margin-left: 5px;
border-color: $secondary; border-color: var(--secondary);
border-right-color: transparent; border-right-color: transparent;
} }
.d-icon { .d-icon {
color: $secondary; color: var(--secondary);
} }
} }
@ -56,8 +56,8 @@
&.saving { &.saving {
height: 40px !important; height: 40px !important;
align-items: center; align-items: center;
background: $tertiary; background: var(--tertiary);
color: $secondary; color: var(--secondary);
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
.composer-controls { .composer-controls {
@ -68,7 +68,7 @@
display: none; display: none;
} }
.d-icon { .d-icon {
color: $secondary; color: var(--secondary);
} }
} }
} }
@ -93,12 +93,12 @@
} }
.reply-to { .reply-to {
color: $primary-high; color: var(--primary-high);
margin: 5px 0 10px 0; margin: 5px 0 10px 0;
display: flex; display: flex;
align-items: center; align-items: center;
.d-icon { .d-icon {
color: $primary-high; color: var(--primary-high);
} }
.reply-details { .reply-details {
max-width: calc(100% - 175px); max-width: calc(100% - 175px);
@ -180,7 +180,7 @@
} }
.d-icon { .d-icon {
padding: 0.3em 0.5em; padding: 0.3em 0.5em;
color: $tertiary; color: var(--tertiary);
} }
} }
@ -264,7 +264,7 @@
.mini-tag-chooser { .mini-tag-chooser {
flex: 1 1 25%; flex: 1 1 25%;
margin: 0 0 5px 0; margin: 0 0 5px 0;
background: $secondary; background: var(--secondary);
z-index: z("composer", "dropdown"); z-index: z("composer", "dropdown");
@media all and (max-width: 900px) { @media all and (max-width: 900px) {
margin: 0; margin: 0;
@ -301,10 +301,10 @@
.cancel { .cancel {
margin-left: 1.25em; margin-left: 1.25em;
line-height: normal; line-height: normal;
color: $primary-high; color: var(--primary-high);
transition: color 250ms; transition: color 250ms;
&:hover { &:hover {
color: $danger; color: var(--danger);
} }
} }
#draft-status, #draft-status,
@ -316,14 +316,14 @@
align-items: center; align-items: center;
a { a {
margin-left: 5px; margin-left: 5px;
color: $primary-high; color: var(--primary-high);
} }
.spinner { .spinner {
margin-right: 5px; margin-right: 5px;
} }
} }
#draft-status .d-icon-user-edit { #draft-status .d-icon-user-edit {
color: $danger; color: var(--danger);
font-size: 20px; font-size: 20px;
vertical-align: -5.5px; vertical-align: -5.5px;
} }
@ -331,7 +331,7 @@
#draft-status, #draft-status,
#file-uploading { #file-uploading {
color: $primary-high; color: var(--primary-high);
} }
} }
@ -343,8 +343,8 @@
z-index: z("composer", "dropdown") + 1; z-index: z("composer", "dropdown") + 1;
position: absolute; position: absolute;
width: 240px; width: 240px;
background-color: $secondary; background-color: var(--secondary);
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
@ -352,11 +352,11 @@
li { li {
.d-icon-users { .d-icon-users {
color: $primary-medium; color: var(--primary-medium);
padding: 0 2px; padding: 0 2px;
} }
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
a { a {
padding: 5px; padding: 5px;
@ -364,17 +364,17 @@
@include ellipsis; @include ellipsis;
span.username { span.username {
color: $primary; color: var(--primary);
} }
span.name { span.name {
font-size: $font-down-1; font-size: $font-down-1;
vertical-align: middle; vertical-align: middle;
} }
&.selected { &.selected {
background-color: $tertiary-low; background-color: var(--tertiary-low);
} }
@include hover { @include hover {
background-color: $highlight-low; background-color: var(--highlight-low);
text-decoration: none; text-decoration: none;
} }
} }
@ -399,12 +399,12 @@ div.ac-wrap div.item a.remove,
padding: 1px 3.5px; padding: 1px 3.5px;
border-radius: 12px; border-radius: 12px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
&:hover { &:hover {
background-color: $danger-low; background-color: var(--danger-low);
border: 1px solid $danger-medium; border: 1px solid var(--danger-medium);
text-decoration: none; text-decoration: none;
color: $danger; color: var(--danger);
} }
} }
@ -414,8 +414,8 @@ div.ac-wrap {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
background-color: $secondary; background-color: var(--secondary);
border: 1px solid $primary-medium; border: 1px solid var(--primary-medium);
min-height: 30px; min-height: 30px;
box-sizing: border-box; box-sizing: border-box;
div.item { div.item {
@ -452,7 +452,7 @@ div.ac-wrap {
.future-date-input { .future-date-input {
.examples { .examples {
color: $primary-medium; color: var(--primary-medium);
} }
} }

10
app/assets/stylesheets/common/base/crawler_layout.scss
View File

@ -7,7 +7,7 @@ body.crawler {
background-color: #fff; background-color: #fff;
padding: 10px; padding: 10px;
box-shadow: none; box-shadow: none;
border-bottom: 1px solid $primary-low-mid; border-bottom: 1px solid var(--primary-low-mid);
box-sizing: border-box; box-sizing: border-box;
} }
@ -68,7 +68,7 @@ body.crawler {
} }
.discourse-tags { .discourse-tags {
color: $primary-medium; color: var(--primary-medium);
} }
} }
@ -90,7 +90,7 @@ body.crawler {
margin-top: 1em; margin-top: 1em;
margin-bottom: 2em; margin-bottom: 2em;
padding-top: 1.5em; padding-top: 1.5em;
border-top: 1px solid $primary-low; border-top: 1px solid var(--primary-low);
} }
.crawler-post-meta { .crawler-post-meta {
@ -108,7 +108,7 @@ body.crawler {
} }
.crawler-post-infos { .crawler-post-infos {
color: $primary-high; color: var(--primary-high);
display: inline-block; display: inline-block;
@include breakpoint(tablet, min-width) { @include breakpoint(tablet, min-width) {
float: right; float: right;
@ -124,7 +124,7 @@ body.crawler {
a { a {
display: block; display: block;
padding: 0.5em 0; padding: 0.5em 0;
border-top: 1px solid $primary-low; border-top: 1px solid var(--primary-low);
} }
} }

4
app/assets/stylesheets/common/base/d-icon.scss
View File

@ -2,10 +2,10 @@
.d-icon.d-icon-d-muted, .d-icon.d-icon-d-muted,
.d-icon.d-icon-d-watching-first, .d-icon.d-icon-d-watching-first,
.d-icon.d-icon-d-watching-first-post { .d-icon.d-icon-d-watching-first-post {
color: $primary-high; color: var(--primary-high);
} }
.d-icon.d-icon-d-tracking, .d-icon.d-icon-d-tracking,
.d-icon.d-icon-d-watching { .d-icon.d-icon-d-watching {
color: $tertiary; color: var(--tertiary);
} }

4
app/assets/stylesheets/common/base/d-popover.scss
View File

@ -1,5 +1,5 @@
$d-popover-background: $secondary; $d-popover-background: var(--secondary);
$d-popover-border: $primary-medium; $d-popover-border: var(--primary-medium);
@-webkit-keyframes popoverFadeIn { @-webkit-keyframes popoverFadeIn {
from { from {

12
app/assets/stylesheets/common/base/directory.scss
View File

@ -30,7 +30,7 @@
.directory-last-updated { .directory-last-updated {
margin-bottom: 0.5em; margin-bottom: 0.5em;
color: $primary-medium; color: var(--primary-medium);
font-size: $font-down-1; font-size: $font-down-1;
} }
@ -42,7 +42,7 @@
th { th {
padding: 0.5em; padding: 0.5em;
text-align: left; text-align: left;
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
@media screen and (max-width: $small-width) { @media screen and (max-width: $small-width) {
padding: 0.5em 0.25em; padding: 0.5em 0.25em;
} }
@ -50,7 +50,7 @@
.number, .number,
.time-read { .time-read {
font-size: $font-up-3; font-size: $font-up-3;
color: $primary-medium; color: var(--primary-medium);
@media screen and (max-width: $small-width) { @media screen and (max-width: $small-width) {
font-size: $font-up-1; font-size: $font-up-1;
} }
@ -63,19 +63,19 @@
th.sortable { th.sortable {
width: 13%; width: 13%;
.d-icon-heart { .d-icon-heart {
color: $love; color: var(--love);
margin: 0 0.25em 0 0; margin: 0 0.25em 0 0;
} }
} }
} }
.me { .me {
background-color: $highlight-low-or-medium; background-color: var(--highlight-low-or-medium);
.username a, .username a,
.name, .name,
.title, .title,
.number, .number,
.time-read { .time-read {
color: $primary-medium; color: var(--primary-medium);
} }
} }
} }

116
app/assets/stylesheets/common/base/discourse.scss
View File

@ -26,7 +26,7 @@
@keyframes background-fade-highlight { @keyframes background-fade-highlight {
0% { 0% {
background-color: $tertiary-low; background-color: var(--tertiary-low);
} }
100% { 100% {
background-color: transparent; background-color: transparent;
@ -49,12 +49,12 @@
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-name: placeHolderShimmer; animation-name: placeHolderShimmer;
animation-timing-function: linear; animation-timing-function: linear;
background: $primary-very-low; background: var(--primary-very-low);
background: linear-gradient( background: linear-gradient(
to right, to right,
$primary-very-low 10%, var(--primary-very-low) 10%,
$primary-low 18%, var(--primary-low) 18%,
$primary-very-low 33% var(--primary-very-low) 33%
); );
} }
@ -97,10 +97,10 @@ h6 {
a.cancel { a.cancel {
margin-left: 1.25em; margin-left: 1.25em;
line-height: normal; line-height: normal;
color: $primary-high; color: var(--primary-high);
transition: color 250ms; transition: color 250ms;
&:hover { &:hover {
color: $danger; color: var(--danger);
} }
} }
@ -152,7 +152,7 @@ input {
} }
&.invalid { &.invalid {
background-color: $danger-low; background-color: var(--danger-low);
} }
.radio &[type="radio"], .radio &[type="radio"],
@ -165,7 +165,7 @@ input {
input, input,
select, select,
textarea { textarea {
color: $primary; color: var(--primary);
caret-color: currentColor; caret-color: currentColor;
&[class*="span"] { &[class*="span"] {
@ -176,17 +176,17 @@ textarea {
&[disabled], &[disabled],
&[readonly] { &[readonly] {
cursor: not-allowed; cursor: not-allowed;
background-color: $primary-low; background-color: var(--primary-low);
border-color: $primary-low; border-color: var(--primary-low);
} }
&:focus:required:invalid { &:focus:required:invalid {
color: $danger; color: var(--danger);
border-color: $danger; border-color: var(--danger);
} }
&:focus:required:invalid:focus { &:focus:required:invalid:focus {
border-color: $danger; border-color: var(--danger);
box-shadow: shadow("focus-danger"); box-shadow: shadow("focus-danger");
} }
} }
@ -212,14 +212,14 @@ input {
margin-bottom: 9px; margin-bottom: 9px;
font-size: $font-0; font-size: $font-0;
line-height: $line-height-small; line-height: $line-height-small;
color: $primary; color: var(--primary);
background-color: $secondary; background-color: var(--secondary);
border: 1px solid $primary-medium; border: 1px solid var(--primary-medium);
border-radius: 0; border-radius: 0;
box-sizing: border-box; box-sizing: border-box;
min-height: 30px; min-height: 30px;
&:focus { &:focus {
border-color: $tertiary; border-color: var(--tertiary);
box-shadow: shadow("focus"); box-shadow: shadow("focus");
outline: 0; outline: 0;
} }
@ -249,8 +249,8 @@ input {
width: auto; width: auto;
padding: 0 0.5em; padding: 0 0.5em;
height: 28px; height: 28px;
background-color: $primary-low; background-color: var(--primary-low);
border: 1px solid $primary-medium; border: 1px solid var(--primary-medium);
} }
.add-on, .add-on,
.btn { .btn {
@ -274,23 +274,23 @@ input {
textarea { textarea {
height: auto; height: auto;
background-color: $secondary; background-color: var(--secondary);
border: 1px solid $primary-medium; border: 1px solid var(--primary-medium);
&:focus { &:focus {
border-color: $tertiary; border-color: var(--tertiary);
box-shadow: shadow("focus"); box-shadow: shadow("focus");
outline: 0; outline: 0;
} }
} }
select { select {
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
} }
table { table {
th { th {
font-weight: normal; font-weight: normal;
color: $primary-medium; color: var(--primary-medium);
text-align: left; text-align: left;
padding: 0.5em; padding: 0.5em;
} }
@ -303,7 +303,7 @@ table {
cursor: pointer; cursor: pointer;
.discourse-no-touch & { .discourse-no-touch & {
&:hover { &:hover {
background-color: $primary-low; background-color: var(--primary-low);
} }
} }
.d-icon { .d-icon {
@ -351,7 +351,7 @@ table {
.boxed { .boxed {
&.white { &.white {
background-color: $secondary; background-color: var(--secondary);
} }
} }
@ -365,7 +365,7 @@ table {
.message { .message {
border-radius: 8px; border-radius: 8px;
background-color: $secondary; background-color: var(--secondary);
padding: 14px; padding: 14px;
h2 { h2 {
@ -380,15 +380,15 @@ table {
.tip { .tip {
display: inline-block; display: inline-block;
&.good { &.good {
color: $success; color: var(--success);
} }
&.bad { &.bad {
color: $danger; color: var(--danger);
} }
} }
.avatar-wrapper { .avatar-wrapper {
background-color: $secondary; background-color: var(--secondary);
display: inline-block; display: inline-block;
border-radius: 50%; border-radius: 50%;
} }
@ -403,11 +403,11 @@ table {
} }
.unread-high-priority-notifications { .unread-high-priority-notifications {
color: $secondary; color: var(--secondary);
background: $success; background: var(--success);
&.badge-notification[href] { &.badge-notification[href] {
color: $secondary; color: var(--secondary);
} }
} }
@ -420,7 +420,7 @@ table {
background-image: radial-gradient( background-image: radial-gradient(
40px at 50% 50%, 40px at 50% 50%,
transparent 95%, transparent 95%,
$primary 100% var(--primary) 100%
); );
opacity: 0.85; opacity: 0.85;
} }
@ -431,13 +431,13 @@ table {
height: 80px; height: 80px;
top: -18px !important; top: -18px !important;
right: -18px !important; right: -18px !important;
box-shadow: 0 0 0 9999px rgba($primary, 0.85); box-shadow: 0 0 0 9999px rgba(var(--primary-rgb), 0.85);
z-index: z("modal", "overlay"); z-index: z("modal", "overlay");
} }
.ring-first-notification { .ring-first-notification {
position: absolute; position: absolute;
color: $secondary; color: var(--secondary);
text-align: left; text-align: left;
right: 70px; right: 70px;
top: 60px; top: 60px;
@ -487,7 +487,7 @@ table {
animation: rotate-forever 1s infinite linear; animation: rotate-forever 1s infinite linear;
height: 30px; height: 30px;
width: 30px; width: 30px;
border: 4px solid $primary-low-mid; border: 4px solid var(--primary-low-mid);
border-right-color: transparent; border-right-color: transparent;
border-radius: 50%; border-radius: 50%;
@ -501,7 +501,7 @@ table {
.content-list { .content-list {
h3 { h3 {
color: $primary-medium; color: var(--primary-medium);
font-size: $font-up-1; font-size: $font-up-1;
padding-left: 5px; padding-left: 5px;
margin-bottom: 10px; margin-bottom: 10px;
@ -512,25 +512,25 @@ table {
margin: 0; margin: 0;
li { li {
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
&:first-of-type { &:first-of-type {
border-top: 1px solid $primary-low; border-top: 1px solid var(--primary-low);
} }
a { a {
display: block; display: block;
padding: 10px; padding: 10px;
color: $primary; color: var(--primary);
&:hover { &:hover {
background-color: $primary-low; background-color: var(--primary-low);
color: $primary; color: var(--primary);
} }
&.active { &.active {
font-weight: bold; font-weight: bold;
color: $primary; color: var(--primary);
} }
} }
} }
@ -601,7 +601,7 @@ table {
text-align: center; text-align: center;
top: 120px; top: 120px;
left: 500px; left: 500px;
color: $primary; color: var(--primary);
} }
#footer { #footer {
@ -610,7 +610,7 @@ table {
.contents { .contents {
padding-top: 10px; padding-top: 10px;
a[href] { a[href] {
color: $secondary; color: var(--secondary);
} }
} }
} }
@ -636,10 +636,10 @@ table {
} }
.email-second { .email-second {
color: $primary-medium; color: var(--primary-medium);
.primary { .primary {
color: $success; color: var(--success);
font-weight: bold; font-weight: bold;
} }
@ -656,7 +656,7 @@ table {
background: transparent; background: transparent;
.d-icon { .d-icon {
color: $primary-high; color: var(--primary-high);
} }
} }
} }
@ -682,7 +682,7 @@ table {
} }
.auth-token-icon { .auth-token-icon {
color: $primary-medium; color: var(--primary-medium);
font-size: 2.25em; font-size: 2.25em;
float: left; float: left;
margin-right: 10px; margin-right: 10px;
@ -697,10 +697,10 @@ table {
} }
.auth-token-second { .auth-token-second {
color: $primary-medium; color: var(--primary-medium);
.active { .active {
color: $success; color: var(--success);
font-weight: bold; font-weight: bold;
} }
} }
@ -713,7 +713,7 @@ table {
background: transparent; background: transparent;
.d-icon { .d-icon {
color: $primary-high; color: var(--primary-high);
} }
} }
} }
@ -726,7 +726,7 @@ table {
.topic-status { .topic-status {
margin: 0; margin: 0;
display: inline-flex; display: inline-flex;
color: $primary-medium; color: var(--primary-medium);
.d-icon { .d-icon {
height: 0.76em; height: 0.76em;
width: 0.75em; width: 0.75em;
@ -737,7 +737,7 @@ table {
} }
.topic-status-warning .d-icon-envelope { .topic-status-warning .d-icon-envelope {
color: $danger; color: var(--danger);
} }
} }
@ -745,8 +745,8 @@ table {
font-size: $base-font-size; font-size: $base-font-size;
font-weight: bold; font-weight: bold;
padding: 5px 0; padding: 5px 0;
background: $danger-medium; background: var(--danger-medium);
text-align: center; text-align: center;
z-index: z("max"); z-index: z("max");
color: $secondary; color: var(--secondary);
} }

2
app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss
View File

@ -51,7 +51,7 @@
} }
input[disabled] { input[disabled] {
background: $primary-low; background: var(--primary-low);
} }
} }
.pika-single { .pika-single {

4
app/assets/stylesheets/common/base/ember-select.scss
View File

@ -1,4 +1,4 @@
.ember-select { .ember-select {
background-color: $secondary; background-color: var(--secondary);
color: $primary; color: var(--primary);
} }

30
app/assets/stylesheets/common/base/emoji.scss
View File

@ -34,9 +34,9 @@ sup img.emoji {
display: none; display: none;
flex-direction: row; flex-direction: row;
height: 320px; height: 320px;
color: $primary; color: var(--primary);
background-color: $secondary; background-color: var(--secondary);
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
img.emoji { img.emoji {
// custom emojis might import images of various sizes // custom emojis might import images of various sizes
@ -52,7 +52,7 @@ sup img.emoji {
flex: 1 0 0px; flex: 1 0 0px;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
border-right: 1px solid $primary-low; border-right: 1px solid var(--primary-low);
min-width: 36px; min-width: 36px;
overflow-y: auto; overflow-y: auto;
padding: 0.5em; padding: 0.5em;
@ -102,16 +102,16 @@ sup img.emoji {
} }
.emoji-picker .section-header .title { .emoji-picker .section-header .title {
color: $primary; color: var(--primary);
} }
.emoji-picker .section-header .clear-recent .fa { .emoji-picker .section-header .clear-recent .fa {
margin: 0; margin: 0;
padding: 0; padding: 0;
color: $primary-medium; color: var(--primary-medium);
&:hover { &:hover {
color: $primary-high; color: var(--primary-high);
} }
} }
@ -127,7 +127,7 @@ sup img.emoji {
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-top: 1px solid $primary-low; border-top: 1px solid var(--primary-low);
} }
.emoji-picker .info { .emoji-picker .info {
@ -209,7 +209,7 @@ sup img.emoji {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
border-radius: 2px; border-radius: 2px;
background-color: $tertiary-low; background-color: var(--tertiary-low);
} }
.emoji-picker-modal.fadeIn { .emoji-picker-modal.fadeIn {
@ -225,7 +225,7 @@ sup img.emoji {
.emoji-picker .filter { .emoji-picker .filter {
background-color: none; background-color: none;
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
padding: 5px; padding: 5px;
display: flex; display: flex;
position: relative; position: relative;
@ -237,7 +237,7 @@ sup img.emoji {
} }
.emoji-picker .filter .d-icon-search { .emoji-picker .filter .d-icon-search {
color: $primary-medium; color: var(--primary-medium);
font-size: $font-up-1; font-size: $font-up-1;
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
@ -251,8 +251,8 @@ sup img.emoji {
box-shadow: none; box-shadow: none;
padding-right: 24px; padding-right: 24px;
outline: none; outline: none;
color: $primary; color: var(--primary);
background: $secondary; background: var(--secondary);
&:focus { &:focus {
border: none; border: none;
@ -279,11 +279,11 @@ sup img.emoji {
top: 12px; top: 12px;
border: 0; border: 0;
background: none; background: none;
color: $primary-high; color: var(--primary-high);
outline: none; outline: none;
display: none; display: none;
&:hover { &:hover {
color: $primary; color: var(--primary);
} }
} }

2
app/assets/stylesheets/common/base/exception.scss
View File

@ -15,7 +15,7 @@
.desc { .desc {
margin-top: 16px; margin-top: 16px;
.d-icon-check-circle { .d-icon-check-circle {
color: $success; color: var(--success);
} }
} }
.buttons { .buttons {

4
app/assets/stylesheets/common/base/explain-reviewable.scss
View File

@ -18,7 +18,7 @@
} }
tr.total { tr.total {
td { td {
background-color: $primary-low; background-color: var(--primary-low);
font-weight: bold; font-weight: bold;
} }
} }
@ -28,7 +28,7 @@
} }
.score-value-type { .score-value-type {
color: $primary-medium; color: var(--primary-medium);
} }
.op:last-of-type { .op:last-of-type {

2
app/assets/stylesheets/common/base/faqs.scss
View File

@ -9,7 +9,7 @@
} }
.about.category-moderators { .about.category-moderators {
.badge-wrapper.bullet .badge-category { .badge-wrapper.bullet .badge-category {
color: $primary; color: var(--primary);
} }
} }
} }

18
app/assets/stylesheets/common/base/group.scss
View File

@ -3,7 +3,7 @@
// For example: .group .user-secondary-navigation // For example: .group .user-secondary-navigation
.group-details-container { .group-details-container {
background: $primary-very-low; background: var(--primary-very-low);
padding: 20px; padding: 20px;
margin-bottom: 15px; margin-bottom: 15px;
position: relative; position: relative;
@ -34,12 +34,12 @@
.group-info-name { .group-info-name {
font-size: $font-up-3; font-size: $font-up-3;
font-weight: bold; font-weight: bold;
color: $primary; color: var(--primary);
} }
.group-info-full-name { .group-info-full-name {
font-size: $font-up-2; font-size: $font-up-2;
color: $primary-high-or-secondary-low; color: var(--primary-high-or-secondary-low);
} }
span { span {
@ -75,7 +75,7 @@
margin-right: 10px; margin-right: 10px;
&:hover { &:hover {
background-color: $danger; background-color: var(--danger);
} }
} }
@ -90,7 +90,7 @@ table.group-manage-logs {
cursor: pointer; cursor: pointer;
.d-icon { .d-icon {
color: $primary-medium; color: var(--primary-medium);
} }
} }
} }
@ -120,7 +120,7 @@ table.group-members {
.user-info { .user-info {
display: block; display: block;
.avatar-flair { .avatar-flair {
color: $primary; color: var(--primary);
} }
} }
@ -130,14 +130,14 @@ table.group-members {
td { td {
text-align: center; text-align: center;
color: $primary-medium; color: var(--primary-medium);
padding: 0.8em 0; padding: 0.8em 0;
} }
} }
} }
.group-owner-label { .group-owner-label {
color: $primary; color: var(--primary);
} }
.group-flair-inputs { .group-flair-inputs {
@ -148,7 +148,7 @@ table.group-members {
width: 45px; width: 45px;
.avatar-wrapper { .avatar-wrapper {
background-color: $primary-very-low; background-color: var(--primary-very-low);
} }
} }

18
app/assets/stylesheets/common/base/groups.scss
View File

@ -47,8 +47,8 @@
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
color: $primary; color: var(--primary);
.discourse-no-touch & { .discourse-no-touch & {
transition: all 0.25s; transition: all 0.25s;
&:hover { &:hover {
@ -56,12 +56,12 @@
} }
} }
.group-membership { .group-membership {
color: $primary-medium; color: var(--primary-medium);
margin-top: auto; margin-top: auto;
padding-top: 1em; padding-top: 1em;
.is-group-owner, .is-group-owner,
.is-group-member { .is-group-member {
color: $success; color: var(--success);
} }
} }
.group-box-inner { .group-box-inner {
@ -94,15 +94,15 @@
.group-user-count { .group-user-count {
display: flex; display: flex;
align-items: center; align-items: center;
color: $primary-high; color: var(--primary-high);
.d-icon { .d-icon {
margin-right: 0.25em; margin-right: 0.25em;
font-size: 0.8em; font-size: 0.8em;
color: $primary-medium; color: var(--primary-medium);
} }
} }
.group-description { .group-description {
color: $primary-high; color: var(--primary-high);
word-wrap: break-word; word-wrap: break-word;
} }
} }
@ -110,7 +110,7 @@
.groups-info-name { .groups-info-name {
font-size: $font-up-1; font-size: $font-up-1;
font-weight: bold; font-weight: bold;
color: $primary; color: var(--primary);
} }
$size: 40px; $size: 40px;
@ -118,7 +118,7 @@
.group-avatar-flair { .group-avatar-flair {
display: inline-block; display: inline-block;
color: $primary; color: var(--primary);
.avatar-flair { .avatar-flair {
background-size: $size; background-size: $size;

48
app/assets/stylesheets/common/base/header.scss
View File

@ -5,7 +5,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
z-index: z("header"); z-index: z("header");
background-color: $header_background; background-color: var(--header_background);
box-shadow: shadow("header"); box-shadow: shadow("header");
> .wrap { > .wrap {
@ -46,7 +46,7 @@
height: 100%; height: 100%;
a, a,
a:visited { a:visited {
color: $header_primary; color: var(--header_primary);
} }
} }
@ -96,7 +96,7 @@
.panel-body { .panel-body {
.flagged-posts, .flagged-posts,
.reviewables { .reviewables {
background: $danger; background: var(--danger);
min-width: 6px; min-width: 6px;
} }
} }
@ -130,29 +130,29 @@
} }
&:hover, &:hover,
&:focus { &:focus {
background-color: $primary-low; background-color: var(--primary-low);
border-top: 1px solid transparent; border-top: 1px solid transparent;
border-left: 1px solid transparent; border-left: 1px solid transparent;
border-right: 1px solid transparent; border-right: 1px solid transparent;
.d-icon { .d-icon {
color: $primary-medium; color: var(--primary-medium);
} }
} }
&:active { &:active {
color: $primary; color: var(--primary);
background-color: $primary-low; background-color: var(--primary-low);
} }
} }
.drop-down-mode & { .drop-down-mode & {
.active .icon { .active .icon {
position: relative; position: relative;
background-color: $secondary; background-color: var(--secondary);
cursor: default; cursor: default;
border-top: 1px solid $primary-low; border-top: 1px solid var(--primary-low);
border-left: 1px solid $primary-low; border-left: 1px solid var(--primary-low);
border-right: 1px solid $primary-low; border-right: 1px solid var(--primary-low);
.d-icon { .d-icon {
color: $primary-medium; color: var(--primary-medium);
} }
&:after { &:after {
display: block; display: block;
@ -163,7 +163,7 @@
width: 100%; width: 100%;
height: 0; height: 0;
content: ""; content: "";
border-top: 1px solid $secondary; border-top: 1px solid var(--secondary);
} }
&:hover { &:hover {
border-bottom: none; border-bottom: none;
@ -176,7 +176,7 @@
font-size: $font-up-4; font-size: $font-up-4;
line-height: $line-height-large; line-height: $line-height-large;
display: inline-block; display: inline-block;
color: $header_primary-low-mid; color: var(--header_primary-low-mid);
} }
.notifications { .notifications {
position: relative; position: relative;
@ -200,7 +200,7 @@
.unread-notifications { .unread-notifications {
left: auto; left: auto;
right: -3px; right: -3px;
background-color: $tertiary-med-or-tertiary; background-color: var(--tertiary-med-or-tertiary);
} }
.unread-high-priority-notifications, .unread-high-priority-notifications,
.ring { .ring {
@ -210,7 +210,7 @@
} }
.highlight-strong { .highlight-strong {
background-color: $highlight-medium; background-color: var(--highlight-medium);
} }
.search-highlight { .search-highlight {
@ -259,7 +259,7 @@
} }
} }
.topic-link { .topic-link {
color: $header_primary; color: var(--header_primary);
display: block; display: block;
@include ellipsis; @include ellipsis;
// Some characters like '/' and 'j' can be wider than the font's em-box // Some characters like '/' and 'j' can be wider than the font's em-box
@ -271,10 +271,10 @@
} }
.topic-statuses { .topic-statuses {
.d-icon { .d-icon {
color: $header_primary-medium; color: var(--header_primary-medium);
} }
.d-icon-envelope { .d-icon-envelope {
color: $danger; color: var(--danger);
} }
} }
.header-title { .header-title {
@ -300,7 +300,7 @@
&.bar, &.bar,
&.none { &.none {
span.badge-category { span.badge-category {
color: $header_primary-high; color: var(--header_primary-high);
} }
} }
} }
@ -309,7 +309,7 @@
align-items: center; align-items: center;
max-width: 100%; max-width: 100%;
.discourse-tags { .discourse-tags {
color: $header_primary-high; color: var(--header_primary-high);
@include ellipsis; @include ellipsis;
.discourse-tag { .discourse-tag {
display: inline; // tags need to stay inline in order for them to truncate display: inline; // tags need to stay inline in order for them to truncate
@ -355,7 +355,7 @@ $mobile-avatar-height: 1.532em;
.trigger-group-card { .trigger-group-card {
padding: 0 5px; padding: 0 5px;
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
border-radius: 0.25em; border-radius: 0.25em;
min-width: 3em; min-width: 3em;
@include ellipsis; @include ellipsis;
@ -367,7 +367,7 @@ $mobile-avatar-height: 1.532em;
.mobile-view & { .mobile-view & {
height: $mobile-avatar-height; height: $mobile-avatar-height;
} }
color: $primary-high; color: var(--primary-high);
.d-icon { .d-icon {
margin-right: 5px; margin-right: 5px;
@ -380,7 +380,7 @@ $mobile-avatar-height: 1.532em;
} }
.more-participants { .more-participants {
color: $header_primary-high; color: var(--header_primary-high);
margin-left: 5px; margin-left: 5px;
} }
} }

32
app/assets/stylesheets/common/base/history.scss
View File

@ -9,7 +9,7 @@
#revision { #revision {
overflow: auto; overflow: auto;
border-bottom: 3px solid $primary-low; border-bottom: 3px solid var(--primary-low);
} }
table.markdown > tbody > tr > td, table.markdown > tbody > tr > td,
@ -33,72 +33,72 @@
.diff-ins { .diff-ins {
code, code,
img { img {
border: 2px solid $success; border: 2px solid var(--success);
} }
img { img {
opacity: 0.75; opacity: 0.75;
filter: alpha(opacity=75); filter: alpha(opacity=75);
} }
a { a {
color: $success; color: var(--success);
text-decoration: none; text-decoration: none;
} }
} }
img.diff-ins, img.diff-ins,
code.diff-ins { code.diff-ins {
border: 2px solid $success; border: 2px solid var(--success);
} }
img.diff-ins { img.diff-ins {
opacity: 0.75; opacity: 0.75;
filter: alpha(opacity=75); filter: alpha(opacity=75);
} }
.diff-ins { .diff-ins {
color: $primary; color: var(--primary);
background: $success-low; background: var(--success-low);
} }
ins { ins {
color: $primary; color: var(--primary);
background: $success-low; background: var(--success-low);
text-decoration: none; text-decoration: none;
} }
del, del,
.diff-del { .diff-del {
code, code,
img { img {
border: 2px solid $danger; border: 2px solid var(--danger);
} }
img { img {
opacity: 0.5; opacity: 0.5;
filter: alpha(opacity=50); filter: alpha(opacity=50);
} }
a { a {
color: $danger; color: var(--danger);
text-decoration: none; text-decoration: none;
} }
} }
img.diff-del, img.diff-del,
code.diff-del { code.diff-del {
border: 2px solid $danger; border: 2px solid var(--danger);
} }
img.diff-del { img.diff-del {
opacity: 0.5; opacity: 0.5;
filter: alpha(opacity=50); filter: alpha(opacity=50);
} }
.diff-del { .diff-del {
color: $primary; color: var(--primary);
background: $danger-low; background: var(--danger-low);
text-decoration: none; text-decoration: none;
} }
del { del {
color: $primary; color: var(--primary);
background: $danger-low; background: var(--danger-low);
text-decoration: none; text-decoration: none;
} }
span.date { span.date {
font-weight: bold; font-weight: bold;
} }
span.edit-reason { span.edit-reason {
background-color: $highlight-medium; background-color: var(--highlight-medium);
padding: 3px 5px 5px 5px; padding: 3px 5px 5px 5px;
} }
.d-icon-ban { .d-icon-ban {

14
app/assets/stylesheets/common/base/lightbox.scss
View File

@ -15,7 +15,7 @@ $meta-element-margin: 6px;
} }
.onebox img.d-lazyload-hidden:not(.ytp-thumbnail-image) { .onebox img.d-lazyload-hidden:not(.ytp-thumbnail-image) {
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
} }
.cooked img.d-lazyload { .cooked img.d-lazyload {
@ -38,8 +38,8 @@ $meta-element-margin: 6px;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
color: $secondary; color: var(--secondary);
background: $primary; background: var(--primary);
opacity: 0; opacity: 0;
transition: opacity 0.2s; transition: opacity 0.2s;
display: flex; display: flex;
@ -53,7 +53,7 @@ $meta-element-margin: 6px;
.d-icon { .d-icon {
margin: $meta-element-margin; margin: $meta-element-margin;
opacity: 0.8; opacity: 0.8;
color: $secondary; color: var(--secondary);
+ .filename { + .filename {
margin-left: 0px; margin-left: 0px;
} }
@ -62,7 +62,7 @@ $meta-element-margin: 6px;
.informations { .informations {
margin: $meta-element-margin; margin: $meta-element-margin;
padding-right: 20px; padding-right: 20px;
color: $secondary-high; color: var(--secondary-high);
font-size: $font-0; font-size: $font-0;
flex-shrink: 0; flex-shrink: 0;
flex-grow: 3; flex-grow: 3;
@ -82,8 +82,8 @@ $meta-element-margin: 6px;
a.lightbox:hover { a.lightbox:hover {
border-radius: 5px; border-radius: 5px;
box-shadow: 0 2px 5px 0 rgba($primary, 0.2), box-shadow: 0 2px 5px 0 rgba(var(--primary-rgb), 0.2),
0 2px 10px 0 rgba($primary, 0.2); 0 2px 10px 0 rgba(var(--primary-rgb), 0.2);
} }
} }
} }

18
app/assets/stylesheets/common/base/login.scss
View File

@ -1,5 +1,5 @@
.caps-lock-warning { .caps-lock-warning {
color: $danger; color: var(--danger);
font-size: $font-down-1; font-size: $font-down-1;
font-weight: bold; font-weight: bold;
} }
@ -17,7 +17,7 @@
width: 100%; width: 100%;
} }
a { a {
color: $primary-high; color: var(--primary-high);
} }
td { td {
padding-right: 5px; padding-right: 5px;
@ -65,7 +65,7 @@
.create-account { .create-account {
.disclaimer { .disclaimer {
color: $primary-medium; color: var(--primary-medium);
margin-top: 0.5em; margin-top: 0.5em;
} }
@ -101,7 +101,7 @@
} }
.instructions { .instructions {
margin-top: 0.15em; margin-top: 0.15em;
color: $primary-medium; color: var(--primary-medium);
line-height: $line-height-medium; line-height: $line-height-medium;
} }
} }
@ -111,7 +111,7 @@
.password-reset { .password-reset {
.instructions { .instructions {
label { label {
color: $primary-medium; color: var(--primary-medium);
} }
} }
} }
@ -143,7 +143,7 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
.instructions { .instructions {
color: $primary-medium; color: var(--primary-medium);
margin: 0; margin: 0;
font-size: $font-down-1; font-size: $font-down-1;
font-weight: normal; font-weight: normal;
@ -167,7 +167,7 @@
flex-direction: column; flex-direction: column;
margin-top: 0.15em; margin-top: 0.15em;
label { label {
color: $primary-medium; color: var(--primary-medium);
} }
} }
@ -176,7 +176,7 @@
button#login-link, button#login-link,
button#new-account-link { button#new-account-link {
background: transparent; background: transparent;
color: $primary-high; color: var(--primary-high);
} }
#security-key { #security-key {
@ -193,6 +193,6 @@ button#new-account-link {
a { a {
display: inline-block; display: inline-block;
padding: 1em 0.5em 1em 0; padding: 1em 0.5em 1em 0;
color: $tertiary; color: var(--tertiary);
} }
} }

58
app/assets/stylesheets/common/base/menu-panel.scss
View File

@ -22,9 +22,9 @@
} }
.menu-panel { .menu-panel {
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
box-shadow: shadow("menu-panel"); box-shadow: shadow("menu-panel");
background-color: $secondary; background-color: var(--secondary);
z-index: z("header"); z-index: z("header");
padding: 0.5em; padding: 0.5em;
width: 300px; width: 300px;
@ -70,22 +70,22 @@
a.categories-link { a.categories-link {
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
display: block; display: block;
color: $primary; color: var(--primary);
&:hover, &:hover,
&:focus { &:focus {
background-color: $highlight-medium; background-color: var(--highlight-medium);
outline: none; outline: none;
} }
.d-icon { .d-icon {
color: $primary-medium; color: var(--primary-medium);
} }
} }
.new { .new {
font-size: $font-down-1; font-size: $font-down-1;
margin-left: 0.5em; margin-left: 0.5em;
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
} }
} }
@ -104,12 +104,12 @@
background: transparent; background: transparent;
.category-name { .category-name {
color: $primary; color: var(--primary);
} }
} }
} }
.badge-notification { .badge-notification {
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
background-color: transparent; background-color: transparent;
display: inline; display: inline;
padding: 0; padding: 0;
@ -119,11 +119,11 @@
.badge-wrapper { .badge-wrapper {
&.bar, &.bar,
&.bullet { &.bullet {
color: $primary; color: var(--primary);
padding: 0 0 0 0.15em; padding: 0 0 0 0.15em;
} }
&.box { &.box {
color: $secondary; color: var(--secondary);
+ a.badge.badge-notification { + a.badge.badge-notification {
padding-top: 2px; padding-top: 2px;
} }
@ -136,7 +136,7 @@
// note these topic counts only appear for anons in the category hamburger drop down // note these topic counts only appear for anons in the category hamburger drop down
b.topics-count { b.topics-count {
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
font-weight: normal; font-weight: normal;
font-size: $font-down-1; font-size: $font-down-1;
} }
@ -155,7 +155,7 @@
width: 100%; width: 100%;
display: table; display: table;
margin-top: -1px; margin-top: -1px;
border-top: 1px solid $primary-low; border-top: 1px solid var(--primary-low);
padding-top: 0.5em; padding-top: 0.5em;
h3 { h3 {
@ -166,14 +166,14 @@
.d-icon, .d-icon,
&:hover .d-icon { &:hover .d-icon {
color: $primary-medium; color: var(--primary-medium);
} }
.icon { .icon {
color: $primary-high; color: var(--primary-high);
} }
li { li {
background-color: $tertiary-low; background-color: var(--tertiary-low);
// This is until other languages remove the HTML from within // This is until other languages remove the HTML from within
// notifications. It can then be removed // notifications. It can then be removed
@ -182,12 +182,12 @@
} }
span:first-child { span:first-child {
color: $primary; color: var(--primary);
} }
&:hover, &:hover,
&:focus { &:focus {
background-color: $highlight-medium; background-color: var(--highlight-medium);
outline: none; outline: none;
} }
@ -227,11 +227,11 @@
} }
.is-warning { .is-warning {
.d-icon-far-envelope { .d-icon-far-envelope {
color: $danger; color: var(--danger);
} }
} }
.read { .read {
background-color: $secondary; background-color: var(--secondary);
} }
.none { .none {
padding-top: 5px; padding-top: 5px;
@ -251,11 +251,11 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-height: 30px; min-height: 30px;
color: $primary-med-or-secondary-high; color: var(--primary-med-or-secondary-high);
background: $blend-primary-secondary-5; background: var(--blend-primary-secondary-5);
&:hover { &:hover {
color: $primary; color: var(--primary);
background: $primary-low; background: var(--primary-low);
} }
} }
/* as a big ol' click target, don't let text inside be selected */ /* as a big ol' click target, don't let text inside be selected */
@ -263,9 +263,9 @@
&.quick-access-profile { &.quick-access-profile {
li:not(.show-all) a { li:not(.show-all) a {
color: $primary; color: var(--primary);
.d-icon { .d-icon {
color: $primary-medium; color: var(--primary-medium);
} }
// accounts for menu "ears" 4px + border 1px // accounts for menu "ears" 4px + border 1px
@ -320,8 +320,8 @@ div.menu-links-header {
} }
a.active { a.active {
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
border-bottom: 1px solid $secondary; border-bottom: 1px solid var(--secondary);
position: relative; position: relative;
&:focus, &:focus,
@ -333,7 +333,7 @@ div.menu-links-header {
} }
a:hover, a:hover,
a:focus { a:focus {
background-color: $highlight-medium; background-color: var(--highlight-medium);
outline: none; outline: none;
} }
a { a {
@ -373,7 +373,7 @@ div.menu-links-header {
} }
.fa, .fa,
a { a {
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
} }
.d-icon-user { .d-icon-user {

68
app/assets/stylesheets/common/base/modal.scss
View File

@ -16,7 +16,7 @@
flex: 0 1 auto; flex: 0 1 auto;
margin: 0 auto; margin: 0 auto;
max-width: 700px; max-width: 700px;
background-color: $secondary; background-color: var(--secondary);
box-shadow: shadow("modal"); box-shadow: shadow("modal");
.select-kit { .select-kit {
@ -42,20 +42,20 @@
z-index: z("modal", "content"); z-index: z("modal", "content");
overflow: auto; overflow: auto;
height: auto; height: auto;
background-color: $secondary; background-color: var(--secondary);
box-shadow: shadow("card"); box-shadow: shadow("card");
background-clip: padding-box; background-clip: padding-box;
} }
.input-hint-text { .input-hint-text {
margin-left: 0.5em; margin-left: 0.5em;
color: $secondary-high; color: var(--secondary-high);
} }
.modal-header { .modal-header {
display: flex; display: flex;
padding: 10px 15px; padding: 10px 15px;
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
align-items: center; align-items: center;
.title { .title {
@ -75,7 +75,7 @@
margin-left: auto; margin-left: auto;
padding-left: 2em; padding-left: 2em;
.close { .close {
color: $primary-high; color: var(--primary-high);
} }
} }
} }
@ -127,7 +127,7 @@
.inline-modal { .inline-modal {
.modal-inner-container { .modal-inner-container {
border: 1px solid $secondary-medium; border: 1px solid var(--secondary-medium);
} }
} }
@ -163,7 +163,7 @@
.modal-footer { .modal-footer {
padding: 14px 15px 10px; padding: 14px 15px 10px;
border-top: 1px solid $primary-low; border-top: 1px solid var(--primary-low);
.btn { .btn {
margin: 0 5px 5px 0; margin: 0 5px 5px 0;
&[href] { &[href] {
@ -188,11 +188,11 @@
.modal { .modal {
.nav { .nav {
padding: 10px 30px 10px 15px; padding: 10px 30px 10px 15px;
background-color: $secondary; background-color: var(--secondary);
li > a { li > a {
font-size: $font-0; font-size: $font-0;
} }
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
} }
&.hidden { &.hidden {
@ -229,18 +229,18 @@
padding: 5px 10px; padding: 5px 10px;
box-shadow: shadow("card"); box-shadow: shadow("card");
z-index: 5; z-index: 5;
background-color: $secondary; background-color: var(--secondary);
max-height: 150px; max-height: 150px;
width: 90%; width: 90%;
overflow-y: auto; overflow-y: auto;
> .search-link { > .search-link {
padding: 6px; padding: 6px;
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
cursor: pointer; cursor: pointer;
display: block; display: block;
&:hover, &:hover,
&:focus { &:focus {
background-color: $highlight-medium; background-color: var(--highlight-medium);
} }
.search-category { .search-category {
display: flex; display: flex;
@ -266,7 +266,7 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
.warning { .warning {
color: $danger !important; color: var(--danger) !important;
} }
} }
@ -321,9 +321,9 @@
.d-modal-cancel { .d-modal-cancel {
margin-left: 1em; margin-left: 1em;
color: $primary-medium; color: var(--primary-medium);
&:hover { &:hover {
color: $danger; color: var(--danger);
} }
} }
@ -339,7 +339,7 @@
.progress-bar { .progress-bar {
height: 15px; height: 15px;
position: relative; position: relative;
background: $primary-low-mid; background: var(--primary-low-mid);
border-radius: 25px; border-radius: 25px;
overflow: hidden; overflow: hidden;
margin: 30px 0 20px; margin: 30px 0 20px;
@ -347,7 +347,7 @@
display: block; display: block;
width: 0%; width: 0%;
height: 100%; height: 100%;
background-color: $tertiary; background-color: var(--tertiary);
position: relative; position: relative;
transition: width 0.6s linear; transition: width 0.6s linear;
} }
@ -369,7 +369,7 @@
} }
.d-icon-times-circle { .d-icon-times-circle {
margin-left: 5px; margin-left: 5px;
color: $danger; color: var(--danger);
} }
li { li {
margin-bottom: 10px; margin-bottom: 10px;
@ -390,8 +390,8 @@
.cannot_delete_reason { .cannot_delete_reason {
position: absolute; position: absolute;
background: $primary; background: var(--primary);
color: $secondary; color: var(--secondary);
text-align: center; text-align: center;
border-radius: 2px; border-radius: 2px;
padding: 12px 8px; padding: 12px 8px;
@ -402,7 +402,7 @@
border: solid transparent; border: solid transparent;
content: " "; content: " ";
position: absolute; position: absolute;
border-top-color: $primary; border-top-color: var(--primary);
border-width: 8px; border-width: 8px;
} }
} }
@ -415,8 +415,8 @@
.pending-permission-change-alert { .pending-permission-change-alert {
margin-left: auto; margin-left: auto;
max-width: 250px; max-width: 250px;
background: $primary-very-high; background: var(--primary-very-high);
color: $secondary; color: var(--secondary);
margin-top: 10px; margin-top: 10px;
padding: 5px 10px; padding: 5px 10px;
position: relative; position: relative;
@ -424,7 +424,7 @@
border: solid transparent; border: solid transparent;
content: " "; content: " ";
position: absolute; position: absolute;
border-bottom-color: $primary-very-high; border-bottom-color: var(--primary-very-high);
border-width: 7px; border-width: 7px;
top: -13px; top: -13px;
left: 200px; left: 200px;
@ -496,13 +496,13 @@
margin-right: 5px; margin-right: 5px;
&:hover, &:hover,
&.active { &.active {
color: $primary; color: var(--primary);
} }
&.active { &.active {
font-weight: bold; font-weight: bold;
} }
&:focus { &:focus {
outline: 2px solid $primary-low; outline: 2px solid var(--primary-low);
} }
} }
.incoming-email-tabs { .incoming-email-tabs {
@ -516,7 +516,7 @@
.incoming-email-html-part { .incoming-email-html-part {
height: 95%; height: 95%;
border: none; border: none;
border-top: 1px solid $primary-low; border-top: 1px solid var(--primary-low);
padding-top: 10px; padding-top: 10px;
} }
textarea { textarea {
@ -614,7 +614,7 @@
} }
.custom-message-length { .custom-message-length {
color: $primary-medium; color: var(--primary-medium);
font-size: $font-down-1; font-size: $font-down-1;
} }
@ -631,11 +631,11 @@
} }
.input-hint-text { .input-hint-text {
color: $primary; color: var(--primary);
} }
.jump-to-post-control .index { .jump-to-post-control .index {
color: $primary-medium; color: var(--primary-medium);
} }
.jump-to-date-control .input-hint-text { .jump-to-date-control .input-hint-text {
@ -653,7 +653,7 @@
.text { .text {
margin: 0 0.5em 0 0; margin: 0 0.5em 0 0;
color: $primary-medium; color: var(--primary-medium);
} }
} }
} }
@ -763,12 +763,12 @@
cursor: pointer; cursor: pointer;
&.is-active { &.is-active {
color: $secondary; color: var(--secondary);
background: $danger; background: var(--danger);
&.single-tab { &.single-tab {
background: none; background: none;
color: $primary; color: var(--primary);
padding: 4px 0; padding: 4px 0;
} }
} }

50
app/assets/stylesheets/common/base/onebox.scss
View File

@ -7,7 +7,7 @@ a.loading-onebox {
position: relative; position: relative;
height: 10px; height: 10px;
width: 10px; width: 10px;
border: 2px solid $primary-low-mid; border: 2px solid var(--primary-low-mid);
border-right-color: transparent; border-right-color: transparent;
border-radius: 50%; border-radius: 50%;
-webkit-animation: rotate-forever 1s infinite linear; -webkit-animation: rotate-forever 1s infinite linear;
@ -25,7 +25,7 @@ a.loading-onebox {
margin-bottom: 12px; margin-bottom: 12px;
margin-right: 10px; margin-right: 10px;
display: block; display: block;
color: $primary; color: var(--primary);
position: relative; position: relative;
height: 20px; height: 20px;
.info { .info {
@ -94,16 +94,16 @@ a.loading-onebox {
} }
aside.onebox { aside.onebox {
border: 5px solid $primary-low; border: 5px solid var(--primary-low);
margin-bottom: 1em; margin-bottom: 1em;
padding: 12px 25px 12px 12px; padding: 12px 25px 12px 12px;
font-size: $font-0; font-size: $font-0;
background: $secondary; background: var(--secondary);
header { header {
margin-bottom: 8px; margin-bottom: 8px;
a[href] { a[href] {
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
text-decoration: none; text-decoration: none;
} }
} }
@ -131,12 +131,12 @@ aside.onebox {
} }
a[href] { a[href] {
color: $tertiary; color: var(--tertiary);
text-decoration: none; text-decoration: none;
} }
a[href]:visited { a[href]:visited {
color: $tertiary; color: var(--tertiary);
} }
img { img {
@ -304,9 +304,9 @@ aside.onebox {
// Google Calendar Placeholder // Google Calendar Placeholder
.gdocs-onebox-splash { .gdocs-onebox-splash {
background-color: $primary-low-mid; background-color: var(--primary-low-mid);
color: $primary; color: var(--primary);
border: 1px inset $primary; border: 1px inset var(--primary);
.gdocs-onebox-logo { .gdocs-onebox-logo {
display: inline-block; display: inline-block;
width: 128px; width: 128px;
@ -351,7 +351,7 @@ pre.onebox code ol {
line-height: $line-height-large; line-height: $line-height-large;
} }
pre.onebox code { pre.onebox code {
background-color: $primary-very-low; background-color: var(--primary-very-low);
} }
pre.onebox code li { pre.onebox code li {
padding-left: 5px; padding-left: 5px;
@ -372,7 +372,7 @@ pre.onebox code ol.lines li {
} }
pre.onebox code li.selected { pre.onebox code li.selected {
background-color: $highlight-low-or-medium; background-color: var(--highlight-low-or-medium);
} }
pre.onebox code { pre.onebox code {
@ -406,7 +406,7 @@ pre.onebox code {
} }
.github-icon { .github-icon {
fill: $primary-high; fill: var(--primary-high);
width: 40px; width: 40px;
height: 40px; height: 40px;
} }
@ -440,10 +440,10 @@ pre.onebox code {
font-weight: bold; font-weight: bold;
.added { .added {
color: $success; color: var(--success);
} }
.removed { .removed {
color: $danger; color: var(--danger);
} }
} }
} }
@ -465,8 +465,8 @@ pre.onebox code {
.labels span { .labels span {
// !important required to override inline style attribute // !important required to override inline style attribute
background-color: $primary-medium !important; background-color: var(--primary-medium) !important;
color: $secondary !important; color: var(--secondary) !important;
padding: 2px 4px !important; padding: 2px 4px !important;
} }
} }
@ -528,7 +528,7 @@ aside.onebox.twitterstatus .onebox-body {
margin-left: 70px; margin-left: 70px;
.quoted { .quoted {
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
padding: 0px 14px 0px 12px; padding: 0px 14px 0px 12px;
white-space: normal; white-space: normal;
margin-top: 15px; margin-top: 15px;
@ -543,7 +543,7 @@ aside.onebox.twitterstatus .onebox-body {
span { span {
font-weight: lighter; font-weight: lighter;
color: $primary-medium; color: var(--primary-medium);
} }
} }
@ -600,7 +600,7 @@ aside.onebox.stackexchange .onebox-body {
} }
.onebox-metadata { .onebox-metadata {
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
} }
.onebox.xkcd .onebox-body { .onebox.xkcd .onebox-body {
@ -630,7 +630,7 @@ aside.onebox.stackexchange .onebox-body {
.onebox.whitelistedgeneric { .onebox.whitelistedgeneric {
.label1, .label1,
.label2 { .label2 {
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
} }
.label1 { .label1 {
float: left; float: left;
@ -660,7 +660,7 @@ aside.onebox.stackexchange .onebox-body {
.onebox.instagram { .onebox.instagram {
div.instagram-description { div.instagram-description {
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
padding-top: 10px; padding-top: 10px;
} }
} }
@ -670,7 +670,7 @@ aside.onebox.stackexchange .onebox-body {
position: relative; position: relative;
} }
div.description { div.description {
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
} }
} }
@ -683,7 +683,7 @@ aside.onebox.stackexchange .onebox-body {
.onebox.twitterstatus { .onebox.twitterstatus {
.like, .like,
.retweet { .retweet {
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
padding-left: 10px; padding-left: 10px;
svg { svg {
fill: currentColor; fill: currentColor;
@ -720,7 +720,7 @@ aside.onebox.stackexchange .onebox-body {
position: relative; position: relative;
width: 100%; width: 100%;
padding: 0 0 48.25% 0; padding: 0 0 48.25% 0;
background-color: $primary-low; background-color: var(--primary-low);
.placeholder-icon { .placeholder-icon {
position: absolute; position: absolute;

22
app/assets/stylesheets/common/base/popup-menu.scss
View File

@ -1,7 +1,7 @@
.popup-menu { .popup-menu {
background-color: $secondary; background-color: var(--secondary);
width: 14em; width: 14em;
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
z-index: z("dropdown"); z-index: z("dropdown");
box-shadow: shadow("card"); box-shadow: shadow("card");
@ -10,7 +10,7 @@
list-style: none; list-style: none;
li { li {
border-bottom: 1px solid rgba($primary-low, 0.5); border-bottom: 1px solid rgba(var(--primary-low-rgb), 0.5);
&:last-child { &:last-child {
border: none; border: none;
@ -26,33 +26,33 @@
border-radius: 0; border-radius: 0;
.d-icon { .d-icon {
color: $primary-medium; color: var(--primary-medium);
} }
&:hover { &:hover {
color: $primary; color: var(--primary);
background: $tertiary-low; background: var(--tertiary-low);
.d-icon { .d-icon {
color: $primary-medium; color: var(--primary-medium);
} }
} }
&.popup-menu-btn-danger { &.popup-menu-btn-danger {
.d-icon { .d-icon {
color: $danger; color: var(--danger);
} }
.d-button-label { .d-button-label {
color: $primary; color: var(--primary);
} }
&:hover { &:hover {
.d-icon, .d-icon,
.d-button-label { .d-button-label {
color: $danger; color: var(--danger);
} }
background: $danger-low; background: var(--danger-low);
} }
} }
} }

40
app/assets/stylesheets/common/base/reviewables.scss
View File

@ -6,15 +6,15 @@
} }
.status { .status {
color: $primary-medium; color: var(--primary-medium);
span.approved { span.approved {
color: $success; color: var(--success);
.d-icon { .d-icon {
color: currentColor; color: currentColor;
} }
} }
span.rejected { span.rejected {
color: $danger; color: var(--danger);
.d-icon { .d-icon {
color: currentColor; color: currentColor;
} }
@ -82,7 +82,7 @@
} }
.reviewable-user-details { .reviewable-user-details {
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
padding-bottom: 0.25em; padding-bottom: 0.25em;
display: flex; display: flex;
@ -100,7 +100,7 @@
} }
.reviewable-filters { .reviewable-filters {
background-color: $primary-very-low; background-color: var(--primary-very-low);
padding: 1em; padding: 1em;
margin-bottom: 1em; margin-bottom: 1em;
@ -130,7 +130,7 @@
.d-date-input { .d-date-input {
flex: 1 1 auto; flex: 1 1 auto;
border: 1px solid $primary-medium; border: 1px solid var(--primary-medium);
} }
} }
} }
@ -205,19 +205,19 @@
.percentage-label { .percentage-label {
margin-right: 0.25em; margin-right: 0.25em;
&.agreed { &.agreed {
color: $success; color: var(--success);
+ .d-icon { + .d-icon {
color: $success; color: var(--success);
} }
} }
&.disagreed { &.disagreed {
color: $danger; color: var(--danger);
+ .d-icon { + .d-icon {
color: $danger; color: var(--danger);
} }
} }
&.ignored { &.ignored {
color: $primary-medium; color: var(--primary-medium);
} }
} }
.d-icon { .d-icon {
@ -227,14 +227,14 @@
.reviewable-item { .reviewable-item {
padding-top: 2em; padding-top: 2em;
border-top: 1px solid $primary-low; border-top: 1px solid var(--primary-low);
.topic-statuses { .topic-statuses {
font-size: $font-up-2; font-size: $font-up-2;
} }
.reviewable-meta-data { .reviewable-meta-data {
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
display: flex; display: flex;
width: 100%; width: 100%;
margin-bottom: 0.5em; margin-bottom: 0.5em;
@ -250,7 +250,7 @@
margin-left: 1em; margin-left: 1em;
margin-right: auto; margin-right: auto;
a { a {
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
} }
} }
.score { .score {
@ -287,7 +287,7 @@
.reviewable-scores { .reviewable-scores {
min-width: 50%; min-width: 50%;
color: $primary-high; color: var(--primary-high);
.reviewed-by { .reviewed-by {
.date { .date {
@ -306,7 +306,7 @@
.d-icon { .d-icon {
font-size: $font-down-1; font-size: $font-down-1;
color: $primary-medium; color: var(--primary-medium);
} }
.badge-notification { .badge-notification {
@ -375,7 +375,7 @@
.reviewable-item { .reviewable-item {
.show-raw-email { .show-raw-email {
color: $primary-medium; color: var(--primary-medium);
font-size: $font-down-2; font-size: $font-down-2;
} }
.post-title { .post-title {
@ -413,7 +413,7 @@
.reviewable-reply-to { .reviewable-reply-to {
display: flex; display: flex;
align-items: center; align-items: center;
color: $primary-medium; color: var(--primary-medium);
font-size: 0.9em; font-size: 0.9em;
.d-icon { .d-icon {
margin-right: 0.5em; margin-right: 0.5em;
@ -445,11 +445,11 @@
.post-topic { .post-topic {
width: 100%; width: 100%;
color: $primary-medium; color: var(--primary-medium);
margin-bottom: 0.75em; margin-bottom: 0.75em;
.title-text { .title-text {
font-weight: bold; font-weight: bold;
color: $primary; color: var(--primary);
display: block; display: block;
font-size: $font-up-2; font-size: $font-up-2;
margin-right: 0.75em; margin-right: 0.75em;

2
app/assets/stylesheets/common/base/rtl.scss
View File

@ -24,7 +24,7 @@
// The 'left' and 'right' in these selectors is not being flipped by r2. // The 'left' and 'right' in these selectors is not being flipped by r2.
.rtl .nav-stacked a.active::after { .rtl .nav-stacked a.active::after {
border-left-color: transparent !important; border-left-color: transparent !important;
border-right-color: $secondary !important; border-right-color: var(--secondary) !important;
} }
.rtl code { .rtl code {
direction: ltr !important; direction: ltr !important;

20
app/assets/stylesheets/common/base/search-menu.scss
View File

@ -70,7 +70,7 @@
} }
a.widget-link { a.widget-link {
color: $tertiary; color: var(--tertiary);
} }
} }
@ -78,12 +78,12 @@
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
.topic-statuses { .topic-statuses {
color: $primary-medium; color: var(--primary-medium);
} }
} }
.main-results + .secondary-results { .main-results + .secondary-results {
border-left: 1px solid $primary-low; border-left: 1px solid var(--primary-low);
margin-left: 1em; margin-left: 1em;
padding-left: 1em; padding-left: 1em;
max-width: 33%; max-width: 33%;
@ -98,7 +98,7 @@
margin-bottom: 1em; margin-bottom: 1em;
margin-top: 1em; margin-top: 1em;
height: 1px; height: 1px;
background: $primary-low; background: var(--primary-low);
} }
.search-result-tag { .search-result-tag {
@ -115,10 +115,10 @@
.search-result-group { .search-result-group {
.search-link { .search-link {
color: $primary-high; color: var(--primary-high);
&:hover { &:hover {
color: $primary; color: var(--primary);
} }
} }
@ -151,7 +151,7 @@
&:hover { &:hover {
.name, .name,
.slug { .slug {
color: $primary-high; color: var(--primary-high);
} }
} }
@ -166,7 +166,7 @@
.slug { .slug {
font-size: $font-down-1; font-size: $font-down-1;
color: $primary-high; color: var(--primary-high);
} }
} }
} }
@ -213,12 +213,12 @@
} }
.username { .username {
color: $primary-high-or-secondary-low; color: var(--primary-high-or-secondary-low);
font-size: $font-down-1; font-size: $font-down-1;
} }
.name { .name {
color: $primary-high-or-secondary-low; color: var(--primary-high-or-secondary-low);
font-size: $font-0; font-size: $font-0;
font-weight: 700; font-weight: 700;
} }

32
app/assets/stylesheets/common/base/search.scss
View File

@ -3,9 +3,9 @@
justify-content: space-between; justify-content: space-between;
.warning { .warning {
background-color: $danger-medium; background-color: var(--danger-medium);
padding: 5px 8px; padding: 5px 8px;
color: $secondary; color: var(--secondary);
} }
.search-bar { .search-bar {
@ -43,7 +43,7 @@
.search-info { .search-info {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
padding-bottom: 1em; padding-bottom: 1em;
margin-bottom: 1.5em; margin-bottom: 1.5em;
flex-direction: row; flex-direction: row;
@ -90,9 +90,9 @@
.search-notice { .search-notice {
.fps-invalid { .fps-invalid {
padding: 0.5em; padding: 0.5em;
background-color: $danger-low; background-color: var(--danger-low);
border: 1px solid $danger-medium; border: 1px solid var(--danger-medium);
color: $danger; color: var(--danger);
} }
} }
} }
@ -126,7 +126,7 @@
} }
.search-advanced-title { .search-advanced-title {
background: $primary-low; background: var(--primary-low);
padding: 0.358em 1em; padding: 0.358em 1em;
@include breakpoint(medium) { @include breakpoint(medium) {
padding: 0.358em 0.5em; padding: 0.358em 0.5em;
@ -136,7 +136,7 @@
font-weight: bold; font-weight: bold;
&.btn { &.btn {
background: $primary-low; background: var(--primary-low);
} }
.d-icon { .d-icon {
@ -145,7 +145,7 @@
} }
.search-advanced-filters { .search-advanced-filters {
background: $primary-very-low; background: var(--primary-very-low);
padding: 1em; padding: 1em;
.control-group { .control-group {
margin-bottom: 15px; margin-bottom: 15px;
@ -231,28 +231,28 @@
line-height: $line-height-large; line-height: $line-height-large;
word-wrap: break-word; word-wrap: break-word;
max-width: 640px; max-width: 640px;
color: $primary-medium; color: var(--primary-medium);
.date { .date {
color: $primary-high; color: var(--primary-high);
} }
.search-highlight { .search-highlight {
color: $primary-high; color: var(--primary-high);
} }
} }
.like-count { .like-count {
display: block; display: block;
color: $primary-high; color: var(--primary-high);
margin-top: 0.25em; margin-top: 0.25em;
.d-icon { .d-icon {
color: $love; color: var(--love);
font-size: $font-down-1; font-size: $font-down-1;
} }
} }
a.search-link:visited .topic-title { a.search-link:visited .topic-title {
color: $tertiary-high; color: var(--tertiary-high);
} }
.search-link { .search-link {
.topic-title { .topic-title {
@ -263,7 +263,7 @@
display: inline-block; display: inline-block;
font-size: 1.3em; font-size: 1.3em;
line-height: $line-height-medium; line-height: $line-height-medium;
color: $primary-medium; color: var(--primary-medium);
span { span {
line-height: 1; line-height: 1;
} }

14
app/assets/stylesheets/common/base/share_link.scss
View File

@ -5,7 +5,7 @@
left: 20px; left: 20px;
z-index: z("dropdown"); z-index: z("dropdown");
box-shadow: shadow("card"); box-shadow: shadow("card");
background-color: $secondary; background-color: var(--secondary);
padding: 8px 8px 4px 8px; padding: 8px 8px 4px 8px;
width: 300px; width: 300px;
display: none; display: none;
@ -29,7 +29,7 @@
.date { .date {
font-weight: normal; font-weight: normal;
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
} }
} }
@ -37,7 +37,7 @@
display: inline-block; display: inline-block;
position: absolute; position: absolute;
margin: 5px 5px 5px 15px; margin: 5px 5px 5px 15px;
color: $success; color: var(--success);
opacity: 1; opacity: 1;
transition: opacity 0.25s; transition: opacity 0.25s;
font-size: $font-0; font-size: $font-0;
@ -49,15 +49,15 @@
margin-right: 8px; margin-right: 8px;
font-size: $font-up-4; font-size: $font-up-4;
.d-icon { .d-icon {
color: $tertiary-or-white; color: var(--tertiary-or-white);
} }
.d-icon-fab-facebook { .d-icon-fab-facebook {
// Adheres to Facebook brand guidelines // Adheres to Facebook brand guidelines
color: $facebook-or-white; color: var(--facebook-or-white);
} }
.d-icon-fab-twitter-square { .d-icon-fab-twitter-square {
// Adheres to Twitter brand guidelines // Adheres to Twitter brand guidelines
color: $twitter-or-white; color: var(--twitter-or-white);
} }
} }
@ -92,7 +92,7 @@
.close-share { .close-share {
font-size: $font-up-3; font-size: $font-up-3;
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
} }
.new-topic { .new-topic {

2
app/assets/stylesheets/common/base/shared-drafts.scss
View File

@ -1,5 +1,5 @@
.shared-draft-controls { .shared-draft-controls {
background-color: $tertiary-low; background-color: var(--tertiary-low);
padding: 1em; padding: 1em;
.publish-field { .publish-field {

30
app/assets/stylesheets/common/base/tagging.scss
View File

@ -6,7 +6,7 @@
.tags-list { .tags-list {
margin-top: 2em; margin-top: 2em;
padding-bottom: 1em; padding-bottom: 1em;
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
} }
#list-area .tags-list h3 { #list-area .tags-list h3 {
@ -63,7 +63,7 @@
.discourse-tag-count { .discourse-tag-count {
font-size: $font-down-1; font-size: $font-down-1;
color: $primary-medium; color: var(--primary-medium);
line-height: $line-height-small; line-height: $line-height-small;
vertical-align: middle; vertical-align: middle;
} }
@ -77,15 +77,15 @@
.discourse-tag { .discourse-tag {
margin: 0; margin: 0;
color: $primary-medium; color: var(--primary-medium);
&:visited, &:visited,
&:hover { &:hover {
color: $primary-medium; color: var(--primary-medium);
} }
.extra-info-wrapper & { .extra-info-wrapper & {
color: $header-primary_high !important; color: var(--header_primary-high) !important;
} }
&.large { &.large {
@ -93,12 +93,12 @@
} }
&.box { &.box {
background-color: $primary-low; background-color: var(--primary-low);
color: $primary-high; color: var(--primary-high);
padding: 2px 8px; padding: 2px 8px;
.extra-info-wrapper & { .extra-info-wrapper & {
background-color: $header_primary-low; background-color: var(--header_primary-low);
color: $header_primary-medium; color: var(--header_primary-medium);
} }
} }
@ -106,7 +106,7 @@
&.simple:visited, &.simple:visited,
&.simple:hover { &.simple:hover {
margin-right: 0; margin-right: 0;
color: $primary-high; color: var(--primary-high);
} }
&.bullet { &.bullet {
@ -114,7 +114,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
&:before { &:before {
background: $primary-low-mid; background: var(--primary-low-mid);
margin-right: 5px; margin-right: 5px;
position: relative; position: relative;
width: 9px; width: 9px;
@ -179,7 +179,7 @@
} }
header .discourse-tag { header .discourse-tag {
color: $primary-medium; color: var(--primary-medium);
} }
.list-tags { .list-tags {
@ -209,7 +209,7 @@ header .discourse-tag {
.autocomplete { .autocomplete {
a { a {
color: $primary-medium; color: var(--primary-medium);
} }
.d-icon-tag { .d-icon-tag {
@ -274,7 +274,7 @@ header .discourse-tag {
section.tag-info { section.tag-info {
margin: 1em 0; margin: 1em 0;
padding: 2em; padding: 2em;
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
.field { .field {
margin: 0 0 0.5em; margin: 0 0 0.5em;
@ -306,7 +306,7 @@ section.tag-info {
border: none; border: none;
@include clearfix; @include clearfix;
a { a {
color: $primary-medium; color: var(--primary-medium);
margin-left: 0.25em; margin-left: 0.25em;
} }
} }

6
app/assets/stylesheets/common/base/tooltip.scss
View File

@ -1,5 +1,5 @@
$discourse-tooltip-background: $secondary; $discourse-tooltip-background: var(--secondary);
$discourse-tooltip-border: $primary-medium; $discourse-tooltip-border: var(--primary-medium);
#discourse-tooltip { #discourse-tooltip {
background-color: $discourse-tooltip-background; background-color: $discourse-tooltip-background;
@ -53,7 +53,7 @@ $discourse-tooltip-border: $primary-medium;
padding: 1em; padding: 1em;
max-width: 250px; max-width: 250px;
font-size: $font-down-1; font-size: $font-down-1;
color: $primary; color: var(--primary);
box-shadow: shadow("dropdown"); box-shadow: shadow("dropdown");
line-height: 1.4em; line-height: 1.4em;
} }

28
app/assets/stylesheets/common/base/topic-admin-menu.scss
View File

@ -34,7 +34,7 @@
display: block; display: block;
padding: 1.25em 0; padding: 1.25em 0;
&:not(:last-of-type) { &:not(:last-of-type) {
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
} }
.badge-wrapper { .badge-wrapper {
margin-right: 0; margin-right: 0;
@ -80,7 +80,7 @@
overflow: visible; overflow: visible;
} }
.modal-footer { .modal-footer {
background: $secondary; background: var(--secondary);
} }
} }
@ -101,31 +101,31 @@
// Select posts // Select posts
.selected-posts { .selected-posts {
border: 1px solid $tertiary-medium; border: 1px solid var(--tertiary-medium);
background-color: $tertiary-low; background-color: var(--tertiary-low);
.btn { .btn {
border: none; border: none;
color: $secondary; color: var(--secondary);
font-weight: normal; font-weight: normal;
margin-bottom: 10px; margin-bottom: 10px;
&:not(.btn-danger) { &:not(.btn-danger) {
background: $tertiary; background: var(--tertiary);
border-color: $tertiary; border-color: var(--tertiary);
&[href] { &[href] {
color: $secondary; color: var(--secondary);
} }
&:hover { &:hover {
color: $secondary; color: var(--secondary);
background: $tertiary-high; background: var(--tertiary-high);
} }
&:active { &:active {
@include linear-gradient($tertiary-hover, $tertiary); @include linear-gradient(var(--tertiary-hover), var(--tertiary));
color: $secondary; color: var(--secondary);
} }
} }
&[disabled] { &[disabled] {
text-shadow: 0 1px 0 rgba($primary, 0.2); text-shadow: 0 1px 0 rgba(var(--primary-rgb), 0.2);
@include linear-gradient($tertiary, $tertiary-hover); @include linear-gradient(var(--tertiary), var(--tertiary-hover));
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.33); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.33);
} }
} }

136
app/assets/stylesheets/common/base/topic-post.scss
View File

@ -2,8 +2,8 @@ $quote-share-maxwidth: 150px;
.button-count.has-pending { .button-count.has-pending {
span { span {
background-color: $danger; background-color: var(--danger);
color: $secondary; color: var(--secondary);
border-radius: 10px; border-radius: 10px;
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
display: inline-block; display: inline-block;
@ -25,9 +25,9 @@ $quote-share-maxwidth: 150px;
content: ""; content: "";
background: linear-gradient( background: linear-gradient(
to right, to right,
$primary-very-low 10%, var(--primary-very-low) 10%,
$primary-low 28%, var(--primary-low) 28%,
$primary-very-low 43% var(--primary-very-low) 43%
); );
height: 45px; height: 45px;
width: 700px; width: 700px;
@ -58,12 +58,12 @@ $quote-share-maxwidth: 150px;
@include ellipsis; @include ellipsis;
vertical-align: middle; vertical-align: middle;
a { a {
color: $primary-high-or-secondary-low; color: var(--primary-high-or-secondary-low);
} }
} }
.fa { .fa {
font-size: $font-down-1; font-size: $font-down-1;
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
} }
.svg-icon-title { .svg-icon-title {
margin-left: 3px; margin-left: 3px;
@ -72,7 +72,7 @@ $quote-share-maxwidth: 150px;
.new_user a, .new_user a,
.user-title, .user-title,
.user-title a { .user-title a {
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
} }
} }
@ -125,10 +125,10 @@ $quote-share-maxwidth: 150px;
} }
ins { ins {
background-color: $success-low; background-color: var(--success-low);
} }
del { del {
background-color: $danger-low; background-color: var(--danger-low);
} }
// Prevents users from breaking posts with tag nesting // Prevents users from breaking posts with tag nesting
big { big {
@ -164,7 +164,7 @@ $quote-share-maxwidth: 150px;
// add staff color // add staff color
.moderator { .moderator {
.regular > .cooked { .regular > .cooked {
background-color: $highlight-low-or-medium; background-color: var(--highlight-low-or-medium);
padding: 10px; padding: 10px;
img:not(.thumbnail) { img:not(.thumbnail) {
max-width: 100%; max-width: 100%;
@ -173,9 +173,9 @@ $quote-share-maxwidth: 150px;
} }
.clearfix > .topic-meta-data > .names { .clearfix > .topic-meta-data > .names {
span.user-title { span.user-title {
color: $primary-high-or-secondary-low; color: var(--primary-high-or-secondary-low);
a { a {
background-color: $highlight-low-or-medium; background-color: var(--highlight-low-or-medium);
padding-left: 4px; padding-left: 4px;
padding-right: 4px; padding-right: 4px;
} }
@ -210,7 +210,7 @@ aside.quote {
.title { .title {
@include post-aside; @include post-aside;
color: $primary-high-or-secondary-low; color: var(--primary-high-or-secondary-low);
padding: 12px 12px 0px 12px; padding: 12px 12px 0px 12px;
// blockquote is underneath this and has top margin // blockquote is underneath this and has top margin
.avatar { .avatar {
@ -239,11 +239,11 @@ blockquote {
.quote-controls, .quote-controls,
.quote-controls .d-icon { .quote-controls .d-icon {
color: $primary-low-mid-or-secondary-high; color: var(--primary-low-mid-or-secondary-high);
} }
.cooked .highlight { .cooked .highlight {
background-color: $tertiary-low; background-color: var(--tertiary-low);
padding: 2px; padding: 2px;
margin: -2px; margin: -2px;
} }
@ -253,7 +253,7 @@ blockquote {
} }
.post-action { .post-action {
color: $primary-medium; color: var(--primary-medium);
.undo-action, .undo-action,
.act-action { .act-action {
margin-left: 5px; margin-left: 5px;
@ -262,7 +262,7 @@ blockquote {
.small-user-list .unknown { .small-user-list .unknown {
display: inline-block; display: inline-block;
background-color: $primary-low; background-color: var(--primary-low);
width: 25px; width: 25px;
height: 25px; height: 25px;
border-radius: 50%; border-radius: 50%;
@ -297,7 +297,7 @@ blockquote {
position: absolute; position: absolute;
z-index: z("dropdown"); z-index: z("dropdown");
opacity: 0.9; opacity: 0.9;
background-color: $secondary-high; background-color: var(--secondary-high);
&.visible { &.visible {
display: inline-flex; display: inline-flex;
@ -307,7 +307,7 @@ blockquote {
.btn:hover, .btn:hover,
.d-icon, .d-icon,
.btn:hover .d-icon { .btn:hover .d-icon {
color: $secondary-or-primary; color: var(--secondary-or-primary);
} }
.insert-quote + .quote-sharing { .insert-quote + .quote-sharing {
@ -359,8 +359,8 @@ blockquote {
} }
.topic-map { .topic-map {
background: $primary-very-low; background: var(--primary-very-low);
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
border-top: none; // would cause double top border border-top: none; // would cause double top border
.avatars { .avatars {
@ -387,7 +387,7 @@ blockquote {
} }
section { section {
border-top: 1px solid $primary-low; border-top: 1px solid var(--primary-low);
} }
ul { ul {
@ -397,7 +397,7 @@ blockquote {
h3 { h3 {
margin-bottom: 4px; margin-bottom: 4px;
color: $primary; color: var(--primary);
line-height: $line-height-large; line-height: $line-height-large;
font-weight: normal; font-weight: normal;
font-size: $font-0; font-size: $font-0;
@ -405,7 +405,7 @@ blockquote {
h4 { h4 {
margin: 1px 0 2px 0; margin: 1px 0 2px 0;
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
font-weight: normal; font-weight: normal;
font-size: $font-down-1; font-size: $font-down-1;
line-height: $line-height-small; line-height: $line-height-small;
@ -413,7 +413,7 @@ blockquote {
span.domain { span.domain {
font-size: $font-down-2; font-size: $font-down-2;
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
} }
td { td {
@ -461,7 +461,7 @@ blockquote {
} }
.user { .user {
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
border-radius: 0.25em; border-radius: 0.25em;
padding: 0; padding: 0;
margin: 0.125em 0.25em 0.125em 0; margin: 0.125em 0.25em 0.125em 0;
@ -471,10 +471,10 @@ blockquote {
.user-link, .user-link,
.group-link { .group-link {
color: $primary-high; color: var(--primary-high);
&:hover { &:hover {
color: $primary; color: var(--primary);
} }
} }
@ -572,7 +572,7 @@ blockquote {
width: 16px; width: 16px;
height: 16px; height: 16px;
bottom: -3px; bottom: -3px;
color: $primary; color: var(--primary);
&.rounded { &.rounded {
background-size: 12px 12px; background-size: 12px 12px;
border-radius: 8px; border-radius: 8px;
@ -610,7 +610,7 @@ blockquote {
overflow: hidden; overflow: hidden;
} }
.group-request { .group-request {
border-top: 1px solid $primary-low; border-top: 1px solid var(--primary-low);
padding-top: 0.5em; padding-top: 0.5em;
} }
&.highlighted { &.highlighted {
@ -641,11 +641,11 @@ blockquote {
.wiki, .wiki,
.last-wiki-edit { .last-wiki-edit {
color: $wiki; color: var(--wiki);
} }
&.via-email { &.via-email {
color: $primary-low-mid-or-secondary-high; color: var(--primary-low-mid-or-secondary-high);
} }
&.raw-email { &.raw-email {
cursor: pointer; cursor: pointer;
@ -657,8 +657,8 @@ pre {
word-wrap: normal; word-wrap: normal;
display: block; display: block;
padding: 0.5em; padding: 0.5em;
color: $primary; color: var(--primary);
background: $blend-primary-secondary-5; background: var(--blend-primary-secondary-5);
max-height: 500px; max-height: 500px;
} }
} }
@ -680,7 +680,7 @@ pre {
&.copied { &.copied {
.d-icon { .d-icon {
color: $tertiary; color: var(--tertiary);
} }
} }
@ -693,12 +693,12 @@ pre {
kbd { kbd {
align-items: center; align-items: center;
border: 1px solid $primary-low-mid; border: 1px solid var(--primary-low-mid);
background: $primary-very-low; background: var(--primary-very-low);
border-bottom-width: 2px; border-bottom-width: 2px;
border-radius: 3px; border-radius: 3px;
box-sizing: border-box; box-sizing: border-box;
color: $primary; color: var(--primary);
display: inline-flex; display: inline-flex;
font-size: $font-down-1; font-size: $font-down-1;
justify-content: center; justify-content: center;
@ -727,7 +727,7 @@ blockquote > *:last-child {
.gap { .gap {
padding: 0.25em 0 0.5em 56px; // 45px (topic avatar) + 11px (margin) = 56px padding: 0.25em 0 0.5em 56px; // 45px (topic avatar) + 11px (margin) = 56px
color: $primary-med-or-secondary-high; color: var(--primary-med-or-secondary-high);
cursor: pointer; cursor: pointer;
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
@ -750,7 +750,7 @@ blockquote > *:last-child {
text-align: left; text-align: left;
padding-bottom: 2px; padding-bottom: 2px;
font-weight: bold; font-weight: bold;
color: $primary; color: var(--primary);
} }
} }
@ -763,7 +763,7 @@ blockquote > *:last-child {
display: flex; display: flex;
align-items: center; align-items: center;
max-width: 758px; max-width: 758px;
border-top: 1px solid $primary-low; border-top: 1px solid var(--primary-low);
.topic-avatar { .topic-avatar {
align-self: flex-start; align-self: flex-start;
padding: 0.7em 0; padding: 0.7em 0;
@ -774,16 +774,16 @@ blockquote > *:last-child {
font-size: 2em; font-size: 2em;
width: 45px; width: 45px;
text-align: center; text-align: center;
color: $primary-low-mid; color: var(--primary-low-mid);
} }
} }
.small-action.deleted { .small-action.deleted {
background-color: $danger-low-mid; background-color: var(--danger-low-mid);
} }
.small-action-desc.timegap { .small-action-desc.timegap {
color: $primary-medium; color: var(--primary-medium);
} }
.small-action-desc { .small-action-desc {
@ -795,7 +795,7 @@ blockquote > *:last-child {
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
font-size: $font-down-1; font-size: $font-down-1;
color: $primary-medium; color: var(--primary-medium);
min-width: 0; // Allows flex container to shrink min-width: 0; // Allows flex container to shrink
.custom-message { .custom-message {
@ -843,7 +843,7 @@ blockquote > *:last-child {
.topic-body { .topic-body {
.cooked { .cooked {
font-style: italic; font-style: italic;
color: $primary-medium; color: var(--primary-medium);
} }
} }
} }
@ -852,28 +852,28 @@ a.mention {
display: inline-block; // https://bugzilla.mozilla.org/show_bug.cgi?id=1656119 display: inline-block; // https://bugzilla.mozilla.org/show_bug.cgi?id=1656119
font-weight: bold; font-weight: bold;
font-size: 0.93em; font-size: 0.93em;
color: $primary-high-or-secondary-low; color: var(--primary-high-or-secondary-low);
padding: 0 4px 1px; padding: 0 4px 1px;
background: $primary-low; background: var(--primary-low);
border-radius: 8px; border-radius: 8px;
} }
span.mention { span.mention {
font-weight: bold; font-weight: bold;
font-size: 0.93em; font-size: 0.93em;
color: $primary; color: var(--primary);
} }
a.mention-group { a.mention-group {
font-weight: bold; font-weight: bold;
font-size: 0.93em; font-size: 0.93em;
color: $primary; color: var(--primary);
&.notify, &.notify,
.small-action-desc & { .small-action-desc & {
color: $primary-high-or-secondary-low; color: var(--primary-high-or-secondary-low);
padding: 2px 4px; padding: 2px 4px;
background: $primary-low; background: var(--primary-low);
border-radius: 8px; border-radius: 8px;
} }
} }
@ -901,7 +901,7 @@ a.mention-group {
} }
> .d-icon { > .d-icon {
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
margin-right: 6px; margin-right: 6px;
font-size: $font-0; font-size: $font-0;
line-height: $line-height-large; line-height: $line-height-large;
@ -917,7 +917,7 @@ a.mention-group {
> span.help { > span.help {
display: inline-block; display: inline-block;
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
font-size: $font-down-1; font-size: $font-down-1;
font-style: italic; font-style: italic;
line-height: $line-height-large; line-height: $line-height-large;
@ -932,8 +932,8 @@ a.mention-group {
.broken-image { .broken-image {
display: inline-flex; display: inline-flex;
color: $primary-low-mid-or-secondary-high; color: var(--primary-low-mid-or-secondary-high);
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
font-size: $font-up-5; font-size: $font-up-5;
.d-icon { .d-icon {
@ -960,9 +960,9 @@ a.mention-group {
article.boxed { article.boxed {
.select-posts { .select-posts {
button.select-post { button.select-post {
background-color: $tertiary; background-color: var(--tertiary);
color: $secondary; color: var(--secondary);
border-color: $tertiary; border-color: var(--tertiary);
} }
} }
.topic-body { .topic-body {
@ -982,8 +982,8 @@ a.mention-group {
height: 100px; height: 100px;
button { button {
margin-left: 8px; margin-left: 8px;
background-color: $primary-low; background-color: var(--primary-low);
color: $primary; color: var(--primary);
box-shadow: shadow("dropdown"); box-shadow: shadow("dropdown");
} }
} }
@ -1014,8 +1014,8 @@ a.mention-group {
.post-notice { .post-notice {
align-items: center; align-items: center;
background-color: $tertiary-low; background-color: var(--tertiary-low);
border-top: 1px solid $primary-low; border-top: 1px solid var(--primary-low);
display: flex; display: flex;
max-width: calc( max-width: calc(
#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{$topic-avatar-width} - #{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{$topic-avatar-width} -
@ -1025,10 +1025,10 @@ a.mention-group {
&.old { &.old {
background-color: unset; background-color: unset;
color: $primary-medium; color: var(--primary-medium);
.d-icon { .d-icon {
color: $primary-medium; color: var(--primary-medium);
} }
} }
@ -1038,7 +1038,7 @@ a.mention-group {
.d-icon { .d-icon {
font-size: 2em; font-size: 2em;
color: $primary-high; color: var(--primary-high);
margin-right: 0.65em; margin-right: 0.65em;
} }
} }
@ -1081,7 +1081,7 @@ a.mention-group {
margin: 1em 0; margin: 1em 0;
.reason { .reason {
color: $primary-high; color: var(--primary-high);
display: inline-flex; display: inline-flex;
margin: 0; margin: 0;
align-items: center; align-items: center;

24
app/assets/stylesheets/common/base/topic.scss
View File

@ -74,7 +74,7 @@
margin-right: 0; margin-right: 0;
} }
.d-icon { .d-icon {
color: $primary-medium; color: var(--primary-medium);
} }
} }
} }
@ -135,7 +135,7 @@ a.badge-category {
} }
.private-message-glyph { .private-message-glyph {
color: $primary-low-mid-or-secondary-high; color: var(--primary-low-mid-or-secondary-high);
} }
.private-message-glyph-wrapper { .private-message-glyph-wrapper {
@ -181,7 +181,7 @@ a.badge-category {
justify-content: space-between; justify-content: space-between;
padding: 0.5em; padding: 0.5em;
background-color: $highlight-medium; background-color: var(--highlight-medium);
margin-top: 1em; margin-top: 1em;
max-width: 757px; max-width: 757px;
} }
@ -230,13 +230,13 @@ a.badge-category {
.post-links { .post-links {
margin-top: 1em; margin-top: 1em;
padding-top: 1em; padding-top: 1em;
border-top: 1px solid $primary-low; border-top: 1px solid var(--primary-low);
li:last-of-type { li:last-of-type {
margin-bottom: 1em; margin-bottom: 1em;
} }
} }
.expand-links { .expand-links {
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
} }
.track-link { .track-link {
display: flex; display: flex;
@ -251,7 +251,7 @@ a.badge-category {
li { li {
margin-bottom: 0.5em; margin-bottom: 0.5em;
a[href] { a[href] {
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
} }
.clicks { .clicks {
margin-left: 0.5em; margin-left: 0.5em;
@ -265,14 +265,14 @@ a.badge-category {
} }
a.reply-new { a.reply-new {
.d-icon { .d-icon {
background: $secondary; background: var(--secondary);
border-radius: 20px; border-radius: 20px;
transition: all linear 0.15s; transition: all linear 0.15s;
} }
&:hover { &:hover {
color: $tertiary; color: var(--tertiary);
.d-icon { .d-icon {
background: $tertiary-low; background: var(--tertiary-low);
} }
} }
} }
@ -281,7 +281,7 @@ a.badge-category {
a.topic-featured-link { a.topic-featured-link {
display: inline-block; display: inline-block;
text-transform: lowercase; text-transform: lowercase;
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
font-size: 0.875rem; font-size: 0.875rem;
.d-icon { .d-icon {
margin-right: 3px; margin-right: 3px;
@ -315,8 +315,8 @@ a.topic-featured-link {
.is-public { .is-public {
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
font-size: $font-down-2; font-size: $font-down-2;
background: $tertiary; background: var(--tertiary);
color: $secondary; color: var(--secondary);
border-radius: 3px; border-radius: 3px;
text-transform: lowercase; text-transform: lowercase;
} }

6
app/assets/stylesheets/common/base/upload.scss
View File

@ -1,5 +1,5 @@
.uploaded-image-preview { .uploaded-image-preview {
background: $primary-medium center; background: var(--primary-medium) center;
background-size: cover; background-size: cover;
position: relative; position: relative;
@ -31,14 +31,14 @@
margin-left: auto; margin-left: auto;
.d-icon { .d-icon {
color: $primary-low; color: var(--primary-low);
} }
&:hover { &:hover {
background: none; background: none;
.d-icon { .d-icon {
color: $primary; color: var(--primary);
} }
} }
} }

38
app/assets/stylesheets/common/base/user-badges.scss
View File

@ -1,12 +1,12 @@
/* Default badge styles. */ /* Default badge styles. */
.user-badge { .user-badge {
padding: 3px 8px; padding: 3px 8px;
color: $primary; color: var(--primary);
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
line-height: $line-height-large; line-height: $line-height-large;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
background-color: $secondary; background-color: var(--secondary);
margin: 0 0 3px; margin: 0 0 3px;
img { img {
@ -19,20 +19,20 @@
} }
&.badge-type-gold .fa { &.badge-type-gold .fa {
color: $gold !important; color: var(--gold) !important;
} }
&.badge-type-silver .fa { &.badge-type-silver .fa {
color: $silver !important; color: var(--silver) !important;
} }
&.badge-type-bronze .fa { &.badge-type-bronze .fa {
color: $bronze !important; color: var(--bronze) !important;
} }
&.disabled { &.disabled {
color: $primary-medium; color: var(--primary-medium);
background-color: $primary-very-low; background-color: var(--primary-very-low);
.fa { .fa {
opacity: 0.4; opacity: 0.4;
} }
@ -123,8 +123,8 @@
.badge-card { .badge-card {
position: relative; position: relative;
display: inline-block; display: inline-block;
background-color: $primary-very-low; background-color: var(--primary-very-low);
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
margin-bottom: 2vh; margin-bottom: 2vh;
transition: box-shadow 0.25s; transition: box-shadow 0.25s;
@ -139,7 +139,7 @@
right: 5px; right: 5px;
top: 5px; top: 5px;
font-weight: bold; font-weight: bold;
color: $primary-medium; color: var(--primary-medium);
font-size: $font-up-2; font-size: $font-up-2;
} }
@ -150,7 +150,7 @@
padding: 0 10%; padding: 0 10%;
.badge-link { .badge-link {
color: $primary; color: var(--primary);
} }
.badge-icon { .badge-icon {
@ -188,7 +188,7 @@
flex: 1 1 auto; flex: 1 1 auto;
align-items: center; align-items: center;
padding: 1em 1.5em 1em 0; padding: 1em 1.5em 1em 0;
color: $primary; color: var(--primary);
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
padding-right: 0; padding-right: 0;
} }
@ -254,7 +254,7 @@
.badge-groups { .badge-groups {
margin: 20px 0; margin: 20px 0;
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
h3 { h3 {
margin-bottom: 1em; margin-bottom: 1em;
} }
@ -295,7 +295,7 @@
.grant-info-item { .grant-info-item {
margin-bottom: 1em; margin-bottom: 1em;
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
&:first-of-type { &:first-of-type {
margin-right: 10px; margin-right: 10px;
} }
@ -303,7 +303,7 @@
.badge-set-title { .badge-set-title {
padding: 1.5em; padding: 1.5em;
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
.user-content { .user-content {
padding: 0; padding: 0;
@ -329,16 +329,16 @@
text-align: center; text-align: center;
.fa { .fa {
font-size: 0.9em; font-size: 0.9em;
color: $secondary; color: var(--secondary);
} }
} }
.check-display.status-checked { .check-display.status-checked {
background-color: $success; background-color: var(--success);
} }
.check-display.status-unchecked { .check-display.status-unchecked {
background-color: $danger; background-color: var(--danger);
} }
.hyperlink { .hyperlink {

70
app/assets/stylesheets/common/base/user.scss
View File

@ -62,13 +62,13 @@
} }
.d-icon-heart { .d-icon-heart {
color: $love; color: var(--love);
} }
.user-notifications-filter-select-kit { .user-notifications-filter-select-kit {
display: block; display: block;
width: 100%; width: 100%;
border-bottom: 0.5px solid $primary-low; border-bottom: 0.5px solid var(--primary-low);
} }
} }
@ -91,7 +91,7 @@
.secondary { .secondary {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
border-top: 1px solid $primary-low; border-top: 1px solid var(--primary-low);
.btn { .btn {
padding: 4px 12px; padding: 4px 12px;
@ -117,7 +117,7 @@
dd { dd {
padding: 0; padding: 0;
margin: 0 15px 0 0; margin: 0 15px 0 0;
color: $primary; color: var(--primary);
&.groups { &.groups {
span:not(:last-of-type) { span:not(:last-of-type) {
@ -133,15 +133,15 @@
} }
dt { dt {
color: $secondary-medium; color: var(--secondary-medium);
margin-right: 5px; margin-right: 5px;
display: inline-block; display: inline-block;
} }
} }
.details { .details {
background: rgba($secondary, 0.8); background: rgba(var(--secondary-rgb), 0.8);
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
h1 { h1 {
font-size: $font-up-5; font-size: $font-up-5;
@ -175,7 +175,7 @@
} }
.suspended { .suspended {
color: $danger; color: var(--danger);
} }
.primary { .primary {
@ -224,7 +224,7 @@
&.collapsed-info { &.collapsed-info {
.details { .details {
margin-top: 0; margin-top: 0;
background: rgba($secondary, 0.8); background: rgba(var(--secondary-rgb), 0.8);
.bio { .bio {
display: none; display: none;
@ -266,8 +266,8 @@
} }
.staff-counters { .staff-counters {
background: $primary; background: var(--primary);
color: $secondary; color: var(--secondary);
display: flex; display: flex;
padding: 10px; padding: 10px;
margin-bottom: 16px; margin-bottom: 16px;
@ -277,7 +277,7 @@
align-items: baseline; align-items: baseline;
flex: 0 1 auto; flex: 0 1 auto;
margin: 0 10px 0 0; margin: 0 10px 0 0;
color: $secondary; color: var(--secondary);
span { span {
padding: 0 7px 1px; padding: 0 7px 1px;
@ -292,7 +292,7 @@
} }
.helpful-flags { .helpful-flags {
background-color: $success; background-color: var(--success);
} }
.flagged-posts { .flagged-posts {
@ -300,15 +300,15 @@
} }
.warnings-received { .warnings-received {
background-color: $danger-medium; background-color: var(--danger-medium);
} }
.deleted-posts { .deleted-posts {
background-color: $danger-medium; background-color: var(--danger-medium);
} }
.suspensions { .suspensions {
background-color: $danger; background-color: var(--danger);
} }
.user-field { .user-field {
@ -322,7 +322,7 @@
} }
.instructions { .instructions {
color: $primary-medium; color: var(--primary-medium);
margin-top: 5px; margin-top: 5px;
margin-bottom: 10px; margin-bottom: 10px;
font-size: $font-down-1; font-size: $font-down-1;
@ -342,7 +342,7 @@
.user-field { .user-field {
.required { .required {
vertical-align: top; vertical-align: top;
color: $danger; color: var(--danger);
font-weight: bold; font-weight: bold;
margin-left: 0.25em; margin-left: 0.25em;
} }
@ -393,7 +393,7 @@
} }
} }
.error { .error {
color: $danger; color: var(--danger);
margin: 0; margin: 0;
max-width: calc(#{$label-max-width} - 20px); max-width: calc(#{$label-max-width} - 20px);
grid-column-start: 2; grid-column-start: 2;
@ -442,7 +442,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
color: $primary; color: var(--primary);
} }
} }
} }
@ -453,7 +453,7 @@
} }
.label { .label {
color: $primary-medium; color: var(--primary-medium);
} }
} }
@ -465,13 +465,13 @@
} }
li { li {
border-left: $primary-low solid 2px; border-left: var(--primary-low) solid 2px;
padding: 5px 8px; padding: 5px 8px;
margin: 10px 0; margin: 10px 0;
} }
.topic-info { .topic-info {
color: $primary-medium; color: var(--primary-medium);
} }
@media all and (max-width: 600px) { @media all and (max-width: 600px) {
@ -491,7 +491,7 @@
.links-section { .links-section {
.domain { .domain {
font-size: $font-down-1; font-size: $font-down-1;
color: $primary-medium; color: var(--primary-medium);
} }
} }
@ -520,7 +520,7 @@
.groups { .groups {
.group-link { .group-link {
color: $tertiary; color: var(--tertiary);
} }
} }
@ -548,18 +548,18 @@
} }
.static { .static {
color: $primary; color: var(--primary);
display: inline-block; display: inline-block;
} }
.instructions { .instructions {
color: $primary-medium; color: var(--primary-medium);
margin-bottom: 10px; margin-bottom: 10px;
font-size: $font-down-1; font-size: $font-down-1;
line-height: $line-height-large; line-height: $line-height-large;
a[href] { a[href] {
color: $tertiary; color: var(--tertiary);
} }
} }
@ -568,9 +568,9 @@
} }
.warning { .warning {
background-color: $danger-medium; background-color: var(--danger-medium);
padding: 5px 8px; padding: 5px 8px;
color: $secondary; color: var(--secondary);
width: 520px; width: 520px;
} }
@ -606,7 +606,7 @@
display: inline-block; display: inline-block;
position: relative; position: relative;
border-radius: 3px; border-radius: 3px;
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
width: 100%; width: 100%;
} }
@ -624,7 +624,7 @@
&:focus { &:focus {
box-shadow: none; box-shadow: none;
border-color: $primary-low; border-color: var(--primary-low);
} }
} }
@ -678,7 +678,7 @@
} }
span:first-child { span:first-child {
color: $primary; color: var(--primary);
} }
// Can remove this once other languages have removed html from i18n values // Can remove this once other languages have removed html from i18n values
@ -703,7 +703,7 @@
.second-factor { .second-factor {
&.instructions { &.instructions {
color: $primary-medium; color: var(--primary-medium);
margin-top: 5px; margin-top: 5px;
margin-bottom: 10px; margin-bottom: 10px;
font-size: $font-down-1; font-size: $font-down-1;
@ -733,7 +733,7 @@
width: 60px; width: 60px;
height: 60px; height: 60px;
&:hover { &:hover {
box-shadow: 0 0 10px $primary; box-shadow: 0 0 10px var(--primary);
} }
} }
} }

38
app/assets/stylesheets/common/components/badges.scss
View File

@ -42,11 +42,11 @@
&.bullet { &.bullet {
margin-right: 12px; margin-right: 12px;
span.badge-category { span.badge-category {
color: $primary-high; color: var(--primary-high);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
.extra-info-wrapper & { .extra-info-wrapper & {
color: $header-primary; color: var(--header-primary);
} }
} }
.badge-category-parent-bg, .badge-category-parent-bg,
@ -66,7 +66,7 @@
} }
} }
.d-icon { .d-icon {
color: $primary-medium; color: var(--primary-medium);
} }
} }
@ -115,13 +115,13 @@
margin-right: 5px; margin-right: 5px;
span.badge-category { span.badge-category {
color: $primary-high; color: var(--primary-high);
padding: 1px 3px; padding: 1px 3px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
.extra-info-wrapper & { .extra-info-wrapper & {
color: $header-primary; color: var(--header-primary);
} }
} }
@ -140,7 +140,7 @@
// ----- No category style // ----- No category style
&.none { &.none {
color: $primary-high; color: var(--primary-high);
margin-right: 5px; margin-right: 5px;
} }
} }
@ -165,31 +165,31 @@
@extend %badge; @extend %badge;
padding: 0.21em 0.42em; padding: 0.21em 0.42em;
min-width: 0.5em; min-width: 0.5em;
color: $secondary; color: var(--secondary);
font-size: $font-down-2; font-size: $font-down-2;
line-height: $line-height-small; line-height: $line-height-small;
text-align: center; text-align: center;
background-color: $primary-low-mid-or-secondary-low; background-color: var(--primary-low-mid-or-secondary-low);
&[href] { &[href] {
color: $secondary; color: var(--secondary);
} }
&:hover { &:hover {
color: $secondary; color: var(--secondary);
} }
// New posts // New posts
&.new-posts, &.new-posts,
&.unread-posts { &.unread-posts {
background-color: $tertiary-med-or-tertiary; background-color: var(--tertiary-med-or-tertiary);
color: $secondary; color: var(--secondary);
font-weight: dark-light-choose(normal, bold); font-weight: dark-light-choose(normal, bold);
} }
&.new-topic { &.new-topic {
background-color: transparent; background-color: transparent;
color: $tertiary-high; color: var(--tertiary-high);
font-weight: normal; font-weight: normal;
font-size: $font-down-1; font-size: $font-down-1;
} }
@ -203,9 +203,9 @@
&.clicks { &.clicks {
font-weight: normal; font-weight: normal;
background-color: $primary-low; background-color: var(--primary-low);
top: -1px; top: -1px;
color: $primary-medium; color: var(--primary-medium);
position: relative; position: relative;
border: none; border: none;
} }
@ -219,7 +219,7 @@
font-size: $font-0; font-size: $font-0;
line-height: $line-height-small; line-height: $line-height-small;
&[href] { &[href] {
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
} }
} }
@ -229,8 +229,8 @@
.badge-group { .badge-group {
@extend %badge; @extend %badge;
padding: 2px 5px; padding: 2px 5px;
color: $primary; color: var(--primary);
background-color: $primary-low; background-color: var(--primary-low);
border-color: $primary-low; border-color: var(--primary-low);
font-size: $font-down-1; font-size: $font-down-1;
} }

10
app/assets/stylesheets/common/components/banner.scss
View File

@ -4,8 +4,8 @@
#banner { #banner {
padding: 0.5em 1em; padding: 0.5em 1em;
background: $tertiary-low; background: var(--tertiary-low);
color: $primary; color: var(--primary);
z-index: z("base") + 1; z-index: z("base") + 1;
overflow: auto; overflow: auto;
@ -14,11 +14,11 @@
} }
.close { .close {
color: $primary-low-mid; color: var(--primary-low-mid);
padding-left: 5px; padding-left: 5px;
float: right; float: right;
.d-icon { .d-icon {
color: $primary-medium; color: var(--primary-medium);
} }
} }
@ -29,6 +29,6 @@
#banner-content { #banner-content {
hr { hr {
border-color: $primary-medium; border-color: var(--primary-medium);
} }
} }

6
app/assets/stylesheets/common/components/bookmark-modal.scss
View File

@ -33,13 +33,13 @@
.custom-date-time-wrap { .custom-date-time-wrap {
padding: 1em 1em 0.5em; padding: 1em 1em 0.5em;
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
border-top: none; border-top: none;
margin-top: -0.667em; margin-top: -0.667em;
background: $primary-very-low; background: var(--primary-very-low);
.d-icon { .d-icon {
padding: 0 0.75em 0 0; padding: 0 0.75em 0 0;
color: $primary-high; color: var(--primary-high);
margin-top: -0.5em; margin-top: -0.5em;
} }

90
app/assets/stylesheets/common/components/buttons.scss
View File

@ -6,12 +6,12 @@
// -------------------------------------------------- // --------------------------------------------------
@mixin btn( @mixin btn(
$text-color: $primary, $text-color: var(--primary),
$bg-color: $primary-low, $bg-color: var(--primary-low),
$icon-color: $primary-high, $icon-color: var(--primary-high),
$hover-text-color: $secondary, $hover-text-color: var(--secondary),
$hover-bg-color: $primary-medium, $hover-bg-color: var(--primary-medium),
$hover-icon-color: $primary-low $hover-icon-color: var(--primary-low)
) { ) {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
@ -107,11 +107,11 @@
.btn-primary { .btn-primary {
@include btn( @include btn(
$text-color: $secondary, $text-color: var(--secondary),
$bg-color: $tertiary, $bg-color: var(--tertiary),
$icon-color: $secondary, $icon-color: var(--secondary),
$hover-bg-color: $tertiary-hover, $hover-bg-color: var(--tertiary-hover),
$hover-icon-color: $secondary $hover-icon-color: var(--secondary)
); );
} }
@ -120,11 +120,11 @@
.btn-danger { .btn-danger {
@include btn( @include btn(
$text-color: $secondary, $text-color: var(--secondary),
$bg-color: $danger, $bg-color: var(--danger),
$icon-color: $danger-low, $icon-color: var(--danger-low),
$hover-bg-color: $danger-hover, $hover-bg-color: var(--danger-hover),
$hover-icon-color: $danger-low $hover-icon-color: var(--danger-low)
); );
} }
@ -133,21 +133,21 @@
.btn.cancel { .btn.cancel {
@include btn( @include btn(
$text-color: $secondary, $text-color: var(--secondary),
$bg-color: $danger, $bg-color: var(--danger),
$icon-color: $secondary, $icon-color: var(--secondary),
$hover-bg-color: $danger-hover, $hover-bg-color: var(--danger-hover),
$hover-icon-color: $secondary $hover-icon-color: var(--secondary)
); );
} }
.btn.ok { .btn.ok {
@include btn( @include btn(
$text-color: $secondary, $text-color: var(--secondary),
$bg-color: $success, $bg-color: var(--success),
$icon-color: $secondary, $icon-color: var(--secondary),
$hover-bg-color: $success-hover, $hover-bg-color: var(--success-hover),
$hover-icon-color: $secondary $hover-icon-color: var(--secondary)
); );
} }
@ -164,56 +164,56 @@
color: #fff; color: #fff;
} }
&[href] { &[href] {
color: $secondary; color: var(--secondary);
} }
&:before { &:before {
margin-right: 9px; margin-right: 9px;
font-size: $font-0; font-size: $font-0;
} }
&.google_oauth2 { &.google_oauth2 {
background: $google; background: var(--google);
color: #333; color: #333;
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
// non-FA SVG icon for Google in login-buttons.hbs // non-FA SVG icon for Google in login-buttons.hbs
.d-icon { .d-icon {
opacity: 0.9; opacity: 0.9;
} }
&:hover { &:hover {
color: currentColor; color: currentColor;
background: $google-hover; background: var(--google-hover);
} }
} }
&.instagram { &.instagram {
background: $instagram; background: var(--instagram);
&:hover { &:hover {
background: $instagram-hover; background: var(--instagram-hover);
} }
} }
&.facebook { &.facebook {
background: $facebook; background: $facebook;
&:hover { &:hover {
background: $facebook-hover; background: var(--facebook-hover);
} }
} }
&.cas { &.cas {
background: $cas; background: var(--cas);
} }
&.twitter { &.twitter {
background: $twitter; background: var(--twitter);
&:hover { &:hover {
background: $twitter-hover; background: var(--twitter-hover);
} }
} }
&.github { &.github {
background: $github; background: var(--github);
&:hover { &:hover {
background: $github-hover; background: var(--github-hover);
} }
} }
&.discord { &.discord {
background: $discord; background: var(--discord);
&:hover { &:hover {
background: $discord-hover; background: var(--discord-hover);
} }
} }
} }
@ -247,11 +247,11 @@
line-height: $line-height-small; line-height: $line-height-small;
transition: color 0.25s, background 0.25s; transition: color 0.25s, background 0.25s;
.d-icon { .d-icon {
color: $primary-low-mid; color: var(--primary-low-mid);
} }
@include hover { @include hover {
.d-icon { .d-icon {
color: $primary; color: var(--primary);
} }
} }
&.close { &.close {
@ -260,12 +260,12 @@
background: transparent; background: transparent;
font-size: $font-up-3; font-size: $font-up-3;
.d-icon { .d-icon {
color: $primary-high; color: var(--primary-high);
} }
@include hover { @include hover {
background: transparent; background: transparent;
.d-icon { .d-icon {
color: $primary; color: var(--primary);
} }
} }
} }
@ -276,7 +276,7 @@
border: 0; border: 0;
outline: 0; outline: 0;
padding: 0; padding: 0;
color: $tertiary; color: var(--tertiary);
&:focus { &:focus {
outline: 1px currentColor dotted; outline: 1px currentColor dotted;
} }

2
app/assets/stylesheets/common/components/conditional-loading-section.scss
View File

@ -5,7 +5,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: $primary-very-low; background: var(--primary-very-low);
flex-direction: column; flex-direction: column;
.title { .title {

8
app/assets/stylesheets/common/components/date-input.scss
View File

@ -13,21 +13,21 @@
&::-webkit-input-placeholder { &::-webkit-input-placeholder {
font-size: $font-0; font-size: $font-0;
color: $primary-medium; color: var(--primary-medium);
} }
&::-ms-input-placeholder { &::-ms-input-placeholder {
font-size: $font-0; font-size: $font-0;
color: $primary-medium; color: var(--primary-medium);
} }
&::placeholder { &::placeholder {
font-size: $font-0; font-size: $font-0;
color: $primary-medium; color: var(--primary-medium);
} }
&:focus { &:focus {
outline: 1px solid $tertiary; outline: 1px solid var(--tertiary);
outline-offset: 0; outline-offset: 0;
} }
} }

2
app/assets/stylesheets/common/components/date-time-input-range.scss
View File

@ -1,5 +1,5 @@
.d-date-time-input-range { .d-date-time-input-range {
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
display: inline-flex; display: inline-flex;
box-sizing: border-box; box-sizing: border-box;
} }

2
app/assets/stylesheets/common/components/date-time-input.scss
View File

@ -1,6 +1,6 @@
.d-date-time-input { .d-date-time-input {
display: flex; display: flex;
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;

8
app/assets/stylesheets/common/components/footer-nav.scss
View File

@ -21,7 +21,7 @@ body.footer-nav-visible {
} }
.footer-nav { .footer-nav {
background-color: rgba($header_background, 0.9); background-color: rgba(var(--header_background-rgb), 0.9);
box-shadow: shadow("footer-nav"); box-shadow: shadow("footer-nav");
height: $footer-nav-height; height: $footer-nav-height;
position: fixed; position: fixed;
@ -32,7 +32,7 @@ body.footer-nav-visible {
transition: all linear 0.1s; transition: all linear 0.1s;
.d-icon { .d-icon {
color: $header_primary-medium; color: var(--header_primary-medium);
} }
&.visible { &.visible {
@ -63,7 +63,7 @@ body.footer-nav-visible {
@supports (-webkit-backdrop-filter: blur(10px)) { @supports (-webkit-backdrop-filter: blur(10px)) {
body:not(.footer-nav-ipad) .footer-nav { body:not(.footer-nav-ipad) .footer-nav {
background-color: rgba($header_background, 0.7); background-color: rgba(var(--header_background-rgb), 0.7);
-webkit-backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
} }
} }
@ -73,7 +73,7 @@ body.footer-nav-ipad {
.footer-nav { .footer-nav {
bottom: auto; bottom: auto;
top: 0px; top: 0px;
background-color: $header_background; background-color: var(--header_background);
z-index: z("ipad-header-nav"); z-index: z("ipad-header-nav");
padding-bottom: 0; // resets safe-area-inset-bottom padding-bottom: 0; // resets safe-area-inset-bottom
} }

4
app/assets/stylesheets/common/components/hashtag.scss
View File

@ -1,10 +1,10 @@
a.hashtag { a.hashtag {
color: $primary-or-primary-low-mid; color: var(--primary-or-primary-low-mid);
font-weight: bold; font-weight: bold;
&:visited, &:visited,
&:hover { &:hover {
color: $primary-or-primary-low-mid; color: var(--primary-or-primary-low-mid);
} }
&:hover { &:hover {

4
app/assets/stylesheets/common/components/ignored-user-list.scss
View File

@ -4,13 +4,13 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
background-color: $secondary; background-color: var(--secondary);
min-height: 30px; min-height: 30px;
box-sizing: border-box; box-sizing: border-box;
} }
.ignored-user-list-item { .ignored-user-list-item {
border: 1px solid $primary-medium; border: 1px solid var(--primary-medium);
border-radius: 5px; border-radius: 5px;
padding: 0; padding: 0;
display: flex; display: flex;

6
app/assets/stylesheets/common/components/keyboard_shortcuts.scss
View File

@ -7,12 +7,12 @@
.topic-list-item.selected td:first-child, .topic-list-item.selected td:first-child,
.latest-topic-list-item.selected, .latest-topic-list-item.selected,
.search-results .fps-result.selected { .search-results .fps-result.selected {
box-shadow: inset 3px 0 0 $danger; // needs to be inset for Edge box-shadow: inset 3px 0 0 var(--danger); // needs to be inset for Edge
} }
.featured-topic.selected, .featured-topic.selected,
.topic-post.selected { .topic-post.selected {
box-shadow: -3px 0 0 $danger; box-shadow: -3px 0 0 var(--danger);
} }
.latest .featured-topic { .latest .featured-topic {
@ -51,7 +51,7 @@
} }
span { span {
background: $primary-very-low; background: var(--primary-very-low);
border-radius: 3px; border-radius: 3px;
display: inline-flex; display: inline-flex;
margin: 0 6px; margin: 0 6px;

22
app/assets/stylesheets/common/components/navs.scss
View File

@ -28,7 +28,7 @@
> a { > a {
border: none; border: none;
padding: 6px 12px; padding: 6px 12px;
color: $primary; color: var(--primary);
font-size: $font-up-1; font-size: $font-up-1;
line-height: $line-height-small; line-height: $line-height-small;
box-sizing: border-box; box-sizing: border-box;
@ -43,14 +43,14 @@
} }
&:hover { &:hover {
color: $quaternary; color: var(--quaternary);
background-color: $quaternary-low; background-color: var(--quaternary-low);
} }
} }
a.active { a.active {
color: $secondary; color: var(--secondary);
background-color: $quaternary; background-color: var(--quaternary);
.d-icon { .d-icon {
opacity: 1; opacity: 1;
@ -66,10 +66,10 @@
@extend %nav; @extend %nav;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
background: $primary-low; background: var(--primary-low);
li { li {
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
position: relative; position: relative;
&:last-of-type { &:last-of-type {
@ -87,11 +87,11 @@
font-size: $font-up-1; font-size: $font-up-1;
line-height: $line-height-small; line-height: $line-height-small;
cursor: pointer; cursor: pointer;
color: $primary; color: var(--primary);
&.active { &.active {
color: $secondary; color: var(--secondary);
background-color: $quaternary; background-color: var(--quaternary);
&::after { &::after {
left: 90%; left: 90%;
@ -99,7 +99,7 @@
content: " "; content: " ";
position: absolute; position: absolute;
border: 8px solid transparent; border: 8px solid transparent;
border-left-color: $secondary; border-left-color: var(--secondary);
} }
} }
} }

2
app/assets/stylesheets/common/components/share-and-invite-modal.scss
View File

@ -28,7 +28,7 @@
margin-bottom: 8px; margin-bottom: 8px;
.post-date { .post-date {
color: $primary-medium; color: var(--primary-medium);
font-size: $font-down-1; font-size: $font-down-1;
} }
} }

14
app/assets/stylesheets/common/components/tap-tile.scss
View File

@ -3,33 +3,33 @@
margin: 0.5em 0 1em 0; margin: 0.5em 0 1em 0;
.tap-tile { .tap-tile {
color: $primary-high; color: var(--primary-high);
padding: 0.75em 0.25em; padding: 0.75em 0.25em;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
cursor: pointer; cursor: pointer;
&:first-child { &:first-child {
border-top: 1px solid $primary-low; border-top: 1px solid var(--primary-low);
} }
&:hover { &:hover {
background-color: $tertiary-low; background-color: var(--tertiary-low);
} }
&.active { &.active {
background-color: $highlight-medium; background-color: var(--highlight-medium);
} }
.d-icon { .d-icon {
color: $primary-high; color: var(--primary-high);
margin: 0 0.5em 0 0; margin: 0 0.5em 0 0;
} }
.tap-tile-title { .tap-tile-title {
color: $primary; color: var(--primary);
margin-right: auto; margin-right: auto;
} }

4
app/assets/stylesheets/common/components/time-input.scss
View File

@ -8,7 +8,7 @@
&:not(.has-selection) { &:not(.has-selection) {
.select-kit-selected-name .name { .select-kit-selected-name .name {
color: $primary-medium; color: var(--primary-medium);
} }
} }
@ -18,7 +18,7 @@
} }
&:focus { &:focus {
outline: 1px solid $tertiary; outline: 1px solid var(--tertiary);
} }
} }

42
app/assets/stylesheets/common/components/user-card.scss
View File

@ -20,9 +20,9 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
content: ""; content: "";
background: linear-gradient( background: linear-gradient(
to right, to right,
$primary-very-low 10%, var(--primary-very-low) 10%,
$primary-low 18%, var(--primary-low) 18%,
$primary-very-low 33% var(--primary-very-low) 33%
); );
height: $avatar_width; height: $avatar_width;
width: $card_width; width: $card_width;
@ -34,8 +34,8 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
.group-card { .group-card {
width: $card_width; width: $card_width;
box-shadow: shadow("card"); box-shadow: shadow("card");
color: $primary; color: var(--primary);
background: $secondary center center; background: var(--secondary) center center;
background-size: cover; background-size: cover;
transition: opacity 0.2s, transform 0.2s; transition: opacity 0.2s, transform 0.2s;
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s; -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
@ -47,7 +47,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
} }
.card-content { .card-content {
padding: 10px; padding: 10px;
background: rgba($secondary, 0.85); background: rgba(var(--secondary-rgb), 0.85);
margin-top: 80px; margin-top: 80px;
&:after { &:after {
content: ""; content: "";
@ -105,17 +105,17 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
h1 { h1 {
line-height: $line-height-medium; line-height: $line-height-medium;
.d-icon { .d-icon {
color: $primary; color: var(--primary);
} }
} }
h3 { h3 {
display: inline; display: inline;
margin-right: 0.5em; margin-right: 0.5em;
color: $primary; color: var(--primary);
&.email, &.email,
.desc, .desc,
a { a {
color: $primary-high; color: var(--primary-high);
} }
} }
h1, h1,
@ -127,7 +127,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
h1, h1,
h2 { h2 {
a { a {
color: $primary; color: var(--primary);
} }
} }
h2, h2,
@ -152,7 +152,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
margin-top: $avatar_margin; margin-top: $avatar_margin;
} }
.new-user a { .new-user a {
color: $primary-low-mid; color: var(--primary-low-mid);
} }
} }
// user bio - suspension reason // user bio - suspension reason
@ -161,7 +161,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
overflow: auto; overflow: auto;
.bio { .bio {
a { a {
color: $primary; color: var(--primary);
text-decoration: underline; text-decoration: underline;
} }
a.mention { a.mention {
@ -173,7 +173,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
} }
} }
.suspended { .suspended {
color: $danger; color: var(--danger);
.suspension-reason-title, .suspension-reason-title,
.suspension-date { .suspension-date {
font-weight: bold; font-weight: bold;
@ -187,10 +187,10 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
// featured topic // featured topic
.featured-topic { .featured-topic {
.desc { .desc {
color: $primary-high; color: var(--primary-high);
} }
a { a {
color: $primary; color: var(--primary);
text-decoration: underline; text-decoration: underline;
} }
} }
@ -213,7 +213,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
.website-name a, .website-name a,
.location span { .location span {
@include ellipsis; @include ellipsis;
color: $primary; color: var(--primary);
} }
.location, .location,
.local-time, .local-time,
@ -235,9 +235,9 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
align-items: flex-start; align-items: flex-start;
.user-badge { .user-badge {
@include ellipsis; @include ellipsis;
background: $primary-very-low; background: var(--primary-very-low);
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
color: $primary; color: var(--primary);
} }
.more-user-badges { .more-user-badges {
a { a {
@ -261,7 +261,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
background-repeat: no-repeat; background-repeat: no-repeat;
width: $avatar_width; width: $avatar_width;
height: $avatar_width; height: $avatar_width;
color: $primary; color: var(--primary);
.d-icon { .d-icon {
margin: auto; margin: auto;
font-size: $avatar_width / 1.5; font-size: $avatar_width / 1.5;
@ -277,7 +277,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
overflow: auto; overflow: auto;
.bio { .bio {
a { a {
color: $primary; color: var(--primary);
text-decoration: underline; text-decoration: underline;
} }
img { img {

8
app/assets/stylesheets/common/components/user-info.scss
View File

@ -29,17 +29,17 @@
.username a { .username a {
font-weight: bold; font-weight: bold;
color: $primary-high-or-secondary-low; color: var(--primary-high-or-secondary-low);
} }
.name { .name {
margin-left: 5px; margin-left: 5px;
color: $primary-high-or-secondary-low; color: var(--primary-high-or-secondary-low);
} }
.title { .title {
margin-top: 3px; margin-top: 3px;
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
} }
} }
@ -71,7 +71,7 @@
min-width: 250px; min-width: 250px;
.granted-on { .granted-on {
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
} }
.post-link { .post-link {

28
app/assets/stylesheets/common/components/user-stream-item.scss
View File

@ -7,16 +7,16 @@
// selectors below are its children // selectors below are its children
.item, .item,
.user-stream-item { .user-stream-item {
background-color: $secondary; background-color: var(--secondary);
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
padding: 1em 0.53em; padding: 1em 0.53em;
&.moderator-action { &.moderator-action {
background-color: $highlight-medium; background-color: var(--highlight-medium);
} }
&.deleted { &.deleted {
background-color: $danger-low-mid; background-color: var(--danger-low-mid);
} }
&.hidden { &.hidden {
@ -27,14 +27,14 @@
.type, .type,
span.name { span.name {
color: $primary; color: var(--primary);
} }
.time, .time,
.delete-info, .delete-info,
.draft-type { .draft-type {
float: right; float: right;
color: $primary-medium; color: var(--primary-medium);
font-size: $font-down-2; font-size: $font-down-2;
} }
@ -56,7 +56,7 @@
float: right; float: right;
margin-right: 0.5em; margin-right: 0.5em;
line-height: $line-height-small; line-height: $line-height-small;
color: $primary-medium; color: var(--primary-medium);
} }
.avatar-link { .avatar-link {
@ -76,7 +76,7 @@
} }
.edit-reason { .edit-reason {
background-color: $highlight-medium; background-color: var(--highlight-medium);
padding: 3px 5px 5px 5px; padding: 3px 5px 5px 5px;
} }
@ -95,14 +95,14 @@
display: inline-block; display: inline-block;
span:first-child { span:first-child {
color: $primary; color: var(--primary);
} }
} }
// common/base/header.scss // common/base/header.scss
.fa, .fa,
.icon { .icon {
color: $primary-med-or-secondary-med; color: var(--primary-med-or-secondary-med);
font-size: $font-up-4; font-size: $font-up-4;
} }
} }
@ -111,12 +111,12 @@
margin: 1em 0 0 0; margin: 1em 0 0 0;
font-size: $font-0; font-size: $font-0;
word-wrap: break-word; word-wrap: break-word;
color: $primary; color: var(--primary);
&:empty { &:empty {
display: none; display: none;
} }
details.disabled { details.disabled {
color: $primary-medium; color: var(--primary-medium);
} }
} }
@ -138,9 +138,9 @@
.fa { .fa {
width: 15px; width: 15px;
display: inline-block; display: inline-block;
color: $primary; color: var(--primary);
&.d-icon-heart { &.d-icon-heart {
color: $love; color: var(--love);
} }
} }
} }

12
app/assets/stylesheets/common/components/widget-dropdown.scss
View File

@ -12,9 +12,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0.25em; padding: 0.25em;
background: $secondary; background: var(--secondary);
z-index: z("dropdown"); z-index: z("dropdown");
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
max-height: 250px; max-height: 250px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
@ -28,22 +28,22 @@
align-items: center; align-items: center;
.d-icon { .d-icon {
color: $primary-medium; color: var(--primary-medium);
margin-right: 0.25em; margin-right: 0.25em;
} }
&.separator { &.separator {
padding: 0; padding: 0;
background: $primary-low; background: var(--primary-low);
margin: 0.25em 0; margin: 0.25em 0;
&:hover { &:hover {
background: $primary-low; background: var(--primary-low);
} }
} }
&:hover { &:hover {
background: $tertiary-low; background: var(--tertiary-low);
} }
} }

28
app/assets/stylesheets/common/d-editor.scss
View File

@ -18,9 +18,9 @@
.d-editor-textarea-wrapper { .d-editor-textarea-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: $secondary; background-color: var(--secondary);
position: relative; position: relative;
border: 1px solid $primary-medium; border: 1px solid var(--primary-medium);
textarea { textarea {
background: transparent; background: transparent;
@ -49,18 +49,18 @@
display: flex; display: flex;
align-items: center; align-items: center;
min-height: 30px; min-height: 30px;
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
.btn, .btn,
.btn-default { .btn-default {
background-color: transparent; background-color: transparent;
display: inline-block; display: inline-block;
color: $primary-medium; color: var(--primary-medium);
.d-icon { .d-icon {
color: currentColor; color: currentColor;
} }
&:hover { &:hover {
color: $primary-low; color: var(--primary-low);
} }
svg { svg {
@ -75,7 +75,7 @@
.d-editor-spacer { .d-editor-spacer {
height: 1em; height: 1em;
display: inline-block; display: inline-block;
border-left: 1px solid $primary-low-mid; border-left: 1px solid var(--primary-low-mid);
} }
.btn:not(.no-text) { .btn:not(.no-text) {
@ -134,7 +134,7 @@
.composing-whisper .d-editor-preview { .composing-whisper .d-editor-preview {
font-style: italic; font-style: italic;
color: $primary-medium !important; color: var(--primary-medium) !important;
} }
.d-editor-preview > *:first-child { .d-editor-preview > *:first-child {
@ -167,14 +167,14 @@
display: block; display: block;
} }
.d-editor-textarea-wrapper { .d-editor-textarea-wrapper {
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
} }
.d-editor-preview-wrapper { .d-editor-preview-wrapper {
max-width: 100%; max-width: 100%;
margin: 10px 0 0 0; margin: 10px 0 0 0;
} }
.d-editor-preview { .d-editor-preview {
background-color: $primary-very-low; background-color: var(--primary-very-low);
padding: 5px; padding: 5px;
&:empty { &:empty {
padding: 0; padding: 0;
@ -185,7 +185,7 @@
.user-preferences .bio-composer, .user-preferences .bio-composer,
.group-form-bio { .group-form-bio {
padding: 10px; padding: 10px;
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
} }
.d-editor-preview img { .d-editor-preview img {
@ -231,11 +231,11 @@
transition: all 0.25s; transition: all 0.25s;
z-index: 1; // needs to be higher than image z-index: 1; // needs to be higher than image
width: 100%; width: 100%;
background: $secondary; // for when images are wider than controls background: var(--secondary); // for when images are wider than controls
.scale-btn { .scale-btn {
background: $secondary; // for when controls are wider than image background: var(--secondary); // for when controls are wider than image
color: $tertiary; color: var(--tertiary);
padding: 0 1em; padding: 0 1em;
&:first-child, &:first-child,
&:last-child { &:last-child {
@ -244,7 +244,7 @@
&.active { &.active {
font-weight: bold; font-weight: bold;
color: $primary; color: var(--primary);
} }
&:not(.active):hover { &:not(.active):hover {

18
app/assets/stylesheets/common/foundation/base.scss
View File

@ -6,11 +6,11 @@
// -------------------------------------------------- // --------------------------------------------------
html { html {
color: $primary; color: var(--primary);
font-family: $base-font-family; font-family: $base-font-family;
font-size: $base-font-size; font-size: $base-font-size;
line-height: $line-height-large; line-height: $line-height-large;
background-color: $secondary; background-color: var(--secondary);
overflow-y: scroll; overflow-y: scroll;
direction: ltr; direction: ltr;
@ -35,17 +35,17 @@ html {
// -------------------------------------------------- // --------------------------------------------------
a { a {
color: $tertiary; color: var(--tertiary);
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
&:visited { &:visited {
color: $tertiary; color: var(--tertiary);
} }
&:hover { &:hover {
color: $tertiary; color: var(--tertiary);
} }
&:active { &:active {
color: $tertiary; color: var(--tertiary);
} }
} }
@ -57,7 +57,7 @@ hr {
height: 1px; height: 1px;
margin: 1em 0; margin: 1em 0;
border: 0; border: 0;
border-top: 1px solid $primary-low; border-top: 1px solid var(--primary-low);
padding: 0; padding: 0;
} }
@ -136,11 +136,11 @@ table {
} }
tbody { tbody {
border-top: 3px solid $primary-low; border-top: 3px solid var(--primary-low);
} }
tr { tr {
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
&.highlighted { &.highlighted {
animation: background-fade-highlight 2.5s ease-out; animation: background-fade-highlight 2.5s ease-out;
} }

4
app/assets/stylesheets/common/foundation/mixins.scss
View File

@ -89,8 +89,8 @@ $breakpoints: (
// Stuff we repeat // Stuff we repeat
@mixin post-aside { @mixin post-aside {
border-left: 5px solid $primary-low; border-left: 5px solid var(--primary-low);
background-color: $blend-primary-secondary-5; background-color: var(--blend-primary-secondary-5);
} }
// We still need -webkit for latest iPhone and Safari // We still need -webkit for latest iPhone and Safari

4
app/assets/stylesheets/common/input_tip.scss
View File

@ -7,7 +7,7 @@
padding: 5px 10px; padding: 5px 10px;
z-index: z("tooltip"); z-index: z("tooltip");
&.bad { &.bad {
background: $danger-medium; background: var(--danger-medium);
color: white; color: white;
box-shadow: shadow("dropdown"); box-shadow: shadow("dropdown");
} }
@ -17,7 +17,7 @@
} }
.close { .close {
float: right; float: right;
color: $primary; color: var(--primary);
opacity: 0.5; opacity: 0.5;
font-size: $font-0; font-size: $font-0;
margin: 0 0 0 4px; margin: 0 0 0 4px;

4
app/assets/stylesheets/common/select-kit/category-chooser.scss
View File

@ -23,14 +23,14 @@
.topic-count { .topic-count {
font-size: $font-down-1; font-size: $font-down-1;
color: $primary-medium; color: var(--primary-medium);
white-space: nowrap; white-space: nowrap;
margin-left: 0.5em; margin-left: 0.5em;
font-weight: normal; font-weight: normal;
} }
.category-status { .category-status {
color: $primary; color: var(--primary);
line-height: $line-height-large; line-height: $line-height-large;
-webkit-box-flex: 0; -webkit-box-flex: 0;
-ms-flex: 1 1 auto; -ms-flex: 1 1 auto;

6
app/assets/stylesheets/common/select-kit/category-drop.scss
View File

@ -45,13 +45,13 @@
&[data-value="all-categories"], &[data-value="all-categories"],
&[data-value="no-categories"] { &[data-value="no-categories"] {
color: $tertiary; color: var(--tertiary);
font-weight: 700; font-weight: 700;
} }
.category-desc { .category-desc {
font-weight: normal; font-weight: normal;
color: $primary-medium; color: var(--primary-medium);
margin-top: 2px; margin-top: 2px;
} }
@ -62,7 +62,7 @@
.topic-count { .topic-count {
margin-left: 0.5em; margin-left: 0.5em;
font-weight: normal; font-weight: normal;
color: $primary-medium; color: var(--primary-medium);
font-size: $font-down-1; font-size: $font-down-1;
} }

24
app/assets/stylesheets/common/select-kit/combo-box.scss
View File

@ -27,14 +27,14 @@
} }
.select-kit-header { .select-kit-header {
background: $secondary; background: var(--secondary);
border: 1px solid $primary-medium; border: 1px solid var(--primary-medium);
padding: 0 0.25em 0 0.5em; padding: 0 0.25em 0 0.5em;
font-weight: 500; font-weight: 500;
font-size: $font-0; font-size: $font-0;
&.is-focused { &.is-focused {
border: 1px solid $tertiary; border: 1px solid var(--tertiary);
box-shadow: shadow("focus"); box-shadow: shadow("focus");
} }
} }
@ -48,12 +48,12 @@
.collection-header { .collection-header {
a { a {
white-space: nowrap; white-space: nowrap;
color: $primary; color: var(--primary);
line-height: $line-height-medium; line-height: $line-height-medium;
font-weight: bold; font-weight: bold;
display: block; display: block;
padding: 0.75em; padding: 0.75em;
color: $tertiary; color: var(--tertiary);
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
@ -64,18 +64,18 @@
&.is-disabled { &.is-disabled {
.select-kit-header { .select-kit-header {
background: $primary-low; background: var(--primary-low);
border-color: $primary-low-mid; border-color: var(--primary-low-mid);
color: $primary-medium; color: var(--primary-medium);
.d-icon { .d-icon {
color: $primary-medium; color: var(--primary-medium);
} }
} }
} }
&.is-highlighted { &.is-highlighted {
.select-kit-header { .select-kit-header {
border: 1px solid $tertiary; border: 1px solid var(--tertiary);
box-shadow: shadow("focus"); box-shadow: shadow("focus");
} }
} }
@ -83,7 +83,7 @@
&.is-expanded { &.is-expanded {
.select-kit-wrapper { .select-kit-wrapper {
display: block; display: block;
border: 1px solid $tertiary; border: 1px solid var(--tertiary);
box-shadow: shadow("focus"); box-shadow: shadow("focus");
} }
} }
@ -104,7 +104,7 @@
} }
&.tag-drop { &.tag-drop {
color: $primary-high; color: var(--primary-high);
} }
&.group-dropdown { &.group-dropdown {

4
app/assets/stylesheets/common/select-kit/composer-actions.scss
View File

@ -7,14 +7,14 @@
outline: none; outline: none;
padding: 0; padding: 0;
margin-right: 5px; margin-right: 5px;
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
min-height: unset; min-height: unset;
.d-icon { .d-icon {
padding: 5px 6px; padding: 5px 6px;
} }
&:hover, &:hover,
&:focus { &:focus {
background: $primary-low; background: var(--primary-low);
} }
} }
.d-icon { .d-icon {

8
app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
View File

@ -12,7 +12,7 @@
} }
.select-kit-body { .select-kit-body {
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
background-clip: padding-box; background-clip: padding-box;
box-shadow: shadow("dropdown"); box-shadow: shadow("dropdown");
} }
@ -46,7 +46,7 @@
flex: 1 1 auto; flex: 1 1 auto;
font-weight: bold; font-weight: bold;
font-size: $font-0; font-size: $font-0;
color: $primary; color: var(--primary);
padding: 0; padding: 0;
@include ellipsis; @include ellipsis;
max-width: 100%; max-width: 100%;
@ -56,7 +56,7 @@
flex: 1 1 auto; flex: 1 1 auto;
font-size: $font-down-1; font-size: $font-down-1;
font-weight: normal; font-weight: normal;
color: $primary-medium; color: var(--primary-medium);
white-space: normal; white-space: normal;
min-width: 350px; min-width: 350px;
} }
@ -82,7 +82,7 @@
&.is-focused { &.is-focused {
outline-style: auto; outline-style: auto;
outline-color: $tertiary; outline-color: var(--tertiary);
} }
} }
} }

4
app/assets/stylesheets/common/select-kit/future-date-input-selector.scss
View File

@ -10,7 +10,7 @@
} }
.future-date-input-selector-datetime { .future-date-input-selector-datetime {
color: $primary-medium; color: var(--primary-medium);
margin-left: auto; margin-left: auto;
white-space: nowrap; white-space: nowrap;
@ -30,7 +30,7 @@
.future-date-input-selector-row { .future-date-input-selector-row {
.future-date-input-selector-icons { .future-date-input-selector-icons {
color: $primary-medium; color: var(--primary-medium);
} }
} }
} }

2
app/assets/stylesheets/common/select-kit/icon-picker.scss
View File

@ -2,7 +2,7 @@
&.icon-picker { &.icon-picker {
.multi-select-header { .multi-select-header {
.select-kit-selected-name .d-icon { .select-kit-selected-name .d-icon {
color: $primary-high; color: var(--primary-high);
} }
} }
} }

16
app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss
View File

@ -6,7 +6,7 @@
&.no-tags { &.no-tags {
.select-kit-header .selected-name { .select-kit-header .selected-name {
color: $primary-medium; color: var(--primary-medium);
} }
} }
@ -43,12 +43,12 @@
} }
&.is-highlighted.is-selected { &.is-highlighted.is-selected {
background: $tertiary-low; background: var(--tertiary-low);
} }
.discourse-tag { .discourse-tag {
&:hover { &:hover {
color: $primary; color: var(--primary);
} }
} }
@ -61,14 +61,14 @@
max-height: 125px; max-height: 125px;
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
padding: 0.25em 0 0 0.25em; padding: 0.25em 0 0 0.25em;
box-sizing: border-box; box-sizing: border-box;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
.selected-tag { .selected-tag {
background: $primary-low; background: var(--primary-low);
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0.5em; padding: 0.5em;
@ -82,16 +82,16 @@
} }
&.is-highlighted { &.is-highlighted {
box-shadow: 0 0 2px $danger, 0 1px 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0 2px var(--danger), 0 1px 0 rgba(0, 0, 0, 0.05);
} }
.d-icon { .d-icon {
color: $primary-low-mid; color: var(--primary-low-mid);
vertical-align: middle; vertical-align: middle;
} }
&:hover .d-icon.d-icon-times { &:hover .d-icon.d-icon-times {
color: $danger; color: var(--danger);
} }
} }
} }

24
app/assets/stylesheets/common/select-kit/multi-select.scss
View File

@ -1,7 +1,7 @@
.select-kit { .select-kit {
&.multi-select { &.multi-select {
width: 300px; width: 300px;
background: $secondary; background: var(--secondary);
border-radius: 0; border-radius: 0;
.select-kit-row { .select-kit-row {
@ -18,8 +18,8 @@
} }
.multi-select-header { .multi-select-header {
background: $secondary; background: var(--secondary);
border: 1px solid $primary-medium; border: 1px solid var(--primary-medium);
&.is-focused { &.is-focused {
box-shadow: shadow("focus"); box-shadow: shadow("focus");
@ -29,11 +29,11 @@
&.is-disabled { &.is-disabled {
.multi-select-header { .multi-select-header {
background: $primary-low; background: var(--primary-low);
border-color: $primary-low-mid; border-color: var(--primary-low-mid);
color: $primary-medium; color: var(--primary-medium);
.d-icon { .d-icon {
color: $primary-medium; color: var(--primary-medium);
} }
} }
} }
@ -41,7 +41,7 @@
&.is-expanded { &.is-expanded {
.select-kit-wrapper { .select-kit-wrapper {
display: block; display: block;
border: 1px solid $tertiary; border: 1px solid var(--tertiary);
box-shadow: shadow("focus"); box-shadow: shadow("focus");
border-radius: 0; border-radius: 0;
} }
@ -139,7 +139,7 @@
} }
.selected-name { .selected-name {
background: $primary-low; background: var(--primary-low);
padding: 0.25em; padding: 0.25em;
flex: 1; flex: 1;
align-items: center; align-items: center;
@ -147,7 +147,7 @@
justify-content: space-between; justify-content: space-between;
.d-icon { .d-icon {
color: $primary-low-mid; color: var(--primary-low-mid);
vertical-align: middle; vertical-align: middle;
&:last-child { &:last-child {
@ -155,11 +155,11 @@
} }
} }
&:hover .d-icon:last-child { &:hover .d-icon:last-child {
color: $danger; color: var(--danger);
} }
&.is-highlighted { &.is-highlighted {
box-shadow: 0 0 2px $danger, 0 1px 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0 2px var(--danger), 0 1px 0 rgba(0, 0, 0, 0.05);
} }
} }
} }

6
app/assets/stylesheets/common/select-kit/notifications-filter.scss
View File

@ -17,19 +17,19 @@
.filter-text { .filter-text {
margin-right: 0.5em; margin-right: 0.5em;
color: $primary-medium; color: var(--primary-medium);
cursor: pointer; cursor: pointer;
margin-bottom: 0; margin-bottom: 0;
} }
.header-text { .header-text {
color: $tertiary; color: var(--tertiary);
cursor: pointer; cursor: pointer;
margin-bottom: 0; margin-bottom: 0;
} }
.d-icon { .d-icon {
color: $primary-medium; color: var(--primary-medium);
margin: 0 0 0 0.25em; margin: 0 0 0 0.25em;
font-size: $font-up-2; font-size: $font-up-2;
} }

12
app/assets/stylesheets/common/select-kit/period-chooser.scss
View File

@ -17,25 +17,25 @@
padding: 0; padding: 0;
h2.selected-name { h2.selected-name {
color: $secondary; color: var(--secondary);
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
.date-section { .date-section {
color: $primary; color: var(--primary);
margin-right: 5px; margin-right: 5px;
} }
.top-date-string { .top-date-string {
font-size: $font-down-1; font-size: $font-down-1;
color: $primary-med-or-secondary-high; color: var(--primary-med-or-secondary-high);
font-weight: normal; font-weight: normal;
text-transform: uppercase; text-transform: uppercase;
} }
} }
.d-icon { .d-icon {
color: $primary; color: var(--primary);
opacity: 1; opacity: 1;
margin: 5px 0 10px 5px; margin: 5px 0 10px 5px;
font-size: $font-up-3; font-size: $font-up-3;
@ -61,13 +61,13 @@
} }
.date-section { .date-section {
color: $primary; color: var(--primary);
} }
.top-date-string { .top-date-string {
font-weight: normal; font-weight: normal;
font-size: $font-down-1; font-size: $font-down-1;
color: $primary-med-or-secondary-high; color: var(--primary-med-or-secondary-high);
text-transform: uppercase; text-transform: uppercase;
margin-left: 5px; margin-left: 5px;
} }

26
app/assets/stylesheets/common/select-kit/select-kit.scss
View File

@ -46,7 +46,7 @@
} }
.d-icon { .d-icon {
color: $primary-high; color: var(--primary-high);
} }
.select-kit-header { .select-kit-header {
@ -130,7 +130,7 @@
.select-kit-body { .select-kit-body {
display: none; display: none;
background: $secondary; background: var(--secondary);
box-sizing: border-box; box-sizing: border-box;
} }
@ -157,20 +157,20 @@
} }
&.is-highlighted { &.is-highlighted {
background: $tertiary-low; background: var(--tertiary-low);
} }
&.is-selected { &.is-selected {
background: $highlight-medium; background: var(--highlight-medium);
} }
&.is-selected.is-highlighted { &.is-selected.is-highlighted {
background: $tertiary-low; background: var(--tertiary-low);
} }
.discourse-tag, .discourse-tag,
.discourse-tag-count { .discourse-tag-count {
color: $primary; color: var(--primary);
} }
&.create-color-row { &.create-color-row {
@ -180,7 +180,7 @@
} }
.select-kit-collection { .select-kit-collection {
background: $secondary; background: var(--secondary);
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
border-radius: inherit; border-radius: inherit;
@ -192,7 +192,7 @@
.validation-message { .validation-message {
white-space: nowrap; white-space: nowrap;
color: $danger; color: var(--danger);
flex: 1 0 auto; flex: 1 0 auto;
margin: 5px; margin: 5px;
padding: 0 2px; padding: 0 2px;
@ -203,7 +203,7 @@
margin: 0; margin: 0;
&:hover .select-kit-row.is-highlighted:hover { &:hover .select-kit-row.is-highlighted:hover {
background: $tertiary-low; background: var(--tertiary-low);
} }
} }
@ -215,7 +215,7 @@
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
cursor: pointer; cursor: pointer;
border-radius: 5px; border-radius: 5px;
background: $primary-med-or-secondary-med; background: var(--primary-med-or-secondary-med);
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
@ -267,7 +267,7 @@
} }
.select-kit-errors-collection { .select-kit-errors-collection {
background: $danger; background: var(--danger);
padding: 0.25em 1em; padding: 0.25em 1em;
margin: 0; margin: 0;
width: 100%; width: 100%;
@ -275,7 +275,7 @@
.select-kit-error { .select-kit-error {
list-style: none; list-style: none;
color: $secondary; color: var(--secondary);
} }
} }
@ -286,7 +286,7 @@
padding: 0.5em; padding: 0.5em;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
background: $secondary; background: var(--secondary);
} }
.is-loading { .is-loading {

6
app/assets/stylesheets/common/select-kit/single-select.scss
View File

@ -4,14 +4,14 @@
&.is-expanded { &.is-expanded {
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
border-top: 1px solid $primary-low; border-top: 1px solid var(--primary-low);
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
} }
} }
&.is-expanded { &.is-expanded {
.select-kit-header { .select-kit-header {
border: 1px solid $tertiary; border-color: var(--tertiary);
} }
} }
} }

2
app/assets/stylesheets/common/select-kit/tag-drop.scss
View File

@ -6,7 +6,7 @@
.select-kit-row { .select-kit-row {
&[data-value="all-tags"], &[data-value="all-tags"],
&[data-value="no-tags"] { &[data-value="no-tags"] {
color: $tertiary; color: var(--tertiary);
font-weight: 700; font-weight: 700;
} }
} }

8
app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss
View File

@ -9,7 +9,7 @@
.select-kit-row { .select-kit-row {
padding: 0.75em 0.5em; padding: 0.75em 0.5em;
border-bottom: 1px solid rgba($primary-low, 0.5); border-bottom: 1px solid rgba(var(--primary-low-rgb), 0.5);
&:last-child { &:last-child {
border: none; border: none;
@ -22,14 +22,14 @@
} }
.d-icon { .d-icon {
color: $primary-medium; color: var(--primary-medium);
} }
&.is-highlighted, &.is-highlighted,
&.is-selected, &.is-selected,
&:hover { &:hover {
background: $tertiary-low; background: var(--tertiary-low);
color: $primary; color: var(--primary);
} }
} }
} }

4
app/assets/stylesheets/common/select-kit/user-row.scss
View File

@ -6,12 +6,12 @@
} }
.username { .username {
color: $primary; color: var(--primary);
white-space: nowrap; white-space: nowrap;
} }
.name { .name {
color: $primary-high; color: var(--primary-high);
font-size: $font-down-1; font-size: $font-down-1;
margin-left: 0.5em; margin-left: 0.5em;
overflow: hidden; overflow: hidden;

4
app/assets/stylesheets/common/topic-entrance.scss
View File

@ -1,7 +1,7 @@
#topic-entrance { #topic-entrance {
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
padding: 5px; padding: 5px;
background: $secondary; background: var(--secondary);
box-shadow: shadow("card"); box-shadow: shadow("card");
z-index: z("dropdown"); z-index: z("dropdown");

Some files were not shown because too many files have changed in this diff Show More