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

   1 // Common variables
   2 :root {
   3   --editor-color-primary: #206ea7;
   4 }
   5
   6 // Main UI elements
   7 .editor-container {
   8   background-color: #FFF;
   9   position: relative;
  10   &.fullscreen {
  11     z-index: 500;
  12   }
  13 }
  14 .editor-toolbar-main {
  15   display: flex;
  16   flex-wrap: wrap;
  17   justify-content: center;
  18   border-top: 1px solid #DDD;
  19   border-bottom: 1px solid #DDD;
  20 }
  21
  22 body.editor-is-fullscreen {
  23   overflow: hidden;
  24   .edit-area {
  25     z-index: 20;
  26   }
  27 }
  28 .editor-content-area {
  29   &:focus {
  30     outline: 0;
  31   }
  32 }
  33 .editor-content-wrap {
  34   overflow-y: scroll;
  35 }
  36
  37 // Buttons
  38 .editor-button {
  39   font-size: 12px;
  40   padding: 4px;
  41   color: #444;
  42   border-radius: 4px;
  43   display: flex;
  44   align-items: center;
  45   justify-content: center;
  46   margin: 2px;
  47 }
  48 .editor-button:hover {
  49   background-color: #EEE;
  50   cursor: pointer;
  51   color: #000;
  52 }
  53 .editor-button[disabled] {
  54   pointer-events: none;
  55   cursor: not-allowed;
  56   opacity: .6;
  57 }
  58 .editor-button-active, .editor-button-active:hover {
  59   background-color: #ceebff;
  60   color: #000;
  61 }
  62 .editor-button-format-preview {
  63   padding: 4px 6px;
  64   display: block;
  65 }
  66 .editor-button-icon svg {
  67   width: 24px;
  68   height: 24px;
  69   color: inherit;
  70   fill: currentColor;
  71   display: block;
  72 }
  73
  74 // Containers
  75 .editor-dropdown-menu-container {
  76     position: relative;
  77 }
  78 .editor-dropdown-menu {
  79   position: absolute;
  80   background-color: #FFF;
  81   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15);
  82   z-index: 99;
  83   min-width: 120px;
  84   display: flex;
  85   flex-direction: row;
  86 }
  87 .editor-menu-list {
  88   display: flex;
  89   flex-direction: column;
  90   align-items: stretch;
  91 }
  92 .editor-menu-list .editor-button {
  93   border-bottom: 0;
  94   text-align: start;
  95   display: block;
  96   width: 100%;
  97 }
  98 .editor-menu-list > .editor-dropdown-menu-container .editor-dropdown-menu {
  99   inset-inline-start: 100%;
 100   top: 0;
 101   flex-direction: column;
 102 }
 103
 104 .editor-format-menu-toggle {
 105   width: 130px;
 106   height: 32px;
 107   overflow: hidden;
 108   padding-inline: 12px;
 109   justify-content: start;
 110   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23666" d="M7.41 8L12 12.58 16.59 8 18 9.41l-6 6-6-6z"/></svg>');
 111   background-repeat: no-repeat;
 112   background-position: 98% 50%;
 113   background-size: 28px;
 114 }
 115 .editor-format-menu .editor-dropdown-menu {
 116   min-width: 300px;
 117   .editor-dropdown-menu {
 118     min-width: 220px;
 119   }
 120 }
 121 .editor-format-menu .editor-dropdown-menu .editor-dropdown-menu-container > .editor-button {
 122   padding: 8px 10px;
 123 }
 124
 125 .editor-overflow-container {
 126   display: flex;
 127   border-inline: 1px solid #DDD;
 128   padding-inline: 4px;
 129   &:first-child {
 130     border-inline-start: none;
 131   }
 132   &:last-child {
 133     border-inline-end: none;
 134   }
 135   + .editor-overflow-container {
 136     border-inline-start: none;
 137   }
 138 }
 139
 140 .editor-context-toolbar {
 141   position: fixed;
 142   background-color: #FFF;
 143   border: 1px solid #DDD;
 144   padding: .2rem;
 145   border-radius: 4px;
 146   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
 147   display: flex;
 148   flex-direction: row;
 149   &:before {
 150     content: '';
 151     z-index: -1;
 152     display: block;
 153     width: 8px;
 154     height: 8px;
 155     position: absolute;
 156     background-color: #FFF;
 157     border-top: 1px solid #DDD;
 158     border-left: 1px solid #DDD;
 159     transform: rotate(45deg);
 160     left: 50%;
 161     margin-left: -4px;
 162     top: -5px;
 163   }
 164 }
 165
 166 // Modals
 167 .editor-modal-wrapper {
 168   position: fixed;
 169   display: flex;
 170   align-items: center;
 171   justify-content: center;
 172   z-index: 999;
 173   background-color: rgba(0, 0, 0, 0.5);
 174   width: 100%;
 175   height: 100%;
 176 }
 177 .editor-modal {
 178   background-color: #FFF;
 179   border: 1px solid #DDD;
 180   padding: 1rem;
 181   border-radius: 4px;
 182 }
 183 .editor-modal-header {
 184   display: flex;
 185   justify-content: space-between;
 186   margin-bottom: 1rem;
 187 }
 188 .editor-modal-title {
 189   font-weight: 700;
 190 }
 191
 192 // Specific UI elements
 193 .editor-color-select-row {
 194   display: flex;
 195 }
 196 .editor-color-select-option {
 197   width: 28px;
 198   height: 28px;
 199   cursor: pointer;
 200 }
 201 .editor-color-select-option:hover {
 202   border-radius: 3px;
 203   box-sizing: border-box;
 204   z-index: 3;
 205   box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.25);
 206 }
 207 .editor-table-creator-row {
 208   display: flex;
 209 }
 210 .editor-table-creator-cell {
 211   border: 1px solid #DDD;
 212   width: 15px;
 213   height: 15px;
 214   cursor: pointer;
 215   &.active {
 216     background-color: var(--editor-color-primary);
 217   }
 218 }
 219 .editor-table-creator-display {
 220   text-align: center;
 221   padding: 0.2em;
 222 }
 223
 224 // In-editor elements
 225 .editor-image-wrap {
 226   position: relative;
 227   display: inline-flex;
 228 }
 229 .editor-image-decorator {
 230   position: absolute;
 231   left: 0;
 232   right: 0;
 233   width: 100%;
 234   height: 100%;
 235   display: inline-block;
 236   &.selected {
 237     border: 1px dashed var(--editor-color-primary);
 238   }
 239 }
 240 .editor-image-decorator-handle {
 241   position: absolute;
 242   display: block;
 243   width: 10px;
 244   height: 10px;
 245   border: 2px solid var(--editor-color-primary);
 246   background-color: #FFF;
 247   user-select: none;
 248   &.nw {
 249     inset-inline-start: -5px;
 250     inset-block-start: -5px;
 251     cursor: nw-resize;
 252   }
 253   &.ne {
 254     inset-inline-end: -5px;
 255     inset-block-start: -5px;
 256     cursor: ne-resize;
 257   }
 258   &.se {
 259     inset-inline-end: -5px;
 260     inset-block-end: -5px;
 261     cursor: se-resize;
 262   }
 263   &.sw {
 264     inset-inline-start: -5px;
 265     inset-block-end: -5px;
 266     cursor: sw-resize;
 267   }
 268 }
 269
 270 .editor-table-marker {
 271   position: fixed;
 272   background-color: var(--editor-color-primary);
 273   z-index: 99;
 274   user-select: none;
 275   opacity: 0;
 276   &:hover, &.active {
 277     opacity: 0.4;
 278   }
 279 }
 280 .editor-table-marker-column {
 281   width: 4px;
 282   cursor: col-resize;
 283 }
 284 .editor-table-marker-row {
 285   height: 4px;
 286   cursor: row-resize;
 287 }
 288
 289 .editor-code-block-wrap {
 290   user-select: none;
 291   > * {
 292     pointer-events: none;
 293   }
 294 }
 295
 296 // Editor theme styles
 297 .editor-theme-bold {
 298   font-weight: bold;
 299 }
 300 .editor-theme-italic {
 301   font-style: italic;
 302 }
 303 .editor-theme-strikethrough {
 304   text-decoration-line: line-through;
 305 }
 306 .editor-theme-underline {
 307   text-decoration-line: underline;
 308 }
 309 .editor-theme-underline-strikethrough {
 310   text-decoration: underline line-through;
 311 }