/* ============================================ WIXON Blog Admin Styles ============================================ */ /* Admin Layout */ .admin__wrap { display: flex; min-height: 100vh; } /* Sidebar */ .admin__sidebar { width: 250px; background: #1e1e2d; color: #fff; padding: 20px; position: fixed; height: 100vh; display: flex; flex-direction: column; } .admin__logo { text-align: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #3a3a4d; } .admin__logo img { max-width: 120px; } .admin__logo span { display: block; color: #a2a3b7; font-size: 12px; margin-top: 5px; } .admin__menu { list-style: none; padding: 0; margin: 0; flex: 1; } .admin__menu li a { display: flex; align-items: center; padding: 12px 15px; color: #a2a3b7; text-decoration: none; border-radius: 5px; margin-bottom: 5px; transition: all 0.3s ease; } .admin__menu li a:hover, .admin__menu li a.active { background: #1b1b28; color: #fff; } .admin__menu li a span.uk-icon { margin-right: 10px; } /* User Section */ .admin__user { padding-top: 20px; border-top: 1px solid #3a3a4d; } .admin__user .user__name { color: #fff; font-weight: 500; margin-bottom: 10px; display: block; } .admin__user a { color: #a2a3b7; text-decoration: none; font-size: 13px; margin-right: 15px; } .admin__user a:hover { color: #fff; } /* Main Content */ .admin__content { flex: 1; margin-left: 250px; padding: 30px; background: #f5f5f5; min-height: 100vh; } .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 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; } .page__header h1 { margin: 0; } /* Post Title Link */ .post__title__link { color: #333; text-decoration: none; } .post__title__link:hover { color: #901438; } /* Responsive */ @media (max-width: 960px) { .admin__sidebar { width: 70px; padding: 15px 10px; } .admin__sidebar .admin__logo img { max-width: 40px; } .admin__sidebar .admin__logo span, .admin__menu li a span:not(.uk-icon), .admin__user .user__name { display: none; } .admin__menu li a { justify-content: center; padding: 12px; } .admin__menu li a span.uk-icon { margin-right: 0; } .admin__user a { display: block; text-align: center; margin: 5px 0; } .admin__content { margin-left: 70px; padding: 20px; } } @media (max-width: 640px) { .page__header { flex-direction: column; align-items: flex-start; gap: 15px; } .filter__form .uk-grid > div { margin-bottom: 10px; } }