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) m Protected "Module:ScopeBox/styles.css" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite)) [cascading] |
||
| (27 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
.template-ScopeBox { |
|||
@media screen { |
|||
/* background image */ |
|||
.scope-box { |
|||
background-position: left center; |
|||
display: inline-block; |
|||
background-clip: padding-box; |
|||
background-color: transparent; |
|||
backdrop-filter: blur(6px); |
|||
background-repeat: no-repeat; |
|||
border: var(--border-color) 1px solid; |
|||
background-size: cover; |
|||
box-shadow: 0 0 10px black; |
|||
/* fill the entire width of the container */ |
|||
width: 100%; |
|||
background-position: left; |
|||
} |
|||
background-clip: padding-box; |
|||
background-color: transparent; |
|||
.template-ScopeBox-content { |
|||
} |
|||
display: flex; |
|||
flex-direction: row; |
|||
.scope-box-ambrosia { |
|||
flex-wrap: nowrap; |
|||
background-image: url("https://amaranth-legacy.yttrium.systems/NebulaAddition4.png"); |
|||
align-items: center; |
|||
} |
|||
/* centered text */ |
|||
text-align: center; |
|||
.scope-box-cosmoria { |
|||
/* blur the background */ |
|||
background-image: url("https://amaranth-legacy.yttrium.systems/NebulaAddition3.png"); |
|||
backdrop-filter: blur(4px); |
|||
} |
|||
/* padding */ |
|||
padding: var(--space-sm); |
|||
.scope-box-galvyria { |
|||
} |
|||
background-image: url("https://amaranth-legacy.yttrium.systems/NebulaAddition5.png"); |
|||
} |
|||
/* dynamic resizing of images */ |
|||
.template-ScopeBox-content img { |
|||
.scope-box-vela { |
|||
max-width: 100%; |
|||
background-image: url("https://amaranth-legacy.yttrium.systems/e/e5/Vela-Background.png"); |
|||
height: 100%; |
|||
} |
|||
} |
|||
.scope-box-astralis { |
|||
.template-ScopeBox-content > :first-child, |
|||
background-image: url("https://amaranth-legacy.yttrium.systems/Astralis-Background.png"); |
|||
.template-ScopeBox-content > :last-child { |
|||
} |
|||
flex: 0 1 auto; |
|||
margin: 0 var(--space-sm); |
|||
.scope-box-haven { |
|||
} |
|||
background-image: url("https://amaranth-legacy.yttrium.systems/Amarleg-haven.png"); |
|||
} |
|||
.template-ScopeBox-content > :nth-child(2) { |
|||
flex: 1 1 fit-content; |
|||
.scope-box-aziel { |
|||
/* typography */ |
|||
background-image: url("https://amaranth-legacy.yttrium.systems/Aziel-Background.png"); |
|||
font-family: var(--font-family-serif); |
|||
} |
|||
font-size: 3rem; |
|||
} |
|||
.scope-box-empyrea { |
|||
background-image: url("https://amaranth-legacy.yttrium.systems/Empyrea-Background.png"); |
|||
@media (max-width: 1119px) { |
|||
} |
|||
.template-ScopeBox-content > :nth-child(2) { |
|||
font-size: 2rem; |
|||
.scope-box a { |
|||
display: inline-block; |
|||
/* background: linear-gradient(to right, var(--color-0) 30%, var(--color-1) 50%, 75%, var(--color-2) 100%); */ |
|||
/* background-clip: text; */ |
|||
color: transparent; |
|||
text-align: center; |
|||
font-family: Cinzel; |
|||
font-weight: bold; |
|||
font-size: 300%; |
|||
} |
} |
||
} |
} |
||
Latest revision as of 10:53, September 11, 2025
.template-ScopeBox {
/* background image */
background-position: left center;
background-clip: padding-box;
background-color: transparent;
background-repeat: no-repeat;
background-size: cover;
/* fill the entire width of the container */
width: 100%;
}
.template-ScopeBox-content {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
/* centered text */
text-align: center;
/* blur the background */
backdrop-filter: blur(4px);
/* padding */
padding: var(--space-sm);
}
/* dynamic resizing of images */
.template-ScopeBox-content img {
max-width: 100%;
height: 100%;
}
.template-ScopeBox-content > :first-child,
.template-ScopeBox-content > :last-child {
flex: 0 1 auto;
margin: 0 var(--space-sm);
}
.template-ScopeBox-content > :nth-child(2) {
flex: 1 1 fit-content;
/* typography */
font-family: var(--font-family-serif);
font-size: 3rem;
}
@media (max-width: 1119px) {
.template-ScopeBox-content > :nth-child(2) {
font-size: 2rem;
}
}