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