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: $-l $-s 0 $-s;
  50   color: #CCC;
  51   .logo {
  52     display: block;
  53     font-size: 2em;
  54     font-weight: bold;
  55     padding: $-m 0;
  56   }
  57   i {
  58     padding-right: $-s;
  59   }
  60 }
  61
  62 .user-overview {
  63   margin-top: $-m;
  64   .user-name {
  65     display: inline-block;
  66     vertical-align: top;
  67     padding: $-m $-s;
  68   }
  69 }
  70
  71
  72 .search-box {
  73   input {
  74     width: 100%;
  75     border-radius: 0;
  76     padding: $-m;
  77     background-color: rgba(0, 0, 0, 0.1);
  78     border: none;
  79     border-top: 1px solid #333;
  80     border-bottom: 1px solid #333;
  81     color: #EEE;
  82   }
  83 }
  84
  85 .menu {
  86   list-style: none;
  87   margin: 0;
  88   .col-md-4 {
  89     padding: 0;
  90   }
  91   a {
  92     padding: $-m;
  93     display: block;
  94     border-bottom: 1px solid #3A3939;
  95   }
  96 }
  97
  98 .page-title input {
  99   display: block;
 100   width: 100%;
 101   font-size: 1.4em;
 102 }
 103
 104 .page-style {
 105   padding: $-s $-xxl $-xxl $-xxl;
 106   margin-bottom: $-xxl;
 107   max-width: 100%;
 108 }
 109
 110 .page-style.editor {
 111   padding: 0 !important;
 112 }
 113
 114 .page-content {
 115   @extend .page-style;
 116   min-height: 70vh;
 117   max-width: 840px;
 118   margin-left: auto;
 119   margin-right: auto;
 120   &.right {
 121     float: right;
 122   }
 123   &.left {
 124     float: left;
 125   }
 126   img {
 127     max-width: 100%;
 128     height:auto;
 129   }
 130 }
 131
 132 .page-list {
 133   h3 {
 134     margin: $-l 0;
 135   }
 136   .inset-list {
 137     display: block;
 138     overflow: hidden;
 139     padding-left: $-l*2;
 140     border-top: 3px dotted #EEE;
 141   }
 142   h4 {
 143     display: block;
 144     margin: $-m 0;
 145   }
 146   hr {
 147     margin-top: 0;
 148   }
 149 }
 150
 151 .side-nav {
 152   position: fixed;
 153   padding-left: $-m;
 154   opacity: 0.8;
 155   margin-top: $-xxl;
 156   margin-left: 0;
 157   max-width: 240px;
 158   display: none;
 159 }
 160
 161 .page-nav-list {
 162   $nav-indent: $-s;
 163   margin-left: 2px;
 164   list-style: none;
 165   li {
 166     //border-left: 1px solid rgba(0, 0, 0, 0.1);
 167     padding-left: $-xs;
 168     border-left: 2px solid #888;
 169     margin-bottom: 4px;
 170   }
 171   li a {
 172     color: #555;
 173   }
 174   .nav-H2 {
 175     margin-left: $nav-indent;
 176     font-size: 0.95em;
 177   }
 178   .nav-H3 {
 179     margin-left: $nav-indent*2;
 180     font-size: 0.90em
 181   }
 182   .nav-H4 {
 183     margin-left: $nav-indent*3;
 184     font-size: 0.85em
 185   }
 186   .nav-H5 {
 187     margin-left: $nav-indent*4;
 188     font-size: 0.80em
 189   }
 190   .nav-H6 {
 191     margin-left: $nav-indent*5;
 192     font-size: 0.75em
 193   }
 194 }
 195
 196
 197
 198 .overlay {
 199   background-color: rgba(0, 0, 0, 0.2);
 200   position: fixed;
 201   display: none;
 202   z-index: 95536;
 203   width: 100%;
 204   height: 100%;
 205   min-width: 100%;
 206   min-height: 100%;
 207   top: 0;
 208   left: 0;
 209   right: 0;
 210   bottom: 0;
 211 }
 212
 213 // Link hooks & popovers
 214 a.link-hook {
 215   position: absolute;
 216   display: inline-block;
 217   top: $-xs;
 218   left: -$-l;
 219   padding-bottom: 30px;
 220   font-size: 20px;
 221   line-height: 20px;
 222   color: #BBB;
 223   opacity: 0;
 224   transform: translate3d(10px, 0, 0);
 225   transition: all ease-in-out 240ms;
 226   background-color: transparent;
 227   &:hover {
 228     color: $primary;
 229   }
 230 }
 231 h1, h2, h3, h4, h5, h6 {
 232   &:hover a.link-hook {
 233     opacity: 1;
 234     transform: translate3d(0, 0, 0);
 235   }
 236 }
 237
 238 .breadcrumbs {
 239   margin-top: $-s;
 240   i {
 241     padding-right: 4px;
 242   }
 243   span.sep {
 244     color: #aaa;
 245     padding: 0 $-xs;
 246   }
 247 }
 248
 249 .faded {
 250   a {
 251     color: #666;
 252     opacity: 0.5;
 253     transition: all ease-in-out 120ms;
 254     &:hover {
 255       opacity: 1;
 256       text-decoration: none;
 257     }
 258   }
 259 }
 260
 261 .faded-small {
 262   color: #666;
 263   font-size: 0.9em;
 264   a, span {
 265     color: #666;
 266   }
 267 }
 268
 269 .action-buttons {
 270   text-align: right;
 271   a {
 272     display: inline-block;
 273     padding: $-s;
 274   }
 275 }
 276
 277
 278 .book-tree h4 {
 279   padding: $-m $-s 0 $-s;
 280   i {
 281     padding-right: $-s;
 282   }
 283 }
 284 // Sidebar list
 285 .book-tree .sidebar-page-list {
 286   list-style: none;
 287   margin: 0;
 288   margin-top: $-xl;
 289   border-left: 5px solid #7BD06E;
 290   li a {
 291     display: block;
 292     border-bottom: none;
 293     &:hover {
 294       background-color: rgba(255, 255, 255, 0.2);
 295       text-decoration: none;
 296     }
 297   }
 298   li, a {
 299     display: block;
 300   }
 301   a.bold {
 302     color: #EEE !important;
 303   }
 304   ul {
 305     list-style: none;
 306     margin: 0;
 307   }
 308   ul li a {
 309     padding-left: $-xl;
 310   }
 311   .book {
 312     color: #7BD06E !important;
 313     &.selected {
 314       background-color: rgba(123, 208, 110, 0.29);
 315     }
 316   }
 317   .chapter {
 318     color: #D2A64B !important;
 319     &.selected {
 320       background-color: rgba(239, 169, 42, 0.27);
 321     }
 322   }
 323   .list-item-chapter {
 324     border-left: 5px solid #D2A64B;
 325     margin: 10px 10px;
 326     display: block;
 327   }
 328   .list-item-page {
 329     border-bottom: none;
 330   }
 331   .page {
 332     color: #4599DC !important;
 333     border-left: 5px solid #4599DC;
 334     margin: 10px 10px;
 335     border-bottom: none;
 336     &.selected {
 337       background-color: rgba(118, 164, 202, 0.41);
 338     }
 339   }
 340 }
 341
 342 .sortable-page-list, .sortable-page-list ul {
 343   list-style: none;
 344   //background-color: rgba(0, 0, 0, 0.04);
 345 }
 346 .sortable-page-list {
 347   margin-left: 0;
 348   ul {
 349     margin-bottom: 0;
 350     margin-top: 0;
 351   }
 352   li {
 353     border-bottom: 1px solid #BBB;
 354     border-left: 1px solid #BBB;
 355     border-right: 1px solid #BBB;
 356     padding: $-xs $-s;
 357   }
 358   li:first-child {
 359     margin-top: $-xs;
 360     border-top: 1px solid #BBB;
 361   }
 362 }
 363
 364 // Jquery Sortable Styles
 365 .dragged {
 366   position: absolute;
 367   opacity: 0.5;
 368   z-index: 2000;
 369 }
 370
 371 body.dragging, body.dragging * {
 372   cursor: move !important;
 373 }
 374
 375 .sortable-page-list li.placeholder {
 376   position: relative;
 377 }
 378 .sortable-page-list li.placeholder:before {
 379   position: absolute;
 380 }
 381
 382 .image-cover {
 383   height: 100vh;
 384   width: 100%;
 385   overflow: hidden;
 386   background-size: cover;
 387   &.login {
 388     background-image: url('/images/bg-books.jpg');
 389   }
 390 }
 391
 392 .sidebar-bg {
 393   background-image: url('/images/bg-books.jpg');
 394   background-size: cover;
 395   background-position: 50% 50%;
 396   position: absolute;
 397   top: 0;
 398   left: 0;
 399   width: 100%;
 400   height: 100%;
 401   z-index: -1;
 402   &:after{
 403     content: '';
 404     position: absolute;
 405     top: 0;
 406     left: 0;
 407     width: 100%;
 408     height: 100%;
 409     z-index: -1;
 410     background-color: rgba(0,0,0,0.85);
 411     display: block;
 412   }
 413 }
 414
 415 .image-cover #sidebar {
 416   width: auto;
 417   border: 0;
 418   background-color: rgba(0, 0, 0, 0.38);
 419 }
 420
 421 .center-box {
 422   margin-top: 15vh;
 423   padding: $-m $-xxl $-xl*2 $-xxl;
 424   max-width: 346px;
 425   h1, label {
 426     color: #EEE;
 427   }
 428   h1 {
 429     margin-bottom: $-m;
 430   }
 431   .button {
 432     margin-top: $-xl;
 433   }
 434   input {
 435     background-color: transparent;
 436     color: #EEE;
 437   }
 438 }
 439
 440 .activity-list-item {
 441   padding: $-s 0;
 442   color: #888;
 443   border-bottom: 1px solid #EEE;
 444   font-size: 0.9em;
 445   .left {
 446     float: left;
 447   }
 448   .left + .right {
 449     margin-left: 30px + $-s;
 450   }
 451 }
 452
 453 .avatar {
 454   border-radius: 100%;
 455 }
 456
 457 .notification {
 458   position: fixed;
 459   top: 0;
 460   right: 0;
 461   margin: $-xl*2 $-xl;
 462   padding: $-l $-xl;
 463   background-color: #EEE;
 464   border-radius: 3px;
 465   box-shadow: $bs-med;
 466   z-index: 99999999;
 467   display: table;
 468   cursor: pointer;
 469   max-width: 480px;
 470   i, span {
 471     display: table-cell;
 472   }
 473   i {
 474     font-size: 2em;
 475     padding-right: $-l;
 476   }
 477   span {
 478     vertical-align: middle;
 479   }
 480   &.pos {
 481     background-color: $positive;
 482     color: #EEE;
 483   }
 484   &.neg {
 485     background-color: $negative;
 486     color: #EEE;
 487   }
 488 }
 489
 490 .setting-nav {
 491   margin-top: $-l;
 492   border-top: 1px solid #DDD;
 493   border-bottom: 1px solid #DDD;
 494   a {
 495     padding: $-m;
 496     display: inline-block;
 497     //color: #666;
 498     &.selected {
 499       //color: $primary;
 500       background-color: #f8f8f8;
 501     }
 502   }
 503 }