mirror of
https://github.com/discourse/discourse.git
synced 2024-12-11 16:33:41 +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.
123 lines
3.1 KiB
SCSS
123 lines
3.1 KiB
SCSS
// Right to left styles.
|
|
// *** These styles are all going to be flipped by the r2 gem ***
|
|
// Adding the !important declaration to a rule prevents it from being flipped.
|
|
|
|
// This is used to flip the .d-icon-caret-right
|
|
@mixin rotate($degrees) {
|
|
-webkit-transform: rotate(#{$degrees}deg);
|
|
-moz-transform: rotate(#{$degrees}deg);
|
|
-ms-transform: rotate(#{$degrees}deg);
|
|
-o-transform: rotate(#{$degrees}deg);
|
|
transform: rotate(#{$degrees}deg);
|
|
|
|
filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})";
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})";
|
|
zoom: 1;
|
|
}
|
|
|
|
// Get the right caret to point left
|
|
.rtl .d-icon-caret-right {
|
|
@include rotate(180);
|
|
}
|
|
|
|
// Changes the triangle arrow direction in .nav-stacked .active
|
|
// 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: var(--secondary) !important;
|
|
}
|
|
.rtl code {
|
|
direction: ltr !important;
|
|
text-align: left !important;
|
|
}
|
|
.rtl .pull-left {
|
|
float: right !important;
|
|
}
|
|
.rtl .autocomplete {
|
|
left: 27px;
|
|
}
|
|
|
|
.rtl .admin-customize .current-style .toggle-mobile {
|
|
position: static !important;
|
|
float: left !important;
|
|
}
|
|
.rtl .admin-customize .current-style .toggle-maximize {
|
|
position: static !important;
|
|
float: left !important;
|
|
}
|
|
.rtl .dashboard-left {
|
|
float: right !important;
|
|
}
|
|
.rtl .dashboard-right {
|
|
float: left !important;
|
|
}
|
|
|
|
// This is for the support_mixed_text_direction setting
|
|
.cooked ul[dir="ltr"],
|
|
.d-editor-preview ul[dir="ltr"],
|
|
.cooked ul[dir="rtl"],
|
|
.d-editor-preview ul[dir="rtl"] {
|
|
padding-right: 40px;
|
|
padding-left: 40px;
|
|
}
|
|
|
|
// Fixes github oneboxes for RTL sites
|
|
.rtl aside.onebox.githubblob {
|
|
padding: 12px 25px 12px 12px !important;
|
|
direction: ltr !important;
|
|
}
|
|
|
|
.rtl aside.onebox.githubblob .source {
|
|
background-position: 0 50% !important;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.rtl pre.onebox code ol.lines {
|
|
margin: 0 0 0 40px !important;
|
|
}
|
|
|
|
.rtl pre.onebox code ol.lines li:before {
|
|
right: -40px;
|
|
padding-left: 5px;
|
|
padding-right: 0;
|
|
text-align: right !important;
|
|
}
|
|
|
|
.rtl pre.onebox code ol.lines li {
|
|
padding-right: 5px;
|
|
padding-left: 0;
|
|
margin-right: 0;
|
|
border-right: 1px solid #cfcfcf;
|
|
border-left: none !important;
|
|
}
|
|
|
|
.rtl {
|
|
$mobile-breakpoint: 700px;
|
|
|
|
.admin-detail.mobile-open {
|
|
@media (max-width: $mobile-breakpoint) {
|
|
transition: transform 0.3s ease;
|
|
@include transform(translateX(-250px));
|
|
}
|
|
@media (max-width: 500px) {
|
|
transition: transform 0.3s ease;
|
|
@include transform(translateX(-50%));
|
|
}
|
|
}
|
|
|
|
.admin-detail.mobile-closed {
|
|
@media (max-width: $mobile-breakpoint) {
|
|
transition: transform 0.3s ease;
|
|
@include transform(translateX(0));
|
|
margin-left: -10px !important;
|
|
padding-left: 10px !important;
|
|
}
|
|
}
|
|
|
|
.admin-nav {
|
|
.nav-stacked {
|
|
margin: 0 -10px 0 10px !important;
|
|
}
|
|
}
|
|
}
|