qwc2 2025.3.31

package/components/style/App.css

@@ -0,0 +1,229 @@
+* {
+    cursor: inherit;
+    box-sizing: border-box;
+}
+
+:after, :before {
+    box-sizing: border-box;
+}
+
+html, body {
+    overflow: hidden;
+    cursor: default;
+    color: var(--text-color);
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-size: 14px;
+    margin: 0;
+    padding: 0;
+}
+
+html, body, #container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+a {
+    cursor: pointer;
+    color: var(--text-color-link);
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+h1, h2, h3, h4 {
+    font-weight: 500;
+    margin: 0.5em 0;
+}
+
+h1 { font-size: 160%; }
+h2 { font-size: 150%; }
+h3 { font-size: 140%; }
+h4 { font-size: 130%; }
+h5 { font-size: 120%; }
+h6 { font-size: 110%; }
+
+table {
+    border-collapse: collapse;
+    font-size: 14px;
+}
+
+ul {
+    margin: 0;
+}
+
+input, select, button, textarea {
+    border-radius: 0;
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    margin: 0;
+}
+
+input:focus, select:focus, button:focus, textarea:focus {
+    outline: var(--focus-outline);
+}
+
+textarea, input:not([type=checkbox]):not([type=radio]):not([type=range]), select {
+    padding: 0.25em;
+    border: 1px solid var(--border-color);
+    background-color: var(--input-bg-color);
+    color: var(--text-color);
+}
+
+input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select {
+    height: 2em;
+}
+
+textarea, input:not([type=checkbox]):not([type=radio]):not([type=range]) {
+    cursor: text;
+}
+
+input:read-only, textarea:read-only, input:not([type=checkbox]):not([type=radio]):not([type=range]):read-only {
+    color: var(--text-color-disabled);
+}
+
+input:disabled, select:disabled, textarea:disabled {
+    background-color: var(--input-bg-color-disabled);
+    color: var(--text-color-disabled);
+}
+
+input:invalid, select:invalid, textarea:invalid, input:not([type=checkbox]):not([type=radio]):not([type=range]):invalid {
+    background-color: #FFAAAA;
+}
+
+/** Button **/
+button.button {
+    background-color: var(--button-bg-color);
+    color: var(--button-text-color);
+    border: 1px solid var(--border-color);
+    display: inline-flex;
+    padding: 0.5em;
+    align-items: center;
+    justify-content: center;
+    height: 2em;
+    overflow: hidden;
+    cursor: pointer;
+    outline: none;
+}
+
+button.button:disabled {
+    background-color: var(--button-bg-color-disabled);
+    color: var(--button-text-color-disabled);
+    cursor: default;
+}
+
+button.button:not(:disabled):hover {
+    background-color: var(--button-bg-color-hover);
+    color: var(--button-text-color-hover);
+}
+
+button.button.pressed:not(:disabled):hover {
+    background-color: var(--button-bg-color-active-hover);
+    color: var(--button-text-color-active-hover);
+}
+
+button.button.pressed:not(:disabled) {
+    background-color: var(--button-bg-color-active);
+    color: var(--button-text-color-active);
+}
+
+button.button-accept {
+    background-color: rgb(127,255,127);
+}
+
+button.button-warning {
+    background-color: #ffd979;
+}
+
+button.button-reject {
+    background-color: rgb(255,127,127);
+}
+
+button.button-accept:not(:disabled):hover {
+    background-color: rgb(127,225,127);
+}
+
+button.button-reject:not(:disabled):hover {
+    background-color: rgb(225,127,127);
+}
+
+button.button > * {
+    flex: 0 0 auto;
+}
+
+button.button:not(:disabled):active > * {
+    transform: translateX(1px) translateY(1px);
+}
+
+button.button > span:not(.icon) {
+    margin: 0 0.5em;
+}
+
+button.button > div.spinner {
+    width: 1.5em;
+    height: 1.5em;
+}
+
+div.controlgroup {
+    display: flex;
+    align-items: center;
+}
+
+div.controlgroup > *:not(:last-child):not(span) {
+    margin-right: -1px;
+}
+
+/** Range slider **/
+input[type=range] {
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: transparent;
+    height: 2em;
+}
+
+input[type=range]::-moz-range-track {
+    background: #ddd;
+    height: 4px;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+    background: #ddd;
+    height: 4px;
+}
+
+input[type=range]::-moz-range-thumb {
+    appearance: none;
+    -webkit-appearance: none;
+    border: 1px solid var(--border-color);
+    border-radius: 50%;
+    height: 12px;
+    width: 12px;
+    box-sizing: border-box;
+    background: var(--input-bg-color);
+    margin-top: -3.5px;
+}
+
+input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    border: 1px solid var(--border-color);
+    border-radius: 50%;
+    height: 12px;
+    width: 12px;
+    box-sizing: border-box;
+    background: var(--input-bg-color);
+    margin-top: -3.5px;
+}
+
+div.__event_shield {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 999999999999;
+}

