mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-25 14:25:02 +00:00
JohnDoe6345789
14df5c377d
feat: Implement StreamCast package with detailed module structure and initialization refactor: Simplify player module by re-exporting single-function modules for better maintainability feat: Add detailed documentation for player controls and overlay components feat: Improve scene management with new component structures and enhanced functionality feat: Revamp scheduling facade with modular rendering and action handling
348 lines
7.0 KiB
SCSS
348 lines
7.0 KiB
SCSS
/* Table component styles */
|
|
|
|
/* ===== Table Container ===== */
|
|
.tableContainer {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
border-radius: var(--shape-border-radius, 4px);
|
|
|
|
&::-webkit-scrollbar {
|
|
height: 8px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background: var(--color-background-default, #f5f5f5);
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background: var(--color-text-disabled, #bdbdbd);
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
/* ===== Base Table ===== */
|
|
.table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
font-family: var(--font-family-body, 'IBM Plex Sans', sans-serif);
|
|
font-size: var(--font-size-body1, 14px);
|
|
background-color: var(--color-background-paper, #fff);
|
|
|
|
/* Size variants */
|
|
&.small {
|
|
.cell {
|
|
padding: 6px 12px;
|
|
font-size: var(--font-size-body2, 13px);
|
|
}
|
|
}
|
|
|
|
&.medium {
|
|
.cell {
|
|
padding: 12px 16px;
|
|
}
|
|
}
|
|
|
|
&.large {
|
|
.cell {
|
|
padding: 16px 20px;
|
|
font-size: var(--font-size-body1, 14px);
|
|
}
|
|
}
|
|
|
|
/* Sticky header */
|
|
&.stickyHeader {
|
|
.head {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
background-color: var(--color-background-paper, #fff);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ===== Table Head ===== */
|
|
.head {
|
|
background-color: var(--color-background-default, #fafafa);
|
|
|
|
.cell {
|
|
font-weight: 600;
|
|
color: var(--color-text-primary, rgba(0, 0, 0, 0.87));
|
|
border-bottom: 2px solid var(--color-divider, rgba(0, 0, 0, 0.12));
|
|
}
|
|
}
|
|
|
|
/* ===== Table Body ===== */
|
|
.body {
|
|
.row:last-child .cell {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
/* ===== Table Footer ===== */
|
|
.footer {
|
|
background-color: var(--color-background-default, #fafafa);
|
|
|
|
.cell {
|
|
font-weight: 500;
|
|
border-top: 2px solid var(--color-divider, rgba(0, 0, 0, 0.12));
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
/* ===== Table Row ===== */
|
|
.row {
|
|
transition: background-color 150ms ease-in-out;
|
|
|
|
&.hover:hover {
|
|
background-color: var(--color-action-hover, rgba(0, 0, 0, 0.04));
|
|
}
|
|
|
|
&.selected {
|
|
background-color: var(--color-primary-light, rgba(25, 118, 210, 0.08));
|
|
|
|
&:hover {
|
|
background-color: var(--color-primary-light, rgba(25, 118, 210, 0.12));
|
|
}
|
|
}
|
|
|
|
&.clickable {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
/* Striped rows */
|
|
.striped .body .row:nth-child(odd) {
|
|
background-color: var(--color-action-hover, rgba(0, 0, 0, 0.02));
|
|
|
|
&:hover {
|
|
background-color: var(--color-action-hover, rgba(0, 0, 0, 0.06));
|
|
}
|
|
}
|
|
|
|
/* ===== Table Cell ===== */
|
|
.cell {
|
|
padding: 12px 16px;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--color-divider, rgba(0, 0, 0, 0.12));
|
|
vertical-align: middle;
|
|
color: var(--color-text-primary, rgba(0, 0, 0, 0.87));
|
|
|
|
/* Alignment */
|
|
&.alignLeft {
|
|
text-align: left;
|
|
}
|
|
|
|
&.alignCenter {
|
|
text-align: center;
|
|
}
|
|
|
|
&.alignRight {
|
|
text-align: right;
|
|
}
|
|
|
|
&.alignJustify {
|
|
text-align: justify;
|
|
}
|
|
|
|
/* Padding variants */
|
|
&.paddingCheckbox {
|
|
width: 48px;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
&.paddingNone {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
/* ===== Sort Label ===== */
|
|
.sortLabel {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
font-weight: inherit;
|
|
color: inherit;
|
|
transition: color 150ms ease-in-out;
|
|
|
|
&:hover {
|
|
color: var(--color-text-primary, rgba(0, 0, 0, 0.87));
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
color: var(--color-primary-main, #1976d2);
|
|
}
|
|
|
|
&.active {
|
|
color: var(--color-text-primary, rgba(0, 0, 0, 0.87));
|
|
}
|
|
|
|
&:not(.active) {
|
|
color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
|
|
|
|
.sortIcon {
|
|
opacity: 0;
|
|
transition: opacity 150ms ease-in-out;
|
|
}
|
|
|
|
&:hover .sortIcon {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sortIcon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
opacity: 1;
|
|
transition: transform 200ms ease-in-out, opacity 150ms ease-in-out;
|
|
|
|
&.asc {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
&.desc {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
/* ===== Pagination ===== */
|
|
.pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding: 12px 16px;
|
|
gap: 16px;
|
|
font-size: var(--font-size-body2, 13px);
|
|
color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
|
|
border-top: 1px solid var(--color-divider, rgba(0, 0, 0, 0.12));
|
|
|
|
&.toolbar {
|
|
min-height: 52px;
|
|
padding: 8px 2px;
|
|
}
|
|
}
|
|
|
|
.paginationLabel {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.paginationSelect {
|
|
appearance: none;
|
|
padding: 6px 24px 6px 8px;
|
|
border: 1px solid var(--color-divider, rgba(0, 0, 0, 0.23));
|
|
border-radius: 4px;
|
|
font-size: inherit;
|
|
font-family: inherit;
|
|
background-color: var(--color-background-paper, #fff);
|
|
cursor: pointer;
|
|
transition: border-color 150ms ease-in-out;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 4px center;
|
|
background-size: 16px;
|
|
|
|
&:hover {
|
|
border-color: var(--color-text-primary, rgba(0, 0, 0, 0.87));
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: var(--color-primary-main, #1976d2);
|
|
}
|
|
}
|
|
|
|
.paginationSpacer {
|
|
flex: 1 1 100%;
|
|
}
|
|
|
|
.paginationDisplayed {
|
|
flex-shrink: 0;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.paginationActions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.paginationBtn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 50%;
|
|
background-color: transparent;
|
|
color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
|
|
cursor: pointer;
|
|
transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
|
|
|
|
&:hover:not(:disabled) {
|
|
background-color: var(--color-action-hover, rgba(0, 0, 0, 0.04));
|
|
color: var(--color-text-primary, rgba(0, 0, 0, 0.87));
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
|
|
/* ===== Bordered variant ===== */
|
|
.bordered {
|
|
border: 1px solid var(--color-divider, rgba(0, 0, 0, 0.12));
|
|
border-radius: var(--shape-border-radius, 4px);
|
|
|
|
.cell {
|
|
border: 1px solid var(--color-divider, rgba(0, 0, 0, 0.12));
|
|
}
|
|
}
|
|
|
|
/* ===== Compact variant ===== */
|
|
.compact {
|
|
.cell {
|
|
padding: 4px 8px;
|
|
font-size: var(--font-size-caption, 12px);
|
|
}
|
|
}
|
|
|
|
/* ===== Dark mode support ===== */
|
|
@media (prefers-color-scheme: dark) {
|
|
.table {
|
|
background-color: var(--color-background-paper-dark, #1e1e1e);
|
|
}
|
|
|
|
.head {
|
|
background-color: var(--color-background-default-dark, #121212);
|
|
}
|
|
|
|
.cell {
|
|
color: var(--color-text-primary-dark, #fff);
|
|
border-color: var(--color-divider-dark, rgba(255, 255, 255, 0.12));
|
|
}
|
|
|
|
.row.hover:hover {
|
|
background-color: var(--color-action-hover-dark, rgba(255, 255, 255, 0.08));
|
|
}
|
|
|
|
.paginationSelect {
|
|
background-color: var(--color-background-paper-dark, #1e1e1e);
|
|
border-color: var(--color-divider-dark, rgba(255, 255, 255, 0.23));
|
|
color: var(--color-text-primary-dark, #fff);
|
|
}
|
|
}
|