diff options
author | ache <ache@ache.one> | 2023-04-09 05:09:57 +0200 |
---|---|---|
committer | ache <ache@ache.one> | 2023-04-09 05:09:57 +0200 |
commit | fcafc83bf4f23ee5d7b39f6f47f0030d8f6a722a (patch) | |
tree | 5a472e29330660d8d69fc2e0de2245f9b067098d /src/css/design.scss | |
parent | Reword Read the rest (diff) |
Make a real Darkmode
Diffstat (limited to 'src/css/design.scss')
-rwxr-xr-x | src/css/design.scss | 105 |
1 files changed, 77 insertions, 28 deletions
diff --git a/src/css/design.scss b/src/css/design.scss index c5f1e86..ee6a32e 100755 --- a/src/css/design.scss +++ b/src/css/design.scss @@ -12,37 +12,63 @@ $big-screen: "screen and (min-width: 1720px)"; html { - @mixin lightMode { background: #f1f1f1; } @mixin darkMode { background: #222; } - @media (prefers-color-scheme: dark) { @include darkMode; } + + @media (prefers-color-scheme: dark) { @include darkMode; } @media (prefers-color-scheme: light) { @include lightMode; } + &.light { @include lightMode; } &.dark { @include darkMode; } } -/* - Disabled because of firefx bugs : <https://bugzilla.mozilla.org/show_bug.cgi?id=1712656> - -@media (prefers-color-scheme: dark) { - html{background:#282328;filter:invert(0.98);} - img,svg,.cp_embed_wrapper,pre{filter:invert(0.8);} - #logo-ache {filter:invert(0);} -} -*/ - body { margin: 0; line-height: 1.35; - color: #333333; word-wrap: break-word; font-size: 16px; + a { + text-decoration: underline; + text-decoration-style: dotted; + + @mixin lightMode { + &:hover, &:focus { + text-shadow: 0 0 2px #999; + } + + color: #458; + text-decoration-color: #37373780; + &:visited { + color: #444; + } + } + @mixin darkMode { + &:hover, &:focus { + text-shadow: 0 0 2px #FFF; + } + + + color: #B7B7A7; + text-decoration-color: #C9C9C980; + &:visited { + color: #C7C7C7; + } + } + + @media (prefers-color-scheme: dark) { @include darkMode; } + @media (prefers-color-scheme: light) { @include lightMode; } + + &.light { @include lightMode; } + &.dark { @include darkMode; } + } + --width_panel: 100%; + --width_panel_bis: 0px; @media #{$gt-gsm} { --width_panel: 290px; --width_panel_bis: 290px; @@ -50,10 +76,8 @@ body { #side-bar { box-sizing: border-box; - padding-top: 10px; - text-rendering: optimizelegibility; width: var(--width_panel); left: calc(var(--width_panel_bis) - var(--width_panel); @@ -116,7 +140,7 @@ ache { } img { display: block; - margin: 0 auto; + margin: 15px 15px; max-width: 100%; } table { @@ -126,22 +150,47 @@ table { p { display: inline; } - th { - background-color: lightblue; + + @mixin lightMode { + th { + background-color: lightblue; + } + tr:nth-child(even) { + background-color: #DEDEFF99; + } + } + @mixin darkMode { + th { + background-color: darkslategrey; + } + + tr:nth-child(even) { + background-color: darkslateblue; + } } + + + @media (prefers-color-scheme: dark) { @include darkMode; } + @media (prefers-color-scheme: light) { @include lightMode; } + + &.light { @include lightMode; } + &.dark { @include darkMode; } + +} +code { + display: inline-block; + white-space: nowrap; + border: 0px; + border-radius: 8px; + padding: 0 5px; + + color: #c22222; + background: #FFF; } table, th, td { - border: 1px solid #dfe2e5; padding: 7px 13px; -} -.suite { - color: #686868; - outline: none; - text-decoration: none; - font-size: 0.6em; - font-weight: bold; - font-family: monospace, serif; - text-shadow: 0 1px 0 #DDD; + + border: 1px solid #dfe2e5; } .decal_panel { |