Jay Ohms
a9b873f151
* main: Create popup initial alignment classes Fix class typo Hide the board selector button if card is closed Align board and tag picker dialogs without using math Add dialog manager to card perma Fix "M" hotkey using stale user from fragment cache Add Enable all/Disable all buttons to webhook event selection Remove whitespace Remove hover styles from disabled menu items # Conflicts: # app/views/cards/_container.html.erb
346 lines
8.4 KiB
CSS
346 lines
8.4 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));
|
|
--half-btn-height: 1.25rem;
|
|
--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"
|
|
"closure-message closure-message closure-message";
|
|
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;
|
|
padding-block-end: calc(var(--card-padding-block) * 1.5);
|
|
}
|
|
}
|
|
|
|
.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;
|
|
flex-direction: row;
|
|
gap: 0;
|
|
overflow: auto;
|
|
max-inline-size: 100%;
|
|
padding: 0;
|
|
position: relative;
|
|
white-space: nowrap;
|
|
|
|
& > form {
|
|
flex-grow: 1;
|
|
max-inline-size: 25ch;
|
|
min-block-size: 2.5em;
|
|
}
|
|
|
|
& > form + form:not(:has(.card__column-name--current)) {
|
|
box-shadow: -1px 0 0 0 var(--color-container);
|
|
}
|
|
}
|
|
}
|
|
|
|
.card__column-name {
|
|
@media (max-width: 639px) {
|
|
--btn-border-radius: 0;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.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) {
|
|
--half-btn-height: 1.5rem;
|
|
--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"
|
|
"closure-message closure-message closure-message";
|
|
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: 639px) {
|
|
padding: clamp(0.25rem, 2vw, var(--padding-block));
|
|
padding-block-end: clamp(2.5rem, 4vw, var(--padding-block));
|
|
}
|
|
|
|
@media (min-width: 640px) and (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 {
|
|
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--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__notch-new-card-buttons {
|
|
display: flex;
|
|
gap: var(--inline-space-half);
|
|
|
|
@media (max-width: 479px) {
|
|
flex-direction: column;
|
|
|
|
.btn {
|
|
inline-size: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-perma__closure-message {
|
|
color: var(--card-color);
|
|
grid-area: closure-message;
|
|
margin-block: var(--block-space) var(--block-space-double);
|
|
padding-inline: 1ch;
|
|
|
|
.btn--plain {
|
|
--btn-color: var(--card-color);
|
|
|
|
text-decoration: underline;
|
|
}
|
|
|
|
@media (max-width: 799px) {
|
|
margin-block: var(--block-space-half);
|
|
translate: 0 calc(-0.5 * var(--half-btn-height));
|
|
}
|
|
|
|
@media (min-width: 800px) {
|
|
.card-perma__notch--bottom:has(.btn) ~ & {
|
|
margin-block: var(--block-space-half) var(--block-space);
|
|
translate: 0 calc(-0.5 * var(--half-btn-height));
|
|
}
|
|
}
|
|
}
|
|
}
|