Initial commit: Clean DSS implementation
Migrated from design-system-swarm with fresh git history.
Old project history preserved in /home/overbits/apps/design-system-swarm
Core components:
- MCP Server (Python FastAPI with mcp 1.23.1)
- Claude Plugin (agents, commands, skills, strategies, hooks, core)
- DSS Backend (dss-mvp1 - token translation, Figma sync)
- Admin UI (Node.js/React)
- Server (Node.js/Express)
- Storybook integration (dss-mvp1/.storybook)
Self-contained configuration:
- All paths relative or use DSS_BASE_PATH=/home/overbits/dss
- PYTHONPATH configured for dss-mvp1 and dss-claude-plugin
- .env file with all configuration
- Claude plugin uses ${CLAUDE_PLUGIN_ROOT} for portability
Migration completed: $(date)
🤖 Clean migration with full functionality preserved
This commit is contained in:
Digital Production Factory
750
admin-ui/css/dss-components.css
Normal file
750
admin-ui/css/dss-components.css
Normal file
@@ -0,0 +1,750 @@
|
||||
/**
|
||||
* DSS Components - Layer 3 (Component Styles)
|
||||
*
|
||||
* All component styling using semantic tokens from dss-theme.css.
|
||||
*
|
||||
* FIRST PRINCIPLES:
|
||||
* - This layer references semantic tokens (--header-*, --sidebar-*, etc.)
|
||||
* - NO fallback values - tokens and theme layers MUST load first
|
||||
* - If layers are missing, theme-loader.js handles it
|
||||
* - Uses BEM methodology for class naming
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
App Header
|
||||
========================================================================== */
|
||||
|
||||
.app-header {
|
||||
background-color: var(--header-bg);
|
||||
border-bottom: 1px solid var(--header-border);
|
||||
color: var(--header-text);
|
||||
padding: 0 var(--ds-space-4);
|
||||
gap: var(--ds-space-4);
|
||||
height: var(--header-height);
|
||||
}
|
||||
|
||||
.app-header__project-selector {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.app-header__team-selector {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.app-header__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--ds-space-2);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Sidebar
|
||||
========================================================================== */
|
||||
|
||||
.sidebar {
|
||||
background-color: var(--sidebar-bg);
|
||||
border-right: 1px solid var(--sidebar-border);
|
||||
color: var(--sidebar-text);
|
||||
padding: var(--ds-space-4);
|
||||
width: var(--sidebar-width);
|
||||
}
|
||||
|
||||
.sidebar__header {
|
||||
margin-bottom: var(--ds-space-6);
|
||||
}
|
||||
|
||||
.sidebar__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--ds-space-2);
|
||||
font-weight: var(--ds-font-weight-semibold);
|
||||
font-size: var(--ds-font-size-lg);
|
||||
}
|
||||
|
||||
.sidebar__logo-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: var(--ds-color-primary);
|
||||
color: var(--ds-color-primary-foreground);
|
||||
border-radius: var(--ds-radius-md);
|
||||
}
|
||||
|
||||
.sidebar__nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--ds-space-2);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar__help {
|
||||
margin-top: auto;
|
||||
padding-top: var(--ds-space-4);
|
||||
border-top: 1px solid var(--sidebar-border);
|
||||
}
|
||||
|
||||
.sidebar__footer {
|
||||
margin-top: var(--ds-space-4);
|
||||
padding-top: var(--ds-space-4);
|
||||
border-top: 1px solid var(--sidebar-border);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Navigation
|
||||
========================================================================== */
|
||||
|
||||
.nav-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--ds-space-1);
|
||||
}
|
||||
|
||||
.nav-section + .nav-section {
|
||||
margin-top: var(--ds-space-4);
|
||||
padding-top: var(--ds-space-4);
|
||||
border-top: 1px solid var(--sidebar-border);
|
||||
}
|
||||
|
||||
.nav-section__title {
|
||||
font-size: var(--ds-font-size-xs);
|
||||
font-weight: var(--ds-font-weight-semibold);
|
||||
color: var(--nav-section-title);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--ds-letter-spacing-wider);
|
||||
padding: var(--ds-space-2) var(--ds-space-3);
|
||||
}
|
||||
|
||||
.nav-section__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--ds-space-1);
|
||||
}
|
||||
|
||||
/* Sub-sections within nav sections */
|
||||
.nav-sub-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--ds-space-1);
|
||||
margin-top: var(--ds-space-1);
|
||||
}
|
||||
|
||||
.nav-sub-section__title {
|
||||
font-size: var(--ds-font-size-xs);
|
||||
font-weight: var(--ds-font-weight-medium);
|
||||
color: var(--nav-section-title);
|
||||
padding: var(--ds-space-1) var(--ds-space-3);
|
||||
padding-left: var(--ds-space-4);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Navigation item levels */
|
||||
.nav-item--level-1 {
|
||||
padding-left: var(--ds-space-3);
|
||||
}
|
||||
|
||||
.nav-item--level-2 {
|
||||
padding-left: var(--ds-space-6);
|
||||
font-size: var(--ds-font-size-sm);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--nav-item-gap);
|
||||
padding: var(--nav-item-padding);
|
||||
border-radius: var(--nav-item-radius);
|
||||
color: var(--nav-item-text);
|
||||
font-size: var(--ds-font-size-sm);
|
||||
font-weight: var(--ds-font-weight-medium);
|
||||
transition: all var(--ds-transition-fast) var(--ds-ease-out);
|
||||
border: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background-color: var(--nav-item-bg-hover);
|
||||
color: var(--nav-item-text);
|
||||
}
|
||||
|
||||
.nav-item:focus {
|
||||
outline: none;
|
||||
border-color: var(--nav-item-border-focus);
|
||||
background-color: var(--nav-item-bg-hover);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background-color: var(--nav-item-bg-active);
|
||||
color: var(--nav-item-text-active);
|
||||
font-weight: var(--ds-font-weight-semibold);
|
||||
}
|
||||
|
||||
.nav-item__icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.7;
|
||||
transition: transform var(--ds-transition-fast) var(--ds-ease-out);
|
||||
}
|
||||
|
||||
.nav-item:hover .nav-item__icon {
|
||||
transform: scale(1.05);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Main Content Area
|
||||
========================================================================== */
|
||||
|
||||
.app-main {
|
||||
background-color: var(--main-bg);
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.app-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--ds-space-6);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Landing Page
|
||||
========================================================================== */
|
||||
|
||||
.landing-page {
|
||||
display: none;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
padding: var(--ds-space-6);
|
||||
background-color: var(--landing-bg);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.landing-page.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.landing-hero {
|
||||
text-align: center;
|
||||
padding: var(--ds-space-8) 0;
|
||||
margin-bottom: var(--ds-space-8);
|
||||
}
|
||||
|
||||
.landing-hero h1 {
|
||||
font-size: var(--ds-font-size-3xl);
|
||||
font-weight: var(--ds-font-weight-bold);
|
||||
color: var(--landing-hero-text);
|
||||
margin-bottom: var(--ds-space-3);
|
||||
}
|
||||
|
||||
.landing-hero p {
|
||||
font-size: var(--ds-font-size-lg);
|
||||
color: var(--landing-hero-subtitle);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.landing-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--ds-space-8);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Dashboard Category
|
||||
========================================================================== */
|
||||
|
||||
.dashboard-category {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--ds-space-4);
|
||||
}
|
||||
|
||||
.dashboard-category__title {
|
||||
font-size: var(--ds-font-size-lg);
|
||||
font-weight: var(--ds-font-weight-semibold);
|
||||
color: var(--category-title-text);
|
||||
padding-bottom: var(--ds-space-3);
|
||||
border-bottom: 1px solid var(--category-title-border);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Dashboard Grid
|
||||
========================================================================== */
|
||||
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: var(--ds-space-4);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Dashboard Card
|
||||
========================================================================== */
|
||||
|
||||
.dashboard-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: var(--ds-space-5);
|
||||
background-color: var(--dashboard-card-bg);
|
||||
border: 1px solid var(--dashboard-card-border);
|
||||
border-radius: var(--card-radius);
|
||||
color: var(--dashboard-card-text);
|
||||
cursor: pointer;
|
||||
transition: all var(--ds-transition-normal) var(--ds-ease-out);
|
||||
text-decoration: none;
|
||||
gap: var(--ds-space-3);
|
||||
}
|
||||
|
||||
.dashboard-card:hover {
|
||||
border-color: var(--dashboard-card-border-hover);
|
||||
box-shadow: var(--dashboard-card-shadow-hover);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.dashboard-card:focus {
|
||||
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
||||
outline-offset: var(--focus-ring-offset);
|
||||
}
|
||||
|
||||
.dashboard-card__icon {
|
||||
font-size: var(--ds-font-size-2xl);
|
||||
}
|
||||
|
||||
.dashboard-card__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--ds-space-1);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dashboard-card__title {
|
||||
font-size: var(--ds-font-size-base);
|
||||
font-weight: var(--ds-font-weight-semibold);
|
||||
color: var(--dashboard-card-text);
|
||||
}
|
||||
|
||||
.dashboard-card__description {
|
||||
font-size: var(--ds-font-size-sm);
|
||||
color: var(--dashboard-card-text-muted);
|
||||
line-height: var(--ds-line-height-relaxed);
|
||||
}
|
||||
|
||||
.dashboard-card__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
color: var(--dashboard-card-text-muted);
|
||||
font-size: var(--ds-font-size-lg);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
AI Sidebar (Right Panel)
|
||||
========================================================================== */
|
||||
|
||||
.app-sidebar {
|
||||
width: 360px;
|
||||
background-color: var(--sidebar-bg);
|
||||
border-left: 1px solid var(--sidebar-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-sidebar[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Buttons
|
||||
========================================================================== */
|
||||
|
||||
ds-button,
|
||||
.ds-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--ds-space-2);
|
||||
padding: var(--button-padding-y) var(--button-padding-x);
|
||||
font-size: var(--button-font-size);
|
||||
font-weight: var(--button-font-weight);
|
||||
border-radius: var(--button-radius);
|
||||
transition: all var(--ds-transition-fast) var(--ds-ease-out);
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
ds-button[data-variant="default"],
|
||||
.ds-button--default {
|
||||
background-color: var(--button-bg);
|
||||
color: var(--button-text);
|
||||
border-color: var(--button-border);
|
||||
}
|
||||
|
||||
ds-button[data-variant="default"]:hover,
|
||||
.ds-button--default:hover {
|
||||
background-color: var(--button-bg-hover);
|
||||
}
|
||||
|
||||
ds-button[data-variant="ghost"],
|
||||
.ds-button--ghost {
|
||||
background-color: var(--button-ghost-bg);
|
||||
color: var(--button-ghost-text);
|
||||
}
|
||||
|
||||
ds-button[data-variant="ghost"]:hover,
|
||||
.ds-button--ghost:hover {
|
||||
background-color: var(--button-ghost-bg-hover);
|
||||
}
|
||||
|
||||
ds-button[data-variant="outline"],
|
||||
.ds-button--outline {
|
||||
background-color: var(--button-outline-bg);
|
||||
color: var(--button-outline-text);
|
||||
border-color: var(--button-outline-border);
|
||||
}
|
||||
|
||||
ds-button[data-variant="outline"]:hover,
|
||||
.ds-button--outline:hover {
|
||||
background-color: var(--button-outline-bg-hover);
|
||||
}
|
||||
|
||||
ds-button[data-size="icon"],
|
||||
.ds-button--icon {
|
||||
padding: var(--ds-space-2);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
ds-button:focus,
|
||||
.ds-button:focus {
|
||||
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
||||
outline-offset: var(--focus-ring-offset);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Cards
|
||||
========================================================================== */
|
||||
|
||||
ds-card,
|
||||
.ds-card {
|
||||
display: block;
|
||||
background-color: var(--card-bg);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: var(--card-radius);
|
||||
padding: var(--card-padding);
|
||||
box-shadow: var(--card-shadow);
|
||||
color: var(--card-text);
|
||||
}
|
||||
|
||||
ds-card:hover,
|
||||
.ds-card:hover {
|
||||
box-shadow: var(--card-shadow-hover);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Badges
|
||||
========================================================================== */
|
||||
|
||||
ds-badge,
|
||||
.ds-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--badge-padding-y) var(--badge-padding-x);
|
||||
font-size: var(--badge-font-size);
|
||||
font-weight: var(--ds-font-weight-medium);
|
||||
border-radius: var(--badge-radius);
|
||||
background-color: var(--badge-bg);
|
||||
color: var(--badge-text);
|
||||
}
|
||||
|
||||
ds-badge[data-variant="secondary"],
|
||||
.ds-badge--secondary {
|
||||
background-color: var(--badge-secondary-bg);
|
||||
color: var(--badge-secondary-text);
|
||||
}
|
||||
|
||||
ds-badge[data-variant="outline"],
|
||||
.ds-badge--outline {
|
||||
background-color: var(--badge-outline-bg);
|
||||
color: var(--badge-outline-text);
|
||||
border: 1px solid var(--badge-outline-border);
|
||||
}
|
||||
|
||||
ds-badge[data-variant="success"],
|
||||
.ds-badge--success {
|
||||
background-color: var(--badge-success-bg);
|
||||
color: var(--badge-success-text);
|
||||
}
|
||||
|
||||
ds-badge[data-variant="warning"],
|
||||
.ds-badge--warning {
|
||||
background-color: var(--badge-warning-bg);
|
||||
color: var(--badge-warning-text);
|
||||
}
|
||||
|
||||
ds-badge[data-variant="error"],
|
||||
.ds-badge--error {
|
||||
background-color: var(--badge-error-bg);
|
||||
color: var(--badge-error-text);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Inputs
|
||||
========================================================================== */
|
||||
|
||||
ds-input,
|
||||
.ds-input,
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
input[type="search"],
|
||||
textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: var(--input-padding-y) var(--input-padding-x);
|
||||
background-color: var(--input-bg);
|
||||
color: var(--input-text);
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: var(--input-radius);
|
||||
font-size: var(--ds-font-size-sm);
|
||||
transition: border-color var(--ds-transition-fast) var(--ds-ease-out);
|
||||
}
|
||||
|
||||
ds-input:focus,
|
||||
.ds-input:focus,
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--input-border-focus);
|
||||
box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
|
||||
}
|
||||
|
||||
ds-input::placeholder,
|
||||
.ds-input::placeholder,
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: var(--input-placeholder);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Select
|
||||
========================================================================== */
|
||||
|
||||
select,
|
||||
.ds-select {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: var(--input-padding-y) var(--input-padding-x);
|
||||
background-color: var(--input-bg);
|
||||
color: var(--input-text);
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: var(--input-radius);
|
||||
font-size: var(--ds-font-size-sm);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select:focus,
|
||||
.ds-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--input-border-focus);
|
||||
box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
|
||||
}
|
||||
|
||||
.team-select {
|
||||
padding: var(--ds-space-1-5) var(--ds-space-3);
|
||||
background-color: var(--input-bg);
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: var(--input-radius);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Avatar
|
||||
========================================================================== */
|
||||
|
||||
.ds-avatar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--avatar-size-md);
|
||||
height: var(--avatar-size-md);
|
||||
background-color: var(--avatar-bg);
|
||||
color: var(--avatar-text);
|
||||
border: 1px solid var(--avatar-border);
|
||||
border-radius: var(--ds-radius-full);
|
||||
font-size: var(--ds-font-size-sm);
|
||||
font-weight: var(--ds-font-weight-medium);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ds-avatar:focus {
|
||||
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
||||
outline-offset: var(--focus-ring-offset);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Help Panel
|
||||
========================================================================== */
|
||||
|
||||
.help-panel {
|
||||
background-color: var(--help-panel-bg);
|
||||
border-radius: var(--ds-radius-md);
|
||||
border: 1px solid var(--help-panel-border);
|
||||
}
|
||||
|
||||
.help-panel__toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--ds-space-2);
|
||||
padding: var(--ds-space-3);
|
||||
font-size: var(--ds-font-size-sm);
|
||||
font-weight: var(--ds-font-weight-medium);
|
||||
color: var(--help-panel-text);
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.help-panel__toggle::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.help-panel__content {
|
||||
padding: var(--ds-space-3);
|
||||
padding-top: 0;
|
||||
font-size: var(--ds-font-size-sm);
|
||||
color: var(--help-panel-text-muted);
|
||||
}
|
||||
|
||||
.help-section {
|
||||
margin-bottom: var(--ds-space-3);
|
||||
}
|
||||
|
||||
.help-section strong {
|
||||
display: block;
|
||||
color: var(--help-panel-text);
|
||||
margin-bottom: var(--ds-space-1);
|
||||
}
|
||||
|
||||
.help-section ul,
|
||||
.help-section ol {
|
||||
padding-left: var(--ds-space-4);
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
.help-section ol {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.help-section li {
|
||||
margin-bottom: var(--ds-space-1);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Status Indicators
|
||||
========================================================================== */
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: var(--ds-radius-full);
|
||||
background-color: var(--ds-color-muted-foreground);
|
||||
}
|
||||
|
||||
.status-dot--success {
|
||||
background-color: var(--ds-color-success);
|
||||
}
|
||||
|
||||
.status-dot--warning {
|
||||
background-color: var(--ds-color-warning);
|
||||
}
|
||||
|
||||
.status-dot--error {
|
||||
background-color: var(--ds-color-error);
|
||||
}
|
||||
|
||||
.status-dot--info {
|
||||
background-color: var(--ds-color-info);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Notification Toggle Container
|
||||
========================================================================== */
|
||||
|
||||
.notification-toggle-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Project Selector
|
||||
========================================================================== */
|
||||
|
||||
.project-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--ds-space-2);
|
||||
}
|
||||
|
||||
.project-selector__label {
|
||||
font-size: var(--ds-font-size-sm);
|
||||
font-weight: var(--ds-font-weight-medium);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.project-selector__select {
|
||||
padding: var(--ds-space-1-5) var(--ds-space-3);
|
||||
background-color: var(--input-bg);
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: var(--input-radius);
|
||||
font-size: var(--ds-font-size-sm);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Responsive Adjustments
|
||||
========================================================================== */
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.app-sidebar {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.app-header__team-selector {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
position: fixed;
|
||||
top: var(--header-height);
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
transform: translateX(100%);
|
||||
transition: transform var(--ds-transition-slow) var(--ds-ease-out);
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
.app-sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.landing-hero h1 {
|
||||
font-size: var(--ds-font-size-2xl);
|
||||
}
|
||||
|
||||
.landing-hero p {
|
||||
font-size: var(--ds-font-size-base);
|
||||
}
|
||||
}
|
||||
230
admin-ui/css/dss-core.css
Normal file
230
admin-ui/css/dss-core.css
Normal file
@@ -0,0 +1,230 @@
|
||||
/**
|
||||
* DSS Core CSS - Layer 0 (Structural Only)
|
||||
*
|
||||
* This file provides the structural foundation for DSS Admin UI.
|
||||
* It contains NO design decisions - only layout and structural CSS.
|
||||
* The UI should be functional (but unstyled) with only this file.
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
CSS Reset / Normalize
|
||||
========================================================================== */
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
line-height: 1.15;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
text-rendering: optimizeSpeed;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
img, picture, video, canvas, svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
input, button, textarea, select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
App Shell - CSS Grid Layout
|
||||
========================================================================== */
|
||||
|
||||
.app-layout {
|
||||
display: grid;
|
||||
grid-template-columns: var(--app-sidebar-width, 240px) 1fr;
|
||||
grid-template-rows: var(--app-header-height, 60px) 1fr;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Flexbox Utilities
|
||||
========================================================================== */
|
||||
|
||||
.flex { display: flex; }
|
||||
.flex-col { flex-direction: column; }
|
||||
.flex-row { flex-direction: row; }
|
||||
.flex-wrap { flex-wrap: wrap; }
|
||||
.flex-1 { flex: 1; }
|
||||
.flex-auto { flex: auto; }
|
||||
.flex-none { flex: none; }
|
||||
|
||||
.items-start { align-items: flex-start; }
|
||||
.items-center { align-items: center; }
|
||||
.items-end { align-items: flex-end; }
|
||||
.items-stretch { align-items: stretch; }
|
||||
|
||||
.justify-start { justify-content: flex-start; }
|
||||
.justify-center { justify-content: center; }
|
||||
.justify-end { justify-content: flex-end; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
.justify-around { justify-content: space-around; }
|
||||
|
||||
/* Gap utilities use hardcoded fallbacks since core loads before tokens */
|
||||
.gap-1 { gap: 0.25rem; }
|
||||
.gap-2 { gap: 0.5rem; }
|
||||
.gap-3 { gap: 0.75rem; }
|
||||
.gap-4 { gap: 1rem; }
|
||||
.gap-5 { gap: 1.25rem; }
|
||||
.gap-6 { gap: 1.5rem; }
|
||||
|
||||
/* ==========================================================================
|
||||
Grid Utilities
|
||||
========================================================================== */
|
||||
|
||||
.grid { display: grid; }
|
||||
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
||||
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
|
||||
|
||||
/* ==========================================================================
|
||||
Visibility & Display
|
||||
========================================================================== */
|
||||
|
||||
.hidden { display: none !important; }
|
||||
.block { display: block; }
|
||||
.inline-block { display: inline-block; }
|
||||
.inline { display: inline; }
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Overflow & Scroll
|
||||
========================================================================== */
|
||||
|
||||
.overflow-hidden { overflow: hidden; }
|
||||
.overflow-auto { overflow: auto; }
|
||||
.overflow-x-auto { overflow-x: auto; }
|
||||
.overflow-y-auto { overflow-y: auto; }
|
||||
.overflow-scroll { overflow: scroll; }
|
||||
|
||||
/* ==========================================================================
|
||||
Position
|
||||
========================================================================== */
|
||||
|
||||
.relative { position: relative; }
|
||||
.absolute { position: absolute; }
|
||||
.fixed { position: fixed; }
|
||||
.sticky { position: sticky; }
|
||||
|
||||
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
|
||||
.top-0 { top: 0; }
|
||||
.right-0 { right: 0; }
|
||||
.bottom-0 { bottom: 0; }
|
||||
.left-0 { left: 0; }
|
||||
|
||||
/* ==========================================================================
|
||||
Width & Height
|
||||
========================================================================== */
|
||||
|
||||
.w-full { width: 100%; }
|
||||
.w-auto { width: auto; }
|
||||
.h-full { height: 100%; }
|
||||
.h-auto { height: auto; }
|
||||
.min-h-screen { min-height: 100vh; }
|
||||
|
||||
/* ==========================================================================
|
||||
Responsive Breakpoints
|
||||
========================================================================== */
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.app-layout {
|
||||
grid-template-columns: var(--app-sidebar-width-tablet, 200px) 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.app-layout {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: var(--app-header-height, 60px) 1fr;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: var(--app-header-height, 60px);
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: var(--app-sidebar-width, 240px);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s ease;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.app-main {
|
||||
grid-column: 1;
|
||||
}
|
||||
}
|
||||
6
admin-ui/css/dss-integrations.css
Normal file
6
admin-ui/css/dss-integrations.css
Normal file
@@ -0,0 +1,6 @@
|
||||
/* Design System Integrations CSS
|
||||
* This file contains integration-specific styles for third-party components
|
||||
* and external library theming.
|
||||
*/
|
||||
|
||||
/* Placeholder for future integrations */
|
||||
208
admin-ui/css/dss-theme.css
Normal file
208
admin-ui/css/dss-theme.css
Normal file
@@ -0,0 +1,208 @@
|
||||
/**
|
||||
* DSS Theme - Layer 2 (Semantic Mapping)
|
||||
*
|
||||
* Maps design tokens to semantic purposes.
|
||||
* This layer creates the bridge between raw design tokens
|
||||
* and component-specific styling.
|
||||
*
|
||||
* FIRST PRINCIPLES:
|
||||
* - No fallback values - tokens layer MUST load first
|
||||
* - If tokens are missing, theme-loader.js handles it with fallback CSS file
|
||||
* - Components should use these semantic tokens, not raw tokens directly
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* ==========================================================================
|
||||
App Shell Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
/* Header */
|
||||
--header-bg: var(--ds-color-surface-0);
|
||||
--header-border: var(--ds-color-border);
|
||||
--header-text: var(--ds-color-foreground);
|
||||
--header-height: var(--app-header-height);
|
||||
|
||||
/* Sidebar */
|
||||
--sidebar-bg: var(--ds-color-surface-0);
|
||||
--sidebar-border: var(--ds-color-border);
|
||||
--sidebar-text: var(--ds-color-foreground);
|
||||
--sidebar-width: var(--app-sidebar-width);
|
||||
|
||||
/* Main Content */
|
||||
--main-bg: var(--ds-color-background);
|
||||
--main-text: var(--ds-color-foreground);
|
||||
|
||||
/* ==========================================================================
|
||||
Navigation Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--nav-item-text: var(--ds-color-foreground);
|
||||
--nav-item-text-muted: var(--ds-color-muted-foreground);
|
||||
--nav-item-bg-hover: var(--ds-color-accent);
|
||||
--nav-item-bg-active: var(--ds-color-accent);
|
||||
--nav-item-text-active: var(--ds-color-primary);
|
||||
--nav-item-border-focus: var(--ds-color-ring);
|
||||
--nav-section-title: var(--ds-color-muted-foreground);
|
||||
--nav-item-radius: var(--ds-radius-md);
|
||||
--nav-item-padding: var(--ds-space-3);
|
||||
--nav-item-gap: var(--ds-space-3);
|
||||
|
||||
/* ==========================================================================
|
||||
Button Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
/* Default Button */
|
||||
--button-bg: var(--ds-color-primary);
|
||||
--button-text: var(--ds-color-primary-foreground);
|
||||
--button-border: var(--ds-color-primary);
|
||||
--button-bg-hover: hsl(var(--ds-color-primary-h) var(--ds-color-primary-s) calc(var(--ds-color-primary-l) + 10%));
|
||||
|
||||
/* Secondary Button */
|
||||
--button-secondary-bg: var(--ds-color-secondary);
|
||||
--button-secondary-text: var(--ds-color-secondary-foreground);
|
||||
|
||||
/* Ghost Button */
|
||||
--button-ghost-bg: transparent;
|
||||
--button-ghost-text: var(--ds-color-foreground);
|
||||
--button-ghost-bg-hover: var(--ds-color-accent);
|
||||
|
||||
/* Outline Button */
|
||||
--button-outline-bg: transparent;
|
||||
--button-outline-text: var(--ds-color-foreground);
|
||||
--button-outline-border: var(--ds-color-border);
|
||||
--button-outline-bg-hover: var(--ds-color-accent);
|
||||
|
||||
/* Button Sizing */
|
||||
--button-padding-x: var(--ds-space-4);
|
||||
--button-padding-y: var(--ds-space-2);
|
||||
--button-radius: var(--ds-radius-md);
|
||||
--button-font-size: var(--ds-font-size-sm);
|
||||
--button-font-weight: var(--ds-font-weight-medium);
|
||||
|
||||
/* ==========================================================================
|
||||
Card Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--card-bg: var(--ds-color-surface-0);
|
||||
--card-border: var(--ds-color-border);
|
||||
--card-text: var(--ds-color-foreground);
|
||||
--card-text-muted: var(--ds-color-muted-foreground);
|
||||
--card-radius: var(--ds-radius-lg);
|
||||
--card-padding: var(--ds-space-5);
|
||||
--card-shadow: var(--ds-shadow-sm);
|
||||
--card-shadow-hover: var(--ds-shadow-md);
|
||||
|
||||
/* ==========================================================================
|
||||
Input Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--input-bg: var(--ds-color-background);
|
||||
--input-text: var(--ds-color-foreground);
|
||||
--input-placeholder: var(--ds-color-muted-foreground);
|
||||
--input-border: var(--ds-color-border);
|
||||
--input-border-focus: var(--ds-color-ring);
|
||||
--input-radius: var(--ds-radius-md);
|
||||
--input-padding-x: var(--ds-space-3);
|
||||
--input-padding-y: var(--ds-space-2);
|
||||
|
||||
/* ==========================================================================
|
||||
Badge Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--badge-bg: var(--ds-color-primary);
|
||||
--badge-text: var(--ds-color-primary-foreground);
|
||||
--badge-radius: var(--ds-radius-full);
|
||||
--badge-padding-x: var(--ds-space-2-5);
|
||||
--badge-padding-y: var(--ds-space-0-5);
|
||||
--badge-font-size: var(--ds-font-size-xs);
|
||||
|
||||
/* Badge Variants */
|
||||
--badge-secondary-bg: var(--ds-color-secondary);
|
||||
--badge-secondary-text: var(--ds-color-secondary-foreground);
|
||||
--badge-outline-bg: transparent;
|
||||
--badge-outline-text: var(--ds-color-foreground);
|
||||
--badge-outline-border: var(--ds-color-border);
|
||||
--badge-success-bg: var(--ds-color-success);
|
||||
--badge-success-text: var(--ds-color-success-foreground);
|
||||
--badge-warning-bg: var(--ds-color-warning);
|
||||
--badge-warning-text: var(--ds-color-warning-foreground);
|
||||
--badge-error-bg: var(--ds-color-error);
|
||||
--badge-error-text: var(--ds-color-error-foreground);
|
||||
|
||||
/* ==========================================================================
|
||||
Landing Page Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--landing-bg: var(--ds-color-background);
|
||||
--landing-hero-text: var(--ds-color-foreground);
|
||||
--landing-hero-subtitle: var(--ds-color-muted-foreground);
|
||||
|
||||
/* Dashboard Card */
|
||||
--dashboard-card-bg: var(--ds-color-surface-0);
|
||||
--dashboard-card-border: var(--ds-color-border);
|
||||
--dashboard-card-border-hover: var(--ds-color-accent);
|
||||
--dashboard-card-text: var(--ds-color-foreground);
|
||||
--dashboard-card-text-muted: var(--ds-color-muted-foreground);
|
||||
--dashboard-card-shadow-hover: var(--ds-shadow-md);
|
||||
|
||||
/* Category Title */
|
||||
--category-title-text: var(--ds-color-foreground);
|
||||
--category-title-border: var(--ds-color-border);
|
||||
|
||||
/* ==========================================================================
|
||||
Toast/Notification Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--toast-bg: var(--ds-color-surface-0);
|
||||
--toast-text: var(--ds-color-foreground);
|
||||
--toast-border: var(--ds-color-border);
|
||||
--toast-shadow: var(--ds-shadow-lg);
|
||||
--toast-radius: var(--ds-radius-lg);
|
||||
|
||||
--toast-success-bg: var(--ds-color-success);
|
||||
--toast-success-text: var(--ds-color-success-foreground);
|
||||
--toast-warning-bg: var(--ds-color-warning);
|
||||
--toast-warning-text: var(--ds-color-warning-foreground);
|
||||
--toast-error-bg: var(--ds-color-error);
|
||||
--toast-error-text: var(--ds-color-error-foreground);
|
||||
--toast-info-bg: var(--ds-color-info);
|
||||
--toast-info-text: var(--ds-color-info-foreground);
|
||||
|
||||
/* ==========================================================================
|
||||
Avatar Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--avatar-bg: var(--ds-color-muted);
|
||||
--avatar-text: var(--ds-color-foreground);
|
||||
--avatar-border: var(--ds-color-border);
|
||||
--avatar-size-sm: 32px;
|
||||
--avatar-size-md: 40px;
|
||||
--avatar-size-lg: 48px;
|
||||
|
||||
/* ==========================================================================
|
||||
Help Panel Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--help-panel-bg: var(--ds-color-surface-1);
|
||||
--help-panel-border: var(--ds-color-border);
|
||||
--help-panel-text: var(--ds-color-foreground);
|
||||
--help-panel-text-muted: var(--ds-color-muted-foreground);
|
||||
|
||||
/* ==========================================================================
|
||||
Typography Semantic Tokens
|
||||
========================================================================== */
|
||||
|
||||
--text-heading: var(--ds-color-foreground);
|
||||
--text-body: var(--ds-color-foreground);
|
||||
--text-muted: var(--ds-color-muted-foreground);
|
||||
--text-link: var(--ds-color-primary);
|
||||
--text-link-hover: hsl(var(--ds-color-primary-h) var(--ds-color-primary-s) calc(var(--ds-color-primary-l) + 20%));
|
||||
|
||||
/* ==========================================================================
|
||||
Focus Ring
|
||||
========================================================================== */
|
||||
|
||||
--focus-ring-width: 2px;
|
||||
--focus-ring-color: var(--ds-color-ring);
|
||||
--focus-ring-offset: 2px;
|
||||
}
|
||||
246
admin-ui/css/dss-tokens.css
Normal file
246
admin-ui/css/dss-tokens.css
Normal file
@@ -0,0 +1,246 @@
|
||||
/**
|
||||
* DSS Design Tokens - Layer 1
|
||||
*
|
||||
* Design decisions expressed as CSS custom properties.
|
||||
* These tokens can be:
|
||||
* 1. Generated from Figma using DSS extraction tools
|
||||
* 2. Manually defined in a design-tokens.json file
|
||||
* 3. Use the fallback defaults defined here
|
||||
*
|
||||
* Format follows W3C Design Tokens specification.
|
||||
* All values include fallbacks for bootstrap scenario.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* ==========================================================================
|
||||
Color Tokens - HSL Format
|
||||
========================================================================== */
|
||||
|
||||
/* Primary Colors */
|
||||
--ds-color-primary-h: 220;
|
||||
--ds-color-primary-s: 14%;
|
||||
--ds-color-primary-l: 10%;
|
||||
--ds-color-primary: hsl(var(--ds-color-primary-h) var(--ds-color-primary-s) var(--ds-color-primary-l));
|
||||
--ds-color-primary-foreground: hsl(0 0% 100%);
|
||||
|
||||
/* Secondary Colors */
|
||||
--ds-color-secondary-h: 220;
|
||||
--ds-color-secondary-s: 9%;
|
||||
--ds-color-secondary-l: 46%;
|
||||
--ds-color-secondary: hsl(var(--ds-color-secondary-h) var(--ds-color-secondary-s) var(--ds-color-secondary-l));
|
||||
--ds-color-secondary-foreground: hsl(0 0% 100%);
|
||||
|
||||
/* Accent Colors */
|
||||
--ds-color-accent-h: 220;
|
||||
--ds-color-accent-s: 9%;
|
||||
--ds-color-accent-l: 96%;
|
||||
--ds-color-accent: hsl(var(--ds-color-accent-h) var(--ds-color-accent-s) var(--ds-color-accent-l));
|
||||
--ds-color-accent-foreground: hsl(220 14% 10%);
|
||||
|
||||
/* Background Colors */
|
||||
--ds-color-background: hsl(0 0% 100%);
|
||||
--ds-color-foreground: hsl(220 14% 10%);
|
||||
|
||||
/* Surface Colors */
|
||||
--ds-color-surface-0: hsl(0 0% 100%);
|
||||
--ds-color-surface-1: hsl(220 14% 98%);
|
||||
--ds-color-surface-2: hsl(220 9% 96%);
|
||||
--ds-color-surface-3: hsl(220 9% 94%);
|
||||
|
||||
/* Muted Colors */
|
||||
--ds-color-muted: hsl(220 9% 96%);
|
||||
--ds-color-muted-foreground: hsl(220 9% 46%);
|
||||
|
||||
/* Border Colors */
|
||||
--ds-color-border: hsl(220 9% 89%);
|
||||
--ds-color-border-strong: hsl(220 9% 80%);
|
||||
|
||||
/* State Colors */
|
||||
--ds-color-success: hsl(142 76% 36%);
|
||||
--ds-color-success-foreground: hsl(0 0% 100%);
|
||||
--ds-color-warning: hsl(38 92% 50%);
|
||||
--ds-color-warning-foreground: hsl(0 0% 0%);
|
||||
--ds-color-error: hsl(0 84% 60%);
|
||||
--ds-color-error-foreground: hsl(0 0% 100%);
|
||||
--ds-color-info: hsl(199 89% 48%);
|
||||
--ds-color-info-foreground: hsl(0 0% 100%);
|
||||
|
||||
/* Ring/Focus Color */
|
||||
--ds-color-ring: hsl(220 14% 10%);
|
||||
|
||||
/* ==========================================================================
|
||||
Spacing Scale
|
||||
========================================================================== */
|
||||
|
||||
--ds-space-0: 0;
|
||||
--ds-space-px: 1px;
|
||||
--ds-space-0-5: 0.125rem; /* 2px */
|
||||
--ds-space-1: 0.25rem; /* 4px */
|
||||
--ds-space-1-5: 0.375rem; /* 6px */
|
||||
--ds-space-2: 0.5rem; /* 8px */
|
||||
--ds-space-2-5: 0.625rem; /* 10px */
|
||||
--ds-space-3: 0.75rem; /* 12px */
|
||||
--ds-space-3-5: 0.875rem; /* 14px */
|
||||
--ds-space-4: 1rem; /* 16px */
|
||||
--ds-space-5: 1.25rem; /* 20px */
|
||||
--ds-space-6: 1.5rem; /* 24px */
|
||||
--ds-space-7: 1.75rem; /* 28px */
|
||||
--ds-space-8: 2rem; /* 32px */
|
||||
--ds-space-9: 2.25rem; /* 36px */
|
||||
--ds-space-10: 2.5rem; /* 40px */
|
||||
--ds-space-11: 2.75rem; /* 44px */
|
||||
--ds-space-12: 3rem; /* 48px */
|
||||
--ds-space-14: 3.5rem; /* 56px */
|
||||
--ds-space-16: 4rem; /* 64px */
|
||||
--ds-space-20: 5rem; /* 80px */
|
||||
--ds-space-24: 6rem; /* 96px */
|
||||
|
||||
/* ==========================================================================
|
||||
Typography - Font Sizes
|
||||
========================================================================== */
|
||||
|
||||
--ds-font-size-xs: 0.75rem; /* 12px */
|
||||
--ds-font-size-sm: 0.875rem; /* 14px */
|
||||
--ds-font-size-base: 1rem; /* 16px */
|
||||
--ds-font-size-lg: 1.125rem; /* 18px */
|
||||
--ds-font-size-xl: 1.25rem; /* 20px */
|
||||
--ds-font-size-2xl: 1.5rem; /* 24px */
|
||||
--ds-font-size-3xl: 1.875rem; /* 30px */
|
||||
--ds-font-size-4xl: 2.25rem; /* 36px */
|
||||
--ds-font-size-5xl: 3rem; /* 48px */
|
||||
|
||||
/* ==========================================================================
|
||||
Typography - Font Weights
|
||||
========================================================================== */
|
||||
|
||||
--ds-font-weight-thin: 100;
|
||||
--ds-font-weight-extralight: 200;
|
||||
--ds-font-weight-light: 300;
|
||||
--ds-font-weight-normal: 400;
|
||||
--ds-font-weight-medium: 500;
|
||||
--ds-font-weight-semibold: 600;
|
||||
--ds-font-weight-bold: 700;
|
||||
--ds-font-weight-extrabold: 800;
|
||||
--ds-font-weight-black: 900;
|
||||
|
||||
/* ==========================================================================
|
||||
Typography - Line Heights
|
||||
========================================================================== */
|
||||
|
||||
--ds-line-height-none: 1;
|
||||
--ds-line-height-tight: 1.25;
|
||||
--ds-line-height-snug: 1.375;
|
||||
--ds-line-height-normal: 1.5;
|
||||
--ds-line-height-relaxed: 1.625;
|
||||
--ds-line-height-loose: 2;
|
||||
|
||||
/* ==========================================================================
|
||||
Typography - Letter Spacing
|
||||
========================================================================== */
|
||||
|
||||
--ds-letter-spacing-tighter: -0.05em;
|
||||
--ds-letter-spacing-tight: -0.025em;
|
||||
--ds-letter-spacing-normal: 0;
|
||||
--ds-letter-spacing-wide: 0.025em;
|
||||
--ds-letter-spacing-wider: 0.05em;
|
||||
--ds-letter-spacing-widest: 0.1em;
|
||||
|
||||
/* ==========================================================================
|
||||
Typography - Font Families
|
||||
========================================================================== */
|
||||
|
||||
--ds-font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
--ds-font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
|
||||
--ds-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
|
||||
|
||||
/* ==========================================================================
|
||||
Border Radius
|
||||
========================================================================== */
|
||||
|
||||
--ds-radius-none: 0;
|
||||
--ds-radius-sm: 0.125rem; /* 2px */
|
||||
--ds-radius-md: 0.375rem; /* 6px */
|
||||
--ds-radius-lg: 0.5rem; /* 8px */
|
||||
--ds-radius-xl: 0.75rem; /* 12px */
|
||||
--ds-radius-2xl: 1rem; /* 16px */
|
||||
--ds-radius-full: 9999px;
|
||||
|
||||
/* ==========================================================================
|
||||
Shadows
|
||||
========================================================================== */
|
||||
|
||||
--ds-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--ds-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
--ds-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--ds-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--ds-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
||||
--ds-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
||||
--ds-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
|
||||
--ds-shadow-none: 0 0 #0000;
|
||||
|
||||
/* ==========================================================================
|
||||
Transitions
|
||||
========================================================================== */
|
||||
|
||||
--ds-transition-fast: 150ms;
|
||||
--ds-transition-normal: 200ms;
|
||||
--ds-transition-slow: 300ms;
|
||||
--ds-transition-slower: 500ms;
|
||||
|
||||
--ds-ease-linear: linear;
|
||||
--ds-ease-in: cubic-bezier(0.4, 0, 1, 1);
|
||||
--ds-ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
--ds-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
/* ==========================================================================
|
||||
Z-Index Scale
|
||||
========================================================================== */
|
||||
|
||||
--ds-z-0: 0;
|
||||
--ds-z-10: 10;
|
||||
--ds-z-20: 20;
|
||||
--ds-z-30: 30;
|
||||
--ds-z-40: 40;
|
||||
--ds-z-50: 50;
|
||||
--ds-z-auto: auto;
|
||||
|
||||
/* ==========================================================================
|
||||
App-Specific Structural Tokens
|
||||
========================================================================== */
|
||||
|
||||
--app-header-height: 60px;
|
||||
--app-sidebar-width: 240px;
|
||||
--app-sidebar-width-tablet: 200px;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Dark Mode Tokens
|
||||
========================================================================== */
|
||||
|
||||
[data-theme="dark"],
|
||||
.dark {
|
||||
--ds-color-primary-h: 220;
|
||||
--ds-color-primary-s: 14%;
|
||||
--ds-color-primary-l: 90%;
|
||||
--ds-color-primary: hsl(var(--ds-color-primary-h) var(--ds-color-primary-s) var(--ds-color-primary-l));
|
||||
--ds-color-primary-foreground: hsl(220 14% 10%);
|
||||
|
||||
--ds-color-background: hsl(220 14% 10%);
|
||||
--ds-color-foreground: hsl(220 9% 94%);
|
||||
|
||||
--ds-color-surface-0: hsl(220 14% 10%);
|
||||
--ds-color-surface-1: hsl(220 14% 14%);
|
||||
--ds-color-surface-2: hsl(220 14% 18%);
|
||||
--ds-color-surface-3: hsl(220 14% 22%);
|
||||
|
||||
--ds-color-muted: hsl(220 14% 18%);
|
||||
--ds-color-muted-foreground: hsl(220 9% 60%);
|
||||
|
||||
--ds-color-border: hsl(220 14% 22%);
|
||||
--ds-color-border-strong: hsl(220 14% 30%);
|
||||
|
||||
--ds-color-accent: hsl(220 14% 18%);
|
||||
--ds-color-accent-foreground: hsl(220 9% 94%);
|
||||
|
||||
--ds-color-ring: hsl(220 9% 80%);
|
||||
}
|
||||
531
admin-ui/css/styles.css
Normal file
531
admin-ui/css/styles.css
Normal file
@@ -0,0 +1,531 @@
|
||||
/**
|
||||
* Design System Admin UI - Complete Styles
|
||||
* Proper navbar-sidebar-main layout with flat navigation
|
||||
*/
|
||||
|
||||
/* ============================================================================
|
||||
RESET & BASE STYLES
|
||||
============================================================================ */
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: var(--font-sans);
|
||||
line-height: 1.5;
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button, input, select, textarea {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img, svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
LAYOUT GRID - NAVBAR | SIDEBAR | MAIN
|
||||
============================================================================ */
|
||||
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-columns: 240px 1fr;
|
||||
grid-template-rows: 60px 1fr;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
/* Header at top, spanning both columns */
|
||||
.app-header {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 var(--space-4);
|
||||
background: var(--card);
|
||||
border-bottom: 1px solid var(--border);
|
||||
gap: var(--space-4);
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
/* Sidebar on left, full height of remaining space */
|
||||
.sidebar {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
background: var(--card);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: var(--space-4);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: calc(100vh - 60px);
|
||||
}
|
||||
|
||||
/* Main content on right, full height of remaining space */
|
||||
.app-main {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
height: calc(100vh - 60px);
|
||||
}
|
||||
|
||||
.app-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
HEADER STYLES
|
||||
============================================================================ */
|
||||
|
||||
.app-header__project-selector {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.app-header__team-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.team-select {
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-size: var(--text-sm);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.team-select:hover {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.app-header__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.notification-toggle-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--error);
|
||||
}
|
||||
|
||||
.ds-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: var(--text-sm);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
SIDEBAR - LOGO & HEADER
|
||||
============================================================================ */
|
||||
|
||||
.sidebar__header {
|
||||
padding-bottom: var(--space-4);
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.sidebar__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
font-weight: 600;
|
||||
font-size: var(--text-lg);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.sidebar__logo-icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background: var(--primary);
|
||||
border-radius: var(--radius);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar__logo-icon svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
SIDEBAR - NAVIGATION
|
||||
============================================================================ */
|
||||
|
||||
.sidebar__nav {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-6);
|
||||
}
|
||||
|
||||
/* Navigation Section */
|
||||
.nav-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.nav-section + .nav-section {
|
||||
padding-top: var(--space-4);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.nav-section__title {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--muted);
|
||||
padding-left: var(--space-3);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
/* Navigation Item */
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3) var(--space-3);
|
||||
border-radius: var(--radius);
|
||||
color: var(--foreground);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border: 2px solid transparent;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: var(--muted-background);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.nav-item:focus {
|
||||
border-color: var(--primary);
|
||||
background: var(--muted-background);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background: var(--primary-light);
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nav-item.active:focus {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.nav-item__icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
stroke-width: 2;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-item:hover .nav-item__icon {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
SIDEBAR - HELP PANEL & FOOTER
|
||||
============================================================================ */
|
||||
|
||||
.sidebar__help {
|
||||
margin-top: auto;
|
||||
padding-top: var(--space-4);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.help-panel {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.help-panel__toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3);
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
color: var(--foreground);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.help-panel__toggle:hover {
|
||||
background: var(--muted-background);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.help-panel__content {
|
||||
display: none;
|
||||
margin-top: var(--space-3);
|
||||
padding: var(--space-3);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--muted-background);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.help-panel[open] .help-panel__content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.help-section {
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.help-section strong {
|
||||
display: block;
|
||||
margin-bottom: var(--space-2);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.help-section ul,
|
||||
.help-section ol {
|
||||
margin-left: var(--space-3);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.help-section li {
|
||||
margin-bottom: var(--space-1);
|
||||
}
|
||||
|
||||
.sidebar__footer {
|
||||
padding-top: var(--space-4);
|
||||
text-align: center;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
AI SIDEBAR (Right)
|
||||
============================================================================ */
|
||||
|
||||
.app-sidebar {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 60px;
|
||||
width: 320px;
|
||||
height: calc(100vh - 60px);
|
||||
background: var(--card);
|
||||
border-left: 1px solid var(--border);
|
||||
overflow-y: auto;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-sidebar[aria-expanded="true"] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
RESPONSIVE DESIGN
|
||||
============================================================================ */
|
||||
|
||||
/* Tablet */
|
||||
@media (max-width: 1024px) {
|
||||
#app {
|
||||
grid-template-columns: 200px 1fr;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding: var(--space-3);
|
||||
}
|
||||
|
||||
.app-content {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 768px) {
|
||||
#app {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 60px 1fr;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
padding: 0 var(--space-3);
|
||||
}
|
||||
|
||||
.app-header__project-selector {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-header__team-selector {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: -240px;
|
||||
width: 240px;
|
||||
height: calc(100vh - 60px);
|
||||
top: 60px;
|
||||
z-index: 100;
|
||||
transition: left 0.3s ease;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.sidebar.open {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.app-content {
|
||||
padding: var(--space-3);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
UTILITIES
|
||||
============================================================================ */
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
COMPONENT PLACEHOLDERS
|
||||
============================================================================ */
|
||||
|
||||
ds-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid transparent;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
ds-button:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
ds-button[data-variant="ghost"] {
|
||||
background: transparent;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
ds-button[data-size="icon"] {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
ds-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--space-1) var(--space-2);
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--muted-background);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
ds-notification-center {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ds-ai-chat {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
ds-toast-provider {
|
||||
display: block;
|
||||
}
|
||||
128
admin-ui/css/tokens.css
Normal file
128
admin-ui/css/tokens.css
Normal file
@@ -0,0 +1,128 @@
|
||||
/**
|
||||
* Design System Tokens
|
||||
* Layer 1: Base design tokens as CSS custom properties
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Color Tokens */
|
||||
--color-primary: oklch(0.65 0.18 250);
|
||||
--color-primary-hover: oklch(0.55 0.18 250);
|
||||
--color-primary-active: oklch(0.45 0.18 250);
|
||||
--color-primary-light: oklch(0.85 0.08 250);
|
||||
--color-secondary: oklch(0.60 0.12 120);
|
||||
--color-secondary-hover: oklch(0.50 0.12 120);
|
||||
--color-accent: oklch(0.70 0.20 40);
|
||||
--color-accent-hover: oklch(0.60 0.20 40);
|
||||
--color-destructive: oklch(0.63 0.25 30);
|
||||
--color-destructive-hover: oklch(0.53 0.25 30);
|
||||
--color-success: oklch(0.65 0.18 140);
|
||||
--color-warning: oklch(0.68 0.22 60);
|
||||
--color-info: oklch(0.62 0.18 230);
|
||||
--color-foreground: oklch(0.20 0.02 280);
|
||||
--color-foreground-secondary: oklch(0.40 0.02 280);
|
||||
--color-muted-foreground: oklch(0.55 0.02 280);
|
||||
--color-background: oklch(0.98 0.01 280);
|
||||
--color-surface: oklch(0.95 0.01 280);
|
||||
--color-surface-secondary: oklch(0.92 0.01 280);
|
||||
--color-muted: oklch(0.88 0.01 280);
|
||||
--color-border: oklch(0.82 0.01 280);
|
||||
--color-ring: oklch(0.65 0.18 250);
|
||||
--color-input: oklch(0.95 0.01 280);
|
||||
--color-card: oklch(0.98 0.01 280);
|
||||
|
||||
/* Semantic Colors */
|
||||
--primary: var(--color-primary);
|
||||
--primary-hover: var(--color-primary-hover);
|
||||
--primary-active: var(--color-primary-active);
|
||||
--primary-foreground: var(--color-foreground);
|
||||
--secondary: var(--color-secondary);
|
||||
--secondary-hover: var(--color-secondary-hover);
|
||||
--secondary-foreground: var(--color-foreground);
|
||||
--accent: var(--color-accent);
|
||||
--accent-hover: var(--color-accent-hover);
|
||||
--accent-foreground: var(--color-foreground);
|
||||
--destructive: var(--color-destructive);
|
||||
--destructive-hover: var(--color-destructive-hover);
|
||||
--destructive-foreground: var(--color-foreground);
|
||||
--success: var(--color-success);
|
||||
--warning: var(--color-warning);
|
||||
--info: var(--color-info);
|
||||
--foreground: var(--color-foreground);
|
||||
--muted-foreground: var(--color-muted-foreground);
|
||||
--background: var(--color-background);
|
||||
--surface: var(--color-surface);
|
||||
--surface-secondary: var(--color-surface-secondary);
|
||||
--muted: var(--color-muted);
|
||||
--card: var(--color-card);
|
||||
--input: var(--color-input);
|
||||
--border: var(--color-border);
|
||||
--ring: var(--color-ring);
|
||||
|
||||
/* Spacing Scale (4px base unit) */
|
||||
--space-0: 0;
|
||||
--space-1: 0.25rem; /* 4px */
|
||||
--space-2: 0.5rem; /* 8px */
|
||||
--space-3: 0.75rem; /* 12px */
|
||||
--space-4: 1rem; /* 16px */
|
||||
--space-5: 1.25rem; /* 20px */
|
||||
--space-6: 1.5rem; /* 24px */
|
||||
--space-7: 1.75rem; /* 28px */
|
||||
--space-8: 2rem; /* 32px */
|
||||
|
||||
/* Typography */
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
--font-mono: 'Monaco', 'Courier New', monospace;
|
||||
--font-semibold: 600;
|
||||
--font-medium: 500;
|
||||
--font-bold: 700;
|
||||
|
||||
--text-xs: 0.75rem; /* 12px */
|
||||
--text-sm: 0.875rem; /* 14px */
|
||||
--text-base: 1rem; /* 16px */
|
||||
--text-lg: 1.125rem; /* 18px */
|
||||
--text-xl: 1.25rem; /* 20px */
|
||||
--text-2xl: 1.5rem; /* 24px */
|
||||
|
||||
/* Border Radius */
|
||||
--radius-none: 0;
|
||||
--radius-sm: 0.25rem; /* 4px */
|
||||
--radius: 0.375rem; /* 6px */
|
||||
--radius-md: 0.5rem; /* 8px */
|
||||
--radius-lg: 0.75rem; /* 12px */
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
|
||||
/* Animation */
|
||||
--duration-fast: 150ms;
|
||||
--duration-normal: 200ms;
|
||||
--duration-slow: 300ms;
|
||||
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
||||
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--popover: oklch(0.98 0.01 280);
|
||||
--popover-foreground: oklch(0.20 0.02 280);
|
||||
}
|
||||
|
||||
/* Dark Mode */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-foreground: oklch(0.92 0.02 280);
|
||||
--color-foreground-secondary: oklch(0.75 0.02 280);
|
||||
--color-muted-foreground: oklch(0.60 0.02 280);
|
||||
--color-background: oklch(0.12 0.02 280);
|
||||
--color-surface: oklch(0.15 0.02 280);
|
||||
--color-surface-secondary: oklch(0.18 0.02 280);
|
||||
--color-muted: oklch(0.25 0.02 280);
|
||||
--color-border: oklch(0.30 0.02 280);
|
||||
--color-input: oklch(0.18 0.02 280);
|
||||
--color-card: oklch(0.15 0.02 280);
|
||||
--popover: oklch(0.15 0.02 280);
|
||||
--popover-foreground: oklch(0.92 0.02 280);
|
||||
}
|
||||
}
|
||||
538
admin-ui/css/workdesk.css
Normal file
538
admin-ui/css/workdesk.css
Normal file
@@ -0,0 +1,538 @@
|
||||
/* DSS Workdesk - IDE-style Theme */
|
||||
/* Based on VS Code dark theme color palette */
|
||||
|
||||
:root {
|
||||
/* VS Code color palette */
|
||||
--vscode-bg: #1e1e1e;
|
||||
--vscode-sidebar: #252526;
|
||||
--vscode-activitybar: #333333;
|
||||
--vscode-panel: #1e1e1e;
|
||||
--vscode-border: #3e3e42;
|
||||
--vscode-text: #cccccc;
|
||||
--vscode-text-dim: #858585;
|
||||
--vscode-accent: #007acc;
|
||||
--vscode-accent-hover: #0098ff;
|
||||
--vscode-selection: #264f78;
|
||||
|
||||
/* Spacing */
|
||||
--spacing-xs: 4px;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-md: 16px;
|
||||
--spacing-lg: 24px;
|
||||
|
||||
/* Layout dimensions */
|
||||
--activitybar-width: 48px;
|
||||
--sidebar-width: 280px;
|
||||
--panel-height: 280px;
|
||||
}
|
||||
|
||||
/* Reset and base styles */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Helvetica Neue', sans-serif;
|
||||
font-size: 13px;
|
||||
color: var(--vscode-text);
|
||||
background-color: var(--vscode-bg);
|
||||
overflow: hidden;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Shell grid layout - 3 column, single row (no bottom panel) */
|
||||
ds-shell {
|
||||
display: grid;
|
||||
grid-template-columns: var(--sidebar-width) 1fr 350px;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-areas: "sidebar stage chat";
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
transition: grid-template-columns 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* When chat sidebar is collapsed, adjust grid to expand stage */
|
||||
ds-shell:has(ds-ai-chat-sidebar.collapsed) {
|
||||
grid-template-columns: var(--sidebar-width) 1fr 0;
|
||||
}
|
||||
|
||||
/* Activity Bar (hidden - items moved to stage-header-right) */
|
||||
ds-activity-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.activity-item {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--vscode-text-dim);
|
||||
cursor: pointer;
|
||||
border-left: 2px solid transparent;
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.activity-item:hover {
|
||||
color: var(--vscode-text);
|
||||
}
|
||||
|
||||
.activity-item.active {
|
||||
color: var(--vscode-text);
|
||||
border-left-color: var(--vscode-accent);
|
||||
}
|
||||
|
||||
/* Sidebar (second column) */
|
||||
ds-sidebar {
|
||||
grid-area: sidebar;
|
||||
background-color: var(--vscode-sidebar);
|
||||
border-right: 1px solid var(--vscode-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: var(--spacing-md);
|
||||
border-bottom: 1px solid var(--vscode-border);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--vscode-text-dim);
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
/* Stage (main work area) */
|
||||
ds-stage {
|
||||
grid-area: stage;
|
||||
background-color: var(--vscode-bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stage-header {
|
||||
padding: var(--spacing-md);
|
||||
border-bottom: 1px solid var(--vscode-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.stage-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
/* Chat Sidebar (right column) */
|
||||
ds-ai-chat-sidebar {
|
||||
grid-area: chat;
|
||||
background-color: var(--vscode-sidebar);
|
||||
border-left: 1px solid var(--vscode-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
width: 350px;
|
||||
|
||||
/* Smooth transitions for collapse/expand animation */
|
||||
transition: width 350ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
border-left 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
/* Chat Panel Component - Critical for scroll containment */
|
||||
ds-chat-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 0; /* Critical: allows flex item to shrink below content size */
|
||||
overflow: hidden;
|
||||
position: relative; /* Positioning context for absolute children (tooltips, overlays) */
|
||||
}
|
||||
|
||||
ds-ai-chat-sidebar.collapsed {
|
||||
width: 0;
|
||||
border-left: none;
|
||||
box-shadow: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ai-chat-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Animated toggle button with rotation effect */
|
||||
.ai-chat-toggle-btn {
|
||||
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
color 200ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.ai-chat-toggle-btn.rotating {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.ai-chat-toggle-btn:hover {
|
||||
color: var(--vscode-accent-hover);
|
||||
}
|
||||
|
||||
/* Panel (bottom panel) - HIDDEN (functionality moved to sidebar) */
|
||||
ds-panel {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border-bottom: 1px solid var(--vscode-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.panel-tab {
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
cursor: pointer;
|
||||
color: var(--vscode-text-dim);
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.panel-tab:hover {
|
||||
color: var(--vscode-text);
|
||||
}
|
||||
|
||||
.panel-tab.active {
|
||||
color: var(--vscode-text);
|
||||
border-bottom-color: var(--vscode-accent);
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
/* Common components */
|
||||
button {
|
||||
transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: var(--spacing-xs) var(--spacing-md);
|
||||
background-color: var(--vscode-accent);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: var(--vscode-accent-hover);
|
||||
}
|
||||
|
||||
.button:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Focus visible styling for keyboard accessibility */
|
||||
button:focus-visible,
|
||||
input:focus-visible,
|
||||
textarea:focus-visible,
|
||||
select:focus-visible {
|
||||
outline: 2px solid var(--vscode-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.team-btn:focus-visible {
|
||||
outline: 2px solid var(--vscode-accent);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
/* Respect prefers-reduced-motion for accessibility */
|
||||
/* Users who prefer reduced motion will have animations/transitions disabled */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
transition-delay: 0ms !important;
|
||||
}
|
||||
|
||||
/* Disable scrolling animations */
|
||||
html {
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.input {
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
background-color: var(--vscode-sidebar);
|
||||
border: 1px solid var(--vscode-border);
|
||||
color: var(--vscode-text);
|
||||
border-radius: 2px;
|
||||
font-size: 13px;
|
||||
transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
outline: 1px solid var(--vscode-accent);
|
||||
border-color: var(--vscode-accent);
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--vscode-bg);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--vscode-border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
/* Utility classes */
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gap-sm {
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.gap-md {
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.text-dim {
|
||||
color: var(--vscode-text-dim);
|
||||
}
|
||||
|
||||
.text-accent {
|
||||
color: var(--vscode-accent);
|
||||
}
|
||||
|
||||
/* Admin Full-Page Mode */
|
||||
/* When admin team is active, panel minimizes and stage takes full height */
|
||||
ds-shell.admin-mode {
|
||||
grid-template-rows: 1fr 40px; /* Minimize panel to 40px */
|
||||
}
|
||||
|
||||
ds-shell.admin-mode ds-panel {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
ds-shell.admin-mode ds-panel .panel-content {
|
||||
display: none; /* Hide panel content in admin mode */
|
||||
}
|
||||
|
||||
ds-shell.admin-mode ds-panel .panel-header {
|
||||
background-color: var(--vscode-panel);
|
||||
border-top: 1px solid var(--vscode-border);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
font-size: 11px;
|
||||
color: var(--vscode-text-dim);
|
||||
}
|
||||
|
||||
/* Admin dashboard cards in stage area */
|
||||
ds-shell.admin-mode ds-stage .stage-content {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Responsive Design - Tablet (1024px and below) */
|
||||
@media (max-width: 1024px) {
|
||||
:root {
|
||||
--sidebar-width: 240px;
|
||||
}
|
||||
|
||||
ds-shell {
|
||||
grid-template-columns: var(--sidebar-width) 1fr;
|
||||
}
|
||||
|
||||
/* Hide chat sidebar on tablet, move to bottom or toggle */
|
||||
ds-ai-chat-sidebar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.stage-header {
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
#team-selector {
|
||||
order: 1;
|
||||
width: 100%;
|
||||
padding-bottom: var(--spacing-sm);
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--vscode-border);
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive Design - Mobile (768px and below) */
|
||||
@media (max-width: 768px) {
|
||||
:root {
|
||||
--sidebar-width: 200px;
|
||||
}
|
||||
|
||||
ds-shell {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 44px 1fr;
|
||||
grid-template-areas:
|
||||
"stage"
|
||||
"stage";
|
||||
}
|
||||
|
||||
/* Hide sidebar on mobile - use hamburger toggle */
|
||||
ds-sidebar {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 44px;
|
||||
width: 200px;
|
||||
height: calc(100vh - 44px);
|
||||
z-index: 100;
|
||||
background-color: var(--vscode-sidebar);
|
||||
border-right: 1px solid var(--vscode-border);
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
ds-sidebar.mobile-open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Add hamburger menu button */
|
||||
.hamburger-menu {
|
||||
display: flex;
|
||||
padding: 6px 8px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--vscode-text-dim);
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.hamburger-menu:hover {
|
||||
color: var(--vscode-text);
|
||||
background: var(--vscode-selection);
|
||||
}
|
||||
|
||||
.stage-header {
|
||||
padding: var(--spacing-sm);
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.stage-header-left {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#team-selector {
|
||||
width: 100%;
|
||||
padding: var(--spacing-sm) 0;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
#stage-title {
|
||||
width: 100%;
|
||||
margin-top: var(--spacing-xs);
|
||||
}
|
||||
|
||||
ds-project-selector {
|
||||
width: 100%;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.stage-content {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive Design - Small Mobile (640px and below) */
|
||||
@media (max-width: 640px) {
|
||||
body {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
ds-shell {
|
||||
grid-template-rows: 40px 1fr;
|
||||
}
|
||||
|
||||
.stage-header {
|
||||
padding: var(--spacing-xs);
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.stage-header-right {
|
||||
gap: var(--spacing-xs) !important;
|
||||
}
|
||||
|
||||
.stage-header-right button {
|
||||
padding: 4px 6px !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
#team-selector {
|
||||
gap: 2px !important;
|
||||
}
|
||||
|
||||
.team-btn {
|
||||
padding: 4px 6px !important;
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
.stage-content {
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
padding: var(--spacing-xs);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user