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