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

Reorganise leaflet styles

Browse Source
This commit is contained in:
James Lyne 2021-05-27 17:33:43 +01:00
parent 8fb37cccec
commit 42d14ca5c9
3 changed files with 115 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/scss/_leaflet.scss Normal file
View File

@ -0,0 +1,21 @@
@import "leaflet/controls";
@import "leaflet/popups";
@import "leaflet/markers";
.leaflet-container {
font-family: inherit;
font-size: 1.5rem;
font-weight: inherit;
line-height: 1;
/* Workaround for focus outlines until https://github.com/Leaflet/Leaflet/pull/7259 gets released */
* {
@include focus {
outline-style: auto !important;
}
}
}
.leaflet-players-pane {
z-index: 600;
}

93
src/scss/leaflet/_markers.scss Normal file
View File

@ -0,0 +1,93 @@
/*******************
* players on the map
*/
.marker {
display: flex;
align-items: center;
&.marker--player {
transition: transform 0.3s ease-in 0s;
.marker__label {
display: block;
}
.player__health,
.player__armor {
width: 50px;
}
.player__health,
.player__armor,
.player__health-bar,
.player__armor-bar {
height: 7px;
}
.player__health {
background: url(../assets/images/heart_depleted.png) repeat-x left center;
}
.player__health-bar {
background: url(../assets/images/heart.png) repeat-x left center;
}
.player__armor {
background: url(../assets/images/armor_depleted.png) repeat-x left center;
}
.player__armor-bar {
background: url(../assets/images/armor.png) repeat-x left center;
}
}
.marker__label {
flex: 0 0 auto;
margin-left: 2px;
z-index: 20;
font-size: 1.5rem;
line-height: 1;
white-space: nowrap;
color: var(--text-base);
background: var(--background-dark);
padding: 0.2rem;
display: none;
max-width: 25vw;
text-overflow: ellipsis;
overflow: hidden;
@at-root .leaflet-pane--show-labels .marker__label {
display: block;
}
}
&:hover {
z-index: 1000;
}
@include focus {
z-index: 1000;
.marker__label {
display: block;
outline: auto;
}
}
&:hover .marker__label {
display: block;
}
@at-root {
.no-animations .marker.marker--player {
transition: none;
}
}
@media print {
display: none !important;
}
}

115
src/scss/style.scss
View File

@ -19,8 +19,7 @@
@import "mixins"; @import "mixins";
@import "placeholders"; @import "placeholders";
@import "notifications"; @import "notifications";
@import "leaflet/controls"; @import "leaflet";
@import "leaflet/popups";
@keyframes spin { @keyframes spin {
0% { 0% {
@ -265,118 +264,6 @@ input {
} }
} }
/*******************
* players on the map
*/
.marker {
display: flex;
align-items: center;
&.marker--player {
transition: transform 0.3s ease-in 0s;
.marker__label {
display: block;
}
.player__health,
.player__armor {
width: 50px;
}
.player__health,
.player__armor,
.player__health-bar,
.player__armor-bar {
height: 7px;
}
.player__health {
background: url(../assets/images/heart_depleted.png) repeat-x left center;
}
.player__health-bar {
background: url(../assets/images/heart.png) repeat-x left center;
}
.player__armor {
background: url(../assets/images/armor_depleted.png) repeat-x left center;
}
.player__armor-bar {
background: url(../assets/images/armor.png) repeat-x left center;
}
}
.marker__label {
flex: 0 0 auto;
margin-left: 2px;
z-index: 20;
font-size: 1.5rem;
line-height: 1;
white-space: nowrap;
color: var(--text-base);
background: var(--background-dark);
padding: 0.2rem;
display: none;
max-width: 25vw;
text-overflow: ellipsis;
overflow: hidden;
@at-root .leaflet-pane--show-labels .marker__label {
display: block;
}
}
&:hover {
z-index: 1000;
}
@include focus {
z-index: 1000;
.marker__label {
display: block;
outline: auto;
}
}
&:hover .marker__label {
display: block;
}
@at-root {
.no-animations .marker.marker--player {
transition: none;
}
}
@media print {
display: none !important;
}
}
.leaflet-container {
font-family: inherit;
font-size: 1.5rem;
font-weight: inherit;
line-height: 1;
/* Workaround for focus outlines until https://github.com/Leaflet/Leaflet/pull/7259 gets released */
* {
@include focus {
outline-style: auto !important;
}
}
}
.leaflet-players-pane {
z-index: 600;
}
@media print { @media print {
@page { @page {
size: 297mm 210mm; size: 297mm 210mm;