:root {
--primary-color: #2563eb; --primary-hover: #1d4ed8; --primary-active: #1e40af; --primary-light: #dbeafe; --primary-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); --bg-canvas: #ffffff; --bg-canvas-inset: #f8fafc; --bg-subtle: #f1f5f9; --bg-overlay: rgba(15, 23, 42, 0.1); --bg-gradient: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); --border-default: #e2e8f0; --border-muted: #cbd5e1; --border-accent: var(--primary-color); --fg-default: #0f172a; --fg-muted: #64748b; --fg-subtle: #94a3b8; --fg-accent: var(--primary-color); --fg-inverse: #ffffff; --btn-text: var(--fg-default); --btn-bg: var(--bg-canvas); --btn-border: var(--border-default); --btn-hover-bg: var(--bg-subtle); --btn-hover-border: var(--border-muted); --btn-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --btn-hover-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --btn-primary-text: #ffffff; --btn-primary-bg: var(--primary-gradient); --btn-primary-border: var(--primary-color); --btn-primary-hover-bg: var(--primary-hover); --btn-primary-hover-border: var(--primary-hover); --btn-primary-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.25); --color-success: #10b981; --color-success-light: #d1fae5; --btn-success-text: #ffffff; --btn-success-bg: var(--color-success); --btn-success-border: var(--color-success); --btn-success-hover-bg: #059669; --btn-success-hover-border: #047857; --color-danger: #ef4444; --color-danger-light: #fecaca; --color-warning: #f59e0b; --color-warning-light: #fef3c7; --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 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); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.625; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --transition-fast: 100ms ease; --transition-normal: 150ms ease; --shadow-large: 0 8px 24px rgba(140, 149, 159, 0.2); --header-height: 64px; --toolbar-height: 48px; --border-radius: 6px; --border-radius-large: 12px; --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --font-mono: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; }
* {
box-sizing: border-box; }
html, body {
margin: 0; padding: 0; height: 100%; font-family: var(--font-family-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg-default); background: var(--bg-gradient); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.app-loading {
position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-canvas); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.loading-content {
text-align: center; color: var(--fg-muted); }
.loading-spinner {
width: 32px; height: 32px; border: 2px solid var(--border-muted); border-top: 2px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 12px; }
.loading-text {
font-size: 16px; font-weight: 500; }
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.notification {
position: fixed; top: 20px; right: 20px; padding: 12px 16px; border-radius: var(--border-radius); color: white; font-weight: 500; z-index: 10000; }
.notification-info {
background-color: var(--primary-color); }
.notification-error {
background-color: #dc3545; }
.notification-success {
background-color: #28a745; }
.notification-warning {
background-color: #ffc107; color: #212529; }
body {
display: flex; flex-direction: column; height: 100vh; max-height: 100vh; overflow: hidden; }
.header {
height: var(--header-height); background-color: var(--bg-canvas); border-bottom: 1px solid var(--border-default); position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-small); }
.header-content {
display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 16px; max-width: none; margin: 0; width: 100%; }
.header-left {
display: flex; align-items: center; min-width: 200px; }
.header-center {
display: flex; align-items: center; justify-content: center; flex: 1; }
.header-right {
display: flex; align-items: center; gap: 8px; min-width: 200px; justify-content: flex-end; }
.header-actions {
display: flex; align-items: center; gap: 6px; }
.main {
flex: 1; display: flex; flex-direction: column; min-height: 0; background-color: var(--bg-canvas); width: 100%; margin: 0; padding: 0; overflow: hidden; }
.logo {
display: flex; align-items: center; gap: 12px; }
.logo-image {
height: 48px; width: auto; }
.nav {
display: flex; gap: 8px; }
.nav-link {
padding: 10px 16px; border: none; background: none; color: var(--fg-default); text-decoration: none; border-radius: var(--border-radius); font-size: 16px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; }
.nav-link: hover {
background-color: var(--bg-subtle); }
.nav-link.active {
color: var(--fg-accent); background-color: var(--bg-subtle); }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; font-size: 14px; font-weight: 500; line-height: 1.5; color: #333333 !important; background-color: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: var(--border-radius); cursor: pointer; text-decoration: none; transition: background-color 0.1s ease; white-space: nowrap; user-select: none; position: relative; overflow: hidden; }
.btn: hover {
background-color: var(--btn-hover-bg); border-color: var(--btn-hover-border); color: #000000 !important; }
.btn: active {
transform: translateY(0); box-shadow: none; }
.btn: disabled {
opacity: 0.6; cursor: not-allowed; transform: none; }
button, .btn, .btn-text, .toolbar button,
.toolbar-group button, .btn-editor,
button[class*="btn"], [class*="btn"] button,
.toolbar [class*="btn"], .editor-header button,
#newBtn, #openBtn, #exportMdBtn, #saveBtn, #exportPdfMainBtn, #exportWordMainBtn {
color: #333333 !important; background-color: #f8f9fa !important; border: 1px solid #dee2e6 !important; }
button: hover, .btn: hover, .btn-text: hover, .toolbar button: hover,
.toolbar-group button: hover, .btn-editor: hover,
button[class*="btn"]: hover, [class*="btn"] button: hover,
.toolbar [class*="btn"]: hover, .editor-header button: hover,
#newBtn: hover, #openBtn: hover, #exportMdBtn: hover, #saveBtn: hover, #exportPdfMainBtn: hover, #exportWordMainBtn: hover {
color: #000000 !important; background-color: #e9ecef !important; border: 1px solid #adb5bd !important; }
#clearBtn, .btn-danger, .dropdown-item[title*="删除"], .dropdown-item[title*="清空"] {
color: #dc3545 !important; background-color: #fff5f5 !important; border: 1px solid #fecaca !important; }
#clearBtn: hover, .btn-danger: hover, .dropdown-item[title*="删除"]: hover, .dropdown-item[title*="清空"]: hover {
color: #ffffff !important; background-color: #dc3545 !important; border: 1px solid #dc3545 !important; }
.btn svg + text, .btn text, button text {
display: inline !important; visibility: visible !important; }
.toolbar .btn, .toolbar button {
font-size: 14px !important; font-weight: 500 !important; text-align: center !important; white-space: nowrap !important; }
.toolbar .btn: not(.btn-icon), .toolbar button: not(.btn-icon) {
min-width: 80px !important; justify-content: center !important; gap: 6px !important; }
#userBtn {
color: #333333 !important; background-color: #f8f9fa !important; border: 1px solid #dee2e6 !important; }
#userBtn: hover {
color: #000000 !important; background-color: #e9ecef !important; border: 1px solid #adb5bd !important; }
#userStatusText {
font-size: 12px; margin-left: 4px; }
.btn-warning {
background-color: #ffc107; border-color: #ffc107; color: #000; }
.btn-warning: hover {
background-color: #e0a800; border-color: #d39e00; }
.btn-secondary {
background-color: #6c757d; border-color: #6c757d; color: #fff; }
.btn-secondary: hover {
background-color: #5a6268; border-color: #545b62; }
.btn-sm {
padding: 6px 12px; font-size: 14px; }
.btn-icon {
padding: 8px; min-width: 36px; min-height: 36px; }
.btn-primary {
color: var(--btn-primary-text); background-color: var(--btn-primary-bg); border-color: var(--btn-primary-border); box-shadow: 0 2px 4px rgba(0, 112, 249, 0.2); }
.btn-primary: hover {
background-color: var(--btn-primary-hover-bg); border-color: var(--btn-primary-hover-border); box-shadow: 0 4px 8px rgba(0, 112, 249, 0.3); transform: translateY(-2px); }
.btn-success {
color: var(--btn-success-text); background-color: var(--btn-success-bg); border-color: var(--btn-success-border); box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2); font-weight: 600; }
.btn-success: hover {
background-color: var(--btn-success-hover-bg); border-color: var(--btn-success-hover-border); box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3); transform: translateY(-2px); }
.btn.active {
color: white; background-color: var(--btn-primary-bg); border-color: var(--btn-primary-border); }
.btn.active: hover {
background-color: var(--btn-primary-hover-bg); border-color: var(--btn-primary-hover-border); }
.tab-content {
display: none; height: 100%; flex: 1; }
.tab-content.active {
display: flex; flex-direction: column; flex: 1; height: 100%; }
.toolbar {
display: flex; align-items: center; gap: 12px; padding: 12px 20px; background-color: var(--bg-canvas-inset); border-bottom: 1px solid var(--border-default); height: var(--toolbar-height); box-shadow: var(--shadow-small); position: relative; z-index: 10; }
.toolbar-group {
display: flex; gap: 8px; align-items: center; }
.toolbar-group.primary {
gap: 12px; }
.toolbar-group.secondary {
position: relative; }
@media (max-width: 768px) {
.toolbar {
padding: 8px 12px; gap: 8px; }
.toolbar-group.primary {
gap: 8px; }
.toolbar-group.primary .btn {
padding: 8px 12px; font-size: 13px; }
}
.dropdown {
position: relative; display: inline-block; }
.dropdown-toggle {
display: flex; align-items: center; gap: 6px; background-color: var(--btn-bg); border: 1px solid var(--btn-border); color: var(--btn-text); padding: 8px 12px; border-radius: var(--border-radius); cursor: pointer; font-size: 14px; font-weight: 500; }
.dropdown-toggle: : after {
content: "▼"; font-size: 10px; margin-left: 4px; }
.dropdown-toggle: hover {
background-color: var(--btn-hover-bg); border-color: var(--btn-hover-border); }
.dropdown: hover .dropdown-menu {
display: block !important; }
.dropdown-menu {
position: absolute; top: 100%; left: 0; min-width: 160px; background-color: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--border-radius); box-shadow: var(--shadow-medium); z-index: 1000; margin-top: 4px; padding: 4px 0; display: none; }
.dropdown-menu.show {
display: block; }
.dropdown-item {
display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; background: none; border: none; color: var(--fg-default); font-size: 14px; text-align: left; cursor: pointer; transition: background-color 0.2s ease; }
.dropdown-item: hover {
background-color: var(--bg-subtle); }
.dropdown-item svg {
width: 16px; height: 16px; flex-shrink: 0; }
.editor-toolbar {
display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 8px 12px; background-color: var(--bg-canvas-inset); border-bottom: 1px solid var(--border-default); }
.editor-toolbar-group {
display: flex; align-items: center; gap: 8px; }
.editor-toolbar-simplified {
display: flex; align-items: center; gap: 12px; flex: 1; }
.editor-toolbar-secondary {
display: flex; align-items: center; gap: 8px; }
.btn-editor.btn-secondary {
opacity: 0.7; transition: all 0.2s ease; display: inline-flex !important; visibility: visible !important; }
.btn-editor.btn-secondary: hover {
opacity: 1; }
.btn-editor.btn-quick-rule {
display: inline-flex !important; visibility: visible !important; opacity: 1 !important; background-color: #e57373 !important; color: white !important; border: 1px solid #e57373 !important; font-weight: 500; padding: 6px 10px; border-radius: 6px; align-items: center; justify-content: center; cursor: pointer; }
.btn-editor.btn-quick-rule: hover {
background-color: #ef5350 !important; border-color: #f44336 !important; color: white !important; }
.btn-editor.btn-quick-rule: active {
background-color: #f44336 !important; }
#removeBoldBtn, #removeDigitsBtn {
display: inline-flex !important; visibility: visible !important; opacity: 1 !important; }
.rule-group-simple {
display: flex !important; align-items: center; gap: 8px; visibility: visible !important; opacity: 1 !important; margin-right: 12px; }
.rule-group-simple .form-select {
min-width: 120px; font-size: 14px; padding: 6px 10px; border: 1px solid #dee2e6; border-radius: 4px; background-color: white; height: 32px; }
.rule-group-simple .btn {
padding: 6px 10px; font-size: 12px; height: 32px; display: flex; align-items: center; gap: 4px; }
.editor-toolbar, .editor-toolbar-simplified {
display: flex !important; visibility: visible !important; }
#deduplicateLinesBtn {
display: inline-flex !important; visibility: visible !important; opacity: 0.7 !important; }
.btn, .btn-editor {
transition: background-color 0.1s ease; }
.btn: hover, .btn-editor: hover {
opacity: 0.9; }
.btn: disabled, .btn-editor: disabled {
opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn: : before, .btn-editor: : before,
button: : before, [class*="btn"]: : before {
display: none !important; }
.dropdown-toggle: : after,
.btn[aria-expanded]: : after,
.btn.loading: : after,
.btn-editor.loading: : after,
.btn.exporting: : after {
display: block !important; }
.btn: disabled: : before, .btn-editor: disabled: : before {
display: none; }
.btn.loading, .btn-editor.loading {
pointer-events: none; position: relative; color: transparent !important; }
.btn.loading: : after, .btn-editor.loading: : after {
content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid transparent; border-top: 2px solid currentColor; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.btn.success, .btn-editor.success {
background-color: var(--color-success) !important; color: white !important; }
.btn.error, .btn-editor.error {
background-color: var(--color-danger) !important; color: white !important; }
[title] {
position: relative; }
[title]: hover: : after {
content: attr(title); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.9); color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; z-index: 1000; pointer-events: none; animation: tooltipFadeIn 0.2s ease; }
@keyframes tooltipFadeIn {
from { opacity: 0; transform: translateX(-50%) translateY(4px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.editor-toolbar .dropdown-menu {
right: 0; left: auto; min-width: 140px; }
.rule-group-compact {
position: relative; display: flex !important; align-items: center; visibility: visible !important; opacity: 1 !important; }
.rule-group-dropdown {
position: relative; display: inline-flex !important; visibility: visible !important; }
.rule-group-btn {
display: inline-flex !important; visibility: visible !important; opacity: 1 !important; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border-default); border-radius: var(--border-radius); background-color: var(--bg-canvas); color: var(--fg-default); font-size: 13px; cursor: pointer; transition: all 0.2s ease; min-width: 100px; max-width: 150px; visibility: visible !important; opacity: 1 !important; }
.rule-group-btn: hover {
border-color: var(--primary-color); background-color: var(--bg-subtle); }
.rule-group-btn.applied {
background: var(--success-bg); border-color: var(--success-border); color: var(--success-fg); animation: appliedPulse 0.5s ease-out; }
@keyframes appliedPulse {
0% {
transform: scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
50% {
transform: scale(1.05); box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.3); }
100% {
transform: scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}
.loading-spinner {
width: 16px; height: 16px; border: 2px solid var(--border-default); border-top: 2px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; }
.loading-spinner.small {
width: 12px; height: 12px; border-width: 1px; }
.rule-group-item.selecting {
background-color: var(--bg-subtle); opacity: 0.8; pointer-events: none; }
.selecting-indicator {
position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.rule-group-item.loading-item,
.rule-group-item.error-item,
.rule-group-item.empty-item {
cursor: default; pointer-events: none; }
.rule-group-item.error-item {
background-color: var(--danger-bg); border-color: var(--danger-border); }
.rule-group-item.empty-rules {
opacity: 0.6; }
.rule-count-badge.no-rules {
background-color: var(--fg-muted) !important; color: var(--bg-canvas) !important; }
.empty-indicator {
font-size: 9px; color: var(--fg-muted); font-style: italic; }
.rule-group-desc {
font-size: 11px; color: var(--fg-muted); margin-top: 2px; }
.rule-group-item: focus {
outline: 2px solid var(--primary-color); outline-offset: -2px; background-color: var(--bg-subtle); }
.rule-group-item[aria-selected="true"] {
background-color: var(--primary-color); color: white; }
.rule-group-item[aria-selected="true"] .rule-group-name,
.rule-group-item[aria-selected="true"] .rule-group-desc {
color: white; }
#refreshRuleGroupsBtn.loading svg {
animation: spin 1s linear infinite; }
.rule-group-btn: focus {
outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(16, 142, 233, 0.2); }
.rule-group-text {
flex: 1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-align: left; }
.dropdown-arrow {
transition: transform 0.2s ease; flex-shrink: 0; }
.rule-group-btn.active .dropdown-arrow {
transform: rotate(180deg); }
.rule-group-menu {
position: absolute; top: 100%; right: 0; background-color: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--border-radius); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); z-index: 1000; display: none; min-width: 180px; margin-top: 2px; padding: 0; }
.rule-group-menu.show {
display: block; }
.rule-group-menu-header {
display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background-color: var(--bg-subtle); border-bottom: 1px solid var(--border-default); font-size: 12px; font-weight: 500; color: var(--fg-muted); }
.btn-icon-sm {
padding: 2px; border: none; background: none; color: var(--fg-muted); cursor: pointer; border-radius: 2px; transition: all 0.2s ease; }
.btn-icon-sm: hover {
background-color: var(--bg-muted); color: var(--fg-default); }
.rule-group-list {
max-height: 200px; overflow-y: auto; }
.rule-group-item {
display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 8px 12px !important; cursor: pointer; transition: all 0.2s ease; border-bottom: 1px solid var(--border-muted); background: white; border: none; width: 100%; text-align: left; font-size: 13px; color: var(--fg-default); min-height: 36px; box-sizing: border-box; }
.rule-group-item > div {
display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; padding: 0 !important; }
.rule-group-item > div > span: first-child {
font-size: 13px !important; font-weight: 400 !important; color: var(--fg-default) !important; flex: 1 !important; margin-right: 8px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.rule-group-item > div > span: last-child {
background: var(--primary-color) !important; color: white !important; padding: 2px 6px !important; border-radius: 10px !important; font-size: 10px !important; font-weight: 500 !important; min-width: 20px !important; text-align: center !important; flex-shrink: 0 !important; }
.rule-group-item: last-child {
border-bottom: none; }
.rule-group-item: hover {
background-color: var(--bg-subtle) !important; }
.rule-group-item: hover > div > span: last-child {
background: var(--primary-color) !important; color: white !important; }
.rule-group-item.active {
background-color: var(--primary-color) !important; color: white !important; }
.rule-group-item.active > div > span: first-child {
color: white !important; }
.rule-group-item.active > div > span: last-child {
background: rgba(255, 255, 255, 0.3) !important; color: white !important; }
.rule-group-item.active .rule-group-count {
background-color: rgba(255, 255, 255, 0.2); color: white; }
.rule-group-item: hover .rule-group-count {
background-color: var(--primary-color); color: white; }
.rule-group-menu-footer {
padding: 8px 12px; background-color: var(--bg-subtle); border-top: 1px solid var(--border-default); }
.rule-group-menu-footer .btn-sm {
width: 100%; font-size: 12px; padding: 6px 12px; }
.export-progress-bar {
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10000; background: rgba(0, 0, 0, 0.8); color: white; padding: 20px; border-radius: 8px; min-width: 300px; text-align: center; display: none; }
.progress-bar-container {
position: relative; width: 100%; height: 20px; background: rgba(255, 255, 255, 0.2); border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.progress-bar-fill {
height: 100%; background: linear-gradient(90deg, #4CAF50, #45a049); border-radius: 10px; width: 0%; transition: width 0.3s ease; }
.progress-bar-text {
font-size: 14px; font-weight: 500; }
@keyframes exportProgress {
0% { width: 0%; }
50% { width: 70%; }
100% { width: 100%; }
}
.btn.exporting {
opacity: 0.6; cursor: not-allowed; position: relative; }
.btn.exporting: : after {
content: ''; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 12px; height: 12px; border: 2px solid transparent; border-top: 2px solid currentColor; border-radius: 50%; animation: spin 1s linear infinite; }
@media (max-width: 768px) {
.rule-group-btn {
min-width: 80px; max-width: 120px; padding: 6px 8px; font-size: 12px; }
.rule-group-text {
font-size: 12px; }
.rule-group-menu {
min-width: 180px; max-height: 250px; }
.rule-group-item {
padding: 10px 12px; }
.rule-group-name {
font-size: 12px; }
.rule-group-count {
font-size: 10px; padding: 1px 4px; }
.export-progress-bar {
min-width: 250px; padding: 15px; }
}
@media (max-width: 480px) {
.rule-group-btn {
min-width: 70px; max-width: 100px; padding: 5px 6px; }
.rule-group-menu {
min-width: 160px; max-height: 200px; }
.rule-group-item {
padding: 8px 10px; }
}
.mobile-toolbar {
display: none; background-color: var(--bg-canvas); border-bottom: 1px solid var(--border-default); padding: 8px 12px; gap: 12px; flex-wrap: wrap; justify-content: space-between; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.screen-mobile .mobile-toolbar {
display: flex; }
.mobile-toolbar-group {
display: flex; gap: 8px; align-items: center; }
.mobile-btn {
display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px; background-color: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: var(--border-radius); color: var(--btn-text); font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; user-select: none; -webkit-tap-highlight-color: transparent; }
.mobile-btn: hover,
.mobile-btn: active {
background-color: var(--btn-hover-bg); border-color: var(--btn-hover-border); transform: scale(0.95); }
.mobile-btn: focus {
outline: none; box-shadow: 0 0 0 2px rgba(0, 112, 249, 0.3); }
.mobile-preview-mode .editor-pane {
display: none; }
.mobile-preview-mode .preview-pane {
width: 100%; }
.mobile-optimized .toolbar-group {
gap: 12px; }
.mobile-optimized .btn,
.mobile-optimized .btn-editor {
min-height: 44px; min-width: 44px; padding: 12px 16px; }
.mobile-optimized .dropdown-menu {
min-width: 200px; font-size: 16px; }
.mobile-optimized .dropdown-item {
padding: 12px 16px; min-height: 44px; }
.touch-device .btn: hover {
transform: none; }
.touch-device .btn: active {
transform: scale(0.95); }
.touch-device .mobile-btn: active {
background-color: var(--primary-color); color: white; }
.onboarding-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 10000; transition: all 0.3s ease; }
.onboarding-tooltip {
position: fixed; background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-large); max-width: 400px; min-width: 300px; z-index: 10001; animation: tooltipFadeIn 0.3s ease; }
@keyframes tooltipFadeIn {
from {
opacity: 0; transform: scale(0.9); }
to {
opacity: 1; transform: scale(1); }
}
.tooltip-header {
display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 12px; border-bottom: 1px solid var(--border-muted); }
.tooltip-title {
margin: 0; font-size: 18px; font-weight: 600; color: var(--fg-default); }
.tooltip-close {
background: none; border: none; font-size: 24px; color: var(--fg-muted); cursor: pointer; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--border-radius); transition: all 0.2s ease; }
.tooltip-close: hover {
background-color: var(--bg-subtle); color: var(--fg-default); }
.tooltip-content {
padding: 16px 20px; }
.tooltip-text {
margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-default); }
.tooltip-footer {
padding: 16px 20px; border-top: 1px solid var(--border-muted); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.tooltip-progress {
flex: 1; }
.progress-text {
font-size: 12px; color: var(--fg-muted); margin-bottom: 8px; display: block; }
.progress-bar {
width: 100%; height: 4px; background-color: var(--bg-subtle); border-radius: 2px; overflow: hidden; }
.progress-fill {
height: 100%; background-color: var(--primary-color); border-radius: 2px; transition: width 0.3s ease; }
.tooltip-actions {
display: flex; gap: 8px; }
.btn-secondary {
background-color: var(--bg-subtle); border: 1px solid var(--border-default); color: var(--fg-default); padding: 8px 16px; border-radius: var(--border-radius); font-size: 14px; cursor: pointer; transition: all 0.2s ease; }
.btn-secondary: hover {
background-color: var(--bg-muted); border-color: var(--border-muted); }
.onboarding-highlight {
position: relative; z-index: 9999; box-shadow: 0 0 0 4px rgba(0, 112, 249, 0.3), 0 0 20px rgba(0, 112, 249, 0.2); border-radius: var(--border-radius); transition: all 0.3s ease; }
@media (max-width: 768px) {
.onboarding-tooltip {
max-width: 90vw; min-width: 280px; margin: 20px; }
.tooltip-header,
.tooltip-content,
.tooltip-footer {
padding: 12px 16px; }
.tooltip-footer {
flex-direction: column; gap: 12px; align-items: stretch; }
.tooltip-actions {
justify-content: space-between; }
.btn-secondary,
.btn-primary {
flex: 1; text-align: center; }
}
.documents-header {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border-muted); }
.documents-title {
display: flex; align-items: center; gap: 12px; }
.documents-title h2 {
margin: 0; font-size: 24px; font-weight: 600; color: var(--fg-default); }
.documents-count {
background-color: var(--bg-subtle); color: var(--fg-muted); padding: 4px 8px; border-radius: var(--border-radius); font-size: 12px; font-weight: 500; }
.documents-toolbar {
display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.search-container {
position: relative; flex: 1; max-width: 400px; }
.search-icon {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--fg-muted); pointer-events: none; }
.search-input {
width: 100%; padding: 10px 12px 10px 36px; border: 1px solid var(--border-default); border-radius: var(--border-radius); background-color: var(--bg-canvas); color: var(--fg-default); font-size: 14px; transition: all 0.2s ease; }
.search-input: focus {
outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(0, 112, 249, 0.1); }
.filter-container {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filter-select {
padding: 8px 12px; border: 1px solid var(--border-default); border-radius: var(--border-radius); background-color: var(--bg-canvas); color: var(--fg-default); font-size: 14px; min-width: 140px; cursor: pointer; }
.filter-select: focus {
outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(0, 112, 249, 0.1); }
.view-toggle {
display: flex; gap: 4px; background-color: var(--bg-subtle); padding: 4px; border-radius: var(--border-radius); }
.view-toggle .btn-icon {
padding: 8px; border: none; background: none; color: var(--fg-muted); border-radius: calc(var(--border-radius) - 2px); transition: all 0.2s ease; }
.view-toggle .btn-icon.active {
background-color: var(--bg-canvas); color: var(--fg-default); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.loading-state {
display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: var(--fg-muted); }
.loading-spinner {
width: 32px; height: 32px; border: 3px solid var(--bg-subtle); border-top: 3px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 16px; }
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.empty-state,
.no-results-state {
display: flex; align-items: center; justify-content: center; padding: 60px 20px; }
.empty-content {
text-align: center; max-width: 400px; }
.empty-icon {
color: var(--fg-muted); margin-bottom: 16px; opacity: 0.6; }
.empty-content h3 {
margin: 0 0 8px 0; font-size: 18px; font-weight: 600; color: var(--fg-default); }
.empty-content p {
margin: 0 0 24px 0; color: var(--fg-muted); line-height: 1.5; }
.table-container {
overflow-x: auto; border: 1px solid var(--border-default); border-radius: var(--border-radius); background-color: var(--bg-canvas); }
.documents-table {
width: 100%; border-collapse: collapse; }
.documents-table th {
background-color: var(--bg-subtle); padding: 12px 16px; text-align: left; font-weight: 600; font-size: 12px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-default); position: relative; cursor: pointer; user-select: none; }
.documents-table th: hover {
background-color: var(--bg-muted); }
.sort-icon {
margin-left: 4px; opacity: 0.5; transition: opacity 0.2s ease; }
.documents-table th: hover .sort-icon {
opacity: 1; }
.documents-table td {
padding: 12px 16px; border-bottom: 1px solid var(--border-muted); color: var(--fg-default); font-size: 14px; }
.documents-table tr: hover {
background-color: var(--bg-subtle); }
.documents-table tr: last-child td {
border-bottom: none; }
.large-document-loading {
display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: var(--fg-muted); }
.large-document-loading .loading-spinner {
width: 32px; height: 32px; border: 3px solid var(--bg-subtle); border-top: 3px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 16px; }
.large-document-loading p {
margin: 0 0 16px 0; font-size: 14px; color: var(--fg-muted); }
.loading-progress {
width: 200px; height: 4px; background-color: var(--bg-subtle); border-radius: 2px; overflow: hidden; }
.progress-bar {
height: 100%; background-color: var(--primary-color); border-radius: 2px; transition: width 0.3s ease; }
@media (max-width: 768px) {
.documents-toolbar {
flex-direction: column; align-items: stretch; gap: 12px; }
.search-container {
max-width: none; }
.filter-container {
justify-content: space-between; }
.filter-select {
min-width: auto; flex: 1; }
.documents-table {
font-size: 12px; }
.documents-table th,
.documents-table td {
padding: 8px 12px; }
.large-document-loading {
padding: 40px 20px; }
.loading-progress {
width: 150px; }
}
.performance-panel {
position: fixed; top: 20px; right: 20px; width: 350px; max-height: 80vh; background-color: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--border-radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); z-index: 1000; overflow: hidden; }
.performance-header {
display: flex; justify-content: space-between; align-items: center; padding: 16px; background-color: var(--bg-subtle); border-bottom: 1px solid var(--border-default); }
.performance-header h3 {
margin: 0; font-size: 16px; font-weight: 600; color: var(--fg-default); }
.performance-actions {
display: flex; gap: 8px; }
.performance-content {
padding: 16px; max-height: calc(80vh - 60px); overflow-y: auto; }
.performance-section {
margin-bottom: 24px; }
.performance-section: last-child {
margin-bottom: 0; }
.performance-section h4 {
margin: 0 0 12px 0; font-size: 14px; font-weight: 600; color: var(--fg-default); border-bottom: 1px solid var(--border-muted); padding-bottom: 4px; }
.performance-metrics,
.memory-metrics {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.metric-item {
display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background-color: var(--bg-subtle); border-radius: var(--border-radius); font-size: 13px; }
.metric-label {
color: var(--fg-muted); font-weight: 500; }
.metric-value {
color: var(--fg-default); font-weight: 600; font-family: 'Consolas', monospace; }
.performance-settings {
display: flex; flex-direction: column; gap: 16px; }
.setting-item {
display: flex; flex-direction: column; gap: 4px; }
.setting-label {
display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--fg-default); cursor: pointer; }
.setting-label input[type="checkbox"] {
margin: 0; }
.setting-label select {
margin-left: auto; padding: 4px 8px; border: 1px solid var(--border-default); border-radius: var(--border-radius); background-color: var(--bg-canvas); color: var(--fg-default); font-size: 12px; }
.setting-help {
font-size: 11px; color: var(--fg-muted); margin-left: 20px; }
.metric-value.good {
color: #28a745; }
.metric-value.warning {
color: #ffc107; }
.metric-value.danger {
color: #dc3545; }
.btn-text {
margin-left: 6px; font-size: 14px; font-weight: 500; }
.header-actions .btn {
display: flex; align-items: center; gap: 6px; }
.modal-header-actions {
display: flex; align-items: center; gap: 12px; }
.rules-preview {
margin: 20px 0; padding: 16px; background-color: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: var(--border-radius); }
.preview-stats {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border-muted); }
.preview-count {
font-size: 14px; color: var(--fg-muted); }
.preview-content {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.preview-before,
.preview-after {
background-color: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--border-radius); overflow: hidden; }
.preview-before h5,
.preview-after h5 {
margin: 0; padding: 8px 12px; background-color: var(--bg-subtle); border-bottom: 1px solid var(--border-default); font-size: 12px; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; }
.preview-text {
padding: 12px; max-height: 200px; overflow-y: auto; font-family: 'Consolas', monospace; font-size: 13px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.preview-highlight {
background-color: #fff3cd; color: #856404; padding: 2px 4px; border-radius: 2px; }
.preview-replacement {
background-color: #d1ecf1; color: #0c5460; padding: 2px 4px; border-radius: 2px; }
.batch-rules-section {
margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-default); }
.batch-rules-section h4 {
margin: 0 0 12px; color: var(--fg-default); font-size: 16px; font-weight: 600; }
.batch-rules-help {
margin-bottom: 12px; padding: 8px 12px; background-color: var(--bg-subtle); border-radius: var(--border-radius); border-left: 3px solid var(--primary-color); }
.batch-rules-help small {
color: var(--fg-muted); font-size: 12px; }
#batchRulesInput {
font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 13px; line-height: 1.4; resize: vertical; min-height: 120px; }
.batch-rules-actions {
display: flex; gap: 8px; margin-top: 12px; }
.rule-template-dropdown {
position: relative; display: inline-block; }
.template-menu {
position: absolute; top: 100%; left: 0; background-color: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--border-radius); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1000; min-width: 200px; max-height: 300px; overflow-y: auto; display: none; }
.template-menu.show {
display: block; }
.template-item {
padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border-muted); transition: background-color 0.2s ease; }
.template-item: hover {
background-color: var(--bg-subtle); }
.template-item: last-child {
border-bottom: none; }
.template-name {
font-weight: 500; color: var(--fg-default); font-size: 13px; }
.template-description {
font-size: 11px; color: var(--fg-muted); margin-top: 2px; }
.quick-rules-toolbar {
background-color: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: var(--border-radius); margin-bottom: 16px; overflow: hidden; transition: all 0.3s ease; }
.quick-rules-header {
display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background-color: var(--bg-muted); border-bottom: 1px solid var(--border-default); }
.quick-rules-title {
font-size: 13px; font-weight: 600; color: var(--fg-default); }
.quick-rules-actions {
display: flex; gap: 6px; }
.quick-rules-content {
padding: 12px 16px; }
.quick-rules-groups {
display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.quick-rule-group {
display: flex; align-items: center; gap: 6px; padding: 6px 12px; background-color: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--border-radius); cursor: pointer; transition: all 0.2s ease; font-size: 13px; }
.quick-rule-group: hover {
background-color: var(--bg-subtle); border-color: var(--primary-color); }
.quick-rule-group.active {
background-color: var(--primary-color); color: white; border-color: var(--primary-color); }
.quick-rule-group-name {
font-weight: 500; }
.quick-rule-group-count {
font-size: 11px; opacity: 0.8; background-color: rgba(255, 255, 255, 0.2); padding: 2px 6px; border-radius: 10px; }
.quick-rule-group.active .quick-rule-group-count {
background-color: rgba(255, 255, 255, 0.3); }
.quick-rules-info {
display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--fg-muted); }
.quick-rules-status {
flex: 1; }
.quick-rules-apply {
display: flex; gap: 8px; }
.quick-rules-toolbar.collapsed .quick-rules-content {
display: none; }
.quick-rules-toolbar.collapsed .quick-rules-header {
border-bottom: none; }
.quick-rules-tabs {
display: flex; border-bottom: 1px solid var(--border-default); margin-bottom: 12px; }
.quick-tab-btn {
flex: 1; padding: 8px 12px; border: none; background-color: transparent; color: var(--fg-muted); font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; border-bottom: 2px solid transparent; }
.quick-tab-btn: hover {
color: var(--fg-default); background-color: var(--bg-subtle); }
.quick-tab-btn.active {
color: var(--primary-color); border-bottom-color: var(--primary-color); }
.quick-tab-content {
display: none; }
.quick-tab-content.active {
display: block; }
.quick-common-rules {
display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.quick-common-rule {
display: flex; flex-direction: column; align-items: center; padding: 8px 6px; background-color: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--border-radius); cursor: pointer; transition: all 0.2s ease; font-size: 11px; text-align: center; }
.quick-common-rule: hover {
background-color: var(--bg-subtle); border-color: var(--primary-color); transform: translateY(-1px); }
.quick-common-rule.active {
background-color: var(--primary-color); color: white; border-color: var(--primary-color); }
.quick-common-rule-icon {
font-size: 16px; margin-bottom: 4px; }
.quick-common-rule-name {
font-weight: 500; line-height: 1.2; }
.quick-common-rule-desc {
font-size: 10px; opacity: 0.8; margin-top: 2px; }
pre[class*="language-"] {
position: relative; background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: var(--border-radius); padding: 16px; margin: 16px 0; overflow-x: auto; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 14px; line-height: 1.5; }
code[class*="language-"] {
color: #333; background: none; text-shadow: none; font-family: inherit; font-size: inherit; line-height: inherit; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; tab-size: 4; hyphens: none; }
pre.line-numbers {
position: relative; padding-left: 3.8em; counter-reset: linenumber; }
pre.line-numbers > code {
position: relative; white-space: inherit; }
.line-numbers .line-numbers-rows {
position: absolute; pointer-events: none; top: 0; font-size: 100%; left: -3.8em; width: 3em; letter-spacing: -1px; border-right: 1px solid #999; user-select: none; }
.line-numbers-rows > span {
display: block; counter-increment: linenumber; }
.line-numbers-rows > span: before {
content: counter(linenumber); color: #999; display: block; padding-right: 0.8em; text-align: right; }
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #708090; font-style: italic; }
.token.punctuation {
color: #999; }
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905; }
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690; }
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a; }
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a; }
.token.function,
.token.class-name {
color: #dd4a68; }
.token.regex,
.token.important,
.token.variable {
color: #e90; }
.token.important,
.token.bold {
font-weight: bold; }
.token.italic {
font-style: italic; }
.token.entity {
cursor: help; }
.language-json .token.property {
color: #0451a5; }
.language-json .token.string {
color: #a31515; }
.language-html .token.tag .token.tag {
color: #800000; }
.language-html .token.attr-name {
color: #ff0000; }
.language-css .token.selector {
color: #800000; }
.language-css .token.property {
color: #ff0000; }
@media (prefers-color-scheme: dark) {
pre[class*="language-"] {
background-color: #2d3748; border-color: #4a5568; color: #e2e8f0; }
code[class*="language-"] {
color: #e2e8f0; }
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #a0aec0; }
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #f56565; }
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #68d391; }
.token.atrule,
.token.attr-value,
.token.keyword {
color: #63b3ed; }
.token.function,
.token.class-name {
color: #fbb6ce; }
}
.mobile-toolbar {
display: none; background-color: var(--bg-canvas); border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); padding: 8px 0; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.mobile-toolbar-content {
display: flex; justify-content: space-between; align-items: center; padding: 0 12px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.mobile-toolbar-content: : -webkit-scrollbar {
display: none; }
.mobile-tool-group {
display: flex; gap: 4px; flex-shrink: 0; }
.mobile-tool-btn {
display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border-default); border-radius: var(--border-radius); background-color: var(--bg-canvas); color: var(--fg-default); cursor: pointer; transition: all 0.2s ease; font-size: 14px; padding: 0; }
.mobile-tool-btn: hover {
background-color: var(--bg-subtle); border-color: var(--primary-color); }
.mobile-tool-btn: active {
background-color: var(--primary-color); color: white; transform: scale(0.95); }
.mobile-tool-btn.active {
background-color: var(--primary-color); color: white; border-color: var(--primary-color); }
.mobile-tool-toggle {
margin-left: 8px; border-color: var(--border-muted); }
.mobile-toolbar.collapsed {
padding: 4px 0; }
.mobile-toolbar.collapsed .mobile-toolbar-content {
justify-content: flex-end; }
.mobile-toolbar.collapsed .mobile-tool-group: not(: last-child) {
display: none; }
.mobile-toolbar.collapsed .mobile-tool-toggle svg {
transform: rotate(180deg); }
@media (max-width: 768px) {
.mobile-toolbar {
display: block; }
.editor-pane .pane-header {
padding: 8px 12px; }
.editor-pane .pane-header h3 {
font-size: 16px; }
.editor-toolbar {
padding: 6px 12px; gap: 8px; }
.btn-editor {
width: 32px; height: 32px; padding: 0; }
.btn-editor svg {
width: 14px; height: 14px; }
}
@media (max-width: 480px) {
.mobile-toolbar-content {
padding: 0 8px; }
.mobile-tool-btn {
width: 32px; height: 32px; }
.mobile-tool-btn svg {
width: 14px; height: 14px; }
.mobile-tool-group {
gap: 2px; }
}
.onboarding-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.3s ease-out; }
.onboarding-backdrop {
position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); }
.onboarding-content {
position: relative; background-color: var(--bg-canvas); border-radius: 12px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); width: 90%; max-width: 500px; max-height: 90vh; overflow: hidden; animation: slideUp 0.3s ease-out; }
.onboarding-header {
display: flex; justify-content: space-between; align-items: center; padding: 24px 24px 0; }
.onboarding-header h2 {
margin: 0; color: var(--fg-default); font-size: 24px; font-weight: 600; }
.onboarding-close {
width: 32px; height: 32px; border-radius: 50%; background-color: var(--bg-subtle); border: none; color: var(--fg-muted); cursor: pointer; transition: all 0.2s ease; }
.onboarding-close: hover {
background-color: var(--bg-muted); color: var(--fg-default); }
.onboarding-body {
padding: 24px; }
.step-content {
text-align: center; }
.step-icon {
display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; margin: 0 auto 24px; background: linear-gradient(135deg, var(--primary-color), #4f46e5); border-radius: 50%; color: white; }
.step-content h3 {
margin: 0 0 16px; color: var(--fg-default); font-size: 20px; font-weight: 600; }
.step-content p {
margin: 0 0 32px; color: var(--fg-muted); font-size: 16px; line-height: 1.6; }
.step-actions {
display: flex; gap: 12px; justify-content: center; }
.onboarding-footer {
display: flex; justify-content: space-between; align-items: center; padding: 0 24px 24px; }
.step-indicators {
display: flex; gap: 8px; }
.step-dot {
width: 8px; height: 8px; border-radius: 50%; background-color: var(--border-muted); transition: all 0.3s ease; }
.step-dot.active {
background-color: var(--primary-color); transform: scale(1.2); }
.step-counter {
font-size: 14px; color: var(--fg-muted); }
.guide-spotlight {
position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; pointer-events: none; }
.spotlight-content {
position: relative; width: 100%; height: 100%; }
.spotlight-tooltip {
position: absolute; background-color: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--border-radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); padding: 16px; max-width: 300px; pointer-events: auto; z-index: 10001; }
.tooltip-content h4 {
margin: 0 0 8px; color: var(--fg-default); font-size: 16px; font-weight: 600; }
.tooltip-content p {
margin: 0 0 16px; color: var(--fg-muted); font-size: 14px; line-height: 1.5; }
.tooltip-actions {
display: flex; gap: 8px; justify-content: flex-end; }
.tooltip-arrow {
position: absolute; width: 0; height: 0; border: 8px solid transparent; }
.tooltip-arrow.top {
bottom: -16px; left: 50%; transform: translateX(-50%); border-top-color: var(--bg-canvas); }
.tooltip-arrow.bottom {
top: -16px; left: 50%; transform: translateX(-50%); border-bottom-color: var(--bg-canvas); }
.tooltip-arrow.left {
right: -16px; top: 50%; transform: translateY(-50%); border-left-color: var(--bg-canvas); }
.tooltip-arrow.right {
left: -16px; top: 50%; transform: translateY(-50%); border-right-color: var(--bg-canvas); }
@keyframes fadeIn {
from {
opacity: 0; }
to {
opacity: 1; }
}
@keyframes slideUp {
from {
opacity: 0; transform: translateY(30px); }
to {
opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 0 0 var(--primary-color); }
50% {
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 0 8px rgba(var(--primary-color-rgb), 0.3); }
100% {
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 0 0 var(--primary-color); }
}
.spotlight-highlight {
animation: pulse 2s infinite; }
.editor-help-tip,
.preview-help-tip,
.rules-help-tip {
font-size: 12px; color: var(--fg-muted); margin-top: 4px; padding: 4px 8px; background-color: var(--bg-subtle); border-radius: 4px; border-left: 3px solid var(--primary-color); opacity: 0.8; transition: opacity 0.3s ease; }
.editor-help-tip: hover,
.preview-help-tip: hover,
.rules-help-tip: hover {
opacity: 1; }
[title] {
position: relative; }
.tooltip {
position: absolute; background-color: var(--bg-overlay); color: var(--fg-default); padding: 8px 12px; border-radius: var(--border-radius); font-size: 12px; white-space: nowrap; z-index: 1000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border: 1px solid var(--border-default); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; pointer-events: none; }
.tooltip.show {
opacity: 1; visibility: visible; }
.tooltip: : before {
content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--bg-overlay); }
.setting-help {
font-size: 11px; color: var(--fg-muted); font-style: italic; margin-left: 8px; }
@media (max-width: 768px) {
.performance-panel {
position: fixed; top: 0; right: 0; left: 0; bottom: 0; width: auto; max-height: none; border-radius: 0; }
.performance-content {
max-height: calc(100vh - 60px); }
.performance-metrics,
.memory-metrics {
grid-template-columns: 1fr; }
.btn-text {
display: none; }
.onboarding-content {
width: 95%; margin: 20px; }
.onboarding-header {
padding: 20px 20px 0; }
.onboarding-header h2 {
font-size: 20px; }
.onboarding-body {
padding: 20px; }
.step-icon {
width: 60px; height: 60px; margin-bottom: 20px; }
.step-icon svg {
width: 36px; height: 36px; }
.step-content h3 {
font-size: 18px; }
.step-content p {
font-size: 14px; }
.step-actions {
flex-direction: column; }
.spotlight-tooltip {
max-width: 250px; padding: 12px; }
}
.preview-container {
flex: 1; border: 1px solid var(--border-default); border-radius: var(--border-radius); overflow: hidden; background-color: white; }
.preview-frame {
width: 100%; height: 100%; overflow: auto; padding: 20px; background-color: white; color: #333; }
.preview-loading {
display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; color: var(--fg-muted); }
.loading-spinner {
width: 32px; height: 32px; border: 3px solid var(--border-muted); border-top: 3px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 12px; }
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.export-info {
display: flex; gap: 16px; font-size: 12px; color: var(--fg-muted); }
.word-preview {
font-family: 'Times New Roman', serif; line-height: 1.6; max-width: 21cm; margin: 0 auto; background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 2.54cm; }
.word-preview h1,
.word-preview h2,
.word-preview h3,
.word-preview h4,
.word-preview h5,
.word-preview h6 {
color: #333; margin-top: 1em; margin-bottom: 0.5em; }
.word-preview h1 { font-size: 24px; }
.word-preview h2 { font-size: 20px; }
.word-preview h3 { font-size: 16px; }
.word-preview p {
margin-bottom: 1em; text-align: justify; }
.word-preview table {
border-collapse: collapse; width: 100%; margin: 1em 0; }
.word-preview th,
.word-preview td {
border: 1px solid #333; padding: 8px; text-align: left; }
.word-preview th {
background-color: #f0f0f0; font-weight: bold; }
.html-preview {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #333; }
.pdf-preview {
font-family: 'Times New Roman', serif; line-height: 1.5; color: #000; background-color: white; }
.latex-preview .code-preview {
background-color: #f0f8ff; }
.rule-analytics-modal,
.rule-validation-modal {
position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; }
.rule-analytics-modal .modal-overlay,
.rule-validation-modal .modal-overlay {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; }
.rule-analytics-modal .modal-content,
.rule-validation-modal .modal-content {
background-color: var(--bg-canvas); border-radius: var(--border-radius); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); max-width: 800px; max-height: 80vh; width: 90%; overflow: hidden; display: flex; flex-direction: column; }
.rule-analytics-modal .modal-header,
.rule-validation-modal .modal-header {
display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-default); background-color: var(--bg-subtle); }
.rule-analytics-modal .modal-header h3,
.rule-validation-modal .modal-header h3 {
margin: 0; color: var(--fg-default); font-size: 18px; font-weight: 600; }
.rule-analytics-modal .modal-close,
.rule-validation-modal .modal-close {
background: none; border: none; font-size: 24px; color: var(--fg-muted); cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: all 0.2s ease; }
.rule-analytics-modal .modal-close: hover,
.rule-validation-modal .modal-close: hover {
background-color: var(--bg-danger-muted); color: var(--fg-danger); }
.rule-analytics-modal .modal-body,
.rule-validation-modal .modal-body {
padding: 20px; overflow-y: auto; flex: 1; }
.analytics-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.analytics-card {
background-color: var(--bg-canvas-inset); border: 1px solid var(--border-default); border-radius: var(--border-radius); padding: 16px; }
.analytics-card h4 {
margin: 0 0 12px 0; color: var(--fg-default); font-size: 16px; font-weight: 600; }
.analytics-card p {
margin: 8px 0; color: var(--fg-default); font-size: 14px; }
.analytics-card ul {
margin: 8px 0; padding-left: 20px; color: var(--fg-default); }
.analytics-card li {
margin: 4px 0; font-size: 14px; }
.validation-results {
list-style: none; padding: 0; margin: 16px 0; }
.validation-results > li {
margin: 16px 0; padding: 12px; background-color: var(--bg-canvas-inset); border: 1px solid var(--border-default); border-radius: var(--border-radius); }
.validation-results > li > strong {
color: var(--fg-default); font-size: 14px; display: block; margin-bottom: 8px; }
.validation-results ul {
margin: 8px 0 0 0; padding-left: 20px; }
.validation-results .error {
color: var(--fg-danger); font-size: 13px; margin: 4px 0; }
.rule-enhancement-buttons {
display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap; }
.rule-enhancement-btn {
padding: 8px 12px; background-color: var(--bg-accent-muted); color: var(--fg-accent); border: 1px solid var(--border-accent-emphasis); border-radius: var(--border-radius); font-size: 12px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 6px; }
.rule-enhancement-btn: hover {
background-color: var(--bg-accent-emphasis); color: var(--fg-on-emphasis); }
.rule-enhancement-btn: active {
transform: translateY(1px); }
.rule-enhancement-btn.export {
background-color: var(--bg-success-muted); color: var(--fg-success); border-color: var(--border-success-emphasis); }
.rule-enhancement-btn.export: hover {
background-color: var(--bg-success-emphasis); color: var(--fg-on-emphasis); }
.rule-enhancement-btn.import {
background-color: var(--bg-attention-muted); color: var(--fg-attention); border-color: var(--border-attention-emphasis); }
.rule-enhancement-btn.import: hover {
background-color: var(--bg-attention-emphasis); color: var(--fg-on-emphasis); }
.rule-enhancement-btn.analytics {
background-color: var(--bg-accent-muted); color: var(--fg-accent); border-color: var(--border-accent-emphasis); }
.rule-enhancement-btn.validate {
background-color: var(--bg-severe-muted); color: var(--fg-severe); border-color: var(--border-severe-emphasis); }
.rule-enhancement-btn.validate: hover {
background-color: var(--bg-severe-emphasis); color: var(--fg-on-emphasis); }
.auto-complete-panel {
position: absolute; background-color: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--border-radius); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); max-height: 200px; overflow-y: auto; z-index: 1000; min-width: 200px; }
.completion-item {
padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border-muted); display: flex; justify-content: space-between; align-items: center; transition: background-color 0.2s ease; }
.completion-item: last-child {
border-bottom: none; }
.completion-item: hover,
.completion-item.selected {
background-color: var(--bg-accent-muted); }
.completion-text {
font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 13px; color: var(--fg-default); font-weight: 500; }
.completion-description {
font-size: 11px; color: var(--fg-muted); font-style: italic; }
.document-outline-panel {
position: fixed; right: 20px; top: 100px; width: 250px; max-height: 400px; background-color: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--border-radius); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); z-index: 100; overflow: hidden; }
.outline-header {
display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background-color: var(--bg-subtle); border-bottom: 1px solid var(--border-default); }
.outline-header h4 {
margin: 0; font-size: 14px; font-weight: 600; color: var(--fg-default); }
.outline-toggle {
background: none; border: none; font-size: 16px; cursor: pointer; padding: 4px; border-radius: 4px; transition: background-color 0.2s ease; }
.outline-toggle: hover {
background-color: var(--bg-accent-muted); }
.outline-content {
max-height: 350px; overflow-y: auto; padding: 8px 0; }
.outline-empty {
padding: 20px 16px; text-align: center; color: var(--fg-muted); font-size: 13px; font-style: italic; }
.outline-list {
list-style: none; margin: 0; padding: 0; }
.outline-item {
margin: 0; }
.outline-link {
display: flex; justify-content: space-between; align-items: center; padding: 6px 16px; text-decoration: none; color: var(--fg-default); transition: background-color 0.2s ease; border-left: 3px solid transparent; }
.outline-link: hover {
background-color: var(--bg-accent-muted); border-left-color: var(--border-accent-emphasis); }
.outline-text {
font-size: 13px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outline-line {
font-size: 11px; color: var(--fg-muted); margin-left: 8px; }
.outline-item.level-1 .outline-link { padding-left: 16px; }
.outline-item.level-2 .outline-link { padding-left: 24px; }
.outline-item.level-3 .outline-link { padding-left: 32px; }
.outline-item.level-4 .outline-link { padding-left: 40px; }
.outline-item.level-5 .outline-link { padding-left: 48px; }
.outline-item.level-6 .outline-link { padding-left: 56px; }
.focus-mode {
background-color: var(--bg-canvas); }
.focus-mode .toolbar,
.focus-mode .sidebar,
.focus-mode .status-bar {
opacity: 0.3; transition: opacity 0.3s ease; }
.focus-mode .toolbar: hover,
.focus-mode .sidebar: hover,
.focus-mode .status-bar: hover {
opacity: 1; }
.focus-mode .editor-container {
max-width: 800px; margin: 0 auto; padding: 40px 20px; }
.typewriter-mode .editor-container {
display: flex; align-items: center; min-height: 100vh; }
.typewriter-mode #markdownEditor {
text-align: center; line-height: 2; }
.zen-mode {
background-color: #1a1a1a; color: #e0e0e0; }
.zen-mode .editor-container {
background-color: transparent; }
.zen-mode #markdownEditor {
background-color: transparent; color: #e0e0e0; border: none; outline: none; }
.mobile-context-menu {
background-color: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--border-radius); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); padding: 8px 0; min-width: 120px; }
.context-menu-item {
padding: 12px 16px; cursor: pointer; color: var(--fg-default); font-size: 14px; transition: background-color 0.2s ease; }
.context-menu-item: hover {
background-color: var(--bg-accent-muted); }
@media (max-width: 768px) {
.header-right {
display: none !important; }
.nav {
display: none !important; }
.toolbar {
display: none !important; }
.header-content {
justify-content: center; padding: 8px 16px; }
.header {
height: 56px; }
button, .btn, .clickable {
min-height: 44px; min-width: 44px; padding: 12px 16px; }
input, textarea, select {
font-size: 16px; padding: 12px; border-radius: 8px; }
#markdownEditor {
font-size: 16px; line-height: 1.6; padding: 16px; -webkit-overflow-scrolling: touch; touch-action: manipulation; }
.preview-content {
padding: 16px; -webkit-overflow-scrolling: touch; }
.mobile-toolbar {
position: sticky; top: 0; z-index: 100; background-color: var(--bg-canvas); border-bottom: 1px solid var(--border-default); padding: 12px; display: flex; justify-content: center; gap: 16px; }
.mobile-toolbar-group {
display: flex; gap: 12px; }
.mobile-btn {
min-width: 48px; height: 48px; border: 1px solid var(--border-default); border-radius: 12px; background-color: var(--bg-subtle); color: var(--fg-default); font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; touch-action: manipulation; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.mobile-btn: hover,
.mobile-btn: active {
background-color: var(--bg-accent-muted); transform: scale(0.95); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
.preview-fullscreen .preview-pane {
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1000; background-color: var(--bg-canvas); }
.preview-fullscreen .editor-pane {
display: none; }
.keyboard-open {
height: 100vh; overflow: hidden; }
.keyboard-open .editor-container {
height: 100vh; overflow: hidden; }
.keyboard-open #markdownEditor {
height: calc(100vh - 120px); resize: none; }
.gesture-feedback {
position: fixed; pointer-events: none; z-index: 10000; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 8px 12px; border-radius: 4px; font-size: 12px; opacity: 0; transition: opacity 0.2s ease; }
.gesture-feedback.show {
opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.mobile-btn,
.context-menu-item,
.gesture-feedback {
transition: none; }
}
}
@media (max-width: 768px) {
.analytics-grid {
grid-template-columns: 1fr; }
.rule-enhancement-buttons {
flex-direction: column; }
.rule-enhancement-btn {
justify-content: center; }
.rule-analytics-modal .modal-content,
.rule-validation-modal .modal-content {
width: 95%; max-height: 90vh; }
.document-outline-panel {
position: fixed; right: 10px; top: 80px; width: 200px; max-height: 300px; }
.auto-complete-panel {
min-width: 150px; max-height: 150px; }
.focus-mode .editor-container {
padding: 20px 10px; }
}
#toggleSettingsBtn.active {
background-color: var(--primary-color); color: white; border-color: var(--primary-color); }
.form-input, .form-select {
width: 100%; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: var(--border-radius); background-color: var(--bg-canvas); color: var(--fg-default); font-size: 14px; transition: border-color 0.2s ease; }
.form-input: focus, .form-select: focus {
outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.1); }
.checkbox-group {
display: flex; flex-direction: column; gap: 8px; }
.checkbox-group .checkbox-label {
margin-bottom: 0; }
.filename-preview {
background-color: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: var(--border-radius); padding: 8px 12px; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 12px; color: var(--fg-default); word-break: break-all; }
.help-text {
display: block; margin-top: 4px; font-size: 11px; color: var(--fg-muted); line-height: 1.3; }
.setting-group .help-text {
margin-top: 4px; }
.naming-help {
background-color: var(--bg-subtle); border-radius: var(--border-radius); padding: 12px; margin-top: 8px; font-size: 11px; }
.naming-help h5 {
margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--fg-default); }
.naming-help ul {
margin: 0; padding-left: 16px; list-style-type: disc; }
.naming-help li {
margin-bottom: 4px; color: var(--fg-muted); }
.naming-help code {
background-color: var(--bg-canvas); padding: 1px 4px; border-radius: 2px; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 10px; }
.checkbox-group {
display: flex; flex-direction: column; gap: 6px; }
.checkbox-group .checkbox-label {
margin-bottom: 0; }
.margin-inputs {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.margin-inputs .form-input {
font-size: 12px; padding: 6px 8px; }
.format-settings .setting-group {
margin-bottom: 14px; }
.format-settings .setting-group: last-child {
margin-bottom: 0; }
#wordPasswordGroup,
#pdfPasswordGroup {
border-top: 1px solid var(--border-muted); padding-top: 12px; margin-top: 8px; }
#pdfCustomMarginsGroup {
border-top: 1px solid var(--border-muted); padding-top: 12px; margin-top: 8px; }
@media (max-width: 768px) {
.margin-inputs {
grid-template-columns: 1fr; }
.checkbox-group {
gap: 4px; }
}
.reduce-motion * {
animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
.performance-warning {
position: fixed; top: 20px; right: 20px; background-color: #fff3cd; border: 1px solid #ffeaa7; color: #856404; padding: 12px 16px; border-radius: var(--border-radius); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 10000; max-width: 300px; font-size: 13px; }
.performance-warning.memory {
background-color: #f8d7da; border-color: #f5c6cb; color: #721c24; }
.performance-warning.fps {
background-color: #d1ecf1; border-color: #bee5eb; color: #0c5460; }
.focus-enhanced {
outline: 3px solid var(--primary-color) !important; outline-offset: 2px !important; box-shadow: 0 0 0 1px white, 0 0 0 4px var(--primary-color) !important; }
.focus-high-contrast {
outline: 4px solid #000 !important; outline-offset: 2px !important; background-color: #ffff00 !important; color: #000 !important; }
.high-contrast {
filter: contrast(150%); }
.high-contrast .btn {
border: 2px solid currentColor; }
.large-text {
font-size: 1.2em; }
.extra-large-text {
font-size: 1.4em; }
.skip-link {
position: absolute; top: -40px; left: 6px; background: var(--primary-color); color: white; padding: 8px; text-decoration: none; border-radius: var(--border-radius); z-index: 10000; transition: top 0.3s ease; }
.skip-link: focus {
top: 6px; }
.sr-only {
position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@media (prefers-reduced-motion: reduce) {
*,
*: : before,
*: : after {
animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: high) {
: root {
--border-default: #000; --fg-default: #000; --bg-canvas: #fff; }
.btn {
border: 2px solid currentColor; }
}
@media (prefers-reduced-data: reduce) {
.background-image,
.decorative-image {
display: none; }
}
.performance-panel {
position: fixed; bottom: 20px; left: 20px; background-color: rgba(0, 0, 0, 0.8); color: white; padding: 12px; border-radius: var(--border-radius); font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 11px; z-index: 9999; min-width: 200px; display: none; }
.performance-panel.show {
display: block; }
.performance-metric {
display: flex; justify-content: space-between; margin-bottom: 4px; }
.performance-metric: last-child {
margin-bottom: 0; }
.metric-label {
color: #ccc; }
.metric-value {
color: #fff; font-weight: bold; }
.metric-value.warning {
color: #ffa500; }
.metric-value.critical {
color: #ff4444; }
.lazy-placeholder {
background-color: var(--bg-subtle); background-image: linear-gradient(
90deg,
var(--bg-subtle) 0%,
var(--bg-muted) 50%,
var(--bg-subtle) 100%
); background-size: 200% 100%; animation: loading-shimmer 1.5s infinite; }
@keyframes loading-shimmer {
0% {
background-position: -200% 0; }
100% {
background-position: 200% 0; }
}
.virtual-scroll-container {
overflow: auto; height: 100%; }
.virtual-scroll-spacer {
pointer-events: none; }
.virtual-scroll-item {
will-change: transform; }
.gpu-accelerated {
transform: translateZ(0); will-change: transform; }
.memory-efficient img {
content-visibility: auto; contain-intrinsic-size: 300px 200px; }
.memory-efficient .large-content {
content-visibility: auto; contain-intrinsic-size: 1000px; }
[data-theme="dark-blue"] {
--primary-color: #4a9eff; --primary-hover: #357abd; --bg-canvas: #0d1117; --bg-default: #161b22; --bg-subtle: #21262d; --bg-muted: #30363d; --border-default: #30363d; --border-muted: #21262d; --fg-default: #f0f6fc; --fg-muted: #8b949e; --fg-subtle: #6e7681; }
[data-theme="dark-purple"] {
--primary-color: #8b5cf6; --primary-hover: #7c3aed; --bg-canvas: #0f0a1a; --bg-default: #1a1625; --bg-subtle: #252030; --bg-muted: #302b3b; --border-default: #302b3b; --border-muted: #252030; --fg-default: #f3f0ff; --fg-muted: #a78bfa; --fg-subtle: #8b5cf6; }
[data-theme="dark-green"] {
--primary-color: #10b981; --primary-hover: #059669; --bg-canvas: #0a1a0f; --bg-default: #162516; --bg-subtle: #203020; --bg-muted: #2b3b2b; --border-default: #2b3b2b; --border-muted: #203020; --fg-default: #f0fff4; --fg-muted: #6ee7b7; --fg-subtle: #34d399; }
[data-theme="light-warm"] {
--primary-color: #f59e0b; --primary-hover: #d97706; --bg-canvas: #fffbeb; --bg-default: #fef3c7; --bg-subtle: #fde68a; --bg-muted: #fcd34d; --border-default: #fcd34d; --border-muted: #fde68a; --fg-default: #92400e; --fg-muted: #b45309; --fg-subtle: #d97706; }
[data-theme="light-cool"] {
--primary-color: #3b82f6; --primary-hover: #2563eb; --bg-canvas: #eff6ff; --bg-default: #dbeafe; --bg-subtle: #bfdbfe; --bg-muted: #93c5fd; --border-default: #93c5fd; --border-muted: #bfdbfe; --fg-default: #1e40af; --fg-muted: #2563eb; --fg-subtle: #3b82f6; }
[data-theme="light-nature"] {
--primary-color: #059669; --primary-hover: #047857; --bg-canvas: #ecfdf5; --bg-default: #d1fae5; --bg-subtle: #a7f3d0; --bg-muted: #6ee7b7; --border-default: #6ee7b7; --border-muted: #a7f3d0; --fg-default: #064e3b; --fg-muted: #047857; --fg-subtle: #059669; }
[data-theme="high-contrast-light"] {
--primary-color: #0000ff; --primary-hover: #000080; --bg-canvas: #ffffff; --bg-default: #f8f8f8; --bg-subtle: #e8e8e8; --bg-muted: #d8d8d8; --border-default: #000000; --border-muted: #808080; --fg-default: #000000; --fg-muted: #404040; --fg-subtle: #606060; }
[data-theme="high-contrast-dark"] {
--primary-color: #00ffff; --primary-hover: #00cccc; --bg-canvas: #000000; --bg-default: #080808; --bg-subtle: #181818; --bg-muted: #282828; --border-default: #ffffff; --border-muted: #808080; --fg-default: #ffffff; --fg-muted: #c0c0c0; --fg-subtle: #a0a0a0; }
[data-theme="eye-care"] {
--primary-color: #8b5a2b; --primary-hover: #6d4423; --bg-canvas: #f5f1e8; --bg-default: #f0ead2; --bg-subtle: #ede0c8; --bg-muted: #e9d5be; --border-default: #d4c5a9; --border-muted: #ddd0b4; --fg-default: #3c2e1f; --fg-muted: #5d4e3f; --fg-subtle: #7e6f60; }
[data-theme="night"] {
--primary-color: #ff6b6b; --primary-hover: #ee5a52; --bg-canvas: #1a1a1a; --bg-default: #2d2d2d; --bg-subtle: #404040; --bg-muted: #535353; --border-default: #535353; --border-muted: #404040; --fg-default: #e8e8e8; --fg-muted: #b8b8b8; --fg-subtle: #888888; filter: brightness(0.9); }
.theme-transition {
transition: background-color 0.3s ease,
color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease; }
.theme-transition * {
transition: background-color 0.3s ease,
color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease; }
.theme-selector {
display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; padding: 16px; }
.theme-option {
display: flex; flex-direction: column; align-items: center; padding: 12px; border: 2px solid var(--border-default); border-radius: var(--border-radius); cursor: pointer; transition: all 0.2s ease; background-color: var(--bg-canvas); }
.theme-option: hover {
border-color: var(--primary-color); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.theme-option.active {
border-color: var(--primary-color); background-color: var(--primary-color); color: white; }
.theme-preview {
width: 60px; height: 40px; border-radius: 4px; margin-bottom: 8px; position: relative; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.1); }
.theme-preview: : before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 12px; }
.theme-preview: : after {
content: ''; position: absolute; bottom: 4px; left: 4px; right: 4px; height: 2px; border-radius: 1px; opacity: 0.6; }
.theme-preview[data-theme="light"]: : before { background: #ffffff; }
.theme-preview[data-theme="light"]: : after { background: #000000; }
.theme-preview[data-theme="light"] { background: #f6f8fa; }
.theme-preview[data-theme="dark"]: : before { background: #0d1117; }
.theme-preview[data-theme="dark"]: : after { background: #f0f6fc; }
.theme-preview[data-theme="dark"] { background: #161b22; }
.theme-preview[data-theme="dark-blue"]: : before { background: #0d1117; }
.theme-preview[data-theme="dark-blue"]: : after { background: #4a9eff; }
.theme-preview[data-theme="dark-blue"] { background: #161b22; }
.theme-preview[data-theme="dark-purple"]: : before { background: #0f0a1a; }
.theme-preview[data-theme="dark-purple"]: : after { background: #8b5cf6; }
.theme-preview[data-theme="dark-purple"] { background: #1a1625; }
.theme-preview[data-theme="dark-green"]: : before { background: #0a1a0f; }
.theme-preview[data-theme="dark-green"]: : after { background: #10b981; }
.theme-preview[data-theme="dark-green"] { background: #162516; }
.theme-preview[data-theme="light-warm"]: : before { background: #fffbeb; }
.theme-preview[data-theme="light-warm"]: : after { background: #f59e0b; }
.theme-preview[data-theme="light-warm"] { background: #fef3c7; }
.theme-preview[data-theme="light-cool"]: : before { background: #eff6ff; }
.theme-preview[data-theme="light-cool"]: : after { background: #3b82f6; }
.theme-preview[data-theme="light-cool"] { background: #dbeafe; }
.theme-preview[data-theme="light-nature"]: : before { background: #ecfdf5; }
.theme-preview[data-theme="light-nature"]: : after { background: #059669; }
.theme-preview[data-theme="light-nature"] { background: #d1fae5; }
.theme-preview[data-theme="high-contrast-light"]: : before { background: #ffffff; }
.theme-preview[data-theme="high-contrast-light"]: : after { background: #000000; }
.theme-preview[data-theme="high-contrast-light"] { background: #f8f8f8; border: 2px solid #000; }
.theme-preview[data-theme="high-contrast-dark"]: : before { background: #000000; }
.theme-preview[data-theme="high-contrast-dark"]: : after { background: #ffffff; }
.theme-preview[data-theme="high-contrast-dark"] { background: #080808; border: 2px solid #fff; }
.theme-preview[data-theme="eye-care"]: : before { background: #f5f1e8; }
.theme-preview[data-theme="eye-care"]: : after { background: #8b5a2b; }
.theme-preview[data-theme="eye-care"] { background: #f0ead2; }
.theme-preview[data-theme="night"]: : before { background: #1a1a1a; }
.theme-preview[data-theme="night"]: : after { background: #ff6b6b; }
.theme-preview[data-theme="night"] { background: #2d2d2d; }
.theme-name {
font-size: 11px; font-weight: 500; text-align: center; line-height: 1.2; }
.custom-theme-editor {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px; }
.color-picker-group {
display: flex; flex-direction: column; gap: 12px; }
.color-picker-item {
display: flex; align-items: center; gap: 12px; }
.color-picker-item label {
flex: 1; font-size: 13px; color: var(--fg-default); }
.color-picker {
width: 40px; height: 30px; border: 1px solid var(--border-default); border-radius: var(--border-radius); cursor: pointer; background: none; padding: 0; }
.color-picker: : -webkit-color-swatch-wrapper {
padding: 0; }
.color-picker: : -webkit-color-swatch {
border: none; border-radius: calc(var(--border-radius) - 1px); }
.theme-preview-panel {
border: 1px solid var(--border-default); border-radius: var(--border-radius); padding: 16px; background-color: var(--bg-canvas); }
.theme-preview-content {
font-size: 13px; line-height: 1.5; }
.theme-preview-content h3 {
margin: 0 0 8px; color: var(--fg-default); }
.theme-preview-content p {
margin: 0 0 12px; color: var(--fg-muted); }
.theme-preview-content .btn {
font-size: 12px; padding: 6px 12px; }
.auto-theme-schedule {
display: flex; flex-direction: column; gap: 12px; padding: 16px; background-color: var(--bg-subtle); border-radius: var(--border-radius); }
.schedule-item {
display: flex; align-items: center; gap: 12px; }
.schedule-item label {
flex: 1; font-size: 13px; }
.schedule-item input[type="time"] {
padding: 4px 8px; border: 1px solid var(--border-default); border-radius: var(--border-radius); background-color: var(--bg-canvas); color: var(--fg-default); font-size: 12px; }
.schedule-item select {
padding: 4px 8px; border: 1px solid var(--border-default); border-radius: var(--border-radius); background-color: var(--bg-canvas); color: var(--fg-default); font-size: 12px; }
@media (max-width: 768px) {
.theme-selector {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; padding: 12px; }
.theme-option {
padding: 8px; }
.theme-preview {
width: 50px; height: 32px; }
.theme-name {
font-size: 10px; }
.custom-theme-editor {
grid-template-columns: 1fr; gap: 16px; padding: 16px; }
}
.toolbar-spacer {
flex: 1; }
.toolbar-stats {
display: flex; gap: 16px; font-size: 14px; color: var(--fg-muted); align-items: center; font-weight: 500; background-color: var(--bg-canvas); padding: 6px 12px; border-radius: var(--border-radius); border: 1px solid var(--border-muted); }
.toolbar-stats .separator {
color: var(--border-default); }
.rule-group-quick-select {
padding: 6px 10px; border: 1px solid var(--border-default); border-radius: 4px; background-color: var(--bg-canvas); color: var(--fg-default); font-size: 13px; min-width: 120px; cursor: pointer; }
.rule-group-quick-select: focus {
outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(16, 142, 233, 0.2); }
.export-tools {
margin-left: auto; }
.rule-group-selector,
.rule-group-compact {
position: relative; display: flex; align-items: center; gap: 8px; margin-left: 16px; white-space: nowrap; }
.rule-group-selector .btn-icon {
padding: 4px; min-width: auto; width: 28px; height: 28px; }
.rule-group-selector .btn-icon svg {
width: 14px; height: 14px; }
.rule-group-selector label {
font-size: 14px; color: var(--fg-default); }
@media (max-width: 1200px) {
}
@media (max-width: 600px) {
.export-tools {
gap: 2px; }
.export-tools .btn-editor {
width: 28px; height: 28px; }
.export-tools .btn-editor svg {
width: 14px; height: 14px; }
}
@media (max-width: 900px) {
.export-tools {
}
}
@media (max-width: 600px) {
.rule-group-selector label {
display: none; }
.rule-group-quick-select {
min-width: 100px; }
.rule-group-compact {
margin-left: 8px; }
.rule-group-btn {
min-width: 80px; max-width: 120px; padding: 4px 8px; font-size: 12px; }
.rule-group-text {
font-size: 12px; }
}
.editor-container {
display: flex; flex: 1; overflow: hidden; gap: 1px; background-color: var(--border-default); border-radius: var(--border-radius); box-shadow: var(--shadow-medium); margin: 8px 16px 16px 16px; height: calc(100vh - 120px); max-height: calc(100vh - 120px); }
.editor-pane {
display: flex; flex-direction: column; flex: 1; min-width: 0; height: 100%; background-color: var(--bg-canvas); border-radius: var(--border-radius); }
.preview-pane {
display: flex; flex-direction: column; flex: 1; min-width: 0; height: 100%; background-color: var(--bg-canvas); border-radius: var(--border-radius); }
.pane-header {
display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background-color: var(--bg-canvas-inset); border-radius: var(--border-radius) var(--border-radius) 0 0; height: 48px; }
.pane-header h3 {
margin: 0; font-size: 16px; font-weight: 600; color: var(--fg-default); }
.pane-actions {
display: flex; gap: 8px; }
.editor-toolbar {
display: flex; gap: 6px; align-items: center; padding: 4px 16px; background-color: var(--bg-canvas-inset); }
.editor-toolbar-group {
display: flex; gap: 4px; }
.editor-toolbar-group: not(: last-child): : after {
content: ""; width: 1px; height: 24px; background-color: var(--border-default); margin: 0 10px; }
.btn-editor {
display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 2px solid #007acc; background: #f8f9fa; color: #333333; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.btn-editor: hover {
background: #e9ecef; border-color: #0056b3; color: #000000; }
.btn-editor: active,
.btn-editor.btn-active {
transform: scale(0.95); background-color: var(--bg-subtle); }
.btn-editor.active {
background-color: var(--accent-subtle); color: var(--accent-fg); }
.btn-editor svg {
width: 18px; height: 18px; }
body.fullscreen-mode {
overflow: hidden; }
body.fullscreen-mode .main {
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; background: var(--bg-canvas); }
body.fullscreen-mode .header,
body.fullscreen-mode .toolbar {
display: none; }
.dialog-content {
background: var(--bg-canvas); border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); max-width: 600px; width: 90%; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; }
.dialog-header {
display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--border-default); }
.dialog-header h3 {
margin: 0; color: var(--fg-default); }
.dialog-close {
background: none; border: none; font-size: 24px; color: var(--fg-muted); cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: all 0.2s ease; }
.dialog-close: hover {
background: var(--bg-subtle); color: var(--fg-default); }
.dialog-body {
flex: 1; overflow-y: auto; padding: 20px; }
.dialog-footer {
padding: 15px 20px; border-top: 1px solid var(--border-default); display: flex; justify-content: flex-end; }
.current-quick-access,
.recommended-bookmarks {
margin-bottom: 25px; }
.current-quick-access h4,
.recommended-bookmarks h4 {
margin: 0 0 12px 0; color: var(--fg-default); font-size: 16px; }
.quick-access-manager-item {
display: flex; justify-content: space-between; align-items: center; padding: 12px; border: 1px solid var(--border-muted); border-radius: 6px; margin-bottom: 8px; background: var(--bg-subtle); }
.item-info {
flex: 1; min-width: 0; }
.item-title {
font-weight: 500; color: var(--fg-default); margin-bottom: 4px; }
.item-meta {
font-size: 12px; color: var(--fg-muted); }
.btn-add,
.btn-remove {
padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; transition: all 0.2s ease; }
.btn-add {
background: var(--success-emphasis); color: white; }
.btn-add: hover {
background: var(--success-fg); }
.btn-remove {
background: var(--danger-emphasis); color: white; }
.btn-remove: hover {
background: var(--danger-fg); }
.empty-state {
text-align: center; color: var(--fg-muted); padding: 20px; font-style: italic; }
.shortcuts-dialog,
.customize-shortcuts-dialog {
position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; }
.shortcuts-dialog-content,
.customize-dialog-content {
max-width: 800px; width: 90%; max-height: 85vh; }
.dialog-actions {
display: flex; gap: 8px; align-items: center; }
.shortcuts-search,
.customize-search {
margin-bottom: 20px; }
.shortcuts-tabs {
display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border-muted); }
.shortcuts-tab {
padding: 8px 16px; border: none; background: none; color: var(--fg-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s ease; }
.shortcuts-tab: hover {
color: var(--fg-default); background: var(--bg-subtle); }
.shortcuts-tab.active {
color: var(--accent-emphasis); border-bottom-color: var(--accent-emphasis); }
.shortcuts-list {
max-height: 400px; overflow-y: auto; }
.shortcuts-group {
margin-bottom: 24px; }
.shortcuts-group-title {
margin: 0 0 12px 0; color: var(--fg-default); font-size: 16px; font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--border-muted); }
.shortcuts-items {
display: flex; flex-direction: column; gap: 8px; }
.shortcut-item,
.customize-item {
display: flex; justify-content: space-between; align-items: center; padding: 12px; background: var(--bg-subtle); border: 1px solid var(--border-muted); border-radius: 6px; transition: all 0.2s ease; }
.shortcut-item: hover,
.customize-item: hover {
background: var(--bg-canvas-subtle); border-color: var(--accent-muted); }
.shortcut-item.disabled {
opacity: 0.6; }
.shortcut-info,
.customize-info {
flex: 1; min-width: 0; }
.shortcut-description,
.customize-description {
font-weight: 500; color: var(--fg-default); margin-bottom: 4px; }
.shortcut-id {
font-size: 12px; color: var(--fg-muted); font-family: monospace; }
.customize-context {
font-size: 12px; color: var(--fg-muted); }
.shortcut-key,
.customize-shortcut {
display: flex; align-items: center; gap: 8px; }
.keyboard-shortcut {
background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: 4px; padding: 4px 8px; font-family: monospace; font-size: 12px; color: var(--fg-default); white-space: nowrap; }
.keyboard-shortcut.custom {
background: var(--accent-subtle); border-color: var(--accent-muted); color: var(--accent-fg); }
.custom-indicator {
font-size: 10px; color: var(--accent-emphasis); background: var(--accent-subtle); padding: 2px 6px; border-radius: 3px; }
.shortcut-actions {
display: flex; gap: 4px; }
.shortcut-input {
background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: 4px; padding: 6px 10px; font-family: monospace; font-size: 12px; color: var(--fg-default); min-width: 120px; cursor: pointer; }
.shortcut-input: focus {
outline: none; border-color: var(--accent-emphasis); box-shadow: 0 0 0 2px var(--accent-subtle); }
.btn-record,
.btn-reset {
background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: 4px; padding: 6px 8px; cursor: pointer; transition: all 0.2s ease; font-size: 12px; }
.btn-record: hover {
background: var(--success-subtle); border-color: var(--success-muted); }
.btn-reset: hover {
background: var(--warning-subtle); border-color: var(--warning-muted); }
.shortcuts-stats {
display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-muted); }
.separator {
color: var(--border-default); }
.customize-list {
max-height: 400px; overflow-y: auto; }
.shortcut-hint {
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: 8px; padding: 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); z-index: 10001; text-align: center; }
.shortcut-hint-title {
margin: 0 0 10px 0; color: var(--fg-default); font-size: 16px; }
.shortcut-hint-key {
background: var(--accent-emphasis); color: white; padding: 8px 16px; border-radius: 6px; font-family: monospace; font-size: 14px; font-weight: bold; }
.shortcuts-status {
position: fixed; bottom: 20px; right: 20px; background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: 6px; padding: 8px 12px; font-size: 12px; color: var(--fg-muted); z-index: 1000; transition: all 0.3s ease; }
.shortcuts-status.recording {
background: var(--danger-emphasis); color: white; animation: pulse 1s infinite; }
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.undo-redo-group {
display: flex; gap: 4px; align-items: center; margin: 0 8px; padding: 0 8px; border-left: 1px solid var(--border-muted); border-right: 1px solid var(--border-muted); }
.undo-btn,
.redo-btn,
.history-btn {
display: flex; align-items: center; gap: 4px; padding: 6px 10px; border: 1px solid var(--border-default); border-radius: 4px; background: var(--bg-canvas); color: var(--fg-default); cursor: pointer; transition: all 0.2s ease; font-size: 12px; }
.undo-btn: hover: not(: disabled),
.redo-btn: hover: not(: disabled),
.history-btn: hover {
background: var(--bg-subtle); border-color: var(--accent-muted); }
.undo-btn: disabled,
.redo-btn: disabled {
opacity: 0.5; cursor: not-allowed; background: var(--bg-canvas-inset); }
.undo-btn .btn-icon {
font-size: 14px; color: var(--success-emphasis); }
.redo-btn .btn-icon {
font-size: 14px; color: var(--warning-emphasis); }
.history-btn .btn-icon {
font-size: 12px; }
.history-panel {
position: fixed; top: 50%; right: 20px; transform: translateY(-50%) translateX(100%); width: 400px; max-height: 80vh; background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); z-index: 1000; transition: transform 0.3s ease; display: none; }
.history-panel.visible {
transform: translateY(-50%) translateX(0); }
.history-header {
display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--border-default); background: var(--bg-subtle); border-radius: 8px 8px 0 0; }
.history-header h3 {
margin: 0; color: var(--fg-default); font-size: 16px; }
.history-actions {
display: flex; gap: 8px; }
.history-body {
display: flex; flex-direction: column; height: calc(80vh - 60px); }
.history-stats {
display: flex; justify-content: space-around; padding: 15px; background: var(--bg-canvas-subtle); border-bottom: 1px solid var(--border-muted); }
.stat-item {
text-align: center; }
.stat-label {
display: block; font-size: 12px; color: var(--fg-muted); margin-bottom: 4px; }
.stat-value {
display: block; font-size: 18px; font-weight: bold; color: var(--accent-emphasis); }
.history-tabs {
display: flex; background: var(--bg-subtle); border-bottom: 1px solid var(--border-default); }
.history-tab {
flex: 1; padding: 10px 15px; border: none; background: none; color: var(--fg-muted); cursor: pointer; transition: all 0.2s ease; border-bottom: 2px solid transparent; }
.history-tab: hover {
background: var(--bg-canvas-subtle); color: var(--fg-default); }
.history-tab.active {
color: var(--accent-emphasis); border-bottom-color: var(--accent-emphasis); background: var(--bg-canvas); }
.history-content {
flex: 1; overflow: hidden; }
.history-list {
height: 100%; overflow-y: auto; padding: 10px; }
.history-item {
display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--border-muted); border-radius: 6px; margin-bottom: 8px; background: var(--bg-canvas); cursor: pointer; transition: all 0.2s ease; }
.history-item: hover {
background: var(--bg-subtle); border-color: var(--accent-muted); transform: translateX(2px); }
.history-icon {
font-size: 16px; width: 24px; text-align: center; }
.history-info {
flex: 1; min-width: 0; }
.history-description {
font-weight: 500; color: var(--fg-default); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-meta {
display: flex; gap: 8px; font-size: 11px; color: var(--fg-muted); }
.history-time {
color: var(--fg-muted); }
.history-size {
color: var(--accent-emphasis); font-weight: 500; }
.history-type {
background: var(--bg-subtle); padding: 2px 6px; border-radius: 3px; text-transform: uppercase; }
.history-actions {
opacity: 0; transition: opacity 0.2s ease; }
.history-item: hover .history-actions {
opacity: 1; }
.btn-jump {
background: var(--accent-emphasis); color: white; border: none; padding: 4px 8px; border-radius: 3px; cursor: pointer; font-size: 12px; transition: all 0.2s ease; }
.btn-jump: hover {
background: var(--accent-fg); transform: scale(1.1); }
.history-empty {
text-align: center; color: var(--fg-muted); padding: 40px 20px; font-style: italic; }
.undo-redo-status {
position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: 6px; padding: 10px 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 1001; transition: all 0.3s ease; display: none; }
.undo-redo-status.info {
border-color: var(--accent-muted); background: var(--accent-subtle); }
.undo-redo-status.success {
border-color: var(--success-muted); background: var(--success-subtle); }
.undo-redo-status.warning {
border-color: var(--warning-muted); background: var(--warning-subtle); }
.undo-redo-status.error {
border-color: var(--danger-muted); background: var(--danger-subtle); }
.status-content {
display: flex; align-items: center; gap: 10px; }
.status-text {
font-size: 14px; color: var(--fg-default); white-space: nowrap; }
.status-progress {
width: 0; height: 3px; background: var(--accent-emphasis); border-radius: 2px; transition: width 0.3s ease; }
@media (max-width: 768px) {
.undo-redo-group {
margin: 0 4px; padding: 0 4px; }
.undo-btn .btn-text,
.redo-btn .btn-text,
.history-btn .btn-text {
display: none; }
.undo-btn,
.redo-btn,
.history-btn {
padding: 6px 8px; }
.history-panel {
width: 90%; right: 5%; max-height: 70vh; }
.history-header {
padding: 12px 15px; }
.history-stats {
padding: 10px; }
.stat-item {
font-size: 12px; }
.stat-value {
font-size: 16px; }
.history-item {
padding: 8px; gap: 8px; }
.history-meta {
flex-direction: column; gap: 2px; }
}
.advanced-editor-wrapper {
position: relative; display: flex; background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: 6px; overflow: hidden; }
.advanced-editor {
flex: 1; border: none; outline: none; padding: 15px; font-family: 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 14px; line-height: 1.6; background: transparent; color: var(--fg-default); resize: none; tab-size: 2; }
.advanced-editor.with-line-numbers {
padding-left: 60px; }
.advanced-editor.with-folding {
padding-left: 80px; }
.advanced-editor.with-minimap {
padding-right: 120px; }
.line-numbers {
position: absolute; left: 0; top: 0; width: 50px; height: 100%; background: var(--bg-subtle); border-right: 1px solid var(--border-muted); overflow: hidden; user-select: none; font-family: 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 12px; line-height: 1.6; padding: 15px 5px; box-sizing: border-box; }
.line-number {
height: 22.4px; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; color: var(--fg-muted); cursor: pointer; transition: all 0.2s ease; }
.line-number: hover {
background: var(--bg-canvas-subtle); color: var(--fg-default); }
.folding-gutter {
position: absolute; left: 50px; top: 0; width: 20px; height: 100%; background: var(--bg-subtle); border-right: 1px solid var(--border-muted); overflow: hidden; user-select: none; font-size: 12px; line-height: 1.6; padding: 15px 2px; box-sizing: border-box; }
.fold-marker {
height: 22.4px; display: flex; align-items: center; justify-content: center; color: var(--fg-muted); cursor: pointer; transition: all 0.2s ease; }
.fold-marker: hover {
background: var(--bg-canvas-subtle); color: var(--accent-emphasis); }
.fold-marker: empty {
cursor: default; }
.minimap {
position: absolute; right: 0; top: 0; width: 100px; height: 100%; background: var(--bg-subtle); border-left: 1px solid var(--border-muted); overflow: hidden; user-select: none; }
.minimap-content {
font-family: monospace; font-size: 2px; line-height: 3px; color: var(--fg-muted); padding: 2px; transform-origin: top left; transform: scale(0.1); width: 1000px; }
.minimap-line {
white-space: nowrap; overflow: hidden; height: 3px; }
.minimap-viewport {
position: absolute; left: 0; background: rgba(0, 123, 255, 0.2); border: 1px solid var(--accent-emphasis); width: 100%; pointer-events: none; }
.multi-cursor {
position: absolute; background: var(--accent-emphasis); width: 2px; animation: cursor-blink 1s infinite; z-index: 10; }
@keyframes cursor-blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
.bracket-highlight {
position: absolute; background: rgba(255, 255, 0, 0.3); border: 1px solid #ffd700; border-radius: 2px; z-index: 5; }
.auto-complete-popup {
background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); max-height: 200px; overflow-y: auto; min-width: 250px; z-index: 1000; }
.completion-item {
display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; cursor: pointer; transition: all 0.2s ease; border-bottom: 1px solid var(--border-muted); }
.completion-item: last-child {
border-bottom: none; }
.completion-item: hover {
background: var(--bg-subtle); }
.completion-item.selected {
background: var(--accent-subtle); color: var(--accent-fg); }
.completion-text {
font-family: monospace; font-weight: 500; color: var(--fg-default); }
.completion-description {
font-size: 12px; color: var(--fg-muted); margin-left: 10px; }
.syntax-header {
color: var(--accent-emphasis); font-weight: bold; }
.syntax-bold {
font-weight: bold; }
.syntax-italic {
font-style: italic; }
.syntax-code {
background: var(--bg-subtle); color: var(--danger-emphasis); padding: 2px 4px; border-radius: 3px; font-family: monospace; }
.syntax-link {
color: var(--accent-emphasis); text-decoration: underline; }
.syntax-list {
color: var(--success-emphasis); font-weight: 500; }
.has-folded-content .advanced-editor {
}
.vim-mode: : before {
content: 'VIM'; position: absolute; top: 5px; right: 5px; background: var(--success-emphasis); color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: bold; z-index: 100; }
.advanced-editor-toolbar {
display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--bg-subtle); border-bottom: 1px solid var(--border-muted); font-size: 12px; }
.toolbar-section {
display: flex; align-items: center; gap: 6px; }
.editor-feature-toggle {
display: flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--border-muted); border-radius: 4px; background: var(--bg-canvas); cursor: pointer; transition: all 0.2s ease; user-select: none; }
.editor-feature-toggle: hover {
background: var(--bg-canvas-subtle); border-color: var(--accent-muted); }
.editor-feature-toggle.active {
background: var(--accent-subtle); border-color: var(--accent-emphasis); color: var(--accent-fg); }
.feature-icon {
font-size: 14px; }
.feature-label {
font-size: 11px; font-weight: 500; }
.btn-icon {
background: var(--bg-canvas); border: 1px solid var(--border-muted); border-radius: 4px; padding: 6px 8px; cursor: pointer; transition: all 0.2s ease; font-size: 14px; }
.btn-icon: hover {
background: var(--bg-canvas-subtle); border-color: var(--accent-muted); }
.advanced-editor-status {
display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; background: var(--bg-subtle); border-top: 1px solid var(--border-muted); font-size: 11px; color: var(--fg-muted); }
.status-left,
.status-right {
display: flex; align-items: center; gap: 12px; }
.status-item {
display: flex; align-items: center; gap: 4px; }
.cursor-position {
font-family: monospace; background: var(--bg-canvas); padding: 2px 6px; border-radius: 3px; border: 1px solid var(--border-muted); }
.advanced-editor-settings-panel {
position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; opacity: 0; transition: opacity 0.3s ease; }
.advanced-editor-settings-panel.visible {
opacity: 1; }
.settings-overlay {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; }
.settings-content {
background: var(--bg-canvas); border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); max-width: 600px; width: 90%; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; }
.settings-header {
display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--border-default); background: var(--bg-subtle); }
.settings-header h3 {
margin: 0; color: var(--fg-default); font-size: 18px; }
.settings-close {
background: none; border: none; font-size: 24px; color: var(--fg-muted); cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: all 0.2s ease; }
.settings-close: hover {
background: var(--bg-canvas); color: var(--fg-default); }
.settings-body {
flex: 1; overflow-y: auto; padding: 20px; }
.settings-section {
margin-bottom: 25px; }
.settings-section h4 {
margin: 0 0 15px 0; color: var(--fg-default); font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--border-muted); padding-bottom: 8px; }
.setting-item {
margin-bottom: 12px; }
.setting-label {
display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px; border-radius: 4px; transition: all 0.2s ease; }
.setting-label: hover {
background: var(--bg-subtle); }
.setting-label input[type="checkbox"] {
margin: 0; width: 16px; height: 16px; accent-color: var(--accent-emphasis); }
.setting-label span {
color: var(--fg-default); font-size: 14px; }
.shortcut-list {
background: var(--bg-subtle); border-radius: 6px; padding: 15px; }
.shortcut-item {
display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border-muted); }
.shortcut-item: last-child {
border-bottom: none; }
.shortcut-key {
font-family: monospace; background: var(--bg-canvas); padding: 3px 8px; border-radius: 4px; border: 1px solid var(--border-default); font-size: 12px; color: var(--fg-default); }
.shortcut-desc {
color: var(--fg-muted); font-size: 13px; }
.settings-footer {
padding: 15px 20px; border-top: 1px solid var(--border-default); display: flex; justify-content: flex-end; gap: 10px; background: var(--bg-subtle); }
.btn {
padding: 8px 16px; border: 1px solid var(--border-default); border-radius: 4px; background: var(--accent-emphasis); color: white; cursor: pointer; font-size: 14px; transition: all 0.2s ease; }
.btn: hover {
background: var(--accent-fg); }
.btn-secondary {
background: var(--bg-canvas); color: var(--fg-default); }
.btn-secondary: hover {
background: var(--bg-subtle); }
.sr-only {
position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-links {
position: absolute; top: 0; left: 0; z-index: 10001; }
.skip-link {
position: absolute; top: -40px; left: 6px; background: var(--accent-emphasis); color: white; padding: 8px 16px; text-decoration: none; border-radius: 0 0 4px 4px; font-weight: bold; transition: top 0.3s ease; }
.skip-link: focus {
top: 0; }
.focus-visible,
: focus-visible {
outline: 3px solid var(--accent-emphasis) !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.3) !important; }
.high-contrast {
--bg-canvas: #ffffff; --bg-subtle: #f0f0f0; --fg-default: #000000; --fg-muted: #333333; --border-default: #000000; --border-muted: #666666; --accent-emphasis: #0000ff; --success-emphasis: #008000; --warning-emphasis: #ff8c00; --danger-emphasis: #ff0000; }
.high-contrast * {
border-color: #000000 !important; }
.high-contrast button,
.high-contrast .btn {
border: 2px solid #000000 !important; font-weight: bold !important; }
.high-contrast a {
color: #0000ff !important; text-decoration: underline !important; }
.high-contrast a: visited {
color: #800080 !important; }
.high-contrast: focus {
outline: 4px solid #ff0000 !important; outline-offset: 2px !important; }
.reduced-motion *,
.reduced-motion *: : before,
.reduced-motion *: : after {
animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
.reduced-motion .toast,
.reduced-motion .modal,
.reduced-motion .dropdown {
transition: none !important; animation: none !important; }
.large-text {
font-size: 120% !important; }
.large-text .btn,
.large-text button {
font-size: 110% !important; padding: 10px 16px !important; }
.large-text .toolbar {
padding: 12px !important; }
.large-text .tab-button {
font-size: 110% !important; padding: 12px 20px !important; }
.screen-reader-mode .tooltip {
display: none !important; }
.screen-reader-mode .icon-only {
text-indent: 0 !important; font-size: 0 !important; }
.screen-reader-mode .icon-only: : after {
content: attr(aria-label); font-size: 14px; display: inline-block; }
.keyboard-navigation: focus {
outline: 2px solid var(--accent-emphasis); outline-offset: 2px; }
.keyboard-navigation .roving-focus {
outline: none; }
.keyboard-navigation .roving-focus: focus {
background: var(--accent-subtle); outline: 2px solid var(--accent-emphasis); }
[aria-disabled="true"] {
opacity: 0.6; cursor: not-allowed; pointer-events: none; }
[aria-expanded="true"] .expand-icon: : before {
content: "▼"; }
[aria-expanded="false"] .expand-icon: : before {
content: "▶"; }
[aria-pressed="true"] {
background: var(--accent-subtle); border-color: var(--accent-emphasis); }
[aria-selected="true"] {
background: var(--accent-emphasis); color: white; }
[aria-invalid="true"] {
border-color: var(--danger-emphasis); box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2); }
[aria-live] {
position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
[role="main"] {
min-height: 200px; }
[role="navigation"] {
border-bottom: 1px solid var(--border-default); }
[role="toolbar"] {
border: 1px solid var(--border-default); border-radius: 4px; }
[role="tablist"] {
border-bottom: 1px solid var(--border-default); }
[role="tab"] {
border: 1px solid transparent; border-bottom: none; border-radius: 4px 4px 0 0; }
[role="tab"][aria-selected="true"] {
border-color: var(--border-default); background: var(--bg-canvas); }
[role="tabpanel"] {
border: 1px solid var(--border-default); border-top: none; padding: 20px; }
.form-group {
margin-bottom: 16px; }
.form-label {
display: block; margin-bottom: 4px; font-weight: 500; color: var(--fg-default); }
.form-label.required: : after {
content: " *"; color: var(--danger-emphasis); }
.form-input {
width: 100%; padding: 8px 12px; border: 1px solid var(--border-default); border-radius: 4px; font-size: 14px; }
.form-input: focus {
outline: none; border-color: var(--accent-emphasis); box-shadow: 0 0 0 2px var(--accent-subtle); }
.form-input[aria-invalid="true"] {
border-color: var(--danger-emphasis); }
.form-error {
color: var(--danger-emphasis); font-size: 12px; margin-top: 4px; }
.form-help {
color: var(--fg-muted); font-size: 12px; margin-top: 4px; }
.btn[aria-pressed="true"] {
background: var(--accent-emphasis); color: white; }
.btn[aria-expanded="true"]: : after {
content: " ▲"; }
.btn[aria-expanded="false"]: : after {
content: " ▼"; }
[role="menu"] {
background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 4px 0; }
[role="menuitem"] {
display: block; width: 100%; padding: 8px 16px; border: none; background: none; text-align: left; cursor: pointer; transition: background 0.2s ease; }
[role="menuitem"]: hover,
[role="menuitem"]: focus {
background: var(--bg-subtle); outline: none; }
[role="menuitem"][aria-disabled="true"] {
opacity: 0.5; cursor: not-allowed; }
[role="dialog"] {
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); z-index: 1000; }
[role="dialog"] .dialog-title {
font-size: 18px; font-weight: 600; margin: 0 0 16px 0; }
[role="progressbar"] {
background: var(--bg-subtle); border-radius: 4px; height: 8px; overflow: hidden; }
[role="progressbar"]: : before {
content: ""; display: block; height: 100%; background: var(--accent-emphasis); width: var(--progress-value, 0%); transition: width 0.3s ease; }
.status-indicator {
display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; }
.status-indicator.success {
background: var(--success-emphasis); }
.status-indicator.warning {
background: var(--warning-emphasis); }
.status-indicator.error {
background: var(--danger-emphasis); }
.status-indicator.info {
background: var(--accent-emphasis); }
@media (max-width: 768px) {
.skip-link {
left: 4px; padding: 6px 12px; font-size: 14px; }
.large-text {
font-size: 130% !important; }
.focus-visible,
: focus-visible {
outline-width: 2px !important; outline-offset: 1px !important; }
}
@media print {
.skip-links,
.sr-only,
[aria-live] {
display: none !important; }
.focus-visible,
: focus-visible {
outline: none !important; box-shadow: none !important; }
}
.accessibility-toggle {
position: relative; font-size: 18px; padding: 8px; border-radius: 50%; transition: all 0.3s ease; }
.accessibility-toggle: hover {
background: var(--bg-subtle); transform: scale(1.1); }
.accessibility-toggle.has-enabled-features: : after {
content: ""; position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; background: var(--success-emphasis); border-radius: 50%; border: 2px solid var(--bg-canvas); }
.accessibility-panel {
position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; opacity: 0; transition: opacity 0.3s ease; }
.accessibility-panel.visible {
opacity: 1; }
.accessibility-overlay {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; }
.accessibility-content {
background: var(--bg-canvas); border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); max-width: 700px; width: 90%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
.accessibility-header {
display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--border-default); background: var(--bg-subtle); }
.accessibility-header h2 {
margin: 0; color: var(--fg-default); font-size: 20px; }
.accessibility-close {
background: none; border: none; font-size: 24px; color: var(--fg-muted); cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: all 0.2s ease; }
.accessibility-close: hover {
background: var(--bg-canvas); color: var(--fg-default); }
.accessibility-body {
flex: 1; overflow-y: auto; padding: 20px; }
.accessibility-section {
margin-bottom: 30px; }
.accessibility-section h3 {
margin: 0 0 15px 0; color: var(--fg-default); font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--border-muted); padding-bottom: 8px; }
.setting-group {
display: flex; flex-direction: column; gap: 15px; }
.setting-item {
display: flex; flex-direction: column; gap: 8px; padding: 15px; border: 1px solid var(--border-muted); border-radius: 6px; background: var(--bg-subtle); cursor: pointer; transition: all 0.2s ease; }
.setting-item: hover {
background: var(--bg-canvas); border-color: var(--accent-muted); }
.setting-item input[type="checkbox"] {
margin: 0; width: 18px; height: 18px; accent-color: var(--accent-emphasis); }
.setting-label {
font-weight: 500; color: var(--fg-default); font-size: 14px; display: flex; align-items: center; gap: 10px; }
.setting-description {
color: var(--fg-muted); font-size: 12px; line-height: 1.4; margin-left: 28px; }
.shortcut-help {
background: var(--bg-subtle); border-radius: 6px; padding: 15px; }
.shortcut-item {
display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-muted); }
.shortcut-item: last-child {
border-bottom: none; }
.shortcut-key {
font-family: monospace; background: var(--bg-canvas); padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border-default); font-size: 12px; color: var(--fg-default); font-weight: bold; }
.shortcut-desc {
color: var(--fg-muted); font-size: 13px; }
.report-section {
display: flex; flex-direction: column; gap: 15px; }
.report-content {
background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: 6px; padding: 15px; max-height: 300px; overflow-y: auto; }
.report-summary {
margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--border-muted); }
.report-summary h4 {
margin: 0 0 10px 0; color: var(--fg-default); }
.report-summary p {
margin: 5px 0; color: var(--fg-muted); font-size: 13px; }
.report-issues,
.report-suggestions,
.report-settings {
margin-bottom: 20px; }
.report-issues h4,
.report-suggestions h4,
.report-settings h4 {
margin: 0 0 10px 0; color: var(--fg-default); font-size: 14px; }
.report-issues ul,
.report-suggestions ul,
.report-settings ul {
margin: 0; padding-left: 20px; color: var(--fg-muted); font-size: 13px; }
.report-issues li {
color: var(--danger-emphasis); margin-bottom: 5px; }
.report-suggestions li {
color: var(--warning-emphasis); margin-bottom: 5px; }
.accessibility-footer {
padding: 15px 20px; border-top: 1px solid var(--border-default); display: flex; justify-content: flex-end; gap: 10px; background: var(--bg-subtle); }
.accessibility-status {
position: fixed; bottom: 20px; right: 20px; background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: 6px; padding: 12px 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 1001; transition: all 0.3s ease; max-width: 300px; }
.accessibility-status.info {
border-color: var(--accent-muted); background: var(--accent-subtle); }
.accessibility-status.success {
border-color: var(--success-muted); background: var(--success-subtle); }
.accessibility-status.warning {
border-color: var(--warning-muted); background: var(--warning-subtle); }
.accessibility-status.error {
border-color: var(--danger-muted); background: var(--danger-subtle); }
@media (max-width: 768px) {
.accessibility-content {
width: 95%; max-height: 95vh; }
.accessibility-header {
padding: 15px; }
.accessibility-body {
padding: 15px; }
.accessibility-section {
margin-bottom: 20px; }
.setting-item {
padding: 12px; }
.setting-description {
margin-left: 0; margin-top: 5px; }
.shortcut-item {
flex-direction: column; align-items: flex-start; gap: 5px; }
.accessibility-footer {
padding: 12px 15px; flex-direction: column; }
.accessibility-status {
bottom: 10px; right: 10px; left: 10px; max-width: none; }
}
.high-contrast .accessibility-panel {
background: rgba(0,0,0,0.8); }
.high-contrast .accessibility-content {
border: 3px solid #000000; }
.high-contrast .setting-item {
border: 2px solid #000000; }
.high-contrast .setting-item: hover {
background: #f0f0f0; }
.high-contrast .accessibility-toggle {
border: 2px solid #000000; }
.reduced-motion .accessibility-panel,
.reduced-motion .accessibility-toggle {
transition: none !important; }
.reduced-motion .accessibility-content {
animation: none !important; }
.large-text .accessibility-content {
font-size: 110%; }
.large-text .setting-label {
font-size: 16px; }
.large-text .setting-description {
font-size: 14px; }
.large-text .shortcut-key {
font-size: 14px; padding: 6px 10px; }
.backup-sync-toggle {
position: relative; font-size: 18px; padding: 8px; border-radius: 50%; transition: all 0.3s ease; }
.backup-sync-toggle: hover {
background: var(--bg-subtle); transform: scale(1.1); }
.backup-sync-toggle.syncing: : after {
content: ""; position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; background: var(--accent-emphasis); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.backup-sync-panel {
position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; opacity: 0; transition: opacity 0.3s ease; }
.backup-sync-panel.visible {
opacity: 1; }
.backup-sync-overlay {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; }
.backup-sync-content {
background: var(--bg-canvas); border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); max-width: 900px; width: 90%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
.backup-sync-header {
display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--border-default); background: var(--bg-subtle); }
.backup-sync-header h2 {
margin: 0; color: var(--fg-default); font-size: 20px; }
.backup-sync-close {
background: none; border: none; font-size: 24px; color: var(--fg-muted); cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: all 0.2s ease; }
.backup-sync-close: hover {
background: var(--bg-canvas); color: var(--fg-default); }
.backup-sync-body {
flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.backup-sync-tabs {
display: flex; border-bottom: 1px solid var(--border-default); background: var(--bg-subtle); }
.backup-sync-tabs .tab-button {
flex: 1; padding: 15px 20px; border: none; background: none; color: var(--fg-muted); cursor: pointer; transition: all 0.2s ease; border-bottom: 3px solid transparent; }
.backup-sync-tabs .tab-button: hover {
background: var(--bg-canvas); color: var(--fg-default); }
.backup-sync-tabs .tab-button.active {
color: var(--accent-emphasis); border-bottom-color: var(--accent-emphasis); background: var(--bg-canvas); }
.tab-content {
flex: 1; overflow-y: auto; }
.tab-panel {
display: none; padding: 20px; }
.tab-panel.active {
display: block; }
.backup-actions {
display: flex; gap: 10px; margin-bottom: 20px; }
.backup-actions .btn {
display: flex; align-items: center; gap: 8px; }
.backup-status {
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 25px; padding: 15px; background: var(--bg-subtle); border-radius: 6px; }
.status-item {
display: flex; justify-content: space-between; align-items: center; }
.status-label {
color: var(--fg-muted); font-size: 14px; }
.status-value {
color: var(--fg-default); font-weight: 500; }
.status-value.enabled {
color: var(--success-emphasis); }
.status-value.disabled {
color: var(--danger-emphasis); }
.backup-history h3 {
margin: 0 0 15px 0; color: var(--fg-default); font-size: 16px; }
.backup-list {
display: flex; flex-direction: column; gap: 10px; max-height: 400px; overflow-y: auto; }
.backup-item {
display: flex; justify-content: space-between; align-items: center; padding: 15px; border: 1px solid var(--border-muted); border-radius: 6px; background: var(--bg-canvas); transition: all 0.2s ease; }
.backup-item: hover {
border-color: var(--accent-muted); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.backup-info {
flex: 1; }
.backup-title {
display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.backup-type-icon {
font-size: 16px; }
.backup-description {
font-weight: 500; color: var(--fg-default); }
.backup-meta {
display: flex; gap: 15px; font-size: 12px; color: var(--fg-muted); }
.backup-location {
padding: 2px 6px; border-radius: 3px; font-weight: 500; }
.backup-location.local {
background: var(--success-subtle); color: var(--success-emphasis); }
.backup-location.googledrive {
background: var(--accent-subtle); color: var(--accent-emphasis); }
.backup-actions {
display: flex; gap: 5px; }
.backup-actions .btn-icon {
padding: 6px; border: 1px solid var(--border-muted); border-radius: 4px; background: var(--bg-canvas); cursor: pointer; transition: all 0.2s ease; }
.backup-actions .btn-icon: hover {
background: var(--bg-subtle); border-color: var(--accent-muted); }
.empty-state {
text-align: center; padding: 40px 20px; color: var(--fg-muted); }
.empty-icon {
font-size: 48px; margin-bottom: 15px; }
.sync-status {
display: flex; justify-content: space-between; align-items: center; padding: 20px; background: var(--bg-subtle); border-radius: 6px; margin-bottom: 25px; }
.sync-indicator {
display: flex; align-items: center; gap: 15px; }
.sync-icon {
font-size: 24px; animation: rotate 2s linear infinite; }
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.sync-info {
display: flex; flex-direction: column; gap: 5px; }
.sync-status-text {
font-weight: 500; color: var(--fg-default); }
.sync-time {
font-size: 12px; color: var(--fg-muted); }
.cloud-providers h3 {
margin: 0 0 15px 0; color: var(--fg-default); font-size: 16px; }
.provider-item {
display: flex; justify-content: space-between; align-items: center; padding: 15px; border: 1px solid var(--border-muted); border-radius: 6px; margin-bottom: 10px; background: var(--bg-canvas); }
.provider-info {
display: flex; align-items: center; gap: 15px; }
.provider-icon {
font-size: 24px; }
.provider-details h4 {
margin: 0 0 5px 0; color: var(--fg-default); font-size: 14px; }
.provider-details p {
margin: 0; font-size: 12px; color: var(--fg-muted); }
.provider-actions {
display: flex; align-items: center; gap: 10px; }
.provider-status {
font-size: 12px; padding: 4px 8px; border-radius: 3px; font-weight: 500; }
.provider-status.connected {
background: var(--success-subtle); color: var(--success-emphasis); }
.provider-status.disconnected {
background: var(--danger-subtle); color: var(--danger-emphasis); }
.settings-section {
margin-bottom: 30px; }
.settings-section h3 {
margin: 0 0 15px 0; color: var(--fg-default); font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--border-muted); padding-bottom: 8px; }
.setting-item {
margin-bottom: 20px; padding: 15px; border: 1px solid var(--border-muted); border-radius: 6px; background: var(--bg-subtle); }
.setting-label {
display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--fg-default); margin-bottom: 5px; }
.setting-label input[type="checkbox"] {
margin: 0; width: 16px; height: 16px; accent-color: var(--accent-emphasis); }
.setting-label input[type="number"],
.setting-label input[type="text"],
.setting-label input[type="password"],
.setting-label select {
margin-left: auto; padding: 6px 10px; border: 1px solid var(--border-default); border-radius: 4px; background: var(--bg-canvas); color: var(--fg-default); min-width: 120px; }
.setting-description {
font-size: 12px; color: var(--fg-muted); margin: 0; line-height: 1.4; }
.setting-help {
background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: 6px; padding: 15px; margin-top: 15px; }
.setting-help h4 {
margin: 0 0 10px 0; color: var(--fg-default); font-size: 14px; }
.setting-help ol {
margin: 0; padding-left: 20px; color: var(--fg-muted); font-size: 13px; }
.setting-help li {
margin-bottom: 5px; }
.setting-help a {
color: var(--accent-emphasis); text-decoration: none; }
.setting-help a: hover {
text-decoration: underline; }
.backup-sync-status {
position: fixed; bottom: 20px; right: 20px; background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: 6px; padding: 12px 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 1001; transition: all 0.3s ease; max-width: 300px; }
.backup-sync-status.info {
border-color: var(--accent-muted); background: var(--accent-subtle); }
.backup-sync-status.success {
border-color: var(--success-muted); background: var(--success-subtle); }
.backup-sync-status.warning {
border-color: var(--warning-muted); background: var(--warning-subtle); }
.backup-sync-status.error {
border-color: var(--danger-muted); background: var(--danger-subtle); }
.backup-sync-footer {
padding: 15px 20px; border-top: 1px solid var(--border-default); display: flex; justify-content: flex-end; gap: 10px; background: var(--bg-subtle); }
.sync-conflicts {
margin-top: 25px; }
.sync-conflicts h3 {
margin: 0 0 15px 0; color: var(--warning-emphasis); font-size: 16px; }
.conflict-list {
display: flex; flex-direction: column; gap: 10px; }
.conflict-item {
padding: 15px; border: 1px solid var(--warning-muted); border-radius: 6px; background: var(--warning-subtle); }
.conflict-title {
font-weight: 500; color: var(--warning-emphasis); margin-bottom: 8px; }
.conflict-description {
font-size: 13px; color: var(--fg-muted); margin-bottom: 10px; }
.conflict-actions {
display: flex; gap: 8px; }
.conflict-actions .btn {
font-size: 12px; padding: 6px 12px; }
@media (max-width: 768px) {
.backup-sync-content {
width: 95%; max-height: 95vh; }
.backup-sync-header {
padding: 15px; }
.backup-sync-tabs .tab-button {
padding: 12px 15px; font-size: 14px; }
.tab-panel {
padding: 15px; }
.backup-actions {
flex-direction: column; }
.backup-status {
grid-template-columns: 1fr; gap: 10px; }
.backup-item {
flex-direction: column; align-items: flex-start; gap: 10px; }
.backup-actions {
align-self: flex-end; }
.sync-status {
flex-direction: column; gap: 15px; text-align: center; }
.provider-item {
flex-direction: column; align-items: flex-start; gap: 10px; }
.provider-actions {
align-self: flex-end; }
.setting-label {
flex-direction: column; align-items: flex-start; gap: 5px; }
.setting-label input[type="number"],
.setting-label input[type="text"],
.setting-label input[type="password"],
.setting-label select {
margin-left: 0; width: 100%; }
.backup-sync-footer {
padding: 12px 15px; flex-direction: column; }
.backup-sync-status {
bottom: 10px; right: 10px; left: 10px; max-width: none; }
}
.high-contrast .backup-sync-panel {
background: rgba(0,0,0,0.8); }
.high-contrast .backup-sync-content {
border: 3px solid #000000; }
.high-contrast .backup-item,
.high-contrast .provider-item,
.high-contrast .setting-item {
border: 2px solid #000000; }
.high-contrast .backup-item: hover,
.high-contrast .provider-item: hover {
background: #f0f0f0; }
.high-contrast .backup-sync-toggle {
border: 2px solid #000000; }
.reduced-motion .backup-sync-panel,
.reduced-motion .backup-sync-toggle,
.reduced-motion .sync-icon {
transition: none !important; animation: none !important; }
.large-text .backup-sync-content {
font-size: 110%; }
.large-text .backup-description {
font-size: 16px; }
.large-text .setting-label {
font-size: 16px; }
.large-text .setting-description {
font-size: 14px; }
.loading-spinner {
display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border-muted); border-radius: 50%; border-top-color: var(--accent-emphasis); animation: spin 1s ease-in-out infinite; }
@keyframes spin {
to { transform: rotate(360deg); }
}
.backup-item.loading {
opacity: 0.6; pointer-events: none; }
.backup-item.loading: : after {
content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border: 2px solid var(--border-muted); border-radius: 50%; border-top-color: var(--accent-emphasis); animation: spin 1s ease-in-out infinite; }
.progress-bar {
width: 100%; height: 6px; background: var(--bg-subtle); border-radius: 3px; overflow: hidden; margin: 10px 0; }
.progress-fill {
height: 100%; background: var(--accent-emphasis); border-radius: 3px; transition: width 0.3s ease; width: 0%; }
.progress-text {
font-size: 12px; color: var(--fg-muted); text-align: center; margin-top: 5px; }
.plugin-toggle {
position: relative; font-size: 18px; padding: 8px; border-radius: 50%; transition: all 0.3s ease; }
.plugin-toggle: hover {
background: var(--bg-subtle); transform: scale(1.1); }
.plugin-toggle.has-plugins: : after {
content: ""; position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; background: var(--accent-emphasis); border-radius: 50%; border: 2px solid var(--bg-canvas); }
.plugin-toggle.has-enabled: : after {
background: var(--success-emphasis); animation: pulse 2s infinite; }
.plugin-panel {
position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; opacity: 0; transition: opacity 0.3s ease; }
.plugin-panel.visible {
opacity: 1; }
.plugin-overlay {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; }
.plugin-content {
background: var(--bg-canvas); border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); max-width: 1200px; width: 95%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
.plugin-header {
display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--border-default); background: var(--bg-subtle); }
.plugin-header h2 {
margin: 0; color: var(--fg-default); font-size: 20px; }
.plugin-header-actions {
display: flex; align-items: center; gap: 15px; }
.plugin-status-summary {
display: flex; gap: 15px; font-size: 12px; }
.plugin-status-summary .status-item {
display: flex; align-items: center; gap: 5px; }
.plugin-status-summary .status-label {
color: var(--fg-muted); }
.plugin-status-summary .status-value {
font-weight: 500; color: var(--fg-default); }
.plugin-status-summary .status-value.enabled {
color: var(--success-emphasis); }
.plugin-status-summary .status-value.failed {
color: var(--danger-emphasis); }
.plugin-close {
background: none; border: none; font-size: 24px; color: var(--fg-muted); cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: all 0.2s ease; }
.plugin-close: hover {
background: var(--bg-canvas); color: var(--fg-default); }
.plugin-body {
flex: 1; overflow: hidden; display: flex; }
.plugin-sidebar {
width: 250px; background: var(--bg-subtle); border-right: 1px solid var(--border-default); display: flex; flex-direction: column; }
.plugin-nav {
flex: 1; padding: 20px 0; }
.nav-item {
display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 20px; border: none; background: none; color: var(--fg-muted); cursor: pointer; transition: all 0.2s ease; text-align: left; position: relative; }
.nav-item: hover {
background: var(--bg-canvas); color: var(--fg-default); }
.nav-item.active {
background: var(--accent-subtle); color: var(--accent-emphasis); border-right: 3px solid var(--accent-emphasis); }
.nav-icon {
font-size: 16px; }
.nav-label {
flex: 1; font-weight: 500; }
.nav-badge {
background: var(--accent-emphasis); color: white; font-size: 11px; padding: 2px 6px; border-radius: 10px; min-width: 18px; text-align: center; }
.nav-item.active .nav-badge {
background: var(--accent-emphasis); }
.plugin-actions {
padding: 20px; border-top: 1px solid var(--border-default); display: flex; flex-direction: column; gap: 10px; }
.plugin-actions .btn {
display: flex; align-items: center; gap: 8px; justify-content: flex-start; }
.plugin-main {
flex: 1; overflow-y: auto; background: var(--bg-canvas); }
.plugin-view {
display: none; padding: 20px; }
.plugin-view.active {
display: block; }
.view-header {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--border-muted); }
.view-header h3 {
margin: 0; color: var(--fg-default); font-size: 18px; }
.view-actions {
display: flex; gap: 10px; align-items: center; }
.search-input {
padding: 8px 12px; border: 1px solid var(--border-default); border-radius: 4px; background: var(--bg-canvas); color: var(--fg-default); width: 200px; }
.category-filter {
padding: 8px 12px; border: 1px solid var(--border-default); border-radius: 4px; background: var(--bg-canvas); color: var(--fg-default); }
.plugin-list {
display: flex; flex-direction: column; gap: 15px; }
.plugin-card {
background: var(--bg-subtle); border: 1px solid var(--border-muted); border-radius: 8px; padding: 20px; transition: all 0.2s ease; }
.plugin-card: hover {
border-color: var(--accent-muted); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.plugin-card.enabled {
border-color: var(--success-muted); background: var(--success-subtle); }
.plugin-card.failed {
border-color: var(--danger-muted); background: var(--danger-subtle); }
.plugin-header {
display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.plugin-info h4 {
margin: 0 0 5px 0; color: var(--fg-default); font-size: 16px; }
.plugin-info p {
margin: 0; color: var(--fg-muted); font-size: 14px; line-height: 1.4; }
.plugin-status .status-badge {
padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; text-transform: uppercase; }
.status-badge.enabled {
background: var(--success-emphasis); color: white; }
.status-badge.disabled {
background: var(--fg-muted); color: white; }
.status-badge.failed {
background: var(--danger-emphasis); color: white; }
.plugin-meta {
display: flex; gap: 15px; margin-bottom: 15px; font-size: 12px; color: var(--fg-muted); }
.plugin-version {
font-family: monospace; background: var(--bg-canvas); padding: 2px 6px; border-radius: 3px; }
.plugin-category {
background: var(--accent-subtle); color: var(--accent-emphasis); padding: 2px 6px; border-radius: 3px; }
.plugin-actions {
display: flex; gap: 8px; margin-bottom: 15px; }
.plugin-actions .btn {
font-size: 12px; padding: 6px 12px; }
.plugin-permissions {
margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border-muted); }
.plugin-permissions details {
cursor: pointer; }
.plugin-permissions summary {
font-size: 12px; color: var(--fg-muted); font-weight: 500; }
.permission-list {
margin: 8px 0 0 0; padding-left: 20px; font-size: 11px; color: var(--fg-muted); }
.permission-list li {
margin-bottom: 3px; }
.empty-state {
text-align: center; padding: 60px 20px; color: var(--fg-muted); }
.empty-icon {
font-size: 64px; margin-bottom: 20px; opacity: 0.5; }
.empty-state h3 {
margin: 0 0 10px 0; color: var(--fg-default); }
.empty-state p {
margin: 0 0 20px 0; font-size: 14px; }
.develop-tools {
display: flex; flex-direction: column; gap: 30px; }
.tool-section {
background: var(--bg-subtle); border: 1px solid var(--border-muted); border-radius: 8px; padding: 20px; }
.tool-section h4 {
margin: 0 0 15px 0; color: var(--fg-default); font-size: 16px; font-weight: 600; }
.plugin-creator {
display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; }
.form-group {
display: flex; flex-direction: column; gap: 5px; }
.form-group label {
font-weight: 500; color: var(--fg-default); font-size: 14px; }
.form-group input,
.form-group textarea,
.form-group select {
padding: 8px 12px; border: 1px solid var(--border-default); border-radius: 4px; background: var(--bg-canvas); color: var(--fg-default); font-size: 14px; }
.form-group textarea {
resize: vertical; min-height: 80px; }
.code-editor {
display: flex; flex-direction: column; gap: 10px; }
.code-textarea {
width: 100%; min-height: 300px; padding: 15px; border: 1px solid var(--border-default); border-radius: 4px; background: var(--bg-canvas); color: var(--fg-default); font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 13px; line-height: 1.5; resize: vertical; }
.editor-actions {
display: flex; gap: 10px; }
.api-docs {
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.api-section h5 {
margin: 0 0 10px 0; color: var(--fg-default); font-size: 14px; font-weight: 600; }
.api-list {
margin: 0; padding: 0; list-style: none; }
.api-list li {
margin-bottom: 8px; padding: 8px 12px; background: var(--bg-canvas); border-radius: 4px; font-size: 12px; }
.api-list code {
color: var(--accent-emphasis); font-weight: 500; }
.plugin-store {
display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.store-plugin-card {
background: var(--bg-subtle); border: 1px solid var(--border-muted); border-radius: 8px; padding: 20px; transition: all 0.2s ease; cursor: pointer; }
.store-plugin-card: hover {
border-color: var(--accent-muted); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.store-plugin-header {
display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.store-plugin-info h4 {
margin: 0 0 5px 0; color: var(--fg-default); font-size: 16px; }
.store-plugin-info p {
margin: 0; color: var(--fg-muted); font-size: 14px; line-height: 1.4; }
.store-plugin-rating {
display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fg-muted); }
.rating-stars {
color: #ffc107; }
.store-plugin-meta {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 12px; color: var(--fg-muted); }
.download-count {
display: flex; align-items: center; gap: 3px; }
.store-plugin-actions {
display: flex; gap: 8px; }
.store-plugin-actions .btn {
flex: 1; font-size: 12px; padding: 8px 12px; }
.plugin-config-dialog {
position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10001; display: flex; align-items: center; justify-content: center; }
.dialog-overlay {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; }
.dialog-content {
background: var(--bg-canvas); border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); max-width: 500px; width: 90%; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; }
.dialog-header {
display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--border-default); background: var(--bg-subtle); }
.dialog-header h3 {
margin: 0; color: var(--fg-default); font-size: 18px; }
.dialog-close {
background: none; border: none; font-size: 20px; color: var(--fg-muted); cursor: pointer; padding: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: all 0.2s ease; }
.dialog-close: hover {
background: var(--bg-canvas); color: var(--fg-default); }
.dialog-body {
flex: 1; overflow-y: auto; padding: 20px; }
.config-form {
display: flex; flex-direction: column; gap: 15px; }
.checkbox-label {
display: flex; align-items: center; gap: 8px; cursor: pointer; }
.checkbox-label input[type="checkbox"] {
margin: 0; width: 16px; height: 16px; accent-color: var(--accent-emphasis); }
.form-group small {
color: var(--fg-muted); font-size: 12px; line-height: 1.4; }
.dialog-footer {
padding: 15px 20px; border-top: 1px solid var(--border-default); display: flex; justify-content: flex-end; gap: 10px; background: var(--bg-subtle); }
.plugin-status {
position: fixed; bottom: 20px; right: 20px; background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: 6px; padding: 12px 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 1001; transition: all 0.3s ease; max-width: 300px; }
.plugin-status.info {
border-color: var(--accent-muted); background: var(--accent-subtle); }
.plugin-status.success {
border-color: var(--success-muted); background: var(--success-subtle); }
.plugin-status.warning {
border-color: var(--warning-muted); background: var(--warning-subtle); }
.plugin-status.error {
border-color: var(--danger-muted); background: var(--danger-subtle); }
.plugin-footer {
padding: 15px 20px; border-top: 1px solid var(--border-default); display: flex; justify-content: space-between; align-items: center; background: var(--bg-subtle); }
.plugin-info {
font-size: 12px; color: var(--fg-muted); }
.plugin-footer-actions {
display: flex; gap: 10px; }
@media (max-width: 768px) {
.plugin-content {
width: 95%; max-height: 95vh; }
.plugin-body {
flex-direction: column; }
.plugin-sidebar {
width: 100%; border-right: none; border-bottom: 1px solid var(--border-default); }
.plugin-nav {
display: flex; overflow-x: auto; padding: 10px 0; }
.nav-item {
flex-shrink: 0; padding: 8px 15px; }
.plugin-actions {
flex-direction: row; padding: 15px 20px; }
.view-header {
flex-direction: column; align-items: flex-start; gap: 10px; }
.view-actions {
width: 100%; flex-wrap: wrap; }
.search-input {
width: 100%; }
.plugin-store {
grid-template-columns: 1fr; }
.plugin-creator {
grid-template-columns: 1fr; }
.api-docs {
grid-template-columns: 1fr; }
.plugin-header {
flex-direction: column; align-items: flex-start; gap: 10px; }
.plugin-actions {
flex-wrap: wrap; }
.dialog-content {
width: 95%; max-height: 90vh; }
.plugin-footer {
flex-direction: column; gap: 10px; text-align: center; }
.plugin-status {
bottom: 10px; right: 10px; left: 10px; max-width: none; }
}
.high-contrast .plugin-panel {
background: rgba(0,0,0,0.8); }
.high-contrast .plugin-content {
border: 3px solid #000000; }
.high-contrast .plugin-card,
.high-contrast .store-plugin-card,
.high-contrast .tool-section {
border: 2px solid #000000; }
.high-contrast .plugin-card: hover,
.high-contrast .store-plugin-card: hover {
background: #f0f0f0; }
.high-contrast .plugin-toggle {
border: 2px solid #000000; }
.reduced-motion .plugin-panel,
.reduced-motion .plugin-toggle,
.reduced-motion .store-plugin-card {
transition: none !important; animation: none !important; }
.reduced-motion .store-plugin-card: hover {
transform: none !important; }
.large-text .plugin-content {
font-size: 110%; }
.large-text .plugin-info h4 {
font-size: 18px; }
.large-text .plugin-info p {
font-size: 16px; }
.large-text .form-group label {
font-size: 16px; }
.large-text .api-list li {
font-size: 14px; }
.performance-toggle {
position: relative; font-size: 16px; padding: 8px; border-radius: 50%; transition: all 0.3s ease; }
.performance-toggle: hover {
background: var(--bg-subtle); transform: scale(1.1); }
.performance-toggle.has-warning {
background: var(--danger-subtle); animation: pulse-warning 2s infinite; }
@keyframes pulse-warning {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.performance-mini-monitor {
position: fixed; top: 80px; right: 20px; width: 200px; background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 1000; font-size: 12px; transition: all 0.3s ease; }
.performance-mini-monitor.minimized {
height: 40px; overflow: hidden; }
.performance-mini-monitor.has-warning {
border-color: var(--danger-emphasis); box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3); }
.mini-monitor-header {
display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--bg-subtle); border-bottom: 1px solid var(--border-muted); border-radius: 8px 8px 0 0; cursor: pointer; }
.monitor-title {
font-weight: 500; color: var(--fg-default); }
.monitor-controls {
display: flex; gap: 4px; }
.monitor-controls .btn-icon {
width: 16px; height: 16px; padding: 0; font-size: 10px; background: none; border: none; color: var(--fg-muted); cursor: pointer; border-radius: 2px; transition: all 0.2s ease; }
.monitor-controls .btn-icon: hover {
background: var(--bg-canvas); color: var(--fg-default); }
.mini-monitor-content {
padding: 8px 12px; }
.metric-item {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.metric-item: last-child {
margin-bottom: 0; }
.metric-label {
color: var(--fg-muted); font-size: 11px; }
.metric-value {
font-weight: 500; color: var(--fg-default); font-size: 11px; }
.metric-value.score-good {
color: var(--success-emphasis); }
.metric-value.score-warning {
color: var(--warning-emphasis); }
.metric-value.score-poor {
color: var(--danger-emphasis); }
.performance-panel {
position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; opacity: 0; transition: opacity 0.3s ease; }
.performance-panel.visible {
opacity: 1; }
.performance-overlay {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; }
.performance-content {
background: var(--bg-canvas); border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); max-width: 1400px; width: 95%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
.performance-header {
display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--border-default); background: var(--bg-subtle); }
.performance-header h2 {
margin: 0; color: var(--fg-default); font-size: 20px; }
.performance-header-actions {
display: flex; align-items: center; gap: 15px; }
.performance-score {
display: flex; flex-direction: column; align-items: center; padding: 8px 12px; background: var(--bg-canvas); border-radius: 6px; border: 1px solid var(--border-muted); }
.score-label {
font-size: 10px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.score-value {
font-size: 18px; font-weight: 700; color: var(--fg-default); margin-top: 2px; }
.performance-close {
background: none; border: none; font-size: 24px; color: var(--fg-muted); cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: all 0.2s ease; }
.performance-close: hover {
background: var(--bg-canvas); color: var(--fg-default); }
.performance-body {
flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.performance-tabs {
display: flex; background: var(--bg-subtle); border-bottom: 1px solid var(--border-default); }
.tab-button {
padding: 12px 20px; border: none; background: none; color: var(--fg-muted); cursor: pointer; transition: all 0.2s ease; border-bottom: 3px solid transparent; font-weight: 500; }
.tab-button: hover {
background: var(--bg-canvas); color: var(--fg-default); }
.tab-button.active {
color: var(--accent-emphasis); border-bottom-color: var(--accent-emphasis); background: var(--bg-canvas); }
.tab-content {
flex: 1; overflow-y: auto; }
.tab-panel {
display: none; padding: 20px; height: 100%; }
.tab-panel.active {
display: block; }
.overview-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.metric-card {
background: var(--bg-subtle); border: 1px solid var(--border-muted); border-radius: 8px; padding: 20px; transition: all 0.2s ease; }
.metric-card: hover {
border-color: var(--accent-muted); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.metric-card h3 {
margin: 0 0 15px 0; color: var(--fg-default); font-size: 16px; font-weight: 600; }
.metric-details {
display: flex; flex-direction: column; gap: 8px; }
.metric-row {
display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.metric-row span: first-child {
color: var(--fg-muted); }
.metric-row span: last-child {
font-weight: 500; color: var(--fg-default); }
.metrics-container {
display: flex; flex-direction: column; gap: 30px; }
.chart-section {
background: var(--bg-subtle); border: 1px solid var(--border-muted); border-radius: 8px; padding: 20px; }
.chart-section h3 {
margin: 0 0 15px 0; color: var(--fg-default); font-size: 16px; font-weight: 600; }
.chart-container {
position: relative; background: var(--bg-canvas); border-radius: 4px; padding: 15px; overflow: hidden; }
.chart-container canvas {
max-width: 100%; height: auto; }
.analysis-container {
display: flex; flex-direction: column; gap: 30px; }
.analysis-section {
background: var(--bg-subtle); border: 1px solid var(--border-muted); border-radius: 8px; padding: 20px; }
.analysis-section h3 {
margin: 0 0 15px 0; color: var(--fg-default); font-size: 16px; font-weight: 600; }
.trends-content,
.bottlenecks-content,
.warnings-content {
display: flex; flex-direction: column; gap: 10px; }
.trend-item,
.bottleneck-item,
.warning-item {
background: var(--bg-canvas); border: 1px solid var(--border-muted); border-radius: 6px; padding: 12px; }
.trend-header,
.bottleneck-header,
.warning-header {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.trend-metric,
.bottleneck-type,
.warning-type {
font-weight: 500; color: var(--fg-default); }
.trend-direction {
font-size: 16px; }
.trend-direction.increasing,
.trend-direction.degrading {
color: var(--danger-emphasis); }
.trend-direction.decreasing,
.trend-direction.improving {
color: var(--success-emphasis); }
.bottleneck-severity,
.warning-time {
font-size: 12px; padding: 2px 6px; border-radius: 3px; font-weight: 500; }
.bottleneck-item.severity-critical .bottleneck-severity {
background: var(--danger-emphasis); color: white; }
.bottleneck-item.severity-high .bottleneck-severity {
background: var(--warning-emphasis); color: white; }
.bottleneck-item.severity-medium .bottleneck-severity {
background: var(--accent-emphasis); color: white; }
.bottleneck-item.severity-low .bottleneck-severity {
background: var(--success-emphasis); color: white; }
.trend-details,
.bottleneck-description,
.warning-message {
font-size: 13px; color: var(--fg-muted); line-height: 1.4; }
.recommendations-container {
display: flex; flex-direction: column; gap: 20px; }
.recommendations-header {
display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid var(--border-muted); }
.recommendations-header h3 {
margin: 0; color: var(--fg-default); font-size: 18px; font-weight: 600; }
.recommendations-list {
display: flex; flex-direction: column; gap: 15px; }
.recommendation-item {
background: var(--bg-subtle); border: 1px solid var(--border-muted); border-radius: 8px; padding: 20px; transition: all 0.2s ease; }
.recommendation-item: hover {
border-color: var(--accent-muted); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.recommendation-item.priority-high {
border-left: 4px solid var(--danger-emphasis); }
.recommendation-item.priority-medium {
border-left: 4px solid var(--warning-emphasis); }
.recommendation-item.priority-low {
border-left: 4px solid var(--success-emphasis); }
.recommendation-header {
display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.recommendation-header h4 {
margin: 0; color: var(--fg-default); font-size: 16px; font-weight: 600; }
.recommendation-priority {
font-size: 11px; padding: 3px 8px; border-radius: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.recommendation-item.priority-high .recommendation-priority {
background: var(--danger-subtle); color: var(--danger-emphasis); }
.recommendation-item.priority-medium .recommendation-priority {
background: var(--warning-subtle); color: var(--warning-emphasis); }
.recommendation-item.priority-low .recommendation-priority {
background: var(--success-subtle); color: var(--success-emphasis); }
.recommendation-description {
color: var(--fg-muted); font-size: 14px; line-height: 1.5; margin-bottom: 15px; }
.recommendation-actions {
display: flex; gap: 10px; }
@media (max-width: 768px) {
.performance-content {
width: 95%; max-height: 95vh; }
.performance-header {
flex-direction: column; gap: 15px; align-items: flex-start; }
.performance-header-actions {
width: 100%; justify-content: space-between; flex-wrap: wrap; }
.performance-tabs {
overflow-x: auto; }
.tab-button {
flex-shrink: 0; padding: 10px 15px; }
.overview-grid {
grid-template-columns: 1fr; }
.metrics-container {
gap: 20px; }
.chart-container canvas {
width: 100%; height: 150px; }
.performance-mini-monitor {
width: 180px; right: 10px; top: 70px; }
.recommendations-header {
flex-direction: column; gap: 10px; align-items: flex-start; }
.recommendation-header {
flex-direction: column; gap: 8px; align-items: flex-start; }
}
.high-contrast .performance-panel {
background: rgba(0,0,0,0.8); }
.high-contrast .performance-content {
border: 3px solid #000000; }
.high-contrast .metric-card,
.high-contrast .chart-section,
.high-contrast .analysis-section,
.high-contrast .recommendation-item {
border: 2px solid #000000; }
.high-contrast .performance-mini-monitor {
border: 2px solid #000000; }
.reduced-motion .performance-panel,
.reduced-motion .performance-toggle,
.reduced-motion .performance-mini-monitor {
transition: none !important; animation: none !important; }
.large-text .performance-content {
font-size: 110%; }
.large-text .metric-card h3 {
font-size: 18px; }
.large-text .metric-row {
font-size: 16px; }
.large-text .recommendation-header h4 {
font-size: 18px; }
.large-text .recommendation-description {
font-size: 16px; }
.code-refactor-toggle {
position: relative; font-size: 16px; padding: 8px; border-radius: 50%; transition: all 0.3s ease; }
.code-refactor-toggle: hover {
background: var(--bg-subtle); transform: scale(1.1); }
.code-refactor-panel {
position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; opacity: 0; transition: opacity 0.3s ease; }
.code-refactor-panel.visible {
opacity: 1; }
.refactor-overlay {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; }
.refactor-content {
background: var(--bg-canvas); border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); max-width: 1400px; width: 95%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
.refactor-header {
display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--border-default); background: var(--bg-subtle); }
.refactor-header h2 {
margin: 0; color: var(--fg-default); font-size: 20px; }
.refactor-header-actions {
display: flex; align-items: center; gap: 15px; }
.refactor-close {
background: none; border: none; font-size: 24px; color: var(--fg-muted); cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: all 0.2s ease; }
.refactor-close: hover {
background: var(--bg-canvas); color: var(--fg-default); }
.refactor-body {
flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.refactor-tabs {
display: flex; background: var(--bg-subtle); border-bottom: 1px solid var(--border-default); }
.refactor-tabs .tab-button {
padding: 12px 20px; border: none; background: none; color: var(--fg-muted); cursor: pointer; transition: all 0.2s ease; border-bottom: 3px solid transparent; font-weight: 500; }
.refactor-tabs .tab-button: hover {
background: var(--bg-canvas); color: var(--fg-default); }
.refactor-tabs .tab-button.active {
color: var(--accent-emphasis); border-bottom-color: var(--accent-emphasis); background: var(--bg-canvas); }
.refactor-tabs .tab-content {
flex: 1; overflow-y: auto; }
.refactor-tabs .tab-panel {
display: none; padding: 20px; height: 100%; }
.refactor-tabs .tab-panel.active {
display: block; }
.analysis-container {
display: flex; flex-direction: column; gap: 20px; }
.analysis-summary {
background: var(--bg-subtle); border: 1px solid var(--border-muted); border-radius: 8px; padding: 20px; }
.summary-card h3 {
margin: 0 0 15px 0; color: var(--fg-default); font-size: 18px; font-weight: 600; }
.quality-metrics {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; }
.quality-metrics .metric-item {
display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--bg-canvas); border-radius: 4px; border: 1px solid var(--border-muted); }
.quality-metrics .metric-label {
color: var(--fg-muted); font-size: 14px; }
.quality-metrics .metric-value {
font-weight: 600; color: var(--fg-default); font-size: 14px; }
.analysis-details {
display: flex; flex-direction: column; gap: 20px; }
.detail-section {
background: var(--bg-subtle); border: 1px solid var(--border-muted); border-radius: 8px; padding: 20px; }
.detail-section h3 {
margin: 0 0 15px 0; color: var(--fg-default); font-size: 16px; font-weight: 600; }
.file-list {
display: flex; flex-direction: column; gap: 10px; }
.file-analysis-item {
background: var(--bg-canvas); border: 1px solid var(--border-muted); border-radius: 6px; padding: 12px; transition: all 0.2s ease; }
.file-analysis-item: hover {
border-color: var(--accent-muted); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.file-header {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.file-path {
font-weight: 500; color: var(--fg-default); font-family: monospace; font-size: 13px; }
.file-type {
background: var(--accent-subtle); color: var(--accent-emphasis); padding: 2px 6px; border-radius: 3px; font-size: 11px; font-weight: 500; text-transform: uppercase; }
.file-metrics {
display: flex; gap: 15px; font-size: 12px; color: var(--fg-muted); }
.file-metrics .metric {
display: flex; align-items: center; gap: 4px; }
.issue-list {
display: flex; flex-direction: column; gap: 10px; }
.issue-item {
background: var(--bg-canvas); border: 1px solid var(--border-muted); border-radius: 6px; padding: 12px; border-left: 4px solid var(--border-muted); }
.issue-item.severity-error {
border-left-color: var(--danger-emphasis); }
.issue-item.severity-warning {
border-left-color: var(--warning-emphasis); }
.issue-item.severity-info {
border-left-color: var(--accent-emphasis); }
.issue-header {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.issue-type {
font-weight: 500; color: var(--fg-default); font-size: 13px; }
.issue-severity {
font-size: 11px; padding: 2px 6px; border-radius: 3px; font-weight: 500; text-transform: uppercase; }
.issue-item.severity-error .issue-severity {
background: var(--danger-emphasis); color: white; }
.issue-item.severity-warning .issue-severity {
background: var(--warning-emphasis); color: white; }
.issue-item.severity-info .issue-severity {
background: var(--accent-emphasis); color: white; }
.issue-message {
color: var(--fg-default); font-size: 14px; margin-bottom: 5px; }
.issue-location {
color: var(--fg-muted); font-size: 12px; font-family: monospace; margin-bottom: 5px; }
.issue-suggestion {
color: var(--fg-muted); font-size: 12px; font-style: italic; }
.suggestion-list {
display: flex; flex-direction: column; gap: 15px; }
.suggestion-item {
background: var(--bg-canvas); border: 1px solid var(--border-muted); border-radius: 8px; padding: 15px; border-left: 4px solid var(--border-muted); }
.suggestion-item.priority-high {
border-left-color: var(--danger-emphasis); }
.suggestion-item.priority-medium {
border-left-color: var(--warning-emphasis); }
.suggestion-item.priority-low {
border-left-color: var(--success-emphasis); }
.suggestion-header {
display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.suggestion-header h4 {
margin: 0; color: var(--fg-default); font-size: 15px; font-weight: 600; }
.suggestion-priority {
font-size: 11px; padding: 3px 8px; border-radius: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.suggestion-item.priority-high .suggestion-priority {
background: var(--danger-subtle); color: var(--danger-emphasis); }
.suggestion-item.priority-medium .suggestion-priority {
background: var(--warning-subtle); color: var(--warning-emphasis); }
.suggestion-item.priority-low .suggestion-priority {
background: var(--success-subtle); color: var(--success-emphasis); }
.suggestion-description {
color: var(--fg-muted); font-size: 14px; line-height: 1.5; margin-bottom: 10px; }
.suggestion-actions ul {
margin: 0; padding-left: 20px; color: var(--fg-muted); font-size: 13px; }
.suggestion-actions li {
margin-bottom: 3px; }
.refactor-config {
display: flex; flex-direction: column; gap: 25px; }
.config-section {
background: var(--bg-subtle); border: 1px solid var(--border-muted); border-radius: 8px; padding: 20px; }
.config-section h3 {
margin: 0 0 15px 0; color: var(--fg-default); font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--border-muted); padding-bottom: 8px; }
.config-group {
margin-bottom: 15px; }
.config-item {
display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; color: var(--fg-default); margin-bottom: 8px; }
.config-item input[type="checkbox"] {
width: 16px; height: 16px; accent-color: var(--accent-emphasis); }
.config-sub-options {
margin-left: 24px; padding: 10px; background: var(--bg-canvas); border-radius: 4px; border: 1px solid var(--border-muted); display: flex; flex-direction: column; gap: 8px; }
.config-sub-options label {
display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-muted); }
.config-sub-options input[type="number"],
.config-sub-options select {
padding: 4px 8px; border: 1px solid var(--border-default); border-radius: 3px; background: var(--bg-canvas); color: var(--fg-default); font-size: 12px; width: 80px; }
.config-sub-options input[type="checkbox"] {
width: 14px; height: 14px; }
.preview-container {
display: flex; flex-direction: column; gap: 20px; }
.preview-header {
display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid var(--border-muted); }
.preview-header h3 {
margin: 0; color: var(--fg-default); font-size: 18px; font-weight: 600; }
.preview-actions {
display: flex; gap: 10px; }
.preview-content {
flex: 1; overflow-y: auto; }
.preview-summary {
background: var(--bg-subtle); border: 1px solid var(--border-muted); border-radius: 8px; padding: 15px; margin-bottom: 20px; }
.preview-summary h4 {
margin: 0 0 10px 0; color: var(--fg-default); font-size: 16px; }
.summary-stats {
display: flex; gap: 20px; font-size: 14px; color: var(--fg-muted); }
.preview-files {
display: flex; flex-direction: column; gap: 15px; }
.preview-file {
background: var(--bg-subtle); border: 1px solid var(--border-muted); border-radius: 8px; padding: 15px; }
.preview-file .file-header {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.preview-file .file-header h5 {
margin: 0; color: var(--fg-default); font-size: 14px; font-family: monospace; }
.change-count {
background: var(--accent-subtle); color: var(--accent-emphasis); padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 500; }
.file-changes {
display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.change-item {
display: flex; gap: 10px; align-items: center; font-size: 13px; }
.change-type {
background: var(--bg-canvas); color: var(--fg-muted); padding: 2px 6px; border-radius: 3px; font-size: 11px; font-weight: 500; min-width: 80px; text-align: center; }
.change-description {
color: var(--fg-default); flex: 1; }
.file-diff {
margin-top: 10px; }
.file-diff summary {
cursor: pointer; font-weight: 500; color: var(--accent-emphasis); font-size: 13px; }
.diff-content {
display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 10px; }
.diff-before,
.diff-after {
background: var(--bg-canvas); border: 1px solid var(--border-muted); border-radius: 4px; padding: 10px; }
.diff-before h6,
.diff-after h6 {
margin: 0 0 8px 0; font-size: 12px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.diff-content pre {
margin: 0; font-size: 11px; line-height: 1.4; overflow-x: auto; }
.diff-content code {
color: var(--fg-default); }
.history-container {
display: flex; flex-direction: column; gap: 20px; }
.history-header {
display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid var(--border-muted); }
.history-header h3 {
margin: 0; color: var(--fg-default); font-size: 18px; font-weight: 600; }
.history-actions {
display: flex; gap: 10px; }
.history-stats {
background: var(--bg-subtle); border: 1px solid var(--border-muted); border-radius: 8px; padding: 15px; }
.stats-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-bottom: 15px; }
.stat-item {
display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--bg-canvas); border-radius: 4px; border: 1px solid var(--border-muted); }
.stat-label {
color: var(--fg-muted); font-size: 13px; }
.stat-value {
font-weight: 600; color: var(--fg-default); font-size: 14px; }
.change-types h4 {
margin: 0 0 10px 0; color: var(--fg-default); font-size: 14px; font-weight: 600; }
.change-type-stat {
display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; font-size: 12px; color: var(--fg-muted); }
.history-list {
display: flex; flex-direction: column; gap: 10px; }
.history-item {
background: var(--bg-subtle); border: 1px solid var(--border-muted); border-radius: 6px; padding: 12px; }
.history-header {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.history-file {
font-weight: 500; color: var(--fg-default); font-family: monospace; font-size: 13px; }
.history-time {
color: var(--fg-muted); font-size: 11px; }
.history-changes {
display: flex; flex-wrap: wrap; gap: 8px; }
.history-change {
background: var(--bg-canvas); color: var(--fg-muted); padding: 2px 6px; border-radius: 3px; font-size: 11px; border: 1px solid var(--border-muted); }
.more-changes {
background: var(--accent-subtle); color: var(--accent-emphasis); padding: 2px 6px; border-radius: 3px; font-size: 11px; font-weight: 500; }
.loading-overlay {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.loading-content {
display: flex; flex-direction: column; align-items: center; gap: 15px; }
.loading-spinner {
width: 40px; height: 40px; border: 4px solid var(--border-muted); border-top: 4px solid var(--accent-emphasis); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-message {
color: var(--fg-default); font-weight: 500; font-size: 14px; }
@media (max-width: 768px) {
.refactor-content {
width: 95%; max-height: 95vh; }
.refactor-header {
flex-direction: column; gap: 15px; align-items: flex-start; }
.refactor-header-actions {
width: 100%; justify-content: space-between; flex-wrap: wrap; }
.refactor-tabs {
overflow-x: auto; }
.refactor-tabs .tab-button {
flex-shrink: 0; padding: 10px 15px; }
.quality-metrics {
grid-template-columns: 1fr; }
.stats-grid {
grid-template-columns: 1fr; }
.diff-content {
grid-template-columns: 1fr; }
.config-sub-options {
margin-left: 0; }
.preview-header {
flex-direction: column; gap: 10px; align-items: flex-start; }
.preview-actions {
width: 100%; justify-content: flex-start; flex-wrap: wrap; }
.history-header {
flex-direction: column; gap: 10px; align-items: flex-start; }
.history-actions {
width: 100%; justify-content: flex-start; }
}
.high-contrast .code-refactor-panel {
background: rgba(0,0,0,0.8); }
.high-contrast .refactor-content {
border: 3px solid #000000; }
.high-contrast .file-analysis-item,
.high-contrast .issue-item,
.high-contrast .suggestion-item,
.high-contrast .config-section,
.high-contrast .preview-file,
.high-contrast .history-item {
border: 2px solid #000000; }
.reduced-motion .code-refactor-panel,
.reduced-motion .code-refactor-toggle,
.reduced-motion .file-analysis-item {
transition: none !important; animation: none !important; }
.reduced-motion .loading-spinner {
animation: none !important; }
.large-text .refactor-content {
font-size: 110%; }
.large-text .file-analysis-item .file-path {
font-size: 15px; }
.large-text .issue-message {
font-size: 16px; }
.large-text .suggestion-header h4 {
font-size: 17px; }
.large-text .suggestion-description {
font-size: 16px; }
.performance-toggle {
position: relative; font-size: 16px; padding: 8px; border-radius: 50%; transition: all 0.3s ease; }
.performance-toggle: hover {
background: var(--bg-subtle); transform: scale(1.1); }
.performance-dashboard {
position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; opacity: 0; transition: opacity 0.3s ease; }
.performance-dashboard.visible {
opacity: 1; }
.dashboard-overlay {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; }
.dashboard-content {
background: var(--bg-canvas); border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); max-width: 95vw; width: 1400px; max-height: 95vh; overflow: hidden; display: flex; flex-direction: column; }
.dashboard-header {
display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--border-default); background: var(--bg-subtle); }
.dashboard-header h2 {
margin: 0; color: var(--fg-default); font-size: 20px; }
.dashboard-header-actions {
display: flex; align-items: center; gap: 15px; }
.dashboard-close {
background: none; border: none; font-size: 24px; color: var(--fg-muted); cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: all 0.2s ease; }
.dashboard-close: hover {
background: var(--bg-canvas); color: var(--fg-default); }
.dashboard-body {
flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.dashboard-tabs {
display: flex; background: var(--bg-subtle); border-bottom: 1px solid var(--border-default); overflow-x: auto; }
.dashboard-tabs .tab-button {
padding: 12px 20px; border: none; background: none; color: var(--fg-muted); cursor: pointer; transition: all 0.2s ease; border-bottom: 3px solid transparent; font-weight: 500; white-space: nowrap; }
.dashboard-tabs .tab-button: hover {
background: var(--bg-canvas); color: var(--fg-default); }
.dashboard-tabs .tab-button.active {
color: var(--accent-emphasis); border-bottom-color: var(--accent-emphasis); background: var(--bg-canvas); }
.dashboard-tabs .tab-content {
flex: 1; overflow-y: auto; }
.dashboard-tabs .tab-panel {
display: none; padding: 20px; height: 100%; }
.dashboard-tabs .tab-panel.active {
display: block; }
.overview-container {
display: flex; flex-direction: column; gap: 25px; }
.metrics-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.metric-card {
background: var(--bg-subtle); border: 1px solid var(--border-muted); border-radius: 8px; padding: 20px; text-align: center; }
.metric-card h3 {
margin: 0 0 10px 0; color: var(--fg-default); font-size: 16px; font-weight: 600; }
.metric-value {
font-size: 32px; font-weight: 700; color: var(--accent-emphasis); margin-bottom: 10px; }
.metric-trend {
font-size: 12px; color: var(--fg-muted); }
.metric-progress {
width: 100%; height: 8px; background: var(--bg-canvas); border-radius: 4px; overflow: hidden; margin-top: 10px; }
.progress-bar {
height: 100%; background: var(--accent-emphasis); transition: width 0.3s ease; }
.metric-details {
font-size: 14px; color: var(--fg-muted); margin-top: 5px; }
.overview-charts,
.memory-charts,
.network-charts,
.rendering-charts,
.async-charts,
.cache-charts {
background: var(--bg-subtle); border: 1px solid var(--border-muted); border-radius: 8px; padding: 20px; }
.chart-container {
text-align: center; }
.chart-container h3 {
margin: 0 0 15px 0; color: var(--fg-default); font-size: 16px; font-weight: 600; }
.chart-container canvas {
max-width: 100%; height: auto; border: 1px solid var(--border-muted); border-radius: 4px; }
.alerts-section {
background: var(--bg-subtle); border: 1px solid var(--border-muted); border-radius: 8px; padding: 20px; }
.alerts-section h3 {
margin: 0 0 15px 0; color: var(--fg-default); font-size: 16px; font-weight: 600; }
.alerts-list {
display: flex; flex-direction: column; gap: 10px; }
.alert-item {
display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: var(--bg-canvas); border: 1px solid var(--border-muted); border-radius: 6px; border-left: 4px solid var(--border-muted); }
.alert-item.severity-critical {
border-left-color: var(--danger-emphasis); background: var(--danger-subtle); }
.alert-item.severity-warning {
border-left-color: var(--warning-emphasis); background: var(--warning-subtle); }
.alert-item.severity-info {
border-left-color: var(--accent-emphasis); background: var(--accent-subtle); }
.alert-icon {
font-size: 16px; margin-top: 2px; }
.alert-content {
flex: 1; }
.alert-title {
font-weight: 600; color: var(--fg-default); font-size: 14px; margin-bottom: 4px; }
.alert-message {
color: var(--fg-muted); font-size: 13px; margin-bottom: 4px; }
.alert-time {
color: var(--fg-muted); font-size: 11px; }
.no-alerts {
text-align: center; color: var(--fg-muted); font-style: italic; padding: 20px; }
.memory-container,
.network-container,
.rendering-container,
.async-container,
.cache-container {
display: flex; flex-direction: column; gap: 25px; }
.memory-stats,
.network-stats,
.rendering-stats,
.async-stats,
.cache-stats {
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.stat-group {
background: var(--bg-subtle); border: 1px solid var(--border-muted); border-radius: 8px; padding: 20px; }
.stat-group h3 {
margin: 0 0 15px 0; color: var(--fg-default); font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--border-muted); padding-bottom: 8px; }
.stat-item {
display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-muted); }
.stat-item: last-child {
border-bottom: none; }
.stat-label {
color: var(--fg-muted); font-size: 14px; }
.stat-value {
font-weight: 600; color: var(--fg-default); font-size: 14px; }
.pool-stat {
display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; }
.pool-name {
color: var(--fg-muted); }
.pool-value {
color: var(--fg-default); font-weight: 500; }
.pool-rate {
color: var(--accent-emphasis); font-size: 11px; }
.memory-leaks {
background: var(--bg-subtle); border: 1px solid var(--border-muted); border-radius: 8px; padding: 20px; }
.memory-leaks h3 {
margin: 0 0 15px 0; color: var(--fg-default); font-size: 16px; font-weight: 600; }
.leak-item {
display: flex; justify-content: space-between; align-items: center; padding: 10px; background: var(--bg-canvas); border: 1px solid var(--border-muted); border-radius: 6px; margin-bottom: 8px; }
.leak-type {
font-weight: 500; color: var(--fg-default); font-size: 13px; }
.leak-growth {
color: var(--danger-emphasis); font-weight: 600; font-size: 13px; }
.leak-time {
color: var(--fg-muted); font-size: 11px; }
.request-timeline {
background: var(--bg-subtle); border: 1px solid var(--border-muted); border-radius: 8px; padding: 20px; }
.request-timeline h3 {
margin: 0 0 15px 0; color: var(--fg-default); font-size: 16px; font-weight: 600; }
.queue-stat {
display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; }
.queue-priority {
color: var(--fg-muted); text-transform: capitalize; }
.queue-size {
color: var(--fg-default); font-weight: 500; }
.layer-stat {
display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; }
.layer-name {
color: var(--fg-muted); text-transform: capitalize; }
.layer-hits,
.layer-misses {
color: var(--fg-default); font-weight: 500; margin-left: 10px; }
.cache-strategies {
background: var(--bg-subtle); border: 1px solid var(--border-muted); border-radius: 8px; padding: 20px; }
.cache-strategies h3 {
margin: 0 0 15px 0; color: var(--fg-default); font-size: 16px; font-weight: 600; }
.strategy-item {
padding: 8px 12px; background: var(--bg-canvas); border: 1px solid var(--border-muted); border-radius: 4px; margin-bottom: 6px; }
.strategy-name {
color: var(--fg-default); font-weight: 500; font-size: 13px; }
@media (max-width: 768px) {
.dashboard-content {
width: 95%; max-height: 95vh; }
.dashboard-header {
flex-direction: column; gap: 15px; align-items: flex-start; }
.dashboard-header-actions {
width: 100%; justify-content: space-between; flex-wrap: wrap; }
.dashboard-tabs {
overflow-x: auto; }
.dashboard-tabs .tab-button {
flex-shrink: 0; padding: 10px 15px; }
.metrics-grid {
grid-template-columns: 1fr; }
.memory-stats,
.network-stats,
.rendering-stats,
.async-stats,
.cache-stats {
grid-template-columns: 1fr; }
.chart-container canvas {
width: 100%; height: 200px; }
}
.high-contrast .performance-dashboard {
background: rgba(0,0,0,0.8); }
.high-contrast .dashboard-content {
border: 3px solid #000000; }
.high-contrast .metric-card,
.high-contrast .stat-group,
.high-contrast .alert-item {
border: 2px solid #000000; }
.reduced-motion .performance-dashboard,
.reduced-motion .performance-toggle,
.reduced-motion .metric-card {
transition: none !important; animation: none !important; }
.large-text .dashboard-content {
font-size: 110%; }
.large-text .metric-value {
font-size: 36px; }
.large-text .alert-title {
font-size: 16px; }
.large-text .alert-message {
font-size: 15px; }
@media (max-width: 768px) {
.advanced-editor-wrapper {
flex-direction: column; }
.minimap {
display: none; }
.advanced-editor.with-minimap {
padding-right: 15px; }
.line-numbers {
width: 40px; }
.advanced-editor.with-line-numbers {
padding-left: 50px; }
.folding-gutter {
left: 40px; width: 15px; }
.advanced-editor.with-folding {
padding-left: 65px; }
.advanced-editor-toolbar {
flex-wrap: wrap; gap: 4px; }
.editor-feature-toggle {
padding: 3px 6px; }
.feature-label {
display: none; }
}
@media (max-width: 768px) {
.dialog-content {
width: 95%; max-height: 90vh; }
.dialog-header,
.dialog-body,
.dialog-footer {
padding: 15px; }
.shortcuts-dialog-content,
.customize-dialog-content {
width: 95%; max-height: 90vh; }
.shortcuts-tabs {
flex-wrap: wrap; gap: 2px; }
.shortcuts-tab {
padding: 6px 12px; font-size: 12px; }
.shortcut-item,
.customize-item {
flex-direction: column; align-items: flex-start; gap: 8px; }
.shortcut-key,
.customize-shortcut {
width: 100%; justify-content: space-between; }
.shortcuts-stats {
flex-direction: column; align-items: flex-start; gap: 4px; }
}
.editor-textarea {
flex: 1; width: 100%; height: 100%; border: none; outline: none; resize: none; padding: 20px; font-family: var(--font-mono); font-size: 15px; line-height: 1.7; color: var(--fg-default); background-color: var(--bg-canvas); overflow-y: auto; transition: all 0.2s ease; }
.editor-textarea: : placeholder {
color: var(--fg-muted); font-style: normal; opacity: 0.7; }
.editor-textarea: focus {
background-color: var(--bg-canvas); box-shadow: inset 0 0 0 1px var(--primary-color); }
.editor-textarea: focus: : placeholder {
color: var(--fg-subtle); opacity: 0.5; }
.editor-textarea.drag-over {
background-color: var(--bg-subtle); border: 2px dashed var(--primary-color); }
.drag-drop-overlay {
position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 112, 249, 0.1); border: 2px dashed var(--primary-color); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 500; color: var(--primary-color); opacity: 0; visibility: hidden; transition: all 0.3s ease; pointer-events: none; }
.drag-drop-overlay.active {
opacity: 1; visibility: visible; }
.editor-divider {
width: 1px; background-color: var(--border-default); cursor: col-resize; transition: all 0.2s ease; position: relative; }
.editor-divider: hover {
background-color: var(--primary-color); width: 2px; }
.editor-divider: : before {
content: ''; position: absolute; top: 0; left: -2px; right: -2px; bottom: 0; background: transparent; }
.html-preview {
flex: 1; height: 100%; padding: 24px; overflow-y: auto; background-color: var(--bg-canvas); font-family: var(--font-stack); line-height: 1.6; border-left: 1px solid var(--border-default); }
.html-code {
flex: 1; border: none; outline: none; resize: none; padding: 20px; font-family: var(--font-mono); font-size: 14px; line-height: 1.6; color: var(--fg-default); background-color: var(--bg-canvas-inset); overflow-y: auto; }
.fullscreen-mode .header {
display: none; }
.fullscreen-mode .toolbar {
display: none; }
.fullscreen-mode .main {
height: 100vh; }
.fullscreen-mode .editor-container {
height: 100vh; }
.help-content {
flex: 1; padding: 24px; overflow-y: auto; max-width: 800px; margin: 0 auto; }
.help-content h1 {
margin: 0 0 24px 0; font-size: 24px; font-weight: 700; color: var(--fg-default); }
.help-section {
margin-bottom: 32px; }
.help-section h2 {
margin: 0 0 16px 0; font-size: 18px; font-weight: 600; color: var(--fg-default); padding-bottom: 8px; border-bottom: 2px solid var(--border-default); }
.help-section h3 {
margin: 16px 0 8px 0; font-size: 16px; font-weight: 600; color: var(--fg-default); }
.help-section p {
margin: 0 0 12px 0; color: var(--fg-default); line-height: 1.6; }
.help-section ol, .help-section ul {
margin: 0 0 16px 0; padding-left: 24px; }
.help-section li {
margin-bottom: 8px; color: var(--fg-default); line-height: 1.6; }
.syntax-examples {
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
.syntax-item {
background-color: var(--bg-canvas-inset); border: 1px solid var(--border-default); border-radius: var(--border-radius); padding: 16px; }
.syntax-item pre {
margin: 8px 0 0 0; padding: 8px 12px; background-color: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: 4px; overflow-x: auto; }
.syntax-item code {
font-family: var(--font-mono); font-size: 12px; color: var(--fg-default); background: none; }
.modal {
position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.modal.active {
opacity: 1; visibility: visible; }
.modal-dialog {
background-color: var(--bg-canvas); border-radius: var(--border-radius-large); box-shadow: var(--shadow-large); width: 90%; max-width: 600px; max-height: 90%; overflow: hidden; transform: scale(0.9); transition: transform 0.3s ease; }
.modal.active .modal-dialog {
transform: scale(1); }
.modal-content {
display: flex; flex-direction: column; height: 100%; }
.modal-header {
display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-default); background-color: var(--bg-canvas-inset); }
.modal-header h3 {
margin: 0; font-size: 16px; font-weight: 600; color: var(--fg-default); }
.modal-close {
display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: none; color: var(--fg-muted); font-size: 20px; cursor: pointer; border-radius: var(--border-radius); transition: all 0.2s ease; }
.modal-close: hover {
background-color: var(--bg-subtle); color: var(--fg-default); }
.modal-close svg {
width: 16px; height: 16px; fill: currentColor; }
.modal-body {
flex: 1; padding: 20px; overflow-y: auto; }
.rules-container {
display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.rule-form {
display: flex; flex-direction: column; gap: 16px; }
.form-group {
display: flex; flex-direction: column; }
.form-group label {
margin-bottom: 4px; font-size: 14px; font-weight: 500; color: var(--fg-default); }
.form-input {
padding: 8px 12px; border: 1px solid var(--border-default); border-radius: var(--border-radius); font-size: 14px; color: var(--fg-default); background-color: var(--bg-canvas); transition: border-color 0.2s ease; }
.form-input: focus {
outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(0, 112, 249, 0.1); }
.checkbox-label {
display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg-default); cursor: pointer; margin-bottom: 8px; }
.checkbox-label input[type="checkbox"] {
margin: 0; }
.form-actions {
display: flex; gap: 8px; flex-wrap: wrap; }
.saved-rules h4 {
margin: 0 0 12px 0; font-size: 14px; font-weight: 600; color: var(--fg-default); }
.rules-list {
display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; }
.rule-item {
padding: 12px; background-color: var(--bg-canvas-inset); border: 1px solid var(--border-default); border-radius: var(--border-radius); }
.rule-item: last-child {
margin-bottom: 0; }
.rule-info {
margin-bottom: 8px; }
.rule-pattern {
font-family: var(--font-mono); font-size: 12px; color: var(--fg-default); background-color: var(--bg-canvas); padding: 2px 4px; border-radius: 2px; }
.rule-replacement {
font-family: var(--font-mono); font-size: 12px; color: var(--primary-color); }
.rule-actions {
display: flex; gap: 8px; }
.history-tabs {
display: flex; margin-bottom: 16px; border-bottom: 1px solid var(--border-default); }
.tab-btn {
padding: 8px 16px; border: none; background: none; color: var(--fg-muted); font-size: 14px; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s ease; }
.tab-btn: hover {
color: var(--fg-default); }
.tab-btn.active {
color: var(--primary-color); border-bottom-color: var(--primary-color); }
.history-tab-content {
display: none; }
.history-tab-content.active {
display: block; }
.history-actions {
display: flex; gap: 8px; margin-bottom: 16px; }
.history-list {
display: flex; flex-direction: column; gap: 8px; max-height: 400px; overflow-y: auto; }
.history-item {
padding: 12px; background-color: var(--bg-canvas-inset); border: 1px solid var(--border-default); border-radius: var(--border-radius); }
.history-item: last-child {
margin-bottom: 0; }
.history-info {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.history-type {
font-size: 12px; font-weight: 500; color: var(--primary-color); }
.history-description {
font-size: 14px; color: var(--fg-default); margin-bottom: 4px; }
.history-time {
font-size: 12px; color: var(--fg-muted); }
.history-actions-btn {
display: flex; gap: 8px; margin-top: 8px; }
.user-info {
display: flex; align-items: center; gap: 8px; margin-right: 8px; }
.user-welcome {
font-size: 14px; color: var(--fg-muted); white-space: nowrap; }
.btn-text {
background: none; border: none; color: #333333; font-size: 12px; padding: 4px 8px; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; }
.btn-text: hover {
background-color: #f8f9fa; color: #000000; }
.permission-users-list {
max-height: 200px; overflow-y: auto; }
.permission-user-item {
display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; margin-bottom: 6px; background-color: var(--bg-canvas-inset); border: 1px solid var(--border-default); border-radius: 4px; }
.permission-user-info {
display: flex; align-items: center; gap: 8px; }
.permission-user-name {
font-size: 14px; font-weight: 500; color: var(--fg-default); }
.permission-status {
font-size: 12px; padding: 2px 6px; border-radius: 3px; font-weight: 500; }
.permission-status.granted {
background-color: #d4edda; color: #155724; }
.permission-status.denied {
background-color: #f8d7da; color: #721c24; }
.modal-sm .modal-dialog {
max-width: 400px; }
.login-container {
padding: 8px; }
.login-tabs {
display: flex; border-bottom: 1px solid var(--border-default); margin-bottom: 20px; }
.tab-btn {
flex: 1; padding: 10px 16px; border: none; background: none; color: var(--fg-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s ease; }
.tab-btn.active {
color: var(--fg-default); border-bottom-color: var(--accent-fg); }
.tab-btn: hover {
color: var(--fg-default); background-color: var(--bg-canvas-inset); }
.login-tab-content {
display: none; }
.login-tab-content.active {
display: block; }
.login-container .form-group {
margin-bottom: 16px; }
.login-container .form-group label {
display: block; margin-bottom: 6px; font-weight: 500; color: var(--fg-default); }
.login-container .form-input {
width: 100%; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 6px; background-color: var(--bg-canvas); color: var(--fg-default); font-size: 14px; transition: border-color 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box; }
.login-container .form-input: focus {
outline: none; border-color: var(--accent-fg); box-shadow: 0 0 0 2px rgba(33, 136, 255, 0.1); }
.login-container .form-actions {
margin-top: 20px; }
.btn-block {
width: 100%; }
.btn-danger {
background-color: #dc3545; color: white; }
.btn-danger: hover {
background-color: #c82333; }
.form-help {
margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-default); }
.help-text {
font-size: 12px; color: var(--fg-muted); margin: 0; line-height: 1.4; }
.user-stats h4 {
margin: 0 0 16px 0; color: var(--fg-default); }
.stats-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.stat-item {
display: flex; flex-direction: column; gap: 4px; padding: 12px; background-color: var(--bg-canvas-inset); border-radius: 6px; }
.stat-label {
font-size: 12px; color: var(--fg-muted); font-weight: 500; }
.stat-value {
font-size: 14px; color: var(--fg-default); font-weight: 600; }
.user-actions {
display: flex; gap: 8px; flex-wrap: wrap; }
.user-actions .btn {
flex: 1; min-width: 100px; }
.modal-lg .modal-dialog {
max-width: 800px; }
.rules-tabs {
display: flex; border-bottom: 1px solid var(--border-default); margin-bottom: 20px; }
.rules-tab-content {
display: none; }
.rules-tab-content.active {
display: block; }
.rule-groups-header {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.new-group-form {
background-color: var(--bg-canvas-inset); padding: 20px; border-radius: 8px; margin-bottom: 20px; border: 1px solid var(--border-default); }
.rule-groups-list {
display: flex; flex-direction: column; gap: 12px; }
.rule-group-item {
background-color: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: 8px; padding: 16px; transition: all 0.2s ease; }
.rule-group-item: hover {
border-color: var(--border-accent); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.rule-group-header {
display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.rule-group-info h5 {
margin: 0 0 4px 0; color: var(--fg-default); font-size: 16px; font-weight: 600; }
.rule-group-info .group-meta {
display: flex; gap: 12px; font-size: 12px; color: var(--fg-muted); }
.rule-group-description {
color: var(--fg-muted); font-size: 14px; margin: 8px 0; line-height: 1.4; }
.rule-group-stats {
display: flex; gap: 16px; font-size: 12px; color: var(--fg-muted); margin-top: 8px; }
.rule-group-actions {
display: flex; gap: 8px; }
.group-detail-container {
display: flex; flex-direction: column; gap: 24px; }
.group-info-section {
background-color: var(--bg-canvas-inset); padding: 20px; border-radius: 8px; border: 1px solid var(--border-default); }
.add-rule-section {
background-color: var(--bg-canvas-inset); padding: 20px; border-radius: 8px; border: 1px solid var(--border-default); }
.group-rules-section {
background-color: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: 8px; padding: 20px; }
.group-rules-header {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.group-rule-item {
background-color: var(--bg-canvas-inset); border: 1px solid var(--border-default); border-radius: 6px; padding: 12px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.group-rule-content {
flex: 1; }
.group-rule-text {
font-family: var(--font-mono); font-size: 14px; color: var(--fg-default); margin-bottom: 4px; }
.group-rule-meta {
font-size: 12px; color: var(--fg-muted); }
.group-rule-actions {
display: flex; gap: 8px; }
.batch-apply-result {
background-color: var(--bg-success); border: 1px solid var(--border-success); border-radius: 6px; padding: 12px; margin-top: 16px; color: var(--fg-success); }
.batch-apply-result h5 {
margin: 0 0 8px 0; font-size: 14px; font-weight: 600; }
.batch-apply-result .applied-rules-list {
font-size: 12px; line-height: 1.4; }
.toast-container {
position: fixed; bottom: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column-reverse; gap: 8px; max-width: 400px; pointer-events: none; }
.toast {
display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background-color: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--border-radius); box-shadow: var(--shadow-medium); transform: translateX(100%); opacity: 0; transition: all 0.3s ease; pointer-events: auto; margin-bottom: 4px; }
.toast.show {
transform: translateX(0); opacity: 1; }
.toast.success {
border-left: 4px solid #28a745; }
.toast.error {
border-left: 4px solid #dc3545; }
.toast.warning {
border-left: 4px solid #ffc107; }
.toast.info {
border-left: 4px solid var(--primary-color); }
.toast-close {
display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; background: none; color: var(--fg-muted); font-size: 16px; cursor: pointer; margin-left: 12px; border-radius: 2px; transition: all 0.2s ease; }
.toast-close: hover {
background-color: var(--bg-subtle); color: var(--fg-default); }
.loading {
position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; z-index: 1500; }
.loading-spinner {
width: 32px; height: 32px; border: 3px solid var(--border-default); border-top: 3px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.html-preview h1,
.html-preview h2,
.html-preview h3,
.html-preview h4,
.html-preview h5,
.html-preview h6 {
margin: 16px 0 8px 0; font-weight: 600; color: var(--fg-default); line-height: 1.4; }
.html-preview h1 {
font-size: 24px; border-bottom: 1px solid var(--border-default); padding-bottom: 8px; }
.html-preview h2 {
font-size: 20px; }
.html-preview h3 {
font-size: 18px; }
.html-preview p {
margin: 0 0 12px 0; color: var(--fg-default); line-height: 1.6; }
.html-preview strong {
font-weight: 600; }
.html-preview em {
font-style: italic; }
.html-preview code {
padding: 2px 4px; background-color: var(--bg-canvas-inset); border: 1px solid var(--border-default); border-radius: 3px; font-family: var(--font-mono); font-size: 12px; }
.html-preview pre {
margin: 12px 0; padding: 12px 16px; background-color: var(--bg-canvas-inset); border: 1px solid var(--border-default); border-radius: var(--border-radius); overflow-x: auto; }
.html-preview pre code {
background: none; border: none; padding: 0; font-size: 12px; line-height: 1.5; }
.html-preview blockquote {
margin: 12px 0; padding: 8px 16px; border-left: 4px solid var(--border-default); background-color: var(--bg-canvas-inset); color: var(--fg-muted); }
.html-preview ul,
.html-preview ol {
margin: 12px 0; padding-left: 24px; }
.html-preview li {
margin-bottom: 4px; }
.html-preview table {
width: 100%; border-collapse: collapse; margin: 12px 0; border: 1px solid var(--border-default); }
.html-preview th,
.html-preview td {
padding: 8px 12px; border: 1px solid var(--border-default); text-align: left; }
.html-preview th {
background-color: var(--bg-canvas-inset); font-weight: 600; }
.html-preview a {
color: var(--primary-color); text-decoration: none; }
.html-preview a: hover {
text-decoration: underline; }
.html-preview img {
max-width: 100%; height: auto; }
.html-preview hr {
margin: 16px 0; border: none; border-top: 1px solid var(--border-default); }
.hidden {
display: none !important; }
.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; }
: : -webkit-scrollbar {
width: 8px; height: 8px; }
: : -webkit-scrollbar-track {
background: var(--bg-canvas-inset); }
: : -webkit-scrollbar-thumb {
background: var(--border-default); border-radius: 4px; }
: : -webkit-scrollbar-thumb: hover {
background: var(--fg-muted); }
: : selection {
background-color: rgba(0, 112, 249, 0.2); }
: focus-visible {
outline: 2px solid var(--primary-color); outline-offset: 2px; }