package/components/style/AppMenu.css

@@ -0,0 +1,162 @@
+div.AppMenu {
+    text-align: right;
+    cursor: default;
+    transition: background-color 0.25s;
+    outline: none;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+
+div.AppMenu.appmenu-visible {
+    background-color: var(--app-submenu-bg-color-hover);
+    color: var(--app-submenu-text-color-hover);
+    overflow: visible;
+}
+
+div.AppMenu .appmenu-button {
+    display: flex;
+    align-items: center;
+}
+
+div.AppMenu .appmenu-label {
+    font-weight: bold;
+    transition: color 0.25s;
+    flex: 1 1 16.2em;
+    width: 16.2em;
+}
+
+div.AppMenu .appmenu-icon {
+    flex: 0 0 1.8em;
+}
+
+div.AppMenu .appmenu-icon > span.icon {
+    color: var(--app-menu-text-color);
+    padding: 0.25em;
+    margin: 0 1em;
+    border: 2px solid var(--app-menu-text-color);
+    transition: color 0.25s, border-color 0.25s, background-color 0.25s;
+}
+
+
+div.AppMenu.appmenu-visible .appmenu-icon > span.icon {
+    color: var(--app-submenu-text-color-hover);
+    border-color: var(--app-submenu-text-color-hover);
+    background-color: inherit;
+}
+
+div.AppMenu.appmenu-blocked {
+    cursor: not-allowed;
+}
+
+div.AppMenu div.appmenu-menu-container {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    box-shadow: 0px 2px 4px rgba(136, 136, 136, 0.5);
+    width: 20em;
+    max-width: 100vw;
+    opacity: 0;
+    transform-origin: top;
+    transform: scaleY(0);
+    transition: transform 0.25s, opacity 0.25s;
+    overflow-y: auto;
+    max-height: calc(100vh - var(--topbar-height) - var(--bottombar-height));
+    max-height: calc(var(--vh, 1vh) * 100 - var(--topbar-height) - var(--bottombar-height));
+}
+
+div.AppMenu.appmenu-compact div.appmenu-menu-container {
+    right: -11.25em;
+    width: 15em;
+    height: calc(100vh - 5.5em);
+    transition: transform 0.25s, opacity 0.25s, right 0.5s;
+    background: var(--app-menu-bg-color);
+    box-shadow: 0px 0px 4px rgba(136, 136, 136, 0.5);
+    top: 3.5em;
+}
+
+div.AppMenu.appmenu-compact div.appmenu-menu-container:hover {
+    right: 0;
+}
+
+div.AppMenu ul.appmenu-menu {
+    text-align: left;
+    padding: 0;
+    background-color: var(--app-menu-bg-color);
+}
+
+div.AppMenu.appmenu-visible div.appmenu-menu-container {
+    transform: scaleY(1);
+    opacity: 1;
+}
+
+div.AppMenu ul.appmenu-menu li {
+    color: var(--app-menu-text-color);
+    list-style-type: none;
+    margin: 0;
+    font-size: small;
+    font-weight: bold;
+}
+
+div.AppMenu ul.appmenu-menu li:not(:last-child) {
+    border-bottom: 1px solid var(--app-menu-text-color);
+}
+
+div.AppMenu ul.appmenu-menu > li.appmenu-leaf-active,
+div.AppMenu ul.appmenu-menu > li.appmenu-submenu-active,
+div.AppMenu ul.appmenu-menu > li.appmenu-submenu-expanded {
+    background-color: var(--app-menu-bg-color-hover);
+    color: var(--app-menu-text-color-hover);
+}
+
+div.AppMenu ul.appmenu-menu li > .icon {
+    vertical-align: middle;
+    width: 2em;
+    margin: 0.5em 1em 0.5em 1em;
+}
+
+div.AppMenu ul.appmenu-menu li.appmenu-submenu > ul {
+    background-color: var(--app-submenu-bg-color);
+    padding: 0;
+    display: none;
+}
+
+div.AppMenu ul.appmenu-menu li.appmenu-submenu-expanded > ul {
+    display: block;
+}
+
+div.AppMenu ul.appmenu-menu li.appmenu-submenu > ul > li {
+    color: var(--app-submenu-text-color);
+}
+
+div.AppMenu ul.appmenu-menu li.appmenu-submenu > ul > li.appmenu-leaf-active,
+div.AppMenu ul.appmenu-menu li.appmenu-submenu > ul > li.appmenu-submenu-active,
+div.AppMenu ul.appmenu-menu li.appmenu-submenu > ul > li.appmenu-submenu-expanded {
+    background-color: var(--app-submenu-bg-color-hover);
+    color: var(--app-submenu-text-color-hover);
+}
+
+div.AppMenu ul.appmenu-menu li.appmenu-leaf {
+    display: flex;
+    align-items: center;
+}
+
+div.AppMenu ul.appmenu-menu li.appmenu-leaf > span.icon {
+    flex: 0 0 auto;
+}
+
+div.AppMenu ul.appmenu-menu li.appmenu-leaf > span.appmenu-leaf-label {
+    flex: 1 1 auto;
+    margin: 0.25em 0;
+}
+
+div.AppMenu ul.appmenu-menu li.appmenu-leaf div.appmenu-leaf-comment {
+    font-weight: normal;
+    font-size: 90%;
+}
+
+div.appmenu-filter {
+    width: 100%;
+    margin-right: 0.5em;
+}

package/components/style/AttributeForm.css

@@ -0,0 +1,57 @@
+div.AttributeForm {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: 0.25em;
+}
+
+div.AttributeForm > form {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+}
+
+div.AttributeForm > form > * {
+    flex: 1 1 auto;
+}
+
+div.AttributeForm > form > div.ButtonBar {
+    flex: 0 0 auto;
+}
+
+div.AttributeForm div.attrib-form-geom-readonly {
+    background-color: #FF6600;
+    border: 1px solid #FF0000;
+    color: white;
+    padding: 0.25em;
+    margin-bottom: 0.25em;
+    font-weight: bold;
+}
+
+div.AttributeForm div.attrib-form-busy {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(127, 127, 127, 0.25);
+    cursor: wait;
+    z-index: 2;
+}
+
+div.link-feature-form-container {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-color: rgba(200, 200, 200, 0.5);
+    padding: 1em;
+    display: flex;
+    flex-direction: column;
+}
+
+div.link-feature-form-container > div.link-feature-form {
+    flex: 1 1 auto;
+}

package/components/style/AutoEditForm.css

@@ -0,0 +1,64 @@
+table.AutoEditForm {
+    width: 100%;
+}
+
+table.AutoEditForm td {
+    padding: 0.25em;
+    white-space: nowrap;
+}
+
+table.AutoEditForm td:first-child {
+    max-width: 10em;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+table.AutoEditForm td:nth-child(2) {
+    width: 99%;
+}
+
+table.AutoEditForm select.editing-layer-select,
+table.AutoEditForm select.editing-feature-select,
+table.AutoEditForm span.input-frame select {
+    width: 100%;
+    border: 1px solid var(--border-color);
+    background-color: var(--input-bg-color);
+    padding: 0.25em;
+}
+
+table.AutoEditForm table.fields-table label {
+    display: flex;
+    height: 2em;
+    align-items: center;
+}
+
+table.AutoEditForm label > input {
+    margin-right: 0.5em;
+}
+
+table.AutoEditForm textarea {
+    width: 100%;
+    border: 1px solid var(--border-color);
+}
+
+table.AutoEditForm span.input-frame input {
+    outline: none;
+    background: none;
+}
+
+table.AutoEditForm span.input-frame {
+    border: 1px solid var(--border-color);
+    padding: 0.25em;
+    background-color: var(--input-bg-color);
+    display: flex;
+    align-items: center;
+    height: 2em;
+}
+
+table.AutoEditForm span.input-frame input,
+table.AutoEditForm span.input-frame select {
+    border: 0;
+    flex: 1;
+    min-width: 0;
+    width: 0;
+}

package/components/style/DefaultColorScheme.css

@@ -0,0 +1,60 @@
+:root, :root.default {
+    /* Base colors */
+    --text-color: #595959;
+    --text-color-link: #337ab7;
+    --text-color-disabled: #999;
+    --container-bg-color: #f8f8f8;
+    --input-bg-color: white;
+    --input-bg-color-disabled: #eee;
+    --border-color: #bbb;
+    --color-active: #078aa3;
+    --focus-outline: 2px solid #3584e4;
+    /* Tooltips */
+    --tooltip-bg-color: rgba(0, 0, 0, 0.75);
+    --tooltip-text-color: white;
+    --tooltip-border-color: black;
+    /* Map buttons */
+    --map-button-bg-color: #595959;
+    --map-button-text-color: white;
+    --map-button-hover-bg-color: #f2f2f2;
+    --map-button-hover-text-color: #595959;
+    --map-button-active-bg-color: #f2f2f2;
+    --map-button-active-text-color: #595959;
+    /* Panels (topbar and bottom bar) */
+    --panel-bg-color: rgba(255, 255, 255, 0.75);
+    --panel-text-color: #595959;
+    /* Titlebars */
+    --titlebar-bg-color: #595959;
+    --titlebar-text-color: white;
+    /* Button */
+    --button-bg-color: #e9e9e9;
+    --button-bg-color-hover: #dcdcdc;
+    --button-bg-color-active: #078aa3;
+    --button-bg-color-active-hover: #06798d;
+    --button-bg-color-disabled: #e9e9e9;
+    --button-text-color: #595959;
+    --button-text-color-hover: #595959;
+    --button-text-color-active: white;
+    --button-text-color-active-hover: white;
+    --button-text-color-disabled: #bbb;
+    /* List */
+    --list-bg-color: white;
+    --list-section-bg-color: #ccc;
+    --list-section-text-color: #595959;
+    --list-item-bg-color-even: #f0f0f0;
+    --list-item-bg-color-hover: #dcdcdc;
+    --list-item-bg-color-active: #078aa3;
+    --list-item-bg-color-active-hover: #06798d;
+    --list-item-text-color-hover: #595959;
+    --list-item-text-color-active: white;
+    --list-item-text-color-active-hover: white;
+    /* App menu */
+    --app-menu-bg-color: #f2f2f2;
+    --app-menu-text-color: #595959;
+    --app-menu-bg-color-hover: white;
+    --app-menu-text-color-hover: #595959;
+    --app-submenu-bg-color: #808080;
+    --app-submenu-text-color: white;
+    --app-submenu-bg-color-hover: #a0a0a0;
+    --app-submenu-text-color-hover: white;
+}

package/components/style/EditUploadField.css

@@ -0,0 +1,103 @@
+span.edit-upload-field {
+    border: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    background-color: var(--input-bg-color);
+    padding: 0.25em;
+}
+
+span.edit-upload-field > a {
+    width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1 1 auto;
+    white-space: nowrap;
+}
+
+span.edit-upload-field > span.icon {
+    flex: 0 0 auto;
+}
+
+span.edit-upload-field-input {
+    border: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    background-color: var(--input-bg-color);
+    overflow: hidden;
+}
+
+span.edit-upload-field-input > input {
+    min-width: 8em;
+    width: 0;
+    flex: 1 1 auto;
+    border: none!important;
+    background-color: transparent!important;
+}
+
+span.edit-upload-field-input > span.icon {
+    flex: 0 0 auto;
+    margin: 0 0.25em;
+}
+
+span.edit-upload-field-disabled,
+span.edit-upload-field-input-disabled {
+    background-color: var(--input-bg-color-disabled);
+    color: var(--text-color-disabled);
+}
+
+span.edit-upload-field-image {
+    display: flex;
+    flex-direction: column;
+    max-width: 150px;
+}
+
+span.edit-upload-field-image > img {
+    width: 100%;
+    flex: 1 1 auto;
+    cursor: pointer;
+}
+
+span.edit-upload-field-image > div.ButtonBar {
+    margin: 0;
+}
+
+span.edit-upload-field-imagelink {
+    position: relative;
+    text-align: left;
+}
+
+span.edit-upload-field-imagelink > img {
+    display: none;
+    position: absolute;
+    max-width: 240px;
+    max-height: 240px;
+    top: 100%;
+    z-index: 1;
+    box-shadow: 0px 2px 4px rgba(136, 136, 136, 0.5);
+    cursor: pointer;
+}
+
+span.edit-upload-field-imagelink:hover > img {
+    display: initial;
+}
+
+video.edit-capture-frame {
+    height: 100%;
+    max-width: 100%;
+}
+
+div.edit-capture-controls {
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    bottom: 1em;
+    left: 0;
+    right: 0;
+}
+
+div.edit-capture-controls > span.icon {
+    font-size: 300%;
+    background-color: rgba(255, 255, 255, 0.75);
+    padding: 0.3em;
+    border-radius: 1em;
+}

package/components/style/FullscreenSwitcher.css

@@ -0,0 +1,25 @@
+div.FullScreenSwitcher {
+    display: inline-block;
+    height: 100%;
+    cursor: pointer;
+    width: 1em;
+    margin-left: -1em;
+}
+
+div.FullScreenSwitcher > span {
+    display: inline-block;
+    vertical-align: top;
+    width: 0;
+    height: 0;
+    border-style: solid;
+}
+
+div.FullScreenSwitcher > span.maximize {
+    border-width: 0 1em 1em 0;
+    border-color: transparent var(--panel-text-color) transparent transparent;
+}
+
+div.FullScreenSwitcher > span.minimize {
+    border-width: 1em 0 0 1em;
+    border-color: transparent transparent transparent var(--panel-text-color);
+}