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