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

   1 @import "reset";
   2 @import "variables";
   3 @import "fonts";
   4 @import "mixins";
   5 @import "html";
   6 @import "text";
   7 @import "grid";
   8 @import "blocks";
   9 @import "buttons";
  10 @import "forms";
  11 @import "tables";
  12 @import "animations";
  13 @import "tinymce";
  14 @import "highlightjs";
  15 @import "image-manager";
  16 @import "header";
  17 @import "lists";
  18 @import "pages";
  19
  20 [v-cloak], [v-show] {display: none;}
  21
  22 [ng\:cloak], [ng-cloak], .ng-cloak {
  23   display: none !important;
  24 }
  25
  26 // Jquery Sortable Styles
  27 .dragged {
  28   position: absolute;
  29   opacity: 0.5;
  30   z-index: 2000;
  31 }
  32 body.dragging, body.dragging * {
  33   cursor: move !important;
  34 }
  35
  36 // User Avatar Images
  37 .avatar {
  38   border-radius: 100%;
  39   background-color: #EEE;
  40   width: 30px;
  41   height: 30px;
  42   &.med {
  43     width: 40px;
  44     height: 40px;
  45   }
  46   &.large {
  47     width: 80px;
  48     height: 80px;
  49   }
  50   &.huge {
  51     width: 120px;
  52     height: 120px;
  53   }
  54   &.square {
  55     border-radius: 3px;
  56   }
  57 }
  58
  59 // System wide notifications
  60 .notification {
  61   position: fixed;
  62   top: 0;
  63   right: 0;
  64   margin: $-xl*2 $-xl;
  65   padding: $-l $-xl;
  66   background-color: #EEE;
  67   border-radius: 3px;
  68   box-shadow: $bs-med;
  69   z-index: 999999;
  70   display: table;
  71   cursor: pointer;
  72   max-width: 480px;
  73   i, span {
  74     display: table-cell;
  75   }
  76   i {
  77     font-size: 2em;
  78     padding-right: $-l;
  79   }
  80   span {
  81     vertical-align: middle;
  82   }
  83   &.pos {
  84     background-color: $positive;
  85     color: #EEE;
  86   }
  87   &.neg {
  88     background-color: $negative;
  89     color: #EEE;
  90   }
  91   &.warning {
  92     background-color: $secondary;
  93     color: #EEE;
  94   }
  95 }
  96
  97 // Loading icon
  98 $loadingSize: 10px;
  99 .loading-container {
 100   position: relative;
 101   display: block;
 102   height: $loadingSize;
 103   margin: $-xl auto;
 104   > div {
 105     width: $loadingSize;
 106     height: $loadingSize;
 107     border-radius: $loadingSize;
 108     display: inline-block;
 109     vertical-align: top;
 110     transform: translate3d(0, 0, 0);
 111     animation-name: loadingBob;
 112     animation-duration: 1.4s;
 113     animation-iteration-count: infinite;
 114     animation-timing-function: cubic-bezier(.62, .28, .23, .99);
 115     margin-right: 4px;
 116     background-color: $color-page;
 117     animation-delay: 0.3s;
 118   }
 119   > div:first-child {
 120       left: -($loadingSize+$-xs);
 121       background-color: $color-book;
 122       animation-delay: 0s;
 123   }
 124   > div:last-child {
 125     left: $loadingSize+$-xs;
 126     background-color: $color-chapter;
 127     animation-delay: 0.6s;
 128   }
 129 }
 130
 131
 132 // Search results
 133 .search-results > h3 a {
 134   font-size: 0.66em;
 135   color: $primary;
 136   padding-left: $-m;
 137   i {
 138     padding-right: $-s;
 139   }
 140 }
 141
 142 // Back to top link
 143 $btt-size: 40px;
 144 #back-to-top {
 145   background-color: $primary;
 146   position: fixed;
 147   bottom: $-m;
 148   right: $-l;
 149   padding: $-xs $-s;
 150   cursor: pointer;
 151   color: #FFF;
 152   width: $btt-size;
 153   height: $btt-size;
 154   border-radius: $btt-size;
 155   transition: all ease-in-out 180ms;
 156   opacity: 0;
 157   z-index: 999;
 158   overflow: hidden;
 159   &:hover {
 160     width: $btt-size*3.4;
 161     opacity: 1 !important;
 162     span {
 163       display: inline-block;
 164     }
 165   }
 166   .inner {
 167     width: $btt-size*3.4;
 168   }
 169   i {
 170     margin: 0;
 171     font-size: 28px;
 172     padding: 0 $-s 0 0;
 173   }
 174   span {
 175     line-height: 12px;
 176     position: relative;
 177     top: -5px;
 178   }
 179 }
 180
 181 .contained-search-box {
 182   display: flex;
 183   input, button {
 184     border-radius: 0;
 185     border: 1px solid #DDD;
 186     margin-left: -1px;
 187   }
 188   input {
 189     flex: 5;
 190     &:focus, &:active {
 191       outline: 0;
 192     }
 193   }
 194   button {
 195     width: 60px;
 196   }
 197   button i {
 198     padding: 0;
 199   }
 200   button.cancel.active {
 201     background-color: $negative;
 202     color: #EEE;
 203   }
 204 }
 205
 206 // Attribute form
 207 .floating-toolbox {
 208   background-color: #FFF;
 209   border: 1px solid #BBB;
 210   border-radius: 3px;
 211   position: fixed;
 212   right: $-xl*2;
 213   top: 100px;
 214   z-index: 99;
 215   height: 800px;
 216   width: 480px;
 217   overflow-y: scroll;
 218   display: flex;
 219   align-items: stretch;
 220   flex-direction: row;
 221   > div {
 222     flex: 1;
 223     position: relative;
 224   }
 225   .tabs {
 226     display: block;
 227     border-right: 1px solid #DDD;
 228     width: 54px;
 229     flex: 0;
 230   }
 231   .tabs i {
 232     padding: 0;
 233     margin: 0;
 234   }
 235   .tabs [tab-button] {
 236     display: block;
 237     cursor: pointer;
 238     color: #666;
 239     padding: $-m;
 240     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 241     &.active {
 242       color: #444;
 243       background-color: rgba(0, 0, 0, 0.1);
 244     }
 245   }
 246   div[tab-content] .padded {
 247     padding: 0 $-m;
 248   }
 249   h4 {
 250     font-size: 24px;
 251     margin: $-m 0 0 0;
 252     padding: 0 $-m;
 253   }
 254   .tags input {
 255     max-width: 100%;
 256     width: 100%;
 257     min-width: 50px;
 258   }
 259   .tags td {
 260     padding-right: $-s;
 261     padding-top: $-s;
 262   }
 263   button.pos {
 264     position: absolute;
 265     bottom: 0;
 266     display: block;
 267     width: 100%;
 268     padding: $-s;
 269     border: 0;
 270     margin: 0;
 271     box-shadow: none;
 272     border-radius: 0;
 273     &:hover{
 274       box-shadow: none;
 275     }
 276   }
 277 }