extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-12-26 00:29:02 +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",
"version": "4.7.0",
"version": "4.8.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

2
package.json
View File

@ -1,6 +1,6 @@
{
"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.",
"main": "index.js",
"scripts": {

2
src/css/fonts.css
View File

@ -65,7 +65,7 @@
/* fjalla one */
@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");
font-weight: 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;
flex-direction: column;
justify-content: center;
margin: 0.5em;
position: relative;
overflow: hidden;
max-width: var(--theme-preset-preview-size);
}
.theme-preset-button .button-text {
margin-top: 0.75em;
margin-bottom: 0.75em;
margin-left: 0;
.theme-preset-button,
.theme-custom-button {
padding: 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;
}
.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);
height: var(--theme-preset-preview-size);
position: relative;
position: absolute;
top: 0;
left: 0;
}
.theme-preset-background-01,
@ -27,7 +75,11 @@
.theme-preset-background-03,
.theme-preset-background-04,
.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%;
height: 100%;
position: absolute;
@ -37,564 +89,93 @@
transition: clip-path var(--layout-timing-extra-fast);
}
.theme-preset-background-01 {
.theme-preset-background-01,
.theme-custom-background-01 {
z-index: 1;
}
.theme-preset-background-02 {
.theme-preset-background-02,
.theme-custom-background-02 {
z-index: 2;
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);
}
.theme-preset-button:hover .theme-preset-font,
.theme-preset-button:focus .theme-preset-font {
transform: scale(1.1);
}
.theme-preset-background-nighttab-01 {
background-color: rgb(var(--theme-preset-background-nighttab-01));
}
.theme-preset-background-nighttab-02 {
background-color: rgb(var(--theme-preset-background-nighttab-02));
}
.theme-preset-background-nighttab-03 {
background-color: rgb(var(--theme-preset-background-nighttab-03));
}
.theme-preset-background-nighttab-04 {
background-color: rgb(var(--theme-preset-background-nighttab-04));
}
.theme-preset-accent-nighttab {
background-color: rgb(var(--theme-preset-accent-nighttab));
}
.theme-preset-font-display-nighttab {
font-family: var(--theme-preset-font-display-nighttab);
color: rgb(var(--theme-preset-font-color-nighttab));
}
.theme-preset-font-ui-nighttab {
font-family: var(--theme-preset-font-ui-nighttab);
color: rgb(var(--theme-preset-font-color-nighttab));
}
.theme-preset-background-midnight-01 {
background-color: rgb(var(--theme-preset-background-midnight-01));
}
.theme-preset-background-midnight-02 {
background-color: rgb(var(--theme-preset-background-midnight-02));
}
.theme-preset-background-midnight-03 {
background-color: rgb(var(--theme-preset-background-midnight-03));
}
.theme-preset-background-midnight-04 {
background-color: rgb(var(--theme-preset-background-midnight-04));
}
.theme-preset-accent-midnight {
background-color: rgb(var(--theme-preset-accent-midnight));
}
.theme-preset-font-display-midnight {
font-family: var(--theme-preset-font-display-midnight);
color: rgb(var(--theme-preset-font-color-midnight));
}
.theme-preset-font-ui-midnight {
font-family: var(--theme-preset-font-ui-midnight);
color: rgb(var(--theme-preset-font-color-midnight));
}
.theme-preset-background-pym-01 {
background-color: rgb(var(--theme-preset-background-pym-01));
}
.theme-preset-background-pym-02 {
background-color: rgb(var(--theme-preset-background-pym-02));
}
.theme-preset-background-pym-03 {
background-color: rgb(var(--theme-preset-background-pym-03));
}
.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));
.theme-preset-background-03,
.theme-custom-background-03 {
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-04,
.theme-custom-background-04 {
z-index: 4;
clip-path: polygon(100% 30%, 100% 100%, 30% 100%);
transition-delay: var(--layout-duration-02);
}
.theme-preset-accent,
.theme-custom-accent {
z-index: 5;
clip-path: circle(30% at 100% 100%);
transition-delay: var(--layout-duration-01);
}
.is-theme-custom-edit .theme-custom-accent {
clip-path: circle(30% at 100% 60%);
}
.theme-preset-name,
.theme-custom-name {
color: rgb(var(--theme-style-text));
font-weight: 700;
font-style: normal;
font-size: 0.8em;
text-align: left;
display: block;
max-width: calc(100% - 2em);
max-height: calc(100% - 2em);
position: absolute;
top: 1em;
left: 1em;
z-index: 6;
overflow: hidden;
text-overflow: ellipsis;
white-space: initial;
transform: scale(1);
transition: transform var(--layout-timing-extra-fast);
}
.theme-preset-button:focus .theme-preset-background-02,
.theme-preset-button:hover .theme-preset-background-02,
.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-button:focus .theme-preset-background-03,
.theme-preset-button:hover .theme-preset-background-03,
.theme-custom-button:focus .theme-custom-background-03,
.theme-custom-button:hover .theme-custom-background-03 {
clip-path: polygon(80% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 80%);
}
.theme-preset-button:focus .theme-preset-background-04,
.theme-preset-button:hover .theme-preset-background-04,
.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-button:focus .theme-preset-accent,
.theme-preset-button:hover .theme-preset-accent,
.theme-custom-button:focus .theme-custom-accent,
.theme-custom-button:hover .theme-custom-accent {
clip-path: circle(40% at 100% 100%);
}
.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%);
}

