[feature] light and dark mode
This commit is contained in:
Kombie
GitHub
parent
e5f868a84a
commit
1eb3b3f524
|
|
@ -16,6 +16,7 @@ New-tab-page/Start-page for all browsers
|
|||
- <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>a</kbd> *to add a new bookmark*
|
||||
- <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>m</kbd> *to open menu*
|
||||
- <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>e</kbd> *to toggle edit state*
|
||||
- <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>d</kbd> *to toggle dark and light mode`
|
||||
- <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>r</kbd> *random theme if option is turned on in* `menu > layout > random Accent colour`
|
||||
- Responsive design
|
||||
- Customise Accent colour!
|
||||
|
|
|
|||
|
|
@ -1,26 +1,48 @@
|
|||
:root {
|
||||
--black: 0, 0, 0;
|
||||
--white: 255, 255, 255;
|
||||
--gray-01: 38, 40, 49;
|
||||
--gray-02: 47, 51, 62;
|
||||
--gray-03: 57, 62, 75;
|
||||
--gray-04: 67, 73, 88;
|
||||
--gray-05: 77, 84, 101;
|
||||
--gray-06: 87, 95, 114;
|
||||
--gray-07: 97, 106, 127;
|
||||
--gray-08: 107, 117, 140;
|
||||
--gray-09: 117, 128, 153;
|
||||
--gray-10: 127, 139, 166;
|
||||
--gray-11: 137, 151, 180;
|
||||
--gray-12: 149, 162, 187;
|
||||
--gray-13: 162, 173, 195;
|
||||
--gray-14: 174, 184, 203;
|
||||
--gray-15: 187, 195, 211;
|
||||
--gray-16: 199, 206, 218;
|
||||
--gray-17: 212, 217, 226;
|
||||
--gray-18: 224, 228, 234;
|
||||
--gray-19: 237, 239, 242;
|
||||
--gray-20: 250, 250, 250;
|
||||
--shade-01: 38, 40, 49;
|
||||
--shade-02: 47, 51, 62;
|
||||
--shade-03: 57, 62, 75;
|
||||
--shade-04: 67, 73, 88;
|
||||
--shade-05: 77, 84, 101;
|
||||
--shade-06: 87, 95, 114;
|
||||
--shade-07: 97, 106, 127;
|
||||
--shade-08: 107, 117, 140;
|
||||
--shade-09: 117, 128, 153;
|
||||
--shade-10: 127, 139, 166;
|
||||
--shade-11: 137, 151, 180;
|
||||
--shade-12: 149, 162, 187;
|
||||
--shade-13: 162, 173, 195;
|
||||
--shade-14: 174, 184, 203;
|
||||
--shade-15: 187, 195, 211;
|
||||
--shade-16: 199, 206, 218;
|
||||
--shade-17: 212, 217, 226;
|
||||
--shade-18: 224, 228, 234;
|
||||
--shade-19: 237, 239, 242;
|
||||
--shade-20: 250, 250, 250;
|
||||
--button-text: var(--gray-12);
|
||||
--button-text-hover-focus: var(--style-neutral-text);
|
||||
--button-text-active: var(--style-neutral-text);
|
||||
--button-text-disabled: var(--gray-04);
|
||||
--button-link-text: var(--gray-10);
|
||||
--button-link-text-hover-focus: var(--gray-14);
|
||||
--button-link-text-active: var(--gray-18);
|
||||
--button-link-text-disabled: var(--gray-04);
|
||||
--form-input-text: var(--gray-16);
|
||||
--form-input-text-hover: var(--style-neutral-text);
|
||||
--form-input-text-focus: var(--style-neutral-text);
|
||||
--form-input-text-disabled: var(--gray-04);
|
||||
--form-input-text-disabled-helper-text: var(--gray-04);
|
||||
--form-input-placeholder: var(--gray-06);
|
||||
--form-input-placeholder-hover-focus: var(--gray-10);
|
||||
--form-input-placeholder-disabled: var(--gray-04);
|
||||
--form-label: var(--gray-16);
|
||||
--form-label-disabled: var(--gray-04);
|
||||
--form-checkbox-radio-label: var(--gray-12);
|
||||
--form-checkbox-radio-chcked-label: var(--gray-16);
|
||||
--form-checkbox-radio-disabled-label: var(--gray-04);
|
||||
--form-range-thumb: var(--gray-12);
|
||||
--accent: 0, 255, 0;
|
||||
--root-font-size: 14px;
|
||||
--radius: 0.2em;
|
||||
|
|
@ -91,13 +113,14 @@ html {
|
|||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: rgb(var(--white));
|
||||
color: rgb(var(--style-neutral-text));
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
font-family: var(--font-regular);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
transition: background-color var(--animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.is-menu-open body {
|
||||
|
|
@ -120,3 +143,51 @@ body {
|
|||
display: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
.is-theme-style-dark {
|
||||
--gray-01: var(--shade-01);
|
||||
--gray-02: var(--shade-02);
|
||||
--gray-03: var(--shade-03);
|
||||
--gray-04: var(--shade-04);
|
||||
--gray-05: var(--shade-05);
|
||||
--gray-06: var(--shade-06);
|
||||
--gray-07: var(--shade-07);
|
||||
--gray-08: var(--shade-08);
|
||||
--gray-09: var(--shade-09);
|
||||
--gray-10: var(--shade-10);
|
||||
--gray-11: var(--shade-11);
|
||||
--gray-12: var(--shade-12);
|
||||
--gray-13: var(--shade-13);
|
||||
--gray-14: var(--shade-14);
|
||||
--gray-15: var(--shade-15);
|
||||
--gray-16: var(--shade-16);
|
||||
--gray-17: var(--shade-17);
|
||||
--gray-18: var(--shade-18);
|
||||
--gray-19: var(--shade-19);
|
||||
--gray-20: var(--shade-20);
|
||||
--style-neutral-text: var(--white);
|
||||
}
|
||||
|
||||
.is-theme-style-light {
|
||||
--gray-01: var(--shade-20);
|
||||
--gray-02: var(--shade-19);
|
||||
--gray-03: var(--shade-18);
|
||||
--gray-04: var(--shade-17);
|
||||
--gray-05: var(--shade-16);
|
||||
--gray-06: var(--shade-15);
|
||||
--gray-07: var(--shade-14);
|
||||
--gray-08: var(--shade-13);
|
||||
--gray-09: var(--shade-12);
|
||||
--gray-10: var(--shade-11);
|
||||
--gray-11: var(--shade-10);
|
||||
--gray-12: var(--shade-09);
|
||||
--gray-13: var(--shade-08);
|
||||
--gray-14: var(--shade-07);
|
||||
--gray-15: var(--shade-06);
|
||||
--gray-16: var(--shade-05);
|
||||
--gray-17: var(--shade-04);
|
||||
--gray-18: var(--shade-03);
|
||||
--gray-19: var(--shade-02);
|
||||
--gray-20: var(--shade-01);
|
||||
--style-neutral-text: var(--black);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ input[type="submit"] {
|
|||
background-color: rgb(var(--gray-02));
|
||||
padding: 0.125em 1em;
|
||||
margin: 0 0 1em 0;
|
||||
color: rgb(var(--gray-12));
|
||||
color: rgb(var(--button-text));
|
||||
font-size: 1em;
|
||||
font-family: var(--font-regular);
|
||||
min-height: 2.5em;
|
||||
|
|
@ -41,7 +41,7 @@ input[type="submit"]:hover,
|
|||
input[type="submit"]:focus {
|
||||
background-color: rgb(var(--gray-03));
|
||||
border-bottom-color: rgb(var(--gray-08));
|
||||
color: rgb(var(--white));
|
||||
color: rgb(var(--button-text-hover-focus));
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
@ -52,7 +52,7 @@ input[type="reset"]:active,
|
|||
input[type="submit"]:active {
|
||||
background-color: rgb(var(--gray-04));
|
||||
border-bottom-color: rgb(var(--accent));
|
||||
color: rgb(var(--white));
|
||||
color: rgb(var(--button-text-active));
|
||||
transition: none;
|
||||
}
|
||||
|
||||
|
|
@ -66,7 +66,7 @@ button[disabled]:active,
|
|||
.button[disabled]:active {
|
||||
background-color: rgb(var(--gray-02));
|
||||
border-color: transparent;
|
||||
color: rgb(var(--gray-04));
|
||||
color: rgb(var(--button-text-disabled));
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
|
@ -84,7 +84,7 @@ button [class*=" icon-"],
|
|||
|
||||
.button.active {
|
||||
border-bottom-color: rgb(var(--accent));
|
||||
color: rgb(var(--white));
|
||||
color: rgb(var(--button-text-active));
|
||||
}
|
||||
|
||||
.button-small {
|
||||
|
|
@ -152,7 +152,18 @@ button [class*=" button-"]:last-child,
|
|||
.button-link {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
color: rgb(var(--gray-10));
|
||||
color: rgb(var(--button-link-text));
|
||||
}
|
||||
|
||||
.button-link:hover,
|
||||
.button-link:focus {
|
||||
background-color: transparent;
|
||||
color: rgb(var(--button-link-text-hover-focus));
|
||||
}
|
||||
|
||||
.button-link:active {
|
||||
background-color: transparent;
|
||||
color: rgb(var(--button-link-text-active));
|
||||
}
|
||||
|
||||
.button-link[disabled] {
|
||||
|
|
@ -166,14 +177,3 @@ button [class*=" button-"]:last-child,
|
|||
background-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.button-link:hover,
|
||||
.button-link:focus {
|
||||
background-color: transparent;
|
||||
color: rgb(var(--gray-14));
|
||||
}
|
||||
|
||||
.button-link:active {
|
||||
background-color: transparent;
|
||||
color: rgb(var(--gray-18));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
border-radius: var(--radius);
|
||||
font-size: 1em;
|
||||
font-family: var(--font-fjalla);
|
||||
color: rgb(var(--white));
|
||||
color: rgb(var(--style-neutral-text));
|
||||
width: 100%;
|
||||
min-height: 2.5em;
|
||||
display: flex;
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
}
|
||||
|
||||
.clock-hours {
|
||||
color: rgb(var(--white));
|
||||
color: rgb(var(--style-neutral-text));
|
||||
}
|
||||
|
||||
.clock-minutes,
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
border-radius: var(--radius);
|
||||
font-size: 1em;
|
||||
font-family: var(--font-fjalla);
|
||||
color: rgb(var(--white));
|
||||
color: rgb(var(--style-neutral-text));
|
||||
width: 100%;
|
||||
min-height: 2.5em;
|
||||
display: flex;
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
}
|
||||
|
||||
.date-day {
|
||||
color: rgb(var(--white));
|
||||
color: rgb(var(--style-neutral-text));
|
||||
}
|
||||
|
||||
.date-date,
|
||||
|
|
|
|||
|
|
@ -4,16 +4,18 @@ input[type="password"],
|
|||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="text"] {
|
||||
background-color: rgb(var(--gray-14));
|
||||
padding: 0 0.5em;
|
||||
background-color: rgb(var(--gray-02));
|
||||
padding: 0 1em;
|
||||
margin: 0 0 1em 0;
|
||||
color: rgb(var(--black));
|
||||
color: rgb(var(--form-input-text));
|
||||
font-size: 1em;
|
||||
font-family: var(--font-regular);
|
||||
line-height: 2.5em;
|
||||
height: 2.5em;
|
||||
width: 100%;
|
||||
border-width: var(--line-width);
|
||||
border-width: 0;
|
||||
/* border-top-width: var(--line-width); */
|
||||
/* border-bottom-width: var(--line-width); */
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
border-radius: var(--radius);
|
||||
|
|
@ -22,49 +24,64 @@ input[type="text"] {
|
|||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="email"]:hover,
|
||||
input[type="number"]:hover,
|
||||
input[type="password"]:hover,
|
||||
input[type="search"]:hover,
|
||||
input[type="tel"]:hover,
|
||||
input[type="text"]:hover {
|
||||
background-color: rgb(var(--gray-03));
|
||||
/* border-bottom-color: rgb(var(--gray-08)); */
|
||||
color: rgb(var(--form-input-text-hover));
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 var(--line-width) rgb(var(--gray-06));
|
||||
}
|
||||
|
||||
input[type="email"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="text"]:focus {
|
||||
background-color: rgb(var(--gray-02));
|
||||
/* border-bottom-color: rgb(var(--accent)); */
|
||||
/* border-color: transparent; */
|
||||
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);
|
||||
}
|
||||
|
||||
input[type="email"][disabled],
|
||||
input[type="email"][disabled]:hover,
|
||||
input[type="email"][disabled]:focus,
|
||||
input[type="email"][disabled]::placeholder,
|
||||
input[type="email"][disabled]:hover::placeholder,
|
||||
input[type="email"][disabled]:focus::placeholder,
|
||||
input[type="number"][disabled],
|
||||
input[type="number"][disabled]:hover,
|
||||
input[type="number"][disabled]:focus,
|
||||
input[type="number"][disabled]::placeholder,
|
||||
input[type="number"][disabled]:hover::placeholder,
|
||||
input[type="number"][disabled]:focus::placeholder,
|
||||
input[type="password"][disabled],
|
||||
input[type="password"][disabled]:hover,
|
||||
input[type="password"][disabled]:focus,
|
||||
input[type="password"][disabled]::placeholder,
|
||||
input[type="password"][disabled]:hover::placeholder,
|
||||
input[type="password"][disabled]:focus::placeholder,
|
||||
input[type="search"][disabled],
|
||||
input[type="search"][disabled]:hover,
|
||||
input[type="search"][disabled]:focus,
|
||||
input[type="search"][disabled]::placeholder,
|
||||
input[type="search"][disabled]:hover::placeholder,
|
||||
input[type="search"][disabled]:focus::placeholder,
|
||||
input[type="tel"][disabled],
|
||||
input[type="tel"][disabled]:hover,
|
||||
input[type="tel"][disabled]:focus,
|
||||
input[type="tel"][disabled]::placeholder,
|
||||
input[type="tel"][disabled]:hover::placeholder,
|
||||
input[type="tel"][disabled]:focus::placeholder,
|
||||
input[type="text"][disabled],
|
||||
input[type="text"][disabled]:hover,
|
||||
input[type="text"][disabled]:focus,
|
||||
input[type="text"][disabled]::placeholder,
|
||||
input[type="text"][disabled]:hover::placeholder,
|
||||
input[type="text"][disabled]:focus::placeholder {
|
||||
background-color: rgb(var(--gray-04));
|
||||
color: rgb(var(--gray-08));
|
||||
border-color: transparent;
|
||||
input[type="text"][disabled] {
|
||||
background-color: transparent;
|
||||
padding: 0 calc(1em - var(--line-width));
|
||||
color: rgb(var(--form-input-text-disabled));
|
||||
border-width: var(--line-width);
|
||||
border-color: rgb(var(--gray-02));
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
input[type="email"][disabled]:hover,
|
||||
input[type="email"][disabled]:focus,
|
||||
input[type="number"][disabled]:hover,
|
||||
input[type="number"][disabled]:focus,
|
||||
input[type="password"][disabled]:hover,
|
||||
input[type="password"][disabled]:focus,
|
||||
input[type="search"][disabled]:hover,
|
||||
input[type="search"][disabled]:focus,
|
||||
input[type="tel"][disabled]:hover,
|
||||
input[type="tel"][disabled]:focus,
|
||||
input[type="text"][disabled]:hover,
|
||||
input[type="text"][disabled]:focus {
|
||||
color: rgb(var(--form-input-text-disabled));
|
||||
}
|
||||
|
||||
input[type="checkbox"][disabled]~.input-helper,
|
||||
input[type="radio"][disabled]~.input-helper,
|
||||
input[type="email"][disabled]~.input-helper,
|
||||
|
|
@ -73,33 +90,7 @@ input[type="password"][disabled]~.input-helper,
|
|||
input[type="search"][disabled]~.input-helper,
|
||||
input[type="tel"][disabled]~.input-helper,
|
||||
input[type="text"][disabled]~.input-helper {
|
||||
color: rgb(var(--gray-04));
|
||||
}
|
||||
|
||||
input[type="email"]:hover,
|
||||
input[type="number"]:hover,
|
||||
input[type="password"]:hover,
|
||||
input[type="search"]:hover,
|
||||
input[type="tel"]:hover,
|
||||
input[type="text"]:hover {
|
||||
background-color: rgb(var(--gray-16));
|
||||
border-color: rgb(var(--gray-10));
|
||||
color: rgb(var(--black));
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="email"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="text"]:focus {
|
||||
background-color: rgb(var(--white));
|
||||
border-color: transparent;
|
||||
color: rgb(var(--black));
|
||||
outline: none;
|
||||
z-index: 2;
|
||||
box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 var(--line-width) rgb(var(--accent));
|
||||
color: rgb(var(--form-input-text-disabled-helper-text));
|
||||
}
|
||||
|
||||
input[type="email"]::placeholder,
|
||||
|
|
@ -108,7 +99,7 @@ input[type="password"]::placeholder,
|
|||
input[type="search"]::placeholder,
|
||||
input[type="tel"]::placeholder,
|
||||
input[type="text"]::placeholder {
|
||||
color: rgb(var(--gray-10));
|
||||
color: rgb(var(--form-input-placeholder));
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
|
|
@ -118,7 +109,7 @@ input[type="password"]:hover::placeholder,
|
|||
input[type="search"]:hover::placeholder,
|
||||
input[type="tel"]:hover::placeholder,
|
||||
input[type="text"]:hover::placeholder {
|
||||
color: rgb(var(--gray-12));
|
||||
color: rgb(var(--form-input-placeholder-hover-focus));
|
||||
}
|
||||
|
||||
input[type="email"]:focus::placeholder,
|
||||
|
|
@ -127,19 +118,40 @@ input[type="password"]:focus::placeholder,
|
|||
input[type="search"]:focus::placeholder,
|
||||
input[type="tel"]:focus::placeholder,
|
||||
input[type="text"]:focus::placeholder {
|
||||
color: rgb(var(--gray-14));
|
||||
color: rgb(var(--form-input-placeholder-hover-focus));
|
||||
}
|
||||
|
||||
input[type="email"][disabled]::placeholder,
|
||||
input[type="email"][disabled]:hover::placeholder,
|
||||
input[type="email"][disabled]:focus::placeholder,
|
||||
input[type="number"][disabled]::placeholder,
|
||||
input[type="number"][disabled]:hover::placeholder,
|
||||
input[type="number"][disabled]:focus::placeholder,
|
||||
input[type="password"][disabled]::placeholder,
|
||||
input[type="password"][disabled]:hover::placeholder,
|
||||
input[type="password"][disabled]:focus::placeholder,
|
||||
input[type="search"][disabled]::placeholder,
|
||||
input[type="search"][disabled]:hover::placeholder,
|
||||
input[type="search"][disabled]:focus::placeholder,
|
||||
input[type="tel"][disabled]::placeholder,
|
||||
input[type="tel"][disabled]:hover::placeholder,
|
||||
input[type="tel"][disabled]:focus::placeholder,
|
||||
input[type="text"][disabled]::placeholder,
|
||||
input[type="text"][disabled]:hover::placeholder,
|
||||
input[type="text"][disabled]:focus::placeholder {
|
||||
color: rgb(var(--form-input-placeholder-disabled));
|
||||
}
|
||||
|
||||
label {
|
||||
padding: 0.5em 0;
|
||||
color: rgb(var(--gray-16));
|
||||
color: rgb(var(--form-label));
|
||||
margin-bottom: 0;
|
||||
font-size: 1em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
label[disabled] {
|
||||
color: rgb(var(--gray-04));
|
||||
color: rgb(var(--form-label-disabled));
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
|
|
@ -222,11 +234,12 @@ input[type="radio"] {
|
|||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
/* transition: all var(--animation-speed-fast) ease-in-out; */
|
||||
}
|
||||
|
||||
input[type="checkbox"]+label,
|
||||
input[type="radio"]+label {
|
||||
color: rgb(var(--gray-12));
|
||||
color: rgb(var(--form-checkbox-radio-label));
|
||||
font-size: 1em;
|
||||
font-family: var(--font-regular);
|
||||
min-height: 2.5em;
|
||||
|
|
@ -254,19 +267,19 @@ input[type="checkbox"]:focus+label,
|
|||
input[type="checkbox"]:hover+label,
|
||||
input[type="radio"]:focus+label,
|
||||
input[type="radio"]:hover+label {
|
||||
color: rgb(var(--white));
|
||||
color: rgb(var(--style-neutral-text));
|
||||
}
|
||||
|
||||
input[type="checkbox"]:active+label,
|
||||
input[type="radio"]:active+label {
|
||||
color: rgb(var(--white));
|
||||
color: rgb(var(--style-neutral-text));
|
||||
}
|
||||
|
||||
input[type="checkbox"]:focus+label .label-icon,
|
||||
input[type="checkbox"]:hover+label .label-icon,
|
||||
input[type="radio"]:focus+label .label-icon,
|
||||
input[type="radio"]:hover+label .label-icon {
|
||||
color: rgb(var(--white));
|
||||
color: rgb(var(--style-neutral-text));
|
||||
}
|
||||
|
||||
input[type="checkbox"]:active+label .label-icon,
|
||||
|
|
@ -277,14 +290,14 @@ input[type="radio"]:active+label .label-icon {
|
|||
|
||||
input[type="checkbox"]:checked+label,
|
||||
input[type="radio"]:checked+label {
|
||||
color: rgb(var(--gray-16));
|
||||
color: rgb(var(--form-checkbox-radio-chcked-label));
|
||||
}
|
||||
|
||||
input[type="checkbox"]:not([disabled]):hover:checked+label,
|
||||
input[type="checkbox"]:not([disabled]):focus:checked+label,
|
||||
input[type="radio"]:not([disabled]):hover:checked+label,
|
||||
input[type="radio"]:not([disabled]):focus:checked+label {
|
||||
color: rgb(var(--white));
|
||||
color: rgb(var(--style-neutral-text));
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked+label .label-icon,
|
||||
|
|
@ -302,6 +315,7 @@ input[type="checkbox"]+.input-label-button,
|
|||
input[type="radio"]+.input-label-button {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input[type="color"]:hover+.input-label-button,
|
||||
|
|
@ -311,8 +325,8 @@ input[type="checkbox"]:focus+.input-label-button,
|
|||
input[type="radio"]:hover+.input-label-button,
|
||||
input[type="radio"]:focus+.input-label-button {
|
||||
background-color: rgb(var(--gray-03));
|
||||
border-bottom-color: rgb(var(--gray-10));
|
||||
color: rgb(var(--white));
|
||||
border-bottom-color: rgb(var(--gray-08));
|
||||
color: rgb(var(--style-neutral-text));
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
@ -333,19 +347,19 @@ input[type="checkbox"][disabled]+.input-label-button,
|
|||
input[type="radio"][disabled]+.input-label-button {
|
||||
background-color: rgb(var(--gray-02));
|
||||
border-color: transparent;
|
||||
color: rgb(var(--gray-04));
|
||||
color: rgb(var(--form-checkbox-radio-disabled-label));
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
input[type="checkbox"][disabled]+label,
|
||||
input[type="radio"][disabled]+label {
|
||||
color: rgb(var(--gray-04));
|
||||
color: rgb(var(--form-checkbox-radio-disabled-label));
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
input[type="checkbox"][disabled]+label .label-icon,
|
||||
input[type="radio"][disabled]+label .label-icon {
|
||||
color: rgb(var(--gray-04));
|
||||
color: rgb(var(--form-checkbox-radio-disabled-label));
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
|
@ -385,7 +399,7 @@ input[type="range"] {
|
|||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin: 0 0 1em 0;
|
||||
color: rgb(var(--black));
|
||||
color: rgb(var(--style-neutral-text));
|
||||
font-size: 1em;
|
||||
font-family: var(--font-regular);
|
||||
height: 2em;
|
||||
|
|
@ -417,7 +431,7 @@ input[type="range"]:focus {
|
|||
}
|
||||
|
||||
input[type="range"]:focus:before {
|
||||
background-color: rgb(var(--white));
|
||||
background-color: rgb(var(--style-neutral-text));
|
||||
}
|
||||
|
||||
input[type="range"][disabled] {
|
||||
|
|
@ -439,7 +453,7 @@ input[type="range"]::-webkit-slider-runnable-track {
|
|||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
background-color: rgb(var(--gray-01));
|
||||
color: rgb(var(--gray-12));
|
||||
color: rgb(var(--form-range-thumb));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-width: var(--line-width);
|
||||
|
|
@ -503,7 +517,7 @@ input[type="range"]::-moz-range-track {
|
|||
|
||||
input[type="range"]::-moz-range-thumb {
|
||||
background-color: rgb(var(--gray-01));
|
||||
color: rgb(var(--gray-12));
|
||||
color: rgb(var(--form-range-thumb));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-width: var(--line-width);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
border-radius: var(--radius);
|
||||
font-size: 1em;
|
||||
font-family: var(--font-fjalla);
|
||||
color: rgb(var(--white));
|
||||
color: rgb(var(--style-neutral-text));
|
||||
width: 100%;
|
||||
min-height: 2.5em;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@
|
|||
text-decoration: none;
|
||||
outline: none;
|
||||
background-color: rgb(var(--gray-03));
|
||||
box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.is-bookmarks-show-url .link-item:focus .link-panel-front,
|
||||
|
|
@ -161,12 +161,12 @@
|
|||
|
||||
.link-control-item:focus,
|
||||
.link-control-item:hover {
|
||||
color: rgb(var(--white));
|
||||
color: rgb(var(--style-neutral-text));
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.link-control-item:active {
|
||||
color: rgb(var(--white));
|
||||
color: rgb(var(--style-neutral-text));
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
transition: none;
|
||||
}
|
||||
|
|
@ -202,13 +202,20 @@
|
|||
.link-url-text {
|
||||
margin: 0;
|
||||
font-size: 0.7em;
|
||||
color: rgb(var(--black));
|
||||
font-family: var(--font-regular);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.bookmarks-url-dark .link-url-text {
|
||||
color: rgb(var(--black));
|
||||
}
|
||||
|
||||
.bookmarks-url-light .link-url-text {
|
||||
color: rgb(var(--white));
|
||||
}
|
||||
|
||||
.link-letter {
|
||||
font-family: var(--font-fjalla);
|
||||
color: rgb(var(--accent));
|
||||
|
|
@ -234,11 +241,11 @@
|
|||
|
||||
.link-item:hover .link-letter,
|
||||
.link-item:focus .link-letter {
|
||||
color: rgb(var(--white));
|
||||
color: rgb(var(--style-neutral-text));
|
||||
}
|
||||
|
||||
.link-panel-front:focus .link-letter {
|
||||
color: rgb(var(--white));
|
||||
color: rgb(var(--style-neutral-text));
|
||||
}
|
||||
|
||||
.link-name {
|
||||
|
|
@ -260,11 +267,11 @@
|
|||
|
||||
.link-item:hover .link-name,
|
||||
.link-item:focus .link-name {
|
||||
color: rgb(var(--white));
|
||||
color: rgb(var(--style-neutral-text));
|
||||
}
|
||||
|
||||
.link-panel-front:focus .link-name {
|
||||
color: rgb(var(--white));
|
||||
color: rgb(var(--style-neutral-text));
|
||||
}
|
||||
|
||||
.link-empty {
|
||||
|
|
@ -285,7 +292,7 @@
|
|||
.is-bookmarks-edit .link-item:hover .link-panel-front,
|
||||
.is-bookmarks-edit .link-item:focus .link-panel-front {
|
||||
height: calc(100% - var(--edit-height));
|
||||
box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.is-bookmarks-edit.is-bookmarks-show-url .link-item:focus .link-panel-front,
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
height: 100%;
|
||||
overflow-y: auto;
|
||||
pointer-events: all;
|
||||
transition: background-color var(--animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.menu-nav {
|
||||
|
|
@ -133,11 +134,11 @@
|
|||
|
||||
@media (min-width: 900px) {
|
||||
.menu {
|
||||
width: 60vw;
|
||||
width: 70vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1100px) {
|
||||
@media (min-width: 1600px) {
|
||||
.menu {
|
||||
width: 50vw;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ h6 {
|
|||
}
|
||||
|
||||
p {
|
||||
color: rgb(var(--white));
|
||||
color: rgb(var(--style-neutral-text));
|
||||
margin: 0 0 1em 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
|
@ -80,12 +80,12 @@ a:focus {
|
|||
}
|
||||
|
||||
a:hover {
|
||||
color: rgb(var(--white));
|
||||
color: rgb(var(--style-neutral-text));
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: rgb(var(--white));
|
||||
color: rgb(var(--style-neutral-text));
|
||||
}
|
||||
|
||||
ol,
|
||||
|
|
|
|||
102
index.html
102
index.html
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
|
|
@ -77,8 +76,8 @@
|
|||
</div>
|
||||
<div class="header-item header-accent">
|
||||
<div class="input-wrap">
|
||||
<input id="control-layout-theme-current" class="control-layout-theme-current" type="color" value="#00ff00" tabindex="1">
|
||||
<label for="control-layout-theme-current" class="button input-label-button mb-0">
|
||||
<input id="control-theme-accent-current" class="control-theme-accent-current" type="color" value="#00ff00" tabindex="1">
|
||||
<label for="control-theme-accent-current" class="button input-label-button mb-0">
|
||||
<span class="button-text">Accent</span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -105,6 +104,7 @@
|
|||
<div class="menu-nav-area menu-nav-area-grow mb-0 list-unstyled">
|
||||
<button class="menu-nav-button button button-large active" data-target=".menu-content-area-header" tabindex="1">Header</button>
|
||||
<button class="menu-nav-button button button-large" data-target=".menu-content-area-bookmarks" tabindex="1">Bookmarks</button>
|
||||
<button class="menu-nav-button button button-large" data-target=".menu-content-area-theme" tabindex="1">Theme</button>
|
||||
<button class="menu-nav-button button button-large" data-target=".menu-content-area-layout" tabindex="1">Layout</button>
|
||||
<button class="menu-nav-button button button-large" data-target=".menu-content-area-background" tabindex="1">Background</button>
|
||||
</div>
|
||||
|
|
@ -314,16 +314,24 @@
|
|||
<div class="menu-item">
|
||||
<h1 class="menu-header">Bookmarks</h1>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-bookmarks-show-link" class="control-bookmarks-show-link" type="checkbox" tabindex="1">
|
||||
<label for="control-bookmarks-show-link"><span class="label-icon"></span>Show</label>
|
||||
<input id="control-bookmarks-link-show" class="control-bookmarks-link-show" type="checkbox" tabindex="1">
|
||||
<label for="control-bookmarks-link-show"><span class="label-icon"></span>Show</label>
|
||||
</div>
|
||||
<div class="checkbox-wrap form-indent-1">
|
||||
<input id="control-bookmarks-show-name" class="control-bookmarks-show-name" type="checkbox" tabindex="1">
|
||||
<label for="control-bookmarks-show-name"><span class="label-icon"></span>Names</label>
|
||||
<input id="control-bookmarks-name-show" class="control-bookmarks-name-show" type="checkbox" tabindex="1">
|
||||
<label for="control-bookmarks-name-show"><span class="label-icon"></span>Names</label>
|
||||
</div>
|
||||
<div class="checkbox-wrap form-indent-1">
|
||||
<input id="control-bookmarks-show-url" class="control-bookmarks-show-url" type="checkbox" tabindex="1">
|
||||
<label for="control-bookmarks-show-url"><span class="label-icon"></span>URL on hover</label>
|
||||
<input id="control-bookmarks-url-show" class="control-bookmarks-url-show" type="checkbox" tabindex="1">
|
||||
<label for="control-bookmarks-url-show"><span class="label-icon"></span>URL on hover</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-2">
|
||||
<input id="control-bookmarks-url-style-dark" class="control-bookmarks-url-style-dark" type="radio" name="control-bookmarks-url-style" value="dark" tabindex="1">
|
||||
<label for="control-bookmarks-url-style-dark"><span class="label-icon"></span>Dark text</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-2">
|
||||
<input id="control-bookmarks-url-style-light" class="control-bookmarks-url-style-light" type="radio" name="control-bookmarks-url-style" value="light" tabindex="1">
|
||||
<label for="control-bookmarks-url-style-light"><span class="label-icon"></span>Light text</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
|
|
@ -361,6 +369,51 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-content-area menu-content-area-theme is-hidden">
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Style</h1>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-theme-style-dark" class="control-theme-style-dark" type="radio" name="control-theme-style" value="dark" tabindex="1">
|
||||
<label for="control-theme-style-dark"><span class="label-icon"></span>Dark</label>
|
||||
</div>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-theme-style-light" class="control-theme-style-light" type="radio" name="control-theme-style" value="light" tabindex="1">
|
||||
<label for="control-theme-style-light"><span class="label-icon"></span>Light</label>
|
||||
<p class="input-helper small muted">Accent colour may need to be changed to best fit the Theme Style.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Accent</h1>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-theme-accent-random-active" class="control-theme-accent-random-active" type="checkbox" tabindex="1">
|
||||
<label for="control-theme-accent-random-active"><span class="label-icon"></span>Random Accent colour on load/refresh</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<input id="control-theme-accent-random-style-any" class="control-theme-accent-random-style-any" type="radio" name="control-theme-accent-random-style" value="any" tabindex="1">
|
||||
<label for="control-theme-accent-random-style-any"><span class="label-icon"></span>Any colour</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<input id="control-theme-accent-random-style-light" class="control-theme-accent-random-style-light" type="radio" name="control-theme-accent-random-style" value="light" tabindex="1">
|
||||
<label for="control-theme-accent-random-style-light"><span class="label-icon"></span>Light colours</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<input id="control-theme-accent-random-style-dark" class="control-theme-accent-random-style-dark" type="radio" name="control-theme-accent-random-style" value="dark" tabindex="1">
|
||||
<label for="control-theme-accent-random-style-dark"><span class="label-icon"></span>Dark colours</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<input id="control-theme-accent-random-style-pastel" class="control-theme-accent-random-style-pastel" type="radio" name="control-theme-accent-random-style" value="pastel" tabindex="1">
|
||||
<label for="control-theme-accent-random-style-pastel"><span class="label-icon"></span>Pastel colours</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1 mb-3">
|
||||
<input id="control-theme-accent-random-style-saturated" class="control-theme-accent-random-style-saturated" type="radio" name="control-theme-accent-random-style" value="saturated" tabindex="1">
|
||||
<label for="control-theme-accent-random-style-saturated"><span class="label-icon"></span>Saturated colours</label>
|
||||
</div>
|
||||
<div class="button-wrap form-indent-1">
|
||||
<button class="control-theme-accent-randomise" type="button">Randomise now</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-content-area menu-content-area-layout is-hidden">
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Width</h1>
|
||||
|
|
@ -388,36 +441,6 @@
|
|||
<input id="control-layout-title" class="control-layout-title" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="New Tab" tabindex="1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Theme</h1>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-layout-theme-random-active" class="control-layout-theme-random-active" type="checkbox" tabindex="1">
|
||||
<label for="control-layout-theme-random-active"><span class="label-icon"></span>Random Accent colour on load/refresh</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<input id="control-layout-theme-style-any" class="control-layout-theme-style-any" type="radio" name="control-layout-theme-style" value="any" tabindex="1">
|
||||
<label for="control-layout-theme-style-any"><span class="label-icon"></span>Any colour</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<input id="control-layout-theme-style-light" class="control-layout-theme-style-light" type="radio" name="control-layout-theme-style" value="light" tabindex="1">
|
||||
<label for="control-layout-theme-style-light"><span class="label-icon"></span>Light colours</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<input id="control-layout-theme-style-dark" class="control-layout-theme-style-dark" type="radio" name="control-layout-theme-style" value="dark" tabindex="1">
|
||||
<label for="control-layout-theme-style-dark"><span class="label-icon"></span>Dark colours</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<input id="control-layout-theme-style-pastel" class="control-layout-theme-style-pastel" type="radio" name="control-layout-theme-style" value="pastel" tabindex="1">
|
||||
<label for="control-layout-theme-style-pastel"><span class="label-icon"></span>Pastel colours</label>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1 mb-3">
|
||||
<input id="control-layout-theme-style-saturated" class="control-layout-theme-style-saturated" type="radio" name="control-layout-theme-style" value="saturated" tabindex="1">
|
||||
<label for="control-layout-theme-style-saturated"><span class="label-icon"></span>Saturated colours</label>
|
||||
</div>
|
||||
<div class="button-wrap form-indent-1">
|
||||
<button class="control-layout-theme-randomise" type="button">Randomise now</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-content-area menu-content-area-background is-hidden">
|
||||
|
|
@ -472,6 +495,7 @@
|
|||
<script src="js/modal.js"></script>
|
||||
<script src="js/tip.js"></script>
|
||||
<script src="js/shade.js"></script>
|
||||
<script src="js/accent.js"></script>
|
||||
<script src="js/theme.js"></script>
|
||||
<script src="js/date.js"></script>
|
||||
<script src="js/greeting.js"></script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,77 @@
|
|||
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);
|
||||
};
|
||||
|
||||
var random = function() {
|
||||
if (state.get().theme.accent.random.active) {
|
||||
var randomVal = function(min, max) {
|
||||
return Math.floor(Math.random() * (max - min) + 1) + min;
|
||||
};
|
||||
var color = {
|
||||
any: function() {
|
||||
return {
|
||||
h: randomVal(0, 360),
|
||||
s: randomVal(0, 100),
|
||||
l: randomVal(0, 100)
|
||||
};
|
||||
},
|
||||
light: function() {
|
||||
return {
|
||||
h: randomVal(0, 360),
|
||||
s: randomVal(50, 90),
|
||||
l: randomVal(50, 90)
|
||||
};
|
||||
},
|
||||
dark: function() {
|
||||
return {
|
||||
h: randomVal(0, 360),
|
||||
s: randomVal(10, 50),
|
||||
l: randomVal(10, 50)
|
||||
};
|
||||
},
|
||||
pastel: function() {
|
||||
return {
|
||||
h: randomVal(0, 360),
|
||||
s: 50,
|
||||
l: 80
|
||||
};
|
||||
},
|
||||
saturated: function() {
|
||||
return {
|
||||
h: randomVal(0, 360),
|
||||
s: 100,
|
||||
l: 50
|
||||
};
|
||||
}
|
||||
};
|
||||
var hsl = color[state.get().theme.accent.random.style]();
|
||||
var randomColor = helper.hslToRgb({
|
||||
h: hsl.h,
|
||||
s: (hsl.s / 100),
|
||||
l: (hsl.l / 100)
|
||||
});
|
||||
helper.setObject({
|
||||
object: state.get(),
|
||||
path: "theme.accent.current",
|
||||
newValue: randomColor
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
random();
|
||||
render();
|
||||
};
|
||||
|
||||
// exposed methods
|
||||
return {
|
||||
init: init,
|
||||
render: render,
|
||||
random: random
|
||||
};
|
||||
|
||||
})();
|
||||
130
js/control.js
130
js/control.js
|
|
@ -20,11 +20,11 @@ var control = (function() {
|
|||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-layout-theme-current"),
|
||||
path: "layout.theme.current",
|
||||
element: helper.e(".control-theme-accent-current"),
|
||||
path: "theme.accent.current",
|
||||
type: "color",
|
||||
func: function() {
|
||||
theme.render();
|
||||
accent.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-clock-show-hours"),
|
||||
|
|
@ -343,8 +343,8 @@ var control = (function() {
|
|||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-bookmarks-show-link"),
|
||||
path: "bookmarks.show.link",
|
||||
element: helper.e(".control-bookmarks-link-show"),
|
||||
path: "bookmarks.link.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
|
|
@ -352,8 +352,8 @@ var control = (function() {
|
|||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-bookmarks-show-name"),
|
||||
path: "bookmarks.show.name",
|
||||
element: helper.e(".control-bookmarks-name-show"),
|
||||
path: "bookmarks.name.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
|
|
@ -415,13 +415,27 @@ var control = (function() {
|
|||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-bookmarks-show-url"),
|
||||
path: "bookmarks.show.url",
|
||||
element: helper.e(".control-bookmarks-url-show"),
|
||||
path: "bookmarks.url.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-bookmarks-url-style-dark"),
|
||||
path: "bookmarks.url.style",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-bookmarks-url-style-light"),
|
||||
path: "bookmarks.url.style",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-bookmarks-new-tab"),
|
||||
path: "bookmarks.newTab",
|
||||
|
|
@ -504,54 +518,70 @@ var control = (function() {
|
|||
title.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-layout-theme-random-active"),
|
||||
path: "layout.theme.random.active",
|
||||
element: helper.e(".control-theme-style-dark"),
|
||||
path: "theme.style",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
accent.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-theme-style-light"),
|
||||
path: "theme.style",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
accent.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-theme-accent-random-active"),
|
||||
path: "theme.accent.random.active",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
dependents();
|
||||
theme.render();
|
||||
accent.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-layout-theme-style-any"),
|
||||
path: "layout.theme.random.style",
|
||||
element: helper.e(".control-theme-accent-random-style-any"),
|
||||
path: "theme.accent.random.style",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-layout-theme-style-light"),
|
||||
path: "layout.theme.random.style",
|
||||
element: helper.e(".control-theme-accent-random-style-light"),
|
||||
path: "theme.accent.random.style",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-layout-theme-style-dark"),
|
||||
path: "layout.theme.random.style",
|
||||
element: helper.e(".control-theme-accent-random-style-dark"),
|
||||
path: "theme.accent.random.style",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-layout-theme-style-pastel"),
|
||||
path: "layout.theme.random.style",
|
||||
element: helper.e(".control-theme-accent-random-style-pastel"),
|
||||
path: "theme.accent.random.style",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-layout-theme-style-saturated"),
|
||||
path: "layout.theme.random.style",
|
||||
element: helper.e(".control-theme-accent-random-style-saturated"),
|
||||
path: "theme.accent.random.style",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-layout-theme-randomise"),
|
||||
element: helper.e(".control-theme-accent-randomise"),
|
||||
type: "button",
|
||||
func: function() {
|
||||
theme.random();
|
||||
theme.render();
|
||||
accent.random();
|
||||
accent.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-background-image-show"),
|
||||
|
|
@ -743,21 +773,32 @@ var control = (function() {
|
|||
}
|
||||
};
|
||||
view[state.get().bookmarks.style]();
|
||||
if (state.get().bookmarks.show.link) {
|
||||
if (state.get().bookmarks.link.show) {
|
||||
helper.addClass(html, "is-bookmarks-show-link");
|
||||
} else {
|
||||
helper.removeClass(html, "is-bookmarks-show-link");
|
||||
};
|
||||
if (state.get().bookmarks.show.name) {
|
||||
if (state.get().bookmarks.name.show) {
|
||||
helper.addClass(html, "is-bookmarks-show-name");
|
||||
} else {
|
||||
helper.removeClass(html, "is-bookmarks-show-name");
|
||||
};
|
||||
if (state.get().bookmarks.show.url) {
|
||||
if (state.get().bookmarks.url.show) {
|
||||
helper.addClass(html, "is-bookmarks-show-url");
|
||||
} else {
|
||||
helper.removeClass(html, "is-bookmarks-show-url");
|
||||
};
|
||||
var urlText = {
|
||||
dark: function() {
|
||||
helper.addClass(html, "bookmarks-url-dark");
|
||||
helper.removeClass(html, "bookmarks-url-light");
|
||||
},
|
||||
light: function() {
|
||||
helper.removeClass(html, "bookmarks-url-dark");
|
||||
helper.addClass(html, "bookmarks-url-light");
|
||||
}
|
||||
};
|
||||
urlText[state.get().bookmarks.url.style]();
|
||||
};
|
||||
var _layout = function() {
|
||||
helper.removeClass(html, "is-layout-width-fluid");
|
||||
|
|
@ -770,6 +811,11 @@ var control = (function() {
|
|||
helper.removeClass(html, "is-layout-scroll-past-end");
|
||||
};
|
||||
};
|
||||
var _theme = function() {
|
||||
helper.removeClass(html, "is-theme-style-dark");
|
||||
helper.removeClass(html, "is-theme-style-light");
|
||||
helper.addClass(html, "is-theme-style-" + state.get().theme.style);
|
||||
};
|
||||
var _editAdd = function() {
|
||||
if (state.get().header.editAdd.show) {
|
||||
helper.addClass(html, "is-header-edit-add");
|
||||
|
|
@ -831,6 +877,7 @@ var control = (function() {
|
|||
_accent();
|
||||
_link();
|
||||
_layout();
|
||||
_theme();
|
||||
_background();
|
||||
_header();
|
||||
};
|
||||
|
|
@ -933,22 +980,22 @@ var control = (function() {
|
|||
};
|
||||
};
|
||||
var _theme = function() {
|
||||
if (state.get().layout.theme.random.active) {
|
||||
helper.eA("input[name='control-layout-theme-style']").forEach(function(arrayItem, index) {
|
||||
if (state.get().theme.accent.random.active) {
|
||||
helper.eA("input[name='control-theme-accent-random-style']").forEach(function(arrayItem, index) {
|
||||
arrayItem.disabled = false;
|
||||
helper.e(".control-layout-theme-randomise").disabled = false;
|
||||
helper.e(".control-theme-accent-randomise").disabled = false;
|
||||
});
|
||||
} else {
|
||||
helper.eA("input[name='control-layout-theme-style']").forEach(function(arrayItem, index) {
|
||||
helper.eA("input[name='control-theme-accent-random-style']").forEach(function(arrayItem, index) {
|
||||
arrayItem.disabled = true;
|
||||
helper.e(".control-layout-theme-randomise").disabled = true;
|
||||
helper.e(".control-theme-accent-randomise").disabled = true;
|
||||
});
|
||||
};
|
||||
};
|
||||
var _link = function() {
|
||||
if (state.get().bookmarks.show.link) {
|
||||
helper.e(".control-bookmarks-show-name").disabled = false;
|
||||
helper.e(".control-bookmarks-show-url").disabled = false;
|
||||
if (state.get().bookmarks.link.show) {
|
||||
helper.e(".control-bookmarks-name-show").disabled = false;
|
||||
helper.e(".control-bookmarks-url-show").disabled = false;
|
||||
helper.e(".control-bookmarks-style-block").disabled = false;
|
||||
helper.e(".control-bookmarks-style-list").disabled = false;
|
||||
helper.e(".control-bookmarks-new-tab").disabled = false;
|
||||
|
|
@ -959,8 +1006,8 @@ var control = (function() {
|
|||
helper.e(".control-layout-alignment-vertical-center").disabled = true;
|
||||
helper.e(".control-layout-alignment-vertical-bottom").disabled = true;
|
||||
} else {
|
||||
helper.e(".control-bookmarks-show-name").disabled = true;
|
||||
helper.e(".control-bookmarks-show-url").disabled = true;
|
||||
helper.e(".control-bookmarks-name-show").disabled = true;
|
||||
helper.e(".control-bookmarks-url-show").disabled = true;
|
||||
helper.e(".control-bookmarks-style-block").disabled = true;
|
||||
helper.e(".control-bookmarks-style-list").disabled = true;
|
||||
helper.e(".control-bookmarks-new-tab").disabled = true;
|
||||
|
|
@ -971,6 +1018,13 @@ var control = (function() {
|
|||
helper.e(".control-layout-alignment-vertical-center").disabled = false;
|
||||
helper.e(".control-layout-alignment-vertical-bottom").disabled = false;
|
||||
};
|
||||
if (state.get().bookmarks.link.show && state.get().bookmarks.url.show) {
|
||||
helper.e(".control-bookmarks-url-style-dark").disabled = false;
|
||||
helper.e(".control-bookmarks-url-style-light").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-bookmarks-url-style-dark").disabled = true;
|
||||
helper.e(".control-bookmarks-url-style-light").disabled = true;
|
||||
}
|
||||
};
|
||||
var _background = function() {
|
||||
if (state.get().background.image.show) {
|
||||
|
|
|
|||
|
|
@ -15,9 +15,8 @@ bookmarks.init();
|
|||
// bind menu tabs
|
||||
menu.init();
|
||||
|
||||
// render input color value
|
||||
// render css accent var
|
||||
theme.init();
|
||||
accent.init();
|
||||
|
||||
// render links from bookmarks
|
||||
link.init();
|
||||
|
|
|
|||
|
|
@ -23,11 +23,18 @@ var keyboard = (function() {
|
|||
};
|
||||
// ctrl+alt+a
|
||||
if (event.ctrlKey && event.altKey && event.keyCode == 65) {
|
||||
if (state.get().bookmarks.show.link) {
|
||||
if (state.get().bookmarks.link.show) {
|
||||
menu.close();
|
||||
link.add();
|
||||
};
|
||||
};
|
||||
// ctrl+alt+d
|
||||
if (event.ctrlKey && event.altKey && event.keyCode == 68) {
|
||||
theme.toggle();
|
||||
control.render();
|
||||
control.update();
|
||||
data.save();
|
||||
};
|
||||
// ctrl+alt+m
|
||||
if (event.ctrlKey && event.altKey && event.keyCode == 77) {
|
||||
shade.destroy();
|
||||
|
|
@ -36,7 +43,7 @@ var keyboard = (function() {
|
|||
};
|
||||
// ctrl+alt+e
|
||||
if (event.ctrlKey && event.altKey && event.keyCode == 69) {
|
||||
if (state.get().bookmarks.show.link && bookmarks.get().length > 0) {
|
||||
if (state.get().bookmarks.link.show && bookmarks.get().length > 0) {
|
||||
if (state.get().bookmarks.edit) {
|
||||
helper.setObject({
|
||||
object: state.get(),
|
||||
|
|
@ -57,8 +64,8 @@ var keyboard = (function() {
|
|||
};
|
||||
// ctrl+alt+r
|
||||
if (event.ctrlKey && event.altKey && event.keyCode == 82) {
|
||||
theme.random();
|
||||
theme.render();
|
||||
accent.random();
|
||||
accent.render();
|
||||
data.save();
|
||||
};
|
||||
}, false);
|
||||
|
|
|
|||
22
js/state.js
22
js/state.js
|
|
@ -71,10 +71,15 @@ var state = (function() {
|
|||
}
|
||||
},
|
||||
bookmarks: {
|
||||
show: {
|
||||
link: true,
|
||||
name: true,
|
||||
url: true
|
||||
link: {
|
||||
show: true
|
||||
},
|
||||
name: {
|
||||
show: true
|
||||
},
|
||||
url: {
|
||||
show: true,
|
||||
style: "dark"
|
||||
},
|
||||
newTab: false,
|
||||
edit: false,
|
||||
|
|
@ -85,8 +90,10 @@ var state = (function() {
|
|||
layout: {
|
||||
width: "wide",
|
||||
scrollPastEnd: true,
|
||||
title: "New Tab",
|
||||
theme: {
|
||||
title: "New Tab"
|
||||
},
|
||||
theme: {
|
||||
accent: {
|
||||
current: {
|
||||
r: 0,
|
||||
g: 255,
|
||||
|
|
@ -96,7 +103,8 @@ var state = (function() {
|
|||
active: false,
|
||||
style: "any"
|
||||
}
|
||||
}
|
||||
},
|
||||
style: "dark"
|
||||
},
|
||||
background: {
|
||||
image: {
|
||||
|
|
|
|||
85
js/theme.js
85
js/theme.js
|
|
@ -1,77 +1,28 @@
|
|||
var theme = (function() {
|
||||
|
||||
var render = function() {
|
||||
var html = helper.e("html");
|
||||
var color = state.get().layout.theme.current;
|
||||
html.style.setProperty("--accent", color.r + ", " + color.g + ", " + color.b);
|
||||
};
|
||||
|
||||
var random = function() {
|
||||
if (state.get().layout.theme.random.active) {
|
||||
var randomVal = function(min, max) {
|
||||
return Math.floor(Math.random() * (max - min) + 1) + min;
|
||||
};
|
||||
var color = {
|
||||
any: function() {
|
||||
return {
|
||||
h: randomVal(0, 360),
|
||||
s: randomVal(0, 100),
|
||||
l: randomVal(0, 100)
|
||||
};
|
||||
},
|
||||
light: function() {
|
||||
return {
|
||||
h: randomVal(0, 360),
|
||||
s: randomVal(50, 90),
|
||||
l: randomVal(50, 90)
|
||||
};
|
||||
},
|
||||
dark: function() {
|
||||
return {
|
||||
h: randomVal(0, 360),
|
||||
s: randomVal(10, 50),
|
||||
l: randomVal(10, 50)
|
||||
};
|
||||
},
|
||||
pastel: function() {
|
||||
return {
|
||||
h: randomVal(0, 360),
|
||||
s: 50,
|
||||
l: 80
|
||||
};
|
||||
},
|
||||
saturated: function() {
|
||||
return {
|
||||
h: randomVal(0, 360),
|
||||
s: 100,
|
||||
l: 50
|
||||
};
|
||||
}
|
||||
};
|
||||
var hsl = color[state.get().layout.theme.random.style]();
|
||||
var randomColor = helper.hslToRgb({
|
||||
h: hsl.h,
|
||||
s: (hsl.s / 100),
|
||||
l: (hsl.l / 100)
|
||||
});
|
||||
helper.setObject({
|
||||
object: state.get(),
|
||||
path: "layout.theme.current",
|
||||
newValue: randomColor
|
||||
});
|
||||
var toggle = function() {
|
||||
var style = {
|
||||
dark: function() {
|
||||
helper.setObject({
|
||||
object: state.get(),
|
||||
path: "theme.style",
|
||||
newValue: "light"
|
||||
})
|
||||
},
|
||||
light: function() {
|
||||
helper.setObject({
|
||||
object: state.get(),
|
||||
path: "theme.style",
|
||||
newValue: "dark"
|
||||
})
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
random();
|
||||
render();
|
||||
style[state.get().theme.style]();
|
||||
};
|
||||
|
||||
// exposed methods
|
||||
return {
|
||||
init: init,
|
||||
random: random,
|
||||
render: render
|
||||
toggle: toggle
|
||||
};
|
||||
|
||||
})();
|
||||
|
|
|
|||
23
js/update.js
23
js/update.js
|
|
@ -208,6 +208,29 @@ var update = (function() {
|
|||
};
|
||||
data.version = "2.11.0";
|
||||
};
|
||||
if (version.compare(data.version, "2.12.0") == -1) {
|
||||
console.log("\t -- running update", "2.12.0");
|
||||
data.state.bookmarks.link = {
|
||||
show: data.state.bookmarks.show.link
|
||||
};
|
||||
data.state.bookmarks.name = {
|
||||
show: data.state.bookmarks.show.name
|
||||
};
|
||||
data.state.bookmarks.url = {
|
||||
show: data.state.bookmarks.show.url,
|
||||
style: "dark"
|
||||
};
|
||||
delete data.state.bookmarks.show;
|
||||
data.state.theme = {
|
||||
accent: {
|
||||
current: data.state.layout.theme.current,
|
||||
random: data.state.layout.theme.random
|
||||
},
|
||||
style: "dark"
|
||||
};
|
||||
delete data.state.layout.theme;
|
||||
data.version = "2.12.0";
|
||||
};
|
||||
};
|
||||
// if no update is needed
|
||||
// version bump
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
var version = (function() {
|
||||
|
||||
// version is normally bumped when the state needs changing or any new functionality is added
|
||||
var current = "2.11.0";
|
||||
var current = "2.12.0";
|
||||
|
||||
var compare = function(a, b) {
|
||||
var pa = a.split(".");
|
||||
|
|
|
|||
Loading…
Reference in New Issue