From bdd6c7b804d10f3eadf437058c2f048669b5a06f Mon Sep 17 00:00:00 2001 From: ljpark Date: Fri, 19 Jun 2026 16:44:30 +0900 Subject: [PATCH] =?UTF-8?q?dm:=20theme=20css=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wr/global.d.ts | 1 + apps/wr/src/app/index.tsx | 4 + apps/wr/src/app/styles/components-black.css | 85 +++++++++++++++++++++ apps/wr/src/app/styles/components-blue.css | 31 ++++++++ apps/wr/src/app/styles/components-green.css | 31 ++++++++ apps/wr/src/app/styles/components-red.css | 30 ++++++++ apps/wr/src/app/styles/components.css | 65 +--------------- 7 files changed, 183 insertions(+), 64 deletions(-) create mode 100644 apps/wr/global.d.ts create mode 100644 apps/wr/src/app/styles/components-black.css create mode 100644 apps/wr/src/app/styles/components-blue.css create mode 100644 apps/wr/src/app/styles/components-green.css create mode 100644 apps/wr/src/app/styles/components-red.css diff --git a/apps/wr/global.d.ts b/apps/wr/global.d.ts new file mode 100644 index 000000000..cbe652dbe --- /dev/null +++ b/apps/wr/global.d.ts @@ -0,0 +1 @@ +declare module "*.css"; diff --git a/apps/wr/src/app/index.tsx b/apps/wr/src/app/index.tsx index 692b55ef0..4cf2ad5fa 100644 --- a/apps/wr/src/app/index.tsx +++ b/apps/wr/src/app/index.tsx @@ -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"; diff --git a/apps/wr/src/app/styles/components-black.css b/apps/wr/src/app/styles/components-black.css new file mode 100644 index 000000000..fd651fe6c --- /dev/null +++ b/apps/wr/src/app/styles/components-black.css @@ -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; + } +} diff --git a/apps/wr/src/app/styles/components-blue.css b/apps/wr/src/app/styles/components-blue.css new file mode 100644 index 000000000..d83d93ca0 --- /dev/null +++ b/apps/wr/src/app/styles/components-blue.css @@ -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; + } +} diff --git a/apps/wr/src/app/styles/components-green.css b/apps/wr/src/app/styles/components-green.css new file mode 100644 index 000000000..b4b4b3154 --- /dev/null +++ b/apps/wr/src/app/styles/components-green.css @@ -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; + } +} diff --git a/apps/wr/src/app/styles/components-red.css b/apps/wr/src/app/styles/components-red.css new file mode 100644 index 000000000..6d626d44d --- /dev/null +++ b/apps/wr/src/app/styles/components-red.css @@ -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; + } +} diff --git a/apps/wr/src/app/styles/components.css b/apps/wr/src/app/styles/components.css index fd651fe6c..cc6c1a46e 100644 --- a/apps/wr/src/app/styles/components.css +++ b/apps/wr/src/app/styles/components.css @@ -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;