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 .skip-to-content-link {
 104   position: fixed;
 105   top: -52px;
 106   left: 0;
 107   background-color: #FFF;
 108   z-index: 15;
 109   border-radius: 0 4px 4px 0;
 110   display: block;
 111   box-shadow: $bs-dark;
 112   font-weight: bold;
 113   &:focus {
 114     top: $-xl;
 115     outline-offset: -10px;
 116     outline: 2px dotted var(--color-link);
 117   }
 118 }
 119
 120 .entity-selector {
 121   border: 1px solid #DDD;
 122   @include lightDark(border-color, #ddd, #111);
 123   border-radius: 3px;
 124   overflow: hidden;
 125   font-size: 0.8em;
 126   input[type="text"] {
 127     width: 100%;
 128     display: block;
 129     border-radius: 0;
 130     border: 0;
 131     border-bottom: 1px solid #DDD;
 132     font-size: 16px;
 133     padding: $-s $-m;
 134   }
 135   .entity-list {
 136     overflow-y: scroll;
 137     height: 400px;
 138     @include lightDark(background-color, #eee, #222);
 139     margin-inline-end: 0;
 140     margin-inline-start: 0;
 141   }
 142   .entity-list-item {
 143     @include lightDark(background-color, #fff, #222);
 144   }
 145   .entity-list-item p {
 146     margin-bottom: 0;
 147   }
 148   .entity-list-item:focus {
 149     outline: 2px dotted var(--color-primary);
 150     outline-offset: -4px;
 151   }
 152   .entity-list-item.selected {
 153     @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
 154   }
 155   .loading {
 156     height: 400px;
 157     padding-top: $-l;
 158   }
 159   &.compact {
 160     font-size: 10px;
 161     .entity-item-snippet {
 162       display: none;
 163     }
 164     h4 {
 165       font-size: 14px;
 166     }
 167   }
 168 }
 169
 170 .fullscreen {
 171   border:0;
 172   position:fixed;
 173   top:0;
 174   left:0;
 175   right:0;
 176   bottom:0;
 177   width:100%;
 178   height:100%;
 179   z-index: 150;
 180 }
 181
 182 .list-sort-container {
 183   display: inline-block;
 184   form {
 185     display: inline-block;
 186   }
 187   .list-sort {
 188     display: inline-grid;
 189     margin-inline-start: $-s;
 190     grid-template-columns: minmax(120px, max-content) 40px;
 191     font-size: 0.9rem;
 192     border: 2px solid #DDD;
 193     @include lightDark(border-color, #ddd, #444);
 194     border-radius: 4px;
 195   }
 196   .list-sort-label {
 197     font-weight: bold;
 198     display: inline-block;
 199     @include lightDark(color, #555, #888);
 200   }
 201   .list-sort-type {
 202     text-align: start;
 203   }
 204   .list-sort-type, .list-sort-dir {
 205     padding: $-xs $-s;
 206     cursor: pointer;
 207   }
 208   .list-sort-dir {
 209     border-inline-start: 2px solid #DDD;
 210     color: #888;
 211     @include lightDark(border-color, #ddd, #444);
 212     .svg-icon {
 213       transition: transform ease-in-out 120ms;
 214     }
 215     &:hover .svg-icon {
 216       transform: rotate(180deg);
 217     }
 218   }
 219 }