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

   1 @import "reset";
   2 @import "variables";
   3 @import "mixins";
   4 @import "html";
   5 @import "text";
   6 @import "grid";
   7 @import "blocks";
   8 @import "buttons";
   9 @import "forms";
  10 @import "tables";
  11 @import "animations";
  12 @import "tinymce";
  13 @import "image-manager";
  14
  15 header {
  16   display: block;
  17   z-index: 2;
  18   top: 0;
  19   .padded {
  20     padding: $-m;
  21   }
  22   //margin-bottom: $-l;
  23 }
  24
  25 #sidebar {
  26   position: fixed;
  27   background-color: #444;
  28   color: #EEE;
  29   height: 100%;
  30   top: 0;
  31   z-index: 1;
  32   //padding-top: $-m;
  33   width: 340px;
  34   border-right: 1px solid #DDD;
  35   h4, li, p, a {
  36     color: #CCC;
  37   }
  38 }
  39
  40 #content {
  41   //margin-top: 63px;
  42   margin-left: 340px;
  43   display: block;
  44   position: relative;
  45   padding: 0 16px;
  46 }
  47
  48 .logo-container {
  49   padding: $-xl $-s $-l $-s;
  50   color: #CCC;
  51   .logo {
  52     font-size: 2em;
  53     font-weight: bold;
  54     margin-bottom: $-m;
  55   }
  56   i {
  57     padding-right: $-s;
  58   }
  59 }
  60
  61
  62 .search-box {
  63   input {
  64     width: 100%;
  65     border-radius: 0;
  66     padding: $-s $-m;
  67     background-color: rgba(0, 0, 0, 0.1);
  68     border: none;
  69     border-top: 1px solid #333;
  70     border-bottom: 1px solid #333;
  71   }
  72 }
  73
  74 .menu {
  75   list-style: none;
  76   margin: 0;
  77   .col-md-4 {
  78     padding: 0;
  79   }
  80   a {
  81     padding: $-m;
  82     display: block;
  83     border-bottom: 1px solid #3A3939;
  84   }
  85 }
  86
  87 .page-title input {
  88   display: block;
  89   width: 100%;
  90   font-size: 1.4em;
  91 }
  92
  93 .page-style {
  94   padding: $-s $-xxl $-xxl $-xxl;
  95   margin-bottom: $-xxl;
  96   max-width: 100%;
  97 }
  98
  99 .page-style.editor {
 100   padding: 0 !important;
 101 }
 102
 103 .page-content {
 104   @extend .page-style;
 105   min-height: 70vh;
 106   max-width: 840px;
 107   margin-left: auto;
 108   margin-right: auto;
 109   &.right {
 110     float: right;
 111   }
 112   &.left {
 113     float: left;
 114   }
 115   img {
 116     max-width: 100%;
 117     height:auto;
 118   }
 119 }
 120
 121 .page-list {
 122   h3 {
 123     margin: $-l 0;
 124   }
 125   .inset-list {
 126     display: block;
 127     overflow: hidden;
 128     padding-left: $-l*2;
 129     border-top: 3px dotted #EEE;
 130   }
 131   h4 {
 132     display: block;
 133     margin: $-m 0;
 134   }
 135   hr {
 136     margin-top: 0;
 137   }
 138 }
 139
 140 .side-nav {
 141   position: fixed;
 142   padding-left: $-m;
 143   opacity: 0.8;
 144   margin-top: $-xxl;
 145   margin-left: 0;
 146   max-width: 240px;
 147 }
 148
 149 .page-nav-list {
 150   $nav-indent: $-s;
 151   margin-left: 2px;
 152   list-style: none;
 153   li {
 154     //border-left: 1px solid rgba(0, 0, 0, 0.1);
 155     padding-left: $-xs;
 156     border-left: 2px solid #888;
 157     margin-bottom: 4px;
 158   }
 159   li a {
 160     color: #555;
 161   }
 162   .nav-H2 {
 163     margin-left: $nav-indent;
 164     font-size: 0.95em;
 165   }
 166   .nav-H3 {
 167     margin-left: $nav-indent*2;
 168     font-size: 0.90em
 169   }
 170   .nav-H4 {
 171     margin-left: $nav-indent*3;
 172     font-size: 0.85em
 173   }
 174   .nav-H5 {
 175     margin-left: $nav-indent*4;
 176     font-size: 0.80em
 177   }
 178   .nav-H6 {
 179     margin-left: $nav-indent*5;
 180     font-size: 0.75em
 181   }
 182 }
 183
 184
 185
 186 .overlay {
 187   background-color: rgba(0, 0, 0, 0.2);
 188   position: fixed;
 189   display: none;
 190   z-index: 95536;
 191   width: 100%;
 192   height: 100%;
 193   min-width: 100%;
 194   min-height: 100%;
 195   top: 0;
 196   left: 0;
 197   right: 0;
 198   bottom: 0;
 199 }
 200
 201 // Link hooks & popovers
 202 a.link-hook {
 203   position: absolute;
 204   display: inline-block;
 205   top: $-xs;
 206   left: -$-l;
 207   padding-bottom: 30px;
 208   font-size: 20px;
 209   line-height: 20px;
 210   color: #BBB;
 211   opacity: 0;
 212   transform: translate3d(10px, 0, 0);
 213   transition: all ease-in-out 240ms;
 214   background-color: transparent;
 215   &:hover {
 216     color: $primary;
 217   }
 218 }
 219 h1, h2, h3, h4, h5, h6 {
 220   &:hover a.link-hook {
 221     opacity: 1;
 222     transform: translate3d(0, 0, 0);
 223   }
 224 }
 225
 226 .breadcrumbs {
 227   margin-top: $-s;
 228   i {
 229     padding-right: 4px;
 230   }
 231   span.sep {
 232     color: #aaa;
 233     padding: 0 $-xs;
 234   }
 235 }
 236
 237 .faded {
 238   a {
 239     color: #666;
 240     opacity: 0.5;
 241     transition: all ease-in-out 120ms;
 242     &:hover {
 243       opacity: 1;
 244       text-decoration: none;
 245     }
 246   }
 247 }
 248
 249 .faded-small {
 250   color: #666;
 251   font-size: 0.9em;
 252   a, span {
 253     color: #666;
 254   }
 255 }
 256
 257 .action-buttons {
 258   text-align: right;
 259   a {
 260     display: inline-block;
 261     padding: $-s;
 262   }
 263 }
 264
 265
 266 .book-tree h4 {
 267   padding: $-m $-s 0 $-s;
 268   i {
 269     padding-right: $-s;
 270   }
 271 }
 272 // Sidebar list
 273 .book-tree .sidebar-page-list {
 274   list-style: none;
 275   margin: 0;
 276   margin-top: $-xl;
 277   border-left: 5px solid #7BD06E;
 278   li a {
 279     display: block;
 280     border-bottom: none;
 281     &:hover {
 282       background-color: rgba(255, 255, 255, 0.2);
 283       text-decoration: none;
 284     }
 285   }
 286   li, a {
 287     display: block;
 288   }
 289   a.bold {
 290     color: #EEE !important;
 291   }
 292   ul {
 293     list-style: none;
 294     margin: 0;
 295   }
 296   ul li a {
 297     padding-left: $-xl;
 298   }
 299   .book {
 300     color: #7BD06E !important;
 301     &.selected {
 302       background-color: rgba(123, 208, 110, 0.29);
 303     }
 304   }
 305   .chapter {
 306     color: #D2A64B !important;
 307     &.selected {
 308       background-color: rgba(239, 169, 42, 0.27);
 309     }
 310   }
 311   .list-item-chapter {
 312     border-left: 5px solid #D2A64B;
 313     margin: 10px 10px;
 314     display: block;
 315   }
 316   .list-item-page {
 317     border-bottom: none;
 318   }
 319   .page {
 320     color: #4599DC !important;
 321     border-left: 5px solid #4599DC;
 322     margin: 10px 10px;
 323     border-bottom: none;
 324     &.selected {
 325       background-color: rgba(118, 164, 202, 0.41);
 326     }
 327   }
 328 }
 329
 330 .sortable-page-list, .sortable-page-list ul {
 331   list-style: none;
 332   //background-color: rgba(0, 0, 0, 0.04);
 333 }
 334 .sortable-page-list {
 335   margin-left: 0;
 336   ul {
 337     margin-bottom: 0;
 338     margin-top: 0;
 339   }
 340   li {
 341     border-bottom: 1px solid #BBB;
 342     border-left: 1px solid #BBB;
 343     border-right: 1px solid #BBB;
 344     padding: $-xs $-s;
 345   }
 346   li:first-child {
 347     margin-top: $-xs;
 348     border-top: 1px solid #BBB;
 349   }
 350 }
 351
 352 // Jquery Sortable Styles
 353 .dragged {
 354   position: absolute;
 355   opacity: 0.5;
 356   z-index: 2000;
 357 }
 358
 359 body.dragging, body.dragging * {
 360   cursor: move !important;
 361 }
 362
 363 .sortable-page-list li.placeholder {
 364   position: relative;
 365 }
 366 .sortable-page-list li.placeholder:before {
 367   position: absolute;
 368 }
 369
 370 .image-cover {
 371   height: 100vh;
 372   width: 100%;
 373   overflow: hidden;
 374   background-size: cover;
 375   &.login {
 376     background-image: url('/images/bg-books.jpg');
 377   }
 378 }
 379
 380 .sidebar-bg {
 381   background-image: url('/images/bg-books.jpg');
 382   background-size: cover;
 383   background-position: 50% 50%;
 384   position: absolute;
 385   top: 0;
 386   left: 0;
 387   width: 100%;
 388   height: 100%;
 389   z-index: -1;
 390   &:after{
 391     content: '';
 392     position: absolute;
 393     top: 0;
 394     left: 0;
 395     width: 100%;
 396     height: 100%;
 397     z-index: -1;
 398     background-color: rgba(0,0,0,0.85);
 399     display: block;
 400   }
 401 }
 402
 403 .image-cover #sidebar {
 404   width: auto;
 405   border: 0;
 406   background-color: rgba(0, 0, 0, 0.38);
 407 }
 408
 409 .center-box {
 410   margin-top: 15vh;
 411   padding: $-m $-xxl $-xl*2 $-xxl;
 412   max-width: 346px;
 413   h1, label {
 414     color: #EEE;
 415   }
 416   h1 {
 417     margin-bottom: $-m;
 418   }
 419   .button {
 420     margin-top: $-xl;
 421   }
 422   input {
 423     background-color: transparent;
 424     color: #EEE;
 425   }
 426 }