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