|
@@ -17,7 +17,7 @@
|
|
--cm: 1;
|
|
--cm: 1;
|
|
--tsm: 1;
|
|
--tsm: 1;
|
|
|
|
|
|
- --widget-gap: 25px;
|
|
|
|
|
|
+ --widget-gap: 23px;
|
|
--widget-content-vertical-padding: 15px;
|
|
--widget-content-vertical-padding: 15px;
|
|
--widget-content-horizontal-padding: 17px;
|
|
--widget-content-horizontal-padding: 17px;
|
|
--widget-content-padding: var(--widget-content-vertical-padding) var(--widget-content-horizontal-padding);
|
|
--widget-content-padding: var(--widget-content-vertical-padding) var(--widget-content-horizontal-padding);
|
|
@@ -37,13 +37,14 @@
|
|
--color-popover-background: hsl(var(--bgh), calc(var(--bgs) + 3%), calc(var(--bgl) + 3%));
|
|
--color-popover-background: hsl(var(--bgh), calc(var(--bgs) + 3%), calc(var(--bgl) + 3%));
|
|
--color-popover-border: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 12%)));
|
|
--color-popover-border: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 12%)));
|
|
--color-progress-border: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 10% * var(--cm))));
|
|
--color-progress-border: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 10% * var(--cm))));
|
|
- --color-progress-value: hsl(var(--bgh), calc(var(--bgs) * var(--tsm)), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 27% * var(--cm))));
|
|
|
|
|
|
+ --color-progress-value: hsl(var(--bgh), calc(var(--bgs) * var(--tsm)), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 30% * var(--cm))));
|
|
--color-graph-gridlines: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 6% * var(--cm))));
|
|
--color-graph-gridlines: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 6% * var(--cm))));
|
|
|
|
|
|
--ths: var(--bgh), calc(var(--bgs) * var(--tsm));
|
|
--ths: var(--bgh), calc(var(--bgs) * var(--tsm));
|
|
|
|
+ --color-text-highlight: hsl(var(--ths), calc(var(--scheme) var(--cm) * 85%));
|
|
|
|
+ --color-text-paragraph: hsl(var(--ths), calc(var(--scheme) var(--cm) * 73%));
|
|
--color-text-base: hsl(var(--ths), calc(var(--scheme) var(--cm) * 58%));
|
|
--color-text-base: hsl(var(--ths), calc(var(--scheme) var(--cm) * 58%));
|
|
--color-text-base-muted: hsl(var(--ths), calc(var(--scheme) var(--cm) * 52%));
|
|
--color-text-base-muted: hsl(var(--ths), calc(var(--scheme) var(--cm) * 52%));
|
|
- --color-text-highlight: hsl(var(--ths), calc(var(--scheme) var(--cm) * 85%));
|
|
|
|
--color-text-subdue: hsl(var(--ths), calc(var(--scheme) var(--cm) * 35%));
|
|
--color-text-subdue: hsl(var(--ths), calc(var(--scheme) var(--cm) * 35%));
|
|
|
|
|
|
--font-size-h1: 1.7rem;
|
|
--font-size-h1: 1.7rem;
|
|
@@ -273,6 +274,10 @@
|
|
background-color: var(--color-separator);
|
|
background-color: var(--color-separator);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+pre {
|
|
|
|
+ font: inherit;
|
|
|
|
+}
|
|
|
|
+
|
|
::selection {
|
|
::selection {
|
|
background-color: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 20%)));
|
|
background-color: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 20%)));
|
|
color: var(--color-text-highlight);
|
|
color: var(--color-text-highlight);
|
|
@@ -289,6 +294,12 @@
|
|
width: 10px;
|
|
width: 10px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+*:focus-visible {
|
|
|
|
+ outline: 2px solid var(--color-primary);
|
|
|
|
+ outline-offset: 0.1rem;
|
|
|
|
+ border-radius: var(--border-radius);
|
|
|
|
+}
|
|
|
|
+
|
|
*, *::before, *::after {
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
@@ -326,7 +337,7 @@ html {
|
|
scroll-behavior: smooth;
|
|
scroll-behavior: smooth;
|
|
}
|
|
}
|
|
|
|
|
|
-html, body {
|
|
|
|
|
|
+html, body, .body-content {
|
|
height: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
@@ -440,6 +451,17 @@ kbd:active {
|
|
box-shadow: 0 0 0 0 var(--color-widget-background-highlight);
|
|
box-shadow: 0 0 0 0 var(--color-widget-background-highlight);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+.masonry {
|
|
|
|
+ display: flex;
|
|
|
|
+ gap: var(--widget-gap);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.masonry-column {
|
|
|
|
+ flex: 1;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+}
|
|
|
|
+
|
|
.popover-container, [data-popover-html] {
|
|
.popover-container, [data-popover-html] {
|
|
display: none;
|
|
display: none;
|
|
}
|
|
}
|
|
@@ -728,19 +750,11 @@ details[open] .summary::after {
|
|
.widget-error-icon {
|
|
.widget-error-icon {
|
|
width: 2.4rem;
|
|
width: 2.4rem;
|
|
height: 2.4rem;
|
|
height: 2.4rem;
|
|
- border: 0.2rem solid var(--color-negative);
|
|
|
|
- border-radius: 50%;
|
|
|
|
- text-align: center;
|
|
|
|
- line-height: 2rem;
|
|
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
|
|
+ stroke: var(--color-negative);
|
|
opacity: 0.6;
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
|
|
-.widget-error-icon::before {
|
|
|
|
- content: '!';
|
|
|
|
- color: var(--color-text-highlight);
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
.widget-content {
|
|
.widget-content {
|
|
container-type: inline-size;
|
|
container-type: inline-size;
|
|
container-name: widget;
|
|
container-name: widget;
|
|
@@ -782,6 +796,20 @@ details[open] .summary::after {
|
|
gap: 1rem;
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+.widget-beta-icon {
|
|
|
|
+ width: 1.6rem;
|
|
|
|
+ height: 1.6rem;
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
+ transition: transform .45s, opacity .45s, stroke .45s;
|
|
|
|
+ opacity: 0.7;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.widget-beta-icon:hover, .widget-header .popover-active > .widget-beta-icon {
|
|
|
|
+ fill: var(--color-text-highlight);
|
|
|
|
+ transform: translateY(-10%) scale(1.3);
|
|
|
|
+ opacity: 1;
|
|
|
|
+}
|
|
|
|
+
|
|
.widget + .widget {
|
|
.widget + .widget {
|
|
margin-top: var(--widget-gap);
|
|
margin-top: var(--widget-gap);
|
|
}
|
|
}
|
|
@@ -796,7 +824,7 @@ details[open] .summary::after {
|
|
.list-horizontal-text > *:not(:last-child)::after {
|
|
.list-horizontal-text > *:not(:last-child)::after {
|
|
content: '•';
|
|
content: '•';
|
|
color: var(--color-text-subdue);
|
|
color: var(--color-text-subdue);
|
|
- margin: 0 0.5rem;
|
|
|
|
|
|
+ margin: 0 0.4rem;
|
|
position: relative;
|
|
position: relative;
|
|
top: 0.1rem;
|
|
top: 0.1rem;
|
|
}
|
|
}
|
|
@@ -928,15 +956,11 @@ details[open] .summary::after {
|
|
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
|
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
|
}
|
|
}
|
|
|
|
|
|
-.video-title {
|
|
|
|
- margin-bottom: auto;
|
|
|
|
- overflow: hidden;
|
|
|
|
- display: block;
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
- line-clamp: 2;
|
|
|
|
- -webkit-line-clamp: 2;
|
|
|
|
- display: -webkit-box;
|
|
|
|
- -webkit-box-orient: vertical;
|
|
|
|
|
|
+.video-horizontal-list-thumbnail {
|
|
|
|
+ height: 4rem;
|
|
|
|
+ aspect-ratio: 16 / 8.9;
|
|
|
|
+ object-fit: cover;
|
|
|
|
+ border-radius: var(--border-radius);
|
|
}
|
|
}
|
|
|
|
|
|
.search-icon {
|
|
.search-icon {
|
|
@@ -1019,11 +1043,6 @@ details[open] .summary::after {
|
|
display: none;
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
-.forum-post-list-item {
|
|
|
|
- display: flex;
|
|
|
|
- gap: 1.2rem;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
.forum-post-list-thumbnail {
|
|
.forum-post-list-thumbnail {
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
width: 6rem;
|
|
width: 6rem;
|
|
@@ -1038,6 +1057,12 @@ details[open] .summary::after {
|
|
transform: translateY(-0.15rem);
|
|
transform: translateY(-0.15rem);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+@container widget (max-width: 550px) {
|
|
|
|
+ .forum-post-autohide {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
.bookmarks-group {
|
|
.bookmarks-group {
|
|
--bookmarks-group-color: var(--color-primary);
|
|
--bookmarks-group-color: var(--color-primary);
|
|
}
|
|
}
|
|
@@ -1065,23 +1090,82 @@ details[open] .summary::after {
|
|
opacity: 0.8;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
|
|
-:root:not(.light-scheme) .simple-icon {
|
|
|
|
|
|
+:root:not(.light-scheme) .flat-icon {
|
|
filter: invert(1);
|
|
filter: invert(1);
|
|
}
|
|
}
|
|
|
|
|
|
-.calendar-day {
|
|
|
|
|
|
+.old-calendar-day {
|
|
width: calc(100% / 7);
|
|
width: calc(100% / 7);
|
|
text-align: center;
|
|
text-align: center;
|
|
padding: 0.6rem 0;
|
|
padding: 0.6rem 0;
|
|
}
|
|
}
|
|
|
|
|
|
-
|
|
|
|
-.calendar-day-today {
|
|
|
|
|
|
+.old-calendar-day-today {
|
|
border-radius: var(--border-radius);
|
|
border-radius: var(--border-radius);
|
|
background-color: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) (var(--bgl)) + 6%)));
|
|
background-color: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) (var(--bgl)) + 6%)));
|
|
color: var(--color-text-highlight);
|
|
color: var(--color-text-highlight);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+.calendar-dates {
|
|
|
|
+ text-align: center;
|
|
|
|
+ display: grid;
|
|
|
|
+ grid-template-columns: repeat(7, 1fr);
|
|
|
|
+ gap: 2px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.calendar-date {
|
|
|
|
+ padding: 0.4rem 0;
|
|
|
|
+ color: var(--color-text-paragraph);
|
|
|
|
+ position: relative;
|
|
|
|
+ border-radius: var(--border-radius);
|
|
|
|
+ background: none;
|
|
|
|
+ border: none;
|
|
|
|
+ font: inherit;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.calendar-current-date {
|
|
|
|
+ border-radius: var(--border-radius);
|
|
|
|
+ background-color: var(--color-popover-border);
|
|
|
|
+ color: var(--color-text-highlight);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.calendar-spillover-date {
|
|
|
|
+ color: var(--color-text-subdue);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.calendar-header-button {
|
|
|
|
+ position: relative;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ width: 2rem;
|
|
|
|
+ height: 2rem;
|
|
|
|
+ z-index: 1;
|
|
|
|
+ background: none;
|
|
|
|
+ border: none;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.calendar-header-button::before {
|
|
|
|
+ content: '';
|
|
|
|
+ position: absolute;
|
|
|
|
+ inset: -0.2rem;
|
|
|
|
+ border-radius: var(--border-radius);
|
|
|
|
+ background-color: var(--color-text-subdue);
|
|
|
|
+ opacity: 0;
|
|
|
|
+ transition: opacity 0.2s;
|
|
|
|
+ z-index: -1;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.calendar-header-button:hover::before {
|
|
|
|
+ opacity: 0.4;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.calendar-undo-button {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ vertical-align: text-top;
|
|
|
|
+ width: 2rem;
|
|
|
|
+ height: 2rem;
|
|
|
|
+ margin-left: 0.7rem;
|
|
|
|
+}
|
|
|
|
+
|
|
.dns-stats-totals {
|
|
.dns-stats-totals {
|
|
transition: opacity .3s;
|
|
transition: opacity .3s;
|
|
transition-delay: 50ms;
|
|
transition-delay: 50ms;
|
|
@@ -1342,6 +1426,10 @@ details[open] .summary::after {
|
|
transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+.clock-time {
|
|
|
|
+ min-width: 8ch;
|
|
|
|
+}
|
|
|
|
+
|
|
.clock-time span {
|
|
.clock-time span {
|
|
color: var(--color-text-highlight);
|
|
color: var(--color-text-highlight);
|
|
}
|
|
}
|
|
@@ -1358,7 +1446,7 @@ details[open] .summary::after {
|
|
transition: filter 0.3s, opacity 0.3s;
|
|
transition: filter 0.3s, opacity 0.3s;
|
|
}
|
|
}
|
|
|
|
|
|
-.monitor-site-icon.simple-icon {
|
|
|
|
|
|
+.monitor-site-icon.flat-icon {
|
|
opacity: 0.7;
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
|
|
@@ -1366,7 +1454,7 @@ details[open] .summary::after {
|
|
opacity: 1;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
|
|
-.monitor-site:hover .monitor-site-icon:not(.simple-icon) {
|
|
|
|
|
|
+.monitor-site:hover .monitor-site-icon:not(.flat-icon) {
|
|
filter: grayscale(0);
|
|
filter: grayscale(0);
|
|
}
|
|
}
|
|
|
|
|
|
@@ -1377,6 +1465,170 @@ details[open] .summary::after {
|
|
height: 2rem;
|
|
height: 2rem;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+.monitor-site-status-icon-compact {
|
|
|
|
+ width: 1.8rem;
|
|
|
|
+ height: 1.8rem;
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.docker-container-icon {
|
|
|
|
+ display: block;
|
|
|
|
+ filter: grayscale(0.4);
|
|
|
|
+ object-fit: contain;
|
|
|
|
+ aspect-ratio: 1 / 1;
|
|
|
|
+ width: 2.7rem;
|
|
|
|
+ opacity: 0.8;
|
|
|
|
+ transition: filter 0.3s, opacity 0.3s;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.docker-container-icon.flat-icon {
|
|
|
|
+ opacity: 0.7;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.docker-container:hover .docker-container-icon {
|
|
|
|
+ opacity: 1;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.docker-container:hover .docker-container-icon:not(.flat-icon) {
|
|
|
|
+ filter: grayscale(0);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.docker-container-status-icon {
|
|
|
|
+ width: 2rem;
|
|
|
|
+ height: 2rem;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.widget-type-server-info {
|
|
|
|
+ position: relative;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.server + .server {
|
|
|
|
+ margin-top: 3rem;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.server {
|
|
|
|
+ gap: 1rem;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.server-info {
|
|
|
|
+ align-items: center;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ gap: 1.5rem;
|
|
|
|
+ flex-shrink: 1;
|
|
|
|
+ min-width: 0;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.server-details {
|
|
|
|
+ min-width: 0;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.server-icon {
|
|
|
|
+ height: 3rem;
|
|
|
|
+ width: 3rem;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.server-spicy-cpu-icon {
|
|
|
|
+ height: 1em;
|
|
|
|
+ align-self: center;
|
|
|
|
+ margin-left: 0.4em;
|
|
|
|
+ margin-bottom: 0.2rem;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.server-stats {
|
|
|
|
+ display: flex;
|
|
|
|
+ gap: 1.5rem;
|
|
|
|
+ margin-top: 0.5rem;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.server-stat-unavailable {
|
|
|
|
+ opacity: 0.5;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.progress-bar {
|
|
|
|
+ border: 1px solid var(--color-progress-border);
|
|
|
|
+ border-radius: var(--border-radius);
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ gap: 2px;
|
|
|
|
+ padding: 2px;
|
|
|
|
+ height: 1.5rem;
|
|
|
|
+ margin-inline: -3px; /* naughty, but oh so beautiful */
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.progress-bar-combined {
|
|
|
|
+ height: 3rem;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.popover-active > .progress-bar {
|
|
|
|
+ transition: border-color .3s;
|
|
|
|
+ border-color: var(--color-text-subdue);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.progress-value {
|
|
|
|
+ --half-border-radius: calc(var(--border-radius) / 2);
|
|
|
|
+ border-radius: 0 var(--half-border-radius) var(--half-border-radius) 0;
|
|
|
|
+ background: var(--color-progress-value);
|
|
|
|
+ width: calc(var(--percent) * 1%);
|
|
|
|
+ min-width: 1px;
|
|
|
|
+ flex: 1;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.progress-value:first-child {
|
|
|
|
+ border-top-left-radius: var(--half-border-radius);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.progress-value:last-child {
|
|
|
|
+ border-bottom-left-radius: var(--half-border-radius);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.progress-value-notice {
|
|
|
|
+ background: linear-gradient(to right, var(--color-progress-value) 65%, var(--color-negative));
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.value-separator {
|
|
|
|
+ min-width: 2rem;
|
|
|
|
+ margin-inline: 0.8rem;
|
|
|
|
+ flex: 1;
|
|
|
|
+ height: calc(1em * 1.1);
|
|
|
|
+ border-bottom: 1px dotted var(--color-text-subdue);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+@container widget (min-width: 650px) {
|
|
|
|
+ .server {
|
|
|
|
+ gap: 2rem;
|
|
|
|
+ flex-direction: row;
|
|
|
|
+ align-items: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .server + .server {
|
|
|
|
+ margin-top: 1rem;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .server-info {
|
|
|
|
+ flex-direction: row-reverse;
|
|
|
|
+ justify-content: unset;
|
|
|
|
+ margin-right: auto;
|
|
|
|
+ z-index: 1;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .server-stats {
|
|
|
|
+ flex-direction: row;
|
|
|
|
+ justify-content: right;
|
|
|
|
+ min-width: 450px;
|
|
|
|
+ margin-top: 0;
|
|
|
|
+ gap: 2rem;
|
|
|
|
+ padding-bottom: 0.8rem;
|
|
|
|
+ z-index: 1;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .server-stats > * {
|
|
|
|
+ max-width: 200px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
.thumbnail {
|
|
.thumbnail {
|
|
filter: grayscale(0.2) contrast(0.9);
|
|
filter: grayscale(0.2) contrast(0.9);
|
|
opacity: 0.8;
|
|
opacity: 0.8;
|
|
@@ -1496,6 +1748,14 @@ details[open] .summary::after {
|
|
border: 2px solid var(--color-widget-background);
|
|
border: 2px solid var(--color-widget-background);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+.twitch-stream-preview {
|
|
|
|
+ max-width: 100%;
|
|
|
|
+ width: 400px;
|
|
|
|
+ aspect-ratio: 16 / 9;
|
|
|
|
+ border-radius: var(--border-radius);
|
|
|
|
+ object-fit: cover;
|
|
|
|
+}
|
|
|
|
+
|
|
.reddit-card-thumbnail {
|
|
.reddit-card-thumbnail {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
@@ -1660,6 +1920,11 @@ details[open] .summary::after {
|
|
.weather-column-rain::before {
|
|
.weather-column-rain::before {
|
|
background-size: 7px 7px;
|
|
background-size: 7px 7px;
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ .ios .search-input {
|
|
|
|
+ /* so that iOS Safari does not zoom the page when the input is focused */
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
@media (max-width: 1190px) and (display-mode: standalone) {
|
|
@media (max-width: 1190px) and (display-mode: standalone) {
|
|
@@ -1667,7 +1932,11 @@ details[open] .summary::after {
|
|
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
|
|
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
|
|
}
|
|
}
|
|
|
|
|
|
- .list-collapsible-label:has(.list-collapsible-input:checked) {
|
|
|
|
|
|
+ .ios .body-content {
|
|
|
|
+ height: 100dvh;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .expand-toggle-button.container-expanded {
|
|
bottom: calc(var(--mobile-navigation-height) + var(--safe-area-inset-bottom));
|
|
bottom: calc(var(--mobile-navigation-height) + var(--safe-area-inset-bottom));
|
|
}
|
|
}
|
|
|
|
|
|
@@ -1681,6 +1950,10 @@ details[open] .summary::after {
|
|
transition: padding-bottom .3s;
|
|
transition: padding-bottom .3s;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ .mobile-navigation-offset {
|
|
|
|
+ height: calc(var(--mobile-navigation-height) + var(--safe-area-inset-bottom));
|
|
|
|
+ }
|
|
|
|
+
|
|
.mobile-navigation-icons:has(.mobile-navigation-page-links-input:checked) {
|
|
.mobile-navigation-icons:has(.mobile-navigation-page-links-input:checked) {
|
|
padding-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
@@ -1739,6 +2012,7 @@ details[open] .summary::after {
|
|
.size-h6 { font-size: var(--font-size-h6); }
|
|
.size-h6 { font-size: var(--font-size-h6); }
|
|
|
|
|
|
.color-highlight { color: var(--color-text-highlight); }
|
|
.color-highlight { color: var(--color-text-highlight); }
|
|
|
|
+.color-paragraph { color: var(--color-text-paragraph); }
|
|
.color-base { color: var(--color-text-base); }
|
|
.color-base { color: var(--color-text-base); }
|
|
.color-subdue { color: var(--color-text-subdue); }
|
|
.color-subdue { color: var(--color-text-subdue); }
|
|
.color-negative { color: var(--color-negative); }
|
|
.color-negative { color: var(--color-negative); }
|
|
@@ -1752,17 +2026,18 @@ details[open] .summary::after {
|
|
.text-center { text-align: center; }
|
|
.text-center { text-align: center; }
|
|
.text-elevate { margin-top: -0.2em; }
|
|
.text-elevate { margin-top: -0.2em; }
|
|
.text-compact { word-spacing: -0.18em; }
|
|
.text-compact { word-spacing: -0.18em; }
|
|
|
|
+.text-very-compact { word-spacing: -0.35em; }
|
|
.rtl { direction: rtl; }
|
|
.rtl { direction: rtl; }
|
|
.shrink { flex-shrink: 1; }
|
|
.shrink { flex-shrink: 1; }
|
|
.shrink-0 { flex-shrink: 0; }
|
|
.shrink-0 { flex-shrink: 0; }
|
|
.min-width-0 { min-width: 0; }
|
|
.min-width-0 { min-width: 0; }
|
|
.max-width-100 { max-width: 100%; }
|
|
.max-width-100 { max-width: 100%; }
|
|
-.height-100 { height: 100%; }
|
|
|
|
.block { display: block; }
|
|
.block { display: block; }
|
|
.inline-block { display: inline-block; }
|
|
.inline-block { display: inline-block; }
|
|
.overflow-hidden { overflow: hidden; }
|
|
.overflow-hidden { overflow: hidden; }
|
|
.relative { position: relative; }
|
|
.relative { position: relative; }
|
|
.flex { display: flex; }
|
|
.flex { display: flex; }
|
|
|
|
+.flex-1 { flex: 1; }
|
|
.flex-wrap { flex-wrap: wrap; }
|
|
.flex-wrap { flex-wrap: wrap; }
|
|
.flex-nowrap { flex-wrap: nowrap; }
|
|
.flex-nowrap { flex-wrap: nowrap; }
|
|
.justify-between { justify-content: space-between; }
|
|
.justify-between { justify-content: space-between; }
|
|
@@ -1775,15 +2050,18 @@ details[open] .summary::after {
|
|
.flex-column { flex-direction: column; }
|
|
.flex-column { flex-direction: column; }
|
|
.items-center { align-items: center; }
|
|
.items-center { align-items: center; }
|
|
.items-start { align-items: start; }
|
|
.items-start { align-items: start; }
|
|
|
|
+.items-end { align-items: end; }
|
|
.gap-5 { gap: 0.5rem; }
|
|
.gap-5 { gap: 0.5rem; }
|
|
.gap-7 { gap: 0.7rem; }
|
|
.gap-7 { gap: 0.7rem; }
|
|
.gap-10 { gap: 1rem; }
|
|
.gap-10 { gap: 1rem; }
|
|
|
|
+.gap-12 { gap: 1.2rem; }
|
|
.gap-15 { gap: 1.5rem; }
|
|
.gap-15 { gap: 1.5rem; }
|
|
.gap-20 { gap: 2rem; }
|
|
.gap-20 { gap: 2rem; }
|
|
.gap-25 { gap: 2.5rem; }
|
|
.gap-25 { gap: 2.5rem; }
|
|
.gap-35 { gap: 3.5rem; }
|
|
.gap-35 { gap: 3.5rem; }
|
|
.gap-45 { gap: 4.5rem; }
|
|
.gap-45 { gap: 4.5rem; }
|
|
.gap-55 { gap: 5.5rem; }
|
|
.gap-55 { gap: 5.5rem; }
|
|
|
|
+.margin-left-auto { margin-left: auto; }
|
|
.margin-top-3 { margin-top: 0.3rem; }
|
|
.margin-top-3 { margin-top: 0.3rem; }
|
|
.margin-top-5 { margin-top: 0.5rem; }
|
|
.margin-top-5 { margin-top: 0.5rem; }
|
|
.margin-top-7 { margin-top: 0.7rem; }
|
|
.margin-top-7 { margin-top: 0.7rem; }
|
|
@@ -1797,6 +2075,7 @@ details[open] .summary::after {
|
|
.margin-block-3 { margin-block: 0.3rem; }
|
|
.margin-block-3 { margin-block: 0.3rem; }
|
|
.margin-block-5 { margin-block: 0.5rem; }
|
|
.margin-block-5 { margin-block: 0.5rem; }
|
|
.margin-block-7 { margin-block: 0.7rem; }
|
|
.margin-block-7 { margin-block: 0.7rem; }
|
|
|
|
+.margin-block-8 { margin-block: 0.8rem; }
|
|
.margin-block-10 { margin-block: 1rem; }
|
|
.margin-block-10 { margin-block: 1rem; }
|
|
.margin-block-15 { margin-block: 1.5rem; }
|
|
.margin-block-15 { margin-block: 1.5rem; }
|
|
.margin-bottom-3 { margin-bottom: 0.3rem; }
|
|
.margin-bottom-3 { margin-bottom: 0.3rem; }
|
|
@@ -1810,6 +2089,7 @@ details[open] .summary::after {
|
|
.list { --list-half-gap: 0rem; }
|
|
.list { --list-half-gap: 0rem; }
|
|
.list-gap-2 { --list-half-gap: 0.1rem; }
|
|
.list-gap-2 { --list-half-gap: 0.1rem; }
|
|
.list-gap-4 { --list-half-gap: 0.2rem; }
|
|
.list-gap-4 { --list-half-gap: 0.2rem; }
|
|
|
|
+.list-gap-8 { --list-half-gap: 0.4rem; }
|
|
.list-gap-10 { --list-half-gap: 0.5rem; }
|
|
.list-gap-10 { --list-half-gap: 0.5rem; }
|
|
.list-gap-14 { --list-half-gap: 0.7rem; }
|
|
.list-gap-14 { --list-half-gap: 0.7rem; }
|
|
.list-gap-20 { --list-half-gap: 1rem; }
|
|
.list-gap-20 { --list-half-gap: 1rem; }
|