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

[feature] add range input controls

Browse Source
This commit is contained in:
Kombie 2020-01-20 17:19:47 +00:00 committed by GitHub
parent 5d4806f7db
commit 5904afb88c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 2513 additions and 721 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.24.0",
"version": "4.25.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "nighttab",
"version": "4.24.0",
"version": "4.25.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": {

14
src/css/form.css
View File

@ -50,6 +50,10 @@
display: inline-block;
}
.form-inline .form-inline {
margin: 0;
}
.form-inline-spacer>*.form-wrap:not(:last-child) {
margin-right: calc(var(--form-wrap-space) * 3);
}
@ -1323,10 +1327,14 @@ input[type="range"]:disabled::-moz-range-progress {
.form-group .form-wrap {
margin-top: 0;
margin-bottom: 0;
margin-right: var(--form-wrap-space);
display: flex;
align-items: center;
}
.form-group .form-group-text,
.form-group .button,
.form-group .button:after,
.form-group>select,
.form-group>input[type="email"],
.form-group>input[type="number"],
@ -1346,10 +1354,6 @@ input[type="range"]:disabled::-moz-range-progress {
z-index: 1;
}
.form-group .button:after {
border-radius: 0;
}
.form-group .form-group-text {
flex-shrink: 0;
}
@ -1453,6 +1457,7 @@ input[type="range"]:disabled::-moz-range-progress {
.form-group .form-group-radius-left.form-group-text,
.form-group .form-group-radius-left.button,
.form-group .form-group-radius-left.button:after,
.form-group>select.form-group-radius-left,
.form-group>input.form-group-radius-left[type="email"],
.form-group>input.form-group-radius-left[type="number"],
@ -1468,6 +1473,7 @@ input[type="range"]:disabled::-moz-range-progress {
.form-group .form-group-radius-right.form-group-text,
.form-group .form-group-radius-right.button,
.form-group .form-group-radius-right.button:after,
.form-group>select.form-group-radius-right,
.form-group>input.form-group-radius-right[type="email"],
.form-group>input.form-group-radius-right[type="number"],

347
src/index.html
View File

@ -112,12 +112,12 @@
<div class="header-button-body">
<div class="form-group form-group-nested-button">
<div class="form-input-button input-color-dot input-color-dot-shade">
<input id="control-theme-color-rgb-quick" class="control-theme-color-rgb-quick" type="color" value="#000000" tabindex="1">
<label for="control-theme-color-rgb-quick">Colour</label>
<input id="control-theme-color-rgb-color" class="control-theme-color-rgb-color" type="color" value="#000000" tabindex="1">
<label for="control-theme-color-rgb-color">Colour</label>
</div>
<div class="form-input-button input-color-dot input-color-dot-accent">
<input id="control-theme-accent-rgb-quick" class="control-theme-accent-rgb-quick" type="color" value="#000000" tabindex="1">
<label for="control-theme-accent-rgb-quick">Accent</label>
<input id="control-theme-accent-rgb-color" class="control-theme-accent-rgb-color" type="color" value="#000000" tabindex="1">
<label for="control-theme-accent-rgb-color">Accent</label>
</div>
</div>
</div>
@ -165,10 +165,10 @@
</div>
<div class="menu-item-form">
<div class="form-wrap">
<label for="control-layout-size">Size</label>
<label for="control-layout-size-range">Size</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-layout-size-range" class="control-layout-size-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-layout-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-layout-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -186,10 +186,10 @@
</div>
<div class="menu-item-form">
<div class="form-wrap">
<label for="control-layout-width">Width</label>
<label for="control-layout-width-range">Width</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-layout-width-range" class="control-layout-width-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-layout-width-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-layout-width-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -268,10 +268,10 @@
</div>
<div class="menu-item-form">
<div class="form-wrap">
<label for="control-layout-padding">Padding outside Header and Bookmark Area</label>
<label for="control-layout-padding-range">Padding outside Header and Bookmark Area</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-layout-padding-range" class="control-layout-padding-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-layout-padding-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-layout-padding-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -283,10 +283,10 @@
</div>
<div class="menu-item-form">
<div class="form-wrap">
<label for="control-layout-gutter">Gutter between Header and Bookmark items</label>
<label for="control-layout-gutter-range">Gutter between Header and Bookmark items</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-layout-gutter-range" class="control-layout-gutter-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-layout-gutter-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-layout-gutter-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -317,10 +317,10 @@
</div>
<div class="menu-item-form">
<div class="form-wrap">
<label for="control-header-area-width">Width</label>
<label for="control-header-area-width-range">Width</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-header-area-width-range" class="control-header-area-width-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-header-area-width-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-header-area-width-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -412,10 +412,10 @@
</div>
<hr>
<div class="form-wrap">
<label for="control-header-greeting-size">Size</label>
<label for="control-header-greeting-size-range">Size</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-header-greeting-size-range" class="control-header-greeting-size-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-header-greeting-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-header-greeting-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -447,10 +447,10 @@
</div>
<hr>
<div class="form-wrap">
<label for="control-header-transitional-size">Size</label>
<label for="control-header-transitional-size-range">Size</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-header-transitional-size-range" class="control-header-transitional-size-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-header-transitional-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-header-transitional-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -529,10 +529,10 @@
</div>
<hr>
<div class="form-wrap">
<label for="control-header-clock-size">Size</label>
<label for="control-header-clock-size-range">Size</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-header-clock-size-range" class="control-header-clock-size-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-header-clock-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-header-clock-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -695,10 +695,10 @@
</div>
<hr>
<div class="form-wrap">
<label for="control-header-date-size">Size</label>
<label for="control-header-date-size-range">Size</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-header-date-size-range" class="control-header-date-size-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-header-date-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-header-date-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -735,10 +735,9 @@
<div class="form-wrap">
<div class="form-indent">
<div class="form-wrap">
<label for="control-header-search-width">Width</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-header-search-width-range" class="control-header-search-width-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-header-search-width-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-header-search-width-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -818,10 +817,10 @@
</div>
<hr>
<div class="form-wrap">
<label for="control-header-search-size">Size</label>
<label for="control-header-search-size-range">Size</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-header-search-size-range" class="control-header-search-size-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-header-search-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-header-search-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -869,10 +868,10 @@
</div>
<hr>
<div class="form-wrap">
<label for="control-header-button-size">Size</label>
<label for="control-header-button-size-range">Size</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-header-button-size-range" class="control-header-button-size-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-header-button-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-header-button-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -884,19 +883,19 @@
</div>
<div class="menu-item-form">
<div class="form-wrap">
<label for="control-header-border-top">Top</label>
<label for="control-header-border-top-range">Top</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-header-border-top-range" class="control-header-border-top-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-header-border-top-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-header-border-top-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-header-border-bottom">Bottom</label>
<label for="control-header-border-bottom-range">Bottom</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-header-border-bottom-range" class="control-header-border-bottom-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-header-border-bottom-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-header-border-bottom-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -967,18 +966,18 @@
<div class="form-indent">
<div class="form-wrap">
<div class="form-group form-group-block">
<input id="control-header-color-rgb-picker" class="form-group-item-half control-header-color-rgb-picker" type="color" value="#000000" tabindex="1">
<input id="control-header-color-rgb-hex" class="form-group-item-half control-header-color-rgb-hex" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<input id="control-header-color-rgb-range" class="form-group-item-half control-header-color-rgb-range" type="color" value="#000000" tabindex="1">
<input id="control-header-color-rgb-text" class="form-group-item-half control-header-color-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
</div>
</div>
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-header-color-opacity">Opacity</label>
<label for="control-header-color-opacity-range">Opacity</label>
<div class="form-group form-group-block">
<input id="control-header-color-opacity" class="control-header-color-opacity mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
<div class="control-header-color-opacity-count form-group-text form-group-item-medium form-group-radius-left"></div>
<input id="control-header-color-opacity-range" class="control-header-color-opacity-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-header-color-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-header-color-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -1009,10 +1008,10 @@
<div class="form-wrap">
<div class="form-indent">
<div class="form-wrap">
<label for="control-group-name-size">Name Size</label>
<label for="control-group-name-size-range">Name Size</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-group-name-size-range" class="control-group-name-size-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-group-name-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-group-name-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -1066,10 +1065,10 @@
</div>
<div class="menu-item-form">
<div class="form-wrap">
<label for="control-group-border">Between groups</label>
<label for="control-group-border-range">Between groups</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-group-border-range" class="control-group-border-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-group-border-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-group-border-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -1087,10 +1086,10 @@
</div>
<div class="menu-item-form">
<div class="form-wrap">
<label for="control-link-area-width">Width</label>
<label for="control-link-area-width-range">Width</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-link-area-width-range" class="control-link-area-width-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-area-width-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-link-area-width-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -1137,10 +1136,10 @@
<div class="form-wrap">
<div class="form-indent">
<div class="form-wrap">
<label for="control-link-item-size">Bookmark Size</label>
<label for="control-link-item-size-range">Bookmark Size</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-link-item-size-range" class="control-link-item-size-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-link-item-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -1190,37 +1189,37 @@
</div>
<hr>
<div class="form-wrap">
<label for="control-link-item-display-rotate">Content rotation</label>
<label for="control-link-item-display-rotate-range">Content rotation</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-link-item-display-rotate-range" class="control-link-item-display-rotate-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-display-rotate-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-link-item-display-rotate-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-link-item-display-translate-x">Content horizontally offset</label>
<label for="control-link-item-display-translate-x-range">Content horizontally offset</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-link-item-display-translate-x-range" class="control-link-item-display-translate-x-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-display-translate-x-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-link-item-display-translate-x-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-link-item-display-translate-y">Content vertically offset</label>
<label for="control-link-item-display-translate-y-range">Content vertically offset</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-link-item-display-translate-y-range" class="control-link-item-display-translate-y-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-display-translate-y-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-link-item-display-translate-y-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-link-item-display-gutter">Content gutter</label>
<label for="control-link-item-display-gutter-range">Content gutter</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-link-item-display-gutter-range" class="control-link-item-display-gutter-range mr-3" type="range" value="0" tabindex="1">
<input class="control-link-item-display-gutter-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-link-item-display-gutter-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -1262,19 +1261,19 @@
<div class="form-wrap">
<div class="form-indent">
<div class="form-wrap">
<label for="control-link-item-display-letcon-letter-size">Letter size</label>
<label for="control-link-item-display-letcon-letter-size-range">Letter size</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-link-item-display-letcon-letter-size-range" class="control-link-item-display-letcon-letter-size-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-display-letcon-letter-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-link-item-display-letcon-letter-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-link-item-display-letcon-icon-size">Icon size</label>
<label for="control-link-item-display-letcon-icon-size-range">Icon size</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-link-item-display-letcon-icon-size-range" class="control-link-item-display-letcon-icon-size-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-display-letcon-icon-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-link-item-display-letcon-icon-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -1288,10 +1287,10 @@
<div class="form-wrap">
<div class="form-indent">
<div class="form-wrap">
<label for="control-link-item-display-name-size">Name size</label>
<label for="control-link-item-display-name-size-range">Name size</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-link-item-display-name-size-range" class="control-link-item-display-name-size-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-display-name-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-link-item-display-name-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -1355,8 +1354,8 @@
<div class="form-indent">
<div class="form-wrap">
<div class="form-group form-group-block">
<input id="control-link-item-color-rgb-picker" class="form-group-item-half control-link-item-color-rgb-picker" type="color" value="#000000" tabindex="1">
<input id="control-link-item-color-rgb-hex" class="form-group-item-half control-link-item-color-rgb-hex" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<input id="control-link-item-color-rgb-range" class="form-group-item-half control-link-item-color-rgb-range" type="color" value="#000000" tabindex="1">
<input id="control-link-item-color-rgb-text" class="form-group-item-half control-link-item-color-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
</div>
</div>
</div>
@ -1369,10 +1368,10 @@
</div>
<div class="menu-item-form">
<div class="form-wrap">
<label for="control-link-item-border">All sides</label>
<label for="control-link-item-border-range">All sides</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-link-item-border-range" class="control-link-item-border-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-border-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-link-item-border-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -1524,10 +1523,11 @@
<div class="form-wrap">
<div class="form-indent">
<div class="form-wrap">
<label for="control-theme-font-display-weight">Font weight</label>
<label for="control-theme-font-display-weight-range">Font weight</label>
<div class="form-group form-group-block">
<input id="control-theme-font-display-weight" class="control-theme-font-display-weight mr-3" type="range" min="100" max="900" step="100" value="1" tabindex="-1">
<div class="control-theme-font-display-weight-count form-group-text form-group-item-medium form-group-radius-left"></div>
<input id="control-theme-font-display-weight-range" class="control-theme-font-display-weight-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-font-display-weight-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-theme-font-display-weight-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<div class="form-wrap">
@ -1542,15 +1542,22 @@
</div>
<hr>
<div class="form-wrap">
<input id="control-theme-font-display-style-normal" class="control-theme-font-display-style-normal" type="radio" name="control-theme-font-display-style" value="normal" tabindex="-1">
<label for="control-theme-font-display-style-normal"><span class="label-icon"></span> Normal</label>
<label>Font style</label>
</div>
<div class="form-wrap">
<input id="control-theme-font-display-style-italic" class="control-theme-font-display-style-italic" type="radio" name="control-theme-font-display-style" value="italic" tabindex="-1">
<label for="control-theme-font-display-style-italic"><span class="label-icon"></span> Italic</label>
</div>
<div class="form-wrap">
<button class="control-theme-font-display-weight-style-default button" tabindex="-1">Default weight and style</button>
<div class="form-inline">
<div class="form-inline form-inline-spacer">
<div class="form-wrap">
<input id="control-theme-font-display-style-normal" class="control-theme-font-display-style-normal" name="control-theme-font-display-style" type="radio" value="normal" tabindex="-1">
<label for="control-theme-font-display-style-normal"><span class="label-icon"></span> Normal</label>
</div>
<div class="form-wrap">
<input id="control-theme-font-display-style-italic" class="control-theme-font-display-style-italic" type="radio" name="control-theme-font-display-style" value="italic" tabindex="-1">
<label for="control-theme-font-display-style-italic"><span class="label-icon"></span> Italic</label>
</div>
</div>
<div class="form-wrap ml-auto">
<button class="control-theme-font-display-style-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
</div>
</div>
@ -1578,8 +1585,9 @@
<div class="form-wrap">
<label for="control-theme-font-ui-weight">Font weight</label>
<div class="form-group form-group-block">
<input id="control-theme-font-ui-weight" class="control-theme-font-ui-weight mr-3" type="range" min="100" max="900" step="100" value="1" tabindex="-1">
<div class="control-theme-font-ui-weight-count form-group-text form-group-item-medium form-group-radius-left"></div>
<input id="control-theme-font-ui-weight-range" class="control-theme-font-ui-weight-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-font-ui-weight-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-theme-font-ui-weight-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<div class="form-wrap">
@ -1594,15 +1602,22 @@
</div>
<hr>
<div class="form-wrap">
<input id="control-theme-font-ui-style-normal" class="control-theme-font-ui-style-normal" type="radio" name="control-theme-font-ui-style" value="normal" tabindex="-1">
<label for="control-theme-font-ui-style-normal"><span class="label-icon"></span> Normal</label>
<label>Font style</label>
</div>
<div class="form-wrap">
<input id="control-theme-font-ui-style-italic" class="control-theme-font-ui-style-italic" type="radio" name="control-theme-font-ui-style" value="italic" tabindex="-1">
<label for="control-theme-font-ui-style-italic"><span class="label-icon"></span> Italic</label>
</div>
<div class="form-wrap">
<button class="control-theme-font-ui-weight-style-default button" tabindex="-1">Default weight and style</button>
<div class="form-inline">
<div class="form-inline form-inline-spacer">
<div class="form-wrap">
<input id="control-theme-font-ui-style-normal" class="control-theme-font-ui-style-normal" type="radio" name="control-theme-font-ui-style" value="normal" tabindex="-1">
<label for="control-theme-font-ui-style-normal"><span class="label-icon"></span> Normal</label>
</div>
<div class="form-wrap">
<input id="control-theme-font-ui-style-italic" class="control-theme-font-ui-style-italic" type="radio" name="control-theme-font-ui-style" value="italic" tabindex="-1">
<label for="control-theme-font-ui-style-italic"><span class="label-icon"></span> Italic</label>
</div>
</div>
<div class="form-wrap ml-auto">
<button class="control-theme-font-ui-style-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
</div>
</div>
@ -1696,10 +1711,10 @@
</div>
<hr>
<div class="form-wrap">
<label for="control-theme-color-rgb-picker">Primary colour</label>
<label for="control-theme-color-rgb-range">Primary colour</label>
<div class="form-group form-group-block">
<input id="control-theme-color-rgb-picker" class="form-group-item-half control-theme-color-rgb-picker" type="color" value="#000000" tabindex="1">
<input id="control-theme-color-rgb-hex" class="form-group-item-half control-theme-color-rgb-hex" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<input id="control-theme-color-rgb-range" class="form-group-item-half control-theme-color-rgb-range" type="color" value="#000000" tabindex="1">
<input id="control-theme-color-rgb-text" class="form-group-item-half control-theme-color-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<button class="control-theme-color-rgb-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -1708,62 +1723,62 @@
</div>
<hr>
<div class="form-wrap">
<label for="control-theme-color-hsl-h">Hue</label>
<label for="control-theme-color-hsl-h-range">Hue</label>
<div class="form-group form-group-block">
<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>
<input id="control-theme-color-hsl-h-range" class="control-theme-color-hsl-h-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-color-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<label for="control-theme-color-hsl-s">Saturation</label>
<label for="control-theme-color-hsl-s-range">Saturation</label>
<div class="form-group form-group-block">
<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>
<input id="control-theme-color-hsl-s-range" class="control-theme-color-hsl-s-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-color-hsl-s-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<label for="control-theme-color-hsl-l">Lightness</label>
<label for="control-theme-color-hsl-l-range">Lightness</label>
<div class="form-group form-group-block">
<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>
<input id="control-theme-color-hsl-l-range" class="control-theme-color-hsl-l-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-color-hsl-l-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-theme-color-rgb-r">Red</label>
<label for="control-theme-color-rgb-r-range">Red</label>
<div class="form-group form-group-block">
<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>
<input id="control-theme-color-rgb-r-range" class="control-theme-color-rgb-r-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-color-rgb-r-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<label for="control-theme-color-rgb-g">Green</label>
<label for="control-theme-color-rgb-g-range">Green</label>
<div class="form-group form-group-block">
<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>
<input id="control-theme-color-rgb-g-range" class="control-theme-color-rgb-g-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-color-rgb-g-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<label for="control-theme-color-rgb-b">Blue</label>
<label for="control-theme-color-rgb-b-range">Blue</label>
<div class="form-group form-group-block">
<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>
<input id="control-theme-color-rgb-b-range" class="control-theme-color-rgb-b-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-color-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-theme-color-contrast-light">Light shade contrast</label>
<label for="control-theme-color-contrast-light-range">Light shade contrast</label>
<div class="form-group form-group-block">
<input id="control-theme-color-contrast-light" class="control-theme-color-contrast-light mr-3" type="range" min="100" max="800" value="400" step="10" tabindex="-1">
<div class="control-theme-color-contrast-light-count form-group-text form-group-item-medium form-group-radius-left"></div>
<input id="control-theme-color-contrast-light-range" class="control-theme-color-contrast-light-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-color-contrast-light-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-theme-color-contrast-light-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<div class="form-wrap">
<label for="control-theme-color-contrast-dark">Dark shade contrast</label>
<label for="control-theme-color-contrast-dark-range">Dark shade contrast</label>
<div class="form-group form-group-block">
<input id="control-theme-color-contrast-dark" class="control-theme-color-contrast-dark mr-3" type="range" min="100" max="800" value="400" step="10" tabindex="-1">
<div class="control-theme-color-contrast-dark-count form-group-text form-group-item-medium form-group-radius-left"></div>
<input id="control-theme-color-contrast-dark-range" class="control-theme-color-contrast-dark-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-color-contrast-dark-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-theme-color-contrast-dark-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -1775,10 +1790,10 @@
</div>
<div class="menu-item-form">
<div class="form-wrap">
<label for="control-theme-accent-rgb-picker">Colour</label>
<label for="control-theme-accent-rgb-range">Colour</label>
<div class="form-group form-group-block">
<input id="control-theme-accent-rgb-picker" class="form-group-item-half control-theme-accent-rgb-picker" type="color" value="#000000" tabindex="1">
<input id="control-theme-accent-rgb-hex" class="form-group-item-half control-theme-accent-rgb-hex" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<input id="control-theme-accent-rgb-range" class="form-group-item-half control-theme-accent-rgb-range" type="color" value="#000000" tabindex="1">
<input id="control-theme-accent-rgb-text" class="form-group-item-half control-theme-accent-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<button class="control-theme-accent-rgb-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -1825,10 +1840,10 @@
</div>
<div class="menu-item-form">
<div class="form-wrap">
<label for="control-theme-radius">All corners</label>
<label for="control-theme-radius-range">All corners</label>
<div class="form-group form-group-block">
<input id="control-theme-radius" class="control-theme-radius mr-3" type="range" min="0" max="400" value="0" step="5" tabindex="-1">
<div class="control-theme-radius-count form-group-text form-group-item-medium form-group-radius-left"></div>
<input id="control-theme-radius-range" class="control-theme-radius-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-radius-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-theme-radius-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -1840,10 +1855,10 @@
</div>
<div class="menu-item-form">
<div class="form-wrap">
<label for="control-theme-shadow">Size</label>
<label for="control-theme-shadow-range">Size</label>
<div class="form-group form-group-block">
<input id="control-theme-shadow" class="control-theme-shadow mr-3" type="range" min="0" max="300" value="0" step="25" tabindex="-1">
<div class="control-theme-shadow-count form-group-text form-group-item-medium form-group-radius-left"></div>
<input id="control-theme-shadow-range" class="control-theme-shadow-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-shadow-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-theme-shadow-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -1855,10 +1870,10 @@
</div>
<div class="menu-item-form">
<div class="form-wrap">
<label for="control-theme-shade-opacity">Opacity</label>
<label for="control-theme-shade-opacity-range">Opacity</label>
<div class="form-group form-group-block">
<input id="control-theme-shade-opacity" class="control-theme-shade-opacity mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
<div class="control-theme-shade-opacity-count form-group-text form-group-item-medium form-group-radius-left"></div>
<input id="control-theme-shade-opacity-range" class="control-theme-shade-opacity-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-shade-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-theme-shade-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
@ -1896,8 +1911,8 @@
<div class="form-indent">
<div class="form-wrap">
<div class="form-group form-group-block">
<input id="control-background-color-rgb-picker" class="form-group-item-half control-background-color-rgb-picker" type="color" value="#000000" tabindex="1">
<input id="control-background-color-rgb-hex" class="form-group-item-half control-background-color-rgb-hex" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<input id="control-background-color-rgb-range" class="form-group-item-half control-background-color-rgb-range" type="color" value="#000000" tabindex="1">
<input id="control-background-color-rgb-text" class="form-group-item-half control-background-color-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
</div>
</div>
</div>
@ -1965,42 +1980,42 @@
</div>
<hr>
<div class="form-wrap">
<label for="control-background-image-opacity">Opacity</label>
<label for="control-background-image-opacity-range">Opacity</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-background-image-opacity-range" class="control-background-image-opacity-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-image-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-background-image-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<div class="form-wrap">
<label for="control-background-image-grayscale">Grayscale</label>
<label for="control-background-image-grayscale-range">Grayscale</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-background-image-grayscale-range" class="control-background-image-grayscale-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-image-grayscale-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-background-image-grayscale-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<div class="form-wrap">
<label for="control-background-image-blur">Blur</label>
<label for="control-background-image-blur-range">Blur</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-background-image-blur-range" class="control-background-image-blur-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-image-blur-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-background-image-blur-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<div class="form-wrap">
<label for="control-background-image-accent">Accent overlay</label>
<label for="control-background-image-accent-range">Accent overlay</label>
<div class="form-group form-group-block">
<input id="control-background-image-accent" class="control-background-image-accent mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
<div class="control-background-image-accent-count form-group-text form-group-item-medium form-group-radius-left"></div>
<input id="control-background-image-accent-range" class="control-background-image-accent-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-image-accent-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-background-image-accent-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<div class="form-wrap">
<label for="control-background-image-scale">Size</label>
<label for="control-background-image-scale-range">Size</label>
<div class="form-group form-group-block">
<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-item-medium form-group-radius-left"></div>
<input id="control-background-image-scale-range" class="control-background-image-scale-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-image-scale-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-background-image-scale-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>

6
src/js/background.js
View File

@ -125,12 +125,6 @@ var background = (function() {
render.input = {
clear: function() {
helper.e(".control-background-image-file").value = "";
},
picker: function() {
helper.e(".control-background-color-rgb-picker").value = helper.convertColor.rgb.hex(state.get.current().background.color.rgb);
},
hex: function() {
helper.e(".control-background-color-rgb-hex").value = helper.convertColor.rgb.hex(state.get.current().background.color.rgb);
}
};

2765
src/js/control.js
View File

File diff suppressed because it is too large Load Diff

41
src/js/header.js
View File

@ -71,15 +71,6 @@ var header = (function() {
}
};
render.input = {
picker: function() {
helper.e(".control-header-color-rgb-picker").value = helper.convertColor.rgb.hex(state.get.current().header.color.rgb);
},
hex: function() {
helper.e(".control-header-color-rgb-hex").value = helper.convertColor.rgb.hex(state.get.current().header.color.rgb);
}
};
render.opacity = function() {
var html = helper.e("html");
if (state.get.current().header.color.show) {
@ -142,15 +133,15 @@ var header = (function() {
box: function() {
helper.removeClass(helper.getClosest(helper.e(".control-edit"), ".form-input-button"), "form-input-button-link");
helper.removeClass(helper.e(".control-add-toggle"), "button-link");
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "form-input-button-link");
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "form-input-button-link");
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-color"), ".form-input-button"), "form-input-button-link");
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color"), ".form-input-button"), "form-input-button-link");
helper.removeClass(helper.e(".control-menu-open"), "button-link");
},
clear: function() {
helper.addClass(helper.getClosest(helper.e(".control-edit"), ".form-input-button"), "form-input-button-link");
helper.addClass(helper.e(".control-add-toggle"), "button-link");
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "form-input-button-link");
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "form-input-button-link");
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-color"), ".form-input-button"), "form-input-button-link");
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color"), ".form-input-button"), "form-input-button-link");
helper.addClass(helper.e(".control-menu-open"), "button-link");
}
};
@ -158,19 +149,19 @@ var header = (function() {
},
dot: function() {
if (state.get.current().header.button.colorAccent.dot.show) {
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "input-color-dot");
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "input-color-dot-shade");
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "form-input-hide");
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "input-color-dot");
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "input-color-dot-accent");
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "form-input-hide");
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-color"), ".form-input-button"), "input-color-dot");
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-color"), ".form-input-button"), "input-color-dot-shade");
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-color"), ".form-input-button"), "form-input-hide");
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color"), ".form-input-button"), "input-color-dot");
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color"), ".form-input-button"), "input-color-dot-accent");
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color"), ".form-input-button"), "form-input-hide");
} else {
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "input-color-dot");
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "input-color-dot-shade");
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "form-input-hide");
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "input-color-dot");
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "input-color-dot-accent");
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "form-input-hide");
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-color"), ".form-input-button"), "input-color-dot");
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-color"), ".form-input-button"), "input-color-dot-shade");
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-color"), ".form-input-button"), "form-input-hide");
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color"), ".form-input-button"), "input-color-dot");
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color"), ".form-input-button"), "input-color-dot-accent");
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-color"), ".form-input-button"), "form-input-hide");
};
}
};

