489 lines
12 KiB
CSS
489 lines
12 KiB
CSS
@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;
|
|
}
|
|
.card-border {
|
|
@apply border border-border bg-background shadow-blur;
|
|
}
|
|
.card-header {
|
|
@apply -mx-[0.6rem] flex items-center justify-between border-b border-b-border p-4;
|
|
}
|
|
.card-footer {
|
|
@apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-border py-4;
|
|
}
|
|
|
|
input[type="file"] {
|
|
@apply h-[40px] w-[200px] cursor-pointer rounded-md border border-input bg-field px-3 py-2 text-sm text-foreground;
|
|
}
|
|
|
|
/*
|
|
* SN의 일반 콤보박스는 블랙모드에서 공통 form 색상으로 통일한다.
|
|
* 비활성 콤보만 field 색상을 사용해 입력 가능 여부를 시각적으로 구분한다.
|
|
*/
|
|
[data-theme="black"]
|
|
:where(.selectbox_trigger, button[role="combobox"], select) {
|
|
background-color: var(--form) !important;
|
|
color: var(--foreground) !important;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
[data-theme="black"]
|
|
:where(
|
|
button[role="combobox"]:disabled,
|
|
button[role="combobox"][aria-disabled="true"],
|
|
button[role="combobox"][data-disabled],
|
|
select:disabled
|
|
) {
|
|
background-color: var(--field) !important;
|
|
color: var(--muted-foreground) !important;
|
|
}
|
|
|
|
[data-theme="black"] select option {
|
|
background-color: var(--popover);
|
|
color: var(--popover-foreground);
|
|
}
|
|
|
|
/* 입력 가능한 텍스트 계열 필드도 콤보와 동일한 form 색상을 사용한다. */
|
|
[data-theme="black"]
|
|
:where(
|
|
input:not([type]),
|
|
input[type="text"],
|
|
input[type="search"],
|
|
input[type="email"],
|
|
input[type="tel"],
|
|
input[type="url"],
|
|
input[type="password"],
|
|
input[type="number"],
|
|
input[type="date"],
|
|
input[type="datetime-local"],
|
|
input[type="month"],
|
|
input[type="week"],
|
|
input[type="time"],
|
|
textarea
|
|
) {
|
|
background-color: var(--form) !important;
|
|
color: var(--foreground) !important;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
[data-theme="black"]
|
|
:where(
|
|
input:disabled,
|
|
input[readonly],
|
|
textarea:disabled,
|
|
textarea[readonly]
|
|
) {
|
|
background-color: var(--field) !important;
|
|
color: var(--muted-foreground) !important;
|
|
}
|
|
|
|
.sn-popup-page {
|
|
@apply flex h-screen min-w-0 flex-col overflow-hidden bg-background text-foreground;
|
|
}
|
|
|
|
.sn-popup-modal-page {
|
|
@apply flex h-screen items-start justify-center bg-container px-3 py-3 text-foreground;
|
|
}
|
|
|
|
.sn-popup-shell {
|
|
@apply w-full overflow-hidden rounded-[12px] border border-border bg-background;
|
|
}
|
|
|
|
.sn-popup-modal-shell {
|
|
@apply w-full overflow-hidden rounded-[12px] border border-border bg-background;
|
|
}
|
|
|
|
.sn-popup-header {
|
|
@apply flex min-h-[44px] items-center justify-between border-b border-border bg-primary px-5 py-3;
|
|
}
|
|
|
|
.sn-popup-modal-header {
|
|
@apply flex h-[44px] items-center border-b border-border bg-secondary px-[18px];
|
|
}
|
|
|
|
.sn-popup-title {
|
|
@apply text-[1.45rem] font-semibold text-primary-foreground;
|
|
}
|
|
|
|
.sn-popup-modal-title {
|
|
@apply text-[1.35rem] font-semibold tracking-[-0.01em] text-foreground;
|
|
}
|
|
|
|
.sn-popup-header-link {
|
|
@apply mr-3 text-[1.05rem] font-medium text-primary-foreground hover:text-primary-foreground;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.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
|
|
);
|
|
}
|
|
|
|
.sn-popup-section {
|
|
@apply flex min-h-0 flex-1 flex-col overflow-hidden p-4;
|
|
}
|
|
|
|
/* 부모 업무화면의 10px rem 기준과 동일한 가독성을 준설 등록 팝업에도 적용한다. */
|
|
.sn-dredging-register {
|
|
font-size: 1.3rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.sn-dredging-register .text-xs {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.sn-dredging-register .text-sm,
|
|
.sn-dredging-register button,
|
|
.sn-dredging-register input {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.sn-dredging-register .text-base {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.sn-dredging-register .text-xl {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
/* 준설 팝업 날짜 입력은 부모 준설목록의 날짜 입력 글자 크기와 동일하게 유지한다. */
|
|
.sn-dredging-register .input-date-picker {
|
|
font-size: 1.25rem !important;
|
|
}
|
|
|
|
/* 준설사진 파일명은 메타정보 표에서만 표시하고 공통 업로드 목록의 중복 표출을 숨긴다. */
|
|
.sn-dredging-photo-upload [aria-description="content file holder"] {
|
|
display: none;
|
|
}
|
|
|
|
/* 등록 팝업의 첨부영역을 한 줄 높이로 압축해 하단 지도 가용 높이를 확보한다. */
|
|
.sn-dredging-photo-upload .fileup_root {
|
|
@apply rounded-none bg-transparent p-0;
|
|
}
|
|
|
|
.sn-dredging-photo-upload .fileup_panel {
|
|
@apply min-h-10 flex-row gap-1 py-1;
|
|
}
|
|
|
|
.sn-dredging-photo-upload .fileup_hint {
|
|
@apply mb-0;
|
|
}
|
|
|
|
.sn-dredging-photo-upload .fileup_meta {
|
|
@apply ml-1;
|
|
}
|
|
|
|
.sn-popup-filter-panel {
|
|
@apply grid grid-cols-1 gap-3 border-b border-border bg-secondary pb-4;
|
|
}
|
|
|
|
.sn-popup-filter-panel-compact {
|
|
@apply border-b border-border bg-secondary pb-3;
|
|
}
|
|
|
|
.sn-popup-field {
|
|
@apply block min-w-0;
|
|
}
|
|
|
|
.sn-popup-field-label {
|
|
@apply mb-1 text-[1.05rem] font-medium text-label;
|
|
}
|
|
|
|
.sn-popup-input {
|
|
@apply h-10 w-full rounded-md border border-input bg-field px-3 text-[1.05rem] text-foreground outline-none placeholder:text-placeholder focus:ring-2 focus:ring-ring;
|
|
}
|
|
|
|
.sn-popup-input-sm {
|
|
@apply h-[32px] rounded-[6px] border border-input bg-field px-[10px] text-[1.02rem] font-medium text-foreground outline-none transition placeholder:text-placeholder focus:ring-2 focus:ring-ring;
|
|
}
|
|
|
|
.sn-popup-actions {
|
|
@apply flex flex-wrap items-end justify-end gap-2;
|
|
}
|
|
|
|
.sn-popup-primary-button {
|
|
@apply h-10 px-5 !text-[1.05rem];
|
|
}
|
|
|
|
.sn-popup-secondary-button {
|
|
@apply h-10 rounded-md border border-input bg-background px-5 text-[1.05rem] text-foreground hover:bg-accent;
|
|
}
|
|
|
|
.sn-popup-secondary-button-sm {
|
|
@apply h-9 rounded-md border border-input bg-background px-4 text-[1.05rem] text-foreground hover:bg-accent;
|
|
}
|
|
|
|
.sn-popup-danger-button-sm {
|
|
@apply h-9 rounded-md border border-destructive bg-background px-4 text-[1.05rem] text-destructive;
|
|
}
|
|
|
|
.sn-popup-danger-button-sm:hover {
|
|
background-color: color-mix(
|
|
in srgb,
|
|
var(--destructive) 10%,
|
|
var(--background)
|
|
);
|
|
}
|
|
|
|
.sn-popup-primary-button-sm {
|
|
@apply h-[32px] min-w-[56px] rounded-sm bg-primary px-0 py-2 text-sm font-medium text-primary-foreground hover:opacity-90;
|
|
}
|
|
|
|
.sn-popup-status-bar {
|
|
@apply border-b border-border bg-secondary px-5 py-2 text-[1rem] text-label;
|
|
}
|
|
|
|
.sn-popup-success-bar {
|
|
@apply border-b border-border bg-secondary px-5 py-2 text-[1rem] text-foreground;
|
|
}
|
|
|
|
.sn-popup-card {
|
|
@apply overflow-hidden rounded-[10px] border border-border bg-background;
|
|
}
|
|
|
|
.sn-popup-panel-title {
|
|
@apply text-[1.05rem] font-medium tracking-[-0.01em] text-label;
|
|
}
|
|
|
|
.sn-popup-grid-table {
|
|
@apply w-full border-collapse text-[1.05rem];
|
|
}
|
|
|
|
.sn-popup-grid-head-row {
|
|
@apply bg-secondary text-title;
|
|
}
|
|
|
|
.sn-popup-grid-head-row-strong {
|
|
@apply bg-muted text-foreground;
|
|
}
|
|
|
|
.sn-popup-grid-head-cell {
|
|
@apply border border-border px-2 py-2;
|
|
}
|
|
|
|
.sn-popup-grid-head-cell-sub {
|
|
@apply border border-border px-2 py-1;
|
|
}
|
|
|
|
.sn-popup-grid-cell {
|
|
@apply border border-border px-2 py-2 text-foreground;
|
|
}
|
|
|
|
.sn-popup-grid-row {
|
|
@apply bg-background;
|
|
}
|
|
|
|
.sn-popup-grid-row-hover {
|
|
}
|
|
|
|
.sn-popup-grid-row-hover:hover {
|
|
background-color: color-mix(
|
|
in srgb,
|
|
var(--secondary) 60%,
|
|
var(--background)
|
|
);
|
|
}
|
|
|
|
.sn-popup-grid-row-selected {
|
|
@apply bg-primary-transparent;
|
|
}
|
|
|
|
.sn-popup-empty-cell {
|
|
@apply text-label;
|
|
}
|
|
|
|
.sn-popup-badge {
|
|
@apply inline-flex items-center justify-center px-2 py-1 text-[12px] font-semibold;
|
|
}
|
|
|
|
.sn-popup-badge-danger {
|
|
@apply bg-destructive text-destructive-foreground;
|
|
}
|
|
|
|
.sn-popup-badge-normal {
|
|
@apply border border-border bg-background text-foreground;
|
|
}
|
|
|
|
.sn-popup-help-text {
|
|
@apply mt-2 rounded-md border border-border bg-secondary px-4 py-3 text-[1.05rem] text-label;
|
|
}
|
|
|
|
.form-section-title {
|
|
@apply mt-4 border border-border bg-secondary p-2 text-center text-xl font-medium text-label;
|
|
}
|
|
|
|
[data-theme="black"] {
|
|
.card {
|
|
color: var(--card-foreground);
|
|
background-color: var(--card) !important;
|
|
}
|
|
form {
|
|
color: var(--foreground);
|
|
}
|
|
label {
|
|
color: var(--label);
|
|
}
|
|
input {
|
|
height: 3.2rem;
|
|
background-color: var(--field);
|
|
border: 1px solid var(--input);
|
|
border-radius: 4px;
|
|
}
|
|
input.text-label {
|
|
color: var(--label);
|
|
}
|
|
div [role="tablist"] {
|
|
border: unset;
|
|
gap: 4px;
|
|
}
|
|
.tabs-trigger[data-state="inactive"] {
|
|
color: var(--muted-foreground);
|
|
background: var(--muted);
|
|
}
|
|
.tabs-trigger[data-state="inactive"]:hover {
|
|
color: var(--accent-foreground);
|
|
background: var(--accent);
|
|
}
|
|
.card-border {
|
|
@apply border-border bg-card shadow-blur;
|
|
}
|
|
a[aria-current="page"] {
|
|
background-color: var(--primary);
|
|
color: var(--primary-foreground);
|
|
}
|
|
.card-header {
|
|
@apply border-b-border;
|
|
}
|
|
.form-section-title {
|
|
@apply bg-secondary text-label;
|
|
}
|
|
.gis-layer-panel {
|
|
background: var(--background);
|
|
border-right-color: var(--border);
|
|
box-shadow: 0 0 0 1px var(--border);
|
|
}
|
|
.gis-layer-panel-title {
|
|
color: var(--foreground);
|
|
}
|
|
.gis-layer-panel hr {
|
|
border-color: var(--border);
|
|
}
|
|
.gis-layer-row {
|
|
color: var(--foreground);
|
|
}
|
|
.gis-layer-row:hover {
|
|
background: var(--accent);
|
|
}
|
|
.gis-layer-row span,
|
|
.gis-layer-row label {
|
|
color: var(--foreground) !important;
|
|
}
|
|
.gis-layer-row input[type="checkbox"] {
|
|
accent-color: var(--primary);
|
|
}
|
|
.gis-layer-action-button {
|
|
background: var(--background);
|
|
border-color: var(--primary);
|
|
color: var(--primary);
|
|
}
|
|
.gis-layer-action-button:hover {
|
|
background: var(--accent);
|
|
}
|
|
.gis-layer-setting {
|
|
background: var(--background);
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
.gis-layer-toggle {
|
|
background: var(--background);
|
|
border-color: var(--border);
|
|
color: var(--foreground);
|
|
}
|
|
.gis-layer-toggle:hover {
|
|
background: var(--accent);
|
|
}
|
|
input[type="file"] {
|
|
background-color: var(--field);
|
|
border-color: var(--input);
|
|
color: var(--foreground);
|
|
}
|
|
}
|
|
|
|
[data-theme="blue"] {
|
|
.card-border {
|
|
@apply border-border bg-card;
|
|
}
|
|
.card-header {
|
|
@apply border-b-border;
|
|
}
|
|
.form-section-title {
|
|
@apply bg-secondary text-label;
|
|
}
|
|
}
|
|
|
|
[data-theme="green"] {
|
|
.card-border {
|
|
@apply border-border bg-card;
|
|
}
|
|
.card-header {
|
|
@apply border-b-border;
|
|
}
|
|
.form-section-title {
|
|
@apply bg-secondary text-label;
|
|
}
|
|
}
|
|
|
|
[data-theme="red"] {
|
|
.card-border {
|
|
@apply border-border bg-card;
|
|
}
|
|
.card-header {
|
|
@apply border-b-border;
|
|
}
|
|
.form-section-title {
|
|
@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) {
|
|
display: none;
|
|
}
|
|
[data-sidebar="menu"]
|
|
> *:nth-child(2)
|
|
[data-sidebar="menu-sub"]
|
|
> li:nth-child(4) {
|
|
display: none;
|
|
}
|