BigW Consortium Gitlab

typography.scss 5.98 KB
Newer Older
1
@mixin md-typography {
2
  color: $gl-text-color;
3
  word-wrap: break-word;
4 5 6 7 8 9 10

  a {
    color: $md-link-color;
  }

  img {
    max-width: 100%;
11 12 13 14 15 16 17
    margin: 0 0 8px;
  }

  p a:not(.no-attachment-icon) img {
    // Remove bottom padding because
    // <p> already has $gl-padding bottom
    margin-bottom: 0;
18 19
  }

20
  *:first-child:not(.katex-display) {
21 22 23
    margin-top: 0;
  }

24 25 26 27
  > :last-child {
    margin-bottom: 0;
  }

28
  // Single code lines should wrap
29 30
  code {
    font-family: $monospace_font;
31
    white-space: pre-wrap;
32 33 34
    word-wrap: normal;
  }

35 36 37 38 39 40 41
  // Multi-line code blocks should scroll horizontally
  pre {
    code {
      white-space: pre;
    }
  }

42 43 44 45 46
  kbd {
    display: inline-block;
    padding: 3px 5px;
    font-size: 11px;
    line-height: 10px;
47
    color: $kdb-color;
48
    vertical-align: middle;
49
    background-color: $kdb-bg;
50 51
    border-width: 1px;
    border-style: solid;
52
    border-color: $kdb-border $kdb-border $kdb-border-bottom;
53 54
    border-image: none;
    border-radius: 3px;
55
    box-shadow: 0 -1px 0 $kdb-shadow inset;
56 57 58
  }

  h1 {
59
    font-size: 1.75em;
60
    font-weight: 600;
61 62
    margin: 24px 0 16px;
    padding-bottom: 0.3em;
63
    border-bottom: 1px solid $white-dark;
64
    color: $gl-text-color;
65 66 67 68

    &:first-child {
      margin-top: 0;
    }
69 70 71
  }

  h2 {
72
    font-size: 1.5em;
73
    font-weight: 600;
74 75 76
    margin: 24px 0 16px;
    padding-bottom: 0.3em;
    border-bottom: 1px solid $white-dark;
77
    color: $gl-text-color;
78 79 80
  }

  h3 {
81
    margin: 24px 0 16px;
82
    font-size: 1.3em;
83 84 85
  }

  h4 {
86
    margin: 24px 0 16px;
87
    font-size: 1.2em;
88 89 90
  }

  h5 {
91
    margin: 24px 0 16px;
92
    font-size: 1em;
93 94 95
  }

  h6 {
96
    margin: 24px 0 16px;
97
    font-size: 0.95em;
98 99 100
  }

  blockquote {
101
    color: $gl-grayish-blue;
102
    font-size: inherit;
103 104
    padding: 8px 24px;
    margin: 16px 0;
105
    border-left: 3px solid $white-dark;
106 107
  }

108 109
  blockquote:dir(rtl) {
    border-left: 0;
110
    border-right: 3px solid $white-dark;
111 112
  }

113
  blockquote p {
114
    color: $gl-grayish-blue !important;
115
    margin: 0;
116
    font-size: inherit;
117 118 119 120
    line-height: 1.5;
  }

  p {
121
    color: $gl-text-color;
122
    margin: 0 0 16px;
123 124 125 126 127
  }

  table {
    @extend .table;
    @extend .table-bordered;
128
    margin: 16px 0;
129
    color: $gl-text-color;
130

131
    th {
132
      background: $label-gray-bg;
133 134 135
    }
  }

136 137 138 139
  table:dir(rtl) th {
    text-align: right;
  }

140
  pre {
141
    margin-bottom: 16px;
142 143 144
    font-size: 13px;
    line-height: 1.6em;
    overflow-x: auto;
Clement Ho committed
145
    border-radius: 2px;
146 147 148 149 150 151 152 153 154


    &.plain-readme {
      background: none;
      border: none;
      padding: 0;
      margin: 0;
      font-size: 14px;
    }
155 156 157 158 159 160
  }

  p > code {
    font-weight: inherit;
  }

161 162
  ul,
  ol {
163
    padding: 0;
164
    margin: 0 0 16px;
165 166
  }

167 168
  ul:dir(rtl),
  ol:dir(rtl) {
169 170 171
    margin: 3px 28px 3px 0 !important;
  }

172 173
  li {
    line-height: 1.6em;
174 175 176 177 178 179 180 181 182 183 184
    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 {
185
    > li.task-list-item {
186 187
      list-style-type: none;
      position: relative;
188
      min-height: 22px;
189 190 191
      padding-left: 28px;
      margin-left: 0 !important;

192
      > input.task-list-item-checkbox {
193 194 195 196 197
        position: absolute;
        left: 8px;
        top: 5px;
      }
    }
198 199
  }

200 201
  a[href*="/uploads/"],
  a[href*="storage.googleapis.com/google-code-attachments/"] {
202
    &::before {
203 204 205 206 207 208 209 210 211
      margin-right: 4px;

      font: normal normal normal 14px/1 FontAwesome;
      font-size: inherit;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      content: "\f0c6";
    }

212
    &:hover::before {
213 214 215
      text-decoration: none;
    }
  }
216

217
  a.no-attachment-icon {
218
    &::before {
219 220 221 222
      display: none;
    }
  }

223
  /* Link to current header. */
224 225 226 227 228 229
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
230 231 232
    position: relative;

    a.anchor {
233 234 235
      left: -16px;
      position: absolute;
      text-decoration: none;
236
      outline: none;
237

238
      &::after {
239
        content: image-url('icon_anchor.svg');
240 241
        visibility: hidden;
      }
242 243
    }

244
    &:hover > a.anchor::after {
245
      visibility: visible;
246 247
    }
  }
248 249 250
}


