MediaWiki:Gadget-course.css

Nota: dopo aver pubblicato, potrebbe essere necessario pulire la cache del proprio browser per vedere i cambiamenti.

• Firefox / Safari: tieni premuto il tasto delle maiuscole Shift e fai clic su Ricarica, oppure premi Ctrl-F5 o Ctrl-R (⌘-R su Mac)
• Google Chrome: premi Ctrl-Shift-R (⌘-Shift-R su un Mac)
• Edge: tieni premuto il tasto Ctrl e fai clic su Aggiorna, oppure premi Ctrl-F5.

/* Gadget "course" — stili scoped del corso micro:bit.
   .course = struttura condivisa (qualsiasi corso)
   .course-microbit = palette della tecnologia micro:bit (fallback no-JS) */
.course { max-width: 760px; margin: 0 auto; padding: 0 1.25rem 4rem; font-size: 17px; line-height: 1.65; }
.course h2 { font-size: 1.35rem; margin: 2.6rem 0 0.8rem; padding-top: 1.2rem; border-top: 2px solid #e3e0d6; }
.course p { margin: 0.6rem 0; }
.course ul, .course ol { margin: 0.6rem 0; padding-left: 1.4rem; }
.course li { margin: 0.35rem 0; }
.course a { color: #2e2c9c; }
.course code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.course .lesson-num { display: inline-block; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; background: rgba(46,44,156,0.12); color: #2e2c9c; padding: 0.25rem 0.8rem; border-radius: 999px; margin-bottom: 0.9rem; }
.course h1 { font-size: 2.2rem; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 0.6rem; }
.course .obiettivo { font-size: 1.15rem; opacity: 0.95; }
.course .obiettivo strong { color: #ffb400; }

.course .materiali { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.course .materiali li { background: #fff; border: 1px solid #e3e0d6; border-radius: 999px; padding: 0.4rem 1rem; font-size: 0.95rem; }

.course .passo { position: relative; counter-increment: passo; background: #fff; border: 1px solid #e3e0d6; border-radius: 14px; padding: 1rem 1.2rem 1rem 3.6rem; margin: 0.9rem 0; }
.course .passi { counter-reset: passo; margin: 1rem 0; }
.course .passo::before { content: counter(passo); position: absolute; left: 1rem; top: 1.15rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #2e2c9c; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }

.course .sfida { border: 1px solid #e3e0d6; border-radius: 14px; padding: 1rem 1.2rem; margin: 0.9rem 0; background: #fff; }
.course .sfida .badge { display: inline-block; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.06em; color: #fff; border-radius: 999px; padding: 0.18rem 0.7rem; margin-right: 0.5rem; }
.course .sfida.stella { border-left: 6px solid #c9a227; } .course .sfida.stella .badge { background: #c9a227; }
.course .sfida.cometa { border-left: 6px solid #1e8cc4; } .course .sfida.cometa .badge { background: #1e8cc4; }
.course .sfida.razzo { border-left: 6px solid #b13a5b; } .course .sfida.razzo .badge { background: #b13a5b; }

.course .quiz-q { background: #fff; border: 1px solid #e3e0d6; border-radius: 14px; padding: 1rem 1.2rem; margin: 1rem 0; }
.course .quiz-q .q-text { font-weight: 600; margin-bottom: 0.6rem; }
.course .quiz-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; flex-direction: column; }
.course .quiz-btn { flex: 1 1 40%; font: inherit; font-size: 0.95rem; padding: 0.6rem 0.8rem; border: 2px solid #e3e0d6; border-radius: 10px; background: #fff; color: #22242e; cursor: pointer; }
.course .quiz-btn:hover:not(:disabled) { border-color: #00a5c4; }
.course .quiz-btn.correct { border-color: #2e9e5b; background: #eaf7ef; color: #1b6e3d; font-weight: 700; }
.course .quiz-btn.wrong { border-color: #e0343f; background: #fdecee; color: #a32630; text-decoration: line-through; }
.course .quiz-btn:disabled { cursor: default; }
.course .quiz-feedback { margin-top: 0.6rem; font-weight: 600; min-height: 1.4em; }
.course .quiz-feedback.ok { color: #1b6e3d; }
.course .quiz-feedback.no { color: #a32630; }

.course .ledgrid { display: inline-grid; grid-template-columns: repeat(5, 22px); gap: 5px; padding: 10px; background: #10132e; border-radius: 12px; }
.course .ledgrid .led { width: 22px; height: 22px; border-radius: 50%; background: #262b4f; }
.course .ledgrid .led.on { background: #ffb400; box-shadow: 0 0 8px 2px rgba(255,180,0,0.7); }
.course .ledgrid.blu .led.on { background: #4dd0ff; }
.course .ledgrid.verde .led.on { background: #66e07a; }
.course .ledgrid.rosso .led.on { background: #ff6b6b; }

.course .card { background: #fff; border: 1px solid #e3e0d6; border-radius: 14px; padding: 1.1rem 1.3rem; margin: 1.1rem 0; }
.course .tip { border-left: 5px solid #ffb400; }
.course .warn { border-left: 5px solid #e0343f; background: #fff7f7; }
.course .fonte { background: #eef4fb; border: 1px solid #d4e3f5; border-radius: 14px; padding: 1rem 1.2rem; margin: 1.5rem 0; }

.course .lesson-footer { margin-top: 3rem; padding-top: 1.2rem; border-top: 2px solid #e3e0d6; font-size: 0.95rem; }
.course .pagination { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.course .pagination span { background: #fff; border: 1px solid #e3e0d6; padding: 0.5rem 1rem; border-radius: 10px; font-weight: 600; color: #2e2c9c; }

.course .blk { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 6px; color: #fff; font-weight: 700; font-size: 0.92em; white-space: nowrap; }
.course .blk.blk-upgraded { background: none; padding: 0; border-radius: 0; }
.course-microbit .blk-basic { background: #0e6bb0; }
.course-microbit .blk-input { background: #1e9e46; }
.course-microbit .blk-music { background: #d96716; }
.course-microbit .blk-led { background: #2e2c9c; }
.course-microbit .blk-var { background: #e0621f; }
.course-microbit .blk-logic { background: #00a3a6; }
.course-microbit .blk-loop { background: #0077b6; }
.course-microbit .blk-math { background: #c4314b; }
.course-microbit .blk-radio { background: #7c3c98; }
.course-microbit .blk-game { background: #c24b99; }
.course-microbit .blk-pin { background: #0f8a5f; }

@media print {
  .course { max-width: none; padding: 0; font-size: 11pt; }
  .course a { color: inherit; text-decoration: none; }
  .course .quiz-btn { border-color: #ccc; }
}