Revert "Merge pull request #345 from basecamp/cascade-layers"
This reverts commit01e7301327, reversing changes made to832134385a.
This commit is contained in:
Jason Zimdars
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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%; }
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
+111
-113
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
+448
-450
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
+173
-171
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
+450
-452
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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)));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+145
-147
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
+100
-102
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
+157
-158
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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"); }
|
||||
|
||||
+218
-220
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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));
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
@layer components {
|
||||
.qr-code {
|
||||
aspect-ratio: 1;
|
||||
block-size: 50dvh;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
+123
-125
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user