Discource-C
/
DiscoTOC
mirror of https://github.com/discourse/DiscoTOC.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add dark mode support

This commit is contained in:
Penar Musaraj 2020-08-25 11:58:15 -04:00
parent 0522002195
commit 68d40fe9f5
No known key found for this signature in database
GPG Key ID: E390435D881FF0F7
1 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
common/common.scss
View File

@ -25,16 +25,16 @@
.d-toc-item { .d-toc-item {
padding: 6px 0; padding: 6px 0;
a { a {
color: $primary-high; color: var(--primary-high, $primary-high);
} }
&.d-toc-active { &.d-toc-active {
position: relative; position: relative;
&:before { &:before {
:not(.rtl) & { :not(.rtl) & {
border-left: 1px solid $tertiary; border-left: 1px solid var(--tertiary, $tertiary);
} }
.rtl & { .rtl & {
border-right: 1px solid $tertiary; border-right: 1px solid var(--tertiary, $tertiary);
} }
height: 100%; height: 100%;
content: ""; content: "";
@ -43,8 +43,9 @@
top: 0; top: 0;
} }
a { a {
color: $primary; color: var(--primary, $primary);
text-shadow: 0.1px 0.1px $primary, -0.1px -0.1px $primary; text-shadow: 0.1px 0.1px var(--primary, $primary),
-0.1px -0.1px var(--primary, $primary);
} }
} }
} }
@ -145,7 +146,8 @@
} }
} }
&:hover .d-toc-anchor-link { &:hover .d-toc-anchor-link {
color: rgba($primary-medium, 0.6); color: var(--primary-medium, $primary-medium);
opacity: 0.6;
} }
} }
} }
@ -194,17 +196,17 @@
} }
> .row { > .row {
:not(.rtl) & { :not(.rtl) & {
border-right: 1px solid $primary-low; border-right: 1px solid var(--primary-low, $primary-low);
} }
.rtl & { .rtl & {
border-left: 1px solid $primary-low; border-left: 1px solid var(--primary-low, $primary-low);
} }
} }
} }
#topic-title { #topic-title {
margin-bottom: 0; margin-bottom: 0;
.title-wrapper { .title-wrapper {
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low, $primary-low);
padding-bottom: 0.5em; padding-bottom: 0.5em;
width: auto; width: auto;
} }
@ -217,7 +219,7 @@
.d-toc-regular { .d-toc-regular {
#d-toc { #d-toc {
z-index: z("header") + 1; z-index: z("header") + 1;
background: $secondary; background: var(--secondary, $secondary);
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
@ -252,7 +254,7 @@
} }
.d-toc-close-wrapper { .d-toc-close-wrapper {
height: 3em; height: 3em;
background: $secondary; background: var(--secondary, $secondary);
margin-bottom: 1em; margin-bottom: 1em;
position: -webkit-sticky; position: -webkit-sticky;
@ -273,8 +275,8 @@
bottom: 5px; bottom: 5px;
padding: 0.5em 1em; padding: 0.5em 1em;
background: $tertiary; background: var(--tertiary, $tertiary);
color: $secondary; color: var(--secondary, $secondary);
z-index: 3; z-index: 3;
margin-bottom: env(safe-area-inset-bottom); margin-bottom: env(safe-area-inset-bottom);
:not(.rtl) & { :not(.rtl) & {
@ -290,11 +292,11 @@
#d-toc > ul { #d-toc > ul {
:not(.rtl) & { :not(.rtl) & {
margin-left: 20px; margin-left: 20px;
border-left: 1px solid $primary-low; border-left: 1px solid var(--primary-low, $primary-low);
} }
.rtl & { .rtl & {
margin-right: 20px; margin-right: 20px;
border-right: 1px solid $primary-low; border-right: 1px solid var(--primary-low, $primary-low);
} }
&:last-child { &:last-child {
margin-bottom: 5em; margin-bottom: 5em;
@ -320,9 +322,9 @@
} }
.edit-title .d-editor-preview [data-theme-toc] { .edit-title .d-editor-preview [data-theme-toc] {
background: $tertiary; background: var(--tertiary, $tertiary);
color: $secondary; color: var(--secondary, $secondary);
border-top: 2px solid $secondary; border-top: 2px solid var(--secondary, $secondary);
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
top: 0; top: 0;