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     height:auto;
 105   }
 106 }
 107
 108 .page-list {
 109   h3 {
 110     margin: $-l 0;
 111   }
 112   .inset-list {
 113     display: block;
 114     overflow: hidden;
 115     padding-left: $-l*2;
 116     border-top: 3px dotted #EEE;
 117   }
 118   h4 {
 119     display: block;
 120     margin: $-m 0;
 121   }
 122   hr {
 123     margin-top: 0;
 124   }
 125 }
 126
 127 .side-nav {
 128   position: fixed;
 129   padding-left: $-m;
 130   opacity: 0.8;
 131   margin-top: $-xxl;
 132   margin-left: 0;
 133   max-width: 240px;
 134 }
 135
 136 .page-nav-list {
 137   $nav-indent: $-s;
 138   margin-left: 2px;
 139   list-style: none;
 140   li {
 141     //border-left: 1px solid rgba(0, 0, 0, 0.1);
 142     padding-left: $-xs;
 143     border-left: 2px solid #888;
 144     margin-bottom: 4px;
 145   }
 146   li a {
 147     color: #555;
 148   }
 149   .nav-H2 {
 150     margin-left: $nav-indent;
 151     font-size: 0.95em;
 152   }
 153   .nav-H3 {
 154     margin-left: $nav-indent*2;
 155     font-size: 0.90em
 156   }
 157   .nav-H4 {
 158     margin-left: $nav-indent*3;
 159     font-size: 0.85em
 160   }
 161   .nav-H5 {
 162     margin-left: $nav-indent*4;
 163     font-size: 0.80em
 164   }
 165   .nav-H6 {
 166     margin-left: $nav-indent*5;
 167     font-size: 0.75em
 168   }
 169 }
 170
 171
 172
 173 .overlay {
 174   background-color: rgba(0, 0, 0, 0.2);
 175   position: fixed;
 176   display: block;
 177   z-index: 95536;
 178   width: 100%;
 179   height: 100%;
 180   min-width: 100%;
 181   min-height: 100%;
 182   top: 0;
 183   left: 0;
 184   right: 0;
 185   bottom: 0;
 186 }
 187 #image-manager {
 188   background-color: #EEE;
 189   max-width: 90%;
 190   max-height: 90%;
 191   width: 90%;
 192   height: 90%;
 193   margin: 2% 5%;
 194   //border: 2px solid $primary;
 195   border-radius: 4px;
 196   box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
 197   overflow: hidden;
 198   .image-manager-display img {
 199     width: 150px;
 200     height: 150px;
 201     display: inline-block;
 202     margin: $-s 0 0 $-s;
 203     cursor: pointer;
 204   }
 205 }
 206 .image-manager-left {
 207   background-color: #FFF;
 208   height: 100%;
 209   width: 100%;
 210   text-align: left;
 211   .image-manager-display {
 212     height: 75%;
 213     width: 100%;
 214     text-align: left;
 215     overflow-y: scroll;
 216   }
 217 }
 218
 219 .image-manager-title {
 220   font-size: 2em;
 221   text-align: left;
 222   margin: 0 $-m;
 223   padding: $-xl $-m;
 224   color: #666;
 225   border-bottom: 1px solid #DDD;
 226 }
 227
 228 .image-manager-dropzone {
 229   background-color: lighten($primary, 40%);
 230   height: 25%;
 231   text-align: center;
 232   font-size: 2em;
 233   line-height: 2em;
 234   padding-top: $-xl*1.2;
 235   color: #666;
 236   border-top: 2px solid $primary;
 237 }
 238
 239 // Link hooks & popovers
 240 a.link-hook {
 241   position: absolute;
 242   display: inline-block;
 243   top: $-xs;
 244   left: -$-l;
 245   padding-bottom: 30px;
 246   font-size: 20px;
 247   line-height: 20px;
 248   color: #BBB;
 249   opacity: 0;
 250   transform: translate3d(10px, 0, 0);
 251   transition: all ease-in-out 240ms;
 252   background-color: transparent;
 253   &:hover {
 254     color: $primary;
 255   }
 256 }
 257 h1, h2, h3, h4, h5, h6 {
 258   &:hover a.link-hook {
 259     opacity: 1;
 260     transform: translate3d(0, 0, 0);
 261   }
 262 }
 263
 264 .breadcrumbs {
 265   margin-top: $-s;
 266   i {
 267     padding-right: 4px;
 268   }
 269   span.sep {
 270     color: #aaa;
 271     padding: 0 $-xs;
 272   }
 273 }
 274
 275 .faded {
 276   a {
 277     color: #666;
 278     opacity: 0.5;
 279     transition: all ease-in-out 120ms;
 280     &:hover {
 281       opacity: 1;
 282       text-decoration: none;
 283     }
 284   }
 285 }
 286
 287 .faded-small {
 288   color: #666;
 289   font-size: 0.9em;
 290   a, span {
 291     color: #666;
 292   }
 293 }
 294
 295 .action-buttons {
 296   text-align: right;
 297   a {
 298     display: inline-block;
 299     padding: $-s;
 300   }
 301 }
 302
 303
 304 .book-tree h4 {
 305   padding: $-m $-s 0 $-s;
 306   i {
 307     padding-right: $-s;
 308   }
 309 }
 310 // Sidebar list
 311 .book-tree .sidebar-page-list {
 312   list-style: none;
 313   margin: 0;
 314   li a {
 315     display: block;
 316     border-bottom: 1px solid #3A3939;
 317   }
 318   a.bold {
 319     color: #EEE !important;
 320   }
 321   ul {
 322     list-style: none;
 323     margin: 0;
 324   }
 325   ul li a {
 326     padding-left: $-xl;
 327   }
 328   .book {
 329     color: #7BD06E !important;
 330   }
 331   .chapter {
 332     color: #D2A64B !important;
 333   }
 334   .page {
 335     color: #4599DC !important;
 336   }
 337 }
 338
 339 .sortable-page-list, .sortable-page-list ul {
 340   list-style: none;
 341   //background-color: rgba(0, 0, 0, 0.04);
 342 }
 343 .sortable-page-list {
 344   margin-left: 0;
 345   ul {
 346     margin-bottom: 0;
 347     margin-top: 0;
 348   }
 349   li {
 350     border-bottom: 1px solid #BBB;
 351     border-left: 1px solid #BBB;
 352     border-right: 1px solid #BBB;
 353     padding: $-xs $-s;
 354   }
 355   li:first-child {
 356     margin-top: $-xs;
 357     border-top: 1px solid #BBB;
 358   }
 359 }
 360
 361 // Jquery Sortable Styles
 362 .dragged {
 363   position: absolute;
 364   opacity: 0.5;
 365   z-index: 2000;
 366 }
 367
 368 body.dragging, body.dragging * {
 369   cursor: move !important;
 370 }
 371
 372 .sortable-page-list li.placeholder {
 373   position: relative;
 374 }
 375 .sortable-page-list li.placeholder:before {
 376   position: absolute;
 377 }