| :root { |
| |
| --primary-color: #2196f3; |
| --primary-dark: #1976d2; |
| --primary-color-alpha: rgba(33, 150, 243, 0.1); |
| --success-color: #4caf50; |
| --error-color: #f44336; |
| --background-color: #f5f5f5; |
| --card-background: #ffffff; |
| --text-primary: #333333; |
| --text-secondary: #757575; |
| --border-color: #e0e0e0; |
| --disabled-bg: #f5f5f5; |
|
|
| |
| --border-radius: 8px; |
| --spacing: 20px; |
|
|
| |
| --transition-fast: 0.2s; |
| --transition-slow: 0.3s; |
| } |
|
|
| |
| @media (prefers-color-scheme: dark) { |
| :root { |
| --primary-color: #90caf9; |
| --primary-dark: #64b5f6; |
| --background-color: #121212; |
| --card-background: #1e1e1e; |
| --text-primary: #e0e0e0; |
| --text-secondary: #9e9e9e; |
| --border-color: #404040; |
| --disabled-bg: #2d2d2d; |
| color-scheme: dark; |
| } |
| } |
|
|
| |
| html { |
| scroll-behavior: smooth; |
| box-sizing: border-box; |
| } |
|
|
| *, |
| *:before, |
| *:after { |
| box-sizing: inherit; |
| } |
|
|
| body { |
| font-family: |
| system-ui, |
| -apple-system, |
| BlinkMacSystemFont, |
| "Segoe UI", |
| Roboto, |
| sans-serif; |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: var(--spacing); |
| background: var(--background-color); |
| color: var(--text-primary); |
| line-height: 1.6; |
| } |
|
|
| |
| .container { |
| background: var(--card-background); |
| padding: var(--spacing); |
| border-radius: var(--border-radius); |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
| margin-bottom: var(--spacing); |
| transition: transform var(--transition-fast); |
| } |
|
|
| .container:hover { |
| transform: translateY(-2px); |
| } |
|
|
| |
| h1, |
| h2, |
| h3 { |
| color: var(--text-primary); |
| margin-top: 0; |
| line-height: 1.2; |
| } |
|
|
| |
| .form-group { |
| margin-bottom: 20px; |
| } |
|
|
| |
| label { |
| display: block; |
| margin-bottom: 8px; |
| font-weight: 500; |
| color: var(--text-primary); |
| } |
|
|
| input, |
| select, |
| textarea, |
| .form-control { |
| width: 100%; |
| padding: 10px 12px; |
| border: 1px solid var(--border-color); |
| border-radius: 4px; |
| background: var(--card-background); |
| color: var(--text-primary); |
| font-size: 14px; |
| line-height: 1.5; |
| transition: all var(--transition-fast); |
| appearance: none; |
| } |
|
|
| input[type="checkbox"] { |
| width: auto; |
| margin-right: 8px; |
| cursor: pointer; |
| appearance: auto; |
| } |
|
|
| input[type="checkbox"] + label { |
| cursor: pointer; |
| color: var(--text-primary); |
| user-select: none; |
| } |
|
|
| input:hover, |
| select:hover, |
| textarea:hover, |
| .form-control:hover { |
| border-color: var(--primary-color); |
| } |
|
|
| input:focus, |
| select:focus, |
| textarea:focus, |
| .form-control:focus { |
| border-color: var(--primary-color); |
| box-shadow: 0 0 0 2px var(--primary-color-alpha); |
| outline: none; |
| } |
|
|
| |
| input:disabled, |
| select:disabled, |
| textarea:disabled, |
| .form-control:disabled { |
| background-color: var(--disabled-bg); |
| border-color: var(--border-color); |
| cursor: not-allowed; |
| opacity: 0.7; |
| } |
|
|
| |
| input.error, |
| select.error, |
| textarea.error, |
| .form-control.error { |
| border-color: var(--error-color); |
| } |
|
|
| |
| select { |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23757575'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E"); |
| background-repeat: no-repeat; |
| background-position: right 8px center; |
| background-size: 20px; |
| padding-right: 36px; |
| } |
|
|
| |
| textarea { |
| min-height: 150px; |
| resize: vertical; |
| font-family: monospace; |
| line-height: 1.4; |
| } |
|
|
| |
| button { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| min-height: 44px; |
| padding: 8px 24px; |
| border: none; |
| border-radius: var(--border-radius); |
| background: var(--primary-color); |
| color: white; |
| font-size: 16px; |
| font-weight: 500; |
| text-align: center; |
| text-decoration: none; |
| cursor: pointer; |
| transition: all var(--transition-fast); |
| user-select: none; |
| -webkit-tap-highlight-color: transparent; |
| } |
|
|
| |
| button:hover { |
| background: var(--primary-dark); |
| transform: translateY(-1px); |
| box-shadow: 0 4px 12px var(--primary-color-alpha); |
| } |
|
|
| button:active { |
| transform: translateY(1px); |
| } |
|
|
| button:disabled { |
| background: var(--disabled-bg); |
| color: var(--text-secondary); |
| cursor: not-allowed; |
| transform: none; |
| box-shadow: none; |
| } |
|
|
| |
| button.secondary { |
| background: transparent; |
| border: 1px solid var(--primary-color); |
| color: var(--primary-color); |
| } |
|
|
| button.secondary:hover { |
| background: var(--primary-color-alpha); |
| border-color: var(--primary-dark); |
| color: var(--primary-dark); |
| } |
|
|
| button.danger { |
| background: var(--error-color); |
| border: none; |
| } |
|
|
| button.danger:hover { |
| background: #d32f2f; |
| |
| box-shadow: 0 4px 12px rgba(244, 67, 54, 0.2); |
| } |
|
|
| |
| button.active { |
| background: var(--primary-dark); |
| box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); |
| transform: translateY(1px); |
| } |
|
|
| button.secondary.active { |
| background: var(--primary-color); |
| color: white; |
| border-color: var(--primary-dark); |
| } |
|
|
| |
| .button-group { |
| display: flex; |
| gap: 10px; |
| flex-wrap: wrap; |
| justify-content: flex-end; |
| align-items: flex-end; |
| margin: 0; |
| } |
|
|
| |
| .button-group button { |
| height: 38px; |
| min-width: 100px; |
| white-space: nowrap; |
| } |
|
|
| .button-group button .context-menu-shortcut { |
| margin-left: 5px; |
| opacity: 0.7; |
| font-size: 12px; |
| } |
|
|
| |
| .message-container { |
| position: fixed; |
| top: 20px; |
| left: 50%; |
| transform: translateX(-50%); |
| z-index: 9999; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| pointer-events: none; |
| |
| } |
|
|
| |
| .message { |
| padding: 12px 20px; |
| border-radius: 4px; |
| background: var(--card-background); |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
| margin-bottom: 10px; |
| pointer-events: auto; |
| |
| min-width: 300px; |
| max-width: 500px; |
| display: flex; |
| align-items: center; |
| transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); |
| animation: messageIn 0.3s ease-in-out; |
| } |
|
|
| .message.success { |
| background: #f0f9eb; |
| border: 1px solid #e1f3d8; |
| } |
|
|
| .message.error { |
| background: #fef0f0; |
| border: 1px solid #fde2e2; |
| } |
|
|
| @keyframes messageIn { |
| 0% { |
| opacity: 0; |
| transform: translateY(-20px); |
| } |
|
|
| 100% { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| @keyframes messageOut { |
| 0% { |
| opacity: 1; |
| transform: translateY(0); |
| } |
|
|
| 100% { |
| opacity: 0; |
| transform: translateY(-20px); |
| } |
| } |
|
|
| |
| @media (prefers-color-scheme: dark) { |
| .message { |
| background: #2c2c2c; |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); |
| } |
|
|
| .message.success { |
| background: #294929; |
| border-color: #1c321c; |
| } |
|
|
| .message.error { |
| background: #4d2c2c; |
| border-color: #321c1c; |
| } |
| } |
|
|
| |
| table { |
| width: 100%; |
| border-collapse: collapse; |
| margin-top: var(--spacing); |
| background: var(--card-background); |
| border-radius: var(--border-radius); |
| overflow: hidden; |
| } |
|
|
| th, |
| td { |
| padding: 12px; |
| text-align: left; |
| border-bottom: 1px solid var(--text-secondary); |
| } |
|
|
| th { |
| background: var(--primary-color); |
| color: white; |
| font-weight: 500; |
| } |
|
|
| tr:nth-child(even) { |
| background: rgba(0, 0, 0, 0.02); |
| } |
|
|
| tr:hover { |
| background: rgba(0, 0, 0, 0.04); |
| } |
|
|
| |
| .visually-hidden { |
| position: absolute; |
| width: 1px; |
| height: 1px; |
| padding: 0; |
| margin: -1px; |
| overflow: hidden; |
| clip: rect(0, 0, 0, 0); |
| border: 0; |
| } |
|
|
| .text-center { |
| text-align: center; |
| } |
|
|
| .help-text { |
| margin-top: 4px; |
| font-size: 14px; |
| color: var(--text-secondary); |
| } |
|
|
| .error-text { |
| color: var(--error-color); |
| } |
|
|
| .mt-0 { |
| margin-top: 0; |
| } |
|
|
| .mb-0 { |
| margin-bottom: 0; |
| } |
|
|
| |
| .toast-container { |
| position: fixed; |
| bottom: 20px; |
| right: 20px; |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| z-index: 1000; |
| max-width: 350px; |
| max-height: 80vh; |
| overflow-y: hidden; |
| padding-top: 10px; |
| padding-bottom: 10px; |
| padding-right: 5px; |
| } |
|
|
| .toast { |
| background: var(--card-background); |
| color: var(--text-primary); |
| padding: 10px 16px; |
| border-radius: var(--border-radius); |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
| opacity: 0; |
| transform: translateY(20px); |
| transition: |
| opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), |
| transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); |
| position: relative; |
| min-width: 200px; |
| margin-left: auto; |
| will-change: transform, opacity; |
| pointer-events: auto; |
| } |
|
|
| .toast.info { |
| border-left: 4px solid #2196f3; |
| } |
|
|
| .toast.error { |
| background: #f44336; |
| color: white; |
| } |
|
|
| .toast.success { |
| background: #4caf50; |
| color: white; |
| } |
|
|
| .toast.warning { |
| background: #ff9800; |
| color: white; |
| } |
|
|
| .toast.show { |
| opacity: 1; |
| transform: translateY(0); |
| } |
|
|
| |
| @media (max-width: 768px) { |
| :root { |
| --spacing: 16px; |
| } |
|
|
| body { |
| padding: 10px; |
| } |
|
|
| .button-group { |
| flex-direction: column; |
| } |
|
|
| button { |
| width: 100%; |
| padding: 12px 20px; |
| } |
|
|
| input, |
| select, |
| textarea, |
| .form-control { |
| font-size: 16px; |
| padding: 14px 16px; |
| } |
|
|
| table { |
| display: block; |
| overflow-x: auto; |
| -webkit-overflow-scrolling: touch; |
| } |
|
|
| th, |
| td { |
| white-space: nowrap; |
| } |
| } |
|
|
