/* * Native Patient Satisfaction Survey. * * Port of the standalone 75 project's css/styles.css. Every rule is scoped * under #pssSurvey and the shared class names it used (.header-container, * .main-container, .question, .submit-btn, ...) carry a pss- prefix, because * the host app already defines those globally with a very different layout. * * Colours come from the host's --theme-primary / --theme-secondary (set by * js/theme.js from the themeId query param), the same variables meals.css, * wardHostess.css and notifications.css use -- so the survey matches whatever * hospital theme the rest of the app is showing. The standalone project's own * Facilities/SC/Empact palettes are deliberately not carried over; its * per-theme layout differences (wording, SC logo) still apply. * * The 75 project sized its own /#wrapper as the viewport; here the * survey is one template among many, so #pssSurvey takes that role instead. */ /* * The percentage-height chain has to be unbroken all the way to the root, or * every height:100% below it resolves against auto and collapses -- which is * what left the bottom of the question list unreachable. * * css/styles.css sets body; html is set here so the chain is complete. */ html, body { height: 100%; } /* * addTemplate() nests the loaded template in its own
, so * the chain is #pssNativeDiv > #pssNative > #pssSurvey. */ #pssNativeDiv, #pssNativeDiv > #pssNative { height: 100%; overflow: hidden; } #pssSurvey { height: 100%; font-family: "Poppins" !important; background-color: #fff; transition: all 0.5s ease-in-out; animation: pssFadeIn 1s; overflow: hidden; } /* * Header + question list are a fixed-height column: the header keeps its * intrinsic size and .pss-main-container takes whatever is left, so it is the * only thing that scrolls. The standalone project instead gave the container a * hardcoded 93vh, which -- once stacked under a 16rem header inside a * height-100% panel -- pushed its last 16rem below the clip and made the * bottom of the survey unreachable. */ #pssSurvey .pss-wrapper { display: flex; flex-direction: column; height: 100%; min-height: 0; } @keyframes pssFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } #pssSurvey .back-btn { color: black; } /* * The standalone project painted brand artwork here (header-bg.png and the * per-theme variants), which is fixed-colour and would fight an arbitrary * hospital theme. * * A flat --theme-primary slab was the obvious replacement but reads far too * heavy on darker themes. The menu header (.header-title in css/styles.css) * has the same problem and solves it by inverting: a near-white surface with * the theme colour carried by the *text*. Matching that keeps the survey light * and consistent with the screen the user just came from, whatever the theme. */ /* * 16rem was sized for the old background artwork; with just the wordmark left * that reads as dead space, so the header is only as tall as its contents. */ #pssSurvey .pss-header-container { width: 100%; flex-shrink: 0; /* A wash of the theme colour rather than the full-strength fill: enough to separate the header from the white question card below it, light enough that dark hospital themes do not turn it into a heavy block. Plain white is the fallback where color-mix is unsupported -- the drop shadow on the card still separates the two. */ background-color: #fff; background-color: color-mix(in srgb, var(--theme-primary) 8%, #fff); display: flex; align-items: center; justify-content: center; padding: 2.5rem 0 2rem; } #pssSurvey #scLogo { width: 5rem; position: absolute; right: 0; margin-right: 20px; top: 20px; } /* * The wordmark carries the theme colour against the light header, mirroring * .header-title on the menu. --theme-secondary is not used here: it defaults * to white and would leave the title invisible on this surface. */ #pssSurvey .pss-header-title { color: var(--theme-primary); text-align: center; padding: 0 5vw; } #pssSurvey .pss-header-title h1 { font-size: 13vw; margin: 0; letter-spacing: 3px; font-weight: bold; height: auto; line-height: 1.1; } #pssSurvey .pss-header-title p { font-size: 5vw; margin: 0; letter-spacing: 0.5px; /* Short theme-coloured rule under the wordmark -- the one piece of solid brand colour in the header, in place of the old full-width slab. */ padding-bottom: 0.6rem; border-bottom: 4px solid var(--theme-primary); display: inline-block; } #pssSurvey .pss-header-title-logo { max-width: 70%; max-height: 22vw; object-fit: contain; } #pssSurvey .pss-main-container { border-radius: 25px 25px 0 0; background-color: white; margin-top: -5px; z-index: 105; padding: 0px 10px 60px; text-align: center; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; flex: 1; /* Without this a flex item refuses to shrink below its content height, so the list would grow past the panel instead of scrolling inside it. */ min-height: 0; overflow-y: auto; overflow-x: hidden; position: relative; -webkit-overflow-scrolling: touch; } #pssSurvey .pss-main-container--intro { font-size: 1.1rem; color: #797979; left: 0; background-color: white; padding: 3vw 5vw 0vw; z-index: 110; margin-bottom: 0; font-weight: normal; } #pssSurvey .pss-next-line { display: block; } #pssSurvey .question-item { margin-top: 2vw; border-radius: 5px; padding: 0px 1vw; transition: all 0.5s ease-in-out; } #pssSurvey .question-item.notValid, #pssSurvey .bootstrap-select.notValid .dropdown-toggle, #pssSurvey .text-area-container.notValid, #pssSurvey .text-short-container.notValid { background-color: #ff00001f; } #pssSurvey .question-item.notValid { padding-bottom: 20px; } #pssSurvey .question { font-weight: bold; padding-top: 5vw; font-size: 1.1rem; margin-bottom: 1rem; } #pssSurvey .infoQuestion { font-weight: light; padding-top: 5vw; font-size: 1.1rem; margin-bottom: 1.5vw; font-style: italic; } #pssSurvey .emoji-container { display: flex; justify-content: space-evenly; align-items: baseline; width: 100%; } #pssSurvey .emoji { width: 13vw; margin: 1vw; transition: all 0.5s ease-in-out; } #pssSurvey .emoji-item-container { border: 1px solid transparent; border-radius: 15px; display: flex; flex-direction: column; transition: all 0.5s ease-in-out; padding: 0.5vw; } #pssSurvey .emoji-item-container.selected-emoji { box-shadow: #3c40434d 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 2px 6px 2px; } #pssSurvey .emoji-item-container .bi-check-circle-fill { color: transparent; transition: all 0.5s ease-in-out; } /* * The five-point scale keeps its own green-to-red ramp: these encode the * answer's meaning (satisfied vs dissatisfied) rather than branding, and the * emoji artwork they sit under is fixed-colour anyway. */ #pssSurvey .selected-emoji .bi-check-circle-fill { color: var(--theme-primary); } #pssSurvey .selected-emoji #green { color: #5ebf58; } #pssSurvey .selected-emoji #light-green { color: #b5db32; } #pssSurvey .selected-emoji #yellow { color: #fab430; } #pssSurvey .selected-emoji #orange { color: #fa7c2f; } #pssSurvey .selected-emoji #red { color: #f30405; } #pssSurvey .binary-emoji { font-size: 2.5rem; margin: 2vw; color: #d8d8d8; transition: all 0.5s ease-in-out; } #pssSurvey .selected-binary-emoji .binary-emoji { filter: drop-shadow(3px 1px 2px #3c40434d); } #pssSurvey .selected-binary-emoji .fa-thumbs-down { color: #f60003; } #pssSurvey .selected-binary-emoji .fa-thumbs-up { color: #5ebf58; } #pssSurvey .selected-binary-emoji .fa-question { color: var(--theme-primary); } #pssSurvey .text-area-container { border: 1px solid var(--theme-primary); height: 100px; margin-top: 3vw; border-radius: 15px; } #pssSurvey .text-area-container:focus { box-shadow: none; border: 1px solid var(--theme-primary); } #pssSurvey .text-short-container { border-radius: 15px; margin-top: 15px; border: 1px solid var(--theme-primary); } #pssSurvey .text-short-container:focus { box-shadow: none; border: 1px solid var(--theme-primary); } #pssSurvey .text-container { border: 1px solid var(--theme-primary); margin-top: 3vw; border-radius: 15px; } #pssSurvey .text-container:focus { box-shadow: none; border: 1px solid var(--theme-primary); } #pssSurvey .pss-submit-btn { margin: 5vw 0vw; border-radius: 15px; width: 100%; background-color: var(--theme-primary); border-color: var(--theme-primary); } #pssSurvey .pss-submit-btn:hover, #pssSurvey .pss-submit-btn:focus, #pssSurvey .pss-submit-btn:active { background-color: var(--theme-primary); border-color: var(--theme-primary); } #pssSurvey .answerItem { border-radius: 45px; border: none; box-shadow: #3c40434d 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 2px 6px 2px; color: black; display: flex; align-items: center; padding: 0.5em; background-color: #fff; } #pssSurvey .radioText { appearance: none; -webkit-appearance: none; border-radius: 50%; width: 1.5em; height: 1.5em; background-color: #f7f7f7; } #pssSurvey .radioText:checked { background: var(--theme-primary); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--theme-primary); } #pssSurvey .radioTextLabel:focus { border: 0px !important; } #pssSurvey .answerItem label { padding: 0px; } #pssSurvey .answerContainer { flex-wrap: wrap; } #pssSurvey .dropdown-toggle { border-radius: 15px; background-color: #fff; border: 1px solid #ced4da; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } #pssSurvey .dropdown-toggle:hover { background-color: #fff; } #pssSurvey .bootstrap-select .btn.show, #pssSurvey .bootstrap-select .btn:active { background-color: #fff !important; } #pssSurvey .bootstrap-select .dropdown-toggle { border-color: var(--theme-primary); } #pssSurvey .bootstrap-select .dropdown-toggle:focus { outline: 1px auto var(--theme-primary) !important; } #pssSurvey .rate-container { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; } #pssSurvey .rate-item-container { padding: 0px; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 11px; } #pssSurvey .rate-container .btn-check:checked + .btn { box-shadow: #3c40434d 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 2px 6px 2px; } #pssSurvey .btn-check { position: fixed; } /* * SweetAlert renders at level, outside #pssSurvey, so these two rules * stay unscoped -- they only restyle the alert buttons the survey opens. */ .swal2-actions { gap: 10px; } .swal2-confirm, .swal2-cancel { border-radius: 15px; margin-top: 3vw; } /* * Small devices and up * */ @media only screen and (min-width: 650px) { #pssSurvey .pss-header-title h1 { font-size: 5rem !important; } #pssSurvey .pss-header-title p { font-size: 1.5rem !important; } #pssSurvey .emoji { width: 3.5rem !important; } } @media only screen and (min-width: 800px) { /* * Side-by-side from here up: header and questions become columns, so the * stack switches to a row and each pane is full height rather than the * header taking a fixed 16rem off the top. */ #pssSurvey .pss-wrapper { flex-direction: row; width: 100%; box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px !important; } #pssSurvey .pss-header-container { width: 50% !important; height: 100% !important; /* The stacked layout's padding would push the wordmark off-centre now that this is a full-height side pane. */ padding: 0; } #pssSurvey .pss-main-container { width: 50% !important; height: 100% !important; flex: none; margin-top: 0; border-radius: 25px 0 0 25px !important; box-shadow: rgba(0, 0, 0, 0.15) -5.6px 0px 3.2px !important; } #pssSurvey .question { padding-top: 0.5vw !important; } #pssSurvey .pss-header-title h1 { font-size: 3.5rem !important; } #pssSurvey .pss-header-title p { font-size: 1.5rem !important; } #pssSurvey .emoji { width: 3.5rem !important; } } @media only screen and (min-width: 1025px) { #pssSurvey #scLogo { margin-right: 0px !important; top: 21% !important; } }