391 lines
10 KiB
CSS
391 lines
10 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap");
|
|
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--container-8xl: 88rem;
|
|
--font-sans:
|
|
"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
|
|
"Helvetica Neue", Arial, sans-serif;
|
|
}
|
|
|
|
/* CrawlerX brand gradient (MetatronCube blue → deep black), used on the
|
|
sign-in surface and the sidebar header. */
|
|
:root {
|
|
--brand-gradient: linear-gradient(
|
|
135deg,
|
|
#3779b9 0%,
|
|
#0f1d34 70%,
|
|
#00060c 100%
|
|
);
|
|
}
|
|
|
|
.brand-gradient {
|
|
background-image: var(--brand-gradient);
|
|
}
|
|
|
|
:root {
|
|
--trend-grid-color: oklch(56% 0.01 255 / 0.28);
|
|
--trend-axis-color: oklch(42% 0.01 255 / 0.85);
|
|
--trend-fill-start-opacity: 0.32;
|
|
--trend-fill-end-opacity: 0.05;
|
|
--trend-tooltip-bg: oklch(99% 0.005 255 / 0.96);
|
|
--trend-tooltip-border: oklch(84% 0.01 255 / 0.7);
|
|
--trend-tooltip-shadow: oklch(0% 0 0 / 0.1);
|
|
}
|
|
|
|
@plugin "daisyui" {
|
|
/* @property isn't supported by some browsers and gives a noisy warning https://github.com/saadeghi/daisyui/issues/3882 */
|
|
exclude: properties;
|
|
}
|
|
|
|
/* Light theme — CrawlerX / MetatronCube brand (primary #3779b9) */
|
|
@plugin "daisyui/theme" {
|
|
name: "crawlerx";
|
|
default: true;
|
|
prefersdark: false;
|
|
color-scheme: light;
|
|
--color-base-100: #ffffff;
|
|
--color-base-200: #f6f8fa;
|
|
--color-base-300: #e6eaef;
|
|
--color-base-content: #151515;
|
|
--color-primary: #3779b9;
|
|
--color-primary-content: #ffffff;
|
|
--color-secondary: #0f1d34;
|
|
--color-secondary-content: #ffffff;
|
|
--color-accent: #4faede;
|
|
--color-accent-content: #06263a;
|
|
--color-neutral: #151515;
|
|
--color-neutral-content: #ffffff;
|
|
--color-info: #3779b9;
|
|
--color-info-content: #ffffff;
|
|
--color-success: oklch(65% 0.18 145);
|
|
--color-success-content: oklch(100% 0 0);
|
|
--color-warning: oklch(80% 0.15 80);
|
|
--color-warning-content: oklch(100% 0 0);
|
|
--color-error: oklch(65% 0.2 25);
|
|
--color-error-content: oklch(100% 0 0);
|
|
--radius-selector: 0.5rem;
|
|
--radius-field: 0.5rem;
|
|
--radius-box: 0.75rem;
|
|
--size-selector: 0.25rem;
|
|
--size-field: 0.25rem;
|
|
--border: 1px;
|
|
--depth: 0;
|
|
--noise: 0;
|
|
}
|
|
|
|
/* Dark theme - auto-activates via prefers-color-scheme */
|
|
@plugin "daisyui/theme" {
|
|
name: "crawlerx-dark";
|
|
prefersdark: true;
|
|
color-scheme: dark;
|
|
--color-base-100: #141821;
|
|
--color-base-200: #0e121b;
|
|
--color-base-300: #232a37;
|
|
--color-base-content: #e8ebf0;
|
|
--color-primary: #3f8ad4;
|
|
--color-primary-content: #ffffff;
|
|
--color-secondary: #9fb3c8;
|
|
--color-secondary-content: #0e121b;
|
|
--color-accent: #4faede;
|
|
--color-accent-content: #06263a;
|
|
--color-neutral: #e8ebf0;
|
|
--color-neutral-content: #141821;
|
|
--color-info: #3f8ad4;
|
|
--color-info-content: #ffffff;
|
|
--color-success: oklch(65% 0.18 145);
|
|
--color-success-content: oklch(100% 0 0);
|
|
--color-warning: oklch(80% 0.15 80);
|
|
--color-warning-content: oklch(100% 0 0);
|
|
--color-error: oklch(65% 0.2 25);
|
|
--color-error-content: oklch(100% 0 0);
|
|
--radius-selector: 0.5rem;
|
|
--radius-field: 0.5rem;
|
|
--radius-box: 0.75rem;
|
|
--size-selector: 0.25rem;
|
|
--size-field: 0.25rem;
|
|
--border: 1px;
|
|
--depth: 0;
|
|
--noise: 0;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
@apply m-0 bg-base-200;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
min-height: 100%;
|
|
}
|
|
|
|
/* Prevent Safari mobile from zooming on input focus (requires 16px minimum) */
|
|
input,
|
|
textarea,
|
|
select {
|
|
@apply text-base;
|
|
}
|
|
|
|
/* Global input focus styling - use primary color instead of default ring */
|
|
.input:focus,
|
|
.input:focus-visible,
|
|
.textarea:focus,
|
|
.textarea:focus-visible {
|
|
outline: none;
|
|
border-color: var(--color-primary);
|
|
background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
|
|
}
|
|
|
|
/* Safe area utilities for mobile devices */
|
|
@layer utilities {
|
|
.pb-safe {
|
|
padding-bottom: calc(env(safe-area-inset-bottom, 0.5rem) + 0.5rem);
|
|
}
|
|
.pt-safe {
|
|
padding-top: max(env(safe-area-inset-top, 0), 12px);
|
|
}
|
|
}
|
|
|
|
/* Override DaisyUI dock's fixed positioning to use flex layout instead */
|
|
/* This allows the TabBar to work correctly with Safari's browser toolbar */
|
|
.dock {
|
|
position: relative;
|
|
bottom: auto;
|
|
left: auto;
|
|
right: auto;
|
|
border-top: none;
|
|
height: 4rem;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
/* Touch device optimizations */
|
|
@media (pointer: coarse) {
|
|
html {
|
|
touch-action: none;
|
|
}
|
|
body {
|
|
touch-action: pan-x pan-y;
|
|
}
|
|
}
|
|
|
|
/* Dark mode: neutral interactive surfaces should lift above the panel, not
|
|
sink below it. DaisyUI derives default buttons and the tabs-box well from
|
|
base-200, which is darker than the base-100 content panel in dark mode,
|
|
so they read as sunken/disabled. Colored variants (primary, error, ...)
|
|
set their own --btn-color and are excluded. */
|
|
html[data-theme="crawlerx-dark"]
|
|
.btn:not(
|
|
.btn-primary,
|
|
.btn-error,
|
|
.btn-neutral,
|
|
.btn-ghost,
|
|
.btn-outline,
|
|
.btn-soft
|
|
) {
|
|
--btn-color: oklch(25% 0 0);
|
|
}
|
|
|
|
/* Light mode: the base-200 default button is nearly invisible on the
|
|
base-100 content panel; use a white surface with a visible border,
|
|
matching inputs/selects. */
|
|
html[data-theme="crawlerx"]
|
|
.btn:not(
|
|
.btn-primary,
|
|
.btn-error,
|
|
.btn-neutral,
|
|
.btn-ghost,
|
|
.btn-outline,
|
|
.btn-soft
|
|
) {
|
|
--btn-color: var(--color-base-100);
|
|
--btn-border: var(--color-base-300);
|
|
}
|
|
|
|
/* Underline tabs: DaisyUI's tabs-border underlines the active tab with
|
|
currentColor; use the primary accent instead (PostHog-style). */
|
|
.tabs-border > .tab.tab-active::before {
|
|
--tab-border-color: var(--color-primary);
|
|
}
|
|
|
|
/* Custom alert styling with darker borders and transparent background */
|
|
.alert {
|
|
@apply flex gap-3 rounded-lg border p-4 text-base-content/70;
|
|
}
|
|
|
|
.alert-warning {
|
|
@apply border-warning/70 bg-warning/40 text-base-content/90;
|
|
}
|
|
|
|
.alert-info {
|
|
@apply border-info/70 bg-info/40 text-base-content/90;
|
|
}
|
|
|
|
.alert-success {
|
|
@apply border-success/70 bg-success/40 text-base-content/90;
|
|
}
|
|
|
|
.alert-error {
|
|
@apply border-error/70 bg-error/40 text-base-content/90;
|
|
}
|
|
|
|
/* Tag chip colors — muted background + readable text in both themes.
|
|
Text uses darker shades on light theme for contrast, lighter on dark. */
|
|
.tag-chip-slate {
|
|
background-color: color-mix(in oklab, #64748b 14%, transparent);
|
|
color: #334155;
|
|
--tw-ring-color: color-mix(in oklab, #64748b 30%, transparent);
|
|
}
|
|
.tag-chip-rose {
|
|
background-color: color-mix(in oklab, #f43f5e 14%, transparent);
|
|
color: #9f1239;
|
|
--tw-ring-color: color-mix(in oklab, #f43f5e 30%, transparent);
|
|
}
|
|
.tag-chip-amber {
|
|
background-color: color-mix(in oklab, #f59e0b 16%, transparent);
|
|
color: #92400e;
|
|
--tw-ring-color: color-mix(in oklab, #f59e0b 32%, transparent);
|
|
}
|
|
.tag-chip-lime {
|
|
background-color: color-mix(in oklab, #84cc16 16%, transparent);
|
|
color: #3f6212;
|
|
--tw-ring-color: color-mix(in oklab, #84cc16 32%, transparent);
|
|
}
|
|
.tag-chip-emerald {
|
|
background-color: color-mix(in oklab, #10b981 14%, transparent);
|
|
color: #065f46;
|
|
--tw-ring-color: color-mix(in oklab, #10b981 30%, transparent);
|
|
}
|
|
.tag-chip-sky {
|
|
background-color: color-mix(in oklab, #0ea5e9 14%, transparent);
|
|
color: #075985;
|
|
--tw-ring-color: color-mix(in oklab, #0ea5e9 30%, transparent);
|
|
}
|
|
.tag-chip-violet {
|
|
background-color: color-mix(in oklab, #8b5cf6 16%, transparent);
|
|
color: #5b21b6;
|
|
--tw-ring-color: color-mix(in oklab, #8b5cf6 32%, transparent);
|
|
}
|
|
.tag-chip-fuchsia {
|
|
background-color: color-mix(in oklab, #d946ef 14%, transparent);
|
|
color: #86198f;
|
|
--tw-ring-color: color-mix(in oklab, #d946ef 30%, transparent);
|
|
}
|
|
|
|
html[data-theme="crawlerx-dark"] .tag-chip-slate {
|
|
color: #cbd5e1;
|
|
}
|
|
html[data-theme="crawlerx-dark"] .tag-chip-rose {
|
|
color: #fda4af;
|
|
}
|
|
html[data-theme="crawlerx-dark"] .tag-chip-amber {
|
|
color: #fcd34d;
|
|
}
|
|
html[data-theme="crawlerx-dark"] .tag-chip-lime {
|
|
color: #d9f99d;
|
|
}
|
|
html[data-theme="crawlerx-dark"] .tag-chip-emerald {
|
|
color: #6ee7b7;
|
|
}
|
|
html[data-theme="crawlerx-dark"] .tag-chip-sky {
|
|
color: #7dd3fc;
|
|
}
|
|
html[data-theme="crawlerx-dark"] .tag-chip-violet {
|
|
color: #c4b5fd;
|
|
}
|
|
html[data-theme="crawlerx-dark"] .tag-chip-fuchsia {
|
|
color: #f5d0fe;
|
|
}
|
|
|
|
/* Keyword difficulty score badges — muted/transparent style to match tag chips */
|
|
.score-badge {
|
|
@apply ring-1 ring-inset;
|
|
}
|
|
|
|
.score-tier-na {
|
|
background-color: color-mix(in oklab, #94a3b8 12%, transparent);
|
|
color: #475569;
|
|
--tw-ring-color: color-mix(in oklab, #94a3b8 28%, transparent);
|
|
}
|
|
|
|
.score-tier-1 {
|
|
background-color: color-mix(in oklab, #10b981 15%, transparent);
|
|
color: #065f46;
|
|
--tw-ring-color: color-mix(in oklab, #10b981 30%, transparent);
|
|
}
|
|
|
|
.score-tier-2 {
|
|
background-color: color-mix(in oklab, #84cc16 15%, transparent);
|
|
color: #3f6212;
|
|
--tw-ring-color: color-mix(in oklab, #84cc16 30%, transparent);
|
|
}
|
|
|
|
.score-tier-3 {
|
|
background-color: color-mix(in oklab, #eab308 16%, transparent);
|
|
color: #854d0e;
|
|
--tw-ring-color: color-mix(in oklab, #eab308 32%, transparent);
|
|
}
|
|
|
|
.score-tier-4 {
|
|
background-color: color-mix(in oklab, #f97316 16%, transparent);
|
|
color: #9a3412;
|
|
--tw-ring-color: color-mix(in oklab, #f97316 32%, transparent);
|
|
}
|
|
|
|
.score-tier-5 {
|
|
background-color: color-mix(in oklab, #ef4444 15%, transparent);
|
|
color: #991b1b;
|
|
--tw-ring-color: color-mix(in oklab, #ef4444 30%, transparent);
|
|
}
|
|
|
|
.score-tier-6 {
|
|
background-color: color-mix(in oklab, #b91c1c 18%, transparent);
|
|
color: #7f1d1d;
|
|
--tw-ring-color: color-mix(in oklab, #b91c1c 32%, transparent);
|
|
}
|
|
|
|
html[data-theme="crawlerx-dark"] .score-tier-na {
|
|
color: #cbd5e1;
|
|
}
|
|
html[data-theme="crawlerx-dark"] .score-tier-1 {
|
|
color: #6ee7b7;
|
|
}
|
|
html[data-theme="crawlerx-dark"] .score-tier-2 {
|
|
color: #bef264;
|
|
}
|
|
html[data-theme="crawlerx-dark"] .score-tier-3 {
|
|
color: #fde047;
|
|
}
|
|
html[data-theme="crawlerx-dark"] .score-tier-4 {
|
|
color: #fdba74;
|
|
}
|
|
html[data-theme="crawlerx-dark"] .score-tier-5 {
|
|
color: #fca5a5;
|
|
}
|
|
html[data-theme="crawlerx-dark"] .score-tier-6 {
|
|
color: #fda4af;
|
|
}
|
|
|
|
html[data-theme="crawlerx-dark"] {
|
|
--trend-grid-color: oklch(78% 0.01 255 / 0.22);
|
|
--trend-axis-color: oklch(84% 0.01 255 / 0.62);
|
|
--trend-fill-start-opacity: 0.24;
|
|
--trend-fill-end-opacity: 0.03;
|
|
--trend-tooltip-bg: oklch(21% 0.01 255 / 0.95);
|
|
--trend-tooltip-border: oklch(40% 0.01 255 / 0.65);
|
|
--trend-tooltip-shadow: oklch(0% 0 0 / 0.35);
|
|
}
|
|
|
|
html[data-theme="crawlerx-dark"] .alert-warning {
|
|
@apply border-warning/60 bg-warning/20;
|
|
}
|
|
|
|
html[data-theme="crawlerx-dark"] .alert-info {
|
|
@apply border-info/60 bg-info/20;
|
|
}
|
|
|
|
html[data-theme="crawlerx-dark"] .alert-success {
|
|
@apply border-success/60 bg-success/20;
|
|
}
|
|
|
|
html[data-theme="crawlerx-dark"] .alert-error {
|
|
@apply border-error/60 bg-error/20;
|
|
}
|