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 "editor";
  19 @import "codemirror";
  20 @import "components";
  21 @import "header";
  22 @import "footer";
  23 @import "lists";
  24 @import "pages";
  25 @import "content";
  26
  27 @media print {
  28   @import "print";
  29 }
  30
  31 // Jquery Sortable Styles
  32 .dragged {
  33   position: absolute;
  34   opacity: 0.5;
  35   z-index: 2000;
  36 }
  37 body.dragging, body.dragging * {
  38   cursor: move !important;
  39 }
  40
  41 // User Avatar Images
  42 .avatar {
  43   border-radius: 100%;
  44   @include lightDark(background-color, #eee, #000);
  45   width: 30px;
  46   height: 30px;
  47   &.med {
  48     width: 40px;
  49     height: 40px;
  50   }
  51   &.large {
  52     width: 80px;
  53     height: 80px;
  54   }
  55   &.huge {
  56     width: 120px;
  57     height: 120px;
  58   }
  59   &.square {
  60     border-radius: 3px;
  61   }
  62   &[src$="user_avatar.png"] {
  63     @include whenDark {
  64       filter: invert(1);
  65     }
  66   }
  67 }
  68
  69 // Loading icon
  70 $loadingSize: 10px;
  71 .loading-container {
  72   position: relative;
  73   display: block;
  74   margin: $-xl auto;
  75   > div {
  76     width: $loadingSize;
  77     height: $loadingSize;
  78     border-radius: $loadingSize;
  79     display: inline-block;
  80     vertical-align: top;
  81     transform: translate3d(-10px, 0, 0);
  82     margin-top: $-xs;
  83     animation-name: loadingBob;
  84     animation-duration: 1.4s;
  85     animation-iteration-count: infinite;
  86     animation-timing-function: cubic-bezier(.62, .28, .23, .99);
  87     margin-inline-end: 4px;
  88     background-color: var(--color-page);
  89     animation-delay: -300ms;
  90   }
  91   > div:first-child {
  92       left: -($loadingSize+$-xs);
  93       background-color: var(--color-book);
  94       animation-delay: -600ms;
  95   }
  96   > div:last-of-type {
  97     left: $loadingSize+$-xs;
  98     background-color: var(--color-chapter);
  99     animation-delay: 0ms;
 100   }
 101   > span {
 102     margin-inline-start: $-s;
 103     font-style: italic;
 104     color: #888;
 105     vertical-align: top;
 106   }
 107 }
 108
 109 .skip-to-content-link {
 110   position: fixed;
 111   top: -52px;
 112   left: 0;
 113   background-color: #FFF;
 114   z-index: 15;
 115   border-radius: 0 4px 4px 0;
 116   display: block;
 117   box-shadow: $bs-dark;
 118   font-weight: bold;
 119   &:focus {
 120     top: $-xl;
 121     outline-offset: -10px;
 122     outline: 2px dotted var(--color-link);
 123   }
 124 }
 125
 126 .entity-selector {
 127   border: 1px solid #DDD;
 128   @include lightDark(border-color, #ddd, #111);
 129   border-radius: 3px;
 130   overflow: hidden;
 131   font-size: 0.8em;
 132   input[type="text"] {
 133     width: 100%;
 134     display: block;
 135     border-radius: 0;
 136     border: 0;
 137     border-bottom: 1px solid #DDD;
 138     font-size: 16px;
 139     padding: $-s $-m;
 140   }
 141   input[type="text"]:focus {
 142     outline: 1px solid var(--color-primary);
 143     border-radius: 3px 3px 0 0;
 144     outline-offset: -1px;
 145   }
 146   .entity-list {
 147     overflow-y: scroll;
 148     height: 400px;
 149     @include lightDark(background-color, #eee, #222);
 150     margin-inline-end: 0;
 151     margin-inline-start: 0;
 152   }
 153   .entity-list-item {
 154     @include lightDark(background-color, #fff, #222);
 155   }
 156   .entity-list-item p {
 157     margin-bottom: 0;
 158   }
 159   .entity-list-item:focus {
 160     outline: 2px dotted var(--color-primary);
 161     outline-offset: -4px;
 162   }
 163   .entity-list-item.selected {
 164     @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
 165   }
 166   .loading {
 167     height: 400px;
 168     padding-top: $-l;
 169   }
 170   &.compact {
 171     font-size: 10px;
 172     .entity-item-snippet {
 173       display: none;
 174     }
 175     h4 {
 176       font-size: 14px;
 177     }
 178   }
 179   &.small {
 180     .entity-list-item {
 181       padding: $-xs $-m;
 182     }
 183     .entity-list, .loading {
 184       height: 300px;
 185     }
 186     input[type="text"] {
 187       font-size: 13px;
 188       padding: $-xs $-m;
 189       height: auto;
 190     }
 191   }
 192 }
 193
 194 .fullscreen {
 195   border:0;
 196   position:fixed;
 197   top:0;
 198   left:0;
 199   right:0;
 200   bottom:0;
 201   width:100%;
 202   height:100%;
 203   z-index: 150;
 204 }
 205
 206 @include between($s, $m) {
 207   #home-default > .grid.third {
 208     display: block;
 209     columns: 2;
 210     column-gap: $-l !important;
 211   }
 212 }
 213
 214 .list-sort-container {
 215   display: inline-block;
 216   form {
 217     display: inline-block;
 218   }
 219   .list-sort {
 220     display: inline-grid;
 221     margin-inline-start: $-s;
 222     grid-template-columns: minmax(120px, max-content) 40px;
 223     font-size: 0.9rem;
 224     border: 2px solid #DDD;
 225     @include lightDark(border-color, #ddd, #444);
 226     border-radius: 4px;
 227   }
 228   .list-sort-label {
 229     font-weight: bold;
 230     display: inline-block;
 231     @include lightDark(color, #555, #888);
 232   }
 233   .list-sort-type {
 234     text-align: start;
 235   }
 236   .list-sort-type, .list-sort-dir {
 237     padding: $-xs $-s;
 238     cursor: pointer;
 239   }
 240   .list-sort-dir {
 241     border-inline-start: 2px solid #DDD;
 242     color: #888;
 243     @include lightDark(border-color, #ddd, #444);
 244     .svg-icon {
 245       transition: transform ease-in-out 120ms;
 246     }
 247     &:hover .svg-icon {
 248       transform: rotate(180deg);
 249     }
 250   }
 251 }
 252
 253 .import-item {
 254   border-inline-start: 2px solid currentColor;
 255   padding-inline-start: $-xs;
 256 }