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

   1 /*
   2  * Header Styles
   3  */
   4
   5 h1 {
   6   font-size: 3.425em;
   7   line-height: 1.22222222em;
   8   margin-top: 0.48888889em;
   9   margin-bottom: 0.48888889em;
  10 }
  11 h2 {
  12   font-size: 2.8275em;
  13   line-height: 1.294117647em;
  14   margin-top: 0.8627451em;
  15   margin-bottom: 0.43137255em;
  16 }
  17 h3 {
  18   font-size: 2.333em;
  19   line-height: 1.221428572em;
  20   margin-top: 0.78571429em;
  21   margin-bottom: 0.43137255em;
  22 }
  23 h4 {
  24   font-size: 1.666em;
  25   line-height: 1.375em;
  26   margin-top: 0.78571429em;
  27   margin-bottom: 0.43137255em;
  28 }
  29
  30 h1, h2, h3, h4, h5, h6 {
  31   font-weight: 400;
  32   position: relative;
  33   display: block;
  34   color: #555;
  35   .subheader {
  36     font-size: 0.5em;
  37     line-height: 1em;
  38     color: lighten($text-dark, 32%);
  39   }
  40 }
  41
  42 h5 {
  43   font-size: 1.4em;
  44 }
  45
  46 h5, h6 {
  47   font-weight: 500;
  48   line-height: 1.2em;
  49   margin-top: 0.78571429em;
  50   margin-bottom: 0.66em;
  51 }
  52
  53 /*
  54  * Link styling
  55  */
  56 a, .link {
  57   color: $primary;
  58   cursor: pointer;
  59   text-decoration: none;
  60   transition: color ease-in-out 80ms;
  61   font-family: $text;
  62   line-height: 1.6;
  63   &:hover {
  64     text-decoration: underline;
  65     color: darken($primary, 20%);
  66   }
  67   i {
  68     padding-right: $-s;
  69   }
  70   i.zmdi-hc-flip-horizontal {
  71     padding-right: 0;
  72     padding-left: $-s;
  73   }
  74   &.icon {
  75     display: inline-block;
  76   }
  77   svg {
  78     position: relative;
  79     display: inline-block;
  80   }
  81 }
  82
  83 /*
  84  * Other HTML Text Elements
  85  */
  86 p, ul, ol, pre, table, blockquote {
  87   margin-top: 0.3em;
  88   margin-bottom: 1.375em;
  89 }
  90
  91 hr {
  92   border: 0;
  93   height: 1px;
  94   background: #EAEAEA;
  95   margin-bottom: $-l;
  96   &.faded {
  97     background-image: linear-gradient(to right, #FFF, #e3e0e0 20%, #e3e0e0 80%, #FFF);
  98   }
  99   &.margin-top, &.even {
 100     margin-top: $-l;
 101   }
 102 }
 103
 104 strong, b, .bold, .strong {
 105   font-weight: bold;
 106   > strong, > b, > .bold, > .strong {
 107     font-weight: bolder;
 108   }
 109 }
 110
 111 em, i, .italic {
 112   font-style: italic;
 113 }
 114
 115 small, p.small, span.small, .text-small {
 116   font-size: 0.8em;
 117   color: lighten($text-dark, 20%);
 118   small, p.small, span.small, .text-small {
 119     font-size: 1em;
 120   }
 121 }
 122
 123 sup, .superscript {
 124   vertical-align: super;
 125   font-size: 0.8em;
 126 }
 127
 128 sub, .subscript {
 129   vertical-align: sub;
 130   font-size: 0.8em;
 131 }
 132
 133 pre {
 134   font-family: monospace;
 135   white-space:pre;
 136   font-size: 0.8em;
 137   overflow: hidden;
 138   border-radius: 4px;
 139   box-shadow: 0 1px 2px 0px rgba(10, 10, 10, 0.06);
 140   border: 1px solid rgba(221, 221, 221, 0.66);
 141   background-color: #fdf6e3;
 142   padding: $-s;
 143   overflow-x: scroll;
 144 }
 145
 146 blockquote {
 147   display: block;
 148   position: relative;
 149   border-left: 4px solid $primary;
 150   background-color: #F8F8F8;
 151   padding: $-s $-m $-s $-xl;
 152   &:before {
 153     content: "\201C";
 154     font-size: 2em;
 155     font-weight: bold;
 156     position: absolute;
 157     top: $-s;
 158     left: $-s;
 159     color: lighten($text-dark, 20%);
 160   }
 161 }
 162
 163 .code-base {
 164     background-color: #F8F8F8;
 165     font-family: monospace;
 166     font-size: 0.80em;
 167     border: 1px solid #DDD;
 168     border-radius: 3px;
 169 }
 170
 171 code {
 172   @extend .code-base;
 173   display: inline;
 174   padding: 1px 3px;
 175   white-space:pre;
 176   line-height: 1.2em;
 177   margin-bottom: 1.2em;
 178 }
 179
 180 span.code {
 181   @extend .code-base;
 182   padding: 1px $-xs;
 183 }
 184
 185 pre code {
 186   background-color: transparent;
 187   border: 0;
 188   font-size: 1em;
 189   display: block;
 190 }
 191 /*
 192  * Text colors
 193  */
 194 p.pos, p .pos, span.pos, .text-pos {
 195   color: $positive;
 196   &:hover {
 197     color: $positive;
 198   }
 199 }
 200
 201 p.neg, p .neg, span.neg, .text-neg {
 202   color: $negative;
 203   &:hover {
 204     color: $negative;
 205   }
 206 }
 207
 208 p.muted, p .muted, span.muted, .text-muted {
 209         color: lighten($text-dark, 26%);
 210     &.small, .small {
 211       color: lighten($text-dark, 32%);
 212     }
 213 }
 214
 215 p.primary, p .primary, span.primary, .text-primary {
 216         color: $primary;
 217   &:hover {
 218     color: $primary;
 219   }
 220 }
 221
 222 p.secondary, p .secondary, span.secondary, .text-secondary {
 223         color: $secondary;
 224   &:hover {
 225     color: $secondary;
 226   }
 227 }
 228
 229 .text-book {
 230   color: $color-book;
 231   &:hover {
 232     color: $color-book;
 233   }
 234 }
 235 .text-page {
 236   color: $color-page;
 237   &:hover {
 238     color: $color-page;
 239   }
 240   &.draft {
 241     color: $color-page-draft;
 242   }
 243   &.draft:hover {
 244     color: $color-page-draft;
 245   }
 246 }
 247 .text-chapter {
 248   color: $color-chapter;
 249   &:hover {
 250     color: $color-chapter;
 251   }
 252 }
 253 .faded .text-book:hover {
 254   color: $color-book !important;
 255 }
 256 .faded .text-chapter:hover {
 257   color: $color-chapter !important;
 258 }
 259 .faded .text-page:hover {
 260   color: $color-page !important;
 261 }
 262
 263 span.highlight {
 264   //background-color: rgba($primary, 0.2);
 265   font-weight: bold;
 266   padding: 2px 4px;
 267 }
 268
 269 /*
 270  * Lists
 271  */
 272 ul, ol {
 273   overflow: hidden;
 274   p {
 275     margin: 0;
 276   }
 277 }
 278 ul {
 279   padding-left: $-m * 1.3;
 280   list-style: disc;
 281   ul {
 282     list-style: circle;
 283     margin-top: 0;
 284     margin-bottom: 0;
 285   }
 286   label {
 287     margin: 0;
 288   }
 289 }
 290
 291 ol {
 292   list-style: decimal;
 293   padding-left: $-m * 2;
 294 }
 295
 296 li.checkbox-item, li.task-list-item {
 297   list-style: none;
 298   margin-left: - ($-m * 1.3);
 299   input[type="checkbox"] {
 300     margin-right: $-xs;
 301   }
 302 }
 303
 304 /*
 305  * Generic text styling classes
 306  */
 307 .underlined {
 308   text-decoration: underline;
 309 }
 310
 311 .text-center {
 312   text-align: center;
 313 }
 314
 315 .text-left {
 316   text-align: left;
 317 }
 318
 319 .text-right {
 320   text-align: right;
 321 }
 322
 323 .text-bigger {
 324   font-size: 1.1em;
 325 }
 326
 327 .text-large {
 328   font-size: 1.6666em;
 329 }
 330
 331 .no-color {
 332   color: inherit;
 333 }
 334
 335 /**
 336  * Grouping
 337  */
 338 .header-group {
 339   margin: $-m 0;
 340   h1, h2, h3, h4, h5, h6 {
 341     margin: 0;
 342   }
 343 }
 344
 345 span.sep {
 346   color: #BBB;
 347   padding: 0 $-xs;
 348 }
 349
 350 .list > * {
 351   display: block;
 352 }
 353
 354 .action-header {
 355   h1 {
 356     margin-top: $-m;
 357   }
 358 }
 359
 360 /**
 361   * Icons
 362   */
 363 i {
 364   padding-right: $-xs;
 365 }
 366