extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-12-27 00:59:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

[feature] add theme custom save controls

Browse Source
This commit is contained in:
Kombie 2020-01-03 09:21:39 -07:00 committed by GitHub
parent c9e0d01969
commit 977f966021
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 1049 additions and 1769 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "nighttab", "name": "nighttab",
"version": "4.7.0", "version": "4.8.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "nighttab", "name": "nighttab",
"version": "4.7.0", "version": "4.8.0",
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

2
src/css/fonts.css
View File

@ -65,7 +65,7 @@
/* fjalla one */ /* fjalla one */
@font-face { @font-face {
font-family: "Fjalla One Regular"; font-family: "Fjalla One";
src: url("../fonts/fjalla-one/fjalla-one-regular.woff2") format("woff2"), url("../fonts/fjalla-one/fjalla-one-regular.woff") format("woff"), url("../fonts/fjalla-one/fjalla-one-regular.ttf") format("truetype"); src: url("../fonts/fjalla-one/fjalla-one-regular.woff2") format("woff2"), url("../fonts/fjalla-one/fjalla-one-regular.woff") format("woff"), url("../fonts/fjalla-one/fjalla-one-regular.ttf") format("truetype");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;

709
src/css/theme.css
View File

@ -1,25 +1,73 @@
.theme-preset-button { .theme-preset-item,
.theme-custom-item {
width: var(--theme-preset-preview-size);
height: var(--theme-preset-preview-size);
border-radius: var(--theme-radius);
padding: 0; padding: 0;
flex-direction: column; margin: 0.5em;
justify-content: center; position: relative;
overflow: hidden; overflow: hidden;
max-width: var(--theme-preset-preview-size);
} }
.theme-preset-button .button-text { .theme-preset-button,
margin-top: 0.75em; .theme-custom-button {
margin-bottom: 0.75em; padding: 0;
margin-left: 0; border-radius: 0;
width: var(--theme-preset-preview-size);
height: var(--theme-preset-preview-size);
line-height: 1.6;
position: absolute;
top: 0;
left: 0;
display: block;
overflow: hidden;
z-index: 2;
transition: height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
} }
.theme-preset-button:after { .theme-preset-button:after,
.theme-custom-button::after {
content: none; content: none;
} }
.theme-preset-preview { .theme-custom-control {
width: var(--theme-preset-preview-size);
height: 0;
position: absolute;
bottom: 0;
display: flex;
justify-content: flex-start;
align-items: stretch;
z-index: 1;
transition: height var(--layout-timing-extra-fast);
}
.theme-custom-control-item {
padding: 0;
border-radius: 0;
flex: 1 1 auto;
}
.theme-custom-control-item:after {
border-radius: 0;
}
.is-theme-custom-edit .theme-custom-button {
height: calc(var(--theme-preset-preview-size) - var(--theme-custom-edit-height));
box-shadow: var(--layout-shadow-medium);
}
.is-theme-custom-edit .theme-custom-control {
height: var(--theme-custom-edit-height);
}
.theme-preset-preview,
.theme-custom-preview {
width: var(--theme-preset-preview-size); width: var(--theme-preset-preview-size);
height: var(--theme-preset-preview-size); height: var(--theme-preset-preview-size);
position: relative; position: absolute;
top: 0;
left: 0;
} }
.theme-preset-background-01, .theme-preset-background-01,
@ -27,7 +75,11 @@
.theme-preset-background-03, .theme-preset-background-03,
.theme-preset-background-04, .theme-preset-background-04,
.theme-preset-accent, .theme-preset-accent,
.theme-preset-font { .theme-custom-background-01,
.theme-custom-background-02,
.theme-custom-background-03,
.theme-custom-background-04,
.theme-custom-accent {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
@ -37,564 +89,93 @@
transition: clip-path var(--layout-timing-extra-fast); transition: clip-path var(--layout-timing-extra-fast);
} }
.theme-preset-background-01 { .theme-preset-background-01,
.theme-custom-background-01 {
z-index: 1; z-index: 1;
} }
.theme-preset-background-02 { .theme-preset-background-02,
.theme-custom-background-02 {
z-index: 2; z-index: 2;
clip-path: polygon(70% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 70%); clip-path: polygon(70% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 70%);
transition-delay: 0s;
}
.theme-preset-background-03 {
z-index: 3;
clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%);
transition-delay: 0s;
}
.theme-preset-background-04 {
z-index: 4;
clip-path: polygon(100% 30%, 100% 100%, 30% 100%);
transition-delay: 0s;
}
.theme-preset-accent {
clip-path: circle(30% at 100% 100%);
z-index: 5;
}
.theme-preset-font {
padding: 0.5em;
line-height: 1.2;
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-weight: 400;
font-style: normal;
font-size: 1em;
margin-bottom: 0.25em;
}
.theme-preset-font-ui {
font-weight: 400;
font-style: normal;
font-size: 0.8em;
}
.theme-preset-button:focus .theme-preset-background-02,
.theme-preset-button:hover .theme-preset-background-02 {
clip-path: polygon(60% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 60%);
transition-delay: var(--layout-duration-01);
}
.theme-preset-button:focus .theme-preset-background-03,
.theme-preset-button:hover .theme-preset-background-03 {
clip-path: polygon(90% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 90%);
transition-delay: var(--layout-duration-02);
}
.theme-preset-button:focus .theme-preset-background-04,
.theme-preset-button:hover .theme-preset-background-04 {
clip-path: polygon(100% 20%, 100% 100%, 20% 100%);
transition-delay: var(--layout-duration-03);
}
.theme-preset-button:focus .theme-preset-accent,
.theme-preset-button:hover .theme-preset-accent {
clip-path: circle(40% at 100% 100%);
transition-delay: var(--layout-duration-04); transition-delay: var(--layout-duration-04);
} }
.theme-preset-button:hover .theme-preset-font, .theme-preset-background-03,
.theme-preset-button:focus .theme-preset-font { .theme-custom-background-03 {
transform: scale(1.1); z-index: 3;
} clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%);
transition-delay: var(--layout-duration-03);
.theme-preset-background-nighttab-01 { }
background-color: rgb(var(--theme-preset-background-nighttab-01));
} .theme-preset-background-04,
.theme-custom-background-04 {
.theme-preset-background-nighttab-02 { z-index: 4;
background-color: rgb(var(--theme-preset-background-nighttab-02)); clip-path: polygon(100% 30%, 100% 100%, 30% 100%);
} transition-delay: var(--layout-duration-02);
}
.theme-preset-background-nighttab-03 {
background-color: rgb(var(--theme-preset-background-nighttab-03)); .theme-preset-accent,
} .theme-custom-accent {
z-index: 5;
.theme-preset-background-nighttab-04 { clip-path: circle(30% at 100% 100%);
background-color: rgb(var(--theme-preset-background-nighttab-04)); transition-delay: var(--layout-duration-01);
} }
.theme-preset-accent-nighttab { .is-theme-custom-edit .theme-custom-accent {
background-color: rgb(var(--theme-preset-accent-nighttab)); clip-path: circle(30% at 100% 60%);
} }
.theme-preset-font-display-nighttab { .theme-preset-name,
font-family: var(--theme-preset-font-display-nighttab); .theme-custom-name {
color: rgb(var(--theme-preset-font-color-nighttab)); color: rgb(var(--theme-style-text));
} font-weight: 700;
font-style: normal;
.theme-preset-font-ui-nighttab { font-size: 0.8em;
font-family: var(--theme-preset-font-ui-nighttab); text-align: left;
color: rgb(var(--theme-preset-font-color-nighttab)); display: block;
} max-width: calc(100% - 2em);
max-height: calc(100% - 2em);
.theme-preset-background-midnight-01 { position: absolute;
background-color: rgb(var(--theme-preset-background-midnight-01)); top: 1em;
} left: 1em;
z-index: 6;
.theme-preset-background-midnight-02 { overflow: hidden;
background-color: rgb(var(--theme-preset-background-midnight-02)); text-overflow: ellipsis;
} white-space: initial;
transform: scale(1);
.theme-preset-background-midnight-03 { transition: transform var(--layout-timing-extra-fast);
background-color: rgb(var(--theme-preset-background-midnight-03)); }
}
.theme-preset-button:focus .theme-preset-background-02,
.theme-preset-background-midnight-04 { .theme-preset-button:hover .theme-preset-background-02,
background-color: rgb(var(--theme-preset-background-midnight-04)); .theme-custom-button:focus .theme-custom-background-02,
} .theme-custom-button:hover .theme-custom-background-02 {
clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%);
.theme-preset-accent-midnight { }
background-color: rgb(var(--theme-preset-accent-midnight));
} .theme-preset-button:focus .theme-preset-background-03,
.theme-preset-button:hover .theme-preset-background-03,
.theme-preset-font-display-midnight { .theme-custom-button:focus .theme-custom-background-03,
font-family: var(--theme-preset-font-display-midnight); .theme-custom-button:hover .theme-custom-background-03 {
color: rgb(var(--theme-preset-font-color-midnight)); clip-path: polygon(80% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 80%);
} }
.theme-preset-font-ui-midnight { .theme-preset-button:focus .theme-preset-background-04,
font-family: var(--theme-preset-font-ui-midnight); .theme-preset-button:hover .theme-preset-background-04,
color: rgb(var(--theme-preset-font-color-midnight)); .theme-custom-button:focus .theme-custom-background-04,
} .theme-custom-button:hover .theme-custom-background-04 {
clip-path: polygon(100% 10%, 100% 100%, 10% 100%);
.theme-preset-background-pym-01 { }
background-color: rgb(var(--theme-preset-background-pym-01));
} .theme-preset-button:focus .theme-preset-accent,
.theme-preset-button:hover .theme-preset-accent,
.theme-preset-background-pym-02 { .theme-custom-button:focus .theme-custom-accent,
background-color: rgb(var(--theme-preset-background-pym-02)); .theme-custom-button:hover .theme-custom-accent {
} clip-path: circle(40% at 100% 100%);
}
.theme-preset-background-pym-03 {
background-color: rgb(var(--theme-preset-background-pym-03)); .is-theme-custom-edit .theme-custom-button:focus .theme-custom-accent,
} .is-theme-custom-edit .theme-custom-button:hover .theme-custom-accent {
clip-path: circle(40% at 100% 60%);
.theme-preset-background-pym-04 {
background-color: rgb(var(--theme-preset-background-pym-04));
}
.theme-preset-accent-pym {
background-color: rgb(var(--theme-preset-accent-pym));
}
.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-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 {
background-color: rgb(var(--theme-preset-background-sharpmint-01));
}
.theme-preset-background-sharpmint-02 {
background-color: rgb(var(--theme-preset-background-sharpmint-02));
}
.theme-preset-background-sharpmint-03 {
background-color: rgb(var(--theme-preset-background-sharpmint-03));
}
.theme-preset-background-sharpmint-04 {
background-color: rgb(var(--theme-preset-background-sharpmint-04));
}
.theme-preset-accent-sharpmint {
background-color: rgb(var(--theme-preset-accent-sharpmint));
}
.theme-preset-font-display-sharpmint {
font-family: var(--theme-preset-font-display-sharpmint);
color: rgb(var(--theme-preset-font-color-sharpmint));
}
.theme-preset-font-ui-sharpmint {
font-family: var(--theme-preset-font-ui-sharpmint);
color: rgb(var(--theme-preset-font-color-sharpmint));
}
.theme-preset-background-snowglow-01 {
background-color: rgb(var(--theme-preset-background-snowglow-01));
}
.theme-preset-background-snowglow-02 {
background-color: rgb(var(--theme-preset-background-snowglow-02));
}
.theme-preset-background-snowglow-03 {
background-color: rgb(var(--theme-preset-background-snowglow-03));
}
.theme-preset-background-snowglow-04 {
background-color: rgb(var(--theme-preset-background-snowglow-04));
}
.theme-preset-accent-snowglow {
background-color: rgb(var(--theme-preset-accent-snowglow));
}
.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-snowglow {
font-family: var(--theme-preset-font-ui-snowglow);
color: rgb(var(--theme-preset-font-color-snowglow));
}
.theme-preset-background-rumble-01 {
background-color: rgb(var(--theme-preset-background-rumble-01));
}
.theme-preset-background-rumble-02 {
background-color: rgb(var(--theme-preset-background-rumble-02));
}
.theme-preset-background-rumble-03 {
background-color: rgb(var(--theme-preset-background-rumble-03));
}
.theme-preset-background-rumble-04 {
background-color: rgb(var(--theme-preset-background-rumble-04));
}
.theme-preset-accent-rumble {
background-color: rgb(var(--theme-preset-accent-rumble));
}
.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-rumble {
font-family: var(--theme-preset-font-ui-rumble);
color: rgb(var(--theme-preset-font-color-rumble));
}
.theme-preset-background-sollight-01 {
background-color: rgb(var(--theme-preset-background-sollight-01));
}
.theme-preset-background-sollight-02 {
background-color: rgb(var(--theme-preset-background-sollight-02));
}
.theme-preset-background-sollight-03 {
background-color: rgb(var(--theme-preset-background-sollight-03));
}
.theme-preset-background-sollight-04 {
background-color: rgb(var(--theme-preset-background-sollight-04));
}
.theme-preset-accent-sollight {
background-color: rgb(var(--theme-preset-accent-sollight));
}
.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-sollight {
font-family: var(--theme-preset-font-ui-sollight);
color: rgb(var(--theme-preset-font-color-sollight));
}
.theme-preset-background-artdeco-01 {
background-color: rgb(var(--theme-preset-background-artdeco-01));
}
.theme-preset-background-artdeco-02 {
background-color: rgb(var(--theme-preset-background-artdeco-02));
}
.theme-preset-background-artdeco-03 {
background-color: rgb(var(--theme-preset-background-artdeco-03));
}
.theme-preset-background-artdeco-04 {
background-color: rgb(var(--theme-preset-background-artdeco-04));
}
.theme-preset-accent-artdeco {
background-color: rgb(var(--theme-preset-accent-artdeco));
}
.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-artdeco {
font-family: var(--theme-preset-font-ui-artdeco);
color: rgb(var(--theme-preset-font-color-artdeco));
}
.theme-preset-background-macaroon-01 {
background-color: rgb(var(--theme-preset-background-macaroon-01));
}
.theme-preset-background-macaroon-02 {
background-color: rgb(var(--theme-preset-background-macaroon-02));
}
.theme-preset-background-macaroon-03 {
background-color: rgb(var(--theme-preset-background-macaroon-03));
}
.theme-preset-background-macaroon-04 {
background-color: rgb(var(--theme-preset-background-macaroon-04));
}
.theme-preset-accent-macaroon {
background-color: rgb(var(--theme-preset-accent-macaroon));
}
.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-macaroon {
font-family: var(--theme-preset-font-ui-macaroon);
color: rgb(var(--theme-preset-font-color-macaroon));
}
.theme-preset-background-hotpepper-01 {
background-color: rgb(var(--theme-preset-background-hotpepper-01));
}
.theme-preset-background-hotpepper-02 {
background-color: rgb(var(--theme-preset-background-hotpepper-02));
}
.theme-preset-background-hotpepper-03 {
background-color: rgb(var(--theme-preset-background-hotpepper-03));
}
.theme-preset-background-hotpepper-04 {
background-color: rgb(var(--theme-preset-background-hotpepper-04));
}
.theme-preset-accent-hotpepper {
background-color: rgb(var(--theme-preset-accent-hotpepper));
}
.theme-preset-font-display-hotpepper {
font-family: var(--theme-preset-font-display-hotpepper);
color: rgb(var(--theme-preset-font-color-hotpepper));
}
.theme-preset-font-ui-hotpepper {
font-family: var(--theme-preset-font-ui-hotpepper);
color: rgb(var(--theme-preset-font-color-hotpepper));
}
.theme-preset-background-steel-01 {
background-color: rgb(var(--theme-preset-background-steel-01));
}
.theme-preset-background-steel-02 {
background-color: rgb(var(--theme-preset-background-steel-02));
}
.theme-preset-background-steel-03 {
background-color: rgb(var(--theme-preset-background-steel-03));
}
.theme-preset-background-steel-04 {
background-color: rgb(var(--theme-preset-background-steel-04));
}
.theme-preset-accent-steel {
background-color: rgb(var(--theme-preset-accent-steel));
}
.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-steel {
font-family: var(--theme-preset-font-ui-steel);
color: rgb(var(--theme-preset-font-color-steel));
}
.theme-preset-background-outrun-01 {
background-color: rgb(var(--theme-preset-background-outrun-01));
}
.theme-preset-background-outrun-02 {
background-color: rgb(var(--theme-preset-background-outrun-02));
}
.theme-preset-background-outrun-03 {
background-color: rgb(var(--theme-preset-background-outrun-03));
}
.theme-preset-background-outrun-04 {
background-color: rgb(var(--theme-preset-background-outrun-04));
}
.theme-preset-accent-outrun {
background-color: rgb(var(--theme-preset-accent-outrun));
}
.theme-preset-font-display-outrun {
font-family: var(--theme-preset-font-display-outrun);
color: rgb(var(--theme-preset-font-color-outrun));
}
.theme-preset-font-ui-outrun {
font-family: var(--theme-preset-font-ui-outrun);
color: rgb(var(--theme-preset-font-color-outrun));
}
.theme-preset-background-pumpkin-01 {
background-color: rgb(var(--theme-preset-background-pumpkin-01));
}
.theme-preset-background-pumpkin-02 {
background-color: rgb(var(--theme-preset-background-pumpkin-02));
}
.theme-preset-background-pumpkin-03 {
background-color: rgb(var(--theme-preset-background-pumpkin-03));
}
.theme-preset-background-pumpkin-04 {
background-color: rgb(var(--theme-preset-background-pumpkin-04));
}
.theme-preset-accent-pumpkin {
background-color: rgb(var(--theme-preset-accent-pumpkin));
}
.theme-preset-font-display-pumpkin {
font-family: var(--theme-preset-font-display-pumpkin);
color: rgb(var(--theme-preset-font-color-pumpkin));
}
.theme-preset-font-ui-pumpkin {
font-family: var(--theme-preset-font-ui-pumpkin);
color: rgb(var(--theme-preset-font-color-pumpkin));
}
.theme-preset-background-bubblegum-01 {
background-color: rgb(var(--theme-preset-background-bubblegum-01));
}
.theme-preset-background-bubblegum-02 {
background-color: rgb(var(--theme-preset-background-bubblegum-02));
}
.theme-preset-background-bubblegum-03 {
background-color: rgb(var(--theme-preset-background-bubblegum-03));
}
.theme-preset-background-bubblegum-04 {
background-color: rgb(var(--theme-preset-background-bubblegum-04));
}
.theme-preset-accent-bubblegum {
background-color: rgb(var(--theme-preset-accent-bubblegum));
}
.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-bubblegum {
font-family: var(--theme-preset-font-ui-bubblegum);
color: rgb(var(--theme-preset-font-color-bubblegum));
}
.theme-preset-background-elderbean-01 {
background-color: rgb(var(--theme-preset-background-elderbean-01));
}
.theme-preset-background-elderbean-02 {
background-color: rgb(var(--theme-preset-background-elderbean-02));
}
.theme-preset-background-elderbean-03 {
background-color: rgb(var(--theme-preset-background-elderbean-03));
}
.theme-preset-background-elderbean-04 {
background-color: rgb(var(--theme-preset-background-elderbean-04));
}
.theme-preset-accent-elderbean {
background-color: rgb(var(--theme-preset-accent-elderbean));
}
.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-elderbean {
font-family: var(--theme-preset-font-ui-elderbean);
color: rgb(var(--theme-preset-font-color-elderbean));
} }

