Refactor toolbar buttons across various pages to unify styling
- Updated button classes for consistency in the playersoftware-page, playlist-page, resolution-page, schedule-page, settings-page, syncgroup-page, tag-page, task-page, template-page, transition-page, user-page, and usergroup-page. - Removed unnecessary text from button titles and ensured all buttons have the 'ots-toolbar-btn' class for uniformity. - Cleaned up the code by removing commented-out sections and ensuring proper indentation.
This commit is contained in:
Matt Batchelder
@@ -25,6 +25,7 @@
|
||||
--color-text-tertiary: #e2e8f0;
|
||||
--color-text-inverse: #ffffff;
|
||||
--color-on-primary: #ffffff;
|
||||
--ots-sidebar-content-gap: 12px;
|
||||
|
||||
color-scheme: dark;
|
||||
}
|
||||
@@ -173,24 +174,82 @@ body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
.sidebar-nav,
|
||||
.ots-sidebar-nav {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 64px 0 60px;
|
||||
padding: 4px 0 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Extra top padding when sidebar is collapsed or expanded so items clear header */
|
||||
.ots-sidebar.collapsed .sidebar-nav,
|
||||
.ots-sidebar-collapsed .sidebar-nav,
|
||||
.ots-sidebar:not(.collapsed) .sidebar-nav,
|
||||
.ots-sidebar-collapsed:not(.collapsed) .sidebar-nav {
|
||||
padding-top: 72px !important;
|
||||
.ots-sidebar ul.sidebar.ots-sidebar-nav {
|
||||
position: relative !important;
|
||||
top: auto !important;
|
||||
bottom: auto !important;
|
||||
}
|
||||
|
||||
/* Ensure nav list starts below header in expanded/collapsed states */
|
||||
.ots-sidebar.collapsed .ots-sidebar-nav,
|
||||
.ots-sidebar-collapsed .ots-sidebar-nav {
|
||||
padding-top: 4px !important;
|
||||
padding-bottom: 16px !important;
|
||||
}
|
||||
|
||||
.ots-sidebar:not(.collapsed) .ots-sidebar-nav {
|
||||
padding-top: 4px !important;
|
||||
}
|
||||
|
||||
.sidebar-nav li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Reset any fixed heights from base theme that cause overlapping */
|
||||
.ots-sidebar .sidebar-list {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* Expanded sidebar submenu styling (prevents overlap) */
|
||||
.ots-sidebar .sidebar-submenu {
|
||||
list-style: none;
|
||||
margin: 4px 0 8px;
|
||||
padding: 0 0 0 12px;
|
||||
border-left: 1px solid var(--ots-sidebar-border);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ots-sidebar .sidebar-group.is-open .sidebar-submenu,
|
||||
.ots-sidebar .sidebar-group-toggle[aria-expanded="true"] ~ .sidebar-submenu,
|
||||
.ots-sidebar .sidebar-group-toggle[aria-expanded="true"] + .sidebar-submenu {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.ots-sidebar .sidebar-submenu .sidebar-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ots-sidebar .sidebar-submenu .sidebar-list > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 4px 0;
|
||||
background: var(--ots-sidebar-submenu-bg);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 8px 48px 8px 28px;
|
||||
border-left: 4px solid var(--ots-sidebar-submenu-border);
|
||||
border-radius: var(--ots-sidebar-item-radius);
|
||||
color: var(--ots-sidebar-link);
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
min-height: var(--ots-sidebar-item-height);
|
||||
}
|
||||
|
||||
.ots-sidebar .sidebar-submenu .sidebar-list > a:hover {
|
||||
background: var(--ots-sidebar-submenu-hover-bg);
|
||||
color: var(--ots-sidebar-link-hover-text);
|
||||
}
|
||||
|
||||
/* Compatibility: Xibo sidebar markup uses `sidebar-list`, `sidebar-main`, `sidebar-title`.
|
||||
Map those into the modern `.nav-item/.nav-text/.nav-icon` style system so styles apply.
|
||||
*/
|
||||
@@ -620,10 +679,10 @@ body:not(.ots-sidebar-collapsed) .ots-topbar-strip {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 36px !important;
|
||||
height: 36px !important;
|
||||
width: 28px !important;
|
||||
height: 28px !important;
|
||||
padding: 0 !important;
|
||||
border-radius: 8px !important;
|
||||
border-radius: 6px !important;
|
||||
color: var(--color-text-secondary) !important;
|
||||
transition: all 150ms ease !important;
|
||||
border: none !important;
|
||||
@@ -648,11 +707,11 @@ body:not(.ots-sidebar-collapsed) .ots-topbar-strip {
|
||||
/* Avatar in topbar */
|
||||
.ots-topbar-action img.nav-avatar {
|
||||
display: block !important;
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
border-radius: 50% !important;
|
||||
object-fit: cover !important;
|
||||
border: 2px solid transparent !important;
|
||||
border: 1px solid transparent !important;
|
||||
transition: border-color 150ms ease !important;
|
||||
}
|
||||
|
||||
@@ -798,6 +857,12 @@ body:not(.ots-sidebar-collapsed) .ots-topbar-strip {
|
||||
/* Ensure sidebar items are visible and above header when sidebar is collapsed */
|
||||
.ots-sidebar.collapsed {
|
||||
z-index: 1200;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* Allow flyout menus to escape the sidebar-content scroll container */
|
||||
.ots-sidebar.collapsed .sidebar-content {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.ots-sidebar.collapsed .ots-nav-icon {
|
||||
@@ -1965,6 +2030,80 @@ body .panel .panel-heading,
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
TOOLBAR - Icon-only action buttons
|
||||
============================================================================ */
|
||||
|
||||
.ots-table-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 4px 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ots-table-toolbar .ots-toolbar-btn,
|
||||
.ots-table-toolbar .btn.ots-toolbar-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
border: none;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.ots-table-toolbar .ots-toolbar-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.ots-table-toolbar .ots-toolbar-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Folder toggle in toolbar */
|
||||
.ots-table-toolbar .folder-controller.btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Breadcrumbs in toolbar */
|
||||
.ots-table-toolbar #breadcrumbs {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-tertiary);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* View toggle buttons (map/list) */
|
||||
.ots-table-toolbar .map-controller,
|
||||
.ots-table-toolbar .list-controller {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
#datatable-container {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
@@ -3063,6 +3202,44 @@ small {
|
||||
border-color: var(--color-primary) !important;
|
||||
}
|
||||
|
||||
/* Properties Panel - Override layout-editor bundle backgrounds */
|
||||
.properties-panel-container #properties-panel {
|
||||
background-color: var(--color-surface) !important;
|
||||
}
|
||||
|
||||
.properties-panel-container #properties-panel #properties-panel-form-container {
|
||||
background: var(--color-surface) !important;
|
||||
background-color: var(--color-surface) !important;
|
||||
}
|
||||
|
||||
.properties-panel-container #properties-panel .loading-container {
|
||||
background: var(--color-surface) !important;
|
||||
}
|
||||
|
||||
/* Properties Panel Tabs - Override layout-editor bundle (2-ID specificity) */
|
||||
.properties-panel-container #properties-panel #properties-panel-form-container .form-container .nav > li > a {
|
||||
background-color: var(--color-surface) !important;
|
||||
background: var(--color-surface) !important;
|
||||
color: var(--color-text-secondary) !important;
|
||||
border-color: var(--color-primary) !important;
|
||||
border-width: 0 0 2px 0 !important;
|
||||
}
|
||||
|
||||
.properties-panel-container #properties-panel #properties-panel-form-container .form-container .nav > li > a:hover {
|
||||
background-color: rgba(59, 130, 246, 0.15) !important;
|
||||
background: rgba(59, 130, 246, 0.15) !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
}
|
||||
|
||||
.properties-panel-container #properties-panel #properties-panel-form-container .form-container .nav > li > a.active,
|
||||
.properties-panel-container #properties-panel #properties-panel-form-container .form-container .nav > li > a.active:hover {
|
||||
background-color: var(--color-primary) !important;
|
||||
background: var(--color-primary) !important;
|
||||
color: white !important;
|
||||
border-color: var(--color-primary) !important;
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
background-color: var(--color-surface) !important;
|
||||
@@ -3168,7 +3345,7 @@ a.text-muted:hover {
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
|
||||
--ots-bg: #0b111a;
|
||||
--ots-bg: var(--color-background);
|
||||
--ots-surface: #141c2b;
|
||||
--ots-surface-2: #1b2436;
|
||||
--ots-surface-3: #222c3f;
|
||||
@@ -3195,6 +3372,25 @@ a.text-muted:hover {
|
||||
--ots-transition: 160ms ease;
|
||||
}
|
||||
|
||||
/* Light mode token overrides so layout backgrounds follow theme */
|
||||
body.ots-light-mode {
|
||||
--ots-bg: var(--color-background);
|
||||
--ots-surface: var(--color-surface);
|
||||
--ots-surface-2: var(--color-surface-elevated);
|
||||
--ots-surface-3: var(--color-surface-elevated);
|
||||
--ots-border: var(--color-border);
|
||||
--ots-border-soft: var(--color-border-light);
|
||||
--ots-text: var(--color-text-primary);
|
||||
--ots-text-muted: var(--color-text-secondary);
|
||||
--ots-text-faint: var(--color-text-tertiary);
|
||||
--ots-primary: var(--color-primary);
|
||||
--ots-primary-2: var(--color-primary-dark);
|
||||
--ots-success: var(--color-success);
|
||||
--ots-warning: var(--color-warning);
|
||||
--ots-danger: var(--color-danger);
|
||||
--ots-info: var(--color-info);
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
GLOBAL
|
||||
============================================================================= */
|
||||
@@ -3254,6 +3450,11 @@ hr {
|
||||
background: var(--ots-bg);
|
||||
}
|
||||
|
||||
#content-wrapper {
|
||||
padding-left: var(--ots-sidebar-content-gap);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding-top: 24px;
|
||||
}
|
||||
@@ -3777,3 +3978,101 @@ textarea:focus {
|
||||
font-size: 13px;
|
||||
color: var(--ots-text-muted);
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
NUCLEAR: Collapsed Sidebar Icon Centering
|
||||
=============================================================================
|
||||
This section is placed at the VERY END of the last-loaded stylesheet
|
||||
(override-styles.twig is inlined after all linked CSS files).
|
||||
It uses high-specificity selectors with !important to guarantee
|
||||
these rules win the cascade over everything else.
|
||||
============================================================================= */
|
||||
|
||||
/* The 44×44 icon button — grid centering is the most robust method */
|
||||
#sidebar-wrapper.ots-sidebar.collapsed > .sidebar-content > .ots-sidebar-nav > .sidebar-list > a,
|
||||
#sidebar-wrapper.ots-sidebar.collapsed > .sidebar-content > .ots-sidebar-nav > .sidebar-group > .sidebar-group-toggle {
|
||||
display: grid !important;
|
||||
place-items: center !important;
|
||||
grid-template-columns: 1fr !important;
|
||||
grid-template-rows: 1fr !important;
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
min-width: 40px !important;
|
||||
max-width: 40px !important;
|
||||
min-height: 40px !important;
|
||||
max-height: 40px !important;
|
||||
margin: 2px auto !important;
|
||||
padding: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
border: 0 !important;
|
||||
border-left: 0 !important;
|
||||
border-right: 0 !important;
|
||||
float: none !important;
|
||||
text-indent: 0 !important;
|
||||
gap: 0 !important;
|
||||
column-gap: 0 !important;
|
||||
row-gap: 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* The icon span — centered by grid parent, centers its own ::before glyph */
|
||||
#sidebar-wrapper.ots-sidebar.collapsed > .sidebar-content > .ots-sidebar-nav > .sidebar-list > a > .ots-nav-icon,
|
||||
#sidebar-wrapper.ots-sidebar.collapsed > .sidebar-content > .ots-sidebar-nav > .sidebar-group > .sidebar-group-toggle > .ots-nav-icon {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
font-size: 20px !important;
|
||||
line-height: 1 !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
text-indent: 0 !important;
|
||||
text-align: center !important;
|
||||
float: none !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* The FA ::before glyph — block-level and centered */
|
||||
#sidebar-wrapper.ots-sidebar.collapsed > .sidebar-content > .ots-sidebar-nav > .sidebar-list > a > .ots-nav-icon::before,
|
||||
#sidebar-wrapper.ots-sidebar.collapsed > .sidebar-content > .ots-sidebar-nav > .sidebar-group > .sidebar-group-toggle > .ots-nav-icon::before {
|
||||
display: block !important;
|
||||
text-align: center !important;
|
||||
width: 100% !important;
|
||||
line-height: 1 !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
text-indent: 0 !important;
|
||||
}
|
||||
|
||||
/* The <li> wrapper — full width, centers the button */
|
||||
#sidebar-wrapper.ots-sidebar.collapsed > .sidebar-content > .ots-sidebar-nav > .sidebar-list,
|
||||
#sidebar-wrapper.ots-sidebar.collapsed > .sidebar-content > .ots-sidebar-nav > .sidebar-group {
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
text-indent: 0 !important;
|
||||
float: none !important;
|
||||
height: auto !important;
|
||||
list-style: none !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* The <ul> nav list — full width, no spacing that could offset children */
|
||||
#sidebar-wrapper.ots-sidebar.collapsed > .sidebar-content > .ots-sidebar-nav {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
width: 100% !important;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
margin: 0 !important;
|
||||
text-indent: 0 !important;
|
||||
list-style: none !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user