This commit is contained in:
wypark
@@ -1,59 +1,84 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
|
||||
|
||||
:root {
|
||||
--color-page: #f5f5f7;
|
||||
--color-surface: rgba(255, 255, 255, 0.78);
|
||||
--color-surface-strong: #ffffff;
|
||||
--color-line: rgba(0, 0, 0, 0.08);
|
||||
--color-text: #1d1d1f;
|
||||
--color-text-muted: #6e6e73;
|
||||
--color-text-subtle: #86868b;
|
||||
--color-accent: #007aff;
|
||||
--color-accent-soft: rgba(0, 122, 255, 0.1);
|
||||
--shadow-panel: 0 18px 50px rgba(0, 0, 0, 0.08);
|
||||
--shadow-card: 0 10px 28px rgba(0, 0, 0, 0.06);
|
||||
--background: var(--color-page);
|
||||
--foreground: var(--color-text);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-page: #0b0b0c;
|
||||
--color-surface: rgba(28, 28, 30, 0.72);
|
||||
--color-surface-strong: #1c1c1e;
|
||||
--color-line: rgba(255, 255, 255, 0.1);
|
||||
--color-text: #f5f5f7;
|
||||
--color-text-muted: #a1a1a6;
|
||||
--color-text-subtle: #8e8e93;
|
||||
--color-accent: #0a84ff;
|
||||
--color-accent-soft: rgba(10, 132, 255, 0.16);
|
||||
--shadow-panel: 0 18px 50px rgba(0, 0, 0, 0.36);
|
||||
--shadow-card: 0 10px 28px rgba(0, 0, 0, 0.28);
|
||||
--background: var(--color-page);
|
||||
--foreground: var(--color-text);
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family:
|
||||
--font-apple-sans:
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"SF Pro Display",
|
||||
"SF Pro Text",
|
||||
"Apple SD Gothic Neo",
|
||||
"Helvetica Neue",
|
||||
Pretendard,
|
||||
"Noto Sans KR",
|
||||
system-ui,
|
||||
sans-serif;
|
||||
--font-apple-mono:
|
||||
"SF Mono",
|
||||
ui-monospace,
|
||||
Menlo,
|
||||
Monaco,
|
||||
Consolas,
|
||||
"Liberation Mono",
|
||||
monospace;
|
||||
--color-page: #f5f5f7;
|
||||
--color-surface: rgba(255, 255, 255, 0.72);
|
||||
--color-surface-strong: #ffffff;
|
||||
--color-control: rgba(255, 255, 255, 0.66);
|
||||
--color-line: rgba(0, 0, 0, 0.1);
|
||||
--color-text: #1d1d1f;
|
||||
--color-text-muted: #6e6e73;
|
||||
--color-text-subtle: #86868b;
|
||||
--color-accent: #0066cc;
|
||||
--color-accent-hover: #0071e3;
|
||||
--color-accent-soft: rgba(0, 102, 204, 0.1);
|
||||
--color-danger-soft: rgba(255, 59, 48, 0.1);
|
||||
--shadow-panel: 0 22px 70px rgba(0, 0, 0, 0.1);
|
||||
--shadow-card: 0 14px 34px rgba(0, 0, 0, 0.065);
|
||||
--shadow-control: 0 8px 24px rgba(0, 0, 0, 0.08);
|
||||
--focus-ring: 0 0 0 4px rgba(0, 102, 204, 0.14);
|
||||
--background: var(--color-page);
|
||||
--foreground: var(--color-text);
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-apple-sans);
|
||||
--font-mono: var(--font-apple-mono);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
--color-page: #0b0b0c;
|
||||
--color-surface: rgba(28, 28, 30, 0.72);
|
||||
--color-surface-strong: #1c1c1e;
|
||||
--color-control: rgba(44, 44, 46, 0.74);
|
||||
--color-line: rgba(255, 255, 255, 0.12);
|
||||
--color-text: #f5f5f7;
|
||||
--color-text-muted: #a1a1a6;
|
||||
--color-text-subtle: #8e8e93;
|
||||
--color-accent: #2997ff;
|
||||
--color-accent-hover: #46a6ff;
|
||||
--color-accent-soft: rgba(41, 151, 255, 0.16);
|
||||
--color-danger-soft: rgba(255, 69, 58, 0.16);
|
||||
--shadow-panel: 0 22px 70px rgba(0, 0, 0, 0.42);
|
||||
--shadow-card: 0 14px 34px rgba(0, 0, 0, 0.3);
|
||||
--shadow-control: 0 10px 28px rgba(0, 0, 0, 0.32);
|
||||
--focus-ring: 0 0 0 4px rgba(41, 151, 255, 0.18);
|
||||
--background: var(--color-page);
|
||||
--foreground: var(--color-text);
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-apple-sans);
|
||||
font-feature-settings: "kern";
|
||||
letter-spacing: 0;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
::selection {
|
||||
@@ -61,145 +86,156 @@ body {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/* Keep older Tailwind-only surfaces aligned with the app color tokens. */
|
||||
.bg-white {
|
||||
background-color: var(--color-surface-strong);
|
||||
}
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp,
|
||||
.tabular-nums {
|
||||
font-family: var(--font-apple-mono);
|
||||
}
|
||||
|
||||
.bg-gray-50,
|
||||
.bg-gray-100 {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
|
||||
.bg-blue-50,
|
||||
.bg-blue-100 {
|
||||
background-color: rgba(10, 132, 255, 0.14);
|
||||
}
|
||||
/* Keep older Tailwind-only surfaces aligned with the app color tokens. */
|
||||
html[data-theme="dark"] .bg-white {
|
||||
background-color: var(--color-surface-strong);
|
||||
}
|
||||
|
||||
.bg-red-50,
|
||||
.bg-red-100 {
|
||||
background-color: rgba(255, 69, 58, 0.13);
|
||||
}
|
||||
html[data-theme="dark"] .bg-gray-50,
|
||||
html[data-theme="dark"] .bg-gray-100 {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.bg-green-100 {
|
||||
background-color: rgba(48, 209, 88, 0.14);
|
||||
}
|
||||
html[data-theme="dark"] .bg-blue-50,
|
||||
html[data-theme="dark"] .bg-blue-100 {
|
||||
background-color: rgba(10, 132, 255, 0.14);
|
||||
}
|
||||
|
||||
.border-gray-100,
|
||||
.border-gray-200,
|
||||
.border-gray-300 {
|
||||
border-color: var(--color-line);
|
||||
}
|
||||
html[data-theme="dark"] .bg-red-50,
|
||||
html[data-theme="dark"] .bg-red-100 {
|
||||
background-color: rgba(255, 69, 58, 0.13);
|
||||
}
|
||||
|
||||
.border-blue-100 {
|
||||
border-color: rgba(10, 132, 255, 0.28);
|
||||
}
|
||||
html[data-theme="dark"] .bg-green-100 {
|
||||
background-color: rgba(48, 209, 88, 0.14);
|
||||
}
|
||||
|
||||
.border-red-100 {
|
||||
border-color: rgba(255, 105, 97, 0.28);
|
||||
}
|
||||
html[data-theme="dark"] .border-gray-100,
|
||||
html[data-theme="dark"] .border-gray-200,
|
||||
html[data-theme="dark"] .border-gray-300 {
|
||||
border-color: var(--color-line);
|
||||
}
|
||||
|
||||
.text-gray-950,
|
||||
.text-gray-900,
|
||||
.text-gray-800,
|
||||
.text-gray-700 {
|
||||
color: var(--color-text);
|
||||
}
|
||||
html[data-theme="dark"] .border-blue-100 {
|
||||
border-color: rgba(10, 132, 255, 0.28);
|
||||
}
|
||||
|
||||
.text-gray-600,
|
||||
.text-gray-500 {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
html[data-theme="dark"] .border-red-100 {
|
||||
border-color: rgba(255, 105, 97, 0.28);
|
||||
}
|
||||
|
||||
.text-gray-400,
|
||||
.text-gray-300 {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
html[data-theme="dark"] .text-gray-950,
|
||||
html[data-theme="dark"] .text-gray-900,
|
||||
html[data-theme="dark"] .text-gray-800,
|
||||
html[data-theme="dark"] .text-gray-700 {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.text-blue-700,
|
||||
.text-blue-600 {
|
||||
color: #8ecbff;
|
||||
}
|
||||
html[data-theme="dark"] .text-gray-600,
|
||||
html[data-theme="dark"] .text-gray-500 {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.text-red-950,
|
||||
.text-red-700,
|
||||
.text-red-600 {
|
||||
color: #ffb4ad;
|
||||
}
|
||||
html[data-theme="dark"] .text-gray-400,
|
||||
html[data-theme="dark"] .text-gray-300 {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
|
||||
.text-green-600 {
|
||||
color: #8ff0a4;
|
||||
}
|
||||
html[data-theme="dark"] .text-blue-700,
|
||||
html[data-theme="dark"] .text-blue-600 {
|
||||
color: #8ecbff;
|
||||
}
|
||||
|
||||
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: var(--color-line);
|
||||
}
|
||||
html[data-theme="dark"] .text-red-950,
|
||||
html[data-theme="dark"] .text-red-700,
|
||||
html[data-theme="dark"] .text-red-600 {
|
||||
color: #ffb4ad;
|
||||
}
|
||||
|
||||
.hover\:bg-white:hover,
|
||||
.hover\:bg-gray-50:hover,
|
||||
.hover\:bg-gray-100:hover,
|
||||
.hover\:bg-gray-200:hover,
|
||||
.focus\:bg-white:focus {
|
||||
background-color: rgba(255, 255, 255, 0.11);
|
||||
}
|
||||
html[data-theme="dark"] .text-green-600 {
|
||||
color: #8ff0a4;
|
||||
}
|
||||
|
||||
.hover\:bg-blue-50:hover {
|
||||
background-color: rgba(10, 132, 255, 0.16);
|
||||
}
|
||||
html[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: var(--color-line);
|
||||
}
|
||||
|
||||
.hover\:bg-red-50:hover {
|
||||
background-color: rgba(255, 69, 58, 0.16);
|
||||
}
|
||||
html[data-theme="dark"] .hover\:bg-white:hover,
|
||||
html[data-theme="dark"] .hover\:bg-gray-50:hover,
|
||||
html[data-theme="dark"] .hover\:bg-gray-100:hover,
|
||||
html[data-theme="dark"] .hover\:bg-gray-200:hover,
|
||||
html[data-theme="dark"] .focus\:bg-white:focus {
|
||||
background-color: rgba(255, 255, 255, 0.11);
|
||||
}
|
||||
|
||||
.hover\:text-gray-600:hover,
|
||||
.hover\:text-gray-700:hover,
|
||||
.hover\:text-gray-800:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
html[data-theme="dark"] .hover\:bg-blue-50:hover {
|
||||
background-color: rgba(10, 132, 255, 0.16);
|
||||
}
|
||||
|
||||
.placeholder\:text-gray-300::placeholder,
|
||||
.placeholder\:text-gray-400::placeholder {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
html[data-theme="dark"] .hover\:bg-red-50:hover {
|
||||
background-color: rgba(255, 69, 58, 0.16);
|
||||
}
|
||||
|
||||
.disabled\:bg-gray-50:disabled,
|
||||
.disabled\:bg-gray-300:disabled,
|
||||
.disabled\:bg-gray-400:disabled {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
html[data-theme="dark"] .hover\:text-gray-600:hover,
|
||||
html[data-theme="dark"] .hover\:text-gray-700:hover,
|
||||
html[data-theme="dark"] .hover\:text-gray-800:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]),
|
||||
textarea,
|
||||
select {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
border-color: var(--color-line);
|
||||
color: var(--color-text);
|
||||
}
|
||||
html[data-theme="dark"] .placeholder\:text-gray-300::placeholder,
|
||||
html[data-theme="dark"] .placeholder\:text-gray-400::placeholder {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]):focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
background-color: rgba(255, 255, 255, 0.11);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
html[data-theme="dark"] .disabled\:bg-gray-50:disabled,
|
||||
html[data-theme="dark"] .disabled\:bg-gray-300:disabled,
|
||||
html[data-theme="dark"] .disabled\:bg-gray-400:disabled {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
|
||||
html[data-theme="dark"] textarea,
|
||||
html[data-theme="dark"] select {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
border-color: var(--color-line);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
option {
|
||||
background-color: var(--color-surface-strong);
|
||||
color: var(--color-text);
|
||||
}
|
||||
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):focus,
|
||||
html[data-theme="dark"] textarea:focus,
|
||||
html[data-theme="dark"] select:focus {
|
||||
background-color: rgba(255, 255, 255, 0.11);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.shadow-xl,
|
||||
.shadow-md,
|
||||
.shadow-sm {
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
html[data-theme="dark"] input::placeholder,
|
||||
html[data-theme="dark"] textarea::placeholder {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] option {
|
||||
background-color: var(--color-surface-strong);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .shadow-xl,
|
||||
html[data-theme="dark"] .shadow-md,
|
||||
html[data-theme="dark"] .shadow-sm {
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.w-md-editor {
|
||||
@@ -213,14 +249,12 @@ body {
|
||||
background-color: #f9fafb !important;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.w-md-editor {
|
||||
background-color: var(--color-surface-strong) !important;
|
||||
border-color: var(--color-line) !important;
|
||||
}
|
||||
|
||||
.w-md-editor-toolbar {
|
||||
background-color: rgba(255, 255, 255, 0.08) !important;
|
||||
border-color: var(--color-line) !important;
|
||||
}
|
||||
html[data-theme="dark"] .w-md-editor {
|
||||
background-color: var(--color-surface-strong) !important;
|
||||
border-color: var(--color-line) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .w-md-editor-toolbar {
|
||||
background-color: rgba(255, 255, 255, 0.08) !important;
|
||||
border-color: var(--color-line) !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user