From 748c931c827c09bc59b776e41d27643af9cac332 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Thu, 28 May 2026 19:15:07 +0000
Subject: [PATCH] =gitblit setup
---
all.css | 5576 ++++++++++++++++++++++++++++-------------------------------
1 files changed, 2,628 insertions(+), 2,948 deletions(-)
diff --git a/all.css b/all.css
index e82ea8b..37b5f0a 100644
--- a/all.css
+++ b/all.css
@@ -6,8 +6,8 @@
Description: A base theme for Jake Van clients
Requires at least: 6.4
Tested up to: 6.4
-Requires PHP: 7.0
-Version: 1.5.95
+Requires PHP: 8.0
+Version: 1.6.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jv
@@ -76,54 +76,84 @@
Colours
*****************************/
--filter: grayscale(.3) sepia(.4);
+ --filterNone: grayscale(0) sepia(0);
+
--mix-blend-mode: darken;
--coverBlend: overlay;
--coverIndex: 2;
- --light-0: #fafafa;
- --light-50: #fcfbfb;
- --light-100: #f1eded;
- --light-200: #e6dfdf;
- --light-rgb: 250,250,250;
- --dark-0: #201313;
- --dark-50: #261717;
- --dark-100: #2d1b1b;
- --dark-200: #331e1e;
- --dark-rgb: 16,4,4;
- --action-0: #B7332E;
- --action-50: #a32d29;
- --action-100: #8e2824;
- --action-200: #7a221f;
- --action-contrast: var(--light-0);
- --action-rgb: 183,51,46;
- --secondary-0: #E8A737;
- --secondary-50: #e59d20;
- --secondary-100: #d48f18;
- --secondary-200: #bd7f16;
- --secondary-contrast: var(--light-0);
- --secondary-rgb: 232,167,55;
+ --light-0: 239,239,239; /* #efefef; */
+ --light-50: 226,226,226; /* #e2e2e2; */
+ --light-100: 213,213,213; /* #d5d5d5; */
+ --light-200: 201,201,201; /* #c9c9c9; */
- --success: #22C55E;
- --successBack: #d4edda;
- --successText:#155724;
- --warning: #E8A737;
- --error: #EF4444;
- --errorBack: #f8d7da;
- --errorText: #721c24;
+ --dark-0: 21,21,21; /* #151515; */
+ --dark-50: 34,34,34; /* #222222; */
+ --dark-100: 46,46,46; /* #2e2e2e; */
+ --dark-200: 59,59,59; /* #3b3b3b; */
+
+ --action-0: 255,0,128; /* #ff0080; */
+ --action-50: 255,38,146; /* #ff2492; */
+ --action-100: 255,71,164; /* #ff47a4; */
+ --action-200: 255,107,181; /* #ff6bb5; */
+ --action-contrast: var(--light-0);
+
+ --action-comp: oklch(from rgb(var(--action-0)) .8 .26 h);
+ --action-tri: oklch(from rgb(var(--action-0)) .82 .2 calc(h - 120));
+ --action-mono: oklch(from rgb(var(--action-0)) .3 .04 h);
+ --secondary-0: 214,145,33; /* #D69121; */
+ --secondary-50: 255,196,33; /* #ffc421; */
+ --secondary-100: 255,205,68;/* #ffcd44; */
+ --secondary-200: 255,215,104;/* #ffd768; */
+ --secondary-contrast: var(--light-0);
+ --secondary-comp: oklch(from rgb(var(--secondary-0)) .8 .26 h);
+ --secondary-tri: oklch(from rgb(var(--secondary-0)) .82 .2 calc(h - 120));
+ --secondary-mono: oklch(from rgb(var(--secondary-0)) .3 .04 h);
+
+ --success: 76,175,80; /* #4CAF50; */
+ --successLight: 234,246,235; /* #eaf6eb; */
+ --successDark: 14,33,15; /* #0e210f; */
+ --successBack: var(--successLight);
+ --successText: var(--successDark);
+ --warning: 232,167,55; /* #E8A737; */
+ --warningLight: 253,247,238;/* #fdf7ee; */
+ --warningDark: 52,35,6; /* #342306; */
+ --warningBack: var(--warningLight);
+ --warningText: var(--warningDark);
+ --error: 183,51,46; /* #B7332E; */
+ --errorLight: 250,235,234; /* #faebea; */
+ --errorDark: 40,11,10; /* #280b0a; */
+ --errorBack: var(--errorLight);
+ --errorText: var(--errorDark);
--base: var(--light-0);
--base-50: var(--light-50);
--base-100: var(--light-100);
--base-200: var(--light-200);
- --base-rgb: var(--light-rgb);
+
--contrast: var(--dark-0);
--contrast-50: var(--dark-50);
--contrast-100: var(--dark-100);
--contrast-200: var(--dark-200);
- --contrast-rgb: var(--dark-rgb);
- --shimmer: rgba(var(--dark-rgb),0) 0%,
- rgba(var(--dark-rgb),.05) 50%,
- rgba(var(--dark-rgb),0) 100%;
+
+
+ --contrast-comp: oklch(from rgb(var(--contrast)) .8 .26 h);
+ --contrast-tri: oklch(from rgb(var(--contrast)) .82 .2 calc(h - 120));
+ --contrast-mono: oklch(from rgb(var(--contrast)) .3 .04 h);
+ --base-comp: oklch(from rgb(var(--base)) .8 .26 h);
+ --base-tri: oklch(from rgb(var(--base)) .82 .2 calc(h - 120));
+ --base-mono: oklch(from rgb(var(--base)) .3 .04 h);
+
+
+ --tone-a: rgb(var(--contrast));
+ --tone-b: rgb(var(--base));
+
+ --duo-dark: oklch(from var(--tone-a) .22 c h);
+ --duo-light: oklch(from var(--tone-b) .78 c h);
+
+ --shimmer: rgba(var(--contrast),0) 0%,
+ rgba(var(--contrast),.05) 50%,
+ rgba(var(--contrast),0) 100%;
--op-1: .05;
--op-2: .15;
@@ -166,8 +196,8 @@
--radius: 4px;
--p-outer: 1rem;
--radius-outer: calc(var(--radius) + var(--p-outer));
- --p-y: 1rem;
- --p-x: 1rem;
+ --p-y: var(--sp1);
+ --p-x: var(--sp1);
/*****************************
Transitions
*****************************/
@@ -196,10 +226,10 @@
Scrollbar
*****************************/
--sb-width: 8px;
- --sb-track: var(--base-100);
- --sb-thumb: var(--action-0);
- --sb-thumb-hover: var(--action-50);
- --sb-thumb-border: 2px solid var(--base-50);
+ --sb-track: rgb(var(--base-100));
+ --sb-thumb: rgb(var(--action-0));
+ --sb-thumb-hover: rgb(var(--action-50));
+ --sb-thumb-border: 2px solid rgb(var(--base-50));
--sb-radius: 4px;
--details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="%232b1a0d" viewBox="0 0 256 256"><path d="M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z"></path></svg>');
@@ -215,34 +245,37 @@
--coverBlend: multiply;
--coverIndex: 0;
- --action-50: #cb3933;
- --action-100: #d14c47;
- --action-200: #d6605c;
+ --action-50: 219,0,110; /* #db006e; */
+ --action-100: 184,0.92; /* #b8005c; */
+ --action-200: 148,0,74; /* #94004a; */
- --secondary-50: #ebb14e;
- --secondary-100: #edbb65;
- --secondary-200: #f0c57c;
+ --secondary-50: 216,159,0; /* #d89f00; */
+ --secondary-100: 181,133,0; /* #b58500; */
+ --secondary-200: 145,106,0; /* #916a00; */
--contrast: var(--light-0);
--contrast-50: var(--light-50);
--contrast-100: var(--light-100);
--contrast-200: var(--light-200);
- --contrast-rgb: var(--light-rgb);
+ --contrast: var(--light-rgb);
--base: var(--dark-0);
--base-50: var(--dark-50);
--base-100: var(--dark-100);
--base-200: var(--dark-200);
- --base-rgb: var(--dark-rgb);
+ --base: var(--dark-rgb);
- --successBack: #155724;
- --successText:#d4edda;
- --errorBack: #721c24;
- --errorText: #f8d7da;
- --shimmer: rgba(var(--c),0) 0%,
- rgba(var(--c),.05) 50%,
- rgba(var(--c),0) 100%;
+ --successBack: var(--successDark);
+ --successText: var(--successLight);
+ --warningBack: var(--warningDark);
+ --warningText: var(--warningLight);
+ --errorBack: var(--errorDark);
+ --errorText: var(--errorLight);
+
+ --shimmer: rgba(var(--light-0),0) 0%,
+ rgba(var(--light-0),.05) 50%,
+ rgba(var(--light-0),0) 100%;
}
/* https://frontendmasters.com/blog/the-coyier-css-starter/ */
@layer reset {
@@ -344,6 +377,7 @@
inline-size: fit-content;
margin-inline: auto;
}
+ a > img,
figure img {
width: 100%;
height: 100%;
@@ -352,6 +386,9 @@
figcaption {
contain: inline-size;
font-size: 90%;
+ background-color: rgba(var(--base),var(--op-3));
+ text-align: center;
+ font-style: italic;
}
input,
@@ -426,13 +463,70 @@
padding: 1.5rem;
}
+ hr.logo::after,
hr {
+ --margin: 12.5%; /* Half of the remaining 25% */
+ --baseWidth: 75%;
border-style: solid;
border-width: 1px 0 0;
+ border-color: rgb(var(--contrast));
color: inherit;
- height: 0;
+ height: 1px;
overflow: visible;
margin-block: 2.5rem;
+ width: var(--baseWidth);
+ }
+
+ hr.logo {
+ --width: calc((rgb(var(--baseWidth)) / 2) - var(--half));
+ --half: calc(var(--btn) / 2);
+ width: var(--width);
+ position: relative;
+ margin-left: var(--margin);
+ }
+ hr.logo::before {
+ content: '';
+ --circ: calc(var(--btn) + (var(--btn) / 2));
+ --rad: calc(var(--circ) / 2);
+ background-color: rgb(var(--contrast-100));
+ mask-image: var(--icon);
+ -webkit-mask-image: var(--icon);
+ mask-size: var(--btn);
+ -webkit-mask-size: contain;
+ mask-repeat: no-repeat;
+ -webkit-mask-repeat: no-repeat;
+ mask-position: center;
+ -webkit-mask-position: center;
+ display: block;
+ width: var(--circ);
+ height: var(--circ);
+ position: absolute;
+ border-radius: 50%;
+ right: calc(-1 * (var(--circ)));
+ top: 0;
+ transform: translateY(-50%);
+
+ }
+ hr.logo::after {
+ content: '';
+ display: block;
+ width: 100%;
+ position: absolute;
+ z-index: 0;
+ top: 0;
+ transform: translateY(050%);
+ background-color: rgb(var(--contrast));
+ height: 1px;
+ right: calc((100% + var(--btn_) + 1rem) * -1);
+ margin: 0;
+ }
+ hr.dots {
+ border-color: transparent;
+ display:flex;
+ }
+ hr.dots::before {
+ content: '.\2003.\2003.';
+ margin: 0 auto;
}
:target {
@@ -518,8 +612,8 @@
BASE
*************************************************************/
body {
- background-color: var(--base-50);
- color: var(--contrast);
+ background-color: rgb(var(--base-50));
+ color: rgb(var(--contrast));
margin: 0;
font-family: var(--body);
font-weight: var(--fw-b);
@@ -537,7 +631,7 @@
*************************************************************/
html {
scroll-behavior: smooth;
- overflow-x: hidden;
+ overflow-x: clip;
}
@media(prefers-reduced-motion){
@@ -558,19 +652,23 @@
/*}*/
main {
+ --gapNarrow: calc((var(--content) - var(--narrow)) / 2);
+ --gapContent: calc((var(--wider) - var(--content)) / 2);
+ --gapWide: calc((var(--wide) - var(--wider)) / 2);
+
display: grid;
grid-template-columns:
[full-start] minmax(1rem, 1fr)
- [wide-start] minmax(0, calc((100% - var(--content)) / 2))
- [wider-start] minmax(0, calc((var(--wide) - var(--wider)) / 2))
- [content-start] minmax(0, calc((var(--wider) - var(--content)) / 2))
- [narrow-start] min(100% - 2rem, var(--narrow)) [narrow-end]
- minmax(0, calc((var(--content) - var(--narrow)) / 2)) [content-end]
- minmax(0, calc((var(--wider) - var(--content)) / 2)) [wider-end]
- minmax(0, calc((var(--wide) - var(--wider)) / 2)) [wide-end]
- minmax(0, calc((100% - var(--content)) / 2))
- minmax(1rem, 1fr) [full-end];
+ [wide-start] minmax(0, var(--gapWide))
+ [wider-start] minmax(0, var(--gapContent))
+ [content-start] minmax(0, var(--gapNarrow))
+ [narrow-start] min(calc(100% - 2rem), var(--narrow)) [narrow-end]
+ minmax(0, var(--gapNarrow)) [content-end]
+ minmax(0, var(--gapContent)) [wider-end]
+ minmax(0, var(--gapWide)) [wide-end]
+ minmax(1rem, 1fr) [full-end];
min-height: var(--maxHeight);
+ grid-auto-rows: max-content;
}
main > * {
grid-column: content;
@@ -582,6 +680,15 @@
main > section > * {
width: 100%;
max-width: var(--content);
+ margin: var(--sp1) auto;
+}
+ul {
+ max-width: var(--narrow);
+ margin: 1rem auto 1rem 3rem;
+}
+ul ul {
+ padding: .25rem 0 .25rem 1rem;
+ margin: 0;
}
/* Nested items can use any width */
@@ -595,10 +702,12 @@
main .align-wider {
grid-column: wider;
+ width: 100%;
}
main .align-wide {
grid-column: wide;
+ width: 100%;
}
main .align-full {
@@ -616,8 +725,8 @@
position: sticky;
top: 0;
z-index: var(--z-8);
- background-color: var(--base);
- box-shadow: rgba(var(--base-rgb), var(--op-45)) var(--shdw-down);
+ background-color: rgb(var(--base));
+ box-shadow: rgba(var(--base), var(--op-45)) var(--shdw-down);
transition: top var(--trans-base);
}
header a[rel="home"] {
@@ -625,9 +734,8 @@
align-items: center;
max-height:var(--btn);
overflow:hidden;
+ margin: 0 auto;
}
-
-
.scroll-progress {
position: absolute;
inset-inline: 0;
@@ -637,7 +745,7 @@
align-items: center;
pointer-events: none;
z-index: var(--z-3);
- background-color: var(--base-200);
+ background-color: rgb(var(--base-200));
overflow: hidden;
}
@@ -646,52 +754,21 @@
height: 1px;
transform-origin: left center;
transform: scaleX(0);
- background: var(--action-0);
+ background: rgb(var(--action-0));
}
-aside.pre-header,
-aside.sub-header,
-aside.pre-footer,
-aside.sub-footer {
- height: var(--chip_);
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 1rem;
- font-size: var(--txt-x-small);
- background-color:var(--base-50);
- z-index: var(--z-7);
-}
-.pre-header p {
- width: max-content;
-}
-.pre-header {
- position: sticky;
- top: -2rem;
- transition: top var(--trans-base);
-}
-.scroll-up .pre-header {
- top: 0;
-}
-.scroll-up .pre-header ~ header {
- top: calc(var(--chip_) - 2px);
-}
-/*.pre-header.stuck ~ #breadcrumbs {*/
-/* margin-top: var(--chip_);*/
-/*}*/
-
footer {
padding: 1rem;
- background-color: var(--base-200);
- color: var(--contrast-200);
+ background-color: rgb(var(--base));
+ color: rgb(var(--contrast-200));
text-align: center;
margin: 4rem 0 0;
position: relative;
z-index: var(--z-7);
}
-footer p {
- margin: 0 auto;
-}
+ footer p {
+ margin: 0 auto;
+ }
body:has(nav.fixed.bottom,nav.on-this-page) footer {
padding-bottom: var(--btn_);
@@ -701,20 +778,61 @@
padding: 1rem 2rem var(--btn_);
}
}
-
*:target {
scroll-snap-margin-top: var(--btnbtn);
scroll-margin-top: var(--btnbtn);
- outline: double var(--action-200);
- background-color: var(--base);
+ outline: double rgb(var(--action-200));
+ background-color: rgb(var(--base));
}
-/*************************************************************
+/***********************
+PRE/SUB HEADER
+***********************/
+aside.header,
+aside.footer {
+ padding: 0 1rem;
+ font-size: var(--txt-x-small);
+ z-index: var(--z-7);
+ background-color: rgb(var(--base-50));
+}
+aside.header {
+ height: var(--chip_);
+ --wrap: nowrap;
+}
+aside.footer p,
+aside.header p {
+ width: max-content;
+}
+aside.footer {
+ --dir: column;
+ background-color:rgb(var(--base-50));
+ padding: 1rem;
+ border-top: 1px solid rgb(var(--base-200));
+}
+aside.footer + footer {
+ margin-top: 0;
+}
+aside.header p ,aside.footer p {
+ margin: 0.125rem 0;
+}
+aside.pre {
+ position: sticky;
+ top: -2rem;
+ transition: top var(--trans-base);
+}
+.scroll-up aside.pre {
+ top: 0;
+}
+.scroll-up .pre ~ header {
+ top: calc(var(--chip_) - 2px);
+}
+/***********************************************************
TYPOGRAPHY
-*************************************************************/
+***********************************************************/
body :is(b, strong) {
font-weight: var(--fw-b-bold);
}
+
:is(h1, h2, h3, h4, h5, h6) {
font-family: var(--heading);
text-transform: uppercase;
@@ -726,6 +844,10 @@
:is(h1,h2,h3,h4,h5,h6), p {
width: 100%;
}
+ .group :is(h1,h2,h3,h4,h5,h6), p {
+ width: max-content;
+ max-width: 100%;
+ }
:is(h1, h2, h3, h4, h5, h6) :is(b, strong) {
font-weight: var(--fw-h-bold);
@@ -744,7 +866,7 @@
:is(h1, h2, h3, h4, h5, h6).inline {
font-size: 1.2rem;
- font-weight: 600;
+ font-weight: var(--fw-h-bold);
display: inline-block;
margin: 0 2rem 0 0;
letter-spacing: .05em;
@@ -755,29 +877,11 @@
margin: .5rem 0;
}
-:is(h1, h2, h3, h4, h5, h6).inline + .term-list {
- display: inline-flex;
- margin: .5rem 0;
-}
-
h1 {
font-size: var(--txt-xxx-large);
font-weight: var(--fw-h);
line-height: 1;
- margin: 0 auto .25em;
-}
-
-h1:first-of-type {
- margin-top: 10vh;
-}
-
-h1 small {
- display: block;
- font-size: var(--txt-x-small);
- font-weight: var(--fw-b);
- line-height: 1;
- margin-bottom: .75em;
- font-family: var(--body);
+ margin: 10vh auto .25em;
}
h1 small + small {
@@ -800,6 +904,23 @@
p {
line-height: 1.6;
}
+ .drop-cap::first-letter {
+ font-family: var(--heading);
+ font-size: var(--btn);
+ line-height: 1;
+ background-color: rgb(var(--action-0));
+ color: rgb(var(--action-contrast));
+ float: left;
+ font-weight: var(--fw-h-bold);
+ margin: 0.1em 0.1em 0.2em 0;
+ padding: 0.1em;
+ }
+ :not(.row >) p:has(+p) {
+ margin-bottom: 0;
+ }
+ :not(.row >) p + p {
+ margin-top: 0;
+ }
.hint {
line-height: 1.2;
@@ -807,52 +928,192 @@
font-size: var(--txt-small);
}
-/*main > * :is(h1, h2, h3, h4, h5, h6, p) {*/
-/* width: 100%;*/
-/*}*/
-
-main > * p {
- margin: .5rem 0;
+mark {
+ background-color: rgba(var(--action-0), var(--op-45))!important;
+ color: rgb(var(--action-contrast))!important;
+ border-top-left-radius: .5em;
+ border-bottom-right-radius: .5em;
+ padding: 0 .5em;
+ corner-shape: bevel;
}
+/******************************************************
+LINKS
+******************************************************/
a {
- color: var(--action-0);
+ color: rgb(var(--action-0));
border-radius: 4px;
padding: .125rem;
}
+ a:visited {
+ color: rgb(var(--action-100));
+ }
+ a:hover,
+ a:visited:hover {
+ color: rgb(var(--contrast-50));
+ text-decoration: none;
+ }
-ul a {
- display: inline-flex;
+ :is(p, li, h1,h2,h3,h4,h5,h6, small) a:hover {
+ color: rgb(var(--action-contrast));
+ background-color: rgb(var(--action-0));
+ }
+
+ a.logo {
+ display: inline-flex;
+ }
+ .logo img {
+ max-width: 150px;
+ }
+/*****************************************************
+ICONS
+*****************************************************/
+i.icon {
+ width: var(--w);
+ height: var(--w);
+ display: inline-block;
+ background-color: currentColor;
+ mask-image: var(--icon);
+ -webkit-mask-image: var(--icon);
+ mask-size: contain;
+ -webkit-mask-size: contain;
+ mask-repeat: no-repeat;
+ -webkit-mask-repeat: no-repeat;
+ mask-position: center;
+ -webkit-mask-position: center;
+ vertical-align: middle;
}
-a:visited {
- color: var(--action-50);
+/** SWITCHING ICONS **/
+/**** If, say, a button has two icons, one gets hidden on one state, and one gets shown on another, add it here **/
+
+.favourite:not(.favourited) .heart-fill,
+.favourite.favourited .heart,
+.notifications:not(.has) .bell-ringing,
+.notifications.has .bell,
+.vote button:not(.voted) .upvoted,
+.vote button:not(.voted) .downvoted,
+.vote .voted .upvote,
+.vote .voted .downvote {
+ display: none;
}
-a:hover {
- color: var(--contrast-50);
- text-decoration: none;
+.favourite:not(.favourited) .heart,
+.favourite.favourited .heart-fill,
+.notifications:not(.has) .bell,
+.notifications.has .bell-ringing,
+.vote button:not(.voted) .upvote,
+.vote button:not(.voted) .downvote,
+.vote .voted .upvoted,
+.vote .voted .downvoted {
+ display: block;
}
-
-p a:hover,
-li a:hover,
-:is(h1, h2, h3, h4, h5, h6) a:hover {
- color: var(--action-contrast);
- background-color: var(--action-0);
-}
-
+/*******************************************************
+LISTS
+*******************************************************/
ol {
- list-style-type:decimal;
+ list-style-type: decimal;
}
+ul.terms {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+}
+ ul.terms li {
+ list-style: none;
+ }
+
+.term-list.cloud {
+ display: flex;
+ gap: .25rem;
+ margin: var(--sp2) auto;
+}
+ .term-list.cloud a {
+ border-radius: var(--radius);
+ background-color: transparent;
+ color: rgb(var(--action-0));
+ border: 2px solid rgb(var(--action-0));
+ padding: 4px 8px;
+ position: relative;
+ }
+ .term-list.cloud a:hover,
+ .term-list.cloud a:focus {
+ color: rgb(var(--action-contrast));
+ background-color: rgb(var(--action-0));
+ }
+ .term-list a:has(.count) {
+ padding-right: 1rem;
+ }
+ .term-list .count {
+ position: absolute;
+ top: .25rem;
+ right: .25rem;
+ /*border-radius: 50%;*/
+ /*aspect-ratio: 1;*/
+ font-size: var(--txt-small);
+ /*background-color: rgb(var(--action-0));*/
+ /*color: rgb(var(--action-contrast));*/
+ }
+
+.term-list li {
+ list-style: none;
+}
+ .term-list a {
+ display: inline-flex;
+ width: max-content;
+ }
+/******************************************************
+UTILITY
+******************************************************/
+.rounded { border-radius: var(--radius-outer); }
.font-small { font-size: var(--txt-x-small); }
.font-medium { font-size: var(--txt-medium); }
.font-large { font-size: var(--txt-large); }
.font-x-large { font-size: var(--txt-x-large); }
-/**************************************************************
-UTILITY CLASSES - SPACING
-**************************************************************/
-/** PADDING **/
+
+.text-center {text-align: center;}
+.text-right {text-align: right;}
+.text-left {text-align: left;}
+.align-center { text-align: center; margin: 0 auto;}
+.align-left { text-align: left; margin: 0 auto 0 0;}
+.align-right { text-align: right; margin: 0 0 0 auto;}
+
+
+*[hidden] { display: none!important; }
+
+@media (max-width: 767px){
+ .hide-small { display: none; }
+}
+
+.width-33,
+.width-66,
+.width-50,
+.width-25,
+.width-75 {
+ width: 100%;
+}
+
+.w-full{
+ width: 100%;
+}
+@media (min-width: 768px){
+ .width-50 {
+ max-width: 50%;
+ }
+ .width-25 {
+ max-width: 25%;
+ }
+ .width-75 {
+ max-width: 75%;
+ }
+ .width-33 {
+ max-width: 33.333%;
+ }
+ .width-66 {
+ max-width: 66.666%
+ }
+}
+/** SPACING TODO: maybe scan our files for which we actually use? **/
.p-1 {padding: var(--sp1);}
.p-2 {padding: var(--sp2);}
.p-3 {padding: var(--sp3);}
@@ -961,51 +1222,204 @@
.ml-7 { margin-left: var(--sp7); }
.mb-7 { margin-bottom: var(--sp7); }
-/**************************************************************
-UTILITY CLASSES - TEXT & VISIBILITY
-**************************************************************/
-.align-center { text-align: center; }
-.align-left { text-align: left; }
-.align-right { text-align: right; }
-
-*[hidden] {
- display: none!important;
+/******************************************************
+COLORS
+******************************************************/
+.base {
+ --color: rgb(var(--base));
}
-
-@media (max-width: 767px){
- .hide-small {
- display: none;
+ .base-50 {
+ --color: rgb(var(--base-50));
}
+ .base-100 {
+ --color: rgb(var(--base-100));
+ }
+ .base-200 {
+ --color: rgb(var(--base-200));
+ }
+.contrast {
+ --color: rgb(var(--contrast));
}
-
-.width-50,
-.width-25,
-.width-75 {
- width: 100%;
+ .contrast-50 {
+ --color: rgb(var(--contrast-50));
+ }
+ .contrast-100 {
+ --color: rgb(var(--contrast-100));
+ }
+ .contrast-200 {
+ --color: rgb(var(--contrast-200));
+ }
+.action {
+ --color: rgb(var(--action-0));
}
-
-.w-full{
- width: 100%;
+ .action-50 {
+ --color: rgb(var(--action-50));
+ }
+ .action-100 {
+ --color: rgb(var(--action-100));
+ }
+ .action-200 {
+ --color: rgb(var(--action-200));
+ }
+ .action-comp {
+ --color: oklch(from rgb(var(--action-0)) l c calc(h + 180));
+ }
+ .action-tri {
+ --color: oklch(from rgb(var(--action-0)) .82 .2 calc(h - 120));
+ }
+ .action-tri-alt {
+ --color: oklch(from rgb(var(--action-0)) .82 .2 calc(h + 120));
+ }
+.secondary {
+ --color: rgb(var(--secondary-0));
}
-
-@media (min-width: 768px){
- .buttons li.width-50,
- .width-50 {
- width: calc(50% - .3em);
+ .secondary-50 {
+ --color: rgb(var(--secondary-50));
}
- .width-25 {
- width: calc(25% - .3em);
+ .secondary-100 {
+ --color: rgb(var(--secondary-100));
}
- .width-75 {
- width: calc(75% - .3em);
+ .secondary-200 {
+ --color: rgb(var(--secondary-200));
}
+ .secondary-comp {
+ --color: oklch(from rgb(var(--secondary-0)) l c calc(h + 180));
+ }
+ .secondary-tri {
+ --color: oklch(from rgb(var(--secondary-0)) .82 .2 calc(h - 120));
+ }
+ .secondary-tri-alt {
+ --color: oklch(from rgb(var(--secondary-0)) .82 .2 calc(h + 120));
+ }
+.hvr-bck:hover,
+.hvr-bck:focus,
+.bck {
+ background-color: var(--color);
+}
+ .bck:not(.overlay).op-1 {
+ background-color: rgba(var(--color), var(--op-1));
+ }
+ .bck:not(.overlay).op-2 {
+ background-color: rgba(var(--color), var(--op-2));
+ }
+ .bck:not(.overlay).op-3 {
+ background-color: rgba(var(--color), var(--op-3));
+ }
+ .bck:not(.overlay).op-4 {
+ background-color: rgba(var(--color), var(--op-4));
+ }
+ .bck:not(.overlay).op-45 {
+ background-color: rgba(var(--color), var(--op-45));
+ }
+ .bck:not(.overlay).op-5 {
+ background-color: rgba(var(--color), var(--op-5));
+ }
+ .bck:not(.overlay).op-6 {
+ background-color: rgba(var(--color), var(--op-6));
+ }
+.hvr-clr:hover,
+.hvr-clr:focus,
+.clr {
+ color: var(--color);
+}
+.hvr-brdr:hover,
+.hvr-brdr:focus,
+.brdr {
+ border-color: var(--color);
}
/******************************************************************
+DUOTONE
+*****************************************************************//******************************************************************/
+.duotone {
+ isolation: isolate;
+ position: relative;
+ overflow: hidden;
+ background: rgb(var(--contrast));
+}
+
+.cover img,
+.cover video,
+.duotone img,
+.duotone video {
+ filter: grayscale(1) sepia(1) contrast(1.1) brightness(1.05);
+ mix-blend-mode: multiply;
+ z-index: 1;
+ position: relative;
+}
+ /*.duotone::after,*/
+ .duotone::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ z-index: 2;
+ }
+ .duotone::before {
+ mix-blend-mode: color;
+ background-color: var(--duo-dark);
+ opacity: var(--op-5);
+ /*z-index: 1;*/
+ }
+ .duotone:not(.cover)::after {
+ mix-blend-mode: screen;
+ background-color: var(--duo-light);
+ /*z-index: 2;*/
+ }
+
+
+ .duotone.action {
+ --tone-a: rgb(var(--action-0));
+ --duo-dark: oklch(from rgb(var(--base)) .18 .02 h);
+ --duo-light: oklch(from rgb(var(--action-0)) .72 .28 h);
+ }
+
+ .duotone.secondary {
+ --tone-a: rgb(var(--secondary-0));
+ --duo-dark: oklch(from rgb(var(--base)) .2 .03 h);
+ --duo-light: oklch(from rgb(var(--secondary-0)) .82 .18 h);
+ }
+
+ .duotone.complement {
+ --duo-dark: oklch(from var(--tone-a) .22 .08 calc(h + 180));
+ --duo-light: oklch(from var(--tone-a) .8 .26 h);
+ }
+ .duotone.triadic {
+ --duo-dark: oklch(from var(--tone-a) .24 .1 calc(h + 120));
+ --duo-light: oklch(from var(--tone-a) .82 .2 calc(h - 120));
+ }
+ .duotone.monochrome {
+ --duo-dark: oklch(from var(--tone-a) .3 .04 h);
+ --duo-light: oklch(from var(--tone-a) .88 .08 h);
+ }
+ .duotone.film {
+ --duo-dark: oklch(from var(--tone-a) .35 .1 h);
+ --duo-light: oklch(from var(--dark-0) .96 .02 h);
+ }
+
+
+/******************************************************************//******************************************************************
LAYOUT UTILITIES
******************************************************************/
-.row,
-.col {
+/** Buttons **/
+button,
+[type=submit],
+a.btn,
+.btn + label,
+li.btn,
+.buttons a,
+.buttons li,
+/** Item Grid **/
+.item-grid .item,
+/** popups **/
+aside.main,
+/** asides **/
+aside.header,
+aside.footer,
+/** Defaults, of course **/
+
+.row.row,
+.col.col {
display: flex;
justify-content: var(--justify);
align-items: var(--align);
@@ -1016,12 +1430,16 @@
--justify: center;
--gap: .5rem;
--wrap: wrap;
+ width: 100%;
+}
+.stretch.stretch > * {
+ flex: 1;
}
-.col { --dir: column; }
-.row { --dir: row; }
-.col.rev { --dir: column-reverse; }
-.row.rev { --dir: row-reverse; }
+.col.col { --dir: column; }
+.row.row { --dir: row; }
+.col.col.rev.rev { --dir: column-reverse; }
+.row.row.rev.rev { --dir: row-reverse; }
.nowrap.nowrap { --wrap: nowrap; }
.nowrap.nowrap.stack-small { --wrap: wrap;}
@@ -1029,35 +1447,46 @@
.nowrap.nowrap.stack-small { --wrap: nowrap;}
}
-.col.start,
-.row.a-start { --align: flex-start; }
-.col.end,
-.row.a-end { --align: flex-end; }
+.row.row.top,
+.col.col.left { --align: flex-start; }
+.col.col.top,
+.row.row.left { --justify: flex-start; }
-.col.a-start,
-.row.start { --justify: flex-start; }
-.col.a-end,
-.row.end { --justify: flex-end; }
+.row.row.btm,
+.col.col.right { --align: flex-end; }
+.col.col.btm,
+.row.row.right { --justify: flex-end; }
-.col.btw,
-.row.btw {
- --justify: space-between;
- width: 100%;
-}
+.row.row.x-mid,
+.col.col.y-mid { --justify: center; }
+.row.row.y-mid,
+.col.col.x-mid { --align: center; }
-.col.even,
-.row.even { --justify: space-evenly; }
+.row.row.x-btw,
+.col.col.y-btw { --justify: space-between; }
+.row.row.y-btw,
+.col.col.x-btw { --align: space-between; }
-/******************************************************************
+.row.row.x-even,
+.col.col.y-even { --justify: space-evenly; }
+.row.row.y-even,
+.col.col.x-even { --align: space-evenly; }
+
+.row.row.x-around,
+.col.col.y-around { --justify: space-around; }
+.row.row.y-around,
+.col.col.x-around { --align: space-around; }
+
+/*************************************************
POSITION UTILITIES
-******************************************************************/
+*************************************************/
.abs { position: absolute; }
*:has(>.abs) { position: relative; }
-.top { top: 0; right: 0; left: 0; }
+.abs.top { top: 0; right: 0; left: 0; }
.top-right { top: 0; right: 0; }
.top-left { top: 0; left: 0; }
-.btm { bottom: 0; left: 0; right: 0; }
+.abs.btm { bottom: 0; left: 0; right: 0; }
.btm-right { bottom: 0; right: 0; }
.btm-left { bottom: 0; left: 0; }
.edges { inset: 0; }
@@ -1078,972 +1507,222 @@
}
/******************************************************************
-THEME SWITCHER & TOGGLE
+THEME SWITCHER
******************************************************************/
-.toggle-switch input {
- opacity: 0;
- width: 0;
- height: 0;
- position: absolute;
- left: var(--offScreen);
+.field .switch {
+ display: inline-flex;
}
-
-.toggle-switch .slider {
+.switch .slider {
+ --trans-t: .0125s;
position: relative;
- width: 2rem;
- height: 1rem;
- background-color: var(--base-200);
+ width: var(--chipchip);
+ height: var(--chip);
+ background-color: rgb(var(--base-200));
border-radius: .75rem;
overflow: hidden;
display: flex;
- justify-content: space-evenly;
+ justify-content: space-between;
align-items: center;
border: 4px solid transparent;
- transition: var(--trans-t);
- box-shadow: 0 0 .25rem 0 rgba(var(--contrast-rgb), .125) inset;
+ box-shadow: 0 0 .25rem 0 rgba(var(--contrast), .125) inset;
cursor: pointer;
margin: 5px;
+ transition: var(--trans-color);
}
+ .switch .slider::before {
+ content: '';
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-color: rgb(var(--base));
+ transform: translateX(-1.5rem); /* NOTE: Tied to half of the width defined above */
+ border-radius: .75rem;
+ transition: var(--trans-transform);
+ box-shadow: 0 0 .25rem 3px rgba(var(--contrast), .125);
+ }
+ .switch :checked ~ .slider::before {
+ transform: translateX(1.5rem);
+ box-shadow: 0 0 .25rem 3px rgba(var(--base), .25);
+ }
+ .switch :checked ~ .slider {
+ background-color: rgb(var(--action-0));
+ }
-.toggle-switch .slider::before {
- content: '';
- display: block;
- width: 100%;
- height: 100%;
- position: absolute;
- top:0;
- left: 0;
- background-color: var(--base);
- transform: translateX(-1rem);
- border-radius: .75rem;
- transition: var(--trans-transform);
- box-shadow: 0 0 .25rem 3px rgba(var(--contrast-rgb), .125);
-}
-
-.toggle-switch input:checked ~ .slider::before {
- transform: translateX(1rem);
- box-shadow: 0 0 .25rem 3px rgba(var(--base-rgb), .25);
-}
-
-.toggle-switch input:checked ~ .slider {
- background-color: var(--action-0);
-}
-
-.toggle-switch input:active ~ .slider::before {
- transform: translate(0);
-}
-
-#theme-switch {
- z-index: 99;
- margin: 0;
- --wrap: nowrap;
- --gap: 1rem;
-}
-
-#theme-switch .slider {
- width: var(--chipchip);
- height: var(--chip);
-}
-
-#theme-switch .slider::before {
- transform: translateX(-1.5rem);
-}
-
-#theme-switch input:checked ~ .slider::before {
- transform: translateX(1.5rem);
-}
-
-@media (max-width: 600px) {
+ .switch :active ~ .slider::before {
+ transform: translateX(0);
+ }
#theme-switch {
- left: 1rem;
+ z-index: var(--z-6);
+ margin: 0;
+ --wrap: nowrap;
+ --gap: 1rem;
}
- .wp-site-blocks > header {
- padding: 0!important;
- }
+ #theme-switch [type=checkbox] {
+ position: absolute;
+ left: var(--offScreen);
+ }
+ @media (max-width: 600px) {
+ #theme-switch {
+ left: 1rem;
+ }
+ }
+:checked ~ .slider .icon-sun-dim {
+ --w: .75em;
+ margin-top: .25em;
+}
+.slider .icon-moon {
+ --w: .666em;
+ margin-top: .333em;
+}
+.slider .icon-sun-dim,
+:checked ~ .slider .icon-moon {
+ --w: 1em;
+ margin-top: 0;
+}
+:not(:checked) ~ .slider .icon-sun-dim {
+ color: rgb(var(--action-0));
}
-/*********************************************************
-GRIDS
-*********************************************************/
-.grid-view,
-.item-grid {
+/************************************************
+GRIDS/ROWS/TABLES
+************************************************/
+/** GRID VIEW (default) **/
+.item-grid{
+ --columns: repeat(2, 1fr);
display: grid;
- grid-template-columns: repeat(2, 1fr);
+ grid-template-columns: var(--columns);
gap: 10px;
}
-.item-grid.stats {
- grid-template-columns: repeat(2, 1fr);
+.item-grid:empty {
+ display: none;
}
-@media (min-width: 768px){
- .grid-view,
- .item-grid {
- --width: 250px;
- grid-template-columns: repeat(auto-fill, minmax(var(--width), 1fr));
+ .no-results,
+ .item-grid .empty {
+ height: 15vh;
+ background-color: rgb(var(--base-50));
+ border-radius: var(--radius);
+ border: 2px dashed rgb(var(--base-200));
+ font-style: italic;
}
-}
+ .item-grid.stats {
+ --columns: repeat(2, 1fr);
+ }
+ @media (min-width: 768px) {
+ .item-grid {
+ --width: 250px;
+ --columns: repeat(auto-fill, minmax(var(--width), 1fr));
+ }
+ .item-grid.split-2 {
+ --columns: repeat(2, 1fr);
+ }
+ .item-grid.split-3 {
+ --columns: repeat(3, 1fr);
+ }
+ .item-grid.split-4 {
+ --columns: repeat(4, 1fr);
+ }
+ .item-grid.split-5 {
+ --columns: repeat(5, 1fr);
+ }
+ .item-grid.split-6 {
+ --columns: repeat(6, 1fr);
+ }
+ .item-grid.split-7 {
+ --columns: repeat(7, 1fr);
+ }
+ .item-grid.split-8 {
+ --columns: repeat(8, 1fr);
+ }
+ .item-grid.split-9 {
+ --columns: repeat(9, 1fr);
+ }
+ }
-.grid-view .item,
.item-grid .item {
border-radius: var(--radius-outer);
- display:flex;
filter: none;
position: relative;
}
- .item-grid.list-view {
- gap: 0;
- }
- .item-grid.list-view .item {
- aspect-ratio: unset;
- align-items: flex-start;
- border-radius: 4px;
- padding: 1rem 0;
- }
- .list-view .item:nth-of-type(even) {
- background-color: var(--base);
- }
- .list-view .item-select {
- display: flex;
- align-items: center;
- justify-content: center;
- min-height: 18vh;
- }
- .list-view .item .col {
- padding: 0 var(--chip_) 0 1rem;
- }
- .list-view .abs {
- right:0;
- top:0;
- width:max-content;
- --dir:column-reverse;
- justify-content: flex-end;
- }
- .item.col {
- --wrap: nowrap;
- }
- .votes,
- .favourite {
+ .item-grid .item .item-actions {
+ --gap: .125rem;
+ z-index: 1;
position: absolute;
- z-index: var(--z-1);
- box-shadow: rgba(var(--base-rgb),var(--op-2)) var(--shdw);
- background-color: rgba(var(--base-rgb),var(--op-2));
+ top: 0;
+ right: 0;
+ width: calc(100% - var(--btn));
}
- .favourite .icon-heart-fi,
- .favourited .icon-heart {
- display: none;
+ .item-actions button,
+ .item-actions .btn + label {
+ min-height: var(--chipchip);
+ width: var(--chipchip);
+ z-index: var(--z-1);
}
- .favourited .icon-heart-fi,
- .favourite .icon-heart {
- display: block;
- }
-.votes {
- bottom: 0;
- right: 0;
-}
-.favourite {
- top: 0;
- left: 0;
-}
.item-grid .item .images,
-.item-grid .item .images a{
+.item-grid .item .images a {
aspect-ratio: 1;
width: 100%;
height: 100%;
display: flex;
}
-
-
-.item-grid button {
- --height: max-content;
- aspect-ratio: 1;
-}
-
-.grid-view img,
.item-grid img {
border-radius: var(--radius);
}
+.item-grid .item-actions button {
+ min-height: var(--chipchip);
+ width: var(--chipchip);
+}
+/** LIST VIEW **/
.item-grid.list-view {
display: flex;
flex-direction: column;
gap: 0;
}
-
-.item-grid.list-view .item .col {
- --gap: .5rem;
-}
-
-.item-grid.list-view img {
- width: 20%;
-}
-
-@media (min-width: 768px) {
- .item-grid,
- .grid-view {
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ .item-grid.list-view .item {
+ aspect-ratio: unset;
+ align-items: flex-start;
+ border-radius: var(--radius);
+ padding: 1rem 0;
}
-}
+ .list-view .item:nth-of-type(even) {
+ background-color: rgb(var(--base));
+ }
+ .list-view img {
+ width: 20%;
+ }
+ .item.col {
+ --wrap: nowrap;
+ }
-/******************************************************************
-INTERACTIVE ELEMENTS - BASE
-******************************************************************/
-li.btn,
-button,
-[type=submit],
-a.button,
-.buttons a,
-.btn + label {
- --justify: center;
- --align: center;
- --dir: row;
- width: fit-content;
- text-transform: uppercase;
- text-decoration: none;
- text-align: center;
- background-color: var(--base-100);
- color: var(--contrast-50);
- border: 1px solid var(--base-200);
- border-radius: var(--radius);
- padding: .25rem 1rem;
- font-family: var(--heading);
- cursor: pointer;
- outline: 0;
- min-height: var(--btn);
- display: inline-flex;
- justify-content: var(--justify);
- align-items: var(--align);
- gap: var(--gap);
- flex-wrap: var(--wrap);
- flex-direction: var(--dir);
- position: relative;
- box-shadow: rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset);
-}
-
-[data-filter], .btn + label {
- width: var(--chipchip);
- height: var(--chipchip);
- min-height: var(--chipchip);
-}
-select[data-filter] {
- width: max-content;
- height: auto;
- min-height: 0;
-}
-
-ul.socials a {
- background-color: var(--base-100);
- color: var(--contrast-50);
- border: 1px solid var(--base-200);
- border-radius: var(--radius);
- padding: .25rem 1rem;
- cursor: pointer;
- min-height: var(--btn);
- display: inline-flex;
+.empty-state {
+ --w: 1.2em;
+ grid-column: 1 / span 2;
+ display: flex;
+ flex-direction: column;
justify-content: center;
align-items: center;
- box-shadow: rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset);
-}
-
-/******************************************************************
-INTERACTIVE ELEMENTS - STATES
-******************************************************************/
-li.btn:hover,
-li.btn:focus,
-button:hover,
-button:focus,
-[type=submit]:hover,
-[type=submit]:focus,
-a.button:hover,
-a.button:focus,
-ul.socials a:hover,
-ul.socials a:focus,
-.buttons a:hover,
-.buttons a:focus,
-.btn + label:hover,
-.btn + label:focus {
- background-color: var(--action-0);
- color: var(--action-contrast);
- box-shadow: var(--shdw-none);
-}
-
-button:disabled,
-[type=submit]:disabled,
-a.button:disabled,
-ul.socials a:disabled,
-.btn:disabled + label,
-button:disabled:hover,
-button:disabled:focus,
-[type=submit]:disabled:hover,
-[type=submit]:disabled:focus,
-a.button:disabled:hover,
-a.button:disabled:focus,
-ul.socials a:disabled:hover,
-.btn:disabled + label:hover {
- opacity: .5;
- cursor: not-allowed;
- background-color: var(--base-200);
- color: var(--contrast-200);
-}
-
-/******************************************************************
-BUTTONS
-******************************************************************/
-.buttons {
- --wrap: wrap;
- --justify: flex-start;
+ text-align: center;
margin: 1rem auto;
- width: 100%;
- padding: 0;
+ max-width: 66%;
+ background-color: rgb(var(--base-100));
+ border: 2px dashed rgb(var(--base-50));
+ padding: 1rem;
}
-.buttons.fit {
- width: fit-content;
- margin: 1rem 2rem;
-}
-
-.buttons li {
- --justify: stretch;
- --align: stretch;
- padding: 0;
- list-style: none;
- overflow:hidden;
- width: 100%;
-}
-
-.list-none {
- list-style: none;
-}
-
-@media (min-width: 768px){
- .buttons {
- max-width: var(--content);
- margin: 3rem auto;
- }
-}
-
-.buttons .outline a {
- background-color: transparent;
- color: var(--action-0);
- border: 2px solid var(--action-0);
-}
-
-.buttons .outline a:hover,
-.buttons .outline a:focus {
- background-color: var(--action-0);
- color: var(--action-contrast);
- border-color: var(--action-0);
-}
-
-.buttons a {
- width: 100%;
-}
-
-details .icon {
- --w: 1.5em;
-}
-details .filters .icon {
- --w: 1em;
-}
-button.voted .icon,
-button.favourite.favourited {
- animation: favourite-pop .4s cubic-bezier(.25, .46, .45, .94);
-}
-
-@keyframes favourite-pop {
- 0% { transform: scale(1); }
- 50% { transform: scale(1.3); }
- 75% { transform: scale(.9); }
- 100% { transform: scale(1); }
-}
-
-button.filter-toggle {
- border: 1px solid var(--base-200);
- background-color: transparent;
- white-space: nowrap;
- font-size: 1rem;
- height: var(--chip_);
- width: var(--chip_);
- min-height: 0;
- padding: .35em;
- --w: 1.2em;
-}
-
-.filter-toggle:hover {
- border-color: var(--action-50);
- color: var(--action-50);
-}
-
-.filter-toggle:focus {
- background-color: var(--action-50);
- color: var(--action-contrast);
-}
-
-button.favourite:not(.favourited) .heart-fill,
-button.favourite.favourited .heart,
-.toggle.notifications:not(.has) .bell-ringing,
-.toggle.notifications.has .bell,
-.vote button:not(.voted) .upvoted,
-.vote button:not(.voted) .downvoted,
-.vote .voted .upvote,
-.vote .voted .downvote {
- display: none;
-}
-
-button.favourite:not(.favourited) .heart,
-button.favourite.favourited .heart-fill,
-.toggle.notifications:not(.has) .bell,
-.toggle.notifications.has .bell-ringing,
-.vote button:not(.voted) .upvote,
-.vote button:not(.voted) .downvote,
-.vote .voted .upvoted,
-.vote .voted .downvoted {
- display: block;
-}
-
-/******************************************************************
-ICONS
-******************************************************************/
-i.icon {
- width: var(--w);
- height: var(--w);
- display: inline-block;
- background-color: currentColor;
- mask-image: var(--icon);
- -webkit-mask-image: var(--icon);
- mask-size: contain;
- -webkit-mask-size: contain;
- mask-repeat: no-repeat;
- -webkit-mask-repeat: no-repeat;
- mask-position: center;
- -webkit-mask-position: center;
- vertical-align: middle;
-}
-.icon-colour {
- background: rgb(183, 51, 46);
- background: linear-gradient(180deg, rgba(255,0,128,1) 0%, rgba(250,71,101,1) 14%, rgba(251,121,35,1) 28%, rgba(176,190,19,1) 42%, rgba(14,204,0,1) 56%, rgba(14,225,166,1) 70%, rgba(63,152,253,1) 84%, rgba(166,90,196,1) 100%);
-}
-.icon.grab {
- cursor: grab;
-}
-main a .icon {
- margin-right: .5rem;
-}
-/** TODO: Reintegrate this; currently svg is in .css
-path#refresh {
- transform-origin: center;
- transform-box: fill-box;
- animation: spin 1s var(--trans-fn) infinite;
-}**/
-
-/******************************************************************
-ACCESSIBILITY
-******************************************************************/
-.screen-reader-text {
- border: 0;
- clip: rect(1px, 1px, 1px, 1px);
- clip-path: inset(50%);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute !important;
- width: 1px;
- word-wrap: normal !important;
-}
-
-input[type=checkbox]:focus + label,
-input[type=checkbox]:focus-visible + label,
-input[type=radio]:focus + label,
-input[type=radio]:focus-visible + label,
-input:focus,
-input:focus-within {
- outline: 2px solid var(--action-0) !important;
- outline-offset: 2px !important;
- box-shadow: 0 0 0 4px rgba(var(--action-rgb), var(--op-3))!important;
-}
-
-[aria-busy="true"] {
- cursor: progress;
-}
-
-[aria-disabled="true"],
-[disabled] {
- cursor: not-allowed;
- opacity: .7;
-}
-
-/******************************************************************
-DETAILS
-******************************************************************/
-details {
- padding: .25rem 0;
- border-top: 1px solid var(--base-200);
- border-bottom: 1px solid var(--base-200);
-}
-
-details[open] {
- background-color: var(--base-50);
-}
-
-details summary {
- --wrap: nowrap;
- list-style: none;
- text-transform: uppercase;
- cursor: pointer;
- border: 0;
- position: relative;
- padding: .5rem 2.5rem .5rem .5rem;
- gap: .5rem;
-}
-
-details summary:hover {
- background-color: var(--base-100);
- border-color: var(--base-100);
- color: var(--contrast);
-}
-
-details[open] > summary {
- background-color: var(--base-50);
-}
-
-details summary::after {
- position: absolute;
- right: .5rem;
- top: .5rem;
- --icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yMTIuMjQsMTAwLjI0bC04MCw4MGE2LDYsMCwwLDEtOC40OCwwbC04MC04MGE2LDYsMCwwLDEsOC40OC04LjQ4TDEyOCwxNjcuNTFsNzUuNzYtNzUuNzVhNiw2LDAsMCwxLDguNDgsOC40OFoiLz48L3N2Zz4=');
- content: "";
- background-color: var(--contrast-100);
- -webkit-mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- -webkit-mask-image: var(--icon);
- mask-image: var(--icon);
- mask-repeat: no-repeat;
- mask-size: contain;
- width: 1.25rem;
- height: 1.25rem;
- margin-left: auto;
- transition: var(--trans-color), var(--trans-transform);
-}
-
-details summary:hover::after {
- background-color: var(--action-0);
-}
-
-details[open] > summary::after {
- background-color: var(--contrast);
-}
-
-details[open] > summary::after {
- transform: rotate(-540deg);
- transition: background-color var(--trans-base);
- transition-property: background-color, transform;
-}
-
-details::details-content {
- opacity: 0;
- block-size: 0;
- overflow-y: clip;
- transition: content-visibility var(--trans-t) allow-discrete, opacity var(--trans-t), block-size var(--trans-t);
-}
-
-details[open]::details-content {
- opacity: 1;
- block-size: auto;
-}
-
-@media (prefers-reduced-motion: no-preference){
- details {
- interpolate-size: allow-keywords;
- }
-}
-
-/**************************************************
-LIST OVERRIDES
-**************************************************/
-.term-list {
- --justify: flex-start;
- --align: center;
- --wrap: nowrap;
- --gap: 1.5rem;
- --dir: row;
- --w: 1em;
- list-style: none;
- padding: 0;
- height: var(--btn);
- display: flex;
- justify-content: var(--justify);
- align-items: var(--align);
- gap: var(--gap);
- flex-wrap: var(--wrap);
- flex-direction: var(--dir);
- position: relative;
- overflow: auto hidden;
- touch-action: pan-x;
- text-transform: lowercase;
-}
- .term-list small {
- vertical-align: baseline;
- margin-left: .5rem;
- font-style: italic;
- }
- .term-list li {
- display: flex;
- align-items: center;
- }
- .term-list a {
- align-items: center;
- }
-
-
-.directory-list > ul
-{
- max-width: 100%;
-}
-.directory-list img {
- width: 70px;
-}
- .directory-list .image {
- display: flex;
- flex-wrap: nowrap;
- align-items: center;
- }
- .directory-list h3 {
- margin: 0;
- text-align: center;
- font-weight: var(--fw-h-bold);
- font-family: var(--heading);
- position: sticky;
- font-size: var(--txt-enormous);
- width: 100%;
- top: 0;
- left: 0;
- color: var(--base);
- text-shadow: var(--base-200) 1px 1px 0;
- user-select:none;
- }
- .directory-list > ul > li {
- padding: 2rem;
- align-items: center;
- }
- .directory-list > ul > li:nth-of-type(even) {
- background-color: var(--base-100);
- }
- .directory-list ul ul {
- width: 100%;
- }
- .directory-list ul ul li {
- padding: .35rem .5rem;
- }
- .directory-list ul ul li:nth-of-type(even) {
- background-color:var(--base);
- }
-
- @media (min-width: 768px) {
- .directory-list h3 {
- width: 20vw;
- }
- .directory-list > ul {
- width: 100%;
- }
- .directory-list ul ul {
- min-height: var(--txt-enormous);
- }
- .directory-list > ul > li {
- padding: 2rem 10vw;
- }
- }
-/**************************************************
-COVER BLOCK
-**************************************************/
-.cover {
- position: relative;
- overflow: hidden;
- min-height: 60vh;
- padding: var(--btn);
-}
-
-.cover::before {
- z-index: var(--coverIndex);
- background-color: var(--action-0);
- mix-blend-mode: var(--coverBlend);
- background-position: center;
- background-repeat: no-repeat;
- background-size: cover;
- content: '';
-}
-
-.cover::before,
-.cover > video,
-.cover > img {
- position: absolute;
- inset: 0;
- width: 100%;
- max-width: 100%;
- height: 100%;
- margin: 0;
-}
-
-
-.cover .content {
- z-index: 5;
- position: relative;
- overflow: hidden auto;
- width: max-content;
- height: max-content;
- max-width:100%;
- max-height: 100%;
-}
-
-.cover > img {
- z-index: 1;
- opacity: .5;
- mix-blend-mode: luminosity;
- object-fit: cover;
-}
-
-@media (min-width: 768px) {
- .cover > img {
- opacity: .33;
- }
-}
-
-/**************************************************
-BLOCKQUOTE
-**************************************************/
-blockquote {
- --background: var(--base-100);
- --border: var(--action-0);
- line-height: 1.2;
- padding: var(--btn);
- border-radius: 4rem;
- background-color: var(--background);
-}
-
-blockquote .content {
- margin: 12px auto;
- max-width: min(680px, 80vw);
- position: relative;
- font-family: var(--heading);
- font-weight: var(--fw-h-bold);
- padding: 3rem 2.5rem;
- border-radius: var(--radius-outer);
- border: 2px solid var(--border);
-}
-
-blockquote .content::before,
-blockquote .content::after {
- position: absolute;
- content: '';
- left: 50px;
-}
-
-blockquote .content::before {
- width: 80px;
- border: 6px solid var(--background);
- bottom: -3px;
- z-index: 2;
-}
-
-blockquote .content::after {
- border: 2px solid var(--border);
- border-radius: 0 100% 0 0;
- width: 60px;
- height: 60px;
- bottom: -60px;
- border-bottom: 0;
- border-left: 0;
- z-index: 3;
-}
-
-blockquote cite {
- padding: 15px 0 0 12px;
- margin: 0 0 0 150px;
- z-index: 1;
-}
-
-blockquote.pull {
- background-color: unset;
- border-radius: 0;
- margin: 4rem auto;
- padding: 3rem;
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-down), rgba(var(--base-rgb),var(--op-45)) var(--shdw-up);;
-}
-
-blockquote.pull cite {
- margin: 0;
-}
-
-/******************************************************************
-OVERLAYS - BASE PATTERN
-******************************************************************/
-dialog[open],
-aside.expanded {
- background-color: var(--base);
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
- z-index: var(--z-5);
-}
-
-dialog::backdrop {
- backdrop-filter: blur(5px);
- background-color: rgba(var(--base-rgb),var(--op-4));
-}
-
-dialog[open],
-aside.main {
- border-radius: var(--radius-outer);
- overflow: hidden;
-}
-
-/**************************************************
-MODALS DIALOGUE
-**************************************************/
-dialog[open] {
- z-index:999;
- --padding: 0;
- top: 5vh;
- width: min(500px, 95vw);
- height: fit-content;
- max-height: 90vh;
- padding: var(--padding);
- background-color: var(--base-50);
- color: var(--contrast);
- border: 1px solid var(--base-200);
-}
-
-dialog > .wrap,
-dialog > form {
- max-height: var(--maxHeight);
- overflow: hidden auto;
- margin: 0 0 0 1.5rem;
- padding-right: 1.2rem;
- padding-bottom: var(--btn);
- width: calc(100% - 1.5rem);
-}
-
-dialog label {
- font-weight: normal;
-}
-
-dialog :is(h2, h3) {
- margin: 0 0 .5rem 0;
- font-size: var(--txt-large);
-}
-
-dialog:has(.m-actions){
- padding-bottom: var(--btn);
-}
-
-.m-actions {
- --w: 1.15em;
- --justify: flex-end;
- --wrap: nowrap;
- --gap: 0;
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- width: 100%;
- z-index: var(--z-6);
- background-color: var(--action-100);
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-up);
-}
-
-.m-actions button {
- width: 100%;
- height: var(--chipchip);
- border-radius: 0;
- font-size: var(--txt-x-small);
- --gap: .75rem;
- color: var(--action-contrast);
- background-color: var(--action-50);
- border: 2px solid var(--action-50);
- box-shadow:none;
-}
-
-.m-actions button:hover,
-.m-actions button:focus {
- background-color: var(--base);
- color: var(--contrast);
-}
-
-.m-actions button:first-of-type {
- border-bottom-left-radius: 1rem;
-}
-
-.m-actions button:last-of-type {
- border-bottom-right-radius: 1rem;
-}
-
-dialog ul {
- list-style: none;
-}
-
-dialog .search-container {
- padding-top: 1rem;
- width: 100%;
- gap: .5rem;
-}
-
-/****************
-QUERY BLOCK
-****************/
-.loop .item-grid {
- grid-template-columns: repeat(1, 1fr);
-}
-
-@media (min-width: 768px) {
- .loop .item-grid {
- grid-template-columns: repeat(2, 1fr);
- }
-}
-
-.loop .item-grid .progress {
- aspect-ratio: 3/2;
- position: relative;
-}
-
-.loop .item-grid .progress figure {
- width: 100%;
- height: 100%;
- display: flex;
- gap: .125rem;
- background-color: var(--action-0);
- position: relative;
-}
-
-.loop .item-grid .progress figure span {
- position: absolute;
- width: 50%;
- text-transform: uppercase;
- background-color: rgba(var(--action-rgb),var(--op-4));
- color: var(--action-contrast);
- padding: 0 .25rem;
-}
-
-.loop .progress figure img {
- max-width: 50%;
- object-fit: cover;
-}
-
-figure .after {
- top: 0;
- right:0;
-}
-
-figure .before {
- bottom: 0;
- left: 0;
-}
-
-/**************************************************
+/***********************************************
TABLES
-**************************************************/
+***********************************************/
table {
white-space: nowrap;
width: 100%;
- display: block;
+ display: table;
margin: 0 0 2rem;
border-radius: 4px;
- height: var(--maxHeight);
+ height: min(100%, var(--maxHeight));
+ color: rgb(var(--contrast));
overflow: auto;
position: relative;
}
@@ -2051,7 +1730,7 @@
thead,tfoot {
position: sticky;
z-index: 10;
- background-color: var(--base);
+ background-color: rgb(var(--base));
text-transform: uppercase;
padding: .5rem 0;
line-height: 2;
@@ -2059,7 +1738,7 @@
}
tr:nth-of-type(even){
- background-color: var(--base-200);
+ background-color: rgb(var(--base-200));
}
tfoot th {
@@ -2071,16 +1750,16 @@
}
thead tr, tfoot tr {
- background-color: rgba(var(--base-rgb),var(--op-6));
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ background-color: rgba(var(--base),var(--op-6));
+ box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
}
thead tr {
- border-bottom: 1px solid var(--contrast-200);
+ border-bottom: 1px solid rgb(var(--contrast-200));
}
tfoot tr {
- border-top: 1px solid var(--contrast-200);
+ border-top: 1px solid rgb(var(--contrast-200));
}
thead {
@@ -2133,16 +1812,16 @@
}
tbody tr:focus-within {
- background-color: var(--base-100);
- border-color: var(--action-50)
+ background-color: rgb(var(--base-100));
+ border-color: rgb(var(--action-50))
}
[data-stuck] {
- background-color: rgba(var(--base-rgb),var(--op-4));
+ background-color: rgba(var(--base),var(--op-4));
position: sticky;
left: -1rem;
z-index: 15;
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-subtle-right);
+ box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-subtle-right);
}
tbody [data-stuck] {
@@ -2151,135 +1830,1831 @@
thead [data-stuck],
tfoot [data-stuck] {
- background: var(--base);
+ background: rgb(var(--base));
}
-
-/**************************************************
-TOOLTIP
-**************************************************/
-[role=tooltip],
-.hide-tooltip.hide-tooltip.hide-tooltip + [role="tooltip"] {
- visibility: hidden;
- position: absolute;
- bottom: 2rem;
- left: 1rem;
- width: max-content;
- height:fit-content;
- max-width: 50vw;
- padding: .5rem;
+figure:has(table) {
+ width: 100%;
+ height: max-content;
+}
+/***********************************************
+BUTTONS
+***********************************************/
+button,
+[type=submit],
+a.btn,
+.btn + label,
+li.btn,
+.buttons a {
+ --justify:center;
+ --align: center;
+ --dir: row;
+ --wrap: nowrap;
+ width: fit-content;
+ text-transform: uppercase;
+ text-decoration: none;
+ background-color: rgb(var(--base-100));
+ color: rgb(var(--contrast-50));
+ border: 1px solid rgb(var(--base-200));
border-radius: var(--radius);
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
- background: var(--action-0);
- color: var(--action-contrast);
-}
-
-body.menu_item [role=tooltip] {
- left: auto;
- right: 100%;
- top: -200%;
- z-index: var(--z-4);
-}
-
-[role=tooltip] p {
- margin: 0;
-}
-
-[role=tooltip] p + p {
- margin-top: .5rem;
-}
-
-.field:has([aria-describedby]:focus) [role=tooltip],
-[aria-describedby]:hover ~ .has-tooltip [role="tooltip"],
-[aria-describedby]:focus ~ .has-tooltip[role="tooltip"] {
- visibility: visible;
- display: block;
-}
-
-.has-tooltip {
- display: inline-flex;
- justify-content: flex-end;
- position: absolute;
- top: 0;
- left: 0;
- --w: 1.5rem
-}
-
-.tt-toggle {
+ padding: .25rem 1rem;
+ font-family: var(--heading);
cursor: pointer;
- display: flex;
- border-radius: 50%;
+ outline: 0;
+ min-height: var(--btn);
+ display: inline-flex;
+ position: relative;
+ box-shadow: rgba(var(--base),var(--op-6)) var(--shdw-inset);
+}
+ .btn.chip {
+ min-height: var(--chip);
+ }
+ .buttons.left a {
+ --justify: flex-start;
+ }
+ .buttons.right a {
+ --justify: flex-end;
+ }
+ .buttons.x-btw a {
+ --justify: space-between;
+ }
+button.outline,
+[type=submit].outline,
+a.btn.outline,
+.filters .btn + label,
+.buttons .outline a {
+ --color: rgb(var(--contrast));
background-color: transparent;
+ color: var(--color);
+ border: 1px solid var(--color);
}
-.tt-toggle:hover,
-.tt-toggle:focus {
- background-color: var(--action-0);
- color: var(--action-contrast);
+button:hover,
+button:focus,
+[type=submit]:hover,
+[type=submit]:focus,
+a.btn:hover,
+a.btn:visited:hover,
+a.btn:focus,
+.btn + label:hover,
+.btn:focus + label,
+.btn:checked + label,
+li.btn:hover,
+li.btn:focus,
+.buttons a:hover,
+.buttons a:visited:hover,
+.buttons a:focus {
+ background-color: rgb(var(--action-0));
+ color: rgb(var(--action-contrast));
+ box-shadow: var(--shdw-none);
}
-.tt-toggle:hover + [role=tooltip],
-.tt-toggle:focus + [role=tooltip] {
- visibility: visible;
+ button.outline:hover,
+ button.outline:focus,
+ [type=submit].outline:hover,
+ [type=submit].outline:focus,
+ a.btn.outline:hover,
+ a.btn.outline:visited:hover,
+ a.btn.outline:focus,
+ .filters .btn + label:hover,
+ .filters .btn:focus + label,
+ .buttons .outline a:hover,
+ .buttons .outline a:visited:hover,
+ .buttons .outline a:focus {
+ background-color: rgb(var(--action-0));
+ color: rgb(var(--action-contrast));
+ border-color: rgb(var(--action-0));
+ }
+
+button:disabled,
+button:disabled:focus,
+button:disabled:hover,
+[type=submit]:disabled,
+[type=submit]:disabled:focus,
+[type=submit]:disabled:hover,
+.btn:disabled + label,
+.btn:disabled:hover + label,
+.btn:disabled:focus + label {
+ opacity: .5;
+ cursor: not-allowed;
+ background-color: rgb(var(--base-200));
+ color: rgb(var(--contrast-200));
}
-/************************************************************
-SELECTOR
-************************************************************/
-dialog[open]#jvb-selector {
- height: 70vh;
- top: 15vh;
- display: flex;
+[type=submit] {
+ margin: 1rem 0;
}
-#jvb-selector > .wrap {
- flex: 1;
+.filters .btn + label,
+.filters button {
+ min-height:var(--chip);
+}
+.filters .btn + label {
+ background-color: rgb(var(--base-100));
+ border: 1px solid rgb(var(--base-200));
+ color: rgb(var(--contrast-200));
+}
+ .filters .btn:checked + label {
+ border-color: rgb(var(--contrast));
+ color: rgb(var(--contrast));
+ }
+
+/**** WP BLOCK BUTTONS ****/
+.buttons {
+ --wrap: wrap;
+ --justify: flex-start;
+ margin: 1rem auto;
+ width: 100%;
+ padding: 0;
+}
+ .buttons li {
+ --justify: stretch;
+ --align: stretch;
+ padding: 0;
+ list-style: none;
+ overflow: hidden;
+ }
+ .buttons a {
+ width: 100%;
+ }
+ .buttons.fit {
+ width: fit-content;
+ margin: 1rem 2rem;
+ }
+ @media (min-width: 768px) {
+ .buttons {
+ max-width: var(--content);
+ margin: 3rem auto;
+ }
+ }
+a.sticky,
+button.sticky,
+.main-actions .buttons {
+ z-index: var(--z-6);
+ position: fixed;
+ bottom: var(--btn_);
+}
+body:has(.on-this-page) a.sticky,
+body:has(.on-this-page) button.sticky,
+body:has(.on-this-page) .main-actions .buttons {
+ bottom: calc(var(--btn_) + var(--chip_));
+}
+.main-actions .buttons button,
+button.sticky {
+ width: var(--btn);
+ height: var(--btn);
+ background-color: rgba(var(--base),var(--op-4));
+ color: rgb(var(--contrast));
+ box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
+ transition: var(--trans-size), var(--trans-color);
+}
+ .main-actions .buttons button:hover,
+ .main-actions .buttons button:focus,
+ a.sticky:hover,
+ a.sticky:focus,
+ button.sticky:hover,
+ button.sticky:focus {
+ background-color: rgba(var(--action-0),var(--op-6));
+ color: rgb(var(--action-contrast));
+ }
+ .main-actions .buttons button:disabled,
+ .main-actions .buttons button:disabled:hover,
+ .main-actions .buttons button:disabled:focus,
+ button.sticky:disabled,
+ button.sticky:disabled:hover,
+ button.sticky:disabled:focus {
+ opacity: .5;
+ background-color: rgba(var(--base),var(--op-3));
+ color: rgb(var(--contrast));
+ }
+
+ .qtoggle {
+ left: 0;
+ transition: left var(--trans-base), width var(--trans-base), border var(--trans-base), var(--trans-color);
+ }
+ .main .m-actions .refresh {
+ width: var(--btn);
+ border-radius: 0;
+ background-color: rgb(var(--base-50));
+ color: rgb(var(--contrast));
+ }
+ .main .m-actions .refresh:hover,
+ .main .m-actions .refresh:focus {
+ background-color: rgb(var(--action-0));
+ color: rgb(var(--action-contrast));
+ }
+ .main .refresh .indicator {
+ background-color: rgba(var(--base), var(--op-3));
+ top: 0;
+ right: 0;
+ height: 1.1em;
+ width: 1.1em;
+ }
+ .refresh .countdown:not(.counting) {
+ display: none;
+ }
+
+ .main h2 {
+ margin: .5em 0;
+ font-size: var(--txt-medium);
+ }
+
+
+
+#back-to-top {
+ min-height: var(--chip);
+ bottom: -3rem;
+ right: 0;
+ transition: bottom var(--trans-base);
+}
+body:has(.main-actions) #back-to-top {
+ right: calc(var(--btn_) + .5rem);
+}
+.scroll-up #back-to-top {
+ bottom: 0;
+}
+body:has(.fixed.bottom).scroll-up #back-to-top {
+ bottom: var(--btn);
+}
+
+body:has(.on-this-page).scroll-up.scroll-up #back-to-top {
+ bottom: calc(var(--btn) + var(--chip_));
+}
+body:has(.fixed.bottom):has(nav.index.on-this-page).scroll-up.scroll-up #back-to-top {
+ bottom: calc(var(--btn) + var(--chipchip));
+}
+
+button[data-action=refresh],
+button.clear-filters {
+ width: max-content;
+ min-height: var(--chip_);
+ --w: var(--txt-small);
+ padding: .25rem .5rem;
+}
+/******************************************************************
+ACCESSIBILITY
+******************************************************************/
+.screen-reader-text {
+ border: 0;
+ clip: rect(1px, 1px, 1px, 1px);
+ clip-path: inset(50%);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute !important;
+ width: 1px;
+ word-wrap: normal !important;
+}
+
+input[type=checkbox]:focus + label,
+input[type=checkbox]:focus-visible + label,
+input[type=radio]:focus + label,
+input[type=radio]:focus-visible + label,
+input:focus,
+input:focus-within {
+ outline: 2px solid rgb(var(--action-0)) !important;
+ outline-offset: 2px !important;
+ box-shadow: 0 0 0 4px rgba(var(--action-0), var(--op-3))!important;
+}
+
+[aria-busy="true"] {
+ cursor: progress;
+}
+
+[aria-disabled="true"],
+[disabled] {
+ cursor: not-allowed;
+ opacity: .7;
+}
+
+[type=checkbox][hidden] + label,
+[type=radio][hidden] + label,
+.btn[hidden] + label {
+ display: none!important;
+}
+
+/**************************************************************
+FORM ELEMENTS
+**************************************************************/
+label {
+ display: inline-flex;
+ align-items: center;
+ gap: .5em;
+}
+[type=radio],
+[type=checkbox] {
+ position: absolute;
+ opacity: 0;
+ left: var(--offScreen);
+}
+[type=radio] + label,
+[type=checkbox] + label {
+ cursor: pointer;
+ position: relative;
+ padding-left: 1.5rem;
+}
+.field:is(.radio,.checkbox) fieldset {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: .5rem;
+}
+ @media(min-width: 768px) {
+ .field:is(.radio,.checkbox) fieldset {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ }
+.field:is(.radio,.checkbox,.true-false) label {
+ position: relative;
+ top: unset;
+ left: unset;
+ padding: 0 0 0 var(--chip);
+ display: inline-flex;
+ border: 1px solid transparent;
+ font-weight: var(--fw-b);
+ font-size: var(--txt-medium);
+}
+ [type=radio] + label:hover,
+ [type=radio]:focus + label,
+ [type=checkbox] + label:hover,
+ [type=checkbox]:focus + label {
+ color: rgb(var(--action-0));
+ }
+
+ [type=radio].btn + label:hover,
+ [type=radio].btn:checked + label:hover {
+ color: rgb(var(--action-contrast));
+ }
+
+ [type=radio] + label::before,
+ [type=radio] + label::after,
+ [type=checkbox] + label::before,
+ [type=checkbox] + label::after {
+ content: '';
+ position: absolute;
+ z-index: var(--z-2);
+ }
+ [type=checkbox] + label::before,
+ [type=radio] + label::before {
+ z-index: var(--z-1);
+ }
+ [type=checkbox] + label::after {
+ left: .666em;
+ top: .125em;
+ transform: rotate(45deg);
+ width: .25em;
+ height: .75em;
+ border: solid rgb(var(--action-contrast));
+ border-width: 0 2px 2px 0;
+ display: none;
+ }
+ [type=checkbox] + label::before,
+ [type=radio] + label::before {
+ display: block;
+ top: .3em;
+ left: .3em;
+ width: .75rem;
+ height: .75rem;
+ border: 2px solid rgb(var(--contrast-200));
+ background-color: transparent;
+ border-radius: var(--radius);
+ }
+ [type=radio] + label::before {
+ border-radius: 50%;
+ }
+
+ [type=checkbox]:checked + label::before {
+ background-color: rgb(var(--action-0));
+ border-color: rgb(var(--base-50));
+ }
+ [type=checkbox]:checked + label::after {
+ display: block;
+ }
+
+ [type=radio]:checked + label::before {
+ background-color: rgb(var(--action-0));
+ box-shadow: rgba(var(--base), var(--op-45)) var(--shdw-inset);
+ }
+/** Button checkboxes and radios **/
+input.btn + label::before,
+input.btn + label::after {
+ display: none;
+}
+
+
+
+textarea,
+input:is([type=date], [type=number], [type=text], [type=url],
+ [type=email], [type=tel], [type=password], [type=search],
+ [type=datetime-local], [type=time]) {
+ font-family: var(--body);
+ font-size: var(--txt-medium);
+ color: rgb(var(--contrast));
+ padding: var(--p-y) var(--p-x);
+ border-radius: var(--radius);
+ background-color: rgb(var(--base));
+ outline: 0;
+ border: 1px solid rgb(var(--base-100));
+ border-bottom: 2px solid rgb(var(--contrast-200));
+ width: 100%;
+ max-width: 100%;
+ margin: 0 4px;
+}
+
+textarea:focus,
+input:is([type=date], [type=number], [type=text], [type=url],
+ [type=email], [type=tel], [type=password], [type=search],
+ [type=datetime-local], [type=time]):focus {
+ outline: rgb(var(--action-50));
+ background-color: rgb(var(--base-100));
+ color: rgb(var(--contrast));
+}
+textarea::placeholder,
+input::placeholder {
+ font-family: var(--body);
+ color: rgb(var(--base-200));
+}
+
+.field > label {
+ position: relative;
+ z-index: var(--z-1);
+ display:inline-block;
+ top: .75em;
+ left: 1em;
+ padding: 0 .5em;
+ background-color:rgb(var(--base));
+ font-size:var(--txt-small);
+ font-weight: var(--fw-b-light);
+ text-transform:uppercase;
+ border: 1px solid transparent;
+}
+ .field.selector > label {
+ top: 2.25em;
+ }
+ .field.selector .filter-toggle {
+ width: var(--chipchip);
+ min-height: var(--chipchip);
+ padding: 0;
+ }
+.field:not(.radio):not(.checkbox):not(.true-false):not(.taglist):focus-within > label {
+ background-color:rgb(var(--action-0));
+ color: rgb(var(--action-contrast));
+ border-radius: 4px;
+}
+
+.field.taglist, .field.taglist .field {
+ border: none;
+}
+
+.field li.btn {
+ min-height: var(--chip);
+}
+/******************************************************************
+SELECT
+******************************************************************/
+select {
+ background: rgb(var(--base));
+ border: 2px solid rgb(var(--base-100));
+ border-radius: var(--radius);
+ color: rgb(var(--contrast));
+ cursor: pointer;
+ font-family: var(--body);
+ font-size: var(--txt-small);
+ padding: var(--sp1);
+ width: 100%;
+}
+
+select:disabled {
+ background-color: rgb(var(--base-50));
+ border-color: rgb(var(--base-100));
+ color: rgb(var(--base-200));
+ cursor: not-allowed;
+}
+
+select option {
+ background: rgb(var(--base));
+ color: rgb(var(--contrast));
+ padding: var(--sp1);
+}
+
+select option:hover,
+select option:focus,
+select option:active,
+select option:checked {
+ background: rgb(var(--action-0));
+ color: rgb(var(--base));
+ box-shadow: 0 0 0 100px rgb(var(--action-0)) inset;
+}
+
+select option:checked {
+ background: rgb(var(--action-0)) linear-gradient(0deg, rgb(var(--action-0)) 0%, rgb(var(--action-0)) 100%);
+ color: rgb(var(--base));
+}
+
+select:hover {
+ border-color: rgb(var(--action-0));
+}
+
+select:focus {
+ border-color: rgb(var(--action-0));
}
/******************************************************************
-STATUS INDICATORS
+SEARCH & SPECIAL INPUTS
******************************************************************/
-.status,
-.item .status,
-.status-badge {
+input[type=search]:focus + .clear-search {
+ opacity: 1;
+ cursor: pointer;
+}
+
+.search-container .clear-search {
+ opacity: 0;
+ cursor: default;
+ max-width: 0;
+ padding: 0;
+ flex-shrink: 0;
+ transition: width var(--trans-base), flex-shrink var(--trans-base);
+}
+ .search-container [type="search"]:focus + .clear-search {
+ max-width: unset;
+ padding: .25rem 1rem;
+ flex-shrink: unset;
+ }
+
+.search-container.open.open [hidden] {
+ display: block!important;
+}
+
+.search-container .icon.search {
+ padding: 4px 8px;
+ color: rgb(var(--contrast-200));
+ --w: 3rem;
+}
+
+input[type="search"]::-moz-search-clear-button,
+input[type="search"]::-ms-clear,
+input[type="search"]::-ms-reveal,
+input[type="search"]::search-cancel-button {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ display: none;
+ visibility: hidden;
+}
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+ -webkit-appearance:none;
+}
+
+input[type=url] {
+ background: var(--icon);
+ background-position: .5em;
+ background-size: 1em;
+ background-repeat: no-repeat;
+ padding-left: 2em;
+}
+/**************************************************
+TABS
+**************************************************/
+.tab-content[hidden] {
+ display: block!important;
+ transform: scaleY(0);
+ max-height: 0;
+ overflow: hidden;
+}
+
+ .tab-content[hidden]:focus-within {
+ transform: scaleY(1);
+ max-height: max-content;
+ }
+/**************************************************
+CARD
+**************************************************/
+.item-grid.stats {
+ margin: 1rem 0;
+}
+.card {
+ background-color: rgb(var(--base-100));
border-radius: var(--radius);
- font-size: 0.875rem;
- font-weight: 500;
- text-transform: capitalize;
+ box-shadow: rgba(var(--base), var(--op-45)) var(--shdw);
+ aspect-ratio: 3/2;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+}
+ .card h4 {
+ margin: 0;
+ text-transform: uppercase;
+ }
+.stat-number {
+ font-family: var(--heading);
+ font-weight: var(--fw-h-bold);
+ color: rgb(var(--action-0));
+ font-size: var(--txt-xx-large);
+}
+/**************************************************
+PROGRESS
+**************************************************/
+.progress {
+ width: 100%;
+}
+.progress .bar {
+ height: 6px;
+ display: block;
+ border-radius: 6px;
+ overflow: hidden;
+ background: rgb(var(--base-200));
+ position: relative;
}
-[data-status="pending"],
-.status.pending,
-.status-badge.pending,
-#queue .item .status.pending {
- background: var(--base-100);
- color: var(--contrast-200);
+.progress .fill {
+ height: 100%;
+ background: rgb(var(--action-0));
+ border-radius: 6px;
+ width: 0;
+ transition: width .3s ease;
+}
+ .completed .fill {
+ background: rgb(var(--action-200));
+ }
+
+.progress .details {
+ margin-top: 5px;
+ font-size: var(--txt-x-small);
+ color: rgb(var(--contrast));
+ text-align: center;
+ padding: .25rem 0;
}
-[data-status="processing"],
-.status.processing,
-.status-badge.processing,
-#queue .item .status.processing {
- background: var(--base-200);
- color: var(--contrast-100);
- animation: pulse-color 2s infinite;
+.progress .details:empty {
+ display: none;
+}
+.queued .fill::after,
+.pending .fill::after,
+.processing .fill::after,
+.uploading .fill::after {
+ --delay: 0s;
+ content: '';
+ position: absolute;
+ top: 0;
+ left: -50%;
+ width: 30%;
+ height: 100%;
+ background: linear-gradient(
+ 90deg,
+ rgba(255, 255, 255, 0) 0%,
+ rgba(255, 255, 255, .225) 50%,
+ rgba(255, 255, 255, 0) 100%
+ );
+ animation: shimmer 2.5s infinite linear var(--delay);
+}
+/**************************************************************
+DETAILS
+**************************************************************/
+details {
+ padding: .25rem 0;
+ border-top: 1px solid rgb(var(--base-200));
+ border-bottom: 1px solid rgb(var(--base-200));
+}
+ details[open] {
+ background-color: rgb(var(--base-50));
+ }
+
+ details summary {
+ list-style: none;
+ text-transform: uppercase;
+ cursor: pointer;
+ border: 0;
+ position: relative;
+ padding: .5rem 2.5rem .5rem .5rem;
+ gap: .5rem;
+ }
+ details summary:hover {
+ background-color: rgb(var(--base-100));
+ border-color: rgb(var(--base-100));
+ color: rgb(var(--contrast));
+ }
+ details[open] > summary {
+ background-color: rgb(var(--base-50));
+ }
+ details summary::after {
+ content: '';
+ position: absolute;
+ right: .5rem;
+ top: .5rem;
+ background-color: rgb(var(--contrast-100));
+ -webkit-mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ -webkit-mask-image: var(--icon);
+ mask-image: var(--icon);
+ mask-repeat: no-repeat;
+ mask-size: contain;
+ width: 1.25rem;
+ height: 1.25rem;
+ margin-left: auto;
+ transition: var(--trans-color), var(--trans-transform);
+ }
+ details summary:hover::after {
+ background-color: rgb(var(--action-0));
+ }
+ details[open]:not(.all-filters) > summary::after {
+ background-color: rgb(var(--contrast));
+ transform: rotate(-540deg);
+ transition: background-color var(--trans-base);
+ transition-property: background-color, transform;
+ }
+ details::details-content {
+ opacity: 0;
+ block-size: 0;
+ overflow-y: clip;
+ transition: content-visibility var(--trans-t) allow-discrete, opacity var(--trans-t), block-size var(--trans-t);
+ }
+
+ details[open]::details-content {
+ opacity: 1;
+ block-size: auto;
+ }
+
+ @media (prefers-reduced-motion: no-preference){
+ details {
+ interpolate-size: allow-keywords;
+ }
+ }
+
+/********************************************************
+CODE
+********************************************************/
+
+code {
+ width: 100%;
+ margin: .5rem;
+ padding: .5rem;
+ user-select: all;
+ text-align: center;
+ border-radius: 4px;
+ background-color: rgb(var(--base-200));
+}
+/********************************************************
+OVERLAYS
+********************************************************/
+dialog[open],
+aside.expanded {
+ background-color: rgb(var(--base));
+ box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
+ z-index: var(--z-5);
+}
+aside.expanded {
+ margin: 0!important;
+}
+dialog::backdrop {
+ backdrop-filter: blur(5px);
+ background-color: rgba(var(--base),var(--op-4));
+}
+dialog[open],
+aside.main {
+ border-radius: var(--radius-outer);
+ overflow: hidden;
+}
+/** DIALOG **/
+dialog[open] {
+ z-index: var(--z-10);
+ --padding: 0;
+ margin: auto!important;
+ width: min(500px, 95vw);
+ height: fit-content;
+ max-height: 90vh;
+ padding: var(--padding);
+ background-color: rgb(var(--base-50));
+ color: rgb(var(--contrast));
+ border: 1px solid rgb(var(--base-200));
+}
+ dialog:is(.create,.edit,.bulkEdit)[open] {
+ width: 98vw;
+ max-height: 98vh;
+ top: 1vh;
+ }
+ dialog > .wrap.wrap {
+ max-height: var(--maxHeight);
+ overflow: hidden auto;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ margin: 0 0 0 1.5rem;
+ padding-right: 1.5rem;
+ padding-bottom: var(--btn);
+ width: calc(100% - 1.5rem);
+ }
+ dialog label {
+ font-weight: normal;
+ }
+ dialog h2,
+ dialog h3 {
+ margin: 0 0 .5rem 0;
+ font-size: var(--txt-large);
+ }
+
+ dialog:has(.m-actions) {
+ padding-bottom: var(--btn);
+ }
+
+ .m-actions {
+ --w: 1.15em;
+ --justify: flex-end;
+ --wrap: nowrap;
+ --gap: 0;
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ left: 0;
+ height: var(--btn);
+ width: 100%;
+ z-index: var(--z-6);
+ background-color: rgb(var(--action-100));
+ box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-up);
+ }
+ .m-actions button {
+ --wrap: nowrap;
+ box-shadow: none;
+ width: 100%;
+ background-color: rgb(var(--action-0));
+ color: rgb(var(--action-contrast));
+ --gap: .75rem;
+ font-size: var(--txt-x-small);
+ border-radius: 0;
+ height: var(--chipchip);
+ }
+ .m-actions button:hover,
+ .m-actions button:focus {
+ background-color: rgb(var(--base));
+ color: rgb(var(--contrast));
+ }
+ .m-actions button:first-of-type {
+ border-bottom-left-radius: 1rem;
+ }
+ .m-actions button:last-of-type {
+ border-bottom-right-radius: 1rem;
+ }
+ dialog li {
+ list-style: none;
+ padding: 0;
+ }
+ dialog .search-container {
+ padding-top: 1rem;
+ width: 100%;
+ gap: .5rem;
+ }
+ dialog header {
+ width: 100%;
+ text-align: center;
+ font-size: var(--txt-x-medium);
+ height: var(--chipchip);
+ }
+ dialog header h2 {
+ margin: 0;
+ }
+ /** SELECTOR **/
+ .selected-items {
+ width: 100%;
+ padding: .5rem;
+ border-radius: var(--radius);
+ background-color: rgb(var(--base));
+ --justify: flex-start;
+ --gap: .5rem;
+ margin-bottom: .5rem;
+ }
+ .selected-items button {
+ width: max-content;
+ padding: .125rem .5rem;
+ font-size: var(--txt-x-small);
+ min-height: var(--chip_);
+ }
+ .selected-items button .icon-x {
+ --w: var(--txt-small);
+ align-self: flex-start;
+ }
+ .selected-items.selected-items:empty {
+ padding: 0;
+ background-color: transparent;
+ margin: 0;
+ }
+ .selected-item.selected-item {
+ padding: .25rem .5rem;
+ margin: .125em;
+ background-color: rgb(var(--base-100));
+ border-radius: .25rem;
+ font-size: var(--txt-medium);
+ border: 1px solid rgb(var(--base-200));
+ position: relative;
+ width: max-content;
+ }
+ .selected-item button {
+ min-height: 0;
+ height: var(--chip);
+ width: var(--chip);
+ padding: 0;
+ --w: var(--txt-small);
+ }
+ .clear-filters {
+ margin-left: auto;
+ border: 1px solid var(--base-200);
+ }
+ #jvb-selector .message {
+ width: 100%;
+ text-align: center;
+ }
+ #jvb-selector .items-wrap {
+ width: 100%;
+ padding: 1rem 0;
+ border: 1px solid rgb(var(--base-200));
+ border-width: 1px 0;
+ }
+ #jvb-selector .items-container {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ margin: 0;
+ }
+
+ .autocomplete-dropdown {
+ width: 100%;
+ background-color: var(--base-100);
+ padding: .5rem;
+ box-shadow: rgba(var(--base), var(--op-45)) var(--shdw);
+ }
+ li.autocomplete {
+ list-style: none;
+ display: inline-flex;
+ margin: .25rem;
+ min-height: var(--chip);
+ }
+
+ /** GALLERY **/
+ img[data-gallery] {
+ cursor: pointer;
+ }
+ dialog.gallery[open] {
+ --max: calc(100% - 2rem);
+ inset: 1rem;
+ margin: 0;
+ border: none;
+ width: 100%;
+ height: 100%;
+ max-height: var(--max);
+ max-width: var(--max);
+ border-radius: 0;
+ /*background-color: rgba(var(--base), var(--op-6));*/
+ background-color: transparent;
+ }
+ dialog.gallery > .wrap {
+ --wrap: nowrap;
+ position: relative;
+ overflow: hidden;
+ max-height: none;
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ width: 100%;
+ inset: 0;
+ }
+ .gallery .hint {
+ position: absolute;
+ top: 1rem;
+ left: 50%;
+ transform: translateX(-50%);
+ letter-spacing: .12em;
+ pointer-events: none;
+ z-index: 2;
+ animation: hint-fade 3s ease forwards;
+ }
+ @keyframes hint-fade {
+ 0% { opacity: 1; }
+ 60% { opacity: 1; }
+ 100% { opacity: 0; }
+ }
+ .gallery .controls {
+ --wrap: nowrap;
+ --align: flex-end;
+ --justify: space-between;
+ --gap: 0;
+ position: absolute;
+ inset: 0;
+ padding: 1rem;
+ z-index: 3;
+ pointer-events: none;
+ }
+ .gallery .controls button {
+ min-height: var(--chipchip);
+ pointer-events: all;
+ background: rgba(var(--base), var(--op-45));
+ border: 1px solid rgba(var(--contrast), var(--op-1));
+ color: rgba(var(--contrast), var(--op-5));
+ }
+ .gallery .controls button:hover,
+ .gallery .controls button:focus {
+ background: rgba(var(--base), var(--op-5));
+ color: rgb(var(--contrast));
+ }
+ .gallery .controls .cancel {
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+ }
+
+
+
+ dialog.gallery .cancel:focus,
+ dialog.gallery .cancel:hover {
+ background: rgba(var(--base),var(--op-4));
+ }
+
+
+ dialog.gallery .content {
+ position: relative;
+ overflow: hidden;
+ flex: 1;
+ display: flex;
+ }
+ dialog.gallery .image-left,
+ dialog.gallery .image-right {
+ position: absolute;
+ width: 0;
+ height: 0;
+ opacity: 0;
+ pointer-events: none;
+ left: var(--offScreen);
+ }
+
+ dialog.gallery .content .image {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
+ display: block;
+ transform-origin: center center;
+ will-change: transform;
+ transition: transform 0.15s ease-out;
+ touch-action: none;
+ user-select: none;
+ -webkit-user-drag: none;
+ cursor: default;
+ }
+ .gallery .image[style*="scale(1)"],
+ .gallery .image:not([style]) {
+ cursor: default;
+ }
+
+ dialog.gallery details {
+ position: absolute;
+ width: 100%;
+ max-width: none;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: rgba(var(--base),var(--op-45));
+ color: rgb(var(--contrast));
+ border-radius: 4px;
+ overflow: hidden;
+ z-index: 3;
+ }
+ dialog.gallery details:has(.item-info:empty) {
+ display: none;
+ }
+
+ dialog.gallery details summary {
+ padding: 0.75rem 1rem;
+ cursor: pointer;
+ user-select: none;
+ }
+
+ dialog.gallery details[open] .item-info {
+ padding: 0.75rem 1rem 1rem;
+ font-size: var(--txt-x-small);
+ }
+
+ dialog.gallery .counter {
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ background: rgba(var(--base),var(--op-4));
+ color: rgba(var(--contrast), var(--op-3));
+ padding: .4rem .8rem;
+ border-radius: 3px;
+ font-size: var(--txt-small);
+ letter-spacing: .1em;
+ z-index: 3;
+ }
+
+ dialog.gallery .favourite {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 3;
+ }
+
+ dialog.gallery .image {
+ opacity: 0;
+ transition: opacity .2s ease, transform .15s ease-out;
+ }
+
+ dialog.gallery .image[src] {
+ opacity: 1;
+ }
+
+ul.gallery {
+ display: flex;
+ flex-wrap: wrap;
+ margin: .2em!important;
+ padding: 0!important;
+ max-width: 100vw;
+}
+ ul.gallery::after {
+ content: '';
+ display: block;
+ flex-grow: 10;
+ }
+
+ ul.gallery li {
+ flex-grow: 1;
+ list-style: none;
+ height: 40vh;
+ margin: .2em;
+ overflow: hidden;
+ padding: 0;
+ max-width:49%;
+ }
+
+ ul.gallery figure {
+ min-width: 100%;
+ height: 100%;
+ }
+ ul.gallery figure.duotone img {
+ mix-blend-mode: multiply;
+ }
+
+
+
+ @media (max-aspect-ratio: 1/1) and (max-width: 480px) {
+ ul.gallery {
+ flex-direction: row;
+ }
+ ul.gallery li {
+ height: auto;
+ width: 100%;
+ }
+ ul.gallery figure {
+ width: 100%;
+ max-height: 75vh;
+ min-width: 0;
+ }
+ }
+ @media (max-aspect-ratio: 1/1) {
+ ul.gallery li {
+ height: 30vh;
+ }
+ }
+ @media (max-height: 480px) {
+ ul.gallery li {
+ height: 80vh;
+ }
+ }
+
+ ul.gallery.cut {
+ --gap: var(--txt-small);
+ display: grid;
+ max-width: var(--narrow);
+ grid: auto-flow 1fr/repeat(3, 1fr);
+ gap: var(--gap);
+ }
+ ul.gallery.cut img {
+ filter: var(--filterNone);
+ }
+ ul.gallery.cut:hover img {
+ filter: var(--filter);
+ }
+ ul.gallery.cut:hover img:hover {
+ filter: var(--filterNone);
+ }
+ ul.gallery.cut li:nth-of-type(4n +2) {
+ grid-area: 1/2/span 2/span 2;
+ clip-path: polygon(0 0,100% 0,100% 100%,calc(50% + var(--g)/4) 100%,0 calc(50% - var(--g)/4));
+ }
+ ul.gallery.cut li:nth-of-type(4n +3) {
+ grid-area: 2/1/span 2/span 2;
+ clip-path: polygon(0 0,calc(50% - var(--g)/4) 0,100% calc(50% + var(--g)/4),100% 100%,0 100%);
+ }
+
+
+
+
+/*** POPUPS: notifications, cart, queue ***/
+aside.main.main {
+ --wrap: nowrap;
+ --align: stretch;
+ --dir: column;
+ position: fixed;
+ top: var(--btnbtn);
+ bottom: var(--btn_);
+ width: min(500px, calc(100vw - 2rem));
+ padding: 0 0 var(--btn);
+}
+ aside.main.left {
+ border-radius: 0 var(--radius-outer) var(--radius-outer) 0;
+ left: var(--offScreen);
+ transition: left var(--trans-base);
+ }
+ aside.main.left.expanded {
+ left: 0;
+ }
+ aside.main.right {
+ border-radius: var(--radius-outer) 0 0 var(--radius-outer);
+ right: var(--offScreen);
+ transition: right var(--trans-base);
+ }
+ aside.main.right.expanded {
+ right: 0;
+ }
+ aside.main nav.tabs {
+ --gap: 0;
+ flex-shrink: 0;
+ }
+ aside.main > .wrap {
+ max-height: 100%;
+ overflow: hidden auto;
+ }
+ aside.main header {
+ --w: 2em;
+ background-color: rgb(var(--action-0));
+ color: rgb(var(--action-contrast));
+ padding: 1rem;
+ }
+ .tab-content header {
+ width: calc(100% + 2rem);
+ left: -1rem;
+ top: -1rem;
+ position: relative;
+ }
+ .main header .icon {
+ margin-right: 1em;
+ }
+ .main h3 {
+ font-size: var(--txt-large);
+ margin: .5rem 0;
+ }
+ aside.main nav.share {
+ --dir: row;
+ --align: center;
+ margin: 0;
+ border-bottom: 1px solid rgb(var(--base-200));
+ }
+ nav.share ul,
+ nav.share li,
+ nav.share a {
+ height: var(--chipchip);
+ }
+ nav.share a:hover {
+ background-color: rgb(var(--action-0));
+ color: rgb(var(--action-contrast));
+ }
+ aside.main h4,
+ aside.main .hint {
+ text-align: center;
+ }
+ aside.main .tab-content {
+ flex-shrink: 0;
+ }
+ aside.main .tab-content.active {
+ flex: 1;
+ overflow: hidden auto;
+ padding: 1rem;
+ }
+ .main section {
+ padding: 1rem;
+ }
+ .main section + section {
+ border-top: 1px solid rgb(var(--base-200));
+ }
+
+.qtoggle .count,
+.indicator {
+ position: absolute;
+ top: -.5em;
+ right: -.5em;
+ width: .75em;
+ height: .75em;
+ border-radius: 50%;
+}
+.qtoggle .indicator {
+ top: 0;
+ right: 0;
+}
+ .qtoggle .count {
+ right:unset;
+ left: .25rem;
+ top: .25rem;
+ font-size: var(--txt-small);
+ }
+ #queue.synced + .qtoggle .indicator {
+ background-color: rgb(var(--success));
+ }
+
+ #queue.pending + .qtoggle .indicator {
+ background-color: rgb(var(--warning));
+ animation: pulse 2s infinite;
+ }
+
+ .refresh.fetching .icon,
+ #queue.pending:not(.expanded) + .qtoggle .icon {
+ background-color: rgb(var(--action-0));
+ animation: spin 1s var(--trans-fn) infinite;
+ }
+.main.expanded + .qtoggle {
+ width: calc(min(500px, calc(100vw - 2rem)) - var(--btn));
}
-[data-status="completed"],
-.status.completed,
-.status-badge.consulted,
-.status-badge.treated,
-#queue .item .status.completed {
- background: var(--success);
- color: var(--successText);
+.main-actions .buttons:has(.expanded) {
+ width: calc(min(500px, calc(100vw - 2rem)));
+}
+.main.expanded + .qtoggle {
+ left: var(--btn);
+ border-bottom-right-radius: var(--radius-outer);
+}
+.main-actions .buttons:has(.expanded) {
+ right: 0;
+}
+.main-actions button.expanded {
+ border-bottom-left-radius: var(--radius-outer);
+ width: 100%;
+}
+.buttons:has(.expanded) > button:not(.expanded) {
+ display: none;
}
-[data-status="failed"],
-.status.failed,
-.status-badge.error,
-#queue .item .status.failed {
- background: var(--error);
- color: var(--errorText);
+.main nav.filters {
+ width: 100%;
+ height: var(--chipchip);
+ --justify: flex-start;
+ --align: flex-end;
}
+.main nav.filters li {
+ overflow: visible;
+}
+.main .btn + label {
+ min-height: var(--chip);
+ min-width: var(--chip);
+ overflow: visible;
+}
+.btn + label .indicator:not(:empty) {
+ font-size: var(--txt-small);
+ background-color: rgb(var(--base));
+ border: 1px solid rgb(var(--contrast));
+ width: 1.75em;
+ height: 1.75em;
+ padding: .3em;
+}
+
+.main > .header {
+ border-bottom: 1px solid rgb(var(--base-200));
+ padding: 1rem 0;
+ flex-shrink: 0;
+}
+.main .item-grid {
+ flex: 1;
+ overflow: hidden auto;
+ overflow-anchor: none;
+ padding: .5rem 2rem;
+ --gap: .5rem;
+}
+.queue-actions {
+ flex-shrink: 0;
+ border-top: 1px solid rgb(var(--base-200));
+}
+.queue-actions button {
+ width: 100%;
+}
+
+.main .item {
+ background-color: rgb(var(--base-50));
+ padding: 15px;
+ border-radius: var(--radius);
+ box-shadow: var(--shdw-none);
+ font-size: var(--txt-x-small);
+}
+.main .item .header {
+ position: relative;
+ padding: .25rem 0;
+}
+.main .item .actions {
+ width: 100%;
+}
+.main .item button {
+ min-height: var(--chip);
+ font-size: var(--txt-x-small);
+ --w: var(--txt-x-small);
+}
+.main .item .time {
+ padding: .5rem 0;
+ font-size: var(--txt-small);
+ border: 1px solid rgb(var(--base-200));
+ border-width: 1px 0;
+ margin: .25rem 0;
+}
+.main .item .progress .details {
+ text-align: right;
+ font-size: var(--txt-small);
+ width: 100%;
+}
+/*** MAIN ACTIONS ***/
+.main-actions .buttons {
+ transition: width var(--trans-base), right var(--trans-base);
+ right: .5rem;
+ width: var(--btn);
+ margin: 0;
+}
+.attn {
+ animation: pulse-color 5s infinite;
+ animation-delay: 1s;
+}
+.attn.expanded {
+ animation: none;
+}
+
+/********************************************************
+CALLOUTS
+********************************************************/
+.callalt.callalt,
+.callout.callout {
+ padding: 2rem;
+ margin: 0;
+ max-width: none;
+ grid-column: full;
+}
+
+@media (min-width: 768px){
+ .callout.callout {
+ padding: 2rem 20vw;
+ }
+}
+
+.callout.callout {
+ background-color: rgb(var(--action-0));
+ color: rgb(var(--action-contrast));
+}
+
+.callalt.callalt {
+ background-color: rgb(var(--secondary-0));
+ color: var(--secondary-contrast);
+}
+
+.callalt :is(h1, h2, h3, h4, h5, h6),
+.callout :is(h1, h2, h3, h4, h5, h6) {
+ font-family: var(--body);
+ font-weight: var(--fw-b-bold);
+ margin: 1rem 0 0;
+ width: 100%;
+}
+
+.callout a {
+ background-color: rgb(var(--action-contrast));
+ padding: 0 .125rem;
+ border-radius: 4px;
+}
+/********************************************************
+WP BLOCKS
+********************************************************/
+/** MEDIA TEXT **/
+.media-text > * {
+ flex: 1;
+}
+/** COVER **/
+.cover {
+ --color: rgba(var(--action-0), var(--op-5));
+ position: relative;
+ overflow: hidden;
+ min-height: 60vh;
+ padding: var(--btn);
+}
+
+ .cover:not(.duotone)::before {
+ content: '';
+ /*z-index: var(--coverIndex);*/
+ background-color: var(--dark-0);
+ /*mix-blend-mode: var(--coverBlend);*/
+ /*background-position: center;*/
+ /*background-repeat: no-repeat;*/
+ /*background-size: cover;*/
+ }
+ .cover .overlay {
+ background-color: var(--dark-0);
+ }
+ .overlay.op-1 {
+ opacity: var(--op-1);
+ }
+ .overlay.op-2 {
+ opacity: var(--op-2);
+ }
+ .overlay.op-3 {
+ opacity: var(--op-3);
+ }
+ .overlay.op-4 {
+ opacity: var(--op-4);
+ }
+ .overlay.op-45 {
+ opacity: var(--op-45);
+ }
+ .overlay.op-5 {
+ opacity: var(--op-5);
+ }
+ .overlay.op-6 {
+ opacity: var(--op-6);
+ }
+ .cover:has(.overlay)::before {
+ display: none;
+ }
+.cover .overlay,
+.cover:not(.duotone)::before,
+.cover > video,
+.cover > img {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ max-width: none!important;
+ height: 100%;
+ margin: 0;
+}
+.cover > img,
+.cover > video {
+ mix-blend-mode: luminosity;
+ max-width: none!important;
+ width: 100%!important;
+}
+.cover .overlay,
+.cover:not(.duotone)::before {
+ z-index: 2;
+ background-color: var(--color);
+ mix-blend-mode: color;
+}
+
+
+.cover .content {
+ z-index: 5;
+ position: relative;
+ overflow: hidden auto;
+ width: max-content;
+ height: max-content;
+ max-width:100%;
+ max-height: 100%;
+}
+
+.cover > img {
+ /*z-index: 1;*/
+ /*opacity: .5;*/
+ /*mix-blend-mode: luminosity;*/
+ object-fit: cover;
+}
+
+@media (min-width: 768px) {
+ .cover > img {
+ /*opacity: .33;*/
+ }
+}
+/** IMAGE **/
+figure {
+ overflow: hidden;
+ position: relative;
+}
+figure:is(.op-1,.op-2,.op-3,.op-4,.op-5,.op-6,.op-45)::before {
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ content: '';
+}
+ figure.op-1::before {
+ opacity: var(--op-1);
+ }
+ figure.op-2::before {
+ opacity: var(--op-2);
+ }
+ figure.op-3::before {
+ opacity: var(--op-3);
+ }
+ figure.op-45::before {
+ opacity: var(--op-45);
+ }
+ figure.op-4::before {
+ opacity: var(--op-4);
+ }
+ figure.op-5::before {
+ opacity: var(--op-5);
+ }
+ figure.op-6::before {
+ opacity: var(--op-6);
+ }
+
+ figure.action-0::before {
+ background-color: rgb(var(--action-0));
+ }
+ figure.action-50::before {
+ background-color: rgb(var(--action-50));
+ }
+ figure.action-100::before {
+ background-color: rgb(var(--action-100));
+ }
+ figure.action-200::before {
+ background-color: rgb(var(--action-200));
+ }
+ figure.secondary-0::before {
+ background-color: rgb(var(--secondary-0));
+ }
+ figure.secondary-50::before {
+ background-color: rgb(var(--secondary-50));
+ }
+ figure.secondary-100::before {
+ background-color: rgb(var(--secondary-100));
+ }
+ figure.secondary-200::before {
+ background-color: rgb(var(--secondary-200));
+ }
+ figure.base::before {
+ background-color: rgb(var(--base));
+ }
+ figure.base-50::before {
+ background-color: rgb(var(--base-50));
+ }
+ figure.base-100::before {
+ background-color: rgb(var(--base-100));
+ }
+ figure.base-200::before {
+ background-color: rgb(var(--base-200));
+ }
+ figure.contrast::before {
+ background-color: rgb(var(--contrast));
+ }
+ figure.contrast-50::before {
+ background-color: rgb(var(--contrast-50));
+ }
+ figure.contrast-100::before {
+ background-color: rgb(var(--contrast-100));
+ }
+ figure.contrast-200::before {
+ background-color: rgb(var(--contrast-200));
+ }
+
+.bg-fixed {
+ background-attachment: fixed;
+}
+.bg-repeat.bg-repeat {
+ background-repeat: repeat;
+ background-size: 33vw;
+}
+[data-bg-img] {
+ background-size: cover;
+ background-repeat: no-repeat;
+}
+/** BLOCKQUOTE **/
+blockquote {
+ margin-left: 10vw;
+ position: relative;
+ padding: var(--btn);
+}
+ blockquote .icon-quotes-fi {
+ position: absolute;
+ top: var(--btn);
+ left: calc((10vw + var(--btn)) * -1);
+ --w: 10vw;
+ opacity: var(--op-1);
+ }
+
+blockquote cite {
+ padding: 15px 0 0 12px;
+ margin: 0 0 0 150px;
+ z-index: 1;
+}
+
+blockquote.pull {
+ background-color: unset;
+ border-radius: 0;
+ margin: 4rem auto;
+ padding: 3rem;
+ box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-down), rgba(var(--base),var(--op-45)) var(--shdw-up);;
+}
+
+blockquote.pull cite {
+ margin: 0;
+}
+/** QUERY **/
+ul.loop {
+ max-width: none;
+ padding: var(--sp4) var(--sp1);
+}
+.loop :is(h1,h2,h3,h4,h5,h6) {
+ margin: .5em 0;
+}
+.loop :is(h1,h2,h3,h4,h5,h6):has(+ time) {
+ margin-bottom: 0;
+}
+ .loop :is(h1,h2,h3,h4,h5,h6) + time {
+ font-size: var(--txt-x-small);
+ margin-top: 0;
+ }
+.loop li {
+ list-style: none;
+}
+.loop p:has(.read-more) {
+ text-align: right;
+}
+
+.loop li > figure {
+ /*float: left;*/
+ /*margin-right: var(--chip_);*/
+ /*margin-top: 0;*/
+ /*max-width: 30%;*/
+ aspect-ratio: 1;
+}
+
+.loop.scroll {
+ display: flex;
+ flex-wrap: nowrap;
+ overflow-x: auto;
+ touch-action: pan-x;
+ margin:0!important;
+}
+ a:has(img) {
+ display:block;
+ padding: .25rem;
+ }
+
+
+.no-results p,
+.no-results {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+
+/** TODO: LIST OVERRIDES **/
+/*********************************************************
+DIRECTORY
+*********************************************************/
+.directory-list > ul {
+ max-width: none;
+ margin-left: 0!important;
+}
+.directory-list .image {
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: center;
+}
+ .directory-list img {
+ width: 70px;
+ }
+.directory-list h3 {
+ margin: 0;
+ text-align: center;
+ font-weight: var(--fw-h-bold);
+ position: sticky;
+ font-size: var(--txt-enormous);
+ width: 100%;
+ top: var(--btn);
+ left: 0;
+ color: rgb(var(--base));
+ text-shadow: rgb(var(--base-200)) 1px 1px 0;
+ user-select: none;
+}
+ .directory-list >ul > li {
+ padding: 2rem;
+ align-items: flex-start;
+ }
+ .directory-list >ul > li:nth-of-type(even) {
+ background-color: rgb(var(--base-100));
+ }
+
+ /** The letter's list **/
+ .directory-list ul ul {
+ width: 100%;
+ }
+ .directory-list ul ul li {
+ padding: .35rem .5rem;
+ }
+ .directory-list ul ul li:nth-of-type(even) {
+ background-color: rgb(var(--base-100));
+ }
+ .directory-list ul li:nth-of-type(even) ul li:nth-of-type(even) {
+ background-color: rgb(var(--base-50));
+ }
+ @media (min-width: 768px) {
+ .directory-list h3 {
+ width: 20vw;
+ }
+ .directory-list ul ul {
+ min-height: var(--txt-enormous);
+ }
+ .directory-list >ul > li {
+ padding: 2rem 10vw;
+ }
+ }
/******************************************************************
LOADING
@@ -2313,9 +3688,9 @@
height: fit-content;
width: min(400px, 60vw);
border-radius: var(--radius-outer);
- background-color: rgba(var(--base-rgb),var(--op-4));
+ background-color: rgba(var(--base),var(--op-4));
padding: 2rem;
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
position: relative;
}
@@ -2330,7 +3705,7 @@
}
.loading[open] i.icon {
- background-color: var(--action-0);
+ background-color: rgb(var(--action-0));
}
dialog.loading[open] i.icon {
@@ -2338,7 +3713,7 @@
}
dialog.loading[open] h3 {
- color: var(--contrast);
+ color: rgb(var(--contrast));
margin: 2rem 1rem auto !important;
font-size: var(--txt-large);
width: -moz-fit-content;
@@ -2362,1697 +3737,12 @@
width: 12px;
height: 12px;
border: 2px solid transparent;
- border-top: 2px solid var(--action-50);
+ border-top: 2px solid rgb(var(--action-50));
border-radius: 50%;
animation: spin 1s var(--trans-fn) infinite;
}
-/*****************************************************************************
-MENU
-*****************************************************************************/
-.toggle-details {
- gap: 2px;
-}
-
-body.menu_item #top {
- z-index: var(--z-4);
- position: relative;
-}
-
-section .toggle-details {
- position: absolute;
- right: 0;
- top: 5rem;
-}
-
-[data-toggle=all] {
- position: fixed;
- bottom: calc(var(--btn_) + var(--btn) + .5rem);
- right: 0;
- z-index: var(--z-4);
- background-color: var(--action-0);
- color: var(--action-contrast);
-}
-
-[data-toggle] {
- z-index: var(--z-1);
-}
-
-body:has(#queue[hidden]) [data-toggle=all] {
- left: 1rem;
-}
-
-dialog:not([open]).col,
-dialog:not([open]).row {
- display: none;
-}
-
-@media (min-width:768px) {
- section .toggle-details {
- right: -10%;
- }
-}
-
-/********************************************
-TYPE TEXT
-********************************************/
-.typeText::after {
- content: '|';
- display: inline-block;
- margin-left: 0;
- animation: blink .75s step-end infinite;
-}
-
-@keyframes blink {
- from, to { opacity: 1; }
- 50% { opacity: 0; }
-}
-
-/**************************************************
-POPUPS: toast, cart, queue
-**************************************************/
-aside.main {
- --wrap: nowrap;
- --align: stretch;
- position: fixed;
- top: var(--btnbtn);
- bottom: var(--btn_);
- width: min(500px, calc(100vw - 2rem));
- background-color: var(--base);
- z-index: var(--z-5);
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
- padding: 1rem 1rem var(--btn);
- overflow: hidden auto;
-}
-aside.main.referral {
- padding-top: 0;
-}
-aside.main.referral nav.tabs {
- padding: 1rem 0;
- background-color:var(--base);
- height: max-content;
- min-height: var(--btn);
-}
-
-.qtoggle {
- z-index: var(--z-6);
- position: fixed;
- bottom: var(--btn_);
- width: var(--btn);
- height: var(--btn);
- background-color: rgba(var(--base-rgb),var(--op-4));
- color: var(--contrast);
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
- transition: var(--trans-size), var(--trans-color);
-}
-
-.qtoggle:hover,
-.qtoggle:focus {
- background-color: rgba(var(--action-rgb),var(--op-6));
- color: var(--action-contrast);
-}
-
-.qtoggle:disabled,
-.qtoggle:disabled:hover,
-.qtoggle:disabled:focus {
- opacity: .5;
- background-color: rgba(var(--base-rgb),var(--op-3));
- color: var(--contrast);
-}
-
-/******************
-CART
-******************/
-.toggle-cart {
- right: 0;
- border-radius: 4px 4px 4px var(--radius-outer);
-}
-
-body:has(#cart.expanded) .toggle-cart .icon {
- display: none;
-}
-
-aside#cart {
- padding-bottom: 6rem;
-}
-
-#cart form {
- max-height: 100%;
- overflow: hidden auto;
-}
-
-#cart nav.tabs {
- z-index: var(--z-6);
- top: 0;
-}
-
-#cart table {
- height: auto;
-}
-
-#cart th {
- padding: 0 1.5rem;
-}
-
-#cart table th:first-of-type {
- width: 100%;
-}
-
-#cart nav.tabs {
- position: sticky;
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
-}
-
-#cart button[data-tab] {
- flex: 1;
- border-radius: 0;
-}
-
-#cart form > *:not(.tabs) {
- max-width: 90%;
- margin: 0 auto;
-}
-
-#cart form .empty p {
- margin: .5rem 0!important;
-}
-
-#cart .cart-total.cart-total {
- --gap: 0 1rem;
- padding-right: 1rem;
- position: absolute;
- bottom: var(--btn);
- width: 100%;
- max-width: 100%;
- background-color: rgba(var(--base-rgb),var(--op-6));
- z-index: var(--z-6);
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-up);
-}
-
-.cart-total p {
- --gap: 2rem;
- max-width: 100%;
- margin: 0;
-}
-
-.cart-total p span {
- width: 6rem;
- display: inline-block;
- text-align: right;
-}
-
-.cart-total p + p {
- font-weight: bold;
-}
-
-.cart-items .total {
- font-weight: bold;
-}
-
-#cart .restored {
- background-color: rgba(var(--action-rgb), var(--op-3));
- border-radius: var(--radius-outer);
- padding: 1rem;
-}
-
-.restored h3 {
- font-size: var(--txt-medium);
- margin: 0;
-}
-
-.restored p {
- margin: 0;
-}
-
-.restored .row {
- --gap: 0;
- --wrap:nowrap;
- --w: 1em;
-}
-
-/******************
-TOAST
-******************/
-.toasts {
- position: fixed;
- top: 4rem;
- right: -350px;
- z-index: 1000;
- width: 350px;
-}
-
-.toast {
- background-color: rgba(var(--base-rgb),var(--op-6));
- border-left: 4px solid var(--action-0);
- padding: 1rem;
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
- left: 0;
- position: relative;
- opacity: 0;
- transition: left .3s, opacity .3s;
-}
-
-.toast.success {
- border-left-color: var(--success);
-}
-
-.toast.error {
- border-left-color: var(--error);
-}
-
-.toast.info {
- border-left-color: var(--warning);
-}
-
-.toast.show {
- left: calc(-350px - 1rem);
- opacity: 1;
-}
-
-.toast.hiding {
- left: 0;
- opacity: 0;
-}
-
-.toast-content p {
- margin: 0;
-}
-
-.close-toast {
- background: none;
- border: none;
- font-size: 1.25rem;
- cursor: pointer;
- opacity: .5;
- transition: opacity .2s;
- color: inherit;
-}
-
-.close-toast:hover {
- opacity: 1;
-}
-
-/******************
-QUEUE
-******************/
-#queue#queue {
- width: min(500px, calc(100vw - 2rem));
-}
-
-#queue > * {
- max-width: 100%;
-}
-
-.qtoggle {
- left: 0;
- border-radius: 4px 4px var(--radius-outer) 4px;
-}
-
-.qtoggle.expanded {
- left: var(--btn);
- width: min(calc(500px - var(--btn)), calc(100vw - 2rem - var(--btn)));
-}
-
-.qtoggle.saving .icon {
- background-color: var(--action-0);
- animation: spin .87s var(--trans-fn) infinite;
-}
-
-#queue .status-actions {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- z-index: var(--z-2);
-}
-
-#queue .status-actions .popup {
- position: absolute;
- z-index: -1;
- width: max-content;
- max-width: 300px;
- background-color: var(--action-50);
- color: var(--action-contrast);
- border-radius: var(--radius);
- padding: .25em .75em;
- top: 1rem;
- left: -100vw;
- transition: left var(--trans-base);
-}
-
-aside#queue .popup::before{
- content: '';
- width: 10px;
- height: 10px;
- transform: rotate(-45deg);
- background-color: var(--action-50);
- z-index: -1;
- left: -5px;
- position: absolute;
- top: calc(50% - 5px);
-}
-
-.expanded#queue .status-actions .popup.showing {
- left: calc(100% + 1em);
-}
-
-#queue .status-actions .popup.showing {
- left: calc(200vw + var(--btn_));
- max-width: 75vw;
-}
-
-/** BADGES **/
-.refresh .countdown,
-#queue .item .status,
-.filter .count,
-.qtoggle .count,
-.qtoggle .indicator {
- z-index: var(--z-3);
- --offset: 0;
- position: absolute;
- top: var(--offset);
- background-color: rgba(var(--base-rgb),var(--op-3));
-}
-
-.expanded + .qtoggle .indicator,
-.expanded + .qtoggle .count {
- --offset: .25rem;
-}
-
-/* Status indicator */
-.qtoggle .indicator {
- right: var(--offset);
- width: .75rem;
- height: .75rem;
- border-radius: 50%;
-}
-
-aside#queue.synced + .qtoggle .indicator {
- background-color: var(--success);
-}
-
-aside#queue.pending + .qtoggle .indicator {
- background-color: var(--warning);
- animation: pulse 2s infinite;
-}
-
-.refreshNow.fetching .icon,
-aside#queue.pending:not(.expanded) + .qtoggle .icon {
- background-color: var(--action-0);
- animation: spin 1s var(--trans-fn) infinite;
-}
-
-/* Status count badge */
-
-/*.refresh .countdown {*/
-/* --justify:center;*/
-/* --align: center;*/
-/* --offset: 0;*/
-/* left: .25rem;*/
-/* margin: 0 3px;*/
-/* border-radius: 50%;*/
-/* background-color: var(--base);*/
-/* width: 1em;*/
-/* height: 1em;*/
-/*}*/
-.refresh .countdown,
-.qtoggle .count {
- --align: center;
- --justify: center;
- left: var(--offset);
- min-width: 1.25rem;
- height: 1.25rem;
- padding: 0 4px;
- color: var(--contrast);
- border-radius: var(--radius);
- font-size: var(--txt-x-small);
-}
-
-#queue:has(.empty-queue) + .qtoggle .count {
- display: none;
-}
-
-aside#queue .header {
- padding: 15px;
- border-bottom: 1px solid var(--base-200);
- flex-shrink: 0;
- --height: max-content;
- width: 100%;
-}
-
-.qitems {
- flex: 1;
- width: 100%;
- overflow: hidden auto;
- overflow-anchor: none;
- padding: .5rem 2rem;
- --gap: .5rem;
-}
-
-.qitems .item {
- width: 100%;
-}
-
-.qitems button {
- --height: max-content;
-}
-
-aside#queue h3 {
- margin: 0;
- font-size: 16px;
- color: var(--contrast);
-}
-
-#queue .filters {
- padding: 1rem 0 0;
- width: 100%;
-}
-#queue .filters .btn + label {
- width: max-content;
- position: relative;
- height: var(--chip_);
- font-size: var(--txt-x-small);
- font-weight: var(--fw-h-light);
- box-shadow: var(--shdw-none);
-}
-#queue .filters label .count {
- width: 1em;
- height: 1em;
- position: absolute;
- top: -8px;
- right: -4px;
- background: var(--base-100);
- border-radius: 50%;
- z-index: 5;
-}
-#queue .filters label .count:empty {
- display: none;
-}
-#queue .failed .bar,
-#queue .failed_permanent .bar {
- background-color: var(--error);
- opacity: .2;
-}
-#queue span.completed {
- margin-left: auto;
-}
-
-#queue .filters .filter {
- background-color: transparent;
- white-space: nowrap;
- font-size: var(--txt-x-small);
-}
-
-#queue .filters .filter.active {
- background: var(--base-200);
- border-color: transparent;
-}
-
-#queue .filter:hover,
-#queue .filter:focus {
- background-color: var(--action-0);
- color: var(--action-contrast);
-}
-
-#queue .progress .row.btw {
- --justify: flex-end;
-}
-#queue .progress .details {
- font-size: var(--txt-small);
-}
-
-/* Filter count badge */
-.filter .count {
- --offset: -8px;
- right: var(--offset);
- background: var(--base-200);
- color: var(--contrast-200);
- border-radius: 10px;
- min-width: 18px;
- height: 18px;
- font-size: 10px;
-}
-
-.filter .count:empty {
- display: none;
-}
-
-/* Empty state */
-.empty-queue {
- height: 100px;
- color: var(--contrast-200);
- font-size: var(--txt-x-small);
- font-style: italic;
-}
-
-.refresh .countdown:not(.counting),
-aside#queue:has(.empty-queue) .refresh .count {
- display: none;
-}
-
-/* Queue items */
-#queue .item {
- padding: 15px;
- background: var(--base-100);
- border-radius: var(--radius);
- transition: all .2s ease;
- box-shadow: var(--shdw-none);
-}
-
-#queue .item:hover {
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
-}
-
-#queue .item .header {
- position: relative;
- padding: .25rem 0;
-}
-
-#queue .item .type {
- font-size: var(--txt-x-small);
-}
-
-#queue .item .status {
- --w: 1.3em;
- --gap: 0;
- --justify:center;
- --align: center;
- --offset: -1.2rem;
- aspect-ratio: 1;
- right: var(--offset);
- border-radius: 50%;
- color: var(--contrast-200);
- background-color: var(--base-50);
- border: 1px solid var(--base-200);
- width: 2em;
- height: 2em;
-}
-
-
-#queue .item .status.completed:hover {
- color: var(--contrast-200);
-}
-
-#queue .item button {
- font-size: 16px;
- padding: 0;
- line-height: 1;
- opacity: .5;
- min-height: 0;
- transition: opacity .2s;
-}
-
-#queue .item button:hover {
- opacity: 1;
-}
-
-/* Item details */
-#queue .item .info {
- margin-top: 8px;
- font-size: var(--txt-x-small);
-}
-
-#queue .item .info .time {
- --gap: 7px;
- font-size: 10px;
-}
-
-/* Item actions */
-#queue .item .actions {
- --gap: 8px;
- margin-top: 1rem;
-}
-
-#queue .item .actions button {
- padding: 6px 12px;
- font-size: 12px;
- background: var(--base-200);
- border: none;
- border-radius: 4px;
- cursor: pointer;
- transition: all .2s;
- color: var(--contrast);
-}
-
-#queue .item .actions .retry {
- background-color: var(--secondary-200);
- color: var(--secondary-contrast);
-}
-
-#queue .item .actions button:hover {
- opacity: .9;
-}
-
-/* Queue actions footer */
-.queue-actions {
- padding: .5rem 0;
- border-top: 1px solid var(--base-200);
- flex-shrink: 0;
-}
-
-.queue-actions button {
- --height: max-content;
- padding: .75rem;
- width: 100%;
- font-size: var(--txt-x-small);
-}
-
-/* Refresh area */
-.status-actions > .refresh {
- position: relative;
- font-size: var(--txt-x-small);
-}
-
-
-.refreshNow {
- width: var(--btn);
- height: var(--btn);
-}
-
-.refreshNow:hover {
- background: var(--base-200);
- color: var(--contrast-200);
-}
-
-.icon.refresh {
- --w: 18px;
-}
-
-/**************************************************
-DELAY
-**************************************************/
-.item-grid, #queue {
- counter-reset: delay-counter;
-}
-
-.item {
- counter-increment: delay-counter;
-}
-
-.item .progress .fill::after {
- --delay: calc(counter(delay-counter) * .1s);
-}
-
-/**************************************************
-PROGRESS
-**************************************************/
-.progress .bar {
- height: 6px;
- display: block;
- border-radius: 6px;
- overflow: hidden;
- background: var(--base-200);
- position: relative;
-}
-
-.progress .fill {
- height: 100%;
- background: var(--action-0);
- border-radius: 6px;
- width: 0;
- transition: width .3s ease;
-}
-
-.progress .details {
- margin-top: 5px;
- font-size: var(--txt-x-small);
- color: var(--contrast);
- text-align: center;
- padding: .25rem 0;
-}
-
-.progress .details:empty {
- display: none;
-}
-
-.queued .fill::after,
-.pending .fill::after,
-.processing .fill::after,
-.uploading .fill::after {
- --delay: 0s;
- content: '';
- position: absolute;
- top: 0;
- left: -50%;
- width: 30%;
- height: 100%;
- background: linear-gradient(
- 90deg,
- rgba(255, 255, 255, 0) 0%,
- rgba(255, 255, 255, .225) 50%,
- rgba(255, 255, 255, 0) 100%
- );
- animation: shimmer 2.5s infinite linear var(--delay);
-}
-
-/**************************************************
-ACTIONS
-**************************************************/
-.additional-actions.additional-actions {
- padding: 0;
- background-color: transparent;
-}
-
-.additional-actions .buttons {
- position: fixed;
- bottom: var(--btn_);
- right: 1rem;
- margin: 0;
- --gap: 1rem;
- z-index: var(--z-6);
- width: fit-content;
-}
-
-.additional-actions .buttons button {
- height: var(--btn);
- width: var(--btn);
- background-color: rgba(var(--base-rgb),var(--op-4));
- color: var(--contrast);
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
-}
-
-.additional-actions .buttons button:hover {
- background-color: var(--action-0);
- color: var(--action-contrast);
-}
-
-.additional-actions .buttons button:disabled,
-.additional-actions .buttons button:disabled:hover,
-.additional-actions .buttons button:disabled:focus {
- opacity: .5;
- background-color: rgba(var(--base-rgb),var(--op-3));
- color: var(--contrast);
-}
-
-.additional-actions .buttons button:last-of-type {
- border-radius: 4px 4px 4px var(--radius-outer);
-}
-
-aside.left {
- transition: left var(--trans-base);
- left: var(--offScreen);
- border-radius: 0 var(--radius-outer) var(--radius-outer) 0;
-}
-
-aside.left.expanded {
- left: 0;
-}
-
-aside.right {
- transition: right var(--trans-base);
- right: var(--offScreen);
- border-radius: var(--radius-outer) 0 0 var(--radius-outer);
-}
-
-aside.right.expanded {
- right: 0;
-}
-
-aside.right.expanded button.close {
- position: sticky;
- bottom: calc(var(--btn) * -1);
- left: 0;
- border-bottom-left-radius: var(--radius-outer);
- width: var(--btn);
- height: var(--btn);
-}
-
-.additional-actions .buttons:has(.expanded) button:not(.expanded) {
- display: none;
-}
-
-.additional-actions .buttons:has(.expanded){
- right: 0;
-}
-.additional-actions .buttons button {
- transition: right var(--trans-base), var(--trans-size);
-}
-.additional-actions .buttons .expanded {
- width: calc(min(500px, calc(100vw - 2rem)));
- background-color: var(--base);
-}
-
-.additional-actions .buttons button:hover,
-.additional-actions .buttons .expanded:hover {
- background-color: var(--action-0);
- color: var(--action-contrast);
-}
-
-[type=submit] {
- width: 100%;
- height: var(--btn);
- background-color: var(--action-0);
- color: var(--action-contrast);
- box-shadow: var(--shdw-none);
- font-weight: bold;
-}
-
-[type=submit]:hover {
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
- border: 2px solid var(--action-0);
- color: var(--action-0);
- background-color: var(--action-contrast);
-}
-
-aside nav.tabs {
- position: sticky;
- bottom: unset;
- top: 0;
- left: 0;
- right: 0;
-}
-
-aside .tab-content.active {
- padding: 1rem;
- min-height: 100%;
-}
-
-aside header h3 {
- font-size: var(--txt-medium);
- margin: 1rem 0;
- text-align: center;
-}
-
-aside header p {
- margin: .25rem 0;
- text-align: center;
-}
-
-aside h4 {
- font-size: var(--txt-x-small);
- margin: 1rem 0 0 0;
-}
-
-code {
- width: 100%;
- margin: .5rem;
- padding: .5rem;
- user-select: all;
- text-align: center;
- border-radius: 4px;
- background-color: var(--base-200);
- border: 1px solid var(--contrast-200);
-}
-
-.restore-form {
- background-color: rgba(var(--action-rgb), var(--op-3));
- border: 1px solid var(--action-200);
- padding: .5rem;
- border-radius: var(--radius-outer);
- margin: 1rem 2rem;
-}
-
-.restore-form h3 {
- text-align: center;
- margin: 1rem 0 0;
- font-size: var(--txt-medium);
-}
-
-.restore-form p {
- margin: .5rem 0;
-}
-
-.fstatus {
- z-index: var(--z-5);
- background-color: rgba(var(--base-rgb),var(--op-6));
- border-radius: 4px;
- padding: 0 .5rem;
- position: fixed;
- top: var(--btnbtn);
- right: 1rem;
- --w: 1em;
- box-shadow:var(--shdw);
- display:flex;
- flex-wrap: nowrap;
- gap: 1rem;
-}
-@media (min-width: 768px) {
- .fstatus {
- right:calc(var(--btn_) + 1rem);
- bottom: 0;
- top: unset;
- }
- body:has(.fixed.bottom) .fstatus {
- bottom: var(--btn_);
- }
-}
-
-.fstatus .spinner {
- display: none;
-}
-
-.fstatus.loading .spinner {
- display: inline-block;
-}
-
-.fstatus p {
- margin: 0;
- padding: .25rem;
-}
-
-/**************************************************
-CALLOUT SECTIONS
-**************************************************/
-.callalt.callalt,
-.callout.callout {
- padding: 2rem;
- margin: 0;
- max-width: none;
- grid-column: full;
-}
-
-@media (min-width: 768px){
- .callout.callout {
- padding: 2rem 20vw;
- }
-}
-
-.callout.callout {
- background-color: var(--action-0);
- color: var(--action-contrast);
-}
-
-.callalt.callalt {
- background-color: var(--secondary-0);
- color: var(--secondary-contrast);
-}
-
-.callalt :is(h1, h2, h3, h4, h5, h6),
-.callout :is(h1, h2, h3, h4, h5, h6) {
- font-family: var(--body);
- font-weight: var(--fw-b-bold);
- margin: 1rem 0 0;
- width: 100%;
-}
-
-.callout a {
- background-color: var(--action-contrast);
- padding: 0 .125rem;
- border-radius: 4px;
-}
-
-.attn {
- animation: pulse-color 5s infinite;
- animation-delay: 1s;
-}
-.media-text > div,
-.media-text figure {
- width: 100%;
- margin: 0;
-}
-
-@media (min-width:768px ){
- .media-text {
- --wrap: nowrap;
- }
-}
-
-.media-text > div {
- max-width: var(--content);
- margin: 0 auto;
- padding: 2rem;
-}
-
-.timeline.terms ul,
-.timeline.terms {
- list-style: none;
- display: inline-flex;
- flex-wrap: wrap;
- justify-content: space-between;
- align-items: flex-start;
-}
- .timeline.terms ul {
- gap: 1rem;
- }
-
-.timeline.terms > li {
- width: 100%;
-}
-
-@media (min-width: 768px) {
- .timeline.terms > li {
- width: 50%;
- }
-}
-
-/**********************************
-GALLERY
-**********************************/
-dialog.gallery[open] {
- position: fixed;
- inset: 1rem;
- margin: 0;
- border: none;
- width: calc(100% - 2rem);
- height: calc(100% - 2rem);
- padding: 0;
- background: rgba(var(--base-rgb),var(--op-6));
- display: flex;
- align-items: center;
- justify-content: center;
- overflow: hidden;
- backdrop-filter: blur(3px);
- z-index: var(--z-9);
- max-height: 100vh;
- max-width: 100vw;
-}
-
-.gallery .controls {
- order: 3;
- justify-content: flex-end;
- --height: 2rem;
-}
-
-.gallery .controls .cancel {
- order: 3;
-}
-
-dialog.gallery::backdrop {
- background: rgba(var(--base-rgb), var(--op-4));
-}
-
-dialog.gallery .wrap {
- position: relative;
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- overflow: hidden;
-}
-
-dialog.gallery .cancel:hover {
- background: rgba(var(--base-rgb),var(--op-4));
-}
-
-dialog.gallery .content {
- position: relative;
- flex: 1 1 auto;
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- overflow: hidden;
-}
-
-dialog.gallery .content .image {
- max-width: 90vw;
- max-height: 85vh;
- object-fit: contain;
- transition: transform 0.15s ease-out;
- touch-action: none;
-}
-
-dialog.gallery .image-left,
-dialog.gallery .image-right {
- position: absolute;
- opacity: 0;
- pointer-events: none;
-}
-
-dialog.gallery details {
- position: absolute;
- bottom: 2rem;
- left: 50%;
- transform: translateX(-50%);
- width: calc(100% - 2rem);
- max-width: 600px;
- background: rgba(0,0,0,0.45);
- color: #fff;
- border-radius: 4px;
- overflow: hidden;
- z-index: 10;
-}
-
-dialog.gallery details summary {
- padding: 0.75rem 1rem;
- cursor: pointer;
- user-select: none;
-}
-
-dialog.gallery details[open] .item-info {
- padding: 1rem;
-}
-
-dialog.gallery .counter {
- position: absolute;
- bottom: 1rem;
- left: 1rem;
- background: rgba(var(--base-rgb),var(--op-4));
- color: var(--contrast);
- padding: 0.4rem 0.8rem;
- border-radius: 3px;
- font-size: 0.85rem;
- z-index: 10;
-}
-
-dialog.gallery .favourite {
- position: absolute;
- top: 1rem;
- left: 1rem;
- z-index: 10;
-}
-
-dialog.gallery .image {
- opacity: 0;
- transition: opacity .2s ease, transform .15s ease-out;
-}
-
-dialog.gallery .image[src] {
- opacity: 1;
-}
-
-/**************************************************
-REFERRAL SYSTEM
-**************************************************/
-.referral-reward-banner {
- background: var(--base-100);
- color: var(--action-0);
- border: 2px dashed var(--action-0);
- padding: 1.5rem;
- border-radius: 8px;
- text-align: center;
- margin-bottom: 1.5rem;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.referral-reward-banner .icon {
- --w: 3rem;
-}
-
-.referral-reward-banner h4 {
- margin: 0;
- font-size: 1.25rem;
- font-weight: 700;
- color: var(--contrast);
-}
-
-.check-code-btn {
- width: 100%;
- margin-top: 0.5rem;
- background: var(--base-100);
- color: var(--contrast-100);
- border: 1px solid var(--contrast-200);
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 0.5rem;
-}
-
-.code-status {
- padding: 0.75rem;
- border-radius: 4px;
- margin-top: 0.5rem;
- font-size: 0.875rem;
-}
-
-.code-status.loading {
- background: var(--base-200);
- color: var(--contrast-200);
-}
-
-.code-status.success {
- background: var(--successBack);
- color: var(--successText);
- border: 1px solid var(--successBack);
-}
-
-.code-status.error {
- background: var(--errorBack);
- color: var(--errorText);
- border: 1px solid var(--errorBack);
-}
-
-.referral-footer {
- text-align: center;
- padding: 1rem 0;
- border-top: 1px solid var(--base-200);
- margin-top: 1rem;
-}
-
-.referral-footer .text-link {
- color: var(--contrast-200);
- text-decoration: none;
- font-size: 0.875rem;
-}
-
-.referral-footer .text-link:hover {
- color: var(--action-0);
- text-decoration: underline;
-}
-
-.share-section {
- margin-bottom: 1.5rem;
-}
-
-.share-section h4 {
- margin: 0 0 0.75rem;
- font-size: 0.875rem;
- text-transform: uppercase;
- letter-spacing: 0.5px;
- color: var(--contrast-200);
-}
-
-.copy-section {
- margin-bottom: 1.5rem;
-}
-
-.copy-section h4 {
- margin: 0 0 0.5rem;
- font-size: 0.875rem;
- text-transform: uppercase;
- letter-spacing: 0.5px;
- color: var(--contrast-200);
-}
-
-.copy-group {
- --gap: 0 .5rem;
- margin-bottom: 0;
-}
- .copy-group + .hint {
- margin: .25rem 1rem 1rem;
- }
-
-.copy-target {
- flex: 1;
- padding: 0.75rem;
- background: var(--base-100);
- border: 1px solid var(--base-200);
- border-radius: 4px;
- font-family: 'Monaco', 'Courier New', monospace;
- font-size: 0.875rem;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- user-select: all;
-}
-
-.copy-btn {
- flex-shrink: 0;
- width: var(--chipchip);
- height: var(--chipchip);
- min-height: 0;
- padding: 0;
-}
-.copy-btn.success .icon-copy,
-.copy-btn .icon-check-circle {
- display: none;
-}
-.copy-btn.success .icon-check-circle {
- display: inline-block;
-}
-
-.copy-btn.success {
- background: var(--successBack);
- color: var(--success);
-}
-
-.recent-referrals-section {
- margin-bottom: 1.5rem;
- padding-bottom: 1.5rem;
- border-bottom: 1px solid var(--contrast-200);
-}
-
-.recent-referrals-section h4 {
- margin: 0 0 0.75rem;
- font-size: 0.875rem;
- text-transform: uppercase;
- letter-spacing: 0.5px;
- color: var(--contrast-200);
-}
-
-.recent-referrals-list {
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
-}
-
-.referral-item {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0.75rem;
- background: var(--base-100);
- border-radius: 4px;
- font-size: 0.875rem;
-}
-
-.referral-info {
- display: flex;
- align-items: center;
- gap: 0.5rem;
-}
-
-.referral-info strong {
- color: var(--contrast-200);
-}
-
-.referral-date {
- font-size: 0.75rem;
-}
-
-.no-referrals,
-.loading,
-.message {
- text-align: center;
- padding: 1rem;
- color: var(--contrast-200);
- font-size: 0.875rem;
-}
-
-.stats-summary {
- margin-bottom: 1.5rem;
-}
-
-.stat-row {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0.75rem;
- border-bottom: 1px solid var(--base-200);
-}
-
-.stat-row:last-child {
- border-bottom: none;
-}
-
-.stat-row.highlight {
- background: var(--base-100);
- border-radius: 4px;
- border: 1px solid var(--base);
- font-weight: 600;
-}
-
-.stat-label {
- color: #666;
- font-size: 0.875rem;
-}
-
-.stat-value {
- color: #333;
- font-weight: 600;
- font-size: 1rem;
-}
-
-.stat-row.highlight .stat-value {
- color: var(--action-0);
- font-size: 1.25rem;
-}
-
-.view-dashboard-btn {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 0.5rem;
- width: 100%;
- padding: 0.875rem;
- background: var(--action-0);
- color: var(--action-contrast);
- text-decoration: none;
- border-radius: 8px;
- font-weight: 600;
- transition: all 0.2s ease;
-}
-aside button:not(.button, .qtoggle),
-aside a.button{
- position: relative;
- top: 0;
- box-shadow: var(--shdw-none);
- transition: top var(--trans-base), box-shadow var(--trans-base);
-}
-
-aside button:not(.button, .qtoggle, :disabled):hover,
-aside a.button:hover {
- top: -4px;
- box-shadow: rgba(var(--contrast-rgb),var(--op-45)) var(--shdw-down);
-}
-
-.view-dashboard-btn:visited {
- color: var(--action-contrast);
-}
-.view-dashboard-btn:hover {
- transform: translateY(-2px);
- box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
-}
-
-.success-content {
- padding: 2rem 1rem;
- text-align: center;
-}
-
-.success-content h3 {
- color: var(--success);
- margin-bottom: 1rem;
-}
-
-.success-content p {
- margin-bottom: 0.75rem;
- color: var(--base-200);
-}
-
-.success-content .hint {
- font-size: 0.875rem;
- color: var(--base-200);
- font-style: italic;
-}
-
-.code-status.loading::before {
-/*.loading::before {*/
- content: '';
- display: inline-block;
- width: 1rem;
- height: 1rem;
- border: 2px solid var(--action-200);
- border-top: 2px solid var(--action-0);
- border-radius: 50%;
- animation: spin 1s linear infinite;
- margin-right: 0.5rem;
- vertical-align: middle;
-}
-.share-buttons-grid a {
- padding: 0;
- min-height: 0;
- width: var(--chipchip);
- height: var(--chipchip);
-}
-.share-buttons-grid a .icon {
- margin-right: 0;
-}
-@media (max-width: 768px) {
- .share-buttons-grid {
- grid-template-columns: repeat(3, 1fr);
- }
-
- .referral-item {
- flex-direction: column;
- align-items: flex-start;
- gap: 0.5rem;
- }
-}
-/***************
-TOGGLE TEXT
-***************/
-.toggle-text input {
- display: none;
-}
-
-.toggle-text input + label {
- font-weight: normal;
- color: var(--contrast)!important;
- text-transform: none;
- cursor: pointer;
- position: relative;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.toggle-text label::before,
-.toggle-text label::after {
- display: none!important;
-}
-
-.toggle-text label {
- padding-left: 0!important;
-}
-
-.toggle-text input + label .text {
- position: relative;
- margin: 0;
- --gap: 0;
- font-weight: bold;
- width: fit-content;
- padding: 2px 4px;
- border: 1px solid var(--action-50);
- border-radius: 4px;
- color: var(--action-50)!important;
-}
-
-table .toggle-text input+label .text {
- color: var(--contrast)!important;
- border-color: var(--contrast);
-}
-
-.toggle-text:hover .text,
-table .toggle-text:hover .text {
- background-color: var(--action-50);
- color: var(--light-0)!important;
- border-color: var(--action-50);
-}
-
-.toggle-text input + label .off,
-.toggle-text input + label .on {
- transition: var(--trans-transform), opacity var(--trans-base);
-}
-
-.toggle-text input + label .off {
- opacity: 1;
- max-width: 100%;
- transform: none;
-}
-
-.toggle-text input + label .on {
- opacity: 0;
- max-width: 0;
- transform: translate3d(0, 100%, 0);
-}
-
-.toggle-text input:checked + label .off {
- opacity: 0;
- max-width: 0;
- transform: translate3d(0, -100%, 0);
-}
-
-.toggle-text input:checked + label .on {
- max-width: 100%;
- opacity: 1;
- transform: none;
-}
-
-/******************************************************************
-TAXONOMY SELECTOR
-******************************************************************/
-.items-container {
- margin: 0;
- padding: 0;
- width: 100%;
-}
-
-details.create-term {
- margin-top: auto;
- width: 100%;
-}
-#jvb-selector .search-wrapper {
- margin-top: auto;
- width:100%;
-}
-.search-wrapper:not(.open) .search {
- margin-left: auto;
-}
-.search-wrapper + details.create-term {
- margin-top: 0;
-}
-
-details.create-term .field,
-.create-term[open] summary {
- margin-bottom: 1rem;
-}
-
-details.create-term .field {
- max-width: 100%;
-}
-
-#jvb-selector > .wrap {
- --wrap: nowrap;
- --justify: flex-start;
-}
-
-#jvb-selector .items-wrap {
- width: 100%;
- padding: 1rem 0;
- border-top: 1px solid var(--base-200);
-}
-
-#jvb-selector .items-container {
- display: grid;
- grid-template-columns: repeat(2, 1fr)
-}
-#jvb-selector li {
- list-style: none;
-}
-#jvb-selector li label {
- padding-left: 0!important;
-}
-
-/*.auto-wrapper {*/
-/* position: absolute;*/
-/* bottom: -105%;*/
-/* background-color: rgba(var(--base-rgb), var(--op-5));*/
-/* backdrop-filter: blur(2px);*/
-/* border-radius: var(--radius);*/
-/* z-index: 1;*/
-/*}*/
-.autocomplete-dropdown {
- width: 100%;
- background-color: var(--base-100);
- padding: .5rem;
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
-}
-li.autocomplete {
- list-style: none;
- display: inline-flex;
- margin: 0.25rem;
- min-height: var(--chip);
-}
-
-.submit-term {
- gap: 0;
-}
-.submit-term strong {
- padding-right: 1rem;
-}
-.selected-items {
- width:100%;
- padding: .5rem;
- border-radius: var(--radius);
- background-color:var(--base);
- --justify: flex-start;
- --gap: .5rem;
- margin-bottom: .5rem;
-}
-
-.selected-items.selected-items:empty {
- padding:0;
- background-color:transparent;
- margin: 0;
-}
-
-.selected-item {
- padding: .25rem .5rem;
- margin: .125em;
- background: var(--base-100);
- border-radius: .25rem;
- font-size: var(--txt-medium);
- border: 1px solid var(--base-200);
- position: relative;
-}
-.remove-term.remove-term {
- min-height: 0;
- height: var(--chip);
- width: var(--chip);
- padding: 0;
- --w: .75em;
-}
-
-.clear-filters {
- margin-left: auto;
- border: 1px solid var(--base-200);
-}
-/**************************************************
-ANIMATIONS
-**************************************************/
+/** ANIMATIONS **/
@keyframes shimmer {
0% {
left: -50%;
@@ -4067,13 +3757,13 @@
@keyframes pulse-color {
0% {
- box-shadow: 0 0 0 0 rgba(var(--action-rgb), .4);
+ box-shadow: 0 0 0 0 rgba(var(--action-0), .4);
}
30% {
- box-shadow: 0 0 0 .75rem rgba(var(--action-rgb), 0);
+ box-shadow: 0 0 0 .75rem rgba(var(--action-0), 0);
}
100% {
- box-shadow: 0 0 0 0 rgba(var(--action-rgb), 0);
+ box-shadow: 0 0 0 0 rgba(var(--action-0), 0);
}
}
@@ -4113,17 +3803,7 @@
}
}
-
-.content-term-list, .content-term-list ul,
-.content-term-list li {
- list-style: none;
- margin: 0;
- padding: 0;
-}
-.content-term-list .item {
- flex-direction: column;
-}
-.content-term-list h3 {
- font-size: var(--txt-medium);
- font-weight: var(--fw-h);
-}
\ No newline at end of file
+/*.group {*/
+/* background-color: rgb(var(--base));*/
+/* margin: 1rem 0;*/
+/*}*/
\ No newline at end of file
--
Gitblit v1.10.0