Files
anonymous_github/public/css/style.css
T

1625 lines
26 KiB
CSS

.dark-mode {
--canvas-bg-color: #1d1d1d;
--sidebar-bg-color: rgb(45, 50, 56);
--main-bg-color: rgb(45, 51, 59);
--header-bg-color: #3a3f61;
--hover-bg-color: rgb(255, 255, 255, 0.05);
--header-color: #ffffff;
--color: #a7b5c2;
--link-color: #549bf5;
--link-hover-color: #4a8ce4;
--border-color: #363f47;
--btn-color: #ffffff;
--input-color: #a7b5c2;
--input-bg: rgb(45, 50, 56);
--primary-bg: #3a3f61;
--primary-hover-bg: #2b304e;
--primary-color: #ffffff;
--primary-active-color: #dddddd;
--admin-nav-bg: rgb(35, 40, 46);
--admin-nav-active: rgba(255, 255, 255, 0.1);
--admin-stat-bg: rgb(45, 50, 56);
background-color: var(--canvas-bg-color);
color: var(--color);
}
body {
--canvas-bg-color: #ffffff;
--sidebar-bg-color: #ffffff;
--header-bg-color: #4a507b;
--header-color: #ffffff;
--main-bg-color: #ffffff;
--hover-bg-color: rgb(0, 0, 0, 0.05);
--input-color: #333333;
--color: #333333;
--link-color: #549bf5;
--link-hover-color: #4a507b;
--border-color: #a9adb1;
--btn-color: #333333;
--input-bg: #ffffff;
--primary-bg: #4a507b;
--primary-hover-bg: #363b61;
--primary-color: #ffffff;
--primary-active-color: #dddddd;
--admin-nav-bg: #f1f3f5;
--admin-nav-active: rgba(74, 80, 123, 0.1);
--admin-stat-bg: #f8f9fa;
background-color: var(--canvas-bg-color);
color: var(--color);
}
.fadeIn {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.6s;
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.btn:focus,
.btn:active {
outline: none !important;
box-shadow: none;
}
textarea,
select,
input,
button {
outline: none;
}
input:hover,
input:active {
box-shadow: none !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border-color: var(--border-color);
-webkit-text-fill-color: var(--color);
-webkit-box-shadow: none;
transition: background-color 1000s ease-in-out 0s;
}
input:-internal-autofill-selected,
.form-control,
.custom-select {
color: var(--input-color);
background-color: var(--input-bg) !important;
border-color: var(--border-color);
}
.form-control:focus {
border-color: var(--border-color);
}
html,
body {
position: relative;
height: 100%;
}
.dropdown-menu a,
.markdown-body a,
a {
color: var(--link-color);
}
.dropdown-menu a:hover,
.markdown-body a:hover,
a:hover {
text-decoration: none;
color: var(--link-hover-color);
}
.markdown-body .emoji {
height: 1.3em;
margin: 0;
vertical-align: -0.1em;
}
.navbar {
background: var(--header-bg-color) !important;
}
.navbar {
font-weight: 300;
transition: background-color 0.5s ease;
}
.navbar .nav-link.nav-icon {
padding: 0 0.5rem;
}
.navbar .nav-link .fa,
.navbar .nav-link .fab {
font-size: 30px;
line-height: 40px;
}
@media (min-width: 768px) {
.navbar-brand {
width: 280px;
}
}
.navbar-brand {
text-align: center;
}
#navbarSupportedContent {
padding-right: 0;
}
@media (min-width: 992px) {
#navbarSupportedContent {
padding-right: 200px;
}
}
.generalMessage {
display: block;
text-align: center;
color: var(--header-color);
}
.rgba-gradient {
background: linear-gradient(135deg, var(--primary-bg), #2a2d4a);
color: var(--header-color);
}
/* Hero section */
.hero-title {
font-size: 2.8rem;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 0;
}
.hero-subtitle {
font-size: 1.15rem;
opacity: 0.85;
max-width: 500px;
margin-left: auto;
margin-right: auto;
line-height: 1.5;
}
.btn-hero {
border: 2px solid rgba(255, 255, 255, 0.8);
color: #fff;
padding: 10px 28px;
font-size: 1rem;
font-weight: 500;
border-radius: 6px;
transition: background 0.2s, border-color 0.2s;
}
.btn-hero:hover {
background: rgba(255, 255, 255, 0.12);
border-color: #fff;
color: #fff;
}
/* Home content */
.home-content {
max-width: 900px;
}
.usage-steps {
font-size: 1.05rem;
line-height: 1.8;
padding-left: 1.2em;
}
.usage-example {
font-size: 0.9rem;
opacity: 0.7;
margin-top: 8px;
}
.featurette-lead {
font-size: 1.05rem;
line-height: 1.7;
opacity: 0.85;
}
/* Metrics grid */
.metrics-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 48px;
}
.metric-card {
text-align: center;
padding: 24px 16px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--admin-stat-bg);
}
.metric-value {
font-size: 2rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
}
.metric-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.6;
margin-top: 4px;
}
.dropdown-menu,
.body,
.file-content,
.markdown-body {
background-color: var(--main-bg-color) !important;
color: var(--color) !important;
}
.file-content {
padding: 4px 7px;
text-align: left;
min-height: 100%;
}
.badge {
font-size: 75%;
font-weight: 500;
padding: 3px 8px;
border-radius: 10px;
vertical-align: middle;
}
.warning-feedback {
width: 100%;
margin-top: 0.25rem;
font-size: 80%;
color: #dc8e35;
}
.dropdown-item:focus,
.dropdown-item:hover {
background-color: var(--hover-bg-color);
}
.card-header .btn,
.card-header .btn:hover,
.card-header .btn:focus {
border: none !important;
background: transparent !important;
}
.btn {
color: var(--btn-color);
border: 1px solid var(--border-color);
background: transparent;
border-radius: 4px;
white-space: nowrap;
}
.btn:hover,
.btn:active {
color: var(--btn-color);
border: 1px solid var(--border-color);
background-color: var(--hover-bg-color);
box-shadow: none !important;
}
.btn.btn-primary {
color: var(--primary-color);
background-color: var(--primary-bg);
}
.btn.btn-primary:active,
.btn.btn-primary:hover {
color: var(--primary-active-color);
background-color: var(--primary-hover-bg) !important;
}
.btn::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: var(--color);
opacity: 1;
/* Firefox */
}
.white_border {
border: 1px solid white;
color: white;
}
.leftCol {
display: flex;
position: relative;
flex: 0 0 auto;
width: 100%;
z-index: 9;
flex-direction: column;
}
.leftCol,
.sidePanel,
.card {
background-color: var(--sidebar-bg-color);
border: 1px solid var(--border-color);
}
@media (min-width: 768px) {
.leftCol {
flex: 0 0 310px;
width: 310px;
height: 100%;
}
}
.files {
position: relative;
display: block;
overflow: auto;
height: 100%;
}
.files a {
display: block;
padding: 0px 3px 0px 20px;
color: var(--color);
}
.files .file,
.files .folder {
position: relative;
color: var(--color);
cursor: pointer;
word-break: break-all;
}
.files .file.active a,
.files .file a:hover {
background: var(--hover-bg-color);
color: var(--color);
}
.files ul {
list-style: none;
margin: 0;
padding: 0;
}
.files li ul {
padding-left: 10px;
}
.files .folder>ul {
display: none;
}
.files .folder.open>ul {
display: block;
}
.files .file::before {
content: "\f15b";
font-family: 'Font Awesome 5 Free';
position: absolute;
left: 0px;
width: 18px;
height: 21px;
overflow: hidden;
padding: 1px;
color: var(--primary-bg);
}
.files .folder::before {
content: "\f07b";
color: var(--primary-bg);
}
.files .folder.open::before {
content: "\f07c";
color: var(--primary-hover-bg);
}
.ace_editor {
height: 100%;
}
.ace_scroller {
cursor: default;
}
.status-bar {
background-color: var(--main-bg-color);
padding: 8px 6px;
margin: 0;
border-bottom: 1px solid var(--border-color);
border-radius: 0;
}
.paths {
padding: 0;
margin: 0;
background-color: initial;
border: none;
border-radius: 0;
align-items: center;
}
.paths a {
color: var(--color);
}
.paths .breadcrumb-item {
padding-left: 3px;
}
.paths .breadcrumb-item::before {
padding-right: 3px;
}
.content {
height: 100%;
overflow: scroll;
padding-top: 42px;
background-color: var(--main-bg-color);
text-align: center;
}
.image-content {
max-width: 100%;
max-height: 100%;
text-align: center;
padding: 4px;
}
.file-error {
font-weight: bold;
font-size: 50px;
text-align: center;
}
pdfviewer {
display: block;
padding: 15px;
}
pdfpageviewer {
display: block;
width: 100%;
margin-bottom: 10px;
}
notebook {
display: block;
text-align: left;
padding: 15px;
}
@media (min-width: 768px) {
notebook {
padding-left: 100px;
}
}
.nb-output th,
.nb-output td {
border: 1px solid var(--border-color) !important;
}
.floatingchat-container-wrap {
left: inherit !important;
bottom: inherit !important;
top: 3px !important;
height: 47px !important;
right: 3px !important;
}
.floating-chat-kofi-popup-iframe {
left: inherit !important;
bottom: inherit !important;
top: 55px !important;
right: 10px !important;
}
.faq-section .panel-default .panel-title a {
color: var(--color);
display: block;
}
.faq-section .panel-heading {
background-color: var(--sidebar-bg-color);
}
.faq-section .panel-default {
background-color: var(--hover-bg-color);
}
.faq-section .panel-default .panel-title {
margin-bottom: 0;
}
.faq-section .panel-default .panel-title a:after {
font-family: "FontAwesome";
font-style: normal;
font-size: 3rem;
content: "\f106";
float: right;
margin-top: -12px;
}
.faq-section .panel-default .panel-title a.collapsed:after {
content: "\f107";
}
.faq-section .panel-default .panel-body {
font-size: 1.2rem;
}
.table {
color: var(--color);
}
.table td,
.table th,
hr,
.dropdown-divider {
border-color: var(--border-color);
}
.table.repositories td {
word-break: break-word;
}
loc {
display: block;
position: relative;
width: 100%;
height: 5px;
}
loc .lang {
float: left;
height: 100%;
}
.rounded-circle.fa {
display: inline-block;
font-size: 75px;
height: 140px;
width: 140px;
border: 4px solid;
line-height: 140px;
text-align: center;
}
.featurette-divider {
margin: 5rem 0;
/* Space out the Bootstrap <hr> more */
}
/* Featurette headings */
.featurette-heading {
font-weight: 600;
font-size: 1.5rem;
line-height: 1.3;
letter-spacing: -0.02em;
margin-bottom: 12px;
}
.dark-mode .shadow {
box-shadow: none;
}
.dark-mode .overflow-auto::-webkit-scrollbar {
width: 10px;
}
.dark-mode .overflow-auto::-webkit-scrollbar-track {
-webkit-box-shadow: none;
background: inherit;
border-radius: 0;
}
.dark-mode .overflow-auto::-webkit-scrollbar-thumb {
border-radius: 10px;
border: 1px solid var(--border-color);
background-color: var(--hover-bg-color);
}
.dark-mode .rgba-gradient {
background: linear-gradient(135deg, #2a2d4a, #151728);
}
.section-number {
padding-right: 10px;
font-weight: bold;
font-style: italic;
}
.org-subscript-child {
font-size: 85%;
}
.highlighted-line {
position: absolute;
background: rgba(100, 200, 100, 0.5);
z-index: 20
}
pre,
code {
font-family: "Fira Code", "Courier New", Courier, monospace;
line-height: 1.1;
color: var(--color)
}
.diff-lines,
.diff-file,
.diff-index {
background: rgba(172, 172, 172, 0.5);
}
.diff-add {
background: rgba(100, 200, 100, 0.5);
}
.diff-remove {
background: rgba(200, 100, 100, 0.5);
}
/* ===== Dashboard & List Styles ===== */
.dashboard-page {
max-width: 960px;
}
.dashboard-title {
font-size: 1.4rem;
font-weight: 600;
letter-spacing: -0.01em;
}
/* Quota bars */
.quota-row {
display: flex;
gap: 16px;
margin-bottom: 16px;
padding: 12px 16px;
background: var(--admin-stat-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
}
.quota-item {
flex: 1;
min-width: 0;
}
.quota-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 4px;
}
.quota-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
opacity: 0.7;
}
.quota-value {
font-size: 0.8rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.quota-progress {
height: 6px;
border-radius: 3px;
background: var(--hover-bg-color);
}
.quota-progress .progress-bar {
border-radius: 3px;
}
/* Filter chips */
.filter-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
font-size: 0.8rem;
font-weight: 500;
background: var(--primary-bg);
color: var(--primary-color);
border-radius: 12px;
line-height: 1.4;
}
.filter-chip-close {
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: inherit;
opacity: 0.7;
cursor: pointer;
padding: 0;
margin-left: 2px;
font-size: 1rem;
line-height: 1;
}
.filter-chip-close:hover {
opacity: 1;
}
/* Repository/PR list */
.repo-list {
list-style: none;
padding: 0;
margin: 0;
}
.repo-list-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 16px 0;
border-bottom: 1px solid var(--border-color);
gap: 12px;
}
.repo-list-item:first-child {
border-top: 1px solid var(--border-color);
}
.repo-list-item.repo-inactive {
opacity: 0.6;
}
.repo-list-item-content {
flex: 1;
min-width: 0;
}
.repo-list-item-header {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.repo-name {
font-size: 1.1rem;
font-weight: 600;
color: var(--link-color);
word-break: break-word;
}
.repo-name:hover {
color: var(--link-hover-color);
}
.repo-source {
font-size: 0.85rem;
opacity: 0.8;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.repo-date {
opacity: 0.7;
}
.repo-meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 8px;
font-size: 0.8rem;
opacity: 0.7;
}
.repo-meta span {
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.repo-list-item-actions {
flex-shrink: 0;
padding-top: 2px;
}
.repo-list-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 48px 20px;
opacity: 0.5;
font-size: 0.95rem;
list-style: none;
border-bottom: 1px solid var(--border-color);
border-top: 1px solid var(--border-color);
}
.repo-list-empty i {
font-size: 1.8rem;
}
/* Type badges (Repo / PR) */
.type-badge {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
padding: 2px 8px;
border-radius: 4px;
white-space: nowrap;
}
.type-badge.type-repo {
background: rgba(74, 80, 123, 0.12);
color: var(--primary-bg);
}
.type-badge.type-pr {
background: rgba(40, 167, 69, 0.12);
color: #28a745;
}
.dark-mode .type-badge.type-repo {
background: rgba(84, 155, 245, 0.15);
color: #549bf5;
}
.dark-mode .type-badge.type-pr {
background: rgba(40, 167, 69, 0.15);
color: #5cb85c;
}
/* Type filter button group */
.btn-group .btn:not(.btn-primary) {
background: var(--hover-bg-color);
}
/* ===== Anonymize Page Layout ===== */
.anonymize-page .sidePanel {
min-width: 0;
}
.anonymize-section-title {
font-size: 1rem;
font-weight: 600;
margin: 16px 0 10px 0;
padding-bottom: 6px;
border-bottom: 2px solid var(--primary-bg);
}
.anonymize-section-title i {
color: var(--primary-bg);
margin-right: 4px;
}
.anonymize-submit-bar {
padding: 12px 0 4px 0;
}
.anonymize-submit-bar .btn {
font-size: 1rem;
padding: 10px 20px;
font-weight: 600;
}
.anonymize-page .form-check {
padding-top: 4px;
padding-bottom: 4px;
}
.anonymize-page .form-check-label {
font-weight: 500;
}
.anonymize-page .accordion .card-header {
padding: 0;
}
.anonymize-page .accordion .btn {
font-weight: 600;
font-size: 0.95rem;
}
/* Preview column on desktop */
.anonymize-preview-col {
min-height: 0;
}
/* PR diff overflow */
.pr-diff pre {
overflow-x: auto;
max-width: 100%;
}
@media (min-width: 768px) {
.anonymize-form-col {
height: 100%;
max-width: 50%;
}
.anonymize-preview-col {
height: 100%;
}
}
/* ===== Mobile Responsive Improvements ===== */
/* Mobile-friendly touch targets */
@media (max-width: 767px) {
.btn {
min-height: 38px;
padding: 6px 14px;
font-size: 14px;
}
.btn-sm {
min-height: 34px;
padding: 5px 10px;
}
.navbar .nav-link {
padding: 8px 12px;
}
.navbar .nav-link .fa,
.navbar .nav-link .fab {
font-size: 24px;
line-height: 32px;
}
.container.page {
padding-left: 10px;
padding-right: 10px;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.15rem; }
/* Dashboard list items */
.repo-list-item {
flex-direction: column;
}
.repo-list-item-actions {
align-self: flex-start;
}
/* Quota row stacks on mobile */
.quota-row {
flex-direction: column;
gap: 10px;
padding: 10px 12px;
}
/* Dropdown menus right-aligned on mobile */
.dropdown-menu {
position: absolute;
right: 0;
left: auto;
}
/* Form controls spacing */
.form-group {
margin-bottom: 12px;
}
.form-control {
font-size: 16px; /* Prevents iOS zoom */
}
/* File explorer mobile layout */
.leftCol {
max-height: 40vh;
border-bottom: 2px solid var(--border-color);
}
/* Status bar wrapping */
.status-bar {
flex-wrap: wrap;
gap: 4px;
}
.status-bar .btn {
font-size: 12px;
padding: 3px 8px;
min-height: 28px;
}
/* Home hero section */
#home .display-4 {
font-size: 1.8rem;
}
#home h4.subtext-header {
font-size: 1rem;
}
/* Progress bars on dashboard */
.progress {
min-width: 120px !important;
}
/* Badge readability */
.badge {
font-size: 70%;
}
/* Search & filter toolbar */
.col-2.input-group {
width: 100% !important;
max-width: 100%;
flex: 0 0 100%;
}
/* Metadata spans wrapping */
.color-text-secondary span {
display: inline-block;
margin-bottom: 2px;
}
/* Ko-fi widget hidden on mobile */
.floatingchat-container-wrap {
display: none !important;
}
/* Metrics cards on mobile */
.metrics-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.metric-value {
font-size: 1.5rem;
}
.hero-title {
font-size: 1.8rem;
}
.hero-subtitle {
font-size: 0.95rem;
}
/* ---- Anonymize page mobile ---- */
.anonymize-page > .row {
height: auto !important;
min-height: 100%;
}
.anonymize-page .sidePanel {
height: auto !important;
overflow: visible !important;
border-bottom: 2px solid var(--border-color);
padding-bottom: 12px;
}
.anonymize-page .sidePanel .card,
.anonymize-page .sidePanel .container {
max-width: 100%;
padding-left: 8px;
padding-right: 8px;
}
.anonymize-form-col {
max-width: 100% !important;
flex: 0 0 100%;
width: 100%;
}
.anonymize-preview-col {
height: auto !important;
max-height: none;
border-top: 1px solid var(--border-color);
padding-top: 12px !important;
}
.anonymize-section-title {
font-size: 0.95rem;
margin: 12px 0 8px 0;
}
.anonymize-submit-bar {
position: sticky;
bottom: 0;
background: var(--sidebar-bg-color);
padding: 10px 0;
margin: 0 -8px;
padding-left: 8px;
padding-right: 8px;
border-top: 1px solid var(--border-color);
z-index: 10;
}
.anonymize-submit-bar .btn {
font-size: 1rem;
padding: 12px 20px;
}
.anonymize-page .card-title {
font-size: 1.2rem;
}
/* Compact checkboxes on mobile */
.anonymize-page .form-check {
padding-top: 6px;
padding-bottom: 6px;
min-height: 36px;
}
.anonymize-page .form-check-label {
font-size: 0.95rem;
}
.anonymize-page .card-body {
padding: 12px;
}
/* PR preview on mobile */
.pr-title {
font-size: 1.15rem;
}
.pr-diff pre {
font-size: 0.75rem;
}
.pr-comment .mb-1 h5 {
font-size: 1rem;
}
.nav-tabs .nav-link {
padding: 8px 12px;
font-size: 0.9rem;
}
}
/* Tablet tweaks */
@media (min-width: 768px) and (max-width: 991px) {
.container.page {
max-width: 100%;
padding-left: 15px;
padding-right: 15px;
}
.leftCol {
flex: 0 0 250px;
width: 250px;
}
}
/* Mobile toggle for file explorer sidebar */
.sidebar-toggle {
display: none;
width: 100%;
padding: 8px;
text-align: center;
background: var(--sidebar-bg-color);
border: 1px solid var(--border-color);
color: var(--color);
cursor: pointer;
font-size: 14px;
}
@media (max-width: 767px) {
.sidebar-toggle {
display: block;
}
.leftCol.collapsed {
display: none !important;
}
}
/* ===== Admin Interface Improvements ===== */
/* Admin navigation tabs */
.admin-nav {
display: flex;
background: var(--admin-nav-bg);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 4px;
margin-bottom: 20px;
gap: 4px;
flex-wrap: wrap;
}
.admin-nav a {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 4px;
color: var(--color);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: background-color 0.15s, color 0.15s;
white-space: nowrap;
}
.admin-nav a:hover {
background: var(--admin-nav-active);
color: var(--color);
}
.admin-nav a.active {
background: var(--primary-bg);
color: var(--primary-color);
}
.admin-nav a i {
font-size: 14px;
width: 16px;
text-align: center;
}
@media (max-width: 767px) {
.admin-nav {
flex-direction: column;
}
.admin-nav a {
justify-content: flex-start;
}
}
/* Admin stat cards */
.admin-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
margin-bottom: 20px;
}
.admin-stat-card {
background: var(--admin-stat-bg);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 14px;
text-align: center;
}
.admin-stat-card .stat-value {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.2;
}
.admin-stat-card .stat-label {
font-size: 0.8rem;
opacity: 0.7;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 4px;
}
/* Admin toolbar */
.admin-toolbar {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--border-color);
margin-bottom: 12px;
}
.admin-toolbar .form-control {
max-width: 300px;
}
@media (max-width: 767px) {
.admin-toolbar .form-control {
max-width: 100%;
width: 100%;
}
}
.admin-toolbar .pagination-compact {
display: flex;
align-items: center;
gap: 4px;
}
.admin-toolbar .pagination-compact input {
width: 60px;
text-align: center;
}
.admin-toolbar .pagination-compact .btn {
padding: 4px 10px;
min-height: 34px;
}
/* Admin list items */
.admin-list-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border-color);
}
.admin-list-item:last-child {
border-bottom: none;
}
.admin-list-item .item-main {
flex: 1;
min-width: 0;
}
.admin-list-item .item-title {
font-size: 1rem;
font-weight: 600;
margin-bottom: 4px;
word-break: break-word;
}
.admin-list-item .item-meta {
font-size: 0.85rem;
opacity: 0.8;
}
.admin-list-item .item-meta span {
margin-right: 12px;
display: inline-block;
margin-bottom: 2px;
}
.admin-list-item .item-actions {
flex-shrink: 0;
}
@media (max-width: 767px) {
.admin-list-item {
flex-direction: column;
gap: 8px;
}
.admin-list-item .item-actions {
align-self: flex-start;
}
}
/* Status badge improvements */
.status-badge {
display: inline-block;
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
border-radius: 10px;
text-transform: uppercase;
letter-spacing: 0.3px;
vertical-align: middle;
}
.status-badge.status-ready {
background: #28a745;
color: #fff;
}
.status-badge.status-error {
background: #dc3545;
color: #fff;
}
.status-badge.status-preparing,
.status-badge.status-download {
background: #17a2b8;
color: #fff;
}
.status-badge.status-expired,
.status-badge.status-removed,
.status-badge.status-removing,
.status-badge.status-expiring {
background: #ffc107;
color: #333;
}
.status-badge.status-active {
background: #28a745;
color: #fff;
}
/* Admin queue job cards */
.queue-job-card {
background: var(--admin-stat-bg);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 12px;
margin-bottom: 8px;
}
.queue-job-card .job-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
flex-wrap: wrap;
gap: 8px;
}
.queue-job-card .job-id {
font-weight: 600;
font-size: 0.95rem;
word-break: break-all;
}
.queue-job-card .job-timestamps {
font-size: 0.8rem;
opacity: 0.7;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.queue-job-card .job-actions {
display: flex;
gap: 6px;
margin-top: 8px;
}
.queue-job-card .job-actions .btn {
font-size: 12px;
padding: 3px 10px;
}
/* Admin section headers */
.admin-section-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
margin-top: 12px;
border-bottom: 2px solid var(--primary-bg);
margin-bottom: 8px;
}
.admin-section-header h2 {
margin: 0;
font-size: 1.15rem;
font-weight: 600;
}
.admin-section-header .section-count {
background: var(--primary-bg);
color: var(--primary-color);
font-size: 0.8rem;
padding: 2px 10px;
border-radius: 10px;
font-weight: 600;
}
/* User detail card */
.user-detail-card {
background: var(--admin-stat-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
}
.user-detail-card .user-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.user-detail-card .user-header img {
border-radius: 50%;
}
.user-detail-card .user-header h1 {
margin: 0;
font-size: 1.5rem;
}
.user-detail-grid {
display: grid;
grid-template-columns: auto 1fr;
gap: 8px 16px;
font-size: 0.9rem;
}
.user-detail-grid .detail-label {
font-weight: 600;
white-space: nowrap;
}
.user-detail-grid .detail-value {
word-break: break-all;
}
@media (max-width: 767px) {
.user-detail-grid {
grid-template-columns: 1fr;
}
.user-detail-grid .detail-label {
margin-top: 8px;
border-top: 1px solid var(--border-color);
padding-top: 8px;
}
.user-detail-grid .detail-label:first-child {
border-top: none;
margin-top: 0;
padding-top: 0;
}
}
/* Empty state */
.empty-state {
text-align: center;
padding: 40px 20px;
opacity: 0.6;
}
.empty-state i {
font-size: 2rem;
margin-bottom: 10px;
display: block;
}