Template:Banner-main/styles.css: Difference between revisions
No edit summary |
No edit summary |
||
| (61 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
.sol-main-banner { | .sol-main-banner { | ||
width: 100%; | width: 100%; | ||
height: auto; | height: auto; | ||
margin: 0; | margin: 0; | ||
margin-bottom: 1em; | |||
padding: 0; | padding: 0; | ||
border: 1px solid #ddd; | border: 1px solid #ddd; | ||
border-radius: 4px; | border-radius: 4px; | ||
position: relative; | position: relative; | ||
overflow: hidden; | |||
} | } | ||
.sol-main-banner img { | .sol-main-banner img { | ||
max-width: 948px; | max-width: 948px; | ||
height: 100%; | height: 100%; | ||
opacity: 0.5; | |||
} | } | ||
.sol-main-banner-title { | .sol-main-banner-title { | ||
position: absolute; | position: absolute; | ||
top: | top: 30px; | ||
left: - | left: 30px; | ||
} | |||
.sol-main-banner-title img { | |||
opacity: 1; | |||
} | } | ||
.sol-main-banner-tagline { | .sol-main-banner-tagline { | ||
| Line 28: | Line 33: | ||
color: #333; | color: #333; | ||
text-shadow: | text-shadow: | ||
1px 1px | 1px 1px 4px white, | ||
0 0 1em #eee, | 0 0 1em #eee, | ||
0 0 0.2em | 0 0 0.2em #ddd; | ||
} | } | ||
.highlight { | |||
font-family: Merriweather; | |||
color: #F05E26; | |||
} | |||
.sol-main-banner-block { | .sol-main-banner-block { | ||
position: absolute; | position: absolute; | ||
top: | top: 2em; | ||
right: 1em; | right: 1em; | ||
} | |||
.sol-main-banner-button { | |||
width: 260px; | |||
margin-bottom: 1em; | |||
padding: 0; | |||
font-size: 1.5em; | |||
} | |||
.sol-main-banner-button .mw-ui-button { | |||
background-color: #eee; | |||
padding: 0.5em 1em; | |||
width: 100%; | |||
border-radius: 4px; | |||
font-weight: 600; | |||
} | |||
.sol-main-banner-button .mw-ui-button:hover { | |||
background-color: white; | |||
box-shadow: | |||
0 1px 1px rgba(0, 0, 0, 0.075), | |||
0 2px 2px rgba(0, 0, 0, 0.075), | |||
0 4px 4px rgba(0, 0, 0, 0.075), | |||
0 8px 8px rgba(0, 0, 0, 0.075), | |||
0 16px 16px rgba(0, 0, 0, 0.075) | |||
; | |||
} | } | ||
Latest revision as of 08:00, 3 February 2025
.sol-main-banner {
width: 100%;
height: auto;
margin: 0;
margin-bottom: 1em;
padding: 0;
border: 1px solid #ddd;
border-radius: 4px;
position: relative;
overflow: hidden;
}
.sol-main-banner img {
max-width: 948px;
height: 100%;
opacity: 0.5;
}
.sol-main-banner-title {
position: absolute;
top: 30px;
left: 30px;
}
.sol-main-banner-title img {
opacity: 1;
}
.sol-main-banner-tagline {
position: absolute;
bottom: 32px;
left: 40px;
font-size: 1.8em;
font-weight: 700;
line-height: 1.2em;
font-family: Merriweather;
color: #333;
text-shadow:
1px 1px 4px white,
0 0 1em #eee,
0 0 0.2em #ddd;
}
.highlight {
font-family: Merriweather;
color: #F05E26;
}
.sol-main-banner-block {
position: absolute;
top: 2em;
right: 1em;
}
.sol-main-banner-button {
width: 260px;
margin-bottom: 1em;
padding: 0;
font-size: 1.5em;
}
.sol-main-banner-button .mw-ui-button {
background-color: #eee;
padding: 0.5em 1em;
width: 100%;
border-radius: 4px;
font-weight: 600;
}
.sol-main-banner-button .mw-ui-button:hover {
background-color: white;
box-shadow:
0 1px 1px rgba(0, 0, 0, 0.075),
0 2px 2px rgba(0, 0, 0, 0.075),
0 4px 4px rgba(0, 0, 0, 0.075),
0 8px 8px rgba(0, 0, 0, 0.075),
0 16px 16px rgba(0, 0, 0, 0.075)
;
}