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