kopia lustrzana https://github.com/cheeaun/phanpy
1048 wiersze
23 KiB
CSS
1048 wiersze
23 KiB
CSS
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: var(--bg-color);
|
|
color: var(--text-color);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
#app {
|
|
min-height: 100vh;
|
|
min-height: 100dvh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* MENTIONS */
|
|
|
|
a.mention {
|
|
text-decoration-line: none;
|
|
}
|
|
a.mention span {
|
|
text-decoration-line: underline;
|
|
text-decoration-color: inherit;
|
|
text-decoration-thickness: 2px;
|
|
text-underline-offset: 2px;
|
|
}
|
|
/* a.mention:has(span).hashtag {
|
|
color: var(--link-light-color);
|
|
} */
|
|
a.mention span {
|
|
color: var(--text-color);
|
|
}
|
|
a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
|
color: var(--link-visited-color);
|
|
text-decoration-color: var(--link-visited-color);
|
|
}
|
|
|
|
.deck-container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
height: 100dvh;
|
|
overflow: auto;
|
|
overflow-x: hidden;
|
|
transition: opacity 0.1s ease-in-out;
|
|
overscroll-behavior: contain;
|
|
scroll-behavior: smooth;
|
|
background-color: var(--bg-color);
|
|
}
|
|
.deck-container[hidden] {
|
|
display: block;
|
|
position: absolute;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
content-visibility: hidden;
|
|
}
|
|
|
|
.deck-container,
|
|
.deck.contained {
|
|
scroll-padding-top: 3em;
|
|
}
|
|
|
|
.deck {
|
|
min-height: 100vh;
|
|
min-height: 100dvh;
|
|
margin: auto;
|
|
width: 40em;
|
|
max-width: 100vw;
|
|
border-left: 1px solid rgba(0, 0, 0, 0.1);
|
|
border-right: 1px solid rgba(0, 0, 0, 0.1);
|
|
background-color: var(--bg-color);
|
|
}
|
|
.deck.contained {
|
|
overflow: auto;
|
|
overflow-x: hidden;
|
|
height: 100vh;
|
|
height: 100dvh;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.deck > header {
|
|
min-height: 3em;
|
|
position: sticky;
|
|
top: 0;
|
|
background-color: var(--bg-blur-color);
|
|
background-image: linear-gradient(to bottom, var(--bg-color), transparent);
|
|
backdrop-filter: saturate(180%) blur(20px);
|
|
border-bottom: var(--hairline-width) solid var(--divider-color);
|
|
z-index: 1;
|
|
cursor: default;
|
|
z-index: 10;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
align-items: center;
|
|
user-select: none;
|
|
transition: transform 0.5s ease-in-out;
|
|
user-select: none;
|
|
}
|
|
.deck > header[hidden] {
|
|
transform: translateY(-100%);
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
.deck > header > .header-side:last-of-type {
|
|
text-align: right;
|
|
grid-column: 3;
|
|
}
|
|
.deck > header :is(button, .button).plain {
|
|
backdrop-filter: none;
|
|
}
|
|
.deck > header h1 {
|
|
margin: 0 8px;
|
|
padding: 0;
|
|
font-size: 1.2em;
|
|
text-align: center;
|
|
}
|
|
.deck > header h1:first-child {
|
|
text-align: left;
|
|
padding-left: 8px;
|
|
}
|
|
.deck h2 {
|
|
font-size: 1.45em;
|
|
}
|
|
.deck.padded-bottom .timeline > li:last-child {
|
|
padding-bottom: 80vh !important;
|
|
padding-bottom: 80dvh !important;
|
|
}
|
|
|
|
.timeline {
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
}
|
|
.timeline.grow {
|
|
/* min-height: 100vh;
|
|
min-height: 100dvh; */
|
|
padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
|
|
}
|
|
.timeline > li {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
border-bottom: var(--hairline-width) solid var(--divider-color);
|
|
}
|
|
.timeline.flat > li {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.timeline.contextual > li {
|
|
--width: 3px;
|
|
--left: 40px;
|
|
--right: calc(var(--left) + var(--width));
|
|
background-image: linear-gradient(
|
|
to right,
|
|
transparent,
|
|
transparent var(--left),
|
|
var(--comment-line-color) var(--left),
|
|
var(--comment-line-color) var(--right),
|
|
transparent var(--right),
|
|
transparent
|
|
);
|
|
background-repeat: no-repeat;
|
|
transition: opacity 0.3s ease-in-out;
|
|
}
|
|
.timeline.contextual > li:first-child {
|
|
background-position: 0 16px;
|
|
}
|
|
.timeline.contextual > li:last-child {
|
|
background-size: 100% 20px;
|
|
}
|
|
.timeline.contextual > li.descendant {
|
|
position: relative;
|
|
}
|
|
.timeline.contextual > li.descendant {
|
|
padding-bottom: 1em;
|
|
}
|
|
.timeline.contextual > li.descendant:not(.thread) > .status-link {
|
|
padding-left: 40px;
|
|
}
|
|
.timeline.contextual
|
|
> li.descendant.thread
|
|
> .status-link
|
|
+ .replies
|
|
> summary {
|
|
margin-left: calc(50px + 16px + 12px);
|
|
}
|
|
.timeline.contextual
|
|
> li.descendant.thread
|
|
> .status-link
|
|
+ .replies
|
|
.status-link {
|
|
padding-left: calc(50px + 16px + 12px);
|
|
}
|
|
.timeline.contextual
|
|
> li.descendant:not(.thread)
|
|
> .status-link
|
|
+ .replies
|
|
> summary {
|
|
margin-left: calc(40px + 16px);
|
|
}
|
|
.timeline.contextual
|
|
> li.descendant:not(.thread)
|
|
> .status-link
|
|
+ .replies
|
|
.status-link {
|
|
padding-left: calc(40px + 16px);
|
|
}
|
|
.timeline.contextual > li.descendant:not(.thread):before {
|
|
--radius: 10px;
|
|
--diameter: calc(var(--radius) * 2);
|
|
content: '';
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 40px;
|
|
width: var(--diameter);
|
|
height: var(--diameter);
|
|
border-radius: var(--radius);
|
|
border-style: solid;
|
|
border-width: var(--width);
|
|
border-color: transparent transparent var(--comment-line-color) transparent;
|
|
transform: rotate(45deg);
|
|
}
|
|
.timeline.contextual > li .replies-link {
|
|
color: var(--text-insignificant-color);
|
|
margin-left: 16px;
|
|
margin-top: -12px;
|
|
padding-bottom: 12px;
|
|
font-size: 90%;
|
|
}
|
|
.timeline.contextual > li.thread > .status-link .replies-link {
|
|
margin-left: calc(50px + 16px + 12px);
|
|
}
|
|
.timeline.contextual > li .replies-link * {
|
|
vertical-align: middle;
|
|
}
|
|
.timeline.contextual > li .replies {
|
|
margin-top: -12px;
|
|
}
|
|
.timeline.contextual > li .replies :is(ul, li) {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
.timeline.contextual > li .replies summary {
|
|
padding: 8px 16px;
|
|
background-color: var(--bg-faded-color);
|
|
display: inline-block;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
color: var(--text-insignificant-color);
|
|
user-select: none;
|
|
box-shadow: 0 0 0 2px var(--bg-color);
|
|
position: relative;
|
|
}
|
|
.timeline.contextual > li .replies summary:active,
|
|
.timeline.contextual > li .replies[open] summary {
|
|
color: var(--text-color);
|
|
background-color: var(--comment-line-color);
|
|
background-image: linear-gradient(
|
|
to top right,
|
|
var(--comment-line-color),
|
|
var(--bg-faded-color)
|
|
);
|
|
}
|
|
.timeline.contextual > li .replies[open] summary {
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
.timeline.contextual > li .replies summary[hidden] {
|
|
display: none;
|
|
}
|
|
.timeline.contextual > li .replies li {
|
|
position: relative;
|
|
}
|
|
.timeline.contextual > li .replies li {
|
|
--width: 3px;
|
|
--left: calc(40px + 16px);
|
|
--right: calc(var(--left) + var(--width));
|
|
background-image: linear-gradient(
|
|
to right,
|
|
transparent,
|
|
transparent var(--left),
|
|
var(--comment-line-color) var(--left),
|
|
var(--comment-line-color) var(--right),
|
|
transparent var(--right),
|
|
transparent
|
|
);
|
|
background-repeat: no-repeat;
|
|
}
|
|
.timeline.contextual > li.thread .replies li {
|
|
--left: calc(50px + 16px + 12px);
|
|
}
|
|
.timeline.contextual > li .replies li:last-child {
|
|
background-size: 100% 20px;
|
|
}
|
|
.timeline.contextual > li .replies li:before {
|
|
--radius: 10px;
|
|
--diameter: calc(var(--radius) * 2);
|
|
content: '';
|
|
position: absolute;
|
|
top: 10px;
|
|
left: calc(40px + 16px);
|
|
width: var(--diameter);
|
|
height: var(--diameter);
|
|
border-radius: var(--radius);
|
|
border-style: solid;
|
|
border-width: var(--width);
|
|
border-color: transparent transparent var(--comment-line-color) transparent;
|
|
transform: rotate(45deg);
|
|
}
|
|
.timeline.contextual > li.thread .replies li:before {
|
|
left: calc(50px + 16px + 12px);
|
|
}
|
|
.timeline.contextual.loading > li:not(.hero) {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
/* background-image: none !important; */
|
|
}
|
|
/* .timeline.contextual.loading > li:not(.hero):before {
|
|
content: none !important;
|
|
} */
|
|
|
|
.timeline-deck.compact .status {
|
|
max-height: max(25vh, 160px);
|
|
overflow: hidden;
|
|
mask-image: linear-gradient(
|
|
rgba(0, 0, 0, 1),
|
|
rgba(0, 0, 0, 1) 80%,
|
|
transparent 95%
|
|
);
|
|
}
|
|
.timeline-deck.compact .status .meta ~ * {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.timeline-header {
|
|
padding: 0 16px;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.timeline-empty {
|
|
color: var(--text-insignificant-color);
|
|
padding: 0 16px;
|
|
margin-bottom: 3em;
|
|
}
|
|
|
|
.status-loading {
|
|
text-align: center;
|
|
color: var(--text-insignificant-color);
|
|
}
|
|
.status-error {
|
|
text-align: center;
|
|
color: var(--text-insignificant-color);
|
|
}
|
|
|
|
.status-link {
|
|
display: block;
|
|
text-decoration-line: none;
|
|
color: inherit;
|
|
user-select: none;
|
|
transition: background-color 0.2s ease-out;
|
|
-webkit-tap-highlight-color: transparent;
|
|
animation: appear 0.2s ease-out;
|
|
}
|
|
.status-link:is(:focus, .is-active) {
|
|
background-color: var(--link-bg-hover-color);
|
|
outline-offset: -2px;
|
|
}
|
|
@media (hover: hover) {
|
|
.status-link:hover {
|
|
background-color: var(--link-bg-hover-color);
|
|
outline-offset: -2px;
|
|
}
|
|
}
|
|
.status-link:active:not(:has(:is(.media, button):active)) {
|
|
filter: brightness(0.95);
|
|
}
|
|
|
|
.boost-carousel {
|
|
background: linear-gradient(
|
|
to bottom right,
|
|
var(--reblog-faded-color),
|
|
transparent 150%
|
|
);
|
|
position: relative;
|
|
}
|
|
.boost-carousel:after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background-image: radial-gradient(
|
|
ellipse 50% 32px at bottom center,
|
|
var(--reblog-faded-color),
|
|
transparent
|
|
),
|
|
linear-gradient(to top, var(--bg-color), transparent 64px);
|
|
background-repeat: no-repeat;
|
|
background-position: bottom center;
|
|
}
|
|
.boost-carousel .status-reblog {
|
|
background-image: none;
|
|
}
|
|
.boost-carousel header {
|
|
padding: 8px 16px 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.boost-carousel h3 {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 14px;
|
|
text-transform: uppercase;
|
|
color: var(--reblog-color);
|
|
text-shadow: 0 1px var(--bg-color);
|
|
}
|
|
.boost-carousel ul {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
scroll-snap-type: x mandatory;
|
|
scroll-behavior: smooth;
|
|
margin: 0;
|
|
padding: 8px 16px;
|
|
gap: 16px;
|
|
align-items: flex-start;
|
|
counter-reset: index;
|
|
}
|
|
.boost-carousel ul > li {
|
|
scroll-snap-align: center;
|
|
scroll-snap-stop: always;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
width: 100%;
|
|
max-width: min(320px, calc(100% - 16px));
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
max-height: 65vh;
|
|
max-height: 65dvh;
|
|
counter-increment: index;
|
|
position: relative;
|
|
}
|
|
.boost-carousel ul > li:before {
|
|
content: counter(index);
|
|
position: absolute;
|
|
left: 0;
|
|
font-size: 10px;
|
|
color: var(--reblog-color);
|
|
padding: 8px;
|
|
}
|
|
|
|
.ui-state {
|
|
padding: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.status-boost-link {
|
|
display: block;
|
|
width: 100%;
|
|
text-decoration-line: none;
|
|
color: inherit;
|
|
user-select: none;
|
|
transition: background-color 0.2s ease-out;
|
|
-webkit-tap-highlight-color: transparent;
|
|
animation: appear 0.2s ease-out;
|
|
border: 1px solid var(--outline-color);
|
|
background-color: var(--bg-blur-color);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 1px var(--bg-color);
|
|
}
|
|
.status-boost-link::focus {
|
|
background-color: var(--link-bg-hover-color);
|
|
}
|
|
@media (hover: hover) {
|
|
.status-boost-link:hover {
|
|
background-color: var(--link-bg-hover-color);
|
|
}
|
|
}
|
|
.status-boost-link:active:not(:has(:is(.media, button):active)) {
|
|
filter: brightness(0.95);
|
|
}
|
|
|
|
.deck-backdrop {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 1000;
|
|
display: flex;
|
|
background-color: var(--backdrop-color);
|
|
animation: appear 0.2s ease-out;
|
|
}
|
|
.deck-backdrop > a {
|
|
flex-grow: 1;
|
|
/* backdrop-filter: saturate(0.75); */
|
|
}
|
|
@keyframes slide-in {
|
|
0% {
|
|
transform: translate3d(100%, 0, 0);
|
|
}
|
|
100% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
.deck-backdrop .deck {
|
|
width: 40em;
|
|
max-width: 100vw;
|
|
background-color: var(--bg-color);
|
|
animation: slide-in 0.5s var(--timing-function);
|
|
box-shadow: -1px 0 var(--bg-color);
|
|
}
|
|
.deck-backdrop .deck .status {
|
|
max-width: 40em;
|
|
}
|
|
|
|
.deck-close {
|
|
color: var(--text-insignificant-color) !important;
|
|
}
|
|
.deck-close:is(:hover, :focus) {
|
|
color: var(--text-color) !important;
|
|
}
|
|
|
|
:is(button, .button).plain.has-badge:after {
|
|
content: '';
|
|
display: inline-block;
|
|
position: absolute;
|
|
right: 10px;
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background-color: var(--link-color);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
@keyframes fade-from-top {
|
|
0% {
|
|
transform: translate(-50%, -200%);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translate(-50%, 0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.updates-button {
|
|
position: absolute;
|
|
z-index: 2;
|
|
animation: fade-from-top 0.3s ease-out;
|
|
left: 50%;
|
|
margin-top: 8px;
|
|
transform: translate(-50%, 0);
|
|
font-size: 90%;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
var(--button-bg-blur-color),
|
|
var(--button-bg-color)
|
|
);
|
|
backdrop-filter: blur(16px);
|
|
box-shadow: 0 3px 8px -1px var(--bg-faded-blur-color),
|
|
0 10px 36px -4px var(--button-bg-blur-color);
|
|
}
|
|
.updates-button .icon {
|
|
vertical-align: top;
|
|
}
|
|
|
|
/* BOX */
|
|
|
|
.box {
|
|
width: 40em;
|
|
max-width: 100vw;
|
|
padding: 16px;
|
|
}
|
|
|
|
/* CAROUSEL */
|
|
/* use snap, center children, max width viewport */
|
|
|
|
.carousel {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
scroll-snap-type: x mandatory;
|
|
/* scroll-behavior: smooth; */
|
|
scrollbar-width: none;
|
|
overscroll-behavior: contain;
|
|
touch-action: pan-x;
|
|
}
|
|
.carousel::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.carousel > * {
|
|
scroll-snap-align: center;
|
|
scroll-snap-stop: always;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
height: 100dvh;
|
|
background-color: var(--average-color-alpha);
|
|
background-image: radial-gradient(
|
|
closest-side,
|
|
var(--average-color) 10%,
|
|
var(--average-color-alpha) 40%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
.carousel > * :is(img, video) {
|
|
width: auto;
|
|
max-width: 100vw;
|
|
height: auto;
|
|
max-height: 100vh;
|
|
max-height: 100dvh;
|
|
vertical-align: middle;
|
|
}
|
|
.carousel > * video {
|
|
min-height: 80px;
|
|
max-height: 80vh; /* prevent other UI elements from obscuring video */
|
|
}
|
|
|
|
.carousel-top-controls {
|
|
top: 0;
|
|
top: env(safe-area-inset-top, 0);
|
|
}
|
|
:is(.carousel-top-controls, .carousel-controls) {
|
|
position: fixed;
|
|
left: 0;
|
|
left: env(safe-area-inset-left, 0);
|
|
right: 0;
|
|
right: env(safe-area-inset-right, 0);
|
|
padding: 16px;
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: space-between;
|
|
text-align: center;
|
|
pointer-events: none;
|
|
}
|
|
:is(.carousel-top-controls, .carousel-controls)[hidden] {
|
|
opacity: 0;
|
|
}
|
|
|
|
:is(.button, button).carousel-button,
|
|
button.carousel-dot {
|
|
pointer-events: auto;
|
|
font-weight: bold;
|
|
}
|
|
:is(.button, button).carousel-button[hidden] {
|
|
display: inline-block;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
.carousel-dots {
|
|
border-radius: 999px;
|
|
backdrop-filter: blur(12px) invert(0.25);
|
|
}
|
|
button.carousel-dot {
|
|
color: var(--text-insignificant-color) !important;
|
|
font-weight: bold;
|
|
backdrop-filter: none !important;
|
|
}
|
|
button.carousel-dot[disabled] {
|
|
pointer-events: none;
|
|
}
|
|
button.carousel-dot:is(:hover, :focus, .active, [disabled].active) {
|
|
color: var(--button-text-color) !important;
|
|
}
|
|
button.carousel-dot:is(.active, [disabled].active) {
|
|
opacity: 1;
|
|
transform: scale(2.2) translateY(-0.5px);
|
|
}
|
|
@media (hover: hover) {
|
|
.carousel-top-controls {
|
|
transform: translateY(-100%);
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
.carousel-controls {
|
|
transform: scaleX(200%);
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
:is(.carousel-top-controls, .carousel-controls)[hidden] {
|
|
opacity: 1;
|
|
}
|
|
.carousel:hover + .carousel-top-controls,
|
|
.carousel:hover + .carousel-top-controls + .carousel-controls,
|
|
.carousel-top-controls:hover,
|
|
.carousel-controls:hover,
|
|
.carousel-top-controls:focus-within,
|
|
.carousel-controls:focus-within {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
.carousel :is(img, video) {
|
|
/* No need fade out if inside carousel */
|
|
filter: none;
|
|
}
|
|
}
|
|
|
|
/* COMPOSE BUTTON */
|
|
|
|
#compose-button {
|
|
position: fixed;
|
|
bottom: 16px;
|
|
bottom: max(16px, env(safe-area-inset-bottom));
|
|
right: 16px;
|
|
right: max(16px, env(safe-area-inset-right));
|
|
padding: 16px;
|
|
background-color: var(--button-bg-blur-color);
|
|
backdrop-filter: blur(16px);
|
|
z-index: 1;
|
|
box-shadow: 0 3px 8px -1px var(--bg-faded-blur-color),
|
|
0 10px 36px -4px var(--button-bg-blur-color);
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
#compose-button[hidden] {
|
|
transform: translateY(200%);
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
#compose-button .icon {
|
|
transition: transform 0.3s ease-in-out;
|
|
}
|
|
#compose-button[hidden] .icon {
|
|
transform: rotate3d(0, 1, 0, 180deg);
|
|
}
|
|
#compose-button:is(:hover, :focus) {
|
|
background-color: var(--button-bg-color);
|
|
filter: none;
|
|
}
|
|
#compose-button:active {
|
|
filter: brightness(0.75);
|
|
}
|
|
#compose-button .icon {
|
|
filter: drop-shadow(0 1px 2px var(--button-bg-color));
|
|
}
|
|
|
|
/* SHEET */
|
|
|
|
.sheet {
|
|
align-self: flex-end;
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: 90vh;
|
|
max-height: 90dvh;
|
|
overflow: hidden;
|
|
background-color: var(--bg-color);
|
|
width: 100%;
|
|
max-width: calc(40em - 50px - 16px);
|
|
border-radius: 16px 16px 0 0;
|
|
box-shadow: 0 -1px 32px var(--divider-color);
|
|
animation: slide-up 0.3s var(--timing-function);
|
|
border: 1px solid var(--outline-color);
|
|
}
|
|
.sheet-max {
|
|
width: 90vw;
|
|
width: 90dvw;
|
|
max-width: none;
|
|
height: 90vh;
|
|
height: 90dvh;
|
|
}
|
|
.sheet header {
|
|
padding: 16px 16px 8px;
|
|
padding-left: max(16px, env(safe-area-inset-left));
|
|
padding-right: max(16px, env(safe-area-inset-right));
|
|
user-select: none;
|
|
}
|
|
.sheet header :is(h1, h2, h3) {
|
|
margin: 0;
|
|
}
|
|
.sheet main {
|
|
overflow: auto;
|
|
overflow-x: hidden;
|
|
overscroll-behavior: contain;
|
|
padding: 16px 16px;
|
|
padding-left: max(16px, env(safe-area-inset-left));
|
|
padding-right: max(16px, env(safe-area-inset-right));
|
|
padding-bottom: max(16px, env(safe-area-inset-bottom));
|
|
}
|
|
.sheet header + main {
|
|
padding-top: 0;
|
|
mask-image: linear-gradient(to bottom, transparent 0%, black 10px);
|
|
}
|
|
|
|
/* TAG */
|
|
|
|
.tag {
|
|
font-size: smaller;
|
|
color: var(--bg-faded-color);
|
|
background-color: var(--text-insignificant-color);
|
|
padding: 2px 4px;
|
|
border-radius: 4px;
|
|
display: inline-block;
|
|
margin: 4px;
|
|
align-self: center;
|
|
}
|
|
.tag .icon {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* MENU POPUP */
|
|
|
|
.szh-menu {
|
|
padding: 8px 0 !important;
|
|
margin: 0;
|
|
font-size: 16px;
|
|
background-color: var(--bg-color) !important;
|
|
border: 1px solid var(--outline-color) !important;
|
|
border-radius: 8px;
|
|
box-shadow: 0 0 8px var(--bg-faded-color), 0 4px 8px var(--bg-faded-color),
|
|
0 2px 4px var(--bg-faded-color);
|
|
text-align: left;
|
|
}
|
|
.szh-menu .szh-menu__item {
|
|
padding: 8px 16px !important;
|
|
}
|
|
.szh-menu
|
|
.szh-menu__item:not(.szh-menu__item--disabled, .szh-menu__item--hover) {
|
|
color: var(--text-color);
|
|
}
|
|
.szh-menu .szh-menu__item--hover {
|
|
color: var(--button-text-color);
|
|
background-color: var(--button-bg-color);
|
|
}
|
|
|
|
/* DONUT METER */
|
|
|
|
meter.donut {
|
|
appearance: none;
|
|
}
|
|
|
|
meter.donut::-webkit-meter-inner-element,
|
|
meter.donut::-webkit-meter-bar,
|
|
meter.donut::-webkit-meter-optimum-value,
|
|
meter.donut::-webkit-meter-suboptimum-value,
|
|
meter.donut::-webkit-meter-even-less-good-value {
|
|
display: none;
|
|
}
|
|
|
|
meter.donut::-moz-meter-bar {
|
|
background: transparent;
|
|
}
|
|
|
|
meter.donut {
|
|
position: relative;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
--fill: calc(var(--percentage) * 1%);
|
|
--color: var(--link-color);
|
|
--middle-circle: radial-gradient(
|
|
circle at 50% 50%,
|
|
var(--bg-faded-color) 10px,
|
|
transparent 10px
|
|
);
|
|
background-image: var(--middle-circle),
|
|
conic-gradient(var(--color) var(--fill), var(--bg-faded-blur-color) 0);
|
|
}
|
|
meter.donut.warning {
|
|
--color: var(--orange-color);
|
|
}
|
|
meter.donut.danger {
|
|
--color: var(--red-color);
|
|
}
|
|
meter.donut.explode {
|
|
background-image: none;
|
|
}
|
|
meter.donut:is(.warning, .danger, .explode):after {
|
|
content: attr(data-left);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 12px;
|
|
color: var(--text-insignificant-color);
|
|
}
|
|
meter.donut:is(.danger, .explode):after {
|
|
color: var(--red-color);
|
|
}
|
|
|
|
/* TOAST */
|
|
|
|
:root .toastify {
|
|
background-image: linear-gradient(
|
|
to bottom,
|
|
var(--button-bg-blur-color),
|
|
var(--button-bg-color)
|
|
);
|
|
backdrop-filter: blur(16px);
|
|
color: var(--button-text-color);
|
|
border-radius: 10em;
|
|
padding: 8px 16px;
|
|
box-shadow: 0 3px 8px -1px var(--bg-faded-blur-color),
|
|
0 10px 36px -4px var(--button-bg-blur-color);
|
|
}
|
|
.toastify-bottom {
|
|
margin-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
:root .toastify:hover {
|
|
filter: brightness(1.2);
|
|
}
|
|
:root .toastify:active {
|
|
filter: brightness(0.8);
|
|
}
|
|
|
|
/* AVATARS STACK */
|
|
|
|
.avatars-stack {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
|
|
.deck-container {
|
|
width: 100%;
|
|
flex-grow: 1;
|
|
}
|
|
#home-page ~ .deck-container {
|
|
z-index: 10;
|
|
position: fixed;
|
|
inset: 0;
|
|
}
|
|
#home-page:has(~ .deck-container) {
|
|
display: block;
|
|
position: absolute;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
content-visibility: hidden;
|
|
}
|
|
|
|
/* TAB BAR */
|
|
|
|
#tab-bar:not([hidden]) {
|
|
position: fixed;
|
|
bottom: 16px;
|
|
bottom: max(16px, env(safe-area-inset-bottom));
|
|
width: calc(100% - 32px);
|
|
max-width: calc(40em - 32px);
|
|
z-index: 100;
|
|
display: flex;
|
|
background-color: var(--bg-blur-color);
|
|
backdrop-filter: blur(16px) saturate(3);
|
|
border: var(--hairline-width) solid var(--outline-color);
|
|
border-radius: 16px;
|
|
box-shadow: 0 8px 32px var(--outline-color);
|
|
}
|
|
#tab-bar li {
|
|
flex-grow: 1;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
#tab-bar li a {
|
|
text-align: center;
|
|
padding: 16px 0;
|
|
display: block;
|
|
}
|
|
|
|
@media (min-width: 40em) {
|
|
html,
|
|
body {
|
|
background-color: var(--bg-faded-color);
|
|
}
|
|
.deck-container {
|
|
background-color: var(--bg-faded-color);
|
|
}
|
|
#app {
|
|
display: flex;
|
|
}
|
|
.deck-container {
|
|
transition: transform 0.4s var(--timing-function);
|
|
}
|
|
.deck-container:has(~ .deck-backdrop) {
|
|
transition: transform 0.4s ease-out;
|
|
transform: translate3d(-5vw, 0, 0);
|
|
}
|
|
.deck-backdrop .deck {
|
|
width: 50%;
|
|
min-width: 40em;
|
|
border-left: 1px solid var(--divider-color);
|
|
}
|
|
.timeline-deck {
|
|
border: 0;
|
|
background-color: transparent;
|
|
}
|
|
.timeline-deck > header {
|
|
min-height: 6em;
|
|
border-bottom: 0;
|
|
background-color: var(--bg-faded-blur-color);
|
|
background-image: linear-gradient(
|
|
to bottom,
|
|
var(--bg-faded-color),
|
|
transparent 50%
|
|
);
|
|
border-bottom: 0;
|
|
mask-image: linear-gradient(
|
|
rgba(0, 0, 0, 1) 50%,
|
|
rgba(0, 0, 0, 0.7) 80%,
|
|
rgba(0, 0, 0, 0.5) 90%,
|
|
transparent
|
|
);
|
|
}
|
|
.deck > header h1 {
|
|
font-size: 1.5em;
|
|
}
|
|
.timeline-deck .timeline:not(.flat) > li {
|
|
border: 1px solid var(--divider-color);
|
|
margin: 16px 0;
|
|
background-color: var(--bg-color);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow: 0px 1px var(--bg-blur-color);
|
|
transition: transform 0.4s var(--timing-function);
|
|
--back-transition: transform 0.4s ease-out;
|
|
}
|
|
.timeline-deck .timeline:not(.flat) > li:has(.status-link.is-active) {
|
|
transition: var(--back-transition);
|
|
transform: translate3d(-2.5vw, 0, 0);
|
|
}
|
|
.timeline-deck
|
|
.timeline:not(.flat)
|
|
> li:not(:has(.boost-carousel)):has(+ li .status-link.is-active),
|
|
.timeline-deck
|
|
.timeline:not(.flat)
|
|
> li:not(:has(.boost-carousel)):has(.status-link.is-active)
|
|
+ li {
|
|
transition: var(--back-transition);
|
|
transform: translate3d(-1.25vw, 0, 0);
|
|
}
|
|
.box {
|
|
padding: 32px;
|
|
}
|
|
/* :is(.carousel-top-controls, .carousel-controls) {
|
|
padding: 32px;
|
|
} */
|
|
li:has(.boost-carousel) {
|
|
width: 95vw;
|
|
max-width: calc(320px * 3.3);
|
|
transform: translateX(calc(-50% + 20em));
|
|
}
|
|
}
|