101
src/css/variables.css
View File

@ -3,7 +3,7 @@
--theme-root-font-size: 14px; --theme-root-font-size: 14px;
--theme-accent: 250, 130, 0; --theme-accent: 250, 130, 0;
--theme-radius: 0.2rem; --theme-radius: 0.2rem;
--theme-font-display-name: "Fjalla One Regular", sans-serif; --theme-font-display-name: "Fjalla One", sans-serif;
--theme-font-display-weight: 400; --theme-font-display-weight: 400;
--theme-font-display-style: "normal"; --theme-font-display-style: "normal";
--theme-font-ui-name: "Open Sans", sans-serif; --theme-font-ui-name: "Open Sans", sans-serif;
@ -32,105 +32,8 @@
--theme-shade-pos-08: 25, 25, 25; --theme-shade-pos-08: 25, 25, 25;
--theme-shade-pos-09: 25, 25, 25; --theme-shade-pos-09: 25, 25, 25;
--theme-shade-pos-10: 25, 25, 25; --theme-shade-pos-10: 25, 25, 25;
--theme-preset-background-nighttab-01: 25, 25, 25;
--theme-preset-background-nighttab-02: 25, 25, 25;
--theme-preset-background-nighttab-03: 25, 25, 25;
--theme-preset-background-nighttab-04: 25, 25, 25;
--theme-preset-accent-nighttab: 25, 25, 25;
--theme-preset-font-display-nighttab: sans-serif;
--theme-preset-font-ui-nighttab: sans-serif;
--theme-preset-background-midnight-01: 25, 25, 25;
--theme-preset-background-midnight-02: 25, 25, 25;
--theme-preset-background-midnight-03: 25, 25, 25;
--theme-preset-background-midnight-04: 25, 25, 25;
--theme-preset-accent-midnight: 25, 25, 25;
--theme-preset-font-display-midnight: sans-serif;
--theme-preset-font-ui-midnight: 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;
--theme-preset-background-sharpmint-04: 25, 25, 25;
--theme-preset-accent-sharpmint: 25, 25, 25;
--theme-preset-font-display-sharpmint: sans-serif;
--theme-preset-font-ui-sharpmint: 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;
--theme-preset-background-hotpepper-04: 25, 25, 25;
--theme-preset-accent-hotpepper: 25, 25, 25;
--theme-preset-font-display-hotpepper: sans-serif;
--theme-preset-font-ui-hotpepper: 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;
--theme-preset-background-outrun-04: 25, 25, 25;
--theme-preset-accent-outrun: 25, 25, 25;
--theme-preset-font-display-outrun: sans-serif;
--theme-preset-font-ui-outrun: sans-serif;
--theme-preset-background-pumpkin-01: 25, 25, 25;
--theme-preset-background-pumpkin-02: 25, 25, 25;
--theme-preset-background-pumpkin-03: 25, 25, 25;
--theme-preset-background-pumpkin-04: 25, 25, 25;
--theme-preset-accent-pumpkin: 25, 25, 25;
--theme-preset-font-display-pumpkin: sans-serif;
--theme-preset-font-ui-pumpkin: sans-serif;
--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; --theme-preset-preview-size: 6em;
--theme-custom-edit-height: 2.5em;
/* header */ /* header */
--header-area-width: 100%; --header-area-width: 100%;
--header-shade-color: var(--theme-color-01); --header-shade-color: var(--theme-color-01);

