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
 300 .book-tree h4 {
 301   padding: $-m $-s 0 $-s;
 302   i {
 303     padding-right: $-s;
 304   }
 305 }
 306
 307
 308 // Sidebar list
 309 .book-tree .sidebar-page-list {
 310   list-style: none;
 311   margin: 0;
 312   margin-top: $-xl;
 313   border-left: 5px solid $color-book;
 314   li a {
 315     display: block;
 316     border-bottom: none;
 317     padding-left: $-s;
 318     padding: $-xs 0 $-xs $-s;
 319     &:hover {
 320       background-color: rgba(255, 255, 255, 0.2);
 321       text-decoration: none;
 322     }
 323   }
 324   li, a {
 325     display: block;
 326   }
 327   a.bold {
 328     color: #EEE !important;
 329   }
 330   ul {
 331     list-style: none;
 332     margin: 0;
 333   }
 334   .book {
 335     color: $color-book !important;
 336     &.selected {
 337       background-color: rgba($color-book, 0.29);
 338     }
 339   }
 340   .chapter {
 341     color: $color-chapter !important;
 342     &.selected {
 343       background-color: rgba($color-chapter, 0.12);
 344     }
 345   }
 346   .list-item-chapter {
 347     border-left: 5px solid $color-chapter;
 348     margin: 10px 10px;
 349     display: block;
 350   }
 351   .list-item-page {
 352     border-bottom: none;
 353   }
 354   .page {
 355     color: $color-page !important;
 356     border-left: 5px solid $color-page;
 357     margin: 10px 10px;
 358     border-bottom: none;
 359     &.selected {
 360       background-color: rgba($color-page, 0.1);
 361     }
 362   }
 363 }
 364
 365 // Sortable Lists
 366 .sortable-page-list, .sortable-page-list ul {
 367   list-style: none;
 368 }
 369 .sortable-page-list {
 370   margin-left: 0;
 371   box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
 372   ul {
 373     margin-bottom: 0;
 374     margin-top: 0;
 375     box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
 376   }
 377   li {
 378     border: 1px solid #DDD;
 379     padding: $-xs $-s;
 380     margin-top: -1px;
 381     min-height: 38px;
 382     &.text-chapter {
 383       border-left: 2px solid $color-chapter;
 384     }
 385     &.text-page {
 386       border-left: 2px solid $color-page;
 387     }
 388   }
 389   li:first-child {
 390     margin-top: $-xs;
 391   }
 392 }
 393
 394 // Jquery Sortable Styles
 395 .dragged {
 396   position: absolute;
 397   opacity: 0.5;
 398   z-index: 2000;
 399 }
 400
 401 body.dragging, body.dragging * {
 402   cursor: move !important;
 403 }
 404
 405 .sortable-page-list li.placeholder {
 406   position: relative;
 407 }
 408 .sortable-page-list li.placeholder:before {
 409   position: absolute;
 410 }
 411
 412 .center-box {
 413   margin: 15vh auto 0 auto;
 414   padding: $-m $-xxl $-xl*2 $-xxl;
 415   max-width: 346px;
 416   &.login {
 417     background-color: #EEE;
 418     box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
 419     border: 1px solid #DDD;
 420   }
 421 }
 422
 423 .activity-list-item {
 424   padding: $-s 0;
 425   color: #888;
 426   border-bottom: 1px solid #EEE;
 427   font-size: 0.9em;
 428   .left {
 429     float: left;
 430   }
 431   .left + .right {
 432     margin-left: 30px + $-s;
 433   }
 434 }
 435
 436 .avatar {
 437   border-radius: 100%;
 438 }
 439
 440 .notification {
 441   position: fixed;
 442   top: 0;
 443   right: 0;
 444   margin: $-xl*2 $-xl;
 445   padding: $-l $-xl;
 446   background-color: #EEE;
 447   border-radius: 3px;
 448   box-shadow: $bs-med;
 449   z-index: 99999999;
 450   display: table;
 451   cursor: pointer;
 452   max-width: 480px;
 453   i, span {
 454     display: table-cell;
 455   }
 456   i {
 457     font-size: 2em;
 458     padding-right: $-l;
 459   }
 460   span {
 461     vertical-align: middle;
 462   }
 463   &.pos {
 464     background-color: $positive;
 465     color: #EEE;
 466   }
 467   &.neg {
 468     background-color: $negative;
 469     color: #EEE;
 470   }
 471 }
 472
 473 .setting-nav {
 474   text-align: center;
 475   a {
 476     padding: $-m;
 477     display: inline-block;
 478     //color: #666;
 479     &.selected {
 480       //color: $primary;
 481       border-bottom: 2px solid $primary;
 482     }
 483   }
 484 }
 485
 486 .dropdown-container {
 487   display: inline-block;
 488   vertical-align: top;
 489   position: relative;
 490 }
 491 ul.dropdown {
 492   display: none;
 493   position: absolute;
 494   z-index: 999;
 495   top: 0;
 496   left: 0;
 497   margin: $-m 0;
 498   background-color: #FFFFFF;
 499   list-style: none;
 500   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
 501   border-radius: 1px;
 502   border: 1px solid #EEE;
 503   min-width: 180px;
 504   padding: $-xs 0;
 505   color: #555;
 506   a {
 507     display: block;
 508     padding: $-xs $-m;
 509     color: #555;
 510     &:hover {
 511       text-decoration: none;
 512       background-color: #EEE;
 513     }
 514     i {
 515       margin-right: $-m;
 516       padding-right: 0;
 517       display: inline;
 518       width: 22px;
 519     }
 520   }
 521   li.border-bottom {
 522     border-bottom: 1px solid #DDD;
 523   }
 524 }