Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add shadows to UI elements

Browse Source
This commit is contained in:
James Lyne 2021-05-24 21:57:53 +01:00
parent 47d0b1e675
commit 2ffe57c38a
5 changed files with 11 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -128,6 +128,7 @@
--border-radius: 1rem; --border-radius: 1rem;
--border-color: #333333; /* Control borders */ --border-color: #333333; /* Control borders */
--box-shadow: 2px 2px 0px #111111;
--text-base: #cccccc; /* Normal text */ --text-base: #cccccc; /* Normal text */
--text-emphasis: #eeeeee; /* Chat messages/:focus inputs */ --text-emphasis: #eeeeee; /* Chat messages/:focus inputs */

1
src/components/Sidebar.vue
View File

@ -128,6 +128,7 @@ export default defineComponent({
button { button {
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
box-shadow: var(--box-shadow);
& + button { & + button {
margin-left: 1rem; margin-left: 1rem;

1
src/components/map/MapContextMenu.vue
View File

@ -179,6 +179,7 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
#map-context-menu { #map-context-menu {
background-color: var(--background-base); background-color: var(--background-base);
box-shadow: var(--box-shadow);
color: var(--text-base); color: var(--text-base);
border-radius: var(--border-radius); border-radius: var(--border-radius);
position: fixed; position: fixed;

1
src/scss/_placeholders.scss
View File

@ -78,6 +78,7 @@
background-color: var(--background-base); background-color: var(--background-base);
color: var(--text-base); color: var(--text-base);
border-radius: var(--border-radius); border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 1.5rem; padding: 1.5rem;

7
src/scss/leaflet/_controls.scss
View File

@ -17,6 +17,7 @@
.leaflet-control { .leaflet-control {
background-color: var(--background-base); background-color: var(--background-base);
border-radius: var(--border-radius); border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
@ -36,6 +37,7 @@
align-items: center; align-items: center;
padding: 0; padding: 0;
border: none; border: none;
box-shadow: var(--box-shadow);
a { a {
border-radius: 0; border-radius: 0;
@ -215,6 +217,7 @@
.leaflet-bar { .leaflet-bar {
flex-direction: column; flex-direction: column;
box-shadow: var(--box-shadow);
a { a {
width: 5rem; width: 5rem;
@ -223,6 +226,10 @@
} }
} }
.leaflet-control-layers {
box-shadow: var(--box-shadow);
}
.leaflet-control-logo { .leaflet-control-logo {
order: 1; order: 1;
margin-bottom: 1rem; margin-bottom: 1rem;