glow-filter and -transition for light mode
All checks were successful
/ build (push) Successful in 10s
All checks were successful
/ build (push) Successful in 10s
This commit is contained in:
parent
36128b16d4
commit
a0f7ad1666
SSH key fingerprint:
SHA256:WMHGS60rozMrHkA/VT+Ole85sPCLZ190yemdzY68WJo
6 changed files with 104 additions and 44 deletions
|
|
@ -125,8 +125,8 @@
|
|||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
|
||||
--color-glow-primary: var(--color-white);
|
||||
--color-glow-secondary: var(--color-white);
|
||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms,
|
||||
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
|
||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
|
||||
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
|
||||
}
|
||||
|
||||
.light {
|
||||
|
|
@ -143,6 +143,12 @@
|
|||
--color-accent-1: var(--color-light-accent-1);
|
||||
--color-accent-2: var(--color-light-accent-2);
|
||||
--color-accent-3: var(--color-light-accent-3);
|
||||
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400));
|
||||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
|
||||
--color-glow-primary: var(--color-argon-950);
|
||||
--color-glow-secondary: var(--color-krypton-950);
|
||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
|
||||
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
|
||||
}
|
||||
|
||||
html,
|
||||
|
|
@ -160,6 +166,12 @@ html.light {
|
|||
--color-accent-1: var(--color-light-accent-1);
|
||||
--color-accent-2: var(--color-light-accent-2);
|
||||
--color-accent-3: var(--color-light-accent-3);
|
||||
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400));
|
||||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
|
||||
--color-glow-primary: var(--color-argon-950);
|
||||
--color-glow-secondary: var(--color-krypton-950);
|
||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
|
||||
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
|
|
@ -180,8 +192,8 @@ html.dark {
|
|||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
|
||||
--color-glow-primary: var(--color-white);
|
||||
--color-glow-secondary: var(--color-white);
|
||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms,
|
||||
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
|
||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
|
||||
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
|
@ -203,8 +215,8 @@ html.dark {
|
|||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
|
||||
--color-glow-primary: var(--color-white);
|
||||
--color-glow-secondary: var(--color-white);
|
||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms,
|
||||
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
|
||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
|
||||
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
|
||||
}
|
||||
}
|
||||
@font-face {
|
||||
|
|
@ -372,7 +384,8 @@ table {
|
|||
width: fit-content;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table th, table td {
|
||||
table th,
|
||||
table td {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border: solid 0.1em var(--color-shade-4);
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -141,8 +141,8 @@ $mobile-navigation-height: 4rem;
|
|||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
|
||||
--color-glow-primary: var(--color-white);
|
||||
--color-glow-secondary: var(--color-white);
|
||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms,
|
||||
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
|
||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
|
||||
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
|
||||
}
|
||||
|
||||
@mixin theme_light() {
|
||||
|
|
@ -159,6 +159,13 @@ $mobile-navigation-height: 4rem;
|
|||
--color-accent-1: var(--color-light-accent-1);
|
||||
--color-accent-2: var(--color-light-accent-2);
|
||||
--color-accent-3: var(--color-light-accent-3);
|
||||
|
||||
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400));
|
||||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
|
||||
--color-glow-primary: var(--color-argon-950);
|
||||
--color-glow-secondary: var(--color-krypton-950);
|
||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
|
||||
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
|
||||
}
|
||||
|
||||
.dark {
|
||||
|
|
@ -300,9 +307,9 @@ h5,
|
|||
h6,
|
||||
.h6,
|
||||
{
|
||||
font-family: "Argon Glow", ui-sans, sans-serif;
|
||||
font-weight: 400;
|
||||
margin: 1rem 0;
|
||||
font-family: "Argon Glow", ui-sans, sans-serif;
|
||||
font-weight: 400;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -372,7 +379,8 @@ table {
|
|||
border-collapse: collapse;
|
||||
|
||||
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border: solid 0.1em var(--color-shade-4);
|
||||
}
|
||||
|
|
@ -391,7 +399,7 @@ table {
|
|||
top: 0;
|
||||
}
|
||||
|
||||
tr > th {
|
||||
tr>th {
|
||||
outline-width: 0.1em;
|
||||
outline-style: solid;
|
||||
outline-offset: -0.05em;
|
||||
|
|
|
|||
|
|
@ -125,8 +125,8 @@
|
|||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
|
||||
--color-glow-primary: var(--color-white);
|
||||
--color-glow-secondary: var(--color-white);
|
||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms,
|
||||
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
|
||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
|
||||
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
|
||||
}
|
||||
|
||||
.light {
|
||||
|
|
@ -143,6 +143,12 @@
|
|||
--color-accent-1: var(--color-light-accent-1);
|
||||
--color-accent-2: var(--color-light-accent-2);
|
||||
--color-accent-3: var(--color-light-accent-3);
|
||||
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400));
|
||||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
|
||||
--color-glow-primary: var(--color-argon-950);
|
||||
--color-glow-secondary: var(--color-krypton-950);
|
||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
|
||||
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
|
||||
}
|
||||
|
||||
html,
|
||||
|
|
@ -160,6 +166,12 @@ html.light {
|
|||
--color-accent-1: var(--color-light-accent-1);
|
||||
--color-accent-2: var(--color-light-accent-2);
|
||||
--color-accent-3: var(--color-light-accent-3);
|
||||
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400));
|
||||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
|
||||
--color-glow-primary: var(--color-argon-950);
|
||||
--color-glow-secondary: var(--color-krypton-950);
|
||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
|
||||
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
|
|
@ -180,8 +192,8 @@ html.dark {
|
|||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
|
||||
--color-glow-primary: var(--color-white);
|
||||
--color-glow-secondary: var(--color-white);
|
||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms,
|
||||
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
|
||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
|
||||
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
|
@ -203,8 +215,8 @@ html.dark {
|
|||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
|
||||
--color-glow-primary: var(--color-white);
|
||||
--color-glow-secondary: var(--color-white);
|
||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms,
|
||||
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
|
||||
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
|
||||
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
|
||||
}
|
||||
}
|
||||
@font-face {
|
||||
|
|
@ -372,7 +384,8 @@ table {
|
|||
width: fit-content;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table th, table td {
|
||||
table th,
|
||||
table td {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border: solid 0.1em var(--color-shade-4);
|
||||
}
|
||||
|
|
@ -599,6 +612,7 @@ body > div nav ul li:hover a:visited, body > div nav ul li:hover a:focus, body >
|
|||
color: var(--color-glow-primary);
|
||||
}
|
||||
body > div nav ul li:hover.link-back a, body > div nav ul li:focus-within.link-back a {
|
||||
border: solid 0.1em var(--color-glow-secondary);
|
||||
filter: var(--filter-glow-secondary);
|
||||
}
|
||||
body > div nav ul li:hover.link-back a:visited, body > div nav ul li:hover.link-back a:focus, body > div nav ul li:hover.link-back a:active, body > div nav ul li:hover.link-back a:hover, body > div nav ul li:focus-within.link-back a:visited, body > div nav ul li:focus-within.link-back a:focus, body > div nav ul li:focus-within.link-back a:active, body > div nav ul li:focus-within.link-back a:hover {
|
||||
|
|
@ -625,7 +639,7 @@ i[data-icon] {
|
|||
box-sizing: content-box;
|
||||
}
|
||||
i[data-icon]::before {
|
||||
content: "";
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -634,25 +648,25 @@ i[data-icon]::before {
|
|||
mask-repeat: no-repeat;
|
||||
background-color: currentColor;
|
||||
}
|
||||
i[data-icon][data-icon=arrow-left]::before {
|
||||
i[data-icon][data-icon='arrow-left']::before {
|
||||
mask-image: url("../icon/arrow_left.svg");
|
||||
}
|
||||
i[data-icon][data-icon=arrow-top]::before {
|
||||
i[data-icon][data-icon='arrow-top']::before {
|
||||
mask-image: url("../icon/arrow_top.svg");
|
||||
}
|
||||
i[data-icon][data-icon=arrow-right]::before {
|
||||
i[data-icon][data-icon='arrow-right']::before {
|
||||
mask-image: url("../icon/arrow_right.svg");
|
||||
}
|
||||
i[data-icon][data-icon=arrow-down]::before {
|
||||
i[data-icon][data-icon='arrow-down']::before {
|
||||
mask-image: url("../icon/arrow_down.svg");
|
||||
}
|
||||
i[data-icon][data-icon=info]::before {
|
||||
i[data-icon][data-icon='info']::before {
|
||||
mask-image: url("../icon/info.svg");
|
||||
}
|
||||
i[data-icon][data-icon=home]::before {
|
||||
i[data-icon][data-icon='home']::before {
|
||||
mask-image: url("../icon/home.svg");
|
||||
}
|
||||
i[data-icon][data-icon=menu-small]::before {
|
||||
i[data-icon][data-icon='menu-small']::before {
|
||||
mask-image: url("../icon/menu_small.svg");
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -31,7 +31,7 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
>div {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-grow: 1;
|
||||
|
|
@ -61,6 +61,7 @@ body {
|
|||
top: 1rem;
|
||||
height: fit-content;
|
||||
overflow: visible;
|
||||
|
||||
button {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -119,13 +120,14 @@ body {
|
|||
background-color: var(--color-shade-2);
|
||||
}
|
||||
|
||||
&.link-back, &.active {
|
||||
&.link-back,
|
||||
&.active {
|
||||
a {
|
||||
border-color: var(--color-shade-4);
|
||||
}
|
||||
}
|
||||
|
||||
> a {
|
||||
>a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
|
@ -141,7 +143,10 @@ body {
|
|||
transition-duration: 400ms;
|
||||
transition-timing-function: ease-in;
|
||||
|
||||
&:visited, &:focus, &:active, &:hover {
|
||||
&:visited,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:hover {
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
|
||||
|
|
@ -153,7 +158,8 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
&:hover, &:focus-within {
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
background-color: transparent;
|
||||
|
||||
a {
|
||||
|
|
@ -162,15 +168,22 @@ body {
|
|||
filter: var(--filter-glow-primary);
|
||||
transition: var(--transition-glow);
|
||||
|
||||
&:visited, &:focus, &:active, &:hover {
|
||||
&:visited,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:hover {
|
||||
color: var(--color-glow-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.link-back a {
|
||||
border: solid 0.1em var(--color-glow-secondary);
|
||||
filter: var(--filter-glow-secondary);
|
||||
|
||||
&:visited, &:focus, &:active, &:hover {
|
||||
&:visited,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:hover {
|
||||
color: var(--color-glow-secondary);
|
||||
}
|
||||
}
|
||||
|
|
@ -277,14 +290,14 @@ pre,
|
|||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
& > * {
|
||||
&>* {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-mobile) {
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > * {
|
||||
&>* {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -294,7 +307,7 @@ pre,
|
|||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > * {
|
||||
&>* {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -302,7 +315,7 @@ pre,
|
|||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
& > * {
|
||||
&>* {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -310,7 +323,7 @@ pre,
|
|||
|
||||
|
||||
main.generator {
|
||||
> div {
|
||||
>div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
|
|
@ -341,7 +354,7 @@ main.generator {
|
|||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
|
||||
& > span {
|
||||
&>span {
|
||||
width: 100%;
|
||||
font-size: var(--text-xl);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue