관리자 페이지 레이아웃 개선
- style.css 충돌 제거 (admin 전용 스타일만 사용) - 베스트 프랙티스 적용: - Flexbox 기반 레이아웃 정리 - 고정 사이드바 + 스크롤 콘텐츠 영역 - 반응형 디자인 개선 (960px, 768px, 480px) - 테이블 가로 스크롤 지원 - 카드/버튼/알림 스타일 통일 - 색상 팔레트 일관성 - 레이아웃 겹침 문제 해결 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
javamon117
@@ -1,312 +1,639 @@
|
||||
/* ============================================
|
||||
WIXON Blog Admin Styles
|
||||
Best Practices Applied
|
||||
============================================ */
|
||||
|
||||
/* Admin Layout */
|
||||
/* Reset & Base */
|
||||
.admin-body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
background: #f4f6f9;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.admin-body * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Admin Layout - Flexbox */
|
||||
.admin__wrap {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
/* ============================================
|
||||
Sidebar
|
||||
============================================ */
|
||||
.admin__sidebar {
|
||||
width: 250px;
|
||||
background: #1e1e2d;
|
||||
width: 260px;
|
||||
min-width: 260px;
|
||||
background: linear-gradient(180deg, #1e1e2d 0%, #1a1a27 100%);
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 1000;
|
||||
overflow-y: auto;
|
||||
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.admin__logo {
|
||||
padding: 25px 20px;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #3a3a4d;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.admin__logo a {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.admin__logo img {
|
||||
max-width: 120px;
|
||||
max-width: 100px;
|
||||
height: auto;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.admin__logo span {
|
||||
display: block;
|
||||
color: #a2a3b7;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
color: #8a8a9e;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* Navigation Menu */
|
||||
.admin__menu {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
padding: 20px 15px;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.admin__menu li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.admin__menu li a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 15px;
|
||||
color: #a2a3b7;
|
||||
padding: 12px 16px;
|
||||
color: #b5b5c3;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 5px;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.admin__menu li a:hover,
|
||||
.admin__menu li a.active {
|
||||
background: #1b1b28;
|
||||
.admin__menu li a:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.admin__menu li a span.uk-icon {
|
||||
margin-right: 10px;
|
||||
.admin__menu li a.active {
|
||||
background: #901438;
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 15px rgba(144, 20, 56, 0.3);
|
||||
}
|
||||
|
||||
.admin__menu li a .uk-icon {
|
||||
margin-right: 12px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.admin__menu li a.active .uk-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* User Section */
|
||||
.admin__user {
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #3a3a4d;
|
||||
padding: 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.admin__user .user__name {
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.admin__user .user__links {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.admin__user a {
|
||||
color: #a2a3b7;
|
||||
color: #8a8a9e;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
margin-right: 15px;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.admin__user a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Main Content */
|
||||
/* ============================================
|
||||
Main Content Area
|
||||
============================================ */
|
||||
.admin__content {
|
||||
flex: 1;
|
||||
margin-left: 250px;
|
||||
margin-left: 260px;
|
||||
padding: 30px;
|
||||
background: #f5f5f5;
|
||||
background: #f4f6f9;
|
||||
min-height: 100vh;
|
||||
width: calc(100% - 260px);
|
||||
}
|
||||
|
||||
.admin__content h1 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 25px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Stats Cards */
|
||||
.stat__card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 25px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.stat__card h3 {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin: 0 0 10px 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stat__number {
|
||||
font-size: 2.5em;
|
||||
font-weight: bold;
|
||||
color: #901438;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.stat__number.green {
|
||||
color: #28a745;
|
||||
}
|
||||
|
||||
.stat__number.orange {
|
||||
color: #fd7e14;
|
||||
}
|
||||
|
||||
.stat__number.red {
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.stat__number.blue {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.admin__table {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.admin__table table {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.admin__table th {
|
||||
background: #f8f9fa;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.admin__table td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.admin__table .uk-icon-link {
|
||||
margin-right: 8px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.admin__table .uk-icon-link:hover {
|
||||
color: #901438;
|
||||
}
|
||||
|
||||
/* Labels */
|
||||
.uk-label {
|
||||
font-size: 11px;
|
||||
padding: 3px 8px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.uk-label-success {
|
||||
background: #28a745;
|
||||
}
|
||||
|
||||
.uk-label-danger {
|
||||
background: #dc3545;
|
||||
}
|
||||
|
||||
.uk-label-warning {
|
||||
background: #fd7e14;
|
||||
}
|
||||
|
||||
/* Filter Form */
|
||||
.filter__form {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.admin__pagination {
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
.admin__form {
|
||||
background: #fff;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.admin__form .uk-form-label {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Alerts */
|
||||
.admin__content .uk-alert {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Action Buttons */
|
||||
.action__buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Header with actions */
|
||||
/* Page Header */
|
||||
.page__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
margin-bottom: 30px;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.page__header h1 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #1e1e2d;
|
||||
}
|
||||
|
||||
/* Post Title Link */
|
||||
.admin__content > h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #1e1e2d;
|
||||
margin: 0 0 30px 0;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Cards & Panels
|
||||
============================================ */
|
||||
.stat__card {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 25px;
|
||||
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid #eef0f3;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.stat__card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.stat__card h3 {
|
||||
font-size: 13px;
|
||||
color: #7e8299;
|
||||
margin: 0 0 12px 0;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.stat__number {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
color: #1e1e2d;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat__number.green { color: #1bc5bd; }
|
||||
.stat__number.orange { color: #ffa800; }
|
||||
.stat__number.red { color: #f64e60; }
|
||||
.stat__number.blue { color: #3699ff; }
|
||||
|
||||
/* ============================================
|
||||
Tables
|
||||
============================================ */
|
||||
.admin__table {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid #eef0f3;
|
||||
}
|
||||
|
||||
.admin__table .uk-table {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.admin__table .uk-table th {
|
||||
background: #f8f9fc;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
color: #7e8299;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #eef0f3;
|
||||
}
|
||||
|
||||
.admin__table .uk-table td {
|
||||
padding: 15px 20px;
|
||||
vertical-align: middle;
|
||||
border-bottom: 1px solid #eef0f3;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.admin__table .uk-table tbody tr:hover {
|
||||
background: #f8f9fc;
|
||||
}
|
||||
|
||||
.admin__table .uk-table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Table Links */
|
||||
.post__title__link {
|
||||
color: #333;
|
||||
color: #1e1e2d;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.post__title__link:hover {
|
||||
color: #901438;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
/* Table Actions */
|
||||
.admin__table .uk-icon-link {
|
||||
color: #b5b5c3;
|
||||
margin-right: 10px;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.admin__table .uk-icon-link:hover {
|
||||
color: #901438;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Labels & Badges
|
||||
============================================ */
|
||||
.uk-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.uk-label-success {
|
||||
background: #c9f7f5;
|
||||
color: #1bc5bd;
|
||||
}
|
||||
|
||||
.uk-label-warning {
|
||||
background: #fff4de;
|
||||
color: #ffa800;
|
||||
}
|
||||
|
||||
.uk-label-danger {
|
||||
background: #ffe2e5;
|
||||
color: #f64e60;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Filter Form
|
||||
============================================ */
|
||||
.filter__form {
|
||||
background: #fff;
|
||||
padding: 20px 25px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 25px;
|
||||
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid #eef0f3;
|
||||
}
|
||||
|
||||
.filter__form .uk-select,
|
||||
.filter__form .uk-input {
|
||||
border: 1px solid #e4e6ef;
|
||||
border-radius: 6px;
|
||||
height: 42px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.filter__form .uk-select:focus,
|
||||
.filter__form .uk-input:focus {
|
||||
border-color: #901438;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.filter__form .uk-button {
|
||||
height: 42px;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Pagination
|
||||
============================================ */
|
||||
.admin__pagination {
|
||||
background: #fff;
|
||||
padding: 20px 25px;
|
||||
border-radius: 10px;
|
||||
margin-top: 25px;
|
||||
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid #eef0f3;
|
||||
}
|
||||
|
||||
.admin__pagination .uk-pagination {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.admin__pagination .uk-pagination > li > a,
|
||||
.admin__pagination .uk-pagination > li > span {
|
||||
padding: 8px 14px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.admin__pagination .uk-pagination > .uk-active > span {
|
||||
background: #901438;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Forms
|
||||
============================================ */
|
||||
.admin__form {
|
||||
background: #fff;
|
||||
padding: 35px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid #eef0f3;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.admin__form .uk-form-label {
|
||||
font-weight: 600;
|
||||
color: #1e1e2d;
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.admin__form .uk-input,
|
||||
.admin__form .uk-select,
|
||||
.admin__form .uk-textarea {
|
||||
border: 1px solid #e4e6ef;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.admin__form .uk-input:focus,
|
||||
.admin__form .uk-select:focus,
|
||||
.admin__form .uk-textarea:focus {
|
||||
border-color: #901438;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(144, 20, 56, 0.1);
|
||||
}
|
||||
|
||||
.admin__form .uk-margin {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Buttons
|
||||
============================================ */
|
||||
.uk-button-primary {
|
||||
background: #901438;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.uk-button-primary:hover {
|
||||
background: #7a1130;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.uk-button-default {
|
||||
background: #f5f8fa;
|
||||
border: 1px solid #e4e6ef;
|
||||
border-radius: 6px;
|
||||
color: #7e8299;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.uk-button-default:hover {
|
||||
background: #eef0f3;
|
||||
color: #1e1e2d;
|
||||
}
|
||||
|
||||
.uk-button-danger {
|
||||
background: #f64e60;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.uk-button-danger:hover {
|
||||
background: #ee2d41;
|
||||
}
|
||||
|
||||
.uk-button-secondary {
|
||||
background: #e4e6ef;
|
||||
color: #7e8299;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.uk-button-secondary:hover {
|
||||
background: #d6d8e1;
|
||||
color: #1e1e2d;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Alerts
|
||||
============================================ */
|
||||
.admin__content .uk-alert {
|
||||
border-radius: 8px;
|
||||
padding: 15px 20px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.admin__content .uk-alert-primary {
|
||||
background: #e1f0ff;
|
||||
color: #3699ff;
|
||||
border-left: 4px solid #3699ff;
|
||||
}
|
||||
|
||||
.admin__content .uk-alert-success {
|
||||
background: #c9f7f5;
|
||||
color: #1bc5bd;
|
||||
border-left: 4px solid #1bc5bd;
|
||||
}
|
||||
|
||||
.admin__content .uk-alert-warning {
|
||||
background: #fff4de;
|
||||
color: #ffa800;
|
||||
border-left: 4px solid #ffa800;
|
||||
}
|
||||
|
||||
.admin__content .uk-alert-danger {
|
||||
background: #ffe2e5;
|
||||
color: #f64e60;
|
||||
border-left: 4px solid #f64e60;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Quick Links (Dashboard)
|
||||
============================================ */
|
||||
.admin__content .uk-card {
|
||||
border-radius: 10px;
|
||||
border: 1px solid #eef0f3;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.admin__content .uk-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.admin__content .uk-card .uk-icon {
|
||||
color: #901438;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Summernote Editor Override
|
||||
============================================ */
|
||||
.note-editor.note-frame {
|
||||
border: 1px solid #e4e6ef;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.note-editor .note-toolbar {
|
||||
background: #f8f9fc;
|
||||
border-bottom: 1px solid #e4e6ef;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Responsive Design
|
||||
============================================ */
|
||||
@media (max-width: 1200px) {
|
||||
.admin__sidebar {
|
||||
width: 220px;
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.admin__content {
|
||||
margin-left: 220px;
|
||||
width: calc(100% - 220px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.admin__sidebar {
|
||||
width: 70px;
|
||||
padding: 15px 10px;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.admin__sidebar .admin__logo {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.admin__sidebar .admin__logo img {
|
||||
max-width: 40px;
|
||||
max-width: 35px;
|
||||
}
|
||||
|
||||
.admin__sidebar .admin__logo span,
|
||||
.admin__menu li a span:not(.uk-icon),
|
||||
.admin__user .user__name {
|
||||
.admin__sidebar .admin__logo span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.admin__menu {
|
||||
padding: 15px 8px;
|
||||
}
|
||||
|
||||
.admin__menu li a {
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.admin__menu li a span.uk-icon {
|
||||
.admin__menu li a .uk-icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.admin__menu li a span:not(.uk-icon) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.admin__user {
|
||||
padding: 15px 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.admin__user .user__name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.admin__user a {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 5px 0;
|
||||
margin: 8px 0;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.admin__content {
|
||||
margin-left: 70px;
|
||||
width: calc(100% - 70px);
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
@media (max-width: 768px) {
|
||||
.page__header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.filter__form .uk-grid > div {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.admin__table {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.admin__table .uk-table {
|
||||
min-width: 700px;
|
||||
}
|
||||
|
||||
.stat__card {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.stat__number {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.admin__content {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.admin__form {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page__header h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user