mirror of
https://github.com/arthur-pbty/QCM_physique.git
synced 2026-06-03 23:36:21 +02:00
Puechberty Arthur
63 lines
2.8 KiB
CSS
63 lines
2.8 KiB
CSS
/* Global reset */
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html,body{height:100%;}
|
|
:root{
|
|
--bg:#f7f9fb;
|
|
--card:#ffffff;
|
|
--muted:#707b86;
|
|
--accent:#0d6efd;
|
|
--success:#198754;
|
|
--danger:#dc3545;
|
|
--radius:8px;
|
|
--max-width:1100px;
|
|
--gap:12px;
|
|
--font-sans: Inter, Roboto, "Segoe UI", Arial, sans-serif;
|
|
}
|
|
body{
|
|
font-family: var(--font-sans);
|
|
background: var(--bg);
|
|
color: #12222b;
|
|
-webkit-font-smoothing:antialiased;
|
|
-moz-osx-font-smoothing:grayscale;
|
|
padding: 24px 16px;
|
|
}
|
|
.wrapper{max-width:var(--max-width);margin:0 auto;}
|
|
.site-header{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
|
|
.brand{display:flex;align-items:center;gap:10px}
|
|
.brand h1{font-size:1.25rem;margin:0;font-weight:600}
|
|
.site-actions{margin-left:auto;display:flex;gap:8px}
|
|
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:white;border:none;padding:8px 12px;border-radius:6px;text-decoration:none;cursor:pointer}
|
|
.btn.secondary{background:#f0f2f5;color:var(--muted);border:1px solid #e1e6ea}
|
|
.small-btn{padding:6px 10px;border-radius:6px}
|
|
.tabs{display:flex;gap:8px;margin-bottom:12px}
|
|
.tab-button{background:transparent;border:1px solid transparent;padding:8px 10px;border-radius:6px;cursor:pointer;color:var(--muted)}
|
|
.tab-button.active{background:var(--accent);color:#fff}
|
|
.controls{display:flex;gap:8px;align-items:center;margin-bottom:12px}
|
|
.container-card{background:var(--card);border-radius:var(--radius);padding:14px;border:1px solid #e9eef2}
|
|
.question{margin-bottom:12px;padding:12px;border-radius:10px;background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid #e6eef5}
|
|
.question > div:first-child{margin-bottom:8px}
|
|
.answers{margin-top:6px;display:flex;flex-direction:column;gap:6px}
|
|
.answer{display:flex;align-items:center;gap:8px;padding:9px;border-radius:8px;cursor:pointer;border:1px solid transparent}
|
|
.answer:hover{background:#f6fbff}
|
|
.answer input{margin-right:8px}
|
|
.answer.correct{background:#eaf6ec;border-color:rgba(25,135,84,0.15)}
|
|
.answer.wrong{background:#fff1f2;border-color:rgba(220,53,69,0.12)}
|
|
.feedback{margin-top:8px;font-weight:600}
|
|
.feedback .good{color:var(--success)}
|
|
.feedback .bad{color:var(--danger)}
|
|
.manage-item{padding:10px;border-radius:8px;border:1px solid #f0f3f5;background:linear-gradient(180deg,#fff,#fbfdff);margin-bottom:8px}
|
|
.hidden{display:none}
|
|
.footer{margin-top:22px;padding:12px;text-align:center;color:var(--muted);font-size:0.9rem}
|
|
.iframe-wrap{border-radius:8px;overflow:hidden;border:1px solid #e6eef5;background:white}
|
|
.iframe-wrap iframe{width:100%;height:80vh;border:0;display:block}
|
|
@media (max-width:800px){
|
|
.tabs{flex-wrap:wrap}
|
|
.site-header{flex-direction:column;align-items:flex-start;gap:8px}
|
|
.site-actions{margin-left:0}
|
|
.iframe-wrap iframe{height:60vh}
|
|
}
|
|
@media (max-width:420px){
|
|
.brand h1{font-size:1rem}
|
|
.btn{padding:8px}
|
|
}
|