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, button, span {
 313     color: #666;
 314   }
 315   .text-button {
 316     opacity: 0.5;
 317     transition: all ease-in-out 120ms;
 318     &:hover {
 319       opacity: 1;
 320       text-decoration: none;
 321     }
 322   }
 323 }
 324
 325 .faded-small {
 326   color: #000;
 327   font-size: 0.9em;
 328   background-color: rgba(21, 101, 192, 0.15);
 329 }
 330
 331 .breadcrumbs .text-button, .action-buttons .text-button {
 332   display: inline-block;
 333   padding: $-s;
 334   &:last-child {
 335     padding-right: 0;
 336   }
 337 }
 338 .action-buttons {
 339   text-align: right;
 340   &.text-left {
 341     text-align: left;
 342     .text-button {
 343       padding-right: $-m;
 344       padding-left: 0;
 345     }
 346   }
 347 }
 348
 349 .book-tree {
 350   margin-top: $-xl;
 351 }
 352 .book-tree h4 {
 353   padding: $-m $-s 0 $-s;
 354   i {
 355     padding-right: $-s;
 356   }
 357 }
 358
 359
 360 // Sidebar list
 361 .book-tree .sidebar-page-list {
 362   list-style: none;
 363   margin: 0;
 364   margin-top: $-xs;
 365   border-left: 5px solid $color-book;
 366   li a {
 367     display: block;
 368     border-bottom: none;
 369     padding-left: $-s;
 370     padding: $-xs 0 $-xs $-s;
 371     &:hover {
 372       background-color: rgba(255, 255, 255, 0.2);
 373       text-decoration: none;
 374     }
 375   }
 376   li, a {
 377     display: block;
 378   }
 379   a.bold {
 380     color: #EEE !important;
 381   }
 382   ul {
 383     list-style: none;
 384     margin: 0;
 385   }
 386   .book {
 387     color: $color-book !important;
 388     &.selected {
 389       background-color: rgba($color-book, 0.29);
 390     }
 391   }
 392   .chapter {
 393     color: $color-chapter !important;
 394     &.selected {
 395       background-color: rgba($color-chapter, 0.12);
 396     }
 397   }
 398   .list-item-chapter {
 399     border-left: 5px solid $color-chapter;
 400     margin: 10px 10px;
 401     display: block;
 402   }
 403   .list-item-page {
 404     border-bottom: none;
 405   }
 406   .page {
 407     color: $color-page !important;
 408     border-left: 5px solid $color-page;
 409     margin: 10px 10px;
 410     border-bottom: none;
 411     &.selected {
 412       background-color: rgba($color-page, 0.1);
 413     }
 414   }
 415 }
 416
 417 // Sortable Lists
 418 .sortable-page-list, .sortable-page-list ul {
 419   list-style: none;
 420 }
 421 .sortable-page-list {
 422   margin-left: 0;
 423   box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
 424   ul {
 425     margin-bottom: 0;
 426     margin-top: 0;
 427     box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
 428   }
 429   li {
 430     border: 1px solid #DDD;
 431     padding: $-xs $-s;
 432     margin-top: -1px;
 433     min-height: 38px;
 434     &.text-chapter {
 435       border-left: 2px solid $color-chapter;
 436     }
 437     &.text-page {
 438       border-left: 2px solid $color-page;
 439     }
 440   }
 441   li:first-child {
 442     margin-top: $-xs;
 443   }
 444 }
 445
 446 // Jquery Sortable Styles
 447 .dragged {
 448   position: absolute;
 449   opacity: 0.5;
 450   z-index: 2000;
 451 }
 452
 453 body.dragging, body.dragging * {
 454   cursor: move !important;
 455 }
 456
 457 .sortable-page-list li.placeholder {
 458   position: relative;
 459 }
 460 .sortable-page-list li.placeholder:before {
 461   position: absolute;
 462 }
 463
 464 .center-box {
 465   margin: 15vh auto 0 auto;
 466   padding: $-m $-xxl $-xl*2 $-xxl;
 467   max-width: 346px;
 468   &.login {
 469     background-color: #EEE;
 470     box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
 471     border: 1px solid #DDD;
 472   }
 473 }
 474
 475 .activity-list-item {
 476   padding: $-s 0;
 477   color: #888;
 478   border-bottom: 1px solid #EEE;
 479   font-size: 0.9em;
 480   .left {
 481     float: left;
 482   }
 483   .left + .right {
 484     margin-left: 30px + $-s;
 485   }
 486 }
 487
 488 .avatar {
 489   border-radius: 100%;
 490 }
 491
 492 .notification {
 493   position: fixed;
 494   top: 0;
 495   right: 0;
 496   margin: $-xl*2 $-xl;
 497   padding: $-l $-xl;
 498   background-color: #EEE;
 499   border-radius: 3px;
 500   box-shadow: $bs-med;
 501   z-index: 99999999;
 502   display: table;
 503   cursor: pointer;
 504   max-width: 480px;
 505   i, span {
 506     display: table-cell;
 507   }
 508   i {
 509     font-size: 2em;
 510     padding-right: $-l;
 511   }
 512   span {
 513     vertical-align: middle;
 514   }
 515   &.pos {
 516     background-color: $positive;
 517     color: #EEE;
 518   }
 519   &.neg {
 520     background-color: $negative;
 521     color: #EEE;
 522   }
 523 }
 524
 525 .setting-nav {
 526   text-align: center;
 527   a {
 528     padding: $-m;
 529     display: inline-block;
 530     //color: #666;
 531     &.selected {
 532       //color: $primary;
 533       border-bottom: 2px solid $primary;
 534     }
 535   }
 536 }
 537
 538 .dropdown-container {
 539   display: inline-block;
 540   vertical-align: top;
 541   position: relative;
 542 }
 543 ul.dropdown {
 544   display: none;
 545   position: absolute;
 546   z-index: 999;
 547   top: 0;
 548   left: 0;
 549   margin: $-m 0;
 550   background-color: #FFFFFF;
 551   list-style: none;
 552   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
 553   border-radius: 1px;
 554   border: 1px solid #EEE;
 555   min-width: 180px;
 556   padding: $-xs 0;
 557   color: #555;
 558   a {
 559     display: block;
 560     padding: $-xs $-m;
 561     color: #555;
 562     &:hover {
 563       text-decoration: none;
 564       background-color: #EEE;
 565     }
 566     i {
 567       margin-right: $-m;
 568       padding-right: 0;
 569       display: inline;
 570       width: 22px;
 571     }
 572   }
 573   li.border-bottom {
 574     border-bottom: 1px solid #DDD;
 575   }
 576 }
 577
 578 .search-results > h3 a {
 579   font-size: 0.66em;
 580   color: $primary;
 581   padding-left: $-m;
 582   i {
 583     padding-right: $-s;
 584   }
 585 }