Jason Zimdars
537 lines
11 KiB
CSS
537 lines
11 KiB
CSS
:root {
|
|
--bubble-shape: 54% 46% 61% 39% / 57% 49% 51% 43%;
|
|
--bubble-shift: 10deg;
|
|
--bubble-size-one: 14cqi;
|
|
--bubble-size-two: 16cqi;
|
|
--bubble-size-three: 18cqi;
|
|
--bubble-size-four: 20cqi;
|
|
--bubble-size-five: 22cqi;
|
|
}
|
|
|
|
.bubbles {
|
|
--column-gap: 2cqi;
|
|
--row-gap: 1cqi;
|
|
|
|
margin-block: clamp(var(--block-space), 3%, calc(var(--block-space) * 2));
|
|
|
|
> * {
|
|
flex-shrink: 1;
|
|
}
|
|
}
|
|
|
|
.bubble {
|
|
--bubble-background: radial-gradient(circle at center, color(from var(--bubble-color) srgb r g b / 0.25), color(from var(--bubble-color) srgb r g b / 0.05));
|
|
--bubble-border-width: 0.2rem;
|
|
--hover-size: 0;
|
|
|
|
aspect-ratio: 1;
|
|
block-size: var(--bubble-size);
|
|
color: var(--bubble-color, currentColor);
|
|
container-type: inline-size;
|
|
display: grid;
|
|
place-items: center;
|
|
position: relative;
|
|
transition: 0.2s ease;
|
|
|
|
.bubbles & {
|
|
&:nth-child(1) { order: 5; }
|
|
&:nth-child(2) { order: 3; }
|
|
&:nth-child(3) { order: 3; }
|
|
&:nth-child(4) { order: 7; }
|
|
&:nth-child(5) { order: 9; }
|
|
&:nth-child(6) { order: 5; }
|
|
&:nth-child(7) { order: 4; }
|
|
&:nth-child(8) { order: 9; }
|
|
&:nth-child(9) { order: 3; }
|
|
&:nth-child(10) { order: 7; }
|
|
&:nth-of-type(n+6) {
|
|
align-self: start;
|
|
}
|
|
}
|
|
|
|
[data-turbo-preview] & { animation: none; }
|
|
|
|
> * {
|
|
grid-area: 1/1;
|
|
}
|
|
|
|
.bubble__perma & {
|
|
--bubble-border-width: 0.3rem;
|
|
--bubble-size: 40dvh !important;
|
|
|
|
z-index: 1;
|
|
}
|
|
}
|
|
.bubble__detail {
|
|
--bubble-border-color: color-mix(in srgb, var(--bubble-color) 30%, var(--color-bg));
|
|
--bubble-border-width: 0.15em;
|
|
|
|
aspect-ratio: 1;
|
|
background: var(--color-bg);
|
|
block-size: auto;
|
|
border: var(--bubble-border-width) solid var(--bubble-border-color);
|
|
border-radius: var(--bubble-shape);
|
|
display: flex;
|
|
font-size: 5cqi;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
max-inline-size: 18ch;
|
|
padding: 1em;
|
|
place-content: center;
|
|
place-items: center;
|
|
position: absolute;
|
|
scale: 1;
|
|
text-overflow: ellipsis;
|
|
transform: none;
|
|
transition: transform 200ms ease-out;
|
|
white-space: nowrap;
|
|
z-index: 1;
|
|
|
|
a {
|
|
color: var(--bubble-color);
|
|
}
|
|
|
|
&.bubble__assignee {
|
|
font-size: 4.5cqi;
|
|
inset: 8em auto auto -1.7em;
|
|
padding: 0.2em;
|
|
|
|
+ & {
|
|
inset: 4em auto auto -1em;
|
|
|
|
+ & {
|
|
inset: 1em auto auto 2em;
|
|
}
|
|
}
|
|
|
|
.avatar {
|
|
border-radius: var(--bubble-shape);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.bubbles .bubble:not(.popped):hover & {
|
|
transform: translate(0, -1rem);
|
|
}
|
|
|
|
.bubbles .bubble:not(.popped):hover & + & {
|
|
transform: translate(1rem, -1rem);
|
|
}
|
|
|
|
.bubbles .bubble:not(.popped):hover & + & + & {
|
|
transform: translate(1.5rem, -0.5rem);;
|
|
}
|
|
}
|
|
|
|
.assignee__name {
|
|
display: none;
|
|
|
|
.bubble__perma & {
|
|
color: var(--bubble-color);
|
|
display: inline-block;
|
|
font-size: 0.9em;
|
|
font-weight: normal;
|
|
inline-size: 15ch;
|
|
inset: 0.3em 3.6em auto auto;
|
|
position: absolute;
|
|
text-align: end;
|
|
white-space: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.bubble__comments {
|
|
--arrow-size: 1.5em;
|
|
--border-size: var(--bubble-border-width);
|
|
|
|
aspect-ratio: 9/6;
|
|
inset: auto auto 2em -1em;
|
|
|
|
&::before {
|
|
aspect-ratio: 2;
|
|
background: var(--bubble-border-color);
|
|
clip-path: polygon(50% 100%, 100% 0, 0 0);
|
|
inline-size: var(--arrow-size);
|
|
content: "";
|
|
display: block;
|
|
inset-block-end: auto;
|
|
inset-block-start: 94%;
|
|
inset-inline-start: 66%;
|
|
position: absolute;
|
|
transform: translateX(-50%) rotate(-20deg);
|
|
}
|
|
|
|
&::after {
|
|
aspect-ratio: 2;
|
|
background: var(--color-bg);
|
|
clip-path: polygon(50% 100%, 100% 0, 0 0);
|
|
inline-size: var(--arrow-size);
|
|
content: "";
|
|
display: block;
|
|
inset-block-end: auto;
|
|
inset-block-start: calc(94% - var(--border-size) * 1.5);
|
|
inset-inline-start: 64%;
|
|
position: absolute;
|
|
transform: translateX(-50%) rotate(-20deg);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.bubbles .bubble:not(.popped):hover & {
|
|
transform: translate(-0.5rem, -2rem);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.bubble__date {
|
|
--rotation: -45deg;
|
|
|
|
aspect-ratio: 5/7;
|
|
cursor: pointer;
|
|
inset: 1cqb 1cqi auto auto;
|
|
transform: rotate(var(--rotation));
|
|
|
|
.bubble__date-text {
|
|
transform: rotate(calc(var(--rotation) * -1));
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.bubbles .bubble:not(.popped):hover & {
|
|
transform: rotate(calc(var(--rotation) + var(--bubble-shift) * 1)) translate(0rem, 0.5rem);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.bubbles .bubble:not(.popped):hover & {
|
|
transform: translate(1rem, 1rem);
|
|
}
|
|
|
|
.bubbles .bubble:not(.popped):hover & + & {
|
|
transform: translate(0, -1rem);
|
|
}
|
|
|
|
.bubbles .bubble:not(.popped):hover & + & + & {
|
|
transform: translate(-1rem, -1rem);
|
|
}
|
|
}
|
|
}
|
|
|
|
.bubble__image {
|
|
border: none;
|
|
border-radius: var(--bubble-shape);
|
|
block-size: 100cqi;
|
|
inline-size: 100cqi;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
transform: rotate(var(--bubble-rotate)) scale(0.92);
|
|
transition: 0.2s ease;
|
|
|
|
@media (hover: hover) {
|
|
.bubbles .bubble:not(.popped):hover & {
|
|
transform: rotate(calc(var(--bubble-rotate) + var(--bubble-shift))) scale(0.9);
|
|
}
|
|
}
|
|
|
|
img {
|
|
block-size: 100cqi;
|
|
inline-size: 100cqi;
|
|
max-inline-size: none;
|
|
object-fit: cover;
|
|
transform: rotate(calc(var(--bubble-rotate) * -1)) scale(1.1);
|
|
|
|
&:is([src=""]) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
:is(.bubbles, .bubbles-list) .bubble--wobble & {
|
|
animation: wobble-img 1200ms normal forwards ease-out;
|
|
}
|
|
}
|
|
|
|
.bubble__link {
|
|
content: "";
|
|
inset: 0;
|
|
position: absolute;
|
|
z-index: -1;
|
|
|
|
.bubbles & {
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
.bubbles-list {
|
|
--bubble-border-width: 0.15rem;
|
|
--bubble-shift: 15deg;
|
|
--bubble-size: 1.8em;
|
|
--divider-offset: 1.2em;
|
|
--hover-size: 0;
|
|
|
|
container-type: inline-size;
|
|
font-size: 1.4cqi;
|
|
inline-size: min(90ch, 100dvw);
|
|
max-inline-size: 100dvw;
|
|
|
|
@media (max-width: 70ch) {
|
|
inline-size: 100%;
|
|
}
|
|
|
|
.bubble {
|
|
order: 0;
|
|
}
|
|
|
|
.bubble__title-link {
|
|
color: var(--color-txt);
|
|
text-decoration: none;
|
|
}
|
|
|
|
ul {
|
|
margin-inline: var(--divider-offset);
|
|
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bubbles-list__divider {
|
|
--border-color: var(--divider-color);
|
|
--border-size: 2px;
|
|
--divider-color: var(--color-subtle-dark);
|
|
|
|
block-size: calc(100% + 12ch);
|
|
font-size: 1rem;
|
|
cursor: grab;
|
|
margin-inline: calc(var(--divider-offset) * -1);
|
|
visibility: hidden;
|
|
}
|
|
|
|
.bubbles-list__divider--installed {
|
|
visibility: visible;
|
|
}
|
|
|
|
.divider-drag-image {
|
|
background-color: var(--color-link);
|
|
border-radius: 1rem;
|
|
color: var(--color-ink-reversed);
|
|
inset: auto 100% 100% auto;
|
|
line-height: 2rem;
|
|
padding: 0 1rem;
|
|
position: fixed;
|
|
text-wrap: nowrap;
|
|
}
|
|
|
|
.btn--reversed.bubbles-list__handle {
|
|
--btn-background: var(--divider-color);
|
|
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.bubbles-list__count {
|
|
--btn-background: var(--divider-color);
|
|
--btn-color: var(--color-ink-reversed);
|
|
--btn-gap: 0.5ch;
|
|
--btn-icon-size: 1em;
|
|
--btn-padding: 0.1em 1em 0.1em 0.7em;
|
|
}
|
|
|
|
.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 {
|
|
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;
|
|
}
|
|
}
|