From e91bda7ffc559cfd73b49d525054343f68478b37 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 2 Apr 2025 16:19:56 -0500 Subject: [PATCH] Add cascade layers to all CSS files --- .../stylesheets/{colors.css => _global.css} | 62 +- app/assets/stylesheets/_reset.css | 84 -- app/assets/stylesheets/avatars.css | 110 +-- app/assets/stylesheets/base.css | 206 ++-- app/assets/stylesheets/bubbles.css | 892 +++++++++--------- app/assets/stylesheets/buckets.css | 72 +- app/assets/stylesheets/buttons.css | 344 ++++--- app/assets/stylesheets/cards.css | 772 +++++++-------- app/assets/stylesheets/color-picker.css | 37 + app/assets/stylesheets/comment-content.css | 194 ++-- app/assets/stylesheets/comments.css | 192 ++-- app/assets/stylesheets/dialog.css | 66 +- app/assets/stylesheets/events.css | 276 +++--- app/assets/stylesheets/filters.css | 206 ++-- app/assets/stylesheets/flash.css | 36 +- app/assets/stylesheets/house.css | 317 +++---- app/assets/stylesheets/icons.css | 148 +-- app/assets/stylesheets/inputs.css | 386 ++++---- app/assets/stylesheets/layout.css | 170 ++-- app/assets/stylesheets/lightbox.css | 90 +- app/assets/stylesheets/markdown.css | 50 +- app/assets/stylesheets/notifications.css | 142 +-- app/assets/stylesheets/panels.css | 22 +- app/assets/stylesheets/pins.css | 96 +- app/assets/stylesheets/popup.css | 128 +-- app/assets/stylesheets/reactions.css | 142 +-- app/assets/stylesheets/reset.css | 86 ++ app/assets/stylesheets/syntax.css | 172 ++-- app/assets/stylesheets/tags.css | 48 +- app/assets/stylesheets/terminals.css | 100 +- app/assets/stylesheets/toggles.css | 18 +- app/assets/stylesheets/translations.css | 56 +- app/assets/stylesheets/trays.css | 248 ++--- app/assets/stylesheets/utilities.css | 478 +++++----- app/assets/stylesheets/workflows.css | 110 +-- 35 files changed, 3310 insertions(+), 3246 deletions(-) rename app/assets/stylesheets/{colors.css => _global.css} (73%) delete mode 100644 app/assets/stylesheets/_reset.css create mode 100644 app/assets/stylesheets/color-picker.css create mode 100644 app/assets/stylesheets/reset.css diff --git a/app/assets/stylesheets/colors.css b/app/assets/stylesheets/_global.css similarity index 73% rename from app/assets/stylesheets/colors.css rename to app/assets/stylesheets/_global.css index 79e852697..86fb5513e 100644 --- a/app/assets/stylesheets/colors.css +++ b/app/assets/stylesheets/_global.css @@ -1,4 +1,28 @@ +/* This file should be imported first to set the cascade layer precendence */ +@layer reset, base, components, modules, utilities; + :root { + /* Text */ + --text-xx-small: 0.55rem; + --text-x-small: 0.7rem; + --text-small: 0.8rem; + --text-normal: 1rem; + --text-medium: 1.1rem; + --text-large: 1.5rem; + --text-x-large: 1.8rem; + --text-xx-large: 2.5rem; + + /* Spacing */ + --inline-space: 1ch; + --inline-space-half: calc(var(--inline-space) / 2); + --inline-space-double: calc(var(--inline-space) * 2); + --block-space: 1rem; + --block-space-half: calc(var(--block-space) / 2); + --block-space-double: calc(var(--block-space) * 2); + + /* Components */ + --btn-size: 2.65em; + /* Named color values */ --lch-black: 27.13% 0.1035 284.77; --lch-white: 100% 0 0; @@ -36,7 +60,7 @@ --color-always-white: oklch(var(--lch-always-white)); --color-container: oklch(var(--lch-light-blue)); - /* Redefine named color values for dark mode */ + /* Dark mode */ @media (prefers-color-scheme: dark) { --lch-black: 100% 0 0; --lch-white: 0% 0 0; @@ -53,39 +77,3 @@ --lch-light-blue: 20.62% 0.048 216.62; } } - -.color-picker { - --panel-border-color: var(--bubble-color); - --panel-border-radius: 2em; - --panel-border-size: 2px; - --panel-padding: 0.5em 0.7em; - --panel-size: auto; - - inline-size: auto !important; - inset: 0 auto auto 0; - max-inline-size: var(--panel-size) !important; - position: absolute; - z-index: 2; - - &[open] { - display: flex; - } - - .color-picker__color { - --btn-size: 2em; - } -} - -.color-picker__button { - font-size: 0.75em; - - .cards & { - display: none; - } - - + .panel { - --panel-size: auto; - - inset: 0 0 auto auto; - } -} diff --git a/app/assets/stylesheets/_reset.css b/app/assets/stylesheets/_reset.css deleted file mode 100644 index f4bec04c0..000000000 --- a/app/assets/stylesheets/_reset.css +++ /dev/null @@ -1,84 +0,0 @@ -/* - * Modern CSS Reset - * @link https://github.com/hankchizljaw/modern-css-reset -*/ - -/* Box sizing rules */ -*, -*::before, -*::after { - box-sizing: border-box; -} - -/* Remove default margin */ -body, -h1, -h2, -h3, -h4, -h5, -h6 { - margin: 0; -} - -p, -li, -h1, -h2, -h3, -h4 { - /* Help prevent overflow of long words/names/URLs */ - word-break: break-word; - - /* Optional, not supported for all languages */ - /* hyphens: auto; */ -} - -html, -body { - overflow-x: hidden; -} - -html { - scroll-behavior: smooth; -} - -/* Set core body defaults */ -body { - min-height: 100dvh; - font-family: sans-serif; - font-size: 100%; - line-height: 1.5; - text-rendering: optimizeSpeed; -} - -/* Make images easier to work with */ -img { - display: block; - max-inline-size: 100%; -} - -/* Inherit fonts for inputs and buttons */ -input, -button, -textarea, -select { - font: inherit; -} - -/* Remove all animations and transitions for people that prefer not to see them */ -@media (prefers-reduced-motion: reduce) { - - *, - *::before, - *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - scroll-behavior: auto !important; - } - - html { - scroll-behavior: initial; - } -} diff --git a/app/assets/stylesheets/avatars.css b/app/assets/stylesheets/avatars.css index d3ba51fbf..6d0094f75 100644 --- a/app/assets/stylesheets/avatars.css +++ b/app/assets/stylesheets/avatars.css @@ -1,65 +1,67 @@ -.avatar { - --avatar-border-radius: 50%; - - aspect-ratio: 1; - border-radius: var(--avatar-border-radius); - display: grid; - inline-size: var(--avatar-size, 5ch); - margin: 0; - place-items: center; - - img { - aspect-ratio: 1; - block-size: auto; - border-radius: var(--avatar-border-radius); - grid-area: 1/1; - inline-size: var(--avatar-size, 5ch); - max-inline-size: 100%; - object-fit: cover; - } - - .card & + .avatar { - margin-inline-start: -0.8em; - } -} - -.avatar__group { - --avatar-size: 2.5ch; - - block-size: 5ch; - display: grid; - gap: 1px; - grid-template-columns: 1fr 1fr; - grid-template-rows: min-content; - inline-size: 5ch; - place-content: center; - +@layer components { .avatar { - margin: auto; - } + --avatar-border-radius: 50%; - &:where(:has(> :last-child:nth-child(2))) { - --avatar-size: 3.5ch; + aspect-ratio: 1; + border-radius: var(--avatar-border-radius); + display: grid; + inline-size: var(--avatar-size, 5ch); + margin: 0; + place-items: center; - > :first-child { - margin-block-end: 1.5ch; - margin-inline-end: -0.75ch; + img { + aspect-ratio: 1; + block-size: auto; + border-radius: var(--avatar-border-radius); + grid-area: 1/1; + inline-size: var(--avatar-size, 5ch); + max-inline-size: 100%; + object-fit: cover; } - > :last-child { - margin-block-start: 1.5ch; - margin-inline-start: -0.75ch; + .card & + .avatar { + margin-inline-start: -0.8em; } } - &:where(:has(> :last-child:nth-child(3))) { - > :last-child { - margin-inline: 1.25ch -1.25ch; + .avatar__group { + --avatar-size: 2.5ch; + + block-size: 5ch; + display: grid; + gap: 1px; + grid-template-columns: 1fr 1fr; + grid-template-rows: min-content; + inline-size: 5ch; + place-content: center; + + .avatar { + margin: auto; } + + &:where(:has(> :last-child:nth-child(2))) { + --avatar-size: 3.5ch; + + > :first-child { + margin-block-end: 1.5ch; + margin-inline-end: -0.75ch; + } + + > :last-child { + margin-block-start: 1.5ch; + margin-inline-start: -0.75ch; + } + } + + &:where(:has(> :last-child:nth-child(3))) { + > :last-child { + margin-inline: 1.25ch -1.25ch; + } + } + } + + .avatar__form { + display: grid; + grid-template-columns: 1fr auto 1fr; } } - -.avatar__form { - display: grid; - grid-template-columns: 1fr auto 1fr; -} diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css index 2cc2d56b6..526b502bc 100644 --- a/app/assets/stylesheets/base.css +++ b/app/assets/stylesheets/base.css @@ -1,114 +1,116 @@ -html { - font-size: 100%; +@layer base { + html { + font-size: 100%; - @media (min-width: 100ch) { - font-size: 1.1875rem; - } -} - -body { - --font-sans: system-ui; - --font-serif: ui-serif, serif; - --font-mono: ui-monospace, monospace; - --hover-color: var(--color-subtle-dark); - --hover-size: 0.15rem; - --hover-filter: brightness(1); - - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - -webkit-text-size-adjust: none; - background: var(--color-bg); - color: var(--color-ink); - font-family: var(--font-sans); - line-height: 1.375; - overflow: unset; - scroll-behavior: auto; - text-rendering: optimizeLegibility; - text-size-adjust: none; -} - -a:not([class]) { - --hover-size: 0; - - color: var(--color-link); - text-decoration: underline; - text-decoration-skip-ink: auto; -} - -:is(a, button, input, textarea, .switch, .btn) { - --outline-size: max(2px, 0.08em); - - caret-color: var(--color-link); - text-decoration: none; - touch-action: manipulation; - transition: box-shadow 150ms ease, outline-offset 150ms ease, background-color 150ms ease, opacity 150ms ease, filter 150ms ease; - - /* Hover */ - @media (any-hover: hover) { - &:where(:not(:active):hover) { - box-shadow: 0 0 0 var(--hover-size) var(--hover-color); + @media (min-width: 100ch) { + font-size: 1.1875rem; } } - /* Keyboard navigation */ - &:where(:not(:active)):focus-visible { - outline-width: var(--outline-size); - outline-color: var(--outline-color, currentColor); - outline-offset: var(--outline-offset, calc(var(--outline-size) * 2)); + body { + --font-sans: system-ui; + --font-serif: ui-serif, serif; + --font-mono: ui-monospace, monospace; + --hover-color: var(--color-subtle-dark); + --hover-size: 0.15rem; + --hover-filter: brightness(1); + + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + -webkit-text-size-adjust: none; + background: var(--color-bg); + color: var(--color-ink); + font-family: var(--font-sans); + line-height: 1.375; + overflow: unset; + scroll-behavior: auto; + text-rendering: optimizeLegibility; + text-size-adjust: none; } - &:where(:focus-visible):active { - outline: 0; + a:not([class]) { + --hover-size: 0; + + color: var(--color-link); + text-decoration: underline; + text-decoration-skip-ink: auto; } - /* Pressing */ - &:focus:not(:focus-visible) { - --outline-offset: 0; + :is(a, button, input, textarea, .switch, .btn) { + --outline-size: max(2px, 0.08em); + + caret-color: var(--color-link); + text-decoration: none; + touch-action: manipulation; + transition: box-shadow 150ms ease, outline-offset 150ms ease, background-color 150ms ease, opacity 150ms ease, filter 150ms ease; + + /* Hover */ + @media (any-hover: hover) { + &:where(:not(:active):hover) { + box-shadow: 0 0 0 var(--hover-size) var(--hover-color); + } + } + + /* Keyboard navigation */ + &:where(:not(:active)):focus-visible { + outline-width: var(--outline-size); + outline-color: var(--outline-color, currentColor); + outline-offset: var(--outline-offset, calc(var(--outline-size) * 2)); + } + + &:where(:focus-visible):active { + outline: 0; + } + + /* Pressing */ + &:focus:not(:focus-visible) { + --outline-offset: 0; + } + + /* Disabled */ + &:where([disabled]):not(:hover):not(:active) { + cursor: not-allowed; + filter: brightness(0.75); + } } - /* Disabled */ - &:where([disabled]):not(:hover):not(:active) { - cursor: not-allowed; - filter: brightness(0.75); - } -} - -::selection { - background-color: var(--color-selected); -} - -:where(ul, ol):where([role="list"]) { - margin: 0; - padding: 0; - list-style: none; -} - -video { - max-inline-size: 100%; -} - -/* Printing */ -@page { - margin: 1in; -} - -@media print { - .no-print { - display: none; - } -} - -/* Turbo */ -turbo-frame { - display: contents; -} - -/* Nicer scrollbars on Chrome 29+. This is intended for Windows machines, but */ -/* there's not a way to target Windows using CSS, so Chrome on Mac will have */ -/* slightly thinner scrollbars than normal. #C1C1C1 is the default color on Macs. */ -@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { - * { - scrollbar-color: #C1C1C1 transparent; - scrollbar-width: thin; + ::selection { + background-color: var(--color-selected); + } + + :where(ul, ol):where([role="list"]) { + margin: 0; + padding: 0; + list-style: none; + } + + video { + max-inline-size: 100%; + } + + /* Printing */ + @page { + margin: 1in; + } + + @media print { + .no-print { + display: none; + } + } + + /* Turbo */ + turbo-frame { + display: contents; + } + + /* Nicer scrollbars on Chrome 29+. This is intended for Windows machines, but */ + /* there's not a way to target Windows using CSS, so Chrome on Mac will have */ + /* slightly thinner scrollbars than normal. #C1C1C1 is the default color on Macs. */ + @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { + * { + scrollbar-color: #C1C1C1 transparent; + scrollbar-width: thin; + } } } diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css index 88a47c231..669a99f80 100644 --- a/app/assets/stylesheets/bubbles.css +++ b/app/assets/stylesheets/bubbles.css @@ -8,484 +8,486 @@ --bubble-size-five: 22cqi; } -.bubbles { - --column-gap: 2cqi; - --row-gap: 1cqi; +@layer components { + .bubbles { + --column-gap: 2cqi; + --row-gap: 1cqi; - margin-block: clamp(var(--block-space), 3%, calc(var(--block-space) * 2)); + margin-block: clamp(var(--block-space), 3%, calc(var(--block-space) * 2)); - > * { - flex-shrink: 1; - } -} - -.bubble { - --bubble-background: radial-gradient(circle at center, color(from var(--bubble-color) srgb r g b / 0.25), color(from var(--bubble-color) srgb r g b / 0.05)); - --bubble-border-width: 0.2rem; - --hover-size: 0; - - aspect-ratio: 1; - block-size: var(--bubble-size); - color: var(--bubble-color, currentColor); - container-type: inline-size; - display: grid; - place-items: center; - position: relative; - transition: 0.2s ease; - - .bubbles & { - &:nth-child(1) { order: 5; } - &:nth-child(2) { order: 3; } - &:nth-child(3) { order: 3; } - &:nth-child(4) { order: 7; } - &:nth-child(5) { order: 9; } - &:nth-child(6) { order: 5; } - &:nth-child(7) { order: 4; } - &:nth-child(8) { order: 9; } - &:nth-child(9) { order: 3; } - &:nth-child(10) { order: 7; } - &:nth-of-type(n+6) { - align-self: start; + > * { + flex-shrink: 1; } } - [data-turbo-preview] & { animation: none; } - - > * { - grid-area: 1/1; - } - - .bubble__perma & { - --bubble-border-width: 0.3rem; - --bubble-size: 40dvh !important; - - z-index: 1; - } -} -.bubble__detail { - --bubble-border-color: color-mix(in srgb, var(--bubble-color) 30%, var(--color-bg)); - --bubble-border-width: 0.15em; - - aspect-ratio: 1; - background: var(--color-bg); - block-size: auto; - border: var(--bubble-border-width) solid var(--bubble-border-color); - border-radius: var(--bubble-shape); - display: flex; - font-size: 5cqi; - font-weight: 800; - line-height: 1; - max-inline-size: 18ch; - padding: 1em; - place-content: center; - place-items: center; - position: absolute; - scale: 1; - text-overflow: ellipsis; - transform: none; - transition: transform 200ms ease-out; - white-space: nowrap; - z-index: 1; - - a { - color: var(--bubble-color); - } - - &.bubble__assignee { - font-size: 4.5cqi; - inset: 8em auto auto -1.7em; - padding: 0.2em; - - + & { - inset: 4em auto auto -1em; - - + & { - inset: 1em auto auto 2em; - } - } - - .avatar { - border-radius: var(--bubble-shape); - } - - @media (hover: hover) { - .bubbles .bubble:not(.popped):hover & { - transform: translate(0, -1rem); - } - - .bubbles .bubble:not(.popped):hover & + & { - transform: translate(1rem, -1rem); - } - - .bubbles .bubble:not(.popped):hover & + & + & { - transform: translate(1.5rem, -0.5rem);; - } - } - - .assignee__name { - display: none; - - .bubble__perma & { - color: var(--bubble-color); - display: inline-block; - font-size: 0.9em; - font-weight: normal; - inline-size: 15ch; - inset: 0.3em 3.6em auto auto; - position: absolute; - text-align: end; - white-space: normal; - } - } - } - - &.bubble__comments { - --arrow-size: 1.5em; - --border-size: var(--bubble-border-width); - - aspect-ratio: 9/6; - inset: auto auto 2em -1em; - - &::before { - aspect-ratio: 2; - background: var(--bubble-border-color); - clip-path: polygon(50% 100%, 100% 0, 0 0); - inline-size: var(--arrow-size); - content: ""; - display: block; - inset-block-end: auto; - inset-block-start: 94%; - inset-inline-start: 66%; - position: absolute; - transform: translateX(-50%) rotate(-20deg); - } - - &::after { - aspect-ratio: 2; - background: var(--color-bg); - clip-path: polygon(50% 100%, 100% 0, 0 0); - inline-size: var(--arrow-size); - content: ""; - display: block; - inset-block-end: auto; - inset-block-start: calc(94% - var(--border-size) * 1.5); - inset-inline-start: 64%; - position: absolute; - transform: translateX(-50%) rotate(-20deg); - } - - @media (hover: hover) { - .bubbles .bubble:not(.popped):hover & { - transform: translate(-0.5rem, -2rem); - } - } - } - - &.bubble__date { - --rotation: -45deg; - - aspect-ratio: 5/7; - cursor: pointer; - inset: 1cqb 1cqi auto auto; - transform: rotate(var(--rotation)); - - .bubble__date-text { - transform: rotate(calc(var(--rotation) * -1)); - } - - @media (hover: hover) { - .bubbles .bubble:not(.popped):hover & { - transform: rotate(calc(var(--rotation) + var(--bubble-shift) * 1)) translate(0rem, 0.5rem); - } - } - } - - @media (hover: hover) { - .bubbles .bubble:not(.popped):hover & { - transform: translate(1rem, 1rem); - } - - .bubbles .bubble:not(.popped):hover & + & { - transform: translate(0, -1rem); - } - - .bubbles .bubble:not(.popped):hover & + & + & { - transform: translate(-1rem, -1rem); - } - } -} - -.bubble__image { - border: none; - border-radius: var(--bubble-shape); - block-size: 100cqi; - inline-size: 100cqi; - overflow: hidden; - pointer-events: none; - transform: rotate(var(--bubble-rotate)) scale(0.92); - transition: 0.2s ease; - - @media (hover: hover) { - .bubbles .bubble:not(.popped):hover & { - transform: rotate(calc(var(--bubble-rotate) + var(--bubble-shift))) scale(0.9); - } - } - - img { - block-size: 100cqi; - inline-size: 100cqi; - max-inline-size: none; - object-fit: cover; - transform: rotate(calc(var(--bubble-rotate) * -1)) scale(1.1); - - &:is([src=""]) { - display: none; - } - } - - :is(.bubbles, .bubbles-list) .bubble--wobble & { - animation: wobble-img 1200ms normal forwards ease-out; - } -} - -.bubble__link { - content: ""; - inset: 0; - position: absolute; - z-index: -1; - - .bubbles & { - z-index: 1; - } -} - -.bubbles-list { - --bubble-border-width: 0.15rem; - --bubble-shift: 15deg; - --bubble-size: 1.8em; - --divider-offset: 1.2em; - --hover-size: 0; - - margin-inline: auto; - - @media (min-width: 150ch) { - margin-inline: var(--tray-size); - } - .bubble { - order: 0; - } + --bubble-background: radial-gradient(circle at center, color(from var(--bubble-color) srgb r g b / 0.25), color(from var(--bubble-color) srgb r g b / 0.05)); + --bubble-border-width: 0.2rem; + --hover-size: 0; - .bubble__title-link { - color: var(--color-txt); - text-decoration: none; - } + aspect-ratio: 1; + block-size: var(--bubble-size); + color: var(--bubble-color, currentColor); + container-type: inline-size; + display: grid; + place-items: center; + position: relative; + transition: 0.2s ease; - ul { - li { - border-radius: 0; - list-style: none; - padding: 0.5em var(--inline-space); - position: relative; - transition: background-color 200ms ease-out; + .bubbles & { + &:nth-child(1) { order: 5; } + &:nth-child(2) { order: 3; } + &:nth-child(3) { order: 3; } + &:nth-child(4) { order: 7; } + &:nth-child(5) { order: 9; } + &:nth-child(6) { order: 5; } + &:nth-child(7) { order: 4; } + &:nth-child(8) { order: 9; } + &:nth-child(9) { order: 3; } + &:nth-child(10) { order: 7; } + &:nth-of-type(n+6) { + align-self: start; + } } - &:not(.dragging) { + [data-turbo-preview] & { animation: none; } + + > * { + grid-area: 1/1; + } + + .bubble__perma & { + --bubble-border-width: 0.3rem; + --bubble-size: 40dvh !important; + + z-index: 1; + } + } + .bubble__detail { + --bubble-border-color: color-mix(in srgb, var(--bubble-color) 30%, var(--color-bg)); + --bubble-border-width: 0.15em; + + aspect-ratio: 1; + background: var(--color-bg); + block-size: auto; + border: var(--bubble-border-width) solid var(--bubble-border-color); + border-radius: var(--bubble-shape); + display: flex; + font-size: 5cqi; + font-weight: 800; + line-height: 1; + max-inline-size: 18ch; + padding: 1em; + place-content: center; + place-items: center; + position: absolute; + scale: 1; + text-overflow: ellipsis; + transform: none; + transition: transform 200ms ease-out; + white-space: nowrap; + z-index: 1; + + a { + color: var(--bubble-color); + } + + &.bubble__assignee { + font-size: 4.5cqi; + inset: 8em auto auto -1.7em; + padding: 0.2em; + + + & { + inset: 4em auto auto -1em; + + + & { + inset: 1em auto auto 2em; + } + } + + .avatar { + border-radius: var(--bubble-shape); + } + + @media (hover: hover) { + .bubbles .bubble:not(.popped):hover & { + transform: translate(0, -1rem); + } + + .bubbles .bubble:not(.popped):hover & + & { + transform: translate(1rem, -1rem); + } + + .bubbles .bubble:not(.popped):hover & + & + & { + transform: translate(1.5rem, -0.5rem);; + } + } + + .assignee__name { + display: none; + + .bubble__perma & { + color: var(--bubble-color); + display: inline-block; + font-size: 0.9em; + font-weight: normal; + inline-size: 15ch; + inset: 0.3em 3.6em auto auto; + position: absolute; + text-align: end; + white-space: normal; + } + } + } + + &.bubble__comments { + --arrow-size: 1.5em; + --border-size: var(--bubble-border-width); + + aspect-ratio: 9/6; + inset: auto auto 2em -1em; + + &::before { + aspect-ratio: 2; + background: var(--bubble-border-color); + clip-path: polygon(50% 100%, 100% 0, 0 0); + inline-size: var(--arrow-size); + content: ""; + display: block; + inset-block-end: auto; + inset-block-start: 94%; + inset-inline-start: 66%; + position: absolute; + transform: translateX(-50%) rotate(-20deg); + } + + &::after { + aspect-ratio: 2; + background: var(--color-bg); + clip-path: polygon(50% 100%, 100% 0, 0 0); + inline-size: var(--arrow-size); + content: ""; + display: block; + inset-block-end: auto; + inset-block-start: calc(94% - var(--border-size) * 1.5); + inset-inline-start: 64%; + position: absolute; + transform: translateX(-50%) rotate(-20deg); + } + + @media (hover: hover) { + .bubbles .bubble:not(.popped):hover & { + transform: translate(-0.5rem, -2rem); + } + } + } + + &.bubble__date { + --rotation: -45deg; + + aspect-ratio: 5/7; + cursor: pointer; + inset: 1cqb 1cqi auto auto; + transform: rotate(var(--rotation)); + + .bubble__date-text { + transform: rotate(calc(var(--rotation) * -1)); + } + + @media (hover: hover) { + .bubbles .bubble:not(.popped):hover & { + transform: rotate(calc(var(--rotation) + var(--bubble-shift) * 1)) translate(0rem, 0.5rem); + } + } + } + + @media (hover: hover) { + .bubbles .bubble:not(.popped):hover & { + transform: translate(1rem, 1rem); + } + + .bubbles .bubble:not(.popped):hover & + & { + transform: translate(0, -1rem); + } + + .bubbles .bubble:not(.popped):hover & + & + & { + transform: translate(-1rem, -1rem); + } + } + } + + .bubble__image { + border: none; + border-radius: var(--bubble-shape); + block-size: 100cqi; + inline-size: 100cqi; + overflow: hidden; + pointer-events: none; + transform: rotate(var(--bubble-rotate)) scale(0.92); + transition: 0.2s ease; + + @media (hover: hover) { + .bubbles .bubble:not(.popped):hover & { + transform: rotate(calc(var(--bubble-rotate) + var(--bubble-shift))) scale(0.9); + } + } + + img { + block-size: 100cqi; + inline-size: 100cqi; + max-inline-size: none; + object-fit: cover; + transform: rotate(calc(var(--bubble-rotate) * -1)) scale(1.1); + + &:is([src=""]) { + display: none; + } + } + + :is(.bubbles, .bubbles-list) .bubble--wobble & { + animation: wobble-img 1200ms normal forwards ease-out; + } + } + + .bubble__link { + content: ""; + inset: 0; + position: absolute; + z-index: -1; + + .bubbles & { + z-index: 1; + } + } + + .bubbles-list { + --bubble-border-width: 0.15rem; + --bubble-shift: 15deg; + --bubble-size: 1.8em; + --divider-offset: 1.2em; + --hover-size: 0; + + margin-inline: auto; + + @media (min-width: 150ch) { + margin-inline: var(--tray-size); + } + + .bubble { + order: 0; + } + + .bubble__title-link { + color: var(--color-txt); + text-decoration: none; + } + + ul { li { - @media (hover: hover) { - &:hover { - background-color: color(from var(--bubble-color) srgb r g b / 0.15); - border: 0; + border-radius: 0; + list-style: none; + padding: 0.5em var(--inline-space); + position: relative; + transition: background-color 200ms ease-out; + } + + &:not(.dragging) { + li { + @media (hover: hover) { + &:hover { + background-color: color(from var(--bubble-color) srgb r g b / 0.15); + border: 0; + } } } } } - } - .avatar { - --avatar-size: 1.1em; + .avatar { + --avatar-size: 1.1em; - > * { - font-size: 0.5em; + > * { + font-size: 0.5em; + } } } -} -.bubble__title-text { - font-weight: 700; - flex-grow: 1; - letter-spacing: -0.015em; - white-space: nowrap; - - .drafted & { - color: color(from var(--color-ink) srgb r g b / 0.5); - } - - &::after { - border-block-end: 1px dotted var(--color-subtle-dark); - content: ""; + .bubble__title-text { + font-weight: 700; flex-grow: 1; - margin-block-end: 0.25em; - } -} + letter-spacing: -0.015em; + white-space: nowrap; -.bubble__tags { - --row-gap: 0; + .drafted & { + color: color(from var(--color-ink) srgb r g b / 0.5); + } - font-size: var(--text-small); - margin-block-start: 0.3cqb; - max-block-size: 4lh; - max-inline-size: 75cqi; - overflow: hidden; - text-overflow: ellipsis; - - .bubble__perma & { - font-size: var(--text-medium); - } -} - -.bubble__tag { - font-weight: 700; - max-inline-size: 75cqi; -} - -.bubble__title { - align-items: center; - display: flex; - flex-direction: column; - justify-content: center; - margin: auto; - max-block-size: 90cqi; - max-inline-size: 70cqi; - - .bubbles & { - pointer-events: none; + &::after { + border-block-end: 1px dotted var(--color-subtle-dark); + content: ""; + flex-grow: 1; + margin-block-end: 0.25em; + } } - a { - color: var(--splat-color); + .bubble__tags { + --row-gap: 0; + + font-size: var(--text-small); + margin-block-start: 0.3cqb; + max-block-size: 4lh; + max-inline-size: 75cqi; + overflow: hidden; + text-overflow: ellipsis; + + .bubble__perma & { + font-size: var(--text-medium); + } + } + + .bubble__tag { + font-weight: 700; + max-inline-size: 75cqi; + } + + .bubble__title { + align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + margin: auto; + max-block-size: 90cqi; + max-inline-size: 70cqi; + + .bubbles & { + pointer-events: none; + } + + a { + color: var(--splat-color); + + &.bubble__title-rendered { + -webkit-line-clamp: var(--lines, 4); + -webkit-box-orient: vertical; + display: -webkit-box; + font-size: 9cqi; + font-weight: 800; + line-height: 1.2; + overflow: hidden; + text-overflow: clip; + white-space: normal; + } + } + + textarea { + --input-color: var(--bubble-color); + --input-border-radius: 0; - &.bubble__title-rendered { - -webkit-line-clamp: var(--lines, 4); - -webkit-box-orient: vertical; - display: -webkit-box; font-size: 9cqi; font-weight: 800; line-height: 1.2; - overflow: hidden; - text-overflow: clip; - white-space: normal; + + &::selection { + background-color: var(--bubble-color); + color: var(--color-ink-reversed); + } + } + + @media (hover: hover) { + .bubble:has(.bubble__image img:not([src=""])):hover & { + color: var(--color-ink-reversed); + text-shadow: 0 0 0.2em var(--bubble-color), 0 0 0.2em var(--bubble-color), 0 0 0.2em var(--bubble-color); + position: relative; + z-index: 1; + } } } - textarea { - --input-color: var(--bubble-color); - --input-border-radius: 0; - - font-size: 9cqi; - font-weight: 800; - line-height: 1.2; - - &::selection { - background-color: var(--bubble-color); - color: var(--color-ink-reversed); - } - } - - @media (hover: hover) { - .bubble:has(.bubble__image img:not([src=""])):hover & { - color: var(--color-ink-reversed); - text-shadow: 0 0 0.2em var(--bubble-color), 0 0 0.2em var(--bubble-color), 0 0 0.2em var(--bubble-color); - position: relative; - z-index: 1; - } - } -} - -.bubble__shape { - background: var(--bubble-background); - block-size: var(--bubble-size, 1.2em); - border-color: var(--bubble-border-color, color-mix(in srgb, var(--bubble-color) 15%, var(--color-bg))); - border-radius: var(--bubble-shape); - border-style: var(--bubble-border-style, solid); - border-width: 1px; - inline-size: var(--bubble-size, 1.2em); - pointer-events: none; - position: relative; - transform: rotate(var(--bubble-rotate)); - transition: 200ms ease-out; - z-index: 0; - - @media (prefers-color-scheme: dark) { - --bubble-background: radial-gradient(circle at center, color(from var(--bubble-color) srgb r g b / 0.45), color(from var(--bubble-color) srgb r g b / 0.15)); - --bubble-border-color: color-mix(in srgb, var(--bubble-color) 30%, var(--color-bg)); - } - - .bubble & { - --bubble-size: 100%; - } - - .drafted & { - --bubble-border-style: dashed; - } - - :is(.bubbles, .bubbles-list) .bubble--wobble & { - animation: wobble 1200ms normal forwards ease-out; - } - - .bubble--wobble:nth-child(even) & { - animation-name: wobble-alt; - animation-duration: 900ms; - } - - .popped & { - display: none; - } - - .event &, - .bucket &, - .bubbles-list & { - --bubble-background: color-mix(in srgb, var(--bubble-color) 30%, var(--color-bg)); - --bubble-border-color: color-mix(in srgb, var(--bubble-color) 40%, var(--color-bg)) - } -} - -.bubble__actions-container { - background-color: color-mix(in srgb, var(--bubble-color) 20%, var(--color-bg)); - margin-block-start: -0.7em; - position: relative; - z-index: 1; - - .btn--plain { - --btn-color: var(--bubble-color); - - text-decoration: underline; - } - - .bubble__pop-message { - color: var(--bubble-color); - } -} - -.bubble__splat { - display: none; - pointer-events: none; - transform: rotate(var(--bubble-rotate)); - - .popped & { - display: block; - fill: color-mix(in srgb, var(--bubble-color) 20%, var(--color-bg)); - position: absolute; - scale: 130%; - z-index: -1; - } - - .bubbles-list & { - block-size: var(--bubble-size); - fill: color-mix(in srgb, var(--bubble-color) 35%, var(--color-bg)); - inline-size: var(--bubble-size); + .bubble__shape { + background: var(--bubble-background); + block-size: var(--bubble-size, 1.2em); + border-color: var(--bubble-border-color, color-mix(in srgb, var(--bubble-color) 15%, var(--color-bg))); + border-radius: var(--bubble-shape); + border-style: var(--bubble-border-style, solid); + border-width: 1px; + inline-size: var(--bubble-size, 1.2em); + pointer-events: none; position: relative; - scale: 1; + transform: rotate(var(--bubble-rotate)); + transition: 200ms ease-out; z-index: 0; + + @media (prefers-color-scheme: dark) { + --bubble-background: radial-gradient(circle at center, color(from var(--bubble-color) srgb r g b / 0.45), color(from var(--bubble-color) srgb r g b / 0.15)); + --bubble-border-color: color-mix(in srgb, var(--bubble-color) 30%, var(--color-bg)); + } + + .bubble & { + --bubble-size: 100%; + } + + .drafted & { + --bubble-border-style: dashed; + } + + :is(.bubbles, .bubbles-list) .bubble--wobble & { + animation: wobble 1200ms normal forwards ease-out; + } + + .bubble--wobble:nth-child(even) & { + animation-name: wobble-alt; + animation-duration: 900ms; + } + + .popped & { + display: none; + } + + .event &, + .bucket &, + .bubbles-list & { + --bubble-background: color-mix(in srgb, var(--bubble-color) 30%, var(--color-bg)); + --bubble-border-color: color-mix(in srgb, var(--bubble-color) 40%, var(--color-bg)) + } + } + + .bubble__actions-container { + background-color: color-mix(in srgb, var(--bubble-color) 20%, var(--color-bg)); + margin-block-start: -0.7em; + position: relative; + z-index: 1; + + .btn--plain { + --btn-color: var(--bubble-color); + + text-decoration: underline; + } + + .bubble__pop-message { + color: var(--bubble-color); + } + } + + .bubble__splat { + display: none; + pointer-events: none; + transform: rotate(var(--bubble-rotate)); + + .popped & { + display: block; + fill: color-mix(in srgb, var(--bubble-color) 20%, var(--color-bg)); + position: absolute; + scale: 130%; + z-index: -1; + } + + .bubbles-list & { + block-size: var(--bubble-size); + fill: color-mix(in srgb, var(--bubble-color) 35%, var(--color-bg)); + inline-size: var(--bubble-size); + position: relative; + scale: 1; + z-index: 0; + } } } diff --git a/app/assets/stylesheets/buckets.css b/app/assets/stylesheets/buckets.css index 76f0abc83..dc7eee01e 100644 --- a/app/assets/stylesheets/buckets.css +++ b/app/assets/stylesheets/buckets.css @@ -1,38 +1,40 @@ -.bucket { - inline-size: min(35ch, 40%); - line-height: 1.2; +@layer components { + .bucket { + inline-size: min(35ch, 40%); + line-height: 1.2; - mark { - background-color: transparent; - color: var(--color-link); - text-decoration: underline; + mark { + background-color: transparent; + color: var(--color-link); + text-decoration: underline; + } + } + + .buckets { + --gap: 2cqi; + --hover-size: 0; + --column-gap: var(--gap); + --row-gap: var(--gap); + + list-style: none; + padding: var(--gap); + } + + .bucket__button { + position: absolute; + inset: calc((var(--btn-size) * -1) - 2cqi) 1cqi auto auto; + } + + .bucket__bubbles { + --border-radius: 1.5em; + + margin-block: 0; + max-inline-size: 100%; + padding: 1cqi; + } + + .bubbles__container { + aspect-ratio: 18 / 9; + container-type: inline-size; } } - -.buckets { - --gap: 2cqi; - --hover-size: 0; - --column-gap: var(--gap); - --row-gap: var(--gap); - - list-style: none; - padding: var(--gap); -} - -.bucket__button { - position: absolute; - inset: calc((var(--btn-size) * -1) - 2cqi) 1cqi auto auto; -} - -.bucket__bubbles { - --border-radius: 1.5em; - - margin-block: 0; - max-inline-size: 100%; - padding: 1cqi; -} - -.bubbles__container { - aspect-ratio: 18 / 9; - container-type: inline-size; -} diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index 2969db1dc..9caf9d731 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -1,192 +1,190 @@ -:root { - --btn-size: 2.65em; -} +@layer components { + .btn { + --transition: 300ms ease; + --btn-border-radius: 2em; -.btn { - --transition: 300ms ease; - --btn-border-radius: 2em; + align-items: center; + background-color: var(--btn-background, var(--color-bg)); + border-radius: var(--btn-border-radius); + border: var(--btn-border-size, 1px) solid var(--btn-border-color, var(--color-subtle-dark)); + color: var(--btn-color, var(--color-ink)); + cursor: pointer; + display: inline-flex; + font-size: 1em; + font-weight: var(--btn-font-weight, 600); + gap: var(--btn-gap, 0.5em); + justify-content: center; + padding: var(--btn-padding, 0.5em 1.1em); + pointer-events: auto; + transition: + background-color var( --transition), + border var( --transition), + color var( --transition), + filter var( --transition), + opacity var( --transition), + scale var( --transition); - align-items: center; - background-color: var(--btn-background, var(--color-bg)); - border-radius: var(--btn-border-radius); - border: var(--btn-border-size, 1px) solid var(--btn-border-color, var(--color-subtle-dark)); - color: var(--btn-color, var(--color-ink)); - cursor: pointer; - display: inline-flex; - font-size: 1em; - font-weight: var(--btn-font-weight, 600); - gap: var(--btn-gap, 0.5em); - justify-content: center; - padding: var(--btn-padding, 0.5em 1.1em); - pointer-events: auto; - transition: - background-color var( --transition), - border var( --transition), - color var( --transition), - filter var( --transition), - opacity var( --transition), - scale var( --transition); + /* Default icon styles */ + &:where(:has(.icon)) { + text-align: start; - /* Default icon styles */ - &:where(:has(.icon)) { - text-align: start; - - .icon { - --icon-size: var(--btn-icon-size, 1.3em); - } - } - - &:where(.avatar) { - --btn-border-radius: var(--avatar-border-radius); - --btn-padding: 0; - --btn-border-size: 0; - --hover-size: 0; - - aspect-ratio: 1; - block-size: var(--btn-size); - display: grid; - inline-size: var(--btn-size); - justify-content: unset; - place-items: center; - - > * { - grid-area: 1/1; - } - - img { - --icon-size: 100%; - block-size: 100%; - inline-size: 100%; - max-inline-size: unset; - } - - @media (any-hover: hover) { - &:where(:not(:active):hover) { - filter: brightness(0.7); + .icon { + --icon-size: var(--btn-icon-size, 1.3em); } } - } - /* Circle buttons */ - &.btn--circle, - &:where(:has(.for-screen-reader):has(.icon)) { - --btn-border-radius: 50%; - --btn-padding: 0; - - aspect-ratio: 1; - block-size: var(--btn-size); - display: grid; - inline-size: var(--btn-size); - place-items: center; - - > * { - grid-area: 1/1; - } - } - - /* With radios and checkboxes */ - &:has(input[type=radio]), - &:has(input[type=checkbox]) { - position: relative; - - :is(input[type=radio]), - :is(input[type=checkbox]) { + &:where(.avatar) { + --btn-border-radius: var(--avatar-border-radius); + --btn-padding: 0; + --btn-border-size: 0; --hover-size: 0; - appearance: none; - border-radius: var(--btn-border-radius); - cursor: pointer; - display: flex; - inset: 0; - margin: 0; - padding: 0; - position: absolute; + aspect-ratio: 1; + block-size: var(--btn-size); + display: grid; + inline-size: var(--btn-size); + justify-content: unset; + place-items: center; + + > * { + grid-area: 1/1; + } + + img { + --icon-size: 100%; + block-size: 100%; + inline-size: 100%; + max-inline-size: unset; + } + + @media (any-hover: hover) { + &:where(:not(:active):hover) { + filter: brightness(0.7); + } + } } - .checked { + /* Circle buttons */ + &.btn--circle, + &:where(:has(.for-screen-reader):has(.icon)) { + --btn-border-radius: 50%; + --btn-padding: 0; + + aspect-ratio: 1; + block-size: var(--btn-size); + display: grid; + inline-size: var(--btn-size); + place-items: center; + + > * { + grid-area: 1/1; + } + } + + /* With radios and checkboxes */ + &:has(input[type=radio]), + &:has(input[type=checkbox]) { + position: relative; + + :is(input[type=radio]), + :is(input[type=checkbox]) { + --hover-size: 0; + + appearance: none; + border-radius: var(--btn-border-radius); + cursor: pointer; + display: flex; + inset: 0; + margin: 0; + padding: 0; + position: absolute; + } + + .checked { + display: none; + } + } + + &:has(input:checked) { + --btn-background: var(--color-ink); + --btn-color: var(--color-ink-reversed); + --outline-color: var(--color-ink); + + .checked { + display: block; + } + } + + &[disabled], + &:has([disabled]), + [disabled] &[type=submit], + &[type=submit]:disabled { + cursor: not-allowed; + opacity: 0.3; + pointer-events: none; + } + + @media print { display: none; } } - &:has(input:checked) { - --btn-background: var(--color-ink); + /* Variants */ + .btn--link { + --btn-background: var(--color-link); --btn-color: var(--color-ink-reversed); - --outline-color: var(--color-ink); + --outline-color: var(--color-link); + } - .checked { - display: block; + .btn--negative { + --btn-background: var(--color-negative); + --btn-color: var(--color-ink-reversed); + --outline-color: var(--color-negative); + } + + .btn--placeholder { + pointer-events: none; + visibility: hidden; + } + + .btn--plain { + --btn-border-radius: 0.5em; + --btn-border-size: 0; + --btn-icon-size: 100%; + --btn-padding: 0; + --hover-size: 0; + --outline-size: 0; + } + + .btn--positive { + --btn-background: var(--color-positive); + --btn-color: var(--color-ink-reversed); + --outline-color: var(--color-positive); + } + + .btn--remove { + --btn-icon-size: 0.7em; + } + + .btn--reversed { + --btn-background: var(--color-ink); + --btn-color: var(--color-bg); + --outline-color: var(--color-ink); + } + + :is(.btn--link, .btn--negative, .btn--positive, .btn--reversed) { + --btn-border-color: var(--color-bg); + } + + .btn--small { + font-size: 0.8em; + } + + .btn--success { + animation: success 1s ease-out; + + .icon { + animation: zoom-fade 300ms ease-out; } } - - &[disabled], - &:has([disabled]), - [disabled] &[type=submit], - &[type=submit]:disabled { - cursor: not-allowed; - opacity: 0.3; - pointer-events: none; - } - - @media print { - display: none; - } -} - -/* Variants */ -.btn--link { - --btn-background: var(--color-link); - --btn-color: var(--color-ink-reversed); - --outline-color: var(--color-link); -} - -.btn--negative { - --btn-background: var(--color-negative); - --btn-color: var(--color-ink-reversed); - --outline-color: var(--color-negative); -} - -.btn--placeholder { - pointer-events: none; - visibility: hidden; -} - -.btn--plain { - --btn-border-radius: 0.5em; - --btn-border-size: 0; - --btn-icon-size: 100%; - --btn-padding: 0; - --hover-size: 0; - --outline-size: 0; -} - -.btn--positive { - --btn-background: var(--color-positive); - --btn-color: var(--color-ink-reversed); - --outline-color: var(--color-positive); -} - -.btn--remove { - --btn-icon-size: 0.7em; -} - -.btn--reversed { - --btn-background: var(--color-ink); - --btn-color: var(--color-bg); - --outline-color: var(--color-ink); -} - -:is(.btn--link, .btn--negative, .btn--positive, .btn--reversed) { - --btn-border-color: var(--color-bg); -} - -.btn--small { - font-size: 0.8em; -} - -.btn--success { - animation: success 1s ease-out; - - .icon { - animation: zoom-fade 300ms ease-out; - } } diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index 7342da211..1056f387e 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -1,456 +1,458 @@ -.cards { - --block-space: 2cqi; - --container-gap: var(--block-space); - --container-padding: calc(var(--block-space) * 1.5); +@layer components { + .cards { + --block-space: 2cqi; + --container-gap: var(--block-space); + --container-padding: calc(var(--block-space) * 1.5); - container-type: inline-size; - padding: var(--block-space-half) 0; - justify-content: start; + container-type: inline-size; + padding: var(--block-space-half) 0; + justify-content: start; - :where(.card) { - --block-space: 1em; - --block-space-half: 0.5em; - --card-size: calc(100% - (var(--container-padding) * 2) / 2); - --text-xx-large: 2em; + :where(.card) { + --block-space: 1em; + --block-space-half: 0.5em; + --card-size: calc(100% - (var(--container-padding) * 2) / 2); + --text-xx-large: 2em; - font-size: 1.8cqi; - flex: 0 1 var(--card-size); - inline-size: var(--card-size); - margin: var(--block-space) auto calc(var(--block-space) * 1.5); - } - - :is(.card--mini) { - --text-xx-large: 1.6em; - --text-small: 1.1em; - - aspect-ratio: unset; - line-height: 1.2; - padding: calc(var(--block-space) * 1.5) var(--block-space); - margin: var(--block-space) auto calc(var(--block-space) * 1.5); - - .card__title { - margin-block-start: 0.1em; - min-block-size: 0; + font-size: 1.8cqi; + flex: 0 1 var(--card-size); + inline-size: var(--card-size); + margin: var(--block-space) auto calc(var(--block-space) * 1.5); } - .card__stuff { + :is(.card--mini) { + --text-xx-large: 1.6em; + --text-small: 1.1em; + + aspect-ratio: unset; + line-height: 1.2; + padding: calc(var(--block-space) * 1.5) var(--block-space); + margin: var(--block-space) auto calc(var(--block-space) * 1.5); + + .card__title { + margin-block-start: 0.1em; + min-block-size: 0; + } + + .card__stuff { + .avatar { + block-size: 2em; + inline-size: 2em; + margin: 0; + } + } + + .card__body { + padding-inline: 0; + } + .avatar { - block-size: 2em; - inline-size: 2em; - margin: 0; + block-size: 3em; + inline-size: 3em; + margin-block-start: -0.2em; + } + + .card__tags { + font-size: var(--text-small); } } - - .card__body { - padding-inline: 0; - } - - .avatar { - block-size: 3em; - inline-size: 3em; - margin-block-start: -0.2em; - } + } - .card__tags { - font-size: var(--text-small); + .cards--columns { + border-block: 1px solid var(--color-subtle); + display: grid; + grid-template-columns: repeat(2, 50%); + margin: auto; + max-inline-size: 100ch; + padding-block: var(--block-space-half); + + .card { + aspect-ratio: unset; + z-index: unset; } } -} - -.cards--columns { - border-block: 1px solid var(--color-subtle); - display: grid; - grid-template-columns: repeat(2, 50%); - margin: auto; - max-inline-size: 100ch; - padding-block: var(--block-space-half); .card { - aspect-ratio: unset; - z-index: unset; - } -} + --border-radius: 0.2em; -.card { - --border-radius: 0.2em; - - aspect-ratio: 2/0.95; - background-color: color-mix(in srgb, var(--bubble-color) 4%, var(--color-bg)); - color: color-mix(in srgb, var(--bubble-color) 40%, var(--color-ink)); - max-inline-size: 75ch; - z-index: 1; - - .card__container & { - inline-size: calc(100dvw - var(--actions-inline-inset) * 2 - var(--btn-size) * 2); - } -} - -.card__actions { - position: absolute; - inset: var(--actions-block-inset) auto auto calc(var(--actions-inline-inset) * -1); - z-index: 0; - - &:has(dialog[open]) { + aspect-ratio: 2/0.95; + background-color: color-mix(in srgb, var(--bubble-color) 4%, var(--color-bg)); + color: color-mix(in srgb, var(--bubble-color) 40%, var(--color-ink)); + max-inline-size: 75ch; z-index: 1; - } -} -.card__actions--right { - inset: var(--actions-block-inset) calc(var(--actions-inline-inset) * -1) auto auto; -} - -.card__actions-container { - background-color: var(--color-bg); - margin-block: calc(var(--block-space) * -1) var(--block-space); - padding: var(--block-space) var(--inline-space-double); - position: relative; - z-index: 0; - - .btn { - --btn-background: var(--bubble-color); - --btn-color: var(--color-ink-reversed); + .card__container & { + inline-size: calc(100dvw - var(--actions-inline-inset) * 2 - var(--btn-size) * 2); + } } - .btn--plain { - --btn-color: var(--bubble-color); + .card__actions { + position: absolute; + inset: var(--actions-block-inset) auto auto calc(var(--actions-inline-inset) * -1); + z-index: 0; - text-decoration: underline; + &:has(dialog[open]) { + z-index: 1; + } } - .bubble__pop-message { - color: var(--bubble-color); - } -} - -.cards .card__assignees:not(:has(.avatar)) { - .txt-uppercase { - display: none; - } -} - -.card__background { - inset: 0; - position: absolute; - z-index: -1; - - img { - block-size: 100%; - inline-size: 100%; - object-fit: cover; - object-position: center; - opacity: 0.2; - transition: opacity 0.2s ease-in-out; + .card__actions--right { + inset: var(--actions-block-inset) calc(var(--actions-inline-inset) * -1) auto auto; } - @media (hover: hover) { - .card:hover & { - img:not([src=""]) { - opacity: 1; + .card__actions-container { + background-color: var(--color-bg); + margin-block: calc(var(--block-space) * -1) var(--block-space); + padding: var(--block-space) var(--inline-space-double); + position: relative; + z-index: 0; + + .btn { + --btn-background: var(--bubble-color); + --btn-color: var(--color-ink-reversed); + } + + .btn--plain { + --btn-color: var(--bubble-color); + + text-decoration: underline; + } + + .bubble__pop-message { + color: var(--bubble-color); + } + } + + .cards .card__assignees:not(:has(.avatar)) { + .txt-uppercase { + display: none; + } + } + + .card__background { + inset: 0; + position: absolute; + z-index: -1; + + img { + block-size: 100%; + inline-size: 100%; + object-fit: cover; + object-position: center; + opacity: 0.2; + transition: opacity 0.2s ease-in-out; + } + + @media (hover: hover) { + .card:hover & { + img:not([src=""]) { + opacity: 1; + } } } } -} -.card__body { - padding-inline: var(--inline-space-double); -} - -.card__body-header { - flex: 2 1 75%; - padding-block: var(--block-space); -} - -.card__bucket { - background-color: var(--bubble-color); - font-weight: 800; - letter-spacing: 0.5ch; - padding: var(--block-space-half) var(--inline-space-double); -} - -.card-bucket__filter { - > button { - --hover-size: 0; + .card__body { + padding-inline: var(--inline-space-double); } -} -.card-column__filter { - > button { - --hover-size: 0; - - inline-size: auto; - padding: 0 2em 0 0; - margin-inline-start: 2em; + .card__body-header { + flex: 2 1 75%; + padding-block: var(--block-space); } -} -.card-sorting__filter { - inset: auto 50% -4em; - margin-inline-start: -1em; - position: absolute; - transform: translateX(-50%); - - #header:has(&) { - position: relative; - z-index: 1; + .card__bucket { + background-color: var(--bubble-color); + font-weight: 800; + letter-spacing: 0.5ch; + padding: var(--block-space-half) var(--inline-space-double); } -} -.card__container { - --actions-block-inset: 1.5rem; - --actions-inline-inset: 4rem; - --padding-inline: calc(var(--block-space-double) + var(--block-space)); - --padding-block: var(--block-space-double) calc(var(--block-space-double) + var(--block-space-half)); + .card-bucket__filter { + > button { + --hover-size: 0; + } + } - background-color: var(--color-container); - border-radius: 0.2em; - display: inline-flex; - padding-block: var(--padding-block); - padding-inline: var(--padding-inline); -} + .card-column__filter { + > button { + --hover-size: 0; -.card__container--pointing { - --arrow-size: 20em; - --aspect-ratio: 7; + inline-size: auto; + padding: 0 2em 0 0; + margin-inline-start: 2em; + } + } - position: relative; - margin-block-end: calc(var(--arrow-size) / var(--aspect-ratio)); - - &::after { - aspect-ratio: var(--aspect-ratio); - background: var(--color-container); - clip-path: polygon(50% 100%, 100% 0, 0 0); - inline-size: var(--arrow-size); - content: ""; - display: block; - inset-block-start: 99%; - inset-inline-start: 50%; + .card-sorting__filter { + inset: auto 50% -4em; + margin-inline-start: -1em; position: absolute; transform: translateX(-50%); - z-index: -1; + + #header:has(&) { + position: relative; + z-index: 1; + } } -} -.card__delete-btn { - .cards & { - display: none; + .card__container { + --actions-block-inset: 1.5rem; + --actions-inline-inset: 4rem; + --padding-inline: calc(var(--block-space-double) + var(--block-space)); + --padding-block: var(--block-space-double) calc(var(--block-space-double) + var(--block-space-half)); + + background-color: var(--color-container); + border-radius: 0.2em; + display: inline-flex; + padding-block: var(--padding-block); + padding-inline: var(--padding-inline); } -} -.card__footer { - margin-block-end: var(--block-space); -} + .card__container--pointing { + --arrow-size: 20em; + --aspect-ratio: 7; -.cards--grid { - --block-space: 2cqi; - --container-gap: var(--block-space-double); - --container-padding: calc(var(--block-space) * 1.5); + position: relative; + margin-block-end: calc(var(--arrow-size) / var(--aspect-ratio)); - container-type: inline-size; - display: flex; - flex-wrap: wrap; - gap: var(--container-gap); - inline-size: 100%; - margin: 0 auto; - max-inline-size: 120ch; - padding: var(--container-padding); - place-content: center; - position: relative; - z-index: 0; + &::after { + aspect-ratio: var(--aspect-ratio); + background: var(--color-container); + clip-path: polygon(50% 100%, 100% 0, 0 0); + inline-size: var(--arrow-size); + content: ""; + display: block; + inset-block-start: 99%; + inset-inline-start: 50%; + position: absolute; + transform: translateX(-50%); + z-index: -1; + } + } - .card { - --block-space: 1em; - --block-space-half: 0.5em; - --card-size: calc(100% - (var(--container-padding) * 2) / 2); - --text-xx-large: 1.8em; + .card__delete-btn { + .cards & { + display: none; + } + } - block-size: 50%; - font-size: 3cqi; - flex: 0 0 var(--card-size); - inline-size: var(--card-size); + .card__footer { + margin-block-end: var(--block-space); + } + + .cards--grid { + --block-space: 2cqi; + --container-gap: var(--block-space-double); + --container-padding: calc(var(--block-space) * 1.5); + + container-type: inline-size; + display: flex; + flex-wrap: wrap; + gap: var(--container-gap); + inline-size: 100%; + margin: 0 auto; + max-inline-size: 120ch; + padding: var(--container-padding); + place-content: center; + position: relative; z-index: 0; - } - - .card__meta, - .card__stages { - display: none; - } - - @media (min-width: 1ch) { - --block-space: 1cqi; - --container-gap: calc(var(--block-space) * 2); - --container-padding: calc(var(--block-space) * 2.5); .card { - --card-size: calc(50% - var(--container-gap) - (var(--container-padding) * 2) / 4); - --text-xx-large: 1.6em; - - font-size: 1.5cqi; - } - - .card__footer, - .card__header, - .card__stages { - font-size: 0.85em; - } - } - - @media (min-width: 120ch) { - --block-space: 0.9cqi; - --container-gap: calc(var(--block-space) * 2); - --container-padding: calc(var(--block-space) * 2.5); - - .card { - --card-size: calc(33% - var(--container-gap) / 2 - (var(--container-padding) * 2) / 6); + --block-space: 1em; + --block-space-half: 0.5em; + --card-size: calc(100% - (var(--container-padding) * 2) / 2); --text-xx-large: 1.8em; - font-size: 1cqi; + block-size: 50%; + font-size: 3cqi; + flex: 0 0 var(--card-size); + inline-size: var(--card-size); + z-index: 0; } - .card__footer, - .card__header, + .card__meta, .card__stages { - font-size: 0.85em; + display: none; } - } -} -.card__header { - padding-inline-end: var(--inline-space); -} + @media (min-width: 1ch) { + --block-space: 1cqi; + --container-gap: calc(var(--block-space) * 2); + --container-padding: calc(var(--block-space) * 2.5); -.card__hide-on-index { - .cards &, - .cards--grid & { - display: none; - } -} + .card { + --card-size: calc(50% - var(--container-gap) - (var(--container-padding) * 2) / 4); + --text-xx-large: 1.6em; -.card__link { - --hover-size: 0; + font-size: 1.5cqi; + } - content: ""; - inset: 0; - position: absolute; - z-index: -1; + .card__footer, + .card__header, + .card__stages { + font-size: 0.85em; + } + } - .cards &, - .cards--grid & { - z-index: 1; - } -} + @media (min-width: 120ch) { + --block-space: 0.9cqi; + --container-gap: calc(var(--block-space) * 2); + --container-padding: calc(var(--block-space) * 2.5); -.card__meta { - --border-color: var(--bubble-color); - --row-gap: 0.25em; + .card { + --card-size: calc(33% - var(--container-gap) / 2 - (var(--container-padding) * 2) / 6); + --text-xx-large: 1.8em; - margin-inline-start: var(--inline-space-double); + font-size: 1cqi; + } - strong { - font-size: 1.1em; - font-weight: 900; - } - - .separator { - height: calc(2lh + 2ex); - } -} - -.card__stages { - flex: 1 1 25%; -} - -.card__tag { - color: var(--bubble-color); - font-weight: 700; -} - -.card__tags { - color: var(--bubble-color); -} - -.card__title { - --hover-size: 0; - --input-border-radius: 0; - - font-size: var(--text-xx-large); - font-weight: 900; - line-height: 1.1; - min-block-size: 3lh; - text-wrap: balance; - - .cards & { - pointer-events: none; - } - - .card__title-field { - &:is(textarea) { - - &::placeholder { - color: inherit; - opacity: 0.5; + .card__footer, + .card__header, + .card__stages { + font-size: 0.85em; } } } - .card__title-link { - --lines: 3; + .card__header { + padding-inline-end: var(--inline-space); + } + + .card__hide-on-index { + .cards &, + .cards--grid & { + display: none; + } + } + + .card__link { + --hover-size: 0; + + content: ""; + inset: 0; + position: absolute; + z-index: -1; + + .cards &, + .cards--grid & { + z-index: 1; + } + } + + .card__meta { + --border-color: var(--bubble-color); + --row-gap: 0.25em; + + margin-inline-start: var(--inline-space-double); + + strong { + font-size: 1.1em; + font-weight: 900; + } + + .separator { + height: calc(2lh + 2ex); + } + } + + .card__stages { + flex: 1 1 25%; + } + + .card__tag { + color: var(--bubble-color); + font-weight: 700; + } + + .card__tags { + color: var(--bubble-color); + } + + .card__title { + --hover-size: 0; + --input-border-radius: 0; + + font-size: var(--text-xx-large); + font-weight: 900; + line-height: 1.1; + min-block-size: 3lh; + text-wrap: balance; + + .cards & { + pointer-events: none; + } + + .card__title-field { + &:is(textarea) { + + &::placeholder { + color: inherit; + opacity: 0.5; + } + } + } + + .card__title-link { + --lines: 3; + + color: inherit; + } + } + + .card-count__selector { + inset: 0.5cqi 0.5cqi auto auto; + position: absolute; + text-align: start; + z-index: 1; + + .popup { + inset: 1em 1em auto auto; + } + } + + .input.boost__input { + --input-border-radius: 0; + --input-border-size: 0; + --input-padding: 0; color: inherit; + font-size: inherit; + font-weight: inherit; + inline-size: min-content; + max-inline-size: 3ch; + min-inline-size: 1ch; + + @supports (field-sizing: content) { + field-sizing: content; + max-inline-size: unset; + } + } + + .card__popped { + align-items: center; + aspect-ratio: 7/4; + border: var(--block-space-half) solid var(--bubble-color); + position: absolute; + inset: auto var(--block-space) var(--block-space-double) auto; + justify-content: space-between; + padding: var(--block-space-half) calc(var(--inline-space) * 1.5); + transform: rotate(-10deg); + z-index: -1; + } + + .card__popped-by { + border-block-end: 1px dashed currentcolor; + } + + .card__popped-title { + color: var(--color-ink-reversed); + font-size: var(--text-rel-large); + font-weight: 900; + text-shadow: + -2px -2px 0 var(--bubble-color), + 2px -2px 0 var(--bubble-color), + -2px 2px 0 var(--bubble-color), + 2px 2px 0 var(--bubble-color); } } - -.card-count__selector { - inset: 0.5cqi 0.5cqi auto auto; - position: absolute; - text-align: start; - z-index: 1; - - .popup { - inset: 1em 1em auto auto; - } -} - -.input.boost__input { - --input-border-radius: 0; - --input-border-size: 0; - --input-padding: 0; - - color: inherit; - font-size: inherit; - font-weight: inherit; - inline-size: min-content; - max-inline-size: 3ch; - min-inline-size: 1ch; - - @supports (field-sizing: content) { - field-sizing: content; - max-inline-size: unset; - } -} - -.card__popped { - align-items: center; - aspect-ratio: 7/4; - border: var(--block-space-half) solid var(--bubble-color); - position: absolute; - inset: auto var(--block-space) var(--block-space-double) auto; - justify-content: space-between; - padding: var(--block-space-half) calc(var(--inline-space) * 1.5); - transform: rotate(-10deg); - z-index: -1; -} - -.card__popped-by { - border-block-end: 1px dashed currentcolor; -} - -.card__popped-title { - color: var(--color-ink-reversed); - font-size: var(--text-rel-large); - font-weight: 900; - text-shadow: - -2px -2px 0 var(--bubble-color), - 2px -2px 0 var(--bubble-color), - -2px 2px 0 var(--bubble-color), - 2px 2px 0 var(--bubble-color); -} diff --git a/app/assets/stylesheets/color-picker.css b/app/assets/stylesheets/color-picker.css new file mode 100644 index 000000000..73c3432fb --- /dev/null +++ b/app/assets/stylesheets/color-picker.css @@ -0,0 +1,37 @@ +@layer components { + .color-picker { + --panel-border-color: var(--bubble-color); + --panel-border-radius: 2em; + --panel-border-size: 2px; + --panel-padding: 0.5em 0.7em; + --panel-size: auto; + + inline-size: auto !important; + inset: 0 auto auto 0; + max-inline-size: var(--panel-size) !important; + position: absolute; + z-index: 2; + + &[open] { + display: flex; + } + + .color-picker__color { + --btn-size: 2em; + } + } + + .color-picker__button { + font-size: 0.75em; + + .cards & { + display: none; + } + + + .panel { + --panel-size: auto; + + inset: 0 0 auto auto; + } + } +} diff --git a/app/assets/stylesheets/comment-content.css b/app/assets/stylesheets/comment-content.css index 8d2a9bc25..9944ed45f 100644 --- a/app/assets/stylesheets/comment-content.css +++ b/app/assets/stylesheets/comment-content.css @@ -1,99 +1,101 @@ -.comments { - :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { - font-weight: 800; - hyphens: auto; - letter-spacing: -0.02ch; - line-height: 1.1; - margin-block: 0; - overflow-wrap: break-word; - text-wrap: balance; - } - - :where(h1, h2, h3, h4, h5, h6) { display: block; } - :where(h1, h2, h3, h4, h5, h6) { margin-block: 0.65em; } - - :is(h1, .h1) { font-size: 2em; } - :is(h2, .h2) { font-size: 1.5em; } - :is(h3, .h3) { font-size: 1.17em; } - :is(h4, .h4) { font-size: 1em; } - :is(h5, .h5) { font-size: 0.83em; } - :is(h6, .h6) { font-size: 0.67em; } +@layer components { + .comments { + :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { + font-weight: 800; + hyphens: auto; + letter-spacing: -0.02ch; + line-height: 1.1; + margin-block: 0; + overflow-wrap: break-word; + text-wrap: balance; + } - :where(p, ul, ol, dl, blockquote, pre, figure, table, hr) { - margin-block: 0.65lh; - overflow-wrap: break-word; - text-wrap: pretty; - } - - :where(hr) { - border-color: var(--color-subtle-dark); - border-style: var(--border-style, solid) none none; - margin: 2lh auto; - } - - :where(strong) { - font-weight: 700; - } - - :is(pre, code, .pre, .code) { - background-color: var(--color-subtle-light); - border: 1px solid var(--color-subtle); - border-radius: 0.3em; - font-family: var(--font-mono); - font-size: 0.85em; - } - - :is(pre) { - overflow-x: auto; - /* text-wrap: nowrap; */ - } - - :where(code) { - padding: 0.1em 0.3em; - } - - :is(pre, .pre) { - border-radius: 0.5em; - padding: 0.5lh 2ch; - - :is(code, .code) { - background-color: transparent; - border: 0; - font-size: 1em; - padding: 0; + :where(h1, h2, h3, h4, h5, h6) { display: block; } + :where(h1, h2, h3, h4, h5, h6) { margin-block: 0.65em; } + + :is(h1, .h1) { font-size: 2em; } + :is(h2, .h2) { font-size: 1.5em; } + :is(h3, .h3) { font-size: 1.17em; } + :is(h4, .h4) { font-size: 1em; } + :is(h5, .h5) { font-size: 0.83em; } + :is(h6, .h6) { font-size: 0.67em; } + + :where(p, ul, ol, dl, blockquote, pre, figure, table, hr) { + margin-block: 0.65lh; + overflow-wrap: break-word; + text-wrap: pretty; + } + + :where(hr) { + border-color: var(--color-subtle-dark); + border-style: var(--border-style, solid) none none; + margin: 2lh auto; + } + + :where(strong) { + font-weight: 700; + } + + :is(pre, code, .pre, .code) { + background-color: var(--color-subtle-light); + border: 1px solid var(--color-subtle); + border-radius: 0.3em; + font-family: var(--font-mono); + font-size: 0.85em; + } + + :is(pre) { + overflow-x: auto; + /* text-wrap: nowrap; */ + } + + :where(code) { + padding: 0.1em 0.3em; + } + + :is(pre, .pre) { + border-radius: 0.5em; + padding: 0.5lh 2ch; + + :is(code, .code) { + background-color: transparent; + border: 0; + font-size: 1em; + padding: 0; + } + } + + :where(p) { + hyphens: auto; + letter-spacing: -0.005ch; + } + + :is(blockquote, .quote) { + font-style: italic; + margin: 0 3ch; + + :is(p) { + hyphens: none; + } + } + + :where(table, th, td) { + border: 1px solid var(--color-subtle-dark); + } + + :where(table) { + border-collapse: collapse; + margin: 1lh 0; + } + + :where(th, td) { + padding: 0.2lh 1ch; + text-align: start; + } + + :where(th) { + border-block-end-width: 3px; + font-weight: 700; } } - - :where(p) { - hyphens: auto; - letter-spacing: -0.005ch; - } - - :is(blockquote, .quote) { - font-style: italic; - margin: 0 3ch; - - :is(p) { - hyphens: none; - } - } - - :where(table, th, td) { - border: 1px solid var(--color-subtle-dark); - } - - :where(table) { - border-collapse: collapse; - margin: 1lh 0; - } - - :where(th, td) { - padding: 0.2lh 1ch; - text-align: start; - } - - :where(th) { - border-block-end-width: 3px; - font-weight: 700; - } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css index 75cf2012d..1ba711061 100644 --- a/app/assets/stylesheets/comments.css +++ b/app/assets/stylesheets/comments.css @@ -1,104 +1,106 @@ -.comments { - --avatar-size: 2.33em; - --comment-padding-block: var(--block-space); - --comment-padding-inline: var(--inline-space-double); - --comment-max: 70ch; +@layer components { + .comments { + --avatar-size: 2.33em; + --comment-padding-block: var(--block-space); + --comment-padding-inline: var(--inline-space-double); + --comment-max: 70ch; - display: flex; - flex-direction: column; - padding-inline: var(--inline-space); - place-items: center; - text-align: center; - - @media (min-width: 150ch) { - padding-inline: calc(var(--tray-size) + var(--inline-space) * 1.5); - } -} - -.comments__subscribers { - max-inline-size: var(--comment-max); - padding-inline: calc(var(--comment-padding-block) + var(--inline-space-double)); -} - -.comment { - margin-inline: auto; - max-inline-size: var(--comment-max); - position: relative; - - house-md-toolbar { - margin-block-start: calc(var(--comment-padding-block) * -0.5); - } - - .house-md-content { - padding: var(--comment-padding-block) 0 0; - } -} - -.comment__author { - .btn { - font-weight: inherit; - } -} - -.comment__avatar { - margin: calc(var(--comment-padding-block) * 0.5) calc(var(--comment-padding-inline) * -0.75); - z-index: 0; - - .comment--mine_ & { - margin-inline: calc(var(--comment-padding-inline) * -0.75); - } -} - -.comment__body { - p { - &:first-child { - margin-block-start: 0; - } - - &:last-child { - margin-block-end: 0; - } - } -} - -.comment__content { - background-color: var(--color-subtle-light); - border-radius: 0.2em; - padding: - var(--comment-padding-block) - var(--comment-padding-inline); -} - -.comment__edit { - --btn-icon-size: 1.2rem; - - display: none; - - .comment--mine & { - display: grid; - } -} - -.comment__event { - max-inline-size: var(--comment-max); - - &::before { - /* Make up space for lack of avatar */ - content: ""; display: flex; - inline-size: calc(var(--comment-padding-inline) * 0.75); + flex-direction: column; + padding-inline: var(--inline-space); + place-items: center; + text-align: center; + + @media (min-width: 150ch) { + padding-inline: calc(var(--tray-size) + var(--inline-space) * 1.5); + } } -} -.comment__input { - --input-border-size: 0; - --input-padding: 0; + .comments__subscribers { + max-inline-size: var(--comment-max); + padding-inline: calc(var(--comment-padding-block) + var(--inline-space-double)); + } - min-block-size: calc(9lh + (2 * var(--comment-padding-block))); - min-inline-size: 100%; + .comment { + margin-inline: auto; + max-inline-size: var(--comment-max); + position: relative; + + house-md-toolbar { + margin-block-start: calc(var(--comment-padding-block) * -0.5); + } + + .house-md-content { + padding: var(--comment-padding-block) 0 0; + } + } + + .comment__author { + .btn { + font-weight: inherit; + } + } + + .comment__avatar { + margin: calc(var(--comment-padding-block) * 0.5) calc(var(--comment-padding-inline) * -0.75); + z-index: 0; + + .comment--mine_ & { + margin-inline: calc(var(--comment-padding-inline) * -0.75); + } + } + + .comment__body { + p { + &:first-child { + margin-block-start: 0; + } + + &:last-child { + margin-block-end: 0; + } + } + } + + .comment__content { + background-color: var(--color-subtle-light); + border-radius: 0.2em; + padding: + var(--comment-padding-block) + var(--comment-padding-inline); + } + + .comment__edit { + --btn-icon-size: 1.2rem; + + display: none; + + .comment--mine & { + display: grid; + } + } + + .comment__event { + max-inline-size: var(--comment-max); + + &::before { + /* Make up space for lack of avatar */ + content: ""; + display: flex; + inline-size: calc(var(--comment-padding-inline) * 0.75); + } + } + + .comment__input { + --input-border-size: 0; + --input-padding: 0; - @supports (field-sizing: content) { - field-sizing: content; min-block-size: calc(9lh + (2 * var(--comment-padding-block))); + min-inline-size: 100%; + + @supports (field-sizing: content) { + field-sizing: content; + min-block-size: calc(9lh + (2 * var(--comment-padding-block))); + } } } diff --git a/app/assets/stylesheets/dialog.css b/app/assets/stylesheets/dialog.css index 53026af9b..ea7e10e15 100644 --- a/app/assets/stylesheets/dialog.css +++ b/app/assets/stylesheets/dialog.css @@ -1,45 +1,47 @@ -:is(.dialog) { - --backdrop-speed: 150ms; - --panel-size: max-content; - --speed: 150ms; +@layer components { + :is(.dialog) { + --backdrop-speed: 150ms; + --panel-size: max-content; + --speed: 150ms; - border: 0; - opacity: 0; - transform: scale(0.2); - transform-origin: top center; - transition: - display var(--speed) allow-discrete, - opacity var(--speed), - overlay var(--speed) allow-discrete, - transform var(--speed); - - &::backdrop { - background-color: var(--color-always-black); + border: 0; opacity: 0; - transform: scale(1); + transform: scale(0.2); + transform-origin: top center; transition: - display var(--backdrop-speed) allow-discrete, - opacity var(--backdrop-speed), - overlay var(--backdrop-speed) allow-discrete; - } - - &[open] { - opacity: 1; - transform: scale(1); + display var(--speed) allow-discrete, + opacity var(--speed), + overlay var(--speed) allow-discrete, + transform var(--speed); &::backdrop { - opacity: 0.5; + background-color: var(--color-always-black); + opacity: 0; + transform: scale(1); + transition: + display var(--backdrop-speed) allow-discrete, + opacity var(--backdrop-speed), + overlay var(--backdrop-speed) allow-discrete; } - } - @starting-style { &[open] { - opacity: 0; - transform: scale(0.2); + opacity: 1; + transform: scale(1); + + &::backdrop { + opacity: 0.5; + } } - &[open]::backdrop { - opacity: 0; + @starting-style { + &[open] { + opacity: 0; + transform: scale(0.2); + } + + &[open]::backdrop { + opacity: 0; + } } } } diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css index d953547ac..f7f5ce3bb 100644 --- a/app/assets/stylesheets/events.css +++ b/app/assets/stylesheets/events.css @@ -1,153 +1,155 @@ -.events { - display: grid; - gap: 0 var(--grid-lines); - grid-template-columns: repeat(3, 1fr); - position: relative; - z-index: 0; -} - -.events__container { - --column-gap: clamp(var(--inline-space), 3cqmin, calc(var(--inline-space) * 3)); - --grid-lines: 0.1rem; - - display: grid; - grid-template-columns: 1fr 5fr 1fr; - margin: auto; -} - -.events__day-header { - background-color: var(--color-bg); - block-size: var(--grid-lines); - display: block; - position: relative; - z-index: 1; -} - -.events__day-header-content { - background-color: var(--color-bg); - display: inline-flex; - font-size: 0.8em; - inset: calc(var(--grid-lines) - 1em) auto -1em; - line-height: 1.5; - padding: 0.2em 1.3em; - position: absolute; - text-transform: uppercase; - transform: translateX(calc(-50% - var(--grid-lines) / 2)); - z-index: 2; -} - -.events__filter-btn { - font-weight: 500; - inline-size: auto; - margin: auto; -} - -.events__index { - --row-gap: var(--block-space); -} - -.events__index-header { - h2 { - font-weight: 900; - } -} - -.events--none { - background-color: var(--color-container); - border-block-start: var(--grid-lines) solid var(--color-bg); - padding-block: 3em; - margin: auto var(--grid-lines) calc(var(--grid-lines) * -1) auto; -} - -.events__popup { - .panel:is(&) { - max-block-size: calc(100dvh - (2 * var(--block-space-double))); - max-inline-size: calc(100dvw - (2 * var(--block-space-double))); - } - - #header:has(&) { - max-inline-size: 100%; +@layer components { + .events { + display: grid; + gap: 0 var(--grid-lines); + grid-template-columns: repeat(3, 1fr); position: relative; - z-index: 5; + z-index: 0; } -} -.event { - --column-gap: 0.7ch; - --panel-border-color: transparent; - --panel-border-radius: var(--grid-lines); - --panel-padding: 0.6em 1.2em 0.6em 0.6em; - --panel-size: auto; + .events__container { + --column-gap: clamp(var(--inline-space), 3cqmin, calc(var(--inline-space) * 3)); + --grid-lines: 0.1rem; - margin: var(--inline-space); - position: relative; - z-index: 1; -} + display: grid; + grid-template-columns: 1fr 5fr 1fr; + margin: auto; + } -.event--related { - --hover-color: var(--bubble-color); - --hover-size: 0.15rem; + .events__day-header { + background-color: var(--color-bg); + block-size: var(--grid-lines); + display: block; + position: relative; + z-index: 1; + } - box-shadow: 0 0 0 var(--hover-size) var(--hover-color); - z-index: 2; -} + .events__day-header-content { + background-color: var(--color-bg); + display: inline-flex; + font-size: 0.8em; + inset: calc(var(--grid-lines) - 1em) auto -1em; + line-height: 1.5; + padding: 0.2em 1.3em; + position: absolute; + text-transform: uppercase; + transform: translateX(calc(-50% - var(--grid-lines) / 2)); + z-index: 2; + } -.event__grid-item { - background-color: var(--color-container); - block-size: 100%; - border-radius: 0; - display: flex; - inline-size: 100%; -} + .events__filter-btn { + font-weight: 500; + inline-size: auto; + margin: auto; + } -.event__grid-column-title { - --z: 3; + .events__index { + --row-gap: var(--block-space); + } - background-color: var(--color-container); - font-size: 0.9em; - padding: 1.5em 0 1em; - text-transform: uppercase; -} + .events__index-header { + h2 { + font-weight: 900; + } + } -.event__timestamp { - align-self: start; - display: grid; - font-weight: 600; - margin-block-end: var(--block-space-half); -} + .events--none { + background-color: var(--color-container); + border-block-start: var(--grid-lines) solid var(--color-bg); + padding-block: 3em; + margin: auto var(--grid-lines) calc(var(--grid-lines) * -1) auto; + } -.event__title { - font-size: 1.1em; - line-height: 1.2; -} + .events__popup { + .panel:is(&) { + max-block-size: calc(100dvh - (2 * var(--block-space-double))); + max-inline-size: calc(100dvw - (2 * var(--block-space-double))); + } -.event__wrapper { - align-content: end; - display: grid; - gap: calc(var(--grid-lines) * 2); - justify-items: center; - margin: var(--grid-lines) var(--grid-lines) calc(var(--grid-lines) * 6) var(--grid-lines); - padding: 0 var(--grid-lines); + #header:has(&) { + max-inline-size: 100%; + position: relative; + z-index: 5; + } + } .event { - grid-column-start: unset !important; - grid-row-start: unset !important; - } -} - -.event__icon { - aspect-ratio: 1; - background-color: var(--bubble-color); - block-size: 1.7em; - border-radius: 1.7em; - inline-size: 1.7em; - display: grid; - place-content: center; - margin-inline-end: -0.75em; - - img { - block-size: 1.1em; - inline-size: 1.1em; - grid-area: 1 / 1; + --column-gap: 0.7ch; + --panel-border-color: transparent; + --panel-border-radius: var(--grid-lines); + --panel-padding: 0.6em 1.2em 0.6em 0.6em; + --panel-size: auto; + + margin: var(--inline-space); + position: relative; + z-index: 1; + } + + .event--related { + --hover-color: var(--bubble-color); + --hover-size: 0.15rem; + + box-shadow: 0 0 0 var(--hover-size) var(--hover-color); + z-index: 2; + } + + .event__grid-item { + background-color: var(--color-container); + block-size: 100%; + border-radius: 0; + display: flex; + inline-size: 100%; + } + + .event__grid-column-title { + --z: 3; + + background-color: var(--color-container); + font-size: 0.9em; + padding: 1.5em 0 1em; + text-transform: uppercase; + } + + .event__timestamp { + align-self: start; + display: grid; + font-weight: 600; + margin-block-end: var(--block-space-half); + } + + .event__title { + font-size: 1.1em; + line-height: 1.2; + } + + .event__wrapper { + align-content: end; + display: grid; + gap: calc(var(--grid-lines) * 2); + justify-items: center; + margin: var(--grid-lines) var(--grid-lines) calc(var(--grid-lines) * 6) var(--grid-lines); + padding: 0 var(--grid-lines); + + .event { + grid-column-start: unset !important; + grid-row-start: unset !important; + } + } + + .event__icon { + aspect-ratio: 1; + background-color: var(--bubble-color); + block-size: 1.7em; + border-radius: 1.7em; + inline-size: 1.7em; + display: grid; + place-content: center; + margin-inline-end: -0.75em; + + img { + block-size: 1.1em; + inline-size: 1.1em; + grid-area: 1 / 1; + } } } diff --git a/app/assets/stylesheets/filters.css b/app/assets/stylesheets/filters.css index d573e179b..cf7c894f0 100644 --- a/app/assets/stylesheets/filters.css +++ b/app/assets/stylesheets/filters.css @@ -1,107 +1,109 @@ -.filters { - #header:has(&) { - position: relative; - z-index: 1; - } -} - -.filter__button { - --btn-border-size: 0; - --btn-font-weight: 400; - --btn-icon-size: 0.7em; - --btn-padding: 0.3em 0.7em; - - inline-size: 100%; - justify-content: space-between; - text-align: start; - - span { - overflow: hidden; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - } - - img { - display: none; - } - - &:has(input[type=checkbox]:checked) img { - display: block; - } -} - -.filter__columns { - display: grid; - grid-template-columns: repeat(5, 1fr); - max-block-size: 50dvh; -} - -.filter__label { - display: flex; - inline-size: 100%; - padding: 0.3em 0.7em; - - strong { - overflow: hidden; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - } -} - -.filter__menu { - display: flex; - flex-direction: column; - inline-size: 100%; - list-style: none; - margin: 0; - min-inline-size: 0; - overflow-x: auto; - padding: 0 var(--inline-space); - position: relative; - row-gap: 0.2em; - - &::before { - block-size: 100%; - border-block: 0; - border-inline-end: 0; - border-inline-start: 1px solid var(--color-subtle); - content: ""; - display: inline-flex; - inline-size: 0; - position: absolute; - inset: 0 auto 0 0; - } - - &:first-child::before { - display: none; - } - - li { - text-align: start; - } -} - -.panel:is(.filter__popup) { - --panel-size: 100ch; - --panel-padding: var(--block-space); - - inline-size: auto !important; - min-inline-size: var(--panel-size); - max-block-size: calc(90dvh - (2 * var(--block-space-double))); - max-inline-size: calc(100dvw - (2 * var(--block-space-double))); - z-index: 1; -} - -.quick-filter { - &:has(input:not(.default-value):checked) { - .input--select { - --input-background: var(--color-selected); +@layer components { + .filters { + #header:has(&) { + position: relative; + z-index: 1; } } - @media (max-width: 80ch) { - display: none; + .filter__button { + --btn-border-size: 0; + --btn-font-weight: 400; + --btn-icon-size: 0.7em; + --btn-padding: 0.3em 0.7em; + + inline-size: 100%; + justify-content: space-between; + text-align: start; + + span { + overflow: hidden; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + } + + img { + display: none; + } + + &:has(input[type=checkbox]:checked) img { + display: block; + } + } + + .filter__columns { + display: grid; + grid-template-columns: repeat(5, 1fr); + max-block-size: 50dvh; + } + + .filter__label { + display: flex; + inline-size: 100%; + padding: 0.3em 0.7em; + + strong { + overflow: hidden; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + .filter__menu { + display: flex; + flex-direction: column; + inline-size: 100%; + list-style: none; + margin: 0; + min-inline-size: 0; + overflow-x: auto; + padding: 0 var(--inline-space); + position: relative; + row-gap: 0.2em; + + &::before { + block-size: 100%; + border-block: 0; + border-inline-end: 0; + border-inline-start: 1px solid var(--color-subtle); + content: ""; + display: inline-flex; + inline-size: 0; + position: absolute; + inset: 0 auto 0 0; + } + + &:first-child::before { + display: none; + } + + li { + text-align: start; + } + } + + .panel:is(.filter__popup) { + --panel-size: 100ch; + --panel-padding: var(--block-space); + + inline-size: auto !important; + min-inline-size: var(--panel-size); + max-block-size: calc(90dvh - (2 * var(--block-space-double))); + max-inline-size: calc(100dvw - (2 * var(--block-space-double))); + z-index: 1; + } + + .quick-filter { + &:has(input:not(.default-value):checked) { + .input--select { + --input-background: var(--color-selected); + } + } + + @media (max-width: 80ch) { + display: none; + } } } diff --git a/app/assets/stylesheets/flash.css b/app/assets/stylesheets/flash.css index eb2f7be0a..8e5d08d67 100644 --- a/app/assets/stylesheets/flash.css +++ b/app/assets/stylesheets/flash.css @@ -1,19 +1,21 @@ -.flash { - display: flex; - inline-size: 100%; - inset: var(--block-space) auto auto auto; - justify-content: center; - position: fixed; - z-index: 6; -} +@layer components { + .flash { + display: flex; + inline-size: 100%; + inset: var(--block-space) auto auto auto; + justify-content: center; + position: fixed; + z-index: 6; + } -.flash__inner { - animation: appear-then-fade 3s 300ms both; - background-color: var(--flash-background, var(--color-ink)); - border-radius: 4em; - color: var(--flash-color, var(--color-ink-reversed)); - display: inline-flex; - font-size: var(--font-size-medium); - margin: 0 auto; - padding: 0.7em 1.4em; + .flash__inner { + animation: appear-then-fade 3s 300ms both; + background-color: var(--flash-background, var(--color-ink)); + border-radius: 4em; + color: var(--flash-color, var(--color-ink-reversed)); + display: inline-flex; + font-size: var(--font-size-medium); + margin: 0 auto; + padding: 0.7em 1.4em; + } } diff --git a/app/assets/stylesheets/house.css b/app/assets/stylesheets/house.css index cf9be0599..30982ad76 100644 --- a/app/assets/stylesheets/house.css +++ b/app/assets/stylesheets/house.css @@ -1,173 +1,174 @@ +@layer components { + /* Editor */ + house-md { + display: flex; + flex-direction: column; + flex-grow: 1; -/* Editor */ -house-md { - display: flex; - flex-direction: column; - flex-grow: 1; - - &:invalid { - border: var(--color-negative) 2px solid; + &:invalid { + border: var(--color-negative) 2px solid; + } } -} -/* Toolbar */ -house-md-toolbar { - background-color: inherit; - border-block-end: 1px solid var(--color-subtle-dark); - border-radius: 0; - color: currentColor; - display: inline-flex; - font-size: inherit; - max-inline-size: 100%; - overflow-x: auto; - padding: 0.2em; - - button, label { - aspect-ratio: 4/3; - appearance: none; - background-color: transparent; - block-size: 2em; - border: none; - border-radius: 0.5em; + /* Toolbar */ + house-md-toolbar { + background-color: inherit; + border-block-end: 1px solid var(--color-subtle-dark); + border-radius: 0; color: currentColor; - cursor: pointer; - display: grid; + display: inline-flex; font-size: inherit; - inline-size: auto; - place-items: center; - transition: background-color 300ms ease; + max-inline-size: 100%; + overflow-x: auto; + padding: 0.2em; - svg { - -webkit-touch-callout: none; - block-size: 0.9em; - fill: currentColor; - grid-area: 1/1; + button, label { + aspect-ratio: 4/3; + appearance: none; + background-color: transparent; + block-size: 2em; + border: none; + border-radius: 0.5em; + color: currentColor; + cursor: pointer; + display: grid; + font-size: inherit; inline-size: auto; - user-select: none; + place-items: center; + transition: background-color 300ms ease; + + svg { + -webkit-touch-callout: none; + block-size: 0.9em; + fill: currentColor; + grid-area: 1/1; + inline-size: auto; + user-select: none; + } + + &:is(:focus, :hover) { + background-color: var(--color-subtle); + } + + &:is(:active) { + background-color: var(--color-selected); + } + } + } + + /* Markdown Content */ + .house-md-content { + caret-color: var(--color-link); + flex-grow: 1; + font-family: var(--font-sans); + text-align: left; + white-space: break-spaces; + padding: 1rem; + + &.house-md-content-empty::before { + content: attr(placeholder); + color: var(--color-ink); + opacity: 0.5; + pointer-events: none; + display: block; } - &:is(:focus, :hover) { + &:active, + &:focus { + border: none; + outline: none; + } + + .link, .img { + color: var(--color-link); + text-decoration: underline; + } + } + + /* Uploads */ + house-md-upload { + border-radius: 0.5em; + margin-block: 0.5ex; + position: relative; + + &[status="failed"] { + background-color: var(--color-negative); + color: var(--color-ink-reversed); + font-weight: bold; + padding: 0.5em; + } + } + + .md-close { + appearance: none; + display: none; + inline-size: 1em; + block-size: 1em; + border: none; + outline: none; + background-color: transparent; + position: absolute; + inset: 0.5em 0.5em auto auto; + cursor: pointer; + + house-md-upload[status="failed"] & { + color: var(--color-ink-reversed); + display: inline-block; + } + + &::before { + content: '×'; + color: var(--color-ink-reversed); + font-size: 24px; + font-weight: bold; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } + + .md-file { + font-weight: normal; + + house-md-upload[status="complete"] & { + color: var(--color-positive); + } + } + + .md-progress-bar { + -webkit-appearance: none; + appearance: none; + background-color: var(--color-subtle); + border-radius: 0.5em; + block-size: 1ex; + display: block; + inline-size: 100%; + line-height: inherit; + margin: 0; + + house-md-upload[status="failed"] & , + house-md-upload[status="complete"] &{ + display: none; + } + + &::-webkit-progress-bar { + border-radius: 0.5em; background-color: var(--color-subtle); } - &:is(:active) { - background-color: var(--color-selected); + &::-webkit-progress-inner-element { + border-radius: 0.5em; + } + + &::-webkit-progress-value { + border-radius: 0.5em; + background-color: var(--color-positive); + } + + &::-moz-progress-bar { + border-radius: 0.5em; + background-color: var(--color-positive); } } } - -/* Markdown Content */ -.house-md-content { - caret-color: var(--color-link); - flex-grow: 1; - font-family: var(--font-sans); - text-align: left; - white-space: break-spaces; - padding: 1rem; - - &.house-md-content-empty::before { - content: attr(placeholder); - color: var(--color-ink); - opacity: 0.5; - pointer-events: none; - display: block; - } - - &:active, - &:focus { - border: none; - outline: none; - } - - .link, .img { - color: var(--color-link); - text-decoration: underline; - } -} - -/* Uploads */ -house-md-upload { - border-radius: 0.5em; - margin-block: 0.5ex; - position: relative; - - &[status="failed"] { - background-color: var(--color-negative); - color: var(--color-ink-reversed); - font-weight: bold; - padding: 0.5em; - } -} - -.md-close { - appearance: none; - display: none; - inline-size: 1em; - block-size: 1em; - border: none; - outline: none; - background-color: transparent; - position: absolute; - inset: 0.5em 0.5em auto auto; - cursor: pointer; - - house-md-upload[status="failed"] & { - color: var(--color-ink-reversed); - display: inline-block; - } - - &::before { - content: '×'; - color: var(--color-ink-reversed); - font-size: 24px; - font-weight: bold; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } -} - -.md-file { - font-weight: normal; - - house-md-upload[status="complete"] & { - color: var(--color-positive); - } -} - -.md-progress-bar { - -webkit-appearance: none; - appearance: none; - background-color: var(--color-subtle); - border-radius: 0.5em; - block-size: 1ex; - display: block; - inline-size: 100%; - line-height: inherit; - margin: 0; - - house-md-upload[status="failed"] & , - house-md-upload[status="complete"] &{ - display: none; - } - - &::-webkit-progress-bar { - border-radius: 0.5em; - background-color: var(--color-subtle); - } - - &::-webkit-progress-inner-element { - border-radius: 0.5em; - } - - &::-webkit-progress-value { - border-radius: 0.5em; - background-color: var(--color-positive); - } - - &::-moz-progress-bar { - border-radius: 0.5em; - background-color: var(--color-positive); - } -} diff --git a/app/assets/stylesheets/icons.css b/app/assets/stylesheets/icons.css index 6fab09ef1..2cdd73fe5 100644 --- a/app/assets/stylesheets/icons.css +++ b/app/assets/stylesheets/icons.css @@ -1,74 +1,76 @@ -.icon { - -webkit-touch-callout: none; - background-color: currentColor; - block-size: var(--icon-size, 1em); - display: inline-block; - flex-shrink: 0; - inline-size: var(--icon-size, 1em); - mask-image: var(--svg); - mask-repeat: no-repeat; - mask-size: cover; - pointer-events: none; - user-select: none; -} +@layer base { + .icon { + -webkit-touch-callout: none; + background-color: currentColor; + block-size: var(--icon-size, 1em); + display: inline-block; + flex-shrink: 0; + inline-size: var(--icon-size, 1em); + mask-image: var(--svg); + mask-repeat: no-repeat; + mask-size: cover; + pointer-events: none; + user-select: none; + } -.icon--activity { --svg: url("activity.svg "); } -.icon--add { --svg: url("add.svg "); } -.icon--alert { --svg: url("alert.svg "); } -.icon--arrow-left { --svg: url("arrow-left.svg "); } -.icon--arrow-right { --svg: url("arrow-right.svg "); } -.icon--art { --svg: url("art.svg "); } -.icon--assigned { --svg: url("assigned.svg "); } -.icon--bell-off { --svg: url("bell-off.svg "); } -.icon--bell { --svg: url("bell.svg "); } -.icon--blob { --svg: url("blob.svg "); } -.icon--bolt { --svg: url("bolt.svg "); } -.icon--bookmark-outline { --svg: url("bookmark-outline.svg "); } -.icon--bookmark { --svg: url("bookmark.svg "); } -.icon--bubble-add { --svg: url("bubble-add.svg "); } -.icon--bubbles { --svg: url("bubbles.svg "); } -.icon--calendar-add { --svg: url("calendar-add.svg "); } -.icon--calendar { --svg: url("calendar.svg "); } -.icon--camera { --svg: url("camera.svg "); } -.icon--chart { --svg: url("chart.svg "); } -.icon--check { --svg: url("check.svg "); } -.icon--close { --svg: url("close.svg "); } -.icon--comment { --svg: url("comment.svg "); } -.icon--copy-paste { --svg: url("copy-paste.svg "); } -.icon--crown { --svg: url("crown.svg "); } -.icon--drag { --svg: url("drag.svg "); } -.icon--email { --svg: url("email.svg "); } -.icon--everyone { --svg: url("everyone.svg "); } -.icon--filter { --svg: url("filter.svg "); } -.icon--globe { --svg: url("globe.svg "); } -.icon--grid { --svg: url("grid.svg "); } -.icon--history { --svg: url("history.svg "); } -.icon--home { --svg: url("home.svg "); } -.icon--hourglass { --svg: url("hourglass.svg "); } -.icon--inbox { --svg: url("inbox.svg "); } -.icon--logout { --svg: url("logout.svg "); } -.icon--menu-dots-horizontal { --svg: url("menu-dots-horizontal.svg "); } -.icon--minus { --svg: url("minus.svg "); } -.icon--password { --svg: url("password.svg "); } -.icon--pencil { --svg: url("pencil.svg "); } -.icon--person { --svg: url("person.svg "); } -.icon--picture-add { --svg: url("picture-add.svg "); } -.icon--picture-double { --svg: url("picture-double.svg "); } -.icon--picture-remove { --svg: url("picture-remove.svg "); } -.icon--pinned { --svg: url("pinned.svg "); } -.icon--pop { --svg: url("pop.svg "); } -.icon--qr-code { --svg: url("qr-code.svg "); } -.icon--reaction { --svg: url("reaction.svg "); } -.icon--refresh { --svg: url("refresh.svg "); } -.icon--remove-med { --svg: url("remove-med.svg "); } -.icon--remove { --svg: url("remove.svg "); } -.icon--rename { --svg: url("rename.svg "); } -.icon--settings { --svg: url("settings.svg "); } -.icon--share { --svg: url("share.svg "); } -.icon--sort-ascending { --svg: url("sort-ascending.svg "); } -.icon--sort-descending { --svg: url("sort-descending.svg "); } -.icon--tag { --svg: url("tag.svg "); } -.icon--temperature { --svg: url("temperature.svg "); } -.icon--thumb-up { --svg: url("thumb-up.svg "); } -.icon--trash { --svg: url("trash.svg "); } -.icon--unpinned { --svg: url("unpinned.svg"); } + .icon--activity { --svg: url("activity.svg "); } + .icon--add { --svg: url("add.svg "); } + .icon--alert { --svg: url("alert.svg "); } + .icon--arrow-left { --svg: url("arrow-left.svg "); } + .icon--arrow-right { --svg: url("arrow-right.svg "); } + .icon--art { --svg: url("art.svg "); } + .icon--assigned { --svg: url("assigned.svg "); } + .icon--bell-off { --svg: url("bell-off.svg "); } + .icon--bell { --svg: url("bell.svg "); } + .icon--blob { --svg: url("blob.svg "); } + .icon--bolt { --svg: url("bolt.svg "); } + .icon--bookmark-outline { --svg: url("bookmark-outline.svg "); } + .icon--bookmark { --svg: url("bookmark.svg "); } + .icon--bubble-add { --svg: url("bubble-add.svg "); } + .icon--bubbles { --svg: url("bubbles.svg "); } + .icon--calendar-add { --svg: url("calendar-add.svg "); } + .icon--calendar { --svg: url("calendar.svg "); } + .icon--camera { --svg: url("camera.svg "); } + .icon--chart { --svg: url("chart.svg "); } + .icon--check { --svg: url("check.svg "); } + .icon--close { --svg: url("close.svg "); } + .icon--comment { --svg: url("comment.svg "); } + .icon--copy-paste { --svg: url("copy-paste.svg "); } + .icon--crown { --svg: url("crown.svg "); } + .icon--drag { --svg: url("drag.svg "); } + .icon--email { --svg: url("email.svg "); } + .icon--everyone { --svg: url("everyone.svg "); } + .icon--filter { --svg: url("filter.svg "); } + .icon--globe { --svg: url("globe.svg "); } + .icon--grid { --svg: url("grid.svg "); } + .icon--history { --svg: url("history.svg "); } + .icon--home { --svg: url("home.svg "); } + .icon--hourglass { --svg: url("hourglass.svg "); } + .icon--inbox { --svg: url("inbox.svg "); } + .icon--logout { --svg: url("logout.svg "); } + .icon--menu-dots-horizontal { --svg: url("menu-dots-horizontal.svg "); } + .icon--minus { --svg: url("minus.svg "); } + .icon--password { --svg: url("password.svg "); } + .icon--pencil { --svg: url("pencil.svg "); } + .icon--person { --svg: url("person.svg "); } + .icon--picture-add { --svg: url("picture-add.svg "); } + .icon--picture-double { --svg: url("picture-double.svg "); } + .icon--picture-remove { --svg: url("picture-remove.svg "); } + .icon--pinned { --svg: url("pinned.svg "); } + .icon--pop { --svg: url("pop.svg "); } + .icon--qr-code { --svg: url("qr-code.svg "); } + .icon--reaction { --svg: url("reaction.svg "); } + .icon--refresh { --svg: url("refresh.svg "); } + .icon--remove-med { --svg: url("remove-med.svg "); } + .icon--remove { --svg: url("remove.svg "); } + .icon--rename { --svg: url("rename.svg "); } + .icon--settings { --svg: url("settings.svg "); } + .icon--share { --svg: url("share.svg "); } + .icon--sort-ascending { --svg: url("sort-ascending.svg "); } + .icon--sort-descending { --svg: url("sort-descending.svg "); } + .icon--tag { --svg: url("tag.svg "); } + .icon--temperature { --svg: url("temperature.svg "); } + .icon--thumb-up { --svg: url("thumb-up.svg "); } + .icon--trash { --svg: url("trash.svg "); } + .icon--unpinned { --svg: url("unpinned.svg"); } +} diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/inputs.css index a600b690a..0edd2a841 100644 --- a/app/assets/stylesheets/inputs.css +++ b/app/assets/stylesheets/inputs.css @@ -1,224 +1,226 @@ -/* Text inputs */ -.input { - accent-color: var(--input-accent-color, var(--color-ink)); - background-color: var(--input-background, transparent); - border-radius: var(--input-border-radius, 0.5em); - border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-subtle-dark)); - color: var(--input-color, var(--color-ink)); - font-size: max(16px, 1em); - inline-size: 100%; - line-height: inherit; - max-inline-size: 100%; - padding: var(--input-padding, 0.5em 0.8em); - resize: none; - - &:autofill, - &:-webkit-autofill, - &:-webkit-autofill:hover, - &:-webkit-autofill:focus { - -webkit-text-fill-color: var(--color-ink); - -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset; - } - - &:where(:not(:active)):focus { - --input-border-color: var(--color-selected-dark); - --hover-color: var(--color-selected-dark); - --outline-size: 0; - --outline-color: transparent; - - filter: var(--hover-filter); - box-shadow: 0 0 0 var(--hover-size) var(--hover-color); - } -} - -.input--file { - border: 0; - cursor: pointer; - display: grid; - inline-size: auto; - place-items: center; - - > * { - grid-area: 1 / 1; - } - - img { - border-radius: 0.4em; - } - - input[type="file"] { - --input-border-color: transparent; - --input-border-radius: 8px; - - block-size: 100%; - cursor: pointer; - font-size: 0; +@layer components { + /* Text inputs */ + .input { + accent-color: var(--input-accent-color, var(--color-ink)); + background-color: var(--input-background, transparent); + border-radius: var(--input-border-radius, 0.5em); + border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-subtle-dark)); + color: var(--input-color, var(--color-ink)); + font-size: max(16px, 1em); inline-size: 100%; - overflow: clip; + line-height: inherit; + max-inline-size: 100%; + padding: var(--input-padding, 0.5em 0.8em); + resize: none; - &::file-selector-button { - appearance: none; - cursor: pointer; - opacity: 0; + &:autofill, + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus { + -webkit-text-fill-color: var(--color-ink); + -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset; } - &:focus, - &:focus-visible { + &:where(:not(:active)):focus { --input-border-color: var(--color-selected-dark); - --input-border-radius: 8px; - --input-border-size: 0.15rem; + --hover-color: var(--color-selected-dark); + --outline-size: 0; + --outline-color: transparent; + + filter: var(--hover-filter); + box-shadow: 0 0 0 var(--hover-size) var(--hover-color); } } - &:is(.avatar) { - img, + .input--file { + border: 0; + cursor: pointer; + display: grid; + inline-size: auto; + place-items: center; + + > * { + grid-area: 1 / 1; + } + + img { + border-radius: 0.4em; + } + input[type="file"] { - border-radius: 50%; + --input-border-color: transparent; + --input-border-radius: 8px; + + block-size: 100%; + cursor: pointer; + font-size: 0; + inline-size: 100%; + overflow: clip; + + &::file-selector-button { + appearance: none; + cursor: pointer; + opacity: 0; + } + + &:focus, + &:focus-visible { + --input-border-color: var(--color-selected-dark); + --input-border-radius: 8px; + --input-border-size: 0.15rem; + } + } + + &:is(.avatar) { + img, + input[type="file"] { + border-radius: 50%; + } } } -} -.input--select { - --input-border-radius: 2em; - --input-padding: 0.5em 1.8em 0.5em 1.2em; - - -webkit-appearance: none; - appearance: none; - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E"); - background-size: 0.5em; - background-position: center right 0.9em; - background-repeat: no-repeat; - text-align: start; + .input--select { + --input-border-radius: 2em; + --input-padding: 0.5em 1.8em 0.5em 1.2em; - @media (prefers-color-scheme: dark) { - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E"); - } -} + -webkit-appearance: none; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E"); + background-size: 0.5em; + background-position: center right 0.9em; + background-repeat: no-repeat; + text-align: start; -.input--textarea { - --input-padding: 0; - - line-height: inherit; - min-block-size: calc(3lh + (2 * var(--input-padding))); - min-inline-size: 100%; - padding-block: var(--input-padding); - padding-inline: calc(var(--input-padding) + calc((1lh - 1ex) / 2)); - - @supports (field-sizing: content) { - field-sizing: content; - max-block-size: calc(3lh + (2 * var(--input-padding))); - min-block-size: calc(1lh + (2 * var(--input-padding))); - } -} - -.input--invisible { - background-color: transparent; - block-size: 5px; - border: none; - inline-size: 5px; - opacity: 0.1; - - &:focus { - outline: none; - } -} - -/* Switches */ -.switch { - block-size: 1.75em; - border-radius: 2em; - display: inline-flex; - inline-size: 3em; - position: relative; - - &:has(:focus-visible) { - .switch__btn { - box-shadow: - 0 0 0 var(--outline-size) var(--color-bg), - 0 0 0 calc(var(--outline-size) * 2) var(--color-ink); + @media (prefers-color-scheme: dark) { + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E"); } } -} -.switch__input { - block-size: 0; - inline-size: 0; - opacity: 0.1; -} + .input--textarea { + --input-padding: 0; -.switch__btn { - background-color: var(--color-subtle-dark); - border-radius: 2em; - cursor: pointer; - inset: 0; - position: absolute; - transition: 150ms ease; + line-height: inherit; + min-block-size: calc(3lh + (2 * var(--input-padding))); + min-inline-size: 100%; + padding-block: var(--input-padding); + padding-inline: calc(var(--input-padding) + calc((1lh - 1ex) / 2)); - &::before { - background-color: var(--color-ink-reversed); - block-size: 1.35em; - border-radius: 50%; - content: ""; - inline-size: 1.35em; - inset-block-end: 0.2em; - inset-inline-start: 0.2em; + @supports (field-sizing: content) { + field-sizing: content; + max-block-size: calc(3lh + (2 * var(--input-padding))); + min-block-size: calc(1lh + (2 * var(--input-padding))); + } + } + + .input--invisible { + background-color: transparent; + block-size: 5px; + border: none; + inline-size: 5px; + opacity: 0.1; + + &:focus { + outline: none; + } + } + + /* Switches */ + .switch { + block-size: 1.75em; + border-radius: 2em; + display: inline-flex; + inline-size: 3em; + position: relative; + + &:has(:focus-visible) { + .switch__btn { + box-shadow: + 0 0 0 var(--outline-size) var(--color-bg), + 0 0 0 calc(var(--outline-size) * 2) var(--color-ink); + } + } + } + + .switch__input { + block-size: 0; + inline-size: 0; + opacity: 0.1; + } + + .switch__btn { + background-color: var(--color-subtle-dark); + border-radius: 2em; + cursor: pointer; + inset: 0; position: absolute; transition: 150ms ease; - } - - .switch__input:disabled + & { - background-color: var(--color-subtle-dark) !important; - cursor: not-allowed; - } - - .switch__input:checked + & { - background-color: var(--color-link); &::before { - transform: translateX(1.2em); + background-color: var(--color-ink-reversed); + block-size: 1.35em; + border-radius: 50%; + content: ""; + inline-size: 1.35em; + inset-block-end: 0.2em; + inset-inline-start: 0.2em; + position: absolute; + transition: 150ms ease; + } + + .switch__input:disabled + & { + background-color: var(--color-subtle-dark) !important; + cursor: not-allowed; + } + + .switch__input:checked + & { + background-color: var(--color-link); + + &::before { + transform: translateX(1.2em); + } } } -} -/* Containers that act like (and contain) inputs */ -.input--actor { - transition: box-shadow 150ms ease, outline-offset 150ms ease; + /* Containers that act like (and contain) inputs */ + .input--actor { + transition: box-shadow 150ms ease, outline-offset 150ms ease; - &:focus-within { - --input-border-color: var(--color-selected-dark); - --hover-color: var(--color-selected-dark); - --outline-size: 0; + &:focus-within { + --input-border-color: var(--color-selected-dark); + --hover-color: var(--color-selected-dark); + --outline-size: 0; - filter: var(--hover-filter); - box-shadow: 0 0 0 var(--hover-size) var(--hover-color); + filter: var(--hover-filter); + box-shadow: 0 0 0 var(--hover-size) var(--hover-color); + } + + .input { + --input-padding: 0; + --input-border-radius: 0; + --input-background: transparent; + --input-border-size: 0; + --hover-size: 0; + --outline-size: 0; + --outline-color: transparent; + + inline-size: 100%; + outline: 0; + } + + &:has(.input:is( + :autofill, + :-webkit-autofill, + :-webkit-autofill:hover, + :-webkit-autofill:focus)) { + -webkit-text-fill-color: var(--color-text); + -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset; + } } - .input { - --input-padding: 0; - --input-border-radius: 0; - --input-background: transparent; - --input-border-size: 0; - --hover-size: 0; - --outline-size: 0; - --outline-color: transparent; - - inline-size: 100%; - outline: 0; - } - - &:has(.input:is( - :autofill, - :-webkit-autofill, - :-webkit-autofill:hover, - :-webkit-autofill:focus)) { - -webkit-text-fill-color: var(--color-text); - -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset; + .input--hidden { + block-size: 0; + inline-size: 0; + opacity: 0; + padding: 0; } } - -.input--hidden { - block-size: 0; - inline-size: 0; - opacity: 0; - padding: 0; -} diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css index cd27f6305..b6ac9045a 100644 --- a/app/assets/stylesheets/layout.css +++ b/app/assets/stylesheets/layout.css @@ -1,104 +1,106 @@ -body { - display: grid; - grid-template-rows: auto 1fr auto 9em; -} - -:where(#main) { - inline-size: 100dvw; - margin-inline: auto; - max-inline-size: 100dvw; - padding-inline: clamp(var(--inline-space), 3cqmin, calc(var(--inline-space) * 3)); - text-align: center; - - @media print { - font-size: 11pt; - inline-size: unset; - line-height: 1.3; - margin: 0; - orphans: 3; - padding: 0; - text-align: justify; - text-justify: distribute; - widows: 2; +@layer components { + body { + display: grid; + grid-template-rows: auto 1fr auto 9em; } -} -:where(#footer) { - max-inline-size: 100dvw; + :where(#main) { + inline-size: 100dvw; + margin-inline: auto; + max-inline-size: 100dvw; + padding-inline: clamp(var(--inline-space), 3cqmin, calc(var(--inline-space) * 3)); + text-align: center; - > nav { - padding-inline: var(--inline-space); + @media print { + font-size: 11pt; + inline-size: unset; + line-height: 1.3; + margin: 0; + orphans: 3; + padding: 0; + text-align: justify; + text-justify: distribute; + widows: 2; + } } -} -:where(#header) { - max-inline-size: 100dvw; - view-transition-name: header; + :where(#footer) { + max-inline-size: 100dvw; - > nav { - font-size: var(--text-small); - view-transition-name: nav; + > nav { + padding-inline: var(--inline-space); + } + } - header { - h1 { - font-weight: 800; - margin-block-start: 0.2em; - text-align: center; + :where(#header) { + max-inline-size: 100dvw; + view-transition-name: header; + + > nav { + font-size: var(--text-small); + view-transition-name: nav; + + header { + h1 { + font-weight: 800; + margin-block-start: 0.2em; + text-align: center; + + a:not([class]) { + background-color: transparent; + font-weight: inherit; + text-decoration: underline; + } + } a:not([class]) { - background-color: transparent; - font-weight: inherit; - text-decoration: underline; - } - } + background-color: var(--color-subtle-light); + border-radius: 2em; + color: var(--color-ink); + font-weight: 500; + padding: 0.2em 0.8em; + text-decoration: none; - a:not([class]) { - background-color: var(--color-subtle-light); - border-radius: 2em; - color: var(--color-ink); - font-weight: 500; - padding: 0.2em 0.8em; - text-decoration: none; - - @media (hover: hover) { - &:hover { - background-color: var(--color-subtle); - text-decoration: none; + @media (hover: hover) { + &:hover { + background-color: var(--color-subtle); + text-decoration: none; + } } } } } + + > * { + align-items: center; + display: flex; + gap: 1ch; + justify-content: center; + padding: var(--block-space-half) var(--inline-space); + } + + .btn { + flex-shrink: 0; + } } - > * { - align-items: center; - display: flex; - gap: 1ch; - justify-content: center; - padding: var(--block-space-half) var(--inline-space); + :is(#header, #footer) { + @media print { + display: none; + } } - .btn { - flex-shrink: 0; - } -} - -:is(#header, #footer) { - @media print { - display: none; - } -} - -.skip-navigation { - --left-offset: -999em; - - inset-block-start: 4rem; - inset-inline-start: var(--left-offset); - position: absolute; - white-space: nowrap; - z-index: 11; - - &:focus { - --left-offset: var(--inline-space); + .skip-navigation { + --left-offset: -999em; + + inset-block-start: 4rem; + inset-inline-start: var(--left-offset); + position: absolute; + white-space: nowrap; + z-index: 11; + + &:focus { + --left-offset: var(--inline-space); + } } } diff --git a/app/assets/stylesheets/lightbox.css b/app/assets/stylesheets/lightbox.css index b2508149e..6dabfefc4 100644 --- a/app/assets/stylesheets/lightbox.css +++ b/app/assets/stylesheets/lightbox.css @@ -1,57 +1,59 @@ -.lightbox { - --backdrop-speed: 150ms; +@layer components { + .lightbox { + --backdrop-speed: 150ms; - background-color: oklch(var(--lch-white) / 0.66); - block-size: 100dvh; - border: 0; - inline-size: 100dvw; - inset: 0; - margin: auto; - max-height: unset; - max-width: unset; - overflow: hidden; - padding: var(--block-space-half) var(--inline-space); - - &::backdrop { - -webkit-backdrop-filter: blur(66px); - backdrop-filter: blur(66px); - background-color: var(--color-ink); - opacity: 0; - transition: - display var(--backdrop-speed) allow-discrete, - opacity var(--backdrop-speed), - overlay var(--backdrop-speed) allow-discrete; - } - - &[open] { - display: grid; - opacity: 1; - place-items: center; + background-color: oklch(var(--lch-white) / 0.66); + block-size: 100dvh; + border: 0; + inline-size: 100dvw; + inset: 0; + margin: auto; + max-height: unset; + max-width: unset; + overflow: hidden; + padding: var(--block-space-half) var(--inline-space); &::backdrop { - opacity: 0.75; + -webkit-backdrop-filter: blur(66px); + backdrop-filter: blur(66px); + background-color: var(--color-ink); + opacity: 0; + transition: + display var(--backdrop-speed) allow-discrete, + opacity var(--backdrop-speed), + overlay var(--backdrop-speed) allow-discrete; } - } - @starting-style { &[open] { - opacity: 0; + display: grid; + opacity: 1; + place-items: center; + + &::backdrop { + opacity: 0.75; + } } - &[open]::backdrop { - opacity: 0; + @starting-style { + &[open] { + opacity: 0; + } + + &[open]::backdrop { + opacity: 0; + } } } -} -.lightbox__btn { - align-self: start; - grid-area: 1/1; - justify-self: end; -} + .lightbox__btn { + align-self: start; + grid-area: 1/1; + justify-self: end; + } -.lightbox__image { - grid-area: 1/1; - max-inline-size: calc(100dvw - (var(--inline-space) * 2)); - max-block-size: calc(100dvh - (var(--block-space) * 2)); + .lightbox__image { + grid-area: 1/1; + max-inline-size: calc(100dvw - (var(--inline-space) * 2)); + max-block-size: calc(100dvh - (var(--block-space) * 2)); + } } diff --git a/app/assets/stylesheets/markdown.css b/app/assets/stylesheets/markdown.css index 6ddc326c4..3e91fb41e 100644 --- a/app/assets/stylesheets/markdown.css +++ b/app/assets/stylesheets/markdown.css @@ -1,30 +1,32 @@ -.heading__link { - --hover-size: 0; - --opacity: 0.5; - --size: 0.8em; +@layer components { + .heading__link { + --hover-size: 0; + --opacity: 0.5; + --size: 0.8em; - background: url(link.svg) no-repeat center bottom 0.2em; - background-size: var(--size); - block-size: 1em; - color: var(--color-link); - display: inline-flex; - font-size: var(--size); - inline-size: var(--size); - padding: 1em 0 0; - opacity: var(--opacity); - overflow: hidden; - transition: opacity 300ms ease; - vertical-align: middle; + background: url(link.svg) no-repeat center bottom 0.2em; + background-size: var(--size); + block-size: 1em; + color: var(--color-link); + display: inline-flex; + font-size: var(--size); + inline-size: var(--size); + padding: 1em 0 0; + opacity: var(--opacity); + overflow: hidden; + transition: opacity 300ms ease; + vertical-align: middle; - @media (hover: hover) { - --opacity: 0; + @media (hover: hover) { + --opacity: 0; - :is(h1, h2, h3, h4, h5, h6):hover & { - --opacity: 0.5; + :is(h1, h2, h3, h4, h5, h6):hover & { + --opacity: 0.5; + } + } + + @media (prefers-color-scheme: dark) { + filter: invert(1); } } - - @media (prefers-color-scheme: dark) { - filter: invert(1); - } } diff --git a/app/assets/stylesheets/notifications.css b/app/assets/stylesheets/notifications.css index c99d96ef9..45eb46929 100644 --- a/app/assets/stylesheets/notifications.css +++ b/app/assets/stylesheets/notifications.css @@ -1,90 +1,92 @@ -.notification-tray { - inset: auto var(--inline-space) var(--block-space-half) auto; +@layer components { + .notification-tray { + inset: auto var(--inline-space) var(--block-space-half) auto; - .notification { - &:nth-child(1n + 7) { display: none; } + .notification { + &:nth-child(1n + 7) { display: none; } + } } -} -.notification-tray__actions { - .notification-tray:not(:has(.notification)) & { - .notification-tray__all_action { - --btn-border-radius: 50%; - --btn-padding: 0; + .notification-tray__actions { + .notification-tray:not(:has(.notification)) & { + .notification-tray__all_action { + --btn-border-radius: 50%; + --btn-padding: 0; - aspect-ratio: 1; - block-size: var(--btn-size); - display: grid; - inline-size: var(--btn-size); - place-items: center; + aspect-ratio: 1; + block-size: var(--btn-size); + display: grid; + inline-size: var(--btn-size); + place-items: center; - > * { - grid-area: 1/1; + > * { + grid-area: 1/1; + } + + span { + display: none; + } } - span { - display: none; + .notification-tray__read_action { + visibility: hidden; } } + } - .notification-tray__read_action { + .notification__content { + --border-color: transparent; + --border-radius: 0.2em; + --padding: 0.75em 0.5em; + + padding: var(--padding); + + @media (prefers-color-scheme: dark) { + --border-color: var(--color-subtle-dark); + } + + .notificiations-list--read & { + --border-color: var(--color-subtle); + + box-shadow: none; + } + } + + .notification__title { + padding-inline-end: calc(var(--inline-space-half) + 1.2em); + } + + .notification__unread_indicator { + --btn-background: var(--color-marker); + --btn-border-color: var(--color-bg); + --btn-icon-size: 0.7em; + --btn-padding: 0; + --btn-size: 1.2em; + --hover-size: 0; + + inset: var(--block-space) var(--inline-space) auto auto; + position: absolute; + scale: 0.7; + + img { visibility: hidden; } - } -} -.notification__content { - --border-color: transparent; - --border-radius: 0.2em; - --padding: 0.75em 0.5em; + @media (hover: hover) { + &:hover { + --btn-background: var(--color-subtle-dark); + --btn-border-color: var(--color-subtle-dark); - padding: var(--padding); + scale: 1; - @media (prefers-color-scheme: dark) { - --border-color: var(--color-subtle-dark); - } - - .notificiations-list--read & { - --border-color: var(--color-subtle); - - box-shadow: none; - } -} - -.notification__title { - padding-inline-end: calc(var(--inline-space-half) + 1.2em); -} - -.notification__unread_indicator { - --btn-background: var(--color-marker); - --btn-border-color: var(--color-bg); - --btn-icon-size: 0.7em; - --btn-padding: 0; - --btn-size: 1.2em; - --hover-size: 0; - - inset: var(--block-space) var(--inline-space) auto auto; - position: absolute; - scale: 0.7; - - img { - visibility: hidden; - } - - @media (hover: hover) { - &:hover { - --btn-background: var(--color-subtle-dark); - --btn-border-color: var(--color-subtle-dark); - - scale: 1; - - img { - visibility: unset; + img { + visibility: unset; + } } } - } - .notificiations-list--read & { - display: none; + .notificiations-list--read & { + display: none; + } } } diff --git a/app/assets/stylesheets/panels.css b/app/assets/stylesheets/panels.css index 5109cab91..86126c15e 100644 --- a/app/assets/stylesheets/panels.css +++ b/app/assets/stylesheets/panels.css @@ -1,13 +1,15 @@ -.panel { - background-color: var(--color-bg); - border: var(--panel-border-size, 1px) solid var(--panel-border-color, var(--color-subtle)); - color: var(--color-ink); - border-radius: var(--panel-border-radius, 1em); - inline-size: var(--panel-size, 60ch); - max-inline-size: 100%; - padding: var(--panel-padding, calc(var(--block-space) * 2)); +@layer components { + .panel { + background-color: var(--color-bg); + border: var(--panel-border-size, 1px) solid var(--panel-border-color, var(--color-subtle)); + color: var(--color-ink); + border-radius: var(--panel-border-radius, 1em); + inline-size: var(--panel-size, 60ch); + max-inline-size: 100%; + padding: var(--panel-padding, calc(var(--block-space) * 2)); - @media (prefers-color-scheme: dark) { - --panel-border-color: var(--color-subtle-dark); + @media (prefers-color-scheme: dark) { + --panel-border-color: var(--color-subtle-dark); + } } } diff --git a/app/assets/stylesheets/pins.css b/app/assets/stylesheets/pins.css index 889a0bfbe..d5563d5dd 100644 --- a/app/assets/stylesheets/pins.css +++ b/app/assets/stylesheets/pins.css @@ -1,52 +1,54 @@ -.pin-tray { - inset: auto auto var(--block-space-half) var(--inline-space); +@layer components { + .pin-tray { + inset: auto auto var(--block-space-half) var(--inline-space); - .pin { - --z: calc(10 - var(--position)); + .pin { + --z: calc(10 - var(--position)); - &:nth-child(7) { --position: 7; } - &:nth-child(8) { --position: 8; } - &:nth-child(9) { --position: 9; } - &:nth-child(10) { --position: 10; } + &:nth-child(7) { --position: 7; } + &:nth-child(8) { --position: 8; } + &:nth-child(9) { --position: 9; } + &:nth-child(10) { --position: 10; } - &:nth-child(1n + 11) { display: none; } + &:nth-child(1n + 11) { display: none; } + } + } + + .pin__bucket { + background-color: var(--bubble-color); + font-weight: 800; + letter-spacing: 0.3ch; + padding: 0.3em 0.6em 0.3em 1.5em; + } + + .pin__content { + --border-color: transparent; + --border-radius: 0.2em; + --padding: 0.75em; + + padding: var(--padding); + + @media (prefers-color-scheme: dark) { + --border-color: var(--color-subtle-dark); + } + } + + .pin__header { + margin: calc(var(--padding) * -1) calc(var(--padding) * -1) auto; + padding: 0 0.2em 0 0; + } + + .pin__stage { + --border-color: currentColor; + + padding: 0.2em 0.5em; + } + + .pin__tags { + color: var(--bubble-color); + } + + .pin__title { + margin-block-start: 0.3rem; } } - -.pin__bucket { - background-color: var(--bubble-color); - font-weight: 800; - letter-spacing: 0.3ch; - padding: 0.3em 0.6em 0.3em 1.5em; -} - -.pin__content { - --border-color: transparent; - --border-radius: 0.2em; - --padding: 0.75em; - - padding: var(--padding); - - @media (prefers-color-scheme: dark) { - --border-color: var(--color-subtle-dark); - } -} - -.pin__header { - margin: calc(var(--padding) * -1) calc(var(--padding) * -1) auto; - padding: 0 0.2em 0 0; -} - -.pin__stage { - --border-color: currentColor; - - padding: 0.2em 0.5em; -} - -.pin__tags { - color: var(--bubble-color); -} - -.pin__title { - margin-block-start: 0.3rem; -} \ No newline at end of file diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css index b63a3f4be..5c8ec1b95 100644 --- a/app/assets/stylesheets/popup.css +++ b/app/assets/stylesheets/popup.css @@ -1,63 +1,40 @@ -.popup { - --panel-border-radius: 0.5em; - --panel-padding: 0.4em 0.5em 0.5em; - --panel-size: auto; - - inline-size: auto; - inset: 0 auto auto 0; - min-inline-size: 20ch; - max-inline-size: 40ch; - position: absolute; - z-index: 2; +@layer components { + .popup { + --panel-border-radius: 0.5em; + --panel-padding: 0.4em 0.5em 0.5em; + --panel-size: auto; - &[open] { - display: flex; - } -} + inline-size: auto; + inset: 0 auto auto 0; + min-inline-size: 20ch; + max-inline-size: 40ch; + position: absolute; + z-index: 2; -.popup__item { - --btn-background: var(--color-subtle-light); - --btn-border-radius: 0.3em; - --btn-border-size: 0; - --btn-font-weight: 500; - --btn-padding: var(--inline-space-half) var(--inline-space-half) var(--inline-space-half) var(--inline-space); - --hover-size: 0; - --outline-color: transparent; - - justify-content: start; - - &::after { - border-radius: var(--btn-border-radius); - border: var(--btn-border-size) solid var(--btn-border-color, var(--color-subtle)); - content: ""; - display: block; - inline-size: calc(100% - var(--btn-padding) * 2); - block-size: calc(100% - var(--btn-padding) * 2); - - } - - @media (any-hover: hover) { - &:where(:not(:active):hover) { - --btn-background: var(--color-selected); + &[open] { + display: flex; } } - &:has(input:checked) { - --btn-background: var(--color-selected); - --btn-color: var(--color-ink); + .popup__item { + --btn-background: var(--color-subtle-light); + --btn-border-radius: 0.3em; + --btn-border-size: 0; + --btn-font-weight: 500; + --btn-padding: var(--inline-space-half) var(--inline-space-half) var(--inline-space-half) var(--inline-space); + --hover-size: 0; + --outline-color: transparent; - img { - filter: invert(0); + justify-content: start; - &.checked { - display: block; - } - } + &::after { + border-radius: var(--btn-border-radius); + border: var(--btn-border-size) solid var(--btn-border-color, var(--color-subtle)); + content: ""; + display: block; + inline-size: calc(100% - var(--btn-padding) * 2); + block-size: calc(100% - var(--btn-padding) * 2); - @media (prefers-color-scheme: dark) { - img { - filter: invert(1); - } } @media (any-hover: hover) { @@ -65,18 +42,43 @@ --btn-background: var(--color-selected); } } + + &:has(input:checked) { + --btn-background: var(--color-selected); + --btn-color: var(--color-ink); + + img { + filter: invert(0); + + &.checked { + display: block; + } + } + + @media (prefers-color-scheme: dark) { + img { + filter: invert(1); + } + } + + @media (any-hover: hover) { + &:where(:not(:active):hover) { + --btn-background: var(--color-selected); + } + } + } + + img.checked { + block-size: 1em; + inline-size: 1em; + } } - img.checked { - block-size: 1em; - inline-size: 1em; + .popup__list { + row-gap: 2px; + } + + .popup__title { + font-weight: 800; } } - -.popup__list { - row-gap: 2px; -} - -.popup__title { - font-weight: 800; -} diff --git a/app/assets/stylesheets/reactions.css b/app/assets/stylesheets/reactions.css index 70c8626aa..9c0a4e410 100644 --- a/app/assets/stylesheets/reactions.css +++ b/app/assets/stylesheets/reactions.css @@ -1,88 +1,90 @@ -.reactions { - --column-gap: 0.4ch; - --reaction-border-color: var(--color-subtle); - --row-gap: 0; +@layer components { + .reactions { + --column-gap: 0.4ch; + --reaction-border-color: var(--color-subtle); + --row-gap: 0; - margin-block-start: calc(var(--block-space-half) / 2); - margin-inline: calc(var(--column-gap) / -1); -} - -.reaction { - border: 1px solid var(--reaction-border-color); - border-radius: 4rem; - margin-block-start: calc(var(--block-space-half) / 2); - opacity: 1; - padding: 0.1em 0.25em 0.1em 0.12em; - transition: opacity 100ms ease-in-out, box-shadow 150ms ease-in-out, transform 150ms ease-in-out; - - .btn { - font-size: 0.6em; - - &:is(.reaction__delete) { - display: none; - - .expanded & { - display: flex; - } - } + margin-block-start: calc(var(--block-space-half) / 2); + margin-inline: calc(var(--column-gap) / -1); } - @media (any-hover: hover) { - &:where(:not(:active):hover) { - --reaction-border-color: var(--color-subtle-dark); + .reaction { + border: 1px solid var(--reaction-border-color); + border-radius: 4rem; + margin-block-start: calc(var(--block-space-half) / 2); + opacity: 1; + padding: 0.1em 0.25em 0.1em 0.12em; + transition: opacity 100ms ease-in-out, box-shadow 150ms ease-in-out, transform 150ms ease-in-out; + + .btn { + font-size: 0.6em; + + &:is(.reaction__delete) { + display: none; + + .expanded & { + display: flex; + } + } + } + + @media (any-hover: hover) { + &:where(:not(:active):hover) { + --reaction-border-color: var(--color-subtle-dark); + + box-shadow: 0 0 0 var(--hover-size) var(--hover-color); + } + } + + &:has(.reaction__input):focus-within { + --hover-color: var(--color-selected-dark); + --reaction-border-color: var(--color-selected-dark); box-shadow: 0 0 0 var(--hover-size) var(--hover-color); } } - &:has(.reaction__input):focus-within { - --hover-color: var(--color-selected-dark); - --reaction-border-color: var(--color-selected-dark); + .btn:is(.reaction__action) { + --btn-border-color: var(--reaction-border-color); - box-shadow: 0 0 0 var(--hover-size) var(--hover-color); - } -} + font-size: 0.74em; + margin-block-start: calc(var(--block-space-half) / 2); -.btn:is(.reaction__action) { - --btn-border-color: var(--reaction-border-color); - - font-size: 0.74em; - margin-block-start: calc(var(--block-space-half) / 2); - - @media (any-hover: hover) { - &:where(:not(:active):hover) { - --reaction-border-color: var(--color-subtle-dark); + @media (any-hover: hover) { + &:where(:not(:active):hover) { + --reaction-border-color: var(--color-subtle-dark); + } } } -} -.reaction__form { - transition: none; + .reaction__form { + transition: none; - &.expanded { - animation: react 0.2s both; - transform: translate3d(0, 0, 0); + &.expanded { + animation: react 0.2s both; + transform: translate3d(0, 0, 0); + } + + .reaction__form-label:focus { + outline: none; + } } - .reaction__form-label:focus { - outline: none; + .reaction__input { + --hover-size: 0; + --input-background: transparent; + --input-border-size: 0; + --input-padding: 0; + --outline-size: 0; + + box-shadow: none; + display: inherit; + max-inline-size: 16ch; + min-inline-size: 2em; + outline: 0; + } + + .reaction--deleting { + animation: scale-fade-out 0.2s both; } } - -.reaction__input { - --hover-size: 0; - --input-background: transparent; - --input-border-size: 0; - --input-padding: 0; - --outline-size: 0; - - box-shadow: none; - display: inherit; - max-inline-size: 16ch; - min-inline-size: 2em; - outline: 0; -} - -.reaction--deleting { - animation: scale-fade-out 0.2s both; -} \ No newline at end of file diff --git a/app/assets/stylesheets/reset.css b/app/assets/stylesheets/reset.css new file mode 100644 index 000000000..1e0daadcc --- /dev/null +++ b/app/assets/stylesheets/reset.css @@ -0,0 +1,86 @@ +@layer reset { + /* + * Modern CSS Reset + * @link https://github.com/hankchizljaw/modern-css-reset + */ + + /* Box sizing rules */ + *, + *::before, + *::after { + box-sizing: border-box; + } + + /* Remove default margin */ + body, + h1, + h2, + h3, + h4, + h5, + h6 { + margin: 0; + } + + p, + li, + h1, + h2, + h3, + h4 { + /* Help prevent overflow of long words/names/URLs */ + word-break: break-word; + + /* Optional, not supported for all languages */ + /* hyphens: auto; */ + } + + html, + body { + overflow-x: hidden; + } + + html { + scroll-behavior: smooth; + } + + /* Set core body defaults */ + body { + min-height: 100dvh; + font-family: sans-serif; + font-size: 100%; + line-height: 1.5; + text-rendering: optimizeSpeed; + } + + /* Make images easier to work with */ + img { + display: block; + max-inline-size: 100%; + } + + /* Inherit fonts for inputs and buttons */ + input, + button, + textarea, + select { + font: inherit; + } + + /* Remove all animations and transitions for people that prefer not to see them */ + @media (prefers-reduced-motion: reduce) { + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } + + html { + scroll-behavior: initial; + } + } +} diff --git a/app/assets/stylesheets/syntax.css b/app/assets/stylesheets/syntax.css index 148a02a6e..0fb7e193b 100644 --- a/app/assets/stylesheets/syntax.css +++ b/app/assets/stylesheets/syntax.css @@ -1,106 +1,108 @@ -.highlight { - /* Named color values */ - --keyword: lch(50.16 68.78 25.97); - --entity: lch(39.03 73.26 304.21); - --constant: lch(39.68 63.13 279.47); - --string: lch(19.22 34.92 275.47); - --variable: lch(57.9 81.69 53.33); - --comment: lch(47.93 7 254.8); - --entity-tag: lch(39.64 68.17 142.85); - --markup-heading: lch(39.68 63.13 279.47); - --markup-list: lch(40.44 43.36 84.69); - --markup-inserted: lch(39.64 68.17 142.85); - --markup-deleted: lch(39.64 68.17 31.45); +@layer components { + .highlight { + /* Named color values */ + --keyword: lch(50.16 68.78 25.97); + --entity: lch(39.03 73.26 304.21); + --constant: lch(39.68 63.13 279.47); + --string: lch(19.22 34.92 275.47); + --variable: lch(57.9 81.69 53.33); + --comment: lch(47.93 7 254.8); + --entity-tag: lch(39.64 68.17 142.85); + --markup-heading: lch(39.68 63.13 279.47); + --markup-list: lch(40.44 43.36 84.69); + --markup-inserted: lch(39.64 68.17 142.85); + --markup-deleted: lch(39.64 68.17 31.45); - /* Redefine named color values for dark mode */ - @media (prefers-color-scheme: dark) { - --keyword: lch(67.63 58.99 30.64); - --entity: lch(75.13 46.73 306.74); - --constant: lch(74.9 39.71 255.53); - --string: lch(74.9 39.71 255.53); - --variable: lch(76.17 61.1 61.97); - --comment: lch(60.83 6.66 254.46); - --entity-tag: lch(83.65 59.31 141.61); - --markup-heading: lch(47.93 71.67 280.72); - --markup-list: lch(83.84 57.9 85.03); - --markup-inserted: lch(83.65 59.31 141.61); - --markup-deleted: lch(73.8% 65 29.18); - } + /* Redefine named color values for dark mode */ + @media (prefers-color-scheme: dark) { + --keyword: lch(67.63 58.99 30.64); + --entity: lch(75.13 46.73 306.74); + --constant: lch(74.9 39.71 255.53); + --string: lch(74.9 39.71 255.53); + --variable: lch(76.17 61.1 61.97); + --comment: lch(60.83 6.66 254.46); + --entity-tag: lch(83.65 59.31 141.61); + --markup-heading: lch(47.93 71.67 280.72); + --markup-list: lch(83.84 57.9 85.03); + --markup-inserted: lch(83.65 59.31 141.61); + --markup-deleted: lch(73.8% 65 29.18); + } - color: var(--color-ink); - - .w { color: var(--color-ink); - } - .k, .kd, .kn, .kp, .kr, .kt, .kv { - color: var(--keyword); - } + .w { + color: var(--color-ink); + } - .gr { - color: var(--color-subtle-light); - } + .k, .kd, .kn, .kp, .kr, .kt, .kv { + color: var(--keyword); + } - .gd { - color: var(--markup-deleted); - background-color: light-dark(lch(39.64 68.17 31.45 / 0.15), lch(39.64 68.17 31.45 / 0.2)); - } + .gr { + color: var(--color-subtle-light); + } - .nb, .nc, .no, .nn { - color: var(--variable); - } + .gd { + color: var(--markup-deleted); + background-color: light-dark(lch(39.64 68.17 31.45 / 0.15), lch(39.64 68.17 31.45 / 0.2)); + } - .sr, .na, .nt { - color: var(--entity-tag); - } + .nb, .nc, .no, .nn { + color: var(--variable); + } - .gi { - color: var(--markup-inserted); - background-color: light-dark(lch(49.14 52.75 142.85 / 0.15), lch(83.65 59.31 141.61 / 0.15)); - } + .sr, .na, .nt { + color: var(--entity-tag); + } - .kc, .l, .ld, .m, .mb, .mf, .mh, .mi, .il, .mo, .mx, .sb, .bp, .ne, .nl, .py, .nv, .vc, .vg, .vi, .vm, .o, .ow { - color: var(--constant); - } + .gi { + color: var(--markup-inserted); + background-color: light-dark(lch(49.14 52.75 142.85 / 0.15), lch(83.65 59.31 141.61 / 0.15)); + } - .gh { - color: var(--constant); - font-weight: bold; - } + .kc, .l, .ld, .m, .mb, .mf, .mh, .mi, .il, .mo, .mx, .sb, .bp, .ne, .nl, .py, .nv, .vc, .vg, .vi, .vm, .o, .ow { + color: var(--constant); + } - .gu { - color: var(--constant); - font-weight: bold; - } + .gh { + color: var(--constant); + font-weight: bold; + } - .s, .sa, .sc, .dl, .sd, .s2, .se, .sh, .sx, .s1, .ss { - color: var(--string); - } + .gu { + color: var(--constant); + font-weight: bold; + } - .nd, .nf, .fm { - color: var(--entity); - } + .s, .sa, .sc, .dl, .sd, .s2, .se, .sh, .sx, .s1, .ss { + color: var(--string); + } - .err { - color: var(--color-ink-reversed); - background-color: var(--markup-deleted); - } + .nd, .nf, .fm { + color: var(--entity); + } - .c, .ch, .cd, .cm, .cp, .cpf, .c1, .cs, .gl, .gt { - color: var(--comment); - } + .err { + color: var(--color-ink-reversed); + background-color: var(--markup-deleted); + } - .ni, .si { - color: var(--storage-modifier-import); - } + .c, .ch, .cd, .cm, .cp, .cpf, .c1, .cs, .gl, .gt { + color: var(--comment); + } - .ge { - color: var(--storage-modifier-import); - font-style: italic; - } + .ni, .si { + color: var(--storage-modifier-import); + } - .gs { - color: var(--storage-modifier-import); - font-weight: bold; + .ge { + color: var(--storage-modifier-import); + font-style: italic; + } + + .gs { + color: var(--storage-modifier-import); + font-weight: bold; + } } } diff --git a/app/assets/stylesheets/tags.css b/app/assets/stylesheets/tags.css index 6254755fe..2b667e771 100644 --- a/app/assets/stylesheets/tags.css +++ b/app/assets/stylesheets/tags.css @@ -1,30 +1,32 @@ -.tag-picker { - --panel-border-radius: 2em; - --panel-padding: 0.5em 0.7em; - --panel-size: max-content; +@layer components { + .tag-picker { + --panel-border-radius: 2em; + --panel-padding: 0.5em 0.7em; + --panel-size: max-content; - inline-size: auto !important; - inset: 0 auto auto 0; - max-inline-size: var(--panel-size) !important; - position: absolute; - z-index: 2; + inline-size: auto !important; + inset: 0 auto auto 0; + max-inline-size: var(--panel-size) !important; + position: absolute; + z-index: 2; - &[open] { - display: flex; + &[open] { + display: flex; + } + + .input { + --input-padding: 0.2em 0.5em; + + inline-size: 18ch; + } } - .input { - --input-padding: 0.2em 0.5em; + .tag-picker__button { + font-size: 0.7em; + margin-inline-start: 0.5em; - inline-size: 18ch; - } -} - -.tag-picker__button { - font-size: 0.7em; - margin-inline-start: 0.5em; - - + .panel { - --panel-size: 18ch; + + .panel { + --panel-size: 18ch; + } } } diff --git a/app/assets/stylesheets/terminals.css b/app/assets/stylesheets/terminals.css index 788e8b508..d431d3cfa 100644 --- a/app/assets/stylesheets/terminals.css +++ b/app/assets/stylesheets/terminals.css @@ -1,56 +1,58 @@ -.terminal { - --row-gap: 0.2lh; +@layer components { + .terminal { + --row-gap: 0.2lh; - background-color: var(--color-ink); - color: var(--color-positive); - font-family: var(--font-mono); - font-size: var(--text-normal); - inset: auto 0 0 0; - padding: var(--block-space) calc(var(--tray-size) + var(--inline-space) * 3); - position: fixed; - z-index: 1; + background-color: var(--color-ink); + color: var(--color-positive); + font-family: var(--font-mono); + font-size: var(--text-normal); + inset: auto 0 0 0; + padding: var(--block-space) calc(var(--tray-size) + var(--inline-space) * 3); + position: fixed; + z-index: 1; - @media (prefers-color-scheme: dark) { - background-color: var(--color-always-black); - border-block-start: 1px solid var(--color-subtle-dark); - } - - .terminal__input { - --input-border-color: transparent; - --input-border-radius: 0.3em; - --hover-color: transparent; - --input-color: var(--color-positive); - --outline-size: 0; - --outline-color: transparent; - - accent-color: var(--color-positive); - caret-color: var(--color-positive); - font-family: inherit; - - &::placeholder { - color: var(--color-always-white); - opacity: 0.5; + @media (prefers-color-scheme: dark) { + background-color: var(--color-always-black); + border-block-start: 1px solid var(--color-subtle-dark); } - .terminal__link & { - color: var(--color-always-white); - opacity: 0.5; + .terminal__input { + --input-border-color: transparent; + --input-border-radius: 0.3em; + --hover-color: transparent; + --input-color: var(--color-positive); + --outline-size: 0; + --outline-color: transparent; + + accent-color: var(--color-positive); + caret-color: var(--color-positive); + font-family: inherit; + + &::placeholder { + color: var(--color-always-white); + opacity: 0.5; + } + + .terminal__link & { + color: var(--color-always-white); + opacity: 0.5; + } + } + } + + .terminal__link { + --hover-size: 0; + + color: var(--color-positive); + } + + .terminal__menu { + display: none; + list-style: none; + transition: display 1000ms allow-discrete; + + .terminal--open & { + display: flex; } } } - -.terminal__link { - --hover-size: 0; - - color: var(--color-positive); -} - -.terminal__menu { - display: none; - list-style: none; - transition: display 1000ms allow-discrete; - - .terminal--open & { - display: flex; - } -} diff --git a/app/assets/stylesheets/toggles.css b/app/assets/stylesheets/toggles.css index d37f6a21b..bec0960ed 100644 --- a/app/assets/stylesheets/toggles.css +++ b/app/assets/stylesheets/toggles.css @@ -1,13 +1,15 @@ -.toggler--toggled { - .toggler__visible-when-off { - display: none; +@layer components { + .toggler--toggled { + .toggler__visible-when-off { + display: none; + } + + .toggler__visible-when-on { + display: unset; + } } .toggler__visible-when-on { - display: unset; + display: none; } } - -.toggler__visible-when-on { - display: none; -} diff --git a/app/assets/stylesheets/translations.css b/app/assets/stylesheets/translations.css index 7cb7e921e..93c34e258 100644 --- a/app/assets/stylesheets/translations.css +++ b/app/assets/stylesheets/translations.css @@ -1,33 +1,35 @@ -/* Language translations */ -.lanuage-list-menu { - --max-width: 40ch; +@layer components { + /* Language translations */ + .lanuage-list-menu { + --max-width: 40ch; - background-color: var(--color-subtle); - border: 1px solid var(--color-subtle-dark); - border-radius: 0.5em; - inset: auto; - inline-size: max-content; - margin-inline: var(--inline-space); - max-inline-size: 40ch; - overflow: clip; - position: absolute; - z-index: 1; + background-color: var(--color-subtle); + border: 1px solid var(--color-subtle-dark); + border-radius: 0.5em; + inset: auto; + inline-size: max-content; + margin-inline: var(--inline-space); + max-inline-size: 40ch; + overflow: clip; + position: absolute; + z-index: 1; - @media (max-width: 70ch) { - max-inline-size: calc(var(--max-width) - var(--inline-space)); + @media (max-width: 70ch) { + max-inline-size: calc(var(--max-width) - var(--inline-space)); + } + + .popover-orientation-top & { + inset-block-end: 100%; + } } - .popover-orientation-top & { - inset-block-end: 100%; + .language-list { + display: grid; + gap: var(--block-space-half) var(--inline-space); + grid-template-rows: min-content; + grid-template-columns: min-content 1fr; + justify-content: start; + margin: 0; + text-align: start; } } - -.language-list { - display: grid; - gap: var(--block-space-half) var(--inline-space); - grid-template-rows: min-content; - grid-template-columns: min-content 1fr; - justify-content: start; - margin: 0; - text-align: start; -} diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index 0ae160385..fa208017d 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -2,28 +2,134 @@ --tray-size: max(20dvw, 18rem); } -.tray { - --height: calc(2.48lh + var(--block-space)); +@layer components { + .tray { + --height: calc(2.48lh + var(--block-space)); - background-color: transparent; - border: 0; - display: flex; - flex-direction: column; - inline-size: var(--tray-size); - justify-content: end; - padding: var(--block-space-half) var(--inline-space) calc(var(--block-space-half) / 2); - position: fixed; - z-index: 2; + background-color: transparent; + border: 0; + display: flex; + flex-direction: column; + inline-size: var(--tray-size); + justify-content: end; + padding: var(--block-space-half) var(--inline-space) calc(var(--block-space-half) / 2); + position: fixed; + z-index: 2; - .tray__item { + .tray__item { + --offset: calc((var(--position) - 1) * (var(--block-space) * -1)); + --position: 1; + --scale: calc(1 - var(--position) / 30); + --z: calc(6 - var(--position)); + + inset: auto 0 0; + inline-size: var(--tray-size); + outline: 0; + pointer-events: none; + position: absolute; + scale: var(--scale); + transform: translateY(var(--offset)); + transform-origin: center; + transition: scale 0.2s ease-out, transform 0.2s ease-out; + z-index: var(--z); + + &:nth-child(1) { --position: 1; } + &:nth-child(2) { --position: 2; } + &:nth-child(3) { --position: 3; } + &:nth-child(4) { --position: 4; } + &:nth-child(5) { --position: 5; } + &:nth-child(6) { --position: 6; } + + .tray[open] & { + --offset: calc((100% + var(--block-space-half)) * (var(--position) * -1)); + --scale: 1; + + margin-block-end: calc(var(--block-space) * -1); + pointer-events: unset; + } + + .tray:has(.tray__item:only-child) & { + pointer-events: unset; + } + } + } + + .tray__actions { + --border-style: dashed; + --border-color: color-mix(in srgb, var(--color-always-white) 40%, var(--color-ink)); + --hover-size: 0; + + align-items: center; + color: var(--color-ink-reversed); + display: flex; + gap: var(--inline-space-half); + justify-content: space-between; + opacity: 0; + scale: calc(1 - 1 / 30); + transform: translateY(100%); + transition: opacity 0.2s ease-out, scale 0.2s ease-out, transform 0.2s ease-out; + + .tray[open] & { + opacity: 1; + scale: 1; + transform: translateY(0); + } + + .tray:not(:has(.tray__item)) & { + opacity: 1; + scale: 1; + transform: none; + transition: none; + + .tray__all_action { + display: none; + } + } + + @media (prefers-color-scheme: dark) { + .btn--reversed { + color: var(--color-ink); + } + } + } + + .tray__expander { + --hover-size: 0; + --outline-size: 0; + + background-color: transparent; + block-size: var(--height); + border: 0; + cursor: pointer; + inset: auto 0 0 0; + padding: 0; + position: absolute; + z-index: 6; + + .tray[open] &, + .tray:not(:has(.tray__item)) &, + .tray:has(.tray__item:only-child) & { + display: none; + } + } + + .tray__item-meta { + font-size: var(--text-x-small); + font-weight: 500; + } + + .tray__overflow { + --border-radius: 0.2em; + --hover-size: 0; --offset: calc((var(--position) - 1) * (var(--block-space) * -1)); - --position: 1; + --position: 7; --scale: calc(1 - var(--position) / 30); --z: calc(6 - var(--position)); - inset: auto 0 0; + block-size: var(--height); + display: none; + inset: auto 0.1ch 0 auto; inline-size: var(--tray-size); - outline: 0; pointer-events: none; position: absolute; scale: var(--scale); @@ -32,120 +138,16 @@ transition: scale 0.2s ease-out, transform 0.2s ease-out; z-index: var(--z); - &:nth-child(1) { --position: 1; } - &:nth-child(2) { --position: 2; } - &:nth-child(3) { --position: 3; } - &:nth-child(4) { --position: 4; } - &:nth-child(5) { --position: 5; } - &:nth-child(6) { --position: 6; } + .tray:has(.tray__item:nth-child(7)) & { + display: flex; + } .tray[open] & { --offset: calc((100% + var(--block-space-half)) * (var(--position) * -1)); --scale: 1; - margin-block-end: calc(var(--block-space) * -1); - pointer-events: unset; - } - - .tray:has(.tray__item:only-child) & { + margin-block-end: calc(var(--block-space-half) * -1); pointer-events: unset; } } } - -.tray__actions { - --border-style: dashed; - --border-color: color-mix(in srgb, var(--color-always-white) 40%, var(--color-ink)); - --hover-size: 0; - - align-items: center; - color: var(--color-ink-reversed); - display: flex; - gap: var(--inline-space-half); - justify-content: space-between; - opacity: 0; - scale: calc(1 - 1 / 30); - transform: translateY(100%); - transition: opacity 0.2s ease-out, scale 0.2s ease-out, transform 0.2s ease-out; - - .tray[open] & { - opacity: 1; - scale: 1; - transform: translateY(0); - } - - .tray:not(:has(.tray__item)) & { - opacity: 1; - scale: 1; - transform: none; - transition: none; - - .tray__all_action { - display: none; - } - } - - @media (prefers-color-scheme: dark) { - .btn--reversed { - color: var(--color-ink); - } - } -} - -.tray__expander { - --hover-size: 0; - --outline-size: 0; - - background-color: transparent; - block-size: var(--height); - border: 0; - cursor: pointer; - inset: auto 0 0 0; - padding: 0; - position: absolute; - z-index: 6; - - .tray[open] &, - .tray:not(:has(.tray__item)) &, - .tray:has(.tray__item:only-child) & { - display: none; - } -} - -.tray__item-meta { - font-size: var(--text-x-small); - font-weight: 500; -} - -.tray__overflow { - --border-radius: 0.2em; - --hover-size: 0; - --offset: calc((var(--position) - 1) * (var(--block-space) * -1)); - --position: 7; - --scale: calc(1 - var(--position) / 30); - --z: calc(6 - var(--position)); - - block-size: var(--height); - display: none; - inset: auto 0.1ch 0 auto; - inline-size: var(--tray-size); - pointer-events: none; - position: absolute; - scale: var(--scale); - transform: translateY(var(--offset)); - transform-origin: center; - transition: scale 0.2s ease-out, transform 0.2s ease-out; - z-index: var(--z); - - .tray:has(.tray__item:nth-child(7)) & { - display: flex; - } - - .tray[open] & { - --offset: calc((100% + var(--block-space-half)) * (var(--position) * -1)); - --scale: 1; - - margin-block-end: calc(var(--block-space-half) * -1); - pointer-events: unset; - } -} \ No newline at end of file diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css index 39ec9a4f3..303aa2f81 100644 --- a/app/assets/stylesheets/utilities.css +++ b/app/assets/stylesheets/utilities.css @@ -1,289 +1,271 @@ -:root { - --inline-space: 1ch; - --inline-space-half: calc(var(--inline-space) / 2); - --inline-space-double: calc(var(--inline-space) * 2); +@layer utilities { + /* Text */ + .txt-xx-small { font-size: var(--text-xx-small); } + .txt-x-small { font-size: var(--text-x-small); } + .txt-small { font-size: var(--text-small); } + .txt-normal { font-size: var(--text-normal); } + .txt-medium { font-size: var(--text-medium); } + .txt-large { font-size: var(--text-large); } + .txt-x-large { font-size: var(--text-x-large); } + .txt-xx-large { font-size: var(--text-xx-large); } - --block-space: 1rem; - --block-space-half: calc(var(--block-space) / 2); - --block-space-double: calc(var(--block-space) * 2); + .txt-align-center { text-align: center; } + .txt-align-start { text-align: start; } + .txt-align-end { text-align: end; } - /* Text sizes */ - --text-xx-small: 0.55rem; - --text-x-small: 0.7rem; - --text-small: 0.8rem; - --text-normal: 1rem; - --text-medium: 1.1rem; - --text-large: 1.5rem; - --text-x-large: 1.8rem; - --text-xx-large: 2.5rem; -} + .txt-ink { color: var(--color-ink); } + .txt-reversed { color: var(--color-ink-reversed); } + .txt-negative { color: var(--color-negative); } + .txt-subtle { color: var(--color-subtle-dark); } + .txt-alert { color: var(--color-marker); } + .txt-undecorated { text-decoration: none; } + .txt-tight-lines { line-height: 1.2; } + .txt-nowrap { white-space: nowrap; } + .txt-break { word-break: break-word; } + .txt-uppercase { text-transform: uppercase; } + .txt-link { color: var(--color-link); text-decoration: underline; } -/* Text */ -.txt-xx-small { font-size: var(--text-xx-small); } -.txt-x-small { font-size: var(--text-x-small); } -.txt-small { font-size: var(--text-small); } -.txt-normal { font-size: var(--text-normal); } -.txt-medium { font-size: var(--text-medium); } -.txt-large { font-size: var(--text-large); } -.txt-x-large { font-size: var(--text-x-large); } -.txt-xx-large { font-size: var(--text-xx-large); } + /* Flexbox and Grid */ + .justify-end { justify-content: end; } + .justify-start { justify-content: start; } + .justify-center { justify-content: center; } + .justify-space-between { justify-content: space-between; } -.txt-align-center { text-align: center; } -.txt-align-start { text-align: start; } -.txt-align-end { text-align: end; } + .align-center { align-items: center; } + .align-start { align-items: start; } + .align-end { align-items: end; } -.txt-ink { color: var(--color-ink); } -.txt-reversed { color: var(--color-ink-reversed); } -.txt-negative { color: var(--color-negative); } -.txt-subtle { color: var(--color-subtle-dark); } -.txt-alert { color: var(--color-marker); } -.txt-undecorated { text-decoration: none; } -.txt-tight-lines { line-height: 1.2; } -.txt-nowrap { white-space: nowrap; } -.txt-break { word-break: break-word; } -.txt-uppercase { text-transform: uppercase; } -.txt-link { color: var(--color-link); text-decoration: underline; } + .align-self-end { align-self: end; } + .align-self-start { align-self: start; } -/* Flexbox and Grid */ -.justify-end { justify-content: end; } -.justify-start { justify-content: start; } -.justify-center { justify-content: center; } -.justify-space-between { justify-content: space-between; } + .contain { contain: inline-size; } -.align-center { align-items: center; } -.align-start { align-items: start; } -.align-end { align-items: end; } + .flex { display: flex; } + .flex-inline { display: inline-flex; } + .flex-column { flex-direction: column; } + .flex-wrap { flex-wrap: wrap; } -.align-self-end { align-self: end; } -.align-self-start { align-self: start; } + .flex-item-grow { flex-grow: 1; } + .flex-item-shrink { flex-shrink: 1; } + .flex-item-no-shrink { flex-shrink: 0; } + .flex-item-justify-start { margin-inline-end: auto; } + .flex-item-justify-end { margin-inline-start: auto; } -.contain { contain: inline-size; } - -.flex { display: flex; } -.flex-inline { display: inline-flex; } -.flex-column { flex-direction: column; } -.flex-wrap { flex-wrap: wrap; } - -.flex-item-grow { flex-grow: 1; } -.flex-item-shrink { flex-shrink: 1; } -.flex-item-no-shrink { flex-shrink: 0; } -.flex-item-justify-start { margin-inline-end: auto; } -.flex-item-justify-end { margin-inline-start: auto; } - -.gap { - column-gap: var(--column-gap, var(--inline-space)); - row-gap: var(--row-gap, var(--block-space)); -} - -.gap-half { - column-gap: var(--column-gap, var(--inline-space-half)); - row-gap: var(--row-gap, var(--block-space-half)); -} - -/* Sizing */ -.full-width { inline-size: 100%; } -.min-width { min-inline-size: 0; } -.half-width { inline-size: 50%; } -.max-width { max-inline-size: 100%; } -.min-content { inline-size: min-content; } -.max-inline-size { max-inline-size: 100%; } - -/* Overflow */ -.overflow-x { overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; } -.overflow-y { overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; } -.overflow-clip { text-overflow: clip; white-space: nowrap; overflow: hidden; } -.overflow-ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } - -.overflow-hide-scrollbar::-webkit-scrollbar { - @media (pointer: course) { - display: none; + .gap { + column-gap: var(--column-gap, var(--inline-space)); + row-gap: var(--row-gap, var(--block-space)); } -} -.overflow-line-clamp { - -webkit-line-clamp: var(--lines, 2); - -webkit-box-orient: vertical; - display: -webkit-box; - overflow: hidden; - text-overflow: clip; - white-space: normal; -} + .gap-half { + column-gap: var(--column-gap, var(--inline-space-half)); + row-gap: var(--row-gap, var(--block-space-half)); + } -/* Padding */ -.pad { padding: var(--block-space) var(--inline-space); } -.pad-double { padding: var(--block-space-double) var(--inline-space-double); } + /* Sizing */ + .full-width { inline-size: 100%; } + .min-width { min-inline-size: 0; } + .half-width { inline-size: 50%; } + .max-width { max-inline-size: 100%; } + .min-content { inline-size: min-content; } + .max-inline-size { max-inline-size: 100%; } -.pad-block { padding-block: var(--block-space); } -.pad-block-start { padding-block-start: var(--block-space); } -.pad-block-end { padding-block-end: var(--block-space); } -.pad-block-half { padding-block: var(--block-space-half); } -.pad-block-start-half { padding-block-start: var(--block-space-half); } + /* Overflow */ + .overflow-x { overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; } + .overflow-y { overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; } + .overflow-clip { text-overflow: clip; white-space: nowrap; overflow: hidden; } + .overflow-ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } -.pad-inline { padding-inline: var(--inline-space); } -.pad-inline-start { padding-inline-start: var(--inline-space); } -.pad-inline-end { padding-inline-end: var(--inline-space); } -.pad-inline-half { padding-inline: var(--inline-space-half); } -.pad-inline-double { padding-inline: var(--inline-space-double); } + .overflow-hide-scrollbar::-webkit-scrollbar { + @media (pointer: course) { + display: none; + } + } -.unpad { padding: 0; } -.unpad-inline { padding-inline: 0; } + .overflow-line-clamp { + -webkit-line-clamp: var(--lines, 2); + -webkit-box-orient: vertical; + display: -webkit-box; + overflow: hidden; + text-overflow: clip; + white-space: normal; + } -/* Margins */ -.margin { margin: var(--block-space) var(--inline-space); } -.margin-block { margin-block: var(--block-space); } -.margin-block-half { margin-block: var(--block-space-half); } -.margin-block-start { margin-block-start: var(--block-space); } -.margin-block-start-half { margin-block-start: var(--block-space-half); } -.margin-block-end { margin-block-end: var(--block-space); } -.margin-block-end-half { margin-block-end: var(--block-space-half); } -.margin-block-double { margin-block: var(--block-space-double); } -.margin-block-end-double { margin-block-end: var(--block-space-double); } -.margin-block-start-double { margin-block-start: var(--block-space-double); } + /* Padding */ + .pad { padding: var(--block-space) var(--inline-space); } + .pad-double { padding: var(--block-space-double) var(--inline-space-double); } -.margin-inline { margin-inline: var(--inline-space); } -.margin-inline-start { margin-inline-start: var(--inline-space); } -.margin-inline-start-half { margin-inline-start: var(--inline-space-half); } -.margin-inline-end { margin-inline-end: var(--inline-space); } -.margin-inline-end-half { margin-inline-end: var(--inline-space-half); } -.margin-inline-half { margin-inline: var(--inline-space-half); } -.margin-inline-double { margin-inline: var(--inline-space-double); } + .pad-block { padding-block: var(--block-space); } + .pad-block-start { padding-block-start: var(--block-space); } + .pad-block-end { padding-block-end: var(--block-space); } + .pad-block-half { padding-block: var(--block-space-half); } + .pad-block-start-half { padding-block-start: var(--block-space-half); } -.margin-none { margin: 0; } -.margin-none-block { margin-block: 0; } -.margin-none-block-start { margin-block-start: 0; } -.margin-none-block-end { margin-block-end: 0; } + .pad-inline { padding-inline: var(--inline-space); } + .pad-inline-start { padding-inline-start: var(--inline-space); } + .pad-inline-end { padding-inline-end: var(--inline-space); } + .pad-inline-half { padding-inline: var(--inline-space-half); } + .pad-inline-double { padding-inline: var(--inline-space-double); } -.margin-none-inline { margin-inline: 0; } -.margin-none-inline-start { margin-inline-start: 0; } -.margin-none-inline-end { margin-inline-end: 0; } + .unpad { padding: 0; } + .unpad-inline { padding-inline: 0; } -.center { margin-inline: auto; } -.center-block { margin-block: auto; } + /* Margins */ + .margin { margin: var(--block-space) var(--inline-space); } + .margin-block { margin-block: var(--block-space); } + .margin-block-half { margin-block: var(--block-space-half); } + .margin-block-start { margin-block-start: var(--block-space); } + .margin-block-start-half { margin-block-start: var(--block-space-half); } + .margin-block-end { margin-block-end: var(--block-space); } + .margin-block-end-half { margin-block-end: var(--block-space-half); } + .margin-block-double { margin-block: var(--block-space-double); } + .margin-block-end-double { margin-block-end: var(--block-space-double); } + .margin-block-start-double { margin-block-start: var(--block-space-double); } -/* Position */ -.position-relative { position: relative; } -.position-sticky { position: sticky; inset: var(--inset, 0 auto auto auto); z-index: var(--z, 1); } + .margin-inline { margin-inline: var(--inline-space); } + .margin-inline-start { margin-inline-start: var(--inline-space); } + .margin-inline-start-half { margin-inline-start: var(--inline-space-half); } + .margin-inline-end { margin-inline-end: var(--inline-space); } + .margin-inline-end-half { margin-inline-end: var(--inline-space-half); } + .margin-inline-half { margin-inline: var(--inline-space-half); } + .margin-inline-double { margin-inline: var(--inline-space-double); } -/* Fills */ -.fill { background-color: var(--color-bg); } -.fill-black { background-color: var(--color-ink); } -.fill-white { background-color: var(--color-ink-reversed); } -.fill-shade { background-color: var(--color-subtle-light); } -.fill-selected { background-color: var(--color-selected); } -.fill-highlight { background-color: var(--color-highlight); } -.fill-transparent { background-color: transparent; } + .margin-none { margin: 0; } + .margin-none-block { margin-block: 0; } + .margin-none-block-start { margin-block-start: 0; } + .margin-none-block-end { margin-block-end: 0; } -.translucent { opacity: var(--opacity, 0.66); } + .margin-none-inline { margin-inline: 0; } + .margin-none-inline-start { margin-inline-start: 0; } + .margin-none-inline-end { margin-inline-end: 0; } -/* Borders */ -.border { border: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); } -.border-block { border-block: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); } -.border-bottom { border-block-end: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); } -.border-top { border-block-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); } -.borderless { border: 0; } + .center { margin-inline: auto; } + .center-block { margin-block: auto; } -/* Border radius */ -.border-radius { border-radius: var(--border-radius, 0.5em); } + /* Position */ + .position-relative { position: relative; } + .position-sticky { position: sticky; inset: var(--inset, 0 auto auto auto); z-index: var(--z, 1); } -/* Shadows */ -.shadow { - box-shadow: - 0 0 0 1px oklch(var(--lch-always-black) / 0.02), - 0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.2), - 0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.3), - 0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.4), - 0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.5), - 0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 0.6); + /* Fills */ + .fill { background-color: var(--color-bg); } + .fill-black { background-color: var(--color-ink); } + .fill-white { background-color: var(--color-ink-reversed); } + .fill-shade { background-color: var(--color-subtle-light); } + .fill-selected { background-color: var(--color-selected); } + .fill-highlight { background-color: var(--color-highlight); } + .fill-transparent { background-color: transparent; } - @media (prefers-color-scheme: dark) { + .translucent { opacity: var(--opacity, 0.66); } + + /* Borders */ + .border { border: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); } + .border-block { border-block: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); } + .border-bottom { border-block-end: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); } + .border-top { border-block-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); } + .borderless { border: 0; } + + /* Border radius */ + .border-radius { border-radius: var(--border-radius, 0.5em); } + + /* Shadows */ + .shadow { box-shadow: - 0 0 0 1px oklch(var(--lch-always-black) / 0.42), - 0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.6), - 0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.7), - 0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.8), - 0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.9), - 0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 1); + 0 0 0 1px oklch(var(--lch-always-black) / 0.02), + 0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.2), + 0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.3), + 0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.4), + 0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.5), + 0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 0.6); + + @media (prefers-color-scheme: dark) { + box-shadow: + 0 0 0 1px oklch(var(--lch-always-black) / 0.42), + 0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.6), + 0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.7), + 0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.8), + 0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.9), + 0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 1); + } } -} -/* Lists */ -:where(.list-style-none) { - margin: 0 auto; - min-inline-size: 0; - padding: 0; - - li { - display: block; - margin: 0; - max-inline-size: 100%; + /* Lists */ + :where(.list-style-none) { + margin: 0 auto; min-inline-size: 0; padding: 0; - text-align: start; + + li { + display: block; + margin: 0; + max-inline-size: 100%; + min-inline-size: 0; + padding: 0; + text-align: start; + } } -} -/* Separators */ -.separator { - block-size: 100%; - border-block: 0; - border-inline-end: 0; - border-inline-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, currentColor); - display: inline-flex; - inline-size: 0; -} + /* Separators */ + .separator { + block-size: 100%; + border-block: 0; + border-inline-end: 0; + border-inline-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, currentColor); + display: inline-flex; + inline-size: 0; + } -.separator--horizontal { - block-size: 0; - border-block-end: 0; - border-block-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, currentColor); - border-inline: 0; - display: flex; -} + .separator--horizontal { + block-size: 0; + border-block-end: 0; + border-block-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, currentColor); + border-inline: 0; + display: flex; + } -/* Spinners */ -.spinner { - position: relative; + /* Spinners */ + .spinner { + position: relative; - &::before { - --mask: no-repeat radial-gradient(#000 68%, #0000 71%); - --dot-size: 1.25em; + &::before { + --mask: no-repeat radial-gradient(#000 68%, #0000 71%); + --dot-size: 1.25em; - -webkit-mask: var(--mask), var(--mask), var(--mask); - -webkit-mask-size: 28% 45%; - animation: submitting 1.3s infinite linear; - aspect-ratio: 8/5; - background: currentColor; - content: ""; - inline-size: var(--dot-size); - inset: 50% 0.25em; - margin-block: calc((var(--dot-size) / 3) * -1); - margin-inline: calc((var(--dot-size) / 2) * -1); + -webkit-mask: var(--mask), var(--mask), var(--mask); + -webkit-mask-size: 28% 45%; + animation: submitting 1.3s infinite linear; + aspect-ratio: 8/5; + background: currentColor; + content: ""; + inline-size: var(--dot-size); + inset: 50% 0.25em; + margin-block: calc((var(--dot-size) / 3) * -1); + margin-inline: calc((var(--dot-size) / 2) * -1); + position: absolute; + } + } + + /* QR Codes */ + .qr-code { + aspect-ratio: 1; + block-size: 50dvh; + } + + /* Accessibility */ + .visually-hidden, + .for-screen-reader { + block-size: 1px; + clip-path: inset(50%); + inline-size: 1px; + overflow: hidden; position: absolute; + white-space: nowrap; + } + + /* Visibility */ + [hidden] { display: none !important; } + [contents] { display: contents; } + + /* Turbo */ + turbo-frame { + display: contents; } } - -/* QR Codes */ -.qr-code { - aspect-ratio: 1; - block-size: 50dvh; -} - -/* Accessibility */ -.visually-hidden, -.for-screen-reader { - block-size: 1px; - clip-path: inset(50%); - inline-size: 1px; - overflow: hidden; - position: absolute; - white-space: nowrap; -} - -/* Visibility */ -[hidden] { display: none !important; } -[contents] { display: contents; } - -/* Turbo */ -turbo-frame { - display: contents; -} diff --git a/app/assets/stylesheets/workflows.css b/app/assets/stylesheets/workflows.css index 3bee79623..b6591a2a7 100644 --- a/app/assets/stylesheets/workflows.css +++ b/app/assets/stylesheets/workflows.css @@ -1,65 +1,67 @@ -.workflow-stage { - --btn-background: transparent; - --btn-padding: 0.2em 0.5em; - --btn-border-size: 0; - --btn-border-radius: 0.2em; - --hover-size: 0; +@layer components { + .workflow-stage { + --btn-background: transparent; + --btn-padding: 0.2em 0.5em; + --btn-border-size: 0; + --btn-border-radius: 0.2em; + --hover-size: 0; - color: inherit; - text-transform: uppercase; + color: inherit; + text-transform: uppercase; - @media (hover: hover) { - &:hover { - background-color: color(from var(--bubble-color) srgb r g b / 0.15); + @media (hover: hover) { + &:hover { + background-color: color(from var(--bubble-color) srgb r g b / 0.15); + } + } + + .bubbles-list & { + display: none; } } - .bubbles-list & { - display: none; - } -} + .workflow-stage--current { + --btn-background: var(--bubble-color); -.workflow-stage--current { - --btn-background: var(--bubble-color); - - color: var(--color-ink-reversed); - - @media (hover: hover) { - &:hover { - background-color: color(from var(--bubble-color) srgb r g b / 0.65); - } - } - - .ticket & { - --btn-background: var(--color-ink); - - background: var(--bubble-color); - border-radius: 0.2em; color: var(--color-ink-reversed); + + @media (hover: hover) { + &:hover { + background-color: color(from var(--bubble-color) srgb r g b / 0.65); + } + } + + .ticket & { + --btn-background: var(--color-ink); + + background: var(--bubble-color); + border-radius: 0.2em; + color: var(--color-ink-reversed); + } + + .bubbles-list & { + display: flex; + background: transparent; + border-radius: 0.2em; + color: var(--color-ink); + padding: 0; + border: 0; + } } - .bubbles-list & { - display: flex; - background: transparent; - border-radius: 0.2em; - color: var(--color-ink); - padding: 0; - border: 0; + .workflow__popup { + --panel-border-radius: 0.5em; + --panel-padding: 0.5em; + --panel-size: 100%; + + inline-size: auto !important; + inset: 0 auto auto 0; + margin-block-start: 1lh; + margin-inline-start: calc((var(--panel-padding) + 0.7em) * -1); + min-inline-size: 12ch; + max-inline-size: var(--panel-size) !important; + position: absolute; + transform-origin: top left; + z-index: 1; } } - -.workflow__popup { - --panel-border-radius: 0.5em; - --panel-padding: 0.5em; - --panel-size: 100%; - - inline-size: auto !important; - inset: 0 auto auto 0; - margin-block-start: 1lh; - margin-inline-start: calc((var(--panel-padding) + 0.7em) * -1); - min-inline-size: 12ch; - max-inline-size: var(--panel-size) !important; - position: absolute; - transform-origin: top left; - z-index: 1; -}