From 4f48b9154270c83324ef6c98f990adbcbe59d073 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Sun, 24 May 2026 02:27:26 +0000
Subject: [PATCH] =switching over
---
all.css | 6850 ++++++++++++++++++++++++++---------------------------------
1 files changed, 3,027 insertions(+), 3,823 deletions(-)
diff --git a/all.css b/all.css
index d171c67..bb8df98 100644
--- a/all.css
+++ b/all.css
@@ -1,13 +1,13 @@
/*!
-Theme Name: Jake Van
+Theme Name: Jake Van Base Theme
Theme URI: https://jakevan.ca
Author: Jake Vanderwerf
Author URI: https://jakevan.ca
Description: A base theme for Jake Van clients
Requires at least: 6.4
Tested up to: 6.4
-Requires PHP: 7.0
-Version: 1.279
+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
@@ -15,358 +15,265 @@
/*************************************************************
VARIABLES
*************************************************************/
-:root{
- /* Layout */
- --narrow: min(500px, 50vw);
- --maxWidth: min(768px, 65vw);
- --alignWide: min(1024px, 90vw);
- --alignMed: min(962px, 82.5vw);
+:root {
+ /*****************************
+ Layout
+ *****************************/
+ --half: min(384px, 17.5vw);
+ --narrow: min(500px, 62.5vw);
+ --content: min(768px, 65vw);
+ --wider: min(900px, 75vw);
+ --wide: min(1024px, 90vw);
--full: 100vw;
- /* Margin */
- --mr: auto;
- --ml: auto;
- --mt: 1rem;
- --mb: 1rem;
- --setMargin: var(--mt) var(--mr) var(--mb) var(--ml);
- --insetMargin: var(--mt) calc((var(--maxWidth) - var(--narrow)) / 2 + var(--mr)) var(--mb) var(--ml);
- --height: 4rem;
- --doubleHeight: 8rem;
- --offHeight: 5rem;
- --maxHeight: calc(100vh - var(--height) - var(--height));
+ --offScreen: -200vw;
- --gap: .5rem;
- --wrap: wrap;
+ /*****************************
+ Sizing
+ *****************************/
+ --chip: 1.5rem;
+ --chipchip: 3rem;
+ --chip_: 2rem;
+ --btn: 4rem;
+ --btn_: 5rem;
+ --btnbtn: 8rem;
+ --maxHeight: calc(100vh - var(--btnbtn));
+
+ /*****************************
+ Flex
+ *****************************/
+ --dir: row;
--justify: center;
--align: center;
- --dir: row;
- /* Typography */
- --w: 1.2em; /** Icon **/
+ --wrap: wrap;
+ --gap: .5rem;
- --filter: grayscale(.3) sepia(.4);
+ /*****************************
+ Typography
+ *****************************/
+ --w: 1.2em; /** For icons **/
--font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
- --heading: 'Open Sans', var(--font-base);
- --body: 'Montserrat', var(--font-base);
- --hWeight: 900;
- --hlight: 400;
- --bWeight: 400;
- --bBold: 900;
- --bLight: 200;
- /* Font sizes */
- --enormous: calc(26vh - 4rem);
- --xxxlarge: clamp(2.5rem, 1.429rem + 2.857vw, 4rem);
- --xxlarge: clamp(2rem, 1.286rem + 1.905vw, 3rem);
- --xlarge: clamp(1.6rem, .957rem + 1.714vw, 2.5rem);
- --large: clamp(1.3rem, .6rem + 1.867vw, 2rem);
- --xmedium: clamp(1.4rem, .971rem + 1.143vw, 2rem);
- --medium: clamp(1.1rem, .993rem + .286vw, 1.25rem);
- --small: clamp(.95rem, .879rem + .19vw, 1.05rem);
- --extra-small: clamp(.75rem, 1.1337rem + -1.2278vw, .059375rem);
- /* Colours
- For best results, generate colours from base colours using: https://uicolors.app/generate/
- or sass darken/lighten by 5%: http://scg.ar-ch.org/
- */
- --light-0: #ededf4;
- --light-50: #e3e3ee;
- --light-100: #dadae8;
- --light-200: #d1d1e3;
- --dark-0: #2a2b2a;
- --dark-50: #2f302f;
- --dark-100: #393a39;
- --dark-200: #3e403e;
- --red-0: #ef767a;
- --red-50: #ec5f64;
- --red-100: #ea484e;
- --red-200: #e73238;
- --orange-0: #ef9e76;
- --orange-50: #ec8e5f;
- --orange-100: #ea7e48;
- --orange-200: #e76e32;
- --yellow-0: #E3BE39;
- --yellow-50: #cca61d;
- --yellow-100: #9f8217;
- --yellow-200: #735d10;
- --green-0: #32cb82;
- --green-50: #28a268;
- --green-100: #1e794e;
- --green-200: #145033;
- --blue-0: #329dcb;
- --blue-50: #287da2;
- --blue-100: #1e5e79;
- --blue-200: #143e50;
- --purple-0: #ba76ef;
- --purple-50: #a348ea;
- --purple-100: #8c1be4;
- --purple-200: #7015b7;
- --action-0: #ef767a;
- --action-50: #ec5f64;
- --action-100: #ea484e;
- --action-200: #e73238;
- --secondary-0: #329dcb;
- --secondary-50: #287da2;
- --secondary-100: #1e5e79;
- --secondary-200: #143e50;
+ --heading: 'Aleo', var(--font-base);
+ --body: 'Josefin Slab', var(--font-base);
+ --fw-h-light: 400;
+ --fw-h: 900;
+ --fw-h-bold: 900;
+ --fw-b-light: 200;
+ --fw-b: 400;
+ --fw-b-bold: 700;
- --success: #22C55E;
- --successBack: #d4edda;
- --successText:#155724;
- --warning: #E8A737;
- --error: #EF4444;
- --errorBack: #f8d7da;
- --errorText: #721c24;
+ --txt-small: clamp(.75rem, 1.1337rem + -1.2278vw, .059375rem);
+ --txt-x-small: clamp(.95rem, .879rem + .19vw, 1.05rem);
+ --txt-medium: clamp(1.1rem, .993rem + .286vw, 1.25rem);
+ --txt-x-medium: clamp(1.4rem, .971rem + 1.143vw, 2rem);
+ --txt-large: clamp(1.3rem, .6rem + 1.867vw, 2rem);
+ --txt-x-large:clamp(1.6rem, .957rem + 1.714vw, 2.5rem);
+ --txt-xx-large: clamp(2rem, 1.286rem + 1.905vw, 3rem);
+ --txt-xxx-large: clamp(2.5rem, 1.429rem + 2.857vw, 4rem);
+ --txt-enormous: calc(26vh - 4rem);
+
+ /*****************************
+ Colours
+ *****************************/
+ --filter: grayscale(.3) sepia(.4);
+ --mix-blend-mode: darken;
+ --coverBlend: overlay;
+ --coverIndex: 2;
+ --light-0: 239,239,239; /* #efefef; */
+ --light-50: 226,226,226; /* #e2e2e2; */
+ --light-100: 213,213,213; /* #d5d5d5; */
+ --light-200: 201,201,201; /* #c9c9c9; */
+
+ --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);
- --secondary-contrast: var(--light-0);
- --light-rgb: 237,237,244;
- --dark-rgb: 42,43,42;
- --red-rgb: 239,118,122;
- --orange-rgb: 239,158,118;
- --yellow-rgb: 227,190,57;
- --green-rgb: 50,203,130;
- --blue-rgb: 50,157,203;
- --purple-rgb: 186,118,239;
- --action-rgb: 239,118,122;
- --secondary-rgb: 50,157,203;
- --rgba-subtle: rgba(var(--c),.5);
- --rgba-subtle-hover: rgba(var(--c),.1);
+ --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);
+
--contrast: var(--dark-0);
--contrast-50: var(--dark-50);
--contrast-100: var(--dark-100);
--contrast-200: var(--dark-200);
- --c: var(--light-rgb);
- --base-rgb: var(--light-rgb);
- --contrast-rgb: var(--dark-rgb);
- /* Stacking */
+
+
+ --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;
+ --op-3: .25;
+ --op-45: .45;
+ --op-4: .66;
+ --op-5: .75;
+ --op-6: .85;
+
+ /*****************************
+ Shadows
+ *****************************/
+ --shdw-inset: inset 0 0 4px 1px;
+ --shdw: 0 0 4px;
+ --shdw-down: 0 6px 5px -5px;
+ --shdw-right: 6px 0 5px -5px;
+ --shdw-left: -6px 0 5px -5px;
+ --shdw-up: 0 -6px 5px -5px;
+ --shdw-subtle: 0 25px 20px -20px;
+ --shdw-subtle-right: 10px 0 20px -20px;
+ --shdw-none: transparent 0 0 0;
+
+ /*****************************
+ Stacking
+ *****************************/
--z-1: 5;
--z-2: 10;
--z-3: 15;
--z-4: 20;
--z-5: 50;
--z-6: 100;
- --z-top: 999;
- --zz-top: 999999;
- /* Overlays */
- --rgb-light: .25;
- --rgb-medium: .66;
- --rgb-heavy: .85;
- --overlay-light: rgba(var(--c), .25);
- --overlay-medium: rgba(var(--c), .66);
- --overlay-heavy: rgba(var(--c), .85);
- --shimmer: rgba(var(--dark-rgb),0) 0%,
- rgba(var(--dark-rgb),.05) 50%,
- rgba(var(--dark-rgb),0) 100%;
- /* Shadows */
- --shadow: rgba(var(--dark-rgb),.45) 0px 0px 4px;
- --shadow-down: rgba(var(--dark-rgb),.45) 0 6px 5px -5px; /* Bottom */
- --shadow-right: rgba(var(--dark-rgb),.45) 6px 0 5px -5px; /* Right */
- --shadow-left: rgba(var(--dark-rgb), .45) -6px 0 5px -5px; /* Left */
- --shadow-up: rgba(var(--dark-rgb), .45) 0 -6px 5px -5px; /* Up */
- --subtle: rgba(var(--dark-rgb), .45) 0px 25px 20px -20px;
- --subtleRight: rgba(var(--dark-rgb), .45) 10px 0 20px -20px;
- --shadow-none: transparent 0px 0px 0px;
- /* Rounding */
- --innerRadius: 4px;
- --outerPadding: 1rem;
- --outerRadius: calc(var(--innerRadius) + var(--outerPadding));
- /* Transitions */
- --function:cubic-bezier(.47,.24,.07,.47);
- --timing: .25s;
- --transition-base: var(--timing) var(--function);
- --transition-color: background-color var(--transition-base),
- color var(--transition-base), border var(--transition-base);
- --transition-transform: transform var(--transition-base);
- --transition-size: width var(--transition-base),
- height var(--transition-base),max-width var(--transition-base), max-height var(--transition-base);
+ --z-7: 999;
+ --z-8: 1000;
+ --z-9: 999999;
+ --z-10: 9999999;
- --offScreen: -200vw;
+ /*****************************
+ Rounding
+ *****************************/
+ --radius: 4px;
+ --p-outer: 1rem;
+ --radius-outer: calc(var(--radius) + var(--p-outer));
+ --p-y: var(--sp1);
+ --p-x: var(--sp1);
+ /*****************************
+ Transitions
+ *****************************/
+ --trans-fn: cubic-bezier(.47,.24,.07,.47);
+ --trans-t: .25s;
+ --trans-base: var(--trans-t) var(--trans-fn);
+ --trans-color: background-color var(--trans-base),
+ color var(--trans-base), border var(--trans-base);
+ --trans-transform: transform var(--trans-base);
+ --trans-size: width var(--trans-base),
+ height var(--trans-base),max-width var(--trans-base), max-height var(--trans-base);
+ --trans-vis: opacity var(--trans-base);
- /** Icons **/
- --minus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H88a4,4,0,0,1,0-8h80A4,4,0,0,1,172,128Z"></path></svg>');
- --plus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H132v36a4,4,0,0,1-8,0V132H88a4,4,0,0,1,0-8h36V88a4,4,0,0,1,8,0v36h36A4,4,0,0,1,172,128Z"></path></svg>');
- --close: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4ZM162.83,98.83,133.66,128l29.17,29.17a4,4,0,0,1-5.66,5.66L128,133.66,98.83,162.83a4,4,0,0,1-5.66-5.66L122.34,128,93.17,98.83a4,4,0,0,1,5.66-5.66L128,122.34l29.17-29.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');
- --chevron: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Zm42.83-110.83a4,4,0,0,1,0,5.66l-40,40a4,4,0,0,1-5.66,0l-40-40a4,4,0,0,1,5.66-5.66L128,146.34l37.17-37.17A4,4,0,0,1,170.83,109.17Z"></path></svg>');
- --details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M210.83,98.83l-80,80a4,4,0,0,1-5.66,0l-80-80a4,4,0,0,1,5.66-5.66L128,170.34l77.17-77.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');
- --shop: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M28.15,95A3.81,3.81,0,0,0,28,96v16a36,36,0,0,0,16,29.92V216a4,4,0,0,0,4,4H208a4,4,0,0,0,4-4V141.92A36,36,0,0,0,228,112V96a3.81,3.81,0,0,0-.17-1.08L213.5,44.7A12,12,0,0,0,202,36H54A12,12,0,0,0,42.5,44.7Zm22-48.08A4,4,0,0,1,54,44H202a4,4,0,0,1,3.84,2.9L218.7,92H37.3ZM100,100h56v12a28,28,0,0,1-56,0ZM36,112V100H92v12a28,28,0,0,1-41.37,24.59,4,4,0,0,0-1.31-.76A28,28,0,0,1,36,112ZM204,212H52V145.94a36,36,0,0,0,44-17.48,36,36,0,0,0,64,0,36,36,0,0,0,44,17.48Zm2.68-76.17a3.94,3.94,0,0,0-1.3.76A28,28,0,0,1,164,112V100h56v12A28,28,0,0,1,206.68,135.83Z"></path></svg>');
- --style: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M224,92H170.61l9.33-51.28a4,4,0,1,0-7.88-1.44L162.48,92H106.61l9.33-51.28a4,4,0,1,0-7.88-1.44L98.48,92H48a4,4,0,0,0,0,8H97L86.84,156H32a4,4,0,0,0,0,8H85.39l-9.33,51.28a4,4,0,0,0,3.22,4.65A3.65,3.65,0,0,0,80,220a4,4,0,0,0,3.94-3.29L93.52,164h55.87l-9.33,51.28a4,4,0,0,0,3.22,4.65,3.65,3.65,0,0,0,.72.07,4,4,0,0,0,3.94-3.29L157.52,164H208a4,4,0,0,0,0-8H159l10.19-56H224a4,4,0,0,0,0-8Zm-73.16,64H95l10.19-56H161Z"></path></svg>');
- --map: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M128,68a36,36,0,1,0,36,36A36,36,0,0,0,128,68Zm0,64a28,28,0,1,1,28-28A28,28,0,0,1,128,132Zm0-112a84.09,84.09,0,0,0-84,84c0,30.42,14.17,62.79,41,93.62a250,250,0,0,0,40.73,37.66,4,4,0,0,0,4.58,0A250,250,0,0,0,171,197.62c26.81-30.83,41-63.2,41-93.62A84.09,84.09,0,0,0,128,20Zm37.1,172.23A254.62,254.62,0,0,1,128,227a254.62,254.62,0,0,1-37.1-34.81C73.15,171.8,52,139.9,52,104a76,76,0,0,1,152,0C204,139.9,182.85,171.8,165.1,192.23Z"></path></svg>');
- --theme: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M241.72,113a11.88,11.88,0,0,0-9.73-5H212V88a12,12,0,0,0-12-12H129.33l-28.8-21.6a12.05,12.05,0,0,0-7.2-2.4H40A12,12,0,0,0,28,64V208a4,4,0,0,0,4,4H211.09a4,4,0,0,0,3.79-2.74l28.49-85.47A11.86,11.86,0,0,0,241.72,113ZM40,60H93.33a4,4,0,0,1,2.4.8L125.6,83.2a4,4,0,0,0,2.4.8h72a4,4,0,0,1,4,4v20H69.76a12,12,0,0,0-11.38,8.21L36,183.35V64A4,4,0,0,1,40,60Zm195.78,61.26L208.2,204H37.55L66,118.74A4,4,0,0,1,69.76,116H232a4,4,0,0,1,3.79,5.26Z"></path></svg>');
- --arrow-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M236,192a4,4,0,0,1-4,4H88a4,4,0,0,1-4-4V57.66L42.83,98.83a4,4,0,0,1-5.66-5.66l48-48a4,4,0,0,1,5.66,0l48,48a4,4,0,0,1-5.66,5.66L92,57.66V188H232A4,4,0,0,1,236,192Z"></path></svg>');
- --colour: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M174,47.75a254.19,254.19,0,0,0-41.45-38.3,8,8,0,0,0-9.18,0A254.19,254.19,0,0,0,82,47.75C54.51,79.32,40,112.6,40,144a88,88,0,0,0,176,0C216,112.6,201.49,79.32,174,47.75Zm9.85,105.59a57.6,57.6,0,0,1-46.56,46.55A8.75,8.75,0,0,1,136,200a8,8,0,0,1-1.32-15.89c16.57-2.79,30.63-16.85,33.44-33.45a8,8,0,0,1,15.78,2.68Z"></path></svg>');
- --linkIcon:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M236,88.12a50.44,50.44,0,0,1-14.81,34.31l-34.75,34.74A50.33,50.33,0,0,1,150.62,172h-.05A50.63,50.63,0,0,1,100,120a4,4,0,0,1,4-3.89h.11a4,4,0,0,1,3.89,4.11A42.64,42.64,0,0,0,150.58,164h0a42.32,42.32,0,0,0,30.14-12.49l34.75-34.74a42.63,42.63,0,1,0-60.29-60.28l-11,11a4,4,0,0,1-5.66-5.65l11-11A50.64,50.64,0,0,1,236,88.12ZM111.78,188.49l-11,11A42.33,42.33,0,0,1,70.6,212h0a42.63,42.63,0,0,1-30.11-72.77l34.75-34.74A42.63,42.63,0,0,1,148,135.82a4,4,0,0,0,8,.23A50.64,50.64,0,0,0,69.55,98.83L34.8,133.57A50.63,50.63,0,0,0,70.56,220h0a50.33,50.33,0,0,0,35.81-14.83l11-11a4,4,0,1,0-5.65-5.66Z"></path></svg>');
- --swipeRight: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzAwMDAwMCIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTIsMTQwdjM2YzAsMjQuNjYtOC4wOCw0MS4xLTguNDIsNDEuNzlhNCw0LDAsMSwxLTcuMTYtMy41OGMuMDctLjE1LDcuNTgtMTUuNTUsNy41OC0zOC4yMVYxNDBhMTYsMTYsMCwwLDAtMzIsMHY0YTQsNCwwLDAsMS04LDBWMTI0YTE2LDE2LDAsMCwwLTMyLDB2MTJhNCw0LDAsMCwxLTgsMFY2OGExNiwxNiwwLDAsMC0zMiwwVjE3NmE0LDQsMCwwLDEtNy4zOSwyLjExbC0xOC42OC0zMGEuNzUuNzUsMCwwLDEtLjA3LS4xMiwxNiwxNiwwLDAsMC0yNy43MiwxNmwyOS4zMSw1MGE0LDQsMCwwLDEtNi45LDRMMzEuMjIsMTY4YTI0LDI0LDAsMCwxLDQxLjUyLTI0LjA5TDg0LDE2MlY2OGEyNCwyNCwwLDAsMSw0OCwwdjM4LjEzYTI0LDI0LDAsMCwxLDM5Ljk0LDE2LjA2QTI0LDI0LDAsMCwxLDIxMiwxNDBabTM4LjgzLTg2LjgzLTMyLTMyYTQsNCwwLDAsMC01LjY2LDUuNjZMMjM4LjM0LDUySDE3NmE0LDQsMCwwLDAsMCw4aDYyLjM0TDIxMy4xNyw4NS4xN2E0LDQsMCwwLDAsNS42Niw1LjY2bDMyLTMyQTQsNCwwLDAsMCwyNTAuODMsNTMuMTdaIj48L3BhdGg+PC9zdmc+');
+ /*****************************
+ Spacing
+ *****************************/
+ --sp1: clamp(0.5rem, 0.714vw + 0.321rem, 1rem); /* 8px → 16px */
+ --sp2: clamp(0.75rem, 1.071vw + 0.482rem, 1.5rem); /* 12px → 24px */
+ --sp3: clamp(1rem, 1.429vw + 0.643rem, 2rem); /* 16px → 32px */
+ --sp4: clamp(1.5rem, 2.143vw + 0.964rem, 3rem); /* 24px → 48px */
+ --sp5: clamp(2rem, 2.857vw + 1.286rem, 4rem); /* 32px → 64px */
+ --sp6: clamp(3rem, 4.286vw + 1.929rem, 6rem); /* 48px → 96px */
+ --sp7: clamp(4rem, 5.714vw + 2.571rem, 8rem); /* 64px → 128px */
+ /*****************************
+ Scrollbar
+ *****************************/
+ --sb-width: 8px;
+ --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;
- --scrollbar-width: 8px;
- --scrollbar-track-color: var(--base-100);
- --scrollbar-thumb-color: var(--action-0);
- --scrollbar-thumb-hover-color: var(--action-50);
- --scrollbar-thumb-border: 2px solid var(--base-50);
- --scrollbar-border-radius: 4px;
-
- --can-scroll: 0;
+ --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>');
+ --link: 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="M238,88.18a52.42,52.42,0,0,1-15.4,35.66l-34.75,34.75A52.28,52.28,0,0,1,150.62,174h-.05A52.63,52.63,0,0,1,98,119.9a6,6,0,0,1,6-5.84h.17a6,6,0,0,1,5.83,6.16A40.62,40.62,0,0,0,150.58,162h0a40.4,40.4,0,0,0,28.73-11.9l34.75-34.74A40.63,40.63,0,0,0,156.63,57.9l-11,11a6,6,0,0,1-8.49-8.49l11-11a52.62,52.62,0,0,1,74.43,0A52.83,52.83,0,0,1,238,88.18Zm-127.62,98.9-11,11A40.36,40.36,0,0,1,70.6,210h0a40.63,40.63,0,0,1-28.7-69.36L76.62,105.9A40.63,40.63,0,0,1,146,135.77a6,6,0,0,0,5.83,6.16H152a6,6,0,0,0,6-5.84A52.63,52.63,0,0,0,68.14,97.42L33.38,132.16A52.63,52.63,0,0,0,70.56,222h0a52.26,52.26,0,0,0,37.22-15.42l11-11a6,6,0,1,0-8.49-8.48Z"></path></svg>');
}
+
body:has(#theme-switcher:checked){
- --red-50: #ec5f64;
- --red-100: #ea484e;
- --red-200: #e73238;
- --orange-50: #f2ae8d;
- --orange-100: #f4bea4;
- --orange-200: #f7cfbb;
- --yellow-50: #e9cd66;
- --yellow-100: #f0db92;
- --yellow-200: #f6eabf;
- --green-50: #5ad69b;
- --green-100: #83e0b4;
- --green-200: #aceacc;
- --blue-50: #5ab1d6;
- --blue-100: #83c4e0;
- --blue-200: #acd8ea;
- --purple-50: #c58df2;
- --purple-100: #d1a4f4;
- --purple-200: #dcbbf7;
- --action-50: #f28d90;
- --action-100: #f4a4a6;
- --action-200: #f7bbbd;
- --secondary-50: #5ab1d6;
- --secondary-100: #83c4e0;
- --secondary-200: #acd8ea;
+ /*****************************
+ Colours
+ *****************************/
+ --mixBlendMode: lighten;
+ --coverBlend: multiply;
+ --coverIndex: 0;
+
+ --action-50: 219,0,110; /* #db006e; */
+ --action-100: 184,0.92; /* #b8005c; */
+ --action-200: 148,0,74; /* #94004a; */
+
+ --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: var(--light-rgb);
+
--base: var(--dark-0);
--base-50: var(--dark-50);
--base-100: var(--dark-100);
--base-200: var(--dark-200);
- --c: var(--dark-rgb);
- --base-rgb: var(--dark-rgb);
- --contrast-rgb: var(--light-rgb);
- --overlay-light: rgba(var(--c), .25);
- --overlay-medium: rgba(var(--c), .5);
- --overlay-heavy: rgba(var(--c), .85);
- --shimmer: rgba(var(--c),0) 0%,
- rgba(var(--c),.05) 50%,
- rgba(var(--c),0) 100%;
- --shadow: rgba(var(--light-rgb),.45) 0px 0px 4px;
- --shadow-down: rgba(var(--light-rgb),.45) 0 6px 5px -5px; /* Bottom */
- --shadow-right: rgba(var(--light-rgb),.45) 6px 0 5px -5px; /* Right */
- --shadow-left: rgba(var(--light-rgb), .45) -6px 0 5px -5px; /* Left */
- --shadow-up: rgba(var(--light-rgb), .45) 0 -6px 5px -5px; /* Up */
- --subtle: rgba(var(--light-rgb), .45) 0px 25px 20px -20px;
- --subtleRight: rgba(var(--light-rgb), .45) 10px 0 20px -20px;
+ --base: var(--dark-rgb);
- --successBack: #155724;
- --successText:#d4edda;
- --errorBack: #721c24;
- --errorText: #f8d7da;
- --minus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H88a4,4,0,0,1,0-8h80A4,4,0,0,1,172,128Z"></path></svg>');
- --plus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H132v36a4,4,0,0,1-8,0V132H88a4,4,0,0,1,0-8h36V88a4,4,0,0,1,8,0v36h36A4,4,0,0,1,172,128Z"></path></svg>');
- --close: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4ZM162.83,98.83,133.66,128l29.17,29.17a4,4,0,0,1-5.66,5.66L128,133.66,98.83,162.83a4,4,0,0,1-5.66-5.66L122.34,128,93.17,98.83a4,4,0,0,1,5.66-5.66L128,122.34l29.17-29.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');
- --chevron: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Zm42.83-110.83a4,4,0,0,1,0,5.66l-40,40a4,4,0,0,1-5.66,0l-40-40a4,4,0,0,1,5.66-5.66L128,146.34l37.17-37.17A4,4,0,0,1,170.83,109.17Z"></path></svg>');
- --details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M210.83,98.83l-80,80a4,4,0,0,1-5.66,0l-80-80a4,4,0,0,1,5.66-5.66L128,170.34l77.17-77.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');
- --shop: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M28.15,95A3.81,3.81,0,0,0,28,96v16a36,36,0,0,0,16,29.92V216a4,4,0,0,0,4,4H208a4,4,0,0,0,4-4V141.92A36,36,0,0,0,228,112V96a3.81,3.81,0,0,0-.17-1.08L213.5,44.7A12,12,0,0,0,202,36H54A12,12,0,0,0,42.5,44.7Zm22-48.08A4,4,0,0,1,54,44H202a4,4,0,0,1,3.84,2.9L218.7,92H37.3ZM100,100h56v12a28,28,0,0,1-56,0ZM36,112V100H92v12a28,28,0,0,1-41.37,24.59,4,4,0,0,0-1.31-.76A28,28,0,0,1,36,112ZM204,212H52V145.94a36,36,0,0,0,44-17.48,36,36,0,0,0,64,0,36,36,0,0,0,44,17.48Zm2.68-76.17a3.94,3.94,0,0,0-1.3.76A28,28,0,0,1,164,112V100h56v12A28,28,0,0,1,206.68,135.83Z"></path></svg>');
- --style: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M224,92H170.61l9.33-51.28a4,4,0,1,0-7.88-1.44L162.48,92H106.61l9.33-51.28a4,4,0,1,0-7.88-1.44L98.48,92H48a4,4,0,0,0,0,8H97L86.84,156H32a4,4,0,0,0,0,8H85.39l-9.33,51.28a4,4,0,0,0,3.22,4.65A3.65,3.65,0,0,0,80,220a4,4,0,0,0,3.94-3.29L93.52,164h55.87l-9.33,51.28a4,4,0,0,0,3.22,4.65,3.65,3.65,0,0,0,.72.07,4,4,0,0,0,3.94-3.29L157.52,164H208a4,4,0,0,0,0-8H159l10.19-56H224a4,4,0,0,0,0-8Zm-73.16,64H95l10.19-56H161Z"></path></svg>');
- --map: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M128,68a36,36,0,1,0,36,36A36,36,0,0,0,128,68Zm0,64a28,28,0,1,1,28-28A28,28,0,0,1,128,132Zm0-112a84.09,84.09,0,0,0-84,84c0,30.42,14.17,62.79,41,93.62a250,250,0,0,0,40.73,37.66,4,4,0,0,0,4.58,0A250,250,0,0,0,171,197.62c26.81-30.83,41-63.2,41-93.62A84.09,84.09,0,0,0,128,20Zm37.1,172.23A254.62,254.62,0,0,1,128,227a254.62,254.62,0,0,1-37.1-34.81C73.15,171.8,52,139.9,52,104a76,76,0,0,1,152,0C204,139.9,182.85,171.8,165.1,192.23Z"></path></svg>');
- --theme: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M241.72,113a11.88,11.88,0,0,0-9.73-5H212V88a12,12,0,0,0-12-12H129.33l-28.8-21.6a12.05,12.05,0,0,0-7.2-2.4H40A12,12,0,0,0,28,64V208a4,4,0,0,0,4,4H211.09a4,4,0,0,0,3.79-2.74l28.49-85.47A11.86,11.86,0,0,0,241.72,113ZM40,60H93.33a4,4,0,0,1,2.4.8L125.6,83.2a4,4,0,0,0,2.4.8h72a4,4,0,0,1,4,4v20H69.76a12,12,0,0,0-11.38,8.21L36,183.35V64A4,4,0,0,1,40,60Zm195.78,61.26L208.2,204H37.55L66,118.74A4,4,0,0,1,69.76,116H232a4,4,0,0,1,3.79,5.26Z"></path></svg>');
- --arrow-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M236,192a4,4,0,0,1-4,4H88a4,4,0,0,1-4-4V57.66L42.83,98.83a4,4,0,0,1-5.66-5.66l48-48a4,4,0,0,1,5.66,0l48,48a4,4,0,0,1-5.66,5.66L92,57.66V188H232A4,4,0,0,1,236,192Z"></path></svg>');
- --colour: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M174,47.75a254.19,254.19,0,0,0-41.45-38.3,8,8,0,0,0-9.18,0A254.19,254.19,0,0,0,82,47.75C54.51,79.32,40,112.6,40,144a88,88,0,0,0,176,0C216,112.6,201.49,79.32,174,47.75Zm9.85,105.59a57.6,57.6,0,0,1-46.56,46.55A8.75,8.75,0,0,1,136,200a8,8,0,0,1-1.32-15.89c16.57-2.79,30.63-16.85,33.44-33.45a8,8,0,0,1,15.78,2.68Z"></path></svg>');
- --linkIcon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M236,88.12a50.44,50.44,0,0,1-14.81,34.31l-34.75,34.74A50.33,50.33,0,0,1,150.62,172h-.05A50.63,50.63,0,0,1,100,120a4,4,0,0,1,4-3.89h.11a4,4,0,0,1,3.89,4.11A42.64,42.64,0,0,0,150.58,164h0a42.32,42.32,0,0,0,30.14-12.49l34.75-34.74a42.63,42.63,0,1,0-60.29-60.28l-11,11a4,4,0,0,1-5.66-5.65l11-11A50.64,50.64,0,0,1,236,88.12ZM111.78,188.49l-11,11A42.33,42.33,0,0,1,70.6,212h0a42.63,42.63,0,0,1-30.11-72.77l34.75-34.74A42.63,42.63,0,0,1,148,135.82a4,4,0,0,0,8,.23A50.64,50.64,0,0,0,69.55,98.83L34.8,133.57A50.63,50.63,0,0,0,70.56,220h0a50.33,50.33,0,0,0,35.81-14.83l11-11a4,4,0,1,0-5.65-5.66Z"></path></svg>');
-}
-/******************************************************************
-FONTS
-******************************************************************/
-/* open-sans-regular - latin */
-@font-face {
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 400;
- src: url('./fonts/open-sans-v44-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
- url('./fonts/open-sans-v44-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
-}
-/* open-sans-italic - latin */
-@font-face {
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
- font-family: 'Open Sans';
- font-style: italic;
- font-weight: 400;
- src: url('./fonts/open-sans-v44-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
- url('./fonts/open-sans-v44-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
-}
-/* open-sans-800 - latin */
-@font-face {
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 800;
- src: url('./fonts/open-sans-v44-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
- url('./fonts/open-sans-v44-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
-}
-/* open-sans-800italic - latin */
-@font-face {
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
- font-family: 'Open Sans';
- font-style: italic;
- font-weight: 800;
- src: url('./fonts/open-sans-v44-latin-800italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
- url('./fonts/open-sans-v44-latin-800italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
-}
+ --successBack: var(--successDark);
+ --successText: var(--successLight);
+ --warningBack: var(--warningDark);
+ --warningText: var(--warningLight);
+ --errorBack: var(--errorDark);
+ --errorText: var(--errorLight);
-/* montserrat-200 - latin */
-@font-face {
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
- font-family: 'Montserrat';
- font-style: normal;
- font-weight: 200;
- src: url('./fonts/montserrat-v31-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-/* montserrat-200italic - latin */
-@font-face {
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
- font-family: 'Montserrat';
- font-style: italic;
- font-weight: 200;
- src: url('./fonts/montserrat-v31-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-/* montserrat-regular - latin */
-@font-face {
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
- font-family: 'Montserrat';
- font-style: normal;
- font-weight: 400;
- src: url('./fonts/montserrat-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-/* montserrat-italic - latin */
-@font-face {
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
- font-family: 'Montserrat';
- font-style: italic;
- font-weight: 400;
- src: url('./fonts/montserrat-v31-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-/* montserrat-900 - latin */
-@font-face {
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
- font-family: 'Montserrat';
- font-style: normal;
- font-weight: 900;
- src: url('./fonts/montserrat-v31-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-/* montserrat-900italic - latin */
-@font-face {
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
- font-family: 'Montserrat';
- font-style: italic;
- font-weight: 900;
- src: url('./fonts/montserrat-v31-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+ --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 {
@@ -382,10 +289,6 @@
body {
margin: 0;
- /*padding: 2rem;*/
- /*@media (width < 500px) {*/
- /* padding: 1rem;*/
- /*}*/
}
*,
@@ -448,13 +351,16 @@
dl {
margin: 0;
padding: 0;
- list-style: inside;
+ list-style: outside;
ul,
ol,
dl {
padding-inline-start: 2ch;
}
}
+ li {
+ padding-bottom: .5rem;
+ }
img,
video,
@@ -469,9 +375,17 @@
inline-size: fit-content;
margin-inline: auto;
}
+ figure img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
figcaption {
contain: inline-size;
font-size: 90%;
+ background-color: rgba(var(--base),var(--op-3));
+ text-align: center;
+ font-style: italic;
}
input,
@@ -546,13 +460,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 {
@@ -605,352 +576,59 @@
}
}
}
-/***************************************************************
+
+/*************************************************************
SCROLLBAR
-***************************************************************/
+*************************************************************/
* {
scrollbar-width: thin;
- scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+ scrollbar-color: var(--sb-thumb) var(--sb-track);
}
/* For WebKit browsers (Chrome, Safari, etc.) */
::-webkit-scrollbar {
- width: var(--scrollbar-width);
- height: var(--scrollbar-width);
+ width: var(--sb-width);
+ height: var(--sb-width);
}
::-webkit-scrollbar-track {
- background: var(--scrollbar-track-color);
+ background: var(--sb-track);
}
::-webkit-scrollbar-thumb {
- background-color: var(--scrollbar-thumb-color);
- border-radius: var(--scrollbar-border-radius);
- border: var(--scrollbar-thumb-border);
+ background-color: var(--sb-thumb);
+ border-radius: var(--sb-radius);
+ border: var(--sb-thumb-border);
}
::-webkit-scrollbar-thumb:hover {
- background-color: var(--scrollbar-thumb-hover-color);
+ background-color: var(--sb-thumb-hover);
}
-
-body{
- background-color: var(--base-50);
- color: var(--contrast);
- max-width: 100vw;
- overflow-x: hidden;
+/*************************************************************
+BASE
+*************************************************************/
+body {
+ background-color: rgb(var(--base-50));
+ color: rgb(var(--contrast));
margin: 0;
font-family: var(--body);
- font-weight: var(--bWeight);
- font-size: var(--medium);
+ font-weight: var(--fw-b);
+ font-size: var(--txt-medium);
line-height: 1.4;
position: relative;
-}
- body b,
- body strong {
- font-weight: var(--bBold);
- }
-
-
-*:target {
- scroll-snap-margin-top: max(6rem, 20vh);
- scroll-margin-top: max(6rem, 20vh);
- outline: double var(--action-0);
- border-radius: var(--outerRadius);
- padding: var(--outerPadding);
-}
-body.menu_item *:target h2 {
- background-color: var(--action-0);
- color: var(--action-contrast);
+ max-width: 100vw;
}
body,
body * {
- transition: background-color var(--transition-base);
- transition-property: background-color, border;
+ transition: var(--trans-color)
}
-
-
-/**************************************************************
-UTILITY CLASSES
-**************************************************************/
-body:has(aside.expanded),
-body:has(nav.open),
-body:has(dialog[open]),
-body.loading {
- overflow: hidden;
-}
-
-
-*[hidden] {
- display: none!important;
-}
-
-@media (max-width: 767px){
- .hide-small {
- display: none;
- }
-}
-.width-50 {
- width: 100%;
-}
-.width-25 {
- width: 50%;
-}
-.width-75 {
- width: 100%;
-}
-.w-full {
- width: 100%;
-}
-
-
-@media (min-width: 768px){
- .buttons li.width-50,
- .width-50 {
- width: calc(50% - .3em);
- }
- .width-25 {
- width: calc(25% - .3em);
- }
- .width-75 {
- width: calc(75% - .3em);
- }
-}
-
-.row:not(.icon),
-.col {
- display: flex;
- justify-content: var(--justify);
- align-items: var(--align);
- gap: var(--gap);
- flex-wrap: var(--wrap);
- flex-direction: var(--dir);
-}
-.col {
- --dir: column;
-}
-.row:not(.icon) {
- --dir: row;
-}
-.col.rev {
- --dir: column-reverse;
-}
-.row.rev {
- --dir: row-reverse;
-}
-
-.nowrap {
- --wrap: nowrap;
-}
-.col.a-start,
-.row.start {
- --justify: flex-start;
-}
-
-.col.a-end,
-.row.end {
- --justify: flex-end;
-}
-.col.btw,
-.row.btw {
- --justify: space-between;
-}
-.col.even,
-.row.even {
- --justify: space-evenly;
-}
-
-.col.start,
-.row.a-start {
- --align: flex-start;
-}
-
-.col.end,
-.row.a-end {
- --align: flex-end;
-}
-
-.abs {
- position: absolute;
-}
-*:has(>.abs) {
- position: relative;
-}
-.hidden {
- transform: scale(0);
- max-width: 0;
- max-height: 0;
- overflow: hidden;
- transition: var(--transition-transform), var(--transition-size);
-}
-
-.visible {
- transform: scale(1);
- max-width: 100%;
- max-height: 100%;
- transition: var(--transition-transform), var(--transition-size);
-}
-
-/******************************************************************
-THEME SWITCHER & TOGGLE
-******************************************************************/
-.theme-switcher {
- position: absolute;
- opacity: 0;
- width: 0;
- height: 0;
-}
-#theme-switch {
- z-index: 99;
- position: absolute;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-#theme-switch,
-.toggle-switch {
- --wrap: nowrap;
- cursor: pointer;
-}
-#theme-switch,
-.toggle-switch input[type=checkbox] {
- --h: 2rem;
- width: calc(var(--h) * 2);
- height: var(--h);
- margin: 0 2rem 0 0;
- left: 0;
- appearance:none;
- background: var(--base-200);
- border: 1px solid var(--base-50);
- border-radius: var(--h);
- cursor: pointer;
- transition: all .3s ease;
- opacity: 1;
-}
-
-.toggle-switch input[type=checkbox] {
- position: relative;
-}
-.toggle-switch {
- position: relative;
-}
-
-@media (max-width: 600px) {
- #theme-switch {
- left: 1rem;
- }
- .wp-site-blocks > header {
- padding: 0!important;
- }
-}
-
-/* Icon wrapper styling */
-#theme-switch .icon {
- --w: 1em;
- position: relative;
- top: 0;
- margin: 0 .25em;
- color: var(--contrast-200);
- z-index: 2;
- transform: translateX(0);
-}
-
-
-#theme-switcher:not(:checked) ~ .sun-dim,
-#theme-switcher:checked ~ .moon {
- --w: 1.5em;
- color: var(--contrast);
-}
-
-#theme-switcher:not(:checked) ~ .moon,
-#theme-switcher:checked ~ .sun-dim {
- top: -.17rem;
-}
- #theme-switcher:not(:checked) ~ .sun-dim {
- color: var(--secondary-0);
- transform: translate(-2px, 2px);
- }
- #theme-switcher:checked ~ .moon {
- transform: translate(4px, 4px);
- }
-
-#theme-switch span,
-.toggle-switch input[type=checkbox]::before {
- --m: 2px;
- content: "";
- position: absolute;
- top: var(--m);
- left: var(--m);
- width: calc(var(--h) - (var(--m) * 2));
- height: calc(var(--h) - var(--m) * 2);
- border: 1px solid rgba(var(--contrast-rgb), .2);
- border-bottom: 3px solid var(--contrast-200);
- background: var(--base-50);
- border-radius: 50%;
- z-index: 1;
- transform: rotate(360deg);
- transition: transform var(--transition-base),
- left var(--transition-base),
- top var(--transition-base),
- height var(--transition-base);
-}
- #theme-switch input:checked ~ span,
- .toggle-switch input[type=checkbox]:checked::before {
- left: calc(100% - (var(--h) - var(--m)));
- transform: rotate(-180deg);
- transition: transform var(--transition-base), left var(--transition-base);
- }
- .toggle-switch input[type=checkbox]:checked {
- background: var(--action-0);
- }
-
-/* Focus States */
-.theme-switch:focus-visible + label {
- outline: 2px solid var(--action-0);
- outline-offset: 2px;
-}
-
-/* Icon Animations */
-#theme-switch .icon {
- transition:
- transform var(--transition-base),
- width var(--transition-base),
- height var(--transition-base),
- top var(--transition-base),
- color var(--transition-base);
-}
-
-#theme-switcher:not(:checked) ~ .icon.dark,
-#theme-switcher:checked ~ .icon.light {
- transform: rotate(360deg);
- color: var(--contrast-200);
-}
-#theme-switcher:not(:checked) ~ .icon.light,
-#theme-switcher:checked ~ .icon.dark {
- transform: rotate(-360deg);
- color: var(--contrast);
-}
-
-/* Hover Effects */
-#theme-switch:hover span {
- background-color: var(--base-100);
-}
-
-
-#theme-switch:hover .icon {
- color: var(--action-50);
-}
-
-/* Active State */
-#theme-switch:active span {
- transform: scale(.97);
-}
-
-/***********************************************************
-SMOOTH SCROLLING
-***********************************************************/
+/*************************************************************
+LAYOUT
+*************************************************************/
html {
scroll-behavior: smooth;
+ overflow-x: hidden;
}
@media(prefers-reduced-motion){
@@ -962,430 +640,1442 @@
animation: none!important;
}
}
+/*body:has(aside.expanded),*/
+/*body:has(nav.open:not(.drawer)),*/
+/*body:has(dialog[open]),*/
+/*body.loading {*/
+/* overflow: hidden;*/
+/* max-height: 100vh;*/
+/*}*/
-/*********************************************************
-SPACING
-*********************************************************/
main {
- min-height: 60vh;
-}
+ --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, 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 > * {
- width: 100%;
- max-width: var(--maxWidth);
- margin: var(--setMargin);
-}
-main > .align-wide {
- max-width: var(--alignWide);
-}
-main > .align-full {
- --ml: 0;
- --mr: 0;
- max-width: var(--full);
+ grid-column: content;
}
main > section {
- --mt: 6rem;
+ padding: 3rem 0;
+ grid-column: full;
}
+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 */
+main .align-narrow {
+ grid-column: narrow;
+}
+
+main .align-content {
+ grid-column: content;
+}
+
+main .align-wider {
+ grid-column: wider;
+ width: 100%;
+}
+
+main .align-wide {
+ grid-column: wide;
+ width: 100%;
+}
+
+main .align-full {
+ grid-column: full;
+ width: 100%;
+ max-width: none;
+}
+
+/* First child has no top spacing */
main > *:first-child {
margin-top: 0;
}
+.wp-site-blocks > header {
+ position: sticky;
+ top: 0;
+ z-index: var(--z-8);
+ 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"] {
+ display: flex;
+ align-items: center;
+ max-height:var(--btn);
+ overflow:hidden;
+ margin: 0 auto;
+}
+.scroll-progress {
+ position: absolute;
+ inset-inline: 0;
+ bottom: 0;
+ height: 3px;
+ display: flex;
+ align-items: center;
+ pointer-events: none;
+ z-index: var(--z-3);
+ background-color: rgb(var(--base-200));
+ overflow: hidden;
+}
+
+.scroll-progress .bar {
+ width: 100%;
+ height: 1px;
+ transform-origin: left center;
+ transform: scaleX(0);
+ background: rgb(var(--action-0));
+}
+
footer {
- padding: 1rem 1rem var(--offHeight);
- background-color: var(--base-200);
- color: var(--contrast-200);
+ padding: 1rem;
+ background-color: rgb(var(--base));
+ color: rgb(var(--contrast-200));
text-align: center;
margin: 4rem 0 0;
position: relative;
- z-index: var(--z-top);
+ z-index: var(--z-7);
}
-footer p,
-footer p + p {
- margin: .5rem auto;
-}
+ footer p {
+ margin: 0 auto;
+ }
+body:has(nav.fixed.bottom,nav.on-this-page) footer {
+ padding-bottom: var(--btn_);
+}
@media (min-width:768px) {
footer {
- padding: 1rem 2rem var(--offHeight);
+ padding: 1rem 2rem var(--btn_);
}
}
-/*********************************************************
-GRIDS
-*********************************************************/
-.grid-view,
-.item-grid {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 10px;
-}
-.grid-view .item,
-.item-grid .item {
- border-radius: var(--outerRadius);
- aspect-ratio: 1;
- display:flex;
- filter: none;
- transition: filter var(--transition-base), padding var(--transition-base), background-color var(--transition-base);
-}
-.grid-view img,
-.item-grid img {
- border-radius: var(--innerRadius);
-}
-.item-grid.list-view {
- display: flex;
- flex-direction: column;
- gap: 2rem;
- --gap: 2rem;
-}
-.item-grid.list-view .item .col {
- --gap: .5rem;
-}
-.item-grid.list-view img {
- width: 20%;
+*:target {
+ scroll-snap-margin-top: var(--btnbtn);
+ scroll-margin-top: var(--btnbtn);
+ outline: double rgb(var(--action-200));
+ background-color: rgb(var(--base));
}
-@media (min-width: 768px) {
- .item-grid,
- .grid-view {
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
- }
+/***********************
+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
-*********************************************************/
-h1 b, h1 strong,
-h2 b, h2 strong,
-h3 b, h3 strong,
-h4 b, h4 strong,
-h5 b, h5 strong,
-h6 b, h6 strong {
- text-decoration: double;
- -webkit-text-fill-color: transparent;
- -webkit-text-stroke: 2px var(--contrast);
+***********************************************************/
+body :is(b, strong) {
+ font-weight: var(--fw-b-bold);
}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- --mt: 1.5em;
- --mb: .875em;
+:is(h1, h2, h3, h4, h5, h6) {
font-family: var(--heading);
text-transform: uppercase;
- font-weight: var(--hWeight);
+ font-weight: var(--fw-h);
line-height: 1.3;
- margin: var(--mt) var(--mr) var(--mb) var(--ml);
+ margin: 1.5em auto .25em;
+ width: 100%;
}
-h1.inline,
-h2.inline,
-h3.inline,
-h4.inline,
-h5.inline,
-h6.inline {
+: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);
+ letter-spacing: 2px;
+}
+
+:is(h1, h2, h3, h4, h5, h6) small {
+ display: block;
+ line-height: .8;
+ font-family: var(--body);
+ font-size: .5em;
+}
+:is(h1, h2, h3, h4, h5, h6) small :is(b, strong) {
+ font-weight: var(--fw-b-bold);
+}
+
+: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;
}
-h1.inline + *,
-h2.inline + *,
-h3.inline + *,
-h4.inline + *,
-h5.inline + *,
-h6.inline + * {
+:is(h1, h2, h3, h4, h5, h6).inline + * {
display: inline-block;
margin: .5rem 0;
}
-h1.inline + .term-list,
-h2.inline + .term-list,
-h3.inline + .term-list,
-h4.inline + .term-list,
-h5.inline + .term-list,
-h6.inline + .term-list {
- display: inline-flex;
- margin: .5rem 0;
-}
h1 {
- font-size: var(--xxxlarge);
- font-weight: var(--hWeight);
+ font-size: var(--txt-xxx-large);
+ font-weight: var(--fw-h);
line-height: 1;
- margin: 0 var(--mr) .25em var(--ml);
-}
-h1:first-of-type {
- margin-top: 20vh;
-}
-h1 small {
- display: block;
- font-size: var(--small);
- font-weight: var(--bWeight);
- line-height: 1;
- font-family: var(--body);
+ margin: 10vh auto .25em;
}
-h2 {
- font-size: var(--xxlarge);
+h1 small + small {
+ display: inline-block;
+ font-size: var(--txt-large);
+ margin-right: .5rem;
}
-h3 {
- font-size: var(--xlarge);
-}
+
+h2 { font-size: var(--txt-xx-large); }
+h3 { font-size: var(--txt-x-large); }
h4 {
- /*font-family: var(--body);*/
font-weight: 400;
- font-size: var(--large);
+ font-size: var(--txt-large);
}
h5, h6 {
- /*font-family: var(--body);*/
font-weight: 400;
- font-size: var(--medium);
+ font-size: var(--txt-medium);
}
p {
line-height: 1.6;
}
-p + p {
- margin-top: 2.5rem;
-}
-
-a {
- color: var(--action-0);
- text-decoration: none;
-}
-ul a {
- display: inline-flex;
- text-decoration: none;
-}
-
-a:visited {
- color: var(--action-100);
-}
-a:hover {
- color: var(--action-50);
- text-decoration: underline;
-}
-/******************************************************************
-BUTTONS
-******************************************************************/
-.buttons {
- --wrap: wrap;
- --justify: flex-start;
- margin: 1rem var(--mr) 1rem var(--ml);
- width: 100%;
- padding: 0;
-}
-.buttons.fit {
- width: fit-content;
- margin: 1rem 2rem;
-}
-.buttons li {
- --justify: stretch;
- --align: stretch;
- padding: 0;
- list-style: none;
- overflow:hidden;
-}
-.buttons {
- margin: 3rem auto;
- max-width: 90%;
-}
-
-@media (min-width: 768px){
- .buttons {
- max-width: var(--maxWidth);
- margin: 3rem var(--mr) 3rem var(--ml);
+ .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;
}
-}
-[type=submit],
-a.button,
-a.wp-block-button__link,
-button {
- --justify: center;
- --align: center;
- --dir: row;
- width: fit-content;
- text-transform: uppercase;
- text-decoration: none;
- background-color: var(--base-100);
- color: var(--contrast-50);
- border: 1px solid var(--base-200);
- border-radius: var(--innerRadius);
- padding: .25rem 1rem;
- font: inherit;
- cursor: pointer;
- outline: inherit;
- display: inline-flex;
- justify-content: var(--justify);
- align-items: var(--align);
- gap: var(--gap);
- flex-wrap: var(--wrap);
- flex-direction: var(--dir);
- transition: color var(--transition-base);
- transition-property: color, border,background-color;
- position: relative;
-}
-[type=submit]:hover,
-[type=submit]:focus,
-.buttons a:hover,
-a.button:hover,
-a.button:focus,
-a.wp-block-button__link:hover,
-a.wp-block-button__link:focus,
-button:hover,
-button:focus {
- background-color: var(--action-0);
- color: var(--action-contrast);
+ :not(.row >) p:has(+p) {
+ margin-bottom: 0;
+ }
+ :not(.row >) p + p {
+ margin-top: 0;
+ }
+
+.hint {
+ line-height: 1.2;
+ font-style: italic;
+ font-size: var(--txt-small);
}
-
-[type=submit]:disabled,
-[type=submit]:disabled:hover,
-[type=submit]:disabled:focus,
-a.button:disabled,
-a.wp-block-button__link:disabled,
-button:disabled,
-a.button:disabled:hover,
-a.wp-block-button__link:disabled:hover,
-button:disabled:hover,
-a.button:disabled:focus,
-a.wp-block-button__link:disabled:focus,
-button:disabled:focus {
- opacity: .5;
- background-color: var(--base-200)!important;
- color: var(--contrast-200)!important;
-}
-details .icon {
- --w: 1.5em;
+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;
}
-button.voted svg,
-button.favourite.favourited {
- animation: favourite-pop .4s cubic-bezier(.25, .46, .45, .94);
+/******************************************************
+LINKS
+******************************************************/
+a {
+ color: rgb(var(--action-0));
+ border-radius: 4px;
+ padding: .125rem;
}
-@keyframes favourite-pop {
- 0% { transform: scale(1); }
- 50% { transform: scale(1.3); }
- 75% { transform: scale(.9); }
- 100% { transform: scale(1); }
+ a:visited {
+ color: rgb(var(--action-100));
+ }
+ a:hover,
+ a:visited:hover {
+ color: rgb(var(--contrast-50));
+ text-decoration: none;
+ }
+
+ :is(p, li, h1,h2,h3,h4,h5,h6, small) a:hover {
+ color: 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;
}
-button.filter-toggle {
- border: 1px solid var(--base-200);
- background-color: transparent;
- white-space: nowrap;
- font-size: 1rem;
- 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);
-}
+/** SWITCHING ICONS **/
+/**** If, say, a button has two icons, one gets hidden on one state, and one gets shown on another, add it here **/
-button.favourite:not(.favourited) .heart-fill,
-button.favourite.favourited .heart,
-.toggle.notifications:not(.has) .bell-ringing,
-.toggle.notifications.has .bell,
+.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;
}
-button.favourite:not(.favourited) .heart,
-button.favourite.favourited .heart-fill,
-.toggle.notifications:not(.has) .bell,
-.toggle.notifications.has .bell-ringing,
+
+.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;
}
-/******************************************************************
-ICONS
-******************************************************************/
-.icon {
- width: var(--w);
- height: var(--w);
- display: inline-flex;
- transition: var(--transition-size), var(--transition-color);
+/*******************************************************
+LISTS
+*******************************************************/
+ol {
+ list-style-type: decimal;
}
-.icon svg {
+
+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: 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: 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); }
+
+.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%;
- height: 100%;
-}
-.icon.small,
-nav ul .icon {
- --w: 24px;
}
-.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%);
- mask-image: var(--colour);
- -webkit-mask-image: var(--colour);
- -webkit-mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-repeat: no-repeat;
- mask-size: contain;
- width: 1.25rem;
- height: 1.25rem;
+.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);}
+.p-4 {padding: var(--sp4);}
+.p-5 {padding: var(--sp5);}
+.p-6 {padding: var(--sp6);}
+.p-7 {padding: var(--sp7);}
+
+.px-1 {padding-left: var(--sp1);padding-right: var(--sp1);}
+.px-2 {padding-left: var(--sp2);padding-right: var(--sp2);}
+.px-3 {padding-left: var(--sp3);padding-right: var(--sp3);}
+.px-4 {padding-left: var(--sp4);padding-right: var(--sp4);}
+.px-5 {padding-left: var(--sp5);padding-right: var(--sp5);}
+.px-6 {padding-left: var(--sp6);padding-right: var(--sp6);}
+.px-7 {padding-left: var(--sp7);padding-right: var(--sp7);}
+
+.py-1 {padding-top: var(--sp1);padding-bottom: var(--sp1);}
+.py-2 {padding-top: var(--sp2);padding-bottom: var(--sp2);}
+.py-3 {padding-top: var(--sp3);padding-bottom: var(--sp3);}
+.py-4 {padding-top: var(--sp4);padding-bottom: var(--sp4);}
+.py-5 {padding-top: var(--sp5);padding-bottom: var(--sp5);}
+.py-6 {padding-top: var(--sp6);padding-bottom: var(--sp6);}
+.py-7 {padding-top: var(--sp7);padding-bottom: var(--sp7);}
+
+.pt-1 { padding-top: var(--sp1); }
+.pr-1 { padding-right: var(--sp1); }
+.pl-1 { padding-left: var(--sp1); }
+.pb-1 { padding-bottom: var(--sp1); }
+.pt-2 { padding-top: var(--sp2); }
+.pr-2 { padding-right: var(--sp2); }
+.pl-2 { padding-left: var(--sp2); }
+.pb-2 { padding-bottom: var(--sp2); }
+.pt-3 { padding-top: var(--sp3); }
+.pr-3 { padding-right: var(--sp3); }
+.pl-3 { padding-left: var(--sp3); }
+.pb-3 { padding-bottom: var(--sp3); }
+.pt-4 { padding-top: var(--sp4); }
+.pr-4 { padding-right: var(--sp4); }
+.pl-4 { padding-left: var(--sp4); }
+.pb-4 { padding-bottom: var(--sp4); }
+.pt-5 { padding-top: var(--sp5); }
+.pr-5 { padding-right: var(--sp5); }
+.pl-5 { padding-left: var(--sp5); }
+.pb-5 { padding-bottom: var(--sp5); }
+.pt-6 { padding-top: var(--sp6); }
+.pr-6 { padding-right: var(--sp6); }
+.pl-6 { padding-left: var(--sp6); }
+.pb-6 { padding-bottom: var(--sp6); }
+.pt-7 { padding-top: var(--sp7); }
+.pr-7 { padding-right: var(--sp7); }
+.pl-7 { padding-left: var(--sp7); }
+.pb-7 { padding-bottom: var(--sp7); }
+
+/** MARGIN **/
+.m-0 {margin: 0;}
+.m-1 {margin: var(--sp1);}
+.m-2 {margin: var(--sp2);}
+.m-3 {margin: var(--sp3);}
+.m-4 {margin: var(--sp4);}
+.m-5 {margin: var(--sp5);}
+.m-6 {margin: var(--sp6);}
+.m-7 {margin: var(--sp7);}
+
+.mx-1 {margin-left: var(--sp1);margin-right: var(--sp1);}
+.mx-2 {margin-left: var(--sp2);margin-right: var(--sp2);}
+.mx-3 {margin-left: var(--sp3);margin-right: var(--sp3);}
+.mx-4 {margin-left: var(--sp4);margin-right: var(--sp4);}
+.mx-5 {margin-left: var(--sp5);margin-right: var(--sp5);}
+.mx-6 {margin-left: var(--sp6);margin-right: var(--sp6);}
+.mx-7 {margin-left: var(--sp7);margin-right: var(--sp7);}
+
+.my-1 {margin-top: var(--sp1);margin-bottom: var(--sp1);}
+.my-2 {margin-top: var(--sp2);margin-bottom: var(--sp2);}
+.my-3 {margin-top: var(--sp3);margin-bottom: var(--sp3);}
+.my-4 {margin-top: var(--sp4);margin-bottom: var(--sp4);}
+.my-5 {margin-top: var(--sp5);margin-bottom: var(--sp5);}
+.my-6 {margin-top: var(--sp6);margin-bottom: var(--sp6);}
+.my-7 {margin-top: var(--sp7);margin-bottom: var(--sp7);}
+
+.mt-1 { margin-top: var(--sp1); }
+.mr-1 { margin-right: var(--sp1); }
+.ml-1 { margin-left: var(--sp1); }
+.mb-1 { margin-bottom: var(--sp1); }
+.mt-2 { margin-top: var(--sp2); }
+.mr-2 { margin-right: var(--sp2); }
+.ml-2 { margin-left: var(--sp2); }
+.mb-2 { margin-bottom: var(--sp2); }
+.mt-3 { margin-top: var(--sp3); }
+.mr-3 { margin-right: var(--sp3); }
+.ml-3 { margin-left: var(--sp3); }
+.mb-3 { margin-bottom: var(--sp3); }
+.mt-4 { margin-top: var(--sp4); }
+.mr-4 { margin-right: var(--sp4); }
+.ml-4 { margin-left: var(--sp4); }
+.mb-4 { margin-bottom: var(--sp4); }
+.mt-5 { margin-top: var(--sp5); }
+.mr-5 { margin-right: var(--sp5); }
+.ml-5 { margin-left: var(--sp5); }
+.mb-5 { margin-bottom: var(--sp5); }
+.mt-6 { margin-top: var(--sp6); }
+.mr-6 { margin-right: var(--sp6); }
+.ml-6 { margin-left: var(--sp6); }
+.mb-6 { margin-bottom: var(--sp6); }
+.mt-7 { margin-top: var(--sp7); }
+.mr-7 { margin-right: var(--sp7); }
+.ml-7 { margin-left: var(--sp7); }
+.mb-7 { margin-bottom: var(--sp7); }
+
+/******************************************************
+COLORS
+******************************************************/
+.base {
+ --color: rgb(var(--base));
+}
+ .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));
+}
+ .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));
+}
+ .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));
+}
+ .secondary-50 {
+ --color: rgb(var(--secondary-50));
+ }
+ .secondary-100 {
+ --color: rgb(var(--secondary-100));
+ }
+ .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);
}
-.icon.logo-basic svg path {
- transition: fill var(--timing) var(--function);
-}
-.icon.logo-basic svg path#innerCircle,
-.icon.logo-basic svg path#outerSkull {
- fill: var(--base);
+/******************************************************************
+DUOTONE
+*****************************************************************//******************************************************************/
+.duotone {
+ isolation: isolate;
+ position: relative;
+ overflow: hidden;
+ background: rgb(var(--contrast));
}
-a .icon.logo-basic:hover svg path {
- fill: var(--base);
-}
-a .icon.logo-basic:hover svg path#innerCircle,
-a .icon.logo-basic:hover svg path#outerSkull {
- fill: var(--action-0);
-}
-
-.icon.grab {
- cursor: grab;
-}
-
-main a .icon {
- margin-right: .5em;
-}
-
-body:has(#theme-switcher:not(:checked)) .icon.logo-split-color {
+.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;
}
-body:has(#theme-switcher:not(:checked)) .icon.logo-split-color::before{
- content: '';
- display: block;
- width:60%;
- height:60%;
- border-radius: 50%;
- background-color: var(--dark-200);
- position: absolute;
- left: 18%;
- top: 22%;
- z-index:-1;
+ /*.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
+******************************************************************/
+/** 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);
+ gap: var(--gap);
+ flex-wrap: var(--wrap);
+ flex-direction: var(--dir);
+ --align: center;
+ --justify: center;
+ --gap: .5rem;
+ --wrap: wrap;
+ width: 100%;
+}
+.stretch.stretch > * {
+ flex: 1;
}
-path#refresh {
- transform-origin: center;
- transform-box: fill-box;
- animation: spin 1s var(--function) infinite;
+.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;}
+@media (min-width: 768px) {
+ .nowrap.nowrap.stack-small { --wrap: nowrap;}
}
+.row.row.top,
+.col.col.left { --align: flex-start; }
+.col.col.top,
+.row.row.left { --justify: flex-start; }
+
+.row.row.btm,
+.col.col.right { --align: flex-end; }
+.col.col.btm,
+.row.row.right { --justify: flex-end; }
+
+.row.row.x-mid,
+.col.col.y-mid { --justify: center; }
+.row.row.y-mid,
+.col.col.x-mid { --align: center; }
+
+.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; }
+.top-right { top: 0; right: 0; }
+.top-left { top: 0; left: 0; }
+.btm { bottom: 0; left: 0; right: 0; }
+.btm-right { bottom: 0; right: 0; }
+.btm-left { bottom: 0; left: 0; }
+.edges { inset: 0; }
+
+.hidden {
+ transform: scale(0);
+ max-width: 0;
+ max-height: 0;
+ overflow: hidden;
+ transition: var(--trans-transform), var(--trans-size);
+}
+
+.visible {
+ transform: scale(1);
+ max-width: 100%;
+ max-height: 100%;
+ transition: var(--trans-transform), var(--trans-size);
+}
+
+/******************************************************************
+THEME SWITCHER
+******************************************************************/
+.field .switch {
+ display: inline-flex;
+}
+.switch .slider {
+ --trans-t: .0125s;
+ position: relative;
+ width: var(--chipchip);
+ height: var(--chip);
+ background-color: rgb(var(--base-200));
+ border-radius: .75rem;
+ overflow: hidden;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border: 4px solid transparent;
+ 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));
+ }
+
+ .switch :active ~ .slider::before {
+ transform: translateX(0);
+ }
+ #theme-switch {
+ z-index: var(--z-6);
+ margin: 0;
+ --wrap: nowrap;
+ --gap: 1rem;
+ }
+ #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/ROWS/TABLES
+************************************************/
+/** GRID VIEW (default) **/
+.item-grid{
+ --columns: repeat(2, 1fr);
+ display: grid;
+ grid-template-columns: var(--columns);
+ gap: 10px;
+}
+.item-grid:empty {
+ display: none;
+}
+ .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);
+ }
+ }
+
+.item-grid .item {
+ border-radius: var(--radius-outer);
+ filter: none;
+ position: relative;
+}
+ .item-grid .item .item-actions {
+ --gap: .125rem;
+ z-index: 1;
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: calc(100% - var(--btn));
+ }
+ .item-actions button,
+ .item-actions .btn + label {
+ min-height: var(--chipchip);
+ width: var(--chipchip);
+ z-index: var(--z-1);
+ }
+.item-grid .item .images,
+.item-grid .item .images a {
+ aspect-ratio: 1;
+ width: 100%;
+ height: 100%;
+ display: flex;
+}
+.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 {
+ 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;
+ }
+
+.empty-state {
+ --w: 1.2em;
+ grid-column: 1 / span 2;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ margin: 1rem auto;
+ max-width: 66%;
+ background-color: rgb(var(--base-100));
+ border: 2px dashed rgb(var(--base-50));
+ padding: 1rem;
+}
+
+/***********************************************
+TABLES
+***********************************************/
+table {
+ white-space: nowrap;
+ width: 100%;
+ display: table;
+ margin: 0 0 2rem;
+ border-radius: 4px;
+ height: min(100%, var(--maxHeight));
+ color: rgb(var(--contrast));
+ overflow: auto;
+ position: relative;
+}
+
+thead,tfoot {
+ position: sticky;
+ z-index: 10;
+ background-color: rgb(var(--base));
+ text-transform: uppercase;
+ padding: .5rem 0;
+ line-height: 2;
+ font-weight: normal;
+}
+
+tr:nth-of-type(even){
+ background-color: rgb(var(--base-200));
+}
+
+tfoot th {
+ vertical-align: middle;
+}
+
+tfoot th:first-of-type {
+ text-align: right;
+}
+
+thead tr, tfoot tr {
+ background-color: rgba(var(--base),var(--op-6));
+ box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
+}
+
+thead tr {
+ border-bottom: 1px solid rgb(var(--contrast-200));
+}
+
+tfoot tr {
+ border-top: 1px solid rgb(var(--contrast-200));
+}
+
+thead {
+ top: 0;
+}
+
+tfoot {
+ bottom: 0;
+}
+
+thead th {
+ width: max-content;
+}
+
+th p {
+ margin: 0!important;
+}
+
+td {
+ width: max-content;
+ padding: .5rem 1rem;
+}
+
+td .toggle input[type=checkbox] {
+ margin: 0;
+}
+
+td .field {
+ margin: .25rem 0;
+}
+
+td[data-id="actions"] label {
+ margin: 0;
+ padding: 0;
+}
+
+td .description {
+ display: none;
+}
+
+td input[type=text] {
+ width: fit-content;
+ max-width: 40vw;
+ padding: .25em!important;
+ font-size: var(--txt-x-small)!important;
+}
+
+tbody tr {
+ border: 2px solid transparent;
+}
+
+tbody tr:focus-within {
+ background-color: rgb(var(--base-100));
+ border-color: rgb(var(--action-50))
+}
+
+[data-stuck] {
+ background-color: rgba(var(--base),var(--op-4));
+ position: sticky;
+ left: -1rem;
+ z-index: 15;
+ box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-subtle-right);
+}
+
+tbody [data-stuck] {
+ z-index: 5;
+}
+
+thead [data-stuck],
+tfoot [data-stuck] {
+ background: rgb(var(--base));
+}
+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);
+ padding: .25rem 1rem;
+ font-family: var(--heading);
+ cursor: pointer;
+ 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);
+}
+
+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: var(--action-contrast);
+ box-shadow: var(--shdw-none);
+}
+
+ 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: 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));
+}
+
+[type=submit] {
+ margin: 1rem 0;
+}
+
+.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: 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: 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_));
+}
/******************************************************************
ACCESSIBILITY
******************************************************************/
@@ -1401,216 +2091,284 @@
width: 1px;
word-wrap: normal !important;
}
-input[type=checkbox] + label:focus,
-input[type=checkbox] + label:focus-visible,
-input[type=radio] + label:focus,
-input[type=radio] + label:focus-visible,
+
+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: 2px solid rgb(var(--action-0)) !important;
outline-offset: 2px !important;
- box-shadow: 0 0 0 4px rgba(var(--action-rgb), var(--rgb-light))!important;
+ box-shadow: 0 0 0 4px rgba(var(--action-0), var(--op-3))!important;
}
[aria-busy="true"] {
cursor: progress;
}
-/* Disabled states */
[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);
+[type=checkbox][hidden] + label,
+[type=radio][hidden] + label,
+.btn[hidden] + label {
+ display: none!important;
}
-details[open] {
- background-color: var(--base-50);
+
+/**************************************************************
+FORM ELEMENTS
+**************************************************************/
+label {
+ display: inline-flex;
+ align-items: center;
+ gap: .5em;
}
-details summary {
- --wrap: nowrap;
- list-style: none;
- text-transform: uppercase;
+[type=radio],
+[type=checkbox] {
+ position: absolute;
+ opacity: 0;
+ left: var(--offScreen);
+}
+[type=radio] + label,
+[type=checkbox] + label {
cursor: pointer;
- border: 0;
- transition: background-color var(--transition-base);
- transition-property: background-color, border;
- position: relative;
- padding: .5rem 2.5rem .5rem .5rem;
+}
+.field:is(.radio,.checkbox) fieldset {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
gap: .5rem;
}
-details summary:hover {
- background-color: var(--base-100);
- border-color: var(--base-100);
- color: var(--contrast);
- transition: background-color var(--transition-base);
- transition-property: background-color, border,color;
-}
-details[open] > summary {
- background-color: var(--base-50);
-}
-details summary::after {
- content: "";
- background-color: var(--contrast-100);
- -webkit-mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- -webkit-mask-image: var(--details);
- mask-image: var(--details);
- mask-repeat: no-repeat;
- mask-size: contain;
- width: 1.25rem;
- height: 1.25rem;
- margin-left: auto;
- transition: background-color var(--transition-base);
- transition-property: background-color, transform;
-}
-
-details summary:hover::after,
-details[open] > summary::after {
- background-color: var(--contrast);
-}
-details[open] > summary::after {
- transform: rotate(-540deg);
- transition: background-color var(--transition-base);
- transition-property: background-color, transform;
-}
-
-details::details-content {
- opacity: 0;
- block-size: 0;
- overflow-y: clip;
- transition: content-visibility var(--timing) allow-discrete, opacity var(--timing), block-size var(--timing);
-}
-details[open]::details-content {
- opacity: 1;
- block-size: auto;
-}
-@media (prefers-reduced-motion: no-preference){
- details {
- interpolate-size: allow-keywords;
+ @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] + 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 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;
}
-/******************************************************************
-FORMS & FIELDS
-******************************************************************/
+
+
textarea,
-input[type=date],
-input[type=number],
-input[type=text],
-input[type=url],
-input[type=email],
-input[type=textarea],
-input[type=tel],
-input[type=password],
-input[type=search] {
- --p-x: 1.5rem;
+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(--medium);
- color: var(--contrast);
- padding: 1rem var(--p-x);
- border-radius: var(--innerRadius);
- background-color: var(--base);
+ 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 var(--base-100);
- border-bottom: 2px solid var(--contrast-200);
+ border: 1px solid rgb(var(--base-100));
+ border-bottom: 2px solid rgb(var(--contrast-200));
width: 100%;
max-width: 100%;
margin: 0 4px;
- transition: background-color var(--transition-base);
- transition-property: background-color, border;
}
- textarea:focus,
- input[type=number]:focus,
- input[type=text]:focus,
- input[type=url]:focus,
- input[type=email]:focus,
- input[type=textarea]:focus,
- input[type=tel]:focus,
- input[type=password]:focus,
- input[type=search]:focus {
- outline: var(--action-50);
- background-color: var(--base-100);
- color: var(--contrast);
- }
+
+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: var(--base-200);
+ 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: var(--action-contrast);
+ border-radius: 4px;
+}
+
+.field.taglist, .field.taglist .field {
+ border: none;
+}
+
+.field li.btn {
+ min-height: var(--chip);
+}
+/******************************************************************
+SELECT
+******************************************************************/
select {
- /*appearance: none;*/
- /*-webkit-appearance: none;*/
- /*-moz-appearance: none;*/
- background: var(--base);
- border: 2px solid var(--base-100);
- border-radius: var(--innerRadius);
- color: var(--contrast);
+ 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(--small);
- padding: .5rem 1rem;
+ font-size: var(--txt-small);
+ padding: var(--sp1);
width: 100%;
- transition: var(--transition-color);
}
- select:disabled {
- background-color: var(--base-50);
- border-color: var(--base-100);
- color: var(--base-200);
- cursor: not-allowed;
- }
- select option {
- background: var(--base);
- color: var(--contrast);
- padding: .5rem;
- }
- select option:hover,
- select option:focus,
- select option:active,
- select option:checked {
- background: var(--action-0);
- color: var(--base);
- box-shadow: 0 0 0 100px var(--action-0) inset;
- }
+select:disabled {
+ background-color: rgb(var(--base-50));
+ border-color: rgb(var(--base-100));
+ color: rgb(var(--base-200));
+ cursor: not-allowed;
+}
- select option:checked {
- background: var(--action-0) linear-gradient(0deg, var(--action-0) 0%, var(--action-0) 100%);
- color: var(--base);
- }
+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: var(--action-0);
+ border-color: rgb(var(--action-0));
}
select:focus {
- border-color: var(--action-0);
+ border-color: rgb(var(--action-0));
}
+/******************************************************************
+SEARCH & SPECIAL INPUTS
+******************************************************************/
input[type=search]:focus + .clear-search {
opacity: 1;
cursor: pointer;
- transition: opacity var(--transition-base);
}
.search-container .clear-search {
opacity: 0;
cursor: default;
- transition: opacity var(--transition-base);
+ 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: var(--contrast-200);
+ color: rgb(var(--contrast-200));
--w: 3rem;
}
+
input[type="search"]::-moz-search-clear-button,
input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal,
@@ -1629,1762 +2387,88 @@
-webkit-appearance:none;
}
-.integration .label,
-label {
- text-transform: uppercase;
- font-weight: bold;
- margin-bottom: .5rem;
- display: block;
-}
-
-/**********************
-SPECIAL FIELDS
-**********************/
-.selected-items {
- --justify: flex-start;
- --gap: .5rem;
- margin-bottom: .5rem;
-}
-
-.selected-item {
- padding: .25rem .5rem;
- margin: .125em;
- background: var(--base-100);
- border-radius: .25rem;
- font-size: var(--medium);
- border: 1px solid var(--base-200);
- position: relative;
-}
-
-.remove-item {
- background: none;
- border: none;
- padding: .25rem;
- cursor: pointer;
- color: #666;
- border-radius: var(--innerRadius);
- width: 1.5em;
- height: 1.5em;
-}
- .remove-item .close {
- width: .5em;
- height: .5em;
- }
-
-.remove-item:hover {
- color: var(--action-0);
- background: #fee;
-}
-
-.clear-filters {
- margin-left: auto;
- border: 1px solid var(--base-200);
-}
-[type=radio],
-[type=checkbox],
-input.ch {
- position: absolute;
- opacity: 0;
- left: -200vw;
-}
-/* Pseudo checkbox */
-[type=radio] + label,
-[type=checkbox] + label,
-input.ch + label {
- position: relative;
- cursor: pointer;
-}
-[type=radio] + label:hover,
-[type=checkbox] + label:hover {
- color: var(--action-0);
-}
-[type=radio] + label::before,
-[type=checkbox] + label::before,
-input.ch + label::before,
-[type=radio] + label::after,
-[type=checkbox] + label::after,
-input.ch + label::after {
- content: '';
- position: absolute;
- top: 50%;
-}
-
-
-[type=radio] + label::after,
-[type=checkbox] + label::after,
-input.ch + label::after {
- left: 5px;
- transform: translateY(-70%) rotate(45deg);
- width: 5px;
- height: 10px;
- border: solid var(--light-0);
- border-width: 0 2px 2px 0;
- display: none;
-}
-
-
-
-
-[type=radio] + label::before,
-[type=checkbox] + label::before,
-input.ch + label::before {
- left: 0;
- transform: translateY(-50%);
- width: 1rem;
- height: 1rem;
- border: 2px solid var(--contrast-200);
- background-color: var(--base);
- border-radius: var(--innerRadius);
- transition: background-color var(--transition-base),
- border-color var(--transition-base);
-}
- [type=radio]:hover + label::before,
- [type=checkbox]:hover + label::before,
- input.ch:hover + label::before {
- border-color: var(--action-200);
- }
-
- [type=radio]:checked + label::before,
- [type=checkbox]:checked + label::before,
- input.ch:checked + label::before {
- background-color: var(--action-0);
- border-color: var(--action-100);
- }
-
- [type=radio]:checked + label::before {
- border-radius: 50%;
- }
-
- [type=checkbox]:checked + label::after,
- input.ch:checked + label::after {
- display: block;
- left: 5px;
- top: 50%;
- transform: translateY(-70%) rotate(45deg);
- width: .35rem;
- height: .66rem;
- border: solid var(--light-0);
- border-width: 0 2px 2px 0;
- }
-
-[type=radio]:disabled + label,
-[type=checkbox]:disabled + label,
-input.ch:disabled + label {
- cursor: not-allowed;
- background-color: var(--base-50);
- color: var(--base-200);
- border-color: var(--base-200);
-}
-[type=radio]:disabled + label:hover,
-[type=checkbox]:disabled + label:hover,
-input.ch:disabled + label:hover {
- background-color: var(--base-50);
- color: var(--base-200);
- border-color: var(--base-200);
-}
- [type=radio]:disabled + label::before,
- [type=checkbox]:disabled + label::before,
- input.ch:disabled + label::before {
- border-color: var(--base-200);
- }
-
-[type=radio]:not(.btn) + label,
-[type=checkbox]:not(.btn) + label,
-input.ch + label {
- flex: 1;
- padding-left: 2rem;
- transform-origin: top center;
- transition: transform .3s ease;
- will-change: transform;
-}
-
-/* Non-pseudo checkbox, that acts more like a button/pill style */
-.btn + label::before,
-.btn + label::after {
- display: none;
-}
-.btn + label {
- --w: 1.2em; /* For icons */
- border: 1px solid var(--base-200);
- border-radius: var(--innerRadius);
- min-width: 2rem;
- min-height: 2rem;
- margin: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-wrap: nowrap;
- gap: .5rem;
- color: var(--contrast-200);
- opacity: .8;
-}
- .radio-options.status label {
- padding: 0 .5rem;
- }
-.btn:checked + label {
- border-color: var(--contrast);
- color: var(--contrast);
- opacity: 1;
-}
-
-.btn + label:hover {
- color: var(--action-50);
- border-color: var(--action-50);
-}
-
-.btn[hidden] + label {
- display: none;
-}
-
-/* DATE */
-.date-wrapper {
- position: relative;
- display: inline-block;
-}
-input[type=date] {
- padding: 8px 36px 8px 8px;
- /*border: 1px solid #ccc;*/
- border-radius: 4px;
-}
-input[type=date]::-webkit-calendar-picker-indicator {
- opacity: 0;
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- cursor: pointer;
-}
-input[type=date] + .icon {
- --w: 20px;
- position: absolute;
- right: 10px;
- top: 50%;
- transform: translateY(-50%);
- pointer-events: none; /* This allows clicks to pass through to the input below */
-}
-
-/** TIME **/
-
-
input[type=url] {
- background: var(--linkIcon);
+ background: var(--icon);
background-position: .5em;
background-size: 1em;
background-repeat: no-repeat;
padding-left: 2em;
}
-
-
-.field {
- margin: 2rem 0;
- position: relative;
-}
- .field:has(.has-tooltip) label {
- margin-left: 2rem;
- }
-/***************
-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;
-}
-.toggle-text label {
- padding-left: 0!important;
-}
-
-.toggle-text input + label .text {
- position: relative;
- margin: 0 .5rem;
- 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 {
- /*left: 0;*/
- /*position: absolute;*/
- /*top: 0;*/
- -webkit-transition: opacity .125s ease-out, -webkit-transform .125s ease-out;
- transition: opacity .125s ease-out, -webkit-transform .125s ease-out;
- transition: transform .125s ease-out, opacity .125s ease-out;
- transition: transform .125s ease-out, opacity .125s ease-out, -webkit-transform .125s ease-out;
-}
-
-.toggle-text input + label .off {
- opacity: 1;
- max-width: 100%;
- -webkit-transform: none;
- transform: none;
-}
-
-.toggle-text input + label .on {
- opacity: 0;
- max-width: 0;
- -webkit-transform: translate3d(0, 100%, 0);
- transform: translate3d(0, 100%, 0);
-}
-
-.toggle-text input:checked + label .off {
- opacity: 0;
- max-width: 0;
- -webkit-transform: translate3d(0, -100%, 0);
- transform: translate3d(0, -100%, 0);
-}
-
-.toggle-text input:checked + label .on {
- max-width: 100%;
- opacity: 1;
- -webkit-transform: none;
- transform: none;
-}
-
-
-/******************************************************************
-TAXONOMY SELECTOR
-******************************************************************/
-.items-container {
- margin: 0;
- padding: 0;
- width: 100%;
-}
-.create-new-term {
- margin-top: 1rem;
- width: 100%;
-}
- .create-new-term .field,
- .create-new-term[open] summary {
- margin-bottom: 1rem;
- }
- .create-new-term .field {
- max-width: 100%;
- }
-#jvb-selector > .wrap {
- --gap: nowrap;
-}
-/******************************************************************
-QUANTITY FIELD
-******************************************************************/
-.quantity {
- margin: 0;
-}
-.quantity label {
- margin: 0;
- font-size: var(--small);
-}
-.quantity {
- display: inline-flex;
- width: fit-content;
- align-items: center;
- justify-content: center;
- border: 1px solid transparent;
- border-radius: 4px;
- position: relative;
-}
-.quantity:focus-within {
- border-color: var(--action-0);
-}
-
-.quantity button {
- background: var(--base);
- padding: 0;
- width: 38px;
- height: 38px;
- z-index: 0;
- position: relative;
- border: 1px solid var(--base-200);
- color: var(--contrast-200);
-}
-.quantity button:hover:not(:disabled) {
- color: var(--action-0);
- border-color: var(--action-0);
- background-color: var(--base);
-}
-.quantity button:active:not(:disabled) {
- background-color: var(--action-0);
- color: var(--light-0);
- transform: scale(.95);
-}
-.quantity button:disabled {
- opacity: .5;
- cursor: not-allowed;
-}
-.quantity input[type=number] {
- z-index: 1;
- border: 1px solid var(--base-200);
- background: var(--base);
- text-align: center;
- font-size: 1.1rem;
- width: 60px;
- height: 48px;
- margin: 0;
- padding: 0!important;
- appearance: textfield;
-}
-.quantity input[type=number]::-webkit-outer-spin-button,
-.quantity input[type=number]::-webkit-inner-spin-button {
- -webkit-appearance: none;
- margin: 0;
-}
-.quantity input[type=number]:focus {
- background-color: var(--base-50);
-}
-.quantity button.increase {
- left: -2px;
- border-radius: 0 4px 4px 0;
-}
-.quantity button.decrease {
- right: -2px;
- border-radius: 4px 0 0 4px;
-}
-
/**************************************************
-LIST OVERRIDES
-**************************************************/
-.term-list {
- --justify: flex-start;
- --align: center;
- --wrap: nowrap;
- --gap: .5rem;
- --w: 1em;
- margin: 0;
- padding: 0;
- height: var(--height);
- 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 a {*/
- /* color: var(--contrast);*/
- /* text-decoration: none;*/
- /* font-size: var(--small);*/
- /* }*/
- /* .term-list a:hover {*/
- /* color: var(--action-0);*/
- /* }*/
- /*.term-list.shop a::before,*/
- /*.term-list.style a::before,*/
- /*.term-list.theme a::before,*/
- /*.term-list.city a::before,*/
- /*#by-city::before,*/
- /*#by-style::before,*/
- /*#by-theme::before,*/
- /*.term-list.all a::before{*/
- /* content:"";*/
- /* display:inline-block;*/
- /* mask-repeat: no-repeat;*/
- /* mask-size: contain;*/
- /* width: 1.2em;*/
- /* height: 1.2em;*/
- /* margin-right: .5rem;*/
- /* vertical-align: middle;*/
- /* background-color: currentColor;*/
- /*}*/
- /*.term-list a::after {*/
- /* display: none;*/
- /*}*/
-
- /*.term-list.shop a::before {*/
- /* mask-image: var(--shop);*/
- /*}*/
-
- /*.term-list.city a::before,*/
- /*#by-city::before {*/
- /* mask-image: var(--map);*/
- /*}*/
- /*.term-list.style a::before,*/
- /*#by-style::before,*/
- /*.term-list.all.styles a::before {*/
- /* mask-image: var(--style);*/
- /*}*/
- /*.term-list.theme a::before,*/
- /*#by-theme::before {*/
- /* mask-image: var(--theme);*/
- /*}*/
-/**************************************************
-MODALS DIALOGUE
-**************************************************/
-dialog::backdrop {
- backdrop-filter: blur(5px);
- background-color: var(--overlay-medium);
-}
-
-dialog[open] {
- z-index:999;
- --padding: 0;
- top: 0;
- width: min(500px, 95vw);
- border-radius: 1rem;
- height: fit-content;
- max-height: 90vh;
- overflow: hidden;
- padding: var(--padding);
- background-color: var(--base-50);
- color: var(--contrast);
- border: 1px solid var(--base-200);
- box-shadow: var(--shadow);
-}
-
-dialog > .wrap,
-dialog > form {
- overflow: hidden auto;
- max-height: 100%;
- margin: 1.5rem 0 0 1.5rem;
- padding-right: 1.2rem;
- width: calc(100% - 1.5rem - 1.2rem);
-}
-
-dialog label {
- font-weight: normal;
-}
-
-dialog h2,
-dialog h3 {
- margin: 0 0 .5rem 0;
- font-size: var(--large);
-}
-
-dialog:has(.m-actions){
- padding-bottom: var(--height);
-}
-.m-actions {
- --w: 1.5em;
- --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: var(--shadow-up);
-}
-.m-actions button {
- width: 100%;
- height: 3rem;
- border-radius: 0;
- color: var(--action-contrast);
- background-color: var(--action-50);
- border: 2px solid var(--action-50);
-}
-.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;
-}
-/****************
-GALLERY
-****************/
-dialog[open].gallery {
- width: calc(100vw - var(--padding) * 2);
- height: 99vh;
- background: var(--overlay-heavy);
-}
-
-.gallery .content {
- position: relative;
- max-width: 100%;
- max-height: 100%;
- padding: 2rem;
-}
-.gallery .favourite button.favourite {
- top: unset;
- bottom: 1rem;
- right: 1rem;
-}
-
-.gallery .image {
- max-width: 100%;
- max-height: calc(100vh - 4rem);
- object-fit: contain;
-}
-
-.gallery .cancel {
- position: absolute;
- top: 1rem;
- right: 1rem;
- background: none;
- border: none;
- color: white;
- cursor: pointer;
- padding: .5rem;
- z-index: 10;
- transition: color .3s ease;
-}
-
-.gallery .cancel:hover {
- color: var(--action-0);
-}
-
-.gallery .nav {
- position: absolute;
- top: 50%;
- height: 50%;
- z-index: 5;
- transform: translateY(-50%);
- border: none;
- color: var(--contrast);
- cursor: pointer;
- padding: 1rem;
- transition: color .3s ease;
-}
-.gallery .nav:hover {
- background-color: var(--overlay-heavy);
-}
-
-.gallery .nav:hover {
- color: var(--action-0);
-}
-
-.gallery .prev {
- left: 1rem;
-}
-
-.gallery .next {
- right: 1rem;
-}
-
-.gallery .counter {
- position: absolute;
- top: 1rem;
- left: 1rem;
- color: white;
- font-size: .875rem;
-}
-
-.gallery .content details {
- position:absolute;
- bottom: 1rem;
- left: 2rem;
- width: calc(100% - 4rem);
- background-color: var(--overlay-light);
- padding: 0;
-}
-.gallery .content details:hover,
-.gallery .content details[open] {
- background-color: var(--overlay-heavy);
- backdrop-filter: blur(5px);
-}
-.gallery .content details[open] summary {
- background-color: transparent;
-}
-/**************************************************
-TABLES
-**************************************************/
-table {
- white-space: nowrap;
- width: 100%;
- display: block;
- margin: 0 0 2rem;
- border-radius: 4px;
- height: var(--maxHeight);
- overflow: auto;
- position: relative;
-}
-thead,tfoot {
- position: sticky;
- z-index: 10;
- background-color: var(--base);
- text-transform: uppercase;
- padding: .5rem 0;
- line-height: 2;
- font-weight: normal;
-}
-
-tr:nth-of-type(even){
- background-color: var(--base-200);
-}
-tfoot th {
- vertical-align: middle;
-}
-tfoot th:first-of-type {
- text-align: right;
-}
-tbody {
-}
-thead tr, tfoot tr {
- background-color: var(--overlay-heavy);
- box-shadow: var(--shadow);
-}
-thead tr {
- border-bottom: 1px solid var(--contrast-200);
-}
-tfoot tr {
- border-top: 1px solid var(--contrast-200);
-}
-thead {
- top: 0;
-}
-tfoot {
- bottom: 0;
-}
-thead th {
- width: max-content;
-}
-th p {
- margin: 0!important;
-}
-td {
- width: max-content;
- padding: .5rem 1rem;
-}
-
-td .toggle input[type=checkbox] {
- margin: 0;
-}
-td .field {
- margin: .25rem 0;
-}
-td[data-id="actions"] label {
- margin: 0;
- padding: 0;
-}
-td .description {
- display: none;
-}
-td input[type=text] {
- width: fit-content;
- max-width: 40vw;
- padding: .25em!important;
- font-size: var(--small)!important;
-}
-
-tbody tr {
- border: 2px solid transparent;
-}
-tbody tr:focus-within {
- background-color: var(--base-100);
- border-color: var(--action-50)
-}
-
-[data-stuck] {
- background-color: var(--overlay-medium);
- position: sticky;
- left: -1rem;
- z-index: 15;
- box-shadow: var(--subtleRight);
-}
-tbody [data-stuck] {
- z-index: 5;
-}
-thead [data-stuck],
-tfoot [data-stuck] {
- background: var(--base);
-}
-
-/**************************************************
-BLOCKQUOTE
-**************************************************/
-blockquote {
- padding: var(--outerPadding);
- border-radius: var(--outerRadius);
- background-color: var(--base-50);
-}
-
-cite {
- width: 90%;
- margin: 1rem auto;
-}
-/**************************************************
-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;
- border-radius: var(--innerRadius);
- box-shadow: var(--shadow);
- 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]:hover) [role=tooltip],*/
-.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 {
- cursor: pointer;
- display: flex;
- border-radius: 50%;
- background-color: transparent;
-}
-.tt-toggle:hover,
-.tt-toggle:focus {
- background-color: var(--action-0);
- color: var(--action-contrast);
-}
-.tt-toggle:hover + [role=tooltip],
-.tt-toggle:focus + [role=tooltip] {
- visibility: visible;
-}
-
-/************************************************************
-SELECTOR
-************************************************************/
-dialog[open]#jvb-selector {
- height: 70vh;
- top: 15vh;
- display: flex;
-}
-#jvb-selector > .wrap {
- flex: 1;
-}
-
-/******************************************************************
-LOADING
-******************************************************************/
-dialog.loading {
- opacity: 0;
- transition: opacity var(--transition-base);
-}
-dialog.loading[open] {
- opacity: 1;
- transition: opacity var(--transition-base);
- width: 100vw;
- height: 100vh;
- display: flex;
- max-width: 100%;
- max-height: 100%;
- border-radius: 0;
- border: none;
- background-color: transparent;
- box-shadow: none;
- --w: 3em;
- justify-content: center;
- align-items: center;
-}
-dialog.loading[open]@starting-style {
- opacity: 0;
-}
-dialog.loading[open] > .col {
- height: fit-content;
- width: min(400px, 60vw);
- border-radius: var(--outerRadius);
- background-color: var(--overlay-medium);
- padding: 2rem;
- box-shadow: var(--shadow);
- position: relative;
-}
-
-dialog.loading[open] .spinner {
- position: absolute;
- top: 1rem;
- width: 5rem;
- height: 5rem;
- border-width: 0;
- border-top-width: 4px;
- animation: spin 1s var(--function) infinite;
-}
-.loading[open] .icon {
- color: var(--action-0);
-}
-
-dialog.loading[open] svg {
- animation: dance 2s ease-in-out infinite;
- transition: color .3s ease;
-}
-dialog.loading[open] h3 {
- color: var(--contrast);
- margin: 2rem 1rem auto !important;
- font-size: var(--large);
- width: -moz-fit-content;
- width: fit-content;
- /*-webkit-text-stroke: 1px var(--contrast);*/
- /*--g: conic-gradient(var(--action-0) 0 0) no-repeat text;*/
- /*animation: letterOutline 1s linear infinite alternate, letterInside 2s linear infinite;*/
- /*background: var(--g) 0, var(--g) 1ch, var(--g) 2ch, var(--g) 3ch, var(--g) 4ch, var(--g) 5ch, var(--g) 6ch;*/
-}
-
-dialog.loading[open] p {
- margin: .5rem auto;
-}
-
-dialog.loading[open]::after {
- animation: shimmer 3s ease-in-out infinite;
- background: linear-gradient(90deg, var(--shimmer));
- content: "";
- inset: 0;
- position: absolute;
- z-index: -1;
-}
-
-.spinner {
- width: 12px;
- height: 12px;
- border: 2px solid transparent;
- border-top: 2px solid var(--action-50);
- border-radius: 50%;
- animation: spin 1s var(--function) infinite;
-}
-
-@keyframes spin {
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
-}
-
-@keyframes shimmer {
- 0% {
- left: -50%;
- }
- 50% {
- left: 150%;
- }
- 100% {
- left: -50%;
- }
-}
-
-
-@keyframes dance {
- 0%, 100% {
- transform: rotate(-5deg) scale(1);
- }
- 50% {
- transform: rotate(5deg) scale(1.1);
- }
-}
-
-@keyframes letterOutline {
- 0% {
- background-size: 1ch 0;
- }
- 100% {
- background-size: 1ch 100%;
- }
-}
-
-@keyframes letterInside {
- 0%, 50% {
- background-position-y: 100%,0;
- }
- 50.01%, 100% {
- background-position-y: 0, 100%;
- }
-}
-
-/******************************
TABS
-******************************/
+**************************************************/
.tab-content[hidden] {
display: block!important;
transform: scaleY(0);
- height: 0;
+ max-height: 0;
overflow: hidden;
}
-.tab-content[hidden]:focus-within {
- transform: scaleY(1);
- height:auto;
-}
-nav.tabs h2 {
- margin: 0!important;
- line-height: 1;
- font-size: var(--medium);
+ .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);
+ box-shadow: rgba(var(--base), var(--op-45)) var(--shdw);
+ aspect-ratio: 3/2;
display: flex;
- color: var(--contrast);
- white-space: nowrap;
- gap: 1rem;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
}
-nav.tabs .active h2 {
- color: var(--action-contrast);
-}
-nav.tabs button {
- padding: .75rem 1.5rem;
- border-radius: 0;
- position: relative;
- border: 2px solid var(--action-0);
-}
- nav.tabs > button:first-of-type {
- border-top-left-radius: var(--innerRadius);
- }
- nav.tabs > button:last-of-type {
- border-top-right-radius: var(--innerRadius);
- }
-.tabs > button:hover,
-.tabs > button:focus {
- background-color: var(--base-200);
-}
-
-.tabs > button::after {
- content: '';
- position: absolute;
- bottom: -2px;
- left: 0;
- width: 0;
- height: 3px;
- background-color: var(--action-50);
- transition: width .3s;
-}
- .tabs > button:hover::after,
- .tabs > button.active::after {
- width: 100%;
- }
- .tabs > button.active::after {
- background-color: var(--action-200);
- }
-.tabs > button.active {
- background-color: var(--action-0);
- color: var(--action-contrast);
-}
-.tabs > button.active:hover,
-.tabs > button.active:focus {
- background-color: var(--action-100);
-}
-.tab-content h2 {
- display: none;
-}
-/*****************************************************************************
-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(--offHeight) + var(--height) + .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
-********************************************/
-/* Cursor, for typing messages */
-.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 container
-- cart
-- queue
-**************************************************/
-aside#cart,
-aside#queue {
- position: fixed;
- top: var(--doubleHeight);
- bottom: var(--offHeight);
- width: min(500px, calc(100vw - 2rem));
- background-color: var(--base);
- z-index: var(--z-5);
- box-shadow: var(--shadow);
- padding-bottom: var(--height);
- overflow: visible;
-}
-
-.qtoggle,
-.toggle-cart,
-.create-item {
- z-index: var(--z-6);
- position: fixed;
- bottom: var(--offHeight);
- width: var(--height);
- height: var(--height);
- background-color: var(--overlay-medium);
- color: var(--contrast);
- transition: width var(--transition-base), background-color var(--transition-base), color var(--transition-base), left var(--transition-base);
- box-shadow: var(--shadow);
-}
-.toggle-cart:hover,
-.qtoggle:hover,
-.create-item:hover,
-.toggle-cart:focus,
-.qtoggle:focus,
-.create-item:focus {
- background-color: rgba(var(--action-rgb),var(--rgb-heavy));
- color: var(--action-contrast);
-}
-.toggle-cart:disabled,
-.qtoggle:disabled,
-.create-item:disabled,
-.toggle-cart:disabled:hover,
-.qtoggle:disabled:hover,
-.create-item:disabled:hover,
-.toggle-cart:disabled:focus,
-.qtoggle:disabled:focus,
-.create-item:disabled:focus {
- opacity: .5;
- background-color: var(--overlay-light);
- color: var(--contrast);
-}
-/******************
-CART
-******************/
-.create-item,
-.toggle-cart {
- right: 0;
- border-radius: 4px 4px 4px var(--outerRadius);
-}
-
-body:has(#cart.expanded) .toggle-cart {
- width: min(500px, calc(100vw - 2rem));
-}
-body:has(#cart.expanded) .toggle-cart .icon {
- display: none;
-}
-
-aside#cart {
- overflow: hidden;
- right: var(--offScreen);
- border-radius: var(--outerRadius) 0 0 var(--outerRadius);
- transition: right var(--transition-base);
- padding-bottom: 6rem;
-}
-aside#cart.expanded {
- right: 0;
- transition: right var(--transition-base);
-}
-#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: var(--shadow);
-}
-#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(--height);
- width: 100%;
- max-width: 100%;
- background-color: var(--overlay-heavy);
- z-index: var(--z-6);
- box-shadow: var(--shadow-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(--rgb-light));
- border-radius: var(--outerRadius);
- padding: 1rem;
-}
- .restored h3 {
- font-size: var(--medium);
+ .card h4 {
margin: 0;
+ text-transform: uppercase;
}
- .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: var(--overlay-heavy);
- border-left: 4px solid var(--action-0);
- padding: 1rem;
- box-shadow: var(--shadow);
- 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
-******************/
-aside#queue {
- left: var(--offScreen);
- border-radius: 0 var(--outerRadius) var(--outerRadius) 0;
- transition: left var(--transition-base);
- --wrap: nowrap;
- --align: stretch;
-}
-aside#queue.expanded {
- left: 0;
- overflow: hidden auto;
-}
-
-.qtoggle {
- left: 0;
- border-radius: 4px 4px var(--outerRadius) 4px;
-}
-
-body:has(#queue.expanded) .qtoggle {
- left: var(--height);
- width: min(calc(500px - var(--height)), calc(100vw - 2rem - var(--height)));
-}
-
-.qtoggle.saving svg {
- color: var(--action-0);
- animation: spin .87s var(--function) 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(--innerRadius);
- padding: .25em .75em;
- top: 1rem;
- left: -100vw;
- transition: left var(--transition-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(--offHeight));
- 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: var(--overlay-light);
-}
-.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;
-}
-aside#queue.pending:not(.expanded) + .qtoggle svg {
- color: var(--error);
- animation: spin 1s var(--function) infinite;
-}
-
-/* Status count badge */
-.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(--innerRadius);
- font-size: var(--extra-small);
-}
-
-#queue:has(.empty-queue) + .qtoggle .count {
- display: none;
-}
-
-aside#queue .header {
- padding: 15px;
- border-bottom: 1px solid var(--base-200);
- flex-shrink: 0;
-}
-.qitems {
- flex: 1;
- overflow: hidden auto;
- padding: .5rem 2rem;
- --gap: .5rem;
-}
-
-aside#queue h3 {
- margin: 0 0 12px 0;
- font-size: 16px;
- color: var(--contrast);
-}
-
-#queue .filters .filter {
- background-color: transparent;
- white-space: nowrap;
- font-size: var(--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);
-}
-
-
-/* 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(--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(--innerRadius);
- transition: all .2s ease;
- box-shadow: var(--shadow-none);
-}
-
-#queue .item:hover {
- box-shadow: var(--shadow);
-}
-
-#queue .item .header {
- position: relative;
-}
-
-#queue .item .type {
- font-size: var(--small);
-}
-
-#queue .item .status {
- --w: 1em;
- --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: 1.25em;
- height: 1.25em;
-}
-
-#queue .item .status.pending {
- background: var(--base-100);
- color: var(--contrast-200);
-}
-#queue .item .status.processing {
- background: var(--base-200);
- color: var(--contrast-100);
- animation: pulse-color 2s infinite;
-}
-
-#queue .item .status.completed {
- background: var(--base-50);
- color: var(--base-200);
-}
-#queue .item .status.completed:hover {
- color: var(--contrast-200);
-}
-
-#queue .item .status.failed {
- background: var(--base);
- color: var(--error);
-}
-
-
-#queue .item button {
- font-size: 16px;
- padding: 0;
- line-height: 1;
- opacity: .5;
- transition: opacity .2s;
-}
-
-#queue .item button:hover {
- opacity: 1;
-}
-
-/* Item details */
-#queue .item .info {
- margin-top: 8px;
- font-size: var(--small);
-}
-#queue .item .info .time {
- --gap: 7px;
- font-size: 10px;
-}
-
-/* Item actions */
-#queue .item .actions {
- margin-top: 12px;
- --gap: 8px;
-}
-
-#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: 15px;
- border-top: 1px solid var(--base-200);
- flex-shrink: 0;
-}
-
-.queue-actions button {
- padding: 8px 12px;
- font-size: var(--small);
- transition: all .2s;
-}
-
-
-/* Refresh area */
-.status-actions > .refresh {
- position: relative;
- font-size: var(--small);
-}
-
-.refresh .countdown {
- --justify:center;
- --align: center;
- --offset: 0;
- right: var(--offset);
- margin: 0 3px;
- border-radius: 50%;
- border: 1px solid var(--base-200);
-}
-
-.refreshNow {
- width: var(--height);
- height: var(--height);
-}
-
-.refreshNow:hover {
- background: var(--base-200);
- color: var(--contrast-200);
-}
-
-.icon.refresh {
- --w: 18px;
-}
-
-/* Refreshing animation */
-#queue.pending.expanded .refreshNow svg {
- animation: spin 1.5s var(--function) infinite;
-}
-/**************************************************
-DELAY
-**************************************************/
-/* Initialize counter on the parent container */
-.item-grid, #queue {
- counter-reset: delay-counter;
-}
-
-/* Increment counter for each item */
-.item {
- counter-increment: delay-counter;
-}
-
-/* Use counter value to calculate delay */
-.item .progress .fill::after {
- --delay: calc(counter(delay-counter) * .1s);
+.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: var(--base-200);
+ background: rgb(var(--base-200));
position: relative;
}
.progress .fill {
height: 100%;
- background: var(--action-0);
+ 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(--small);
- color: var(--contrast);
+ font-size: var(--txt-x-small);
+ color: rgb(var(--contrast));
text-align: center;
padding: .25rem 0;
}
+
.progress .details:empty {
display: none;
}
@@ -3407,78 +2491,1102 @@
);
animation: shimmer 2.5s infinite linear var(--delay);
}
-/**************************************************
-RESPONSES
-**************************************************/
-/*dialog.create-response {*/
-/* width: min(650px, calc(95vw - (var(--padding) * 2)));*/
-/*}*/
-/*dialog.create-response .original {*/
-/* height: 20vh;*/
-/* overflow-y: scroll;*/
-/* padding: 1rem;*/
-/* background-color: var(--base-100);*/
-/* border-radius: var(--innerRadius);*/
-/*}*/
-/*dialog.create-response .editor-container .ql-container {*/
-/* height: 30vh;*/
-/*}*/
+/**************************************************************
+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));
+ }
-/*.responses summary {*/
-/* text-transform: none;*/
-/* display: block;*/
-/*}*/
-/*.news .header {*/
-/* margin-right: 2rem;*/
-/*}*/
-/*.news > summary::after,*/
-/*.responses summary::after {*/
-/* display: block;*/
-/* position: absolute;*/
-/* top: 0;*/
-/* right: 0;*/
-/* mask-image: var(--chevron);*/
-/*}*/
-/*.responses[open] > summary {*/
-/* background-color: inherit;*/
-/*}*/
-/*.responses[open] {*/
-/* background-color: var(--base-200);*/
-/*}*/
-/*.responses {*/
-/* margin: 1rem 0;*/
-/*}*/
+ 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);
+ }
-/*.response {*/
-/* background-color: inherit;*/
-/*}*/
-/*.response[open] {*/
-/* background-color: var(--base-100);*/
-/*}*/
-/*.response[open] > summary {*/
-/* background-color: inherit;*/
-/*}*/
-/*.news[open] > summary::after,*/
-/*.responses[open] > summary::after,*/
-/*.response[open] > summary::after {*/
-/* mask-image: var(--chevron);*/
-/*}*/
-/*.response > summary::after {*/
-/* display: none;*/
-/*}*/
-/*.response:has(.response) > summary::after {*/
-/* display: block;*/
-/*}*/
-/*.response:nth-of-type(even) {*/
-/* background-color: var(--base-50);*/
-/*}*/
-/*button.reply {*/
-/* margin-left: auto;*/
-/*}*/
-/**************************************************
-ANIMATIONS
-**************************************************/
-/** Used for Loading **/
+ 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);
+}
+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;
+ top: 5vh;
+ 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 {
+ max-height: var(--maxHeight);
+ overflow: hidden auto;
+ 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: 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 ul {
+ list-style: none;
+ }
+ dialog .search-container {
+ padding-top: 1rem;
+ width: 100%;
+ gap: .5rem;
+ }
+
+ /** 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;
+ padding: 0;
+ list-style-type: none;
+}
+ ul.gallery::after {
+ content: '';
+ display: block;
+ flex-grow: 10;
+ }
+
+ ul.gallery li {
+ flex-grow: 1;
+ height: 40vh;
+ margin: .2em;
+ overflow: hidden;
+ }
+
+ 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;
+ }
+ }
+/*** 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: 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: 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));
+}
+
+.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;
+}
+
+.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: 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: 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 {
+ 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;
+}
+
+.no-results p,
+.no-results {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+
+/** TODO: LIST OVERRIDES **/
+/*********************************************************
+DIRECTORY
+*********************************************************/
+.directory-list > ul {
+ max-width: none;
+}
+.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
+******************************************************************/
+dialog.loading {
+ opacity: 0;
+}
+
+dialog.loading[open] {
+ opacity: 1;
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ max-width: 100%;
+ max-height: 100%;
+ border-radius: 0;
+ border: none;
+ background-color: transparent;
+ box-shadow: none;
+ --w: 3em;
+ justify-content: center;
+ align-items: center;
+ inset: 0;
+}
+
+dialog.loading[open]@starting-style {
+ opacity: 0;
+}
+
+dialog.loading[open] > .col {
+ height: fit-content;
+ width: min(400px, 60vw);
+ border-radius: var(--radius-outer);
+ background-color: rgba(var(--base),var(--op-4));
+ padding: 2rem;
+ box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
+ position: relative;
+}
+
+dialog.loading[open] .spinner {
+ position: absolute;
+ top: 1rem;
+ width: 5rem;
+ height: 5rem;
+ border-width: 0;
+ border-top-width: 4px;
+ animation: spin 1s var(--trans-fn) infinite;
+}
+
+.loading[open] i.icon {
+ background-color: rgb(var(--action-0));
+}
+
+dialog.loading[open] i.icon {
+ animation: dance 2s ease-in-out infinite;
+}
+
+dialog.loading[open] h3 {
+ color: rgb(var(--contrast));
+ margin: 2rem 1rem auto !important;
+ font-size: var(--txt-large);
+ width: -moz-fit-content;
+ width: fit-content;
+}
+
+dialog.loading[open] p {
+ margin: .5rem auto;
+}
+
+dialog.loading[open]::after {
+ animation: shimmer 3s ease-in-out infinite;
+ background: linear-gradient(90deg, var(--shimmer));
+ content: "";
+ inset: 0;
+ position: absolute;
+ z-index: -1;
+}
+
+.spinner {
+ width: 12px;
+ height: 12px;
+ border: 2px solid transparent;
+ border-top: 2px solid rgb(var(--action-50));
+ border-radius: 50%;
+ animation: spin 1s var(--trans-fn) infinite;
+}
+
+/** ANIMATIONS **/
@keyframes shimmer {
0% {
left: -50%;
@@ -3491,20 +3599,18 @@
}
}
-
@keyframes pulse-color {
0% {
- box-shadow: 0 0 0 0 rgba(var(--secondary-rgb), .4);
+ box-shadow: 0 0 0 0 rgba(var(--action-0), .4);
}
- 70% {
- box-shadow: 0 0 0 6px rgba(var(--secondary-rgb), 0);
+ 30% {
+ box-shadow: 0 0 0 .75rem rgba(var(--action-0), 0);
}
100% {
- box-shadow: 0 0 0 0 rgba(var(--secondary-rgb), 0);
+ box-shadow: 0 0 0 0 rgba(var(--action-0), 0);
}
}
-/** fadeIn & fadeOut, for adding/removing items **/
@keyframes fadeIn {
from {
opacity: 0;
@@ -3527,923 +3633,21 @@
}
}
-/******************************************
-OVERFLOW DETECTION
-Include this in items to detect:
-// Scroll detection animation
-animation: detect-scroll linear;
-animation-timeline: scroll(self inline);
-******************************************/
-/* Scroll detection keyframe */
-@keyframes detect-scroll {
- from, to {
- --can-scroll: 1;
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+@keyframes dance {
+ 0%, 100% {
+ transform: rotate(-5deg) scale(1);
+ }
+ 50% {
+ transform: rotate(5deg) scale(1.1);
}
}
-
-/******************************************************************
-DIRECTORY
-******************************************************************/
-
-/*.directory-list {*/
-/* max-width: var(--alignWide);*/
-/*}*/
-/*.directory-list ul {*/
-/* gap: 0;*/
-/*}*/
-/* .directory-list li.title {*/
-/* margin-left: -1rem;*/
-/* }*/
-
-
-/*.is-directory section {*/
-/* max-width: var(--full);*/
-/* width: calc(var(--full) - 1rem);*/
-/* padding: 0 .5rem;*/
-/*}*/
-/* .is-directory .list-none ul,*/
-/* .is-directory .list-none {*/
-/* margin: 0;*/
-/* padding: 0;*/
-/* list-style: none;*/
-/* }*/
-/* .is-directory .list-none ul {*/
-/* width: 80%;*/
-/* }*/
-/* .is-directory .list-none > li + li {*/
-/* border-top: 1px solid var(--base-100);*/
-/* padding-top: 2rem;*/
-/* margin-top: 2rem;*/
-/* }*/
-/* .is-directory .list-none ul li {*/
-/* background-color: var(--base-50);*/
-/* padding: .5rem .25rem;*/
-/* }*/
-/* .is-directory .list-none ul li:nth-of-type(even){*/
-/* background-color: var(--base-100);*/
-/* }*/
-/* .is-directory .list-none h3 {*/
-/* margin: .5rem auto!important;*/
-/* position: sticky;*/
-/* text-align: center;*/
-/* top: 4rem;*/
-/* font-size: 20vw;*/
-/* color: var(--base-200);*/
-/* background-color: var(--base);*/
-/* width: 20%;*/
-/* }*/
-/* @media (min-width:768px){*/
-/* .is-directory section {*/
-/* max-width: var(--alignWide);*/
-/* }*/
-/* .is-directory .list-none,*/
-/* .is-directory .list-none ul {*/
-/* padding-left: 2rem;*/
-/* }*/
-/* .is-directory .list-none h3 {*/
-/* text-align: left;*/
-/* top: 8rem;*/
-/* position: sticky;*/
-/* background-color: transparent;*/
-/* }*/
-/* }*/
-
-/*.directories > .directory {*/
-/* border-radius: 1rem;*/
-/* background-color: var(--base-100);*/
-/* text-align: center;*/
-/* padding: .5rem;*/
-/*}*/
-/*.directories > .directory a .icon {*/
-/* --w: 3rem;*/
-/* margin: 0;*/
-/*}*/
-/*.directory h2 {*/
-/* font-size: var(--large);*/
-/* margin: .5rem 0!important;*/
-/* width: 100%;*/
-/*}*/
-/*@media (min-width: 768px) {*/
-/* .directories {*/
-/* display: grid;*/
-/* grid-template-columns: repeat(3, 1fr);*/
-/* gap: 1rem;*/
-/* }*/
-/*}*/
-
-/*nav.directory li {*/
-/* list-style: none;*/
-/* display: inline-flex;*/
-/*}*/
-/*.grouped-directory {*/
-/* margin: 0;*/
-/* padding: 0;*/
-/* list-style: none;*/
-/*}*/
-/* .grouped-directory .grouped-directory {*/
-/* padding-left: 2rem;*/
-/* }*/
-/*.grouped-directory li:not(:has(details)) {*/
-/* padding: .625rem;*/
-/*}*/
-/*.grouped-directory summary a {*/
-/* order: 1;*/
-/* text-transform: none;*/
-/*}*/
-/*.grouped-directory summary::after {*/
-/* order: 2;*/
-/*}*/
-/*.grouped-directory li details[open] > summary,*/
-/*.grouped-directory li details[open] {*/
-/* background-color: var(--base-100);*/
-/*}*/
-
-/*.grouped-directory details[open] details[open] > summary,*/
-/*.grouped-directory details[open] details[open] {*/
-/* background-color: var(--overlay-light);*/
-/*}*/
-
-/*.is-directory h1 {*/
-/* margin-top: 3rem!important;*/
-/*}*/
-/******************************************************************
-NORTHEH
-******************************************************************/
-.menu-items .menu-item {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 0 1rem;
-}
-.menu-items .menu-item:not(.variable) label {
- display: none;
- }
-.menu-items .menu-item .field {
- margin: 0;
- --wrap: nowrap;
- }
-.menu-items .menu-item .has-tooltip {
- position: absolute;
- right: -2.5rem;
- }
-.menu-items .menu-item + .menu-item {
- border-top: 1px solid var(--base-200);
- margin-top: 2rem;
- padding-top: 1rem;
- }
-.menu-items .menu-item .header {
- grid-column: 1/-1;
-}
-.menu-items .menu-item .description {
- grid-column: 1/3;
-}
-.menu-items .menu-item .info {
- grid-column: 3/3;
-}
-.menu-items .menu-item h3 {
- font-size: var(--medium);
- font-weight: normal;
- margin: 0 0 .5rem 0!important;
-}
-
-.menu-items .menu-item .info {
- --gap: 1rem;
-}
-.price > span {
- vertical-align: super;
- font-size: 12px;
-}
-body.menu_item section h2 {
- display: inline-block;
- max-width: var(--maxWidth);
- width: max-content;
- background-color: var(--base-50);
- color: var(--action-0);
- position: relative;
- z-index: 5;
- padding: 0 1rem;
- margin: var(--mt) auto var(--mb) auto;
-}
-
-.menu-section {
- position: relative;
-}
-.menu-section hr {
- position: absolute;
- width: 100%;
- left: -5%;
- top: 3.5rem;
- border: none;
- background-color: var(--action-100);
- height: 2px;
-}
-
-
-details.menu-item summary.row {
- flex-direction: column;
- align-items: flex-start;
-}
-details.menu-item summary .row {
- width: 100%;
-}
-
-.menu_item h1:first-of-type {
- margin-top: 10vh!important;
-}
-
-@media (min-width: 768px) {
- .menu-section hr {
- width: 120%;
- left: -10%;
- top: 4.25rem;
- }
-
- .menu_item section {
- max-width: var(--maxWidth);
- }
-
- /*details.menu-item summary.row {*/
- /* flex-direction: var(--dir);*/
- /* align-items: var(--justify);*/
- /*}*/
-}
-/**
-TODO: For Legacy
-Triangles Loader
-
-.loading-wrapper {
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 2rem 1rem 1rem;
-}
-.loader-wrap {
- height: 75px;
- width: 75px;
-}
-.new-term-toggle:disabled + .loader,
-.loading .loader {
- width: 50px;
- aspect-ratio: 1.154;
- display: grid;
- color: var(--action-0);
- background:
- linear-gradient(to bottom left ,#0000 calc(50% - 1px),currentColor 0 calc(50% + 1px),#0000 0) right/50% 100%,
- linear-gradient(to bottom right,#0000 calc(50% - 1px),currentColor 0 calc(50% + 1px),#0000 0) left /50% 100%,
- linear-gradient(currentColor 0 0) bottom/100% 2px;
- background-repeat: no-repeat;
- transform-origin: 50% 66%;
- animation: l5 4s infinite linear;
-}
-.new-term-toggle:disabled + .loader::before,
-.new-term-toggle:disabled + .loader::after,
-.loading .loader::before,
-.loading .loader::after {
- content: "";
- grid-area: 1/1;
- background: inherit;
- transform-origin: inherit;
- animation: inherit;
-}
-.new-term-toggle:disabled + .loader::after,
-.loading .loader::after {
- animation-duration: 2s;
-}
-@keyframes l5{
- 100% {transform:rotate(1turn)}
-}
- */
-
-/* DONE TO HERE */
-
-
-
-/*dialog .search-wrapper {*/
-/* padding: .5rem;*/
-/*}*/
-
-
-/*.favourite-terms ul {*/
-/* gap: .25rem 1rem;*/
-/* padding: 0;*/
-/*}*/
-/* .favourite-terms label::before,*/
-/* .favourite-terms label::after {*/
-/* display: none;*/
-/* }*/
-/* .favourite-terms label {*/
-/* padding: .25rem .5rem!important;*/
-/* border: 1px solid var(--base-200);*/
-/* color: var(--contrast-200);*/
-/* border-radius: var(--innerRadius);*/
-/* }*/
-/* .favourite-terms :checked + label,*/
-/* .favourite-terms label:hover {*/
-/* border-color: var(--action-0);*/
-/* color: var(--action-0);*/
-/* }*/
-/*.items-container {*/
-/* padding: 0;*/
-/*}*/
-/* .items-container li .children {*/
-/* width: 100%;*/
-/* padding-left: 1rem;*/
-/* }*/
-/*.path button+button::before {*/
-/* content: ' > ';*/
-/* display: inline-block;*/
-/* margin: 0 .5rem;*/
-/*}*/
-/*!** Forms **!*/
-
-
-/*!*.field.time_open,*!*/
-/*!*.field.time_closes,*!*/
-/*!*.field.date_start,*!*/
-/*!*.field.time_start,*!*/
-/*!*.field.time_end {*!*/
-/*!* margin-bottom: 0;*!*/
-/*!*}*!*/
-
-/*!*.field.time_open,*!*/
-/*!*.field.time_closes,*!*/
-/*!*.field.time_start,*!*/
-/*!*.field.time_end {*!*/
-/*!* width: 49%;*!*/
-/*!* display: inline-block;*!*/
-/*!* margin-top: 1rem;*!*/
-/*!*}*!*/
-
-/*[data-h] {*/
-/* 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;*/
-/*}*/
-
-/*.checkbox-options {*/
-/* --gap: .5rem 2rem;*/
-/*}*/
-/*.checkbox-options label {*/
-/* flex: unset!important;*/
-/*}*/
-
-/*.radio-options {*/
-/* --gap: .125rem .5rem;*/
-/*}*/
-
-/*.radio-options input:not(.ch) + label::before {*/
-/* display: none!important;*/
-/*}*/
-/*.radio-options input:not(.ch) + label {*/
-/* flex: unset!important;*/
-/* padding: .25rem!important;*/
-/* border-radius: 4px;*/
-/* border: 1px solid var(--base-100);*/
-/* color: var(--contrast-200);*/
-/* transition: var(--transition-color)!important;*/
-/* font-weight: normal;*/
-/* !*width: 40%;*!*/
-/* text-align: center;*/
-/*}*/
-/*.radio-options input:not(.ch) + label:hover,*/
-/*.radio-options input:not(.ch):checked + label {*/
-/* border-color: var(--action-0);*/
-/* color: var(--action-0);*/
-/* transition: var(--transition-color);*/
-/*}*/
-
-
-
-/*!* Style for disabled state *!*/
-
-
-
-/*.date-range {*/
-/* padding: 2rem;*/
-/* border: none;*/
-/* border-radius: var(--innerRadius);*/
-/* background: var(--base);*/
-/* box-shadow: var(--shadow);*/
-/*}*/
-/*.date-range::backdrop {*/
-/* backdrop-filter: blur(5px);*/
-/* background: var(--overlay-medium);*/
-/*}*/
-
-/*.custom-range,*/
-/*.month-picker {*/
-/* --gap: 1rem;*/
-/* margin-bottom: 1rem;*/
-/*}*/
-/*.custom-range input,*/
-/*.month-picker select {*/
-/* padding: .5rem;*/
-/* border: 1px solid var(--base-100);*/
-/* border-radius: var(--innerRadius);*/
-/* background: var(--base-200);*/
-/* color: var(--contrast);*/
-/* font: inherit;*/
-/*}*/
-/*.custom-range input:focus,*/
-/*.month-picker select:focus {*/
-/* outline: none;*/
-/* border-color: var(--action-0);*/
-/*}*/
-/*!** Shop Page **!*/
-/*.shop header {*/
-/* max-width: var(--full);*/
-/*}*/
-/*.shop header img {*/
-/* width: 100%;*/
-/* height: auto;*/
-/*}*/
-/*.shop header h1 {*/
-/* margin-bottom: .5em;*/
-/*}*/
-/*.ratings {*/
-/* margin: 0;*/
-/*}*/
-/*!** Bio Sections **!*/
-/*.bio-info {*/
-/* max-width: var(--alignWide);*/
-/* padding: .25em;*/
-/* border-radius: var(--outerRadius);*/
-/* font-size: var(--medium);*/
-/* line-height: 1.5;*/
-/*}*/
-/*.bio-info section {*/
-/* margin: 4rem 0;*/
-/*}*/
-/*.shop .column,*/
-/*.bio-info .column {*/
-/* --justify: center;*/
-/*}*/
-/*.bio-info[open] {*/
-/* background-color: var(--base-100);*/
-/*}*/
-/*.bio-info summary {*/
-/* padding: .25rem;*/
-/* position: relative;*/
-/* border-radius: var(--innerRadius);*/
-/*}*/
-/*.bio-info[open] summary {*/
-/* background-color: var(--base-50);*/
-/* margin-bottom: 1rem;*/
-/*}*/
-/*.bio-info > div:not(.columns) {*/
-/* margin: 4rem 0;*/
-/* padding: 0 1rem;*/
-/*}*/
-/*.bio-info h2 {*/
-/* margin: 0!important;*/
-/* font-size: var(--medium);*/
-/* font-family: var(--body);*/
-/* font-weight: var(--bWeight);*/
-/*}*/
-
-/*.bio-info h3 {*/
-/* margin: 1em 0!important;*/
-/* font-size: var(--medium);*/
-/*}*/
-/*.bio-info figure {*/
-/* margin: 0;*/
-/* padding: 0;*/
-/*}*/
-/*.bio-info img {*/
-/* width: 100%;*/
-/* height: auto;*/
-/* aspect-ratio: 5/4;*/
-/* object-fit: cover;*/
-/*}*/
-
-/* #contact {*/
-/* max-width: var(--alignWide);*/
-/* }*/
-/* #contact h2,*/
-/* section.inline h2 {*/
-/* font-size: var(--medium);*/
-/* font-weight: var(--bWeight);*/
-/* margin: 0 0 .5em 0!important;*/
-/* white-space: nowrap;*/
-/* }*/
-/*ul.contact {*/
-/* list-style: none;*/
-/* display: inline-flex;*/
-/* justify-content: flex-start;*/
-/* flex-wrap: wrap;*/
-/* align-items: center;*/
-/* gap: 1rem;*/
-/* margin: 0;*/
-/* padding: 0;*/
-/*}*/
-/* ul.contact + ul.contact {*/
-/* margin-left: 1rem;*/
-/* }*/
-/* ul.contact a{*/
-/* color: var(--contrast);*/
-/* }*/
-/* ul.contact a:hover {*/
-/* color: var(--action-0);*/
-/* }*/
-
-/*.term-list {*/
-/* display: inline-flex;*/
-/* flex-wrap: wrap;*/
-/* list-style: none;*/
-/* text-transform: lowercase;*/
-/* margin: 0;*/
-/* padding: 0;*/
-/* gap: 0 .5em;*/
-/*}*/
-/*p.loading {*/
-/* text-align: center;*/
-/* margin: 3rem 0;*/
-/*}*/
-/*
-/*.term-list li {*/
-/* padding: 2px 6px;*/
-/*}*/
-
-/*ul.simple-list {*/
-/* margin: 0;*/
-/* padding: 0;*/
-/* list-style: none;*/
-/*}*/
-/*ul.reviews li + li{*/
-/* margin-top: 2rem;*/
-/*}*/
-
-
-
-/*!*!* Status notification *!*/
-/*!*.status-notification {*!*/
-/*!* position: fixed;*!*/
-/*!* bottom: 20px;*!*/
-/*!* left: 80px; !* Position to the right of the panel *!*!*/
-/*!* width: 300px;*!*/
-/*!* max-width: calc(100vw - 100px);*!*/
-/*!* border-radius: 8px;*!*/
-/*!* padding: 15px;*!*/
-/*!* background: #323232;*!*/
-/*!* color: white;*!*/
-/*!* transform: translateY(20px);*!*/
-/*!* opacity: 0;*!*/
-/*!* transition: transform .3s, opacity .3s;*!*/
-/*!* z-index: 10000;*!*/
-/*!* box-shadow: 0 4px 20px rgba(0, 0, 0, .2);*!*/
-/*!* pointer-events: none;*!*/
-/*!*}*!*/
-
-/*!*.status-notification.active {*!*/
-/*!* transform: translateY(0);*!*/
-/*!* opacity: 1;*!*/
-/*!* pointer-events: auto;*!*/
-/*!*}*!*/
-
-/*!*.status-notification .title {*!*/
-/*!* font-weight: 600;*!*/
-/*!* margin-bottom: 5px;*!*/
-/*!* font-size: 15px;*!*/
-/*!*}*!*/
-
-/*!*.status-notification .message {*!*/
-/*!* margin-bottom: 10px;*!*/
-/*!* font-size: 14px;*!*/
-/*!*}*!*/
-
-/*!*.status-notification .actions {*!*/
-/*!* display: flex;*!*/
-/*!* justify-content: flex-end;*!*/
-/*!*}*!*/
-
-/*!*.status-notification .actions button {*!*/
-/*!* padding: 6px 12px;*!*/
-/*!* background: rgba(255, 255, 255, .2);*!*/
-/*!* border: none;*!*/
-/*!* border-radius: 4px;*!*/
-/*!* color: white;*!*/
-/*!* cursor: pointer;*!*/
-/*!* font-size: 13px;*!*/
-/*!* transition: background .2s;*!*/
-/*!*}*!*/
-
-/*!*.status-notification .actions button:hover {*!*/
-/*!* background: rgba(255, 255, 255, .3);*!*/
-/*!*}*!*/
-
-/*!* Progress containers in notifications *!*/
-/*.progress-container {*/
-/* margin-top: 15px;*/
-/* background: rgba(255, 255, 255, .1);*/
-/* border-radius: 4px;*/
-/* padding: 10px;*/
-/* transition: all .3s;*/
-/*}*/
-
-/*.progress-container.complete {*/
-/* opacity: .5;*/
-/*}*/
-
-/*!* Collapsed state - just show the toggle button *!*/
-
-
-
-
-
-
-
-/*!***/
-/*Response stuff*/
-/* *!*/
-
-/*.columns {*/
-/* --wrap: nowrap;*/
-/*}*/
-/* .columns.stack-small {*/
-/* --wrap: wrap;*/
-/* }*/
-/* @media (min-width: 768px){*/
-/* .columns.stack-small {*/
-/* --wrap: nowrap;*/
-/* }*/
-/* }*/
-/*.column {*/
-/* width: 100%;*/
-/* padding: 1rem 0;*/
-/*}*/
-
-/*.width-300 {*/
-/* width: 300px!important;*/
-/* height: auto!important;*/
-/*}*/
-
-
-
-
-/*.font-small {*/
-/* font-size: var(--small);*/
-/*}*/
-
-/*!***/
-/*Circular Loader*/
-/* *!*/
-/*!*.new-term-toggle:disabled + .loader,*!*/
-/*!*.loading .loader {*!*/
-/*!* width: 50px;*!*/
-/*!* aspect-ratio: 1;*!*/
-/*!* display: grid;*!*/
-/*!* border: 4px solid #0000;*!*/
-/*!* border-radius: 50%;*!*/
-/*!* border-right-color: var(--action-0);*!*/
-/*!* animation: l15 1s infinite linear;*!*/
-/*!*}*!*/
-/*!*.new-term-toggle:disabled + .loader::before,*!*/
-/*!*.new-term-toggle:disabled + .loader::after,*!*/
-/*!*.loading .loader::before,*!*/
-/*!*.loading .loader::after {*!*/
-/*!* content: "";*!*/
-/*!* grid-area: 1/1;*!*/
-/*!* margin: 2px;*!*/
-/*!* border: inherit;*!*/
-/*!* border-radius: 50%;*!*/
-/*!* animation: l15 2s infinite;*!*/
-/*!*}*!*/
-/*!*.new-term-toggle:disabled + .loader::after,*!*/
-/*!*.loading .loader::after {*!*/
-/*!* margin: 8px;*!*/
-/*!* animation-duration: 3s;*!*/
-/*!*}*!*/
-/*!*@keyframes l15{*!*/
-/*!* 100%{transform: rotate(1turn)}*!*/
-/*!*}*!*/
-
-
-
-/*!* High contrast mode support *!*/
-/*@media (forced-colors: active) {*/
-/* .feed-item {*/
-/* border: 1px solid CanvasText;*/
-/* }*/
-
-/* button,*/
-/* [role="button"] {*/
-/* border: 1px solid ButtonText;*/
-/* }*/
-
-/* button.favourite.favourited {*/
-/* background-color: Highlight;*/
-/* color: HighlightText;*/
-/* }*/
-/*}*/
-
-
-/*!** TODO: Verify **!*/
-
-input[type=time],
-input[type=datetime-local],
-input[type=date] {
- padding: .5rem;
- border: 1px solid var(--contrast-200);
- border-radius: 4px;
- font-size: 14px;
- min-width: 180px;
- background: var(--base);
- cursor: pointer;
- transition: border-color .2s ease;
-}
-
-.time-wrapper input[type=time]:focus,
-.datetime-wrapper input[type=datetime-local]:focus,
-.date-wrapper input[type=date]:focus {
- border-color: var(--action-0);
- box-shadow: 0 0 0 2px rgba(var(--action-rgb), .1);
-}
-
-/* Icon styling in form fields */
-.time-wrapper svg,
-.datetime-wrapper svg,
-.date-wrapper svg {
- width: 18px;
- height: 18px;
- color: #666;
- opacity: .7;
-}
-
-/*!* Required field asterisk *!*/
-/*.time-wrapper input[required],*/
-/*.datetime-wrapper input[required],*/
-/*.date-wrapper input[required] {*/
-/* border-left: 3px solid #dc3232;*/
-/*}*/
-
-/*!* Invalid field styling *!*/
-/*.time-wrapper input:invalid,*/
-/*.datetime-wrapper input:invalid,*/
-/*.date-wrapper input:invalid {*/
-/* border-color: #dc3232;*/
-/* background-color: #fef7f7;*/
-/*}*/
-
-/*!* Frontend Display *!*/
-/*.time-field-display,*/
-/*.datetime-field-display,*/
-/*.date-field-display {*/
-/* display: inline-flex;*/
-/* align-items: center;*/
-/* gap: .5rem;*/
-/* padding: .25rem 0;*/
-/*}*/
-
-/*.time-field-display svg,*/
-/*.datetime-field-display svg,*/
-/*.date-field-display svg {*/
-/* width: 16px;*/
-/* height: 16px;*/
-/* color: #0073aa;*/
-/* flex-shrink: 0;*/
-/*}*/
-
-/*.time-value,*/
-/*.datetime-value,*/
-/*.date-value {*/
-/* font-weight: 500;*/
-/* color: #333;*/
-/*}*/
-
-/*!* Set and Checkbox Field Display *!*/
-/*.set-field-display {*/
-/* --wrap: wrap;*/
-/*}*/
-
-/*.set-label,*/
-/*.checkbox-label {*/
-/* font-weight: 600;*/
-/* color: #555;*/
-/*}*/
-
-/*.set-item {*/
-/* background: #f0f0f1;*/
-/* padding: .25rem .5rem;*/
-/* border-radius: 3px;*/
-/* font-size: .9em;*/
-/* border: 1px solid #ddd;*/
-/*}*/
-
-/*!* Radio and Select Field Display *!*/
-/*.radio-field-display,*/
-/*.select-field-display {*/
-/* display: inline-flex;*/
-/* align-items: center;*/
-/* gap: .5rem;*/
-/*}*/
-
-/*.radio-label,*/
-/*.select-label {*/
-/* font-weight: 600;*/
-/* color: #555;*/
-/*}*/
-
-/*.radio-value,*/
-/*.select-value {*/
-/* background: #f8f9fa;*/
-/* padding: .25rem .5rem;*/
-/* border-radius: 3px;*/
-/* border: 1px solid #dee2e6;*/
-/*}*/
-
-/*!* True/False Field Display *!*/
-/*.true-false-display {*/
-/* display: inline-flex;*/
-/* align-items: center;*/
-/* gap: .5rem;*/
-/*}*/
-
-/*.true-false-label {*/
-/* font-weight: 600;*/
-/* color: #555;*/
-/*}*/
-
-/*.true-value {*/
-/* color: var(--success);*/
-/* font-weight: 600;*/
-/*}*/
-
-/*.false-value {*/
-/* color: var(--error);*/
-/* font-weight: 600;*/
-/*}*/
-
-/*!* Group Field Styling *!*/
-/*.group-field {*/
-/* border: 1px solid #e0e0e0;*/
-/* border-radius: 6px;*/
-/* padding: 1rem;*/
+/*.group {*/
+/* background-color: rgb(var(--base));*/
/* margin: 1rem 0;*/
-/* background: #fafafa;*/
-/*}*/
-
-/*.group-label {*/
-/* font-size: 1.1em;*/
-/* font-weight: 600;*/
-/* color: #333;*/
-/* margin: 0 0 1rem 0;*/
-/* padding-bottom: .5rem;*/
-/* border-bottom: 1px solid #e0e0e0;*/
-/*}*/
-
-/*.group-content {*/
-/* --gap: .75rem;*/
-/*}*/
-
-/*.group-item {*/
-/* padding: .5rem 0;*/
-/* border-bottom: 1px solid #f0f0f0;*/
-/*}*/
-
-/*.group-item:last-child {*/
-/* border-bottom: none;*/
-/*}*/
-
-/*.subfield-label {*/
-/* font-weight: 600;*/
-/* color: #555;*/
-/* margin-right: .5rem;*/
-/*}*/
-
-/*!* Responsive Design *!*/
-/*@media (max-width: 768px) {*/
-/* .time-wrapper input[type="time"],*/
-/* .datetime-wrapper input[type="datetime-local"],*/
-/* .date-wrapper input[type="date"] {*/
-/* min-width: 150px;*/
-/* font-size: 16px; !* Prevents zoom on iOS *!*/
-/* }*/
-
-/* .set-field-display,*/
-/* .checkbox-field-display {*/
-/* flex-direction: column;*/
-/* align-items: flex-start;*/
-/* }*/
-
-/* .group-content {*/
-/* gap: .5rem;*/
-/* }*/
-/*}*/
-
-
-
-
-
-
-
-
-
-
-
+/*}*/
\ No newline at end of file
--
Gitblit v1.10.0