Mercurial > gemma
changeset 5629:84d01a536bec 729-node-js-newer-version
Transformed scss and sass styles into css
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/assets/application.css Thu May 11 13:23:52 2023 +0200 @@ -0,0 +1,234 @@ +/* This is Free Software under GNU Affero General Public License v >= 3.0; + * without warranty, see README.md and license for details. + * + * SPDX-License-Identifier: AGPL-3.0-or-later + * License-Filename: LICENSES/AGPL-3.0.txt + * + * Copyright (C) 2018 by via donau + * – Österreichische Wasserstraßen-Gesellschaft mbH + * Software engineering by Intevation GmbH + * + * Author(s): + * Thomas Junk <thomas.junk@intevation.de> + * Markus Kottländer <markus.kottlaender@intevation> + */ +@import "tooltip.css"; + +:root { + --shadow-xs: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2); + --border-radius: 0.25rem; + --icon-height: 2rem; + --icon-width: 2rem; + --large-offset: 2rem; + --offset: 1rem; + --sidebar-width: 13rem; + --slight-transparent: 0.96; + --small-offset: 0.5rem; + --smaller: 0.9rem; + --transition-fast: 0.3s; + --x-large-offset: 3rem; + --xx-large-offset: 5rem; + + --color-info: #17a2b8; + --color-info-h: 188; + --color-info-s: 78%; + --color-info-l: 41%; +} + + +::placeholder { + color: #ccc !important; + font-size: smaller; + font-weight: bold; +} + +html { + overflow: hidden; +} + +a { + color: var(--color-info); +} + +a:hover, +a:active, +a:focus { + color: hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - 13%)); +} + +.w-90 { + width: 90%; +} + +.w-95 { + width: 95%; +} + +.debug { + border: 1px solid red; +} + +.debug2 { + border: 1px solid magenta; +} + +.debug3 { + border: 1px solid greenyellow; +} + +.header { + font-weight: bold; + font-size: 0.9em; +} + +.ui-element { + pointer-events: auto; +} + +.shadow-xs { + box-shadow: var(--shadow-xs); +} + +.box { + opacity: var(--slight-transparent); + max-height: 0; + max-width: 0; + overflow: hidden; + margin: 0; + box-shadow: var(--shadow-xs); + transition: max-width 0.4s, max-height 0.4s, margin 0.4s; +} + +.box h6, +.contextbox h6 { + color: var(--color-info); + font-weight: bold; +} + +.box-control { + display: flex; + color: #888; + padding: 4px 7px; + border-radius: 0.25rem; + cursor: pointer; + transition: background-color 0.3s, color 0.3s; +} + +.box-control .small { + padding: 4px; +} + +.box-control:hover { + color: #666; + background-color: #eee; +} + +.expanded { + max-height: 999px; + max-width: 999px; + margin: 0 0.05rem 0.5rem 0.25rem; +} + +.box-body { + padding: 0.75rem; + text-align: left; + position: relative; +} + +/* needed to fix the whitespace problem of +// https://github.com/Polyconseil/vue-gettext/issues/80; +// use like +// <a href="..">link</a> +// <span v-translate class="fix-trans-space">contributors.</span> +// +// done centrally, so we can fix it centrally for better vue-gettext version */ +.fix-trans-space, +.fix-trans-space:before { + content: " "; +} + +.closebutton { + position: absolute; + right: var(--offset); +} + +.headline { + font-weight: bold; +} + +.fade-enter-active, +.fade-leave-active { + transition: opacity 0.3s; +} +.fade-enter, +.fade-leave-to { + opacity: 0; +} + +.pointer { + cursor: pointer; +} + +.btn:disabled, +.btn.disabled { + opacity: 0.4; +} + +.btn-xs { + padding: 0.3rem 0.4rem; + font-size: 0.75rem; + line-height: 1; +} + +.snotifyToast { + text-align: left; + border-radius: 0.25rem; + box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2); + border-left: 0 !important; +} +.snotifyToast .snotifyToast__title { + font-size: 1.2rem; +} +.snotifyToast .snotifyToast__body { + white-space: pre-line; +} +.snotifyToast.snotify-info { + border-top: 4px solid var(--color-info); +} +.snotifyToast.snotify-info .snotify-icon--info { + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20version=%221.1%22%20x=%220px%22%20y=%220px%22%20viewBox=%220%200%20512%20512%22%20fill=%22%2317a2b8%22%3E%3Cg%3E%3Cpath%20d=%22M256,0C114.84,0,0,114.84,0,256S114.84,512,256,512,512,397.16,512,256,397.15,0,256,0Zm0,478.43C133.35,478.43,33.57,378.64,33.57,256S133.35,33.58,256,33.58,478.42,133.36,478.42,256,378.64,478.43,256,478.43Z%22/%3E%3Cpath%20d=%22M251.26,161.24a22.39,22.39,0,1,0-22.38-22.39A22.39,22.39,0,0,0,251.26,161.24Z%22/%3E%3Cpath%20d=%22M286.84,357.87h-14v-160A16.79,16.79,0,0,0,256,181.05H225.17a16.79,16.79,0,0,0,0,33.58h14.05V357.87H225.17a16.79,16.79,0,0,0,0,33.57h61.67a16.79,16.79,0,1,0,0-33.57Z%22/%3E%3C/g%3E%3C/svg%3E"); +} +.snotifyToast.snotify-error { + border-top: 4px solid #f44336; +} + +select.form-control-sm.small { + padding: 0.25rem 0.1rem; + font-size: 0.75rem; +} + +input.form-control-sm.small { + padding: 0.25rem 0.2rem; + font-size: 0.75rem; +} + +.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.wh-100 { + width: 100% !important; + height: 100% !important; +} + +.wh-50 { + width: 50% !important; + height: 50% !important; +} + +.custom-control-input:checked ~ .custom-control-label::before { + border-color: var(--color-info); + background-color: var(--color-info); +}
--- a/client/src/assets/application.scss Tue May 09 13:20:28 2023 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,239 +0,0 @@ -/* This is Free Software under GNU Affero General Public License v >= 3.0; - * without warranty, see README.md and license for details. - * - * SPDX-License-Identifier: AGPL-3.0-or-later - * License-Filename: LICENSES/AGPL-3.0.txt - * - * Copyright (C) 2018 by via donau - * – Österreichische Wasserstraßen-Gesellschaft mbH - * Software engineering by Intevation GmbH - * - * Author(s): - * Thomas Junk <thomas.junk@intevation.de> - * Markus Kottländer <markus.kottlaender@intevation> - */ -@import "@/assets/tooltip.scss"; - -:root { - --shadow-xs: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2); - --border-radius: 0.25rem; - --icon-height: 2rem; - --icon-width: 2rem; - --large-offset: 2rem; - --offset: 1rem; - --sidebar-width: 13rem; - --slight-transparent: 0.96; - --small-offset: 0.5rem; - --smaller: 0.9rem; - --transition-fast: 0.3s; - --x-large-offset: 3rem; - --xx-large-offset: 5rem; - - --color-info: #17a2b8; - --color-info-h: 188; - --color-info-s: 78%; - --color-info-l: 41%; -} - - -::placeholder { - color: #ccc !important; - font-size: smaller; - font-weight: bold; -} - -html { - overflow: hidden; -} - -a { - color: var(--color-info); -} - -a:hover, -a:active, -a:focus { - color: hsl(var(--color-info-h), var(--color-info-s), calc(#{var(--color-info-l)} - 13%)); -} - -.w-90 { - width: 90%; -} - -.w-95 { - width: 95%; -} - -.debug { - border: 1px solid red; -} - -.debug2 { - border: 1px solid magenta; -} - -.debug3 { - border: 1px solid greenyellow; -} - -%fully-centered { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -.header { - font-weight: bold; - font-size: 0.9em; -} - -.ui-element { - pointer-events: auto; -} - -.shadow-xs { - box-shadow: var(--shadow-xs); -} - -.box { - opacity: var(--slight-transparent); - max-height: 0; - max-width: 0; - overflow: hidden; - margin: 0; - box-shadow: var(--shadow-xs); - transition: max-width 0.4s, max-height 0.4s, margin 0.4s; -} - -.box h6, -.contextbox h6 { - color: var(--color-info); - font-weight: bold; -} - -.box-control { - display: flex; - color: #888; - padding: 4px 7px; - border-radius: 0.25rem; - cursor: pointer; - transition: background-color 0.3s, color 0.3s; - &.small { - padding: 4px; - } - &:hover { - color: #666; - background-color: #eee; - } -} - -.expanded { - max-height: 999px; - max-width: 999px; - margin: 0 0.05rem 0.5rem 0.25rem; -} - -.box-body { - padding: 0.75rem; - text-align: left; - position: relative; -} - -// needed to fix the whitespace problem of -// https://github.com/Polyconseil/vue-gettext/issues/80; -// use like -// <a href="..">link</a> -// <span v-translate class="fix-trans-space">contributors.</span> -// -// done centrally, so we can fix it centrally for better vue-gettext version -.fix-trans-space, -.fix-trans-space:before { - content: " "; -} - -.closebutton { - position: absolute; - right: var(--offset); -} - -.headline { - font-weight: bold; -} - -.fade-enter-active, -.fade-leave-active { - transition: opacity 0.3s; -} -.fade-enter, -.fade-leave-to { - opacity: 0; -} - -.pointer { - cursor: pointer; -} - -.btn:disabled, -.btn.disabled { - opacity: 0.4; -} - -.btn-xs { - padding: 0.3rem 0.4rem; - font-size: 0.75rem; - line-height: 1; -} - -.snotifyToast { - text-align: left; - border-radius: 0.25rem; - box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2); - border-left: 0 !important; - &.snotify-info { - border-top: 4px solid var(--color-info); - .snotify-icon--info { - background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20version=%221.1%22%20x=%220px%22%20y=%220px%22%20viewBox=%220%200%20512%20512%22%20fill=%22%2317a2b8%22%3E%3Cg%3E%3Cpath%20d=%22M256,0C114.84,0,0,114.84,0,256S114.84,512,256,512,512,397.16,512,256,397.15,0,256,0Zm0,478.43C133.35,478.43,33.57,378.64,33.57,256S133.35,33.58,256,33.58,478.42,133.36,478.42,256,378.64,478.43,256,478.43Z%22/%3E%3Cpath%20d=%22M251.26,161.24a22.39,22.39,0,1,0-22.38-22.39A22.39,22.39,0,0,0,251.26,161.24Z%22/%3E%3Cpath%20d=%22M286.84,357.87h-14v-160A16.79,16.79,0,0,0,256,181.05H225.17a16.79,16.79,0,0,0,0,33.58h14.05V357.87H225.17a16.79,16.79,0,0,0,0,33.57h61.67a16.79,16.79,0,1,0,0-33.57Z%22/%3E%3C/g%3E%3C/svg%3E"); - } - } - &.snotify-error { - border-top: 4px solid #f44336; - } - .snotifyToast__title { - font-size: 1.2rem; - } - .snotifyToast__body { - white-space: pre-line; - } -} - -select.form-control-sm.small { - padding: 0.25rem 0.1rem; - font-size: 0.75rem; -} - -input.form-control-sm.small { - padding: 0.25rem 0.2rem; - font-size: 0.75rem; -} - -.truncate { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.wh-100 { - width: 100% !important; - height: 100% !important; -} - -.wh-50 { - width: 50% !important; - height: 50% !important; -} - -.custom-control-input:checked ~ .custom-control-label::before { - border-color: var(--color-info); - background-color: var(--color-info); -}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/assets/tooltip.css Thu May 11 13:23:52 2023 +0200 @@ -0,0 +1,121 @@ +/* This is Free Software under GNU Affero General Public License v >= 3.0 + * without warranty, see README.md and license for details. + * + * SPDX-License-Identifier: AGPL-3.0-or-later + * License-Filename: LICENSES/AGPL-3.0.txt + * + * Copyright (C) 2018 by via donau + * – Österreichische Wasserstraßen-Gesellschaft mbH + * Software engineering by Intevation GmbH + * + * Author(s): + * Thomas Junk <thomas.junk@intevation.de> + */ +.tooltip { + display: block !important; + z-index: 10000; +} + +.tooltip .tooltip-inner { + background: white; + box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2); + color: #666; + border-radius: 0.25rem; + padding: 5px 10px 4px; + font-size: 0.8rem; + max-width: 500px; +} + +.tooltip .tooltip-arrow { + width: 0; + height: 0; + border-style: solid; + position: absolute; + margin: 5px; + border-color: white; + z-index: 1; +} + +.tooltip[x-placement^="top"] { + margin-bottom: 5px; +} + +.tooltip[x-placement^="top"] .tooltip-arrow { + border-width: 5px 5px 0 5px; + border-left-color: transparent !important; + border-right-color: transparent !important; + border-bottom-color: transparent !important; + bottom: -5px; + left: calc(50% - 5px); + margin-top: 0; + margin-bottom: 0; +} + +.tooltip[x-placement^="bottom"] { + margin-top: 5px; +} + +.tooltip[x-placement^="bottom"] .tooltip-arrow { + border-width: 0 5px 5px 5px; + border-left-color: transparent !important; + border-right-color: transparent !important; + border-top-color: transparent !important; + top: -5px; + left: calc(50% - 5px); + margin-top: 0; + margin-bottom: 0; +} + +.tooltip[x-placement^="right"] { + margin-left: 5px; +} + +.tooltip[x-placement^="right"] .tooltip-arrow { + border-width: 5px 5px 5px 0; + border-left-color: transparent !important; + border-top-color: transparent !important; + border-bottom-color: transparent !important; + left: -5px; + top: calc(50% - 5px); + margin-left: 0; + margin-right: 0; +} + +.tooltip[x-placement^="left"] { + margin-right: 5px; +} + +.tooltip[x-placement^="left"] .tooltip-arrow { + border-width: 5px 0 5px 5px; + border-top-color: transparent !important; + border-right-color: transparent !important; + border-bottom-color: transparent !important; + right: -5px; + top: calc(50% - 5px); + margin-left: 0; + margin-right: 0; +} + +.tooltip.popover .popover-inner { + background: #f9f9f9; + color: white; + padding: 24px; + border-radius: 5px; + box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1); +} + +.tooltip.popover .popover-arrow { + border-color: #f9f9f9; +} + +.tooltip[aria-hidden="true"] { + visibility: hidden; + opacity: 0; + transition: opacity 0.15s, visibility 0.15s; +} + +.tooltip[aria-hidden="false"] { + visibility: visible; + opacity: 1; + transition: opacity 0.15s; +}
--- a/client/src/assets/tooltip.scss Tue May 09 13:20:28 2023 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,121 +0,0 @@ -/* This is Free Software under GNU Affero General Public License v >= 3.0 - * without warranty, see README.md and license for details. - * - * SPDX-License-Identifier: AGPL-3.0-or-later - * License-Filename: LICENSES/AGPL-3.0.txt - * - * Copyright (C) 2018 by via donau - * – Österreichische Wasserstraßen-Gesellschaft mbH - * Software engineering by Intevation GmbH - * - * Author(s): - * Thomas Junk <thomas.junk@intevation.de> - */ -.tooltip { - display: block !important; - z-index: 10000; -} - -.tooltip .tooltip-inner { - background: white; - box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2); - color: #666; - border-radius: 0.25rem; - padding: 5px 10px 4px; - font-size: 0.8rem; - max-width: 500px; -} - -.tooltip .tooltip-arrow { - width: 0; - height: 0; - border-style: solid; - position: absolute; - margin: 5px; - border-color: white; - z-index: 1; -} - -.tooltip[x-placement^="top"] { - margin-bottom: 5px; -} - -.tooltip[x-placement^="top"] .tooltip-arrow { - border-width: 5px 5px 0 5px; - border-left-color: transparent !important; - border-right-color: transparent !important; - border-bottom-color: transparent !important; - bottom: -5px; - left: calc(50% - 5px); - margin-top: 0; - margin-bottom: 0; -} - -.tooltip[x-placement^="bottom"] { - margin-top: 5px; -} - -.tooltip[x-placement^="bottom"] .tooltip-arrow { - border-width: 0 5px 5px 5px; - border-left-color: transparent !important; - border-right-color: transparent !important; - border-top-color: transparent !important; - top: -5px; - left: calc(50% - 5px); - margin-top: 0; - margin-bottom: 0; -} - -.tooltip[x-placement^="right"] { - margin-left: 5px; -} - -.tooltip[x-placement^="right"] .tooltip-arrow { - border-width: 5px 5px 5px 0; - border-left-color: transparent !important; - border-top-color: transparent !important; - border-bottom-color: transparent !important; - left: -5px; - top: calc(50% - 5px); - margin-left: 0; - margin-right: 0; -} - -.tooltip[x-placement^="left"] { - margin-right: 5px; -} - -.tooltip[x-placement^="left"] .tooltip-arrow { - border-width: 5px 0 5px 5px; - border-top-color: transparent !important; - border-right-color: transparent !important; - border-bottom-color: transparent !important; - right: -5px; - top: calc(50% - 5px); - margin-left: 0; - margin-right: 0; -} - -.tooltip.popover .popover-inner { - background: #f9f9f9; - color: white; - padding: 24px; - border-radius: 5px; - box-shadow: 0 5px 30px rgba(black, 0.1); -} - -.tooltip.popover .popover-arrow { - border-color: #f9f9f9; -} - -.tooltip[aria-hidden="true"] { - visibility: hidden; - opacity: 0; - transition: opacity 0.15s, visibility 0.15s; -} - -.tooltip[aria-hidden="false"] { - visibility: visible; - opacity: 1; - transition: opacity 0.15s; -}
--- a/client/src/components/App.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/App.vue Thu May 11 13:23:52 2023 +0200 @@ -39,28 +39,31 @@ </div> </template> -<style lang="sass" scoped> -#app - height: 100% - width: 100% - font-family: "Avenir", Helvetica, Arial, sans-serif - -webkit-font-smoothing: antialiased - -moz-osx-font-smoothing: grayscale - text-align: center - color: #2c3e50 +<style scoped> +#app { + height: 100%; + width: 100%; + font-family: "Avenir", Helvetica, Arial, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-align: center; + color: #2c3e50; +} - .userinterface - position: absolute - top: 0 - left: 0 - right: 0 - bottom: 0 - z-index: 4 - pointer-events: none +#app .userinterface { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 4; + pointer-events: none; +} - .boxes - position: relative - z-index: 10 +#app .userinterface .boxes { + position: relative; + z-index: 10; +} </style> <script>
--- a/client/src/components/Contextbox.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/Contextbox.vue Thu May 11 13:23:52 2023 +0200 @@ -91,7 +91,7 @@ }; </script> -<style lang="scss" scoped> +<style scoped> .contextbox { position: relative; background-color: #ffffff;
--- a/client/src/components/DiagramLegend.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/DiagramLegend.vue Thu May 11 13:23:52 2023 +0200 @@ -15,36 +15,44 @@ </div> </template> -<style lang="sass"> -.diagram-legend - position: relative - width: 180px - font-size: 0.8rem - display: flex - border-right: solid 1px #dee2e6 - .toggle - margin-left: 0 - position: absolute - z-index: 1 - top: 0.25rem - left: 0.25rem - svg - transition: transform 0.3s - &.collapsed - width: 0 - border-right: none - .toggle - left: 0.25rem - svg - transform: rotateY(180deg) - .legend - margin: 10px 0 - span - vertical-align: middle - display: inline-block - width: 12px - height: 12px - border-radius: 50% +<style> +.diagram-legend { + position: relative; + width: 180px; + font-size: 0.8rem; + display: flex; + border-right: solid 1px #dee2e6; +} +.diagram-legend .toggle { + margin-left: 0; + position: absolute; + z-index: 1; + top: 0.25rem; + left: 0.25rem; +} +.diagram-legend .toggle svg { + transition: transform 0.3s; +} +.diagram-legend.collapsed { + width: 0; + border-right: none; +} +.diagram-legend.collapsed .toggle { + left: 0.25rem; +} +.diagram-legend.collapsed .toggle svg { + transform: rotateY(180deg); +} +.diagram-legend .legend { + margin: 10px 0; +} +.diagram-legend .legend span { + vertical-align: middle; + display: inline-block; + width: 12px; + height: 12px; + border-radius: 50%; +} </style> <script>
--- a/client/src/components/KeyboardHandler.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/KeyboardHandler.vue Thu May 11 13:23:52 2023 +0200 @@ -6,22 +6,24 @@ </transition> </template> -<style lang="sass" scoped> -.notice - position: absolute - top: 0 - width: 100% - text-align: center - z-index: 1 - font-size: 11px - line-height: 11px - > span - opacity: 0.5 - background: white - display: inline-block - border-bottom-right-radius: 0.25rem - border-bottom-left-radius: 0.25rem - padding: 3px 5px +<style scoped> +.notice { + position: absolute; + top: 0; + width: 100%; + text-align: center; + z-index: 1; + font-size: 11px; + line-height: 11px; +} +.notice > span { + opacity: 0.5; + background: white; + display: inline-block; + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; + padding: 3px 5px; +} </style> <script>
--- a/client/src/components/Login.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/Login.vue Thu May 11 13:23:52 2023 +0200 @@ -87,11 +87,14 @@ </div> </template> -<style lang="scss" scoped> +<style scoped> .login { min-width: 375px; min-height: 500px; - @extend %fully-centered; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } .loginform {
--- a/client/src/components/Logs.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/Logs.vue Thu May 11 13:23:52 2023 +0200 @@ -57,7 +57,7 @@ </div> </template> -<style lang="scss" scoped> +<style scoped> .statuscontainer { width: 87%; position: relative;
--- a/client/src/components/Main.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/Main.vue Thu May 11 13:23:52 2023 +0200 @@ -22,28 +22,34 @@ </div> </template> -<style lang="sass"> -#panes - top: -1px - right: -1px - bottom: -1px - left: -1px - z-index: 1 - &.rotate1 - flex-wrap: wrap - flex-direction: row - &.rotate2 - flex-wrap: wrap-reverse - flex-direction: column - &.rotate3 - flex-wrap: wrap-reverse - flex-direction: row-reverse - &.rotate4 - flex-wrap: wrap - flex-direction: column-reverse - .pane - border: solid 1px #dee2e6 - background: #fff +<style> +#panes { + top: -1px; + right: -1px; + bottom: -1px; + left: -1px; + z-index: 1; +} +#panes.rotate1 { + flex-wrap: wrap; + flex-direction: row; +} +#panes.rotate2 { + flex-wrap: wrap-reverse; + flex-direction: column; +} +#panes.rotate3 { + flex-wrap: wrap-reverse; + flex-direction: row-reverse; +} +#panes.rotate4 { + flex-wrap: wrap; + flex-direction: column-reverse; +} +#panes .pane { + border: solid 1px #dee2e6; + background: #fff; +} </style> <script>
--- a/client/src/components/Pdftool.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/Pdftool.vue Thu May 11 13:23:52 2023 +0200 @@ -89,7 +89,7 @@ </div> </template> -<style lang="scss" scoped> +<style scoped> input, select { font-size: 0.8em;
--- a/client/src/components/Popup.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/Popup.vue Thu May 11 13:23:52 2023 +0200 @@ -65,53 +65,63 @@ </transition> </template> -<style lang="sass" scoped> -.dateselection - width: 250px -.overlay - position: fixed - z-index: 9 - top: 0 - right: 0 - bottom: 0 - left: 0 - background: rgba(0, 0, 0, .3) - .popup - display: flex - flex-direction: column - box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) - background-color: #fff - border-radius: 0.25rem - max-width: 320px - .popup-header - display: flex - justify-content: space-between - align-items: center - padding-left: .5rem - border-bottom: 1px solid #dee2e6 - color: var(--color-info) - margin-bottom: 0 - padding: 0.25rem - font-weight: bold - .popup-title - padding-left: 0.25rem - .popup-icon - margin-right: 0.25rem - .popup-close - color: #aaa - padding: 3px 5px - border-radius: 0.25rem - cursor: pointer - transition: background-color 0.3s, color 0.3s - &:hover - color: #888 - background-color: #eee - .popup-footer - display: flex - justify-content: space-between - align-items: center - border-top: 1px solid #dee2e6 - padding: 0.25rem +<style scoped> +.dateselection { + width: 250px; +} + +.overlay { + position: fixed; + z-index: 9; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgba(0, 0, 0, 0.3); +} +.overlay .popup { + display: flex; + flex-direction: column; + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); + background-color: #fff; + border-radius: 0.25rem; + max-width: 320px; +} +.overlay .popup .popup-header { + display: flex; + justify-content: space-between; + align-items: center; + padding-left: 0.5rem; + border-bottom: 1px solid #dee2e6; + color: var(--color-info); + margin-bottom: 0; + padding: 0.25rem; + font-weight: bold; +} +.overlay .popup .popup-header .popup-title { + padding-left: 0.25rem; +} +.overlay .popup .popup-header .popup-title .popup-icon { + margin-right: 0.25rem; +} +.overlay .popup .popup-header .popup-close { + color: #aaa; + padding: 3px 5px; + border-radius: 0.25rem; + cursor: pointer; + transition: background-color 0.3s, color 0.3s; +} +.overlay .popup .popup-header .popup-close:hover { + color: #888; + background-color: #eee; +} +.overlay .popup .popup-footer { + display: flex; + justify-content: space-between; + align-items: center; + border-top: 1px solid #dee2e6; + padding: 0.25rem; +} </style> <script>
--- a/client/src/components/Search.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/Search.vue Thu May 11 13:23:52 2023 +0200 @@ -86,7 +86,7 @@ </div> </template> -<style lang="scss" scoped> +<style scoped> .searchcontainer { opacity: 0.96; }
--- a/client/src/components/Sidebar.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/Sidebar.vue Thu May 11 13:23:52 2023 +0200 @@ -189,7 +189,7 @@ }; </script> -<style lang="scss" scoped> +<style scoped> .menubutton { height: 2rem; width: 2rem; @@ -219,16 +219,16 @@ color: #333; text-decoration: none; font-size: 90%; - .indicator { - left: auto; - right: 10px; - top: 8px; - border-radius: 0.25rem; - } - &.router-link-exact-active .indicator { - background: #fff; - color: #333; - } +} +.menu a .indicator { + left: auto; + right: 10px; + top: 8px; + border-radius: 0.25rem; +} +.menu a.router-link-exact-active .indicator { + background: #fff; + color: #333; } .menu a svg path {
--- a/client/src/components/Spacer.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/Spacer.vue Thu May 11 13:23:52 2023 +0200 @@ -34,7 +34,7 @@ }; </script> -<style lang="scss" scoped> +<style scoped> .spacer { height: 90vh; }
--- a/client/src/components/TimeSlider.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/TimeSlider.vue Thu May 11 13:23:52 2023 +0200 @@ -42,13 +42,13 @@ </div> </div> </template> -<style lang="scss" scoped> +<style scoped> #slider { position: absolute; bottom: 0; min-width: 100vw; } -// reposition time slider in case of opened diagram +/* reposition time slider in case of opened diagram */ #slider.reposition { bottom: 50%; } @@ -60,7 +60,7 @@ input::-webkit-clear-button { display: none; } -// hide clear button on IE +/* hide clear button on IE */ input::-ms-clear { display: none; }
--- a/client/src/components/fairway/AvailableFairwayDepthDialogue.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepthDialogue.vue Thu May 11 13:23:52 2023 +0200 @@ -344,17 +344,19 @@ </div> </template> -<style lang="sass" scoped> +<style scoped> input, -select - font-size: 0.8em +select { + font-size: 0.8em; +} -.custom-control - padding-left: 1.2rem - .custom-control-label - &::before, - &::after - left: -1.2rem +.custom-control { + padding-left: 1.2rem; +} +.custom-control .custom-control-label::before, +.custom-control .custom-control-label::after { + left: -1.2rem; +} </style> <script>
--- a/client/src/components/fairway/Fairwayprofile.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/fairway/Fairwayprofile.vue Thu May 11 13:23:52 2023 +0200 @@ -119,28 +119,30 @@ </div> </template> -<style lang="sass" scoped> -.direction-indicator - width: 70px - height: 0 - border-top: dashed 2px #333 - position: absolute - bottom: 50px - left: 115px - margin-left: -35px - &::after - content: "" - width: 0 - height: 0 - border-width: 10px - border-top-width: 5px - border-bottom-width: 5px - border-style: solid - border-color: transparent - border-left-color: #333 - position: absolute - right: -20px - top: -6px +<style scoped> +.direction-indicator { + width: 70px; + height: 0; + border-top: dashed 2px #333; + position: absolute; + bottom: 50px; + left: 115px; + margin-left: -35px; +} +.direction-indicator::after { + content: ""; + width: 0; + height: 0; + border-width: 10px; + border-top-width: 5px; + border-bottom-width: 5px; + border-style: solid; + border-color: transparent; + border-left-color: #333; + position: absolute; + right: -20px; + top: -6px; +} </style> <script>
--- a/client/src/components/gauge/Gauges.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/gauge/Gauges.vue Thu May 11 13:23:52 2023 +0200 @@ -93,7 +93,7 @@ </div> </template> -<style lang="scss" scoped> +<style scoped> input, select { font-size: 0.8em;
--- a/client/src/components/identify/Identify.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/identify/Identify.vue Thu May 11 13:23:52 2023 +0200 @@ -246,26 +246,27 @@ </div> </template> -<style lang="scss" scoped> +<style scoped> .features { max-height: 19rem; overflow-y: auto; - small { - .zoom-btn { - margin-top: -0.25rem; - margin-right: -0.5rem; - margin-bottom: -0.25rem; - svg { - vertical-align: middle; - } - } - &:nth-child(even) { - background: #f8f8f8; - } - &:hover { - background: #eeeeee; - } - } +} + +.features small { +} +.features small .zoom-btn { + margin-top: -0.25rem; + margin-right: -0.5rem; + margin-bottom: -0.25rem; +} +.features small .zoom-btn svg { + vertical-align: middle; +} +.features small:nth-child(even) { + background: #f8f8f8; +} +.features small:hover { + background: #eeeeee; } .versioninfo {
--- a/client/src/components/importconfiguration/ImportDetails.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/importconfiguration/ImportDetails.vue Thu May 11 13:23:52 2023 +0200 @@ -88,7 +88,7 @@ </div> </template> -<style lang="scss" scoped></style> +<style scoped></style> <script> /* This is Free Software under GNU Affero General Public License v >= 3.0
--- a/client/src/components/importconfiguration/ScheduledImports.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/importconfiguration/ScheduledImports.vue Thu May 11 13:23:52 2023 +0200 @@ -1172,7 +1172,7 @@ }; </script> -<style lang="scss" scoped> +<style scoped> .cronfield { width: 55px; }
--- a/client/src/components/importconfiguration/types/ApprovedGaugeMeasurement.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/importconfiguration/types/ApprovedGaugeMeasurement.vue Thu May 11 13:23:52 2023 +0200 @@ -161,4 +161,4 @@ }; </script> -<style lang="scss" scoped></style> +<style scoped></style>
--- a/client/src/components/importconfiguration/types/WaterwayProfiles.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/importconfiguration/types/WaterwayProfiles.vue Thu May 11 13:23:52 2023 +0200 @@ -197,4 +197,4 @@ }; </script> -<style lang="scss" scoped></style> +<style scoped></style>
--- a/client/src/components/importoverview/AGMLogItem.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/importoverview/AGMLogItem.vue Thu May 11 13:23:52 2023 +0200 @@ -101,33 +101,42 @@ }; </script> -<style lang="sass" scoped> -.diffs - width: 100% - overflow-y: auto - > div - border-top: dashed 1px #dee2e6 - &:first-child - border-top: none - .compare-table - position: relative - overflow: hidden - &::after - content: '' - position: absolute - top: 0 - right: -5px - bottom: 0 - left: -5px - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4) - > div - font-size: 0.7rem - &:nth-child(odd) - background-color: #f8f9fa +<style scoped> +.diffs { + width: 100%; + overflow-y: auto; +} +.diffs > div { + border-top: dashed 1px #dee2e6; +} +.diffs > div:first-child { + border-top: none; +} +.diffs > div .compare-table { + position: relative; + overflow: hidden; +} +.diffs > div .compare-table::after { + content: ""; + position: absolute; + top: 0; + right: -5px; + bottom: 0; + left: -5px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4); +} +.diffs > div .compare-table > div { + font-size: 0.7rem; +} +.diffs > div .compare-table > div:nth-child(odd) { + background-color: #f8f9fa; +} -.split - max-height: 35vh +.split { + max-height: 35vh; +} -.full - max-height: 70vh +.full { + max-height: 70vh; +} </style>
--- a/client/src/components/importoverview/AdditionalLog.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/importoverview/AdditionalLog.vue Thu May 11 13:23:52 2023 +0200 @@ -20,18 +20,19 @@ </div> </template> -<style lang="sass" scoped> -.additionallog - overflow-y: auto - &.split - max-height: 35vh - - > div - &:not(:first-child) - border-top-style: dashed !important - - &:hover - background-color: #fcfcfc +<style scoped> +.additionallog { + overflow-y: auto; +} +.additionallog.split { + max-height: 35vh; +} +.additionallog > div:not(:first-child) { + border-top-style: dashed !important; +} +.additionallog > div:hover { + background-color: #fcfcfc; +} </style> <script>
--- a/client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue Thu May 11 13:23:52 2023 +0200 @@ -24,35 +24,44 @@ </div> </template> -<style lang="sass" scoped> -.diffs - width: 100% - overflow-y: auto - > div - border-top: dashed 1px #dee2e6 - &:first-child - border-top: none - .compare-table - position: relative - overflow: hidden - &::after - content: '' - position: absolute - top: 0 - right: -5px - bottom: 0 - left: -5px - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4) - > div - font-size: 0.7rem - &:nth-child(odd) - background-color: #f8f9fa +<style scoped> +.diffs { + width: 100%; + overflow-y: auto; +} +.diffs > div { + border-top: dashed 1px #dee2e6; +} +.diffs > div:first-child { + border-top: none; +} +.diffs > div .compare-table { + position: relative; + overflow: hidden; +} +.diffs > div .compare-table::after { + content: ""; + position: absolute; + top: 0; + right: -5px; + bottom: 0; + left: -5px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4); +} +.diffs > div .compare-table > div { + font-size: 0.7rem; +} +.diffs > div .compare-table > div:nth-child(odd) { + background-color: #f8f9fa; +} -.split - max-height: 35vh +.split { + max-height: 35vh; +} -.full - max-height: 70vh +.full { + max-height: 70vh; +} </style> <script>
--- a/client/src/components/importoverview/BottleneckDetail.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/importoverview/BottleneckDetail.vue Thu May 11 13:23:52 2023 +0200 @@ -41,32 +41,40 @@ </div> </template> -<style lang="sass" scoped> -.bottleneckdetails - width: 100% - overflow-y: auto - > div - border-top: dashed 1px #dee2e6 - &:first-child - border-top: none - .properties - position: relative - overflow: hidden - &::after - content: '' - position: absolute - top: 0 - right: -5px - bottom: 0 - left: -5px - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4) - tr - font-size: 0.7rem - &:nth-child(odd) - background-color: #f8f9fa +<style scoped> +.bottleneckdetails { + width: 100%; + overflow-y: auto; +} +.bottleneckdetails > div { + border-top: dashed 1px #dee2e6; +} +.bottleneckdetails > div:first-child { + border-top: none; +} +.bottleneckdetails > div .properties { + position: relative; + overflow: hidden; +} +.bottleneckdetails > div .properties::after { + content: ""; + position: absolute; + top: 0; + right: -5px; + bottom: 0; + left: -5px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4); +} +.bottleneckdetails > div .properties tr { + font-size: 0.7rem; +} +.bottleneckdetails > div .properties tr:nth-child(odd) { + background-color: #f8f9fa; +} -.split - max-height: 35vh +.split { + max-height: 35vh; +} </style> <script>
--- a/client/src/components/importoverview/ImportOverview.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/importoverview/ImportOverview.vue Thu May 11 13:23:52 2023 +0200 @@ -113,9 +113,10 @@ </div> </template> -<style lang="sass" scoped> -.spinner-overlay - top: 110px +<style scoped> +.spinner-overlay { + top: 110px; +} </style> <script>
--- a/client/src/components/importoverview/LogEntry.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/importoverview/LogEntry.vue Thu May 11 13:23:52 2023 +0200 @@ -60,31 +60,38 @@ </div> </template> -<style lang="sass" scoped> -.action - height: 100% - width: 50% - border: 0 - background: white - outline: none - &.approved - color: green - &.active, - &:hover - color: white - background: green - &.rejected - border-left: 1px solid #dee2e6 - color: red - &.active, - &:hover - color: white - background: red -.active - .action - background-color: #d2eaee - &.rejected - border-left: solid 1px rgba(255, 255, 255, 0.3) +<style scoped> +.action { + height: 100%; + width: 50%; + border: 0; + background: white; + outline: none; +} +.action.approved { + color: green; +} +.action.approved.active, +.action.approved:hover { + color: white; + background: green; +} +.action.rejected { + border-left: 1px solid #dee2e6; + color: red; +} +.action.rejected.active, +.action.rejected:hover { + color: white; + background: red; +} + +.active .action { + background-color: #d2eaee; +} +.active .action.rejected { + border-left: solid 1px rgba(255, 255, 255, 0.3); +} </style> <script>
--- a/client/src/components/importoverview/LogItem.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/importoverview/LogItem.vue Thu May 11 13:23:52 2023 +0200 @@ -43,14 +43,17 @@ }; </script> -<style lang="sass" scoped> -.kind - width: 9% +<style scoped> +.kind { + width: 9%; +} -.time - width: 26% +.time { + width: 26%; +} -.message - width: 65% - word-wrap: break-word +.message { + width: 65%; + word-wrap: break-word; +} </style>
--- a/client/src/components/importoverview/SectionDetails.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/importoverview/SectionDetails.vue Thu May 11 13:23:52 2023 +0200 @@ -31,7 +31,7 @@ </div> </template> -<style lang="scss" scoped> +<style scoped> .comparison { width: 668px; border-top: dashed 1px #dee2e6;
--- a/client/src/components/importoverview/StretchDetails.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/importoverview/StretchDetails.vue Thu May 11 13:23:52 2023 +0200 @@ -37,7 +37,7 @@ </div> </template> -<style lang="scss" scoped> +<style scoped> .comparison { width: 668px; border-top: dashed 1px #dee2e6;
--- a/client/src/components/layers/LegendElement.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/layers/LegendElement.vue Thu May 11 13:23:52 2023 +0200 @@ -235,7 +235,7 @@ }; </script> -<style lang="scss" scoped> +<style scoped> .legendelement { max-height: 1.5rem; width: 2rem;
--- a/client/src/components/map/Map.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/map/Map.vue Thu May 11 13:23:52 2023 +0200 @@ -7,17 +7,33 @@ </div> </template> -<style lang="sass" scoped> -.map - width: 100% - height: 100% - background-color: #eee - background-image: linear-gradient(45deg, #e8e8e8 25%, transparent 25%, transparent 75%, #e8e8e8 75%, #e8e8e8), linear-gradient(45deg, #e8e8e8 25%, transparent 25%, transparent 75%, #e8e8e8 75%, #e8e8e8) - background-size: 20px 20px - background-position: 0 0, 10px 10px - - &.nocursor - cursor: none +<style scoped> +.map { + width: 100%; + height: 100%; + background-color: #eee; + background-image: linear-gradient( + 45deg, + #e8e8e8 25%, + transparent 25%, + transparent 75%, + #e8e8e8 75%, + #e8e8e8 + ), + linear-gradient( + 45deg, + #e8e8e8 25%, + transparent 25%, + transparent 75%, + #e8e8e8 75%, + #e8e8e8 + ); + background-size: 20px 20px; + background-position: 0 0, 10px 10px; +} +.map.nocursor { + cursor: none; +} </style> <script>
--- a/client/src/components/map/MapPopup.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/map/MapPopup.vue Thu May 11 13:23:52 2023 +0200 @@ -97,25 +97,28 @@ </div> </template> -<style lang="sass"> -.map-popup - position: absolute - background: #fff - min-width: 200px - min-height: 85px - box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2) - border-top-left-radius: 0 !important - margin-left: 10px - &::before - content: "" - position: absolute - top: 0 - left: -10px - border: 5px solid transparent - border-top: 5px solid white - border-right: 5px solid white - .coordinates - font-size: 70% +<style> +.map-popup { + position: absolute; + background: #fff; + min-width: 200px; + min-height: 85px; + box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2); + border-top-left-radius: 0 !important; + margin-left: 10px; +} +.map-popup::before { + content: ""; + position: absolute; + top: 0; + left: -10px; + border: 5px solid transparent; + border-top: 5px solid white; + border-right: 5px solid white; +} +.map-popup .coordinates { + font-size: 70%; +} </style> <script>
--- a/client/src/components/map/Zoom.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/map/Zoom.vue Thu May 11 13:23:52 2023 +0200 @@ -15,23 +15,26 @@ </div> </template> -<style lang="sass"> -.zoom-buttons - position: absolute - z-index: 1 - bottom: var(--small-offset) - left: 50% - margin-left: -var(--icon-width) - margin-bottom: 0 - transition: margin-bottom 0.3s - &.move - bottom: calc(var(--large-offset) * 1.5) - .zoom-button - min-height: var(--icon-width) - min-width: var(--icon-width) - z-index: 1 - outline: none - color: #666 +<style> +.zoom-buttons { + position: absolute; + z-index: 1; + bottom: var(--small-offset); + left: 50%; + margin-left: -var(--icon-width); + margin-bottom: 0; + transition: margin-bottom 0.3s; +} +.zoom-buttons.move { + bottom: calc(var(--large-offset) * 1.5); +} +.zoom-buttons .zoom-button { + min-height: var(--icon-width); + min-width: var(--icon-width); + z-index: 1; + outline: none; + color: #666; +} </style> <script>
--- a/client/src/components/sections/SectionForm.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/sections/SectionForm.vue Thu May 11 13:23:52 2023 +0200 @@ -189,12 +189,13 @@ </div> </template> -<style lang="sass" scoped> -.input-button - border-top-left-radius: 0 - border-bottom-left-radius: 0 - right: 0 - height: 31px +<style scoped> +.input-button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + right: 0; + height: 31px; +} </style> <script>
--- a/client/src/components/sections/Sections.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/sections/Sections.vue Thu May 11 13:23:52 2023 +0200 @@ -76,12 +76,13 @@ </div> </template> -<style lang="sass" scoped> -.input-button - border-top-left-radius: 0 - border-bottom-left-radius: 0 - right: 0 - height: 31px +<style scoped> +.input-button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + right: 0; + height: 31px; +} </style> <script>
--- a/client/src/components/stretches/Stretches.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/stretches/Stretches.vue Thu May 11 13:23:52 2023 +0200 @@ -78,12 +78,13 @@ </div> </template> -<style lang="sass" scoped> -.input-button - border-top-left-radius: 0 - border-bottom-left-radius: 0 - right: 0 - height: 31px +<style scoped> +.input-button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + right: 0; + height: 31px; +} </style> <script>
--- a/client/src/components/systemconfiguration/ColorSettings.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/systemconfiguration/ColorSettings.vue Thu May 11 13:23:52 2023 +0200 @@ -67,27 +67,32 @@ </div> </template> -<style lang="sass" scoped> -.savebuttons - position:relative - top: -4em; -/deep/ - .card - overflow: hidden - .card-header - padding: .25rem 1rem - .vc-chrome - box-shadow: none - border-radius: 0 - width: 100% - .vc-chrome-saturation-wrap - border-radius: 0 - padding-bottom: 45% - &.hide - .vc-chrome-alpha-wrap - display: none !important - .vc-chrome-hue-wrap - margin-top: 10px +<style scoped> +.savebuttons { + top: -4em; +} + +::v-deep .card { + overflow: hidden; +} +::v-deep .card .card-header { + padding: 0.25rem 1rem; +} +::v-deep .card .vc-chrome { + box-shadow: none; + border-radius: 0; + width: 100%; +} +::v-deep .card .vc-chrome .vc-chrome-saturation-wrap { + border-radius: 0; + padding-bottom: 45%; +} +::v-deep .card .vc-chrome.hide .vc-chrome-alpha-wrap { + display: none !important; +} +::v-deep .card .vc-chrome.hide .vc-chrome-hue-wrap { + margin-top: 10px; +} </style> <script>
--- a/client/src/components/systemconfiguration/DataAccuracy.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/systemconfiguration/DataAccuracy.vue Thu May 11 13:23:52 2023 +0200 @@ -279,33 +279,43 @@ </div> </template> -<style lang="sass" scoped> -.card - width: 33.333% - &:nth-child(1) - > .card-header - border-bottom: solid 2px #28a745 - &:nth-child(2) - > .card-header - border-bottom: solid 2px #ffc107 - &:nth-child(3) - > .card-header - border-bottom: solid 2px #dc3545 +<style scoped> +.card { + width: 33.333%; +} +.card:nth-child(1) > .card-header { + border-bottom: solid 2px #28a745; +} +.card:nth-child(2) > .card-header { + border-bottom: solid 2px #ffc107; +} +.card:nth-child(3) > .card-header { + border-bottom: solid 2px #dc3545; +} + .rounded-left, -.rounded-left .card-header - border-top-right-radius: 0 - border-bottom-right-radius: 0 +.rounded-left .card-header { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + .rounded-right, -.rounded-right .card-header - border-top-left-radius: 0 - border-bottom-left-radius: 0 -.card-header - padding: 0.25rem -.card-body - padding: 0.5rem - .form-control-sm - height: 24px - font-size: 12px +.rounded-right .card-header { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.card-header { + padding: 0.25rem; +} + +.card-body { + padding: 0.5rem; +} +.card-body .form-control-sm { + height: 24px; + font-size: 12px; +} </style> <script>
--- a/client/src/components/systemconfiguration/MorphologyClassbreaks.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/systemconfiguration/MorphologyClassbreaks.vue Thu May 11 13:23:52 2023 +0200 @@ -222,45 +222,57 @@ </div> </template> -<style lang="sass" scoped> -.numfield:invalid - border: 2px solid - border-color: #ff0000 +<style scoped> +.numfield:invalid { + border: 2px solid; + border-color: #ff0000; +} -.classbreak - width: 154px - .btn-outline-secondary - border-color: #ccc - color: #ccc - &:hover:not(.hasColor) - background: #eee !important - .input-group-prepend - .btn-outline-secondary.hasColor - color: rgba(255, 255, 255, 0.5) - .input-group-append - .btn-outline-secondary - &:hover - color: #dc3545 - &:last-child:hover - color: #28a745 - .color-picker - position: absolute - top: -4px - left: 19px - z-index: 9 - overflow: hidden - border-top-left-radius: 0 !important - .btn - border-radius: 0 !important - .vc-chrome - box-shadow: none -/deep/ - .vc-chrome-alpha-wrap - display: none !important - .vc-chrome-hue-wrap - margin-top: 10px - .vc-chrome-saturation-wrap - border-radius: 0 +.classbreak { + width: 154px; +} +.classbreak .btn-outline-secondary { + border-color: #ccc; + color: #ccc; +} +.classbreak .btn-outline-secondary:hover:not(.hasColor) { + background: #eee !important; +} +.classbreak .input-group-prepend .btn-outline-secondary.hasColor { + color: rgba(255, 255, 255, 0.5); +} +.classbreak .input-group-append .btn-outline-secondary:hover { + color: #dc3545; +} +.classbreak .input-group-append .btn-outline-secondary:last-child:hover { + color: #28a745; +} +.classbreak .color-picker { + position: absolute; + top: -4px; + left: 19px; + z-index: 9; + overflow: hidden; + border-top-left-radius: 0 !important; +} +.classbreak .color-picker .btn { + border-radius: 0 !important; +} +.classbreak .color-picker .vc-chrome { + box-shadow: none; +} + +::v-deep .vc-chrome-alpha-wrap { + display: none !important; +} + +::v-deep .vc-chrome-hue-wrap { + margin-top: 10px; +} + +::v-deep .vc-chrome-saturation-wrap { + border-radius: 0; +} </style> <script>
--- a/client/src/components/systemconfiguration/PDFTemplates.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/systemconfiguration/PDFTemplates.vue Thu May 11 13:23:52 2023 +0200 @@ -73,7 +73,7 @@ </div> </template> -<style lang="scss" scoped> +<style scoped> .table th, td { font-size: var(--smaller);
--- a/client/src/components/systemconfiguration/Systemconfiguration.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/systemconfiguration/Systemconfiguration.vue Thu May 11 13:23:52 2023 +0200 @@ -69,12 +69,13 @@ </div> </template> -<style lang="sass"> -.nav-pills - .nav-link - border-radius: 0 - &.active - background: var(--color-info) +<style> +.nav-pills .nav-link { + border-radius: 0; +} +.nav-pills .nav-link.active { + background: var(--color-info); +} </style> <script>
--- a/client/src/components/toolbar/TimeSlider.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/toolbar/TimeSlider.vue Thu May 11 13:23:52 2023 +0200 @@ -72,7 +72,7 @@ } }; </script> -<style lang="scss" scoped> +<style scoped> .menuEntry { font-size: 9px; font-weight: bold;
--- a/client/src/components/toolbar/Toolbar.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/toolbar/Toolbar.vue Thu May 11 13:23:52 2023 +0200 @@ -28,9 +28,9 @@ </div> </template> -<style lang="scss"> -// not scoped to affect nested components -// doen't work when put in application/assets/application.sass... why??? o_O +<style> +/* not scoped to affect nested components +// doen't work when put in application/assets/application.sass... why??? o_O */ .toolbar { box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2); overflow: hidden; @@ -61,10 +61,10 @@ pointer-events: auto; position: relative; overflow: hidden; - &.disabled { - color: #ccc; - cursor: default; - } +} +.toolbar-button.disabled { + color: #ccc; + cursor: default; } .toolbar-button:last-child {
--- a/client/src/components/ui/UIBoxHeader.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/ui/UIBoxHeader.vue Thu May 11 13:23:52 2023 +0200 @@ -40,32 +40,39 @@ </h6> </template> -<style lang="sass"> -.box-header - display: flex - justify-content: space-between - align-items: center - min-height: 34px - padding-left: .5rem - border-bottom: 1px solid #dee2e6 - color: var(--color-info) - margin-bottom: 0 - padding: 0.25rem - font-weight: bold - background: white - border-top-left-radius: .25rem - border-top-right-radius: .25rem - .box-title - padding-left: 0.25rem - .box-icon - margin-right: 0.25rem - .box-control - margin-left: 3px - &.small - padding: 0.1rem 0.1rem 0.1rem 0.25rem - min-height: 27px -.checkbox-header - cursor: pointer +<style> +.box-header { + display: flex; + justify-content: space-between; + align-items: center; + min-height: 34px; + padding-left: 0.5rem; + border-bottom: 1px solid #dee2e6; + color: var(--color-info); + margin-bottom: 0; + padding: 0.25rem; + font-weight: bold; + background: white; + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; +} +.box-header .box-title { + padding-left: 0.25rem; +} +.box-header .box-title .box-icon { + margin-right: 0.25rem; +} +.box-header .box-control { + margin-left: 3px; +} +.box-header.small { + padding: 0.1rem 0.1rem 0.1rem 0.25rem; + min-height: 27px; +} + +.checkbox-header { + cursor: pointer; +} </style> <script>
--- a/client/src/components/ui/UISpinnerOverlay.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/ui/UISpinnerOverlay.vue Thu May 11 13:23:52 2023 +0200 @@ -6,19 +6,20 @@ </transition> </template> -<style lang="sass"> -.spinner-overlay - background: rgba(255, 255, 255, 0.9) - position: absolute - z-index: 99 - top: 0 - right: 0 - bottom: 0 - left: 0 - display: flex - align-items: center - justify-content: center - color: #888 +<style> +.spinner-overlay { + background: rgba(255, 255, 255, 0.9); + position: absolute; + z-index: 99; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + color: #888; +} </style> <script>
--- a/client/src/components/ui/UITableBody.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/ui/UITableBody.vue Thu May 11 13:23:52 2023 +0200 @@ -22,33 +22,39 @@ </div> </template> -<style lang="sass"> -.table-body - .row-container - > .row - &:hover - background-color: #fcfcfc - .table-cell - display: flex - align-items: center - padding: 1.5px 3px - border-right: solid 1px #dee2e6 - &:last-child - border-right: none - &.center - justify-content: center - .expand - border-bottom: solid 2px var(--color-info) +<style> +.table-body .row-container > .row:hover { + background-color: #fcfcfc; +} - &.active - > .row - color: #fff - .table-cell - border-right-color: rgba(255, 255, 255, 0.3) - background-color: var(--color-info) - color: #fff - a - color: #fff !important +.table-body .row-container > .row .table-cell { + display: flex; + align-items: center; + padding: 1.5px 3px; + border-right: solid 1px #dee2e6; +} +.table-body .row-container > .row .table-cell:last-child { + border-right: none; +} +.table-body .row-container > .row .table-cell.center { + justify-content: center; +} + +.table-body .row-container .expand { + border-bottom: solid 2px var(--color-info); +} + +.table-body .row-container.active > .row { + color: #fff; +} +.table-body .row-container.active > .row .table-cell { + border-right-color: rgba(255, 255, 255, 0.3); + background-color: var(--color-info); + color: #fff; +} +.table-body .row-container.active > .row .table-cell a { + color: #fff !important; +} </style> <script>
--- a/client/src/components/ui/UITableHeader.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/ui/UITableHeader.vue Thu May 11 13:23:52 2023 +0200 @@ -28,22 +28,26 @@ </div> </template> -<style lang="sass"> -.table-header - > a - border-right: solid 1px #e7e8e9 - background-color: #f8f9fa - a - outline: none - &:hover - text-decoration: none - background-color: #f8f9fa - &.sortable - a:not(.sorting-disabled) - cursor: pointer - &:hover, - &.active - background: #e7e8e9 +<style> +.table-header > a { + border-right: solid 1px #e7e8e9; + background-color: #f8f9fa; +} +.table-header > a a { + outline: none; +} +.table-header > a a:hover { + text-decoration: none; + background-color: #f8f9fa; +} + +.table-header.sortable a:not(.sorting-disabled) { + cursor: pointer; +} +.table-header.sortable a:not(.sorting-disabled):hover, +.table-header.sortable a:not(.sorting-disabled).active { + background: #e7e8e9; +} </style> <script>
--- a/client/src/components/usermanagement/Userdetail.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/usermanagement/Userdetail.vue Thu May 11 13:23:52 2023 +0200 @@ -141,7 +141,7 @@ </div> </template> -<style lang="scss" scoped> +<style scoped> .submit-button { position: absolute; right: var(--offset);
--- a/client/src/components/usermanagement/Usermanagement.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/usermanagement/Usermanagement.vue Thu May 11 13:23:52 2023 +0200 @@ -134,28 +134,35 @@ </div> </template> -<style lang="sass" scoped> -.content - width: 100% +<style scoped> +.content { + width: 100%; +} -.userdetails - width: 50% +.userdetails { + width: 50%; +} -.main - height: 100% +.main { + height: 100%; +} -.icon - font-size: large +.icon { + font-size: large; +} -.userlist - min-width: 520px - height: 100% +.userlist { + min-width: 520px; + height: 100%; +} -.userlistsmall - width: 100% +.userlistsmall { + width: 100%; +} -.userlistextended - width: 100% +.userlistextended { + width: 100%; +} </style> <script>
--- a/client/src/main.js Tue May 09 13:20:28 2023 +0200 +++ b/client/src/main.js Thu May 11 13:23:52 2023 +0200 @@ -42,6 +42,7 @@ import "../node_modules/ol/ol.css"; import "../node_modules/highlight.js/styles/paraiso-dark.css"; import "../node_modules/vue-snotify/styles/simple.css"; +import "./assets/application.css"; // fontawesome5 icons import {
--- a/client/vue.config.js Tue May 09 13:20:28 2023 +0200 +++ b/client/vue.config.js Thu May 11 13:23:52 2023 +0200 @@ -18,15 +18,6 @@ config.plugin("BundleAnalyzerPlugin").use(BundleAnalyzerPlugin, []); } }, - css: { - loaderOptions: { - // pass options to sass-loader - sass: { - // @/ is an alias to src/ - data: `@import "@/assets/application.scss";` - } - } - }, devServer: { proxy: { "/api": {