262
src/index.html
View File

@ -38,7 +38,6 @@
<link rel="stylesheet" href="css/auto-suggest.css"> <link rel="stylesheet" href="css/auto-suggest.css">
<link rel="stylesheet" href="css/fontawesome.css"> <link rel="stylesheet" href="css/fontawesome.css">
<!-- end-css-block --> <!-- end-css-block -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abel:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Alatsi:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Big+Shoulders+Display:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Calistoga:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Fredoka+One:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Girassol:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Gugi:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Lato:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Life+Savers:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Major+Mono+Display:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Monoton:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Muli:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Odibee+Sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Poiret+One:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Quicksand:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Righteous:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto+Condensed:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Source+Sans+Pro:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Unica+One:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Autour+One:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Solway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap">
</head> </head>
<body> <body>
@ -1139,7 +1138,7 @@
</div> </div>
</div> </div>
<div class="button-wrap"> <div class="button-wrap">
<button class="control-link-item-display-letcon-letter-size-default button mb-0" tabindex="-1">Default Letter size</button> <button class="control-link-item-display-letcon-letter-size-default button mb-0" tabindex="-1">Default letter size</button>
</div> </div>
<hr> <hr>
<div class="input-wrap"> <div class="input-wrap">
@ -1150,7 +1149,7 @@
</div> </div>
</div> </div>
<div class="button-wrap"> <div class="button-wrap">
<button class="control-link-item-display-letcon-icon-size-default button mb-0" tabindex="-1">Default Icon size</button> <button class="control-link-item-display-letcon-icon-size-default button mb-0" tabindex="-1">Default icon size</button>
</div> </div>
</div> </div>
<hr> <hr>
@ -1167,7 +1166,7 @@
</div> </div>
</div> </div>
<div class="button-wrap"> <div class="button-wrap">
<button class="control-link-item-display-name-size-default button mb-0" tabindex="-1">Default Name size</button> <button class="control-link-item-display-name-size-default button mb-0" tabindex="-1">Default name size</button>
</div> </div>
</div> </div>
<hr> <hr>
@ -1278,13 +1277,13 @@
<div class="menu-item-form"> <div class="menu-item-form">
<div class="form-inline"> <div class="form-inline">
<div class="button-wrap"> <div class="button-wrap">
<button class="control-link-sort-letter button mb-0" tabindex="-1">By Letter</button> <button class="control-link-sort-letter button mb-0" tabindex="-1">By letter</button>
</div> </div>
<div class="button-wrap"> <div class="button-wrap">
<button class="control-link-sort-icon button mb-0" tabindex="-1">By Icon</button> <button class="control-link-sort-icon button mb-0" tabindex="-1">By icon</button>
</div> </div>
<div class="button-wrap"> <div class="button-wrap">
<button class="control-link-sort-name button mb-0" tabindex="-1">By Name</button> <button class="control-link-sort-name button mb-0" tabindex="-1">By name</button>
</div> </div>
</div> </div>
</div> </div>
@ -1312,248 +1311,25 @@
<h1 class="menu-item-header-text">Presets</h1> <h1 class="menu-item-header-text">Presets</h1>
</div> </div>
<div class="menu-item-form"> <div class="menu-item-form">
<div class="theme-preset"></div>
<p class="control-theme-font-ui-helper form-helper small">Applying a Preset will replace the current Colour, Accent, Font, Style and Radius.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Saved themes</h1>
</div>
<div class="menu-item-form">
<div class="theme-custom"></div>
<div class="form-inline"> <div class="form-inline">
<div class="button-wrap"> <div class="button-wrap">
<button class="control-theme-preset-nighttab theme-preset-button button mb-0" tabindex="-1"> <button class="control-theme-custom-add button mb-0" tabindex="-1">Save current theme</button>
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-nighttab-01"></span>
<span class="theme-preset-background-02 theme-preset-background-nighttab-02"></span>
<span class="theme-preset-background-03 theme-preset-background-nighttab-03"></span>
<span class="theme-preset-background-04 theme-preset-background-nighttab-04"></span>
<span class="theme-preset-accent theme-preset-accent-nighttab"></span>
<span class="theme-preset-font theme-preset-font-nighttab">
<span class="theme-preset-font-display theme-preset-font-display-nighttab">nightTab</span>
<span class="theme-preset-font-ui theme-preset-font-ui-nighttab">ABC 123</span>
</span>
</div>
</button>
</div> </div>
<div class="button-wrap"> <div class="button-wrap">
<button class="control-theme-preset-midnight theme-preset-button button mb-0" tabindex="-1"> <button class="control-theme-custom-edit button mb-0" tabindex="-1">Edit</button>
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-midnight-01"></span>
<span class="theme-preset-background-02 theme-preset-background-midnight-02"></span>
<span class="theme-preset-background-03 theme-preset-background-midnight-03"></span>
<span class="theme-preset-background-04 theme-preset-background-midnight-04"></span>
<span class="theme-preset-accent theme-preset-accent-midnight"></span>
<span class="theme-preset-font theme-preset-font-midnight">
<span class="theme-preset-font-display theme-preset-font-display-midnight">Midnight</span>
<span class="theme-preset-font-ui theme-preset-font-ui-midnight">ABC 123</span>
</span>
</div>
</button>
</div>
<div class="button-wrap">
<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-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>
</div>
<div class="button-wrap">
<button class="control-theme-preset-sharpmint theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-sharpmint-01"></span>
<span class="theme-preset-background-02 theme-preset-background-sharpmint-02"></span>
<span class="theme-preset-background-03 theme-preset-background-sharpmint-03"></span>
<span class="theme-preset-background-04 theme-preset-background-sharpmint-04"></span>
<span class="theme-preset-accent theme-preset-accent-sharpmint"></span>
<span class="theme-preset-font theme-preset-font-sharpmint">
<span class="theme-preset-font-display theme-preset-font-display-sharpmint">Sharp Mint</span>
<span class="theme-preset-font-ui theme-preset-font-ui-sharpmint">ABC 123</span>
</span>
</div>
</button>
</div>
<div class="button-wrap">
<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-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-rumble theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<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-sollight theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<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-artdeco theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<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-macaroon theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<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>
</div>
<div class="button-wrap">
<button class="control-theme-preset-hotpepper theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-hotpepper-01"></span>
<span class="theme-preset-background-02 theme-preset-background-hotpepper-02"></span>
<span class="theme-preset-background-03 theme-preset-background-hotpepper-03"></span>
<span class="theme-preset-background-04 theme-preset-background-hotpepper-04"></span>
<span class="theme-preset-accent theme-preset-accent-hotpepper"></span>
<span class="theme-preset-font theme-preset-font-hotpepper">
<span class="theme-preset-font-display theme-preset-font-display-hotpepper">Hot Pepper</span>
<span class="theme-preset-font-ui theme-preset-font-ui-hotpepper">ABC 123</span>
</span>
</div>
</button>
</div>
<div class="button-wrap">
<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-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>
</div>
<div class="button-wrap">
<button class="control-theme-preset-outrun theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-outrun-01"></span>
<span class="theme-preset-background-02 theme-preset-background-outrun-02"></span>
<span class="theme-preset-background-03 theme-preset-background-outrun-03"></span>
<span class="theme-preset-background-04 theme-preset-background-outrun-04"></span>
<span class="theme-preset-accent theme-preset-accent-outrun"></span>
<span class="theme-preset-font theme-preset-font-outrun">
<span class="theme-preset-font-display theme-preset-font-display-outrun">Outrun</span>
<span class="theme-preset-font-ui theme-preset-font-ui-outrun">ABC 123</span>
</span>
</div>
</button>
</div>
<div class="button-wrap">
<button class="control-theme-preset-pumpkin theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-pumpkin-01"></span>
<span class="theme-preset-background-02 theme-preset-background-pumpkin-02"></span>
<span class="theme-preset-background-03 theme-preset-background-pumpkin-03"></span>
<span class="theme-preset-background-04 theme-preset-background-pumpkin-04"></span>
<span class="theme-preset-accent theme-preset-accent-pumpkin"></span>
<span class="theme-preset-font theme-preset-font-pumpkin">
<span class="theme-preset-font-display theme-preset-font-display-pumpkin">Pumpkin</span>
<span class="theme-preset-font-ui theme-preset-font-ui-pumpkin">ABC 123</span>
</span>
</div>
</button>
</div>
<div class="button-wrap">
<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-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-elderbean theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<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>
</div> </div>
</div> </div>
<p class="control-theme-font-ui-helper form-helper small">Saving a Theme will record the current Colour, Accent, Font, Style and Radius.</p>
</div> </div>
</div> </div>
<div class="menu-item"> <div class="menu-item">

