feat(css): 💄 update global css
This commit is contained in:
parent
91eefc520f
commit
ee69d545b5
|
@ -105,14 +105,42 @@ h1 {
|
|||
margin-block: var(--_gap);
|
||||
}
|
||||
|
||||
.cta {
|
||||
label {
|
||||
display: grid;
|
||||
gap: var(--_gap-half);
|
||||
}
|
||||
|
||||
input {
|
||||
transition: all var(--_transition-delay) ease;
|
||||
}
|
||||
|
||||
input:not([type='radio']):not([type='checkbox']) {
|
||||
padding: var(--_gap-half);
|
||||
border: var(--_border-size) solid var(--_translucent);
|
||||
background-color: var(--_translucent);
|
||||
color: hsl(from var(--_font-color) h s l / 0.8);
|
||||
}
|
||||
|
||||
input:not([type='radio']):not([type='checkbox']):focus {
|
||||
background-color: var(--_background-color);
|
||||
color: var(--_font-color);
|
||||
}
|
||||
|
||||
input[type='radio'],
|
||||
input[type='checkbox'] {
|
||||
width: calc(1.5 * var(--_gap));
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.cta,
|
||||
.button {
|
||||
text-decoration: none;
|
||||
background-color: var(--_accent-color);
|
||||
color: var(--sand-0);
|
||||
width: fit-content;
|
||||
width: 100%;
|
||||
font-size: 120%;
|
||||
height: fit-content;
|
||||
padding: 1rem 2rem;
|
||||
font-size: 150%;
|
||||
padding: var(--_gap-half);
|
||||
font-family: var(--_font-family-accent);
|
||||
border: var(--_border-size) solid var(--_accent-color);
|
||||
transition: all var(--_transition-delay) ease;
|
||||
|
@ -121,7 +149,9 @@ h1 {
|
|||
}
|
||||
|
||||
.cta:hover,
|
||||
.cta:focus-visible {
|
||||
.cta:focus-visible,
|
||||
.button:hover,
|
||||
.button:focus-visible {
|
||||
background-color: var(--lime-1);
|
||||
color: var(--_accent-color);
|
||||
box-shadow: 0 0 0 0 var(--_accent-color);
|
||||
|
@ -130,3 +160,9 @@ h1 {
|
|||
.cta:active {
|
||||
box-shadow: 0 0 180px 20px var(--_accent-color);
|
||||
}
|
||||
|
||||
.cta {
|
||||
width: fit-content;
|
||||
font-size: 150%;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
|
|
@ -12,3 +12,4 @@
|
|||
@import url('../../islands/SearchBox.css');
|
||||
@import url('../../islands/MoreBox.css');
|
||||
@import url('../../islands/AiChatBox.css');
|
||||
@import url('../../islands/LoginForm.css');
|
||||
|
|
Loading…
Reference in a new issue