Index: lams_central/web/css/bootstrap5.custom.scss =================================================================== diff -u -rf11663c9b27c276fae910e6c3fa5561a3e2af781 -r9e131a46ef30a0bd2b9407498b3840e0801f064d --- lams_central/web/css/bootstrap5.custom.scss (.../bootstrap5.custom.scss) (revision f11663c9b27c276fae910e6c3fa5561a3e2af781) +++ lams_central/web/css/bootstrap5.custom.scss (.../bootstrap5.custom.scss) (revision 9e131a46ef30a0bd2b9407498b3840e0801f064d) @@ -11,8 +11,4 @@ :root { --lams-background-gray: #F8F8F8; /* rgb(248, 248, 248) */ -} - -.btn-success, .btn-success:hover{ - color: $white; } \ No newline at end of file Index: lams_central/web/css/components-responsive.css =================================================================== diff -u -r9883884dd081926917115f0d7a105ddd4c89d2c1 -r9e131a46ef30a0bd2b9407498b3840e0801f064d --- lams_central/web/css/components-responsive.css (.../components-responsive.css) (revision 9883884dd081926917115f0d7a105ddd4c89d2c1) +++ lams_central/web/css/components-responsive.css (.../components-responsive.css) (revision 9e131a46ef30a0bd2b9407498b3840e0801f064d) @@ -1,3 +1,4 @@ +/* Currently unused .visible-xs { display: none !important; } @@ -58,4 +59,6 @@ .bbox-right.bbox_body .bbox-col-gate select { margin-top: 1rem; } -} \ No newline at end of file +} + + */ \ No newline at end of file Index: lams_central/web/css/components.css =================================================================== diff -u -r798e370ebcf193550faac45abc916946a96ac0b6 -r9e131a46ef30a0bd2b9407498b3840e0801f064d --- lams_central/web/css/components.css (.../components.css) (revision 798e370ebcf193550faac45abc916946a96ac0b6) +++ lams_central/web/css/components.css (.../components.css) (revision 9e131a46ef30a0bd2b9407498b3840e0801f064d) @@ -1,55 +1,563 @@ +@font-face { + font-family: mont-bold; + src: url(/lams/includes/fonts/FontsFree-Net-Mont-Bold.ttf); +} + +@font-face { + font-family: mont-regular; + src: url(/lams/includes/fonts/FontsFree-Net-Mont1.ttf); +} + body.component { + font-family: mont-regular, sans-serif; background-color: var(--lams-background-gray); } -body.component .tooltip-inner { - background-color: #FFFFFF; - color: #212529; - border: 1px solid #707070; - padding: .5rem; - font-size: .9rem; - text-align: left; - line-height: 1.2; +body.component .btn-success, +body.component .btn-success:hover { + color: #fff; } -body.component .tooltip.bs-tooltip-top .arrow:before { - border-top-color: #707070 !important; +body.component .form-select-sm, +body.component .btn-sm, +body.component .btn-group-sm>.btn { + font-size: 15px; } -body.component .tooltip.bs-tooltip-top .arrow:before { - border-color: #fff; +body.component .toast-top { + position: fixed; + top: 3rem; + left: 50%; + transform: translate(-50%, 0px); + z-index: 10; } -body.component .info_icon { - font-size: .95rem; +body.component .toast-top .alert { + margin: 0; } +body.component .toast { + border-color: var(--bs-yellow); + border-width: 3px; + font-size: 1rem; +} + +body.component .table-hover > tbody > tr:hover > * { + --bs-table-accent-bg: var(--bs-gray-200); + color: var(--bs-black) !important; +} + +body.component #confirmationDialog { + z-index: calc(var(--bs-modal-zindex) + 1); +} + +body.component .ui-menu-item-wrapper.autocomplete-menu-item-with-portrait { + display: flex; + justify-content: space-between; + padding: 5px; +} + +body.component .dialogContainer { + display: none; + -webkit-overflow-scrolling: touch !important; + overflow: auto; +} + +body.component .dialogContainer iframe { + width: 100%; + height: calc(100% - 10px); + border: none; +} + +body.component .dialogContainer .dialogTitle { + text-align: center; + font-weight: 500; +} + +body.component .dialogContainer .modal-body { + height: 100%; + max-height: calc(100% - 56px); + padding: 10px; + overflow: auto; +} + +body.component .dialogContainer .bottom-buttons { + margin-bottom: 5px; +} + +body.component .ui-front { + z-index: 1100; +} + +body.component .ui-front.ui-autocomplete { + border-radius: 0 0 5px 5px; +} + +body.component .portrait-sm { + width: 35px; + height: 35px; + display: inline-block; + background-repeat: no-repeat; + background-size: cover; +} + +body.component .portrait-md { + width: 80px; + height: 80px; + display: inline-block; + background-repeat: no-repeat; + background-size: cover; +} + +body.component .portrait-lg { + width: 200px; + height: 200px; + display: inline-block; + background-repeat: no-repeat; + background-size: cover; +} + +body.component .portrait-xl { + width: 400px; + height: 400px; + display: inline-block; + background-repeat: no-repeat; + background-size: cover; +} + +body.component .portrait-container-sm { + height: 38px; + margin-top: 3px; +} + +body.component .leader-display { + margin: 0px; +} + +body.component .leader-display h4 { + margin-bottom: 0px; +} + +body.component .popover-link { + color: var(--bs-blue) !important; +} + +body.component .popover-title { + background-color: var(--bs-gray); +} + +body.component .popover-content-with-portrait { + min-height: 220px; + min-width: 220px; +} + +body.component .portrait-color-0 { + color: black; +} + +body.component .portrait-color-1 { + color: var(--bs-red); +} + +body.component .portrait-color-2 { + color: var(--bs-yellow); + filter: brightness(70%); +} + +body.component .portrait-color-3 { + color: var(--bs-gray); +} + +body.component .portrait-color-4 { + color: var(--bs-green); +} + +body.component .portrait-color-5 { + color: var(--bs-blue); +} + +body.component .portrait-sm-lineheight { + line-height: 32px; + vertical-align: top; +} + +body.component .portrait-generic-sm { + display: inline-block; + height: 35px; + vertical-align: middle; +} + +body.component .portrait-generic-sm:before { + content: "\f2be"; + font-family: FontAwesome; + font-style: normal; + font-size: 35px; + font-weight: normal; + line-height: 35px; +} + +body.component .portrait-generic-md { + display: inline-block; + height: 80px; + vertical-align: middle; +} + +body.component .portrait-generic-md:before { + content: "\f2be"; + font-family: FontAwesome; + font-style: normal; + font-size: 80px; + font-weight: normal; + line-height: 65px; +} + +body.component .portrait-generic-lg { + display: inline-block; + height: 200px; + vertical-align: middle; +} + +body.component .portrait-generic-lg:before { + content: "\f2be"; + font-family: FontAwesome; + font-style: normal; + font-size: 200px; + font-weight: normal; + line-height: 200px; +} + +body.component .portrait-round { + border-radius: 50%; +} + .component-page-wrapper { min-height: 100vh; border-radius: 2rem; overflow: hidden; } -.component-page-wrapper input::-webkit-input-placeholder { - color: #626262; +.component-page-wrapper .btn { + border-radius: 1.0rem; } -.component-page-wrapper input::-moz-placeholder { - color: #626262; +.component-page-wrapper i.fa[role="button"] { + cursor: pointer; } -.component-page-wrapper .btn { - border-radius: 1.0rem; +.component-page-wrapper table.table thead th { + border: none; + border-bottom: 2px solid var(--bs-blue); } -.component-page-wrapper i.fa[role="button"] { - cursor : pointer; +.component-page-wrapper table.table tbody td, +.component-page-wrapper table.table tbody th { + border: none; + border-bottom: 2px solid var(--bs-gray-200); } -.component-page-wrapper .sr-only, .sr-only-focusable, .sr-only:hover { - color: black; +.component-page-wrapper .card-header { + background-color: var(--bs-gray-200); } +.component-page-wrapper input:focus, +.component-page-wrapper button:focus, +.component-page-wrapper textarea:focus { + outline: none; +} + +.component-page-wrapper input::placeholder { + opacity: 0.7; +} + +.component-page-wrapper a:hover, +.component-page-wrapper a:focus { + text-decoration: none; +} + +.component-page-wrapper .switch input { + position: absolute; + height: 1px; + width: 1px; + background: none; + border: 0; + clip: rect(0, 0, 0, 0); + clip-path: inset(50%); + overflow: hidden; + padding: 0; +} + +.component-page-wrapper .switch input ~ label { + position: relative; + min-width: calc(calc(2.375rem * .8)* 2); + border-radius: calc(2.375rem * .8); + height: calc(2.375rem * .8); + line-height: calc(2.375rem * .8); + display: inline-block; + cursor: pointer; + outline: none; + user-select: none; + vertical-align: middle; + text-indent: calc(calc(calc(2.375rem * .8)* 2)+ .5rem); + margin-bottom: 0; +} + +.component-page-wrapper .switch input ~ label::before, +.component-page-wrapper .switch input ~ label::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: calc(calc(2.375rem * .8)* 2); + bottom: 0; + display: block; +} + +.component-page-wrapper .switch input ~ label::before { + right: 0; + background-color: var(--bs-gray); + border-radius: calc(2.375rem * .8); + transition: 0.2s all; +} + +.component-page-wrapper .switch input ~ label::after { + top: 2px; + left: 2px; + width: calc(calc(2.375rem * .8) - calc(2px * 2)); + height: calc(calc(2.375rem * .8) - calc(2px * 2)); + border-radius: 50%; + background-color: white; + transition: 0.2s all; +} + +.component-page-wrapper .switch input:checked ~ label::before { + background-color: var(--bs-green); +} + +.component-page-wrapper .switch input:checked ~ label::after { + margin-left: calc(2.375rem * .8); +} + +.component-page-wrapper .switch input:focus ~ label::before { + outline: none; + box-shadow: 0 0 0 0.2rem rgba(0, 136, 221, 0.25); +} + +.component-page-wrapper .switch input:disabled ~ label { + color: #868e96; + cursor: not-allowed; +} + +.component-page-wrapper .switch input:disabled ~ label::before { + background-color: #e9ecef; +} + +.component-page-wrapper .switch.switch-sm { + font-size: 1rem; +} + +.component-page-wrapper .switch.switch-sm input ~ label { + min-width: calc(calc(1.9375rem * .8)* 2); + height: calc(1.9375rem * .8); + line-height: calc(1.9375rem * .8); + text-indent: calc(calc(calc(1.9375rem * .8)* 2)+ .5rem); +} + +.component-page-wrapper .switch.switch-sm input ~ label::before { + width: calc(calc(1.9375rem * .8)* 2); +} + +.component-page-wrapper .switch.switch-sm input ~ label::after { + width: calc(calc(1.9375rem * .8) - calc(2px * 2)); + height: calc(calc(1.9375rem * .8) - calc(2px * 2)); +} + +.component-page-wrapper .switch.switch-sm input:checked ~ label::after { + margin-left: calc(1.9375rem * .8); +} + +.component-page-wrapper .switch+.switch { + margin-left: 1rem; +} + +.component-page-wrapper .editable-click, +.component-page-wrapper a.editable-click, +.component-page-wrapper a.editable-click:hover { + border-bottom: none; +} + + +.component-page-wrapper .component-sidebar { + position: absolute; + height: initial; + width: 7rem; + padding: 0.7rem 1.7rem 2rem 1.7rem; + border-radius: 0 0 1.2rem 1.2rem; + background-color: var(--bs-white); + text-align: center; + display: flex; + align-items: center; + flex-direction: column; + transition: all .3s ease; + transform: translateX(-7rem); + z-index: 1; + +} + +.component-page-wrapper .component-sidebar.active { + transform: translateX(0); +} + +.component-page-wrapper .component-sidebar .lams-logo { + width: 3.6rem; + margin-bottom: 1.2rem; +} + +.component-page-wrapper .component-sidebar .component-menu { + width: 100%; + display: flex; + justify-content: flex-start; +} + +.component-page-wrapper .component-sidebar .component-menu-btn { + width: 3.6rem; + height: 100%; +} + +.component-page-wrapper .component-sidebar .component-menu-btn .navigate-btn-container { + margin-bottom: 10px; +} + + +.component-page-wrapper .component-menu-btn a { + width: 3.1rem; + height: 3.1rem; +} + +.component-page-wrapper .component-menu-btn a i.fa { + padding-top: 1.1rem; +} + +.component-page-wrapper .component-sidebar .component-menu-btn label { + display: block; + font-size: 15px; +} + + +.component-page-wrapper .top-menu, +.component-page-wrapper .top-menu-btn { + display: flex; +} + +.component-page-wrapper .top-menu input { + width: 100%; + height: 3rem; + border-radius: 1rem; + border: 0; +} + +/* Unused or used in assessment rewritten authoring */ +/* + +.content-left { + -ms-flex: 0 0 26.5rem; + flex: 0 0 26.5rem; + max-width: 26.5rem; +} + +.content-right { + -ms-flex: 0 0 calc(100% - 26.5rem); + flex: 0 0 calc(100% - 26.5rem); + max-width: calc(100% - 26.5rem); +} + +.graph-con { + min-height: 12rem; + width: calc(100% - 8rem); + overflow: hidden; + min-height: 11.11rem !important; +} + + +.tablesorter { + max-width: 100%; + margin-top: .75rem; +} + +.tablesorter-bootstrap:not (.table-dark ) thead:not (.thead-dark ) + .tablesorter-header, .tablesorter-bootstrap:not (.table-dark ) tfoot th, + .tablesorter-bootstrap:not (.table-dark ) tfoot td { + background: #fff; +} + +.tablesorter td a { + color: #2E384D; +} + +.tablesorter td ul { + margin-bottom: 0; +} + +.tablesorter td input.form-control { + height: 2.5rem !important; + width: 3.5rem !important; + border-radius: 1.1rem !important; + text-align: center; +} + + +.switch.switch-lg { + font-size: 1.25rem; +} + +.switch.switch-lg input ~ label { + min-width: calc(calc(3rem * .8)* 2); + height: calc(3rem * .8); + line-height: calc(3rem * .8); + text-indent: calc(calc(calc(3rem * .8) * 2) + .5rem); +} + +.switch.switch-lg input ~ label::before { + width: calc(calc(3rem * .8)* 2); +} + +.switch.switch-lg input ~ label::after { + width: calc(calc(3rem * .8) - calc(2px * 2)); + height: calc(calc(3rem * .8) - calc(2px * 2)); +} + +.switch.switch-lg input:checked ~ label::after { + margin-left: calc(3rem * .8); +} + +.banner-box-col-gate p.grey_text { + color: #677084; + font-size: 1rem; +} + +body.component .info_icon { + font-size: .95rem; +} + + +body.component .tooltip-inner { + background-color: #FFFFFF; + color: #212529; + border: 1px solid #707070; + padding: .5rem; + font-size: .9rem; + text-align: left; + line-height: 1.2; +} + +body.component .tooltip.bs-tooltip-top .arrow:before { + border-top-color: #707070 !important; +} + +body.component .tooltip.bs-tooltip-top .arrow:before { + border-color: #fff; +} + + .component-page-wrapper .collapsible-link { width: 100%; position: relative; @@ -67,7 +575,8 @@ font-size: 1.8rem; } -.component-page-wrapper .collapsible-link[aria-expanded='true']::before { +.component-page-wrapper .collapsible-link[aria-expanded='true']::before + { content: '\f139'; color: #3C42E0; } @@ -84,30 +593,6 @@ content: "\f054"; } -.component-page-wrapper table.table thead th { - border: none; - border-bottom: 2px solid #20639B; -} - -.component-page-wrapper table.table tbody td, -.component-page-wrapper table.table tbody th { - border: none; - border-bottom: 2px solid #C3CEDC; -} - -.component-page-wrapper .card { - border-bottom: none; -} - -.component-page-wrapper .card-header { - background-color: transparent; -} - -.component-page-wrapper .card-body { - border-bottom: 1px rgba(0, 0, 0, 0.125) solid; - border-radius: 0.25rem; -} - .component-page-content { width: 100%; min-height: 100%; @@ -258,39 +743,14 @@ margin-bottom: 1rem; } -.component-sidebar { - position: absolute; - height: 100%; - width: 7rem; - padding: 3.4rem 1.7rem 2rem 1.7rem; - border-radius: 2rem 0 0 2rem; - background-color: #fff; - text-align: center; - display: flex; - align-items: flex-start; - flex-direction: column; - transition: all .3s ease; - transform: translateX(-7rem); - z-index: 1; -} - -.component-sidebar.active { - transform: translateX(0); -} - -.component-sidebar .component-menu-btn a { - margin-bottom: 1rem; -} - -.component-sidebar > ul { +.component-sidebar>ul { list-style: none; padding: 0; margin: 0; margin-bottom: auto; } -.component-sidebar .logo-li, -.component-sidebar .lams-logo { +.component-sidebar .logo-li, .component-sidebar .lams-logo { margin-bottom: 4rem; } @@ -354,47 +814,10 @@ margin-left: 1.8rem; } -.component-page-wrapper .top-menu { - display: flex; -} - -.component-page-wrapper .top-menu-btn { - display: flex; -} - -.component-page-wrapper .component-menu-btn a { - width: 3.1rem; - height: 3.1rem; -} - -.component-page-wrapper .component-menu-btn a i.fa { - padding-top: 1.1rem; -} - .component-page-wrapper .component-menu-btn a img { width: 1rem; } -.component-page-wrapper .top-menu a { - margin-left: .6rem; -} - -.component-page-wrapper .top-menu form { - position: relative; - width: 18.8rem; - margin-right: 3rem; -} - -.component-page-wrapper .top-menu input { - width: 100%; - height: 3.1rem; - border-radius: 1rem; - border: 0; - padding-left: 1.2rem; - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.02); - color: #ACB5CC; -} - .component-page-wrapper .top-menu form img { position: absolute; right: 1.2rem; @@ -403,14 +826,18 @@ width: 1.2rem; } -.component-page-wrapper .top-menu input::placeholder { - color: #ACB5CC; +.component-page-wrapper .top-menu a { + margin-left: .6rem; } -.component-page-wrapper .graph-col { - + +.component-page-wrapper .top-menu form { + position: relative; + width: 18.8rem; + margin-right: 3rem; } + .component-page-wrapper .graph-col ul { margin: auto 0; width: 8rem; @@ -449,221 +876,642 @@ } -/* Switch */ +#qb-question-authoring-modal .modal-content { + height: 100%; +} -.switch input { +#qb-question-authoring-modal iframe { + width: 100%; + height: 100%; + border: none; +} + +.monitoring-page-content .graph-grades { + background-color: #fff; + box-shadow: 0px 20px 20px #2E384D1A; + border-radius: 1.2rem; + margin-top: 2rem; + padding: 1rem 1.5rem; + display: flex; + justify-content: space-between; +} + +.monitoring-page-content .graph-star-col { + width: 5rem; +} + +.monitoring-page-content .graph-star-col img { + width: 3rem; + max-width: 100%; +} + +.monitoring-page-content .graph-star-col p { + color: #ACB5CC; + font-family: mont-bold, sans-serif; + text-transform: uppercase; + font-size: .7rem; + margin: 0; + margin-top: .4rem; + letter-spacing: 2px; +} + +.monitoring-page-content .grades-progress-col { + width: calc(100% - 5rem); +} + +.monitoring-page-content .grades-score p { + width: 6rem; + text-align: right; + color: #2E384D; + font-family: mont-regular, sans-serif; + font-size: .7rem; + margin: 0; + margin-bottom: .5rem; +} + +.monitoring-page-content .grades-progress-bar { + margin-bottom: .5rem; + padding-left: 1.5rem; + width: calc(100% - 6rem); +} + +.monitoring-page-content .grades-score p span { + color: #ACB5CC; + margin-right: .4rem; +} + +.monitoring-page-wrapper .progress-div { + height: 60%; + margin-top: .2rem; + border-radius: 45px; + position: relative; +} + +.monitoring-page-wrapper #progress-bar-1 { + background-color: #05CCD6; +} + +.monitoring-page-wrapper #progress-bar-2 { + background-color: #FFC337; +} + +.monitoring-page-wrapper #progress-bar-3 { + background-color: #F83BA3; +} + +.monitoring-page-wrapper .progress-div span { + width: .4rem; + height: .4rem; + border-radius: 50%; position: absolute; - height: 1px; - width: 1px; - background: none; - border: 0; - clip: rect(0, 0, 0, 0); - clip-path: inset(50%); - overflow: hidden; - padding: 0; + right: 0.1rem; + top: .1rem; + background-color: #fff; } -.switch input ~ label { +.monitoring-page-wrapper .user-map-col { + background-image: url(/lams/images/components/lines.png); + background-size: cover; + background-position: 50%; + background-repeat: no-repeat; + border: 1px solid #D2D7E7; + border-radius: 1rem; + overflow: hidden; + padding: 3rem; position: relative; - min-width: calc(calc(2.375rem * .8) * 2); - border-radius: calc(2.375rem * .8); - height: calc(2.375rem * .8); - line-height: calc(2.375rem * .8); +} + +.monitoring-page-wrapper .map-pn { + position: absolute; + right: 1.4rem; + bottom: 1.4rem; + width: 2.5rem; +} + +.monitoring-page-wrapper .map-pn span { + width: 2.5rem; + height: 2.5rem; + border-radius: 50%; display: inline-block; + background-color: #FFFFFF; + box-shadow: 0px 3px 6px #3C42E040; + text-align: center; + line-height: 2.4rem; + margin-top: .7rem; cursor: pointer; - outline: none; - user-select: none; - vertical-align: middle; - text-indent: calc(calc(calc(2.375rem * .8) * 2) + .5rem); - margin-bottom: 0; } -.switch input ~ label::before, .switch input ~ label::after { - content: ''; +.monitoring-page-wrapper .map-pn span img { + width: .9rem; +} + +.monitoring-page-wrapper #score-col1 { + background: transparent linear-gradient(0deg, #FF97CE 0%, #CE80E5 100%) + 0% 0% no-repeat padding-box; + box-shadow: 0px 10px 20px #FF72AC80; +} + +.monitoring-page-wrapper #score-col2 { + background: transparent + linear-gradient(180deg, #1EB0CE 0%, #5FD4CC 100%) 0% 0% no-repeat + padding-box; + box-shadow: 0px 10px 20px #5EC5D180; +} + +.monitoring-page-wrapper .score-col-inner { + border-radius: 1.2rem; + margin-top: 1.9rem; + position: relative; + padding: 1rem 2rem; +} + +.monitoring-page-wrapper .score-col-inner h1 { + color: #fff; + font-family: mont-bold; + font-size: 2.7rem; + margin: 0; +} + +.monitoring-page-wrapper .score-col-inner h1 span { + font-size: 1.6rem; + vertical-align: top; +} + +.monitoring-page-wrapper .score-col-inner img { position: absolute; - top: 0; - left: 0; - width: calc(calc(2.375rem * .8) * 2); - bottom: 0; - display: block; + top: 1.3rem; + right: 1.1rem; + width: 2.5rem; } -.switch input ~ label::before { - right: 0; - background-color: var(--bs-gray); - border-radius: calc(2.375rem * .8); - transition: 0.2s all; +.monitoring-page-wrapper .score-col-inner p { + color: #fff; + font-family: mont-bold; + text-transform: uppercase; + font-size: .7rem; + letter-spacing: 1.8px; + margin: 0; } -.switch input ~ label::after { - top: 2px; - left: 2px; - width: calc(calc(2.375rem * .8) - calc(2px * 2)); - height: calc(calc(2.375rem * .8) - calc(2px * 2)); - border-radius: 50%; - background-color: white; - transition: 0.2s all; + +.monitoring-page-wrapper #sequence-tab-content #required-tasks .badge { + padding: .5rem 1rem; + vertical-align: middle; } -.switch input:checked ~ label::before { - background-color: var(--bs-green); +.monitoring-page-wrapper #sequence-tab-content #insights { + min-width: 350px; } -.switch input:checked ~ label::after { - margin-left: calc(2.375rem * .8); + +.monitoring-page-wrapper .insight-col-content p { + margin: 0; + color: #2E384D; + font-size: .78rem; + margin-bottom: 1rem; + font-family: mont-regular, sans-serif; } -.switch input:focus ~ label::before { - outline: none; - box-shadow: 0 0 0 0.2rem rgba(0, 136, 221, 0.25); +.monitoring-page-wrapper .insight-col-content a { + text-decoration: underline; + color: #3C42E0; } -.switch input:disabled ~ label { - color: #868e96; - cursor: not-allowed; +.monitoring-page-wrapper .content-left.content-left1 { + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; } -.switch input:disabled ~ label::before { - background-color: #e9ecef; +.monitoring-page-wrapper .user-page .score-col-inner { + margin-top: 0; } -.switch.switch-sm { - font-size: 1rem; +.monitoring-page-wrapper #user-score-col1 { + background-color: #FF72AC; + box-shadow: 0 10px 20px rgba(255, 114, 172, .35) } -.switch.switch-sm input ~ label { - min-width: calc(calc(1.9375rem * .8) * 2); - height: calc(1.9375rem * .8); - line-height: calc(1.9375rem * .8); - text-indent: calc(calc(calc(1.9375rem * .8) * 2) + .5rem); +.monitoring-page-wrapper #user-score-col2 { + background-color: #FFCF60; + box-shadow: 0 10px 20px rgba(255, 207, 96, .35) } -.switch.switch-sm input ~ label::before { - width: calc(calc(1.9375rem * .8) * 2); +.monitoring-page-wrapper #user-score-col3 { + background-color: #1AD9B2; + box-shadow: 0 10px 20px rgba(26, 217, 178, .35) } -.switch.switch-sm input ~ label::after { - width: calc(calc(1.9375rem * .8) - calc(2px * 2)); - height: calc(calc(1.9375rem * .8) - calc(2px * 2)); +.monitoring-page-wrapper #user-score-col4 { + background-color: #2DBCE9; + box-shadow: 0 10px 20px rgba(45, 188, 233, .35) } -.switch.switch-sm input:checked ~ label::after { - margin-left: calc(1.9375rem * .8); +.monitoring-page-wrapper .user-score-col { + padding-left: 1.5rem; } -.switch+.switch { - margin-left: 1rem; +.monitoring-page-wrapper .user-score-col h1 { + font-family: 'Poppins', sans-serif; + font-weight: 600; + font-size: 2rem; + margin-bottom: .6rem; } -#qb-question-authoring-modal .modal-content { - height: 100%; +.monitoring-page-wrapper .user-score-col p { + font-family: 'Poppins', sans-serif; + font-weight: 500; + font-size: .8rem; + margin-bottom: .2rem; } -#qb-question-authoring-modal iframe { +.monitoring-page-wrapper .user-score-icon { + width: 4rem; + height: 4rem; + position: relative; + margin-right: 2rem; +} + +.monitoring-page-wrapper .user-score-icon:after { + left: 0; + right: 0; + top: 0; + bottom: 0; + border-radius: 50%; + content: ""; + position: absolute; + background-color: #fff; + opacity: .25; +} + +.monitoring-page-wrapper .user-table-data { + background-color: #fff; + box-shadow: 0 10px 10px rgba(190, 196, 209, .25); + border-radius: 5px; + margin-top: 3.5rem; width: 100%; + padding: 2rem; +} + +.monitoring-page-wrapper .table-sorter-header h1 { + font-family: 'Poppins', sans-serif; + font-weight: 700; + font-size: 1rem; + padding-left: 7rem; +} + +.monitoring-page-wrapper .table-sorter-header .col-6:nth-child(2) h1 { + padding-left: 4rem; +} + +.monitoring-page-wrapper .table-sorter-header.row { + margin-left: 0; + margin-right: 0; + border-bottom: 2px solid #20639B; + padding-bottom: .3rem; +} + +.monitoring-page-wrapper .table-sorter-top.row { + margin-left: 0; + margin-right: 0; + border-bottom: 2px solid #C3CEDC; + padding-top: .5rem; + padding-bottom: .5rem; + cursor: pointer; + transition: all .3s ease; +} + +.monitoring-page-wrapper .table-sorter-top.row:hover { + background-color: #fbfcff; +} + +.monitoring-page-wrapper .table-sorter-top.row img { + width: 2.5rem; + float: left; +} + +.monitoring-page-wrapper .table-sorter-top.row .table-user-name { + padding-left: 3.5rem; +} + +.monitoring-page-wrapper .table-sorter-top.row p { + float: left; + padding-left: 2rem; + font-family: 'Poppins', sans-serif; + font-size: .9rem; + padding-top: .6rem; + margin: 0; +} + +.monitoring-page-wrapper .table-sorter-top.row .table-user-progress { + padding-left: 4.9rem; +} + +.monitoring-page-wrapper .table-sorter-top.row .table-user-progress .progress-col + { + width: 23rem; + max-width: calc(100% - 4rem); + height: .4rem; + border-radius: 45px; + background-color: #F3F5FB; + overflow: hidden; + float: left; + margin-top: 1rem; +} + +.monitoring-page-wrapper .table-sorter-top.row .table-user-progress .progress-col .progress1 + { + float: left; height: 100%; - border: none; + background-color: #FFCF60; } -.toast-top { - position: fixed; - top: 3rem; - left: 50%; - transform: translate(-50%, 0px); - z-index: 10; +.monitoring-page-wrapper .table-sorter-top.row .table-user-progress p { + float: left; + padding-top: 0; + margin-top: .55rem; } -.toast-top .alert { +.monitoring-page-wrapper .table-content-left { + -ms-flex: 0 0 27rem; + flex: 0 0 27rem; + max-width: 27rem; + padding-left: 3.5rem; +} + +.monitoring-page-wrapper .table-content-right { + -ms-flex: 0 0 calc(100% - 27rem); + flex: 0 0 calc(100% - 27rem); + max-width: calc(100% - 27rem); +} + +.monitoring-page-wrapper .table-sorter-content.row { margin: 0; + padding: 1.5rem 0; + display: none; + border-bottom: 2px solid #C3CEDC; } +.monitoring-page-wrapper .table-content-right-inner { + max-height: 48rem; + background-color: #F3F5FB; + border-radius: 5px; + overflow-y: scroll; +} -.editable-click, a.editable-click, a.editable-click:hover { - border-bottom: none; +.monitoring-page-wrapper .user-info-top img { + width: 6rem; + height: 6rem; } -/* Unused? */ -/* +.monitoring-page-wrapper .user-info-top div { + padding-left: 1.5rem; +} -.content-left { - -ms-flex: 0 0 26.5rem; - flex: 0 0 26.5rem; - max-width: 26.5rem; +.monitoring-page-wrapper .user-info-top h1 { + font-family: 'Poppins', sans-serif; + font-weight: 700; + font-size: 1.7rem; + margin-bottom: .5rem; } -.content-right { - -ms-flex: 0 0 calc(100% - 26.5rem); - flex: 0 0 calc(100% - 26.5rem); - max-width: calc(100% - 26.5rem); +.monitoring-page-wrapper .user-info-top p { + margin: 0; } -.graph-con { - min-height: 12rem; - width: calc(100% - 8rem); +.monitoring-page-wrapper .user-info-top p a { + color: #BEC4D1; + font-family: 'Poppins', sans-serif; +} + +.monitoring-page-wrapper .user-info-progress-col { + margin-top: 1.5rem; +} + +.monitoring-page-wrapper .user-info-progress-bar { + width: 75%; + height: .4rem; + border-radius: 45px; + background-color: #F3F5FB; overflow: hidden; - min-height: 11.11rem !important; + margin-top: .4rem; } +.monitoring-page-wrapper .user-info-progress { + width: 75%; + height: 100%; + background-color: #1AD9B2; +} -.tablesorter { - max-width: 100%; - margin-top: .75rem; +.monitoring-page-wrapper .user-info-progress-col p { + margin: 0; + font-family: 'Poppins', sans-serif; + font-size: .8rem; + margin-left: 1rem; } -.tablesorter-bootstrap:not (.table-dark ) thead:not (.thead-dark ) - .tablesorter-header, .tablesorter-bootstrap:not (.table-dark ) tfoot th, - .tablesorter-bootstrap:not (.table-dark ) tfoot td { +.monitoring-page-wrapper .table-graph-h1 { + text-transform: uppercase; + font-family: 'Poppins', sans-serif; + font-weight: 700; + font-size: 1rem; + letter-spacing: 1px; + margin-top: 3rem; +} + +.monitoring-page-wrapper #chart-2, .monitoring-page-wrapper #chart-3, + .monitoring-page-wrapper #chart-4, .monitoring-page-wrapper #chart-5, + .monitoring-page-wrapper #chart-6, .monitoring-page-wrapper #chart-7, + .monitoring-page-wrapper #chart-8 { + height: 256px !important +} + +.monitoring-page-wrapper .content-graph2 { + position: relative; + overflow: hidden; + padding-top: 1rem; +} + +.monitoring-page-wrapper .content-graph2:after { + position: absolute; + content: ""; + height: 3px; + background-color: #fff; + left: 0; + right: 0; + bottom: .5rem; + width: 100%; +} + +.monitoring-page-wrapper .content-graph2 canvas { + position: relative; + left: -5.5rem; +} + +.monitoring-page-wrapper .content-user-graph1, .content-user-graph2 { + padding-right: 3rem; +} + +.monitoring-page-wrapper .content-graph2-inner { + position: relative; +} + +.monitoring-page-wrapper .content-graph2-inner ul { + position: absolute; + right: 0; + top: 30%; +} + +.monitoring-page-wrapper .content-graph2-inner ul li p { + margin: 0; +} + +.monitoring-page-wrapper .content-graph2-inner ul li { + margin-bottom: 1rem; + font-family: 'Poppins', sans-serif; + font-size: .9rem; + margin-bottom: 1rem; + display: flex; +} + +.monitoring-page-wrapper .content-graph2-inner ul li span { + display: inline-block; + width: 12px; + height: 12px; + background-color: #000; + margin-right: .5rem; + border-radius: 50%; + margin-top: 3px; +} + +.monitoring-page-wrapper .content-graph2-inner ul li:nth-child(1) span { + background-color: #1AD9B2; +} + +.monitoring-page-wrapper .content-graph2-inner ul li:nth-child(2) span { + background-color: #FFCF60; +} + +.monitoring-page-wrapper .table-content-right-inner::-webkit-scrollbar { + width: 5px; +} + +.monitoring-page-wrapper .table-content-right-inner::-webkit-scrollbar-track + { background: #fff; } -.tablesorter td a { - color: #2E384D; +.monitoring-page-wrapper .table-content-right-inner::-webkit-scrollbar-thumb + { + background: #20639B; + border-radius: 45px; } -.tablesorter td ul { - margin-bottom: 0; +.monitoring-page-wrapper .cd-timeline__container { + padding: 0 4rem !important; } -.tablesorter td input.form-control { - height: 2.5rem !important; - width: 3.5rem !important; - border-radius: 1.1rem !important; - text-align: center; +.monitoring-page-wrapper .cd-timeline__date { + font-family: 'Poppins', sans-serif; + color: #000; + font-weight: 700; + font-size: .9rem; + padding: 0 1rem; } +.monitoring-page-wrapper .cd-timeline__container::before { + width: 1px; + background-color: transparent; + border: 1px dashed #C3CEDC; +} -.switch.switch-lg { - font-size: 1.25rem; +.monitoring-page-wrapper .cd-timeline__img { + border: 2px solid #C3CEDC; + box-shadow: 0 0 0; + background-color: #F3F5FB; + opacity: 1; } -.switch.switch-lg input ~ label { - min-width: calc(calc(3rem * .8)* 2); - height: calc(3rem * .8); - line-height: calc(3rem * .8); - text-indent: calc(calc(calc(3rem * .8) * 2) + .5rem); +.monitoring-page-wrapper .cd-timeline { + background-color: transparent; } -.switch.switch-lg input ~ label::before { - width: calc(calc(3rem * .8)* 2); +.monitoring-page-wrapper .cd-timeline__block:nth-child(odd) .cd-timeline__content + { + border-right: 4px solid #1AD9B2; } -.switch.switch-lg input ~ label::after { - width: calc(calc(3rem * .8) - calc(2px * 2)); - height: calc(calc(3rem * .8) - calc(2px * 2)); +.monitoring-page-wrapper .cd-timeline__block:nth-child(odd) .cd-timeline__content:before + { + right: -18px; + left: inherit; + border-left-color: #1AD9B2; } -.switch.switch-lg input:checked ~ label::after { - margin-left: calc(3rem * .8); +.monitoring-page-wrapper .cd-timeline__block:nth-child(even) .cd-timeline__content + { + border-left: 4px solid #FFCF60; } -.banner-box-col-gate p.grey_text { - color: #677084; - font-size: 1rem; +.monitoring-page-wrapper .cd-timeline__block:nth-child(even) .cd-timeline__content:before + { + left: -18px !important; + right: inherit !important; + border-right-color: #FFCF60; } -*/ +.monitoring-page-wrapper .cd-timeline__content { + box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05); +} -.form-select-sm, -.btn-sm, .btn-group-sm > .btn { - font-size: 15px; -} \ No newline at end of file +.monitoring-page-wrapper .cd-timeline__content h2 { + font-family: 'Poppins', sans-serif; + color: #000; + font-size: 1.1rem; + font-weight: 600; + border-bottom: 2px solid #C3CEDC; + padding-bottom: 1rem; +} + +.monitoring-page-wrapper .cd-timeline__content h2 span { + float: right; + font-size: .8rem; + background-color: #FFCF60; + color: #fff; + padding: .3rem .8rem; + border-radius: 45px; +} + +.monitoring-page-wrapper .cd-timeline__content p { + border-bottom: 2px solid #C3CEDC; + padding-bottom: .7rem; + margin-top: .7rem; + margin-bottom: .7rem; + padding-left: 1.5rem; + font-family: 'Poppins', sans-serif; + color: #000; + font-weight: 500; + font-size: .8rem; + padding-right: 1.5rem; +} + +.monitoring-page-wrapper cd-timeline__content p span { + float: right; +} + +.monitoring-page-wrapper .progress1.red { + background-color: #FF7272 !important; +} + +.monitoring-page-wrapper .progress1.green { + background-color: #1AD9B2 !important; +} + +.gate-card .card-body { + height: 80px; +} + +.gate-opened-icon { + cursor: pointer; +} +*/ \ No newline at end of file Index: lams_monitoring/web/css/components-monitoring-responsive.css =================================================================== diff -u -rab9c4c312eb687a2b58efc563dc1b824087548e3 -r9e131a46ef30a0bd2b9407498b3840e0801f064d --- lams_monitoring/web/css/components-monitoring-responsive.css (.../components-monitoring-responsive.css) (revision ab9c4c312eb687a2b58efc563dc1b824087548e3) +++ lams_monitoring/web/css/components-monitoring-responsive.css (.../components-monitoring-responsive.css) (revision 9e131a46ef30a0bd2b9407498b3840e0801f064d) @@ -1,3 +1,4 @@ +/* Currently unused .visible-xs { display: none !important; } @@ -101,4 +102,6 @@ .monitoring-page-wrapper .graph-col { display: inline-block !important; } -} \ No newline at end of file +} + +*/ \ No newline at end of file Index: lams_monitoring/web/css/components-monitoring.css =================================================================== diff -u -rd40a833e3c39b4517628fcd947d8da92fc30b37d -r9e131a46ef30a0bd2b9407498b3840e0801f064d --- lams_monitoring/web/css/components-monitoring.css (.../components-monitoring.css) (revision d40a833e3c39b4517628fcd947d8da92fc30b37d) +++ lams_monitoring/web/css/components-monitoring.css (.../components-monitoring.css) (revision 9e131a46ef30a0bd2b9407498b3840e0801f064d) @@ -1,977 +1,217 @@ -@font-face { - font-family: mont-bold; - src: url(/lams/includes/fonts/FontsFree-Net-Mont-Bold.ttf); + +body.component .dialogContainer .dialogSearchPhraseClear { + visibility: hidden; } -@font-face { - font-family: mont-regular; - src: url(/lams/includes/fonts/FontsFree-Net-Mont1.ttf); +body.component .dialogContainer .dialogContainer .pageCell { + vertical-align: middle; } -.toast { - border-color: var(--bs-yellow); - border-width: 3px; - font-size: 1rem; +body.component .dialogContainer .dialogListItem { + height: 3rem; + border-color: var(--bs-gray-300); + border-bottom-width: 2px; + cursor: pointer; } -#confirmationDialog { - z-index: calc(var(--bs-modal-zindex) + 1); +body.component .dialogContainer .dialogListItem:hover { + background-color: var(--bs-gray-200); } -.monitoring-page-wrapper { - font-family: mont-regular, sans-serif; - border-radius: 0; +body.component .dialogContainer .dialogListItem .portrait-sm { + margin: 7px 0 0 7px; } -.monitoring-page-wrapper ul, .monitoring-page-wrapper ol { - list-style: none; - padding: 0; - margin: 0; +body.component .dialogContainer .dialogListItem .portrait-generic-sm { + margin-top: 2px; } -.monitoring-page-wrapper input:focus, .monitoring-page-wrapper button:focus, - .monitoring-page-wrapper textarea:focus { - outline: none; +body.component .dialogContainer .dialogListItem .portrait-sm-lineheight { + display: inline-block; + margin-top: 2px; } -.monitoring-page-wrapper img { - max-width: 100%; +body.component .dialogContainer .dialogListItem .portrait-sm + .portrait-sm-lineheight { + margin-left: 8px; } -.monitoring-page-wrapper dt { - font-weight: normal; - font-family: mont-bold, sans-serif; +body.component .dialogContainer .dialogListItem.dialogListItemSelected { + background-color: rgba(0, 145, 74, 0.1) !important; } -.monitoring-page-wrapper a:hover, .monitoring-page-wrapper a:focus { - text-decoration: none; +body.component .dialogContainer #classMonitorSearchRow { + height: 70px; } -.monitoring-page-wrapper .card-header { - background-color: var(--bs-gray-200); +body.component .dialogContainer #classDialogTable, +body.component .dialogContainer #emailProgressDialogTable { + width: calc(100% - 12px); } +body.component #sequenceInfoDialog { + cursor: pointer; +} + .monitoring-page-content { min-height: 100%; - padding: 2rem 4.8rem 2rem 8rem; + padding: 1rem 4rem 2rem 8rem; transition: all .3s ease; vertical-align: top; } -.component-sidebar { - height: initial; - align-items: center; - padding-top: 1rem; - padding-bottom: 1rem; - border-radius: 0 0 1.2rem 1.2rem; +.monitoring-page-wrapper #lesson-name { + font-size: 2rem; + margin-left: 1.8rem; } -.component-sidebar .lams-logo { - width: 3.6rem; - margin-bottom: 2rem; +.monitoring-page-wrapper #sequenceSearchPhraseContainer { + width: 20rem; + margin-left: 1rem; } -.component-sidebar.active.expanded { - width: 25rem; -} +.monitoring-page-wrapper #sequenceSearchPhrase { + width: 15rem; +} -.component-sidebar.active.expanded ~ .monitoring-page-content.active { - padding-left: 25.8rem; -} +.monitoring-page-wrapper #sequenceSearchPhraseButton { + border: none; + height: 3.1rem; +} -.component-sidebar .component-menu { - width: 100%; - display: flex; - justify-content: flex-start; +.monitoring-page-wrapper #sequenceSearchPhraseClearIcon { + display: none; } -.component-sidebar .component-menu-btn { - width: 3.6rem; - height: 100%; +.monitoring-page-wrapper .component-sidebar.active.expanded { + width: 25rem; } -.component-sidebar .component-menu-btn .navigate-btn-container { - margin-bottom: 10px; +.monitoring-page-wrapper .component-sidebar.active.expanded ~ .monitoring-page-content.active { + padding-left: 25.8rem; } -.component-sidebar .component-menu-btn a { - margin-bottom: 0; -} - -.component-sidebar .component-menu-btn label { - display: block; - font-size: 15px; -} - -.component-sidebar .lesson-properties { +.monitoring-page-wrapper .component-sidebar .lesson-properties { padding-left: 2rem; text-align: left; visibility: hidden; height: 0; } -.component-sidebar .lesson-properties.active { +.monitoring-page-wrapper .component-sidebar .lesson-properties.active { visibility: visible; height: initial; } -.component-sidebar .lesson-properties #lessonDetails { +.monitoring-page-wrapper .component-sidebar .lesson-properties #lessonDetails { opacity: 0; } -.component-sidebar .lesson-properties #lessonDetails > * { +.monitoring-page-wrapper .component-sidebar .lesson-properties #lessonDetails > * { display: none; } -.component-sidebar .lesson-properties.active #lessonDetails { +.monitoring-page-wrapper .component-sidebar .lesson-properties.active #lessonDetails { opacity: 1; transition: opacity .3s ease .3s; } -.component-sidebar .lesson-properties.active #lessonDetails > * { - display: initial; +.monitoring-page-wrapper .component-sidebar .lesson-properties.active #lessonDetails > * { + display: block; } -.component-sidebar .lesson-properties #lessonDetails .btn, -.component-sidebar .lesson-properties #lessonDetails select, -.component-sidebar .lesson-properties #lessonDetails input[type="text"] { - width: 90%; -} -.component-sidebar .lesson-properties #gradebookOnCompleteButton { - margin-top: 1rem; -} - -.component-sidebar .lesson-properties .btn { +.monitoring-page-wrapper .component-sidebar .lesson-properties #lessonDetails .btn { margin-top: .5rem; } -.monitoring-page-wrapper #lesson-name { - margin-left: 4rem; +.monitoring-page-wrapper .component-sidebar .lesson-properties #lessonDetails .btn, +.monitoring-page-wrapper .component-sidebar .lesson-properties #lessonDetails select, +.monitoring-page-wrapper .component-sidebar .lesson-properties #lessonDetails input[type="text"] { + width: 90%; } -.monitoring-page-wrapper #sequence-tab-content { - text-align: center; -} - - -.monitoring-page-wrapper #sequence-tab-content .countdown-timeout { - color: var(--bs-red) !important; -} - -.monitoring-page-wrapper #sequence-tab-content .sequence-tab-layout-column { - margin-bottom: 2rem; - padding-right: 0; - padding-left: var(--bs-gutter-x); -} - -.monitoring-page-content .graph-grades { - background-color: #fff; - box-shadow: 0px 20px 20px #2E384D1A; - border-radius: 1.2rem; - margin-top: 2rem; - padding: 1rem 1.5rem; - display: flex; - justify-content: space-between; -} - -.monitoring-page-content .graph-star-col { - width: 5rem; -} - -.monitoring-page-content .graph-star-col img { - width: 3rem; - max-width: 100%; -} - -.monitoring-page-content .graph-star-col p { - color: #ACB5CC; +.monitoring-page-wrapper .component-sidebar .lesson-properties #lessonDetails dt { + font-weight: normal; font-family: mont-bold, sans-serif; - text-transform: uppercase; - font-size: .7rem; - margin: 0; - margin-top: .4rem; - letter-spacing: 2px; + margin-top: 1rem; } -.monitoring-page-content .grades-progress-col { - width: calc(100% - 5rem); -} - -.monitoring-page-content .grades-score p { - width: 6rem; - text-align: right; - color: #2E384D; - font-family: mont-regular, sans-serif; - font-size: .7rem; - margin: 0; - margin-bottom: .5rem; -} - -.monitoring-page-content .grades-progress-bar { - margin-bottom: .5rem; - padding-left: 1.5rem; - width: calc(100% - 6rem); -} - -.monitoring-page-content .grades-score p span { - color: #ACB5CC; - margin-right: .4rem; -} - -.monitoring-page-wrapper .progress-div { - height: 60%; - margin-top: .2rem; - border-radius: 45px; - position: relative; -} - -.monitoring-page-wrapper #progress-bar-1 { - background-color: #05CCD6; -} - -.monitoring-page-wrapper #progress-bar-2 { - background-color: #FFC337; -} - -.monitoring-page-wrapper #progress-bar-3 { - background-color: #F83BA3; -} - -.monitoring-page-wrapper .progress-div span { - width: .4rem; - height: .4rem; - border-radius: 50%; - position: absolute; - right: 0.1rem; - top: .1rem; - background-color: #fff; -} - -.monitoring-page-wrapper .user-map-col { - background-image: url(/lams/images/components/lines.png); - background-size: cover; - background-position: 50%; - background-repeat: no-repeat; - border: 1px solid #D2D7E7; - border-radius: 1rem; - overflow: hidden; - padding: 3rem; - position: relative; -} - -.monitoring-page-wrapper .map-pn { - position: absolute; - right: 1.4rem; - bottom: 1.4rem; - width: 2.5rem; -} - -.monitoring-page-wrapper .map-pn span { - width: 2.5rem; - height: 2.5rem; - border-radius: 50%; - display: inline-block; - background-color: #FFFFFF; - box-shadow: 0px 3px 6px #3C42E040; - text-align: center; - line-height: 2.4rem; - margin-top: .7rem; - cursor: pointer; -} - -.monitoring-page-wrapper .map-pn span img { - width: .9rem; -} - -.monitoring-page-wrapper #score-col1 { - background: transparent linear-gradient(0deg, #FF97CE 0%, #CE80E5 100%) - 0% 0% no-repeat padding-box; - box-shadow: 0px 10px 20px #FF72AC80; -} - -.monitoring-page-wrapper #score-col2 { - background: transparent - linear-gradient(180deg, #1EB0CE 0%, #5FD4CC 100%) 0% 0% no-repeat - padding-box; - box-shadow: 0px 10px 20px #5EC5D180; -} - -.monitoring-page-wrapper .score-col-inner { - border-radius: 1.2rem; - margin-top: 1.9rem; - position: relative; - padding: 1rem 2rem; -} - -.monitoring-page-wrapper .score-col-inner h1 { - color: #fff; - font-family: mont-bold; - font-size: 2.7rem; - margin: 0; -} - -.monitoring-page-wrapper .score-col-inner h1 span { - font-size: 1.6rem; - vertical-align: top; -} - -.monitoring-page-wrapper .score-col-inner img { - position: absolute; - top: 1.3rem; - right: 1.1rem; - width: 2.5rem; -} - -.monitoring-page-wrapper .score-col-inner p { - color: #fff; - font-family: mont-bold; - text-transform: uppercase; - font-size: .7rem; - letter-spacing: 1.8px; - margin: 0; -} - .monitoring-page-wrapper .monitoring-panel { display: inline-block; width: 100%; height: 100%; - box-shadow: 0px 20px 20px #2E384D1A; - background-color: #fff; + box-shadow: 0px 20px 20px var(--bs-gray-200); + background-color: var(--bs-white); border-radius: 1.2rem; margin-bottom: 3rem; padding: 1.5rem 2rem; } .monitoring-page-wrapper .monitoring-panel h6 { color: var(--bs-gray); - font-family: mont-bold; + font-family: mont-bold, sans-serif; text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 2rem; } -.monitoring-page-wrapper #completion-chart-panel { +.monitoring-page-wrapper #sequence-tab-content { + text-align: center; +} + +.monitoring-page-wrapper #sequence-tab-content .countdown-timeout { + color: var(--bs-red) !important; +} + +.monitoring-page-wrapper #sequence-tab-content .sequence-tab-layout-column { + margin-bottom: 2rem; + padding-right: 0; + padding-left: var(--bs-gutter-x); +} + +.monitoring-page-wrapper #sequence-tab-content #completion-chart-panel { min-width: 250px; } -.monitoring-page-wrapper #completion-chart-panel .panel-body { +.monitoring-page-wrapper #sequence-tab-content #completion-chart-panel .panel-body { height: 351px; } -.monitoring-page-wrapper #completion-chart-panel #completion-chart { +.monitoring-page-wrapper #sequence-tab-content #completion-chart-panel #completion-chart { margin: auto; } -.monitoring-page-wrapper #required-tasks { +.monitoring-page-wrapper #sequence-tab-content #required-tasks { min-width: 410px; } -.monitoring-page-wrapper #required-tasks .row { +.monitoring-page-wrapper #sequence-tab-content #required-tasks .row { margin-bottom: 1.5rem; } -.monitoring-page-wrapper #required-tasks .label { - color: #2E384D; - font-family: mont-regular, sans-serif; - margin: 0; -} - -.monitoring-page-wrapper #required-taskst .label.contribute-activity-title { +.monitoring-page-wrapper #sequence-tab-content #required-tasks .label.contribute-activity-title { font-family: mont-bold, sans-serif; } -.monitoring-page-wrapper #required-tasks .badge { - padding: .5rem 1rem; - vertical-align: middle; -} - - -.monitoring-page-wrapper #required-tasks button.contribute-go-button { +.monitoring-page-wrapper #sequence-tab-content #required-tasks button.contribute-go-button { min-width: 5rem; } -.monitoring-page-wrapper #required-tasks .dropdown-menu li { -} - -.monitoring-page-wrapper #required-tasks .dropdown-item { +.monitoring-page-wrapper #sequence-tab-content #required-tasks .dropdown-item { font-size: .9rem; } -.monitoring-page-wrapper #insights { - min-width: 350px; -} -.monitoring-page-wrapper .insight-col-content p { - margin: 0; - color: #2E384D; - font-size: .78rem; - margin-bottom: 1rem; - font-family: mont-regular, sans-serif; -} - -.monitoring-page-wrapper .insight-col-content a { - text-decoration: underline; - color: #3C42E0; -} - -.monitoring-page-wrapper .content-left.content-left1 { - -ms-flex: 0 0 100%; - flex: 0 0 100%; - max-width: 100%; -} - -.monitoring-page-wrapper .user-page .score-col-inner { - margin-top: 0; -} - -.monitoring-page-wrapper #user-score-col1 { - background-color: #FF72AC; - box-shadow: 0 10px 20px rgba(255, 114, 172, .35) -} - -.monitoring-page-wrapper #user-score-col2 { - background-color: #FFCF60; - box-shadow: 0 10px 20px rgba(255, 207, 96, .35) -} - -.monitoring-page-wrapper #user-score-col3 { - background-color: #1AD9B2; - box-shadow: 0 10px 20px rgba(26, 217, 178, .35) -} - -.monitoring-page-wrapper #user-score-col4 { - background-color: #2DBCE9; - box-shadow: 0 10px 20px rgba(45, 188, 233, .35) -} - -.monitoring-page-wrapper .user-score-col { - padding-left: 1.5rem; -} - -.monitoring-page-wrapper .user-score-col h1 { - font-family: 'Poppins', sans-serif; - font-weight: 600; - font-size: 2rem; - margin-bottom: .6rem; -} - -.monitoring-page-wrapper .user-score-col p { - font-family: 'Poppins', sans-serif; - font-weight: 500; - font-size: .8rem; - margin-bottom: .2rem; -} - -.monitoring-page-wrapper .user-score-icon { - width: 4rem; - height: 4rem; - position: relative; - margin-right: 2rem; -} - -.monitoring-page-wrapper .user-score-icon:after { - left: 0; - right: 0; - top: 0; - bottom: 0; - border-radius: 50%; - content: ""; - position: absolute; - background-color: #fff; - opacity: .25; -} - -.monitoring-page-wrapper .user-table-data { - background-color: #fff; - box-shadow: 0 10px 10px rgba(190, 196, 209, .25); - border-radius: 5px; - margin-top: 3.5rem; - width: 100%; - padding: 2rem; -} - -.monitoring-page-wrapper .table-sorter-header h1 { - font-family: 'Poppins', sans-serif; - font-weight: 700; - font-size: 1rem; - padding-left: 7rem; -} - -.monitoring-page-wrapper .table-sorter-header .col-6:nth-child(2) h1 { - padding-left: 4rem; -} - -.monitoring-page-wrapper .table-sorter-header.row { - margin-left: 0; - margin-right: 0; - border-bottom: 2px solid #20639B; - padding-bottom: .3rem; -} - -.monitoring-page-wrapper .table-sorter-top.row { - margin-left: 0; - margin-right: 0; - border-bottom: 2px solid #C3CEDC; - padding-top: .5rem; - padding-bottom: .5rem; - cursor: pointer; - transition: all .3s ease; -} - -.monitoring-page-wrapper .table-sorter-top.row:hover { - background-color: #fbfcff; -} - -.monitoring-page-wrapper .table-sorter-top.row img { - width: 2.5rem; - float: left; -} - -.monitoring-page-wrapper .table-sorter-top.row .table-user-name { - padding-left: 3.5rem; -} - -.monitoring-page-wrapper .table-sorter-top.row p { - float: left; - padding-left: 2rem; - font-family: 'Poppins', sans-serif; - font-size: .9rem; - padding-top: .6rem; - margin: 0; -} - -.monitoring-page-wrapper .table-sorter-top.row .table-user-progress { - padding-left: 4.9rem; -} - -.monitoring-page-wrapper .table-sorter-top.row .table-user-progress .progress-col - { - width: 23rem; - max-width: calc(100% - 4rem); - height: .4rem; - border-radius: 45px; - background-color: #F3F5FB; - overflow: hidden; - float: left; - margin-top: 1rem; -} - -.monitoring-page-wrapper .table-sorter-top.row .table-user-progress .progress-col .progress1 - { - float: left; - height: 100%; - background-color: #FFCF60; -} - -.monitoring-page-wrapper .table-sorter-top.row .table-user-progress p { - float: left; - padding-top: 0; - margin-top: .55rem; -} - -.monitoring-page-wrapper .table-content-left { - -ms-flex: 0 0 27rem; - flex: 0 0 27rem; - max-width: 27rem; - padding-left: 3.5rem; -} - -.monitoring-page-wrapper .table-content-right { - -ms-flex: 0 0 calc(100% - 27rem); - flex: 0 0 calc(100% - 27rem); - max-width: calc(100% - 27rem); -} - -.monitoring-page-wrapper .table-sorter-content.row { - margin: 0; - padding: 1.5rem 0; - display: none; - border-bottom: 2px solid #C3CEDC; -} - -.monitoring-page-wrapper .table-content-right-inner { - max-height: 48rem; - background-color: #F3F5FB; - border-radius: 5px; - overflow-y: scroll; -} - -.monitoring-page-wrapper .user-info-top img { - width: 6rem; - height: 6rem; -} - -.monitoring-page-wrapper .user-info-top div { - padding-left: 1.5rem; -} - -.monitoring-page-wrapper .user-info-top h1 { - font-family: 'Poppins', sans-serif; - font-weight: 700; - font-size: 1.7rem; - margin-bottom: .5rem; -} - -.monitoring-page-wrapper .user-info-top p { - margin: 0; -} - -.monitoring-page-wrapper .user-info-top p a { - color: #BEC4D1; - font-family: 'Poppins', sans-serif; -} - -.monitoring-page-wrapper .user-info-progress-col { - margin-top: 1.5rem; -} - -.monitoring-page-wrapper .user-info-progress-bar { - width: 75%; - height: .4rem; - border-radius: 45px; - background-color: #F3F5FB; - overflow: hidden; - margin-top: .4rem; -} - -.monitoring-page-wrapper .user-info-progress { - width: 75%; - height: 100%; - background-color: #1AD9B2; -} - -.monitoring-page-wrapper .user-info-progress-col p { - margin: 0; - font-family: 'Poppins', sans-serif; - font-size: .8rem; - margin-left: 1rem; -} - -.monitoring-page-wrapper .table-graph-h1 { - text-transform: uppercase; - font-family: 'Poppins', sans-serif; - font-weight: 700; - font-size: 1rem; - letter-spacing: 1px; - margin-top: 3rem; -} - -.monitoring-page-wrapper #chart-2, .monitoring-page-wrapper #chart-3, - .monitoring-page-wrapper #chart-4, .monitoring-page-wrapper #chart-5, - .monitoring-page-wrapper #chart-6, .monitoring-page-wrapper #chart-7, - .monitoring-page-wrapper #chart-8 { - height: 256px !important -} - -.monitoring-page-wrapper .content-graph2 { - position: relative; - overflow: hidden; - padding-top: 1rem; -} - -.monitoring-page-wrapper .content-graph2:after { - position: absolute; - content: ""; - height: 3px; - background-color: #fff; - left: 0; - right: 0; - bottom: .5rem; - width: 100%; -} - -.monitoring-page-wrapper .content-graph2 canvas { - position: relative; - left: -5.5rem; -} - -.monitoring-page-wrapper .content-user-graph1, .content-user-graph2 { - padding-right: 3rem; -} - -.monitoring-page-wrapper .content-graph2-inner { - position: relative; -} - -.monitoring-page-wrapper .content-graph2-inner ul { - position: absolute; - right: 0; - top: 30%; -} - -.monitoring-page-wrapper .content-graph2-inner ul li p { - margin: 0; -} - -.monitoring-page-wrapper .content-graph2-inner ul li { - margin-bottom: 1rem; - font-family: 'Poppins', sans-serif; - font-size: .9rem; - margin-bottom: 1rem; - display: flex; -} - -.monitoring-page-wrapper .content-graph2-inner ul li span { - display: inline-block; - width: 12px; - height: 12px; - background-color: #000; - margin-right: .5rem; - border-radius: 50%; - margin-top: 3px; -} - -.monitoring-page-wrapper .content-graph2-inner ul li:nth-child(1) span { - background-color: #1AD9B2; -} - -.monitoring-page-wrapper .content-graph2-inner ul li:nth-child(2) span { - background-color: #FFCF60; -} -/* width */ -.monitoring-page-wrapper .table-content-right-inner::-webkit-scrollbar { - width: 5px; -} - -/* Track */ -.monitoring-page-wrapper .table-content-right-inner::-webkit-scrollbar-track - { - background: #fff; -} - -/* Handle */ -.monitoring-page-wrapper .table-content-right-inner::-webkit-scrollbar-thumb - { - background: #20639B; - border-radius: 45px; -} - -.monitoring-page-wrapper .cd-timeline__container { - padding: 0 4rem !important; -} - -.monitoring-page-wrapper .cd-timeline__date { - font-family: 'Poppins', sans-serif; - color: #000; - font-weight: 700; - font-size: .9rem; - padding: 0 1rem; -} - -.monitoring-page-wrapper .cd-timeline__container::before { - width: 1px; - background-color: transparent; - border: 1px dashed #C3CEDC; -} - -.monitoring-page-wrapper .cd-timeline__img { - border: 2px solid #C3CEDC; - box-shadow: 0 0 0; - background-color: #F3F5FB; - opacity: 1; -} - -.monitoring-page-wrapper .cd-timeline { - background-color: transparent; -} - -.monitoring-page-wrapper .cd-timeline__block:nth-child(odd) .cd-timeline__content - { - border-right: 4px solid #1AD9B2; -} - -.monitoring-page-wrapper .cd-timeline__block:nth-child(odd) .cd-timeline__content:before - { - right: -18px; - left: inherit; - border-left-color: #1AD9B2; -} - -.monitoring-page-wrapper .cd-timeline__block:nth-child(even) .cd-timeline__content - { - border-left: 4px solid #FFCF60; -} - -.monitoring-page-wrapper .cd-timeline__block:nth-child(even) .cd-timeline__content:before - { - left: -18px !important; - right: inherit !important; - border-right-color: #FFCF60; -} - -.monitoring-page-wrapper .cd-timeline__content { - box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05); -} - -.monitoring-page-wrapper .cd-timeline__content h2 { - font-family: 'Poppins', sans-serif; - color: #000; - font-size: 1.1rem; - font-weight: 600; - border-bottom: 2px solid #C3CEDC; - padding-bottom: 1rem; -} - -.monitoring-page-wrapper .cd-timeline__content h2 span { - float: right; - font-size: .8rem; - background-color: #FFCF60; - color: #fff; - padding: .3rem .8rem; - border-radius: 45px; -} - -.monitoring-page-wrapper .cd-timeline__content p { - border-bottom: 2px solid #C3CEDC; - padding-bottom: .7rem; - margin-top: .7rem; - margin-bottom: .7rem; - padding-left: 1.5rem; - font-family: 'Poppins', sans-serif; - color: #000; - font-weight: 500; - font-size: .8rem; - padding-right: 1.5rem; -} - -.monitoring-page-wrapper cd-timeline__content p span { - float: right; -} - -.monitoring-page-wrapper .progress1.red { - background-color: #FF7272 !important; -} - -.monitoring-page-wrapper .progress1.green { - background-color: #1AD9B2 !important; -} - -.monitoring-page-wrapper #sequenceSearchPhraseContainer { - width: 20rem; - margin-left: 1rem; -} - -.monitoring-page-wrapper #sequenceSearchPhrase { - width: 15rem; -} - -.monitoring-page-wrapper #sequenceSearchPhraseButton { - border: none; - height: 3.1rem; -} - -.monitoring-page-wrapper #sequenceSearchPhraseClearIcon { - display: none; -} - -body.component .ui-menu-item-wrapper.autocomplete-menu-item-with-portrait { - display: flex; - justify-content: space-between; - padding: 5px; -} - -.dialogContainer { - display: none; - -webkit-overflow-scrolling: touch !important; - overflow: auto; -} - -.dialogContainer iframe { - width: 100%; - height: 100%; - border: none; -} - -.dialogContainer .modal-body { - height: 100%; - max-height: calc(100% - 56px); - padding: 10px; - overflow: auto; -} - -.dialogContainer .dialogSearchPhraseClear { - visibility: hidden; -} - -.ui-front { - z-index: 1100; -} - -.ui-front.ui-autocomplete { - border-radius: 0 0 5px 5px; -} - -.dialogContainer .pageCell { - vertical-align: middle; -} - -.dialogContainer .dialogListItem { - height: 3rem; - border-color: var(--bs-gray-300); - border-bottom-width: 2px; - cursor: pointer; -} - -.dialogContainer .dialogListItem:hover { - background-color: var(--bs-gray-200); -} - -.dialogContainer .dialogListItem .portrait-sm { - margin: 7px 0 0 7px; -} - -R.dialogContainer .dialogListItem .portrait-generic-sm { - margin-top: 2px; -} - -.dialogContainer .dialogListItem .portrait-sm-lineheight { - display: inline-block; - margin-top: 2px; -} - -.dialogContainer .dialogListItem .portrait-sm + .portrait-sm-lineheight { - margin-left: 8px; -} - -.dialogContainer .dialogListItem.dialogListItemSelected { - background-color: rgba(0, 145, 74, 0.1) !important; -} - -.dialogContainer .dialogTitle { - text-align: center; - font-weight: 500; -} - -.dialogContainer .bottom-buttons { - margin-bottom: 5px; -} - -.dialogContainer #classMonitorSearchRow { - height: 70px; -} - -.dialogContainer #classDialogTable, -.dialogContainer #emailProgressDialogTable { - width: calc(100% - 12px); -} - -.dialogContainer iframe { - height: calc(100% - 10px); -} - - - /********** CANVAS STYLES **********/ -#canvas-container { +.monitoring-page-wrapper #sequence-tab-content #canvas-container { min-height: 420px; display: flex; flex-direction: column; justify-content: space-between; } -#canvas-container div#sequenceCanvas { +.monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas { width: 100%; display: flex; overflow: auto; @@ -986,300 +226,142 @@ user-select: none; } -#canvas-container.svg-learner-draggable-area.force-completing, -#canvas-container.svg-learner-draggable-area.force-completing div#sequenceCanvas svg.svg-learning-design, -#canvas-container.svg-learner-draggable-area.force-completing div#sequenceCanvas svg.svg-learning-design * { +.monitoring-page-wrapper #sequence-tab-content #canvas-container.svg-learner-draggable-area.force-completing, +.monitoring-page-wrapper #sequence-tab-content #canvas-container.svg-learner-draggable-area.force-completing div#sequenceCanvas svg.svg-learning-design, +.monitoring-page-wrapper #sequence-tab-content #canvas-container.svg-learner-draggable-area.force-completing div#sequenceCanvas svg.svg-learning-design * { cursor: wait !important; } -#canvas-container div#sequenceCanvas div.learner-icon-container { +.monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas div.learner-icon-container { position: relative; } -#canvas-container div#sequenceCanvas div.learner-icon-container div.learner-icon, - #completedLearnersContainer div.learner-icon { +.monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas div.learner-icon-container div.learner-icon, +.monitoring-page-wrapper #sequence-tab-content #completedLearnersContainer div.learner-icon { border-radius: 20px; background-color: #FFFFFF; } -#canvas-container div#sequenceCanvas div.learner-icon-container div.learner-icon, div#sequenceCanvas div.learner-icon-container div.more-learner-icon - { +.monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas div.learner-icon-container div.learner-icon, +.monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas div.learner-icon-container div.more-learner-icon { position: absolute; } -#completedLearnersContainer { - overflow: auto; -} - -#completedLearnersContainer div.learner-icon { - margin-right: 5px; - min-width: 35px; -} - -#canvas-container div#sequenceCanvas div.more-learner-icon, #completedLearnersContainer div.more-learner-icon { - display: inline-block; - width: 35px; - height: 35px; - line-height: 35px; - font-size: 15px; - border-radius: 20px; - cursor: pointer; - background-color: #e7e7e7; - text-align: center; -} - -#canvas-container div#sequenceCanvas div.learner-icon.learner-searched { +.monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas div.learner-icon.learner-searched { border: red 3px solid; border-radius: 25px; z-index: 109 !important; } -#canvas-container div#sequenceCanvas div.portrait-generic-sm.learner-icon.learner-searched +.monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas div.portrait-generic-sm.learner-icon.learner-searched { border: none; } -#canvas-container div#sequenceCanvas div.portrait-generic-sm.learner-icon.learner-searched::before +.monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas div.portrait-generic-sm.learner-icon.learner-searched::before { border: red 3px solid; border-radius: 25px; } -#canvas-container div#sequenceCanvas .activity-requires-attention { +.monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas .activity-requires-attention { cursor: pointer; width: 16px; height: 16px; } -#completedLearnersContainer #completedLessonLearnersIcon { - width: 35px; - height: 35px; - margin-right: 5px; -} - -#canvas-container div#sequenceCanvas svg.svg-learning-design { +.monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas svg.svg-learning-design { display: block; overflow: visible; } -#canvas-container div#sequenceCanvas svg.svg-learning-design g.gate svg { +.monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas svg.svg-learning-design g.gate svg { display: none; } -#canvas-container img#sequenceCanvasLoading { +.monitoring-page-wrapper #sequence-tab-content #canvas-container img#sequenceCanvasLoading { padding: 5px 0 0 100px; display: none; } -#canvas-container img#sequenceSearchedLearnerHighlighter { +.monitoring-page-wrapper #sequence-tab-content #canvas-container img#sequenceSearchedLearnerHighlighter { position: absolute; display: none; } -#canvas-container div#completedLearnersContainer { +.monitoring-page-wrapper #sequence-tab-content #canvas-container div#completedLearnersContainer { display: flex; padding: 4px 0px 3px 5px; border-top: thin dotted #AAAAAA; } -#canvas-container div#completedLearnersContainer span { +.monitoring-page-wrapper #sequence-tab-content #canvas-container div#completedLearnersContainer span { font-family: Verdana; font-size: 10px; cursor: default; vertical-align: top; margin-right: 5px; } -#sequenceInfoDialog { - cursor: pointer; -} - -body.component .portrait-sm { +.monitoring-page-wrapper #sequence-tab-content #completedLearnersContainer #completedLessonLearnersIcon { width: 35px; height: 35px; - display: inline-block; - background-repeat: no-repeat; - background-size: cover; + margin-right: 5px; } -body.component .portrait-md { - width: 80px; - height: 80px; - display: inline-block; - background-repeat: no-repeat; - background-size: cover; +.monitoring-page-wrapper #sequence-tab-content #completedLearnersContainer { + overflow: auto; } -body.component .portrait-lg { - width: 200px; - height: 200px; - display: inline-block; - background-repeat: no-repeat; - background-size: cover; +.monitoring-page-wrapper #sequence-tab-content #completedLearnersContainer div.learner-icon { + margin-right: 5px; + min-width: 35px; } -body.component .portrait-xl { - width: 400px; - height: 400px; +.monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas div.more-learner-icon, +.monitoring-page-wrapper #sequence-tab-content #completedLearnersContainer div.more-learner-icon { display: inline-block; - background-repeat: no-repeat; - background-size: cover; -} - -body.component .portrait-container-sm { - height: 38px; - margin-top: 3px; -} - -body.component .leader-display { - margin: 0px; -} - -body.component .leader-display h4 { - margin-bottom: 0px; -} - -body.component .popover-link { - color: var(--bs-blue) !important; -} - -body.component .popover-title { - background-color: var(--bs-gray); -} - -body.component .popover-content-with-portrait { - min-height: 220px; - min-width: 220px; -} - -body.component .portrait-color-0 { - color: black; -} - -body.component .portrait-color-1 { - color: var(--bs-red); -} - -body.component .portrait-color-2 { - color: var(--bs-yellow); - filter: brightness(70%); -} - -body.component .portrait-color-3 { - color: var(--bs-gray); -} - -body.component .portrait-color-4 { - color: var(--bs-green); -} - -body.component .portrait-color-5 { - color: var(--bs-blue); -} - - -body.component .portrait-sm-lineheight { - line-height: 32px; - vertical-align: top; -} - -body.component .portrait-generic-sm { - display: inline-block; + width: 35px; height: 35px; - vertical-align: middle; -} - -body.component .portrait-generic-sm:before { - content: "\f2be"; - font-family: FontAwesome; - font-style: normal; - font-size: 35px; - font-weight: normal; line-height: 35px; + font-size: 15px; + border-radius: 20px; + cursor: pointer; + background-color: #e7e7e7; + text-align: center; } -body.component .portrait-generic-md { - display: inline-block; - height: 80px; - vertical-align: middle; -} - -body.component .portrait-generic-md:before { - content: "\f2be"; - font-family: FontAwesome; - font-style: normal; - font-size: 80px; - font-weight: normal; - line-height: 65px; -} - -body.component .portrait-generic-lg { - display: inline-block; - height: 200px; - vertical-align: middle; -} - -body.component .portrait-generic-lg:before { - content: "\f2be"; - font-family: FontAwesome; - font-style: normal; - font-size: 200px; - font-weight: normal; - line-height: 200px; -} - -body.component .portrait-round { - border-radius: 50%; -} - -#learners-accordion .no-progress { +.monitoring-page-wrapper #learners-accordion .no-progress { display: none; text-align: center; position: relative; top: 33%; } -#learners-accordion .learners-accordion-login .fa-user, -#learners-accordion .learners-accordion-email .fa-envelope { +.monitoring-page-wrapper #learners-accordion .learners-accordion-login .fa-user, +.monitoring-page-wrapper #learners-accordion .learners-accordion-email .fa-envelope { margin-right: 10px; } -#learners-accordion .learners-accordion-email a { +.monitoring-page-wrapper #learners-accordion .learners-accordion-email a { text-decoration: none; } -#learners-accordion .learners-accordion-portrait > div { +.monitoring-page-wrapper #learners-accordion .learners-accordion-portrait > div { border-radius: 10px; } -#learners-accordion .vertical-timeline-container { +.monitoring-page-wrapper #learners-accordion .vertical-timeline-container { display: none; background-color: var(--lams-background-gray); padding-top: 5px; border-radius: 10px; } -#learners-accordion .vertical-timeline { +.monitoring-page-wrapper #learners-accordion .vertical-timeline { transform: translateX(-25%); } -#learners-accordion .vertical-timeline:before { +.monitoring-page-wrapper #learners-accordion .vertical-timeline:before { bottom: 90px; -} - -.table-hover > tbody > tr:hover > * { - --bs-table-accent-bg: var(--bs-gray-200); - color: var(--bs-black) !important; -} - -.gate-card .card-body { - height: 80px; -} - -.gate-opened-icon { - cursor: pointer; -} - -.bg-success { - color: var(--bs-white) !important; } \ No newline at end of file Index: lams_monitoring/web/monitor5.jsp =================================================================== diff -u -r52f74fff1c4744b972e521cbfb5d13e1e58f1af9 -r9e131a46ef30a0bd2b9407498b3840e0801f064d --- lams_monitoring/web/monitor5.jsp (.../monitor5.jsp) (revision 52f74fff1c4744b972e521cbfb5d13e1e58f1af9) +++ lams_monitoring/web/monitor5.jsp (.../monitor5.jsp) (revision 9e131a46ef30a0bd2b9407498b3840e0801f064d) @@ -20,7 +20,6 @@ - @@ -267,7 +266,7 @@ -
+