dm: theme css 추가

This commit is contained in:
2026-06-19 16:44:30 +09:00
parent 3451b19b96
commit bdd6c7b804
7 changed files with 183 additions and 64 deletions
+1
View File
@@ -0,0 +1 @@
declare module "*.css";
+4
View File
@@ -1,5 +1,9 @@
import "./styles/base.css";
import "./styles/components.css";
import "./styles/components-black.css";
import "./styles/components-blue.css";
import "./styles/components-green.css";
import "./styles/components-red.css";
import "@fontsource-variable/noto-sans-kr";
import { AppProvider } from "./providers";
@@ -0,0 +1,85 @@
@tailwind components;
@layer components {
.card {
@apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
}
.card-border {
@apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
}
.card-header {
@apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
}
.card-footer {
@apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
}
[data-theme="black"] {
.card-border {
@apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
}
.card-header {
@apply border-b-[#3f4042];
}
.gis-layer-panel {
background: #111214;
border-right-color: #2f3136;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.gis-layer-panel-title {
color: #f3f4f6;
}
.gis-layer-panel hr {
border-color: #2f3136;
}
.gis-layer-row {
color: #e5e7eb;
}
.gis-layer-row:hover {
background: rgba(255, 255, 255, 0.08);
}
.gis-layer-row span,
.gis-layer-row label {
color: #e5e7eb !important;
}
.gis-layer-row input[type="checkbox"] {
accent-color: #c026d3;
}
.gis-layer-action-button {
background: #1a1c20;
border-color: #3b82f6;
color: #cfe3ff;
}
.gis-layer-action-button:hover {
background: #23262b;
}
.gis-layer-setting {
background: #111214;
border-top: 1px solid #2f3136;
}
.gis-layer-toggle {
background: #111214;
border-color: #2f3136;
color: #f3f4f6;
}
.gis-layer-toggle:hover {
background: #1a1c20;
}
}
input[type="file"] {
@apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
}
}
@@ -0,0 +1,31 @@
@tailwind components;
@layer components {
.card {
@apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
}
.card-border {
@apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
}
.card-header {
@apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
}
.card-footer {
@apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
}
[data-theme="blue"] {
.card-border {
@apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
}
.card-header {
@apply border-b-[#3f4042];
}
}
input[type="file"] {
@apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
}
}
@@ -0,0 +1,31 @@
@tailwind components;
@layer components {
.card {
@apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
}
.card-border {
@apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
}
.card-header {
@apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
}
.card-footer {
@apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
}
[data-theme="green"] {
.card-border {
@apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
}
.card-header {
@apply border-b-[#3f4042];
}
}
input[type="file"] {
@apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
}
}
+30
View File
@@ -0,0 +1,30 @@
@tailwind components;
@layer components {
.card {
@apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
}
.card-border {
@apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
}
.card-header {
@apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
}
.card-footer {
@apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
}
[data-theme="red"] {
.card-border {
@apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
}
.card-header {
@apply border-b-[#3f4042];
}
}
input[type="file"] {
@apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
}
}
+1 -64
View File
@@ -14,70 +14,7 @@
@apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
}
[data-theme="black"] {
.card-border {
@apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
}
.card-header {
@apply border-b-[#3f4042];
}
.gis-layer-panel {
background: #111214;
border-right-color: #2f3136;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.gis-layer-panel-title {
color: #f3f4f6;
}
.gis-layer-panel hr {
border-color: #2f3136;
}
.gis-layer-row {
color: #e5e7eb;
}
.gis-layer-row:hover {
background: rgba(255, 255, 255, 0.08);
}
.gis-layer-row span,
.gis-layer-row label {
color: #e5e7eb !important;
}
.gis-layer-row input[type="checkbox"] {
accent-color: #c026d3;
}
.gis-layer-action-button {
background: #1a1c20;
border-color: #3b82f6;
color: #cfe3ff;
}
.gis-layer-action-button:hover {
background: #23262b;
}
.gis-layer-setting {
background: #111214;
border-top: 1px solid #2f3136;
}
.gis-layer-toggle {
background: #111214;
border-color: #2f3136;
color: #f3f4f6;
}
.gis-layer-toggle:hover {
background: #1a1c20;
}
}
input[type="file"] {
@apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;