251
/**
252
 * Headers
253
 *
254
 */
Andrey committed
255
body {
256
  -webkit-text-shadow: $body-text-shadow 0 0 1px;
Andrey committed
257
}
258

259
.page-title {
260
  margin-top: $gl-padding;
261 262 263
  line-height: 1.3;
  font-size: 1.25em;
  font-weight: 600;
264 265 266 267

  &:last-child {
    margin-bottom: 0;
  }
Andrey committed
268 269 270
}

.page-title-empty {
271
  margin-top: 0;
Andrey committed
272 273 274
  line-height: 1.3;
  font-size: 1.25em;
  font-weight: 600;
275
  margin: 12px 7px;
276 277
}

278 279 280 281 282 283
h1,
h2,
h3,
h4,
h5,
h6 {
284
  color: $gl-text-color;
Phil Hughes committed
285
  font-weight: 600;
286 287
}

288 289 290 291
.light-header {
  font-weight: 600;
}

292 293
/** CODE **/
pre {
294
  font-family: $monospace_font;
295 296
}

297 298 299 300 301 302 303
code {
  &.key-fingerprint {
    background: $body-bg;
    color: $text-color;
  }
}

304 305 306 307
a > code {
  color: $link-color;
}

308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325
.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;
}

326
/**
327
 * Apply Markdown typography
328 329 330
 *
 */
.wiki {
331
  @include md-typography;
332
}
333 334 335 336

.md {
  @include md-typography;
}
337 338 339 340 341

/**
 * Textareas intended for GFM
 *
 */
342 343 344 345 346
textarea.js-gfm-input {
  font-family: $monospace_font;
  font-size: 13px;
}

347 348
.strikethrough {
  text-decoration: line-through;
349
}
350

351 352 353 354
h1,
h2,
h3,
h4 {
355
  small {
356
    color: $gl-text-color;
357 358
  }
}
359 360 361 362 363 364

.text-right-lg {
  @media (min-width: $screen-lg-min) {
    text-align: right;
  }
}
365 366

.idiff.deletion {
367
  background: $line-removed-dark;
368 369 370
}

.idiff.addition {
371
  background: $line-added-dark;
372
}
Andy committed
373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401


/**
 * 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;
  }
}