/* ============================================ ANTIBULK Global Theme System ============================================ Prefix: th_ Usage: - Apply th_ classes to HTML elements for consistent styling - Switch themes by setting data-theme="" on or - Components keep their own prefix for layout; th_ handles appearance Available themes: default, sharp, soft, dark ============================================ */ /* ============================================ CSS Custom Properties (Design Tokens) ============================================ */ :root, [data-theme="default"] { /* Colors - Primary */ --th-primary: #2563EB; --th-primary-hover: #1d4ed8; --th-primary-light: rgba(37, 99, 235, 0.1); --th-primary-shadow: rgba(37, 99, 235, 0.25); --th-primary-gradient: linear-gradient(135deg, #2563EB 0%, #1d4ed8 100%); /* Colors - Danger */ --th-danger: #dc2626; --th-danger-hover: #b91c1c; --th-danger-shadow: rgba(220, 38, 38, 0.25); --th-danger-gradient: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); /* Colors - Success */ --th-success-bg: #d1fae5; --th-success-text: #065f46; --th-success-border: #10b981; /* Colors - Warning */ --th-warning-bg: #fef3c7; --th-warning-text: #92400e; --th-warning-border: #f59e0b; /* Colors - Error */ --th-error-bg: #fee2e2; --th-error-text: #991b1b; --th-error-border: #ef4444; /* Colors - Info */ --th-info-bg: #dbeafe; --th-info-text: #1e40af; --th-info-border: #3b82f6; /* Colors - Neutral */ --th-text-primary: #1e293b; --th-text-secondary: #475569; --th-text-muted: #94a3b8; --th-text-on-primary: #ffffff; /* Surfaces */ --th-surface: #ffffff; --th-surface-alt: #f8fafc; --th-surface-hover: #ffffff; --th-surface-gradient: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); /* Borders */ --th-border: #e2e8f0; --th-border-hover: #cbd5e1; --th-border-focus: var(--th-primary); --th-border-width: 2px; --th-input-border-width: 1px; --th-border-separator: #f1f5f9; /* Radius */ --th-radius-sm: 6px; --th-radius-md: 10px; --th-radius-lg: 12px; --th-radius-xl: 16px; --th-radius-pill: 999px; /* Spacing */ --th-input-padding-x: 1rem; --th-input-padding-y: 0.75rem; --th-btn-padding-x: 1.5rem; --th-btn-padding-y: 0.875rem; --th-form-gap: 1.25rem; --th-section-gap: 2rem; /* Typography */ --th-font-size-xs: 0.75rem; --th-font-size-sm: 0.8125rem; --th-font-size-base: 0.9375rem; --th-font-size-lg: 1.125rem; --th-font-size-xl: 1.375rem; --th-font-weight-normal: 400; --th-font-weight-medium: 500; --th-font-weight-semibold: 600; --th-font-weight-bold: 700; --th-label-transform: uppercase; --th-label-spacing: 0.025em; /* Shadows */ --th-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); --th-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); --th-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1); --th-shadow-focus: 0 0 0 4px var(--th-primary-light); --th-focus-ring: 0 0 0 3px var(--th-primary-light); /* Transitions */ --th-transition: all 0.2s ease; /* Bridge: map legacy --color-* vars to --th-* so styles.css responds to themes */ --color-primary: var(--th-primary); --color-accent: #16a34a; --color-bg: var(--th-surface-alt); --color-surface: var(--th-surface); --color-border: var(--th-border); --color-text-dark: var(--th-text-primary); --color-text-light: var(--th-text-secondary); --color-success: var(--th-success-border); --color-warning: var(--th-warning-border); --radius: var(--th-radius-md); --shadow-soft: var(--th-shadow-md); --transition: var(--th-transition); } /* ============================================ Theme: Sharp Squared corners, thinner borders, no gradients ============================================ */ [data-theme="sharp"] { --th-radius-sm: 2px; --th-radius-md: 4px; --th-radius-lg: 6px; --th-radius-xl: 8px; --th-radius-pill: 4px; --th-border-width: 1px; --th-primary-gradient: var(--th-primary); --th-danger-gradient: var(--th-danger); --th-surface-gradient: var(--th-surface-alt); --th-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.08); --th-shadow-focus: 0 0 0 2px var(--th-primary-light); --th-label-transform: none; --th-label-spacing: normal; /* Bridge */ --color-primary: var(--th-primary); --color-bg: var(--th-surface-alt); --color-surface: var(--th-surface); --color-border: var(--th-border); --color-text-dark: var(--th-text-primary); --color-text-light: var(--th-text-secondary); --radius: var(--th-radius-md); --shadow-soft: var(--th-shadow-md); } /* ============================================ Theme: Soft Extra rounded, pastel tones, gentle shadows ============================================ */ [data-theme="soft"] { --th-primary: #6366f1; --th-primary-hover: #4f46e5; --th-primary-light: rgba(99, 102, 241, 0.1); --th-primary-shadow: rgba(99, 102, 241, 0.2); --th-primary-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); --th-radius-sm: 10px; --th-radius-md: 14px; --th-radius-lg: 18px; --th-radius-xl: 24px; --th-radius-pill: 999px; --th-border: #e0e7ff; --th-border-hover: #c7d2fe; --th-surface-alt: #f5f3ff; --th-surface-gradient: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%); --th-shadow-md: 0 4px 14px rgba(99, 102, 241, 0.08); --th-shadow-focus: 0 0 0 5px var(--th-primary-light); /* Bridge */ --color-primary: var(--th-primary); --color-accent: #8b5cf6; --color-bg: var(--th-surface-alt); --color-surface: var(--th-surface); --color-border: var(--th-border); --color-text-dark: var(--th-text-primary); --color-text-light: var(--th-text-secondary); --radius: var(--th-radius-md); --shadow-soft: var(--th-shadow-md); } /* ============================================ Theme: Dark Dark surfaces, light text, accent colors pop ============================================ */ [data-theme="dark"] { --th-primary: #3b82f6; --th-primary-hover: #60a5fa; --th-primary-light: rgba(59, 130, 246, 0.15); --th-primary-shadow: rgba(59, 130, 246, 0.3); --th-primary-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); --th-danger: #f87171; --th-danger-hover: #ef4444; --th-danger-shadow: rgba(248, 113, 113, 0.3); --th-danger-gradient: linear-gradient(135deg, #f87171 0%, #ef4444 100%); --th-success-bg: #064e3b; --th-success-text: #6ee7b7; --th-success-border: #10b981; --th-warning-bg: #78350f; --th-warning-text: #fcd34d; --th-warning-border: #f59e0b; --th-error-bg: #7f1d1d; --th-error-text: #fca5a5; --th-error-border: #ef4444; --th-info-bg: #1e3a5f; --th-info-text: #93c5fd; --th-info-border: #3b82f6; --th-text-primary: #f1f5f9; --th-text-secondary: #cbd5e1; --th-text-muted: #64748b; --th-text-on-primary: #ffffff; --th-surface: #1e293b; --th-surface-alt: #0f172a; --th-surface-hover: #334155; --th-surface-gradient: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); --th-border: #334155; --th-border-hover: #475569; --th-border-separator: #334155; --th-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3); --th-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --th-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5); /* Bridge */ --color-primary: var(--th-primary); --color-accent: #60a5fa; --color-bg: var(--th-surface-alt); --color-surface: var(--th-surface); --color-border: var(--th-border); --color-text-dark: var(--th-text-primary); --color-text-light: var(--th-text-secondary); --color-success: var(--th-success-border); --color-warning: var(--th-warning-border); --radius: var(--th-radius-md); --shadow-soft: var(--th-shadow-md); } /* ============================================ Form Controls: Inputs, Selects, Textareas ============================================ */ .th_input, .th_select, .th_textarea { padding: var(--th-input-padding-y) var(--th-input-padding-x); border: var(--th-border-width) solid var(--th-border); border-radius: var(--th-radius-md); font-size: var(--th-font-size-base); color: var(--th-text-primary); background: var(--th-surface-alt); transition: var(--th-transition); width: 100%; box-sizing: border-box; } .th_input:hover, .th_select:hover, .th_textarea:hover { border-color: var(--th-border-hover); background: var(--th-surface-hover); } .th_input:focus, .th_select:focus, .th_textarea:focus { outline: none; border-color: var(--th-border-focus); background: var(--th-surface); box-shadow: var(--th-shadow-focus); } .th_input::placeholder, .th_textarea::placeholder { color: var(--th-text-muted); } .th_input:disabled, .th_select:disabled, .th_textarea:disabled { opacity: 0.5; cursor: not-allowed; background: var(--th-surface-alt); } .th_textarea { min-height: 80px; resize: vertical; } /* ============================================ Validation States ============================================ */ .th_valid { border-color: var(--th-success-border) !important; background-color: color-mix(in srgb, var(--th-success-bg) 30%, var(--th-surface)) !important; } .th_valid:focus { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1) !important; } .th_invalid { border-color: var(--th-error-border) !important; background-color: color-mix(in srgb, var(--th-error-bg) 30%, var(--th-surface)) !important; } .th_invalid:focus { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1) !important; } /* ============================================ Checkbox Group ============================================ */ .th_checkbox_group { display: flex; align-items: center; gap: 0.75rem; padding: var(--th-input-padding-y) var(--th-input-padding-x); background: var(--th-surface-alt); border-radius: var(--th-radius-md); border: var(--th-border-width) solid var(--th-border); cursor: pointer; transition: var(--th-transition); } .th_checkbox_group:hover { border-color: var(--th-border-hover); background: var(--th-surface-hover); } .th_checkbox { width: 1.25rem; height: 1.25rem; cursor: pointer; accent-color: var(--th-primary); } .th_checkbox_label { font-size: var(--th-font-size-base); color: var(--th-text-secondary); cursor: pointer; } /* ============================================ Multi-Select ============================================ */ .th_multi_select { min-height: 100px; max-height: 160px; overflow-y: auto; padding: 0.5rem; background: var(--th-surface-alt); border: var(--th-border-width) solid var(--th-border); border-radius: var(--th-radius-md); width: 100%; box-sizing: border-box; } .th_multi_select:focus { outline: none; border-color: var(--th-border-focus); background: var(--th-surface); box-shadow: var(--th-shadow-focus); } .th_multi_select option { padding: 0.625rem 0.75rem; cursor: pointer; border-radius: var(--th-radius-sm); margin: 2px 0; } .th_multi_select option:checked { background: var(--th-primary-gradient); color: var(--th-text-on-primary); } .th_multi_select option:hover { background-color: var(--th-primary-light); } .th_multi_select optgroup { font-weight: var(--th-font-weight-bold); color: var(--th-text-primary); margin-top: 0.5rem; font-size: var(--th-font-size-sm); } /* ============================================ Buttons ============================================ */ .th_btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: var(--th-btn-padding-y) var(--th-btn-padding-x); border-radius: var(--th-radius-md); font-size: var(--th-font-size-base); font-weight: var(--th-font-weight-semibold); cursor: pointer; transition: var(--th-transition); border: none; text-decoration: none; line-height: 1.2; } .th_btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; } .th_btn_primary { background: var(--th-primary-gradient); color: var(--th-text-on-primary); box-shadow: 0 4px 6px -1px var(--th-primary-shadow); } .th_btn_primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 10px -1px var(--th-primary-shadow); } .th_btn_primary:active:not(:disabled) { transform: translateY(0); } .th_btn_secondary { background: transparent; color: var(--th-text-primary); border: var(--th-border-width) solid var(--th-border); } .th_btn_secondary:hover:not(:disabled) { background: var(--th-surface-alt); border-color: var(--th-border-hover); } .th_btn_ghost { background: transparent; color: var(--th-text-muted); border: none; } .th_btn_ghost:hover:not(:disabled) { color: var(--th-text-primary); background: var(--th-surface-alt); } .th_btn_danger { background: var(--th-danger-gradient); color: var(--th-text-on-primary); box-shadow: 0 4px 6px -1px var(--th-danger-shadow); } .th_btn_danger:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 10px -1px var(--th-danger-shadow); } .th_btn_danger:active:not(:disabled) { transform: translateY(0); } .th_btn_text { background: transparent; color: var(--th-text-muted); border: none; padding: var(--th-btn-padding-y) var(--th-btn-padding-x); } .th_btn_text:hover:not(:disabled) { color: var(--th-text-primary); background: var(--th-surface-alt); border-radius: var(--th-radius-md); } /* Button loading state */ .th_btn_loading { position: relative; color: transparent !important; pointer-events: none; } .th_btn_loading::after { content: ''; position: absolute; width: 1rem; height: 1rem; top: 50%; left: 50%; margin-left: -0.5rem; margin-top: -0.5rem; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: th_spin 0.6s linear infinite; } @keyframes th_spin { to { transform: rotate(360deg); } } /* ============================================ Form Layout ============================================ */ .th_form { display: flex; flex-direction: column; gap: var(--th-form-gap); } .th_form_row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 600px) { .th_form_row { grid-template-columns: 1fr; } } .th_form_group { display: flex; flex-direction: column; gap: 0.5rem; } .th_form_label { font-weight: var(--th-font-weight-semibold); font-size: var(--th-font-size-sm); color: var(--th-text-secondary); text-transform: var(--th-label-transform); letter-spacing: var(--th-label-spacing); } .th_form_actions { display: flex; gap: 1rem; margin-top: 0.5rem; padding-top: 1.5rem; border-top: var(--th-border-width) solid var(--th-border-separator); } .th_form_actions .th_btn { flex: 1; } /* ============================================ Cards & Sections ============================================ */ .th_card { background: var(--th-surface); border-radius: var(--th-radius-lg); padding: 1.75rem; box-shadow: var(--th-shadow-md); } .th_card_outer { background: var(--th-surface-gradient); border-radius: var(--th-radius-xl); padding: 0.5rem; } .th_card h2 { margin: 0 0 1.5rem 0; font-size: var(--th-font-size-xl); font-weight: var(--th-font-weight-bold); color: var(--th-text-primary); display: flex; align-items: center; gap: 0.5rem; padding-bottom: 1rem; border-bottom: var(--th-border-width) solid var(--th-border-separator); } .th_section { background: var(--th-surface-alt); padding: 1.5rem; border-radius: var(--th-radius-lg); border: 1px solid var(--th-border); } .th_section h3 { margin: 0 0 1rem 0; color: var(--th-text-primary); font-size: var(--th-font-size-lg); font-weight: var(--th-font-weight-semibold); } .th_section_divider { padding-top: 1rem; margin-top: 0.5rem; border-top: 1px solid var(--th-border-separator); } .th_section_title { font-size: var(--th-font-size-xs); font-weight: var(--th-font-weight-semibold); color: var(--th-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; } /* ============================================ Messages / Alerts ============================================ */ .th_message { padding: 1rem; border-radius: var(--th-radius-sm); margin-bottom: 1rem; display: flex; align-items: flex-start; gap: 0.75rem; border-left: 4px solid; font-size: var(--th-font-size-base); } .th_message_success { background: var(--th-success-bg); color: var(--th-success-text); border-left-color: var(--th-success-border); } .th_message_error { background: var(--th-error-bg); color: var(--th-error-text); border-left-color: var(--th-error-border); } .th_message_warning { background: var(--th-warning-bg); color: var(--th-warning-text); border-left-color: var(--th-warning-border); } .th_message_info { background: var(--th-info-bg); color: var(--th-info-text); border-left-color: var(--th-info-border); } /* ============================================ Modal ============================================ */ .th_modal_overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; justify-content: center; align-items: center; padding: 1rem; } .th_modal_overlay.active { display: flex; } .th_modal_content { background: var(--th-surface); padding: 2rem; border-radius: var(--th-radius-lg); width: 90%; max-width: 800px; max-height: 90vh; overflow-y: auto; box-shadow: var(--th-shadow-lg); } .th_modal_header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: var(--th-border-width) solid var(--th-border-separator); } .th_modal_title { font-size: var(--th-font-size-xl); font-weight: var(--th-font-weight-bold); color: var(--th-text-primary); } .th_close_btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--th-text-muted); padding: 0.5rem; border-radius: var(--th-radius-sm); transition: var(--th-transition); } .th_close_btn:hover { background: var(--th-surface-alt); color: var(--th-text-primary); } /* ============================================ Progress Bar ============================================ */ .th_progress_bar { width: 100%; height: 8px; background: var(--th-border); border-radius: var(--th-radius-pill); overflow: hidden; } .th_progress_fill { height: 100%; background: var(--th-primary-gradient); transition: width 0.3s ease; } /* ============================================ Chips / Tags ============================================ */ .th_chip { border: 1px solid var(--th-border); border-radius: var(--th-radius-pill); padding: 0.45rem 1rem; font-size: var(--th-font-size-sm); color: var(--th-text-primary); background: var(--th-surface); cursor: pointer; transition: var(--th-transition); } .th_chip.th_active { background: var(--th-primary-light); border-color: var(--th-primary); color: var(--th-primary); font-weight: var(--th-font-weight-semibold); } /* ============================================ Utility: Hidden / Visibility ============================================ */ .th_hidden { display: none !important; } /* ============================================ Responsive ============================================ */ @media (max-width: 768px) { .th_modal_content { width: 95%; margin: 1% auto; padding: 1rem; } .th_message { font-size: 0.875rem; padding: 0.75rem; } } @media (max-width: 480px) { .th_form_row { grid-template-columns: 1fr; } .th_form_actions { flex-direction: column; gap: 0.75rem; } .th_btn { width: 100%; } .th_modal_content { padding: 1rem; margin: 0; border-radius: 0; max-height: 100vh; } }