extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-08-16 16:51:30 +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;
width: 100%;
max-height: 40vh;
border-radius: var(--radius);
border-radius: var(--theme-radius);
overflow-y: auto;
z-index: var(--z-index-auto-suggest-list);
display: flex;
@ -35,7 +35,7 @@
border-width: var(--form-input-border);
border-style: solid;
border-color: transparent;
border-radius: var(--radius);
border-radius: var(--theme-radius);
width: 100%;
height: 100%;
display: flex;
@ -64,7 +64,7 @@
color: rgb(var(--form-input-text-focus));
outline: 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 {

2
css/background.css
View File

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

64
css/base.css
View File

@ -1,5 +1,5 @@
:root {
--accent: 250, 130, 0;
--root-font-size: 14px;
--black: 0, 0, 0;
--white: 255, 255, 255;
--shade-01: 38, 40, 49;
@ -45,40 +45,33 @@
--form-checkbox-radio-chcked-label: var(--gray-16);
--form-checkbox-radio-disabled-label: var(--gray-04);
--form-range-thumb: var(--gray-12);
--root-font-size: 14px;
--radius: 0.2em;
--theme-accent: 250, 130, 0;
--theme-radius: 0.2rem;
--line-width: 0.2em;
--background: rgb(var(--gray-01));
--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-bold: "Open Sans Bold", sans-serif;
--font-light: "Open Sans Light", 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-shade-color: transparent;
--header-shade-opacity: none;
--header-search-width: 0%;
--header-padding-top: calc(var(--line-width) * var(--header-padding-multiplier-top));
--header-padding-bottom: calc(var(--line-width) * var(--header-padding-multiplier-bottom));
--header-padding-multiplier-top: 4;
--header-padding-multiplier-bottom: 4;
--header-border-width-top: calc(var(--line-width) * var(--header-border-width-multiplier-top));
--header-border-width-bottom: calc(var(--line-width) * var(--header-border-width-multiplier-bottom));
--header-border-width-multiplier-top: 1;
--header-border-width-multiplier-bottom: 1;
--header-padding-top: calc(var(--line-width) * var(--header-padding-top-multiplier));
--header-padding-bottom: calc(var(--line-width) * var(--header-padding-bottom-multiplier));
--header-padding-top-multiplier: 4;
--header-padding-bottom-multiplier: 4;
--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-bottom-multiplier));
--header-border-width-top-multiplier: 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-gutter-multiplier: 2;
--link-item-size: 1em;
@ -90,13 +83,24 @@
--background-accent-opacity: 0;
--background-blur: 0;
--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-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-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-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 */
/* can not be used in @media as of yet */
--breakpoint-sm: 550px;
@ -109,15 +113,15 @@
:root.is-link-style-block {
--link-item-width: 11em;
--link-item-height: 10em;
--url-height: 20%;
--edit-height: 30%;
--link-item-url-height: 20%;
--link-item-edit-height: 30%;
}
:root.is-link-style-list {
--link-item-width: 20em;
--link-item-height: 4em;
--url-height: 30%;
--edit-height: 50%;
--link-item-url-height: 30%;
--link-item-edit-height: 50%;
}
@media (min-width: 700px) {
@ -127,7 +131,7 @@
}
::selection {
background-color: rgb(var(--accent));
background-color: rgb(var(--theme-accent));
color: rgb(var(--white));
}

8
css/button.css
View File

@ -16,13 +16,13 @@ input[type="submit"] {
border-bottom-width: var(--line-width);
border-style: solid;
border-color: transparent;
border-radius: var(--radius);
border-radius: var(--theme-radius);
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
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;
flex-direction: row;
justify-content: center;
@ -51,7 +51,7 @@ input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
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));
transition: none;
}
@ -83,7 +83,7 @@ button [class*=" icon-"],
}
.button.active {
border-bottom-color: rgb(var(--accent));
border-bottom-color: rgb(var(--theme-accent));
color: rgb(var(--button-text-active));
}

4
css/clock.css
View File

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

4
css/date.css
View File

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

6
css/edge.css
View File

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

