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

   1 .page-editor {
   2   display: flex;
   3   flex-direction: column;
   4   align-items: stretch;
   5   overflow: hidden;
   6   .faded-small {
   7     height: auto;
   8   }
   9   .edit-area {
  10     flex: 1;
  11     flex-direction: column;
  12   }
  13
  14   .mce-tinymce {
  15         box-shadow: none;
  16   }
  17
  18   .mce-top-part::before {
  19     box-shadow: none;
  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   width: 100%;
  39   max-width: 840px;
  40   margin: 0 auto;
  41   margin-top: $-xxl;
  42   overflow-wrap: break-word;
  43   &.flex {
  44     margin-top: $-m;
  45   }
  46   .align-left {
  47     text-align: left;
  48   }
  49   img.align-left, table.align-left {
  50     float: left !important;
  51     margin: $-xs $-s $-xs 0;
  52   }
  53   .align-right {
  54     text-align: right !important;
  55   }
  56   img.align-right, table.align-right {
  57     float: right !important;
  58     margin: $-xs 0 $-xs $-s;
  59   }
  60   .align-center {
  61     text-align: center;
  62   }
  63   img.align-center {
  64     display: block;
  65   }
  66   img.align-center, table.align-center {
  67     margin-left: auto;
  68     margin-right: auto;
  69   }
  70   img {
  71     max-width: 100%;
  72     height:auto;
  73   }
  74   h1, h2, h3, h4, h5, h6, pre {
  75     clear: left;
  76   }
  77   hr {
  78     clear: both;
  79     margin: $-m 0;
  80   }
  81   table {
  82     hyphens: auto;
  83     table-layout: fixed;
  84     max-width: 100%;
  85     height: auto !important;
  86   }
  87
  88   // diffs
  89   ins,
  90   del {
  91     text-decoration: none;
  92   }
  93   ins {
  94     background: #dbffdb;
  95   }
  96   del {
  97     background: #FFECEC;
  98   }
  99
 100   &.page-revision {
 101     pre code {
 102       white-space: pre-wrap;
 103     }
 104   }
 105 }
 106
 107 // Page content pointers
 108 .pointer-container {
 109   position: relative;
 110   display: none;
 111   left: 0;
 112   z-index: 10;
 113 }
 114 .pointer {
 115   border: 1px solid #CCC;
 116   display: inline-block;
 117   padding: $-s $-s;
 118   border-radius: 4px;
 119   box-shadow: 0 0 8px 1px rgba(212, 209, 209, 0.35);
 120   position: absolute;
 121   top: -60px;
 122   background-color:#FFF;
 123   width: 275px;
 124   z-index: 55;
 125
 126   &.is-page-editable {
 127     width: 328px;
 128   }
 129
 130   &:before {
 131     position: absolute;
 132     left: 50%;
 133     bottom: -9px;
 134     width: 16px;
 135     height: 16px;
 136     margin-left: -8px;
 137     content: '';
 138     display: block;
 139     background-color:#FFF;
 140     transform: rotate(45deg);
 141     transform-origin: 50% 50%;
 142     border-bottom: 1px solid #CCC;
 143     border-right: 1px solid #CCC;
 144     z-index: 56;
 145   }
 146   input {
 147     background-color: #FFF;
 148     border: 1px solid #DDD;
 149     color: #666;
 150     width: 172px;
 151     z-index: 40;
 152   }
 153   input, button, a {
 154     position: relative;
 155     border-radius: 0;
 156     height: 28px;
 157     font-size: 12px;
 158     vertical-align: top;
 159     padding: 5px 16px;
 160   }
 161   > i {
 162     color: #888;
 163     font-size: 18px;
 164     padding-top: 4px;
 165   }
 166   span.icon {
 167     cursor: pointer;
 168     user-select: none;
 169   }
 170   .input-group .button {
 171     line-height: 1;
 172     margin: 0 0 0 -4px;
 173     box-shadow: none;
 174   }
 175   a.button {
 176     margin: 0 0 0 0;
 177
 178     &:hover {
 179       fill: #fff;
 180     }
 181   }
 182   .svg-icon {
 183     width: 1.2em;
 184     height: 1.2em;
 185   }
 186 }
 187
 188 // Attribute form
 189 .floating-toolbox {
 190   background-color: #FFF;
 191   border: 1px solid #DDD;
 192   right: $-xl*2;
 193   width: 48px;
 194   overflow: hidden;
 195   align-items: stretch;
 196   flex-direction: row;
 197   display: flex;
 198   transition: width ease-in-out 180ms;
 199   margin-top: -1px;
 200   min-height: 0;
 201   &.open {
 202     width: 480px;
 203   }
 204   [toolbox-toggle] svg {
 205     transition: transform ease-in-out 180ms;
 206   }
 207   [toolbox-toggle] {
 208     transition: background-color ease-in-out 180ms;
 209   }
 210   &.open [toolbox-toggle] {
 211     background-color: rgba(255, 0, 0, 0.29);
 212   }
 213   &.open [toolbox-toggle] svg {
 214     transform: rotate(180deg);
 215   }
 216   > div {
 217     flex: 1;
 218     position: relative;
 219   }
 220   .tabs {
 221     display: block;
 222     border-right: 1px solid #DDD;
 223     width: 48px;
 224     flex: 0 1 auto;
 225   }
 226   .tabs svg {
 227     fill: rgba(0, 0, 0, 0.5);
 228     padding: 0;
 229     margin: 0;
 230   }
 231   .tabs > span {
 232     display: block;
 233     cursor: pointer;
 234     padding: $-s $-m;
 235     font-size: 13.5px;
 236     line-height: 1.6;
 237     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 238   }
 239   &.open .tabs > span.active {
 240     fill: #444;
 241     background-color: rgba(0, 0, 0, 0.1);
 242   }
 243   div[toolbox-tab-content] {
 244     padding-bottom: 45px;
 245     display: flex;
 246     flex: 1;
 247     flex-direction: column;
 248     min-height: 0px;
 249     overflow-y: scroll;
 250   }
 251   div[toolbox-tab-content] .padded {
 252     flex: 1;
 253     padding-top: 0;
 254   }
 255   div[toolbox-tab-content] .padded.files {
 256         overflow-x: hidden;
 257   }
 258   h4 {
 259     font-size: 24px;
 260     margin: $-m 0 0 0;
 261     padding: 0 $-l $-s $-l;
 262   }
 263   .tags input {
 264     max-width: 100%;
 265     width: 100%;
 266     min-width: 50px;
 267   }
 268   .tags td, .tag-table > div > div > div {
 269     padding-right: $-s;
 270     padding-top: $-s;
 271     position: relative;
 272   }
 273   .handle {
 274     user-select: none;
 275     cursor: move;
 276     fill: #999;
 277   }
 278   form {
 279     display: flex;
 280     flex: 1;
 281     flex-direction: column;
 282     overflow-y: scroll;
 283   }
 284   table td, table th {
 285     overflow: visible;
 286   }
 287 }
 288
 289 [toolbox-tab-content] {
 290   display: none;
 291 }
 292
 293 .tag-display {
 294   position: relative;
 295   table {
 296     width: 100%;
 297     margin: 0;
 298     padding: 0;
 299   }
 300   tr:first-child td {
 301     padding-top: 0;
 302   }
 303   .heading th {
 304     padding: $-xs $-s;
 305     color: rgba(100, 100, 100, 0.7);
 306     border: 0;
 307     font-weight: 400;
 308   }
 309   td {
 310     border: 0;
 311     border-bottom: 1px solid #EEE;
 312     padding: $-xs $-s;
 313     color: #444;
 314   }
 315   tr td:first-child {
 316     padding-left:0;
 317   }
 318   .tag-value {
 319     color: #888;
 320   }
 321   tr:last-child td {
 322     border-bottom: none;
 323   }
 324   .tag {
 325     padding: $-s;
 326   }
 327 }
 328
 329 .suggestion-box {
 330   position: absolute;
 331   background-color: #FFF;
 332   border: 1px solid #BBB;
 333   box-shadow: $bs-light;
 334   list-style: none;
 335   z-index: 100;
 336   padding: 0;
 337   margin: 0;
 338   border-radius: 3px;
 339   li {
 340     display: block;
 341     padding: $-xs $-s;
 342     border-bottom: 1px solid #DDD;
 343     &:last-child {
 344       border-bottom: 0;
 345     }
 346     &.active {
 347       background-color: #EEE;
 348     }
 349   }
 350 }
 351
 352 .comments-container {
 353   width: 100%;
 354   border-top: 1px solid #DDD;
 355   margin-top: $-xl;
 356   margin-bottom: $-m;
 357   h5 {
 358     color: #888;
 359     font-weight: normal;
 360     margin-top: 0.5em;
 361   }
 362 }
 363
 364 .comment-editor .CodeMirror, .comment-editor .CodeMirror-scroll {
 365   min-height: 175px;
 366 }
 367
 368 /* FIXME - Ugly hack to modify the media plugin for TinyMCE */
 369 .mce-floatpanel[aria-label="Insert/edit media"] {
 370   .mce-open {
 371     display: none;
 372   }
 373 }