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

   1 @use "mixins";
   2 @use "vars";
   3
   4 .page-editor {
   5   display: flex;
   6   flex-direction: column;
   7   align-items: stretch;
   8
   9   .edit-area {
  10     flex: 1;
  11     flex-direction: column;
  12     z-index: 10;
  13     border-radius: 0 0 8px 8px;
  14   }
  15
  16   .mce-tinymce {
  17         box-shadow: none;
  18   }
  19
  20   .mce-top-part::before {
  21     box-shadow: none;
  22   }
  23 }
  24
  25 .page-editor-page-area {
  26   width: 100%;
  27   border-radius: 8px;
  28   box-shadow: vars.$bs-card;
  29   min-width: 300px;
  30   @include mixins.lightDark(background-color, #FFF, #333)
  31 }
  32
  33 .page-edit-toolbar {
  34   width: 100%;
  35   margin: 0 auto;
  36   display: grid;
  37   grid-template-columns: minmax(max-content, 2fr) 1.5fr minmax(max-content, 2fr);
  38   align-items: center;
  39 }
  40
  41 @include mixins.larger-than(vars.$bp-xxl) {
  42   .page-editor-wysiwyg2024 .page-edit-toolbar,
  43   .page-editor-wysiwyg2024 .page-editor-page-area,
  44   .page-editor-wysiwyg .page-edit-toolbar,
  45   .page-editor-wysiwyg .page-editor-page-area {
  46     max-width: 1140px;
  47   }
  48
  49   .page-editor-wysiwyg .floating-toolbox,
  50   .page-editor-wysiwyg2024 .floating-toolbox {
  51     position: absolute;
  52   }
  53 }
  54
  55 @include mixins.smaller-than(vars.$bp-m) {
  56   .page-edit-toolbar {
  57     display: flex;
  58     flex-direction: row;
  59     justify-content: space-between;
  60   }
  61 }
  62
  63 .title-input.page-title {
  64   font-size: 0.8em;
  65   .input {
  66     border: 0;
  67     margin-bottom: -1px;
  68   }
  69   input[type="text"] {
  70     max-width: 840px;
  71     margin: 0 auto;
  72     border: none;
  73     height: auto;
  74     display: block;
  75     width: 100%;
  76     font-size: 20px;
  77     border-radius: 8px;
  78   }
  79   input[type="text"]:focus {
  80     position: relative;
  81     outline-offset: -1px;
  82     outline: 1px dashed var(--color-primary);
  83     box-shadow: vars.$bs-card;
  84     z-index: 50;
  85   }
  86 }
  87
  88 .page-editor-markdown .title-input.page-title input[type="text"] {
  89   max-width: 100%;
  90 }
  91
  92 body.tox-fullscreen .page-editor .edit-area,
  93 body.markdown-fullscreen .page-editor .edit-area {
  94   z-index: 12;
  95 }
  96
  97 body.tox-fullscreen, body.markdown-fullscreen {
  98   .page-editor, .flex-fill {
  99     overflow: visible;
 100   }
 101 }
 102
 103 @include mixins.smaller-than(vars.$bp-s) {
 104   .page-edit-toolbar {
 105     overflow-x: scroll;
 106     overflow-y: visible;
 107   }
 108   .page-edit-toolbar {
 109     white-space: nowrap;
 110     > div {
 111       display: inline-block;
 112     }
 113   }
 114 }
 115
 116 .page-save-mobile-button {
 117   position: fixed;
 118   z-index: 30;
 119   border-radius: 50%;
 120   width: 52px;
 121   height: 52px;
 122   font-size: 26px;
 123   inset-inline-end: vars.$xs;
 124   bottom: vars.$s;
 125   box-shadow: vars.$bs-hover;
 126   background-color: currentColor;
 127   text-align: center;
 128   svg {
 129     fill: #FFF;
 130     margin-inline-end: 0;
 131   }
 132 }
 133
 134 .draft-notification {
 135   pointer-events: none;
 136   transform: scale(0);
 137   transition: transform ease-in-out 120ms;
 138   transform-origin: 50% 50%;
 139   &.visible {
 140     transform: scale(1);
 141   }
 142 }
 143
 144 .page-style.editor {
 145   padding: 0 !important;
 146 }
 147
 148 // Page content pointers
 149 .pointer-container {
 150   position: fixed;
 151   display: none;
 152   left: 0;
 153   z-index: 10;
 154 }
 155 .pointer {
 156   border: 1px solid #CCC;
 157   @include mixins.lightDark(border-color, #ccc, #000);
 158   border-radius: 4px;
 159   box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
 160   @include mixins.lightDark(background-color, #fff, #333);
 161   width: 275px;
 162
 163   &.is-page-editable {
 164     width: 328px;
 165   }
 166
 167   &:before {
 168     position: absolute;
 169     left: 50%;
 170     bottom: -9px;
 171     width: 16px;
 172     height: 16px;
 173     margin-inline-start: -8px;
 174     content: '';
 175     display: block;
 176     transform: rotate(45deg);
 177     transform-origin: 50% 50%;
 178     border-right: 1px solid #CCC;
 179     border-bottom: 1px solid #CCC;
 180     z-index: 56;
 181     @include mixins.lightDark(background-color, #fff, #333);
 182     @include mixins.lightDark(border-color, #ccc, #000);
 183   }
 184   input, button, a {
 185     position: relative;
 186     height: 28px;
 187     font-size: 12px;
 188     vertical-align: top;
 189     padding: 5px 16px;
 190   }
 191   input {
 192     background-color: #FFF;
 193     border: 1px solid #DDD;
 194     @include mixins.lightDark(border-color, #ddd, #000);
 195     color: #666;
 196     width: 180px;
 197     z-index: 58;
 198     padding: 5px;
 199     border-radius: 0;
 200   }
 201   .text-button {
 202     @include mixins.lightDark(color, #444, #AAA);
 203   }
 204   .input-group .button {
 205     line-height: 1;
 206     margin: 0 0 0 -5px;
 207     box-shadow: none;
 208     border-radius: 0;
 209   }
 210   a.button {
 211     margin: 0;
 212   }
 213   .svg-icon {
 214     width: 1.2em;
 215     height: 1.2em;
 216   }
 217   .button {
 218     @include mixins.lightDark(border-color, #ddd, #000);
 219   }
 220 }
 221
 222 // Page inline comments
 223 .content-comment-highlight {
 224   position: absolute;
 225   left: 0;
 226   top: 0;
 227   width: 0;
 228   height: 0;
 229   user-select: none;
 230   pointer-events: none;
 231   &:after {
 232     content: '';
 233     position: absolute;
 234     left: 0;
 235     top: 0;
 236     width: 100%;
 237     height: 100%;
 238     background-color: var(--color-primary);
 239     opacity: 0.25;
 240   }
 241 }
 242 .content-comment-window {
 243   font-size: vars.$fs-m;
 244   line-height: 1.4;
 245   position: absolute;
 246   top: calc(100% + 3px);
 247   left: 0;
 248   z-index: 92;
 249   pointer-events: all;
 250   min-width: min(340px, 80vw);
 251   background-color: #FFF;
 252   box-shadow: vars.$bs-hover;
 253   border-radius: 4px;
 254   overflow: hidden;
 255 }
 256 .content-comment-window-actions {
 257   background-color: var(--color-primary);
 258   color: #FFF;
 259   display: flex;
 260   align-items: center;
 261   justify-content: end;
 262   gap: vars.$xs;
 263   button {
 264     color: #FFF;
 265     font-size: 12px;
 266     padding: vars.$xs;
 267     line-height: 1;
 268     cursor: pointer;
 269   }
 270   button[data-action="jump"] {
 271     text-decoration: underline;
 272   }
 273   svg {
 274     fill: currentColor;
 275     width: 12px;
 276   }
 277 }
 278 .content-comment-window-content {
 279   padding: vars.$xs vars.$s vars.$xs vars.$xs;
 280   max-height: 200px;
 281   overflow-y: scroll;
 282 }
 283 .content-comment-window-content .comment-reference-indicator-wrap {
 284   display: none;
 285 }
 286 .content-comment-marker {
 287   position: absolute;
 288   right: -16px;
 289   top: -16px;
 290   pointer-events: all;
 291   width: min(1.5em, 32px);
 292   height: min(1.5em, 32px);
 293   border-radius: min(calc(1.5em / 2), 32px);
 294   display: flex;
 295   align-items: center;
 296   justify-content: center;
 297   background-color: var(--color-primary);
 298   box-shadow: vars.$bs-hover;
 299   color: #FFF;
 300   cursor: pointer;
 301   z-index: 90;
 302   transform: scale(1);
 303   transition: transform ease-in-out 120ms;
 304   svg {
 305     fill: #FFF;
 306     width: 80%;
 307   }
 308 }
 309 .page-content [id^="bkmrk-"]:hover .content-comment-marker {
 310   transform: scale(1.15);
 311 }
 312
 313 // Page editor sidebar toolbox
 314 .floating-toolbox {
 315   @include mixins.lightDark(background-color, #FFF, #222);
 316   overflow: hidden;
 317   align-items: stretch;
 318   flex-direction: row;
 319   display: flex;
 320   max-height: 100%;
 321   border-radius: 8px;
 322   box-shadow: vars.$bs-card;
 323   margin-bottom: auto;
 324   margin-inline-start: vars.$l;
 325   position: relative;
 326   &.open {
 327     position: relative;
 328     right: 0;
 329     max-width: 480px;
 330     margin-bottom: 0;
 331   }
 332   &:not(.open) .toolbox-tab-content {
 333     display: none !important;
 334   }
 335   .toolbox-toggle svg {
 336     transition: transform ease-in-out 180ms;
 337   }
 338   .toolbox-toggle {
 339     transition: background-color ease-in-out 180ms;
 340   }
 341   &.open .toolbox-toggle {
 342     background-color: rgba(255, 0, 0, 0.20);
 343   }
 344   &.open .toolbox-toggle svg {
 345     transform: rotate(180deg);
 346   }
 347   > div {
 348     flex: 1;
 349     position: relative;
 350   }
 351   .tabs {
 352     border-inline-end: 1px solid #DDD;
 353     @include mixins.lightDark(border-inline-end-color, #DDD, #000);
 354     width: 40px;
 355     flex: 0 1 auto;
 356     margin-inline-end: -1px;
 357   }
 358   .tabs-inner {
 359     @include mixins.lightDark(background-color, #FFFFFF, #222);
 360   }
 361   .tabs svg {
 362     padding: 0;
 363     margin: 0;
 364   }
 365   .tabs-inner > button {
 366     @include mixins.lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.5));
 367     display: block;
 368     cursor: pointer;
 369     padding: 10px vars.$xs;
 370     font-size: 18px;
 371     line-height: 1.6;
 372   }
 373   .tabs-inner > button:hover,  &.open .tabs-inner > button.active {
 374     color: var(--color-link) !important;
 375     position: relative;
 376     &:after {
 377       content: '';
 378       display: block;
 379       position: absolute;
 380       left: 0;
 381       width: 100%;
 382       top: 0;
 383       height: 100%;
 384       background-color: currentColor;
 385       opacity: .075;
 386     }
 387   }
 388   &.open .tabs-inner > button.active {
 389     border-inline-end: 1px solid var(--color-link);
 390     margin-inline-end: -1px;
 391   }
 392   h4 {
 393     font-size: 24px;
 394     margin: vars.$m 0 0 0;
 395     padding: 0 vars.$l vars.$s vars.$l;
 396   }
 397   .tags input {
 398     max-width: 100%;
 399     width: 100%;
 400     min-width: 50px;
 401   }
 402   .tags td, .inline-start-table > div > div > div {
 403     padding-inline-end: vars.$s;
 404     padding-top: vars.$s;
 405     position: relative;
 406   }
 407   .handle {
 408     user-select: none;
 409     cursor: move;
 410     fill: #999;
 411   }
 412   form {
 413     display: flex;
 414     flex: 1;
 415     flex-direction: column;
 416     overflow-y: scroll;
 417   }
 418   table td, table th {
 419     overflow: visible;
 420   }
 421 }
 422
 423 @include mixins.smaller-than(vars.$bp-xxl) {
 424   .floating-toolbox {
 425     margin-inline-start: vars.$s;
 426   }
 427 }
 428
 429 @include mixins.smaller-than(vars.$bp-s) {
 430   .page-editor-page-area-wrap {
 431     margin: 4px !important;
 432   }
 433   .floating-toolbox {
 434     margin-inline-start: 4px;
 435   }
 436   .floating-toolbox .tabs {
 437     width: 32px;
 438   }
 439   .floating-toolbox .tabs-inner > button {
 440     font-size: 12px;
 441   }
 442   .page-edit-toolbar {
 443     padding-block: 0 !important;
 444   }
 445   .page-editor.toolbox-open .page-editor-page-area {
 446     display: none;
 447   }
 448 }
 449
 450 .toolbox-tab-content {
 451   display: none;
 452   overflow-y: auto;
 453   padding-bottom: 45px;
 454 }
 455
 456 .suggestion-box {
 457   top: auto;
 458   margin: -4px 0 0;
 459   right: auto;
 460   left: 0;
 461   padding: 0;
 462   li {
 463     display: block;
 464     border-bottom: 1px solid #DDD;
 465     &:last-child {
 466       border-bottom: 0;
 467     }
 468   }
 469 }
 470
 471 .comments-container h5 {
 472   color: #888;
 473   font-weight: normal;
 474   margin-top: 0.5em;
 475 }
 476
 477 .comment-editor .CodeMirror, .comment-editor .CodeMirror-scroll {
 478   min-height: 175px;
 479 }
 480
 481 /* FIXME - Ugly hack to modify the media plugin for TinyMCE */
 482 .mce-floatpanel[aria-label="Insert/edit media"] {
 483   .mce-open {
 484     display: none;
 485   }
 486 }
 487
 488 .entity-list-item > span:first-child,
 489 .icon-list-item > span:first-child,
 490 .split-icon-list-item > a > .icon,
 491 .chapter-expansion > .icon {
 492   font-size: 0.8rem;
 493   width: 1.88em;
 494   height: 1.88em;
 495   flex-shrink: 0;
 496   display: flex;
 497   align-items: center;
 498   justify-content: center;
 499   text-align: center;
 500   border-radius: 1em;
 501   position: relative;
 502   overflow: hidden;
 503   svg {
 504     margin: 0;
 505     bottom: 0;
 506   }
 507   &:after {
 508     content: '';
 509     position: absolute;
 510     background-color: currentColor;
 511     opacity: 0.2;
 512     left: 0;
 513     top: 0;
 514     width: 100%;
 515     height: 100%;
 516   }
 517 }
 518
 519 .entity-chip {
 520   display: inline-block;
 521   align-items: center;
 522   justify-content: center;
 523   text-align: center;
 524   font-size: 0.9em;
 525   border-radius: 3px;
 526   position: relative;
 527   overflow: hidden;
 528   padding: vars.$xs vars.$s;
 529   fill: currentColor;
 530   opacity: 0.85;
 531   transition: opacity ease-in-out 120ms;
 532   &:after {
 533     content: '';
 534     position: absolute;
 535     background-color: currentColor;
 536     opacity: 0.15;
 537     left: 0;
 538     top: 0;
 539     width: 100%;
 540     height: 100%;
 541   }
 542   &:hover {
 543     text-decoration: none;
 544     opacity: 1;
 545   }
 546   @media (prefers-contrast: more) {
 547     opacity: 1;
 548   }
 549 }