Template
Collapsible Map/styles.css
From Dogcraft Wiki
No edit summary |
No edit summary |
||
Line 50: | Line 50: | ||
font-family: 'Nunito'; | font-family: 'Nunito'; | ||
overflow: hidden; | overflow: hidden; | ||
aspect-ratio: 1/1; | |||
} | } | ||
Latest revision as of 16:15, 31 October 2024
#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;
}
.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-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
line-height: 0;
font-family: 'Nunito';
overflow: hidden;
aspect-ratio: 1/1;
}
#outer-map-container img{
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
object-position: top;
display: block;
}
#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;
}