feat(sn): CS 기준 UI 통일 및 지도 팝업 표준화
This commit is contained in:
@@ -1,6 +1,27 @@
|
||||
@tailwind components;
|
||||
|
||||
@layer components {
|
||||
/*
|
||||
* 가로 넘침은 잘라내되 스크롤 컨테이너를 만들지 않아 공통 sticky 헤더를 유지한다.
|
||||
* 실제 다열 표의 가로 이동은 StandardDataTable 내부 스크롤 영역이 담당한다.
|
||||
*/
|
||||
.sn-base-layout {
|
||||
overflow-x: clip !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* 다열 표의 최소 폭이 공통 BaseLayout의 flex 항목을 넓히지 않도록 한다.
|
||||
* 화면 전체가 아닌 표 내부에서만 가로 스크롤되며 SN의 모든 일반 페이지에 적용된다.
|
||||
*/
|
||||
.sn-base-layout [class~="group/sidebar-wrapper"] {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.sn-base-layout .flex-1 {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-label;
|
||||
}
|
||||
@@ -57,7 +78,11 @@
|
||||
|
||||
.sn-popup-header-button {
|
||||
@apply border px-3 py-1 text-[1.05rem] text-primary-foreground;
|
||||
border-color: color-mix(in srgb, var(--primary-foreground) 30%, transparent);
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--primary-foreground) 30%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.sn-popup-section {
|
||||
@@ -88,10 +113,9 @@
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
/* 부모 조회 화면의 날짜 입력 규격과 등록 팝업의 준설일자 입력을 동일하게 유지한다. */
|
||||
.sn-dredging-register .sn-dredging-date-input {
|
||||
color: #666 !important;
|
||||
font-size: 12.5px !important;
|
||||
/* 준설 팝업 날짜 입력은 부모 준설목록의 날짜 입력 글자 크기와 동일하게 유지한다. */
|
||||
.sn-dredging-register .input-date-picker {
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
|
||||
/* 준설사진 파일명은 메타정보 표에서만 표시하고 공통 업로드 목록의 중복 표출을 숨긴다. */
|
||||
@@ -161,7 +185,11 @@
|
||||
}
|
||||
|
||||
.sn-popup-danger-button-sm:hover {
|
||||
background-color: color-mix(in srgb, var(--destructive) 10%, var(--background));
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--destructive) 10%,
|
||||
var(--background)
|
||||
);
|
||||
}
|
||||
|
||||
.sn-popup-primary-button-sm {
|
||||
@@ -216,7 +244,11 @@
|
||||
}
|
||||
|
||||
.sn-popup-grid-row-hover:hover {
|
||||
background-color: color-mix(in srgb, var(--secondary) 60%, var(--background));
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--secondary) 60%,
|
||||
var(--background)
|
||||
);
|
||||
}
|
||||
|
||||
.sn-popup-grid-row-selected {
|
||||
@@ -244,152 +276,156 @@
|
||||
}
|
||||
|
||||
.form-section-title {
|
||||
@apply mt-4 border border-border bg-[#eaf3fb] p-2 text-center text-xl font-medium text-[#647784];
|
||||
@apply mt-4 border border-border bg-secondary p-2 text-center text-xl font-medium text-label;
|
||||
}
|
||||
|
||||
[data-theme="black"] {
|
||||
.card {
|
||||
color: #fff;
|
||||
background-color: #0a0a0a !important;
|
||||
color: var(--card-foreground);
|
||||
background-color: var(--card) !important;
|
||||
}
|
||||
form {
|
||||
color: rgb(255 255 255);
|
||||
color: var(--foreground);
|
||||
}
|
||||
label {
|
||||
color: rgb(241, 241, 241);
|
||||
color: var(--label);
|
||||
}
|
||||
input {
|
||||
height: 3.2rem;
|
||||
background-color: #1a1a1a;
|
||||
border: 1px solid #262626;
|
||||
background-color: var(--field);
|
||||
border: 1px solid var(--input);
|
||||
border-radius: 4px;
|
||||
}
|
||||
input.text-gray-600 {
|
||||
color: #f1f1f1;
|
||||
input.text-label {
|
||||
color: var(--label);
|
||||
}
|
||||
button[role="combobox"] {
|
||||
color: #f1f1f1;
|
||||
background-color: rgb(26, 26, 26);
|
||||
color: var(--foreground);
|
||||
background-color: var(--field);
|
||||
}
|
||||
div [role="tablist"] {
|
||||
border: unset;
|
||||
gap: 4px;
|
||||
}
|
||||
.tabs-trigger[data-state="inactive"] {
|
||||
color: #a4b7bf;
|
||||
background: #55595d;
|
||||
color: var(--muted-foreground);
|
||||
background: var(--muted);
|
||||
}
|
||||
.tabs-trigger[data-state="inactive"]:hover {
|
||||
color: #6bbaff;
|
||||
background: #4c4f52;
|
||||
color: var(--accent-foreground);
|
||||
background: var(--accent);
|
||||
}
|
||||
.card-border {
|
||||
box-shadow: 0 0 10px -1px #0000000f;
|
||||
border: 1px solid #393939;
|
||||
@apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
|
||||
@apply border-border bg-card shadow-blur;
|
||||
}
|
||||
a[aria-current="page"] {
|
||||
background-color: rgb(32, 148, 250);
|
||||
color: #000;
|
||||
background-color: var(--primary);
|
||||
color: var(--primary-foreground);
|
||||
}
|
||||
.card-header {
|
||||
@apply border-b-[#3f4042];
|
||||
@apply border-b-border;
|
||||
}
|
||||
.form-section-title {
|
||||
@apply bg-[#5e7b9c] text-[#fff];
|
||||
@apply bg-secondary text-label;
|
||||
}
|
||||
.gis-layer-panel {
|
||||
background: #111214;
|
||||
border-right-color: #2f3136;
|
||||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
|
||||
background: var(--background);
|
||||
border-right-color: var(--border);
|
||||
box-shadow: 0 0 0 1px var(--border);
|
||||
}
|
||||
.gis-layer-panel-title {
|
||||
color: #f3f4f6;
|
||||
color: var(--foreground);
|
||||
}
|
||||
.gis-layer-panel hr {
|
||||
border-color: #2f3136;
|
||||
border-color: var(--border);
|
||||
}
|
||||
.gis-layer-row {
|
||||
color: #e5e7eb;
|
||||
color: var(--foreground);
|
||||
}
|
||||
.gis-layer-row:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: var(--accent);
|
||||
}
|
||||
.gis-layer-row span,
|
||||
.gis-layer-row label {
|
||||
color: #e5e7eb !important;
|
||||
color: var(--foreground) !important;
|
||||
}
|
||||
.gis-layer-row input[type="checkbox"] {
|
||||
accent-color: #c026d3;
|
||||
accent-color: var(--primary);
|
||||
}
|
||||
.gis-layer-action-button {
|
||||
background: #1a1c20;
|
||||
border-color: #3b82f6;
|
||||
color: #cfe3ff;
|
||||
background: var(--background);
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
.gis-layer-action-button:hover {
|
||||
background: #23262b;
|
||||
background: var(--accent);
|
||||
}
|
||||
.gis-layer-setting {
|
||||
background: #111214;
|
||||
border-top: 1px solid #2f3136;
|
||||
background: var(--background);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.gis-layer-toggle {
|
||||
background: #111214;
|
||||
border-color: #2f3136;
|
||||
color: #f3f4f6;
|
||||
background: var(--background);
|
||||
border-color: var(--border);
|
||||
color: var(--foreground);
|
||||
}
|
||||
.gis-layer-toggle:hover {
|
||||
background: #1a1c20;
|
||||
background: var(--accent);
|
||||
}
|
||||
input[type="file"] {
|
||||
background-color: #1a1a1a;
|
||||
border-color: #262626;
|
||||
color: #f1f1f1;
|
||||
background-color: var(--field);
|
||||
border-color: var(--input);
|
||||
color: var(--foreground);
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="blue"] {
|
||||
.card-border {
|
||||
@apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
|
||||
@apply border-border bg-card;
|
||||
}
|
||||
.card-header {
|
||||
@apply border-b-[#3f4042];
|
||||
@apply border-b-border;
|
||||
}
|
||||
.form-section-title {
|
||||
@apply bg-[#eaf3fb] text-[#647784];
|
||||
@apply bg-secondary text-label;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="green"] {
|
||||
.card-border {
|
||||
@apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
|
||||
@apply border-border bg-card;
|
||||
}
|
||||
.card-header {
|
||||
@apply border-b-[#3f4042];
|
||||
@apply border-b-border;
|
||||
}
|
||||
.form-section-title {
|
||||
@apply bg-[#ebf7f7] text-[#64908f];
|
||||
@apply bg-secondary text-label;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="red"] {
|
||||
.card-border {
|
||||
@apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
|
||||
@apply border-border bg-card;
|
||||
}
|
||||
.card-header {
|
||||
@apply border-b-[#3f4042];
|
||||
@apply border-b-border;
|
||||
}
|
||||
.form-section-title {
|
||||
@apply bg-[#f6f6f9] text-[#808080];
|
||||
@apply bg-secondary text-label;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* `I/I 분석 > 침입수 분석결과`는 나중에 다시 사용할 수 있도록 라우트는 유지하고 LNB에서만 임시 숨김 처리한다. */
|
||||
/* `I/I 분석 > 침입수 분석결과`, `RDII 분석결과`는 지도 popup 흐름으로 대체하고 레거시 라우트는 유지한 채 LNB에서만 숨긴다. */
|
||||
[data-sidebar="menu"] > *:nth-child(2) [data-sidebar="menu-sub"] > li:nth-child(2) {
|
||||
[data-sidebar="menu"]
|
||||
> *:nth-child(2)
|
||||
[data-sidebar="menu-sub"]
|
||||
> li:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
[data-sidebar="menu"] > *:nth-child(2) [data-sidebar="menu-sub"] > li:nth-child(4) {
|
||||
[data-sidebar="menu"]
|
||||
> *:nth-child(2)
|
||||
[data-sidebar="menu-sub"]
|
||||
> li:nth-child(4) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user