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

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