mirror of
https://github.com/silverstripe/silverstripe-docsviewer
synced 2024-10-22 11:05:56 +02:00
c71a1aaca2
Universal increase in font size Use same font as ss.org for consistency Remove unnecessary visual noise (borders, box shadows, etc) Use Google PrettyPrint syntax highlighter for improved readability of code sections Fully responsive, with hamburger menu Add "section" linking mode to menu items Add masthead for breadcrumbs, introduction Improved styles for notice/info/warning messaging
346 lines
6.6 KiB
CSS
346 lines
6.6 KiB
CSS
/*! text selection */
|
|
::-moz-selection {
|
|
text-shadow:none;
|
|
}
|
|
|
|
::selection {
|
|
text-shadow: none;
|
|
}
|
|
|
|
/*! links */
|
|
a {
|
|
color: #1389ce;
|
|
text-decoration: none;
|
|
}
|
|
a:hover,
|
|
a:focus {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a[href$=".pdf"],
|
|
a[href$=".PDF"],
|
|
a.pdf {
|
|
padding: 2px; padding-left: 20px;
|
|
background: url(../../docsviewer/images/icons/page_white_acrobat.png) no-repeat left center; }
|
|
|
|
a[href$=".doc"],
|
|
a[href$=".DOC"],
|
|
a.doc {
|
|
padding: 2px; padding-left: 20px;
|
|
background: url(../../docsviewer/images/icons/page_word.png) no-repeat left center; }
|
|
|
|
a[href$=".xls"],
|
|
a[href$=".XLS"],
|
|
a.xls {
|
|
padding: 2px; padding-left: 20px;
|
|
background: url(../../docsviewer/images/icons/page_excel.png) no-repeat left center;
|
|
}
|
|
|
|
a[href$=".gz"],
|
|
a[href$=".GZ"],
|
|
a[href$=".gzip"],
|
|
a[href$=".GZIP"],
|
|
a[href$=".zip"],
|
|
a[href$=".ZIP"],
|
|
a.archive {
|
|
padding: 2px; padding-left: 20px;
|
|
background: url(../../docsviewer/images/icons/page_white_zip.png) no-repeat left center;
|
|
}
|
|
|
|
a[href$=".exe"],
|
|
a[href$=".EXE"],
|
|
a.application {
|
|
padding: 2px; padding-left: 20px; background: url(../../docsviewer/images/icons/application.png) no-repeat left center;
|
|
}
|
|
|
|
/*! pargraphs */
|
|
p {
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
margin: 0 0 25px;
|
|
}
|
|
|
|
.text-wrap {
|
|
word-break: break-all;
|
|
}
|
|
|
|
/*! lists */
|
|
ul {
|
|
margin: 10px 0 20px 20px;
|
|
padding: 0;
|
|
}
|
|
|
|
li, dd, li p {
|
|
font-size: 15px;
|
|
margin: 0 0 10px 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
li {
|
|
list-style-position: inside;
|
|
}
|
|
|
|
li ul,
|
|
li ol {
|
|
margin: 0 0 5px 20px;
|
|
}
|
|
|
|
dl {
|
|
margin: 7px 0 21px 0;
|
|
}
|
|
|
|
dt {
|
|
font-weight: bold;
|
|
}
|
|
|
|
dd {
|
|
margin: 5px 0 10px 20px;
|
|
}
|
|
|
|
.semantic {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
ul.third {
|
|
overflow: hidden;
|
|
}
|
|
ul.third li {
|
|
float: left;
|
|
width: 33.3%;
|
|
padding-right: 30px;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
ul.third li:nth-child(3n+1) {
|
|
clear: both;
|
|
}
|
|
|
|
/*! headers */
|
|
h1 {
|
|
font-size: 35px;
|
|
line-height: 40px;
|
|
margin-bottom: 10px;
|
|
margin-top: 0;
|
|
letter-spacing: -1px;
|
|
color:rgb(3, 91, 136);
|
|
}
|
|
|
|
#table-of-contents + p {
|
|
font-size: 18px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
h1 + p {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 28px;
|
|
line-height: 30px;
|
|
margin: 40px 0 20px;
|
|
border-top: 1px solid #eee;
|
|
padding-top: 29px;
|
|
letter-spacing: -1px;
|
|
color: rgb(3, 91, 136);
|
|
}
|
|
|
|
h3 {
|
|
font-size: 20px;
|
|
line-height: 20px;
|
|
margin: 30px 0 10px;
|
|
color: #181c1d;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 16px;
|
|
margin-bottom: 14px;
|
|
line-height: 21px;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 14px;
|
|
line-height: 14px;
|
|
margin-bottom: 7px;
|
|
}
|
|
|
|
h6 {
|
|
font-size: 12px;
|
|
line-height: 15px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
h1 .heading-anchor-link,
|
|
h2 .heading-anchor-link,
|
|
h3 .heading-anchor-link,
|
|
h4 .heading-anchor-link,
|
|
h5 .heading-anchor-link,
|
|
h6 .heading-anchor-link {
|
|
display: none;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
h1.hover .heading-anchor-link,
|
|
h2.hover .heading-anchor-link,
|
|
h3.hover .heading-anchor-link,
|
|
h4.hover .heading-anchor-link,
|
|
h5.hover .heading-anchor-link,
|
|
h6.hover .heading-anchor-link {
|
|
display: inline;
|
|
}
|
|
|
|
.heading-anchor-link:hover {
|
|
color: #aaa;
|
|
}
|
|
|
|
/*! images */
|
|
img {
|
|
max-width: 100%;
|
|
border: 1px solid #ccc;
|
|
padding: 6px;
|
|
margin: 10px 0;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/*! code */
|
|
pre {
|
|
margin: 20px 0 30px;
|
|
font: 13px/20px Monaco, 'Bitstream Vera Sans Mono', 'Courier New', monospace;
|
|
background-color: #f6f7f8;
|
|
border: 1px solid #e9eaed;
|
|
padding: 14px;
|
|
-webkit-border-radius: 3px;
|
|
border-radius: 3px;
|
|
overflow-x: scroll;
|
|
color: #4E5661;
|
|
}
|
|
pre code {
|
|
background: none;
|
|
font-weight: normal;
|
|
padding: 0;
|
|
}
|
|
|
|
code {
|
|
font: 13px/15px Monaco, 'Bitstream Vera Sans Mono', Courier, monospace;
|
|
background: #ecf0f1;
|
|
padding: 2px;
|
|
}
|
|
code a {
|
|
color: #4E5661;
|
|
}
|
|
|
|
/*! quotes */
|
|
blockquote {
|
|
margin: 28px 0;
|
|
padding: 14px 14px 0 38px;
|
|
background: #f8f9fa url(../../docsviewer/images/quote.gif) no-repeat 9px 18px;
|
|
overflow: hidden;
|
|
}
|
|
blockquote h1,
|
|
blockquote h2,
|
|
blockquote h3,
|
|
blockquote h4,
|
|
blockquote h5,
|
|
blockquote h6 {
|
|
font-style: italic; color: #627871;
|
|
}
|
|
|
|
blockquote h4 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
blockquote p {
|
|
font-style: italic;
|
|
font-size: 14px;
|
|
color: #667D76;
|
|
}
|
|
|
|
/*! tables */
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
background-color: #fafafa;
|
|
margin-bottom: 28px;
|
|
border: 1px solid #c3cdca;
|
|
}
|
|
table tr:nth-child(even) {
|
|
background: #eef4f6;
|
|
}
|
|
|
|
table caption {
|
|
text-align: left;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
line-height: 21px;
|
|
}
|
|
|
|
table thead {
|
|
background: #fafafa;
|
|
}
|
|
table thead th {
|
|
padding: 7px 10px 6px;
|
|
font-size: 15px;
|
|
text-align: left;
|
|
border-right: 1px solid #c3cdca;
|
|
}
|
|
|
|
table tbody tr {
|
|
border-top: 1px solid #c3cdca;
|
|
}
|
|
|
|
table td {
|
|
font-size: 15px;
|
|
line-height: 21px;
|
|
padding: 7px;
|
|
border-right: 1px solid #c3cdca;
|
|
}
|
|
|
|
/*! Edit Link */
|
|
#edit-link {
|
|
margin: 7px 0;
|
|
}
|
|
#edit-link p {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#edit-link a {
|
|
display: block;
|
|
background: #fafafa; /* Old browsers */
|
|
background: -moz-linear-gradient(top, #fafafa 1%, #e6e6e6 100%); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#fafafa), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(top, #fafafa 1%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(top, #fafafa 1%,#e6e6e6 100%); /* Opera 11.10+ */
|
|
background: -ms-linear-gradient(top, #fafafa 1%,#e6e6e6 100%); /* IE10+ */
|
|
background: linear-gradient(to bottom, #fafafa 1%,#e6e6e6 100%); /* W3C */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
|
|
|
|
border: 1px solid #d4d4d4;
|
|
border-bottom-color: #bcbcbc;
|
|
text-shadow: 0 1px 0 #fff;
|
|
color: #333;
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
text-decoration: none;
|
|
padding: 5px 10px;
|
|
|
|
-moz-border-radius: 3px;
|
|
border-radius: 3px;
|
|
float: left;
|
|
}
|
|
#edit-link a:hover,
|
|
#edit-link a:focus {
|
|
color: #fff;
|
|
text-shadow: 0 -1px 1px #3072B3;
|
|
border-color: #518CC6;
|
|
background: #599BDC;
|
|
background: -moz-linear-gradient(top, #599BDC 1%, #3072B3 100%); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#3072B3), color-stop(100%,#3072B3)); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(top, #599BDC 1%,#3072B3 100%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(top, #599BDC 1%,#3072B3 100%); /* Opera 11.10+ */
|
|
background: -ms-linear-gradient(top, #599BDC 1%,#3072B3 100%); /* IE10+ */
|
|
background: linear-gradient(to bottom, #599BDC 1%,#3072B3 100%); /* W3C */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#599BDC', endColorstr='#3072B3',GradientType=0 ); /* IE6-9 */
|
|
} |