extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-01-13 09:28:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

[feature] add theme colour controls

Browse Source
This commit is contained in:
Kombie 2019-12-22 15:15:02 +00:00 committed by GitHub
parent 6d984c04c1
commit 298d380f52
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 1036 additions and 356 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.0.0",
"version": "4.3.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "nighttab",
"version": "4.2.1",
"version": "4.3.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/auto-suggest.css
View File

@ -5,7 +5,7 @@
}
.auto-suggest {
background-color: rgb(var(--theme-gray-02));
background-color: rgb(var(--theme-color-02));
margin-top: 0.5em;
padding: 1em;
position: absolute;

2
src/css/clock.css
View File

@ -72,5 +72,5 @@
.clock-minutes,
.clock-seconds,
.clock-meridiem {
color: rgb(var(--theme-gray-16));
color: rgb(var(--theme-color-16));
}

2
src/css/date.css
View File

@ -71,5 +71,5 @@
.date-date,
.date-month,
.date-year {
color: rgb(var(--theme-gray-16));
color: rgb(var(--theme-color-16));
}

227
src/css/form.css
View File

@ -1085,6 +1085,12 @@ input[type="range"]:disabled::-moz-range-progress {
box-shadow: 0 0 0.25em 0 rgba(var(--theme-accent), 0.6), 0 0 0.5em 0 rgba(var(--theme-accent), 0.4);
}
.input-color-dot-theme input[type="color"],
.input-color-dot-theme input[type="color"]:hover,
.input-color-dot-theme input[type="color"]:focus {
box-shadow: 0 0 0.25em 0 rgba(var(--theme-shade), 0.6), 0 0 0.5em 0 rgba(var(--theme-shade), 0.4);
}
.input-color-dot input[type="color"]+label {
padding-right: calc(calc(var(--form-thumb-size) * 0.8) + 2em);
position: relative;
@ -1196,71 +1202,7 @@ input[type="range"]:disabled::-moz-range-progress {
width: initial;
}
.form-group-text {
background-color: rgb(var(--form-group-text-background));
padding: 0 1em;
margin: 0;
color: rgb(var(--form-input-text));
min-width: 4em;
font-size: 1em;
font-family: var(--font-regular);
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-width: var(--layout-line-width);
border-color: rgb(var(--form-group-text-border));
border-style: solid;
border-radius: var(--theme-radius);
white-space: nowrap;
transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast);
}
.form-group-text:hover,
.form-group-text:focus {
background-color: rgb(var(--form-group-text-background-focus-hover));
border-color: rgb(var(--form-group-text-border-focus-hover));
color: rgb(var(--form-input-text-hover));
outline: none;
}
.form-group-text:active {
background-color: rgb(var(--form-group-text-background-active));
border-color: rgb(var(--form-group-text-border-active));
color: rgb(var(--form-input-text-hover));
outline: none;
}
.form-group-text.disabled,
.form-group-text.disabled:hover,
.form-group-text.disabled:focus,
.form-group-text.disable:active {
background-color: rgb(var(--form-group-text-background-disabled));
border-color: rgb(var(--form-group-text-border-disabled));
color: rgb(var(--form-input-text-disabled));
box-shadow: none;
cursor: default;
}
.form-group-small,
.form-group-medium,
.form-group-large {
padding-left: 0.5em;
padding-right: 0.5em;
}
.form-group-small {
width: 3em;
}
.form-group-medium {
width: 6em;
}
.form-group-large {
width: 9em;
}
/* form group */
.form-group {
margin: 0 0 1em 0;
display: inline-flex;
@ -1268,23 +1210,6 @@ input[type="range"]:disabled::-moz-range-progress {
align-items: stretch;
}
.form-group-block {
display: flex;
width: 100%;
}
.form-group-item-shrink {
flex-grow: 0;
}
.form-group-item-grow {
flex-grow: 1;
}
.form-group-item-half {
flex-basis: 50%;
}
.form-group .form-group-text,
.form-group .button,
.form-group>select,
@ -1372,7 +1297,23 @@ input[type="range"]:disabled::-moz-range-progress {
border-radius: 0 var(--theme-radius) var(--theme-radius) 0;
}
.form-group .form-group-text:only-child,
.form-group .button:only-child,
.form-group .button:only-child:after,
.form-group>select:only-child,
.form-group>input[type="email"]:only-child,
.form-group>input[type="number"]:only-child,
.form-group>input[type="password"]:only-child,
.form-group>input[type="search"]:only-child,
.form-group>input[type="tel"]:only-child,
.form-group>input[type="text"]:only-child,
.form-group>input[type="color"]:only-child,
.form-group>input[type="range"]:only-child {
border-radius: var(--theme-radius);
}
.form-group.nested-button * .button,
.form-group.nested-button *:first-child .button:after,
.form-group.nested-button * input[type="checkbox"]+label,
.form-group.nested-button * input[type="radio"]+label,
.form-group.nested-button * input[type="color"]+label {
@ -1425,6 +1366,128 @@ input[type="range"]:disabled::-moz-range-progress {
border-bottom-right-radius: var(--theme-radius);
}
.form-group-block {
display: flex;
width: 100%;
}
.form-group-border {
border-radius: calc(var(--theme-radius) * 2);
border-width: var(--layout-line-width);
border-color: rgb(var(--form-group-text-border));
border-style: solid;
overflow: hidden;
}
.form-group.form-group-border .form-group-text,
.form-group.form-group-border .button,
.form-group.form-group-border .button:after,
.form-group.form-group-border>select,
.form-group.form-group-border>input[type="email"],
.form-group.form-group-border>input[type="number"],
.form-group.form-group-border>input[type="password"],
.form-group.form-group-border>input[type="search"],
.form-group.form-group-border>input[type="tel"],
.form-group.form-group-border>input[type="text"],
.form-group.form-group-border>input[type="color"],
.form-group.form-group-border>input[type="range"],
.form-group.form-group-border.nested-button * .button,
.form-group.form-group-border.nested-button * .button:after,
.form-group.form-group-border.nested-button * input[type="checkbox"]+label,
.form-group.form-group-border.nested-button * input[type="radio"]+label,
.form-group.form-group-border.nested-button * input[type="color"]+label {
border-radius: 0;
}
.form-group-border-theme-color {
border-color: rgb(var(--theme-color));
}
.form-group-item-small,
.form-group-item-medium,
.form-group-item-large {
padding-left: 0.5em;
padding-right: 0.5em;
}
.form-group-item-small {
width: 3em;
}
.form-group-item-medium {
width: 6em;
}
.form-group-item-large {
width: 9em;
}
.form-group-item-shrink {
flex-grow: 0;
}
.form-group-item-grow {
flex-grow: 1;
}
.form-group-item-half {
flex-basis: 50%;
}
.form-group-text {
background-color: rgb(var(--form-group-text-background));
padding: 0 1em;
margin: 0;
color: rgb(var(--form-input-text));
min-width: 4em;
font-size: 1em;
font-family: var(--font-regular);
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-width: var(--layout-line-width);
border-color: rgb(var(--form-group-text-border));
border-style: solid;
border-radius: var(--theme-radius);
white-space: nowrap;
overflow: hidden;
transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast);
}
.form-group-text:hover,
.form-group-text:focus {
background-color: rgb(var(--form-group-text-background-focus-hover));
border-color: rgb(var(--form-group-text-border-focus-hover));
color: rgb(var(--form-input-text-hover));
outline: none;
}
.form-group-text:active {
background-color: rgb(var(--form-group-text-background-active));
border-color: rgb(var(--form-group-text-border-active));
color: rgb(var(--form-input-text-hover));
outline: none;
}
.form-group-text.disabled,
.form-group-text.disabled:hover,
.form-group-text.disabled:focus,
.form-group-text.disable:active {
background-color: rgb(var(--form-group-text-background-disabled));
border-color: rgb(var(--form-group-text-border-disabled));
color: rgb(var(--form-input-text-disabled));
box-shadow: none;
cursor: default;
}
.form-group-text-borderless {
padding: 0;
border-width: 0;
min-width: inherit;
}
/* form dropdown */
.form-dropdown {
position: relative;
}

12
src/css/link.css
View File

@ -50,7 +50,7 @@
}
.link-item.link-empty {
background-color: rgba(var(--theme-gray-04), 0.2);
background-color: rgba(var(--theme-color-04), 0.2);
border-radius: var(--theme-radius);
height: inherit;
text-align: center;
@ -115,7 +115,7 @@
/* link panel front */
.link-panel-front {
background-color: rgb(var(--theme-gray-02));
background-color: rgb(var(--theme-color-02));
position: absolute;
left: 0;
width: 100%;
@ -163,7 +163,7 @@
.link-item:focus-within .link-panel-front,
.link-item:focus .link-panel-front,
.link-item:hover .link-panel-front {
background-color: rgb(var(--theme-gray-03));
background-color: rgb(var(--theme-color-03));
outline: none;
text-decoration: none;
}
@ -589,7 +589,7 @@
margin: 0;
font-size: var(--link-item-display-name-size);
font-family: var(--font-regular);
color: rgb(var(--theme-gray-12));
color: rgb(var(--theme-color-12));
display: none;
transition: color var(--layout-timing-extra-fast);
}
@ -727,7 +727,7 @@
margin-bottom: 0;
border: 0;
padding: 0;
color: rgb(var(--theme-gray-02));
color: rgb(var(--theme-color-02));
flex-grow: 1;
}
@ -890,7 +890,7 @@
.link-form-text-icon:empty:before {
content: "";
background-color: rgb(var(--theme-gray-04));
background-color: rgb(var(--theme-color-04));
top: 50%;
left: 50%;
position: absolute;

4
src/css/menu.css
View File

@ -22,7 +22,7 @@
}
.menu-area {
background-color: rgb(var(--theme-gray-01));
background-color: rgb(var(--theme-color-01));
border-radius: var(--theme-radius);
width: 100%;
max-height: 100%;
@ -33,7 +33,7 @@
}
.is-edge .menu-area {
background-color: rgba(var(--theme-gray-01), 0.8);
background-color: rgba(var(--theme-color-01), 0.8);
}
.menu-nav {

4
src/css/modal.css
View File

@ -23,7 +23,7 @@
}
.modal-wrapper {
background-color: rgb(var(--theme-gray-01));
background-color: rgb(var(--theme-color-01));
border-radius: var(--theme-radius);
box-shadow: var(--layout-shadow-large);
position: relative;
@ -59,7 +59,7 @@
}
.modal-controls {
background-color: rgb(var(--theme-gray-01));
background-color: rgb(var(--theme-color-01));
border-radius: 0 0 var(--theme-radius) var(--theme-radius);
position: relative;
z-index: 2;

6
src/css/tip.css
View File

@ -45,10 +45,10 @@
.tip-message {
padding: 0.5em 1em;
background-color: rgb(var(--theme-gray-04));
background-color: rgb(var(--theme-color-04));
border: 0;
border-radius: calc(var(--theme-radius) * 2);
color: rgb(var(--theme-gray-18));
color: rgb(var(--theme-color-18));
font-size: 0.8em;
font-family: var(--font-regular);
text-align: center;
@ -59,7 +59,7 @@
.tip-arrow {
border: 0.5em solid transparent;
border-top-color: rgb(var(--theme-gray-04));
border-top-color: rgb(var(--theme-color-04));
position: absolute;
width: 0;
height: 0;

2
src/css/transitional.css
View File

@ -3,7 +3,7 @@
padding: 0;
font-size: 1em;
font-family: var(--font-fjalla);
color: rgb(var(--theme-gray-14));
color: rgb(var(--theme-color-14));
width: 100%;
min-height: 2.5em;
display: flex;

16
src/css/typography.css
View File

@ -7,7 +7,7 @@ h6 {
margin: 0 0 1em 0;
font-weight: normal;
line-height: 1.5;
color: rgb(var(--theme-gray-18));
color: rgb(var(--theme-color-18));
}
h1 {
@ -41,7 +41,7 @@ h6 {
}
p {
color: rgb(var(--theme-gray-16));
color: rgb(var(--theme-color-16));
margin: 0;
line-height: 1.5;
}
@ -70,13 +70,13 @@ strong {
}
a {
color: rgb(var(--theme-gray-16));
color: rgb(var(--theme-color-16));
text-decoration: none;
}
a:link,
a:visited {
color: rgb(var(--theme-gray-18));
color: rgb(var(--theme-color-18));
}
a:focus {
@ -97,7 +97,7 @@ a:active {
padding-bottom: var(--layout-line-width);
border-bottom-width: calc(var(--layout-line-width) / 2);
border-bottom-style: solid;
border-bottom-color: rgb(var(--theme-gray-06));
border-bottom-color: rgb(var(--theme-color-06));
transition: color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast);
}
@ -145,9 +145,9 @@ table {
table thead tr td,
table thead tr th {
background-color: rgb(var(--theme-gray-03));
background-color: rgb(var(--theme-color-03));
border: 0;
border-bottom: 1px solid rgb(var(--theme-gray-04));
border-bottom: 1px solid rgb(var(--theme-color-04));
padding: 0.5em;
margin: 0;
text-align: left;
@ -156,7 +156,7 @@ table thead tr th {
}
table tr:nth-child(odd) {
background-color: rgb(var(--theme-gray-02));
background-color: rgb(var(--theme-color-02));
}
table tbody tr td,

98
src/css/utilities.css
View File

@ -20,7 +20,7 @@
}
.muted {
color: rgb(var(--theme-gray-12));
color: rgb(var(--theme-color-12));
}
.scroll-disabled {
@ -57,3 +57,99 @@
white-space: nowrap;
border: 0;
}
.color-demo {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}
.theme-color-box {
width: 100%;
height: 100%;
}
.theme-color-neg-10 {
background-color: rgb(var(--theme-color-01));
}
.theme-color-neg-09 {
background-color: rgb(var(--theme-color-02));
}
.theme-color-neg-08 {
background-color: rgb(var(--theme-color-03));
}
.theme-color-neg-07 {
background-color: rgb(var(--theme-color-04));
}
.theme-color-neg-06 {
background-color: rgb(var(--theme-color-05));
}
.theme-color-neg-05 {
background-color: rgb(var(--theme-color-06));
}
.theme-color-neg-04 {
background-color: rgb(var(--theme-color-07));
}
.theme-color-neg-03 {
background-color: rgb(var(--theme-color-08));
}
.theme-color-neg-02 {
background-color: rgb(var(--theme-color-09));
}
.theme-color-neg-01 {
background-color: rgb(var(--theme-color-10));
}
.theme-color {
background-color: rgb(var(--theme-color));
}
.theme-color-pos-01 {
background-color: rgb(var(--theme-color-11));
}
.theme-color-pos-02 {
background-color: rgb(var(--theme-color-12));
}
.theme-color-pos-03 {
background-color: rgb(var(--theme-color-13));
}
.theme-color-pos-04 {
background-color: rgb(var(--theme-color-14));
}
.theme-color-pos-05 {
background-color: rgb(var(--theme-color-15));
}
.theme-color-pos-06 {
background-color: rgb(var(--theme-color-16));
}
.theme-color-pos-07 {
background-color: rgb(var(--theme-color-17));
}
.theme-color-pos-08 {
background-color: rgb(var(--theme-color-18));
}
.theme-color-pos-09 {
background-color: rgb(var(--theme-color-19));
}
.theme-color-pos-10 {
background-color: rgb(var(--theme-color-20));
}

283
src/css/variables.css
View File

@ -5,29 +5,30 @@
--theme-radius: 0.2rem;
--theme-black: 0, 0, 0;
--theme-white: 255, 255, 255;
--theme-shade-01: 38, 40, 49;
--theme-shade-02: 47, 51, 62;
--theme-shade-03: 57, 62, 75;
--theme-shade-04: 67, 73, 88;
--theme-shade-05: 77, 84, 101;
--theme-shade-06: 87, 95, 114;
--theme-shade-07: 97, 106, 127;
--theme-shade-08: 107, 117, 140;
--theme-shade-09: 117, 128, 153;
--theme-shade-10: 127, 139, 166;
--theme-shade-11: 137, 151, 180;
--theme-shade-12: 149, 162, 187;
--theme-shade-13: 162, 173, 195;
--theme-shade-14: 174, 184, 203;
--theme-shade-15: 187, 195, 211;
--theme-shade-16: 199, 206, 218;
--theme-shade-17: 212, 217, 226;
--theme-shade-18: 224, 228, 234;
--theme-shade-19: 237, 239, 242;
--theme-shade-20: 250, 250, 250;
--theme-shade-neg-10: 25, 25, 25;
--theme-shade-neg-09: 25, 25, 25;
--theme-shade-neg-08: 25, 25, 25;
--theme-shade-neg-07: 25, 25, 25;
--theme-shade-neg-06: 25, 25, 25;
--theme-shade-neg-05: 25, 25, 25;
--theme-shade-neg-04: 25, 25, 25;
--theme-shade-neg-03: 25, 25, 25;
--theme-shade-neg-02: 25, 25, 25;
--theme-shade-neg-01: 25, 25, 25;
--theme-shade: 25, 25, 25;
--theme-shade-pos-01: 25, 25, 25;
--theme-shade-pos-02: 25, 25, 25;
--theme-shade-pos-03: 25, 25, 25;
--theme-shade-pos-04: 25, 25, 25;
--theme-shade-pos-05: 25, 25, 25;
--theme-shade-pos-06: 25, 25, 25;
--theme-shade-pos-07: 25, 25, 25;
--theme-shade-pos-08: 25, 25, 25;
--theme-shade-pos-09: 25, 25, 25;
--theme-shade-pos-10: 25, 25, 25;
/* header */
--header-area-width: 100%;
--header-shade-color: var(--theme-gray-01);
--header-shade-color: var(--theme-color-01);
--header-shade-opacity: 0.95;
--header-search-width: 0%;
--header-border-top: 0;
@ -76,9 +77,9 @@
0 0 1em rgba(0, 0, 0, 0.1);
--layout-shadow-large: 0 0 1em rgba(0, 0, 0, 0.2),
0 0 2em rgba(0, 0, 0, 0.1);
--horizontal-rule: calc(var(--layout-line-width) / 2) solid rgb(var(--theme-gray-02));
--horizontal-rule: calc(var(--layout-line-width) / 2) solid rgb(var(--theme-color-02));
/* background */
--background-color-theme: var(--theme-gray-01);
--background-color-theme: var(--theme-color-01);
--background-color-custom: rgb(0, 0, 0);
--background-image: none;
--background-opacity: 1;
@ -86,101 +87,101 @@
--background-accent: 0;
--background-blur: 0;
/* form */
--form-label: var(--theme-gray-16);
--form-label-hover: var(--theme-gray-20);
--form-label: var(--theme-color-16);
--form-label-hover: var(--theme-color-20);
--form-label-focus-active: var(--theme-style-text);
--form-label-checked: var(--theme-style-text);
--form-label-disabled: var(--theme-gray-04);
--form-input-text: var(--theme-gray-16);
--form-input-text-hover: var(--theme-gray-18);
--form-label-disabled: var(--theme-color-04);
--form-input-text: var(--theme-color-16);
--form-input-text-hover: var(--theme-color-18);
--form-input-text-focus-active: var(--theme-style-text);
--form-input-text-disabled: var(--theme-gray-04);
--form-input-background: var(--theme-gray-02);
--form-input-background-hover: var(--theme-gray-02);
--form-input-background-focus-active: var(--theme-gray-01);
--form-input-background-disabled: var(--theme-gray-01);
--form-input-border: var(--theme-gray-02);
--form-input-border-hover: var(--theme-gray-02);
--form-input-border-focus-active: var(--theme-gray-01);
--form-input-border-disabled: var(--theme-gray-01);
--form-group-text-background: var(--theme-gray-02);
--form-group-text-background-focus-hover: var(--theme-gray-02);
--form-group-text-background-active: var(--theme-gray-02);
--form-group-text-background-disabled: var(--theme-gray-01);
--form-group-text-border: var(--theme-gray-02);
--form-group-text-border-focus-hover: var(--theme-gray-02);
--form-group-text-border-active: var(--theme-gray-02);
--form-group-text-border-disabled: var(--theme-gray-01);
--form-border-disabled: var(--theme-gray-02);
--form-icon: var(--theme-gray-08);
--form-icon-hover: var(--theme-gray-16);
--form-icon-focus: var(--theme-gray-18);
--form-input-text-disabled: var(--theme-color-04);
--form-input-background: var(--theme-color-02);
--form-input-background-hover: var(--theme-color-02);
--form-input-background-focus-active: var(--theme-color-01);
--form-input-background-disabled: var(--theme-color-01);
--form-input-border: var(--theme-color-02);
--form-input-border-hover: var(--theme-color-02);
--form-input-border-focus-active: var(--theme-color-01);
--form-input-border-disabled: var(--theme-color-01);
--form-group-text-background: var(--theme-color-02);
--form-group-text-background-focus-hover: var(--theme-color-02);
--form-group-text-background-active: var(--theme-color-02);
--form-group-text-background-disabled: var(--theme-color-01);
--form-group-text-border: var(--theme-color-02);
--form-group-text-border-focus-hover: var(--theme-color-02);
--form-group-text-border-active: var(--theme-color-02);
--form-group-text-border-disabled: var(--theme-color-01);
--form-border-disabled: var(--theme-color-02);
--form-icon: var(--theme-color-08);
--form-icon-hover: var(--theme-color-16);
--form-icon-focus: var(--theme-color-18);
--form-icon-active: var(--theme-style-text);
--form-icon-checked: var(--theme-style-text);
--form-icon-disabled: var(--theme-gray-04);
--form-icon-symbol: var(--theme-gray-01);
--form-icon-symbol-active: var(--theme-gray-01);
--form-icon-symbol-disabled: var(--theme-gray-01);
--form-placeholder: var(--theme-gray-06);
--form-placeholder-focus-hover: var(--theme-gray-10);
--form-placeholder-disabled: var(--theme-gray-03);
--form-checkbox-radio-label: var(--theme-gray-12);
--form-checkbox-radio-checked-label: var(--theme-gray-16);
--form-checkbox-radio-disabled-label: var(--theme-gray-04);
--form-feedback-text: var(--theme-gray-16);
--form-feedback-text-muted: var(--theme-gray-12);
--form-feedback-text-disabled: var(--theme-gray-04);
--form-feedback-background: var(--theme-gray-02);
--form-feedback-background-disabled: var(--theme-gray-01);
--form-feedback-border: var(--theme-gray-04);
--form-feedback-border-disabled: var(--theme-gray-02);
--form-helper: var(--theme-gray-12);
--form-helper-disabled: var(--theme-gray-04);
--form-icon-disabled: var(--theme-color-04);
--form-icon-symbol: var(--theme-color-01);
--form-icon-symbol-active: var(--theme-color-01);
--form-icon-symbol-disabled: var(--theme-color-01);
--form-placeholder: var(--theme-color-06);
--form-placeholder-focus-hover: var(--theme-color-10);
--form-placeholder-disabled: var(--theme-color-03);
--form-checkbox-radio-label: var(--theme-color-12);
--form-checkbox-radio-checked-label: var(--theme-color-16);
--form-checkbox-radio-disabled-label: var(--theme-color-04);
--form-feedback-text: var(--theme-color-16);
--form-feedback-text-muted: var(--theme-color-12);
--form-feedback-text-disabled: var(--theme-color-04);
--form-feedback-background: var(--theme-color-02);
--form-feedback-background-disabled: var(--theme-color-01);
--form-feedback-border: var(--theme-color-04);
--form-feedback-border-disabled: var(--theme-color-02);
--form-helper: var(--theme-color-12);
--form-helper-disabled: var(--theme-color-04);
--form-thumb-size: 1.25em;
--form-range-thumb-background: var(--theme-gray-16);
--form-range-thumb-background-hover: var(--theme-gray-18);
--form-range-thumb-background: var(--theme-color-16);
--form-range-thumb-background-hover: var(--theme-color-18);
--form-range-thumb-background-focus: var(--theme-style-text);
--form-range-thumb-background-active: var(--theme-style-text);
--form-range-thumb-background-disabled: var(--theme-gray-03);
--form-range-track-background: var(--theme-gray-06);
--form-range-track-background-focus-hover: var(--theme-gray-04);
--form-range-track-background-active: var(--theme-gray-03);
--form-range-track-background-disabled: var(--theme-gray-02);
--form-range-progress-background: var(--theme-gray-08);
--form-range-thumb-background-disabled: var(--theme-color-03);
--form-range-track-background: var(--theme-color-06);
--form-range-track-background-focus-hover: var(--theme-color-04);
--form-range-track-background-active: var(--theme-color-03);
--form-range-track-background-disabled: var(--theme-color-02);
--form-range-progress-background: var(--theme-color-08);
--form-range-progress-background-active: var(--theme-accent);
--form-range-progress-background-disabled: var(--theme-gray-02);
--form-grid-background: var(--theme-gray-02);
--form-grid-background-hover: var(--theme-gray-02);
--form-grid-background-focus: var(--theme-gray-02);
--form-grid-background-disabled: var(--theme-gray-01);
--form-grid-border: var(--theme-gray-08);
--form-grid-border-hover-focus: var(--theme-gray-20);
--form-range-progress-background-disabled: var(--theme-color-02);
--form-grid-background: var(--theme-color-02);
--form-grid-background-hover: var(--theme-color-02);
--form-grid-background-focus: var(--theme-color-02);
--form-grid-background-disabled: var(--theme-color-01);
--form-grid-border: var(--theme-color-08);
--form-grid-border-hover-focus: var(--theme-color-20);
--form-grid-border-active: var(--theme-accent);
--form-grid-border-checked: var(--theme-accent);
--form-grid-border-disabled: var(--theme-gray-04);
--form-dropdown-background: var(--theme-gray-02);
--form-ring-hover: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06));
--form-ring-focus: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-10)),
0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-gray-10), 0.25);
--form-grid-border-disabled: var(--theme-color-04);
--form-dropdown-background: var(--theme-color-02);
--form-ring-hover: 0 0 0 var(--layout-line-width) rgb(var(--theme-color-06));
--form-ring-focus: 0 0 0 var(--layout-line-width) rgb(var(--theme-color-10)),
0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-color-10), 0.25);
--form-ring-accent: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)),
0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
/* button */
--button-background: var(--theme-gray-02);
--button-background-focus-hover: var(--theme-gray-03);
--button-background-active: var(--theme-gray-04);
--button-background-disabled: var(--theme-gray-01);
--button-border: var(--theme-gray-02);
--button-border-focus-hover: var(--theme-gray-06);
--button-background: var(--theme-color-02);
--button-background-focus-hover: var(--theme-color-03);
--button-background-active: var(--theme-color-04);
--button-background-disabled: var(--theme-color-01);
--button-border: var(--theme-color-02);
--button-border-focus-hover: var(--theme-color-06);
--button-border-active: var(--theme-accent);
--button-border-disabled: var(--theme-gray-01);
--button-text: var(--theme-gray-12);
--button-text-focus-hover: var(--theme-gray-20);
--button-border-disabled: var(--theme-color-01);
--button-text: var(--theme-color-12);
--button-text-focus-hover: var(--theme-color-20);
--button-text-active: var(--theme-style-text);
--button-text-disabled: var(--theme-gray-04);
--button-link-text: var(--theme-gray-12);
--button-text-disabled: var(--theme-color-04);
--button-link-text: var(--theme-color-12);
--button-link-text-focus-hover: var(--theme-style-text);
--button-link-text-active: var(--theme-style-text);
--button-link-text-disabled: var(--theme-gray-04);
--button-link-text-disabled: var(--theme-color-04);
/* edge */
--edge-shadow: inset 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)),
inset 0 0 0 calc(var(--layout-line-width) * 4) rgba(var(--theme-accent), 0.1),
@ -212,51 +213,53 @@
.is-theme-style-dark {
/* theme */
--theme-gray-01: var(--theme-shade-01);
--theme-gray-02: var(--theme-shade-02);
--theme-gray-03: var(--theme-shade-03);
--theme-gray-04: var(--theme-shade-04);
--theme-gray-05: var(--theme-shade-05);
--theme-gray-06: var(--theme-shade-06);
--theme-gray-07: var(--theme-shade-07);
--theme-gray-08: var(--theme-shade-08);
--theme-gray-09: var(--theme-shade-09);
--theme-gray-10: var(--theme-shade-10);
--theme-gray-11: var(--theme-shade-11);
--theme-gray-12: var(--theme-shade-12);
--theme-gray-13: var(--theme-shade-13);
--theme-gray-14: var(--theme-shade-14);
--theme-gray-15: var(--theme-shade-15);
--theme-gray-16: var(--theme-shade-16);
--theme-gray-17: var(--theme-shade-17);
--theme-gray-18: var(--theme-shade-18);
--theme-gray-19: var(--theme-shade-19);
--theme-gray-20: var(--theme-shade-20);
--theme-color: var(--theme-shade);
--theme-color-01: var(--theme-shade-neg-10);
--theme-color-02: var(--theme-shade-neg-09);
--theme-color-03: var(--theme-shade-neg-08);
--theme-color-04: var(--theme-shade-neg-07);
--theme-color-05: var(--theme-shade-neg-06);
--theme-color-06: var(--theme-shade-neg-05);
--theme-color-07: var(--theme-shade-neg-04);
--theme-color-08: var(--theme-shade-neg-03);
--theme-color-09: var(--theme-shade-neg-02);
--theme-color-10: var(--theme-shade-neg-01);
--theme-color-11: var(--theme-shade-pos-01);
--theme-color-12: var(--theme-shade-pos-02);
--theme-color-13: var(--theme-shade-pos-03);
--theme-color-14: var(--theme-shade-pos-04);
--theme-color-15: var(--theme-shade-pos-05);
--theme-color-16: var(--theme-shade-pos-06);
--theme-color-17: var(--theme-shade-pos-07);
--theme-color-18: var(--theme-shade-pos-08);
--theme-color-19: var(--theme-shade-pos-09);
--theme-color-20: var(--theme-shade-pos-10);
--theme-style-text: var(--theme-white);
}
.is-theme-style-light {
/* theme */
--theme-gray-01: var(--theme-shade-20);
--theme-gray-02: var(--theme-shade-19);
--theme-gray-03: var(--theme-shade-18);
--theme-gray-04: var(--theme-shade-17);
--theme-gray-05: var(--theme-shade-16);
--theme-gray-06: var(--theme-shade-15);
--theme-gray-07: var(--theme-shade-14);
--theme-gray-08: var(--theme-shade-13);
--theme-gray-09: var(--theme-shade-12);
--theme-gray-10: var(--theme-shade-11);
--theme-gray-11: var(--theme-shade-10);
--theme-gray-12: var(--theme-shade-09);
--theme-gray-13: var(--theme-shade-08);
--theme-gray-14: var(--theme-shade-07);
--theme-gray-15: var(--theme-shade-06);
--theme-gray-16: var(--theme-shade-05);
--theme-gray-17: var(--theme-shade-04);
--theme-gray-18: var(--theme-shade-03);
--theme-gray-19: var(--theme-shade-02);
--theme-gray-20: var(--theme-shade-01);
--theme-color: var(--theme-shade);
--theme-color-01: var(--theme-shade-pos-10);
--theme-color-02: var(--theme-shade-pos-09);
--theme-color-03: var(--theme-shade-pos-08);
--theme-color-04: var(--theme-shade-pos-07);
--theme-color-05: var(--theme-shade-pos-06);
--theme-color-06: var(--theme-shade-pos-05);
--theme-color-07: var(--theme-shade-pos-04);
--theme-color-08: var(--theme-shade-pos-03);
--theme-color-09: var(--theme-shade-pos-02);
--theme-color-10: var(--theme-shade-pos-01);
--theme-color-11: var(--theme-shade-neg-01);
--theme-color-12: var(--theme-shade-neg-02);
--theme-color-13: var(--theme-shade-neg-03);
--theme-color-14: var(--theme-shade-neg-04);
--theme-color-15: var(--theme-shade-neg-05);
--theme-color-16: var(--theme-shade-neg-06);
--theme-color-17: var(--theme-shade-neg-07);
--theme-color-18: var(--theme-shade-neg-08);
--theme-color-19: var(--theme-shade-neg-09);
--theme-color-20: var(--theme-shade-neg-10);
--theme-style-text: var(--theme-black);
}

