/*!
|
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.5.95
|
License: GNU General Public License v2 or later
|
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
Text Domain: jv
|
*/
|
/*************************************************************
|
VARIABLES
|
*************************************************************/
|
: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;
|
--offScreen: -200vw;
|
|
/*****************************
|
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;
|
--wrap: wrap;
|
--gap: .5rem;
|
|
/*****************************
|
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: '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;
|
|
--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: #fafafa;
|
--light-50: #fcfbfb;
|
--light-100: #f1eded;
|
--light-200: #e6dfdf;
|
--light-rgb: 250,250,250;
|
--dark-0: #201313;
|
--dark-50: #261717;
|
--dark-100: #2d1b1b;
|
--dark-200: #331e1e;
|
--dark-rgb: 16,4,4;
|
--action-0: #B7332E;
|
--action-50: #a32d29;
|
--action-100: #8e2824;
|
--action-200: #7a221f;
|
--action-contrast: var(--light-0);
|
--action-rgb: 183,51,46;
|
--secondary-0: #E8A737;
|
--secondary-50: #e59d20;
|
--secondary-100: #d48f18;
|
--secondary-200: #bd7f16;
|
--secondary-contrast: var(--light-0);
|
--secondary-rgb: 232,167,55;
|
|
--success: #22C55E;
|
--successBack: #d4edda;
|
--successText:#155724;
|
--warning: #E8A737;
|
--error: #EF4444;
|
--errorBack: #f8d7da;
|
--errorText: #721c24;
|
|
--base: var(--light-0);
|
--base-50: var(--light-50);
|
--base-100: var(--light-100);
|
--base-200: var(--light-200);
|
--base-rgb: var(--light-rgb);
|
--contrast: var(--dark-0);
|
--contrast-50: var(--dark-50);
|
--contrast-100: var(--dark-100);
|
--contrast-200: var(--dark-200);
|
--contrast-rgb: var(--dark-rgb);
|
|
--shimmer: rgba(var(--dark-rgb),0) 0%,
|
rgba(var(--dark-rgb),.05) 50%,
|
rgba(var(--dark-rgb),0) 100%;
|
|
--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-7: 999;
|
--z-8: 1000;
|
--z-9: 999999;
|
--z-10: 9999999;
|
|
/*****************************
|
Rounding
|
*****************************/
|
--radius: 4px;
|
--p-outer: 1rem;
|
--radius-outer: calc(var(--radius) + var(--p-outer));
|
--p-y: 1rem;
|
--p-x: 1rem;
|
/*****************************
|
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);
|
|
/*****************************
|
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: var(--base-100);
|
--sb-thumb: var(--action-0);
|
--sb-thumb-hover: var(--action-50);
|
--sb-thumb-border: 2px solid var(--base-50);
|
--sb-radius: 4px;
|
|
--details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="%232b1a0d" viewBox="0 0 256 256"><path d="M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z"></path></svg>');
|
--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){
|
/*****************************
|
Colours
|
*****************************/
|
--mixBlendMode: lighten;
|
--coverBlend: multiply;
|
--coverIndex: 0;
|
|
--action-50: #cb3933;
|
--action-100: #d14c47;
|
--action-200: #d6605c;
|
|
--secondary-50: #ebb14e;
|
--secondary-100: #edbb65;
|
--secondary-200: #f0c57c;
|
|
--contrast: var(--light-0);
|
--contrast-50: var(--light-50);
|
--contrast-100: var(--light-100);
|
--contrast-200: var(--light-200);
|
--contrast-rgb: var(--light-rgb);
|
|
--base: var(--dark-0);
|
--base-50: var(--dark-50);
|
--base-100: var(--dark-100);
|
--base-200: var(--dark-200);
|
--base-rgb: var(--dark-rgb);
|
|
--successBack: #155724;
|
--successText:#d4edda;
|
--errorBack: #721c24;
|
--errorText: #f8d7da;
|
|
--shimmer: rgba(var(--c),0) 0%,
|
rgba(var(--c),.05) 50%,
|
rgba(var(--c),0) 100%;
|
}
|
/* https://frontendmasters.com/blog/the-coyier-css-starter/ */
|
@layer reset {
|
html {
|
color-scheme: light dark;
|
font:
|
clamp(1rem, 1rem + 0.5vw, 2rem) / 1.4 system-ui,
|
sans-serif;
|
tab-size: 2;
|
hanging-punctuation: first allow-end last;
|
word-break: break-word;
|
}
|
|
body {
|
margin: 0;
|
}
|
|
*,
|
*::before,
|
*::after {
|
box-sizing: border-box;
|
}
|
|
h1,
|
h2 {
|
font-weight: 900;
|
letter-spacing: -0.02rem;
|
}
|
h1,
|
h2,
|
h3 {
|
line-height: 1.1;
|
}
|
h1,
|
h2,
|
h3,
|
h4,
|
h5,
|
h6 /* FUTURE :heading */ {
|
text-wrap: balance;
|
margin-block-start: 0;
|
}
|
|
p,
|
li,
|
dd {
|
text-wrap: pretty;
|
max-inline-size: 88ch;
|
}
|
|
a {
|
color: oklch(0.68 0.17 228);
|
text-underline-offset: 2px;
|
&:not(:is(:hover, :focus)) {
|
text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);
|
}
|
}
|
|
sub,
|
sup {
|
font-size: 75%;
|
line-height: 0;
|
position: relative;
|
vertical-align: baseline;
|
}
|
sub {
|
inset-block-end: -0.25em;
|
}
|
sup {
|
inset-block-start: -0.5em;
|
}
|
|
ul,
|
ol,
|
dl {
|
margin: 0;
|
padding: 0;
|
list-style: outside;
|
ul,
|
ol,
|
dl {
|
padding-inline-start: 2ch;
|
}
|
}
|
li {
|
padding-bottom: .5rem;
|
}
|
|
img,
|
video,
|
iframe {
|
display: block;
|
max-inline-size: 100%;
|
block-size: auto;
|
border-style: none;
|
}
|
|
figure {
|
inline-size: fit-content;
|
margin-inline: auto;
|
}
|
figure img {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
}
|
figcaption {
|
contain: inline-size;
|
font-size: 90%;
|
}
|
|
input,
|
select,
|
textarea,
|
button {
|
font: inherit;
|
/* FUTURE: appearance: base; */
|
}
|
label {
|
display: block;
|
}
|
input:not(
|
:where(
|
[type="submit"],
|
[type="checkbox"],
|
[type="radio"],
|
[type="button"],
|
[type="reset"]
|
)
|
) {
|
inline-size: 100%;
|
}
|
button,
|
input:where(
|
[type="submit"],
|
[type="reset"],
|
[type="button"]
|
) {
|
background: CanvasText;
|
color: Canvas;
|
border: 1px solid transparent;
|
}
|
textarea {
|
field-sizing: content;
|
min-block-size: 5lh;
|
inline-size: 100%;
|
max-inline-size: 100%;
|
}
|
|
pre,
|
code,
|
kbd,
|
samp {
|
font-family: ui-monospace, SFMono-Regular, monospace;
|
}
|
|
svg {
|
fill: currentColor;
|
}
|
|
[aria-disabled="true" i],
|
[disabled] {
|
cursor: not-allowed;
|
}
|
[hidden] {
|
display: none !important;
|
}
|
[disabled],
|
label:has(input[disabled]) {
|
opacity: 0.5;
|
|
[disabled] {
|
opacity: 1;
|
}
|
}
|
|
pre {
|
white-space: pre-wrap;
|
background: CanvasText;
|
color: Canvas;
|
padding: 1.5rem;
|
}
|
|
hr {
|
border-style: solid;
|
border-width: 1px 0 0;
|
color: inherit;
|
height: 0;
|
overflow: visible;
|
margin-block: 2.5rem;
|
}
|
|
:target {
|
scroll-margin: 3rlh;
|
}
|
|
table {
|
caption-side: bottom;
|
border-collapse: collapse;
|
td {
|
font-size: 90%;
|
}
|
td,
|
th {
|
word-break: normal;
|
border: 1px solid gray;
|
padding: 0.5rem;
|
}
|
}
|
[role="region"][aria-labelledby][tabindex] {
|
overflow: auto;
|
}
|
caption {
|
font-size: 90%;
|
}
|
|
.screen-reader-text:not(:focus):not(:active) {
|
clip: rect(0 0 0 0);
|
clip-path: inset(50%);
|
height: 1px;
|
overflow: hidden;
|
position: absolute;
|
white-space: nowrap;
|
width: 1px;
|
}
|
:focus-visible {
|
outline-offset: 2px;
|
}
|
|
@media (prefers-reduced-motion: no-preference) {
|
@view-transition {
|
navigation: auto;
|
}
|
|
html {
|
interpolate-size: allow-keywords;
|
&:focus-within {
|
scroll-behavior: smooth;
|
}
|
}
|
}
|
}
|
|
/*************************************************************
|
SCROLLBAR
|
*************************************************************/
|
* {
|
scrollbar-width: thin;
|
scrollbar-color: var(--sb-thumb) var(--sb-track);
|
}
|
|
/* For WebKit browsers (Chrome, Safari, etc.) */
|
::-webkit-scrollbar {
|
width: var(--sb-width);
|
height: var(--sb-width);
|
}
|
|
::-webkit-scrollbar-track {
|
background: var(--sb-track);
|
}
|
|
::-webkit-scrollbar-thumb {
|
background-color: var(--sb-thumb);
|
border-radius: var(--sb-radius);
|
border: var(--sb-thumb-border);
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
background-color: var(--sb-thumb-hover);
|
}
|
|
/*************************************************************
|
BASE
|
*************************************************************/
|
body {
|
background-color: var(--base-50);
|
color: var(--contrast);
|
margin: 0;
|
font-family: var(--body);
|
font-weight: var(--fw-b);
|
font-size: var(--txt-medium);
|
line-height: 1.4;
|
position: relative;
|
max-width: 100vw;
|
}
|
body,
|
body * {
|
transition: var(--trans-color)
|
}
|
/*************************************************************
|
LAYOUT
|
*************************************************************/
|
html {
|
scroll-behavior: smooth;
|
overflow-x: hidden;
|
}
|
|
@media(prefers-reduced-motion){
|
html {
|
scroll-behavior: unset;
|
}
|
* {
|
transition: none!important;
|
animation: none!important;
|
}
|
}
|
/*body:has(aside.expanded),*/
|
/*body:has(nav.open:not(.drawer)),*/
|
/*body:has(dialog[open]),*/
|
/*body.loading {*/
|
/* overflow: hidden;*/
|
/* max-height: 100vh;*/
|
/*}*/
|
|
main {
|
display: grid;
|
grid-template-columns:
|
[full-start] minmax(1rem, 1fr)
|
[wide-start] minmax(0, calc((100% - var(--content)) / 2))
|
[wider-start] minmax(0, calc((var(--wide) - var(--wider)) / 2))
|
[content-start] minmax(0, calc((var(--wider) - var(--content)) / 2))
|
[narrow-start] min(100% - 2rem, var(--narrow)) [narrow-end]
|
minmax(0, calc((var(--content) - var(--narrow)) / 2)) [content-end]
|
minmax(0, calc((var(--wider) - var(--content)) / 2)) [wider-end]
|
minmax(0, calc((var(--wide) - var(--wider)) / 2)) [wide-end]
|
minmax(0, calc((100% - var(--content)) / 2))
|
minmax(1rem, 1fr) [full-end];
|
min-height: var(--maxHeight);
|
}
|
main > * {
|
grid-column: content;
|
}
|
main > section {
|
padding: 3rem 0;
|
grid-column: full;
|
}
|
main > section > * {
|
width: 100%;
|
max-width: var(--content);
|
}
|
|
/* Nested items can use any width */
|
main .align-narrow {
|
grid-column: narrow;
|
}
|
|
main .align-content {
|
grid-column: content;
|
}
|
|
main .align-wider {
|
grid-column: wider;
|
}
|
|
main .align-wide {
|
grid-column: wide;
|
}
|
|
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: var(--base);
|
box-shadow: rgba(var(--base-rgb), 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;
|
}
|
|
|
.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: var(--base-200);
|
overflow: hidden;
|
}
|
|
.scroll-progress .bar {
|
width: 100%;
|
height: 1px;
|
transform-origin: left center;
|
transform: scaleX(0);
|
background: var(--action-0);
|
}
|
|
aside.pre-header,
|
aside.sub-header,
|
aside.pre-footer,
|
aside.sub-footer {
|
height: var(--chip_);
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 1rem;
|
font-size: var(--txt-x-small);
|
background-color:var(--base-50);
|
z-index: var(--z-7);
|
}
|
.pre-header p {
|
width: max-content;
|
}
|
.pre-header {
|
position: sticky;
|
top: -2rem;
|
transition: top var(--trans-base);
|
}
|
.scroll-up .pre-header {
|
top: 0;
|
}
|
.scroll-up .pre-header ~ header {
|
top: calc(var(--chip_) - 2px);
|
}
|
/*.pre-header.stuck ~ #breadcrumbs {*/
|
/* margin-top: var(--chip_);*/
|
/*}*/
|
|
footer {
|
padding: 1rem;
|
background-color: var(--base-200);
|
color: var(--contrast-200);
|
text-align: center;
|
margin: 4rem 0 0;
|
position: relative;
|
z-index: var(--z-7);
|
}
|
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(--btn_);
|
}
|
}
|
|
*:target {
|
scroll-snap-margin-top: var(--btnbtn);
|
scroll-margin-top: var(--btnbtn);
|
outline: double var(--action-200);
|
background-color: var(--base);
|
}
|
|
/*************************************************************
|
TYPOGRAPHY
|
*************************************************************/
|
body :is(b, strong) {
|
font-weight: var(--fw-b-bold);
|
}
|
:is(h1, h2, h3, h4, h5, h6) {
|
font-family: var(--heading);
|
text-transform: uppercase;
|
font-weight: var(--fw-h);
|
line-height: 1.3;
|
margin: 1.5em auto .25em;
|
width: 100%;
|
}
|
:is(h1,h2,h3,h4,h5,h6), p {
|
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;
|
display: inline-block;
|
margin: 0 2rem 0 0;
|
letter-spacing: .05em;
|
}
|
|
:is(h1, h2, h3, h4, h5, h6).inline + * {
|
display: inline-block;
|
margin: .5rem 0;
|
}
|
|
:is(h1, h2, h3, h4, h5, h6).inline + .term-list {
|
display: inline-flex;
|
margin: .5rem 0;
|
}
|
|
h1 {
|
font-size: var(--txt-xxx-large);
|
font-weight: var(--fw-h);
|
line-height: 1;
|
margin: 0 auto .25em;
|
}
|
|
h1:first-of-type {
|
margin-top: 10vh;
|
}
|
|
h1 small {
|
display: block;
|
font-size: var(--txt-x-small);
|
font-weight: var(--fw-b);
|
line-height: 1;
|
margin-bottom: .75em;
|
font-family: var(--body);
|
}
|
|
h1 small + small {
|
display: inline-block;
|
font-size: var(--txt-large);
|
margin-right: .5rem;
|
}
|
|
h2 { font-size: var(--txt-xx-large); }
|
h3 { font-size: var(--txt-x-large); }
|
h4 {
|
font-weight: 400;
|
font-size: var(--txt-large);
|
}
|
h5, h6 {
|
font-weight: 400;
|
font-size: var(--txt-medium);
|
}
|
|
p {
|
line-height: 1.6;
|
}
|
|
.hint {
|
line-height: 1.2;
|
font-style: italic;
|
font-size: var(--txt-small);
|
}
|
|
/*main > * :is(h1, h2, h3, h4, h5, h6, p) {*/
|
/* width: 100%;*/
|
/*}*/
|
|
main > * p {
|
margin: .5rem 0;
|
}
|
|
a {
|
color: var(--action-0);
|
border-radius: 4px;
|
padding: .125rem;
|
}
|
|
ul a {
|
display: inline-flex;
|
}
|
|
a:visited {
|
color: var(--action-50);
|
}
|
|
a:hover {
|
color: var(--contrast-50);
|
text-decoration: none;
|
}
|
|
p a:hover,
|
li a:hover,
|
:is(h1, h2, h3, h4, h5, h6) a:hover {
|
color: var(--action-contrast);
|
background-color: var(--action-0);
|
}
|
|
ol {
|
list-style-type:decimal;
|
}
|
|
.font-small { font-size: var(--txt-x-small); }
|
.font-medium { font-size: var(--txt-medium); }
|
.font-large { font-size: var(--txt-large); }
|
.font-x-large { font-size: var(--txt-x-large); }
|
/**************************************************************
|
UTILITY CLASSES - SPACING
|
**************************************************************/
|
/** PADDING **/
|
.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); }
|
|
/**************************************************************
|
UTILITY CLASSES - TEXT & VISIBILITY
|
**************************************************************/
|
.align-center { text-align: center; }
|
.align-left { text-align: left; }
|
.align-right { text-align: right; }
|
|
*[hidden] {
|
display: none!important;
|
}
|
|
@media (max-width: 767px){
|
.hide-small {
|
display: none;
|
}
|
}
|
|
.width-50,
|
.width-25,
|
.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);
|
}
|
}
|
|
/******************************************************************
|
LAYOUT UTILITIES
|
******************************************************************/
|
.row,
|
.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;
|
}
|
|
.col { --dir: column; }
|
.row { --dir: row; }
|
.col.rev { --dir: column-reverse; }
|
.row.rev { --dir: row-reverse; }
|
|
.nowrap.nowrap { --wrap: nowrap; }
|
.nowrap.nowrap.stack-small { --wrap: wrap;}
|
@media (min-width: 768px) {
|
.nowrap.nowrap.stack-small { --wrap: nowrap;}
|
}
|
|
.col.start,
|
.row.a-start { --align: flex-start; }
|
.col.end,
|
.row.a-end { --align: flex-end; }
|
|
.col.a-start,
|
.row.start { --justify: flex-start; }
|
.col.a-end,
|
.row.end { --justify: flex-end; }
|
|
.col.btw,
|
.row.btw {
|
--justify: space-between;
|
width: 100%;
|
}
|
|
.col.even,
|
.row.even { --justify: space-evenly; }
|
|
/******************************************************************
|
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 & TOGGLE
|
******************************************************************/
|
.toggle-switch input {
|
opacity: 0;
|
width: 0;
|
height: 0;
|
position: absolute;
|
left: var(--offScreen);
|
}
|
|
.toggle-switch .slider {
|
position: relative;
|
width: 2rem;
|
height: 1rem;
|
background-color: var(--base-200);
|
border-radius: .75rem;
|
overflow: hidden;
|
display: flex;
|
justify-content: space-evenly;
|
align-items: center;
|
border: 4px solid transparent;
|
transition: var(--trans-t);
|
box-shadow: 0 0 .25rem 0 rgba(var(--contrast-rgb), .125) inset;
|
cursor: pointer;
|
margin: 5px;
|
}
|
|
.toggle-switch .slider::before {
|
content: '';
|
display: block;
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top:0;
|
left: 0;
|
background-color: var(--base);
|
transform: translateX(-1rem);
|
border-radius: .75rem;
|
transition: var(--trans-transform);
|
box-shadow: 0 0 .25rem 3px rgba(var(--contrast-rgb), .125);
|
}
|
|
.toggle-switch input:checked ~ .slider::before {
|
transform: translateX(1rem);
|
box-shadow: 0 0 .25rem 3px rgba(var(--base-rgb), .25);
|
}
|
|
.toggle-switch input:checked ~ .slider {
|
background-color: var(--action-0);
|
}
|
|
.toggle-switch input:active ~ .slider::before {
|
transform: translate(0);
|
}
|
|
#theme-switch {
|
z-index: 99;
|
margin: 0;
|
--wrap: nowrap;
|
--gap: 1rem;
|
}
|
|
#theme-switch .slider {
|
width: var(--chipchip);
|
height: var(--chip);
|
}
|
|
#theme-switch .slider::before {
|
transform: translateX(-1.5rem);
|
}
|
|
#theme-switch input:checked ~ .slider::before {
|
transform: translateX(1.5rem);
|
}
|
|
@media (max-width: 600px) {
|
#theme-switch {
|
left: 1rem;
|
}
|
.wp-site-blocks > header {
|
padding: 0!important;
|
}
|
}
|
|
/*********************************************************
|
GRIDS
|
*********************************************************/
|
.grid-view,
|
.item-grid {
|
display: grid;
|
grid-template-columns: repeat(2, 1fr);
|
gap: 10px;
|
}
|
.item-grid.stats {
|
grid-template-columns: repeat(2, 1fr);
|
}
|
@media (min-width: 768px){
|
.grid-view,
|
.item-grid {
|
--width: 250px;
|
grid-template-columns: repeat(auto-fill, minmax(var(--width), 1fr));
|
}
|
}
|
|
.grid-view .item,
|
.item-grid .item {
|
border-radius: var(--radius-outer);
|
display:flex;
|
justify-content: var(--justify);
|
align-items: var(--align);
|
flex-wrap: var(--wrap);
|
gap: var(--gap);
|
flex-direction: var(--dir);
|
filter: none;
|
position: relative;
|
}
|
.item-grid.list-view {
|
gap: 0;
|
}
|
.item-grid.list-view .item {
|
aspect-ratio: unset;
|
align-items: flex-start;
|
border-radius: 4px;
|
padding: 1rem 0;
|
}
|
.list-view .item:nth-of-type(even) {
|
background-color: var(--base);
|
}
|
.list-view .item-select {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
min-height: 18vh;
|
}
|
.list-view .item .col {
|
padding: 0 var(--chip_) 0 1rem;
|
}
|
.list-view .abs {
|
right:0;
|
top:0;
|
width:max-content;
|
--dir:column-reverse;
|
justify-content: flex-end;
|
}
|
.item.col {
|
--wrap: nowrap;
|
}
|
.votes,
|
.favourite {
|
position: absolute;
|
z-index: var(--z-1);
|
box-shadow: rgba(var(--base-rgb),var(--op-2)) var(--shdw);
|
background-color: rgba(var(--base-rgb),var(--op-2));
|
}
|
.favourite .icon-heart-fi,
|
.favourited .icon-heart {
|
display: none;
|
}
|
.favourited .icon-heart-fi,
|
.favourite .icon-heart {
|
display: block;
|
}
|
.votes {
|
bottom: 0;
|
right: 0;
|
}
|
.favourite {
|
top: 0;
|
left: 0;
|
}
|
.item-grid .item .images,
|
.item-grid .item .images a{
|
aspect-ratio: 1;
|
width: 100%;
|
height: 100%;
|
display: flex;
|
}
|
|
|
.item-grid button {
|
--height: max-content;
|
aspect-ratio: 1;
|
}
|
|
.grid-view img,
|
.item-grid img {
|
border-radius: var(--radius);
|
}
|
|
.item-grid.list-view {
|
display: flex;
|
flex-direction: column;
|
gap: 0;
|
}
|
|
.item-grid.list-view .item .col {
|
--gap: .5rem;
|
}
|
|
.item-grid.list-view img {
|
width: 20%;
|
}
|
|
@media (min-width: 768px) {
|
.item-grid,
|
.grid-view {
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
}
|
}
|
|
/******************************************************************
|
INTERACTIVE ELEMENTS - BASE
|
******************************************************************/
|
li.btn,
|
button,
|
[type=submit],
|
a.button,
|
.buttons a,
|
.btn + label {
|
--justify: center;
|
--align: center;
|
--dir: row;
|
width: fit-content;
|
text-transform: uppercase;
|
text-decoration: none;
|
text-align: center;
|
background-color: var(--base-100);
|
color: var(--contrast-50);
|
border: 1px solid var(--base-200);
|
border-radius: var(--radius);
|
padding: .25rem 1rem;
|
font-family: var(--heading);
|
cursor: pointer;
|
outline: 0;
|
min-height: var(--btn);
|
display: inline-flex;
|
justify-content: var(--justify);
|
align-items: var(--align);
|
gap: var(--gap);
|
flex-wrap: var(--wrap);
|
flex-direction: var(--dir);
|
position: relative;
|
box-shadow: rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset);
|
}
|
|
[data-filter], .btn + label {
|
width: var(--chipchip);
|
height: var(--chipchip);
|
min-height: var(--chipchip);
|
}
|
select[data-filter] {
|
width: max-content;
|
height: auto;
|
min-height: 0;
|
}
|
|
ul.socials a {
|
background-color: var(--base-100);
|
color: var(--contrast-50);
|
border: 1px solid var(--base-200);
|
border-radius: var(--radius);
|
padding: .25rem 1rem;
|
cursor: pointer;
|
min-height: var(--btn);
|
display: inline-flex;
|
justify-content: center;
|
align-items: center;
|
box-shadow: rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset);
|
}
|
|
/******************************************************************
|
INTERACTIVE ELEMENTS - STATES
|
******************************************************************/
|
li.btn:hover,
|
li.btn:focus,
|
button:hover,
|
button:focus,
|
[type=submit]:hover,
|
[type=submit]:focus,
|
a.button:hover,
|
a.button:focus,
|
ul.socials a:hover,
|
ul.socials a:focus,
|
.buttons a:hover,
|
.buttons a:focus,
|
.btn + label:hover,
|
.btn + label:focus {
|
background-color: var(--action-0);
|
color: var(--action-contrast);
|
box-shadow: var(--shdw-none);
|
}
|
|
button:disabled,
|
[type=submit]:disabled,
|
a.button:disabled,
|
ul.socials a:disabled,
|
.btn:disabled + label,
|
button:disabled:hover,
|
button:disabled:focus,
|
[type=submit]:disabled:hover,
|
[type=submit]:disabled:focus,
|
a.button:disabled:hover,
|
a.button:disabled:focus,
|
ul.socials a:disabled:hover,
|
.btn:disabled + label:hover {
|
opacity: .5;
|
cursor: not-allowed;
|
background-color: var(--base-200);
|
color: var(--contrast-200);
|
}
|
|
/******************************************************************
|
BUTTONS
|
******************************************************************/
|
.buttons {
|
--wrap: wrap;
|
--justify: flex-start;
|
margin: 1rem auto;
|
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;
|
width: 100%;
|
}
|
|
.list-none {
|
list-style: none;
|
}
|
|
@media (min-width: 768px){
|
.buttons {
|
max-width: var(--content);
|
margin: 3rem auto;
|
}
|
}
|
|
.buttons .outline a {
|
background-color: transparent;
|
color: var(--action-0);
|
border: 2px solid var(--action-0);
|
}
|
|
.buttons .outline a:hover,
|
.buttons .outline a:focus {
|
background-color: var(--action-0);
|
color: var(--action-contrast);
|
border-color: var(--action-0);
|
}
|
|
.buttons a {
|
width: 100%;
|
}
|
|
details .icon {
|
--w: 1.5em;
|
}
|
details .filters .icon {
|
--w: 1em;
|
}
|
button.voted .icon,
|
button.favourite.favourited {
|
animation: favourite-pop .4s cubic-bezier(.25, .46, .45, .94);
|
}
|
|
@keyframes favourite-pop {
|
0% { transform: scale(1); }
|
50% { transform: scale(1.3); }
|
75% { transform: scale(.9); }
|
100% { transform: scale(1); }
|
}
|
|
button.filter-toggle {
|
border: 1px solid var(--base-200);
|
background-color: transparent;
|
white-space: nowrap;
|
font-size: 1rem;
|
height: var(--chip_);
|
width: var(--chip_);
|
min-height: 0;
|
padding: .35em;
|
--w: 1.2em;
|
}
|
|
.filter-toggle:hover {
|
border-color: var(--action-50);
|
color: var(--action-50);
|
}
|
|
.filter-toggle:focus {
|
background-color: var(--action-50);
|
color: var(--action-contrast);
|
}
|
|
button.favourite:not(.favourited) .heart-fill,
|
button.favourite.favourited .heart,
|
.toggle.notifications:not(.has) .bell-ringing,
|
.toggle.notifications.has .bell,
|
.vote button:not(.voted) .upvoted,
|
.vote button:not(.voted) .downvoted,
|
.vote .voted .upvote,
|
.vote .voted .downvote {
|
display: none;
|
}
|
|
button.favourite:not(.favourited) .heart,
|
button.favourite.favourited .heart-fill,
|
.toggle.notifications:not(.has) .bell,
|
.toggle.notifications.has .bell-ringing,
|
.vote button:not(.voted) .upvote,
|
.vote button:not(.voted) .downvote,
|
.vote .voted .upvoted,
|
.vote .voted .downvoted {
|
display: block;
|
}
|
|
/******************************************************************
|
ICONS
|
******************************************************************/
|
i.icon {
|
width: var(--w);
|
height: var(--w);
|
display: inline-block;
|
background-color: currentColor;
|
mask-image: var(--icon);
|
-webkit-mask-image: var(--icon);
|
mask-size: contain;
|
-webkit-mask-size: contain;
|
mask-repeat: no-repeat;
|
-webkit-mask-repeat: no-repeat;
|
mask-position: center;
|
-webkit-mask-position: center;
|
vertical-align: middle;
|
}
|
.icon-colour {
|
background: rgb(183, 51, 46);
|
background: linear-gradient(180deg, rgba(255,0,128,1) 0%, rgba(250,71,101,1) 14%, rgba(251,121,35,1) 28%, rgba(176,190,19,1) 42%, rgba(14,204,0,1) 56%, rgba(14,225,166,1) 70%, rgba(63,152,253,1) 84%, rgba(166,90,196,1) 100%);
|
}
|
.icon.grab {
|
cursor: grab;
|
}
|
main a .icon {
|
margin-right: .5rem;
|
}
|
/** TODO: Reintegrate this; currently svg is in .css
|
path#refresh {
|
transform-origin: center;
|
transform-box: fill-box;
|
animation: spin 1s var(--trans-fn) infinite;
|
}**/
|
|
/******************************************************************
|
ACCESSIBILITY
|
******************************************************************/
|
.screen-reader-text {
|
border: 0;
|
clip: rect(1px, 1px, 1px, 1px);
|
clip-path: inset(50%);
|
height: 1px;
|
margin: -1px;
|
overflow: hidden;
|
padding: 0;
|
position: absolute !important;
|
width: 1px;
|
word-wrap: normal !important;
|
}
|
|
input[type=checkbox]:focus + label,
|
input[type=checkbox]:focus-visible + label,
|
input[type=radio]:focus + label,
|
input[type=radio]:focus-visible + label,
|
input:focus,
|
input:focus-within {
|
outline: 2px solid var(--action-0) !important;
|
outline-offset: 2px !important;
|
box-shadow: 0 0 0 4px rgba(var(--action-rgb), var(--op-3))!important;
|
}
|
|
[aria-busy="true"] {
|
cursor: progress;
|
}
|
|
[aria-disabled="true"],
|
[disabled] {
|
cursor: not-allowed;
|
opacity: .7;
|
}
|
|
/******************************************************************
|
DETAILS
|
******************************************************************/
|
details {
|
padding: .25rem 0;
|
border-top: 1px solid var(--base-200);
|
border-bottom: 1px solid var(--base-200);
|
}
|
|
details[open] {
|
background-color: var(--base-50);
|
}
|
|
details summary {
|
--wrap: nowrap;
|
list-style: none;
|
text-transform: uppercase;
|
cursor: pointer;
|
border: 0;
|
position: relative;
|
padding: .5rem 2.5rem .5rem .5rem;
|
gap: .5rem;
|
}
|
|
details summary:hover {
|
background-color: var(--base-100);
|
border-color: var(--base-100);
|
color: var(--contrast);
|
}
|
|
details[open] > summary {
|
background-color: var(--base-50);
|
}
|
|
details summary::after {
|
position: absolute;
|
right: .5rem;
|
top: .5rem;
|
--icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yMTIuMjQsMTAwLjI0bC04MCw4MGE2LDYsMCwwLDEtOC40OCwwbC04MC04MGE2LDYsMCwwLDEsOC40OC04LjQ4TDEyOCwxNjcuNTFsNzUuNzYtNzUuNzVhNiw2LDAsMCwxLDguNDgsOC40OFoiLz48L3N2Zz4=');
|
content: "";
|
background-color: var(--contrast-100);
|
-webkit-mask-repeat: no-repeat;
|
-webkit-mask-size: contain;
|
-webkit-mask-image: var(--icon);
|
mask-image: var(--icon);
|
mask-repeat: no-repeat;
|
mask-size: contain;
|
width: 1.25rem;
|
height: 1.25rem;
|
margin-left: auto;
|
transition: var(--trans-color), var(--trans-transform);
|
}
|
|
details summary:hover::after {
|
background-color: var(--action-0);
|
}
|
|
details[open] > summary::after {
|
background-color: var(--contrast);
|
}
|
|
details[open] > summary::after {
|
transform: rotate(-540deg);
|
transition: background-color var(--trans-base);
|
transition-property: background-color, transform;
|
}
|
|
details::details-content {
|
opacity: 0;
|
block-size: 0;
|
overflow-y: clip;
|
transition: content-visibility var(--trans-t) allow-discrete, opacity var(--trans-t), block-size var(--trans-t);
|
}
|
|
details[open]::details-content {
|
opacity: 1;
|
block-size: auto;
|
}
|
|
@media (prefers-reduced-motion: no-preference){
|
details {
|
interpolate-size: allow-keywords;
|
}
|
}
|
|
/**************************************************
|
LIST OVERRIDES
|
**************************************************/
|
.term-list {
|
--justify: flex-start;
|
--align: center;
|
--wrap: nowrap;
|
--gap: 1.5rem;
|
--dir: row;
|
--w: 1em;
|
list-style: none;
|
padding: 0;
|
height: var(--btn);
|
display: flex;
|
justify-content: var(--justify);
|
align-items: var(--align);
|
gap: var(--gap);
|
flex-wrap: var(--wrap);
|
flex-direction: var(--dir);
|
position: relative;
|
overflow: auto hidden;
|
touch-action: pan-x;
|
text-transform: lowercase;
|
}
|
.term-list small {
|
vertical-align: baseline;
|
margin-left: .5rem;
|
font-style: italic;
|
}
|
.term-list li {
|
display: flex;
|
align-items: center;
|
}
|
.term-list a {
|
align-items: center;
|
}
|
|
|
.directory-list > ul
|
{
|
max-width: 100%;
|
}
|
.directory-list img {
|
width: 70px;
|
}
|
.directory-list .image {
|
display: flex;
|
flex-wrap: nowrap;
|
align-items: center;
|
}
|
.directory-list h3 {
|
margin: 0;
|
text-align: center;
|
font-weight: var(--fw-h-bold);
|
font-family: var(--heading);
|
position: sticky;
|
font-size: var(--txt-enormous);
|
width: 100%;
|
top: 0;
|
left: 0;
|
color: var(--base);
|
text-shadow: var(--base-200) 1px 1px 0;
|
user-select:none;
|
}
|
.directory-list > ul > li {
|
padding: 2rem;
|
align-items: center;
|
}
|
.directory-list > ul > li:nth-of-type(even) {
|
background-color: var(--base-100);
|
}
|
.directory-list ul ul {
|
width: 100%;
|
}
|
.directory-list ul ul li {
|
padding: .35rem .5rem;
|
}
|
.directory-list ul ul li:nth-of-type(even) {
|
background-color:var(--base);
|
}
|
|
@media (min-width: 768px) {
|
.directory-list h3 {
|
width: 20vw;
|
}
|
.directory-list > ul {
|
width: 100%;
|
}
|
.directory-list ul ul {
|
min-height: var(--txt-enormous);
|
}
|
.directory-list > ul > li {
|
padding: 2rem 10vw;
|
}
|
}
|
/**************************************************
|
COVER BLOCK
|
**************************************************/
|
.cover {
|
position: relative;
|
overflow: hidden;
|
min-height: 60vh;
|
padding: var(--btn);
|
}
|
|
.cover::before {
|
z-index: var(--coverIndex);
|
background-color: var(--action-0);
|
mix-blend-mode: var(--coverBlend);
|
background-position: center;
|
background-repeat: no-repeat;
|
background-size: cover;
|
content: '';
|
}
|
|
.cover::before,
|
.cover > video,
|
.cover > img {
|
position: absolute;
|
inset: 0;
|
width: 100%;
|
max-width: 100%;
|
height: 100%;
|
margin: 0;
|
}
|
|
|
.cover .content {
|
z-index: 5;
|
position: relative;
|
overflow: hidden auto;
|
width: max-content;
|
height: max-content;
|
max-width:100%;
|
max-height: 100%;
|
}
|
|
.cover > img {
|
z-index: 1;
|
opacity: .5;
|
mix-blend-mode: luminosity;
|
object-fit: cover;
|
}
|
|
@media (min-width: 768px) {
|
.cover > img {
|
opacity: .33;
|
}
|
}
|
|
/**************************************************
|
BLOCKQUOTE
|
**************************************************/
|
blockquote {
|
--background: var(--base-100);
|
--border: var(--action-0);
|
line-height: 1.2;
|
padding: var(--btn);
|
border-radius: 4rem;
|
background-color: var(--background);
|
}
|
|
blockquote .content {
|
margin: 12px auto;
|
max-width: min(680px, 80vw);
|
position: relative;
|
font-family: var(--heading);
|
font-weight: var(--fw-h-bold);
|
padding: 3rem 2.5rem;
|
border-radius: var(--radius-outer);
|
border: 2px solid var(--border);
|
}
|
|
blockquote .content::before,
|
blockquote .content::after {
|
position: absolute;
|
content: '';
|
left: 50px;
|
}
|
|
blockquote .content::before {
|
width: 80px;
|
border: 6px solid var(--background);
|
bottom: -3px;
|
z-index: 2;
|
}
|
|
blockquote .content::after {
|
border: 2px solid var(--border);
|
border-radius: 0 100% 0 0;
|
width: 60px;
|
height: 60px;
|
bottom: -60px;
|
border-bottom: 0;
|
border-left: 0;
|
z-index: 3;
|
}
|
|
blockquote cite {
|
padding: 15px 0 0 12px;
|
margin: 0 0 0 150px;
|
z-index: 1;
|
}
|
|
blockquote.pull {
|
background-color: unset;
|
border-radius: 0;
|
margin: 4rem auto;
|
padding: 3rem;
|
box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-down), rgba(var(--base-rgb),var(--op-45)) var(--shdw-up);;
|
}
|
|
blockquote.pull cite {
|
margin: 0;
|
}
|
|
/******************************************************************
|
OVERLAYS - BASE PATTERN
|
******************************************************************/
|
dialog[open],
|
aside.expanded {
|
background-color: var(--base);
|
box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
|
z-index: var(--z-5);
|
}
|
|
dialog::backdrop {
|
backdrop-filter: blur(5px);
|
background-color: rgba(var(--base-rgb),var(--op-4));
|
}
|
|
dialog[open],
|
aside.main {
|
border-radius: var(--radius-outer);
|
overflow: hidden;
|
}
|
|
/**************************************************
|
MODALS DIALOGUE
|
**************************************************/
|
dialog[open] {
|
z-index:999;
|
--padding: 0;
|
top: 5vh;
|
width: min(500px, 95vw);
|
height: fit-content;
|
max-height: 90vh;
|
padding: var(--padding);
|
background-color: var(--base-50);
|
color: var(--contrast);
|
border: 1px solid var(--base-200);
|
}
|
|
dialog > .wrap,
|
dialog > form {
|
max-height: var(--maxHeight);
|
overflow: hidden auto;
|
margin: 0 0 0 1.5rem;
|
padding-right: 1.2rem;
|
padding-bottom: var(--btn);
|
width: calc(100% - 1.5rem);
|
}
|
|
dialog label {
|
font-weight: normal;
|
}
|
|
dialog :is(h2, h3) {
|
margin: 0 0 .5rem 0;
|
font-size: var(--txt-large);
|
}
|
|
dialog:has(.m-actions){
|
padding-bottom: var(--btn);
|
}
|
|
.m-actions {
|
--w: 1.15em;
|
--justify: flex-end;
|
--wrap: nowrap;
|
--gap: 0;
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
width: 100%;
|
z-index: var(--z-6);
|
background-color: var(--action-100);
|
box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-up);
|
}
|
|
.m-actions button {
|
width: 100%;
|
height: var(--chipchip);
|
border-radius: 0;
|
font-size: var(--txt-x-small);
|
--gap: .75rem;
|
color: var(--action-contrast);
|
background-color: var(--action-50);
|
border: 2px solid var(--action-50);
|
box-shadow:none;
|
}
|
|
.m-actions button:hover,
|
.m-actions button:focus {
|
background-color: var(--base);
|
color: var(--contrast);
|
}
|
|
.m-actions button:first-of-type {
|
border-bottom-left-radius: 1rem;
|
}
|
|
.m-actions button:last-of-type {
|
border-bottom-right-radius: 1rem;
|
}
|
|
dialog ul {
|
list-style: none;
|
}
|
|
dialog .search-container {
|
padding-top: 1rem;
|
width: 100%;
|
gap: .5rem;
|
}
|
|
/****************
|
QUERY BLOCK
|
****************/
|
.loop .item-grid {
|
grid-template-columns: repeat(1, 1fr);
|
}
|
|
@media (min-width: 768px) {
|
.loop .item-grid {
|
grid-template-columns: repeat(2, 1fr);
|
}
|
}
|
|
|
|
/**************************************************
|
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;
|
}
|
|
thead tr, tfoot tr {
|
background-color: rgba(var(--base-rgb),var(--op-6));
|
box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
|
}
|
|
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(--txt-x-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: rgba(var(--base-rgb),var(--op-4));
|
position: sticky;
|
left: -1rem;
|
z-index: 15;
|
box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-subtle-right);
|
}
|
|
tbody [data-stuck] {
|
z-index: 5;
|
}
|
|
thead [data-stuck],
|
tfoot [data-stuck] {
|
background: var(--base);
|
}
|
|
/**************************************************
|
TOOLTIP
|
**************************************************/
|
[role=tooltip],
|
.hide-tooltip.hide-tooltip.hide-tooltip + [role="tooltip"] {
|
visibility: hidden;
|
position: absolute;
|
bottom: 2rem;
|
left: 1rem;
|
width: max-content;
|
height:fit-content;
|
max-width: 50vw;
|
padding: .5rem;
|
border-radius: var(--radius);
|
box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
|
background: var(--action-0);
|
color: var(--action-contrast);
|
}
|
|
body.menu_item [role=tooltip] {
|
left: auto;
|
right: 100%;
|
top: -200%;
|
z-index: var(--z-4);
|
}
|
|
[role=tooltip] p {
|
margin: 0;
|
}
|
|
[role=tooltip] p + p {
|
margin-top: .5rem;
|
}
|
|
.field:has([aria-describedby]:focus) [role=tooltip],
|
[aria-describedby]:hover ~ .has-tooltip [role="tooltip"],
|
[aria-describedby]:focus ~ .has-tooltip[role="tooltip"] {
|
visibility: visible;
|
display: block;
|
}
|
|
.has-tooltip {
|
display: inline-flex;
|
justify-content: flex-end;
|
position: absolute;
|
top: 0;
|
left: 0;
|
--w: 1.5rem
|
}
|
|
.tt-toggle {
|
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;
|
}
|
|
/******************************************************************
|
STATUS INDICATORS
|
******************************************************************/
|
.status,
|
.item .status,
|
.status-badge {
|
border-radius: var(--radius);
|
font-size: 0.875rem;
|
font-weight: 500;
|
text-transform: capitalize;
|
}
|
|
[data-status="pending"],
|
.status.pending,
|
.status-badge.pending,
|
#queue .item .status.pending {
|
background: var(--base-100);
|
color: var(--contrast-200);
|
}
|
|
[data-status="processing"],
|
.status.processing,
|
.status-badge.processing,
|
#queue .item .status.processing {
|
background: var(--base-200);
|
color: var(--contrast-100);
|
animation: pulse-color 2s infinite;
|
}
|
|
[data-status="completed"],
|
.status.completed,
|
.status-badge.consulted,
|
.status-badge.treated,
|
#queue .item .status.completed {
|
background: var(--success);
|
color: var(--successText);
|
}
|
|
[data-status="failed"],
|
.status.failed,
|
.status-badge.error,
|
#queue .item .status.failed {
|
background: var(--error);
|
color: var(--errorText);
|
}
|
|
/******************************************************************
|
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-rgb),var(--op-4));
|
padding: 2rem;
|
box-shadow: rgba(var(--base-rgb),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: var(--action-0);
|
}
|
|
dialog.loading[open] i.icon {
|
animation: dance 2s ease-in-out infinite;
|
}
|
|
dialog.loading[open] h3 {
|
color: 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 var(--action-50);
|
border-radius: 50%;
|
animation: spin 1s var(--trans-fn) infinite;
|
}
|
|
/*****************************************************************************
|
MENU
|
*****************************************************************************/
|
.toggle-details {
|
gap: 2px;
|
}
|
|
body.menu_item #top {
|
z-index: var(--z-4);
|
position: relative;
|
}
|
|
section .toggle-details {
|
position: absolute;
|
right: 0;
|
top: 5rem;
|
}
|
|
[data-toggle=all] {
|
position: fixed;
|
bottom: calc(var(--btn_) + var(--btn) + .5rem);
|
right: 0;
|
z-index: var(--z-4);
|
background-color: var(--action-0);
|
color: var(--action-contrast);
|
}
|
|
[data-toggle] {
|
z-index: var(--z-1);
|
}
|
|
body:has(#queue[hidden]) [data-toggle=all] {
|
left: 1rem;
|
}
|
|
dialog:not([open]).col,
|
dialog:not([open]).row {
|
display: none;
|
}
|
|
@media (min-width:768px) {
|
section .toggle-details {
|
right: -10%;
|
}
|
}
|
|
/********************************************
|
TYPE TEXT
|
********************************************/
|
.typeText::after {
|
content: '|';
|
display: inline-block;
|
margin-left: 0;
|
animation: blink .75s step-end infinite;
|
}
|
|
@keyframes blink {
|
from, to { opacity: 1; }
|
50% { opacity: 0; }
|
}
|
|
/**************************************************
|
POPUPS: toast, cart, queue
|
**************************************************/
|
aside.main {
|
--wrap: nowrap;
|
--align: stretch;
|
position: fixed;
|
top: var(--btnbtn);
|
bottom: var(--btn_);
|
width: min(500px, calc(100vw - 2rem));
|
background-color: var(--base);
|
z-index: var(--z-5);
|
box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
|
padding: 1rem 1rem var(--btn);
|
overflow: hidden auto;
|
}
|
aside.main.referral {
|
padding-top: 0;
|
}
|
aside.main.referral nav.tabs {
|
padding: 1rem 0;
|
background-color:var(--base);
|
height: max-content;
|
min-height: var(--btn);
|
}
|
|
.qtoggle {
|
z-index: var(--z-6);
|
position: fixed;
|
bottom: var(--btn_);
|
width: var(--btn);
|
height: var(--btn);
|
background-color: rgba(var(--base-rgb),var(--op-4));
|
color: var(--contrast);
|
box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
|
transition: var(--trans-size), var(--trans-color);
|
}
|
|
.qtoggle:hover,
|
.qtoggle:focus {
|
background-color: rgba(var(--action-rgb),var(--op-6));
|
color: var(--action-contrast);
|
}
|
|
.qtoggle:disabled,
|
.qtoggle:disabled:hover,
|
.qtoggle:disabled:focus {
|
opacity: .5;
|
background-color: rgba(var(--base-rgb),var(--op-3));
|
color: var(--contrast);
|
}
|
|
/******************
|
CART
|
******************/
|
.toggle-cart {
|
right: 0;
|
border-radius: 4px 4px 4px var(--radius-outer);
|
}
|
|
body:has(#cart.expanded) .toggle-cart .icon {
|
display: none;
|
}
|
|
aside#cart {
|
padding-bottom: 6rem;
|
}
|
|
#cart form {
|
max-height: 100%;
|
overflow: hidden auto;
|
}
|
|
#cart nav.tabs {
|
z-index: var(--z-6);
|
top: 0;
|
}
|
|
#cart table {
|
height: auto;
|
}
|
|
#cart th {
|
padding: 0 1.5rem;
|
}
|
|
#cart table th:first-of-type {
|
width: 100%;
|
}
|
|
#cart nav.tabs {
|
position: sticky;
|
box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
|
}
|
|
#cart button[data-tab] {
|
flex: 1;
|
border-radius: 0;
|
}
|
|
#cart form > *:not(.tabs) {
|
max-width: 90%;
|
margin: 0 auto;
|
}
|
|
#cart form .empty p {
|
margin: .5rem 0!important;
|
}
|
|
#cart .cart-total.cart-total {
|
--gap: 0 1rem;
|
padding-right: 1rem;
|
position: absolute;
|
bottom: var(--btn);
|
width: 100%;
|
max-width: 100%;
|
background-color: rgba(var(--base-rgb),var(--op-6));
|
z-index: var(--z-6);
|
box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-up);
|
}
|
|
.cart-total p {
|
--gap: 2rem;
|
max-width: 100%;
|
margin: 0;
|
}
|
|
.cart-total p span {
|
width: 6rem;
|
display: inline-block;
|
text-align: right;
|
}
|
|
.cart-total p + p {
|
font-weight: bold;
|
}
|
|
.cart-items .total {
|
font-weight: bold;
|
}
|
|
#cart .restored {
|
background-color: rgba(var(--action-rgb), var(--op-3));
|
border-radius: var(--radius-outer);
|
padding: 1rem;
|
}
|
|
.restored h3 {
|
font-size: var(--txt-medium);
|
margin: 0;
|
}
|
|
.restored p {
|
margin: 0;
|
}
|
|
.restored .row {
|
--gap: 0;
|
--wrap:nowrap;
|
--w: 1em;
|
}
|
|
/******************
|
TOAST
|
******************/
|
.toasts {
|
position: fixed;
|
top: 4rem;
|
right: -350px;
|
z-index: 1000;
|
width: 350px;
|
}
|
|
.toast {
|
background-color: rgba(var(--base-rgb),var(--op-6));
|
border-left: 4px solid var(--action-0);
|
padding: 1rem;
|
box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
|
left: 0;
|
position: relative;
|
opacity: 0;
|
transition: left .3s, opacity .3s;
|
}
|
|
.toast.success {
|
border-left-color: var(--success);
|
}
|
|
.toast.error {
|
border-left-color: var(--error);
|
}
|
|
.toast.info {
|
border-left-color: var(--warning);
|
}
|
|
.toast.show {
|
left: calc(-350px - 1rem);
|
opacity: 1;
|
}
|
|
.toast.hiding {
|
left: 0;
|
opacity: 0;
|
}
|
|
.toast-content p {
|
margin: 0;
|
}
|
|
.close-toast {
|
background: none;
|
border: none;
|
font-size: 1.25rem;
|
cursor: pointer;
|
opacity: .5;
|
transition: opacity .2s;
|
color: inherit;
|
}
|
|
.close-toast:hover {
|
opacity: 1;
|
}
|
|
/******************
|
QUEUE
|
******************/
|
#queue#queue {
|
width: min(500px, calc(100vw - 2rem));
|
}
|
|
#queue > * {
|
max-width: 100%;
|
}
|
|
.qtoggle {
|
left: 0;
|
border-radius: 4px 4px var(--radius-outer) 4px;
|
}
|
|
.qtoggle.expanded {
|
left: var(--btn);
|
width: min(calc(500px - var(--btn)), calc(100vw - 2rem - var(--btn)));
|
}
|
|
.qtoggle.saving .icon {
|
background-color: var(--action-0);
|
animation: spin .87s var(--trans-fn) infinite;
|
}
|
|
#queue .status-actions {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
z-index: var(--z-2);
|
}
|
|
#queue .status-actions .popup {
|
position: absolute;
|
z-index: -1;
|
width: max-content;
|
max-width: 300px;
|
background-color: var(--action-50);
|
color: var(--action-contrast);
|
border-radius: var(--radius);
|
padding: .25em .75em;
|
top: 1rem;
|
left: -100vw;
|
transition: left var(--trans-base);
|
}
|
|
aside#queue .popup::before{
|
content: '';
|
width: 10px;
|
height: 10px;
|
transform: rotate(-45deg);
|
background-color: var(--action-50);
|
z-index: -1;
|
left: -5px;
|
position: absolute;
|
top: calc(50% - 5px);
|
}
|
|
.expanded#queue .status-actions .popup.showing {
|
left: calc(100% + 1em);
|
}
|
|
#queue .status-actions .popup.showing {
|
left: calc(200vw + var(--btn_));
|
max-width: 75vw;
|
}
|
|
/** BADGES **/
|
.refresh .countdown,
|
#queue .item .status,
|
.filter .count,
|
.qtoggle .count,
|
.qtoggle .indicator {
|
z-index: var(--z-3);
|
--offset: 0;
|
position: absolute;
|
top: var(--offset);
|
background-color: rgba(var(--base-rgb),var(--op-3));
|
}
|
|
.expanded + .qtoggle .indicator,
|
.expanded + .qtoggle .count {
|
--offset: .25rem;
|
}
|
|
/* Status indicator */
|
.qtoggle .indicator {
|
right: var(--offset);
|
width: .75rem;
|
height: .75rem;
|
border-radius: 50%;
|
}
|
|
aside#queue.synced + .qtoggle .indicator {
|
background-color: var(--success);
|
}
|
|
aside#queue.pending + .qtoggle .indicator {
|
background-color: var(--warning);
|
animation: pulse 2s infinite;
|
}
|
|
.refreshNow.fetching .icon,
|
aside#queue.pending:not(.expanded) + .qtoggle .icon {
|
background-color: var(--action-0);
|
animation: spin 1s var(--trans-fn) infinite;
|
}
|
|
/* Status count badge */
|
|
/*.refresh .countdown {*/
|
/* --justify:center;*/
|
/* --align: center;*/
|
/* --offset: 0;*/
|
/* left: .25rem;*/
|
/* margin: 0 3px;*/
|
/* border-radius: 50%;*/
|
/* background-color: var(--base);*/
|
/* width: 1em;*/
|
/* height: 1em;*/
|
/*}*/
|
.refresh .countdown,
|
.qtoggle .count {
|
--align: center;
|
--justify: center;
|
left: var(--offset);
|
min-width: 1.25rem;
|
height: 1.25rem;
|
padding: 0 4px;
|
color: var(--contrast);
|
border-radius: var(--radius);
|
font-size: var(--txt-x-small);
|
}
|
|
#queue:has(.empty-queue) + .qtoggle .count {
|
display: none;
|
}
|
|
aside#queue .header {
|
padding: 15px;
|
border-bottom: 1px solid var(--base-200);
|
flex-shrink: 0;
|
--height: max-content;
|
width: 100%;
|
}
|
|
.qitems {
|
flex: 1;
|
width: 100%;
|
overflow: hidden auto;
|
overflow-anchor: none;
|
padding: .5rem 2rem;
|
--gap: .5rem;
|
}
|
|
.qitems .item {
|
width: 100%;
|
}
|
|
.qitems button {
|
--height: max-content;
|
}
|
|
aside#queue h3 {
|
margin: 0;
|
font-size: 16px;
|
color: var(--contrast);
|
}
|
|
#queue .filters {
|
padding: 1rem 0 0;
|
width: 100%;
|
}
|
#queue .filters .btn + label {
|
width: max-content;
|
position: relative;
|
height: var(--chip_);
|
font-size: var(--txt-x-small);
|
font-weight: var(--fw-h-light);
|
box-shadow: var(--shdw-none);
|
}
|
#queue .filters label .count {
|
width: 1em;
|
height: 1em;
|
position: absolute;
|
top: -8px;
|
right: -4px;
|
background: var(--base-100);
|
border-radius: 50%;
|
z-index: 5;
|
}
|
#queue .filters label .count:empty {
|
display: none;
|
}
|
#queue .failed .bar,
|
#queue .failed_permanent .bar {
|
background-color: var(--error);
|
opacity: .2;
|
}
|
#queue span.completed {
|
margin-left: auto;
|
}
|
|
#queue .filters .filter {
|
background-color: transparent;
|
white-space: nowrap;
|
font-size: var(--txt-x-small);
|
}
|
|
#queue .filters .filter.active {
|
background: var(--base-200);
|
border-color: transparent;
|
}
|
|
#queue .filter:hover,
|
#queue .filter:focus {
|
background-color: var(--action-0);
|
color: var(--action-contrast);
|
}
|
|
#queue .progress .row.btw {
|
--justify: flex-end;
|
}
|
#queue .progress .details {
|
font-size: var(--txt-small);
|
}
|
|
/* Filter count badge */
|
.filter .count {
|
--offset: -8px;
|
right: var(--offset);
|
background: var(--base-200);
|
color: var(--contrast-200);
|
border-radius: 10px;
|
min-width: 18px;
|
height: 18px;
|
font-size: 10px;
|
}
|
|
.filter .count:empty {
|
display: none;
|
}
|
|
/* Empty state */
|
.empty-queue {
|
height: 100px;
|
color: var(--contrast-200);
|
font-size: var(--txt-x-small);
|
font-style: italic;
|
}
|
|
.refresh .countdown:not(.counting),
|
aside#queue:has(.empty-queue) .refresh .count {
|
display: none;
|
}
|
|
/* Queue items */
|
#queue .item {
|
padding: 15px;
|
background: var(--base-100);
|
border-radius: var(--radius);
|
transition: all .2s ease;
|
box-shadow: var(--shdw-none);
|
}
|
|
#queue .item:hover {
|
box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
|
}
|
|
#queue .item .header {
|
position: relative;
|
padding: .25rem 0;
|
}
|
|
#queue .item .type {
|
font-size: var(--txt-x-small);
|
}
|
|
#queue .item .status {
|
--w: 1.3em;
|
--gap: 0;
|
--justify:center;
|
--align: center;
|
--offset: -1.2rem;
|
aspect-ratio: 1;
|
right: var(--offset);
|
border-radius: 50%;
|
color: var(--contrast-200);
|
background-color: var(--base-50);
|
border: 1px solid var(--base-200);
|
width: 2em;
|
height: 2em;
|
}
|
|
|
#queue .item .status.completed:hover {
|
color: var(--contrast-200);
|
}
|
|
#queue .item button {
|
font-size: 16px;
|
padding: 0;
|
line-height: 1;
|
opacity: .5;
|
min-height: 0;
|
transition: opacity .2s;
|
}
|
|
#queue .item button:hover {
|
opacity: 1;
|
}
|
|
/* Item details */
|
#queue .item .info {
|
margin-top: 8px;
|
font-size: var(--txt-x-small);
|
}
|
|
#queue .item .info .time {
|
--gap: 7px;
|
font-size: 10px;
|
}
|
|
/* Item actions */
|
#queue .item .actions {
|
--gap: 8px;
|
margin-top: 1rem;
|
}
|
|
#queue .item .actions button {
|
padding: 6px 12px;
|
font-size: 12px;
|
background: var(--base-200);
|
border: none;
|
border-radius: 4px;
|
cursor: pointer;
|
transition: all .2s;
|
color: var(--contrast);
|
}
|
|
#queue .item .actions .retry {
|
background-color: var(--secondary-200);
|
color: var(--secondary-contrast);
|
}
|
|
#queue .item .actions button:hover {
|
opacity: .9;
|
}
|
|
/* Queue actions footer */
|
.queue-actions {
|
padding: .5rem 0;
|
border-top: 1px solid var(--base-200);
|
flex-shrink: 0;
|
}
|
|
.queue-actions button {
|
--height: max-content;
|
padding: .75rem;
|
width: 100%;
|
font-size: var(--txt-x-small);
|
}
|
|
/* Refresh area */
|
.status-actions > .refresh {
|
position: relative;
|
font-size: var(--txt-x-small);
|
}
|
|
|
.refreshNow {
|
width: var(--btn);
|
height: var(--btn);
|
}
|
|
.refreshNow:hover {
|
background: var(--base-200);
|
color: var(--contrast-200);
|
}
|
|
.icon.refresh {
|
--w: 18px;
|
}
|
|
/**************************************************
|
DELAY
|
**************************************************/
|
.item-grid, #queue {
|
counter-reset: delay-counter;
|
}
|
|
.item {
|
counter-increment: delay-counter;
|
}
|
|
.item .progress .fill::after {
|
--delay: calc(counter(delay-counter) * .1s);
|
}
|
|
/**************************************************
|
PROGRESS
|
**************************************************/
|
.progress .bar {
|
height: 6px;
|
display: block;
|
border-radius: 6px;
|
overflow: hidden;
|
background: var(--base-200);
|
position: relative;
|
}
|
|
.progress .fill {
|
height: 100%;
|
background: var(--action-0);
|
border-radius: 6px;
|
width: 0;
|
transition: width .3s ease;
|
}
|
|
.progress .details {
|
margin-top: 5px;
|
font-size: var(--txt-x-small);
|
color: var(--contrast);
|
text-align: center;
|
padding: .25rem 0;
|
}
|
|
.progress .details:empty {
|
display: none;
|
}
|
|
.queued .fill::after,
|
.pending .fill::after,
|
.processing .fill::after,
|
.uploading .fill::after {
|
--delay: 0s;
|
content: '';
|
position: absolute;
|
top: 0;
|
left: -50%;
|
width: 30%;
|
height: 100%;
|
background: linear-gradient(
|
90deg,
|
rgba(255, 255, 255, 0) 0%,
|
rgba(255, 255, 255, .225) 50%,
|
rgba(255, 255, 255, 0) 100%
|
);
|
animation: shimmer 2.5s infinite linear var(--delay);
|
}
|
|
/**************************************************
|
ACTIONS
|
**************************************************/
|
.additional-actions.additional-actions {
|
padding: 0;
|
background-color: transparent;
|
}
|
|
.additional-actions .buttons {
|
position: fixed;
|
bottom: var(--btn_);
|
right: 1rem;
|
margin: 0;
|
--gap: 1rem;
|
z-index: var(--z-6);
|
width: fit-content;
|
}
|
|
.additional-actions .buttons button {
|
height: var(--btn);
|
width: var(--btn);
|
background-color: rgba(var(--base-rgb),var(--op-4));
|
color: var(--contrast);
|
box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
|
}
|
|
.additional-actions .buttons button:hover {
|
background-color: var(--action-0);
|
color: var(--action-contrast);
|
}
|
|
.additional-actions .buttons button:disabled,
|
.additional-actions .buttons button:disabled:hover,
|
.additional-actions .buttons button:disabled:focus {
|
opacity: .5;
|
background-color: rgba(var(--base-rgb),var(--op-3));
|
color: var(--contrast);
|
}
|
|
.additional-actions .buttons button:last-of-type {
|
border-radius: 4px 4px 4px var(--radius-outer);
|
}
|
|
aside.left {
|
transition: left var(--trans-base);
|
left: var(--offScreen);
|
border-radius: 0 var(--radius-outer) var(--radius-outer) 0;
|
}
|
|
aside.left.expanded {
|
left: 0;
|
}
|
|
aside.right {
|
transition: right var(--trans-base);
|
right: var(--offScreen);
|
border-radius: var(--radius-outer) 0 0 var(--radius-outer);
|
}
|
|
aside.right.expanded {
|
right: 0;
|
}
|
|
aside.right.expanded button.close {
|
position: sticky;
|
bottom: calc(var(--btn) * -1);
|
left: 0;
|
border-bottom-left-radius: var(--radius-outer);
|
width: var(--btn);
|
height: var(--btn);
|
}
|
|
.additional-actions .buttons:has(.expanded) button:not(.expanded) {
|
display: none;
|
}
|
|
.additional-actions .buttons:has(.expanded){
|
right: 0;
|
}
|
.additional-actions .buttons button {
|
transition: right var(--trans-base), var(--trans-size);
|
}
|
.additional-actions .buttons .expanded {
|
width: calc(min(500px, calc(100vw - 2rem)));
|
background-color: var(--base);
|
}
|
|
.additional-actions .buttons button:hover,
|
.additional-actions .buttons .expanded:hover {
|
background-color: var(--action-0);
|
color: var(--action-contrast);
|
}
|
|
[type=submit] {
|
width: 100%;
|
height: var(--btn);
|
background-color: var(--action-0);
|
color: var(--action-contrast);
|
box-shadow: var(--shdw-none);
|
font-weight: bold;
|
}
|
|
[type=submit]:hover {
|
box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
|
border: 2px solid var(--action-0);
|
color: var(--action-0);
|
background-color: var(--action-contrast);
|
}
|
|
aside nav.tabs {
|
position: sticky;
|
bottom: unset;
|
top: 0;
|
left: 0;
|
right: 0;
|
}
|
|
aside .tab-content.active {
|
padding: 1rem;
|
min-height: 100%;
|
}
|
|
aside header h3 {
|
font-size: var(--txt-medium);
|
margin: 1rem 0;
|
text-align: center;
|
}
|
|
aside header p {
|
margin: .25rem 0;
|
text-align: center;
|
}
|
|
aside h4 {
|
font-size: var(--txt-x-small);
|
margin: 1rem 0 0 0;
|
}
|
|
code {
|
width: 100%;
|
margin: .5rem;
|
padding: .5rem;
|
user-select: all;
|
text-align: center;
|
border-radius: 4px;
|
background-color: var(--base-200);
|
border: 1px solid var(--contrast-200);
|
}
|
|
.restore-form {
|
background-color: rgba(var(--action-rgb), var(--op-3));
|
border: 1px solid var(--action-200);
|
padding: .5rem;
|
border-radius: var(--radius-outer);
|
margin: 1rem 2rem;
|
}
|
|
.restore-form h3 {
|
text-align: center;
|
margin: 1rem 0 0;
|
font-size: var(--txt-medium);
|
}
|
|
.restore-form p {
|
margin: .5rem 0;
|
}
|
|
.fstatus {
|
z-index: var(--z-5);
|
background-color: rgba(var(--base-rgb),var(--op-6));
|
border-radius: 4px;
|
padding: 0 .5rem;
|
position: fixed;
|
top: var(--btnbtn);
|
right: 1rem;
|
--w: 1em;
|
box-shadow:var(--shdw);
|
display:flex;
|
flex-wrap: nowrap;
|
gap: 1rem;
|
}
|
@media (min-width: 768px) {
|
.fstatus {
|
right:calc(var(--btn_) + 1rem);
|
bottom: 0;
|
top: unset;
|
}
|
body:has(.fixed.bottom) .fstatus {
|
bottom: var(--btn_);
|
}
|
}
|
|
.fstatus .spinner {
|
display: none;
|
}
|
|
.fstatus.loading .spinner {
|
display: inline-block;
|
}
|
|
.fstatus p {
|
margin: 0;
|
padding: .25rem;
|
}
|
|
/**************************************************
|
CALLOUT SECTIONS
|
**************************************************/
|
.callalt.callalt,
|
.callout.callout {
|
padding: 2rem;
|
margin: 0;
|
max-width: none;
|
grid-column: full;
|
}
|
|
@media (min-width: 768px){
|
.callout.callout {
|
padding: 2rem 20vw;
|
}
|
}
|
|
.callout.callout {
|
background-color: var(--action-0);
|
color: var(--action-contrast);
|
}
|
|
.callalt.callalt {
|
background-color: var(--secondary-0);
|
color: var(--secondary-contrast);
|
}
|
|
.callalt :is(h1, h2, h3, h4, h5, h6),
|
.callout :is(h1, h2, h3, h4, h5, h6) {
|
font-family: var(--body);
|
font-weight: var(--fw-b-bold);
|
margin: 1rem 0 0;
|
width: 100%;
|
}
|
|
.callout a {
|
background-color: var(--action-contrast);
|
padding: 0 .125rem;
|
border-radius: 4px;
|
}
|
|
.attn {
|
animation: pulse-color 5s infinite;
|
animation-delay: 1s;
|
}
|
.media-text > div,
|
.media-text figure {
|
width: 100%;
|
margin: 0;
|
}
|
|
@media (min-width:768px ){
|
.media-text {
|
--wrap: nowrap;
|
}
|
}
|
|
.media-text > div {
|
max-width: var(--content);
|
margin: 0 auto;
|
padding: 2rem;
|
}
|
|
.timeline.terms ul,
|
.timeline.terms {
|
list-style: none;
|
display: inline-flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
align-items: flex-start;
|
}
|
.timeline.terms ul {
|
gap: 1rem;
|
}
|
|
.timeline.terms > li {
|
width: 100%;
|
}
|
|
@media (min-width: 768px) {
|
.timeline.terms > li {
|
width: 50%;
|
}
|
}
|
|
/**********************************
|
GALLERY
|
**********************************/
|
dialog.gallery[open] {
|
position: fixed;
|
inset: 1rem;
|
margin: 0;
|
border: none;
|
width: calc(100% - 2rem);
|
height: calc(100% - 2rem);
|
padding: 0;
|
background: rgba(var(--base-rgb),var(--op-6));
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
backdrop-filter: blur(3px);
|
z-index: var(--z-9);
|
max-height: 100vh;
|
max-width: 100vw;
|
}
|
|
.gallery .controls {
|
order: 3;
|
justify-content: flex-end;
|
--height: 2rem;
|
}
|
|
.gallery .controls .cancel {
|
order: 3;
|
}
|
|
dialog.gallery::backdrop {
|
background: rgba(var(--base-rgb), var(--op-4));
|
}
|
|
dialog.gallery .wrap {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
overflow: hidden;
|
}
|
|
dialog.gallery .cancel:hover {
|
background: rgba(var(--base-rgb),var(--op-4));
|
}
|
|
dialog.gallery .content {
|
position: relative;
|
flex: 1 1 auto;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
}
|
|
dialog.gallery .content .image {
|
max-width: 90vw;
|
max-height: 85vh;
|
object-fit: contain;
|
transition: transform 0.15s ease-out;
|
touch-action: none;
|
}
|
|
dialog.gallery .image-left,
|
dialog.gallery .image-right {
|
position: absolute;
|
opacity: 0;
|
pointer-events: none;
|
}
|
|
dialog.gallery details {
|
position: absolute;
|
bottom: 2rem;
|
left: 50%;
|
transform: translateX(-50%);
|
width: calc(100% - 2rem);
|
max-width: 600px;
|
background: rgba(0,0,0,0.45);
|
color: #fff;
|
border-radius: 4px;
|
overflow: hidden;
|
z-index: 10;
|
}
|
|
dialog.gallery details summary {
|
padding: 0.75rem 1rem;
|
cursor: pointer;
|
user-select: none;
|
}
|
|
dialog.gallery details[open] .item-info {
|
padding: 1rem;
|
}
|
|
dialog.gallery .counter {
|
position: absolute;
|
bottom: 1rem;
|
left: 1rem;
|
background: rgba(var(--base-rgb),var(--op-4));
|
color: var(--contrast);
|
padding: 0.4rem 0.8rem;
|
border-radius: 3px;
|
font-size: 0.85rem;
|
z-index: 10;
|
}
|
|
dialog.gallery .favourite {
|
position: absolute;
|
top: 1rem;
|
left: 1rem;
|
z-index: 10;
|
}
|
|
dialog.gallery .image {
|
opacity: 0;
|
transition: opacity .2s ease, transform .15s ease-out;
|
}
|
|
dialog.gallery .image[src] {
|
opacity: 1;
|
}
|
|
/**************************************************
|
REFERRAL SYSTEM
|
**************************************************/
|
.referral-reward-banner {
|
background: var(--base-100);
|
color: var(--action-0);
|
border: 2px dashed var(--action-0);
|
padding: 1.5rem;
|
border-radius: 8px;
|
text-align: center;
|
margin-bottom: 1.5rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.referral-reward-banner .icon {
|
--w: 3rem;
|
}
|
|
.referral-reward-banner h4 {
|
margin: 0;
|
font-size: 1.25rem;
|
font-weight: 700;
|
color: var(--contrast);
|
}
|
|
.check-code-btn {
|
width: 100%;
|
margin-top: 0.5rem;
|
background: var(--base-100);
|
color: var(--contrast-100);
|
border: 1px solid var(--contrast-200);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
gap: 0.5rem;
|
}
|
|
.code-status {
|
padding: 0.75rem;
|
border-radius: 4px;
|
margin-top: 0.5rem;
|
font-size: 0.875rem;
|
}
|
|
.code-status.loading {
|
background: var(--base-200);
|
color: var(--contrast-200);
|
}
|
|
.code-status.success {
|
background: var(--successBack);
|
color: var(--successText);
|
border: 1px solid var(--successBack);
|
}
|
|
.code-status.error {
|
background: var(--errorBack);
|
color: var(--errorText);
|
border: 1px solid var(--errorBack);
|
}
|
|
.referral-footer {
|
text-align: center;
|
padding: 1rem 0;
|
border-top: 1px solid var(--base-200);
|
margin-top: 1rem;
|
}
|
|
.referral-footer .text-link {
|
color: var(--contrast-200);
|
text-decoration: none;
|
font-size: 0.875rem;
|
}
|
|
.referral-footer .text-link:hover {
|
color: var(--action-0);
|
text-decoration: underline;
|
}
|
|
.share-section {
|
margin-bottom: 1.5rem;
|
}
|
|
.share-section h4 {
|
margin: 0 0 0.75rem;
|
font-size: 0.875rem;
|
text-transform: uppercase;
|
letter-spacing: 0.5px;
|
color: var(--contrast-200);
|
}
|
|
.copy-section {
|
margin-bottom: 1.5rem;
|
}
|
|
.copy-section h4 {
|
margin: 0 0 0.5rem;
|
font-size: 0.875rem;
|
text-transform: uppercase;
|
letter-spacing: 0.5px;
|
color: var(--contrast-200);
|
}
|
|
.copy-group {
|
--gap: 0 .5rem;
|
margin-bottom: 0;
|
}
|
.copy-group + .hint {
|
margin: .25rem 1rem 1rem;
|
}
|
|
.copy-target {
|
flex: 1;
|
padding: 0.75rem;
|
background: var(--base-100);
|
border: 1px solid var(--base-200);
|
border-radius: 4px;
|
font-family: 'Monaco', 'Courier New', monospace;
|
font-size: 0.875rem;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
user-select: all;
|
}
|
|
.copy-btn {
|
flex-shrink: 0;
|
width: var(--chipchip);
|
height: var(--chipchip);
|
min-height: 0;
|
padding: 0;
|
}
|
.copy-btn.success .icon-copy,
|
.copy-btn .icon-check-circle {
|
display: none;
|
}
|
.copy-btn.success .icon-check-circle {
|
display: inline-block;
|
}
|
|
.copy-btn.success {
|
background: var(--successBack);
|
color: var(--success);
|
}
|
|
.recent-referrals-section {
|
margin-bottom: 1.5rem;
|
padding-bottom: 1.5rem;
|
border-bottom: 1px solid var(--contrast-200);
|
}
|
|
.recent-referrals-section h4 {
|
margin: 0 0 0.75rem;
|
font-size: 0.875rem;
|
text-transform: uppercase;
|
letter-spacing: 0.5px;
|
color: var(--contrast-200);
|
}
|
|
.recent-referrals-list {
|
display: flex;
|
flex-direction: column;
|
gap: 0.5rem;
|
}
|
|
.referral-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0.75rem;
|
background: var(--base-100);
|
border-radius: 4px;
|
font-size: 0.875rem;
|
}
|
|
.referral-info {
|
display: flex;
|
align-items: center;
|
gap: 0.5rem;
|
}
|
|
.referral-info strong {
|
color: var(--contrast-200);
|
}
|
|
.referral-date {
|
font-size: 0.75rem;
|
}
|
|
.no-referrals,
|
.loading,
|
.message {
|
text-align: center;
|
padding: 1rem;
|
color: var(--contrast-200);
|
font-size: 0.875rem;
|
}
|
|
.stats-summary {
|
margin-bottom: 1.5rem;
|
}
|
|
.stat-row {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0.75rem;
|
border-bottom: 1px solid var(--base-200);
|
}
|
|
.stat-row:last-child {
|
border-bottom: none;
|
}
|
|
.stat-row.highlight {
|
background: var(--base-100);
|
border-radius: 4px;
|
border: 1px solid var(--base);
|
font-weight: 600;
|
}
|
|
.stat-label {
|
color: #666;
|
font-size: 0.875rem;
|
}
|
|
.stat-value {
|
color: #333;
|
font-weight: 600;
|
font-size: 1rem;
|
}
|
|
.stat-row.highlight .stat-value {
|
color: var(--action-0);
|
font-size: 1.25rem;
|
}
|
|
.view-dashboard-btn {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
gap: 0.5rem;
|
width: 100%;
|
padding: 0.875rem;
|
background: var(--action-0);
|
color: var(--action-contrast);
|
text-decoration: none;
|
border-radius: 8px;
|
font-weight: 600;
|
transition: all 0.2s ease;
|
}
|
aside button:not(.button, .qtoggle),
|
aside a.button{
|
position: relative;
|
top: 0;
|
box-shadow: var(--shdw-none);
|
transition: top var(--trans-base), box-shadow var(--trans-base);
|
}
|
|
aside button:not(.button, .qtoggle, :disabled):hover,
|
aside a.button:hover {
|
top: -4px;
|
box-shadow: rgba(var(--contrast-rgb),var(--op-45)) var(--shdw-down);
|
}
|
|
.view-dashboard-btn:visited {
|
color: var(--action-contrast);
|
}
|
.view-dashboard-btn:hover {
|
transform: translateY(-2px);
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
}
|
|
.success-content {
|
padding: 2rem 1rem;
|
text-align: center;
|
}
|
|
.success-content h3 {
|
color: var(--success);
|
margin-bottom: 1rem;
|
}
|
|
.success-content p {
|
margin-bottom: 0.75rem;
|
color: var(--base-200);
|
}
|
|
.success-content .hint {
|
font-size: 0.875rem;
|
color: var(--base-200);
|
font-style: italic;
|
}
|
|
.code-status.loading::before {
|
/*.loading::before {*/
|
content: '';
|
display: inline-block;
|
width: 1rem;
|
height: 1rem;
|
border: 2px solid var(--action-200);
|
border-top: 2px solid var(--action-0);
|
border-radius: 50%;
|
animation: spin 1s linear infinite;
|
margin-right: 0.5rem;
|
vertical-align: middle;
|
}
|
.share-buttons-grid a {
|
padding: 0;
|
min-height: 0;
|
width: var(--chipchip);
|
height: var(--chipchip);
|
}
|
.share-buttons-grid a .icon {
|
margin-right: 0;
|
}
|
@media (max-width: 768px) {
|
.share-buttons-grid {
|
grid-template-columns: repeat(3, 1fr);
|
}
|
|
.referral-item {
|
flex-direction: column;
|
align-items: flex-start;
|
gap: 0.5rem;
|
}
|
}
|
/***************
|
TOGGLE TEXT
|
***************/
|
.toggle-text input {
|
display: none;
|
}
|
|
.toggle-text input + label {
|
font-weight: normal;
|
color: var(--contrast)!important;
|
text-transform: none;
|
cursor: pointer;
|
position: relative;
|
-webkit-user-select: none;
|
-moz-user-select: none;
|
-ms-user-select: none;
|
user-select: none;
|
}
|
|
.toggle-text label::before,
|
.toggle-text label::after {
|
display: none!important;
|
}
|
|
.toggle-text label {
|
padding-left: 0!important;
|
}
|
|
.toggle-text input + label .text {
|
position: relative;
|
margin: 0;
|
--gap: 0;
|
font-weight: bold;
|
width: fit-content;
|
padding: 2px 4px;
|
border: 1px solid var(--action-50);
|
border-radius: 4px;
|
color: var(--action-50)!important;
|
}
|
|
table .toggle-text input+label .text {
|
color: var(--contrast)!important;
|
border-color: var(--contrast);
|
}
|
|
.toggle-text:hover .text,
|
table .toggle-text:hover .text {
|
background-color: var(--action-50);
|
color: var(--light-0)!important;
|
border-color: var(--action-50);
|
}
|
|
.toggle-text input + label .off,
|
.toggle-text input + label .on {
|
transition: var(--trans-transform), opacity var(--trans-base);
|
}
|
|
.toggle-text input + label .off {
|
opacity: 1;
|
max-width: 100%;
|
transform: none;
|
}
|
|
.toggle-text input + label .on {
|
opacity: 0;
|
max-width: 0;
|
transform: translate3d(0, 100%, 0);
|
}
|
|
.toggle-text input:checked + label .off {
|
opacity: 0;
|
max-width: 0;
|
transform: translate3d(0, -100%, 0);
|
}
|
|
.toggle-text input:checked + label .on {
|
max-width: 100%;
|
opacity: 1;
|
transform: none;
|
}
|
|
/******************************************************************
|
TAXONOMY SELECTOR
|
******************************************************************/
|
.items-container {
|
margin: 0;
|
padding: 0;
|
width: 100%;
|
}
|
|
details.create-term {
|
margin-top: auto;
|
width: 100%;
|
}
|
#jvb-selector .search-wrapper {
|
margin-top: auto;
|
width:100%;
|
}
|
.search-wrapper:not(.open) .search {
|
margin-left: auto;
|
}
|
.search-wrapper + details.create-term {
|
margin-top: 0;
|
}
|
|
details.create-term .field,
|
.create-term[open] summary {
|
margin-bottom: 1rem;
|
}
|
|
details.create-term .field {
|
max-width: 100%;
|
}
|
|
#jvb-selector > .wrap {
|
--wrap: nowrap;
|
--justify: flex-start;
|
}
|
|
#jvb-selector .items-wrap {
|
width: 100%;
|
padding: 1rem 0;
|
border-top: 1px solid var(--base-200);
|
}
|
|
#jvb-selector .items-container {
|
display: grid;
|
grid-template-columns: repeat(2, 1fr)
|
}
|
#jvb-selector li {
|
list-style: none;
|
}
|
#jvb-selector li label {
|
padding-left: 0!important;
|
}
|
|
/*.auto-wrapper {*/
|
/* position: absolute;*/
|
/* bottom: -105%;*/
|
/* background-color: rgba(var(--base-rgb), var(--op-5));*/
|
/* backdrop-filter: blur(2px);*/
|
/* border-radius: var(--radius);*/
|
/* z-index: 1;*/
|
/*}*/
|
.autocomplete-dropdown {
|
width: 100%;
|
background-color: var(--base-100);
|
padding: .5rem;
|
box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
|
}
|
li.autocomplete {
|
list-style: none;
|
display: inline-flex;
|
margin: 0.25rem;
|
min-height: var(--chip);
|
}
|
|
.submit-term {
|
gap: 0;
|
}
|
.submit-term strong {
|
padding-right: 1rem;
|
}
|
.selected-items {
|
width:100%;
|
padding: .5rem;
|
border-radius: var(--radius);
|
background-color:var(--base);
|
--justify: flex-start;
|
--gap: .5rem;
|
margin-bottom: .5rem;
|
}
|
|
.selected-items.selected-items:empty {
|
padding:0;
|
background-color:transparent;
|
margin: 0;
|
}
|
|
.selected-item {
|
padding: .25rem .5rem;
|
margin: .125em;
|
background: var(--base-100);
|
border-radius: .25rem;
|
font-size: var(--txt-medium);
|
border: 1px solid var(--base-200);
|
position: relative;
|
}
|
.remove-term.remove-term {
|
min-height: 0;
|
height: var(--chip);
|
width: var(--chip);
|
padding: 0;
|
--w: .75em;
|
}
|
|
.clear-filters {
|
margin-left: auto;
|
border: 1px solid var(--base-200);
|
}
|
/**************************************************
|
ANIMATIONS
|
**************************************************/
|
@keyframes shimmer {
|
0% {
|
left: -50%;
|
}
|
50% {
|
left: 150%;
|
}
|
100% {
|
left: -50%;
|
}
|
}
|
|
@keyframes pulse-color {
|
0% {
|
box-shadow: 0 0 0 0 rgba(var(--action-rgb), .4);
|
}
|
30% {
|
box-shadow: 0 0 0 .75rem rgba(var(--action-rgb), 0);
|
}
|
100% {
|
box-shadow: 0 0 0 0 rgba(var(--action-rgb), 0);
|
}
|
}
|
|
@keyframes fadeIn {
|
from {
|
opacity: 0;
|
transform: translateY(20px);
|
}
|
to {
|
opacity: 1;
|
transform: translateY(0);
|
}
|
}
|
|
@keyframes fadeOut {
|
from {
|
opacity: 1;
|
transform: translateY(0);
|
}
|
to {
|
opacity: 0;
|
transform: translateY(20px);
|
}
|
}
|
|
@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);
|
}
|
}
|
|
|
.content-term-list, .content-term-list ul,
|
.content-term-list li {
|
list-style: none;
|
margin: 0;
|
padding: 0;
|
}
|
.content-term-list .item {
|
flex-direction: column;
|
}
|
.content-term-list h3 {
|
font-size: var(--txt-medium);
|
font-weight: var(--fw-h);
|
}
|
