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
 120
 121 .overlay {
 122   background-color: rgba(0, 0, 0, 0.2);
 123   position: fixed;
 124   display: block;
 125   z-index: 95536;
 126   width: 100%;
 127   height: 100%;
 128   min-width: 100%;
 129   min-height: 100%;
 130   top: 0;
 131   left: 0;
 132   right: 0;
 133   bottom: 0;
 134 }
 135 #image-manager {
 136   background-color: #EEE;
 137   max-width: 90%;
 138   max-height: 90%;
 139   width: 90%;
 140   height: 90%;
 141   margin: 2% 5%;
 142   //border: 2px solid $primary;
 143   border-radius: 4px;
 144   box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
 145   overflow: hidden;
 146   .image-manager-display img {
 147     width: 150px;
 148     height: 150px;
 149     display: inline-block;
 150     margin: $-s 0 0 $-s;
 151     cursor: pointer;
 152   }
 153 }
 154 .image-manager-left {
 155   background-color: #FFF;
 156   height: 100%;
 157   width: 100%;
 158   text-align: left;
 159   .image-manager-display {
 160     height: 75%;
 161     width: 100%;
 162     text-align: left;
 163     overflow-y: scroll;
 164   }
 165 }
 166
 167 .image-manager-title {
 168   font-size: 2em;
 169   text-align: left;
 170   margin: 0 $-m;
 171   padding: $-xl $-m;
 172   color: #666;
 173   border-bottom: 1px solid #DDD;
 174 }
 175
 176 .image-manager-dropzone {
 177   background-color: lighten($primary, 40%);
 178   height: 25%;
 179   text-align: center;
 180   font-size: 2em;
 181   line-height: 2em;
 182   padding-top: $-xl*1.2;
 183   color: #666;
 184   border-top: 2px solid $primary;
 185 }
 186
 187 // Link hooks & popovers
 188 a.link-hook {
 189   position: absolute;
 190   display: inline-block;
 191   top: $-xs;
 192   left: -$-xl+2px;
 193   font-size: 20px;
 194   line-height: 20px;
 195   color: #BBB;
 196   opacity: 0;
 197 }
 198 h1, h2, h3, h4, h5, h6 {
 199   &:hover a.link-hook {
 200     opacity: 1;
 201   }
 202 }