mirror of
https://github.com/Macrame-App/Macrame
synced 2025-12-29 07:19:26 +00:00
688 lines
19 KiB
CSS
688 lines
19 KiB
CSS
/*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */
|
|
@import url(https://fonts.bunny.net/css?family=orbitron:400,600,800);
|
|
@layer properties;
|
|
@layer theme, utilities;
|
|
@layer theme {
|
|
:root, :host {
|
|
--font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
|
'Noto Color Emoji';
|
|
--color-red-400: oklch(70.4% 0.191 22.216);
|
|
--color-red-500: oklch(63.7% 0.237 25.331);
|
|
--color-red-600: oklch(57.7% 0.245 27.325);
|
|
--color-orange-100: oklch(95.4% 0.038 75.164);
|
|
--color-orange-300: oklch(83.7% 0.128 66.29);
|
|
--color-orange-400: oklch(75% 0.183 55.934);
|
|
--color-orange-500: oklch(70.5% 0.213 47.604);
|
|
--color-amber-100: oklch(96.2% 0.059 95.617);
|
|
--color-amber-300: oklch(87.9% 0.169 91.605);
|
|
--color-amber-400: oklch(82.8% 0.189 84.429);
|
|
--color-amber-500: oklch(76.9% 0.188 70.08);
|
|
--color-lime-400: oklch(84.1% 0.238 128.85);
|
|
--color-lime-600: oklch(64.8% 0.2 131.684);
|
|
--color-sky-100: oklch(95.1% 0.026 236.824);
|
|
--color-sky-300: oklch(82.8% 0.111 230.318);
|
|
--color-sky-400: oklch(74.6% 0.16 232.661);
|
|
--color-sky-500: oklch(68.5% 0.169 237.323);
|
|
--color-sky-600: oklch(58.8% 0.158 241.966);
|
|
--color-sky-900: oklch(39.1% 0.09 240.876);
|
|
--color-rose-100: oklch(94.1% 0.03 12.58);
|
|
--color-rose-300: oklch(81% 0.117 11.638);
|
|
--color-rose-400: oklch(71.2% 0.194 13.428);
|
|
--color-rose-500: oklch(64.5% 0.246 16.439);
|
|
--color-rose-600: oklch(58.6% 0.253 17.585);
|
|
--color-slate-50: oklch(98.4% 0.003 247.858);
|
|
--color-slate-950: oklch(12.9% 0.042 264.695);
|
|
--color-gray-800: oklch(27.8% 0.033 256.848);
|
|
--color-gray-900: oklch(21% 0.034 264.665);
|
|
--color-black: #000;
|
|
--color-white: #fff;
|
|
--spacing: 0.25rem;
|
|
--text-xs: 0.75rem;
|
|
--text-xs--line-height: calc(1 / 0.75);
|
|
--text-sm: 0.875rem;
|
|
--text-sm--line-height: calc(1.25 / 0.875);
|
|
--text-base: 1rem;
|
|
--text-base--line-height: calc(1.5 / 1);
|
|
--text-lg: 1.125rem;
|
|
--text-lg--line-height: calc(1.75 / 1.125);
|
|
--text-3xl: 1.875rem;
|
|
--text-3xl--line-height: calc(2.25 / 1.875);
|
|
--font-weight-extralight: 200;
|
|
--font-weight-light: 300;
|
|
--tracking-wide: 0.025em;
|
|
--radius-lg: 0.5rem;
|
|
--radius-xl: 0.75rem;
|
|
--default-transition-duration: 150ms;
|
|
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
}
|
|
@layer utilities {
|
|
.absolute {
|
|
position: absolute;
|
|
}
|
|
.relative {
|
|
position: relative;
|
|
}
|
|
.inset-0 {
|
|
inset: calc(var(--spacing) * 0);
|
|
}
|
|
.right-0 {
|
|
right: calc(var(--spacing) * 0);
|
|
}
|
|
.bottom-full {
|
|
bottom: 100%;
|
|
}
|
|
.m-0 {
|
|
margin: calc(var(--spacing) * 0);
|
|
}
|
|
.mt-4 {
|
|
margin-top: calc(var(--spacing) * 4);
|
|
}
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
.grid {
|
|
display: grid;
|
|
}
|
|
.aspect-square {
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
.size-8 {
|
|
width: calc(var(--spacing) * 8);
|
|
height: calc(var(--spacing) * 8);
|
|
}
|
|
.size-16 {
|
|
width: calc(var(--spacing) * 16);
|
|
height: calc(var(--spacing) * 16);
|
|
}
|
|
.size-full {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.h-28 {
|
|
height: calc(var(--spacing) * 28);
|
|
}
|
|
.h-full {
|
|
height: 100%;
|
|
}
|
|
.\!w-fit {
|
|
width: fit-content !important;
|
|
}
|
|
.w-28 {
|
|
width: calc(var(--spacing) * 28);
|
|
}
|
|
.w-fit {
|
|
width: fit-content;
|
|
}
|
|
.w-full {
|
|
width: 100%;
|
|
}
|
|
.grid-cols-2 {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
.grid-cols-4 {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
.grid-cols-\[1fr_2fr\] {
|
|
grid-template-columns: 1fr 2fr;
|
|
}
|
|
.grid-cols-\[1fr_2fr_1fr\] {
|
|
grid-template-columns: 1fr 2fr 1fr;
|
|
}
|
|
.grid-cols-\[2fr_1fr\] {
|
|
grid-template-columns: 2fr 1fr;
|
|
}
|
|
.grid-cols-\[3fr_1fr_1fr\] {
|
|
grid-template-columns: 3fr 1fr 1fr;
|
|
}
|
|
.grid-rows-3 {
|
|
grid-template-rows: repeat(3, minmax(0, 1fr));
|
|
}
|
|
.flex-col {
|
|
flex-direction: column;
|
|
}
|
|
.items-center {
|
|
align-items: center;
|
|
}
|
|
.items-end {
|
|
align-items: flex-end;
|
|
}
|
|
.\!justify-start {
|
|
justify-content: flex-start !important;
|
|
}
|
|
.justify-between {
|
|
justify-content: space-between;
|
|
}
|
|
.justify-center {
|
|
justify-content: center;
|
|
}
|
|
.justify-end {
|
|
justify-content: flex-end;
|
|
}
|
|
.justify-items-center {
|
|
justify-items: center;
|
|
}
|
|
.gap-2 {
|
|
gap: calc(var(--spacing) * 2);
|
|
}
|
|
.divide-x {
|
|
:where(& > :not(:last-child)) {
|
|
--tw-divide-x-reverse: 0;
|
|
border-inline-style: var(--tw-border-style);
|
|
border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
|
|
border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
|
|
}
|
|
}
|
|
.rounded-full {
|
|
border-radius: calc(infinity * 1px);
|
|
}
|
|
.\!rounded-tl-none {
|
|
border-top-left-radius: 0 !important;
|
|
}
|
|
.\!rounded-tr-none {
|
|
border-top-right-radius: 0 !important;
|
|
}
|
|
.\!rounded-b-none {
|
|
border-bottom-right-radius: 0 !important;
|
|
border-bottom-left-radius: 0 !important;
|
|
}
|
|
.border-3 {
|
|
border-style: var(--tw-border-style);
|
|
border-width: 3px;
|
|
}
|
|
.border-lime-600 {
|
|
border-color: var(--color-lime-600);
|
|
}
|
|
.border-red-500 {
|
|
border-color: var(--color-red-500);
|
|
}
|
|
.border-red-600 {
|
|
border-color: var(--color-red-600);
|
|
}
|
|
.border-sky-600 {
|
|
border-color: var(--color-sky-600);
|
|
}
|
|
.border-white {
|
|
border-color: var(--color-white);
|
|
}
|
|
.\!bg-sky-900 {
|
|
background-color: var(--color-sky-900) !important;
|
|
}
|
|
.bg-lime-400 {
|
|
background-color: var(--color-lime-400);
|
|
}
|
|
.bg-lime-400\/30 {
|
|
background-color: color-mix(in srgb, oklch(84.1% 0.238 128.85) 30%, transparent);
|
|
@supports (color: color-mix(in lab, red, red)) {
|
|
background-color: color-mix(in oklab, var(--color-lime-400) 30%, transparent);
|
|
}
|
|
}
|
|
.bg-red-400 {
|
|
background-color: var(--color-red-400);
|
|
}
|
|
.bg-red-400\/30 {
|
|
background-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 30%, transparent);
|
|
@supports (color: color-mix(in lab, red, red)) {
|
|
background-color: color-mix(in oklab, var(--color-red-400) 30%, transparent);
|
|
}
|
|
}
|
|
.bg-red-500\/80 {
|
|
background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 80%, transparent);
|
|
@supports (color: color-mix(in lab, red, red)) {
|
|
background-color: color-mix(in oklab, var(--color-red-500) 80%, transparent);
|
|
}
|
|
}
|
|
.bg-sky-400 {
|
|
background-color: var(--color-sky-400);
|
|
}
|
|
.bg-sky-400\/30 {
|
|
background-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 30%, transparent);
|
|
@supports (color: color-mix(in lab, red, red)) {
|
|
background-color: color-mix(in oklab, var(--color-sky-400) 30%, transparent);
|
|
}
|
|
}
|
|
.bg-slate-950 {
|
|
background-color: var(--color-slate-950);
|
|
}
|
|
.bg-white {
|
|
background-color: var(--color-white);
|
|
}
|
|
.bg-white\/30 {
|
|
background-color: color-mix(in srgb, #fff 30%, transparent);
|
|
@supports (color: color-mix(in lab, red, red)) {
|
|
background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
|
|
}
|
|
}
|
|
.\!p-0 {
|
|
padding: calc(var(--spacing) * 0) !important;
|
|
}
|
|
.\!p-4 {
|
|
padding: calc(var(--spacing) * 4) !important;
|
|
}
|
|
.p-2 {
|
|
padding: calc(var(--spacing) * 2);
|
|
}
|
|
.\!px-2 {
|
|
padding-inline: calc(var(--spacing) * 2) !important;
|
|
}
|
|
.\!pt-8 {
|
|
padding-top: calc(var(--spacing) * 8) !important;
|
|
}
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
.text-left {
|
|
text-align: left;
|
|
}
|
|
.text-right {
|
|
text-align: right;
|
|
}
|
|
.text-base {
|
|
font-size: var(--text-base);
|
|
line-height: var(--tw-leading, var(--text-base--line-height));
|
|
}
|
|
.text-xs {
|
|
font-size: var(--text-xs);
|
|
line-height: var(--tw-leading, var(--text-xs--line-height));
|
|
}
|
|
.\!text-gray-800 {
|
|
color: var(--color-gray-800) !important;
|
|
}
|
|
.text-red-400 {
|
|
color: var(--color-red-400);
|
|
}
|
|
.text-white {
|
|
color: var(--color-white);
|
|
}
|
|
.opacity-80 {
|
|
opacity: 80%;
|
|
}
|
|
.opacity-90 {
|
|
opacity: 90%;
|
|
}
|
|
}
|
|
@layer theme;
|
|
html, body, #panel-html__body {
|
|
position: relative;
|
|
}
|
|
#panel-html__body {
|
|
--font-sans: "Orbitron", sans-serif;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--color-gray-900);
|
|
font-family: var(--font-sans);
|
|
font-size: var(--text-sm);
|
|
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
--tw-font-weight: var(--font-weight-light);
|
|
font-weight: var(--font-weight-light);
|
|
--tw-tracking: var(--tracking-wide);
|
|
letter-spacing: var(--tracking-wide);
|
|
color: var(--color-slate-50);
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
.group-left, .group-middle, .group-right {
|
|
display: grid;
|
|
height: fit-content;
|
|
gap: calc(var(--spacing) * 2);
|
|
}
|
|
.ed-panel {
|
|
height: fit-content;
|
|
width: 100%;
|
|
border-bottom-right-radius: var(--radius-xl);
|
|
border-bottom-left-radius: var(--radius-xl);
|
|
border-style: var(--tw-border-style);
|
|
border-width: 1px;
|
|
padding: calc(var(--spacing) * 2);
|
|
h3, h4 {
|
|
margin: calc(var(--spacing) * 0);
|
|
margin-bottom: calc(var(--spacing) * 1);
|
|
--tw-font-weight: var(--font-weight-extralight);
|
|
font-weight: var(--font-weight-extralight);
|
|
}
|
|
h3 {
|
|
font-size: var(--text-base);
|
|
line-height: var(--tw-leading, var(--text-base--line-height));
|
|
}
|
|
h4 {
|
|
font-size: var(--text-sm);
|
|
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
}
|
|
&.pnl__blue {
|
|
border-color: var(--color-sky-300);
|
|
background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 30%, transparent);
|
|
@supports (color: color-mix(in lab, red, red)) {
|
|
background-color: color-mix(in oklab, var(--color-sky-500) 30%, transparent);
|
|
}
|
|
h3, h4 {
|
|
color: var(--color-sky-100);
|
|
text-shadow: 0 0 0.2em var(--color-sky-300);
|
|
}
|
|
}
|
|
&.pnl__yellow {
|
|
border-color: var(--color-amber-300);
|
|
background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 30%, transparent);
|
|
@supports (color: color-mix(in lab, red, red)) {
|
|
background-color: color-mix(in oklab, var(--color-amber-500) 30%, transparent);
|
|
}
|
|
h3, h4 {
|
|
color: var(--color-amber-100);
|
|
text-shadow: 0 0 0.2em var(--color-amber-300);
|
|
}
|
|
}
|
|
&.pnl__orange {
|
|
border-color: var(--color-orange-300);
|
|
background-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 30%, transparent);
|
|
@supports (color: color-mix(in lab, red, red)) {
|
|
background-color: color-mix(in oklab, var(--color-orange-500) 30%, transparent);
|
|
}
|
|
h3, h4 {
|
|
color: var(--color-orange-100);
|
|
text-shadow: 0 0 0.2em var(--color-orange-300);
|
|
}
|
|
}
|
|
&.pnl__red {
|
|
border-color: var(--color-rose-300);
|
|
background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 30%, transparent);
|
|
@supports (color: color-mix(in lab, red, red)) {
|
|
background-color: color-mix(in oklab, var(--color-rose-500) 30%, transparent);
|
|
}
|
|
h3, h4 {
|
|
color: var(--color-rose-100);
|
|
text-shadow: 0 0 0.2em var(--color-rose-400);
|
|
}
|
|
}
|
|
&.pnl__white {
|
|
border-color: var(--color-white);
|
|
background-color: color-mix(in srgb, #fff 20%, transparent);
|
|
@supports (color: color-mix(in lab, red, red)) {
|
|
background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
|
|
}
|
|
h3, h4 {
|
|
color: var(--color-white);
|
|
text-shadow: 0 0 0.2em var(--color-white);
|
|
}
|
|
}
|
|
}
|
|
.ed-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--radius-lg);
|
|
border-style: var(--tw-border-style);
|
|
border-width: 3px;
|
|
padding-inline: calc(var(--spacing) * 4);
|
|
padding-block: calc(var(--spacing) * 2);
|
|
text-align: center;
|
|
font-size: var(--text-base);
|
|
line-height: var(--tw-leading, var(--text-base--line-height));
|
|
svg {
|
|
display: block;
|
|
width: calc(var(--spacing) * 5) !important;
|
|
height: calc(var(--spacing) * 5) !important;
|
|
}
|
|
&.btn__vertical {
|
|
flex-direction: column;
|
|
}
|
|
&.btn__filled {
|
|
color: var(--color-gray-900);
|
|
}
|
|
&.btn__orange {
|
|
border-color: var(--color-orange-400);
|
|
background-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 50%, transparent);
|
|
@supports (color: color-mix(in lab, red, red)) {
|
|
background-color: color-mix(in oklab, var(--color-orange-500) 50%, transparent);
|
|
}
|
|
color: var(--color-orange-100);
|
|
&.btn__filled {
|
|
background-color: var(--color-orange-400);
|
|
}
|
|
}
|
|
&.btn__yellow {
|
|
border-color: var(--color-amber-400);
|
|
background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 50%, transparent);
|
|
@supports (color: color-mix(in lab, red, red)) {
|
|
background-color: color-mix(in oklab, var(--color-amber-500) 50%, transparent);
|
|
}
|
|
color: var(--color-orange-100);
|
|
&.btn__filled {
|
|
background-color: var(--color-amber-400);
|
|
}
|
|
}
|
|
&.btn__blue {
|
|
border-color: var(--color-sky-400);
|
|
background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 50%, transparent);
|
|
@supports (color: color-mix(in lab, red, red)) {
|
|
background-color: color-mix(in oklab, var(--color-sky-500) 50%, transparent);
|
|
}
|
|
color: var(--color-sky-100);
|
|
&.btn__filled {
|
|
background-color: var(--color-sky-500);
|
|
}
|
|
}
|
|
&.btn__red {
|
|
border-color: var(--color-rose-500);
|
|
background-color: color-mix(in srgb, oklch(58.6% 0.253 17.585) 50%, transparent);
|
|
@supports (color: color-mix(in lab, red, red)) {
|
|
background-color: color-mix(in oklab, var(--color-rose-600) 50%, transparent);
|
|
}
|
|
color: var(--color-rose-100);
|
|
&.btn__filled {
|
|
background-color: var(--color-rose-600);
|
|
}
|
|
}
|
|
&.btn__white {
|
|
border-color: var(--color-white);
|
|
background-color: color-mix(in srgb, #fff 30%, transparent);
|
|
@supports (color: color-mix(in lab, red, red)) {
|
|
background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
|
|
}
|
|
&.btn__filled {
|
|
background-color: var(--color-white);
|
|
}
|
|
}
|
|
}
|
|
.ed-button-group__horizontal {
|
|
display: grid;
|
|
:where(& > :not(:last-child)) {
|
|
--tw-divide-x-reverse: 0;
|
|
border-inline-style: var(--tw-border-style);
|
|
border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
|
|
border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
|
|
}
|
|
.ed-button {
|
|
border-radius: 0;
|
|
&:first-child {
|
|
border-top-left-radius: var(--radius-lg);
|
|
border-bottom-left-radius: var(--radius-lg);
|
|
}
|
|
&:last-child {
|
|
border-top-right-radius: var(--radius-lg);
|
|
border-bottom-right-radius: var(--radius-lg);
|
|
}
|
|
}
|
|
}
|
|
.ed-button-group__vertical {
|
|
display: grid;
|
|
:where(& > :not(:last-child)) {
|
|
--tw-divide-y-reverse: 0;
|
|
border-bottom-style: var(--tw-border-style);
|
|
border-top-style: var(--tw-border-style);
|
|
border-top-width: calc(1px * var(--tw-divide-y-reverse));
|
|
border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
|
|
}
|
|
.ed-button {
|
|
border-radius: 0;
|
|
&:first-child {
|
|
border-top-left-radius: var(--radius-lg);
|
|
border-top-right-radius: var(--radius-lg);
|
|
}
|
|
&:last-child {
|
|
border-bottom-right-radius: var(--radius-lg);
|
|
border-bottom-left-radius: var(--radius-lg);
|
|
}
|
|
}
|
|
}
|
|
.ed-toggle {
|
|
.toggle__wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: calc(infinity * 1px);
|
|
border-style: var(--tw-border-style);
|
|
border-width: 2px;
|
|
padding: calc(var(--spacing) * 1.5);
|
|
}
|
|
.toggle__indicator {
|
|
position: absolute;
|
|
aspect-ratio: 1 / 1;
|
|
border-radius: calc(infinity * 1px);
|
|
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
|
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
}
|
|
&.toggle__horizontal {
|
|
height: calc(var(--spacing) * 12);
|
|
width: calc(var(--spacing) * 20);
|
|
.toggle__indicator {
|
|
left: calc(var(--spacing) * 1.5);
|
|
height: calc(100% - .75rem);
|
|
--tw-translate-x: calc(var(--spacing) * 0);
|
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
}
|
|
&[active] .toggle__indicator {
|
|
--tw-translate-x: 100%;
|
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
}
|
|
}
|
|
&.toggle__vertical {
|
|
height: calc(var(--spacing) * 20);
|
|
width: calc(var(--spacing) * 12);
|
|
.toggle__indicator {
|
|
top: calc(var(--spacing) * 1.5);
|
|
width: calc(100% - .75rem);
|
|
--tw-translate-y: calc(var(--spacing) * 0);
|
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
}
|
|
&[active] .toggle__indicator {
|
|
--tw-translate-y: 100%;
|
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
}
|
|
}
|
|
}
|
|
dialog[open] {
|
|
position: absolute;
|
|
top: calc(1/2 * 100%);
|
|
left: calc(1/2 * 100%);
|
|
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
|
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
|
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
border-style: var(--tw-border-style);
|
|
border-width: 0px;
|
|
background-color: transparent;
|
|
outline-style: var(--tw-outline-style);
|
|
outline-width: 0px;
|
|
&::backdrop {
|
|
background-color: color-mix(in srgb, #000 50%, transparent);
|
|
@supports (color: color-mix(in lab, red, red)) {
|
|
background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
|
|
}
|
|
}
|
|
.dialog__close {
|
|
position: absolute;
|
|
top: calc(var(--spacing) * 3);
|
|
right: calc(var(--spacing) * 3);
|
|
color: var(--color-white);
|
|
}
|
|
}
|
|
#clock {
|
|
position: relative;
|
|
display: flex;
|
|
width: fit-content;
|
|
padding-right: calc(var(--spacing) * 16);
|
|
font-size: var(--text-3xl);
|
|
line-height: var(--tw-leading, var(--text-3xl--line-height));
|
|
i {
|
|
padding-left: calc(var(--spacing) * 1);
|
|
font-style: normal;
|
|
}
|
|
.hours-minutes, .seconds {
|
|
display: flex;
|
|
gap: calc(var(--spacing) * 1);
|
|
}
|
|
span {
|
|
display: inline-block;
|
|
width: .75em;
|
|
text-align: center;
|
|
}
|
|
sup {
|
|
position: absolute;
|
|
right: calc(var(--spacing) * 0);
|
|
width: calc(var(--spacing) * 16);
|
|
padding-left: calc(var(--spacing) * 2);
|
|
text-align: left;
|
|
font-size: var(--text-lg);
|
|
line-height: var(--tw-leading, var(--text-lg--line-height));
|
|
opacity: 80%;
|
|
}
|
|
}
|
|
@property --tw-divide-x-reverse {
|
|
syntax: "*";
|
|
inherits: false;
|
|
initial-value: 0;
|
|
}
|
|
@property --tw-border-style {
|
|
syntax: "*";
|
|
inherits: false;
|
|
initial-value: solid;
|
|
}
|
|
@property --tw-font-weight {
|
|
syntax: "*";
|
|
inherits: false;
|
|
}
|
|
@property --tw-tracking {
|
|
syntax: "*";
|
|
inherits: false;
|
|
}
|
|
@property --tw-divide-y-reverse {
|
|
syntax: "*";
|
|
inherits: false;
|
|
initial-value: 0;
|
|
}
|
|
@property --tw-translate-x {
|
|
syntax: "*";
|
|
inherits: false;
|
|
initial-value: 0;
|
|
}
|
|
@property --tw-translate-y {
|
|
syntax: "*";
|
|
inherits: false;
|
|
initial-value: 0;
|
|
}
|
|
@property --tw-translate-z {
|
|
syntax: "*";
|
|
inherits: false;
|
|
initial-value: 0;
|
|
}
|
|
@property --tw-outline-style {
|
|
syntax: "*";
|
|
inherits: false;
|
|
initial-value: solid;
|
|
}
|
|
@layer properties {
|
|
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
|
|
*, ::before, ::after, ::backdrop {
|
|
--tw-divide-x-reverse: 0;
|
|
--tw-border-style: solid;
|
|
--tw-font-weight: initial;
|
|
--tw-tracking: initial;
|
|
--tw-divide-y-reverse: 0;
|
|
--tw-translate-x: 0;
|
|
--tw-translate-y: 0;
|
|
--tw-translate-z: 0;
|
|
--tw-outline-style: solid;
|
|
}
|
|
}
|
|
}
|