BookStack Code Mirror - bookstack/blob - resources/assets/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   color: #555;
  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   font-weight: 500;
  59   line-height: 1.2em;
  60   margin-top: 0.78571429em;
  61   margin-bottom: 0.66em;
  62 }
  63
  64 /*
  65  * Link styling
  66  */
  67 a, .link {
  68   color: $primary;
  69   cursor: pointer;
  70   text-decoration: none;
  71   transition: color ease-in-out 80ms;
  72   line-height: 1.6;
  73   &:hover {
  74     text-decoration: underline;
  75     color: darken($primary, 20%);
  76   }
  77   i {
  78     padding-right: $-s;
  79   }
  80   i.zmdi-hc-flip-horizontal {
  81     padding-right: 0;
  82     padding-left: $-s;
  83   }
  84   &.icon {
  85     display: inline-block;
  86   }
  87   svg {
  88     position: relative;
  89     display: inline-block;
  90   }
  91 }
  92
  93 /*
  94  * Other HTML Text Elements
  95  */
  96 p, ul, ol, pre, table, blockquote {
  97   margin-top: 0.3em;
  98   margin-bottom: 1.375em;
  99 }
 100
 101 hr {
 102   border: 0;
 103   height: 1px;
 104   background: #EAEAEA;
 105   margin-bottom: $-l;
 106   &.faded {
 107     background-image: linear-gradient(to right, #FFF, #e3e0e0 20%, #e3e0e0 80%, #FFF);
 108   }
 109   &.margin-top, &.even {
 110     margin-top: $-l;
 111   }
 112 }
 113
 114 strong, b, .bold, .strong {
 115   font-weight: bold;
 116   > strong, > b, > .bold, > .strong {
 117     font-weight: bolder;
 118   }
 119 }
 120
 121 em, i, .italic {
 122   font-style: italic;
 123 }
 124
 125 small, p.small, span.small, .text-small {
 126   font-size: 0.8em;
 127   color: lighten($text-dark, 20%);
 128   small, p.small, span.small, .text-small {
 129     font-size: 1em;
 130   }
 131 }
 132
 133 sup, .superscript {
 134   vertical-align: super;
 135   font-size: 0.8em;
 136 }
 137
 138 sub, .subscript {
 139   vertical-align: sub;
 140   font-size: 0.8em;
 141 }
 142
 143 pre {
 144   font-size: 12px;
 145   background-color: #f5f5f5;
 146   border: 1px solid #DDD;
 147   padding-left: 31px;
 148   position: relative;
 149   padding-top: 3px;
 150   padding-bottom: 3px;
 151   &:after {
 152     content: '';
 153     display: block;
 154     position: absolute;
 155     top: 0;
 156     width: 29px;
 157     left: 0;
 158     background-color: #f5f5f5;
 159     height: 100%;
 160     border-right: 1px solid #DDD;
 161   }
 162 }
 163
 164 @media print {
 165   pre {
 166     padding-left: 12px;
 167   }
 168   pre:after {
 169     display: none;
 170   }
 171 }
 172
 173 blockquote {
 174   display: block;
 175   position: relative;
 176   border-left: 4px solid $primary;
 177   background-color: #F8F8F8;
 178   padding: $-s $-m $-s $-xl;
 179   &:before {
 180     content: "\201C";
 181     font-size: 2em;
 182     font-weight: bold;
 183     position: absolute;
 184     top: $-s;
 185     left: $-s;
 186     color: lighten($text-dark, 20%);
 187   }
 188 }
 189
 190 .code-base {
 191     background-color: #F8F8F8;
 192     font-size: 0.80em;
 193     border: 1px solid #DDD;
 194     border-radius: 3px;
 195 }
 196
 197 code {
 198   @extend .code-base;
 199   display: inline;
 200   padding: 1px 3px;
 201   white-space:pre;
 202   line-height: 1.2em;
 203   margin-bottom: 1.2em;
 204 }
 205
 206 span.code {
 207   @extend .code-base;
 208   padding: 1px $-xs;
 209 }
 210
 211 pre code {
 212   background-color: transparent;
 213   border: 0;
 214   font-size: 1em;
 215   display: block;
 216   line-height: 1.6;
 217 }
 218 /*
 219  * Text colors
 220  */
 221 p.pos, p .pos, span.pos, .text-pos {
 222   color: $positive;
 223   fill: $positive;
 224   &:hover {
 225     color: $positive;
 226     fill: $positive;
 227   }
 228 }
 229
 230 p.neg, p .neg, span.neg, .text-neg {
 231   color: $negative;
 232   fill: $negative;
 233   &:hover {
 234     color: $negative;
 235     fill: $negative;
 236   }
 237 }
 238
 239 p.muted, p .muted, span.muted, .text-muted {
 240         color: lighten($text-dark, 26%);
 241         fill: lighten($text-dark, 26%);
 242     &.small, .small {
 243       color: lighten($text-dark, 32%);
 244       fill: lighten($text-dark, 32%);
 245     }
 246 }
 247
 248 p.primary, p .primary, span.primary, .text-primary {
 249         color: $primary;
 250         fill: $primary;
 251   &:hover {
 252     color: $primary;
 253     fill: $primary;
 254   }
 255 }
 256
 257 p.secondary, p .secondary, span.secondary, .text-secondary {
 258         color: $secondary;
 259         fill: $secondary;
 260   &:hover {
 261     color: $secondary;
 262     fill: $secondary;
 263   }
 264 }
 265
 266 .text-book {
 267   color: $color-book;
 268   fill: $color-book;
 269   &:hover {
 270     color: $color-book;
 271     fill: $color-book;
 272   }
 273 }
 274 .text-page {
 275   color: $color-page;
 276   fill: $color-page;
 277   &:hover {
 278     color: $color-page;
 279     fill: $color-page;
 280   }
 281   &.draft {
 282     color: $color-page-draft;
 283     fill: $color-page-draft;
 284   }
 285   &.draft:hover {
 286     color: $color-page-draft;
 287     fill: $color-page-draft;
 288   }
 289 }
 290 .text-chapter {
 291   color: $color-chapter;
 292   fill: $color-chapter;
 293   &:hover {
 294     color: $color-chapter;
 295     fill: $color-chapter;
 296   }
 297 }
 298 .faded .text-book:hover {
 299   color: $color-book !important;
 300   fill: $color-book !important;
 301 }
 302 .faded .text-chapter:hover {
 303   color: $color-chapter !important;
 304   fill: $color-chapter !important;
 305 }
 306 .faded .text-page:hover {
 307   color: $color-page !important;
 308   fill: $color-page !important;
 309 }
 310
 311 span.highlight {
 312   //background-color: rgba($primary, 0.2);
 313   font-weight: bold;
 314   padding: 2px 4px;
 315 }
 316
 317 /*
 318  * Lists
 319  */
 320 ul, ol {
 321   overflow: hidden;
 322   p {
 323     margin: 0;
 324   }
 325 }
 326 ul {
 327   padding-left: $-m * 1.3;
 328   list-style: disc;
 329   ul {
 330     list-style: circle;
 331     margin-top: 0;
 332     margin-bottom: 0;
 333   }
 334   label {
 335     margin: 0;
 336   }
 337 }
 338
 339 ol {
 340   list-style: decimal;
 341   padding-left: $-m * 2;
 342 }
 343
 344 li.checkbox-item, li.task-list-item {
 345   list-style: none;
 346   margin-left: - ($-m * 1.3);
 347   input[type="checkbox"] {
 348     margin-right: $-xs;
 349   }
 350 }
 351
 352 /*
 353  * Generic text styling classes
 354  */
 355 .underlined {
 356   text-decoration: underline;
 357 }
 358
 359 .text-center {
 360   text-align: center;
 361 }
 362
 363 .text-left {
 364   text-align: left;
 365 }
 366
 367 .text-right {
 368   text-align: right;
 369 }
 370
 371 .text-bigger {
 372   font-size: 1.1em;
 373 }
 374
 375 .text-large {
 376   font-size: 1.6666em;
 377 }
 378
 379 .no-color {
 380   color: inherit;
 381 }
 382
 383 .break-text {
 384   white-space: pre-wrap;
 385   word-wrap: break-word;
 386 }
 387
 388 /**
 389  * Grouping
 390  */
 391 .header-group {
 392   margin: $-m 0;
 393   h1, h2, h3, h4, h5, h6 {
 394     margin: 0;
 395   }
 396 }
 397
 398 span.sep {
 399   color: #BBB;
 400   padding: 0 $-xs;
 401 }
 402
 403 .list > * {
 404   display: block;
 405 }
 406
 407 /**
 408   * Icons
 409   */
 410 i {
 411   padding-right: $-xs;
 412 }
 413
 414 .svg-icon {
 415   width: 1em;
 416   display: inline-block;
 417   position: relative;
 418   bottom: -0.105em;
 419   margin-right: $-xs;
 420 }
 421