Andy Smith
e995e7a8e8
* main: (41 commits) Mount our backup vol. "Postpones" -> "Closes in" Prevent view transition animations on page refreshes dep: update AR::Tenanted to allow config adapter registration More fine-grained approach to listen for broadcasted refresh signals Reuse existing cache invalidation logic that replaced this helper Show completed cards when filtering cards by creator Refactor to remove workflows styles Display column when viewing cards in a grid (filtering) Dial back title size on perma Add bubble when The Stream has bubbled cards This got too wide in the collapsed state Allow selecting default color Style Focus filter input with a hotkey, adjust sizing `esc` clears filters beamer-testbed configures fizzy-01 to be the writer beamer-testbed can connect to queenbee on the host beamer-testbed runs on host port 3006 Activity bumps cards to the top of triaged columns, too ...
268 lines
6.1 KiB
CSS
268 lines
6.1 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:
|
|
"notch-top notch-top notch-top"
|
|
"actions-left card actions-right"
|
|
"notch-bottom notch-bottom notch-bottom";
|
|
grid-template-columns: 48px minmax(0, 1120px) 48px;
|
|
inline-size: fit-content;
|
|
margin-block-start: var(--block-space);
|
|
max-inline-size: 100%;
|
|
margin-inline: auto;
|
|
position: relative;
|
|
|
|
&:has(.card-perma__star-input:checked) {
|
|
.card {
|
|
outline: 4px solid var(--color-negative);
|
|
}
|
|
}
|
|
|
|
.card {
|
|
--card-aspect-ratio: 2 / 0.95;
|
|
|
|
border: none;
|
|
}
|
|
|
|
.card__background {
|
|
filter: brightness(1.2) contrast(0.8);
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.card__body {
|
|
@media (max-width: 639px) {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.card__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1ch;
|
|
}
|
|
|
|
.card__title {
|
|
font-size: clamp(var(--text-medium), 6vw, var(--text-x-large));
|
|
}
|
|
|
|
.card__meta,
|
|
.card__stages {
|
|
@media (min-width: 639px) {
|
|
font-size: var(--text-small);
|
|
}
|
|
}
|
|
|
|
.card__stages {
|
|
max-inline-size: 32ch;
|
|
|
|
@media (max-width: 639px) {
|
|
border: 1px solid var(--card-color);
|
|
border-radius: 0.25em;
|
|
overflow: hidden;
|
|
max-inline-size: 100%;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.card__column-name {
|
|
@media (max-width: 639px) {
|
|
--btn-border-radius: 0;
|
|
}
|
|
}
|
|
|
|
.collection-picker__button {
|
|
--btn-border-size: 0;
|
|
|
|
font-size: 0.5em;
|
|
margin-inline-start: 1ch;
|
|
|
|
+ .panel {
|
|
--panel-size: 18ch;
|
|
}
|
|
}
|
|
|
|
.bubble {
|
|
--bubble-number-max: 42px;
|
|
--bubble-size: 6rem;
|
|
|
|
inset: calc(var(--bubble-size) / -4) calc(var(--bubble-size) / 1.5) auto auto;
|
|
translate: 0 0;
|
|
|
|
@media (max-width: 800px) {
|
|
--bubble-size: 4.5rem;
|
|
|
|
inset: calc(var(--bubble-size) / 1.5) 0 auto auto;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
--padding-inline: var(--main-padding);
|
|
|
|
column-gap: 0;
|
|
grid-template-areas:
|
|
"notch-top notch-top notch-top"
|
|
"card card card"
|
|
"actions-left notch-bottom actions-right";
|
|
grid-template-columns: 1fr auto 1fr;
|
|
inline-size: calc(100% + 2 * var(--padding-inline));
|
|
margin-inline: calc(-1 * var(--padding-inline));
|
|
max-inline-size: none;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
/* Child items
|
|
/* ------------------------------------------------------------------------ */
|
|
|
|
.card-perma__bg {
|
|
background-color: var(--color-container);
|
|
border-radius: 0.2em;
|
|
grid-area: card;
|
|
padding: clamp(2rem, 4vw, var(--padding-block)) clamp(16px, 4vw, var(--padding-inline));
|
|
}
|
|
|
|
.card-perma__actions {
|
|
display: grid;
|
|
gap: var(--block-space-half);
|
|
|
|
&:has([open]) {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
&:has([data-controller="tooltip"]:hover) {
|
|
z-index: var(--z-tooltip);
|
|
}
|
|
}
|
|
|
|
.card-perma__actions--left { grid-area: actions-left; }
|
|
.card-perma__actions--right { grid-area: actions-right; }
|
|
|
|
@media (max-width: 800px) {
|
|
.card-perma__actions {
|
|
display: flex;
|
|
padding-inline: var(--padding-inline);
|
|
translate: 0 -50%;
|
|
}
|
|
|
|
.card-perma__actions--right {
|
|
inset-inline-end: 0;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
.card__banner {
|
|
align-items: center;
|
|
background-color: var(--color-highlight);
|
|
border-radius: 2em;
|
|
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
|
|
display: inline-flex;
|
|
inline-size: auto;
|
|
gap: var(--inline-space-half);
|
|
grid-area: notch-top;
|
|
justify-content: center;
|
|
margin-block-start: -4ch;
|
|
margin-inline: auto;
|
|
max-inline-size: 36ch;
|
|
padding: var(--block-space-half) var(--block-space);
|
|
position: relative;
|
|
text-align: center;
|
|
translate: 0 50%;
|
|
z-index: 0;
|
|
|
|
.btn {
|
|
--btn-background: var(--card-color);
|
|
--btn-border-color: var(--card-color);
|
|
--btn-color: var(--color-ink-inverted);
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
inline-size: 100%;
|
|
margin-block-start: -4ch;
|
|
max-inline-size: 36ch;
|
|
padding-inline: 1ch;
|
|
translate: 0 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-border-color: var(--card-color);
|
|
--btn-color: var(--color-ink-inverted);
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-perma__notch--bottom {
|
|
--half-btn-height: 1.25rem;
|
|
|
|
grid-area: notch-bottom;
|
|
|
|
/* Overlap the card BG by half the button height */
|
|
&:has(.btn) {
|
|
translate: 0 calc(-1 * var(--half-btn-height));
|
|
}
|
|
|
|
&:has([open]) {
|
|
z-index: 1;
|
|
}
|
|
|
|
.btn:not(.popup__btn, .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);
|
|
--btn-border-color: var(--color-container);
|
|
}
|
|
|
|
@media (max-width: 639px) {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.card-perma__closure-message {
|
|
color: var(--card-color);
|
|
}
|
|
}
|