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

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