extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-08-17 09:11:28 +02:00
Code Issues Packages Projects Releases Wiki Activity

[feature] add size controls to header items

Browse Source
This commit is contained in:
Kombie
2019-06-11 10:54:10 +01:00
committed by GitHub
parent 3fbbc5b9ce
commit 90fa411de3
27 changed files with 679 additions and 424 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
css/auto-suggest.css
View File

@ -13,7 +13,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
max-height: 40vh; max-height: 40vh;
border-radius: var(--radius); border-radius: var(--theme-radius);
overflow-y: auto; overflow-y: auto;
z-index: var(--z-index-auto-suggest-list); z-index: var(--z-index-auto-suggest-list);
display: flex; display: flex;
@ -35,7 +35,7 @@
border-width: var(--form-input-border); border-width: var(--form-input-border);
border-style: solid; border-style: solid;
border-color: transparent; border-color: transparent;
border-radius: var(--radius); border-radius: var(--theme-radius);
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
@ -64,7 +64,7 @@
color: rgb(var(--form-input-text-focus)); color: rgb(var(--form-input-text-focus));
outline: none; outline: none;
text-decoration: none; text-decoration: none;
box-shadow: 0 0 0 var(--line-width) rgb(var(--accent)), 0 0 0 calc(var(--line-width) * 2) rgba(var(--accent), 0.25); box-shadow: 0 0 0 var(--line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--line-width) * 2) rgba(var(--theme-accent), 0.25);
} }
.auto-suggest-link:active { .auto-suggest-link:active {

2
css/background.css
View File

@ -26,7 +26,7 @@
} }
.background-accent { .background-accent {
background-color: rgba(var(--accent), var(--background-accent-opacity)); background-color: rgba(var(--theme-accent), var(--background-accent-opacity));
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;

64
css/base.css
View File

@ -1,5 +1,5 @@
:root { :root {
--accent: 250, 130, 0; --root-font-size: 14px;
--black: 0, 0, 0; --black: 0, 0, 0;
--white: 255, 255, 255; --white: 255, 255, 255;
--shade-01: 38, 40, 49; --shade-01: 38, 40, 49;
@ -45,40 +45,33 @@
--form-checkbox-radio-chcked-label: var(--gray-16); --form-checkbox-radio-chcked-label: var(--gray-16);
--form-checkbox-radio-disabled-label: var(--gray-04); --form-checkbox-radio-disabled-label: var(--gray-04);
--form-range-thumb: var(--gray-12); --form-range-thumb: var(--gray-12);
--root-font-size: 14px; --theme-accent: 250, 130, 0;
--radius: 0.2em; --theme-radius: 0.2rem;
--line-width: 0.2em; --line-width: 0.2em;
--background: rgb(var(--gray-01)); --background: rgb(var(--gray-01));
--gutter: 0.5rem; --gutter: 0.5rem;
--animation-speed-fast: 0.2s;
--animation-speed-medium: 0.4s;
--animation-speed-slow: 0.6s;
--font-regular: "Open Sans Regular", sans-serif; --font-regular: "Open Sans Regular", sans-serif;
--font-bold: "Open Sans Bold", sans-serif; --font-bold: "Open Sans Bold", sans-serif;
--font-light: "Open Sans Light", sans-serif; --font-light: "Open Sans Light", sans-serif;
--font-fjalla: "Fjalla One Regular", sans-serif; --font-fjalla: "Fjalla One Regular", sans-serif;
--z-index-background: 1000;
--z-index-link: 2000;
--z-index-header: 3000;
--z-index-tip: 4000;
--z-container-edge: 5000;
--z-index-shade: 6000;
--z-index-modal: 7000;
--z-index-menu: 8000;
--z-index-auto-suggest-list: 8000;
--z-index-edge: 9000;
--header-area-width: 100%; --header-area-width: 100%;
--header-shade-color: transparent; --header-shade-color: transparent;
--header-shade-opacity: none; --header-shade-opacity: none;
--header-search-width: 0%; --header-search-width: 0%;
--header-padding-top: calc(var(--line-width) * var(--header-padding-multiplier-top)); --header-padding-top: calc(var(--line-width) * var(--header-padding-top-multiplier));
--header-padding-bottom: calc(var(--line-width) * var(--header-padding-multiplier-bottom)); --header-padding-bottom: calc(var(--line-width) * var(--header-padding-bottom-multiplier));
--header-padding-multiplier-top: 4; --header-padding-top-multiplier: 4;
--header-padding-multiplier-bottom: 4; --header-padding-bottom-multiplier: 4;
--header-border-width-top: calc(var(--line-width) * var(--header-border-width-multiplier-top)); --header-border-width-top: calc(var(--line-width) * var(--header-border-width-top-multiplier));
--header-border-width-bottom: calc(var(--line-width) * var(--header-border-width-multiplier-bottom)); --header-border-width-bottom: calc(var(--line-width) * var(--header-border-width-bottom-multiplier));
--header-border-width-multiplier-top: 1; --header-border-width-top-multiplier: 1;
--header-border-width-multiplier-bottom: 1; --header-border-width-bottom-multiplier: 1;
--header-date-size: 1em;
--header-clock-size: 1em;
--header-search-size: 1em;
--header-button-size: 1em;
--header-greeting-size: 1em;
--header-transitional-size: 1em;
--link-area-width: 100%; --link-area-width: 100%;
--link-area-gutter-multiplier: 2; --link-area-gutter-multiplier: 2;
--link-item-size: 1em; --link-item-size: 1em;
@ -90,13 +83,24 @@
--background-accent-opacity: 0; --background-accent-opacity: 0;
--background-blur: 0; --background-blur: 0;
--layout-width: 80%; --layout-width: 80%;
--menu-border: calc(var(--line-width) * 1) solid rgb(var(--gray-03)); --animation-speed-fast: 0.2s;
--animation-speed-medium: 0.4s;
--animation-speed-slow: 0.6s;
--shadow-small: 0 2px 1px rgba(0, 0, 0, 0.1), 0 3px 2px rgba(0, 0, 0, 0.1); --shadow-small: 0 2px 1px rgba(0, 0, 0, 0.1), 0 3px 2px rgba(0, 0, 0, 0.1);
--shadow-medium: 0 4px 10px rgba(0, 0, 0, 0.1), 0 6px 15px rgba(0, 0, 0, 0.1); --shadow-medium: 0 4px 10px rgba(0, 0, 0, 0.1), 0 6px 15px rgba(0, 0, 0, 0.1);
--shadow-large: 0 4px 10px rgba(0, 0, 0, 0.1), 0 6px 30px rgba(0, 0, 0, 0.1); --shadow-large: 0 4px 10px rgba(0, 0, 0, 0.1), 0 6px 30px rgba(0, 0, 0, 0.1);
--shadow-small-inset: inset 0 1px 1px rgba(0, 0, 0, 0.05); --shadow-small-inset: inset 0 1px 1px rgba(0, 0, 0, 0.05);
--shadow-medium-inset: inset 0 2px 2px rgba(0, 0, 0, 0.1); --shadow-medium-inset: inset 0 2px 2px rgba(0, 0, 0, 0.1);
--shadow-large-inset: inset 0 3px 3px rgba(0, 0, 0, 0.15); --shadow-large-inset: inset 0 3px 3px rgba(0, 0, 0, 0.15);
--z-index-background: 1000;
--z-index-link: 2000;
--z-index-header: 3000;
--z-index-tip: 4000;
--z-index-shade: 5000;
--z-index-modal: 6000;
--z-index-menu: 7000;
--z-index-auto-suggest-list: 8000;
--z-index-edge: 9000;
/* 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;
@ -109,15 +113,15 @@
:root.is-link-style-block { :root.is-link-style-block {
--link-item-width: 11em; --link-item-width: 11em;
--link-item-height: 10em; --link-item-height: 10em;
--url-height: 20%; --link-item-url-height: 20%;
--edit-height: 30%; --link-item-edit-height: 30%;
} }
:root.is-link-style-list { :root.is-link-style-list {
--link-item-width: 20em; --link-item-width: 20em;
--link-item-height: 4em; --link-item-height: 4em;
--url-height: 30%; --link-item-url-height: 30%;
--edit-height: 50%; --link-item-edit-height: 50%;
} }
@media (min-width: 700px) { @media (min-width: 700px) {
@ -127,7 +131,7 @@
} }
::selection { ::selection {
background-color: rgb(var(--accent)); background-color: rgb(var(--theme-accent));
color: rgb(var(--white)); color: rgb(var(--white));
} }

8
css/button.css
View File

@ -16,13 +16,13 @@ input[type="submit"] {
border-bottom-width: var(--line-width); border-bottom-width: var(--line-width);
border-style: solid; border-style: solid;
border-color: transparent; border-color: transparent;
border-radius: var(--radius); border-radius: var(--theme-radius);
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
box-shadow: none; box-shadow: none;
transition: all var(--animation-speed-fast) ease-in-out; transition: background-color var(--animation-speed-fast) ease-in-out, color var(--animation-speed-fast) ease-in-out, border var(--animation-speed-fast) ease-in-out;
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
@ -51,7 +51,7 @@ input[type="button"]:active,
input[type="reset"]:active, input[type="reset"]:active,
input[type="submit"]:active { input[type="submit"]:active {
background-color: rgb(var(--gray-04)); background-color: rgb(var(--gray-04));
border-bottom-color: rgb(var(--accent)); border-bottom-color: rgb(var(--theme-accent));
color: rgb(var(--button-text-active)); color: rgb(var(--button-text-active));
transition: none; transition: none;
} }
@ -83,7 +83,7 @@ button [class*=" icon-"],
} }
.button.active { .button.active {
border-bottom-color: rgb(var(--accent)); border-bottom-color: rgb(var(--theme-accent));
color: rgb(var(--button-text-active)); color: rgb(var(--button-text-active));
} }

4
css/clock.css
View File

@ -1,7 +1,7 @@
.clock { .clock {
margin: 0; margin: 0;
padding: 0; padding: 0;
border-radius: var(--radius); border-radius: var(--theme-radius);
font-size: 1em; font-size: 1em;
font-family: var(--font-fjalla); font-family: var(--font-fjalla);
color: rgb(var(--style-neutral-text)); color: rgb(var(--style-neutral-text));
@ -39,7 +39,7 @@
.clock-separator { .clock-separator {
justify-content: center; justify-content: center;
color: rgb(var(--accent)); color: rgb(var(--theme-accent));
} }
.clock-hours, .clock-hours,

4
css/date.css
View File

@ -1,7 +1,7 @@
.date { .date {
margin: 0; margin: 0;
padding: 0; padding: 0;
border-radius: var(--radius); border-radius: var(--theme-radius);
font-size: 1em; font-size: 1em;
font-family: var(--font-fjalla); font-family: var(--font-fjalla);
color: rgb(var(--style-neutral-text)); color: rgb(var(--style-neutral-text));
@ -39,7 +39,7 @@
.date-separator { .date-separator {
justify-content: center; justify-content: center;
color: rgb(var(--accent)); color: rgb(var(--theme-accent));
} }
.date-date, .date-date,

6
css/edge.css
View File

@ -1,13 +1,13 @@
.edge { .edge {
background-color: rgba(var(--accent), 0.10); background-color: rgba(var(--theme-accent), 0.10);
width: 0; width: 0;
height: 0; height: 0;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
opacity: 0; opacity: 0;
border-radius: calc(var(--radius) * 2); border-radius: var(--theme-radius);
box-shadow: inset 0 0 0 var(--line-width) rgb(var(--accent)), inset 0 0 0 calc(var(--line-width) * 2) rgba(var(--accent), 0.25), inset 0 0 0 calc(var(--line-width) * 3) rgba(var(--accent), 0.25); box-shadow: inset 0 0 0 var(--line-width) rgb(var(--theme-accent)), inset 0 0 0 calc(var(--line-width) * 2) rgba(var(--theme-accent), 0.25), inset 0 0 0 calc(var(--line-width) * 3) rgba(var(--theme-accent), 0.25);
z-index: var(--z-index-edge); z-index: var(--z-index-edge);
pointer-events: none; pointer-events: none;
transition: opacity var(--animation-speed-fast) ease-in-out; transition: opacity var(--animation-speed-fast) ease-in-out;

48
css/form.css
View File

@ -17,7 +17,7 @@ input[type="text"] {
border-width: var(--form-input-border); border-width: var(--form-input-border);
border-style: solid; border-style: solid;
border-color: transparent; border-color: transparent;
border-radius: var(--radius); border-radius: var(--theme-radius);
cursor: text; cursor: text;
transition: background-color var(--animation-speed-fast) ease-in-out, color var(--animation-speed-fast) ease-in-out, border-color var(--animation-speed-fast) ease-in-out, box-shadow var(--animation-speed-fast) ease-in-out; transition: background-color var(--animation-speed-fast) ease-in-out, color var(--animation-speed-fast) ease-in-out, border-color var(--animation-speed-fast) ease-in-out, box-shadow var(--animation-speed-fast) ease-in-out;
-moz-appearance: textfield; -moz-appearance: textfield;
@ -55,7 +55,7 @@ input[type="text"]:focus {
color: rgb(var(--form-input-text-focus)); color: rgb(var(--form-input-text-focus));
outline: none; outline: none;
z-index: 2; z-index: 2;
box-shadow: 0 0 0 var(--line-width) rgb(var(--accent)), 0 0 0 calc(var(--line-width) * 2) rgba(var(--accent), 0.25); box-shadow: 0 0 0 var(--line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--line-width) * 2) rgba(var(--theme-accent), 0.25);
} }
input[type="email"][disabled], input[type="email"][disabled],
@ -93,7 +93,7 @@ input[type="search"]::placeholder,
input[type="tel"]::placeholder, input[type="tel"]::placeholder,
input[type="text"]::placeholder { input[type="text"]::placeholder {
color: rgb(var(--form-input-placeholder)); color: rgb(var(--form-input-placeholder));
transition: all var(--animation-speed-fast) ease-in-out; transition: color var(--animation-speed-fast) ease-in-out;
} }
input[type="email"]:hover::placeholder, input[type="email"]:hover::placeholder,
@ -218,7 +218,7 @@ input[type="radio"]:hover+label:before {
input[type="checkbox"]:active+label:before, input[type="checkbox"]:active+label:before,
input[type="radio"]:active+label:before { input[type="radio"]:active+label:before {
color: rgb(var(--accent)); color: rgb(var(--theme-accent));
transform: scale(0.9); transform: scale(0.9);
} }
@ -236,7 +236,7 @@ input[type="radio"]:not([disabled]):focus:checked+label {
input[type="checkbox"]:checked+label:before, input[type="checkbox"]:checked+label:before,
input[type="radio"]:checked+label:before { input[type="radio"]:checked+label:before {
color: rgb(var(--accent)); color: rgb(var(--theme-accent));
} }
input[type="checkbox"]:checked:focus+label:before, input[type="checkbox"]:checked:focus+label:before,
@ -298,7 +298,7 @@ input[type="color"] {
border-width: 0; border-width: 0;
border-style: solid; border-style: solid;
border-color: transparent; border-color: transparent;
border-radius: var(--radius); border-radius: var(--theme-radius);
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
transition: border-color var(--animation-speed-fast) ease-in-out, box-shadow var(--animation-speed-fast) ease-in-out; transition: border-color var(--animation-speed-fast) ease-in-out, box-shadow var(--animation-speed-fast) ease-in-out;
@ -354,7 +354,7 @@ input[type="range"] {
height: 2em; height: 2em;
width: 100%; width: 100%;
border: 0; border: 0;
border-radius: var(--radius); border-radius: var(--theme-radius);
cursor: pointer; cursor: pointer;
position: relative; position: relative;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@ -370,7 +370,7 @@ input[type="range"]:before {
height: var(--line-width); height: var(--line-width);
width: 100%; width: 100%;
border: 0; border: 0;
border-radius: var(--radius); border-radius: var(--theme-radius);
transform: translate(0, -50%); transform: translate(0, -50%);
transition: all var(--animation-speed-fast) ease-in-out; transition: all var(--animation-speed-fast) ease-in-out;
} }
@ -407,7 +407,7 @@ input[type="range"]::-webkit-slider-thumb {
padding: 0; padding: 0;
border-width: var(--line-width); border-width: var(--line-width);
border-style: solid; border-style: solid;
border-color: rgb(var(--accent)); border-color: rgb(var(--theme-accent));
border-radius: 100%; border-radius: 100%;
position: relative; position: relative;
height: 1em; height: 1em;
@ -459,7 +459,7 @@ input[type="range"]::-moz-range-track {
height: var(--line-width); height: var(--line-width);
width: 100%; width: 100%;
border: 0; border: 0;
border-radius: var(--radius); border-radius: var(--theme-radius);
transition: all var(--animation-speed-fast) ease-in-out; transition: all var(--animation-speed-fast) ease-in-out;
-webkit-appearance: none; -webkit-appearance: none;
} }
@ -471,7 +471,7 @@ input[type="range"]::-moz-range-thumb {
padding: 0; padding: 0;
border-width: var(--line-width); border-width: var(--line-width);
border-style: solid; border-style: solid;
border-color: rgb(var(--accent)); border-color: rgb(var(--theme-accent));
border-radius: 100%; border-radius: 100%;
position: relative; position: relative;
height: 1em; height: 1em;
@ -505,9 +505,9 @@ input[type="range"]::-moz-range-thumb:active {
} }
input[type="range"]::-moz-range-progress { input[type="range"]::-moz-range-progress {
background-color: rgb(var(--accent)); background-color: rgb(var(--theme-accent));
height: calc(var(--line-width) * 1.5); height: calc(var(--line-width) * 1.5);
border-radius: var(--radius); border-radius: var(--theme-radius);
} }
input[type="range"][disabled]::-moz-range-track { input[type="range"][disabled]::-moz-range-track {
@ -526,7 +526,7 @@ input[type="range"][disabled]:focus::-moz-range-thumb {
} }
input[type="range"][disabled]::-moz-range-progress { input[type="range"][disabled]::-moz-range-progress {
background-color: rgb(var(--gray-08)); background-color: rgb(var(--gray-04));
} }
/* input helper */ /* input helper */
@ -579,13 +579,13 @@ input[type="range"][disabled]~.input-helper {
border-bottom-width: var(--line-width); border-bottom-width: var(--line-width);
border-style: solid; border-style: solid;
border-color: transparent; border-color: transparent;
border-radius: var(--radius); border-radius: var(--theme-radius);
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
box-shadow: none; box-shadow: none;
transition: all var(--animation-speed-fast) ease-in-out; transition: background-color var(--animation-speed-fast) ease-in-out, color var(--animation-speed-fast) ease-in-out, border var(--animation-speed-fast) ease-in-out;
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
@ -608,7 +608,7 @@ input[type="range"][disabled]~.input-helper {
.input-button input[type="radio"]:active+label, .input-button input[type="radio"]:active+label,
.input-button input[type="color"]:active+label { .input-button input[type="color"]:active+label {
background-color: rgb(var(--gray-04)); background-color: rgb(var(--gray-04));
border-bottom-color: rgb(var(--accent)); border-bottom-color: rgb(var(--theme-accent));
color: rgb(var(--button-text-active)); color: rgb(var(--button-text-active));
transition: none; transition: none;
} }
@ -617,7 +617,7 @@ input[type="range"][disabled]~.input-helper {
.input-button input[type="radio"]:checked+label, .input-button input[type="radio"]:checked+label,
.input-button input[type="color"]:checked+label { .input-button input[type="color"]:checked+label {
background-color: rgb(var(--gray-04)); background-color: rgb(var(--gray-04));
border-bottom-color: rgb(var(--accent)); border-bottom-color: rgb(var(--theme-accent));
color: rgb(var(--button-text-active)); color: rgb(var(--button-text-active));
transition: none; transition: none;
} }
@ -666,7 +666,7 @@ input[type="range"][disabled]~.input-helper {
.input-color-dot-accent input[type="color"], .input-color-dot-accent input[type="color"],
.input-color-dot-accent input[type="color"]:hover, .input-color-dot-accent input[type="color"]:hover,
.input-color-dot-accent input[type="color"]:focus { .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); box-shadow: 0 0 0.25em 0 rgba(var(--theme-accent), 0.6), 0 0 0.5em 0 rgba(var(--theme-accent), 0.4);
} }
.input-color-dot input[type="color"]+label { .input-color-dot input[type="color"]+label {
@ -718,7 +718,7 @@ input[type="range"][disabled]~.input-helper {
border-bottom-width: var(--line-width); border-bottom-width: var(--line-width);
border-style: solid; border-style: solid;
border-color: transparent; border-color: transparent;
border-radius: var(--radius); border-radius: var(--theme-radius);
transition: background-color var(--animation-speed-fast) ease-in-out, border-color var(--animation-speed-fast) ease-in-out; transition: background-color var(--animation-speed-fast) ease-in-out, border-color var(--animation-speed-fast) ease-in-out;
} }
@ -821,7 +821,7 @@ input[type="range"][disabled]~.input-helper {
.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 { .form-group>input[type="color"]:first-child {
border-radius: var(--radius) 0 0 var(--radius); border-radius: var(--theme-radius) 0 0 var(--theme-radius);
} }
.form-group>.form-group-text:last-child, .form-group>.form-group-text:last-child,
@ -834,7 +834,7 @@ input[type="range"][disabled]~.input-helper {
.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 { .form-group>input[type="color"]:last-child {
border-radius: 0 var(--radius) var(--radius) 0; border-radius: 0 var(--theme-radius) var(--theme-radius) 0;
} }
.form-group.nested-button * .button, .form-group.nested-button * .button,
@ -848,12 +848,12 @@ input[type="range"][disabled]~.input-helper {
.form-group.nested-button *:first-child input[type="checkbox"]+label, .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="radio"]+label,
.form-group.nested-button *:first-child input[type="color"]+label { .form-group.nested-button *:first-child input[type="color"]+label {
border-radius: var(--radius) 0 0 var(--radius); border-radius: var(--theme-radius) 0 0 var(--theme-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="checkbox"]+label,
.form-group.nested-button *:last-child input[type="radio"]+label, .form-group.nested-button *:last-child input[type="radio"]+label,
.form-group.nested-button *:last-child input[type="color"]+label { .form-group.nested-button *:last-child input[type="color"]+label {
border-radius: 0 var(--radius) var(--radius) 0; border-radius: 0 var(--theme-radius) var(--theme-radius) 0;
} }

2
css/greeting.css
View File

@ -1,7 +1,7 @@
.greeting { .greeting {
margin: 0; margin: 0;
padding: 0; padding: 0;
border-radius: var(--radius); border-radius: var(--theme-radius);
font-size: 1em; font-size: 1em;
font-family: var(--font-fjalla); font-family: var(--font-fjalla);
color: rgb(var(--style-neutral-text)); color: rgb(var(--style-neutral-text));

40
css/header.css
View File

@ -46,11 +46,11 @@
} }
.is-header-border-top-show .header-border { .is-header-border-top-show .header-border {
border-top: var(--header-border-width-top) solid rgb(var(--accent)); border-top: var(--header-border-width-top) solid rgb(var(--theme-accent));
} }
.is-header-border-bottom-show .header-border { .is-header-border-bottom-show .header-border {
border-bottom: var(--header-border-width-bottom) solid rgb(var(--accent)); border-bottom: var(--header-border-width-bottom) solid rgb(var(--theme-accent));
} }
.header-area { .header-area {
@ -109,19 +109,39 @@
position: relative; position: relative;
} }
.header-search { .is-header-search-style-auto .header-search {
width: var(--header-search-width);
}
.is-header-search-width-style-auto .header-search {
flex-grow: 1; flex-grow: 1;
min-width: 10em; min-width: 10em;
} }
.is-header-search-width-style-custom .header-search { .is-header-search-style-custom .header-search {
width: var(--header-search-width); width: var(--header-search-width);
} }
.header-date {
font-size: var(--header-date-size);
}
.header-clock {
font-size: var(--header-clock-size);
}
.header-search {
font-size: var(--header-search-size);
}
.header-button {
font-size: var(--header-button-size);
}
.header-greeting {
font-size: var(--header-greeting-size);
}
.header-transitional {
font-size: var(--header-transitional-size);
}
.header-date, .header-date,
.header-clock, .header-clock,
.header-search, .header-search,
@ -136,8 +156,8 @@
.is-header-search-show .header-search, .is-header-search-show .header-search,
.is-header-date-show .header-date, .is-header-date-show .header-date,
.is-header-clock-show .header-clock, .is-header-clock-show .header-clock,
.is-header-edit-add-show .header-edit-add, .is-header-button-edit-add-show .header-edit-add,
.is-header-accent-show .header-accent, .is-header-button-accent-show .header-accent,
.is-header-greeting-show .header-greeting, .is-header-greeting-show .header-greeting,
.is-header-transitional-show .header-transitional, .is-header-transitional-show .header-transitional,
.is-menu .header-menu { .is-menu .header-menu {

62
css/link.css
View File

@ -63,7 +63,7 @@
.link-panel-front { .link-panel-front {
background-color: rgb(var(--gray-02)); background-color: rgb(var(--gray-02));
border-radius: var(--radius); border-radius: var(--theme-radius);
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
@ -155,37 +155,44 @@
.is-link-url-show .link-item:focus .link-panel-front, .is-link-url-show .link-item:focus .link-panel-front,
.is-link-url-show .link-item:focus-within .link-panel-front, .is-link-url-show .link-item:focus-within .link-panel-front,
.is-link-url-show .link-item:hover .link-panel-front { .is-link-url-show .link-item:hover .link-panel-front {
height: calc(100% - var(--url-height)); height: calc(100% - var(--link-item-url-height));
} }
.link-panel-back { .link-panel-back {
background-color: rgb(var(--theme-accent));
border-radius: var(--theme-radius);
width: calc(100% - calc(var(--line-width) * 2));
height: calc(100% - calc(var(--line-width) * 2));
position: absolute;
top: var(--line-width);
left: var(--line-width);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
align-items: stretch; align-items: stretch;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 2; z-index: 2;
transition: height var(--animation-speed-fast) ease-in-out, top var(--animation-speed-fast) ease-in-out;
} }
.link-panel-back:before { .is-link-item-line-show .link-panel-back {
content: ""; height: calc(100% - var(--line-width));
background-color: rgb(var(--accent));
border-radius: var(--radius);
width: calc(100% - calc(var(--line-width) + var(--line-width)));
height: calc(100% - 0.25em);
position: absolute;
bottom: 0;
left: var(--line-width);
z-index: -1;
} }
.is-link-url-show:not(.is-link-item-line-show) .link-item:focus .link-panel-back,
.is-link-url-show:not(.is-link-item-line-show) .link-item:focus-within .link-panel-back,
.is-link-url-show:not(.is-link-item-line-show) .link-item:hover .link-panel-back {
top: calc(var(--line-width) * 2);
}
/* .is-link-item-line-show.is-link-url-show .link-item:focus .link-panel-back,
.is-link-item-line-show.is-link-url-show .link-item:focus-within .link-panel-back,
.is-link-item-line-show.is-link-url-show .link-item:hover .link-panel-back {
top: var(--line-width);
} */
.link-control { .link-control {
margin: 0; margin: 0;
padding: 0 var(--line-width); padding: 0;
height: 0; height: 0;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
@ -199,19 +206,18 @@
background-color: transparent; background-color: transparent;
margin-bottom: 0; margin-bottom: 0;
border: 0; border: 0;
padding-left: 0; padding: 0;
padding-right: 0;
color: rgb(var(--gray-02)); color: rgb(var(--gray-02));
flex-grow: 1; flex-grow: 1;
flex-basis: 50%; flex-basis: 50%;
} }
.link-control-item:first-child { .link-control-item:first-child {
border-radius: 0 0 0 var(--radius); border-radius: 0 0 0 var(--theme-radius);
} }
.link-control-item:last-child { .link-control-item:last-child {
border-radius: 0 0 var(--radius) 0 border-radius: 0 0 var(--theme-radius) 0
} }
.link-control-item:focus, .link-control-item:focus,
@ -255,7 +261,7 @@
.link-item:focus-within .link-url, .link-item:focus-within .link-url,
.link-item:focus .link-url, .link-item:focus .link-url,
.link-item:hover .link-url { .link-item:hover .link-url {
height: var(--url-height); height: var(--link-item-url-height);
} }
.link-url-text { .link-url-text {
@ -292,14 +298,14 @@
.link-display-letter { .link-display-letter {
font-family: var(--font-fjalla); font-family: var(--font-fjalla);
color: rgb(var(--accent)); color: rgb(var(--theme-accent));
line-height: 1; line-height: 1;
white-space: nowrap; white-space: nowrap;
transition: color var(--animation-speed-fast) ease-in-out; transition: color var(--animation-speed-fast) ease-in-out;
} }
.link-display-icon { .link-display-icon {
color: rgb(var(--accent)); color: rgb(var(--theme-accent));
transition: color var(--animation-speed-fast) ease-in-out; transition: color var(--animation-speed-fast) ease-in-out;
} }
@ -386,18 +392,18 @@
.is-link-edit .link-panel-front, .is-link-edit .link-panel-front,
.is-link-edit .link-item:hover .link-panel-front, .is-link-edit .link-item:hover .link-panel-front,
.is-link-edit .link-item:focus .link-panel-front { .is-link-edit .link-item:focus .link-panel-front {
height: calc(100% - var(--edit-height)); height: calc(100% - var(--link-item-edit-height));
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
} }
.is-link-edit.is-link-url-show .link-item:focus .link-panel-front, .is-link-edit.is-link-url-show .link-item:focus .link-panel-front,
.is-link-edit.is-link-url-show .link-item:focus-within .link-panel-front, .is-link-edit.is-link-url-show .link-item:focus-within .link-panel-front,
.is-link-edit.is-link-url-show .link-item:hover .link-panel-front { .is-link-edit.is-link-url-show .link-item:hover .link-panel-front {
height: calc(100% - var(--edit-height)); height: calc(100% - var(--link-item-edit-height));
} }
.is-link-edit .link-control { .is-link-edit .link-control {
height: var(--edit-height); height: var(--link-item-edit-height);
} }
.is-link-edit .link-item:hover .link-url, .is-link-edit .link-item:hover .link-url,

10
css/menu.css
View File

@ -20,8 +20,8 @@
} }
.menu-area { .menu-area {
background-color: rgb(var(--gray-01)); background-color: rgba(var(--gray-01), 0.95);
border-radius: var(--radius); border-radius: var(--theme-radius);
width: 100%; width: 100%;
max-height: 100%; max-height: 100%;
overflow-y: auto; overflow-y: auto;
@ -65,7 +65,7 @@
} }
.menu-item:not(:last-child) { .menu-item:not(:last-child) {
border-bottom: var(--menu-border); border-bottom: calc(var(--line-width) * 2) solid rgb(var(--gray-03));
} }
.menu-item-header { .menu-item-header {
@ -85,7 +85,7 @@
margin: 0; margin: 0;
padding-top: 0.75em; padding-top: 0.75em;
padding-bottom: 0.75em; padding-bottom: 0.75em;
border-radius: 0 var(--radius) 0 0; border-radius: 0 var(--theme-radius) 0 0;
} }
.menu-nav-button { .menu-nav-button {
@ -99,7 +99,7 @@
} }
.menu-nav-button:first-child { .menu-nav-button:first-child {
border-radius: var(--radius) 0 0 0; border-radius: var(--theme-radius) 0 0 0;
} }
.menu-nav-button [class^="icon-"], .menu-nav-button [class^="icon-"],

8
css/modal.css
View File

@ -38,7 +38,7 @@
.modal-body { .modal-body {
background-color: rgb(var(--gray-01)); background-color: rgb(var(--gray-01));
border-radius: var(--radius) var(--radius) 0 0; border-radius: var(--theme-radius) var(--theme-radius) 0 0;
padding: 2em; padding: 2em;
max-height: calc(90vh - 3.6666666667em); max-height: calc(90vh - 3.6666666667em);
overflow-y: auto; overflow-y: auto;
@ -59,7 +59,7 @@
background-color: rgb(var(--gray-01)); background-color: rgb(var(--gray-01));
position: relative; position: relative;
z-index: 2; z-index: 2;
border-radius: 0 0 var(--radius) var(--radius); border-radius: 0 0 var(--theme-radius) var(--theme-radius);
display: flex; display: flex;
} }
@ -73,9 +73,9 @@
} }
.modal-controls .modal-button:first-child { .modal-controls .modal-button:first-child {
border-radius: 0 0 0 var(--radius); border-radius: 0 0 0 var(--theme-radius);
} }
.modal-controls .modal-button:last-child { .modal-controls .modal-button:last-child {
border-radius: 0 0 var(--radius) 0 border-radius: 0 0 var(--theme-radius) 0
} }

4
css/shade.css
View File

@ -1,5 +1,5 @@
.shade { .shade {
background-color: rgba(var(--accent), 0.4); background-color: rgba(var(--theme-accent), 0.4);
position: fixed; position: fixed;
top: -1em; top: -1em;
left: -1em; left: -1em;
@ -14,5 +14,5 @@
} }
.is-edge:not(.is-background-image-show) .shade { .is-edge:not(.is-background-image-show) .shade {
background-color: rgba(var(--accent), 0.05); background-color: rgba(var(--theme-accent), 0.05);
} }

2
css/tip.css
View File

@ -47,7 +47,7 @@
padding: 0.5em 1em; padding: 0.5em 1em;
background-color: rgb(var(--gray-04)); background-color: rgb(var(--gray-04));
border: 0; border: 0;
border-radius: calc(var(--radius) * 2); border-radius: calc(var(--theme-radius) * 2);
color: rgb(var(--gray-18)); color: rgb(var(--gray-18));
font-size: 0.8em; font-size: 0.8em;
font-family: var(--font-regular); font-family: var(--font-regular);

2
css/transitional.css
View File

@ -1,7 +1,7 @@
.transitional { .transitional {
margin: 0; margin: 0;
padding: 0; padding: 0;
border-radius: var(--radius); border-radius: var(--theme-radius);
font-size: 1em; font-size: 1em;
font-family: var(--font-fjalla); font-family: var(--font-fjalla);
color: rgb(var(--gray-14)); color: rgb(var(--gray-14));

2
css/typography.css
View File

@ -53,7 +53,7 @@ p {
hr { hr {
border: 0; border: 0;
border-top: 1px solid rgb(var(--gray-02)); border-top: 1px solid rgb(var(--gray-02));
border-radius: var(--radius); border-radius: var(--theme-radius);
margin: 1em 0; margin: 1em 0;
clear: both; clear: both;
} }

94
index.html
View File

@ -69,24 +69,24 @@
<span class="icon-close"></span> <span class="icon-close"></span>
</button> </button>
</div> </div>
<div class="header-item header-edit-add"> <div class="header-item header-button header-edit-add">
<div class="form-group nested-button mb-0"> <div class="form-group nested-button mb-0">
<div class="input-wrap input-button input-hide py-0"> <div class="input-wrap input-button input-hide py-0">
<input id="control-edit" class="control-edit" type="checkbox" tabindex="1"> <input id="control-link-edit" class="control-link-edit" type="checkbox" tabindex="1">
<label for="control-edit" class=" mb-0">Edit</label> <label for="control-link-edit" class=" mb-0">Edit</label>
</div> </div>
<button class="button control-add" tabindex="1"> <button class="button control-link-add" tabindex="1">
<span class="button-text">Add</span> <span class="button-text">Add</span>
</button> </button>
</div> </div>
</div> </div>
<div class="header-item header-accent"> <div class="header-item header-button header-accent">
<div class="input-wrap input-button input-color-dot input-color-dot-accent py-0"> <div class="input-wrap input-button input-color-dot input-color-dot-accent py-0">
<input id="control-theme-accent-current" class="control-theme-accent-current" type="color" tabindex="1"> <input id="control-theme-accent-current" class="control-theme-accent-current" type="color" tabindex="1">
<label for="control-theme-accent-current">Accent</label> <label for="control-theme-accent-current">Accent</label>
</div> </div>
</div> </div>
<div class="header-item header-menu"> <div class="header-item header-button header-menu">
<button id="control-menu" class="control-menu button mb-0" tabindex="1"> <button id="control-menu" class="control-menu button mb-0" tabindex="1">
<span class="button-text"><span class="icon-settings"></span></span> <span class="button-text"><span class="icon-settings"></span></span>
</button> </button>
@ -253,6 +253,14 @@
<label for="control-header-greeting-name">Name</label> <label for="control-header-greeting-name">Name</label>
<input id="control-header-greeting-name" class="control-header-greeting-name mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Nickname, alias or superhero name" tabindex="1"> <input id="control-header-greeting-name" class="control-header-greeting-name mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Nickname, alias or superhero name" tabindex="1">
</div> </div>
<hr>
<div class="input-wrap">
<label for="control-header-greeting-size">Size</label>
<input id="control-header-greeting-size" class="control-header-greeting-size" type="range" min="20" max="500" value="0" step="20" tabindex="1">
</div>
<div class="button-wrap">
<button class="button control-header-greeting-size-default mb-0" type="button">Defaul greeting size</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -276,6 +284,14 @@
<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">"It's"</label> <label for="control-header-transitional-type-its">"It's"</label>
</div> </div>
<hr>
<div class="input-wrap">
<label for="control-header-transitional-size">Size</label>
<input id="control-header-transitional-size" class="control-header-transitional-size" type="range" min="20" max="500" value="0" step="20" tabindex="1">
</div>
<div class="button-wrap">
<button class="button control-header-transitional-size-default mb-0" type="button">Defaul transitional size</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -342,6 +358,14 @@
<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">AM/PM</label> <label for="control-header-clock-meridiem-show">AM/PM</label>
</div> </div>
<hr>
<div class="input-wrap">
<label for="control-header-clock-size">Size</label>
<input id="control-header-clock-size" class="control-header-clock-size" type="range" min="20" max="500" value="0" step="20" tabindex="1">
</div>
<div class="button-wrap">
<button class="button control-header-clock-size-default mb-0" type="button">Defaul clock size</button>
</div>
</div> </div>
</div> </div>
<div class="menu-item"> <div class="menu-item">
@ -469,6 +493,14 @@
<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">Month / Date</label> <label for="control-header-date-format-monthdate">Month / Date</label>
</div> </div>
<hr>
<div class="input-wrap">
<label for="control-header-date-size">Size</label>
<input id="control-header-date-size" class="control-header-date-size" type="range" min="20" max="500" value="0" step="20" tabindex="1">
</div>
<div class="button-wrap">
<button class="button control-header-date-size-default mb-0" type="button">Defaul date size</button>
</div>
</div> </div>
</div> </div>
<div class="menu-item"> <div class="menu-item">
@ -482,20 +514,21 @@
</div> </div>
<div class="form-indent"> <div class="form-indent">
<hr> <hr>
<label class="control-header-search-width-style-label">Search box size</label> <label class="control-header-search-style-label">Search box width</label>
<div class="input-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-style-auto" class="control-header-search-style-auto" type="radio" name="control-header-search-width" value="auto" tabindex="1">
<label for="control-header-search-width-style-auto">Auto</label> <label for="control-header-search-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="input-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-style-custom" class="control-header-search-style-custom" type="radio" name="control-header-search-width" value="custom" tabindex="1">
<label for="control-header-search-width-style-custom">Custom</label> <label for="control-header-search-style-custom">Custom</label>
<p class="input-helper small muted">Define how wide the Search box should be inside the Header Area.</p>
</div> </div>
<div class="form-indent"> <div class="form-indent">
<div class="input-wrap"> <div class="input-wrap">
<label for="control-header-search-width-custom">Width</label> <label for="control-header-search-width">Width</label>
<input id="control-header-search-width-custom" class="control-header-search-width-custom" type="range" min="10" max="100" value="0" tabindex="1"> <input id="control-header-search-width" class="control-header-search-width" type="range" min="10" max="100" value="0" tabindex="1">
</div> </div>
</div> </div>
<hr> <hr>
@ -552,6 +585,15 @@
<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">Right</label> <label for="control-header-search-text-align-right">Right</label>
</div> </div>
<hr>
<div class="input-wrap">
<label for="control-header-search-size">Size</label>
<input id="control-header-search-size" class="control-header-search-size" type="range" min="20" max="500" value="0" step="20" tabindex="1">
<p class="input-helper small muted">Only the Search box width control will change the Width of the Search box.</p>
</div>
<div class="button-wrap">
<button class="button control-header-search-size-default mb-0" type="button">Defaul search size</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -561,13 +603,21 @@
</div> </div>
<div class="menu-item-form"> <div class="menu-item-form">
<div class="input-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-button-edit-add-show" class="control-header-button-edit-add-show" type="checkbox" tabindex="1">
<label for="control-header-edit-add-show">Show Edit/Add</label> <label for="control-header-button-edit-add-show">Show Edit/Add</label>
</div> </div>
<hr> <hr>
<div class="input-wrap"> <div class="input-wrap">
<input id="control-header-accent-show" class="control-header-accent-show" type="checkbox" tabindex="1"> <input id="control-header-button-accent-show" class="control-header-button-accent-show" type="checkbox" tabindex="1">
<label for="control-header-accent-show">Show Accent</label> <label for="control-header-button-accent-show">Show Accent</label>
</div>
<hr>
<div class="input-wrap">
<label for="control-header-button-size">Size</label>
<input id="control-header-button-size" class="control-header-button-size" type="range" min="20" max="500" value="0" step="20" tabindex="1">
</div>
<div class="button-wrap">
<button class="button control-header-button-size-default mb-0" type="button">Defaul button size</button>
</div> </div>
</div> </div>
</div> </div>
@ -690,7 +740,7 @@
<hr> <hr>
<div class="input-wrap"> <div class="input-wrap">
<label for="control-link-item-size">Tile Size</label> <label for="control-link-item-size">Tile Size</label>
<input id="control-link-item-size" class="control-link-item-size" type="range" min="50" max="500" value="0" tabindex="1"> <input id="control-link-item-size" class="control-link-item-size" type="range" min="20" max="500" value="0" step="10" tabindex="1">
</div> </div>
<div class="button-wrap"> <div class="button-wrap">
<button class="button control-link-item-size-default mb-0" type="button">Defaul tile size</button> <button class="button control-link-item-size-default mb-0" type="button">Defaul tile size</button>
@ -855,6 +905,14 @@
<label for="control-theme-style-light">Light</label> <label for="control-theme-style-light">Light</label>
<p class="input-helper small muted">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p> <p class="input-helper small muted">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
</div> </div>
<hr>
<div class="input-wrap">
<label for="control-theme-radius">Radius</label>
<input id="control-theme-radius" class="control-theme-radius" type="range" min="0" max="300" value="0" step="20" tabindex="1">
</div>
<div class="button-wrap">
<button class="button control-theme-radius-default mb-0" type="button">Defaul radius size</button>
</div>
</div> </div>
</div> </div>
<div class="menu-item"> <div class="menu-item">

2
js/accent.js
View File

@ -3,7 +3,7 @@ var accent = (function() {
var render = function() { var render = function() {
var html = helper.e("html"); var html = helper.e("html");
var color = state.get().theme.accent.current; var color = state.get().theme.accent.current;
html.style.setProperty("--accent", color.r + ", " + color.g + ", " + color.b); html.style.setProperty("--theme-accent", color.r + ", " + color.g + ", " + color.b);
}; };
var random = function() { var random = function() {

287
js/control.js
View File

@ -8,13 +8,13 @@ var control = (function() {
page.update(); page.update();
} }
}, { }, {
element: helper.e(".control-add"), element: helper.e(".control-link-add"),
type: "button", type: "button",
func: function() { func: function() {
link.add(); link.add();
} }
}, { }, {
element: helper.e(".control-edit"), element: helper.e(".control-link-edit"),
path: "link.edit", path: "link.edit",
type: "checkbox", type: "checkbox",
func: function() { func: function() {
@ -228,7 +228,7 @@ var control = (function() {
} }
}], }],
func: function() { func: function() {
header.render.width.set(); header.render.area.width();
} }
}, { }, {
element: helper.e(".control-header-area-width-match"), element: helper.e(".control-header-area-width-match"),
@ -248,7 +248,11 @@ var control = (function() {
} }
}], }],
func: function() { func: function() {
header.render.width.match(); _setValue("header.area.width", helper.getObject({
object: state.get(),
path: "link.area.width"
}));
header.render.area.width();
update(); update();
} }
}, { }, {
@ -362,6 +366,22 @@ var control = (function() {
greeting.clear(); greeting.clear();
greeting.render(); greeting.render();
} }
}, {
element: helper.e(".control-header-greeting-size"),
path: "header.greeting.size",
type: "range",
valueMod: ["float"],
func: function() {
header.render.greeting.size();
}
}, {
element: helper.e(".control-header-greeting-size-default"),
type: "button",
func: function() {
_setValue("header.greeting.size", 1);
header.render.greeting.size();
update();
}
}, { }, {
element: helper.e(".control-header-transitional-show"), element: helper.e(".control-header-transitional-show"),
path: "header.transitional.show", path: "header.transitional.show",
@ -388,6 +408,22 @@ var control = (function() {
transitional.clear(); transitional.clear();
transitional.render(); transitional.render();
} }
}, {
element: helper.e(".control-header-transitional-size"),
path: "header.transitional.size",
type: "range",
valueMod: ["float"],
func: function() {
header.render.transitional.size();
}
}, {
element: helper.e(".control-header-transitional-size-default"),
type: "button",
func: function() {
_setValue("header.transitional.size", 1);
header.render.transitional.size();
update();
}
}, { }, {
element: helper.e(".control-header-clock-hours-show"), element: helper.e(".control-header-clock-hours-show"),
path: "header.clock.hours.show", path: "header.clock.hours.show",
@ -538,6 +574,22 @@ var control = (function() {
transitional.clear(); transitional.clear();
transitional.render(); transitional.render();
} }
}, {
element: helper.e(".control-header-clock-size"),
path: "header.clock.size",
type: "range",
valueMod: ["float"],
func: function() {
header.render.clock.size();
}
}, {
element: helper.e(".control-header-clock-size-default"),
type: "button",
func: function() {
_setValue("header.clock.size", 1);
header.render.clock.size();
update();
}
}, { }, {
element: helper.e(".control-header-date-day-show"), element: helper.e(".control-header-date-day-show"),
path: "header.date.day.show", path: "header.date.day.show",
@ -826,6 +878,22 @@ var control = (function() {
transitional.clear(); transitional.clear();
transitional.render(); transitional.render();
} }
}, {
element: helper.e(".control-header-date-size"),
path: "header.date.size",
type: "range",
valueMod: ["float"],
func: function() {
header.render.date.size();
}
}, {
element: helper.e(".control-header-date-size-default"),
type: "button",
func: function() {
_setValue("header.date.size", 1);
header.render.date.size();
update();
}
}, { }, {
element: helper.e(".control-header-search-show"), element: helper.e(".control-header-search-show"),
path: "header.search.show", path: "header.search.show",
@ -833,29 +901,29 @@ var control = (function() {
func: function() { func: function() {
render(); render();
dependents(); dependents();
header.render.search(); header.render.search.width();
} }
}, { }, {
element: helper.e(".control-header-search-width-style-auto"), element: helper.e(".control-header-search-style-auto"),
path: "header.search.width.style", path: "header.search.style",
type: "radio", type: "radio",
func: function() { func: function() {
render(); render();
dependents(); dependents();
header.render.search(); header.render.search.width();
} }
}, { }, {
element: helper.e(".control-header-search-width-style-custom"), element: helper.e(".control-header-search-style-custom"),
path: "header.search.width.style", path: "header.search.style",
type: "radio", type: "radio",
func: function() { func: function() {
render(); render();
dependents(); dependents();
header.render.search(); header.render.search.width();
} }
}, { }, {
element: helper.e(".control-header-search-width-custom"), element: helper.e(".control-header-search-width"),
path: "header.search.width.custom", path: "header.search.width",
type: "range", type: "range",
additionalEvents: [{ additionalEvents: [{
event: "input", event: "input",
@ -897,7 +965,7 @@ var control = (function() {
} }
}], }],
func: function() { func: function() {
header.render.search(); header.render.search.width();
} }
}, { }, {
element: helper.e(".control-header-search-focus"), element: helper.e(".control-header-search-focus"),
@ -979,18 +1047,52 @@ var control = (function() {
render(); render();
} }
}, { }, {
element: helper.e(".control-header-edit-add-show"), element: helper.e(".control-header-search-size"),
path: "header.editAdd.show", path: "header.search.size",
type: "checkbox", type: "range",
valueMod: ["float"],
func: function() { func: function() {
render(); header.render.search.size();
} }
}, { }, {
element: helper.e(".control-header-accent-show"), element: helper.e(".control-header-search-size-default"),
path: "header.accent.show", type: "button",
func: function() {
_setValue("header.search.size", 1);
header.render.search.size();
update();
}
}, {
element: helper.e(".control-header-button-edit-add-show"),
path: "header.button.editAdd.show",
type: "checkbox", type: "checkbox",
func: function() { func: function() {
render(); render();
dependents();
}
}, {
element: helper.e(".control-header-button-accent-show"),
path: "header.button.accent.show",
type: "checkbox",
func: function() {
render();
dependents();
}
}, {
element: helper.e(".control-header-button-size"),
path: "header.button.size",
type: "range",
valueMod: ["float"],
func: function() {
header.render.button.size();
}
}, {
element: helper.e(".control-header-button-size-default"),
type: "button",
func: function() {
_setValue("header.button.size", 1);
header.render.button.size();
update();
} }
}, { }, {
element: helper.e(".control-header-shade-show"), element: helper.e(".control-header-shade-show"),
@ -1193,7 +1295,7 @@ var control = (function() {
} }
}], }],
func: function() { func: function() {
link.render.width.set(); link.render.area.width();
} }
}, { }, {
element: helper.e(".control-link-area-width-match"), element: helper.e(".control-link-area-width-match"),
@ -1213,7 +1315,11 @@ var control = (function() {
} }
}], }],
func: function() { func: function() {
link.render.width.match(); _setValue("link.area.width", helper.getObject({
object: state.get(),
path: "header.area.width"
}));
link.render.area.width();
update(); update();
} }
}, { }, {
@ -1309,7 +1415,7 @@ var control = (function() {
} }
}], }],
func: function() { func: function() {
link.render.item.size.set(); link.render.item.size();
} }
}, { }, {
element: helper.e(".control-link-item-size-default"), element: helper.e(".control-link-item-size-default"),
@ -1324,7 +1430,8 @@ var control = (function() {
} }
}], }],
func: function() { func: function() {
link.render.item.size.default(); _setValue("link.item.size", 1);
link.render.item.size();
update(); update();
} }
}, { }, {
@ -1350,13 +1457,14 @@ var control = (function() {
type: "range", type: "range",
valueMod: ["float"], valueMod: ["float"],
func: function() { func: function() {
link.render.item.display.letter.set(); link.render.item.display.letter();
} }
}, { }, {
element: helper.e(".control-link-item-display-letter-size-default"), element: helper.e(".control-link-item-display-letter-size-default"),
type: "button", type: "button",
func: function() { func: function() {
link.render.item.display.letter.default(); _setValue("link.item.display.letter.size", 2);
link.render.item.display.letter();
update(); update();
} }
}, { }, {
@ -1365,13 +1473,14 @@ var control = (function() {
type: "range", type: "range",
valueMod: ["float"], valueMod: ["float"],
func: function() { func: function() {
link.render.item.display.icon.set(); link.render.item.display.icon();
} }
}, { }, {
element: helper.e(".control-link-item-display-icon-size-default"), element: helper.e(".control-link-item-display-icon-size-default"),
type: "button", type: "button",
func: function() { func: function() {
link.render.item.display.icon.default(); _setValue("link.item.display.icon.size", 2);
link.render.item.icon.letter();
update(); update();
} }
}, { }, {
@ -1394,7 +1503,8 @@ var control = (function() {
element: helper.e(".control-link-item-name-size-default"), element: helper.e(".control-link-item-name-size-default"),
type: "button", type: "button",
func: function() { func: function() {
link.render.item.name.default(); _setValue("link.item.display.icon.size", 0.9);
link.render.item.name.set();
update(); update();
} }
}, { }, {
@ -1545,6 +1655,22 @@ var control = (function() {
render(); render();
accent.render(); accent.render();
} }
}, {
element: helper.e(".control-theme-radius"),
path: "theme.radius",
type: "range",
valueMod: ["float"],
func: function() {
theme.render.radius();
}
}, {
element: helper.e(".control-theme-radius-default"),
type: "button",
func: function() {
_setValue("theme.radius", 0.2);
theme.render.radius();
update();
}
}, { }, {
element: helper.e(".control-theme-accent-random-active"), element: helper.e(".control-theme-accent-random-active"),
path: "theme.accent.random.active", path: "theme.accent.random.active",
@ -1645,6 +1771,19 @@ var control = (function() {
} }
}]; }];
var _setValue = function(path, value) {
helper.setObject({
object: state.get(),
path: path,
newValue: value
});
};
var _renderItemDisplayLetter = function() {
var html = helper.e("html");
html.style.setProperty("--link-item-display-letter-size", state.get().link.item.display.letter.size + "em");
};
var bind = function() { var bind = function() {
var eventType = { var eventType = {
button: "click", button: "click",
@ -1768,31 +1907,31 @@ var control = (function() {
}; };
var _search = function() { var _search = function() {
helper.removeClass(html, "is-header-search-show"); helper.removeClass(html, "is-header-search-show");
helper.removeClass(html, "is-header-search-width-style-custom"); helper.removeClass(html, "is-header-search-style-custom");
helper.removeClass(html, "is-header-search-width-style-auto"); helper.removeClass(html, "is-header-search-style-auto");
helper.removeClass(html, "is-header-search-text-align-left"); helper.removeClass(html, "is-header-search-text-align-left");
helper.removeClass(html, "is-header-search-text-align-center"); helper.removeClass(html, "is-header-search-text-align-center");
helper.removeClass(html, "is-header-search-text-align-right"); helper.removeClass(html, "is-header-search-text-align-right");
if (state.get().header.search.show) { if (state.get().header.search.show) {
helper.addClass(html, "is-header-search-show"); helper.addClass(html, "is-header-search-show");
helper.addClass(html, "is-header-search-width-style-" + state.get().header.search.width.style); helper.addClass(html, "is-header-search-style-" + state.get().header.search.style);
helper.addClass(html, "is-header-search-text-align-" + state.get().header.search.text.align); helper.addClass(html, "is-header-search-text-align-" + state.get().header.search.text.align);
}; };
helper.e(".control-header-search-engine-custom-name").value = state.get().header.search.engine.custom.name; helper.e(".control-header-search-engine-custom-name").value = state.get().header.search.engine.custom.name;
helper.e(".control-header-search-engine-custom-url").value = state.get().header.search.engine.custom.url; helper.e(".control-header-search-engine-custom-url").value = state.get().header.search.engine.custom.url;
}; };
var _editAdd = function() { var _editAdd = function() {
if (state.get().header.editAdd.show) { if (state.get().header.button.editAdd.show) {
helper.addClass(html, "is-header-edit-add-show"); helper.addClass(html, "is-header-button-edit-add-show");
} else { } else {
helper.removeClass(html, "is-header-edit-add-show"); helper.removeClass(html, "is-header-button-edit-add-show");
}; };
}; };
var _accent = function() { var _accent = function() {
if (state.get().header.accent.show) { if (state.get().header.button.accent.show) {
helper.addClass(html, "is-header-accent-show"); helper.addClass(html, "is-header-button-accent-show");
} else { } else {
helper.removeClass(html, "is-header-accent-show"); helper.removeClass(html, "is-header-button-accent-show");
}; };
}; };
var _greeting = function() { var _greeting = function() {
@ -1971,6 +2110,15 @@ var control = (function() {
helper.e(".control-header-clock-seconds-display-number").disabled = true; helper.e(".control-header-clock-seconds-display-number").disabled = true;
helper.e(".control-header-clock-seconds-display-word").disabled = true; helper.e(".control-header-clock-seconds-display-word").disabled = true;
}; };
if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
helper.e("[for=control-header-clock-size]").removeAttribute("disabled");
helper.e(".control-header-clock-size").disabled = false;
helper.e(".control-header-clock-size-default").disabled = false;
} else {
helper.e("[for=control-header-clock-size]").setAttribute("disabled", "");
helper.e(".control-header-clock-size").disabled = true;
helper.e(".control-header-clock-size-default").disabled = true;
};
}; };
var _date = function() { var _date = function() {
var activeCount = 0; var activeCount = 0;
@ -2056,6 +2204,15 @@ var control = (function() {
} else { } else {
helper.e(".control-header-date-month-ordinal").disabled = true; helper.e(".control-header-date-month-ordinal").disabled = true;
}; };
if (state.get().header.date.day.show || state.get().header.date.date.show || state.get().header.date.month.show || state.get().header.date.year.show) {
helper.e("[for=control-header-date-size]").removeAttribute("disabled");
helper.e(".control-header-date-size").disabled = false;
helper.e(".control-header-date-size-default").disabled = false;
} else {
helper.e("[for=control-header-date-size]").setAttribute("disabled", "");
helper.e(".control-header-date-size").disabled = true;
helper.e(".control-header-date-size-default").disabled = true;
};
}; };
var _shade = function() { var _shade = function() {
if (state.get().header.shade.show) { if (state.get().header.shade.show) {
@ -2088,11 +2245,11 @@ var control = (function() {
}; };
var _search = function() { var _search = function() {
if (state.get().header.search.show) { if (state.get().header.search.show) {
helper.e(".control-header-search-width-style-label").removeAttribute("disabled"); helper.e(".control-header-search-style-label").removeAttribute("disabled");
helper.e(".control-header-search-width-style-auto").disabled = false; helper.e(".control-header-search-style-auto").disabled = false;
helper.e(".control-header-search-width-style-custom").disabled = false; helper.e(".control-header-search-style-custom").disabled = false;
helper.e("[for=control-header-search-width-custom]").removeAttribute("disabled"); helper.e("[for=control-header-search-width]").removeAttribute("disabled");
helper.e(".control-header-search-width-custom").disabled = false; helper.e(".control-header-search-width").disabled = false;
helper.e(".control-header-search-focus").disabled = false; helper.e(".control-header-search-focus").disabled = false;
helper.e(".control-header-search-engine-label").removeAttribute("disabled"); helper.e(".control-header-search-engine-label").removeAttribute("disabled");
helper.e(".control-header-search-engine-google").disabled = false; helper.e(".control-header-search-engine-google").disabled = false;
@ -2104,12 +2261,15 @@ var control = (function() {
helper.e(".control-header-search-text-align-left").disabled = false; helper.e(".control-header-search-text-align-left").disabled = false;
helper.e(".control-header-search-text-align-center").disabled = false; helper.e(".control-header-search-text-align-center").disabled = false;
helper.e(".control-header-search-text-align-right").disabled = false; helper.e(".control-header-search-text-align-right").disabled = false;
helper.e("[for=control-header-search-size]").removeAttribute("disabled");
helper.e(".control-header-search-size").disabled = false;
helper.e(".control-header-search-size-default").disabled = false;
} else { } else {
helper.e(".control-header-search-width-style-label").setAttribute("disabled", ""); helper.e(".control-header-search-style-label").setAttribute("disabled", "");
helper.e(".control-header-search-width-style-auto").disabled = true; helper.e(".control-header-search-style-auto").disabled = true;
helper.e(".control-header-search-width-style-custom").disabled = true; helper.e(".control-header-search-style-custom").disabled = true;
helper.e("[for=control-header-search-width-custom]").setAttribute("disabled", ""); helper.e("[for=control-header-search-width]").setAttribute("disabled", "");
helper.e(".control-header-search-width-custom").disabled = true; helper.e(".control-header-search-width").disabled = true;
helper.e(".control-header-search-focus").disabled = true; helper.e(".control-header-search-focus").disabled = true;
helper.e(".control-header-search-engine-label").setAttribute("disabled", ""); helper.e(".control-header-search-engine-label").setAttribute("disabled", "");
helper.e(".control-header-search-engine-google").disabled = true; helper.e(".control-header-search-engine-google").disabled = true;
@ -2121,6 +2281,9 @@ var control = (function() {
helper.e(".control-header-search-text-align-left").disabled = true; helper.e(".control-header-search-text-align-left").disabled = true;
helper.e(".control-header-search-text-align-center").disabled = true; helper.e(".control-header-search-text-align-center").disabled = true;
helper.e(".control-header-search-text-align-right").disabled = true; helper.e(".control-header-search-text-align-right").disabled = true;
helper.e("[for=control-header-search-size]").setAttribute("disabled", "");
helper.e(".control-header-search-size").disabled = true;
helper.e(".control-header-search-size-default").disabled = true;
}; };
if (state.get().header.search.show && state.get().header.search.engine.selected === "custom") { if (state.get().header.search.show && state.get().header.search.engine.selected === "custom") {
helper.e("[for=control-header-search-engine-custom-name]").removeAttribute("disabled"); helper.e("[for=control-header-search-engine-custom-name]").removeAttribute("disabled");
@ -2133,12 +2296,12 @@ var control = (function() {
helper.e("[for=control-header-search-engine-custom-url]").setAttribute("disabled", ""); helper.e("[for=control-header-search-engine-custom-url]").setAttribute("disabled", "");
helper.e(".control-header-search-engine-custom-url").disabled = true; helper.e(".control-header-search-engine-custom-url").disabled = true;
}; };
if (state.get().header.search.show && state.get().header.search.width.style === "custom") { if (state.get().header.search.show && state.get().header.search.style === "custom") {
helper.e("[for=control-header-search-width-custom]").removeAttribute("disabled"); helper.e("[for=control-header-search-width]").removeAttribute("disabled");
helper.e(".control-header-search-width-custom").disabled = false; helper.e(".control-header-search-width").disabled = false;
} else { } else {
helper.e("[for=control-header-search-width-custom]").setAttribute("disabled", ""); helper.e("[for=control-header-search-width]").setAttribute("disabled", "");
helper.e(".control-header-search-width-custom").disabled = true; helper.e(".control-header-search-width").disabled = true;
}; };
}; };
var _greeting = function() { var _greeting = function() {
@ -2148,12 +2311,18 @@ var control = (function() {
helper.e(".control-header-greeting-type-good").disabled = false; helper.e(".control-header-greeting-type-good").disabled = false;
helper.e(".control-header-greeting-type-hello").disabled = false; helper.e(".control-header-greeting-type-hello").disabled = false;
helper.e(".control-header-greeting-type-hi").disabled = false; helper.e(".control-header-greeting-type-hi").disabled = false;
helper.e("[for=control-header-greeting-size]").removeAttribute("disabled");
helper.e(".control-header-greeting-size").disabled = false;
helper.e(".control-header-greeting-size-default").disabled = false;
} else { } else {
helper.e("[for=control-header-greeting-name]").setAttribute("disabled", ""); helper.e("[for=control-header-greeting-name]").setAttribute("disabled", "");
helper.e(".control-header-greeting-name").disabled = true; helper.e(".control-header-greeting-name").disabled = true;
helper.e(".control-header-greeting-type-good").disabled = true; helper.e(".control-header-greeting-type-good").disabled = true;
helper.e(".control-header-greeting-type-hello").disabled = true; helper.e(".control-header-greeting-type-hello").disabled = true;
helper.e(".control-header-greeting-type-hi").disabled = true; helper.e(".control-header-greeting-type-hi").disabled = true;
helper.e("[for=control-header-greeting-size]").setAttribute("disabled", "");
helper.e(".control-header-greeting-size").disabled = true;
helper.e(".control-header-greeting-size-default").disabled = true;
}; };
}; };
var _transitional = function() { var _transitional = function() {
@ -2165,9 +2334,15 @@ var control = (function() {
if (state.get().header.transitional.show && ((state.get().header.date.date.show || state.get().header.date.day.show || state.get().header.date.month.show || state.get().header.date.year.show || state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show))) { if (state.get().header.transitional.show && ((state.get().header.date.date.show || state.get().header.date.day.show || state.get().header.date.month.show || state.get().header.date.year.show || state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show))) {
helper.e(".control-header-transitional-type-timeanddate").disabled = false; helper.e(".control-header-transitional-type-timeanddate").disabled = false;
helper.e(".control-header-transitional-type-its").disabled = false; helper.e(".control-header-transitional-type-its").disabled = false;
helper.e("[for=control-header-transitional-size]").removeAttribute("disabled");
helper.e(".control-header-transitional-size").disabled = false;
helper.e(".control-header-transitional-size-default").disabled = false;
} else { } else {
helper.e(".control-header-transitional-type-timeanddate").disabled = true; helper.e(".control-header-transitional-type-timeanddate").disabled = true;
helper.e(".control-header-transitional-type-its").disabled = true; helper.e(".control-header-transitional-type-its").disabled = true;
helper.e("[for=control-header-transitional-size]").setAttribute("disabled", "");
helper.e(".control-header-transitional-size").disabled = true;
helper.e(".control-header-transitional-size-default").disabled = true;
}; };
}; };
_clock(); _clock();
@ -2180,10 +2355,10 @@ var control = (function() {
}; };
var _edit = function() { var _edit = function() {
if (bookmarks.get().length > 0) { if (bookmarks.get().length > 0) {
helper.e(".control-edit").disabled = false; helper.e(".control-link-edit").disabled = false;
} else { } else {
helper.e(".control-edit").disabled = true; helper.e(".control-link-edit").disabled = true;
helper.e(".control-edit").checked = false; helper.e(".control-link-edit").checked = false;
}; };
}; };
var _link = function() { var _link = function() {

124
js/header.js
View File

@ -18,46 +18,64 @@ var header = (function() {
}; };
var render = { var render = {
width: { area: {
set: function() { width: function() {
_width(); _renderWidth();
},
match: function() {
_match();
} }
}, },
shade: function() { shade: function() {
_shade(); _renderShade();
}, },
opacity: function() { opacity: function() {
_opacity(); _renderOpacity();
}, },
padding: function() { padding: function() {
_padding(); _renderPadding();
}, },
border: function() { border: function() {
_border(); _renderBorder();
}, },
search: function() { search: {
_search(); width: function() {
_renderSearchWidth();
},
size: function() {
_renderSearchSize();
}
},
greeting: {
size: function() {
_renderGreetingSize();
}
},
transitional: {
size: function() {
_renderTransitionalSize();
}
},
clock: {
size: function() {
_renderClockSize();
}
},
date: {
size: function() {
_renderDateSize();
}
},
button: {
size: function() {
_renderButtonSize();
}
} }
}; };
var _width = function() { var _renderWidth = function() {
var html = helper.e("html"); var html = helper.e("html");
html.style.setProperty("--header-area-width", state.get().header.area.width + "%"); html.style.setProperty("--header-area-width", state.get().header.area.width + "%");
}; };
var _match = function() { var _renderShade = function() {
helper.setObject({
object: state.get(),
path: "header.area.width",
newValue: state.get().link.area.width
});
render.width.set();
};
var _shade = function() {
var html = helper.e("html"); var html = helper.e("html");
var fontSize = parseInt(getComputedStyle(html).fontSize, 10); var fontSize = parseInt(getComputedStyle(html).fontSize, 10);
var scrollPosition = document.documentElement.scrollTop; var scrollPosition = document.documentElement.scrollTop;
@ -78,42 +96,74 @@ var header = (function() {
}; };
}; };
var _opacity = function() { var _renderOpacity = function() {
var html = helper.e("html"); var html = helper.e("html");
if (state.get().header.shade.show) { if (state.get().header.shade.show) {
html.style.setProperty("--header-shade-opacity", state.get().header.shade.opacity); html.style.setProperty("--header-shade-opacity", state.get().header.shade.opacity);
}; };
}; };
var _padding = function() { var _renderPadding = function() {
var html = helper.e("html"); var html = helper.e("html");
html.style.setProperty("--header-padding-multiplier-top", state.get().header.padding.top); html.style.setProperty("--header-padding-top-multiplier", state.get().header.padding.top);
html.style.setProperty("--header-padding-multiplier-bottom", state.get().header.padding.bottom); html.style.setProperty("--header-padding-bottom-multiplier", state.get().header.padding.bottom);
}; };
var _border = function() { var _renderBorder = function() {
var html = helper.e("html"); var html = helper.e("html");
html.style.setProperty("--header-border-width-multiplier-top", state.get().header.border.top.width); html.style.setProperty("--header-border-width-top-multiplier", state.get().header.border.top.width);
html.style.setProperty("--header-border-width-multiplier-bottom", state.get().header.border.bottom.width); html.style.setProperty("--header-border-width-bottom-multiplier", state.get().header.border.bottom.width);
}; };
var _search = function() { var _renderSearchWidth = function() {
var html = helper.e("html"); var html = helper.e("html");
if (state.get().header.search.show && state.get().header.search.width.style === "custom") { html.style.setProperty("--header-search-width", state.get().header.search.width + "%");
html.style.setProperty("--header-search-width", state.get().header.search.width.custom + "%");
} else {
html.style.removeProperty("--header-search-width");
}; };
var _renderSearchSize = function() {
var html = helper.e("html");
html.style.setProperty("--header-search-size", state.get().header.search.size + "em");
};
var _renderGreetingSize = function() {
var html = helper.e("html");
html.style.setProperty("--header-greeting-size", state.get().header.greeting.size + "em");
};
var _renderTransitionalSize = function() {
var html = helper.e("html");
html.style.setProperty("--header-transitional-size", state.get().header.transitional.size + "em");
};
var _renderClockSize = function() {
var html = helper.e("html");
html.style.setProperty("--header-clock-size", state.get().header.clock.size + "em");
};
var _renderDateSize = function() {
var html = helper.e("html");
html.style.setProperty("--header-date-size", state.get().header.date.size + "em");
};
var _renderButtonSize = function() {
var html = helper.e("html");
html.style.setProperty("--header-button-size", state.get().header.button.size + "em");
}; };
var init = function() { var init = function() {
_bind(); _bind();
render.width.set(); render.area.width();
render.search();
render.shade(); render.shade();
render.opacity(); render.opacity();
render.padding(); render.padding();
render.border(); render.border();
render.greeting.size();
render.transitional.size();
render.clock.size();
render.date.size();
render.search.width();
render.search.size();
render.button.size();
}; };
// exposed methods // exposed methods

49
js/init.js
View File

@ -1,68 +1,21 @@
// log version // log version
console.log("nightTab version", version.get()); console.log("nightTab version", version.get());
// check for old versions
data.init(); data.init();
// bind and update controls
// render states
state.init(); state.init();
// restore bookmarks
bookmarks.init(); bookmarks.init();
// close menu if left open
// bind menu tabs
menu.init(); menu.init();
// render css accent var
accent.init(); accent.init();
// render links from bookmarks
link.init(); link.init();
// bind controls
// render checkboxes and radios
// render states
control.init(); control.init();
// render greeting
// bind greeting update
greeting.init(); greeting.init();
// render transitional
transitional.init(); transitional.init();
// render date
// bind date update
date.init(); date.init();
// render clock
// bind clock update
clock.init(); clock.init();
// bind keyboard keys
keyboard.init(); keyboard.init();
// bind tips
tip.init(); tip.init();
// render page title
layout.init(); layout.init();
// render background image
background.init(); background.init();
// bind search box
// render search engine
// focus seach input
search.init(); search.init();
// render page title
title.init(); title.init();
// render header height padding
header.init(); header.init();
theme.init();
// menu.open();

185
js/link.js
View File

@ -150,22 +150,26 @@ var link = (function() {
var form = helper.node("form|class:link-form"); var form = helper.node("form|class:link-form");
var fieldset = helper.node("fieldset"); var fieldset = helper.node("fieldset");
var letterFormIndet = helper.node("div|class:form-indent"); var letterFormIndet = helper.node("div|class:form-indent");
var letterInput = helper.node("input|type:text,class:link-form-input-letter,id:link-form-input-letter,placeholder:E,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false"); var letterInputWrap = helper.node("div|class:input-wrap");
var letterInput = helper.node("input|type:text,class:link-form-input-letter mb-0,id:link-form-input-letter,placeholder:E,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
var iconFormIndet = helper.node("div|class:form-indent"); var iconFormIndet = helper.node("div|class:form-indent");
var iconFormGroupWrap = helper.node("div|class:input-wrap");
var iconFormGroup = helper.node("div|class:form-group auto-suggest-wrapper"); var iconFormGroup = helper.node("div|class:form-group auto-suggest-wrapper");
var iconInput = helper.node("input|type:text,class:link-form-input-icon auto-suggest-input,id:link-form-input-icon,placeholder:Search for Brands or Icons,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,disabled"); var iconInput = helper.node("input|type:text,class:link-form-input-icon auto-suggest-input,id:link-form-input-icon,placeholder:Search for Brands or Icons,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,disabled");
var iconFormGroupText = helper.node("div|class:form-group-text link-form-text-icon,tabindex:-1,disabled"); var iconFormGroupText = helper.node("div|class:form-group-text link-form-text-icon,tabindex:-1,disabled");
var iconFormGroupClear = helper.node("button|class:link-form-icon-clear button mb-0,type:button,tabindex:1,disabled"); var iconFormGroupClear = helper.node("button|class:link-form-icon-clear button mb-0,type:button,tabindex:1,disabled");
var iconFormGroupClearIcon = helper.node("span|class:icon-close"); var iconFormGroupClearIcon = helper.node("span|class:icon-close");
var iconPara = helper.node("p:Refer to the \"Free\" and \"Brand\" icons from FontAwesome for full set of icons supported.|class:link-form-input-helper-icon input-helper small muted,disabled"); var iconPara = helper.node("p:Refer to the \"Free\" and \"Brand\" icons from FontAwesome for full set of icons supported.|class:link-form-input-helper-icon input-helper small muted,disabled");
var nameInputWrap = helper.node("div|class:input-wrap");
var nameLabel = helper.node("label:Name|for:link-form-input-name"); var nameLabel = helper.node("label:Name|for:link-form-input-name");
var nameInput = helper.node("input|type:text,class:link-form-input-name,id:link-form-input-name,placeholder:Example,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false"); var nameInput = helper.node("input|type:text,class:link-form-input-name mb-0,id:link-form-input-name,placeholder:Example,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
var urlInputWrap = helper.node("div|class:input-wrap");
var urlLabel = helper.node("label:URL|for:link-form-input-url"); var urlLabel = helper.node("label:URL|for:link-form-input-url");
var urlInput = helper.node("input|type:text,class:link-form-input-url mb-0,id:link-form-input-url,placeholder:https://www.example.com/,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false"); var urlInput = helper.node("input|type:text,class:link-form-input-url mb-0,id:link-form-input-url,placeholder:https://www.example.com/,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
var colorInputWrap = helper.node("div|class:input-wrap py-0"); var colorWrap = helper.node("div|class:input-wrap");
var colorFormGroup = helper.node("div|class:form-group"); var colorFormGroup = helper.node("div|class:form-group");
var colorInputLabel = helper.node("label:Accent override|for:link-form-input-color"); var colorLabel = helper.node("label:Accent override|for:link-form-input-color");
var colorInputInput = helper.node("input|id:link-form-input-color,class:link-form-input-color mb-0,type:color,value:" + helper.rgbToHex(state.get().theme.accent.current) + ",tabindex:1"); var colorInput = helper.node("input|id:link-form-input-color,class:link-form-input-color mb-0,type:color,value:" + helper.rgbToHex(state.get().theme.accent.current) + ",tabindex:1");
var colorButtonRefresh = helper.node("button|class:button mb-0,type:button,tabindex:1"); var colorButtonRefresh = helper.node("button|class:button mb-0,type:button,tabindex:1");
var colorButtonRefreshIcon = helper.node("span|class:icon-refresh"); var colorButtonRefreshIcon = helper.node("span|class:icon-refresh");
var colorPara = helper.node("p:Use this colour to override the global Accent colour.|class:input-helper small muted"); var colorPara = helper.node("p:Use this colour to override the global Accent colour.|class:input-helper small muted");
@ -179,7 +183,8 @@ var link = (function() {
letterRadioInputWrap.appendChild(letterRadioInput); letterRadioInputWrap.appendChild(letterRadioInput);
letterRadioInputWrap.appendChild(letterRadioLable); letterRadioInputWrap.appendChild(letterRadioLable);
fieldset.appendChild(letterRadioInputWrap); fieldset.appendChild(letterRadioInputWrap);
letterFormIndet.appendChild(letterInput); letterInputWrap.appendChild(letterInput);
letterFormIndet.appendChild(letterInputWrap);
fieldset.appendChild(letterFormIndet); fieldset.appendChild(letterFormIndet);
iconRadioInputWrap.appendChild(iconRadioInput); iconRadioInputWrap.appendChild(iconRadioInput);
iconRadioInputWrap.appendChild(iconRadioLable); iconRadioInputWrap.appendChild(iconRadioLable);
@ -188,22 +193,25 @@ var link = (function() {
iconFormGroup.appendChild(iconInput); iconFormGroup.appendChild(iconInput);
iconFormGroup.appendChild(iconFormGroupText); iconFormGroup.appendChild(iconFormGroupText);
iconFormGroup.appendChild(iconFormGroupClear); iconFormGroup.appendChild(iconFormGroupClear);
iconFormIndet.appendChild(iconFormGroup); iconFormGroupWrap.appendChild(iconFormGroup);
iconFormIndet.appendChild(iconPara); iconFormGroupWrap.appendChild(iconPara);
iconFormIndet.appendChild(iconFormGroupWrap);
fieldset.appendChild(iconFormIndet); fieldset.appendChild(iconFormIndet);
fieldset.appendChild(helper.node("hr")); fieldset.appendChild(helper.node("hr"));
fieldset.appendChild(nameLabel); nameInputWrap.appendChild(nameLabel);
fieldset.appendChild(nameInput); nameInputWrap.appendChild(nameInput);
fieldset.appendChild(urlLabel); fieldset.appendChild(nameInputWrap);
fieldset.appendChild(urlInput); urlInputWrap.appendChild(urlLabel);
urlInputWrap.appendChild(urlInput);
fieldset.appendChild(urlInputWrap);
fieldset.appendChild(helper.node("hr")); fieldset.appendChild(helper.node("hr"));
fieldset.appendChild(colorInputLabel); colorFormGroup.appendChild(colorInput);
colorFormGroup.appendChild(colorInputInput);
colorButtonRefresh.appendChild(colorButtonRefreshIcon); colorButtonRefresh.appendChild(colorButtonRefreshIcon);
colorFormGroup.appendChild(colorButtonRefresh); colorFormGroup.appendChild(colorButtonRefresh);
colorInputWrap.appendChild(colorFormGroup); colorWrap.appendChild(colorLabel);
fieldset.appendChild(colorInputWrap); colorWrap.appendChild(colorFormGroup);
fieldset.appendChild(colorPara); colorWrap.appendChild(colorPara);
fieldset.appendChild(colorWrap);
form.appendChild(fieldset); form.appendChild(fieldset);
letterRadioInput.addEventListener("change", function(event) { letterRadioInput.addEventListener("change", function(event) {
@ -221,12 +229,12 @@ var link = (function() {
urlInput.addEventListener("input", function(event) { urlInput.addEventListener("input", function(event) {
link.stagedBookmarkData.url = this.value; link.stagedBookmarkData.url = this.value;
}, false); }, false);
colorInputInput.addEventListener("change", function(event) { colorInput.addEventListener("change", function(event) {
link.stagedBookmarkData.accent.override = true; link.stagedBookmarkData.accent.override = true;
link.stagedBookmarkData.accent.color = helper.hexToRgb(this.value); link.stagedBookmarkData.accent.color = helper.hexToRgb(this.value);
}, false); }, false);
colorButtonRefresh.addEventListener("click", function(event) { colorButtonRefresh.addEventListener("click", function(event) {
colorInputInput.value = helper.rgbToHex(state.get().theme.accent.current); colorInput.value = helper.rgbToHex(state.get().theme.accent.current);
link.stagedBookmarkData.accent.override = false; link.stagedBookmarkData.accent.override = false;
link.stagedBookmarkData.accent.color = { link.stagedBookmarkData.accent.color = {
r: null, r: null,
@ -279,7 +287,7 @@ var link = (function() {
if (data.accent.override) { if (data.accent.override) {
linkItemOptions.attr.push({ linkItemOptions.attr.push({
key: "style", key: "style",
value: "--accent: " + data.accent.color.r + ", " + data.accent.color.g + ", " + data.accent.color.b value: "--theme-accent: " + data.accent.color.r + ", " + data.accent.color.g + ", " + data.accent.color.b
}); });
}; };
var linkItem = helper.makeNode(linkItemOptions); var linkItem = helper.makeNode(linkItemOptions);
@ -506,18 +514,20 @@ var link = (function() {
return div; return div;
}; };
var clear = function() {
var linkArea = helper.e(".link-area");
while (linkArea.lastChild) {
linkArea.removeChild(linkArea.lastChild);
};
};
var render = { var render = {
area: { area: {
gap: function() { gap: function() {
_areaGap(); _renderAreaGap();
}
}, },
width: { width: function() {
set: function() { _renderAreaWidth();
_renderWidthSet();
},
match: function() {
_renderWidthMatch();
} }
}, },
item: { item: {
@ -525,50 +535,35 @@ var link = (function() {
_renderItemAll(); _renderItemAll();
}, },
display: { display: {
letter: { letter: function() {
set: function() { _renderItemDisplayLetter();
_renderItemDisplayLetterSet();
}, },
default: function() { icon: function() {
_renderItemDisplayLetterDefault(); _renderItemDisplayIcon();
} }
}, },
icon: { name: function() {
set: function() { _renderItemName();
_renderItemDisplayIconSet();
}, },
default: function() { size: function() {
_renderItemDisplayIconDefault(); _renderItemSize();
} }
}
},
name: {
set: function() {
_renderItemNameSet();
},
default: function() {
_renderItemNameDefault();
}
},
size: {
set: function() {
_renderItemSizeSet();
},
default: function() {
_renderItemSizeDefault();
}
},
}, },
tabIndex: function() { tabIndex: function() {
_renderTabIndex(); _renderTabIndex();
} }
}; };
var _areaGap = function() { var _renderAreaGap = function() {
var html = helper.e("html"); var html = helper.e("html");
html.style.setProperty("--link-area-gutter-multiplier", state.get().link.area.gap); html.style.setProperty("--link-area-gutter-multiplier", state.get().link.area.gap);
}; };
var _renderAreaWidth = function() {
var html = helper.e("html");
html.style.setProperty("--link-area-width", state.get().link.area.width + "%");
};
var _renderItemAll = function() { var _renderItemAll = function() {
var linkArea = helper.e(".link-area"); var linkArea = helper.e(".link-area");
var bookmarksToRender = false; var bookmarksToRender = false;
@ -617,76 +612,26 @@ var link = (function() {
}; };
}; };
var _renderWidthSet = function() { var _renderItemDisplayLetter = function() {
var html = helper.e("html");
html.style.setProperty("--link-area-width", state.get().link.area.width + "%");
};
var _renderItemDisplayLetterSet = function() {
var html = helper.e("html"); var html = helper.e("html");
html.style.setProperty("--link-item-display-letter-size", state.get().link.item.display.letter.size + "em"); html.style.setProperty("--link-item-display-letter-size", state.get().link.item.display.letter.size + "em");
}; };
var _renderItemDisplayLetterDefault = function() { var _renderItemDisplayIcon = function() {
helper.setObject({
object: state.get(),
path: "link.item.display.letter.size",
newValue: 2
});
render.item.display.letter.set();
};
var _renderItemDisplayIconSet = function() {
var html = helper.e("html"); var html = helper.e("html");
html.style.setProperty("--link-item-display-icon-size", state.get().link.item.display.icon.size + "em"); html.style.setProperty("--link-item-display-icon-size", state.get().link.item.display.icon.size + "em");
}; };
var _renderItemDisplayIconDefault = function() { var _renderItemName = function() {
helper.setObject({
object: state.get(),
path: "link.item.display.icon.size",
newValue: 2
});
render.item.display.icon.set();
};
var _renderItemNameSet = function() {
var html = helper.e("html"); var html = helper.e("html");
html.style.setProperty("--link-item-name-size", state.get().link.item.name.size + "em"); html.style.setProperty("--link-item-name-size", state.get().link.item.name.size + "em");
}; };
var _renderItemNameDefault = function() { var _renderItemSize = function() {
helper.setObject({
object: state.get(),
path: "link.item.name.size",
newValue: 0.9
});
render.item.name.set();
};
var _renderItemSizeSet = function() {
var html = helper.e("html"); var html = helper.e("html");
html.style.setProperty("--link-item-size", state.get().link.item.size + "em"); html.style.setProperty("--link-item-size", state.get().link.item.size + "em");
}; };
var _renderItemSizeDefault = function() {
helper.setObject({
object: state.get(),
path: "link.item.size",
newValue: 1
});
render.item.size.set();
};
var _renderWidthMatch = function() {
helper.setObject({
object: state.get(),
path: "link.area.width",
newValue: state.get().header.area.width
});
render.width.set();
};
var _renderTabIndex = function() { var _renderTabIndex = function() {
var allLinkControlItem = helper.eA(".link-control-item"); var allLinkControlItem = helper.eA(".link-control-item");
if (state.get().link.edit) { if (state.get().link.edit) {
@ -700,22 +645,14 @@ var link = (function() {
}; };
}; };
var clear = function() {
var linkArea = helper.e(".link-area");
while (linkArea.lastChild) {
linkArea.removeChild(linkArea.lastChild);
};
};
var init = function() { var init = function() {
render.area.gap(); render.area.gap();
render.area.width();
render.item.all(); render.item.all();
render.item.size.set(); render.item.size();
render.item.display.letter.set(); render.item.display.letter();
render.item.display.icon.set(); render.item.display.icon();
render.item.name.set(); render.item.name();
render.item.name.default();
render.width.set();
}; };
// exposed methods // exposed methods

23
js/state.js
View File

@ -35,6 +35,7 @@ var state = (function() {
hour24: { hour24: {
show: true show: true
}, },
size: 1
}, },
date: { date: {
day: { day: {
@ -61,14 +62,13 @@ var state = (function() {
separator: { separator: {
show: true show: true
}, },
format: "datemonth" format: "datemonth",
size: 1
}, },
search: { search: {
show: true, show: true,
width: {
style: "auto", style: "auto",
custom: 30 width: 30,
},
focus: false, focus: false,
engine: { engine: {
selected: "google", selected: "google",
@ -95,14 +95,18 @@ var state = (function() {
}, },
text: { text: {
align: "center" align: "center"
}
}, },
size: 1
},
button: {
editAdd: { editAdd: {
show: true, show: true,
}, },
accent: { accent: {
show: true, show: true,
}, },
size: 1
},
shade: { shade: {
show: true, show: true,
style: "scroll", style: "scroll",
@ -125,11 +129,13 @@ var state = (function() {
greeting: { greeting: {
show: false, show: false,
type: "good", type: "good",
name: "" name: "",
size: 1
}, },
transitional: { transitional: {
show: false, show: false,
type: "timeanddate" type: "timeanddate",
size: 1
} }
}, },
link: { link: {
@ -195,7 +201,8 @@ var state = (function() {
style: "any" style: "any"
} }
}, },
style: "dark" style: "dark",
radius: 0.2
}, },
background: { background: {
image: { image: {

19
js/theme.js
View File

@ -20,9 +20,26 @@ var theme = (function() {
style[state.get().theme.style](); style[state.get().theme.style]();
}; };
var render = {
radius: function() {
_renderRadius();
}
};
var _renderRadius = function() {
var html = helper.e("html");
html.style.setProperty("--theme-radius", state.get().theme.radius + "rem");
};
var init = function() {
render.radius();
};
// exposed methods // exposed methods
return { return {
toggle: toggle render: render,
toggle: toggle,
init: init
}; };
})(); })();

28
js/update.js
View File

@ -427,6 +427,30 @@ var update = (function() {
return data; return data;
}; };
var _update_380 = function(data) {
data.version = "3.8.0";
data.state.header.clock.size = 1;
data.state.header.date.size = 1;
data.state.header.greeting.size = 1;
data.state.header.transitional.size = 1;
data.state.header.search.style = data.state.header.search.width.style;
data.state.header.search.width = data.state.header.search.width.custom;
data.state.header.search.size = 1;
data.state.header.button = {
editAdd: {
show: data.state.header.editAdd.show
},
accent: {
show: data.state.header.accent.show
},
size: 1
};
delete data.state.header.editAdd;
delete data.state.header.accent;
data.state.theme.radius = 0.2;
return data;
};
// var _update_300 = function(data) { // var _update_300 = function(data) {
// data.version = 3.00; // data.version = 3.00;
// return data; // return data;
@ -541,6 +565,10 @@ var update = (function() {
console.log("\t= running update 3.7.0"); console.log("\t= running update 3.7.0");
data = _update_370(data); data = _update_370(data);
}; };
if (version.compare(data.version, "3.8.0") == -1) {
console.log("\t= running update 3.8.0");
data = _update_380(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 = "3.7.0"; var current = "3.8.0";
var compare = function(a, b) { var compare = function(a, b) {
var pa = a.split("."); var pa = a.split(".");