zenn
10c5a099fc
- 관리자 라이트 테마 격리, 대시보드 활성 링크, 로그인 우측 정렬 - 대시보드 통계 추이 차트·툴팁, 홈 Latest/Featured 보정 - 미디어 종류·미사용 필터, 비디오 프레임 썸네일 - NAS 운영 업데이트 절차 문서 추가
344 lines
7.4 KiB
CSS
344 lines
7.4 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--site-bg: #fcfcfc;
|
|
--site-panel: #fcfcfc;
|
|
--site-panel-strong: #fcfcfc;
|
|
--site-text: #111111;
|
|
--site-muted: #454545;
|
|
--site-soft: #6f7480;
|
|
--site-line: #e2e2e0;
|
|
--site-input: #fcfcfc;
|
|
--site-accent: #ff4f2e;
|
|
--site-accent-text: #ffffff;
|
|
--site-invert: #111111;
|
|
--site-invert-text: #ffffff;
|
|
}
|
|
|
|
:root[data-theme='dark'] {
|
|
--site-bg: #050505;
|
|
--site-panel: #080808;
|
|
--site-panel-strong: #0d0d0d;
|
|
--site-text: #f4f4f2;
|
|
--site-muted: #c7c7c2;
|
|
--site-soft: #8b8e96;
|
|
--site-line: #252525;
|
|
--site-input: #171717;
|
|
--site-accent: #ff4f2e;
|
|
--site-accent-text: #ffffff;
|
|
--site-invert: #f4f4f2;
|
|
--site-invert-text: #111111;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme='light']) {
|
|
--site-bg: #050505;
|
|
--site-panel: #080808;
|
|
--site-panel-strong: #0d0d0d;
|
|
--site-text: #f4f4f2;
|
|
--site-muted: #c7c7c2;
|
|
--site-soft: #8b8e96;
|
|
--site-line: #252525;
|
|
--site-input: #171717;
|
|
--site-accent: #ff4f2e;
|
|
--site-accent-text: #ffffff;
|
|
--site-invert: #f4f4f2;
|
|
--site-invert-text: #111111;
|
|
}
|
|
}
|
|
|
|
html {
|
|
font-family: Pretendard, ui-sans-serif, system-ui, sans-serif;
|
|
color: var(--site-text);
|
|
background: var(--site-bg);
|
|
}
|
|
|
|
.site-splash {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 9999;
|
|
display: grid;
|
|
place-items: center;
|
|
background: var(--site-bg);
|
|
transition: opacity 0.22s ease, visibility 0.22s ease;
|
|
}
|
|
|
|
html.site-app-ready .site-splash {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.site-splash__logo {
|
|
width: 5rem;
|
|
height: 5rem;
|
|
border-radius: 1rem;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.site-splash__text {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
color: var(--site-text);
|
|
}
|
|
|
|
html.site-mobile-nav-open {
|
|
overflow: hidden;
|
|
}
|
|
|
|
html.site-search-open {
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
min-width: 320px;
|
|
margin: 0;
|
|
background: var(--site-bg);
|
|
}
|
|
|
|
html.admin-post-editor-document,
|
|
body.admin-post-editor-document {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: #ffffff;
|
|
}
|
|
|
|
html.admin-settings-document,
|
|
body.admin-settings-document {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: #f7f8fa;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
@keyframes site-search-modal-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-6px) scale(0.99);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
.site-shell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
color: var(--site-text);
|
|
background: var(--site-bg);
|
|
}
|
|
|
|
.site-section {
|
|
border-bottom: 1px solid var(--site-line);
|
|
background: var(--site-bg);
|
|
}
|
|
|
|
.site-section-header {
|
|
@apply px-6 py-8;
|
|
}
|
|
|
|
.site-section-body {
|
|
@apply px-6 py-4;
|
|
}
|
|
|
|
.site-search-modal__panel--animate {
|
|
animation: site-search-modal-in 0.18s ease-out;
|
|
}
|
|
|
|
.post-prose {
|
|
@apply max-w-none text-[17px] leading-8;
|
|
color: var(--site-text);
|
|
}
|
|
|
|
.site-header {
|
|
height: 57px;
|
|
border-bottom: 1px solid var(--site-line);
|
|
background: var(--site-panel);
|
|
color: var(--site-text);
|
|
}
|
|
|
|
.site-main {
|
|
min-height: 0;
|
|
background: var(--site-bg);
|
|
}
|
|
|
|
.site-main--menu-closed {
|
|
border-left: 0;
|
|
}
|
|
|
|
.site-sidebar {
|
|
min-height: 0;
|
|
background: var(--site-bg);
|
|
color: var(--site-text);
|
|
}
|
|
|
|
/**
|
|
* 사이드바 내부 스크롤 영역 — 스크롤바만 숨기고 스크롤 동작은 유지한다.
|
|
*/
|
|
.site-sidebar-scroll {
|
|
overflow-y: auto;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.site-sidebar-scroll::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.site-sidebar-section {
|
|
border-bottom: 1px solid var(--site-line);
|
|
}
|
|
|
|
.site-muted {
|
|
color: var(--site-muted);
|
|
}
|
|
|
|
.site-soft {
|
|
color: var(--site-soft);
|
|
}
|
|
|
|
.site-input {
|
|
border: 1px solid var(--site-line);
|
|
background: var(--site-input);
|
|
color: var(--site-text);
|
|
transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
.site-button {
|
|
background: var(--site-invert);
|
|
color: var(--site-invert-text);
|
|
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.site-button:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.site-accent-button {
|
|
background: var(--site-accent);
|
|
color: var(--site-accent-text);
|
|
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.site-accent-button:hover {
|
|
opacity: 0.92;
|
|
}
|
|
|
|
.site-interactive {
|
|
transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.site-interactive:hover {
|
|
color: var(--site-text);
|
|
}
|
|
|
|
.site-input:hover,
|
|
.site-input:focus-visible {
|
|
border-color: color-mix(in srgb, var(--site-text) 24%, var(--site-line));
|
|
}
|
|
|
|
.site-panel-hover {
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.site-panel-hover:hover {
|
|
background: color-mix(in srgb, var(--site-panel) 72%, var(--site-text));
|
|
}
|
|
|
|
/**
|
|
* 왼쪽 사이드바 1차 네비·태그 카테고리·테마 점 등 행 호버 — 라이트 테마에서 밝은 크림 톤, 다크는 패널 대비 유지
|
|
*/
|
|
.site-sidebar-nav-row {
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.site-sidebar-nav-row:hover {
|
|
background-color: #f7f4ef;
|
|
}
|
|
|
|
/**
|
|
* 관리자 화면은 공개 사이트 테마와 분리된 라이트 UI로 고정한다.
|
|
*/
|
|
.admin-layout {
|
|
--site-bg: #f7f8fa;
|
|
--site-panel: #ffffff;
|
|
--site-panel-strong: #ffffff;
|
|
--site-text: #15171a;
|
|
--site-muted: #6b7280;
|
|
--site-soft: #657080;
|
|
--site-line: #e5e7eb;
|
|
--site-input: #ffffff;
|
|
color-scheme: light;
|
|
}
|
|
|
|
.admin-layout--light-controls input:not(.auth-form-input),
|
|
.admin-layout--light-controls textarea,
|
|
.admin-layout--light-controls select {
|
|
color: #15171a;
|
|
background-color: #ffffff;
|
|
caret-color: #15171a;
|
|
color-scheme: light;
|
|
}
|
|
|
|
.admin-layout--light-controls input:not(.auth-form-input)::placeholder,
|
|
.admin-layout--light-controls textarea::placeholder {
|
|
color: #8a94a3;
|
|
}
|
|
|
|
.admin-layout--light-controls input:not(.auth-form-input):-webkit-autofill,
|
|
.admin-layout--light-controls input:not(.auth-form-input):-webkit-autofill:hover,
|
|
.admin-layout--light-controls input:not(.auth-form-input):-webkit-autofill:focus {
|
|
-webkit-text-fill-color: #15171a;
|
|
box-shadow: 0 0 0 1000px #ffffff inset;
|
|
}
|
|
|
|
:root[data-theme='dark'] .site-sidebar-nav-row:hover {
|
|
background: color-mix(in srgb, var(--site-panel) 72%, var(--site-text));
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme='light']) .site-sidebar-nav-row:hover {
|
|
background: color-mix(in srgb, var(--site-panel) 72%, var(--site-text));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 다크 인증 폼(signin/signup) 텍스트 입력 — UA가 부모 color를 상속하지 않는 경우 대비
|
|
*/
|
|
.auth-form-input {
|
|
color: #f5f7fa;
|
|
caret-color: #2f6feb;
|
|
}
|
|
|
|
.auth-form-input::placeholder {
|
|
color: #5c6570;
|
|
}
|
|
|
|
.auth-form-input:-webkit-autofill,
|
|
.auth-form-input:-webkit-autofill:hover,
|
|
.auth-form-input:-webkit-autofill:focus {
|
|
-webkit-text-fill-color: #f5f7fa;
|
|
transition: background-color 9999s ease-out;
|
|
}
|
|
|
|
}
|
|
|
|
@layer utilities {
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|