109 lines
3.7 KiB
CSS
109 lines
3.7 KiB
CSS
/* See the Tailwind configuration guide for advanced usage
|
|
https://tailwindcss.com/docs/configuration */
|
|
|
|
@import "tailwindcss" source(none);
|
|
@import "phoenix-colocated/dexi/colocated.css";
|
|
@source "../css";
|
|
@source "../js";
|
|
@source "../../lib/dexi_web";
|
|
|
|
@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 &);
|
|
/* Required for Tailwind to automatically pick up changes in colocated CSS files in dev */
|
|
@source "../../_build/dev/phoenix-colocated/dexi/*/";
|
|
|
|
/* A Tailwind plugin that makes "hero-#{ICON}" classes available.
|
|
The heroicons installation itself is managed by your mix.exs */
|
|
@plugin "../vendor/heroicons";
|
|
|
|
/* 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 }
|
|
|
|
/* This file is for your main application CSS */
|
|
|
|
@theme {
|
|
--color-midnight: #080d19;
|
|
--color-deep-slate: #111827;
|
|
--color-slate-blue: #182235;
|
|
--color-muted-steel: #29364d;
|
|
--color-electric-cyan: #22d3ee;
|
|
--color-bright-cyan: #67e8f9;
|
|
--color-soft-violet: #8b5cf6;
|
|
--color-cool-white: #f1f5f9;
|
|
--color-blue-grey: #94a3b8;
|
|
--color-positive: #22c55e;
|
|
--color-negative: #f43f5e;
|
|
--color-warning: #f59e0b;
|
|
--shadow-cyan-glow: 0 24px 80px color-mix(in srgb, var(--color-electric-cyan) 10%, transparent);
|
|
--shadow-modal: 0 28px 100px color-mix(in srgb, var(--color-midnight) 80%, transparent);
|
|
}
|
|
|
|
:root,
|
|
[data-theme="light"],
|
|
[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
--color-base-100: var(--color-slate-blue);
|
|
--color-base-200: var(--color-deep-slate);
|
|
--color-base-300: var(--color-midnight);
|
|
--color-base-content: var(--color-cool-white);
|
|
--color-primary: var(--color-electric-cyan);
|
|
--color-primary-content: var(--color-midnight);
|
|
--color-secondary: var(--color-soft-violet);
|
|
--color-secondary-content: var(--color-cool-white);
|
|
--color-accent: var(--color-bright-cyan);
|
|
--color-accent-content: var(--color-midnight);
|
|
--color-neutral: var(--color-muted-steel);
|
|
--color-neutral-content: var(--color-cool-white);
|
|
--color-info: var(--color-electric-cyan);
|
|
--color-info-content: var(--color-midnight);
|
|
--color-success: var(--color-positive);
|
|
--color-success-content: var(--color-midnight);
|
|
--color-warning-content: var(--color-midnight);
|
|
--color-error: var(--color-negative);
|
|
--color-error-content: var(--color-cool-white);
|
|
}
|
|
|
|
@layer base {
|
|
html {
|
|
background: var(--color-midnight);
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
background:
|
|
radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--color-electric-cyan) 8%, transparent), transparent 30rem),
|
|
radial-gradient(circle at 88% 22%, color-mix(in srgb, var(--color-soft-violet) 10%, transparent), transparent 34rem),
|
|
var(--color-midnight);
|
|
color: var(--color-cool-white);
|
|
}
|
|
|
|
input,
|
|
textarea,
|
|
select {
|
|
border-color: var(--color-muted-steel);
|
|
background-color: var(--color-deep-slate);
|
|
color: var(--color-cool-white);
|
|
}
|
|
|
|
input::placeholder,
|
|
textarea::placeholder {
|
|
color: var(--color-blue-grey);
|
|
}
|
|
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
border-color: var(--color-electric-cyan);
|
|
outline-color: var(--color-soft-violet);
|
|
}
|
|
}
|