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