Template
Collapsible Map/styles.css
From Dogcraft Wiki
#collapsible-container{
position: relative;
max-width: 500px;
}
#collapsible-container-header{
text-align: center;
line-height: 2;
font-size: large;
font-weight: bold;
color: white;
background: #8b0024;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#collapsible-container-header .fa-chevron-down{
display: none;
}
.mw-collapsed #collapsible-container-header .fa-chevron-up{
display: none;
}
.mw-collapsed #collapsible-container-header .fa-chevron-down{
display: inline;
}
.map-grid-child img{
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.mw-collapsed #collapsible-container-header{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.mw-collapsible-toggle{
width: 100%;
line-height: 2;
position: absolute;
font-size: large;
opacity: 0;
left: 0;
}
#outer-map-container{
position: relative;
width: 100%;
margin: auto;
border-radius: 10px;
line-height: 0;
font-family: 'Nunito';
}
#outer-map-container img{
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
object-position: top;
display: block;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#marker-wrapper{
position: absolute;
width: 60px;
height: 70px;
text-align: center;
line-height: 0;
overflow: hidden;
}
#marker-wrapper i{
display: block;
color: red;
font-size: 23px;
margin-top: calc(70px - 23px);
}
#coord-text{
text-align: center;
line-height: 1.5;
margin: 0;
font-weight: bold;
color: white;
background-color: #00000066;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
position: absolute;
bottom: 0;
width: 100%;
}
#outer-map-container a.external{
width: 100%;
height: 100%;
display: flex;
position: absolute;
top: 0;
left: 0;
z-index: 100000;
font-size: 17px;
border-radius: 10px;
text-align: center;
line-height: 100%;
transition: 0.5s;
align-items: center;
justify-content: center;
font-weight: bold;
color: white;
text-decoration: none;
background-color: #00000044;
opacity: 0;
font-family: 'Nunito';
}
#outer-map-container a.external:hover{
opacity: 1;
}
#outer-map-container .map-overlay-container{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 100;
clip-path: border-box;
}
.map-grid-container{
display: grid;
}
.map-grid-container p{
margin: 0;
}
.map-grid-container .inner-map-container{
position: relative;
}
.map-grid-bottom-left img{
border-bottom-left-radius: 10px !important;
}
.map-grid-bottom-right img{
border-bottom-right-radius: 10px !important;
}
#map-1-1{
grid-row: 1;
grid-column: 1;
}
#map-1-2{
grid-row: 1;
grid-column: 2;
}
#map-1-3{
grid-row: 1;
grid-column: 3;
}
#map-1-4{
grid-row: 1;
grid-column: 4;
}
#map-1-5{
grid-row: 1;
grid-column: 5;
}
#map-1-6{
grid-row: 1;
grid-column: 6;
}
#map-1-7{
grid-row: 1;
grid-column: 7;
}
#map-2-1{
grid-row: 2;
grid-column: 1;
}
#map-2-2{
grid-row: 2;
grid-column: 2;
}
#map-2-3{
grid-row: 2;
grid-column: 3;
}
#map-2-4{
grid-row: 2;
grid-column: 4;
}
#map-2-5{
grid-row: 2;
grid-column: 5;
}
#map-2-6{
grid-row: 2;
grid-column: 6;
}
#map-2-7{
grid-row: 2;
grid-column: 7;
}
#map-3-1{
grid-row: 3;
grid-column: 1;
}
#map-3-2{
grid-row: 3;
grid-column: 2;
}
#map-3-3{
grid-row: 3;
grid-column: 3;
}
#map-3-4{
grid-row: 3;
grid-column: 4;
}
#map-3-5{
grid-row: 3;
grid-column: 5;
}
#map-3-6{
grid-row: 3;
grid-column: 6;
}
#map-3-7{
grid-row: 3;
grid-column: 7;
}
#map-4-1{
grid-row: 4;
grid-column: 1;
}
#map-4-2{
grid-row: 4;
grid-column: 2;
}
#map-4-3{
grid-row: 4;
grid-column: 3;
}
#map-4-4{
grid-row: 4;
grid-column: 4;
}
#map-4-5{
grid-row: 4;
grid-column: 5;
}
#map-4-6{
grid-row: 4;
grid-column: 6;
}
#map-4-7{
grid-row: 4;
grid-column: 7;
}
#map-5-1{
grid-row: 5;
grid-column: 1;
}
#map-5-2{
grid-row: 5;
grid-column: 2;
}
#map-5-3{
grid-row: 5;
grid-column: 3;
}
#map-5-4{
grid-row: 5;
grid-column: 4;
}
#map-5-5{
grid-row: 5;
grid-column: 5;
}
#map-5-6{
grid-row: 5;
grid-column: 6;
}
#map-5-7{
grid-row: 5;
grid-column: 7;
}
#map-6-1{
grid-row: 6;
grid-column: 1;
}
#map-6-2{
grid-row: 6;
grid-column: 2;
}
#map-6-3{
grid-row: 6;
grid-column: 3;
}
#map-6-4{
grid-row: 6;
grid-column: 4;
}
#map-6-5{
grid-row: 6;
grid-column: 5;
}
#map-6-6{
grid-row: 6;
grid-column: 6;
}
#map-6-7{
grid-row: 6;
grid-column: 7;
}
#map-7-1{
grid-row: 7;
grid-column: 1;
}
#map-7-2{
grid-row: 7;
grid-column: 2;
}
#map-7-3{
grid-row: 7;
grid-column: 3;
}
#map-7-4{
grid-row: 7;
grid-column: 4;
}
#map-7-5{
grid-row: 7;
grid-column: 5;
}
#map-7-6{
grid-row: 7;
grid-column: 6;
}
#map-7-7{
grid-row: 7;
grid-column: 7;
}
This page was last modified on 29 October 2024, at 20:31. (4 days ago)