@mixin md-typography { color: $gl-text-color; word-wrap: break-word; [dir="auto"] { text-align: initial; } a { color: $md-link-color; } img:not(.emoji) { margin: 0 0 8px; } img.lazy { min-width: 200px; min-height: 100px; background-color: $gray-lightest; } img.js-lazy-loaded, img.emoji { min-width: inherit; min-height: inherit; background-color: inherit; max-width: 100%; } 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; white-space: pre-wrap; word-wrap: normal; } // Multi-line code blocks should scroll horizontally pre { code { white-space: pre; } } kbd { display: inline-block; padding: 3px 5px; font-size: 11px; line-height: 10px; color: $kdb-color; vertical-align: middle; background-color: $kdb-bg; border-width: 1px; border-style: solid; border-color: $kdb-border $kdb-border $kdb-border-bottom; border-image: none; border-radius: 3px; box-shadow: 0 -1px 0 $kdb-shadow inset; } h1 { font-size: 1.75em; font-weight: $gl-font-weight-bold; 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: $gl-font-weight-bold; margin: 24px 0 16px; padding-bottom: 0.3em; border-bottom: 1px solid $white-dark; color: $gl-text-color; } h3 { margin: 24px 0 16px; font-size: 1.3em; } h4 { margin: 24px 0 16px; font-size: 1.2em; } h5 { margin: 24px 0 16px; font-size: 1em; } h6 { margin: 24px 0 16px; font-size: 0.95em; } blockquote { color: $gl-grayish-blue; font-size: inherit; padding: 8px 24px; margin: 16px 0; border-left: 3px solid $white-dark; } blockquote:dir(rtl) { border-left: 0; border-right: 3px solid $white-dark; } blockquote p { color: $gl-grayish-blue !important; font-size: inherit; line-height: 1.5; &:last-child { margin: 0; } } p { color: $gl-text-color; margin: 0 0 16px; } table { @extend .table; @extend .table-bordered; margin: 16px 0; color: $gl-text-color; th { background: $label-gray-bg; } } table:dir(rtl) th { text-align: right; } pre { margin-bottom: 16px; font-size: 13px; line-height: 1.6em; overflow-x: auto; border-radius: 2px; &.plain-readme { background: none; border: 0; padding: 0; margin: 0; font-size: 14px; } } p > code { font-weight: inherit; } ul, ol { padding: 0; margin: 0 0 16px; } ul:dir(rtl), ol:dir(rtl) { margin: 3px 28px 3px 0 !important; } li { line-height: 1.6em; margin-left: 25px; padding-left: 3px; /* Normalize the bullet position on webkit. */ @include on-webkit-only { margin-left: 28px; padding-left: 0; } } ul.task-list { > 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 { position: absolute; left: 8px; top: 5px; } } } a[href*="/uploads/"], a[href*="storage.googleapis.com/google-code-attachments/"] { &::before { margin-right: 4px; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; content: "\f0c6"; } &:hover::before { text-decoration: none; } } a.no-attachment-icon { &::before { display: none; } } /* Link to current header. */ h1, h2, h3, h4, h5, h6 { position: relative; a.anchor { left: -16px; position: absolute; text-decoration: none; outline: none; &::after { content: image-url('icon_anchor.svg'); visibility: hidden; } } &:hover > a.anchor::after { visibility: visible; } } } /** * Headers * */ body { -webkit-text-shadow: $body-text-shadow 0 0 1px; } .page-title { margin-top: $gl-padding; line-height: 1.3; font-size: 1.25em; font-weight: $gl-font-weight-bold; &:last-child { margin-bottom: 0; } } .page-title-empty { margin-top: 0; line-height: 1.3; font-size: 1.25em; font-weight: $gl-font-weight-bold; margin: 12px 7px; } h1, h2, h3, h4, h5, h6 { color: $gl-text-color; font-weight: $gl-font-weight-bold; } .light-header { font-weight: $gl-font-weight-bold; } /** CODE **/ pre { font-family: $monospace_font; } code { &.key-fingerprint { background: $body-bg; color: $text-color; } } 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; } @include new-style-dropdown('.git-revision-dropdown'); /** * Apply Markdown typography * */ .wiki { @include md-typography; } .md { @include md-typography; } /** * Textareas intended for GFM * */ textarea.js-gfm-input { font-family: $monospace_font; font-size: 13px; } .strikethrough { text-decoration: line-through; } h1, h2, h3, h4 { small { color: $gl-text-color; } } .text-right-lg { @media (min-width: $screen-lg-min) { text-align: right; } } .idiff.deletion { background: $line-removed-dark; } .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; } }