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 body.tox-fullscreen .page-editor .edit-area,
  23 body.markdown-fullscreen .page-editor .edit-area {
  24   z-index: 12;
  25 }
  26
  27 body.tox-fullscreen, body.markdown-fullscreen {
  28   .page-editor, .flex-fill {
  29     overflow: visible;
  30   }
  31 }
  32
  33 @include smaller-than($s) {
  34   .page-edit-toolbar {
  35     overflow-x: scroll;
  36     overflow-y: visible;
  37   }
  38   .page-edit-toolbar .grid.third {
  39     display: block;
  40     white-space: nowrap;
  41     > div {
  42       display: inline-block;
  43     }
  44   }
  45 }
  46
  47 .page-save-mobile-button {
  48   position: fixed;
  49   z-index: 30;
  50   border-radius: 50%;
  51   width: 56px;
  52   height: 56px;
  53   font-size: 24px;
  54   right: $-m;
  55   bottom: $-s;
  56   box-shadow: $bs-hover;
  57   background-color: currentColor;
  58   text-align: center;
  59   svg {
  60     fill: #FFF;
  61     margin-inline-end: 0;
  62   }
  63 }
  64
  65 .draft-notification {
  66   pointer-events: none;
  67   transform: scale(0);
  68   transition: transform ease-in-out 120ms;
  69   transform-origin: 50% 50%;
  70   &.visible {
  71     transform: scale(1);
  72   }
  73 }
  74
  75 .page-style.editor {
  76   padding: 0 !important;
  77 }
  78
  79 .page-content {
  80   width: 100%;
  81   max-width: 840px;
  82   margin: 0 auto;
  83   overflow-wrap: break-word;
  84   .align-left {
  85     text-align: left;
  86   }
  87   img.align-left, table.align-left {
  88     float: left !important;
  89     margin: $-xs $-m $-m 0;
  90   }
  91   .align-right {
  92     text-align: right !important;
  93   }
  94   img.align-right, table.align-right {
  95     float: right !important;
  96     margin: $-xs 0 $-xs $-s;
  97   }
  98   .align-center {
  99     text-align: center;
 100   }
 101   img.align-center {
 102     display: block;
 103   }
 104   img.align-center, table.align-center {
 105     margin-left: auto;
 106     margin-right: auto;
 107   }
 108   img {
 109     max-width: 100%;
 110     height:auto;
 111   }
 112   h1, h2, h3, h4, h5, h6, pre {
 113     clear: left;
 114   }
 115   hr {
 116     clear: both;
 117     margin: $-m 0;
 118   }
 119   table {
 120     hyphens: auto;
 121     table-layout: fixed;
 122     max-width: 100%;
 123     height: auto !important;
 124   }
 125
 126   // diffs
 127   ins,
 128   del {
 129     text-decoration: none;
 130   }
 131   ins {
 132     background: #dbffdb;
 133   }
 134   del {
 135     background: #FFECEC;
 136   }
 137
 138   details {
 139     border: 1px solid;
 140     @include lightDark(border-color, #DDD, #555);
 141     margin-bottom: 1em;
 142     padding: $-s;
 143   }
 144   details > summary {
 145     margin-top: -$-s;
 146     margin-left: -$-s;
 147     margin-right: -$-s;
 148     margin-bottom: -$-s;
 149     font-weight: bold;
 150     @include lightDark(background-color, #EEE, #333);
 151     padding: $-xs $-s;
 152   }
 153   details[open] > summary {
 154     margin-bottom: $-s;
 155     border-bottom: 1px solid;
 156     @include lightDark(border-color, #DDD, #555);
 157   }
 158   details > summary + * {
 159     margin-top: .2em;
 160   }
 161   details:after {
 162     content: '';
 163     display: block;
 164     clear: both;
 165   }
 166
 167   li > input[type="checkbox"] {
 168     vertical-align: top;
 169     margin-top: 0.3em;
 170   }
 171
 172   p:empty {
 173     min-height: 1.6em;
 174   }
 175
 176   &.page-revision {
 177     pre code {
 178       white-space: pre-wrap;
 179     }
 180   }
 181 }
 182
 183 // Page content pointers
 184 .pointer-container {
 185   position: fixed;
 186   display: none;
 187   left: 0;
 188   z-index: 10;
 189 }
 190 .pointer {
 191   border: 1px solid #CCC;
 192   @include lightDark(border-color, #ccc, #000);
 193   display: flex;
 194   align-items: center;
 195   justify-items: center;
 196   padding: $-s $-s;
 197   border-radius: 4px;
 198   box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
 199   @include lightDark(background-color, #fff, #333);
 200   width: 275px;
 201
 202   &.is-page-editable {
 203     width: 328px;
 204   }
 205
 206   &:before {
 207     position: absolute;
 208     left: 50%;
 209     bottom: -9px;
 210     width: 16px;
 211     height: 16px;
 212     margin-inline-start: -8px;
 213     content: '';
 214     display: block;
 215     transform: rotate(45deg);
 216     transform-origin: 50% 50%;
 217     border-block-end: 1px solid #CCC;
 218     border-inline-end: 1px solid #CCC;
 219     z-index: 56;
 220     @include lightDark(background-color, #fff, #333);
 221     @include lightDark(border-color, #ccc, #000);
 222   }
 223   input, button, a {
 224     position: relative;
 225     border-radius: 0;
 226     height: 28px;
 227     font-size: 12px;
 228     vertical-align: top;
 229     padding: 5px 16px;
 230   }
 231   input {
 232     background-color: #FFF;
 233     border: 1px solid #DDD;
 234     @include lightDark(border-color, #ddd, #000);
 235     color: #666;
 236     width: 172px;
 237     z-index: 40;
 238     padding: 5px 10px;
 239   }
 240   span.icon {
 241     fill: #444;
 242     cursor: pointer;
 243     user-select: none;
 244     display: inline-block;
 245     line-height: 1;
 246   }
 247   .input-group .button {
 248     line-height: 1;
 249     margin: 0 0 0 -4px;
 250     box-shadow: none;
 251   }
 252   a.button {
 253     margin: 0;
 254   }
 255   .svg-icon {
 256     width: 1.2em;
 257     height: 1.2em;
 258   }
 259   .button {
 260     @include lightDark(border-color, #ddd, #000);
 261   }
 262 }
 263
 264 // Attribute form
 265 .floating-toolbox {
 266   border: 1px solid #DDD;
 267   @include lightDark(background-color, #fff, #222);
 268   @include lightDark(border-color, #DDD, #000);
 269   right: $-xl*2;
 270   width: 48px;
 271   overflow: hidden;
 272   align-items: stretch;
 273   flex-direction: row;
 274   display: flex;
 275   transition: width ease-in-out 180ms;
 276   margin-top: -1px;
 277   min-height: 0;
 278   &.open {
 279     width: 480px;
 280   }
 281   .toolbox-toggle svg {
 282     transition: transform ease-in-out 180ms;
 283   }
 284   .toolbox-toggle {
 285     transition: background-color ease-in-out 180ms;
 286   }
 287   &.open .toolbox-toggle {
 288     background-color: rgba(255, 0, 0, 0.29);
 289   }
 290   &.open .toolbox-toggle svg {
 291     transform: rotate(180deg);
 292   }
 293   > div {
 294     flex: 1;
 295     position: relative;
 296   }
 297   .tabs {
 298     display: block;
 299     border-inline-end: 1px solid #DDD;
 300     @include lightDark(border-color, #ddd, #000);
 301     width: 48px;
 302     flex: 0 1 auto;
 303   }
 304   .tabs svg {
 305     padding: 0;
 306     margin: 0;
 307   }
 308   .tabs > button {
 309     @include lightDark(color, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
 310     display: block;
 311     cursor: pointer;
 312     padding: $-s $-m;
 313     font-size: 16px;
 314     line-height: 1.6;
 315     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 316   }
 317   &.open .tabs > button.active {
 318     @include lightDark(color, #444, #EEE);
 319     background-color: rgba(0, 0, 0, 0.1);
 320   }
 321   div[toolbox-tab-content] {
 322     padding-bottom: 45px;
 323     display: flex;
 324     flex: 1;
 325     flex-direction: column;
 326     min-height: 0;
 327     overflow-y: scroll;
 328   }
 329   h4 {
 330     font-size: 24px;
 331     margin: $-m 0 0 0;
 332     padding: 0 $-l $-s $-l;
 333   }
 334   .tags input {
 335     max-width: 100%;
 336     width: 100%;
 337     min-width: 50px;
 338   }
 339   .tags td, .inline-start-table > div > div > div {
 340     padding-inline-end: $-s;
 341     padding-top: $-s;
 342     position: relative;
 343   }
 344   .handle {
 345     user-select: none;
 346     cursor: move;
 347     fill: #999;
 348   }
 349   form {
 350     display: flex;
 351     flex: 1;
 352     flex-direction: column;
 353     overflow-y: scroll;
 354   }
 355   table td, table th {
 356     overflow: visible;
 357   }
 358 }
 359
 360 .toolbox-tab-content {
 361   display: none;
 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: $-xs $-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 }