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