| | @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap'); |
| |
|
| | :root { |
| | --bg: #ffffff; |
| | --text: #1a1a2e; |
| | --text-secondary: #64748b; |
| | --header-bg: #f8fafc; |
| | --border: #e2e8f0; |
| | --accent: #ff9d00; |
| | --accent-hover: #e68a00; |
| | --accent-light: rgba(255, 157, 0, 0.08); |
| | --accent-border: rgba(255, 157, 0, 0.25); |
| | --panel-bg: #ffffff; |
| | --folder-color: #ff9d00; |
| | --file-color: #94a3b8; |
| | --line-num: #cbd5e1; |
| | --tree-line: #94a3b8; |
| | --btn-bg: #f1f5f9; |
| | --btn-border: #e2e8f0; |
| | --btn-hover: #e2e8f0; |
| | --shadow: rgba(0, 0, 0, 0.06); |
| | --shadow-lg: rgba(0, 0, 0, 0.1); |
| | --model-color: #f59e0b; |
| | --dataset-color: #10b981; |
| | --space-color: #6366f1; |
| | --tag-model: rgba(245, 158, 11, 0.1); |
| | --tag-dataset: rgba(16, 185, 129, 0.1); |
| | --tag-space: rgba(99, 102, 241, 0.1); |
| | --mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace; |
| | --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; |
| | --radius: 10px; |
| | --radius-sm: 6px; |
| | } |
| |
|
| | [data-theme="dark"] { |
| | --bg: #0f172a; |
| | --text: #e2e8f0; |
| | --text-secondary: #94a3b8; |
| | --header-bg: #1e293b; |
| | --border: #334155; |
| | --accent: #fbbf24; |
| | --accent-hover: #f59e0b; |
| | --accent-light: rgba(251, 191, 36, 0.08); |
| | --accent-border: rgba(251, 191, 36, 0.2); |
| | --panel-bg: #1e293b; |
| | --folder-color: #fbbf24; |
| | --file-color: #64748b; |
| | --line-num: #475569; |
| | --tree-line: #475569; |
| | --btn-bg: #1e293b; |
| | --btn-border: #334155; |
| | --btn-hover: #334155; |
| | --shadow: rgba(0, 0, 0, 0.3); |
| | --shadow-lg: rgba(0, 0, 0, 0.5); |
| | --tag-model: rgba(251, 191, 36, 0.1); |
| | --tag-dataset: rgba(16, 185, 129, 0.1); |
| | --tag-space: rgba(99, 102, 241, 0.12); |
| | } |
| |
|
| | * { box-sizing: border-box; margin: 0; padding: 0; } |
| |
|
| | body { |
| | font-family: var(--sans); |
| | background: var(--bg); |
| | color: var(--text); |
| | transition: background 0.3s ease, color 0.3s ease; |
| | -webkit-font-smoothing: antialiased; |
| | -moz-osx-font-smoothing: grayscale; |
| | text-rendering: optimizeLegibility; |
| | } |
| |
|
| | button, input, select { font-family: inherit; } |
| | a { text-decoration: none; color: inherit; } |
| |
|
| | .app-container { |
| | max-width: 1000px; |
| | margin: 0 auto; |
| | padding: 24px 20px 40px; |
| | min-height: 100vh; |
| | display: flex; |
| | flex-direction: column; |
| | } |
| |
|
| | |
| | header { |
| | display: flex; |
| | justify-content: space-between; |
| | align-items: center; |
| | margin-bottom: 32px; |
| | padding-top: 8px; |
| | } |
| |
|
| | .brand a { |
| | display: flex; |
| | align-items: center; |
| | gap: 12px; |
| | font-size: 1.4rem; |
| | font-weight: 700; |
| | letter-spacing: -0.02em; |
| | } |
| |
|
| | .brand-icon { |
| | width: 38px; |
| | height: 38px; |
| | background: linear-gradient(135deg, #ff9d00 0%, #ffb340 100%); |
| | border-radius: var(--radius); |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | color: white; |
| | font-size: 1.1rem; |
| | box-shadow: 0 2px 8px rgba(255, 157, 0, 0.3); |
| | } |
| |
|
| | .header-actions { |
| | display: flex; |
| | gap: 12px; |
| | align-items: center; |
| | } |
| |
|
| | .icon-btn { |
| | background: var(--btn-bg); |
| | border: 1px solid var(--btn-border); |
| | font-size: 1.1rem; |
| | color: var(--text); |
| | width: 38px; |
| | height: 38px; |
| | cursor: pointer; |
| | border-radius: var(--radius); |
| | transition: all 0.2s; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | } |
| |
|
| | .icon-btn:hover { background: var(--btn-hover); border-color: var(--accent); } |
| |
|
| | .text-btn { |
| | background: var(--btn-bg); |
| | border: 1px solid var(--btn-border); |
| | font-size: 0.82rem; |
| | color: var(--text); |
| | cursor: pointer; |
| | font-weight: 600; |
| | display: flex; |
| | align-items: center; |
| | gap: 6px; |
| | padding: 8px 14px; |
| | border-radius: var(--radius); |
| | transition: all 0.2s; |
| | letter-spacing: -0.01em; |
| | } |
| |
|
| | .text-btn:hover { border-color: var(--accent); color: var(--accent); } |
| |
|
| | .sun-icon { display: none !important; } |
| | [data-theme="dark"] .sun-icon { display: inline-block !important; color: #fbbf24; } |
| | [data-theme="dark"] .moon-icon { display: none !important; } |
| | [data-theme="light"] .moon-icon { display: inline-block !important; color: #64748b; } |
| |
|
| | |
| | .token-panel { |
| | background: var(--header-bg); |
| | border: 1px solid var(--border); |
| | padding: 16px; |
| | border-radius: var(--radius); |
| | margin-bottom: 20px; |
| | animation: slideDown 0.25s ease-out; |
| | } |
| |
|
| | @keyframes slideDown { |
| | from { opacity: 0; transform: translateY(-8px); } |
| | to { opacity: 1; transform: translateY(0); } |
| | } |
| |
|
| | .token-inner { |
| | display: flex; |
| | gap: 10px; |
| | align-items: center; |
| | } |
| |
|
| | .token-inner i { color: var(--accent); font-size: 0.9rem; } |
| |
|
| | .token-inner input { |
| | background: var(--bg); |
| | border: 1px solid var(--border); |
| | padding: 9px 14px; |
| | border-radius: var(--radius-sm); |
| | flex: 1; |
| | color: var(--text); |
| | font-family: var(--mono); |
| | font-size: 0.82rem; |
| | } |
| |
|
| | .token-inner input:focus { |
| | outline: none; |
| | border-color: var(--accent); |
| | box-shadow: 0 0 0 3px var(--accent-border); |
| | } |
| |
|
| | .token-inner button { |
| | background: var(--accent); |
| | color: white; |
| | border: none; |
| | padding: 9px 18px; |
| | border-radius: var(--radius-sm); |
| | cursor: pointer; |
| | font-weight: 600; |
| | font-size: 0.82rem; |
| | transition: background 0.2s; |
| | } |
| |
|
| | .token-inner button:hover { background: var(--accent-hover); } |
| |
|
| | .token-warning { |
| | font-size: 0.75rem; |
| | color: var(--text-secondary); |
| | margin: 10px 0 0 0; |
| | display: flex; |
| | align-items: center; |
| | gap: 6px; |
| | } |
| |
|
| | .token-warning i { color: #f59e0b; font-size: 0.75rem; } |
| |
|
| | |
| | .search-section { |
| | display: flex; |
| | gap: 10px; |
| | flex-wrap: wrap; |
| | margin-bottom: 20px; |
| | } |
| |
|
| | .type-selector { |
| | display: flex; |
| | border: 1px solid var(--border); |
| | border-radius: var(--radius); |
| | overflow: hidden; |
| | height: 44px; |
| | } |
| |
|
| | .type-btn { |
| | background: var(--btn-bg); |
| | border: none; |
| | border-right: 1px solid var(--border); |
| | padding: 0 16px; |
| | cursor: pointer; |
| | font-size: 0.82rem; |
| | font-weight: 600; |
| | color: var(--text-secondary); |
| | display: flex; |
| | align-items: center; |
| | gap: 7px; |
| | transition: all 0.2s; |
| | white-space: nowrap; |
| | letter-spacing: -0.01em; |
| | } |
| |
|
| | .type-btn:last-child { border-right: none; } |
| | .type-btn:hover { background: var(--btn-hover); color: var(--text); } |
| |
|
| | .type-btn.active-model { |
| | background: var(--tag-model); |
| | color: var(--model-color); |
| | } |
| |
|
| | .type-btn.active-dataset { |
| | background: var(--tag-dataset); |
| | color: var(--dataset-color); |
| | } |
| |
|
| | .type-btn.active-space { |
| | background: var(--tag-space); |
| | color: var(--space-color); |
| | } |
| |
|
| | .input-group { |
| | background: var(--header-bg); |
| | border: 1px solid var(--border); |
| | border-radius: var(--radius); |
| | display: flex; |
| | align-items: center; |
| | padding: 0 14px; |
| | height: 44px; |
| | flex: 1; |
| | transition: border-color 0.2s, box-shadow 0.2s; |
| | } |
| |
|
| | .input-group:focus-within { |
| | border-color: var(--accent); |
| | box-shadow: 0 0 0 3px var(--accent-border); |
| | } |
| |
|
| | .prefix { |
| | color: var(--text-secondary); |
| | font-size: 0.8rem; |
| | margin-right: 4px; |
| | white-space: nowrap; |
| | font-family: var(--mono); |
| | font-weight: 500; |
| | } |
| |
|
| | input { |
| | background: transparent; |
| | border: none; |
| | color: var(--text); |
| | width: 100%; |
| | outline: none; |
| | font-size: 0.88rem; |
| | font-family: var(--mono); |
| | font-weight: 500; |
| | } |
| |
|
| | .branch-input { max-width: 150px; } |
| |
|
| | .primary-btn { |
| | background: var(--accent); |
| | color: white; |
| | border: none; |
| | padding: 0 28px; |
| | border-radius: var(--radius); |
| | font-weight: 700; |
| | cursor: pointer; |
| | height: 44px; |
| | display: flex; |
| | align-items: center; |
| | gap: 10px; |
| | font-size: 0.85rem; |
| | transition: all 0.2s; |
| | letter-spacing: -0.01em; |
| | box-shadow: 0 2px 6px rgba(255, 157, 0, 0.2); |
| | } |
| |
|
| | .primary-btn:hover { |
| | background: var(--accent-hover); |
| | box-shadow: 0 4px 12px rgba(255, 157, 0, 0.3); |
| | transform: translateY(-1px); |
| | } |
| |
|
| | .primary-btn:disabled { opacity: 0.6; cursor: wait; transform: none; } |
| |
|
| | |
| | #statusMsg { |
| | padding: 12px 16px; |
| | margin-bottom: 16px; |
| | font-size: 0.85rem; |
| | text-align: center; |
| | font-weight: 500; |
| | border-radius: var(--radius); |
| | letter-spacing: -0.01em; |
| | } |
| |
|
| | .error { |
| | color: #ef4444; |
| | background: rgba(239, 68, 68, 0.08); |
| | border: 1px solid rgba(239, 68, 68, 0.15); |
| | } |
| |
|
| | .loading { |
| | color: var(--accent); |
| | background: var(--accent-light); |
| | border: 1px solid var(--accent-border); |
| | } |
| |
|
| | |
| | .empty-state { text-align: center; } |
| |
|
| | .empty-state h3 { |
| | font-weight: 600; |
| | margin-top: 16px; |
| | letter-spacing: -0.02em; |
| | } |
| |
|
| | .empty-state p { |
| | color: var(--text-secondary); |
| | margin-bottom: 24px; |
| | font-size: 0.92rem; |
| | } |
| |
|
| | .tag-cloud { |
| | display: flex; |
| | justify-content: center; |
| | gap: 10px; |
| | flex-wrap: wrap; |
| | max-width: 850px; |
| | margin: 0 auto; |
| | } |
| |
|
| | .repo-tag { |
| | background: var(--btn-bg); |
| | border: 1px solid var(--border); |
| | color: var(--text); |
| | padding: 8px 16px; |
| | border-radius: 24px; |
| | cursor: pointer; |
| | font-size: 0.8rem; |
| | font-family: var(--mono); |
| | font-weight: 500; |
| | transition: all 0.2s; |
| | display: flex; |
| | align-items: center; |
| | gap: 8px; |
| | } |
| |
|
| | .repo-tag:hover { |
| | border-color: var(--accent); |
| | transform: translateY(-2px); |
| | box-shadow: 0 4px 12px var(--shadow); |
| | } |
| |
|
| | .tag-type { |
| | font-size: 0.65rem; |
| | padding: 2px 7px; |
| | border-radius: 8px; |
| | font-weight: 700; |
| | text-transform: uppercase; |
| | letter-spacing: 0.5px; |
| | } |
| |
|
| | .tag-type.model { background: var(--tag-model); color: var(--model-color); } |
| | .tag-type.dataset { background: var(--tag-dataset); color: var(--dataset-color); } |
| | .tag-type.space { background: var(--tag-space); color: var(--space-color); } |
| |
|
| | .homepage-section { margin-bottom: 36px; } |
| |
|
| | .homepage-section h3 { |
| | font-size: 0.85rem; |
| | color: var(--text-secondary); |
| | text-transform: uppercase; |
| | letter-spacing: 1.5px; |
| | font-weight: 600; |
| | margin-bottom: 16px; |
| | } |
| |
|
| | |
| | .repo-info-card { |
| | background: var(--header-bg); |
| | border: 1px solid var(--border); |
| | border-radius: var(--radius); |
| | padding: 14px 20px; |
| | margin-bottom: 12px; |
| | display: none; |
| | animation: slideDown 0.25s ease-out; |
| | } |
| |
|
| | .repo-info-card.visible { display: block; } |
| |
|
| | .repo-info-header { |
| | display: flex; |
| | justify-content: space-between; |
| | align-items: center; |
| | flex-wrap: wrap; |
| | gap: 10px; |
| | } |
| |
|
| | .repo-info-left { |
| | display: flex; |
| | align-items: center; |
| | gap: 12px; |
| | } |
| |
|
| | .repo-type-badge { |
| | font-size: 0.68rem; |
| | padding: 4px 10px; |
| | border-radius: 8px; |
| | font-weight: 700; |
| | text-transform: uppercase; |
| | letter-spacing: 0.5px; |
| | } |
| |
|
| | .repo-type-badge.model { background: var(--tag-model); color: var(--model-color); } |
| | .repo-type-badge.dataset { background: var(--tag-dataset); color: var(--dataset-color); } |
| | .repo-type-badge.space { background: var(--tag-space); color: var(--space-color); } |
| |
|
| | .repo-info-name { |
| | font-size: 1rem; |
| | font-weight: 600; |
| | font-family: var(--mono); |
| | letter-spacing: -0.02em; |
| | } |
| |
|
| | .repo-info-name a { color: var(--accent); } |
| | .repo-info-name a:hover { text-decoration: underline; } |
| |
|
| | .repo-info-stats { |
| | display: flex; |
| | gap: 18px; |
| | font-size: 0.8rem; |
| | color: var(--text-secondary); |
| | font-weight: 500; |
| | } |
| |
|
| | .repo-info-stats span { |
| | display: flex; |
| | align-items: center; |
| | gap: 5px; |
| | } |
| |
|
| | |
| | .tree-wrapper { |
| | border: 1px solid var(--border); |
| | border-radius: var(--radius); |
| | display: flex; |
| | flex-direction: column; |
| | background: var(--panel-bg); |
| | box-shadow: 0 4px 16px var(--shadow); |
| | overflow: visible; |
| | position: relative; |
| | z-index: 10; |
| | } |
| |
|
| | .toolbar { |
| | background: var(--header-bg); |
| | padding: 10px 16px; |
| | border-bottom: 1px solid var(--border); |
| | display: flex; |
| | justify-content: space-between; |
| | align-items: center; |
| | border-radius: var(--radius) var(--radius) 0 0; |
| | } |
| |
|
| | .tools-group { |
| | display: flex; |
| | gap: 8px; |
| | } |
| |
|
| | .tool-btn { |
| | background: var(--btn-bg); |
| | border: 1px solid var(--btn-border); |
| | color: var(--text); |
| | padding: 7px 14px; |
| | border-radius: var(--radius-sm); |
| | font-size: 0.8rem; |
| | font-weight: 600; |
| | cursor: pointer; |
| | display: flex; |
| | align-items: center; |
| | gap: 7px; |
| | transition: all 0.2s; |
| | letter-spacing: -0.01em; |
| | } |
| |
|
| | .tool-btn:hover { background: var(--btn-hover); border-color: var(--tree-line); } |
| |
|
| | .action-btn { |
| | color: #fff; |
| | background: var(--accent); |
| | border-color: var(--accent); |
| | } |
| |
|
| | .action-btn:hover { |
| | background: var(--accent-hover); |
| | border-color: var(--accent-hover); |
| | } |
| |
|
| | |
| | .dropdown { position: relative; } |
| |
|
| | .dropdown-content { |
| | display: none; |
| | position: absolute; |
| | top: 100%; |
| | left: 0; |
| | margin-top: 6px; |
| | background: var(--panel-bg); |
| | border: 1px solid var(--border); |
| | border-radius: var(--radius); |
| | box-shadow: 0 12px 32px var(--shadow-lg); |
| | z-index: 100; |
| | min-width: 200px; |
| | padding: 6px; |
| | backdrop-filter: blur(10px); |
| | } |
| |
|
| | .dropdown.active .dropdown-content { display: block; } |
| |
|
| | .dropdown-content a { |
| | display: block; |
| | padding: 10px 14px; |
| | color: var(--text); |
| | font-size: 0.85rem; |
| | border-radius: var(--radius-sm); |
| | font-weight: 500; |
| | transition: all 0.15s; |
| | } |
| |
|
| | .dropdown-content a:hover { |
| | background: var(--accent); |
| | color: white; |
| | } |
| |
|
| | |
| | .terminal-window { |
| | background: var(--panel-bg); |
| | display: flex; |
| | overflow: auto; |
| | font-family: var(--mono); |
| | font-size: 13px; |
| | line-height: 1.7; |
| | border-radius: 0 0 var(--radius) var(--radius); |
| | } |
| |
|
| | .line-col { |
| | padding: 16px 12px; |
| | text-align: right; |
| | color: var(--line-num); |
| | border-right: 1px solid var(--border); |
| | min-width: 48px; |
| | user-select: none; |
| | font-size: 0.75rem; |
| | font-weight: 500; |
| | } |
| |
|
| | .code-col { |
| | padding: 16px; |
| | flex: 1; |
| | white-space: pre; |
| | } |
| |
|
| | .tree-line { |
| | display: flex; |
| | align-items: center; |
| | height: 26px; |
| | border-radius: 4px; |
| | padding: 0 4px; |
| | } |
| |
|
| | .tree-line:hover { background: var(--accent-light); } |
| |
|
| | .t-prefix { |
| | color: var(--tree-line); |
| | white-space: pre; |
| | margin-right: 4px; |
| | } |
| |
|
| | .t-icon { |
| | width: 22px; |
| | text-align: center; |
| | display: inline-block; |
| | margin-right: 7px; |
| | font-size: 0.85rem; |
| | } |
| |
|
| | .fa-folder { color: var(--folder-color); } |
| | .fa-file { color: var(--file-color); } |
| |
|
| | .t-name { |
| | color: var(--text); |
| | font-weight: 500; |
| | } |
| |
|
| | .t-name.folder { font-weight: 700; } |
| |
|
| | .t-size { |
| | color: var(--text-secondary); |
| | font-size: 0.72rem; |
| | margin-left: 12px; |
| | font-weight: 500; |
| | opacity: 0.8; |
| | } |
| |
|
| | .sub-copy { |
| | opacity: 0; |
| | margin-left: 8px; |
| | background: none; |
| | border: none; |
| | color: var(--text-secondary); |
| | cursor: pointer; |
| | padding: 3px; |
| | font-size: 0.78rem; |
| | transition: all 0.2s; |
| | display: flex; |
| | align-items: center; |
| | } |
| |
|
| | .tree-line:hover .sub-copy { opacity: 1; } |
| | .sub-copy:hover { color: var(--accent); transform: scale(1.15); } |
| |
|
| | .fa-check { color: #22c55e; } |
| |
|
| | #lineNumbers div { height: 26px; display: flex; align-items: center; justify-content: flex-end; } |
| |
|
| | .lfs-badge { |
| | font-size: 0.6rem; |
| | padding: 1px 6px; |
| | border-radius: 4px; |
| | background: var(--tag-dataset); |
| | color: var(--dataset-color); |
| | margin-left: 8px; |
| | font-weight: 700; |
| | letter-spacing: 0.5px; |
| | } |
| |
|
| | |
| | .tree-search { |
| | padding: 10px 16px; |
| | border-bottom: 1px solid var(--border); |
| | background: var(--header-bg); |
| | } |
| |
|
| | .tree-search input { |
| | width: 100%; |
| | padding: 9px 14px; |
| | background: var(--bg); |
| | border: 1px solid var(--border); |
| | border-radius: var(--radius-sm); |
| | color: var(--text); |
| | font-family: var(--mono); |
| | font-size: 0.82rem; |
| | font-weight: 500; |
| | } |
| |
|
| | .tree-search input:focus { |
| | border-color: var(--accent); |
| | outline: none; |
| | box-shadow: 0 0 0 3px var(--accent-border); |
| | } |
| |
|
| | |
| | .overlay { |
| | position: fixed; |
| | top: 0; left: 0; |
| | width: 100%; height: 100%; |
| | background: rgba(0, 0, 0, 0.4); |
| | backdrop-filter: blur(6px); |
| | display: none; |
| | justify-content: center; |
| | align-items: center; |
| | z-index: 1000; |
| | } |
| |
|
| | .overlay.visible { display: flex; } |
| |
|
| | .overlay-content { |
| | background: var(--panel-bg); |
| | padding: 32px; |
| | border-radius: 16px; |
| | width: 90%; |
| | max-width: 480px; |
| | border: 1px solid var(--border); |
| | box-shadow: 0 24px 48px var(--shadow-lg); |
| | position: relative; |
| | animation: slideUp 0.25s ease-out; |
| | } |
| |
|
| | @keyframes slideUp { |
| | from { transform: translateY(12px); opacity: 0; } |
| | to { transform: translateY(0); opacity: 1; } |
| | } |
| |
|
| | .overlay-content h3 { |
| | margin: 0 0 20px 0; |
| | font-size: 1.15rem; |
| | font-weight: 700; |
| | letter-spacing: -0.02em; |
| | } |
| |
|
| | .share-box { |
| | display: flex; |
| | gap: 10px; |
| | margin-top: 12px; |
| | } |
| |
|
| | .share-box input { |
| | background: var(--header-bg); |
| | border: 1px solid var(--border); |
| | padding: 12px 14px; |
| | border-radius: var(--radius-sm); |
| | color: var(--text); |
| | font-family: var(--mono); |
| | font-size: 0.85rem; |
| | flex: 1; |
| | font-weight: 500; |
| | } |
| |
|
| | .share-box button { |
| | background: var(--accent); |
| | color: white; |
| | border: none; |
| | border-radius: var(--radius-sm); |
| | padding: 0 20px; |
| | cursor: pointer; |
| | font-size: 1rem; |
| | transition: background 0.2s; |
| | } |
| |
|
| | .share-box button:hover { background: var(--accent-hover); } |
| |
|
| | .close-btn { |
| | position: absolute; |
| | top: 16px; right: 16px; |
| | background: var(--btn-bg); |
| | border: 1px solid var(--border); |
| | width: 32px; height: 32px; |
| | border-radius: 50%; |
| | font-size: 1.1rem; |
| | color: var(--text-secondary); |
| | cursor: pointer; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | transition: all 0.2s; |
| | } |
| |
|
| | .close-btn:hover { background: var(--btn-hover); color: var(--text); } |
| |
|
| | |
| | .footer { |
| | padding: 40px 20px; |
| | text-align: center; |
| | font-family: var(--mono); |
| | font-weight: 500; |
| | font-size: 0.75rem; |
| | color: var(--text-secondary); |
| | margin-top: auto; |
| | } |
| |
|
| | .footer a { |
| | color: var(--accent); |
| | font-weight: 600; |
| | text-decoration: none; |
| | } |
| |
|
| | .footer a:hover { text-decoration: underline; } |
| |
|
| | |
| | .spinner { |
| | display: inline-block; |
| | width: 14px; height: 14px; |
| | border: 2px solid var(--accent-border); |
| | border-top-color: var(--accent); |
| | border-radius: 50%; |
| | animation: spin 0.6s linear infinite; |
| | margin-right: 8px; |
| | vertical-align: middle; |
| | } |
| |
|
| | @keyframes spin { to { transform: rotate(360deg); } } |
| | @keyframes fadeIn { to { opacity: 1; } } |
| |
|
| | |
| | @media (max-width: 640px) { |
| | .search-section { flex-direction: column; } |
| | .primary-btn { width: 100%; justify-content: center; } |
| | .branch-input { max-width: 100%; } |
| |
|
| | .toolbar { |
| | flex-direction: column; |
| | align-items: stretch; |
| | gap: 10px; |
| | padding: 12px; |
| | } |
| |
|
| | .tools-group { |
| | width: 100%; |
| | justify-content: space-between; |
| | flex-wrap: wrap; |
| | } |
| |
|
| | .tools-group.right { justify-content: flex-end; } |
| | .repo-info-header { flex-direction: column; align-items: flex-start; } |
| |
|
| | .type-selector { width: 100%; } |
| | .type-btn { flex: 1; justify-content: center; padding: 0 10px; } |
| | .repo-info-stats { flex-wrap: wrap; gap: 10px; } |
| | } |
| |
|
| | |
| | ::-webkit-scrollbar { width: 8px; height: 8px; } |
| | ::-webkit-scrollbar-thumb { |
| | background: var(--border); |
| | border-radius: 10px; |
| | } |
| | ::-webkit-scrollbar-thumb:hover { background: var(--tree-line); } |
| | ::-webkit-scrollbar-track { background: transparent; } |
| |
|
| | |
| | ::selection { |
| | background: var(--accent); |
| | color: white; |
| | } |
