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