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

   1 #page-show {
   2   >.row .col-md-9 {
   3     z-index: 2;
   4   }
   5   >.row .col-md-3 {
   6     z-index: 1;
   7   }
   8 }
   9
  10 .page-editor {
  11   display: flex;
  12   flex-direction: column;
  13   align-items: stretch;
  14   .faded-small {
  15     height: auto;
  16   }
  17   .edit-area {
  18     flex: 1;
  19     flex-direction: column;
  20   }
  21   #summary-input {
  22     width: 140px;
  23   }
  24 }
  25
  26 .page-style.editor {
  27   padding: 0 !important;
  28 }
  29
  30 .page-content {
  31   max-width: 840px;
  32   overflow-wrap: break-word;
  33   .align-left {
  34     text-align: left;
  35   }
  36   img.align-left, table.align-left {
  37     float: left !important;
  38     margin: $-xs $-s $-xs 0;
  39   }
  40   .align-right {
  41     float: right !important;
  42   }
  43   img.align-right, table.align-right {
  44     text-align: right;
  45     margin: $-xs 0 $-xs $-s;
  46   }
  47   .align-center {
  48     text-align: center;
  49   }
  50   img {
  51     max-width: 100%;
  52     height:auto;
  53   }
  54   h1, h2, h3, h4, h5, h6, pre {
  55     clear: left;
  56   }
  57   hr {
  58     clear: both;
  59     margin: $-m 0;
  60   }
  61   table {
  62     word-break: break-all;
  63     word-break: break-word;
  64     hyphens: auto;
  65   }
  66 }
  67
  68 // Page content pointers
  69 .pointer-container {
  70   position: relative;
  71   display: none;
  72   left: 0;
  73   z-index: 10;
  74 }
  75 .pointer {
  76   border: 1px solid #CCC;
  77   display: inline-block;
  78   padding: $-s $-s;
  79   border-radius: 4px;
  80   box-shadow: 0 0 8px 1px rgba(212, 209, 209, 0.35);
  81   position: absolute;
  82   top: -60px;
  83   background-color:#FFF;
  84   width: 272px;
  85   z-index: 55;
  86   &:before {
  87     position: absolute;
  88     left: 50%;
  89     bottom: -9px;
  90     width: 16px;
  91     height: 16px;
  92     margin-left: -8px;
  93     content: '';
  94     display: block;
  95     background-color:#FFF;
  96     transform: rotate(45deg);
  97     transform-origin: 50% 50%;
  98     border-bottom: 1px solid #CCC;
  99     border-right: 1px solid #CCC;
 100     z-index: 56;
 101   }
 102   input {
 103     background-color: #FFF;
 104     border: 1px solid #DDD;
 105     color: #666;
 106     width: 172px;
 107     z-index: 40;
 108   }
 109   input, button {
 110     position: relative;
 111     border-radius: 0;
 112     height: 28px;
 113     font-size: 12px;
 114     vertical-align: top;
 115   }
 116   > i {
 117     color: #888;
 118     font-size: 18px;
 119     padding-top: 4px;
 120   }
 121   .button {
 122     line-height: 1;
 123     margin: 0 0 0 -4px;
 124     box-shadow: none;
 125   }
 126 }
 127
 128 // Attribute form
 129 .floating-toolbox {
 130   background-color: #FFF;
 131   border: 1px solid #DDD;
 132   right: $-xl*2;
 133   z-index: 99;
 134   width: 48px;
 135   overflow: hidden;
 136   align-items: stretch;
 137   flex-direction: row;
 138   display: flex;
 139   transition: width ease-in-out 180ms;
 140   margin-top: -1px;
 141   min-height: 0px;
 142   &.open {
 143     width: 480px;
 144   }
 145   [toolbox-toggle] i {
 146     transition: transform ease-in-out 180ms;
 147   }
 148   [toolbox-toggle] {
 149     transition: background-color ease-in-out 180ms;
 150   }
 151   &.open [toolbox-toggle] {
 152     background-color: rgba(255, 0, 0, 0.29);
 153   }
 154   &.open [toolbox-toggle] i {
 155     transform: rotate(180deg);
 156   }
 157   > div {
 158     flex: 1;
 159     position: relative;
 160   }
 161   .tabs {
 162     display: block;
 163     border-right: 1px solid #DDD;
 164     width: 54px;
 165     flex: 0;
 166   }
 167   .tabs i {
 168     color: rgba(0, 0, 0, 0.5);
 169     padding: 0;
 170     margin: 0;
 171   }
 172   .tabs > span {
 173     display: block;
 174     cursor: pointer;
 175     padding: $-s $-m;
 176     font-size: 13.5px;
 177     line-height: 1.6;
 178     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 179   }
 180   &.open .tabs > span.active {
 181     color: #444;
 182     background-color: rgba(0, 0, 0, 0.1);
 183   }
 184   div[tab-content] {
 185     padding-bottom: 45px;
 186     display: flex;
 187     flex: 1;
 188     flex-direction: column;
 189     min-height: 0px;
 190     overflow-y: scroll;
 191   }
 192   div[tab-content] .padded {
 193     flex: 1;
 194     padding-top: 0;
 195   }
 196   h4 {
 197     font-size: 24px;
 198     margin: $-m 0 0 0;
 199     padding: 0 $-l $-s $-l;
 200   }
 201   .tags input {
 202     max-width: 100%;
 203     width: 100%;
 204     min-width: 50px;
 205   }
 206   .tags td {
 207     padding-right: $-s;
 208     padding-top: $-s;
 209     position: relative;
 210   }
 211   button.pos {
 212     position: absolute;
 213     bottom: 0;
 214     display: block;
 215     width: 100%;
 216     padding: $-s;
 217     height: 45px;
 218     border: 0;
 219     margin: 0;
 220     box-shadow: none;
 221     border-radius: 0;
 222     &:hover{
 223       box-shadow: none;
 224     }
 225   }
 226   .handle {
 227     user-select: none;
 228     cursor: move;
 229     color: #999;
 230   }
 231   form {
 232     display: flex;
 233     flex: 1;
 234     flex-direction: column;
 235     overflow-y: scroll;
 236   }
 237 }
 238
 239 [tab-content] {
 240   display: none;
 241 }
 242
 243 .tag-display {
 244   margin: $-xl $-xs;
 245   border: 1px solid #DDD;
 246   min-width: 180px;
 247   max-width: 320px;
 248   opacity: 0.7;
 249   z-index: 5;
 250   position: relative;
 251   table {
 252     width: 100%;
 253     margin: 0;
 254     padding: 0;
 255   }
 256   span {
 257     color: #666;
 258     margin-left: $-s;
 259   }
 260   .heading {
 261     padding: $-xs $-s;
 262     color: #444;
 263   }
 264   td {
 265     border: 0;
 266     border-bottom: 1px solid #DDD;
 267     padding: $-xs $-s;
 268     color: #444;
 269   }
 270   .tag-value {
 271     color: #888;
 272   }
 273   td i {
 274     color: #888;
 275   }
 276   tr:last-child td {
 277     border-bottom: none;
 278   }
 279   .tag {
 280     padding: $-s;
 281   }
 282 }
 283
 284 .suggestion-box {
 285   position: absolute;
 286   background-color: #FFF;
 287   border: 1px solid #BBB;
 288   box-shadow: $bs-light;
 289   list-style: none;
 290   z-index: 100;
 291   padding: 0;
 292   margin: 0;
 293   border-radius: 3px;
 294   li {
 295     display: block;
 296     padding: $-xs $-s;
 297     border-bottom: 1px solid #DDD;
 298     &:last-child {
 299       border-bottom: 0;
 300     }
 301     &.active {
 302       background-color: #EEE;
 303     }
 304   }
 305 }