320
src/js/control.js
View File

@ -2531,327 +2531,17 @@ var control = (function() {
link.groupAndItems(); link.groupAndItems();
} }
}, { }, {
element: helper.e(".control-theme-preset-nighttab"), element: helper.e(".control-theme-custom-add"),
type: "button", type: "button",
func: function() { func: function() {
mod.setValue("theme.accent.current", helper.getObject({ menu.close();
object: state.get.default(), theme.custom.add();
path: "theme.accent.current"
}));
mod.setValue("theme.color", helper.getObject({
object: state.get.default(),
path: "theme.color"
}));
mod.setValue("theme.font", helper.getObject({
object: state.get.default(),
path: "theme.font"
}));
mod.setValue("theme.style", helper.getObject({
object: state.get.default(),
path: "theme.style"
}));
mod.setValue("theme.radius", helper.getObject({
object: state.get.default(),
path: "theme.radius"
}));
render.update();
render.class();
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
theme.style.check();
theme.render.color.shade();
theme.render.accent.color();
theme.render.radius();
link.groupAndItems();
} }
}, { }, {
element: helper.e(".control-theme-preset-midnight"), element: helper.e(".control-theme-custom-edit"),
type: "button", type: "button",
func: function() { func: function() {
theme.preset("midnight"); theme.custom.edit();
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
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-pym"),
type: "button",
func: function() {
theme.preset("pym");
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
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.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
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-sharpmint"),
type: "button",
func: function() {
theme.preset("sharpmint");
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
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-snowglow"),
type: "button",
func: function() {
theme.preset("snowglow");
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
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-rumble"),
type: "button",
func: function() {
theme.preset("rumble");
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
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-sollight"),
type: "button",
func: function() {
theme.preset("sollight");
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
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-artdeco"),
type: "button",
func: function() {
theme.preset("artdeco");
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
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-macaroon"),
type: "button",
func: function() {
theme.preset("macaroon");
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
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-hotpepper"),
type: "button",
func: function() {
theme.preset("hotpepper");
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
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-steel"),
type: "button",
func: function() {
theme.preset("steel");
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
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-outrun"),
type: "button",
func: function() {
theme.preset("outrun");
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
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-pumpkin"),
type: "button",
func: function() {
theme.preset("pumpkin");
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
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-bubblegum"),
type: "button",
func: function() {
theme.preset("bubblegum");
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
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-elderbean"),
type: "button",
func: function() {
theme.preset("elderbean");
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
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-style-dark"), element: helper.e(".control-theme-style-dark"),

4
src/js/menu.js
View File

@ -47,12 +47,16 @@ var menu = (function() {
if (state.get.current().menu) { if (state.get.current().menu) {
menu.tabIndex = 1; menu.tabIndex = 1;
menu.querySelectorAll("[tabindex]").forEach(function(arrayItem, index) { menu.querySelectorAll("[tabindex]").forEach(function(arrayItem, index) {
if (arrayItem.tabIndex == -1) {
arrayItem.tabIndex = 1; arrayItem.tabIndex = 1;
};
}); });
} else { } else {
menu.tabIndex = -1; menu.tabIndex = -1;
menu.querySelectorAll("[tabindex]").forEach(function(arrayItem, index) { menu.querySelectorAll("[tabindex]").forEach(function(arrayItem, index) {
if (arrayItem.tabIndex == 1) {
arrayItem.tabIndex = -1; arrayItem.tabIndex = -1;
};
}); });
}; };
} }

3
src/js/state.js
View File

@ -256,7 +256,8 @@ var state = (function() {
} }
}, },
style: "dark", style: "dark",
radius: 0.25 radius: 0.25,
custom: []
}, },
background: { background: {
color: { color: {

477
src/js/theme.js
View File

@ -2,6 +2,33 @@ var theme = (function() {
var _timerFontDisplay = null; var _timerFontDisplay = null;
var _timerFontUi = null; var _timerFontUi = null;
var _customThemeEdit = false;
var stagedThemeCustom = {
position: {
index: null
},
theme: {
name: null,
style: null,
font: null,
color: null,
accent: null,
radius: null,
timestamp: null
}
};
stagedThemeCustom.reset = function() {
stagedThemeCustom.position.index = null;
stagedThemeCustom.theme.name = null;
stagedThemeCustom.theme.style = null;
stagedThemeCustom.theme.font = null;
stagedThemeCustom.theme.color = null;
stagedThemeCustom.theme.accent = null;
stagedThemeCustom.theme.radius = null;
stagedThemeCustom.theme.timestamp = null;
};
var mod = {}; var mod = {};
@ -108,47 +135,46 @@ var theme = (function() {
}; };
mod.preset = { mod.preset = {
set: function(name) { set: function(themePreset) {
var selectedPreset = mod.preset.get(name);
helper.setObject({ helper.setObject({
object: state.get.current(), object: state.get.current(),
path: "theme.style", path: "theme.style",
newValue: selectedPreset.style newValue: themePreset.style
}); });
helper.setObject({ helper.setObject({
object: state.get.current(), object: state.get.current(),
path: "theme.font", path: "theme.font",
newValue: selectedPreset.font newValue: themePreset.font
}); });
helper.setObject({ helper.setObject({
object: state.get.current(), object: state.get.current(),
path: "theme.color", path: "theme.color",
newValue: selectedPreset.color newValue: themePreset.color
}); });
helper.setObject({ helper.setObject({
object: state.get.current(), object: state.get.current(),
path: "theme.accent.current", path: "theme.accent.current",
newValue: selectedPreset.accent newValue: themePreset.accent
}); });
helper.setObject({ helper.setObject({
object: state.get.current(), object: state.get.current(),
path: "theme.radius", path: "theme.radius",
newValue: selectedPreset.radius newValue: themePreset.radius
}); });
}, },
get: function(name) { get: function(index) {
return JSON.parse(JSON.stringify(mod.preset.all[name])); return JSON.parse(JSON.stringify(mod.preset.all[index]));
}, },
all: { all: [{
nighttab: { name: "nightTab (default)",
font: { font: {
display: { display: {
name: "Fjalla One Regular", name: "",
weight: 400, weight: 400,
style: "normal" style: "normal"
}, },
ui: { ui: {
name: "Open Sans", name: "",
weight: 400, weight: 400,
style: "normal" style: "normal"
}, },
@ -172,8 +198,8 @@ var theme = (function() {
}, },
radius: 0.25, radius: 0.25,
style: "dark" style: "dark"
}, }, {
midnight: { name: "Midnight",
font: { font: {
display: { display: {
name: "Gugi", name: "Gugi",
@ -205,8 +231,8 @@ var theme = (function() {
}, },
radius: 0.5, radius: 0.5,
style: "dark" style: "dark"
}, }, {
pym: { name: "Pym",
font: { font: {
display: { display: {
name: "Autour One", name: "Autour One",
@ -238,8 +264,8 @@ var theme = (function() {
}, },
radius: 0.1, radius: 0.1,
style: "dark" style: "dark"
}, }, {
cruiser: { name: "Cruiser",
font: { font: {
display: { display: {
name: "Alatsi", name: "Alatsi",
@ -271,8 +297,8 @@ var theme = (function() {
}, },
radius: 0.2, radius: 0.2,
style: "dark" style: "dark"
}, }, {
sharpmint: { name: "Sharp Mint",
font: { font: {
display: { display: {
name: "Unica One", name: "Unica One",
@ -304,8 +330,8 @@ var theme = (function() {
}, },
radius: 0.8, radius: 0.8,
style: "dark" style: "dark"
}, }, {
snowglow: { name: "Snow Glow",
font: { font: {
display: { display: {
name: "Righteous", name: "Righteous",
@ -337,8 +363,8 @@ var theme = (function() {
}, },
radius: 0, radius: 0,
style: "light" style: "light"
}, }, {
rumble: { name: "Rumble",
font: { font: {
display: { display: {
name: "Odibee Sans", name: "Odibee Sans",
@ -370,8 +396,8 @@ var theme = (function() {
}, },
radius: 0.75, radius: 0.75,
style: "dark" style: "dark"
}, }, {
sollight: { name: "Sol Light",
font: { font: {
display: { display: {
name: "Fredoka One", name: "Fredoka One",
@ -403,8 +429,8 @@ var theme = (function() {
}, },
radius: 0.5, radius: 0.5,
style: "light" style: "light"
}, }, {
artdeco: { name: "Art Deco",
font: { font: {
display: { display: {
name: "Poiret One", name: "Poiret One",
@ -436,8 +462,8 @@ var theme = (function() {
}, },
radius: 2, radius: 2,
style: "dark" style: "dark"
}, }, {
macaroon: { name: "Macaroon",
font: { font: {
display: { display: {
name: "Calistoga", name: "Calistoga",
@ -469,8 +495,8 @@ var theme = (function() {
}, },
radius: 0.40, radius: 0.40,
style: "light" style: "light"
}, }, {
hotpepper: { name: "Hot Pepper",
font: { font: {
display: { display: {
name: "Big Shoulders Display", name: "Big Shoulders Display",
@ -502,8 +528,8 @@ var theme = (function() {
}, },
radius: 0.6, radius: 0.6,
style: "dark" style: "dark"
}, }, {
steel: { name: "Steel",
font: { font: {
display: { display: {
name: "Abel", name: "Abel",
@ -535,8 +561,8 @@ var theme = (function() {
}, },
radius: 0.3, radius: 0.3,
style: "light" style: "light"
}, }, {
outrun: { name: "Outrun",
font: { font: {
display: { display: {
name: "Major Mono Display", name: "Major Mono Display",
@ -568,8 +594,8 @@ var theme = (function() {
}, },
radius: 0, radius: 0,
style: "dark" style: "dark"
}, }, {
pumpkin: { name: "Pumpkin",
font: { font: {
display: { display: {
name: "Girassol", name: "Girassol",
@ -601,8 +627,8 @@ var theme = (function() {
}, },
radius: 0.2, radius: 0.2,
style: "dark" style: "dark"
}, }, {
bubblegum: { name: "Bubble Gum",
font: { font: {
display: { display: {
name: "Monoton", name: "Monoton",
@ -634,8 +660,8 @@ var theme = (function() {
}, },
radius: 1.2, radius: 1.2,
style: "dark" style: "dark"
}, }, {
elderbean: { name: "Elder Bean",
font: { font: {
display: { display: {
name: "Life Savers", name: "Life Savers",
@ -667,7 +693,45 @@ var theme = (function() {
}, },
radius: 0.5, radius: 0.5,
style: "dark" style: "dark"
} }]
};
mod.custom = {
set: function(themeCustom) {
helper.setObject({
object: state.get.current(),
path: "theme.style",
newValue: themeCustom.style
});
helper.setObject({
object: state.get.current(),
path: "theme.font",
newValue: themeCustom.font
});
helper.setObject({
object: state.get.current(),
path: "theme.color",
newValue: themeCustom.color
});
helper.setObject({
object: state.get.current(),
path: "theme.accent.current",
newValue: themeCustom.accent
});
helper.setObject({
object: state.get.current(),
path: "theme.radius",
newValue: themeCustom.radius
});
},
get: function(index) {
return JSON.parse(JSON.stringify(state.get.current().theme.custom[index]));
},
add: function() {
state.get.current().theme.custom.push(stagedThemeCustom.theme);
},
remove: function(copyStagedThemeCustom) {
state.get.current().theme.custom.splice(stagedThemeCustom.position.index, 1);
} }
}; };
@ -818,7 +882,7 @@ var theme = (function() {
}] }]
}); });
head.appendChild(link); head.appendChild(link);
html.style.setProperty("--theme-font-display-name", "\"" + state.get.current().theme.font.display.name.trim().replace(/\s\s+/g, " ") + "\"" + ", \"Fjalla One Regular\", sans-serif"); html.style.setProperty("--theme-font-display-name", "\"" + state.get.current().theme.font.display.name.trim().replace(/\s\s+/g, " ") + "\"" + ", \"Fjalla One\", sans-serif");
}; };
}, },
weight: function() { weight: function() {
@ -874,38 +938,27 @@ var theme = (function() {
}; };
render.preset = function() { render.preset = function() {
var html = helper.e("html"); var themePreset = helper.e(".theme-preset");
for (var key in mod.preset.all) { var formInline = helper.node("div|class:form-inline");
var preset = mod.preset.all[key]; var allThemePreset = JSON.parse(JSON.stringify(mod.preset.all));
allThemePreset.forEach(function(arrayItem, index) {
var themePresetItem = helper.node("div|class:theme-preset-item");
var themePresetTile = helper.node("div|class:theme-preset-tile");
var themePresetButton = helper.node("button|class:theme-preset-button button mb-0,tabindex:-1");
var themePresetPreview = helper.node("span|class:theme-preset-preview");
var shadeSteps = 4; var shadeSteps = 4;
var lightShift = 12; var lightShift = 12;
var renderPreview = function(name, index, rgb) { var rgb = arrayItem.color.rgb;
for (var key in rgb) {
if (rgb[key] < 0) {
rgb[key] = 0;
} else if (rgb[key] > 255) {
rgb[key] = 255;
};
rgb[key] = parseInt(rgb[key], 10);
};
if (index < 10) {
index = "0" + index;
} else {
index = index;
};
html.style.setProperty(name + index, rgb.r + ", " + rgb.g + ", " + rgb.b);
};
var rgb = preset.color.rgb;
var hsl = helper.convertColor.rgb.hsl(rgb); var hsl = helper.convertColor.rgb.hsl(rgb);
for (var i = 1; i <= shadeSteps; i++) { for (var i = 1; i <= shadeSteps; i++) {
if (i > 1) { if (i > 1) {
if (preset.style == "dark") { if (arrayItem.style == "dark") {
rgb = helper.convertColor.hsl.rgb({ rgb = helper.convertColor.hsl.rgb({
h: hsl.h, h: hsl.h,
s: hsl.s, s: hsl.s,
l: hsl.l - (lightShift * (i - 1)) l: hsl.l - (lightShift * (i - 1))
}); });
} else if (preset.style == "light") { } else if (arrayItem.style == "light") {
rgb = helper.convertColor.hsl.rgb({ rgb = helper.convertColor.hsl.rgb({
h: hsl.h, h: hsl.h,
s: hsl.s, s: hsl.s,
@ -913,21 +966,277 @@ var theme = (function() {
}); });
}; };
}; };
renderPreview("--theme-preset-background-" + key + "-", i, rgb); for (var colorKey in rgb) {
if (rgb[colorKey] < 0) {
rgb[colorKey] = 0;
} else if (rgb[colorKey] > 255) {
rgb[colorKey] = 255;
}; };
html.style.setProperty("--theme-preset-accent-" + key, preset.accent.r + ", " + preset.accent.g + ", " + preset.accent.b); rgb[colorKey] = parseInt(rgb[colorKey], 10);
if (preset.font.display != "") {
html.style.setProperty("--theme-preset-font-display-" + key, "\"" + preset.font.display.name + "\", sans-serif");
}; };
if (preset.font.ui != "") { var themePresetBackground = helper.node("span|class:theme-preset-background-0" + i);
html.style.setProperty("--theme-preset-font-ui-" + key, "\"" + preset.font.ui.name + "\", sans-serif"); themePresetBackground.style.setProperty("background-color", "rgb(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ")");
themePresetPreview.appendChild(themePresetBackground);
}; };
if (preset.style == "dark") { var themePresetAccent = helper.node("span|class:theme-preset-accent");
html.style.setProperty("--theme-preset-font-color-" + key, "var(--theme-white)"); themePresetAccent.style.setProperty("background-color", "rgb(" + arrayItem.accent.r + ", " + arrayItem.accent.g + ", " + arrayItem.accent.b + ")");
} else if (preset.style == "light") { themePresetPreview.appendChild(themePresetAccent);
html.style.setProperty("--theme-preset-font-color-" + key, "var(--theme-black)"); if (arrayItem.name != null && arrayItem.name != "") {
var themePresetName = helper.node("span:" + arrayItem.name + "|class:theme-preset-name");
themePresetPreview.appendChild(themePresetName);
};
themePresetButton.appendChild(themePresetPreview);
themePresetTile.appendChild(themePresetButton);
themePresetItem.appendChild(themePresetTile);
formInline.appendChild(themePresetItem);
themePresetButton.addEventListener("click", function() {
mod.preset.set(mod.preset.get(index));
data.save();
render.font.display.name();
render.font.display.weight();
render.font.display.style();
render.font.ui.name();
render.font.ui.weight();
render.font.ui.style();
render.color.shade();
render.accent.color();
render.radius();
style.check();
link.groupAndItems();
control.render.update();
control.render.class();
}, false);
});
themePreset.appendChild(formInline);
};
render.custom = {
all: function() {
var themeCustomSaved = helper.e(".theme-custom");
var formInline = helper.node("div|class:form-inline");
var allThemeCuston = JSON.parse(JSON.stringify(state.get.current().theme.custom));
if (allThemeCuston.length > 0) {
allThemeCuston.forEach(function(arrayItem, index) {
var themeCustomItem = helper.node("div|class:theme-custom-item");
var themeCustomTile = helper.node("div|class:theme-custom-tile");
var themeCustomButton = helper.node("button|class:theme-custom-button button mb-0,tabindex:-1");
var themeCustomPreview = helper.node("span|class:theme-custom-preview");
var themeCustomControl = helper.node("div|class:theme-custom-control");
var themeCustomRemove = helper.node("button|class:theme-custom-control-item theme-custom-control-item-remove button mb-0,tabindex:-2");
var themeCustomRemoveIcon = helper.node("spa|class:button-icon icon-close");
var shadeSteps = 4;
var lightShift = 12;
var rgb = arrayItem.color.rgb;
var hsl = helper.convertColor.rgb.hsl(rgb);
for (var i = 1; i <= shadeSteps; i++) {
if (i > 1) {
if (arrayItem.style == "dark") {
rgb = helper.convertColor.hsl.rgb({
h: hsl.h,
s: hsl.s,
l: hsl.l - (lightShift * (i - 1))
});
} else if (arrayItem.style == "light") {
rgb = helper.convertColor.hsl.rgb({
h: hsl.h,
s: hsl.s,
l: hsl.l + (lightShift * (i - 1))
});
}; };
}; };
for (var colorKey in rgb) {
if (rgb[colorKey] < 0) {
rgb[colorKey] = 0;
} else if (rgb[colorKey] > 255) {
rgb[colorKey] = 255;
};
rgb[colorKey] = parseInt(rgb[colorKey], 10);
};
var themeCustomBackground = helper.node("span|class:theme-custom-background-0" + i);
themeCustomBackground.style.setProperty("background-color", "rgb(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ")");
themeCustomPreview.appendChild(themeCustomBackground);
};
var themeCustomAccent = helper.node("span|class:theme-custom-accent");
themeCustomAccent.style.setProperty("background-color", "rgb(" + arrayItem.accent.r + ", " + arrayItem.accent.g + ", " + arrayItem.accent.b + ")");
themeCustomPreview.appendChild(themeCustomAccent);
if (arrayItem.name != null && arrayItem.name != "") {
var themeCustomName = helper.node("span:" + arrayItem.name + "|class:theme-custom-name");
themeCustomPreview.appendChild(themeCustomName);
};
themeCustomButton.appendChild(themeCustomPreview);
themeCustomRemove.appendChild(themeCustomRemoveIcon);
themeCustomControl.appendChild(themeCustomRemove);
themeCustomTile.appendChild(themeCustomButton);
themeCustomTile.appendChild(themeCustomControl);
themeCustomItem.appendChild(themeCustomTile);
formInline.appendChild(themeCustomItem);
stagedThemeCustom.position.index = index;
stagedThemeCustom.theme = arrayItem;
var copyStagedThemeCustom = JSON.parse(JSON.stringify(stagedThemeCustom));
themeCustomButton.addEventListener("click", function() {
mod.custom.set(mod.custom.get(index));
data.save();
render.font.display.name();
render.font.display.weight();
render.font.display.style();
render.font.ui.name();
render.font.ui.weight();
render.font.ui.style();
render.color.shade();
render.accent.color();
render.radius();
style.check();
link.groupAndItems();
control.render.update();
control.render.class();
}, false);
themeCustomRemove.addEventListener("click", function() {
menu.close();
render.custom.remove(copyStagedThemeCustom);
}, false);
stagedThemeCustom.reset();
});
themeCustomSaved.appendChild(formInline);
themeCustomSaved.appendChild(helper.node("hr"));
};
},
add: function() {
var form = function() {
var form = helper.node("form|class:group-form");
var fieldset = helper.node("fieldset");
var inputWrap = helper.node("div|class:input-wrap");
var label = helper.node("label:Name|for:theme-name");
var input = helper.node("input|id:theme-name,class:theme-name mb-0,type:text,tabindex:1,placeholder:Example theme,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
inputWrap.appendChild(label);
inputWrap.appendChild(input);
fieldset.appendChild(inputWrap);
form.appendChild(fieldset);
input.addEventListener("input", function() {
stagedThemeCustom.theme.name = this.value;
}, false);
form.addEventListener("keydown", function(event) {
if (event.keyCode == 13) {
event.preventDefault();
return false;
};
}, false);
return form;
};
var successAction = function() {
stagedThemeCustom.theme.style = state.get.current().theme.style;
stagedThemeCustom.theme.font = state.get.current().theme.font;
stagedThemeCustom.theme.color = state.get.current().theme.color;
stagedThemeCustom.theme.accent = state.get.current().theme.accent.current;
stagedThemeCustom.theme.radius = state.get.current().theme.radius;
stagedThemeCustom.theme.timestamp = new Date().getTime();
mod.custom.add();
data.save();
render.custom.clear();
render.custom.all();
shade.close();
pagelock.unlock();
stagedThemeCustom.reset();
};
var cancelAction = function() {
shade.close();
pagelock.unlock();
stagedThemeCustom.reset();
};
modal.open({
heading: "Save current Theme",
successAction: successAction,
cancelAction: cancelAction,
actionText: "Save",
size: "small",
content: form()
});
shade.open({
action: function() {
modal.close();
pagelock.unlock();
stagedThemeCustom.reset();
}
});
pagelock.lock();
},
remove: function(copyStagedThemeCustom) {
stagedThemeCustom.position.index = JSON.parse(JSON.stringify(copyStagedThemeCustom.position.index));
stagedThemeCustom.theme = JSON.parse(JSON.stringify(copyStagedThemeCustom.theme));
var heading;
if (stagedThemeCustom.theme.name != null && stagedThemeCustom.theme.name != "") {
heading = "Remove " + stagedThemeCustom.theme.name;
} else {
heading = "Remove unnamed theme";
};
var successAction = function() {
mod.custom.remove();
data.save();
render.custom.clear();
render.custom.all();
shade.close();
pagelock.unlock();
stagedThemeCustom.reset();
};
var cancelAction = function() {
shade.close();
pagelock.unlock();
stagedThemeCustom.reset();
};
modal.open({
heading: heading,
content: "Are you sure you want to remove this Theme? This can not be undone.",
successAction: successAction,
cancelAction: cancelAction,
actionText: "Remove",
size: "small"
});
shade.open({
action: function() {
modal.close();
pagelock.unlock();
stagedThemeCustom.reset();
}
});
pagelock.lock();
},
edit: function() {
var html = helper.e("html");
if (_customThemeEdit) {
_customThemeEdit = false;
helper.removeClass(html, "is-theme-custom-edit");
} else {
_customThemeEdit = true;
helper.addClass(html, "is-theme-custom-edit");
};
},
clear: function() {
var themeCustom = helper.e(".theme-custom");
while (themeCustom.lastChild) {
themeCustom.removeChild(themeCustom.lastChild);
};
},
tabIndex: function() {
if (_customThemeEdit) {
helper.eA(".theme-custom-control-item").forEach(function(arrayItem, index) {
if (arrayItem.tabIndex == -2) {
arrayItem.tabIndex = 1;
};
});
} else {
helper.eA(".theme-custom-control-item").forEach(function(arrayItem, index) {
if (arrayItem.tabIndex == 1) {
arrayItem.tabIndex = -2;
};
});
};
}
}; };
var accent = { var accent = {
@ -966,6 +1275,16 @@ var theme = (function() {
mod.preset.set(name); mod.preset.set(name);
}; };
var custom = {
add: function() {
render.custom.add();
},
edit: function() {
render.custom.edit();
render.custom.tabIndex();
}
};
var init = function() { var init = function() {
style.check(); style.check();
accent.random(); accent.random();
@ -980,6 +1299,7 @@ var theme = (function() {
render.accent.color(); render.accent.color();
render.radius(); render.radius();
render.preset(); render.preset();
render.custom.all();
}; };
// exposed methods // exposed methods
@ -989,7 +1309,8 @@ var theme = (function() {
render: render, render: render,
style: style, style: style,
accent: accent, accent: accent,
preset: preset preset: preset,
custom: custom
}; };
})(); })();

4
src/js/update.js
View File

@ -742,6 +742,10 @@ var update = (function() {
style: "normal" style: "normal"
}; };
return data; return data;
},
"4.8.0": function(data) {
data.state.theme.custom = [];
return data;
} }
}; };

2
src/js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() { var version = (function() {
var current = "4.7.0"; var current = "4.8.0";
var name = "Naughty Goose"; var name = "Naughty Goose";

2
src/manifest.json
View File

@ -2,7 +2,7 @@
"name": "nightTab", "name": "nightTab",
"short_name": "nightTab", "short_name": "nightTab",
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"version": "4.7.0", "version": "4.8.0",
"manifest_version": 2, "manifest_version": 2,
"chrome_url_overrides": { "chrome_url_overrides": {
"newtab": "index.html" "newtab": "index.html"