jamey/berrypod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

remove Tailwind + DaisyUI theme + heroicons plugin, admin fully custom CSS (Phase 7)

Browse Source 
replace Tailwind CLI with esbuild for admin CSS bundling. admin now uses
hand-written utility classes (admin/utilities.css), static heroicon CSS
generated by mix generate_admin_icons, plain CSS colour themes extracted
from DaisyUI plugin config, and minimal resets. rename app.css to admin.css
for clarity alongside shop.css. delete vendor/daisyui-theme.js and
vendor/heroicons.js. no Tailwind dependency remains in the project.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey 2026-02-18 01:15:28 +00:00
parent af0b0c217f
commit 82583822f5
21 changed files with 1614 additions and 319 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
assets/css/app.css → assets/css/admin.css
View File

@ -1,130 +1,22 @@
/* See the Tailwind configuration guide for advanced usage /* Admin CSS — bundled by esbuild */
https://tailwindcss.com/docs/configuration */
@import "tailwindcss" source(none); /* Reset and colour themes */
@source "../css"; @import "./admin/reset.css";
@source "../js"; @import "./admin/themes.css";
@source "../../lib/simpleshop_theme_web";
/* A Tailwind plugin that makes "hero-#{ICON}" classes available. /* Theme CSS layers (used by theme editor preview) */
The heroicons installation itself is managed by your mix.exs */
@plugin "../vendor/heroicons";
/* daisyUI theme plugin. You can update this file by fetching the latest version with:
curl -sLO https://github.com/saadeghi/daisyui/releases/latest/download/daisyui-theme.js
We ship with two themes, a light one inspired on Phoenix colors and a dark one inspired
on Elixir colors. Build your own at: https://daisyui.com/theme-generator/ */
@plugin "../vendor/daisyui-theme" {
name: "dark";
default: false;
prefersdark: true;
color-scheme: "dark";
--color-base-100: oklch(30.33% 0.016 252.42);
--color-base-200: oklch(25.26% 0.014 253.1);
--color-base-300: oklch(20.15% 0.012 254.09);
--color-base-content: oklch(97.807% 0.029 256.847);
--color-primary: oklch(58% 0.233 277.117);
--color-primary-content: oklch(96% 0.018 272.314);
--color-secondary: oklch(58% 0.233 277.117);
--color-secondary-content: oklch(96% 0.018 272.314);
--color-accent: oklch(60% 0.25 292.717);
--color-accent-content: oklch(96% 0.016 293.756);
--color-neutral: oklch(37% 0.044 257.287);
--color-neutral-content: oklch(98% 0.003 247.858);
--color-info: oklch(58% 0.158 241.966);
--color-info-content: oklch(97% 0.013 236.62);
--color-success: oklch(60% 0.118 184.704);
--color-success-content: oklch(98% 0.014 180.72);
--color-warning: oklch(66% 0.179 58.318);
--color-warning-content: oklch(98% 0.022 95.277);
--color-error: oklch(58% 0.253 17.585);
--color-error-content: oklch(96% 0.015 12.422);
--radius-selector: 0.25rem;
--radius-field: 0.25rem;
--radius-box: 0.5rem;
--size-selector: 0.21875rem;
--size-field: 0.21875rem;
--border: 1.5px;
--depth: 1;
--noise: 0;
}
@plugin "../vendor/daisyui-theme" {
name: "light";
default: true;
prefersdark: false;
color-scheme: "light";
--color-base-100: oklch(98% 0 0);
--color-base-200: oklch(96% 0.001 286.375);
--color-base-300: oklch(92% 0.004 286.32);
--color-base-content: oklch(21% 0.006 285.885);
--color-primary: oklch(70% 0.213 47.604);
--color-primary-content: oklch(98% 0.016 73.684);
--color-secondary: oklch(55% 0.027 264.364);
--color-secondary-content: oklch(98% 0.002 247.839);
--color-accent: oklch(0% 0 0);
--color-accent-content: oklch(100% 0 0);
--color-neutral: oklch(44% 0.017 285.786);
--color-neutral-content: oklch(98% 0 0);
--color-info: oklch(62% 0.214 259.815);
--color-info-content: oklch(97% 0.014 254.604);
--color-success: oklch(70% 0.14 182.503);
--color-success-content: oklch(98% 0.014 180.72);
--color-warning: oklch(66% 0.179 58.318);
--color-warning-content: oklch(98% 0.022 95.277);
--color-error: oklch(58% 0.253 17.585);
--color-error-content: oklch(96% 0.015 12.422);
--radius-selector: 0.25rem;
--radius-field: 0.25rem;
--radius-box: 0.5rem;
--size-selector: 0.21875rem;
--size-field: 0.21875rem;
--border: 1.5px;
--depth: 1;
--noise: 0;
}
/* Add variants based on LiveView classes */
@custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &);
@custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &);
@custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &);
/* Use the data attribute for dark mode */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
/* Make LiveView wrapper divs transparent for layout */
[data-phx-session], [data-phx-teleported-src] { display: contents }
/* Theme CSS - Layer 1: Primitives (fixed CSS variables) */
@import "./theme-primitives.css"; @import "./theme-primitives.css";
/* Theme CSS - Layer 2: Attribute-based theme tokens */
@import "./theme-layer2-attributes.css"; @import "./theme-layer2-attributes.css";
/* Theme CSS - Layer 3: Semantic aliases */
@import "./theme-semantic.css"; @import "./theme-semantic.css";
/* Admin component styles (replaces DaisyUI components) */ /* Admin components, icons, and utilities */
@import "./admin/components.css"; @import "./admin/components.css";
@import "./admin/icons.css";
@import "./admin/utilities.css";
/* Cart drawer open state styles */ /* LiveView loading state variants */
.cart-drawer.open { .phx-click-loading, .phx-submit-loading, .phx-change-loading {
right: 0 !important; /* Available for component styling */
}
.cart-drawer-overlay.open {
opacity: 1 !important;
visibility: visible !important;
}
/* Product gallery thumbnail styles */
.pdp-thumbnail {
border: 2px solid var(--t-border-default);
transition: border-color 0.15s ease;
}
.pdp-thumbnail-active {
border-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
} }
/* ============================================= /* =============================================

9
assets/css/admin/components.css
View File

@ -608,3 +608,12 @@
&.active .admin-swap-on { display: inline-flex; } &.active .admin-swap-on { display: inline-flex; }
&.active .admin-swap-off { display: none; } &.active .admin-swap-off { display: none; }
} }
/* ── Theme toggle ── */
.theme-toggle-indicator {
transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme="light"] .theme-toggle-indicator { left: 33.333333%; }
[data-theme="dark"] .theme-toggle-indicator { left: 66.666667%; }

625
assets/css/admin/icons.css Normal file
View File

