From f00926440d90b3c69ac48894e6a9d55d2fdd04b0 Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Sat, 27 May 2023 01:04:18 +0200 Subject: [PATCH] Add dark mode (static) --- static/note.html | 2 +- static/profile.html | 2 +- static/styles.css | 150 +++++++++++++++++++++++++---- static/styles.css.map | 2 +- static/styles.scss | 217 +++++++++++++++++++++++++++++++++--------- 5 files changed, 303 insertions(+), 70 deletions(-) diff --git a/static/note.html b/static/note.html index 24a0407..6ce54a7 100644 --- a/static/note.html +++ b/static/note.html @@ -1,5 +1,5 @@ - + {{template "head.html" .}} diff --git a/static/profile.html b/static/profile.html index 3ece7aa..453bfab 100644 --- a/static/profile.html +++ b/static/profile.html @@ -1,5 +1,5 @@ - + {{template "head.html" .}} diff --git a/static/styles.css b/static/styles.css index 6a7ded3..854795a 100644 --- a/static/styles.css +++ b/static/styles.css @@ -6,19 +6,27 @@ html { } body { - color: #373737; margin: 0; margin-bottom: 4rem; } +.theme--default body { + color: #373737; +} +.theme--dark body { + color: #FAFAFA; +} @media (max-width: 580px) { body.lock { overflow: hidden; } } -a { +.theme--default a { color: #373737; } +.theme--dark a { + color: #FAFAFA; +} .background { position: fixed; @@ -26,20 +34,30 @@ a { bottom: 0; left: 0; right: 0; - background-color: white; overflow: hidden; z-index: -1; } +.theme--default .background { + background: #FFFFFF; +} +.theme--dark .background { + background: #1e1e1e; +} .background::after { content: ""; position: absolute; - background-color: #FAFAFA; width: 140%; height: 100%; transform: rotate(-20deg); transform-origin: bottom; bottom: -40%; } +.theme--default .background::after { + background: #FFFFFF; +} +.theme--dark .background::after { + background: #181818; +} @media (max-width: 580px) { .background::after { width: 200%; @@ -62,7 +80,10 @@ a { font-size: 0.8rem; } } -.top span { +.theme--default .top span { + color: #E32A6D; +} +.theme--dark .top span { color: #E32A6D; } @@ -142,6 +163,11 @@ a { .container .columnA .info-wrapper .display { display: block; font-size: 1.2rem; + } + .theme--default .container .columnA .info-wrapper .display { + color: #C9C9C9; + } + .theme--dark .container .columnA .info-wrapper .display { color: #C9C9C9; } } @@ -149,6 +175,11 @@ a { font-size: 0.8em; margin-top: 0.5rem; text-align: center; +} +.theme--default .container .columnA .last_update { + color: #C9C9C9; +} +.theme--dark .container .columnA .last_update { color: #C9C9C9; } @media (max-width: 580px) { @@ -165,11 +196,19 @@ a { .container .column_content .info-wrapper { font-size: 1.6rem; } -.container .column_content .info-wrapper .display { +.theme--default .container .column_content .info-wrapper .display { + color: #C9C9C9; +} +.theme--dark .container .column_content .info-wrapper .display { color: #C9C9C9; } .container .column_content .info-wrapper .npub { font-size: 1rem; +} +.theme--default .container .column_content .info-wrapper .npub { + color: #C9C9C9; +} +.theme--dark .container .column_content .info-wrapper .npub { color: #C9C9C9; } @media (max-width: 580px) { @@ -181,7 +220,12 @@ a { height: 6px; width: 30%; margin-left: -0.6rem; - background-color: #F3F3F3; +} +.theme--default .container .column_content .separator { + background: #F3F3F3; +} +.theme--dark .container .column_content .separator { + background: #232323; } .container .column_content .separator.long { width: 50%; @@ -196,6 +240,11 @@ a { } .container .column_content .field .label { font-size: 0.8rem; +} +.theme--default .container .column_content .field .label { + color: #E32A6D; +} +.theme--dark .container .column_content .field .label { color: #E32A6D; } .container .column_content .field.advanced { @@ -204,11 +253,32 @@ a { .container .column_content .field.advanced.visible { display: block; } +.container .column_content .field.advanced.boxed { + padding: 0 1rem 1rem; + margin-left: -1rem; + margin-right: -1rem; +} +.theme--default .container .column_content .field.advanced.boxed { + background: #F3F3F3; +} +.theme--dark .container .column_content .field.advanced.boxed { + background: #131313; +} .container .column_content .field.advanced.boxed .label { padding: 0.2rem 1rem; margin: 0 -1rem; +} +.theme--default .container .column_content .field.advanced.boxed .label { color: #373737; - background-color: #C9C9C9; +} +.theme--dark .container .column_content .field.advanced.boxed .label { + color: #9a9a9a; +} +.theme--default .container .column_content .field.advanced.boxed .label { + background: #C9C9C9; +} +.theme--dark .container .column_content .field.advanced.boxed .label { + background: #191919; } .container .column_content .field.advanced-switch-wrapper { display: flex; @@ -225,7 +295,7 @@ a { text-indent: -9999px; width: 2.6rem; height: 1.2rem; - background: #5A5A5A; + background: #3d3d3d; display: inline-block; border-radius: 100px; position: relative; @@ -254,7 +324,10 @@ a { height: 1.2rem; } } -.container .column_content .field.advanced-switch-wrapper input:checked + label { +.theme--default .container .column_content .field.advanced-switch-wrapper input:checked + label { + background: #E32A6D; +} +.theme--dark .container .column_content .field.advanced-switch-wrapper input:checked + label { background: #E32A6D; } .container .column_content .field.advanced-switch-wrapper input:checked + label:first-of-type:after { @@ -274,27 +347,39 @@ a { .container .column_content .field .json, .container .column_content .field .data { white-space: pre-wrap; word-break: break-all; - background-color: #F3F3F3; - padding: 1rem; - margin: 0 -1rem; + margin-top: 1rem; } .container .column_content .field .json .key, .container .column_content .field .data .key { display: inline-block; margin-top: 0.5rem; +} +.theme--default .container .column_content .field .json .key, .theme--default .container .column_content .field .data .key { color: #E32A6D; } -.container .column_content .field .json .string, .container .column_content .field .data .string { +.theme--dark .container .column_content .field .json .key, .theme--dark .container .column_content .field .data .key { + color: #E32A6D; +} +.theme--default .container .column_content .field .json .string, .theme--default .container .column_content .field .data .string { color: #373737; } +.theme--dark .container .column_content .field .json .string, .theme--dark .container .column_content .field .data .string { + color: #FAFAFA; +} .container .column_content .field .json .number, .container .column_content .field .data .number { color: darkorange; } -.container .column_content .field .json .boolean, .container .column_content .field .data .boolean { +.theme--default .container .column_content .field .json .boolean, .theme--default .container .column_content .field .data .boolean { color: #373737; } -.container .column_content .field .json .null, .container .column_content .field .data .null { +.theme--dark .container .column_content .field .json .boolean, .theme--dark .container .column_content .field .data .boolean { + color: #FAFAFA; +} +.theme--default .container .column_content .field .json .null, .theme--default .container .column_content .field .data .null { color: #373737; } +.theme--dark .container .column_content .field .json .null, .theme--dark .container .column_content .field .data .null { + color: #FAFAFA; +} .container .column_content .field.last_update { display: none; } @@ -302,6 +387,11 @@ a { .container .column_content .field.last_update { display: block; font-size: 0.8em; + } + .theme--default .container .column_content .field.last_update { + color: #C9C9C9; + } + .theme--dark .container .column_content .field.last_update { color: #C9C9C9; } } @@ -371,7 +461,7 @@ a { text-align: center; font-size: 0.9rem; color: #FFFFFF; - background-color: #5A5A5A; + background-color: #3d3d3d; border-bottom: 1px solid #373737; text-decoration: none; border-radius: 8px; @@ -395,7 +485,7 @@ a { } } .container .column_clients .btn a:hover { - background-color: #373737; + background: #373737; } @media (max-width: 580px) { .container .column_clients .btn:first-of-type { @@ -403,22 +493,35 @@ a { } } .container .column_clients .btn:first-of-type a { - background-color: #E32A6D; border-bottom: none; } +.theme--default .container .column_clients .btn:first-of-type a { + background: #E32A6D; +} +.theme--dark .container .column_clients .btn:first-of-type a { + background: #E32A6D; +} @media (max-width: 580px) { .container .column_clients .btn:first-of-type a { border-radius: 8px 8px 0 0; } } -.container .column_clients .btn:first-of-type a:hover { - background-color: #bc1150; +.theme--default .container .column_clients .btn:first-of-type a:hover { + background: #bc1150; +} +.theme--dark .container .column_clients .btn:first-of-type a:hover { + background: #bc1150; } .container .column_clients .btn span { flex-basis: 20%; margin-left: 0.4rem; +} +.theme--default .container .column_clients .btn span { color: #9a9a9a; } +.theme--dark .container .column_clients .btn span { + color: #F3F3F3; +} @media (max-width: 580px) { .container .column_clients .btn span { display: none; @@ -499,8 +602,13 @@ body.note .column_content .profile_intro .published_at { text-align: right; align-self: end; font-size: 0.8rem; +} +.theme--default body.note .column_content .profile_intro .published_at { color: #9a9a9a; } +.theme--dark body.note .column_content .profile_intro .published_at { + color: #F3F3F3; +} @media (max-width: 580px) { body.note .column_content .profile_intro .published_at { padding-top: 0.5rem; diff --git a/static/styles.css.map b/static/styles.css.map index 174bc5b..44e5952 100644 --- a/static/styles.css.map +++ b/static/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;AAEC;EADD;IAEE;;;;AAIH;EACC,OA/BS;;;AAiCV;EACC;EACA;EACA;EACA;EACA;EACA,kBAjCoB;EAkCpB;EACA;;AACA;EACC;EACA;EACA,kBAtCmB;EAuCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;AAED;EACC,OApEQ;;;AAwEV;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;AAEC;EANF;IAOE;IACE;;;AAGH;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA;IACA;IACA;IACA;;EACA;IACC;IACA;IACA,OAzIK;;;AA6IR;EACC;EACA;EACA;EACA,OAjJO;;AAkJP;EALD;IAME;;;AAIH;EAEC;EACA;EACA;EACA;;AAEA;EACC;;AACA;EACC,OAjKM;;AAmKP;EACC;EACA,OArKM;;AAuKP;EATD;IAUE;;;AAGF;EACC;EACA;EACA;EACA,kBAxKkB;;AAyKlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OA1LM;;AA4LP;EACC;;AACA;EACC;;AAGA;EACC;EACA;EACA,OAvMI;EAwMJ,kBAvMI;;AA2MP;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,YAnNgB;EAoNhB;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC,YAtPK;;AAyPN;EACC;EACA;;AAGD;EACC;;AAIF;EACC;;AACA;EACC;EACA;;AAGF;EACC;EACA;EACA,kBAvQiB;EAwQjB;EACA;;AACA;EACC;EACA;EACA,OAnRK;;AAqRN;EAAU,OAvRJ;;AAwRN;EAAU;;AACV;EAAW,OAzRL;;AA0RN;EAAQ,OA1RF;;AA4RP;EACC;;AACA;EAFD;IAGE;IACA;IACA,OAhSK;;;AAuST;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;EACA;;AACA;EACC;;AAED;EAPD;IAQE;IACA;IACA;IACA;IACA;IACA;;EACA;IACC;;EAED;IACC;;EACA;IACC;IACA;IACA;IACA;;;AAKJ;EACC;EACA;EACA;;AACA;EAJD;IAKE;IACA;;;AAED;EACC;EACA;EACA;EACA;EACA,OAjWM;EAkWN,kBA5ViB;EA6VjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OAjXI;;;AAoXN;EACC,kBA9WgB;;AAkXjB;EADD;IAEE;;;AAED;EACC,kBArXgB;EAsXhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBA1Xe;;AA8XlB;EACC;EACA;EACA,OAzYM;;AA0YN;EAJD;IAKE;;;;AASJ;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;;AAOD;EADD;IAEE;;;AAGF;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;;;AAGF;EACC;;AACA;EAFD;IAGE;;;AAGA;EADD;IAEE;IACA;;;AAIH;EACC;EACA;;AACA;EAHD;IAIE;;;AAGF;EACC;EACA;EACA;EACA;EACA,OApdM;;AAqdN;EAND;IAOE;;;;AAOL;EACC;EACA","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAoFA;EACC;EACA;EACA;;;AAED;EAIC;EACA;;AA3BG;EAwBA;;AAxBA;EAwBA;;AAKF;EADD;IAEE;;;;AA9BC;EAoCA;;AApCA;EAoCA;;;AAGJ;EACC;EACA;EACA;EACA;EACA;EAIA;EACA;;AAjDG;EA8CF;;AA9CE;EA8CF;;AAID;EACC;EACA;EAIA;EACA;EACA;EACA;EACA;;AA5DE;EAsDD;;AAtDC;EAsDD;;AAOD;EAXD;IAYE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;AA7EE;EAiFD;;AAjFC;EAiFD;;;AAKH;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;AAEC;EANF;IAOE;IACE;;;AAGH;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA;IACA;IACA;IACA;;EACA;IACC;IACA;;EArJD;IAuJE;;EAvJF;IAuJE;;;AAKJ;EACC;EACA;EACA;;AA/JC;EAiKA;;AAjKA;EAiKA;;AAED;EAPD;IAQE;;;AAIH;EAEC;EACA;EACA;EACA;;AAEA;EACC;;AAhLC;EAmLC;;AAnLD;EAmLC;;AAGF;EACC;;AAvLA;EAyLC;;AAzLD;EAyLC;;AAGF;EAbD;IAcE;;;AAGF;EACC;EACA;EACA;;AAnMC;EAqMA;;AArMA;EAqMA;;AAED;EACC;;AAED;EAVD;IAWE;;;AAGF;EACC;;AACA;EACC;;AAjNA;EAmNC;;AAnND;EAmNC;;AAGF;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA;;AA9ND;EAgOE;;AAhOF;EAgOE;;AAED;EACC;EACA;;AApOF;EAsOG;;AAtOH;EAsOG;;AAtOH;EAyOG;;AAzOH;EAyOG;;AAKJ;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,YA3TS;EA4TT;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AArRF;EA2RE;;AA3RF;EA2RE;;AAIF;EACC;EACA;;AAGD;EACC;;AAIF;EACC;;AACA;EACC;EACA;;AAGF;EACC;EACA;EACA;;AACA;EACC;EACA;;AAtTD;EAwTE;;AAxTF;EAwTE;;AAxTF;EA6TI;;AA7TJ;EA6TI;;AAGJ;EAAU;;AAhUV;EAmUI;;AAnUJ;EAmUI;;AAnUJ;EAwUI;;AAxUJ;EAwUI;;AAIL;EACC;;AACA;EAFD;IAGE;IACA;;EAhVD;IAkVE;;EAlVF;IAkVE;;;AAQL;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;EACA;;AACA;EACC;;AAED;EAPD;IAQE;IACA;IACA;IACA;IACA;IACA;;EACA;IACC;;EAED;IACC;;EACA;IACC;IACA;IACA;IACA;;;AAKJ;EACC;EACA;EACA;;AACA;EAJD;IAKE;IACA;;;AAED;EACC;EACA;EACA;EACA;EACA,OAxdU;EAydV,kBApdU;EAqdV;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OAxeQ;;;AA2eV;EACC,YAteS;;AA0eV;EADD;IAEE;;;AAED;EAIC;;AArbD;EAmbG;;AAnbH;EAmbG;;AAGF;EALD;IAME;;;AAvbF;EA2bG;;AA3bH;EA2bG;;AAKJ;EACC;EACA;;AAlcA;EAocC;;AApcD;EAocC;;AAED;EAND;IAOE;;;;AASJ;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;;AAOD;EADD;IAEE;;;AAGF;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;;;AAGF;EACC;;AACA;EAFD;IAGE;;;AAGA;EADD;IAEE;IACA;;;AAIH;EACC;EACA;;AACA;EAHD;IAIE;;;AAGF;EACC;EACA;EACA;EACA;;AA/gBA;EAihBC;;AAjhBD;EAihBC;;AAED;EARD;IASE;;;;AAOL;EACC;EACA","file":"styles.css"} \ No newline at end of file diff --git a/static/styles.scss b/static/styles.scss index 9c3fda8..d7a0f6b 100644 --- a/static/styles.scss +++ b/static/styles.scss @@ -1,25 +1,96 @@ -$color_1: #373737; -$color_2: #C9C9C9; -$color_3: #E32A6D; -$color_4: #FFFFFF; -$color_5: #9a9a9a; -$font-family_1: Helvetica, sans-serif; -$background-color_1: white; -$background-color_2: #FAFAFA; -$background-color_3: #F3F3F3; -$background-color_4: #5A5A5A; -$background-color_5: #373737; -$background-color_6: #E32A6D; -$background-color_7: #bc1150; + +$color-base1: #FFFFFF; +$color-base2: #FAFAFA; +$color-base3: #F3F3F3; +$color-base4: #C9C9C9; +$color-base5: #9a9a9a; +$color-base6: #3d3d3d; +$color-base7: #373737; +$color-accent1: #E32A6D; +$color-accent2: #bc1150; + +$themes: ( + default: ( + base1: $color-base1, + base2: $color-base2, + base3: $color-base3, + base4: $color-base4, + base5: $color-base5, + base6: $color-base6, + base7: $color-base7, + accent1: $color-accent1, + accent2: $color-accent2, + bg-up: $color-base1, + bg-down: $color-base1, + boxed-title: $color-base7, + boxed-bg-title: $color-base4, + boxed-bg: $color-base3, + separator: $color-base3, + ), + dark: ( + base1: $color-base7, + base2: $color-base6, + base3: $color-base5, + base4: $color-base4, + base5: $color-base3, + base6: $color-base2, + base7: $color-base2, + accent1: $color-accent1, + accent2: $color-accent2, + bg-up: darken($color-base6, 12%), + bg-down: darken($color-base7, 12%), + boxed-title: $color-base5, + boxed-bg-title: darken($color-base6, 14%), + boxed-bg: darken($color-base7, 14%), + separator: darken($color-base7, 8%), + ), +); + +$base1: 'base1'; +$base2: 'base2'; +$base3: 'base3'; +$base4: 'base4'; +$base5: 'base5'; +$base6: 'base6'; +$base7: 'base7'; +$accent1: 'accent1'; +$accent2: 'accent2'; +$bg-up: 'bg-up'; +$bg-down: 'bg-down'; +$boxed-title: 'boxed-title'; +$boxed-bg-title: 'boxed-bg-title'; +$boxed-bg: 'boxed-bg'; +$separator: 'separator'; + +$theme-map: null; +@mixin themed() { + @each $theme, $map in $themes { + .theme--#{$theme} & { + $theme-map: () !global; + @each $key, $submap in $map { + $value: map-get(map-get($themes, $theme), '#{$key}'); + $theme-map: map-merge($theme-map, ($key: $value)) !global; + } + @content; + $theme-map: null !global; + } + } +} + +@function t($key) { + @return map-get($theme-map, $key); +} /*# sourceMappingURL=styles.css.map */ html { - font-family: $font-family_1; + font-family: Helvetica, sans-serif; font-size: 20px; font-weight: 300; } body { - color: $color_1; + @include themed() { + color: t($base7); + } margin: 0; margin-bottom: 4rem; &.lock { @@ -29,7 +100,9 @@ body { } } a { - color: $color_1; + @include themed() { + color: t($base7); + } } .background { position: fixed; @@ -37,13 +110,17 @@ a { bottom: 0; left: 0; right: 0; - background-color: $background-color_1; + @include themed() { + background: t($bg-up); + } overflow: hidden; z-index: -1; &::after { content: ""; position: absolute; - background-color: $background-color_2; + @include themed() { + background: t($bg-down); + } width: 140%; height: 100%; transform: rotate(-20deg); @@ -68,7 +145,9 @@ a { font-size: 0.8rem; } span { - color: $color_3; + @include themed() { + color: t($accent1); + } } } @@ -136,7 +215,9 @@ a { .display { display: block; font-size: 1.2rem; - color: $color_2; + @include themed() { + color: t($base4); + } } } } @@ -144,7 +225,9 @@ a { font-size: 0.8em; margin-top: 0.5rem; text-align: center; - color: $color_2; + @include themed() { + color: t($base4); + } @media (max-width: 580px) { display: none; } @@ -160,11 +243,15 @@ a { .info-wrapper { font-size: 1.6rem; .display { - color: $color_2; + @include themed() { + color: t($base4); + } } .npub { font-size: 1rem; - color: $color_2; + @include themed() { + color: t($base4); + } } @media (max-width: 580px) { display: none; @@ -174,7 +261,9 @@ a { height: 6px; width: 30%; margin-left: -0.6rem; - background-color: $background-color_3; + @include themed() { + background: t($separator); + } &.long { width: 50%; } @@ -186,7 +275,9 @@ a { margin-bottom: 1.5rem; .label { font-size: 0.8rem; - color: $color_3; + @include themed() { + color: t($accent1); + } } &.advanced { display: none; @@ -194,11 +285,21 @@ a { display: block; } &.boxed { + padding: 0 1rem 1rem; + margin-left: -1rem; + margin-right: -1rem; + @include themed() { + background: t($boxed-bg); + } .label { padding: 0.2rem 1rem; margin: 0 -1rem; - color: $color_1; - background-color: $color_2; + @include themed() { + color: t($boxed-title); + } + @include themed() { + background: t($boxed-bg-title); + } } } } @@ -218,7 +319,7 @@ a { text-indent: -9999px; width: 2.6rem; height: 1.2rem; - background: $background-color_4; + background: $color-base6; display: inline-block; border-radius: 100px; position: relative; @@ -246,7 +347,9 @@ a { } input:checked + label { - background: $color_3; + @include themed() { + background: t($accent1); + } } input:checked + label:first-of-type:after { @@ -269,25 +372,39 @@ a { .json, .data { white-space: pre-wrap; word-break: break-all; - background-color: $background-color_3; - padding: 1rem; - margin: 0 -1rem; + margin-top: 1rem; .key { display: inline-block; margin-top: 0.5rem; - color: $color_3; + @include themed() { + color: t($accent1); + } + } + .string { + @include themed() { + color: t($base7); + } } - .string { color: $color_1; } .number { color: darkorange; } - .boolean { color: $color_1; } - .null { color: $color_1; } + .boolean { + @include themed() { + color: t($base7); + } + } + .null { + @include themed() { + color: t($base7); + } + } } &.last_update { display: none; @media (max-width: 580px) { display: block; font-size: 0.8em; - color: $color_2; + @include themed() { + color: t($base4); + } } } } @@ -354,9 +471,9 @@ a { padding: 0.4rem; text-align: center; font-size: 0.9rem; - color: $color_4; - background-color: $background-color_4; - border-bottom: 1px solid $background-color_5; + color: $color-base1; + background-color: $color-base6; + border-bottom: 1px solid $color-base7; text-decoration: none; border-radius: 8px; @media (max-width: 580px) { @@ -370,11 +487,11 @@ a { display: none; @media (max-width: 580px) { display: inline; - color: $color_4; + color: $color-base1; } } &:hover { - background-color: $background-color_5; + background: $color-base7; } } &:first-of-type { @@ -382,20 +499,26 @@ a { display: block; } a { - background-color: $background-color_6; + @include themed() { + background: t($accent1); + } border-bottom: none; @media (max-width: 580px) { border-radius: 8px 8px 0 0; } &:hover { - background-color: $background-color_7; + @include themed() { + background: t($accent2); + } } } } span { flex-basis: 20%; margin-left: 0.4rem; - color: $color_5; + @include themed() { + color: t($base5); + } @media (max-width: 580px) { display: none; } @@ -470,7 +593,9 @@ body.note { text-align: right; align-self: end; font-size: 0.8rem; - color: $color_5; + @include themed() { + color: t($base5); + } @media (max-width: 580px) { padding-top: 0.5rem; }