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