778 lines
13 KiB
SCSS
778 lines
13 KiB
SCSS
/**
|
|
* Apply Markup (Markdown/AsciiDoc) typography
|
|
*
|
|
*/
|
|
.md {
|
|
color: $gl-text-color;
|
|
word-wrap: break-word;
|
|
|
|
[dir='auto'] {
|
|
text-align: initial;
|
|
}
|
|
|
|
*:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
> :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
p {
|
|
color: $gl-text-color;
|
|
margin: 0 0 16px;
|
|
|
|
> code {
|
|
font-weight: inherit;
|
|
}
|
|
|
|
a:not(.no-attachment-icon) img {
|
|
// Remove bottom padding because
|
|
// <p> already has $gl-padding bottom
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.media-container {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
margin-bottom: $gl-spacing-scale-2;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
details {
|
|
margin-bottom: $gl-padding;
|
|
|
|
> *:not(summary) {
|
|
margin-left: $gl-spacing-scale-5;
|
|
}
|
|
}
|
|
|
|
summary > * {
|
|
display: inline-block;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// Single code lines should wrap
|
|
code {
|
|
font-family: $monospace-font;
|
|
white-space: pre-wrap;
|
|
// Safari
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
word-break: keep-all;
|
|
@include gl-font-base;
|
|
}
|
|
|
|
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,
|
|
.blockquote {
|
|
font-size: inherit;
|
|
@include gl-text-gray-700;
|
|
@include gl-py-3;
|
|
@include gl-pl-6;
|
|
@include gl-my-3;
|
|
@include gl-mx-0;
|
|
@include gl-inset-border-l-4-gray-100;
|
|
|
|
&:dir(rtl) {
|
|
border-left: 0;
|
|
border-right: 3px solid $white-dark;
|
|
}
|
|
|
|
p {
|
|
line-height: 1.5;
|
|
@include gl-reset-color;
|
|
|
|
&:last-child {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
hr {
|
|
border-color: rgba($black, 0.15);
|
|
|
|
margin: 10px 0;
|
|
}
|
|
|
|
table:not(.code) {
|
|
margin: 16px 0;
|
|
color: $gl-text-color;
|
|
border: 0;
|
|
width: auto;
|
|
display: block;
|
|
overflow-x: auto;
|
|
|
|
tbody {
|
|
background-color: $white;
|
|
|
|
}
|
|
|
|
td,
|
|
th {
|
|
border: 1px solid $border-color;
|
|
}
|
|
|
|
tr {
|
|
th {
|
|
border-bottom: solid 2px $gray-200;
|
|
}
|
|
}
|
|
|
|
&.grid-none {
|
|
> thead > tr {
|
|
> th {
|
|
border-bottom-width: 0;
|
|
border-right-width: 0;
|
|
border-left-width: 0;
|
|
|
|
&:first-child {
|
|
border-left-width: 1px;
|
|
}
|
|
|
|
&:last-child {
|
|
border-right-width: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
> tbody {
|
|
> tr > td {
|
|
border-width: 0;
|
|
|
|
&:first-child {
|
|
border-left-width: 1px;
|
|
}
|
|
|
|
&:last-child {
|
|
border-right-width: 1px;
|
|
}
|
|
}
|
|
|
|
> tr:last-child > td {
|
|
border-bottom-width: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
&.grid-rows {
|
|
> thead > tr > th,
|
|
> tbody > tr > td {
|
|
border-right-width: 0;
|
|
border-left-width: 0;
|
|
}
|
|
|
|
> thead > tr {
|
|
> th:first-child {
|
|
border-left-width: 1px;
|
|
}
|
|
|
|
> th:last-child {
|
|
border-right-width: 1px;
|
|
}
|
|
}
|
|
|
|
> tbody > tr {
|
|
> td {
|
|
border-left-width: 0;
|
|
border-right-width: 0;
|
|
}
|
|
|
|
> td:first-child {
|
|
border-left-width: 1px;
|
|
}
|
|
|
|
> td:last-child {
|
|
border-right-width: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.grid-cols {
|
|
> thead > tr > th {
|
|
border-bottom-width: 0;
|
|
}
|
|
|
|
> tbody > tr > td {
|
|
border-top-width: 0;
|
|
border-bottom-width: 0;
|
|
}
|
|
|
|
> tbody > tr:last-child > td {
|
|
border-bottom-width: 1px;
|
|
}
|
|
}
|
|
|
|
&.frame-sides {
|
|
> thead > tr > th {
|
|
border-top-width: 0;
|
|
}
|
|
|
|
> tbody > tr:last-child > td {
|
|
border-bottom-width: 0;
|
|
}
|
|
}
|
|
|
|
&.frame-topbot,
|
|
&.frame-ends {
|
|
> thead > tr > th:first-child,
|
|
> tbody > tr > td:first-child {
|
|
border-left-width: 0;
|
|
}
|
|
|
|
> thead > tr > th:last-child,
|
|
> tbody > tr > td:last-child {
|
|
border-right-width: 0;
|
|
}
|
|
}
|
|
|
|
&.frame-none {
|
|
> thead > tr > th {
|
|
border-top-width: 0;
|
|
}
|
|
|
|
> tbody > tr:last-child > td {
|
|
border-bottom-width: 0;
|
|
}
|
|
|
|
> thead > tr > th:first-child,
|
|
> tbody > tr > td:first-child {
|
|
border-left-width: 0;
|
|
}
|
|
|
|
> thead > tr > th:last-child,
|
|
> tbody > tr > td:last-child {
|
|
border-right-width: 0;
|
|
}
|
|
}
|
|
|
|
&.stripes-all tr,
|
|
&.stripes-odd tr:nth-of-type(odd),
|
|
&.stripes-even tr:nth-of-type(even),
|
|
&.stripes-hover tr:hover {
|
|
background: $gray-light;
|
|
}
|
|
}
|
|
|
|
table:dir(rtl) th {
|
|
text-align: right;
|
|
}
|
|
|
|
pre {
|
|
margin-bottom: 16px;
|
|
line-height: 1.6em;
|
|
overflow-x: auto;
|
|
border-radius: $border-radius-default;
|
|
|
|
// Multi-line code blocks should scroll horizontally
|
|
code {
|
|
white-space: pre;
|
|
// Safari
|
|
word-wrap: normal;
|
|
overflow-wrap: normal;
|
|
}
|
|
|
|
&.plain-readme {
|
|
background: none;
|
|
border: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
dd {
|
|
margin-left: $gl-padding;
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
padding: 0;
|
|
margin: 0 0 16px;
|
|
|
|
// Lists embedded in other lists can be "loose" or "tight"
|
|
// Remove bottom margin for all lists (default for tight lists)
|
|
ul,
|
|
ol {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// Loose lists need bottom margin added back
|
|
p ~ ol,
|
|
p ~ ul {
|
|
margin-bottom: 16px;
|
|
}
|
|
}
|
|
|
|
ul:dir(rtl),
|
|
ol:dir(rtl) {
|
|
margin: 3px 28px 3px 0 !important;
|
|
}
|
|
|
|
> ul {
|
|
list-style-type: disc;
|
|
|
|
ul {
|
|
list-style-type: circle;
|
|
|
|
ul {
|
|
list-style-type: square;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul.checklist,
|
|
ul.none,
|
|
ol.none,
|
|
ul.no-bullet,
|
|
ol.no-bullet,
|
|
ol.unnumbered,
|
|
ul.unstyled,
|
|
ol.unstyled {
|
|
list-style-type: none;
|
|
|
|
li {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
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-inline-start: 28px;
|
|
margin-inline-start: 0 !important;
|
|
|
|
> p > input.task-list-item-checkbox,
|
|
> input.task-list-item-checkbox {
|
|
position: absolute;
|
|
inset-inline-start: $gl-padding-8;
|
|
inset-block-start: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
li.inapplicable {
|
|
// for a single line list item, no paragraph (tight list)
|
|
> s {
|
|
color: $gl-text-color-disabled;
|
|
}
|
|
|
|
// additional blocks, other than paragraphs
|
|
> div {
|
|
text-decoration: line-through;
|
|
color: $gl-text-color-disabled;
|
|
}
|
|
|
|
// because of the embedded checkbox, putting line-through on the entire
|
|
// paragraph causes the space between the checkbox and the text to have the
|
|
// line-through. Targeting just the `s` fixes this
|
|
> p:first-of-type > s {
|
|
color: $gl-text-color-disabled;
|
|
}
|
|
|
|
> p:not(:first-of-type) {
|
|
text-decoration: line-through;
|
|
color: $gl-text-color-disabled;
|
|
}
|
|
|
|
.drag-icon {
|
|
color: $gl-text-color;
|
|
}
|
|
}
|
|
|
|
a.with-attachment-icon,
|
|
a[href*='/uploads/'],
|
|
a[href*='storage.googleapis.com/google-code-attachments/'] {
|
|
&::before {
|
|
margin-right: 4px;
|
|
|
|
font-style: normal;
|
|
font-size: inherit;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
content: '📎';
|
|
}
|
|
}
|
|
|
|
a[href*='/uploads/'],
|
|
a[href*='storage.googleapis.com/google-code-attachments/'] {
|
|
&.no-attachment-icon {
|
|
&::before {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Link to current header. */
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
a.anchor {
|
|
float: left;
|
|
margin-left: -20px;
|
|
text-decoration: none;
|
|
outline: none;
|
|
|
|
&::after {
|
|
content: image-url('icon_anchor.svg');
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
&:hover > a.anchor::after {
|
|
visibility: visible;
|
|
}
|
|
|
|
> a.anchor:focus::after {
|
|
visibility: visible;
|
|
outline: auto;
|
|
}
|
|
}
|
|
|
|
.big {
|
|
font-size: larger;
|
|
}
|
|
|
|
figcaption,
|
|
.small {
|
|
font-size: smaller;
|
|
}
|
|
|
|
.underline {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.overline {
|
|
text-decoration: overline;
|
|
}
|
|
|
|
.line-through {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
// Custom Font Awesome styles that render emojis in asciidoc
|
|
.fa {
|
|
display: inline-block;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.admonitionblock td.icon [class^='fa icon-'] {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.admonitionblock td.icon .icon-warning::before {
|
|
content: '⚠';
|
|
}
|
|
|
|
.admonitionblock td.icon .icon-important::before {
|
|
content: '❗';
|
|
}
|
|
|
|
.admonitionblock td.icon .icon-tip::before {
|
|
content: '💡';
|
|
}
|
|
|
|
.admonitionblock td.icon .icon-note::before {
|
|
content: '📌';
|
|
}
|
|
|
|
.admonitionblock td.icon .icon-caution::before {
|
|
content: '🔥';
|
|
}
|
|
|
|
.fa-square-o::before {
|
|
content: '\2610';
|
|
}
|
|
|
|
.fa-check-square-o::before {
|
|
content: '\2611';
|
|
}
|
|
|
|
.admonitionblock td.icon {
|
|
width: 1%;
|
|
}
|
|
|
|
.metrics-embed {
|
|
h3.popover-header {
|
|
/** Override <h3> .popover-header
|
|
* as embed metrics do not follow the same
|
|
* style as default md <h3> (which are deeply nested)
|
|
*/
|
|
margin: 0;
|
|
font-size: $gl-font-size-small;
|
|
}
|
|
}
|
|
|
|
.gl-dropdown-item {
|
|
margin: 0;
|
|
padding: 0;
|
|
line-height: 1rem;
|
|
}
|
|
|
|
/* AsciiDoc(tor) built-in alignment roles */
|
|
|
|
.text-left {
|
|
text-align: left !important;
|
|
}
|
|
|
|
.text-right {
|
|
text-align: right !important;
|
|
}
|
|
|
|
.text-center {
|
|
text-align: center !important;
|
|
}
|
|
|
|
.text-justify {
|
|
text-align: justify !important;
|
|
}
|
|
|
|
@include email-code-block;
|
|
}
|
|
|
|
/**
|
|
* Links
|
|
*
|
|
*/
|
|
a:focus-visible {
|
|
@include gl-focus($outline: true, $outline-offset: $outline-width);
|
|
}
|
|
|
|
/**
|
|
* Headers
|
|
*
|
|
*/
|
|
body {
|
|
-webkit-text-shadow: $body-text-shadow 0 0 1px;
|
|
}
|
|
|
|
.page-title {
|
|
margin: #{2 * $grid-size} 0;
|
|
line-height: 1.3;
|
|
|
|
&.with-button {
|
|
line-height: 34px;
|
|
}
|
|
|
|
}
|
|
|
|
.page-title-empty {
|
|
margin: 12px 0;
|
|
line-height: 1.3;
|
|
font-size: 1.25em;
|
|
font-weight: $gl-font-weight-bold;
|
|
}
|
|
|
|
.light-header {
|
|
font-weight: $gl-font-weight-bold;
|
|
}
|
|
|
|
/** CODE **/
|
|
pre {
|
|
@include gl-relative;
|
|
font-family: $monospace-font;
|
|
display: block;
|
|
padding: $gl-padding-8 $input-horizontal-padding;
|
|
margin: 0 0 $gl-padding-8;
|
|
@include gl-font-base;
|
|
word-break: break-all;
|
|
word-wrap: break-word;
|
|
color: $gl-text-color;
|
|
background-color: $gray-light;
|
|
border: 1px solid $gray-100;
|
|
border-radius: $border-radius-small;
|
|
|
|
// Select only code elements that will have the copy code button
|
|
.markdown-code-block & {
|
|
padding: $input-horizontal-padding;
|
|
}
|
|
}
|
|
|
|
code {
|
|
&.key-fingerprint {
|
|
background: $body-bg;
|
|
color: $text-color;
|
|
}
|
|
}
|
|
|
|
.monospace {
|
|
@include gl-font-monospace;
|
|
}
|
|
|
|
.weight-normal {
|
|
font-weight: $gl-font-weight-normal;
|
|
}
|
|
|
|
.commit-sha,
|
|
.ref-name {
|
|
font-family: $monospace-font;
|
|
font-size: 95%;
|
|
}
|
|
|
|
.git-revision-dropdown .dropdown-content li:not(.dropdown-menu-empty-item) a {
|
|
font-family: $monospace-font;
|
|
font-size: 95%;
|
|
word-break: break-all;
|
|
}
|
|
|
|
/**
|
|
* Textareas intended for GFM
|
|
*
|
|
*/
|
|
textarea.js-gfm-input {
|
|
font-family: $monospace-font;
|
|
@include gl-font-base;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
small {
|
|
color: $gl-text-color;
|
|
}
|
|
}
|
|
|
|
.text-right-md {
|
|
@include media-breakpoint-up(md) {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.text-right-lg {
|
|
@include media-breakpoint-up(lg) {
|
|
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.
|
|
*/
|
|
/* stylelint-disable selector-no-vendor-prefix */
|
|
input,
|
|
textarea {
|
|
&::-webkit-input-placeholder {
|
|
color: $gl-text-color-tertiary;
|
|
}
|
|
|
|
// support firefox 19+ vendor prefix
|
|
&::-moz-placeholder {
|
|
color: $gl-text-color-tertiary;
|
|
opacity: 1; // FF defaults to 0.54
|
|
}
|
|
|
|
// support Edge vendor prefix
|
|
&::-ms-input-placeholder {
|
|
color: $gl-text-color-tertiary;
|
|
}
|
|
|
|
// support IE vendor prefix
|
|
&:-ms-input-placeholder {
|
|
color: $gl-text-color-tertiary;
|
|
}
|
|
}
|
|
/* stylelint-enable */
|
|
|
|
.lh-100 { line-height: 1; }
|
|
|
|
wbr {
|
|
display: inline-block;
|
|
}
|
|
|
|
// The font used in Monaco editor - Web IDE, Snippets, single file editor
|
|
:root {
|
|
--code-editor-font: #{$monospace-font};
|
|
}
|