mirror of
https://github.com/silverstripe/silverstripe-simple
synced 2024-06-27 23:09:32 +02:00
df15cd8920
Moved some style declarations from layout to typography so that the cms would pick them up. Moved typography tag to the page.ss before layout is included Changed typography elements to be wrapped in .typography, rather than a layout tag within the Layout page templates. This will mean that a bunch of modules have access to the correct type styling
625 lines
12 KiB
CSS
625 lines
12 KiB
CSS
header:after,
|
|
.main:after,
|
|
#Root:after,
|
|
.search-bar:after,
|
|
header .inner:after,
|
|
footer:after {
|
|
height: 0;
|
|
content: ".";
|
|
display: block;
|
|
clear: both;
|
|
visibility: hidden;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
background: #ededed;
|
|
min-width: 240px;
|
|
-webkit-text-size-adjust: none;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
.ie7 body,
|
|
.ie8 body {
|
|
min-width: 860px
|
|
}
|
|
::-moz-selection {
|
|
background: #b80000;
|
|
color: #fff;
|
|
text-shadow: none;
|
|
}
|
|
::selection {
|
|
background: #b80000;
|
|
color: #fff;
|
|
text-shadow: none;
|
|
}
|
|
a:link {
|
|
-webkit-tap-highlight-color: #b80000
|
|
}
|
|
|
|
.brand {
|
|
float: left;
|
|
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,
|
|
.brand:hover {
|
|
color: #fff
|
|
}
|
|
.brand p {
|
|
color: #888;
|
|
margin-bottom: 22px;
|
|
}
|
|
.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;
|
|
}
|
|
/* Search Form */
|
|
.search-bar {
|
|
position: absolute;
|
|
right: 30px;
|
|
top: 34px;
|
|
}
|
|
.search-dropdown-icon {
|
|
display: none
|
|
}
|
|
.search-bar form fieldset {
|
|
position: relative;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.search-bar form input.text {
|
|
width: 155px;
|
|
padding:6px 35px 6px 10px;
|
|
color: #888;
|
|
margin: 0;
|
|
border: none;
|
|
border-radius: 20px;
|
|
background: #fff;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
.search-bar form input.active {
|
|
color: #000
|
|
}
|
|
.search-bar form input.action {
|
|
font-size: 15px;
|
|
position: absolute;
|
|
right: 3px;
|
|
top: -1px;
|
|
cursor: pointer;
|
|
border: none;
|
|
padding: 5px;
|
|
background: none;
|
|
font-family: 'WebSymbolsRegular';
|
|
color: #848484;
|
|
border-radius:0;
|
|
margin-top:0;
|
|
}
|
|
.search-bar form input.action:hover {
|
|
color: #000
|
|
}
|
|
|
|
#Search {
|
|
padding:0;
|
|
}
|
|
|
|
.search-bar form input:focus,
|
|
.header textarea:focus {
|
|
outline: none
|
|
}
|
|
.header .primary ul {
|
|
/*float: right; margin:23px -12px 0 0;*/ position:absolute; bottom:0; right:17px;
|
|
}
|
|
.header .primary li {
|
|
float: left;
|
|
padding-bottom: 17px;
|
|
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: 28px;
|
|
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 4px -12px;
|
|
white-space: nowrap;
|
|
right: auto;
|
|
}
|
|
.tablet-nav .header .primary ul li {
|
|
margin-bottom: 10px;
|
|
padding-bottom: 0;
|
|
white-space: nowrap;
|
|
}
|
|
.tablet-nav .header .primary ul li a {
|
|
-moz-transition: none;
|
|
-webkit-transition: none;
|
|
transition: none;
|
|
}
|
|
.tablet-nav .header .primary ul li.current a,
|
|
.tablet-nav .header .primary ul li.section a {
|
|
background-color: #525252;
|
|
border-radius: 4px;
|
|
}
|
|
.tablet-nav .header .primary li.section:after,
|
|
.tablet-nav .header .primary li.current:after {
|
|
display: none
|
|
}
|
|
.tablet-nav .footer .right {
|
|
float: left;
|
|
width: 100%;
|
|
}
|
|
.header .nav-open-button {
|
|
display: none
|
|
}
|
|
.inner {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
padding: 0 30px;
|
|
}
|
|
.ie6 .inner {
|
|
width: 960px
|
|
}
|
|
.main {
|
|
background: #fff;
|
|
padding: 50px 0 60px;
|
|
}
|
|
aside {
|
|
float: left;
|
|
width: 23%;
|
|
margin-top: 17px;
|
|
}
|
|
.secondary h3 {
|
|
font-size: 20px;
|
|
color: #b8b7b7;
|
|
margin: 0 0 8px 0;
|
|
}
|
|
.secondary {
|
|
border-bottom: 1px solid #e5e5e5
|
|
}
|
|
.secondary ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.secondary li {
|
|
border-top: 1px solid #e5e5e5;
|
|
position: relative;
|
|
list-style-type: none;
|
|
}
|
|
.secondary li .arrow {
|
|
color: #b80000;
|
|
padding-right: 5px;
|
|
display: block;
|
|
font-size: 15px;
|
|
line-height: 20px;
|
|
position: absolute;
|
|
left: 2px;
|
|
top: 5px;
|
|
-moz-transition: 0.2s;
|
|
-webkit-transition: 0.2s;
|
|
transition: 0.2s;
|
|
}
|
|
.secondary li:hover .arrow {
|
|
left: 6px
|
|
}
|
|
.secondary li a {
|
|
padding: 8px 0;
|
|
display: block;
|
|
width: 100%;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
font-size: 11px;
|
|
color: #333;
|
|
line-height: 17px;
|
|
font-family: 'Lucida Sans', 'Lucida Grande', Arial, Helvetica, sans-serif;
|
|
}
|
|
.secondary li .text {
|
|
padding-left: 28px;
|
|
display: block;
|
|
}
|
|
.secondary li.section,
|
|
.secondary li.current {
|
|
background-color: #f7f7f7
|
|
}
|
|
.secondary li.section a,
|
|
.secondary li.current a {
|
|
color: #000
|
|
}
|
|
.content-container {
|
|
float: right;
|
|
width: 73%;
|
|
padding-bottom: 20px;
|
|
}
|
|
.no-sidebar .content-container {
|
|
float: left;
|
|
width:100%;
|
|
}
|
|
|
|
.no-sidebar aside {
|
|
display:none;
|
|
}
|
|
|
|
.header {
|
|
background: #161616
|
|
}
|
|
.header .inner {
|
|
padding-top: 45px;
|
|
position: relative;
|
|
min-height: 72px;
|
|
}
|
|
/* Search Results */
|
|
.searchResults h1 {
|
|
font-size: 36px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.searchResults p.searchQuery {
|
|
color: #333;
|
|
margin-bottom: 10px;
|
|
}
|
|
.searchResults ul#SearchResults {
|
|
padding: 0
|
|
}
|
|
.searchResults ul#SearchResults li {
|
|
border-top: 1px solid #e5e5e5;
|
|
padding: 20px 0;
|
|
list-style-type: none;
|
|
}
|
|
.searchResults ul#SearchResults p {
|
|
margin-bottom: 12px
|
|
}
|
|
.searchResults ul#SearchResults a.searchResultHeader {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin-bottom: 6px;
|
|
display: block;
|
|
}
|
|
.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: #000
|
|
}
|
|
.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
|
|
}
|
|
#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
|
|
}
|
|
/* Search Form */
|
|
.search-bar {
|
|
width: 100%;
|
|
position: relative;
|
|
top: 0;
|
|
right: 0;
|
|
display: none;
|
|
padding: 20px 0;
|
|
margin: 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%;
|
|
}
|
|
}
|
|
@media print {
|
|
* {
|
|
background: transparent !important;
|
|
color: black !important;
|
|
box-shadow: none !important;
|
|
text-shadow: none !important;
|
|
filter: none !important;
|
|
-ms-filter: none !important;
|
|
}
|
|
.header,
|
|
.footer {
|
|
display: none
|
|
}
|
|
a,
|
|
a:visited {
|
|
text-decoration: underline
|
|
}
|
|
thead {
|
|
display: table-header-group
|
|
}
|
|
tr,
|
|
img {
|
|
page-break-inside: avoid
|
|
}
|
|
img {
|
|
max-width: 100% !important
|
|
}
|
|
} |