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

[feature] add link icon and background image controls

Browse Source
This commit is contained in:
Kombie 2020-06-08 15:10:11 +01:00 committed by GitHub
parent f1fc8079da
commit 41287a7f74
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
52 changed files with 5527 additions and 1037 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "nightTab", "name": "nightTab",
"version": "5.32.0", "version": "5.33.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

2
package.json
View File

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

3
src/css/base.css
View File

@ -4,11 +4,12 @@
} }
html { html {
background-color: rgb(var(--background-color-theme));
font-size: var(--theme-root-font-size); font-size: var(--theme-root-font-size);
} }
body { body {
background-color: rgb(var(--theme-black)); background-color: rgb(var(--background-color-theme));
color: rgb(var(--theme-style-text)); color: rgb(var(--theme-style-text));
font-size: 1rem; font-size: 1rem;
line-height: 1.6; line-height: 1.6;

93
src/css/form.css
View File

@ -437,6 +437,7 @@ input[type="radio"]+label {
font-family: var(--theme-font-ui-name); font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight); font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style); font-style: var(--theme-font-ui-style);
color: rgb(var(--form-label));
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -634,6 +635,95 @@ input[type="checkbox"]:checked:disabled:active+label .label-icon:after {
background-color: rgb(var(--form-icon-symbol-disabled)); background-color: rgb(var(--form-icon-symbol-disabled));
} }
.label-block {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
input[type="checkbox"]+label .label-block-item,
input[type="radio"]+label .label-block-item {
color: rgb(var(--form-label));
transition: color var(--layout-timing-extra-fast);
}
input[type="checkbox"]:hover+label .label-block-item,
input[type="checkbox"]:focus+label .label-block-item,
input[type="radio"]:hover+label .label-block-item,
input[type="radio"]:focus+label .label-block-item {
color: rgb(var(--form-label-hover));
}
input[type="checkbox"]:active+label .label-block-item,
input[type="radio"]:active+label .label-block-item {
color: rgb(var(--form-label-focus-active));
}
input[type="checkbox"]:checked+label .label-block-item,
input[type="radio"]:checked+label .label-block-item {
color: rgb(var(--form-label-checked));
}
input[type="checkbox"]:disabled+label .label-block-item,
input[type="checkbox"]:disabled:hover+label .label-block-item,
input[type="checkbox"]:disabled:focus+label .label-block-item,
input[type="radio"]:disabled+label .label-block-item,
input[type="radio"]:disabled:hover+label .label-block-item,
input[type="radio"]:disabled:focus+label .label-block-item {
color: rgb(var(--form-label-disabled));
cursor: default;
}
input[type="checkbox"]+label .label-block-item.muted,
input[type="radio"]+label .label-block-item.muted {
color: rgb(var(--utilities-muted));
transition: color var(--layout-timing-extra-fast);
}
input[type="checkbox"]:hover+label .label-block-item.muted,
input[type="checkbox"]:focus+label .label-block-item.muted,
input[type="radio"]:hover+label .label-block-item.muted,
input[type="radio"]:focus+label .label-block-item.muted {
color: rgb(var(--utilities-muted-hover));
}
input[type="checkbox"]:active+label .label-block-item.muted,
input[type="radio"]:active+label .label-block-item.muted {
color: rgb(var(--utilities-muted-focus-active));
}
input[type="checkbox"]:checked+label .label-block-item.muted,
input[type="radio"]:checked+label .label-block-item.muted {
color: rgb(var(--utilities-muted-checked));
}
input[type="checkbox"]:disabled+label .label-block-item.muted,
input[type="checkbox"]:disabled:hover+label .label-block-item.muted,
input[type="checkbox"]:disabled:focus+label .label-block-item.muted,
input[type="radio"]:disabled+label .label-block-item.muted,
input[type="radio"]:disabled:hover+label .label-block-item.muted,
input[type="radio"]:disabled:focus+label .label-block-item.muted {
color: rgb(var(--utilities-muted-disabled));
cursor: default;
}
.label-block-item:not(:last-child):not(:only-child) {
margin-bottom: calc(var(--form-wrap-space) / 4);
}
input:disabled+label .label-block-item,
input:disabled:hover+label .label-block-item,
input:disabled:focus+label .label-block-item,
input[type="checkbox"]:disabled+label .label-block-item,
input[type="checkbox"]:disabled:hover+label .label-block-item,
input[type="checkbox"]:disabled:focus+label .label-block-item,
input[type="radio"]:disabled+label .label-block-item,
input[type="radio"]:disabled:hover+label .label-block-item,
input[type="radio"]:disabled:focus+label .label-block-item {
color: rgb(var(--form-label-disabled));
cursor: default;
}
/* color */ /* color */
input[type="color"] { input[type="color"] {
background-color: transparent; background-color: transparent;
@ -647,7 +737,8 @@ input[type="color"] {
border-radius: var(--theme-radius); border-radius: var(--theme-radius);
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
transition: box-shadow var(--layout-timing-extra-fast); opacity: 1;
transition: box-shadow var(--layout-timing-extra-fast), opacity var(--layout-timing-extra-fast);
} }
input[type="color"]:hover { input[type="color"]:hover {

167
src/css/link.css
View File

@ -182,12 +182,23 @@
transition: background-color var(--layout-timing-extra-fast), height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast); transition: background-color var(--layout-timing-extra-fast), height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast);
} }
.is-link-item-color-by-theme .link-panel-front { .link-image {
background-color: rgba(var(--link-item-color-theme), var(--link-item-opacity)); background-image: var(--link-image-url);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: var(--link-item-opacity);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
} }
.is-link-item-color-by-custom .link-panel-front { .link-panel-front {
background-color: rgba(var(--link-item-color-custom), var(--link-item-opacity)); background-color: rgba(var(--link-item-color), var(--link-item-opacity));
} }
.is-link-style-block .link-panel-front { .is-link-style-block .link-panel-front {
@ -225,18 +236,11 @@
.link-item:focus-within .link-panel-front, .link-item:focus-within .link-panel-front,
.link-item:focus .link-panel-front, .link-item:focus .link-panel-front,
.link-item:hover .link-panel-front { .link-item:hover .link-panel-front {
background-color: rgba(var(--link-item-color-focus-hover), var(--link-item-opacity));
outline: none; outline: none;
text-decoration: none; text-decoration: none;
} }
.is-link-item-color-by-theme .link-panel-front:hover,
.is-link-item-color-by-theme .link-panel-front:focus,
.is-link-item-color-by-theme .link-item:focus-within .link-panel-front,
.is-link-item-color-by-theme .link-item:focus .link-panel-front,
.is-link-item-color-by-theme .link-item:hover .link-panel-front {
background-color: rgba(var(--theme-color-03), var(--link-item-opacity));
}
.is-link-item-shadow-show.is-link-orientation-bottom .link-item:focus .link-panel-front, .is-link-item-shadow-show.is-link-orientation-bottom .link-item:focus .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-bottom .link-item:focus-within .link-panel-front, .is-link-item-shadow-show.is-link-orientation-bottom .link-item:focus-within .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-bottom .link-item:hover .link-panel-front { .is-link-item-shadow-show.is-link-orientation-bottom .link-item:hover .link-panel-front {
@ -353,6 +357,7 @@
top: var(--link-item-display-translate-y); top: var(--link-item-display-translate-y);
left: var(--link-item-display-translate-x); left: var(--link-item-display-translate-x);
font-size: 1em; font-size: 1em;
z-index: 2;
transform: rotate(var(--link-item-display-rotate)); transform: rotate(var(--link-item-display-rotate));
transition: font-size var(--layout-timing-extra-fast), top var(--layout-timing-extra-fast), left var(--layout-timing-extra-fast); transition: font-size var(--layout-timing-extra-fast), top var(--layout-timing-extra-fast), left var(--layout-timing-extra-fast);
} }
@ -361,35 +366,35 @@
font-size: 0.6em; font-size: 0.6em;
} }
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname .link-display { .is-link-item-display-direction-horizontal.is-link-item-display-order-visualname .link-display {
flex-direction: row; flex-direction: row;
} }
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon .link-display { .is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual .link-display {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname .link-display { .is-link-item-display-direction-vertical.is-link-item-display-order-visualname .link-display {
flex-direction: column; flex-direction: column;
} }
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon .link-display { .is-link-item-display-direction-vertical.is-link-item-display-order-namevisual .link-display {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.is-link-item-display-name-show.is-link-item-display-letcon-show.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname .link-display-letcon { .is-link-item-display-name-show.is-link-item-display-visual-show.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname .link-display-visual:not(:only-child) {
margin-right: calc(var(--link-item-display-space) * var(--link-item-display-gutter)); margin-right: calc(var(--link-item-display-space) * var(--link-item-display-gutter));
} }
.is-link-item-display-name-show.is-link-item-display-letcon-show.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon .link-display-letcon { .is-link-item-display-name-show.is-link-item-display-visual-show.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual .link-display-visual:not(:only-child) {
margin-left: calc(var(--link-item-display-space) * var(--link-item-display-gutter)); margin-left: calc(var(--link-item-display-space) * var(--link-item-display-gutter));
} }
.is-link-item-display-name-show.is-link-item-display-letcon-show.is-link-item-display-direction-vertical.is-link-item-display-order-letconname .link-display-letcon { .is-link-item-display-name-show.is-link-item-display-visual-show.is-link-item-display-direction-vertical.is-link-item-display-order-visualname .link-display-visual:not(:only-child) {
margin-bottom: calc(var(--link-item-display-space) * var(--link-item-display-gutter)); margin-bottom: calc(var(--link-item-display-space) * var(--link-item-display-gutter));
} }
.is-link-item-display-name-show.is-link-item-display-letcon-show.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon .link-display-letcon { .is-link-item-display-name-show.is-link-item-display-visual-show.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual .link-display-visual:not(:only-child) {
margin-top: calc(var(--link-item-display-space) * var(--link-item-display-gutter)); margin-top: calc(var(--link-item-display-space) * var(--link-item-display-gutter));
} }
@ -429,186 +434,186 @@
transform-origin: bottom right; transform-origin: bottom right;
} }
/* vertical letcon name */ /* vertical visual name */
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-topleft .link-display { .is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-topleft .link-display {
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
} }
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-topcenter .link-display { .is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-topcenter .link-display {
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-topright .link-display { .is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-topright .link-display {
justify-content: flex-start; justify-content: flex-start;
align-items: flex-end; align-items: flex-end;
} }
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-centerleft .link-display { .is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-centerleft .link-display {
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
} }
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-centercenter .link-display { .is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-centercenter .link-display {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-centerright .link-display { .is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-centerright .link-display {
justify-content: center; justify-content: center;
align-items: flex-end; align-items: flex-end;
} }
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-bottomleft .link-display { .is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-bottomleft .link-display {
justify-content: flex-end; justify-content: flex-end;
align-items: flex-start; align-items: flex-start;
} }
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-bottomcenter .link-display { .is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-bottomcenter .link-display {
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
} }
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-bottomright .link-display { .is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-bottomright .link-display {
justify-content: flex-end; justify-content: flex-end;
align-items: flex-end; align-items: flex-end;
} }
/* vertical name letcon */ /* vertical name visual */
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-topleft .link-display { .is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-topleft .link-display {
justify-content: flex-end; justify-content: flex-end;
align-items: flex-start; align-items: flex-start;
} }
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-topcenter .link-display { .is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-topcenter .link-display {
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
} }
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-topright .link-display { .is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-topright .link-display {
justify-content: flex-end; justify-content: flex-end;
align-items: flex-end; align-items: flex-end;
} }
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-centerleft .link-display { .is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-centerleft .link-display {
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
} }
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-centercenter .link-display { .is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-centercenter .link-display {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-centerright .link-display { .is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-centerright .link-display {
justify-content: center; justify-content: center;
align-items: flex-end; align-items: flex-end;
} }
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomleft .link-display { .is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-bottomleft .link-display {
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
} }
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomcenter .link-display { .is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-bottomcenter .link-display {
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomright .link-display { .is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-bottomright .link-display {
justify-content: flex-start; justify-content: flex-start;
align-items: flex-end; align-items: flex-end;
} }
/* horizontal letcon name */ /* horizontal visual name */
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-topleft .link-display { .is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-topleft .link-display {
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
} }
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-topcenter .link-display { .is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-topcenter .link-display {
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
} }
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-topright .link-display { .is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-topright .link-display {
justify-content: flex-end; justify-content: flex-end;
align-items: flex-start; align-items: flex-start;
} }
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-centerleft .link-display { .is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-centerleft .link-display {
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-centercenter .link-display { .is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-centercenter .link-display {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-centerright .link-display { .is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-centerright .link-display {
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
} }
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-bottomleft .link-display { .is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-bottomleft .link-display {
justify-content: flex-start; justify-content: flex-start;
align-items: flex-end; align-items: flex-end;
} }
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-bottomcenter .link-display { .is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-bottomcenter .link-display {
justify-content: center; justify-content: center;
align-items: flex-end; align-items: flex-end;
} }
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-bottomright .link-display { .is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-bottomright .link-display {
justify-content: flex-end; justify-content: flex-end;
align-items: flex-end; align-items: flex-end;
} }
/* horizontal name letcon */ /* horizontal name visual */
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-topleft .link-display { .is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-topleft .link-display {
justify-content: flex-end; justify-content: flex-end;
align-items: flex-start; align-items: flex-start;
} }
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-topcenter .link-display { .is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-topcenter .link-display {
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
} }
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-topright .link-display { .is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-topright .link-display {
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
} }
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-centerleft .link-display { .is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-centerleft .link-display {
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
} }
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-centercenter .link-display { .is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-centercenter .link-display {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-centerright .link-display { .is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-centerright .link-display {
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomleft .link-display { .is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-bottomleft .link-display {
justify-content: flex-end; justify-content: flex-end;
align-items: flex-end; align-items: flex-end;
} }
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomcenter .link-display { .is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-bottomcenter .link-display {
justify-content: center; justify-content: center;
align-items: flex-end; align-items: flex-end;
} }
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomright .link-display { .is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-bottomright .link-display {
justify-content: flex-start; justify-content: flex-start;
align-items: flex-end; align-items: flex-end;
} }
@ -619,11 +624,11 @@
text-align: center; text-align: center;
} }
.link-display-letcon { .link-display-visual {
display: none; display: none;
} }
.is-link-item-display-letcon-show .link-display-letcon { .is-link-item-display-visual-show .link-display-visual {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -644,6 +649,15 @@
transition: color var(--layout-timing-extra-fast); transition: color var(--layout-timing-extra-fast);
} }
.link-display-image {
background-image: var(--link-display-image-url);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 1em;
height: 1em;
}
.is-theme-accent-cycle .link-display-letter, .is-theme-accent-cycle .link-display-letter,
.is-theme-accent-cycle .link-display-icon { .is-theme-accent-cycle .link-display-icon {
transition: none; transition: none;
@ -659,6 +673,11 @@
font-size: var(--link-item-display-icon-size); font-size: var(--link-item-display-icon-size);
} }
.is-link-style-block .link-display-image,
.is-link-style-list .link-display-image {
font-size: var(--link-item-display-image-size);
}
.link-item:hover .link-display-letter, .link-item:hover .link-display-letter,
.link-item:focus .link-display-letter, .link-item:focus .link-display-letter,
.link-item:hover .link-display-icon, .link-item:hover .link-display-icon,
@ -1027,3 +1046,27 @@
.link-form-icon { .link-form-icon {
font-size: 1.5em; font-size: 1.5em;
} }
.link-form-collapse {
margin-left: -1em;
margin-right: -1em;
margin-bottom: -1em;
padding-right: 1em;
padding-left: 1em;
padding-bottom: 1em;
height: 0;
overflow: hidden;
transition: height var(--layout-timing-extra-fast);
}
.link-form-collapse.active {
height: var(--link-form-collapse-height);
}
.link-form-collapse-button-icon {
transition: transform var(--layout-timing-extra-fast);
}
.link-form-collapse-button.active .link-form-collapse-button-icon {
transform: rotate(-180deg);
}

2
src/css/utilities.css
View File

@ -20,7 +20,7 @@
} }
.muted { .muted {
color: rgb(var(--theme-color-12)); color: rgb(var(--utilities-muted));
} }
.scroll-disabled { .scroll-disabled {

15
src/css/variables.css
View File

@ -109,13 +109,14 @@
--group-border: 0; --group-border: 0;
/* link */ /* link */
--link-area-width: 100%; --link-area-width: 100%;
--link-item-color-theme: var(--theme-color-02); --link-item-color: var(--theme-color-02);
--link-item-color-custom: rgb(0, 0, 0); --link-item-color-focus-hover: var(--theme-color-03);
--link-item-size: 1em; --link-item-size: 1em;
--link-item-display-space: 0.25em; --link-item-display-space: 0.25em;
--link-item-display-gutter: 2; --link-item-display-gutter: 2;
--link-item-display-letter-size: 2em; --link-item-display-letter-size: 3em;
--link-item-display-icon-size: 2.5em; --link-item-display-icon-size: 3em;
--link-item-display-image-size: 3em;
--link-item-display-rotate: 0deg; --link-item-display-rotate: 0deg;
--link-item-display-translate-x: 0em; --link-item-display-translate-x: 0em;
--link-item-display-translate-y: 0em; --link-item-display-translate-y: 0em;
@ -235,6 +236,12 @@
--form-ring-accent: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), --form-ring-accent: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)),
0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25); 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
--form-wrap-space: 1em; --form-wrap-space: 1em;
/* utilities */
--utilities-muted: var(--theme-color-12);
--utilities-muted-hover: var(--theme-color-13);
--utilities-muted-focus-active: var(--theme-color-14);
--utilities-muted-checked: var(--theme-color-14);
--utilities-muted-disabled: var(--theme-color-04);
/* menu */ /* menu */
--menu-space: 0.75em; --menu-space: 0.75em;
--menu-edge-opacity: 0.75; --menu-edge-opacity: 0.75;

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

@ -1,4 +1,4 @@
<div id="menu-content-background" class="menu-content menu-content-overscroll menu-content-background is-hidden"> <div id="menu-content-background" class="menu-content menu-content-overscroll menu-content-background">
@@include("./background/color.html") @@include("./background/color.html")

76
src/html/menu/content/background/color.html
View File

@ -5,29 +5,81 @@
<div class="menu-item-form"> <div class="menu-item-form">
<div class="form-wrap"> <div class="form-wrap">
<input id="control-background-color-by-theme" class="control-background-color-by-theme" type="radio" name="control-background-color-by" value="theme" tabindex="-1"> <input id="control-background-color-by-theme" class="control-background-color-by-theme" type="radio" name="control-background-color-by" value="theme" tabindex="-1">
<label for="control-background-color-by-theme"><span class="label-icon"></span> Theme colour</label> <label for="control-background-color-by-theme">
</div> <span class="label-icon"></span>
<div class="form-helper"> <span class="label-block">
<p class="control-background-color-by-theme-helper form-helper-item">Use the Background colour defined by the Theme.</p> <span class="label-block-item">Theme colour</span>
<span class="label-block-item small muted">Use the Background colour defined by the Theme.</span>
</span>
</label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-background-color-by-custom" class="control-background-color-by-custom" type="radio" name="control-background-color-by" value="custom" tabindex="-1"> <input id="control-background-color-by-custom" class="control-background-color-by-custom" type="radio" name="control-background-color-by" value="custom" tabindex="-1">
<label for="control-background-color-by-custom"><span class="label-icon"></span> Custom colour</label> <label for="control-background-color-by-custom">
</div> <span class="label-icon"></span>
<div class="form-helper"> <span class="label-block">
<p class="control-background-color-by-custom-helper form-helper-item">Use a custom Background colour.</p> <span class="label-block-item">Custom colour</span>
</div> <span class="label-block-item small muted">Override the Theme colour.</span>
<div class="form-helper"> </span>
<p class="control-background-color-by-custom-helper form-helper-item">Take care as some colours may make the Clock, Date and other text unreadable.</p> </label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<div class="form-indent"> <div class="form-indent">
<div class="form-wrap"> <div class="form-wrap">
<div class="form-group form-group-block"> <div class="form-group form-group-block">
<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-color" class="form-group-item-half control-background-color-rgb-color" 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"> <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> </div>
<div class="form-helper">
<p class="control-background-color-by-custom-helper form-helper-item">Take care as some colours may make the Clock, Date and other text unreadable.</p>
</div>
<div class="form-indent">
<hr>
<div class="form-wrap">
<div class="form-group form-group-block">
<label for="control-background-color-hsl-h-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Hue</label>
<input id="control-background-color-hsl-h-range" class="control-background-color-hsl-h-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-color-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<div class="form-group form-group-block">
<label for="control-background-color-hsl-s-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Saturation</label>
<input id="control-background-color-hsl-s-range" class="control-background-color-hsl-s-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-color-hsl-s-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<div class="form-group form-group-block">
<label for="control-background-color-hsl-l-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Lightness</label>
<input id="control-background-color-hsl-l-range" class="control-background-color-hsl-l-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-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">
<div class="form-group form-group-block">
<label for="control-background-color-rgb-r-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Red</label>
<input id="control-background-color-rgb-r-range" class="control-background-color-rgb-r-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-color-rgb-r-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<div class="form-group form-group-block">
<label for="control-background-color-rgb-g-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Green</label>
<input id="control-background-color-rgb-g-range" class="control-background-color-rgb-g-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-color-rgb-g-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<div class="form-group form-group-block">
<label for="control-background-color-rgb-b-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Blue</label>
<input id="control-background-color-rgb-b-range" class="control-background-color-rgb-b-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-color-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

10
src/html/menu/content/bookmarks.html
View File

@ -1,4 +1,4 @@
<div id="menu-content-bookmarks" class="menu-content menu-content-overscroll menu-content-bookmarks is-hidden"> <div id="menu-content-bookmarks" class="menu-content menu-content-overscroll menu-content-bookmarks">
@@include("./bookmarks/area.html") @@include("./bookmarks/area.html")
@ -8,7 +8,7 @@
@@include("./bookmarks/content.html") @@include("./bookmarks/content.html")
@@include("./bookmarks/letcon.html") @@include("./bookmarks/visual.html")
@@include("./bookmarks/name.html") @@include("./bookmarks/name.html")
@ -16,12 +16,14 @@
@@include("./bookmarks/color.html") @@include("./bookmarks/color.html")
@@include("./bookmarks/accent.html")
@@include("./bookmarks/opacity.html")
@@include("./bookmarks/border.html") @@include("./bookmarks/border.html")
@@include("./bookmarks/orientation.html") @@include("./bookmarks/orientation.html")
@@include("./bookmarks/sort.html") @@include("./bookmarks/sort.html")
@@include("./bookmarks/accent.html")
</div> </div>

69
src/html/menu/content/bookmarks/accent.html
View File

@ -4,14 +4,75 @@
</div> </div>
<div class="menu-item-form"> <div class="menu-item-form">
<div class="form-wrap"> <div class="form-wrap">
<button class="control-link-accent-clear button button-line" tabindex="-1">Remove all override colours</button> <div class="form-group form-group-block">
<input id="control-link-item-accent-rgb-color" class="form-group-item-half control-link-item-accent-rgb-color" type="color" value="#000000" tabindex="1">
<input id="control-link-item-accent-rgb-text" class="form-group-item-half control-link-item-accent-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
</div>
</div>
<div class="form-helper">
<p class="control-link-item-color-helper form-helper-item">Apply an Accent override to all Bookmarks.</p>
<p class="control-link-item-color-helper form-helper-item">Accent overrides can also be changed by editing individual Bookmarks.</p>
</div>
<div class="form-wrap">
<div class="form-indent">
<hr>
<div class="form-wrap">
<div class="form-group form-group-block">
<label for="control-link-item-accent-hsl-h-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Hue</label>
<input id="control-link-item-accent-hsl-h-range" class="control-link-item-accent-hsl-h-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-accent-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<div class="form-group form-group-block">
<label for="control-link-item-accent-hsl-s-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Saturation</label>
<input id="control-link-item-accent-hsl-s-range" class="control-link-item-accent-hsl-s-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-accent-hsl-s-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<div class="form-group form-group-block">
<label for="control-link-item-accent-hsl-l-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Lightness</label>
<input id="control-link-item-accent-hsl-l-range" class="control-link-item-accent-hsl-l-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-accent-hsl-l-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<hr>
<div class="form-wrap">
<div class="form-group form-group-block">
<label for="control-link-item-accent-rgb-r-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Red</label>
<input id="control-link-item-accent-rgb-r-range" class="control-link-item-accent-rgb-r-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-accent-rgb-r-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<div class="form-group form-group-block">
<label for="control-link-item-accent-rgb-g-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Green</label>
<input id="control-link-item-accent-rgb-g-range" class="control-link-item-accent-rgb-g-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-accent-rgb-g-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<div class="form-group form-group-block">
<label for="control-link-item-accent-rgb-b-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Blue</label>
<input id="control-link-item-accent-rgb-b-range" class="control-link-item-accent-rgb-b-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-accent-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
</div>
</div> </div>
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<button class="control-link-accent-set button button-line" tabindex="-1">Add override colours</button> <div class="form-inline">
<button class="control-link-item-accent-apply button button-line" tabindex="-1">Apply to all</button>
<button class="control-link-item-accent-clear button button-line" tabindex="-1">Clear all</button>
</div>
</div> </div>
<div class="form-helper"> <hr>
<p class="control-link-accent-set-helper form-helper-item">Adds a unique override colour to each Bookmark.</p> <div class="form-wrap">
<div class="form-inline">
<button class="control-link-item-accent-rainbow button button-line" tabindex="-1">Apply unique accent to each</button>
</div>
</div> </div>
</div> </div>
</div> </div>

78
src/html/menu/content/bookmarks/color.html
View File

@ -1,42 +1,78 @@
<div id="menu-content-bookmarks-color" class="menu-content-item"> <div id="menu-content-bookmarks-color" class="menu-content-item">
<div class="menu-item-header"> <div class="menu-item-header">
<h1 class="menu-item-header-text">Colour</h1> <h1 class="menu-item-header-text">Colour override</h1>
</div> </div>
<div class="menu-item-form"> <div class="menu-item-form">
<div class="form-wrap"> <div class="form-wrap">
<input id="control-link-item-color-by-theme" class="control-link-item-color-by-theme" type="radio" name="control-link-item-color-by" value="theme" tabindex="-1"> <div class="form-group form-group-block">
<label for="control-link-item-color-by-theme"><span class="label-icon"></span> Theme colour</label> <input id="control-link-item-color-rgb-color" class="form-group-item-half control-link-item-color-rgb-color" 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>
<div class="form-helper"> <div class="form-helper">
<p class="control-link-item-color-by-theme-helper form-helper-item">Use the colour defined by the Theme.</p> <p class="control-link-item-color-helper form-helper-item">Apply a colour override to all Bookmarks.</p>
</div> <p class="control-link-item-color-helper form-helper-item">Take care as some colours may make the Letter/Icon and Name unreadable.</p>
<div class="form-wrap"> <p class="control-link-item-color-helper form-helper-item">Colour overrides can also be changed by editing individual Bookmarks.</p>
<input id="control-link-item-color-by-custom" class="control-link-item-color-by-custom" type="radio" name="control-link-item-color-by" value="custom" tabindex="-1">
<label for="control-link-item-color-by-custom"><span class="label-icon"></span> Custom colour</label>
</div>
<div class="form-helper">
<p class="control-link-item-color-by-custom-helper form-helper-item">Use a custom colour.</p>
</div>
<div class="form-helper">
<p class="control-link-item-color-by-custom-helper form-helper-item">Take care as some colours may make the Letter/Icon and Name unreadable.</p>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<div class="form-indent"> <div class="form-indent">
<hr>
<div class="form-wrap"> <div class="form-wrap">
<div class="form-group form-group-block"> <div class="form-group form-group-block">
<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"> <label for="control-link-item-color-hsl-h-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Hue</label>
<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"> <input id="control-link-item-color-hsl-h-range" class="control-link-item-color-hsl-h-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-color-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<div class="form-group form-group-block">
<label for="control-link-item-color-hsl-s-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Saturation</label>
<input id="control-link-item-color-hsl-s-range" class="control-link-item-color-hsl-s-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-color-hsl-s-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<div class="form-group form-group-block">
<label for="control-link-item-color-hsl-l-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Lightness</label>
<input id="control-link-item-color-hsl-l-range" class="control-link-item-color-hsl-l-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-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">
<div class="form-group form-group-block">
<label for="control-link-item-color-rgb-r-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Red</label>
<input id="control-link-item-color-rgb-r-range" class="control-link-item-color-rgb-r-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-color-rgb-r-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<div class="form-group form-group-block">
<label for="control-link-item-color-rgb-g-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Green</label>
<input id="control-link-item-color-rgb-g-range" class="control-link-item-color-rgb-g-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-color-rgb-g-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<div class="form-group form-group-block">
<label for="control-link-item-color-rgb-b-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Blue</label>
<input id="control-link-item-color-rgb-b-range" class="control-link-item-color-rgb-b-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-color-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-link-item-opacity-range">Opacity</label> <div class="form-inline">
<div class="form-group form-group-block"> <button class="control-link-item-color-apply button button-line" tabindex="-1">Apply to all</button>
<input id="control-link-item-opacity-range" class="control-link-item-opacity-range mr-3" type="range" value="0" tabindex="-1"> <button class="control-link-item-color-clear button button-line" tabindex="-1">Clear all</button>
<input class="control-link-item-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1"> </div>
<button class="control-link-item-opacity-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button> </div>
<hr>
<div class="form-wrap">
<div class="form-inline">
<button class="control-link-item-color-rainbow button button-line" tabindex="-1">Apply unique colour to each</button>
</div> </div>
</div> </div>
</div> </div>

48
src/html/menu/content/bookmarks/content.html
View File

@ -4,7 +4,7 @@
</div> </div>
<div class="menu-item-form"> <div class="menu-item-form">
<div class="form-wrap"> <div class="form-wrap">
<label class="control-link-item-display-alignment-label">Letter/Icon and Name position</label> <label class="control-link-item-display-alignment-label">Letter/Icon/Image and Name position</label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<div class="form-grid form-grid-3x3 control-link-item-display-alignment-grid"> <div class="form-grid form-grid-3x3 control-link-item-display-alignment-grid">
@ -85,32 +85,50 @@
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-link-item-display-direction-horizontal" class="control-link-item-display-direction-horizontal" type="radio" name="control-link-item-display-direction" value="horizontal" tabindex="-1"> <input id="control-link-item-display-direction-horizontal" class="control-link-item-display-direction-horizontal" type="radio" name="control-link-item-display-direction" value="horizontal" tabindex="-1">
<label for="control-link-item-display-direction-horizontal"><span class="label-icon"></span> Align horizontally</label> <label for="control-link-item-display-direction-horizontal">
<span class="label-icon"></span>
<span class="label-block">
<span class="label-block-item">Align horizontally</span>
<span class="label-block-item small muted">Works well with Bookmark Block Style.</span>
</span>
</label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-link-item-display-direction-vertical" class="control-link-item-display-direction-vertical" type="radio" name="control-link-item-display-direction" value="vertical" tabindex="-1"> <input id="control-link-item-display-direction-vertical" class="control-link-item-display-direction-vertical" type="radio" name="control-link-item-display-direction" value="vertical" tabindex="-1">
<label for="control-link-item-display-direction-vertical"><span class="label-icon"></span> Align vertically</label> <label for="control-link-item-display-direction-vertical">
<span class="label-icon"></span>
<span class="label-block">
<span class="label-block-item">Align vertically</span>
<span class="label-block-item small muted">Works well with Bookmark List Style.</span>
</span>
</label>
</div> </div>
<div class="form-helper"> <div class="form-helper">
<p class="control-link-item-display-direction-vertical-helper form-helper-item">Vertical alignment works well with Bookmark Block Style.</p> <p class="control-link-item-display-direction-helper form-helper-item">Only available when Letter/Icon/Image and Name are shown.</p>
</div>
<div class="form-helper">
<p class="control-link-item-display-direction-horizontal-helper form-helper-item">Horizontal alignment works well with Bookmark List Style.</p>
</div>
<div class="form-helper">
<p class="control-link-item-display-direction-helper form-helper-item">Only available when Letter/Icon and Name are shown.</p>
</div> </div>
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-link-item-display-order-letconname" class="control-link-item-display-order-letconname" type="radio" name="control-link-item-display-order" value="letconname" tabindex="-1"> <input id="control-link-item-display-order-visualname" class="control-link-item-display-order-visualname" type="radio" name="control-link-item-display-order" value="visualname" tabindex="-1">
<label for="control-link-item-display-order-letconname"><span class="label-icon"></span> Order Letter/Icon then Name</label> <label for="control-link-item-display-order-visualname">
<span class="label-icon"></span>
<span class="label-block">
<span class="label-block-item">Letter/Icon/Image then Name</span>
<span class="label-block-item small muted">Stack the Letter/Icon/Image before the Name.</span>
</span>
</label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-link-item-display-order-nameletcon" class="control-link-item-display-order-nameletcon" type="radio" name="control-link-item-display-order" value="nameletcon" tabindex="-1"> <input id="control-link-item-display-order-namevisual" class="control-link-item-display-order-namevisual" type="radio" name="control-link-item-display-order" value="namevisual" tabindex="-1">
<label for="control-link-item-display-order-nameletcon"><span class="label-icon"></span> Order Name then Letter/Icon</label> <label for="control-link-item-display-order-namevisual">
<span class="label-icon"></span>
<span class="label-block">
<span class="label-block-item">Name then Letter/Icon/Image</span>
<span class="label-block-item small muted">Stack the Name before the Letter/Icon/Image.</span>
</span>
</label>
</div> </div>
<div class="form-helper"> <div class="form-helper">
<p class="control-link-item-display-order-helper form-helper-item">Only available when Letter/Icon and Name are shown.</p> <p class="control-link-item-display-order-helper form-helper-item">Only available when Letter/Icon/Image and Name are shown.</p>
</div> </div>
</div> </div>
</div> </div>

32
src/html/menu/content/bookmarks/letcon.html
View File

@ -1,32 +0,0 @@
<div id="menu-content-bookmarks-letcon" class="menu-content-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Letter/Icon</h1>
</div>
<div class="menu-item-form">
<div class="form-wrap">
<input id="control-link-item-display-letcon-show" class="control-link-item-display-letcon-show" type="checkbox" tabindex="-1">
<label for="control-link-item-display-letcon-show"><span class="label-icon"></span> Show</label>
</div>
<div class="form-wrap">
<div class="form-indent">
<div class="form-wrap">
<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-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 button-line" 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-range">Icon size</label>
<div class="form-group form-group-block">
<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 button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
</div>
</div>
</div>
</div>

18
src/html/menu/content/bookmarks/opacity.html Normal file
View File

@ -0,0 +1,18 @@
<div id="menu-content-bookmarks-opacity" class="menu-content-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Opacity</h1>
</div>
<div class="menu-item-form">
<div class="form-wrap">
<label for="control-link-item-opacity-range">Color or background image</label>
<div class="form-group form-group-block">
<input id="control-link-item-opacity-range" class="control-link-item-opacity-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-link-item-opacity-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<div class="form-helper">
<p class="control-link-item-opacity-helper form-helper-item">Change the Colour or Background image Opacity of all Bookmark tiles.</p>
</div>
</div>
</div>

22
src/html/menu/content/bookmarks/style.html
View File

@ -5,17 +5,23 @@
<div class="menu-item-form"> <div class="menu-item-form">
<div class="form-wrap"> <div class="form-wrap">
<input id="control-link-style-block" class="control-link-style-block" type="radio" name="control-link-style" value="block" tabindex="-1"> <input id="control-link-style-block" class="control-link-style-block" type="radio" name="control-link-style" value="block" tabindex="-1">
<label for="control-link-style-block"><span class="label-icon"></span> Block</label> <label for="control-link-style-block">
</div> <span class="label-icon"></span>
<div class="form-helper"> <span class="label-block">
<p class="control-link-style-block-helper form-helper-item">Bookmark tiles more square shaped.</p> <span class="label-block-item">Block</span>
<span class="label-block-item small muted">Bookmark tiles more square shaped.</span>
</span>
</label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-link-style-list" class="control-link-style-list" type="radio" name="control-link-style" value="list" tabindex="-1"> <input id="control-link-style-list" class="control-link-style-list" type="radio" name="control-link-style" value="list" tabindex="-1">
<label for="control-link-style-list"><span class="label-icon"></span> List</label> <label for="control-link-style-list">
</div> <span class="label-icon"></span>
<div class="form-helper"> <span class="label-block">
<p class="control-link-style-list-helper form-helper-item">Bookmark tiles more short and wide.</p> <span class="label-block-item">List</span>
<span class="label-block-item small muted">Bookmark tiles more short and wide.</span>
</span>
</label>
</div> </div>
</div> </div>
</div> </div>

41
src/html/menu/content/bookmarks/visual.html Normal file
View File

@ -0,0 +1,41 @@
<div id="menu-content-bookmarks-visual" class="menu-content-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Letter/Icon/Image</h1>
</div>
<div class="menu-item-form">
<div class="form-wrap">
<input id="control-link-item-display-visual-show" class="control-link-item-display-visual-show" type="checkbox" tabindex="-1">
<label for="control-link-item-display-visual-show"><span class="label-icon"></span> Show</label>
</div>
<div class="form-wrap">
<div class="form-indent">
<div class="form-wrap">
<label for="control-link-item-display-visual-letter-size-range">Letter size</label>
<div class="form-group form-group-block">
<input id="control-link-item-display-visual-letter-size-range" class="control-link-item-display-visual-letter-size-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-display-visual-letter-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-link-item-display-visual-letter-size-default button button-line" 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-visual-icon-size-range">Icon size</label>
<div class="form-group form-group-block">
<input id="control-link-item-display-visual-icon-size-range" class="control-link-item-display-visual-icon-size-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-display-visual-icon-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-link-item-display-visual-icon-size-default button button-line" 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-visual-image-size-range">Image size</label>
<div class="form-group form-group-block">
<input id="control-link-item-display-visual-image-size-range" class="control-link-item-display-visual-image-size-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-display-visual-image-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-link-item-display-visual-image-size-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
</div>
</div>
</div>
</div>

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

@ -1,4 +1,4 @@
<div id="menu-content-coffee" class="menu-content menu-content-coffee is-hidden"> <div id="menu-content-coffee" class="menu-content menu-content-coffee">
@@include("./coffee/coffee.html") @@include("./coffee/coffee.html")

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

@ -1,4 +1,4 @@
<div id="menu-content-data" class="menu-content menu-content-overscroll menu-content-data is-hidden"> <div id="menu-content-data" class="menu-content menu-content-overscroll menu-content-data">
@@include("./data/restore.html") @@include("./data/restore.html")

4
src/html/menu/content/groups.html
View File

@ -1,7 +1,7 @@
<div id="menu-content-groups" class="menu-content menu-content-overscroll menu-content-groups is-hidden"> <div id="menu-content-groups" class="menu-content menu-content-overscroll menu-content-groups">
@@include("./groups/area.html") @@include("./groups/area.html")
@@include("./groups/order.html") @@include("./groups/order.html")
@@include("./groups/names.html") @@include("./groups/names.html")

2
src/html/menu/content/groups/names.html
View File

@ -10,7 +10,7 @@
</div> </div>
</div> </div>
<div class="form-helper"> <div class="form-helper">
<p class="control-group-name-helper form-helper-item">Individual Group Names can be shown or hidden from their respective edit controls.</p> <p class="control-group-name-helper form-helper-item">Group Names can also be changed by editing individual Groups.</p>
</div> </div>
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">

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

@ -10,7 +10,7 @@
</div> </div>
</div> </div>
<div class="form-helper"> <div class="form-helper">
<p class="control-group-openall-helper form-helper-item">Individual Group Open all buttons can be shown or hidden from their respective edit controls.</p> <p class="control-group-openall-helper form-helper-item">Group Open all buttons can also be changed by editing individual Groups.</p>
</div> </div>
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">

16
src/html/menu/content/groups/order.html
View File

@ -5,11 +5,23 @@
<div class="menu-item-form"> <div class="menu-item-form">
<div class="form-wrap"> <div class="form-wrap">
<input id="control-group-order-headerbody" class="control-group-order-headerbody" type="radio" name="control-group-order" value="headerbody" tabindex="1"> <input id="control-group-order-headerbody" class="control-group-order-headerbody" type="radio" name="control-group-order" value="headerbody" tabindex="1">
<label for="control-group-order-headerbody"><span class="label-icon"></span> Group Name then Bookmarks</label> <label for="control-group-order-headerbody">
<span class="label-icon"></span>
<span class="label-block">
<span class="label-block-item">Group Name then Bookmarks</span>
<span class="label-block-item small muted">Stack the Group name and controls area before the Bookmarks area.</span>
</span>
</label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-group-order-bodyheader" class="control-group-order-bodyheader" type="radio" name="control-group-order" value="bodyheader" tabindex="1"> <input id="control-group-order-bodyheader" class="control-group-order-bodyheader" type="radio" name="control-group-order" value="bodyheader" tabindex="1">
<label for="control-group-order-bodyheader"><span class="label-icon"></span> Bookmarks then Group Name</label> <label for="control-group-order-bodyheader">
<span class="label-icon"></span>
<span class="label-block">
<span class="label-block-item">Bookmarks then Group Name</span>
<span class="label-block-item small muted">Stack the Bookmarks area before the Group name and controls area.</span>
</span>
</label>
</div> </div>
</div> </div>
</div> </div>

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

@ -1,4 +1,4 @@
<div id="menu-content-header" class="menu-content menu-content-overscroll menu-content-header is-hidden"> <div id="menu-content-header" class="menu-content menu-content-overscroll menu-content-header">
@@include("./header/area.html") @@include("./header/area.html")

20
src/html/menu/content/header/alignment.html
View File

@ -38,17 +38,21 @@
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-area-align-center" class="control-header-area-align-center" type="radio" name="control-header-area-align" value="center" tabindex="-1"> <input id="control-header-area-align-center" class="control-header-area-align-center" type="radio" name="control-header-area-align" value="center" tabindex="-1">
<label for="control-header-area-align-center"><span class="label-icon"></span> Center</label> <label for="control-header-area-align-center"><span class="label-icon"></span>
</div> <span class="label-block">
<div class="form-helper"> <span class="label-block-item">Center</span>
<p class="control-header-area-align-center-helper form-helper-item">Header items aligned to each others centres.</p> <span class="label-block-item small muted">Header items aligned to each others centres.</span>
</span>
</label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-area-align-baseline" class="control-header-area-align-baseline" type="radio" name="control-header-area-align" value="baseline" tabindex="-1"> <input id="control-header-area-align-baseline" class="control-header-area-align-baseline" type="radio" name="control-header-area-align" value="baseline" tabindex="-1">
<label for="control-header-area-align-baseline"><span class="label-icon"></span> Baseline</label> <label for="control-header-area-align-baseline"><span class="label-icon"></span>
</div> <span class="label-block">
<div class="form-helper"> <span class="label-block-item">Baseline</span>
<p class="control-header-area-align-baseline-helper form-helper-item">Header items aligned to the text baseline. Useful for when the Clock, Date and other text is sized large and need to sit on a line.</p> <span class="label-block-item small muted">Header items aligned to the text baseline. Useful for when the Clock, Date and other text is sized large and need to sit on a line.</span>
</span>
</label>
</div> </div>
</div> </div>
</div> </div>

11
src/html/menu/content/header/clock.html
View File

@ -89,10 +89,13 @@
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-clock-newline" class="control-header-clock-newline" type="checkbox" tabindex="-1"> <input id="control-header-clock-newline" class="control-header-clock-newline" type="checkbox" tabindex="-1">
<label for="control-header-clock-newline"><span class="label-icon"></span> New line</label> <label for="control-header-clock-newline">
</div> <span class="label-icon"></span>
<div class="form-helper"> <span class="label-block">
<p class="control-header-clock-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p> <span class="label-block-item">New line</span>
<span class="label-block-item small muted">Force on to a new line and seperate from other Header items.</span>
</span>
</label>
</div> </div>
</div> </div>
</div> </div>

91
src/html/menu/content/header/color.html
View File

@ -11,44 +11,111 @@
<div class="form-indent"> <div class="form-indent">
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-color-style-always" class="control-header-color-style-always" type="radio" name="control-header-color-style" value="always" tabindex="-1"> <input id="control-header-color-style-always" class="control-header-color-style-always" type="radio" name="control-header-color-style" value="always" tabindex="-1">
<label for="control-header-color-style-always"><span class="label-icon"></span> Always visible</label> <label for="control-header-color-style-always">
</div> <span class="label-icon"></span>
<div class="form-helper"> <span class="label-block">
<p class="control-header-color-style-always-helper form-helper-item">Useful for when a Background Image is shown.</p> <span class="label-block-item">Always visible</span>
<span class="label-block-item small muted">Useful for when a Background Image is shown.</span>
</span>
</label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-color-style-scroll" class="control-header-color-style-scroll" type="radio" name="control-header-color-style" value="scroll" tabindex="-1"> <input id="control-header-color-style-scroll" class="control-header-color-style-scroll" type="radio" name="control-header-color-style" value="scroll" tabindex="-1">
<label for="control-header-color-style-scroll"><span class="label-icon"></span> Visible on scroll</label> <label for="control-header-color-style-scroll">
<span class="label-icon"></span>
<span class="label-block">
<span class="label-block-item">Visible on scroll</span>
<span class="label-block-item small muted">Useful for when Position is set to Sticky.</span>
</span>
</label>
</div> </div>
<div class="form-helper"> <div class="form-helper">
<p class="control-header-color-style-scroll-helper form-helper-item">The page may not scroll if Bookmarks are not shown.</p> <p class="control-header-color-style-helper form-helper-item">The page may not scroll if Bookmarks are not shown.</p>
</div> </div>
<div class="form-helper"> <div class="form-helper">
<p class="control-header-color-style-scroll-helper form-helper-item">May not be visible if Layout Alignment is Horizontal as the Bookmarks won't pass under the header.</p> <p class="control-header-color-style-helper form-helper-item">May not be visible if Layout Alignment is Horizontal as the Bookmarks won't pass under the header.</p>
</div> </div>
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-color-by-theme" class="control-header-color-by-theme" type="radio" name="control-header-color-by" value="theme" tabindex="-1"> <input id="control-header-color-by-theme" class="control-header-color-by-theme" type="radio" name="control-header-color-by" value="theme" tabindex="-1">
<label for="control-header-color-by-theme"><span class="label-icon"></span> Theme colour</label> <label for="control-header-color-by-theme">
<span class="label-icon"></span>
<span class="label-block">
<span class="label-block-item">Theme colour</span>
<span class="label-block-item small muted">Use the Background colour defined by the Theme.</span>
</span>
</label>
</div> </div>
<div class="form-helper"> <div class="form-helper">
<p class="control-header-color-by-theme-helper form-helper-item">Use the Background colour defined by the Theme.</p> <p class="control-header-color-by-theme-helper form-helper-item"></p>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-color-by-custom" class="control-header-color-by-custom" type="radio" name="control-header-color-by" value="custom" tabindex="-1"> <input id="control-header-color-by-custom" class="control-header-color-by-custom" type="radio" name="control-header-color-by" value="custom" tabindex="-1">
<label for="control-header-color-by-custom"><span class="label-icon"></span> Custom colour</label> <label for="control-header-color-by-custom">
<span class="label-icon"></span>
<span class="label-block">
<span class="label-block-item">Custom colour</span>
<span class="label-block-item small muted">Override the Theme colour.</span>
</span>
</label>
</div> </div>
<div class="form-helper"> <div class="form-helper">
<p class="control-header-color-by-custom-helper form-helper-item">Use a custom Background colour.</p> <p class="control-header-color-by-custom-helper form-helper-item"></p>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<div class="form-indent"> <div class="form-indent">
<div class="form-wrap"> <div class="form-wrap">
<div class="form-group form-group-block"> <div class="form-group form-group-block">
<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-color" class="form-group-item-half control-header-color-rgb-color" 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"> <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>
<div class="form-indent">
<hr>
<div class="form-wrap">
<div class="form-group form-group-block">
<label for="control-header-color-hsl-h-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Hue</label>
<input id="control-header-color-hsl-h-range" class="control-header-color-hsl-h-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-header-color-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<div class="form-group form-group-block">
<label for="control-header-color-hsl-s-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Saturation</label>
<input id="control-header-color-hsl-s-range" class="control-header-color-hsl-s-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-header-color-hsl-s-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<div class="form-group form-group-block">
<label for="control-header-color-hsl-l-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Lightness</label>
<input id="control-header-color-hsl-l-range" class="control-header-color-hsl-l-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-header-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">
<div class="form-group form-group-block">
<label for="control-header-color-rgb-r-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Red</label>
<input id="control-header-color-rgb-r-range" class="control-header-color-rgb-r-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-header-color-rgb-r-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<div class="form-group form-group-block">
<label for="control-header-color-rgb-g-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Green</label>
<input id="control-header-color-rgb-g-range" class="control-header-color-rgb-g-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-header-color-rgb-g-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
<div class="form-wrap">
<div class="form-group form-group-block">
<label for="control-header-color-rgb-b-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Blue</label>
<input id="control-header-color-rgb-b-range" class="control-header-color-rgb-b-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-header-color-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div>
</div>
</div>
</div> </div>
</div> </div>
<hr> <hr>

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

@ -8,7 +8,7 @@
<label for="control-header-coloraccent-show"><span class="label-icon"></span> Show</label> <label for="control-header-coloraccent-show"><span class="label-icon"></span> Show</label>
</div> </div>
<div class="form-helper"> <div class="form-helper">
<p class="control-header-coloraccent-show-helper form-helper-item">Colour and Accent can also be found under Theme.</p> <p class="control-header-coloraccent-show-helper form-helper-item">Colour and Accent controls can also be found under Theme.</p>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<div class="form-indent"> <div class="form-indent">
@ -37,10 +37,13 @@
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-coloraccent-newline" class="control-header-coloraccent-newline" type="checkbox" tabindex="-1"> <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> <label for="control-header-coloraccent-newline">
</div> <span class="label-icon"></span>
<div class="form-helper"> <span class="label-block">
<p class="control-header-coloraccent-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p> <span class="label-block-item">New line</span>
<span class="label-block-item small muted">Force on to a new line and seperate from other Header items.</span>
</span>
</label>
</div> </div>
</div> </div>
</div> </div>

33
src/html/menu/content/header/date.html
View File

@ -69,10 +69,13 @@
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-date-date-ordinal" class="control-header-date-date-ordinal" type="checkbox" tabindex="-1"> <input id="control-header-date-date-ordinal" class="control-header-date-date-ordinal" type="checkbox" tabindex="-1">
<label for="control-header-date-date-ordinal"><span class="label-icon"></span> Ordinal numbers</label> <label for="control-header-date-date-ordinal">
</div> <span class="label-icon"></span>
<div class="form-helper"> <span class="label-block">
<p class="control-header-date-date-ordinal-helper form-helper-item">Display Date as 1st, 2nd, 3rd, 4th etc.</p> <span class="label-block-item">Ordinal numbers</span>
<span class="label-block-item small muted">Display Date as 1st, 2nd, 3rd, 4th etc.</span>
</span>
</label>
</div> </div>
</div> </div>
</div> </div>
@ -91,10 +94,13 @@
<div class="form-indent"> <div class="form-indent">
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-date-month-ordinal" class="control-header-date-month-ordinal" type="checkbox" tabindex="-1"> <input id="control-header-date-month-ordinal" class="control-header-date-month-ordinal" type="checkbox" tabindex="-1">
<label for="control-header-date-month-ordinal"><span class="label-icon"></span> Ordinal numbers</label> <label for="control-header-date-month-ordinal">
</div> <span class="label-icon"></span>
<div class="form-helper"> <span class="label-block">
<p class="control-header-date-month-ordinal-helper form-helper-item">Display Month as 1st, 2nd, 3rd, 4th etc.</p> <span class="label-block-item">Ordinal numbers</span>
<span class="label-block-item small muted">Display Month as 1st, 2nd, 3rd, 4th etc.</span>
</span>
</label>
</div> </div>
</div> </div>
</div> </div>
@ -175,10 +181,13 @@
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-date-newline" class="control-header-date-newline" type="checkbox" tabindex="-1"> <input id="control-header-date-newline" class="control-header-date-newline" type="checkbox" tabindex="-1">
<label for="control-header-date-newline"><span class="label-icon"></span> New line</label> <label for="control-header-date-newline">
</div> <span class="label-icon"></span>
<div class="form-helper"> <span class="label-block">
<p class="control-header-date-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p> <span class="label-block-item">New line</span>
<span class="label-block-item small muted">Force on to a new line and seperate from other Header items.</span>
</span>
</label>
</div> </div>
</div> </div>
</div> </div>

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

@ -29,10 +29,13 @@
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-editadd-newline" class="control-header-editadd-newline" type="checkbox" tabindex="-1"> <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> <label for="control-header-editadd-newline">
</div> <span class="label-icon"></span>
<div class="form-helper"> <span class="label-block">
<p class="control-header-editadd-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p> <span class="label-block-item">New line</span>
<span class="label-block-item small muted">Force on to a new line and seperate from other Header items.</span>
</span>
</label>
</div> </div>
</div> </div>
</div> </div>

11
src/html/menu/content/header/greeting.html
View File

@ -41,10 +41,13 @@
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-greeting-newline" class="control-header-greeting-newline" type="checkbox" tabindex="-1"> <input id="control-header-greeting-newline" class="control-header-greeting-newline" type="checkbox" tabindex="-1">
<label for="control-header-greeting-newline"><span class="label-icon"></span> New line</label> <label for="control-header-greeting-newline">
</div> <span class="label-icon"></span>
<div class="form-helper"> <span class="label-block">
<p class="control-header-greeting-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p> <span class="label-block-item">New line</span>
<span class="label-block-item small muted">Force on to a new line and seperate from other Header items.</span>
</span>
</label>
</div> </div>
</div> </div>
</div> </div>

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

@ -23,10 +23,13 @@
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-menu-newline" class="control-header-menu-newline" type="checkbox" tabindex="-1"> <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> <label for="control-header-menu-newline">
</div> <span class="label-icon"></span>
<div class="form-helper"> <span class="label-block">
<p class="control-header-menu-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p> <span class="label-block-item">New line</span>
<span class="label-block-item small muted">Force on to a new line and seperate from other Header items.</span>
</span>
</label>
</div> </div>
</div> </div>
</div> </div>

22
src/html/menu/content/header/position.html
View File

@ -5,17 +5,23 @@
<div class="menu-item-form"> <div class="menu-item-form">
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-position-sticky" class="control-header-position-sticky" type="radio" name="control-header-position" value="sticky" tabindex="-1"> <input id="control-header-position-sticky" class="control-header-position-sticky" type="radio" name="control-header-position" value="sticky" tabindex="-1">
<label for="control-header-position-sticky"><span class="label-icon"></span> Sticky</label> <label for="control-header-position-sticky">
</div> <span class="label-icon"></span>
<div class="form-helper"> <span class="label-block">
<p class="control-header-position-sticky-helper form-helper-item">Header sticks to the page when scrolling up or down.</p> <span class="label-block-item">Sticky</span>
<span class="label-block-item small muted">Header sticks to the page when scrolling up or down.</span>
</span>
</label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-position-inline" class="control-header-position-inline" type="radio" name="control-header-position" value="inline" tabindex="-1"> <input id="control-header-position-inline" class="control-header-position-inline" type="radio" name="control-header-position" value="inline" tabindex="-1">
<label for="control-header-position-inline"><span class="label-icon"></span> Inline</label> <label for="control-header-position-inline">
</div> <span class="label-icon"></span>
<div class="form-helper"> <span class="label-block">
<p class="control-header-position-inline-helper form-helper-item">Header moves inline with the content when scrolling up or down.</p> <span class="label-block-item">Inline</span>
<span class="label-block-item small muted">Header moves inline with the content when scrolling up or down.</span>
</span>
</label>
</div> </div>
<div class="form-helper"> <div class="form-helper">
<p class="control-header-position-helper form-helper-item">Only available when Layout Alignment is Vertical.</p> <p class="control-header-position-helper form-helper-item">Only available when Layout Alignment is Vertical.</p>

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

@ -14,17 +14,23 @@
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-search-width-by-auto" class="control-header-search-width-by-auto" type="radio" name="control-header-search-width" value="auto" tabindex="-1"> <input id="control-header-search-width-by-auto" class="control-header-search-width-by-auto" type="radio" name="control-header-search-width" value="auto" tabindex="-1">
<label for="control-header-search-width-by-auto"><span class="label-icon"></span> Auto</label> <label for="control-header-search-width-by-auto">
</div> <span class="label-icon"></span>
<div class="form-helper"> <span class="label-block">
<p class="control-header-search-width-by-auto-helper form-helper-item">Search box will grow to best fit available space.</p> <span class="label-block-item">Auto</span>
<span class="label-block-item small muted">Search box will grow to best fit available space.</span>
</span>
</label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-search-width-by-custom" class="control-header-search-width-by-custom" type="radio" name="control-header-search-width" value="custom" tabindex="-1"> <input id="control-header-search-width-by-custom" class="control-header-search-width-by-custom" type="radio" name="control-header-search-width" value="custom" tabindex="-1">
<label for="control-header-search-width-by-custom"><span class="label-icon"></span> Custom</label> <label for="control-header-search-width-by-custom">
</div> <span class="label-icon"></span>
<div class="form-helper"> <span class="label-block">
<p class="control-header-search-width-by-custom-helper form-helper-item">Define how wide the Search box should be inside the Header Area.</p> <span class="label-block-item">Custom</span>
<span class="label-block-item small muted">Define how wide the Search box should be inside the Header Area.</span>
</span>
</label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<div class="form-indent"> <div class="form-indent">
@ -138,10 +144,13 @@
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-search-newline" class="control-header-search-newline" type="checkbox" tabindex="-1"> <input id="control-header-search-newline" class="control-header-search-newline" type="checkbox" tabindex="-1">
<label for="control-header-search-newline"><span class="label-icon"></span> New line</label> <label for="control-header-search-newline">
</div> <span class="label-icon"></span>
<div class="form-helper"> <span class="label-block">
<p class="control-header-search-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p> <span class="label-block-item">New line</span>
<span class="label-block-item small muted">Force on to a new line and seperate from other Header items.</span>
</span>
</label>
</div> </div>
</div> </div>
</div> </div>

11
src/html/menu/content/header/transitional.html
View File

@ -35,10 +35,13 @@
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-header-transitional-newline" class="control-header-transitional-newline" type="checkbox" tabindex="-1"> <input id="control-header-transitional-newline" class="control-header-transitional-newline" type="checkbox" tabindex="-1">
<label for="control-header-transitional-newline"><span class="label-icon"></span> New line</label> <label for="control-header-transitional-newline">
</div> <span class="label-icon"></span>
<div class="form-helper"> <span class="label-block">
<p class="control-header-transitional-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p> <span class="label-block-item">New line</span>
<span class="label-block-item small muted">Force on to a new line and seperate from other Header items.</span>
</span>
</label>
</div> </div>
</div> </div>
</div> </div>

38
src/html/menu/content/layout/alignment.html
View File

@ -52,26 +52,44 @@
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-layout-direction-horizontal" class="control-layout-direction-horizontal" type="radio" name="control-layout-direction" value="horizontal" tabindex="-1"> <input id="control-layout-direction-horizontal" class="control-layout-direction-horizontal" type="radio" name="control-layout-direction" value="horizontal" tabindex="-1">
<label for="control-layout-direction-horizontal"><span class="label-icon"></span>Align horizontal</label> <label for="control-layout-direction-horizontal">
<span class="label-icon"></span>
<span class="label-block">
<span class="label-block-item">Align horizontal</span>
<span class="label-block-item small muted">Stack the Header and Bookmarks in a row side by side.</span>
</span>
</label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-layout-direction-vertical" class="control-layout-direction-vertical" type="radio" name="control-layout-direction" value="vertical" tabindex="-1"> <input id="control-layout-direction-vertical" class="control-layout-direction-vertical" type="radio" name="control-layout-direction" value="vertical" tabindex="-1">
<label for="control-layout-direction-vertical"><span class="label-icon"></span>Align vertical</label> <label for="control-layout-direction-vertical">
</div> <span class="label-icon"></span>
<div class="form-helper"> <span class="label-block">
<p class="control-layout-direction-vertical-helper form-helper-item">Horizontal alignment stack the Header and Bookmarks in a row side by side.</p> <span class="label-block-item">Align vertical</span>
</div> <span class="label-block-item small muted">Stack the Header and Bookmarks in a column one above the other.</span>
<div class="form-helper"> </span>
<p class="control-layout-direction-horizontal-helper form-helper-item">Vertical alignment stacks the Header and Bookmarks in a column one above the other.</p> </label>
</div> </div>
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-layout-order-headerlink" class="control-layout-order-headerlink" type="radio" name="control-layout-order" value="headerlink" tabindex="-1"> <input id="control-layout-order-headerlink" class="control-layout-order-headerlink" type="radio" name="control-layout-order" value="headerlink" tabindex="-1">
<label for="control-layout-order-headerlink"><span class="label-icon"></span> Header then Bookmarks</label> <label for="control-layout-order-headerlink">
<span class="label-icon"></span>
<span class="label-block">
<span class="label-block-item">Header then Bookmarks</span>
<span class="label-block-item small muted">Order the Header area to appear before the Bookmarks area.</span>
</span>
</label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<input id="control-layout-order-linkheader" class="control-layout-order-linkheader" type="radio" name="control-layout-order" value="linkheader" tabindex="-1"> <input id="control-layout-order-linkheader" class="control-layout-order-linkheader" type="radio" name="control-layout-order" value="linkheader" tabindex="-1">
<label for="control-layout-order-linkheader"><span class="label-icon"></span> Bookmarks then Header</label> <label for="control-layout-order-linkheader">
<span class="label-icon"></span>
<span class="label-block">
<span class="label-block-item">Bookmarks then Header</span>
<span class="label-block-item small muted">Order the Bookmarks area to appear before the Header area.</span>
</span>
</label>
</div> </div>
<div class="form-helper"> <div class="form-helper">
<p class="control-layout-order-helper form-helper-item">Only available when Bookmarks are shown.</p> <p class="control-layout-order-helper form-helper-item">Only available when Bookmarks are shown.</p>

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

@ -1,4 +1,4 @@
<div id="menu-content-nighttab" class="menu-content menu-content-nighttab is-hidden"> <div id="menu-content-nighttab" class="menu-content menu-content-nighttab">
@@include("./nighttab/nighttab.html") @@include("./nighttab/nighttab.html")

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

@ -1,4 +1,4 @@
<div id="menu-content-theme" class="menu-content menu-content-overscroll menu-content-theme is-hidden"> <div id="menu-content-theme" class="menu-content menu-content-overscroll menu-content-theme">
@@include("./theme/preset.html") @@include("./theme/preset.html")

12
src/html/menu/content/theme/accent.html
View File

@ -20,44 +20,44 @@
<div class="form-indent"> <div class="form-indent">
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-theme-accent-hsl-h-range">Hue</label>
<div class="form-group form-group-block"> <div class="form-group form-group-block">
<label for="control-theme-accent-hsl-h-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Hue</label>
<input id="control-theme-accent-hsl-h-range" class="control-theme-accent-hsl-h-range mr-3" type="range" value="0" tabindex="-1"> <input id="control-theme-accent-hsl-h-range" class="control-theme-accent-hsl-h-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-accent-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1"> <input class="control-theme-accent-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div> </div>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-theme-accent-hsl-s-range">Saturation</label>
<div class="form-group form-group-block"> <div class="form-group form-group-block">
<label for="control-theme-accent-hsl-s-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Saturation</label>
<input id="control-theme-accent-hsl-s-range" class="control-theme-accent-hsl-s-range mr-3" type="range" value="0" tabindex="-1"> <input id="control-theme-accent-hsl-s-range" class="control-theme-accent-hsl-s-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-accent-hsl-s-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1"> <input class="control-theme-accent-hsl-s-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div> </div>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-theme-accent-hsl-l-range">Lightness</label>
<div class="form-group form-group-block"> <div class="form-group form-group-block">
<label for="control-theme-accent-hsl-l-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Lightness</label>
<input id="control-theme-accent-hsl-l-range" class="control-theme-accent-hsl-l-range mr-3" type="range" value="0" tabindex="-1"> <input id="control-theme-accent-hsl-l-range" class="control-theme-accent-hsl-l-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-accent-hsl-l-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1"> <input class="control-theme-accent-hsl-l-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div> </div>
</div> </div>
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-theme-accent-rgb-r-range">Red</label>
<div class="form-group form-group-block"> <div class="form-group form-group-block">
<label for="control-theme-accent-rgb-r-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Red</label>
<input id="control-theme-accent-rgb-r-range" class="control-theme-accent-rgb-r-range mr-3" type="range" value="0" tabindex="-1"> <input id="control-theme-accent-rgb-r-range" class="control-theme-accent-rgb-r-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-accent-rgb-r-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1"> <input class="control-theme-accent-rgb-r-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div> </div>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-theme-accent-rgb-g-range">Green</label>
<div class="form-group form-group-block"> <div class="form-group form-group-block">
<label for="control-theme-accent-rgb-g-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Green</label>
<input id="control-theme-accent-rgb-g-range" class="control-theme-accent-rgb-g-range mr-3" type="range" value="0" tabindex="-1"> <input id="control-theme-accent-rgb-g-range" class="control-theme-accent-rgb-g-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-accent-rgb-g-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1"> <input class="control-theme-accent-rgb-g-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div> </div>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-theme-accent-rgb-b-range">Blue</label>
<div class="form-group form-group-block"> <div class="form-group form-group-block">
<label for="control-theme-accent-rgb-b-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Blue</label>
<input id="control-theme-accent-rgb-b-range" class="control-theme-accent-rgb-b-range mr-3" type="range" value="0" tabindex="-1"> <input id="control-theme-accent-rgb-b-range" class="control-theme-accent-rgb-b-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-theme-accent-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1"> <input class="control-theme-accent-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div> </div>

18
src/html/menu/content/theme/color.html
View File

@ -91,55 +91,59 @@
<button class="control-theme-color-rgb-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button> <button class="control-theme-color-rgb-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div> </div>
</div> </div>
<div class="form-helper"> <div class="form-helper mb-0">
<p class="control-theme-color-helper form-helper-item">Light and dark shades from this colour are used across nightTabs.</p> <p class="control-theme-color-helper form-helper-item">Light and dark shades from this colour are used across nightTabs.</p>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<div class="form-indent"> <div class="form-indent">
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-theme-color-hsl-h-range">Hue</label>
<div class="form-group form-group-block"> <div class="form-group form-group-block">
<label for="control-theme-color-hsl-h-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Hue</label>
<input id="control-theme-color-hsl-h-range" class="control-theme-color-hsl-h-range mr-3" type="range" value="0" tabindex="-1"> <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"> <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> </div>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-theme-color-hsl-s-range">Saturation</label>
<div class="form-group form-group-block"> <div class="form-group form-group-block">
<label for="control-theme-color-hsl-s-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Saturation</label>
<input id="control-theme-color-hsl-s-range" class="control-theme-color-hsl-s-range mr-3" type="range" value="0" tabindex="-1"> <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"> <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> </div>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-theme-color-hsl-l-range">Lightness</label>
<div class="form-group form-group-block"> <div class="form-group form-group-block">
<label for="control-theme-color-hsl-l-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Lightness</label>
<input id="control-theme-color-hsl-l-range" class="control-theme-color-hsl-l-range mr-3" type="range" value="0" tabindex="-1"> <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"> <input class="control-theme-color-hsl-l-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div> </div>
</div> </div>
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-theme-color-rgb-r-range">Red</label>
<div class="form-group form-group-block"> <div class="form-group form-group-block">
<label for="control-theme-color-rgb-r-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Red</label>
<input id="control-theme-color-rgb-r-range" class="control-theme-color-rgb-r-range mr-3" type="range" value="0" tabindex="-1"> <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"> <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> </div>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-theme-color-rgb-g-range">Green</label>
<div class="form-group form-group-block"> <div class="form-group form-group-block">
<label for="control-theme-color-rgb-g-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Green</label>
<input id="control-theme-color-rgb-g-range" class="control-theme-color-rgb-g-range mr-3" type="range" value="0" tabindex="-1"> <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"> <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> </div>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-theme-color-rgb-b-range">Blue</label>
<div class="form-group form-group-block"> <div class="form-group form-group-block">
<label for="control-theme-color-rgb-b-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Blue</label>
<input id="control-theme-color-rgb-b-range" class="control-theme-color-rgb-b-range mr-3" type="range" value="0" tabindex="-1"> <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"> <input class="control-theme-color-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
</div> </div>
</div> </div>
</div>
</div>
<div class="form-wrap">
<div class="form-indent">
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-theme-color-contrast-light-range">Light shade contrast</label> <label for="control-theme-color-contrast-light-range">Light shade contrast</label>

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

@ -36,14 +36,15 @@
<a href="#menu-content-bookmarks-alignment" class="menu-nav-sub button button-small" tabindex="-1">Alignment</a> <a href="#menu-content-bookmarks-alignment" class="menu-nav-sub button button-small" tabindex="-1">Alignment</a>
<a href="#menu-content-bookmarks-bookmarks" class="menu-nav-sub button button-small" tabindex="-1">Bookmarks</a> <a href="#menu-content-bookmarks-bookmarks" class="menu-nav-sub button button-small" tabindex="-1">Bookmarks</a>
<a href="#menu-content-bookmarks-content" class="menu-nav-sub button button-small" tabindex="-1">Content</a> <a href="#menu-content-bookmarks-content" class="menu-nav-sub button button-small" tabindex="-1">Content</a>
<a href="#menu-content-bookmarks-letcon" class="menu-nav-sub button button-small" tabindex="-1">Letter/Icon</a> <a href="#menu-content-bookmarks-visual" class="menu-nav-sub button button-small" tabindex="-1">Letter/Icon/Image</a>
<a href="#menu-content-bookmarks-name" class="menu-nav-sub button button-small" tabindex="-1">Name</a> <a href="#menu-content-bookmarks-name" class="menu-nav-sub button button-small" tabindex="-1">Name</a>
<a href="#menu-content-bookmarks-style" class="menu-nav-sub button button-small" tabindex="-1">Style</a> <a href="#menu-content-bookmarks-style" class="menu-nav-sub button button-small" tabindex="-1">Style</a>
<a href="#menu-content-bookmarks-color" class="menu-nav-sub button button-small" tabindex="-1">Colour</a> <a href="#menu-content-bookmarks-color" class="menu-nav-sub button button-small" tabindex="-1">Colour override</a>
<a href="#menu-content-bookmarks-accent" class="menu-nav-sub button button-small" tabindex="-1">Accent override</a>
<a href="#menu-content-bookmarks-opacity" class="menu-nav-sub button button-small" tabindex="-1">Opacity</a>
<a href="#menu-content-bookmarks-border" class="menu-nav-sub button button-small" tabindex="-1">Border</a> <a href="#menu-content-bookmarks-border" class="menu-nav-sub button button-small" tabindex="-1">Border</a>
<a href="#menu-content-bookmarks-orientation" class="menu-nav-sub button button-small" tabindex="-1">Orientation</a> <a href="#menu-content-bookmarks-orientation" class="menu-nav-sub button button-small" tabindex="-1">Orientation</a>
<a href="#menu-content-bookmarks-sort" class="menu-nav-sub button button-small" tabindex="-1">Sort</a> <a href="#menu-content-bookmarks-sort" class="menu-nav-sub button button-small" tabindex="-1">Sort</a>
<a href="#menu-content-bookmarks-accent" class="menu-nav-sub button button-small" tabindex="-1">Accent override</a>
</div> </div>
</div> </div>
<div class="menu-nav-item"> <div class="menu-nav-item">

2
src/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" style="background-color: rgb(25, 25, 25)"> <html lang="en" style="background-color: rgb(0, 0, 0)">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">

27
src/js/background.js
View File

@ -42,6 +42,33 @@ var background = (function() {
} }
}; };
mod.color = {
hsl: function() {
var hsl = helper.convertColor.rgb.hsl(state.get.current().background.color.rgb);
helper.setObject({
object: state.get.current(),
path: "background.color.hsl",
newValue: {
h: Math.round(hsl.h),
s: Math.round(hsl.s),
l: Math.round(hsl.l)
}
});
},
rgb: function() {
var rgb = helper.convertColor.hsl.rgb(state.get.current().background.color.hsl);
helper.setObject({
object: state.get.current(),
path: "background.color.rgb",
newValue: {
r: Math.round(rgb.r),
g: Math.round(rgb.g),
b: Math.round(rgb.b)
}
});
}
};
var bind = {}; var bind = {};
bind.feedback = { bind.feedback = {

408
src/js/bookmarks.js
View File

@ -11,165 +11,255 @@ var bookmarks = (function() {
show: true show: true
}, },
items: [{ items: [{
display: "icon", visual:{
letter: "AS", display: "icon",
icon: { letter: "AS",
name: "dice-d20", image: null,
prefix: "fas", icon: {
label: "Dice D20" name: "dice-d20",
prefix: "fas",
label: "Dice D20"
}
}, },
name: "awesomeSheet", name: "awesomeSheet",
url: "https://zombiefox.github.io/awesomeSheet/", url: "https://zombiefox.github.io/awesomeSheet/",
accent: { accent: {
override: false, by: "theme",
color: { hsl: {
hsl: { h: 0,
h: 0, s: 0,
s: 0, l: 0
l: 0 },
}, rgb: {
rgb: { r: 0,
r: 0, g: 0,
g: 0, b: 0
b: 0
}
} }
}, },
color: {
by: "theme",
hsl: {
h: 0,
s: 0,
l: 0
},
rgb: {
r: 0,
g: 0,
b: 0
}
},
image: "",
searchMatch: false, searchMatch: false,
timeStamp: 1546453104010 timeStamp: 1546453104010
}, { }, {
display: "letter", visual:{
letter: "AZ", display: "letter",
icon: { letter: "AZ",
name: "amazon", image: null,
prefix: "fab", icon: {
label: "Amazon" name: "amazon",
prefix: "fab",
label: "Amazon"
}
}, },
name: "Amazon", name: "Amazon",
url: "https://www.amazon.co.uk/", url: "https://www.amazon.co.uk/",
accent: { accent: {
override: false, by: "theme",
color: { hsl: {
hsl: { h: 0,
h: 0, s: 0,
s: 0, l: 0
l: 0 },
}, rgb: {
rgb: { r: 0,
r: 0, g: 0,
g: 0, b: 0
b: 0
}
} }
}, },
color: {
by: "theme",
hsl: {
h: 0,
s: 0,
l: 0
},
rgb: {
r: 0,
g: 0,
b: 0
}
},
image: "",
searchMatch: false, searchMatch: false,
timeStamp: 1546453107633 timeStamp: 1546453107633
}, { }, {
display: "letter", visual:{
letter: "GM", display: "letter",
icon: { letter: "GM",
name: "envelope", image: null,
prefix: "fas", icon: {
label: "Envelope" name: "envelope",
prefix: "fas",
label: "Envelope"
}
}, },
name: "Gmail", name: "Gmail",
url: "https://mail.google.com/", url: "https://mail.google.com/",
accent: { accent: {
override: false, by: "theme",
color: { hsl: {
hsl: { h: 0,
h: 0, s: 0,
s: 0, l: 0
l: 0 },
}, rgb: {
rgb: { r: 0,
r: 0, g: 0,
g: 0, b: 0
b: 0
}
} }
}, },
color: {
by: "theme",
hsl: {
h: 0,
s: 0,
l: 0
},
rgb: {
r: 0,
g: 0,
b: 0
}
},
image: "",
searchMatch: false, searchMatch: false,
timeStamp: 1546453110265 timeStamp: 1546453110265
}, { }, {
display: "icon", visual:{
letter: "R", display: "icon",
icon: { letter: "R",
name: "reddit-alien", image: null,
prefix: "fab", icon: {
label: "reddit Alien" name: "reddit-alien",
prefix: "fab",
label: "reddit Alien"
}
}, },
name: "Reddit", name: "Reddit",
url: "https://www.reddit.com/", url: "https://www.reddit.com/",
accent: { accent: {
override: false, by: "theme",
color: { hsl: {
hsl: { h: 0,
h: 0, s: 0,
s: 0, l: 0
l: 0 },
}, rgb: {
rgb: { r: 0,
r: 0, g: 0,
g: 0, b: 0
b: 0
}
} }
}, },
color: {
by: "theme",
hsl: {
h: 0,
s: 0,
l: 0
},
rgb: {
r: 0,
g: 0,
b: 0
}
},
image: "",
searchMatch: false, searchMatch: false,
timeStamp: 1546453111491 timeStamp: 1546453111491
}, { }, {
display: "icon", visual:{
letter: "N", display: "icon",
icon: { letter: "N",
name: "film", image: null,
prefix: "fas", icon: {
label: "Film" name: "film",
prefix: "fas",
label: "Film"
}
}, },
name: "Netflix", name: "Netflix",
url: "https://www.netflix.com/", url: "https://www.netflix.com/",
accent: { accent: {
override: false, by: "theme",
color: { hsl: {
hsl: { h: 0,
h: 0, s: 0,
s: 0, l: 0
l: 0 },
}, rgb: {
rgb: { r: 0,
r: 0, g: 0,
g: 0, b: 0
b: 0
}
} }
}, },
color: {
by: "theme",
hsl: {
h: 0,
s: 0,
l: 0
},
rgb: {
r: 0,
g: 0,
b: 0
}
},
image: "",
searchMatch: false, searchMatch: false,
timeStamp: 1546453104460 timeStamp: 1546453104460
}, { }, {
display: "letter", visual:{
letter: "DR", display: "letter",
icon: { letter: "DR",
name: null, image: null,
prefix: null, icon: {
label: null name: null,
prefix: null,
label: null
}
}, },
name: "Drive", name: "Drive",
url: "https://drive.google.com/drive/", url: "https://drive.google.com/drive/",
accent: { accent: {
override: false, by: "theme",
color: { hsl: {
hsl: { h: 0,
h: 0, s: 0,
s: 0, l: 0
l: 0 },
}, rgb: {
rgb: { r: 0,
r: 0, g: 0,
g: 0, b: 0
b: 0
}
} }
}, },
color: {
by: "theme",
hsl: {
h: 0,
s: 0,
l: 0
},
rgb: {
r: 0,
g: 0,
b: 0
}
},
image: "",
searchMatch: false, searchMatch: false,
timeStamp: 1546453111953 timeStamp: 1546453111953
}] }]
@ -182,57 +272,87 @@ var bookmarks = (function() {
show: true show: true
}, },
items: [{ items: [{
display: "icon", visual:{
letter: "DEV", display: "icon",
icon: { letter: "DEV",
name: "code", image: null,
prefix: "fas", icon: {
label: "Code" name: "code",
prefix: "fas",
label: "Code"
}
}, },
name: "Devdocs", name: "Devdocs",
url: "http://devdocs.io/", url: "http://devdocs.io/",
accent: { accent: {
override: false, by: "theme",
color: { hsl: {
hsl: { h: 0,
h: 0, s: 0,
s: 0, l: 0
l: 0 },
}, rgb: {
rgb: { r: 0,
r: 0, g: 0,
g: 0, b: 0
b: 0
}
} }
}, },
color: {
by: "theme",
hsl: {
h: 0,
s: 0,
l: 0
},
rgb: {
r: 0,
g: 0,
b: 0
}
},
image: "",
searchMatch: false, searchMatch: false,
timeStamp: 1546453101749 timeStamp: 1546453101749
}, { }, {
display: "icon", visual:{
letter: "GIT", display: "icon",
icon: { letter: "GIT",
name: "github", image: null,
prefix: "fab", icon: {
label: "GitHub" name: "github",
prefix: "fab",
label: "GitHub"
}
}, },
name: "Github", name: "Github",
url: "https://github.com/", url: "https://github.com/",
accent: { accent: {
override: false, by: "theme",
color: { hsl: {
hsl: { h: 0,
h: 0, s: 0,
s: 0, l: 0
l: 0 },
}, rgb: {
rgb: { r: 0,
r: 0, g: 0,
g: 0, b: 0
b: 0
}
} }
}, },
color: {
by: "theme",
hsl: {
h: 0,
s: 0,
l: 0
},
rgb: {
r: 0,
g: 0,
b: 0
}
},
image: "",
searchMatch: false, searchMatch: false,
timeStamp: 1546453108926 timeStamp: 1546453108926
}] }]

3195
src/js/control.js
View File

File diff suppressed because it is too large Load Diff

27
src/js/header.js
View File

@ -10,6 +10,33 @@ var header = (function() {
} }
}; };
mod.color = {
hsl: function() {
var hsl = helper.convertColor.rgb.hsl(state.get.current().header.color.rgb);
helper.setObject({
object: state.get.current(),
path: "header.color.hsl",
newValue: {
h: Math.round(hsl.h),
s: Math.round(hsl.s),
l: Math.round(hsl.l)
}
});
},
rgb: function() {
var rgb = helper.convertColor.hsl.rgb(state.get.current().header.color.hsl);
helper.setObject({
object: state.get.current(),
path: "header.color.rgb",
newValue: {
r: Math.round(rgb.r),
g: Math.round(rgb.g),
b: Math.round(rgb.b)
}
});
}
};
var bind = {}; var bind = {};
bind.resize = function() { bind.resize = function() {

1719
src/js/link.js
View File

File diff suppressed because it is too large Load Diff

3
src/js/menu.js
View File

@ -172,7 +172,7 @@ var menu = (function() {
var allMenuNavBody = helper.eA(".menu-subnav"); var allMenuNavBody = helper.eA(".menu-subnav");
allMenuNavBody.forEach(function(arrayItem, index) { allMenuNavBody.forEach(function(arrayItem, index) {
helper.addClass(arrayItem, "active"); helper.addClass(arrayItem, "active");
arrayItem.setAttribute("style", "--menu-subnav-height:" + arrayItem.getBoundingClientRect().height + "px;"); arrayItem.setAttribute("style", "--menu-subnav-height: " + arrayItem.getBoundingClientRect().height + "px;");
helper.removeClass(arrayItem, "active"); helper.removeClass(arrayItem, "active");
}); });
} }
@ -251,6 +251,7 @@ var menu = (function() {
mod.close(); mod.close();
render.removeStyle(); render.removeStyle();
render.subnav.height(); render.subnav.height();
render.nav.active();
}; };
return { return {

40
src/js/state.js
View File

@ -152,6 +152,11 @@ var state = (function() {
}, },
color: { color: {
by: "theme", by: "theme",
hsl: {
h: 0,
s: 0,
l: 0
},
rgb: { rgb: {
r: 0, r: 0,
g: 0, g: 0,
@ -173,7 +178,23 @@ var state = (function() {
}, },
item: { item: {
color: { color: {
by: "theme", hsl: {
h: 0,
s: 0,
l: 0
},
rgb: {
r: 0,
g: 0,
b: 0
}
},
accent: {
hsl: {
h: 0,
s: 0,
l: 0
},
rgb: { rgb: {
r: 0, r: 0,
g: 0, g: 0,
@ -181,13 +202,16 @@ var state = (function() {
} }
}, },
display: { display: {
letcon: { visual: {
show: true, show: true,
letter: { letter: {
size: 3 size: 3
}, },
icon: { icon: {
size: 3 size: 3
},
image: {
size: 3
} }
}, },
name: { name: {
@ -196,7 +220,7 @@ var state = (function() {
}, },
gutter: 2, gutter: 2,
direction: "vertical", direction: "vertical",
order: "letconname", order: "visualname",
alignment: "centercenter", alignment: "centercenter",
rotate: 0, rotate: 0,
translate: { translate: {
@ -322,6 +346,11 @@ var state = (function() {
background: { background: {
color: { color: {
by: "theme", by: "theme",
hsl: {
h: 0,
s: 0,
l: 0
},
rgb: { rgb: {
r: 0, r: 0,
g: 0, g: 0,
@ -415,12 +444,15 @@ var state = (function() {
}, },
item: { item: {
display: { display: {
letcon: { visual: {
letter: { letter: {
size: 3 size: 3
}, },
icon: { icon: {
size: 3 size: 3
},
image: {
size: 3
} }
}, },
name: { name: {

83
src/js/update.js
View File

@ -995,6 +995,89 @@ var update = (function() {
}); });
}); });
return data; return data;
},
"5.33.0": function(data) {
data.bookmarks.forEach(function(arrayItem, index) {
arrayItem.items.forEach(function(arrayItem, index) {
arrayItem.visual = {
display: arrayItem.display,
letter: arrayItem.letter,
image: null,
icon: arrayItem.icon
};
delete arrayItem.display;
delete arrayItem.letter;
delete arrayItem.icon;
if (arrayItem.accent.override) {
arrayItem.accent.by = "custom";
} else {
arrayItem.accent.by = "theme";
};
delete arrayItem.accent.override;
arrayItem.accent.hsl = arrayItem.accent.color.hsl;
arrayItem.accent.rgb = arrayItem.accent.color.rgb;
delete arrayItem.accent.color;
arrayItem.color = {
by: "theme",
hsl: {
h: 0,
s: 0,
l: 0
},
rgb: {
r: 0,
g: 0,
b: 0
}
};
arrayItem.image = "";
});
});
data.state.header.color.hsl = {
h: 0,
s: 0,
l: 0
};
data.state.link.item.color = {
hsl: {
h: 0,
s: 0,
l: 0
},
rgb: {
r: 0,
g: 0,
b: 0
}
};
data.state.link.item.accent = {
hsl: {
h: 0,
s: 0,
l: 0
},
rgb: {
r: 0,
g: 0,
b: 0
}
};
data.state.link.item.display.visual = data.state.link.item.display.letcon;
delete data.state.link.item.display.letcon;
data.state.link.item.display.visual.image = {
size: 3
};
if (data.state.link.item.display.order == "letconname") {
data.state.link.item.display.order = "visualname";
} else if (data.state.link.item.display.order == "nameletcon") {
data.state.link.item.display.order = "namevisual";
};
data.state.background.color.hsl = {
h: 0,
s: 0,
l: 0
};
return data;
} }
}; };

2
src/js/version.js
View File

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

2
src/manifest.json
View File

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