/* ============================================================ anketa.id — studio.css (LimeSurvey 5 / Bootstrap 3) Differences from the LimeSurvey 6 build, all verified against the vanilla theme shipped with this instance: * grid is Bootstrap 3: no .col-auto, no --bs-gutter-x, columns carry a fixed 15px side padding and .row a -15px side margin * selects are .form-control, not .form-select * buttons are .btn-default / .btn-primary, not .btn-outline-* * the array collapses at 760px here, not 767px (noTablesOnMobile.css) * the checked-mark colour is set in the theme's own theme.css (label::after{background-color:#337ab7}), not in a core package Variables are emitted server-side by views/subviews/header/custom_header.twig Mode classes are set on by the same file (no flash of wrong layout): .st-op / .st-resp interface mode .st-dark / .st-contrast .st-compact .st-codes show answer codes .st-sticky sticky navigator .st-rowhl highlight whole answer row .st-zebra striped array rows ============================================================ */ /* ---------- font classes (body gets .font- from vanilla layout) ---------- */ /* The font picker was removed from the theme options, so the body may carry no .font-* class at all. The family is therefore pinned here rather than left to that class — a missing class must not fall back to a serif. */ body, body.font-system { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; } body.font-noto { font-family: "Noto Sans", system-ui, Arial, sans-serif; } body.font-arial { font-family: Arial, Helvetica, sans-serif; } body.font-verdana { font-family: Verdana, Geneva, sans-serif; } body.font-tahoma { font-family: Tahoma, Verdana, sans-serif; } body.font-georgia { font-family: Georgia, "Times New Roman", Times, serif; } body.font-courier { font-family: "Courier New", Courier, monospace; } /* ---------- page shell ---------- */ body { background-color: var(--st-canvas); color: var(--st-text); /* no tall tail after the buttons: the frame is short */ padding-bottom: var(--st-nav-gap, 0.5rem); -webkit-font-smoothing: antialiased; } .container, .container-fluid { max-width: var(--st-maxw); } .top-container, .top-container .top-content { background: transparent; margin-bottom: 0; padding-bottom: 0; } /* Header bar */ #survey-nav.navbar { background-color: var(--st-header) !important; border-bottom: 1px solid var(--st-border); min-height: 3rem; box-shadow: 0 1px 2px rgba(15, 23, 32, 0.06); } #survey-nav .navbar-brand { color: var(--st-text); font-weight: 600; font-size: 0.95rem; } #survey-nav .logo { max-height: 2.1rem; width: auto; } /* Language switcher (Survey settings -> Presentation -> show language switcher). It is a survey-level feature, not a theme option, so the theme only styles it. */ #survey-nav .navbar-nav .nav-link, #survey-nav select, .language-changer select, .language-changer .nav-link { color: var(--st-text); font-size: 0.95rem; } #survey-nav select { min-height: 2rem; padding-block: 0.1rem; } /* Survey / group headings */ h1.survey-name { margin: 0 0 0.35rem; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; color: var(--st-text); text-align: left; } .survey-description, .survey-welcome { color: var(--st-muted); text-align: left; } .group-title { font-size: var(--st-fs-grouptitle); font-weight: var(--st-fw-grouptitle); color: var(--st-text); text-align: left; margin: 0 0 0.25rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--st-accent); display: block; } .group-description { font-size: var(--st-fs-groupdesc); font-weight: var(--st-fw-groupdesc); color: var(--st-muted); margin-bottom: var(--st-gap); } #welcome-container { background: var(--st-surface); border: 1px solid var(--st-border); border-radius: var(--st-radius); padding: 1.25rem; margin-top: 1.25rem; } /* ---------- question card ---------- */ .row.question-container { margin-left: 0; margin-right: 0; } .question-container { position: relative; background: var(--st-surface); border: 1px solid var(--st-border); border-radius: var(--st-radius); border-left: 3px solid var(--st-accent); margin-bottom: var(--st-gap); padding: var(--st-card-pad); transition: box-shadow 0.15s ease, border-color 0.15s ease; } .question-container:focus-within, .question-container.st-active { border-color: var(--st-accent); box-shadow: 0 0 0 3px var(--st-accent-ring); } /* The question the keyboard is currently aimed at. Enter moves this marker down the page and only submits once it is on the last visible question. */ .question-container.st-active { border-left-width: 5px; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Question title: plain strong text, no colour band (band stays available via option) */ .question-title-container { background: var(--st-qtitle-bg); color: var(--st-qtitle-fg); font-size: var(--st-fs-qtitle); font-weight: var(--st-fw-qtitle); line-height: 1.4; padding: 0 0 0.6rem; margin: 0; border: none; } .question-title-container p:last-child { margin-bottom: 0; } /* Mandatory asterisk / question code */ .question-container .asterisk, .question-container .ls-asterisk { color: var(--st-danger); } /* The code is an operator aid: it tells them which variable they are reading out and matches the paper questionnaire. A respondent has no use for it, so it is pulled out of the text (by studio.js) and hidden here. */ html.st-resp .ls-questioncode { display: none; } .ls-questioncode { display: inline-block; font-family: var(--st-mono); font-size: 0.78em; color: var(--st-muted); background: var(--st-code-bg); border-radius: 4px; padding: 0.05em 0.4em; margin-right: 0.45em; vertical-align: 0.1em; } /* Help / validation. These wrappers are NEVER empty: LimeSurvey leaves whitespace and newlines inside them even when there is nothing to say, so :empty never matches and a styled wrapper renders as a thin yellow strip under every question. Style the CONTENT and leave the wrapper transparent — then an "empty" wrapper has nothing to paint, and a validation message that EM inserts later is styled the moment it appears, with no JS involved. */ .question-help-container, .question-valid-container { background: none; border: 0; padding: 0; margin: 0; } .question-help-container > *, .question-valid-container > *, .ls-questionhelp { background: var(--st-help-bg); border-radius: calc(var(--st-radius) / 1.5); padding: 0.4rem 0.6rem; margin: 0.35rem 0; font-size: 0.9em; color: var(--st-text); } .question-help-container > :empty, .question-valid-container > :empty, .ls-questionhelp:empty { display: none; } .em_num_answers.error, .error { color: var(--st-danger); } /* ---------- answers: list of options ---------- */ .answer-container { padding: 0; } /* vanilla's theme.css puts padding-top:15px / padding-bottom:15px on .ls-answers — the wrapper
around the option list. That is the gap between the question text and the first option, and the tail of empty space after the last one. Both are replaced by the theme's own rhythm. Note .ls-answers is the DIV in a list question and the TABLE in an array, so the table keeps its own margin set further down. */ .answer-container .ls-answers { padding-top: var(--st-answers-pad, 0px); padding-bottom: var(--st-answers-pad, 0px); margin-bottom: 0; } /* Bootstrap reboot gives every