kjh2064/taxbaik
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

style: upgrade admin panel theme to Tabler native vertical layout with light/dark mode support
TaxBaik CI/CD / build-and-deploy (push) Successful in 58s
Details

Browse Source
This commit is contained in:
김재현
2026-07-11 22:42:55 +09:00
parent eccbd00902
commit 959a4ea00b
4 changed files with 264 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/TaxBaik.Web/Pages/Admin/Dashboard.cshtml
+2 -2
View File
@@ -45,7 +45,7 @@
<span class="text-muted small text-uppercase fw-semibold" style="letter-spacing: 0.5px;">데이터베이스</span> <span class="text-muted small text-uppercase fw-semibold" style="letter-spacing: 0.5px;">데이터베이스</span>
<span class="avatar avatar-md rounded-circle bg-indigo-lt text-indigo"><i class="bi bi-database-fill-check"></i></span> <span class="avatar avatar-md rounded-circle bg-indigo-lt text-indigo"><i class="bi bi-database-fill-check"></i></span>
</div> </div>
<h3 class="fw-bold text-dark mb-1 font-numeric">Flyway Migration</h3> <h3 class="fw-bold text-dark mb-1 font-numeric">DbUp Migration</h3>
<p class="text-muted small mb-0">SQL 스키마 형상 버전 실시간 추적</p> <p class="text-muted small mb-0">SQL 스키마 형상 버전 실시간 추적</p>
</div> </div>
</div> </div>
@@ -132,7 +132,7 @@
<div class="alert alert-info d-flex align-items-start gap-2 mb-3" role="alert"> <div class="alert alert-info d-flex align-items-start gap-2 mb-3" role="alert">
<i class="bi bi-info-circle-fill text-info mt-1"></i> <i class="bi bi-info-circle-fill text-info mt-1"></i>
<div class="small leading-relaxed text-muted"> <div class="small leading-relaxed text-muted">
본 시스템은 Razor Pages, Dapper, Flyway, Cookie Auth 및 Tabler CSS 라이브러리를 탑재한 서버 사이드 렌더링 프레임워크로 가볍고 안전합니다. 본 시스템은 Razor Pages, Dapper, DbUp, Cookie Auth 및 Tabler CSS 라이브러리를 탑재한 서버 사이드 렌더링 프레임워크로 가볍고 안전합니다.
</div> </div>
</div> </div>
<div class="card bg-light border border-light-subtle rounded-3 p-3 mt-3"> <div class="card bg-light border border-light-subtle rounded-3 p-3 mt-3">
src/TaxBaik.Web/Pages/Admin/Index.cshtml
+1 -1
View File
@@ -10,7 +10,7 @@
<div class="col"> <div class="col">
<div class="page-pretitle">TaxBaik Admin</div> <div class="page-pretitle">TaxBaik Admin</div>
<h2 class="page-title">고객관리 어드민</h2> <h2 class="page-title">고객관리 어드민</h2>
<p class="text-muted mb-0">Razor Pages + Cookie Authentication + Dapper + Flyway 기준으로 정리하는 서버 렌더링 어드민입니다.</p> <p class="text-muted mb-0">Razor Pages + Cookie Authentication + Dapper + DbUp 기준으로 정리하는 서버 렌더링 어드민입니다.</p>
</div> </div>
</div> </div>
</div> </div>
src/TaxBaik.Web/Pages/Admin/_AdminLayout.cshtml
+228 -127
View File
@@ -16,147 +16,248 @@
<title>@(ViewData["Title"] ?? "TaxBaik Admin")</title> <title>@(ViewData["Title"] ?? "TaxBaik Admin")</title>
<meta name="theme-color" content="#1F4E79" /> <meta name="theme-color" content="#1F4E79" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<!-- Tabler Core & Icons -->
<link href="https://cdn.jsdelivr.net/npm/@@tabler/core@1.0.0/dist/css/tabler.min.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/@@tabler/core@1.0.0/dist/css/tabler.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="~/css/admin.css" asp-append-version="true" /> <link rel="stylesheet" href="~/css/admin.css" asp-append-version="true" />
<!-- Fast head theme load script to prevent flashing -->
<script>
(function () {
var theme = localStorage.getItem('tablerTheme') || 'light';
document.documentElement.setAttribute('data-bs-theme', theme);
})();
</script>
</head> </head>
<body class="admin-app bg-light"> <body class="layout-fluid">
<div class="page admin-shell min-vh-100 d-flex flex-column"> <div class="page">
<!-- Topbar Panel --> <!-- Sidebar Panel (Tabler Native Vertical Navbar) -->
<header class="navbar navbar-expand-md navbar-light d-print-none admin-topbar py-2 sticky-top"> <aside class="navbar navbar-vertical navbar-expand-lg navbar-dark bg-dark d-print-none" data-bs-theme="dark">
<div class="container-fluid px-3"> <div class="container-fluid">
<div class="d-flex align-items-center gap-3 flex-wrap admin-topbar-branding"> <!-- Toggle Button for Mobile -->
<div class="navbar-brand"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar-menu" aria-controls="sidebar-menu" aria-expanded="false" aria-label="Toggle navigation">
<a href="/admin/dashboard" class="text-decoration-none text-dark fw-bold d-flex align-items-center gap-2"> <span class="navbar-toggler-icon"></span>
<span class="avatar avatar-sm bg-primary text-white rounded-3"><i class="bi bi-safe-fill"></i></span> </button>
<span>TaxBaik <span class="text-primary">Admin</span></span>
<!-- Logo & Branding -->
<h1 class="navbar-brand navbar-brand-autodark px-2">
<a href="/admin/dashboard" class="text-decoration-none text-white fw-bold d-flex align-items-center gap-2">
<span class="avatar avatar-sm bg-primary text-white rounded-3"><i class="bi bi-safe-fill"></i></span>
<span>TaxBaik <span class="text-primary-light small">Admin</span></span>
</a>
</h1>
<!-- Mobile User Dropdown -->
<div class="navbar-nav flex-row d-lg-none">
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm rounded-circle"><i class="bi bi-person-circle"></i></span>
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
<div class="dropdown-item small text-muted font-numeric">@User.Identity?.Name</div>
<div class="dropdown-divider"></div>
<a href="/admin/logout" class="dropdown-item text-danger"><i class="bi bi-box-arrow-right me-1"></i> 로그아웃</a>
</div>
</div>
</div>
<!-- Navigation Sidebar Links -->
<div class="collapse navbar-collapse" id="sidebar-menu">
<ul class="navbar-nav pt-lg-3">
<!-- 기본 관리 -->
<li class="nav-item dropdown @(coreOpen ? "active" : "")">
<a class="nav-link dropdown-toggle" href="#menu-core" data-bs-toggle="dropdown" data-bs-auto-close="false" role="button" aria-expanded="@(coreOpen ? "true" : "false")">
<span class="nav-link-icon d-md-none d-lg-inline-block"><i class="bi bi-speedometer2"></i></span>
<span class="nav-link-title fw-semibold">기본 관리</span>
</a>
<div class="dropdown-menu @(coreOpen ? "show" : "")">
<a class="dropdown-item @activeClass("/admin/dashboard")" href="/admin/dashboard">
<i class="bi bi-circle-fill small me-2" style="font-size: 0.35rem;"></i>대시보드
</a>
<a class="dropdown-item @activeClass("/admin/settings")" href="/admin/settings">
<i class="bi bi-circle-fill small me-2" style="font-size: 0.35rem;"></i>설정
</a>
<a class="dropdown-item @activeClass("/admin/clientlogs")" href="/admin/clientlogs">
<i class="bi bi-circle-fill small me-2" style="font-size: 0.35rem;"></i>클라이언트 로그
</a>
</div>
</li>
<!-- 고객/상담 -->
<li class="nav-item dropdown @(customerOpen ? "active" : "")">
<a class="nav-link dropdown-toggle" href="#menu-customer" data-bs-toggle="dropdown" data-bs-auto-close="false" role="button" aria-expanded="@(customerOpen ? "true" : "false")">
<span class="nav-link-icon d-md-none d-lg-inline-block"><i class="bi bi-people"></i></span>
<span class="nav-link-title fw-semibold">고객/상담</span>
</a>
<div class="dropdown-menu @(customerOpen ? "show" : "")">
<a class="dropdown-item @activeClass("/admin/customers")" href="/admin/customers">
<i class="bi bi-circle-fill small me-2" style="font-size: 0.35rem;"></i>고객
</a>
<a class="dropdown-item @activeClass("/admin/clients")" href="/admin/clients">
<i class="bi bi-circle-fill small me-2" style="font-size: 0.35rem;"></i>고객사
</a>
<a class="dropdown-item @activeClass("/admin/inquiries")" href="/admin/inquiries">
<i class="bi bi-circle-fill small me-2" style="font-size: 0.35rem;"></i>문의 관리
</a>
<a class="dropdown-item @activeClass("/admin/consultingactivities")" href="/admin/consultingactivities">
<i class="bi bi-circle-fill small me-2" style="font-size: 0.35rem;"></i>상담 활동
</a>
</div>
</li>
<!-- 콘텐츠 운영 -->
<li class="nav-item dropdown @(contentOpen ? "active" : "")">
<a class="nav-link dropdown-toggle" href="#menu-content" data-bs-toggle="dropdown" data-bs-auto-close="false" role="button" aria-expanded="@(contentOpen ? "true" : "false")">
<span class="nav-link-icon d-md-none d-lg-inline-block"><i class="bi bi-file-earmark-richtext"></i></span>
<span class="nav-link-title fw-semibold">콘텐츠 운영</span>
</a>
<div class="dropdown-menu @(contentOpen ? "show" : "")">
<a class="dropdown-item @activeClass("/admin/blog")" href="/admin/blog">
<i class="bi bi-circle-fill small me-2" style="font-size: 0.35rem;"></i>블로그 편집
</a>
<a class="dropdown-item @activeClass("/admin/announcements")" href="/admin/announcements">
<i class="bi bi-circle-fill small me-2" style="font-size: 0.35rem;"></i>공지사항
</a>
<a class="dropdown-item @activeClass("/admin/faqs")" href="/admin/faqs">
<i class="bi bi-circle-fill small me-2" style="font-size: 0.35rem;"></i>FAQ 관리
</a>
</div>
</li>
<!-- 세무 관리 -->
<li class="nav-item dropdown @(financeOpen ? "active" : "")">
<a class="nav-link dropdown-toggle" href="#menu-finance" data-bs-toggle="dropdown" data-bs-auto-close="false" role="button" aria-expanded="@(financeOpen ? "true" : "false")">
<span class="nav-link-icon d-md-none d-lg-inline-block"><i class="bi bi-calculator"></i></span>
<span class="nav-link-title fw-semibold">세무 관리</span>
</a>
<div class="dropdown-menu @(financeOpen ? "show" : "")">
<a class="dropdown-item @activeClass("/admin/taxprofiles")" href="/admin/taxprofiles">
<i class="bi bi-circle-fill small me-2" style="font-size: 0.35rem;"></i>세무 프로필
</a>
<a class="dropdown-item @activeClass("/admin/taxfilings")" href="/admin/taxfilings">
<i class="bi bi-circle-fill small me-2" style="font-size: 0.35rem;"></i>신고 관리
</a>
<a class="dropdown-item @activeClass("/admin/taxfilingschedules")" href="/admin/taxfilingschedules">
<i class="bi bi-circle-fill small me-2" style="font-size: 0.35rem;"></i>신고 일정
</a>
<a class="dropdown-item @activeClass("/admin/revenuetrackings")" href="/admin/revenuetrackings">
<i class="bi bi-circle-fill small me-2" style="font-size: 0.35rem;"></i>매출 추적
</a>
</div>
</li>
</ul>
</div>
</div>
</aside>
<!-- Main Wrapper Panel -->
<div class="page-wrapper d-flex flex-column min-vh-100">
<!-- Topbar (Search, Breadcrumbs, Theme Switcher, User Profiles) -->
<header class="navbar navbar-expand-md navbar-light d-none d-lg-flex d-print-none sticky-top border-bottom">
<div class="container-xl justify-content-between">
<!-- Left breadcrumb -->
<div class="d-flex align-items-center">
<nav aria-label="breadcrumb" class="d-inline-block">
<ol class="breadcrumb breadcrumb-muted mb-0 small">
<li class="breadcrumb-item"><a href="/admin/dashboard" class="text-muted"><i class="bi bi-house-door-fill"></i></a></li>
<li class="breadcrumb-item active text-dark fw-semibold" aria-current="page">@breadcrumbText</li>
</ol>
</nav>
</div>
<!-- Right Actions -->
<div class="navbar-nav flex-row align-items-center gap-3">
<!-- Dark/Light Theme Switcher Button -->
<div class="nav-item">
<a href="#" class="nav-link px-0 text-muted" onclick="toggleTheme(); return false;" title="테마 전환" data-bs-toggle="tooltip" data-bs-placement="bottom">
<i class="bi bi-sun fs-3 theme-icon-light d-none"></i>
<i class="bi bi-moon-stars-fill fs-3 theme-icon-dark"></i>
</a>
</div>
<!-- Divider -->
<div class="vr bg-light opacity-50" style="height: 1.5rem;"></div>
<!-- Profile & Logout -->
<div class="d-flex align-items-center gap-2">
<span class="avatar avatar-xs rounded-circle bg-secondary-lt text-secondary"><i class="bi bi-person-circle"></i></span>
<span class="text-dark small fw-semibold font-numeric me-2">@User.Identity?.Name</span>
</div>
<a class="btn btn-outline-danger btn-sm px-3 rounded-pill fw-semibold" href="/admin/logout">
<i class="bi bi-box-arrow-right me-1"></i> 로그아웃
</a> </a>
</div> </div>
<nav aria-label="breadcrumb" class="admin-topbar-breadcrumb d-none d-md-inline-block ms-2">
<ol class="breadcrumb breadcrumb-muted mb-0 small">
<li class="breadcrumb-item"><a href="/admin/dashboard" class="text-muted"><i class="bi bi-house-door-fill"></i></a></li>
<li class="breadcrumb-item active text-dark fw-semibold" aria-current="page">@breadcrumbText</li>
</ol>
</nav>
</div> </div>
<div class="navbar-nav flex-row order-md-last gap-3 align-items-center"> </header>
<div class="d-flex align-items-center gap-2">
<span class="avatar avatar-xs rounded-circle bg-secondary-lt text-secondary"><i class="bi bi-person-circle"></i></span>
<span class="text-dark small fw-semibold font-numeric d-none d-md-inline">@User.Identity?.Name</span>
</div>
<a class="btn btn-outline-danger btn-sm px-3 rounded-pill fw-semibold" href="/admin/logout">
<i class="bi bi-box-arrow-right me-1"></i> 로그아웃
</a>
</div>
</div>
</header>
<div class="page-wrapper flex-fill py-4"> <!-- Page Body Area -->
<div class="container-fluid px-3 px-md-4"> <div class="page-body flex-fill py-4">
<div class="row g-4"> <div class="container-xl">
<!-- Left Sidebar Panel --> <div class="card shadow-sm border border-light-subtle rounded-3 overflow-hidden bg-surface">
<aside class="col-12 col-lg-3 col-xxl-2"> <div class="card-body p-4 p-md-5">
<div class="card shadow-sm border-0 admin-sidebar-card sticky-top" style="top: 80px; z-index: 10;"> @RenderBody()
<div class="card-header admin-sidebar-header bg-white py-3 px-4 border-bottom border-light">
<h3 class="card-title mb-0 admin-sidebar-title fw-bold text-dark" style="font-size: 0.9rem;">
<i class="bi bi-grid-fill text-primary me-2"></i> 관리 메뉴
</h3>
</div>
<div class="card-body p-0 admin-sidebar-body bg-white">
<div class="accordion accordion-flush" id="adminSidebarAccordion">
<!-- 기본 Accordion -->
<div class="accordion-item border-0">
<h2 class="accordion-header">
<button class="accordion-button py-2.5 px-4 @(coreOpen ? string.Empty : "collapsed") fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#adminMenuCore" aria-expanded="@(coreOpen ? "true" : "false")">
<i class="bi bi-speedometer2 text-muted me-2"></i> 기본 관리
</button>
</h2>
<div id="adminMenuCore" class="accordion-collapse collapse @(coreOpen ? "show" : string.Empty)" data-bs-parent="#adminSidebarAccordion">
<div class="list-group list-group-flush bg-transparent py-1">
<a class="list-group-item list-group-item-action ps-5 py-2 @activeClass("/admin/dashboard")" href="/admin/dashboard"><i class="bi bi-circle small me-2"></i> 대시보드</a>
<a class="list-group-item list-group-item-action ps-5 py-2 @activeClass("/admin/settings")" href="/admin/settings"><i class="bi bi-circle small me-2"></i> 설정</a>
<a class="list-group-item list-group-item-action ps-5 py-2 @activeClass("/admin/clientlogs")" href="/admin/clientlogs"><i class="bi bi-circle small me-2"></i> 클라이언트 로그</a>
</div>
</div>
</div>
<!-- 고객/상담 Accordion -->
<div class="accordion-item border-0">
<h2 class="accordion-header">
<button class="accordion-button py-2.5 px-4 @(customerOpen ? string.Empty : "collapsed") fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#adminMenuCustomer" aria-expanded="@(customerOpen ? "true" : "false")">
<i class="bi bi-people text-muted me-2"></i> 고객/상담
</button>
</h2>
<div id="adminMenuCustomer" class="accordion-collapse collapse @(customerOpen ? "show" : string.Empty)" data-bs-parent="#adminSidebarAccordion">
<div class="list-group list-group-flush bg-transparent py-1">
<a class="list-group-item list-group-item-action ps-5 py-2 @activeClass("/admin/customers")" href="/admin/customers"><i class="bi bi-circle small me-2"></i> 고객</a>
<a class="list-group-item list-group-item-action ps-5 py-2 @activeClass("/admin/clients")" href="/admin/clients"><i class="bi bi-circle small me-2"></i> 고객사</a>
<a class="list-group-item list-group-item-action ps-5 py-2 @activeClass("/admin/inquiries")" href="/admin/inquiries"><i class="bi bi-circle small me-2"></i> 문의 관리</a>
<a class="list-group-item list-group-item-action ps-5 py-2 @activeClass("/admin/consultingactivities")" href="/admin/consultingactivities"><i class="bi bi-circle small me-2"></i> 상담 활동</a>
</div>
</div>
</div>
<!-- 콘텐츠 Accordion -->
<div class="accordion-item border-0">
<h2 class="accordion-header">
<button class="accordion-button py-2.5 px-4 @(contentOpen ? string.Empty : "collapsed") fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#adminMenuContent" aria-expanded="@(contentOpen ? "true" : "false")">
<i class="bi bi-file-earmark-richtext text-muted me-2"></i> 콘텐츠 운영
</button>
</h2>
<div id="adminMenuContent" class="accordion-collapse collapse @(contentOpen ? "show" : string.Empty)" data-bs-parent="#adminSidebarAccordion">
<div class="list-group list-group-flush bg-transparent py-1">
<a class="list-group-item list-group-item-action ps-5 py-2 @activeClass("/admin/blog")" href="/admin/blog"><i class="bi bi-circle small me-2"></i> 블로그 편집</a>
<a class="list-group-item list-group-item-action ps-5 py-2 @activeClass("/admin/announcements")" href="/admin/announcements"><i class="bi bi-circle small me-2"></i> 공지사항</a>
<a class="list-group-item list-group-item-action ps-5 py-2 @activeClass("/admin/faqs")" href="/admin/faqs"><i class="bi bi-circle small me-2"></i> FAQ 관리</a>
</div>
</div>
</div>
<!-- 세무 관리 Accordion -->
<div class="accordion-item border-0">
<h2 class="accordion-header">
<button class="accordion-button py-2.5 px-4 @(financeOpen ? string.Empty : "collapsed") fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#adminMenuFinance" aria-expanded="@(financeOpen ? "true" : "false")">
<i class="bi bi-calculator text-muted me-2"></i> 세무 관리
</button>
</h2>
<div id="adminMenuFinance" class="accordion-collapse collapse @(financeOpen ? "show" : string.Empty)" data-bs-parent="#adminSidebarAccordion">
<div class="list-group list-group-flush bg-transparent py-1">
<a class="list-group-item list-group-item-action ps-5 py-2 @activeClass("/admin/taxprofiles")" href="/admin/taxprofiles"><i class="bi bi-circle small me-2"></i> 세무 프로필</a>
<a class="list-group-item list-group-item-action ps-5 py-2 @activeClass("/admin/taxfilings")" href="/admin/taxfilings"><i class="bi bi-circle small me-2"></i> 신고 관리</a>
<a class="list-group-item list-group-item-action ps-5 py-2 @activeClass("/admin/taxfilingschedules")" href="/admin/taxfilingschedules"><i class="bi bi-circle small me-2"></i> 신고 일정</a>
<a class="list-group-item list-group-item-action ps-5 py-2 @activeClass("/admin/revenuetrackings")" href="/admin/revenuetrackings"><i class="bi bi-circle small me-2"></i> 매출 추적</a>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</aside> </div>
<!-- Center Content Panel -->
<main class="col-12 col-lg-9 col-xxl-10">
<div class="card shadow-sm border-0 admin-content-card rounded-4 bg-white overflow-hidden">
<div class="card-body p-4 p-md-5">
@RenderBody()
</div>
</div>
</main>
</div> </div>
</div> </div>
<!-- Footer Area -->
<footer class="footer footer-transparent d-print-none py-3 border-top mt-auto bg-surface">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item">Razor Pages + Dapper Architecture</li>
<li class="list-inline-item">Cookie Security Authentication</li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0 text-muted">
&copy; 2026 TaxBaik. All rights reserved.
</div>
</div>
</div>
</footer>
</div> </div>
<!-- Footer Panel -->
<footer class="admin-footer border-top bg-white mt-auto py-3">
<div class="container-fluid px-4 small text-muted">
<div class="d-flex flex-wrap justify-content-between align-items-center gap-2 font-numeric">
<span>&copy; 2026 TaxBaik. All rights reserved.</span>
<div class="d-flex align-items-center gap-3">
<span>Razor Pages + Dapper Architecture</span>
<span>·</span>
<span>Cookie Security Authentication</span>
</div>
</div>
</div>
</footer>
</div> </div>
<!-- Tabler Javascript -->
<script src="https://cdn.jsdelivr.net/npm/@@tabler/core@1.0.0/dist/js/tabler.min.js" defer></script> <script src="https://cdn.jsdelivr.net/npm/@@tabler/core@1.0.0/dist/js/tabler.min.js" defer></script>
@await RenderSectionAsync("Scripts", required: false) @await RenderSectionAsync("Scripts", required: false)
<!-- Theme Manager Javascript -->
<script>
function applyTheme(theme) {
document.documentElement.setAttribute('data-bs-theme', theme);
localStorage.setItem('tablerTheme', theme);
var iconLight = document.querySelector('.theme-icon-light');
var iconDark = document.querySelector('.theme-icon-dark');
if (iconLight && iconDark) {
if (theme === 'dark') {
iconLight.classList.remove('d-none');
iconDark.classList.add('d-none');
} else {
iconLight.classList.add('d-none');
iconDark.classList.remove('d-none');
}
}
}
function toggleTheme() {
var currentTheme = localStorage.getItem('tablerTheme') || 'light';
var newTheme = currentTheme === 'dark' ? 'light' : 'dark';
applyTheme(newTheme);
}
// Initialize Theme Icons on Load
document.addEventListener('DOMContentLoaded', function() {
var currentTheme = localStorage.getItem('tablerTheme') || 'light';
applyTheme(currentTheme);
});
</script>
</body> </body>
</html> </html>
src/TaxBaik.Web/wwwroot/css/admin.css
+33 -17
View File
@@ -11,6 +11,12 @@
============================================================================ */ ============================================================================ */
:root { :root {
/* Tabler Brand Color Override */
--tblr-primary: #1F4E79;
--tblr-primary-rgb: 31, 78, 121;
--tblr-primary-fg: #ffffff;
--tblr-font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* Color System */ /* Color System */
--primary-color: #1F4E79; --primary-color: #1F4E79;
--primary-light: #E8F0F7; --primary-light: #E8F0F7;
@@ -45,7 +51,7 @@
--info-light: #CFFAFE; --info-light: #CFFAFE;
--info-dark: #0E7490; --info-dark: #0E7490;
/* Semantic Colors */ /* Semantic Colors - Reactive to Light Mode */
--text-primary: #1A1A1A; --text-primary: #1A1A1A;
--text-secondary: #64748B; --text-secondary: #64748B;
--text-tertiary: #94A3B8; --text-tertiary: #94A3B8;
@@ -77,31 +83,31 @@
--space-16: 40px; --space-16: 40px;
/* Border Radius - Squarish for professional enterprise look */ /* Border Radius - Squarish for professional enterprise look */
--radius-sm: 2px; --radius-sm: 4px;
--radius-md: 4px; --radius-md: 6px;
--radius-lg: 6px; --radius-lg: 8px;
--radius-xl: 8px; --radius-xl: 12px;
--radius-full: 9999px; --radius-full: 9999px;
/* Typography Scale - High Density Compact Size */ /* Typography Scale */
--font-family-base: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-family-base: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-size-xs: 0.62rem; --font-size-xs: 0.75rem;
--font-size-sm: 0.66rem; --font-size-sm: 0.8rem;
--font-size-base: 0.72rem; --font-size-base: 0.875rem;
--font-size-lg: 0.8rem; --font-size-lg: 1rem;
--font-size-xl: 0.9rem; --font-size-xl: 1.125rem;
--font-size-2xl: 1rem; --font-size-2xl: 1.25rem;
--font-size-3xl: 1.15rem; --font-size-3xl: 1.5rem;
--font-size-4xl: 1.45rem; --font-size-4xl: 1.75rem;
--font-weight-regular: 400; --font-weight-regular: 400;
--font-weight-medium: 500; --font-weight-medium: 500;
--font-weight-semibold: 600; --font-weight-semibold: 600;
--font-weight-bold: 700; --font-weight-bold: 700;
--line-height-tight: 1.1; --line-height-tight: 1.15;
--line-height-normal: 1.25; --line-height-normal: 1.35;
--line-height-relaxed: 1.4; --line-height-relaxed: 1.5;
/* Shadow System (Elevation) */ /* Shadow System (Elevation) */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
@@ -124,6 +130,16 @@
--z-tooltip: 1100; --z-tooltip: 1100;
} }
/* Semantic Colors - Reactive to Dark Mode */
[data-bs-theme="dark"] {
--bg-primary: var(--tblr-bg-surface, #1e293b);
--bg-secondary: var(--tblr-body-bg, #0f172a);
--text-primary: var(--tblr-body-color, #f8fafc);
--text-secondary: var(--tblr-muted, #94a3b8);
--border-color: var(--tblr-border-color, #334155);
--border-color-light: var(--tblr-border-color-translucent, #1e293b);
}
/* ============================================================================ /* ============================================================================
Global Reset & Base Styles Global Reset & Base Styles
============================================================================ */ ============================================================================ */