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.571428572em;
  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 }
  75
  76 /*
  77  * Other HTML Text Elements
  78  */
  79 p, ul, ol, pre, table, blockquote {
  80   margin-top: 0.3em;
  81   margin-bottom: 1.375em;
  82 }
  83
  84 hr {
  85   border: 0;
  86   height: 1px;
  87   border: 0;
  88   background: #EAEAEA;
  89   margin-bottom: $-l;
  90   &.faded {
  91     background-image: linear-gradient(to right, #FFF, #e3e0e0 20%, #e3e0e0 80%, #FFF);
  92   }
  93   &.margin-top, &.even {
  94     margin-top: $-l;
  95   }
  96 }
  97
  98 strong, b, .bold, .strong {
  99   font-weight: bold;
 100   > strong, > b, > .bold, > .strong {
 101     font-weight: bolder;
 102   }
 103 }
 104
 105 em, i, .italic {
 106   font-style: italic;
 107 }
 108
 109 small, p.small, span.small, .text-small {
 110   font-size: 0.8em;
 111   color: lighten($text-dark, 20%);
 112   small, p.small, span.small, .text-small {
 113     font-size: 1em;
 114   }
 115 }
 116
 117 sup, .superscript {
 118   vertical-align: super;
 119   font-size: 0.8em;
 120 }
 121
 122 sub, .subscript {
 123   vertical-align: sub;
 124   font-size: 0.8em;
 125 }
 126
 127 pre {
 128   font-family: monospace;
 129   white-space:pre;
 130   font-size: 0.8em;
 131   overflow: hidden;
 132   border-radius: 4px;
 133   box-shadow: 0 1px 2px 0px rgba(10, 10, 10, 0.06);
 134   border: 1px solid rgba(221, 221, 221, 0.66);
 135   background-color: #fdf6e3;
 136   padding: $-s;
 137   overflow-x: scroll;
 138 }
 139
 140 blockquote {
 141   display: block;
 142   position: relative;
 143   border-left: 4px solid $primary;
 144   background-color: #F8F8F8;
 145   padding: $-s $-m $-s $-xl;
 146   &:before {
 147     content: "\201C";
 148     font-size: 2em;
 149     font-weight: bold;
 150     position: absolute;
 151     top: $-s;
 152     left: $-s;
 153     color: lighten($text-dark, 20%);
 154   }
 155 }
 156
 157 .code-base {
 158     background-color: #F8F8F8;
 159     font-family: monospace;
 160     font-size: 0.80em;
 161     border: 1px solid #DDD;
 162     border-radius: 3px;
 163 }
 164
 165 code {
 166   @extend .code-base;
 167   display: inline;
 168   padding: 1px 3px;
 169   white-space:pre;
 170   line-height: 1.2em;
 171   margin-bottom: 1.2em;
 172 }
 173
 174 span.code {
 175   @extend .code-base;
 176   padding: 1px $-xs;
 177 }
 178
 179 pre code {
 180   background-color: transparent;
 181   border: 0;
 182   font-size: 1em;
 183   display: block;
 184 }
 185 /*
 186  * Text colors
 187  */
 188 p.pos, p .pos, span.pos, .text-pos {
 189   color: $positive;
 190   &:hover {
 191     color: $positive;
 192   }
 193 }
 194
 195 p.neg, p .neg, span.neg, .text-neg {
 196   color: $negative;
 197   &:hover {
 198     color: $negative;
 199   }
 200 }
 201
 202 p.muted, p .muted, span.muted, .text-muted {
 203         color: lighten($text-dark, 26%);
 204     &.small, .small {
 205       color: lighten($text-dark, 32%);
 206     }
 207 }
 208
 209 p.primary, p .primary, span.primary, .text-primary {
 210         color: $primary;
 211   &:hover {
 212     color: $primary;
 213   }
 214 }
 215
 216 p.secondary, p .secondary, span.secondary, .text-secondary {
 217         color: $secondary;
 218   &:hover {
 219     color: $secondary;
 220   }
 221 }
 222
 223 .text-book {
 224   color: $color-book;
 225   &:hover {
 226     color: $color-book;
 227   }
 228 }
 229 .text-page {
 230   color: $color-page;
 231   &:hover {
 232     color: $color-page;
 233   }
 234   &.draft {
 235     color: $color-page-draft;
 236   }
 237   &.draft:hover {
 238     color: $color-page-draft;
 239   }
 240 }
 241 .text-chapter {
 242   color: $color-chapter;
 243   &:hover {
 244     color: $color-chapter;
 245   }
 246 }
 247 .faded .text-book:hover {
 248   color: $color-book !important;
 249 }
 250 .faded .text-chapter:hover {
 251   color: $color-chapter !important;
 252 }
 253 .faded .text-page:hover {
 254   color: $color-page !important;
 255 }
 256
 257 span.highlight {
 258   //background-color: rgba($primary, 0.2);
 259   font-weight: bold;
 260   padding: 2px 4px;
 261 }
 262
 263 /*
 264  * Lists
 265  */
 266 ul {
 267   padding-left: $-m * 1.3;
 268   list-style: disc;
 269   overflow: hidden;
 270 }
 271
 272 ol {
 273   list-style: decimal;
 274   padding-left: $-m * 2;
 275   overflow: hidden;
 276 }
 277
 278 /*
 279  * Generic text styling classes
 280  */
 281 .underlined {
 282   text-decoration: underline;
 283 }
 284
 285 .text-center {
 286   text-align: center;
 287 }
 288
 289 .text-left {
 290   text-align: left;
 291 }
 292
 293 .text-right {
 294   text-align: right;
 295 }
 296
 297 .text-bigger {
 298   font-size: 1.1em;
 299 }
 300
 301 .text-large {
 302   font-size: 1.6666em;
 303 }
 304
 305 .no-color {
 306   color: inherit;
 307 }
 308
 309 /**
 310  * Grouping
 311  */
 312 .header-group {
 313   margin: $-m 0;
 314   h1, h2, h3, h4, h5, h6 {
 315     margin: 0;
 316   }
 317 }
 318
 319 span.sep {
 320   color: #BBB;
 321   padding: 0 $-xs;
 322 }
 323
 324 .list > * {
 325   display: block;
 326 }
 327
 328 .action-header {
 329   h1 {
 330     margin-top: $-m;
 331   }
 332 }
 333
 334 /**
 335   * Icons
 336   */
 337 i {
 338   padding-right: $-xs;
 339 }
 340