Jason Zimdars
2b74ece8b3
* main: (34 commits) Opt out of writer affinity on readings controller Enable VFS, but don't load extension again Add flash notice when adding another card Fix tests after updating rails Fix fixtures after updating gem Make sure you can't drag drafts Fix clipped tag selector Don't miss cards dropped in the same container! Make sure that only cards in do/considering are draggable Add test Add test Use the same controller for publishing cards and for publishing and adding another Position Completed stamps better Bump sentry-rails from 5.24.0 to 5.25.0 Bump rails from `0ac3fba` to `fd49d6a` Bump sentry-ruby from 5.24.0 to 5.25.0 Add multiple cards quickly Tweak a little more Tighter bubbles on small screens Need a little space in the layout for the drag/drop outline ...
198 lines
4.3 KiB
CSS
198 lines
4.3 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__background {
|
|
filter: brightness(1.2) contrast(0.8);
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.card__meta,
|
|
.card__stages {
|
|
font-size: var(--text-small);
|
|
}
|
|
|
|
.card__stages {
|
|
max-inline-size: 32ch;
|
|
}
|
|
|
|
.collection-picker__button {
|
|
--btn-border-size: 0;
|
|
|
|
font-size: 0.5em;
|
|
margin-inline-start: 1ch;
|
|
|
|
+ .panel {
|
|
--panel-size: 18ch;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
--padding-inline: 3cqmin;
|
|
|
|
column-gap: 0;
|
|
grid-template-areas:
|
|
"notch-top notch-top"
|
|
"card card"
|
|
"actions-left actions-right"
|
|
"notch-bottom notch-bottom";
|
|
grid-template-columns: 1fr 1fr;
|
|
inline-size: calc(100% + 2 * var(--padding-inline));
|
|
margin-inline: calc(-1 * var(--padding-inline));
|
|
max-inline-size: none;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.card-perma__collection-header {
|
|
margin-block-end: var(--block-space);
|
|
|
|
#main:has(.card-perma__notch--top) & {
|
|
margin-block-end: 4ch;
|
|
}
|
|
}
|
|
|
|
/* Child items
|
|
/* ------------------------------------------------------------------------ */
|
|
|
|
.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; }
|
|
|
|
@media (max-width: 800px) {
|
|
.card-perma__actions {
|
|
display: flex;
|
|
inset-block-end: 0;
|
|
padding-inline: var(--padding-inline);
|
|
position: absolute;
|
|
translate: 0 50%;
|
|
}
|
|
|
|
.card-perma__actions--right {
|
|
inset-inline-end: 0;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
/* 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-color: var(--color-ink-inverted);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 580px) {
|
|
margin-block-start: -2ch;
|
|
}
|
|
}
|
|
|
|
.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);
|
|
--btn-border-color: var(--color-container);
|
|
}
|
|
}
|
|
|
|
.card-perma__closure-message {
|
|
color: var(--card-color);
|
|
|
|
&:first-child {
|
|
padding-left: 1ch;
|
|
}
|
|
}
|
|
}
|