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