BookStack Code Mirror - bookstack/blob - resources/sass/_text.scss

   1 /**
   2  * Fonts
   3  */
   4
   5 body, button, input, select, label, textarea {
   6   font-family: var(--font-body);
   7 }
   8 pre, #markdown-editor-input, .text-mono, .code-base {
   9   font-family: var(--font-code);
  10 }
  11
  12 /*
  13  * Header Styles
  14  */
  15
  16 h1 {
  17   font-size: 3.425em;
  18   line-height: 1.22222222em;
  19   margin-top: 0.48888889em;
  20   margin-bottom: 0.48888889em;
  21 }
  22 h2 {
  23   font-size: 2.8275em;
  24   line-height: 1.294117647em;
  25   margin-top: 0.8627451em;
  26   margin-bottom: 0.43137255em;
  27 }
  28 h3 {
  29   font-size: 2.333em;
  30   line-height: 1.221428572em;
  31   margin-top: 0.78571429em;
  32   margin-bottom: 0.43137255em;
  33 }
  34 h4 {
  35   font-size: 1.666em;
  36   line-height: 1.375em;
  37   margin-top: 0.78571429em;
  38   margin-bottom: 0.43137255em;
  39 }
  40
  41 h1, h2, h3, h4, h5, h6 {
  42   font-weight: 400;
  43   position: relative;
  44   display: block;
  45   font-family: var(--font-heading, var(--font-body));
  46   @include lightDark(color, #222, #BBB);
  47   .subheader {
  48     font-size: 0.5em;
  49     line-height: 1em;
  50     color: lighten($text-dark, 32%);
  51   }
  52 }
  53
  54 h5 {
  55   font-size: 1.4em;
  56 }
  57
  58 h5, h6 {
  59   line-height: 1.2em;
  60   margin-top: 0.78571429em;
  61   margin-bottom: 0.66em;
  62 }
  63
  64 @include smaller-than($s) {
  65   h1 {
  66     font-size: 2.8275em;
  67   }
  68   h2 {
  69     font-size: 2.333em;
  70   }
  71   h3 {
  72     font-size: 1.666em;
  73   }
  74   h4 {
  75     font-size: 1.333em;
  76   }
  77   h5 {
  78     font-size: 1.161616em;
  79   }
  80 }
  81
  82 .list-heading {
  83   font-size: 2rem;
  84 }
  85
  86 h2.list-heading {
  87   font-size: 1.333rem;
  88 }
  89
  90 /*
  91  * Link styling
  92  */
  93 a {
  94   color: var(--color-link);
  95   fill: currentColor;
  96   cursor: pointer;
  97   text-decoration: none;
  98   transition: filter ease-in-out 80ms;
  99   line-height: 1.6;
 100   &:hover {
 101     text-decoration: underline;
 102   }
 103   &.icon {
 104     display: inline-block;
 105   }
 106   svg {
 107     position: relative;
 108     display: inline-block;
 109   }
 110   &:focus img:only-child {
 111     outline: 2px dashed var(--color-link);
 112     outline-offset: 2px;
 113   }
 114 }
 115
 116 a.no-link-style {
 117   color: inherit;
 118   &:hover {
 119     text-decoration: none;
 120   }
 121 }
 122
 123 .blended-links a {
 124   color: inherit;
 125   svg {
 126     fill: currentColor;
 127   }
 128 }
 129
 130 /*
 131  * Other HTML Text Elements
 132  */
 133 p, ul, ol, pre, table, blockquote {
 134   margin-top: 0.3em;
 135   margin-bottom: 1.375em;
 136 }
 137
 138 hr {
 139   border: 0;
 140   height: 1px;
 141   @include lightDark(background, #eaeaea, #555);
 142   margin-bottom: $-l;
 143   &.faded {
 144     background-image: linear-gradient(to right, #FFF, #e3e0e0 20%, #e3e0e0 80%, #FFF);
 145   }
 146   &.darker {
 147     @include lightDark(background, #DDD, #666);
 148   }
 149   &.margin-top, &.even {
 150     margin-top: $-l;
 151   }
 152 }
 153
 154 strong, b, .bold, .strong {
 155   font-weight: bold;
 156   > strong, > b, > .bold, > .strong {
 157     font-weight: bolder;
 158   }
 159 }
 160
 161 em, i, .italic {
 162   font-style: italic;
 163 }
 164
 165 small, p.small, span.small, .text-small {
 166   font-size: 0.75rem;
 167 }
 168
 169 sup, .superscript {
 170   vertical-align: super;
 171   font-size: 0.8em;
 172 }
 173
 174 sub, .subscript {
 175   vertical-align: sub;
 176   font-size: 0.8em;
 177 }
 178
 179 pre {
 180   font-size: 12px;
 181   border: 1px solid #DDD;
 182   @include lightDark(background-color, #FFF, #2B2B2B);
 183   @include lightDark(border-color, #DDD, #111);
 184   border-radius: 4px;
 185   padding-inline-start: 26px;
 186   position: relative;
 187   padding-top: 3px;
 188   padding-bottom: 3px;
 189   &:before {
 190     content: '';
 191     display: block;
 192     position: absolute;
 193     top: 0;
 194     width: 22.4px;
 195     inset-inline-start: 0;
 196     height: 100%;
 197     @include lightDark(background-color, #f5f5f5, #313335);
 198     @include lightDark(border-inline-end, 1px solid #DDD, none);
 199   }
 200 }
 201
 202 @media print {
 203   pre {
 204     padding-left: 12px;
 205   }
 206   pre:before {
 207     display: none;
 208   }
 209 }
 210
 211 blockquote {
 212   display: block;
 213   position: relative;
 214   border-left: 4px solid transparent;
 215   border-left-color: var(--color-primary);
 216   @include lightDark(background-color, #f8f8f8, #333);
 217   padding: $-s $-m $-s $-xl;
 218   overflow: auto;
 219   &:before {
 220     content: "\201C";
 221     font-size: 2em;
 222     font-weight: bold;
 223     position: absolute;
 224     top: $-s;
 225     left: $-s;
 226     color: lighten($text-dark, 20%);
 227   }
 228 }
 229
 230 .text-mono {
 231   font-family: var(--font-code);
 232 }
 233
 234 .text-uppercase {
 235   text-transform: uppercase;
 236 }
 237
 238 .text-capitals {
 239   text-transform: capitalize;
 240 }
 241
 242 .code-base {
 243   font-size: 0.84em;
 244   border: 1px solid #DDD;
 245   border-radius: 3px;
 246   @include lightDark(background-color, #f8f8f8, #2b2b2b);
 247   @include lightDark(border-color, #DDD, #444);
 248 }
 249
 250 code {
 251   @extend .code-base;
 252   display: inline;
 253   padding: 1px 3px;
 254   white-space:pre-wrap;
 255   line-height: 1.2em;
 256 }
 257
 258 span.code {
 259   @extend .code-base;
 260   padding: 1px $-xs;
 261 }
 262
 263 pre code {
 264   background-color: transparent;
 265   border: 0;
 266   font-size: 1em;
 267   display: block;
 268   line-height: 1.6;
 269 }
 270
 271 span.highlight {
 272   font-weight: bold;
 273   padding: 2px 4px;
 274 }
 275
 276 /*
 277  * Lists
 278  */
 279 ul, ol {
 280   padding-left: $-m * 2.0;
 281   padding-right: $-m * 2.0;
 282   display: flow-root;
 283   p {
 284     margin: 0;
 285   }
 286 }
 287 ul {
 288   list-style: disc;
 289   ul {
 290     list-style: circle;
 291   }
 292   label {
 293     margin: 0;
 294   }
 295 }
 296
 297 ol {
 298   list-style: decimal;
 299 }
 300
 301 li > ol, li > ul {
 302   margin-top: 0;
 303   margin-bottom: 0;
 304   margin-block-end: 0;
 305   margin-block-start: 0;
 306   padding-block-end: 0;
 307   padding-block-start: 0;
 308   padding-left: $-m * 1.2;
 309   padding-right: $-m * 1.2;
 310 }
 311
 312 /**
 313  * Checkbox lists
 314  * Some styles duplicated for supporting logical units (eg. inline-end) while
 315  * providing fallbacks to non-logical rules, so RTL is natively supported where possible.
 316  */
 317 li.checkbox-item, li.task-list-item {
 318   display: list-item;
 319   list-style: none;
 320   margin-left: -($-m * 1.2);
 321   margin-inline-start: -($-m * 1.2);
 322   margin-inline-end: 0;
 323   input[type="checkbox"] {
 324     margin-right: $-xs;
 325     margin-inline-end: $-xs;
 326     margin-inline-start: 0;
 327   }
 328   li.checkbox-item, li.task-list-item {
 329     margin-left: $-xs;
 330     margin-inline-start: $-xs;
 331     margin-inline-end: 0;
 332   }
 333 }
 334
 335 /*
 336  * Generic text styling classes
 337  */
 338 .underlined {
 339   text-decoration: underline;
 340 }
 341
 342 .text-center {
 343   text-align: center;
 344 }
 345 .text-left {
 346   text-align: start;
 347 }
 348 .text-right {
 349   text-align: end;
 350 }
 351
 352 @each $sizeLetter, $size in $screen-sizes {
 353   @include larger-than($size) {
 354     .text-#{$sizeLetter}-center {
 355       text-align: center;
 356     }
 357     .text-#{$sizeLetter}-left {
 358       text-align: start;
 359     }
 360     .text-#{$sizeLetter}-right {
 361       text-align: end;
 362     }
 363   }
 364 }
 365
 366 .text-bigger {
 367   font-size: 1.1em;
 368 }
 369
 370 .text-large {
 371   font-size: 1.6666em;
 372 }
 373
 374 .no-color {
 375   color: inherit;
 376 }
 377
 378 .break-text {
 379   white-space: normal;
 380   word-wrap: break-word;
 381   overflow-wrap: break-word;
 382 }
 383
 384 .text-limit-lines-1 {
 385   white-space: nowrap;
 386   overflow: hidden;
 387   text-overflow: ellipsis;
 388 }
 389
 390 .text-limit-lines-2 {
 391   // -webkit use here is actually standardised cross-browser:
 392   // https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
 393   display: -webkit-box;
 394   -webkit-box-orient: vertical;
 395   -webkit-line-clamp: 2;
 396   overflow: hidden;
 397 }
 398
 399 /**
 400  * Grouping
 401  */
 402 .header-group {
 403   margin: $-m 0;
 404   h1, h2, h3, h4, h5, h6 {
 405     margin: 0;
 406   }
 407 }
 408
 409 span.sep {
 410   color: #BBB;
 411   padding: 0 $-xs;
 412 }
 413
 414 .list > * {
 415   display: block;
 416 }
 417
 418 /**
 419   * Icons
 420   */
 421 .svg-icon {
 422   width: 1em;
 423   height: 1em;
 424   display: inline-block;
 425   position: relative;
 426   bottom: -0.105em;
 427   margin-inline-end: $-xs;
 428   pointer-events: none;
 429   fill: currentColor;
 430 }