[Style] Add Nord theme, break up SCSS code
This commit adds the Nord theme into the list of available themes. The
Nord theme is now the default theme for dark-based systems.
Theme buttons now have their own class to make it easier to change
them without too much work.
The `style.scss' file has been split up in three different files:
- main.scss, the new file to load from the HTML page, imports the two
other files
- themes.scss, containing all the theming of the websites
- style.scss, containing the rest
All websites loading the theme will now need to load it from
`main.scss' instead of `style.scss', likewise with the `.css'
extension
This commit is contained in:
parent
e4dc101346
commit
e710c594f1
GPG Key ID:
BD7789E705CB8DCA
1
.gitignore
vendored
1
.gitignore
vendored
@ -6,3 +6,4 @@
|
|||||||
/.sass-cache/
|
/.sass-cache/
|
||||||
/build/
|
/build/
|
||||||
*.scssc
|
*.scssc
|
||||||
|
/Book.html
|
||||||
|
|||||||
@ -114,7 +114,9 @@ Future<Element> makeThemeChanger() async {
|
|||||||
Element makeThemeItem(String t_btnId) {
|
Element makeThemeItem(String t_btnId) {
|
||||||
return Element.li()
|
return Element.li()
|
||||||
..classes.add('dropdown-item')
|
..classes.add('dropdown-item')
|
||||||
..append(Element.span()..attributes['id'] = t_btnId);
|
..append(Element.span()
|
||||||
|
..attributes['id'] = t_btnId
|
||||||
|
..classes.add('themeBtn'));
|
||||||
}
|
}
|
||||||
|
|
||||||
return Element.li()
|
return Element.li()
|
||||||
@ -131,6 +133,7 @@ Future<Element> makeThemeChanger() async {
|
|||||||
..attributes['id'] = 'theme-dropdown'
|
..attributes['id'] = 'theme-dropdown'
|
||||||
..append(makeThemeItem('lightBtn'))
|
..append(makeThemeItem('lightBtn'))
|
||||||
..append(makeThemeItem('darkBtn'))
|
..append(makeThemeItem('darkBtn'))
|
||||||
|
..append(makeThemeItem('nordBtn'))
|
||||||
..append(makeThemeItem('blackBtn')));
|
..append(makeThemeItem('blackBtn')));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import 'dart:html';
|
import 'dart:html' show window, querySelector;
|
||||||
|
|
||||||
final localStorage = window.localStorage;
|
final localStorage = window.localStorage;
|
||||||
|
|
||||||
@ -7,7 +7,7 @@ Future<void> setTheme([String theme]) async {
|
|||||||
() {
|
() {
|
||||||
final devicePrefersDark =
|
final devicePrefersDark =
|
||||||
window.matchMedia('(prefers-color-scheme: dark)').matches;
|
window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||||
return devicePrefersDark ? 'dark' : 'light';
|
return devicePrefersDark ? 'nord' : 'light';
|
||||||
}();
|
}();
|
||||||
localStorage['theme'] = currentTheme;
|
localStorage['theme'] = currentTheme;
|
||||||
querySelector('body')
|
querySelector('body')
|
||||||
@ -16,7 +16,7 @@ Future<void> setTheme([String theme]) async {
|
|||||||
}
|
}
|
||||||
|
|
||||||
void enableThemeChanger() {
|
void enableThemeChanger() {
|
||||||
final themes = <String>['light', 'dark', 'black'];
|
final themes = <String>['light', 'dark', 'nord', 'black'];
|
||||||
themes.forEach((theme) =>
|
themes.forEach((theme) =>
|
||||||
querySelector('#${theme}Btn').onClick.listen((_) => setTheme(theme))
|
querySelector('#${theme}Btn').onClick.listen((_) => setTheme(theme))
|
||||||
);
|
);
|
||||||
|
|||||||
2
web/style/main.scss
Normal file
2
web/style/main.scss
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
@import "themes.scss";
|
||||||
|
@import "style.scss";
|
||||||
@ -1,4 +1,4 @@
|
|||||||
/* Variables *****************************************************************/
|
// Variables //////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
$switch-small-screen: "only screen and (max-width: 600px)";
|
$switch-small-screen: "only screen and (max-width: 600px)";
|
||||||
$switch-smaller-screen: "only screen and (max-width: 400px)";
|
$switch-smaller-screen: "only screen and (max-width: 400px)";
|
||||||
@ -6,262 +6,7 @@ $switch-smaller-screen: "only screen and (max-width: 400px)";
|
|||||||
$navbar-height: 70px;
|
$navbar-height: 70px;
|
||||||
$postamble-height: 55px;
|
$postamble-height: 55px;
|
||||||
|
|
||||||
$tooltip-underline-size: 3px;
|
// Style //////////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
// Themes /////////////////////////////////////////////////////////////////////
|
|
||||||
|
|
||||||
$dark: rgba( 52, 73, 94, 1);
|
|
||||||
$black: rgba( 0, 0, 0, 1);
|
|
||||||
$accent1: rgba( 93, 115, 126, 1);
|
|
||||||
$accent2: rgba( 92, 172, 126, 1);
|
|
||||||
$accent3: rgba(197, 193, 155, 1);
|
|
||||||
$light: #eee;
|
|
||||||
$grey1: #f8f8f8;
|
|
||||||
$grey2: #dbe1e8;
|
|
||||||
$grey3: #b2becd;
|
|
||||||
$grey4: #6c7983;
|
|
||||||
$grey5: #454e56;
|
|
||||||
$grey6: #12181b;
|
|
||||||
|
|
||||||
// Accent 1
|
|
||||||
// Black
|
|
||||||
$gradient-accent1-black-left: linear-gradient(to left, $black, $accent1, $accent1);
|
|
||||||
$gradient-accent1-black-right: linear-gradient(to right, $black, $accent1, $accent1);
|
|
||||||
// Dark
|
|
||||||
$gradient-accent1-dark-left: linear-gradient(to left, $dark, $accent1);
|
|
||||||
$gradient-accent1-dark-right: linear-gradient(to right, $dark, $accent1);
|
|
||||||
// Light
|
|
||||||
$gradient-accent1-light-left: linear-gradient(to left, $light, $accent1);
|
|
||||||
$gradient-accent1-light-right: linear-gradient(to right, $light, $accent1);
|
|
||||||
// Accent 2
|
|
||||||
// Black
|
|
||||||
$gradient-accent2-black-left: linear-gradient(to left, $black, $accent2, $accent2);
|
|
||||||
$gradient-accent2-black-right: linear-gradient(to right, $black, $accent2, $accent2);
|
|
||||||
// Dark
|
|
||||||
$gradient-accent2-dark-left: linear-gradient(to left, $dark, $accent2);
|
|
||||||
$gradient-accent2-dark-right: linear-gradient(to right, $dark, $accent2);
|
|
||||||
// Light
|
|
||||||
$gradient-accent2-light-left: linear-gradient(to left, $light, $accent2);
|
|
||||||
$gradient-accent2-light-right: linear-gradient(to right, $light, $accent2);
|
|
||||||
// Accent 3
|
|
||||||
// Black
|
|
||||||
$gradient-accent3-black-left: linear-gradient(to left, $black, $accent3, $accent3);
|
|
||||||
$gradient-accent3-black-right: linear-gradient(to right, $black, $accent3, $accent3);
|
|
||||||
// Dark
|
|
||||||
$gradient-accent3-dark-left: linear-gradient(to left, $dark, $accent3);
|
|
||||||
$gradient-accent3-dark-right: linear-gradient(to right, $dark, $accent3);
|
|
||||||
// Light
|
|
||||||
$gradient-accent3-light-left: linear-gradient(to left, $light, $accent3);
|
|
||||||
$gradient-accent3-light-right: linear-gradient(to right, $light, $accent3);
|
|
||||||
|
|
||||||
.light {
|
|
||||||
$bg-nav: $gradient-accent3-light-right;
|
|
||||||
$border-color: $accent1;
|
|
||||||
|
|
||||||
color: $dark;
|
|
||||||
background: $light;
|
|
||||||
|
|
||||||
transition: background 500ms ease-in-out, color 1s ease-in-out;
|
|
||||||
|
|
||||||
pre {
|
|
||||||
box-shadow: 3px 5px $dark;
|
|
||||||
border-color: $light;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre.src {
|
|
||||||
&::before {
|
|
||||||
background-color: $light;
|
|
||||||
color: $dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar, header {
|
|
||||||
background: $bg-nav;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar svg {
|
|
||||||
fill: $dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status {
|
|
||||||
background: $gradient-accent3-light-left;
|
|
||||||
color: $dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip {
|
|
||||||
border-bottom: $tooltip-underline-size dotted $accent3;
|
|
||||||
|
|
||||||
.tooltiptext {
|
|
||||||
background-color: $accent3;
|
|
||||||
color: $dark;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
border-color: $accent3 transparent transparent transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown {
|
|
||||||
background: $accent3;
|
|
||||||
color: $dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content {
|
|
||||||
a {
|
|
||||||
box-shadow: inset 0 -3px 0 $accent3;
|
|
||||||
transition: box-shadow 300ms ease-in-out;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
box-shadow: inset 0 -23px 0 $accent3;
|
|
||||||
transition: box-shadow 300ms ease-in-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
table, th, td {
|
|
||||||
border: 1px solid $dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
background: darken($light, 5%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gentree {
|
|
||||||
filter: invert(0%);
|
|
||||||
transition: filter 1s ease-in-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark, .black {
|
|
||||||
$bg-nav: $gradient-accent2-dark-right;
|
|
||||||
$border-color: $dark;
|
|
||||||
|
|
||||||
color: $light;
|
|
||||||
background: $dark;
|
|
||||||
|
|
||||||
transition: background 500ms ease-in-out, color 1s ease-in-out;
|
|
||||||
|
|
||||||
pre {
|
|
||||||
box-shadow: 3px 3px $dark;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre.src {
|
|
||||||
&::before {
|
|
||||||
background-color: $dark;
|
|
||||||
color: $light;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar, header {
|
|
||||||
background: $bg-nav;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar svg {
|
|
||||||
fill: $light;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status {
|
|
||||||
background: $gradient-accent2-dark-left;
|
|
||||||
color: $light;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip {
|
|
||||||
border-bottom: $tooltip-underline-size dotted $accent1;
|
|
||||||
|
|
||||||
.tooltiptext {
|
|
||||||
background-color: $accent1;
|
|
||||||
color: $light;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
border-color: $accent1 transparent transparent transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown {
|
|
||||||
background: $dark;
|
|
||||||
color: $light;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content {
|
|
||||||
a {
|
|
||||||
box-shadow: inset 0 -3px 0 $accent2;
|
|
||||||
transition: box-shadow 300ms ease-in-out;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
box-shadow: inset 0 -23px 0 $accent2;
|
|
||||||
transition: box-shadow 300ms ease-in-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
table, th, td {
|
|
||||||
border: 1px solid $accent1;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
background: darken($dark, 2.5%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gentree {
|
|
||||||
filter: invert(100%);
|
|
||||||
transition: filter 1s ease-in-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.black {
|
|
||||||
$bg-nav: $gradient-accent1-black-right;
|
|
||||||
|
|
||||||
background: $black;
|
|
||||||
|
|
||||||
pre {
|
|
||||||
box-shadow: 3px 3px $light;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre.src {
|
|
||||||
&::before {
|
|
||||||
background-color: $black;
|
|
||||||
color: $light;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar, header {
|
|
||||||
background: $bg-nav;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status {
|
|
||||||
background: $gradient-accent1-black-left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown {
|
|
||||||
background: $dark;
|
|
||||||
color: $light;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content {
|
|
||||||
a {
|
|
||||||
box-shadow: inset 0 -3px 0 $accent1;
|
|
||||||
transition: box-shadow 300ms ease-in-out;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
box-shadow: inset 0 -23px 0 $accent1;
|
|
||||||
transition: box-shadow 300ms ease-in-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
table, th, td {
|
|
||||||
border: 1px solid $light;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
background: lighten($black, 15%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Style *********************************************************************/
|
|
||||||
|
|
||||||
* {
|
* {
|
||||||
outline: none;
|
outline: none;
|
||||||
@ -343,7 +88,6 @@ header {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
min-height: 3rem;
|
min-height: 3rem;
|
||||||
margin-top: 1rem;
|
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
||||||
@ -363,7 +107,7 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#table-of-contents, #drop-page {
|
#table-of-contents, #drop-page {
|
||||||
top: $navbar-height / 1.3;
|
top: $navbar-height;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
height: 80vh;
|
height: 80vh;
|
||||||
@ -373,12 +117,12 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#theme-dropdown {
|
#theme-dropdown {
|
||||||
width: 150px;
|
width: 250px;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
transform: translateX(-75%);
|
transform: translateX(-75%);
|
||||||
}
|
}
|
||||||
|
|
||||||
#lightBtn, #darkBtn, #blackBtn {
|
.themeBtn {
|
||||||
content: ' ';
|
content: ' ';
|
||||||
border: 2px solid white;
|
border: 2px solid white;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
@ -389,18 +133,6 @@ header {
|
|||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#lightBtn {
|
|
||||||
background: $light;
|
|
||||||
}
|
|
||||||
|
|
||||||
#darkBtn {
|
|
||||||
background: $dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
#blackBtn {
|
|
||||||
background: $black;
|
|
||||||
}
|
|
||||||
|
|
||||||
#drop-page, #table-of-contents {
|
#drop-page, #table-of-contents {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
@ -616,7 +348,5 @@ ul {
|
|||||||
}
|
}
|
||||||
|
|
||||||
pre.src {
|
pre.src {
|
||||||
background: $dark;
|
|
||||||
color: $light;
|
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|||||||
373
web/style/themes.scss
Normal file
373
web/style/themes.scss
Normal file
@ -0,0 +1,373 @@
|
|||||||
|
// Variables //////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
|
$tooltip-underline-size: 3px;
|
||||||
|
|
||||||
|
// Themes /////////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
|
$dark: rgba( 52, 73, 94, 1);
|
||||||
|
$nord: rgba( 46, 52, 64, 1);
|
||||||
|
$black: rgba( 0, 0, 0, 1);
|
||||||
|
$accent1: rgba( 93, 115, 126, 1);
|
||||||
|
$accent2: rgba( 92, 172, 126, 1);
|
||||||
|
$accent3: rgba(197, 193, 155, 1);
|
||||||
|
$light: #eee;
|
||||||
|
$grey1: #f8f8f8;
|
||||||
|
$grey2: #dbe1e8;
|
||||||
|
$grey3: #b2becd;
|
||||||
|
$grey4: #6c7983;
|
||||||
|
$grey5: #454e56;
|
||||||
|
$grey6: #12181b;
|
||||||
|
|
||||||
|
// Accent 1
|
||||||
|
// Black
|
||||||
|
$gradient-accent1-black-left: linear-gradient(to left, $black, $accent1, $accent1);
|
||||||
|
$gradient-accent1-black-right: linear-gradient(to right, $black, $accent1, $accent1);
|
||||||
|
// Dark
|
||||||
|
$gradient-accent1-dark-left: linear-gradient(to left, $dark, $accent1);
|
||||||
|
$gradient-accent1-dark-right: linear-gradient(to right, $dark, $accent1);
|
||||||
|
// Light
|
||||||
|
$gradient-accent1-light-left: linear-gradient(to left, $light, $accent1);
|
||||||
|
$gradient-accent1-light-right: linear-gradient(to right, $light, $accent1);
|
||||||
|
// Accent 2
|
||||||
|
// Black
|
||||||
|
$gradient-accent2-black-left: linear-gradient(to left, $black, $accent2, $accent2);
|
||||||
|
$gradient-accent2-black-right: linear-gradient(to right, $black, $accent2, $accent2);
|
||||||
|
// Dark
|
||||||
|
$gradient-accent2-dark-left: linear-gradient(to left, $dark, $accent2);
|
||||||
|
$gradient-accent2-dark-right: linear-gradient(to right, $dark, $accent2);
|
||||||
|
// Light
|
||||||
|
$gradient-accent2-light-left: linear-gradient(to left, $light, $accent2);
|
||||||
|
$gradient-accent2-light-right: linear-gradient(to right, $light, $accent2);
|
||||||
|
// Accent 3
|
||||||
|
// Black
|
||||||
|
$gradient-accent3-black-left: linear-gradient(to left, $black, $accent3, $accent3);
|
||||||
|
$gradient-accent3-black-right: linear-gradient(to right, $black, $accent3, $accent3);
|
||||||
|
// Dark
|
||||||
|
$gradient-accent3-dark-left: linear-gradient(to left, $dark, $accent3);
|
||||||
|
$gradient-accent3-dark-right: linear-gradient(to right, $dark, $accent3);
|
||||||
|
// Light
|
||||||
|
$gradient-accent3-light-left: linear-gradient(to left, $light, $accent3);
|
||||||
|
$gradient-accent3-light-right: linear-gradient(to right, $light, $accent3);
|
||||||
|
|
||||||
|
.light {
|
||||||
|
$bg-nav: $gradient-accent3-light-right;
|
||||||
|
$border-color: $accent1;
|
||||||
|
|
||||||
|
color: $dark;
|
||||||
|
background: $light;
|
||||||
|
|
||||||
|
transition: background 500ms ease-in-out, color 1s ease-in-out;
|
||||||
|
|
||||||
|
pre {
|
||||||
|
box-shadow: 3px 5px $dark;
|
||||||
|
border-color: $light;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre.src {
|
||||||
|
&::before {
|
||||||
|
background-color: $light;
|
||||||
|
color: $dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar, header {
|
||||||
|
background: $bg-nav;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar svg {
|
||||||
|
fill: $dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
background: $gradient-accent3-light-left;
|
||||||
|
color: $dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
border-bottom: $tooltip-underline-size dotted $accent3;
|
||||||
|
|
||||||
|
.tooltiptext {
|
||||||
|
background-color: $accent3;
|
||||||
|
color: $dark;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
border-color: $accent3 transparent transparent transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown {
|
||||||
|
background: $accent3;
|
||||||
|
color: $dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content {
|
||||||
|
a {
|
||||||
|
box-shadow: inset 0 -3px 0 $accent3;
|
||||||
|
transition: box-shadow 300ms ease-in-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: inset 0 -23px 0 $accent3;
|
||||||
|
transition: box-shadow 300ms ease-in-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table, th, td {
|
||||||
|
border: 1px solid $dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background: darken($light, 5%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gentree {
|
||||||
|
filter: invert(0%);
|
||||||
|
transition: filter 1s ease-in-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark, .black {
|
||||||
|
$bg-nav: $gradient-accent2-dark-right;
|
||||||
|
$border-color: $dark;
|
||||||
|
|
||||||
|
color: $light;
|
||||||
|
background: $dark;
|
||||||
|
|
||||||
|
transition: background 500ms ease-in-out, color 1s ease-in-out;
|
||||||
|
|
||||||
|
pre {
|
||||||
|
box-shadow: 3px 3px $dark;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre.src {
|
||||||
|
&::before {
|
||||||
|
background-color: $dark;
|
||||||
|
color: $light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar, header {
|
||||||
|
background: $bg-nav;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar svg {
|
||||||
|
fill: $light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
background: $gradient-accent2-dark-left;
|
||||||
|
color: $light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
border-bottom: $tooltip-underline-size dotted $accent1;
|
||||||
|
|
||||||
|
.tooltiptext {
|
||||||
|
background-color: $accent1;
|
||||||
|
color: $light;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
border-color: $accent1 transparent transparent transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown {
|
||||||
|
background: $dark;
|
||||||
|
color: $light;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content {
|
||||||
|
a {
|
||||||
|
box-shadow: inset 0 -3px 0 $accent2;
|
||||||
|
transition: box-shadow 300ms ease-in-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: inset 0 -23px 0 $accent2;
|
||||||
|
transition: box-shadow 300ms ease-in-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table, th, td {
|
||||||
|
border: 1px solid $accent1;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background: darken($dark, 2.5%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gentree {
|
||||||
|
filter: invert(100%);
|
||||||
|
transition: filter 1s ease-in-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.black {
|
||||||
|
$bg-nav: $gradient-accent1-black-right;
|
||||||
|
|
||||||
|
background: $black;
|
||||||
|
|
||||||
|
pre {
|
||||||
|
box-shadow: 3px 3px $light;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre.src {
|
||||||
|
&::before {
|
||||||
|
background-color: $black;
|
||||||
|
color: $light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar, header {
|
||||||
|
background: $bg-nav;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
background: $gradient-accent1-black-left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown {
|
||||||
|
background: $dark;
|
||||||
|
color: $light;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content {
|
||||||
|
a {
|
||||||
|
box-shadow: inset 0 -3px 0 $accent1;
|
||||||
|
transition: box-shadow 300ms ease-in-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: inset 0 -23px 0 $accent1;
|
||||||
|
transition: box-shadow 300ms ease-in-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table, th, td {
|
||||||
|
border: 1px solid $light;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background: lighten($black, 15%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nord {
|
||||||
|
$dark: #2e3440;
|
||||||
|
$black: #000000;
|
||||||
|
$accent1: #8fbcbb;
|
||||||
|
$accent2: #a3be8c;
|
||||||
|
$accent3: #ebcb8b;
|
||||||
|
$light: #eceff4;
|
||||||
|
$grey1: #e5e9f0;
|
||||||
|
$grey2: #d8dee9;
|
||||||
|
$grey3: #4c566a;
|
||||||
|
$grey4: #434c5e;
|
||||||
|
$grey5: #3b4252;
|
||||||
|
$grey6: #12181b;
|
||||||
|
$gradient-dark-to-light: linear-gradient(to right, $grey3, $grey5);
|
||||||
|
// Accent 1
|
||||||
|
// Black
|
||||||
|
|
||||||
|
$bg-nav: $gradient-dark-to-light;
|
||||||
|
$border-color: $dark;
|
||||||
|
|
||||||
|
color: $light;
|
||||||
|
background: $dark;
|
||||||
|
|
||||||
|
transition: background 500ms ease-in-out, color 1s ease-in-out;
|
||||||
|
|
||||||
|
pre {
|
||||||
|
box-shadow: 3px 3px $dark;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre.src {
|
||||||
|
&::before {
|
||||||
|
background-color: $dark;
|
||||||
|
color: $light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar, header {
|
||||||
|
background: $bg-nav;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar svg {
|
||||||
|
fill: $light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
background: $gradient-dark-to-light;
|
||||||
|
color: $light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
border-bottom: $tooltip-underline-size dotted $accent1;
|
||||||
|
|
||||||
|
.tooltiptext {
|
||||||
|
background-color: $accent1;
|
||||||
|
color: $light;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
border-color: $accent1 transparent transparent transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown {
|
||||||
|
background: $grey3;
|
||||||
|
color: $light;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content {
|
||||||
|
a {
|
||||||
|
box-shadow: inset 0 -3px 0 $accent1;
|
||||||
|
transition: box-shadow 300ms ease-in-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: inset 0 -23px 0 $accent1;
|
||||||
|
transition: box-shadow 300ms ease-in-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table, th, td {
|
||||||
|
border: 1px solid $accent1;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background: darken($dark, 2.5%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gentree {
|
||||||
|
filter: invert(100%);
|
||||||
|
transition: filter 1s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#lightBtn {
|
||||||
|
background: $light;
|
||||||
|
}
|
||||||
|
|
||||||
|
#darkBtn {
|
||||||
|
background: $dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nordBtn {
|
||||||
|
background: $nord;
|
||||||
|
}
|
||||||
|
|
||||||
|
#blackBtn {
|
||||||
|
background: $black;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre.src {
|
||||||
|
background: $dark;
|
||||||
|
color: $light;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user