quoije/oscars-pool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine admin control layout and stats tabs

Browse Source 
Tighten admin tab layout/styling and simplify control UI while aligning stats tab spacing and labels.
This commit is contained in:
Mathieu Moran
2026-01-27 02:45:49 -05:00
parent 0ae3af13f1
commit 9868d2c39a
4 changed files with 496 additions and 546 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/app.css
+81
View File
@@ -580,6 +580,75 @@ footer {
color: #111827;
}
/* Admin tabs: visually connect tabs with their content */
#adminTabs {
border-bottom: 0;
gap: 0.35rem;
padding-bottom: 0;
}
#adminTabs .nav-link {
background-color: var(--app-surface);
border: 1px solid var(--app-border);
}
#adminTabs .nav-link:hover {
background-color: var(--app-surface);
}
#adminTabs .nav-link.active {
background-color: var(--app-surface);
border-color: var(--app-border);
border-bottom-color: transparent;
position: relative;
top: 1px;
z-index: 2;
}
#adminTabs .nav-link.active::after {
content: "";
position: absolute;
left: 1px;
right: 1px;
bottom: -3px;
height: 3px;
background: var(--app-surface);
}
#adminTabs .nav-link:not(.active) {
border-color: var(--app-border);
}
#adminTabs + .admin-tabs-content {
background-color: transparent;
border: 0;
border-radius: 0;
padding: 0;
margin-top: -1px;
padding-top: 0 !important;
}
/* Hide top border under the active admin tab */
#adminTabs + .admin-tabs-content > .tab-pane.active {
position: relative;
}
#adminTabs + .admin-tabs-content > .tab-pane.active::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 1px;
width: calc(100% + 2px);
margin-left: -1px;
background: transparent;
pointer-events: none;
}
#adminTabs + .admin-tabs-content .tab-pane .card:first-of-type {
border-top-color: transparent;
}
body.bg-light {
background-color: var(--app-bg) !important;
@@ -1083,6 +1152,18 @@ footer {
color: #fff;
background: rgba(79, 124, 255, 0.18);
border-color: rgba(79, 124, 255, 0.4);
border-bottom-color: transparent;
}
html[data-theme="dark"] #adminTabs .nav-link:not(.active) {
border-color: var(--app-border);
}
html[data-theme="dark"] #adminTabs .nav-link.active::after,
html[data-theme="dark"] #editMovieTabs .nav-link.active::after {
background: var(--app-surface);
bottom: -3px;
height: 3px;
}
html[data-theme="dark"] #adminTabsContent .table,