use solarized as color scheme
parent
a6d9333eaf
commit
10dab431a8
|
@ -35,7 +35,7 @@
|
||||||
|
|
||||||
<style global lang="scss">
|
<style global lang="scss">
|
||||||
@use "normalize.css/normalize.css";
|
@use "normalize.css/normalize.css";
|
||||||
@use "styles/colors";
|
@use "styles/colors-app";
|
||||||
@use "styles/fonts";
|
@use "styles/fonts";
|
||||||
|
|
||||||
html,
|
html,
|
||||||
|
|
|
@ -25,6 +25,6 @@
|
||||||
.active,
|
.active,
|
||||||
button:hover {
|
button:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
color: var(--active-color, var(--primary-lightest));
|
color: var(--active-color, var(--primary));
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -31,7 +31,7 @@
|
||||||
|
|
||||||
transition: box-shadow .25s;
|
transition: box-shadow .25s;
|
||||||
&.focused {
|
&.focused {
|
||||||
box-shadow: 0 0 2px 3px var(--primary-lightest);
|
box-shadow: 0 0 2px 3px var(--primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -20,7 +20,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.value {
|
.value {
|
||||||
background: var(--primary-lightest);
|
background: var(--primary);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: var(--value);
|
width: var(--value);
|
||||||
transition: width 0.2s ease;
|
transition: width 0.2s ease;
|
||||||
|
|
|
@ -320,19 +320,20 @@ import Input from "../utils/Input.svelte";
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@use "../../styles/colors";
|
||||||
|
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
|
|
||||||
border-spacing: 0.5em 0;
|
border-spacing: 0.5em 0;
|
||||||
|
|
||||||
tr {
|
tr {
|
||||||
$active-color: hsl(22, 70%, 40%);
|
|
||||||
&.left-active {
|
&.left-active {
|
||||||
td:first-child {
|
td:first-child {
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
90deg,
|
90deg,
|
||||||
$active-color 0%,
|
colors.$orange 0%,
|
||||||
transparent 100%
|
transparent 100%
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -343,7 +344,7 @@ import Input from "../utils/Input.svelte";
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
90deg,
|
90deg,
|
||||||
transparent 0%,
|
transparent 0%,
|
||||||
$active-color 100%
|
colors.$orange 100%
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,93 @@
|
||||||
|
@use "colors";
|
||||||
|
|
||||||
|
@mixin rebase(
|
||||||
|
$rebase03,
|
||||||
|
$rebase02,
|
||||||
|
$rebase01,
|
||||||
|
$rebase00,
|
||||||
|
$rebase0,
|
||||||
|
$rebase1,
|
||||||
|
$rebase2,
|
||||||
|
$rebase3
|
||||||
|
) {
|
||||||
|
--foreground: #{$rebase0};
|
||||||
|
--foreground-lighter: #{$rebase1};
|
||||||
|
--background: #{$rebase03};
|
||||||
|
--background-emph: #{$rebase02};
|
||||||
|
--primary: #{colors.$blue};
|
||||||
|
|
||||||
|
background-color: $rebase03;
|
||||||
|
color: $rebase0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin accentize($accent) {
|
||||||
|
a,
|
||||||
|
a:active,
|
||||||
|
a:visited,
|
||||||
|
code.url {
|
||||||
|
color: $accent;
|
||||||
|
}
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
color: $accent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
@include rebase(
|
||||||
|
colors.$base3,
|
||||||
|
colors.$base2,
|
||||||
|
colors.$base1,
|
||||||
|
colors.$base0,
|
||||||
|
colors.$base00,
|
||||||
|
colors.$base01,
|
||||||
|
colors.$base02,
|
||||||
|
colors.$base03
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
html {
|
||||||
|
@include rebase(
|
||||||
|
colors.$base03,
|
||||||
|
colors.$base02,
|
||||||
|
colors.$base01,
|
||||||
|
colors.$base00,
|
||||||
|
colors.$base0,
|
||||||
|
colors.$base1,
|
||||||
|
colors.$base2,
|
||||||
|
colors.$base3
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
color: var(--foreground);
|
||||||
|
background: var(--background);
|
||||||
|
|
||||||
|
* {
|
||||||
|
color: var(--foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
color: var(--foreground-lighter);
|
||||||
|
border-color: var(--foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
a:active,
|
||||||
|
a:visited {
|
||||||
|
color: var(--foreground-lighter);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -1,45 +1,17 @@
|
||||||
@use "sass:color";
|
// https://ethanschoonover.com/solarized/
|
||||||
|
$base03: #002b36;
|
||||||
$primary: #2c3e50;
|
$base02: #073642;
|
||||||
$primary-lighter: #3a5068;
|
$base01: #586e75;
|
||||||
$primary-lightest: #3a92f0;
|
$base00: #657b83;
|
||||||
$background: white;
|
$base0: #8a9b9c;
|
||||||
|
$base1: #93a1a1;
|
||||||
html {
|
$base2: #eee8d5;
|
||||||
--foreground: #{$primary};
|
$base3: #fdf6e3;
|
||||||
--foreground-lighter: #{$primary-lighter};
|
$yellow: #b58900;
|
||||||
--background: #{$background};
|
$orange: #cb4b16;
|
||||||
--background-emph: #{color.scale($background, $lightness: -4%)};
|
$red: #dc322f;
|
||||||
--primary-lightest: #{$primary-lightest};
|
$magenta: #d33682;
|
||||||
--error: darkred;
|
$violet: #6c71c4;
|
||||||
--warning: orange;
|
$blue: #268bd2;
|
||||||
|
$cyan: #2aa198;
|
||||||
b {
|
$green: #859900;
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
html {
|
|
||||||
--foreground: #{$background};
|
|
||||||
--foreground-lighter: #{color.scale($background, $lightness: -50%)};
|
|
||||||
--background: #{$primary};
|
|
||||||
--background-emph: #{$primary-lighter};
|
|
||||||
--primary-lightest: #{$primary-lightest};
|
|
||||||
--error: red;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
color: var(--foreground);
|
|
||||||
background: var(--background);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--foreground);
|
|
||||||
}
|
|
||||||
|
|
||||||
a:visited {
|
|
||||||
color: var(--foreground);
|
|
||||||
}
|
|
Loading…
Reference in New Issue