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 // Jquery Sortable Styles
  23 .dragged {
  24   position: absolute;
  25   opacity: 0.5;
  26   z-index: 2000;
  27 }
  28 body.dragging, body.dragging * {
  29   cursor: move !important;
  30 }
  31
  32 // User Avatar Images
  33 .avatar {
  34   border-radius: 100%;
  35   @include lightDark(background-color, #eee, #000);
  36   width: 30px;
  37   height: 30px;
  38   &.med {
  39     width: 40px;
  40     height: 40px;
  41   }
  42   &.large {
  43     width: 80px;
  44     height: 80px;
  45   }
  46   &.huge {
  47     width: 120px;
  48     height: 120px;
  49   }
  50   &.square {
  51     border-radius: 3px;
  52   }
  53   &[src$="user_avatar.png"] {
  54     @include whenDark {
  55       filter: invert(1);
  56     }
  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-inline-end: 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-inline-start: $-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-inline-end: 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   height: 38px;
 140   input, button {
 141     border-radius: 0;
 142     border: 1px solid #ddd;
 143     @include lightDark(border-color, #ddd, #000);
 144     margin-inline-start: -1px;
 145   }
 146   input {
 147     flex: 5;
 148     padding: $-xs $-s;
 149     &:focus, &:active {
 150       outline: 0;
 151     }
 152   }
 153   button {
 154     width: 60px;
 155   }
 156   button i {
 157     padding: 0;
 158   }
 159   button.cancel.active {
 160     background-color: $negative;
 161     color: #EEE;
 162   }
 163   svg {
 164     margin: 0;
 165   }
 166 }
 167
 168 .entity-selector {
 169   border: 1px solid #DDD;
 170   @include lightDark(border-color, #ddd, #111);
 171   border-radius: 3px;
 172   overflow: hidden;
 173   font-size: 0.8em;
 174   input[type="text"] {
 175     width: 100%;
 176     display: block;
 177     border-radius: 0;
 178     border: 0;
 179     border-bottom: 1px solid #DDD;
 180     font-size: 16px;
 181     padding: $-s $-m;
 182   }
 183   .entity-list {
 184     overflow-y: scroll;
 185     height: 400px;
 186     @include lightDark(background-color, #eee, #222);
 187     margin-inline-end: 0;
 188     margin-inline-start: 0;
 189   }
 190   .entity-list-item {
 191     @include lightDark(background-color, #fff, #222);
 192   }
 193   .entity-list-item p {
 194     margin-bottom: 0;
 195   }
 196   .entity-list-item.selected {
 197     background-color: rgba(0, 0, 0, 0.05) !important;
 198   }
 199   .loading {
 200     height: 400px;
 201     padding-top: $-l;
 202   }
 203   .entity-selector-add button {
 204     margin: 0;
 205     display: block;
 206     width: 100%;
 207     border: 0;
 208     border-top: 1px solid #DDD;
 209   }
 210   &.compact {
 211     font-size: 10px;
 212     .entity-item-snippet {
 213       display: none;
 214     }
 215   }
 216 }
 217
 218 .scroll-box {
 219   max-height: 250px;
 220   overflow-y: scroll;
 221   border: 1px solid #DDD;
 222   border-radius: 3px;
 223   .scroll-box-item {
 224     padding: $-xs $-m;
 225     border-bottom: 1px solid #DDD;
 226     border-top: 1px solid #DDD;
 227     margin-top: -1px;
 228     &:last-child {
 229       border-bottom: 0;
 230     }
 231   }
 232 }
 233
 234 .scroll-box[data-instruction]:before {
 235   content: attr(data-instruction);
 236   padding: $-xs $-m;
 237   border-bottom: 1px solid #DDD;
 238   display: block;
 239   font-size: 0.75rem;
 240   color: #666;
 241 }
 242
 243 .fullscreen {
 244   border:0;
 245   position:fixed;
 246   top:0;
 247   left:0;
 248   right:0;
 249   bottom:0;
 250   width:100%;
 251   height:100%;
 252   z-index: 150;
 253 }
 254
 255 .list-sort-container {
 256   display: inline-block;
 257   form {
 258     display: inline-block;
 259   }
 260   .list-sort {
 261     display: inline-grid;
 262     margin-inline-start: $-s;
 263     grid-template-columns: minmax(120px, max-content) 40px;
 264     font-size: 0.9rem;
 265     border: 2px solid #DDD;
 266     @include lightDark(border-color, #ddd, #444);
 267     border-radius: 4px;
 268   }
 269   .list-sort-label {
 270     font-weight: bold;
 271     display: inline-block;
 272     @include lightDark(color, #555, #888);
 273   }
 274   .list-sort-type {
 275     text-align: start;
 276   }
 277   .list-sort-type, .list-sort-dir {
 278     padding: $-xs $-s;
 279     cursor: pointer;
 280   }
 281   .list-sort-dir {
 282     border-inline-start: 2px solid #DDD;
 283     color: #888;
 284     @include lightDark(border-color, #ddd, #444);
 285     .svg-icon {
 286       transition: transform ease-in-out 120ms;
 287     }
 288     &:hover .svg-icon {
 289       transform: rotate(180deg);
 290     }
 291   }
 292 }
 293
 294 table.table .table-user-item {
 295   display: grid;
 296   grid-template-columns: 42px 1fr;
 297   align-items: center;
 298 }
 299 table.table .table-entity-item {
 300   display: grid;
 301   grid-template-columns: 36px 1fr;
 302   align-items: center;
 303 }