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