mirror of
https://github.com/silverstripe/silverstripe-simple
synced 2024-06-26 14:29:25 +02:00
275f5ba33d
Minor clean-up of consistency for tablet main menu styles Added multilevel subnavigation in sidebar for internal pages Updated search styling and positioning Changed header color and link color to provide more consistency for the theme Footer links to red on hover and site name to link to homepage Search results page styling updated
731 lines
15 KiB
CSS
731 lines
15 KiB
CSS
/** ----------------------------------------------------------
|
|
*
|
|
* Contains the main layout of the page and the individual styles.
|
|
* Acts as the main stylesheet for theme.
|
|
*
|
|
* Include your notes or table of contents below....
|
|
* Include color hex's or values of your grid
|
|
*
|
|
* @author Your Name <email@silverstripe.com>
|
|
* ------------------------------------------------------- */
|
|
|
|
/* MAIN LAYOUT */
|
|
body {
|
|
margin: 0;
|
|
background: #ededed;
|
|
min-width: 240px;
|
|
-webkit-text-size-adjust: none;
|
|
}
|
|
.ie7 body,
|
|
.ie8 body {
|
|
min-width: 860px
|
|
}
|
|
.main {
|
|
background: #fff;
|
|
padding: 40px 0 60px;
|
|
min-height: 300px;
|
|
}
|
|
.inner {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
padding: 0 30px;
|
|
}
|
|
.ie6 .inner {
|
|
width: 960px
|
|
}
|
|
.content-container {
|
|
float: right;
|
|
width: 73%;
|
|
}
|
|
.no-sidebar .content-container {
|
|
float: left;
|
|
width:100%;
|
|
}
|
|
aside {
|
|
float: left;
|
|
width: 23%;
|
|
margin-top: 12px;
|
|
}
|
|
.no-sidebar aside {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/* HEADER */
|
|
.header {
|
|
background: #161616
|
|
}
|
|
.header .inner {
|
|
padding-top: 45px;
|
|
position: relative;
|
|
min-height: 72px;
|
|
}
|
|
|
|
/* Brand */
|
|
header .brand, header .brand:hover {
|
|
float: left;
|
|
color: #fff;
|
|
display: inline-block;
|
|
}
|
|
.brand h1 {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 48px;
|
|
font-family: "HelveticaNeueLTPro-Bd", "Helvetica Neue LT Pro Bold", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue LT Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
font-stretch: normal;
|
|
line-height: 1em;
|
|
}
|
|
.brand p {
|
|
color: #888;
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
/* Search form */
|
|
.search-bar {
|
|
position: absolute;
|
|
right: 28px;
|
|
top: 32px;
|
|
}
|
|
.search-bar #Search {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.search-bar form input.text {
|
|
width: 155px;
|
|
padding: 5px 34px 5px 10px;
|
|
color: #888;
|
|
margin: 0;
|
|
border: none;
|
|
border-radius: 14px;
|
|
background: #fff;
|
|
}
|
|
|
|
.search-bar form input.action {
|
|
font-size: 14px;
|
|
position: absolute;
|
|
right: 0;
|
|
top: -1px;
|
|
cursor: pointer;
|
|
border: none;
|
|
padding: 5px;
|
|
background: none;
|
|
font-family: 'WebSymbolsRegular';
|
|
color: #848484;
|
|
border-radius: 0;
|
|
margin: 0;
|
|
}
|
|
.search-bar form input.active,
|
|
.search-bar form input.action:hover {
|
|
color: #000
|
|
}
|
|
.search-bar form input:focus,
|
|
.header textarea:focus {
|
|
outline: none
|
|
}
|
|
.search-dropdown-icon {
|
|
display: none
|
|
}
|
|
|
|
|
|
|
|
/* NAVIGATION */
|
|
|
|
/* Primary navigation */
|
|
.header .primary ul {
|
|
/*float: right; margin:23px -12px 0 0;*/ position:absolute; bottom:0; right:17px;
|
|
}
|
|
.header .primary li {
|
|
float: left;
|
|
padding-bottom: 14px;
|
|
margin: 0 5px;
|
|
position: relative;
|
|
white-space: nowrap;
|
|
}
|
|
.header .primary li a {
|
|
color: #888;
|
|
font-size: 15px;
|
|
font-family: Helvetica, Arial, sans-serif;
|
|
padding: 6px 8px;
|
|
font-weight: bold;
|
|
display: block;
|
|
}
|
|
.header .primary li a:hover {
|
|
color: #fff
|
|
}
|
|
.header .primary li.section a,
|
|
.header .primary li.current a {
|
|
color: #fff
|
|
}
|
|
.header .primary li.section:after,
|
|
.header .primary li.current:after {
|
|
content: '}';
|
|
display: block;
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: -7px;
|
|
bottom: -6px;
|
|
font-family: 'WebSymbolsRegular';
|
|
font-size: 30px;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 20px;
|
|
}
|
|
|
|
|
|
/* When navigation and logo overlap tablet-nav is initialized */
|
|
.tablet-nav .brand p {
|
|
margin-bottom: 0
|
|
}
|
|
.tablet-nav .header .inner {
|
|
padding-top: 20px
|
|
}
|
|
.tablet-nav .header .primary ul {
|
|
float: left;
|
|
clear: both;
|
|
position: relative;
|
|
margin: 20px 0 0 -13px;
|
|
white-space: nowrap;
|
|
right: auto;
|
|
}
|
|
.tablet-nav .header .primary ul li {
|
|
white-space: nowrap;
|
|
}
|
|
.tablet-nav .header .primary ul li a {
|
|
-moz-transition: none;
|
|
-webkit-transition: none;
|
|
transition: none;
|
|
}
|
|
.tablet-nav .footer .right {
|
|
float: left;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Secondary navigation */
|
|
.main .secondary h3 {
|
|
font-size: 20px;
|
|
color: #b8b7b7;
|
|
margin: 0 0 8px 0;
|
|
font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif;
|
|
font-weight: normal;
|
|
}
|
|
.main .secondary {
|
|
border-bottom: 1px solid #e5e5e5
|
|
}
|
|
.main .secondary ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.main .secondary li {
|
|
border-top: 1px solid #e5e5e5;
|
|
position: relative;
|
|
list-style-type: none;
|
|
margin-bottom: 0;
|
|
}
|
|
.main .secondary li .arrow {
|
|
color: #b80000;
|
|
padding-right: 5px;
|
|
display: block;
|
|
font-size: 15px;
|
|
line-height: 20px;
|
|
position: absolute;
|
|
left: 2px;
|
|
top: 7px;
|
|
-moz-transition: 0.2s;
|
|
-webkit-transition: 0.2s;
|
|
transition: 0.2s;
|
|
}
|
|
.main .secondary li a:hover .arrow {
|
|
left: 6px
|
|
}
|
|
.main .secondary li a {
|
|
padding: 10px 0;
|
|
display: block;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
font-size: 11px;
|
|
color: #333;
|
|
line-height: 17px;
|
|
border-bottom: none;
|
|
font-family: 'Lucida Sans', 'Lucida Grande', Arial, Helvetica, sans-serif;
|
|
}
|
|
.main .secondary li .text {
|
|
padding-left: 28px;
|
|
display: block;
|
|
}
|
|
.main .secondary li.current a.current {
|
|
color: #b80000;
|
|
}
|
|
.main .secondary li.section,
|
|
.main .secondary li.current {
|
|
background-color: #f1f1f1
|
|
}
|
|
.main .secondary li.section a,
|
|
.main .secondary li.current a {
|
|
color: #000
|
|
}
|
|
.main .secondary h3 {
|
|
color: #aaa;
|
|
}
|
|
|
|
/* Secondary navigation 2-5 levels deep */
|
|
.main .secondary ul ul {
|
|
display: none;
|
|
}
|
|
.secondary ul li.current ul,
|
|
.secondary ul li.section ul { /* Only show child pages from selected parent */
|
|
display: block;
|
|
}
|
|
.secondary li.current ul ul {
|
|
display: none;
|
|
}
|
|
.main .secondary ul ul li a { padding-left: 10px; } /* Indent all sidebar navigation levels*/
|
|
.main .secondary ul ul li a .arrow { left: 12px; }
|
|
.main .secondary ul ul li a:hover .arrow { left: 16px; }
|
|
|
|
.main .secondary ul ul ul li a { padding-left: 20px; }
|
|
.main .secondary ul ul ul li a .arrow { left: 22px; }
|
|
.main .secondary ul ul ul li a:hover .arrow { left: 26px; }
|
|
|
|
.main .secondary ul ul ul ul li a { padding-left: 30px; }
|
|
.main .secondary ul ul ul ul li a .arrow { left: 32px; }
|
|
.main .secondary ul ul ul ul li a:hover .arrow { left: 36px; }
|
|
|
|
.main .secondary ul ul ul ul ul li a { padding-left: 40px; }
|
|
.main .secondary ul ul ul ul ul li a .arrow { left: 32px; }
|
|
.main .secondary ul ul ul ul ul li a:hover .arrow { left: 36px; }
|
|
|
|
.main .secondary li a:hover,
|
|
.main .secondary li.section a:hover,
|
|
.main .secondary li.current a:hover {
|
|
color: #b80000;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* MIXED */
|
|
header:after,
|
|
.main:after,
|
|
#Root:after,
|
|
.search-bar:after,
|
|
header .inner:after,
|
|
footer:after {
|
|
height: 0;
|
|
content: ".";
|
|
display: block;
|
|
clear: both;
|
|
visibility: hidden;
|
|
}
|
|
.search-bar form input.action,
|
|
.header .primary li a,
|
|
.footer a {
|
|
-moz-transition: color 0.2s;
|
|
-webkit-transition: color 0.2s;
|
|
transition: color 0.2s;
|
|
}
|
|
.footer a.brand { color: #333; margin-left: 0; }
|
|
.footer a.brand:hover { color: #B80000; }
|
|
body h1 span.amp {
|
|
font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia;
|
|
font-style: italic;
|
|
}
|
|
|
|
|
|
/* PAGE SPECIFIC LAYOUT */
|
|
/* Homepage */
|
|
|
|
/* Search Results */
|
|
.typography .searchResults h1 {
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
border-bottom: none;
|
|
} /* TODO: Test search results styles */
|
|
.searchResults p.searchQuery {
|
|
margin-bottom: 10px;
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
}
|
|
.searchResults ul#SearchResults {
|
|
padding: 0;
|
|
margin-left: 0;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
}
|
|
.searchResults ul#SearchResults li {
|
|
border-top: 1px solid #e5e5e5;
|
|
padding: 20px 0;
|
|
list-style-type: none;
|
|
}
|
|
.searchResults ul#SearchResults p {
|
|
margin-bottom: 10px
|
|
}
|
|
.searchResults #PageNumbers {
|
|
border-top: 1px solid #e5e5e5;
|
|
padding-top: 20px;
|
|
}
|
|
.searchResults #PageNumbers a {
|
|
padding: 0 5px
|
|
}
|
|
.searchResults #PageNumbers .pagination {
|
|
float: left
|
|
}
|
|
.searchResults #PageNumbers p {
|
|
float: right
|
|
}
|
|
.searchResults #PageNumbers .next,
|
|
.searchResults #PageNumbers .prev {
|
|
font-size: 14px
|
|
}
|
|
.searchResults #PageNumbers .next {
|
|
margin-left: 15px
|
|
}
|
|
.searchResults #PageNumbers .prev {
|
|
margin-right: 15px
|
|
}
|
|
|
|
|
|
/* FOOTER */
|
|
.footer {
|
|
color: #999;
|
|
background: #ededed;
|
|
padding: 20px 0;
|
|
font-size: 11px;
|
|
line-height: 22px;
|
|
}
|
|
.footer a {
|
|
color: #999;
|
|
}
|
|
.footer a:hover {
|
|
color: #B90000
|
|
}
|
|
.footer .left {
|
|
float: left;
|
|
color: #000;
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
}
|
|
.footer .right {
|
|
float: right;
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
}
|
|
.footer span {
|
|
padding: 0 3px;
|
|
color: #bbb;
|
|
}
|
|
.footer .primary,
|
|
.footer .primary ul {
|
|
display: inline;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.footer .primary li {
|
|
display: inline
|
|
}
|
|
.ie6 .footer .primary li,
|
|
.ie7 .footer .primary li {
|
|
display: inline;
|
|
zoom: 1;
|
|
margin-right: 10px;
|
|
}
|
|
.footer .primary li:after {
|
|
padding: 0 3px 0 5px;
|
|
content: '/';
|
|
color: #999;
|
|
}
|
|
.footer .primary li:last-child:after {
|
|
content: ''
|
|
}
|
|
.footer .arrow {
|
|
padding: 0 8px 0 5px;
|
|
color: #b80000;
|
|
font-size: 13px;
|
|
}
|
|
.footer .primary .nav-open-button {
|
|
display: none;
|
|
}
|
|
.footer .primary ul#nav .menu-bubble-arrow {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
/* DEVICE & RESPONSIVE LAYOUT */
|
|
.header .nav-open-button {
|
|
display: none
|
|
}
|
|
#media-query-trigger {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
@media only screen and (max-width: 960px) {
|
|
.content img {
|
|
max-width: 97%;
|
|
height: auto;
|
|
}
|
|
.header .primary ul {
|
|
margin-left: -12px;
|
|
-webkit-padding-start: 0px;
|
|
}
|
|
}
|
|
|
|
/* when changing the breakpoint below, change it ito the same value in the script.js file as well */
|
|
@media only screen and (max-width: 640px) {
|
|
body {
|
|
max-width: 640px
|
|
}
|
|
#media-query-trigger {
|
|
visibility: visible
|
|
}
|
|
.brand {
|
|
float: none;
|
|
display: inline-block;
|
|
margin-left: 22px;
|
|
margin-bottom: 22px;
|
|
}
|
|
.brand h1 {
|
|
font-size: 40px
|
|
}
|
|
.brand h1 {
|
|
padding-right: 80px
|
|
}
|
|
.header {
|
|
padding: 0px
|
|
}
|
|
.header .inner {
|
|
padding: 20px 0 0 0;
|
|
min-height: 0;
|
|
}
|
|
.header .primary .nav-open-button {
|
|
z-index: 100;
|
|
width: 20px;
|
|
height: 20px;
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 32px;
|
|
display: block;
|
|
cursor: pointer;
|
|
font-family: 'WebSymbolsRegular';
|
|
font-size: 20px;
|
|
color: #ededed;
|
|
}
|
|
.header .primary ul {
|
|
z-index: 10;
|
|
position: relative;
|
|
display: none;
|
|
float: left;
|
|
margin: 0 !important;
|
|
padding: 0;
|
|
white-space: normal;
|
|
width: 100%;
|
|
}
|
|
.header .primary ul li {
|
|
width: 100%;
|
|
margin: 0 !important;
|
|
float: none;
|
|
background: none;
|
|
position: relative;
|
|
text-shadow: 0 1px #fff;
|
|
}
|
|
.header .primary ul li:after {
|
|
content: '\003e';
|
|
display: block;
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 0px;
|
|
font-family: 'WebSymbolsRegular';
|
|
font-size: 14px;
|
|
color: #999;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
line-height: 38px;
|
|
}
|
|
.header .primary ul li a,
|
|
.header .primary ul li.current a,
|
|
.header .primary ul li.section a {
|
|
padding: 10px 0 10px 22px;
|
|
font-weight: bold;
|
|
border-bottom: 1px solid #bbb;
|
|
color: #434343;
|
|
border-radius: 0 !important;
|
|
background: #e7e7e7 !important;
|
|
}
|
|
.header .primary ul li a:hover {
|
|
color: inherit
|
|
}
|
|
.header .primary li.section:after,
|
|
.header .primary li.current:after {
|
|
display: none;
|
|
}
|
|
.tablet-nav .header nav.primary ul li {
|
|
padding: 0;
|
|
}
|
|
|
|
/* Search Form */
|
|
.search-bar {
|
|
width: 100%;
|
|
position: relative;
|
|
top: 0;
|
|
right: 0;
|
|
display: none;
|
|
padding: 20px 0;
|
|
margin: 80px 0 0;
|
|
background-color: #E7E7E7;
|
|
}
|
|
.search-dropdown-icon {
|
|
display: block;
|
|
cursor: pointer;
|
|
width: 20px;
|
|
height: 20px;
|
|
position: absolute;
|
|
right: 60px;
|
|
top: 34px;
|
|
font-family: 'WebSymbolsRegular';
|
|
font-size: 20px;
|
|
color: #ededed;
|
|
text-align: center;
|
|
line-height: 20px;
|
|
}
|
|
.search-bar form {
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
.search-bar form fieldset {
|
|
padding: 0 18px;
|
|
left: 0;
|
|
right: 0;
|
|
position: relative;
|
|
}
|
|
.search-bar div.field {
|
|
margin-bottom: 0
|
|
}
|
|
.search-bar form input.text {
|
|
width: 93%;
|
|
padding: 8px 7% 8px 0;
|
|
text-indent: 15px;
|
|
position: relative;
|
|
display: block;
|
|
right: 0;
|
|
left: 0;
|
|
border: 1px solid #e5e5e5;
|
|
background: #fff;
|
|
font-size: 17px;
|
|
}
|
|
.search-bar form input.action {
|
|
right: 24px;
|
|
top: 2px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* Main Content */
|
|
.main {
|
|
padding: 20px 0 45px;
|
|
}
|
|
.content-container,
|
|
aside {
|
|
width: 100%
|
|
}
|
|
.typography h1 {
|
|
font-size: 30px;
|
|
line-height:35px;
|
|
margin-bottom: 15px;
|
|
padding-bottom: 10px;
|
|
}
|
|
.typography p {
|
|
font-size: 14px;
|
|
line-height: 23px;
|
|
}
|
|
p.intro {
|
|
font-size: 19px;
|
|
line-height: 27px;
|
|
}
|
|
.main .inner {
|
|
padding: 0 22px
|
|
}
|
|
/* Secondry Nav */
|
|
.secondary li a {
|
|
line-height: 24px
|
|
}
|
|
.secondary li .arrow {
|
|
line-height: 26px
|
|
}
|
|
/* Footer */
|
|
.footer .right {
|
|
float: left;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Based on HTML5 boilerplate print styles */
|
|
@media print {
|
|
* {
|
|
background: transparent !important;
|
|
color: black !important;
|
|
box-shadow: none !important;
|
|
text-shadow: none !important;
|
|
filter: none !important;
|
|
-ms-filter: none !important;
|
|
}
|
|
a,
|
|
a:visited {
|
|
text-decoration: underline
|
|
}
|
|
a[href]:after {
|
|
content: " (" attr(href) ")";
|
|
}
|
|
abbr[title]:after {
|
|
content: " (" attr(title) ")";
|
|
}
|
|
|
|
/*
|
|
* Don't show links for images, or javascript/internal links
|
|
*/
|
|
|
|
.ir a:after,
|
|
a[href^="javascript:"]:after,
|
|
a[href^="#"]:after {
|
|
content: "";
|
|
}
|
|
|
|
thead {
|
|
display: table-header-group
|
|
}
|
|
tr,
|
|
img {
|
|
page-break-inside: avoid
|
|
}
|
|
img {
|
|
max-width: 100% !important
|
|
}
|
|
pre,
|
|
blockquote {
|
|
border: 1px solid #999;
|
|
page-break-inside: avoid;
|
|
}
|
|
@page {
|
|
margin: 0.5cm;
|
|
}
|
|
p,
|
|
h2,
|
|
h3 {
|
|
orphans: 3;
|
|
widows: 3;
|
|
}
|
|
|
|
h2,
|
|
h3 {
|
|
page-break-after: avoid;
|
|
}
|
|
|
|
/* Simple theme custom print styles */
|
|
.header,
|
|
.footer,
|
|
.nav-open-button,
|
|
.search-bar,
|
|
.search-dropdown-icon,
|
|
nav.primary {
|
|
display: none;
|
|
}
|
|
} |