607 lines
16 KiB
CSS
607 lines
16 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--background: #f3f6fb;
|
|
--foreground: #131a24;
|
|
--muted-foreground: #667287;
|
|
--surface-primary: rgba(255, 255, 255, 0.97);
|
|
--surface-elevated: #ffffff;
|
|
--surface-secondary: #f2f5fa;
|
|
--surface-tertiary: #e8eef7;
|
|
--surface-overlay: rgba(255, 255, 255, 0.88);
|
|
--border-subtle: rgba(148, 163, 184, 0.22);
|
|
--border-strong: rgba(148, 163, 184, 0.32);
|
|
--accent-primary: #1296ea;
|
|
--accent-primary-strong: #0284c7;
|
|
--accent-soft: rgba(14, 165, 233, 0.14);
|
|
--accent-soft-strong: rgba(14, 165, 233, 0.24);
|
|
--success-soft: rgba(16, 185, 129, 0.15);
|
|
--danger-soft: rgba(239, 68, 68, 0.12);
|
|
--warning-soft: rgba(245, 158, 11, 0.15);
|
|
--app-shell-gradient: radial-gradient(circle at top, rgba(125, 211, 252, 0.12), transparent 32%), linear-gradient(180deg, #f5f9ff 0%, #eef3fb 46%, #f4f7fb 100%);
|
|
--header-surface: rgba(255, 255, 255, 0.84);
|
|
--shadow-card: 0 12px 30px -22px rgba(15, 23, 42, 0.16), 0 3px 10px -8px rgba(15, 23, 42, 0.08);
|
|
--shadow-elevated: 0 18px 40px -24px rgba(15, 23, 42, 0.18), 0 8px 16px -12px rgba(15, 23, 42, 0.1);
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
}
|
|
|
|
html[data-bs-theme="dark"] {
|
|
--background: #0b0f14;
|
|
--foreground: #eef2f7;
|
|
--muted-foreground: #97a3b7;
|
|
--surface-primary: rgba(18, 24, 32, 0.92);
|
|
--surface-elevated: #10161d;
|
|
--surface-secondary: #1b212a;
|
|
--surface-tertiary: #232c37;
|
|
--surface-overlay: rgba(12, 18, 25, 0.88);
|
|
--border-subtle: rgba(119, 140, 167, 0.18);
|
|
--border-strong: rgba(119, 140, 167, 0.28);
|
|
--accent-primary: #1ea7ff;
|
|
--accent-primary-strong: #0b8ee5;
|
|
--accent-soft: rgba(30, 167, 255, 0.18);
|
|
--accent-soft-strong: rgba(30, 167, 255, 0.28);
|
|
--success-soft: rgba(16, 185, 129, 0.17);
|
|
--danger-soft: rgba(239, 68, 68, 0.16);
|
|
--warning-soft: rgba(245, 158, 11, 0.18);
|
|
--app-shell-gradient: radial-gradient(circle at top, rgba(30, 167, 255, 0.08), transparent 24%), linear-gradient(180deg, #10161d 0%, #111922 38%, #0b1016 100%);
|
|
--header-surface: rgba(14, 20, 28, 0.88);
|
|
--shadow-card: 0 20px 48px -30px rgba(2, 6, 23, 0.72);
|
|
--shadow-elevated: 0 36px 72px -40px rgba(2, 6, 23, 0.82);
|
|
}
|
|
|
|
html, body {
|
|
overflow-x: hidden;
|
|
overscroll-behavior-x: none;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
|
|
transition: background-color 180ms ease, color 180ms ease;
|
|
}
|
|
|
|
a,
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
transition:
|
|
background-color 180ms ease,
|
|
border-color 180ms ease,
|
|
color 180ms ease,
|
|
box-shadow 180ms ease;
|
|
}
|
|
|
|
::selection {
|
|
background: rgba(14, 165, 233, 0.32);
|
|
}
|
|
|
|
.app-shell {
|
|
background: var(--app-shell-gradient);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.app-header {
|
|
background: var(--header-surface);
|
|
border-color: var(--border-subtle);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.app-surface {
|
|
background: var(--surface-primary);
|
|
border: 1px solid var(--border-subtle);
|
|
box-shadow: var(--shadow-card);
|
|
}
|
|
|
|
.app-surface-elevated {
|
|
background: var(--surface-elevated);
|
|
border: 1px solid var(--border-subtle);
|
|
box-shadow: var(--shadow-elevated);
|
|
}
|
|
|
|
.app-surface-muted {
|
|
background: var(--surface-secondary);
|
|
border: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.app-card {
|
|
background: var(--surface-primary);
|
|
border: 1px solid var(--border-subtle);
|
|
box-shadow: var(--shadow-card);
|
|
}
|
|
|
|
.app-input,
|
|
.app-select {
|
|
background: var(--surface-secondary);
|
|
border: 1px solid var(--border-strong);
|
|
color: var(--foreground);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
|
transition:
|
|
background-color 160ms ease,
|
|
border-color 160ms ease,
|
|
box-shadow 160ms ease,
|
|
color 160ms ease;
|
|
}
|
|
|
|
.app-field-label {
|
|
display: block;
|
|
margin-bottom: 0.375rem;
|
|
color: var(--foreground);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.app-choice-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: var(--foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.app-checkbox,
|
|
.app-radio {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
flex-shrink: 0;
|
|
accent-color: var(--accent-primary);
|
|
border: 1px solid var(--border-strong);
|
|
background: var(--surface-secondary);
|
|
}
|
|
|
|
.app-checkbox {
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.app-radio {
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.app-color-input {
|
|
width: 4.5rem;
|
|
height: 2.5rem;
|
|
padding: 0.375rem;
|
|
border-radius: 0.875rem;
|
|
border: 1px solid var(--border-strong);
|
|
background: var(--surface-secondary);
|
|
cursor: pointer;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
|
transition:
|
|
background-color 160ms ease,
|
|
border-color 160ms ease,
|
|
box-shadow 160ms ease,
|
|
transform 160ms ease;
|
|
}
|
|
|
|
.app-color-input::-webkit-color-swatch-wrapper {
|
|
padding: 0;
|
|
}
|
|
|
|
.app-color-input::-webkit-color-swatch {
|
|
border: none;
|
|
border-radius: 0.625rem;
|
|
}
|
|
|
|
.app-input::placeholder {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
input:-webkit-autofill,
|
|
input:-webkit-autofill:hover,
|
|
input:-webkit-autofill:focus,
|
|
textarea:-webkit-autofill,
|
|
textarea:-webkit-autofill:hover,
|
|
textarea:-webkit-autofill:focus,
|
|
select:-webkit-autofill,
|
|
select:-webkit-autofill:hover,
|
|
select:-webkit-autofill:focus {
|
|
-webkit-text-fill-color: var(--foreground);
|
|
caret-color: var(--foreground);
|
|
box-shadow:
|
|
inset 0 0 0 1000px var(--surface-secondary),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
|
transition: background-color 99999s ease-in-out 0s;
|
|
}
|
|
|
|
.app-input:hover,
|
|
.app-select:hover,
|
|
.app-color-input:hover {
|
|
background: var(--surface-tertiary);
|
|
border-color: color-mix(in srgb, var(--accent-primary) 22%, var(--border-strong));
|
|
}
|
|
|
|
.app-input:focus,
|
|
.app-select:focus {
|
|
background: var(--surface-elevated);
|
|
border-color: var(--accent-primary);
|
|
outline: none;
|
|
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 18%, transparent);
|
|
}
|
|
|
|
.app-color-input:focus {
|
|
border-color: var(--accent-primary);
|
|
outline: none;
|
|
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 18%, transparent);
|
|
}
|
|
|
|
.app-input[type="date"],
|
|
.app-input[type="datetime-local"],
|
|
.app-input[type="time"] {
|
|
color-scheme: light;
|
|
}
|
|
|
|
html[data-bs-theme="dark"] .app-input[type="date"],
|
|
html[data-bs-theme="dark"] .app-input[type="datetime-local"],
|
|
html[data-bs-theme="dark"] .app-input[type="time"] {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
html[data-bs-theme="dark"] .app-input::-webkit-calendar-picker-indicator {
|
|
filter: invert(0.92) saturate(0.2) brightness(1.05);
|
|
}
|
|
|
|
.app-chip {
|
|
background: var(--surface-secondary);
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.app-chip-active {
|
|
background: var(--accent-primary);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.app-icon-button {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.app-icon-button:hover {
|
|
background: var(--surface-secondary);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.app-text-muted {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.app-text-wrap {
|
|
overflow-wrap: anywhere;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.app-card-caption {
|
|
color: var(--muted-foreground);
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.025em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.app-divider {
|
|
border-color: var(--border-subtle);
|
|
}
|
|
|
|
.app-menu {
|
|
background: var(--surface-elevated);
|
|
border: 1px solid var(--border-subtle);
|
|
box-shadow: var(--shadow-elevated);
|
|
}
|
|
|
|
.app-link-accent {
|
|
color: var(--accent-primary-strong);
|
|
}
|
|
|
|
.app-link-accent:hover {
|
|
color: var(--accent-primary);
|
|
}
|
|
|
|
.app-accent-text {
|
|
color: var(--accent-primary-strong);
|
|
}
|
|
|
|
.app-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 9999px;
|
|
border: 1px solid var(--border-subtle);
|
|
background: var(--surface-secondary);
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.app-badge-accent {
|
|
border-color: color-mix(in srgb, var(--accent-primary) 20%, var(--border-subtle));
|
|
background: color-mix(in srgb, var(--accent-primary) 12%, var(--surface-primary));
|
|
color: var(--accent-primary-strong);
|
|
}
|
|
|
|
.app-status-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: fit-content;
|
|
min-height: 1.75rem;
|
|
flex-shrink: 0;
|
|
border-radius: 9999px;
|
|
padding: 0.25rem 0.75rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.app-avatar-frame {
|
|
border: 1px solid var(--border-subtle);
|
|
background: var(--surface-secondary);
|
|
}
|
|
|
|
.app-avatar-fallback {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid color-mix(in srgb, var(--accent-primary) 18%, var(--border-subtle));
|
|
background: color-mix(in srgb, var(--accent-primary) 18%, var(--surface-secondary));
|
|
color: var(--accent-primary-strong);
|
|
line-height: 1;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.app-counter {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 9999px;
|
|
background: var(--accent-primary);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.app-action-primary {
|
|
border: 1px solid transparent;
|
|
background: var(--accent-primary);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.app-action-primary:hover {
|
|
background: var(--accent-primary-strong);
|
|
}
|
|
|
|
.app-action-secondary {
|
|
border: 1px solid var(--border-strong);
|
|
background: var(--surface-elevated);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.app-action-secondary:hover {
|
|
background: var(--surface-secondary);
|
|
}
|
|
|
|
.app-action-ghost {
|
|
border: 1px solid transparent;
|
|
background: transparent;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.app-action-ghost:hover {
|
|
background: var(--surface-secondary);
|
|
}
|
|
|
|
.app-action-danger {
|
|
border: 1px solid color-mix(in srgb, var(--danger-foreground) 18%, var(--border-strong));
|
|
background: var(--surface-elevated);
|
|
color: #dc2626;
|
|
}
|
|
|
|
.app-action-danger:hover {
|
|
background: var(--danger-soft);
|
|
border-color: color-mix(in srgb, var(--danger-foreground) 24%, var(--border-strong));
|
|
}
|
|
|
|
.app-selected {
|
|
border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, var(--border-subtle));
|
|
background: color-mix(in srgb, var(--accent-primary) 12%, var(--surface-primary));
|
|
color: var(--foreground);
|
|
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 10%, transparent);
|
|
}
|
|
|
|
.app-selected-soft {
|
|
background: color-mix(in srgb, var(--accent-primary) 10%, var(--surface-secondary));
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.app-pill {
|
|
border: 1px solid transparent;
|
|
background: var(--surface-secondary);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.app-pill:hover {
|
|
background: var(--surface-tertiary);
|
|
}
|
|
|
|
.app-pill-active {
|
|
border-color: color-mix(in srgb, var(--accent-primary) 22%, var(--border-subtle));
|
|
background: color-mix(in srgb, var(--accent-primary) 12%, var(--surface-primary));
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.app-pill-count {
|
|
background: color-mix(in srgb, var(--foreground) 8%, var(--surface-secondary));
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.app-pill-count-active {
|
|
background: color-mix(in srgb, var(--accent-primary) 18%, var(--surface-primary));
|
|
color: var(--accent-primary-strong);
|
|
}
|
|
|
|
.app-unread-surface {
|
|
background: color-mix(in srgb, var(--accent-primary) 8%, var(--surface-primary));
|
|
}
|
|
|
|
.app-dot-accent {
|
|
background: var(--accent-primary);
|
|
}
|
|
|
|
.app-feedback-danger {
|
|
border: 1px solid color-mix(in srgb, #ef4444 20%, var(--border-subtle));
|
|
background: var(--danger-soft);
|
|
color: #b91c1c;
|
|
}
|
|
|
|
.app-feedback-success {
|
|
border: 1px solid color-mix(in srgb, #10b981 18%, var(--border-subtle));
|
|
background: var(--success-soft);
|
|
color: #047857;
|
|
}
|
|
|
|
.app-feedback-warning {
|
|
border: 1px solid color-mix(in srgb, #f59e0b 20%, var(--border-subtle));
|
|
background: var(--warning-soft);
|
|
color: #b45309;
|
|
}
|
|
|
|
.reaction-picker-surface {
|
|
border: 1px solid var(--border-subtle);
|
|
background: var(--surface-secondary);
|
|
}
|
|
|
|
.reaction-picker-modal .EmojiPickerReact,
|
|
.reaction-picker-modal aside.EmojiPickerReact {
|
|
--epr-bg-color: var(--surface-secondary);
|
|
--epr-picker-border-color: var(--border-subtle);
|
|
--epr-text-color: var(--muted-foreground);
|
|
--epr-search-input-bg-color: var(--surface-primary);
|
|
--epr-search-input-bg-color-active: var(--surface-primary);
|
|
--epr-search-border-color: var(--border-strong);
|
|
--epr-search-border-color-active: var(--accent-primary);
|
|
--epr-search-input-text-color: var(--foreground);
|
|
--epr-search-input-placeholder-color: var(--muted-foreground);
|
|
--epr-hover-bg-color: color-mix(in srgb, var(--accent-primary) 12%, var(--surface-primary));
|
|
--epr-hover-bg-color-reduced-opacity: color-mix(in srgb, var(--accent-primary) 10%, transparent);
|
|
--epr-focus-bg-color: color-mix(in srgb, var(--accent-primary) 18%, var(--surface-primary));
|
|
--epr-highlight-color: var(--accent-primary);
|
|
--epr-category-label-bg-color: color-mix(in srgb, var(--surface-secondary) 88%, transparent);
|
|
--epr-category-label-text-color: var(--muted-foreground);
|
|
--epr-category-icon-active-color: var(--accent-primary-strong);
|
|
--epr-emoji-variation-picker-bg-color: var(--surface-secondary);
|
|
--epr-preview-border-color: var(--border-subtle);
|
|
--epr-dark-bg-color: var(--surface-secondary);
|
|
--epr-dark-picker-border-color: var(--border-subtle);
|
|
--epr-dark-text-color: var(--muted-foreground);
|
|
--epr-dark-search-input-bg-color: var(--surface-primary);
|
|
--epr-dark-search-input-bg-color-active: var(--surface-primary);
|
|
--epr-dark-category-label-bg-color: color-mix(in srgb, var(--surface-secondary) 88%, transparent);
|
|
--epr-dark-hover-bg-color: color-mix(in srgb, var(--accent-primary) 12%, var(--surface-primary));
|
|
--epr-dark-hover-bg-color-reduced-opacity: color-mix(in srgb, var(--accent-primary) 10%, transparent);
|
|
--epr-dark-focus-bg-color: color-mix(in srgb, var(--accent-primary) 18%, var(--surface-primary));
|
|
--epr-dark-highlight-color: var(--accent-primary);
|
|
--epr-dark-category-icon-active-color: var(--accent-primary-strong);
|
|
border: none !important;
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.reaction-picker-modal .EmojiPickerReact * {
|
|
font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif !important;
|
|
}
|
|
|
|
.reaction-picker-modal .epr-search-container input {
|
|
background: var(--surface-primary) !important;
|
|
border: 1px solid var(--border-strong) !important;
|
|
color: var(--foreground) !important;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
|
|
}
|
|
|
|
.reaction-picker-modal .epr-search-container input::placeholder {
|
|
color: var(--muted-foreground) !important;
|
|
}
|
|
|
|
.reaction-picker-modal .epr-category-label {
|
|
font-size: 0.875rem !important;
|
|
font-weight: 600 !important;
|
|
letter-spacing: 0 !important;
|
|
text-transform: none !important;
|
|
}
|
|
|
|
.app-overlay {
|
|
background: rgba(2, 6, 23, 0.56);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
html[data-bs-theme="dark"] {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
html[data-bs-theme="light"] {
|
|
color-scheme: light;
|
|
}
|
|
|
|
html[data-bs-theme="dark"] .bg-white {
|
|
background-color: var(--surface-primary) !important;
|
|
}
|
|
|
|
html[data-bs-theme="dark"] .bg-gray-50,
|
|
html[data-bs-theme="dark"] .bg-slate-50 {
|
|
background-color: var(--surface-secondary) !important;
|
|
}
|
|
|
|
html[data-bs-theme="dark"] .bg-gray-100,
|
|
html[data-bs-theme="dark"] .bg-slate-100 {
|
|
background-color: var(--surface-tertiary) !important;
|
|
}
|
|
|
|
html[data-bs-theme="dark"] .text-gray-900,
|
|
html[data-bs-theme="dark"] .text-slate-900,
|
|
html[data-bs-theme="dark"] .text-gray-800 {
|
|
color: var(--foreground) !important;
|
|
}
|
|
|
|
html[data-bs-theme="dark"] .text-gray-700,
|
|
html[data-bs-theme="dark"] .text-gray-600,
|
|
html[data-bs-theme="dark"] .text-gray-500,
|
|
html[data-bs-theme="dark"] .text-gray-400,
|
|
html[data-bs-theme="dark"] .text-slate-600,
|
|
html[data-bs-theme="dark"] .text-slate-500,
|
|
html[data-bs-theme="dark"] .text-slate-400 {
|
|
color: var(--muted-foreground) !important;
|
|
}
|
|
|
|
html[data-bs-theme="dark"] .border-gray-100,
|
|
html[data-bs-theme="dark"] .border-gray-200,
|
|
html[data-bs-theme="dark"] .border-gray-300,
|
|
html[data-bs-theme="dark"] .border-slate-100,
|
|
html[data-bs-theme="dark"] .border-slate-200 {
|
|
border-color: var(--border-subtle) !important;
|
|
}
|
|
|
|
html[data-bs-theme="dark"] .ring-gray-100,
|
|
html[data-bs-theme="dark"] .ring-gray-200,
|
|
html[data-bs-theme="dark"] .ring-slate-100,
|
|
html[data-bs-theme="dark"] .ring-slate-200 {
|
|
--tw-ring-color: var(--border-subtle) !important;
|
|
}
|
|
|
|
html[data-bs-theme="dark"] .shadow-sm,
|
|
html[data-bs-theme="dark"] .shadow-lg,
|
|
html[data-bs-theme="dark"] .shadow-xl {
|
|
box-shadow: var(--shadow-card) !important;
|
|
}
|
|
|
|
|
|
/* Скрытые полосы прокрутки везде */
|
|
* {
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE/Edge */
|
|
}
|
|
*::-webkit-scrollbar {
|
|
display: none; /* Chrome/Safari/Opera */
|
|
}
|