qwc2 2025.3.31

package/plugins/style/Cyclomedia.css

@@ -0,0 +1,66 @@
+div.cyclomedia-body {
+    height: calc(100% + 0.5em);
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    margin: -0.25em;
+}
+
+div.cyclomedia-body-overlay {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(200, 200, 200, 0.9);
+    z-index: 2;
+}
+
+div.cyclomedia-body-overlay > div.spinner {
+    width: 4em;
+    height: 4em;
+    margin-right: 1em;
+}
+
+div.cyclomedia-scale-hint {
+    flex: 0 0 auto;
+    background-color: #8f8fff;
+    color: white;
+    font-weight: bold;
+    padding: 0.25em;
+    text-align: center;
+    z-index: 3;
+}
+
+iframe.cyclomedia-frame {
+    width: 100%;
+    flex: 1 1 auto;
+    border: none;
+    background-color: white;
+}
+
+div.cyclomedia-login {
+    background-color: var(--container-bg-color);
+    padding: 0.5em;
+    border: 1px solid var(--border-color);
+    width: 90%;
+}
+
+div.cyclomedia-login table {
+    width: 100%
+}
+
+div.cyclomedia-login table input {
+    width: 100%;
+}
+
+div.cyclomedia-login button {
+    width: 100%;
+}
+
+td.cyclomedia-login-message {
+    font-style: italic;
+}

package/plugins/style/Editing.css

@@ -0,0 +1,40 @@
+#Editing div.editing-body {
+    padding: 0.25em;
+    position: relative;
+    /* 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*/
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+#Editing .editing-minimize-maximize {
+    margin-left: 1em;
+    cursor: pointer;
+    padding: 0.25em;
+}
+
+#Editing div.editing-body > div.editing-layer-selection,
+#Editing div.editing-body > div.editing-feature-selection,
+#Editing div.editing-body > div.ButtonBar {
+    flex: 0 0 auto;
+}
+
+#Editing div.editing-body > div.AttributeForm {
+    margin-top: 0.5em;
+    padding-top: 0.5em;
+    border-top: 1px solid var(--border-color);
+    flex: 1 1 auto;
+    overflow: hidden;
+}
+
+#Editing select.editing-layer-select,
+#Editing select.editing-feature-select {
+    width: 100%;
+}
+
+#Editing select.editing-layer-select:disabled,
+#Editing select.editing-feature-select:disabled {
+    cursor: not-allowed;
+}

package/plugins/style/FeatureForm.css

@@ -0,0 +1,21 @@
+div.feature-query-body {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+div.feature-query-body div.feature-query-selection {
+    flex: 0 0 auto;
+    padding-bottom: 0.25em;
+    border-bottom: 1px solid var(--border-color);
+    margin-bottom: 0.25em;
+}
+
+div.feature-query-body div.feature-query-selection > select {
+    width: 100%;
+}
+
+div.feature-query-body div.AttributeForm {
+    flex: 1 1 auto;
+    overflow: auto;
+}

package/plugins/style/FeatureSearch.css

@@ -0,0 +1,71 @@
+div#FeatureSearch div.sidebar-body {
+    overflow: hidden;
+}
+
+div.feature-search-body {
+    /* 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*/
+    
+    padding: 0.25em;
+    display: flex;
+    flex-direction: column;
+}
+
+div.feature-search-selection {
+    flex: 0 0 auto;
+}
+
+div.feature-search-selection > select {
+    width: 100%;
+}
+
+form.feature-search-form {
+    flex: 0 0 auto;
+}
+
+form.feature-search-form > fieldset {
+    margin: 0;
+    padding: 0.25em;
+    border-color: var(--border-color);
+    border-style: solid;
+    border-width: 0 1px 0 1px;
+}
+
+div.feature-search-form-descr {
+    padding: 0.25em 0;
+    border-bottom: 1px solid var(--border-color);
+    margin-bottom: 0.25em;
+}
+
+form.feature-search-form > fieldset table {
+    width: 100%;
+}
+
+form.feature-search-form > fieldset td > input,
+form.feature-search-form > fieldset td > select {
+    width: 100%;
+}
+
+div.feature-search-bar > button {
+    width: 100%;
+}
+
+div.feature-search-bar > button > div.Spinner {
+    width: 2em;
+    height: 2em;
+    margin-right: 1em;
+}
+
+div.feature-search-results {
+    flex: 1 1 auto;
+    overflow-y: auto;
+}
+
+div.feature-search-noresults {
+    font-style: italic;
+    padding: 0.25em;
+    margin-top: 0.25em;
+    border: 1px solid var(--border-color);
+    color: var(--text-color-disabled);
+}

