mirror of
https://github.com/discourse/discourse.git
synced 2024-11-28 23:24:04 +08:00
c937afc75e
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.
163 lines
2.5 KiB
SCSS
163 lines
2.5 KiB
SCSS
@import "./variables";
|
|
@import "./mixins";
|
|
|
|
// --------------------------------------------------
|
|
// Base styles for HTML elements
|
|
// --------------------------------------------------
|
|
|
|
html {
|
|
color: var(--primary);
|
|
font-family: $base-font-family;
|
|
font-size: $base-font-size;
|
|
line-height: $line-height-large;
|
|
background-color: var(--secondary);
|
|
overflow-y: scroll;
|
|
direction: ltr;
|
|
|
|
&.text-size-smallest {
|
|
font-size: $base-font-size-smallest;
|
|
}
|
|
|
|
&.text-size-smaller {
|
|
font-size: $base-font-size-smaller;
|
|
}
|
|
|
|
&.text-size-larger {
|
|
font-size: $base-font-size-larger;
|
|
}
|
|
|
|
&.text-size-largest {
|
|
font-size: $base-font-size-largest;
|
|
}
|
|
}
|
|
|
|
// Links
|
|
// --------------------------------------------------
|
|
|
|
a {
|
|
color: var(--tertiary);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
&:visited {
|
|
color: var(--tertiary);
|
|
}
|
|
&:hover {
|
|
color: var(--tertiary);
|
|
}
|
|
&:active {
|
|
color: var(--tertiary);
|
|
}
|
|
}
|
|
|
|
// Typography
|
|
// --------------------------------------------------
|
|
|
|
hr {
|
|
display: block;
|
|
height: 1px;
|
|
margin: 1em 0;
|
|
border: 0;
|
|
border-top: 1px solid var(--primary-low);
|
|
padding: 0;
|
|
}
|
|
|
|
// Lists
|
|
// --------------------------------------------------
|
|
|
|
ul,
|
|
dd {
|
|
margin: 0 0 9px 25px;
|
|
padding: 0;
|
|
}
|
|
|
|
.cooked ul,
|
|
.cooked ol,
|
|
.cooked dd {
|
|
clear: both;
|
|
}
|
|
|
|
.cooked ul,
|
|
.d-editor-preview ul {
|
|
margin: 0;
|
|
padding-left: 40px;
|
|
}
|
|
|
|
li {
|
|
> ul,
|
|
> ol {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// Embedded content
|
|
// --------------------------------------------------
|
|
|
|
img {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
// Forms
|
|
// --------------------------------------------------
|
|
|
|
fieldset {
|
|
margin: 0;
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
pre code {
|
|
overflow: auto;
|
|
-moz-tab-size: 4;
|
|
tab-size: 4;
|
|
&.lang-markdown {
|
|
white-space: pre-wrap;
|
|
}
|
|
}
|
|
|
|
// TODO figure out a clean place to put stuff like this
|
|
.row:before,
|
|
.row:after {
|
|
display: table;
|
|
content: "";
|
|
}
|
|
.row:after {
|
|
clear: both;
|
|
}
|
|
|
|
#offscreen-content {
|
|
display: none;
|
|
}
|
|
|
|
// Tables
|
|
// --------------------------------------------------
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
tbody {
|
|
border-top: 3px solid var(--primary-low);
|
|
}
|
|
|
|
tr {
|
|
border-bottom: 1px solid var(--primary-low);
|
|
&.highlighted {
|
|
animation: background-fade-highlight 2.5s ease-out;
|
|
}
|
|
}
|
|
|
|
// https://en.wikipedia.org/wiki/Ruby_character
|
|
ruby > rt {
|
|
font-size: 72%; // ~10px with 14px base
|
|
}
|
|
|
|
// Buttons (was in normalized)
|
|
// --------------------------------------------------
|
|
|
|
button,
|
|
html input[type="button"],
|
|
input[type="reset"],
|
|
input[type="submit"] {
|
|
cursor: pointer;
|
|
}
|