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