X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/c5b58d8fd20a85a56a8903a0cf15047a9b9fed41..refs/pull/806/head:/resources/assets/sass/_text.scss diff --git a/resources/assets/sass/_text.scss b/resources/assets/sass/_text.scss index ccef2a70f..d894a00e7 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 */ @@ -50,6 +61,24 @@ h5, h6 { margin-bottom: 0.66em; } +@include smaller-than($s) { + h1 { + font-size: 2.8275em; + } + h2 { + font-size: 2.333em; + } + h3 { + font-size: 1.666em; + } + h4 { + font-size: 1.333em; + } + h5 { + font-size: 1.161616em; + } +} + /* * Link styling */ @@ -58,19 +87,11 @@ a, .link { cursor: pointer; text-decoration: none; transition: color ease-in-out 80ms; - font-family: $text; line-height: 1.6; &:hover { text-decoration: underline; color: darken($primary, 20%); } - i { - padding-right: $-s; - } - i.zmdi-hc-flip-horizontal { - padding-right: 0; - padding-left: $-s; - } &.icon { display: inline-block; } @@ -131,7 +152,6 @@ sub, .subscript { } pre { - font-family: monospace; font-size: 12px; background-color: #f5f5f5; border: 1px solid #DDD; @@ -152,6 +172,14 @@ pre { } } +@media print { + pre { + padding-left: 12px; + } + pre:after { + display: none; + } +} blockquote { display: block; @@ -172,7 +200,6 @@ blockquote { .code-base { background-color: #F8F8F8; - font-family: monospace; font-size: 0.80em; border: 1px solid #DDD; border-radius: 3px; @@ -204,71 +231,92 @@ pre code { */ p.pos, p .pos, span.pos, .text-pos { color: $positive; + fill: $positive; &:hover { color: $positive; + fill: $positive; } } p.neg, p .neg, span.neg, .text-neg { color: $negative; + fill: $negative; &:hover { color: $negative; + fill: $negative; } } p.muted, p .muted, span.muted, .text-muted { color: lighten($text-dark, 26%); + fill: lighten($text-dark, 26%); &.small, .small { color: lighten($text-dark, 32%); + fill: lighten($text-dark, 32%); } } p.primary, p .primary, span.primary, .text-primary { color: $primary; + fill: $primary; &:hover { color: $primary; + fill: $primary; } } p.secondary, p .secondary, span.secondary, .text-secondary { color: $secondary; + fill: $secondary; &:hover { color: $secondary; + fill: $secondary; } } .text-book { color: $color-book; + fill: $color-book; &:hover { color: $color-book; + fill: $color-book; } } .text-page { color: $color-page; + fill: $color-page; &:hover { color: $color-page; + fill: $color-page; } &.draft { color: $color-page-draft; + fill: $color-page-draft; } &.draft:hover { color: $color-page-draft; + fill: $color-page-draft; } } .text-chapter { color: $color-chapter; + fill: $color-chapter; &:hover { color: $color-chapter; + fill: $color-chapter; } } .faded .text-book:hover { color: $color-book !important; + fill: $color-book !important; } .faded .text-chapter:hover { color: $color-chapter !important; + fill: $color-chapter !important; } .faded .text-page:hover { color: $color-page !important; + fill: $color-page !important; } span.highlight { @@ -343,6 +391,11 @@ li.checkbox-item, li.task-list-item { color: inherit; } +.break-text { + word-wrap: break-word; + overflow-wrap: break-word; +} + /** * Grouping */ @@ -362,12 +415,6 @@ span.sep { display: block; } -.action-header { - h1 { - margin-top: $-m; - } -} - /** * Icons */ @@ -375,3 +422,12 @@ i { padding-right: $-xs; } +.svg-icon { + width: 1em; + height: 1em; + display: inline-block; + position: relative; + bottom: -0.105em; + margin-right: $-xs; +} +