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 "forms";
  10 @import "tinymce";
  11
  12 header {
  13   background-color: #f8f8f8;
  14   position: fixed;
  15   display: block;
  16   width: 100%;
  17   z-index: -1;
  18   top: 0;
  19 }
  20
  21 body {
  22   margin-top: 64px;
  23 }
  24
  25 header hr {
  26   margin-top: 0;
  27 }
  28
  29 header .menu {
  30   margin-bottom: 0;
  31   list-style: none;
  32   li {
  33     display: inline-block;
  34     margin-left: $-m;
  35   }
  36 }
  37
  38 .page-title input {
  39   display: block;
  40   width: 100%;
  41   font-size: 1.4em;
  42 }
  43
  44 .affix {
  45   position: fixed;
  46 }
  47
  48 .page-style {
  49   background-color: #FFF;
  50   padding: $-s $-xxl $-xxl $-xxl;
  51   border-radius: 4px;
  52   box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.15);
  53   margin-bottom: $-xxl;
  54   max-width: 100%;
  55 }
  56
  57 .page-style.editor {
  58   padding: 0 !important;
  59 }
  60
  61 .page-content {
  62   @extend .page-style;
  63   min-height: 70vh;
  64   &.right {
  65     float: right;
  66   }
  67   &.left {
  68     float: left;
  69   }
  70 }
  71
  72 .page-list {
  73   a {
  74     display: block;
  75     padding: $-s 0;
  76     border-bottom: 2px dotted #CCC;
  77     &:first-child {
  78       border-top: 2px dotted #CCC;
  79     }
  80   }
  81 }
  82
  83 .page-menu  {
  84   opacity: 0.6;
  85   transition: opacity ease-in-out 120ms;
  86   &:hover {
  87     opacity: 1;
  88   }
  89 }
  90
  91 .page-nav-list {
  92   $nav-indent: $-s;
  93   li {
  94     //border-left: 1px solid rgba(0, 0, 0, 0.1);
  95     padding-left: $-xs;
  96   }
  97   .nav-H2 {
  98     margin-left: $nav-indent;
  99     font-size: 0.95em;
 100   }
 101   .nav-H3 {
 102     margin-left: $nav-indent*2;
 103     font-size: 0.90em
 104   }
 105   .nav-H4 {
 106     margin-left: $nav-indent*3;
 107     font-size: 0.85em
 108   }
 109   .nav-H5 {
 110     margin-left: $nav-indent*4;
 111     font-size: 0.80em
 112   }
 113   .nav-H6 {
 114     margin-left: $nav-indent*5;
 115     font-size: 0.75em
 116   }
 117 }
 118
 119 .overlay {
 120   background-color: rgba(0, 0, 0, 0.2);
 121   position: fixed;
 122   display: block;
 123   z-index: 95536;
 124   width: 100%;
 125   height: 100%;
 126   min-width: 100%;
 127   min-height: 100%;
 128   top: 0;
 129   left: 0;
 130   right: 0;
 131   bottom: 0;
 132 }
 133 #image-manager {
 134   background-color: #EEE;
 135   max-width: 90%;
 136   max-height: 90%;
 137   width: 90%;
 138   height: 90%;
 139   margin: 2% 5%;
 140   //border: 2px solid $primary;
 141   border-radius: 4px;
 142   box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
 143   overflow: hidden;
 144   .image-manager-display img {
 145     width: 150px;
 146     height: 150px;
 147     display: inline-block;
 148     margin: $-s 0 0 $-s;
 149     cursor: pointer;
 150   }
 151 }
 152 .image-manager-left {
 153   background-color: #FFF;
 154   height: 100%;
 155   width: 100%;
 156   text-align: left;
 157   .image-manager-display {
 158     height: 75%;
 159     width: 100%;
 160     text-align: left;
 161     overflow-y: scroll;
 162   }
 163 }
 164
 165 .image-manager-title {
 166   font-size: 2em;
 167   text-align: left;
 168   margin: 0 $-m;
 169   padding: $-xl $-m;
 170   color: #666;
 171   border-bottom: 1px solid #DDD;
 172 }
 173
 174 .image-manager-dropzone {
 175   background-color: lighten($primary, 40%);
 176   height: 25%;
 177   text-align: center;
 178   font-size: 2em;
 179   line-height: 2em;
 180   padding-top: $-xl*1.2;
 181   color: #666;
 182   border-top: 2px solid $primary;
 183 }