4
src/js/keyboard.js
View File

@ -183,9 +183,7 @@ var keyboard = (function() {
// ctrl+alt+r
if (state.get.current().theme.accent.random.active && event.ctrlKey && event.altKey && event.keyCode == 82) {
theme.accent.random();
theme.render.accent.input.quick();
theme.render.accent.input.picker();
theme.render.accent.input.hex();
control.render.update();
link.groupAndItems();
data.save();
};

9
src/js/link.js
View File

@ -1712,15 +1712,6 @@ var link = (function() {
}
};
render.input = {
picker: function() {
helper.e(".control-link-item-color-rgb-picker").value = helper.convertColor.rgb.hex(state.get.current().link.item.color.rgb);
},
hex: function() {
helper.e(".control-link-item-color-rgb-hex").value = helper.convertColor.rgb.hex(state.get.current().link.item.color.rgb);
}
};
var add = {
item: {
open: function() {

40
src/js/theme.js
View File

@ -1363,17 +1363,6 @@ var theme = (function() {
var html = helper.e("html");
var color = state.get.current().theme.accent.rgb;
html.style.setProperty("--theme-accent", color.r + ", " + color.g + ", " + color.b);
},
input: {
quick: function() {
helper.e(".control-theme-accent-rgb-quick").value = helper.convertColor.rgb.hex(state.get.current().theme.accent.rgb);
},
picker: function() {
helper.e(".control-theme-accent-rgb-picker").value = helper.convertColor.rgb.hex(state.get.current().theme.accent.rgb);
},
hex: function() {
helper.e(".control-theme-accent-rgb-hex").value = helper.convertColor.rgb.hex(state.get.current().theme.accent.rgb);
}
}
};
@ -1419,35 +1408,6 @@ var theme = (function() {
});
renderShade("--theme-shade-pos-", i, rgb);
};
},
input: {
quick: function() {
helper.e(".control-theme-color-rgb-quick").value = helper.convertColor.rgb.hex(state.get.current().theme.color.rgb);
},
picker: function() {
helper.e(".control-theme-color-rgb-picker").value = helper.convertColor.rgb.hex(state.get.current().theme.color.rgb);
},
hex: function() {
helper.e(".control-theme-color-rgb-hex").value = helper.convertColor.rgb.hex(state.get.current().theme.color.rgb);
},
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;
}
}
}
};

2
src/js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() {
var current = "4.24.0";
var current = "4.25.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.24.0",
"version": "4.25.0",
"manifest_version": 2,
"chrome_url_overrides": {
"newtab": "index.html"