@ -0,0 +1,625 @@
/* Generated by mix generate_admin_icons — do not edit by hand */
.hero-arrow-left-mini {
--hero-arrow-left-mini: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2020%2020"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20fill-rule="evenodd"%20d="M17%2010a.75.75%200%200%201-.75.75H5.612l4.158%203.96a.75.75%200%201%201-1.04%201.08l-5.5-5.25a.75.75%200%200%201%200-1.08l5.5-5.25a.75.75%200%201%201%201.04%201.08L5.612%209.25H16.25A.75.75%200%200%201%2017%2010Z"%20clip-rule="evenodd"/></svg>');
-webkit-mask: var(--hero-arrow-left-mini);
mask: var(--hero-arrow-left-mini);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
}
.hero-arrow-path {
--hero-arrow-path: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="M16.023%209.348h4.992v-.001M2.985%2019.644v-4.992m0%200h4.992m-4.993%200%203.181%203.183a8.25%208.25%200%200%200%2013.803-3.7M4.031%209.865a8.25%208.25%200%200%201%2013.803-3.7l3.181%203.182m0-4.991v4.99"/></svg>');
-webkit-mask: var(--hero-arrow-path);
mask: var(--hero-arrow-path);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.hero-arrow-path-mini {
--hero-arrow-path-mini: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2020%2020"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20fill-rule="evenodd"%20d="M15.312%2011.424a5.5%205.5%200%200%201-9.201%202.466l-.312-.311h2.433a.75.75%200%200%200%200-1.5H3.989a.75.75%200%200%200-.75.75v4.242a.75.75%200%200%200%201.5%200v-2.43l.31.31a7%207%200%200%200%2011.712-3.138.75.75%200%200%200-1.449-.39Zm1.23-3.723a.75.75%200%200%200%20.219-.53V2.929a.75.75%200%200%200-1.5%200V5.36l-.31-.31A7%207%200%200%200%203.239%208.188a.75.75%200%201%200%201.448.389A5.5%205.5%200%200%201%2013.89%206.11l.311.31h-2.432a.75.75%200%200%200%200%201.5h4.243a.75.75%200%200%200%20.53-.219Z"%20clip-rule="evenodd"/></svg>');
-webkit-mask: var(--hero-arrow-path-mini);
mask: var(--hero-arrow-path-mini);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
}
.hero-arrow-right-start-on-rectangle {
--hero-arrow-right-start-on-rectangle: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="M15.75%209V5.25A2.25%202.25%200%200%200%2013.5%203h-6a2.25%202.25%200%200%200-2.25%202.25v13.5A2.25%202.25%200%200%200%207.5%2021h6a2.25%202.25%200%200%200%202.25-2.25V15m3%200%203-3m0%200-3-3m3%203H9"/></svg>');
-webkit-mask: var(--hero-arrow-right-start-on-rectangle);
mask: var(--hero-arrow-right-start-on-rectangle);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.hero-arrow-top-right-on-square {
--hero-arrow-top-right-on-square: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="M13.5%206H5.25A2.25%202.25%200%200%200%203%208.25v10.5A2.25%202.25%200%200%200%205.25%2021h10.5A2.25%202.25%200%200%200%2018%2018.75V10.5m-10.5%206L21%203m0%200h-5.25M21%203v5.25"/></svg>');
-webkit-mask: var(--hero-arrow-top-right-on-square);
mask: var(--hero-arrow-top-right-on-square);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.hero-arrow-top-right-on-square-mini {
--hero-arrow-top-right-on-square-mini: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2020%2020"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20fill-rule="evenodd"%20d="M4.25%205.5a.75.75%200%200%200-.75.75v8.5c0%20.414.336.75.75.75h8.5a.75.75%200%200%200%20.75-.75v-4a.75.75%200%200%201%201.5%200v4A2.25%202.25%200%200%201%2012.75%2017h-8.5A2.25%202.25%200%200%201%202%2014.75v-8.5A2.25%202.25%200%200%201%204.25%204h5a.75.75%200%200%201%200%201.5h-5Z"%20clip-rule="evenodd"/>%20%20<path%20fill-rule="evenodd"%20d="M6.194%2012.753a.75.75%200%200%200%201.06.053L16.5%204.44v2.81a.75.75%200%200%200%201.5%200v-4.5a.75.75%200%200%200-.75-.75h-4.5a.75.75%200%200%200%200%201.5h2.553l-9.056%208.194a.75.75%200%200%200-.053%201.06Z"%20clip-rule="evenodd"/></svg>');
-webkit-mask: var(--hero-arrow-top-right-on-square-mini);
mask: var(--hero-arrow-top-right-on-square-mini);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
}
.hero-arrow-uturn-left-mini {
--hero-arrow-uturn-left-mini: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2020%2020"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20fill-rule="evenodd"%20d="M7.793%202.232a.75.75%200%200%201-.025%201.06L3.622%207.25h10.003a5.375%205.375%200%200%201%200%2010.75H10.75a.75.75%200%200%201%200-1.5h2.875a3.875%203.875%200%200%200%200-7.75H3.622l4.146%203.957a.75.75%200%200%201-1.036%201.085l-5.5-5.25a.75.75%200%200%201%200-1.085l5.5-5.25a.75.75%200%200%201%201.06.025Z"%20clip-rule="evenodd"/></svg>');
-webkit-mask: var(--hero-arrow-uturn-left-mini);
mask: var(--hero-arrow-uturn-left-mini);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
}
.hero-banknotes {
--hero-banknotes: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="M2.25%2018.75a60.07%2060.07%200%200%201%2015.797%202.101c.727.198%201.453-.342%201.453-1.096V18.75M3.75%204.5v.75A.75.75%200%200%201%203%206h-.75m0%200v-.375c0-.621.504-1.125%201.125-1.125H20.25M2.25%206v9m18-10.5v.75c0%20.414.336.75.75.75h.75m-1.5-1.5h.375c.621%200%201.125.504%201.125%201.125v9.75c0%20.621-.504%201.125-1.125%201.125h-.375m1.5-1.5H21a.75.75%200%200%200-.75.75v.75m0%200H3.75m0%200h-.375a1.125%201.125%200%200%201-1.125-1.125V15m1.5%201.5v-.75A.75.75%200%200%200%203%2015h-.75M15%2010.5a3%203%200%201%201-6%200%203%203%200%200%201%206%200Zm3%200h.008v.008H18V10.5Zm-12%200h.008v.008H6V10.5Z"/></svg>');
-webkit-mask: var(--hero-banknotes);
mask: var(--hero-banknotes);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.hero-bars-3 {
--hero-bars-3: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="M3.75%206.75h16.5M3.75%2012h16.5m-16.5%205.25h16.5"/></svg>');
-webkit-mask: var(--hero-bars-3);
mask: var(--hero-bars-3);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.hero-bug-ant {
--hero-bug-ant: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="M12%2012.75c1.148%200%202.278.08%203.383.237%201.037.146%201.866.966%201.866%202.013%200%203.728-2.35%206.75-5.25%206.75S6.75%2018.728%206.75%2015c0-1.046.83-1.867%201.866-2.013A24.204%2024.204%200%200%201%2012%2012.75Zm0%200c2.883%200%205.647.508%208.207%201.44a23.91%2023.91%200%200%201-1.152%206.06M12%2012.75c-2.883%200-5.647.508-8.208%201.44.125%202.104.52%204.136%201.153%206.06M12%2012.75a2.25%202.25%200%200%200%202.248-2.354M12%2012.75a2.25%202.25%200%200%201-2.248-2.354M12%208.25c.995%200%201.971-.08%202.922-.236.403-.066.74-.358.795-.762a3.778%203.778%200%200%200-.399-2.25M12%208.25c-.995%200-1.97-.08-2.922-.236-.402-.066-.74-.358-.795-.762a3.734%203.734%200%200%201%20.4-2.253M12%208.25a2.25%202.25%200%200%200-2.248%202.146M12%208.25a2.25%202.25%200%200%201%202.248%202.146M8.683%205a6.032%206.032%200%200%201-1.155-1.002c.07-.63.27-1.222.574-1.747m.581%202.749A3.75%203.75%200%200%201%2015.318%205m0%200c.427-.283.815-.62%201.155-.999a4.471%204.471%200%200%200-.575-1.752M4.921%206a24.048%2024.048%200%200%200-.392%203.314c1.668.546%203.416.914%205.223%201.082M19.08%206c.205%201.08.337%202.187.392%203.314a23.882%2023.882%200%200%201-5.223%201.082"/></svg>');
-webkit-mask: var(--hero-bug-ant);
mask: var(--hero-bug-ant);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.hero-chart-bar {
--hero-chart-bar: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="M3%2013.125C3%2012.504%203.504%2012%204.125%2012h2.25c.621%200%201.125.504%201.125%201.125v6.75C7.5%2020.496%206.996%2021%206.375%2021h-2.25A1.125%201.125%200%200%201%203%2019.875v-6.75ZM9.75%208.625c0-.621.504-1.125%201.125-1.125h2.25c.621%200%201.125.504%201.125%201.125v11.25c0%20.621-.504%201.125-1.125%201.125h-2.25a1.125%201.125%200%200%201-1.125-1.125V8.625ZM16.5%204.125c0-.621.504-1.125%201.125-1.125h2.25C20.496%203%2021%203.504%2021%204.125v15.75c0%20.621-.504%201.125-1.125%201.125h-2.25a1.125%201.125%200%200%201-1.125-1.125V4.125Z"/></svg>');
-webkit-mask: var(--hero-chart-bar);
mask: var(--hero-chart-bar);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.hero-check-badge {
--hero-check-badge: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="M9%2012.75%2011.25%2015%2015%209.75M21%2012c0%201.268-.63%202.39-1.593%203.068a3.745%203.745%200%200%201-1.043%203.296%203.745%203.745%200%200%201-3.296%201.043A3.745%203.745%200%200%201%2012%2021c-1.268%200-2.39-.63-3.068-1.593a3.746%203.746%200%200%201-3.296-1.043%203.745%203.745%200%200%201-1.043-3.296A3.745%203.745%200%200%201%203%2012c0-1.268.63-2.39%201.593-3.068a3.745%203.745%200%200%201%201.043-3.296%203.746%203.746%200%200%201%203.296-1.043A3.746%203.746%200%200%201%2012%203c1.268%200%202.39.63%203.068%201.593a3.746%203.746%200%200%201%203.296%201.043%203.746%203.746%200%200%201%201.043%203.296A3.745%203.745%200%200%201%2021%2012Z"/></svg>');
-webkit-mask: var(--hero-check-badge);
mask: var(--hero-check-badge);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.hero-check-circle {
--hero-check-circle: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="M9%2012.75%2011.25%2015%2015%209.75M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200Z"/></svg>');
-webkit-mask: var(--hero-check-circle);
mask: var(--hero-check-circle);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.hero-check-circle-mini {
--hero-check-circle-mini: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2020%2020"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20fill-rule="evenodd"%20d="M10%2018a8%208%200%201%200%200-16%208%208%200%200%200%200%2016Zm3.857-9.809a.75.75%200%200%200-1.214-.882l-3.483%204.79-1.88-1.88a.75.75%200%201%200-1.06%201.061l2.5%202.5a.75.75%200%200%200%201.137-.089l4-5.5Z"%20clip-rule="evenodd"/></svg>');
-webkit-mask: var(--hero-check-circle-mini);
mask: var(--hero-check-circle-mini);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
}
.hero-check-mini {
--hero-check-mini: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2020%2020"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20fill-rule="evenodd"%20d="M16.704%204.153a.75.75%200%200%201%20.143%201.052l-8%2010.5a.75.75%200%200%201-1.127.075l-4.5-4.5a.75.75%200%200%201%201.06-1.06l3.894%203.893%207.48-9.817a.75.75%200%200%201%201.05-.143Z"%20clip-rule="evenodd"/></svg>');
-webkit-mask: var(--hero-check-mini);
mask: var(--hero-check-mini);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
}
.hero-chevron-down-mini {
--hero-chevron-down-mini: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2020%2020"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20fill-rule="evenodd"%20d="M5.22%208.22a.75.75%200%200%201%201.06%200L10%2011.94l3.72-3.72a.75.75%200%201%201%201.06%201.06l-4.25%204.25a.75.75%200%200%201-1.06%200L5.22%209.28a.75.75%200%200%201%200-1.06Z"%20clip-rule="evenodd"/></svg>');
-webkit-mask: var(--hero-chevron-down-mini);
mask: var(--hero-chevron-down-mini);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
}
.hero-chevron-right-mini {
--hero-chevron-right-mini: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2020%2020"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20fill-rule="evenodd"%20d="M8.22%205.22a.75.75%200%200%201%201.06%200l4.25%204.25a.75.75%200%200%201%200%201.06l-4.25%204.25a.75.75%200%200%201-1.06-1.06L11.94%2010%208.22%206.28a.75.75%200%200%201%200-1.06Z"%20clip-rule="evenodd"/></svg>');
-webkit-mask: var(--hero-chevron-right-mini);
mask: var(--hero-chevron-right-mini);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
}
.hero-chevron-up-mini {
--hero-chevron-up-mini: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2020%2020"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20fill-rule="evenodd"%20d="M9.47%206.47a.75.75%200%200%201%201.06%200l4.25%204.25a.75.75%200%201%201-1.06%201.06L10%208.06l-3.72%203.72a.75.75%200%200%201-1.06-1.06l4.25-4.25Z"%20clip-rule="evenodd"/></svg>');
-webkit-mask: var(--hero-chevron-up-mini);
mask: var(--hero-chevron-up-mini);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
}
.hero-clock {
--hero-clock: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="M12%206v6h4.5m4.5%200a9%209%200%201%201-18%200%209%209%200%200%201%2018%200Z"/></svg>');
-webkit-mask: var(--hero-clock);
mask: var(--hero-clock);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.hero-clock-mini {
--hero-clock-mini: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2020%2020"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20fill-rule="evenodd"%20d="M10%2018a8%208%200%201%200%200-16%208%208%200%200%200%200%2016Zm.75-13a.75.75%200%200%200-1.5%200v5c0%20.414.336.75.75.75h4a.75.75%200%200%200%200-1.5h-3.25V5Z"%20clip-rule="evenodd"/></svg>');
-webkit-mask: var(--hero-clock-mini);
mask: var(--hero-clock-mini);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
}
.hero-cog-6-tooth {
--hero-cog-6-tooth: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="M9.594%203.94c.09-.542.56-.94%201.11-.94h2.593c.55%200%201.02.398%201.11.94l.213%201.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257%201.075.124l1.217-.456a1.125%201.125%200%200%201%201.37.49l1.296%202.247a1.125%201.125%200%200%201-.26%201.431l-1.003.827c-.293.241-.438.613-.43.992a7.723%207.723%200%200%201%200%20.255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26%201.43l-1.298%202.247a1.125%201.125%200%200%201-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47%206.47%200%200%201-.22.128c-.331.183-.581.495-.644.869l-.213%201.281c-.09.543-.56.94-1.11.94h-2.594c-.55%200-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52%206.52%200%200%201-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125%201.125%200%200%201-1.369-.49l-1.297-2.247a1.125%201.125%200%200%201%20.26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932%206.932%200%200%201%200-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125%201.125%200%200%201-.26-1.43l1.297-2.247a1.125%201.125%200%200%201%201.37-.491l1.216.456c.356.133.751.072%201.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"/>%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="M15%2012a3%203%200%201%201-6%200%203%203%200%200%201%206%200Z"/></svg>');
-webkit-mask: var(--hero-cog-6-tooth);
mask: var(--hero-cog-6-tooth);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.hero-cog-6-tooth-mini {
--hero-cog-6-tooth-mini: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2020%2020"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20fill-rule="evenodd"%20d="M7.84%201.804A1%201%200%200%201%208.82%201h2.36a1%201%200%200%201%20.98.804l.331%201.652a6.993%206.993%200%200%201%201.929%201.115l1.598-.54a1%201%200%200%201%201.186.447l1.18%202.044a1%201%200%200%201-.205%201.251l-1.267%201.113a7.047%207.047%200%200%201%200%202.228l1.267%201.113a1%201%200%200%201%20.206%201.25l-1.18%202.045a1%201%200%200%201-1.187.447l-1.598-.54a6.993%206.993%200%200%201-1.929%201.115l-.33%201.652a1%201%200%200%201-.98.804H8.82a1%201%200%200%201-.98-.804l-.331-1.652a6.993%206.993%200%200%201-1.929-1.115l-1.598.54a1%201%200%200%201-1.186-.447l-1.18-2.044a1%201%200%200%201%20.205-1.251l1.267-1.114a7.05%207.05%200%200%201%200-2.227L1.821%207.773a1%201%200%200%201-.206-1.25l1.18-2.045a1%201%200%200%201%201.187-.447l1.598.54A6.992%206.992%200%200%201%207.51%203.456l.33-1.652ZM10%2013a3%203%200%201%200%200-6%203%203%200%200%200%200%206Z"%20clip-rule="evenodd"/></svg>');
-webkit-mask: var(--hero-cog-6-tooth-mini);
mask: var(--hero-cog-6-tooth-mini);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
}
.hero-computer-desktop-micro {
--hero-computer-desktop-micro: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2016%2016"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20fill-rule="evenodd"%20d="M2%204.25A2.25%202.25%200%200%201%204.25%202h7.5A2.25%202.25%200%200%201%2014%204.25v5.5A2.25%202.25%200%200%201%2011.75%2012h-1.312c.1.128.21.248.328.36a.75.75%200%200%201%20.234.545v.345a.75.75%200%200%201-.75.75h-4.5a.75.75%200%200%201-.75-.75v-.345a.75.75%200%200%201%20.234-.545c.118-.111.228-.232.328-.36H4.25A2.25%202.25%200%200%201%202%209.75v-5.5Zm2.25-.75a.75.75%200%200%200-.75.75v4.5c0%20.414.336.75.75.75h7.5a.75.75%200%200%200%20.75-.75v-4.5a.75.75%200%200%200-.75-.75h-7.5Z"%20clip-rule="evenodd"/></svg>');
-webkit-mask: var(--hero-computer-desktop-micro);
mask: var(--hero-computer-desktop-micro);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1rem;
height: 1rem;
}
.hero-cube {
--hero-cube: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="m21%207.5-9-5.25L3%207.5m18%200-9%205.25m9-5.25v9l-9%205.25M3%207.5l9%205.25M3%207.5v9l9%205.25m0-9v9"/></svg>');
-webkit-mask: var(--hero-cube);
mask: var(--hero-cube);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.hero-exclamation-circle {
--hero-exclamation-circle: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="M12%209v3.75m9-.75a9%209%200%201%201-18%200%209%209%200%200%201%2018%200Zm-9%203.75h.008v.008H12v-.008Z"/></svg>');
-webkit-mask: var(--hero-exclamation-circle);
mask: var(--hero-exclamation-circle);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.hero-exclamation-triangle {
--hero-exclamation-triangle: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="M12%209v3.75m-9.303%203.376c-.866%201.5.217%203.374%201.948%203.374h14.71c1.73%200%202.813-1.874%201.948-3.374L13.949%203.378c-.866-1.5-3.032-1.5-3.898%200L2.697%2016.126ZM12%2015.75h.007v.008H12v-.008Z"/></svg>');
-webkit-mask: var(--hero-exclamation-triangle);
mask: var(--hero-exclamation-triangle);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.hero-exclamation-triangle-mini {
--hero-exclamation-triangle-mini: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2020%2020"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20fill-rule="evenodd"%20d="M8.485%202.495c.673-1.167%202.357-1.167%203.03%200l6.28%2010.875c.673%201.167-.17%202.625-1.516%202.625H3.72c-1.347%200-2.189-1.458-1.515-2.625L8.485%202.495ZM10%205a.75.75%200%200%201%20.75.75v3.5a.75.75%200%200%201-1.5%200v-3.5A.75.75%200%200%201%2010%205Zm0%209a1%201%200%201%200%200-2%201%201%200%200%200%200%202Z"%20clip-rule="evenodd"/></svg>');
-webkit-mask: var(--hero-exclamation-triangle-mini);
mask: var(--hero-exclamation-triangle-mini);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
}
.hero-eye {
--hero-eye: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="M2.036%2012.322a1.012%201.012%200%200%201%200-.639C3.423%207.51%207.36%204.5%2012%204.5c4.638%200%208.573%203.007%209.963%207.178.07.207.07.431%200%20.639C20.577%2016.49%2016.64%2019.5%2012%2019.5c-4.638%200-8.573-3.007-9.963-7.178Z"/>%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="M15%2012a3%203%200%201%201-6%200%203%203%200%200%201%206%200Z"/></svg>');
-webkit-mask: var(--hero-eye);
mask: var(--hero-eye);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.hero-eye-mini {
--hero-eye-mini: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2020%2020"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20d="M10%2012.5a2.5%202.5%200%201%200%200-5%202.5%202.5%200%200%200%200%205Z"/>%20%20<path%20fill-rule="evenodd"%20d="M.664%2010.59a1.651%201.651%200%200%201%200-1.186A10.004%2010.004%200%200%201%2010%203c4.257%200%207.893%202.66%209.336%206.41.147.381.146.804%200%201.186A10.004%2010.004%200%200%201%2010%2017c-4.257%200-7.893-2.66-9.336-6.41ZM14%2010a4%204%200%201%201-8%200%204%204%200%200%201%208%200Z"%20clip-rule="evenodd"/></svg>');
-webkit-mask: var(--hero-eye-mini);
mask: var(--hero-eye-mini);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
}
.hero-eye-slash {
--hero-eye-slash: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="M3.98%208.223A10.477%2010.477%200%200%200%201.934%2012C3.226%2016.338%207.244%2019.5%2012%2019.5c.993%200%201.953-.138%202.863-.395M6.228%206.228A10.451%2010.451%200%200%201%2012%204.5c4.756%200%208.773%203.162%2010.065%207.498a10.522%2010.522%200%200%201-4.293%205.774M6.228%206.228%203%203m3.228%203.228%203.65%203.65m7.894%207.894L21%2021m-3.228-3.228-3.65-3.65m0%200a3%203%200%201%200-4.243-4.243m4.242%204.242L9.88%209.88"/></svg>');
-webkit-mask: var(--hero-eye-slash);
mask: var(--hero-eye-slash);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.hero-eye-slash-mini {
--hero-eye-slash-mini: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2020%2020"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20fill-rule="evenodd"%20d="M3.28%202.22a.75.75%200%200%200-1.06%201.06l14.5%2014.5a.75.75%200%201%200%201.06-1.06l-1.745-1.745a10.029%2010.029%200%200%200%203.3-4.38%201.651%201.651%200%200%200%200-1.185A10.004%2010.004%200%200%200%209.999%203a9.956%209.956%200%200%200-4.744%201.194L3.28%202.22ZM7.752%206.69l1.092%201.092a2.5%202.5%200%200%201%203.374%203.373l1.091%201.092a4%204%200%200%200-5.557-5.557Z"%20clip-rule="evenodd"/>%20%20<path%20d="m10.748%2013.93%202.523%202.523a9.987%209.987%200%200%201-3.27.547c-4.258%200-7.894-2.66-9.337-6.41a1.651%201.651%200%200%201%200-1.186A10.007%2010.007%200%200%201%202.839%206.02L6.07%209.252a4%204%200%200%200%204.678%204.678Z"/></svg>');
-webkit-mask: var(--hero-eye-slash-mini);
mask: var(--hero-eye-slash-mini);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
}
.hero-home {
--hero-home: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="m2.25%2012%208.954-8.955c.44-.439%201.152-.439%201.591%200L21.75%2012M4.5%209.75v10.125c0%20.621.504%201.125%201.125%201.125H9.75v-4.875c0-.621.504-1.125%201.125-1.125h2.25c.621%200%201.125.504%201.125%201.125V21h4.125c.621%200%201.125-.504%201.125-1.125V9.75M8.25%2021h8.25"/></svg>');
-webkit-mask: var(--hero-home);
mask: var(--hero-home);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.hero-inbox {
--hero-inbox: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="M2.25%2013.5h3.86a2.25%202.25%200%200%201%202.012%201.244l.256.512a2.25%202.25%200%200%200%202.013%201.244h3.218a2.25%202.25%200%200%200%202.013-1.244l.256-.512a2.25%202.25%200%200%201%202.013-1.244h3.859m-19.5.338V18a2.25%202.25%200%200%200%202.25%202.25h15A2.25%202.25%200%200%200%2021.75%2018v-4.162c0-.224-.034-.447-.1-.661L19.24%205.338a2.25%202.25%200%200%200-2.15-1.588H6.911a2.25%202.25%200%200%200-2.15%201.588L2.35%2013.177a2.25%202.25%200%200%200-.1.661Z"/></svg>');
-webkit-mask: var(--hero-inbox);
mask: var(--hero-inbox);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.hero-information-circle {
--hero-information-circle: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="m11.25%2011.25.041-.02a.75.75%200%200%201%201.063.852l-.708%202.836a.75.75%200%200%200%201.063.853l.041-.021M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200Zm-9-3.75h.008v.008H12V8.25Z"/></svg>');
-webkit-mask: var(--hero-information-circle);
mask: var(--hero-information-circle);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.hero-minus-circle-mini {
--hero-minus-circle-mini: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2020%2020"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20fill-rule="evenodd"%20d="M10%2018a8%208%200%201%200%200-16%208%208%200%200%200%200%2016ZM6.75%209.25a.75.75%200%200%200%200%201.5h6.5a.75.75%200%200%200%200-1.5h-6.5Z"%20clip-rule="evenodd"/></svg>');
-webkit-mask: var(--hero-minus-circle-mini);
mask: var(--hero-minus-circle-mini);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
}
.hero-moon-micro {
--hero-moon-micro: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2016%2016"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20d="M14.438%2010.148c.19-.425-.321-.787-.748-.601A5.5%205.5%200%200%201%206.453%202.31c.186-.427-.176-.938-.6-.748a6.501%206.501%200%201%200%208.585%208.586Z"/></svg>');
-webkit-mask: var(--hero-moon-micro);
mask: var(--hero-moon-micro);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1rem;
height: 1rem;
}
.hero-no-symbol-mini {
--hero-no-symbol-mini: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2020%2020"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20fill-rule="evenodd"%20d="m5.965%204.904%209.131%209.131a6.5%206.5%200%200%200-9.131-9.131Zm8.07%2010.192L4.904%205.965a6.5%206.5%200%200%200%209.131%209.131ZM4.343%204.343a8%208%200%201%201%2011.314%2011.314A8%208%200%200%201%204.343%204.343Z"%20clip-rule="evenodd"/></svg>');
-webkit-mask: var(--hero-no-symbol-mini);
mask: var(--hero-no-symbol-mini);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
}
.hero-paint-brush {
--hero-paint-brush: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="M9.53%2016.122a3%203%200%200%200-5.78%201.128%202.25%202.25%200%200%201-2.4%202.245%204.5%204.5%200%200%200%208.4-2.245c0-.399-.078-.78-.22-1.128Zm0%200a15.998%2015.998%200%200%200%203.388-1.62m-5.043-.025a15.994%2015.994%200%200%201%201.622-3.395m3.42%203.42a15.995%2015.995%200%200%200%204.764-4.648l3.876-5.814a1.151%201.151%200%200%200-1.597-1.597L14.146%206.32a15.996%2015.996%200%200%200-4.649%204.763m3.42%203.42a6.776%206.776%200%200%200-3.42-3.42"/></svg>');
-webkit-mask: var(--hero-paint-brush);
mask: var(--hero-paint-brush);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.hero-paint-brush-mini {
--hero-paint-brush-mini: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2020%2020"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20d="M15.993%201.385a1.87%201.87%200%200%201%202.623%202.622l-4.03%205.27a12.749%2012.749%200%200%201-4.237%203.562%204.508%204.508%200%200%200-3.188-3.188%2012.75%2012.75%200%200%201%203.562-4.236l5.27-4.03ZM6%2011a3%203%200%200%200-3%203%20.5.5%200%200%201-.72.45.75.75%200%200%200-1.035.931A4.001%204.001%200%200%200%209%2014.004V14a3.01%203.01%200%200%200-1.66-2.685A2.99%202.99%200%200%200%206%2011Z"/></svg>');
-webkit-mask: var(--hero-paint-brush-mini);
mask: var(--hero-paint-brush-mini);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
}
.hero-paper-airplane-mini {
--hero-paper-airplane-mini: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2020%2020"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20d="M3.105%202.288a.75.75%200%200%200-.826.95l1.414%204.926A1.5%201.5%200%200%200%205.135%209.25h6.115a.75.75%200%200%201%200%201.5H5.135a1.5%201.5%200%200%200-1.442%201.086l-1.414%204.926a.75.75%200%200%200%20.826.95%2028.897%2028.897%200%200%200%2015.293-7.155.75.75%200%200%200%200-1.114A28.897%2028.897%200%200%200%203.105%202.288Z"/></svg>');
-webkit-mask: var(--hero-paper-airplane-mini);
mask: var(--hero-paper-airplane-mini);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
}
.hero-photo {
--hero-photo: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="m2.25%2015.75%205.159-5.159a2.25%202.25%200%200%201%203.182%200l5.159%205.159m-1.5-1.5%201.409-1.409a2.25%202.25%200%200%201%203.182%200l2.909%202.909m-18%203.75h16.5a1.5%201.5%200%200%200%201.5-1.5V6a1.5%201.5%200%200%200-1.5-1.5H3.75A1.5%201.5%200%200%200%202.25%206v12a1.5%201.5%200%200%200%201.5%201.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375%200a.375.375%200%201%201-.75%200%20.375.375%200%200%201%20.75%200Z"/></svg>');
-webkit-mask: var(--hero-photo);
mask: var(--hero-photo);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.hero-plus {
--hero-plus: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="M12%204.5v15m7.5-7.5h-15"/></svg>');
-webkit-mask: var(--hero-plus);
mask: var(--hero-plus);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.hero-plus-mini {
--hero-plus-mini: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2020%2020"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20d="M10.75%204.75a.75.75%200%200%200-1.5%200v4.5h-4.5a.75.75%200%200%200%200%201.5h4.5v4.5a.75.75%200%200%200%201.5%200v-4.5h4.5a.75.75%200%200%200%200-1.5h-4.5v-4.5Z"/></svg>');
-webkit-mask: var(--hero-plus-mini);
mask: var(--hero-plus-mini);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
}
.hero-question-mark-circle-mini {
--hero-question-mark-circle-mini: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2020%2020"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20fill-rule="evenodd"%20d="M18%2010a8%208%200%201%201-16%200%208%208%200%200%201%2016%200ZM8.94%206.94a.75.75%200%201%201-1.061-1.061%203%203%200%201%201%202.871%205.026v.345a.75.75%200%200%201-1.5%200v-.5c0-.72.57-1.172%201.081-1.287A1.5%201.5%200%201%200%208.94%206.94ZM10%2015a1%201%200%201%200%200-2%201%201%200%200%200%200%202Z"%20clip-rule="evenodd"/></svg>');
-webkit-mask: var(--hero-question-mark-circle-mini);
mask: var(--hero-question-mark-circle-mini);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
}
.hero-rocket-launch {
--hero-rocket-launch: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="M15.59%2014.37a6%206%200%200%201-5.84%207.38v-4.8m5.84-2.58a14.98%2014.98%200%200%200%206.16-12.12A14.98%2014.98%200%200%200%209.631%208.41m5.96%205.96a14.926%2014.926%200%200%201-5.841%202.58m-.119-8.54a6%206%200%200%200-7.381%205.84h4.8m2.581-5.84a14.927%2014.927%200%200%200-2.58%205.84m2.699%202.7c-.103.021-.207.041-.311.06a15.09%2015.09%200%200%201-2.448-2.448%2014.9%2014.9%200%200%201%20.06-.312m-2.24%202.39a4.493%204.493%200%200%200-1.757%204.306%204.493%204.493%200%200%200%204.306-1.758M16.5%209a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200Z"/></svg>');
-webkit-mask: var(--hero-rocket-launch);
mask: var(--hero-rocket-launch);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.hero-shopping-bag {
--hero-shopping-bag: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="M15.75%2010.5V6a3.75%203.75%200%201%200-7.5%200v4.5m11.356-1.993%201.263%2012c.07.665-.45%201.243-1.119%201.243H4.25a1.125%201.125%200%200%201-1.12-1.243l1.264-12A1.125%201.125%200%200%201%205.513%207.5h12.974c.576%200%201.059.435%201.119%201.007ZM8.625%2010.5a.375.375%200%201%201-.75%200%20.375.375%200%200%201%20.75%200Zm7.5%200a.375.375%200%201%201-.75%200%20.375.375%200%200%201%20.75%200Z"/></svg>');
-webkit-mask: var(--hero-shopping-bag);
mask: var(--hero-shopping-bag);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.hero-signal {
--hero-signal: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="M9.348%2014.652a3.75%203.75%200%200%201%200-5.304m5.304%200a3.75%203.75%200%200%201%200%205.304m-7.425%202.121a6.75%206.75%200%200%201%200-9.546m9.546%200a6.75%206.75%200%200%201%200%209.546M5.106%2018.894c-3.808-3.807-3.808-9.98%200-13.788m13.788%200c3.808%203.807%203.808%209.98%200%2013.788M12%2012h.008v.008H12V12Zm.375%200a.375.375%200%201%201-.75%200%20.375.375%200%200%201%20.75%200Z"/></svg>');
-webkit-mask: var(--hero-signal);
mask: var(--hero-signal);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.hero-sun-micro {
--hero-sun-micro: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2016%2016"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20d="M8%201a.75.75%200%200%201%20.75.75v1.5a.75.75%200%200%201-1.5%200v-1.5A.75.75%200%200%201%208%201ZM10.5%208a2.5%202.5%200%201%201-5%200%202.5%202.5%200%200%201%205%200ZM12.95%204.11a.75.75%200%201%200-1.06-1.06l-1.062%201.06a.75.75%200%200%200%201.061%201.062l1.06-1.061ZM15%208a.75.75%200%200%201-.75.75h-1.5a.75.75%200%200%201%200-1.5h1.5A.75.75%200%200%201%2015%208ZM11.89%2012.95a.75.75%200%200%200%201.06-1.06l-1.06-1.062a.75.75%200%200%200-1.062%201.061l1.061%201.06ZM8%2012a.75.75%200%200%201%20.75.75v1.5a.75.75%200%200%201-1.5%200v-1.5A.75.75%200%200%201%208%2012ZM5.172%2011.89a.75.75%200%200%200-1.061-1.062L3.05%2011.89a.75.75%200%201%200%201.06%201.06l1.06-1.06ZM4%208a.75.75%200%200%201-.75.75h-1.5a.75.75%200%200%201%200-1.5h1.5A.75.75%200%200%201%204%208ZM4.11%205.172A.75.75%200%200%200%205.173%204.11L4.11%203.05a.75.75%200%201%200-1.06%201.06l1.06%201.06Z"/></svg>');
-webkit-mask: var(--hero-sun-micro);
mask: var(--hero-sun-micro);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1rem;
height: 1rem;
}
.hero-truck-mini {
--hero-truck-mini: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2020%2020"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20d="M6.5%203c-1.051%200-2.093.04-3.125.117A1.49%201.49%200%200%200%202%204.607V10.5h9V4.606c0-.771-.59-1.43-1.375-1.489A41.568%2041.568%200%200%200%206.5%203ZM2%2012v2.5A1.5%201.5%200%200%200%203.5%2016h.041a3%203%200%200%201%205.918%200h.791a.75.75%200%200%200%20.75-.75V12H2Z"/>%20%20<path%20d="M6.5%2018a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM13.25%205a.75.75%200%200%200-.75.75v8.514a3.001%203.001%200%200%201%204.893%201.44c.37-.275.61-.719.595-1.227a24.905%2024.905%200%200%200-1.784-8.549A1.486%201.486%200%200%200%2014.823%205H13.25ZM14.5%2018a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z"/></svg>');
-webkit-mask: var(--hero-truck-mini);
mask: var(--hero-truck-mini);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
}
.hero-x-circle {
--hero-x-circle: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="m9.75%209.75%204.5%204.5m0-4.5-4.5%204.5M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200Z"/></svg>');
-webkit-mask: var(--hero-x-circle);
mask: var(--hero-x-circle);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.hero-x-circle-mini {
--hero-x-circle-mini: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2020%2020"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20fill-rule="evenodd"%20d="M10%2018a8%208%200%201%200%200-16%208%208%200%200%200%200%2016ZM8.28%207.22a.75.75%200%200%200-1.06%201.06L8.94%2010l-1.72%201.72a.75.75%200%201%200%201.06%201.06L10%2011.06l1.72%201.72a.75.75%200%201%200%201.06-1.06L11.06%2010l1.72-1.72a.75.75%200%200%200-1.06-1.06L10%208.94%208.28%207.22Z"%20clip-rule="evenodd"/></svg>');
-webkit-mask: var(--hero-x-circle-mini);
mask: var(--hero-x-circle-mini);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
}
.hero-x-mark {
--hero-x-mark: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="M6%2018%2018%206M6%206l12%2012"/></svg>');
-webkit-mask: var(--hero-x-mark);
mask: var(--hero-x-mark);
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}

19
assets/css/admin/reset.css Normal file
View File

@ -0,0 +1,19 @@
/* Minimal resets for admin pages */
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
}
/* Make LiveView wrapper divs transparent for layout */
[data-phx-session], [data-phx-teleported-src] {
display: contents;
}
/* Phoenix LiveView loading states */
.phx-no-feedback.phx-no-feedback {
/* Suppress validation styles until form is interacted with */
}

116
assets/css/admin/themes.css Normal file
View File

@ -0,0 +1,116 @@
/* Admin colour themes — extracted from DaisyUI theme plugin config.
Light is the default; dark activates via OS preference or data-theme attribute. */
:root {
color-scheme: light;
/* Base */
--color-base-100: oklch(98% 0 0);
--color-base-200: oklch(96% 0.001 286.375);
--color-base-300: oklch(92% 0.004 286.32);
--color-base-content: oklch(21% 0.006 285.885);
/* Brand */
--color-primary: oklch(70% 0.213 47.604);
--color-primary-content: oklch(98% 0.016 73.684);
--color-secondary: oklch(55% 0.027 264.364);
--color-secondary-content: oklch(98% 0.002 247.839);
--color-accent: oklch(0% 0 0);
--color-accent-content: oklch(100% 0 0);
--color-neutral: oklch(44% 0.017 285.786);
--color-neutral-content: oklch(98% 0 0);
/* Feedback */
--color-info: oklch(62% 0.214 259.815);
--color-info-content: oklch(97% 0.014 254.604);
--color-success: oklch(70% 0.14 182.503);
--color-success-content: oklch(98% 0.014 180.72);
--color-warning: oklch(66% 0.179 58.318);
--color-warning-content: oklch(98% 0.022 95.277);
--color-error: oklch(58% 0.253 17.585);
--color-error-content: oklch(96% 0.015 12.422);
/* Shape */
--radius-selector: 0.25rem;
--radius-field: 0.25rem;
--radius-box: 0.5rem;
--size-selector: 0.21875rem;
--size-field: 0.21875rem;
--border: 1.5px;
--depth: 1;
--noise: 0;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--color-base-100: oklch(30.33% 0.016 252.42);
--color-base-200: oklch(25.26% 0.014 253.1);
--color-base-300: oklch(20.15% 0.012 254.09);
--color-base-content: oklch(97.807% 0.029 256.847);
--color-primary: oklch(58% 0.233 277.117);
--color-primary-content: oklch(96% 0.018 272.314);
--color-secondary: oklch(58% 0.233 277.117);
--color-secondary-content: oklch(96% 0.018 272.314);
--color-accent: oklch(60% 0.25 292.717);
--color-accent-content: oklch(96% 0.016 293.756);
--color-neutral: oklch(37% 0.044 257.287);
--color-neutral-content: oklch(98% 0.003 247.858);
--color-info: oklch(58% 0.158 241.966);
--color-info-content: oklch(97% 0.013 236.62);
--color-success: oklch(60% 0.118 184.704);
--color-success-content: oklch(98% 0.014 180.72);
--color-warning: oklch(66% 0.179 58.318);
--color-warning-content: oklch(98% 0.022 95.277);
--color-error: oklch(58% 0.253 17.585);
--color-error-content: oklch(96% 0.015 12.422);
--radius-selector: 0.25rem;
--radius-field: 0.25rem;
--radius-box: 0.5rem;
--size-selector: 0.21875rem;
--size-field: 0.21875rem;
--border: 1.5px;
--depth: 1;
--noise: 0;
}
}
[data-theme="dark"] {
color-scheme: dark;
--color-base-100: oklch(30.33% 0.016 252.42);
--color-base-200: oklch(25.26% 0.014 253.1);
--color-base-300: oklch(20.15% 0.012 254.09);
--color-base-content: oklch(97.807% 0.029 256.847);
--color-primary: oklch(58% 0.233 277.117);
--color-primary-content: oklch(96% 0.018 272.314);
--color-secondary: oklch(58% 0.233 277.117);
--color-secondary-content: oklch(96% 0.018 272.314);
--color-accent: oklch(60% 0.25 292.717);
--color-accent-content: oklch(96% 0.016 293.756);
--color-neutral: oklch(37% 0.044 257.287);
--color-neutral-content: oklch(98% 0.003 247.858);
--color-info: oklch(58% 0.158 241.966);
--color-info-content: oklch(97% 0.013 236.62);
--color-success: oklch(60% 0.118 184.704);
--color-success-content: oklch(98% 0.014 180.72);
--color-warning: oklch(66% 0.179 58.318);
--color-warning-content: oklch(98% 0.022 95.277);
--color-error: oklch(58% 0.253 17.585);
--color-error-content: oklch(96% 0.015 12.422);
--radius-selector: 0.25rem;
--radius-field: 0.25rem;
--radius-box: 0.5rem;
--size-selector: 0.21875rem;
--size-field: 0.21875rem;
--border: 1.5px;
--depth: 1;
--noise: 0;
}

684
assets/css/admin/utilities.css Normal file
View File

@ -0,0 +1,684 @@
/* Admin utility classes — replaces Tailwind utilities for admin/auth pages.
Only classes actually used in templates are defined here. */
/* ========================================
Shadow/Ring foundation
======================================== */
:where(html) {
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-ring-color: currentColor;
--tw-ring-inset: ;
}
/* ========================================
Display
======================================== */
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-flex { display: inline-flex; }
.flex { display: flex; }
.grid { display: grid; }
/* ========================================
Position
======================================== */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { inset: 0; }
.inset-y-0 { top: 0; bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.left-\[40rem\] { left: 40rem; }
.-right-1\.5 { right: -0.375rem; }
.-top-1\.5 { top: -0.375rem; }
.z-0 { z-index: 0; }
/* ========================================
Flexbox
======================================== */
.flex-1 { flex: 1 1 0%; }
.flex-none { flex: none; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-shrink-0, .shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.self-start { align-self: flex-start; }
/* ========================================
Grid
======================================== */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* ========================================
Gap
======================================== */
.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-\[14px\] { gap: 14px; }
.gap-x-4 { column-gap: 1rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-y-1 { row-gap: 0.25rem; }
.gap-y-4 { row-gap: 1rem; }
/* ========================================
Padding
======================================== */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.px-1\.5 { padding-inline: 0.375rem; }
.px-2 { padding-inline: 0.5rem; }
.px-3 { padding-inline: 0.75rem; }
.px-4 { padding-inline: 1rem; }
.px-6 { padding-inline: 1.5rem; }
.px-\[14px\] { padding-inline: 14px; }
.py-0\.5 { padding-block: 0.125rem; }
.py-1 { padding-block: 0.25rem; }
.py-1\.5 { padding-block: 0.375rem; }
.py-2 { padding-block: 0.5rem; }
.py-2\.5 { padding-block: 0.625rem; }
.py-3 { padding-block: 0.75rem; }
.py-4 { padding-block: 1rem; }
.py-10 { padding-block: 2.5rem; }
.py-12 { padding-block: 3rem; }
.py-\[5px\] { padding-block: 5px; }
.py-\[10px\] { padding-block: 10px; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pb-8 { padding-bottom: 2rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pl-10 { padding-left: 2.5rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pt-6 { padding-top: 1.5rem; }
/* ========================================
Margin
======================================== */
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.-mt-1 { margin-top: -0.25rem; }
.mb-0\.5 { margin-bottom: 0.125rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-3 { margin-left: 0.75rem; }
.mr-1 { margin-right: 0.25rem; }
.-mr-2 { margin-right: -0.5rem; }
.mx-auto { margin-inline: auto; }
.-mx-2 { margin-inline: -0.5rem; }
.-my-0\.5 { margin-block: -0.125rem; }
/* ========================================
Space between (lobotomised owl)
======================================== */
.space-y-1 > :not(:first-child) { margin-top: 0.25rem; }
.space-y-4 > :not(:first-child) { margin-top: 1rem; }
.space-y-6 > :not(:first-child) { margin-top: 1.5rem; }
/* ========================================
Sizing
======================================== */
.w-0 { width: 0; }
.w-3 { width: 0.75rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-9 { width: 2.25rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.w-16 { width: 4rem; }
.w-28 { width: 7rem; }
.w-1\/3 { width: 33.333333%; }
.w-auto { width: auto; }
.w-fit { width: fit-content; }
.w-80 { width: 20rem; }
.w-full { width: 100%; }
.w-\[14px\] { width: 14px; }
.w-\[18px\] { width: 18px; }
.h-1\.5 { height: 0.375rem; }
.h-3 { height: 0.75rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-9 { height: 2.25rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-full { height: 100%; }
.h-\[14px\] { height: 14px; }
.h-\[18px\] { height: 18px; }
.h-\[60px\] { height: 60px; }
.size-3 { width: 0.75rem; height: 0.75rem; }
.size-4 { width: 1rem; height: 1rem; }
.size-5 { width: 1.25rem; height: 1.25rem; }
.size-6 { width: 1.5rem; height: 1.5rem; }
.size-10 { width: 2.5rem; height: 2.5rem; }
.size-12 { width: 3rem; height: 3rem; }
.size-16 { width: 4rem; height: 4rem; }
.min-h-0 { min-height: 0; }
.min-h-screen { min-height: 100vh; }
.min-w-0 { min-width: 0; }
.min-w-48 { min-width: 12rem; }
.max-h-full { max-height: 100%; }
.max-w-80 { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-full { max-width: 100%; }
.max-w-\[1200px\] { max-width: 1200px; }
.aspect-square { aspect-ratio: 1 / 1; }
/* ========================================
Typography
======================================== */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-\[2rem\] { font-size: 2rem; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-balance { text-wrap: balance; }
.text-wrap { text-wrap: wrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break-all { word-break: break-all; }
.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
.underline { text-decoration-line: underline; }
.leading-6 { line-height: 1.5rem; }
.leading-7 { line-height: 1.75rem; }
.leading-8 { line-height: 2rem; }
.leading-10 { line-height: 2.5rem; }
.leading-none { line-height: 1; }
.leading-relaxed { line-height: 1.625; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-tighter { letter-spacing: -0.05em; }
.tracking-wider { letter-spacing: 0.05em; }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* ========================================
Colours — DaisyUI semantic
======================================== */
.bg-base-100 { background-color: var(--color-base-100); }
.bg-base-200 { background-color: var(--color-base-200); }
.bg-base-300 { background-color: var(--color-base-300); }
.bg-base-content { background-color: var(--color-base-content); }
.bg-primary { background-color: var(--color-primary); }
.bg-white { background-color: #fff; }
.text-base-100 { color: var(--color-base-100); }
.text-base-content { color: var(--color-base-content); }
.text-base-content\/30 { color: color-mix(in oklch, var(--color-base-content) 30%, transparent); }
.text-base-content\/40 { color: color-mix(in oklch, var(--color-base-content) 40%, transparent); }
.text-base-content\/50 { color: color-mix(in oklch, var(--color-base-content) 50%, transparent); }
.text-base-content\/60 { color: color-mix(in oklch, var(--color-base-content) 60%, transparent); }
.text-base-content\/70 { color: color-mix(in oklch, var(--color-base-content) 70%, transparent); }
.text-base-content\/80 { color: color-mix(in oklch, var(--color-base-content) 80%, transparent); }
.text-error { color: var(--color-error); }
.text-success { color: var(--color-success); }
.text-white { color: #fff; }
.text-brand { color: var(--color-primary); }
.fill-base-content\/40 { fill: color-mix(in oklch, var(--color-base-content) 40%, transparent); }
/* ========================================
Colours — status palette
======================================== */
.bg-green-50 { background-color: #f0fdf4; }
.bg-green-500 { background-color: #22c55e; }
.bg-green-600 { background-color: #16a34a; }
.text-green-600 { color: #16a34a; }
.text-green-700 { color: #15803d; }
.text-green-900 { color: #14532d; }
.border-green-200 { border-color: #bbf7d0; }
.bg-red-50 { background-color: #fef2f2; }
.text-red-600 { color: #dc2626; }
.text-red-700 { color: #b91c1c; }
.bg-amber-50 { background-color: #fffbeb; }
.bg-amber-100 { background-color: #fef3c7; }
.text-amber-600 { color: #d97706; }
.text-amber-700 { color: #b45309; }
.text-amber-800 { color: #92400e; }
.text-amber-900 { color: #78350f; }
.bg-blue-50 { background-color: #eff6ff; }
.text-blue-700 { color: #1d4ed8; }
.bg-purple-50 { background-color: #faf5ff; }
.text-purple-700 { color: #7e22ce; }
/* Arbitrary background colours (macOS traffic lights in theme editor) */
.bg-\[\#ff5f57\] { background-color: #ff5f57; }
.bg-\[\#ffbd2e\] { background-color: #ffbd2e; }
.bg-\[\#28c940\] { background-color: #28c940; }
/* ========================================
Borders
======================================== */
.border { border: 1px solid; }
.border-0 { border-width: 0; }
.border-1 { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-b { border-bottom: 1px solid; }
.border-t { border-top: 1px solid; }
.border-t-0 { border-top-width: 0; }
.border-dashed { border-style: dashed; }
.border-base-200 { border-color: var(--color-base-200); }
.border-base-300 { border-color: var(--color-base-300); }
.border-base-content\/20 { border-color: color-mix(in oklch, var(--color-base-content) 20%, transparent); }
.border-b-base-content\/30 { border-bottom-color: color-mix(in oklch, var(--color-base-content) 30%, transparent); }
/* Arbitrary border colours (macOS traffic lights) */
.border-\[\#e14640\] { border-color: #e14640; }
.border-\[\#dfa123\] { border-color: #dfa123; }
.border-\[\#1aab29\] { border-color: #1aab29; }
/* ========================================
Border radius
======================================== */
.rounded { border-radius: 0.25rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-full { border-radius: 9999px; }
.rounded-b-lg {
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
.rounded-t-\[10px\] {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.rounded-box { border-radius: var(--radius-box, 0.5rem); }
/* ========================================
Ring (outline via box-shadow)
======================================== */
.ring-1 {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 1px var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring-inset { --tw-ring-inset: inset; }
.ring-base-300 { --tw-ring-color: var(--color-base-300); }
.ring-green-600\/20 { --tw-ring-color: rgb(22 163 74 / 0.2); }
.ring-red-600\/20 { --tw-ring-color: rgb(220 38 38 / 0.2); }
.ring-amber-600\/10 { --tw-ring-color: rgb(217 119 6 / 0.1); }
.ring-blue-600\/20 { --tw-ring-color: rgb(37 99 235 / 0.2); }
.ring-purple-600\/20 { --tw-ring-color: rgb(147 51 234 / 0.2); }
/* ========================================
Shadow
======================================== */
.shadow-xs {
--tw-shadow: 0 1px rgb(0 0 0 / 0.05);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
/* ========================================
Overflow
======================================== */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
/* ========================================
Object fit
======================================== */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
/* ========================================
Opacity
======================================== */
.opacity-40 { opacity: 0.4; }
.opacity-75 { opacity: 0.75; }
/* ========================================
Cursor
======================================== */
.cursor-pointer { cursor: pointer; }
/* ========================================
Gradient
======================================== */
.bg-gradient-to-b {
--tw-gradient-from: transparent;
--tw-gradient-to: transparent;
background-image: linear-gradient(to bottom, var(--tw-gradient-from), var(--tw-gradient-to));
}
.from-base-300 { --tw-gradient-from: var(--color-base-300); }
.to-base-300\/80 { --tw-gradient-to: color-mix(in oklch, var(--color-base-300) 80%, transparent); }
/* ========================================
Filter
======================================== */
.brightness-200 { filter: brightness(2); }
/* ========================================
Transitions & animation
======================================== */
.transition {
transition-property: color, background-color, border-color, text-decoration-color,
fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-\[left\] {
transition-property: left;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }
@media (prefers-reduced-motion: no-preference) {
.motion-safe\:animate-spin { animation: spin 1s linear infinite; }
}
/* ========================================
Hover states
======================================== */
.hover\:bg-base-200:hover { background-color: var(--color-base-200); }
.hover\:bg-base-200\/50:hover { background-color: color-mix(in oklch, var(--color-base-200) 50%, transparent); }
.hover\:bg-base-300:hover { background-color: var(--color-base-300); }
.hover\:bg-base-content\/80:hover { background-color: color-mix(in oklch, var(--color-base-content) 80%, transparent); }
.hover\:bg-green-500:hover { background-color: #22c55e; }
.hover\:border-base-300:hover { border-color: var(--color-base-300); }
.hover\:border-base-content\/40:hover { border-color: color-mix(in oklch, var(--color-base-content) 40%, transparent); }
.hover\:opacity-100:hover { opacity: 1; }
.hover\:text-base-content:hover { color: var(--color-base-content); }
.hover\:text-base-content\/70:hover { color: color-mix(in oklch, var(--color-base-content) 70%, transparent); }
.hover\:text-base-content\/80:hover { color: color-mix(in oklch, var(--color-base-content) 80%, transparent); }
.hover\:text-red-800:hover { color: #991b1b; }
.hover\:underline:hover { text-decoration-line: underline; }
.hover\:cursor-pointer:hover { cursor: pointer; }
/* ========================================
Focus states
======================================== */
.focus\:border-primary:focus { border-color: var(--color-primary); }
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:ring-1:focus {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 1px var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.focus\:ring-primary\/20:focus { --tw-ring-color: color-mix(in oklch, var(--color-primary) 20%, transparent); }
/* ========================================
Disabled states
======================================== */
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
.disabled\:opacity-50:disabled { opacity: 0.5; }
/* ========================================
Group states
======================================== */
.group { /* marker class — no styles */ }
.group:hover .group-hover\:bg-base-300 { background-color: var(--color-base-300); }
.group:hover .group-hover\:fill-base-content { fill: var(--color-base-content); }
.group:hover .group-hover\:opacity-70 { opacity: 0.7; }
.group:hover .group-hover\:text-base-content { color: var(--color-base-content); }
.group[open] .group-open\:rotate-180 { transform: rotate(180deg); }
/* ========================================
Pseudo-class selectors
======================================== */
.only\:block:only-child { display: block; }
.last\:pb-0:last-child { padding-bottom: 0; }
.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker { display: none; }
/* ========================================
Responsive: sm (min-width: 640px)
======================================== */
@media (min-width: 640px) {
.sm\:flex-col { flex-direction: column; }
.sm\:flex-row { flex-direction: row; }
.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sm\:p-6 { padding: 1.5rem; }
.sm\:px-6 { padding-inline: 1.5rem; }
.sm\:py-6 { padding-block: 1.5rem; }
.sm\:py-28 { padding-block: 7rem; }
.sm\:w-auto { width: auto; }
.sm\:w-96 { width: 24rem; }
.sm\:max-w-96 { max-width: 24rem; }
/* JS transition scale (used in show/hide) */
.sm\:translate-y-0 { translate: 0 0; }
.sm\:scale-95 { scale: 0.95; }
.sm\:scale-100 { scale: 1; }
.sm\:group-hover\:scale-105 { /* defined below with group:hover */ }
}
.group:hover .sm\:group-hover\:scale-105 {
@media (min-width: 640px) { scale: 1.05; }
}
/* ========================================
Responsive: lg (min-width: 1024px)
======================================== */
@media (min-width: 1024px) {
.lg\:block { display: block; }
.lg\:col-span-2 { grid-column: span 2 / span 2; }
.lg\:flex-row { flex-direction: row; }
.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lg\:h-screen { height: 100vh; }
.lg\:mx-0 { margin-inline: 0; }
.lg\:p-8 { padding: 2rem; }
.lg\:px-8 { padding-inline: 2rem; }
}
/* ========================================
Responsive: xl (min-width: 1280px)
======================================== */
@media (min-width: 1280px) {
.xl\:left-\[50rem\] { left: 50rem; }
.xl\:px-28 { padding-inline: 7rem; }
.xl\:py-32 { padding-block: 8rem; }
}
/* ========================================
JS transition helpers (used by core_components show/hide)
======================================== */
.translate-y-4 { translate: 0 1rem; }
.translate-y-0 { translate: 0 0; }
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }
.scale-95 { scale: 0.95; }
.scale-100 { scale: 1; }
/* Duration classes used by JS.transition */
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }
.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
/* ========================================
DaisyUI component stubs (used in Phoenix home page and theme toggle)
======================================== */
.card {
border-radius: var(--radius-box, 0.5rem);
overflow: hidden;
}
.badge {
display: inline-flex;
align-items: center;
border-radius: var(--radius-selector, 0.25rem);
padding-inline: 0.5rem;
font-size: 0.875rem;
line-height: 1.25rem;
border: 1px solid currentColor;
width: fit-content;
}
.badge-sm { font-size: 0.75rem; line-height: 1rem; padding-inline: 0.375rem; }
.badge-warning {
border-color: var(--color-warning);
color: var(--color-warning-content);
background-color: var(--color-warning);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--radius-field, 0.25rem);
border: 1px solid transparent;
cursor: pointer;
transition: background-color 150ms, border-color 150ms;
}
.btn-primary {
background-color: var(--color-primary);
color: var(--color-primary-content);
}
.btn-primary:hover {
filter: brightness(0.9);
}
/* ========================================
Prose (minimal typography block for instructions)
======================================== */
.prose {
line-height: 1.75;
}
.prose p { margin-top: 1em; margin-bottom: 1em; }
.prose :first-child { margin-top: 0; }
.prose :last-child { margin-bottom: 0; }
.prose a { color: var(--color-primary); text-decoration: underline; }
.prose strong { font-weight: 600; }
.prose-sm { font-size: 0.875rem; line-height: 1.5; }
/* ========================================
List styles
======================================== */
.list-decimal { list-style-type: decimal; }
.list-inside { list-style-position: inside; }
.list-none { list-style-type: none; }

124
assets/vendor/daisyui-theme.js vendored
View File

File diff suppressed because one or more lines are too long

43
assets/vendor/heroicons.js vendored
View File

@ -1,43 +0,0 @@
const plugin = require("tailwindcss/plugin")
const fs = require("fs")
const path = require("path")
module.exports = plugin(function({matchComponents, theme}) {
let iconsDir = path.join(__dirname, "../../deps/heroicons/optimized")
let values = {}
let icons = [
["", "/24/outline"],
["-solid", "/24/solid"],
["-mini", "/20/solid"],
["-micro", "/16/solid"]
]
icons.forEach(([suffix, dir]) => {
fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
let name = path.basename(file, ".svg") + suffix
values[name] = {name, fullPath: path.join(iconsDir, dir, file)}
})
})
matchComponents({
"hero": ({name, fullPath}) => {
let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
content = encodeURIComponent(content)
let size = theme("spacing.6")
if (name.endsWith("-mini")) {
size = theme("spacing.5")
} else if (name.endsWith("-micro")) {
size = theme("spacing.4")
}
return {
[`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
"-webkit-mask": `var(--hero-${name})`,
"mask": `var(--hero-${name})`,
"mask-repeat": "no-repeat",
"background-color": "currentColor",
"vertical-align": "middle",
"display": "inline-block",
"width": size,
"height": size
}
}
}, {values})
})

15
config/config.exs
View File

@ -57,17 +57,10 @@ config :esbuild,
simpleshop_theme_shop_css: [ simpleshop_theme_shop_css: [
args: ~w(css/shop.css --bundle --outdir=../priv/static/assets/css), args: ~w(css/shop.css --bundle --outdir=../priv/static/assets/css),
cd: Path.expand("../assets", __DIR__) cd: Path.expand("../assets", __DIR__)
] ],
simpleshop_theme_admin_css: [
# Configure tailwind (the version is required) args: ~w(css/admin.css --bundle --outdir=../priv/static/assets/css),
config :tailwind, cd: Path.expand("../assets", __DIR__)
version: "4.1.7",
simpleshop_theme: [
args: ~w(
--input=assets/css/app.css
--output=priv/static/assets/css/app.css
),
cd: Path.expand("..", __DIR__)
] ]
# Configures Elixir's Logger # Configures Elixir's Logger

3
config/dev.exs
View File

@ -27,7 +27,8 @@ config :simpleshop_theme, SimpleshopThemeWeb.Endpoint,
esbuild: {Esbuild, :install_and_run, [:simpleshop_theme, ~w(--sourcemap=inline --watch)]}, esbuild: {Esbuild, :install_and_run, [:simpleshop_theme, ~w(--sourcemap=inline --watch)]},
esbuild_shop_css: esbuild_shop_css:
{Esbuild, :install_and_run, [:simpleshop_theme_shop_css, ~w(--sourcemap=inline --watch)]}, {Esbuild, :install_and_run, [:simpleshop_theme_shop_css, ~w(--sourcemap=inline --watch)]},
tailwind: {Tailwind, :install_and_run, [:simpleshop_theme, ~w(--watch)]} esbuild_admin_css:
{Esbuild, :install_and_run, [:simpleshop_theme_admin_css, ~w(--sourcemap=inline --watch)]}
] ]
# ## SSL Support # ## SSL Support

126
lib/mix/tasks/generate_admin_icons.ex Normal file
View File

@ -0,0 +1,126 @@
defmodule Mix.Tasks.GenerateAdminIcons do
@moduledoc """
Generates static CSS for heroicon classes used in admin templates.
Scans `lib/` for `hero-*` class references, reads the matching SVGs from
`deps/heroicons/optimized/`, and writes `assets/css/admin/icons.css` with
CSS mask-based icon classes that match the old Tailwind plugin output.
## Usage
mix generate_admin_icons
"""
@shortdoc "Generate admin/icons.css from heroicons SVGs"
use Mix.Task
@icons_dir "deps/heroicons/optimized"
@output_path "assets/css/admin/icons.css"
# Maps suffix to subdirectory and default size
@variants %{
"" => {"24/outline", "1.5rem"},
"-solid" => {"24/solid", "1.5rem"},
"-mini" => {"20/solid", "1.25rem"},
"-micro" => {"16/solid", "1rem"}
}
@impl Mix.Task
def run(_args) do
icons = scan_used_icons()
Mix.shell().info("Found #{length(icons)} icon references in lib/")
css_rules =
icons
|> Enum.sort()
|> Enum.map(&generate_rule/1)
|> Enum.reject(&is_nil/1)
missing = length(icons) - length(css_rules)
if missing > 0, do: Mix.shell().info("Skipped #{missing} (SVG not found or not an icon)")
content = """
/* Generated by mix generate_admin_icons — do not edit by hand */
#{Enum.join(css_rules, "\n\n")}
"""
File.mkdir_p!(Path.dirname(@output_path))
File.write!(@output_path, content)
Mix.shell().info("Wrote #{length(css_rules)} icon rules to #{@output_path}")
end
defp scan_used_icons do
Path.wildcard("lib/**/*.{ex,heex}")
|> Enum.flat_map(fn path ->
path
|> File.read!()
|> then(&Regex.scan(~r/hero-[a-z][a-z0-9-]+/, &1))
|> List.flatten()
end)
|> Enum.uniq()
|> Enum.reject(&shop_class?/1)
end
# Filter out CSS class names from shop components that start with "hero-"
# but aren't actual heroicon references
defp shop_class?(name) do
name in [
"hero-section",
"hero-description",
"hero-cta",
"hero-cta-group",
"hero-pre-title",
"hero-error",
"hero-image",
"hero-section--page"
]
end
defp generate_rule(class_name) do
{suffix, {dir, size}} = detect_variant(class_name)
base = String.trim_leading(class_name, "hero-")
svg_name = if suffix == "", do: base, else: String.trim_trailing(base, suffix)
svg_path = Path.join([@icons_dir, dir, "#{svg_name}.svg"])
if File.exists?(svg_path) do
content =
svg_path
|> File.read!()
|> String.replace(~r/\r?\n|\r/, "")
|> URI.encode(&uri_allowed?/1)
"""
.#{class_name} {
--hero-#{class_name |> String.trim_leading("hero-")}: url('data:image/svg+xml;utf8,#{content}');
-webkit-mask: var(--hero-#{class_name |> String.trim_leading("hero-")});
mask: var(--hero-#{class_name |> String.trim_leading("hero-")});
mask-repeat: no-repeat;
background-color: currentColor;
vertical-align: middle;
display: inline-block;
width: #{size};
height: #{size};
}\
"""
else
Mix.shell().info(" warning: SVG not found for #{class_name} (expected #{svg_path})")
nil
end
end
defp detect_variant(class_name) do
cond do
String.ends_with?(class_name, "-micro") -> {"-micro", @variants["-micro"]}
String.ends_with?(class_name, "-mini") -> {"-mini", @variants["-mini"]}
String.ends_with?(class_name, "-solid") -> {"-solid", @variants["-solid"]}
true -> {"", @variants[""]}
end
end
# Characters that don't need percent-encoding in data URIs
defp uri_allowed?(char) do
URI.char_unreserved?(char) or char in [?<, ?>, ?/, ?=, ?", ?', ?:, ?;, ?(, ?), ?!, ?@, ?,, ?.]
end
end

3
lib/mix/tasks/lighthouse.ex
View File

@ -133,10 +133,9 @@ defmodule Mix.Tasks.Lighthouse do
defp build_prod_assets! do defp build_prod_assets! do
Mix.shell().info("Building production assets...") Mix.shell().info("Building production assets...")
Mix.Task.run("tailwind", ["simpleshop_theme", "--minify"])
Mix.Task.run("tailwind", ["simpleshop_theme_shop", "--minify"])
Mix.Task.run("esbuild", ["simpleshop_theme", "--minify"]) Mix.Task.run("esbuild", ["simpleshop_theme", "--minify"])
Mix.Task.run("esbuild", ["simpleshop_theme_shop_css", "--minify"]) Mix.Task.run("esbuild", ["simpleshop_theme_shop_css", "--minify"])
Mix.Task.run("esbuild", ["simpleshop_theme_admin_css", "--minify"])
Mix.Task.run("phx.digest") Mix.Task.run("phx.digest")
Mix.shell().info(" Assets built and digested.") Mix.shell().info(" Assets built and digested.")

2
lib/mix/tasks/screenshots.ex
View File

@ -158,9 +158,9 @@ defmodule Mix.Tasks.Screenshots do
defp build_prod_assets! do defp build_prod_assets! do
Mix.shell().info("Building production assets...") Mix.shell().info("Building production assets...")
Mix.Task.run("tailwind", ["simpleshop_theme", "--minify"])
Mix.Task.run("esbuild", ["simpleshop_theme", "--minify"]) Mix.Task.run("esbuild", ["simpleshop_theme", "--minify"])
Mix.Task.run("esbuild", ["simpleshop_theme_shop_css", "--minify"]) Mix.Task.run("esbuild", ["simpleshop_theme_shop_css", "--minify"])
Mix.Task.run("esbuild", ["simpleshop_theme_admin_css", "--minify"])
Mix.Task.run("phx.digest") Mix.Task.run("phx.digest")
Mix.shell().info(" Assets built and digested.") Mix.shell().info(" Assets built and digested.")

4
lib/simpleshop_theme_web/components/core_components.ex
View File

@ -393,8 +393,8 @@ defmodule SimpleshopThemeWeb.CoreComponents do
You can customize the size and colors of the icons by setting You can customize the size and colors of the icons by setting
width, height, and background color classes. width, height, and background color classes.
Icons are extracted from the `deps/heroicons` directory and bundled within Icons are extracted from the `deps/heroicons` directory and bundled into
your compiled app.css by the plugin in `assets/vendor/heroicons.js`. `admin/icons.css` by `mix generate_admin_icons`.
## Examples ## Examples

4
lib/simpleshop_theme_web/components/layouts.ex
View File

@ -98,14 +98,14 @@ defmodule SimpleshopThemeWeb.Layouts do
end end
@doc """ @doc """
Provides dark vs light theme toggle based on themes defined in app.css. Provides dark vs light theme toggle based on themes defined in admin.css.
See <head> in root.html.heex which applies the theme before page load. See <head> in root.html.heex which applies the theme before page load.
""" """
def theme_toggle(assigns) do def theme_toggle(assigns) do
~H""" ~H"""
<div class="card relative flex flex-row items-center border-2 border-base-300 bg-base-300 rounded-full"> <div class="card relative flex flex-row items-center border-2 border-base-300 bg-base-300 rounded-full">
<div class="absolute w-1/3 h-full rounded-full border-1 border-base-200 bg-base-100 brightness-200 left-0 [[data-theme=light]_&]:left-1/3 [[data-theme=dark]_&]:left-2/3 transition-[left]" /> <div class="theme-toggle-indicator absolute w-1/3 h-full rounded-full border-1 border-base-200 bg-base-100 brightness-200 left-0" />
<button <button
class="flex p-2 cursor-pointer w-1/3" class="flex p-2 cursor-pointer w-1/3"

2
lib/simpleshop_theme_web/components/layouts/admin_root.html.heex
View File

@ -11,7 +11,7 @@
<style> <style>
@layer properties, reset, primitives, tokens, theme, base, components, layout, utilities, overrides; @layer properties, reset, primitives, tokens, theme, base, components, layout, utilities, overrides;
</style> </style>
<link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} /> <link phx-track-static rel="stylesheet" href={~p"/assets/css/admin.css"} />
<link phx-track-static rel="stylesheet" href={~p"/assets/css/shop.css"} /> <link phx-track-static rel="stylesheet" href={~p"/assets/css/shop.css"} />
<script defer phx-track-static src={~p"/assets/js/app.js"}> <script defer phx-track-static src={~p"/assets/js/app.js"}>
</script> </script>

2
lib/simpleshop_theme_web/components/layouts/root.html.heex
View File

@ -7,7 +7,7 @@
<.live_title default="SimpleshopTheme" suffix=" · Phoenix Framework"> <.live_title default="SimpleshopTheme" suffix=" · Phoenix Framework">
{assigns[:page_title]} {assigns[:page_title]}
</.live_title> </.live_title>
<link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} /> <link phx-track-static rel="stylesheet" href={~p"/assets/css/admin.css"} />
<script defer phx-track-static src={~p"/assets/js/app.js"}> <script defer phx-track-static src={~p"/assets/js/app.js"}>
</script> </script>
<script> <script>

2
lib/simpleshop_theme_web/controllers/error_html.ex
View File

@ -66,7 +66,7 @@ defmodule SimpleshopThemeWeb.ErrorHTML do
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{@error_code} - {@error_title}</title> <title>{@error_code} - {@error_title}</title>
<link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} /> <link phx-track-static rel="stylesheet" href={~p"/assets/css/admin.css"} />
<style id="theme-css"> <style id="theme-css">
<%= Phoenix.HTML.raw(@generated_css) %> <%= Phoenix.HTML.raw(@generated_css) %>
</style> </style>

9
mix.exs
View File

@ -54,7 +54,6 @@ defmodule SimpleshopTheme.MixProject do
{:lazy_html, ">= 0.1.0", only: :test}, {:lazy_html, ">= 0.1.0", only: :test},
{:phoenix_live_dashboard, "~> 0.8.3"}, {:phoenix_live_dashboard, "~> 0.8.3"},
{:esbuild, "~> 0.10", runtime: Mix.env() == :dev}, {:esbuild, "~> 0.10", runtime: Mix.env() == :dev},
{:tailwind, "~> 0.3", runtime: Mix.env() == :dev},
{:heroicons, {:heroicons,
github: "tailwindlabs/heroicons", github: "tailwindlabs/heroicons",
tag: "v2.2.0", tag: "v2.2.0",
@ -95,17 +94,17 @@ defmodule SimpleshopTheme.MixProject do
"ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"], "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
"ecto.reset": ["ecto.drop", "ecto.setup"], "ecto.reset": ["ecto.drop", "ecto.setup"],
test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"], test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"],
"assets.setup": ["tailwind.install --if-missing", "esbuild.install --if-missing"], "assets.setup": ["esbuild.install --if-missing"],
"assets.build": [ "assets.build": [
"compile", "compile",
"tailwind simpleshop_theme",
"esbuild simpleshop_theme", "esbuild simpleshop_theme",
"esbuild simpleshop_theme_shop_css" "esbuild simpleshop_theme_shop_css",
"esbuild simpleshop_theme_admin_css"
], ],
"assets.deploy": [ "assets.deploy": [
"tailwind simpleshop_theme --minify",
"esbuild simpleshop_theme --minify", "esbuild simpleshop_theme --minify",
"esbuild simpleshop_theme_shop_css --minify", "esbuild simpleshop_theme_shop_css --minify",
"esbuild simpleshop_theme_admin_css --minify",
"phx.digest" "phx.digest"
], ],
precommit: ["compile --warning-as-errors", "deps.unlock --unused", "format", "test"], precommit: ["compile --warning-as-errors", "deps.unlock --unused", "format", "test"],

1
mix.lock
View File

@ -66,7 +66,6 @@
"stripity_stripe": {:hex, :stripity_stripe, "3.2.0", "07c27f5f2ac87006945b5c997b99d1210e009e380ea78d339d025b11c9c745f5", [:mix], [{:hackney, "~> 1.18", [hex: :hackney, repo: "hexpm", optional: false]}, {:jason, "~> 1.1", [hex: :jason, repo: "hexpm", optional: false]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: true]}, {:telemetry, "~> 1.1", [hex: :telemetry, repo: "hexpm", optional: false]}, {:uri_query, "~> 0.2.0", [hex: :uri_query, repo: "hexpm", optional: false]}], "hexpm", "f797936a9e9538370bae7dc73d73eafd7e44ecdc95b71c88492c43f6df094cb0"}, "stripity_stripe": {:hex, :stripity_stripe, "3.2.0", "07c27f5f2ac87006945b5c997b99d1210e009e380ea78d339d025b11c9c745f5", [:mix], [{:hackney, "~> 1.18", [hex: :hackney, repo: "hexpm", optional: false]}, {:jason, "~> 1.1", [hex: :jason, repo: "hexpm", optional: false]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: true]}, {:telemetry, "~> 1.1", [hex: :telemetry, repo: "hexpm", optional: false]}, {:uri_query, "~> 0.2.0", [hex: :uri_query, repo: "hexpm", optional: false]}], "hexpm", "f797936a9e9538370bae7dc73d73eafd7e44ecdc95b71c88492c43f6df094cb0"},
"sweet_xml": {:hex, :sweet_xml, "0.7.5", "803a563113981aaac202a1dbd39771562d0ad31004ddbfc9b5090bdcd5605277", [:mix], [], "hexpm", "193b28a9b12891cae351d81a0cead165ffe67df1b73fe5866d10629f4faefb12"}, "sweet_xml": {:hex, :sweet_xml, "0.7.5", "803a563113981aaac202a1dbd39771562d0ad31004ddbfc9b5090bdcd5605277", [:mix], [], "hexpm", "193b28a9b12891cae351d81a0cead165ffe67df1b73fe5866d10629f4faefb12"},
"swoosh": {:hex, :swoosh, "1.20.0", "b04134c2b302da74c3a95ca4ddde191e4854d2847d6687783fecb023a9647598", [:mix], [{:bandit, ">= 1.0.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:cowboy, "~> 1.1 or ~> 2.4", [hex: :cowboy, repo: "hexpm", optional: true]}, {:ex_aws, "~> 2.1", [hex: :ex_aws, repo: "hexpm", optional: true]}, {:finch, "~> 0.6", [hex: :finch, repo: "hexpm", optional: true]}, {:gen_smtp, "~> 0.13 or ~> 1.0", [hex: :gen_smtp, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: true]}, {:idna, "~> 6.0", [hex: :idna, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mail, "~> 0.2", [hex: :mail, repo: "hexpm", optional: true]}, {:mime, "~> 1.1 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:mua, "~> 0.2.3", [hex: :mua, repo: "hexpm", optional: true]}, {:multipart, "~> 0.4", [hex: :multipart, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: true]}, {:plug_cowboy, ">= 1.0.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:req, "~> 0.5.10 or ~> 0.6 or ~> 1.0", [hex: :req, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "13e610f709bae54851d68afb6862882aa646e5c974bf49e3bf5edd84a73cf213"}, "swoosh": {:hex, :swoosh, "1.20.0", "b04134c2b302da74c3a95ca4ddde191e4854d2847d6687783fecb023a9647598", [:mix], [{:bandit, ">= 1.0.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:cowboy, "~> 1.1 or ~> 2.4", [hex: :cowboy, repo: "hexpm", optional: true]}, {:ex_aws, "~> 2.1", [hex: :ex_aws, repo: "hexpm", optional: true]}, {:finch, "~> 0.6", [hex: :finch, repo: "hexpm", optional: true]}, {:gen_smtp, "~> 0.13 or ~> 1.0", [hex: :gen_smtp, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: true]}, {:idna, "~> 6.0", [hex: :idna, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mail, "~> 0.2", [hex: :mail, repo: "hexpm", optional: true]}, {:mime, "~> 1.1 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:mua, "~> 0.2.3", [hex: :mua, repo: "hexpm", optional: true]}, {:multipart, "~> 0.4", [hex: :multipart, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: true]}, {:plug_cowboy, ">= 1.0.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:req, "~> 0.5.10 or ~> 0.6 or ~> 1.0", [hex: :req, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "13e610f709bae54851d68afb6862882aa646e5c974bf49e3bf5edd84a73cf213"},
"tailwind": {:hex, :tailwind, "0.4.1", "e7bcc222fe96a1e55f948e76d13dd84a1a7653fb051d2a167135db3b4b08d3e9", [:mix], [], "hexpm", "6249d4f9819052911120dbdbe9e532e6bd64ea23476056adb7f730aa25c220d1"},
"telemetry": {:hex, :telemetry, "1.3.0", "fedebbae410d715cf8e7062c96a1ef32ec22e764197f70cda73d82778d61e7a2", [:rebar3], [], "hexpm", "7015fc8919dbe63764f4b4b87a95b7c0996bd539e0d499be6ec9d7f3875b79e6"}, "telemetry": {:hex, :telemetry, "1.3.0", "fedebbae410d715cf8e7062c96a1ef32ec22e764197f70cda73d82778d61e7a2", [:rebar3], [], "hexpm", "7015fc8919dbe63764f4b4b87a95b7c0996bd539e0d499be6ec9d7f3875b79e6"},
"telemetry_metrics": {:hex, :telemetry_metrics, "1.1.0", "5bd5f3b5637e0abea0426b947e3ce5dd304f8b3bc6617039e2b5a008adc02f8f", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "e7b79e8ddfde70adb6db8a6623d1778ec66401f366e9a8f5dd0955c56bc8ce67"}, "telemetry_metrics": {:hex, :telemetry_metrics, "1.1.0", "5bd5f3b5637e0abea0426b947e3ce5dd304f8b3bc6617039e2b5a008adc02f8f", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "e7b79e8ddfde70adb6db8a6623d1778ec66401f366e9a8f5dd0955c56bc8ce67"},
"telemetry_poller": {:hex, :telemetry_poller, "1.3.0", "d5c46420126b5ac2d72bc6580fb4f537d35e851cc0f8dbd571acf6d6e10f5ec7", [:rebar3], [{:telemetry, "~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "51f18bed7128544a50f75897db9974436ea9bfba560420b646af27a9a9b35211"}, "telemetry_poller": {:hex, :telemetry_poller, "1.3.0", "d5c46420126b5ac2d72bc6580fb4f537d35e851cc0f8dbd571acf6d6e10f5ec7", [:rebar3], [{:telemetry, "~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "51f18bed7128544a50f75897db9974436ea9bfba560420b646af27a9a9b35211"},

10
test/simpleshop_theme_web/live/theme_css_consistency_test.exs
View File

@ -5,8 +5,8 @@ defmodule SimpleshopThemeWeb.ThemeCSSConsistencyTest do
Architecture: Architecture:
- Both shop pages and preview use .themed class for shared styles - Both shop pages and preview use .themed class for shared styles
- Theme editor uses .preview-frame[data-*] selectors for live switching (in app.css) - Theme editor uses .preview-frame[data-*] selectors for live switching (in admin.css)
- Shop pages get theme values via inline CSS from CSSGenerator (app-shop.css) - Shop pages get theme values via inline CSS from CSSGenerator (shop.css)
- Component styles use .themed for shared styling (theme-layer2-attributes.css) - Component styles use .themed for shared styling (theme-layer2-attributes.css)
""" """
@ -90,13 +90,13 @@ defmodule SimpleshopThemeWeb.ThemeCSSConsistencyTest do
end end
describe "CSS file structure" do describe "CSS file structure" do
test "app.css has .preview-frame variant selectors for theme editor" do test "admin.css has .preview-frame variant selectors for theme editor" do
css_path = Path.join([File.cwd!(), "assets", "css", "app.css"]) css_path = Path.join([File.cwd!(), "assets", "css", "admin.css"])
css_content = File.read!(css_path) css_content = File.read!(css_path)
# Variant selectors are editor-only (.preview-frame) using CSS nesting # Variant selectors are editor-only (.preview-frame) using CSS nesting
# The file uses &[data-*] syntax inside .preview-frame { } # The file uses &[data-*] syntax inside .preview-frame { }
# These rules are in app.css (admin only), not app-shop.css # These rules are in admin.css (admin only), not shop.css
assert css_content =~ ".preview-frame" assert css_content =~ ".preview-frame"
assert css_content =~ "&[data-mood=\"dark\"]" assert css_content =~ "&[data-mood=\"dark\"]"
assert css_content =~ "&[data-mood=\"warm\"]" assert css_content =~ "&[data-mood=\"warm\"]"