Jason Zimdars
25a33fb9c8
* main: (22 commits) Fix that stage should be visible above card background Indicate opens menu Hide dialog targets from screen readers when closed Mark up as heading for screen reader navigation Copy for screen readers Don't hide the input so it's accessible to screen readers Point skip links to correct anchor, don't navigate with turbo There aren't any `li` children so just use `div` Use headings for screen reader navigation Use `h3` for individual cards in collection view Make collection title `h1` for screen reader navigation Esc should not propagate when closing dialogs squash! Remove session controller actions other than delete Screen reader: Use heading for comments navigation Remove the invitation codes for now Remove session controller actions other than delete Correct label for field Style Screen reader: De-duplicate links for each person in account settings Account.signal_account is no longer optional ...
326 lines
7.4 KiB
CSS
326 lines
7.4 KiB
CSS
@layer components {
|
|
/* Columns
|
|
/* ------------------------------------------------------------------------ */
|
|
|
|
/* Card contents are resized via container queries. We're using #main here as
|
|
the primary container so all cards have the same container reference */
|
|
#main:has(.card-columns) {
|
|
--cards-gap: min(2cqi, 1rem);
|
|
--gradient-border: linear-gradient(to right,var(--color-canvas), var(--color-ink-lighter) 3%, var(--color-ink-lighter) 97%, var(--color-canvas));
|
|
--reserved-bubble-space: calc(var(--bubble-size) + var(--bubble-gap));
|
|
--bubble-gap: 0.5rem;
|
|
--bubble-size: 4rem;
|
|
|
|
container-type: inline-size;
|
|
max-inline-size: 1400px;
|
|
|
|
@media (max-width: 639px) {
|
|
--bubble-gap: -0.5rem;
|
|
--bubble-size: 3rem;
|
|
--reserved-bubble-space: calc(var(--bubble-size) / 2 + var(--bubble-gap));
|
|
}
|
|
}
|
|
|
|
.card-columns {
|
|
margin: auto;
|
|
max-inline-size: 100%;
|
|
position: relative;
|
|
|
|
&:before {
|
|
background: var(--gradient-border);
|
|
block-size: 1px;
|
|
content: "";
|
|
inset: 0 -0.6em 100% -0.6em;
|
|
position: absolute;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 50%);
|
|
}
|
|
}
|
|
|
|
/* Cards
|
|
/* ------------------------------------------------------------------------ */
|
|
|
|
.cards {
|
|
align-items: stretch;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--cards-gap);
|
|
justify-content: start;
|
|
padding: 0 var(--cards-gap) var(--cards-gap);
|
|
position: relative;
|
|
|
|
/* Make sure filter dialogs don't end up behind sticky headers */
|
|
&:has([open]) {
|
|
z-index: 3;
|
|
}
|
|
|
|
@media (max-width: 639px) {
|
|
padding-block-end: calc(var(--cards-gap) * 2);
|
|
padding-inline-start: var(--reserved-bubble-space);
|
|
}
|
|
|
|
.card {
|
|
--block-space: 1em;
|
|
--block-space-half: 0.5em;
|
|
--text-xx-large: 2em;
|
|
|
|
/* Set lower limit for font size */
|
|
font-size: clamp(0.45rem, 0.85cqi, 100px);
|
|
}
|
|
|
|
.card__title {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.card__link {
|
|
z-index: 1;
|
|
}
|
|
|
|
.card__hide-on-index {
|
|
display: none;
|
|
}
|
|
|
|
.card__background {
|
|
.card:has(& img:not([src=""])) {
|
|
.card__content,
|
|
.card__meta,
|
|
.workflow-stage:not(.workflow-stage--current) {
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease-in-out;
|
|
|
|
@media (any-hover: hover) {
|
|
.card:hover & {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (any-hover: hover) {
|
|
.card:hover & {
|
|
img:not([src=""]) {
|
|
filter: blur(3px) brightness(1.2);
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.card__steps {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
/* Column elements
|
|
/* ------------------------------------------------------------------------ */
|
|
|
|
.cards__heading {
|
|
background-color: var(--color-canvas);
|
|
display: flex;
|
|
font-size: var(--text-medium);
|
|
inset-block-start: 0;
|
|
justify-content: center;
|
|
margin-block-start: 1px;
|
|
margin-inline: calc(-1 * var(--cards-gap) + 1px);
|
|
padding-block: var(--cards-gap);
|
|
position: sticky;
|
|
z-index: 2;
|
|
|
|
&, button {
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
button {
|
|
--hover-size: 0;
|
|
|
|
inline-size: auto;
|
|
margin-inline-start: 2em;
|
|
padding: 0 2em 0 0;
|
|
}
|
|
|
|
dialog {
|
|
font-weight: normal;
|
|
text-transform: none;
|
|
}
|
|
}
|
|
|
|
/* Considering
|
|
/* ------------------------------------------------------------------------ */
|
|
|
|
.cards--considering {
|
|
@media (min-width: 640px) {
|
|
padding-inline: var(--reserved-bubble-space) var(--cards-gap);
|
|
|
|
&:after {
|
|
background: linear-gradient(var(--color-canvas), var(--color-ink-lighter) 1%, var(--color-ink-lighter) 99%, var(--color-canvas));
|
|
block-size: calc(100% + 1.2em);
|
|
content: "";
|
|
display: block;
|
|
inline-size: 1px;
|
|
inset: -0.6em 0 -0.6em 100%;
|
|
position: absolute;
|
|
z-index: 3;
|
|
}
|
|
}
|
|
|
|
.card {
|
|
--avatar-size: 2.75em;
|
|
--text-xx-large: 1.6em;
|
|
--text-small: 1.1em;
|
|
|
|
background-color: var(--color-canvas);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.card__body {
|
|
padding-block-start: calc(var(--card-padding-block) / 2);
|
|
padding-inline: 0;
|
|
}
|
|
|
|
.card__collection {
|
|
background-color: var(--color-canvas);
|
|
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
|
|
}
|
|
|
|
.card__collection-name {
|
|
border-inline-start: 1px solid color-mix(in srgb, var(--color-ink) 33%, var(--color-canvas));
|
|
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
|
|
}
|
|
|
|
.card--drafted {
|
|
--card-color: var(--color-ink-medium) !important;
|
|
|
|
border-color: var(--card-color) !important;
|
|
border-style: dashed !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.card__header {
|
|
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
|
|
margin-inline: calc(-0.5 * var(--card-padding-inline)) calc(-0.25 * var(--card-padding-inline));
|
|
}
|
|
|
|
.card__people-label {
|
|
display: none;
|
|
}
|
|
|
|
.card__title {
|
|
min-block-size: 0;
|
|
}
|
|
|
|
.card__tags {
|
|
font-size: var(--text-small);
|
|
}
|
|
}
|
|
|
|
/* Doing
|
|
/* ------------------------------------------------------------------------ */
|
|
|
|
.cards--doing {
|
|
@media (min-width: 640px) {
|
|
/* border-inline-end: 1px solid var(--color-ink-lighter); */
|
|
padding-inline: var(--cards-gap) var(--reserved-bubble-space);
|
|
}
|
|
|
|
@media (max-width: 639px) {
|
|
&::before {
|
|
background: var(--gradient-border);
|
|
block-size: 1px;
|
|
content: "";
|
|
inset: 0 0 auto;
|
|
position: absolute;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Closed
|
|
/* ------------------------------------------------------------------------ */
|
|
|
|
.cards--closed {
|
|
justify-content: center;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
inline-size: 100%;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
|
|
&:before {
|
|
background: var(--gradient-border);
|
|
block-size: 1px;
|
|
content: "";
|
|
inset: 0 -0.6em 100% -0.6em;
|
|
position: absolute;
|
|
}
|
|
|
|
@media (max-width: 639px) {
|
|
flex-direction: column;
|
|
padding-inline: var(--reserved-bubble-space);
|
|
}
|
|
|
|
.cards__heading {
|
|
min-inline-size: 100%;
|
|
|
|
@media (max-width: 639px) {
|
|
margin-inline-end: calc(-1 * var(--cards-gap));
|
|
}
|
|
}
|
|
|
|
.card {
|
|
@media (min-width: 640px) {
|
|
inline-size: calc((100% - var(--cards-gap)) / 2);
|
|
}
|
|
|
|
@media (min-width: 960px) {
|
|
inline-size: calc((100% - var(--cards-gap) * 2) / 3);
|
|
}
|
|
|
|
&:nth-of-type(7) {
|
|
margin-block-start: var(--cards-gap);
|
|
}
|
|
|
|
&:nth-of-type(n+7) {
|
|
background-color: var(--color-canvas);
|
|
border: none;
|
|
border-block-end: 1px solid var(--color-ink-lighter);
|
|
box-shadow: none;
|
|
inline-size: 100%;
|
|
margin-inline: auto;
|
|
max-inline-size: 110ch;
|
|
padding-block: 0 var(--cards-gap);
|
|
|
|
.card__meta {
|
|
display: none;
|
|
}
|
|
|
|
.card__body {
|
|
padding-block-end: 0;
|
|
}
|
|
|
|
.card__closed {
|
|
aspect-ratio: unset;
|
|
border-width: 0.5ch;
|
|
font-size: 0.75em;
|
|
transform: none;
|
|
}
|
|
|
|
.card__closed-by-line,
|
|
.card__closed-date {
|
|
display: none;
|
|
}
|
|
|
|
.card__header {
|
|
margin: 0;
|
|
}
|
|
|
|
.card__title {
|
|
min-block-size: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|