Push BlueMapWeb and tweak themes and add a new contrast theme

2025-02-27 15:21:20 +01:00 · 2022-10-16 00:37:45 +02:00 · 2022-10-16 00:37:45 +02:00 · f48efde9fa
commit f48efde9fa
parent c8c75128c7
20 changed files with 83 additions and 35 deletions
--- a/2
+++ b/2
@ -1 +1 @@
-Subproject commit 7e9f0e0bd80c39479087c691e61850e3b84e149a
+Subproject commit 5be6dc80895e21402ab6d84e563a9b34c4a94f1c
--- a/public/lang/de.js
+++ b/public/lang/de.js
@ -63,7 +63,8 @@ export default {
        title: "Farbmodus",
        default: "Standard (System/Browser)",
        dark: "Dunkel",
-        light: "Hell"
+        light: "Hell",
+        contrast: "Kontrast"
    },
    debug: {
        button: "Debug"
--- a/public/lang/en.js
+++ b/public/lang/en.js
@ -63,7 +63,8 @@ export default {
        title: "Theme",
        default: "Default (System/Browser)",
        dark: "Dark",
-        light: "Light"
+        light: "Light",
+        contrast: "Contrast"
    },
    debug: {
        button: "Debug"
--- a/src/App.vue
+++ b/src/App.vue
@ -1,5 +1,5 @@
 <template>
-  <div id="app" :class="{'theme-light': appState.theme === 'light', 'theme-dark': appState.theme === 'dark'}">
+  <div id="app" :class="{'theme-light': appState.theme === 'light', 'theme-dark': appState.theme === 'dark', 'theme-contrast': appState.theme === 'contrast'}">
    <FreeFlightMobileControls v-if="appState.controls.state === 'free'" />
    <ControlBar />
    <MainMenu :menu="appState.menu" />
--- a/src/components/ControlBar/SvgButton.vue
+++ b/src/components/ControlBar/SvgButton.vue
@ -26,7 +26,11 @@
  background-color: var(--theme-bg);
  color: var(--theme-fg);

-  &:hover, &.active {
+  &:hover {
+    background-color: var(--theme-bg-hover);
+  }
+
+  &.active {
    background-color: var(--theme-bg-light);
  }

--- a/src/components/Menu/Group.vue
+++ b/src/components/Menu/Group.vue
@ -21,7 +21,7 @@ export default {
  position: relative;
  margin: 2em 0 1em;
  padding-top: 1em;
-  border: solid 1px var(--theme-bg-light);
+  border: solid 2px var(--theme-bg-hover);


  > .title {
--- a/src/components/Menu/MapButton.vue
+++ b/src/components/Menu/MapButton.vue
@ -43,13 +43,12 @@ export default {
  overflow-x: hidden;
  text-overflow: ellipsis;

-  &.selected, &:hover {
+  &.selected {
    background-color: var(--theme-bg-light);
  }

-  &:active {
-    background-color: var(--theme-fg-light);
-    color: var(--theme-bg);
+  &:hover {
+    background-color: var(--theme-bg-hover);
  }

  .sky {
--- a/src/components/Menu/MarkerItem.vue
+++ b/src/components/Menu/MarkerItem.vue
@ -127,7 +127,7 @@ export default {
    cursor: pointer;

    &:hover {
-      background-color: var(--theme-bg-light);
+      background-color: var(--theme-bg-hover);
    }

    > .info {
@ -158,7 +158,7 @@ export default {
          &:not(:first-child) {
            margin-left: 0.5em;
            padding-left: 0.5em;
-            border-left: solid 1px var(--theme-bg-light);
+            border-left: solid 1px var(--theme-bg-hover);
          }
        }
      }
--- a/src/components/Menu/MarkerSet.vue
+++ b/src/components/Menu/MarkerSet.vue
@ -79,7 +79,7 @@ export default {
    cursor: pointer;

    &:hover {
-      background-color: var(--theme-bg-light);
+      background-color: var(--theme-bg-hover);
    }

    > .marker-set-switch {
@ -120,7 +120,7 @@ export default {
    cursor: pointer;

    &:hover {
-      background-color: var(--theme-bg-light);
+      background-color: var(--theme-bg-hover);
    }

    > svg {
--- a/src/components/Menu/SettingsMenu.vue
+++ b/src/components/Menu/SettingsMenu.vue
@ -69,6 +69,7 @@ const themes = [
  {get name(){ return i18n.t("theme.default")}, value: null},
  {get name(){ return i18n.t("theme.dark")}, value: 'dark'},
  {get name(){ return i18n.t("theme.light")}, value: 'light'},
+  {get name(){ return i18n.t("theme.contrast")}, value: 'contrast'},
 ];

 const qualityStages = [
--- a/src/components/Menu/SideMenu.vue
+++ b/src/components/Menu/SideMenu.vue
@ -100,7 +100,7 @@ export default {
    text-align: center;

    background-color: inherit;
-    border-bottom: solid 1px var(--theme-bg-light);
+    border-bottom: solid 1px var(--theme-bg-hover);

    padding: 0.5em;
    @media (max-width: $mobile-break) {
@ -123,7 +123,7 @@ export default {

    hr {
      border: none;
-      border-bottom: solid 1px var(--theme-bg-light);
+      border-bottom: solid 2px var(--theme-bg-hover);
      margin: 0.5em 0;
    }
  }
--- a/src/components/Menu/SimpleButton.vue
+++ b/src/components/Menu/SimpleButton.vue
@ -43,7 +43,11 @@ export default {
    text-overflow: ellipsis;
  }

-  &:hover, &.active {
+  &:hover {
+    background-color: var(--theme-bg-hover);
+  }
+
+  &.active {
    background-color: var(--theme-bg-light);
  }

--- a/src/components/Menu/Slider.vue
+++ b/src/components/Menu/Slider.vue
@ -37,7 +37,7 @@ export default {
  padding: 0 0.5em;

  &:hover {
-    background-color: var(--theme-bg-light);
+    background-color: var(--theme-bg-hover);
  }

  > .label {
@ -60,7 +60,7 @@ export default {
      //border: solid 0.125em var(--theme-fg-light);

      overflow: hidden;
-      background-color: var(--theme-fg-light);
+      background-color: var(--theme-bg-light);

      &::-webkit-slider-thumb {
        appearance: none;
@ -71,8 +71,8 @@ export default {
        width: 1em;
        height: 1em;

-        border-radius: 100%;
-        border: solid 0.125em var(--theme-fg-light);
+        border-radius: 1em;
+        border: solid 0.125em var(--theme-bg-light);

        background-color: var(--theme-bg);

@ -83,8 +83,8 @@ export default {
        width: 0.75em;
        height: 0.75em;

-        border-radius: 100%;
-        border: solid 0.125em var(--theme-fg-light);
+        border-radius: 0.75em;
+        border: solid 0.125em var(--theme-bg-light);

        background-color: var(--theme-bg);
      }
--- a/src/components/Menu/SwitchButton.vue
+++ b/src/components/Menu/SwitchButton.vue
@ -39,7 +39,7 @@ export default {
  }

  &:hover {
-    background-color: var(--theme-bg-light);
+    background-color: var(--theme-bg-hover);
  }
 }

--- a/src/components/Menu/SwitchHandle.vue
+++ b/src/components/Menu/SwitchHandle.vue
@ -17,7 +17,7 @@ export default {
  width: 2em;

  border-radius: 1em;
-  background-color: var(--theme-fg-light);
+  background-color: var(--theme-bg-light);

  transition: background-color 0.3s;

--- a/src/components/Menu/TextInput.vue
+++ b/src/components/Menu/TextInput.vue
@ -13,7 +13,7 @@ export default {

 <style lang="scss">
 .side-menu .text-input {
-  background-color: var(--theme-bg-light);
+  background-color: var(--theme-bg-hover);
  width: calc(100% - 1em);
  padding: 0.5em;
 }
--- a/src/i18n/fallback.js
+++ b/src/i18n/fallback.js
@ -63,7 +63,8 @@ export default {
 		title: "Theme",
 		default: "Default (System/Browser)",
 		dark: "Dark",
-		light: "Light"
+		light: "Light",
+		contrast: "Contrast"
 	},
 	debug: {
 		button: "Debug"
--- a/src/js/BlueMapApp.js
+++ b/src/js/BlueMapApp.js
@ -509,15 +509,23 @@ export class BlueMapApp {

        if (theme === "light") {
            this.mapViewer.rootElement.classList.remove("theme-dark");
+            this.mapViewer.rootElement.classList.remove("theme-contrast");
            this.mapViewer.rootElement.classList.add("theme-light");
        }
        else if (theme === "dark") {
            this.mapViewer.rootElement.classList.remove("theme-light");
+            this.mapViewer.rootElement.classList.remove("theme-contrast");
            this.mapViewer.rootElement.classList.add("theme-dark");
        }
+        else if (theme === "contrast") {
+            this.mapViewer.rootElement.classList.remove("theme-light");
+            this.mapViewer.rootElement.classList.remove("theme-dark");
+            this.mapViewer.rootElement.classList.add("theme-contrast");
+        }
        else {
            this.mapViewer.rootElement.classList.remove("theme-light");
            this.mapViewer.rootElement.classList.remove("theme-dark");
+            this.mapViewer.rootElement.classList.remove("theme-contrast");
        }
    }

--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@ -42,6 +42,10 @@
  .theme-light {
    @include light-theme;
  }
+
+  .theme-contrast {
+    @include contrast-theme;
+  }
 }

@media (prefers-color-scheme: light) {
@ -137,13 +141,15 @@ input {
  width: 0.5em;
 }
 ::-webkit-scrollbar-track {
-  background: var(--theme-bg-light);
+  background: var(--theme-bg);
 }
 ::-webkit-scrollbar-thumb {
-  background: var(--theme-fg-light);
+  background: var(--theme-bg-light);
+  border-radius: 0.5em;
+  border: solid var(--theme-bg) 0.1em;
 }
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--theme-fg);
+  background: var(--theme-fg-light);
 }

 //app-error
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@ -33,12 +33,13 @@ $mobile-break: 575.98px;
  font-weight: 400;

  --theme-bg: #181818;
-  --theme-bg-light: #333;
+  --theme-bg-hover: #222;
+  --theme-bg-light: #444;
  --theme-fg: #fff;
  --theme-fg-light: #aaa;

  //SwitchButton
-  --theme-switch-button-on: #006EDE;
+  --theme-switch-button-on: #00489d;

  //DayNightSwitch
  --theme-stars-day: #fff;
@ -53,16 +54,38 @@ $mobile-break: 575.98px;
  font-weight: 500;

  --theme-bg: #eee;
-  --theme-bg-light: #aaa;
+  --theme-bg-hover: #ddd;
+  --theme-bg-light: #999;
  --theme-fg: #000;
-  --theme-fg-light: #444;
+  --theme-fg-light: #333;

  //SwitchButton
-  --theme-switch-button-on: #006EDE;
+  --theme-switch-button-on: #6593dc;

  //DayNightSwitch
  --theme-stars-day: #444;
  --theme-moon-day: #000;
  --theme-stars-night: #fff;
  --theme-moon-night: #ff0;
+}
+
+@mixin contrast-theme {
+  font-family: 'Quicksand', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+
+  --theme-bg: #000;
+  --theme-bg-hover: #222;
+  --theme-bg-light: #666;
+  --theme-fg: #fff;
+  --theme-fg-light: #aaa;
+
+  //SwitchButton
+  --theme-switch-button-on: #006fff;
+
+  //DayNightSwitch
+  --theme-stars-day: #fff;
+  --theme-moon-day: #ff0;
+  --theme-stars-night: #444;
+  --theme-moon-night: #000;
 }