Jason Zimdars
137 lines
3.0 KiB
CSS
137 lines
3.0 KiB
CSS
/* Card container for the perma. Tools and actions and whatnot */
|
|
|
|
@layer components {
|
|
.card-perma {
|
|
--actions-block-inset: 1.5rem;
|
|
--actions-inline-inset: 4rem;
|
|
--color-container: color-mix(in srgb, var(--card-color) 33%, var(--color-canvas));
|
|
--padding-inline: calc(var(--block-space-double) + var(--block-space));
|
|
--padding-block: calc(var(--block-space-double) + var(--block-space-half));
|
|
|
|
align-items: start;
|
|
column-gap: var(--inline-space);
|
|
display: grid;
|
|
grid-template-areas:
|
|
"qw notch-top we"
|
|
"actions-left card actions-right"
|
|
"er notch-bottom rt";
|
|
grid-template-columns: 48px minmax(0, 1120px) 48px;
|
|
inline-size: fit-content;
|
|
max-inline-size: 100%;
|
|
margin-inline: auto;
|
|
|
|
&:has(.card-perma__star-input:checked) {
|
|
.card {
|
|
outline: 4px solid var(--color-negative);
|
|
}
|
|
}
|
|
|
|
.card {
|
|
--card-aspect-ratio: 2 / 0.95;
|
|
|
|
border: none;
|
|
}
|
|
|
|
.card__meta,
|
|
.card__stages {
|
|
font-size: var(--text-small);
|
|
}
|
|
|
|
.card__stages {
|
|
max-inline-size: 32ch;
|
|
}
|
|
}
|
|
|
|
/* Children
|
|
/* ------------------------------------------------------------------------ */
|
|
|
|
.card-perma__bg {
|
|
background-color: var(--color-container);
|
|
border-radius: 0.2em;
|
|
grid-area: card;
|
|
padding: var(--padding-block) var(--padding-inline);
|
|
}
|
|
|
|
.card-perma__actions {
|
|
display: grid;
|
|
gap: var(--block-space-half);
|
|
|
|
&:has([open]) {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
.card-perma__actions--left { grid-area: actions-left; }
|
|
.card-perma__actions--right { grid-area: actions-right; }
|
|
|
|
/* Notches
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
.card-perma__notch {
|
|
align-items: center;
|
|
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
|
|
display: inline-flex;
|
|
inline-size: auto;
|
|
gap: var(--inline-space);
|
|
justify-content: center;
|
|
margin-inline: auto;
|
|
position: relative;
|
|
text-align: center;
|
|
z-index: 0;
|
|
}
|
|
|
|
.card-perma__notch--top {
|
|
grid-area: notch-top;
|
|
inset-inline-start: 50%;
|
|
min-inline-size: 36ch;
|
|
position: absolute;
|
|
translate: -50% -50%;
|
|
|
|
.btn {
|
|
--btn-border-color: var(--card-color);
|
|
--btn-color: var(--card-color);
|
|
|
|
text-align: center;
|
|
|
|
&:has(input:checked) {
|
|
--btn-background: var(--card-color);
|
|
--btn-color: var(--color-ink-inverted);
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-perma__notch--bottom {
|
|
grid-area: notch-bottom;
|
|
translate: 0 -25%;
|
|
|
|
&:has([open]) {
|
|
z-index: 1;
|
|
}
|
|
|
|
.btn:not(.popup__item, .btn--plain, .btn--reversed) {
|
|
--btn-background: var(--card-color);
|
|
--btn-color: var(--color-ink-inverted);
|
|
}
|
|
|
|
.btn--plain {
|
|
--btn-color: var(--card-color);
|
|
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.btn--reversed {
|
|
--btn-background: var(--color-canvas);
|
|
--btn-color: var(--card-color);
|
|
}
|
|
}
|
|
|
|
.card-perma__closure-message {
|
|
color: var(--card-color);
|
|
|
|
&:first-child {
|
|
padding-left: 1ch;
|
|
}
|
|
}
|
|
}
|