Jorge Manrubia
ee80b87c8c
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Jason Zimdars <jz@37signals.com>
306 lines
7.1 KiB
CSS
306 lines
7.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(dialog[open]) {
|
|
z-index: 2;
|
|
}
|
|
|
|
&:has(.card-perma__star-input:checked) {
|
|
.card {
|
|
outline: 4px solid var(--color-negative);
|
|
}
|
|
}
|
|
|
|
.card {
|
|
--card-aspect-ratio: 2 / 0.95;
|
|
--lexxy-bg-color: var(--card-bg-color);
|
|
|
|
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));
|
|
margin-block-end: 0.5ch;
|
|
|
|
/* With tight line spacing, Windows will cover over adjacent lines of text
|
|
* when input text is selected. Here, we're setting the selection color to a
|
|
* transparent value so the overlapping text lines are at least visible. */
|
|
::selection {
|
|
background: oklch(var(--lch-blue-light) / 0.5);
|
|
}
|
|
|
|
&:has(textarea) {
|
|
margin-block-end: 0;
|
|
|
|
@supports not (field-sizing: content) {
|
|
text-wrap: unset; /* Safari is annoying if you have text-wrap: balance in textareas */
|
|
}
|
|
}
|
|
}
|
|
|
|
.card__meta,
|
|
.card__stages {
|
|
@media (min-width: 640px) {
|
|
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;
|
|
}
|
|
}
|
|
|
|
.board-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: 799px) {
|
|
--bubble-size: 4.5rem;
|
|
|
|
inset: calc(var(--bubble-size) / 1.5) 0 auto auto;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 799px) {
|
|
--padding-inline: 1.5ch;
|
|
|
|
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));
|
|
|
|
@media (max-width: 799px) {
|
|
padding-inline: 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: 799px) {
|
|
.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-perma__image-btn {
|
|
&:has(input[type="file"]:focus),
|
|
&:has(input[type="file"]:focus-visible) {
|
|
outline: var(--focus-ring) !important;
|
|
outline-offset: var(--focus-ring-offset);
|
|
}
|
|
|
|
input[type="file"] {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.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));
|
|
}
|
|
|
|
form {
|
|
background-color: var(--color-canvas);
|
|
border-radius: 99rem;
|
|
}
|
|
|
|
.btn:not(.popup__btn, .btn--plain, .btn--reversed, .settings-subscription__button) {
|
|
--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);
|
|
}
|
|
}
|