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   background-color: $primary-dark;
  20   color: #fff;
  21   .padded {
  22     padding: $-m;
  23   }
  24   border-bottom: 1px solid #DDD;
  25   //margin-bottom: $-l;
  26   .links {
  27     display: inline-block;
  28     vertical-align: top;
  29     margin-right: $-xl;
  30   }
  31   .links a {
  32     display: inline-block;
  33     padding: $-l;
  34     color: #FFF;
  35     &:last-child {
  36       padding-right: 0;
  37     }
  38   }
  39   .avatar, .user-name {
  40     display: inline-block;
  41   }
  42   .avatar {
  43     margin-top: (45px/2);
  44     width: 30px;
  45     height: 30px;
  46   }
  47   .user-name {
  48     vertical-align: top;
  49     padding-top: 25.5px;
  50     padding-left: $-m;
  51     display: inline-block;
  52     cursor: pointer;
  53     i {
  54       padding-left: $-xs;
  55     }
  56   }
  57 }
  58
  59 form.search-box {
  60   margin-top: $-l *0.9;
  61   display: inline-block;
  62   position: relative;
  63   input {
  64     background-color: transparent;
  65     border-radius: 0;
  66     border: none;
  67     border-bottom: 2px solid #EEE;
  68     color: #EEE;
  69     padding-right: $-l;
  70     outline: 0;
  71   }
  72   a {
  73     vertical-align: top;
  74     margin-left: -$-l;
  75     color: #FFF;
  76     top: 0;
  77     display: inline-block;
  78     position: absolute;
  79   }
  80 }
  81
  82 #content {
  83   display: block;
  84   position: relative;
  85 }
  86
  87 body.flexbox {
  88   display: flex;
  89   flex-direction: column;
  90   align-items: stretch;
  91   height: 100%;
  92   min-height: 100%;
  93   max-height: 100%;
  94   overflow: hidden;
  95   #content {
  96     flex: 1;
  97     display: flex;
  98   }
  99 }
 100
 101 .flex-fill {
 102   display: flex;
 103   align-items: stretch;
 104   .flex, &.flex {
 105     flex: 1;
 106   }
 107 }
 108
 109 .page-editor {
 110   display: flex;
 111   flex-direction: column;
 112   align-items: stretch;
 113   .faded-small {
 114     height: auto;
 115   }
 116   .edit-area {
 117     flex: 1;
 118     flex-direction: column;
 119   }
 120 }
 121
 122 .logo {
 123   display: inline-block;
 124   font-size: 1.8em;
 125   color: #fff;
 126   font-weight: 400;
 127   padding: $-l $-l $-l 0;
 128   vertical-align: top;
 129   line-height: 1;
 130   &:hover {
 131     color: #FFF;
 132     text-decoration: none;
 133   }
 134 }
 135
 136 .page-title input {
 137   display: block;
 138   width: 100%;
 139   font-size: 1.4em;
 140 }
 141
 142 .page-style {
 143   padding: $-s $-xxl $-xxl $-xxl;
 144   margin-bottom: $-xxl;
 145   max-width: 100%;
 146 }
 147
 148 .page-style.editor {
 149   padding: 0 !important;
 150 }
 151
 152 .page-content {
 153   @extend .page-style;
 154   min-height: 70vh;
 155   max-width: 840px;
 156   margin-left: auto;
 157   margin-right: auto;
 158   &.right {
 159     float: right;
 160   }
 161   &.left {
 162     float: left;
 163   }
 164   img {
 165     max-width: 100%;
 166     height:auto;
 167   }
 168 }
 169
 170 .page-list {
 171   h3 {
 172     margin: $-l 0 $-m 0;
 173   }
 174   a.chapter {
 175     color: $color-chapter;
 176   }
 177   .inset-list {
 178     display: block;
 179     overflow: hidden;
 180    // padding-left: $-m;
 181     margin-bottom: $-l;
 182   }
 183   h4 {
 184     display: block;
 185     margin: $-s 0 0 0;
 186     border-left: 5px solid $color-page;
 187     padding: $-xs 0 $-xs $-m;
 188   }
 189   hr {
 190     margin-top: 0;
 191   }
 192   .book-child {
 193     padding-left: $-l;
 194     &.page {
 195       border-left: 5px solid $color-page;
 196     }
 197     &.chapter {
 198       border-left: 5px solid $color-chapter;
 199     }
 200   }
 201 }
 202 .chapter-toggle {
 203   cursor: pointer;
 204   margin: 0 0 $-l 0;
 205   transition: all ease-in-out 180ms;
 206   i {
 207     transition: all ease-in-out 180ms;
 208     transform: rotate(0deg);
 209     transform-origin: 25% 50%;
 210   }
 211   &.open {
 212     margin-bottom: 0;
 213   }
 214   &.open i {
 215     transform: rotate(90deg);
 216   }
 217 }
 218
 219 .side-nav {
 220   position: fixed;
 221   padding-left: $-m;
 222   opacity: 0.8;
 223   margin-top: $-xxl;
 224   margin-left: 0;
 225   max-width: 240px;
 226   display: none;
 227 }
 228
 229 .page-nav-list {
 230   $nav-indent: $-s;
 231   margin-left: 2px;
 232   list-style: none;
 233   li {
 234     //border-left: 1px solid rgba(0, 0, 0, 0.1);
 235     padding-left: $-xs;
 236     border-left: 2px solid #888;
 237     margin-bottom: 4px;
 238   }
 239   li a {
 240     color: #555;
 241   }
 242   .nav-H2 {
 243     margin-left: $nav-indent;
 244     font-size: 0.95em;
 245   }
 246   .nav-H3 {
 247     margin-left: $nav-indent*2;
 248     font-size: 0.90em
 249   }
 250   .nav-H4 {
 251     margin-left: $nav-indent*3;
 252     font-size: 0.85em
 253   }
 254   .nav-H5 {
 255     margin-left: $nav-indent*4;
 256     font-size: 0.80em
 257   }
 258   .nav-H6 {
 259     margin-left: $nav-indent*5;
 260     font-size: 0.75em
 261   }
 262 }
 263
 264
 265
 266 .overlay {
 267   background-color: rgba(0, 0, 0, 0.2);
 268   position: fixed;
 269   display: none;
 270   z-index: 95536;
 271   width: 100%;
 272   height: 100%;
 273   min-width: 100%;
 274   min-height: 100%;
 275   top: 0;
 276   left: 0;
 277   right: 0;
 278   bottom: 0;
 279 }
 280
 281 // Link hooks & popovers
 282 a.link-hook {
 283   position: absolute;
 284   display: inline-block;
 285   top: $-xs;
 286   left: -$-l;
 287   padding-bottom: 30px;
 288   font-size: 20px;
 289   line-height: 20px;
 290   color: #BBB;
 291   opacity: 0;
 292   transform: translate3d(10px, 0, 0);
 293   transition: all ease-in-out 240ms;
 294   background-color: transparent;
 295   &:hover {
 296     color: $primary;
 297   }
 298 }
 299 h1, h2, h3, h4, h5, h6 {
 300   &:hover a.link-hook {
 301     opacity: 1;
 302     transform: translate3d(0, 0, 0);
 303   }
 304 }
 305
 306 .breadcrumbs span.sep {
 307   color: #aaa;
 308   padding: 0 $-xs;
 309 }
 310
 311 .faded {
 312   a {
 313     color: #666;
 314     opacity: 0.5;
 315     transition: all ease-in-out 120ms;
 316     &:hover {
 317       opacity: 1;
 318       text-decoration: none;
 319     }
 320   }
 321 }
 322
 323 .faded-small {
 324   color: #000;
 325   font-size: 0.9em;
 326   background-color: rgba(21, 101, 192, 0.15);
 327   a, span {
 328     color: #000;
 329   }
 330 }
 331
 332 .breadcrumbs a, .action-buttons a {
 333   display: inline-block;
 334   padding: $-s;
 335   &:last-child {
 336     padding-right: 0;
 337   }
 338 }
 339 .action-buttons {
 340   text-align: right;
 341   &.text-left {
 342     text-align: left;
 343     a {
 344       padding-right: $-m;
 345       padding-left: 0;
 346     }
 347   }
 348 }
 349
 350 .book-tree {
 351   margin-top: $-xl;
 352 }
 353 .book-tree h4 {
 354   padding: $-m $-s 0 $-s;
 355   i {
 356     padding-right: $-s;
 357   }
 358 }
 359
 360
 361 // Sidebar list
 362 .book-tree .sidebar-page-list {
 363   list-style: none;
 364   margin: 0;
 365   margin-top: $-xs;
 366   border-left: 5px solid $color-book;
 367   li a {
 368     display: block;
 369     border-bottom: none;
 370     padding-left: $-s;
 371     padding: $-xs 0 $-xs $-s;
 372     &:hover {
 373       background-color: rgba(255, 255, 255, 0.2);
 374       text-decoration: none;
 375     }
 376   }
 377   li, a {
 378     display: block;
 379   }
 380   a.bold {
 381     color: #EEE !important;
 382   }
 383   ul {
 384     list-style: none;
 385     margin: 0;
 386   }
 387   .book {
 388     color: $color-book !important;
 389     &.selected {
 390       background-color: rgba($color-book, 0.29);
 391     }
 392   }
 393   .chapter {
 394     color: $color-chapter !important;
 395     &.selected {
 396       background-color: rgba($color-chapter, 0.12);
 397     }
 398   }
 399   .list-item-chapter {
 400     border-left: 5px solid $color-chapter;
 401     margin: 10px 10px;
 402     display: block;
 403   }
 404   .list-item-page {
 405     border-bottom: none;
 406   }
 407   .page {
 408     color: $color-page !important;
 409     border-left: 5px solid $color-page;
 410     margin: 10px 10px;
 411     border-bottom: none;
 412     &.selected {
 413       background-color: rgba($color-page, 0.1);
 414     }
 415   }
 416 }
 417
 418 // Sortable Lists
 419 .sortable-page-list, .sortable-page-list ul {
 420   list-style: none;
 421 }
 422 .sortable-page-list {
 423   margin-left: 0;
 424   box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
 425   ul {
 426     margin-bottom: 0;
 427     margin-top: 0;
 428     box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
 429   }
 430   li {
 431     border: 1px solid #DDD;
 432     padding: $-xs $-s;
 433     margin-top: -1px;
 434     min-height: 38px;
 435     &.text-chapter {
 436       border-left: 2px solid $color-chapter;
 437     }
 438     &.text-page {
 439       border-left: 2px solid $color-page;
 440     }
 441   }
 442   li:first-child {
 443     margin-top: $-xs;
 444   }
 445 }
 446
 447 // Jquery Sortable Styles
 448 .dragged {
 449   position: absolute;
 450   opacity: 0.5;
 451   z-index: 2000;
 452 }
 453
 454 body.dragging, body.dragging * {
 455   cursor: move !important;
 456 }
 457
 458 .sortable-page-list li.placeholder {
 459   position: relative;
 460 }
 461 .sortable-page-list li.placeholder:before {
 462   position: absolute;
 463 }
 464
 465 .center-box {
 466   margin: 15vh auto 0 auto;
 467   padding: $-m $-xxl $-xl*2 $-xxl;
 468   max-width: 346px;
 469   &.login {
 470     background-color: #EEE;
 471     box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
 472     border: 1px solid #DDD;
 473   }
 474 }
 475
 476 .activity-list-item {
 477   padding: $-s 0;
 478   color: #888;
 479   border-bottom: 1px solid #EEE;
 480   font-size: 0.9em;
 481   .left {
 482     float: left;
 483   }
 484   .left + .right {
 485     margin-left: 30px + $-s;
 486   }
 487 }
 488
 489 .avatar {
 490   border-radius: 100%;
 491 }
 492
 493 .notification {
 494   position: fixed;
 495   top: 0;
 496   right: 0;
 497   margin: $-xl*2 $-xl;
 498   padding: $-l $-xl;
 499   background-color: #EEE;
 500   border-radius: 3px;
 501   box-shadow: $bs-med;
 502   z-index: 99999999;
 503   display: table;
 504   cursor: pointer;
 505   max-width: 480px;
 506   i, span {
 507     display: table-cell;
 508   }
 509   i {
 510     font-size: 2em;
 511     padding-right: $-l;
 512   }
 513   span {
 514     vertical-align: middle;
 515   }
 516   &.pos {
 517     background-color: $positive;
 518     color: #EEE;
 519   }
 520   &.neg {
 521     background-color: $negative;
 522     color: #EEE;
 523   }
 524 }
 525
 526 .setting-nav {
 527   text-align: center;
 528   a {
 529     padding: $-m;
 530     display: inline-block;
 531     //color: #666;
 532     &.selected {
 533       //color: $primary;
 534       border-bottom: 2px solid $primary;
 535     }
 536   }
 537 }
 538
 539 .dropdown-container {
 540   display: inline-block;
 541   vertical-align: top;
 542   position: relative;
 543 }
 544 ul.dropdown {
 545   display: none;
 546   position: absolute;
 547   z-index: 999;
 548   top: 0;
 549   left: 0;
 550   margin: $-m 0;
 551   background-color: #FFFFFF;
 552   list-style: none;
 553   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
 554   border-radius: 1px;
 555   border: 1px solid #EEE;
 556   min-width: 180px;
 557   padding: $-xs 0;
 558   color: #555;
 559   a {
 560     display: block;
 561     padding: $-xs $-m;
 562     color: #555;
 563     &:hover {
 564       text-decoration: none;
 565       background-color: #EEE;
 566     }
 567     i {
 568       margin-right: $-m;
 569       padding-right: 0;
 570       display: inline;
 571       width: 22px;
 572     }
 573   }
 574   li.border-bottom {
 575     border-bottom: 1px solid #DDD;
 576   }
 577 }
 578
 579 .search-results > h3 a {
 580   font-size: 0.66em;
 581   color: $primary;
 582   padding-left: $-m;
 583   i {
 584     padding-right: $-s;
 585   }
 586 }