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