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

   1 .page-editor {
   2   display: flex;
   3   flex-direction: column;
   4   align-items: stretch;
   5   overflow: hidden;
   6
   7   .edit-area {
   8     flex: 1;
   9     flex-direction: column;
  10     z-index: 10;
  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: 4px;
  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   right: $-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-block-end: 1px solid #CCC;
 172     border-inline-end: 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-left: $-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-right: 1px solid #DDD;
 254     @include lightDark(border-right-color, #DDD, #000);
 255     width: 40px;
 256     flex: 0 1 auto;
 257     margin-right: -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     background-color: var(--color-primary-light);
 276     color: var(--color-primary);
 277   }
 278   &.open .tabs-inner > button.active {
 279     border-inline-end: 1px solid var(--color-primary);
 280     margin-inline-end: -1px;
 281   }
 282   h4 {
 283     font-size: 24px;
 284     margin: $-m 0 0 0;
 285     padding: 0 $-l $-s $-l;
 286   }
 287   .tags input {
 288     max-width: 100%;
 289     width: 100%;
 290     min-width: 50px;
 291   }
 292   .tags td, .inline-start-table > div > div > div {
 293     padding-inline-end: $-s;
 294     padding-top: $-s;
 295     position: relative;
 296   }
 297   .handle {
 298     user-select: none;
 299     cursor: move;
 300     fill: #999;
 301   }
 302   form {
 303     display: flex;
 304     flex: 1;
 305     flex-direction: column;
 306     overflow-y: scroll;
 307   }
 308   table td, table th {
 309     overflow: visible;
 310   }
 311 }
 312
 313 @include smaller-than($xxl) {
 314   .floating-toolbox {
 315     margin-left: $-s;
 316   }
 317 }
 318
 319 @include smaller-than($s) {
 320   .page-editor-page-area-wrap {
 321     margin: 4px !important;
 322   }
 323   .floating-toolbox {
 324     margin-left: 4px;
 325   }
 326   .floating-toolbox .tabs {
 327     width: 32px;
 328   }
 329   .floating-toolbox .tabs-inner > button {
 330     font-size: 12px;
 331   }
 332   .page-edit-toolbar {
 333     padding-block: 0 !important;
 334   }
 335   .page-editor.toolbox-open .page-editor-page-area {
 336     display: none;
 337   }
 338 }
 339
 340 .toolbox-tab-content {
 341   display: none;
 342   overflow-y: auto;
 343   padding-bottom: 45px;
 344 }
 345
 346 .suggestion-box {
 347   top: auto;
 348   margin: -4px 0 0;
 349   right: auto;
 350   left: 0;
 351   padding: 0;
 352   li {
 353     display: block;
 354     border-bottom: 1px solid #DDD;
 355     &:last-child {
 356       border-bottom: 0;
 357     }
 358   }
 359 }
 360
 361 .comments-container h5 {
 362   color: #888;
 363   font-weight: normal;
 364   margin-top: 0.5em;
 365 }
 366
 367 .comment-editor .CodeMirror, .comment-editor .CodeMirror-scroll {
 368   min-height: 175px;
 369 }
 370
 371 /* FIXME - Ugly hack to modify the media plugin for TinyMCE */
 372 .mce-floatpanel[aria-label="Insert/edit media"] {
 373   .mce-open {
 374     display: none;
 375   }
 376 }
 377
 378 .entity-list-item > span:first-child,
 379 .icon-list-item > span:first-child,
 380 .split-icon-list-item > a > .icon,
 381 .chapter-expansion > .icon {
 382   font-size: 0.8rem;
 383   width: 1.88em;
 384   height: 1.88em;
 385   flex-shrink: 0;
 386   display: flex;
 387   align-items: center;
 388   justify-content: center;
 389   text-align: center;
 390   border-radius: 1em;
 391   position: relative;
 392   overflow: hidden;
 393   svg {
 394     margin: 0;
 395     bottom: 0;
 396   }
 397   &:after {
 398     content: '';
 399     position: absolute;
 400     background-color: currentColor;
 401     opacity: 0.2;
 402     left: 0;
 403     top: 0;
 404     width: 100%;
 405     height: 100%;
 406   }
 407 }
 408
 409 .entity-chip {
 410   display: inline-block;
 411   align-items: center;
 412   justify-content: center;
 413   text-align: center;
 414   font-size: 0.9em;
 415   border-radius: 3px;
 416   position: relative;
 417   overflow: hidden;
 418   padding: $-xs $-s;
 419   fill: currentColor;
 420   opacity: 0.85;
 421   transition: opacity ease-in-out 120ms;
 422   &:after {
 423     content: '';
 424     position: absolute;
 425     background-color: currentColor;
 426     opacity: 0.15;
 427     left: 0;
 428     top: 0;
 429     width: 100%;
 430     height: 100%;
 431   }
 432   &:hover {
 433     text-decoration: none;
 434     opacity: 1;
 435   }
 436   @media (prefers-contrast: more) {
 437     opacity: 1;
 438   }
 439 }