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

[feature] add header item and open all opacity controls

Browse Source
This commit is contained in:
zombieFox 2020-03-27 02:00:00 +00:00
parent f4e6cc7370
commit 1fa622f24d
21 changed files with 605 additions and 312 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": "5.1.0",
"version": "5.2.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "nightTab",
"version": "5.1.0",
"version": "5.2.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": {

26
src/css/form.css
View File

@ -117,9 +117,7 @@ select {
min-height: 2.5em;
min-width: 0;
width: 100%;
border-color: rgb(var(--form-input-border));
border-width: var(--theme-line-width);
border-style: solid;
border-width: 0;
border-radius: var(--theme-radius);
cursor: pointer;
transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
@ -133,7 +131,6 @@ select:hover {
linear-gradient(45deg, transparent 60%, rgb(var(--form-label-hover)) 60%),
linear-gradient(135deg, rgb(var(--form-label-hover)) 40%, transparent 40%);
background-color: rgb(var(--form-input-background-hover));
border-color: rgb(var(--form-input-border-hover));
color: rgb(var(--form-label-hover));
outline: none;
box-shadow: var(--form-ring-hover);
@ -145,7 +142,6 @@ select:active {
linear-gradient(45deg, transparent 60%, rgb(var(--form-label-focus-active)) 60%),
linear-gradient(135deg, rgb(var(--form-label-focus-active)) 40%, transparent 40%);
background-color: rgb(var(--form-input-background-border-focus-active));
border-color: rgb(var(--form-input-border-focus-active));
color: rgb(var(--form-label-focus-active));
outline: none;
z-index: 2;
@ -160,7 +156,6 @@ select:disabled:active {
background-image:
linear-gradient(45deg, transparent 50%, rgb(var(--form-input-text-disabled)) 50%),
linear-gradient(135deg, rgb(var(--form-input-text-disabled)) 50%, transparent 50%);
border-color: rgb(var(--form-input-border-disabled));
color: rgb(var(--form-input-text-disabled));
cursor: default;
box-shadow: none;
@ -169,7 +164,7 @@ select:disabled:active {
/* textarea */
textarea {
background-color: rgb(var(--form-input-background));
padding: 0.25em 1em;
padding: 0.5em 1em;
margin: 0;
color: rgb(var(--form-input-text));
font-size: 1em;
@ -181,9 +176,7 @@ textarea {
min-height: 2.5em;
min-width: 0;
width: 100%;
border-color: rgb(var(--form-input-border));
border-width: var(--theme-line-width);
border-style: solid;
border-width: 0;
border-radius: var(--theme-radius);
cursor: text;
resize: vertical;
@ -194,7 +187,6 @@ textarea {
textarea:hover {
background-color: rgb(var(--form-input-background-hover));
border-color: rgb(var(--form-input-border-hover));
color: rgb(var(--form-input-text-hover));
outline: none;
box-shadow: var(--form-ring-hover);
@ -203,7 +195,6 @@ textarea:hover {
textarea:focus,
textarea:active {
background-color: rgb(var(--form-input-background-focus-active));
border-color: rgb(var(--form-input-border-focus-active));
color: rgb(var(--form-input-text-focus-active));
outline: none;
box-shadow: var(--form-ring-accent);
@ -211,7 +202,6 @@ textarea:active {
textarea:disabled {
background-color: rgb(var(--form-input-background-disabled));
border-color: rgb(var(--form-input-border-disabled));
color: rgb(var(--form-input-text-disabled));
cursor: default;
box-shadow: none;
@ -261,9 +251,7 @@ input[type="text"] {
height: 2.5em;
min-width: 0;
width: 100%;
border-color: rgb(var(--form-input-border));
border-width: var(--theme-line-width);
border-style: solid;
border-width: 0;
border-radius: var(--theme-radius);
cursor: text;
transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
@ -287,7 +275,6 @@ input[type="search"]:hover,
input[type="tel"]:hover,
input[type="text"]:hover {
background-color: rgb(var(--form-input-background-hover));
border-color: rgb(var(--form-input-border-hover));
color: rgb(var(--form-input-text-hover));
outline: none;
box-shadow: var(--form-ring-hover);
@ -306,7 +293,6 @@ input[type="tel"]:active,
input[type="text"]:focus,
input[type="text"]:active {
background-color: rgb(var(--form-input-background-focus-active));
border-color: rgb(var(--form-input-border-focus-active));
color: rgb(var(--form-input-text-focus-active));
outline: none;
z-index: 2;
@ -320,7 +306,6 @@ input[type="search"]:disabled,
input[type="tel"]:disabled,
input[type="text"]:disabled {
background-color: rgb(var(--form-input-background-disabled));
border-color: rgb(var(--form-input-border-disabled));
color: rgb(var(--form-input-text-disabled));
cursor: default;
box-shadow: none;
@ -397,7 +382,6 @@ input[type="text"]:disabled:focus::placeholder {
.input-clear[type="tel"],
.input-clear[type="text"] {
background-color: transparent;
border-color: transparent;
}
.input-clear[type="email"]:hover,
@ -407,7 +391,6 @@ input[type="text"]:disabled:focus::placeholder {
.input-clear[type="tel"]:hover,
.input-clear[type="text"]:hover {
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
@ -424,7 +407,6 @@ input[type="text"]:disabled:focus::placeholder {
.input-clear[type="text"]:focus,
.input-clear[type="text"]:active {
background-color: transparent;
border-color: transparent;
box-shadow: var(--form-ring-accent);
}

30
src/css/group.css
View File

@ -152,6 +152,36 @@
font-size: var(--group-openall-size);
}
.group-openall-item {
background-color: rgba(var(--button-background), var(--group-openall-opacity));
}
.group-openall-item:focus,
.group-openall-item:hover {
background-color: rgba(var(--button-background-focus-hover), var(--group-openall-opacity));
}
.group-openall-item:active {
background-color: rgba(var(--button-background-active), var(--group-openall-opacity));
}
.group-openall-item:after {
background-color: rgba(var(--button-border), var(--group-openall-opacity));
}
.group-openall-item:focus:after,
.group-openall-item:hover:after {
background-color: rgba(var(--button-border-focus-hover), var(--group-openall-opacity));
}
.group-openall-item:active:after {
background-color: rgb(var(--button-border-active));
}
.is-group-openall-opacity .group-openall-item:active:after {
background-color: transparent;
}
.group-body {
background-color: transparent;
font-size: var(--link-item-size);

143
src/css/header.css
View File

@ -247,6 +247,149 @@
flex-grow: 1;
}
.form-input-button .header-edit[type="checkbox"]+label {
background-color: rgba(var(--button-background), var(--header-editadd-opacity));
}
.form-input-button .header-edit[type="checkbox"]:focus+label,
.form-input-button .header-edit[type="checkbox"]:hover+label {
background-color: rgba(var(--button-background-focus-hover), var(--header-editadd-opacity));
}
.form-input-button .header-edit[type="checkbox"]:active+label {
background-color: rgba(var(--button-background-active), var(--header-editadd-opacity));
}
.form-input-button .header-edit[type="checkbox"]:checked+label {
background-color: rgba(var(--button-background-active), var(--header-editadd-opacity));
}
.is-header-editadd-opacity .form-input-button .header-edit[type="checkbox"]:active+label,
.is-header-editadd-opacity .form-input-button .header-edit[type="checkbox"]:checked+label {
background-color: transparent;
}
.form-input-button .header-edit[type="checkbox"]+label:after {
background-color: rgba(var(--button-border), var(--header-editadd-opacity));
}
.form-input-button .header-edit[type="checkbox"]:focus+label:after,
.form-input-button .header-edit[type="checkbox"]:hover+label:after {
background-color: rgba(var(--button-border-focus-hover), var(--header-editadd-opacity));
}
.form-input-button .header-edit[type="checkbox"]:active+label:after {
background-color: rgb(var(--button-border-active));
}
.form-input-button .header-edit[type="checkbox"]:checked+label:after {
background-color: rgb(var(--button-border-active));
}
.is-header-editadd-opacity .form-input-button .header-edit[type="checkbox"]:active+label:after,
.is-header-editadd-opacity .form-input-button .header-edit[type="checkbox"]:checked+label:after {
background-color: transparent;
}
.header-add {
background-color: rgba(var(--button-background), var(--header-editadd-opacity));
}
.header-add:focus,
.header-add:hover {
background-color: rgba(var(--button-background-focus-hover), var(--header-editadd-opacity));
}
.header-add:active {
background-color: rgba(var(--button-background-active), var(--header-editadd-opacity));
}
.header-add:after {
background-color: rgba(var(--button-border), var(--header-editadd-opacity));
}
.header-add:focus:after,
.header-add:hover:after {
background-color: rgba(var(--button-border-focus-hover), var(--header-editadd-opacity));
}
.header-add:active:after {
background-color: rgb(var(--button-border-active));
}
.is-header-add-opacity .header-add:active:after {
background-color: transparent;
}
.form-input-button .header-color[type="color"]+label,
.form-input-button .header-accent[type="color"]+label {
background-color: rgba(var(--button-background), var(--header-coloraccent-opacity));
}
.form-input-button .header-color[type="color"]:focus+label,
.form-input-button .header-color[type="color"]:hover+label,
.form-input-button .header-accent[type="color"]:focus+label,
.form-input-button .header-accent[type="color"]:hover+label {
background-color: rgba(var(--button-background-focus-hover), var(--header-coloraccent-opacity));
}
.form-input-button .header-color[type="color"]:active+label,
.form-input-button .header-accent[type="color"]:active+label {
background-color: rgba(var(--button-background-active), var(--header-coloraccent-opacity));
}
.form-input-button .header-color[type="color"]+label:after,
.form-input-button .header-accent[type="color"]+label:after {
background-color: rgba(var(--button-border), var(--header-coloraccent-opacity));
}
.form-input-button .header-color[type="color"]:focus+label:after,
.form-input-button .header-color[type="color"]:hover+label:after,
.form-input-button .header-accent[type="color"]:focus+label:after,
.form-input-button .header-accent[type="color"]:hover+label:after {
background-color: rgba(var(--button-border-focus-hover), var(--header-coloraccent-opacity));
}
.form-input-button .header-color[type="color"]:active+label:after,
.form-input-button .header-accent[type="color"]:active+label:after {
background-color: rgb(var(--button-border-active));
}
.is-header-coloraccent-opacity .form-input-button .header-color[type="color"]:active+label:after,
.is-header-coloraccent-opacity .form-input-button .header-accent[type="color"]:active+label:after {
background-color: transparent;
}
.header-menu {
background-color: rgba(var(--button-background), var(--header-menu-opacity));
}
.header-menu:focus,
.header-menu:hover {
background-color: rgba(var(--button-background-focus-hover), var(--header-menu-opacity));
}
.header-menu:active {
background-color: rgba(var(--button-background-active), var(--header-menu-opacity));
}
.header-menu:after {
background-color: rgba(var(--button-border), var(--header-menu-opacity));
}
.header-menu:focus:after,
.header-menu:hover:after {
background-color: rgba(var(--button-border-focus-hover), var(--header-menu-opacity));
}
.header-menu:active:after {
background-color: rgb(var(--button-border-active));
}
.is-header-menu-opacity .header-menu:active:after {
background-color: transparent;
}
.is-header-item-newline-search.is-header-search-width-by-custom .header-item-body-search {
flex-grow: 0;
width: var(--header-search-width-size);

13
src/css/search.css
View File

@ -7,6 +7,19 @@
width: 100%;
}
.search-input[type="text"] {
background-color: rgba(var(--form-input-background), var(--header-search-opacity));
}
.search-input[type="text"]:hover {
background-color: rgba(var(--form-input-background-hover), var(--header-search-opacity));
}
.search-input[type="text"]:focus,
.search-input[type="text"]:active {
background-color: rgba(var(--form-input-background-focus-active), var(--header-search-opacity));
}
.search-clear {
position: absolute;
top: 50%;

11
src/css/variables.css
View File

@ -87,20 +87,25 @@
--header-color-theme: var(--theme-color-01);
--header-color-custom: rgb(0, 0, 0);
--header-opacity: 0.95;
--header-search-width-size: 30%;
--header-border-top: 0;
--header-border-bottom: 0;
--header-date-size: 1em;
--header-clock-size: 1em;
--header-search-size: 1em;
--header-search-width-size: 30%;
--header-search-opacity: 1;
--header-editadd-size: 1em;
--header-editadd-opacity: 1;
--header-coloraccent-size: 1em;
--header-coloraccent-opacity: 1;
--header-menu-size: 1em;
--header-menu-opacity: 1;
--header-greeting-size: 1em;
--header-transitional-size: 1em;
/* group */
--group-name-size: 1em;
--group-openall-size: 1em;
--group-openall-opacity: 1;
--group-border: 0;
/* link */
--link-area-width: 100%;
@ -164,10 +169,6 @@
--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);

15
src/html/menu/content/groups/openall.html
View File

@ -23,15 +23,12 @@
</div>
<hr>
<div class="form-wrap">
<label class="control-group-openall-style-label">Button style</label>
</div>
<div class="form-wrap">
<input id="control-group-openall-style-box" class="control-group-openall-style-box" type="radio" name="control-group-openall-style" value="box" tabindex="-1">
<label for="control-group-openall-style-box"><span class="label-icon"></span> Box</label>
</div>
<div class="form-wrap">
<input id="control-group-openall-style-clear" class="control-group-openall-style-clear" type="radio" name="control-group-openall-style" value="clear" tabindex="-1">
<label for="control-group-openall-style-clear"><span class="label-icon"></span> Clear</label>
<label for="control-group-openall-opacity-range">Opacity</label>
<div class="form-group form-group-block">
<input id="control-group-openall-opacity-range" class="control-group-openall-opacity-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-group-openall-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-group-openall-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
</div>
</div>

2
src/html/menu/content/header.html
View File

@ -20,7 +20,7 @@
@@include("./header/coloraccent.html")
@@include("./header/settings.html")
@@include("./header/menu.html")
@@include("./header/border.html")

21
src/html/menu/content/header/coloraccent.html
View File

@ -17,18 +17,6 @@
<label for="control-header-coloraccent-dot-show"><span class="label-icon"></span> Show colour dots</label>
</div>
<hr>
<div class="form-wrap">
<label class="control-header-coloraccent-style-label">Button style</label>
</div>
<div class="form-wrap">
<input id="control-header-coloraccent-style-box" class="control-header-coloraccent-style-box" type="radio" name="control-header-coloraccent-style" value="box" tabindex="-1">
<label for="control-header-coloraccent-style-box"><span class="label-icon"></span> Box</label>
</div>
<div class="form-wrap">
<input id="control-header-coloraccent-style-clear" class="control-header-coloraccent-style-clear" type="radio" name="control-header-coloraccent-style" value="clear" tabindex="-1">
<label for="control-header-coloraccent-style-clear"><span class="label-icon"></span> Clear</label>
</div>
<hr>
<div class="form-wrap">
<label for="control-header-coloraccent-size-range">Size</label>
<div class="form-group form-group-block">
@ -38,6 +26,15 @@
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-header-coloraccent-opacity-range">Opacity</label>
<div class="form-group form-group-block">
<input id="control-header-coloraccent-opacity-range" class="control-header-coloraccent-opacity-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-header-coloraccent-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-header-coloraccent-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<hr>
<div class="form-wrap">
<input id="control-header-coloraccent-newline" class="control-header-coloraccent-newline" type="checkbox" tabindex="-1">
<label for="control-header-coloraccent-newline"><span class="label-icon"></span> New line</label>

21
src/html/menu/content/header/editadd.html
View File

@ -9,18 +9,6 @@
</div>
<div class="form-wrap">
<div class="form-indent">
<div class="form-wrap">
<label class="control-header-editadd-style-label">Button style</label>
</div>
<div class="form-wrap">
<input id="control-header-editadd-style-box" class="control-header-editadd-style-box" type="radio" name="control-header-editadd-style" value="box" tabindex="-1">
<label for="control-header-editadd-style-box"><span class="label-icon"></span> Box</label>
</div>
<div class="form-wrap">
<input id="control-header-editadd-style-clear" class="control-header-editadd-style-clear" type="radio" name="control-header-editadd-style" value="clear" tabindex="-1">
<label for="control-header-editadd-style-clear"><span class="label-icon"></span> Clear</label>
</div>
<hr>
<div class="form-wrap">
<label for="control-header-editadd-size-range">Size</label>
<div class="form-group form-group-block">
@ -30,6 +18,15 @@
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-header-editadd-opacity-range">Opacity</label>
<div class="form-group form-group-block">
<input id="control-header-editadd-opacity-range" class="control-header-editadd-opacity-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-header-editadd-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-header-editadd-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<hr>
<div class="form-wrap">
<input id="control-header-editadd-newline" class="control-header-editadd-newline" type="checkbox" tabindex="-1">
<label for="control-header-editadd-newline"><span class="label-icon"></span> New line</label>

23
src/html/menu/content/header/settings.html → src/html/menu/content/header/menu.html
View File

@ -1,20 +1,8 @@
<div id="menu-content-header-settings" class="menu-content-item">
<div id="menu-content-header-menu" class="menu-content-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Settings menu</h1>
</div>
<div class="menu-item-form">
<div class="form-wrap">
<label class="control-header-menu-style-label">Button style</label>
</div>
<div class="form-wrap">
<input id="control-header-menu-style-box" class="control-header-menu-style-box" type="radio" name="control-header-menu-style" value="box" tabindex="-1">
<label for="control-header-menu-style-box"><span class="label-icon"></span> Box</label>
</div>
<div class="form-wrap">
<input id="control-header-menu-style-clear" class="control-header-menu-style-clear" type="radio" name="control-header-menu-style" value="clear" tabindex="-1">
<label for="control-header-menu-style-clear"><span class="label-icon"></span> Clear</label>
</div>
<hr>
<div class="form-wrap">
<label for="control-header-menu-size-range">Size</label>
<div class="form-group form-group-block">
@ -24,6 +12,15 @@
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-header-menu-opacity-range">Opacity</label>
<div class="form-group form-group-block">
<input id="control-header-menu-opacity-range" class="control-header-menu-opacity-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-header-menu-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-header-menu-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<hr>
<div class="form-wrap">
<input id="control-header-menu-newline" class="control-header-menu-newline" type="checkbox" tabindex="-1">
<label for="control-header-menu-newline"><span class="label-icon"></span> New line</label>

15
src/html/menu/content/header/search.html
View File

@ -39,15 +39,12 @@
</div>
<hr>
<div class="form-wrap">
<label class="control-header-search-style-label">Input style</label>
</div>
<div class="form-wrap">
<input id="control-header-search-style-box" class="control-header-search-style-box" type="radio" name="control-header-search-style" value="box" tabindex="-1">
<label for="control-header-search-style-box"><span class="label-icon"></span> Box</label>
</div>
<div class="form-wrap">
<input id="control-header-search-style-clear" class="control-header-search-style-clear" type="radio" name="control-header-search-style" value="clear" tabindex="-1">
<label for="control-header-search-style-clear"><span class="label-icon"></span> Clear</label>
<label for="control-header-search-opacity-range">Opacity</label>
<div class="form-group form-group-block">
<input id="control-header-search-opacity-range" class="control-header-search-opacity-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-header-search-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-header-search-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<hr>
<div class="form-wrap">

2
src/html/menu/nav.html
View File

@ -23,7 +23,7 @@
<a href="#menu-content-header-search" class="menu-nav-sub button button-small" tabindex="-1">Search</a>
<a href="#menu-content-header-editadd" class="menu-nav-sub button button-small" tabindex="-1">Edit/Add</a>
<a href="#menu-content-header-coloraccent" class="menu-nav-sub button button-small" tabindex="-1">Colour/Accent</a>
<a href="#menu-content-header-settings" class="menu-nav-sub button button-small" tabindex="-1">Settings menu</a>
<a href="#menu-content-header-menu" class="menu-nav-sub button button-small" tabindex="-1">Settings menu</a>
<a href="#menu-content-header-border" class="menu-nav-sub button button-small" tabindex="-1">Border</a>
<a href="#menu-content-header-position" class="menu-nav-sub button button-small" tabindex="-1">Position when scrolling</a>
<a href="#menu-content-header-color" class="menu-nav-sub button button-small" tabindex="-1">Background colour</a>

473
src/js/control.js
View File

@ -2044,50 +2044,51 @@ var control = (function() {
render.update.control.menu();
}
}, {
element: ".control-header-search-style-box",
path: "header.search.style",
type: "radio",
element: ".control-header-search-opacity-range",
path: "header.search.opacity",
type: "range",
valueConvert: ["float"],
valueModify: {
min: 0,
max: 100
},
mirrorElement: [{
element: ".control-header-search-opacity-number",
path: "header.search.opacity",
type: "number",
valueConvert: ["float"]
}],
func: function() {
header.render.item.clear();
header.render.item.all();
greeting.render.clear();
greeting.render.all();
clock.render.clear();
clock.render.all();
transitional.render.clear();
transitional.render.all();
date.render.clear();
date.render.all();
render.dependents();
render.update.control.header();
bind.control.header();
search.render.engine();
search.bind.input();
search.bind.clear();
dropdown.bind.editAdd();
header.render.search.opacity();
render.class();
}
}, {
element: ".control-header-search-style-clear",
path: "header.search.style",
type: "radio",
element: ".control-header-search-opacity-number",
path: "header.search.opacity",
type: "range",
valueConvert: ["float"],
valueModify: {
min: 0,
max: 100
},
mirrorElement: [{
element: ".control-header-search-opacity-range",
path: "header.search.opacity",
type: "number",
valueConvert: ["float"]
}],
func: function() {
header.render.item.clear();
header.render.item.all();
greeting.render.clear();
greeting.render.all();
clock.render.clear();
clock.render.all();
transitional.render.clear();
transitional.render.all();
date.render.clear();
date.render.all();
render.dependents();
render.update.control.header();
bind.control.header();
search.render.engine();
search.bind.input();
search.bind.clear();
dropdown.bind.editAdd();
header.render.search.opacity();
render.class();
}
}, {
element: ".control-header-search-opacity-default",
type: "button",
func: function() {
mod.default("header.search.opacity");
header.render.search.opacity();
render.update.control.menu();
render.class();
}
}, {
element: ".control-header-search-focus",
@ -2328,52 +2329,6 @@ var control = (function() {
dropdown.bind.editAdd();
render.dependents();
}
}, {
element: ".control-header-editadd-style-box",
path: "header.editAdd.style",
type: "radio",
func: function() {
header.render.item.clear();
header.render.item.all();
greeting.render.clear();
greeting.render.all();
clock.render.clear();
clock.render.all();
transitional.render.clear();
transitional.render.all();
date.render.clear();
date.render.all();
render.dependents();
render.update.control.header();
bind.control.header();
search.render.engine();
search.bind.input();
search.bind.clear();
dropdown.bind.editAdd();
}
}, {
element: ".control-header-editadd-style-clear",
path: "header.editAdd.style",
type: "radio",
func: function() {
header.render.item.clear();
header.render.item.all();
greeting.render.clear();
greeting.render.all();
clock.render.clear();
clock.render.all();
transitional.render.clear();
transitional.render.all();
date.render.clear();
date.render.all();
render.dependents();
render.update.control.header();
bind.control.header();
search.render.engine();
search.bind.input();
search.bind.clear();
dropdown.bind.editAdd();
}
}, {
element: ".control-header-editadd-size-range",
path: "header.editAdd.size",
@ -2469,6 +2424,53 @@ var control = (function() {
render.update.control.header();
render.update.control.menu();
}
}, {
element: ".control-header-editadd-opacity-range",
path: "header.editAdd.opacity",
type: "range",
valueConvert: ["float"],
valueModify: {
min: 0,
max: 100
},
mirrorElement: [{
element: ".control-header-editadd-opacity-number",
path: "header.editAdd.opacity",
type: "number",
valueConvert: ["float"]
}],
func: function() {
header.render.editadd.opacity();
render.class();
}
}, {
element: ".control-header-editadd-opacity-number",
path: "header.editAdd.opacity",
type: "range",
valueConvert: ["float"],
valueModify: {
min: 0,
max: 100
},
mirrorElement: [{
element: ".control-header-editadd-opacity-range",
path: "header.editAdd.opacity",
type: "number",
valueConvert: ["float"]
}],
func: function() {
header.render.editadd.opacity();
render.class();
}
}, {
element: ".control-header-editadd-opacity-default",
type: "button",
func: function() {
mod.default("header.editAdd.opacity");
header.render.editadd.opacity();
render.update.control.menu();
render.class();
}
}, {
element: ".control-header-editadd-newline",
path: "header.editAdd.newLine",
@ -2523,52 +2525,6 @@ var control = (function() {
search.bind.clear();
dropdown.bind.editAdd();
}
}, {
element: ".control-header-coloraccent-style-box",
path: "header.colorAccent.style",
type: "radio",
func: function() {
header.render.item.clear();
header.render.item.all();
greeting.render.clear();
greeting.render.all();
clock.render.clear();
clock.render.all();
transitional.render.clear();
transitional.render.all();
date.render.clear();
date.render.all();
render.dependents();
render.update.control.header();
bind.control.header();
search.render.engine();
search.bind.input();
search.bind.clear();
dropdown.bind.editAdd();
}
}, {
element: ".control-header-coloraccent-style-clear",
path: "header.colorAccent.style",
type: "radio",
func: function() {
header.render.item.clear();
header.render.item.all();
greeting.render.clear();
greeting.render.all();
clock.render.clear();
clock.render.all();
transitional.render.clear();
transitional.render.all();
date.render.clear();
date.render.all();
render.dependents();
render.update.control.header();
bind.control.header();
search.render.engine();
search.bind.input();
search.bind.clear();
dropdown.bind.editAdd();
}
}, {
element: ".control-header-coloraccent-size-range",
path: "header.colorAccent.size",
@ -2664,6 +2620,53 @@ var control = (function() {
render.update.control.header();
render.update.control.menu();
}
}, {
element: ".control-header-coloraccent-opacity-range",
path: "header.colorAccent.opacity",
type: "range",
valueConvert: ["float"],
valueModify: {
min: 0,
max: 100
},
mirrorElement: [{
element: ".control-header-coloraccent-opacity-number",
path: "header.colorAccent.opacity",
type: "number",
valueConvert: ["float"]
}],
func: function() {
header.render.coloraccent.opacity();
render.class();
}
}, {
element: ".control-header-coloraccent-opacity-number",
path: "header.colorAccent.opacity",
type: "range",
valueConvert: ["float"],
valueModify: {
min: 0,
max: 100
},
mirrorElement: [{
element: ".control-header-coloraccent-opacity-range",
path: "header.colorAccent.opacity",
type: "number",
valueConvert: ["float"]
}],
func: function() {
header.render.coloraccent.opacity();
render.class();
}
}, {
element: ".control-header-coloraccent-opacity-default",
type: "button",
func: function() {
mod.default("header.colorAccent.opacity");
header.render.coloraccent.opacity();
render.update.control.menu();
render.class();
}
}, {
element: ".control-header-coloraccent-newline",
path: "header.colorAccent.newLine",
@ -2672,53 +2675,7 @@ var control = (function() {
render.class();
}
}],
settings: [{
element: ".control-header-menu-style-box",
path: "header.menu.style",
type: "radio",
func: function() {
header.render.item.clear();
header.render.item.all();
greeting.render.clear();
greeting.render.all();
clock.render.clear();
clock.render.all();
transitional.render.clear();
transitional.render.all();
date.render.clear();
date.render.all();
render.dependents();
render.update.control.header();
bind.control.header();
search.render.engine();
search.bind.input();
search.bind.clear();
dropdown.bind.editAdd();
}
}, {
element: ".control-header-menu-style-clear",
path: "header.menu.style",
type: "radio",
func: function() {
header.render.item.clear();
header.render.item.all();
greeting.render.clear();
greeting.render.all();
clock.render.clear();
clock.render.all();
transitional.render.clear();
transitional.render.all();
date.render.clear();
date.render.all();
render.dependents();
render.update.control.header();
bind.control.header();
search.render.engine();
search.bind.input();
search.bind.clear();
dropdown.bind.editAdd();
}
}, {
menu: [{
element: ".control-header-menu-size-range",
path: "header.menu.size",
type: "range",
@ -2813,6 +2770,53 @@ var control = (function() {
render.update.control.header();
render.update.control.menu();
}
}, {
element: ".control-header-menu-opacity-range",
path: "header.menu.opacity",
type: "range",
valueConvert: ["float"],
valueModify: {
min: 0,
max: 100
},
mirrorElement: [{
element: ".control-header-menu-opacity-number",
path: "header.menu.opacity",
type: "number",
valueConvert: ["float"]
}],
func: function() {
header.render.menu.opacity();
render.class();
}
}, {
element: ".control-header-menu-opacity-number",
path: "header.menu.opacity",
type: "range",
valueConvert: ["float"],
valueModify: {
min: 0,
max: 100
},
mirrorElement: [{
element: ".control-header-menu-opacity-range",
path: "header.menu.opacity",
type: "number",
valueConvert: ["float"]
}],
func: function() {
header.render.menu.opacity();
render.class();
}
}, {
element: ".control-header-menu-opacity-default",
type: "button",
func: function() {
mod.default("header.menu.opacity");
header.render.menu.opacity();
render.update.control.menu();
render.class();
}
}, {
element: ".control-header-menu-newline",
path: "header.menu.newLine",
@ -4253,18 +4257,51 @@ var control = (function() {
render.update.control.menu();
}
}, {
element: ".control-group-openall-style-box",
path: "group.openAll.style",
type: "radio",
element: ".control-group-openall-opacity-range",
path: "group.openAll.opacity",
type: "range",
valueConvert: ["float"],
valueModify: {
min: 0,
max: 100
},
mirrorElement: [{
element: ".control-group-openall-opacity-number",
path: "group.openAll.opacity",
type: "number",
valueConvert: ["float"]
}],
func: function() {
link.groupAndItems();
link.render.group.openall.opacity();
render.class();
}
}, {
element: ".control-group-openall-style-clear",
path: "group.openAll.style",
type: "radio",
element: ".control-group-openall-opacity-number",
path: "group.openAll.opacity",
type: "range",
valueConvert: ["float"],
valueModify: {
min: 0,
max: 100
},
mirrorElement: [{
element: ".control-group-openall-opacity-range",
path: "group.openAll.opacity",
type: "number",
valueConvert: ["float"]
}],
func: function() {
link.groupAndItems();
link.render.group.openall.opacity();
render.class();
}
}, {
element: ".control-group-openall-opacity-default",
type: "button",
func: function() {
mod.default("group.openAll.opacity");
link.render.group.openall.opacity();
render.update.control.menu();
render.class();
}
}],
border: [{
@ -6542,6 +6579,14 @@ var control = (function() {
return state.get.current().header.editAdd.newLine;
},
name: "is-header-item-newline-editadd"
}, {
remove: [
"is-header-editadd-opacity"
],
condition: function() {
return (state.get.current().header.editAdd.opacity == 0);
},
name: "is-header-editadd-opacity"
}],
coloraccent: [{
remove: [
@ -6551,6 +6596,14 @@ var control = (function() {
return state.get.current().header.colorAccent.newLine;
},
name: "is-header-item-newline-coloraccent"
}, {
remove: [
"is-header-coloraccent-opacity"
],
condition: function() {
return (state.get.current().header.colorAccent.opacity == 0);
},
name: "is-header-coloraccent-opacity"
}],
menu: [{
remove: [
@ -6560,6 +6613,14 @@ var control = (function() {
return state.get.current().header.menu.newLine;
},
name: "is-header-item-newline-menu"
}, {
remove: [
"is-header-menu-opacity"
],
condition: function() {
return (state.get.current().header.menu.opacity == 0);
},
name: "is-header-menu-opacity"
}],
color: [{
remove: [
@ -6638,6 +6699,15 @@ var control = (function() {
],
name: "is-group-order-" + state.get.current().group.order
}],
openall: [{
remove: [
"is-group-openall-opacity"
],
condition: function() {
return (state.get.current().group.openAll.opacity == 0);
},
name: "is-group-openall-opacity"
}],
border: [{
remove: [
"is-group-border"
@ -6884,6 +6954,7 @@ var control = (function() {
classCheck(all.header.position);
classCheck(all.group.area);
classCheck(all.group.order);
classCheck(all.group.openall);
classCheck(all.group.border);
classCheck(all.link);
classCheck(all.theme);
@ -7250,9 +7321,10 @@ var control = (function() {
".control-header-search-width-size-range",
".control-header-search-width-size-number",
".control-header-search-width-size-default",
".control-header-search-style-label",
".control-header-search-style-box",
".control-header-search-style-clear",
"[for=control-header-search-opacity-range]",
".control-header-search-opacity-range",
".control-header-search-opacity-number",
".control-header-search-opacity-default",
".control-header-search-focus",
".control-header-search-focus-helper",
".control-header-search-engine-label",
@ -7309,9 +7381,10 @@ var control = (function() {
dependents: function() {
return [
".control-header-editadd-show-helper",
".control-header-editadd-style-label",
".control-header-editadd-style-box",
".control-header-editadd-style-clear",
"[for=control-header-editadd-opacity-range]",
".control-header-editadd-opacity-range",
".control-header-editadd-opacity-number",
".control-header-editadd-opacity-default",
"[for=control-header-editadd-size-range]",
".control-header-editadd-size-range",
".control-header-editadd-size-number",
@ -7329,9 +7402,10 @@ var control = (function() {
return [
".control-header-coloraccent-show-helper",
".control-header-coloraccent-dot-show",
".control-header-coloraccent-style-label",
".control-header-coloraccent-style-box",
".control-header-coloraccent-style-clear",
"[for=control-header-coloraccent-opacity-range]",
".control-header-coloraccent-opacity-range",
".control-header-coloraccent-opacity-number",
".control-header-coloraccent-opacity-default",
"[for=control-header-coloraccent-size-range]",
".control-header-coloraccent-size-range",
".control-header-coloraccent-size-number",
@ -7347,9 +7421,10 @@ var control = (function() {
},
dependents: function() {
return [
"[for=control-header-menu-style-label]",
".control-header-menu-style-box",
".control-header-menu-style-clear",
"[for=control-header-menu-opacity-range]",
".control-header-menu-opacity-range",
".control-header-menu-opacity-number",
".control-header-menu-opacity-default",
"[for=control-header-menu-size-range]",
".control-header-menu-size-range",
".control-header-menu-size-number",

56
src/js/header.js
View File

@ -368,7 +368,7 @@ var header = (function() {
editAdd: function() {
var formGroup = helper.node("div|class:header-editadd form-group form-group-nested-button");
var formInputButton = helper.node("div|class:form-input-button form-input-hide");
var controlEditInput = helper.node("input|id:control-edit,class:control-edit,type:checkbox,tabindex:1");
var controlEditInput = helper.node("input|id:control-edit,class:header-edit control-edit,type:checkbox,tabindex:1");
var controlEditLabel = helper.node("label|for:control-edit");
var controlEditLabelText = helper.node("span:Edit");
var controlEditLabelIcon = helper.node("span|class:label-icon");
@ -378,7 +378,7 @@ var header = (function() {
formInputButton.appendChild(controlEditLabel);
var formDropdown = helper.node("div|class:form-dropdown");
var controlAddToggle = helper.node("button|class:control-add-toggle form-dropdown-toggle button,tabindex:1");
var controlAddToggle = helper.node("button|class:header-add control-add-toggle form-dropdown-toggle button,tabindex:1");
var controlAddToggleText = helper.node("span:Add");
controlAddToggle.appendChild(controlAddToggleText);
var formDropdownMenu = helper.node("ul|class:list-unstyled form-dropdown-menu");
@ -411,7 +411,7 @@ var header = (function() {
var formGroup = helper.node("div|class:header-coloraccent form-group form-group-nested-button");
var colorInputButton = helper.node("div|class:form-input-button");
var colorInput = helper.node("input|id:control-theme-color-rgb-color-quick,class:control-theme-color-rgb-color-quick,type:color,value:#000000,tabindex:1,autocomplete:off");
var colorInput = helper.node("input|id:control-theme-color-rgb-color-quick,class:control-theme-color-rgb-color-quick header-color,type:color,value:#000000,tabindex:1,autocomplete:off");
var colorInputLabel = helper.node("label|for:control-theme-color-rgb-color-quick");
var colorInputLabelText = helper.node("span:Colour");
colorInputLabel.appendChild(colorInputLabelText);
@ -419,7 +419,7 @@ var header = (function() {
colorInputButton.appendChild(colorInputLabel);
var accentInputButton = helper.node("div|class:form-input-button");
var accentInput = helper.node("input|id:control-theme-accent-rgb-color-quick,class:control-theme-accent-rgb-color-quick,type:color,value:#000000,tabindex:1,autocomplete:off");
var accentInput = helper.node("input|id:control-theme-accent-rgb-color-quick,class:control-theme-accent-rgb-color-quick header-accent,type:color,value:#000000,tabindex:1,autocomplete:off");
var accentInputLabel = helper.node("label|for:control-theme-accent-rgb-color-quick");
var accentInputLabelText = helper.node("span:Accent");
accentInputLabel.appendChild(accentInputLabelText);
@ -446,7 +446,7 @@ var header = (function() {
return formGroup;
},
menu: function() {
var button = helper.node("button|class:control-menu-open button,tabindex:1");
var button = helper.node("button|class:control-menu-open header-menu button,tabindex:1");
var baselineAlignmentCharacter = helper.node("span:-|class:baseline-alignment-icon-character,aria-hidden:true");
var buttonIcon = helper.node("span|class:icon-settings");
if (state.get.current().header.menu.style == "clear") {
@ -465,19 +465,6 @@ var header = (function() {
}
};
render.search = {
width: {
size: function() {
var html = helper.e("html");
html.style.setProperty("--header-search-width-size", state.get.current().header.search.width.size + "%");
}
},
size: function() {
var html = helper.e("html");
html.style.setProperty("--header-search-size", state.get.current().header.search.size + "em");
}
};
render.transitional = {
size: function() {
var html = helper.e("html");
@ -499,10 +486,31 @@ var header = (function() {
}
};
render.search = {
width: {
size: function() {
var html = helper.e("html");
html.style.setProperty("--header-search-width-size", state.get.current().header.search.width.size + "%");
}
},
size: function() {
var html = helper.e("html");
html.style.setProperty("--header-search-size", state.get.current().header.search.size + "em");
},
opacity: function() {
var html = helper.e("html");
html.style.setProperty("--header-search-opacity", state.get.current().header.search.opacity);
}
};
render.editadd = {
size: function() {
var html = helper.e("html");
html.style.setProperty("--header-editadd-size", state.get.current().header.editAdd.size + "em");
},
opacity: function() {
var html = helper.e("html");
html.style.setProperty("--header-editadd-opacity", state.get.current().header.editAdd.opacity);
}
};
@ -510,6 +518,10 @@ var header = (function() {
size: function() {
var html = helper.e("html");
html.style.setProperty("--header-coloraccent-size", state.get.current().header.colorAccent.size + "em");
},
opacity: function() {
var html = helper.e("html");
html.style.setProperty("--header-coloraccent-opacity", state.get.current().header.colorAccent.opacity);
}
};
@ -517,6 +529,10 @@ var header = (function() {
size: function() {
var html = helper.e("html");
html.style.setProperty("--header-menu-size", state.get.current().header.menu.size + "em");
},
opacity: function() {
var html = helper.e("html");
html.style.setProperty("--header-menu-opacity", state.get.current().header.menu.opacity);
}
};
@ -536,9 +552,13 @@ var header = (function() {
render.date.size();
render.search.width.size();
render.search.size();
render.search.opacity();
render.editadd.size();
render.editadd.opacity();
render.coloraccent.size();
render.coloraccent.opacity();
render.menu.size();
render.menu.opacity();
render.control.all();
bind.sort.item();
};

5
src/js/link.js
View File

@ -685,6 +685,10 @@ var link = (function() {
size: function() {
var html = helper.e("html");
html.style.setProperty("--group-openall-size", state.get.current().group.openAll.size + "em");
},
opacity: function() {
var html = helper.e("html");
html.style.setProperty("--group-openall-opacity", state.get.current().group.openAll.opacity);
}
},
border: function() {
@ -1984,6 +1988,7 @@ var link = (function() {
groupAndItems();
render.group.name.size();
render.group.openall.size();
render.group.openall.opacity();
render.group.border();
render.item.color.custom();
render.item.size();

20
src/js/state.js
View File

@ -120,13 +120,14 @@ var state = (function() {
justify: "center"
},
size: 1,
opacity: 1,
newLine: false,
newTab: false
},
editAdd: {
show: true,
size: 1,
style: "box",
opacity: 1,
newLine: false
},
colorAccent: {
@ -135,13 +136,13 @@ var state = (function() {
},
show: true,
size: 1,
style: "box",
opacity: 1,
newLine: false
},
menu: {
show: true,
size: 1,
style: "box",
opacity: 1,
newLine: false
},
order: ["greeting", "transitional", "clock", "date", "search", "editAdd", "colorAccent", "menu"],
@ -237,7 +238,7 @@ var state = (function() {
openAll: {
show: true,
size: 1,
style: "box"
opacity: 1
},
border: 0,
order: "headerbody",
@ -369,16 +370,20 @@ var state = (function() {
width: {
size: 30
},
size: 1
size: 1,
opacity: 1
},
editAdd: {
size: 1,
opacity: 1
},
colorAccent: {
size: 1,
opacity: 1
},
menu: {
size: 1
size: 1,
opacity: 1
},
color: {
opacity: 0.95
@ -428,7 +433,8 @@ var state = (function() {
size: 1
},
openAll: {
size: 1
size: 1,
opacity: 1
},
border: 0
},

33
src/js/update.js
View File

@ -907,6 +907,39 @@ var update = (function() {
"5.1.0": function(data) {
data.state.link.item.opacity = 1;
return data;
},
"5.2.0": function(data) {
if (data.state.header.search.style == "box") {
data.state.header.search.opacity = 1;
} else if (data.state.header.search.style == "clear") {
data.state.header.search.opacity = 0;
};
if (data.state.header.editAdd.style == "box") {
data.state.header.editAdd.opacity = 1;
} else if (data.state.header.editAdd.style == "clear") {
data.state.header.editAdd.opacity = 0;
};
if (data.state.header.colorAccent.style == "box") {
data.state.header.colorAccent.opacity = 1;
} else if (data.state.header.colorAccent.style == "clear") {
data.state.header.colorAccent.opacity = 0;
};
if (data.state.header.menu.style == "box") {
data.state.header.menu.opacity = 1;
} else if (data.state.header.menu.style == "clear") {
data.state.header.menu.opacity = 0;
};
if (data.state.group.openAll.style == "box") {
data.state.group.openAll.opacity = 1;
} else if (data.state.group.openAll.style == "clear") {
data.state.group.openAll.opacity = 0;
};
delete data.state.header.search.style;
delete data.state.header.editAdd.style;
delete data.state.header.colorAccent.style;
delete data.state.header.menu.style;
delete data.state.group.openAll.style;
return data;
}
};

2
src/js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() {
var current = "5.1.0";
var current = "5.2.0";
var name = "Zonked Tarsier";

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