diff --git a/survey-frontend/src/survey.scss b/survey-frontend/src/survey.scss index 444089cdd00bf257635c2655a51dfa5becf033ff..f13086b80725fb2ab443ba8a6004765827b68cf8 100644 --- a/survey-frontend/src/survey.scss +++ b/survey-frontend/src/survey.scss @@ -4,6 +4,29 @@ visibility: hidden; } +.survey-title { + color: #2db394; +} + +.survey-description { + color: #262261; + font-weight: 400; +} + +.survey-title:after { + content: ''; + display: inline-block; + width: 0.1rem; + height: 1em; + background-color: #2db394; + margin: 0 .5rem; + vertical-align: middle; +} + +.survey-title-nren { + color: #262261; +} + #sv-nav-complete { width: 0px; height: 0px; @@ -11,22 +34,94 @@ visibility: hidden; } +.sv-header-flex { + display: flex; + justify-content: space-between; + align-items: center; + border-radius: 2rem; + color: #2db394; + font-weight: bold; + padding-left: 1rem !important; +} + +.sv-container-modern__title { + display: none; +} + +.sv-title.sv-page__title { + // display: none; + // all: unset; + font-size: 1.5rem; + font-weight: bold; + color: #2db394; + margin-bottom: 0.25rem; +} + +.sv-title.sv-panel__title { + color: #262261 +} + +.sv-description { + font-weight: bold; + color: #262261 +} + +.sv-text { + border-bottom: .2rem dotted var(--text-border-color, #d4d4d4) +} + .verification { + min-height: 1.5rem; + order: 2; // Make sure the button comes last + margin-left: auto; // Push button to the right display: inline-block; - margin-left: 20px; + border-radius: 1rem; + padding: 0 1rem; + margin-top: 0.25rem; + margin-bottom: 0.25rem; + margin-right: .4rem; + box-shadow: 0 0 2px 2px #2db394; } .verification-required { - color: red; - border-style: solid; - border-width: 1px; + font-size: 0.85rem; + font-weight: bold; + text-transform: uppercase; + background-color: white; +} + +.verification-ok { + color: white; + font-size: 0.85rem; + font-weight: bold; + text-transform: uppercase; + background-color: #2db394; + + // disable hover/clicking/... for the button when verified + pointer-events: none; + } .sv-action-bar-item.verification.verification-ok:hover { cursor: auto; - background-color: transparent; + background-color: #2db394; } +.survey-content, .survey-progress { - display: flex; + padding-right: 5rem; + padding-left: 5rem; +} + +.survey-container { + + margin-top: 2.5rem; + + // limit the width on very large screens + @media screen and (min-width: 1441px) { + max-width: 65vw; + } + + // default to 100vw + max-width: 100vw; } \ No newline at end of file