Template
Collapsible Map/styles.css
From Dogcraft Wiki
No edit summary |
No edit summary |
||
(2 intermediate revisions by the same user not shown) | |||
Line 25: | Line 25: | ||
.mw-collapsed #collapsible-container-header .fa-chevron-down{ | .mw-collapsed #collapsible-container-header .fa-chevron-down{ | ||
display: inline; | display: inline; | ||
} | } | ||
Line 50: | Line 45: | ||
width: 100%; | width: 100%; | ||
margin: auto; | margin: auto; | ||
border-radius: 10px; | border-bottom-left-radius: 10px; | ||
border-bottom-right-radius: 10px; | |||
line-height: 0; | line-height: 0; | ||
font-family: 'Nunito'; | font-family: 'Nunito'; | ||
overflow: hidden; | |||
aspect-ratio: 1/1; | |||
} | } | ||
Line 61: | Line 59: | ||
object-position: top; | object-position: top; | ||
display: block; | display: block; | ||
} | } | ||
Line 150: | Line 146: | ||
.map-grid-bottom-right img{ | .map-grid-bottom-right img{ | ||
border-bottom-right-radius: 10px !important; | border-bottom-right-radius: 10px !important; | ||
} | } |
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;
}