aljaz/njump
1
0
Fork 0
mirror of https://github.com/aljazceru/njump.git synced 2026-02-09 16:14:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add dark mode (static)

Browse Source
This commit is contained in:
Daniele Tonon
2023-05-27 01:04:18 +02:00
parent c43de7478b
commit f00926440d
5 changed files with 303 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/note.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="theme--dark">
<meta charset="UTF-8">
{{template "head.html" .}}

2
static/profile.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="theme--dark">
<meta charset="UTF-8">
{{template "head.html" .}}

150
static/styles.css
View File

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

2
static/styles.css.map
View File

@@ -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"}
{"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"}

217
static/styles.scss
View File

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