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