extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-06-27 13:01:41 +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; --background-blur: 0;
--layout-width: calc(70vw - var(--layout-width-gutter)); --layout-width: calc(70vw - var(--layout-width-gutter));
--layout-width-gutter: var(--gutter) * 8; --layout-width-gutter: var(--gutter) * 8;
--menu-border-width: 2px;
--menu-border: var(--menu-border-width) solid rgb(var(--gray-02));
/* breakpoint reference */ /* breakpoint reference */
/* can not be used in @media as of yet */ /* can not be used in @media as of yet */
--breakpoint-sm: 550px; --breakpoint-sm: 550px;

439
css/form.css
View File

@ -1,3 +1,4 @@
/* email, number, password, search, tel, text */
input[type="email"], input[type="email"],
input[type="number"], input[type="number"],
input[type="password"], input[type="password"],
@ -87,18 +88,6 @@ input[type="text"][disabled]:focus {
color: rgb(var(--form-input-text-disabled)); 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="email"]::placeholder,
input[type="number"]::placeholder, input[type="number"]::placeholder,
input[type="password"]::placeholder, input[type="password"]::placeholder,
@ -148,77 +137,27 @@ input[type="text"][disabled]:focus::placeholder {
color: rgb(var(--form-input-placeholder-disabled)); color: rgb(var(--form-input-placeholder-disabled));
} }
/* label */
label { label {
padding: 0.5em 0; padding: 0;
color: rgb(var(--form-label)); color: rgb(var(--form-label));
margin-bottom: 0; margin-bottom: 0;
font-size: 1em; font-size: 1em;
display: block; display: block;
} }
label:not(:only-child):not(:last-child) {
margin-bottom: 0.5em;
}
label[disabled] { label[disabled] {
color: rgb(var(--form-label-disabled)); color: rgb(var(--form-label-disabled));
} }
input[type="color"] { /* checkbox and radio */
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;
}
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { input[type="radio"] {
margin-bottom: 0;
position: absolute; position: absolute;
top: 0; top: 0;
left: 50%; left: 50%;
@ -239,17 +178,17 @@ input[type="radio"]+label {
color: rgb(var(--form-checkbox-radio-label)); color: rgb(var(--form-checkbox-radio-label));
font-size: 1em; font-size: 1em;
font-family: var(--font-regular); font-family: var(--font-regular);
min-height: 2.5em;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: 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="checkbox"]+label:before,
input[type="radio"]+label .label-icon { input[type="radio"]+label:before {
content: "";
margin-right: 0.5em; margin-right: 0.5em;
font-size: 1.5em; font-size: 1.5em;
line-height: 1; line-height: 1;
@ -272,15 +211,15 @@ input[type="radio"]:active+label {
color: rgb(var(--style-neutral-text)); color: rgb(var(--style-neutral-text));
} }
input[type="checkbox"]:focus+label .label-icon, input[type="checkbox"]:focus+label:before,
input[type="checkbox"]:hover+label .label-icon, input[type="checkbox"]:hover+label:before,
input[type="radio"]:focus+label .label-icon, input[type="radio"]:focus+label:before,
input[type="radio"]:hover+label .label-icon { input[type="radio"]:hover+label:before {
color: rgb(var(--style-neutral-text)); color: rgb(var(--style-neutral-text));
} }
input[type="checkbox"]:active+label .label-icon, input[type="checkbox"]:active+label:before,
input[type="radio"]:active+label .label-icon { input[type="radio"]:active+label:before {
color: rgb(var(--accent)); color: rgb(var(--accent));
transform: scale(0.9); transform: scale(0.9);
} }
@ -297,76 +236,35 @@ input[type="radio"]:not([disabled]):focus:checked+label {
color: rgb(var(--style-neutral-text)); color: rgb(var(--style-neutral-text));
} }
input[type="checkbox"]:checked+label .label-icon, input[type="checkbox"]:checked+label:before,
input[type="radio"]:checked+label .label-icon { input[type="radio"]:checked+label:before {
color: rgb(var(--accent)); color: rgb(var(--accent));
} }
input[type="checkbox"]:checked:focus+label .label-icon, input[type="checkbox"]:checked:focus+label:before,
input[type="radio"]:checked:focus+label .label-icon { input[type="radio"]:checked:focus+label:before {
transform: scale(1.2); 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="checkbox"][disabled]+label,
input[type="radio"][disabled]+label { input[type="radio"][disabled]+label {
color: rgb(var(--form-checkbox-radio-disabled-label)); color: rgb(var(--form-checkbox-radio-disabled-label));
cursor: default; cursor: default;
} }
input[type="checkbox"][disabled]+label .label-icon, input[type="checkbox"][disabled]+label:before,
input[type="radio"][disabled]+label .label-icon { input[type="radio"][disabled]+label:before {
color: rgb(var(--form-checkbox-radio-disabled-label)); color: rgb(var(--form-checkbox-radio-disabled-label));
cursor: default; cursor: default;
} }
input[type="checkbox"][disabled]:active+label .label-icon, input[type="checkbox"][disabled]:active+label:before,
input[type="radio"][disabled]:active+label .label-icon { input[type="radio"][disabled]:active+label:before {
transform: none; transform: none;
} }
input[type="checkbox"]+label .label-icon:before, input[type="checkbox"]+label:before,
input[type="radio"]+label .label-icon:before { input[type="radio"]+label:before {
font-family: "Icons" !important; font-family: "Icons" !important;
speak: none; speak: none;
font-style: normal; font-style: normal;
@ -375,27 +273,83 @@ input[type="radio"]+label .label-icon:before {
text-transform: none; text-transform: none;
} }
input[type="checkbox"]+label .label-icon:before { input[type="checkbox"]+label:before {
content: "\e835"; content: "\e835";
} }
input[type="checkbox"]:checked+label .label-icon:before { input[type="checkbox"]:checked+label:before {
content: "\e834"; content: "\e834";
} }
input[type="radio"]+label .label-icon:before { input[type="radio"]+label:before {
content: "\e836"; content: "\e836";
} }
input[type="radio"]:checked+label .label-icon:before { input[type="radio"]:checked+label:before {
content: "\e837"; content: "\e837";
} }
input[type="range"] { /* color */
/* background-color: rgb(var(--gray-08)); */ input[type="color"] {
background-color: transparent; background-color: transparent;
padding: 0; padding: 0;
margin: 0 0 1em 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)); color: rgb(var(--style-neutral-text));
font-size: 1em; font-size: 1em;
font-family: var(--font-regular); font-family: var(--font-regular);
@ -489,7 +443,7 @@ input[type="range"]::-webkit-slider-thumb:active {
} }
input[type="range"][disabled]::-webkit-slider-thumb { input[type="range"][disabled]::-webkit-slider-thumb {
border-color: rgb(var(--gray-08)); border-color: rgb(var(--gray-04));
cursor: default; cursor: default;
} }
@ -563,7 +517,7 @@ input[type="range"][disabled]::-moz-range-track {
} }
input[type="range"][disabled]::-moz-range-thumb { input[type="range"][disabled]::-moz-range-thumb {
border-color: rgb(var(--gray-08)); border-color: rgb(var(--gray-04));
cursor: default; cursor: default;
} }
@ -577,6 +531,177 @@ input[type="range"][disabled]::-moz-range-progress {
background-color: rgb(var(--gray-08)); 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 { .form-group {
margin: 0 0 1em 0; margin: 0 0 1em 0;
display: inline-flex; display: inline-flex;
@ -592,7 +717,8 @@ input[type="range"][disabled]::-moz-range-progress {
.form-group>input[type="password"], .form-group>input[type="password"],
.form-group>input[type="search"], .form-group>input[type="search"],
.form-group>input[type="tel"], .form-group>input[type="tel"],
.form-group>input[type="text"] { .form-group>input[type="text"],
.form-group>input[type="color"] {
margin: 0; margin: 0;
border-radius: 0; border-radius: 0;
} }
@ -611,7 +737,8 @@ input[type="range"][disabled]::-moz-range-progress {
.form-group>input[type="password"], .form-group>input[type="password"],
.form-group>input[type="search"], .form-group>input[type="search"],
.form-group>input[type="tel"], .form-group>input[type="tel"],
.form-group>input[type="text"] { .form-group>input[type="text"],
.form-group>input[type="color"] {
z-index: 1; z-index: 1;
} }
@ -620,7 +747,8 @@ input[type="range"][disabled]::-moz-range-progress {
.form-group>input[type="password"]:hover, .form-group>input[type="password"]:hover,
.form-group>input[type="search"]:hover, .form-group>input[type="search"]:hover,
.form-group>input[type="tel"]: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; 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"]:active,
.form-group>input[type="tel"]:focus, .form-group>input[type="tel"]:focus,
.form-group>input[type="text"]:active, .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; 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="password"]:first-child,
.form-group>input[type="search"]:first-child, .form-group>input[type="search"]:first-child,
.form-group>input[type="tel"]: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); 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="password"]:last-child,
.form-group>input[type="search"]:last-child, .form-group>input[type="search"]:last-child,
.form-group>input[type="tel"]: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; 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); 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; border-radius: 0 var(--radius) var(--radius) 0;
} }

4
css/icons.css
View File

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

14
css/menu.css
View File

@ -66,7 +66,7 @@
} }
.menu-item:not(:last-child) { .menu-item:not(:last-child) {
border-bottom: var(--line-width) solid rgb(var(--gray-02)); border-bottom: var(--menu-border);
} }
.menu-close { .menu-close {
@ -143,9 +143,9 @@
height: 100%; height: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
right: calc(-2em - calc(var(--line-width) / 2)); right: calc(-2em - calc(var(--menu-border-width) / 2));
border-radius: 1em; 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 { .menu-item:not(:nth-last-child(2)):not(:last-child):before {
@ -154,9 +154,9 @@
height: 0; height: 0;
position: absolute; position: absolute;
left: 0; left: 0;
bottom: calc(-2em - calc(var(--line-width) / 2)); bottom: calc(-2em - calc(var(--menu-border-width) / 2));
border-radius: 1em; border-radius: 1em;
border-bottom: var(--line-width) solid rgb(var(--gray-03)); border-bottom: var(--menu-border);
} }
.menu-item { .menu-item {
@ -191,7 +191,7 @@
top: 0; top: 0;
right: calc(-2em - calc(var(--line-width) / 2)); right: calc(-2em - calc(var(--line-width) / 2));
border-radius: 1em; 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 { .menu-item:not(:nth-last-child(2)):not(:last-child):before {
@ -206,6 +206,6 @@
left: 0; left: 0;
bottom: calc(-2em - calc(var(--line-width) / 2)); bottom: calc(-2em - calc(var(--line-width) / 2));
border-radius: 1em; 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="&#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="&#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="&#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" /> <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> </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>
<div class="header-item header-edit-add"> <div class="header-item header-edit-add">
<div class="form-group nested-button mb-0"> <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"> <input id="control-edit" class="control-edit" type="checkbox" tabindex="1">
<label for="control-edit" class="button input-label-button"> <label for="control-edit" class=" mb-0">Edit</label>
<div class="button-text">Edit</div>
</label>
</div> </div>
<button class="button control-add" tabindex="1"> <button class="button control-add" tabindex="1">
<span class="button-text">Add</span> <span class="button-text">Add</span>
@ -79,11 +77,9 @@
</div> </div>
</div> </div>
<div class="header-item header-accent"> <div class="header-item header-accent">
<div class="input-wrap"> <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" value="#00ff00" tabindex="1"> <input id="control-theme-accent-current" class="control-theme-accent-current" type="color" tabindex="1">
<label for="control-theme-accent-current" class="button input-label-button mb-0"> <label for="control-theme-accent-current">Accent</label>
<span class="button-text">Accent</span>
</label>
</div> </div>
</div> </div>
<div class="header-item header-menu"> <div class="header-item header-menu">
@ -125,22 +121,22 @@
<h1 class="menu-item-header-text">Greeting</h1> <h1 class="menu-item-header-text">Greeting</h1>
</div> </div>
<div class="menu-item-form"> <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"> <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>
<div class="form-indent"> <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"> <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>
<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"> <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>
<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"> <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> </div>
<hr> <hr>
<div class="input-wrap"> <div class="input-wrap">
@ -155,19 +151,19 @@
<h1 class="menu-item-header-text">Transitional words</h1> <h1 class="menu-item-header-text">Transitional words</h1>
</div> </div>
<div class="menu-item-form"> <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"> <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> <p class="input-helper small muted">Available when Date or Time is shown.</p>
</div> </div>
<div class="form-indent"> <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"> <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>
<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"> <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> </div>
</div> </div>
@ -177,63 +173,63 @@
<h1 class="menu-item-header-text">Clock</h1> <h1 class="menu-item-header-text">Clock</h1>
</div> </div>
<div class="menu-item-form"> <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"> <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>
<div class="form-indent"> <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"> <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>
<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"> <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> </div>
<hr> <hr>
</div> </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"> <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>
<div class="form-indent"> <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"> <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>
<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"> <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> </div>
<hr> <hr>
</div> </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"> <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>
<div class="form-indent"> <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"> <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>
<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"> <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>
</div> </div>
<hr> <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"> <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> </div>
<hr> <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"> <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>
<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"> <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> </div>
</div> </div>
@ -242,125 +238,125 @@
<h1 class="menu-item-header-text">Date</h1> <h1 class="menu-item-header-text">Date</h1>
</div> </div>
<div class="menu-item-form"> <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"> <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>
<div class="form-indent"> <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"> <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>
<div class="form-indent"> <div class="form-indent">
<label class="control-header-date-day-week-start-label">Start of the week</label> <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"> <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>
<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"> <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> <p class="input-helper small muted">Define what day "1" represents, either Monday or Sunday.</p>
</div> </div>
</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"> <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>
<div class="form-indent"> <div class="form-indent">
<label class="control-header-date-day-length-label">Word length</label> <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"> <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>
<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"> <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>
</div> </div>
<hr> <hr>
</div> </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"> <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>
<div class="form-indent"> <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"> <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>
<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"> <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>
<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"> <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> <p class="input-helper small muted">Display Date as 1st, 2nd, 3rd, 4th etc.</p>
</div> </div>
<hr> <hr>
</div> </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"> <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>
<div class="form-indent"> <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"> <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>
<div class="form-indent"> <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"> <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> <p class="input-helper small muted">Display Month as 1st, 2nd, 3rd, 4th etc.</p>
</div> </div>
</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"> <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>
<div class="form-indent"> <div class="form-indent">
<label class="control-header-date-month-length-label">Word length</label> <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"> <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>
<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"> <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>
</div> </div>
<hr> <hr>
</div> </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"> <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>
<div class="form-indent"> <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"> <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>
<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"> <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>
</div> </div>
<hr> <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"> <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> </div>
<hr> <hr>
<label class="control-header-date-format-label">Format</label> <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"> <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>
<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"> <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> </div>
</div> </div>
@ -369,20 +365,20 @@
<h1 class="menu-item-header-text">Search</h1> <h1 class="menu-item-header-text">Search</h1>
</div> </div>
<div class="menu-item-form"> <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"> <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>
<div class="form-indent"> <div class="form-indent">
<label class="control-header-search-width-style-label">Search box size</label> <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"> <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> <p class="input-helper small muted">Search box will grow to best fit available space.</p>
</div> </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"> <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>
<div class="form-indent"> <div class="form-indent">
<div class="input-wrap"> <div class="input-wrap">
@ -392,32 +388,32 @@
</div> </div>
</div> </div>
<hr> <hr>
<div class="checkbox-wrap"> <div class="input-wrap">
<input id="control-header-search-focus" class="control-header-search-focus" type="checkbox" tabindex="1"> <input id="control-header-search-focus" class="control-header-search-focus" type="checkbox" tabindex="1">
<label for="control-header-search-focus"><span class="label-icon"></span>Focus on load/refresh</label> <label for="control-header-search-focus">Focus on load/refresh</label>
<p class="input-helper small muted">May not work in Chrome.</p> <p class="input-helper small muted">May not work in Chrome.</p>
</div> </div>
<hr> <hr>
<label class="control-header-search-engine-label">Engine</label> <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"> <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>
<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"> <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>
<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"> <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>
<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"> <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>
<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"> <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>
<div class="form-indent"> <div class="form-indent">
<div class="input-wrap"> <div class="input-wrap">
@ -433,17 +429,17 @@
</div> </div>
<hr> <hr>
<label class="control-header-search-text-align-label">Text align</label> <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"> <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>
<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"> <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>
<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"> <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> </div>
</div> </div>
@ -453,13 +449,13 @@
<h1 class="menu-item-header-text">Buttons</h1> <h1 class="menu-item-header-text">Buttons</h1>
</div> </div>
<div class="menu-item-form"> <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"> <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>
<div class="checkbox-wrap"> <div class="input-wrap">
<input id="control-header-accent-show" class="control-header-accent-show" type="checkbox" tabindex="1"> <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> </div>
</div> </div>
@ -468,17 +464,17 @@
<h1 class="menu-item-header-text">Horizontal Alignment</h1> <h1 class="menu-item-header-text">Horizontal Alignment</h1>
</div> </div>
<div class="menu-item-form"> <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"> <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>
<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"> <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>
<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"> <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> <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>
</div> </div>
@ -488,17 +484,17 @@
<h1 class="menu-item-header-text">Vertical Alignment</h1> <h1 class="menu-item-header-text">Vertical Alignment</h1>
</div> </div>
<div class="menu-item-form"> <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"> <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>
<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"> <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>
<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"> <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> <p class="input-helper small muted">Available when Bookmarks are not shown.</p>
</div> </div>
</div> </div>
@ -508,19 +504,19 @@
<h1 class="menu-item-header-text">Background Shade</h1> <h1 class="menu-item-header-text">Background Shade</h1>
</div> </div>
<div class="menu-item-form"> <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"> <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>
<div class="form-indent"> <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"> <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> <p class="input-helper small muted">Useful for when a Background Image is shown.</p>
</div> </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"> <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> <p class="input-helper small muted">The page will not scroll if Bookmarks are not shown.</p>
</div> </div>
<hr> <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"> <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> </div>
<hr> <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"> <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>
<div class="form-indent"> <div class="form-indent">
<div class="input-wrap"> <div class="input-wrap">
@ -548,9 +544,9 @@
</div> </div>
</div> </div>
<hr> <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"> <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>
<div class="form-indent"> <div class="form-indent">
<div class="input-wrap"> <div class="input-wrap">
@ -569,27 +565,27 @@
<h1 class="menu-item-header-text">Bookmarks</h1> <h1 class="menu-item-header-text">Bookmarks</h1>
</div> </div>
<div class="menu-item-form"> <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"> <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>
<div class="form-indent"> <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"> <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>
<div class="checkbox-wrap"> <div class="input-wrap">
<input id="control-bookmarks-url-show" class="control-bookmarks-url-show" type="checkbox" tabindex="1"> <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>
<div class="form-indent"> <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"> <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>
<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"> <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> </div>
</div> </div>
@ -600,9 +596,9 @@
<h1 class="menu-item-header-text">Open</h1> <h1 class="menu-item-header-text">Open</h1>
</div> </div>
<div class="menu-item-form"> <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"> <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> </div>
</div> </div>
@ -611,13 +607,13 @@
<h1 class="menu-item-header-text">Style</h1> <h1 class="menu-item-header-text">Style</h1>
</div> </div>
<div class="menu-item-form"> <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"> <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>
<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"> <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> </div>
</div> </div>
@ -626,17 +622,17 @@
<h1 class="menu-item-header-text">Sort</h1> <h1 class="menu-item-header-text">Sort</h1>
</div> </div>
<div class="menu-item-form"> <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"> <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>
<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"> <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>
<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"> <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> </div>
</div> </div>
@ -648,13 +644,13 @@
<h1 class="menu-item-header-text">Style</h1> <h1 class="menu-item-header-text">Style</h1>
</div> </div>
<div class="menu-item-form"> <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"> <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>
<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"> <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> <p class="input-helper small muted">Accent colour may need to be changed to best fit the Theme Style.</p>
</div> </div>
</div> </div>
@ -664,30 +660,30 @@
<h1 class="menu-item-header-text">Accent</h1> <h1 class="menu-item-header-text">Accent</h1>
</div> </div>
<div class="menu-item-form"> <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"> <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>
<div class="form-indent"> <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"> <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>
<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"> <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>
<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"> <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>
<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"> <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>
<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"> <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> </div>
<hr> <hr>
<div class="button-wrap"> <div class="button-wrap">
@ -715,9 +711,9 @@
<h1 class="menu-item-header-text">Page</h1> <h1 class="menu-item-header-text">Page</h1>
</div> </div>
<div class="menu-item-form"> <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"> <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> </div>
<hr> <hr>
<div class="input-wrap"> <div class="input-wrap">
@ -734,9 +730,9 @@
<h1 class="menu-item-header-text">Image</h1> <h1 class="menu-item-header-text">Image</h1>
</div> </div>
<div class="menu-item-form"> <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"> <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>
<div class="form-indent"> <div class="form-indent">
<div class="input-wrap"> <div class="input-wrap">

212
js/bookmarks.js
View File

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

8
js/control.js
View File

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

126
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-letter").value = currentBookmark.letter;
form.querySelector(".link-form-input-name").value = currentBookmark.name; form.querySelector(".link-form-input-name").value = currentBookmark.name;
form.querySelector(".link-form-input-url").value = currentBookmark.url; 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({ modal.render({
heading: "Edit " + currentBookmark.name, heading: "Edit " + currentBookmark.name,
action: function() { action: function() {
@ -82,7 +87,19 @@ var link = (function() {
letter: options.form.querySelector(".link-form-input-letter").value, letter: options.form.querySelector(".link-form-input-letter").value,
name: options.form.querySelector(".link-form-input-name").value, name: options.form.querySelector(".link-form-input-name").value,
url: options.form.querySelector(".link-form-input-url").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); bookmarks.add(newBookmarkData);
}, },
@ -90,6 +107,17 @@ var link = (function() {
options.bookmarkData.letter = options.form.querySelector(".link-form-input-letter").value; options.bookmarkData.letter = options.form.querySelector(".link-form-input-letter").value;
options.bookmarkData.name = options.form.querySelector(".link-form-input-name").value; options.bookmarkData.name = options.form.querySelector(".link-form-input-name").value;
options.bookmarkData.url = options.form.querySelector(".link-form-input-url").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({ bookmarks.edit({
bookmarkData: options.bookmarkData, bookmarkData: options.bookmarkData,
timeStamp: options.bookmarkData.timeStamp timeStamp: options.bookmarkData.timeStamp
@ -224,7 +252,7 @@ var link = (function() {
value: "text" value: "text"
}, { }, {
key: "class", key: "class",
value: "link-form-input-url mb-0" value: "link-form-input-url"
}, { }, {
key: "id", key: "id",
value: "url" value: "url"
@ -248,25 +276,111 @@ var link = (function() {
value: "false" 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(letterLabel);
fieldset.appendChild(letterInput); fieldset.appendChild(letterInput);
fieldset.appendChild(nameLabel); fieldset.appendChild(nameLabel);
fieldset.appendChild(nameInput); fieldset.appendChild(nameInput);
fieldset.appendChild(urlLabel); fieldset.appendChild(urlLabel);
fieldset.appendChild(urlInput); 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); form.appendChild(fieldset);
return form; return form;
}; };
var _makeLink = function(data) { var _makeLink = function(data) {
var linkItem = helper.makeNode({ var linkItemOptions = {
tag: "div", tag: "div",
attr: [{ attr: [{
key: "class", key: "class",
value: "link-item" value: "link-item"
}] }]
};
if (data.accent.override) {
linkItemOptions.attr.push({
key: "style",
value: "--accent: " + data.accent.color.r + ", " + data.accent.color.g + ", " + data.accent.color.b
}); });
var linkOptions = { };
var linkItem = helper.makeNode(linkItemOptions);
var linkPanelFrontOptions = {
tag: "a", tag: "a",
attr: [{ attr: [{
key: "class", key: "class",
@ -280,12 +394,12 @@ var link = (function() {
}] }]
}; };
if (state.get().bookmarks.newTab) { if (state.get().bookmarks.newTab) {
linkOptions.attr.push({ linkPanelFrontOptions.attr.push({
key: "target", key: "target",
value: "_blank" value: "_blank"
}); });
}; };
var linkPanelFront = helper.makeNode(linkOptions); var linkPanelFront = helper.makeNode(linkPanelFrontOptions);
var linkPanelBack = helper.makeNode({ var linkPanelBack = helper.makeNode({
tag: "div", tag: "div",
attr: [{ attr: [{

19
js/update.js
View File

@ -304,6 +304,21 @@ var update = (function() {
return data; 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) { // var _update_300 = function(data) {
// data.version = 3.00; // data.version = 3.00;
// return data; // return data;
@ -390,6 +405,10 @@ var update = (function() {
console.log("\t= running update 2.21.0"); console.log("\t= running update 2.21.0");
data = _update_2210(data); 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 // if no update is needed
// version bump // version bump

2
js/version.js
View File

@ -1,7 +1,7 @@
var version = (function() { var version = (function() {
// version is normally bumped when the state needs changing or any new functionality is added // 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 compare = function(a, b) {
var pa = a.split("."); var pa = a.split(".");