| :root { |
| --bg-primary: #fafafa; |
| --bg-secondary: #f5f5f5; |
| --bg-tertiary: #e5e5e5; |
| --bg-code: #1c1c1c; |
| --text-primary: #171717; |
| --text-secondary: #525252; |
| --text-tertiary: #a3a3a3; |
| --accent: #f97316; |
| --accent-hover: #ea580c; |
| --accent-light: #fff7ed; |
| --border: #d4d4d4; |
| --success: #22c55e; |
| --warning: #f59e0b; |
| --error: #ef4444; |
| --shadow: 0 1px 3px rgb(0 0 0 / 0.1); |
| --radius: 4px; |
| --radius-lg: 8px; |
| --font-mono: 'JetBrains Mono', monospace; |
| } |
|
|
| [data-theme="dark"] { |
| --bg-primary: #111111; |
| --bg-secondary: #181818; |
| --bg-tertiary: #222222; |
| --bg-code: #111111; |
| --text-primary: #e5e5e5; |
| --text-secondary: #999999; |
| --text-tertiary: #555555; |
| --accent: #fb923c; |
| --accent-hover: #fdba74; |
| --accent-light: #2d1a0a; |
| --border: #2d2d2d; |
| } |
|
|
| *, |
| *::before, |
| *::after { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| ::-webkit-scrollbar { |
| width: 10px; |
| height: 10px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: var(--bg-secondary); |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: var(--border); |
| border-radius: 5px; |
| border: 2px solid var(--bg-secondary); |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: var(--accent); |
| } |
|
|
| * { |
| scrollbar-width: thin; |
| scrollbar-color: var(--border) var(--bg-secondary); |
| } |
|
|
| html { |
| font-size: 16px; |
| } |
|
|
| body { |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; |
| background: var(--bg-primary); |
| color: var(--text-primary); |
| line-height: 1.5; |
| min-height: 100vh; |
| } |
|
|
| a { |
| color: var(--accent); |
| text-decoration: none; |
| } |
|
|
| a:hover { |
| color: var(--accent-hover); |
| } |
|
|
| .container { |
| max-width: 1400px; |
| margin: 0 auto; |
| padding: 0 12px; |
| } |
|
|
| .navbar { |
| background: var(--bg-secondary); |
| border-bottom: 1px solid var(--border); |
| padding: 8px 0; |
| position: sticky; |
| top: 0; |
| z-index: 100; |
| } |
|
|
| .navbar .container { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| } |
|
|
| .logo { |
| font-size: 1.25rem; |
| font-weight: 700; |
| color: var(--accent); |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| } |
|
|
| .logo svg { |
| width: 22px; |
| height: 22px; |
| } |
|
|
| .nav-links { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| } |
|
|
| .btn { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 4px; |
| padding: 6px 12px; |
| font-size: 13px; |
| font-weight: 500; |
| border-radius: var(--radius); |
| border: none; |
| cursor: pointer; |
| transition: all 0.15s; |
| text-decoration: none; |
| } |
|
|
| .btn-primary { |
| background: var(--accent); |
| color: #fff; |
| } |
|
|
| .btn-primary:hover { |
| background: var(--accent-hover); |
| color: #fff; |
| } |
|
|
| .btn-secondary { |
| background: var(--bg-tertiary); |
| color: var(--text-primary); |
| border: 1px solid var(--border); |
| } |
|
|
| .btn-secondary:hover { |
| background: var(--border); |
| } |
|
|
| .btn-ghost { |
| background: transparent; |
| color: var(--text-secondary); |
| } |
|
|
| .btn-ghost:hover { |
| background: var(--bg-tertiary); |
| } |
|
|
| .btn-danger { |
| background: var(--error); |
| color: #fff; |
| } |
|
|
| .btn-sm { |
| padding: 4px 8px; |
| font-size: 12px; |
| } |
|
|
| .btn-lg { |
| padding: 10px 20px; |
| font-size: 14px; |
| } |
|
|
| .form-group { |
| margin-bottom: 12px; |
| } |
|
|
| .form-label { |
| display: block; |
| font-size: 13px; |
| font-weight: 500; |
| margin-bottom: 4px; |
| color: var(--text-secondary); |
| } |
|
|
| .form-input, |
| .form-textarea, |
| .form-select { |
| width: 100%; |
| padding: 8px 10px; |
| font-size: 14px; |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| background: var(--bg-primary); |
| color: var(--text-primary); |
| } |
|
|
| .form-input:focus, |
| .form-textarea:focus, |
| .form-select:focus { |
| outline: none; |
| border-color: var(--accent); |
| } |
|
|
| .form-textarea { |
| font-family: var(--font-mono); |
| font-size: 13px; |
| min-height: 60vh; |
| resize: vertical; |
| } |
|
|
| .form-row { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); |
| gap: 12px; |
| } |
|
|
| .form-checkbox { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| cursor: pointer; |
| } |
|
|
| .form-checkbox input[type="checkbox"] { |
| -webkit-appearance: none; |
| appearance: none; |
| width: 18px; |
| height: 18px; |
| border: 2px solid var(--border); |
| border-radius: 4px; |
| background: var(--bg-primary); |
| cursor: pointer; |
| position: relative; |
| } |
|
|
| .form-checkbox input:checked { |
| background: var(--accent); |
| border-color: var(--accent); |
| } |
|
|
| .form-checkbox input:checked::after { |
| content: ''; |
| position: absolute; |
| top: 2px; |
| left: 5px; |
| width: 4px; |
| height: 8px; |
| border: solid #fff; |
| border-width: 0 2px 2px 0; |
| transform: rotate(45deg); |
| } |
|
|
| .form-checkbox span { |
| font-size: 14px; |
| } |
|
|
| .card { |
| background: var(--bg-secondary); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-lg); |
| padding: 16px; |
| } |
|
|
| .card-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| margin-bottom: 12px; |
| padding-bottom: 12px; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .code-container { |
| background: var(--bg-secondary); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-lg); |
| overflow: hidden; |
| } |
|
|
| [data-theme="dark"] .code-container { |
| background: var(--bg-code); |
| } |
|
|
| .code-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| flex-wrap: wrap; |
| gap: 8px; |
| padding: 8px 12px; |
| background: var(--bg-tertiary); |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| [data-theme="dark"] .code-header { |
| background: rgba(0, 0, 0, 0.3); |
| border-color: var(--border); |
| } |
|
|
| .code-title { |
| font-size: 13px; |
| font-weight: 500; |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| } |
|
|
| .code-meta { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| font-size: 12px; |
| color: var(--text-tertiary); |
| } |
|
|
| .code-actions { |
| display: flex; |
| gap: 6px; |
| padding: 6px 12px; |
| background: var(--bg-tertiary); |
| flex-wrap: wrap; |
| } |
|
|
| [data-theme="dark"] .code-actions { |
| background: rgba(0, 0, 0, 0.2); |
| } |
|
|
| .code-body { |
| display: flex; |
| overflow-x: auto; |
| } |
|
|
| .code-body.wrap-text { |
| overflow-x: hidden; |
| } |
|
|
| .code-body.wrap-text .code-content { |
| overflow-x: hidden; |
| overflow-y: auto; |
| } |
|
|
| .code-body.wrap-text .code-content pre, |
| .code-body.wrap-text .code-content code { |
| white-space: pre-wrap !important; |
| word-wrap: break-word !important; |
| overflow-wrap: break-word !important; |
| } |
|
|
| .line-numbers { |
| flex-shrink: 0; |
| padding: 10px 0; |
| text-align: right; |
| background: var(--bg-tertiary); |
| border-right: 1px solid var(--border); |
| user-select: none; |
| } |
|
|
| [data-theme="dark"] .line-numbers { |
| background: rgba(0, 0, 0, 0.2); |
| } |
|
|
| .line-numbers span { |
| display: block; |
| padding: 0 10px; |
| font-family: var(--font-mono); |
| font-size: 12px; |
| line-height: 1.5; |
| color: var(--text-tertiary); |
| } |
|
|
| .code-content { |
| flex: 1; |
| padding: 10px 12px; |
| overflow-x: auto; |
| background: var(--bg-primary); |
| } |
|
|
| [data-theme="dark"] .code-content { |
| background: transparent; |
| } |
|
|
| .code-content pre { |
| margin: 0; |
| font-family: var(--font-mono); |
| font-size: 13px; |
| line-height: 1.5; |
| color: var(--text-primary); |
| white-space: pre; |
| } |
|
|
| [data-theme="dark"] .code-content pre { |
| color: #c9d1d9; |
| } |
|
|
| .paste-list { |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| } |
|
|
| .paste-item { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| padding: 10px; |
| background: var(--bg-secondary); |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| } |
|
|
| .paste-item:hover { |
| border-color: var(--accent); |
| } |
|
|
| .paste-icon { |
| width: 36px; |
| height: 36px; |
| border-radius: var(--radius); |
| background: var(--accent-light); |
| color: var(--accent); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .paste-info { |
| flex: 1; |
| min-width: 0; |
| } |
|
|
| .paste-name { |
| font-weight: 500; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
|
|
| .paste-details { |
| font-size: 12px; |
| color: var(--text-tertiary); |
| display: flex; |
| flex-wrap: wrap; |
| gap: 6px; |
| } |
|
|
| .paste-badge { |
| padding: 2px 6px; |
| font-size: 11px; |
| font-weight: 500; |
| border-radius: 99px; |
| background: var(--bg-tertiary); |
| } |
|
|
| .paste-badge.public { |
| background: #dcfce7; |
| color: #166534; |
| } |
|
|
| [data-theme="dark"] .paste-badge.public { |
| background: #14532d; |
| color: #86efac; |
| } |
|
|
| .paste-badge.private { |
| background: #fef3c7; |
| color: #92400e; |
| } |
|
|
| [data-theme="dark"] .paste-badge.private { |
| background: #78350f; |
| color: #fcd34d; |
| } |
|
|
| .stats-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); |
| gap: 10px; |
| margin-bottom: 16px; |
| } |
|
|
| .stat-card { |
| background: var(--bg-tertiary); |
| border-radius: var(--radius); |
| padding: 12px; |
| text-align: center; |
| } |
|
|
| .stat-value { |
| font-size: 1.25rem; |
| font-weight: 700; |
| color: var(--accent); |
| } |
|
|
| .stat-label { |
| font-size: 12px; |
| color: var(--text-tertiary); |
| } |
|
|
| .theme-toggle { |
| background: var(--bg-tertiary); |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| padding: 6px; |
| cursor: pointer; |
| display: flex; |
| } |
|
|
| .theme-toggle svg { |
| width: 18px; |
| height: 18px; |
| color: var(--text-secondary); |
| } |
|
|
| .theme-toggle .sun { |
| display: none; |
| } |
|
|
| [data-theme="dark"] .theme-toggle .sun { |
| display: block; |
| } |
|
|
| [data-theme="dark"] .theme-toggle .moon { |
| display: none; |
| } |
|
|
| .toast-container { |
| position: fixed; |
| bottom: 16px; |
| right: 16px; |
| z-index: 1000; |
| display: flex; |
| flex-direction: column; |
| gap: 6px; |
| } |
|
|
| .toast { |
| background: var(--bg-secondary); |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| padding: 10px 14px; |
| box-shadow: var(--shadow); |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| animation: slideIn 0.3s; |
| } |
|
|
| .toast.success { |
| border-left: 3px solid var(--success); |
| } |
|
|
| .toast.error { |
| border-left: 3px solid var(--error); |
| } |
|
|
| @keyframes slideIn { |
| from { |
| opacity: 0; |
| transform: translateX(100%); |
| } |
|
|
| to { |
| opacity: 1; |
| transform: translateX(0); |
| } |
| } |
|
|
| .page { |
| padding: 16px 0; |
| } |
|
|
| .page-header { |
| margin-bottom: 16px; |
| } |
|
|
| .page-title { |
| font-size: 1.25rem; |
| font-weight: 600; |
| } |
|
|
| .page-subtitle { |
| color: var(--text-secondary); |
| font-size: 14px; |
| } |
|
|
| .auth-page { |
| min-height: calc(100vh - 50px); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| padding: 20px; |
| } |
|
|
| .auth-card { |
| width: 100%; |
| max-width: 360px; |
| } |
|
|
| .auth-header { |
| text-align: center; |
| margin-bottom: 20px; |
| } |
|
|
| .auth-footer { |
| text-align: center; |
| margin-top: 16px; |
| font-size: 13px; |
| color: var(--text-secondary); |
| } |
|
|
| .error-page { |
| min-height: calc(100vh - 50px); |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| text-align: center; |
| padding: 20px; |
| } |
|
|
| .error-code { |
| font-size: 4rem; |
| font-weight: 700; |
| color: var(--accent); |
| line-height: 1; |
| } |
|
|
| .error-message { |
| font-size: 1rem; |
| color: var(--text-secondary); |
| margin: 12px 0 20px; |
| } |
|
|
| @media (max-width: 768px) { |
| .container { |
| padding: 0 8px; |
| } |
|
|
| .code-header { |
| flex-direction: column; |
| align-items: flex-start; |
| } |
|
|
| .form-row { |
| grid-template-columns: 1fr; |
| } |
|
|
| .paste-item { |
| flex-direction: column; |
| align-items: flex-start; |
| } |
| } |
|
|
| .hidden { |
| display: none !important; |
| } |
|
|
| .flex { |
| display: flex; |
| } |
|
|
| .gap-2 { |
| gap: 8px; |
| } |
|
|
| .gap-3 { |
| gap: 12px; |
| } |
|
|
| .mt-2 { |
| margin-top: 8px; |
| } |
|
|
| .mt-3 { |
| margin-top: 12px; |
| } |
|
|
| .mt-4 { |
| margin-top: 16px; |
| } |
|
|
| .text-center { |
| text-align: center; |
| } |
|
|
| .text-sm { |
| font-size: 13px; |
| } |
|
|
| .text-muted { |
| color: var(--text-secondary); |
| } |
|
|
| .font-mono { |
| font-family: var(--font-mono); |
| } |
|
|
| code[class*="language-"], |
| pre[class*="language-"] { |
| font-family: var(--font-mono); |
| font-size: 13px; |
| line-height: 1.5; |
| background: none; |
| color: var(--text-primary); |
| } |
|
|
| .token.comment, |
| .token.prolog, |
| .token.cdata { |
| color: #6b7280; |
| } |
|
|
| .token.punctuation { |
| color: #475569; |
| } |
|
|
| .token.property, |
| .token.tag, |
| .token.number, |
| .token.constant, |
| .token.symbol { |
| color: #d946ef; |
| } |
|
|
| .token.selector, |
| .token.string, |
| .token.char, |
| .token.builtin { |
| color: #16a34a; |
| } |
|
|
| .token.operator, |
| .token.url { |
| color: #0891b2; |
| } |
|
|
| .token.keyword { |
| color: #7c3aed; |
| } |
|
|
| .token.function, |
| .token.class-name { |
| color: #ca8a04; |
| } |
|
|
| .token.regex, |
| .token.variable { |
| color: #ea580c; |
| } |
|
|
| [data-theme="dark"] code[class*="language-"], |
| [data-theme="dark"] pre[class*="language-"] { |
| color: #c9d1d9; |
| } |
|
|
| [data-theme="dark"] .token.punctuation { |
| color: #8b949e; |
| } |
|
|
| [data-theme="dark"] .token.property, |
| [data-theme="dark"] .token.tag, |
| [data-theme="dark"] .token.number, |
| [data-theme="dark"] .token.constant { |
| color: #79c0ff; |
| } |
|
|
| [data-theme="dark"] .token.selector, |
| [data-theme="dark"] .token.string, |
| [data-theme="dark"] .token.char { |
| color: #a5d6ff; |
| } |
|
|
| [data-theme="dark"] .token.operator, |
| [data-theme="dark"] .token.url { |
| color: #ffa657; |
| } |
|
|
| [data-theme="dark"] .token.keyword { |
| color: #ff7b72; |
| } |
|
|
| [data-theme="dark"] .token.function, |
| [data-theme="dark"] .token.class-name { |
| color: #d2a8ff; |
| } |
|
|
| [data-theme="dark"] .token.regex, |
| [data-theme="dark"] .token.variable { |
| color: #7ee787; |
| } |
