3 lines
7.3 KiB
CSS
3 lines
7.3 KiB
CSS
/* Fully self-contained: no remote font dependency. */
|
|
:root{font-family:Inter,"PingFang SC",sans-serif;color-scheme:light;--bg:#f4f7fa;--panel:#fff;--text:#101820;--muted:#71808d;--border:#dfe7ec;--accent:#25bfd5;--accent2:#596ef3;--track:#e8eff2;--grid:#e5ecef;--danger:#e84e61;--green:#25b978}html[data-theme=dark]{color-scheme:dark;--bg:#071015;--panel:#0d181f;--text:#edfafd;--muted:#7f98a4;--border:#1b3039;--track:#263740;--grid:#183039;--green:#38d996}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 85% 5%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 32%),var(--bg);color:var(--text)}button,input,select{font:inherit}.center{min-height:100vh;display:grid;place-content:center;gap:24px}.spinner{width:34px;height:34px;border:3px solid var(--track);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:auto}@keyframes spin{to{transform:rotate(360deg)}}.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.03em}.logo svg{color:var(--accent);width:22px}.setup{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:8vw;padding:7vw}.hero h1{font-size:clamp(42px,5vw,76px);line-height:1.05;letter-spacing:-.055em}.hero h1 span{color:var(--accent)}.hero p{color:var(--muted);font-size:18px}.panel{background:color-mix(in srgb,var(--panel) 94%,transparent);border:1px solid var(--border);border-radius:18px;box-shadow:0 16px 50px rgba(0,0,0,.05)}.form{padding:32px;display:flex;flex-direction:column;gap:18px}.form h2{margin:0;font-size:26px}.form small,.hint,.form p{color:var(--muted)}label{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--muted)}input,select{border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:10px;padding:12px;outline:none}input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}button{border:0;border-radius:10px;padding:11px 16px;background:linear-gradient(120deg,var(--accent),var(--accent2));color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600}button:disabled{opacity:.65;cursor:not-allowed}button svg{width:17px}.login{width:min(420px,90vw)}.error{color:var(--danger)!important}.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}aside{border-right:1px solid var(--border);padding:28px 18px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(15px)}aside .logo{padding:0 10px 28px}nav{display:flex;flex-direction:column;gap:6px}aside button,.tabs button{justify-content:flex-start;background:transparent;color:var(--muted)}aside button:hover,.tabs button:hover,.tabs button.active{background:var(--track);color:var(--text)}.aside-bottom{margin-top:auto;display:flex;flex-direction:column;gap:5px}.content{padding:42px;max-width:1500px;width:100%;margin:auto}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}header h1{margin:0;font-size:30px;letter-spacing:-.04em}header p{margin:8px 0;color:var(--muted)}.header-actions{display:flex;gap:10px}.account-select{min-width:220px}.secondary{background:var(--panel);border:1px solid var(--border);color:var(--text)}.refresh.loading svg{animation:spin .8s linear infinite}.refresh.done{color:var(--green);border-color:var(--green)}.account{padding:20px 24px;display:flex;gap:14px;align-items:center;margin-bottom:20px}.account div{display:flex;flex-direction:column}.account small,.limit small,.stat small,.chart small{color:var(--muted)}.dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--danger);box-shadow:0 0 10px currentColor}.dot.ok{background:var(--green)}.badge{background:var(--track);padding:6px 10px;border-radius:99px;font-size:12px}.fresh{margin-left:auto;color:var(--muted);font-size:12px}.limits{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:18px}.limit{padding:24px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start}.limit>small{grid-column:1/-1}.remaining strong{display:block;font-size:50px;line-height:1;font-variant-numeric:tabular-nums;color:var(--green)}.remaining strong i{font-size:20px;font-style:normal}.remaining span,.reset span{display:block;color:var(--muted);font-size:12px;margin-top:7px}.reset{text-align:right}.reset b{display:block;font-size:18px;margin-top:7px}.bar{grid-column:1/-1;display:flex;height:14px;border-radius:99px;overflow:hidden;background:var(--track)}.bar i{background:#9aa6ad}.bar em{background:var(--green)}.limit footer{grid-column:1/-1;border-top:1px solid var(--border);padding-top:14px;display:flex;gap:18px;color:var(--muted);font-size:12px}.limit footer span:last-child{margin-left:auto}.green{color:var(--green)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0}.stat{padding:20px}.stat b{display:block;font-size:24px;margin-top:10px}.chart{padding:24px}.chart h3{margin:0 0 5px}.banner{padding:14px 18px;border:1px solid color-mix(in srgb,var(--danger) 35%,var(--border));background:color-mix(in srgb,var(--danger) 8%,var(--panel));border-radius:12px;margin-bottom:18px;color:var(--danger)}.empty{padding:32px;text-align:center;color:var(--muted)}.settings{display:grid;grid-template-columns:190px 1fr;gap:20px}.tabs{display:flex;flex-direction:column;gap:5px}.wide{max-width:960px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.checks{display:flex;flex-direction:row;align-items:center;gap:10px}.checks input{width:auto}.actions,.settings-title{display:flex;gap:10px}.settings-title{justify-content:space-between;align-items:start}.settings-title p{margin-bottom:0}.danger{background:transparent;border:1px solid var(--danger);color:var(--danger)}.icon{padding:10px}.codebox{padding:16px;border:1px dashed var(--accent);border-radius:12px;display:flex;justify-content:space-between;align-items:center}.codebox strong{font-family:monospace;font-size:20px;color:var(--accent)}.account-list{display:flex;flex-direction:column;gap:10px}.account-row{display:grid;grid-template-columns:auto minmax(180px,1fr) auto auto auto;gap:10px;align-items:center;padding:14px;border:1px solid var(--border);border-radius:12px}.account-row>div{display:flex;flex-direction:column;gap:5px}.account-row input{padding:7px;font-weight:700}.account-row small{padding-left:8px}a{color:var(--accent)}@media(max-width:800px){.setup{grid-template-columns:1fr;padding:24px}.hero{display:none}.app{grid-template-columns:1fr}aside{position:static;height:auto;border:0;padding:14px;flex-direction:row;align-items:center;overflow:auto}aside .logo{padding:0;margin-right:auto}aside nav{flex-direction:row}.aside-bottom{margin:0;flex-direction:row}aside button{font-size:0;padding:10px}.content{padding:24px 16px}header{align-items:start;gap:15px}.header-actions{flex-direction:column}.account-select{min-width:0}.stats{grid-template-columns:1fr 1fr}.settings{grid-template-columns:1fr}.tabs{flex-direction:row;overflow:auto}.grid2{grid-template-columns:1fr}.fresh{display:none}.account-row{grid-template-columns:auto 1fr}.account-row button{grid-column:auto}.limit{grid-template-columns:1fr}.reset{text-align:left}.limit>small,.bar,.limit footer{grid-column:1}.settings-title{flex-direction:column}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
|