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