|
| 1 | +/* Portal admin override */ |
| 2 | +/* Editor Override to prevent toolbar to be under header */ |
| 3 | +.mce-fullscreen { z-index: 9000 !important;} |
| 4 | + |
| 5 | +/* MutliView */ |
| 6 | +/* MutliView - Search filters */ |
| 7 | +.form-control-static .badge{ vertical-align: top } |
| 8 | +.filter-forms{ margin-bottom: 5px; display:flex; justify-content: space-between; } |
| 9 | +.filter-forms #id_form{ max-width: 32rem } |
| 10 | +.filter-forms .forms-filter label .form-control, #multi-form-list table.table-hover tbody tr:hover { cursor: pointer } |
| 11 | +.filter-list{ display: flex; justify-content: flex-start; list-style-type: none; padding: 0; margin: 0 } |
| 12 | +.filter-list li{ margin-right: 15px } |
| 13 | +.btn-config-multiview{ position: absolute; right: 5px; top: 5px; } |
| 14 | + |
| 15 | +/* MutliView - table header sort */ |
| 16 | +.btn-sort-group{ display:flex; flex-direction: column; justify-content:center; float: right; margin-right: 15px } |
| 17 | +.btn-sort{ width: 5px; height: 5px; border: 0; margin: 0; padding: 0; line-height: initial; display: inline-block } |
| 18 | +.btn-sort i{ color: #000 } |
| 19 | +.btn-sort.active i{ color: #fff } |
| 20 | + |
| 21 | +/* Table Header */ |
| 22 | +.th-header{ background-color: #EEE } |
| 23 | +.th-active{ background-color: #1d98f6; } |
| 24 | + |
| 25 | +/* Multiview - No answers */ |
| 26 | +#multiview-no-forms{ height:70vh; display:flex; justify-content:center; align-items:start; width:100%;} |
| 27 | + |
| 28 | +/* Multiview - Detail view */ |
| 29 | +#form-response-details{ font-family:'Montserrat-Light','Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif; } |
| 30 | +#form-response-details .box.step-group:hover{ background-color: #f0f0f0} |
| 31 | +#form-response-details legend { font-weight:400; font-size:130%; border-bottom:1px solid #1d98f6; color:#1d98f6;width: 100%; } |
| 32 | +#form-response-details .fieldset-group .row:hover{ color: #1d98f6; } |
| 33 | + |
| 34 | +/* Multiview - Main list */ |
| 35 | +#multi-form-list th{ text-transform: lowercase } |
| 36 | +#multi-form-list th::first-letter{ text-transform: uppercase } |
| 37 | +#multi-form-list tr:hover{ cursor: pointer; color: var( --info ) } |
| 38 | + |
| 39 | +/* Multiview - Aside - timeline */ |
| 40 | +.timeline-form { list-style-type: none; position: relative; } |
| 41 | +.timeline-form:before { content: ' '; background: #d4d9df; display: inline-block; position: absolute; left: 29px; width: 2px; height: 100%; z-index: 400; } |
| 42 | +.timeline-form > li { margin: 20px 0; padding-left: 20px;} |
| 43 | +.timeline-form > li:before {content: ' ';background: white;display: inline-block; position: absolute; border-radius: 50%; border: 3px solid #22c0e8; left: 20px; width: 20px; height: 20px; z-index: 400;} |
| 44 | + |
| 45 | +/* Multiview - Aside - Scroll */ |
| 46 | +#scroll { position: fixed; right: 60px; bottom: 60px; cursor:pointer; width:50px; height:50px; background-color:#1d98f6; text-indent:-9999px; display:none; -webkit-border-radius:60px;-moz-border-radius:60px; border-radius:60px} |
| 47 | +#scroll span { position:absolute; top:50%;left:50%; margin-left:-8px;margin-top:-12px; height:0; width:0; border:8px solid transparent; border-bottom-color:#fff; } |
| 48 | +#scroll:hover { background-color:#e74c3c; opacity:1;filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)" } |
| 49 | + |
| 50 | +/* Multiview - TOC */ |
| 51 | +#response-right{ position: sticky; top: 15px; overflow-y: auto; height: auto; padding-bottom: 10vh; } |
| 52 | +#response-right h2{ font-size: 140%; color:#1d98f6; border-bottom: 1px solid #555 } |
| 53 | +#response-right .img-action{ position: absolute; left: 16px; width: 16px } |
| 54 | + |
| 55 | +/* Multiview - Step TOC */ |
| 56 | +#toc-box{ position: sticky; top: 15px; left: 15px; overflow-y: auto; height: auto; width: 15vw; } |
| 57 | +#toc-box .card-header{ padding: .55rem } |
| 58 | +#toc-box .card-body{ padding: 0 } |
| 59 | +#toc-compress-toggle{ position: absolute; top: 10px; right: 10px; } |
| 60 | +#toc-expand-toggle{ position: sticky; z-index: 99; top: 15px; transform: translate(-40px,40px); background-color: #fff; padding: 5px 2px; border: 1px solid #DDD; border-left: 0; border-bottom-right-radius: 3px; border-top-right-radius: 3px; } |
| 61 | +#toc-expand-toggle:hover{ cursor: pointer; } |
| 62 | + |
| 63 | +#step-toc{ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */; height: 75vh; padding: 0 5px; position: relative; overflow-y: scroll; } |
| 64 | +#step-toc::-webkit-scrollbar { display: none; } |
| 65 | +#step-toc .nav-pills{ position: absolute; top: 10px; left: 0; padding: 5px; height: auto; z-index: 1000; width: 100% } |
| 66 | +#step-toc .nav-pills:hover{ cursor: pointer; outline: 1px dotted #000 } |
| 67 | +#step-toc .nav-pills span{ color: #071F32; text-decoration: none; text-overflow: ellipsis; width: 95%; display: block; white-space: nowrap; overflow: hidden;} |
| 68 | +#step-toc .nav-pills li a:hover span{ color: #7b7b7b; outline: 1px dotted #000 } |
| 69 | +#step-toc .nav-pills .active > .nav-link > span{ color: #1d98f6 } |
| 70 | + |
| 71 | +.step-active { animation: heartbeat 1s ease-in-out reverse ; } |
| 72 | + |
| 73 | +/* Admin Map - Module forms-multiviewmapleaflet */ |
| 74 | +#admin-forms-map-toggle{ position: absolute; top: -30px; right: 5px; z-index: 99; } |
| 75 | + |
| 76 | +/** |
| 77 | + * ---------------------------------------- |
| 78 | + * Animation heartbeat |
| 79 | + * ---------------------------------------- |
| 80 | + */ |
| 81 | +@-webkit-keyframes heartbeat { |
| 82 | + from { |
| 83 | + -webkit-transform: scale(1); |
| 84 | + transform: scale(1); |
| 85 | + -webkit-transform-origin: center center; |
| 86 | + transform-origin: center center; |
| 87 | + -webkit-animation-timing-function: ease-out; |
| 88 | + animation-timing-function: ease-out; |
| 89 | + } |
| 90 | + 10% { |
| 91 | + -webkit-transform: scale(0.98); |
| 92 | + transform: scale(0.98); |
| 93 | + -webkit-animation-timing-function: ease-in; |
| 94 | + animation-timing-function: ease-in; |
| 95 | + } |
| 96 | + 45% { |
| 97 | + -webkit-transform: scale(1); |
| 98 | + transform: scale(1); |
| 99 | + -webkit-animation-timing-function: ease-out; |
| 100 | + animation-timing-function: ease-out; |
| 101 | + } |
| 102 | +} |
| 103 | + |
| 104 | +@keyframes heartbeat { |
| 105 | + from { |
| 106 | + -webkit-transform: scale(1); |
| 107 | + transform: scale(1); |
| 108 | + -webkit-transform-origin: center center; |
| 109 | + transform-origin: center center; |
| 110 | + -webkit-animation-timing-function: ease-out; |
| 111 | + animation-timing-function: ease-out; |
| 112 | + } |
| 113 | + 10% { |
| 114 | + -webkit-transform: scale(0.98); |
| 115 | + transform: scale(0.98); |
| 116 | + -webkit-animation-timing-function: ease-in; |
| 117 | + animation-timing-function: ease-in; |
| 118 | + } |
| 119 | + 45% { |
| 120 | + -webkit-transform: scale(1); |
| 121 | + transform: scale(1); |
| 122 | + -webkit-animation-timing-function: ease-out; |
| 123 | + animation-timing-function: ease-out; |
| 124 | + } |
| 125 | +} |
| 126 | + |
| 127 | +/* ******************************** |
| 128 | +*** Manage Question Form ****** |
| 129 | +******************************** */ |
| 130 | +/* Breadcrumb for forms */ |
| 131 | +#breadforms{ margin-bottom: 0 } |
| 132 | + |
| 133 | +/* Form Creation and Modification */ |
| 134 | +.btn-add-entry { text-align: left; margin: 5px auto; width: 100%; justify-content: space-between; flex-direction: row-reverse;} |
| 135 | +.form .form-group .checkbox label{ font-weight: bold } |
| 136 | +.forms-questions{ position: relative } |
| 137 | +.forms-questions header{ padding: 10px 5px; border-radius: 5px } |
| 138 | +.forms-questions header .radio{ padding-top: 0 } |
| 139 | +.forms-questions header .radio label{ font-size: 2.2rem; padding-left: 0 } |
| 140 | +.forms-questions header .radio span{ display: inline-block; margin:0 5px } |
| 141 | +.forms-questions .group-toggle{ cursor: pointer } |
| 142 | +.forms-questions tr.tr-group {box-shadow:3px 3px 3px gainsboro } |
| 143 | +.forms-questions .group td{ padding: 0 5px; vertical-align: middle } |
| 144 | +.forms-questions .group td label{ cursor: pointer; margin-bottom: 0; } |
| 145 | +.forms-questions .group td label h4 span{ font-size: 1.8rem } |
| 146 | +.forms-questions .group td label h4 i{ display: none } |
| 147 | +.forms-questions .group td .radio{ padding-top: 0 } |
| 148 | +.forms-questions .group td:first-child{ border-top-left-radius: 8px; border-bottom-left-radius: 8px; } |
| 149 | +.forms-questions .group td:last-child{ border-top-right-radius: 8px; border-bottom-right-radius: 8px } |
| 150 | +.forms-questions td .btn-link{ white-space: normal; text-align: left;} |
| 151 | + |
| 152 | +/* Fields - Aside */ |
| 153 | +#sticky-container{ min-height: 100vh; } |
| 154 | +#info-right{ position: -webkit-sticky; position: sticky; top: 60px } |
| 155 | +#info-right h2{ font-size: 140%; color:#1d98f6; border-bottom: 1px solid #555 } |
| 156 | +#info-right .img-action{ position: absolute; left: 20px; width:24px } |
| 157 | + |
| 158 | +/* Iframe to show management screens to manage links between steps and some other properties */ |
| 159 | +#modalIframe{ border: 0; overflow: auto; width: 100%; height: 85vh } |
| 160 | +#modify_control .modal-footer{ display: flex; justify-content: flex-end; } |
| 161 | + |
| 162 | +.forms-questions .radio input{ position: absolute; left: -999999px } |
| 163 | +.forms-questions .radio input ~ span.group-radio-label {font-size: 1.5rem; } |
| 164 | +.forms-questions .radio input ~ span.group-radio-label:before {font-family:'Font Awesome 5 Free'; content: '\f0c8'; font-weight:400;} |
| 165 | +.forms-questions .radio input:checked ~ span.group-radio-label:before {content: '\f14a'; font-weight:900; } |
| 166 | +.forms-questions .list-group li .fa{ margin-right: 10px } |
| 167 | +.forms-questions .list-group li{ position: relative; list-style-type: none } |
| 168 | +.forms-questions .list-group li .btn-entry:hover { width: 100%;text-align: left;background-color: #555;color: #fff } |
| 169 | + |
| 170 | +/* Manage Steps - Vis Graphical Step */ |
| 171 | +#renderNetwork{ margin-top: 0 } |
| 172 | +#mynetwork { width: 100%; height: 70vh; border: 1px solid lightgray } |
| 173 | +.page-break { page-break-after: always; page-break-inside: avoid; clear: both } |
| 174 | +.page-break-before { page-break-before: always; page-break-inside: avoid; clear: both } |
| 175 | +.vis-network .vis-navigation .vis-button:hover{ box-shadow: none; opacity: 0.7 } |
| 176 | + |
| 177 | +/* Preview */ |
| 178 | +#form-validate .breadcrumb .breadcrumb-item .btn.btn-link{ padding: 0; } |
| 179 | +#form-validate > .card > .card-header:before{ content: attr(data-step); font-size: 1.5rem; font-weight: 600; background-color: #656d77; color: #fff; padding: 1.085rem 2rem; top: 0; position: relative;} |
| 180 | +#form-validate > .card > .card-header > .card-title { font-size: 1.5rem; color: #656d77; font-weight: 600; padding-left: .5rem; } |
| 181 | +#form-validate > .card > .card-header { padding: 0; margin-bottom: 0; } |
| 182 | + |
| 183 | +/* Title */ |
| 184 | +.step .step-title .step-number > svg{ width: 2.5rem } |
| 185 | +.step .step-title .step-number > svg > path{ fill: var(--tblr-body-color ) } |
| 186 | + |
| 187 | +/* Breadcrumb */ |
| 188 | +.step.step-next{ padding: .75rem 0; margin-bottom: 1rem; color: #656d77; background-color: #fff; border-bottom: 1px solid rgba(101,109,119,.16); } |
| 189 | +.step.step-done > .step-title > .container, .step.step-done > .step-title + .container, .step.step-next > .step-title > .container{ padding-right: 0; padding-left: 0; margin-right: 0; margin-left: 0; max-width: 100%; } |
| 190 | +.step.step-next > .step-title > .container > h1:before { content: attr(data-step);background-color: #656d77; color: #fff; padding: 1.085rem 2rem; top: .25rem; position: relative;} |
| 191 | + |
| 192 | +.step.step-done{ box-shadow: rgba(35,46,60,.04) 0 2px 4px 0; border: 1px solid rgba(101,109,119,.16); flex: 1 1 auto; position: relative; background-color: #fff; border: 1px solid rgba(101,109,119,.16); border-radius: 4px; padding: 1rem; margin-bottom: 1rem} |
| 193 | +body[data-bs-theme="dark"] .step.step-done{ background-color: var(--tblr-body-bg ) } |
| 194 | + |
| 195 | +.step.step-done > .step-title > .container > h1{ display: flex; align-items: center; border-bottom: 1px solid rgba(101,109,119,.16); } |
| 196 | +.step.step-done > .step-title > .container > h1 div{ margin-left: auto; margin-right: 2rem; } |
| 197 | +.step.step-done > .step-title > .container > h1 span{ margin-left:.75rem; color: #656d77; } |
| 198 | +.step.step-done > .step-title > .container > h1:before { content: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="rgb(255,255,255)" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="9" /><path d="M9 12l2 2l4 -4" /%3e%3c/svg%3e'); background-color: #656d77; color: #fff; padding: 1.185rem 1.75rem; top: 0; position: relative; } |
| 199 | + |
| 200 | +/* RESPONSIVE FIX */ |
| 201 | +/* Small Devices, Tablets |
| 202 | + */ |
| 203 | +@media only screen and (min-width:600px) and (max-width:992px) { |
| 204 | + ul#info-right {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between;} |
| 205 | + ul#info-right li {flex-grow: 0; flex-shrink: 0; flex-basis: 49%;} |
| 206 | +} |
| 207 | +@media only screen and (max-width :768px) { |
| 208 | + #step-toc .nav-pills span{ width: 50px; } |
| 209 | + #multiview-no-forms { height: auto } |
| 210 | +} |
| 211 | + |
| 212 | +/* Small devices (landscape phones, 576px and up) */ |
| 213 | +/* Extra small devices (portrait phones, less than 576px) */ |
| 214 | +@media (max-width: 575.98px) { |
| 215 | + #step-toc{ display: none } |
| 216 | + .filter-list{display: block;} |
| 217 | + .btn-config-multiview{ position:relative; display: block; margin-bottom: 15px} |
| 218 | +} |
| 219 | + |
| 220 | +/* Mobile First */ |
| 221 | +@media screen and (min-width: 768px){ |
| 222 | + /* Module Extend comment */ |
| 223 | + .list-timeline:not(.list-timeline-simple) .list-timeline-content { padding: .5rem 1.5rem .5rem 3.5rem } |
| 224 | + /* Timeline for comments extend */ |
| 225 | + .list-timeline:not(.list-timeline-simple) .list-timeline-content:hover{ background-color: var( --light ); border-radius: 15px; } |
| 226 | + .list-timeline:not(.list-timeline-simple) .list-timeline-icon { left: .5rem; } |
| 227 | + .list-timeline:not(.list-timeline-simple):before { left: calc( 1.5rem + 2px); } |
| 228 | + .list-timeline:not(.list-timeline-simple)>li { margin-left: 0; } |
| 229 | + /* iframe */ |
| 230 | + #modalIframe{ height: 75vh } |
| 231 | +} |
| 232 | + |
| 233 | +@media ( min-width: 992px ) { |
| 234 | + #modalIframe{ height: 55vh } |
| 235 | +} |
0 commit comments