BookStack Code Mirror - bookstack/blob - resources/assets/sass/styles.scss

   1 @import "reset";
   2 @import "variables";
   3 @import "fonts";
   4 @import "mixins";
   5 @import "html";
   6 @import "text";
   7 @import "grid";
   8 @import "blocks";
   9 @import "buttons";
  10 @import "forms";
  11 @import "tables";
  12 @import "animations";
  13 @import "tinymce";
  14 @import "highlightjs";
  15 @import "simplemde";
  16 @import "components";
  17 @import "header";
  18 @import "lists";
  19 @import "pages";
  20 @import "comments";
  21
  22 [v-cloak], [v-show] {display: none;}
  23
  24 [ng\:cloak], [ng-cloak], .ng-cloak {
  25   display: none !important;
  26   user-select: none;
  27 }
  28
  29 [ng-click] {
  30   cursor: pointer;
  31 }
  32
  33 // Jquery Sortable Styles
  34 .dragged {
  35   position: absolute;
  36   opacity: 0.5;
  37   z-index: 2000;
  38 }
  39 body.dragging, body.dragging * {
  40   cursor: move !important;
  41 }
  42
  43 // User Avatar Images
  44 .avatar {
  45   border-radius: 100%;
  46   background-color: #EEE;
  47   width: 30px;
  48   height: 30px;
  49   &.med {
  50     width: 40px;
  51     height: 40px;
  52   }
  53   &.large {
  54     width: 80px;
  55     height: 80px;
  56   }
  57   &.huge {
  58     width: 120px;
  59     height: 120px;
  60   }
  61   &.square {
  62     border-radius: 3px;
  63   }
  64 }
  65
  66 // System wide notifications
  67 .notification {
  68   position: fixed;
  69   top: 0;
  70   right: 0;
  71   margin: $-xl*2 $-xl;
  72   padding: $-l $-xl;
  73   background-color: #EEE;
  74   border-radius: 3px;
  75   box-shadow: $bs-med;
  76   z-index: 999999;
  77   display: block;
  78   cursor: pointer;
  79   max-width: 480px;
  80   i, span {
  81     display: table-cell;
  82   }
  83   i {
  84     font-size: 2em;
  85     padding-right: $-l;
  86   }
  87   span {
  88     vertical-align: middle;
  89   }
  90   &.pos {
  91     background-color: $positive;
  92     color: #EEE;
  93   }
  94   &.neg {
  95     background-color: $negative;
  96     color: #EEE;
  97   }
  98   &.warning {
  99     background-color: $secondary;
 100     color: #EEE;
 101   }
 102 }
 103
 104 // Loading icon
 105 $loadingSize: 10px;
 106 .loading-container {
 107   position: relative;
 108   display: block;
 109   height: $loadingSize;
 110   margin: $-xl auto;
 111   > div {
 112     width: $loadingSize;
 113     height: $loadingSize;
 114     border-radius: $loadingSize;
 115     display: inline-block;
 116     vertical-align: top;
 117     transform: translate3d(0, 0, 0);
 118     animation-name: loadingBob;
 119     animation-duration: 1.4s;
 120     animation-iteration-count: infinite;
 121     animation-timing-function: cubic-bezier(.62, .28, .23, .99);
 122     margin-right: 4px;
 123     background-color: $color-page;
 124     animation-delay: 0.3s;
 125   }
 126   > div:first-child {
 127       left: -($loadingSize+$-xs);
 128       background-color: $color-book;
 129       animation-delay: 0s;
 130   }
 131   > div:last-child {
 132     left: $loadingSize+$-xs;
 133     background-color: $color-chapter;
 134     animation-delay: 0.6s;
 135   }
 136 }
 137
 138
 139 // Search results
 140 .search-results > h3 a {
 141   font-size: 0.66em;
 142   color: $primary;
 143   padding-left: $-m;
 144   i {
 145     padding-right: $-s;
 146   }
 147 }
 148
 149 // Back to top link
 150 $btt-size: 40px;
 151 #back-to-top {
 152   background-color: $primary;
 153   position: fixed;
 154   bottom: $-m;
 155   right: $-l;
 156   padding: $-xs $-s;
 157   cursor: pointer;
 158   color: #FFF;
 159   width: $btt-size;
 160   height: $btt-size;
 161   border-radius: $btt-size;
 162   transition: all ease-in-out 180ms;
 163   opacity: 0;
 164   z-index: 999;
 165   overflow: hidden;
 166   &:hover {
 167     width: $btt-size*3.4;
 168     opacity: 1 !important;
 169     span {
 170       display: inline-block;
 171     }
 172   }
 173   .inner {
 174     width: $btt-size*3.4;
 175   }
 176   i {
 177     margin: 0;
 178     font-size: 28px;
 179     padding: 0 $-s 0 0;
 180   }
 181   span {
 182     line-height: 12px;
 183     position: relative;
 184     top: -5px;
 185   }
 186 }
 187
 188 .contained-search-box {
 189   display: flex;
 190   input, button {
 191     border-radius: 0;
 192     border: 1px solid #DDD;
 193     margin-left: -1px;
 194   }
 195   input {
 196     flex: 5;
 197     &:focus, &:active {
 198       outline: 0;
 199     }
 200   }
 201   button {
 202     width: 60px;
 203   }
 204   button i {
 205     padding: 0;
 206   }
 207   button.cancel.active {
 208     background-color: $negative;
 209     color: #EEE;
 210   }
 211 }
 212
 213 .entity-selector {
 214   border: 1px solid #DDD;
 215   border-radius: 3px;
 216   overflow: hidden;
 217   font-size: 0.8em;
 218   input[type="text"] {
 219     width: 100%;
 220     display: block;
 221     border-radius: 0;
 222     border: 0;
 223     border-bottom: 1px solid #DDD;
 224     font-size: 16px;
 225     padding: $-s $-m;
 226   }
 227   .entity-list {
 228     overflow-y: scroll;
 229     height: 400px;
 230     background-color: #EEEEEE;
 231   }
 232   .loading {
 233     height: 400px;
 234     padding-top: $-l;
 235   }
 236   .entity-list > p {
 237     text-align: center;
 238     padding-top: $-l;
 239     font-size: 1.333em;
 240   }
 241   .entity-list > div {
 242     padding-left: $-m;
 243     padding-right: $-m;
 244     background-color: #FFF;
 245     transition: all ease-in-out 120ms;
 246     cursor: pointer;
 247   }
 248 }
 249
 250 .entity-list-item.selected {
 251   h3, i, p ,a, span {
 252     color: #EEE;
 253   }
 254 }
 255
 256 .center-box {
 257   margin: $-xl auto 0 auto;
 258   padding: $-m $-xxl $-xl $-xxl;
 259   width: 420px;
 260   max-width: 100%;
 261   display: inline-block;
 262   text-align: left;
 263   vertical-align: top;
 264   //border: 1px solid #DDD;
 265   input {
 266     width: 100%;
 267   }
 268   &.login {
 269     background-color: #EEE;
 270     box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
 271     border: 1px solid #DDD;
 272   }
 273 }
 274
 275
 276