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