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