| | :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; |
| | } |
