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