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