Module:ScopeBox/styles.css: Difference between revisions
From Amaranth Legacy, available at amaranth-legacy.community
More actions
Content deleted Content added
Tesinormed (talk | contribs) No edit summary |
Tesinormed (talk | contribs) No edit summary |
||
| Line 1: | Line 1: | ||
.template-ScopeBox { |
.template-ScopeBox { |
||
/* flexbox */ |
|||
display: flex; |
display: flex; |
||
flex-direction: row; |
flex-direction: row; |
||
flex-wrap: nowrap; |
flex-wrap: nowrap; |
||
align-items: center; |
align-items: center; |
||
| ⚫ | |||
/* fill the entire width of the container */ |
/* fill the entire width of the container */ |
||
width: 100%; |
width: 100%; |
||
/* center the text */ |
|||
| ⚫ | |||
/* background image */ |
/* background image */ |
||
background-position: left; |
background-position: left; |
||
| Line 18: | Line 16: | ||
.template-ScopeBox a { |
.template-ScopeBox a { |
||
/* make sure this displays correctly */ |
|||
| ⚫ | |||
/* fill the entire width of the container */ |
|||
| ⚫ | |||
/* blur the background */ |
/* blur the background */ |
||
backdrop-filter: blur(3px); |
backdrop-filter: blur(3px); |
||
| Line 27: | Line 21: | ||
font-family: var(--font-family-serif) !important; |
font-family: var(--font-family-serif) !important; |
||
font-size: 275% !important; |
font-size: 275% !important; |
||
} |
|||
.template-ScopeBox div { |
|||
| ⚫ | |||
| ⚫ | |||
} |
} |
||
Revision as of 23:26, February 2, 2025
.template-ScopeBox {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
text-align: center;
/* fill the entire width of the container */
width: 100%;
/* background image */
background-position: left;
background-clip: padding-box;
background-color: transparent;
background-repeat: no-repeat;
background-size: cover;
}
.template-ScopeBox a {
/* blur the background */
backdrop-filter: blur(3px);
/* font settings */
font-family: var(--font-family-serif) !important;
font-size: 275% !important;
}
.template-ScopeBox div {
display: inline-block;
width: 100%;
}
.template-ScopeBox img {
max-width: 100%;
height: 100%;
}
.template-ScopeBox > :first-child,
.template-ScopeBox > :last-child {
flex: 0 1 auto;
margin: 0 var(--space-sm);
}
.template-ScopeBox > :nth-child(2) {
flex: 1 1 fit-content;
}