mirror of
https://github.com/zombieFox/nightTab.git
synced 2024-12-27 17:19:05 +01:00
[refactor] organise css variables
This commit is contained in:
Kuldeep M
parent
dc399f2300
commit
a5cc2f15dc
@ -5,7 +5,7 @@
|
||||
}
|
||||
|
||||
.auto-suggest-list {
|
||||
background-color: rgb(var(--gray-02));
|
||||
background-color: rgb(var(--theme-gray-02));
|
||||
margin-top: 0.5em;
|
||||
padding: 1em;
|
||||
position: absolute;
|
||||
@ -19,7 +19,7 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
box-shadow: var(--shadow-large);
|
||||
box-shadow: var(--layout-shadow-large);
|
||||
}
|
||||
|
||||
.auto-suggest-list-item {
|
||||
@ -42,33 +42,33 @@
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
transition: background-color var(--animation-speed-fast) ease-in-out, color var(--animation-speed-fast) ease-in-out, border-color var(--animation-speed-fast) ease-in-out, box-shadow var(--animation-speed-fast) ease-in-out;
|
||||
transition: background-color var(--layout-animation-speed-fast) ease-in-out, color var(--layout-animation-speed-fast) ease-in-out, border-color var(--layout-animation-speed-fast) ease-in-out, box-shadow var(--layout-animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.auto-suggest-link:link,
|
||||
.auto-suggest-link:visited {
|
||||
color: rgb(var(--gray-16));
|
||||
color: rgb(var(--theme-gray-16));
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.auto-suggest-link:hover {
|
||||
background-color: rgb(var(--gray-03));
|
||||
background-color: rgb(var(--theme-gray-03));
|
||||
color: rgb(var(--form-input-text-hover));
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 0 var(--line-width) rgb(var(--gray-06));
|
||||
box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06));
|
||||
}
|
||||
|
||||
.auto-suggest-link:focus {
|
||||
background-color: rgb(var(--gray-01));
|
||||
background-color: rgb(var(--theme-gray-01));
|
||||
color: rgb(var(--form-input-text-focus));
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 0 var(--line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--line-width) * 2) rgba(var(--theme-accent), 0.25);
|
||||
box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
|
||||
}
|
||||
|
||||
.auto-suggest-link:active {
|
||||
color: rgb(var(--style-neutral-text));
|
||||
color: rgb(var(--theme-style-text));
|
||||
}
|
||||
|
||||
.auto-suggest-icon {
|
||||
@ -76,7 +76,7 @@
|
||||
}
|
||||
|
||||
.auto-suggest-icon-text {
|
||||
color: rgb(var(--gray-08));
|
||||
color: rgb(var(--theme-gray-08));
|
||||
margin-top: 0.5em;
|
||||
font-size: 0.6em;
|
||||
text-align: center;
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
height: 100vh;
|
||||
pointer-events: none;
|
||||
z-index: var(--z-index-background);
|
||||
animation: appear var(--animation-speed-slow) 1;
|
||||
animation: appear var(--layout-animation-speed-slow) 1;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
::selection {
|
||||
background-color: rgb(var(--theme-accent));
|
||||
color: rgb(var(--white));
|
||||
color: rgb(var(--theme-white));
|
||||
}
|
||||
|
||||
html {
|
||||
@ -9,7 +9,7 @@ html {
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: rgb(var(--style-neutral-text));
|
||||
color: rgb(var(--theme-style-text));
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
font-family: var(--font-regular);
|
||||
@ -18,7 +18,7 @@ body {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
transition: background-color var(--animation-speed-fast) ease-in-out;
|
||||
transition: background-color var(--layout-animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.is-layout-scroll-past-end body {
|
||||
|
||||
@ -3,7 +3,7 @@ button,
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
background-color: rgb(var(--gray-02));
|
||||
background-color: rgb(var(--theme-gray-02));
|
||||
padding: 0.125em 1em;
|
||||
margin: 0 0 1em 0;
|
||||
color: rgb(var(--button-text));
|
||||
@ -12,8 +12,8 @@ input[type="submit"] {
|
||||
min-height: 2.5em;
|
||||
line-height: 1;
|
||||
border: 0;
|
||||
border-top-width: var(--line-width);
|
||||
border-bottom-width: var(--line-width);
|
||||
border-top-width: var(--layout-line-width);
|
||||
border-bottom-width: var(--layout-line-width);
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
border-radius: var(--theme-radius);
|
||||
@ -22,7 +22,7 @@ input[type="submit"] {
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
box-shadow: none;
|
||||
transition: background-color var(--animation-speed-fast) ease-in-out, color var(--animation-speed-fast) ease-in-out, border var(--animation-speed-fast) ease-in-out;
|
||||
transition: background-color var(--layout-animation-speed-fast) ease-in-out, color var(--layout-animation-speed-fast) ease-in-out, border var(--layout-animation-speed-fast) ease-in-out;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
@ -39,8 +39,8 @@ input[type="reset"]:hover,
|
||||
input[type="reset"]:focus,
|
||||
input[type="submit"]:hover,
|
||||
input[type="submit"]:focus {
|
||||
background-color: rgb(var(--gray-03));
|
||||
border-bottom-color: rgb(var(--gray-08));
|
||||
background-color: rgb(var(--theme-gray-03));
|
||||
border-bottom-color: rgb(var(--theme-gray-08));
|
||||
color: rgb(var(--button-text-hover-focus));
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
@ -51,7 +51,7 @@ button:active,
|
||||
input[type="button"]:active,
|
||||
input[type="reset"]:active,
|
||||
input[type="submit"]:active {
|
||||
background-color: rgb(var(--gray-04));
|
||||
background-color: rgb(var(--theme-gray-04));
|
||||
border-bottom-color: rgb(var(--theme-accent));
|
||||
color: rgb(var(--button-text-active));
|
||||
transition: none;
|
||||
@ -66,7 +66,7 @@ button[disabled]:focus,
|
||||
.button[disabled]:focus,
|
||||
button[disabled]:active,
|
||||
.button[disabled]:active {
|
||||
background-color: rgb(var(--gray-02));
|
||||
background-color: rgb(var(--theme-gray-02));
|
||||
border-color: transparent;
|
||||
color: rgb(var(--button-text-disabled));
|
||||
cursor: default;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
font-family: var(--font-fjalla);
|
||||
color: rgb(var(--style-neutral-text));
|
||||
color: rgb(var(--theme-style-text));
|
||||
width: 100%;
|
||||
min-height: 2.5em;
|
||||
display: flex;
|
||||
@ -64,11 +64,11 @@
|
||||
}
|
||||
|
||||
.clock-hours {
|
||||
color: rgb(var(--style-neutral-text));
|
||||
color: rgb(var(--theme-style-text));
|
||||
}
|
||||
|
||||
.clock-minutes,
|
||||
.clock-seconds,
|
||||
.clock-meridiem {
|
||||
color: rgb(var(--gray-16));
|
||||
color: rgb(var(--theme-gray-16));
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
font-family: var(--font-fjalla);
|
||||
color: rgb(var(--style-neutral-text));
|
||||
color: rgb(var(--theme-style-text));
|
||||
width: 100%;
|
||||
min-height: 2.5em;
|
||||
display: flex;
|
||||
@ -63,11 +63,11 @@
|
||||
}
|
||||
|
||||
.date-day {
|
||||
color: rgb(var(--style-neutral-text));
|
||||
color: rgb(var(--theme-style-text));
|
||||
}
|
||||
|
||||
.date-date,
|
||||
.date-month,
|
||||
.date-year {
|
||||
color: rgb(var(--gray-16));
|
||||
color: rgb(var(--theme-gray-16));
|
||||
}
|
||||
|
||||
@ -7,8 +7,8 @@
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
border-radius: var(--theme-radius);
|
||||
box-shadow: inset 0 0 0 var(--line-width) rgb(var(--theme-accent)), inset 0 0 0 calc(var(--line-width) * 4) rgba(var(--theme-accent), 0.1), inset 0 0 0 calc(var(--line-width) * 8) rgba(var(--theme-accent), 0.1);
|
||||
box-shadow: inset 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), inset 0 0 0 calc(var(--layout-line-width) * 4) rgba(var(--theme-accent), 0.1), inset 0 0 0 calc(var(--layout-line-width) * 8) rgba(var(--theme-accent), 0.1);
|
||||
z-index: var(--z-index-edge);
|
||||
pointer-events: none;
|
||||
transition: opacity var(--animation-speed-fast) ease-in-out;
|
||||
transition: opacity var(--layout-animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
112
src/css/form.css
112
src/css/form.css
@ -5,7 +5,7 @@ input[type="password"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="text"] {
|
||||
background-color: rgb(var(--gray-02));
|
||||
background-color: rgb(var(--theme-gray-02));
|
||||
padding: 0 1em;
|
||||
margin: 0 0 1em 0;
|
||||
color: rgb(var(--form-input-text));
|
||||
@ -19,7 +19,7 @@ input[type="text"] {
|
||||
border-color: transparent;
|
||||
border-radius: var(--theme-radius);
|
||||
cursor: text;
|
||||
transition: background-color var(--animation-speed-fast) ease-in-out, color var(--animation-speed-fast) ease-in-out, border-color var(--animation-speed-fast) ease-in-out, box-shadow var(--animation-speed-fast) ease-in-out;
|
||||
transition: background-color var(--layout-animation-speed-fast) ease-in-out, color var(--layout-animation-speed-fast) ease-in-out, border-color var(--layout-animation-speed-fast) ease-in-out, box-shadow var(--layout-animation-speed-fast) ease-in-out;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
@ -39,10 +39,10 @@ input[type="password"]:hover,
|
||||
input[type="search"]:hover,
|
||||
input[type="tel"]:hover,
|
||||
input[type="text"]:hover {
|
||||
background-color: rgb(var(--gray-03));
|
||||
background-color: rgb(var(--theme-gray-03));
|
||||
color: rgb(var(--form-input-text-hover));
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 var(--line-width) rgb(var(--gray-06));
|
||||
box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06));
|
||||
}
|
||||
|
||||
input[type="email"]:focus,
|
||||
@ -51,11 +51,11 @@ input[type="password"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="text"]:focus {
|
||||
background-color: rgb(var(--gray-01));
|
||||
background-color: rgb(var(--theme-gray-01));
|
||||
color: rgb(var(--form-input-text-focus));
|
||||
outline: none;
|
||||
z-index: 2;
|
||||
box-shadow: 0 0 0 var(--line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--line-width) * 2) rgba(var(--theme-accent), 0.25);
|
||||
box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
|
||||
}
|
||||
|
||||
input[type="email"][disabled],
|
||||
@ -93,7 +93,7 @@ input[type="search"]::placeholder,
|
||||
input[type="tel"]::placeholder,
|
||||
input[type="text"]::placeholder {
|
||||
color: rgb(var(--form-input-placeholder));
|
||||
transition: color var(--animation-speed-fast) ease-in-out;
|
||||
transition: color var(--layout-animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
input[type="email"]:hover::placeholder,
|
||||
@ -168,7 +168,7 @@ 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; */
|
||||
/* transition: all var(--layout-animation-speed-fast) ease-in-out; */
|
||||
}
|
||||
|
||||
input[type="checkbox"]+label,
|
||||
@ -181,7 +181,7 @@ input[type="radio"]+label {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
transition: all var(--layout-animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
input[type="checkbox"]+label:before,
|
||||
@ -201,19 +201,19 @@ input[type="checkbox"]:focus+label,
|
||||
input[type="checkbox"]:hover+label,
|
||||
input[type="radio"]:focus+label,
|
||||
input[type="radio"]:hover+label {
|
||||
color: rgb(var(--style-neutral-text));
|
||||
color: rgb(var(--theme-style-text));
|
||||
}
|
||||
|
||||
input[type="checkbox"]:active+label,
|
||||
input[type="radio"]:active+label {
|
||||
color: rgb(var(--style-neutral-text));
|
||||
color: rgb(var(--theme-style-text));
|
||||
}
|
||||
|
||||
input[type="checkbox"]:focus+label:before,
|
||||
input[type="checkbox"]:hover+label:before,
|
||||
input[type="radio"]:focus+label:before,
|
||||
input[type="radio"]:hover+label:before {
|
||||
color: rgb(var(--style-neutral-text));
|
||||
color: rgb(var(--theme-style-text));
|
||||
}
|
||||
|
||||
input[type="checkbox"]:active+label:before,
|
||||
@ -231,7 +231,7 @@ 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(--style-neutral-text));
|
||||
color: rgb(var(--theme-style-text));
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked+label:before,
|
||||
@ -301,17 +301,17 @@ input[type="color"] {
|
||||
border-radius: var(--theme-radius);
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: border-color var(--animation-speed-fast) ease-in-out, box-shadow var(--animation-speed-fast) ease-in-out;
|
||||
transition: border-color var(--layout-animation-speed-fast) ease-in-out, box-shadow var(--layout-animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
input[type="color"]:hover {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 var(--line-width) rgb(var(--gray-06));
|
||||
box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06));
|
||||
}
|
||||
|
||||
input[type="color"]:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 var(--line-width) rgb(var(--gray-10));
|
||||
box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-10));
|
||||
}
|
||||
|
||||
input[type="color"][disabled] {
|
||||
@ -348,7 +348,7 @@ input[type="range"] {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: rgb(var(--style-neutral-text));
|
||||
color: rgb(var(--theme-style-text));
|
||||
font-size: 1em;
|
||||
font-family: var(--font-regular);
|
||||
height: 2em;
|
||||
@ -366,13 +366,13 @@ input[type="range"]:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
background-color: rgb(var(--gray-08));
|
||||
height: var(--line-width);
|
||||
background-color: rgb(var(--theme-gray-08));
|
||||
height: var(--layout-line-width);
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: var(--theme-radius);
|
||||
transform: translate(0, -50%);
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
transition: all var(--layout-animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
input[type="range"]:focus {
|
||||
@ -380,7 +380,7 @@ input[type="range"]:focus {
|
||||
}
|
||||
|
||||
input[type="range"]:focus:before {
|
||||
background-color: rgb(var(--style-neutral-text));
|
||||
background-color: rgb(var(--theme-style-text));
|
||||
}
|
||||
|
||||
input[type="range"][disabled] {
|
||||
@ -388,7 +388,7 @@ input[type="range"][disabled] {
|
||||
}
|
||||
|
||||
input[type="range"][disabled]:before {
|
||||
background-color: rgb(var(--gray-04));
|
||||
background-color: rgb(var(--theme-gray-04));
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@ -401,11 +401,11 @@ input[type="range"]::-webkit-slider-runnable-track {
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
background-color: rgb(var(--gray-01));
|
||||
background-color: rgb(var(--theme-gray-01));
|
||||
color: rgb(var(--form-range-thumb));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-width: var(--line-width);
|
||||
border-width: var(--layout-line-width);
|
||||
border-style: solid;
|
||||
border-color: rgb(var(--theme-accent));
|
||||
border-radius: 100%;
|
||||
@ -416,7 +416,7 @@ input[type="range"]::-webkit-slider-thumb {
|
||||
box-sizing: border-box;
|
||||
/* z-index: 2; */
|
||||
transform: scale(1);
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
transition: all var(--layout-animation-speed-fast) ease-in-out;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
@ -441,7 +441,7 @@ input[type="range"]::-webkit-slider-thumb:active {
|
||||
}
|
||||
|
||||
input[type="range"][disabled]::-webkit-slider-thumb {
|
||||
border-color: rgb(var(--gray-04));
|
||||
border-color: rgb(var(--theme-gray-04));
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@ -452,24 +452,24 @@ input[type="range"][disabled]:focus::-webkit-slider-thumb {
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-track {
|
||||
background-color: rgb(var(--gray-08));
|
||||
background-color: rgb(var(--theme-gray-08));
|
||||
margin: 0 -0.5em;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
height: var(--line-width);
|
||||
height: var(--layout-line-width);
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: var(--theme-radius);
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
transition: all var(--layout-animation-speed-fast) ease-in-out;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-thumb {
|
||||
background-color: rgb(var(--gray-01));
|
||||
background-color: rgb(var(--theme-gray-01));
|
||||
color: rgb(var(--form-range-thumb));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-width: var(--line-width);
|
||||
border-width: var(--layout-line-width);
|
||||
border-style: solid;
|
||||
border-color: rgb(var(--theme-accent));
|
||||
border-radius: 100%;
|
||||
@ -480,7 +480,7 @@ input[type="range"]::-moz-range-thumb {
|
||||
box-sizing: border-box;
|
||||
/* z-index: 2; */
|
||||
transform: scale(1);
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
transition: all var(--layout-animation-speed-fast) ease-in-out;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
@ -506,16 +506,16 @@ input[type="range"]::-moz-range-thumb:active {
|
||||
|
||||
input[type="range"]::-moz-range-progress {
|
||||
background-color: rgb(var(--theme-accent));
|
||||
height: calc(var(--line-width) * 1.5);
|
||||
height: calc(var(--layout-line-width) * 1.5);
|
||||
border-radius: var(--theme-radius);
|
||||
}
|
||||
|
||||
input[type="range"][disabled]::-moz-range-track {
|
||||
background-color: rgb(var(--gray-04));
|
||||
background-color: rgb(var(--theme-gray-04));
|
||||
}
|
||||
|
||||
input[type="range"][disabled]::-moz-range-thumb {
|
||||
border-color: rgb(var(--gray-04));
|
||||
border-color: rgb(var(--theme-gray-04));
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@ -526,7 +526,7 @@ input[type="range"][disabled]:focus::-moz-range-thumb {
|
||||
}
|
||||
|
||||
input[type="range"][disabled]::-moz-range-progress {
|
||||
background-color: rgb(var(--gray-04));
|
||||
background-color: rgb(var(--theme-gray-04));
|
||||
}
|
||||
|
||||
/* input helper */
|
||||
@ -567,7 +567,7 @@ input[type="range"][disabled]~.input-helper {
|
||||
.input-button input[type="radio"]+label,
|
||||
.input-button input[type="color"]+label,
|
||||
.input-button input[type="file"]+label {
|
||||
background-color: rgb(var(--gray-02));
|
||||
background-color: rgb(var(--theme-gray-02));
|
||||
padding: 0.125em 1em;
|
||||
margin: 0;
|
||||
color: rgb(var(--button-text));
|
||||
@ -576,8 +576,8 @@ input[type="range"][disabled]~.input-helper {
|
||||
min-height: 2.5em;
|
||||
line-height: 1;
|
||||
border: 0;
|
||||
border-top-width: var(--line-width);
|
||||
border-bottom-width: var(--line-width);
|
||||
border-top-width: var(--layout-line-width);
|
||||
border-bottom-width: var(--layout-line-width);
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
border-radius: var(--theme-radius);
|
||||
@ -586,7 +586,7 @@ input[type="range"][disabled]~.input-helper {
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
box-shadow: none;
|
||||
transition: background-color var(--animation-speed-fast) ease-in-out, color var(--animation-speed-fast) ease-in-out, border var(--animation-speed-fast) ease-in-out;
|
||||
transition: background-color var(--layout-animation-speed-fast) ease-in-out, color var(--layout-animation-speed-fast) ease-in-out, border var(--layout-animation-speed-fast) ease-in-out;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
@ -601,8 +601,8 @@ input[type="range"][disabled]~.input-helper {
|
||||
.input-button input[type="color"]:focus+label,
|
||||
.input-button input[type="file"]:hover+label,
|
||||
.input-button input[type="file"]:focus+label {
|
||||
background-color: rgb(var(--gray-03));
|
||||
border-bottom-color: rgb(var(--gray-08));
|
||||
background-color: rgb(var(--theme-gray-03));
|
||||
border-bottom-color: rgb(var(--theme-gray-08));
|
||||
color: rgb(var(--button-text-hover-focus));
|
||||
outline: none;
|
||||
}
|
||||
@ -611,7 +611,7 @@ input[type="range"][disabled]~.input-helper {
|
||||
.input-button input[type="radio"]:active+label,
|
||||
.input-button input[type="color"]:active+label,
|
||||
.input-button input[type="file"]:active+label {
|
||||
background-color: rgb(var(--gray-04));
|
||||
background-color: rgb(var(--theme-gray-04));
|
||||
border-bottom-color: rgb(var(--theme-accent));
|
||||
color: rgb(var(--button-text-active));
|
||||
transition: none;
|
||||
@ -621,7 +621,7 @@ input[type="range"][disabled]~.input-helper {
|
||||
.input-button input[type="radio"]:checked+label,
|
||||
.input-button input[type="color"]:checked+label,
|
||||
.input-button input[type="file"]:checked+label {
|
||||
background-color: rgb(var(--gray-04));
|
||||
background-color: rgb(var(--theme-gray-04));
|
||||
border-bottom-color: rgb(var(--theme-accent));
|
||||
color: rgb(var(--button-text-active));
|
||||
transition: none;
|
||||
@ -643,7 +643,7 @@ input[type="range"][disabled]~.input-helper {
|
||||
.input-button input[type="file"][disabled]:hover+label,
|
||||
.input-button input[type="file"][disabled]:focus+label,
|
||||
.input-button input[type="file"][disabled]:active+label {
|
||||
background-color: rgb(var(--gray-02));
|
||||
background-color: rgb(var(--theme-gray-02));
|
||||
border-color: transparent;
|
||||
color: rgb(var(--button-text-disabled));
|
||||
cursor: default;
|
||||
@ -769,10 +769,10 @@ input[type="range"][disabled]~.input-helper {
|
||||
}
|
||||
|
||||
.form-group-text {
|
||||
background-color: rgb(var(--gray-02));
|
||||
background-color: rgb(var(--theme-gray-02));
|
||||
padding: 0 1em;
|
||||
margin: 0;
|
||||
color: rgb(var(--style-neutral-text));
|
||||
color: rgb(var(--theme-style-text));
|
||||
min-width: 4em;
|
||||
font-size: 1em;
|
||||
font-family: var(--font-regular);
|
||||
@ -780,23 +780,23 @@ input[type="range"][disabled]~.input-helper {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
border-top-width: var(--line-width);
|
||||
border-bottom-width: var(--line-width);
|
||||
border-top-width: var(--layout-line-width);
|
||||
border-bottom-width: var(--layout-line-width);
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
border-radius: var(--theme-radius);
|
||||
transition: background-color var(--animation-speed-fast) ease-in-out, border-color var(--animation-speed-fast) ease-in-out;
|
||||
transition: background-color var(--layout-animation-speed-fast) ease-in-out, border-color var(--layout-animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.form-group-text:hover,
|
||||
.form-group-text:focus {
|
||||
background-color: rgb(var(--gray-03));
|
||||
border-bottom-color: rgb(var(--gray-08));
|
||||
background-color: rgb(var(--theme-gray-03));
|
||||
border-bottom-color: rgb(var(--theme-gray-08));
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-group-text[disabled] {
|
||||
background-color: rgb(var(--gray-02));
|
||||
background-color: rgb(var(--theme-gray-02));
|
||||
color: rgb(var(--form-input-placeholder-disabled));
|
||||
box-shadow: none;
|
||||
cursor: default;
|
||||
@ -804,7 +804,7 @@ input[type="range"][disabled]~.input-helper {
|
||||
|
||||
.form-group-text[disabled]:hover,
|
||||
.form-group-text[disabled]:focus {
|
||||
background-color: rgb(var(--gray-02));
|
||||
background-color: rgb(var(--theme-gray-02));
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@ -926,8 +926,8 @@ input[type="range"][disabled]~.input-helper {
|
||||
|
||||
.form-feedback {
|
||||
padding: 1em 1.5em;
|
||||
background-color: rgb(var(--gray-02));
|
||||
/* border-bottom: var(--line-width) solid rgb(var(--gray-04)); */
|
||||
background-color: rgb(var(--theme-gray-02));
|
||||
/* border-bottom: var(--layout-line-width) solid rgb(var(--theme-gray-04)); */
|
||||
border-radius: var(--theme-radius);
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
font-family: var(--font-fjalla);
|
||||
color: rgb(var(--style-neutral-text));
|
||||
color: rgb(var(--theme-style-text));
|
||||
width: 100%;
|
||||
min-height: 2.5em;
|
||||
display: flex;
|
||||
|
||||
@ -44,30 +44,30 @@
|
||||
}
|
||||
|
||||
.is-header-shade-style-scroll .header-shade {
|
||||
transition: background-color var(--animation-speed-slow) ease-in-out;
|
||||
transition: background-color var(--layout-animation-speed-slow) ease-in-out;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.is-header-border-top .header-shade {
|
||||
border-top: calc(var(--line-width) * var(--header-border-top)) solid rgb(var(--theme-accent));
|
||||
border-top: calc(var(--layout-line-width) * var(--header-border-top)) solid rgb(var(--theme-accent));
|
||||
}
|
||||
|
||||
.is-header-border-bottom .header-shade {
|
||||
border-bottom: calc(var(--line-width) * var(--header-border-bottom)) solid rgb(var(--theme-accent));
|
||||
border-bottom: calc(var(--layout-line-width) * var(--header-border-bottom)) solid rgb(var(--theme-accent));
|
||||
}
|
||||
|
||||
.header-area {
|
||||
padding: calc(var(--gutter) * var(--layout-padding-multiplier));
|
||||
padding: calc(var(--layout-gutter) * var(--layout-padding-multiplier));
|
||||
position: relative;
|
||||
width: var(--header-area-width);
|
||||
}
|
||||
|
||||
.is-header-border-top .header-area {
|
||||
border-top: calc(var(--line-width) * var(--header-border-top)) solid transparent;
|
||||
border-top: calc(var(--layout-line-width) * var(--header-border-top)) solid transparent;
|
||||
}
|
||||
|
||||
.is-header-border-bottom .header-area {
|
||||
border-bottom: calc(var(--line-width) * var(--header-border-bottom)) solid transparent;
|
||||
border-bottom: calc(var(--layout-line-width) * var(--header-border-bottom)) solid transparent;
|
||||
}
|
||||
|
||||
.is-header-radius .header-shade {
|
||||
@ -97,7 +97,7 @@
|
||||
}
|
||||
|
||||
.header-item-grid {
|
||||
margin: calc(-1 * calc(var(--gutter) * calc(var(--layout-gutter-multiplier) / 2)));
|
||||
margin: calc(-1 * calc(var(--layout-gutter) * calc(var(--layout-gutter-multiplier) / 2)));
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
@ -118,7 +118,7 @@
|
||||
}
|
||||
|
||||
.header-item {
|
||||
margin: calc(var(--gutter) * calc(var(--layout-gutter-multiplier) / 2));
|
||||
margin: calc(var(--layout-gutter) * calc(var(--layout-gutter-multiplier) / 2));
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
@ -22,21 +22,21 @@
|
||||
}
|
||||
|
||||
.link-area {
|
||||
padding-bottom: calc(var(--gutter) * var(--layout-padding-multiplier));
|
||||
padding-left: calc(var(--gutter) * var(--layout-padding-multiplier));
|
||||
padding-right: calc(var(--gutter) * var(--layout-padding-multiplier));
|
||||
padding-bottom: calc(var(--layout-gutter) * var(--layout-padding-multiplier));
|
||||
padding-left: calc(var(--layout-gutter) * var(--layout-padding-multiplier));
|
||||
padding-right: calc(var(--layout-gutter) * var(--layout-padding-multiplier));
|
||||
font-size: calc(var(--link-item-size) * 1);
|
||||
position: relative;
|
||||
width: var(--link-area-width);
|
||||
display: grid;
|
||||
grid-auto-rows: 1fr;
|
||||
grid-gap: calc(var(--gutter) * var(--layout-gutter-multiplier));
|
||||
grid-gap: calc(var(--layout-gutter) * var(--layout-gutter-multiplier));
|
||||
grid-template-columns: repeat(auto-fill, minmax(var(--link-item-width), 1fr));
|
||||
}
|
||||
|
||||
.is-header-border-bottom .link-area,
|
||||
.is-header-shade-style-always .link-area {
|
||||
padding-top: calc(var(--gutter) * var(--layout-padding-multiplier));
|
||||
padding-top: calc(var(--layout-gutter) * var(--layout-padding-multiplier));
|
||||
}
|
||||
|
||||
.link-item {
|
||||
@ -45,7 +45,7 @@
|
||||
height: var(--link-item-height);
|
||||
display: block;
|
||||
transform: scale(1);
|
||||
transition: transform var(--animation-speed-fast) ease-in-out;
|
||||
transition: transform var(--layout-animation-speed-fast) ease-in-out;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@ -76,12 +76,12 @@
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: inset 0 0 0 var(--line-width) rgb(var(--theme-accent)), inset 0 0 0 calc(var(--line-width) * 4) rgba(var(--theme-accent), 0.1), inset 0 0 0 calc(var(--line-width) * 8) rgba(var(--theme-accent), 0.1);
|
||||
box-shadow: inset 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), inset 0 0 0 calc(var(--layout-line-width) * 4) rgba(var(--theme-accent), 0.1), inset 0 0 0 calc(var(--layout-line-width) * 8) rgba(var(--theme-accent), 0.1);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.link-panel-front {
|
||||
background-color: rgb(var(--gray-02));
|
||||
background-color: rgb(var(--theme-gray-02));
|
||||
border-radius: var(--theme-radius);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -90,16 +90,16 @@
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
transition: background-color var(--animation-speed-fast) ease-in-out, height var(--animation-speed-fast) ease-in-out, box-shadow var(--animation-speed-fast) ease-in-out;
|
||||
transition: background-color var(--layout-animation-speed-fast) ease-in-out, height var(--layout-animation-speed-fast) ease-in-out, box-shadow var(--layout-animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.is-link-item-line .link-panel-front {
|
||||
height: calc(100% - var(--line-width));
|
||||
height: calc(100% - var(--layout-line-width));
|
||||
}
|
||||
|
||||
.link-panel-front:hover,
|
||||
.link-panel-front:focus {
|
||||
background-color: rgb(var(--gray-03));
|
||||
background-color: rgb(var(--theme-gray-03));
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -109,8 +109,8 @@
|
||||
.link-item:hover .link-panel-front {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
background-color: rgb(var(--gray-03));
|
||||
box-shadow: var(--shadow-large);
|
||||
background-color: rgb(var(--theme-gray-03));
|
||||
box-shadow: var(--layout-shadow-large);
|
||||
}
|
||||
|
||||
.is-link-style-block .link-panel-front {
|
||||
@ -180,21 +180,21 @@
|
||||
.link-panel-back {
|
||||
background-color: rgb(var(--theme-accent));
|
||||
border-radius: var(--theme-radius);
|
||||
width: calc(100% - calc(var(--line-width) * 2));
|
||||
height: calc(100% - calc(var(--line-width) * 2));
|
||||
width: calc(100% - calc(var(--layout-line-width) * 2));
|
||||
height: calc(100% - calc(var(--layout-line-width) * 2));
|
||||
position: absolute;
|
||||
top: var(--line-width);
|
||||
left: var(--line-width);
|
||||
top: var(--layout-line-width);
|
||||
left: var(--layout-line-width);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: stretch;
|
||||
z-index: 2;
|
||||
transition: height var(--animation-speed-fast) ease-in-out, top var(--animation-speed-fast) ease-in-out;
|
||||
transition: height var(--layout-animation-speed-fast) ease-in-out, top var(--layout-animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.is-link-item-line .link-panel-back {
|
||||
height: calc(100% - var(--line-width));
|
||||
height: calc(100% - var(--layout-line-width));
|
||||
}
|
||||
|
||||
.is-link-edit .link-panel-back,
|
||||
@ -214,7 +214,7 @@
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
transition: all var(--layout-animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.link-control-item {
|
||||
@ -223,7 +223,7 @@
|
||||
margin-bottom: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
color: rgb(var(--gray-02));
|
||||
color: rgb(var(--theme-gray-02));
|
||||
flex-grow: 1;
|
||||
flex-basis: 50%;
|
||||
}
|
||||
@ -238,12 +238,12 @@
|
||||
|
||||
.link-control-item:focus,
|
||||
.link-control-item:hover {
|
||||
color: rgb(var(--style-neutral-text));
|
||||
color: rgb(var(--theme-style-text));
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.link-control-item:active {
|
||||
color: rgb(var(--style-neutral-text));
|
||||
color: rgb(var(--theme-style-text));
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
transition: none;
|
||||
}
|
||||
@ -255,7 +255,7 @@
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
align-items: center;
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
transition: all var(--layout-animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.is-link-url-show .link-url {
|
||||
@ -290,11 +290,11 @@
|
||||
}
|
||||
|
||||
.is-link-url-style-dark .link-url-text {
|
||||
color: rgb(var(--black));
|
||||
color: rgb(var(--theme-black));
|
||||
}
|
||||
|
||||
.is-link-url-style-light .link-url-text {
|
||||
color: rgb(var(--white));
|
||||
color: rgb(var(--theme-white));
|
||||
}
|
||||
|
||||
.link-display {
|
||||
@ -317,12 +317,12 @@
|
||||
color: rgb(var(--theme-accent));
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
transition: color var(--animation-speed-fast) ease-in-out;
|
||||
transition: color var(--layout-animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.link-display-icon {
|
||||
color: rgb(var(--theme-accent));
|
||||
transition: color var(--animation-speed-fast) ease-in-out;
|
||||
transition: color var(--layout-animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.is-link-style-block .link-display-letter,
|
||||
@ -347,22 +347,22 @@
|
||||
.link-item:focus .link-display-letter,
|
||||
.link-item:hover .link-display-icon,
|
||||
.link-item:focus .link-display-icon {
|
||||
color: rgb(var(--style-neutral-text));
|
||||
color: rgb(var(--theme-style-text));
|
||||
}
|
||||
|
||||
.link-panel-front:focus .link-display-letter,
|
||||
.link-panel-front:focus .link-display-icon {
|
||||
color: rgb(var(--style-neutral-text));
|
||||
color: rgb(var(--theme-style-text));
|
||||
}
|
||||
|
||||
.link-name {
|
||||
margin: 0;
|
||||
font-size: var(--link-item-name-size);
|
||||
font-family: var(--font-regular);
|
||||
color: rgb(var(--gray-12));
|
||||
color: rgb(var(--theme-gray-12));
|
||||
display: none;
|
||||
text-align: center;
|
||||
transition: color var(--animation-speed-fast) ease-in-out;
|
||||
transition: color var(--layout-animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.is-link-display-alignment-horizontal-left .link-name {
|
||||
@ -383,11 +383,11 @@
|
||||
|
||||
.link-item:hover .link-name,
|
||||
.link-item:focus .link-name {
|
||||
color: rgb(var(--style-neutral-text));
|
||||
color: rgb(var(--theme-style-text));
|
||||
}
|
||||
|
||||
.link-panel-front:focus .link-name {
|
||||
color: rgb(var(--style-neutral-text));
|
||||
color: rgb(var(--theme-style-text));
|
||||
}
|
||||
|
||||
.link-empty {
|
||||
@ -397,7 +397,7 @@
|
||||
}
|
||||
|
||||
.link-empty-heading {
|
||||
color: rgb(var(--gray-16));
|
||||
color: rgb(var(--theme-gray-16));
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
@ -409,7 +409,7 @@
|
||||
.is-link-edit .link-item:hover .link-panel-front,
|
||||
.is-link-edit .link-item:focus .link-panel-front {
|
||||
height: calc(100% - var(--link-item-edit-height));
|
||||
box-shadow: var(--shadow-medium);
|
||||
box-shadow: var(--layout-shadow-medium);
|
||||
}
|
||||
|
||||
.is-link-edit.is-link-url-show .link-item:focus .link-panel-front,
|
||||
@ -437,7 +437,7 @@
|
||||
|
||||
.link-form-text-icon:empty:before {
|
||||
content: "";
|
||||
background-color: rgb(var(--gray-04));
|
||||
background-color: rgb(var(--theme-gray-04));
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
@ -450,7 +450,7 @@
|
||||
|
||||
.link-form-text-icon .link-form-icon {
|
||||
transform: scale(1) rotate(0deg);
|
||||
transition: transform var(--animation-speed-fast) ease-in-out;
|
||||
transition: transform var(--layout-animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.link-form-text-icon:not([disabled]):hover .link-form-icon {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
transform: translateY(calc(-100% - 2em));
|
||||
transition: transform var(--animation-speed-fast) ease-in-out;
|
||||
transition: transform var(--layout-animation-speed-fast) ease-in-out;
|
||||
z-index: var(--z-index-menu);
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -20,15 +20,15 @@
|
||||
}
|
||||
|
||||
.menu-area {
|
||||
background-color: rgba(var(--gray-01), 0.95);
|
||||
background-color: rgba(var(--theme-gray-01), 0.95);
|
||||
border-radius: var(--theme-radius);
|
||||
box-shadow: var(--shadow-large);
|
||||
box-shadow: var(--layout-shadow-large);
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
pointer-events: all;
|
||||
opacity: 1;
|
||||
transition: background-color var(--animation-speed-fast) ease-in-out, opacity var(--animation-speed-fast) ease-in-out;
|
||||
transition: background-color var(--layout-animation-speed-fast) ease-in-out, opacity var(--layout-animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.is-edge .menu-area {
|
||||
@ -70,7 +70,7 @@
|
||||
}
|
||||
|
||||
.menu-item:not(:last-child) {
|
||||
border-bottom: 2px solid rgb(var(--gray-03));
|
||||
border-bottom: 2px solid rgb(var(--theme-gray-03));
|
||||
}
|
||||
|
||||
.menu-item-header {
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
perspective: 1000px;
|
||||
transition: opacity var(--animation-speed-fast) ease-in-out;
|
||||
transition: opacity var(--layout-animation-speed-fast) ease-in-out;
|
||||
z-index: var(--z-index-modal);
|
||||
}
|
||||
|
||||
@ -23,9 +23,9 @@
|
||||
}
|
||||
|
||||
.modal-wrapper {
|
||||
background-color: rgb(var(--gray-01));
|
||||
background-color: rgb(var(--theme-gray-01));
|
||||
border-radius: var(--theme-radius);
|
||||
box-shadow: var(--shadow-large);
|
||||
box-shadow: var(--layout-shadow-large);
|
||||
position: relative;
|
||||
max-height: calc(100vh - 2em);
|
||||
overflow-y: auto;
|
||||
@ -34,7 +34,7 @@
|
||||
grid-template-rows: 1fr auto;
|
||||
justify-items: stretch;
|
||||
align-items: stretch;
|
||||
transition: opacity var(--animation-speed-fast);
|
||||
transition: opacity var(--layout-animation-speed-fast);
|
||||
}
|
||||
|
||||
.modal-wrapper .container {
|
||||
@ -42,7 +42,7 @@
|
||||
}
|
||||
|
||||
.is-transition-end .modal-wrapper {
|
||||
transition: opacity var(--animation-speed-fast) ease-in-out;
|
||||
transition: opacity var(--layout-animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
@ -63,7 +63,7 @@
|
||||
}
|
||||
|
||||
.modal-controls {
|
||||
background-color: rgb(var(--gray-01));
|
||||
background-color: rgb(var(--theme-gray-01));
|
||||
border-radius: 0 0 var(--theme-radius) var(--theme-radius);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
@ -5,12 +5,12 @@
|
||||
left: -1em;
|
||||
width: calc(100% + 2em);
|
||||
height: calc(100% + 2em);
|
||||
transition: opacity var(--animation-speed-fast) ease-in-out, background-color var(--animation-speed-fast) ease-in-out;
|
||||
transition: opacity var(--layout-animation-speed-fast) ease-in-out, background-color var(--layout-animation-speed-fast) ease-in-out;
|
||||
z-index: var(--z-index-shade);
|
||||
}
|
||||
|
||||
.is-background-image-show .shade {
|
||||
background-color: rgba(var(--black), 0.5);
|
||||
background-color: rgba(var(--theme-black), 0.5);
|
||||
}
|
||||
|
||||
.is-edge:not(.is-background-image-show) .shade {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
z-index: var(--z-index-tip);
|
||||
transition: opacity var(--animation-speed-fast) ease-in-out;
|
||||
transition: opacity var(--layout-animation-speed-fast) ease-in-out;
|
||||
transform-origin: bottom center;
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -36,19 +36,19 @@
|
||||
}
|
||||
|
||||
.tip-intro {
|
||||
animation: grow var(--animation-speed-slow) 1;
|
||||
animation: grow var(--layout-animation-speed-slow) 1;
|
||||
}
|
||||
|
||||
.tip-outro {
|
||||
animation: shirnk var(--animation-speed-slow) 1;
|
||||
animation: shirnk var(--layout-animation-speed-slow) 1;
|
||||
}
|
||||
|
||||
.tip-message {
|
||||
padding: 0.5em 1em;
|
||||
background-color: rgb(var(--gray-04));
|
||||
background-color: rgb(var(--theme-gray-04));
|
||||
border: 0;
|
||||
border-radius: calc(var(--theme-radius) * 2);
|
||||
color: rgb(var(--gray-18));
|
||||
color: rgb(var(--theme-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: rgb(var(--gray-04));
|
||||
border-top-color: rgb(var(--theme-gray-04));
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
font-family: var(--font-fjalla);
|
||||
color: rgb(var(--gray-14));
|
||||
color: rgb(var(--theme-gray-14));
|
||||
width: 100%;
|
||||
min-height: 2.5em;
|
||||
display: flex;
|
||||
|
||||
@ -17,35 +17,35 @@ h1 {
|
||||
h2 {
|
||||
font-size: 1.2em;
|
||||
font-family: var(--font-regular);
|
||||
color: rgb(var(--gray-18));
|
||||
color: rgb(var(--theme-gray-18));
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.1em;
|
||||
font-family: var(--font-regular);
|
||||
color: rgb(var(--gray-18));
|
||||
color: rgb(var(--theme-gray-18));
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1em;
|
||||
font-family: var(--font-regular);
|
||||
color: rgb(var(--gray-18));
|
||||
color: rgb(var(--theme-gray-18));
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1em;
|
||||
font-family: var(--font-bold);
|
||||
color: rgb(var(--gray-18));
|
||||
color: rgb(var(--theme-gray-18));
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.75em;
|
||||
font-family: var(--font-bold);
|
||||
color: rgb(var(--gray-18));
|
||||
color: rgb(var(--theme-gray-18));
|
||||
}
|
||||
|
||||
p {
|
||||
color: rgb(var(--style-neutral-text));
|
||||
color: rgb(var(--theme-style-text));
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@ -56,7 +56,7 @@ p:not(:last-child) {
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: 1px solid rgb(var(--gray-02));
|
||||
border-top: 1px solid rgb(var(--theme-gray-02));
|
||||
border-radius: var(--theme-radius);
|
||||
margin: 1em 0;
|
||||
clear: both;
|
||||
@ -69,13 +69,13 @@ strong {
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgb(var(--gray-16));
|
||||
color: rgb(var(--theme-gray-16));
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
color: rgb(var(--gray-16));
|
||||
color: rgb(var(--theme-gray-16));
|
||||
}
|
||||
|
||||
a:focus {
|
||||
@ -84,12 +84,12 @@ a:focus {
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: rgb(var(--style-neutral-text));
|
||||
color: rgb(var(--theme-style-text));
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: rgb(var(--style-neutral-text));
|
||||
color: rgb(var(--theme-style-text));
|
||||
}
|
||||
|
||||
ol,
|
||||
@ -131,9 +131,9 @@ table {
|
||||
|
||||
table thead tr td,
|
||||
table thead tr th {
|
||||
background-color: rgb(var(--gray-03));
|
||||
background-color: rgb(var(--theme-gray-03));
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgb(var(--gray-04));
|
||||
border-bottom: 1px solid rgb(var(--theme-gray-04));
|
||||
padding: 0.5em;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
@ -142,7 +142,7 @@ table thead tr th {
|
||||
}
|
||||
|
||||
table tr:nth-child(odd) {
|
||||
background-color: rgb(var(--gray-02));
|
||||
background-color: rgb(var(--theme-gray-02));
|
||||
}
|
||||
|
||||
table tbody tr td,
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: rgb(var(--gray-12));
|
||||
color: rgb(var(--theme-gray-12));
|
||||
}
|
||||
|
||||
.scroll-disabled {
|
||||
@ -32,9 +32,9 @@
|
||||
}
|
||||
|
||||
.is-shake {
|
||||
animation: shake var(--animation-speed-slow) 1;
|
||||
animation: shake var(--layout-animation-speed-slow) 1;
|
||||
}
|
||||
|
||||
.is-pop {
|
||||
animation: pop var(--animation-speed-fast) 1;
|
||||
animation: pop var(--layout-animation-speed-fast) 1;
|
||||
}
|
||||
|
||||
@ -1,59 +1,31 @@
|
||||
:root {
|
||||
--root-font-size: 14px;
|
||||
--black: 0, 0, 0;
|
||||
--white: 255, 255, 255;
|
||||
--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-12);
|
||||
--button-link-text-hover-focus: var(--style-neutral-text);
|
||||
--button-link-text-active: var(--style-neutral-text);
|
||||
--button-link-text-disabled: var(--gray-04);
|
||||
--form-input-text: var(--gray-16);
|
||||
--form-input-border: 2;
|
||||
--form-input-text-hover: var(--style-neutral-text);
|
||||
--form-input-text-focus: var(--style-neutral-text);
|
||||
--form-input-text-disabled: var(--gray-02);
|
||||
--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-12);
|
||||
--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);
|
||||
/* theme */
|
||||
--theme-root-font-size: 14px;
|
||||
--theme-accent: 250, 130, 0;
|
||||
--theme-radius: 0.2rem;
|
||||
--line-width: 0.2em;
|
||||
--background: rgb(var(--gray-01));
|
||||
--gutter: 0.5rem;
|
||||
--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;
|
||||
--theme-black: 0, 0, 0;
|
||||
--theme-white: 255, 255, 255;
|
||||
--theme-shade-01: 38, 40, 49;
|
||||
--theme-shade-02: 47, 51, 62;
|
||||
--theme-shade-03: 57, 62, 75;
|
||||
--theme-shade-04: 67, 73, 88;
|
||||
--theme-shade-05: 77, 84, 101;
|
||||
--theme-shade-06: 87, 95, 114;
|
||||
--theme-shade-07: 97, 106, 127;
|
||||
--theme-shade-08: 107, 117, 140;
|
||||
--theme-shade-09: 117, 128, 153;
|
||||
--theme-shade-10: 127, 139, 166;
|
||||
--theme-shade-11: 137, 151, 180;
|
||||
--theme-shade-12: 149, 162, 187;
|
||||
--theme-shade-13: 162, 173, 195;
|
||||
--theme-shade-14: 174, 184, 203;
|
||||
--theme-shade-15: 187, 195, 211;
|
||||
--theme-shade-16: 199, 206, 218;
|
||||
--theme-shade-17: 212, 217, 226;
|
||||
--theme-shade-18: 224, 228, 234;
|
||||
--theme-shade-19: 237, 239, 242;
|
||||
--theme-shade-20: 250, 250, 250;
|
||||
/* header */
|
||||
--header-area-width: 100%;
|
||||
--header-shade-color: transparent;
|
||||
--header-shade-opacity: 0.95;
|
||||
@ -66,26 +38,63 @@
|
||||
--header-button-size: 1em;
|
||||
--header-greeting-size: 1em;
|
||||
--header-transitional-size: 1em;
|
||||
/* link */
|
||||
--link-area-width: 100%;
|
||||
--link-area-gutter-multiplier: 2;
|
||||
--link-item-size: 1em;
|
||||
--link-item-display-letter-size: 2em;
|
||||
--link-item-display-icon-size: 2.5em;
|
||||
--link-item-name-size: 0.9em;
|
||||
/* layout */
|
||||
--layout-line-width: 0.2em;
|
||||
--layout-gutter: 0.5rem;
|
||||
--layout-width: 80%;
|
||||
--layout-padding-multiplier: 4;
|
||||
--layout-gutter-multiplier: 4;
|
||||
--layout-animation-speed-fast: 0.2s;
|
||||
--layout-animation-speed-medium: 0.4s;
|
||||
--layout-animation-speed-slow: 0.6s;
|
||||
--layout-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
--layout-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
--layout-shadow-large: 0 3px 6px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.2);
|
||||
/* background */
|
||||
--background: rgb(var(--theme-gray-01));
|
||||
--background-image: none;
|
||||
--background-opacity: 1;
|
||||
--background-scale: 1;
|
||||
--background-accent-opacity: 0;
|
||||
--background-blur: 0;
|
||||
--layout-width: 80%;
|
||||
--layout-padding-multiplier: 4;
|
||||
--layout-gutter-multiplier: 4;
|
||||
--animation-speed-fast: 0.2s;
|
||||
--animation-speed-medium: 0.4s;
|
||||
--animation-speed-slow: 0.6s;
|
||||
--shadow-small: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
--shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
--shadow-large: 0 3px 6px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.2);
|
||||
/* form */
|
||||
--form-input-text: var(--theme-gray-16);
|
||||
--form-input-border: 2;
|
||||
--form-input-text-hover: var(--theme-style-text);
|
||||
--form-input-text-focus: var(--theme-style-text);
|
||||
--form-input-text-disabled: var(--theme-gray-02);
|
||||
--form-input-text-disabled-helper-text: var(--theme-gray-04);
|
||||
--form-input-placeholder: var(--theme-gray-06);
|
||||
--form-input-placeholder-hover-focus: var(--theme-gray-10);
|
||||
--form-input-placeholder-disabled: var(--theme-gray-04);
|
||||
--form-label: var(--theme-gray-12);
|
||||
--form-label-disabled: var(--theme-gray-04);
|
||||
--form-checkbox-radio-label: var(--theme-gray-12);
|
||||
--form-checkbox-radio-chcked-label: var(--theme-gray-16);
|
||||
--form-checkbox-radio-disabled-label: var(--theme-gray-04);
|
||||
--form-range-thumb: var(--theme-gray-12);
|
||||
/* button */
|
||||
--button-text: var(--theme-gray-12);
|
||||
--button-text-hover-focus: var(--theme-style-text);
|
||||
--button-text-active: var(--theme-style-text);
|
||||
--button-text-disabled: var(--theme-gray-04);
|
||||
--button-link-text: var(--theme-gray-12);
|
||||
--button-link-text-hover-focus: var(--theme-style-text);
|
||||
--button-link-text-active: var(--theme-style-text);
|
||||
--button-link-text-disabled: var(--theme-gray-04);
|
||||
/* font */
|
||||
--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 */
|
||||
--z-index-background: 1000;
|
||||
--z-index-link: 2000;
|
||||
--z-index-header: 3000;
|
||||
@ -95,7 +104,7 @@
|
||||
--z-index-menu: 7000;
|
||||
--z-index-auto-suggest-list: 8000;
|
||||
--z-index-edge: 9000;
|
||||
/* breakpoint reference */
|
||||
/* breakpoint */
|
||||
/* can not be used in @media as of yet */
|
||||
--breakpoint-sm: 550px;
|
||||
--breakpoint-md: 700px;
|
||||
@ -105,54 +114,57 @@
|
||||
}
|
||||
|
||||
.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);
|
||||
/* theme */
|
||||
--theme-gray-01: var(--theme-shade-01);
|
||||
--theme-gray-02: var(--theme-shade-02);
|
||||
--theme-gray-03: var(--theme-shade-03);
|
||||
--theme-gray-04: var(--theme-shade-04);
|
||||
--theme-gray-05: var(--theme-shade-05);
|
||||
--theme-gray-06: var(--theme-shade-06);
|
||||
--theme-gray-07: var(--theme-shade-07);
|
||||
--theme-gray-08: var(--theme-shade-08);
|
||||
--theme-gray-09: var(--theme-shade-09);
|
||||
--theme-gray-10: var(--theme-shade-10);
|
||||
--theme-gray-11: var(--theme-shade-11);
|
||||
--theme-gray-12: var(--theme-shade-12);
|
||||
--theme-gray-13: var(--theme-shade-13);
|
||||
--theme-gray-14: var(--theme-shade-14);
|
||||
--theme-gray-15: var(--theme-shade-15);
|
||||
--theme-gray-16: var(--theme-shade-16);
|
||||
--theme-gray-17: var(--theme-shade-17);
|
||||
--theme-gray-18: var(--theme-shade-18);
|
||||
--theme-gray-19: var(--theme-shade-19);
|
||||
--theme-gray-20: var(--theme-shade-20);
|
||||
--theme-style-text: var(--theme-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);
|
||||
/* theme */
|
||||
--theme-gray-01: var(--theme-shade-20);
|
||||
--theme-gray-02: var(--theme-shade-19);
|
||||
--theme-gray-03: var(--theme-shade-18);
|
||||
--theme-gray-04: var(--theme-shade-17);
|
||||
--theme-gray-05: var(--theme-shade-16);
|
||||
--theme-gray-06: var(--theme-shade-15);
|
||||
--theme-gray-07: var(--theme-shade-14);
|
||||
--theme-gray-08: var(--theme-shade-13);
|
||||
--theme-gray-09: var(--theme-shade-12);
|
||||
--theme-gray-10: var(--theme-shade-11);
|
||||
--theme-gray-11: var(--theme-shade-10);
|
||||
--theme-gray-12: var(--theme-shade-09);
|
||||
--theme-gray-13: var(--theme-shade-08);
|
||||
--theme-gray-14: var(--theme-shade-07);
|
||||
--theme-gray-15: var(--theme-shade-06);
|
||||
--theme-gray-16: var(--theme-shade-05);
|
||||
--theme-gray-17: var(--theme-shade-04);
|
||||
--theme-gray-18: var(--theme-shade-03);
|
||||
--theme-gray-19: var(--theme-shade-02);
|
||||
--theme-gray-20: var(--theme-shade-01);
|
||||
--theme-style-text: var(--theme-black);
|
||||
}
|
||||
|
||||
.is-link-style-block {
|
||||
/* link */
|
||||
--link-item-width: 11em;
|
||||
--link-item-height: 10em;
|
||||
--link-item-url-height: 20%;
|
||||
@ -160,6 +172,7 @@
|
||||
}
|
||||
|
||||
.is-link-style-list {
|
||||
/* link */
|
||||
--link-item-width: 20em;
|
||||
--link-item-height: 4em;
|
||||
--link-item-url-height: 30%;
|
||||
@ -168,6 +181,7 @@
|
||||
|
||||
@media (min-width: 700px) {
|
||||
:root {
|
||||
--root-font-size: 16px;
|
||||
/* theme */
|
||||
--theme-root-font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -81,10 +81,10 @@ var header = (function() {
|
||||
var scrollPosition = document.documentElement.scrollTop;
|
||||
if (state.get().header.shade.show) {
|
||||
if (state.get().header.shade.style == "always") {
|
||||
html.style.setProperty("--header-shade-color", "var(--gray-01)");
|
||||
html.style.setProperty("--header-shade-color", "var(--theme-gray-01)");
|
||||
} else if (state.get().header.shade.style == "scroll") {
|
||||
if (scrollPosition > (fontSize * 2)) {
|
||||
html.style.setProperty("--header-shade-color", "var(--gray-01)");
|
||||
html.style.setProperty("--header-shade-color", "var(--theme-gray-01)");
|
||||
} else {
|
||||
html.style.setProperty("--header-shade-color", "transparent");
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user