From 9d551973be67e58af7649ffe8e77a8c5a8904822 Mon Sep 17 00:00:00 2001 From: Sami Mokaddem Date: Mon, 4 Oct 2021 16:03:15 +0200 Subject: [PATCH] chg: [helper:overlay] Better support of themes and added blur --- webroot/css/main.css | 10 +- webroot/css/themes/bootstrap-additional.css | 2633 ------------------- webroot/css/themes/theme-darkly.css | 4 + webroot/css/themes/theme-default.css | 4 + webroot/css/themes/theme-flatly.css | 4 + webroot/css/themes/theme-minty.css | 4 + webroot/css/themes/theme-quartz.css | 4 + webroot/css/themes/theme-slate.css | 4 + webroot/css/themes/theme-vapor.css | 4 + webroot/js/bootstrap-helper.js | 12 +- webroot/theme/scss/theme-darkly.scss | 3 + webroot/theme/scss/theme-default.scss | 8 + webroot/theme/scss/theme-minty.scss | 2 + webroot/theme/scss/theme-quartz.scss | 3 + webroot/theme/scss/theme-slate.scss | 3 + webroot/theme/scss/theme-vapor.scss | 3 + 16 files changed, 64 insertions(+), 2641 deletions(-) delete mode 100644 webroot/css/themes/bootstrap-additional.css diff --git a/webroot/css/main.css b/webroot/css/main.css index 17ba67a..3b78fff 100644 --- a/webroot/css/main.css +++ b/webroot/css/main.css @@ -21,6 +21,10 @@ color:black; } +.loading-overlay-container { + backdrop-filter: blur(1px); +} + @media(min-width:768px) { #wrapper { padding-left: 0; @@ -100,9 +104,9 @@ input[type="checkbox"]:disabled.change-cursor { } .grow-on-hover:hover { - -webkit-transform: translateZ(0) scale(1.03, 1.03); - -moz-transform: translateZ(0) scale(1.03, 1.03); - transform: translateZ(0) scale(1.03, 1.03); + -webkit-transform: translateZ(0) scale(1.02, 1.02); + -moz-transform: translateZ(0) scale(1.02, 1.02); + transform: translateZ(0) scale(1.02, 1.02); box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%) !important; } diff --git a/webroot/css/themes/bootstrap-additional.css b/webroot/css/themes/bootstrap-additional.css deleted file mode 100644 index 42217d9..0000000 --- a/webroot/css/themes/bootstrap-additional.css +++ /dev/null @@ -1,2633 +0,0 @@ -.align-baseline { - vertical-align: baseline !important; } - -.align-top { - vertical-align: top !important; } - -.align-middle { - vertical-align: middle !important; } - -.align-bottom { - vertical-align: bottom !important; } - -.align-text-bottom { - vertical-align: text-bottom !important; } - -.align-text-top { - vertical-align: text-top !important; } - -.bg-primary { - background-color: #007bff !important; } - -a.bg-primary:hover, a.bg-primary:focus, -button.bg-primary:hover, -button.bg-primary:focus { - background-color: #0062cc !important; } - -.bg-secondary { - background-color: #6c757d !important; } - -a.bg-secondary:hover, a.bg-secondary:focus, -button.bg-secondary:hover, -button.bg-secondary:focus { - background-color: #545b62 !important; } - -.bg-success { - background-color: #28a745 !important; } - -a.bg-success:hover, a.bg-success:focus, -button.bg-success:hover, -button.bg-success:focus { - background-color: #1e7e34 !important; } - -.bg-info { - background-color: #17a2b8 !important; } - -a.bg-info:hover, a.bg-info:focus, -button.bg-info:hover, -button.bg-info:focus { - background-color: #117a8b !important; } - -.bg-warning { - background-color: #ffc107 !important; } - -a.bg-warning:hover, a.bg-warning:focus, -button.bg-warning:hover, -button.bg-warning:focus { - background-color: #d39e00 !important; } - -.bg-danger { - background-color: #dc3545 !important; } - -a.bg-danger:hover, a.bg-danger:focus, -button.bg-danger:hover, -button.bg-danger:focus { - background-color: #bd2130 !important; } - -.bg-light { - background-color: #f8f9fa !important; } - -a.bg-light:hover, a.bg-light:focus, -button.bg-light:hover, -button.bg-light:focus { - background-color: #dae0e5 !important; } - -.bg-dark { - background-color: #343a40 !important; } - -a.bg-dark:hover, a.bg-dark:focus, -button.bg-dark:hover, -button.bg-dark:focus { - background-color: #1d2124 !important; } - -.bg-white { - background-color: #fff !important; } - -.bg-transparent { - background-color: transparent !important; } - -.border { - border: 1px solid #dee2e6 !important; } - -.border-top { - border-top: 1px solid #dee2e6 !important; } - -.border-right { - border-right: 1px solid #dee2e6 !important; } - -.border-bottom { - border-bottom: 1px solid #dee2e6 !important; } - -.border-left { - border-left: 1px solid #dee2e6 !important; } - -.border-0 { - border: 0 !important; } - -.border-top-0 { - border-top: 0 !important; } - -.border-right-0 { - border-right: 0 !important; } - -.border-bottom-0 { - border-bottom: 0 !important; } - -.border-left-0 { - border-left: 0 !important; } - -.border-primary { - border-color: #007bff !important; } - -.border-secondary { - border-color: #6c757d !important; } - -.border-success { - border-color: #28a745 !important; } - -.border-info { - border-color: #17a2b8 !important; } - -.border-warning { - border-color: #ffc107 !important; } - -.border-danger { - border-color: #dc3545 !important; } - -.border-light { - border-color: #f8f9fa !important; } - -.border-dark { - border-color: #343a40 !important; } - -.border-white { - border-color: #fff !important; } - -.rounded-sm { - border-radius: 0.2rem !important; } - -.rounded { - border-radius: 0.25rem !important; } - -.rounded-top { - border-top-left-radius: 0.25rem !important; - border-top-right-radius: 0.25rem !important; } - -.rounded-right { - border-top-right-radius: 0.25rem !important; - border-bottom-right-radius: 0.25rem !important; } - -.rounded-bottom { - border-bottom-right-radius: 0.25rem !important; - border-bottom-left-radius: 0.25rem !important; } - -.rounded-left { - border-top-left-radius: 0.25rem !important; - border-bottom-left-radius: 0.25rem !important; } - -.rounded-lg { - border-radius: 0.3rem !important; } - -.rounded-circle { - border-radius: 50% !important; } - -.rounded-pill { - border-radius: 50rem !important; } - -.rounded-0 { - border-radius: 0 !important; } - -.clearfix::after { - display: block; - clear: both; - content: ""; } - -.d-none { - display: none !important; } - -.d-inline { - display: inline !important; } - -.d-inline-block { - display: inline-block !important; } - -.d-block { - display: block !important; } - -.d-table { - display: table !important; } - -.d-table-row { - display: table-row !important; } - -.d-table-cell { - display: table-cell !important; } - -.d-flex { - display: flex !important; } - -.d-inline-flex { - display: inline-flex !important; } - -@media (min-width: 576px) { - .d-sm-none { - display: none !important; } - .d-sm-inline { - display: inline !important; } - .d-sm-inline-block { - display: inline-block !important; } - .d-sm-block { - display: block !important; } - .d-sm-table { - display: table !important; } - .d-sm-table-row { - display: table-row !important; } - .d-sm-table-cell { - display: table-cell !important; } - .d-sm-flex { - display: flex !important; } - .d-sm-inline-flex { - display: inline-flex !important; } } - -@media (min-width: 768px) { - .d-md-none { - display: none !important; } - .d-md-inline { - display: inline !important; } - .d-md-inline-block { - display: inline-block !important; } - .d-md-block { - display: block !important; } - .d-md-table { - display: table !important; } - .d-md-table-row { - display: table-row !important; } - .d-md-table-cell { - display: table-cell !important; } - .d-md-flex { - display: flex !important; } - .d-md-inline-flex { - display: inline-flex !important; } } - -@media (min-width: 992px) { - .d-lg-none { - display: none !important; } - .d-lg-inline { - display: inline !important; } - .d-lg-inline-block { - display: inline-block !important; } - .d-lg-block { - display: block !important; } - .d-lg-table { - display: table !important; } - .d-lg-table-row { - display: table-row !important; } - .d-lg-table-cell { - display: table-cell !important; } - .d-lg-flex { - display: flex !important; } - .d-lg-inline-flex { - display: inline-flex !important; } } - -@media (min-width: 1200px) { - .d-xl-none { - display: none !important; } - .d-xl-inline { - display: inline !important; } - .d-xl-inline-block { - display: inline-block !important; } - .d-xl-block { - display: block !important; } - .d-xl-table { - display: table !important; } - .d-xl-table-row { - display: table-row !important; } - .d-xl-table-cell { - display: table-cell !important; } - .d-xl-flex { - display: flex !important; } - .d-xl-inline-flex { - display: inline-flex !important; } } - -@media print { - .d-print-none { - display: none !important; } - .d-print-inline { - display: inline !important; } - .d-print-inline-block { - display: inline-block !important; } - .d-print-block { - display: block !important; } - .d-print-table { - display: table !important; } - .d-print-table-row { - display: table-row !important; } - .d-print-table-cell { - display: table-cell !important; } - .d-print-flex { - display: flex !important; } - .d-print-inline-flex { - display: inline-flex !important; } } - -.embed-responsive { - position: relative; - display: block; - width: 100%; - padding: 0; - overflow: hidden; } - .embed-responsive::before { - display: block; - content: ""; } - .embed-responsive .embed-responsive-item, - .embed-responsive iframe, - .embed-responsive embed, - .embed-responsive object, - .embed-responsive video { - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - border: 0; } - -.embed-responsive-21by9::before { - padding-top: 42.85714%; } - -.embed-responsive-16by9::before { - padding-top: 56.25%; } - -.embed-responsive-4by3::before { - padding-top: 75%; } - -.embed-responsive-1by1::before { - padding-top: 100%; } - -.flex-row { - flex-direction: row !important; } - -.flex-column { - flex-direction: column !important; } - -.flex-row-reverse { - flex-direction: row-reverse !important; } - -.flex-column-reverse { - flex-direction: column-reverse !important; } - -.flex-wrap { - flex-wrap: wrap !important; } - -.flex-nowrap { - flex-wrap: nowrap !important; } - -.flex-wrap-reverse { - flex-wrap: wrap-reverse !important; } - -.flex-fill { - flex: 1 1 auto !important; } - -.flex-grow-0 { - flex-grow: 0 !important; } - -.flex-grow-1 { - flex-grow: 1 !important; } - -.flex-shrink-0 { - flex-shrink: 0 !important; } - -.flex-shrink-1 { - flex-shrink: 1 !important; } - -.justify-content-start { - justify-content: flex-start !important; } - -.justify-content-end { - justify-content: flex-end !important; } - -.justify-content-center { - justify-content: center !important; } - -.justify-content-between { - justify-content: space-between !important; } - -.justify-content-around { - justify-content: space-around !important; } - -.align-items-start { - align-items: flex-start !important; } - -.align-items-end { - align-items: flex-end !important; } - -.align-items-center { - align-items: center !important; } - -.align-items-baseline { - align-items: baseline !important; } - -.align-items-stretch { - align-items: stretch !important; } - -.align-content-start { - align-content: flex-start !important; } - -.align-content-end { - align-content: flex-end !important; } - -.align-content-center { - align-content: center !important; } - -.align-content-between { - align-content: space-between !important; } - -.align-content-around { - align-content: space-around !important; } - -.align-content-stretch { - align-content: stretch !important; } - -.align-self-auto { - align-self: auto !important; } - -.align-self-start { - align-self: flex-start !important; } - -.align-self-end { - align-self: flex-end !important; } - -.align-self-center { - align-self: center !important; } - -.align-self-baseline { - align-self: baseline !important; } - -.align-self-stretch { - align-self: stretch !important; } - -@media (min-width: 576px) { - .flex-sm-row { - flex-direction: row !important; } - .flex-sm-column { - flex-direction: column !important; } - .flex-sm-row-reverse { - flex-direction: row-reverse !important; } - .flex-sm-column-reverse { - flex-direction: column-reverse !important; } - .flex-sm-wrap { - flex-wrap: wrap !important; } - .flex-sm-nowrap { - flex-wrap: nowrap !important; } - .flex-sm-wrap-reverse { - flex-wrap: wrap-reverse !important; } - .flex-sm-fill { - flex: 1 1 auto !important; } - .flex-sm-grow-0 { - flex-grow: 0 !important; } - .flex-sm-grow-1 { - flex-grow: 1 !important; } - .flex-sm-shrink-0 { - flex-shrink: 0 !important; } - .flex-sm-shrink-1 { - flex-shrink: 1 !important; } - .justify-content-sm-start { - justify-content: flex-start !important; } - .justify-content-sm-end { - justify-content: flex-end !important; } - .justify-content-sm-center { - justify-content: center !important; } - .justify-content-sm-between { - justify-content: space-between !important; } - .justify-content-sm-around { - justify-content: space-around !important; } - .align-items-sm-start { - align-items: flex-start !important; } - .align-items-sm-end { - align-items: flex-end !important; } - .align-items-sm-center { - align-items: center !important; } - .align-items-sm-baseline { - align-items: baseline !important; } - .align-items-sm-stretch { - align-items: stretch !important; } - .align-content-sm-start { - align-content: flex-start !important; } - .align-content-sm-end { - align-content: flex-end !important; } - .align-content-sm-center { - align-content: center !important; } - .align-content-sm-between { - align-content: space-between !important; } - .align-content-sm-around { - align-content: space-around !important; } - .align-content-sm-stretch { - align-content: stretch !important; } - .align-self-sm-auto { - align-self: auto !important; } - .align-self-sm-start { - align-self: flex-start !important; } - .align-self-sm-end { - align-self: flex-end !important; } - .align-self-sm-center { - align-self: center !important; } - .align-self-sm-baseline { - align-self: baseline !important; } - .align-self-sm-stretch { - align-self: stretch !important; } } - -@media (min-width: 768px) { - .flex-md-row { - flex-direction: row !important; } - .flex-md-column { - flex-direction: column !important; } - .flex-md-row-reverse { - flex-direction: row-reverse !important; } - .flex-md-column-reverse { - flex-direction: column-reverse !important; } - .flex-md-wrap { - flex-wrap: wrap !important; } - .flex-md-nowrap { - flex-wrap: nowrap !important; } - .flex-md-wrap-reverse { - flex-wrap: wrap-reverse !important; } - .flex-md-fill { - flex: 1 1 auto !important; } - .flex-md-grow-0 { - flex-grow: 0 !important; } - .flex-md-grow-1 { - flex-grow: 1 !important; } - .flex-md-shrink-0 { - flex-shrink: 0 !important; } - .flex-md-shrink-1 { - flex-shrink: 1 !important; } - .justify-content-md-start { - justify-content: flex-start !important; } - .justify-content-md-end { - justify-content: flex-end !important; } - .justify-content-md-center { - justify-content: center !important; } - .justify-content-md-between { - justify-content: space-between !important; } - .justify-content-md-around { - justify-content: space-around !important; } - .align-items-md-start { - align-items: flex-start !important; } - .align-items-md-end { - align-items: flex-end !important; } - .align-items-md-center { - align-items: center !important; } - .align-items-md-baseline { - align-items: baseline !important; } - .align-items-md-stretch { - align-items: stretch !important; } - .align-content-md-start { - align-content: flex-start !important; } - .align-content-md-end { - align-content: flex-end !important; } - .align-content-md-center { - align-content: center !important; } - .align-content-md-between { - align-content: space-between !important; } - .align-content-md-around { - align-content: space-around !important; } - .align-content-md-stretch { - align-content: stretch !important; } - .align-self-md-auto { - align-self: auto !important; } - .align-self-md-start { - align-self: flex-start !important; } - .align-self-md-end { - align-self: flex-end !important; } - .align-self-md-center { - align-self: center !important; } - .align-self-md-baseline { - align-self: baseline !important; } - .align-self-md-stretch { - align-self: stretch !important; } } - -@media (min-width: 992px) { - .flex-lg-row { - flex-direction: row !important; } - .flex-lg-column { - flex-direction: column !important; } - .flex-lg-row-reverse { - flex-direction: row-reverse !important; } - .flex-lg-column-reverse { - flex-direction: column-reverse !important; } - .flex-lg-wrap { - flex-wrap: wrap !important; } - .flex-lg-nowrap { - flex-wrap: nowrap !important; } - .flex-lg-wrap-reverse { - flex-wrap: wrap-reverse !important; } - .flex-lg-fill { - flex: 1 1 auto !important; } - .flex-lg-grow-0 { - flex-grow: 0 !important; } - .flex-lg-grow-1 { - flex-grow: 1 !important; } - .flex-lg-shrink-0 { - flex-shrink: 0 !important; } - .flex-lg-shrink-1 { - flex-shrink: 1 !important; } - .justify-content-lg-start { - justify-content: flex-start !important; } - .justify-content-lg-end { - justify-content: flex-end !important; } - .justify-content-lg-center { - justify-content: center !important; } - .justify-content-lg-between { - justify-content: space-between !important; } - .justify-content-lg-around { - justify-content: space-around !important; } - .align-items-lg-start { - align-items: flex-start !important; } - .align-items-lg-end { - align-items: flex-end !important; } - .align-items-lg-center { - align-items: center !important; } - .align-items-lg-baseline { - align-items: baseline !important; } - .align-items-lg-stretch { - align-items: stretch !important; } - .align-content-lg-start { - align-content: flex-start !important; } - .align-content-lg-end { - align-content: flex-end !important; } - .align-content-lg-center { - align-content: center !important; } - .align-content-lg-between { - align-content: space-between !important; } - .align-content-lg-around { - align-content: space-around !important; } - .align-content-lg-stretch { - align-content: stretch !important; } - .align-self-lg-auto { - align-self: auto !important; } - .align-self-lg-start { - align-self: flex-start !important; } - .align-self-lg-end { - align-self: flex-end !important; } - .align-self-lg-center { - align-self: center !important; } - .align-self-lg-baseline { - align-self: baseline !important; } - .align-self-lg-stretch { - align-self: stretch !important; } } - -@media (min-width: 1200px) { - .flex-xl-row { - flex-direction: row !important; } - .flex-xl-column { - flex-direction: column !important; } - .flex-xl-row-reverse { - flex-direction: row-reverse !important; } - .flex-xl-column-reverse { - flex-direction: column-reverse !important; } - .flex-xl-wrap { - flex-wrap: wrap !important; } - .flex-xl-nowrap { - flex-wrap: nowrap !important; } - .flex-xl-wrap-reverse { - flex-wrap: wrap-reverse !important; } - .flex-xl-fill { - flex: 1 1 auto !important; } - .flex-xl-grow-0 { - flex-grow: 0 !important; } - .flex-xl-grow-1 { - flex-grow: 1 !important; } - .flex-xl-shrink-0 { - flex-shrink: 0 !important; } - .flex-xl-shrink-1 { - flex-shrink: 1 !important; } - .justify-content-xl-start { - justify-content: flex-start !important; } - .justify-content-xl-end { - justify-content: flex-end !important; } - .justify-content-xl-center { - justify-content: center !important; } - .justify-content-xl-between { - justify-content: space-between !important; } - .justify-content-xl-around { - justify-content: space-around !important; } - .align-items-xl-start { - align-items: flex-start !important; } - .align-items-xl-end { - align-items: flex-end !important; } - .align-items-xl-center { - align-items: center !important; } - .align-items-xl-baseline { - align-items: baseline !important; } - .align-items-xl-stretch { - align-items: stretch !important; } - .align-content-xl-start { - align-content: flex-start !important; } - .align-content-xl-end { - align-content: flex-end !important; } - .align-content-xl-center { - align-content: center !important; } - .align-content-xl-between { - align-content: space-between !important; } - .align-content-xl-around { - align-content: space-around !important; } - .align-content-xl-stretch { - align-content: stretch !important; } - .align-self-xl-auto { - align-self: auto !important; } - .align-self-xl-start { - align-self: flex-start !important; } - .align-self-xl-end { - align-self: flex-end !important; } - .align-self-xl-center { - align-self: center !important; } - .align-self-xl-baseline { - align-self: baseline !important; } - .align-self-xl-stretch { - align-self: stretch !important; } } - -.float-left { - float: left !important; } - -.float-right { - float: right !important; } - -.float-none { - float: none !important; } - -@media (min-width: 576px) { - .float-sm-left { - float: left !important; } - .float-sm-right { - float: right !important; } - .float-sm-none { - float: none !important; } } - -@media (min-width: 768px) { - .float-md-left { - float: left !important; } - .float-md-right { - float: right !important; } - .float-md-none { - float: none !important; } } - -@media (min-width: 992px) { - .float-lg-left { - float: left !important; } - .float-lg-right { - float: right !important; } - .float-lg-none { - float: none !important; } } - -@media (min-width: 1200px) { - .float-xl-left { - float: left !important; } - .float-xl-right { - float: right !important; } - .float-xl-none { - float: none !important; } } - -.user-select-all { - user-select: all !important; } - -.user-select-auto { - user-select: auto !important; } - -.user-select-none { - user-select: none !important; } - -.overflow-auto { - overflow: auto !important; } - -.overflow-hidden { - overflow: hidden !important; } - -.position-static { - position: static !important; } - -.position-relative { - position: relative !important; } - -.position-absolute { - position: absolute !important; } - -.position-fixed { - position: fixed !important; } - -.position-sticky { - position: sticky !important; } - -.fixed-top { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: 1030; } - -.fixed-bottom { - position: fixed; - right: 0; - bottom: 0; - left: 0; - z-index: 1030; } - -@supports (position: sticky) { - .sticky-top { - position: sticky; - top: 0; - z-index: 1020; } } - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; } - -.sr-only-focusable:active, .sr-only-focusable:focus { - position: static; - width: auto; - height: auto; - overflow: visible; - clip: auto; - white-space: normal; } - -.shadow-sm { - box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; } - -.shadow { - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; } - -.shadow-lg { - box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; } - -.shadow-none { - box-shadow: none !important; } - -.w-25 { - width: 25% !important; } - -.w-50 { - width: 50% !important; } - -.w-75 { - width: 75% !important; } - -.w-100 { - width: 100% !important; } - -.w-auto { - width: auto !important; } - -.h-25 { - height: 25% !important; } - -.h-50 { - height: 50% !important; } - -.h-75 { - height: 75% !important; } - -.h-100 { - height: 100% !important; } - -.h-auto { - height: auto !important; } - -.mw-100 { - max-width: 100% !important; } - -.mh-100 { - max-height: 100% !important; } - -.min-vw-100 { - min-width: 100vw !important; } - -.min-vh-100 { - min-height: 100vh !important; } - -.vw-100 { - width: 100vw !important; } - -.vh-100 { - height: 100vh !important; } - -.m-0 { - margin: 0 !important; } - -.mt-0, -.my-0 { - margin-top: 0 !important; } - -.mr-0, -.mx-0 { - margin-right: 0 !important; } - -.mb-0, -.my-0 { - margin-bottom: 0 !important; } - -.ml-0, -.mx-0 { - margin-left: 0 !important; } - -.m-1 { - margin: 0.25rem !important; } - -.mt-1, -.my-1 { - margin-top: 0.25rem !important; } - -.mr-1, -.mx-1 { - margin-right: 0.25rem !important; } - -.mb-1, -.my-1 { - margin-bottom: 0.25rem !important; } - -.ml-1, -.mx-1 { - margin-left: 0.25rem !important; } - -.m-2 { - margin: 0.5rem !important; } - -.mt-2, -.my-2 { - margin-top: 0.5rem !important; } - -.mr-2, -.mx-2 { - margin-right: 0.5rem !important; } - -.mb-2, -.my-2 { - margin-bottom: 0.5rem !important; } - -.ml-2, -.mx-2 { - margin-left: 0.5rem !important; } - -.m-3 { - margin: 1rem !important; } - -.mt-3, -.my-3 { - margin-top: 1rem !important; } - -.mr-3, -.mx-3 { - margin-right: 1rem !important; } - -.mb-3, -.my-3 { - margin-bottom: 1rem !important; } - -.ml-3, -.mx-3 { - margin-left: 1rem !important; } - -.m-4 { - margin: 1.5rem !important; } - -.mt-4, -.my-4 { - margin-top: 1.5rem !important; } - -.mr-4, -.mx-4 { - margin-right: 1.5rem !important; } - -.mb-4, -.my-4 { - margin-bottom: 1.5rem !important; } - -.ml-4, -.mx-4 { - margin-left: 1.5rem !important; } - -.m-5 { - margin: 3rem !important; } - -.mt-5, -.my-5 { - margin-top: 3rem !important; } - -.mr-5, -.mx-5 { - margin-right: 3rem !important; } - -.mb-5, -.my-5 { - margin-bottom: 3rem !important; } - -.ml-5, -.mx-5 { - margin-left: 3rem !important; } - -.p-0 { - padding: 0 !important; } - -.pt-0, -.py-0 { - padding-top: 0 !important; } - -.pr-0, -.px-0 { - padding-right: 0 !important; } - -.pb-0, -.py-0 { - padding-bottom: 0 !important; } - -.pl-0, -.px-0 { - padding-left: 0 !important; } - -.p-1 { - padding: 0.25rem !important; } - -.pt-1, -.py-1 { - padding-top: 0.25rem !important; } - -.pr-1, -.px-1 { - padding-right: 0.25rem !important; } - -.pb-1, -.py-1 { - padding-bottom: 0.25rem !important; } - -.pl-1, -.px-1 { - padding-left: 0.25rem !important; } - -.p-2 { - padding: 0.5rem !important; } - -.pt-2, -.py-2 { - padding-top: 0.5rem !important; } - -.pr-2, -.px-2 { - padding-right: 0.5rem !important; } - -.pb-2, -.py-2 { - padding-bottom: 0.5rem !important; } - -.pl-2, -.px-2 { - padding-left: 0.5rem !important; } - -.p-3 { - padding: 1rem !important; } - -.pt-3, -.py-3 { - padding-top: 1rem !important; } - -.pr-3, -.px-3 { - padding-right: 1rem !important; } - -.pb-3, -.py-3 { - padding-bottom: 1rem !important; } - -.pl-3, -.px-3 { - padding-left: 1rem !important; } - -.p-4 { - padding: 1.5rem !important; } - -.pt-4, -.py-4 { - padding-top: 1.5rem !important; } - -.pr-4, -.px-4 { - padding-right: 1.5rem !important; } - -.pb-4, -.py-4 { - padding-bottom: 1.5rem !important; } - -.pl-4, -.px-4 { - padding-left: 1.5rem !important; } - -.p-5 { - padding: 3rem !important; } - -.pt-5, -.py-5 { - padding-top: 3rem !important; } - -.pr-5, -.px-5 { - padding-right: 3rem !important; } - -.pb-5, -.py-5 { - padding-bottom: 3rem !important; } - -.pl-5, -.px-5 { - padding-left: 3rem !important; } - -.m-n1 { - margin: -0.25rem !important; } - -.mt-n1, -.my-n1 { - margin-top: -0.25rem !important; } - -.mr-n1, -.mx-n1 { - margin-right: -0.25rem !important; } - -.mb-n1, -.my-n1 { - margin-bottom: -0.25rem !important; } - -.ml-n1, -.mx-n1 { - margin-left: -0.25rem !important; } - -.m-n2 { - margin: -0.5rem !important; } - -.mt-n2, -.my-n2 { - margin-top: -0.5rem !important; } - -.mr-n2, -.mx-n2 { - margin-right: -0.5rem !important; } - -.mb-n2, -.my-n2 { - margin-bottom: -0.5rem !important; } - -.ml-n2, -.mx-n2 { - margin-left: -0.5rem !important; } - -.m-n3 { - margin: -1rem !important; } - -.mt-n3, -.my-n3 { - margin-top: -1rem !important; } - -.mr-n3, -.mx-n3 { - margin-right: -1rem !important; } - -.mb-n3, -.my-n3 { - margin-bottom: -1rem !important; } - -.ml-n3, -.mx-n3 { - margin-left: -1rem !important; } - -.m-n4 { - margin: -1.5rem !important; } - -.mt-n4, -.my-n4 { - margin-top: -1.5rem !important; } - -.mr-n4, -.mx-n4 { - margin-right: -1.5rem !important; } - -.mb-n4, -.my-n4 { - margin-bottom: -1.5rem !important; } - -.ml-n4, -.mx-n4 { - margin-left: -1.5rem !important; } - -.m-n5 { - margin: -3rem !important; } - -.mt-n5, -.my-n5 { - margin-top: -3rem !important; } - -.mr-n5, -.mx-n5 { - margin-right: -3rem !important; } - -.mb-n5, -.my-n5 { - margin-bottom: -3rem !important; } - -.ml-n5, -.mx-n5 { - margin-left: -3rem !important; } - -.m-auto { - margin: auto !important; } - -.mt-auto, -.my-auto { - margin-top: auto !important; } - -.mr-auto, -.mx-auto { - margin-right: auto !important; } - -.mb-auto, -.my-auto { - margin-bottom: auto !important; } - -.ml-auto, -.mx-auto { - margin-left: auto !important; } - -@media (min-width: 576px) { - .m-sm-0 { - margin: 0 !important; } - .mt-sm-0, - .my-sm-0 { - margin-top: 0 !important; } - .mr-sm-0, - .mx-sm-0 { - margin-right: 0 !important; } - .mb-sm-0, - .my-sm-0 { - margin-bottom: 0 !important; } - .ml-sm-0, - .mx-sm-0 { - margin-left: 0 !important; } - .m-sm-1 { - margin: 0.25rem !important; } - .mt-sm-1, - .my-sm-1 { - margin-top: 0.25rem !important; } - .mr-sm-1, - .mx-sm-1 { - margin-right: 0.25rem !important; } - .mb-sm-1, - .my-sm-1 { - margin-bottom: 0.25rem !important; } - .ml-sm-1, - .mx-sm-1 { - margin-left: 0.25rem !important; } - .m-sm-2 { - margin: 0.5rem !important; } - .mt-sm-2, - .my-sm-2 { - margin-top: 0.5rem !important; } - .mr-sm-2, - .mx-sm-2 { - margin-right: 0.5rem !important; } - .mb-sm-2, - .my-sm-2 { - margin-bottom: 0.5rem !important; } - .ml-sm-2, - .mx-sm-2 { - margin-left: 0.5rem !important; } - .m-sm-3 { - margin: 1rem !important; } - .mt-sm-3, - .my-sm-3 { - margin-top: 1rem !important; } - .mr-sm-3, - .mx-sm-3 { - margin-right: 1rem !important; } - .mb-sm-3, - .my-sm-3 { - margin-bottom: 1rem !important; } - .ml-sm-3, - .mx-sm-3 { - margin-left: 1rem !important; } - .m-sm-4 { - margin: 1.5rem !important; } - .mt-sm-4, - .my-sm-4 { - margin-top: 1.5rem !important; } - .mr-sm-4, - .mx-sm-4 { - margin-right: 1.5rem !important; } - .mb-sm-4, - .my-sm-4 { - margin-bottom: 1.5rem !important; } - .ml-sm-4, - .mx-sm-4 { - margin-left: 1.5rem !important; } - .m-sm-5 { - margin: 3rem !important; } - .mt-sm-5, - .my-sm-5 { - margin-top: 3rem !important; } - .mr-sm-5, - .mx-sm-5 { - margin-right: 3rem !important; } - .mb-sm-5, - .my-sm-5 { - margin-bottom: 3rem !important; } - .ml-sm-5, - .mx-sm-5 { - margin-left: 3rem !important; } - .p-sm-0 { - padding: 0 !important; } - .pt-sm-0, - .py-sm-0 { - padding-top: 0 !important; } - .pr-sm-0, - .px-sm-0 { - padding-right: 0 !important; } - .pb-sm-0, - .py-sm-0 { - padding-bottom: 0 !important; } - .pl-sm-0, - .px-sm-0 { - padding-left: 0 !important; } - .p-sm-1 { - padding: 0.25rem !important; } - .pt-sm-1, - .py-sm-1 { - padding-top: 0.25rem !important; } - .pr-sm-1, - .px-sm-1 { - padding-right: 0.25rem !important; } - .pb-sm-1, - .py-sm-1 { - padding-bottom: 0.25rem !important; } - .pl-sm-1, - .px-sm-1 { - padding-left: 0.25rem !important; } - .p-sm-2 { - padding: 0.5rem !important; } - .pt-sm-2, - .py-sm-2 { - padding-top: 0.5rem !important; } - .pr-sm-2, - .px-sm-2 { - padding-right: 0.5rem !important; } - .pb-sm-2, - .py-sm-2 { - padding-bottom: 0.5rem !important; } - .pl-sm-2, - .px-sm-2 { - padding-left: 0.5rem !important; } - .p-sm-3 { - padding: 1rem !important; } - .pt-sm-3, - .py-sm-3 { - padding-top: 1rem !important; } - .pr-sm-3, - .px-sm-3 { - padding-right: 1rem !important; } - .pb-sm-3, - .py-sm-3 { - padding-bottom: 1rem !important; } - .pl-sm-3, - .px-sm-3 { - padding-left: 1rem !important; } - .p-sm-4 { - padding: 1.5rem !important; } - .pt-sm-4, - .py-sm-4 { - padding-top: 1.5rem !important; } - .pr-sm-4, - .px-sm-4 { - padding-right: 1.5rem !important; } - .pb-sm-4, - .py-sm-4 { - padding-bottom: 1.5rem !important; } - .pl-sm-4, - .px-sm-4 { - padding-left: 1.5rem !important; } - .p-sm-5 { - padding: 3rem !important; } - .pt-sm-5, - .py-sm-5 { - padding-top: 3rem !important; } - .pr-sm-5, - .px-sm-5 { - padding-right: 3rem !important; } - .pb-sm-5, - .py-sm-5 { - padding-bottom: 3rem !important; } - .pl-sm-5, - .px-sm-5 { - padding-left: 3rem !important; } - .m-sm-n1 { - margin: -0.25rem !important; } - .mt-sm-n1, - .my-sm-n1 { - margin-top: -0.25rem !important; } - .mr-sm-n1, - .mx-sm-n1 { - margin-right: -0.25rem !important; } - .mb-sm-n1, - .my-sm-n1 { - margin-bottom: -0.25rem !important; } - .ml-sm-n1, - .mx-sm-n1 { - margin-left: -0.25rem !important; } - .m-sm-n2 { - margin: -0.5rem !important; } - .mt-sm-n2, - .my-sm-n2 { - margin-top: -0.5rem !important; } - .mr-sm-n2, - .mx-sm-n2 { - margin-right: -0.5rem !important; } - .mb-sm-n2, - .my-sm-n2 { - margin-bottom: -0.5rem !important; } - .ml-sm-n2, - .mx-sm-n2 { - margin-left: -0.5rem !important; } - .m-sm-n3 { - margin: -1rem !important; } - .mt-sm-n3, - .my-sm-n3 { - margin-top: -1rem !important; } - .mr-sm-n3, - .mx-sm-n3 { - margin-right: -1rem !important; } - .mb-sm-n3, - .my-sm-n3 { - margin-bottom: -1rem !important; } - .ml-sm-n3, - .mx-sm-n3 { - margin-left: -1rem !important; } - .m-sm-n4 { - margin: -1.5rem !important; } - .mt-sm-n4, - .my-sm-n4 { - margin-top: -1.5rem !important; } - .mr-sm-n4, - .mx-sm-n4 { - margin-right: -1.5rem !important; } - .mb-sm-n4, - .my-sm-n4 { - margin-bottom: -1.5rem !important; } - .ml-sm-n4, - .mx-sm-n4 { - margin-left: -1.5rem !important; } - .m-sm-n5 { - margin: -3rem !important; } - .mt-sm-n5, - .my-sm-n5 { - margin-top: -3rem !important; } - .mr-sm-n5, - .mx-sm-n5 { - margin-right: -3rem !important; } - .mb-sm-n5, - .my-sm-n5 { - margin-bottom: -3rem !important; } - .ml-sm-n5, - .mx-sm-n5 { - margin-left: -3rem !important; } - .m-sm-auto { - margin: auto !important; } - .mt-sm-auto, - .my-sm-auto { - margin-top: auto !important; } - .mr-sm-auto, - .mx-sm-auto { - margin-right: auto !important; } - .mb-sm-auto, - .my-sm-auto { - margin-bottom: auto !important; } - .ml-sm-auto, - .mx-sm-auto { - margin-left: auto !important; } } - -@media (min-width: 768px) { - .m-md-0 { - margin: 0 !important; } - .mt-md-0, - .my-md-0 { - margin-top: 0 !important; } - .mr-md-0, - .mx-md-0 { - margin-right: 0 !important; } - .mb-md-0, - .my-md-0 { - margin-bottom: 0 !important; } - .ml-md-0, - .mx-md-0 { - margin-left: 0 !important; } - .m-md-1 { - margin: 0.25rem !important; } - .mt-md-1, - .my-md-1 { - margin-top: 0.25rem !important; } - .mr-md-1, - .mx-md-1 { - margin-right: 0.25rem !important; } - .mb-md-1, - .my-md-1 { - margin-bottom: 0.25rem !important; } - .ml-md-1, - .mx-md-1 { - margin-left: 0.25rem !important; } - .m-md-2 { - margin: 0.5rem !important; } - .mt-md-2, - .my-md-2 { - margin-top: 0.5rem !important; } - .mr-md-2, - .mx-md-2 { - margin-right: 0.5rem !important; } - .mb-md-2, - .my-md-2 { - margin-bottom: 0.5rem !important; } - .ml-md-2, - .mx-md-2 { - margin-left: 0.5rem !important; } - .m-md-3 { - margin: 1rem !important; } - .mt-md-3, - .my-md-3 { - margin-top: 1rem !important; } - .mr-md-3, - .mx-md-3 { - margin-right: 1rem !important; } - .mb-md-3, - .my-md-3 { - margin-bottom: 1rem !important; } - .ml-md-3, - .mx-md-3 { - margin-left: 1rem !important; } - .m-md-4 { - margin: 1.5rem !important; } - .mt-md-4, - .my-md-4 { - margin-top: 1.5rem !important; } - .mr-md-4, - .mx-md-4 { - margin-right: 1.5rem !important; } - .mb-md-4, - .my-md-4 { - margin-bottom: 1.5rem !important; } - .ml-md-4, - .mx-md-4 { - margin-left: 1.5rem !important; } - .m-md-5 { - margin: 3rem !important; } - .mt-md-5, - .my-md-5 { - margin-top: 3rem !important; } - .mr-md-5, - .mx-md-5 { - margin-right: 3rem !important; } - .mb-md-5, - .my-md-5 { - margin-bottom: 3rem !important; } - .ml-md-5, - .mx-md-5 { - margin-left: 3rem !important; } - .p-md-0 { - padding: 0 !important; } - .pt-md-0, - .py-md-0 { - padding-top: 0 !important; } - .pr-md-0, - .px-md-0 { - padding-right: 0 !important; } - .pb-md-0, - .py-md-0 { - padding-bottom: 0 !important; } - .pl-md-0, - .px-md-0 { - padding-left: 0 !important; } - .p-md-1 { - padding: 0.25rem !important; } - .pt-md-1, - .py-md-1 { - padding-top: 0.25rem !important; } - .pr-md-1, - .px-md-1 { - padding-right: 0.25rem !important; } - .pb-md-1, - .py-md-1 { - padding-bottom: 0.25rem !important; } - .pl-md-1, - .px-md-1 { - padding-left: 0.25rem !important; } - .p-md-2 { - padding: 0.5rem !important; } - .pt-md-2, - .py-md-2 { - padding-top: 0.5rem !important; } - .pr-md-2, - .px-md-2 { - padding-right: 0.5rem !important; } - .pb-md-2, - .py-md-2 { - padding-bottom: 0.5rem !important; } - .pl-md-2, - .px-md-2 { - padding-left: 0.5rem !important; } - .p-md-3 { - padding: 1rem !important; } - .pt-md-3, - .py-md-3 { - padding-top: 1rem !important; } - .pr-md-3, - .px-md-3 { - padding-right: 1rem !important; } - .pb-md-3, - .py-md-3 { - padding-bottom: 1rem !important; } - .pl-md-3, - .px-md-3 { - padding-left: 1rem !important; } - .p-md-4 { - padding: 1.5rem !important; } - .pt-md-4, - .py-md-4 { - padding-top: 1.5rem !important; } - .pr-md-4, - .px-md-4 { - padding-right: 1.5rem !important; } - .pb-md-4, - .py-md-4 { - padding-bottom: 1.5rem !important; } - .pl-md-4, - .px-md-4 { - padding-left: 1.5rem !important; } - .p-md-5 { - padding: 3rem !important; } - .pt-md-5, - .py-md-5 { - padding-top: 3rem !important; } - .pr-md-5, - .px-md-5 { - padding-right: 3rem !important; } - .pb-md-5, - .py-md-5 { - padding-bottom: 3rem !important; } - .pl-md-5, - .px-md-5 { - padding-left: 3rem !important; } - .m-md-n1 { - margin: -0.25rem !important; } - .mt-md-n1, - .my-md-n1 { - margin-top: -0.25rem !important; } - .mr-md-n1, - .mx-md-n1 { - margin-right: -0.25rem !important; } - .mb-md-n1, - .my-md-n1 { - margin-bottom: -0.25rem !important; } - .ml-md-n1, - .mx-md-n1 { - margin-left: -0.25rem !important; } - .m-md-n2 { - margin: -0.5rem !important; } - .mt-md-n2, - .my-md-n2 { - margin-top: -0.5rem !important; } - .mr-md-n2, - .mx-md-n2 { - margin-right: -0.5rem !important; } - .mb-md-n2, - .my-md-n2 { - margin-bottom: -0.5rem !important; } - .ml-md-n2, - .mx-md-n2 { - margin-left: -0.5rem !important; } - .m-md-n3 { - margin: -1rem !important; } - .mt-md-n3, - .my-md-n3 { - margin-top: -1rem !important; } - .mr-md-n3, - .mx-md-n3 { - margin-right: -1rem !important; } - .mb-md-n3, - .my-md-n3 { - margin-bottom: -1rem !important; } - .ml-md-n3, - .mx-md-n3 { - margin-left: -1rem !important; } - .m-md-n4 { - margin: -1.5rem !important; } - .mt-md-n4, - .my-md-n4 { - margin-top: -1.5rem !important; } - .mr-md-n4, - .mx-md-n4 { - margin-right: -1.5rem !important; } - .mb-md-n4, - .my-md-n4 { - margin-bottom: -1.5rem !important; } - .ml-md-n4, - .mx-md-n4 { - margin-left: -1.5rem !important; } - .m-md-n5 { - margin: -3rem !important; } - .mt-md-n5, - .my-md-n5 { - margin-top: -3rem !important; } - .mr-md-n5, - .mx-md-n5 { - margin-right: -3rem !important; } - .mb-md-n5, - .my-md-n5 { - margin-bottom: -3rem !important; } - .ml-md-n5, - .mx-md-n5 { - margin-left: -3rem !important; } - .m-md-auto { - margin: auto !important; } - .mt-md-auto, - .my-md-auto { - margin-top: auto !important; } - .mr-md-auto, - .mx-md-auto { - margin-right: auto !important; } - .mb-md-auto, - .my-md-auto { - margin-bottom: auto !important; } - .ml-md-auto, - .mx-md-auto { - margin-left: auto !important; } } - -@media (min-width: 992px) { - .m-lg-0 { - margin: 0 !important; } - .mt-lg-0, - .my-lg-0 { - margin-top: 0 !important; } - .mr-lg-0, - .mx-lg-0 { - margin-right: 0 !important; } - .mb-lg-0, - .my-lg-0 { - margin-bottom: 0 !important; } - .ml-lg-0, - .mx-lg-0 { - margin-left: 0 !important; } - .m-lg-1 { - margin: 0.25rem !important; } - .mt-lg-1, - .my-lg-1 { - margin-top: 0.25rem !important; } - .mr-lg-1, - .mx-lg-1 { - margin-right: 0.25rem !important; } - .mb-lg-1, - .my-lg-1 { - margin-bottom: 0.25rem !important; } - .ml-lg-1, - .mx-lg-1 { - margin-left: 0.25rem !important; } - .m-lg-2 { - margin: 0.5rem !important; } - .mt-lg-2, - .my-lg-2 { - margin-top: 0.5rem !important; } - .mr-lg-2, - .mx-lg-2 { - margin-right: 0.5rem !important; } - .mb-lg-2, - .my-lg-2 { - margin-bottom: 0.5rem !important; } - .ml-lg-2, - .mx-lg-2 { - margin-left: 0.5rem !important; } - .m-lg-3 { - margin: 1rem !important; } - .mt-lg-3, - .my-lg-3 { - margin-top: 1rem !important; } - .mr-lg-3, - .mx-lg-3 { - margin-right: 1rem !important; } - .mb-lg-3, - .my-lg-3 { - margin-bottom: 1rem !important; } - .ml-lg-3, - .mx-lg-3 { - margin-left: 1rem !important; } - .m-lg-4 { - margin: 1.5rem !important; } - .mt-lg-4, - .my-lg-4 { - margin-top: 1.5rem !important; } - .mr-lg-4, - .mx-lg-4 { - margin-right: 1.5rem !important; } - .mb-lg-4, - .my-lg-4 { - margin-bottom: 1.5rem !important; } - .ml-lg-4, - .mx-lg-4 { - margin-left: 1.5rem !important; } - .m-lg-5 { - margin: 3rem !important; } - .mt-lg-5, - .my-lg-5 { - margin-top: 3rem !important; } - .mr-lg-5, - .mx-lg-5 { - margin-right: 3rem !important; } - .mb-lg-5, - .my-lg-5 { - margin-bottom: 3rem !important; } - .ml-lg-5, - .mx-lg-5 { - margin-left: 3rem !important; } - .p-lg-0 { - padding: 0 !important; } - .pt-lg-0, - .py-lg-0 { - padding-top: 0 !important; } - .pr-lg-0, - .px-lg-0 { - padding-right: 0 !important; } - .pb-lg-0, - .py-lg-0 { - padding-bottom: 0 !important; } - .pl-lg-0, - .px-lg-0 { - padding-left: 0 !important; } - .p-lg-1 { - padding: 0.25rem !important; } - .pt-lg-1, - .py-lg-1 { - padding-top: 0.25rem !important; } - .pr-lg-1, - .px-lg-1 { - padding-right: 0.25rem !important; } - .pb-lg-1, - .py-lg-1 { - padding-bottom: 0.25rem !important; } - .pl-lg-1, - .px-lg-1 { - padding-left: 0.25rem !important; } - .p-lg-2 { - padding: 0.5rem !important; } - .pt-lg-2, - .py-lg-2 { - padding-top: 0.5rem !important; } - .pr-lg-2, - .px-lg-2 { - padding-right: 0.5rem !important; } - .pb-lg-2, - .py-lg-2 { - padding-bottom: 0.5rem !important; } - .pl-lg-2, - .px-lg-2 { - padding-left: 0.5rem !important; } - .p-lg-3 { - padding: 1rem !important; } - .pt-lg-3, - .py-lg-3 { - padding-top: 1rem !important; } - .pr-lg-3, - .px-lg-3 { - padding-right: 1rem !important; } - .pb-lg-3, - .py-lg-3 { - padding-bottom: 1rem !important; } - .pl-lg-3, - .px-lg-3 { - padding-left: 1rem !important; } - .p-lg-4 { - padding: 1.5rem !important; } - .pt-lg-4, - .py-lg-4 { - padding-top: 1.5rem !important; } - .pr-lg-4, - .px-lg-4 { - padding-right: 1.5rem !important; } - .pb-lg-4, - .py-lg-4 { - padding-bottom: 1.5rem !important; } - .pl-lg-4, - .px-lg-4 { - padding-left: 1.5rem !important; } - .p-lg-5 { - padding: 3rem !important; } - .pt-lg-5, - .py-lg-5 { - padding-top: 3rem !important; } - .pr-lg-5, - .px-lg-5 { - padding-right: 3rem !important; } - .pb-lg-5, - .py-lg-5 { - padding-bottom: 3rem !important; } - .pl-lg-5, - .px-lg-5 { - padding-left: 3rem !important; } - .m-lg-n1 { - margin: -0.25rem !important; } - .mt-lg-n1, - .my-lg-n1 { - margin-top: -0.25rem !important; } - .mr-lg-n1, - .mx-lg-n1 { - margin-right: -0.25rem !important; } - .mb-lg-n1, - .my-lg-n1 { - margin-bottom: -0.25rem !important; } - .ml-lg-n1, - .mx-lg-n1 { - margin-left: -0.25rem !important; } - .m-lg-n2 { - margin: -0.5rem !important; } - .mt-lg-n2, - .my-lg-n2 { - margin-top: -0.5rem !important; } - .mr-lg-n2, - .mx-lg-n2 { - margin-right: -0.5rem !important; } - .mb-lg-n2, - .my-lg-n2 { - margin-bottom: -0.5rem !important; } - .ml-lg-n2, - .mx-lg-n2 { - margin-left: -0.5rem !important; } - .m-lg-n3 { - margin: -1rem !important; } - .mt-lg-n3, - .my-lg-n3 { - margin-top: -1rem !important; } - .mr-lg-n3, - .mx-lg-n3 { - margin-right: -1rem !important; } - .mb-lg-n3, - .my-lg-n3 { - margin-bottom: -1rem !important; } - .ml-lg-n3, - .mx-lg-n3 { - margin-left: -1rem !important; } - .m-lg-n4 { - margin: -1.5rem !important; } - .mt-lg-n4, - .my-lg-n4 { - margin-top: -1.5rem !important; } - .mr-lg-n4, - .mx-lg-n4 { - margin-right: -1.5rem !important; } - .mb-lg-n4, - .my-lg-n4 { - margin-bottom: -1.5rem !important; } - .ml-lg-n4, - .mx-lg-n4 { - margin-left: -1.5rem !important; } - .m-lg-n5 { - margin: -3rem !important; } - .mt-lg-n5, - .my-lg-n5 { - margin-top: -3rem !important; } - .mr-lg-n5, - .mx-lg-n5 { - margin-right: -3rem !important; } - .mb-lg-n5, - .my-lg-n5 { - margin-bottom: -3rem !important; } - .ml-lg-n5, - .mx-lg-n5 { - margin-left: -3rem !important; } - .m-lg-auto { - margin: auto !important; } - .mt-lg-auto, - .my-lg-auto { - margin-top: auto !important; } - .mr-lg-auto, - .mx-lg-auto { - margin-right: auto !important; } - .mb-lg-auto, - .my-lg-auto { - margin-bottom: auto !important; } - .ml-lg-auto, - .mx-lg-auto { - margin-left: auto !important; } } - -@media (min-width: 1200px) { - .m-xl-0 { - margin: 0 !important; } - .mt-xl-0, - .my-xl-0 { - margin-top: 0 !important; } - .mr-xl-0, - .mx-xl-0 { - margin-right: 0 !important; } - .mb-xl-0, - .my-xl-0 { - margin-bottom: 0 !important; } - .ml-xl-0, - .mx-xl-0 { - margin-left: 0 !important; } - .m-xl-1 { - margin: 0.25rem !important; } - .mt-xl-1, - .my-xl-1 { - margin-top: 0.25rem !important; } - .mr-xl-1, - .mx-xl-1 { - margin-right: 0.25rem !important; } - .mb-xl-1, - .my-xl-1 { - margin-bottom: 0.25rem !important; } - .ml-xl-1, - .mx-xl-1 { - margin-left: 0.25rem !important; } - .m-xl-2 { - margin: 0.5rem !important; } - .mt-xl-2, - .my-xl-2 { - margin-top: 0.5rem !important; } - .mr-xl-2, - .mx-xl-2 { - margin-right: 0.5rem !important; } - .mb-xl-2, - .my-xl-2 { - margin-bottom: 0.5rem !important; } - .ml-xl-2, - .mx-xl-2 { - margin-left: 0.5rem !important; } - .m-xl-3 { - margin: 1rem !important; } - .mt-xl-3, - .my-xl-3 { - margin-top: 1rem !important; } - .mr-xl-3, - .mx-xl-3 { - margin-right: 1rem !important; } - .mb-xl-3, - .my-xl-3 { - margin-bottom: 1rem !important; } - .ml-xl-3, - .mx-xl-3 { - margin-left: 1rem !important; } - .m-xl-4 { - margin: 1.5rem !important; } - .mt-xl-4, - .my-xl-4 { - margin-top: 1.5rem !important; } - .mr-xl-4, - .mx-xl-4 { - margin-right: 1.5rem !important; } - .mb-xl-4, - .my-xl-4 { - margin-bottom: 1.5rem !important; } - .ml-xl-4, - .mx-xl-4 { - margin-left: 1.5rem !important; } - .m-xl-5 { - margin: 3rem !important; } - .mt-xl-5, - .my-xl-5 { - margin-top: 3rem !important; } - .mr-xl-5, - .mx-xl-5 { - margin-right: 3rem !important; } - .mb-xl-5, - .my-xl-5 { - margin-bottom: 3rem !important; } - .ml-xl-5, - .mx-xl-5 { - margin-left: 3rem !important; } - .p-xl-0 { - padding: 0 !important; } - .pt-xl-0, - .py-xl-0 { - padding-top: 0 !important; } - .pr-xl-0, - .px-xl-0 { - padding-right: 0 !important; } - .pb-xl-0, - .py-xl-0 { - padding-bottom: 0 !important; } - .pl-xl-0, - .px-xl-0 { - padding-left: 0 !important; } - .p-xl-1 { - padding: 0.25rem !important; } - .pt-xl-1, - .py-xl-1 { - padding-top: 0.25rem !important; } - .pr-xl-1, - .px-xl-1 { - padding-right: 0.25rem !important; } - .pb-xl-1, - .py-xl-1 { - padding-bottom: 0.25rem !important; } - .pl-xl-1, - .px-xl-1 { - padding-left: 0.25rem !important; } - .p-xl-2 { - padding: 0.5rem !important; } - .pt-xl-2, - .py-xl-2 { - padding-top: 0.5rem !important; } - .pr-xl-2, - .px-xl-2 { - padding-right: 0.5rem !important; } - .pb-xl-2, - .py-xl-2 { - padding-bottom: 0.5rem !important; } - .pl-xl-2, - .px-xl-2 { - padding-left: 0.5rem !important; } - .p-xl-3 { - padding: 1rem !important; } - .pt-xl-3, - .py-xl-3 { - padding-top: 1rem !important; } - .pr-xl-3, - .px-xl-3 { - padding-right: 1rem !important; } - .pb-xl-3, - .py-xl-3 { - padding-bottom: 1rem !important; } - .pl-xl-3, - .px-xl-3 { - padding-left: 1rem !important; } - .p-xl-4 { - padding: 1.5rem !important; } - .pt-xl-4, - .py-xl-4 { - padding-top: 1.5rem !important; } - .pr-xl-4, - .px-xl-4 { - padding-right: 1.5rem !important; } - .pb-xl-4, - .py-xl-4 { - padding-bottom: 1.5rem !important; } - .pl-xl-4, - .px-xl-4 { - padding-left: 1.5rem !important; } - .p-xl-5 { - padding: 3rem !important; } - .pt-xl-5, - .py-xl-5 { - padding-top: 3rem !important; } - .pr-xl-5, - .px-xl-5 { - padding-right: 3rem !important; } - .pb-xl-5, - .py-xl-5 { - padding-bottom: 3rem !important; } - .pl-xl-5, - .px-xl-5 { - padding-left: 3rem !important; } - .m-xl-n1 { - margin: -0.25rem !important; } - .mt-xl-n1, - .my-xl-n1 { - margin-top: -0.25rem !important; } - .mr-xl-n1, - .mx-xl-n1 { - margin-right: -0.25rem !important; } - .mb-xl-n1, - .my-xl-n1 { - margin-bottom: -0.25rem !important; } - .ml-xl-n1, - .mx-xl-n1 { - margin-left: -0.25rem !important; } - .m-xl-n2 { - margin: -0.5rem !important; } - .mt-xl-n2, - .my-xl-n2 { - margin-top: -0.5rem !important; } - .mr-xl-n2, - .mx-xl-n2 { - margin-right: -0.5rem !important; } - .mb-xl-n2, - .my-xl-n2 { - margin-bottom: -0.5rem !important; } - .ml-xl-n2, - .mx-xl-n2 { - margin-left: -0.5rem !important; } - .m-xl-n3 { - margin: -1rem !important; } - .mt-xl-n3, - .my-xl-n3 { - margin-top: -1rem !important; } - .mr-xl-n3, - .mx-xl-n3 { - margin-right: -1rem !important; } - .mb-xl-n3, - .my-xl-n3 { - margin-bottom: -1rem !important; } - .ml-xl-n3, - .mx-xl-n3 { - margin-left: -1rem !important; } - .m-xl-n4 { - margin: -1.5rem !important; } - .mt-xl-n4, - .my-xl-n4 { - margin-top: -1.5rem !important; } - .mr-xl-n4, - .mx-xl-n4 { - margin-right: -1.5rem !important; } - .mb-xl-n4, - .my-xl-n4 { - margin-bottom: -1.5rem !important; } - .ml-xl-n4, - .mx-xl-n4 { - margin-left: -1.5rem !important; } - .m-xl-n5 { - margin: -3rem !important; } - .mt-xl-n5, - .my-xl-n5 { - margin-top: -3rem !important; } - .mr-xl-n5, - .mx-xl-n5 { - margin-right: -3rem !important; } - .mb-xl-n5, - .my-xl-n5 { - margin-bottom: -3rem !important; } - .ml-xl-n5, - .mx-xl-n5 { - margin-left: -3rem !important; } - .m-xl-auto { - margin: auto !important; } - .mt-xl-auto, - .my-xl-auto { - margin-top: auto !important; } - .mr-xl-auto, - .mx-xl-auto { - margin-right: auto !important; } - .mb-xl-auto, - .my-xl-auto { - margin-bottom: auto !important; } - .ml-xl-auto, - .mx-xl-auto { - margin-left: auto !important; } } - -.stretched-link::after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1; - pointer-events: auto; - content: ""; - background-color: rgba(0, 0, 0, 0); } - -.text-monospace { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; } - -.text-justify { - text-align: justify !important; } - -.text-wrap { - white-space: normal !important; } - -.text-nowrap { - white-space: nowrap !important; } - -.text-truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; } - -.text-left { - text-align: left !important; } - -.text-right { - text-align: right !important; } - -.text-center { - text-align: center !important; } - -@media (min-width: 576px) { - .text-sm-left { - text-align: left !important; } - .text-sm-right { - text-align: right !important; } - .text-sm-center { - text-align: center !important; } } - -@media (min-width: 768px) { - .text-md-left { - text-align: left !important; } - .text-md-right { - text-align: right !important; } - .text-md-center { - text-align: center !important; } } - -@media (min-width: 992px) { - .text-lg-left { - text-align: left !important; } - .text-lg-right { - text-align: right !important; } - .text-lg-center { - text-align: center !important; } } - -@media (min-width: 1200px) { - .text-xl-left { - text-align: left !important; } - .text-xl-right { - text-align: right !important; } - .text-xl-center { - text-align: center !important; } } - -.text-lowercase { - text-transform: lowercase !important; } - -.text-uppercase { - text-transform: uppercase !important; } - -.text-capitalize { - text-transform: capitalize !important; } - -.font-weight-light { - font-weight: 300 !important; } - -.font-weight-lighter { - font-weight: lighter !important; } - -.font-weight-normal { - font-weight: 400 !important; } - -.font-weight-bold { - font-weight: 700 !important; } - -.font-weight-bolder { - font-weight: bolder !important; } - -.font-italic { - font-style: italic !important; } - -.text-white { - color: #fff !important; } - -.text-primary { - color: #007bff !important; } - -a.text-primary:hover, a.text-primary:focus { - color: #0056b3 !important; } - -.text-secondary { - color: #6c757d !important; } - -a.text-secondary:hover, a.text-secondary:focus { - color: #494f54 !important; } - -.text-success { - color: #28a745 !important; } - -a.text-success:hover, a.text-success:focus { - color: #19692c !important; } - -.text-info { - color: #17a2b8 !important; } - -a.text-info:hover, a.text-info:focus { - color: #0f6674 !important; } - -.text-warning { - color: #ffc107 !important; } - -a.text-warning:hover, a.text-warning:focus { - color: #ba8b00 !important; } - -.text-danger { - color: #dc3545 !important; } - -a.text-danger:hover, a.text-danger:focus { - color: #a71d2a !important; } - -.text-light { - color: #f8f9fa !important; } - -a.text-light:hover, a.text-light:focus { - color: #cbd3da !important; } - -.text-dark { - color: #343a40 !important; } - -a.text-dark:hover, a.text-dark:focus { - color: #121416 !important; } - -.text-body { - color: #212529 !important; } - -.text-muted { - color: #6c757d !important; } - -.text-black-50 { - color: rgba(0, 0, 0, 0.5) !important; } - -.text-white-50 { - color: rgba(255, 255, 255, 0.5) !important; } - -.text-hide { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; } - -.text-decoration-none { - text-decoration: none !important; } - -.text-break { - word-break: break-word !important; - word-wrap: break-word !important; } - -.text-reset { - color: inherit !important; } - -.visible { - visibility: visible !important; } - -.invisible { - visibility: hidden !important; } - -/* Callout */ -.callout { - border: 1px solid #e9ecef; - border-left-color: #e9ecef; - border-left-width: 1px; - border-left-width: .25rem; - border-radius: .25rem; } - -.callout-primary { - border-left-color: #007bff; } - -.callout-secondary { - border-left-color: #6c757d; } - -.callout-success { - border-left-color: #28a745; } - -.callout-info { - border-left-color: #17a2b8; } - -.callout-warning { - border-left-color: #ffc107; } - -.callout-danger { - border-left-color: #dc3545; } - -.callout-light { - border-left-color: #f8f9fa; } - -.callout-dark { - border-left-color: #343a40; } - -/* Toasts */ -.toast { - min-width: 250px; } - -.toast-primary { - color: #003670; - background-color: #8fc5ff; - border-color: #7abaff; } - .toast-primary strong { - border-top-color: #61adff; } - -.toast-secondary { - color: #303337; - background-color: #bec2c6; - border-color: #b3b7bb; } - .toast-secondary strong { - border-top-color: #a6aaaf; } - -.toast-success { - color: #12491e; - background-color: #a0d8ad; - border-color: #8fd19e; } - .toast-success strong { - border-top-color: #7dca8e; } - -.toast-info { - color: #0a4751; - background-color: #99d6e0; - border-color: #86cfda; } - .toast-info strong { - border-top-color: #72c7d4; } - -.toast-warning { - color: #705503; - background-color: #ffe492; - border-color: #ffdf7e; } - .toast-warning strong { - border-top-color: #ffd965; } - -.toast-danger { - color: #61171e; - background-color: #f0a6ad; - border-color: #ed969e; } - .toast-danger strong { - border-top-color: #e9808a; } - -.toast-light { - color: #6d6e6e; - background-color: #fcfcfd; - border-color: #fbfcfc; } - .toast-light strong { - border-top-color: #ecf1f1; } - -.toast-dark { - color: #171a1c; - background-color: #a6a8ab; - border-color: #95999c; } - .toast-dark strong { - border-top-color: #888c90; } - -/* Progress Timeline */ -.progress-timeline { - padding: 0.2em 0.2em 0.5em 0.2em; } - .progress-timeline ul { - position: relative; - padding: 0; } - .progress-timeline li { - list-style-type: none; - position: relative; } - .progress-timeline li.progress-inactive { - opacity: 0.5; } - .progress-timeline .progress-line { - height: 2px; } - .progress-timeline .progress-line.progress-inactive { - opacity: 0.5; } - -/* Forms severity */ -.form-control.is-invalid.info { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2317a2b8' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%2317a2b8' stroke='none'/%3e%3c/svg%3e"); } - .form-control.is-invalid.info:focus { - border-color: #17a2b8; - box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25); } - -.form-control.is-invalid.warning { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ffc107' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ffc107' stroke='none'/%3e%3c/svg%3e"); } - .form-control.is-invalid.warning:focus { - border-color: #ffc107; - box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25); } - -.form-select.is-invalid:not([multiple]):not([size]).info, -.form-select.is-invalid:not([multiple])[size="1"] -.form-select.is-invalid.info { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%2317a2b8'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%2317a2b8' stroke='none'/%3e%3c/svg%3e"); - background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } - .form-select.is-invalid:not([multiple]):not([size]).info:focus, - .form-select.is-invalid:not([multiple])[size="1"] -.form-select.is-invalid.info:focus { - box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25); } - -.form-select.is-invalid:not([multiple]):not([size]).warning, -.form-select.is-invalid:not([multiple])[size="1"] -.form-select.is-invalid.warning { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ffc107'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ffc107' stroke='none'/%3e%3c/svg%3e"); - background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } - .form-select.is-invalid:not([multiple]):not([size]).warning:focus, - .form-select.is-invalid:not([multiple])[size="1"] -.form-select.is-invalid.warning:focus { - box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25); } - -.form-check-input.is-invalid.info { - border-color: #17a2b8; } - -.form-check-input.is-invalid.info:checked { - background-color: #17a2b8; } - -.form-check-input.is-invalid.info ~ .form-check-label { - color: unset; } - -.form-check-input.is-invalid.info:focus { - box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25); } - -.form-check-input.is-invalid.warning { - border-color: #ffc107; } - -.form-check-input.is-invalid.warning:checked { - background-color: #ffc107; } - -.form-check-input.is-invalid.warning ~ .form-check-label { - color: unset; } - -.form-check-input.is-invalid.warning:focus { - box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25); } - -/* Utilities */ -.mw-75 { - max-width: 75% !important; } - -.mw-50 { - max-width: 50% !important; } - -.mw-25 { - max-width: 25% !important; } - -.mh-75 { - max-height: 75% !important; } - -.mh-50 { - max-height: 50% !important; } - -.mh-25 { - max-height: 25% !important; } - -.p-abs-center-y { - top: 50%; - transform: translateY(-50%); } - -.p-abs-center-x { - left: 50%; - transform: translateX(-50%); } - -.p-abs-center-both { - top: 50%; - left: 50%; - transform: translateX(-50%) translateY(-50%); } diff --git a/webroot/css/themes/theme-darkly.css b/webroot/css/themes/theme-darkly.css index a960271..8d23d3c 100644 --- a/webroot/css/themes/theme-darkly.css +++ b/webroot/css/themes/theme-darkly.css @@ -289,6 +289,10 @@ border: 1px solid #454545; box-shadow: none; } +.loading-overlay { + background-color: #222; + opacity: 0.65; } + /* Top navbar */ .top-navbar { background-color: #375a7f; } diff --git a/webroot/css/themes/theme-default.css b/webroot/css/themes/theme-default.css index 75b264a..95eee2a 100644 --- a/webroot/css/themes/theme-default.css +++ b/webroot/css/themes/theme-default.css @@ -289,6 +289,10 @@ border: none; box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.25); } +.loading-overlay { + background-color: #f8f9fa; + opacity: 0.75; } + /* Top navbar */ .top-navbar { background-color: #212529; } diff --git a/webroot/css/themes/theme-flatly.css b/webroot/css/themes/theme-flatly.css index 93e4ef8..767b3f7 100644 --- a/webroot/css/themes/theme-flatly.css +++ b/webroot/css/themes/theme-flatly.css @@ -289,6 +289,10 @@ border: none; box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.25); } +.loading-overlay { + background-color: #ecf0f1; + opacity: 0.75; } + /* Top navbar */ .top-navbar { background-color: #2c3e50; } diff --git a/webroot/css/themes/theme-minty.css b/webroot/css/themes/theme-minty.css index e61eaf6..644b8e4 100644 --- a/webroot/css/themes/theme-minty.css +++ b/webroot/css/themes/theme-minty.css @@ -289,6 +289,10 @@ border: none; box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.25); } +.loading-overlay { + background-color: #ecf0f1; + opacity: 0.65; } + /* Top navbar */ .top-navbar { background-color: #2c3e50; } diff --git a/webroot/css/themes/theme-quartz.css b/webroot/css/themes/theme-quartz.css index 55243e9..71469f2 100644 --- a/webroot/css/themes/theme-quartz.css +++ b/webroot/css/themes/theme-quartz.css @@ -289,6 +289,10 @@ border: none; box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.25); } +.loading-overlay { + background-color: #e9e9e8; + opacity: 0.35; } + /* Top navbar */ .top-navbar { background-color: #e83283; } diff --git a/webroot/css/themes/theme-slate.css b/webroot/css/themes/theme-slate.css index d7c338e..dc94297 100644 --- a/webroot/css/themes/theme-slate.css +++ b/webroot/css/themes/theme-slate.css @@ -285,6 +285,10 @@ border: 1px solid #454545; box-shadow: none; } +.loading-overlay { + background-color: #272b30; + opacity: 0.65; } + /* Top navbar */ .top-navbar { background-color: #3a3f44; } diff --git a/webroot/css/themes/theme-vapor.css b/webroot/css/themes/theme-vapor.css index 0ca72a3..ebab0cb 100644 --- a/webroot/css/themes/theme-vapor.css +++ b/webroot/css/themes/theme-vapor.css @@ -289,6 +289,10 @@ border: 1px solid #454545; box-shadow: none; } +.loading-overlay { + background-color: #170229; + opacity: 0.65; } + /* Top navbar */ .top-navbar { background-color: #6f42c1; } diff --git a/webroot/js/bootstrap-helper.js b/webroot/js/bootstrap-helper.js index 95333db..a5c1133 100644 --- a/webroot/js/bootstrap-helper.js +++ b/webroot/js/bootstrap-helper.js @@ -859,7 +859,7 @@ class OverlayFactory { * @namespace * @property {string} text - A small text indicating the reason of the overlay * @property {string=('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'light'|'dark'|'white'|'transparent')} variant - The variant of the overlay - * @property {number} opacity - The opacity of the overlay + * @property {number|string} opacity - The opacity of the overlay * @property {boolean} rounded - If the overlay should be rounded * @property {boolean} auto - Whether overlay and spinner options should be adapted automatically based on the node * @property {string=('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'light'|'dark'|'white'|'transparent')} spinnerVariant - The variant of the spinner @@ -868,8 +868,8 @@ class OverlayFactory { */ static defaultOptions = { text: '', - variant: 'light', - opacity: 0.85, + variant: '', + opacity: '', blur: '2px', rounded: false, auto: true, @@ -881,7 +881,7 @@ class OverlayFactory { } static overlayWrapper = '
' - static overlayContainer = '
' + static overlayContainer = '
' static overlayBg = '
' static overlaySpinner = '
' static overlayText = '' @@ -903,7 +903,9 @@ class OverlayFactory { this.$overlayContainer = $(OverlayFactory.overlayContainer) this.$overlayBg = $(OverlayFactory.overlayBg) .addClass([`bg-${this.options.variant}`, (this.options.rounded ? 'rounded' : '')]) - .css('opacity', this.options.opacity) + if (this.options.opacity !== '') { + this.$overlayBg.css('opacity', this.options.opacity) + } this.$overlaySpinner = $(OverlayFactory.overlaySpinner) this.$overlaySpinner.children().addClass(`spinner-${this.options.spinnerType}`) if (this.options.spinnerSmall) { diff --git a/webroot/theme/scss/theme-darkly.scss b/webroot/theme/scss/theme-darkly.scss index 81b305b..c7d0c48 100644 --- a/webroot/theme/scss/theme-darkly.scss +++ b/webroot/theme/scss/theme-darkly.scss @@ -8,6 +8,9 @@ $panelBgColor: #363636; $panelShadow: none; $panelBorder: 1px solid #454545; +$loadingOverlayDefaultColor: $gray-900 !default; +$loadingOverlayDefaultOpacity: 0.65 !default; + $topNavbarColor: $primary; $navbarActiveColor: #d6d6d6; // $headerBreadcrumbLinksBoxshadow: 0 1px 0 rgba(255, 255, 255, 0.07), diff --git a/webroot/theme/scss/theme-default.scss b/webroot/theme/scss/theme-default.scss index e560b60..1161c7f 100644 --- a/webroot/theme/scss/theme-default.scss +++ b/webroot/theme/scss/theme-default.scss @@ -8,6 +8,9 @@ $panelBgColor: $white !default; $panelShadow: 0 0 35px 0 rgba(154, 161, 171, 0.25) !default; $panelBorder: none !default; +$loadingOverlayDefaultColor: $light !default; +$loadingOverlayDefaultOpacity: 0.75 !default; + $topNavbarColor: $dark !default; $navbarActiveColor: #d6d6d6 !default; $headerBreadcrumbLinksBoxshadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 2px 6px 0 rgba(0, 0, 0, 0.12) !default; @@ -36,6 +39,11 @@ $calloutShadow: $panelShadow !default; box-shadow: $panelShadow; } +.loading-overlay { + background-color: $loadingOverlayDefaultColor; + opacity: $loadingOverlayDefaultOpacity; +} + /* Top navbar */ .top-navbar { background-color: $topNavbarColor; diff --git a/webroot/theme/scss/theme-minty.scss b/webroot/theme/scss/theme-minty.scss index 6eae63f..d221989 100644 --- a/webroot/theme/scss/theme-minty.scss +++ b/webroot/theme/scss/theme-minty.scss @@ -7,6 +7,8 @@ $theme: "app-flatly"; $topNavbarColor: $primary; $navbarActiveColor: #d6d6d6; +$loadingOverlayDefaultOpacity: 0.65 !default; + $sidebarBgColor: $light; $sidebarTextColor: $gray-800; $sidebarActiveColor: $success; diff --git a/webroot/theme/scss/theme-quartz.scss b/webroot/theme/scss/theme-quartz.scss index ac54d33..be26a74 100644 --- a/webroot/theme/scss/theme-quartz.scss +++ b/webroot/theme/scss/theme-quartz.scss @@ -7,6 +7,9 @@ $theme: "app-slate"; $panelBgColor: $card-bg; $panelBorder: none; +$loadingOverlayDefaultColor: $light !default; +$loadingOverlayDefaultOpacity: 0.35 !default; + $topNavbarColor: $primary; $navbarActiveColor: #d6d6d6; $headerBreadcrumbLinksBGColor: $secondary; diff --git a/webroot/theme/scss/theme-slate.scss b/webroot/theme/scss/theme-slate.scss index e87b683..c3e3921 100644 --- a/webroot/theme/scss/theme-slate.scss +++ b/webroot/theme/scss/theme-slate.scss @@ -11,6 +11,9 @@ $panelBgColor: #363636; $panelShadow: none; $panelBorder: 1px solid #454545; +$loadingOverlayDefaultColor: $gray-900 !default; +$loadingOverlayDefaultOpacity: 0.65 !default; + $topNavbarColor: $primary; $navbarActiveColor: #d6d6d6; // $headerBreadcrumbLinksBoxshadow: 0 1px 0 rgba(255, 255, 255, 0.07), diff --git a/webroot/theme/scss/theme-vapor.scss b/webroot/theme/scss/theme-vapor.scss index b504321..be3baad 100644 --- a/webroot/theme/scss/theme-vapor.scss +++ b/webroot/theme/scss/theme-vapor.scss @@ -8,6 +8,9 @@ $panelBgColor: #363636; $panelShadow: none; $panelBorder: 1px solid #454545; +$loadingOverlayDefaultColor: $dark !default; +$loadingOverlayDefaultOpacity: 0.65 !default; + $topNavbarColor: $primary; $sidebarBgColor: $dark;