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 item advanced controls

Browse Source
This commit is contained in:
Kombie 2020-07-18 13:48:58 +01:00 committed by GitHub
parent 8bfc3d4bb3
commit 6fbd8d4d2d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
57 changed files with 3823 additions and 2228 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.49.0", "version": "5.50.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.49.0", "version": "5.50.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/auto-suggest.css
View File

@ -17,11 +17,12 @@
overflow-y: auto; overflow-y: auto;
z-index: var(--z-index-auto-suggest); z-index: var(--z-index-auto-suggest);
box-shadow: var(--theme-shadow-bottom-large); box-shadow: var(--theme-shadow-bottom-large);
animation: appear var(--layout-transition-extra-fast) 1;
} }
.auto-suggest-list { .auto-suggest-list {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(auto-fill, minmax(6em, 1fr));
grid-gap: calc(var(--form-wrap-space) / 2); grid-gap: calc(var(--form-wrap-space) / 2);
} }

13
src/css/form.css
View File

@ -18,8 +18,7 @@ fieldset:not(:last-child),
} }
/* form variants */ /* form variants */
.form-wrap, .form-wrap {
.form-helper {
position: relative; position: relative;
width: 100%; width: 100%;
display: block; display: block;
@ -39,14 +38,6 @@ fieldset:not(:last-child),
margin-bottom: 0; margin-bottom: 0;
} }
.form-helper:not(:first-child) {
margin-top: calc(var(--form-wrap-space) / 2);
}
.form-helper:not(:last-child) {
margin-bottom: calc(var(--form-wrap-space) / 2);
}
.form-indent { .form-indent {
margin-left: calc(var(--form-wrap-space) * 2.25); margin-left: calc(var(--form-wrap-space) * 2.25);
} }
@ -106,7 +97,7 @@ label {
} }
label:not(:only-child):not(:last-child) { label:not(:only-child):not(:last-child) {
padding-bottom: calc(var(--form-wrap-space) / 2); padding-bottom: var(--form-wrap-space);
} }
label.disabled { label.disabled {

315
src/css/link.css
View File

@ -286,47 +286,47 @@
box-shadow: var(--theme-shadow-top-large); box-shadow: var(--theme-shadow-top-large);
} }
.is-link-display-alignment-topleft .link-panel-front { .link-item-alignment-topleft .link-panel-front {
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
} }
.is-link-display-alignment-topcenter .link-panel-front { .link-item-alignment-topcenter .link-panel-front {
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
.is-link-display-alignment-topright .link-panel-front { .link-item-alignment-topright .link-panel-front {
justify-content: flex-start; justify-content: flex-start;
align-items: flex-end; align-items: flex-end;
} }
.is-link-display-alignment-centerleft .link-panel-front { .link-item-alignment-centerleft .link-panel-front {
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
} }
.is-link-display-alignment-centercenter .link-panel-front { .link-item-alignment-centercenter .link-panel-front {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.is-link-display-alignment-centerright .link-panel-front { .link-item-alignment-centerright .link-panel-front {
justify-content: center; justify-content: center;
align-items: flex-end; align-items: flex-end;
} }
.is-link-display-alignment-bottomleft .link-panel-front { .link-item-alignment-bottomleft .link-panel-front {
justify-content: flex-end; justify-content: flex-end;
align-items: flex-start; align-items: flex-start;
} }
.is-link-display-alignment-bottomcenter .link-panel-front { .link-item-alignment-bottomcenter .link-panel-front {
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
} }
.is-link-display-alignment-bottomright .link-panel-front { .link-item-alignment-bottomright .link-panel-front {
justify-content: flex-end; justify-content: flex-end;
align-items: flex-end; align-items: flex-end;
} }
@ -351,33 +351,33 @@
border-bottom-right-radius: calc(var(--theme-radius) / 4); border-bottom-right-radius: calc(var(--theme-radius) / 4);
} }
.is-edit .link-panel-front, .is-edit .link-item .link-panel-front,
.is-edit .link-item:hover .link-panel-front, .is-edit .link-item:hover .link-panel-front,
.is-edit .link-item:focus .link-panel-front { .is-edit .link-item:focus .link-panel-front {
height: calc(100% - var(--link-item-edit-height)); height: calc(100% - var(--link-item-edit-height));
} }
.is-theme-radius.is-edit.is-link-orientation-top .link-panel-front, .is-theme-radius.is-edit.is-link-orientation-top .link-item .link-panel-front,
.is-theme-radius.is-edit.is-link-orientation-top .link-item:hover .link-panel-front, .is-theme-radius.is-edit.is-link-orientation-top .link-item:hover .link-panel-front,
.is-theme-radius.is-edit.is-link-orientation-top .link-item:focus .link-panel-front { .is-theme-radius.is-edit.is-link-orientation-top .link-item:focus .link-panel-front {
border-top-left-radius: calc(var(--theme-radius) / 4); border-top-left-radius: calc(var(--theme-radius) / 4);
border-top-right-radius: calc(var(--theme-radius) / 4); border-top-right-radius: calc(var(--theme-radius) / 4);
} }
.is-theme-radius.is-edit.is-link-orientation-bottom .link-panel-front, .is-theme-radius.is-edit.is-link-orientation-bottom .link-item .link-panel-front,
.is-theme-radius.is-edit.is-link-orientation-bottom .link-item:hover .link-panel-front, .is-theme-radius.is-edit.is-link-orientation-bottom .link-item:hover .link-panel-front,
.is-theme-radius.is-edit.is-link-orientation-bottom .link-item:focus .link-panel-front { .is-theme-radius.is-edit.is-link-orientation-bottom .link-item:focus .link-panel-front {
border-bottom-left-radius: calc(var(--theme-radius) / 4); border-bottom-left-radius: calc(var(--theme-radius) / 4);
border-bottom-right-radius: calc(var(--theme-radius) / 4); border-bottom-right-radius: calc(var(--theme-radius) / 4);
} }
.is-link-item-shadow-show.is-link-orientation-bottom.is-edit .link-panel-front, .is-link-item-shadow-show.is-link-orientation-bottom.is-edit .link-item .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-bottom.is-edit .link-item:hover .link-panel-front, .is-link-item-shadow-show.is-link-orientation-bottom.is-edit .link-item:hover .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-bottom.is-edit .link-item:focus .link-panel-front { .is-link-item-shadow-show.is-link-orientation-bottom.is-edit .link-item:focus .link-panel-front {
box-shadow: var(--theme-shadow-bottom-medium); box-shadow: var(--theme-shadow-bottom-medium);
} }
.is-link-item-shadow-show.is-link-orientation-top.is-edit .link-panel-front, .is-link-item-shadow-show.is-link-orientation-top.is-edit .link-item .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-top.is-edit .link-item:hover .link-panel-front, .is-link-item-shadow-show.is-link-orientation-top.is-edit .link-item:hover .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-top.is-edit .link-item:focus .link-panel-front { .is-link-item-shadow-show.is-link-orientation-top.is-edit .link-item:focus .link-panel-front {
box-shadow: var(--theme-shadow-top-medium); box-shadow: var(--theme-shadow-top-medium);
@ -399,254 +399,254 @@
font-size: 0.6em; font-size: 0.6em;
} }
.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname .link-display { .link-item-direction-horizontal.link-item-order-visualname .link-display {
flex-direction: row; flex-direction: row;
} }
.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual .link-display { .link-item-direction-horizontal.link-item-order-namevisual .link-display {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.is-link-item-display-direction-vertical.is-link-item-display-order-visualname .link-display { .link-item-direction-vertical.link-item-order-visualname .link-display {
flex-direction: column; flex-direction: column;
} }
.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual .link-display { .link-item-direction-vertical.link-item-order-namevisual .link-display {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.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) { .link-item-name.link-item-visual.link-item-direction-horizontal.link-item-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-visual-show.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual .link-display-visual:not(:only-child) { .link-item-name.link-item-visual.link-item-direction-horizontal.link-item-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-visual-show.is-link-item-display-direction-vertical.is-link-item-display-order-visualname .link-display-visual:not(:only-child) { .link-item-name.link-item-visual.link-item-direction-vertical.link-item-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-visual-show.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual .link-display-visual:not(:only-child) { .link-item-name.link-item-visual.link-item-direction-vertical.link-item-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));
} }
.is-link-display-alignment-topleft .link-display { .link-item-alignment-topleft .link-display {
transform-origin: top left; transform-origin: top left;
} }
.is-link-display-alignment-topcenter .link-display { .link-item-alignment-topcenter .link-display {
transform-origin: top center; transform-origin: top center;
} }
.is-link-display-alignment-topright .link-display { .link-item-alignment-topright .link-display {
transform-origin: top right; transform-origin: top right;
} }
.is-link-display-alignment-centerleft .link-display { .link-item-alignment-centerleft .link-display {
transform-origin: center left; transform-origin: center left;
} }
.is-link-display-alignment-centercenter .link-display { .link-item-alignment-centercenter .link-display {
transform-origin: center center; transform-origin: center center;
} }
.is-link-display-alignment-centerright .link-display { .link-item-alignment-centerright .link-display {
transform-origin: center right; transform-origin: center right;
} }
.is-link-display-alignment-bottomleft .link-display { .link-item-alignment-bottomleft .link-display {
transform-origin: bottom left; transform-origin: bottom left;
} }
.is-link-display-alignment-bottomcenter .link-display { .link-item-alignment-bottomcenter .link-display {
transform-origin: bottom center; transform-origin: bottom center;
} }
.is-link-display-alignment-bottomright .link-display { .link-item-alignment-bottomright .link-display {
transform-origin: bottom right; transform-origin: bottom right;
} }
/* vertical visual name */ /* vertical visual name */
.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-topleft .link-display { .link-item-direction-vertical.link-item-order-visualname.link-item-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-visualname.is-link-display-alignment-topcenter .link-display { .link-item-direction-vertical.link-item-order-visualname.link-item-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-visualname.is-link-display-alignment-topright .link-display { .link-item-direction-vertical.link-item-order-visualname.link-item-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-visualname.is-link-display-alignment-centerleft .link-display { .link-item-direction-vertical.link-item-order-visualname.link-item-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-visualname.is-link-display-alignment-centercenter .link-display { .link-item-direction-vertical.link-item-order-visualname.link-item-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-visualname.is-link-display-alignment-centerright .link-display { .link-item-direction-vertical.link-item-order-visualname.link-item-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-visualname.is-link-display-alignment-bottomleft .link-display { .link-item-direction-vertical.link-item-order-visualname.link-item-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-visualname.is-link-display-alignment-bottomcenter .link-display { .link-item-direction-vertical.link-item-order-visualname.link-item-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-visualname.is-link-display-alignment-bottomright .link-display { .link-item-direction-vertical.link-item-order-visualname.link-item-alignment-bottomright .link-display {
justify-content: flex-end; justify-content: flex-end;
align-items: flex-end; align-items: flex-end;
} }
/* vertical name visual */ /* vertical name visual */
.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-topleft .link-display { .link-item-direction-vertical.link-item-order-namevisual.link-item-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-namevisual.is-link-display-alignment-topcenter .link-display { .link-item-direction-vertical.link-item-order-namevisual.link-item-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-namevisual.is-link-display-alignment-topright .link-display { .link-item-direction-vertical.link-item-order-namevisual.link-item-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-namevisual.is-link-display-alignment-centerleft .link-display { .link-item-direction-vertical.link-item-order-namevisual.link-item-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-namevisual.is-link-display-alignment-centercenter .link-display { .link-item-direction-vertical.link-item-order-namevisual.link-item-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-namevisual.is-link-display-alignment-centerright .link-display { .link-item-direction-vertical.link-item-order-namevisual.link-item-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-namevisual.is-link-display-alignment-bottomleft .link-display { .link-item-direction-vertical.link-item-order-namevisual.link-item-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-namevisual.is-link-display-alignment-bottomcenter .link-display { .link-item-direction-vertical.link-item-order-namevisual.link-item-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-namevisual.is-link-display-alignment-bottomright .link-display { .link-item-direction-vertical.link-item-order-namevisual.link-item-alignment-bottomright .link-display {
justify-content: flex-start; justify-content: flex-start;
align-items: flex-end; align-items: flex-end;
} }
/* horizontal visual name */ /* horizontal visual name */
.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-topleft .link-display { .link-item-direction-horizontal.link-item-order-visualname.link-item-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-visualname.is-link-display-alignment-topcenter .link-display { .link-item-direction-horizontal.link-item-order-visualname.link-item-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-visualname.is-link-display-alignment-topright .link-display { .link-item-direction-horizontal.link-item-order-visualname.link-item-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-visualname.is-link-display-alignment-centerleft .link-display { .link-item-direction-horizontal.link-item-order-visualname.link-item-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-visualname.is-link-display-alignment-centercenter .link-display { .link-item-direction-horizontal.link-item-order-visualname.link-item-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-visualname.is-link-display-alignment-centerright .link-display { .link-item-direction-horizontal.link-item-order-visualname.link-item-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-visualname.is-link-display-alignment-bottomleft .link-display { .link-item-direction-horizontal.link-item-order-visualname.link-item-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-visualname.is-link-display-alignment-bottomcenter .link-display { .link-item-direction-horizontal.link-item-order-visualname.link-item-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-visualname.is-link-display-alignment-bottomright .link-display { .link-item-direction-horizontal.link-item-order-visualname.link-item-alignment-bottomright .link-display {
justify-content: flex-end; justify-content: flex-end;
align-items: flex-end; align-items: flex-end;
} }
/* horizontal name visual */ /* horizontal name visual */
.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-topleft .link-display { .link-item-direction-horizontal.link-item-order-namevisual.link-item-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-namevisual.is-link-display-alignment-topcenter .link-display { .link-item-direction-horizontal.link-item-order-namevisual.link-item-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-namevisual.is-link-display-alignment-topright .link-display { .link-item-direction-horizontal.link-item-order-namevisual.link-item-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-namevisual.is-link-display-alignment-centerleft .link-display { .link-item-direction-horizontal.link-item-order-namevisual.link-item-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-namevisual.is-link-display-alignment-centercenter .link-display { .link-item-direction-horizontal.link-item-order-namevisual.link-item-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-namevisual.is-link-display-alignment-centerright .link-display { .link-item-direction-horizontal.link-item-order-namevisual.link-item-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-namevisual.is-link-display-alignment-bottomleft .link-display { .link-item-direction-horizontal.link-item-order-namevisual.link-item-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-namevisual.is-link-display-alignment-bottomcenter .link-display { .link-item-direction-horizontal.link-item-order-namevisual.link-item-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-namevisual.is-link-display-alignment-bottomright .link-display { .link-item-direction-horizontal.link-item-order-namevisual.link-item-alignment-bottomright .link-display {
justify-content: flex-start; justify-content: flex-start;
align-items: flex-end; align-items: flex-end;
} }
@ -661,13 +661,13 @@
display: none; display: none;
} }
.is-link-item-display-visual-show .link-display-visual { .link-item-visual .link-display-visual {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.is-link-item-display-visual-shadow-show .link-display-visual { .link-item-display-visual-shadow .link-display-visual {
text-shadow: var(--link-item-display-visual-shadow); text-shadow: var(--link-item-display-visual-shadow);
} }
@ -702,17 +702,17 @@
.is-link-style-block .link-display-letter, .is-link-style-block .link-display-letter,
.is-link-style-list .link-display-letter { .is-link-style-list .link-display-letter {
font-size: var(--link-item-display-letter-size); font-size: var(--link-item-display-visual-letter-size);
} }
.is-link-style-block .link-display-icon, .is-link-style-block .link-display-icon,
.is-link-style-list .link-display-icon { .is-link-style-list .link-display-icon {
font-size: var(--link-item-display-icon-size); font-size: var(--link-item-display-visual-icon-size);
} }
.is-link-style-block .link-display-image, .is-link-style-block .link-display-image,
.is-link-style-list .link-display-image { .is-link-style-list .link-display-image {
font-size: var(--link-item-display-image-size); font-size: var(--link-item-display-visual-image-size);
} }
.link-item:hover .link-display-letter, .link-item:hover .link-display-letter,
@ -734,12 +734,12 @@
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(--theme-color-12)); color: rgb(var(--link-item-name-color));
display: none; display: none;
transition: color var(--layout-transition-extra-fast); transition: color var(--layout-transition-extra-fast);
} }
.is-link-item-display-name-show .link-display-name { .link-item-name .link-display-name {
display: block; display: block;
} }
@ -748,21 +748,21 @@
margin-bottom: 0; margin-bottom: 0;
} }
.is-link-display-alignment-topleft .link-display-name, .link-item-alignment-topleft .link-display-name,
.is-link-display-alignment-centerleft .link-display-name, .link-item-alignment-centerleft .link-display-name,
.is-link-display-alignment-bottomleft .link-display-name { .link-item-alignment-bottomleft .link-display-name {
text-align: left; text-align: left;
} }
.is-link-display-alignment-topcenter .link-display-name, .link-item-alignment-topcenter .link-display-name,
.is-link-display-alignment-centercenter .link-display-name, .link-item-alignment-centercenter .link-display-name,
.is-link-display-alignment-bottomcenter .link-display-name { .link-item-alignment-bottomcenter .link-display-name {
text-align: center; text-align: center;
} }
.is-link-display-alignment-topright .link-display-name, .link-item-alignment-topright .link-display-name,
.is-link-display-alignment-centerright .link-display-name, .link-item-alignment-centerright .link-display-name,
.is-link-display-alignment-bottomright .link-display-name { .link-item-alignment-bottomright .link-display-name {
text-align: right; text-align: right;
} }
@ -772,7 +772,7 @@
} }
.link-panel-front:focus .link-display-name { .link-panel-front:focus .link-display-name {
color: rgb(var(--theme-style-text)); color: rgb(var(--link-item-mame-color-focus-hover));
} }
/* link panel back */ /* link panel back */
@ -784,6 +784,7 @@
position: absolute; position: absolute;
top: var(--layout-line-width); top: var(--layout-line-width);
left: var(--layout-line-width); left: var(--layout-line-width);
overflow: hidden;
display: flex; display: flex;
align-items: stretch; align-items: stretch;
justify-content: flex-end; justify-content: flex-end;
@ -1057,21 +1058,21 @@
display: flex; display: flex;
} }
.is-link-display-alignment-topleft .link-url, .link-item-alignment-topleft .link-url,
.is-link-display-alignment-centerleft .link-url, .link-item-alignment-centerleft .link-url,
.is-link-display-alignment-bottomleft .link-url { .link-item-alignment-bottomleft .link-url {
justify-content: flex-start; justify-content: flex-start;
} }
.is-link-display-alignment-topcenter .link-url, .link-item-alignment-topcenter .link-url,
.is-link-display-alignment-centercenter .link-url, .link-item-alignment-centercenter .link-url,
.is-link-display-alignment-bottomcenter .link-url { .link-item-alignment-bottomcenter .link-url {
justify-content: center; justify-content: center;
} }
.is-link-display-alignment-topright .link-url, .link-item-alignment-topright .link-url,
.is-link-display-alignment-centerright .link-url, .link-item-alignment-centerright .link-url,
.is-link-display-alignment-bottomright .link-url { .link-item-alignment-bottomright .link-url {
justify-content: flex-end; justify-content: flex-end;
} }
@ -1110,6 +1111,24 @@
bottom: calc(-1 * var(--link-item-url-height)); bottom: calc(-1 * var(--link-item-url-height));
} }
/* link form */
.link-form {
margin-bottom: 2em;
}
.link-form-area {
display: block;
}
@media (min-width: 900px) {
.link-form-area {
display: grid;
grid-template-columns: 6fr 3fr;
grid-gap: calc(var(--form-wrap-space) * 2);
align-items: stretch;
}
}
.link-form-text-icon { .link-form-text-icon {
position: relative; position: relative;
} }
@ -1146,44 +1165,33 @@
} }
.link-form-collapse { .link-form-collapse {
margin-left: -1em;
margin-right: -1em; margin-right: -1em;
margin-bottom: -1em; margin-bottom: -1em;
margin-left: -1em;
padding-right: 1em; padding-right: 1em;
padding-left: 1em;
padding-bottom: 1em; padding-bottom: 1em;
padding-left: 1em;
height: 0; height: 0;
opacity: 0;
overflow: hidden; overflow: hidden;
transition: height var(--layout-transition-extra-fast); transition: height var(--layout-transition-extra-slow), opacity var(--layout-transition-extra-slow);
} }
.link-form-collapse.active { .link-form-collapse.active {
height: var(--link-form-collapse-height); height: var(--link-form-collapse-height);
opacity: 1;
} }
.link-form-collapse-button-icon { .link-form-collapse-button [class^="icon-"],
.link-form-collapse-button [class*=" icon-"] {
transition: transform var(--layout-transition-extra-fast); transition: transform var(--layout-transition-extra-fast);
} }
.link-form-collapse-button.active .link-form-collapse-button-icon { .link-form-collapse-button.active [class^="icon-"],
.link-form-collapse-button.active [class*=" icon-"] {
transform: rotate(-180deg); transform: rotate(-180deg);
} }
/* link form */
.link-form-wrap {
display: block;
}
@media (min-width: 900px) {
.link-form-wrap {
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: calc(var(--form-wrap-space) * 2);
align-items: stretch;
}
}
/* link preview */
.link-form-aside { .link-form-aside {
display: none; display: none;
} }
@ -1194,19 +1202,40 @@
} }
} }
/* link form preview */
.link-form-preview-area { .link-form-preview-area {
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 1fr;
position: sticky; position: sticky;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
.link-item-preview { .link-item-preview-grid {
width: 100%; display: grid;
height: 10em; }
position: relative;
.link-item-preview-grid-large {
display: grid;
grid-template-rows: repeat(1, var(--link-item-height));
grid-template-columns: repeat(1, minmax(var(--link-item-width), 1fr));
}
.link-item-preview-grid-small {
font-size: 0.5em;
grid-template-rows: repeat(2, var(--link-item-height));
grid-template-columns: repeat(2, minmax(var(--link-item-width), 1fr));
}
.link-item-preview-grid-small .link-item-preview {
left: 50%;
top: 50%;
}
.link-item-preview-grid-small .link-item-preview.link-item-wide {
left: 0;
}
.link-item-preview-grid-small .link-item-preview.link-item-tall {
top: 0;
} }
.is-link-item-shadow-show.is-link-orientation-bottom .link-item-preview .link-panel-front, .is-link-item-shadow-show.is-link-orientation-bottom .link-item-preview .link-panel-front,
@ -1242,17 +1271,25 @@
box-shadow: var(--theme-shadow-top-large); box-shadow: var(--theme-shadow-top-large);
} }
.is-edit .link-item-preview .link-panel-front,
.is-edit .link-item-preview:hover .link-panel-front,
.is-edit .link-item-preview:focus .link-panel-front {
height: 100%;
}
.is-theme-radius .link-item-preview .link-panel-front, .is-theme-radius .link-item-preview .link-panel-front,
.is-edit.is-theme-radius .link-item-preview .link-panel-front { .is-edit.is-theme-radius .link-item-preview .link-panel-front {
border-radius: var(--theme-radius); border-radius: var(--theme-radius);
} }
.is-theme-radius.is-edit.is-link-orientation-top .link-item-preview .link-panel-front,
.is-theme-radius.is-edit.is-link-orientation-top .link-item-preview:hover .link-panel-front,
.is-theme-radius.is-edit.is-link-orientation-top .link-item-preview:focus .link-panel-front {
border-top-left-radius: var(--theme-radius);
border-top-right-radius: var(--theme-radius);
}
.is-theme-radius.is-edit.is-link-orientation-bottom .link-item-preview .link-panel-front,
.is-theme-radius.is-edit.is-link-orientation-bottom .link-item-preview:hover .link-panel-front,
.is-theme-radius.is-edit.is-link-orientation-bottom .link-item-preview:focus .link-panel-front {
border-bottom-left-radius: var(--theme-radius);
border-bottom-right-radius: var(--theme-radius);
}
.is-edit .link-item-preview .link-display { .is-edit .link-item-preview .link-display {
font-size: 1em; font-size: 1em;
} }
@ -1292,13 +1329,35 @@
border-bottom-right-radius: calc(var(--theme-radius) / 4); border-bottom-right-radius: calc(var(--theme-radius) / 4);
} }
.is-link-item-line-show .link-item-preview .link-panel-front { .link-item-preview .link-panel-front,
.link-item-preview:hover .link-panel-front,
.link-item-preview:focus .link-panel-front,
.is-edit .link-item-preview .link-panel-front,
.is-edit .link-item-preview:hover .link-panel-front,
.is-edit .link-item-preview:focus .link-panel-front {
height: 100%;
}
.is-link-item-line-show .link-item-preview .link-panel-front,
.is-edit.is-link-item-line-show .link-item-preview .link-panel-front {
height: calc(100% - var(--layout-line-width));
}
.is-link-item-line-show .link-item-preview:focus .link-panel-front,
.is-link-item-line-show .link-item-preview:focus-within .link-panel-front,
.is-link-item-line-show .link-item-preview:hover .link-panel-front,
.is-edit.is-link-item-line-show .link-item-preview:focus .link-panel-front,
.is-edit.is-link-item-line-show .link-item-preview:focus-within .link-panel-front,
.is-edit.is-link-item-line-show .link-item-preview:hover .link-panel-front {
height: calc(100% - var(--layout-line-width)); height: calc(100% - var(--layout-line-width));
} }
.is-link-item-url-show .link-item-preview:focus .link-panel-front, .is-link-item-url-show .link-item-preview:focus .link-panel-front,
.is-link-item-url-show .link-item-preview:focus-within .link-panel-front, .is-link-item-url-show .link-item-preview:focus-within .link-panel-front,
.is-link-item-url-show .link-item-preview:hover .link-panel-front { .is-link-item-url-show .link-item-preview:hover .link-panel-front,
.is-edit.is-link-item-url-show .link-item-preview:focus .link-panel-front,
.is-edit.is-link-item-url-show .link-item-preview:focus-within .link-panel-front,
.is-edit.is-link-item-url-show .link-item-preview:hover .link-panel-front {
height: calc(100% - var(--link-item-url-height)); height: calc(100% - var(--link-item-url-height));
} }

4
src/css/modal.css
View File

@ -3,7 +3,7 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
font-size: 1em; font-size: 1em;
width: 45em; width: 50em;
max-width: calc(100% - 2em); max-width: calc(100% - 2em);
min-width: 10em; min-width: 10em;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
@ -14,7 +14,7 @@
} }
.modal-large { .modal-large {
width: 65em; width: 70em;
max-width: calc(100% - 2em); max-width: calc(100% - 2em);
} }

10
src/css/typography.css
View File

@ -18,10 +18,10 @@ h1 {
} }
h2 { h2 {
font-size: 1.2em; font-size: 1.3em;
font-family: var(--theme-font-ui-name); font-family: var(--theme-font-display-name);
font-weight: var(--theme-font-ui-weight); font-weight: var(--theme-font-display-weight);
font-style: var(--theme-font-ui-style); font-style: var(--theme-font-display-style);
} }
h3 { h3 {
@ -68,7 +68,7 @@ hr {
border: 0; border: 0;
border-top: var(--horizontal-rule-small); border-top: var(--horizontal-rule-small);
border-radius: var(--theme-radius); border-radius: var(--theme-radius);
margin: calc(var(--form-wrap-space) * 1.5) 0; margin: calc(var(--form-wrap-space) * 2) 0;
clear: both; clear: both;
transition: border-color var(--layout-transition-extra-fast); transition: border-color var(--layout-transition-extra-fast);
} }

16
src/css/variables.css
View File

@ -111,18 +111,12 @@
--link-area-width: 100%; --link-area-width: 100%;
--link-item-color: var(--theme-color-02); --link-item-color: var(--theme-color-02);
--link-item-color-opacity: 1; --link-item-color-opacity: 1;
--link-item-image-opacity: 1;
--link-item-color-focus-hover: var(--theme-color-03); --link-item-color-focus-hover: var(--theme-color-03);
--link-item-mame-color: var(--theme-color-18);
--link-item-mame-color-focus-hover: var(--theme-style-text);
--link-item-image-opacity: 1;
--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-letter-size: 3em;
--link-item-display-icon-size: 3em;
--link-item-display-image-size: 3em;
--link-item-display-rotate: 0deg;
--link-item-display-translate-x: 0em;
--link-item-display-translate-y: 0em;
--link-item-display-name-size: 0.9em;
--link-item-border: 0; --link-item-border: 0;
--link-item-padding: 1; --link-item-padding: 1;
--link-item-clip-padding: 1em; --link-item-clip-padding: 1em;
@ -420,10 +414,6 @@
--link-item-edit-height: 2em; --link-item-edit-height: 2em;
} }
.is-link-item-color-opacity {
--link-item-clip-padding: calc(0 * 1em);
}
@media (min-width: 700px) { @media (min-width: 700px) {
:root { :root {
/* theme */ /* theme */

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

@ -31,52 +31,54 @@
<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"> <div class="form-wrap">
<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> <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>
<div class="form-indent"> <div class="form-wrap">
<hr> <div class="form-indent">
<div class="form-wrap"> <hr>
<div class="form-group form-group-block"> <div class="form-wrap">
<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> <div class="form-group form-group-block">
<input id="control-background-color-hsl-h-range" class="control-background-color-hsl-h-range mr-3" type="range" value="0" tabindex="-1"> <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 class="control-background-color-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1"> <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>
</div> <div class="form-wrap">
<div class="form-wrap"> <div class="form-group form-group-block">
<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>
<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 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">
<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>
</div> <div class="form-wrap">
<div class="form-wrap"> <div class="form-group form-group-block">
<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>
<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 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">
<input class="control-background-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"> <div class="form-group form-group-block">
<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>
<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 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">
<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>
</div> <div class="form-wrap">
<div class="form-wrap"> <div class="form-group form-group-block">
<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>
<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 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">
<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>
</div> <div class="form-wrap">
<div class="form-wrap"> <div class="form-group form-group-block">
<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>
<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 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">
<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>

12
src/html/menu/content/background/image.html
View File

@ -22,10 +22,10 @@
</div> </div>
<button class="control-background-image-file-clear button button-line">Clear image</button> <button class="control-background-image-file-clear button button-line">Clear image</button>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-background-image-file-helper form-helper-item">Max image size 5MB, (due to browser local storage limits).</p> <p class="control-background-image-file-helper form-helper-item">Max image size 5MB, (due to browser local storage limits).</p>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-background-image-file-helper form-helper-item">Take care with large files, they may impact performance.</p> <p class="control-background-image-file-helper form-helper-item">Take care with large files, they may impact performance.</p>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
@ -42,17 +42,13 @@
<div class="form-wrap"> <div class="form-wrap">
<textarea id="control-background-image-url" class="control-background-image-url" spellcheck="false" placeholder="https://..." tabindex="-1"></textarea> <textarea id="control-background-image-url" class="control-background-image-url" spellcheck="false" placeholder="https://..." tabindex="-1"></textarea>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-background-image-url-helper form-helper-item">If adding more than one URL separate them by spaces or on new lines. If more than one is entered a random background image will be used on load.</p> <p class="control-background-image-url-helper form-helper-item">If adding more than one URL separate them by spaces or on new lines. If more than one is entered a random background image will be used on load.</p>
</div> </div>
<hr> <hr>
<div class="form-helper"> <div class="form-wrap">
<p class="control-background-image-url-helper form-helper-item">Unsplash can be used for random images, eg:</p> <p class="control-background-image-url-helper form-helper-item">Unsplash can be used for random images, eg:</p>
</div>
<div class="form-helper">
<p class="control-background-image-url-helper form-helper-item"><i>https://source.unsplash.com/random/1920x1080/?night,day,sky</i></p> <p class="control-background-image-url-helper form-helper-item"><i>https://source.unsplash.com/random/1920x1080/?night,day,sky</i></p>
</div>
<div class="form-helper">
<p class="control-background-image-url-helper form-helper-item">Change parameters after <i>.../random/</i> for more options. Loading times may vary.</p> <p class="control-background-image-url-helper form-helper-item">Change parameters after <i>.../random/</i> for more options. Loading times may vary.</p>
</div> </div>
</div> </div>

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

@ -4,14 +4,14 @@
@@include("./bookmarks/alignment.html") @@include("./bookmarks/alignment.html")
@@include("./bookmarks/bookmarks.html") @@include("./bookmarks/general.html")
@@include("./bookmarks/content.html")
@@include("./bookmarks/visual.html") @@include("./bookmarks/visual.html")
@@include("./bookmarks/name.html") @@include("./bookmarks/name.html")
@@include("./bookmarks/content.html")
@@include("./bookmarks/style.html") @@include("./bookmarks/style.html")
@@include("./bookmarks/color.html") @@include("./bookmarks/color.html")

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

@ -4,17 +4,33 @@
</div> </div>
<div class="menu-item-form"> <div class="menu-item-form">
<div class="form-wrap"> <div class="form-wrap">
<div class="form-group form-group-block"> <input id="control-link-item-accent-by-theme" class="control-link-item-accent-by-theme" type="radio" name="control-link-item-accent-by" value="theme" tabindex="-1">
<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"> <label for="control-link-item-accent-by-theme">
<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"> <span class="label-icon"></span>
</div> <span class="label-block">
<span class="label-block-item">Theme accent</span>
<span class="label-block-item small muted">Use the Background accent defined by the Theme.</span>
</span>
</label>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-link-item-color-helper form-helper-item">Apply an Accent override to all Bookmarks.</p> <input id="control-link-item-accent-by-custom" class="control-link-item-accent-by-custom" type="radio" name="control-link-item-accent-by" value="custom" tabindex="-1">
<p class="control-link-item-color-helper form-helper-item">Accent overrides can also be changed by editing individual Bookmarks.</p> <label for="control-link-item-accent-by-custom">
<span class="label-icon"></span>
<span class="label-block">
<span class="label-block-item">Custom accent</span>
<span class="label-block-item small muted">Override the Theme accent.</span>
</span>
</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-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>
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<div class="form-group form-group-block"> <div class="form-group form-group-block">
@ -65,12 +81,6 @@
<div class="form-wrap"> <div class="form-wrap">
<div class="form-inline"> <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-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>
<hr>
<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> <button class="control-link-item-accent-rainbow button button-line" tabindex="-1">Apply unique accent to each</button>
</div> </div>
</div> </div>

6
src/html/menu/content/bookmarks/alignment.html
View File

@ -22,10 +22,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-link-area-justify-helper form-helper-item">Effects may not be visible if the Bookmark Area is full width.</p> <p class="control-link-area-justify-helper form-helper-item">Effects may not be visible if the Bookmark Area is full width.</p>
</div>
<div class="form-helper">
<p class="control-link-area-helper form-helper-item">Only available when Layout Alignment is Vertical.</p> <p class="control-link-area-helper form-helper-item">Only available when Layout Alignment is Vertical.</p>
</div> </div>
<hr> <hr>
@ -40,7 +38,7 @@
<input id="control-link-area-direction-rtl" class="control-link-area-direction-rtl" type="radio" name="control-link-area-direction" value="rtl" tabindex="-1"> <input id="control-link-area-direction-rtl" class="control-link-area-direction-rtl" type="radio" name="control-link-area-direction" value="rtl" tabindex="-1">
<label for="control-link-area-direction-rtl"><span class="label-icon"></span> Right to left</label> <label for="control-link-area-direction-rtl"><span class="label-icon"></span> Right to left</label>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-link-area-direction-helper form-helper-item">Flow Bookmarks either from the left or right of the Bookmark Area.</p> <p class="control-link-area-direction-helper form-helper-item">Flow Bookmarks either from the left or right of the Bookmark Area.</p>
</div> </div>
</div> </div>

2
src/html/menu/content/bookmarks/area.html
View File

@ -14,7 +14,7 @@
<div class="form-wrap"> <div class="form-wrap">
<button class="control-link-area-width-match button button-line" tabindex="-1">Match Header Area</button> <button class="control-link-area-width-match button button-line" tabindex="-1">Match Header Area</button>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-link-area-width-helper form-helper-item">Max width is defined by Layout Area Width.</p> <p class="control-link-area-width-helper form-helper-item">Max width is defined by Layout Area Width.</p>
</div> </div>
</div> </div>

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

@ -4,18 +4,33 @@
</div> </div>
<div class="menu-item-form"> <div class="menu-item-form">
<div class="form-wrap"> <div class="form-wrap">
<div class="form-group form-group-block"> <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">
<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"> <label for="control-link-item-color-by-theme">
<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"> <span class="label-icon"></span>
</div> <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-wrap">
<p class="control-link-item-color-helper form-helper-item">Apply a colour override to all 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">
<p class="control-link-item-color-helper form-helper-item">Take care as some colours may make the Letter/Icon and Name unreadable.</p> <label for="control-link-item-color-by-custom">
<p class="control-link-item-color-helper form-helper-item">Colour overrides can also be changed by editing individual Bookmarks.</p> <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-wrap"> <div class="form-wrap">
<div class="form-indent"> <div class="form-indent">
<div class="form-wrap">
<div class="form-group form-group-block">
<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>
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<div class="form-group form-group-block"> <div class="form-group form-group-block">
@ -66,12 +81,6 @@
<div class="form-wrap"> <div class="form-wrap">
<div class="form-inline"> <div class="form-inline">
<button class="control-link-item-color-apply button button-line" tabindex="-1">Apply to all</button> <button class="control-link-item-color-apply button button-line" tabindex="-1">Apply to all</button>
<button class="control-link-item-color-clear button button-line" tabindex="-1">Clear all</button>
</div>
</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> <button class="control-link-item-color-rainbow button button-line" tabindex="-1">Apply unique colour to each</button>
</div> </div>
</div> </div>
@ -84,8 +93,8 @@
<button class="control-link-item-color-opacity-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button> <button class="control-link-item-color-opacity-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-wrap">
<p class="control-link-item-color-opacity-helper form-helper-item">Change the Colour opacity of all Bookmark tiles.</p> <button class="control-link-item-color-opacity-apply button button-line" tabindex="-1">Apply to all</button>
</div> </div>
</div> </div>
</div> </div>

59
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/Image and Name position</label> <label class="control-link-item-display-alignment-label">Visual element and Name alignment</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">
@ -46,6 +46,12 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-wrap">
<p class="control-link-item-display-alignment-helper form-helper-item">Position the Visual element (letter, icon or image) and Name inside the Bookmark tile.</p>
</div>
<div class="form-wrap">
<button class="control-link-item-display-alignment-apply button button-line" tabindex="-1">Apply to all</button>
</div>
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-link-item-display-rotate-range">Rotation</label> <label for="control-link-item-display-rotate-range">Rotation</label>
@ -55,6 +61,9 @@
<button class="control-link-item-display-rotate-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button> <button class="control-link-item-display-rotate-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div> </div>
</div> </div>
<div class="form-wrap">
<button class="control-link-item-display-rotate-apply button button-line" tabindex="-1">Apply to all</button>
</div>
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-link-item-display-translate-x-range">Horizontally offset</label> <label for="control-link-item-display-translate-x-range">Horizontally offset</label>
@ -64,6 +73,9 @@
<button class="control-link-item-display-translate-x-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button> <button class="control-link-item-display-translate-x-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div> </div>
</div> </div>
<div class="form-wrap">
<button class="control-link-item-display-translate-x-apply button button-line" tabindex="-1">Apply to all</button>
</div>
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-link-item-display-translate-y-range">Vertically offset</label> <label for="control-link-item-display-translate-y-range">Vertically offset</label>
@ -73,6 +85,9 @@
<button class="control-link-item-display-translate-y-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button> <button class="control-link-item-display-translate-y-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div> </div>
</div> </div>
<div class="form-wrap">
<button class="control-link-item-display-translate-y-apply button button-line" tabindex="-1">Apply to all</button>
</div>
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-link-item-display-gutter-range">Gutter</label> <label for="control-link-item-display-gutter-range">Gutter</label>
@ -82,10 +97,20 @@
<button class="control-link-item-display-gutter-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button> <button class="control-link-item-display-gutter-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-wrap">
<p class="control-link-item-display-gutter-helper form-helper-item">Only available when Letter/Icon/Image and Name are shown.</p> <button class="control-link-item-display-gutter-apply button button-line" tabindex="-1">Apply to all</button>
</div> </div>
<hr> <hr>
<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">
<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 Block Style.</span>
</span>
</label>
</div>
<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"> <label for="control-link-item-display-direction-horizontal">
@ -97,17 +122,10 @@
</label> </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"> <p class="control-link-item-display-direction-helper form-helper-item">Only available when Visual element and Name are shown.</p>
<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 Block Style.</span>
</span>
</label>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-link-item-display-direction-helper form-helper-item">Only available when Letter/Icon/Image and Name are shown.</p> <button class="control-link-item-display-direction-apply button button-line" tabindex="-1">Apply to all</button>
</div> </div>
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
@ -115,8 +133,8 @@
<label for="control-link-item-display-order-visualname"> <label for="control-link-item-display-order-visualname">
<span class="label-icon"></span> <span class="label-icon"></span>
<span class="label-block"> <span class="label-block">
<span class="label-block-item">Letter/Icon/Image then Name</span> <span class="label-block-item">Visual element then Name</span>
<span class="label-block-item small muted">Stack the Letter/Icon/Image before the Name.</span> <span class="label-block-item small muted">Stack the Visual element before the Name.</span>
</span> </span>
</label> </label>
</div> </div>
@ -125,13 +143,16 @@
<label for="control-link-item-display-order-namevisual"> <label for="control-link-item-display-order-namevisual">
<span class="label-icon"></span> <span class="label-icon"></span>
<span class="label-block"> <span class="label-block">
<span class="label-block-item">Name then Letter/Icon/Image</span> <span class="label-block-item">Name then Visual element</span>
<span class="label-block-item small muted">Stack the Name before the Letter/Icon/Image.</span> <span class="label-block-item small muted">Stack the Name before the Visual element.</span>
</span> </span>
</label> </label>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-link-item-display-order-helper form-helper-item">Only available when Letter/Icon/Image and Name are shown.</p> <p class="control-link-item-display-order-helper form-helper-item">Only available when Visual element and Name are shown.</p>
</div>
<div class="form-wrap">
<button class="control-link-item-display-order-apply button button-line" tabindex="-1">Apply to all</button>
</div> </div>
</div> </div>
</div> </div>

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

@ -1,16 +1,16 @@
<div id="menu-content-bookmarks-bookmarks" class="menu-content-item"> <div id="menu-content-bookmarks-general" class="menu-content-item">
<div class="menu-item-header"> <div class="menu-item-header">
<h1 class="menu-item-header-text">Bookmarks</h1> <h1 class="menu-item-header-text">General</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-show" class="control-link-show" type="checkbox" tabindex="-1"> <input id="control-link-show" class="control-link-show" type="checkbox" tabindex="-1">
<label for="control-link-show"><span class="label-icon"></span> Show</label> <label for="control-link-show"><span class="label-icon"></span> Show Bookmarks</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">
<label for="control-link-item-size-range">Bookmark Size</label> <label for="control-link-item-size-range">Size</label>
<div class="form-group form-group-block"> <div class="form-group form-group-block">
<input id="control-link-item-size-range" class="control-link-item-size-range mr-3" type="range" value="0" tabindex="-1"> <input id="control-link-item-size-range" class="control-link-item-size-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1"> <input class="control-link-item-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
@ -32,7 +32,7 @@
<input id="control-link-item-shadow-show" class="control-link-item-shadow-show" type="checkbox" tabindex="-1"> <input id="control-link-item-shadow-show" class="control-link-item-shadow-show" type="checkbox" tabindex="-1">
<label for="control-link-item-shadow-show"><span class="label-icon"></span> Show shadow on Bookmark hover</label> <label for="control-link-item-shadow-show"><span class="label-icon"></span> Show shadow on Bookmark hover</label>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-link-item-shadow-show-helper form-helper-item">Effects may not be visible if Theme Shadow is set to 0.</p> <p class="control-link-item-shadow-show-helper form-helper-item">Effects may not be visible if Theme Shadow is set to 0.</p>
</div> </div>
<hr> <hr>

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

@ -3,12 +3,6 @@
<h1 class="menu-item-header-text">Background image</h1> <h1 class="menu-item-header-text">Background image</h1>
</div> </div>
<div class="menu-item-form"> <div class="menu-item-form">
<div class="form-wrap">
<div class="form-inline">
<button class="control-link-item-image-clear button button-line" tabindex="-1">Clear all</button>
</div>
</div>
<hr>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-link-item-image-opacity-range">Opacity</label> <label for="control-link-item-image-opacity-range">Opacity</label>
<div class="form-group form-group-block"> <div class="form-group form-group-block">
@ -17,8 +11,8 @@
<button class="control-link-item-image-opacity-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button> <button class="control-link-item-image-opacity-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-wrap">
<p class="control-link-item-image-opacity-helper form-helper-item">Change the Background image opacity of all Bookmark tiles.</p> <button class="control-link-item-image-apply button button-line" tabindex="-1">Apply to all</button>
</div> </div>
</div> </div>
</div> </div>

28
src/html/menu/content/bookmarks/name.html
View File

@ -4,20 +4,26 @@
</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-display-name-show" class="control-link-item-display-name-show" type="checkbox" tabindex="-1"> <div class="form-inline">
<label for="control-link-item-display-name-show"><span class="label-icon"></span> Show</label> <button class="control-link-item-display-name-show button button-line" tabindex="-1">Show all</button>
<button class="control-link-item-display-name-hide button button-line" tabindex="-1">Hide all</button>
</div>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<div class="form-indent"> <p class="control-link-item-display-name-helper form-helper-item">Show or hide all Bookmark Names.</p>
<div class="form-wrap"> <p class="control-link-item-display-name-helper form-helper-item">This can also be changed by editing individual Bookmarks.</p>
<label for="control-link-item-display-name-size-range">Size</label> </div>
<div class="form-group form-group-block"> <hr>
<input id="control-link-item-display-name-size-range" class="control-link-item-display-name-size-range mr-3" type="range" value="0" tabindex="-1"> <div class="form-wrap">
<input class="control-link-item-display-name-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1"> <label for="control-link-item-display-name-size-range">Size</label>
<button class="control-link-item-display-name-size-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button> <div class="form-group form-group-block">
</div> <input id="control-link-item-display-name-size-range" class="control-link-item-display-name-size-range mr-3" type="range" value="0" tabindex="-1">
</div> <input class="control-link-item-display-name-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-link-item-display-name-size-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div> </div>
</div> </div>
<div class="form-wrap">
<button class="control-link-item-display-name-size-apply button button-line" tabindex="-1">Apply to all</button>
</div>
</div> </div>
</div> </div>

2
src/html/menu/content/bookmarks/orientation.html
View File

@ -11,7 +11,7 @@
<input id="control-link-orientation-bottom" class="control-link-orientation-bottom" type="radio" name="control-link-orientation" value="bottom" tabindex="-1"> <input id="control-link-orientation-bottom" class="control-link-orientation-bottom" type="radio" name="control-link-orientation" value="bottom" tabindex="-1">
<label for="control-link-orientation-bottom"><span class="label-icon"></span> Bottom</label> <label for="control-link-orientation-bottom"><span class="label-icon"></span> Bottom</label>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-link-orientation-helper form-helper-item">Display the URL and Controls either at the top or bottom of a Bookmark Tile.</p> <p class="control-link-orientation-helper form-helper-item">Display the URL and Controls either at the top or bottom of a Bookmark Tile.</p>
</div> </div>
</div> </div>

77
src/html/menu/content/bookmarks/visual.html
View File

@ -1,42 +1,58 @@
<div id="menu-content-bookmarks-visual" class="menu-content-item"> <div id="menu-content-bookmarks-visual" class="menu-content-item">
<div class="menu-item-header"> <div class="menu-item-header">
<h1 class="menu-item-header-text">Letter/Icon/Image</h1> <h1 class="menu-item-header-text">Visual element</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-display-visual-show" class="control-link-item-display-visual-show" type="checkbox" tabindex="-1"> <div class="form-inline">
<label for="control-link-item-display-visual-show"><span class="label-icon"></span> Show</label> <button class="control-link-item-display-visual-show button button-line" tabindex="-1">Show all</button>
<button class="control-link-item-display-visual-hide button button-line" tabindex="-1">Hide all</button>
</div>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<div class="form-indent"> <p class="control-link-item-display-visual-helper form-helper-item">Show or hide all Bookmark tile Visual elements (letter, icon or image).</p>
<div class="form-wrap"> <p class="control-link-item-display-visual-helper form-helper-item">This can also be changed by editing individual Bookmarks.</p>
<label for="control-link-item-display-visual-letter-size-range">Letter size</label> </div>
<div class="form-group form-group-block"> <hr>
<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"> <div class="form-wrap">
<input class="control-link-item-display-visual-letter-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1"> <div class="form-wrap">
<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> <label for="control-link-item-display-visual-letter-size-range">Letter size</label>
</div> <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>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-link-item-display-visual-icon-size-range">Icon size</label> <button class="control-link-item-display-visual-letter-size-apply button button-line" tabindex="-1">Apply to all</button>
<div class="form-group form-group-block"> </div>
<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"> <hr>
<input class="control-link-item-display-visual-icon-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1"> <div class="form-wrap">
<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> <label for="control-link-item-display-visual-icon-size-range">Icon size</label>
</div> <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>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-link-item-display-visual-image-size-range">Image size</label> <button class="control-link-item-display-visual-icon-size-apply button button-line" tabindex="-1">Apply to all</button>
<div class="form-group form-group-block"> </div>
<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"> <hr>
<input class="control-link-item-display-visual-image-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1"> <div class="form-wrap">
<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> <label for="control-link-item-display-visual-image-size-range">Image size</label>
</div> <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 class="form-wrap">
<button class="control-link-item-display-visual-image-size-apply button button-line" tabindex="-1">Apply to all</button>
</div>
<hr>
<div class="form-wrap">
<div class="form-indent"> <div class="form-indent">
<hr>
<div class="form-wrap"> <div class="form-wrap">
<label for="control-link-item-display-visual-shadow-size-range">Shadow size</label> <label for="control-link-item-display-visual-shadow-size-range">Shadow size</label>
<div class="form-group form-group-block"> <div class="form-group form-group-block">
@ -45,9 +61,12 @@
<button class="control-link-item-display-visual-shadow-size-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button> <button class="control-link-item-display-visual-shadow-size-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-wrap">
<p class="control-link-item-display-visual-shadow-size-helper form-helper-item">Only applies to Letters or Icons.</p> <p class="control-link-item-display-visual-shadow-size-helper form-helper-item">Only applies to Letters or Icons.</p>
</div> </div>
<div class="form-wrap">
<button class="control-link-item-display-visual-shadow-size-apply button button-line" tabindex="-1">Apply to all</button>
</div>
</div> </div>
</div> </div>
</div> </div>

4
src/html/menu/content/data/backup.html
View File

@ -6,10 +6,8 @@
<div class="form-wrap"> <div class="form-wrap">
<button class="control-data-export button button-line" tabindex="-1">Export data</button> <button class="control-data-export button button-line" tabindex="-1">Export data</button>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-data-export-helper form-helper-item">Download a backup of your nightTab Bookmarks and Settings.</p> <p class="control-data-export-helper form-helper-item">Download a backup of your nightTab Bookmarks and Settings.</p>
</div>
<div class="form-helper">
<p class="control-data-export-helper form-helper-item">This file can later be imported on this or another deivce.</p> <p class="control-data-export-helper form-helper-item">This file can later be imported on this or another deivce.</p>
</div> </div>
</div> </div>

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

@ -6,7 +6,7 @@
<div class="form-wrap"> <div class="form-wrap">
<button class="control-data-clear button button-line" tabindex="-1">Clear data</button> <button class="control-data-clear button button-line" tabindex="-1">Clear data</button>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-data-clear-helper form-helper-item">Wipe all data and restore nightTab to default state.</p> <p class="control-data-clear-helper form-helper-item">Wipe all data and restore nightTab to default state.</p>
</div> </div>
</div> </div>

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

@ -9,7 +9,7 @@
<label for="control-data-import">Import data</label> <label for="control-data-import">Import data</label>
</div> </div>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-data-import-helper form-helper-item">Restore a previously exported nightTab backup.</p> <p class="control-data-import-helper form-helper-item">Restore a previously exported nightTab backup.</p>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">

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

@ -24,7 +24,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-group-area-justify-helper form-helper-item">Effects may not be visible if the Group Name is not shown.</p> <p class="control-group-area-justify-helper form-helper-item">Effects may not be visible if the Group Name is not shown.</p>
</div> </div>
</div> </div>

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

@ -11,7 +11,7 @@
<button class="control-group-border-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button> <button class="control-group-border-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-wrap">
<p class="control-group-border-helper form-helper-item">Border between groups may not be visible if there is only one group.</p> <p class="control-group-border-helper form-helper-item">Border between groups may not be visible if there is only one group.</p>
</div> </div>
</div> </div>

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

@ -9,7 +9,7 @@
<button class="control-group-name-hide button button-line" tabindex="-1">Hide all</button> <button class="control-group-name-hide button button-line" tabindex="-1">Hide all</button>
</div> </div>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-group-name-helper form-helper-item">Group Names can also be changed by editing individual Groups.</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>

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

@ -9,7 +9,7 @@
<button class="control-group-openall-hide button button-line" tabindex="-1">Hide all</button> <button class="control-group-openall-hide button button-line" tabindex="-1">Hide all</button>
</div> </div>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-group-openall-helper form-helper-item">Group Open all buttons can also be changed by editing individual Groups.</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>

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

@ -24,10 +24,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-header-area-justify-helper form-helper-item">Effects may not be visible if the Header Area is full width.</p> <p class="control-header-area-justify-helper form-helper-item">Effects may not be visible if the Header Area is full width.</p>
</div>
<div class="form-helper">
<p class="control-header-area-helper form-helper-item">Only available when Layout Alignment is Vertical.</p> <p class="control-header-area-helper form-helper-item">Only available when Layout Alignment is Vertical.</p>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
@ -78,10 +76,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-header-item-justify-helper form-helper-item">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p> <p class="control-header-item-justify-helper form-helper-item">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
</div>
<div class="form-helper">
<p class="control-header-area-width-helper form-helper-item">Some Header items may not be shown.</p> <p class="control-header-area-width-helper form-helper-item">Some Header items may not be shown.</p>
</div> </div>
</div> </div>

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

@ -14,7 +14,7 @@
<div class="form-wrap"> <div class="form-wrap">
<button class="control-header-area-width-match button button-line" tabindex="-1">Match Bookmarks Area</button> <button class="control-header-area-width-match button button-line" tabindex="-1">Match Bookmarks Area</button>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-header-area-width-helper form-helper-item">Max width is defined by Layout Area Width.</p> <p class="control-header-area-width-helper form-helper-item">Max width is defined by Layout Area Width.</p>
</div> </div>
</div> </div>

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

@ -29,10 +29,8 @@
</span> </span>
</label> </label>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-header-color-style-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 class="form-helper">
<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> <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>
@ -46,7 +44,7 @@
</span> </span>
</label> </label>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-header-color-by-theme-helper form-helper-item"></p> <p class="control-header-color-by-theme-helper form-helper-item"></p>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
@ -59,7 +57,7 @@
</span> </span>
</label> </label>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-header-color-by-custom-helper form-helper-item"></p> <p class="control-header-color-by-custom-helper form-helper-item"></p>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
@ -70,49 +68,51 @@
<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"> <div class="form-wrap">
<hr> <div class="form-indent">
<div class="form-wrap"> <hr>
<div class="form-group form-group-block"> <div class="form-wrap">
<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> <div class="form-group form-group-block">
<input id="control-header-color-hsl-h-range" class="control-header-color-hsl-h-range mr-3" type="range" value="0" tabindex="-1"> <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 class="control-header-color-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1"> <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>
</div> <div class="form-wrap">
<div class="form-wrap"> <div class="form-group form-group-block">
<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>
<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 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">
<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>
</div> <div class="form-wrap">
<div class="form-wrap"> <div class="form-group form-group-block">
<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>
<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 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">
<input class="control-header-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"> <div class="form-group form-group-block">
<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>
<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 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">
<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>
</div> <div class="form-wrap">
<div class="form-wrap"> <div class="form-group form-group-block">
<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>
<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 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">
<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>
</div> <div class="form-wrap">
<div class="form-wrap"> <div class="form-group form-group-block">
<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>
<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 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">
<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>
@ -132,7 +132,7 @@
<input id="control-header-radius" class="control-header-radius" type="checkbox" tabindex="-1"> <input id="control-header-radius" class="control-header-radius" type="checkbox" tabindex="-1">
<label for="control-header-radius"><span class="label-icon"></span> Corner radius</label> <label for="control-header-radius"><span class="label-icon"></span> Corner radius</label>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-header-radius-helper form-helper-item">May not be visible if Theme Radius is set to 0.</p> <p class="control-header-radius-helper form-helper-item">May not be visible if Theme Radius is set to 0.</p>
</div> </div>
</div> </div>

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

@ -7,7 +7,7 @@
<input id="control-header-coloraccent-show" class="control-header-coloraccent-show" type="checkbox" tabindex="-1"> <input id="control-header-coloraccent-show" class="control-header-coloraccent-show" type="checkbox" tabindex="-1">
<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-wrap">
<p class="control-header-coloraccent-show-helper form-helper-item">Colour and Accent controls 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">

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

@ -26,7 +26,7 @@
<input id="control-header-date-day-week-start-sunday" class="control-header-date-day-week-start-sunday" type="radio" name="control-header-date-day-week-start" value="sunday" tabindex="-1"> <input id="control-header-date-day-week-start-sunday" class="control-header-date-day-week-start-sunday" type="radio" name="control-header-date-day-week-start" value="sunday" tabindex="-1">
<label for="control-header-date-day-week-start-sunday"><span class="label-icon"></span> Sunday</label> <label for="control-header-date-day-week-start-sunday"><span class="label-icon"></span> Sunday</label>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-header-date-day-week-start-helper form-helper-item">Define what day "1" represents, either Monday or Sunday.</p> <p class="control-header-date-day-week-start-helper form-helper-item">Define what day "1" represents, either Monday or Sunday.</p>
</div> </div>
</div> </div>

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

@ -23,7 +23,7 @@
</span> </span>
</label> </label>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<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>
</div> </div>
</div> </div>

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

@ -57,7 +57,7 @@
<input id="control-header-search-focus" class="control-header-search-focus" type="checkbox" tabindex="-1"> <input id="control-header-search-focus" class="control-header-search-focus" type="checkbox" tabindex="-1">
<label for="control-header-search-focus"><span class="label-icon"></span> Focus on load/refresh</label> <label for="control-header-search-focus"><span class="label-icon"></span> Focus on load/refresh</label>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-header-search-focus-helper form-helper-item">May not work in some browsers.</p> <p class="control-header-search-focus-helper form-helper-item">May not work in some browsers.</p>
</div> </div>
<hr> <hr>
@ -98,7 +98,7 @@
<label for="control-header-search-engine-custom-url">URL</label> <label for="control-header-search-engine-custom-url">URL</label>
<input id="control-header-search-engine-custom-url" class="control-header-search-engine-custom-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://" tabindex="-1"> <input id="control-header-search-engine-custom-url" class="control-header-search-engine-custom-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://" tabindex="-1">
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-header-search-engine-custom-helper form-helper-item">Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="</p> <p class="control-header-search-engine-custom-helper form-helper-item">Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="</p>
<p class="control-header-search-engine-custom-helper form-helper-item">nightTab will add the search term entered into the Search input at the end of the above URL.</p> <p class="control-header-search-engine-custom-helper form-helper-item">nightTab will add the search term entered into the Search input at the end of the above URL.</p>
</div> </div>
@ -106,7 +106,7 @@
<label for="control-header-search-engine-custom-queryname">Name attribute</label> <label for="control-header-search-engine-custom-queryname">Name attribute</label>
<input id="control-header-search-engine-custom-queryname" class="control-header-search-engine-custom-queryname" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="q" tabindex="-1"> <input id="control-header-search-engine-custom-queryname" class="control-header-search-engine-custom-queryname" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="q" tabindex="-1">
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-header-search-engine-custom-helper form-helper-item">Sets the name attribute on the Search input field.</p> <p class="control-header-search-engine-custom-helper form-helper-item">Sets the name attribute on the Search input field.</p>
<p class="control-header-search-engine-custom-helper form-helper-item">This defines the name passed to the search engine when submitting. If not sure leave blank.</p> <p class="control-header-search-engine-custom-helper form-helper-item">This defines the name passed to the search engine when submitting. If not sure leave blank.</p>
</div> </div>
@ -141,7 +141,7 @@
<button class="control-header-search-size-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button> <button class="control-header-search-size-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-wrap">
<p class="control-header-search-size-helper form-helper-item">Only the Search box width control will change the Width of the Search box.</p> <p class="control-header-search-size-helper form-helper-item">Only the Search box width control will change the Width of the Search box.</p>
</div> </div>
<hr> <hr>

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

@ -7,7 +7,7 @@
<input id="control-header-transitional-show" class="control-header-transitional-show" type="checkbox" tabindex="-1"> <input id="control-header-transitional-show" class="control-header-transitional-show" type="checkbox" tabindex="-1">
<label for="control-header-transitional-show"><span class="label-icon"></span> Show</label> <label for="control-header-transitional-show"><span class="label-icon"></span> Show</label>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-header-transitional-show-helper form-helper-item">Only available when Date or Time is shown.</p> <p class="control-header-transitional-show-helper form-helper-item">Only available when Date or Time is shown.</p>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">

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

@ -46,7 +46,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-layout-alignment-helper form-helper-item">Effects may not be visible if the Layout Area is full width or if Bookmarks fill the page.</p> <p class="control-layout-alignment-helper form-helper-item">Effects may not be visible if the Layout Area is full width or if Bookmarks fill the page.</p>
</div> </div>
<hr> <hr>
@ -91,7 +91,7 @@
</span> </span>
</label> </label>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<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>
</div> </div>
</div> </div>

2
src/html/menu/content/layout/page.html
View File

@ -31,7 +31,7 @@
<input id="control-layout-scrollbars-none" class="control-layout-scrollbars-none" type="radio" name="control-layout-scrollbars" value="none" tabindex="-1"> <input id="control-layout-scrollbars-none" class="control-layout-scrollbars-none" type="radio" name="control-layout-scrollbars" value="none" tabindex="-1">
<label for="control-layout-scrollbars-none"><span class="label-icon"></span> Hidden</label> <label for="control-layout-scrollbars-none"><span class="label-icon"></span> Hidden</label>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-layout-scrollbars-helper form-helper-item">May not work in some browsers.</p> <p class="control-layout-scrollbars-helper form-helper-item">May not work in some browsers.</p>
</div> </div>
</div> </div>

4
src/html/menu/content/layout/scaling.html
View File

@ -11,10 +11,8 @@
<button class="control-layout-size-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button> <button class="control-layout-size-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-wrap">
<p class="control-layout-size-helper form-helper-item">Resize all elements on the page.</p> <p class="control-layout-size-helper form-helper-item">Resize all elements on the page.</p>
</div>
<div class="form-helper">
<p class="control-layout-size-helper form-helper-item">Take care as some elements could scale up to outside the page.</p> <p class="control-layout-size-helper form-helper-item">Take care as some elements could scale up to outside the page.</p>
</div> </div>
</div> </div>

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

@ -13,7 +13,7 @@
<button class="control-theme-accent-rgb-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button> <button class="control-theme-accent-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-wrap">
<p class="control-theme-accent-rgb-helper form-helper-item">Accent Colour can also be changed from the Header Area.</p> <p class="control-theme-accent-rgb-helper form-helper-item">Accent Colour can also be changed from the Header Area.</p>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
@ -119,10 +119,8 @@
<button class="control-theme-accent-cycle-step-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button> <button class="control-theme-accent-cycle-step-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-wrap">
<p class="control-theme-accent-cycle-helper form-helper-item">Take casre as a small delay in Accent hue change may cause performance issues.</p> <p class="control-theme-accent-cycle-helper form-helper-item">Take casre as a small delay in Accent hue change may cause performance issues.</p>
</div>
<div class="form-helper">
<p class="control-theme-accent-cycle-helper form-helper-item">Auto change Accent hue will not work when the Accent colour is a grey or black.</p> <p class="control-theme-accent-cycle-helper form-helper-item">Auto change Accent hue will not work when the Accent colour is a grey or black.</p>
</div> </div>
</div> </div>

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

@ -73,13 +73,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-theme-color-helper form-helper-item">Backgrounds, Bookmarks and Modals use shades from the left.</p> <p class="control-theme-color-helper form-helper-item">Backgrounds, Bookmarks and Modals use shades from the left.</p>
</div>
<div class="form-helper">
<p class="control-theme-color-helper form-helper-item">Text and form elements use shades from the right.</p> <p class="control-theme-color-helper form-helper-item">Text and form elements use shades from the right.</p>
</div>
<div class="form-helper">
<p class="control-theme-color-helper form-helper-item">For a light look switch to the Light Style and then select a Primary colour.</p> <p class="control-theme-color-helper form-helper-item">For a light look switch to the Light Style and then select a Primary colour.</p>
</div> </div>
<hr> <hr>
@ -91,7 +87,7 @@
<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 mb-0"> <div class="form-wrap 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">

64
src/html/menu/content/theme/fonts.html
View File

@ -10,13 +10,9 @@
<button class="control-theme-font-display-name-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button> <button class="control-theme-font-display-name-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-wrap">
<p class="control-theme-font-display-helper form-helper-item">Use a <a href="https://fonts.google.com/" target="_blank">Google Font</a> to customise the Clock, Date, Group names and Bookmark Letters.</p> <p class="control-theme-font-display-helper form-helper-item">Use a <a href="https://fonts.google.com/" target="_blank">Google Font</a> to customise the Clock, Date, Group names and Bookmark Letters.</p>
</div>
<div class="form-helper">
<p class="control-theme-font-display-helper form-helper-item">Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Fredoka One" or "Kanit"</p> <p class="control-theme-font-display-helper form-helper-item">Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Fredoka One" or "Kanit"</p>
</div>
<div class="form-helper">
<p class="control-theme-font-display-helper form-helper-item">Clear the field to use the default font "Fjalla One".</p> <p class="control-theme-font-display-helper form-helper-item">Clear the field to use the default font "Fjalla One".</p>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
@ -37,27 +33,31 @@
<button class="control-theme-font-display-bold button button-line" tabindex="-1">Bold</button> <button class="control-theme-font-display-bold button button-line" tabindex="-1">Bold</button>
</div> </div>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-theme-font-display-helper form-helper-item">Not all fonts support all weights. Refer to the Google Font page to see which are available.</p> <p class="control-theme-font-display-helper form-helper-item">Not all fonts support all weights. Refer to the Google Font page to see which are available.</p>
</div> </div>
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<label>Style</label> <label>Style</label>
</div> </div>
<div class="form-inline"> <div class="form-wrap">
<div class="form-inline form-inline-spacer"> <div class="form-inline">
<div class="form-wrap"> <div class="form-wrap">
<input id="control-theme-font-display-style-normal" class="control-theme-font-display-style-normal" name="control-theme-font-display-style" type="radio" value="normal" tabindex="-1"> <div class="form-inline form-inline-spacer">
<label for="control-theme-font-display-style-normal"><span class="label-icon"></span> Normal</label> <div class="form-wrap">
<input id="control-theme-font-display-style-normal" class="control-theme-font-display-style-normal" name="control-theme-font-display-style" type="radio" value="normal" tabindex="-1">
<label for="control-theme-font-display-style-normal"><span class="label-icon"></span> Normal</label>
</div>
<div class="form-wrap">
<input id="control-theme-font-display-style-italic" class="control-theme-font-display-style-italic" type="radio" name="control-theme-font-display-style" value="italic" tabindex="-1">
<label for="control-theme-font-display-style-italic"><span class="label-icon"></span> Italic</label>
</div>
</div>
</div> </div>
<div class="form-wrap"> <div class="form-wrap ml-auto">
<input id="control-theme-font-display-style-italic" class="control-theme-font-display-style-italic" type="radio" name="control-theme-font-display-style" value="italic" tabindex="-1"> <button class="control-theme-font-display-style-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
<label for="control-theme-font-display-style-italic"><span class="label-icon"></span> Italic</label>
</div> </div>
</div> </div>
<div class="form-wrap ml-auto">
<button class="control-theme-font-display-style-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -71,13 +71,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-theme-font-ui-helper form-helper-item">Use a <a href="https://fonts.google.com/" target="_blank">Google Font</a> to customise the Bookmark name, URL and form elements.</p> <p class="control-theme-font-ui-helper form-helper-item">Use a <a href="https://fonts.google.com/" target="_blank">Google Font</a> to customise the Bookmark name, URL and form elements.</p>
</div>
<div class="form-helper">
<p class="control-theme-font-ui-helper form-helper-item">Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Roboto", "Source Sans Pro" or "Noto Sans"</p> <p class="control-theme-font-ui-helper form-helper-item">Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Roboto", "Source Sans Pro" or "Noto Sans"</p>
</div>
<div class="form-helper">
<p class="control-theme-font-ui-helper form-helper-item">Clear the field to use the default font "Open Sans".</p> <p class="control-theme-font-ui-helper form-helper-item">Clear the field to use the default font "Open Sans".</p>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
@ -98,27 +94,31 @@
<button class="control-theme-font-ui-bold button button-line" tabindex="-1">Bold</button> <button class="control-theme-font-ui-bold button button-line" tabindex="-1">Bold</button>
</div> </div>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-theme-font-ui-helper form-helper-item">Not all fonts support all weights. Refer to the Google Font page to see which are available.</p> <p class="control-theme-font-ui-helper form-helper-item">Not all fonts support all weights. Refer to the Google Font page to see which are available.</p>
</div> </div>
<hr> <hr>
<div class="form-wrap"> <div class="form-wrap">
<label>Style</label> <label>Style</label>
</div> </div>
<div class="form-inline"> <div class="form-wrap">
<div class="form-inline form-inline-spacer"> <div class="form-inline">
<div class="form-wrap"> <div class="form-wrap">
<input id="control-theme-font-ui-style-normal" class="control-theme-font-ui-style-normal" type="radio" name="control-theme-font-ui-style" value="normal" tabindex="-1"> <div class="form-inline form-inline-spacer">
<label for="control-theme-font-ui-style-normal"><span class="label-icon"></span> Normal</label> <div class="form-wrap">
<input id="control-theme-font-ui-style-normal" class="control-theme-font-ui-style-normal" type="radio" name="control-theme-font-ui-style" value="normal" tabindex="-1">
<label for="control-theme-font-ui-style-normal"><span class="label-icon"></span> Normal</label>
</div>
<div class="form-wrap">
<input id="control-theme-font-ui-style-italic" class="control-theme-font-ui-style-italic" type="radio" name="control-theme-font-ui-style" value="italic" tabindex="-1">
<label for="control-theme-font-ui-style-italic"><span class="label-icon"></span> Italic</label>
</div>
</div>
</div> </div>
<div class="form-wrap"> <div class="form-wrap ml-auto">
<input id="control-theme-font-ui-style-italic" class="control-theme-font-ui-style-italic" type="radio" name="control-theme-font-ui-style" value="italic" tabindex="-1"> <button class="control-theme-font-ui-style-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
<label for="control-theme-font-ui-style-italic"><span class="label-icon"></span> Italic</label>
</div> </div>
</div> </div>
<div class="form-wrap ml-auto">
<button class="control-theme-font-ui-style-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -4,7 +4,7 @@
</div> </div>
<div class="menu-item-form"> <div class="menu-item-form">
<div class="form-wrap theme-preset"></div> <div class="form-wrap theme-preset"></div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-theme-preset-helper form-helper-item">Applying a Preset will replace the current Colour, Accent, Font, Style, Radius, Shadow and Shade.</p> <p class="control-theme-preset-helper form-helper-item">Applying a Preset will replace the current Colour, Accent, Font, Style, Radius, Shadow and Shade.</p>
</div> </div>
</div> </div>

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

@ -13,7 +13,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-theme-custom-helper form-helper-item">Saving a Theme will record the current Colour, Accent, Font, Style, Radius, Shadow and Shade.</p> <p class="control-theme-custom-helper form-helper-item">Saving a Theme will record the current Colour, Accent, Font, Style, Radius, Shadow and Shade.</p>
</div> </div>
</div> </div>

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

@ -11,7 +11,7 @@
<button class="control-theme-shade-opacity-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button> <button class="control-theme-shade-opacity-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-wrap">
<p class="control-theme-shade-opacity-helper form-helper-item">The shade appears behind Modals and the Menu.</p> <p class="control-theme-shade-opacity-helper form-helper-item">The shade appears behind Modals and the Menu.</p>
</div> </div>
</div> </div>

4
src/html/menu/content/theme/style.html
View File

@ -15,10 +15,8 @@
<input id="control-theme-style-system" class="control-theme-style-system" type="radio" name="control-theme-style" value="system" tabindex="-1"> <input id="control-theme-style-system" class="control-theme-style-system" type="radio" name="control-theme-style" value="system" tabindex="-1">
<label for="control-theme-style-system"><span class="label-icon"></span> Follow system light or dark</label> <label for="control-theme-style-system"><span class="label-icon"></span> Follow system light or dark</label>
</div> </div>
<div class="form-helper"> <div class="form-wrap">
<p class="control-theme-style-helper form-helper-item">Flip the colour shades defined by the primary Colour.</p> <p class="control-theme-style-helper form-helper-item">Flip the colour shades defined by the primary Colour.</p>
</div>
<div class="form-helper">
<p class="control-theme-style-helper form-helper-item">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p> <p class="control-theme-style-helper form-helper-item">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
</div> </div>
</div> </div>

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

@ -34,10 +34,10 @@
<div class="menu-subnav menu-subnav-bookmarks"> <div class="menu-subnav menu-subnav-bookmarks">
<a href="#menu-content-bookmarks-area" class="menu-nav-sub button button-small" tabindex="-1">Area</a> <a href="#menu-content-bookmarks-area" class="menu-nav-sub button button-small" tabindex="-1">Area</a>
<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-general" class="menu-nav-sub button button-small" tabindex="-1">General</a>
<a href="#menu-content-bookmarks-content" class="menu-nav-sub button button-small" tabindex="-1">Content</a> <a href="#menu-content-bookmarks-visual" class="menu-nav-sub button button-small" tabindex="-1">Visual element</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-content" class="menu-nav-sub button button-small" tabindex="-1">Content</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 override</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-accent" class="menu-nav-sub button button-small" tabindex="-1">Accent override</a>

7
src/js/auto-suggest.js
View File

@ -27,6 +27,7 @@ var autoSuggest = (function() {
bind.input = function(override) { bind.input = function(override) {
var options = { var options = {
input: null, input: null,
widthAnchor: null,
type: null, type: null,
postFocus: null postFocus: null
}; };
@ -159,7 +160,6 @@ var autoSuggest = (function() {
} }
}; };
var render = {}; var render = {};
render.delay = function(options) { render.delay = function(options) {
@ -210,7 +210,10 @@ var autoSuggest = (function() {
top: autoSuggestInput.getBoundingClientRect().bottom + window.scrollY, top: autoSuggestInput.getBoundingClientRect().bottom + window.scrollY,
width: autoSuggestInput.getBoundingClientRect().width width: autoSuggestInput.getBoundingClientRect().width
}; };
var autoSuggest = helper.node("div|class:auto-suggest list-unstyled"); if (options.widthAnchor == "parent") {
box.width = autoSuggestInput.parentElement.getBoundingClientRect().width;
};
var autoSuggest = helper.node("div|class:auto-suggest list-unstyled is-jello");
var autoSuggestList = helper.node("ul|class:auto-suggest-list list-unstyled"); var autoSuggestList = helper.node("ul|class:auto-suggest-list list-unstyled");
autoSuggest.appendChild(autoSuggestList); autoSuggest.appendChild(autoSuggestList);
body.appendChild(autoSuggest); body.appendChild(autoSuggest);

422
src/js/bookmarks.js
View File

@ -11,17 +11,43 @@ var bookmarks = (function() {
show: true show: true
}, },
items: [{ items: [{
visual: { display: {
display: "icon", direction: "vertical",
letter: "AS", order: "visualname",
image: "", alignment: "centercenter",
icon: { gutter: 2,
name: "dice-d20", rotate: 0,
prefix: "fas", translate: {
label: "Dice D20" x: 0,
y: 0
},
visual: {
show: true,
type: "icon",
letter: {
size: 3,
text: "AS"
},
image: {
size: 3,
url: ""
},
icon: {
size: 3,
name: "dice-d20",
prefix: "fas",
label: "Dice D20"
},
shadow: {
size: 0
}
},
name: {
show: true,
text: "awesomeSheet",
size: 0.9
} }
}, },
name: "awesomeSheet",
url: "https://zombiefox.github.io/awesomeSheet/", url: "https://zombiefox.github.io/awesomeSheet/",
accent: { accent: {
by: "theme", by: "theme",
@ -47,25 +73,55 @@ var bookmarks = (function() {
r: 0, r: 0,
g: 0, g: 0,
b: 0 b: 0
} },
opacity: 1
},
image: {
url: "",
opacity: 1
}, },
image: "",
wide: false, wide: false,
tall: false, tall: false,
searchMatch: false, searchMatch: false,
timeStamp: 1546453104010 timeStamp: 1546453104010
}, { }, {
visual: { display: {
display: "letter", direction: "vertical",
letter: "AZ", order: "visualname",
image: "", alignment: "centercenter",
icon: { gutter: 2,
name: "amazon", rotate: 0,
prefix: "fab", translate: {
label: "Amazon" x: 0,
y: 0
},
visual: {
show: true,
type: "letter",
letter: {
size: 3,
text: "AZ"
},
image: {
size: 3,
url: ""
},
icon: {
size: 3,
name: "amazon",
prefix: "fab",
label: "Amazon"
},
shadow: {
size: 0
}
},
name: {
show: true,
text: "Amazon",
size: 0.9
} }
}, },
name: "Amazon",
url: "https://www.amazon.co.uk/", url: "https://www.amazon.co.uk/",
accent: { accent: {
by: "theme", by: "theme",
@ -91,25 +147,55 @@ var bookmarks = (function() {
r: 0, r: 0,
g: 0, g: 0,
b: 0 b: 0
} },
opacity: 1
},
image: {
url: "",
opacity: 1
}, },
image: "",
wide: false, wide: false,
tall: false, tall: false,
searchMatch: false, searchMatch: false,
timeStamp: 1546453107633 timeStamp: 1546453107633
}, { }, {
visual: { display: {
display: "letter", direction: "vertical",
letter: "GM", order: "visualname",
image: "", alignment: "centercenter",
icon: { gutter: 2,
name: "envelope", rotate: 0,
prefix: "fas", translate: {
label: "Envelope" x: 0,
y: 0
},
visual: {
show: true,
type: "letter",
letter: {
size: 3,
text: "GM"
},
image: {
size: 3,
url: ""
},
icon: {
size: 3,
name: "envelope",
prefix: "fas",
label: "Envelope"
},
shadow: {
size: 0
}
},
name: {
show: true,
text: "Gmail",
size: 0.9
} }
}, },
name: "Gmail",
url: "https://mail.google.com/", url: "https://mail.google.com/",
accent: { accent: {
by: "theme", by: "theme",
@ -135,25 +221,55 @@ var bookmarks = (function() {
r: 0, r: 0,
g: 0, g: 0,
b: 0 b: 0
} },
opacity: 1
},
image: {
url: "",
opacity: 1
}, },
image: "",
wide: false, wide: false,
tall: false, tall: false,
searchMatch: false, searchMatch: false,
timeStamp: 1546453110265 timeStamp: 1546453110265
}, { }, {
visual: { display: {
display: "icon", direction: "vertical",
letter: "R", order: "visualname",
image: "", alignment: "centercenter",
icon: { gutter: 2,
name: "reddit-alien", rotate: 0,
prefix: "fab", translate: {
label: "reddit Alien" x: 0,
y: 0
},
visual: {
show: true,
type: "icon",
letter: {
size: 3,
text: "R"
},
image: {
size: 3,
url: ""
},
icon: {
size: 3,
name: "reddit-alien",
prefix: "fab",
label: "reddit Alien"
},
shadow: {
size: 0
}
},
name: {
show: true,
text: "Reddit",
size: 0.9
} }
}, },
name: "Reddit",
url: "https://www.reddit.com/", url: "https://www.reddit.com/",
accent: { accent: {
by: "theme", by: "theme",
@ -179,25 +295,55 @@ var bookmarks = (function() {
r: 0, r: 0,
g: 0, g: 0,
b: 0 b: 0
} },
opacity: 1
},
image: {
url: "",
opacity: 1
}, },
image: "",
wide: false, wide: false,
tall: false, tall: false,
searchMatch: false, searchMatch: false,
timeStamp: 1546453111491 timeStamp: 1546453111491
}, { }, {
visual: { display: {
display: "icon", direction: "vertical",
letter: "N", order: "visualname",
image: "", alignment: "centercenter",
icon: { gutter: 2,
name: "film", rotate: 0,
prefix: "fas", translate: {
label: "Film" x: 0,
y: 0
},
visual: {
show: true,
type: "icon",
letter: {
size: 3,
text: "N"
},
image: {
size: 3,
url: ""
},
icon: {
size: 3,
name: "film",
prefix: "fas",
label: "Film"
},
shadow: {
size: 0
}
},
name: {
show: true,
text: "Netflix",
size: 0.9
} }
}, },
name: "Netflix",
url: "https://www.netflix.com/", url: "https://www.netflix.com/",
accent: { accent: {
by: "theme", by: "theme",
@ -223,25 +369,55 @@ var bookmarks = (function() {
r: 0, r: 0,
g: 0, g: 0,
b: 0 b: 0
} },
opacity: 1
},
image: {
url: "",
opacity: 1
}, },
image: "",
wide: false, wide: false,
tall: false, tall: false,
searchMatch: false, searchMatch: false,
timeStamp: 1546453104460 timeStamp: 1546453104460
}, { }, {
visual: { display: {
display: "letter", direction: "vertical",
letter: "DR", order: "visualname",
image: "", alignment: "centercenter",
icon: { gutter: 2,
name: "", rotate: 0,
prefix: "", translate: {
label: "" x: 0,
y: 0
},
visual: {
show: true,
type: "letter",
letter: {
size: 3,
text: "DR"
},
image: {
size: 3,
url: ""
},
icon: {
size: 3,
name: "",
prefix: "",
label: ""
},
shadow: {
size: 0
}
},
name: {
show: true,
text: "Drive",
size: 0.9
} }
}, },
name: "Drive",
url: "https://drive.google.com/drive/", url: "https://drive.google.com/drive/",
accent: { accent: {
by: "theme", by: "theme",
@ -267,9 +443,13 @@ var bookmarks = (function() {
r: 0, r: 0,
g: 0, g: 0,
b: 0 b: 0
} },
opacity: 1
},
image: {
url: "",
opacity: 1
}, },
image: "",
wide: false, wide: false,
tall: false, tall: false,
searchMatch: false, searchMatch: false,
@ -284,17 +464,43 @@ var bookmarks = (function() {
show: true show: true
}, },
items: [{ items: [{
visual: { display: {
display: "icon", direction: "vertical",
letter: "DEV", order: "visualname",
image: "", alignment: "centercenter",
icon: { gutter: 2,
name: "code", rotate: 0,
prefix: "fas", translate: {
label: "Code" x: 0,
y: 0
},
visual: {
show: true,
type: "icon",
letter: {
size: 3,
text: "DEV"
},
image: {
size: 3,
url: ""
},
icon: {
size: 3,
name: "code",
prefix: "fas",
label: "Code"
},
shadow: {
size: 0
}
},
name: {
show: true,
text: "Devdocs",
size: 0.9
} }
}, },
name: "Devdocs",
url: "http://devdocs.io/", url: "http://devdocs.io/",
accent: { accent: {
by: "theme", by: "theme",
@ -320,25 +526,55 @@ var bookmarks = (function() {
r: 0, r: 0,
g: 0, g: 0,
b: 0 b: 0
} },
opacity: 1
},
image: {
url: "",
opacity: 1
}, },
image: "",
wide: false, wide: false,
tall: false, tall: false,
searchMatch: false, searchMatch: false,
timeStamp: 1546453101749 timeStamp: 1546453101749
}, { }, {
visual: { display: {
display: "icon", direction: "vertical",
letter: "GIT", order: "visualname",
image: "", alignment: "centercenter",
icon: { gutter: 2,
name: "github", rotate: 0,
prefix: "fab", translate: {
label: "GitHub" x: 0,
y: 0
},
visual: {
show: true,
type: "icon",
letter: {
size: 3,
text: "GIT"
},
image: {
size: 3,
url: ""
},
icon: {
size: 3,
name: "github",
prefix: "fab",
label: "GitHub"
},
shadow: {
size: 0
}
},
name: {
show: true,
text: "Github",
size: 0.9
} }
}, },
name: "Github",
url: "https://github.com/", url: "https://github.com/",
accent: { accent: {
by: "theme", by: "theme",
@ -364,9 +600,13 @@ var bookmarks = (function() {
r: 0, r: 0,
g: 0, g: 0,
b: 0 b: 0
} },
opacity: 1
},
image: {
url: "",
opacity: 1
}, },
image: "",
wide: false, wide: false,
tall: false, tall: false,
searchMatch: false, searchMatch: false,
@ -475,13 +715,13 @@ var bookmarks = (function() {
mod.sort = function(by) { mod.sort = function(by) {
var action = { var action = {
name: function(array) { name: function(array) {
return helper.sortObject(array, "name"); return helper.sortObject(array, "display.name.text");
}, },
letter: function(array) { letter: function(array) {
return helper.sortObject(array, "letter"); return helper.sortObject(array, "display.visual.letter.text");
}, },
icon: function(array) { icon: function(array) {
return helper.sortObject(array, "icon.name"); return helper.sortObject(array, "display.visual.icon.name");
} }
}; };
mod.all.forEach(function(arrayItem, index) { mod.all.forEach(function(arrayItem, index) {

731
src/js/control.js
View File

File diff suppressed because it is too large Load Diff

14
src/js/helper.js
View File

@ -312,7 +312,19 @@ var helper = (function() {
}); });
}; };
if (node) { if (node) {
element.appendChild(node); if (typeof node != "string") {
if (node.length > 0) {
node.forEach(function(arrayItem, index) {
if (arrayItem instanceof HTMLElement) {
element.appendChild(arrayItem);
};
});
} else {
if (node instanceof HTMLElement) {
element.appendChild(node);
};
};
};
}; };
return element; return element;
}; };

3647
src/js/link.js
View File

File diff suppressed because it is too large Load Diff

3
src/js/state.js
View File

@ -179,6 +179,7 @@ var state = (function() {
}, },
item: { item: {
color: { color: {
by: "theme",
hsl: { hsl: {
h: 0, h: 0,
s: 0, s: 0,
@ -192,6 +193,7 @@ var state = (function() {
opacity: 1 opacity: 1
}, },
accent: { accent: {
by: "theme",
hsl: { hsl: {
h: 0, h: 0,
s: 0, s: 0,
@ -208,7 +210,6 @@ var state = (function() {
}, },
display: { display: {
visual: { visual: {
show: true,
letter: { letter: {
size: 3 size: 3
}, },

39
src/js/theme.js
View File

@ -741,12 +741,12 @@ var theme = (function() {
} }
}); });
}, },
generated: function() { shades: function(rgb) {
var shadeMax = 10; var shadeMax = 10;
var shadeMin = 1; var shadeMin = 1;
var contrastNeg = state.get.current().theme.color.contrast.dark; var contrastNeg = state.get.current().theme.color.contrast.dark;
var contrastPos = state.get.current().theme.color.contrast.light; var contrastPos = state.get.current().theme.color.contrast.light;
var hsl = helper.convertColor.rgb.hsl(state.get.current().theme.color.rgb); var hsl = helper.convertColor.rgb.hsl(rgb);
var validateRGBNumber = function(rgb) { var validateRGBNumber = function(rgb) {
for (var key in rgb) { for (var key in rgb) {
if (rgb[key] < 0) { if (rgb[key] < 0) {
@ -758,19 +758,21 @@ var theme = (function() {
}; };
return rgb; return rgb;
}; };
// set light theme shades
var shadeColors = {
negative: {},
positive: {}
};
for (var i = shadeMax; i >= shadeMin; i--) { for (var i = shadeMax; i >= shadeMin; i--) {
var rgb = helper.convertColor.hsl.rgb({ var rgb = helper.convertColor.hsl.rgb({
h: hsl.h, h: hsl.h,
s: hsl.s, s: hsl.s,
l: hsl.l - (contrastNeg * i) l: hsl.l - (contrastNeg * i)
}); });
helper.setObject({ shadeColors.negative[i] = validateRGBNumber(rgb);
object: state.get.current(),
path: "theme.color.generated.negative." + i,
newValue: validateRGBNumber(rgb)
});
}; };
// set dark theme shades // set dark theme shades
for (var i = shadeMin; i <= shadeMax; i++) { for (var i = shadeMin; i <= shadeMax; i++) {
var rgb = helper.convertColor.hsl.rgb({ var rgb = helper.convertColor.hsl.rgb({
@ -778,12 +780,23 @@ var theme = (function() {
s: hsl.s, s: hsl.s,
l: hsl.l + (contrastPos * i) l: hsl.l + (contrastPos * i)
}); });
helper.setObject({ shadeColors.positive[i] = validateRGBNumber(rgb);
object: state.get.current(),
path: "theme.color.generated.positive." + i,
newValue: validateRGBNumber(rgb)
});
}; };
return shadeColors;
},
generated: function() {
var shades = mod.color.shades(state.get.current().theme.color.rgb);
helper.setObject({
object: state.get.current(),
path: "theme.color.generated.negative",
newValue: shades.negative
});
helper.setObject({
object: state.get.current(),
path: "theme.color.generated.positive",
newValue: shades.positive
});
} }
}; };

214
src/js/update.js
View File

@ -1112,6 +1112,220 @@ var update = (function() {
}); });
data.state.link.breakpoint = "xs"; data.state.link.breakpoint = "xs";
return data; return data;
},
"5.50.0": function(data) {
data.bookmarks.forEach(function(group, index) {
group.items.forEach(function(item, index) {
var bookmarkData = {
display: {
direction: data.state.link.item.display.direction,
order: data.state.link.item.display.order,
alignment: data.state.link.item.display.alignment,
gutter: data.state.link.item.display.gutter,
rotate: data.state.link.item.display.rotate,
translate: {
x: data.state.link.item.display.translate.x,
y: data.state.link.item.display.translate.y
},
visual: {
show: data.state.link.item.display.visual.show,
type: item.visual.display,
letter: {
size: data.state.link.item.display.visual.letter.size,
text: item.visual.letter
},
image: {
size: data.state.link.item.display.visual.image.size,
url: item.visual.image
},
icon: {
size: data.state.link.item.display.visual.icon.size,
name: item.visual.icon.name,
prefix: item.visual.icon.prefix,
label: item.visual.icon.label
},
shadow: {
size: data.state.link.item.display.visual.shadow.size
}
},
name: {
show: data.state.link.item.display.name.show,
text: item.name,
size: data.state.link.item.display.name.size
}
},
url: item.url,
accent: {
by: item.accent.by,
hsl: {
h: item.accent.hsl.h,
s: item.accent.hsl.s,
l: item.accent.hsl.l
},
rgb: {
r: item.accent.rgb.r,
g: item.accent.rgb.g,
b: item.accent.rgb.b
}
},
color: {
by: item.color.by,
hsl: {
h: item.color.hsl.h,
s: item.color.hsl.s,
l: item.color.hsl.l
},
rgb: {
r: item.color.rgb.r,
g: item.color.rgb.g,
b: item.color.rgb.b
},
opacity: data.state.link.item.color.opacity
},
image: {
url: item.image,
opacity: data.state.link.item.image.opacity
},
wide: item.wide,
tall: item.tall,
searchMatch: false,
timeStamp: item.timeStamp
};
if ((bookmarkData.display.direction != "vertical" && bookmarkData.display.direction != "horizontal") || bookmarkData.display.direction == undefined) {
bookmarkData.display.direction = "vertical";
};
if ((bookmarkData.display.order != "visualname" && bookmarkData.display.order != "namevisual") || bookmarkData.display.order == undefined) {
bookmarkData.display.order = "visualname";
};
if ((bookmarkData.display.alignment != "topleft" && bookmarkData.display.alignment != "topcenter" && bookmarkData.display.alignment != "topright" && bookmarkData.display.alignment != "centerleft" && bookmarkData.display.alignment != "centercenter" && bookmarkData.display.alignment != "centerright" && bookmarkData.display.alignment != "bottomleft" && bookmarkData.display.alignment != "bottomcenter" && bookmarkData.display.alignment != "bottomright") || bookmarkData.display.alignment == undefined) {
bookmarkData.display.alignment = "centercenter";
};
if (typeof bookmarkData.display.gutter != "number" || bookmarkData.display.gutter == undefined) {
bookmarkData.display.gutter = 2;
};
if (typeof bookmarkData.display.rotate != "number" || bookmarkData.display.rotate == undefined) {
bookmarkData.display.rotate = 0;
};
if (typeof bookmarkData.display.translate.x != "number" || bookmarkData.display.translate.x == undefined) {
bookmarkData.display.translate.x = 0;
};
if (typeof bookmarkData.display.translate.y != "number" || bookmarkData.display.translate.y == undefined) {
bookmarkData.display.translate.y = 0;
};
if (bookmarkData.display.visual.show == undefined) {
bookmarkData.display.visual.show = true;
};
if ((bookmarkData.display.visual.type != "letter" && bookmarkData.display.visual.type != "icon" && bookmarkData.display.visual.type != "image") || bookmarkData.display.visual.type == undefined) {
bookmarkData.display.visual.type = "letter";
};
if (typeof bookmarkData.display.visual.letter.size != "number" || bookmarkData.display.visual.letter.size == undefined) {
bookmarkData.display.visual.letter.size = 3;
};
if (bookmarkData.display.visual.letter.text == undefined) {
bookmarkData.display.visual.letter.text = "";
};
if (typeof bookmarkData.display.visual.image.size != "number" || bookmarkData.display.visual.image.size == undefined) {
bookmarkData.display.visual.image.size = 3;
};
if (bookmarkData.display.visual.image.url == undefined) {
bookmarkData.display.visual.image.url = "";
};
if (typeof bookmarkData.display.visual.icon.size != "number" || bookmarkData.display.visual.icon.size == undefined) {
bookmarkData.display.visual.icon.size = 3;
};
if (bookmarkData.display.visual.icon.name == undefined) {
bookmarkData.display.visual.icon.name = "";
};
if (bookmarkData.display.visual.icon.prefix == undefined) {
bookmarkData.display.visual.icon.prefix = "";
};
if (bookmarkData.display.visual.icon.label == undefined) {
bookmarkData.display.visual.icon.label = "";
};
if (typeof bookmarkData.display.visual.shadow.size != "number" || bookmarkData.display.visual.shadow.size == undefined) {
bookmarkData.display.visual.shadow.size = 0;
};
if (bookmarkData.display.name.show == undefined) {
bookmarkData.display.name.show = true;
};
if (bookmarkData.display.name.text == undefined) {
bookmarkData.display.name.text = "";
};
if (typeof bookmarkData.display.name.size != "number" || bookmarkData.display.name.size == undefined) {
bookmarkData.display.name.size = 0.9;
};
if (bookmarkData.url == undefined) {
bookmarkData.url = "";
};
if ((bookmarkData.accent.by != "theme" && bookmarkData.accent.by != "custom") || bookmarkData.accent.by == undefined) {
bookmarkData.accent.by = "theme";
};
if (typeof bookmarkData.accent.hsl.h != "number" || bookmarkData.accent.hsl.h == undefined) {
bookmarkData.accent.hsl.h = 0;
};
if (typeof bookmarkData.accent.hsl.s != "number" || bookmarkData.accent.hsl.s == undefined) {
bookmarkData.accent.hsl.s = 0;
};
if (typeof bookmarkData.accent.hsl.l != "number" || bookmarkData.accent.hsl.l == undefined) {
bookmarkData.accent.hsl.l = 0;
};
if (typeof bookmarkData.accent.rgb.r != "number" || bookmarkData.accent.rgb.r == undefined) {
bookmarkData.accent.rgb.r = 0;
};
if (typeof bookmarkData.accent.rgb.g != "number" || bookmarkData.accent.rgb.g == undefined) {
bookmarkData.accent.rgb.g = 0;
};
if (typeof bookmarkData.accent.rgb.b != "number" || bookmarkData.accent.rgb.b == undefined) {
bookmarkData.accent.rgb.b = 0;
};
if ((bookmarkData.color.by != "theme" && bookmarkData.color.by != "custom") || bookmarkData.color.by == undefined) {
bookmarkData.color.by = "theme";
};
if (typeof bookmarkData.color.hsl.h != "number" || bookmarkData.color.hsl.h == undefined) {
bookmarkData.color.hsl.h = 0;
};
if (typeof bookmarkData.color.hsl.s != "number" || bookmarkData.color.hsl.s == undefined) {
bookmarkData.color.hsl.s = 0;
};
if (typeof bookmarkData.color.hsl.l != "number" || bookmarkData.color.hsl.l == undefined) {
bookmarkData.color.hsl.l = 0;
};
if (typeof bookmarkData.color.rgb.r != "number" || bookmarkData.color.rgb.r == undefined) {
bookmarkData.color.rgb.r = 0;
};
if (typeof bookmarkData.color.rgb.g != "number" || bookmarkData.color.rgb.g == undefined) {
bookmarkData.color.rgb.g = 0;
};
if (typeof bookmarkData.color.rgb.b != "number" || bookmarkData.color.rgb.b == undefined) {
bookmarkData.color.rgb.b = 0;
};
if (typeof bookmarkData.color.opacity != "number" || bookmarkData.color.opacity == undefined) {
bookmarkData.color.opacity = 1;
};
if (bookmarkData.image.url == undefined) {
bookmarkData.image.url = "";
};
if (typeof bookmarkData.image.opacity != "number" || bookmarkData.image.opacity == undefined) {
bookmarkData.image.opacity = 1;
};
if (bookmarkData.wide == undefined) {
bookmarkData.wide = false;
};
if (bookmarkData.tall == undefined) {
bookmarkData.tall = false;
};
if (bookmarkData.searchMatch == undefined) {
bookmarkData.searchMatch = false;
};
group.items[index] = bookmarkData;
});
});
data.state.link.item.color.by = "theme";
data.state.link.item.accent.by = "theme";
delete data.state.link.item.display.visual.show;
return data;
} }
}; };

4
src/js/version.js
View File

@ -1,8 +1,8 @@
var version = (function() { var version = (function() {
var current = "5.49.0"; var current = "5.50.0";
var name = "Macabre Caterpillar"; var name = "Jaded Raven";
var compare = function(a, b) { var compare = function(a, b) {
var pa = a.split("."); var pa = a.split(".");

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