package/plugins/style/GeometryDigitizer.css

@@ -0,0 +1,28 @@
+div.geomdigitizer-output-window-body {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+div.geomdigitizer-output-window-body > iframe {
+    border: 0;
+    width: 100%;
+    height: 100%;
+}
+
+span.geomdigitizer-output-window-wait {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: rgba(255, 255, 255, 0.75);
+    border-radius: 0.5em;
+    padding: 0.5em;
+    display: flex;
+    align-items: center;
+}
+
+span.geomdigitizer-output-window-wait > div.spinner {
+    width: 1.25em;
+    height: 1.25em;
+    margin-right: 0.5em;
+}

package/plugins/style/HeightProfile.css

@@ -0,0 +1,26 @@
+div.height-profile-chart-container {
+    height: 100%;
+}
+
+div.height-profile-loading-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-left: 0.5em;
+    padding-bottom: 0.5em;
+    height: 100%;
+}
+
+div.height-profile-loading-indicator > div.spinner {
+    width: 1.5em;
+    height: 1.5em;
+    margin-right: 0.25em;
+}
+
+div.height-profile-error {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: red;
+}

package/plugins/style/Identify.css

@@ -0,0 +1,4 @@
+div.identify-radius-controls {
+    margin-top: 0.25em;
+    justify-content: center;
+}

package/plugins/style/LayerCatalog.css

@@ -0,0 +1,8 @@
+div.layer-catalog {
+    margin-top: 0.25em;
+    height: 100%;
+}
+
+div.layer-catalog div.layer-catalog-widget {
+    height: 100%;
+}

package/plugins/style/LayerTree.css

