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

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