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

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