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