@@ -0,0 +1,316 @@
+#LayerTree span.layertree-tree-visibility {
+    margin: 0 0.5em;
+    color: var(--titlebar-bg-color);
+}
+
+#LayerTree span.layertree-tree-visibility:before {
+    background-color: var(--titlebar-text-color);
+}
+
+#LayerTree span.layertree-print-legend,
+#LayerTree span.layertree-visible-filter,
+#LayerTree span.layertree-delete-legend,
+#LayerTree span.layertree-theme-metadata {
+    margin-left: 0.5em;
+    padding: 0.25em;
+}
+
+#LayerTree span.layertree-print-legend:hover,
+#LayerTree span.layertree-visible-filter:hover,
+#LayerTree span.layertree-delete-legend:hover,
+#LayerTree span.layertree-theme-metadata:hover {
+    background-color: var(--titlebar-text-color);
+    color: var(--titlebar-bg-color);
+}
+
+#LayerTree span.layertree-visible-filter-active {
+    background-color: var(--titlebar-text-color);
+    color: var(--titlebar-bg-color);
+}
+
+/* https://github.com/philipwalton/flexbugs/issues/216 */
+#LayerTree div.layertree-container-wrapper {
+    display: flex;
+    flex-direction: row;
+}
+
+#LayerTree div.layertree-container {
+    flex: 0 0 100%;
+    max-width: 100%;
+    display: flex;
+    flex-direction: column;
+    /* 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*/
+}
+
+#LayerTree div.layertree-tree {
+    min-height: 5em;
+    flex: 0 1 auto;
+    overflow-y: auto;
+    margin-right: 0.25em;
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+#LayerTree div.layertree-tree .drop-ghost {
+    outline: 1px solid var(--color-active);
+    background-color: var(--list-bg-color);
+    color: var(--text-color);
+}
+
+#LayerTree div.layertree-option {
+    flex: 0 0 auto;
+    height: 2.25em;
+    padding: 0.25em 0.5em 0.25em 0.5em;
+    border-top: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+}
+
+#LayerTree div.layertree-option > span.icon {
+    margin-right: 0.5em;
+}
+
+#LayerTree div.layertree-option > span {
+    cursor: pointer;
+}
+
+#LayerTree div.layertree-item-container {
+    margin-left: 0.5em;
+}
+
+#LayerTree div.layertree-item {
+    display: flex;
+    align-items: center;
+    height: 1.75em;
+}
+
+#LayerTree div.layertree-item-disabled > span.layertree-item-title {
+    color: var(--text-color-disabled);
+}
+
+#LayerTree div.layertree-item-outsidescalerange > span.layertree-item-title {
+    font-style: italic;
+    color: var(--text-color-disabled);
+}
+
+#LayerTree div.layertree-item-separator {
+    font-weight: bold;
+    border-bottom: 1px solid var(--color-active);
+}
+
+#LayerTree div.layertree-item-separator > input {
+    border: none;
+    background-color: transparent;
+    width: 100%;
+    font-weight: bold;
+}
+
+#LayerTree div.layertree-item-separator > input:focus {
+    background-color: var(--input-bg-color);
+}
+
+#LayerTree span.layertree-item-expander {
+    margin-right: 0.25em;
+    flex: 0 0 1em;
+}
+
+#LayerTree div.layertree-item > div.spinner {
+    width: 1em;
+    height: 1em;
+    flex: 0 0 auto;
+    margin-right: 0.5em;
+}
+
+#LayerTree span.layertree-item-checkbox {
+    margin-right: 0.5em;
+    flex: 0 0 auto;
+}
+
+#LayerTree img.layertree-item-legend-thumbnail {
+    height: 1.5em;
+    width: auto;
+    max-width: 2em;
+    margin-right: 0.5em;
+    border: 1px solid var(--border-color);
+    background-color: white;
+    flex: 0 0 auto;
+}
+
+#LayerTree span.layertree-item-legend-coloricon {
+    display: inline-block;
+    height: 1.5em;
+    width: 1.5em;
+    margin-right: 0.5em;
+    border: 1px solid var(--border-color);
+    flex: 0 0 auto;
+}
+
+img.layertree-item-legend-tooltip {
+    position: absolute;
+    z-index: 6;
+    box-shadow: 0px 2px 5px rgba(136, 136, 136, 0.5);
+    border-radius: 0.5em;
+    border: 1px solid var(--border-color);
+    margin-left: 1px;
+    padding: 0.25em;
+    background-color: white;
+}
+
+#LayerTree span.layertree-item-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 0 1 auto;
+    cursor: pointer;
+}
+
+#LayerTree div.layertree-item-noresults {
+    color: gray;
+    font-size: small;
+    font-style: italic;
+}
+
+#LayerTree span.layertree-item-queryable {
+    margin-left: 0.25em;
+    color: var(--border-color);
+    font-size: xx-small;
+    vertical-align: top;
+    flex: 0 0 auto;
+}
+
+#LayerTree span.layertree-item-identifyable {
+    margin-left: 0.25em;
+    font-size: small;
+    vertical-align: top;
+    flex: 0 0 auto;
+}
+
+#LayerTree span.layertree-item-identifyable-unchecked {
+    color: var(--border-color);
+}
+
+#LayerTree span.layertree-item-identifyable-checked {
+    color: var(--color-active);
+}
+
+#LayerTree span.layertree-item-identifyable-tristate {
+    color: var(--text-color);
+}
+
+#LayerTree span.layertree-item-spacer {
+    flex: 1 1 auto;
+}
+
+#LayerTree span.layertree-item-remove {
+    text-align: center;
+    width: 1.75em;
+    flex: 0 0 auto;
+}
+
+#LayerTree span.layertree-item-remove:hover {
+    color: red;
+}
+
+#LayerTree span.layertree-item-menubutton {
+    text-align: center;
+    width: 1.75em;
+    flex: 0 0 auto;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#LayerTree span.layertree-item-menubutton-active {
+    background-color: var(--color-active);
+    color: white;
+}
+
+#LayerTree div.layertree-item-optionsmenu {
+    margin-left: 1em;
+    height: 1.75em;
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--border-color);
+    background-color: var(--input-bg-color);
+}
+
+#LayerTree div.layertree-item-optionsmenu > span.icon {
+    flex: 0 0 auto;
+    width: 1.75em;
+    text-align: center;
+}
+
+#LayerTree input.layertree-item-transparency-slider {
+    flex: 1 1 auto;
+    font-size: small;
+    min-width: 0;
+    max-width: none;
+    width: 1000em; /* exagerated value */
+    margin: 0 0.25em;
+}
+
+#LayerTree div.layertree-item-stylemenu {
+    margin-left: 1em;
+    border: 1px solid var(--border-color);
+    background-color: var(--input-bg-color);
+}
+
+#LayerTree div.layertree-item-stylemenu > div {
+    padding: 0.25em;
+    display: flex;
+    align-items: center;
+}
+
+#LayerTree div.layertree-item-stylemenu > div > span.icon {
+    margin-right: 0.25em;
+}
+
+#LayerTree div.layertree-item-stylemenu > div > div {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+
+#LayerTree div.layertree-item-addsep {
+    border-top: 2px solid transparent;
+    border-bottom: 4px solid transparent;
+    margin-bottom: -6px;
+    position: relative;
+}
+
+#LayerTree div.layertree-item-addsep:hover {
+    border-top: 2px solid var(--color-active);
+}
+
+div.layertree-legend-print-body {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+div.layertree-legend-print-body > iframe {
+    border: 0;
+    background-color: white;
+    width: 100%;
+    height: 100%;
+    flex: 1 1 auto;
+}
+
+div.layertree-legend-print-body-buttonbar {
+    border-top: 1px solid var(--border-color);
+    flex: 0 0 auto;
+    text-align: center;
+}
+
+div.layertree-legend-print-body-buttonbar > button {
+    margin: 0.5em;
+    padding: 0.5em;
+    background-color: var(--titlebar-bg-color);
+    color: white;
+    font-weight: bold;
+    border: 1px solid var(--border-color);
+}

package/plugins/style/Map.css

@@ -0,0 +1,43 @@
+div#map {
+    position: absolute;
+}
+
+/* Move and re-style rotation reset button */
+div.ol-rotate {
+    padding: 0;
+    top: 4em!important;
+    right: 0.5em!important;
+}
+
+div.ol-rotate button {
+    font-size: 1.25em!important;
+    background-color: var(--map-button-bg-color)!important;
+    color: var(--map-button-text-color)!important;
+    cursor: pointer;
+}
+
+div.ol-overlaycontainer-stopevent {
+    z-index: 101!important;
+}
+
+span.map-loading-indicator {
+    display: flex;
+    align-items: center;
+    opacity: 0;
+    transition: opacity 0.5s;
+    color: var(--panel-text-color);
+    background-color: var(--panel-bg-color);
+    box-shadow: 0 -2px 4px rgba(136, 136, 136, 0.5);
+    position: absolute;
+    bottom: 2.7em;
+    left: 0.25em;
+    padding: 0.25em;
+    border-radius: 0.25em;
+    font-size: small;
+}
+
+span.map-loading-indicator > div.spinner {
+    width: 1.5em;
+    height: 1.5em;
+    margin-right: 0.25em;
+}

