@media print { /* Global /* ------------------------------------------------------------------------ */ :root { --color-ink: black; --color-canvas: white; --border-dark: 1px solid var(--color-ink); --border-light: 1px solid color-mix(in oklch, var(--color-ink), transparent 75%); } @page { margin: 0.5in; } html { font-size: 10pt; } main { inline-size: unset; margin: 0; orphans: 3; padding: 0; widows: 2; } /* Browsers usually disable backgrounds on print, so this ensures icons (which use BG masks) will show up. */ .icon, .knob, .switch { -webkit-print-color-adjust: exact; color-adjust: exact; print-color-adjust: exact; } .fizzy-menu, .fizzy-menu-trigger, .header__actions { display: none; } .header { padding: 0; } .header__title { margin-block-end: 1ch; } /* Cards /* -------------------------------------------------------------------------- */ .card { --card-color: var(--color-ink) !important; background: var(--color-canvas); border: var(--border-light); box-shadow: none; break-inside: avoid; color: var(--color-ink); } .card { .card__collection { background: var(--color-canvas); border-block-end: var(--border-light); border-inline-end: var(--border-light); color: var(--color-ink); } } .card__title { font-weight: bold; } /* Events /* ------------------------------------------------------------------------ */ .events__columns { border-inline: none; } .events__column-header { background: none; margin: 0; padding-block: 1ch; } .events__time-block { padding: 0 1ch; .events__column:first-child & { padding-inline-start: 0; } .events__column:last-child & { padding-inline-end: 0; } } .events__none { padding-block: 2ch; } .event { --card-color: var(--color-ink) !important; background: var(--color-canvas); border: var(--border-light); box-shadow: none; break-inside: avoid; color: var(--color-ink); .avatar { --avatar-size: 2lh; } } /* Collections /* ------------------------------------------------------------------------ */ .filters, .card--new, .cards__decoration, .card-columns:before, .cards--considering:before, .cards--closed:before { display: none; } .card-columns, .cards--closed { border-block-start: var(--border-light); margin-block-end: 1ch; min-block-size: unset; } .cards--on-deck, .cards--doing { padding-inline: 0; } .cards--considering { background: none; margin: 0; padding-inline: 1ch; .card__header { margin-inline: calc(-1 * var(--card-padding-inline)); } .card__body { padding-block-start: calc(var(--card-padding-block) / 2); } } .cards--closed { .card:nth-of-type(7) { margin-block: 0; } .card:nth-of-type(n+7) { border-inline: none; max-inline-size: none; } .card:nth-of-type(n+8) { margin-block-start: calc(-1 * var(--cards-gap) - 1px); } } /* Card perma /* ------------------------------------------------------------------------ */ .card-perma__notch, .card-perma__actions, .comment--new, .comments__subscribers, .card__meta-avatars--assignees > div > div:last-child, .steps > .step:last-child, div:has(> .tag-picker__button), div:has(> .collection-picker__button), .delete-card, .header--card .header__title { display: none; } .card-perma { display: block; inline-size: 100%; margin: 0 0 1lh; .card { aspect-ratio: unset; } .card__title { font-size: var(--text-x-large); } } .card-perma__bg { background: transparent; padding: 0; } .comments { --row-gap: 0; --comment-padding-inline: 1.4lh; padding-inline: 0; } .comment { --comment-max: none; border-block-end: var(--border-light); } .comment__content { background: none; } .comment__avatar { --btn-size: 2lh; margin-inline-start: 0; } .comment__author h3 { margin-inline: 0; } .comment__edit { display: none; } .comment__body { text-align: start; } .reactions { margin-block-start: 0; } /* Settings /* ------------------------------------------------------------------------ */ .settings__user-filter .input, .settings__user-list-tips { display: none; } .settings__panel { border: none; border-radius: 0; box-shadow: none; padding: 0; text-align: left; h2 { &:before, &:after { display: none; } } } .settings__panel--users { form:has(.btn--negative) { display: none; } .btn { background-color: transparent; border: none; color: var(--color-ink); opacity: 1; } .btn:not(:has(input:checked)) { opacity: 0; } } .settings__panel--entropy { display: none; } .settings__user-filter { background: none; margin: 0; padding: 0; /* Hide the "Everyone" switch */ > li:first-child { display: none; } } }