mirror of
https://github.com/discourse/discourse.git
synced 2024-11-28 13:36:20 +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.
150 lines
2.6 KiB
SCSS
150 lines
2.6 KiB
SCSS
// Mobile
|
|
// global styles that apply to the Discourse application specifically
|
|
// BEWARE: changing these styles implies they take effect anywhere they are seen
|
|
// throughout the Discourse application
|
|
|
|
// Base Elements
|
|
|
|
body {
|
|
background-color: var(--secondary);
|
|
}
|
|
|
|
.ios-device {
|
|
textarea {
|
|
background-color: var(--secondary);
|
|
font-size: $font-size-ios-input;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
input {
|
|
&[type="text"],
|
|
&[type="password"],
|
|
&[type="datetime"],
|
|
&[type="datetime-local"],
|
|
&[type="date"],
|
|
&[type="month"],
|
|
&[type="time"],
|
|
&[type="week"],
|
|
&[type="number"],
|
|
&[type="email"],
|
|
&[type="url"],
|
|
&[type="search"],
|
|
&[type="tel"],
|
|
&[type="color"] {
|
|
font-size: $font-size-ios-input;
|
|
}
|
|
}
|
|
|
|
input#reply-title {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
}
|
|
|
|
blockquote {
|
|
/* 13px left is intentional here to properly align with post quotes */
|
|
padding: 10px 8px 10px 13px;
|
|
|
|
p {
|
|
margin: 0 0 10px 0;
|
|
|
|
&:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Common classes
|
|
.wrap {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.boxed {
|
|
.contents {
|
|
padding: 10px 0 0 0;
|
|
}
|
|
}
|
|
|
|
.control-group {
|
|
margin-bottom: 9px;
|
|
}
|
|
|
|
.mobile-nav {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
overflow: visible;
|
|
position: relative;
|
|
border: 1px solid var(--primary-medium);
|
|
// Prevents the dropdowns from collapsing while content loads, so they look more like placeholders and less like dark 2px lines
|
|
min-height: 37px;
|
|
|
|
a {
|
|
color: var(--primary);
|
|
.d-icon {
|
|
margin-right: 0.25em;
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
|
|
> li > a {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 10px;
|
|
height: 100%;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.expander > .d-icon {
|
|
&:last-of-type {
|
|
margin-left: auto;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.drop {
|
|
display: none;
|
|
&.expanded {
|
|
left: 0;
|
|
display: block;
|
|
position: absolute;
|
|
z-index: z("dropdown");
|
|
background-color: var(--secondary);
|
|
width: 100%;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 5px;
|
|
border: 1px solid var(--primary-low);
|
|
box-sizing: border-box;
|
|
|
|
li {
|
|
margin: 5px 0;
|
|
padding: 0;
|
|
|
|
a {
|
|
height: 100%;
|
|
display: block;
|
|
padding: 5px 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-vertical {
|
|
.control-group {
|
|
margin-bottom: 12px;
|
|
}
|
|
}
|
|
|
|
// Special elements
|
|
#main {
|
|
position: relative;
|
|
}
|
|
|
|
// Styles used before the user is logged into discourse. For example, activating
|
|
// their account or changing their email.
|
|
#simple-container {
|
|
width: 90%;
|
|
}
|