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