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

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