FEATURE: automatic dark mode (#10341)
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
GitHub
parent
041cd15667
commit
c937afc75e
|
|
@ -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};
|
||||
}
|
||||
|
|
@ -59,8 +59,8 @@ $mobile-breakpoint: 700px;
|
|||
height: 100%;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba($secondary, 1) 0%,
|
||||
rgba($secondary, 0) 100%
|
||||
rgba(var(--secondary-rgb), 1) 0%,
|
||||
rgba(var(--secondary-rgb), 0) 100%
|
||||
);
|
||||
}
|
||||
&:after {
|
||||
|
|
@ -71,8 +71,8 @@ $mobile-breakpoint: 700px;
|
|||
height: 100%;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba($secondary, 0) 0%,
|
||||
rgba($secondary, 1) 100%
|
||||
rgba(var(--secondary-rgb), 0) 0%,
|
||||
rgba(var(--secondary-rgb), 1) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -100,10 +100,10 @@ $mobile-breakpoint: 700px;
|
|||
padding: 8px;
|
||||
}
|
||||
tr:hover {
|
||||
background-color: $primary-very-low;
|
||||
background-color: var(--primary-very-low);
|
||||
}
|
||||
tr.selected {
|
||||
background-color: $primary-low;
|
||||
background-color: var(--primary-low);
|
||||
}
|
||||
.filters input {
|
||||
margin-bottom: 0;
|
||||
|
|
@ -134,7 +134,7 @@ $mobile-breakpoint: 700px;
|
|||
}
|
||||
.label {
|
||||
display: block;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
font-size: $font-down-1;
|
||||
margin: 0.5em 0 0.15em 0;
|
||||
}
|
||||
|
|
@ -213,10 +213,10 @@ $mobile-breakpoint: 700px;
|
|||
}
|
||||
.site-text {
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
margin-bottom: 0.5em;
|
||||
&.overridden {
|
||||
background-color: $highlight-medium;
|
||||
background-color: var(--highlight-medium);
|
||||
}
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
|
|
@ -236,7 +236,7 @@ $mobile-breakpoint: 700px;
|
|||
@include breakpoint(mobile-extra-large) {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
.edit-site-text {
|
||||
|
|
@ -258,7 +258,7 @@ $mobile-breakpoint: 700px;
|
|||
}
|
||||
}
|
||||
p.warning {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -269,10 +269,10 @@ $mobile-breakpoint: 700px;
|
|||
font-size: $font-down-1;
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
background-color: $primary-low;
|
||||
background-color: var(--primary-low);
|
||||
padding: 2px 5px;
|
||||
border-radius: 5px;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -324,11 +324,11 @@ $mobile-breakpoint: 700px;
|
|||
display: inline-block;
|
||||
.bar {
|
||||
margin-top: 5px;
|
||||
background-color: $tertiary;
|
||||
background-color: var(--tertiary);
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -340,7 +340,7 @@ $mobile-breakpoint: 700px;
|
|||
|
||||
.admin-users .users-list {
|
||||
.username .d-icon {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -354,7 +354,7 @@ $mobile-breakpoint: 700px;
|
|||
z-index: z("dropdown");
|
||||
box-shadow: shadow("card");
|
||||
margin-top: -2px;
|
||||
background-color: $secondary;
|
||||
background-color: var(--secondary);
|
||||
padding: 12px 12px 5px;
|
||||
.powered-by {
|
||||
font-size: $font-down-1;
|
||||
|
|
@ -438,14 +438,14 @@ $mobile-breakpoint: 700px;
|
|||
|
||||
.admin-controls {
|
||||
display: flex;
|
||||
background-color: $primary-low;
|
||||
background-color: var(--primary-low);
|
||||
align-items: center;
|
||||
|
||||
.admin-actions {
|
||||
margin-left: auto;
|
||||
}
|
||||
nav {
|
||||
background-color: $primary-low;
|
||||
background-color: var(--primary-low);
|
||||
width: 100%;
|
||||
}
|
||||
nav {
|
||||
|
|
@ -472,8 +472,8 @@ $mobile-breakpoint: 700px;
|
|||
height: calc(100% - 5px);
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba($primary-low, 1) 0%,
|
||||
rgba($primary-low, 0) 100%
|
||||
rgba(var(--primary-low-rgb), 1) 0%,
|
||||
rgba(var(--primary-low-rgb), 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -485,8 +485,8 @@ $mobile-breakpoint: 700px;
|
|||
height: calc(100% - 5px);
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba($primary-low, 0) 0%,
|
||||
rgba($primary-low, 1) 100%
|
||||
rgba(var(--primary-low-rgb), 0) 0%,
|
||||
rgba(var(--primary-low-rgb), 1) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -510,7 +510,7 @@ $mobile-breakpoint: 700px;
|
|||
> li {
|
||||
margin: 0;
|
||||
a.active {
|
||||
background: $primary-medium;
|
||||
background: var(--primary-medium);
|
||||
}
|
||||
&:last-of-type {
|
||||
> a {
|
||||
|
|
@ -522,10 +522,10 @@ $mobile-breakpoint: 700px;
|
|||
h1 {
|
||||
font-size: $font-up-3;
|
||||
line-height: $line-height-medium;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
.controls {
|
||||
background: $primary-low;
|
||||
background: var(--primary-low);
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
|
|
@ -561,12 +561,12 @@ $mobile-breakpoint: 700px;
|
|||
float: left;
|
||||
padding: 5px 10px;
|
||||
margin-right: 15px;
|
||||
border: 1px solid $primary-medium;
|
||||
border: 1px solid var(--primary-medium);
|
||||
border-radius: 3px;
|
||||
background: transparent;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
&:hover {
|
||||
background-color: $primary-low-mid;
|
||||
background-color: var(--primary-low-mid);
|
||||
}
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
display: inline-block;
|
||||
|
|
@ -646,15 +646,15 @@ $mobile-breakpoint: 700px;
|
|||
}
|
||||
|
||||
.text-successful {
|
||||
color: $success;
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
.admin-nav {
|
||||
|
|
@ -677,10 +677,12 @@ $mobile-breakpoint: 700px;
|
|||
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;
|
||||
margin-left: 0;
|
||||
border-left: solid 1px $primary-low;
|
||||
border-left: solid 1px var(--primary-low);
|
||||
padding: 30px 0 30px 30px;
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 30px 0;
|
||||
|
|
@ -711,10 +713,10 @@ $mobile-breakpoint: 700px;
|
|||
section.details {
|
||||
h1 {
|
||||
font-size: $font-up-3;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
padding: 5px 10px;
|
||||
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 {
|
||||
.d-icon-check {
|
||||
color: $success;
|
||||
color: var(--success);
|
||||
}
|
||||
.d-icon-times {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -844,12 +846,12 @@ table#user-badges {
|
|||
|
||||
@mixin value-btn {
|
||||
width: 29px;
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
outline: none;
|
||||
padding: 0;
|
||||
|
||||
&:focus {
|
||||
border-color: $tertiary;
|
||||
border-color: var(--tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -866,12 +868,12 @@ table#user-badges {
|
|||
.value-input {
|
||||
box-sizing: border-box;
|
||||
flex: 1 0 0px;
|
||||
border-color: $primary-low;
|
||||
border-color: var(--primary-low);
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
|
||||
&:focus {
|
||||
border-color: $tertiary;
|
||||
border-color: var(--tertiary);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -968,7 +970,7 @@ table#user-badges {
|
|||
}
|
||||
|
||||
a.inline-editable-field {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
margin-bottom: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
|
@ -30,16 +30,16 @@
|
|||
font-weight: 700;
|
||||
|
||||
.report-url {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.info {
|
||||
cursor: pointer;
|
||||
margin-left: 0.25em;
|
||||
color: $primary-low-mid;
|
||||
color: var(--primary-low-mid);
|
||||
|
||||
&:hover {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -51,16 +51,16 @@
|
|||
|
||||
&.trending-down,
|
||||
&.high-trending-down {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
&.trending-up,
|
||||
&.high-trending-up {
|
||||
color: $success;
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
&.no-change {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
.d-icon {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
border: 1px solid transparent;
|
||||
|
||||
a {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
.d-icon {
|
||||
|
|
@ -103,19 +103,19 @@
|
|||
|
||||
&.no-data,
|
||||
&.rate-limited {
|
||||
background: $secondary;
|
||||
border-color: $primary-low;
|
||||
color: $primary-low-mid;
|
||||
background: var(--secondary);
|
||||
border-color: var(--primary-low);
|
||||
color: var(--primary-low-mid);
|
||||
}
|
||||
|
||||
&.rate-limited .d-icon {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
&.timeout,
|
||||
&.exception {
|
||||
border-color: $danger-low;
|
||||
color: $danger;
|
||||
border-color: var(--danger-low);
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -135,7 +135,7 @@
|
|||
flex: 1 0 0px;
|
||||
|
||||
.mode-btn.is-current {
|
||||
color: $tertiary;
|
||||
color: var(--tertiary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -147,8 +147,8 @@
|
|||
margin-bottom: 1em;
|
||||
|
||||
.chart-grouping.active {
|
||||
background: $tertiary;
|
||||
color: $secondary;
|
||||
background: var(--tertiary);
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
@include ellipsis;
|
||||
|
||||
.d-icon {
|
||||
color: $primary-low-mid;
|
||||
color: var(--primary-low-mid);
|
||||
min-width: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -33,20 +33,20 @@
|
|||
}
|
||||
|
||||
.d-icon-minus {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
font-size: $font-down-3;
|
||||
}
|
||||
|
||||
&.high-trending-up,
|
||||
&.trending-up {
|
||||
.d-icon {
|
||||
color: $success;
|
||||
color: var(--success);
|
||||
}
|
||||
}
|
||||
&.high-trending-down,
|
||||
&.trending-down {
|
||||
.d-icon {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
.table {
|
||||
margin: 0;
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
table-layout: fixed;
|
||||
|
||||
tbody {
|
||||
|
|
@ -35,12 +35,12 @@
|
|||
|
||||
&.is-current-sort {
|
||||
.d-icon {
|
||||
color: $tertiary;
|
||||
color: var(--tertiary);
|
||||
}
|
||||
|
||||
.sort-btn:hover {
|
||||
color: $primary-medium;
|
||||
background: $primary-low;
|
||||
color: var(--primary-medium);
|
||||
background: var(--primary-low);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -48,10 +48,10 @@
|
|||
background: none;
|
||||
|
||||
&:hover {
|
||||
color: $primary-medium;
|
||||
background: $primary-low;
|
||||
color: var(--primary-medium);
|
||||
background: var(--primary-low);
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
}
|
||||
|
||||
.total-row {
|
||||
background: $primary-very-low;
|
||||
background: var(--primary-very-low);
|
||||
|
||||
td {
|
||||
font-weight: 700;
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
margin-left: 0.5em;
|
||||
|
||||
&.is-current {
|
||||
color: $tertiary;
|
||||
color: var(--tertiary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
.report-header {
|
||||
padding-bottom: 0.5em;
|
||||
margin-bottom: 1em;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ table.api-keys {
|
|||
}
|
||||
|
||||
tr.revoked {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
@include breakpoint(tablet) {
|
||||
|
|
@ -160,12 +160,12 @@ table.api-keys {
|
|||
|
||||
> p {
|
||||
padding-bottom: 10px;
|
||||
border-bottom: $primary-low 1px solid;
|
||||
border-bottom: var(--primary-low) 1px solid;
|
||||
}
|
||||
.filters {
|
||||
margin: 5px 0;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: $primary-low 1px solid;
|
||||
border-bottom: var(--primary-low) 1px solid;
|
||||
.filter {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@ $rollback: #3d9970;
|
|||
$rollback-dark: darken($rollback, 10%) !default;
|
||||
$rollback-darker: darken($rollback, 20%) !default;
|
||||
.btn-rollback {
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
background: $rollback;
|
||||
.d-icon {
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
}
|
||||
&:hover {
|
||||
background: $rollback-dark;
|
||||
|
|
|
|||
|
|
@ -23,8 +23,8 @@
|
|||
}
|
||||
.badges-header {
|
||||
padding: 10px 0;
|
||||
border-top: 1px solid $primary-low;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-top: 1px solid var(--primary-low);
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
.badges-heading {
|
||||
margin: 0;
|
||||
padding: 0 10px;
|
||||
|
|
@ -34,9 +34,9 @@
|
|||
.admin-badge-list {
|
||||
height: 70vh;
|
||||
overflow-y: scroll;
|
||||
border-right: 1px solid $primary-low;
|
||||
border-left: 1px solid $primary-low;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-right: 1px solid var(--primary-low);
|
||||
border-left: 1px solid var(--primary-low);
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
.admin-badge-list-item {
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
|
|
@ -50,8 +50,8 @@
|
|||
font-size: $font-down-1;
|
||||
font-weight: normal;
|
||||
padding: 0 6px;
|
||||
color: $secondary;
|
||||
background-color: $tertiary-medium;
|
||||
color: var(--secondary);
|
||||
background-color: var(--tertiary-medium);
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
p.help {
|
||||
margin: 0;
|
||||
margin-top: 5px;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
font-size: $font-down-1;
|
||||
}
|
||||
.badge-grouping-control {
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
.current-badge-actions {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border-top: 1px solid $primary-low;
|
||||
border-top: 1px solid var(--primary-low);
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
|
|
@ -132,8 +132,8 @@
|
|||
max-width: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: $primary-very-low;
|
||||
border: 1px solid $primary-low;
|
||||
background-color: var(--primary-very-low);
|
||||
border: 1px solid var(--primary-low);
|
||||
padding: 0 10px 0 10px;
|
||||
|
||||
img,
|
||||
|
|
@ -160,7 +160,7 @@
|
|||
list-style: none;
|
||||
margin: 0;
|
||||
.badge-grouping-item {
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
@ -179,17 +179,17 @@
|
|||
.badge-errors,
|
||||
.badge-query-plan {
|
||||
padding: 5px;
|
||||
background-color: $primary-low;
|
||||
background-color: var(--primary-low);
|
||||
}
|
||||
.count-warning {
|
||||
background-color: $danger-low;
|
||||
background-color: var(--danger-low);
|
||||
margin-bottom: 5px;
|
||||
padding: 10px;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
.heading {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@
|
|||
}
|
||||
|
||||
.install-theme-item {
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
border-bottom: none;
|
||||
position: relative;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
}
|
||||
|
||||
input,
|
||||
|
|
@ -29,11 +29,11 @@
|
|||
}
|
||||
|
||||
input:checked + label {
|
||||
color: $secondary;
|
||||
background-color: $tertiary;
|
||||
color: var(--secondary);
|
||||
background-color: var(--tertiary);
|
||||
+ .d-icon {
|
||||
display: block;
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
}
|
||||
|
||||
.popular-theme-item {
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
padding: 8px 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -72,16 +72,16 @@
|
|||
.popular-theme-type {
|
||||
font-weight: normal;
|
||||
font-size: $font-down-2;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary-very-high;
|
||||
color: var(--primary-very-high);
|
||||
font-weight: bold;
|
||||
&:hover,
|
||||
&:visited,
|
||||
&:active {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -94,7 +94,7 @@
|
|||
> span {
|
||||
font-style: italic;
|
||||
font-size: $font-down-1;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
width: 54.054%;
|
||||
margin-left: 1.8018%;
|
||||
p.description {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
.controls {
|
||||
margin-top: 10px;
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
}
|
||||
|
||||
.error {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -66,11 +66,11 @@
|
|||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
.fa {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
.raw-error {
|
||||
background-color: $primary-very-low;
|
||||
background-color: var(--primary-very-low);
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
.field-error {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
background-color: $quaternary-low;
|
||||
background-color: var(--quaternary-low);
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
.color-schemes li {
|
||||
.d-icon {
|
||||
margin-right: 0.25em;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
.show-current-style {
|
||||
|
|
@ -183,9 +183,9 @@
|
|||
|
||||
.themes-list-header {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-top: 1px solid $primary-low;
|
||||
border-right: 1px solid $primary-low;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
border-top: 1px solid var(--primary-low);
|
||||
border-right: 1px solid var(--primary-low);
|
||||
display: flex;
|
||||
|
||||
.tab {
|
||||
|
|
@ -199,7 +199,7 @@
|
|||
}
|
||||
|
||||
&: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) {
|
||||
max-height: 40vh;
|
||||
}
|
||||
border-right: 1px solid $primary-low;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-right: 1px solid var(--primary-low);
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
width: 100%;
|
||||
|
||||
.themes-list-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.themes-list-item {
|
||||
color: $primary;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
color: var(--primary);
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
display: flex;
|
||||
border-left: 1px solid $primary-low;
|
||||
border-left: 1px solid var(--primary-low);
|
||||
|
||||
&.inactive-indicator {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
font-weight: bold;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
|
||||
span.empty {
|
||||
padding-left: 5px;
|
||||
|
|
@ -239,17 +239,17 @@
|
|||
}
|
||||
}
|
||||
&:not(.inactive-indicator):not(.selected):hover {
|
||||
background-color: $primary-very-low;
|
||||
background-color: var(--primary-very-low);
|
||||
.component {
|
||||
border-color: $primary-low-mid;
|
||||
border-color: var(--primary-low-mid);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: $secondary;
|
||||
background-color: $tertiary;
|
||||
color: var(--secondary);
|
||||
background-color: var(--tertiary);
|
||||
.components-list {
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
}
|
||||
.fa {
|
||||
color: inherit;
|
||||
|
|
@ -257,18 +257,18 @@
|
|||
}
|
||||
&:not(.selected) {
|
||||
.broken-indicator {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
.fa {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.default-indicator {
|
||||
color: $success;
|
||||
color: var(--success);
|
||||
}
|
||||
}
|
||||
|
||||
.light-grey-icon {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
.info {
|
||||
|
|
@ -287,11 +287,11 @@
|
|||
display: inline-block;
|
||||
font-size: $font-down-1;
|
||||
align-items: baseline;
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
|
||||
.others-count,
|
||||
.others-count:hover {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
@ -367,8 +367,8 @@
|
|||
}
|
||||
|
||||
.edit-main-nav .nav-pills > li a.active {
|
||||
background-color: $quaternary;
|
||||
color: $secondary;
|
||||
background-color: var(--quaternary);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.edit-main-nav ul {
|
||||
|
|
@ -398,12 +398,12 @@
|
|||
}
|
||||
|
||||
a.active {
|
||||
background: $primary-medium;
|
||||
color: $secondary;
|
||||
background: var(--primary-medium);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
a.blank:not(.active) {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
@ -462,7 +462,7 @@
|
|||
padding: 5px 0 0 0;
|
||||
margin-left: 10px;
|
||||
width: 80px;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -500,7 +500,7 @@
|
|||
}
|
||||
.description {
|
||||
margin: 0.15em 0 0;
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
font-size: $font-down-1;
|
||||
line-height: $line-height-medium;
|
||||
}
|
||||
|
|
@ -508,7 +508,7 @@
|
|||
.invalid .hex input {
|
||||
background-color: white;
|
||||
color: black;
|
||||
border-color: $danger;
|
||||
border-color: var(--danger);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -524,7 +524,7 @@
|
|||
li {
|
||||
&.disabled-child {
|
||||
.child-link {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -551,7 +551,7 @@
|
|||
display: block;
|
||||
margin-bottom: 0.25em;
|
||||
+ label {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
label {
|
||||
|
|
@ -638,7 +638,7 @@
|
|||
}
|
||||
|
||||
.permalink-description {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
// embedding
|
||||
|
|
@ -666,7 +666,7 @@
|
|||
div.label {
|
||||
display: block;
|
||||
font-size: $font-down-1;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
td.controls,
|
||||
td.editing-controls {
|
||||
|
|
@ -718,7 +718,7 @@
|
|||
margin: 0.75em 0;
|
||||
}
|
||||
p.description {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
margin-bottom: 1em;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
|
@ -735,7 +735,7 @@
|
|||
.user-field {
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
.form-display {
|
||||
width: 25%;
|
||||
display: inline-block;
|
||||
|
|
@ -793,7 +793,7 @@
|
|||
|
||||
.robots-txt-edit {
|
||||
div.overridden {
|
||||
background: $highlight-medium;
|
||||
background: var(--highlight-medium);
|
||||
padding: 7px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,12 +15,12 @@
|
|||
.navigation {
|
||||
display: flex;
|
||||
margin: 0 0 2.5em 0;
|
||||
border-bottom: 1px solid $primary-low-mid;
|
||||
border-bottom: 1px solid var(--primary-low-mid);
|
||||
|
||||
.navigation-item {
|
||||
display: inline;
|
||||
&:hover {
|
||||
background: $primary-very-low;
|
||||
background: var(--primary-very-low);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
|
||||
@mixin active-navigation-item {
|
||||
.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;
|
||||
|
||||
a {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -115,7 +115,7 @@
|
|||
}
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
margin-bottom: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
|
@ -167,7 +167,7 @@
|
|||
|
||||
.misc {
|
||||
display: flex;
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
|
||||
.storage-stats,
|
||||
.last-dashboard-update {
|
||||
|
|
@ -181,7 +181,7 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
border-right: 1px solid $primary-low;
|
||||
border-right: 1px solid var(--primary-low);
|
||||
|
||||
.backups,
|
||||
.uploads {
|
||||
|
|
@ -204,7 +204,7 @@
|
|||
display: block;
|
||||
margin: 0 20px 20px 20px;
|
||||
padding: 20px 0 0 0;
|
||||
border-top: 1px solid $primary-low;
|
||||
border-top: 1px solid var(--primary-low);
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -250,14 +250,14 @@
|
|||
margin-bottom: 2.5em;
|
||||
|
||||
.d-icon-exclamation-triangle {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin: 1em 0 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
.btn {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
|
@ -274,7 +274,7 @@
|
|||
display: grid;
|
||||
flex: 1 0 auto;
|
||||
grid-template-columns: 33% repeat(auto-fit, minmax(20px, 1fr));
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
border-bottom: 0;
|
||||
font-weight: 700;
|
||||
text-align: right;
|
||||
|
|
@ -283,10 +283,10 @@
|
|||
}
|
||||
|
||||
.admin-report .main {
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
|
||||
&:hover {
|
||||
background-color: $primary-very-low;
|
||||
background-color: var(--primary-very-low);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -306,7 +306,7 @@
|
|||
padding: 0.5em 0.25em;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
|
||||
.title {
|
||||
font-size: $font-0;
|
||||
|
|
@ -329,13 +329,13 @@
|
|||
border: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: $primary-very-low;
|
||||
background-color: var(--primary-very-low);
|
||||
}
|
||||
|
||||
.d-icon {
|
||||
font-size: $font-up-1;
|
||||
margin: 0 0.25em 0 0;
|
||||
color: $primary-low-mid;
|
||||
color: var(--primary-low-mid);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -365,7 +365,7 @@
|
|||
.label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
justify-content: center;
|
||||
border-radius: 9px 0 0 9px;
|
||||
padding: 0 5px 0 8px;
|
||||
|
|
@ -377,33 +377,33 @@
|
|||
}
|
||||
|
||||
.value {
|
||||
background: $secondary;
|
||||
background: var(--secondary);
|
||||
border-radius: 0 9px 9px 0;
|
||||
padding: 0 8px 0 5px;
|
||||
}
|
||||
|
||||
&.user-newuser {
|
||||
.label {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
}
|
||||
&.user-basic,
|
||||
&.user-member {
|
||||
background: $bronze;
|
||||
background: var(--bronze);
|
||||
.label {
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
&.user-regular {
|
||||
background: $silver;
|
||||
background: var(--silver);
|
||||
.label {
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
&.user-leader {
|
||||
background: $gold;
|
||||
background: var(--gold);
|
||||
.label {
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -495,7 +495,7 @@
|
|||
}
|
||||
.report {
|
||||
margin: 1.5%;
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
flex: 1 1 28%;
|
||||
transition: box-shadow 0.25s;
|
||||
min-width: 225px;
|
||||
|
|
@ -507,7 +507,7 @@
|
|||
box-sizing: border-box;
|
||||
padding: 1em;
|
||||
.report-description {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
|
|
@ -521,7 +521,7 @@
|
|||
flex-wrap: wrap;
|
||||
.section-title {
|
||||
flex: 1 1 100%;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
|
@ -597,13 +597,13 @@
|
|||
font-size: $font-up-4;
|
||||
}
|
||||
.up-to-date {
|
||||
color: $success;
|
||||
color: var(--success);
|
||||
}
|
||||
.updates-available {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
.critical-updates-available {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
.reply-key {
|
||||
display: block;
|
||||
font-size: $font-down-1;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
.username div {
|
||||
max-width: 180px;
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
margin: 5px 10px;
|
||||
}
|
||||
.error-description {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
font-size: $font-down-1;
|
||||
}
|
||||
hr {
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
|
||||
.admin-list-item {
|
||||
width: 100%;
|
||||
border-top: 1px solid $primary-low;
|
||||
border-top: 1px solid var(--primary-low);
|
||||
padding: 0.25em 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -41,5 +41,5 @@
|
|||
}
|
||||
|
||||
.admin-plugins-official-badge {
|
||||
color: $success;
|
||||
color: var(--success);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
.uploaded-image-preview {
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-color: $primary-medium;
|
||||
background-color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
.setting-controls {
|
||||
|
|
@ -64,8 +64,8 @@
|
|||
width: 100%;
|
||||
}
|
||||
padding: 1px;
|
||||
background-color: $secondary;
|
||||
border: 1px solid $primary-low;
|
||||
background-color: var(--secondary);
|
||||
border: 1px solid var(--primary-low);
|
||||
border-radius: 3px;
|
||||
transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
li.sortable-placeholder {
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
position: relative;
|
||||
line-height: $line-height-small;
|
||||
cursor: default;
|
||||
border: 1px dashed $primary-low-mid;
|
||||
border: 1px dashed var(--primary-low-mid);
|
||||
border-radius: 3px;
|
||||
background-clip: padding-box;
|
||||
-moz-user-select: none;
|
||||
|
|
@ -90,10 +90,10 @@
|
|||
line-height: $line-height-large;
|
||||
}
|
||||
.validation-error {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
.desc {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
h3 {
|
||||
font-size: $font-0;
|
||||
|
|
@ -111,17 +111,17 @@
|
|||
}
|
||||
.setting.overridden {
|
||||
h3 {
|
||||
color: $highlight-high;
|
||||
color: var(--highlight-high);
|
||||
}
|
||||
}
|
||||
.setting.overridden.string {
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
textarea {
|
||||
background-color: $highlight-medium;
|
||||
background-color: var(--highlight-medium);
|
||||
}
|
||||
}
|
||||
.warning {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
// Styles for /admin/logs
|
||||
|
||||
.web-hook-events {
|
||||
border-bottom: dotted 1px $primary-low-mid;
|
||||
border-bottom: dotted 1px var(--primary-low-mid);
|
||||
.heading-container {
|
||||
width: 100%;
|
||||
background-color: $primary-low;
|
||||
background-color: var(--primary-low);
|
||||
}
|
||||
.col.heading {
|
||||
font-weight: bold;
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
.ember-list-item-view {
|
||||
width: 100%;
|
||||
border-top: solid 1px $primary-low;
|
||||
border-top: solid 1px var(--primary-low);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -155,12 +155,12 @@
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.25em;
|
||||
background-color: $primary-low;
|
||||
background-color: var(--primary-low);
|
||||
padding: 3px 10px;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
&:hover {
|
||||
color: $primary;
|
||||
background-color: $primary-low;
|
||||
color: var(--primary);
|
||||
background-color: var(--primary-low);
|
||||
}
|
||||
.label {
|
||||
font-weight: bold;
|
||||
|
|
@ -239,10 +239,10 @@ table.screened-ip-addresses {
|
|||
display: flex;
|
||||
align-items: baseline;
|
||||
.d-icon-check {
|
||||
color: $success;
|
||||
color: var(--success);
|
||||
}
|
||||
.d-icon-ban {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
.d-icon {
|
||||
margin-right: 0.25em;
|
||||
|
|
@ -363,10 +363,10 @@ table.screened-ip-addresses {
|
|||
cursor: pointer;
|
||||
.d-icon {
|
||||
margin-right: 0.25em;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
&:hover .d-icon {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,9 +18,9 @@
|
|||
border-top: 0;
|
||||
}
|
||||
&.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,
|
||||
&:after {
|
||||
display: table;
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
}
|
||||
.users-list {
|
||||
.username .d-icon {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@
|
|||
clear: both;
|
||||
margin-bottom: 5px;
|
||||
.combo-box .combo-box-header {
|
||||
background: $secondary;
|
||||
color: $primary;
|
||||
border: 1px solid $primary-medium;
|
||||
background: var(--secondary);
|
||||
color: var(--primary);
|
||||
border: 1px solid var(--primary-medium);
|
||||
font-size: $font-0;
|
||||
transition: none;
|
||||
}
|
||||
|
|
@ -50,13 +50,13 @@
|
|||
.latest-topic-list-item.visited,
|
||||
.category-topic-link.visited {
|
||||
a.title:not(.badge-notification) {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
span.badge-category {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
a.discourse-tag {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -73,17 +73,17 @@
|
|||
a.title {
|
||||
padding: 15px 0;
|
||||
word-break: break-word;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.anon & {
|
||||
a.title:visited:not(.badge-notification) {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
a.title.visited:not(.badge-notification) {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -110,15 +110,15 @@
|
|||
border: none;
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid $danger-medium;
|
||||
border-bottom: 1px solid var(--danger-medium);
|
||||
line-height: 0.1em;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
td span {
|
||||
background-color: $secondary;
|
||||
color: $danger-medium;
|
||||
background-color: var(--secondary);
|
||||
color: var(--danger-medium);
|
||||
padding: 0 8px;
|
||||
font-size: $font-down-1;
|
||||
}
|
||||
|
|
@ -132,11 +132,11 @@
|
|||
}
|
||||
th {
|
||||
button .d-icon {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
td {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
font-size: $font-0;
|
||||
}
|
||||
|
||||
|
|
@ -184,7 +184,7 @@
|
|||
.topic-excerpt {
|
||||
font-size: $font-down-1;
|
||||
margin-top: 5px;
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
word-wrap: break-word;
|
||||
line-height: $line-height-large;
|
||||
padding-right: 20px;
|
||||
|
|
@ -250,7 +250,7 @@
|
|||
background-color: transparent;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: $danger-medium;
|
||||
color: var(--danger-medium);
|
||||
font-size: $font-0;
|
||||
cursor: default;
|
||||
}
|
||||
|
|
@ -302,7 +302,7 @@ ol.category-breadcrumb {
|
|||
}
|
||||
|
||||
div.education {
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
.badge-notification.new-posts {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
|
@ -310,12 +310,12 @@ div.education {
|
|||
|
||||
.list-cell {
|
||||
padding: 12px 5px;
|
||||
color: $primary-med-or-secondary-high;
|
||||
color: var(--primary-med-or-secondary-high);
|
||||
}
|
||||
|
||||
.table-heading {
|
||||
@extend .list-cell;
|
||||
border-bottom: 3px solid $primary-low;
|
||||
border-bottom: 3px solid var(--primary-low);
|
||||
}
|
||||
|
||||
// This is not what we want:
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
#simple-container {
|
||||
border-radius: 10px;
|
||||
background-color: $secondary;
|
||||
background-color: var(--secondary);
|
||||
padding: 20px;
|
||||
width: 550px;
|
||||
margin: 0 auto;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.alert {
|
||||
padding: 0.5em 2.5em 0.5em 1em;
|
||||
background-color: $danger-low;
|
||||
color: $primary;
|
||||
background-color: var(--danger-low);
|
||||
color: var(--primary);
|
||||
position: relative;
|
||||
margin-bottom: 1em;
|
||||
|
||||
|
|
@ -11,23 +11,23 @@
|
|||
top: 0.265em;
|
||||
right: 0.66em;
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
&.alert-success {
|
||||
background-color: $success-low;
|
||||
color: $primary;
|
||||
background-color: var(--success-low);
|
||||
color: var(--primary);
|
||||
}
|
||||
&.alert-error {
|
||||
background-color: $danger-low;
|
||||
color: $primary;
|
||||
background-color: var(--danger-low);
|
||||
color: var(--primary);
|
||||
}
|
||||
&.alert-info {
|
||||
background-color: $tertiary-low;
|
||||
color: $primary;
|
||||
background-color: var(--tertiary-low);
|
||||
color: var(--primary);
|
||||
&.clickable {
|
||||
color: $tertiary;
|
||||
color: var(--tertiary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
border-width: 0;
|
||||
border-left-width: 6px;
|
||||
border-style: solid;
|
||||
border-color: $primary-low;
|
||||
border-color: var(--primary-low);
|
||||
|
||||
.mobile-view & {
|
||||
width: 100%;
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
border-left-width: 0;
|
||||
|
||||
border-style: solid;
|
||||
border-color: $primary-low;
|
||||
border-color: var(--primary-low);
|
||||
}
|
||||
|
||||
&.no-logos {
|
||||
|
|
@ -123,7 +123,7 @@
|
|||
margin-bottom: 1em;
|
||||
text-align: center;
|
||||
font-size: $font-0;
|
||||
color: $primary-med-or-secondary-high;
|
||||
color: var(--primary-med-or-secondary-high);
|
||||
position: relative;
|
||||
@include line-clamp(4);
|
||||
|
||||
|
|
@ -144,12 +144,12 @@
|
|||
margin-top: 0.25em;
|
||||
line-height: $line-height-medium;
|
||||
text-align: center;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
h4 a {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.subcategory.with-subcategories {
|
||||
|
|
@ -186,7 +186,7 @@
|
|||
}
|
||||
|
||||
.subcategory-box-inner {
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
border-left: none;
|
||||
padding: 0.5em 0.5em 0.4em 0.5em;
|
||||
}
|
||||
|
|
@ -248,14 +248,14 @@
|
|||
padding: 1em 1em 0.5em 1em;
|
||||
a[href] {
|
||||
width: 100%;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.featured-topics {
|
||||
padding: 0.5em 1em 1em 1em;
|
||||
ul {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -281,7 +281,7 @@
|
|||
h4 {
|
||||
margin-bottom: 0;
|
||||
.d-icon {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
height: 0.76em;
|
||||
width: 0.76em;
|
||||
vertical-align: baseline;
|
||||
|
|
@ -291,7 +291,7 @@
|
|||
.category-description {
|
||||
margin-top: 0.5em;
|
||||
overflow: hidden;
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
.category-logo.aspect-image {
|
||||
margin-top: 0.5em;
|
||||
|
|
@ -308,7 +308,7 @@
|
|||
.category-list.subcategories-with-subcategories {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0;
|
||||
border-top: 1px solid $primary-low;
|
||||
border-top: 1px solid var(--primary-low);
|
||||
.category-description {
|
||||
font-size: $font-down-1;
|
||||
}
|
||||
|
|
@ -320,7 +320,7 @@
|
|||
.category-list .category.muted {
|
||||
> h3 a.category-title-link,
|
||||
> h4 a.category-title-link {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
font-size: $font-down-1;
|
||||
}
|
||||
> .category-description,
|
||||
|
|
@ -346,7 +346,7 @@
|
|||
}
|
||||
|
||||
.muted-categories-link {
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.75em;
|
||||
|
|
@ -355,13 +355,13 @@
|
|||
margin: 0 0 1em -3px;
|
||||
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.muted-categories-heading {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,12 +7,12 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
|
|||
.hljs {
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
color: $primary-very-high;
|
||||
color: var(--primary-very-high);
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-doctag {
|
||||
color: $hljs-comment;
|
||||
color: var(--hljs-comment);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
|
@ -22,26 +22,26 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
|
|||
.hljs-subst,
|
||||
.hljs-request,
|
||||
.hljs-status {
|
||||
color: $primary-very-high;
|
||||
color: var(--primary-very-high);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-number,
|
||||
.ruby .hljs-constant {
|
||||
color: $hljs-number;
|
||||
color: var(--hljs-number);
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-tag .hljs-string,
|
||||
.tex .hljs-formula {
|
||||
color: $hljs-string;
|
||||
color: var(--hljs-string);
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-name,
|
||||
.coffeescript .hljs-params,
|
||||
.scss .hljs-meta {
|
||||
color: $hljs-string;
|
||||
color: var(--hljs-string);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -56,14 +56,14 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
|
|||
.haskell .hljs-type,
|
||||
.vhdl .hljs-literal,
|
||||
.tex .hljs-command {
|
||||
color: $hljs-literal;
|
||||
color: var(--hljs-literal);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-tag,
|
||||
.hljs-tag .hljs-title,
|
||||
.django .hljs-tag .hljs-keyword {
|
||||
color: $hljs-tag;
|
||||
color: var(--hljs-tag);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
|
@ -71,11 +71,11 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
|
|||
.css .hljs-keyword,
|
||||
.hljs-variable,
|
||||
.lisp .hljs-body {
|
||||
color: $hljs-attribute;
|
||||
color: var(--hljs-attribute);
|
||||
}
|
||||
|
||||
.hljs-regexp {
|
||||
color: $success;
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.hljs-symbol,
|
||||
|
|
@ -83,31 +83,31 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
|
|||
.lisp .hljs-keyword,
|
||||
.tex .hljs-special,
|
||||
.hljs-prompt {
|
||||
color: $hljs-symbol;
|
||||
color: var(--hljs-symbol);
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.lisp .hljs-title,
|
||||
.clojure .hljs-built_in,
|
||||
.hljs-builtin-name {
|
||||
color: $tertiary-high;
|
||||
color: var(--tertiary-high);
|
||||
}
|
||||
|
||||
.meta {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
background: $danger-low;
|
||||
background: var(--danger-low);
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
background: $success-low;
|
||||
background: var(--success-low);
|
||||
}
|
||||
|
||||
.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,
|
||||
li > code,
|
||||
pre > code {
|
||||
color: $primary-very-high;
|
||||
background: $hljs-bg;
|
||||
color: var(--primary-very-high);
|
||||
background: var(--hljs-bg);
|
||||
}
|
||||
|
||||
// removed some unnecessary styles here
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
.colorpicker {
|
||||
position: relative;
|
||||
margin: 0 0.125em 0.25em;
|
||||
border: 1px solid $primary-medium;
|
||||
border: 1px solid var(--primary-medium);
|
||||
width: 1.25em;
|
||||
height: 1.2em;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
z-index: z("composer", "content");
|
||||
transition: height 250ms ease, background 250ms ease, transform 250ms ease,
|
||||
max-width 250ms ease, padding-bottom 250ms ease;
|
||||
background-color: $secondary;
|
||||
background-color: var(--secondary);
|
||||
box-shadow: shadow("composer");
|
||||
|
||||
.reply-area {
|
||||
|
|
@ -33,11 +33,11 @@
|
|||
padding-left: 10px;
|
||||
.spinner {
|
||||
margin-left: 5px;
|
||||
border-color: $secondary;
|
||||
border-color: var(--secondary);
|
||||
border-right-color: transparent;
|
||||
}
|
||||
.d-icon {
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -56,8 +56,8 @@
|
|||
&.saving {
|
||||
height: 40px !important;
|
||||
align-items: center;
|
||||
background: $tertiary;
|
||||
color: $secondary;
|
||||
background: var(--tertiary);
|
||||
color: var(--secondary);
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
.composer-controls {
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
display: none;
|
||||
}
|
||||
.d-icon {
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -93,12 +93,12 @@
|
|||
}
|
||||
|
||||
.reply-to {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
margin: 5px 0 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.d-icon {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
.reply-details {
|
||||
max-width: calc(100% - 175px);
|
||||
|
|
@ -180,7 +180,7 @@
|
|||
}
|
||||
.d-icon {
|
||||
padding: 0.3em 0.5em;
|
||||
color: $tertiary;
|
||||
color: var(--tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -264,7 +264,7 @@
|
|||
.mini-tag-chooser {
|
||||
flex: 1 1 25%;
|
||||
margin: 0 0 5px 0;
|
||||
background: $secondary;
|
||||
background: var(--secondary);
|
||||
z-index: z("composer", "dropdown");
|
||||
@media all and (max-width: 900px) {
|
||||
margin: 0;
|
||||
|
|
@ -301,10 +301,10 @@
|
|||
.cancel {
|
||||
margin-left: 1.25em;
|
||||
line-height: normal;
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
transition: color 250ms;
|
||||
&:hover {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
#draft-status,
|
||||
|
|
@ -316,14 +316,14 @@
|
|||
align-items: center;
|
||||
a {
|
||||
margin-left: 5px;
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
.spinner {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
#draft-status .d-icon-user-edit {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
font-size: 20px;
|
||||
vertical-align: -5.5px;
|
||||
}
|
||||
|
|
@ -331,7 +331,7 @@
|
|||
|
||||
#draft-status,
|
||||
#file-uploading {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -343,8 +343,8 @@
|
|||
z-index: z("composer", "dropdown") + 1;
|
||||
position: absolute;
|
||||
width: 240px;
|
||||
background-color: $secondary;
|
||||
border: 1px solid $primary-low;
|
||||
background-color: var(--secondary);
|
||||
border: 1px solid var(--primary-low);
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
|
@ -352,11 +352,11 @@
|
|||
|
||||
li {
|
||||
.d-icon-users {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
|
||||
a {
|
||||
padding: 5px;
|
||||
|
|
@ -364,17 +364,17 @@
|
|||
@include ellipsis;
|
||||
|
||||
span.username {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
span.name {
|
||||
font-size: $font-down-1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
&.selected {
|
||||
background-color: $tertiary-low;
|
||||
background-color: var(--tertiary-low);
|
||||
}
|
||||
@include hover {
|
||||
background-color: $highlight-low;
|
||||
background-color: var(--highlight-low);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -399,12 +399,12 @@ div.ac-wrap div.item a.remove,
|
|||
padding: 1px 3.5px;
|
||||
border-radius: 12px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
&:hover {
|
||||
background-color: $danger-low;
|
||||
border: 1px solid $danger-medium;
|
||||
background-color: var(--danger-low);
|
||||
border: 1px solid var(--danger-medium);
|
||||
text-decoration: none;
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -414,8 +414,8 @@ div.ac-wrap {
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
background-color: $secondary;
|
||||
border: 1px solid $primary-medium;
|
||||
background-color: var(--secondary);
|
||||
border: 1px solid var(--primary-medium);
|
||||
min-height: 30px;
|
||||
box-sizing: border-box;
|
||||
div.item {
|
||||
|
|
@ -452,7 +452,7 @@ div.ac-wrap {
|
|||
|
||||
.future-date-input {
|
||||
.examples {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ body.crawler {
|
|||
background-color: #fff;
|
||||
padding: 10px;
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid $primary-low-mid;
|
||||
border-bottom: 1px solid var(--primary-low-mid);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
|
@ -68,7 +68,7 @@ body.crawler {
|
|||
}
|
||||
|
||||
.discourse-tags {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -90,7 +90,7 @@ body.crawler {
|
|||
margin-top: 1em;
|
||||
margin-bottom: 2em;
|
||||
padding-top: 1.5em;
|
||||
border-top: 1px solid $primary-low;
|
||||
border-top: 1px solid var(--primary-low);
|
||||
}
|
||||
|
||||
.crawler-post-meta {
|
||||
|
|
@ -108,7 +108,7 @@ body.crawler {
|
|||
}
|
||||
|
||||
.crawler-post-infos {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
display: inline-block;
|
||||
@include breakpoint(tablet, min-width) {
|
||||
float: right;
|
||||
|
|
@ -124,7 +124,7 @@ body.crawler {
|
|||
a {
|
||||
display: block;
|
||||
padding: 0.5em 0;
|
||||
border-top: 1px solid $primary-low;
|
||||
border-top: 1px solid var(--primary-low);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
.d-icon.d-icon-d-muted,
|
||||
.d-icon.d-icon-d-watching-first,
|
||||
.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-watching {
|
||||
color: $tertiary;
|
||||
color: var(--tertiary);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
$d-popover-background: $secondary;
|
||||
$d-popover-border: $primary-medium;
|
||||
$d-popover-background: var(--secondary);
|
||||
$d-popover-border: var(--primary-medium);
|
||||
|
||||
@-webkit-keyframes popoverFadeIn {
|
||||
from {
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
.directory-last-updated {
|
||||
margin-bottom: 0.5em;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
font-size: $font-down-1;
|
||||
}
|
||||
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
th {
|
||||
padding: 0.5em;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
@media screen and (max-width: $small-width) {
|
||||
padding: 0.5em 0.25em;
|
||||
}
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
.number,
|
||||
.time-read {
|
||||
font-size: $font-up-3;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
@media screen and (max-width: $small-width) {
|
||||
font-size: $font-up-1;
|
||||
}
|
||||
|
|
@ -63,19 +63,19 @@
|
|||
th.sortable {
|
||||
width: 13%;
|
||||
.d-icon-heart {
|
||||
color: $love;
|
||||
color: var(--love);
|
||||
margin: 0 0.25em 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.me {
|
||||
background-color: $highlight-low-or-medium;
|
||||
background-color: var(--highlight-low-or-medium);
|
||||
.username a,
|
||||
.name,
|
||||
.title,
|
||||
.number,
|
||||
.time-read {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
@keyframes background-fade-highlight {
|
||||
0% {
|
||||
background-color: $tertiary-low;
|
||||
background-color: var(--tertiary-low);
|
||||
}
|
||||
100% {
|
||||
background-color: transparent;
|
||||
|
|
@ -49,12 +49,12 @@
|
|||
animation-iteration-count: infinite;
|
||||
animation-name: placeHolderShimmer;
|
||||
animation-timing-function: linear;
|
||||
background: $primary-very-low;
|
||||
background: var(--primary-very-low);
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
$primary-very-low 10%,
|
||||
$primary-low 18%,
|
||||
$primary-very-low 33%
|
||||
var(--primary-very-low) 10%,
|
||||
var(--primary-low) 18%,
|
||||
var(--primary-very-low) 33%
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -97,10 +97,10 @@ h6 {
|
|||
a.cancel {
|
||||
margin-left: 1.25em;
|
||||
line-height: normal;
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
transition: color 250ms;
|
||||
&:hover {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -152,7 +152,7 @@ input {
|
|||
}
|
||||
|
||||
&.invalid {
|
||||
background-color: $danger-low;
|
||||
background-color: var(--danger-low);
|
||||
}
|
||||
|
||||
.radio &[type="radio"],
|
||||
|
|
@ -165,7 +165,7 @@ input {
|
|||
input,
|
||||
select,
|
||||
textarea {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
caret-color: currentColor;
|
||||
|
||||
&[class*="span"] {
|
||||
|
|
@ -176,17 +176,17 @@ textarea {
|
|||
&[disabled],
|
||||
&[readonly] {
|
||||
cursor: not-allowed;
|
||||
background-color: $primary-low;
|
||||
border-color: $primary-low;
|
||||
background-color: var(--primary-low);
|
||||
border-color: var(--primary-low);
|
||||
}
|
||||
|
||||
&:focus:required:invalid {
|
||||
color: $danger;
|
||||
border-color: $danger;
|
||||
color: var(--danger);
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
&:focus:required:invalid:focus {
|
||||
border-color: $danger;
|
||||
border-color: var(--danger);
|
||||
box-shadow: shadow("focus-danger");
|
||||
}
|
||||
}
|
||||
|
|
@ -212,14 +212,14 @@ input {
|
|||
margin-bottom: 9px;
|
||||
font-size: $font-0;
|
||||
line-height: $line-height-small;
|
||||
color: $primary;
|
||||
background-color: $secondary;
|
||||
border: 1px solid $primary-medium;
|
||||
color: var(--primary);
|
||||
background-color: var(--secondary);
|
||||
border: 1px solid var(--primary-medium);
|
||||
border-radius: 0;
|
||||
box-sizing: border-box;
|
||||
min-height: 30px;
|
||||
&:focus {
|
||||
border-color: $tertiary;
|
||||
border-color: var(--tertiary);
|
||||
box-shadow: shadow("focus");
|
||||
outline: 0;
|
||||
}
|
||||
|
|
@ -249,8 +249,8 @@ input {
|
|||
width: auto;
|
||||
padding: 0 0.5em;
|
||||
height: 28px;
|
||||
background-color: $primary-low;
|
||||
border: 1px solid $primary-medium;
|
||||
background-color: var(--primary-low);
|
||||
border: 1px solid var(--primary-medium);
|
||||
}
|
||||
.add-on,
|
||||
.btn {
|
||||
|
|
@ -274,23 +274,23 @@ input {
|
|||
|
||||
textarea {
|
||||
height: auto;
|
||||
background-color: $secondary;
|
||||
border: 1px solid $primary-medium;
|
||||
background-color: var(--secondary);
|
||||
border: 1px solid var(--primary-medium);
|
||||
&:focus {
|
||||
border-color: $tertiary;
|
||||
border-color: var(--tertiary);
|
||||
box-shadow: shadow("focus");
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
}
|
||||
|
||||
table {
|
||||
th {
|
||||
font-weight: normal;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
text-align: left;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
|
@ -303,7 +303,7 @@ table {
|
|||
cursor: pointer;
|
||||
.discourse-no-touch & {
|
||||
&:hover {
|
||||
background-color: $primary-low;
|
||||
background-color: var(--primary-low);
|
||||
}
|
||||
}
|
||||
.d-icon {
|
||||
|
|
@ -351,7 +351,7 @@ table {
|
|||
|
||||
.boxed {
|
||||
&.white {
|
||||
background-color: $secondary;
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -365,7 +365,7 @@ table {
|
|||
|
||||
.message {
|
||||
border-radius: 8px;
|
||||
background-color: $secondary;
|
||||
background-color: var(--secondary);
|
||||
padding: 14px;
|
||||
|
||||
h2 {
|
||||
|
|
@ -380,15 +380,15 @@ table {
|
|||
.tip {
|
||||
display: inline-block;
|
||||
&.good {
|
||||
color: $success;
|
||||
color: var(--success);
|
||||
}
|
||||
&.bad {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
background-color: $secondary;
|
||||
background-color: var(--secondary);
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
|
@ -403,11 +403,11 @@ table {
|
|||
}
|
||||
|
||||
.unread-high-priority-notifications {
|
||||
color: $secondary;
|
||||
background: $success;
|
||||
color: var(--secondary);
|
||||
background: var(--success);
|
||||
|
||||
&.badge-notification[href] {
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -420,7 +420,7 @@ table {
|
|||
background-image: radial-gradient(
|
||||
40px at 50% 50%,
|
||||
transparent 95%,
|
||||
$primary 100%
|
||||
var(--primary) 100%
|
||||
);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
|
@ -431,13 +431,13 @@ table {
|
|||
height: 80px;
|
||||
top: -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");
|
||||
}
|
||||
|
||||
.ring-first-notification {
|
||||
position: absolute;
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
text-align: left;
|
||||
right: 70px;
|
||||
top: 60px;
|
||||
|
|
@ -487,7 +487,7 @@ table {
|
|||
animation: rotate-forever 1s infinite linear;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border: 4px solid $primary-low-mid;
|
||||
border: 4px solid var(--primary-low-mid);
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
|
||||
|
|
@ -501,7 +501,7 @@ table {
|
|||
|
||||
.content-list {
|
||||
h3 {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
font-size: $font-up-1;
|
||||
padding-left: 5px;
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -512,25 +512,25 @@ table {
|
|||
margin: 0;
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
|
||||
&:first-of-type {
|
||||
border-top: 1px solid $primary-low;
|
||||
border-top: 1px solid var(--primary-low);
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
|
||||
&:hover {
|
||||
background-color: $primary-low;
|
||||
color: $primary;
|
||||
background-color: var(--primary-low);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -601,7 +601,7 @@ table {
|
|||
text-align: center;
|
||||
top: 120px;
|
||||
left: 500px;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
#footer {
|
||||
|
|
@ -610,7 +610,7 @@ table {
|
|||
.contents {
|
||||
padding-top: 10px;
|
||||
a[href] {
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -636,10 +636,10 @@ table {
|
|||
}
|
||||
|
||||
.email-second {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
|
||||
.primary {
|
||||
color: $success;
|
||||
color: var(--success);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -656,7 +656,7 @@ table {
|
|||
background: transparent;
|
||||
|
||||
.d-icon {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -682,7 +682,7 @@ table {
|
|||
}
|
||||
|
||||
.auth-token-icon {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
font-size: 2.25em;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
|
|
@ -697,10 +697,10 @@ table {
|
|||
}
|
||||
|
||||
.auth-token-second {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
|
||||
.active {
|
||||
color: $success;
|
||||
color: var(--success);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
|
@ -713,7 +713,7 @@ table {
|
|||
background: transparent;
|
||||
|
||||
.d-icon {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -726,7 +726,7 @@ table {
|
|||
.topic-status {
|
||||
margin: 0;
|
||||
display: inline-flex;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
.d-icon {
|
||||
height: 0.76em;
|
||||
width: 0.75em;
|
||||
|
|
@ -737,7 +737,7 @@ table {
|
|||
}
|
||||
|
||||
.topic-status-warning .d-icon-envelope {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -745,8 +745,8 @@ table {
|
|||
font-size: $base-font-size;
|
||||
font-weight: bold;
|
||||
padding: 5px 0;
|
||||
background: $danger-medium;
|
||||
background: var(--danger-medium);
|
||||
text-align: center;
|
||||
z-index: z("max");
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
}
|
||||
|
||||
input[disabled] {
|
||||
background: $primary-low;
|
||||
background: var(--primary-low);
|
||||
}
|
||||
}
|
||||
.pika-single {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.ember-select {
|
||||
background-color: $secondary;
|
||||
color: $primary;
|
||||
background-color: var(--secondary);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,9 +34,9 @@ sup img.emoji {
|
|||
display: none;
|
||||
flex-direction: row;
|
||||
height: 320px;
|
||||
color: $primary;
|
||||
background-color: $secondary;
|
||||
border: 1px solid $primary-low;
|
||||
color: var(--primary);
|
||||
background-color: var(--secondary);
|
||||
border: 1px solid var(--primary-low);
|
||||
|
||||
img.emoji {
|
||||
// custom emojis might import images of various sizes
|
||||
|
|
@ -52,7 +52,7 @@ sup img.emoji {
|
|||
flex: 1 0 0px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-right: 1px solid $primary-low;
|
||||
border-right: 1px solid var(--primary-low);
|
||||
min-width: 36px;
|
||||
overflow-y: auto;
|
||||
padding: 0.5em;
|
||||
|
|
@ -102,16 +102,16 @@ sup img.emoji {
|
|||
}
|
||||
|
||||
.emoji-picker .section-header .title {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.emoji-picker .section-header .clear-recent .fa {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
|
||||
&:hover {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -127,7 +127,7 @@ sup img.emoji {
|
|||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid $primary-low;
|
||||
border-top: 1px solid var(--primary-low);
|
||||
}
|
||||
|
||||
.emoji-picker .info {
|
||||
|
|
@ -209,7 +209,7 @@ sup img.emoji {
|
|||
display: inline-block;
|
||||
vertical-align: top;
|
||||
border-radius: 2px;
|
||||
background-color: $tertiary-low;
|
||||
background-color: var(--tertiary-low);
|
||||
}
|
||||
|
||||
.emoji-picker-modal.fadeIn {
|
||||
|
|
@ -225,7 +225,7 @@ sup img.emoji {
|
|||
|
||||
.emoji-picker .filter {
|
||||
background-color: none;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
|
@ -237,7 +237,7 @@ sup img.emoji {
|
|||
}
|
||||
|
||||
.emoji-picker .filter .d-icon-search {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
font-size: $font-up-1;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
|
|
@ -251,8 +251,8 @@ sup img.emoji {
|
|||
box-shadow: none;
|
||||
padding-right: 24px;
|
||||
outline: none;
|
||||
color: $primary;
|
||||
background: $secondary;
|
||||
color: var(--primary);
|
||||
background: var(--secondary);
|
||||
|
||||
&:focus {
|
||||
border: none;
|
||||
|
|
@ -279,11 +279,11 @@ sup img.emoji {
|
|||
top: 12px;
|
||||
border: 0;
|
||||
background: none;
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
outline: none;
|
||||
display: none;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
.desc {
|
||||
margin-top: 16px;
|
||||
.d-icon-check-circle {
|
||||
color: $success;
|
||||
color: var(--success);
|
||||
}
|
||||
}
|
||||
.buttons {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
}
|
||||
tr.total {
|
||||
td {
|
||||
background-color: $primary-low;
|
||||
background-color: var(--primary-low);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
|
||||
.score-value-type {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
.op:last-of-type {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
}
|
||||
.about.category-moderators {
|
||||
.badge-wrapper.bullet .badge-category {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// For example: .group .user-secondary-navigation
|
||||
|
||||
.group-details-container {
|
||||
background: $primary-very-low;
|
||||
background: var(--primary-very-low);
|
||||
padding: 20px;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
|
|
@ -34,12 +34,12 @@
|
|||
.group-info-name {
|
||||
font-size: $font-up-3;
|
||||
font-weight: bold;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.group-info-full-name {
|
||||
font-size: $font-up-2;
|
||||
color: $primary-high-or-secondary-low;
|
||||
color: var(--primary-high-or-secondary-low);
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
margin-right: 10px;
|
||||
|
||||
&:hover {
|
||||
background-color: $danger;
|
||||
background-color: var(--danger);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -90,7 +90,7 @@ table.group-manage-logs {
|
|||
cursor: pointer;
|
||||
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -120,7 +120,7 @@ table.group-members {
|
|||
.user-info {
|
||||
display: block;
|
||||
.avatar-flair {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -130,14 +130,14 @@ table.group-members {
|
|||
|
||||
td {
|
||||
text-align: center;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
padding: 0.8em 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.group-owner-label {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.group-flair-inputs {
|
||||
|
|
@ -148,7 +148,7 @@ table.group-members {
|
|||
width: 45px;
|
||||
|
||||
.avatar-wrapper {
|
||||
background-color: $primary-very-low;
|
||||
background-color: var(--primary-very-low);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -47,8 +47,8 @@
|
|||
display: flex;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
border: 1px solid $primary-low;
|
||||
color: $primary;
|
||||
border: 1px solid var(--primary-low);
|
||||
color: var(--primary);
|
||||
.discourse-no-touch & {
|
||||
transition: all 0.25s;
|
||||
&:hover {
|
||||
|
|
@ -56,12 +56,12 @@
|
|||
}
|
||||
}
|
||||
.group-membership {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
margin-top: auto;
|
||||
padding-top: 1em;
|
||||
.is-group-owner,
|
||||
.is-group-member {
|
||||
color: $success;
|
||||
color: var(--success);
|
||||
}
|
||||
}
|
||||
.group-box-inner {
|
||||
|
|
@ -94,15 +94,15 @@
|
|||
.group-user-count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
.d-icon {
|
||||
margin-right: 0.25em;
|
||||
font-size: 0.8em;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
.group-description {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
|
@ -110,7 +110,7 @@
|
|||
.groups-info-name {
|
||||
font-size: $font-up-1;
|
||||
font-weight: bold;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
$size: 40px;
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
|
||||
.group-avatar-flair {
|
||||
display: inline-block;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
|
||||
.avatar-flair {
|
||||
background-size: $size;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
position: absolute;
|
||||
top: 0;
|
||||
z-index: z("header");
|
||||
background-color: $header_background;
|
||||
background-color: var(--header_background);
|
||||
box-shadow: shadow("header");
|
||||
|
||||
> .wrap {
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
height: 100%;
|
||||
a,
|
||||
a:visited {
|
||||
color: $header_primary;
|
||||
color: var(--header_primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
.panel-body {
|
||||
.flagged-posts,
|
||||
.reviewables {
|
||||
background: $danger;
|
||||
background: var(--danger);
|
||||
min-width: 6px;
|
||||
}
|
||||
}
|
||||
|
|
@ -130,29 +130,29 @@
|
|||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $primary-low;
|
||||
background-color: var(--primary-low);
|
||||
border-top: 1px solid transparent;
|
||||
border-left: 1px solid transparent;
|
||||
border-right: 1px solid transparent;
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
color: $primary;
|
||||
background-color: $primary-low;
|
||||
color: var(--primary);
|
||||
background-color: var(--primary-low);
|
||||
}
|
||||
}
|
||||
.drop-down-mode & {
|
||||
.active .icon {
|
||||
position: relative;
|
||||
background-color: $secondary;
|
||||
background-color: var(--secondary);
|
||||
cursor: default;
|
||||
border-top: 1px solid $primary-low;
|
||||
border-left: 1px solid $primary-low;
|
||||
border-right: 1px solid $primary-low;
|
||||
border-top: 1px solid var(--primary-low);
|
||||
border-left: 1px solid var(--primary-low);
|
||||
border-right: 1px solid var(--primary-low);
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
&:after {
|
||||
display: block;
|
||||
|
|
@ -163,7 +163,7 @@
|
|||
width: 100%;
|
||||
height: 0;
|
||||
content: "";
|
||||
border-top: 1px solid $secondary;
|
||||
border-top: 1px solid var(--secondary);
|
||||
}
|
||||
&:hover {
|
||||
border-bottom: none;
|
||||
|
|
@ -176,7 +176,7 @@
|
|||
font-size: $font-up-4;
|
||||
line-height: $line-height-large;
|
||||
display: inline-block;
|
||||
color: $header_primary-low-mid;
|
||||
color: var(--header_primary-low-mid);
|
||||
}
|
||||
.notifications {
|
||||
position: relative;
|
||||
|
|
@ -200,7 +200,7 @@
|
|||
.unread-notifications {
|
||||
left: auto;
|
||||
right: -3px;
|
||||
background-color: $tertiary-med-or-tertiary;
|
||||
background-color: var(--tertiary-med-or-tertiary);
|
||||
}
|
||||
.unread-high-priority-notifications,
|
||||
.ring {
|
||||
|
|
@ -210,7 +210,7 @@
|
|||
}
|
||||
|
||||
.highlight-strong {
|
||||
background-color: $highlight-medium;
|
||||
background-color: var(--highlight-medium);
|
||||
}
|
||||
|
||||
.search-highlight {
|
||||
|
|
@ -259,7 +259,7 @@
|
|||
}
|
||||
}
|
||||
.topic-link {
|
||||
color: $header_primary;
|
||||
color: var(--header_primary);
|
||||
display: block;
|
||||
@include ellipsis;
|
||||
// Some characters like '/' and 'j' can be wider than the font's em-box
|
||||
|
|
@ -271,10 +271,10 @@
|
|||
}
|
||||
.topic-statuses {
|
||||
.d-icon {
|
||||
color: $header_primary-medium;
|
||||
color: var(--header_primary-medium);
|
||||
}
|
||||
.d-icon-envelope {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
.header-title {
|
||||
|
|
@ -300,7 +300,7 @@
|
|||
&.bar,
|
||||
&.none {
|
||||
span.badge-category {
|
||||
color: $header_primary-high;
|
||||
color: var(--header_primary-high);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -309,7 +309,7 @@
|
|||
align-items: center;
|
||||
max-width: 100%;
|
||||
.discourse-tags {
|
||||
color: $header_primary-high;
|
||||
color: var(--header_primary-high);
|
||||
@include ellipsis;
|
||||
.discourse-tag {
|
||||
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 {
|
||||
padding: 0 5px;
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
border-radius: 0.25em;
|
||||
min-width: 3em;
|
||||
@include ellipsis;
|
||||
|
|
@ -367,7 +367,7 @@ $mobile-avatar-height: 1.532em;
|
|||
.mobile-view & {
|
||||
height: $mobile-avatar-height;
|
||||
}
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
|
||||
.d-icon {
|
||||
margin-right: 5px;
|
||||
|
|
@ -380,7 +380,7 @@ $mobile-avatar-height: 1.532em;
|
|||
}
|
||||
|
||||
.more-participants {
|
||||
color: $header_primary-high;
|
||||
color: var(--header_primary-high);
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
#revision {
|
||||
overflow: auto;
|
||||
border-bottom: 3px solid $primary-low;
|
||||
border-bottom: 3px solid var(--primary-low);
|
||||
}
|
||||
|
||||
table.markdown > tbody > tr > td,
|
||||
|
|
@ -33,72 +33,72 @@
|
|||
.diff-ins {
|
||||
code,
|
||||
img {
|
||||
border: 2px solid $success;
|
||||
border: 2px solid var(--success);
|
||||
}
|
||||
img {
|
||||
opacity: 0.75;
|
||||
filter: alpha(opacity=75);
|
||||
}
|
||||
a {
|
||||
color: $success;
|
||||
color: var(--success);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
img.diff-ins,
|
||||
code.diff-ins {
|
||||
border: 2px solid $success;
|
||||
border: 2px solid var(--success);
|
||||
}
|
||||
img.diff-ins {
|
||||
opacity: 0.75;
|
||||
filter: alpha(opacity=75);
|
||||
}
|
||||
.diff-ins {
|
||||
color: $primary;
|
||||
background: $success-low;
|
||||
color: var(--primary);
|
||||
background: var(--success-low);
|
||||
}
|
||||
ins {
|
||||
color: $primary;
|
||||
background: $success-low;
|
||||
color: var(--primary);
|
||||
background: var(--success-low);
|
||||
text-decoration: none;
|
||||
}
|
||||
del,
|
||||
.diff-del {
|
||||
code,
|
||||
img {
|
||||
border: 2px solid $danger;
|
||||
border: 2px solid var(--danger);
|
||||
}
|
||||
img {
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
}
|
||||
a {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
img.diff-del,
|
||||
code.diff-del {
|
||||
border: 2px solid $danger;
|
||||
border: 2px solid var(--danger);
|
||||
}
|
||||
img.diff-del {
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
}
|
||||
.diff-del {
|
||||
color: $primary;
|
||||
background: $danger-low;
|
||||
color: var(--primary);
|
||||
background: var(--danger-low);
|
||||
text-decoration: none;
|
||||
}
|
||||
del {
|
||||
color: $primary;
|
||||
background: $danger-low;
|
||||
color: var(--primary);
|
||||
background: var(--danger-low);
|
||||
text-decoration: none;
|
||||
}
|
||||
span.date {
|
||||
font-weight: bold;
|
||||
}
|
||||
span.edit-reason {
|
||||
background-color: $highlight-medium;
|
||||
background-color: var(--highlight-medium);
|
||||
padding: 3px 5px 5px 5px;
|
||||
}
|
||||
.d-icon-ban {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ $meta-element-margin: 6px;
|
|||
}
|
||||
|
||||
.onebox img.d-lazyload-hidden:not(.ytp-thumbnail-image) {
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
}
|
||||
|
||||
.cooked img.d-lazyload {
|
||||
|
|
@ -38,8 +38,8 @@ $meta-element-margin: 6px;
|
|||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
color: $secondary;
|
||||
background: $primary;
|
||||
color: var(--secondary);
|
||||
background: var(--primary);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
display: flex;
|
||||
|
|
@ -53,7 +53,7 @@ $meta-element-margin: 6px;
|
|||
.d-icon {
|
||||
margin: $meta-element-margin;
|
||||
opacity: 0.8;
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
+ .filename {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
|
@ -62,7 +62,7 @@ $meta-element-margin: 6px;
|
|||
.informations {
|
||||
margin: $meta-element-margin;
|
||||
padding-right: 20px;
|
||||
color: $secondary-high;
|
||||
color: var(--secondary-high);
|
||||
font-size: $font-0;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 3;
|
||||
|
|
@ -82,8 +82,8 @@ $meta-element-margin: 6px;
|
|||
|
||||
a.lightbox:hover {
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 5px 0 rgba($primary, 0.2),
|
||||
0 2px 10px 0 rgba($primary, 0.2);
|
||||
box-shadow: 0 2px 5px 0 rgba(var(--primary-rgb), 0.2),
|
||||
0 2px 10px 0 rgba(var(--primary-rgb), 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.caps-lock-warning {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
font-size: $font-down-1;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
width: 100%;
|
||||
}
|
||||
a {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
td {
|
||||
padding-right: 5px;
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
|
||||
.create-account {
|
||||
.disclaimer {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
}
|
||||
.instructions {
|
||||
margin-top: 0.15em;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
line-height: $line-height-medium;
|
||||
}
|
||||
}
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
.password-reset {
|
||||
.instructions {
|
||||
label {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -143,7 +143,7 @@
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
.instructions {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
margin: 0;
|
||||
font-size: $font-down-1;
|
||||
font-weight: normal;
|
||||
|
|
@ -167,7 +167,7 @@
|
|||
flex-direction: column;
|
||||
margin-top: 0.15em;
|
||||
label {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -176,7 +176,7 @@
|
|||
button#login-link,
|
||||
button#new-account-link {
|
||||
background: transparent;
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
|
||||
#security-key {
|
||||
|
|
@ -193,6 +193,6 @@ button#new-account-link {
|
|||
a {
|
||||
display: inline-block;
|
||||
padding: 1em 0.5em 1em 0;
|
||||
color: $tertiary;
|
||||
color: var(--tertiary);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,9 +22,9 @@
|
|||
}
|
||||
|
||||
.menu-panel {
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
box-shadow: shadow("menu-panel");
|
||||
background-color: $secondary;
|
||||
background-color: var(--secondary);
|
||||
z-index: z("header");
|
||||
padding: 0.5em;
|
||||
width: 300px;
|
||||
|
|
@ -70,22 +70,22 @@
|
|||
a.categories-link {
|
||||
padding: 0.25em 0.5em;
|
||||
display: block;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $highlight-medium;
|
||||
background-color: var(--highlight-medium);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
.new {
|
||||
font-size: $font-down-1;
|
||||
margin-left: 0.5em;
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -104,12 +104,12 @@
|
|||
background: transparent;
|
||||
|
||||
.category-name {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
.badge-notification {
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
background-color: transparent;
|
||||
display: inline;
|
||||
padding: 0;
|
||||
|
|
@ -119,11 +119,11 @@
|
|||
.badge-wrapper {
|
||||
&.bar,
|
||||
&.bullet {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
padding: 0 0 0 0.15em;
|
||||
}
|
||||
&.box {
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
+ a.badge.badge-notification {
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
|
@ -136,7 +136,7 @@
|
|||
|
||||
// note these topic counts only appear for anons in the category hamburger drop down
|
||||
b.topics-count {
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
font-weight: normal;
|
||||
font-size: $font-down-1;
|
||||
}
|
||||
|
|
@ -155,7 +155,7 @@
|
|||
width: 100%;
|
||||
display: table;
|
||||
margin-top: -1px;
|
||||
border-top: 1px solid $primary-low;
|
||||
border-top: 1px solid var(--primary-low);
|
||||
padding-top: 0.5em;
|
||||
|
||||
h3 {
|
||||
|
|
@ -166,14 +166,14 @@
|
|||
|
||||
.d-icon,
|
||||
&:hover .d-icon {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
.icon {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
|
||||
li {
|
||||
background-color: $tertiary-low;
|
||||
background-color: var(--tertiary-low);
|
||||
|
||||
// This is until other languages remove the HTML from within
|
||||
// notifications. It can then be removed
|
||||
|
|
@ -182,12 +182,12 @@
|
|||
}
|
||||
|
||||
span:first-child {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $highlight-medium;
|
||||
background-color: var(--highlight-medium);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
@ -227,11 +227,11 @@
|
|||
}
|
||||
.is-warning {
|
||||
.d-icon-far-envelope {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
.read {
|
||||
background-color: $secondary;
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
.none {
|
||||
padding-top: 5px;
|
||||
|
|
@ -251,11 +251,11 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 30px;
|
||||
color: $primary-med-or-secondary-high;
|
||||
background: $blend-primary-secondary-5;
|
||||
color: var(--primary-med-or-secondary-high);
|
||||
background: var(--blend-primary-secondary-5);
|
||||
&:hover {
|
||||
color: $primary;
|
||||
background: $primary-low;
|
||||
color: var(--primary);
|
||||
background: var(--primary-low);
|
||||
}
|
||||
}
|
||||
/* as a big ol' click target, don't let text inside be selected */
|
||||
|
|
@ -263,9 +263,9 @@
|
|||
|
||||
&.quick-access-profile {
|
||||
li:not(.show-all) a {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
// accounts for menu "ears" 4px + border 1px
|
||||
|
|
@ -320,8 +320,8 @@ div.menu-links-header {
|
|||
}
|
||||
|
||||
a.active {
|
||||
border: 1px solid $primary-low;
|
||||
border-bottom: 1px solid $secondary;
|
||||
border: 1px solid var(--primary-low);
|
||||
border-bottom: 1px solid var(--secondary);
|
||||
position: relative;
|
||||
|
||||
&:focus,
|
||||
|
|
@ -333,7 +333,7 @@ div.menu-links-header {
|
|||
}
|
||||
a:hover,
|
||||
a:focus {
|
||||
background-color: $highlight-medium;
|
||||
background-color: var(--highlight-medium);
|
||||
outline: none;
|
||||
}
|
||||
a {
|
||||
|
|
@ -373,7 +373,7 @@ div.menu-links-header {
|
|||
}
|
||||
.fa,
|
||||
a {
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
}
|
||||
|
||||
.d-icon-user {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
flex: 0 1 auto;
|
||||
margin: 0 auto;
|
||||
max-width: 700px;
|
||||
background-color: $secondary;
|
||||
background-color: var(--secondary);
|
||||
box-shadow: shadow("modal");
|
||||
|
||||
.select-kit {
|
||||
|
|
@ -42,20 +42,20 @@
|
|||
z-index: z("modal", "content");
|
||||
overflow: auto;
|
||||
height: auto;
|
||||
background-color: $secondary;
|
||||
background-color: var(--secondary);
|
||||
box-shadow: shadow("card");
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.input-hint-text {
|
||||
margin-left: 0.5em;
|
||||
color: $secondary-high;
|
||||
color: var(--secondary-high);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
padding: 10px 15px;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
margin-left: auto;
|
||||
padding-left: 2em;
|
||||
.close {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -127,7 +127,7 @@
|
|||
|
||||
.inline-modal {
|
||||
.modal-inner-container {
|
||||
border: 1px solid $secondary-medium;
|
||||
border: 1px solid var(--secondary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -163,7 +163,7 @@
|
|||
|
||||
.modal-footer {
|
||||
padding: 14px 15px 10px;
|
||||
border-top: 1px solid $primary-low;
|
||||
border-top: 1px solid var(--primary-low);
|
||||
.btn {
|
||||
margin: 0 5px 5px 0;
|
||||
&[href] {
|
||||
|
|
@ -188,11 +188,11 @@
|
|||
.modal {
|
||||
.nav {
|
||||
padding: 10px 30px 10px 15px;
|
||||
background-color: $secondary;
|
||||
background-color: var(--secondary);
|
||||
li > a {
|
||||
font-size: $font-0;
|
||||
}
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
|
|
@ -229,18 +229,18 @@
|
|||
padding: 5px 10px;
|
||||
box-shadow: shadow("card");
|
||||
z-index: 5;
|
||||
background-color: $secondary;
|
||||
background-color: var(--secondary);
|
||||
max-height: 150px;
|
||||
width: 90%;
|
||||
overflow-y: auto;
|
||||
> .search-link {
|
||||
padding: 6px;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $highlight-medium;
|
||||
background-color: var(--highlight-medium);
|
||||
}
|
||||
.search-category {
|
||||
display: flex;
|
||||
|
|
@ -266,7 +266,7 @@
|
|||
margin-bottom: 20px;
|
||||
}
|
||||
.warning {
|
||||
color: $danger !important;
|
||||
color: var(--danger) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -321,9 +321,9 @@
|
|||
|
||||
.d-modal-cancel {
|
||||
margin-left: 1em;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
&:hover {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -339,7 +339,7 @@
|
|||
.progress-bar {
|
||||
height: 15px;
|
||||
position: relative;
|
||||
background: $primary-low-mid;
|
||||
background: var(--primary-low-mid);
|
||||
border-radius: 25px;
|
||||
overflow: hidden;
|
||||
margin: 30px 0 20px;
|
||||
|
|
@ -347,7 +347,7 @@
|
|||
display: block;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background-color: $tertiary;
|
||||
background-color: var(--tertiary);
|
||||
position: relative;
|
||||
transition: width 0.6s linear;
|
||||
}
|
||||
|
|
@ -369,7 +369,7 @@
|
|||
}
|
||||
.d-icon-times-circle {
|
||||
margin-left: 5px;
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -390,8 +390,8 @@
|
|||
|
||||
.cannot_delete_reason {
|
||||
position: absolute;
|
||||
background: $primary;
|
||||
color: $secondary;
|
||||
background: var(--primary);
|
||||
color: var(--secondary);
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
padding: 12px 8px;
|
||||
|
|
@ -402,7 +402,7 @@
|
|||
border: solid transparent;
|
||||
content: " ";
|
||||
position: absolute;
|
||||
border-top-color: $primary;
|
||||
border-top-color: var(--primary);
|
||||
border-width: 8px;
|
||||
}
|
||||
}
|
||||
|
|
@ -415,8 +415,8 @@
|
|||
.pending-permission-change-alert {
|
||||
margin-left: auto;
|
||||
max-width: 250px;
|
||||
background: $primary-very-high;
|
||||
color: $secondary;
|
||||
background: var(--primary-very-high);
|
||||
color: var(--secondary);
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
position: relative;
|
||||
|
|
@ -424,7 +424,7 @@
|
|||
border: solid transparent;
|
||||
content: " ";
|
||||
position: absolute;
|
||||
border-bottom-color: $primary-very-high;
|
||||
border-bottom-color: var(--primary-very-high);
|
||||
border-width: 7px;
|
||||
top: -13px;
|
||||
left: 200px;
|
||||
|
|
@ -496,13 +496,13 @@
|
|||
margin-right: 5px;
|
||||
&:hover,
|
||||
&.active {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
&:focus {
|
||||
outline: 2px solid $primary-low;
|
||||
outline: 2px solid var(--primary-low);
|
||||
}
|
||||
}
|
||||
.incoming-email-tabs {
|
||||
|
|
@ -516,7 +516,7 @@
|
|||
.incoming-email-html-part {
|
||||
height: 95%;
|
||||
border: none;
|
||||
border-top: 1px solid $primary-low;
|
||||
border-top: 1px solid var(--primary-low);
|
||||
padding-top: 10px;
|
||||
}
|
||||
textarea {
|
||||
|
|
@ -614,7 +614,7 @@
|
|||
}
|
||||
|
||||
.custom-message-length {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
font-size: $font-down-1;
|
||||
}
|
||||
|
||||
|
|
@ -631,11 +631,11 @@
|
|||
}
|
||||
|
||||
.input-hint-text {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.jump-to-post-control .index {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
.jump-to-date-control .input-hint-text {
|
||||
|
|
@ -653,7 +653,7 @@
|
|||
|
||||
.text {
|
||||
margin: 0 0.5em 0 0;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -763,12 +763,12 @@
|
|||
cursor: pointer;
|
||||
|
||||
&.is-active {
|
||||
color: $secondary;
|
||||
background: $danger;
|
||||
color: var(--secondary);
|
||||
background: var(--danger);
|
||||
|
||||
&.single-tab {
|
||||
background: none;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
padding: 4px 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ a.loading-onebox {
|
|||
position: relative;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border: 2px solid $primary-low-mid;
|
||||
border: 2px solid var(--primary-low-mid);
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
-webkit-animation: rotate-forever 1s infinite linear;
|
||||
|
|
@ -25,7 +25,7 @@ a.loading-onebox {
|
|||
margin-bottom: 12px;
|
||||
margin-right: 10px;
|
||||
display: block;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
position: relative;
|
||||
height: 20px;
|
||||
.info {
|
||||
|
|
@ -94,16 +94,16 @@ a.loading-onebox {
|
|||
}
|
||||
|
||||
aside.onebox {
|
||||
border: 5px solid $primary-low;
|
||||
border: 5px solid var(--primary-low);
|
||||
margin-bottom: 1em;
|
||||
padding: 12px 25px 12px 12px;
|
||||
font-size: $font-0;
|
||||
background: $secondary;
|
||||
background: var(--secondary);
|
||||
|
||||
header {
|
||||
margin-bottom: 8px;
|
||||
a[href] {
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -131,12 +131,12 @@ aside.onebox {
|
|||
}
|
||||
|
||||
a[href] {
|
||||
color: $tertiary;
|
||||
color: var(--tertiary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a[href]:visited {
|
||||
color: $tertiary;
|
||||
color: var(--tertiary);
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -304,9 +304,9 @@ aside.onebox {
|
|||
|
||||
// Google Calendar Placeholder
|
||||
.gdocs-onebox-splash {
|
||||
background-color: $primary-low-mid;
|
||||
color: $primary;
|
||||
border: 1px inset $primary;
|
||||
background-color: var(--primary-low-mid);
|
||||
color: var(--primary);
|
||||
border: 1px inset var(--primary);
|
||||
.gdocs-onebox-logo {
|
||||
display: inline-block;
|
||||
width: 128px;
|
||||
|
|
@ -351,7 +351,7 @@ pre.onebox code ol {
|
|||
line-height: $line-height-large;
|
||||
}
|
||||
pre.onebox code {
|
||||
background-color: $primary-very-low;
|
||||
background-color: var(--primary-very-low);
|
||||
}
|
||||
pre.onebox code li {
|
||||
padding-left: 5px;
|
||||
|
|
@ -372,7 +372,7 @@ pre.onebox code ol.lines li {
|
|||
}
|
||||
|
||||
pre.onebox code li.selected {
|
||||
background-color: $highlight-low-or-medium;
|
||||
background-color: var(--highlight-low-or-medium);
|
||||
}
|
||||
|
||||
pre.onebox code {
|
||||
|
|
@ -406,7 +406,7 @@ pre.onebox code {
|
|||
}
|
||||
|
||||
.github-icon {
|
||||
fill: $primary-high;
|
||||
fill: var(--primary-high);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
|
@ -440,10 +440,10 @@ pre.onebox code {
|
|||
font-weight: bold;
|
||||
|
||||
.added {
|
||||
color: $success;
|
||||
color: var(--success);
|
||||
}
|
||||
.removed {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -465,8 +465,8 @@ pre.onebox code {
|
|||
|
||||
.labels span {
|
||||
// !important required to override inline style attribute
|
||||
background-color: $primary-medium !important;
|
||||
color: $secondary !important;
|
||||
background-color: var(--primary-medium) !important;
|
||||
color: var(--secondary) !important;
|
||||
padding: 2px 4px !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -528,7 +528,7 @@ aside.onebox.twitterstatus .onebox-body {
|
|||
margin-left: 70px;
|
||||
|
||||
.quoted {
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
padding: 0px 14px 0px 12px;
|
||||
white-space: normal;
|
||||
margin-top: 15px;
|
||||
|
|
@ -543,7 +543,7 @@ aside.onebox.twitterstatus .onebox-body {
|
|||
|
||||
span {
|
||||
font-weight: lighter;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -600,7 +600,7 @@ aside.onebox.stackexchange .onebox-body {
|
|||
}
|
||||
|
||||
.onebox-metadata {
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
}
|
||||
|
||||
.onebox.xkcd .onebox-body {
|
||||
|
|
@ -630,7 +630,7 @@ aside.onebox.stackexchange .onebox-body {
|
|||
.onebox.whitelistedgeneric {
|
||||
.label1,
|
||||
.label2 {
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
}
|
||||
.label1 {
|
||||
float: left;
|
||||
|
|
@ -660,7 +660,7 @@ aside.onebox.stackexchange .onebox-body {
|
|||
|
||||
.onebox.instagram {
|
||||
div.instagram-description {
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -670,7 +670,7 @@ aside.onebox.stackexchange .onebox-body {
|
|||
position: relative;
|
||||
}
|
||||
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 {
|
||||
.like,
|
||||
.retweet {
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
padding-left: 10px;
|
||||
svg {
|
||||
fill: currentColor;
|
||||
|
|
@ -720,7 +720,7 @@ aside.onebox.stackexchange .onebox-body {
|
|||
position: relative;
|
||||
width: 100%;
|
||||
padding: 0 0 48.25% 0;
|
||||
background-color: $primary-low;
|
||||
background-color: var(--primary-low);
|
||||
|
||||
.placeholder-icon {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.popup-menu {
|
||||
background-color: $secondary;
|
||||
background-color: var(--secondary);
|
||||
width: 14em;
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
z-index: z("dropdown");
|
||||
box-shadow: shadow("card");
|
||||
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
list-style: none;
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid rgba($primary-low, 0.5);
|
||||
border-bottom: 1px solid rgba(var(--primary-low-rgb), 0.5);
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
|
|
@ -26,33 +26,33 @@
|
|||
border-radius: 0;
|
||||
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
background: $tertiary-low;
|
||||
color: var(--primary);
|
||||
background: var(--tertiary-low);
|
||||
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
&.popup-menu-btn-danger {
|
||||
.d-icon {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.d-button-label {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.d-icon,
|
||||
.d-button-label {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
background: $danger-low;
|
||||
background: var(--danger-low);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,15 +6,15 @@
|
|||
}
|
||||
|
||||
.status {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
span.approved {
|
||||
color: $success;
|
||||
color: var(--success);
|
||||
.d-icon {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
span.rejected {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
.d-icon {
|
||||
color: currentColor;
|
||||
}
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
}
|
||||
|
||||
.reviewable-user-details {
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
padding-bottom: 0.25em;
|
||||
|
||||
display: flex;
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
}
|
||||
|
||||
.reviewable-filters {
|
||||
background-color: $primary-very-low;
|
||||
background-color: var(--primary-very-low);
|
||||
padding: 1em;
|
||||
margin-bottom: 1em;
|
||||
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
|
||||
.d-date-input {
|
||||
flex: 1 1 auto;
|
||||
border: 1px solid $primary-medium;
|
||||
border: 1px solid var(--primary-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -205,19 +205,19 @@
|
|||
.percentage-label {
|
||||
margin-right: 0.25em;
|
||||
&.agreed {
|
||||
color: $success;
|
||||
color: var(--success);
|
||||
+ .d-icon {
|
||||
color: $success;
|
||||
color: var(--success);
|
||||
}
|
||||
}
|
||||
&.disagreed {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
+ .d-icon {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
&.ignored {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
.d-icon {
|
||||
|
|
@ -227,14 +227,14 @@
|
|||
|
||||
.reviewable-item {
|
||||
padding-top: 2em;
|
||||
border-top: 1px solid $primary-low;
|
||||
border-top: 1px solid var(--primary-low);
|
||||
|
||||
.topic-statuses {
|
||||
font-size: $font-up-2;
|
||||
}
|
||||
|
||||
.reviewable-meta-data {
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-bottom: 0.5em;
|
||||
|
|
@ -250,7 +250,7 @@
|
|||
margin-left: 1em;
|
||||
margin-right: auto;
|
||||
a {
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
}
|
||||
}
|
||||
.score {
|
||||
|
|
@ -287,7 +287,7 @@
|
|||
|
||||
.reviewable-scores {
|
||||
min-width: 50%;
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
|
||||
.reviewed-by {
|
||||
.date {
|
||||
|
|
@ -306,7 +306,7 @@
|
|||
|
||||
.d-icon {
|
||||
font-size: $font-down-1;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
.badge-notification {
|
||||
|
|
@ -375,7 +375,7 @@
|
|||
|
||||
.reviewable-item {
|
||||
.show-raw-email {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
font-size: $font-down-2;
|
||||
}
|
||||
.post-title {
|
||||
|
|
@ -413,7 +413,7 @@
|
|||
.reviewable-reply-to {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
font-size: 0.9em;
|
||||
.d-icon {
|
||||
margin-right: 0.5em;
|
||||
|
|
@ -445,11 +445,11 @@
|
|||
|
||||
.post-topic {
|
||||
width: 100%;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
margin-bottom: 0.75em;
|
||||
.title-text {
|
||||
font-weight: bold;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
display: block;
|
||||
font-size: $font-up-2;
|
||||
margin-right: 0.75em;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
// The 'left' and 'right' in these selectors is not being flipped by r2.
|
||||
.rtl .nav-stacked a.active::after {
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: $secondary !important;
|
||||
border-right-color: var(--secondary) !important;
|
||||
}
|
||||
.rtl code {
|
||||
direction: ltr !important;
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
}
|
||||
|
||||
a.widget-link {
|
||||
color: $tertiary;
|
||||
color: var(--tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -78,12 +78,12 @@
|
|||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
.topic-statuses {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
.main-results + .secondary-results {
|
||||
border-left: 1px solid $primary-low;
|
||||
border-left: 1px solid var(--primary-low);
|
||||
margin-left: 1em;
|
||||
padding-left: 1em;
|
||||
max-width: 33%;
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
margin-bottom: 1em;
|
||||
margin-top: 1em;
|
||||
height: 1px;
|
||||
background: $primary-low;
|
||||
background: var(--primary-low);
|
||||
}
|
||||
|
||||
.search-result-tag {
|
||||
|
|
@ -115,10 +115,10 @@
|
|||
|
||||
.search-result-group {
|
||||
.search-link {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -151,7 +151,7 @@
|
|||
&:hover {
|
||||
.name,
|
||||
.slug {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -166,7 +166,7 @@
|
|||
|
||||
.slug {
|
||||
font-size: $font-down-1;
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -213,12 +213,12 @@
|
|||
}
|
||||
|
||||
.username {
|
||||
color: $primary-high-or-secondary-low;
|
||||
color: var(--primary-high-or-secondary-low);
|
||||
font-size: $font-down-1;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: $primary-high-or-secondary-low;
|
||||
color: var(--primary-high-or-secondary-low);
|
||||
font-size: $font-0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@
|
|||
justify-content: space-between;
|
||||
|
||||
.warning {
|
||||
background-color: $danger-medium;
|
||||
background-color: var(--danger-medium);
|
||||
padding: 5px 8px;
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
.search-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
padding-bottom: 1em;
|
||||
margin-bottom: 1.5em;
|
||||
flex-direction: row;
|
||||
|
|
@ -90,9 +90,9 @@
|
|||
.search-notice {
|
||||
.fps-invalid {
|
||||
padding: 0.5em;
|
||||
background-color: $danger-low;
|
||||
border: 1px solid $danger-medium;
|
||||
color: $danger;
|
||||
background-color: var(--danger-low);
|
||||
border: 1px solid var(--danger-medium);
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
}
|
||||
|
||||
.search-advanced-title {
|
||||
background: $primary-low;
|
||||
background: var(--primary-low);
|
||||
padding: 0.358em 1em;
|
||||
@include breakpoint(medium) {
|
||||
padding: 0.358em 0.5em;
|
||||
|
|
@ -136,7 +136,7 @@
|
|||
font-weight: bold;
|
||||
|
||||
&.btn {
|
||||
background: $primary-low;
|
||||
background: var(--primary-low);
|
||||
}
|
||||
|
||||
.d-icon {
|
||||
|
|
@ -145,7 +145,7 @@
|
|||
}
|
||||
|
||||
.search-advanced-filters {
|
||||
background: $primary-very-low;
|
||||
background: var(--primary-very-low);
|
||||
padding: 1em;
|
||||
.control-group {
|
||||
margin-bottom: 15px;
|
||||
|
|
@ -231,28 +231,28 @@
|
|||
line-height: $line-height-large;
|
||||
word-wrap: break-word;
|
||||
max-width: 640px;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
.date {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
|
||||
.search-highlight {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
}
|
||||
|
||||
.like-count {
|
||||
display: block;
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
margin-top: 0.25em;
|
||||
.d-icon {
|
||||
color: $love;
|
||||
color: var(--love);
|
||||
font-size: $font-down-1;
|
||||
}
|
||||
}
|
||||
|
||||
a.search-link:visited .topic-title {
|
||||
color: $tertiary-high;
|
||||
color: var(--tertiary-high);
|
||||
}
|
||||
.search-link {
|
||||
.topic-title {
|
||||
|
|
@ -263,7 +263,7 @@
|
|||
display: inline-block;
|
||||
font-size: 1.3em;
|
||||
line-height: $line-height-medium;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
span {
|
||||
line-height: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
left: 20px;
|
||||
z-index: z("dropdown");
|
||||
box-shadow: shadow("card");
|
||||
background-color: $secondary;
|
||||
background-color: var(--secondary);
|
||||
padding: 8px 8px 4px 8px;
|
||||
width: 300px;
|
||||
display: none;
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
.date {
|
||||
font-weight: normal;
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
display: inline-block;
|
||||
position: absolute;
|
||||
margin: 5px 5px 5px 15px;
|
||||
color: $success;
|
||||
color: var(--success);
|
||||
opacity: 1;
|
||||
transition: opacity 0.25s;
|
||||
font-size: $font-0;
|
||||
|
|
@ -49,15 +49,15 @@
|
|||
margin-right: 8px;
|
||||
font-size: $font-up-4;
|
||||
.d-icon {
|
||||
color: $tertiary-or-white;
|
||||
color: var(--tertiary-or-white);
|
||||
}
|
||||
.d-icon-fab-facebook {
|
||||
// Adheres to Facebook brand guidelines
|
||||
color: $facebook-or-white;
|
||||
color: var(--facebook-or-white);
|
||||
}
|
||||
.d-icon-fab-twitter-square {
|
||||
// Adheres to Twitter brand guidelines
|
||||
color: $twitter-or-white;
|
||||
color: var(--twitter-or-white);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
|
||||
.close-share {
|
||||
font-size: $font-up-3;
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
}
|
||||
|
||||
.new-topic {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.shared-draft-controls {
|
||||
background-color: $tertiary-low;
|
||||
background-color: var(--tertiary-low);
|
||||
padding: 1em;
|
||||
|
||||
.publish-field {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
.tags-list {
|
||||
margin-top: 2em;
|
||||
padding-bottom: 1em;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
}
|
||||
|
||||
#list-area .tags-list h3 {
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
|
||||
.discourse-tag-count {
|
||||
font-size: $font-down-1;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
line-height: $line-height-small;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -77,15 +77,15 @@
|
|||
|
||||
.discourse-tag {
|
||||
margin: 0;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
|
||||
&:visited,
|
||||
&:hover {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
.extra-info-wrapper & {
|
||||
color: $header-primary_high !important;
|
||||
color: var(--header_primary-high) !important;
|
||||
}
|
||||
|
||||
&.large {
|
||||
|
|
@ -93,12 +93,12 @@
|
|||
}
|
||||
|
||||
&.box {
|
||||
background-color: $primary-low;
|
||||
color: $primary-high;
|
||||
background-color: var(--primary-low);
|
||||
color: var(--primary-high);
|
||||
padding: 2px 8px;
|
||||
.extra-info-wrapper & {
|
||||
background-color: $header_primary-low;
|
||||
color: $header_primary-medium;
|
||||
background-color: var(--header_primary-low);
|
||||
color: var(--header_primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
&.simple:visited,
|
||||
&.simple:hover {
|
||||
margin-right: 0;
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
|
||||
&.bullet {
|
||||
|
|
@ -114,7 +114,7 @@
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
&:before {
|
||||
background: $primary-low-mid;
|
||||
background: var(--primary-low-mid);
|
||||
margin-right: 5px;
|
||||
position: relative;
|
||||
width: 9px;
|
||||
|
|
@ -179,7 +179,7 @@
|
|||
}
|
||||
|
||||
header .discourse-tag {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
.list-tags {
|
||||
|
|
@ -209,7 +209,7 @@ header .discourse-tag {
|
|||
|
||||
.autocomplete {
|
||||
a {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
.d-icon-tag {
|
||||
|
|
@ -274,7 +274,7 @@ header .discourse-tag {
|
|||
section.tag-info {
|
||||
margin: 1em 0;
|
||||
padding: 2em;
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
|
||||
.field {
|
||||
margin: 0 0 0.5em;
|
||||
|
|
@ -306,7 +306,7 @@ section.tag-info {
|
|||
border: none;
|
||||
@include clearfix;
|
||||
a {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
$discourse-tooltip-background: $secondary;
|
||||
$discourse-tooltip-border: $primary-medium;
|
||||
$discourse-tooltip-background: var(--secondary);
|
||||
$discourse-tooltip-border: var(--primary-medium);
|
||||
|
||||
#discourse-tooltip {
|
||||
background-color: $discourse-tooltip-background;
|
||||
|
|
@ -53,7 +53,7 @@ $discourse-tooltip-border: $primary-medium;
|
|||
padding: 1em;
|
||||
max-width: 250px;
|
||||
font-size: $font-down-1;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
box-shadow: shadow("dropdown");
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
display: block;
|
||||
padding: 1.25em 0;
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
}
|
||||
.badge-wrapper {
|
||||
margin-right: 0;
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
overflow: visible;
|
||||
}
|
||||
.modal-footer {
|
||||
background: $secondary;
|
||||
background: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -101,31 +101,31 @@
|
|||
// Select posts
|
||||
|
||||
.selected-posts {
|
||||
border: 1px solid $tertiary-medium;
|
||||
background-color: $tertiary-low;
|
||||
border: 1px solid var(--tertiary-medium);
|
||||
background-color: var(--tertiary-low);
|
||||
.btn {
|
||||
border: none;
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
font-weight: normal;
|
||||
margin-bottom: 10px;
|
||||
&:not(.btn-danger) {
|
||||
background: $tertiary;
|
||||
border-color: $tertiary;
|
||||
background: var(--tertiary);
|
||||
border-color: var(--tertiary);
|
||||
&[href] {
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
}
|
||||
&:hover {
|
||||
color: $secondary;
|
||||
background: $tertiary-high;
|
||||
color: var(--secondary);
|
||||
background: var(--tertiary-high);
|
||||
}
|
||||
&:active {
|
||||
@include linear-gradient($tertiary-hover, $tertiary);
|
||||
color: $secondary;
|
||||
@include linear-gradient(var(--tertiary-hover), var(--tertiary));
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
&[disabled] {
|
||||
text-shadow: 0 1px 0 rgba($primary, 0.2);
|
||||
@include linear-gradient($tertiary, $tertiary-hover);
|
||||
text-shadow: 0 1px 0 rgba(var(--primary-rgb), 0.2);
|
||||
@include linear-gradient(var(--tertiary), var(--tertiary-hover));
|
||||
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.33);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@ $quote-share-maxwidth: 150px;
|
|||
|
||||
.button-count.has-pending {
|
||||
span {
|
||||
background-color: $danger;
|
||||
color: $secondary;
|
||||
background-color: var(--danger);
|
||||
color: var(--secondary);
|
||||
border-radius: 10px;
|
||||
padding: 0.25em 0.5em;
|
||||
display: inline-block;
|
||||
|
|
@ -25,9 +25,9 @@ $quote-share-maxwidth: 150px;
|
|||
content: "";
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
$primary-very-low 10%,
|
||||
$primary-low 28%,
|
||||
$primary-very-low 43%
|
||||
var(--primary-very-low) 10%,
|
||||
var(--primary-low) 28%,
|
||||
var(--primary-very-low) 43%
|
||||
);
|
||||
height: 45px;
|
||||
width: 700px;
|
||||
|
|
@ -58,12 +58,12 @@ $quote-share-maxwidth: 150px;
|
|||
@include ellipsis;
|
||||
vertical-align: middle;
|
||||
a {
|
||||
color: $primary-high-or-secondary-low;
|
||||
color: var(--primary-high-or-secondary-low);
|
||||
}
|
||||
}
|
||||
.fa {
|
||||
font-size: $font-down-1;
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
}
|
||||
.svg-icon-title {
|
||||
margin-left: 3px;
|
||||
|
|
@ -72,7 +72,7 @@ $quote-share-maxwidth: 150px;
|
|||
.new_user a,
|
||||
.user-title,
|
||||
.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 {
|
||||
background-color: $success-low;
|
||||
background-color: var(--success-low);
|
||||
}
|
||||
del {
|
||||
background-color: $danger-low;
|
||||
background-color: var(--danger-low);
|
||||
}
|
||||
// Prevents users from breaking posts with tag nesting
|
||||
big {
|
||||
|
|
@ -164,7 +164,7 @@ $quote-share-maxwidth: 150px;
|
|||
// add staff color
|
||||
.moderator {
|
||||
.regular > .cooked {
|
||||
background-color: $highlight-low-or-medium;
|
||||
background-color: var(--highlight-low-or-medium);
|
||||
padding: 10px;
|
||||
img:not(.thumbnail) {
|
||||
max-width: 100%;
|
||||
|
|
@ -173,9 +173,9 @@ $quote-share-maxwidth: 150px;
|
|||
}
|
||||
.clearfix > .topic-meta-data > .names {
|
||||
span.user-title {
|
||||
color: $primary-high-or-secondary-low;
|
||||
color: var(--primary-high-or-secondary-low);
|
||||
a {
|
||||
background-color: $highlight-low-or-medium;
|
||||
background-color: var(--highlight-low-or-medium);
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
|
@ -210,7 +210,7 @@ aside.quote {
|
|||
.title {
|
||||
@include post-aside;
|
||||
|
||||
color: $primary-high-or-secondary-low;
|
||||
color: var(--primary-high-or-secondary-low);
|
||||
padding: 12px 12px 0px 12px;
|
||||
// blockquote is underneath this and has top margin
|
||||
.avatar {
|
||||
|
|
@ -239,11 +239,11 @@ blockquote {
|
|||
|
||||
.quote-controls,
|
||||
.quote-controls .d-icon {
|
||||
color: $primary-low-mid-or-secondary-high;
|
||||
color: var(--primary-low-mid-or-secondary-high);
|
||||
}
|
||||
|
||||
.cooked .highlight {
|
||||
background-color: $tertiary-low;
|
||||
background-color: var(--tertiary-low);
|
||||
padding: 2px;
|
||||
margin: -2px;
|
||||
}
|
||||
|
|
@ -253,7 +253,7 @@ blockquote {
|
|||
}
|
||||
|
||||
.post-action {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
.undo-action,
|
||||
.act-action {
|
||||
margin-left: 5px;
|
||||
|
|
@ -262,7 +262,7 @@ blockquote {
|
|||
|
||||
.small-user-list .unknown {
|
||||
display: inline-block;
|
||||
background-color: $primary-low;
|
||||
background-color: var(--primary-low);
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50%;
|
||||
|
|
@ -297,7 +297,7 @@ blockquote {
|
|||
position: absolute;
|
||||
z-index: z("dropdown");
|
||||
opacity: 0.9;
|
||||
background-color: $secondary-high;
|
||||
background-color: var(--secondary-high);
|
||||
|
||||
&.visible {
|
||||
display: inline-flex;
|
||||
|
|
@ -307,7 +307,7 @@ blockquote {
|
|||
.btn:hover,
|
||||
.d-icon,
|
||||
.btn:hover .d-icon {
|
||||
color: $secondary-or-primary;
|
||||
color: var(--secondary-or-primary);
|
||||
}
|
||||
|
||||
.insert-quote + .quote-sharing {
|
||||
|
|
@ -359,8 +359,8 @@ blockquote {
|
|||
}
|
||||
|
||||
.topic-map {
|
||||
background: $primary-very-low;
|
||||
border: 1px solid $primary-low;
|
||||
background: var(--primary-very-low);
|
||||
border: 1px solid var(--primary-low);
|
||||
border-top: none; // would cause double top border
|
||||
|
||||
.avatars {
|
||||
|
|
@ -387,7 +387,7 @@ blockquote {
|
|||
}
|
||||
|
||||
section {
|
||||
border-top: 1px solid $primary-low;
|
||||
border-top: 1px solid var(--primary-low);
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
@ -397,7 +397,7 @@ blockquote {
|
|||
|
||||
h3 {
|
||||
margin-bottom: 4px;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
line-height: $line-height-large;
|
||||
font-weight: normal;
|
||||
font-size: $font-0;
|
||||
|
|
@ -405,7 +405,7 @@ blockquote {
|
|||
|
||||
h4 {
|
||||
margin: 1px 0 2px 0;
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
font-weight: normal;
|
||||
font-size: $font-down-1;
|
||||
line-height: $line-height-small;
|
||||
|
|
@ -413,7 +413,7 @@ blockquote {
|
|||
|
||||
span.domain {
|
||||
font-size: $font-down-2;
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
}
|
||||
|
||||
td {
|
||||
|
|
@ -461,7 +461,7 @@ blockquote {
|
|||
}
|
||||
|
||||
.user {
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
border-radius: 0.25em;
|
||||
padding: 0;
|
||||
margin: 0.125em 0.25em 0.125em 0;
|
||||
|
|
@ -471,10 +471,10 @@ blockquote {
|
|||
|
||||
.user-link,
|
||||
.group-link {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -572,7 +572,7 @@ blockquote {
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
bottom: -3px;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
&.rounded {
|
||||
background-size: 12px 12px;
|
||||
border-radius: 8px;
|
||||
|
|
@ -610,7 +610,7 @@ blockquote {
|
|||
overflow: hidden;
|
||||
}
|
||||
.group-request {
|
||||
border-top: 1px solid $primary-low;
|
||||
border-top: 1px solid var(--primary-low);
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
&.highlighted {
|
||||
|
|
@ -641,11 +641,11 @@ blockquote {
|
|||
|
||||
.wiki,
|
||||
.last-wiki-edit {
|
||||
color: $wiki;
|
||||
color: var(--wiki);
|
||||
}
|
||||
|
||||
&.via-email {
|
||||
color: $primary-low-mid-or-secondary-high;
|
||||
color: var(--primary-low-mid-or-secondary-high);
|
||||
}
|
||||
&.raw-email {
|
||||
cursor: pointer;
|
||||
|
|
@ -657,8 +657,8 @@ pre {
|
|||
word-wrap: normal;
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
color: $primary;
|
||||
background: $blend-primary-secondary-5;
|
||||
color: var(--primary);
|
||||
background: var(--blend-primary-secondary-5);
|
||||
max-height: 500px;
|
||||
}
|
||||
}
|
||||
|
|
@ -680,7 +680,7 @@ pre {
|
|||
|
||||
&.copied {
|
||||
.d-icon {
|
||||
color: $tertiary;
|
||||
color: var(--tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -693,12 +693,12 @@ pre {
|
|||
|
||||
kbd {
|
||||
align-items: center;
|
||||
border: 1px solid $primary-low-mid;
|
||||
background: $primary-very-low;
|
||||
border: 1px solid var(--primary-low-mid);
|
||||
background: var(--primary-very-low);
|
||||
border-bottom-width: 2px;
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
display: inline-flex;
|
||||
font-size: $font-down-1;
|
||||
justify-content: center;
|
||||
|
|
@ -727,7 +727,7 @@ blockquote > *:last-child {
|
|||
|
||||
.gap {
|
||||
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;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
|
|
@ -750,7 +750,7 @@ blockquote > *:last-child {
|
|||
text-align: left;
|
||||
padding-bottom: 2px;
|
||||
font-weight: bold;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -763,7 +763,7 @@ blockquote > *:last-child {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 758px;
|
||||
border-top: 1px solid $primary-low;
|
||||
border-top: 1px solid var(--primary-low);
|
||||
.topic-avatar {
|
||||
align-self: flex-start;
|
||||
padding: 0.7em 0;
|
||||
|
|
@ -774,16 +774,16 @@ blockquote > *:last-child {
|
|||
font-size: 2em;
|
||||
width: 45px;
|
||||
text-align: center;
|
||||
color: $primary-low-mid;
|
||||
color: var(--primary-low-mid);
|
||||
}
|
||||
}
|
||||
|
||||
.small-action.deleted {
|
||||
background-color: $danger-low-mid;
|
||||
background-color: var(--danger-low-mid);
|
||||
}
|
||||
|
||||
.small-action-desc.timegap {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
.small-action-desc {
|
||||
|
|
@ -795,7 +795,7 @@ blockquote > *:last-child {
|
|||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-size: $font-down-1;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
min-width: 0; // Allows flex container to shrink
|
||||
|
||||
.custom-message {
|
||||
|
|
@ -843,7 +843,7 @@ blockquote > *:last-child {
|
|||
.topic-body {
|
||||
.cooked {
|
||||
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
|
||||
font-weight: bold;
|
||||
font-size: 0.93em;
|
||||
color: $primary-high-or-secondary-low;
|
||||
color: var(--primary-high-or-secondary-low);
|
||||
padding: 0 4px 1px;
|
||||
background: $primary-low;
|
||||
background: var(--primary-low);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
span.mention {
|
||||
font-weight: bold;
|
||||
font-size: 0.93em;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
a.mention-group {
|
||||
font-weight: bold;
|
||||
font-size: 0.93em;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
|
||||
&.notify,
|
||||
.small-action-desc & {
|
||||
color: $primary-high-or-secondary-low;
|
||||
color: var(--primary-high-or-secondary-low);
|
||||
padding: 2px 4px;
|
||||
background: $primary-low;
|
||||
background: var(--primary-low);
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
|
@ -901,7 +901,7 @@ a.mention-group {
|
|||
}
|
||||
|
||||
> .d-icon {
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
margin-right: 6px;
|
||||
font-size: $font-0;
|
||||
line-height: $line-height-large;
|
||||
|
|
@ -917,7 +917,7 @@ a.mention-group {
|
|||
|
||||
> span.help {
|
||||
display: inline-block;
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
font-size: $font-down-1;
|
||||
font-style: italic;
|
||||
line-height: $line-height-large;
|
||||
|
|
@ -932,8 +932,8 @@ a.mention-group {
|
|||
|
||||
.broken-image {
|
||||
display: inline-flex;
|
||||
color: $primary-low-mid-or-secondary-high;
|
||||
border: 1px solid $primary-low;
|
||||
color: var(--primary-low-mid-or-secondary-high);
|
||||
border: 1px solid var(--primary-low);
|
||||
font-size: $font-up-5;
|
||||
|
||||
.d-icon {
|
||||
|
|
@ -960,9 +960,9 @@ a.mention-group {
|
|||
article.boxed {
|
||||
.select-posts {
|
||||
button.select-post {
|
||||
background-color: $tertiary;
|
||||
color: $secondary;
|
||||
border-color: $tertiary;
|
||||
background-color: var(--tertiary);
|
||||
color: var(--secondary);
|
||||
border-color: var(--tertiary);
|
||||
}
|
||||
}
|
||||
.topic-body {
|
||||
|
|
@ -982,8 +982,8 @@ a.mention-group {
|
|||
height: 100px;
|
||||
button {
|
||||
margin-left: 8px;
|
||||
background-color: $primary-low;
|
||||
color: $primary;
|
||||
background-color: var(--primary-low);
|
||||
color: var(--primary);
|
||||
box-shadow: shadow("dropdown");
|
||||
}
|
||||
}
|
||||
|
|
@ -1014,8 +1014,8 @@ a.mention-group {
|
|||
|
||||
.post-notice {
|
||||
align-items: center;
|
||||
background-color: $tertiary-low;
|
||||
border-top: 1px solid $primary-low;
|
||||
background-color: var(--tertiary-low);
|
||||
border-top: 1px solid var(--primary-low);
|
||||
display: flex;
|
||||
max-width: calc(
|
||||
#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{$topic-avatar-width} -
|
||||
|
|
@ -1025,10 +1025,10 @@ a.mention-group {
|
|||
|
||||
&.old {
|
||||
background-color: unset;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1038,7 +1038,7 @@ a.mention-group {
|
|||
|
||||
.d-icon {
|
||||
font-size: 2em;
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
margin-right: 0.65em;
|
||||
}
|
||||
}
|
||||
|
|
@ -1081,7 +1081,7 @@ a.mention-group {
|
|||
margin: 1em 0;
|
||||
|
||||
.reason {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
display: inline-flex;
|
||||
margin: 0;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@
|
|||
margin-right: 0;
|
||||
}
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -135,7 +135,7 @@ a.badge-category {
|
|||
}
|
||||
|
||||
.private-message-glyph {
|
||||
color: $primary-low-mid-or-secondary-high;
|
||||
color: var(--primary-low-mid-or-secondary-high);
|
||||
}
|
||||
|
||||
.private-message-glyph-wrapper {
|
||||
|
|
@ -181,7 +181,7 @@ a.badge-category {
|
|||
justify-content: space-between;
|
||||
|
||||
padding: 0.5em;
|
||||
background-color: $highlight-medium;
|
||||
background-color: var(--highlight-medium);
|
||||
margin-top: 1em;
|
||||
max-width: 757px;
|
||||
}
|
||||
|
|
@ -230,13 +230,13 @@ a.badge-category {
|
|||
.post-links {
|
||||
margin-top: 1em;
|
||||
padding-top: 1em;
|
||||
border-top: 1px solid $primary-low;
|
||||
border-top: 1px solid var(--primary-low);
|
||||
li:last-of-type {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
.expand-links {
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
}
|
||||
.track-link {
|
||||
display: flex;
|
||||
|
|
@ -251,7 +251,7 @@ a.badge-category {
|
|||
li {
|
||||
margin-bottom: 0.5em;
|
||||
a[href] {
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
}
|
||||
.clicks {
|
||||
margin-left: 0.5em;
|
||||
|
|
@ -265,14 +265,14 @@ a.badge-category {
|
|||
}
|
||||
a.reply-new {
|
||||
.d-icon {
|
||||
background: $secondary;
|
||||
background: var(--secondary);
|
||||
border-radius: 20px;
|
||||
transition: all linear 0.15s;
|
||||
}
|
||||
&:hover {
|
||||
color: $tertiary;
|
||||
color: var(--tertiary);
|
||||
.d-icon {
|
||||
background: $tertiary-low;
|
||||
background: var(--tertiary-low);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -281,7 +281,7 @@ a.badge-category {
|
|||
a.topic-featured-link {
|
||||
display: inline-block;
|
||||
text-transform: lowercase;
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
font-size: 0.875rem;
|
||||
.d-icon {
|
||||
margin-right: 3px;
|
||||
|
|
@ -315,8 +315,8 @@ a.topic-featured-link {
|
|||
.is-public {
|
||||
padding: 0.25em 0.5em;
|
||||
font-size: $font-down-2;
|
||||
background: $tertiary;
|
||||
color: $secondary;
|
||||
background: var(--tertiary);
|
||||
color: var(--secondary);
|
||||
border-radius: 3px;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.uploaded-image-preview {
|
||||
background: $primary-medium center;
|
||||
background: var(--primary-medium) center;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -31,14 +31,14 @@
|
|||
margin-left: auto;
|
||||
|
||||
.d-icon {
|
||||
color: $primary-low;
|
||||
color: var(--primary-low);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: none;
|
||||
|
||||
.d-icon {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
/* Default badge styles. */
|
||||
.user-badge {
|
||||
padding: 3px 8px;
|
||||
color: $primary;
|
||||
border: 1px solid $primary-low;
|
||||
color: var(--primary);
|
||||
border: 1px solid var(--primary-low);
|
||||
line-height: $line-height-large;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background-color: $secondary;
|
||||
background-color: var(--secondary);
|
||||
margin: 0 0 3px;
|
||||
|
||||
img {
|
||||
|
|
@ -19,20 +19,20 @@
|
|||
}
|
||||
|
||||
&.badge-type-gold .fa {
|
||||
color: $gold !important;
|
||||
color: var(--gold) !important;
|
||||
}
|
||||
|
||||
&.badge-type-silver .fa {
|
||||
color: $silver !important;
|
||||
color: var(--silver) !important;
|
||||
}
|
||||
|
||||
&.badge-type-bronze .fa {
|
||||
color: $bronze !important;
|
||||
color: var(--bronze) !important;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $primary-medium;
|
||||
background-color: $primary-very-low;
|
||||
color: var(--primary-medium);
|
||||
background-color: var(--primary-very-low);
|
||||
.fa {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
|
@ -123,8 +123,8 @@
|
|||
.badge-card {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background-color: $primary-very-low;
|
||||
border: 1px solid $primary-low;
|
||||
background-color: var(--primary-very-low);
|
||||
border: 1px solid var(--primary-low);
|
||||
margin-bottom: 2vh;
|
||||
transition: box-shadow 0.25s;
|
||||
|
||||
|
|
@ -139,7 +139,7 @@
|
|||
right: 5px;
|
||||
top: 5px;
|
||||
font-weight: bold;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
font-size: $font-up-2;
|
||||
}
|
||||
|
||||
|
|
@ -150,7 +150,7 @@
|
|||
padding: 0 10%;
|
||||
|
||||
.badge-link {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.badge-icon {
|
||||
|
|
@ -188,7 +188,7 @@
|
|||
flex: 1 1 auto;
|
||||
align-items: center;
|
||||
padding: 1em 1.5em 1em 0;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
@media screen and (max-width: 600px) {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
|
@ -254,7 +254,7 @@
|
|||
|
||||
.badge-groups {
|
||||
margin: 20px 0;
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
h3 {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
|
@ -295,7 +295,7 @@
|
|||
|
||||
.grant-info-item {
|
||||
margin-bottom: 1em;
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
&:first-of-type {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
|
@ -303,7 +303,7 @@
|
|||
|
||||
.badge-set-title {
|
||||
padding: 1.5em;
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
|
||||
.user-content {
|
||||
padding: 0;
|
||||
|
|
@ -329,16 +329,16 @@
|
|||
text-align: center;
|
||||
.fa {
|
||||
font-size: 0.9em;
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.check-display.status-checked {
|
||||
background-color: $success;
|
||||
background-color: var(--success);
|
||||
}
|
||||
|
||||
.check-display.status-unchecked {
|
||||
background-color: $danger;
|
||||
background-color: var(--danger);
|
||||
}
|
||||
|
||||
.hyperlink {
|
||||
|
|
|
|||
|
|
@ -62,13 +62,13 @@
|
|||
}
|
||||
|
||||
.d-icon-heart {
|
||||
color: $love;
|
||||
color: var(--love);
|
||||
}
|
||||
|
||||
.user-notifications-filter-select-kit {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-bottom: 0.5px solid $primary-low;
|
||||
border-bottom: 0.5px solid var(--primary-low);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
.secondary {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
border-top: 1px solid $primary-low;
|
||||
border-top: 1px solid var(--primary-low);
|
||||
|
||||
.btn {
|
||||
padding: 4px 12px;
|
||||
|
|
@ -117,7 +117,7 @@
|
|||
dd {
|
||||
padding: 0;
|
||||
margin: 0 15px 0 0;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
|
||||
&.groups {
|
||||
span:not(:last-of-type) {
|
||||
|
|
@ -133,15 +133,15 @@
|
|||
}
|
||||
|
||||
dt {
|
||||
color: $secondary-medium;
|
||||
color: var(--secondary-medium);
|
||||
margin-right: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
background: rgba($secondary, 0.8);
|
||||
border-bottom: 1px solid $primary-low;
|
||||
background: rgba(var(--secondary-rgb), 0.8);
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
|
||||
h1 {
|
||||
font-size: $font-up-5;
|
||||
|
|
@ -175,7 +175,7 @@
|
|||
}
|
||||
|
||||
.suspended {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.primary {
|
||||
|
|
@ -224,7 +224,7 @@
|
|||
&.collapsed-info {
|
||||
.details {
|
||||
margin-top: 0;
|
||||
background: rgba($secondary, 0.8);
|
||||
background: rgba(var(--secondary-rgb), 0.8);
|
||||
|
||||
.bio {
|
||||
display: none;
|
||||
|
|
@ -266,8 +266,8 @@
|
|||
}
|
||||
|
||||
.staff-counters {
|
||||
background: $primary;
|
||||
color: $secondary;
|
||||
background: var(--primary);
|
||||
color: var(--secondary);
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
margin-bottom: 16px;
|
||||
|
|
@ -277,7 +277,7 @@
|
|||
align-items: baseline;
|
||||
flex: 0 1 auto;
|
||||
margin: 0 10px 0 0;
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
|
||||
span {
|
||||
padding: 0 7px 1px;
|
||||
|
|
@ -292,7 +292,7 @@
|
|||
}
|
||||
|
||||
.helpful-flags {
|
||||
background-color: $success;
|
||||
background-color: var(--success);
|
||||
}
|
||||
|
||||
.flagged-posts {
|
||||
|
|
@ -300,15 +300,15 @@
|
|||
}
|
||||
|
||||
.warnings-received {
|
||||
background-color: $danger-medium;
|
||||
background-color: var(--danger-medium);
|
||||
}
|
||||
|
||||
.deleted-posts {
|
||||
background-color: $danger-medium;
|
||||
background-color: var(--danger-medium);
|
||||
}
|
||||
|
||||
.suspensions {
|
||||
background-color: $danger;
|
||||
background-color: var(--danger);
|
||||
}
|
||||
|
||||
.user-field {
|
||||
|
|
@ -322,7 +322,7 @@
|
|||
}
|
||||
|
||||
.instructions {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
font-size: $font-down-1;
|
||||
|
|
@ -342,7 +342,7 @@
|
|||
.user-field {
|
||||
.required {
|
||||
vertical-align: top;
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
font-weight: bold;
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
|
|
@ -393,7 +393,7 @@
|
|||
}
|
||||
}
|
||||
.error {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
margin: 0;
|
||||
max-width: calc(#{$label-max-width} - 20px);
|
||||
grid-column-start: 2;
|
||||
|
|
@ -442,7 +442,7 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -453,7 +453,7 @@
|
|||
}
|
||||
|
||||
.label {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -465,13 +465,13 @@
|
|||
}
|
||||
|
||||
li {
|
||||
border-left: $primary-low solid 2px;
|
||||
border-left: var(--primary-low) solid 2px;
|
||||
padding: 5px 8px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.topic-info {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
@media all and (max-width: 600px) {
|
||||
|
|
@ -491,7 +491,7 @@
|
|||
.links-section {
|
||||
.domain {
|
||||
font-size: $font-down-1;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -520,7 +520,7 @@
|
|||
|
||||
.groups {
|
||||
.group-link {
|
||||
color: $tertiary;
|
||||
color: var(--tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -548,18 +548,18 @@
|
|||
}
|
||||
|
||||
.static {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
margin-bottom: 10px;
|
||||
font-size: $font-down-1;
|
||||
line-height: $line-height-large;
|
||||
|
||||
a[href] {
|
||||
color: $tertiary;
|
||||
color: var(--tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -568,9 +568,9 @@
|
|||
}
|
||||
|
||||
.warning {
|
||||
background-color: $danger-medium;
|
||||
background-color: var(--danger-medium);
|
||||
padding: 5px 8px;
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
width: 520px;
|
||||
}
|
||||
|
||||
|
|
@ -606,7 +606,7 @@
|
|||
display: inline-block;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -624,7 +624,7 @@
|
|||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
border-color: $primary-low;
|
||||
border-color: var(--primary-low);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -678,7 +678,7 @@
|
|||
}
|
||||
|
||||
span:first-child {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
// Can remove this once other languages have removed html from i18n values
|
||||
|
|
@ -703,7 +703,7 @@
|
|||
|
||||
.second-factor {
|
||||
&.instructions {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
font-size: $font-down-1;
|
||||
|
|
@ -733,7 +733,7 @@
|
|||
width: 60px;
|
||||
height: 60px;
|
||||
&:hover {
|
||||
box-shadow: 0 0 10px $primary;
|
||||
box-shadow: 0 0 10px var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,11 +42,11 @@
|
|||
&.bullet {
|
||||
margin-right: 12px;
|
||||
span.badge-category {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.extra-info-wrapper & {
|
||||
color: $header-primary;
|
||||
color: var(--header-primary);
|
||||
}
|
||||
}
|
||||
.badge-category-parent-bg,
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
}
|
||||
}
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -115,13 +115,13 @@
|
|||
margin-right: 5px;
|
||||
|
||||
span.badge-category {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
padding: 1px 3px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.extra-info-wrapper & {
|
||||
color: $header-primary;
|
||||
color: var(--header-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -140,7 +140,7 @@
|
|||
// ----- No category style
|
||||
|
||||
&.none {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -165,31 +165,31 @@
|
|||
@extend %badge;
|
||||
padding: 0.21em 0.42em;
|
||||
min-width: 0.5em;
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
font-size: $font-down-2;
|
||||
line-height: $line-height-small;
|
||||
text-align: center;
|
||||
background-color: $primary-low-mid-or-secondary-low;
|
||||
background-color: var(--primary-low-mid-or-secondary-low);
|
||||
&[href] {
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
// New posts
|
||||
|
||||
&.new-posts,
|
||||
&.unread-posts {
|
||||
background-color: $tertiary-med-or-tertiary;
|
||||
color: $secondary;
|
||||
background-color: var(--tertiary-med-or-tertiary);
|
||||
color: var(--secondary);
|
||||
font-weight: dark-light-choose(normal, bold);
|
||||
}
|
||||
|
||||
&.new-topic {
|
||||
background-color: transparent;
|
||||
color: $tertiary-high;
|
||||
color: var(--tertiary-high);
|
||||
font-weight: normal;
|
||||
font-size: $font-down-1;
|
||||
}
|
||||
|
|
@ -203,9 +203,9 @@
|
|||
|
||||
&.clicks {
|
||||
font-weight: normal;
|
||||
background-color: $primary-low;
|
||||
background-color: var(--primary-low);
|
||||
top: -1px;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
position: relative;
|
||||
border: none;
|
||||
}
|
||||
|
|
@ -219,7 +219,7 @@
|
|||
font-size: $font-0;
|
||||
line-height: $line-height-small;
|
||||
&[href] {
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -229,8 +229,8 @@
|
|||
.badge-group {
|
||||
@extend %badge;
|
||||
padding: 2px 5px;
|
||||
color: $primary;
|
||||
background-color: $primary-low;
|
||||
border-color: $primary-low;
|
||||
color: var(--primary);
|
||||
background-color: var(--primary-low);
|
||||
border-color: var(--primary-low);
|
||||
font-size: $font-down-1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
|
||||
#banner {
|
||||
padding: 0.5em 1em;
|
||||
background: $tertiary-low;
|
||||
color: $primary;
|
||||
background: var(--tertiary-low);
|
||||
color: var(--primary);
|
||||
z-index: z("base") + 1;
|
||||
overflow: auto;
|
||||
|
||||
|
|
@ -14,11 +14,11 @@
|
|||
}
|
||||
|
||||
.close {
|
||||
color: $primary-low-mid;
|
||||
color: var(--primary-low-mid);
|
||||
padding-left: 5px;
|
||||
float: right;
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -29,6 +29,6 @@
|
|||
|
||||
#banner-content {
|
||||
hr {
|
||||
border-color: $primary-medium;
|
||||
border-color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,13 +33,13 @@
|
|||
|
||||
.custom-date-time-wrap {
|
||||
padding: 1em 1em 0.5em;
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
border-top: none;
|
||||
margin-top: -0.667em;
|
||||
background: $primary-very-low;
|
||||
background: var(--primary-very-low);
|
||||
.d-icon {
|
||||
padding: 0 0.75em 0 0;
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
margin-top: -0.5em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
@mixin btn(
|
||||
$text-color: $primary,
|
||||
$bg-color: $primary-low,
|
||||
$icon-color: $primary-high,
|
||||
$hover-text-color: $secondary,
|
||||
$hover-bg-color: $primary-medium,
|
||||
$hover-icon-color: $primary-low
|
||||
$text-color: var(--primary),
|
||||
$bg-color: var(--primary-low),
|
||||
$icon-color: var(--primary-high),
|
||||
$hover-text-color: var(--secondary),
|
||||
$hover-bg-color: var(--primary-medium),
|
||||
$hover-icon-color: var(--primary-low)
|
||||
) {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
|
|
@ -107,11 +107,11 @@
|
|||
|
||||
.btn-primary {
|
||||
@include btn(
|
||||
$text-color: $secondary,
|
||||
$bg-color: $tertiary,
|
||||
$icon-color: $secondary,
|
||||
$hover-bg-color: $tertiary-hover,
|
||||
$hover-icon-color: $secondary
|
||||
$text-color: var(--secondary),
|
||||
$bg-color: var(--tertiary),
|
||||
$icon-color: var(--secondary),
|
||||
$hover-bg-color: var(--tertiary-hover),
|
||||
$hover-icon-color: var(--secondary)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -120,11 +120,11 @@
|
|||
|
||||
.btn-danger {
|
||||
@include btn(
|
||||
$text-color: $secondary,
|
||||
$bg-color: $danger,
|
||||
$icon-color: $danger-low,
|
||||
$hover-bg-color: $danger-hover,
|
||||
$hover-icon-color: $danger-low
|
||||
$text-color: var(--secondary),
|
||||
$bg-color: var(--danger),
|
||||
$icon-color: var(--danger-low),
|
||||
$hover-bg-color: var(--danger-hover),
|
||||
$hover-icon-color: var(--danger-low)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -133,21 +133,21 @@
|
|||
|
||||
.btn.cancel {
|
||||
@include btn(
|
||||
$text-color: $secondary,
|
||||
$bg-color: $danger,
|
||||
$icon-color: $secondary,
|
||||
$hover-bg-color: $danger-hover,
|
||||
$hover-icon-color: $secondary
|
||||
$text-color: var(--secondary),
|
||||
$bg-color: var(--danger),
|
||||
$icon-color: var(--secondary),
|
||||
$hover-bg-color: var(--danger-hover),
|
||||
$hover-icon-color: var(--secondary)
|
||||
);
|
||||
}
|
||||
|
||||
.btn.ok {
|
||||
@include btn(
|
||||
$text-color: $secondary,
|
||||
$bg-color: $success,
|
||||
$icon-color: $secondary,
|
||||
$hover-bg-color: $success-hover,
|
||||
$hover-icon-color: $secondary
|
||||
$text-color: var(--secondary),
|
||||
$bg-color: var(--success),
|
||||
$icon-color: var(--secondary),
|
||||
$hover-bg-color: var(--success-hover),
|
||||
$hover-icon-color: var(--secondary)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -164,56 +164,56 @@
|
|||
color: #fff;
|
||||
}
|
||||
&[href] {
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
}
|
||||
&:before {
|
||||
margin-right: 9px;
|
||||
font-size: $font-0;
|
||||
}
|
||||
&.google_oauth2 {
|
||||
background: $google;
|
||||
background: var(--google);
|
||||
color: #333;
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
// non-FA SVG icon for Google in login-buttons.hbs
|
||||
.d-icon {
|
||||
opacity: 0.9;
|
||||
}
|
||||
&:hover {
|
||||
color: currentColor;
|
||||
background: $google-hover;
|
||||
background: var(--google-hover);
|
||||
}
|
||||
}
|
||||
&.instagram {
|
||||
background: $instagram;
|
||||
background: var(--instagram);
|
||||
&:hover {
|
||||
background: $instagram-hover;
|
||||
background: var(--instagram-hover);
|
||||
}
|
||||
}
|
||||
&.facebook {
|
||||
background: $facebook;
|
||||
&:hover {
|
||||
background: $facebook-hover;
|
||||
background: var(--facebook-hover);
|
||||
}
|
||||
}
|
||||
&.cas {
|
||||
background: $cas;
|
||||
background: var(--cas);
|
||||
}
|
||||
&.twitter {
|
||||
background: $twitter;
|
||||
background: var(--twitter);
|
||||
&:hover {
|
||||
background: $twitter-hover;
|
||||
background: var(--twitter-hover);
|
||||
}
|
||||
}
|
||||
&.github {
|
||||
background: $github;
|
||||
background: var(--github);
|
||||
&:hover {
|
||||
background: $github-hover;
|
||||
background: var(--github-hover);
|
||||
}
|
||||
}
|
||||
&.discord {
|
||||
background: $discord;
|
||||
background: var(--discord);
|
||||
&:hover {
|
||||
background: $discord-hover;
|
||||
background: var(--discord-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -247,11 +247,11 @@
|
|||
line-height: $line-height-small;
|
||||
transition: color 0.25s, background 0.25s;
|
||||
.d-icon {
|
||||
color: $primary-low-mid;
|
||||
color: var(--primary-low-mid);
|
||||
}
|
||||
@include hover {
|
||||
.d-icon {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
&.close {
|
||||
|
|
@ -260,12 +260,12 @@
|
|||
background: transparent;
|
||||
font-size: $font-up-3;
|
||||
.d-icon {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
@include hover {
|
||||
background: transparent;
|
||||
.d-icon {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -276,7 +276,7 @@
|
|||
border: 0;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
color: $tertiary;
|
||||
color: var(--tertiary);
|
||||
&:focus {
|
||||
outline: 1px currentColor dotted;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: $primary-very-low;
|
||||
background: var(--primary-very-low);
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -13,21 +13,21 @@
|
|||
|
||||
&::-webkit-input-placeholder {
|
||||
font-size: $font-0;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
&::-ms-input-placeholder {
|
||||
font-size: $font-0;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
font-size: $font-0;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 1px solid $tertiary;
|
||||
outline: 1px solid var(--tertiary);
|
||||
outline-offset: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.d-date-time-input-range {
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
display: inline-flex;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.d-date-time-input {
|
||||
display: flex;
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ body.footer-nav-visible {
|
|||
}
|
||||
|
||||
.footer-nav {
|
||||
background-color: rgba($header_background, 0.9);
|
||||
background-color: rgba(var(--header_background-rgb), 0.9);
|
||||
box-shadow: shadow("footer-nav");
|
||||
height: $footer-nav-height;
|
||||
position: fixed;
|
||||
|
|
@ -32,7 +32,7 @@ body.footer-nav-visible {
|
|||
transition: all linear 0.1s;
|
||||
|
||||
.d-icon {
|
||||
color: $header_primary-medium;
|
||||
color: var(--header_primary-medium);
|
||||
}
|
||||
|
||||
&.visible {
|
||||
|
|
@ -63,7 +63,7 @@ body.footer-nav-visible {
|
|||
|
||||
@supports (-webkit-backdrop-filter: blur(10px)) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
@ -73,7 +73,7 @@ body.footer-nav-ipad {
|
|||
.footer-nav {
|
||||
bottom: auto;
|
||||
top: 0px;
|
||||
background-color: $header_background;
|
||||
background-color: var(--header_background);
|
||||
z-index: z("ipad-header-nav");
|
||||
padding-bottom: 0; // resets safe-area-inset-bottom
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
a.hashtag {
|
||||
color: $primary-or-primary-low-mid;
|
||||
color: var(--primary-or-primary-low-mid);
|
||||
font-weight: bold;
|
||||
|
||||
&:visited,
|
||||
&:hover {
|
||||
color: $primary-or-primary-low-mid;
|
||||
color: var(--primary-or-primary-low-mid);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
background-color: $secondary;
|
||||
background-color: var(--secondary);
|
||||
min-height: 30px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ignored-user-list-item {
|
||||
border: 1px solid $primary-medium;
|
||||
border: 1px solid var(--primary-medium);
|
||||
border-radius: 5px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -7,12 +7,12 @@
|
|||
.topic-list-item.selected td:first-child,
|
||||
.latest-topic-list-item.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,
|
||||
.topic-post.selected {
|
||||
box-shadow: -3px 0 0 $danger;
|
||||
box-shadow: -3px 0 0 var(--danger);
|
||||
}
|
||||
|
||||
.latest .featured-topic {
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
}
|
||||
|
||||
span {
|
||||
background: $primary-very-low;
|
||||
background: var(--primary-very-low);
|
||||
border-radius: 3px;
|
||||
display: inline-flex;
|
||||
margin: 0 6px;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
> a {
|
||||
border: none;
|
||||
padding: 6px 12px;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
font-size: $font-up-1;
|
||||
line-height: $line-height-small;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -43,14 +43,14 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
color: $quaternary;
|
||||
background-color: $quaternary-low;
|
||||
color: var(--quaternary);
|
||||
background-color: var(--quaternary-low);
|
||||
}
|
||||
}
|
||||
|
||||
a.active {
|
||||
color: $secondary;
|
||||
background-color: $quaternary;
|
||||
color: var(--secondary);
|
||||
background-color: var(--quaternary);
|
||||
|
||||
.d-icon {
|
||||
opacity: 1;
|
||||
|
|
@ -66,10 +66,10 @@
|
|||
@extend %nav;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background: $primary-low;
|
||||
background: var(--primary-low);
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
position: relative;
|
||||
|
||||
&:last-of-type {
|
||||
|
|
@ -87,11 +87,11 @@
|
|||
font-size: $font-up-1;
|
||||
line-height: $line-height-small;
|
||||
cursor: pointer;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
|
||||
&.active {
|
||||
color: $secondary;
|
||||
background-color: $quaternary;
|
||||
color: var(--secondary);
|
||||
background-color: var(--quaternary);
|
||||
|
||||
&::after {
|
||||
left: 90%;
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
content: " ";
|
||||
position: absolute;
|
||||
border: 8px solid transparent;
|
||||
border-left-color: $secondary;
|
||||
border-left-color: var(--secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
margin-bottom: 8px;
|
||||
|
||||
.post-date {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
font-size: $font-down-1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,33 +3,33 @@
|
|||
margin: 0.5em 0 1em 0;
|
||||
|
||||
.tap-tile {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
padding: 0.75em 0.25em;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
cursor: pointer;
|
||||
|
||||
&:first-child {
|
||||
border-top: 1px solid $primary-low;
|
||||
border-top: 1px solid var(--primary-low);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $tertiary-low;
|
||||
background-color: var(--tertiary-low);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $highlight-medium;
|
||||
background-color: var(--highlight-medium);
|
||||
}
|
||||
|
||||
.d-icon {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
margin: 0 0.5em 0 0;
|
||||
}
|
||||
|
||||
.tap-tile-title {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
&:not(.has-selection) {
|
||||
.select-kit-selected-name .name {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
}
|
||||
|
||||
&:focus {
|
||||
outline: 1px solid $tertiary;
|
||||
outline: 1px solid var(--tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,9 +20,9 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
|
|||
content: "";
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
$primary-very-low 10%,
|
||||
$primary-low 18%,
|
||||
$primary-very-low 33%
|
||||
var(--primary-very-low) 10%,
|
||||
var(--primary-low) 18%,
|
||||
var(--primary-very-low) 33%
|
||||
);
|
||||
height: $avatar_width;
|
||||
width: $card_width;
|
||||
|
|
@ -34,8 +34,8 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
|
|||
.group-card {
|
||||
width: $card_width;
|
||||
box-shadow: shadow("card");
|
||||
color: $primary;
|
||||
background: $secondary center center;
|
||||
color: var(--primary);
|
||||
background: var(--secondary) center center;
|
||||
background-size: cover;
|
||||
transition: opacity 0.2s, 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 {
|
||||
padding: 10px;
|
||||
background: rgba($secondary, 0.85);
|
||||
background: rgba(var(--secondary-rgb), 0.85);
|
||||
margin-top: 80px;
|
||||
&:after {
|
||||
content: "";
|
||||
|
|
@ -105,17 +105,17 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
|
|||
h1 {
|
||||
line-height: $line-height-medium;
|
||||
.d-icon {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
display: inline;
|
||||
margin-right: 0.5em;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
&.email,
|
||||
.desc,
|
||||
a {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
}
|
||||
h1,
|
||||
|
|
@ -127,7 +127,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
|
|||
h1,
|
||||
h2 {
|
||||
a {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
h2,
|
||||
|
|
@ -152,7 +152,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
|
|||
margin-top: $avatar_margin;
|
||||
}
|
||||
.new-user a {
|
||||
color: $primary-low-mid;
|
||||
color: var(--primary-low-mid);
|
||||
}
|
||||
}
|
||||
// user bio - suspension reason
|
||||
|
|
@ -161,7 +161,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
|
|||
overflow: auto;
|
||||
.bio {
|
||||
a {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
a.mention {
|
||||
|
|
@ -173,7 +173,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
|
|||
}
|
||||
}
|
||||
.suspended {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
.suspension-reason-title,
|
||||
.suspension-date {
|
||||
font-weight: bold;
|
||||
|
|
@ -187,10 +187,10 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
|
|||
// featured topic
|
||||
.featured-topic {
|
||||
.desc {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
a {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
@ -213,7 +213,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
|
|||
.website-name a,
|
||||
.location span {
|
||||
@include ellipsis;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
.location,
|
||||
.local-time,
|
||||
|
|
@ -235,9 +235,9 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
|
|||
align-items: flex-start;
|
||||
.user-badge {
|
||||
@include ellipsis;
|
||||
background: $primary-very-low;
|
||||
border: 1px solid $primary-low;
|
||||
color: $primary;
|
||||
background: var(--primary-very-low);
|
||||
border: 1px solid var(--primary-low);
|
||||
color: var(--primary);
|
||||
}
|
||||
.more-user-badges {
|
||||
a {
|
||||
|
|
@ -261,7 +261,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
|
|||
background-repeat: no-repeat;
|
||||
width: $avatar_width;
|
||||
height: $avatar_width;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
.d-icon {
|
||||
margin: auto;
|
||||
font-size: $avatar_width / 1.5;
|
||||
|
|
@ -277,7 +277,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
|
|||
overflow: auto;
|
||||
.bio {
|
||||
a {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
img {
|
||||
|
|
|
|||
|
|
@ -29,17 +29,17 @@
|
|||
|
||||
.username a {
|
||||
font-weight: bold;
|
||||
color: $primary-high-or-secondary-low;
|
||||
color: var(--primary-high-or-secondary-low);
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-left: 5px;
|
||||
color: $primary-high-or-secondary-low;
|
||||
color: var(--primary-high-or-secondary-low);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 3px;
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
min-width: 250px;
|
||||
|
||||
.granted-on {
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
}
|
||||
|
||||
.post-link {
|
||||
|
|
|
|||
|
|
@ -7,16 +7,16 @@
|
|||
// selectors below are its children
|
||||
.item,
|
||||
.user-stream-item {
|
||||
background-color: $secondary;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
background-color: var(--secondary);
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
padding: 1em 0.53em;
|
||||
|
||||
&.moderator-action {
|
||||
background-color: $highlight-medium;
|
||||
background-color: var(--highlight-medium);
|
||||
}
|
||||
|
||||
&.deleted {
|
||||
background-color: $danger-low-mid;
|
||||
background-color: var(--danger-low-mid);
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
|
|
@ -27,14 +27,14 @@
|
|||
|
||||
.type,
|
||||
span.name {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.time,
|
||||
.delete-info,
|
||||
.draft-type {
|
||||
float: right;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
font-size: $font-down-2;
|
||||
}
|
||||
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
float: right;
|
||||
margin-right: 0.5em;
|
||||
line-height: $line-height-small;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
.avatar-link {
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
}
|
||||
|
||||
.edit-reason {
|
||||
background-color: $highlight-medium;
|
||||
background-color: var(--highlight-medium);
|
||||
padding: 3px 5px 5px 5px;
|
||||
}
|
||||
|
||||
|
|
@ -95,14 +95,14 @@
|
|||
display: inline-block;
|
||||
|
||||
span:first-child {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
// common/base/header.scss
|
||||
.fa,
|
||||
.icon {
|
||||
color: $primary-med-or-secondary-med;
|
||||
color: var(--primary-med-or-secondary-med);
|
||||
font-size: $font-up-4;
|
||||
}
|
||||
}
|
||||
|
|
@ -111,12 +111,12 @@
|
|||
margin: 1em 0 0 0;
|
||||
font-size: $font-0;
|
||||
word-wrap: break-word;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
details.disabled {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -138,9 +138,9 @@
|
|||
.fa {
|
||||
width: 15px;
|
||||
display: inline-block;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
&.d-icon-heart {
|
||||
color: $love;
|
||||
color: var(--love);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.25em;
|
||||
background: $secondary;
|
||||
background: var(--secondary);
|
||||
z-index: z("dropdown");
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -28,22 +28,22 @@
|
|||
align-items: center;
|
||||
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
&.separator {
|
||||
padding: 0;
|
||||
background: $primary-low;
|
||||
background: var(--primary-low);
|
||||
margin: 0.25em 0;
|
||||
|
||||
&:hover {
|
||||
background: $primary-low;
|
||||
background: var(--primary-low);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $tertiary-low;
|
||||
background: var(--tertiary-low);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,9 +18,9 @@
|
|||
.d-editor-textarea-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $secondary;
|
||||
background-color: var(--secondary);
|
||||
position: relative;
|
||||
border: 1px solid $primary-medium;
|
||||
border: 1px solid var(--primary-medium);
|
||||
|
||||
textarea {
|
||||
background: transparent;
|
||||
|
|
@ -49,18 +49,18 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 30px;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
|
||||
.btn,
|
||||
.btn-default {
|
||||
background-color: transparent;
|
||||
display: inline-block;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
.d-icon {
|
||||
color: currentColor;
|
||||
}
|
||||
&:hover {
|
||||
color: $primary-low;
|
||||
color: var(--primary-low);
|
||||
}
|
||||
|
||||
svg {
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
.d-editor-spacer {
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
border-left: 1px solid $primary-low-mid;
|
||||
border-left: 1px solid var(--primary-low-mid);
|
||||
}
|
||||
|
||||
.btn:not(.no-text) {
|
||||
|
|
@ -134,7 +134,7 @@
|
|||
|
||||
.composing-whisper .d-editor-preview {
|
||||
font-style: italic;
|
||||
color: $primary-medium !important;
|
||||
color: var(--primary-medium) !important;
|
||||
}
|
||||
|
||||
.d-editor-preview > *:first-child {
|
||||
|
|
@ -167,14 +167,14 @@
|
|||
display: block;
|
||||
}
|
||||
.d-editor-textarea-wrapper {
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
}
|
||||
.d-editor-preview-wrapper {
|
||||
max-width: 100%;
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
.d-editor-preview {
|
||||
background-color: $primary-very-low;
|
||||
background-color: var(--primary-very-low);
|
||||
padding: 5px;
|
||||
&:empty {
|
||||
padding: 0;
|
||||
|
|
@ -185,7 +185,7 @@
|
|||
.user-preferences .bio-composer,
|
||||
.group-form-bio {
|
||||
padding: 10px;
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
}
|
||||
|
||||
.d-editor-preview img {
|
||||
|
|
@ -231,11 +231,11 @@
|
|||
transition: all 0.25s;
|
||||
z-index: 1; // needs to be higher than image
|
||||
width: 100%;
|
||||
background: $secondary; // for when images are wider than controls
|
||||
background: var(--secondary); // for when images are wider than controls
|
||||
|
||||
.scale-btn {
|
||||
background: $secondary; // for when controls are wider than image
|
||||
color: $tertiary;
|
||||
background: var(--secondary); // for when controls are wider than image
|
||||
color: var(--tertiary);
|
||||
padding: 0 1em;
|
||||
&:first-child,
|
||||
&:last-child {
|
||||
|
|
@ -244,7 +244,7 @@
|
|||
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&:not(.active):hover {
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
html {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
font-family: $base-font-family;
|
||||
font-size: $base-font-size;
|
||||
line-height: $line-height-large;
|
||||
background-color: $secondary;
|
||||
background-color: var(--secondary);
|
||||
overflow-y: scroll;
|
||||
direction: ltr;
|
||||
|
||||
|
|
@ -35,17 +35,17 @@ html {
|
|||
// --------------------------------------------------
|
||||
|
||||
a {
|
||||
color: $tertiary;
|
||||
color: var(--tertiary);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
&:visited {
|
||||
color: $tertiary;
|
||||
color: var(--tertiary);
|
||||
}
|
||||
&:hover {
|
||||
color: $tertiary;
|
||||
color: var(--tertiary);
|
||||
}
|
||||
&:active {
|
||||
color: $tertiary;
|
||||
color: var(--tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -57,7 +57,7 @@ hr {
|
|||
height: 1px;
|
||||
margin: 1em 0;
|
||||
border: 0;
|
||||
border-top: 1px solid $primary-low;
|
||||
border-top: 1px solid var(--primary-low);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
@ -136,11 +136,11 @@ table {
|
|||
}
|
||||
|
||||
tbody {
|
||||
border-top: 3px solid $primary-low;
|
||||
border-top: 3px solid var(--primary-low);
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
&.highlighted {
|
||||
animation: background-fade-highlight 2.5s ease-out;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -89,8 +89,8 @@ $breakpoints: (
|
|||
|
||||
// Stuff we repeat
|
||||
@mixin post-aside {
|
||||
border-left: 5px solid $primary-low;
|
||||
background-color: $blend-primary-secondary-5;
|
||||
border-left: 5px solid var(--primary-low);
|
||||
background-color: var(--blend-primary-secondary-5);
|
||||
}
|
||||
|
||||
// We still need -webkit for latest iPhone and Safari
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
padding: 5px 10px;
|
||||
z-index: z("tooltip");
|
||||
&.bad {
|
||||
background: $danger-medium;
|
||||
background: var(--danger-medium);
|
||||
color: white;
|
||||
box-shadow: shadow("dropdown");
|
||||
}
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
}
|
||||
.close {
|
||||
float: right;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
opacity: 0.5;
|
||||
font-size: $font-0;
|
||||
margin: 0 0 0 4px;
|
||||
|
|
|
|||
|
|
@ -23,14 +23,14 @@
|
|||
|
||||
.topic-count {
|
||||
font-size: $font-down-1;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
white-space: nowrap;
|
||||
margin-left: 0.5em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.category-status {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
line-height: $line-height-large;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 1 1 auto;
|
||||
|
|
|
|||
|
|
@ -45,13 +45,13 @@
|
|||
|
||||
&[data-value="all-categories"],
|
||||
&[data-value="no-categories"] {
|
||||
color: $tertiary;
|
||||
color: var(--tertiary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.category-desc {
|
||||
font-weight: normal;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
.topic-count {
|
||||
margin-left: 0.5em;
|
||||
font-weight: normal;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
font-size: $font-down-1;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -27,14 +27,14 @@
|
|||
}
|
||||
|
||||
.select-kit-header {
|
||||
background: $secondary;
|
||||
border: 1px solid $primary-medium;
|
||||
background: var(--secondary);
|
||||
border: 1px solid var(--primary-medium);
|
||||
padding: 0 0.25em 0 0.5em;
|
||||
font-weight: 500;
|
||||
font-size: $font-0;
|
||||
|
||||
&.is-focused {
|
||||
border: 1px solid $tertiary;
|
||||
border: 1px solid var(--tertiary);
|
||||
box-shadow: shadow("focus");
|
||||
}
|
||||
}
|
||||
|
|
@ -48,12 +48,12 @@
|
|||
.collection-header {
|
||||
a {
|
||||
white-space: nowrap;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
line-height: $line-height-medium;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
padding: 0.75em;
|
||||
color: $tertiary;
|
||||
color: var(--tertiary);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
|
|
@ -64,18 +64,18 @@
|
|||
|
||||
&.is-disabled {
|
||||
.select-kit-header {
|
||||
background: $primary-low;
|
||||
border-color: $primary-low-mid;
|
||||
color: $primary-medium;
|
||||
background: var(--primary-low);
|
||||
border-color: var(--primary-low-mid);
|
||||
color: var(--primary-medium);
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-highlighted {
|
||||
.select-kit-header {
|
||||
border: 1px solid $tertiary;
|
||||
border: 1px solid var(--tertiary);
|
||||
box-shadow: shadow("focus");
|
||||
}
|
||||
}
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
&.is-expanded {
|
||||
.select-kit-wrapper {
|
||||
display: block;
|
||||
border: 1px solid $tertiary;
|
||||
border: 1px solid var(--tertiary);
|
||||
box-shadow: shadow("focus");
|
||||
}
|
||||
}
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
}
|
||||
|
||||
&.tag-drop {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
|
||||
&.group-dropdown {
|
||||
|
|
|
|||
|
|
@ -7,14 +7,14 @@
|
|||
outline: none;
|
||||
padding: 0;
|
||||
margin-right: 5px;
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
min-height: unset;
|
||||
.d-icon {
|
||||
padding: 5px 6px;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $primary-low;
|
||||
background: var(--primary-low);
|
||||
}
|
||||
}
|
||||
.d-icon {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
}
|
||||
|
||||
.select-kit-body {
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
background-clip: padding-box;
|
||||
box-shadow: shadow("dropdown");
|
||||
}
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
flex: 1 1 auto;
|
||||
font-weight: bold;
|
||||
font-size: $font-0;
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
padding: 0;
|
||||
@include ellipsis;
|
||||
max-width: 100%;
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
flex: 1 1 auto;
|
||||
font-size: $font-down-1;
|
||||
font-weight: normal;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
white-space: normal;
|
||||
min-width: 350px;
|
||||
}
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
|
||||
&.is-focused {
|
||||
outline-style: auto;
|
||||
outline-color: $tertiary;
|
||||
outline-color: var(--tertiary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
}
|
||||
|
||||
.future-date-input-selector-datetime {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
margin-left: auto;
|
||||
white-space: nowrap;
|
||||
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
.future-date-input-selector-row {
|
||||
.future-date-input-selector-icons {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
&.icon-picker {
|
||||
.multi-select-header {
|
||||
.select-kit-selected-name .d-icon {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
&.no-tags {
|
||||
.select-kit-header .selected-name {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -43,12 +43,12 @@
|
|||
}
|
||||
|
||||
&.is-highlighted.is-selected {
|
||||
background: $tertiary-low;
|
||||
background: var(--tertiary-low);
|
||||
}
|
||||
|
||||
.discourse-tag {
|
||||
&:hover {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -61,14 +61,14 @@
|
|||
max-height: 125px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
padding: 0.25em 0 0 0.25em;
|
||||
box-sizing: border-box;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
|
||||
.selected-tag {
|
||||
background: $primary-low;
|
||||
background: var(--primary-low);
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0.5em;
|
||||
|
|
@ -82,16 +82,16 @@
|
|||
}
|
||||
|
||||
&.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 {
|
||||
color: $primary-low-mid;
|
||||
color: var(--primary-low-mid);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&:hover .d-icon.d-icon-times {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.select-kit {
|
||||
&.multi-select {
|
||||
width: 300px;
|
||||
background: $secondary;
|
||||
background: var(--secondary);
|
||||
border-radius: 0;
|
||||
|
||||
.select-kit-row {
|
||||
|
|
@ -18,8 +18,8 @@
|
|||
}
|
||||
|
||||
.multi-select-header {
|
||||
background: $secondary;
|
||||
border: 1px solid $primary-medium;
|
||||
background: var(--secondary);
|
||||
border: 1px solid var(--primary-medium);
|
||||
|
||||
&.is-focused {
|
||||
box-shadow: shadow("focus");
|
||||
|
|
@ -29,11 +29,11 @@
|
|||
|
||||
&.is-disabled {
|
||||
.multi-select-header {
|
||||
background: $primary-low;
|
||||
border-color: $primary-low-mid;
|
||||
color: $primary-medium;
|
||||
background: var(--primary-low);
|
||||
border-color: var(--primary-low-mid);
|
||||
color: var(--primary-medium);
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
&.is-expanded {
|
||||
.select-kit-wrapper {
|
||||
display: block;
|
||||
border: 1px solid $tertiary;
|
||||
border: 1px solid var(--tertiary);
|
||||
box-shadow: shadow("focus");
|
||||
border-radius: 0;
|
||||
}
|
||||
|
|
@ -139,7 +139,7 @@
|
|||
}
|
||||
|
||||
.selected-name {
|
||||
background: $primary-low;
|
||||
background: var(--primary-low);
|
||||
padding: 0.25em;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
|
|
@ -147,7 +147,7 @@
|
|||
justify-content: space-between;
|
||||
|
||||
.d-icon {
|
||||
color: $primary-low-mid;
|
||||
color: var(--primary-low-mid);
|
||||
vertical-align: middle;
|
||||
|
||||
&:last-child {
|
||||
|
|
@ -155,11 +155,11 @@
|
|||
}
|
||||
}
|
||||
&:hover .d-icon:last-child {
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
&.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,19 +17,19 @@
|
|||
|
||||
.filter-text {
|
||||
margin-right: 0.5em;
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
cursor: pointer;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
color: $tertiary;
|
||||
color: var(--tertiary);
|
||||
cursor: pointer;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
margin: 0 0 0 0.25em;
|
||||
font-size: $font-up-2;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,25 +17,25 @@
|
|||
padding: 0;
|
||||
|
||||
h2.selected-name {
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
|
||||
.date-section {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.top-date-string {
|
||||
font-size: $font-down-1;
|
||||
color: $primary-med-or-secondary-high;
|
||||
color: var(--primary-med-or-secondary-high);
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.d-icon {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
opacity: 1;
|
||||
margin: 5px 0 10px 5px;
|
||||
font-size: $font-up-3;
|
||||
|
|
@ -61,13 +61,13 @@
|
|||
}
|
||||
|
||||
.date-section {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.top-date-string {
|
||||
font-weight: normal;
|
||||
font-size: $font-down-1;
|
||||
color: $primary-med-or-secondary-high;
|
||||
color: var(--primary-med-or-secondary-high);
|
||||
text-transform: uppercase;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
}
|
||||
|
||||
.d-icon {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
|
||||
.select-kit-header {
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
|
||||
.select-kit-body {
|
||||
display: none;
|
||||
background: $secondary;
|
||||
background: var(--secondary);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
|
@ -157,20 +157,20 @@
|
|||
}
|
||||
|
||||
&.is-highlighted {
|
||||
background: $tertiary-low;
|
||||
background: var(--tertiary-low);
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
background: $highlight-medium;
|
||||
background: var(--highlight-medium);
|
||||
}
|
||||
|
||||
&.is-selected.is-highlighted {
|
||||
background: $tertiary-low;
|
||||
background: var(--tertiary-low);
|
||||
}
|
||||
|
||||
.discourse-tag,
|
||||
.discourse-tag-count {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&.create-color-row {
|
||||
|
|
@ -180,7 +180,7 @@
|
|||
}
|
||||
|
||||
.select-kit-collection {
|
||||
background: $secondary;
|
||||
background: var(--secondary);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border-radius: inherit;
|
||||
|
|
@ -192,7 +192,7 @@
|
|||
|
||||
.validation-message {
|
||||
white-space: nowrap;
|
||||
color: $danger;
|
||||
color: var(--danger);
|
||||
flex: 1 0 auto;
|
||||
margin: 5px;
|
||||
padding: 0 2px;
|
||||
|
|
@ -203,7 +203,7 @@
|
|||
margin: 0;
|
||||
|
||||
&:hover .select-kit-row.is-highlighted:hover {
|
||||
background: $tertiary-low;
|
||||
background: var(--tertiary-low);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -215,7 +215,7 @@
|
|||
&::-webkit-scrollbar-thumb {
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
background: $primary-med-or-secondary-med;
|
||||
background: var(--primary-med-or-secondary-med);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
|
|
@ -267,7 +267,7 @@
|
|||
}
|
||||
|
||||
.select-kit-errors-collection {
|
||||
background: $danger;
|
||||
background: var(--danger);
|
||||
padding: 0.25em 1em;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
|
@ -275,7 +275,7 @@
|
|||
|
||||
.select-kit-error {
|
||||
list-style: none;
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -286,7 +286,7 @@
|
|||
padding: 0.5em;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: $secondary;
|
||||
background: var(--secondary);
|
||||
}
|
||||
|
||||
.is-loading {
|
||||
|
|
|
|||
|
|
@ -4,14 +4,14 @@
|
|||
|
||||
&.is-expanded {
|
||||
padding: 0.25em 0.5em;
|
||||
border-top: 1px solid $primary-low;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-top: 1px solid var(--primary-low);
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-expanded {
|
||||
.select-kit-header {
|
||||
border: 1px solid $tertiary;
|
||||
border-color: var(--tertiary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
.select-kit-row {
|
||||
&[data-value="all-tags"],
|
||||
&[data-value="no-tags"] {
|
||||
color: $tertiary;
|
||||
color: var(--tertiary);
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
.select-kit-row {
|
||||
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 {
|
||||
border: none;
|
||||
|
|
@ -22,14 +22,14 @@
|
|||
}
|
||||
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
&.is-highlighted,
|
||||
&.is-selected,
|
||||
&:hover {
|
||||
background: $tertiary-low;
|
||||
color: $primary;
|
||||
background: var(--tertiary-low);
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@
|
|||
}
|
||||
|
||||
.username {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: $primary-high;
|
||||
color: var(--primary-high);
|
||||
font-size: $font-down-1;
|
||||
margin-left: 0.5em;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
#topic-entrance {
|
||||
border: 1px solid $primary-low;
|
||||
border: 1px solid var(--primary-low);
|
||||
padding: 5px;
|
||||
background: $secondary;
|
||||
background: var(--secondary);
|
||||
box-shadow: shadow("card");
|
||||
z-index: z("dropdown");
|
||||
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue