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