diff --git a/app/assets/stylesheets/_reset.css b/app/assets/stylesheets/_reset.css new file mode 100644 index 000000000..f4bec04c0 --- /dev/null +++ b/app/assets/stylesheets/_reset.css @@ -0,0 +1,84 @@ +/* + * 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/animation.css b/app/assets/stylesheets/animation.css index 5ec81263f..374d26876 100644 --- a/app/assets/stylesheets/animation.css +++ b/app/assets/stylesheets/animation.css @@ -1,66 +1,64 @@ -@layer utilities { - /* Animation classes */ - .shake { - animation: shake 400ms both; - } - - @keyframes appear-then-fade { - 0%,100% { opacity: 0; } - 5%,60% { opacity: 1; } - } - - /* Keyframes */ - @keyframes float-up-left { - 0% { transform: translate(10px, 20px); } - 100% { transform: translate(0, 0); } - } - - @keyframes float-down-right { - 0% { transform: translate(-10px, -20px); } - 100% { transform: translate(0, 0); } - } - - @keyframes react { - 0% { transform: scale(0.3); opacity: 0; } - 50% { transform: scale(1.15); opacity: 1; } - 100% { transform: scale(1); } - } - - @keyframes scale-fade-out { - 0% { transform: scale(1); opacity: 1; } - 100% { transform: scale(0); opacity: 0; } - } - - @keyframes shake { - 0% { transform: translateX(-2rem); } - 25% { transform: translateX(2rem); } - 50% { transform: translateX(-1rem); } - 75% { transform: translateX(1rem); } - } - - @keyframes wobble { - 0% { transform: rotate(calc(var(--bubble-rotate) + 90deg)); } - 15% { border-radius: 66% 34% 72% 28% / 39% 63% 37% 61%; } - 25% { border-radius: 55% 47% 62% 40% / 58% 50% 52% 44%; } - 33% { border-radius: 46% 54% 61% 39% / 50% 51% 49% 50%; } - 50% { border-radius: 54% 46% 61% 39% / 57% 49% 51% 43%; } - 75% { border-radius: 53% 45% 60% 38% / 56% 48% 50% 42%; } - } - - @keyframes wobble-alt { - 0% { transform: rotate(calc(var(--bubble-rotate) + -90deg)); } - 12% { border-radius: 66% 34% 72% 28% / 39% 63% 37% 61%; } - 25% { border-radius: 53% 45% 60% 38% / 56% 48% 50% 42%; } - 33% { border-radius: 55% 47% 62% 40% / 58% 50% 52% 44%; } - 50% { border-radius: 46% 54% 61% 39% / 50% 51% 49% 50%; } - 75% { border-radius: 54% 46% 61% 39% / 57% 49% 51% 43%; } - } - - @keyframes wobble-img { - 15% { border-radius: 66% 34% 72% 28% / 39% 63% 37% 61%; } - 25% { border-radius: 55% 47% 62% 40% / 58% 50% 52% 44%; } - 33% { border-radius: 46% 54% 61% 39% / 50% 51% 49% 50%; } - 50% { border-radius: 54% 46% 61% 39% / 57% 49% 51% 43%; } - 75% { border-radius: 53% 45% 60% 38% / 56% 48% 50% 42%; } - } +/* Animation classes */ +.shake { + animation: shake 400ms both; +} + +@keyframes appear-then-fade { + 0%,100% { opacity: 0; } + 5%,60% { opacity: 1; } +} + +/* Keyframes */ +@keyframes float-up-left { + 0% { transform: translate(10px, 20px); } + 100% { transform: translate(0, 0); } +} + +@keyframes float-down-right { + 0% { transform: translate(-10px, -20px); } + 100% { transform: translate(0, 0); } +} + +@keyframes react { + 0% { transform: scale(0.3); opacity: 0; } + 50% { transform: scale(1.15); opacity: 1; } + 100% { transform: scale(1); } +} + +@keyframes scale-fade-out { + 0% { transform: scale(1); opacity: 1; } + 100% { transform: scale(0); opacity: 0; } +} + +@keyframes shake { + 0% { transform: translateX(-2rem); } + 25% { transform: translateX(2rem); } + 50% { transform: translateX(-1rem); } + 75% { transform: translateX(1rem); } +} + +@keyframes wobble { + 0% { transform: rotate(calc(var(--bubble-rotate) + 90deg)); } + 15% { border-radius: 66% 34% 72% 28% / 39% 63% 37% 61%; } + 25% { border-radius: 55% 47% 62% 40% / 58% 50% 52% 44%; } + 33% { border-radius: 46% 54% 61% 39% / 50% 51% 49% 50%; } + 50% { border-radius: 54% 46% 61% 39% / 57% 49% 51% 43%; } + 75% { border-radius: 53% 45% 60% 38% / 56% 48% 50% 42%; } +} + +@keyframes wobble-alt { + 0% { transform: rotate(calc(var(--bubble-rotate) + -90deg)); } + 12% { border-radius: 66% 34% 72% 28% / 39% 63% 37% 61%; } + 25% { border-radius: 53% 45% 60% 38% / 56% 48% 50% 42%; } + 33% { border-radius: 55% 47% 62% 40% / 58% 50% 52% 44%; } + 50% { border-radius: 46% 54% 61% 39% / 50% 51% 49% 50%; } + 75% { border-radius: 54% 46% 61% 39% / 57% 49% 51% 43%; } +} + +@keyframes wobble-img { + 15% { border-radius: 66% 34% 72% 28% / 39% 63% 37% 61%; } + 25% { border-radius: 55% 47% 62% 40% / 58% 50% 52% 44%; } + 33% { border-radius: 46% 54% 61% 39% / 50% 51% 49% 50%; } + 50% { border-radius: 54% 46% 61% 39% / 57% 49% 51% 43%; } + 75% { border-radius: 53% 45% 60% 38% / 56% 48% 50% 42%; } } diff --git a/app/assets/stylesheets/avatars.css b/app/assets/stylesheets/avatars.css index 6d0094f75..d3ba51fbf 100644 --- a/app/assets/stylesheets/avatars.css +++ b/app/assets/stylesheets/avatars.css @@ -1,67 +1,65 @@ -@layer components { - .avatar { - --avatar-border-radius: 50%; +.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); - display: grid; + grid-area: 1/1; 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; - } + max-inline-size: 100%; + object-fit: cover; } - .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; + .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; + + .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; +} diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css index 526b502bc..2cc2d56b6 100644 --- a/app/assets/stylesheets/base.css +++ b/app/assets/stylesheets/base.css @@ -1,116 +1,114 @@ -@layer base { - html { - font-size: 100%; +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); - } - } - - /* 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); - } - } - - ::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; - } + @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); + } + } + + /* 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); + } +} + +::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 669a99f80..88a47c231 100644 --- a/app/assets/stylesheets/bubbles.css +++ b/app/assets/stylesheets/bubbles.css @@ -8,486 +8,484 @@ --bubble-size-five: 22cqi; } -@layer components { - .bubbles { - --column-gap: 2cqi; - --row-gap: 1cqi; +.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; + > * { + 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; } } - .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; + [data-turbo-preview] & { animation: 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; - - .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; - } - } - - [data-turbo-preview] & { animation: none; } - - > * { - grid-area: 1/1; - } - - .bubble__perma & { - --bubble-border-width: 0.3rem; - --bubble-size: 40dvh !important; - - z-index: 1; - } + > * { + grid-area: 1/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; + .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; - a { - color: var(--bubble-color); - } + 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; - &.bubble__assignee { - font-size: 4.5cqi; - inset: 8em auto auto -1.7em; - padding: 0.2em; + 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: 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 { - 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; - } - } - } + inset: 1em auto auto 2em; } } .avatar { - --avatar-size: 1.1em; - - > * { - 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: ""; - flex-grow: 1; - margin-block-end: 0.25em; - } - } - - .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; - - font-size: 9cqi; - font-weight: 800; - line-height: 1.2; - - &::selection { - background-color: var(--bubble-color); - color: var(--color-ink-reversed); - } + border-radius: var(--bubble-shape); } @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; + .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__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; + &.bubble__comments { + --arrow-size: 1.5em; + --border-size: var(--bubble-border-width); - @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)); - } + aspect-ratio: 9/6; + inset: auto auto 2em -1em; - .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 & { + &::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; - fill: color-mix(in srgb, var(--bubble-color) 20%, var(--color-bg)); + inset-block-end: auto; + inset-block-start: 94%; + inset-inline-start: 66%; position: absolute; - scale: 130%; - z-index: -1; + 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); } - .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; + @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 { + 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; + + > * { + 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: ""; + flex-grow: 1; + margin-block-end: 0.25em; + } +} + +.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; + + 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); + position: relative; + scale: 1; + z-index: 0; + } +} diff --git a/app/assets/stylesheets/buckets.css b/app/assets/stylesheets/buckets.css index dc7eee01e..76f0abc83 100644 --- a/app/assets/stylesheets/buckets.css +++ b/app/assets/stylesheets/buckets.css @@ -1,40 +1,38 @@ -@layer components { - .bucket { - inline-size: min(35ch, 40%); - line-height: 1.2; +.bucket { + inline-size: min(35ch, 40%); + line-height: 1.2; - 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; + 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; +} diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index 9caf9d731..2969db1dc 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -1,190 +1,192 @@ -@layer components { - .btn { - --transition: 300ms ease; - --btn-border-radius: 2em; +:root { + --btn-size: 2.65em; +} - 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); +.btn { + --transition: 300ms ease; + --btn-border-radius: 2em; - /* Default icon styles */ - &:where(:has(.icon)) { - text-align: start; + 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); - .icon { - --icon-size: var(--btn-icon-size, 1.3em); - } + /* 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; } - &:where(.avatar) { - --btn-border-radius: var(--avatar-border-radius); - --btn-padding: 0; - --btn-border-size: 0; + 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); + } + } + } + + /* 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; - 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); - } - } + appearance: none; + border-radius: var(--btn-border-radius); + cursor: pointer; + display: flex; + inset: 0; + margin: 0; + padding: 0; + position: absolute; } - /* 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 { + .checked { 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 { + &:has(input:checked) { --btn-background: var(--color-ink); - --btn-color: var(--color-bg); + --btn-color: var(--color-ink-reversed); --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; + .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; + } +} + +/* 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 c9f325d8b..c87d7d1b8 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -1,466 +1,464 @@ -@layer components { - .cards { - --block-space: 2cqi; - --container-gap: var(--block-space); - --container-padding: calc(var(--block-space) * 1.5); +.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); + 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; } - :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; - } - + .card__stuff { .avatar { - block-size: 3em; - inline-size: 3em; - margin-block-start: -0.2em; - } - - .card__tags { - font-size: var(--text-small); + block-size: 2em; + inline-size: 2em; + margin: 0; } } - } - - .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; + + .card__body { + padding-inline: 0; } - } - - .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]) { - 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; - - &:has(dialog[open]) { - z-index: 1; + + .avatar { + block-size: 3em; + inline-size: 3em; + margin-block-start: -0.2em; } - .btn:not(.popup__item, .btn--plain) { - --btn-background: var(--bubble-color); - --btn-color: var(--color-ink-reversed); + .card__tags { + font-size: var(--text-small); } - - .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-column__filter { - > button { - --hover-size: 0; - - inline-size: auto; - padding: 0 2em 0 0; - margin-inline-start: 2em; - } - } - - .card-sorting__filter { - inset: auto 50% -4em; - margin-inline-start: -1em; - position: absolute; - transform: translateX(-50%); - - #header:has(&) { - position: relative; - z-index: 1; - } - } - - .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__container--pointing { - --arrow-size: 20em; - --aspect-ratio: 7; - - 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%; - position: absolute; - transform: translateX(-50%); - z-index: -1; - } - } - - .card__delete-btn { - .cards & { - display: none; - } - } - - .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 { - --block-space: 1em; - --block-space-half: 0.5em; - --card-size: calc(100% - (var(--container-padding) * 2) / 2); - --text-xx-large: 1.8em; - - block-size: 50%; - font-size: 3cqi; - flex: 0 0 var(--card-size); - inline-size: var(--card-size); - 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); - --text-xx-large: 1.8em; - - font-size: 1cqi; - } - - .card__footer, - .card__header, - .card__stages { - font-size: 0.85em; - } - } - } - - .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__move-button { - --btn-background: color-mix(in srgb, var(--bubble-color) 40%, var(--color-ink)); - } - - .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); } } + +.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; + } +} + +.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]) { + 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; + + &:has(dialog[open]) { + z-index: 1; + } + + .btn:not(.popup__item, .btn--plain) { + --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-column__filter { + > button { + --hover-size: 0; + + inline-size: auto; + padding: 0 2em 0 0; + margin-inline-start: 2em; + } +} + +.card-sorting__filter { + inset: auto 50% -4em; + margin-inline-start: -1em; + position: absolute; + transform: translateX(-50%); + + #header:has(&) { + position: relative; + z-index: 1; + } +} + +.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__container--pointing { + --arrow-size: 20em; + --aspect-ratio: 7; + + 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%; + position: absolute; + transform: translateX(-50%); + z-index: -1; + } +} + +.card__delete-btn { + .cards & { + display: none; + } +} + +.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 { + --block-space: 1em; + --block-space-half: 0.5em; + --card-size: calc(100% - (var(--container-padding) * 2) / 2); + --text-xx-large: 1.8em; + + block-size: 50%; + font-size: 3cqi; + flex: 0 0 var(--card-size); + inline-size: var(--card-size); + 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); + --text-xx-large: 1.8em; + + font-size: 1cqi; + } + + .card__footer, + .card__header, + .card__stages { + font-size: 0.85em; + } + } +} + +.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__move-button { + --btn-background: color-mix(in srgb, var(--bubble-color) 40%, var(--color-ink)); +} + +.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); +} diff --git a/app/assets/stylesheets/color-picker.css b/app/assets/stylesheets/color-picker.css deleted file mode 100644 index 73c3432fb..000000000 --- a/app/assets/stylesheets/color-picker.css +++ /dev/null @@ -1,37 +0,0 @@ -@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/_global.css b/app/assets/stylesheets/colors.css similarity index 73% rename from app/assets/stylesheets/_global.css rename to app/assets/stylesheets/colors.css index 86fb5513e..79e852697 100644 --- a/app/assets/stylesheets/_global.css +++ b/app/assets/stylesheets/colors.css @@ -1,28 +1,4 @@ -/* 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; @@ -60,7 +36,7 @@ --color-always-white: oklch(var(--lch-always-white)); --color-container: oklch(var(--lch-light-blue)); - /* Dark mode */ + /* Redefine named color values for dark mode */ @media (prefers-color-scheme: dark) { --lch-black: 100% 0 0; --lch-white: 0% 0 0; @@ -77,3 +53,39 @@ --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/comment-content.css b/app/assets/stylesheets/comment-content.css index 9944ed45f..8d2a9bc25 100644 --- a/app/assets/stylesheets/comment-content.css +++ b/app/assets/stylesheets/comment-content.css @@ -1,101 +1,99 @@ -@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; - } +.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; } - :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, 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; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css index 1ba711061..75cf2012d 100644 --- a/app/assets/stylesheets/comments.css +++ b/app/assets/stylesheets/comments.css @@ -1,106 +1,104 @@ -@layer components { - .comments { - --avatar-size: 2.33em; - --comment-padding-block: var(--block-space); - --comment-padding-inline: var(--inline-space-double); - --comment-max: 70ch; +.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; + 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); - } + @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); } - .comments__subscribers { - max-inline-size: var(--comment-max); - padding-inline: calc(var(--comment-padding-block) + var(--inline-space-double)); + .house-md-content { + padding: var(--comment-padding-block) 0 0; } +} - .comment { - margin-inline: auto; - max-inline-size: var(--comment-max); - position: relative; +.comment__author { + .btn { + font-weight: inherit; + } +} - house-md-toolbar { - margin-block-start: calc(var(--comment-padding-block) * -0.5); +.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; } - .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; - - 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))); + &: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; + + 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 ea7e10e15..53026af9b 100644 --- a/app/assets/stylesheets/dialog.css +++ b/app/assets/stylesheets/dialog.css @@ -1,47 +1,45 @@ -@layer components { - :is(.dialog) { - --backdrop-speed: 150ms; - --panel-size: max-content; - --speed: 150ms; +:is(.dialog) { + --backdrop-speed: 150ms; + --panel-size: max-content; + --speed: 150ms; - border: 0; + 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); opacity: 0; - transform: scale(0.2); - transform-origin: top center; + transform: scale(1); transition: - display var(--speed) allow-discrete, - opacity var(--speed), - overlay var(--speed) allow-discrete, - transform var(--speed); + display var(--backdrop-speed) allow-discrete, + opacity var(--backdrop-speed), + overlay var(--backdrop-speed) allow-discrete; + } + + &[open] { + opacity: 1; + transform: scale(1); &::backdrop { - 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; + opacity: 0.5; } + } + @starting-style { &[open] { - opacity: 1; - transform: scale(1); - - &::backdrop { - opacity: 0.5; - } + opacity: 0; + transform: scale(0.2); } - @starting-style { - &[open] { - opacity: 0; - transform: scale(0.2); - } - - &[open]::backdrop { - opacity: 0; - } + &[open]::backdrop { + opacity: 0; } } } diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css index f7f5ce3bb..d953547ac 100644 --- a/app/assets/stylesheets/events.css +++ b/app/assets/stylesheets/events.css @@ -1,155 +1,153 @@ -@layer components { - .events { - display: grid; - gap: 0 var(--grid-lines); - grid-template-columns: repeat(3, 1fr); - position: relative; - z-index: 0; - } +.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; +.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; +} - 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 { - 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__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__filter-btn { - font-weight: 500; - inline-size: auto; - margin: auto; - } +.events__index { + --row-gap: var(--block-space); +} - .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%; - position: relative; - z-index: 5; - } - } - - .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; - - 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; - } +.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%; + position: relative; + z-index: 5; + } +} + +.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; + + 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 cf7c894f0..d573e179b 100644 --- a/app/assets/stylesheets/filters.css +++ b/app/assets/stylesheets/filters.css @@ -1,109 +1,107 @@ -@layer components { - .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); +.filters { + #header:has(&) { 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); - } - } +.filter__button { + --btn-border-size: 0; + --btn-font-weight: 400; + --btn-icon-size: 0.7em; + --btn-padding: 0.3em 0.7em; - @media (max-width: 80ch) { - display: none; - } + 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 8e5d08d67..eb2f7be0a 100644 --- a/app/assets/stylesheets/flash.css +++ b/app/assets/stylesheets/flash.css @@ -1,21 +1,19 @@ -@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 { + 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; } diff --git a/app/assets/stylesheets/house.css b/app/assets/stylesheets/house.css index 30982ad76..cf9be0599 100644 --- a/app/assets/stylesheets/house.css +++ b/app/assets/stylesheets/house.css @@ -1,174 +1,173 @@ -@layer components { - /* Editor */ - house-md { - display: flex; - flex-direction: column; - flex-grow: 1; - &:invalid { - border: var(--color-negative) 2px solid; - } +/* Editor */ +house-md { + display: flex; + flex-direction: column; + flex-grow: 1; + + &: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; +/* 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; - color: currentColor; - cursor: pointer; - display: grid; - font-size: inherit; - inline-size: auto; - 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; - } - - &: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 { + button, label { + aspect-ratio: 4/3; 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); + block-size: 2em; + border: none; border-radius: 0.5em; - block-size: 1ex; - display: block; - inline-size: 100%; - line-height: inherit; - margin: 0; + color: currentColor; + cursor: pointer; + display: grid; + font-size: inherit; + inline-size: auto; + place-items: center; + transition: background-color 300ms ease; - house-md-upload[status="failed"] & , - house-md-upload[status="complete"] &{ - display: none; + svg { + -webkit-touch-callout: none; + block-size: 0.9em; + fill: currentColor; + grid-area: 1/1; + inline-size: auto; + user-select: none; } - &::-webkit-progress-bar { - border-radius: 0.5em; + &:is(:focus, :hover) { 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); + &: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; + } + + &: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 0ca0f7d35..ce461626f 100644 --- a/app/assets/stylesheets/icons.css +++ b/app/assets/stylesheets/icons.css @@ -1,79 +1,77 @@ -@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 { --svg: url("bell.svg "); } - .icon--bell-off { --svg: url("bell-off.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--notification-bell-access-only { --svg: url("notification-bell-access-only.svg "); } - .icon--notification-bell-everything { --svg: url("notification-bell-everything.svg "); } - .icon--notification-bell-watching { --svg: url("notification-bell-watching.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 { + -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--notification-bell-access-only { --svg: url("notification-bell-access-only.svg "); } +.icon--notification-bell-everything { --svg: url("notification-bell-everything.svg "); } +.icon--notification-bell-watching { --svg: url("notification-bell-watching.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 0edd2a841..a600b690a 100644 --- a/app/assets/stylesheets/inputs.css +++ b/app/assets/stylesheets/inputs.css @@ -1,226 +1,224 @@ -@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%; - line-height: inherit; - max-inline-size: 100%; - padding: var(--input-padding, 0.5em 0.8em); - resize: none; +/* 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); - } + &: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; } - .input--file { - border: 0; - cursor: pointer; - display: grid; - inline-size: auto; - place-items: center; + &:where(:not(:active)):focus { + --input-border-color: var(--color-selected-dark); + --hover-color: var(--color-selected-dark); + --outline-size: 0; + --outline-color: transparent; - > * { - 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; - 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; - - @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"); - } - } - - .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); - } - } - } - - .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; - - &::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; - 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; - - &: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); - } - - .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; + 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; + 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; + + @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"); + } +} + +.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); + } + } +} + +.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; + + &::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; + 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; + + &: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); + } + + .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; +} diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css index b6ac9045a..cd27f6305 100644 --- a/app/assets/stylesheets/layout.css +++ b/app/assets/stylesheets/layout.css @@ -1,106 +1,104 @@ -@layer components { - body { - display: grid; - grid-template-rows: auto 1fr auto 9em; +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; } +} - :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; +:where(#footer) { + max-inline-size: 100dvw; - @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; - } + > nav { + padding-inline: var(--inline-space); } +} - :where(#footer) { - max-inline-size: 100dvw; +:where(#header) { + max-inline-size: 100dvw; + view-transition-name: header; - > nav { - padding-inline: var(--inline-space); - } - } + > nav { + font-size: var(--text-small); + view-transition-name: nav; - :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; - } - } + header { + h1 { + font-weight: 800; + margin-block-start: 0.2em; + text-align: center; 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; + background-color: transparent; + font-weight: inherit; + text-decoration: underline; + } + } - @media (hover: hover) { - &:hover { - background-color: var(--color-subtle); - 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; } } } } - - > * { - align-items: center; - display: flex; - gap: 1ch; - justify-content: center; - padding: var(--block-space-half) var(--inline-space); - } - - .btn { - flex-shrink: 0; - } } - :is(#header, #footer) { - @media print { - display: none; - } + > * { + align-items: center; + display: flex; + gap: 1ch; + justify-content: center; + padding: var(--block-space-half) 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); - } + .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); } } diff --git a/app/assets/stylesheets/lightbox.css b/app/assets/stylesheets/lightbox.css index 6dabfefc4..b2508149e 100644 --- a/app/assets/stylesheets/lightbox.css +++ b/app/assets/stylesheets/lightbox.css @@ -1,59 +1,57 @@ -@layer components { - .lightbox { - --backdrop-speed: 150ms; +.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); + 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; &::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; + opacity: 0.75; } + } + @starting-style { &[open] { - display: grid; - opacity: 1; - place-items: center; - - &::backdrop { - opacity: 0.75; - } + opacity: 0; } - @starting-style { - &[open] { - opacity: 0; - } - - &[open]::backdrop { - opacity: 0; - } + &[open]::backdrop { + opacity: 0; } } - - .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__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)); } diff --git a/app/assets/stylesheets/markdown.css b/app/assets/stylesheets/markdown.css index 3e91fb41e..6ddc326c4 100644 --- a/app/assets/stylesheets/markdown.css +++ b/app/assets/stylesheets/markdown.css @@ -1,32 +1,30 @@ -@layer components { - .heading__link { - --hover-size: 0; - --opacity: 0.5; - --size: 0.8em; +.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; - } - } - - @media (prefers-color-scheme: dark) { - filter: invert(1); + :is(h1, h2, h3, h4, h5, h6):hover & { + --opacity: 0.5; } } + + @media (prefers-color-scheme: dark) { + filter: invert(1); + } } diff --git a/app/assets/stylesheets/notifications.css b/app/assets/stylesheets/notifications.css index 45eb46929..c99d96ef9 100644 --- a/app/assets/stylesheets/notifications.css +++ b/app/assets/stylesheets/notifications.css @@ -1,92 +1,90 @@ -@layer components { - .notification-tray { - inset: auto var(--inline-space) var(--block-space-half) auto; +.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; - } - - span { - display: none; - } + > * { + grid-area: 1/1; } - .notification-tray__read_action { - visibility: hidden; + span { + display: none; } } - } - .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 { + .notification-tray__read_action { visibility: hidden; } - - @media (hover: hover) { - &:hover { - --btn-background: var(--color-subtle-dark); - --btn-border-color: var(--color-subtle-dark); - - scale: 1; - - img { - visibility: unset; - } - } - } - - .notificiations-list--read & { - display: none; - } + } +} + +.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; + } + + @media (hover: hover) { + &:hover { + --btn-background: var(--color-subtle-dark); + --btn-border-color: var(--color-subtle-dark); + + scale: 1; + + img { + visibility: unset; + } + } + } + + .notificiations-list--read & { + display: none; } } diff --git a/app/assets/stylesheets/panels.css b/app/assets/stylesheets/panels.css index 86126c15e..5109cab91 100644 --- a/app/assets/stylesheets/panels.css +++ b/app/assets/stylesheets/panels.css @@ -1,15 +1,13 @@ -@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)); +.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 d5563d5dd..889a0bfbe 100644 --- a/app/assets/stylesheets/pins.css +++ b/app/assets/stylesheets/pins.css @@ -1,54 +1,52 @@ -@layer components { - .pin-tray { - inset: auto auto var(--block-space-half) var(--inline-space); +.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; } - } - } - - .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; + &: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; +} \ No newline at end of file diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css index 5c8ec1b95..b63a3f4be 100644 --- a/app/assets/stylesheets/popup.css +++ b/app/assets/stylesheets/popup.css @@ -1,40 +1,63 @@ -@layer components { - .popup { - --panel-border-radius: 0.5em; - --panel-padding: 0.4em 0.5em 0.5em; - --panel-size: auto; +.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; - inline-size: auto; - inset: 0 auto auto 0; - min-inline-size: 20ch; - max-inline-size: 40ch; - position: absolute; - z-index: 2; + &[open] { + display: flex; + } +} - &[open] { - display: flex; +.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); } } - .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; + &:has(input:checked) { + --btn-background: var(--color-selected); + --btn-color: var(--color-ink); - justify-content: start; + img { + filter: invert(0); - &::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); + &.checked { + display: block; + } + } + @media (prefers-color-scheme: dark) { + img { + filter: invert(1); + } } @media (any-hover: hover) { @@ -42,43 +65,18 @@ --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; - } } - .popup__list { - row-gap: 2px; - } - - .popup__title { - font-weight: 800; + img.checked { + block-size: 1em; + inline-size: 1em; } } + +.popup__list { + row-gap: 2px; +} + +.popup__title { + font-weight: 800; +} diff --git a/app/assets/stylesheets/qr-codes.css b/app/assets/stylesheets/qr-codes.css deleted file mode 100644 index 5019bf828..000000000 --- a/app/assets/stylesheets/qr-codes.css +++ /dev/null @@ -1,6 +0,0 @@ -@layer components { - .qr-code { - aspect-ratio: 1; - block-size: 50dvh; - } -} diff --git a/app/assets/stylesheets/reactions.css b/app/assets/stylesheets/reactions.css index 9c0a4e410..70c8626aa 100644 --- a/app/assets/stylesheets/reactions.css +++ b/app/assets/stylesheets/reactions.css @@ -1,90 +1,88 @@ -@layer components { - .reactions { - --column-gap: 0.4ch; - --reaction-border-color: var(--color-subtle); - --row-gap: 0; +.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); + 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; + } + } } - .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); + @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); } } - .btn:is(.reaction__action) { - --btn-border-color: var(--reaction-border-color); + &:has(.reaction__input):focus-within { + --hover-color: var(--color-selected-dark); + --reaction-border-color: var(--color-selected-dark); - 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); - } - } - } - - .reaction__form { - transition: none; - - &.expanded { - animation: react 0.2s both; - transform: translate3d(0, 0, 0); - } - - .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; + box-shadow: 0 0 0 var(--hover-size) var(--hover-color); } } + +.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); + } + } +} + +.reaction__form { + transition: none; + + &.expanded { + animation: react 0.2s both; + transform: translate3d(0, 0, 0); + } + + .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; +} \ No newline at end of file diff --git a/app/assets/stylesheets/reset.css b/app/assets/stylesheets/reset.css deleted file mode 100644 index 1e0daadcc..000000000 --- a/app/assets/stylesheets/reset.css +++ /dev/null @@ -1,86 +0,0 @@ -@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/separators.css b/app/assets/stylesheets/separators.css deleted file mode 100644 index 4e3d98241..000000000 --- a/app/assets/stylesheets/separators.css +++ /dev/null @@ -1,18 +0,0 @@ -@layer components { - .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; - } -} diff --git a/app/assets/stylesheets/spinners.css b/app/assets/stylesheets/spinners.css deleted file mode 100644 index 3715f18ab..000000000 --- a/app/assets/stylesheets/spinners.css +++ /dev/null @@ -1,22 +0,0 @@ -@layer components { - .spinner { - position: relative; - - &::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); - position: absolute; - } - } -} diff --git a/app/assets/stylesheets/syntax.css b/app/assets/stylesheets/syntax.css index 0fb7e193b..148a02a6e 100644 --- a/app/assets/stylesheets/syntax.css +++ b/app/assets/stylesheets/syntax.css @@ -1,108 +1,106 @@ -@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); +.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); + } - .w { - color: var(--color-ink); - } + .k, .kd, .kn, .kp, .kr, .kt, .kv { + color: var(--keyword); + } - .k, .kd, .kn, .kp, .kr, .kt, .kv { - color: var(--keyword); - } + .gr { + color: var(--color-subtle-light); + } - .gr { - color: var(--color-subtle-light); - } + .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)); + } - .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)); - } + .nb, .nc, .no, .nn { + color: var(--variable); + } - .nb, .nc, .no, .nn { - color: var(--variable); - } + .sr, .na, .nt { + color: var(--entity-tag); + } - .sr, .na, .nt { - color: var(--entity-tag); - } + .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)); + } - .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)); - } + .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); + } - .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); - } + .gh { + color: var(--constant); + font-weight: bold; + } - .gh { - color: var(--constant); - font-weight: bold; - } + .gu { + color: var(--constant); + font-weight: bold; + } - .gu { - color: var(--constant); - font-weight: bold; - } + .s, .sa, .sc, .dl, .sd, .s2, .se, .sh, .sx, .s1, .ss { + color: var(--string); + } - .s, .sa, .sc, .dl, .sd, .s2, .se, .sh, .sx, .s1, .ss { - color: var(--string); - } + .nd, .nf, .fm { + color: var(--entity); + } - .nd, .nf, .fm { - color: var(--entity); - } + .err { + color: var(--color-ink-reversed); + background-color: var(--markup-deleted); + } - .err { - color: var(--color-ink-reversed); - background-color: var(--markup-deleted); - } + .c, .ch, .cd, .cm, .cp, .cpf, .c1, .cs, .gl, .gt { + color: var(--comment); + } - .c, .ch, .cd, .cm, .cp, .cpf, .c1, .cs, .gl, .gt { - color: var(--comment); - } + .ni, .si { + color: var(--storage-modifier-import); + } - .ni, .si { - color: var(--storage-modifier-import); - } + .ge { + color: var(--storage-modifier-import); + font-style: italic; + } - .ge { - color: var(--storage-modifier-import); - font-style: italic; - } - - .gs { - color: var(--storage-modifier-import); - font-weight: bold; - } + .gs { + color: var(--storage-modifier-import); + font-weight: bold; } } diff --git a/app/assets/stylesheets/tags.css b/app/assets/stylesheets/tags.css index 2b667e771..6254755fe 100644 --- a/app/assets/stylesheets/tags.css +++ b/app/assets/stylesheets/tags.css @@ -1,32 +1,30 @@ -@layer components { - .tag-picker { - --panel-border-radius: 2em; - --panel-padding: 0.5em 0.7em; - --panel-size: max-content; +.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; - } - - .input { - --input-padding: 0.2em 0.5em; - - inline-size: 18ch; - } + &[open] { + display: flex; } - .tag-picker__button { - font-size: 0.7em; - margin-inline-start: 0.5em; + .input { + --input-padding: 0.2em 0.5em; - + .panel { - --panel-size: 18ch; - } + inline-size: 18ch; + } +} + +.tag-picker__button { + font-size: 0.7em; + margin-inline-start: 0.5em; + + + .panel { + --panel-size: 18ch; } } diff --git a/app/assets/stylesheets/terminals.css b/app/assets/stylesheets/terminals.css index d431d3cfa..788e8b508 100644 --- a/app/assets/stylesheets/terminals.css +++ b/app/assets/stylesheets/terminals.css @@ -1,58 +1,56 @@ -@layer components { - .terminal { - --row-gap: 0.2lh; +.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; - } - - .terminal__link & { - 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 { - --hover-size: 0; + .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; - color: var(--color-positive); - } + &::placeholder { + color: var(--color-always-white); + opacity: 0.5; + } - .terminal__menu { - display: none; - list-style: none; - transition: display 1000ms allow-discrete; - - .terminal--open & { - display: flex; + .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; + } +} diff --git a/app/assets/stylesheets/toggles.css b/app/assets/stylesheets/toggles.css index bec0960ed..d37f6a21b 100644 --- a/app/assets/stylesheets/toggles.css +++ b/app/assets/stylesheets/toggles.css @@ -1,15 +1,13 @@ -@layer components { - .toggler--toggled { - .toggler__visible-when-off { - display: none; - } - - .toggler__visible-when-on { - display: unset; - } +.toggler--toggled { + .toggler__visible-when-off { + display: none; } .toggler__visible-when-on { - display: none; + display: unset; } } + +.toggler__visible-when-on { + display: none; +} diff --git a/app/assets/stylesheets/translations.css b/app/assets/stylesheets/translations.css index 93c34e258..7cb7e921e 100644 --- a/app/assets/stylesheets/translations.css +++ b/app/assets/stylesheets/translations.css @@ -1,35 +1,33 @@ -@layer components { - /* Language translations */ - .lanuage-list-menu { - --max-width: 40ch; +/* 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)); - } - - .popover-orientation-top & { - inset-block-end: 100%; - } + @media (max-width: 70ch) { + max-inline-size: calc(var(--max-width) - var(--inline-space)); } - .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; + .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; +} diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index fa208017d..0ae160385 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -2,134 +2,28 @@ --tray-size: max(20dvw, 18rem); } -@layer components { - .tray { - --height: calc(2.48lh + var(--block-space)); +.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 { - --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; + .tray__item { --offset: calc((var(--position) - 1) * (var(--block-space) * -1)); - --position: 7; + --position: 1; --scale: calc(1 - var(--position) / 30); --z: calc(6 - var(--position)); - block-size: var(--height); - display: none; - inset: auto 0.1ch 0 auto; + inset: auto 0 0; inline-size: var(--tray-size); + outline: 0; pointer-events: none; position: absolute; scale: var(--scale); @@ -138,16 +32,120 @@ transition: scale 0.2s ease-out, transform 0.2s ease-out; z-index: var(--z); - .tray:has(.tray__item:nth-child(7)) & { - display: flex; - } + &: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-half) * -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: 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 614489b3f..39ec9a4f3 100644 --- a/app/assets/stylesheets/utilities.css +++ b/app/assets/stylesheets/utilities.css @@ -1,220 +1,289 @@ -@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); } +:root { + --inline-space: 1ch; + --inline-space-half: calc(var(--inline-space) / 2); + --inline-space-double: calc(var(--inline-space) * 2); - .txt-align-center { text-align: center; } - .txt-align-start { text-align: start; } - .txt-align-end { text-align: end; } + --block-space: 1rem; + --block-space-half: calc(var(--block-space) / 2); + --block-space-double: calc(var(--block-space) * 2); - .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 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; +} - /* 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; } +/* 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); } - .align-center { align-items: center; } - .align-start { align-items: start; } - .align-end { align-items: end; } +.txt-align-center { text-align: center; } +.txt-align-start { text-align: start; } +.txt-align-end { text-align: end; } - .align-self-end { align-self: end; } - .align-self-start { align-self: start; } +.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; } - .contain { contain: inline-size; } +/* 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; } - .flex { display: flex; } - .flex-inline { display: inline-flex; } - .flex-column { flex-direction: column; } - .flex-wrap { flex-wrap: wrap; } +.align-center { align-items: center; } +.align-start { align-items: start; } +.align-end { align-items: end; } - .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; } +.align-self-end { align-self: end; } +.align-self-start { align-self: start; } - .gap { - column-gap: var(--column-gap, var(--inline-space)); - row-gap: var(--row-gap, var(--block-space)); +.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-half { - column-gap: var(--column-gap, var(--inline-space-half)); - row-gap: var(--row-gap, var(--block-space-half)); - } +.overflow-line-clamp { + -webkit-line-clamp: var(--lines, 2); + -webkit-box-orient: vertical; + display: -webkit-box; + overflow: hidden; + text-overflow: clip; + white-space: normal; +} - /* 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%; } +/* Padding */ +.pad { padding: var(--block-space) var(--inline-space); } +.pad-double { padding: var(--block-space-double) var(--inline-space-double); } - /* 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-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-hide-scrollbar::-webkit-scrollbar { - @media (pointer: course) { - display: none; - } - } +.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-line-clamp { - -webkit-line-clamp: var(--lines, 2); - -webkit-box-orient: vertical; - display: -webkit-box; - overflow: hidden; - text-overflow: clip; - white-space: normal; - } +.unpad { padding: 0; } +.unpad-inline { padding-inline: 0; } - /* Padding */ - .pad { padding: var(--block-space) var(--inline-space); } - .pad-double { padding: var(--block-space-double) var(--inline-space-double); } +/* 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); } - .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-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-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 { margin: 0; } +.margin-none-block { margin-block: 0; } +.margin-none-block-start { margin-block-start: 0; } +.margin-none-block-end { margin-block-end: 0; } - .unpad { padding: 0; } - .unpad-inline { padding-inline: 0; } +.margin-none-inline { margin-inline: 0; } +.margin-none-inline-start { margin-inline-start: 0; } +.margin-none-inline-end { margin-inline-end: 0; } - /* 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); } +.center { margin-inline: auto; } +.center-block { margin-block: auto; } - .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); } +/* Position */ +.position-relative { position: relative; } +.position-sticky { position: sticky; inset: var(--inset, 0 auto auto auto); z-index: var(--z, 1); } - .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; } +/* 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-inline { margin-inline: 0; } - .margin-none-inline-start { margin-inline-start: 0; } - .margin-none-inline-end { margin-inline-end: 0; } +.translucent { opacity: var(--opacity, 0.66); } - .center { margin-inline: auto; } - .center-block { margin-block: auto; } +/* 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; } - /* Position */ - .position-relative { position: relative; } - .position-sticky { position: sticky; inset: var(--inset, 0 auto auto auto); z-index: var(--z, 1); } +/* Border radius */ +.border-radius { border-radius: var(--border-radius, 0.5em); } - /* 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; } +/* 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); - .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 { + @media (prefers-color-scheme: dark) { 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); - - @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); - } + 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; +/* Lists */ +:where(.list-style-none) { + margin: 0 auto; + min-inline-size: 0; + padding: 0; + + li { + display: block; + margin: 0; + max-inline-size: 100%; min-inline-size: 0; padding: 0; - - li { - display: block; - margin: 0; - max-inline-size: 100%; - min-inline-size: 0; - padding: 0; - text-align: start; - } + text-align: start; } - - /* 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; } +} + +/* 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; +} + +/* Spinners */ +.spinner { + position: relative; + + &::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); + 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; } diff --git a/app/assets/stylesheets/workflows.css b/app/assets/stylesheets/workflows.css index b6591a2a7..3bee79623 100644 --- a/app/assets/stylesheets/workflows.css +++ b/app/assets/stylesheets/workflows.css @@ -1,67 +1,65 @@ -@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; +.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); - } - } - - .bubbles-list & { - display: none; + @media (hover: hover) { + &:hover { + background-color: color(from var(--bubble-color) srgb r g b / 0.15); } } - .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); - } - - .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; + .bubbles-list & { + display: none; } } + +.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); + } + + .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; +}