253
src/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" style="background-color: rgb(38, 40, 49)">
<html lang="en" style="background-color: rgb(25, 25, 25)">
<head>
<meta charset="utf-8">
@ -112,7 +112,7 @@
<div class="header-item header-button header-accent">
<div class="header-button-body">
<div class="input-wrap input-button input-color-dot input-color-dot-accent py-0">
<input id="control-theme-accent-current-quick" class="control-theme-accent-current-quick" type="color" tabindex="1">
<input id="control-theme-accent-current-quick" class="control-theme-accent-current-quick" type="color" value="#000000" tabindex="1">
<label for="control-theme-accent-current-quick">Accent</label>
</div>
</div>
@ -163,7 +163,7 @@
<label for="control-layout-width">Width</label>
<div class="form-group form-group-block mb-0">
<input id="control-layout-width" class="control-layout-width mr-3" type="range" min="10" max="100" value="0" tabindex="-1">
<div class="control-layout-width-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-layout-width-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
@ -239,7 +239,7 @@
<label for="control-layout-size">Size</label>
<div class="form-group form-group-block mb-0">
<input id="control-layout-size" class="control-layout-size mr-3" type="range" min="50" max="200" value="0" step="5" tabindex="-1">
<div class="control-layout-size-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-layout-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<p class="control-layout-size-helper form-helper small">Resize all elements on the page.</p>
@ -258,7 +258,7 @@
<label for="control-layout-padding">Padding outside Header and Bookmark Area</label>
<div class="form-group form-group-block mb-0">
<input id="control-layout-padding" class="control-layout-padding mr-3" type="range" min="0" max="40" value="0" tabindex="-1">
<div class="control-layout-padding-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-layout-padding-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
@ -275,7 +275,7 @@
<label for="control-layout-gutter">Gutter between Header and Bookmark items</label>
<div class="form-group form-group-block mb-0">
<input id="control-layout-gutter" class="control-layout-gutter mr-3" type="range" min="0" max="40" value="0" tabindex="-1">
<div class="control-layout-gutter-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-layout-gutter-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
@ -311,7 +311,7 @@
<label for="control-header-area-width">Width</label>
<div class="form-group form-group-block mb-0">
<input id="control-header-area-width" class="control-header-area-width mr-3" type="range" min="10" max="100" value="0" tabindex="-1">
<div class="control-header-area-width-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-header-area-width-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<p class="control-header-area-width-helper form-helper small">Max width is defined by Layout Area Width.</p>
@ -390,7 +390,7 @@
<label for="control-header-greeting-size">Size</label>
<div class="form-group form-group-block mb-0">
<input id="control-header-greeting-size" class="control-header-greeting-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
<div class="control-header-greeting-size-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-header-greeting-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
@ -423,7 +423,7 @@
<label for="control-header-transitional-size">Size</label>
<div class="form-group form-group-block mb-0">
<input id="control-header-transitional-size" class="control-header-transitional-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
<div class="control-header-transitional-size-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-header-transitional-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
@ -500,7 +500,7 @@
<label for="control-header-clock-size">Size</label>
<div class="form-group form-group-block mb-0">
<input id="control-header-clock-size" class="control-header-clock-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
<div class="control-header-clock-size-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-header-clock-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
@ -638,7 +638,7 @@
<label for="control-header-date-size">Size</label>
<div class="form-group form-group-block mb-0">
<input id="control-header-date-size" class="control-header-date-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
<div class="control-header-date-size-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-header-date-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
@ -672,7 +672,7 @@
<label for="control-header-search-width">Width</label>
<div class="form-group form-group-block mb-0">
<input id="control-header-search-width" class="control-header-search-width mr-3" type="range" min="10" max="100" value="0" tabindex="-1">
<div class="control-header-search-width-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-header-search-width-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
</div>
@ -743,7 +743,7 @@
<label for="control-header-search-size">Size</label>
<div class="form-group form-group-block mb-0">
<input id="control-header-search-size" class="control-header-search-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
<div class="control-header-search-size-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-header-search-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<p class="control-header-search-size-helper form-helper small">Only the Search box width control will change the Width of the Search box.</p>
@ -782,7 +782,7 @@
<label for="control-header-button-size">Size</label>
<div class="form-group form-group-block mb-0">
<input id="control-header-button-size" class="control-header-button-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
<div class="control-header-button-size-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-header-button-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
@ -799,7 +799,7 @@
<label for="control-header-border-top">Top</label>
<div class="form-group form-group-block mb-0">
<input id="control-header-border-top" class="control-header-border-top mr-3" type="range" min="0" max="60" value="0" tabindex="-1">
<div class="control-header-border-top-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-header-border-top-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<hr>
@ -807,7 +807,7 @@
<label for="control-header-border-bottom">Bottom</label>
<div class="form-group form-group-block mb-0">
<input id="control-header-border-bottom" class="control-header-border-bottom mr-3" type="range" min="0" max="60" value="0" tabindex="-1">
<div class="control-header-border-bottom-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-header-border-bottom-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
</div>
@ -856,7 +856,7 @@
<label for="control-header-shade-opacity">Opacity</label>
<div class="form-group form-group-block mb-0">
<input id="control-header-shade-opacity" class="control-header-shade-opacity mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
<div class="control-header-shade-opacity-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-header-shade-opacity-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<hr>
@ -884,7 +884,7 @@
<label for="control-group-name-size">Name Size</label>
<div class="form-group form-group-block mb-0">
<input id="control-group-name-size" class="control-group-name-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
<div class="control-group-name-size-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-group-name-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
@ -936,7 +936,7 @@
<label for="control-group-border">Between groups</label>
<div class="form-group form-group-block mb-0">
<input id="control-group-border" class="control-group-border mr-3" type="range" min="0" max="60" value="0" tabindex="-1">
<div class="control-group-border-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-group-border-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<p class="control-link-area-width-helper form-helper small">Border between groups may not be visible if there is only one group.</p>
@ -954,7 +954,7 @@
<label for="control-link-area-width">Width</label>
<div class="form-group form-group-block mb-0">
<input id="control-link-area-width" class="control-link-area-width mr-3" type="range" min="10" max="100" value="0" tabindex="-1">
<div class="control-link-area-width-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-link-area-width-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<p class="control-link-area-width-helper form-helper small">Max width is defined by Layout Area Width.</p>
@ -996,7 +996,7 @@
<label for="control-link-item-size">Bookmark Size</label>
<div class="form-group form-group-block mb-0">
<input id="control-link-item-size" class="control-link-item-size mr-3" type="range" min="50" max="500" value="0" step="10" tabindex="-1">
<div class="control-link-item-size-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-link-item-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
@ -1048,7 +1048,7 @@
<label for="control-link-item-display-rotate">Content rotation</label>
<div class="form-group form-group-block mb-0">
<input id="control-link-item-display-rotate" class="control-link-item-display-rotate mr-3" type="range" min="-180" max="180" value="0" step="5" tabindex="1">
<div class="control-link-item-display-rotate-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-link-item-display-rotate-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
@ -1059,7 +1059,7 @@
<label for="control-link-item-display-translate-x">Content horizontally offset</label>
<div class="form-group form-group-block mb-0">
<input id="control-link-item-display-translate-x" class="control-link-item-display-translate-x mr-3" type="range" min="-1000" max="1000" value="0" step="10" tabindex="1">
<div class="control-link-item-display-translate-x-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-link-item-display-translate-x-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
@ -1070,7 +1070,7 @@
<label for="control-link-item-display-translate-y">Content vertically offset</label>
<div class="form-group form-group-block mb-0">
<input id="control-link-item-display-translate-y" class="control-link-item-display-translate-y mr-3" type="range" min="-1000" max="1000" value="0" step="10" tabindex="1">
<div class="control-link-item-display-translate-y-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-link-item-display-translate-y-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
@ -1081,7 +1081,7 @@
<label for="control-link-item-display-gutter">Content gutter</label>
<div class="form-group form-group-block mb-0">
<input id="control-link-item-display-gutter" class="control-link-item-display-gutter mr-3" type="range" min="0" max="40" value="0" tabindex="1">
<div class="control-link-item-display-gutter-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-link-item-display-gutter-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
@ -1120,7 +1120,7 @@
<label for="control-link-item-display-letcon-letter-size">Letter size</label>
<div class="form-group form-group-block mb-0">
<input id="control-link-item-display-letcon-letter-size" class="control-link-item-display-letcon-letter-size mr-3" type="range" min="10" max="3000" step="10" value="0" tabindex="-1">
<div class="control-link-item-display-letcon-letter-size-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-link-item-display-letcon-letter-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
@ -1131,7 +1131,7 @@
<label for="control-link-item-display-letcon-icon-size">Icon size</label>
<div class="form-group form-group-block mb-0">
<input id="control-link-item-display-letcon-icon-size" class="control-link-item-display-letcon-icon-size mr-3" type="range" min="10" max="3000" step="10" value="0" tabindex="-1">
<div class="control-link-item-display-letcon-icon-size-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-link-item-display-letcon-icon-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
@ -1147,7 +1147,7 @@
<label for="control-link-item-display-name-size">Name size</label>
<div class="form-group form-group-block mb-0">
<input id="control-link-item-display-name-size" class="control-link-item-display-name-size mr-3" type="range" min="10" max="3000" step="10" value="0" tabindex="-1">
<div class="control-link-item-display-name-size-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-link-item-display-name-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
@ -1192,7 +1192,7 @@
<label for="control-link-item-border">All sides</label>
<div class="form-group form-group-block mb-0">
<input id="control-link-item-border" class="control-link-item-border mr-3" type="range" min="0" max="40" value="0" tabindex="-1">
<div class="control-link-item-border-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-link-item-border-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
</div>
@ -1264,6 +1264,164 @@
</div>
<div class="menu-content-area menu-content-area-theme is-hidden">
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Style</h1>
</div>
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-theme-style-dark" class="control-theme-style-dark" type="radio" name="control-theme-style" value="dark" tabindex="-1">
<label for="control-theme-style-dark"><span class="label-icon"></span> Dark</label>
</div>
<div class="input-wrap">
<input id="control-theme-style-light" class="control-theme-style-light" type="radio" name="control-theme-style" value="light" tabindex="-1">
<label for="control-theme-style-light"><span class="label-icon"></span> Light</label>
</div>
<p class="control-theme-style-light-helper form-helper small">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
<hr>
<div class="input-wrap">
<label for="control-theme-radius">Radius</label>
<div class="form-group form-group-block mb-0">
<input id="control-theme-radius" class="control-theme-radius mr-3" type="range" min="0" max="300" value="0" step="5" tabindex="-1">
<div class="control-theme-radius-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
<button class="control-theme-radius-default button mb-0" tabindex="-1">Default radius</button>
</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Color</h1>
</div>
<div class="menu-item-form">
<div class="input-wrap">
<label for="control-theme-color-rgb-picker">Shade colour</label>
<div class="form-group form-group-block mb-0">
<input id="control-theme-color-rgb-picker" class="form-group-item-half control-theme-color-rgb-picker mb-0" type="color" value="#000000" tabindex="1">
<input id="control-theme-color-rgb-hex" class="form-group-item-half control-theme-color-rgb-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
</div>
</div>
<p class="control-theme-color-helper form-helper small">Light and dark shades from this colour are used across nightTabs.</p>
<div class="button-wrap">
<button class="control-theme-color-rgb-default button mb-0" tabindex="-1">Default shade color</button>
</div>
<hr>
<div class="input-wrap">
<label for="control-theme-color-hsl-h">Hue</label>
<div class="form-group form-group-block mb-0">
<input id="control-theme-color-hsl-h" class="control-theme-color-hsl-h mr-3" type="range" min="0" max="359" value="0" tabindex="-1">
<div class="control-theme-color-hsl-h-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="input-wrap">
<label for="control-theme-color-hsl-s">Saturation</label>
<div class="form-group form-group-block mb-0">
<input id="control-theme-color-hsl-s" class="control-theme-color-hsl-s mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
<div class="control-theme-color-hsl-s-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="input-wrap">
<label for="control-theme-color-hsl-l">Lightness</label>
<div class="form-group form-group-block mb-0">
<input id="control-theme-color-hsl-l" class="control-theme-color-hsl-l mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
<div class="control-theme-color-hsl-l-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<hr>
<div class="input-wrap">
<label for="control-theme-color-rgb-r">Red</label>
<div class="form-group form-group-block mb-0">
<input id="control-theme-color-rgb-r" class="control-theme-color-rgb-r mr-3" type="range" min="0" max="255" value="0" tabindex="-1">
<div class="control-theme-color-rgb-r-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="input-wrap">
<label for="control-theme-color-rgb-g">Green</label>
<div class="form-group form-group-block mb-0">
<input id="control-theme-color-rgb-g" class="control-theme-color-rgb-g mr-3" type="range" min="0" max="255" value="0" tabindex="-1">
<div class="control-theme-color-rgb-g-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="input-wrap">
<label for="control-theme-color-rgb-b">Blue</label>
<div class="form-group form-group-block mb-0">
<input id="control-theme-color-rgb-b" class="control-theme-color-rgb-b mr-3" type="range" min="0" max="255" value="0" tabindex="-1">
<div class="control-theme-color-rgb-b-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<hr>
<div class="form-group form-group-block form-group-border form-group-border-theme-color">
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-10"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-09"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-08"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-07"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-06"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-05"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-04"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-03"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-02"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-01"></div>
</div>
<div class="form-group-text form-group-text-borderless form-group-item-small">
<div class="theme-color-box theme-color"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-01"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-02"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-03"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-04"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-05"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-06"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-07"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-08"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-09"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-10"></div>
</div>
</div>
<p class="control-theme-color-helper form-helper small">Backgrounds, Bookmarks and Modals use shades from the left.</p>
<p class="control-theme-color-helper form-helper small">Text and form elements use shades from the right.</p>
<p class="control-theme-color-helper form-helper small">For a light look switch to the Light Style and then select a Shade colour.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Accent</h1>
@ -1309,33 +1467,6 @@
</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Style</h1>
</div>
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-theme-style-dark" class="control-theme-style-dark" type="radio" name="control-theme-style" value="dark" tabindex="-1">
<label for="control-theme-style-dark"><span class="label-icon"></span> Dark</label>
</div>
<div class="input-wrap">
<input id="control-theme-style-light" class="control-theme-style-light" type="radio" name="control-theme-style" value="light" tabindex="-1">
<label for="control-theme-style-light"><span class="label-icon"></span> Light</label>
</div>
<p class="control-theme-style-light-helper form-helper small">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
<hr>
<div class="input-wrap">
<label for="control-theme-radius">Radius</label>
<div class="form-group form-group-block mb-0">
<input id="control-theme-radius" class="control-theme-radius mr-3" type="range" min="0" max="300" value="0" step="5" tabindex="-1">
<div class="control-theme-radius-count form-group-text form-group-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
<button class="control-theme-radius-default button mb-0" tabindex="-1">Default radius</button>
</div>
</div>
</div>
</div>
<div class="menu-content-area menu-content-area-background is-hidden">
@ -1412,35 +1543,35 @@
<label for="control-background-image-opacity">Opacity</label>
<div class="form-group form-group-block mb-0">
<input id="control-background-image-opacity" class="control-background-image-opacity mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
<div class="control-background-image-opacity-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-background-image-opacity-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="input-wrap">
<label for="control-background-image-grayscale">Grayscale</label>
<div class="form-group form-group-block mb-0">
<input id="control-background-image-grayscale" class="control-background-image-grayscale mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
<div class="control-background-image-grayscale-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-background-image-grayscale-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="input-wrap">
<label for="control-background-image-blur">Blur</label>
<div class="form-group form-group-block mb-0">
<input id="control-background-image-blur" class="control-background-image-blur mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
<div class="control-background-image-blur-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-background-image-blur-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="input-wrap">
<label for="control-background-image-accent">Accent overlay</label>
<div class="form-group form-group-block mb-0">
<input id="control-background-image-accent" class="control-background-image-accent mr-3" type="range" min="0" max="90" value="0" tabindex="-1">
<div class="control-background-image-accent-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-background-image-accent-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="input-wrap">
<label for="control-background-image-scale">Size</label>
<div class="form-group form-group-block mb-0">
<input id="control-background-image-scale" class="control-background-image-scale mr-3" type="range" min="100" max="300" value="0" tabindex="-1">
<div class="control-background-image-scale-count form-group-text form-group-medium form-group-radius-left"></div>
<div class="control-background-image-scale-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
</div>

