Template:Franchise/style.css: Difference between revisions
Content deleted Content added
ESUFranchise (talk | contribs) No edit summary |
ESUFranchise (talk | contribs) No edit summary |
||
(20 intermediate revisions by the same user not shown) | |||
Line 6: | Line 6: | ||
margin: 0 0 1em 1em; |
margin: 0 0 1em 1em; |
||
padding: 1em; |
padding: 1em; |
||
width: |
width: 280px; |
||
} |
} |
||
Line 13: | Line 13: | ||
font-weight: 900; |
font-weight: 900; |
||
font-style: italic; |
font-style: italic; |
||
background: #00f; |
|||
color: #fff; |
|||
border-radius: 3.25em; |
|||
margin-bottom: .2em; |
|||
} |
|||
.infobox-image { |
|||
⚫ | |||
height: auto; |
|||
margin: 0 auto; |
|||
margin-bottom: .2em; |
|||
border-radius: .75em; |
|||
overflow: hidden; |
|||
} |
|||
.infobox-image img { |
|||
width: 100%; |
|||
height: auto; |
|||
object-fit: cover; |
|||
transition: transform .4s; |
|||
} |
|||
.infobox-image:hover img { |
|||
transform: scale(1.15); |
|||
transform-origin: 50% 50%; |
|||
} |
} |
||
Line 18: | Line 43: | ||
display: flex; |
display: flex; |
||
justify-content: space-between; |
justify-content: space-between; |
||
border-bottom: 1px solid #aaa; |
|||
⚫ | |||
padding: .2em; |
|||
} |
|||
.last-row { |
|||
border-bottom: none; |
|||
} |
} |
||
Line 27: | Line 56: | ||
.infobox-label { |
.infobox-label { |
||
width: |
width: 35%; |
||
} |
} |
||
.infobox-data { |
.infobox-data { |
||
width: |
width: 65%; |
||
} |
|||
@media screen and (max-width: 768px) { |
|||
.infobox { |
|||
width: 240px; |
|||
padding: .35em; |
|||
margin: 0 auto; |
|||
} |
|||
.infobox-image { |
|||
width: 180px; |
|||
} |
|||
} |
} |
Latest revision as of 23:36, 10 October 2023
.infobox {
background: #eee;
border: 1px solid #aaa;
border-radius: .75em;
float: right;
margin: 0 0 1em 1em;
padding: 1em;
width: 280px;
}
.infobox-header {
text-align: center;
font-weight: 900;
font-style: italic;
background: #00f;
color: #fff;
border-radius: 3.25em;
margin-bottom: .2em;
}
.infobox-image {
width: 220px;
height: auto;
margin: 0 auto;
margin-bottom: .2em;
border-radius: .75em;
overflow: hidden;
}
.infobox-image img {
width: 100%;
height: auto;
object-fit: cover;
transition: transform .4s;
}
.infobox-image:hover img {
transform: scale(1.15);
transform-origin: 50% 50%;
}
.infobox-row {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #aaa;
padding: .2em;
}
.last-row {
border-bottom: none;
}
.infobox-label, .infobox-data {
text-align: left;
}
.infobox-label {
width: 35%;
}
.infobox-data {
width: 65%;
}
@media screen and (max-width: 768px) {
.infobox {
width: 240px;
padding: .35em;
margin: 0 auto;
}
.infobox-image {
width: 180px;
}
}