mirror of
https://github.com/silverstripe/doc.silverstripe.org
synced 2024-09-20 00:17:04 +02:00
479 lines
11 KiB
CSS
479 lines
11 KiB
CSS
|
/** ----------------------------------------------------------
|
||
|
|
*
|
||
|
|
* Contains the core styles for all the silverstripe sites.
|
||
|
|
*
|
||
|
|
* If you plan on including this file in a ss project you are doing it wrong.
|
||
|
|
* you should link to the ss.screen.min.css and ss.print.min.css file in
|
||
|
|
* your project which this combines down to.
|
||
|
|
* It also ensures that you have all the core styles.
|
||
|
|
*
|
||
|
|
* @author Will Rossiter <will at silverstripe dot com>
|
||
|
|
*
|
||
|
|
* Notes: our vertical grid is set to 8px.
|
||
|
|
* ------------------------------------------------------- */
|
||
|
|
|
||
|
|
/* -------------------------------------------------------
|
||
|
|
* Reset Styles
|
||
|
|
* ------------------------------------------------------- */
|
||
|
|
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {
|
||
|
|
margin:0; padding:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* -------------------------------------------------------
|
||
|
|
* Core Styles
|
||
|
|
* ------------------------------------------------------- */
|
||
|
|
|
||
|
|
html {
|
||
|
|
background: #F8F9FA; font: 12px/18px Arial, sans-serif; color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
img {
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
a { color: #0973A6; text-decoration: none; }
|
||
|
|
a:hover,
|
||
|
|
a:focus { text-decoration: underline; color: #667D76; }
|
||
|
|
a:visited { color: #14506c; }
|
||
|
|
|
||
|
|
|
||
|
|
/* -------------------------------------------------------
|
||
|
|
* Helper Styles
|
||
|
|
* ------------------------------------------------------- */
|
||
|
|
.clear {
|
||
|
|
clear: both;
|
||
|
|
display: block;
|
||
|
|
overflow: hidden;
|
||
|
|
visibility: hidden;
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.clearfix:after {
|
||
|
|
clear: both;
|
||
|
|
content:' ';
|
||
|
|
display: block;
|
||
|
|
font-size: 0;
|
||
|
|
line-height: 0;
|
||
|
|
visibility: hidden;
|
||
|
|
width: 0;
|
||
|
|
height: 0
|
||
|
|
}
|
||
|
|
|
||
|
|
* html .clearfix,
|
||
|
|
*:first-child+html .clearfix{
|
||
|
|
zoom: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* -------------------------------------------------------
|
||
|
|
* Layout Styles
|
||
|
|
* ------------------------------------------------------- */
|
||
|
|
|
||
|
|
/* Container */
|
||
|
|
#container {
|
||
|
|
margin: 18px auto; padding: 17px 1.25%;
|
||
|
|
background: #fff;
|
||
|
|
overflow: hidden;
|
||
|
|
border: 1px solid #dfdfdf;
|
||
|
|
-webkit-box-shadow: 0 0 20px #e8ebed;
|
||
|
|
-moz-box-shadow: 0 0 20px #e8ebed;
|
||
|
|
box-shadow: 0 0 20px #e8ebed;
|
||
|
|
|
||
|
|
-webkit-border-radius: 2px;
|
||
|
|
-moz-border-radius: 2px;
|
||
|
|
border-radius: 2px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.container {
|
||
|
|
min-width: 540px;
|
||
|
|
max-width: 960px;
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content-column {
|
||
|
|
width: 72.5%;
|
||
|
|
float: right;
|
||
|
|
border-left: 1px solid #efefef;
|
||
|
|
padding-left: 2.5%;
|
||
|
|
}
|
||
|
|
#content-column.full-width,
|
||
|
|
.full-width#content-column {
|
||
|
|
width: 100%;
|
||
|
|
float: none;
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#sidebar-column {
|
||
|
|
width: 22.5%;
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Header */
|
||
|
|
#header {
|
||
|
|
padding: 0 0 7px 0; overflow: hidden;
|
||
|
|
}
|
||
|
|
#header h1 {
|
||
|
|
margin: 0; line-height: 49px; float: left;
|
||
|
|
}
|
||
|
|
#header h1 a {
|
||
|
|
text-decoration: none;
|
||
|
|
font-size: 22px;
|
||
|
|
color: #0973A6;
|
||
|
|
letter-spacing: -1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#header h1 a.logo {
|
||
|
|
background: #fff url(../../ssorgsites/images/logo.png) no-repeat bottom left;
|
||
|
|
height: 55px; width:162px;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
#header h1 a.logo:hover {
|
||
|
|
background: #fff url(../../ssorgsites/images/logo.png) no-repeat 0 -50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Breadcrumbs */
|
||
|
|
#breadcrumbs {
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
#breadcrumbs p {
|
||
|
|
font-size: 11px; margin: 0; color: #798D85;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Search */
|
||
|
|
#search-bar {
|
||
|
|
border-top: 1px solid #E6EBE9;
|
||
|
|
border-bottom: 1px solid #E6EBE9;
|
||
|
|
margin-bottom: 32px;
|
||
|
|
padding: 7px 10px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
#search {
|
||
|
|
float: right;
|
||
|
|
width: 252px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
#search label {
|
||
|
|
float: left;
|
||
|
|
font-size: 11px;
|
||
|
|
color: #999;
|
||
|
|
margin: 3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#search input.text {
|
||
|
|
float: right; width: 170px; height: 22px;
|
||
|
|
background: url(../../ssorgsites/images/search.png) top left no-repeat;
|
||
|
|
font-size: 11px;
|
||
|
|
color: #495C56;
|
||
|
|
outline: none;
|
||
|
|
padding-left: 10px;
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#search fieldset {
|
||
|
|
width: 230px;
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
#search input.action {
|
||
|
|
position: absolute; top: 0; right: 0; width: 22px; height: 22px;
|
||
|
|
border: none;
|
||
|
|
text-indent: 99999px;
|
||
|
|
cursor: pointer;
|
||
|
|
background: url(../../ssorgsites/images/search.png) top right no-repeat;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Search Results */
|
||
|
|
#search-results {}
|
||
|
|
#search-results li {
|
||
|
|
list-style: none; border-bottom: 1px solid #ddd; padding: 0 0 17px 0; margin: 0 0 17px 0;
|
||
|
|
background: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Sidebar menu */
|
||
|
|
#sidebar-column .sidebar-box {
|
||
|
|
margin: 0 0 18px 0;
|
||
|
|
padding: 4.75%;
|
||
|
|
background: #f4f4f4;
|
||
|
|
-moz-border-radius: 3px;
|
||
|
|
-webkit-border-radius: 3px;
|
||
|
|
border-radius: 3px;
|
||
|
|
}
|
||
|
|
#sidebar-column .sidebar-box ul { margin: 0; padding: 0;}
|
||
|
|
#sidebar-column .sidebar-box h4 { font-size: 14px; margin-bottom: 9px;}
|
||
|
|
#sidebar-column .sidebar-box li {
|
||
|
|
list-style: none;
|
||
|
|
padding: 0; margin: 0;
|
||
|
|
}
|
||
|
|
#sidebar-column .sidebar-box li a:hover,
|
||
|
|
#sidebar-column .sidebar-box li a:focus,
|
||
|
|
#sidebar-column .sidebar-box li a.current,
|
||
|
|
#sidebar-column .sidebar-box li a.section {
|
||
|
|
background: #0973A6;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
#sidebar-column .sidebar-box li .current {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
#sidebar-column a {
|
||
|
|
display: block; width: 86%; padding: 5px 10px 4px;
|
||
|
|
border-bottom: 1px solid #dfdfdf;
|
||
|
|
-webkit-border-radius: 3px;
|
||
|
|
-moz-border-radius: 3px;
|
||
|
|
border-radius: 3px;
|
||
|
|
}
|
||
|
|
#sidebar-column a:hover,
|
||
|
|
#sidebar-column a:focus {
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#sidebar-column .sidebar-box li.h1 { font-weight: bold;}
|
||
|
|
#sidebar-column .sidebar-box li.h2,
|
||
|
|
#sidebar-column .sidebar-box li.h3,
|
||
|
|
#sidebar-column .sidebar-box li.h4,
|
||
|
|
#sidebar-column .sidebar-box ul#toc ul { margin: 0 0 0 9px; }
|
||
|
|
#sidebar-column .sidebar-box ul ul { margin: 0 0 9px 18px; }
|
||
|
|
#sidebar-column .sidebar-box li li {
|
||
|
|
font-size: 11px;
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
#sidebar-column .sidebar-box li li a,
|
||
|
|
#sidebar-column .sidebar-box ul#toc li a {
|
||
|
|
border: none;
|
||
|
|
-webkit-border-radius: none;
|
||
|
|
-moz-border-radius: none;
|
||
|
|
border-radius: none;
|
||
|
|
font-size: 11px;
|
||
|
|
padding: 2px 0;
|
||
|
|
}
|
||
|
|
#sidebar-column .sidebar-box li li a:hover,
|
||
|
|
#sidebar-column .sidebar-box li li a:focus,
|
||
|
|
#sidebar-column .sidebar-box ul#toc li a:hover,
|
||
|
|
#sidebar-column .sidebar-box ul#toc li a:focus {
|
||
|
|
background: none;
|
||
|
|
color: #667D76;
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
|
||
|
|
#sidebar-column .sidebar-box li li a.current,
|
||
|
|
#sidebar-column .sidebar-box li li a.section,
|
||
|
|
#sidebar-column .sidebar-box ul#toc li a.current,
|
||
|
|
#sidebar-column .sidebar-box ul#toc li a.section {
|
||
|
|
background: none;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
#sidebar-column .sidebar-box li li li li { margin: 0 0 0 20px; }
|
||
|
|
|
||
|
|
#sidebar-column .sidebar-box label.left {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
#sidebar-column .sidebar-box form li {
|
||
|
|
list-style: none;
|
||
|
|
}
|
||
|
|
#sidebar-column .sidebar-box form li label {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
#sidebar-column .sidebar-box .field {
|
||
|
|
border-bottom: 1px solid #ddd;
|
||
|
|
padding-bottom: 8px;
|
||
|
|
margin-bottom: 9px;
|
||
|
|
}
|
||
|
|
#sidebar-column .sidebar-box input.text {
|
||
|
|
padding: 3px 3px 4px 3px;
|
||
|
|
}
|
||
|
|
/* Footer */
|
||
|
|
#footer { width: 960px; margin: 22px auto; }
|
||
|
|
#footer p { font-size: 11px; line-height: 18px; color: #798D85;}
|
||
|
|
#footer p a { color: #798D85; text-decoration: underline; }
|
||
|
|
#footer .cc-logo { float: right; }
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Pagination Styles
|
||
|
|
*/
|
||
|
|
#page-numbers span,
|
||
|
|
#page-numbers a {
|
||
|
|
padding: 3px 5px;
|
||
|
|
}
|
||
|
|
#page-numbers span {
|
||
|
|
background-color: #ACD5CA;
|
||
|
|
}
|
||
|
|
#page-numbers a:hover {
|
||
|
|
color: #FFFFFF;
|
||
|
|
background-color: #005F99;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul.pagination {
|
||
|
|
margin: 27px 0;
|
||
|
|
}
|
||
|
|
ul.pagination li {
|
||
|
|
display: inline;
|
||
|
|
background: none;
|
||
|
|
padding: 0 4px 0 0;
|
||
|
|
}
|
||
|
|
.pagination li strong, .pagination li a {
|
||
|
|
padding: 1px 4px;
|
||
|
|
}
|
||
|
|
.pagination li.active strong {
|
||
|
|
background-color: #c3dbd4;
|
||
|
|
}
|
||
|
|
.pagination li a:hover {
|
||
|
|
background-color: #0973A6;
|
||
|
|
color: #fff;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Messages */
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Example:
|
||
|
|
* <div class="info">
|
||
|
|
* <h5>This is a info message</h5>
|
||
|
|
* <p>Body text</p>
|
||
|
|
* <a href="#" class="close" title="Close notification">close</a>
|
||
|
|
* </div>
|
||
|
|
*/
|
||
|
|
#content .warningBox h5,
|
||
|
|
#content .hint h5,
|
||
|
|
#content .notice h5,
|
||
|
|
#content .warning h5,
|
||
|
|
#content .info h5 {
|
||
|
|
margin-bottom: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hint a.close,
|
||
|
|
.notice a.close,
|
||
|
|
.warning a.close,
|
||
|
|
.info a.close {
|
||
|
|
background:url("../images/ico_close_off.png") no-repeat scroll left top transparent;
|
||
|
|
display:block;
|
||
|
|
font-size:0;
|
||
|
|
height:11px;
|
||
|
|
position:absolute;
|
||
|
|
right:3px;
|
||
|
|
text-indent:-9999px;
|
||
|
|
top:3px;
|
||
|
|
width:11px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hint,
|
||
|
|
.note {
|
||
|
|
border: 1px dotted #a5b5b0;
|
||
|
|
padding: 13px 10px 0px 60px;
|
||
|
|
clear: both;
|
||
|
|
margin: 9px 0 18px;
|
||
|
|
background: #f9fafa url(../images/lightbulb.png) no-repeat 21px 14px;
|
||
|
|
}
|
||
|
|
.typography .note h3,
|
||
|
|
.typography .hint h3 {
|
||
|
|
line-height: 27px;
|
||
|
|
}
|
||
|
|
.pageSkip {
|
||
|
|
background-color: #f9fafa;
|
||
|
|
border: 1px solid #a5b5b0;
|
||
|
|
padding: 8px 10px 8px 10px;
|
||
|
|
text-align: center;
|
||
|
|
margin: 9px 0 18px;
|
||
|
|
}
|
||
|
|
.notice {
|
||
|
|
border: 1px solid #D3C200;
|
||
|
|
padding: 13px 10px 0px 60px;
|
||
|
|
margin: 9px 0 18px;
|
||
|
|
position: relative;
|
||
|
|
background: #FFFAC6 url(../images/notification.png) no-repeat 18px 11px;
|
||
|
|
}
|
||
|
|
p.notice {
|
||
|
|
padding-bottom: 18px;
|
||
|
|
}
|
||
|
|
.warning {
|
||
|
|
border: 1px solid #f8c3cd;
|
||
|
|
padding: 13px 10px 0px 60px;
|
||
|
|
clear: both;
|
||
|
|
margin: 9px 0 18px;
|
||
|
|
position: relative;
|
||
|
|
background: #fdf1f3 url(../images/error_button.png) no-repeat 18px 11px;
|
||
|
|
}
|
||
|
|
.info {
|
||
|
|
border: 1px solid #6baad8;
|
||
|
|
padding: 13px 10px 0px 60px;
|
||
|
|
clear: both;
|
||
|
|
margin: 9px 0 18px;
|
||
|
|
position: relative;
|
||
|
|
background: #f7fcff url(../images/info_button.png) no-repeat 18px 11px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Used on 404 page not found */
|
||
|
|
.warningBox { margin:9px 0 18px; }
|
||
|
|
#content .warningBox p {
|
||
|
|
margin: 0 0 9px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.warningBoxTop {
|
||
|
|
background-color: #F9FAFA;
|
||
|
|
border: 1px solid #d3d9dc;
|
||
|
|
padding: 17px 9px 7px 66px;
|
||
|
|
background: #F9FAFA url(../../ssorgsites/images/warning.png) no-repeat 18px 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content .warningBoxTop h1 { font-size: 27px; margin-bottom: 0; letter-spacing: 0; }
|
||
|
|
#content .warningBoxTop ul { margin: 9px 0 18px; }
|
||
|
|
#content .warningBoxTop li { margin-bottom: 4px; }
|
||
|
|
#content .warningBoxBottom {
|
||
|
|
background-color: #0973A6;
|
||
|
|
padding: 12px 0 16px;
|
||
|
|
/* background: url(../../ssorgsites/images/warning.png) no-repeat scroll 22px 13px #0973A6; */
|
||
|
|
}
|
||
|
|
#content .warningBoxBottom a { color: #fff; }
|
||
|
|
#content .warningBoxBottom a:hover { color: #f3fbfe; }
|
||
|
|
#content .warningBoxBottom ul { margin: 0 0 0 40px; }
|
||
|
|
#content .warningBoxBottom li { background: none; margin-bottom: 0; }
|
||
|
|
|
||
|
|
/* Code styles - each site should have syntaxhighlighter installed for
|
||
|
|
code blocks */
|
||
|
|
.syntaxhighlighter { padding: 9px 0; }
|
||
|
|
|
||
|
|
|
||
|
|
/* documentation navigation */
|
||
|
|
.documentation-nav {
|
||
|
|
clear: both;
|
||
|
|
margin: 0 0 5px;
|
||
|
|
padding: 2px 0;
|
||
|
|
overflow: hidden; color: #999999;
|
||
|
|
font-size: 11px;
|
||
|
|
}
|
||
|
|
.documentation-nav h2 { font-size: 11px; font-weight: normal; float: left; margin-right: 5px;}
|
||
|
|
.documentation-nav ul { margin: 0; padding: 0; float: left;}
|
||
|
|
.documentation-nav li { display: inline; list-style: none; padding: 0; margin: 0; font-size: 11px; }
|
||
|
|
.documentation-nav li a { margin-left: 5px; padding: 0px; }
|
||
|
|
.documentation-nav li a.current {
|
||
|
|
background: #0973A6; color: #fff; font-weight: bold;
|
||
|
|
padding: 4px;
|
||
|
|
-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
|
||
|
|
}
|
||
|
|
.documentation-nav li a.current:hover,
|
||
|
|
.documentation-nav li a.current:focus {
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Links to API */
|
||
|
|
#left-column a[href^="http://api."] {
|
||
|
|
padding: 2px;
|
||
|
|
font-family: Monaco, 'Bitstream Vera Sans Mono', Courier, monospace;
|
||
|
|
background: url(../../ssorgsites/images/external_link.png) no-repeat right 3px;
|
||
|
|
padding-right: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Comments */
|
||
|
|
#comments {
|
||
|
|
clear: both;
|
||
|
|
padding-top: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#comments .notice {
|
||
|
|
font-size: 12px;
|
||
|
|
}
|