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-marker {
 284   position: absolute;
 285   right: -16px;
 286   top: -16px;
 287   pointer-events: all;
 288   width: min(1.5em, 32px);
 289   height: min(1.5em, 32px);
 290   border-radius: min(calc(1.5em / 2), 32px);
 291   display: flex;
 292   align-items: center;
 293   justify-content: center;
 294   background-color: var(--color-primary);
 295   box-shadow: vars.$bs-hover;
 296   color: #FFF;
 297   cursor: pointer;
 298   z-index: 90;
 299   transform: scale(1);
 300   transition: transform ease-in-out 120ms;
 301   svg {
 302     fill: #FFF;
 303     width: 80%;
 304   }
 305 }
 306 .page-content [id^="bkmrk-"]:hover .content-comment-marker {
 307   transform: scale(1.15);
 308 }
 309
 310 // Page editor sidebar toolbox
 311 .floating-toolbox {
 312   @include mixins.lightDark(background-color, #FFF, #222);
 313   overflow: hidden;
 314   align-items: stretch;
 315   flex-direction: row;
 316   display: flex;
 317   max-height: 100%;
 318   border-radius: 8px;
 319   box-shadow: vars.$bs-card;
 320   margin-bottom: auto;
 321   margin-inline-start: vars.$l;
 322   position: relative;
 323   &.open {
 324     position: relative;
 325     right: 0;
 326     max-width: 480px;
 327     margin-bottom: 0;
 328   }
 329   &:not(.open) .toolbox-tab-content {
 330     display: none !important;
 331   }
 332   .toolbox-toggle svg {
 333     transition: transform ease-in-out 180ms;
 334   }
 335   .toolbox-toggle {
 336     transition: background-color ease-in-out 180ms;
 337   }
 338   &.open .toolbox-toggle {
 339     background-color: rgba(255, 0, 0, 0.20);
 340   }
 341   &.open .toolbox-toggle svg {
 342     transform: rotate(180deg);
 343   }
 344   > div {
 345     flex: 1;
 346     position: relative;
 347   }
 348   .tabs {
 349     border-inline-end: 1px solid #DDD;
 350     @include mixins.lightDark(border-inline-end-color, #DDD, #000);
 351     width: 40px;
 352     flex: 0 1 auto;
 353     margin-inline-end: -1px;
 354   }
 355   .tabs-inner {
 356     @include mixins.lightDark(background-color, #FFFFFF, #222);
 357   }
 358   .tabs svg {
 359     padding: 0;
 360     margin: 0;
 361   }
 362   .tabs-inner > button {
 363     @include mixins.lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.5));
 364     display: block;
 365     cursor: pointer;
 366     padding: 10px vars.$xs;
 367     font-size: 18px;
 368     line-height: 1.6;
 369   }
 370   .tabs-inner > button:hover,  &.open .tabs-inner > button.active {
 371     color: var(--color-link) !important;
 372     position: relative;
 373     &:after {
 374       content: '';
 375       display: block;
 376       position: absolute;
 377       left: 0;
 378       width: 100%;
 379       top: 0;
 380       height: 100%;
 381       background-color: currentColor;
 382       opacity: .075;
 383     }
 384   }
 385   &.open .tabs-inner > button.active {
 386     border-inline-end: 1px solid var(--color-link);
 387     margin-inline-end: -1px;
 388   }
 389   h4 {
 390     font-size: 24px;
 391     margin: vars.$m 0 0 0;
 392     padding: 0 vars.$l vars.$s vars.$l;
 393   }
 394   .tags input {
 395     max-width: 100%;
 396     width: 100%;
 397     min-width: 50px;
 398   }
 399   .tags td, .inline-start-table > div > div > div {
 400     padding-inline-end: vars.$s;
 401     padding-top: vars.$s;
 402     position: relative;
 403   }
 404   .handle {
 405     user-select: none;
 406     cursor: move;
 407     fill: #999;
 408   }
 409   form {
 410     display: flex;
 411     flex: 1;
 412     flex-direction: column;
 413     overflow-y: scroll;
 414   }
 415   table td, table th {
 416     overflow: visible;
 417   }
 418 }
 419
 420 @include mixins.smaller-than(vars.$bp-xxl) {
 421   .floating-toolbox {
 422     margin-inline-start: vars.$s;
 423   }
 424 }
 425
 426 @include mixins.smaller-than(vars.$bp-s) {
 427   .page-editor-page-area-wrap {
 428     margin: 4px !important;
 429   }
 430   .floating-toolbox {
 431     margin-inline-start: 4px;
 432   }
 433   .floating-toolbox .tabs {
 434     width: 32px;
 435   }
 436   .floating-toolbox .tabs-inner > button {
 437     font-size: 12px;
 438   }
 439   .page-edit-toolbar {
 440     padding-block: 0 !important;
 441   }
 442   .page-editor.toolbox-open .page-editor-page-area {
 443     display: none;
 444   }
 445 }
 446
 447 .toolbox-tab-content {
 448   display: none;
 449   overflow-y: auto;
 450   padding-bottom: 45px;
 451 }
 452
 453 .suggestion-box {
 454   top: auto;
 455   margin: -4px 0 0;
 456   right: auto;
 457   left: 0;
 458   padding: 0;
 459   li {
 460     display: block;
 461     border-bottom: 1px solid #DDD;
 462     &:last-child {
 463       border-bottom: 0;
 464     }
 465   }
 466 }
 467
 468 .comments-container h5 {
 469   color: #888;
 470   font-weight: normal;
 471   margin-top: 0.5em;
 472 }
 473
 474 .comment-editor .CodeMirror, .comment-editor .CodeMirror-scroll {
 475   min-height: 175px;
 476 }
 477
 478 /* FIXME - Ugly hack to modify the media plugin for TinyMCE */
 479 .mce-floatpanel[aria-label="Insert/edit media"] {
 480   .mce-open {
 481     display: none;
 482   }
 483 }
 484
 485 .entity-list-item > span:first-child,
 486 .icon-list-item > span:first-child,
 487 .split-icon-list-item > a > .icon,
 488 .chapter-expansion > .icon {
 489   font-size: 0.8rem;
 490   width: 1.88em;
 491   height: 1.88em;
 492   flex-shrink: 0;
 493   display: flex;
 494   align-items: center;
 495   justify-content: center;
 496   text-align: center;
 497   border-radius: 1em;
 498   position: relative;
 499   overflow: hidden;
 500   svg {
 501     margin: 0;
 502     bottom: 0;
 503   }
 504   &:after {
 505     content: '';
 506     position: absolute;
 507     background-color: currentColor;
 508     opacity: 0.2;
 509     left: 0;
 510     top: 0;
 511     width: 100%;
 512     height: 100%;
 513   }
 514 }
 515
 516 .entity-chip {
 517   display: inline-block;
 518   align-items: center;
 519   justify-content: center;
 520   text-align: center;
 521   font-size: 0.9em;
 522   border-radius: 3px;
 523   position: relative;
 524   overflow: hidden;
 525   padding: vars.$xs vars.$s;
 526   fill: currentColor;
 527   opacity: 0.85;
 528   transition: opacity ease-in-out 120ms;
 529   &:after {
 530     content: '';
 531     position: absolute;
 532     background-color: currentColor;
 533     opacity: 0.15;
 534     left: 0;
 535     top: 0;
 536     width: 100%;
 537     height: 100%;
 538   }
 539   &:hover {
 540     text-decoration: none;
 541     opacity: 1;
 542   }
 543   @media (prefers-contrast: more) {
 544     opacity: 1;
 545   }
 546 }