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);
  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-left: 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     left: 0;
 196     height: 100%;
 197     @include lightDark(background-color, #f5f5f5, #313335);
 198     @include lightDark(border-right, 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 var(--color-primary);
 215   @include lightDark(background-color, #f8f8f8, #333);
 216   padding: $-s $-m $-s $-xl;
 217   overflow: auto;
 218   &:before {
 219     content: "\201C";
 220     font-size: 2em;
 221     font-weight: bold;
 222     position: absolute;
 223     top: $-s;
 224     left: $-s;
 225     color: lighten($text-dark, 20%);
 226   }
 227 }
 228
 229 .text-mono {
 230   font-family: var(--font-code);
 231 }
 232
 233 .text-uppercase {
 234   text-transform: uppercase;
 235 }
 236
 237 .text-capitals {
 238   text-transform: capitalize;
 239 }
 240
 241 .code-base {
 242   font-size: 0.84em;
 243   border: 1px solid #DDD;
 244   border-radius: 3px;
 245   @include lightDark(background-color, #f8f8f8, #2b2b2b);
 246   @include lightDark(border-color, #DDD, #444);
 247 }
 248
 249 code {
 250   @extend .code-base;
 251   display: inline;
 252   padding: 1px 3px;
 253   white-space:pre-wrap;
 254   line-height: 1.2em;
 255 }
 256
 257 span.code {
 258   @extend .code-base;
 259   padding: 1px $-xs;
 260 }
 261
 262 pre code {
 263   background-color: transparent;
 264   border: 0;
 265   font-size: 1em;
 266   display: block;
 267   line-height: 1.6;
 268 }
 269
 270 span.highlight {
 271   font-weight: bold;
 272   padding: 2px 4px;
 273 }
 274
 275 /*
 276  * Lists
 277  */
 278 ul, ol {
 279   padding-left: $-m * 2.0;
 280   padding-right: $-m * 2.0;
 281   display: flow-root;
 282   p {
 283     margin: 0;
 284   }
 285 }
 286 ul {
 287   list-style: disc;
 288   ul {
 289     list-style: circle;
 290   }
 291   label {
 292     margin: 0;
 293   }
 294 }
 295
 296 ol {
 297   list-style: decimal;
 298 }
 299
 300 li > ol, li > ul {
 301   margin-top: 0;
 302   margin-bottom: 0;
 303   margin-block-end: 0;
 304   margin-block-start: 0;
 305   padding-block-end: 0;
 306   padding-block-start: 0;
 307   padding-left: $-m * 1.2;
 308   padding-right: $-m * 1.2;
 309 }
 310
 311 li.checkbox-item, li.task-list-item {
 312   display: list-item;
 313   list-style: none;
 314   margin-left: -($-m * 1.2);
 315   input[type="checkbox"] {
 316     margin-right: $-xs;
 317   }
 318   li.checkbox-item, li.task-list-item {
 319     margin-left: $-xs;
 320   }
 321 }
 322
 323 /*
 324  * Generic text styling classes
 325  */
 326 .underlined {
 327   text-decoration: underline;
 328 }
 329
 330 .text-center {
 331   text-align: center;
 332 }
 333 .text-left {
 334   text-align: start;
 335 }
 336 .text-right {
 337   text-align: end;
 338 }
 339
 340 @each $sizeLetter, $size in $screen-sizes {
 341   @include larger-than($size) {
 342     .text-#{$sizeLetter}-center {
 343       text-align: center;
 344     }
 345     .text-#{$sizeLetter}-left {
 346       text-align: start;
 347     }
 348     .text-#{$sizeLetter}-right {
 349       text-align: end;
 350     }
 351   }
 352 }
 353
 354 .text-bigger {
 355   font-size: 1.1em;
 356 }
 357
 358 .text-large {
 359   font-size: 1.6666em;
 360 }
 361
 362 .no-color {
 363   color: inherit;
 364 }
 365
 366 .break-text {
 367   word-wrap: break-word;
 368   overflow-wrap: break-word;
 369 }
 370
 371 .text-limit-lines-1 {
 372   white-space: nowrap;
 373   overflow: hidden;
 374   text-overflow: ellipsis;
 375 }
 376
 377 .text-limit-lines-2 {
 378   // -webkit use here is actually standardised cross-browser:
 379   // https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
 380   display: -webkit-box;
 381   -webkit-box-orient: vertical;
 382   -webkit-line-clamp: 2;
 383   overflow: hidden;
 384 }
 385
 386 /**
 387  * Grouping
 388  */
 389 .header-group {
 390   margin: $-m 0;
 391   h1, h2, h3, h4, h5, h6 {
 392     margin: 0;
 393   }
 394 }
 395
 396 span.sep {
 397   color: #BBB;
 398   padding: 0 $-xs;
 399 }
 400
 401 .list > * {
 402   display: block;
 403 }
 404
 405 /**
 406   * Icons
 407   */
 408 .svg-icon {
 409   width: 1em;
 410   height: 1em;
 411   display: inline-block;
 412   position: relative;
 413   bottom: -0.105em;
 414   margin-inline-end: $-xs;
 415   pointer-events: none;
 416   fill: currentColor;
 417 }