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

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