X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/fff5bbcee458992443e3732fbcbbbe34f765fcc3..refs/pull/494/head:/resources/assets/sass/_text.scss diff --git a/resources/assets/sass/_text.scss b/resources/assets/sass/_text.scss index fd993b685..719126526 100644 --- a/resources/assets/sass/_text.scss +++ b/resources/assets/sass/_text.scss @@ -1,3 +1,14 @@ +/** + * Fonts + */ + +body, button, input, select, label, textarea { + font-family: $text; +} +.Codemirror, pre, #markdown-editor-input, .editor-toolbar, .code-base { + font-family: $mono; +} + /* * Header Styles */ @@ -16,7 +27,7 @@ h2 { } h3 { font-size: 2.333em; - line-height: 1.571428572em; + line-height: 1.221428572em; margin-top: 0.78571429em; margin-bottom: 0.43137255em; } @@ -58,7 +69,6 @@ a, .link { cursor: pointer; text-decoration: none; transition: color ease-in-out 80ms; - font-family: $text; line-height: 1.6; &:hover { text-decoration: underline; @@ -71,6 +81,13 @@ a, .link { padding-right: 0; padding-left: $-s; } + &.icon { + display: inline-block; + } + svg { + position: relative; + display: inline-block; + } } /* @@ -84,7 +101,6 @@ p, ul, ol, pre, table, blockquote { hr { border: 0; height: 1px; - border: 0; background: #EAEAEA; margin-bottom: $-l; &.faded { @@ -109,6 +125,9 @@ em, i, .italic { small, p.small, span.small, .text-small { font-size: 0.8em; color: lighten($text-dark, 20%); + small, p.small, span.small, .text-small { + font-size: 1em; + } } sup, .superscript { @@ -116,17 +135,39 @@ sup, .superscript { font-size: 0.8em; } -pre { - font-family: monospace; - white-space:pre; +sub, .subscript { + vertical-align: sub; font-size: 0.8em; - overflow: hidden; - border-radius: 4px; - box-shadow: 0 1px 2px 0px rgba(10, 10, 10, 0.06); - border: 1px solid rgba(221, 221, 221, 0.66); - background-color: #fdf6e3; - padding: $-s; - overflow-x: scroll; +} + +pre { + font-size: 12px; + background-color: #f5f5f5; + border: 1px solid #DDD; + padding-left: 31px; + position: relative; + padding-top: 3px; + padding-bottom: 3px; + &:after { + content: ''; + display: block; + position: absolute; + top: 0; + width: 29px; + left: 0; + background-color: #f5f5f5; + height: 100%; + border-right: 1px solid #DDD; + } +} + +@media print { + pre { + padding-left: 12px; + } + pre:after { + display: none; + } } blockquote { @@ -148,7 +189,6 @@ blockquote { .code-base { background-color: #F8F8F8; - font-family: monospace; font-size: 0.80em; border: 1px solid #DDD; border-radius: 3px; @@ -172,6 +212,8 @@ pre code { background-color: transparent; border: 0; font-size: 1em; + display: block; + line-height: 1.6; } /* * Text colors @@ -193,7 +235,7 @@ p.neg, p .neg, span.neg, .text-neg { p.muted, p .muted, span.muted, .text-muted { color: lighten($text-dark, 26%); &.small, .small { - color: lighten($text-dark, 42%); + color: lighten($text-dark, 32%); } } @@ -254,16 +296,36 @@ span.highlight { /* * Lists */ +ul, ol { + overflow: hidden; + p { + margin: 0; + } +} ul { padding-left: $-m * 1.3; list-style: disc; - overflow: hidden; + ul { + list-style: circle; + margin-top: 0; + margin-bottom: 0; + } + label { + margin: 0; + } } ol { list-style: decimal; - padding-left: $-m * 1.3; - overflow: hidden; + padding-left: $-m * 2; +} + +li.checkbox-item, li.task-list-item { + list-style: none; + margin-left: - ($-m * 1.3); + input[type="checkbox"] { + margin-right: $-xs; + } } /* @@ -316,12 +378,6 @@ span.sep { display: block; } -.action-header { - h1 { - margin-top: $-m; - } -} - /** * Icons */