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

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