package/plugins/style/MapCompare.css

@@ -0,0 +1,27 @@
+#MapCompare {
+    position: fixed;
+    background-color: var(--map-button-bg-color);
+    width: 0.25em;
+    height: 100%;
+    margin-left: -0.125em;
+    top: 0;
+    cursor: ew-resize;
+}
+
+#MapCompare span.map-compare-handle {
+    position: absolute;
+    top: calc(50% - 3em);
+    height: 3em;
+    width: 3em;
+    left: -1.375em;
+    background-color: var(--map-button-bg-color);
+    display: flex;
+    align-items: center;
+    border-radius: 1.5em;
+}
+
+#MapCompare span.map-compare-handle-icon {
+    flex: 0 0 1.5em;
+    color: var(--map-button-text-color);
+    text-align: center;
+}

package/plugins/style/MapCopyright.css

@@ -0,0 +1,17 @@
+#MapCopyright {
+    position: absolute;
+    background-color: var(--panel-bg-color);
+    color: var(--panel-text-color);
+    box-shadow: 0 0 4px rgba(136, 136, 136, 0.5);
+    backdrop-filter: blur(3px);
+    padding: 0.5em 0;
+    font-size: x-small;
+}
+
+#MapCopyright > span {
+    padding: 0 0.5em;
+}
+
+#MapCopyright span:not(:first-child) {
+    border-left: 1px solid var(--panel-text-color);
+}