| , no classes). But bootstrap.css
has both its own reset (td,th{padding:0}) and .table component rules whose
selector lists also match bare th/td -- e.g. "th, .table > tbody > tr > th
{ padding: 8px; ... }" matches every plain | too, not just .table ones.
Its AIOM output loads after main.css, so at equal specificity (both are
bare element selectors) it wins and zeroes the padding main.css intended.
Scoping to "table td"/"table th" gives this a higher specificity than any
of those bare-element selectors, so it wins regardless of load order. */
table td,
table th {
padding: 0.75em;
vertical-align: middle;
}
/* --- Hero section ------------------------------------------------------- */
/* tpl/basic*.inc only outputs the markup at all when
heroImage() resolves an image (the page's own basic_page_hero/crop_image,
or falling back to the extranet root's) -- pages with neither render no
hero section, rather than an empty banner. Sizing below only applies to
the with-image case; width/max-width/margin restated explicitly rather
than relying on the generic section{} rule elsewhere.
The image itself is a real ![]() (tpl/basic*.inc), not a background --
gives it genuine alt text (the Pageimage's own ->description) rather than
a CSS string, and native lazy-loading. .hero's own background is just a
placeholder shown while that image loads. */
.hero {
height: 240px;
width: 100%;
max-width: 86.250em;
margin: 0 auto;
border-radius: 4px;
overflow: hidden;
background: linear-gradient(135deg, #114B5F, #1696C7);
}
.hero__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
@media screen and (max-width: 680px) {
.hero {
height: 160px;
border-radius: 0;
}
}
/* --- Header: logo size + sign-out button -------------------------------- */
/* Sign-out styled as an actual button.
Selector must carry the full .language--select ul li a chain plus the new
class: the legacy .language--select ul li a{color:#333;padding:1em;
line-height:42px} is 1 class + 3 elements, so a bare .logout--btn (1 class,
0 elements) TIES on class count and then loses on element count -- which is
what left the label black and gave the button its tall shape (padding:1em
on top of line-height:42px). Qualified below it wins outright. */
.language--select ul li a.logout--btn {
display: inline-block;
background: #1696C7;
color: #fff;
border: 1px solid #1696C7;
border-radius: 3px;
padding: .45em 1.1em;
font-weight: 700;
font-size: .875em;
line-height: 1.4;
text-decoration: none;
transition: background .2s, border-color .2s;
}
/* Legacy .language--select ul li:hover a (2 class-ish + 3 elements) sets
color:#fff on hover, so the chain needs the class to outrank it here too. */
.language--select ul li a.logout--btn:hover,
.language--select ul li a.logout--btn:focus,
.language--select ul li:hover a.logout--btn {
background: #114B5F;
border-color: #114B5F;
color: #fff;
}
/* li:hover otherwise paints the whole row #1696c7 behind the button. */
.language--select ul li:hover {
background: transparent;
}
@media screen and (max-width: 680px) {
/* Smaller logo: main.css takes it 80px -> 60px at 1240px and no further.
width/object-fit are essential, not decoration -- a later main.css rule
sets .logo--block img{width:400px;max-width:100%;height:auto}, so
constraining height alone left that explicit 400px width in place and
stretched the logo out of proportion. */
.logo--block img {
height: 44px;
width: auto;
max-width: 100%;
object-fit: contain;
}
/* Center the sign-out button: .language--select and its ul are both
float:right in main.css, which otherwise pins it to the right edge. */
.login--bar,
.language--select,
.language--select ul {
float: none;
width: 100%;
text-align: center;
}
.language--select ul li {
float: none;
display: inline-block;
}
/* bootstrap.css's .row{margin:0 -15px} pairs with ITS column padding, but
the columns here are Foundation's (.columns), and .right-side carries
its own padding on top -- so on narrow screens the negative margins
pushed content past the viewport and produced a horizontal scrollbar.
Harmless to drop: every column is full-width at this breakpoint. */
.row {
margin-left: 0;
margin-right: 0;
}
}
|