/* * CINCIN 테마 — Spike 템플릿 위에 한 겹. * * `assets/css/styles.css` **뒤에** 실어야 합니다(두 레이아웃의 참고). * 템플릿 파일은 손대지 않습니다 — 갱신할 때 통째로 갈아 끼울 수 있어야 합니다. * * 왜: * 1) 관리 화면이 아직 **템플릿 파랑(#0085db)** 이었습니다. 앱 아이콘 · 웹 파비콘 · * 관리 로고를 브랜드 분홍으로 맞춰 놓고(#163 · #164 · #165) 화면은 파랑이라, * 같은 서비스로 보이지 않았습니다. * 2) 색 대비가 규격에 못 미쳤습니다. 브라우저에서 잰 값입니다: * * 파란 단추 위 흰 글자 3.90 (AA 4.5 미달) * .text-muted (흰 바탕) 2.81 ← rgba(112,122,130,.75) 라 더 연해짐 * 본문 #707A82 4.38 * danger #FB977D 2.14 * success #4BD08B 1.96 * warning #F8C076 1.64 * secondary #46CAEB 1.93 * * 고르는 규칙: **흰색 대비 4.5 이상**인 값만 씁니다. 그러면 한 값으로 두 쓰임이 다 됩니다 — * 흰 바탕의 글자색으로도, 흰 글자를 이는 채움색으로도. (둘 다 흰색과의 대비를 보는 것이라 * 조건이 같습니다.) 값은 시안 `app.css` 의 토큰에서 가져왔습니다. * * 어두운 테마는 **글자 쓰임만 따로** 둡니다. 위 값들은 어두운 바탕 위 글자로는 2.5~3.5 라 * 미달이지만, 채움색으로는 그대로 써도 됩니다(흰 글자와의 대비는 바탕과 무관). */ /* ────────────────────────────────────────────────────────────────────────── * 1. 테마 색 — 템플릿이 색 테마를 꽂는 자리와 같은 꼴로. * 두 레이아웃의 와 짝입니다. * ────────────────────────────────────────────────────────────────────────── */ [data-bs-theme="dark"][data-color-theme="CINCIN_Theme"]:root, [data-bs-theme="light"][data-color-theme="CINCIN_Theme"]:root { /* 브랜드 분홍. 시안 --color-primary-ink. 흰색 대비 4.98 */ --bs-primary: #c23b7d; --bs-primary-rgb: 194, 59, 125; --bs-light-primary: rgba(194, 59, 125, 0.1); --bs-primary-bg-subtle: rgba(194, 59, 125, 0.1); /* 보조. 시안 --color-accent-ink. 흰색 대비 6.15 */ --bs-secondary: #6d3ee0; --bs-secondary-rgb: 109, 62, 224; --bs-light-secondary: rgba(109, 62, 224, 0.1); --bs-secondary-bg-subtle: rgba(109, 62, 224, 0.1); } /* 템플릿은 채운 단추 색을 테마별로 **하드코딩**합니다(변수를 안 봅니다). 그래서 같은 자리에 우리 것을 둡니다. */ [data-bs-theme="dark"][data-color-theme="CINCIN_Theme"]:root .btn-primary, [data-bs-theme="light"][data-color-theme="CINCIN_Theme"]:root .btn-primary { --bs-btn-bg: #c23b7d; --bs-btn-border-color: #c23b7d; --bs-btn-hover-bg: #a83069; --bs-btn-hover-border-color: #a83069; --bs-btn-active-bg: #8f2958; --bs-btn-active-border-color: #8f2958; --bs-btn-disabled-bg: #c23b7d; --bs-btn-disabled-border-color: #c23b7d; } [data-bs-theme="dark"][data-color-theme="CINCIN_Theme"]:root .btn-secondary, [data-bs-theme="light"][data-color-theme="CINCIN_Theme"]:root .btn-secondary { --bs-btn-bg: #6d3ee0; --bs-btn-border-color: #6d3ee0; --bs-btn-hover-bg: #5c31c4; --bs-btn-hover-border-color: #5c31c4; --bs-btn-active-bg: #4e29a6; --bs-btn-active-border-color: #4e29a6; --bs-btn-disabled-bg: #6d3ee0; --bs-btn-disabled-border-color: #6d3ee0; } /* ────────────────────────────────────────────────────────────────────────── * 2. 갈래 색 — 전부 흰색 대비 4.5 이상으로. * 템플릿 값은 파스텔이라 글자로도 채움으로도 못 썼습니다. * ────────────────────────────────────────────────────────────────────────── */ :root, [data-bs-theme="light"] { --bs-success: #15803d; /* 시안 --color-online · 5.02 */ --bs-success-rgb: 21, 128, 61; --bs-success-bg-subtle: rgba(21, 128, 61, 0.1); --bs-light-success: rgba(21, 128, 61, 0.1); --bs-danger: #dc2626; /* 시안 --color-destructive · 4.83 */ --bs-danger-rgb: 220, 38, 38; --bs-danger-bg-subtle: rgba(220, 38, 38, 0.1); --bs-light-danger: rgba(220, 38, 38, 0.1); --bs-warning: #a16207; /* 앱 waitInk · 4.92 */ --bs-warning-rgb: 161, 98, 7; --bs-warning-bg-subtle: rgba(161, 98, 7, 0.1); --bs-light-warning: rgba(161, 98, 7, 0.1); --bs-info: #0b6478; /* 6.76 */ --bs-info-rgb: 11, 100, 120; --bs-info-bg-subtle: rgba(11, 100, 120, 0.1); --bs-light-info: rgba(11, 100, 120, 0.1); /* 본문. 템플릿의 차가운 회색 계열을 지키되 읽히는 선까지 — 4.38 → 6.03 */ --bs-body-color: #5a646e; --bs-body-color-rgb: 90, 100, 110; /* 보조 글자. 템플릿은 본문색에 알파 .75 를 걸어 2.81 이었습니다 — 알파를 걷고 본문보다 한 단계만 연한 **단색**으로. 4.90. `.text-muted` 가 이 변수를 그대로 씁니다. */ --bs-secondary-color: #68727b; --bs-tertiary-color: #7d8791; /* 초점 테두리도 브랜드색으로 — 파랑이 남아 있었습니다 */ --bs-focus-ring-color: rgba(194, 59, 125, 0.3); --bs-link-hover-color: #c23b7d; } /* ────────────────────────────────────────────────────────────────────────── * 3. 어두운 테마 — **글자로 쓰는 자리만** 밝은 짝으로. * 채움색(단추·배지)은 위 값 그대로 둡니다: 흰 글자와의 대비는 페이지 바탕과 * 무관해서, 밝은 테마와 같은 색이라야 두 테마의 단추가 같아 보입니다. * 아래 값은 어두운 바탕(#111C2D) 위에서 5.8~9.0 입니다. * ────────────────────────────────────────────────────────────────────────── */ [data-bs-theme="dark"] { /* 본문을 여기서 **다시** 정합니다. 위 `:root` 값은 밝은 바탕을 전제한 어두운 회색이라 어두운 테마로 새면 2.84 가 됩니다. 덧붙여 템플릿 원래값(#707A82)도 어두운 바탕에서 3.91 로 이미 미달이었습니다 — 여기서 같이 고칩니다. #AEB8C2 는 8.50. */ --bs-body-color: #aeb8c2; --bs-body-color-rgb: 174, 184, 194; --bs-secondary-color: #9aa4ad; /* 6.75 — 본문보다 한 단계 흐리게 */ --bs-tertiary-color: #7d8791; --bs-focus-ring-color: rgba(240, 127, 176, 0.35); --bs-link-hover-color: #f07fb0; } [data-bs-theme="dark"] .text-primary { color: #f07fb0 !important; } [data-bs-theme="dark"] .text-secondary { color: #b69bf5 !important; } [data-bs-theme="dark"] .text-success { color: #5cc98a !important; } [data-bs-theme="dark"] .text-danger { color: #f58272 !important; } [data-bs-theme="dark"] .text-warning { color: #e8b44a !important; } [data-bs-theme="dark"] .text-info { color: #5eb8d8 !important; } /* 테두리만 있는 단추도 글자가 곧 색입니다 — 어두운 테마에서는 밝은 짝으로. */ [data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #f07fb0; --bs-btn-border-color: #f07fb0; --bs-btn-hover-bg: #c23b7d; --bs-btn-hover-border-color: #c23b7d; } /* ────────────────────────────────────────────────────────────────────────── * 4. 템플릿이 파랑을 하드코딩한 부품들. * 전부 부트스트랩 부품 변수를 박아 둔 자리라, 같은 변수를 다시 정합니다. * ────────────────────────────────────────────────────────────────────────── */ .btn-outline-primary { --bs-btn-color: #c23b7d; --bs-btn-border-color: #c23b7d; --bs-btn-hover-bg: #c23b7d; --bs-btn-hover-border-color: #c23b7d; --bs-btn-active-bg: #a83069; --bs-btn-active-border-color: #a83069; --bs-btn-disabled-color: #c23b7d; --bs-btn-disabled-border-color: #c23b7d; } .nav-pills { --bs-nav-pills-link-active-bg: #c23b7d; } .nav-tabs { --bs-nav-tabs-link-active-color: #c23b7d; --bs-nav-tabs-link-active-border-color: #c23b7d; } .list-group { --bs-list-group-active-bg: #c23b7d; --bs-list-group-active-border-color: #c23b7d; --bs-list-group-action-active-bg: rgba(194, 59, 125, 0.1); } .pagination { --bs-pagination-active-bg: #c23b7d; --bs-pagination-active-border-color: #c23b7d; --bs-pagination-hover-color: #c23b7d; --bs-pagination-focus-color: #c23b7d; } .progress, .progress-stacked { --bs-progress-bar-bg: #c23b7d; } /* 고른 체크상자 · 라디오 · 슬라이더 손잡이 */ .form-check-input:checked, .form-check-input[type="checkbox"]:indeterminate { background-color: #c23b7d; border-color: #c23b7d; } .form-range::-webkit-slider-thumb { background-color: #c23b7d; } .form-range::-moz-range-thumb { background-color: #c23b7d; } /* ────────────────────────────────────────────────────────────────────────── * 5. 배지 · 안내박스. * AdminLayout 의 인라인