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