Template:Banner-main/styles.css: Difference between revisions

From Gulf States Flood Help
Created page with ".sol-main-banner { background-color: yellow; width: 100%; height: auto; }"
 
No edit summary
 
(103 intermediate revisions by the same user not shown)
Line 1: Line 1:
.sol-main-banner {
.sol-main-banner {
background-color: yellow;
width: 100%;
width: 100%;
height: auto;
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)
    ;
}
}

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)
    ;
}