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;
}
#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: 100;
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;
}
.map-grid-container{
display: grid;
}
.map-grid-container .inner-map-container{
position: relative;
}
.map-grid-child{
max-width: 166.6666666px;
}
.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-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-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;
}
This page was last modified on 26 March 2024, at 16:47. (24 days ago)