hangshuo652
71 lines
5.0 KiB
CSS
71 lines
5.0 KiB
CSS
:root {
|
|
--bg: #0a0e14;
|
|
--panel: #12171f;
|
|
--border: #1f2937;
|
|
--text: #b2becd;
|
|
--dim: #5c6e80;
|
|
--accent: #39bae6;
|
|
--green: #7fd962;
|
|
--red: #f26d78;
|
|
--yellow: #ffad66;
|
|
--font: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
|
|
}
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; }
|
|
body::before { content:""; position:fixed; top:0; left:0; width:100%; height:100%; background: radial-gradient(ellipse at 20% 20%, rgba(57,186,230,.03) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(127,217,98,.02) 0%, transparent 50%); pointer-events:none; z-index:0; }
|
|
.container { max-width: 680px; margin: 0 auto; padding: 3rem 1.5rem; position:relative; z-index:1; }
|
|
/* Header */
|
|
header { margin-bottom: 2.5rem; border-bottom: 1px solid var(--border); padding-bottom: 1.5rem; }
|
|
.badge { display:inline-block; padding:.15rem .6rem; background:rgba(57,186,230,.12); color:var(--accent); border-radius:3px; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.75rem; }
|
|
h1 { font-size:1.3rem; font-weight:400; color:#e6edf3; line-height:1.3; }
|
|
h1 span { color: var(--accent); }
|
|
.tagline { font-size:.8rem; color:var(--dim); margin-top:.4rem; }
|
|
/* Sections */
|
|
section { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:1.5rem; margin-bottom:1rem; }
|
|
section h2 { font-size:.8rem; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; margin-bottom:1rem; font-weight:400; }
|
|
/* Form */
|
|
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
|
|
.form-grid .full { grid-column:1/-1; }
|
|
label { font-size:.75rem; color:var(--dim); }
|
|
label strong { display:block; color:var(--text); font-weight:400; margin-bottom:.25rem; font-size:.8rem; }
|
|
input[type="file"], select { width:100%; padding:.55rem .7rem; background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--text); font-family:inherit; font-size:.8rem; margin-top:.15rem; transition:border-color .2s; }
|
|
input[type="file"]:hover, select:hover { border-color: var(--accent); }
|
|
input[type="file"]::file-selector-button { background:var(--border); color:var(--text); border:none; padding:.35rem .8rem; border-radius:4px; margin-right:.5rem; cursor:pointer; font-family:inherit; font-size:.75rem; }
|
|
select { cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%235c6e80'%3E%3Cpath d='M6 8L2 4h8z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .5rem center; appearance:none; padding-right:2rem; }
|
|
/* Buttons */
|
|
.actions { display:flex; gap:.5rem; margin-top:1.25rem; }
|
|
.btn { padding:.6rem 1.25rem; border-radius:6px; font-family:inherit; font-size:.8rem; cursor:pointer; border:none; transition: all .2s; }
|
|
.btn-primary { background:var(--accent); color:var(--bg); }
|
|
.btn-primary:hover { background:#4fc8f0; }
|
|
.btn-primary:disabled { background:var(--border); color:var(--dim); cursor:not-allowed; }
|
|
.btn-secondary { background:transparent; color:var(--dim); border:1px solid var(--border); }
|
|
.btn-secondary:hover { color:var(--text); border-color:var(--dim); }
|
|
/* Status & Results */
|
|
#status-area { margin-top:1rem; }
|
|
.status-card { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:1rem 1.5rem; font-size:.8rem; }
|
|
.status-card.success { border-left:3px solid var(--green); }
|
|
.status-card.pending { border-left:3px solid var(--yellow); }
|
|
.status-card.error { border-left:3px solid var(--red); }
|
|
.status-card .title { font-weight:600; margin-bottom:.25rem; }
|
|
.status-card.success .title { color:var(--green); }
|
|
.status-card.pending .title { color:var(--yellow); }
|
|
.status-card.error .title { color:var(--red); }
|
|
.matrix { display:grid; grid-template-columns:auto 1fr; gap:.3rem 1.5rem; margin:.75rem 0; font-size:.8rem; }
|
|
.matrix dt { color:var(--dim); }
|
|
.matrix dd { color:var(--text); }
|
|
.divider { border-top:1px solid var(--border); margin:1rem 0; }
|
|
.result-link { display:inline-block; margin-top:.5rem; color:var(--accent); text-decoration:none; font-size:.8rem; }
|
|
.result-link:hover { text-decoration:underline; }
|
|
/* Footer */
|
|
footer { margin-top:3rem; padding-top:1rem; border-top:1px solid var(--border); font-size:.7rem; color:var(--dim); display:flex; justify-content:space-between; }
|
|
footer a { color:var(--dim); text-decoration:none; }
|
|
footer a:hover { color:var(--text); }
|
|
/* Field table */
|
|
table { width:100%; border-collapse:collapse; font-size:.8rem; }
|
|
th { text-align:left; color:var(--dim); font-weight:400; padding:.5rem .75rem; border-bottom:1px solid var(--border); }
|
|
td { padding:.45rem .75rem; border-bottom:1px solid rgba(31,41,55,.5); }
|
|
tr.pass td:first-child { border-left:3px solid var(--green); }
|
|
tr.tolerated td:first-child { border-left:3px solid var(--yellow); }
|
|
tr.fail td:first-child { border-left:3px solid var(--red); }
|
|
pre { background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:1rem; font-family:inherit; font-size:.8rem; overflow-x:auto; margin-top:.5rem; }
|