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;
}