153
src/js/control.js
View File

@ -86,8 +86,8 @@ var control = (function() {
type: "color",
func: function() {
theme.accent();
theme.render.input.picker();
theme.render.input.hex();
theme.render.accent.input.picker();
theme.render.accent.input.hex();
link.groupAndItems();
}
}, {
@ -153,7 +153,7 @@ var control = (function() {
}],
func: function() {
mod.setValue("layout.width", helper.getObject({
object: state.mod.default,
object: state.get.default(),
path: "layout.width"
}));
layout.render.width();
@ -302,7 +302,7 @@ var control = (function() {
}],
func: function() {
mod.setValue("layout.padding", helper.getObject({
object: state.mod.default,
object: state.get.default(),
path: "layout.padding"
}));
layout.render.padding();
@ -370,7 +370,7 @@ var control = (function() {
}],
func: function() {
mod.setValue("layout.gutter", helper.getObject({
object: state.mod.default,
object: state.get.default(),
path: "layout.gutter"
}));
layout.render.gutter();
@ -439,7 +439,7 @@ var control = (function() {
}],
func: function() {
mod.setValue("layout.size", helper.getObject({
object: state.mod.default,
object: state.get.default(),
path: "layout.size"
}));
layout.render.size();
@ -707,7 +707,7 @@ var control = (function() {
}],
func: function() {
mod.setValue("header.greeting.size", helper.getObject({
object: state.mod.default,
object: state.get.default(),
path: "header.greeting.size"
}));
header.render.greeting.size();
@ -802,7 +802,7 @@ var control = (function() {
}],
func: function() {
mod.setValue("header.transitional.size", helper.getObject({
object: state.mod.default,
object: state.get.default(),
path: "header.transitional.size"
}));
header.render.transitional.size();
@ -1021,7 +1021,7 @@ var control = (function() {
}],
func: function() {
mod.setValue("header.clock.size", helper.getObject({
object: state.mod.default,
object: state.get.default(),
path: "header.clock.size"
}));
header.render.clock.size();
@ -1378,7 +1378,7 @@ var control = (function() {
}],
func: function() {
mod.setValue("header.date.size", helper.getObject({
object: state.mod.default,
object: state.get.default(),
path: "header.date.size"
}));
header.render.date.size();
@ -1627,7 +1627,7 @@ var control = (function() {
}],
func: function() {
mod.setValue("header.search.size", helper.getObject({
object: state.mod.default,
object: state.get.default(),
path: "header.search.size"
}));
header.render.search.size();
@ -1726,7 +1726,7 @@ var control = (function() {
}],
func: function() {
mod.setValue("header.button.size", helper.getObject({
object: state.mod.default,
object: state.get.default(),
path: "header.button.size"
}));
header.render.button.size();
@ -1845,7 +1845,7 @@ var control = (function() {
}],
func: function() {
mod.setValue("group.name.size", helper.getObject({
object: state.mod.default,
object: state.get.default(),
path: "group.name.size"
}));
link.render.group.size();
@ -2123,7 +2123,7 @@ var control = (function() {
}],
func: function() {
mod.setValue("link.item.size", helper.getObject({
object: state.mod.default,
object: state.get.default(),
path: "link.item.size"
}));
link.render.item.size();
@ -2215,7 +2215,7 @@ var control = (function() {
type: "button",
func: function() {
mod.setValue("link.item.display.letcon.letter.size", helper.getObject({
object: state.mod.default,
object: state.get.default(),
path: "link.item.display.letcon.letter.size"
}));
link.render.item.display.letter();
@ -2236,7 +2236,7 @@ var control = (function() {
type: "button",
func: function() {
mod.setValue("link.item.display.letcon.icon.size", helper.getObject({
object: state.mod.default,
object: state.get.default(),
path: "link.item.display.letcon.icon.size"
}));
link.render.item.display.icon();
@ -2265,7 +2265,7 @@ var control = (function() {
type: "button",
func: function() {
mod.setValue("link.item.display.name.size", helper.getObject({
object: state.mod.default,
object: state.get.default(),
path: "link.item.display.name.size"
}));
link.render.item.name();
@ -2285,7 +2285,7 @@ var control = (function() {
type: "button",
func: function() {
mod.setValue("link.item.display.rotate", helper.getObject({
object: state.mod.default,
object: state.get.default(),
path: "link.item.display.rotate"
}));
link.render.item.rotate();
@ -2306,7 +2306,7 @@ var control = (function() {
type: "button",
func: function() {
mod.setValue("link.item.display.translate.x", helper.getObject({
object: state.mod.default,
object: state.get.default(),
path: "link.item.display.translate.x"
}));
link.render.item.translate.x();
@ -2327,7 +2327,7 @@ var control = (function() {
type: "button",
func: function() {
mod.setValue("link.item.display.translate.y", helper.getObject({
object: state.mod.default,
object: state.get.default(),
path: "link.item.display.translate.y"
}));
link.render.item.translate.y();
@ -2347,7 +2347,7 @@ var control = (function() {
type: "button",
func: function() {
mod.setValue("link.item.display.gutter", helper.getObject({
object: state.mod.default,
object: state.get.default(),
path: "link.item.display.gutter"
}));
link.render.item.gutter();
@ -2496,8 +2496,8 @@ var control = (function() {
type: "color",
func: function() {
theme.accent();
theme.render.input.quick();
theme.render.input.hex();
theme.render.accent.input.quick();
theme.render.accent.input.hex();
link.groupAndItems();
}
}, {
@ -2507,8 +2507,8 @@ var control = (function() {
valueMod: ["hexTextString"],
func: function() {
theme.accent();
theme.render.input.picker();
theme.render.input.quick();
theme.render.accent.input.picker();
theme.render.accent.input.quick();
link.groupAndItems();
}
}, {
@ -2541,12 +2541,113 @@ var control = (function() {
type: "button",
func: function() {
mod.setValue("theme.radius", helper.getObject({
object: state.mod.default,
object: state.get.default(),
path: "theme.radius"
}));
theme.render.radius();
render.update();
}
}, {
element: helper.e(".control-theme-color-rgb-picker"),
path: "theme.color.rgb",
type: "color",
func: function() {
theme.mod.color.hsl();
theme.render.color.shade();
theme.render.color.range.hsl();
theme.render.color.range.rgb();
theme.render.color.input.hex();
}
}, {
element: helper.e(".control-theme-color-rgb-hex"),
path: "theme.color.rgb",
type: "text",
valueMod: ["hexTextString"],
func: function() {
theme.mod.color.hsl();
theme.render.color.shade();
theme.render.color.range.hsl();
theme.render.color.range.rgb();
theme.render.color.input.picker();
}
}, {
element: helper.e(".control-theme-color-rgb-default"),
type: "button",
func: function() {
mod.setValue("theme.color.rgb", helper.getObject({
object: state.get.default(),
path: "theme.color.rgb"
}));
theme.mod.color.hsl();
theme.render.color.shade();
render.update();
}
}, {
element: helper.e(".control-theme-color-hsl-h"),
path: "theme.color.hsl.h",
type: "range",
rangeCountElement: helper.e(".control-theme-color-hsl-h-count"),
func: function() {
theme.mod.color.rgb();
theme.render.color.shade();
render.range.count(this);
render.update();
}
}, {
element: helper.e(".control-theme-color-hsl-s"),
path: "theme.color.hsl.s",
type: "range",
rangeCountElement: helper.e(".control-theme-color-hsl-s-count"),
func: function() {
theme.mod.color.rgb();
theme.render.color.shade();
render.range.count(this);
render.update();
}
}, {
element: helper.e(".control-theme-color-hsl-l"),
path: "theme.color.hsl.l",
type: "range",
rangeCountElement: helper.e(".control-theme-color-hsl-l-count"),
func: function() {
theme.mod.color.rgb();
theme.render.color.shade();
render.range.count(this);
render.update();
}
}, {
element: helper.e(".control-theme-color-rgb-r"),
path: "theme.color.rgb.r",
type: "range",
rangeCountElement: helper.e(".control-theme-color-rgb-r-count"),
func: function() {
theme.mod.color.hsl();
theme.render.color.shade();
render.range.count(this);
render.update();
}
}, {
element: helper.e(".control-theme-color-rgb-g"),
path: "theme.color.rgb.g",
type: "range",
rangeCountElement: helper.e(".control-theme-color-rgb-g-count"),
func: function() {
theme.mod.color.hsl();
theme.render.color.shade();
render.range.count(this);
render.update();
}
}, {
element: helper.e(".control-theme-color-rgb-b"),
path: "theme.color.rgb.b",
type: "range",
rangeCountElement: helper.e(".control-theme-color-rgb-b-count"),
func: function() {
theme.mod.color.hsl();
theme.render.color.shade();
render.range.count(this);
render.update();
}
}, {
element: helper.e(".control-theme-accent-random-active"),
path: "theme.accent.random.active",

166
src/js/helper.js
View File

@ -659,6 +659,169 @@ var helper = (function() {
};
};
var convert = {
rgb: {},
hsl: {},
hex: {}
};
convert.rgb.hsl = function(rgb) {
const r = rgb[0] / 255;
const g = rgb[1] / 255;
const b = rgb[2] / 255;
const min = Math.min(r, g, b);
const max = Math.max(r, g, b);
const delta = max - min;
let h;
let s;
if (max === min) {
h = 0;
} else if (r === max) {
h = (g - b) / delta;
} else if (g === max) {
h = 2 + (b - r) / delta;
} else if (b === max) {
h = 4 + (r - g) / delta;
}
h = Math.min(h * 60, 360);
if (h < 0) {
h += 360;
}
const l = (min + max) / 2;
if (max === min) {
s = 0;
} else if (l <= 0.5) {
s = delta / (max + min);
} else {
s = delta / (2 - max - min);
}
return [h, s * 100, l * 100];
};
convert.rgb.lab = function(rgb) {
const xyz = convert.rgb.xyz(rgb);
let x = xyz[0];
let y = xyz[1];
let z = xyz[2];
x /= 95.047;
y /= 100;
z /= 108.883;
x = x > 0.008856 ? (x ** (1 / 3)) : (7.787 * x) + (16 / 116);
y = y > 0.008856 ? (y ** (1 / 3)) : (7.787 * y) + (16 / 116);
z = z > 0.008856 ? (z ** (1 / 3)) : (7.787 * z) + (16 / 116);
const l = (116 * y) - 16;
const a = 500 * (x - y);
const b = 200 * (y - z);
return [l, a, b];
};
convert.rgb.xyz = function(rgb) {
let r = rgb[0] / 255;
let g = rgb[1] / 255;
let b = rgb[2] / 255;
// Assume sRGB
r = r > 0.04045 ? (((r + 0.055) / 1.055) ** 2.4) : (r / 12.92);
g = g > 0.04045 ? (((g + 0.055) / 1.055) ** 2.4) : (g / 12.92);
b = b > 0.04045 ? (((b + 0.055) / 1.055) ** 2.4) : (b / 12.92);
const x = (r * 0.4124) + (g * 0.3576) + (b * 0.1805);
const y = (r * 0.2126) + (g * 0.7152) + (b * 0.0722);
const z = (r * 0.0193) + (g * 0.1192) + (b * 0.9505);
return [x * 100, y * 100, z * 100];
};
convert.rgb.hex = function(args) {
const integer = ((Math.round(args[0]) & 0xFF) << 16) +
((Math.round(args[1]) & 0xFF) << 8) +
(Math.round(args[2]) & 0xFF);
const string = integer.toString(16).toUpperCase();
return '000000'.substring(string.length) + string;
};
convert.hsl.rgb = function(hsl) {
const h = hsl[0] / 360;
const s = hsl[1] / 100;
const l = hsl[2] / 100;
let t2;
let t3;
let val;
if (s === 0) {
val = l * 255;
return [val, val, val];
}
if (l < 0.5) {
t2 = l * (1 + s);
} else {
t2 = l + s - l * s;
}
const t1 = 2 * l - t2;
const rgb = [0, 0, 0];
for (let i = 0; i < 3; i++) {
t3 = h + 1 / 3 * -(i - 1);
if (t3 < 0) {
t3++;
}
if (t3 > 1) {
t3--;
}
if (6 * t3 < 1) {
val = t1 + (t2 - t1) * 6 * t3;
} else if (2 * t3 < 1) {
val = t2;
} else if (3 * t3 < 2) {
val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
} else {
val = t1;
}
rgb[i] = val * 255;
}
return rgb;
};
convert.hex.rgb = function(args) {
const match = args.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);
if (!match) {
return [0, 0, 0];
}
let colorString = match[0];
if (match[0].length === 3) {
colorString = colorString.split('').map(char => {
return char + char;
}).join('');
}
const integer = parseInt(colorString, 16);
const r = (integer >> 16) & 0xFF;
const g = (integer >> 8) & 0xFF;
const b = integer & 0xFF;
return [r, g, b];
};
// exposed methods
return {
e: e,
@ -686,7 +849,8 @@ var helper = (function() {
ordinalWords: ordinalWords,
ordinalNumber: ordinalNumber,
isJsonString: isJsonString,
isHexNumber: isHexNumber
isHexNumber: isHexNumber,
convert: convert
};
})();

26
src/js/state.js
View File

@ -220,6 +220,18 @@ var state = (function() {
style: "any"
}
},
color: {
hsl: {
h: 222,
s: 14,
l: 56
},
rgb: {
r: 129,
g: 138,
b: 160
}
},
style: "dark",
radius: 0.25
},
@ -321,6 +333,18 @@ var state = (function() {
width: 80
},
theme: {
color: {
hsl: {
h: 222,
s: 14,
l: 56
},
rgb: {
r: 129,
g: 138,
b: 160
}
},
radius: 0.25
}
};
@ -330,7 +354,7 @@ var state = (function() {
return mod.current;
},
default: function() {
return mod.default;
return JSON.parse(JSON.stringify(mod.default));
}
};

113
src/js/theme.js
View File

@ -2,7 +2,7 @@ var theme = (function() {
var mod = {};
mod.theme = {
mod.style = {
light: function() {
helper.setObject({
object: state.get.current(),
@ -16,13 +16,21 @@ var theme = (function() {
path: "theme.style",
newValue: "dark"
});
}
};
mod.color = {
hsl: function() {
var hsl = helper.convert.rgb.hsl([state.get.current().theme.color.rgb.r, state.get.current().theme.color.rgb.g, state.get.current().theme.color.rgb.b]);
state.get.current().theme.color.hsl.h = parseInt(hsl[0], 10);
state.get.current().theme.color.hsl.s = parseInt(hsl[1], 10);
state.get.current().theme.color.hsl.l = parseInt(hsl[2], 10);
},
toggle: function() {
if (state.get.current().theme.style == "dark") {
mod.theme.light();
} else if (state.get.current().theme.style == "light") {
mod.theme.dark();
};
rgb: function() {
var rgb = helper.convert.hsl.rgb([state.get.current().theme.color.hsl.h, state.get.current().theme.color.hsl.s, state.get.current().theme.color.hsl.l]);
state.get.current().theme.color.rgb.r = parseInt(rgb[0], 10);
state.get.current().theme.color.rgb.g = parseInt(rgb[1], 10);
state.get.current().theme.color.rgb.b = parseInt(rgb[2], 10);
}
};
@ -103,23 +111,96 @@ var theme = (function() {
helper.e(".control-theme-accent-current-picker").value = helper.rgbToHex(randomColor);
helper.e(".control-theme-accent-current-hex").value = helper.rgbToHex(randomColor);
};
},
input: {
quick: function() {
helper.e(".control-theme-accent-current-quick").value = helper.rgbToHex(state.get.current().theme.accent.current);
},
picker: function() {
helper.e(".control-theme-accent-current-picker").value = helper.rgbToHex(state.get.current().theme.accent.current);
},
hex: function() {
helper.e(".control-theme-accent-current-hex").value = helper.rgbToHex(state.get.current().theme.accent.current);
}
}
};
render.input = {
quick: function() {
helper.e(".control-theme-accent-current-quick").value = helper.rgbToHex(state.get.current().theme.accent.current);
render.color = {
shade: function() {
var shadeSteps = 10;
var sMod = 0;
var lMod = 4;
var html = helper.e("html");
var hsl = helper.convert.rgb.hsl([state.get.current().theme.color.rgb.r, state.get.current().theme.color.rgb.g, state.get.current().theme.color.rgb.b]);
// base color
html.style.setProperty("--theme-shade", state.get.current().theme.color.rgb.r + ", " + state.get.current().theme.color.rgb.g + ", " + state.get.current().theme.color.rgb.b);
for (var i = 1; i <= shadeSteps; i++) {
var h = hsl[0];
var s = (hsl[1] - (sMod * i));
var l = (hsl[2] - (lMod * i));
var rgb = helper.convert.hsl.rgb([h, s, l]);
var number;
if (i < 10) {
number = "0" + i;
} else {
number = i
};
html.style.setProperty("--theme-shade-neg-" + number, parseInt(rgb[0], 10) + ", " + parseInt(rgb[1], 10) + ", " + parseInt(rgb[2], 10));
};
for (var i = 1; i <= shadeSteps; i++) {
var h = hsl[0];
var s = (hsl[1] + (sMod * i));
var l = (hsl[2] + (lMod * i));
var rgb = helper.convert.hsl.rgb([h, s, l]);
var number;
if (i < 10) {
number = "0" + i;
} else {
number = i
};
html.style.setProperty("--theme-shade-pos-" + number, parseInt(rgb[0], 10) + ", " + parseInt(rgb[1], 10) + ", " + parseInt(rgb[2], 10));
};
},
picker: function() {
helper.e(".control-theme-accent-current-picker").value = helper.rgbToHex(state.get.current().theme.accent.current);
input: {
picker: function() {
helper.e(".control-theme-color-rgb-picker").value = helper.rgbToHex(state.get.current().theme.color.rgb);
},
hex: function() {
helper.e(".control-theme-color-rgb-hex").value = helper.rgbToHex(state.get.current().theme.color.rgb);
}
},
hex: function() {
helper.e(".control-theme-accent-current-hex").value = helper.rgbToHex(state.get.current().theme.accent.current);
range: {
hsl: function() {
helper.e(".control-theme-color-hsl-h").value = state.get.current().theme.color.hsl.h;
helper.e(".control-theme-color-hsl-s").value = state.get.current().theme.color.hsl.s;
helper.e(".control-theme-color-hsl-l").value = state.get.current().theme.color.hsl.l;
helper.e(".control-theme-color-hsl-h-count").textContent = state.get.current().theme.color.hsl.h;
helper.e(".control-theme-color-hsl-s-count").textContent = state.get.current().theme.color.hsl.s;
helper.e(".control-theme-color-hsl-l-count").textContent = state.get.current().theme.color.hsl.l;
},
rgb: function() {
helper.e(".control-theme-color-rgb-r").value = state.get.current().theme.color.rgb.r;
helper.e(".control-theme-color-rgb-g").value = state.get.current().theme.color.rgb.g;
helper.e(".control-theme-color-rgb-b").value = state.get.current().theme.color.rgb.b;
helper.e(".control-theme-color-rgb-r-count").textContent = state.get.current().theme.color.rgb.r;
helper.e(".control-theme-color-rgb-g-count").textContent = state.get.current().theme.color.rgb.g;
helper.e(".control-theme-color-rgb-b-count").textContent = state.get.current().theme.color.rgb.b;
}
}
};
var toggle = function() {
mod.theme.toggle();
if (state.get.current().theme.style == "dark") {
mod.style.light();
} else if (state.get.current().theme.style == "light") {
mod.style.dark();
};
render.theme();
};
@ -129,6 +210,7 @@ var theme = (function() {
var init = function() {
render.theme();
render.color.shade();
render.accent.random();
render.accent.color();
render.radius();
@ -137,6 +219,7 @@ var theme = (function() {
// exposed methods
return {
init: init,
mod: mod,
render: render,
toggle: toggle,
accent: accent

15
src/js/update.js
View File

@ -691,6 +691,21 @@ var update = (function() {
data.state.link.edit = false;
data.state.group.edit = false;
return data;
},
"4.30.0": function(data) {
data.state.theme.color = {
hsl: {
h: 222,
s: 14,
l: 56
},
rgb: {
r: 129,
g: 138,
b: 160
}
};
return data;
}
};

2
src/js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() {
var current = "4.2.1";
var current = "4.3.0";
var name = "Enchanting Aardvark";

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.2.1",
"version": "4.3.0",
"manifest_version": 2,
"chrome_url_overrides": {
"newtab": "index.html"