mirror of
https://github.com/silverstripe/silverstripe-docsviewer
synced 2024-10-22 11:05:56 +02:00
e38b740d88
* Create sidebar hamburger menu for mobile * Improve sidebar UX and mobile menu * Fixed sidebar UX bug where blue text breadcrumb didn't appear and fixed hover/focus styling * Improved UX of hamburger by applying toggle animations
358 lines
6.0 KiB
CSS
358 lines
6.0 KiB
CSS
/*! text selection */
|
|
::-moz-selection {
|
|
text-shadow:none;
|
|
color: #ffffff;
|
|
background: #1389CE;
|
|
}
|
|
|
|
::selection {
|
|
text-shadow: none;
|
|
color: #ffffff;
|
|
background: #1389CE;
|
|
}
|
|
|
|
/*! links */
|
|
a {
|
|
color: #808c8d;
|
|
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,
|
|
.heading-anchor-link:hover {
|
|
display: inline;
|
|
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;
|
|
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: 30px 0;
|
|
}
|
|
#edit-link p {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#edit-link a {
|
|
display: block;
|
|
background: #fafafa;
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#fafafa), color-stop(100%,#e6e6e6));
|
|
background: -webkit-linear-gradient(top, #fafafa 1%,#e6e6e6 100%);
|
|
background: -webkit-linear-gradient(top, #fafafa 1%, #e6e6e6 100%);
|
|
background: linear-gradient(to bottom, #fafafa 1%,#e6e6e6 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#e6e6e6',GradientType=0 );
|
|
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;
|
|
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: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#3072B3), color-stop(100%,#3072B3));
|
|
background: -webkit-linear-gradient(top, #599BDC 1%,#3072B3 100%);
|
|
background: -webkit-linear-gradient(top, #599BDC 1%, #3072B3 100%);
|
|
background: linear-gradient(to bottom, #599BDC 1%,#3072B3 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#599BDC', endColorstr='#3072B3',GradientType=0 );
|
|
}
|