BookStack Code Mirror - bookstack/blob - resources/sass/styles.scss

   1 @use "sass:math";
   2
   3 @import "reset";
   4 @import "variables";
   5 @import "mixins";
   6 @import "spacing";
   7 @import "opacity";
   8 @import "html";
   9 @import "text";
  10 @import "colors";
  11 @import "layout";
  12 @import "blocks";
  13 @import "buttons";
  14 @import "tables";
  15 @import "forms";
  16 @import "animations";
  17 @import "tinymce";
  18 @import "codemirror";
  19 @import "components";
  20 @import "header";
  21 @import "footer";
  22 @import "lists";
  23 @import "pages";
  24
  25 // Jquery Sortable Styles
  26 .dragged {
  27   position: absolute;
  28   opacity: 0.5;
  29   z-index: 2000;
  30 }
  31 body.dragging, body.dragging * {
  32   cursor: move !important;
  33 }
  34
  35 // User Avatar Images
  36 .avatar {
  37   border-radius: 100%;
  38   @include lightDark(background-color, #eee, #000);
  39   width: 30px;
  40   height: 30px;
  41   &.med {
  42     width: 40px;
  43     height: 40px;
  44   }
  45   &.large {
  46     width: 80px;
  47     height: 80px;
  48   }
  49   &.huge {
  50     width: 120px;
  51     height: 120px;
  52   }
  53   &.square {
  54     border-radius: 3px;
  55   }
  56   &[src$="user_avatar.png"] {
  57     @include whenDark {
  58       filter: invert(1);
  59     }
  60   }
  61 }
  62
  63 // Loading icon
  64 $loadingSize: 10px;
  65 .loading-container {
  66   position: relative;
  67   display: block;
  68   margin: $-xl auto;
  69   > div {
  70     width: $loadingSize;
  71     height: $loadingSize;
  72     border-radius: $loadingSize;
  73     display: inline-block;
  74     vertical-align: top;
  75     transform: translate3d(-10px, 0, 0);
  76     margin-top: $-xs;
  77     animation-name: loadingBob;
  78     animation-duration: 1.4s;
  79     animation-iteration-count: infinite;
  80     animation-timing-function: cubic-bezier(.62, .28, .23, .99);
  81     margin-inline-end: 4px;
  82     background-color: var(--color-page);
  83     animation-delay: -300ms;
  84   }
  85   > div:first-child {
  86       left: -($loadingSize+$-xs);
  87       background-color: var(--color-book);
  88       animation-delay: -600ms;
  89   }
  90   > div:last-of-type {
  91     left: $loadingSize+$-xs;
  92     background-color: var(--color-chapter);
  93     animation-delay: 0ms;
  94   }
  95   > span {
  96     margin-inline-start: $-s;
  97     font-style: italic;
  98     color: #888;
  99     vertical-align: top;
 100   }
 101 }
 102
 103 // Back to top link
 104 $btt-size: 40px;
 105 [back-to-top] {
 106   background-color: var(--color-primary);
 107   position: fixed;
 108   bottom: $-m;
 109   right: $-l;
 110   padding: 5px 7px;
 111   cursor: pointer;
 112   color: #FFF;
 113   fill: #FFF;
 114   svg {
 115     width: math.div($btt-size, 1.5);
 116     height: math.div($btt-size, 1.5);
 117     margin-inline-end: 4px;
 118   }
 119   width: $btt-size;
 120   height: $btt-size;
 121   border-radius: $btt-size;
 122   transition: all ease-in-out 180ms;
 123   opacity: 0;
 124   z-index: 999;
 125   overflow: hidden;
 126   &:hover {
 127     width: $btt-size*3.4;
 128     opacity: 1 !important;
 129   }
 130   .inner {
 131     width: $btt-size*3.4;
 132   }
 133   span {
 134     position: relative;
 135     vertical-align: top;
 136     line-height: 2;
 137   }
 138 }
 139
 140 .skip-to-content-link {
 141   position: fixed;
 142   top: -52px;
 143   left: 0;
 144   background-color: #FFF;
 145   z-index: 15;
 146   border-radius: 0 4px 4px 0;
 147   display: block;
 148   box-shadow: $bs-dark;
 149   font-weight: bold;
 150   &:focus {
 151     top: $-xl;
 152     outline-offset: -10px;
 153     outline: 2px dotted var(--color-primary);
 154   }
 155 }
 156
 157 .contained-search-box {
 158   display: flex;
 159   height: 38px;
 160   input, button {
 161     border-radius: 0;
 162     border: 1px solid #ddd;
 163     @include lightDark(border-color, #ddd, #000);
 164     margin-inline-start: -1px;
 165   }
 166   input {
 167     flex: 5;
 168     padding: $-xs $-s;
 169     &:focus, &:active {
 170       outline: 0;
 171     }
 172   }
 173   button {
 174     width: 60px;
 175   }
 176   button i {
 177     padding: 0;
 178   }
 179   button.cancel.active {
 180     background-color: $negative;
 181     color: #EEE;
 182   }
 183   svg {
 184     margin: 0;
 185   }
 186 }
 187
 188 .entity-selector {
 189   border: 1px solid #DDD;
 190   @include lightDark(border-color, #ddd, #111);
 191   border-radius: 3px;
 192   overflow: hidden;
 193   font-size: 0.8em;
 194   input[type="text"] {
 195     width: 100%;
 196     display: block;
 197     border-radius: 0;
 198     border: 0;
 199     border-bottom: 1px solid #DDD;
 200     font-size: 16px;
 201     padding: $-s $-m;
 202   }
 203   .entity-list {
 204     overflow-y: scroll;
 205     height: 400px;
 206     @include lightDark(background-color, #eee, #222);
 207     margin-inline-end: 0;
 208     margin-inline-start: 0;
 209   }
 210   .entity-list-item {
 211     @include lightDark(background-color, #fff, #222);
 212   }
 213   .entity-list-item p {
 214     margin-bottom: 0;
 215   }
 216   .entity-list-item:focus {
 217     outline: 2px dotted var(--color-primary);
 218     outline-offset: -4px;
 219   }
 220   .entity-list-item.selected {
 221     @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
 222   }
 223   .loading {
 224     height: 400px;
 225     padding-top: $-l;
 226   }
 227   .entity-selector-add button {
 228     margin: 0;
 229     display: block;
 230     width: 100%;
 231     border: 0;
 232     border-top: 1px solid #DDD;
 233   }
 234   &.compact {
 235     font-size: 10px;
 236     .entity-item-snippet {
 237       display: none;
 238     }
 239   }
 240 }
 241
 242 .scroll-box {
 243   max-height: 250px;
 244   overflow-y: scroll;
 245   border: 1px solid;
 246   @include lightDark(border-color, #DDD, #000);
 247   border-radius: 3px;
 248   min-height: 20px;
 249   @include lightDark(background-color, #EEE, #000);
 250 }
 251 .scroll-box-item {
 252   border-bottom: 1px solid;
 253   border-top: 1px solid;
 254   @include lightDark(border-color, #DDD, #000);
 255   margin-top: -1px;
 256   @include lightDark(background-color, #FFF, #222);
 257   display: flex;
 258   padding: 1px;
 259   &:last-child {
 260     border-bottom: 0;
 261   }
 262   &:hover {
 263     cursor: pointer;
 264     @include lightDark(background-color, #f8f8f8, #333);
 265   }
 266   .handle {
 267     color: #AAA;
 268     cursor: grab;
 269   }
 270   .handle svg {
 271     margin: 0;
 272   }
 273   > * {
 274     padding: $-xs $-m;
 275   }
 276   .handle + * {
 277     padding-left: 0;
 278   }
 279   &:hover .handle {
 280     @include lightDark(color, #444, #FFF);
 281   }
 282   a:hover {
 283     text-decoration: none;
 284   }
 285 }
 286
 287 input.scroll-box-search, .scroll-box-header-item {
 288   font-size: 0.8rem;
 289   padding: $-xs $-m;
 290   border: 1px solid;
 291   @include lightDark(border-color, #DDD, #000);
 292   @include lightDark(background-color, #FFF, #222);
 293   margin-bottom: -1px;
 294   border-radius: 3px 3px 0 0;
 295   width: 100%;
 296   max-width: 100%;
 297   height: auto;
 298   line-height: 1.4;
 299   color: #666;
 300 }
 301
 302 .scroll-box-search + .scroll-box,
 303 .scroll-box-header-item + .scroll-box {
 304   border-radius: 0 0 3px 3px;
 305 }
 306
 307 .fullscreen {
 308   border:0;
 309   position:fixed;
 310   top:0;
 311   left:0;
 312   right:0;
 313   bottom:0;
 314   width:100%;
 315   height:100%;
 316   z-index: 150;
 317 }
 318
 319 .list-sort-container {
 320   display: inline-block;
 321   form {
 322     display: inline-block;
 323   }
 324   .list-sort {
 325     display: inline-grid;
 326     margin-inline-start: $-s;
 327     grid-template-columns: minmax(120px, max-content) 40px;
 328     font-size: 0.9rem;
 329     border: 2px solid #DDD;
 330     @include lightDark(border-color, #ddd, #444);
 331     border-radius: 4px;
 332   }
 333   .list-sort-label {
 334     font-weight: bold;
 335     display: inline-block;
 336     @include lightDark(color, #555, #888);
 337   }
 338   .list-sort-type {
 339     text-align: start;
 340   }
 341   .list-sort-type, .list-sort-dir {
 342     padding: $-xs $-s;
 343     cursor: pointer;
 344   }
 345   .list-sort-dir {
 346     border-inline-start: 2px solid #DDD;
 347     color: #888;
 348     @include lightDark(border-color, #ddd, #444);
 349     .svg-icon {
 350       transition: transform ease-in-out 120ms;
 351     }
 352     &:hover .svg-icon {
 353       transform: rotate(180deg);
 354     }
 355   }
 356 }