BookStack Code Mirror - website/blob - themes/bookstack/sass/_text.scss

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