101
src/css/variables.css
View File

@ -3,7 +3,7 @@
--theme-root-font-size: 14px;
--theme-accent: 250, 130, 0;
--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-style: "normal";
--theme-font-ui-name: "Open Sans", sans-serif;
@ -32,105 +32,8 @@
--theme-shade-pos-08: 25, 25, 25;
--theme-shade-pos-09: 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-custom-edit-height: 2.5em;
/* header */
--header-area-width: 100%;
--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/fontawesome.css">
<!-- 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>
<body>
@ -1139,7 +1138,7 @@
</div>
</div>
<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>
<hr>
<div class="input-wrap">
@ -1150,7 +1149,7 @@
</div>
</div>
<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>
<hr>
@ -1167,7 +1166,7 @@
</div>
</div>
<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>
<hr>
@ -1278,13 +1277,13 @@
<div class="menu-item-form">
<div class="form-inline">
<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 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 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>
@ -1312,248 +1311,25 @@
<h1 class="menu-item-header-text">Presets</h1>
</div>
<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="button-wrap">
<button class="control-theme-preset-nighttab theme-preset-button button mb-0" tabindex="-1">
<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>
<button class="control-theme-custom-add button mb-0" tabindex="-1">Save current theme</button>
</div>
<div class="button-wrap">
<button class="control-theme-preset-midnight theme-preset-button button mb-0" tabindex="-1">
<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>
<button class="control-theme-custom-edit button mb-0" tabindex="-1">Edit</button>
</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 class="menu-item">

320
src/js/control.js
View File

@ -2531,327 +2531,17 @@ var control = (function() {
link.groupAndItems();
}
}, {
element: helper.e(".control-theme-preset-nighttab"),
element: helper.e(".control-theme-custom-add"),
type: "button",
func: function() {
mod.setValue("theme.accent.current", helper.getObject({
object: state.get.default(),
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();
menu.close();
theme.custom.add();
}
}, {
element: helper.e(".control-theme-preset-midnight"),
element: helper.e(".control-theme-custom-edit"),
type: "button",
func: function() {
theme.preset("midnight");
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();
theme.custom.edit();
}
}, {
element: helper.e(".control-theme-style-dark"),

8
src/js/menu.js
View File

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

3
src/js/state.js
View File

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

1401
src/js/theme.js
View File

File diff suppressed because it is too large Load Diff

4
src/js/update.js
View File

@ -742,6 +742,10 @@ var update = (function() {
style: "normal"
};
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 current = "4.7.0";
var current = "4.8.0";
var name = "Naughty Goose";

2
src/manifest.json
View File

@ -2,7 +2,7 @@
"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.",
"version": "4.7.0",
"version": "4.8.0",
"manifest_version": 2,
"chrome_url_overrides": {
"newtab": "index.html"