@geogirafe/lib-geoportal 1.1.0-dev.2597265501 → 1.1.0-dev.2597268561

package/api/style.css

@@ -0,0 +1,35 @@
+:host {
+  position: relative;
+}
+
+girafe-map {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+girafe-basemap {
+  display: block;
+  position: absolute;
+  left: 0.5rem;
+  bottom: 0.5rem;
+}
+
+girafe-search {
+  display: block;
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  width: 50%;
+  height: 2.25rem;
+  box-shadow: 0 1px 4px #0000004d;
+}
+
+girafe-selection-window {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 100;
+  width: 400px;
+  height: 240px;
+}

package/components/about/style.css

@@ -0,0 +1,20 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+.panel {
+  color: var(--text-color);
+}
+
+.panel > div {
+  padding: 1rem;
+}
+
+img.logo {
+  filter: var(--svg-filter);
+  height: 4rem;
+  opacity: 0.8;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  margin-top: 1rem;
+}

package/components/advancedfilter/style.css

@@ -0,0 +1,148 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+#content {
+  background: var(--bkg-color);
+  color: var(--text-color);
+  padding: 1rem;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.filter-element-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.filter-element {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border-radius: 3px;
+  padding: 0.5rem;
+  /* Make background slightly transparent to distinguish it from button/input hover color */
+  background-color: color-mix(in srgb, var(--bkg-color-grad1) 30%, transparent);
+  box-shadow: var(--bx-shdw);
+  gap: 0.5rem;
+}
+
+.filter-title {
+  font-size: 1.2rem;
+  padding-right: 2rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.filter-expression {
+  font-family: monospace, Arial, sans-serif;
+  padding-right: 1.5rem;
+  font-size: 0.85rem;
+}
+
+.gg-label {
+  background-color: transparent;
+}
+
+.layer-select-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.filter-condition-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.filter-condition {
+  display: flex;
+  flex-direction: column;
+  border-radius: 3px;
+  padding: 0.5rem;
+  margin-left: 0.5rem;
+  background-color: var(--bkg-color);
+  box-shadow: var(--bx-shdw);
+}
+
+.value-inputs {
+  display: flex;
+  gap: 0.5rem;
+}
+.value-inputs > input {
+  width: 100%;
+}
+
+.action-btn {
+  float: left;
+  width: fit-content;
+}
+
+.apply-btn {
+  margin-top: 1rem;
+}
+
+.remove-btn {
+  position: absolute;
+  align-self: flex-end;
+  font-size: 1.25rem;
+  margin: -0.25rem -0.25rem 0 0;
+}
+
+ul.value-choices {
+  overflow-y: auto;
+  border: var(--app-standard-border);
+  margin: 0;
+  padding: 0 0 0.25em 0;
+  max-height: 10rem;
+}
+
+ul.value-choices li {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.25em;
+}
+ul.value-choices li label {
+  flex: 1;
+}
+
+.footer-container {
+  display: flex;
+}
+
+.component-loading {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.layer-loading {
+  margin-right: 0.5rem;
+  margin-left: auto;
+}
+
+.loader {
+  box-sizing: border-box;
+  border: 3px solid var(--text-color);
+  opacity: 50%;
+  border-bottom-color: #0000;
+  border-radius: 50%;
+  width: 25px;
+  height: 25px;
+  animation: 1s linear infinite rotation;
+  display: inline-block;
+  align-self: center;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/components/alignnorthbutton-mobile/style.css

@@ -0,0 +1,14 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+#north-button {
+  outline: none;
+  background-color: white;
+}
+
+#north-button:focus {
+  outline: none;
+  background-color: white;
+}
+
+.black-to-red {
+  filter: invert(27%) sepia(50%) saturate(3000%) brightness(95%) contrast(100%);
+}

package/components/auth/style.css

@@ -0,0 +1,17 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+.container {
+  display: flex;
+  flex-direction: row;
+  border-right: var(--app-standard-border);
+  align-items: center;
+}
+
+.name {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+}
+
+.user-avatar {
+  --svg-filter: none;
+}

package/components/auth-mobile/style.css

@@ -0,0 +1,39 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+.container {
+  background-color: white;
+  border-radius: 8px;
+  filter: drop-shadow(0px 4px 7px #0004382c);
+  display: flex;
+  flex-direction: column;
+  padding: 1em;
+}
+
+.container:active {
+  background-color: #c6ceda;
+}
+
+.container > button {
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  border: none;
+  background: transparent;
+}
+
+.container > button > img {
+  width: 25%;
+  opacity: 0.7;
+  padding-bottom: 1em;
+}
+
+.container > button > span {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.2em;
+  font-weight: 600;
+  color: #3f68a7;
+}

package/components/basemap/style.css

@@ -0,0 +1,81 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+.basemap-button {
+  background-color: var(--bkg-color);
+  color: var(--text-color);
+  outline: 0;
+  border: var(--app-standard-border);
+  border-radius: 4px;
+  border-width: 2px;
+  display: inline-flex;
+  box-sizing: border-box;
+  padding: 5px;
+  margin: 0;
+  cursor: pointer;
+  box-shadow: var(--bx-shdw);
+}
+
+#container {
+  display: inline-flex;
+  flex-direction: column;
+  width: max-content;
+}
+
+.basemap-icon {
+  background: var(--svg-legend-bkg);
+  filter: var(--svg-map-filter);
+}
+
+.active-basemap {
+  background-color: var(--bkg-color-grad2) !important;
+}
+
+.opacity-slider {
+  padding: 0 5px;
+  display: flex;
+  flex-direction: row;
+  height: 20px;
+}
+
+.opacity-slider img {
+  height: 16px;
+  top: 2px;
+  position: relative;
+}
+
+.opacity-slider input[type='range'] {
+  flex-grow: 1;
+}
+
+.basemap-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.basemap-container button {
+  border: none;
+  background-color: transparent;
+  display: flex;
+  flex-direction: row;
+  color: var(--text-color);
+  flex-grow: 1;
+}
+
+.basemap-container button img {
+  margin: 0.3rem;
+  height: 2rem;
+}
+.basemap-container button span {
+  line-height: 2rem;
+  height: 2rem;
+  margin: 0.3rem;
+}
+
+.basemap-container:hover {
+  background-color: var(--bkg-color-grad1);
+}
+
+.basemaps-with-opacity-separator {
+  border-top: 1px solid var(--bkg-color-grad2);
+  height: 1px;
+  margin: 6px 8px;
+}

package/components/contact/style.css

@@ -0,0 +1,27 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+#content {
+  background: var(--bkg-color);
+  color: var(--text-color);
+  padding: 1rem;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+label,
+input,
+select,
+textarea {
+  font-size: 0.9rem;
+  flex-grow: 1;
+}
+
+.gg-input,
+.gg-select {
+  margin-bottom: 1rem;
+}
+
+.mail-contact {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}

package/components/context-menu/custom-context-menu/style.css

@@ -0,0 +1,23 @@
+.map-info-contextmenu {
+    --contextmenu-border-width: 1px;
+    --contextmenu-triangle-width: 20px;
+    --contextmenu-triangle-height: 10px;
+    position: absolute;
+    border-radius: 0;
+    border: var(--contextmenu-border-width) solid var(--text-color-grad1);
+    bottom: var(--contextmenu-triangle-height);
+    left: 0;
+    transform: translateX(-50%);
+
+    .title-container {
+        padding-bottom: 0.5rem;
+
+        &.no-title {
+            padding-bottom: 0;
+        }
+
+        span.title {
+            font-weight: bold;
+        }
+    }
+}

package/components/context-menu/default-context-menu/style.css

@@ -0,0 +1,70 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+/* Custom table */
+table.custom-table {
+  width: 100%;
+  max-width: 100%;
+  min-width: var(--popup-min);
+  table-layout: auto;
+  border-collapse: collapse;
+  margin: 10px auto;
+}
+
+table.custom-table tr {
+  border-bottom: 1px solid #ccc;
+}
+
+table.custom-table th,
+table.custom-table td {
+  padding: 5px 5px 5px 0px;
+  vertical-align: middle;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+table.custom-table col.col-1 {
+  width: 125px;
+}
+
+table.custom-table col.col-3 {
+  width: 30px;
+}
+
+table.custom-table tr:last-child {
+  border-bottom: none;
+}
+
+tr {
+  border-bottom: 1px solid #000000;
+}
+
+.custom-div {
+  margin: 6px 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+.link-div {
+  display: flex;
+  align-items: center;
+  margin: 0.5em 0;
+  gap: 0.25em;
+}
+
+.link-div img {
+  width: 1em;
+  height: auto;
+}
+
+.center-vertically {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 100%;
+}

package/components/context-menu/mapcontextmenu.css

@@ -0,0 +1,73 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+.map-info-contextmenu {
+  --contextmenu-border-width: 1px;
+  --contextmenu-triangle-width: 20px;
+  --contextmenu-triangle-height: 10px;
+  --popup-min: 300px;
+  --popup-max: 400px;
+
+  min-width: var(--popup-min);
+  max-width: var(--popup-max);
+  width: max-content;
+  box-sizing: content-box;
+  background-color: var(--bkg-color) !important;
+  color: var(--text-color);
+  padding: 15px;
+  border-radius: 0;
+}
+
+.map-info-contextmenu .tooltip-triangle {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 20px;
+  height: var(--contextmenu-triangle-height);
+  pointer-events: none;
+}
+
+.map-info-contextmenu .tooltip-triangle .triangle-fill {
+  fill: var(--bkg-color);
+  stroke: none;
+}
+
+.map-info-contextmenu .tooltip-triangle .triangle-border {
+  fill: none;
+  stroke: var(--text-color-grad1);
+  stroke-width: var(--contextmenu-border-width);
+}
+
+.contextmenu-closer {
+  text-decoration: none;
+  position: absolute;
+  top: 1px;
+  right: 1px;
+}
+
+.contextmenu-closer:after {
+  content: '✖';
+}
+
+.justify-right {
+  display: flex;
+  justify-content: flex-end !important;
+  align-items: center;
+}
+
+.hidden {
+  display: none;
+}
+
+/* Override some Defaults from ol-ext Popup Style*/
+.ol-popup.default>div {
+  background-color: var(--bkg-color) !important;
+  color: var(--text-color);
+  border: 1px solid var(--text-color-grad1) !important;
+  border-radius: 0 !important;
+}
+.ol-popup.default .anchor {
+  color: var(--text-color-grad1) !important;
+}
+.ol-popup.default .anchor:before {
+  margin: 1px -11px !important;
+}