Dark mode (#66)
This commit is contained in:
Robert Kaussow
GitHub
parent
5eff47c68b
commit
59be9a504f
50 changed files with 1527 additions and 1154 deletions
|
|
@ -1,7 +1,76 @@
|
|||
:root,
|
||||
:root[color-mode="light"] {
|
||||
@include light_mode;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
@include light_mode;
|
||||
}
|
||||
}
|
||||
|
||||
:root[color-mode="dark"] {
|
||||
@include dark_mode;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
@include dark_mode;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: $font-size-base;
|
||||
letter-spacing: 0.33px;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
&.color-toggle-hidden {
|
||||
#gdoc-dark-mode {
|
||||
.gdoc_brightness_auto,
|
||||
.gdoc_brightness_dark,
|
||||
.gdoc_brightness_light {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.color-toggle-light {
|
||||
#gdoc-dark-mode {
|
||||
.gdoc_brightness_light {
|
||||
display: inline-block;
|
||||
}
|
||||
.gdoc_brightness_auto,
|
||||
.gdoc_brightness_dark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.color-toggle-dark {
|
||||
#gdoc-dark-mode {
|
||||
.gdoc_brightness_dark {
|
||||
display: inline-block;
|
||||
}
|
||||
.gdoc_brightness_auto,
|
||||
.gdoc_brightness_light {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.color-toggle-auto {
|
||||
#gdoc-dark-mode {
|
||||
.gdoc_brightness_light {
|
||||
display: none;
|
||||
}
|
||||
.gdoc_brightness_dark {
|
||||
display: none;
|
||||
}
|
||||
.gdoc_brightness_auto {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
|
|
@ -11,11 +80,6 @@ body {
|
|||
}
|
||||
|
||||
body {
|
||||
color: $body-font-color;
|
||||
background: $body-background;
|
||||
|
||||
font-weight: $body-font-weight;
|
||||
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
|
@ -45,14 +109,14 @@ h6 {
|
|||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $color-link;
|
||||
color: var(--link-color);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: $color-link-visited;
|
||||
color: var(--link-color-visited);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -61,7 +125,7 @@ img {
|
|||
}
|
||||
|
||||
.fake-link:hover {
|
||||
background-image: linear-gradient($color-link, $color-link);
|
||||
background-image: linear-gradient(var(--link-color), var(--link-color));
|
||||
background-position: 0 100%;
|
||||
background-size: 100% 1px;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -72,6 +136,11 @@ img {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
|
||||
color: var(--body-font-color);
|
||||
background: var(--body-background);
|
||||
|
||||
font-weight: $body-font-weight;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -93,8 +162,8 @@ img {
|
|||
}
|
||||
|
||||
.gdoc-header {
|
||||
background: $main-color;
|
||||
color: $white;
|
||||
background: var(--header-background);
|
||||
color: var(--header-font-color);
|
||||
border-bottom: 0.3em solid $second-color;
|
||||
|
||||
&__link,
|
||||
|
|
@ -220,7 +289,7 @@ img {
|
|||
.gdoc-nav__entry,
|
||||
.gdoc-search__entry {
|
||||
flex: 1;
|
||||
color: $body-font-color;
|
||||
color: var(--body-font-color);
|
||||
|
||||
&:hover,
|
||||
&.is-active {
|
||||
|
|
@ -229,7 +298,7 @@ img {
|
|||
}
|
||||
|
||||
&:visited {
|
||||
color: $body-font-color;
|
||||
color: var(--body-font-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -243,17 +312,17 @@ img {
|
|||
margin-bottom: $padding-16 * 1.2;
|
||||
|
||||
.icon {
|
||||
color: $gray-600;
|
||||
color: var(--control-icons);
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: $color-link;
|
||||
color: var(--link-color);
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
background: $gray-100;
|
||||
background: var(--accent-color-lite);
|
||||
padding: $padding-8 $padding-16;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
|
@ -268,7 +337,7 @@ img {
|
|||
|
||||
&__nav {
|
||||
&:hover {
|
||||
background-image: linear-gradient($color-link, $color-link);
|
||||
background-image: linear-gradient(var(--link-color), var(--link-color));
|
||||
background-position: 0 100%;
|
||||
background-size: 100% 1px;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -285,7 +354,7 @@ img {
|
|||
|
||||
&__anchorwrap {
|
||||
&:hover .gdoc-page__anchor .icon {
|
||||
color: $gray-500;
|
||||
color: var(--control-icons);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -327,14 +396,14 @@ img {
|
|||
|
||||
a,
|
||||
a:visited {
|
||||
color: $body-font-color;
|
||||
color: var(--body-font-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background: none;
|
||||
text-decoration: underline;
|
||||
color: $body-font-color;
|
||||
color: var(--body-font-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -365,15 +434,15 @@ img {
|
|||
a,
|
||||
a:hover,
|
||||
a:visited {
|
||||
color: $color-link;
|
||||
color: var(--link-color);
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gdoc-footer {
|
||||
background: $second-color;
|
||||
color: $white;
|
||||
background: var(--footer-background);
|
||||
color: var(--footer-font-color);
|
||||
|
||||
&__item {
|
||||
margin-right: 1em;
|
||||
|
|
@ -381,10 +450,10 @@ img {
|
|||
}
|
||||
|
||||
&__link {
|
||||
color: $color-link-footer;
|
||||
color: var(--footer-link-color);
|
||||
|
||||
&:visited {
|
||||
color: $color-link-footer;
|
||||
color: var(--footer-link-color-visited);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -396,7 +465,7 @@ img {
|
|||
position: absolute;
|
||||
top: 0.625em;
|
||||
left: $padding-16 * 0.5;
|
||||
color: $gray-600;
|
||||
color: var(--control-icons);
|
||||
width: $font-size-16;
|
||||
height: $font-size-16;
|
||||
}
|
||||
|
|
@ -412,11 +481,11 @@ img {
|
|||
padding: $padding-8;
|
||||
padding-left: $padding-32;
|
||||
|
||||
border: $border-1 solid $gray-200;
|
||||
border: $border-1 solid var(--accent-color);
|
||||
border-radius: $border-radius;
|
||||
|
||||
background: $gray-100;
|
||||
color: $body-font-color;
|
||||
background: var(--accent-color-lite);
|
||||
color: var(--body-font-color);
|
||||
|
||||
&:required + &__spinner {
|
||||
display: block;
|
||||
|
|
@ -433,7 +502,7 @@ img {
|
|||
height: $padding-16;
|
||||
|
||||
border: $border-1 solid transparent;
|
||||
border-top-color: $body-font-color;
|
||||
border-top-color: var(--body-font-color);
|
||||
border-radius: 50%;
|
||||
|
||||
@include spin(1s);
|
||||
|
|
@ -441,9 +510,10 @@ img {
|
|||
|
||||
&__list {
|
||||
visibility: hidden;
|
||||
background: $white;
|
||||
background: var(--body-background);
|
||||
border-radius: $border-radius;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 1px 3px 0 var(--accent-color),
|
||||
0 1px 2px 0 var(--accent-color-lite);
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: $padding-8;
|
||||
|
|
@ -465,7 +535,6 @@ img {
|
|||
|
||||
> li > span {
|
||||
font-weight: bold;
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
> li + li {
|
||||
|
|
@ -491,12 +560,12 @@ img {
|
|||
.icon {
|
||||
width: $font-size-16 * 8;
|
||||
height: $font-size-16 * 8;
|
||||
color: $gray-700;
|
||||
color: var(--body-font-color);
|
||||
}
|
||||
|
||||
&__link,
|
||||
&__link:visited {
|
||||
color: $color-link;
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
&__message {
|
||||
|
|
@ -529,7 +598,7 @@ img {
|
|||
|
||||
a,
|
||||
a:visited {
|
||||
color: $color-link;
|
||||
color: var(--link-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
378
src/sass/_chroma_dark.scss
Normal file
378
src/sass/_chroma_dark.scss
Normal file
|
|
@ -0,0 +1,378 @@
|
|||
@mixin chroma_dark {
|
||||
/* Theme: Dracula */
|
||||
/* Background */
|
||||
.chroma {
|
||||
color: #999;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.chroma code {
|
||||
background-color: var(--code-background);
|
||||
display: block;
|
||||
line-height: 1.45;
|
||||
font-size: 0.85em;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
.chroma .lntable td:first-child code {
|
||||
border-radius: 0;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
.chroma .lntable td:nth-child(2) code {
|
||||
border-radius: 0;
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
.chroma .lntable td:nth-child(2) code .hl {
|
||||
width: auto;
|
||||
margin-left: -0.5em;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
pre.chroma {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> pre.chroma code {
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Other */
|
||||
.chroma .x {
|
||||
}
|
||||
/* Error */
|
||||
.chroma .err {
|
||||
}
|
||||
/* LineTableTD */
|
||||
.chroma .lntd {
|
||||
vertical-align: top;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
/* LineTable */
|
||||
.chroma .lntable {
|
||||
border-spacing: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
display: block;
|
||||
}
|
||||
.chroma .lntable td:first-child code {
|
||||
background-color: var(--code-accent-color-lite);
|
||||
border-right: $border-1 solid var(--code-accent-color);
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
.chroma .lntable td code {
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
.chroma .lntable td:nth-child(2) {
|
||||
width: 100%;
|
||||
margin-left: 2em;
|
||||
}
|
||||
/* LineHighlight */
|
||||
.chroma .hl {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: #ffffcc;
|
||||
}
|
||||
/* LineNumbersTable */
|
||||
.chroma .lnt {
|
||||
padding: 0 0.8em;
|
||||
}
|
||||
/* LineNumbers */
|
||||
.chroma .ln {
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
/* Keyword */
|
||||
.chroma .k {
|
||||
color: #ff79c6;
|
||||
}
|
||||
/* KeywordConstant */
|
||||
.chroma .kc {
|
||||
color: #ff79c6;
|
||||
}
|
||||
/* KeywordDeclaration */
|
||||
.chroma .kd {
|
||||
color: #8be9fd;
|
||||
font-style: italic;
|
||||
}
|
||||
/* KeywordNamespace */
|
||||
.chroma .kn {
|
||||
color: #ff79c6;
|
||||
}
|
||||
/* KeywordPseudo */
|
||||
.chroma .kp {
|
||||
color: #ff79c6;
|
||||
}
|
||||
/* KeywordReserved */
|
||||
.chroma .kr {
|
||||
color: #ff79c6;
|
||||
}
|
||||
/* KeywordType */
|
||||
.chroma .kt {
|
||||
color: #8be9fd;
|
||||
}
|
||||
/* Name */
|
||||
.chroma .n {
|
||||
}
|
||||
/* NameAttribute */
|
||||
.chroma .na {
|
||||
color: #50fa7b;
|
||||
}
|
||||
/* NameBuiltin */
|
||||
.chroma .nb {
|
||||
color: #8be9fd;
|
||||
font-style: italic;
|
||||
}
|
||||
/* NameBuiltinPseudo */
|
||||
.chroma .bp {
|
||||
}
|
||||
/* NameClass */
|
||||
.chroma .nc {
|
||||
color: #50fa7b;
|
||||
}
|
||||
/* NameConstant */
|
||||
.chroma .no {
|
||||
}
|
||||
/* NameDecorator */
|
||||
.chroma .nd {
|
||||
}
|
||||
/* NameEntity */
|
||||
.chroma .ni {
|
||||
}
|
||||
/* NameException */
|
||||
.chroma .ne {
|
||||
}
|
||||
/* NameFunction */
|
||||
.chroma .nf {
|
||||
color: #50fa7b;
|
||||
}
|
||||
/* NameFunctionMagic */
|
||||
.chroma .fm {
|
||||
}
|
||||
/* NameLabel */
|
||||
.chroma .nl {
|
||||
color: #8be9fd;
|
||||
font-style: italic;
|
||||
}
|
||||
/* NameNamespace */
|
||||
.chroma .nn {
|
||||
}
|
||||
/* NameOther */
|
||||
.chroma .nx {
|
||||
}
|
||||
/* NameProperty */
|
||||
.chroma .py {
|
||||
}
|
||||
/* NameTag */
|
||||
.chroma .nt {
|
||||
color: #ff79c6;
|
||||
}
|
||||
/* NameVariable */
|
||||
.chroma .nv {
|
||||
color: #8be9fd;
|
||||
font-style: italic;
|
||||
}
|
||||
/* NameVariableClass */
|
||||
.chroma .vc {
|
||||
color: #8be9fd;
|
||||
font-style: italic;
|
||||
}
|
||||
/* NameVariableGlobal */
|
||||
.chroma .vg {
|
||||
color: #8be9fd;
|
||||
font-style: italic;
|
||||
}
|
||||
/* NameVariableInstance */
|
||||
.chroma .vi {
|
||||
color: #8be9fd;
|
||||
font-style: italic;
|
||||
}
|
||||
/* NameVariableMagic */
|
||||
.chroma .vm {
|
||||
}
|
||||
/* Literal */
|
||||
.chroma .l {
|
||||
}
|
||||
/* LiteralDate */
|
||||
.chroma .ld {
|
||||
}
|
||||
/* LiteralString */
|
||||
.chroma .s {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralStringAffix */
|
||||
.chroma .sa {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralStringBacktick */
|
||||
.chroma .sb {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralStringChar */
|
||||
.chroma .sc {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralStringDelimiter */
|
||||
.chroma .dl {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralStringDoc */
|
||||
.chroma .sd {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralStringDouble */
|
||||
.chroma .s2 {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralStringEscape */
|
||||
.chroma .se {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralStringHeredoc */
|
||||
.chroma .sh {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralStringInterpol */
|
||||
.chroma .si {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralStringOther */
|
||||
.chroma .sx {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralStringRegex */
|
||||
.chroma .sr {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralStringSingle */
|
||||
.chroma .s1 {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralStringSymbol */
|
||||
.chroma .ss {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralNumber */
|
||||
.chroma .m {
|
||||
color: #bd93f9;
|
||||
}
|
||||
/* LiteralNumberBin */
|
||||
.chroma .mb {
|
||||
color: #bd93f9;
|
||||
}
|
||||
/* LiteralNumberFloat */
|
||||
.chroma .mf {
|
||||
color: #bd93f9;
|
||||
}
|
||||
/* LiteralNumberHex */
|
||||
.chroma .mh {
|
||||
color: #bd93f9;
|
||||
}
|
||||
/* LiteralNumberInteger */
|
||||
.chroma .mi {
|
||||
color: #bd93f9;
|
||||
}
|
||||
/* LiteralNumberIntegerLong */
|
||||
.chroma .il {
|
||||
color: #bd93f9;
|
||||
}
|
||||
/* LiteralNumberOct */
|
||||
.chroma .mo {
|
||||
color: #bd93f9;
|
||||
}
|
||||
/* Operator */
|
||||
.chroma .o {
|
||||
color: #ff79c6;
|
||||
}
|
||||
/* OperatorWord */
|
||||
.chroma .ow {
|
||||
color: #ff79c6;
|
||||
}
|
||||
/* Punctuation */
|
||||
.chroma .p {
|
||||
}
|
||||
/* Comment */
|
||||
.chroma .c {
|
||||
color: #6272a4;
|
||||
}
|
||||
/* CommentHashbang */
|
||||
.chroma .ch {
|
||||
color: #6272a4;
|
||||
}
|
||||
/* CommentMultiline */
|
||||
.chroma .cm {
|
||||
color: #6272a4;
|
||||
}
|
||||
/* CommentSingle */
|
||||
.chroma .c1 {
|
||||
color: #6272a4;
|
||||
}
|
||||
/* CommentSpecial */
|
||||
.chroma .cs {
|
||||
color: #6272a4;
|
||||
}
|
||||
/* CommentPreproc */
|
||||
.chroma .cp {
|
||||
color: #ff79c6;
|
||||
}
|
||||
/* CommentPreprocFile */
|
||||
.chroma .cpf {
|
||||
color: #ff79c6;
|
||||
}
|
||||
/* Generic */
|
||||
.chroma .g {
|
||||
}
|
||||
/* GenericDeleted */
|
||||
.chroma .gd {
|
||||
color: #8b080b;
|
||||
}
|
||||
/* GenericEmph */
|
||||
.chroma .ge {
|
||||
text-decoration: underline;
|
||||
}
|
||||
/* GenericError */
|
||||
.chroma .gr {
|
||||
}
|
||||
/* GenericHeading */
|
||||
.chroma .gh {
|
||||
font-weight: bold;
|
||||
}
|
||||
/* GenericInserted */
|
||||
.chroma .gi {
|
||||
font-weight: bold;
|
||||
}
|
||||
/* GenericOutput */
|
||||
.chroma .go {
|
||||
color: #44475a;
|
||||
}
|
||||
/* GenericPrompt */
|
||||
.chroma .gp {
|
||||
}
|
||||
/* GenericStrong */
|
||||
.chroma .gs {
|
||||
}
|
||||
/* GenericSubheading */
|
||||
.chroma .gu {
|
||||
font-weight: bold;
|
||||
}
|
||||
/* GenericTraceback */
|
||||
.chroma .gt {
|
||||
}
|
||||
/* GenericUnderline */
|
||||
.chroma .gl {
|
||||
text-decoration: underline;
|
||||
}
|
||||
/* TextWhitespace */
|
||||
.chroma .w {
|
||||
}
|
||||
}
|
||||
|
|
@ -1,377 +0,0 @@
|
|||
.chroma {
|
||||
background-color: #ffffff;
|
||||
color: #555;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.chroma code {
|
||||
background-color: $color-code;
|
||||
display: block;
|
||||
line-height: 1.45;
|
||||
font-size: 0.85em;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
.chroma .lntable td:first-child code {
|
||||
border-radius: 0;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
.chroma .lntable td:nth-child(2) code {
|
||||
border-radius: 0;
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
.chroma .lntable td:nth-child(2) code .hl {
|
||||
width: auto;
|
||||
margin-left: -0.5em;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
pre.chroma {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> pre.chroma code {
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Error */
|
||||
.chroma .err {
|
||||
color: #a61717;
|
||||
background-color: #e3d2d2;
|
||||
}
|
||||
/* LineTableTD */
|
||||
.chroma .lntd {
|
||||
vertical-align: top;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
/* LineTable */
|
||||
.chroma .lntable {
|
||||
border-spacing: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
display: block;
|
||||
}
|
||||
.chroma .lntable td:first-child code {
|
||||
background-color: $gray-200;
|
||||
border-right: $border-1 solid #dcdfe3;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
.chroma .lntable td code {
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
.chroma .lntable td:nth-child(2) {
|
||||
width: 100%;
|
||||
margin-left: 2em;
|
||||
}
|
||||
/* LineHighlight */
|
||||
.chroma .hl {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: #ffffcc;
|
||||
}
|
||||
/* LineNumbersTable */
|
||||
.chroma .lnt {
|
||||
padding: 0 0.8em;
|
||||
}
|
||||
/* LineNumbers */
|
||||
.chroma .ln {
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
}
|
||||
/* Keyword */
|
||||
.chroma .k {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* KeywordConstant */
|
||||
.chroma .kc {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* KeywordDeclaration */
|
||||
.chroma .kd {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* KeywordNamespace */
|
||||
.chroma .kn {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* KeywordPseudo */
|
||||
.chroma .kp {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* KeywordReserved */
|
||||
.chroma .kr {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* KeywordType */
|
||||
.chroma .kt {
|
||||
color: #445588;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* NameAttribute */
|
||||
.chroma .na {
|
||||
color: #008080;
|
||||
}
|
||||
/* NameBuiltin */
|
||||
.chroma .nb {
|
||||
color: #0086b3;
|
||||
}
|
||||
/* NameBuiltinPseudo */
|
||||
.chroma .bp {
|
||||
color: #999999;
|
||||
}
|
||||
/* NameClass */
|
||||
.chroma .nc {
|
||||
color: #445588;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* NameConstant */
|
||||
.chroma .no {
|
||||
color: #008080;
|
||||
}
|
||||
/* NameDecorator */
|
||||
.chroma .nd {
|
||||
color: #3c5d5d;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* NameEntity */
|
||||
.chroma .ni {
|
||||
color: #800080;
|
||||
}
|
||||
/* NameException */
|
||||
.chroma .ne {
|
||||
color: #990000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* NameFunction */
|
||||
.chroma .nf {
|
||||
color: #990000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* NameLabel */
|
||||
.chroma .nl {
|
||||
color: #990000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* NameNamespace */
|
||||
.chroma .nn {
|
||||
color: #555555;
|
||||
}
|
||||
/* NameTag */
|
||||
.chroma .nt {
|
||||
color: #000080;
|
||||
}
|
||||
/* NameVariable */
|
||||
.chroma .nv {
|
||||
color: #008080;
|
||||
}
|
||||
/* NameVariableClass */
|
||||
.chroma .vc {
|
||||
color: #008080;
|
||||
}
|
||||
/* NameVariableGlobal */
|
||||
.chroma .vg {
|
||||
color: #008080;
|
||||
}
|
||||
/* NameVariableInstance */
|
||||
.chroma .vi {
|
||||
color: #008080;
|
||||
}
|
||||
/* LiteralString */
|
||||
.chroma .s {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringAffix */
|
||||
.chroma .sa {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringBacktick */
|
||||
.chroma .sb {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringChar */
|
||||
.chroma .sc {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringDelimiter */
|
||||
.chroma .dl {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringDoc */
|
||||
.chroma .sd {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringDouble */
|
||||
.chroma .s2 {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringEscape */
|
||||
.chroma .se {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringHeredoc */
|
||||
.chroma .sh {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringInterpol */
|
||||
.chroma .si {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringOther */
|
||||
.chroma .sx {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringRegex */
|
||||
.chroma .sr {
|
||||
color: #009926;
|
||||
}
|
||||
/* LiteralStringSingle */
|
||||
.chroma .s1 {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringSymbol */
|
||||
.chroma .ss {
|
||||
color: #990073;
|
||||
}
|
||||
/* LiteralNumber */
|
||||
.chroma .m {
|
||||
color: #009999;
|
||||
}
|
||||
/* LiteralNumberBin */
|
||||
.chroma .mb {
|
||||
color: #009999;
|
||||
}
|
||||
/* LiteralNumberFloat */
|
||||
.chroma .mf {
|
||||
color: #009999;
|
||||
}
|
||||
/* LiteralNumberHex */
|
||||
.chroma .mh {
|
||||
color: #009999;
|
||||
}
|
||||
/* LiteralNumberInteger */
|
||||
.chroma .mi {
|
||||
color: #009999;
|
||||
}
|
||||
/* LiteralNumberIntegerLong */
|
||||
.chroma .il {
|
||||
color: #009999;
|
||||
}
|
||||
/* LiteralNumberOct */
|
||||
.chroma .mo {
|
||||
color: #009999;
|
||||
}
|
||||
/* Operator */
|
||||
.chroma .o {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* OperatorWord */
|
||||
.chroma .ow {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* Comment */
|
||||
.chroma .c {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
}
|
||||
/* CommentHashbang */
|
||||
.chroma .ch {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
}
|
||||
/* CommentMultiline */
|
||||
.chroma .cm {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
}
|
||||
/* CommentSingle */
|
||||
.chroma .c1 {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
}
|
||||
/* CommentSpecial */
|
||||
.chroma .cs {
|
||||
color: #999999;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
/* CommentPreproc */
|
||||
.chroma .cp {
|
||||
color: #999999;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
/* CommentPreprocFile */
|
||||
.chroma .cpf {
|
||||
color: #999999;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
/* GenericDeleted */
|
||||
.chroma .gd {
|
||||
color: #000000;
|
||||
background-color: #ffdddd;
|
||||
}
|
||||
/* GenericEmph */
|
||||
.chroma .ge {
|
||||
color: #000000;
|
||||
font-style: italic;
|
||||
}
|
||||
/* GenericError */
|
||||
.chroma .gr {
|
||||
color: #aa0000;
|
||||
}
|
||||
/* GenericHeading */
|
||||
.chroma .gh {
|
||||
color: #999999;
|
||||
}
|
||||
/* GenericInserted */
|
||||
.chroma .gi {
|
||||
color: #000000;
|
||||
background-color: #ddffdd;
|
||||
}
|
||||
/* GenericOutput */
|
||||
.chroma .go {
|
||||
color: #888888;
|
||||
}
|
||||
/* GenericPrompt */
|
||||
.chroma .gp {
|
||||
color: #555555;
|
||||
}
|
||||
/* GenericStrong */
|
||||
.chroma .gs {
|
||||
font-weight: bold;
|
||||
}
|
||||
/* GenericSubheading */
|
||||
.chroma .gu {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
/* GenericTraceback */
|
||||
.chroma .gt {
|
||||
color: #aa0000;
|
||||
}
|
||||
/* GenericUnderline */
|
||||
.chroma .gl {
|
||||
text-decoration: underline;
|
||||
}
|
||||
/* TextWhitespace */
|
||||
.chroma .w {
|
||||
color: #bbbbbb;
|
||||
}
|
||||
410
src/sass/_chroma_light.scss
Normal file
410
src/sass/_chroma_light.scss
Normal file
|
|
@ -0,0 +1,410 @@
|
|||
@mixin chroma_github {
|
||||
/* Theme: GitHub */
|
||||
/* Background */
|
||||
.chroma {
|
||||
color: #999;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.chroma code {
|
||||
background-color: var(--code-background);
|
||||
display: block;
|
||||
line-height: 1.45;
|
||||
font-size: 0.85em;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
.chroma .lntable td:first-child code {
|
||||
border-radius: 0;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
.chroma .lntable td:nth-child(2) code {
|
||||
border-radius: 0;
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
.chroma .lntable td:nth-child(2) code .hl {
|
||||
width: auto;
|
||||
margin-left: -0.5em;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
pre.chroma {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> pre.chroma code {
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Other */
|
||||
.chroma .x {
|
||||
}
|
||||
/* Error */
|
||||
.chroma .err {
|
||||
color: #a61717;
|
||||
background-color: #e3d2d2;
|
||||
}
|
||||
/* LineTableTD */
|
||||
.chroma .lntd {
|
||||
vertical-align: top;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
/* LineTable */
|
||||
.chroma .lntable {
|
||||
border-spacing: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
display: block;
|
||||
}
|
||||
.chroma .lntable td:first-child code {
|
||||
background-color: var(--code-accent-color-lite);
|
||||
border-right: $border-1 solid var(--code-accent-color);
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
.chroma .lntable td code {
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
.chroma .lntable td:nth-child(2) {
|
||||
width: 100%;
|
||||
margin-left: 2em;
|
||||
}
|
||||
/* LineHighlight */
|
||||
.chroma .hl {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: #ffffcc;
|
||||
}
|
||||
/* LineNumbersTable */
|
||||
.chroma .lnt {
|
||||
padding: 0 0.8em;
|
||||
}
|
||||
/* LineNumbers */
|
||||
.chroma .ln {
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
}
|
||||
/* Keyword */
|
||||
.chroma .k {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* KeywordConstant */
|
||||
.chroma .kc {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* KeywordDeclaration */
|
||||
.chroma .kd {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* KeywordNamespace */
|
||||
.chroma .kn {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* KeywordPseudo */
|
||||
.chroma .kp {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* KeywordReserved */
|
||||
.chroma .kr {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* KeywordType */
|
||||
.chroma .kt {
|
||||
color: #445588;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* Name */
|
||||
.chroma .n {
|
||||
}
|
||||
/* NameAttribute */
|
||||
.chroma .na {
|
||||
color: #008080;
|
||||
}
|
||||
/* NameBuiltin */
|
||||
.chroma .nb {
|
||||
color: #0086b3;
|
||||
}
|
||||
/* NameBuiltinPseudo */
|
||||
.chroma .bp {
|
||||
color: #999999;
|
||||
}
|
||||
/* NameClass */
|
||||
.chroma .nc {
|
||||
color: #445588;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* NameConstant */
|
||||
.chroma .no {
|
||||
color: #008080;
|
||||
}
|
||||
/* NameDecorator */
|
||||
.chroma .nd {
|
||||
color: #3c5d5d;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* NameEntity */
|
||||
.chroma .ni {
|
||||
color: #800080;
|
||||
}
|
||||
/* NameException */
|
||||
.chroma .ne {
|
||||
color: #990000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* NameFunction */
|
||||
.chroma .nf {
|
||||
color: #990000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* NameFunctionMagic */
|
||||
.chroma .fm {
|
||||
}
|
||||
/* NameLabel */
|
||||
.chroma .nl {
|
||||
color: #990000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* NameNamespace */
|
||||
.chroma .nn {
|
||||
color: #555555;
|
||||
}
|
||||
/* NameOther */
|
||||
.chroma .nx {
|
||||
}
|
||||
/* NameProperty */
|
||||
.chroma .py {
|
||||
}
|
||||
/* NameTag */
|
||||
.chroma .nt {
|
||||
color: #000080;
|
||||
}
|
||||
/* NameVariable */
|
||||
.chroma .nv {
|
||||
color: #008080;
|
||||
}
|
||||
/* NameVariableClass */
|
||||
.chroma .vc {
|
||||
color: #008080;
|
||||
}
|
||||
/* NameVariableGlobal */
|
||||
.chroma .vg {
|
||||
color: #008080;
|
||||
}
|
||||
/* NameVariableInstance */
|
||||
.chroma .vi {
|
||||
color: #008080;
|
||||
}
|
||||
/* NameVariableMagic */
|
||||
.chroma .vm {
|
||||
}
|
||||
/* Literal */
|
||||
.chroma .l {
|
||||
}
|
||||
/* LiteralDate */
|
||||
.chroma .ld {
|
||||
}
|
||||
/* LiteralString */
|
||||
.chroma .s {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringAffix */
|
||||
.chroma .sa {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringBacktick */
|
||||
.chroma .sb {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringChar */
|
||||
.chroma .sc {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringDelimiter */
|
||||
.chroma .dl {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringDoc */
|
||||
.chroma .sd {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringDouble */
|
||||
.chroma .s2 {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringEscape */
|
||||
.chroma .se {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringHeredoc */
|
||||
.chroma .sh {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringInterpol */
|
||||
.chroma .si {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringOther */
|
||||
.chroma .sx {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringRegex */
|
||||
.chroma .sr {
|
||||
color: #009926;
|
||||
}
|
||||
/* LiteralStringSingle */
|
||||
.chroma .s1 {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringSymbol */
|
||||
.chroma .ss {
|
||||
color: #990073;
|
||||
}
|
||||
/* LiteralNumber */
|
||||
.chroma .m {
|
||||
color: #009999;
|
||||
}
|
||||
/* LiteralNumberBin */
|
||||
.chroma .mb {
|
||||
color: #009999;
|
||||
}
|
||||
/* LiteralNumberFloat */
|
||||
.chroma .mf {
|
||||
color: #009999;
|
||||
}
|
||||
/* LiteralNumberHex */
|
||||
.chroma .mh {
|
||||
color: #009999;
|
||||
}
|
||||
/* LiteralNumberInteger */
|
||||
.chroma .mi {
|
||||
color: #009999;
|
||||
}
|
||||
/* LiteralNumberIntegerLong */
|
||||
.chroma .il {
|
||||
color: #009999;
|
||||
}
|
||||
/* LiteralNumberOct */
|
||||
.chroma .mo {
|
||||
color: #009999;
|
||||
}
|
||||
/* Operator */
|
||||
.chroma .o {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* OperatorWord */
|
||||
.chroma .ow {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* Punctuation */
|
||||
.chroma .p {
|
||||
}
|
||||
/* Comment */
|
||||
.chroma .c {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
}
|
||||
/* CommentHashbang */
|
||||
.chroma .ch {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
}
|
||||
/* CommentMultiline */
|
||||
.chroma .cm {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
}
|
||||
/* CommentSingle */
|
||||
.chroma .c1 {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
}
|
||||
/* CommentSpecial */
|
||||
.chroma .cs {
|
||||
color: #999999;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
/* CommentPreproc */
|
||||
.chroma .cp {
|
||||
color: #999999;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
/* CommentPreprocFile */
|
||||
.chroma .cpf {
|
||||
color: #999999;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
/* Generic */
|
||||
.chroma .g {
|
||||
}
|
||||
/* GenericDeleted */
|
||||
.chroma .gd {
|
||||
color: #000000;
|
||||
background-color: #ffdddd;
|
||||
}
|
||||
/* GenericEmph */
|
||||
.chroma .ge {
|
||||
color: #000000;
|
||||
font-style: italic;
|
||||
}
|
||||
/* GenericError */
|
||||
.chroma .gr {
|
||||
color: #aa0000;
|
||||
}
|
||||
/* GenericHeading */
|
||||
.chroma .gh {
|
||||
color: #999999;
|
||||
}
|
||||
/* GenericInserted */
|
||||
.chroma .gi {
|
||||
color: #000000;
|
||||
background-color: #ddffdd;
|
||||
}
|
||||
/* GenericOutput */
|
||||
.chroma .go {
|
||||
color: #888888;
|
||||
}
|
||||
/* GenericPrompt */
|
||||
.chroma .gp {
|
||||
color: #555555;
|
||||
}
|
||||
/* GenericStrong */
|
||||
.chroma .gs {
|
||||
font-weight: bold;
|
||||
}
|
||||
/* GenericSubheading */
|
||||
.chroma .gu {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
/* GenericTraceback */
|
||||
.chroma .gt {
|
||||
color: #aa0000;
|
||||
}
|
||||
/* GenericUnderline */
|
||||
.chroma .gl {
|
||||
text-decoration: underline;
|
||||
}
|
||||
/* TextWhitespace */
|
||||
.chroma .w {
|
||||
color: #bbbbbb;
|
||||
}
|
||||
}
|
||||
71
src/sass/_color_mode.scss
Normal file
71
src/sass/_color_mode.scss
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
@mixin light_mode {
|
||||
@include chroma_github;
|
||||
|
||||
--header-background: #{$main-color};
|
||||
--header-font-color: #{$white};
|
||||
|
||||
--body-background: #{$body-background};
|
||||
--body-font-color: #{$body-font-color};
|
||||
|
||||
--button-background: #{lighten($main-color, 2)};
|
||||
--button-border-color: #{$main-color};
|
||||
|
||||
--link-color: #{$link-color};
|
||||
--link-color-visited: #{$link-color-visited};
|
||||
|
||||
--code-background: #{$code-background};
|
||||
--code-accent-color: #{darken($code-background, 6)};
|
||||
--code-accent-color-lite: #{darken($code-background, 2)};
|
||||
|
||||
--accent-color: #{$gray-200};
|
||||
--accent-color-lite: #{$gray-100};
|
||||
|
||||
--control-icons: #{lighten($body-font-color, 50)};
|
||||
|
||||
--footer-background: #{$second-color};
|
||||
--footer-font-color: #{$white};
|
||||
--footer-link-color: #{$link-color-footer};
|
||||
--footer-link-color-visited: #{$link-color-footer};
|
||||
}
|
||||
|
||||
@mixin dark_mode {
|
||||
@include chroma_dark;
|
||||
|
||||
--header-background: #{$main-color};
|
||||
--header-font-color: #{$white};
|
||||
|
||||
--body-background: #{$body-background-dark};
|
||||
--body-font-color: #{lighten($body-background-dark, 60)};
|
||||
|
||||
--button-background: #{lighten($main-color, 2)};
|
||||
--button-border-color: #{$main-color};
|
||||
|
||||
--link-color: #{$link-color-dark};
|
||||
--link-color-visited: #{$link-color-visited-dark};
|
||||
|
||||
--code-background: #{$code-background-dark};
|
||||
--code-accent-color: #{darken($code-background-dark, 4)};
|
||||
--code-accent-color-lite: #{darken($code-background-dark, 2)};
|
||||
|
||||
--accent-color: #{darken($body-background-dark, 4)};
|
||||
--accent-color-lite: #{darken($body-background-dark, 2)};
|
||||
|
||||
--control-icons: #{lighten($body-font-color, 50)};
|
||||
|
||||
--footer-background: #{$second-color};
|
||||
--footer-font-color: #{$white};
|
||||
--footer-link-color: #{$link-color-footer};
|
||||
--footer-link-color-visited: #{$link-color-footer};
|
||||
|
||||
.dark-mode-dim .gdoc-markdown {
|
||||
img {
|
||||
filter: brightness(0.75) grayscale(0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.gdoc-markdown {
|
||||
.gdoc-hint {
|
||||
filter: saturate(2.5) brightness(0.85);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -12,8 +12,8 @@ $font-size-16: 1rem !default;
|
|||
$font-size-32: 2rem !default;
|
||||
|
||||
$border-1: 1px !default;
|
||||
$border-2: 2px !default;
|
||||
$border-4: 4px !default;
|
||||
$border-2: 1.5px !default;
|
||||
$border-4: 3px !default;
|
||||
|
||||
$border-radius: 0.15rem !default;
|
||||
|
||||
|
|
@ -30,22 +30,33 @@ $gray-800: rgba(52, 58, 64, 1) !default;
|
|||
$gray-900: rgba(33, 37, 41, 1) !default;
|
||||
$black: rgba(0, 0, 0, 1) !default;
|
||||
|
||||
$color-link: rgba(10, 83, 154, 1) !default;
|
||||
$color-link-visited: rgba(119, 73, 191, 1) !default;
|
||||
$color-link-footer: rgba(255, 163, 30, 1) !default;
|
||||
|
||||
$color-code: rgba($gray-200, 0.5) !default;
|
||||
$link-color: rgba(10, 83, 154, 1) !default;
|
||||
$link-color-visited: rgba(119, 73, 191, 1) !default;
|
||||
$link-color-footer: rgba(255, 163, 30, 1) !default;
|
||||
|
||||
$body-background: white !default;
|
||||
$body-font-color: $gray-800 !default;
|
||||
$body-font-weight: normal !default;
|
||||
$body-min-width: 20rem !default;
|
||||
|
||||
$body-background-dark: $gray-800 !default;
|
||||
$body-font-color-dark: $gray-100 !default;
|
||||
|
||||
$container-max-width: 80rem !default;
|
||||
|
||||
$main-color: rgba(65, 134, 201, 1) !default;
|
||||
$second-color: rgba(47, 51, 62, 1) !default;
|
||||
|
||||
$body-background-dark: mix(
|
||||
invert($body-background, 75%),
|
||||
$second-color
|
||||
) !default;
|
||||
$link-color-dark: lighten(desaturate($link-color, 40), 25) !default;
|
||||
$link-color-visited-dark: lighten($link-color-visited, 10) !default;
|
||||
|
||||
$code-background: lighten($gray-200, 4) !default;
|
||||
$code-background-dark: darken($body-background-dark, 2) !default;
|
||||
|
||||
$header-height: 3.5rem !default;
|
||||
$menu-width: 16rem !default;
|
||||
|
||||
|
|
@ -53,8 +64,8 @@ $sm-breakpoint: $menu-width + $body-min-width + 3rem !default;
|
|||
|
||||
// Panel colors
|
||||
$hint-colors: (
|
||||
info: rgba(102, 187, 255, 1),
|
||||
ok: rgba(139, 195, 74, 1),
|
||||
warning: rgba(255, 221, 102, 1),
|
||||
danger: rgba(255, 102, 102, 1),
|
||||
info: rgba(0, 145, 234, 1),
|
||||
ok: rgba(0, 200, 83, 1),
|
||||
warning: rgba(255, 171, 0, 1),
|
||||
danger: rgba(213, 0, 0, 1),
|
||||
) !default;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
font-weight: 600;
|
||||
|
||||
> code {
|
||||
border-top: 3px solid $gray-300;
|
||||
border-top: $border-4 solid var(--accent-color);
|
||||
font-size: 0.75em !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
&__figure {
|
||||
padding: $padding-4;
|
||||
margin: $padding-16 0;
|
||||
background-color: $gray-300;
|
||||
background-color: var(--accent-color);
|
||||
display: table;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
figcaption {
|
||||
display: table-caption;
|
||||
caption-side: bottom;
|
||||
background-color: $gray-300;
|
||||
background-color: var(--accent-color);
|
||||
padding: 0 $padding-4 $padding-4;
|
||||
text-align: center;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
margin: $padding-16 0;
|
||||
padding: $padding-8 $padding-16 $padding-8 ($padding-16 - $padding-4); //to keep total left space 16dp
|
||||
|
||||
border-left: $border-4 solid $gray-200;
|
||||
border-left: $border-4 solid var(--accent-color);
|
||||
border-radius: $border-radius;
|
||||
|
||||
:first-child {
|
||||
|
|
@ -121,18 +121,18 @@
|
|||
tr th,
|
||||
tr td {
|
||||
padding: $padding-8 $padding-16;
|
||||
border: $border-1 solid $gray-200;
|
||||
border: $border-1 solid var(--accent-color);
|
||||
}
|
||||
|
||||
tr:nth-child(2n) {
|
||||
background: $gray-100;
|
||||
background: var(--accent-color-lite);
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
height: $padding-2;
|
||||
height: $border-2;
|
||||
border: none;
|
||||
background: $gray-200;
|
||||
background: var(--accent-color);
|
||||
}
|
||||
|
||||
ul,
|
||||
|
|
@ -156,9 +156,9 @@
|
|||
}
|
||||
|
||||
code {
|
||||
background-color: $color-code;
|
||||
background-color: var(--code-background);
|
||||
font-size: 0.85em;
|
||||
line-height: 1.45;
|
||||
line-height: 1.45em;
|
||||
padding: 0.2em 0.4em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@
|
|||
margin-top: $padding-16;
|
||||
margin-bottom: $padding-16;
|
||||
|
||||
border: $border-1 solid $gray-200;
|
||||
border: $border-1 solid var(--accent-color);
|
||||
border-radius: $border-radius;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
&__head {
|
||||
background: $gray-100;
|
||||
background: var(--accent-color-lite);
|
||||
padding: $padding-8 $padding-16;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
margin-top: $padding-16;
|
||||
margin-bottom: $padding-16;
|
||||
|
||||
border: $border-1 solid $gray-200;
|
||||
border: $border-1 solid var(--accent-color);
|
||||
border-radius: $border-radius;
|
||||
|
||||
overflow: hidden;
|
||||
|
|
@ -51,13 +51,13 @@
|
|||
&__content {
|
||||
order: 999; //Move content blocks to the end
|
||||
width: 100%;
|
||||
border-top: $border-1 solid $gray-100;
|
||||
border-top: $border-1 solid var(--accent-color-lite);
|
||||
padding: $padding-16;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__control:checked + &__label {
|
||||
border-bottom: $border-1 solid $color-link;
|
||||
border-bottom: $border-2 solid var(--link-color);
|
||||
}
|
||||
&__control:checked + &__label + &__content {
|
||||
display: block;
|
||||
|
|
@ -83,8 +83,8 @@
|
|||
// {{< button >}}
|
||||
.gdoc-button {
|
||||
display: inline-block;
|
||||
color: $gray-700;
|
||||
border: $border-1 solid $gray-500;
|
||||
background: var(--accent-color-lite);
|
||||
border: $border-1 solid var(--accent-color);
|
||||
border-radius: $border-radius;
|
||||
margin: $padding-8 0;
|
||||
cursor: pointer;
|
||||
|
|
@ -97,8 +97,8 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba($main-color, 0.9);
|
||||
border-color: $main-color;
|
||||
background: var(--button-background);
|
||||
border-color: var(--button-border-color);
|
||||
color: $gray-100;
|
||||
}
|
||||
}
|
||||
|
|
@ -108,7 +108,8 @@
|
|||
@each $name, $color in $hint-colors {
|
||||
&.#{$name} {
|
||||
border-left-color: $color;
|
||||
background-color: rgba($color, 0.1);
|
||||
background-color: scale-color($color, $lightness: 95%, $saturation: -30%);
|
||||
color: $body-font-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1
src/sass/_test.scss
Normal file
1
src/sass/_test.scss
Normal file
|
|
@ -0,0 +1 @@
|
|||
color: red;
|
||||
|
|
@ -20,8 +20,9 @@
|
|||
|
||||
.flex-grid {
|
||||
flex-direction: column;
|
||||
border: $border-1 solid $gray-200;
|
||||
border: $border-1 solid var(--accent-color);
|
||||
border-radius: $border-radius;
|
||||
background: var(--accent-color-lite);
|
||||
}
|
||||
|
||||
.justify-start {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
@import "_defaults";
|
||||
@import "_color_mode";
|
||||
@import "_chroma_light";
|
||||
@import "_chroma_dark";
|
||||
|
||||
@import "_normalize";
|
||||
@import "_utils";
|
||||
|
|
@ -6,5 +9,4 @@
|
|||
@import "_base";
|
||||
|
||||
@import "_markdown";
|
||||
@import "_chroma_github";
|
||||
@import "_shortcodes";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue