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