qwc2 2025.3.31

package/components/style/ResizeableWindow.css

@@ -0,0 +1,178 @@
+div.resizeable-window-container {
+    position: absolute;
+    pointer-events: none;
+}
+
+div.resizeable-window {
+    pointer-events: auto;
+    background-color: var(--container-bg-color);
+    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.75);
+    z-index: 8;
+}
+
+div.resizeable-window-portal-container,
+div.resizeable-window-portal-container > div {
+    height: 100%;
+}
+
+div.resizeable-window-contents {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+div.resizeable-window-maximized {
+    transform: none!important;
+    left: 0!important;
+    right: 0!important;
+    top: 0!important;
+    bottom: 0!important;
+    width: initial!important;
+    height: initial!important;
+}
+
+div.resizeable-window-minimized {
+    height: 2.5em!important;
+    min-height: 2.5em!important;
+}
+
+div.resizeable-window-docked-left {
+    transform: none!important;
+    left: 0!important;
+    right: initial!important;
+    top: 0!important;
+    bottom: initial!important;
+}
+
+div.resizeable-window-docked-right {
+    transform: none!important;
+    left: initial!important;
+    right: 0!important;
+    top: 0!important;
+    bottom: initial!important;
+}
+
+div.resizeable-window-split-left {
+    transform: none!important;
+    left: 0!important;
+    right: initial!important;
+    top: 0!important;
+    bottom: 0!important;
+    height: initial!important;
+    max-height: initial!important;
+}
+
+div.resizeable-window-split-right {
+    transform: none!important;
+    left: initial!important;
+    right: 0!important;
+    top: 0!important;
+    bottom: 0!important;
+    height: initial!important;
+    max-height: initial!important;
+}
+
+div.resizeable-window-docked-top {
+    transform: none!important;
+    left: 0!important;
+    right: 0!important;
+    top: 0!important;
+    bottom: initial!important;
+    width: initial!important;
+    max-width: initial!important;
+}
+
+div.resizeable-window-docked-bottom {
+    transform: none!important;
+    left: 0!important;
+    right: 0!important;
+    top: initial!important;
+    bottom: 0!important;
+    width: initial!important;
+    max-width: initial!important;
+}
+
+div.resizeable-window-fit-height {
+    height: initial!important;
+}
+
+div.resizeable-window-titlebar {
+    color: var(--titlebar-text-color);
+    background-color: var(--titlebar-bg-color);
+    flex: 0 0 2.5em;
+    display: flex;
+    align-items: center;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    padding: 0 0.25em;
+}
+
+div.resizeable-window-titlebar > div.spinner {
+    flex: 0 0 auto;
+    margin-right: 0.25em;
+    width: 1.5em;
+    height: 1.5em;
+}
+
+div.resizeable-window-titlebar > div.spinner > div {
+    background-color: var(--titlebar-text-color);
+}
+
+span.resizeable-window-titlebar-icon {
+    flex: 0 0 auto;
+    margin-right: 0.25em;
+}
+
+span.resizeable-window-titlebar-title {
+    font-weight: bold;
+    flex: 1 1 auto;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+span.resizeable-window-titlebar-control {
+    flex: 0 0 auto;
+    margin-left: 0.25em;
+    font-size: large;
+}
+
+span.resizeable-window-titlebar-extra-control {
+    flex: 0 0 auto;
+    margin-right: 0.25em;
+    font-size: large;
+}
+
+span.resizeable-window-titlebar-extra-control-active {
+    background-color: var(--titlebar-text-color);
+    color: var(--titlebar-bg-color);
+}
+
+div.resizeable-window-body {
+    padding: 0.25em;
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: default;
+    flex: 1 1 auto;
+    position: relative;
+}
+
+div.dock-window > div.resizeable-window-body {
+    margin: 0.25em;
+}
+
+div.resizeable-window-body-scrollable {
+    overflow-y: auto;
+}
+
+div.resizeable-window-drag-shield {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: none;
+    z-index: 1;
+}

package/components/style/SearchBox.css

@@ -0,0 +1,159 @@
+div.SearchBox {
+    position: relative;
+    display: flex;
+    height: 2em;
+    background-color: var(--input-bg-color);
+    color: var(--text-color);
+}
+
+div.searchbox-field {
+    flex: 1 1 auto;
+}
+
+button.searchbox-filter-button {
+    flex: 0 0 auto;
+    border-left-width: 0;
+    padding: 0 0.25em 0 0.5em;
+}
+
+button.searchbox-filter-button > span.icon:last-child {
+    font-size: 75%;
+    margin-top: 1em;
+}
+
+div.searchbox-field > div.spinner {
+    width: calc(2em - 2px);
+    height: calc(2em - 2px);
+}
+
+div.searchbox-results {
+    position: absolute;
+    left: 0;
+    top: 100%;
+    width: 100%;
+    max-height: calc(100vh - var(--topbar-height) - var(--bottombar-height));
+    max-height: calc(var(--vh, 1vh) * 100 - var(--topbar-height) - var(--bottombar-height));
+    background-color: var(--list-bg-color);
+    border-left: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--border-color);
+    box-shadow: 0px 2px 4px rgba(136, 136, 136, 0.5);
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+div.searchbox-results-section-title {
+    background-color: var(--list-section-bg-color);
+    color: var(--list-section-text-color);
+    font-weight: bold;
+    padding: 0.5em;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+}
+
+div.searchbox-results-section-title > span.icon {
+    margin-right: 0.5em;
+}
+
+div.searchbox-result {
+    padding: 0.125em 0.25em;
+    display: flex;
+    align-items: center;
+}
+
+div.searchbox-noresults {
+    padding: 0.125em 0.5em;
+    font-style: italic;
+    color: var(--text-color-disabled);
+}
+
+div.searchbox-result:hover {
+    background-color: var(--list-item-bg-color-hover);
+    color: var(--list-item-text-color-hover);
+}
+
+div.searchbox-result-expandedinfo {
+    background-color: var(--list-item-bg-color-hover);
+    color: var(--list-item-text-color-hover);
+}
+
+div.searchbox-result > span.icon {
+    flex: 0 0 1.5em;
+}
+
+.searchbox-result-thumbnail {
+    flex: 0 0 1.5em;
+    height: 1.5em;
+}
+
+span.searchbox-result-openicon {
+    font-size: 75%;
+    color: var(--text-color-disabled);
+}
+
+span.searchbox-result-label {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0 0.25em;
+    white-space: nowrap;
+}
+
+div.searchbox-result-abstract {
+    padding: .5em;
+    border-bottom: 1px solid var(--list-item-bg-color-hover);
+    max-height: 10em;
+    overflow-y: auto;
+    font-size: 95%;
+}
+
+div.searchbox-more-results {
+    color: grey;
+    font-style: italic;
+    padding: 0 0.5em;
+    height: 1.75em;
+    display: flex;
+    align-items: center;
+}
+
+div.searchbox-result-group {
+    margin-left: 1em;
+    border-left: 1px solid var(--list-item-bg-color-hover);
+}
+
+div.searchbox-filter-options {
+    position: absolute;
+    left: 0;
+    top: 100%;
+    min-width: 100%;
+    background-color: var(--container-bg-color);
+    border-left: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--border-color);
+    box-shadow: 0px 2px 4px rgba(136, 136, 136, 0.5);
+    padding: 0.25em;
+}
+
+div.searchbox-filter-options > table {
+    width: 100%;
+}
+
+div.searchbox-filter-options > table td {
+    padding: 0.125em 0.25em;
+    white-space: nowrap;
+}
+
+div.searchbox-filter-options > table td:last-child {
+    width: 99%;
+}
+
+div.searchbox-filter-options > table td:last-child > div.combobox {
+    width: 100%;
+    height: 2em;
+}
+
+div.searchbox-filter-options-geometry > div.combobox {
+    flex: 1 1 auto;
+    height: 2em;
+}

package/components/style/ServiceInfoWindow.css

@@ -0,0 +1,34 @@
+div.service-info-window-body {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+h4.service-info-window-title {
+    flex: 0 0 auto;
+}
+
+div.service-info-window-frame {
+    border: 1px solid var(--border-color);
+    background-color: var(--list-bg-color);
+    font-size: small;
+    flex: 1 1 auto;
+    overflow: auto;
+}
+
+table.service-info-window-table {
+    width: 100%;
+}
+
+table.service-info-window-table td {
+    padding: 0.5em;
+    vertical-align: top;
+}
+
+table.service-info-window-table td:first-child {
+    white-space: nowrap;
+}
+
+table.service-info-window-table td:last-child {
+    width: 99%;
+}

package/components/style/SideBar.css

@@ -0,0 +1,100 @@
+div.sidebar {
+    position: absolute;
+    top: var(--topbar-height);
+    max-height: calc(100vh - var(--topbar-height) - var(--bottombar-height));
+    max-height: calc(var(--vh, 1vh) * 100 - var(--topbar-height) - var(--bottombar-height));
+    background-color: var(--container-bg-color);
+    transition: transform 0.25s;
+    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.75);
+    display: flex;
+    flex-direction: column;
+    max-width: 100vw;
+}
+
+div.sidebar-right {
+    right: 0;
+}
+
+div.sidebar-left {
+    left: 0;
+}
+
+div.sidebar-right:not(.sidebar-open) {
+    transform: translateX(100%) translateX(8px);
+}
+
+div.sidebar-left:not(.sidebar-open) {
+    transform: translateX(-100%) translateX(-8px);
+}
+
+div.sidebar-resize-handle {
+    position: absolute;
+    width: 6px;
+    top: 0;
+    bottom: 0;
+    cursor: ew-resize;
+    z-index: 2;
+}
+
+div.sidebar-resize-handle-left {
+    right: -3px;
+}
+
+div.sidebar-resize-handle-right {
+    left: -3px;
+}
+
+div.sidebar-resize-handle-bottom {
+    position: absolute;
+    height: 6px;
+    left: 0;
+    right: 0;
+    bottom: -3px;
+    cursor: ns-resize;
+    z-index: 2;
+}
+
+div.sidebar div.sidebar-titlebar {
+    color: var(--titlebar-text-color);
+    background-color: var(--titlebar-bg-color);
+    height: 2.5em;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+}
+
+div.sidebar span.sidebar-titlebar-icon {
+    flex: 0 0 auto;
+    margin: 0 0.25em;
+}
+
+div.sidebar span.sidebar-titlebar-title {
+    font-weight: bold;
+    flex: 0 0 auto;
+}
+
+div.sidebar span.sidebar-titlebar-spacer {
+    flex: 1 1 auto;
+}
+
+div.sidebar div.sidebar-titlebar span.sidebar-title {
+    font-weight: bold;
+    display: inline-flex;
+    width: calc(100% - 3em);
+    align-items: center;
+}
+
+div.sidebar span.sidebar-titlebar-closeicon {
+    flex: 0 0 auto;
+    margin: 0 0.25em;
+    font-size: large;
+}
+
+div.sidebar div.sidebar-body {
+    overflow-y: auto;
+    overflow-x: hidden;
+    /* titlebar: 2.5em */
+    max-height: calc(100vh - 2.5em - var(--topbar-height) - var(--bottombar-height)); /* viewport - sidebar_titlebar - topbar - bottombar*/
+    max-height: calc(var(--vh, 1vh) * 100 - 2.5em - var(--topbar-height) - var(--bottombar-height)); /* viewport - sidebar_titlebar - topbar - bottombar*/
+    flex: 1 1 auto;
+}

package/components/style/TaskBar.css

@@ -0,0 +1,35 @@
+div.taskbar-container {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: var(--topbar-height);
+    display: flex;
+    justify-content: center;
+    pointer-events: none;
+    z-index: 3;
+}
+
+div.taskbar {
+    position: relative;
+    flex: 0 0 auto;
+    pointer-events: initial;
+    display: inline-block;
+    max-width: calc(100% - 0.5em);
+    padding: 0 1.25em 0 0.25em;
+    background-color: var(--container-bg-color);
+    box-shadow: 0px 2px 4px rgba(136, 136, 136, 0.5);
+    border-top: 1px solid rgba(136, 136, 136, 0.5);
+}
+
+div.taskbar > div.body {
+    padding: 0.25em 0.5em 0.25em 0.25em;
+    display: inline-block;
+}
+
+div.taskbar > span.closewrapper {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    padding: 0.125em 0.125em 0 0;
+}

package/components/style/ThemeLayersListWindow.css

@@ -0,0 +1,47 @@
+div.theme-list-window-body {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+h4.theme-list-window-title {
+    flex: 0 0 auto;
+}
+
+div.theme-list-window-frame {
+    border: 1px solid var(--border-color);
+    background-color: var(--list-bg-color);
+    font-size: small;
+    flex: 1 1 auto;
+    overflow: auto;
+    margin-bottom: -1px;
+}
+
+div.layerlist-group-items {
+    padding-left: 1em;
+}
+
+div.layerlist-item {
+    display: flex;
+    align-items: center;
+    height: 1.75em;
+    margin-left: 0.5em;
+}
+
+span.layerlist-item-checkbox {
+    margin-right: 0.5em;
+    flex: 0 0 auto;
+}
+
+span.layerlist-item-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 0 1 auto;
+}
+
+span.layerlist-item-add {
+    margin-left: auto;
+    margin-right: 0.5em;
+    flex: 0 0 auto;
+}