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.mce-fullscreen .page-editor .edit-area,
  23 body.markdown-fullscreen .page-editor .edit-area {
  24   z-index: 12;
  25 }
  26
  27 body.mce-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   &.page-revision {
 139     pre code {
 140       white-space: pre-wrap;
 141     }
 142   }
 143 }
 144
 145 // Page content pointers
 146 .pointer-container {
 147   position: relative;
 148   display: none;
 149   left: 0;
 150   z-index: 10;
 151 }
 152 .pointer {
 153   border: 1px solid #CCC;
 154   display: flex;
 155   align-items: center;
 156   justify-items: center;
 157   padding: $-s $-s;
 158   border-radius: 4px;
 159   box-shadow: 0 0 12px 1px rgba(212, 209, 209, 0.3);
 160   position: absolute;
 161   top: -60px;
 162   background-color:#FFF;
 163   width: 275px;
 164   z-index: 55;
 165
 166   &.is-page-editable {
 167     width: 328px;
 168   }
 169
 170   &:before {
 171     position: absolute;
 172     left: 50%;
 173     bottom: -9px;
 174     width: 16px;
 175     height: 16px;
 176     margin-inline-start: -8px;
 177     content: '';
 178     display: block;
 179     background-color:#FFF;
 180     transform: rotate(45deg);
 181     transform-origin: 50% 50%;
 182     border-inline-startom: 1px solid #CCC;
 183     border-inline-end: 1px solid #CCC;
 184     z-index: 56;
 185   }
 186   input, button, a {
 187     position: relative;
 188     border-radius: 0;
 189     height: 28px;
 190     font-size: 12px;
 191     vertical-align: top;
 192     padding: 5px 16px;
 193   }
 194   input {
 195     background-color: #FFF;
 196     border: 1px solid #DDD;
 197     color: #666;
 198     width: 172px;
 199     z-index: 40;
 200     padding: 5px 10px;
 201   }
 202   span.icon {
 203     fill: #444;
 204     cursor: pointer;
 205     user-select: none;
 206     display: inline-block;
 207     line-height: 1;
 208   }
 209   .input-group .button {
 210     line-height: 1;
 211     margin: 0 0 0 -4px;
 212     box-shadow: none;
 213   }
 214   a.button {
 215     margin: 0;
 216   }
 217   .svg-icon {
 218     width: 1.2em;
 219     height: 1.2em;
 220   }
 221 }
 222
 223 // Attribute form
 224 .floating-toolbox {
 225   border: 1px solid #DDD;
 226   @include lightDark(background-color, #fff, #222);
 227   @include lightDark(border-color, #DDD, #000);
 228   right: $-xl*2;
 229   width: 48px;
 230   overflow: hidden;
 231   align-items: stretch;
 232   flex-direction: row;
 233   display: flex;
 234   transition: width ease-in-out 180ms;
 235   margin-top: -1px;
 236   min-height: 0;
 237   &.open {
 238     width: 480px;
 239   }
 240   [toolbox-toggle] svg {
 241     transition: transform ease-in-out 180ms;
 242   }
 243   [toolbox-toggle] {
 244     transition: background-color ease-in-out 180ms;
 245   }
 246   &.open [toolbox-toggle] {
 247     background-color: rgba(255, 0, 0, 0.29);
 248   }
 249   &.open [toolbox-toggle] svg {
 250     transform: rotate(180deg);
 251   }
 252   > div {
 253     flex: 1;
 254     position: relative;
 255   }
 256   .tabs {
 257     display: block;
 258     border-inline-end: 1px solid #DDD;
 259     @include lightDark(border-color, #ddd, #000);
 260     width: 48px;
 261     flex: 0 1 auto;
 262   }
 263   .tabs svg {
 264     padding: 0;
 265     margin: 0;
 266   }
 267   .tabs > button {
 268     @include lightDark(color, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
 269     display: block;
 270     cursor: pointer;
 271     padding: $-s $-m;
 272     font-size: 16px;
 273     line-height: 1.6;
 274     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 275   }
 276   &.open .tabs > button.active {
 277     @include lightDark(color, #444, #EEE);
 278     background-color: rgba(0, 0, 0, 0.1);
 279   }
 280   div[toolbox-tab-content] {
 281     padding-bottom: 45px;
 282     display: flex;
 283     flex: 1;
 284     flex-direction: column;
 285     min-height: 0;
 286     overflow-y: scroll;
 287   }
 288   h4 {
 289     font-size: 24px;
 290     margin: $-m 0 0 0;
 291     padding: 0 $-l $-s $-l;
 292   }
 293   .tags input {
 294     max-width: 100%;
 295     width: 100%;
 296     min-width: 50px;
 297   }
 298   .tags td, .inline-start-table > div > div > div {
 299     padding-inline-end: $-s;
 300     padding-top: $-s;
 301     position: relative;
 302   }
 303   .handle {
 304     user-select: none;
 305     cursor: move;
 306     fill: #999;
 307   }
 308   form {
 309     display: flex;
 310     flex: 1;
 311     flex-direction: column;
 312     overflow-y: scroll;
 313   }
 314   table td, table th {
 315     overflow: visible;
 316   }
 317 }
 318
 319 [toolbox-tab-content] {
 320   display: none;
 321 }
 322
 323 .suggestion-box {
 324   position: absolute;
 325   background-color: #FFF;
 326   border: 1px solid #BBB;
 327   box-shadow: $bs-light;
 328   list-style: none;
 329   z-index: 100;
 330   padding: 0;
 331   margin: 0;
 332   border-radius: 3px;
 333   li {
 334     display: block;
 335     padding: $-xs $-s;
 336     border-bottom: 1px solid #DDD;
 337     &:last-child {
 338       border-bottom: 0;
 339     }
 340     &.active {
 341       background-color: #EEE;
 342     }
 343   }
 344 }
 345
 346 .comments-container h5 {
 347   color: #888;
 348   font-weight: normal;
 349   margin-top: 0.5em;
 350 }
 351
 352 .comment-editor .CodeMirror, .comment-editor .CodeMirror-scroll {
 353   min-height: 175px;
 354 }
 355
 356 /* FIXME - Ugly hack to modify the media plugin for TinyMCE */
 357 .mce-floatpanel[aria-label="Insert/edit media"] {
 358   .mce-open {
 359     display: none;
 360   }
 361 }
 362
 363 .entity-list-item > span:first-child, .icon-list-item > span:first-child, .chapter-expansion > .icon {
 364   font-size: 0.8rem;
 365   width: 1.88em;
 366   height: 1.88em;
 367   display: flex;
 368   align-items: center;
 369   justify-content: center;
 370   text-align: center;
 371   border-radius: 1em;
 372   position: relative;
 373   overflow: hidden;
 374   svg {
 375     margin: 0;
 376     bottom: 0;
 377   }
 378   &:after {
 379     content: '';
 380     position: absolute;
 381     background-color: currentColor;
 382     opacity: 0.2;
 383     left: 0;
 384     top: 0;
 385     width: 100%;
 386     height: 100%;
 387   }
 388 }
 389
 390 .entity-chip {
 391   display: inline-block;
 392   align-items: center;
 393   justify-content: center;
 394   text-align: center;
 395   font-size: 0.9em;
 396   border-radius: 3px;
 397   position: relative;
 398   overflow: hidden;
 399   padding: $-xs $-s;
 400   fill: currentColor;
 401   opacity: 0.85;
 402   transition: opacity ease-in-out 120ms;
 403   &:after {
 404     content: '';
 405     position: absolute;
 406     background-color: currentColor;
 407     opacity: 0.15;
 408     left: 0;
 409     top: 0;
 410     width: 100%;
 411     height: 100%;
 412   }
 413   &:hover {
 414     text-decoration: none;
 415     opacity: 1;
 416   }
 417 }