diff --git a/css/auto-suggest.css b/css/auto-suggest.css index 737f99f2..9bfeb053 100644 --- a/css/auto-suggest.css +++ b/css/auto-suggest.css @@ -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 { diff --git a/css/background.css b/css/background.css index 45cb6e87..29010d4b 100755 --- a/css/background.css +++ b/css/background.css @@ -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; diff --git a/css/base.css b/css/base.css index 4b310a61..c831452a 100755 --- a/css/base.css +++ b/css/base.css @@ -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)); } diff --git a/css/button.css b/css/button.css index 421101c1..09f7cfa6 100755 --- a/css/button.css +++ b/css/button.css @@ -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)); } diff --git a/css/clock.css b/css/clock.css index c277fbee..810deacb 100755 --- a/css/clock.css +++ b/css/clock.css @@ -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, diff --git a/css/date.css b/css/date.css index 9158eb7a..bf9ac517 100755 --- a/css/date.css +++ b/css/date.css @@ -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, diff --git a/css/edge.css b/css/edge.css index 69e8b8e5..652dee74 100644 --- a/css/edge.css +++ b/css/edge.css @@ -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; diff --git a/css/form.css b/css/form.css index 7b6e89be..c9602d86 100755 --- a/css/form.css +++ b/css/form.css @@ -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; } diff --git a/css/greeting.css b/css/greeting.css index 89cd206b..d95e5e0a 100755 --- a/css/greeting.css +++ b/css/greeting.css @@ -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)); diff --git a/css/header.css b/css/header.css index 3eecac5c..d46299d7 100755 --- a/css/header.css +++ b/css/header.css @@ -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 { diff --git a/css/link.css b/css/link.css index 73e753d1..78a084c1 100755 --- a/css/link.css +++ b/css/link.css @@ -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, diff --git a/css/menu.css b/css/menu.css index b5520441..f8576768 100755 --- a/css/menu.css +++ b/css/menu.css @@ -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-"], diff --git a/css/modal.css b/css/modal.css index 39706223..5a1e09a7 100755 --- a/css/modal.css +++ b/css/modal.css @@ -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 } diff --git a/css/shade.css b/css/shade.css index 722f516d..737b75d9 100755 --- a/css/shade.css +++ b/css/shade.css @@ -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); } diff --git a/css/tip.css b/css/tip.css index 7d4ee771..e277d1dd 100755 --- a/css/tip.css +++ b/css/tip.css @@ -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); diff --git a/css/transitional.css b/css/transitional.css index 12fc0eaf..55a72b67 100644 --- a/css/transitional.css +++ b/css/transitional.css @@ -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)); diff --git a/css/typography.css b/css/typography.css index 0ba6ab0b..e815f0f6 100755 --- a/css/typography.css +++ b/css/typography.css @@ -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; } diff --git a/index.html b/index.html index 737f79db..42d5179c 100644 --- a/index.html +++ b/index.html @@ -69,24 +69,24 @@ -
+
- - + +
-
-
+
-
+
@@ -253,6 +253,14 @@
+
+
+ + +
+
+ +
@@ -276,6 +284,14 @@ +
+
+ + +
+
+ +
@@ -342,6 +358,14 @@ +
+
+ + +
+
+ +
@@ -469,6 +493,14 @@
+
+
+ + +
+
+ +
@@ -482,20 +514,21 @@
- +
- - + +

Search box will grow to best fit available space.

- - + + +

Define how wide the Search box should be inside the Header Area.

- - + +
@@ -552,6 +585,15 @@
+
+
+ + +

Only the Search box width control will change the Width of the Search box.

+
+
+ +
@@ -561,13 +603,21 @@
- - + +
- - + + +
+
+
+ + +
+
+
@@ -690,7 +740,7 @@
- +
@@ -855,6 +905,14 @@

Accent Colour and Background Image may need to be changed to best fit the Theme Style.

+
+
+ + +
+
+ +
diff --git a/js/accent.js b/js/accent.js index 753e7883..c034c17a 100644 --- a/js/accent.js +++ b/js/accent.js @@ -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() { diff --git a/js/control.js b/js/control.js index 720d5d70..627244e3 100644 --- a/js/control.js +++ b/js/control.js @@ -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() { diff --git a/js/header.js b/js/header.js index a1b189e4..93c6c5f5 100644 --- a/js/header.js +++ b/js/header.js @@ -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 diff --git a/js/init.js b/js/init.js index 25b413b6..22e4ee31 100644 --- a/js/init.js +++ b/js/init.js @@ -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(); diff --git a/js/link.js b/js/link.js index 63e0dfb2..6c2a995b 100644 --- a/js/link.js +++ b/js/link.js @@ -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(); - } - }, - width: { - set: function() { - _renderWidthSet(); + _renderAreaGap(); }, - match: function() { - _renderWidthMatch(); + width: function() { + _renderAreaWidth(); } }, item: { @@ -525,50 +535,35 @@ var link = (function() { _renderItemAll(); }, display: { - letter: { - set: function() { - _renderItemDisplayLetterSet(); - }, - default: function() { - _renderItemDisplayLetterDefault(); - } + letter: function() { + _renderItemDisplayLetter(); }, - icon: { - set: function() { - _renderItemDisplayIconSet(); - }, - default: function() { - _renderItemDisplayIconDefault(); - } + icon: function() { + _renderItemDisplayIcon(); } }, - name: { - set: function() { - _renderItemNameSet(); - }, - default: function() { - _renderItemNameDefault(); - } - }, - size: { - set: function() { - _renderItemSizeSet(); - }, - default: function() { - _renderItemSizeDefault(); - } + name: function() { + _renderItemName(); }, + size: function() { + _renderItemSize(); + } }, 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 diff --git a/js/state.js b/js/state.js index ef10d98d..41848c02 100644 --- a/js/state.js +++ b/js/state.js @@ -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 - }, + style: "auto", + width: 30, focus: false, engine: { selected: "google", @@ -95,13 +95,17 @@ var state = (function() { }, text: { align: "center" - } + }, + size: 1 }, - editAdd: { - show: true, - }, - accent: { - show: true, + button: { + editAdd: { + show: true, + }, + accent: { + show: true, + }, + size: 1 }, shade: { show: true, @@ -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: { diff --git a/js/theme.js b/js/theme.js index 1fba04bd..19f3a6c3 100644 --- a/js/theme.js +++ b/js/theme.js @@ -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 }; })(); diff --git a/js/update.js b/js/update.js index c1a2efda..83e34b72 100644 --- a/js/update.js +++ b/js/update.js @@ -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 diff --git a/js/version.js b/js/version.js index 4dd10adc..b32c8d69 100644 --- a/js/version.js +++ b/js/version.js @@ -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(".");