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