mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-01-10 07:58:53 +01:00
[feature] add link icon and background image controls
This commit is contained in:
Kombie
GitHub
parent
f1fc8079da
commit
41287a7f74
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nightTab",
|
||||
"version": "5.32.0",
|
||||
"version": "5.33.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nightTab",
|
||||
"version": "5.32.0",
|
||||
"version": "5.33.0",
|
||||
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
||||
@ -4,11 +4,12 @@
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: rgb(var(--background-color-theme));
|
||||
font-size: var(--theme-root-font-size);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: rgb(var(--theme-black));
|
||||
background-color: rgb(var(--background-color-theme));
|
||||
color: rgb(var(--theme-style-text));
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
|
||||
@ -437,6 +437,7 @@ input[type="radio"]+label {
|
||||
font-family: var(--theme-font-ui-name);
|
||||
font-weight: var(--theme-font-ui-weight);
|
||||
font-style: var(--theme-font-ui-style);
|
||||
color: rgb(var(--form-label));
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -634,6 +635,95 @@ input[type="checkbox"]:checked:disabled:active+label .label-icon:after {
|
||||
background-color: rgb(var(--form-icon-symbol-disabled));
|
||||
}
|
||||
|
||||
.label-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
input[type="checkbox"]+label .label-block-item,
|
||||
input[type="radio"]+label .label-block-item {
|
||||
color: rgb(var(--form-label));
|
||||
transition: color var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:hover+label .label-block-item,
|
||||
input[type="checkbox"]:focus+label .label-block-item,
|
||||
input[type="radio"]:hover+label .label-block-item,
|
||||
input[type="radio"]:focus+label .label-block-item {
|
||||
color: rgb(var(--form-label-hover));
|
||||
}
|
||||
|
||||
input[type="checkbox"]:active+label .label-block-item,
|
||||
input[type="radio"]:active+label .label-block-item {
|
||||
color: rgb(var(--form-label-focus-active));
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked+label .label-block-item,
|
||||
input[type="radio"]:checked+label .label-block-item {
|
||||
color: rgb(var(--form-label-checked));
|
||||
}
|
||||
|
||||
input[type="checkbox"]:disabled+label .label-block-item,
|
||||
input[type="checkbox"]:disabled:hover+label .label-block-item,
|
||||
input[type="checkbox"]:disabled:focus+label .label-block-item,
|
||||
input[type="radio"]:disabled+label .label-block-item,
|
||||
input[type="radio"]:disabled:hover+label .label-block-item,
|
||||
input[type="radio"]:disabled:focus+label .label-block-item {
|
||||
color: rgb(var(--form-label-disabled));
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
input[type="checkbox"]+label .label-block-item.muted,
|
||||
input[type="radio"]+label .label-block-item.muted {
|
||||
color: rgb(var(--utilities-muted));
|
||||
transition: color var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:hover+label .label-block-item.muted,
|
||||
input[type="checkbox"]:focus+label .label-block-item.muted,
|
||||
input[type="radio"]:hover+label .label-block-item.muted,
|
||||
input[type="radio"]:focus+label .label-block-item.muted {
|
||||
color: rgb(var(--utilities-muted-hover));
|
||||
}
|
||||
|
||||
input[type="checkbox"]:active+label .label-block-item.muted,
|
||||
input[type="radio"]:active+label .label-block-item.muted {
|
||||
color: rgb(var(--utilities-muted-focus-active));
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked+label .label-block-item.muted,
|
||||
input[type="radio"]:checked+label .label-block-item.muted {
|
||||
color: rgb(var(--utilities-muted-checked));
|
||||
}
|
||||
|
||||
input[type="checkbox"]:disabled+label .label-block-item.muted,
|
||||
input[type="checkbox"]:disabled:hover+label .label-block-item.muted,
|
||||
input[type="checkbox"]:disabled:focus+label .label-block-item.muted,
|
||||
input[type="radio"]:disabled+label .label-block-item.muted,
|
||||
input[type="radio"]:disabled:hover+label .label-block-item.muted,
|
||||
input[type="radio"]:disabled:focus+label .label-block-item.muted {
|
||||
color: rgb(var(--utilities-muted-disabled));
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.label-block-item:not(:last-child):not(:only-child) {
|
||||
margin-bottom: calc(var(--form-wrap-space) / 4);
|
||||
}
|
||||
|
||||
input:disabled+label .label-block-item,
|
||||
input:disabled:hover+label .label-block-item,
|
||||
input:disabled:focus+label .label-block-item,
|
||||
input[type="checkbox"]:disabled+label .label-block-item,
|
||||
input[type="checkbox"]:disabled:hover+label .label-block-item,
|
||||
input[type="checkbox"]:disabled:focus+label .label-block-item,
|
||||
input[type="radio"]:disabled+label .label-block-item,
|
||||
input[type="radio"]:disabled:hover+label .label-block-item,
|
||||
input[type="radio"]:disabled:focus+label .label-block-item {
|
||||
color: rgb(var(--form-label-disabled));
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* color */
|
||||
input[type="color"] {
|
||||
background-color: transparent;
|
||||
@ -647,7 +737,8 @@ input[type="color"] {
|
||||
border-radius: var(--theme-radius);
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: box-shadow var(--layout-timing-extra-fast);
|
||||
opacity: 1;
|
||||
transition: box-shadow var(--layout-timing-extra-fast), opacity var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
input[type="color"]:hover {
|
||||
|
||||
167
src/css/link.css
167
src/css/link.css
@ -182,12 +182,23 @@
|
||||
transition: background-color var(--layout-timing-extra-fast), height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
.is-link-item-color-by-theme .link-panel-front {
|
||||
background-color: rgba(var(--link-item-color-theme), var(--link-item-opacity));
|
||||
.link-image {
|
||||
background-image: var(--link-image-url);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
opacity: var(--link-item-opacity);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.is-link-item-color-by-custom .link-panel-front {
|
||||
background-color: rgba(var(--link-item-color-custom), var(--link-item-opacity));
|
||||
.link-panel-front {
|
||||
background-color: rgba(var(--link-item-color), var(--link-item-opacity));
|
||||
}
|
||||
|
||||
.is-link-style-block .link-panel-front {
|
||||
@ -225,18 +236,11 @@
|
||||
.link-item:focus-within .link-panel-front,
|
||||
.link-item:focus .link-panel-front,
|
||||
.link-item:hover .link-panel-front {
|
||||
background-color: rgba(var(--link-item-color-focus-hover), var(--link-item-opacity));
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.is-link-item-color-by-theme .link-panel-front:hover,
|
||||
.is-link-item-color-by-theme .link-panel-front:focus,
|
||||
.is-link-item-color-by-theme .link-item:focus-within .link-panel-front,
|
||||
.is-link-item-color-by-theme .link-item:focus .link-panel-front,
|
||||
.is-link-item-color-by-theme .link-item:hover .link-panel-front {
|
||||
background-color: rgba(var(--theme-color-03), var(--link-item-opacity));
|
||||
}
|
||||
|
||||
.is-link-item-shadow-show.is-link-orientation-bottom .link-item:focus .link-panel-front,
|
||||
.is-link-item-shadow-show.is-link-orientation-bottom .link-item:focus-within .link-panel-front,
|
||||
.is-link-item-shadow-show.is-link-orientation-bottom .link-item:hover .link-panel-front {
|
||||
@ -353,6 +357,7 @@
|
||||
top: var(--link-item-display-translate-y);
|
||||
left: var(--link-item-display-translate-x);
|
||||
font-size: 1em;
|
||||
z-index: 2;
|
||||
transform: rotate(var(--link-item-display-rotate));
|
||||
transition: font-size var(--layout-timing-extra-fast), top var(--layout-timing-extra-fast), left var(--layout-timing-extra-fast);
|
||||
}
|
||||
@ -361,35 +366,35 @@
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname .link-display {
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname .link-display {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon .link-display {
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual .link-display {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname .link-display {
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-visualname .link-display {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon .link-display {
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual .link-display {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.is-link-item-display-name-show.is-link-item-display-letcon-show.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname .link-display-letcon {
|
||||
.is-link-item-display-name-show.is-link-item-display-visual-show.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname .link-display-visual:not(:only-child) {
|
||||
margin-right: calc(var(--link-item-display-space) * var(--link-item-display-gutter));
|
||||
}
|
||||
|
||||
.is-link-item-display-name-show.is-link-item-display-letcon-show.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon .link-display-letcon {
|
||||
.is-link-item-display-name-show.is-link-item-display-visual-show.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual .link-display-visual:not(:only-child) {
|
||||
margin-left: calc(var(--link-item-display-space) * var(--link-item-display-gutter));
|
||||
}
|
||||
|
||||
.is-link-item-display-name-show.is-link-item-display-letcon-show.is-link-item-display-direction-vertical.is-link-item-display-order-letconname .link-display-letcon {
|
||||
.is-link-item-display-name-show.is-link-item-display-visual-show.is-link-item-display-direction-vertical.is-link-item-display-order-visualname .link-display-visual:not(:only-child) {
|
||||
margin-bottom: calc(var(--link-item-display-space) * var(--link-item-display-gutter));
|
||||
}
|
||||
|
||||
.is-link-item-display-name-show.is-link-item-display-letcon-show.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon .link-display-letcon {
|
||||
.is-link-item-display-name-show.is-link-item-display-visual-show.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual .link-display-visual:not(:only-child) {
|
||||
margin-top: calc(var(--link-item-display-space) * var(--link-item-display-gutter));
|
||||
}
|
||||
|
||||
@ -429,186 +434,186 @@
|
||||
transform-origin: bottom right;
|
||||
}
|
||||
|
||||
/* vertical letcon name */
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-topleft .link-display {
|
||||
/* vertical visual name */
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-topleft .link-display {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-topcenter .link-display {
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-topcenter .link-display {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-topright .link-display {
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-topright .link-display {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-centerleft .link-display {
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-centerleft .link-display {
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-centercenter .link-display {
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-centercenter .link-display {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-centerright .link-display {
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-centerright .link-display {
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-bottomleft .link-display {
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-bottomleft .link-display {
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-bottomcenter .link-display {
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-bottomcenter .link-display {
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-bottomright .link-display {
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-bottomright .link-display {
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
/* vertical name letcon */
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-topleft .link-display {
|
||||
/* vertical name visual */
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-topleft .link-display {
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-topcenter .link-display {
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-topcenter .link-display {
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-topright .link-display {
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-topright .link-display {
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-centerleft .link-display {
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-centerleft .link-display {
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-centercenter .link-display {
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-centercenter .link-display {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-centerright .link-display {
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-centerright .link-display {
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomleft .link-display {
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-bottomleft .link-display {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomcenter .link-display {
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-bottomcenter .link-display {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomright .link-display {
|
||||
.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-bottomright .link-display {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
/* horizontal letcon name */
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-topleft .link-display {
|
||||
/* horizontal visual name */
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-topleft .link-display {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-topcenter .link-display {
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-topcenter .link-display {
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-topright .link-display {
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-topright .link-display {
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-centerleft .link-display {
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-centerleft .link-display {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-centercenter .link-display {
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-centercenter .link-display {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-centerright .link-display {
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-centerright .link-display {
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-bottomleft .link-display {
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-bottomleft .link-display {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-bottomcenter .link-display {
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-bottomcenter .link-display {
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-bottomright .link-display {
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-bottomright .link-display {
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
/* horizontal name letcon */
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-topleft .link-display {
|
||||
/* horizontal name visual */
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-topleft .link-display {
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-topcenter .link-display {
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-topcenter .link-display {
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-topright .link-display {
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-topright .link-display {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-centerleft .link-display {
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-centerleft .link-display {
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-centercenter .link-display {
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-centercenter .link-display {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-centerright .link-display {
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-centerright .link-display {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomleft .link-display {
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-bottomleft .link-display {
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomcenter .link-display {
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-bottomcenter .link-display {
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomright .link-display {
|
||||
.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-bottomright .link-display {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
}
|
||||
@ -619,11 +624,11 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.link-display-letcon {
|
||||
.link-display-visual {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.is-link-item-display-letcon-show .link-display-letcon {
|
||||
.is-link-item-display-visual-show .link-display-visual {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -644,6 +649,15 @@
|
||||
transition: color var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
.link-display-image {
|
||||
background-image: var(--link-display-image-url);
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.is-theme-accent-cycle .link-display-letter,
|
||||
.is-theme-accent-cycle .link-display-icon {
|
||||
transition: none;
|
||||
@ -659,6 +673,11 @@
|
||||
font-size: var(--link-item-display-icon-size);
|
||||
}
|
||||
|
||||
.is-link-style-block .link-display-image,
|
||||
.is-link-style-list .link-display-image {
|
||||
font-size: var(--link-item-display-image-size);
|
||||
}
|
||||
|
||||
.link-item:hover .link-display-letter,
|
||||
.link-item:focus .link-display-letter,
|
||||
.link-item:hover .link-display-icon,
|
||||
@ -1027,3 +1046,27 @@
|
||||
.link-form-icon {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.link-form-collapse {
|
||||
margin-left: -1em;
|
||||
margin-right: -1em;
|
||||
margin-bottom: -1em;
|
||||
padding-right: 1em;
|
||||
padding-left: 1em;
|
||||
padding-bottom: 1em;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
.link-form-collapse.active {
|
||||
height: var(--link-form-collapse-height);
|
||||
}
|
||||
|
||||
.link-form-collapse-button-icon {
|
||||
transition: transform var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
.link-form-collapse-button.active .link-form-collapse-button-icon {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: rgb(var(--theme-color-12));
|
||||
color: rgb(var(--utilities-muted));
|
||||
}
|
||||
|
||||
.scroll-disabled {
|
||||
|
||||
@ -109,13 +109,14 @@
|
||||
--group-border: 0;
|
||||
/* link */
|
||||
--link-area-width: 100%;
|
||||
--link-item-color-theme: var(--theme-color-02);
|
||||
--link-item-color-custom: rgb(0, 0, 0);
|
||||
--link-item-color: var(--theme-color-02);
|
||||
--link-item-color-focus-hover: var(--theme-color-03);
|
||||
--link-item-size: 1em;
|
||||
--link-item-display-space: 0.25em;
|
||||
--link-item-display-gutter: 2;
|
||||
--link-item-display-letter-size: 2em;
|
||||
--link-item-display-icon-size: 2.5em;
|
||||
--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;
|
||||
@ -235,6 +236,12 @@
|
||||
--form-ring-accent: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)),
|
||||
0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
|
||||
--form-wrap-space: 1em;
|
||||
/* utilities */
|
||||
--utilities-muted: var(--theme-color-12);
|
||||
--utilities-muted-hover: var(--theme-color-13);
|
||||
--utilities-muted-focus-active: var(--theme-color-14);
|
||||
--utilities-muted-checked: var(--theme-color-14);
|
||||
--utilities-muted-disabled: var(--theme-color-04);
|
||||
/* menu */
|
||||
--menu-space: 0.75em;
|
||||
--menu-edge-opacity: 0.75;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div id="menu-content-background" class="menu-content menu-content-overscroll menu-content-background is-hidden">
|
||||
<div id="menu-content-background" class="menu-content menu-content-overscroll menu-content-background">
|
||||
|
||||
@@include("./background/color.html")
|
||||
|
||||
|
||||
@ -5,29 +5,81 @@
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-background-color-by-theme" class="control-background-color-by-theme" type="radio" name="control-background-color-by" value="theme" tabindex="-1">
|
||||
<label for="control-background-color-by-theme"><span class="label-icon"></span> Theme colour</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-background-color-by-theme-helper form-helper-item">Use the Background colour defined by the Theme.</p>
|
||||
<label for="control-background-color-by-theme">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">Theme colour</span>
|
||||
<span class="label-block-item small muted">Use the Background colour defined by the Theme.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-background-color-by-custom" class="control-background-color-by-custom" type="radio" name="control-background-color-by" value="custom" tabindex="-1">
|
||||
<label for="control-background-color-by-custom"><span class="label-icon"></span> Custom colour</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-background-color-by-custom-helper form-helper-item">Use a custom Background colour.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-background-color-by-custom-helper form-helper-item">Take care as some colours may make the Clock, Date and other text unreadable.</p>
|
||||
<label for="control-background-color-by-custom">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">Custom colour</span>
|
||||
<span class="label-block-item small muted">Override the Theme colour.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-background-color-rgb-range" class="form-group-item-half control-background-color-rgb-range" type="color" value="#000000" tabindex="1">
|
||||
<input id="control-background-color-rgb-color" class="form-group-item-half control-background-color-rgb-color" type="color" value="#000000" tabindex="1">
|
||||
<input id="control-background-color-rgb-text" class="form-group-item-half control-background-color-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-background-color-by-custom-helper form-helper-item">Take care as some colours may make the Clock, Date and other text unreadable.</p>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-background-color-hsl-h-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Hue</label>
|
||||
<input id="control-background-color-hsl-h-range" class="control-background-color-hsl-h-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-background-color-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-background-color-hsl-s-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Saturation</label>
|
||||
<input id="control-background-color-hsl-s-range" class="control-background-color-hsl-s-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-background-color-hsl-s-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-background-color-hsl-l-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Lightness</label>
|
||||
<input id="control-background-color-hsl-l-range" class="control-background-color-hsl-l-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-background-color-hsl-l-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-background-color-rgb-r-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Red</label>
|
||||
<input id="control-background-color-rgb-r-range" class="control-background-color-rgb-r-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-background-color-rgb-r-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-background-color-rgb-g-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Green</label>
|
||||
<input id="control-background-color-rgb-g-range" class="control-background-color-rgb-g-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-background-color-rgb-g-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-background-color-rgb-b-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Blue</label>
|
||||
<input id="control-background-color-rgb-b-range" class="control-background-color-rgb-b-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-background-color-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div id="menu-content-bookmarks" class="menu-content menu-content-overscroll menu-content-bookmarks is-hidden">
|
||||
<div id="menu-content-bookmarks" class="menu-content menu-content-overscroll menu-content-bookmarks">
|
||||
|
||||
@@include("./bookmarks/area.html")
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
@@include("./bookmarks/content.html")
|
||||
|
||||
@@include("./bookmarks/letcon.html")
|
||||
@@include("./bookmarks/visual.html")
|
||||
|
||||
@@include("./bookmarks/name.html")
|
||||
|
||||
@ -16,12 +16,14 @@
|
||||
|
||||
@@include("./bookmarks/color.html")
|
||||
|
||||
@@include("./bookmarks/accent.html")
|
||||
|
||||
@@include("./bookmarks/opacity.html")
|
||||
|
||||
@@include("./bookmarks/border.html")
|
||||
|
||||
@@include("./bookmarks/orientation.html")
|
||||
|
||||
@@include("./bookmarks/sort.html")
|
||||
|
||||
@@include("./bookmarks/accent.html")
|
||||
|
||||
</div>
|
||||
|
||||
@ -4,14 +4,75 @@
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<button class="control-link-accent-clear button button-line" tabindex="-1">Remove all override colours</button>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-accent-rgb-color" class="form-group-item-half control-link-item-accent-rgb-color" type="color" value="#000000" tabindex="1">
|
||||
<input id="control-link-item-accent-rgb-text" class="form-group-item-half control-link-item-accent-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-color-helper form-helper-item">Apply an Accent override to all Bookmarks.</p>
|
||||
<p class="control-link-item-color-helper form-helper-item">Accent overrides can also be changed by editing individual Bookmarks.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-link-item-accent-hsl-h-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Hue</label>
|
||||
<input id="control-link-item-accent-hsl-h-range" class="control-link-item-accent-hsl-h-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-accent-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-link-item-accent-hsl-s-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Saturation</label>
|
||||
<input id="control-link-item-accent-hsl-s-range" class="control-link-item-accent-hsl-s-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-accent-hsl-s-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-link-item-accent-hsl-l-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Lightness</label>
|
||||
<input id="control-link-item-accent-hsl-l-range" class="control-link-item-accent-hsl-l-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-accent-hsl-l-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-link-item-accent-rgb-r-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Red</label>
|
||||
<input id="control-link-item-accent-rgb-r-range" class="control-link-item-accent-rgb-r-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-accent-rgb-r-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-link-item-accent-rgb-g-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Green</label>
|
||||
<input id="control-link-item-accent-rgb-g-range" class="control-link-item-accent-rgb-g-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-accent-rgb-g-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-link-item-accent-rgb-b-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Blue</label>
|
||||
<input id="control-link-item-accent-rgb-b-range" class="control-link-item-accent-rgb-b-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-accent-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<button class="control-link-accent-set button button-line" tabindex="-1">Add override colours</button>
|
||||
<div class="form-inline">
|
||||
<button class="control-link-item-accent-apply button button-line" tabindex="-1">Apply to all</button>
|
||||
<button class="control-link-item-accent-clear button button-line" tabindex="-1">Clear all</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-accent-set-helper form-helper-item">Adds a unique override colour to each Bookmark.</p>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,42 +1,78 @@
|
||||
<div id="menu-content-bookmarks-color" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Colour</h1>
|
||||
<h1 class="menu-item-header-text">Colour override</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-color-by-theme" class="control-link-item-color-by-theme" type="radio" name="control-link-item-color-by" value="theme" tabindex="-1">
|
||||
<label for="control-link-item-color-by-theme"><span class="label-icon"></span> Theme colour</label>
|
||||
<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>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-color-by-theme-helper form-helper-item">Use the colour defined by the Theme.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-color-by-custom" class="control-link-item-color-by-custom" type="radio" name="control-link-item-color-by" value="custom" tabindex="-1">
|
||||
<label for="control-link-item-color-by-custom"><span class="label-icon"></span> Custom colour</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-color-by-custom-helper form-helper-item">Use a custom colour.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-color-by-custom-helper form-helper-item">Take care as some colours may make the Letter/Icon and Name unreadable.</p>
|
||||
<p class="control-link-item-color-helper form-helper-item">Apply a colour override to all Bookmarks.</p>
|
||||
<p class="control-link-item-color-helper form-helper-item">Take care as some colours may make the Letter/Icon and Name unreadable.</p>
|
||||
<p class="control-link-item-color-helper form-helper-item">Colour overrides can also be changed by editing individual Bookmarks.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-color-rgb-range" class="form-group-item-half control-link-item-color-rgb-range" type="color" value="#000000" tabindex="1">
|
||||
<input id="control-link-item-color-rgb-text" class="form-group-item-half control-link-item-color-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
||||
<label for="control-link-item-color-hsl-h-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Hue</label>
|
||||
<input id="control-link-item-color-hsl-h-range" class="control-link-item-color-hsl-h-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-color-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-link-item-color-hsl-s-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Saturation</label>
|
||||
<input id="control-link-item-color-hsl-s-range" class="control-link-item-color-hsl-s-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-color-hsl-s-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-link-item-color-hsl-l-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Lightness</label>
|
||||
<input id="control-link-item-color-hsl-l-range" class="control-link-item-color-hsl-l-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-color-hsl-l-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-link-item-color-rgb-r-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Red</label>
|
||||
<input id="control-link-item-color-rgb-r-range" class="control-link-item-color-rgb-r-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-color-rgb-r-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-link-item-color-rgb-g-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Green</label>
|
||||
<input id="control-link-item-color-rgb-g-range" class="control-link-item-color-rgb-g-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-color-rgb-g-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-link-item-color-rgb-b-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Blue</label>
|
||||
<input id="control-link-item-color-rgb-b-range" class="control-link-item-color-rgb-b-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-color-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-opacity-range">Opacity</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-opacity-range" class="control-link-item-opacity-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-opacity-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
<div 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-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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label class="control-link-item-display-alignment-label">Letter/Icon and Name position</label>
|
||||
<label class="control-link-item-display-alignment-label">Letter/Icon/Image and Name position</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-grid form-grid-3x3 control-link-item-display-alignment-grid">
|
||||
@ -85,32 +85,50 @@
|
||||
<hr>
|
||||
<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">
|
||||
<label for="control-link-item-display-direction-horizontal"><span class="label-icon"></span> Align horizontally</label>
|
||||
<label for="control-link-item-display-direction-horizontal">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">Align horizontally</span>
|
||||
<span class="label-block-item small muted">Works well with Bookmark Block Style.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div 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> Align vertically</label>
|
||||
<label for="control-link-item-display-direction-vertical">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">Align vertically</span>
|
||||
<span class="label-block-item small muted">Works well with Bookmark List Style.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-display-direction-vertical-helper form-helper-item">Vertical alignment works well with Bookmark Block Style.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-display-direction-horizontal-helper form-helper-item">Horizontal alignment works well with Bookmark List Style.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-display-direction-helper form-helper-item">Only available when Letter/Icon and Name are shown.</p>
|
||||
<p class="control-link-item-display-direction-helper form-helper-item">Only available when Letter/Icon/Image and Name are shown.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-order-letconname" class="control-link-item-display-order-letconname" type="radio" name="control-link-item-display-order" value="letconname" tabindex="-1">
|
||||
<label for="control-link-item-display-order-letconname"><span class="label-icon"></span> Order Letter/Icon then Name</label>
|
||||
<input id="control-link-item-display-order-visualname" class="control-link-item-display-order-visualname" type="radio" name="control-link-item-display-order" value="visualname" tabindex="-1">
|
||||
<label for="control-link-item-display-order-visualname">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">Letter/Icon/Image then Name</span>
|
||||
<span class="label-block-item small muted">Stack the Letter/Icon/Image before the Name.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-order-nameletcon" class="control-link-item-display-order-nameletcon" type="radio" name="control-link-item-display-order" value="nameletcon" tabindex="-1">
|
||||
<label for="control-link-item-display-order-nameletcon"><span class="label-icon"></span> Order Name then Letter/Icon</label>
|
||||
<input id="control-link-item-display-order-namevisual" class="control-link-item-display-order-namevisual" type="radio" name="control-link-item-display-order" value="namevisual" tabindex="-1">
|
||||
<label for="control-link-item-display-order-namevisual">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">Name then Letter/Icon/Image</span>
|
||||
<span class="label-block-item small muted">Stack the Name before the Letter/Icon/Image.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-display-order-helper form-helper-item">Only available when Letter/Icon and Name are shown.</p>
|
||||
<p class="control-link-item-display-order-helper form-helper-item">Only available when Letter/Icon/Image and Name are shown.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,32 +0,0 @@
|
||||
<div id="menu-content-bookmarks-letcon" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Letter/Icon</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-letcon-show" class="control-link-item-display-letcon-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-link-item-display-letcon-show"><span class="label-icon"></span> Show</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-letcon-letter-size-range">Letter size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-letcon-letter-size-range" class="control-link-item-display-letcon-letter-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-display-letcon-letter-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-letcon-letter-size-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-letcon-icon-size-range">Icon size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-letcon-icon-size-range" class="control-link-item-display-letcon-icon-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-display-letcon-icon-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-letcon-icon-size-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
18
src/html/menu/content/bookmarks/opacity.html
Normal file
18
src/html/menu/content/bookmarks/opacity.html
Normal file
@ -0,0 +1,18 @@
|
||||
<div id="menu-content-bookmarks-opacity" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Opacity</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-opacity-range">Color or background image</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-opacity-range" class="control-link-item-opacity-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-opacity-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-opacity-helper form-helper-item">Change the Colour or Background image Opacity of all Bookmark tiles.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -5,17 +5,23 @@
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-style-block" class="control-link-style-block" type="radio" name="control-link-style" value="block" tabindex="-1">
|
||||
<label for="control-link-style-block"><span class="label-icon"></span> Block</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-style-block-helper form-helper-item">Bookmark tiles more square shaped.</p>
|
||||
<label for="control-link-style-block">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">Block</span>
|
||||
<span class="label-block-item small muted">Bookmark tiles more square shaped.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-style-list" class="control-link-style-list" type="radio" name="control-link-style" value="list" tabindex="-1">
|
||||
<label for="control-link-style-list"><span class="label-icon"></span> List</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-style-list-helper form-helper-item">Bookmark tiles more short and wide.</p>
|
||||
<label for="control-link-style-list">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">List</span>
|
||||
<span class="label-block-item small muted">Bookmark tiles more short and wide.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
41
src/html/menu/content/bookmarks/visual.html
Normal file
41
src/html/menu/content/bookmarks/visual.html
Normal file
@ -0,0 +1,41 @@
|
||||
<div id="menu-content-bookmarks-visual" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Letter/Icon/Image</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-visual-show" class="control-link-item-display-visual-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-link-item-display-visual-show"><span class="label-icon"></span> Show</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-visual-letter-size-range">Letter size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-visual-letter-size-range" class="control-link-item-display-visual-letter-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-display-visual-letter-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-visual-letter-size-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-visual-icon-size-range">Icon size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-visual-icon-size-range" class="control-link-item-display-visual-icon-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-display-visual-icon-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-visual-icon-size-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-visual-image-size-range">Image size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-visual-image-size-range" class="control-link-item-display-visual-image-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-display-visual-image-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-visual-image-size-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,4 +1,4 @@
|
||||
<div id="menu-content-coffee" class="menu-content menu-content-coffee is-hidden">
|
||||
<div id="menu-content-coffee" class="menu-content menu-content-coffee">
|
||||
|
||||
@@include("./coffee/coffee.html")
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div id="menu-content-data" class="menu-content menu-content-overscroll menu-content-data is-hidden">
|
||||
<div id="menu-content-data" class="menu-content menu-content-overscroll menu-content-data">
|
||||
|
||||
@@include("./data/restore.html")
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<div id="menu-content-groups" class="menu-content menu-content-overscroll menu-content-groups is-hidden">
|
||||
<div id="menu-content-groups" class="menu-content menu-content-overscroll menu-content-groups">
|
||||
|
||||
@@include("./groups/area.html")
|
||||
|
||||
|
||||
@@include("./groups/order.html")
|
||||
|
||||
@@include("./groups/names.html")
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-group-name-helper form-helper-item">Individual Group Names can be shown or hidden from their respective edit controls.</p>
|
||||
<p class="control-group-name-helper form-helper-item">Group Names can also be changed by editing individual Groups.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-group-openall-helper form-helper-item">Individual Group Open all buttons can be shown or hidden from their respective edit controls.</p>
|
||||
<p class="control-group-openall-helper form-helper-item">Group Open all buttons can also be changed by editing individual Groups.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
|
||||
@ -5,11 +5,23 @@
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-group-order-headerbody" class="control-group-order-headerbody" type="radio" name="control-group-order" value="headerbody" tabindex="1">
|
||||
<label for="control-group-order-headerbody"><span class="label-icon"></span> Group Name then Bookmarks</label>
|
||||
<label for="control-group-order-headerbody">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">Group Name then Bookmarks</span>
|
||||
<span class="label-block-item small muted">Stack the Group name and controls area before the Bookmarks area.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-group-order-bodyheader" class="control-group-order-bodyheader" type="radio" name="control-group-order" value="bodyheader" tabindex="1">
|
||||
<label for="control-group-order-bodyheader"><span class="label-icon"></span> Bookmarks then Group Name</label>
|
||||
<label for="control-group-order-bodyheader">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">Bookmarks then Group Name</span>
|
||||
<span class="label-block-item small muted">Stack the Bookmarks area before the Group name and controls area.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div id="menu-content-header" class="menu-content menu-content-overscroll menu-content-header is-hidden">
|
||||
<div id="menu-content-header" class="menu-content menu-content-overscroll menu-content-header">
|
||||
|
||||
@@include("./header/area.html")
|
||||
|
||||
|
||||
@ -38,17 +38,21 @@
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-area-align-center" class="control-header-area-align-center" type="radio" name="control-header-area-align" value="center" tabindex="-1">
|
||||
<label for="control-header-area-align-center"><span class="label-icon"></span> Center</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-area-align-center-helper form-helper-item">Header items aligned to each others centres.</p>
|
||||
<label for="control-header-area-align-center"><span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">Center</span>
|
||||
<span class="label-block-item small muted">Header items aligned to each others centres.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-area-align-baseline" class="control-header-area-align-baseline" type="radio" name="control-header-area-align" value="baseline" tabindex="-1">
|
||||
<label for="control-header-area-align-baseline"><span class="label-icon"></span> Baseline</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-area-align-baseline-helper form-helper-item">Header items aligned to the text baseline. Useful for when the Clock, Date and other text is sized large and need to sit on a line.</p>
|
||||
<label for="control-header-area-align-baseline"><span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">Baseline</span>
|
||||
<span class="label-block-item small muted">Header items aligned to the text baseline. Useful for when the Clock, Date and other text is sized large and need to sit on a line.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -89,10 +89,13 @@
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-newline" class="control-header-clock-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-clock-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-clock-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
<label for="control-header-clock-newline">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">New line</span>
|
||||
<span class="label-block-item small muted">Force on to a new line and seperate from other Header items.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -11,44 +11,111 @@
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-color-style-always" class="control-header-color-style-always" type="radio" name="control-header-color-style" value="always" tabindex="-1">
|
||||
<label for="control-header-color-style-always"><span class="label-icon"></span> Always visible</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-color-style-always-helper form-helper-item">Useful for when a Background Image is shown.</p>
|
||||
<label for="control-header-color-style-always">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">Always visible</span>
|
||||
<span class="label-block-item small muted">Useful for when a Background Image is shown.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-color-style-scroll" class="control-header-color-style-scroll" type="radio" name="control-header-color-style" value="scroll" tabindex="-1">
|
||||
<label for="control-header-color-style-scroll"><span class="label-icon"></span> Visible on scroll</label>
|
||||
<label for="control-header-color-style-scroll">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">Visible on scroll</span>
|
||||
<span class="label-block-item small muted">Useful for when Position is set to Sticky.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-color-style-scroll-helper form-helper-item">The page may not scroll if Bookmarks are not shown.</p>
|
||||
<p class="control-header-color-style-helper form-helper-item">The page may not scroll if Bookmarks are not shown.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-color-style-scroll-helper form-helper-item">May not be visible if Layout Alignment is Horizontal as the Bookmarks won't pass under the header.</p>
|
||||
<p class="control-header-color-style-helper form-helper-item">May not be visible if Layout Alignment is Horizontal as the Bookmarks won't pass under the header.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-color-by-theme" class="control-header-color-by-theme" type="radio" name="control-header-color-by" value="theme" tabindex="-1">
|
||||
<label for="control-header-color-by-theme"><span class="label-icon"></span> Theme colour</label>
|
||||
<label for="control-header-color-by-theme">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">Theme colour</span>
|
||||
<span class="label-block-item small muted">Use the Background colour defined by the Theme.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-color-by-theme-helper form-helper-item">Use the Background colour defined by the Theme.</p>
|
||||
<p class="control-header-color-by-theme-helper form-helper-item"></p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-color-by-custom" class="control-header-color-by-custom" type="radio" name="control-header-color-by" value="custom" tabindex="-1">
|
||||
<label for="control-header-color-by-custom"><span class="label-icon"></span> Custom colour</label>
|
||||
<label for="control-header-color-by-custom">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">Custom colour</span>
|
||||
<span class="label-block-item small muted">Override the Theme colour.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-color-by-custom-helper form-helper-item">Use a custom Background colour.</p>
|
||||
<p class="control-header-color-by-custom-helper form-helper-item"></p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-color-rgb-range" class="form-group-item-half control-header-color-rgb-range" type="color" value="#000000" tabindex="1">
|
||||
<input id="control-header-color-rgb-color" class="form-group-item-half control-header-color-rgb-color" type="color" value="#000000" tabindex="1">
|
||||
<input id="control-header-color-rgb-text" class="form-group-item-half control-header-color-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-header-color-hsl-h-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Hue</label>
|
||||
<input id="control-header-color-hsl-h-range" class="control-header-color-hsl-h-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-color-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-header-color-hsl-s-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Saturation</label>
|
||||
<input id="control-header-color-hsl-s-range" class="control-header-color-hsl-s-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-color-hsl-s-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-header-color-hsl-l-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Lightness</label>
|
||||
<input id="control-header-color-hsl-l-range" class="control-header-color-hsl-l-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-color-hsl-l-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-header-color-rgb-r-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Red</label>
|
||||
<input id="control-header-color-rgb-r-range" class="control-header-color-rgb-r-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-color-rgb-r-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-header-color-rgb-g-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Green</label>
|
||||
<input id="control-header-color-rgb-g-range" class="control-header-color-rgb-g-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-color-rgb-g-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-header-color-rgb-b-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Blue</label>
|
||||
<input id="control-header-color-rgb-b-range" class="control-header-color-rgb-b-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-color-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<label for="control-header-coloraccent-show"><span class="label-icon"></span> Show</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-coloraccent-show-helper form-helper-item">Colour and Accent can also be found under Theme.</p>
|
||||
<p class="control-header-coloraccent-show-helper form-helper-item">Colour and Accent controls can also be found under Theme.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
@ -37,10 +37,13 @@
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-coloraccent-newline" class="control-header-coloraccent-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-coloraccent-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-coloraccent-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
<label for="control-header-coloraccent-newline">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">New line</span>
|
||||
<span class="label-block-item small muted">Force on to a new line and seperate from other Header items.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -69,10 +69,13 @@
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-date-ordinal" class="control-header-date-date-ordinal" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-date-date-ordinal"><span class="label-icon"></span> Ordinal numbers</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-date-date-ordinal-helper form-helper-item">Display Date as 1st, 2nd, 3rd, 4th etc.</p>
|
||||
<label for="control-header-date-date-ordinal">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">Ordinal numbers</span>
|
||||
<span class="label-block-item small muted">Display Date as 1st, 2nd, 3rd, 4th etc.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -91,10 +94,13 @@
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-month-ordinal" class="control-header-date-month-ordinal" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-date-month-ordinal"><span class="label-icon"></span> Ordinal numbers</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-date-month-ordinal-helper form-helper-item">Display Month as 1st, 2nd, 3rd, 4th etc.</p>
|
||||
<label for="control-header-date-month-ordinal">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">Ordinal numbers</span>
|
||||
<span class="label-block-item small muted">Display Month as 1st, 2nd, 3rd, 4th etc.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -175,10 +181,13 @@
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-newline" class="control-header-date-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-date-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-date-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
<label for="control-header-date-newline">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">New line</span>
|
||||
<span class="label-block-item small muted">Force on to a new line and seperate from other Header items.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -29,10 +29,13 @@
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-editadd-newline" class="control-header-editadd-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-editadd-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-editadd-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
<label for="control-header-editadd-newline">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">New line</span>
|
||||
<span class="label-block-item small muted">Force on to a new line and seperate from other Header items.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -41,10 +41,13 @@
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-greeting-newline" class="control-header-greeting-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-greeting-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-greeting-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
<label for="control-header-greeting-newline">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">New line</span>
|
||||
<span class="label-block-item small muted">Force on to a new line and seperate from other Header items.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -23,10 +23,13 @@
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-menu-newline" class="control-header-menu-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-menu-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-menu-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
<label for="control-header-menu-newline">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">New line</span>
|
||||
<span class="label-block-item small muted">Force on to a new line and seperate from other Header items.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,17 +5,23 @@
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-position-sticky" class="control-header-position-sticky" type="radio" name="control-header-position" value="sticky" tabindex="-1">
|
||||
<label for="control-header-position-sticky"><span class="label-icon"></span> Sticky</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-position-sticky-helper form-helper-item">Header sticks to the page when scrolling up or down.</p>
|
||||
<label for="control-header-position-sticky">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">Sticky</span>
|
||||
<span class="label-block-item small muted">Header sticks to the page when scrolling up or down.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-position-inline" class="control-header-position-inline" type="radio" name="control-header-position" value="inline" tabindex="-1">
|
||||
<label for="control-header-position-inline"><span class="label-icon"></span> Inline</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-position-inline-helper form-helper-item">Header moves inline with the content when scrolling up or down.</p>
|
||||
<label for="control-header-position-inline">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">Inline</span>
|
||||
<span class="label-block-item small muted">Header moves inline with the content when scrolling up or down.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-position-helper form-helper-item">Only available when Layout Alignment is Vertical.</p>
|
||||
|
||||
@ -14,17 +14,23 @@
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-width-by-auto" class="control-header-search-width-by-auto" type="radio" name="control-header-search-width" value="auto" tabindex="-1">
|
||||
<label for="control-header-search-width-by-auto"><span class="label-icon"></span> Auto</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-search-width-by-auto-helper form-helper-item">Search box will grow to best fit available space.</p>
|
||||
<label for="control-header-search-width-by-auto">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">Auto</span>
|
||||
<span class="label-block-item small muted">Search box will grow to best fit available space.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-width-by-custom" class="control-header-search-width-by-custom" type="radio" name="control-header-search-width" value="custom" tabindex="-1">
|
||||
<label for="control-header-search-width-by-custom"><span class="label-icon"></span> Custom</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-search-width-by-custom-helper form-helper-item">Define how wide the Search box should be inside the Header Area.</p>
|
||||
<label for="control-header-search-width-by-custom">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">Custom</span>
|
||||
<span class="label-block-item small muted">Define how wide the Search box should be inside the Header Area.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
@ -138,10 +144,13 @@
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-newline" class="control-header-search-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-search-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-search-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
<label for="control-header-search-newline">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">New line</span>
|
||||
<span class="label-block-item small muted">Force on to a new line and seperate from other Header items.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -35,10 +35,13 @@
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-transitional-newline" class="control-header-transitional-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-transitional-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-transitional-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
<label for="control-header-transitional-newline">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">New line</span>
|
||||
<span class="label-block-item small muted">Force on to a new line and seperate from other Header items.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -52,26 +52,44 @@
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-direction-horizontal" class="control-layout-direction-horizontal" type="radio" name="control-layout-direction" value="horizontal" tabindex="-1">
|
||||
<label for="control-layout-direction-horizontal"><span class="label-icon"></span>Align horizontal</label>
|
||||
<label for="control-layout-direction-horizontal">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">Align horizontal</span>
|
||||
<span class="label-block-item small muted">Stack the Header and Bookmarks in a row side by side.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-direction-vertical" class="control-layout-direction-vertical" type="radio" name="control-layout-direction" value="vertical" tabindex="-1">
|
||||
<label for="control-layout-direction-vertical"><span class="label-icon"></span>Align vertical</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-layout-direction-vertical-helper form-helper-item">Horizontal alignment stack the Header and Bookmarks in a row side by side.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-layout-direction-horizontal-helper form-helper-item">Vertical alignment stacks the Header and Bookmarks in a column one above the other.</p>
|
||||
<label for="control-layout-direction-vertical">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">Align vertical</span>
|
||||
<span class="label-block-item small muted">Stack the Header and Bookmarks in a column one above the other.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-order-headerlink" class="control-layout-order-headerlink" type="radio" name="control-layout-order" value="headerlink" tabindex="-1">
|
||||
<label for="control-layout-order-headerlink"><span class="label-icon"></span> Header then Bookmarks</label>
|
||||
<label for="control-layout-order-headerlink">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">Header then Bookmarks</span>
|
||||
<span class="label-block-item small muted">Order the Header area to appear before the Bookmarks area.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-order-linkheader" class="control-layout-order-linkheader" type="radio" name="control-layout-order" value="linkheader" tabindex="-1">
|
||||
<label for="control-layout-order-linkheader"><span class="label-icon"></span> Bookmarks then Header</label>
|
||||
<label for="control-layout-order-linkheader">
|
||||
<span class="label-icon"></span>
|
||||
<span class="label-block">
|
||||
<span class="label-block-item">Bookmarks then Header</span>
|
||||
<span class="label-block-item small muted">Order the Bookmarks area to appear before the Header area.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-layout-order-helper form-helper-item">Only available when Bookmarks are shown.</p>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div id="menu-content-nighttab" class="menu-content menu-content-nighttab is-hidden">
|
||||
<div id="menu-content-nighttab" class="menu-content menu-content-nighttab">
|
||||
|
||||
@@include("./nighttab/nighttab.html")
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div id="menu-content-theme" class="menu-content menu-content-overscroll menu-content-theme is-hidden">
|
||||
<div id="menu-content-theme" class="menu-content menu-content-overscroll menu-content-theme">
|
||||
|
||||
@@include("./theme/preset.html")
|
||||
|
||||
|
||||
@ -20,44 +20,44 @@
|
||||
<div class="form-indent">
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-accent-hsl-h-range">Hue</label>
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-theme-accent-hsl-h-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Hue</label>
|
||||
<input id="control-theme-accent-hsl-h-range" class="control-theme-accent-hsl-h-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-accent-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-accent-hsl-s-range">Saturation</label>
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-theme-accent-hsl-s-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Saturation</label>
|
||||
<input id="control-theme-accent-hsl-s-range" class="control-theme-accent-hsl-s-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-accent-hsl-s-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-accent-hsl-l-range">Lightness</label>
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-theme-accent-hsl-l-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Lightness</label>
|
||||
<input id="control-theme-accent-hsl-l-range" class="control-theme-accent-hsl-l-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-accent-hsl-l-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-accent-rgb-r-range">Red</label>
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-theme-accent-rgb-r-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Red</label>
|
||||
<input id="control-theme-accent-rgb-r-range" class="control-theme-accent-rgb-r-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-accent-rgb-r-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-accent-rgb-g-range">Green</label>
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-theme-accent-rgb-g-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Green</label>
|
||||
<input id="control-theme-accent-rgb-g-range" class="control-theme-accent-rgb-g-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-accent-rgb-g-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-accent-rgb-b-range">Blue</label>
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-theme-accent-rgb-b-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Blue</label>
|
||||
<input id="control-theme-accent-rgb-b-range" class="control-theme-accent-rgb-b-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-accent-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
|
||||
@ -91,55 +91,59 @@
|
||||
<button class="control-theme-color-rgb-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<div class="form-helper mb-0">
|
||||
<p class="control-theme-color-helper form-helper-item">Light and dark shades from this colour are used across nightTabs.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-color-hsl-h-range">Hue</label>
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-theme-color-hsl-h-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Hue</label>
|
||||
<input id="control-theme-color-hsl-h-range" class="control-theme-color-hsl-h-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-color-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-color-hsl-s-range">Saturation</label>
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-theme-color-hsl-s-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Saturation</label>
|
||||
<input id="control-theme-color-hsl-s-range" class="control-theme-color-hsl-s-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-color-hsl-s-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-color-hsl-l-range">Lightness</label>
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-theme-color-hsl-l-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Lightness</label>
|
||||
<input id="control-theme-color-hsl-l-range" class="control-theme-color-hsl-l-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-color-hsl-l-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-color-rgb-r-range">Red</label>
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-theme-color-rgb-r-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Red</label>
|
||||
<input id="control-theme-color-rgb-r-range" class="control-theme-color-rgb-r-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-color-rgb-r-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-color-rgb-g-range">Green</label>
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-theme-color-rgb-g-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Green</label>
|
||||
<input id="control-theme-color-rgb-g-range" class="control-theme-color-rgb-g-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-color-rgb-g-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-color-rgb-b-range">Blue</label>
|
||||
<div class="form-group form-group-block">
|
||||
<label for="control-theme-color-rgb-b-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Blue</label>
|
||||
<input id="control-theme-color-rgb-b-range" class="control-theme-color-rgb-b-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-color-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-color-contrast-light-range">Light shade contrast</label>
|
||||
|
||||
@ -36,14 +36,15 @@
|
||||
<a href="#menu-content-bookmarks-alignment" class="menu-nav-sub button button-small" tabindex="-1">Alignment</a>
|
||||
<a href="#menu-content-bookmarks-bookmarks" class="menu-nav-sub button button-small" tabindex="-1">Bookmarks</a>
|
||||
<a href="#menu-content-bookmarks-content" class="menu-nav-sub button button-small" tabindex="-1">Content</a>
|
||||
<a href="#menu-content-bookmarks-letcon" class="menu-nav-sub button button-small" tabindex="-1">Letter/Icon</a>
|
||||
<a href="#menu-content-bookmarks-visual" class="menu-nav-sub button button-small" tabindex="-1">Letter/Icon/Image</a>
|
||||
<a href="#menu-content-bookmarks-name" class="menu-nav-sub button button-small" tabindex="-1">Name</a>
|
||||
<a href="#menu-content-bookmarks-style" class="menu-nav-sub button button-small" tabindex="-1">Style</a>
|
||||
<a href="#menu-content-bookmarks-color" class="menu-nav-sub button button-small" tabindex="-1">Colour</a>
|
||||
<a href="#menu-content-bookmarks-color" class="menu-nav-sub button button-small" tabindex="-1">Colour override</a>
|
||||
<a href="#menu-content-bookmarks-accent" class="menu-nav-sub button button-small" tabindex="-1">Accent override</a>
|
||||
<a href="#menu-content-bookmarks-opacity" class="menu-nav-sub button button-small" tabindex="-1">Opacity</a>
|
||||
<a href="#menu-content-bookmarks-border" class="menu-nav-sub button button-small" tabindex="-1">Border</a>
|
||||
<a href="#menu-content-bookmarks-orientation" class="menu-nav-sub button button-small" tabindex="-1">Orientation</a>
|
||||
<a href="#menu-content-bookmarks-sort" class="menu-nav-sub button button-small" tabindex="-1">Sort</a>
|
||||
<a href="#menu-content-bookmarks-accent" class="menu-nav-sub button button-small" tabindex="-1">Accent override</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-nav-item">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" style="background-color: rgb(25, 25, 25)">
|
||||
<html lang="en" style="background-color: rgb(0, 0, 0)">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
@ -42,6 +42,33 @@ var background = (function() {
|
||||
}
|
||||
};
|
||||
|
||||
mod.color = {
|
||||
hsl: function() {
|
||||
var hsl = helper.convertColor.rgb.hsl(state.get.current().background.color.rgb);
|
||||
helper.setObject({
|
||||
object: state.get.current(),
|
||||
path: "background.color.hsl",
|
||||
newValue: {
|
||||
h: Math.round(hsl.h),
|
||||
s: Math.round(hsl.s),
|
||||
l: Math.round(hsl.l)
|
||||
}
|
||||
});
|
||||
},
|
||||
rgb: function() {
|
||||
var rgb = helper.convertColor.hsl.rgb(state.get.current().background.color.hsl);
|
||||
helper.setObject({
|
||||
object: state.get.current(),
|
||||
path: "background.color.rgb",
|
||||
newValue: {
|
||||
r: Math.round(rgb.r),
|
||||
g: Math.round(rgb.g),
|
||||
b: Math.round(rgb.b)
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var bind = {};
|
||||
|
||||
bind.feedback = {
|
||||
|
||||
@ -11,165 +11,255 @@ var bookmarks = (function() {
|
||||
show: true
|
||||
},
|
||||
items: [{
|
||||
display: "icon",
|
||||
letter: "AS",
|
||||
icon: {
|
||||
name: "dice-d20",
|
||||
prefix: "fas",
|
||||
label: "Dice D20"
|
||||
visual:{
|
||||
display: "icon",
|
||||
letter: "AS",
|
||||
image: null,
|
||||
icon: {
|
||||
name: "dice-d20",
|
||||
prefix: "fas",
|
||||
label: "Dice D20"
|
||||
}
|
||||
},
|
||||
name: "awesomeSheet",
|
||||
url: "https://zombiefox.github.io/awesomeSheet/",
|
||||
accent: {
|
||||
override: false,
|
||||
color: {
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
by: "theme",
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
},
|
||||
color: {
|
||||
by: "theme",
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
},
|
||||
image: "",
|
||||
searchMatch: false,
|
||||
timeStamp: 1546453104010
|
||||
}, {
|
||||
display: "letter",
|
||||
letter: "AZ",
|
||||
icon: {
|
||||
name: "amazon",
|
||||
prefix: "fab",
|
||||
label: "Amazon"
|
||||
visual:{
|
||||
display: "letter",
|
||||
letter: "AZ",
|
||||
image: null,
|
||||
icon: {
|
||||
name: "amazon",
|
||||
prefix: "fab",
|
||||
label: "Amazon"
|
||||
}
|
||||
},
|
||||
name: "Amazon",
|
||||
url: "https://www.amazon.co.uk/",
|
||||
accent: {
|
||||
override: false,
|
||||
color: {
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
by: "theme",
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
},
|
||||
color: {
|
||||
by: "theme",
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
},
|
||||
image: "",
|
||||
searchMatch: false,
|
||||
timeStamp: 1546453107633
|
||||
}, {
|
||||
display: "letter",
|
||||
letter: "GM",
|
||||
icon: {
|
||||
name: "envelope",
|
||||
prefix: "fas",
|
||||
label: "Envelope"
|
||||
visual:{
|
||||
display: "letter",
|
||||
letter: "GM",
|
||||
image: null,
|
||||
icon: {
|
||||
name: "envelope",
|
||||
prefix: "fas",
|
||||
label: "Envelope"
|
||||
}
|
||||
},
|
||||
name: "Gmail",
|
||||
url: "https://mail.google.com/",
|
||||
accent: {
|
||||
override: false,
|
||||
color: {
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
by: "theme",
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
},
|
||||
color: {
|
||||
by: "theme",
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
},
|
||||
image: "",
|
||||
searchMatch: false,
|
||||
timeStamp: 1546453110265
|
||||
}, {
|
||||
display: "icon",
|
||||
letter: "R",
|
||||
icon: {
|
||||
name: "reddit-alien",
|
||||
prefix: "fab",
|
||||
label: "reddit Alien"
|
||||
visual:{
|
||||
display: "icon",
|
||||
letter: "R",
|
||||
image: null,
|
||||
icon: {
|
||||
name: "reddit-alien",
|
||||
prefix: "fab",
|
||||
label: "reddit Alien"
|
||||
}
|
||||
},
|
||||
name: "Reddit",
|
||||
url: "https://www.reddit.com/",
|
||||
accent: {
|
||||
override: false,
|
||||
color: {
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
by: "theme",
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
},
|
||||
color: {
|
||||
by: "theme",
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
},
|
||||
image: "",
|
||||
searchMatch: false,
|
||||
timeStamp: 1546453111491
|
||||
}, {
|
||||
display: "icon",
|
||||
letter: "N",
|
||||
icon: {
|
||||
name: "film",
|
||||
prefix: "fas",
|
||||
label: "Film"
|
||||
visual:{
|
||||
display: "icon",
|
||||
letter: "N",
|
||||
image: null,
|
||||
icon: {
|
||||
name: "film",
|
||||
prefix: "fas",
|
||||
label: "Film"
|
||||
}
|
||||
},
|
||||
name: "Netflix",
|
||||
url: "https://www.netflix.com/",
|
||||
accent: {
|
||||
override: false,
|
||||
color: {
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
by: "theme",
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
},
|
||||
color: {
|
||||
by: "theme",
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
},
|
||||
image: "",
|
||||
searchMatch: false,
|
||||
timeStamp: 1546453104460
|
||||
}, {
|
||||
display: "letter",
|
||||
letter: "DR",
|
||||
icon: {
|
||||
name: null,
|
||||
prefix: null,
|
||||
label: null
|
||||
visual:{
|
||||
display: "letter",
|
||||
letter: "DR",
|
||||
image: null,
|
||||
icon: {
|
||||
name: null,
|
||||
prefix: null,
|
||||
label: null
|
||||
}
|
||||
},
|
||||
name: "Drive",
|
||||
url: "https://drive.google.com/drive/",
|
||||
accent: {
|
||||
override: false,
|
||||
color: {
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
by: "theme",
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
},
|
||||
color: {
|
||||
by: "theme",
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
},
|
||||
image: "",
|
||||
searchMatch: false,
|
||||
timeStamp: 1546453111953
|
||||
}]
|
||||
@ -182,57 +272,87 @@ var bookmarks = (function() {
|
||||
show: true
|
||||
},
|
||||
items: [{
|
||||
display: "icon",
|
||||
letter: "DEV",
|
||||
icon: {
|
||||
name: "code",
|
||||
prefix: "fas",
|
||||
label: "Code"
|
||||
visual:{
|
||||
display: "icon",
|
||||
letter: "DEV",
|
||||
image: null,
|
||||
icon: {
|
||||
name: "code",
|
||||
prefix: "fas",
|
||||
label: "Code"
|
||||
}
|
||||
},
|
||||
name: "Devdocs",
|
||||
url: "http://devdocs.io/",
|
||||
accent: {
|
||||
override: false,
|
||||
color: {
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
by: "theme",
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
},
|
||||
color: {
|
||||
by: "theme",
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
},
|
||||
image: "",
|
||||
searchMatch: false,
|
||||
timeStamp: 1546453101749
|
||||
}, {
|
||||
display: "icon",
|
||||
letter: "GIT",
|
||||
icon: {
|
||||
name: "github",
|
||||
prefix: "fab",
|
||||
label: "GitHub"
|
||||
visual:{
|
||||
display: "icon",
|
||||
letter: "GIT",
|
||||
image: null,
|
||||
icon: {
|
||||
name: "github",
|
||||
prefix: "fab",
|
||||
label: "GitHub"
|
||||
}
|
||||
},
|
||||
name: "Github",
|
||||
url: "https://github.com/",
|
||||
accent: {
|
||||
override: false,
|
||||
color: {
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
by: "theme",
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
},
|
||||
color: {
|
||||
by: "theme",
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
},
|
||||
image: "",
|
||||
searchMatch: false,
|
||||
timeStamp: 1546453108926
|
||||
}]
|
||||
|
||||
3195
src/js/control.js
3195
src/js/control.js
File diff suppressed because it is too large
Load Diff
@ -10,6 +10,33 @@ var header = (function() {
|
||||
}
|
||||
};
|
||||
|
||||
mod.color = {
|
||||
hsl: function() {
|
||||
var hsl = helper.convertColor.rgb.hsl(state.get.current().header.color.rgb);
|
||||
helper.setObject({
|
||||
object: state.get.current(),
|
||||
path: "header.color.hsl",
|
||||
newValue: {
|
||||
h: Math.round(hsl.h),
|
||||
s: Math.round(hsl.s),
|
||||
l: Math.round(hsl.l)
|
||||
}
|
||||
});
|
||||
},
|
||||
rgb: function() {
|
||||
var rgb = helper.convertColor.hsl.rgb(state.get.current().header.color.hsl);
|
||||
helper.setObject({
|
||||
object: state.get.current(),
|
||||
path: "header.color.rgb",
|
||||
newValue: {
|
||||
r: Math.round(rgb.r),
|
||||
g: Math.round(rgb.g),
|
||||
b: Math.round(rgb.b)
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var bind = {};
|
||||
|
||||
bind.resize = function() {
|
||||
|
||||
1719
src/js/link.js
1719
src/js/link.js
File diff suppressed because it is too large
Load Diff
@ -172,7 +172,7 @@ var menu = (function() {
|
||||
var allMenuNavBody = helper.eA(".menu-subnav");
|
||||
allMenuNavBody.forEach(function(arrayItem, index) {
|
||||
helper.addClass(arrayItem, "active");
|
||||
arrayItem.setAttribute("style", "--menu-subnav-height:" + arrayItem.getBoundingClientRect().height + "px;");
|
||||
arrayItem.setAttribute("style", "--menu-subnav-height: " + arrayItem.getBoundingClientRect().height + "px;");
|
||||
helper.removeClass(arrayItem, "active");
|
||||
});
|
||||
}
|
||||
@ -251,6 +251,7 @@ var menu = (function() {
|
||||
mod.close();
|
||||
render.removeStyle();
|
||||
render.subnav.height();
|
||||
render.nav.active();
|
||||
};
|
||||
|
||||
return {
|
||||
|
||||
@ -152,6 +152,11 @@ var state = (function() {
|
||||
},
|
||||
color: {
|
||||
by: "theme",
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
@ -173,7 +178,23 @@ var state = (function() {
|
||||
},
|
||||
item: {
|
||||
color: {
|
||||
by: "theme",
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
},
|
||||
accent: {
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
@ -181,13 +202,16 @@ var state = (function() {
|
||||
}
|
||||
},
|
||||
display: {
|
||||
letcon: {
|
||||
visual: {
|
||||
show: true,
|
||||
letter: {
|
||||
size: 3
|
||||
},
|
||||
icon: {
|
||||
size: 3
|
||||
},
|
||||
image: {
|
||||
size: 3
|
||||
}
|
||||
},
|
||||
name: {
|
||||
@ -196,7 +220,7 @@ var state = (function() {
|
||||
},
|
||||
gutter: 2,
|
||||
direction: "vertical",
|
||||
order: "letconname",
|
||||
order: "visualname",
|
||||
alignment: "centercenter",
|
||||
rotate: 0,
|
||||
translate: {
|
||||
@ -322,6 +346,11 @@ var state = (function() {
|
||||
background: {
|
||||
color: {
|
||||
by: "theme",
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
@ -415,12 +444,15 @@ var state = (function() {
|
||||
},
|
||||
item: {
|
||||
display: {
|
||||
letcon: {
|
||||
visual: {
|
||||
letter: {
|
||||
size: 3
|
||||
},
|
||||
icon: {
|
||||
size: 3
|
||||
},
|
||||
image: {
|
||||
size: 3
|
||||
}
|
||||
},
|
||||
name: {
|
||||
|
||||
@ -995,6 +995,89 @@ var update = (function() {
|
||||
});
|
||||
});
|
||||
return data;
|
||||
},
|
||||
"5.33.0": function(data) {
|
||||
data.bookmarks.forEach(function(arrayItem, index) {
|
||||
arrayItem.items.forEach(function(arrayItem, index) {
|
||||
arrayItem.visual = {
|
||||
display: arrayItem.display,
|
||||
letter: arrayItem.letter,
|
||||
image: null,
|
||||
icon: arrayItem.icon
|
||||
};
|
||||
delete arrayItem.display;
|
||||
delete arrayItem.letter;
|
||||
delete arrayItem.icon;
|
||||
if (arrayItem.accent.override) {
|
||||
arrayItem.accent.by = "custom";
|
||||
} else {
|
||||
arrayItem.accent.by = "theme";
|
||||
};
|
||||
delete arrayItem.accent.override;
|
||||
arrayItem.accent.hsl = arrayItem.accent.color.hsl;
|
||||
arrayItem.accent.rgb = arrayItem.accent.color.rgb;
|
||||
delete arrayItem.accent.color;
|
||||
arrayItem.color = {
|
||||
by: "theme",
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
};
|
||||
arrayItem.image = "";
|
||||
});
|
||||
});
|
||||
data.state.header.color.hsl = {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
};
|
||||
data.state.link.item.color = {
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
};
|
||||
data.state.link.item.accent = {
|
||||
hsl: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
},
|
||||
rgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
}
|
||||
};
|
||||
data.state.link.item.display.visual = data.state.link.item.display.letcon;
|
||||
delete data.state.link.item.display.letcon;
|
||||
data.state.link.item.display.visual.image = {
|
||||
size: 3
|
||||
};
|
||||
if (data.state.link.item.display.order == "letconname") {
|
||||
data.state.link.item.display.order = "visualname";
|
||||
} else if (data.state.link.item.display.order == "nameletcon") {
|
||||
data.state.link.item.display.order = "namevisual";
|
||||
};
|
||||
data.state.background.color.hsl = {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0
|
||||
};
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
var version = (function() {
|
||||
|
||||
var current = "5.32.0";
|
||||
var current = "5.33.0";
|
||||
|
||||
var name = "Zonked Tarsier";
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"name": "nightTab",
|
||||
"short_name": "nightTab",
|
||||
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
|
||||
"version": "5.32.0",
|
||||
"version": "5.33.0",
|
||||
"manifest_version": 2,
|
||||
"chrome_url_overrides": {
|
||||
"newtab": "index.html"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user