mirror of
https://github.com/silverstripe/doc.silverstripe.org
synced 2024-09-20 00:17:04 +02:00
e2a9ec214a
Note that this isn't the best way of keeping track of this shared functionality, but the ssorgsites module hasn't been released on github yet, and it's not clear that this will be the best way of sharing styles in the long run.
479 lines
11 KiB
CSS
Executable File
479 lines
11 KiB
CSS
Executable File
/** ----------------------------------------------------------
|
|
*
|
|
* 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;
|
|
}
|