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     span {
 135       display: inline-block;
 136     }
 137   }
 138   .inner {
 139     width: $btt-size*3.4;
 140   }
 141   span {
 142     position: relative;
 143     vertical-align: top;
 144     line-height: 2;
 145   }
 146 }
 147
 148 .contained-search-box {
 149   display: flex;
 150   input, button {
 151     border-radius: 0;
 152     border: 1px solid #DDD;
 153     margin-left: -1px;
 154   }
 155   input {
 156     flex: 5;
 157     padding: $-xs $-s;
 158     &:focus, &:active {
 159       outline: 0;
 160     }
 161   }
 162   button {
 163     width: 60px;
 164   }
 165   button i {
 166     padding: 0;
 167   }
 168   button.cancel.active {
 169     background-color: $negative;
 170     color: #EEE;
 171   }
 172 }
 173
 174 .entity-selector {
 175   border: 1px solid #DDD;
 176   border-radius: 3px;
 177   overflow: hidden;
 178   font-size: 0.8em;
 179   input[type="text"] {
 180     width: 100%;
 181     display: block;
 182     border-radius: 0;
 183     border: 0;
 184     border-bottom: 1px solid #DDD;
 185     font-size: 16px;
 186     padding: $-s $-m;
 187   }
 188   .entity-list {
 189     overflow-y: scroll;
 190     height: 400px;
 191     background-color: #EEEEEE;
 192   }
 193   .loading {
 194     height: 400px;
 195     padding-top: $-l;
 196   }
 197   .entity-list > p {
 198     text-align: center;
 199     padding-top: $-l;
 200     font-size: 1.333em;
 201   }
 202   .entity-list > div {
 203     padding-left: $-m;
 204     padding-right: $-m;
 205     background-color: #FFF;
 206     transition: all ease-in-out 120ms;
 207     cursor: pointer;
 208   }
 209 }
 210
 211 .entity-list-item.selected {
 212   h3, i, p ,a, span {
 213     color: #EEE;
 214   }
 215 }
 216
 217 .center-box {
 218   margin: $-xxl auto 0 auto;
 219   width: 420px;
 220   max-width: 100%;
 221   display: inline-block;
 222   text-align: left;
 223   vertical-align: top;
 224   input {
 225     width: 100%;
 226   }
 227 }
 228
 229 .fullscreen {
 230   border:0;
 231   position:fixed;
 232   top:0;
 233   left:0;
 234   right:0;
 235   bottom:0;
 236   width:100%;
 237   height:100%;
 238   z-index: 150;
 239 }