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