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