mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-06-26 20:41:21 +02:00
[feature] add options to hide bookmarks
This commit is contained in:
Kombie
GitHub
parent
4694fce578
commit
3fb1e735a7
BIN
background/abstract.jpg
Normal file
BIN
background/abstract.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
BIN
background/gray-steps.jpg
Normal file
BIN
background/gray-steps.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 775 KiB |
BIN
background/tallneck.png
Executable file
BIN
background/tallneck.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
36
css/background.css
Normal file
36
css/background.css
Normal file
@ -0,0 +1,36 @@
|
||||
.background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
pointer-events: none;
|
||||
z-index: var(--z-index-background);
|
||||
}
|
||||
|
||||
.background-image {
|
||||
background-image: var(--background-image);
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
opacity: var(--background-opacity);
|
||||
/* filter: blur(var(--background-blur)) grayscale(var(--background-grayscale)); */
|
||||
}
|
||||
|
||||
.background-accent {
|
||||
background-color: rgba(var(--accent), var(--background-accent-opacity));
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
}
|
||||
97
css/base.css
97
css/base.css
@ -1,39 +1,50 @@
|
||||
:root {
|
||||
--black: #222222;
|
||||
--white: #ffffff;
|
||||
--gray-01: #262831;
|
||||
--gray-02: #2f333e;
|
||||
--gray-03: #393e4b;
|
||||
--gray-04: #434958;
|
||||
--gray-05: #4d5465;
|
||||
--gray-06: #575f72;
|
||||
--gray-07: #616a7f;
|
||||
--gray-08: #6b758c;
|
||||
--gray-09: #758099;
|
||||
--gray-10: #7f8ba6;
|
||||
--gray-11: #8997b4;
|
||||
--gray-12: #95a2bb;
|
||||
--gray-13: #a2adc3;
|
||||
--gray-14: #aeb8cb;
|
||||
--gray-15: #bbc3d3;
|
||||
--gray-16: #c7ceda;
|
||||
--gray-17: #d4d9e2;
|
||||
--gray-18: #e0e4ea;
|
||||
--gray-19: #edeff2;
|
||||
--gray-20: #fafafa;
|
||||
--root-font-size: 14px;
|
||||
--radius: 2px;
|
||||
--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;
|
||||
--accent: 0, 255, 0;
|
||||
--line-width: 3px;
|
||||
--background: var(--gray-01);
|
||||
--root-font-size: 14px;
|
||||
--radius: 0.2em;
|
||||
--line-width: 0.2em;
|
||||
--background: rgb(var(--gray-01));
|
||||
--gutter: 0.5em;
|
||||
--animation-speed-fast: 0.2s;
|
||||
--animation-speed-medium: 0.3s;
|
||||
--animation-speed-slow: 0.4s;
|
||||
--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-index-shade: 5000;
|
||||
--z-index-modal: 6000;
|
||||
--z-index-menu: 7000;
|
||||
--background-image: none;
|
||||
--background-opacity: 1;
|
||||
--background-accent-opacity: 0;
|
||||
--background-blur: 0;
|
||||
/* breakpoint reference */
|
||||
/* can not be used in @media as of yet */
|
||||
--breakpoint-sm: 550px;
|
||||
@ -41,12 +52,6 @@
|
||||
--breakpoint-lg: 900px;
|
||||
--breakpoint-xl: 1100px;
|
||||
--breakpoint-xxl: 1600px;
|
||||
--z-index-link: 1000;
|
||||
--z-index-header: 2000;
|
||||
--z-index-tip: 3000;
|
||||
--z-index-shade: 4000;
|
||||
--z-index-modal: 5000;
|
||||
--z-index-menu: 6000;
|
||||
}
|
||||
|
||||
:root.is-link-block {
|
||||
@ -73,7 +78,7 @@
|
||||
|
||||
::selection {
|
||||
background-color: rgb(var(--accent));
|
||||
color: var(--white);
|
||||
color: rgb(var(--white));
|
||||
}
|
||||
|
||||
html {
|
||||
@ -82,8 +87,28 @@ html {
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--white);
|
||||
color: rgb(var(--white));
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
font-family: var(--font-regular);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.is-alignment-vertical-top body {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-alignment-vertical-center body {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-alignment-vertical-bottom body {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.is-link body {
|
||||
display: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
@ -3,10 +3,10 @@ button,
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
background-color: var(--gray-02);
|
||||
background-color: rgb(var(--gray-02));
|
||||
padding: 0.125em 1em;
|
||||
margin: 0 0 1em 0;
|
||||
color: var(--gray-12);
|
||||
color: rgb(var(--gray-12));
|
||||
font-size: 1em;
|
||||
font-family: var(--font-regular);
|
||||
min-height: 2.5em;
|
||||
@ -39,10 +39,10 @@ input[type="reset"]:hover,
|
||||
input[type="reset"]:focus,
|
||||
input[type="submit"]:hover,
|
||||
input[type="submit"]:focus {
|
||||
background-color: var(--gray-03);
|
||||
border-bottom-color: var(--gray-08);
|
||||
color: var(--white);
|
||||
outline: 0;
|
||||
background-color: rgb(var(--gray-03));
|
||||
border-bottom-color: rgb(var(--gray-08));
|
||||
color: rgb(var(--white));
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button:active,
|
||||
@ -50,9 +50,9 @@ button:active,
|
||||
input[type="button"]:active,
|
||||
input[type="reset"]:active,
|
||||
input[type="submit"]:active {
|
||||
background-color: var(--gray-04);
|
||||
background-color: rgb(var(--gray-04));
|
||||
border-bottom-color: rgb(var(--accent));
|
||||
color: var(--white);
|
||||
color: rgb(var(--white));
|
||||
transition: none;
|
||||
}
|
||||
|
||||
@ -64,9 +64,9 @@ button[disabled]:focus,
|
||||
.button[disabled]:focus,
|
||||
button[disabled]:active,
|
||||
.button[disabled]:active {
|
||||
background-color: var(--gray-02);
|
||||
background-color: rgb(var(--gray-02));
|
||||
border-color: transparent;
|
||||
color: var(--gray-04);
|
||||
color: rgb(var(--gray-04));
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@ -84,7 +84,7 @@ button [class*=" icon-"],
|
||||
|
||||
.button.active {
|
||||
border-bottom-color: rgb(var(--accent));
|
||||
color: var(--white);
|
||||
color: rgb(var(--white));
|
||||
}
|
||||
|
||||
.button-small {
|
||||
@ -148,3 +148,31 @@ button [class*=" button-"]:last-child,
|
||||
.button [class*=" button-"]:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.button-link {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
color: rgb(var(--gray-10));
|
||||
}
|
||||
|
||||
.button-link[disabled] {
|
||||
background-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.button-link:hover[disabled],
|
||||
.button-link:focus[disabled] {
|
||||
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: var(--white);
|
||||
color: rgb(var(--white));
|
||||
width: 100%;
|
||||
min-height: 2.5em;
|
||||
display: flex;
|
||||
@ -47,17 +47,11 @@
|
||||
}
|
||||
|
||||
.clock-hours {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.clock-minutes {
|
||||
color: var(--gray-16);
|
||||
}
|
||||
|
||||
.clock-seconds {
|
||||
color: var(--gray-12);
|
||||
color: rgb(var(--white));
|
||||
}
|
||||
|
||||
.clock-minutes,
|
||||
.clock-seconds,
|
||||
.clock-meridiem {
|
||||
color: var(--gray-10);
|
||||
color: rgb(var(--gray-19));
|
||||
}
|
||||
|
||||
16
css/date.css
16
css/date.css
@ -4,7 +4,7 @@
|
||||
border-radius: var(--radius);
|
||||
font-size: 1em;
|
||||
font-family: var(--font-fjalla);
|
||||
color: var(--white);
|
||||
color: rgb(var(--white));
|
||||
width: 100%;
|
||||
min-height: 2.5em;
|
||||
display: flex;
|
||||
@ -46,18 +46,12 @@
|
||||
margin-right: 0.125em;
|
||||
}
|
||||
|
||||
.date-date {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.date-day {
|
||||
color: var(--gray-16);
|
||||
}
|
||||
|
||||
.date-month {
|
||||
color: var(--gray-12);
|
||||
color: rgb(var(--white));
|
||||
}
|
||||
|
||||
.date-date,
|
||||
.date-month,
|
||||
.date-year {
|
||||
color: var(--gray-10);
|
||||
color: rgb(var(--gray-19));
|
||||
}
|
||||
|
||||
257
css/form.css
257
css/form.css
@ -4,10 +4,10 @@ input[type="password"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="text"] {
|
||||
background-color: var(--gray-14);
|
||||
background-color: rgb(var(--gray-14));
|
||||
padding: 0 0.5em;
|
||||
margin: 0 0 1em 0;
|
||||
color: var(--black);
|
||||
color: rgb(var(--black));
|
||||
font-size: 1em;
|
||||
font-family: var(--font-regular);
|
||||
line-height: 2.5em;
|
||||
@ -58,23 +58,32 @@ input[type="text"][disabled]:focus,
|
||||
input[type="text"][disabled]::placeholder,
|
||||
input[type="text"][disabled]:hover::placeholder,
|
||||
input[type="text"][disabled]:focus::placeholder {
|
||||
background-color: var(--gray-04);
|
||||
color: var(--gray-08);
|
||||
background-color: rgb(var(--gray-04));
|
||||
color: rgb(var(--gray-08));
|
||||
border-color: transparent;
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
input[type="email"][disabled]~.input-helper,
|
||||
input[type="number"][disabled]~.input-helper,
|
||||
input[type="password"][disabled]~.input-helper,
|
||||
input[type="search"][disabled]~.input-helper,
|
||||
input[type="tel"][disabled]~.input-helper,
|
||||
input[type="text"][disabled]~.input-helper {
|
||||
color: rgb(var(--gray-06));
|
||||
}
|
||||
|
||||
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: var(--gray-16);
|
||||
border-color: var(--gray-10);
|
||||
color: var(--black);
|
||||
outline: 0;
|
||||
background-color: rgb(var(--gray-16));
|
||||
border-color: rgb(var(--gray-10));
|
||||
color: rgb(var(--black));
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="email"]:focus,
|
||||
@ -83,10 +92,10 @@ input[type="password"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="text"]:focus {
|
||||
background-color: var(--white);
|
||||
background-color: rgb(var(--white));
|
||||
border-color: transparent;
|
||||
color: var(--black);
|
||||
outline: 0;
|
||||
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));
|
||||
}
|
||||
@ -97,7 +106,7 @@ input[type="password"]::placeholder,
|
||||
input[type="search"]::placeholder,
|
||||
input[type="tel"]::placeholder,
|
||||
input[type="text"]::placeholder {
|
||||
color: var(--gray-10);
|
||||
color: rgb(var(--gray-10));
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
@ -107,7 +116,7 @@ input[type="password"]:hover::placeholder,
|
||||
input[type="search"]:hover::placeholder,
|
||||
input[type="tel"]:hover::placeholder,
|
||||
input[type="text"]:hover::placeholder {
|
||||
color: var(--gray-12);
|
||||
color: rgb(var(--gray-12));
|
||||
}
|
||||
|
||||
input[type="email"]:focus::placeholder,
|
||||
@ -116,19 +125,19 @@ input[type="password"]:focus::placeholder,
|
||||
input[type="search"]:focus::placeholder,
|
||||
input[type="tel"]:focus::placeholder,
|
||||
input[type="text"]:focus::placeholder {
|
||||
color: var(--gray-14);
|
||||
color: rgb(var(--gray-14));
|
||||
}
|
||||
|
||||
label {
|
||||
padding: 0.5em 0;
|
||||
color: var(--gray-16);
|
||||
color: rgb(var(--gray-16));
|
||||
margin-bottom: 0;
|
||||
font-size: 1em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
label[disabled] {
|
||||
color: var(--gray-04);
|
||||
color: rgb(var(--gray-04));
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
@ -144,7 +153,7 @@ input[type="color"] {
|
||||
}
|
||||
|
||||
input[type="color"]:focus {
|
||||
outline: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="color"]::-webkit-color-swatch-wrapper {
|
||||
@ -215,7 +224,7 @@ input[type="radio"] {
|
||||
|
||||
input[type="checkbox"]+label,
|
||||
input[type="radio"]+label {
|
||||
color: var(--gray-12);
|
||||
color: rgb(var(--gray-12));
|
||||
font-size: 1em;
|
||||
font-family: var(--font-regular);
|
||||
min-height: 2.5em;
|
||||
@ -243,19 +252,19 @@ input[type="checkbox"]:focus+label,
|
||||
input[type="checkbox"]:hover+label,
|
||||
input[type="radio"]:focus+label,
|
||||
input[type="radio"]:hover+label {
|
||||
color: var(--white);
|
||||
color: rgb(var(--white));
|
||||
}
|
||||
|
||||
input[type="checkbox"]:active+label,
|
||||
input[type="radio"]:active+label {
|
||||
color: var(--white);
|
||||
color: rgb(var(--white));
|
||||
}
|
||||
|
||||
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: var(--white);
|
||||
color: rgb(var(--white));
|
||||
}
|
||||
|
||||
input[type="checkbox"]:active+label .label-icon,
|
||||
@ -266,14 +275,14 @@ input[type="radio"]:active+label .label-icon {
|
||||
|
||||
input[type="checkbox"]:checked+label,
|
||||
input[type="radio"]:checked+label {
|
||||
color: var(--gray-16);
|
||||
color: rgb(var(--gray-16));
|
||||
}
|
||||
|
||||
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: var(--white);
|
||||
color: rgb(var(--white));
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked+label .label-icon,
|
||||
@ -299,10 +308,10 @@ input[type="checkbox"]:hover+.input-label-button,
|
||||
input[type="checkbox"]:focus+.input-label-button,
|
||||
input[type="radio"]:hover+.input-label-button,
|
||||
input[type="radio"]:focus+.input-label-button {
|
||||
background-color: var(--gray-03);
|
||||
border-bottom-color: var(--gray-10);
|
||||
color: var(--white);
|
||||
outline: 0;
|
||||
background-color: rgb(var(--gray-03));
|
||||
border-bottom-color: rgb(var(--gray-10));
|
||||
color: rgb(var(--white));
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="color"]:active+.input-label-button,
|
||||
@ -320,21 +329,21 @@ input[type="radio"]:checked+.input-label-button {
|
||||
input[type="color"][disabled]+.input-label-button,
|
||||
input[type="checkbox"][disabled]+.input-label-button,
|
||||
input[type="radio"][disabled]+.input-label-button {
|
||||
background-color: var(--gray-02);
|
||||
background-color: rgb(var(--gray-02));
|
||||
border-color: transparent;
|
||||
color: var(--gray-04);
|
||||
color: rgb(var(--gray-04));
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
input[type="checkbox"][disabled]+label,
|
||||
input[type="radio"][disabled]+label {
|
||||
color: var(--gray-04);
|
||||
color: rgb(var(--gray-04));
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
input[type="checkbox"][disabled]+label .label-icon,
|
||||
input[type="radio"][disabled]+label .label-icon {
|
||||
color: var(--gray-04);
|
||||
color: rgb(var(--gray-04));
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@ -368,3 +377,189 @@ input[type="radio"]+label .label-icon:before {
|
||||
input[type="radio"]:checked+label .label-icon:before {
|
||||
content: "\e837";
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
/* background-color: rgb(var(--gray-08)); */
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin: 0 0 1em 0;
|
||||
color: rgb(var(--black));
|
||||
font-size: 1em;
|
||||
font-family: var(--font-regular);
|
||||
height: 2em;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input[type="range"]:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
background-color: rgb(var(--gray-08));
|
||||
height: var(--line-width);
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: var(--radius);
|
||||
transform: translate(0, -50%);
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
input[type="range"]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="range"]:focus:before {
|
||||
background-color: rgb(var(--white));
|
||||
}
|
||||
|
||||
input[type="range"][disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
input[type="range"][disabled]:before {
|
||||
background-color: rgb(var(--gray-04));
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-runnable-track {
|
||||
background-color: transparent;
|
||||
margin: 0 -0.5em;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
background-color: rgb(var(--gray-01));
|
||||
color: rgb(var(--gray-12));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-width: var(--line-width);
|
||||
border-style: solid;
|
||||
border-color: rgb(var(--accent));
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
z-index: 2;
|
||||
transform: scale(1);
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input[type="range"]:active::-webkit-slider-thumb {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
input[type="range"]:focus::-webkit-slider-thumb {
|
||||
transform: scale(1.2);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb:focus,
|
||||
input[type="range"]::-webkit-slider-thumb:hover {
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb:active {
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
input[type="range"][disabled]::-webkit-slider-thumb {
|
||||
border-color: rgb(var(--gray-08));
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
input[type="range"][disabled]:active::-webkit-slider-thumb,
|
||||
input[type="range"][disabled]:focus::-webkit-slider-thumb {
|
||||
transform: scale(1);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-track {
|
||||
background-color: rgb(var(--gray-08));
|
||||
margin: 0 -0.5em;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
height: var(--line-width);
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: var(--radius);
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-thumb {
|
||||
background-color: rgb(var(--gray-01));
|
||||
color: rgb(var(--gray-12));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-width: var(--line-width);
|
||||
border-style: solid;
|
||||
border-color: rgb(var(--accent));
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
z-index: 2;
|
||||
transform: scale(1);
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input[type="range"]:active::-moz-range-thumb {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
input[type="range"]:focus::-moz-range-thumb {
|
||||
transform: scale(1.2);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-thumb:focus,
|
||||
input[type="range"]::-moz-range-thumb:hover {
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-thumb:active {
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-progress {
|
||||
background-color: rgb(var(--accent));
|
||||
height: calc(var(--line-width) * 1.5);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
input[type="range"][disabled]::-moz-range-track {
|
||||
background-color: rgb(var(--gray-04));
|
||||
}
|
||||
|
||||
input[type="range"][disabled]::-moz-range-thumb {
|
||||
border-color: rgb(var(--gray-08));
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
input[type="range"][disabled]:active::-moz-range-thumb,
|
||||
input[type="range"][disabled]:focus::-moz-range-thumb {
|
||||
transform: scale(1);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="range"][disabled]::-moz-range-progress {
|
||||
background-color: rgb(var(--gray-08));
|
||||
}
|
||||
|
||||
@ -1,14 +1,21 @@
|
||||
.header {
|
||||
background-color: var(--background);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: var(--z-index-header);
|
||||
}
|
||||
|
||||
.is-link .header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: background-color var(--animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.header-background {
|
||||
background-color: rgba(var(--gray-01), 0.95);
|
||||
}
|
||||
|
||||
.header-area {
|
||||
margin: calc(var(--gutter) * 4) calc(var(--gutter) * -1) calc(var(--gutter) * 2) calc(var(--gutter) * -1);
|
||||
margin: calc(var(--gutter) * 4) calc(var(--gutter) * -1);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
@ -24,17 +31,28 @@
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.is-alignment-left .header-area {
|
||||
.header-search-input[type="text"] {
|
||||
padding-right: 3em;
|
||||
}
|
||||
|
||||
.header-search-clear {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.is-alignment-horizontal-left .header-area {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-alignment-center .header-area {
|
||||
.is-alignment-horizontal-center .header-area {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-alignment-right .header-area {
|
||||
.is-alignment-horizontal-right .header-area {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
|
||||
53
css/link.css
53
css/link.css
@ -3,6 +3,11 @@
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
z-index: var(--z-index-link);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.is-link .link {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.is-scroll-past-end .link {
|
||||
@ -50,7 +55,7 @@
|
||||
}
|
||||
|
||||
.link-panel-front {
|
||||
background-color: var(--gray-02);
|
||||
background-color: rgb(var(--gray-02));
|
||||
border-radius: var(--radius);
|
||||
padding: 0 1em;
|
||||
width: 100%;
|
||||
@ -76,8 +81,8 @@
|
||||
|
||||
.link-panel-front:hover,
|
||||
.link-panel-front:focus {
|
||||
background-color: var(--gray-03);
|
||||
outline: 0;
|
||||
background-color: rgb(var(--gray-03));
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -85,12 +90,17 @@
|
||||
.link-item:focus-within .link-panel-front,
|
||||
.link-item:hover .link-panel-front {
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
background-color: var(--gray-03);
|
||||
height: calc(100% - var(--url-height));
|
||||
outline: none;
|
||||
background-color: rgb(var(--gray-03));
|
||||
box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.is-link-url .link-item:focus .link-panel-front,
|
||||
.is-link-url .link-item:focus-within .link-panel-front,
|
||||
.is-link-url .link-item:hover .link-panel-front {
|
||||
height: calc(100% - var(--url-height));
|
||||
}
|
||||
|
||||
.link-panel-back {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -134,7 +144,7 @@
|
||||
border: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
color: var(--gray-02);
|
||||
color: rgb(var(--gray-02));
|
||||
flex-grow: 1;
|
||||
flex-basis: 50%;
|
||||
}
|
||||
@ -149,12 +159,12 @@
|
||||
|
||||
.link-control-item:focus,
|
||||
.link-control-item:hover {
|
||||
color: var(--black);
|
||||
color: rgb(var(--black));
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.link-control-item:active {
|
||||
color: var(--black);
|
||||
color: rgb(var(--black));
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
transition: none;
|
||||
}
|
||||
@ -164,11 +174,15 @@
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
display: none;
|
||||
align-items: center;
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.is-link-url .link-url {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.is-link-block .link-url {
|
||||
justify-content: center;
|
||||
}
|
||||
@ -186,7 +200,7 @@
|
||||
.link-url-text {
|
||||
margin: 0;
|
||||
font-size: 0.7em;
|
||||
color: var(--black);
|
||||
color: rgb(var(--black));
|
||||
font-family: var(--font-regular);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@ -218,32 +232,37 @@
|
||||
|
||||
.link-item:hover .link-letter,
|
||||
.link-item:focus .link-letter {
|
||||
color: var(--white);
|
||||
color: rgb(var(--white));
|
||||
}
|
||||
|
||||
.link-panel-front:focus .link-letter {
|
||||
color: var(--white);
|
||||
color: rgb(var(--white));
|
||||
}
|
||||
|
||||
.link-name {
|
||||
margin: 0;
|
||||
font-size: 0.9em;
|
||||
font-family: var(--font-regular);
|
||||
color: var(--gray-12);
|
||||
color: rgb(var(--gray-12));
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
display: none;
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.is-link-name .link-name {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.link-item:hover .link-name,
|
||||
.link-item:focus .link-name {
|
||||
color: var(--white);
|
||||
color: rgb(var(--white));
|
||||
}
|
||||
|
||||
.link-panel-front:focus .link-name {
|
||||
color: var(--white);
|
||||
color: rgb(var(--white));
|
||||
}
|
||||
|
||||
.link-empty {
|
||||
@ -253,7 +272,7 @@
|
||||
}
|
||||
|
||||
.link-empty-heading {
|
||||
color: var(--gray-04);
|
||||
color: rgb(var(--gray-16));
|
||||
}
|
||||
|
||||
.is-link-block .link-name {
|
||||
|
||||
26
css/menu.css
26
css/menu.css
@ -1,5 +1,5 @@
|
||||
.menu {
|
||||
background-color: var(--gray-02);
|
||||
background-color: rgb(var(--gray-01));
|
||||
border-radius: var(--radius);
|
||||
position: fixed;
|
||||
top: 1em;
|
||||
@ -13,7 +13,7 @@
|
||||
}
|
||||
|
||||
.menu:focus {
|
||||
outline: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.is-menu-open .menu {
|
||||
@ -45,6 +45,7 @@
|
||||
|
||||
.menu-nav-item {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
.menu-nav-item:not(:last-child) {
|
||||
@ -63,7 +64,7 @@
|
||||
|
||||
.menu-item {
|
||||
padding-bottom: 2em;
|
||||
border-bottom: var(--line-width) solid var(--gray-04);
|
||||
border-bottom: var(--line-width) solid rgb(var(--gray-04));
|
||||
}
|
||||
|
||||
.menu-item:last-child,
|
||||
@ -73,16 +74,18 @@
|
||||
}
|
||||
|
||||
.menu-close {
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding-top: 1.25em;
|
||||
padding-bottom: 1.25em;
|
||||
padding-top: 0.75em;
|
||||
padding-bottom: 0.75em;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.menu-nav-button {
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding-top: 1.5em;
|
||||
padding-bottom: 1.5em;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@ -95,7 +98,13 @@
|
||||
|
||||
@media (min-width: 550px) {
|
||||
.menu {
|
||||
max-height: calc(90vh - 2em);
|
||||
max-height: inherit;
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
padding: 2em;
|
||||
max-height: 70vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.menu-nav {
|
||||
@ -108,6 +117,7 @@
|
||||
|
||||
.menu-content-area {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -37,10 +37,8 @@
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
background-color: var(--gray-02);
|
||||
background-color: rgb(var(--gray-01));
|
||||
border-radius: var(--radius) var(--radius) 0 0;
|
||||
border-bottom: 1em solid transparent;
|
||||
border-bottom-color: var(--gray-02);
|
||||
padding: 2em;
|
||||
max-height: calc(90vh - 3.6666666667em);
|
||||
overflow: scroll;
|
||||
@ -52,19 +50,19 @@
|
||||
.modal-heading {}
|
||||
|
||||
.modal-heading:focus {
|
||||
outline: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.modal-controls {
|
||||
background-color: var(--gray-02);
|
||||
margin: -1em 0 0;
|
||||
background-color: rgb(var(--gray-01));
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border-radius: 0 0 var(--radius) var(--radius);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-controls .button {
|
||||
.modal-button {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
padding-top: 1.5em;
|
||||
@ -72,10 +70,10 @@
|
||||
flex-basis: 50%;
|
||||
}
|
||||
|
||||
.modal-controls .button:first-child {
|
||||
.modal-controls .modal-button:first-child {
|
||||
border-radius: 0 0 0 var(--radius);
|
||||
}
|
||||
|
||||
.modal-controls .button:last-child {
|
||||
.modal-controls .modal-button:last-child {
|
||||
border-radius: 0 0 var(--radius) 0
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@ body {
|
||||
}
|
||||
|
||||
[tabindex="-1"]:focus {
|
||||
outline: 0 !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
hr {
|
||||
@ -141,7 +141,7 @@ a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]):focus {
|
||||
outline: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
pre,
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
.shade {
|
||||
background-color: rgba(var(--accent), 0.5);
|
||||
/* background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0, rgba(var(--accent), 0.6) 100%); */
|
||||
/* background-color: rgba(var(--accent), 0.5); */
|
||||
background-color: rgba(var(--black), 0.5);
|
||||
position: fixed;
|
||||
top: -1em;
|
||||
left: -1em;
|
||||
|
||||
@ -45,10 +45,10 @@
|
||||
|
||||
.tip-message {
|
||||
padding: 0.5em 1em;
|
||||
background-color: var(--gray-04);
|
||||
background-color: rgb(var(--gray-04));
|
||||
border: 0;
|
||||
border-radius: calc(var(--radius) * 2);
|
||||
color: var(--gray-18);
|
||||
color: rgb(var(--gray-18));
|
||||
font-size: 0.8em;
|
||||
font-family: var(--font-regular);
|
||||
text-align: center;
|
||||
@ -59,7 +59,7 @@
|
||||
|
||||
.tip-arrow {
|
||||
border: 0.5em solid transparent;
|
||||
border-top-color: var(--gray-04);
|
||||
border-top-color: rgb(var(--gray-04));
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
@ -17,42 +17,42 @@ h1 {
|
||||
h2 {
|
||||
font-size: 1.2em;
|
||||
font-family: var(--font-regular);
|
||||
color: var(--gray-18);
|
||||
color: rgb(var(--gray-18));
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.1em;
|
||||
font-family: var(--font-regular);
|
||||
color: var(--gray-18);
|
||||
color: rgb(var(--gray-18));
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1em;
|
||||
font-family: var(--font-regular);
|
||||
color: var(--gray-18);
|
||||
color: rgb(var(--gray-18));
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1em;
|
||||
font-family: var(--font-bold);
|
||||
color: var(--gray-18);
|
||||
color: rgb(var(--gray-18));
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.75em;
|
||||
font-family: var(--font-bold);
|
||||
color: var(--gray-18);
|
||||
color: rgb(var(--gray-18));
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--white);
|
||||
margin: 0;
|
||||
color: rgb(var(--white));
|
||||
margin: 0 0 1em 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--gray-04);
|
||||
border-top: 1px solid rgb(var(--gray-04));
|
||||
border-radius: var(--radius);
|
||||
margin: 1em 0;
|
||||
clear: both;
|
||||
@ -65,27 +65,27 @@ strong {
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--gray-16);
|
||||
color: rgb(var(--gray-16));
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
color: var(--gray-16);
|
||||
color: rgb(var(--gray-16));
|
||||
}
|
||||
|
||||
a:focus {
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--white);
|
||||
color: rgb(var(--white));
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: var(--white);
|
||||
color: rgb(var(--white));
|
||||
}
|
||||
|
||||
ol,
|
||||
@ -127,9 +127,9 @@ table {
|
||||
|
||||
table thead tr td,
|
||||
table thead tr th {
|
||||
background-color: var(--gray-03);
|
||||
background-color: rgb(var(--gray-03));
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--gray-04);
|
||||
border-bottom: 1px solid rgb(var(--gray-04));
|
||||
padding: 0.5em;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
@ -138,7 +138,7 @@ table thead tr th {
|
||||
}
|
||||
|
||||
table tr:nth-child(odd) {
|
||||
background-color: var(--gray-02);
|
||||
background-color: rgb(var(--gray-02));
|
||||
}
|
||||
|
||||
table tbody tr td,
|
||||
|
||||
@ -1,12 +1,20 @@
|
||||
.u-list-unstyled {
|
||||
.list-unstyled {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.u-list-unstyled li {
|
||||
.list-unstyled li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.u-list-inline li {
|
||||
.list-inline li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: rgb(var(--gray-12));
|
||||
}
|
||||
|
||||
105
index.html
105
index.html
@ -25,11 +25,16 @@
|
||||
<link rel="stylesheet" href="css/date.css">
|
||||
<link rel="stylesheet" href="css/clock.css">
|
||||
<link rel="stylesheet" href="css/search.css">
|
||||
<link rel="stylesheet" href="css/background.css">
|
||||
<link rel="stylesheet" href="css/link.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="background">
|
||||
<div class="background-image"></div>
|
||||
<div class="background-accent"></div>
|
||||
</div>
|
||||
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
@ -42,10 +47,10 @@
|
||||
</div>
|
||||
<div class="header-item header-search">
|
||||
<form class="search" action="" method="get">
|
||||
<input class="search-input mb-0" type="text" placeholder="Find or Search" tabindex="1" name="q" autocomplete="off" tabindex="1">
|
||||
<input class="header-search-input search-input mb-0" type="text" placeholder="Find or Search" name="q" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="1">
|
||||
<input type="submit" value="Search" class="is-hidden">
|
||||
</form>
|
||||
<button class="button mb-0 ml-3 search-clear" tabindex="1" disabled>
|
||||
<button class="button button-link mb-0 header-search-clear search-clear" tabindex="1" disabled>
|
||||
<span class="icon-close"></span>
|
||||
</button>
|
||||
</div>
|
||||
@ -89,7 +94,7 @@
|
||||
<div class="menu-area">
|
||||
|
||||
<div class="menu-nav">
|
||||
<ul class="menu-nav-area menu-nav-area-grow mb-0 u-list-unstyled">
|
||||
<ul class="menu-nav-area menu-nav-area-grow mb-0 list-unstyled">
|
||||
<li class="menu-nav-item">
|
||||
<button class="menu-nav-button button button-block button-large active" data-target=".menu-content-area-header" tabindex="1">Header</button>
|
||||
</li>
|
||||
@ -99,6 +104,9 @@
|
||||
<li class="menu-nav-item">
|
||||
<button class="menu-nav-button button button-block button-large" data-target=".menu-content-area-layout" tabindex="1">Layout</button>
|
||||
</li>
|
||||
<li class="menu-nav-item">
|
||||
<button class="menu-nav-button button button-block button-large" data-target=".menu-content-area-background" tabindex="1">Background</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="menu-nav-area">
|
||||
<button class="menu-close button button-block button-large mb-0" tabindex="1"><span class="icon-close"></span></button>
|
||||
@ -135,14 +143,14 @@
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Date</h1>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-date-show-date" class="control-header-date-show-date" type="checkbox" tabindex="1">
|
||||
<label for="control-header-date-show-date"><span class="label-icon"></span>Date</label>
|
||||
</div>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-date-show-day" class="control-header-date-show-day" type="checkbox" tabindex="1">
|
||||
<label for="control-header-date-show-day"><span class="label-icon"></span>Day</label>
|
||||
</div>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-date-show-date" class="control-header-date-show-date" type="checkbox" tabindex="1">
|
||||
<label for="control-header-date-show-date"><span class="label-icon"></span>Date</label>
|
||||
</div>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-header-date-show-month" class="control-header-date-show-month" type="checkbox" tabindex="1">
|
||||
<label for="control-header-date-show-month"><span class="label-icon"></span>Month</label>
|
||||
@ -193,7 +201,7 @@
|
||||
</div>
|
||||
<div class="input-wrap form-indent-2">
|
||||
<label for="control-header-search-engine-custom-url">URL</label>
|
||||
<input id="control-header-search-engine-custom-url" type="text" class="control-header-search-engine-custom-url mb-0" placeholder="https://" tabindex="1" autocomplete="off">
|
||||
<input id="control-header-search-engine-custom-url" type="text" class="control-header-search-engine-custom-url mb-0" placeholder="https://" tabindex="1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
@ -208,22 +216,53 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Alignment</h1>
|
||||
<h1 class="menu-header">Horizontal Alignment</h1>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-layout-alignment-left" class="control-layout-alignment-left" type="radio" tabindex="1" name="control-layout-alignment" value="left">
|
||||
<label for="control-layout-alignment-left"><span class="label-icon"></span>Left</label>
|
||||
<input id="control-layout-alignment-horizontal-left" class="control-layout-alignment-horizontal-left" type="radio" tabindex="1" name="control-layout-alignment-horizontal" value="left">
|
||||
<label for="control-layout-alignment-horizontal-left"><span class="label-icon"></span>Left</label>
|
||||
</div>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-layout-alignment-center" class="control-layout-alignment-center" type="radio" tabindex="1" name="control-layout-alignment" value="center">
|
||||
<label for="control-layout-alignment-center"><span class="label-icon"></span>Center</label>
|
||||
<input id="control-layout-alignment-horizontal-center" class="control-layout-alignment-horizontal-center" type="radio" tabindex="1" name="control-layout-alignment-horizontal" value="center">
|
||||
<label for="control-layout-alignment-horizontal-center"><span class="label-icon"></span>Center</label>
|
||||
</div>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-layout-alignment-right" class="control-layout-alignment-right" type="radio" tabindex="1" name="control-layout-alignment" value="right">
|
||||
<label for="control-layout-alignment-right"><span class="label-icon"></span>Right</label>
|
||||
<input id="control-layout-alignment-horizontal-right" class="control-layout-alignment-horizontal-right" type="radio" tabindex="1" name="control-layout-alignment-horizontal" value="right">
|
||||
<label for="control-layout-alignment-horizontal-right"><span class="label-icon"></span>Right</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Vertical Alignment</h1>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-layout-alignment-vertical-top" class="control-layout-alignment-vertical-top" type="radio" tabindex="1" name="control-layout-alignment-vertical" value="top">
|
||||
<label for="control-layout-alignment-vertical-top"><span class="label-icon"></span>Top</label>
|
||||
</div>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-layout-alignment-vertical-center" class="control-layout-alignment-vertical-center" type="radio" tabindex="1" name="control-layout-alignment-vertical" value="center">
|
||||
<label for="control-layout-alignment-vertical-center"><span class="label-icon"></span>Center</label>
|
||||
</div>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-layout-alignment-vertical-bottom" class="control-layout-alignment-vertical-bottom" type="radio" tabindex="1" name="control-layout-alignment-vertical" value="bottom">
|
||||
<label for="control-layout-alignment-vertical-bottom"><span class="label-icon"></span>Bottom</label>
|
||||
</div>
|
||||
<p class="input-helper small muted">Available when Bookmarks are not shown.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-content-area menu-content-area-bookmarks is-hidden">
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Bookmarks</h1>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-link-show-active" class="control-link-show-active" type="checkbox" tabindex="1">
|
||||
<label for="control-link-show-active"><span class="label-icon"></span>Show</label>
|
||||
</div>
|
||||
<div class="checkbox-wrap form-indent-1">
|
||||
<input id="control-link-show-name" class="control-link-show-name" type="checkbox" tabindex="1">
|
||||
<label for="control-link-show-name"><span class="label-icon"></span>Names</label>
|
||||
</div>
|
||||
<div class="checkbox-wrap form-indent-1">
|
||||
<input id="control-link-show-url" class="control-link-show-url" type="checkbox" tabindex="1">
|
||||
<label for="control-link-show-url"><span class="label-icon"></span>URL (on hover)</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Open</h1>
|
||||
<div class="checkbox-wrap">
|
||||
@ -246,7 +285,7 @@
|
||||
<h1 class="menu-header">Sort</h1>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-link-sort-none" class="control-link-sort-none" type="radio" tabindex="1" name="control-link-sort" value="none">
|
||||
<label for="control-link-sort-none"><span class="label-icon"></span>None (As added)</label>
|
||||
<label for="control-link-sort-none"><span class="label-icon"></span>None (as added)</label>
|
||||
</div>
|
||||
<div class="radio-wrap">
|
||||
<input id="control-link-sort-name" class="control-link-sort-name" type="radio" tabindex="1" name="control-link-sort" value="name">
|
||||
@ -309,6 +348,39 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-content-area menu-content-area-background is-hidden">
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Image</h1>
|
||||
<div class="checkbox-wrap">
|
||||
<input id="control-background-image-active" class="control-background-image-active" type="checkbox" tabindex="1">
|
||||
<label for="control-background-image-active"><span class="label-icon"></span>Show</label>
|
||||
</div>
|
||||
<div class="input-wrap form-indent-1">
|
||||
<label for="control-background-image-url">URL or path</label>
|
||||
<input id="control-background-image-url" type="text" class="control-background-image-url" placeholder="http:// or ../path/to/file" tabindex="1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
||||
<p class="input-helper small muted">Enter a URL to an image file or a path to a local file.</p>
|
||||
<p class="input-helper small muted">To use local files enter a relative file path, eg:</p>
|
||||
<p class="input-helper small muted">../background/abstract.jpg</p>
|
||||
<p class="input-helper small muted">../background/gray-steps.jpg</p>
|
||||
</div>
|
||||
<div class="input-wrap form-indent-1">
|
||||
<label for="control-background-image-opacity">Opacity</label>
|
||||
<input id="control-background-image-opacity" type="range" min="0" max="100" value="0" class="control-background-image-opacity mb-0" placeholder="Path to file" tabindex="1">
|
||||
</div>
|
||||
<div class="input-wrap form-indent-1">
|
||||
<label for="control-background-image-grayscale">Grayscale</label>
|
||||
<input id="control-background-image-grayscale" type="range" min="0" max="100" value="0" class="control-background-image-grayscale mb-0" placeholder="Path to file" tabindex="1">
|
||||
</div>
|
||||
<div class="input-wrap form-indent-1">
|
||||
<label for="control-background-image-blur">Blur</label>
|
||||
<input id="control-background-image-blur" type="range" min="0" max="100" value="0" class="control-background-image-blur mb-0" placeholder="Path to file" tabindex="1">
|
||||
</div>
|
||||
<div class="input-wrap form-indent-1">
|
||||
<label for="control-background-image-accent-opacity">Accent overlay</label>
|
||||
<input id="control-background-image-accent-opacity" type="range" min="0" max="50" value="0" class="control-background-image-accent-opacity mb-0" placeholder="URL or path to file" tabindex="1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -334,6 +406,7 @@
|
||||
<script src="js/link.js"></script>
|
||||
<script src="js/version.js"></script>
|
||||
<script src="js/keyboard.js"></script>
|
||||
<script src="js/background.js"></script>
|
||||
<script src="js/init.js"></script>
|
||||
|
||||
</html>
|
||||
|
||||
42
js/background.js
Normal file
42
js/background.js
Normal file
@ -0,0 +1,42 @@
|
||||
var background = (function() {
|
||||
|
||||
var render = function() {
|
||||
var html = helper.e("html");
|
||||
var background = helper.e(".background");
|
||||
var backgroundImage = helper.e(".background-image");
|
||||
if (state.get().background.image.active) {
|
||||
helper.removeClass(background, "is-hidden");
|
||||
html.style.setProperty("--background-image", "url(\"" + state.get().background.image.url + "\")");
|
||||
html.style.setProperty("--background-blur", state.get().background.image.blur + "px");
|
||||
html.style.setProperty("--background-grayscale", state.get().background.image.grayscale);
|
||||
html.style.setProperty("--background-opacity", state.get().background.image.opacity);
|
||||
html.style.setProperty("--background-accent-opacity", state.get().background.image.accentOpacity);
|
||||
if (state.get().background.image.blur > 0 && state.get().background.image.grayscale > 0) {
|
||||
backgroundImage.style.setProperty("filter", "blur(var(--background-blur)) grayscale(var(--background-grayscale))");
|
||||
} else if (state.get().background.image.blur > 0 && state.get().background.image.grayscale == 0) {
|
||||
backgroundImage.style.setProperty("filter", "blur(var(--background-blur))");
|
||||
} else if (state.get().background.image.blur == 0 && state.get().background.image.grayscale > 0) {
|
||||
backgroundImage.style.setProperty("filter", "grayscale(var(--background-grayscale))");
|
||||
};
|
||||
} else {
|
||||
helper.addClass(background, "is-hidden");
|
||||
html.style.setProperty("--background-image", "none");
|
||||
html.style.setProperty("--background-blur", "none");
|
||||
html.style.setProperty("--background-grayscale", "none");
|
||||
html.style.setProperty("--background-opacity", "none");
|
||||
html.style.setProperty("--background-accent-opacity", "none");
|
||||
backgroundImage.style.setProperty("filter", "none");
|
||||
};
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
render();
|
||||
};
|
||||
|
||||
// exposed methods
|
||||
return {
|
||||
render: render,
|
||||
init: init
|
||||
};
|
||||
|
||||
})();
|
||||
185
js/control.js
185
js/control.js
@ -54,10 +54,14 @@ var control = (function() {
|
||||
helper.e(".control-header-search-engine-custom-url").value = state.get().header.search.engine.custom.url;
|
||||
};
|
||||
var _alignment = function() {
|
||||
helper.removeClass(html, "is-alignment-left");
|
||||
helper.removeClass(html, "is-alignment-center");
|
||||
helper.removeClass(html, "is-alignment-right");
|
||||
helper.addClass(html, "is-alignment-" + state.get().layout.alignment);
|
||||
helper.removeClass(html, "is-alignment-horizontal-left");
|
||||
helper.removeClass(html, "is-alignment-horizontal-center");
|
||||
helper.removeClass(html, "is-alignment-horizontal-right");
|
||||
helper.removeClass(html, "is-alignment-vertical-top");
|
||||
helper.removeClass(html, "is-alignment-vertical-center");
|
||||
helper.removeClass(html, "is-alignment-vertical-bottom");
|
||||
helper.addClass(html, "is-alignment-horizontal-" + state.get().layout.alignment.horizontal);
|
||||
helper.addClass(html, "is-alignment-vertical-" + state.get().layout.alignment.vertical);
|
||||
};
|
||||
var _link = function() {
|
||||
var view = {
|
||||
@ -71,6 +75,21 @@ var control = (function() {
|
||||
}
|
||||
};
|
||||
view[state.get().link.style]();
|
||||
if (state.get().link.show.active) {
|
||||
helper.addClass(html, "is-link");
|
||||
} else {
|
||||
helper.removeClass(html, "is-link");
|
||||
};
|
||||
if (state.get().link.show.name) {
|
||||
helper.addClass(html, "is-link-name");
|
||||
} else {
|
||||
helper.removeClass(html, "is-link-name");
|
||||
};
|
||||
if (state.get().link.show.url) {
|
||||
helper.addClass(html, "is-link-url");
|
||||
} else {
|
||||
helper.removeClass(html, "is-link-url");
|
||||
};
|
||||
};
|
||||
var _layout = function() {
|
||||
helper.removeClass(html, "is-layout-fluid");
|
||||
@ -203,11 +222,65 @@ var control = (function() {
|
||||
});
|
||||
};
|
||||
};
|
||||
var _link = function() {
|
||||
if (state.get().link.show.active) {
|
||||
helper.e(".control-link-show-name").disabled = false;
|
||||
helper.e(".control-link-show-url").disabled = false;
|
||||
helper.e(".control-link-style-block").disabled = false;
|
||||
helper.e(".control-link-style-list").disabled = false;
|
||||
helper.e(".control-link-new-tab").disabled = false;
|
||||
helper.e(".control-link-sort-none").disabled = false;
|
||||
helper.e(".control-link-sort-name").disabled = false;
|
||||
helper.e(".control-link-sort-letter").disabled = false;
|
||||
helper.e(".control-layout-alignment-vertical-top").disabled = true;
|
||||
helper.e(".control-layout-alignment-vertical-center").disabled = true;
|
||||
helper.e(".control-layout-alignment-vertical-bottom").disabled = true;
|
||||
} else {
|
||||
helper.e(".control-link-show-name").disabled = true;
|
||||
helper.e(".control-link-show-url").disabled = true;
|
||||
helper.e(".control-link-style-block").disabled = true;
|
||||
helper.e(".control-link-style-list").disabled = true;
|
||||
helper.e(".control-link-new-tab").disabled = true;
|
||||
helper.e(".control-link-sort-none").disabled = true;
|
||||
helper.e(".control-link-sort-name").disabled = true;
|
||||
helper.e(".control-link-sort-letter").disabled = true;
|
||||
helper.e(".control-layout-alignment-vertical-top").disabled = false;
|
||||
helper.e(".control-layout-alignment-vertical-center").disabled = false;
|
||||
helper.e(".control-layout-alignment-vertical-bottom").disabled = false;
|
||||
};
|
||||
};
|
||||
var _background = function() {
|
||||
if (state.get().background.image.active) {
|
||||
helper.e("[for=control-background-image-url]").removeAttribute("disabled");
|
||||
helper.e(".control-background-image-url").disabled = false;
|
||||
helper.e("[for=control-background-image-opacity]").removeAttribute("disabled");
|
||||
helper.e(".control-background-image-opacity").disabled = false;
|
||||
helper.e("[for=control-background-image-blur]").removeAttribute("disabled");
|
||||
helper.e(".control-background-image-blur").disabled = false;
|
||||
helper.e("[for=control-background-image-grayscale]").removeAttribute("disabled");
|
||||
helper.e(".control-background-image-grayscale").disabled = false;
|
||||
helper.e("[for=control-background-image-accent-opacity]").removeAttribute("disabled");
|
||||
helper.e(".control-background-image-accent-opacity").disabled = false;
|
||||
} else {
|
||||
helper.e("[for=control-background-image-url]").setAttribute("disabled", "");
|
||||
helper.e(".control-background-image-url").disabled = true;
|
||||
helper.e("[for=control-background-image-opacity]").setAttribute("disabled", "");
|
||||
helper.e(".control-background-image-opacity").disabled = true;
|
||||
helper.e("[for=control-background-image-blur]").setAttribute("disabled", "");
|
||||
helper.e(".control-background-image-blur").disabled = true;
|
||||
helper.e("[for=control-background-image-grayscale]").setAttribute("disabled", "");
|
||||
helper.e(".control-background-image-grayscale").disabled = true;
|
||||
helper.e("[for=control-background-image-accent-opacity]").setAttribute("disabled", "");
|
||||
helper.e(".control-background-image-accent-opacity").disabled = true;
|
||||
};
|
||||
};
|
||||
_edit();
|
||||
_date();
|
||||
_clock();
|
||||
_search();
|
||||
_theme();
|
||||
_link();
|
||||
_background();
|
||||
};
|
||||
|
||||
var _bind = function() {
|
||||
@ -262,6 +335,34 @@ var control = (function() {
|
||||
link.render();
|
||||
data.save();
|
||||
});
|
||||
helper.e(".control-link-show-active").addEventListener("change", function() {
|
||||
state.change({
|
||||
path: "link.show.active",
|
||||
value: this.checked
|
||||
});
|
||||
render();
|
||||
dependents();
|
||||
header.render();
|
||||
data.save();
|
||||
});
|
||||
helper.e(".control-link-show-name").addEventListener("change", function() {
|
||||
state.change({
|
||||
path: "link.show.name",
|
||||
value: this.checked
|
||||
});
|
||||
render();
|
||||
dependents();
|
||||
data.save();
|
||||
});
|
||||
helper.e(".control-link-show-url").addEventListener("change", function() {
|
||||
state.change({
|
||||
path: "link.show.url",
|
||||
value: this.checked
|
||||
});
|
||||
render();
|
||||
dependents();
|
||||
data.save();
|
||||
});
|
||||
helper.eA("input[name='control-link-style']").forEach(function(arrayItem, index) {
|
||||
arrayItem.addEventListener("change", function() {
|
||||
state.change({
|
||||
@ -481,10 +582,20 @@ var control = (function() {
|
||||
header.render();
|
||||
data.save();
|
||||
}, false);
|
||||
helper.eA("input[name='control-layout-alignment']").forEach(function(arrayItem, index) {
|
||||
helper.eA("input[name='control-layout-alignment-horizontal']").forEach(function(arrayItem, index) {
|
||||
arrayItem.addEventListener("change", function() {
|
||||
state.change({
|
||||
path: "layout.alignment",
|
||||
path: "layout.alignment.horizontal",
|
||||
value: this.value
|
||||
});
|
||||
render();
|
||||
data.save();
|
||||
}, false);
|
||||
});
|
||||
helper.eA("input[name='control-layout-alignment-vertical']").forEach(function(arrayItem, index) {
|
||||
arrayItem.addEventListener("change", function() {
|
||||
state.change({
|
||||
path: "layout.alignment.vertical",
|
||||
value: this.value
|
||||
});
|
||||
render();
|
||||
@ -510,6 +621,56 @@ var control = (function() {
|
||||
render();
|
||||
data.save();
|
||||
}, false);
|
||||
helper.e(".control-background-image-active").addEventListener("change", function() {
|
||||
state.change({
|
||||
path: "background.image.active",
|
||||
value: this.checked
|
||||
});
|
||||
render();
|
||||
dependents();
|
||||
background.render();
|
||||
data.save();
|
||||
}, false);
|
||||
helper.e(".control-background-image-url").addEventListener("input", function() {
|
||||
state.change({
|
||||
path: "background.image.url",
|
||||
value: this.value
|
||||
});
|
||||
background.render();
|
||||
data.save();
|
||||
}, false);
|
||||
helper.e(".control-background-image-opacity").addEventListener("input", function() {
|
||||
state.change({
|
||||
path: "background.image.opacity",
|
||||
value: (100 - parseInt(this.value)) / 100
|
||||
});
|
||||
background.render();
|
||||
data.save();
|
||||
}, false);
|
||||
helper.e(".control-background-image-blur").addEventListener("input", function() {
|
||||
state.change({
|
||||
path: "background.image.blur",
|
||||
value: parseInt(this.value, 10)
|
||||
});
|
||||
background.render();
|
||||
data.save();
|
||||
}, false);
|
||||
helper.e(".control-background-image-grayscale").addEventListener("input", function() {
|
||||
state.change({
|
||||
path: "background.image.grayscale",
|
||||
value: parseInt(this.value, 10) / 100
|
||||
});
|
||||
background.render();
|
||||
data.save();
|
||||
}, false);
|
||||
helper.e(".control-background-image-accent-opacity").addEventListener("input", function() {
|
||||
state.change({
|
||||
path: "background.image.accentOpacity",
|
||||
value: parseInt(this.value, 10) / 100
|
||||
});
|
||||
background.render();
|
||||
data.save();
|
||||
}, false);
|
||||
};
|
||||
|
||||
var update = function() {
|
||||
@ -518,6 +679,9 @@ var control = (function() {
|
||||
helper.e(".control-layout-theme-random").checked = state.get().layout.theme.random.active;
|
||||
helper.e(".control-layout-theme-style-" + state.get().layout.theme.random.style).checked = true;
|
||||
helper.e(".control-link-new-tab").value = state.get().link.style.newTab;
|
||||
helper.e(".control-link-show-active").checked = state.get().link.show.active;
|
||||
helper.e(".control-link-show-name").checked = state.get().link.show.name;
|
||||
helper.e(".control-link-show-url").checked = state.get().link.show.url;
|
||||
helper.e(".control-link-style-" + state.get().link.style).checked = true;
|
||||
helper.e(".control-link-sort-" + state.get().link.sort).checked = true;
|
||||
helper.e(".control-header-search-active").checked = state.get().header.search.active;
|
||||
@ -538,9 +702,16 @@ var control = (function() {
|
||||
helper.e(".control-header-edit-add-active").checked = state.get().header.editAdd.active;
|
||||
helper.e(".control-header-accent-active").checked = state.get().header.accent.active;
|
||||
helper.e(".control-header-date-character-length-" + state.get().header.date.characterLength).checked = true;
|
||||
helper.e(".control-layout-alignment-" + state.get().layout.alignment).checked = true;
|
||||
helper.e(".control-layout-alignment-horizontal-" + state.get().layout.alignment.horizontal).checked = true;
|
||||
helper.e(".control-layout-alignment-vertical-" + state.get().layout.alignment.vertical).checked = true;
|
||||
helper.e(".control-layout-container-" + state.get().layout.container).checked = true;
|
||||
helper.e(".control-layout-scroll-past-end").checked = state.get().layout.scrollPastEnd;
|
||||
helper.e(".control-background-image-active").checked = state.get().background.image.active;
|
||||
helper.e(".control-background-image-url").value = state.get().background.image.url;
|
||||
helper.e(".control-background-image-opacity").value = 100 - (state.get().background.image.opacity * 100);
|
||||
helper.e(".control-background-image-blur").value = state.get().background.image.blur;
|
||||
helper.e(".control-background-image-grayscale").value = state.get().background.image.grayscale * 100;
|
||||
helper.e(".control-background-image-accent-opacity").value = (state.get().background.image.accentOpacity * 100);
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
|
||||
@ -62,12 +62,12 @@ var date = (function() {
|
||||
value: "date-item date-year"
|
||||
}]
|
||||
});
|
||||
if (state.get().header.date.show.date) {
|
||||
date.appendChild(dateNumber);
|
||||
};
|
||||
if (state.get().header.date.show.day) {
|
||||
date.appendChild(day);
|
||||
};
|
||||
if (state.get().header.date.show.date) {
|
||||
date.appendChild(dateNumber);
|
||||
};
|
||||
if (state.get().header.date.show.month) {
|
||||
date.appendChild(month);
|
||||
};
|
||||
|
||||
20
js/header.js
20
js/header.js
@ -4,6 +4,9 @@ var header = (function() {
|
||||
window.addEventListener("resize", function(event) {
|
||||
render();
|
||||
}, false);
|
||||
window.addEventListener("scroll", function(event) {
|
||||
_addHeaderBackground();
|
||||
}, false);
|
||||
helper.eA(".container").forEach(function(arrayItem, index) {
|
||||
arrayItem.addEventListener("transitionend", function() {
|
||||
render();
|
||||
@ -11,13 +14,26 @@ var header = (function() {
|
||||
});
|
||||
};
|
||||
|
||||
var _addHeaderBackground = function() {
|
||||
var html = helper.e("html");
|
||||
var header = helper.e(".header");
|
||||
var scrollPosition = document.documentElement.scrollTop;
|
||||
var fontSize = parseInt(getComputedStyle(html).fontSize, 10);
|
||||
if (scrollPosition > (fontSize * 2)) {
|
||||
helper.addClass(header, "header-background");
|
||||
} else {
|
||||
helper.removeClass(header, "header-background");
|
||||
};
|
||||
};
|
||||
|
||||
var render = function() {
|
||||
var html = helper.e("html");
|
||||
var header = helper.e(".header");
|
||||
var link = helper.e(".link");
|
||||
var height = parseInt(getComputedStyle(header).height, 10);
|
||||
var fontSize = parseInt(getComputedStyle(html).fontSize, 10);
|
||||
link.style.marginTop = (height + fontSize) + "px";
|
||||
// var fontSize = parseInt(getComputedStyle(html).fontSize, 10);
|
||||
// link.style.marginTop = (height + fontSize) + "px";
|
||||
link.style.marginTop = height + "px";
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
|
||||
@ -46,3 +46,6 @@ tip.init();
|
||||
|
||||
// render header height padding
|
||||
header.init();
|
||||
|
||||
// render background image
|
||||
background.init();
|
||||
|
||||
@ -22,8 +22,10 @@ var keyboard = (function() {
|
||||
};
|
||||
// ctrl+alt+a
|
||||
if (event.ctrlKey && event.altKey && event.keyCode == 65) {
|
||||
menu.close();
|
||||
link.add();
|
||||
if (state.get().link.show.active) {
|
||||
menu.close();
|
||||
link.add();
|
||||
};
|
||||
};
|
||||
// ctrl+alt+m
|
||||
if (event.ctrlKey && event.altKey && event.keyCode == 77) {
|
||||
@ -33,20 +35,22 @@ var keyboard = (function() {
|
||||
};
|
||||
// ctrl+alt+e
|
||||
if (event.ctrlKey && event.altKey && event.keyCode == 69) {
|
||||
if (state.get().edit.active) {
|
||||
state.change({
|
||||
path: "edit.active",
|
||||
value: false
|
||||
});
|
||||
} else {
|
||||
state.change({
|
||||
path: "edit.active",
|
||||
value: true
|
||||
});
|
||||
if (state.get().link.show.active) {
|
||||
if (state.get().edit.active) {
|
||||
state.change({
|
||||
path: "edit.active",
|
||||
value: false
|
||||
});
|
||||
} else {
|
||||
state.change({
|
||||
path: "edit.active",
|
||||
value: true
|
||||
});
|
||||
};
|
||||
control.update();
|
||||
control.render();
|
||||
data.save();
|
||||
};
|
||||
control.update();
|
||||
control.render();
|
||||
data.save();
|
||||
};
|
||||
// ctrl+alt+r
|
||||
if (event.ctrlKey && event.altKey && event.keyCode == 82) {
|
||||
|
||||
@ -192,7 +192,7 @@ var link = (function() {
|
||||
value: "text"
|
||||
}, {
|
||||
key: "class",
|
||||
value: "link-form-input-url"
|
||||
value: "link-form-input-url mb-0"
|
||||
}, {
|
||||
key: "id",
|
||||
value: "url"
|
||||
|
||||
@ -58,11 +58,11 @@ var modal = (function() {
|
||||
modalControls.setAttribute("class", "modal-controls");
|
||||
var actionButton = document.createElement("button");
|
||||
actionButton.setAttribute("tabindex", "1");
|
||||
actionButton.setAttribute("class", "button button-primary button-block");
|
||||
actionButton.setAttribute("class", "modal-button button button-primary button-block");
|
||||
actionButton.textContent = options.actionText;
|
||||
var cancelButton = document.createElement("button");
|
||||
cancelButton.setAttribute("tabindex", "1");
|
||||
cancelButton.setAttribute("class", "button button-primary button-block");
|
||||
cancelButton.setAttribute("class", "modal-button button button-primary button-block");
|
||||
cancelButton.textContent = options.cancelText;
|
||||
modalControls.appendChild(cancelButton);
|
||||
modalControls.appendChild(actionButton);
|
||||
|
||||
20
js/state.js
20
js/state.js
@ -53,13 +53,21 @@ var state = (function() {
|
||||
}
|
||||
},
|
||||
link: {
|
||||
show: {
|
||||
active: true,
|
||||
name: true,
|
||||
url: true
|
||||
},
|
||||
editObject: null,
|
||||
newTab: false,
|
||||
style: "block",
|
||||
sort: "none"
|
||||
},
|
||||
layout: {
|
||||
alignment: "left",
|
||||
alignment: {
|
||||
horizontal: "left",
|
||||
vertical: "top"
|
||||
},
|
||||
container: "wide",
|
||||
scrollPastEnd: true,
|
||||
theme: {
|
||||
@ -74,6 +82,16 @@ var state = (function() {
|
||||
}
|
||||
},
|
||||
},
|
||||
background: {
|
||||
image: {
|
||||
active: false,
|
||||
url: "../background/gray-steps.jpg",
|
||||
blur: 0,
|
||||
opacity: 1,
|
||||
grayscale: 0,
|
||||
accentOpacity: 0
|
||||
}
|
||||
},
|
||||
edit: {
|
||||
active: false
|
||||
},
|
||||
|
||||
27
js/update.js
27
js/update.js
@ -41,6 +41,29 @@ var update = (function() {
|
||||
return data;
|
||||
};
|
||||
|
||||
var _update_240 = function(data) {
|
||||
data.state.link.show = {
|
||||
active: true,
|
||||
name: true,
|
||||
url: true
|
||||
};
|
||||
data.state.layout.alignment = {
|
||||
horizontal: data.state.layout.alignment,
|
||||
vertical: "top"
|
||||
};
|
||||
data.state.background = {
|
||||
image: {
|
||||
active: false,
|
||||
url: "../background/gray-steps.jpg",
|
||||
blur: 0,
|
||||
opacity: 1,
|
||||
accentOpacity: 0
|
||||
}
|
||||
};
|
||||
data.version = 2.40;
|
||||
return data;
|
||||
};
|
||||
|
||||
// var _update_300 = function(data) {
|
||||
// data.version = 3.00;
|
||||
// return data;
|
||||
@ -63,6 +86,10 @@ var update = (function() {
|
||||
console.log("\trunning update", 2.30);
|
||||
data = _update_230(data);
|
||||
};
|
||||
if (data.version < 2.40) {
|
||||
console.log("\trunning update", 2.40);
|
||||
data = _update_240(data);
|
||||
};
|
||||
// if (data.version < 3.00) {
|
||||
// console.log("\t# running update", 3.00);
|
||||
// data = _update_300(data);
|
||||
|
||||
@ -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.3.0";
|
||||
var current = "2.4.0";
|
||||
|
||||
var get = function() {
|
||||
var number = current.split(".");
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user