diff options
Diffstat (limited to 'app/assets/stylesheets/framework/typography.scss')
-rw-r--r-- | app/assets/stylesheets/framework/typography.scss | 130 |
1 files changed, 102 insertions, 28 deletions
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index db5e2c51fe7..8a58c1ed567 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -2,18 +2,33 @@ color: $gl-text-color; word-wrap: break-word; + [dir="auto"] { + text-align: initial; + } + a { color: $md-link-color; } img { max-width: 100%; + margin: 0 0 8px; + } + + p a:not(.no-attachment-icon) img { + // Remove bottom padding because + // <p> already has $gl-padding bottom + margin-bottom: 0; } *:first-child:not(.katex-display) { margin-top: 0; } + > :last-child { + margin-bottom: 0; + } + // Single code lines should wrap code { font-family: $monospace_font; @@ -47,44 +62,50 @@ h1 { font-size: 1.75em; font-weight: 600; - margin: 16px 0 10px; - padding: 0 0 0.3em; + margin: 24px 0 16px; + padding-bottom: 0.3em; border-bottom: 1px solid $white-dark; color: $gl-text-color; + + &:first-child { + margin-top: 0; + } } h2 { font-size: 1.5em; font-weight: 600; - margin: 16px 0 10px; + margin: 24px 0 16px; + padding-bottom: 0.3em; + border-bottom: 1px solid $white-dark; color: $gl-text-color; } h3 { - margin: 16px 0 10px; + margin: 24px 0 16px; font-size: 1.3em; } h4 { - margin: 16px 0 10px; + margin: 24px 0 16px; font-size: 1.2em; } h5 { - margin: 16px 0 10px; + margin: 24px 0 16px; font-size: 1em; } h6 { - margin: 16px 0 10px; + margin: 24px 0 16px; font-size: 0.95em; } blockquote { color: $gl-grayish-blue; font-size: inherit; - padding: 8px 21px; - margin: 12px 0; + padding: 8px 24px; + margin: 16px 0; border-left: 3px solid $white-dark; } @@ -97,17 +118,21 @@ color: $gl-grayish-blue !important; font-size: inherit; line-height: 1.5; + + &:last-child { + margin: 0; + } } p { color: $gl-text-color; - margin: 6px 0 0; + margin: 0 0 16px; } table { @extend .table; @extend .table-bordered; - margin: 12px 0; + margin: 16px 0; color: $gl-text-color; th { @@ -120,11 +145,20 @@ } pre { - margin: 12px 0; + margin-bottom: 16px; font-size: 13px; line-height: 1.6em; overflow-x: auto; border-radius: 2px; + + + &.plain-readme { + background: none; + border: none; + padding: 0; + margin: 0; + font-size: 14px; + } } p > code { @@ -134,7 +168,7 @@ ul, ol { padding: 0; - margin: 3px 0 !important; + margin: 0 0 16px; } ul:dir(rtl), @@ -155,13 +189,14 @@ } ul.task-list { - li.task-list-item { + > li.task-list-item { list-style-type: none; position: relative; + min-height: 22px; padding-left: 28px; margin-left: 0 !important; - input.task-list-item-checkbox { + > input.task-list-item-checkbox { position: absolute; left: 8px; top: 5px; @@ -264,19 +299,6 @@ h6 { /** CODE **/ pre { font-family: $monospace_font; - - &.plain-readme { - background: none; - border: none; - padding: 0; - margin: 0; - font-size: 14px; - } -} - -.monospace { - font-family: $monospace_font; - font-size: 90%; } code { @@ -290,6 +312,24 @@ a > code { color: $link-color; } +.monospace { + font-family: $monospace_font; +} + +.commit-sha, +.ref-name { + @extend .monospace; + font-size: 95%; +} + +.git-revision-dropdown-toggle { + @extend .monospace; +} + +.git-revision-dropdown .dropdown-content ul li a { + @extend .ref-name; +} + /** * Apply Markdown typography * @@ -306,6 +346,11 @@ a > code { * Textareas intended for GFM * */ +textarea.js-gfm-input { + font-family: $monospace_font; + font-size: 13px; +} + .strikethrough { text-decoration: line-through; } @@ -332,3 +377,32 @@ h4 { .idiff.addition { background: $line-added-dark; } + + +/** + * form text input i.e. search bar, comments, forms, etc. + */ +input, +textarea { + &::-webkit-input-placeholder { + color: $placeholder-text-color; + } + + // support firefox 19+ vendor prefix + &::-moz-placeholder { + color: $placeholder-text-color; + opacity: 1; // FF defaults to 0.54 + } + + // scss-lint:disable PseudoElement + // support Edge vendor prefix + &::-ms-input-placeholder { + color: $placeholder-text-color; + } + + // scss-lint:disable PseudoElement + // support IE vendor prefix + &:-ms-input-placeholder { + color: $placeholder-text-color; + } +} |