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 "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   @include lightDark(background-color, #eee, #000);
  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-inline-end: 4px;
  78     background-color: var(--color-page);
  79     animation-delay: 0.3s;
  80   }
  81   > div:first-child {
  82       left: -($loadingSize+$-xs);
  83       background-color: var(--color-book);
  84       animation-delay: 0s;
  85   }
  86   > div:last-of-type {
  87     left: $loadingSize+$-xs;
  88     background-color: var(--color-chapter);
  89     animation-delay: 0.6s;
  90   }
  91   > span {
  92     margin-inline-start: $-s;
  93     font-style: italic;
  94     color: #888;
  95     vertical-align: top;
  96   }
  97 }
  98
  99 // Back to top link
 100 $btt-size: 40px;
 101 [back-to-top] {
 102   background-color: var(--color-primary);
 103   position: fixed;
 104   bottom: $-m;
 105   right: $-l;
 106   padding: 5px 7px;
 107   cursor: pointer;
 108   color: #FFF;
 109   fill: #FFF;
 110   svg {
 111     width: $btt-size / 1.5;
 112     height: $btt-size / 1.5;
 113     margin-inline-end: 4px;
 114   }
 115   width: $btt-size;
 116   height: $btt-size;
 117   border-radius: $btt-size;
 118   transition: all ease-in-out 180ms;
 119   opacity: 0;
 120   z-index: 999;
 121   overflow: hidden;
 122   &:hover {
 123     width: $btt-size*3.4;
 124     opacity: 1 !important;
 125   }
 126   .inner {
 127     width: $btt-size*3.4;
 128   }
 129   span {
 130     position: relative;
 131     vertical-align: top;
 132     line-height: 2;
 133   }
 134 }
 135
 136 .contained-search-box {
 137   display: flex;
 138   input, button {
 139     border-radius: 0;
 140     @include lightDark(border-color, #ddd, #000);
 141     margin-inline-start: -1px;
 142   }
 143   input {
 144     flex: 5;
 145     padding: $-xs $-s;
 146     &:focus, &:active {
 147       outline: 0;
 148     }
 149   }
 150   button {
 151     width: 60px;
 152   }
 153   button i {
 154     padding: 0;
 155   }
 156   button.cancel.active {
 157     background-color: $negative;
 158     color: #EEE;
 159   }
 160 }
 161
 162 .entity-selector {
 163   border: 1px solid #DDD;
 164   @include lightDark(border-color, #ddd, #111);
 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     @include lightDark(background-color, #eee, #222);
 181     margin-inline-end: 0;
 182     margin-inline-start: 0;
 183   }
 184   .entity-list-item {
 185     @include lightDark(background-color, #fff, #222);
 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-inline-start: $-s;
 257     grid-template-columns: minmax(120px, max-content) 40px;
 258     font-size: 0.9rem;
 259     border: 2px solid #DDD;
 260     @include lightDark(border-color, #ddd, #444);
 261     border-radius: 4px;
 262   }
 263   .list-sort-label {
 264     font-weight: bold;
 265     display: inline-block;
 266     @include lightDark(color, #555, #888);
 267   }
 268   .list-sort-type {
 269     text-align: start;
 270   }
 271   .list-sort-type, .list-sort-dir {
 272     padding: $-xs $-s;
 273     cursor: pointer;
 274   }
 275   .list-sort-dir {
 276     border-inline-start: 2px solid #DDD;
 277     color: #888;
 278     @include lightDark(border-color, #ddd, #444);
 279     .svg-icon {
 280       transition: transform ease-in-out 120ms;
 281     }
 282     &:hover .svg-icon {
 283       transform: rotate(180deg);
 284     }
 285   }
 286 }