1167 lines
23 KiB
CSS
1167 lines
23 KiB
CSS
/* ============================================
|
|
Brief Bench - Material Design CSS System
|
|
============================================ */
|
|
|
|
/* CSS Variables - Material Design Tokens */
|
|
:root {
|
|
/* Colors - Material Design 3 inspired */
|
|
--md-primary: #1976d2;
|
|
--md-primary-dark: #115293;
|
|
--md-primary-light: #4791db;
|
|
--md-secondary: #26a69a;
|
|
--md-error: #d32f2f;
|
|
--md-warning: #f57c00;
|
|
--md-success: #388e3c;
|
|
--md-info: #0288d1;
|
|
|
|
/* Neutrals */
|
|
--md-surface: #ffffff;
|
|
--md-surface-variant: #f5f5f5;
|
|
--md-background: #fafafa;
|
|
--md-on-surface: rgba(0, 0, 0, 0.87);
|
|
--md-on-surface-variant: rgba(0, 0, 0, 0.60);
|
|
--md-on-surface-disabled: rgba(0, 0, 0, 0.38);
|
|
--md-outline: rgba(0, 0, 0, 0.12);
|
|
--md-divider: rgba(0, 0, 0, 0.12);
|
|
|
|
/* Shadows */
|
|
--md-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
|
--md-shadow-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
|
--md-shadow-3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
|
|
--md-shadow-4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
|
|
--md-shadow-5: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
|
|
|
|
/* Typography */
|
|
--md-font-family: 'Roboto', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
--md-font-mono: 'Roboto Mono', 'Consolas', 'Monaco', monospace;
|
|
|
|
/* Spacing */
|
|
--md-spacing-xs: 4px;
|
|
--md-spacing-sm: 8px;
|
|
--md-spacing-md: 16px;
|
|
--md-spacing-lg: 24px;
|
|
--md-spacing-xl: 32px;
|
|
--md-spacing-xxl: 48px;
|
|
|
|
/* Borders & Radius */
|
|
--md-radius-sm: 4px;
|
|
--md-radius-md: 8px;
|
|
--md-radius-lg: 12px;
|
|
--md-radius-xl: 16px;
|
|
|
|
/* Transitions */
|
|
--md-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--md-transition-medium: 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--md-transition-slow: 375ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
/* Layout */
|
|
--app-bar-height: 64px;
|
|
--drawer-width: 320px;
|
|
}
|
|
|
|
/* ============================================
|
|
Reset & Base Styles
|
|
============================================ */
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
font-size: 16px;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--md-font-family);
|
|
color: var(--md-on-surface);
|
|
background-color: var(--md-background);
|
|
line-height: 1.5;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* ============================================
|
|
Typography
|
|
============================================ */
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-weight: 400;
|
|
line-height: 1.2;
|
|
margin-bottom: var(--md-spacing-md);
|
|
}
|
|
|
|
h1 { font-size: 2.5rem; font-weight: 300; }
|
|
h2 { font-size: 2rem; font-weight: 400; }
|
|
h3 { font-size: 1.75rem; font-weight: 400; }
|
|
h4 { font-size: 1.5rem; font-weight: 500; }
|
|
h5 { font-size: 1.25rem; font-weight: 500; }
|
|
h6 { font-size: 1rem; font-weight: 500; }
|
|
|
|
p {
|
|
margin-bottom: var(--md-spacing-md);
|
|
}
|
|
|
|
.text-caption {
|
|
font-size: 0.75rem;
|
|
color: var(--md-on-surface-variant);
|
|
}
|
|
|
|
.text-overline {
|
|
font-size: 0.625rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1.5px;
|
|
color: var(--md-on-surface-variant);
|
|
}
|
|
|
|
.text-mono {
|
|
font-family: var(--md-font-mono);
|
|
}
|
|
|
|
/* ============================================
|
|
Layout
|
|
============================================ */
|
|
|
|
#app {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ============================================
|
|
Environment Tabs
|
|
============================================ */
|
|
|
|
.environment-tabs {
|
|
display: flex;
|
|
background-color: var(--md-surface);
|
|
border-bottom: 2px solid var(--md-divider);
|
|
box-shadow: var(--md-shadow-1);
|
|
z-index: 90;
|
|
}
|
|
|
|
.env-tab {
|
|
flex: 1;
|
|
padding: 12px 24px;
|
|
border: none;
|
|
background: none;
|
|
cursor: pointer;
|
|
font-family: var(--md-font-family);
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--md-on-surface-variant);
|
|
position: relative;
|
|
transition: all var(--md-transition-fast);
|
|
border-bottom: 3px solid transparent;
|
|
margin-bottom: -2px;
|
|
}
|
|
|
|
.env-tab:hover {
|
|
background-color: rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.env-tab.active {
|
|
color: var(--md-primary);
|
|
border-bottom-color: var(--md-primary);
|
|
background-color: rgba(25, 118, 210, 0.08);
|
|
}
|
|
|
|
.app-content {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
/* ============================================
|
|
AppBar
|
|
============================================ */
|
|
|
|
.app-bar {
|
|
height: var(--app-bar-height);
|
|
background-color: var(--md-primary);
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 var(--md-spacing-md);
|
|
box-shadow: var(--md-shadow-2);
|
|
position: relative;
|
|
z-index: 100;
|
|
}
|
|
|
|
.app-bar-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 500;
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--md-spacing-md);
|
|
}
|
|
|
|
.app-bar-actions {
|
|
display: flex;
|
|
gap: var(--md-spacing-sm);
|
|
align-items: center;
|
|
}
|
|
|
|
/* ============================================
|
|
Drawer / Sidebar
|
|
============================================ */
|
|
|
|
.drawer {
|
|
width: var(--drawer-width);
|
|
background-color: var(--md-surface);
|
|
border-right: 1px solid var(--md-divider);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
position: relative;
|
|
z-index: 50;
|
|
transition: transform var(--md-transition-medium), width var(--md-transition-medium);
|
|
}
|
|
|
|
.drawer.collapsed {
|
|
transform: translateX(-100%);
|
|
width: 0;
|
|
border-right: none;
|
|
}
|
|
|
|
.drawer-header {
|
|
padding: var(--md-spacing-md);
|
|
border-bottom: 1px solid var(--md-divider);
|
|
background-color: var(--md-surface-variant);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--md-spacing-sm);
|
|
}
|
|
|
|
.drawer-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
.drawer-content::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.drawer-content::-webkit-scrollbar-track {
|
|
background: var(--md-surface-variant);
|
|
}
|
|
|
|
.drawer-content::-webkit-scrollbar-thumb {
|
|
background: var(--md-outline);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.drawer-content::-webkit-scrollbar-thumb:hover {
|
|
background: var(--md-on-surface-variant);
|
|
}
|
|
|
|
/* ============================================
|
|
Main Area
|
|
============================================ */
|
|
|
|
.main-area {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
background-color: var(--md-background);
|
|
padding: var(--md-spacing-lg);
|
|
}
|
|
|
|
/* ============================================
|
|
Cards
|
|
============================================ */
|
|
|
|
.card {
|
|
background-color: var(--md-surface);
|
|
border-radius: var(--md-radius-md);
|
|
box-shadow: var(--md-shadow-1);
|
|
overflow: hidden;
|
|
transition: box-shadow var(--md-transition-fast);
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: var(--md-shadow-2);
|
|
}
|
|
|
|
.card-header {
|
|
padding: var(--md-spacing-md);
|
|
border-bottom: 1px solid var(--md-divider);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 500;
|
|
margin: 0;
|
|
}
|
|
|
|
.card-content {
|
|
padding: var(--md-spacing-md);
|
|
}
|
|
|
|
.card-actions {
|
|
padding: var(--md-spacing-sm) var(--md-spacing-md);
|
|
border-top: 1px solid var(--md-divider);
|
|
display: flex;
|
|
gap: var(--md-spacing-sm);
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.card-clickable {
|
|
cursor: pointer;
|
|
transition: all var(--md-transition-fast);
|
|
}
|
|
|
|
.card-clickable:hover {
|
|
background-color: var(--md-surface-variant);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--md-shadow-3);
|
|
}
|
|
|
|
.card-clickable.active {
|
|
border-left: 4px solid var(--md-primary);
|
|
background-color: rgba(25, 118, 210, 0.08);
|
|
}
|
|
|
|
/* ============================================
|
|
Buttons
|
|
============================================ */
|
|
|
|
.btn {
|
|
font-family: var(--md-font-family);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: var(--md-radius-sm);
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--md-spacing-sm);
|
|
transition: all var(--md-transition-fast);
|
|
position: relative;
|
|
overflow: hidden;
|
|
outline: none;
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.38;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Button variants */
|
|
.btn-filled {
|
|
background-color: var(--md-primary);
|
|
color: white;
|
|
box-shadow: var(--md-shadow-1);
|
|
}
|
|
|
|
.btn-filled:hover:not(:disabled) {
|
|
background-color: var(--md-primary-dark);
|
|
box-shadow: var(--md-shadow-2);
|
|
}
|
|
|
|
.btn-filled:active:not(:disabled) {
|
|
box-shadow: var(--md-shadow-3);
|
|
}
|
|
|
|
.btn-outlined {
|
|
background-color: transparent;
|
|
color: var(--md-primary);
|
|
border: 1px solid var(--md-primary);
|
|
}
|
|
|
|
.btn-outlined:hover:not(:disabled) {
|
|
background-color: rgba(25, 118, 210, 0.08);
|
|
}
|
|
|
|
.btn-text {
|
|
background-color: transparent;
|
|
color: var(--md-primary);
|
|
}
|
|
|
|
.btn-text:hover:not(:disabled) {
|
|
background-color: rgba(25, 118, 210, 0.08);
|
|
}
|
|
|
|
.btn-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 8px;
|
|
border-radius: 50%;
|
|
background-color: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: inherit;
|
|
transition: background-color var(--md-transition-fast);
|
|
}
|
|
|
|
.btn-icon:hover:not(:disabled) {
|
|
background-color: rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.app-bar .btn-icon {
|
|
color: white;
|
|
}
|
|
|
|
.app-bar .btn-icon:hover:not(:disabled) {
|
|
background-color: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
/* ============================================
|
|
Form Controls
|
|
============================================ */
|
|
|
|
.form-group {
|
|
margin-bottom: var(--md-spacing-md);
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
margin-bottom: var(--md-spacing-sm);
|
|
color: var(--md-on-surface-variant);
|
|
}
|
|
|
|
.form-input,
|
|
.form-textarea,
|
|
.form-select {
|
|
font-family: var(--md-font-family);
|
|
font-size: 1rem;
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
border: 1px solid var(--md-outline);
|
|
border-radius: var(--md-radius-sm);
|
|
background-color: var(--md-surface);
|
|
color: var(--md-on-surface);
|
|
transition: all var(--md-transition-fast);
|
|
outline: none;
|
|
}
|
|
|
|
.form-input:focus,
|
|
.form-textarea:focus,
|
|
.form-select:focus {
|
|
border-color: var(--md-primary);
|
|
box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
|
|
}
|
|
|
|
.form-input.error,
|
|
.form-textarea.error {
|
|
border-color: var(--md-error);
|
|
}
|
|
|
|
.form-input.error:focus,
|
|
.form-textarea.error:focus {
|
|
box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.2);
|
|
}
|
|
|
|
.form-textarea {
|
|
min-height: 100px;
|
|
resize: vertical;
|
|
font-family: var(--md-font-mono);
|
|
}
|
|
|
|
.form-helper-text {
|
|
font-size: 0.75rem;
|
|
margin-top: var(--md-spacing-xs);
|
|
color: var(--md-on-surface-variant);
|
|
}
|
|
|
|
.form-helper-text.error {
|
|
color: var(--md-error);
|
|
}
|
|
|
|
.checkbox-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--md-spacing-sm);
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.checkbox {
|
|
width: 18px;
|
|
height: 18px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ============================================
|
|
Tabs
|
|
============================================ */
|
|
|
|
.tabs {
|
|
display: flex;
|
|
border-bottom: 2px solid var(--md-divider);
|
|
background-color: var(--md-surface);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.tab {
|
|
flex: 1;
|
|
padding: 12px 24px;
|
|
border: none;
|
|
background: none;
|
|
cursor: pointer;
|
|
font-family: var(--md-font-family);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--md-on-surface-variant);
|
|
position: relative;
|
|
transition: all var(--md-transition-fast);
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -2px;
|
|
}
|
|
|
|
.tab:hover {
|
|
background-color: rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.tab.active {
|
|
color: var(--md-primary);
|
|
border-bottom-color: var(--md-primary);
|
|
}
|
|
|
|
.tab-content {
|
|
display: none;
|
|
padding: var(--md-spacing-md);
|
|
animation: fadeIn var(--md-transition-fast);
|
|
}
|
|
|
|
.tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
/* ============================================
|
|
Dialog / Modal
|
|
============================================ */
|
|
|
|
.dialog-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
animation: fadeIn var(--md-transition-medium);
|
|
}
|
|
|
|
.dialog-overlay.open {
|
|
display: flex;
|
|
}
|
|
|
|
.dialog {
|
|
background-color: var(--md-surface);
|
|
border-radius: var(--md-radius-lg);
|
|
box-shadow: var(--md-shadow-5);
|
|
min-width: 400px;
|
|
max-width: 90vw;
|
|
max-height: 90vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
animation: slideUp var(--md-transition-medium);
|
|
}
|
|
|
|
.dialog-header {
|
|
padding: var(--md-spacing-lg);
|
|
border-bottom: 1px solid var(--md-divider);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.dialog-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
}
|
|
|
|
.dialog-content {
|
|
padding: var(--md-spacing-lg);
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
}
|
|
|
|
.dialog-actions {
|
|
padding: var(--md-spacing-md) var(--md-spacing-lg);
|
|
border-top: 1px solid var(--md-divider);
|
|
display: flex;
|
|
gap: var(--md-spacing-sm);
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
/* ============================================
|
|
Expansion Panel / Accordion
|
|
============================================ */
|
|
|
|
.expansion-panel {
|
|
border: 1px solid var(--md-divider);
|
|
border-radius: var(--md-radius-sm);
|
|
margin-bottom: var(--md-spacing-sm);
|
|
overflow: hidden;
|
|
transition: all var(--md-transition-fast);
|
|
}
|
|
|
|
.expansion-panel:hover {
|
|
box-shadow: var(--md-shadow-1);
|
|
}
|
|
|
|
.expansion-header {
|
|
padding: var(--md-spacing-md);
|
|
background-color: var(--md-surface-variant);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
transition: background-color var(--md-transition-fast);
|
|
}
|
|
|
|
.expansion-header:hover {
|
|
background-color: rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.expansion-header-title {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.expansion-icon {
|
|
transition: transform var(--md-transition-fast);
|
|
display: inline-flex;
|
|
}
|
|
|
|
.expansion-panel.expanded .expansion-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.expansion-content {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height var(--md-transition-medium);
|
|
}
|
|
|
|
.expansion-panel.expanded .expansion-content {
|
|
max-height: 2000px;
|
|
}
|
|
|
|
.expansion-body {
|
|
padding: var(--md-spacing-md);
|
|
border-top: 1px solid var(--md-divider);
|
|
}
|
|
|
|
/* ============================================
|
|
Loading / Spinner
|
|
============================================ */
|
|
|
|
.spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 4px solid var(--md-outline);
|
|
border-top-color: var(--md-primary);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
.spinner-small {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-width: 2px;
|
|
}
|
|
|
|
.loading-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 2000;
|
|
flex-direction: column;
|
|
gap: var(--md-spacing-lg);
|
|
}
|
|
|
|
.loading-overlay.open {
|
|
display: flex;
|
|
}
|
|
|
|
.loading-message {
|
|
color: white;
|
|
font-size: 1.25rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.loading-submessage {
|
|
color: rgba(255, 255, 255, 0.7);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* ============================================
|
|
Chips
|
|
============================================ */
|
|
|
|
.chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4px 12px;
|
|
border-radius: 16px;
|
|
font-size: 0.875rem;
|
|
background-color: var(--md-surface-variant);
|
|
color: var(--md-on-surface);
|
|
margin: 2px;
|
|
gap: var(--md-spacing-xs);
|
|
}
|
|
|
|
.chip-error {
|
|
background-color: rgba(211, 47, 47, 0.1);
|
|
color: var(--md-error);
|
|
}
|
|
|
|
.chip-warning {
|
|
background-color: rgba(245, 124, 0, 0.1);
|
|
color: var(--md-warning);
|
|
}
|
|
|
|
.chip-success {
|
|
background-color: rgba(56, 142, 60, 0.1);
|
|
color: var(--md-success);
|
|
}
|
|
|
|
/* ============================================
|
|
Table Rendering
|
|
============================================ */
|
|
|
|
.table-container {
|
|
overflow-x: auto;
|
|
margin: var(--md-spacing-md) 0;
|
|
border-radius: var(--md-radius-sm);
|
|
background-color: var(--md-surface-variant);
|
|
}
|
|
|
|
.text-table {
|
|
font-family: var(--md-font-mono);
|
|
font-size: 0.875rem;
|
|
padding: var(--md-spacing-md);
|
|
white-space: pre;
|
|
overflow-x: auto;
|
|
background-color: var(--md-surface-variant);
|
|
border-radius: var(--md-radius-sm);
|
|
border: 1px solid var(--md-divider);
|
|
}
|
|
|
|
table.rendered-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
table.rendered-table th,
|
|
table.rendered-table td {
|
|
padding: 12px;
|
|
text-align: left;
|
|
border: 1px solid var(--md-divider);
|
|
}
|
|
|
|
table.rendered-table th {
|
|
background-color: var(--md-surface-variant);
|
|
font-weight: 500;
|
|
color: var(--md-on-surface-variant);
|
|
}
|
|
|
|
table.rendered-table tbody tr:nth-child(even) {
|
|
background-color: rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
table.rendered-table tbody tr:hover {
|
|
background-color: rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
/* ============================================
|
|
List Items
|
|
============================================ */
|
|
|
|
.list-item {
|
|
padding: var(--md-spacing-md);
|
|
border-bottom: 1px solid var(--md-divider);
|
|
cursor: pointer;
|
|
transition: background-color var(--md-transition-fast);
|
|
}
|
|
|
|
.list-item:hover {
|
|
background-color: var(--md-surface-variant);
|
|
}
|
|
|
|
.list-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.list-item-primary {
|
|
font-weight: 500;
|
|
margin-bottom: var(--md-spacing-xs);
|
|
}
|
|
|
|
.list-item-secondary {
|
|
font-size: 0.875rem;
|
|
color: var(--md-on-surface-variant);
|
|
}
|
|
|
|
/* ============================================
|
|
Utility Classes
|
|
============================================ */
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.flex-column {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.flex-center {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.gap-sm { gap: var(--md-spacing-sm); }
|
|
.gap-md { gap: var(--md-spacing-md); }
|
|
.gap-lg { gap: var(--md-spacing-lg); }
|
|
|
|
.mt-sm { margin-top: var(--md-spacing-sm); }
|
|
.mt-md { margin-top: var(--md-spacing-md); }
|
|
.mt-lg { margin-top: var(--md-spacing-lg); }
|
|
|
|
.mb-sm { margin-bottom: var(--md-spacing-sm); }
|
|
.mb-md { margin-bottom: var(--md-spacing-md); }
|
|
.mb-lg { margin-bottom: var(--md-spacing-lg); }
|
|
|
|
.p-sm { padding: var(--md-spacing-sm); }
|
|
.p-md { padding: var(--md-spacing-md); }
|
|
.p-lg { padding: var(--md-spacing-lg); }
|
|
|
|
.text-center { text-align: center; }
|
|
.text-right { text-align: right; }
|
|
|
|
.color-error { color: var(--md-error); }
|
|
.color-warning { color: var(--md-warning); }
|
|
.color-success { color: var(--md-success); }
|
|
.color-primary { color: var(--md-primary); }
|
|
|
|
/* ============================================
|
|
Animations
|
|
============================================ */
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
transform: translateY(50px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
Responsive Design
|
|
============================================ */
|
|
|
|
@media (max-width: 768px) {
|
|
:root {
|
|
--drawer-width: 280px;
|
|
--app-bar-height: 56px;
|
|
}
|
|
|
|
.drawer {
|
|
position: absolute;
|
|
left: 0;
|
|
height: 100%;
|
|
z-index: 150;
|
|
transition: left var(--md-transition-medium);
|
|
box-shadow: var(--md-shadow-3);
|
|
transform: none;
|
|
}
|
|
|
|
.drawer.collapsed {
|
|
left: -100%;
|
|
transform: none;
|
|
}
|
|
|
|
.dialog {
|
|
min-width: 300px;
|
|
}
|
|
|
|
.main-area {
|
|
padding: var(--md-spacing-md);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
Component-specific Styles
|
|
============================================ */
|
|
|
|
/* Question List Item */
|
|
.question-item {
|
|
margin-bottom: var(--md-spacing-sm);
|
|
}
|
|
|
|
.question-item-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: var(--md-spacing-xs);
|
|
}
|
|
|
|
.question-text {
|
|
font-weight: 500;
|
|
flex: 1;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.question-meta {
|
|
display: flex;
|
|
gap: var(--md-spacing-sm);
|
|
font-size: 0.75rem;
|
|
color: var(--md-on-surface-variant);
|
|
}
|
|
|
|
/* Annotation Controls */
|
|
.annotation-section {
|
|
margin-top: var(--md-spacing-md);
|
|
padding: var(--md-spacing-md);
|
|
background-color: var(--md-surface-variant);
|
|
border-radius: var(--md-radius-sm);
|
|
}
|
|
|
|
.annotation-issues {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--md-spacing-sm);
|
|
margin-bottom: var(--md-spacing-md);
|
|
}
|
|
|
|
.issue-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--md-spacing-xs);
|
|
padding: 6px 12px;
|
|
background-color: var(--md-surface);
|
|
border: 1px solid var(--md-outline);
|
|
border-radius: var(--md-radius-sm);
|
|
cursor: pointer;
|
|
transition: all var(--md-transition-fast);
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.issue-checkbox:hover {
|
|
background-color: rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.issue-checkbox.checked {
|
|
background-color: rgba(211, 47, 47, 0.1);
|
|
border-color: var(--md-error);
|
|
color: var(--md-error);
|
|
}
|
|
|
|
/* Empty State */
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--md-spacing-xxl);
|
|
text-align: center;
|
|
color: var(--md-on-surface-variant);
|
|
}
|
|
|
|
.empty-state-icon {
|
|
font-size: 4rem;
|
|
opacity: 0.3;
|
|
margin-bottom: var(--md-spacing-md);
|
|
}
|
|
|
|
.empty-state-text {
|
|
font-size: 1.25rem;
|
|
margin-bottom: var(--md-spacing-sm);
|
|
}
|
|
|
|
.empty-state-subtext {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* Badge */
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 20px;
|
|
height: 20px;
|
|
padding: 0 6px;
|
|
border-radius: 10px;
|
|
background-color: var(--md-error);
|
|
color: white;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Toggle Switch */
|
|
.toggle-group {
|
|
display: inline-flex;
|
|
border: 1px solid var(--md-outline);
|
|
border-radius: var(--md-radius-sm);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.toggle-option {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
background-color: var(--md-surface);
|
|
color: var(--md-on-surface-variant);
|
|
cursor: pointer;
|
|
font-family: var(--md-font-family);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
transition: all var(--md-transition-fast);
|
|
border-right: 1px solid var(--md-divider);
|
|
}
|
|
|
|
.toggle-option:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.toggle-option:hover {
|
|
background-color: var(--md-surface-variant);
|
|
}
|
|
|
|
.toggle-option.active {
|
|
background-color: var(--md-primary);
|
|
color: white;
|
|
}
|
|
|
|
/* Metadata Display */
|
|
.metadata-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: var(--md-spacing-md);
|
|
}
|
|
|
|
.metadata-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--md-spacing-xs);
|
|
}
|
|
|
|
.metadata-label {
|
|
font-size: 0.75rem;
|
|
color: var(--md-on-surface-variant);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.metadata-value {
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* Login Screen Styles */
|
|
/* ============================================ */
|
|
|
|
.login-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.login-card {
|
|
background: white;
|
|
padding: var(--md-spacing-xxl);
|
|
border-radius: 12px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
|
max-width: 400px;
|
|
width: 90%;
|
|
}
|
|
|
|
.login-card h2 {
|
|
color: #667eea;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.login-card .form-input:focus {
|
|
border-color: #667eea;
|
|
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
|
|
}
|
|
|
|
.login-card .btn-filled {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border: none;
|
|
margin-top: var(--md-spacing-md);
|
|
}
|
|
|
|
.login-card .btn-filled:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.login-card .btn-filled:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|