marcandClaude Sonnet 4.6
1118681fd2
- Move index.html → templates/index.html (Jinja2, uses url_for) - Extract CSS → static/css/app.css - Split JS into static/js/: utils.js, dashboard.js, shares.js, quotas.js, users.js, main.js - Switch app.py from send_file to render_template Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
65 lines
2.8 KiB
CSS
65 lines
2.8 KiB
CSS
:root {
|
|
--bg: #0d1117;
|
|
--surf: #161b22;
|
|
--surf2: #21262d;
|
|
--border: #30363d;
|
|
--text: #e6edf3;
|
|
--muted: #8b949e;
|
|
--accent: #58a6ff;
|
|
--green: #3fb950;
|
|
--red: #f85149;
|
|
--yellow: #d29922;
|
|
}
|
|
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
}
|
|
|
|
/* Nav */
|
|
.topbar { background: var(--surf); border-bottom: 1px solid var(--border); padding: .75rem 1.5rem; }
|
|
.nav-tabs { border-color: var(--border); }
|
|
.nav-tabs .nav-link { color: var(--muted); border-color: transparent; padding: .6rem 1rem; }
|
|
.nav-tabs .nav-link:hover { color: var(--text); background: var(--surf2); border-color: var(--border); }
|
|
.nav-tabs .nav-link.active { color: var(--text); background: var(--bg); border-color: var(--border) var(--border) var(--bg); }
|
|
|
|
/* Cards */
|
|
.card { background: var(--surf); border: 1px solid var(--border); border-radius: 8px; }
|
|
.card-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .3rem; }
|
|
|
|
/* Tables */
|
|
.table { color: var(--text); }
|
|
.table > :not(caption) > * > * { background: transparent; border-color: var(--border); padding: .65rem .85rem; }
|
|
.table thead th { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 500; }
|
|
.table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--surf2); }
|
|
.table tbody tr:hover > * { background: #1c2128; }
|
|
|
|
/* Forms */
|
|
.form-control, .form-select { background: var(--surf2); border-color: var(--border); color: var(--text); }
|
|
.form-control:focus, .form-select:focus { background: var(--surf2); border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 3px rgba(88,166,255,.15); }
|
|
.form-control::placeholder { color: var(--muted); }
|
|
.input-group-text { background: var(--surf2); border-color: var(--border); color: var(--muted); }
|
|
|
|
/* Status dot */
|
|
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; flex-shrink: 0; }
|
|
.dot-green { background: var(--green); box-shadow: 0 0 6px var(--green); }
|
|
.dot-red { background: var(--red); box-shadow: 0 0 6px var(--red); }
|
|
|
|
/* Progress */
|
|
.progress { background: var(--surf2); border-radius: 4px; }
|
|
|
|
/* Badges */
|
|
.badge-smb { background: #1f3a5f; color: #58a6ff; font-size: .72rem; }
|
|
.badge-nfs { background: #2d1f5f; color: #a78bfa; font-size: .72rem; }
|
|
|
|
/* Modal */
|
|
.modal-content { background: var(--surf); border: 1px solid var(--border); }
|
|
.modal-header, .modal-footer { border-color: var(--border); }
|
|
.btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); }
|
|
|
|
/* Toast */
|
|
#toastContainer { position: fixed; top: 1rem; right: 1rem; z-index: 1100; min-width: 260px; }
|
|
|
|
code { color: var(--accent); background: var(--surf2); padding: .1em .35em; border-radius: 4px; font-size: .87em; }
|