2 lines
6.0 KiB
CSS
2 lines
6.0 KiB
CSS
:root{--bg:#06090f;--panel:#0c111b;--line:#1c2737;--text:#eaf4ff;--muted:#718198;--cyan:#42e8e0;--green:#60f5a5;--red:#ff6577;--amber:#ffc857}*{box-sizing:border-box}body.light{--bg:#eef4f7;--panel:#fff;--line:#d4e0e7;--text:#0c1d2c;--muted:#637789}*{margin:0}body{background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,sans-serif;min-height:100vh;transition:.25s}.grid{position:fixed;inset:0;pointer-events:none;opacity:.38;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:60px 60px;mask-image:linear-gradient(to bottom,#000,transparent 78%)}header,main,footer{position:relative;max-width:1240px;margin:auto}header{height:84px;display:flex;align-items:center;border-bottom:1px solid var(--line);padding:0 24px}.brand{color:var(--text);text-decoration:none;display:flex;align-items:center;gap:13px;font-weight:800;letter-spacing:2px}.brand small{display:block;color:var(--muted);font-size:8px;letter-spacing:2.6px;margin-top:4px}.logo{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--cyan);color:var(--cyan);box-shadow:inset 0 0 15px #42e8e022}.live{margin-left:auto;color:var(--muted);font:11px ui-monospace,monospace;letter-spacing:1px}.live i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);margin-right:8px}#theme{margin-left:25px;background:none;border:1px solid var(--line);color:var(--text);width:38px;height:38px;cursor:pointer}.hero{padding:76px 24px 62px;border-bottom:1px solid var(--line)}.eyebrow{color:var(--cyan);font:11px ui-monospace,monospace;letter-spacing:2px;margin-bottom:18px}.hero h1{font-size:clamp(42px,6vw,76px);line-height:1.04;letter-spacing:-4px;max-width:850px}.hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px var(--cyan)}.hero>p{color:var(--muted);font-size:15px;margin:24px 0 34px}form{display:flex;max-width:890px;gap:10px}.input{height:58px;background:var(--panel);border:1px solid var(--line);display:flex;align-items:center;flex:1}.input:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px #42e8e010}.input span{color:var(--cyan);font-size:22px;margin:0 14px}.input input{font:16px ui-monospace,monospace;min-width:0;flex:1;background:none;border:0;outline:0;color:var(--text)}select{height:100%;border:0;border-left:1px solid var(--line);background:var(--panel);color:var(--text);padding:0 20px;font-weight:700}form>button{border:0;background:var(--cyan);color:#041111;padding:0 25px;font-weight:800;letter-spacing:.5px;cursor:pointer}form>button:hover{filter:brightness(1.12)}form>button:disabled{opacity:.5}.error{color:var(--red);font-size:13px;margin-top:12px}.query-head{padding:42px 24px 22px;display:flex;align-items:end;justify-content:space-between}.query-head h2{font:28px ui-monospace,monospace}.query-head button,#copyAll{border:1px solid var(--line);background:var(--panel);color:var(--muted);padding:10px 15px;cursor:pointer}.stats{display:grid;grid-template-columns:2fr repeat(3,1fr);border:1px solid var(--line);margin:0 24px}.stats article{padding:20px;border-right:1px solid var(--line);background:#0c111b88}.light .stats article{background:#ffffffbb}.stats article:last-child{border:0}.stats label,.stats small{display:block;color:var(--muted);font:10px ui-monospace,monospace;letter-spacing:1.5px}.stats strong{display:block;font:28px ui-monospace,monospace;margin:10px 0 5px}.bar{height:2px;background:var(--line);margin-top:10px}.bar i{height:100%;display:block;width:0;background:var(--cyan);box-shadow:0 0 8px var(--cyan);transition:.25s}.toolbar{margin:22px 24px 10px;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font:11px ui-monospace,monospace}.toolbar button{color:var(--muted);background:none;border:0;border-bottom:1px solid transparent;padding:9px 14px;cursor:pointer}.toolbar button.active{color:var(--cyan);border-color:var(--cyan)}.table-wrap{margin:0 24px 70px;border:1px solid var(--line);overflow:auto}table{border-collapse:collapse;width:100%;min-width:800px;background:var(--panel)}th{text-align:left;color:var(--muted);font:10px ui-monospace,monospace;letter-spacing:1px;padding:13px 16px;border-bottom:1px solid var(--line)}td{padding:15px 16px;border-bottom:1px solid var(--line);font-size:13px}td small{display:block;color:var(--muted);margin-top:4px}.status{font:10px ui-monospace,monospace;text-transform:uppercase}.status:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px}.success{color:var(--green)}.success:before{background:var(--green)}.timeout,.error-s{color:var(--red)}.timeout:before,.error-s:before{background:var(--red)}.empty-s{color:var(--amber)}.empty-s:before{background:var(--amber)}.copy{background:none;border:0;color:var(--muted);cursor:pointer}.empty{text-align:center;padding:70px 20px;color:var(--muted)}.radar{width:110px;height:110px;border:1px solid var(--line);border-radius:50%;margin:0 auto 22px;display:grid;place-items:center;position:relative}.radar i{position:absolute;border:1px solid var(--line);border-radius:50%;inset:15px}.radar i:nth-child(2){inset:35px}.radar i:nth-child(3){inset:54px;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}.radar b{animation:spin 3s linear infinite;width:50%;height:1px;background:linear-gradient(90deg,var(--cyan),transparent);transform-origin:right}@keyframes spin{to{transform:rotate(360deg)}}.empty small{font:9px ui-monospace,monospace;letter-spacing:2px}.empty p{margin-bottom:8px}footer{border-top:1px solid var(--line);padding:22px 24px;display:flex;justify-content:space-between;color:var(--muted);font:9px ui-monospace,monospace;letter-spacing:1px}@media(max-width:700px){header{height:68px}.live{display:none}.hero{padding-top:52px}.hero h1{letter-spacing:-2px}form{display:block}.input{width:100%}form>button{height:52px;width:100%;margin-top:10px}.stats{grid-template-columns:1fr 1fr}.stats article:nth-child(2){border-right:0}.stats article{border-bottom:1px solid var(--line)}.query-head{align-items:start;gap:20px}.query-head h2{font-size:20px}footer{display:block;line-height:2}}
|