199 lines
5.1 KiB
CSS
199 lines
5.1 KiB
CSS
/**
|
|
* SecuBox Cascade Layout System
|
|
* Provides cascading layers for menus, tabs, categories and contextual views.
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
[data-cascade-root],
|
|
.sb-cascade-root {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--cyber-space-md, 1rem);
|
|
}
|
|
|
|
.sb-cascade-layer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: stretch;
|
|
gap: var(--cyber-space-sm, 0.5rem);
|
|
position: relative;
|
|
}
|
|
|
|
.sb-cascade-layer[data-cascade-layer="menu"],
|
|
.sb-cascade-layer[data-cascade-layer="tabs"],
|
|
.sb-cascade-layer[data-cascade-layer="categories"] {
|
|
padding: calc(var(--cyber-space-sm, 0.5rem) + 2px);
|
|
background: rgba(15, 23, 42, 0.85);
|
|
border-radius: var(--cyber-radius-lg, 20px);
|
|
border: 1px solid rgba(148, 163, 184, 0.15);
|
|
backdrop-filter: blur(14px);
|
|
box-shadow: 0 18px 36px rgba(2, 6, 23, 0.45);
|
|
}
|
|
|
|
.sb-cascade-layer[data-cascade-layer="menu"]::after,
|
|
.sb-cascade-layer[data-cascade-layer="tabs"]::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 6px;
|
|
border-radius: inherit;
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.sb-cascade-layer[data-cascade-layer="view"] {
|
|
display: grid;
|
|
gap: var(--cyber-space-md, 1rem);
|
|
}
|
|
|
|
.sb-cascade-layer[data-cascade-layer="actions"] {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--cyber-space-sm, 0.5rem);
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.sb-cascade-layer[data-cascade-depth="1"] {
|
|
gap: var(--cyber-space-md, 1rem);
|
|
}
|
|
|
|
.sb-cascade-layer[data-cascade-depth="2"] {
|
|
gap: var(--cyber-space-sm, 0.5rem);
|
|
}
|
|
|
|
.sb-cascade-layer[data-cascade-depth="3"] {
|
|
gap: var(--cyber-space-xs, 0.25rem);
|
|
}
|
|
|
|
.sb-cascade-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--cyber-space-xs, 0.25rem);
|
|
padding: 0.55rem 1.1rem;
|
|
border-radius: var(--cyber-radius-sm, 10px);
|
|
border: 1px solid rgba(148, 163, 184, 0.35);
|
|
background: transparent;
|
|
color: var(--cyber-text-secondary, #94a3b8);
|
|
font-family: var(--cyber-font-body, 'Inter', sans-serif);
|
|
font-size: var(--cyber-text-sm, 0.875rem);
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
transition:
|
|
color var(--cyber-transition, 0.22s ease),
|
|
background var(--cyber-transition, 0.22s ease),
|
|
border-color var(--cyber-transition, 0.22s ease),
|
|
box-shadow var(--cyber-transition-fast, 0.12s ease),
|
|
transform var(--cyber-transition-fast, 0.12s ease);
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.sb-cascade-layer[data-cascade-layer="categories"] .sb-cascade-item {
|
|
text-transform: none;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.sb-cascade-item:hover {
|
|
border-color: rgba(99, 102, 241, 0.6);
|
|
color: var(--cyber-text-primary, #e2e8f0);
|
|
box-shadow: 0 10px 24px rgba(11, 22, 63, 0.45);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.sb-cascade-item[data-state="active"] {
|
|
color: var(--cyber-text-inverse, #0a0e27);
|
|
background: var(--cyber-gradient-primary, linear-gradient(135deg, #667eea, #764ba2));
|
|
border-color: transparent;
|
|
box-shadow: 0 18px 36px rgba(102, 126, 234, 0.45);
|
|
}
|
|
|
|
.sb-cascade-item[data-state="disabled"],
|
|
.sb-cascade-item[disabled] {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.sb-cascade-item[data-state="pending"] {
|
|
border-color: rgba(6, 182, 212, 0.5);
|
|
color: var(--cyber-accent-secondary, #06b6d4);
|
|
}
|
|
|
|
.sb-cascade-icon {
|
|
font-size: 1.1rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.sb-cascade-badge {
|
|
min-width: 1.5rem;
|
|
padding: 0.1rem 0.45rem;
|
|
border-radius: 999px;
|
|
font-size: 0.7rem;
|
|
line-height: 1.2;
|
|
background: rgba(15, 118, 110, 0.18);
|
|
color: #5eead4;
|
|
border: 1px solid rgba(94, 234, 212, 0.35);
|
|
}
|
|
|
|
.sb-cascade-layer[data-cascade-layer="view"][data-cascade-role="modules"] {
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
}
|
|
|
|
.sb-cascade-layer[data-cascade-layer="view"][data-cascade-role="modules"][data-cascade-filter="list"] {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.sb-cascade-layer[data-cascade-layer="view"][data-cascade-role="modules"]::before {
|
|
content: attr(data-cascade-context);
|
|
display: none;
|
|
}
|
|
|
|
.sb-cascade-layer[data-cascade-layer="view"] [data-cascade-item] {
|
|
position: relative;
|
|
}
|
|
|
|
.sb-cascade-layer[data-cascade-layer="view"] [data-module-enabled="0"] {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.sb-cascade-layer[data-cascade-layer="view"] [data-module-installed="0"] {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.sb-cascade-layer[data-cascade-layer="actions"] .sb-cascade-item {
|
|
text-transform: none;
|
|
}
|
|
|
|
.sb-cascade-layer[data-cascade-layer="actions"] .sb-cascade-item[data-cascade-action="enable"] {
|
|
background: rgba(34, 197, 94, 0.12);
|
|
border-color: rgba(34, 197, 94, 0.6);
|
|
color: #4ade80;
|
|
}
|
|
|
|
.sb-cascade-layer[data-cascade-layer="actions"] .sb-cascade-item[data-cascade-action="disable"] {
|
|
background: rgba(239, 68, 68, 0.12);
|
|
border-color: rgba(239, 68, 68, 0.5);
|
|
color: #f87171;
|
|
}
|
|
|
|
.sb-cascade-layer[data-cascade-layer="actions"] .sb-cascade-item[data-cascade-action="navigate"] {
|
|
background: rgba(99, 102, 241, 0.15);
|
|
border-color: rgba(99, 102, 241, 0.4);
|
|
color: #c7d2fe;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.sb-cascade-layer[data-cascade-layer="menu"],
|
|
.sb-cascade-layer[data-cascade-layer="tabs"],
|
|
.sb-cascade-layer[data-cascade-layer="categories"] {
|
|
overflow-x: auto;
|
|
flex-wrap: nowrap;
|
|
scroll-snap-type: x mandatory;
|
|
}
|
|
|
|
.sb-cascade-item {
|
|
scroll-snap-align: start;
|
|
}
|
|
}
|