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