forked from espressif/esp-idf
1096 lines
23 KiB
CSS
1096 lines
23 KiB
CSS
/**
|
|
* Espressif Report Template Styles
|
|
* Optimized for desktop-only application
|
|
*/
|
|
|
|
/* Variables and base settings */
|
|
:root {
|
|
/* Color palette */
|
|
--esp-primary: #e83711;
|
|
--esp-secondary: #f3c300;
|
|
--esp-dark: #282430;
|
|
--esp-light: #f8f9fa;
|
|
--esp-blue: #3a86ff;
|
|
--esp-gray: #707070;
|
|
--esp-success: #25be7b;
|
|
--esp-warning: #f3c300;
|
|
--esp-danger: #e83711;
|
|
|
|
/* UI elements */
|
|
--body-bg: #f5f7fa;
|
|
--card-bg: #ffffff;
|
|
--text-color: #282430;
|
|
--border-radius: 8px;
|
|
--box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
|
--transition-speed: 0.3s;
|
|
|
|
/* Fixed desktop layout variables */
|
|
--container-width: 1600px;
|
|
--sidebar-width: 280px;
|
|
--header-height: 60px;
|
|
}
|
|
|
|
/* ---------------------------------- */
|
|
/* Base styles */
|
|
/* ---------------------------------- */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
"Helvetica Neue", Arial, sans-serif;
|
|
line-height: 1.6;
|
|
color: var(--text-color);
|
|
background-color: var(--body-bg);
|
|
transition: background-color var(--transition-speed);
|
|
min-width: 1024px;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.container-fluid {
|
|
max-width: 100% !important;
|
|
padding: 20px !important;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Typography */
|
|
h2 {
|
|
padding-top: 3rem;
|
|
margin-bottom: 0px;
|
|
color: var(--esp-dark);
|
|
font-weight: 600;
|
|
background-color: #f5f7fa;
|
|
}
|
|
|
|
/* ---------------------------------- */
|
|
/* Performance Optimizations */
|
|
/* ---------------------------------- */
|
|
/* Hardware acceleration utility class */
|
|
.hw-accelerated {
|
|
transform: translateZ(0);
|
|
will-change: transform;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
/* Scrollbar styling */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Reduced motion for accessibility */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
|
|
.bootstrap-table,
|
|
.section-body,
|
|
.sticky-header-container,
|
|
.section-header {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
/* ---------------------------------- */
|
|
/* Navigation and Header */
|
|
/* ---------------------------------- */
|
|
|
|
/* Header styling */
|
|
.report-header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 1.2rem 0;
|
|
margin-bottom: 2rem;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
position: relative;
|
|
justify-content: space-between;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.report-header .logo {
|
|
height: 30px;
|
|
margin-bottom: 0;
|
|
padding-left: 15px;
|
|
}
|
|
|
|
.report-header .title-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.report-header h1 {
|
|
margin: 0;
|
|
font-weight: 700;
|
|
font-size: 1.8rem;
|
|
line-height: 1.2;
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
|
|
.report-header p {
|
|
margin-bottom: 0;
|
|
font-size: 0.85rem;
|
|
text-align: center;
|
|
color: #707070;
|
|
}
|
|
|
|
.report-header::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -3px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background-color: var(--esp-primary);
|
|
}
|
|
|
|
.logo-container {
|
|
width: 180px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.spacer {
|
|
width: 180px; /* Same as logo-container for balance */
|
|
}
|
|
|
|
/* Navigation progress bar */
|
|
.nav-progress-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 3px;
|
|
background-color: transparent;
|
|
z-index: 1001;
|
|
}
|
|
|
|
.nav-progress-bar {
|
|
height: 100%;
|
|
width: 0;
|
|
background-color: var(--esp-primary);
|
|
transition: width 0.2s ease-out;
|
|
}
|
|
|
|
/* ---------------------------------- */
|
|
/* Tables - Complete Reset & Rebuild */
|
|
/* ---------------------------------- */
|
|
|
|
/* Base table appearance */
|
|
.table {
|
|
width: 100%;
|
|
margin-bottom: 0;
|
|
background-color: var(--card-bg);
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
/* Table header cells */
|
|
.table > thead > tr > th {
|
|
padding: 12px 15px;
|
|
font-weight: 600;
|
|
color: var(--esp-dark);
|
|
background-color: var(--esp-light);
|
|
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
|
|
text-align: left;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Table data cells */
|
|
.table > tbody > tr > td {
|
|
padding: 12px 15px;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* Striped rows */
|
|
.table-striped > tbody > tr:nth-of-type(odd) {
|
|
background-color: rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
.table-striped > tbody > tr:hover {
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* Bootstrap Table container */
|
|
.bootstrap-table {
|
|
border-radius: var(--border-radius);
|
|
overflow: hidden;
|
|
box-shadow: var(--box-shadow);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Bootstrap Table scrollable body */
|
|
.bootstrap-table .fixed-table-body {
|
|
max-height: 800px;
|
|
overflow-y: auto;
|
|
border: none !important;
|
|
}
|
|
|
|
/* Remove any borders from the fixed-table-container */
|
|
.bootstrap-table .fixed-table-container {
|
|
border: none !important;
|
|
}
|
|
|
|
/* Override Bootstrap's fixed header styles to avoid conflicts */
|
|
.bootstrap-table .fixed-table-header table {
|
|
background-color: var(--esp-light);
|
|
}
|
|
|
|
.bootstrap-table .fixed-table-header {
|
|
background-color: var(--esp-light);
|
|
}
|
|
|
|
/* Column width settings for better layout */
|
|
.table > thead > tr > th:nth-child(1),
|
|
.table > tbody > tr > td:nth-child(1) {
|
|
width: 20%;
|
|
min-width: 150px;
|
|
}
|
|
|
|
.table > thead > tr > th:nth-child(2),
|
|
.table > tbody > tr > td:nth-child(2) {
|
|
width: 20%;
|
|
min-width: 150px;
|
|
}
|
|
|
|
.table > thead > tr > th:nth-child(3),
|
|
.table > tbody > tr > td:nth-child(3) {
|
|
width: 20%;
|
|
min-width: 150px;
|
|
}
|
|
|
|
.table > thead > tr > th:nth-child(n + 4),
|
|
.table > tbody > tr > td:nth-child(n + 4) {
|
|
width: auto;
|
|
min-width: 100px;
|
|
}
|
|
|
|
/* Ensure sticky section headers are above table headers */
|
|
.sticky-section-header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
background-color: #f5f7fa;
|
|
}
|
|
|
|
/* Test case names */
|
|
td.test-case-name {
|
|
white-space: normal;
|
|
overflow: visible;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* Bootstrap table customizations */
|
|
.bootstrap-table {
|
|
margin-bottom: 0;
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--box-shadow);
|
|
background-color: var(--card-bg);
|
|
overflow: hidden;
|
|
max-height: 2000px;
|
|
transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
|
opacity: 1;
|
|
width: 100% !important;
|
|
position: relative;
|
|
}
|
|
|
|
.bootstrap-table.expanded {
|
|
max-height: 2000px;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Main container setup */
|
|
.bootstrap-table .fixed-table-container {
|
|
position: relative !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/* Table headers - sticky relative to .fixed-table-body */
|
|
.bootstrap-table .table thead th {
|
|
position: sticky !important;
|
|
top: 0 !important;
|
|
z-index: 10;
|
|
background-color: var(--esp-light);
|
|
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
|
|
padding: 12px 15px !important;
|
|
}
|
|
|
|
/* Fixed-table-header should be hidden when scrolling */
|
|
.bootstrap-table .fixed-table-header {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Handle Bootstrap Table sticky header container */
|
|
.bootstrap-table .sticky-header-container {
|
|
display: none !important; /* Use our own sticky headers instead */
|
|
}
|
|
|
|
/* Ensure th-inner elements are visible */
|
|
.bootstrap-table .fixed-table-container .table thead th .th-inner {
|
|
white-space: normal !important;
|
|
overflow: visible !important;
|
|
text-overflow: clip !important;
|
|
height: auto !important;
|
|
min-height: 20px;
|
|
line-height: 1.4;
|
|
padding: 8px;
|
|
background-color: var(--esp-light);
|
|
display: block !important;
|
|
}
|
|
|
|
/* Table container shouldn't have overflow-x at the top level */
|
|
.table-container {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
background-color: var(--card-bg);
|
|
border-radius: var(--border-radius);
|
|
overflow: hidden;
|
|
box-shadow: var(--box-shadow);
|
|
position: relative;
|
|
}
|
|
|
|
/* Fix for table header rendering in the sticky context */
|
|
.bootstrap-table thead {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Table controls */
|
|
.table-controls {
|
|
background-color: var(--esp-light);
|
|
border-top-left-radius: var(--border-radius);
|
|
border-top-right-radius: var(--border-radius);
|
|
padding: 12px 15px;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
.table-controls .row-count {
|
|
margin-bottom: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.table-controls .btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
/* Table toolbar */
|
|
.fixed-table-toolbar {
|
|
padding: 10px;
|
|
background-color: var(--esp-light);
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.fixed-table-toolbar .search {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.fixed-table-toolbar .search input {
|
|
border-radius: var(--border-radius);
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
padding: 5px 10px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.fixed-table-toolbar .columns {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.fixed-table-toolbar .btn {
|
|
border-radius: var(--border-radius);
|
|
padding: 5px 10px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.fixed-table-toolbar .dropdown-menu {
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--box-shadow);
|
|
padding: 8px;
|
|
border: none;
|
|
}
|
|
|
|
/* Table pagination */
|
|
.fixed-table-pagination {
|
|
padding: 10px;
|
|
background-color: var(--esp-light);
|
|
border-bottom-left-radius: var(--border-radius);
|
|
border-bottom-right-radius: var(--border-radius);
|
|
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.fixed-table-pagination .pagination {
|
|
float: none !important;
|
|
order: 1;
|
|
flex: 1 1 auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.fixed-table-pagination .pagination-detail .pagination-info {
|
|
display: none;
|
|
float: none !important;
|
|
order: 2;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.fixed-table-pagination .pagination li a {
|
|
border-radius: 4px;
|
|
margin: 0 2px;
|
|
border: 1px solid #dee2e6;
|
|
min-width: 34px;
|
|
height: 34px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--esp-dark);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.fixed-table-pagination .pagination li.active a {
|
|
background-color: var(--esp-primary);
|
|
border-color: var(--esp-primary);
|
|
color: white;
|
|
}
|
|
|
|
.fixed-table-pagination .pagination li a:hover:not(.active) {
|
|
background-color: #e9ecef;
|
|
color: var(--esp-primary);
|
|
}
|
|
|
|
/* Pagination options */
|
|
.pagination-options .form-select-sm {
|
|
border-radius: var(--border-radius);
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
height: 31px;
|
|
padding: 0.25rem 2rem 0.25rem 0.5rem;
|
|
font-size: 0.875rem;
|
|
background-color: var(--esp-light);
|
|
color: var(--esp-dark);
|
|
cursor: pointer;
|
|
transition: all var(--transition-speed);
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.pagination-options .form-select-sm:hover {
|
|
border-color: var(--esp-primary);
|
|
}
|
|
|
|
.pagination-options .form-select-sm:focus {
|
|
border-color: var(--esp-primary);
|
|
box-shadow: 0 0 0 0.15rem rgba(232, 55, 17, 0.25);
|
|
outline: none;
|
|
}
|
|
|
|
/* ---------------------------------- */
|
|
/* Collapsible Sections */
|
|
/* ---------------------------------- */
|
|
.section-collapsible {
|
|
margin-bottom: 2rem;
|
|
border-radius: var(--border-radius);
|
|
overflow: hidden;
|
|
box-shadow: var(--box-shadow);
|
|
background-color: var(--card-bg);
|
|
transition: transform var(--transition-speed);
|
|
}
|
|
|
|
.section-collapsible:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 1rem 1.5rem;
|
|
background-color: #f5f7fa;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
cursor: pointer;
|
|
transition: background-color var(--transition-speed),
|
|
box-shadow var(--transition-speed);
|
|
}
|
|
|
|
.section-header:hover {
|
|
background-color: #e9ecef;
|
|
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.section-header h2 {
|
|
margin: 0;
|
|
font-size: 1.5rem;
|
|
flex-grow: 1;
|
|
background-color: transparent;
|
|
position: relative;
|
|
z-index: 2;
|
|
font-weight: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.section-header h2 .heading-text {
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.section-header .collapse-indicator {
|
|
margin-left: 10px;
|
|
font-size: 1.5rem;
|
|
transition: transform var(--transition-speed);
|
|
color: var(--esp-primary);
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.section-header[aria-expanded="false"] .collapse-indicator {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.copy-link-icon {
|
|
margin-left: 8px;
|
|
font-size: 1.5rem;
|
|
color: var(--esp-gray);
|
|
opacity: 0.7;
|
|
cursor: pointer;
|
|
transition: opacity 0.2s ease, color 0.2s ease;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.copy-link-icon:hover {
|
|
opacity: 1;
|
|
color: var(--esp-primary);
|
|
}
|
|
|
|
.sticky-section-header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 99;
|
|
background-color: #f5f7fa;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.section-body {
|
|
padding: 1.5rem;
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out,
|
|
opacity 0.3s ease-in-out;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.section-body.expanded {
|
|
max-height: 5000px;
|
|
padding: 1.5rem;
|
|
opacity: 1;
|
|
}
|
|
|
|
.section-body.collapsed {
|
|
display: none;
|
|
}
|
|
|
|
/* ---------------------------------- */
|
|
/* Status Badges */
|
|
/* ---------------------------------- */
|
|
.status-badge {
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
min-width: 80px;
|
|
transition: background-color 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.status-badge.success {
|
|
background-color: rgba(37, 190, 123, 0.1);
|
|
color: var(--esp-success);
|
|
border: 1px solid rgba(37, 190, 123, 0.2);
|
|
}
|
|
|
|
.status-badge.warning {
|
|
background-color: rgba(243, 195, 0, 0.1);
|
|
color: var(--esp-warning);
|
|
border: 1px solid rgba(243, 195, 0, 0.2);
|
|
}
|
|
|
|
.status-badge.danger {
|
|
background-color: rgba(232, 55, 17, 0.1);
|
|
color: var(--esp-danger);
|
|
border: 1px solid rgba(232, 55, 17, 0.2);
|
|
}
|
|
|
|
.status-badge:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* ---------------------------------- */
|
|
/* Buttons */
|
|
/* ---------------------------------- */
|
|
.btn-outline-secondary {
|
|
border-color: #ced4da;
|
|
color: var(--esp-dark);
|
|
}
|
|
|
|
.btn-outline-secondary:hover {
|
|
background-color: var(--esp-light);
|
|
border-color: var(--esp-gray);
|
|
color: var(--esp-dark);
|
|
}
|
|
|
|
.btn-esp {
|
|
background-color: var(--esp-primary);
|
|
border: none;
|
|
color: #fff;
|
|
transition: all var(--transition-speed);
|
|
}
|
|
|
|
.btn-esp:hover {
|
|
background-color: #cf3110;
|
|
color: #fff;
|
|
box-shadow: 0 4px 8px rgba(232, 55, 17, 0.2);
|
|
}
|
|
|
|
.btn-esp-secondary {
|
|
background-color: var(--esp-secondary);
|
|
border: none;
|
|
color: var(--esp-dark);
|
|
transition: all var(--transition-speed);
|
|
}
|
|
|
|
.btn-esp-secondary:hover {
|
|
background-color: #dab000;
|
|
color: var(--esp-dark);
|
|
box-shadow: 0 4px 8px rgba(243, 195, 0, 0.2);
|
|
}
|
|
|
|
/* Table collapse button - updated to appear on the right */
|
|
.table-collapse-btn {
|
|
background-color: var(--esp-light);
|
|
border: none;
|
|
color: var(--esp-gray);
|
|
padding: 6px 12px;
|
|
border-radius: var(--border-radius);
|
|
font-size: 0.875rem;
|
|
cursor: pointer;
|
|
transition: all var(--transition-speed);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
margin-left: auto; /* Push to the right side */
|
|
}
|
|
|
|
.table-collapse-btn:hover {
|
|
background-color: #e9ecef;
|
|
color: var(--esp-primary);
|
|
}
|
|
|
|
.table-collapse-btn i {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.clear-filter-btn {
|
|
transition: all 0.2s ease;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.clear-filter-btn:hover {
|
|
background-color: var(--esp-light);
|
|
color: var(--esp-primary);
|
|
}
|
|
|
|
.close-alert {
|
|
background: none;
|
|
border: none;
|
|
color: #856404;
|
|
font-size: 0.8rem;
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
margin-left: auto;
|
|
opacity: 0.7;
|
|
transition: opacity 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.close-alert:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Floating action buttons */
|
|
.floating-actions {
|
|
position: fixed;
|
|
bottom: 30px;
|
|
right: 30px;
|
|
z-index: 1000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.floating-action-btn {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background-color: var(--esp-primary);
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
|
|
cursor: pointer;
|
|
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
|
|
background-color 0.3s ease, box-shadow 0.3s ease;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.floating-action-btn:hover {
|
|
transform: scale(1.1) translateY(-2px);
|
|
}
|
|
|
|
.back-to-top {
|
|
background-color: var(--esp-secondary);
|
|
color: var(--esp-dark);
|
|
}
|
|
|
|
/* ---------------------------------- */
|
|
/* Utilities */
|
|
/* ---------------------------------- */
|
|
/* Text toggles */
|
|
.text-toggle,
|
|
.full-text {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.toggle-link {
|
|
display: inline-block;
|
|
margin-left: 8px;
|
|
font-size: 0.8rem;
|
|
color: var(--esp-blue);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.toggle-link:hover {
|
|
text-decoration: underline;
|
|
color: var(--esp-primary);
|
|
}
|
|
|
|
/* Row count label */
|
|
.row-count {
|
|
font-size: 0.8rem;
|
|
color: var(--esp-gray);
|
|
margin-bottom: 15px;
|
|
display: block;
|
|
}
|
|
|
|
/* Table state indicators */
|
|
.table-empty-state,
|
|
.table-loading-state {
|
|
text-align: center;
|
|
padding: 50px 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.table-empty-state {
|
|
color: var(--esp-gray);
|
|
background-color: rgba(0, 0, 0, 0.01);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.table-empty-state p {
|
|
margin-top: 10px;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.table-filtered-indicator {
|
|
text-align: center;
|
|
padding: 30px 20px;
|
|
color: var(--esp-warning);
|
|
background-color: rgba(243, 195, 0, 0.05);
|
|
border-radius: var(--border-radius);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px dashed rgba(243, 195, 0, 0.3);
|
|
margin: 20px;
|
|
}
|
|
|
|
.table-filtered-indicator p {
|
|
margin: 10px 0;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.table-loading-indicator {
|
|
padding: 20px;
|
|
background-color: rgba(0, 0, 0, 0.02);
|
|
border-radius: var(--border-radius);
|
|
margin: 10px;
|
|
text-align: center;
|
|
color: var(--esp-gray);
|
|
animation: pulse 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
opacity: 0.6;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Dropdown and other UI elements */
|
|
.dropdown-menu {
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--box-shadow);
|
|
border: none;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.dropdown-item {
|
|
border-radius: 4px;
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.dropdown-item:hover {
|
|
background-color: rgba(232, 55, 17, 0.1);
|
|
}
|
|
|
|
/* Column visibility controls */
|
|
.column-visibility-controls {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.column-visibility-menu {
|
|
max-height: 350px;
|
|
overflow-y: auto;
|
|
padding: 8px 0;
|
|
min-width: 220px;
|
|
}
|
|
|
|
.column-visibility-menu .dropdown-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 16px;
|
|
white-space: normal;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.column-visibility-menu .dropdown-item:hover {
|
|
background-color: rgba(232, 55, 17, 0.05);
|
|
}
|
|
|
|
.column-visibility-menu .dropdown-header {
|
|
font-weight: 600;
|
|
color: var(--esp-dark);
|
|
padding: 8px 16px;
|
|
}
|
|
|
|
.column-visibility-menu .dropdown-divider {
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.column-toggle .column-hidden {
|
|
width: 16px;
|
|
color: var(--esp-primary);
|
|
}
|
|
|
|
.column-toggle .column-hidden {
|
|
color: var(--esp-gray);
|
|
}
|
|
|
|
/* Active filters */
|
|
#active-filters {
|
|
margin-top: 10px;
|
|
margin-bottom: 15px !important;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #f8f9fa;
|
|
padding: 8px 12px;
|
|
border-radius: var(--border-radius);
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
#filter-badges .badge {
|
|
margin-right: 5px;
|
|
padding: 6px 10px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
#clear-all-filters {
|
|
margin-left: auto;
|
|
color: var(--esp-primary);
|
|
text-decoration: none;
|
|
font-size: 0.9rem;
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
#clear-all-filters:hover {
|
|
text-decoration: underline;
|
|
background-color: rgba(232, 55, 17, 0.05);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Tooltip actions */
|
|
.tooltip-actions {
|
|
position: absolute;
|
|
right: 60px;
|
|
background-color: white;
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--box-shadow);
|
|
padding: 10px;
|
|
width: 200px;
|
|
display: none;
|
|
}
|
|
|
|
.tooltip-actions.show {
|
|
display: block;
|
|
animation: fadeIn var(--transition-speed);
|
|
}
|
|
|
|
/* Smooth scrolling */
|
|
html.scrolling-top {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* ---------------------------------- */
|
|
/* Responsive Styles */
|
|
/* ---------------------------------- */
|
|
@media (max-width: 1200px) {
|
|
.bootstrap-table .fixed-table-body {
|
|
overflow-x: auto;
|
|
max-height: 600px;
|
|
}
|
|
|
|
.table-container {
|
|
width: 100% !important;
|
|
padding: 0 !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.container-fluid {
|
|
padding-left: 20px !important;
|
|
padding-right: 20px !important;
|
|
}
|
|
|
|
.table-responsive {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.bootstrap-table .fixed-table-body {
|
|
max-height: 500px;
|
|
}
|
|
|
|
.table-controls {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.table-controls-right {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.logo-container,
|
|
.spacer {
|
|
width: 100px;
|
|
}
|
|
}
|
|
|
|
/* ---------------------------------- */
|
|
/* Bootstrap Table Sticky Header Specific Styles */
|
|
/* ---------------------------------- */
|
|
|
|
/* Make sure sticky header container is visible and properly positioned */
|
|
.bootstrap-table .sticky-header-container {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
background-color: var(--esp-light);
|
|
}
|
|
|
|
/* Ensure the sticky header is properly styled and visible */
|
|
.bootstrap-table .sticky-header {
|
|
overflow: visible;
|
|
position: relative;
|
|
}
|
|
|
|
/* Styles for the headers in the sticky container */
|
|
.bootstrap-table .sticky-header-container thead th {
|
|
background-color: var(--esp-light);
|
|
color: var(--esp-dark);
|
|
font-weight: 600;
|
|
padding: 12px 15px;
|
|
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
|
|
text-align: left;
|
|
position: static !important; /* Important to avoid double sticky behavior */
|
|
}
|
|
|
|
/* Styles for header cells inner content */
|
|
.bootstrap-table .sticky-header-container th .th-inner {
|
|
padding: 0 !important;
|
|
line-height: 1.4;
|
|
white-space: normal !important;
|
|
overflow: visible !important;
|
|
text-overflow: clip !important;
|
|
font-weight: inherit !important;
|
|
}
|