diff --git a/public/assets/css/admin.css b/public/assets/css/admin.css index b9c227a..04c49e7 100644 --- a/public/assets/css/admin.css +++ b/public/assets/css/admin.css @@ -117,4 +117,130 @@ body { padding: 16px; } +} + + + body { + background: #f5f7fa; + } + +.admin-wrapper { + min-height: 100vh; +} + +.admin-sidebar { + width: 260px; + min-height: 100vh; + background: #fff; + border-left: 1px solid #e5e7eb; + position: fixed; + right: 0; + top: 0; + bottom: 0; + z-index: 1000; + overflow-y: auto; +} + +.admin-main { + margin-right: 260px; + min-height: 100vh; + display: flex; + flex-direction: column; +} + +.admin-header { + height: 70px; + background: #fff; + border-bottom: 1px solid #e5e7eb; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 25px; +} + +.admin-content { + padding: 25px; + flex: 1; +} + +.admin-logo { + height: 70px; + display: flex; + align-items: center; + padding: 0 20px; + border-bottom: 1px solid #eee; +} + +.admin-logo a { + text-decoration: none; + font-size: 18px; + font-weight: bold; + color: #0d6efd; +} + +.admin-menu { + padding: 15px 10px; +} + +.admin-menu-title { + font-size: 11px; + color: #9ca3af; + padding: 10px; + margin-top: 10px; +} + +.admin-menu a { + display: flex; + align-items: center; + gap: 10px; + padding: 11px 12px; + margin-bottom: 4px; + border-radius: 8px; + color: #4b5563; + text-decoration: none; + transition: .2s; +} + +.admin-menu a:hover, +.admin-menu a.active { + background: #eef5ff; + color: #0d6efd; +} + +.admin-menu i { + width: 22px; + text-align: center; + font-size: 16px; +} + +.admin-user { + display: flex; + align-items: center; + gap: 10px; +} + +.admin-user-avatar { + width: 38px; + height: 38px; + border-radius: 50%; + background: #eef5ff; + display: flex; + align-items: center; + justify-content: center; + color: #0d6efd; +} + +.admin-card { + background: #fff; + border: 1px solid #e5e7eb; + border-radius: 12px; +} + +@media (max-width: 991px) { + + .admin-sidebar { + transform: translateX(100%); + } + + }