extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-06-26 20:41:21 +02:00
Code Issues Packages Projects Releases Wiki Activity

[feature] Allow colour override for links

Browse Source
This commit is contained in:
Kombie 2019-05-04 13:53:18 +01:00 committed by GitHub
parent e57d0f8335
commit ebcdb3571c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 844 additions and 353 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/base.css
View File

@ -82,6 +82,8 @@
--background-blur: 0;
--layout-width: calc(70vw - var(--layout-width-gutter));
--layout-width-gutter: var(--gutter) * 8;
--menu-border-width: 2px;
--menu-border: var(--menu-border-width) solid rgb(var(--gray-02));
/* breakpoint reference */
/* can not be used in @media as of yet */
--breakpoint-sm: 550px;

439
css/form.css
View File

@ -1,3 +1,4 @@
/* email, number, password, search, tel, text */
input[type="email"],
input[type="number"],
input[type="password"],
@ -87,18 +88,6 @@ input[type="text"][disabled]:focus {
color: rgb(var(--form-input-text-disabled));
}
input[type="checkbox"][disabled]~.input-helper,
input[type="radio"][disabled]~.input-helper,
input[type="email"][disabled]~.input-helper,
input[type="number"][disabled]~.input-helper,
input[type="password"][disabled]~.input-helper,
input[type="search"][disabled]~.input-helper,
input[type="tel"][disabled]~.input-helper,
input[type="text"][disabled]~.input-helper,
input[type="range"][disabled]~.input-helper {
color: rgb(var(--form-input-text-disabled-helper-text));
}
input[type="email"]::placeholder,
input[type="number"]::placeholder,
input[type="password"]::placeholder,
@ -148,77 +137,27 @@ input[type="text"][disabled]:focus::placeholder {
color: rgb(var(--form-input-placeholder-disabled));
}
/* label */
label {
padding: 0.5em 0;
padding: 0;
color: rgb(var(--form-label));
margin-bottom: 0;
font-size: 1em;
display: block;
}
label:not(:only-child):not(:last-child) {
margin-bottom: 0.5em;
}
label[disabled] {
color: rgb(var(--form-label-disabled));
}
input[type="color"] {
opacity: 0;
width: 2px;
height: 2px;
position: absolute;
top: 0;
left: 0;
display: block;
cursor: pointer;
-webkit-appearance: none;
}
input[type="color"]:focus {
outline: none;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: 0;
}
input[type="color"]+.input-label-button {
padding-right: 2.25em;
justify-content: center;
align-items: center;
}
input[type="color"]+.input-label-button:before {
background-color: rgb(var(--accent));
content: "";
border-radius: 50%;
position: absolute;
right: 0.5em;
width: 1em;
height: 1em;
z-index: 1;
box-shadow: 0 0 0.25em 0 rgba(var(--accent), 0.6), 0 0 0.5em 0 rgba(var(--accent), 0.4);
}
.input-wrap,
.checkbox-wrap,
.radio-wrap {
position: relative;
}
.form-indent {
margin-left: 2.25em;
}
.form-inline {
display: inline-block;
margin-right: 1.5em;
}
/* checkbox and radio */
input[type="checkbox"],
input[type="radio"] {
margin-bottom: 0;
position: absolute;
top: 0;
left: 50%;
@ -239,17 +178,17 @@ input[type="radio"]+label {
color: rgb(var(--form-checkbox-radio-label));
font-size: 1em;
font-family: var(--font-regular);
min-height: 2.5em;
cursor: pointer;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
/* transition: all var(--animation-speed-fast) ease-in-out; */
transition: all var(--animation-speed-fast) ease-in-out;
}
input[type="checkbox"]+label .label-icon,
input[type="radio"]+label .label-icon {
input[type="checkbox"]+label:before,
input[type="radio"]+label:before {
content: "";
margin-right: 0.5em;
font-size: 1.5em;
line-height: 1;
@ -272,15 +211,15 @@ input[type="radio"]:active+label {
color: rgb(var(--style-neutral-text));
}
input[type="checkbox"]:focus+label .label-icon,
input[type="checkbox"]:hover+label .label-icon,
input[type="radio"]:focus+label .label-icon,
input[type="radio"]:hover+label .label-icon {
input[type="checkbox"]:focus+label:before,
input[type="checkbox"]:hover+label:before,
input[type="radio"]:focus+label:before,
input[type="radio"]:hover+label:before {
color: rgb(var(--style-neutral-text));
}
input[type="checkbox"]:active+label .label-icon,
input[type="radio"]:active+label .label-icon {
input[type="checkbox"]:active+label:before,
input[type="radio"]:active+label:before {
color: rgb(var(--accent));
transform: scale(0.9);
}
@ -297,76 +236,35 @@ input[type="radio"]:not([disabled]):focus:checked+label {
color: rgb(var(--style-neutral-text));
}
input[type="checkbox"]:checked+label .label-icon,
input[type="radio"]:checked+label .label-icon {
input[type="checkbox"]:checked+label:before,
input[type="radio"]:checked+label:before {
color: rgb(var(--accent));
}
input[type="checkbox"]:checked:focus+label .label-icon,
input[type="radio"]:checked:focus+label .label-icon {
input[type="checkbox"]:checked:focus+label:before,
input[type="radio"]:checked:focus+label:before {
transform: scale(1.2);
}
input[type="color"]+.input-label-button,
input[type="checkbox"]+.input-label-button,
input[type="radio"]+.input-label-button {
justify-content: center;
align-items: center;
position: relative;
}
input[type="color"]:hover+.input-label-button,
input[type="color"]:focus+.input-label-button,
input[type="checkbox"]:hover+.input-label-button,
input[type="checkbox"]:focus+.input-label-button,
input[type="radio"]:hover+.input-label-button,
input[type="radio"]:focus+.input-label-button {
background-color: rgb(var(--gray-03));
border-bottom-color: rgb(var(--gray-08));
color: rgb(var(--style-neutral-text));
outline: none;
}
input[type="color"]:active+.input-label-button,
input[type="checkbox"]:active+.input-label-button,
input[type="radio"]:active+.input-label-button {
border-bottom-color: rgb(var(--accent));
}
input[type="color"]:checked+.input-label-button,
input[type="checkbox"]:checked+.input-label-button,
input[type="radio"]:checked+.input-label-button {
border-bottom-color: rgb(var(--accent));
}
input[type="color"][disabled]+.input-label-button,
input[type="checkbox"][disabled]+.input-label-button,
input[type="radio"][disabled]+.input-label-button {
background-color: rgb(var(--gray-02));
border-color: transparent;
color: rgb(var(--form-checkbox-radio-disabled-label));
cursor: default;
}
input[type="checkbox"][disabled]+label,
input[type="radio"][disabled]+label {
color: rgb(var(--form-checkbox-radio-disabled-label));
cursor: default;
}
input[type="checkbox"][disabled]+label .label-icon,
input[type="radio"][disabled]+label .label-icon {
input[type="checkbox"][disabled]+label:before,
input[type="radio"][disabled]+label:before {
color: rgb(var(--form-checkbox-radio-disabled-label));
cursor: default;
}
input[type="checkbox"][disabled]:active+label .label-icon,
input[type="radio"][disabled]:active+label .label-icon {
input[type="checkbox"][disabled]:active+label:before,
input[type="radio"][disabled]:active+label:before {
transform: none;
}
input[type="checkbox"]+label .label-icon:before,
input[type="radio"]+label .label-icon:before {
input[type="checkbox"]+label:before,
input[type="radio"]+label:before {
font-family: "Icons" !important;
speak: none;
font-style: normal;
@ -375,27 +273,83 @@ input[type="radio"]+label .label-icon:before {
text-transform: none;
}
input[type="checkbox"]+label .label-icon:before {
input[type="checkbox"]+label:before {
content: "\e835";
}
input[type="checkbox"]:checked+label .label-icon:before {
input[type="checkbox"]:checked+label:before {
content: "\e834";
}
input[type="radio"]+label .label-icon:before {
input[type="radio"]+label:before {
content: "\e836";
}
input[type="radio"]:checked+label .label-icon:before {
input[type="radio"]:checked+label:before {
content: "\e837";
}
input[type="range"] {
/* background-color: rgb(var(--gray-08)); */
/* color */
input[type="color"] {
background-color: transparent;
padding: 0;
margin: 0 0 1em 0;
width: 100%;
height: 2.5em;
display: block;
border-width: 0;
border-style: solid;
border-color: transparent;
border-radius: var(--radius);
overflow: hidden;
cursor: pointer;
transition: border-color var(--animation-speed-fast) ease-in-out, box-shadow var(--animation-speed-fast) ease-in-out;
}
input[type="color"]:hover {
outline: none;
box-shadow: 0 0 0 var(--line-width) rgb(var(--gray-06));
}
input[type="color"]:focus {
outline: none;
box-shadow: 0 0 0 var(--line-width) rgb(var(--gray-10));
}
input[type="color"][disabled] {
opacity: 0.5;
}
input[type="color"][disabled]:hover,
input[type="color"][disabled]:focus {
box-shadow: none;
}
input[type="color"]::-webkit-color-swatch-wrapper {
border: 0;
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: 0;
padding: 0;
}
input[type="color"]::-moz-color-swatch-wrapper {
border: 0;
padding: 0;
}
input[type="color"]::-moz-color-swatch {
border: 0;
padding: 0;
}
/* range */
input[type="range"] {
background-color: transparent;
padding: 0;
margin: 0;
color: rgb(var(--style-neutral-text));
font-size: 1em;
font-family: var(--font-regular);
@ -489,7 +443,7 @@ input[type="range"]::-webkit-slider-thumb:active {
}
input[type="range"][disabled]::-webkit-slider-thumb {
border-color: rgb(var(--gray-08));
border-color: rgb(var(--gray-04));
cursor: default;
}
@ -563,7 +517,7 @@ input[type="range"][disabled]::-moz-range-track {
}
input[type="range"][disabled]::-moz-range-thumb {
border-color: rgb(var(--gray-08));
border-color: rgb(var(--gray-04));
cursor: default;
}
@ -577,6 +531,177 @@ input[type="range"][disabled]::-moz-range-progress {
background-color: rgb(var(--gray-08));
}
/* input helper */
.input-helper {
margin-bottom: 0
}
.input-helper:not(:only-child):not(:last-child) {
margin-bottom: 0.5em;
}
input[type="checkbox"][disabled]~.input-helper,
input[type="radio"][disabled]~.input-helper,
input[type="email"][disabled]~.input-helper,
input[type="number"][disabled]~.input-helper,
input[type="password"][disabled]~.input-helper,
input[type="search"][disabled]~.input-helper,
input[type="tel"][disabled]~.input-helper,
input[type="text"][disabled]~.input-helper,
input[type="range"][disabled]~.input-helper {
color: rgb(var(--form-input-text-disabled-helper-text));
}
/* input variants */
.input-wrap {
padding: 0.5em 0;
position: relative;
width: 100%;
}
.input-wrap.input-button {
width: initial;
display: inline-block;
}
.input-button input[type="checkbox"]+label,
.input-button input[type="radio"]+label,
.input-button input[type="color"]+label {
background-color: rgb(var(--gray-02));
padding: 0.125em 1em;
margin: 0;
color: rgb(var(--button-text));
font-size: 1em;
font-family: var(--font-regular);
min-height: 2.5em;
line-height: 1;
border: 0;
border-top-width: var(--line-width);
border-bottom-width: var(--line-width);
border-style: solid;
border-color: transparent;
border-radius: var(--radius);
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
box-shadow: none;
transition: all var(--animation-speed-fast) ease-in-out;
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.input-button input[type="checkbox"]:hover+label,
.input-button input[type="checkbox"]:focus+label,
.input-button input[type="radio"]:hover+label,
.input-button input[type="radio"]:focus+label,
.input-button input[type="color"]:hover+label,
.input-button input[type="color"]:focus+label {
background-color: rgb(var(--gray-03));
border-bottom-color: rgb(var(--gray-08));
color: rgb(var(--button-text-hover-focus));
outline: none;
}
.input-button input[type="checkbox"]:active+label,
.input-button input[type="radio"]:active+label,
.input-button input[type="color"]:active+label {
background-color: rgb(var(--gray-04));
border-bottom-color: rgb(var(--accent));
color: rgb(var(--button-text-active));
transition: none;
}
.input-button input[type="checkbox"]:checked+label,
.input-button input[type="radio"]:checked+label,
.input-button input[type="color"]:checked+label {
background-color: rgb(var(--gray-04));
border-bottom-color: rgb(var(--accent));
color: rgb(var(--button-text-active));
transition: none;
}
.input-button input[type="checkbox"][disabled]+label,
.input-button input[type="checkbox"][disabled]:hover+label,
.input-button input[type="checkbox"][disabled]:focus+label,
.input-button input[type="checkbox"][disabled]:active+label,
.input-button input[type="radio"][disabled]+label,
.input-button input[type="radio"][disabled]:hover+label,
.input-button input[type="radio"][disabled]:focus+label,
.input-button input[type="radio"][disabled]:active+label,
.input-button input[type="color"][disabled]+label,
.input-button input[type="color"][disabled]:hover+label,
.input-button input[type="color"][disabled]:focus+label,
.input-button input[type="color"][disabled]:active+label {
background-color: rgb(var(--gray-02));
border-color: transparent;
color: rgb(var(--button-text-disabled));
cursor: default;
}
.input-color-dot input[type="color"] {
margin: 0;
position: absolute;
top: 50%;
right: 0.5em;
width: 1em;
height: 1em;
z-index: 1;
border-radius: 50%;
transform: translateY(-50%);
transition: none;
}
.input-color-dot input[type="color"]:hover {
outline: none;
box-shadow: none;
}
.input-color-dot input[type="color"]:focus {
outline: none;
box-shadow: none;
}
.input-color-dot-accent input[type="color"],
.input-color-dot-accent input[type="color"]:hover,
.input-color-dot-accent input[type="color"]:focus {
box-shadow: 0 0 0.25em 0 rgba(var(--accent), 0.6), 0 0 0.5em 0 rgba(var(--accent), 0.4);
}
.input-color-dot input[type="color"]+label {
padding-right: 2.25em;
position: relative;
}
.input-hide input[type="checkbox"]+label:before,
.input-hide input[type="checkbox"]:checked+label:before,
.input-hide input[type="radio"]+label:before,
.input-hide input[type="radio"]:checked+label:before {
content: none;
}
.input-hide input[type="color"] {
opacity: 0;
width: 1px;
height: 1px;
position: absolute;
top: 0;
left: 0;
-webkit-appearance: none;
}
/* form variants */
.form-indent {
margin-left: 2.25em;
}
.form-inline {
display: inline-block;
margin-right: 1.5em;
}
.form-group {
margin: 0 0 1em 0;
display: inline-flex;
@ -592,7 +717,8 @@ input[type="range"][disabled]::-moz-range-progress {
.form-group>input[type="password"],
.form-group>input[type="search"],
.form-group>input[type="tel"],
.form-group>input[type="text"] {
.form-group>input[type="text"],
.form-group>input[type="color"] {
margin: 0;
border-radius: 0;
}
@ -611,7 +737,8 @@ input[type="range"][disabled]::-moz-range-progress {
.form-group>input[type="password"],
.form-group>input[type="search"],
.form-group>input[type="tel"],
.form-group>input[type="text"] {
.form-group>input[type="text"],
.form-group>input[type="color"] {
z-index: 1;
}
@ -620,7 +747,8 @@ input[type="range"][disabled]::-moz-range-progress {
.form-group>input[type="password"]:hover,
.form-group>input[type="search"]:hover,
.form-group>input[type="tel"]:hover,
.form-group>input[type="text"]:hover {
.form-group>input[type="text"]:hover,
.form-group>input[type="color"]:hover {
z-index: 2;
}
@ -635,7 +763,9 @@ input[type="range"][disabled]::-moz-range-progress {
.form-group>input[type="tel"]:active,
.form-group>input[type="tel"]:focus,
.form-group>input[type="text"]:active,
.form-group>input[type="text"]:focus {
.form-group>input[type="text"]:focus,
.form-group>input[type="color"]:active,
.form-group>input[type="color"]:focus {
z-index: 3;
}
@ -646,7 +776,8 @@ input[type="range"][disabled]::-moz-range-progress {
.form-group>input[type="password"]:first-child,
.form-group>input[type="search"]:first-child,
.form-group>input[type="tel"]:first-child,
.form-group>input[type="text"]:first-child {
.form-group>input[type="text"]:first-child,
.form-group>input[type="color"]:first-child {
border-radius: var(--radius) 0 0 var(--radius);
}
@ -657,14 +788,28 @@ input[type="range"][disabled]::-moz-range-progress {
.form-group>input[type="password"]:last-child,
.form-group>input[type="search"]:last-child,
.form-group>input[type="tel"]:last-child,
.form-group>input[type="text"]:last-child {
.form-group>input[type="text"]:last-child,
.form-group>input[type="color"]:last-child {
border-radius: 0 var(--radius) var(--radius) 0;
}
.form-group.nested-button *:first-child .button {
.form-group.nested-button * .button,
.form-group.nested-button * input[type="checkbox"]+label,
.form-group.nested-button * input[type="radio"]+label,
.form-group.nested-button * input[type="color"]+label {
border-radius: 0;
}
.form-group.nested-button *:first-child .button,
.form-group.nested-button *:first-child input[type="checkbox"]+label,
.form-group.nested-button *:first-child input[type="radio"]+label,
.form-group.nested-button *:first-child input[type="color"]+label {
border-radius: var(--radius) 0 0 var(--radius);
}
.form-group.nested-button *:last-child .button {
.form-group.nested-button *:last-child .button,
.form-group.nested-button *:last-child input[type="checkbox"]+label,
.form-group.nested-button *:last-child input[type="radio"]+label,
.form-group.nested-button *:last-child input[type="color"]+label {
border-radius: 0 var(--radius) var(--radius) 0;
}

4
css/icons.css
View File

@ -119,3 +119,7 @@
.icon-unfold-more:before {
content: "\e5d7";
}
.icon-refresh:before {
content: "\e900";
}

14
css/menu.css
View File

@ -66,7 +66,7 @@
}
.menu-item:not(:last-child) {
border-bottom: var(--line-width) solid rgb(var(--gray-02));
border-bottom: var(--menu-border);
}
.menu-close {
@ -143,9 +143,9 @@
height: 100%;
position: absolute;
top: 0;
right: calc(-2em - calc(var(--line-width) / 2));
right: calc(-2em - calc(var(--menu-border-width) / 2));
border-radius: 1em;
border-right: var(--line-width) solid rgb(var(--gray-03));
border-right: var(--menu-border);
}
.menu-item:not(:nth-last-child(2)):not(:last-child):before {
@ -154,9 +154,9 @@
height: 0;
position: absolute;
left: 0;
bottom: calc(-2em - calc(var(--line-width) / 2));
bottom: calc(-2em - calc(var(--menu-border-width) / 2));
border-radius: 1em;
border-bottom: var(--line-width) solid rgb(var(--gray-03));
border-bottom: var(--menu-border);
}
.menu-item {
@ -191,7 +191,7 @@
top: 0;
right: calc(-2em - calc(var(--line-width) / 2));
border-radius: 1em;
border-right: var(--line-width) solid rgb(var(--gray-03));
border-right: var(--menu-border);
}
.menu-item:not(:nth-last-child(2)):not(:last-child):before {
@ -206,6 +206,6 @@
left: 0;
bottom: calc(-2em - calc(var(--line-width) / 2));
border-radius: 1em;
border-bottom: var(--line-width) solid rgb(var(--gray-03));
border-bottom: var(--menu-border);
}
}

BIN
fonts/icons/icons.eot
View File

Binary file not shown.

2
fonts/icons/icons.json
View File

File diff suppressed because one or more lines are too long

1
fonts/icons/icons.svg
View File

@ -30,5 +30,6 @@
<glyph unicode="&#xe837;" glyph-name="radio_button_checked" d="M512 84.667c188 0 342 154 342 342s-154 342-342 342-342-154-342-342 154-342 342-342zM512 852.667c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426zM512 640.667c118 0 214-96 214-214s-96-214-214-214-214 96-214 214 96 214 214 214z" />
<glyph unicode="&#xe876;" glyph-name="done" d="M384 246.667l452 454 60-60-512-512-238 238 58 60z" />
<glyph unicode="&#xe8b8;" glyph-name="settings" d="M512 276.667c82 0 150 68 150 150s-68 150-150 150-150-68-150-150 68-150 150-150zM830 384.667l90-70c8-6 10-18 4-28l-86-148c-6-10-16-12-26-8l-106 42c-22-16-46-32-72-42l-16-112c-2-10-10-18-20-18h-172c-10 0-18 8-20 18l-16 112c-26 10-50 24-72 42l-106-42c-10-4-20-2-26 8l-86 148c-6 10-4 22 4 28l90 70c-2 14-2 28-2 42s0 28 2 42l-90 70c-8 6-10 18-4 28l86 148c6 10 16 12 26 8l106-42c22 16 46 32 72 42l16 112c2 10 10 18 20 18h172c10 0 18-8 20-18l16-112c26-10 50-24 72-42l106 42c10 4 20 2 26-8l86-148c6-10 4-22-4-28l-90-70c2-14 2-28 2-42s0-28-2-42z" />
<glyph unicode="&#xe900;" glyph-name="refresh" d="M754 668.667l100 100v-300h-300l138 138c-46 46-110 76-180 76-142 0-256-114-256-256s114-256 256-256c112 0 208 70 242 170h88c-38-148-170-256-330-256-188 0-340 154-340 342s152 342 340 342c94 0 180-38 242-100z" />
<glyph unicode="&#xe909;" glyph-name="indeterminate_check_box" d="M726 384.667v84h-428v-84h428zM810 810.667c46 0 86-40 86-86v-596c0-46-40-86-86-86h-596c-46 0-86 40-86 86v596c0 46 40 86 86 86h596z" />
</font></defs></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
fonts/icons/icons.ttf
View File

Binary file not shown.

BIN
fonts/icons/icons.woff
View File

Binary file not shown.

366
index.html
View File

@ -67,11 +67,9 @@
</div>
<div class="header-item header-edit-add">
<div class="form-group nested-button mb-0">
<div class="checkbox-wrap">
<div class="input-wrap input-button input-hide py-0">
<input id="control-edit" class="control-edit" type="checkbox" tabindex="1">
<label for="control-edit" class="button input-label-button">
<div class="button-text">Edit</div>
</label>
<label for="control-edit" class=" mb-0">Edit</label>
</div>
<button class="button control-add" tabindex="1">
<span class="button-text">Add</span>
@ -79,11 +77,9 @@
</div>
</div>
<div class="header-item header-accent">
<div class="input-wrap">
<input id="control-theme-accent-current" class="control-theme-accent-current" type="color" value="#00ff00" tabindex="1">
<label for="control-theme-accent-current" class="button input-label-button mb-0">
<span class="button-text">Accent</span>
</label>
<div class="input-wrap input-button input-color-dot input-color-dot-accent py-0">
<input id="control-theme-accent-current" class="control-theme-accent-current" type="color" tabindex="1">
<label for="control-theme-accent-current">Accent</label>
</div>
</div>
<div class="header-item header-menu">
@ -125,22 +121,22 @@
<h1 class="menu-item-header-text">Greeting</h1>
</div>
<div class="menu-item-form">
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-header-greeting-show" class="control-header-greeting-show" type="checkbox" tabindex="1">
<label for="control-header-greeting-show"><span class="label-icon"></span>Show</label>
<label for="control-header-greeting-show">Show</label>
</div>
<div class="form-indent">
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-greeting-type-good" class="control-header-greeting-type-good" type="radio" name="control-header-greeting-type" value="good" tabindex="1">
<label for="control-header-greeting-type-good"><span class="label-icon"></span>"Good morning..."</label>
<label for="control-header-greeting-type-good">"Good morning..."</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-greeting-type-hello" class="control-header-greeting-type-hello" type="radio" name="control-header-greeting-type" value="hello" tabindex="1">
<label for="control-header-greeting-type-hello"><span class="label-icon"></span>"Hello..."</label>
<label for="control-header-greeting-type-hello">"Hello..."</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-greeting-type-hi" class="control-header-greeting-type-hi" type="radio" name="control-header-greeting-type" value="hi" tabindex="1">
<label for="control-header-greeting-type-hi"><span class="label-icon"></span>"Hi..."</label>
<label for="control-header-greeting-type-hi">"Hi..."</label>
</div>
<hr>
<div class="input-wrap">
@ -155,19 +151,19 @@
<h1 class="menu-item-header-text">Transitional words</h1>
</div>
<div class="menu-item-form">
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-header-transitional-show" class="control-header-transitional-show" type="checkbox" tabindex="1">
<label for="control-header-transitional-show"><span class="label-icon"></span>Show</label>
<label for="control-header-transitional-show">Show</label>
<p class="input-helper small muted">Available when Date or Time is shown.</p>
</div>
<div class="form-indent">
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-transitional-type-timeanddate" class="control-header-transitional-type-timeanddate" type="radio" name="control-header-transitional-type" value="timeanddate" tabindex="1">
<label for="control-header-transitional-type-timeanddate"><span class="label-icon"></span>"The time and date is"</label>
<label for="control-header-transitional-type-timeanddate">"The time and date is"</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-transitional-type-its" class="control-header-transitional-type-its" type="radio" name="control-header-transitional-type" value="its" tabindex="1">
<label for="control-header-transitional-type-its"><span class="label-icon"></span>"It's"</label>
<label for="control-header-transitional-type-its">"It's"</label>
</div>
</div>
</div>
@ -177,63 +173,63 @@
<h1 class="menu-item-header-text">Clock</h1>
</div>
<div class="menu-item-form">
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-header-clock-hours-show" class="control-header-clock-hours-show" type="checkbox" tabindex="1">
<label for="control-header-clock-hours-show"><span class="label-icon"></span>Hours</label>
<label for="control-header-clock-hours-show">Hours</label>
</div>
<div class="form-indent">
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-clock-hours-number" class="control-header-clock-hours-number" type="radio" name="control-header-clock-hours" value="number" tabindex="1">
<label for="control-header-clock-hours-number"><span class="label-icon"></span>As number</label>
<label for="control-header-clock-hours-number">As number</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-clock-hours-word" class="control-header-clock-hours-word" type="radio" name="control-header-clock-hours" value="word" tabindex="1">
<label for="control-header-clock-hours-word"><span class="label-icon"></span>As word</label>
<label for="control-header-clock-hours-word">As word</label>
</div>
<hr>
</div>
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-header-clock-minutes-show" class="control-header-clock-minutes-show" type="checkbox" tabindex="1">
<label for="control-header-clock-minutes-show"><span class="label-icon"></span>Minutes</label>
<label for="control-header-clock-minutes-show">Minutes</label>
</div>
<div class="form-indent">
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-clock-minutes-number" class="control-header-clock-minutes-number" type="radio" name="control-header-clock-minutes" value="number" tabindex="1">
<label for="control-header-clock-minutes-number"><span class="label-icon"></span>As number</label>
<label for="control-header-clock-minutes-number">As number</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-clock-minutes-word" class="control-header-clock-minutes-word" type="radio" name="control-header-clock-minutes" value="word" tabindex="1">
<label for="control-header-clock-minutes-word"><span class="label-icon"></span>As word</label>
<label for="control-header-clock-minutes-word">As word</label>
</div>
<hr>
</div>
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-header-clock-seconds-show" class="control-header-clock-seconds-show" type="checkbox" tabindex="1">
<label for="control-header-clock-seconds-show"><span class="label-icon"></span>Seconds</label>
<label for="control-header-clock-seconds-show">Seconds</label>
</div>
<div class="form-indent">
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-clock-seconds-number" class="control-header-clock-seconds-number" type="radio" name="control-header-clock-seconds" value="number" tabindex="1">
<label for="control-header-clock-seconds-number"><span class="label-icon"></span>As number</label>
<label for="control-header-clock-seconds-number">As number</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-clock-seconds-word" class="control-header-clock-seconds-word" type="radio" name="control-header-clock-seconds" value="word" tabindex="1">
<label for="control-header-clock-seconds-word"><span class="label-icon"></span>As word</label>
<label for="control-header-clock-seconds-word">As word</label>
</div>
</div>
<hr>
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-header-clock-separator-show" class="control-header-clock-separator-show" type="checkbox" tabindex="1">
<label for="control-header-clock-separator-show"><span class="label-icon"></span>Separators</label>
<label for="control-header-clock-separator-show">Separators</label>
</div>
<hr>
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-header-clock-hour24-show" class="control-header-clock-hour24-show" type="checkbox" tabindex="1">
<label for="control-header-clock-hour24-show"><span class="label-icon"></span>24 Hours</label>
<label for="control-header-clock-hour24-show">24 Hours</label>
</div>
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-header-clock-meridiem-show" class="control-header-clock-meridiem-show" type="checkbox" tabindex="1">
<label for="control-header-clock-meridiem-show"><span class="label-icon"></span>AM/PM</label>
<label for="control-header-clock-meridiem-show">AM/PM</label>
</div>
</div>
</div>
@ -242,125 +238,125 @@
<h1 class="menu-item-header-text">Date</h1>
</div>
<div class="menu-item-form">
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-header-date-day-show" class="control-header-date-day-show" type="checkbox" tabindex="1">
<label for="control-header-date-day-show"><span class="label-icon"></span>Day</label>
<label for="control-header-date-day-show">Day</label>
</div>
<div class="form-indent">
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-date-day-display-number" class="control-header-date-day-display-number" type="radio" name="control-header-date-day-display" value="number" tabindex="1">
<label for="control-header-date-day-display-number"><span class="label-icon"></span>As number</label>
<label for="control-header-date-day-display-number">As number</label>
</div>
<div class="form-indent">
<label class="control-header-date-day-week-start-label">Start of the week</label>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-date-day-week-start-monday" class="control-header-date-day-week-start-monday" type="radio" name="control-header-date-day-week-start" value="monday" tabindex="1">
<label for="control-header-date-day-week-start-monday"><span class="label-icon"></span>Monday</label>
<label for="control-header-date-day-week-start-monday">Monday</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-date-day-week-start-sunday" class="control-header-date-day-week-start-sunday" type="radio" name="control-header-date-day-week-start" value="sunday" tabindex="1">
<label for="control-header-date-day-week-start-sunday"><span class="label-icon"></span>Sunday</label>
<label for="control-header-date-day-week-start-sunday">Sunday</label>
<p class="input-helper small muted">Define what day "1" represents, either Monday or Sunday.</p>
</div>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-date-day-display-word" class="control-header-date-day-display-word" type="radio" name="control-header-date-day-display" value="word" tabindex="1">
<label for="control-header-date-day-display-word"><span class="label-icon"></span>As word</label>
<label for="control-header-date-day-display-word">As word</label>
</div>
<div class="form-indent">
<label class="control-header-date-day-length-label">Word length</label>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-date-day-length-long" class="control-header-date-day-length-long" type="radio" name="control-header-date-day-length" value="long" tabindex="1">
<label for="control-header-date-day-length-long"><span class="label-icon"></span>Long</label>
<label for="control-header-date-day-length-long">Long</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-date-day-length-short" class="control-header-date-day-length-short" type="radio" name="control-header-date-day-length" value="short" tabindex="1">
<label for="control-header-date-day-length-short"><span class="label-icon"></span>Short</label>
<label for="control-header-date-day-length-short">Short</label>
</div>
</div>
<hr>
</div>
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-header-date-date-show" class="control-header-date-date-show" type="checkbox" tabindex="1">
<label for="control-header-date-date-show"><span class="label-icon"></span>Date</label>
<label for="control-header-date-date-show">Date</label>
</div>
<div class="form-indent">
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-date-date-display-number" class="control-header-date-date-display-number" type="radio" name="control-header-date-date-display" value="number" tabindex="1">
<label for="control-header-date-date-display-number"><span class="label-icon"></span>As number</label>
<label for="control-header-date-date-display-number">As number</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-date-date-display-word" class="control-header-date-date-display-word" type="radio" name="control-header-date-date-display" value="word" tabindex="1">
<label for="control-header-date-date-display-word"><span class="label-icon"></span>As word</label>
<label for="control-header-date-date-display-word">As word</label>
</div>
<div class="checkbox-wrap">
<div class="input-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>
<label for="control-header-date-date-ordinal">Ordinal numbers</label>
<p class="input-helper small muted">Display Date as 1st, 2nd, 3rd, 4th etc.</p>
</div>
<hr>
</div>
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-header-date-month-show" class="control-header-date-month-show" type="checkbox" tabindex="1">
<label for="control-header-date-month-show"><span class="label-icon"></span>Month</label>
<label for="control-header-date-month-show">Month</label>
</div>
<div class="form-indent">
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-date-month-display-number" class="control-header-date-month-display-number" type="radio" name="control-header-date-month-display" value="number" tabindex="1">
<label for="control-header-date-month-display-number"><span class="label-icon"></span>As number</label>
<label for="control-header-date-month-display-number">As number</label>
</div>
<div class="form-indent">
<div class="checkbox-wrap">
<div class="input-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>
<label for="control-header-date-month-ordinal">Ordinal numbers</label>
<p class="input-helper small muted">Display Month as 1st, 2nd, 3rd, 4th etc.</p>
</div>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-date-month-display-word" class="control-header-date-month-display-word" type="radio" name="control-header-date-month-display" value="word" tabindex="1">
<label for="control-header-date-month-display-word"><span class="label-icon"></span>As word</label>
<label for="control-header-date-month-display-word">As word</label>
</div>
<div class="form-indent">
<label class="control-header-date-month-length-label">Word length</label>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-date-month-length-long" class="control-header-date-month-length-long" type="radio" name="control-header-date-month-length" value="long" tabindex="1">
<label for="control-header-date-month-length-long"><span class="label-icon"></span>Long</label>
<label for="control-header-date-month-length-long">Long</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-date-month-length-short" class="control-header-date-month-length-short" type="radio" name="control-header-date-month-length" value="short" tabindex="1">
<label for="control-header-date-month-length-short"><span class="label-icon"></span>Short</label>
<label for="control-header-date-month-length-short">Short</label>
</div>
</div>
<hr>
</div>
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-header-date-year-show" class="control-header-date-year-show" type="checkbox" tabindex="1">
<label for="control-header-date-year-show"><span class="label-icon"></span>Year</label>
<label for="control-header-date-year-show">Year</label>
</div>
<div class="form-indent">
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-date-year-display-number" class="control-header-date-year-display-number" type="radio" name="control-header-date-year-display" value="number" tabindex="1">
<label for="control-header-date-year-display-number"><span class="label-icon"></span>As number</label>
<label for="control-header-date-year-display-number">As number</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-date-year-display-word" class="control-header-date-year-display-word" type="radio" name="control-header-date-year-display" value="word" tabindex="1">
<label for="control-header-date-year-display-word"><span class="label-icon"></span>As word</label>
<label for="control-header-date-year-display-word">As word</label>
</div>
</div>
<hr>
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-header-date-separator-show" class="control-header-date-separator-show" type="checkbox" tabindex="1">
<label for="control-header-date-separator-show"><span class="label-icon"></span>Separators</label>
<label for="control-header-date-separator-show">Separators</label>
</div>
<hr>
<label class="control-header-date-format-label">Format</label>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-date-format-datemonth" class="control-header-date-format-datemonth" type="radio" name="control-header-date-format" value="datemonth" tabindex="1">
<label for="control-header-date-format-datemonth"><span class="label-icon"></span>Date / Month</label>
<label for="control-header-date-format-datemonth">Date / Month</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-date-format-monthdate" class="control-header-date-format-monthdate" type="radio" name="control-header-date-format" value="monthdate" tabindex="1">
<label for="control-header-date-format-monthdate"><span class="label-icon"></span>Month / Date</label>
<label for="control-header-date-format-monthdate">Month / Date</label>
</div>
</div>
</div>
@ -369,20 +365,20 @@
<h1 class="menu-item-header-text">Search</h1>
</div>
<div class="menu-item-form">
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-header-search-show" class="control-header-search-show" type="checkbox" tabindex="1">
<label for="control-header-search-show"><span class="label-icon"></span>Show</label>
<label for="control-header-search-show">Show</label>
</div>
<div class="form-indent">
<label class="control-header-search-width-style-label">Search box size</label>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-search-width-style-auto" class="control-header-search-width-style-auto" type="radio" name="control-header-search-width" value="auto" tabindex="1">
<label for="control-header-search-width-style-auto"><span class="label-icon"></span>Auto</label>
<label for="control-header-search-width-style-auto">Auto</label>
<p class="input-helper small muted">Search box will grow to best fit available space.</p>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-search-width-style-custom" class="control-header-search-width-style-custom" type="radio" name="control-header-search-width" value="custom" tabindex="1">
<label for="control-header-search-width-style-custom"><span class="label-icon"></span>Custom</label>
<label for="control-header-search-width-style-custom">Custom</label>
</div>
<div class="form-indent">
<div class="input-wrap">
@ -392,32 +388,32 @@
</div>
</div>
<hr>
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-header-search-focus" class="control-header-search-focus" type="checkbox" tabindex="1">
<label for="control-header-search-focus"><span class="label-icon"></span>Focus on load/refresh</label>
<label for="control-header-search-focus">Focus on load/refresh</label>
<p class="input-helper small muted">May not work in Chrome.</p>
</div>
<hr>
<label class="control-header-search-engine-label">Engine</label>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-search-engine-google" class="control-header-search-engine-google" type="radio" name="control-header-search-engine" value="google" tabindex="1">
<label for="control-header-search-engine-google"><span class="label-icon"></span>Google</label>
<label for="control-header-search-engine-google">Google</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-search-engine-duckduckgo" class="control-header-search-engine-duckduckgo" type="radio" name="control-header-search-engine" value="duckduckgo" tabindex="1">
<label for="control-header-search-engine-duckduckgo"><span class="label-icon"></span>Duck Duck Go</label>
<label for="control-header-search-engine-duckduckgo">Duck Duck Go</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-search-engine-youtube" class="control-header-search-engine-youtube" type="radio" name="control-header-search-engine" value="youtube" tabindex="1">
<label for="control-header-search-engine-youtube"><span class="label-icon"></span>YouTube</label>
<label for="control-header-search-engine-youtube">YouTube</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-search-engine-giphy" class="control-header-search-engine-giphy" type="radio" name="control-header-search-engine" value="giphy" tabindex="1">
<label for="control-header-search-engine-giphy"><span class="label-icon"></span>Giphy</label>
<label for="control-header-search-engine-giphy">Giphy</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-search-engine-custom" class="control-header-search-engine-custom" type="radio" name="control-header-search-engine" value="custom" tabindex="1">
<label for="control-header-search-engine-custom"><span class="label-icon"></span>Custom</label>
<label for="control-header-search-engine-custom">Custom</label>
</div>
<div class="form-indent">
<div class="input-wrap">
@ -433,17 +429,17 @@
</div>
<hr>
<label class="control-header-search-text-align-label">Text align</label>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-search-text-align-left" class="control-header-search-text-align-left" type="radio" name="control-header-search-text-align" value="left" tabindex="1">
<label for="control-header-search-text-align-left"><span class="label-icon"></span>Left</label>
<label for="control-header-search-text-align-left">Left</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-search-text-align-center" class="control-header-search-text-align-center" type="radio" name="control-header-search-text-align" value="center" tabindex="1">
<label for="control-header-search-text-align-center"><span class="label-icon"></span>Center</label>
<label for="control-header-search-text-align-center">Center</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-search-text-align-right" class="control-header-search-text-align-right" type="radio" name="control-header-search-text-align" value="right" tabindex="1">
<label for="control-header-search-text-align-right"><span class="label-icon"></span>Right</label>
<label for="control-header-search-text-align-right">Right</label>
</div>
</div>
</div>
@ -453,13 +449,13 @@
<h1 class="menu-item-header-text">Buttons</h1>
</div>
<div class="menu-item-form">
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-header-edit-add-show" class="control-header-edit-add-show" type="checkbox" tabindex="1">
<label for="control-header-edit-add-show"><span class="label-icon"></span>Show Edit/Add</label>
<label for="control-header-edit-add-show">Show Edit/Add</label>
</div>
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-header-accent-show" class="control-header-accent-show" type="checkbox" tabindex="1">
<label for="control-header-accent-show"><span class="label-icon"></span>Show Accent</label>
<label for="control-header-accent-show">Show Accent</label>
</div>
</div>
</div>
@ -468,17 +464,17 @@
<h1 class="menu-item-header-text">Horizontal Alignment</h1>
</div>
<div class="menu-item-form">
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-layout-alignment-horizontal-left" class="control-layout-alignment-horizontal-left" type="radio" name="control-layout-alignment-horizontal" value="left" tabindex="1">
<label for="control-layout-alignment-horizontal-left"><span class="label-icon"></span>Left</label>
<label for="control-layout-alignment-horizontal-left">Left</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-layout-alignment-horizontal-center" class="control-layout-alignment-horizontal-center" type="radio" name="control-layout-alignment-horizontal" value="center" tabindex="1">
<label for="control-layout-alignment-horizontal-center"><span class="label-icon"></span>Center</label>
<label for="control-layout-alignment-horizontal-center">Center</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-layout-alignment-horizontal-right" class="control-layout-alignment-horizontal-right" type="radio" name="control-layout-alignment-horizontal" value="right" tabindex="1">
<label for="control-layout-alignment-horizontal-right"><span class="label-icon"></span>Right</label>
<label for="control-layout-alignment-horizontal-right">Right</label>
<p class="input-helper small muted">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
</div>
</div>
@ -488,17 +484,17 @@
<h1 class="menu-item-header-text">Vertical Alignment</h1>
</div>
<div class="menu-item-form">
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-layout-alignment-vertical-top" class="control-layout-alignment-vertical-top" type="radio" name="control-layout-alignment-vertical" value="top" tabindex="1">
<label for="control-layout-alignment-vertical-top"><span class="label-icon"></span>Top</label>
<label for="control-layout-alignment-vertical-top">Top</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-layout-alignment-vertical-center" class="control-layout-alignment-vertical-center" type="radio" name="control-layout-alignment-vertical" value="center" tabindex="1">
<label for="control-layout-alignment-vertical-center"><span class="label-icon"></span>Center</label>
<label for="control-layout-alignment-vertical-center">Center</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-layout-alignment-vertical-bottom" class="control-layout-alignment-vertical-bottom" type="radio" name="control-layout-alignment-vertical" value="bottom" tabindex="1">
<label for="control-layout-alignment-vertical-bottom"><span class="label-icon"></span>Bottom</label>
<label for="control-layout-alignment-vertical-bottom">Bottom</label>
<p class="input-helper small muted">Available when Bookmarks are not shown.</p>
</div>
</div>
@ -508,19 +504,19 @@
<h1 class="menu-item-header-text">Background Shade</h1>
</div>
<div class="menu-item-form">
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-header-shade-show" class="control-header-shade-show" type="checkbox" tabindex="1">
<label for="control-header-shade-show"><span class="label-icon"></span>Show</label>
<label for="control-header-shade-show">Show</label>
</div>
<div class="form-indent">
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-shade-style-always" class="control-header-shade-style-always" type="radio" name="control-header-shade-style" value="always" tabindex="1">
<label for="control-header-shade-style-always"><span class="label-icon"></span>Always visible</label>
<label for="control-header-shade-style-always">Always visible</label>
<p class="input-helper small muted">Useful for when a Background Image is shown.</p>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-header-shade-style-scroll" class="control-header-shade-style-scroll" type="radio" name="control-header-shade-style" value="scroll" tabindex="1">
<label for="control-header-shade-style-scroll"><span class="label-icon"></span>Visible on scroll</label>
<label for="control-header-shade-style-scroll">Visible on scroll</label>
<p class="input-helper small muted">The page will not scroll if Bookmarks are not shown.</p>
</div>
<hr>
@ -537,9 +533,9 @@
<input id="control-header-shade-padding-bottom" class="control-header-shade-padding-bottom mb-0" type="range" min="1" max="50" value="0" tabindex="1">
</div>
<hr>
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-header-shade-border-top-show" class="control-header-shade-border-top-show" type="checkbox" value="always" tabindex="1">
<label for="control-header-shade-border-top-show"><span class="label-icon"></span>Top border</label>
<label for="control-header-shade-border-top-show">Top border</label>
</div>
<div class="form-indent">
<div class="input-wrap">
@ -548,9 +544,9 @@
</div>
</div>
<hr>
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-header-shade-border-bottom-show" class="control-header-shade-border-bottom-show" type="checkbox" value="always" tabindex="1">
<label for="control-header-shade-border-bottom-show"><span class="label-icon"></span>Bottom border</label>
<label for="control-header-shade-border-bottom-show">Bottom border</label>
</div>
<div class="form-indent">
<div class="input-wrap">
@ -569,27 +565,27 @@
<h1 class="menu-item-header-text">Bookmarks</h1>
</div>
<div class="menu-item-form">
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-bookmarks-link-show" class="control-bookmarks-link-show" type="checkbox" tabindex="1">
<label for="control-bookmarks-link-show"><span class="label-icon"></span>Show</label>
<label for="control-bookmarks-link-show">Show</label>
</div>
<div class="form-indent">
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-bookmarks-name-show" class="control-bookmarks-name-show" type="checkbox" tabindex="1">
<label for="control-bookmarks-name-show"><span class="label-icon"></span>Names</label>
<label for="control-bookmarks-name-show">Names</label>
</div>
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-bookmarks-url-show" class="control-bookmarks-url-show" type="checkbox" tabindex="1">
<label for="control-bookmarks-url-show"><span class="label-icon"></span>URL on hover</label>
<label for="control-bookmarks-url-show">URL on hover</label>
</div>
<div class="form-indent">
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-bookmarks-url-style-dark" class="control-bookmarks-url-style-dark" type="radio" name="control-bookmarks-url-style" value="dark" tabindex="1">
<label for="control-bookmarks-url-style-dark"><span class="label-icon"></span>Dark text</label>
<label for="control-bookmarks-url-style-dark">Dark text</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-bookmarks-url-style-light" class="control-bookmarks-url-style-light" type="radio" name="control-bookmarks-url-style" value="light" tabindex="1">
<label for="control-bookmarks-url-style-light"><span class="label-icon"></span>Light text</label>
<label for="control-bookmarks-url-style-light">Light text</label>
</div>
</div>
</div>
@ -600,9 +596,9 @@
<h1 class="menu-item-header-text">Open</h1>
</div>
<div class="menu-item-form">
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-bookmarks-new-tab" class="control-bookmarks-new-tab" type="checkbox" tabindex="1">
<label for="control-bookmarks-new-tab"><span class="label-icon"></span>In a new tab</label>
<label for="control-bookmarks-new-tab">In a new tab</label>
</div>
</div>
</div>
@ -611,13 +607,13 @@
<h1 class="menu-item-header-text">Style</h1>
</div>
<div class="menu-item-form">
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-bookmarks-style-block" class="control-bookmarks-style-block" type="radio" name="control-bookmarks-style" value="block" tabindex="1">
<label for="control-bookmarks-style-block"><span class="label-icon"></span>Block</label>
<label for="control-bookmarks-style-block">Block</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-bookmarks-style-list" class="control-bookmarks-style-list" type="radio" name="control-bookmarks-style" value="list" tabindex="1">
<label for="control-bookmarks-style-list"><span class="label-icon"></span>List</label>
<label for="control-bookmarks-style-list">List</label>
</div>
</div>
</div>
@ -626,17 +622,17 @@
<h1 class="menu-item-header-text">Sort</h1>
</div>
<div class="menu-item-form">
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-bookmarks-sort-none" class="control-bookmarks-sort-none" type="radio" name="control-bookmarks-sort" value="none" tabindex="1">
<label for="control-bookmarks-sort-none"><span class="label-icon"></span>None (as added)</label>
<label for="control-bookmarks-sort-none">None (as added)</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-bookmarks-sort-name" class="control-bookmarks-sort-name" type="radio" name="control-bookmarks-sort" value="name" tabindex="1">
<label for="control-bookmarks-sort-name"><span class="label-icon"></span>Name</label>
<label for="control-bookmarks-sort-name">Name</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-bookmarks-sort-letter" class="control-bookmarks-sort-letter" type="radio" name="control-bookmarks-sort" value="letter" tabindex="1">
<label for="control-bookmarks-sort-letter"><span class="label-icon"></span>Letter</label>
<label for="control-bookmarks-sort-letter">Letter</label>
</div>
</div>
</div>
@ -648,13 +644,13 @@
<h1 class="menu-item-header-text">Style</h1>
</div>
<div class="menu-item-form">
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-theme-style-dark" class="control-theme-style-dark" type="radio" name="control-theme-style" value="dark" tabindex="1">
<label for="control-theme-style-dark"><span class="label-icon"></span>Dark</label>
<label for="control-theme-style-dark">Dark</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-theme-style-light" class="control-theme-style-light" type="radio" name="control-theme-style" value="light" tabindex="1">
<label for="control-theme-style-light"><span class="label-icon"></span>Light</label>
<label for="control-theme-style-light">Light</label>
<p class="input-helper small muted">Accent colour may need to be changed to best fit the Theme Style.</p>
</div>
</div>
@ -664,30 +660,30 @@
<h1 class="menu-item-header-text">Accent</h1>
</div>
<div class="menu-item-form">
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-theme-accent-random-active" class="control-theme-accent-random-active" type="checkbox" tabindex="1">
<label for="control-theme-accent-random-active"><span class="label-icon"></span>Random Accent colour on load/refresh</label>
<label for="control-theme-accent-random-active">Random Accent colour on load/refresh</label>
</div>
<div class="form-indent">
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-theme-accent-random-style-any" class="control-theme-accent-random-style-any" type="radio" name="control-theme-accent-random-style" value="any" tabindex="1">
<label for="control-theme-accent-random-style-any"><span class="label-icon"></span>Any colour</label>
<label for="control-theme-accent-random-style-any">Any colour</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-theme-accent-random-style-light" class="control-theme-accent-random-style-light" type="radio" name="control-theme-accent-random-style" value="light" tabindex="1">
<label for="control-theme-accent-random-style-light"><span class="label-icon"></span>Light colours</label>
<label for="control-theme-accent-random-style-light">Light colours</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-theme-accent-random-style-dark" class="control-theme-accent-random-style-dark" type="radio" name="control-theme-accent-random-style" value="dark" tabindex="1">
<label for="control-theme-accent-random-style-dark"><span class="label-icon"></span>Dark colours</label>
<label for="control-theme-accent-random-style-dark">Dark colours</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-theme-accent-random-style-pastel" class="control-theme-accent-random-style-pastel" type="radio" name="control-theme-accent-random-style" value="pastel" tabindex="1">
<label for="control-theme-accent-random-style-pastel"><span class="label-icon"></span>Pastel colours</label>
<label for="control-theme-accent-random-style-pastel">Pastel colours</label>
</div>
<div class="radio-wrap">
<div class="input-wrap">
<input id="control-theme-accent-random-style-saturated" class="control-theme-accent-random-style-saturated" type="radio" name="control-theme-accent-random-style" value="saturated" tabindex="1">
<label for="control-theme-accent-random-style-saturated"><span class="label-icon"></span>Saturated colours</label>
<label for="control-theme-accent-random-style-saturated">Saturated colours</label>
</div>
<hr>
<div class="button-wrap">
@ -715,9 +711,9 @@
<h1 class="menu-item-header-text">Page</h1>
</div>
<div class="menu-item-form">
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-layout-scroll-past-end" class="control-layout-scroll-past-end" type="checkbox" tabindex="1">
<label for="control-layout-scroll-past-end"><span class="label-icon"></span>Scroll past end</label>
<label for="control-layout-scroll-past-end">Scroll past end</label>
</div>
<hr>
<div class="input-wrap">
@ -734,9 +730,9 @@
<h1 class="menu-item-header-text">Image</h1>
</div>
<div class="menu-item-form">
<div class="checkbox-wrap">
<div class="input-wrap">
<input id="control-background-image-show" class="control-background-image-show" type="checkbox" tabindex="1">
<label for="control-background-image-show"><span class="label-icon"></span>Show</label>
<label for="control-background-image-show">Show</label>
</div>
<div class="form-indent">
<div class="input-wrap">

212
js/bookmarks.js
View File

@ -4,131 +4,339 @@ var bookmarks = (function() {
letter: "CM",
name: "Citymapper",
url: "https://citymapper.com/london/superrouter",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453100455
}, {
letter: "DEV",
name: "Devdocs",
url: "http://devdocs.io/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453101749
}, {
letter: "OD",
name: "r/opendirectories/",
url: "https://www.reddit.com/r/opendirectories/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453102199
}, {
letter: "KP",
name: "Keep",
url: "https://keep.google.com/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453102671
}, {
letter: "MHW",
name: "r/monsterhunterworld/",
url: "https://www.reddit.com/r/monsterhunterworld/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453103110
}, {
letter: "M",
name: "Maps",
url: "https://www.google.co.uk/maps",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453103560
}, {
letter: "AS",
name: "awesomeSheet",
url: "https://zombiefox.github.io/awesomeSheet/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453104010
}, {
letter: "N",
name: "Netflix",
url: "https://www.netflix.com/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453104460
}, {
letter: "P",
name: "Photos",
url: "https://photos.google.com/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453104910
}, {
letter: "FB",
name: "Facebook",
url: "https://www.facebook.com/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453105349
}, {
letter: "GOT",
name: "r/gameofthrones/",
url: "https://www.reddit.com/r/gameofthrones/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453105844
}, {
letter: "BX",
name: "Box",
url: "https://app.box.com/login/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453106272
}, {
letter: "TFL",
name: "TFL Map",
url: "http://content.tfl.gov.uk/standard-tube-map.pdf",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453106734
}, {
letter: "PRG",
name: "r/Pathfinder_RPG/",
url: "https://www.reddit.com/r/Pathfinder_RPG/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453107194
}, {
letter: "AZ",
name: "Amazon",
url: "https://www.amazon.co.uk/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453107633
}, {
letter: "YT",
name: "Youtube",
url: "https://www.youtube.com/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453108071
}, {
letter: "CO",
name: "Contacts",
url: "https://contacts.google.com/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453108501
}, {
letter: "GIT",
name: "Github",
url: "https://github.com/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453108926
}, {
letter: "AN",
name: "r/Android/",
url: "https://www.reddit.com/r/Android/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453109355
}, {
letter: "V",
name: "r/videos/",
url: "https://www.reddit.com/r/videos/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453109840
}, {
letter: "GM",
name: "Gmail",
url: "https://mail.google.com/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453110265
}, {
letter: "CAL",
name: "Calendar",
url: "https://www.google.com/calendar/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453110885
}, {
letter: "R",
name: "Reddit",
url: "https://www.reddit.com/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453111491
}, {
letter: "DR",
name: "Drive",
url: "https://drive.google.com/drive/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453111953
}, {
letter: "ANA",
name: "Analytics",
url: "https://analytics.google.com/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453112357
}, {
letter: "COS",
name: "r/chromeos/",
url: "https://www.reddit.com/r/chromeos/",
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
},
timeStamp: 1546453112797
}];
@ -174,6 +382,7 @@ var bookmarks = (function() {
letter: null,
name: null,
url: null,
accent: null,
timeStamp: null
};
if (override) {
@ -183,7 +392,8 @@ var bookmarks = (function() {
letter: options.letter,
name: options.name,
url: options.url,
timeStamp: options.timeStamp
timeStamp: options.timeStamp,
accent: options.accent
};
all.push(newBookmark);
};

8
js/control.js
View File

@ -1197,10 +1197,10 @@ var control = (function() {
path: object.path,
newValue: newValue
});
console.log(object.path, helper.getObject({
object: state.get(),
path: object.path
}));
// console.log(object.path, helper.getObject({
// object: state.get(),
// path: object.path
// }));
};
};
var bindControl = function(object) {

128
js/link.js
View File

@ -34,6 +34,11 @@ var link = (function() {
form.querySelector(".link-form-input-letter").value = currentBookmark.letter;
form.querySelector(".link-form-input-name").value = currentBookmark.name;
form.querySelector(".link-form-input-url").value = currentBookmark.url;
if (currentBookmark.accent.override) {
form.querySelector(".link-form-input-color").value = helper.rgbToHex(currentBookmark.accent.color);
} else {
form.querySelector(".link-form-input-color").value = helper.rgbToHex(state.get().theme.accent.current);
};
modal.render({
heading: "Edit " + currentBookmark.name,
action: function() {
@ -82,7 +87,19 @@ var link = (function() {
letter: options.form.querySelector(".link-form-input-letter").value,
name: options.form.querySelector(".link-form-input-name").value,
url: options.form.querySelector(".link-form-input-url").value,
timeStamp: new Date().getTime()
timeStamp: new Date().getTime(),
accent: {
override: false,
color: {
r: null,
g: null,
b: null
}
}
};
if (options.form.querySelector(".link-form-input-color").value != helper.rgbToHex(state.get().theme.accent.current)) {
newBookmarkData.accent.override = true;
newBookmarkData.accent.color = helper.hexToRgb(options.form.querySelector(".link-form-input-color").value);
};
bookmarks.add(newBookmarkData);
},
@ -90,6 +107,17 @@ var link = (function() {
options.bookmarkData.letter = options.form.querySelector(".link-form-input-letter").value;
options.bookmarkData.name = options.form.querySelector(".link-form-input-name").value;
options.bookmarkData.url = options.form.querySelector(".link-form-input-url").value;
if (options.form.querySelector(".link-form-input-color").value != helper.rgbToHex(state.get().theme.accent.current)) {
options.bookmarkData.accent.override = true;
options.bookmarkData.accent.color = helper.hexToRgb(options.form.querySelector(".link-form-input-color").value);
} else {
options.bookmarkData.accent.override = false;
options.bookmarkData.accent.color = {
r: null,
g: null,
b: null
};
};
bookmarks.edit({
bookmarkData: options.bookmarkData,
timeStamp: options.bookmarkData.timeStamp
@ -224,7 +252,7 @@ var link = (function() {
value: "text"
}, {
key: "class",
value: "link-form-input-url mb-0"
value: "link-form-input-url"
}, {
key: "id",
value: "url"
@ -248,25 +276,111 @@ var link = (function() {
value: "false"
}]
});
var colorInputWrap = helper.makeNode({
tag: "div",
attr: [{
key: "class",
value: "input-wrap py-0"
}]
});
var colorFormGroup = helper.makeNode({
tag: "div",
attr: [{
key: "class",
value: "form-group"
}]
});
var colorInputLabel = helper.makeNode({
tag: "label",
text: "Accent override",
attr: [{
key: "for",
value: "color"
}]
});
var colorInputInput = helper.makeNode({
tag: "input",
attr: [{
key: "id",
value: "color"
}, {
key: "class",
value: "link-form-input-color mb-0"
}, {
key: "type",
value: "color"
}, {
key: "value",
value: helper.rgbToHex(state.get().theme.accent.current)
}, {
key: "tabindex",
value: "1"
}]
});
var colorButtonRefresh = helper.makeNode({
tag: "button",
attr: [{
key: "class",
value: "button mb-0"
}, {
key: "type",
value: "button"
}, {
key: "tabindex",
value: "1"
}]
});
var colorButtonRefreshIcon = helper.makeNode({
tag: "span",
attr: [{
key: "class",
value: "icon-refresh"
}]
});
var colorPara = helper.makeNode({
tag: "p",
text: "Use this color to override the global Accent colour.",
attr: [{
key: "class",
value: "input-helper small muted"
}]
});
colorButtonRefresh.addEventListener("click", function(event) {
colorInputInput.value = helper.rgbToHex(state.get().theme.accent.current);
}, false);
fieldset.appendChild(letterLabel);
fieldset.appendChild(letterInput);
fieldset.appendChild(nameLabel);
fieldset.appendChild(nameInput);
fieldset.appendChild(urlLabel);
fieldset.appendChild(urlInput);
fieldset.appendChild(colorInputLabel);
colorFormGroup.appendChild(colorInputInput);
colorButtonRefresh.appendChild(colorButtonRefreshIcon);
colorFormGroup.appendChild(colorButtonRefresh);
colorInputWrap.appendChild(colorFormGroup);
fieldset.appendChild(colorInputWrap);
fieldset.appendChild(colorPara);
form.appendChild(fieldset);
return form;
};
var _makeLink = function(data) {
var linkItem = helper.makeNode({
var linkItemOptions = {
tag: "div",
attr: [{
key: "class",
value: "link-item"
}]
});
var linkOptions = {
};
if (data.accent.override) {
linkItemOptions.attr.push({
key: "style",
value: "--accent: " + data.accent.color.r + ", " + data.accent.color.g + ", " + data.accent.color.b
});
};
var linkItem = helper.makeNode(linkItemOptions);
var linkPanelFrontOptions = {
tag: "a",
attr: [{
key: "class",
@ -280,12 +394,12 @@ var link = (function() {
}]
};
if (state.get().bookmarks.newTab) {
linkOptions.attr.push({
linkPanelFrontOptions.attr.push({
key: "target",
value: "_blank"
});
};
var linkPanelFront = helper.makeNode(linkOptions);
var linkPanelFront = helper.makeNode(linkPanelFrontOptions);
var linkPanelBack = helper.makeNode({
tag: "div",
attr: [{

19
js/update.js
View File

@ -304,6 +304,21 @@ var update = (function() {
return data;
};
var _update_2220 = function(data) {
data.version = "2.22.0";
data.bookmarks.forEach(function(item, index) {
item.accent = {
override: false,
color: {
r: null,
g: null,
b: null
}
};
});
return data;
};
// var _update_300 = function(data) {
// data.version = 3.00;
// return data;
@ -390,6 +405,10 @@ var update = (function() {
console.log("\t= running update 2.21.0");
data = _update_2210(data);
};
if (version.compare(data.version, "2.22.0") == -1) {
console.log("\t= running update 2.22.0");
data = _update_2220(data);
};
};
// if no update is needed
// version bump

2
js/version.js
View File

@ -1,7 +1,7 @@
var version = (function() {
// version is normally bumped when the state needs changing or any new functionality is added
var current = "2.21.0";
var current = "2.22.0";
var compare = function(a, b) {
var pa = a.split(".");