Adrien Maston
515 lines
12 KiB
CSS
515 lines
12 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: 3;
|
|
}
|
|
|
|
&:has(.card-perma__star-input:checked) {
|
|
.card {
|
|
outline: 4px solid var(--color-negative);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 639px) {
|
|
&:has(.card__closed) {
|
|
padding-block-start: 4.5rem;
|
|
|
|
.card-perma__bg {
|
|
box-shadow: 0 -2rem 0 0 var(--color-container);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 799px) {
|
|
--half-btn-height: 1.25rem;
|
|
--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;
|
|
}
|
|
|
|
.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__header {
|
|
@media (max-width: 639px) {
|
|
flex-wrap: wrap;
|
|
gap: var(--card-header-space) unset;
|
|
}
|
|
}
|
|
|
|
.card__tags {
|
|
@media (max-width: 639px) {
|
|
padding: 0.25lh;
|
|
}
|
|
}
|
|
|
|
.card__tags-list {
|
|
@media (min-width: 640px) {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.card__body {
|
|
position: relative;
|
|
|
|
@media (max-width: 639px) {
|
|
flex-direction: column;
|
|
padding-block: var(--card-padding-block) calc(var(--card-padding-block) * 1.5);
|
|
position: static;
|
|
}
|
|
}
|
|
|
|
.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) {
|
|
@media (min-width: 640px) {
|
|
margin-block-end: 0;
|
|
}
|
|
|
|
@supports not (field-sizing: content) {
|
|
text-wrap: unset; /* Safari is annoying if you have text-wrap: balance in textareas */
|
|
}
|
|
}
|
|
|
|
@media (max-width: 639px) {
|
|
margin-block-end: 0.75ch;
|
|
}
|
|
}
|
|
|
|
.card__description {
|
|
@media (max-width: 639px) {
|
|
margin-block-end: 1ch;
|
|
}
|
|
}
|
|
|
|
.card__meta,
|
|
.card__stages {
|
|
@media (min-width: 640px) {
|
|
font-size: var(--text-small);
|
|
}
|
|
}
|
|
|
|
.card__meta {
|
|
grid-area: meta;
|
|
margin-inline-end: auto;
|
|
|
|
@media (max-width: 639px) {
|
|
--meta-spacer-block: 0.75ch;
|
|
|
|
inline-size: 100%;
|
|
grid-template-areas:
|
|
"avatars-author text-added"
|
|
"avatars-author text-author"
|
|
"text-updated text-updated"
|
|
"text-assignees text-assignees"
|
|
"avatars-assignees avatars-assignees";
|
|
grid-template-columns: auto 1fr;
|
|
|
|
.card__meta-text {
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.card__meta-text + .card__meta-text {
|
|
border-block-start: var(--card-border);
|
|
margin-block-start: var(--meta-spacer-block);
|
|
padding-block-start: var(--meta-spacer-block);
|
|
}
|
|
|
|
.card__meta-avatars--assignees {
|
|
margin-inline: 0;
|
|
margin-block-start: var(--meta-spacer-block);
|
|
}
|
|
|
|
.card__meta-avatars--author {
|
|
display: initial;
|
|
}
|
|
|
|
.card__meta-avatars--assignees .avatar {
|
|
display: grid;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card__stages {
|
|
max-inline-size: 32ch;
|
|
|
|
@media (max-width: 639px) {
|
|
border: 1px solid var(--card-color);
|
|
border-radius: calc(0.2em + 3px);
|
|
flex-direction: row;
|
|
gap: 0;
|
|
overflow: auto;
|
|
max-inline-size: 100%;
|
|
padding: 3px;
|
|
position: relative;
|
|
white-space: nowrap;
|
|
|
|
& > form {
|
|
flex-grow: 1;
|
|
max-inline-size: 25ch;
|
|
min-block-size: 2.5em;
|
|
}
|
|
|
|
& > form:not(:has(.card__column-name--current)) + form:not(:has(.card__column-name--current)) {
|
|
box-shadow: -1px 0 0 0 var(--color-container);
|
|
}
|
|
}
|
|
}
|
|
|
|
.card__column-name {
|
|
@media (max-width: 639px) {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.card__closed {
|
|
@media (max-width: 639px) {
|
|
inset: auto 0 100% auto;
|
|
translate: 0 30%;
|
|
scale: 75%;
|
|
}
|
|
}
|
|
|
|
.card__footer {
|
|
--btn-size: 2.5rem;
|
|
|
|
display: flex;
|
|
gap: 0.5ch;
|
|
inline-size: 100%;
|
|
text-align: start;
|
|
|
|
/* Switch to grid layout so that the bg zoom button can stay next to the
|
|
* meta element, and the reactions can sit below */
|
|
&:has(.reaction) {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
grid-template-areas:
|
|
"meta bg-zoom"
|
|
"reactions reactions";
|
|
}
|
|
|
|
@media (max-width: 639px) {
|
|
display: grid;
|
|
font-size: var(--text-x-small);
|
|
grid-template-columns: 1fr auto;
|
|
grid-template-areas:
|
|
"meta bg-zoom"
|
|
"meta reactions";
|
|
}
|
|
}
|
|
|
|
.reactions {
|
|
--reaction-size: var(--btn-size);
|
|
|
|
align-self: flex-end;
|
|
display: flex;
|
|
gap: 0.5ch;
|
|
grid-area: reactions;
|
|
margin-inline-start: auto;
|
|
|
|
&:has(.reaction) {
|
|
--padding: calc(var(--card-padding-block) / 2);
|
|
--reaction-size: 1.6875rem;
|
|
|
|
margin-block: var(--padding) calc(-1 * var(--padding));
|
|
padding-block-start: var(--padding);
|
|
position: relative;
|
|
|
|
&:before {
|
|
border-block-start: 1px dashed color-mix(in srgb, transparent, var(--card-color) 33%);
|
|
content: "";
|
|
inset: 0 calc(-1 * var(--card-padding-inline)) auto;
|
|
position: absolute;
|
|
}
|
|
|
|
@media (any-hover: none) {
|
|
--reaction-size: 2.25rem;
|
|
}
|
|
}
|
|
|
|
&:not(:has(.reaction)) {
|
|
margin: 0;
|
|
|
|
.reactions__trigger {
|
|
--btn-border-color: var(--color-ink-light);
|
|
}
|
|
}
|
|
}
|
|
|
|
.reaction__popup.popup {
|
|
inline-size: max-content;
|
|
}
|
|
|
|
.card__zoom-bg-btn {
|
|
grid-area: bg-zoom;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 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));
|
|
}
|
|
}
|
|
}
|
|
}
|