Upstream
/
BlueMapVue
mirror of https://github.com/BlueMap-Minecraft/BlueMapVue.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Push BlueMapWeb and tweak themes and add a new contrast theme

This commit is contained in:
Lukas Rieger (Blue) 2022-10-16 00:37:45 +02:00
parent c8c75128c7
commit f48efde9fa
No known key found for this signature in database
GPG Key ID: 2D09EC5ED2687FF2
20 changed files with 83 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
BlueMapWeb

@ -1 +1 @@
Subproject commit 7e9f0e0bd80c39479087c691e61850e3b84e149a
Subproject commit 5be6dc80895e21402ab6d84e563a9b34c4a94f1c

3
public/lang/de.js
View File

@ -63,7 +63,8 @@ export default {
title: "Farbmodus",
default: "Standard (System/Browser)",
dark: "Dunkel",
light: "Hell"
light: "Hell",
contrast: "Kontrast"
},
debug: {
button: "Debug"

3
public/lang/en.js
View File

@ -63,7 +63,8 @@ export default {
title: "Theme",
default: "Default (System/Browser)",
dark: "Dark",
light: "Light"
light: "Light",
contrast: "Contrast"
},
debug: {
button: "Debug"

2
src/App.vue
View File

@ -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" />

6
src/components/ControlBar/SvgButton.vue
View File

@ -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);
}

2
src/components/Menu/Group.vue
View File

@ -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 {

7
src/components/Menu/MapButton.vue
View File

@ -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 {

4
src/components/Menu/MarkerItem.vue
View File

@ -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);
}
}
}

4
src/components/Menu/MarkerSet.vue
View File

@ -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 {

1
src/components/Menu/SettingsMenu.vue
View File

@ -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 = [

4
src/components/Menu/SideMenu.vue
View File

@ -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;
}
}

6
src/components/Menu/SimpleButton.vue
View File

@ -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);
}

12
src/components/Menu/Slider.vue
View File

@ -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);
}

2
src/components/Menu/SwitchButton.vue
View File

@ -39,7 +39,7 @@ export default {
}
&:hover {
background-color: var(--theme-bg-light);
background-color: var(--theme-bg-hover);
}
}

2
src/components/Menu/SwitchHandle.vue
View File

@ -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;

2
src/components/Menu/TextInput.vue
View File

@ -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;
}

3
src/i18n/fallback.js
View File

@ -63,7 +63,8 @@ export default {
title: "Theme",
default: "Default (System/Browser)",
dark: "Dark",
light: "Light"
light: "Light",
contrast: "Contrast"
},
debug: {
button: "Debug"

8
src/js/BlueMapApp.js
View File

@ -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");
}
}

12
src/scss/global.scss
View File

@ -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

33
src/scss/variables.scss
View File

@ -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;
}