2
css/greeting.css
View File

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

40
css/header.css
View File

@ -46,11 +46,11 @@
}
.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 {
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 {
@ -109,19 +109,39 @@
position: relative;
}
.header-search {
width: var(--header-search-width);
}
.is-header-search-width-style-auto .header-search {
.is-header-search-style-auto .header-search {
flex-grow: 1;
min-width: 10em;
}
.is-header-search-width-style-custom .header-search {
.is-header-search-style-custom .header-search {
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-clock,
.header-search,
@ -136,8 +156,8 @@
.is-header-search-show .header-search,
.is-header-date-show .header-date,
.is-header-clock-show .header-clock,
.is-header-edit-add-show .header-edit-add,
.is-header-accent-show .header-accent,
.is-header-button-edit-add-show .header-edit-add,
.is-header-button-accent-show .header-accent,
.is-header-greeting-show .header-greeting,
.is-header-transitional-show .header-transitional,
.is-menu .header-menu {

62
css/link.css
View File

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

10
css/menu.css
View File

@ -20,8 +20,8 @@
}
.menu-area {
background-color: rgb(var(--gray-01));
border-radius: var(--radius);
background-color: rgba(var(--gray-01), 0.95);
border-radius: var(--theme-radius);
width: 100%;
max-height: 100%;
overflow-y: auto;
@ -65,7 +65,7 @@
}
.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 {
@ -85,7 +85,7 @@
margin: 0;
padding-top: 0.75em;
padding-bottom: 0.75em;
border-radius: 0 var(--radius) 0 0;
border-radius: 0 var(--theme-radius) 0 0;
}
.menu-nav-button {
@ -99,7 +99,7 @@
}
.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-"],

8
css/modal.css
View File

@ -38,7 +38,7 @@
.modal-body {
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;
max-height: calc(90vh - 3.6666666667em);
overflow-y: auto;
@ -59,7 +59,7 @@
background-color: rgb(var(--gray-01));
position: relative;
z-index: 2;
border-radius: 0 0 var(--radius) var(--radius);
border-radius: 0 0 var(--theme-radius) var(--theme-radius);
display: flex;
}
@ -73,9 +73,9 @@
}
.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 {
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 {
background-color: rgba(var(--accent), 0.4);
background-color: rgba(var(--theme-accent), 0.4);
position: fixed;
top: -1em;
left: -1em;
@ -14,5 +14,5 @@
}
.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;
background-color: rgb(var(--gray-04));
border: 0;
border-radius: calc(var(--radius) * 2);
border-radius: calc(var(--theme-radius) * 2);
color: rgb(var(--gray-18));
font-size: 0.8em;
font-family: var(--font-regular);

2
css/transitional.css
View File

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

2
css/typography.css
View File

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

94
index.html
View File

@ -69,24 +69,24 @@
<span class="icon-close"></span>
</button>
</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="input-wrap input-button input-hide py-0">
<input id="control-edit" class="control-edit" type="checkbox" tabindex="1">
<label for="control-edit" class=" mb-0">Edit</label>
<input id="control-link-edit" class="control-link-edit" type="checkbox" tabindex="1">
<label for="control-link-edit" class=" mb-0">Edit</label>
</div>
<button class="button control-add" tabindex="1">
<button class="button control-link-add" tabindex="1">
<span class="button-text">Add</span>
</button>
</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">
<input id="control-theme-accent-current" class="control-theme-accent-current" type="color" tabindex="1">
<label for="control-theme-accent-current">Accent</label>
</div>
</div>
<div class="header-item header-menu">
<div class="header-item header-button header-menu">
<button id="control-menu" class="control-menu button mb-0" tabindex="1">
<span class="button-text"><span class="icon-settings"></span></span>
</button>
@ -253,6 +253,14 @@
<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">
</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>
@ -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">
<label for="control-header-transitional-type-its">"It's"</label>
</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>
@ -342,6 +358,14 @@
<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>
</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 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">
<label for="control-header-date-format-monthdate">Month / Date</label>
</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 class="menu-item">
@ -482,20 +514,21 @@
</div>
<div class="form-indent">
<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">
<input id="control-header-search-width-style-auto" class="control-header-search-width-style-auto" type="radio" name="control-header-search-width" value="auto" tabindex="1">
<label for="control-header-search-width-style-auto">Auto</label>
<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-style-auto">Auto</label>
<p class="input-helper small muted">Search box will grow to best fit available space.</p>
</div>
<div class="input-wrap">
<input id="control-header-search-width-style-custom" class="control-header-search-width-style-custom" type="radio" name="control-header-search-width" value="custom" tabindex="1">
<label for="control-header-search-width-style-custom">Custom</label>
<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-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 class="form-indent">
<div class="input-wrap">
<label for="control-header-search-width-custom">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">
<label for="control-header-search-width">Width</label>
<input id="control-header-search-width" class="control-header-search-width" type="range" min="10" max="100" value="0" tabindex="1">
</div>
</div>
<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">
<label for="control-header-search-text-align-right">Right</label>
</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>
@ -561,13 +603,21 @@
</div>
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-header-edit-add-show" class="control-header-edit-add-show" type="checkbox" tabindex="1">
<label for="control-header-edit-add-show">Show Edit/Add</label>
<input id="control-header-button-edit-add-show" class="control-header-button-edit-add-show" type="checkbox" tabindex="1">
<label for="control-header-button-edit-add-show">Show Edit/Add</label>
</div>
<hr>
<div class="input-wrap">
<input id="control-header-accent-show" class="control-header-accent-show" type="checkbox" tabindex="1">
<label for="control-header-accent-show">Show Accent</label>
<input id="control-header-button-accent-show" class="control-header-button-accent-show" type="checkbox" tabindex="1">
<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>
@ -690,7 +740,7 @@
<hr>
<div class="input-wrap">
<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 class="button-wrap">
<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>
<p class="input-helper small muted">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
</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 class="menu-item">

2
js/accent.js
View File

@ -3,7 +3,7 @@ var accent = (function() {
var render = function() {
var html = helper.e("html");
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() {

287
js/control.js
View File

@ -8,13 +8,13 @@ var control = (function() {
page.update();
}
}, {
element: helper.e(".control-add"),
element: helper.e(".control-link-add"),
type: "button",
func: function() {
link.add();
}
}, {
element: helper.e(".control-edit"),
element: helper.e(".control-link-edit"),
path: "link.edit",
type: "checkbox",
func: function() {
@ -228,7 +228,7 @@ var control = (function() {
}
}],
func: function() {
header.render.width.set();
header.render.area.width();
}
}, {
element: helper.e(".control-header-area-width-match"),
@ -248,7 +248,11 @@ var control = (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();
}
}, {
@ -362,6 +366,22 @@ var control = (function() {
greeting.clear();
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"),
path: "header.transitional.show",
@ -388,6 +408,22 @@ var control = (function() {
transitional.clear();
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"),
path: "header.clock.hours.show",
@ -538,6 +574,22 @@ var control = (function() {
transitional.clear();
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"),
path: "header.date.day.show",
@ -826,6 +878,22 @@ var control = (function() {
transitional.clear();
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"),
path: "header.search.show",
@ -833,29 +901,29 @@ var control = (function() {
func: function() {
render();
dependents();
header.render.search();
header.render.search.width();
}
}, {
element: helper.e(".control-header-search-width-style-auto"),
path: "header.search.width.style",
element: helper.e(".control-header-search-style-auto"),
path: "header.search.style",
type: "radio",
func: function() {
render();
dependents();
header.render.search();
header.render.search.width();
}
}, {
element: helper.e(".control-header-search-width-style-custom"),
path: "header.search.width.style",
element: helper.e(".control-header-search-style-custom"),
path: "header.search.style",
type: "radio",
func: function() {
render();
dependents();
header.render.search();
header.render.search.width();
}
}, {
element: helper.e(".control-header-search-width-custom"),
path: "header.search.width.custom",
element: helper.e(".control-header-search-width"),
path: "header.search.width",
type: "range",
additionalEvents: [{
event: "input",
@ -897,7 +965,7 @@ var control = (function() {
}
}],
func: function() {
header.render.search();
header.render.search.width();
}
}, {
element: helper.e(".control-header-search-focus"),
@ -979,18 +1047,52 @@ var control = (function() {
render();
}
}, {
element: helper.e(".control-header-edit-add-show"),
path: "header.editAdd.show",
type: "checkbox",
element: helper.e(".control-header-search-size"),
path: "header.search.size",
type: "range",
valueMod: ["float"],
func: function() {
render();
header.render.search.size();
}
}, {
element: helper.e(".control-header-accent-show"),
path: "header.accent.show",
element: helper.e(".control-header-search-size-default"),
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",
func: function() {
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"),
@ -1193,7 +1295,7 @@ var control = (function() {
}
}],
func: function() {
link.render.width.set();
link.render.area.width();
}
}, {
element: helper.e(".control-link-area-width-match"),
@ -1213,7 +1315,11 @@ var control = (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();
}
}, {
@ -1309,7 +1415,7 @@ var control = (function() {
}
}],
func: function() {
link.render.item.size.set();
link.render.item.size();
}
}, {
element: helper.e(".control-link-item-size-default"),
@ -1324,7 +1430,8 @@ var control = (function() {
}
}],
func: function() {
link.render.item.size.default();
_setValue("link.item.size", 1);
link.render.item.size();
update();
}
}, {
@ -1350,13 +1457,14 @@ var control = (function() {
type: "range",
valueMod: ["float"],
func: function() {
link.render.item.display.letter.set();
link.render.item.display.letter();
}
}, {
element: helper.e(".control-link-item-display-letter-size-default"),
type: "button",
func: function() {
link.render.item.display.letter.default();
_setValue("link.item.display.letter.size", 2);
link.render.item.display.letter();
update();
}
}, {
@ -1365,13 +1473,14 @@ var control = (function() {
type: "range",
valueMod: ["float"],
func: function() {
link.render.item.display.icon.set();
link.render.item.display.icon();
}
}, {
element: helper.e(".control-link-item-display-icon-size-default"),
type: "button",
func: function() {
link.render.item.display.icon.default();
_setValue("link.item.display.icon.size", 2);
link.render.item.icon.letter();
update();
}
}, {
@ -1394,7 +1503,8 @@ var control = (function() {
element: helper.e(".control-link-item-name-size-default"),
type: "button",
func: function() {
link.render.item.name.default();
_setValue("link.item.display.icon.size", 0.9);
link.render.item.name.set();
update();
}
}, {
@ -1545,6 +1655,22 @@ var control = (function() {
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"),
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 eventType = {
button: "click",
@ -1768,31 +1907,31 @@ var control = (function() {
};
var _search = function() {
helper.removeClass(html, "is-header-search-show");
helper.removeClass(html, "is-header-search-width-style-custom");
helper.removeClass(html, "is-header-search-width-style-auto");
helper.removeClass(html, "is-header-search-style-custom");
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-center");
helper.removeClass(html, "is-header-search-text-align-right");
if (state.get().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.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;
};
var _editAdd = function() {
if (state.get().header.editAdd.show) {
helper.addClass(html, "is-header-edit-add-show");
if (state.get().header.button.editAdd.show) {
helper.addClass(html, "is-header-button-edit-add-show");
} else {
helper.removeClass(html, "is-header-edit-add-show");
helper.removeClass(html, "is-header-button-edit-add-show");
};
};
var _accent = function() {
if (state.get().header.accent.show) {
helper.addClass(html, "is-header-accent-show");
if (state.get().header.button.accent.show) {
helper.addClass(html, "is-header-button-accent-show");
} else {
helper.removeClass(html, "is-header-accent-show");
helper.removeClass(html, "is-header-button-accent-show");
};
};
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-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 activeCount = 0;
@ -2056,6 +2204,15 @@ var control = (function() {
} else {
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() {
if (state.get().header.shade.show) {
@ -2088,11 +2245,11 @@ var control = (function() {
};
var _search = function() {
if (state.get().header.search.show) {
helper.e(".control-header-search-width-style-label").removeAttribute("disabled");
helper.e(".control-header-search-width-style-auto").disabled = false;
helper.e(".control-header-search-width-style-custom").disabled = false;
helper.e("[for=control-header-search-width-custom]").removeAttribute("disabled");
helper.e(".control-header-search-width-custom").disabled = false;
helper.e(".control-header-search-style-label").removeAttribute("disabled");
helper.e(".control-header-search-style-auto").disabled = false;
helper.e(".control-header-search-style-custom").disabled = false;
helper.e("[for=control-header-search-width]").removeAttribute("disabled");
helper.e(".control-header-search-width").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-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-center").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 {
helper.e(".control-header-search-width-style-label").setAttribute("disabled", "");
helper.e(".control-header-search-width-style-auto").disabled = true;
helper.e(".control-header-search-width-style-custom").disabled = true;
helper.e("[for=control-header-search-width-custom]").setAttribute("disabled", "");
helper.e(".control-header-search-width-custom").disabled = true;
helper.e(".control-header-search-style-label").setAttribute("disabled", "");
helper.e(".control-header-search-style-auto").disabled = true;
helper.e(".control-header-search-style-custom").disabled = true;
helper.e("[for=control-header-search-width]").setAttribute("disabled", "");
helper.e(".control-header-search-width").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-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-center").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") {
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(".control-header-search-engine-custom-url").disabled = true;
};
if (state.get().header.search.show && state.get().header.search.width.style === "custom") {
helper.e("[for=control-header-search-width-custom]").removeAttribute("disabled");
helper.e(".control-header-search-width-custom").disabled = false;
if (state.get().header.search.show && state.get().header.search.style === "custom") {
helper.e("[for=control-header-search-width]").removeAttribute("disabled");
helper.e(".control-header-search-width").disabled = false;
} else {
helper.e("[for=control-header-search-width-custom]").setAttribute("disabled", "");
helper.e(".control-header-search-width-custom").disabled = true;
helper.e("[for=control-header-search-width]").setAttribute("disabled", "");
helper.e(".control-header-search-width").disabled = true;
};
};
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-hello").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 {
helper.e("[for=control-header-greeting-name]").setAttribute("disabled", "");
helper.e(".control-header-greeting-name").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-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() {
@ -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))) {
helper.e(".control-header-transitional-type-timeanddate").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 {
helper.e(".control-header-transitional-type-timeanddate").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();
@ -2180,10 +2355,10 @@ var control = (function() {
};
var _edit = function() {
if (bookmarks.get().length > 0) {
helper.e(".control-edit").disabled = false;
helper.e(".control-link-edit").disabled = false;
} else {
helper.e(".control-edit").disabled = true;
helper.e(".control-edit").checked = false;
helper.e(".control-link-edit").disabled = true;
helper.e(".control-link-edit").checked = false;
};
};
var _link = function() {

124
js/header.js
View File

@ -18,46 +18,64 @@ var header = (function() {
};
var render = {
width: {
set: function() {
_width();
},
match: function() {
_match();
area: {
width: function() {
_renderWidth();
}
},
shade: function() {
_shade();
_renderShade();
},
opacity: function() {
_opacity();
_renderOpacity();
},
padding: function() {
_padding();
_renderPadding();
},
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");
html.style.setProperty("--header-area-width", state.get().header.area.width + "%");
};
var _match = function() {
helper.setObject({
object: state.get(),
path: "header.area.width",
newValue: state.get().link.area.width
});
render.width.set();
};
var _shade = function() {
var _renderShade = function() {
var html = helper.e("html");
var fontSize = parseInt(getComputedStyle(html).fontSize, 10);
var scrollPosition = document.documentElement.scrollTop;
@ -78,42 +96,74 @@ var header = (function() {
};
};
var _opacity = function() {
var _renderOpacity = function() {
var html = helper.e("html");
if (state.get().header.shade.show) {
html.style.setProperty("--header-shade-opacity", state.get().header.shade.opacity);
};
};
var _padding = function() {
var _renderPadding = function() {
var html = helper.e("html");
html.style.setProperty("--header-padding-multiplier-top", state.get().header.padding.top);
html.style.setProperty("--header-padding-multiplier-bottom", state.get().header.padding.bottom);
html.style.setProperty("--header-padding-top-multiplier", state.get().header.padding.top);
html.style.setProperty("--header-padding-bottom-multiplier", state.get().header.padding.bottom);
};
var _border = function() {
var _renderBorder = function() {
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-multiplier-bottom", state.get().header.border.bottom.width);
html.style.setProperty("--header-border-width-top-multiplier", state.get().header.border.top.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");
if (state.get().header.search.show && state.get().header.search.width.style === "custom") {
html.style.setProperty("--header-search-width", state.get().header.search.width.custom + "%");
} else {
html.style.removeProperty("--header-search-width");
html.style.setProperty("--header-search-width", state.get().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() {
_bind();
render.width.set();
render.search();
render.area.width();
render.shade();
render.opacity();
render.padding();
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

49
js/init.js
View File

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

185
js/link.js
View File

@ -150,22 +150,26 @@ var link = (function() {
var form = helper.node("form|class:link-form");
var fieldset = helper.node("fieldset");
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 iconFormGroupWrap = helper.node("div|class:input-wrap");
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 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 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 nameInputWrap = helper.node("div|class:input-wrap");
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 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 colorInputLabel = 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 colorLabel = helper.node("label:Accent override|for:link-form-input-color");
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 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");
@ -179,7 +183,8 @@ var link = (function() {
letterRadioInputWrap.appendChild(letterRadioInput);
letterRadioInputWrap.appendChild(letterRadioLable);
fieldset.appendChild(letterRadioInputWrap);
letterFormIndet.appendChild(letterInput);
letterInputWrap.appendChild(letterInput);
letterFormIndet.appendChild(letterInputWrap);
fieldset.appendChild(letterFormIndet);
iconRadioInputWrap.appendChild(iconRadioInput);
iconRadioInputWrap.appendChild(iconRadioLable);
@ -188,22 +193,25 @@ var link = (function() {
iconFormGroup.appendChild(iconInput);
iconFormGroup.appendChild(iconFormGroupText);
iconFormGroup.appendChild(iconFormGroupClear);
iconFormIndet.appendChild(iconFormGroup);
iconFormIndet.appendChild(iconPara);
iconFormGroupWrap.appendChild(iconFormGroup);
iconFormGroupWrap.appendChild(iconPara);
iconFormIndet.appendChild(iconFormGroupWrap);
fieldset.appendChild(iconFormIndet);
fieldset.appendChild(helper.node("hr"));
fieldset.appendChild(nameLabel);
fieldset.appendChild(nameInput);
fieldset.appendChild(urlLabel);
fieldset.appendChild(urlInput);
nameInputWrap.appendChild(nameLabel);
nameInputWrap.appendChild(nameInput);
fieldset.appendChild(nameInputWrap);
urlInputWrap.appendChild(urlLabel);
urlInputWrap.appendChild(urlInput);
fieldset.appendChild(urlInputWrap);
fieldset.appendChild(helper.node("hr"));
fieldset.appendChild(colorInputLabel);
colorFormGroup.appendChild(colorInputInput);
colorFormGroup.appendChild(colorInput);
colorButtonRefresh.appendChild(colorButtonRefreshIcon);
colorFormGroup.appendChild(colorButtonRefresh);
colorInputWrap.appendChild(colorFormGroup);
fieldset.appendChild(colorInputWrap);
fieldset.appendChild(colorPara);
colorWrap.appendChild(colorLabel);
colorWrap.appendChild(colorFormGroup);
colorWrap.appendChild(colorPara);
fieldset.appendChild(colorWrap);
form.appendChild(fieldset);
letterRadioInput.addEventListener("change", function(event) {
@ -221,12 +229,12 @@ var link = (function() {
urlInput.addEventListener("input", function(event) {
link.stagedBookmarkData.url = this.value;
}, false);
colorInputInput.addEventListener("change", function(event) {
colorInput.addEventListener("change", function(event) {
link.stagedBookmarkData.accent.override = true;
link.stagedBookmarkData.accent.color = helper.hexToRgb(this.value);
}, false);
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.color = {
r: null,
@ -279,7 +287,7 @@ var link = (function() {
if (data.accent.override) {
linkItemOptions.attr.push({
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);
@ -506,18 +514,20 @@ var link = (function() {
return div;
};
var clear = function() {
var linkArea = helper.e(".link-area");
while (linkArea.lastChild) {
linkArea.removeChild(linkArea.lastChild);
};
};
var render = {
area: {
gap: function() {
_areaGap();
}
_renderAreaGap();
},
width: {
set: function() {
_renderWidthSet();
},
match: function() {
_renderWidthMatch();
width: function() {
_renderAreaWidth();
}
},
item: {
@ -525,50 +535,35 @@ var link = (function() {
_renderItemAll();
},
display: {
letter: {
set: function() {
_renderItemDisplayLetterSet();
letter: function() {
_renderItemDisplayLetter();
},
default: function() {
_renderItemDisplayLetterDefault();
icon: function() {
_renderItemDisplayIcon();
}
},
icon: {
set: function() {
_renderItemDisplayIconSet();
name: function() {
_renderItemName();
},
default: function() {
_renderItemDisplayIconDefault();
size: function() {
_renderItemSize();
}
}
},
name: {
set: function() {
_renderItemNameSet();
},
default: function() {
_renderItemNameDefault();
}
},
size: {
set: function() {
_renderItemSizeSet();
},
default: function() {
_renderItemSizeDefault();
}
},
},
tabIndex: function() {
_renderTabIndex();
}
};
var _areaGap = function() {
var _renderAreaGap = function() {
var html = helper.e("html");
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 linkArea = helper.e(".link-area");
var bookmarksToRender = false;
@ -617,76 +612,26 @@ var link = (function() {
};
};
var _renderWidthSet = function() {
var html = helper.e("html");
html.style.setProperty("--link-area-width", state.get().link.area.width + "%");
};
var _renderItemDisplayLetterSet = function() {
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 _renderItemDisplayLetterDefault = function() {
helper.setObject({
object: state.get(),
path: "link.item.display.letter.size",
newValue: 2
});
render.item.display.letter.set();
};
var _renderItemDisplayIconSet = function() {
var _renderItemDisplayIcon = function() {
var html = helper.e("html");
html.style.setProperty("--link-item-display-icon-size", state.get().link.item.display.icon.size + "em");
};
var _renderItemDisplayIconDefault = function() {
helper.setObject({
object: state.get(),
path: "link.item.display.icon.size",
newValue: 2
});
render.item.display.icon.set();
};
var _renderItemNameSet = function() {
var _renderItemName = function() {
var html = helper.e("html");
html.style.setProperty("--link-item-name-size", state.get().link.item.name.size + "em");
};
var _renderItemNameDefault = function() {
helper.setObject({
object: state.get(),
path: "link.item.name.size",
newValue: 0.9
});
render.item.name.set();
};
var _renderItemSizeSet = function() {
var _renderItemSize = function() {
var html = helper.e("html");
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 allLinkControlItem = helper.eA(".link-control-item");
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() {
render.area.gap();
render.area.width();
render.item.all();
render.item.size.set();
render.item.display.letter.set();
render.item.display.icon.set();
render.item.name.set();
render.item.name.default();
render.width.set();
render.item.size();
render.item.display.letter();
render.item.display.icon();
render.item.name();
};
// exposed methods

23
js/state.js
View File

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

19
js/theme.js
View File

@ -20,9 +20,26 @@ var theme = (function() {
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
return {
toggle: toggle
render: render,
toggle: toggle,
init: init
};
})();

28
js/update.js
View File

@ -427,6 +427,30 @@ var update = (function() {
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) {
// data.version = 3.00;
// return data;
@ -541,6 +565,10 @@ var update = (function() {
console.log("\t= running update 3.7.0");
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
// version bump

2
js/version.js
View File

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