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

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