extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-02-10 15:30:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

[design] change theme preset names

Browse Source
This commit is contained in:
zombieFox 2019-12-29 08:50:05 -07:00
parent 400141dcc7
commit 3ea18b11e2
5 changed files with 399 additions and 312 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

324
src/css/theme.css
View File

@ -65,17 +65,19 @@
}
.theme-preset-font {
z-index: 6;
padding: 0.25em;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transform: scale(1);
white-space: initial;
transition: transform var(--layout-timing-extra-fast);
z-index: 6;
}
.theme-preset-font-display {
font-size: 1.25em;
font-size: 1em;
margin-bottom: 0.25em;
}
@ -172,34 +174,64 @@
color: rgb(var(--theme-preset-font-color-midnight));
}
.theme-preset-background-bluegum-01 {
background-color: rgb(var(--theme-preset-background-bluegum-01));
.theme-preset-background-pym-01 {
background-color: rgb(var(--theme-preset-background-pym-01));
}
.theme-preset-background-bluegum-02 {
background-color: rgb(var(--theme-preset-background-bluegum-02));
.theme-preset-background-pym-02 {
background-color: rgb(var(--theme-preset-background-pym-02));
}
.theme-preset-background-bluegum-03 {
background-color: rgb(var(--theme-preset-background-bluegum-03));
.theme-preset-background-pym-03 {
background-color: rgb(var(--theme-preset-background-pym-03));
}
.theme-preset-background-bluegum-04 {
background-color: rgb(var(--theme-preset-background-bluegum-04));
.theme-preset-background-pym-04 {
background-color: rgb(var(--theme-preset-background-pym-04));
}
.theme-preset-accent-bluegum {
background-color: rgb(var(--theme-preset-accent-bluegum));
.theme-preset-accent-pym {
background-color: rgb(var(--theme-preset-accent-pym));
}
.theme-preset-font-display-bluegum {
font-family: var(--theme-preset-font-display-bluegum);
color: rgb(var(--theme-preset-font-color-bluegum));
.theme-preset-font-display-pym {
font-family: var(--theme-preset-font-display-pym);
color: rgb(var(--theme-preset-font-color-pym));
}
.theme-preset-font-ui-bluegum {
font-family: var(--theme-preset-font-ui-bluegum);
color: rgb(var(--theme-preset-font-color-bluegum));
.theme-preset-font-ui-pym {
font-family: var(--theme-preset-font-ui-pym);
color: rgb(var(--theme-preset-font-color-pym));
}
.theme-preset-background-cruiser-01 {
background-color: rgb(var(--theme-preset-background-cruiser-01));
}
.theme-preset-background-cruiser-02 {
background-color: rgb(var(--theme-preset-background-cruiser-02));
}
.theme-preset-background-cruiser-03 {
background-color: rgb(var(--theme-preset-background-cruiser-03));
}
.theme-preset-background-cruiser-04 {
background-color: rgb(var(--theme-preset-background-cruiser-04));
}
.theme-preset-accent-cruiser {
background-color: rgb(var(--theme-preset-accent-cruiser));
}
.theme-preset-font-display-cruiser {
font-family: var(--theme-preset-font-display-cruiser);
color: rgb(var(--theme-preset-font-color-cruiser));
}
.theme-preset-font-ui-cruiser {
font-family: var(--theme-preset-font-ui-cruiser);
color: rgb(var(--theme-preset-font-color-cruiser));
}
.theme-preset-background-sharpmint-01 {
@ -232,154 +264,154 @@
color: rgb(var(--theme-preset-font-color-sharpmint));
}
.theme-preset-background-snowblue-01 {
background-color: rgb(var(--theme-preset-background-snowblue-01));
.theme-preset-background-snowglow-01 {
background-color: rgb(var(--theme-preset-background-snowglow-01));
}
.theme-preset-background-snowblue-02 {
background-color: rgb(var(--theme-preset-background-snowblue-02));
.theme-preset-background-snowglow-02 {
background-color: rgb(var(--theme-preset-background-snowglow-02));
}
.theme-preset-background-snowblue-03 {
background-color: rgb(var(--theme-preset-background-snowblue-03));
.theme-preset-background-snowglow-03 {
background-color: rgb(var(--theme-preset-background-snowglow-03));
}
.theme-preset-background-snowblue-04 {
background-color: rgb(var(--theme-preset-background-snowblue-04));
.theme-preset-background-snowglow-04 {
background-color: rgb(var(--theme-preset-background-snowglow-04));
}
.theme-preset-accent-snowblue {
background-color: rgb(var(--theme-preset-accent-snowblue));
.theme-preset-accent-snowglow {
background-color: rgb(var(--theme-preset-accent-snowglow));
}
.theme-preset-font-display-snowblue {
font-family: var(--theme-preset-font-display-snowblue);
color: rgb(var(--theme-preset-font-color-snowblue));
.theme-preset-font-display-snowglow {
font-family: var(--theme-preset-font-display-snowglow);
color: rgb(var(--theme-preset-font-color-snowglow));
}
.theme-preset-font-ui-snowblue {
font-family: var(--theme-preset-font-ui-snowblue);
color: rgb(var(--theme-preset-font-color-snowblue));
.theme-preset-font-ui-snowglow {
font-family: var(--theme-preset-font-ui-snowglow);
color: rgb(var(--theme-preset-font-color-snowglow));
}
.theme-preset-background-chocorum-01 {
background-color: rgb(var(--theme-preset-background-chocorum-01));
.theme-preset-background-rumble-01 {
background-color: rgb(var(--theme-preset-background-rumble-01));
}
.theme-preset-background-chocorum-02 {
background-color: rgb(var(--theme-preset-background-chocorum-02));
.theme-preset-background-rumble-02 {
background-color: rgb(var(--theme-preset-background-rumble-02));
}
.theme-preset-background-chocorum-03 {
background-color: rgb(var(--theme-preset-background-chocorum-03));
.theme-preset-background-rumble-03 {
background-color: rgb(var(--theme-preset-background-rumble-03));
}
.theme-preset-background-chocorum-04 {
background-color: rgb(var(--theme-preset-background-chocorum-04));
.theme-preset-background-rumble-04 {
background-color: rgb(var(--theme-preset-background-rumble-04));
}
.theme-preset-accent-chocorum {
background-color: rgb(var(--theme-preset-accent-chocorum));
.theme-preset-accent-rumble {
background-color: rgb(var(--theme-preset-accent-rumble));
}
.theme-preset-font-display-chocorum {
font-family: var(--theme-preset-font-display-chocorum);
color: rgb(var(--theme-preset-font-color-chocorum));
.theme-preset-font-display-rumble {
font-family: var(--theme-preset-font-display-rumble);
color: rgb(var(--theme-preset-font-color-rumble));
}
.theme-preset-font-ui-chocorum {
font-family: var(--theme-preset-font-ui-chocorum);
color: rgb(var(--theme-preset-font-color-chocorum));
.theme-preset-font-ui-rumble {
font-family: var(--theme-preset-font-ui-rumble);
color: rgb(var(--theme-preset-font-color-rumble));
}
.theme-preset-background-sunburst-01 {
background-color: rgb(var(--theme-preset-background-sunburst-01));
.theme-preset-background-sollight-01 {
background-color: rgb(var(--theme-preset-background-sollight-01));
}
.theme-preset-background-sunburst-02 {
background-color: rgb(var(--theme-preset-background-sunburst-02));
.theme-preset-background-sollight-02 {
background-color: rgb(var(--theme-preset-background-sollight-02));
}
.theme-preset-background-sunburst-03 {
background-color: rgb(var(--theme-preset-background-sunburst-03));
.theme-preset-background-sollight-03 {
background-color: rgb(var(--theme-preset-background-sollight-03));
}
.theme-preset-background-sunburst-04 {
background-color: rgb(var(--theme-preset-background-sunburst-04));
.theme-preset-background-sollight-04 {
background-color: rgb(var(--theme-preset-background-sollight-04));
}
.theme-preset-accent-sunburst {
background-color: rgb(var(--theme-preset-accent-sunburst));
.theme-preset-accent-sollight {
background-color: rgb(var(--theme-preset-accent-sollight));
}
.theme-preset-font-display-sunburst {
font-family: var(--theme-preset-font-display-sunburst);
color: rgb(var(--theme-preset-font-color-sunburst));
.theme-preset-font-display-sollight {
font-family: var(--theme-preset-font-display-sollight);
color: rgb(var(--theme-preset-font-color-sollight));
}
.theme-preset-font-ui-sunburst {
font-family: var(--theme-preset-font-ui-sunburst);
color: rgb(var(--theme-preset-font-color-sunburst));
.theme-preset-font-ui-sollight {
font-family: var(--theme-preset-font-ui-sollight);
color: rgb(var(--theme-preset-font-color-sollight));
}
.theme-preset-background-coralgreen-01 {
background-color: rgb(var(--theme-preset-background-coralgreen-01));
.theme-preset-background-artdeco-01 {
background-color: rgb(var(--theme-preset-background-artdeco-01));
}
.theme-preset-background-coralgreen-02 {
background-color: rgb(var(--theme-preset-background-coralgreen-02));
.theme-preset-background-artdeco-02 {
background-color: rgb(var(--theme-preset-background-artdeco-02));
}
.theme-preset-background-coralgreen-03 {
background-color: rgb(var(--theme-preset-background-coralgreen-03));
.theme-preset-background-artdeco-03 {
background-color: rgb(var(--theme-preset-background-artdeco-03));
}
.theme-preset-background-coralgreen-04 {
background-color: rgb(var(--theme-preset-background-coralgreen-04));
.theme-preset-background-artdeco-04 {
background-color: rgb(var(--theme-preset-background-artdeco-04));
}
.theme-preset-accent-coralgreen {
background-color: rgb(var(--theme-preset-accent-coralgreen));
.theme-preset-accent-artdeco {
background-color: rgb(var(--theme-preset-accent-artdeco));
}
.theme-preset-font-display-coralgreen {
font-family: var(--theme-preset-font-display-coralgreen);
color: rgb(var(--theme-preset-font-color-coralgreen));
.theme-preset-font-display-artdeco {
font-family: var(--theme-preset-font-display-artdeco);
color: rgb(var(--theme-preset-font-color-artdeco));
}
.theme-preset-font-ui-coralgreen {
font-family: var(--theme-preset-font-ui-coralgreen);
color: rgb(var(--theme-preset-font-color-coralgreen));
.theme-preset-font-ui-artdeco {
font-family: var(--theme-preset-font-ui-artdeco);
color: rgb(var(--theme-preset-font-color-artdeco));
}
.theme-preset-background-purplegem-01 {
background-color: rgb(var(--theme-preset-background-purplegem-01));
.theme-preset-background-macaroon-01 {
background-color: rgb(var(--theme-preset-background-macaroon-01));
}
.theme-preset-background-purplegem-02 {
background-color: rgb(var(--theme-preset-background-purplegem-02));
.theme-preset-background-macaroon-02 {
background-color: rgb(var(--theme-preset-background-macaroon-02));
}
.theme-preset-background-purplegem-03 {
background-color: rgb(var(--theme-preset-background-purplegem-03));
.theme-preset-background-macaroon-03 {
background-color: rgb(var(--theme-preset-background-macaroon-03));
}
.theme-preset-background-purplegem-04 {
background-color: rgb(var(--theme-preset-background-purplegem-04));
.theme-preset-background-macaroon-04 {
background-color: rgb(var(--theme-preset-background-macaroon-04));
}
.theme-preset-accent-purplegem {
background-color: rgb(var(--theme-preset-accent-purplegem));
.theme-preset-accent-macaroon {
background-color: rgb(var(--theme-preset-accent-macaroon));
}
.theme-preset-font-display-purplegem {
font-family: var(--theme-preset-font-display-purplegem);
color: rgb(var(--theme-preset-font-color-purplegem));
.theme-preset-font-display-macaroon {
font-family: var(--theme-preset-font-display-macaroon);
color: rgb(var(--theme-preset-font-color-macaroon));
}
.theme-preset-font-ui-purplegem {
font-family: var(--theme-preset-font-ui-purplegem);
color: rgb(var(--theme-preset-font-color-purplegem));
.theme-preset-font-ui-macaroon {
font-family: var(--theme-preset-font-ui-macaroon);
color: rgb(var(--theme-preset-font-color-macaroon));
}
.theme-preset-background-hotpepper-01 {
@ -412,34 +444,34 @@
color: rgb(var(--theme-preset-font-color-hotpepper));
}
.theme-preset-background-steelgrey-01 {
background-color: rgb(var(--theme-preset-background-steelgrey-01));
.theme-preset-background-steel-01 {
background-color: rgb(var(--theme-preset-background-steel-01));
}
.theme-preset-background-steelgrey-02 {
background-color: rgb(var(--theme-preset-background-steelgrey-02));
.theme-preset-background-steel-02 {
background-color: rgb(var(--theme-preset-background-steel-02));
}
.theme-preset-background-steelgrey-03 {
background-color: rgb(var(--theme-preset-background-steelgrey-03));
.theme-preset-background-steel-03 {
background-color: rgb(var(--theme-preset-background-steel-03));
}
.theme-preset-background-steelgrey-04 {
background-color: rgb(var(--theme-preset-background-steelgrey-04));
.theme-preset-background-steel-04 {
background-color: rgb(var(--theme-preset-background-steel-04));
}
.theme-preset-accent-steelgrey {
background-color: rgb(var(--theme-preset-accent-steelgrey));
.theme-preset-accent-steel {
background-color: rgb(var(--theme-preset-accent-steel));
}
.theme-preset-font-display-steelgrey {
font-family: var(--theme-preset-font-display-steelgrey);
color: rgb(var(--theme-preset-font-color-steelgrey));
.theme-preset-font-display-steel {
font-family: var(--theme-preset-font-display-steel);
color: rgb(var(--theme-preset-font-color-steel));
}
.theme-preset-font-ui-steelgrey {
font-family: var(--theme-preset-font-ui-steelgrey);
color: rgb(var(--theme-preset-font-color-steelgrey));
.theme-preset-font-ui-steel {
font-family: var(--theme-preset-font-ui-steel);
color: rgb(var(--theme-preset-font-color-steel));
}
.theme-preset-background-outrun-01 {
@ -502,62 +534,62 @@
color: rgb(var(--theme-preset-font-color-pumpkin));
}
.theme-preset-background-whoosh-01 {
background-color: rgb(var(--theme-preset-background-whoosh-01));
.theme-preset-background-bubblegum-01 {
background-color: rgb(var(--theme-preset-background-bubblegum-01));
}
.theme-preset-background-whoosh-02 {
background-color: rgb(var(--theme-preset-background-whoosh-02));
.theme-preset-background-bubblegum-02 {
background-color: rgb(var(--theme-preset-background-bubblegum-02));
}
.theme-preset-background-whoosh-03 {
background-color: rgb(var(--theme-preset-background-whoosh-03));
.theme-preset-background-bubblegum-03 {
background-color: rgb(var(--theme-preset-background-bubblegum-03));
}
.theme-preset-background-whoosh-04 {
background-color: rgb(var(--theme-preset-background-whoosh-04));
.theme-preset-background-bubblegum-04 {
background-color: rgb(var(--theme-preset-background-bubblegum-04));
}
.theme-preset-accent-whoosh {
background-color: rgb(var(--theme-preset-accent-whoosh));
.theme-preset-accent-bubblegum {
background-color: rgb(var(--theme-preset-accent-bubblegum));
}
.theme-preset-font-display-whoosh {
font-family: var(--theme-preset-font-display-whoosh);
color: rgb(var(--theme-preset-font-color-whoosh));
.theme-preset-font-display-bubblegum {
font-family: var(--theme-preset-font-display-bubblegum);
color: rgb(var(--theme-preset-font-color-bubblegum));
}
.theme-preset-font-ui-whoosh {
font-family: var(--theme-preset-font-ui-whoosh);
color: rgb(var(--theme-preset-font-color-whoosh));
.theme-preset-font-ui-bubblegum {
font-family: var(--theme-preset-font-ui-bubblegum);
color: rgb(var(--theme-preset-font-color-bubblegum));
}
.theme-preset-background-eldergold-01 {
background-color: rgb(var(--theme-preset-background-eldergold-01));
.theme-preset-background-elderbean-01 {
background-color: rgb(var(--theme-preset-background-elderbean-01));
}
.theme-preset-background-eldergold-02 {
background-color: rgb(var(--theme-preset-background-eldergold-02));
.theme-preset-background-elderbean-02 {
background-color: rgb(var(--theme-preset-background-elderbean-02));
}
.theme-preset-background-eldergold-03 {
background-color: rgb(var(--theme-preset-background-eldergold-03));
.theme-preset-background-elderbean-03 {
background-color: rgb(var(--theme-preset-background-elderbean-03));
}
.theme-preset-background-eldergold-04 {
background-color: rgb(var(--theme-preset-background-eldergold-04));
.theme-preset-background-elderbean-04 {
background-color: rgb(var(--theme-preset-background-elderbean-04));
}
.theme-preset-accent-eldergold {
background-color: rgb(var(--theme-preset-accent-eldergold));
.theme-preset-accent-elderbean {
background-color: rgb(var(--theme-preset-accent-elderbean));
}
.theme-preset-font-display-eldergold {
font-family: var(--theme-preset-font-display-eldergold);
color: rgb(var(--theme-preset-font-color-eldergold));
.theme-preset-font-display-elderbean {
font-family: var(--theme-preset-font-display-elderbean);
color: rgb(var(--theme-preset-font-color-elderbean));
}
.theme-preset-font-ui-eldergold {
font-family: var(--theme-preset-font-ui-eldergold);
color: rgb(var(--theme-preset-font-color-eldergold));
.theme-preset-font-ui-elderbean {
font-family: var(--theme-preset-font-ui-elderbean);
color: rgb(var(--theme-preset-font-color-elderbean));
}

114
src/css/variables.css
View File

@ -40,13 +40,13 @@
--theme-preset-accent-midnight: 25, 25, 25;
--theme-preset-font-display-midnight: sans-serif;
--theme-preset-font-ui-midnight: sans-serif;
--theme-preset-background-bluegum-01: 25, 25, 25;
--theme-preset-background-bluegum-02: 25, 25, 25;
--theme-preset-background-bluegum-03: 25, 25, 25;
--theme-preset-background-bluegum-04: 25, 25, 25;
--theme-preset-accent-bluegum: 25, 25, 25;
--theme-preset-font-display-bluegum: sans-serif;
--theme-preset-font-ui-bluegum: sans-serif;
--theme-preset-background-cruiser-01: 25, 25, 25;
--theme-preset-background-cruiser-02: 25, 25, 25;
--theme-preset-background-cruiser-03: 25, 25, 25;
--theme-preset-background-cruiser-04: 25, 25, 25;
--theme-preset-accent-cruiser: 25, 25, 25;
--theme-preset-font-display-cruiser: sans-serif;
--theme-preset-font-ui-cruiser: sans-serif;
--theme-preset-background-sharpmint-01: 25, 25, 25;
--theme-preset-background-sharpmint-02: 25, 25, 25;
--theme-preset-background-sharpmint-03: 25, 25, 25;
@ -54,41 +54,41 @@
--theme-preset-accent-sharpmint: 25, 25, 25;
--theme-preset-font-display-sharpmint: sans-serif;
--theme-preset-font-ui-sharpmint: sans-serif;
--theme-preset-background-snowblue-01: 25, 25, 25;
--theme-preset-background-snowblue-02: 25, 25, 25;
--theme-preset-background-snowblue-03: 25, 25, 25;
--theme-preset-background-snowblue-04: 25, 25, 25;
--theme-preset-accent-snowblue: 25, 25, 25;
--theme-preset-font-display-snowblue: sans-serif;
--theme-preset-font-ui-snowblue: sans-serif;
--theme-preset-background-chocorum-01: 25, 25, 25;
--theme-preset-background-chocorum-02: 25, 25, 25;
--theme-preset-background-chocorum-03: 25, 25, 25;
--theme-preset-background-chocorum-04: 25, 25, 25;
--theme-preset-accent-chocorum: 25, 25, 25;
--theme-preset-font-display-chocorum: sans-serif;
--theme-preset-font-ui-chocorum: sans-serif;
--theme-preset-background-sunburst-01: 25, 25, 25;
--theme-preset-background-sunburst-02: 25, 25, 25;
--theme-preset-background-sunburst-03: 25, 25, 25;
--theme-preset-background-sunburst-04: 25, 25, 25;
--theme-preset-accent-sunburst: 25, 25, 25;
--theme-preset-font-display-sunburst: sans-serif;
--theme-preset-font-ui-sunburst: sans-serif;
--theme-preset-background-coralgreen-01: 25, 25, 25;
--theme-preset-background-coralgreen-02: 25, 25, 25;
--theme-preset-background-coralgreen-03: 25, 25, 25;
--theme-preset-background-coralgreen-04: 25, 25, 25;
--theme-preset-accent-coralgreen: 25, 25, 25;
--theme-preset-font-display-coralgreen: sans-serif;
--theme-preset-font-ui-coralgreen: sans-serif;
--theme-preset-background-purplegem-01: 25, 25, 25;
--theme-preset-background-purplegem-02: 25, 25, 25;
--theme-preset-background-purplegem-03: 25, 25, 25;
--theme-preset-background-purplegem-04: 25, 25, 25;
--theme-preset-accent-purplegem: 25, 25, 25;
--theme-preset-font-display-purplegem: sans-serif;
--theme-preset-font-ui-purplegem: sans-serif;
--theme-preset-background-snowglow-01: 25, 25, 25;
--theme-preset-background-snowglow-02: 25, 25, 25;
--theme-preset-background-snowglow-03: 25, 25, 25;
--theme-preset-background-snowglow-04: 25, 25, 25;
--theme-preset-accent-snowglow: 25, 25, 25;
--theme-preset-font-display-snowglow: sans-serif;
--theme-preset-font-ui-snowglow: sans-serif;
--theme-preset-background-rumble-01: 25, 25, 25;
--theme-preset-background-rumble-02: 25, 25, 25;
--theme-preset-background-rumble-03: 25, 25, 25;
--theme-preset-background-rumble-04: 25, 25, 25;
--theme-preset-accent-rumble: 25, 25, 25;
--theme-preset-font-display-rumble: sans-serif;
--theme-preset-font-ui-rumble: sans-serif;
--theme-preset-background-sollight-01: 25, 25, 25;
--theme-preset-background-sollight-02: 25, 25, 25;
--theme-preset-background-sollight-03: 25, 25, 25;
--theme-preset-background-sollight-04: 25, 25, 25;
--theme-preset-accent-sollight: 25, 25, 25;
--theme-preset-font-display-sollight: sans-serif;
--theme-preset-font-ui-sollight: sans-serif;
--theme-preset-background-artdeco-01: 25, 25, 25;
--theme-preset-background-artdeco-02: 25, 25, 25;
--theme-preset-background-artdeco-03: 25, 25, 25;
--theme-preset-background-artdeco-04: 25, 25, 25;
--theme-preset-accent-artdeco: 25, 25, 25;
--theme-preset-font-display-artdeco: sans-serif;
--theme-preset-font-ui-artdeco: sans-serif;
--theme-preset-background-macaroon-01: 25, 25, 25;
--theme-preset-background-macaroon-02: 25, 25, 25;
--theme-preset-background-macaroon-03: 25, 25, 25;
--theme-preset-background-macaroon-04: 25, 25, 25;
--theme-preset-accent-macaroon: 25, 25, 25;
--theme-preset-font-display-macaroon: sans-serif;
--theme-preset-font-ui-macaroon: sans-serif;
--theme-preset-background-hotpepper-01: 25, 25, 25;
--theme-preset-background-hotpepper-02: 25, 25, 25;
--theme-preset-background-hotpepper-03: 25, 25, 25;
@ -96,13 +96,13 @@
--theme-preset-accent-hotpepper: 25, 25, 25;
--theme-preset-font-display-hotpepper: sans-serif;
--theme-preset-font-ui-hotpepper: sans-serif;
--theme-preset-background-steelgrey-01: 25, 25, 25;
--theme-preset-background-steelgrey-02: 25, 25, 25;
--theme-preset-background-steelgrey-03: 25, 25, 25;
--theme-preset-background-steelgrey-04: 25, 25, 25;
--theme-preset-accent-steelgrey: 25, 25, 25;
--theme-preset-font-display-steelgrey: sans-serif;
--theme-preset-font-ui-steelgrey: sans-serif;
--theme-preset-background-steel-01: 25, 25, 25;
--theme-preset-background-steel-02: 25, 25, 25;
--theme-preset-background-steel-03: 25, 25, 25;
--theme-preset-background-steel-04: 25, 25, 25;
--theme-preset-accent-steel: 25, 25, 25;
--theme-preset-font-display-steel: sans-serif;
--theme-preset-font-ui-steel: sans-serif;
--theme-preset-background-outrun-01: 25, 25, 25;
--theme-preset-background-outrun-02: 25, 25, 25;
--theme-preset-background-outrun-03: 25, 25, 25;
@ -117,14 +117,14 @@
--theme-preset-accent-pumpkin: 25, 25, 25;
--theme-preset-font-display-pumpkin: sans-serif;
--theme-preset-font-ui-pumpkin: sans-serif;
--theme-preset-background-whoosh-01: 25, 25, 25;
--theme-preset-background-whoosh-02: 25, 25, 25;
--theme-preset-background-whoosh-03: 25, 25, 25;
--theme-preset-background-whoosh-04: 25, 25, 25;
--theme-preset-accent-whoosh: 25, 25, 25;
--theme-preset-font-display-whoosh: sans-serif;
--theme-preset-font-ui-whoosh: sans-serif;
--theme-preset-preview-size: 7em;
--theme-preset-background-bubblegum-01: 25, 25, 25;
--theme-preset-background-bubblegum-02: 25, 25, 25;
--theme-preset-background-bubblegum-03: 25, 25, 25;
--theme-preset-background-bubblegum-04: 25, 25, 25;
--theme-preset-accent-bubblegum: 25, 25, 25;
--theme-preset-font-display-bubblegum: sans-serif;
--theme-preset-font-ui-bubblegum: sans-serif;
--theme-preset-preview-size: 6em;
/* header */
--header-area-width: 100%;
--header-shade-color: var(--theme-color-01);

179
src/index.html
View File

@ -38,7 +38,7 @@
<link rel="stylesheet" href="css/auto-suggest.css">
<link rel="stylesheet" href="css/fontawesome.css">
<!-- end-css-block -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abel|Alatsi|Big+Shoulders+Display|Calistoga|Fredoka+One|Girassol|Gugi|Lato|Life+Savers|Major+Mono+Display|Monoton|Montserrat|Muli|Odibee+Sans|Poiret+One|Quicksand|Raleway|Righteous|Roboto+Condensed|Source+Sans+Pro|Unica+One&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abel|Alatsi|Big+Shoulders+Display|Calistoga|Fredoka+One|Girassol|Gugi|Lato|Life+Savers|Major+Mono+Display|Monoton|Montserrat|Muli|Odibee+Sans|Poiret+One|Quicksand|Raleway|Righteous|Roboto+Condensed|Source+Sans+Pro|Unica+One|Autour+One|Solway&display=swap">
</head>
<body>
@ -1344,16 +1344,31 @@
</button>
</div>
<div class="button-wrap">
<button class="control-theme-preset-bluegum theme-preset-button button mb-0" tabindex="-1">
<button class="control-theme-preset-pym theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-bluegum-01"></span>
<span class="theme-preset-background-02 theme-preset-background-bluegum-02"></span>
<span class="theme-preset-background-03 theme-preset-background-bluegum-03"></span>
<span class="theme-preset-background-04 theme-preset-background-bluegum-04"></span>
<span class="theme-preset-accent theme-preset-accent-bluegum"></span>
<span class="theme-preset-font theme-preset-font-bluegum">
<span class="theme-preset-font-display theme-preset-font-display-bluegum">Blue Gum</span>
<span class="theme-preset-font-ui theme-preset-font-ui-bluegum">ABC 123</span>
<span class="theme-preset-background-01 theme-preset-background-pym-01"></span>
<span class="theme-preset-background-02 theme-preset-background-pym-02"></span>
<span class="theme-preset-background-03 theme-preset-background-pym-03"></span>
<span class="theme-preset-background-04 theme-preset-background-pym-04"></span>
<span class="theme-preset-accent theme-preset-accent-pym"></span>
<span class="theme-preset-font theme-preset-font-pym">
<span class="theme-preset-font-display theme-preset-font-display-pym">Pym</span>
<span class="theme-preset-font-ui theme-preset-font-ui-pym">ABC 123</span>
</span>
</div>
</button>
</div>
<div class="button-wrap">
<button class="control-theme-preset-cruiser theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-cruiser-01"></span>
<span class="theme-preset-background-02 theme-preset-background-cruiser-02"></span>
<span class="theme-preset-background-03 theme-preset-background-cruiser-03"></span>
<span class="theme-preset-background-04 theme-preset-background-cruiser-04"></span>
<span class="theme-preset-accent theme-preset-accent-cruiser"></span>
<span class="theme-preset-font theme-preset-font-cruiser">
<span class="theme-preset-font-display theme-preset-font-display-cruiser">Cruiser</span>
<span class="theme-preset-font-ui theme-preset-font-ui-cruiser">ABC 123</span>
</span>
</div>
</button>
@ -1374,76 +1389,76 @@
</button>
</div>
<div class="button-wrap">
<button class="control-theme-preset-snowblue theme-preset-button button mb-0" tabindex="-1">
<button class="control-theme-preset-snowglow theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-snowblue-01"></span>
<span class="theme-preset-background-02 theme-preset-background-snowblue-02"></span>
<span class="theme-preset-background-03 theme-preset-background-snowblue-03"></span>
<span class="theme-preset-background-04 theme-preset-background-snowblue-04"></span>
<span class="theme-preset-accent theme-preset-accent-snowblue"></span>
<span class="theme-preset-font theme-preset-font-snowblue">
<span class="theme-preset-font-display theme-preset-font-display-snowblue">Snow Blue</span>
<span class="theme-preset-font-ui theme-preset-font-ui-snowblue">ABC 123</span>
<span class="theme-preset-background-01 theme-preset-background-snowglow-01"></span>
<span class="theme-preset-background-02 theme-preset-background-snowglow-02"></span>
<span class="theme-preset-background-03 theme-preset-background-snowglow-03"></span>
<span class="theme-preset-background-04 theme-preset-background-snowglow-04"></span>
<span class="theme-preset-accent theme-preset-accent-snowglow"></span>
<span class="theme-preset-font theme-preset-font-snowglow">
<span class="theme-preset-font-display theme-preset-font-display-snowglow">Snow Glow</span>
<span class="theme-preset-font-ui theme-preset-font-ui-snowglow">ABC 123</span>
</span>
</div>
</button>
</div>
<div class="button-wrap">
<button class="control-theme-preset-chocorum theme-preset-button button mb-0" tabindex="-1">
<button class="control-theme-preset-rumble theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-chocorum-01"></span>
<span class="theme-preset-background-02 theme-preset-background-chocorum-02"></span>
<span class="theme-preset-background-03 theme-preset-background-chocorum-03"></span>
<span class="theme-preset-background-04 theme-preset-background-chocorum-04"></span>
<span class="theme-preset-accent theme-preset-accent-chocorum"></span>
<span class="theme-preset-font theme-preset-font-chocorum">
<span class="theme-preset-font-display theme-preset-font-display-chocorum">Choco Rum</span>
<span class="theme-preset-font-ui theme-preset-font-ui-chocorum">ABC 123</span>
<span class="theme-preset-background-01 theme-preset-background-rumble-01"></span>
<span class="theme-preset-background-02 theme-preset-background-rumble-02"></span>
<span class="theme-preset-background-03 theme-preset-background-rumble-03"></span>
<span class="theme-preset-background-04 theme-preset-background-rumble-04"></span>
<span class="theme-preset-accent theme-preset-accent-rumble"></span>
<span class="theme-preset-font theme-preset-font-rumble">
<span class="theme-preset-font-display theme-preset-font-display-rumble">Rumble</span>
<span class="theme-preset-font-ui theme-preset-font-ui-rumble">ABC 123</span>
</span>
</div>
</button>
</div>
<div class="button-wrap">
<button class="control-theme-preset-sunburst theme-preset-button button mb-0" tabindex="-1">
<button class="control-theme-preset-sollight theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-sunburst-01"></span>
<span class="theme-preset-background-02 theme-preset-background-sunburst-02"></span>
<span class="theme-preset-background-03 theme-preset-background-sunburst-03"></span>
<span class="theme-preset-background-04 theme-preset-background-sunburst-04"></span>
<span class="theme-preset-accent theme-preset-accent-sunburst"></span>
<span class="theme-preset-font theme-preset-font-sunburst">
<span class="theme-preset-font-display theme-preset-font-display-sunburst">Sun Burst</span>
<span class="theme-preset-font-ui theme-preset-font-ui-sunburst">ABC 123</span>
<span class="theme-preset-background-01 theme-preset-background-sollight-01"></span>
<span class="theme-preset-background-02 theme-preset-background-sollight-02"></span>
<span class="theme-preset-background-03 theme-preset-background-sollight-03"></span>
<span class="theme-preset-background-04 theme-preset-background-sollight-04"></span>
<span class="theme-preset-accent theme-preset-accent-sollight"></span>
<span class="theme-preset-font theme-preset-font-sollight">
<span class="theme-preset-font-display theme-preset-font-display-sollight">Sol Light</span>
<span class="theme-preset-font-ui theme-preset-font-ui-sollight">ABC 123</span>
</span>
</div>
</button>
</div>
<div class="button-wrap">
<button class="control-theme-preset-coralgreen theme-preset-button button mb-0" tabindex="-1">
<button class="control-theme-preset-artdeco theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-coralgreen-01"></span>
<span class="theme-preset-background-02 theme-preset-background-coralgreen-02"></span>
<span class="theme-preset-background-03 theme-preset-background-coralgreen-03"></span>
<span class="theme-preset-background-04 theme-preset-background-coralgreen-04"></span>
<span class="theme-preset-accent theme-preset-accent-coralgreen"></span>
<span class="theme-preset-font theme-preset-font-coralgreen">
<span class="theme-preset-font-display theme-preset-font-display-coralgreen">Coral Green</span>
<span class="theme-preset-font-ui theme-preset-font-ui-coralgreen">ABC 123</span>
<span class="theme-preset-background-01 theme-preset-background-artdeco-01"></span>
<span class="theme-preset-background-02 theme-preset-background-artdeco-02"></span>
<span class="theme-preset-background-03 theme-preset-background-artdeco-03"></span>
<span class="theme-preset-background-04 theme-preset-background-artdeco-04"></span>
<span class="theme-preset-accent theme-preset-accent-artdeco"></span>
<span class="theme-preset-font theme-preset-font-artdeco">
<span class="theme-preset-font-display theme-preset-font-display-artdeco">Art Deco</span>
<span class="theme-preset-font-ui theme-preset-font-ui-artdeco">ABC 123</span>
</span>
</div>
</button>
</div>
<div class="button-wrap">
<button class="control-theme-preset-purplegem theme-preset-button button mb-0" tabindex="-1">
<button class="control-theme-preset-macaroon theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-purplegem-01"></span>
<span class="theme-preset-background-02 theme-preset-background-purplegem-02"></span>
<span class="theme-preset-background-03 theme-preset-background-purplegem-03"></span>
<span class="theme-preset-background-04 theme-preset-background-purplegem-04"></span>
<span class="theme-preset-accent theme-preset-accent-purplegem"></span>
<span class="theme-preset-font theme-preset-font-purplegem">
<span class="theme-preset-font-display theme-preset-font-display-purplegem">Purple Gem</span>
<span class="theme-preset-font-ui theme-preset-font-ui-purplegem">ABC 123</span>
<span class="theme-preset-background-01 theme-preset-background-macaroon-01"></span>
<span class="theme-preset-background-02 theme-preset-background-macaroon-02"></span>
<span class="theme-preset-background-03 theme-preset-background-macaroon-03"></span>
<span class="theme-preset-background-04 theme-preset-background-macaroon-04"></span>
<span class="theme-preset-accent theme-preset-accent-macaroon"></span>
<span class="theme-preset-font theme-preset-font-macaroon">
<span class="theme-preset-font-display theme-preset-font-display-macaroon">Macaroon</span>
<span class="theme-preset-font-ui theme-preset-font-ui-macaroon">ABC 123</span>
</span>
</div>
</button>
@ -1464,16 +1479,16 @@
</button>
</div>
<div class="button-wrap">
<button class="control-theme-preset-steelgrey theme-preset-button button mb-0" tabindex="-1">
<button class="control-theme-preset-steel theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-steelgrey-01"></span>
<span class="theme-preset-background-02 theme-preset-background-steelgrey-02"></span>
<span class="theme-preset-background-03 theme-preset-background-steelgrey-03"></span>
<span class="theme-preset-background-04 theme-preset-background-steelgrey-04"></span>
<span class="theme-preset-accent theme-preset-accent-steelgrey"></span>
<span class="theme-preset-font theme-preset-font-steelgrey">
<span class="theme-preset-font-display theme-preset-font-display-steelgrey">Steel Grey</span>
<span class="theme-preset-font-ui theme-preset-font-ui-steelgrey">ABC 123</span>
<span class="theme-preset-background-01 theme-preset-background-steel-01"></span>
<span class="theme-preset-background-02 theme-preset-background-steel-02"></span>
<span class="theme-preset-background-03 theme-preset-background-steel-03"></span>
<span class="theme-preset-background-04 theme-preset-background-steel-04"></span>
<span class="theme-preset-accent theme-preset-accent-steel"></span>
<span class="theme-preset-font theme-preset-font-steel">
<span class="theme-preset-font-display theme-preset-font-display-steel">Steel</span>
<span class="theme-preset-font-ui theme-preset-font-ui-steel">ABC 123</span>
</span>
</div>
</button>
@ -1509,31 +1524,31 @@
</button>
</div>
<div class="button-wrap">
<button class="control-theme-preset-whoosh theme-preset-button button mb-0" tabindex="-1">
<button class="control-theme-preset-bubblegum theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-whoosh-01"></span>
<span class="theme-preset-background-02 theme-preset-background-whoosh-02"></span>
<span class="theme-preset-background-03 theme-preset-background-whoosh-03"></span>
<span class="theme-preset-background-04 theme-preset-background-whoosh-04"></span>
<span class="theme-preset-accent theme-preset-accent-whoosh"></span>
<span class="theme-preset-font theme-preset-font-whoosh">
<span class="theme-preset-font-display theme-preset-font-display-whoosh">Whoosh</span>
<span class="theme-preset-font-ui theme-preset-font-ui-whoosh">ABC 123</span>
<span class="theme-preset-background-01 theme-preset-background-bubblegum-01"></span>
<span class="theme-preset-background-02 theme-preset-background-bubblegum-02"></span>
<span class="theme-preset-background-03 theme-preset-background-bubblegum-03"></span>
<span class="theme-preset-background-04 theme-preset-background-bubblegum-04"></span>
<span class="theme-preset-accent theme-preset-accent-bubblegum"></span>
<span class="theme-preset-font theme-preset-font-bubblegum">
<span class="theme-preset-font-display theme-preset-font-display-bubblegum">Bubble Gum</span>
<span class="theme-preset-font-ui theme-preset-font-ui-bubblegum">ABC 123</span>
</span>
</div>
</button>
</div>
<div class="button-wrap">
<button class="control-theme-preset-eldergold theme-preset-button button mb-0" tabindex="-1">
<button class="control-theme-preset-elderbean theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-eldergold-01"></span>
<span class="theme-preset-background-02 theme-preset-background-eldergold-02"></span>
<span class="theme-preset-background-03 theme-preset-background-eldergold-03"></span>
<span class="theme-preset-background-04 theme-preset-background-eldergold-04"></span>
<span class="theme-preset-accent theme-preset-accent-eldergold"></span>
<span class="theme-preset-font theme-preset-font-eldergold">
<span class="theme-preset-font-display theme-preset-font-display-eldergold">Elder Gold</span>
<span class="theme-preset-font-ui theme-preset-font-ui-eldergold">ABC 123</span>
<span class="theme-preset-background-01 theme-preset-background-elderbean-01"></span>
<span class="theme-preset-background-02 theme-preset-background-elderbean-02"></span>
<span class="theme-preset-background-03 theme-preset-background-elderbean-03"></span>
<span class="theme-preset-background-04 theme-preset-background-elderbean-04"></span>
<span class="theme-preset-accent theme-preset-accent-elderbean"></span>
<span class="theme-preset-font theme-preset-font-elderbean">
<span class="theme-preset-font-display theme-preset-font-display-elderbean">Elder Bean</span>
<span class="theme-preset-font-ui theme-preset-font-ui-elderbean">ABC 123</span>
</span>
</div>
</button>

51
src/js/control.js
View File

@ -2580,10 +2580,25 @@ var control = (function() {
render.class();
}
}, {
element: helper.e(".control-theme-preset-bluegum"),
element: helper.e(".control-theme-preset-pym"),
type: "button",
func: function() {
theme.preset("bluegum");
theme.preset("pym");
theme.render.font.display();
theme.render.font.ui();
theme.style.check();
theme.render.color.shade();
theme.render.accent.color();
theme.render.radius();
link.groupAndItems();
render.update();
render.class();
}
}, {
element: helper.e(".control-theme-preset-cruiser"),
type: "button",
func: function() {
theme.preset("cruiser");
theme.render.font.display();
theme.render.font.ui();
theme.style.check();
@ -2610,10 +2625,10 @@ var control = (function() {
render.class();
}
}, {
element: helper.e(".control-theme-preset-snowblue"),
element: helper.e(".control-theme-preset-snowglow"),
type: "button",
func: function() {
theme.preset("snowblue");
theme.preset("snowglow");
theme.render.font.display();
theme.render.font.ui();
theme.style.check();
@ -2625,10 +2640,10 @@ var control = (function() {
render.class();
}
}, {
element: helper.e(".control-theme-preset-chocorum"),
element: helper.e(".control-theme-preset-rumble"),
type: "button",
func: function() {
theme.preset("chocorum");
theme.preset("rumble");
theme.render.font.display();
theme.render.font.ui();
theme.style.check();
@ -2640,10 +2655,10 @@ var control = (function() {
render.class();
}
}, {
element: helper.e(".control-theme-preset-sunburst"),
element: helper.e(".control-theme-preset-sollight"),
type: "button",
func: function() {
theme.preset("sunburst");
theme.preset("sollight");
theme.render.font.display();
theme.render.font.ui();
theme.style.check();
@ -2655,10 +2670,10 @@ var control = (function() {
render.class();
}
}, {
element: helper.e(".control-theme-preset-coralgreen"),
element: helper.e(".control-theme-preset-artdeco"),
type: "button",
func: function() {
theme.preset("coralgreen");
theme.preset("artdeco");
theme.render.font.display();
theme.render.font.ui();
theme.style.check();
@ -2670,10 +2685,10 @@ var control = (function() {
render.class();
}
}, {
element: helper.e(".control-theme-preset-purplegem"),
element: helper.e(".control-theme-preset-macaroon"),
type: "button",
func: function() {
theme.preset("purplegem");
theme.preset("macaroon");
theme.render.font.display();
theme.render.font.ui();
theme.style.check();
@ -2700,10 +2715,10 @@ var control = (function() {
render.class();
}
}, {
element: helper.e(".control-theme-preset-steelgrey"),
element: helper.e(".control-theme-preset-steel"),
type: "button",
func: function() {
theme.preset("steelgrey");
theme.preset("steel");
theme.render.font.display();
theme.render.font.ui();
theme.style.check();
@ -2745,10 +2760,10 @@ var control = (function() {
render.class();
}
}, {
element: helper.e(".control-theme-preset-whoosh"),
element: helper.e(".control-theme-preset-bubblegum"),
type: "button",
func: function() {
theme.preset("whoosh");
theme.preset("bubblegum");
theme.render.font.display();
theme.render.font.ui();
theme.style.check();
@ -2760,10 +2775,10 @@ var control = (function() {
render.class();
}
}, {
element: helper.e(".control-theme-preset-eldergold"),
element: helper.e(".control-theme-preset-elderbean"),
type: "button",
func: function() {
theme.preset("eldergold");
theme.preset("elderbean");
theme.render.font.display();
theme.render.font.ui();
theme.style.check();

43
src/js/theme.js
View File

@ -191,7 +191,32 @@ var theme = (function() {
radius: 0.5,
style: "dark"
},
bluegum: {
pym: {
font: {
display: "Autour One",
ui: "Solway"
},
color: {
hsl: {
h: 278,
s: 73,
l: 50
},
rgb: {
r: 153,
g: 34,
b: 221
}
},
accent: {
r: 0,
g: 255,
b: 170
},
radius: 0.1,
style: "dark"
},
cruiser: {
font: {
display: "Alatsi",
ui: "Source Sans Pro"
@ -241,7 +266,7 @@ var theme = (function() {
radius: 0.8,
style: "dark"
},
snowblue: {
snowglow: {
font: {
display: "Righteous",
ui: "Raleway"
@ -266,7 +291,7 @@ var theme = (function() {
radius: 0,
style: "light"
},
chocorum: {
rumble: {
font: {
display: "Odibee Sans",
ui: "Roboto Condensed"
@ -291,7 +316,7 @@ var theme = (function() {
radius: 0.75,
style: "dark"
},
sunburst: {
sollight: {
font: {
display: "Fredoka One",
ui: "Muli"
@ -316,7 +341,7 @@ var theme = (function() {
radius: 0.5,
style: "light"
},
coralgreen: {
artdeco: {
font: {
display: "Poiret One",
ui: "Lato"
@ -341,7 +366,7 @@ var theme = (function() {
radius: 2,
style: "dark"
},
purplegem: {
macaroon: {
font: {
display: "Calistoga",
ui: "Source Sans Pro"
@ -391,7 +416,7 @@ var theme = (function() {
radius: 0.6,
style: "dark"
},
steelgrey: {
steel: {
font: {
display: "Abel",
ui: "Raleway"
@ -466,7 +491,7 @@ var theme = (function() {
radius: 0.2,
style: "dark"
},
whoosh: {
bubblegum: {
font: {
display: "Monoton",
ui: "Lato"
@ -491,7 +516,7 @@ var theme = (function() {
radius: 1.2,
style: "dark"
},
eldergold: {
elderbean: {
font: {
display: "Life Savers",
ui: "Quicksand"