File size: 2,527 Bytes
f079825 6f8c501 f079825 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
/* static/css/main.css - full CSS tokens and styles (light theme) */
:root{
--bg: #ffffff; /* Primary background */
--bg-surface: #F5F7FA; /* Cards / surfaces */
--divider: #E6E9EE;
--text-primary: #111111;
--text-secondary: #52575C;
--text-muted: #8D9095;
--accent: #336699; /* deep muted blue */
--muted-teal: #2A7F7F;
--error: #E53935;
--radius: 10px;
--space: 16px;
}
/* base layout */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial; background:var(--bg); color:var(--text-primary); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
.container{padding:var(--space); margin:0 auto;}
.container.narrow{max-width:420px}
/* Cards & stacks */
.card{background:var(--bg-surface); border-radius:var(--radius); padding:14px; box-shadow: 0 6px 18px rgba(17,17,17,0.03); margin-bottom:12px;}
.stack > * + *{margin-top:10px}
.input-label{font-size:13px; color:var(--text-secondary); margin-bottom:6px; display:block;}
.input{width:100%; padding:12px; border-radius:8px; border:1px solid var(--divider); background:white; font-size:15px; color:var(--text-primary)}
.input:focus{outline:none; border-color:var(--accent); box-shadow:0 6px 16px rgba(51,102,153,0.06)}
/* Buttons */
.btn{font-family:Inter, sans-serif; padding:10px 12px; border-radius:10px; border:1px solid transparent; font-weight:600; cursor:pointer; display:inline-block}
.btn.large{padding:12px 16px; font-size:16px}
.btn.primary{background:var(--accent); color:white}
.btn.outline{background:transparent; color:var(--accent); border-color:var(--accent)}
.btn[disabled]{opacity:0.5; cursor:not-allowed}
/* small utilities */
.small{font-size:13px}
.mini{font-size:13px;color:var(--text-secondary)}
/* modal (basic) */
.modal{position:fixed; inset:0; display:flex; align-items:flex-end; justify-content:center; padding:18px; background:linear-gradient(transparent, rgba(0,0,0,0.12)); transition:opacity .25s; z-index:40}
.modal-inner{width:100%; max-width:420px; background:var(--bg); border-radius:14px; padding:16px; box-shadow:0 20px 50px rgba(17,17,17,0.12)}
/* simple icons fallback */
.control-btn{border:none; background:transparent; font-size:15px; color:var(--text-primary); padding:10px}
.control-btn.primary{border-radius:12px}
/* tiny animations */
.fade-in{animation:fadeIn .28s ease both}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
|