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-toolbar-main {
   8   display: flex;
   9   flex-wrap: wrap;
  10 }
  11
  12 // Buttons
  13 .editor-button {
  14   border: 1px solid #DDD;
  15   font-size: 12px;
  16   padding: 4px 6px;
  17   color: #444;
  18 }
  19 .editor-button:hover {
  20   background-color: #EEE;
  21   cursor: pointer;
  22   color: #000;
  23 }
  24 .editor-button[disabled] {
  25   pointer-events: none;
  26   cursor: not-allowed;
  27   background-color: #EEE;
  28   opacity: .6;
  29 }
  30 .editor-button-active, .editor-button-active:hover {
  31   background-color: #ceebff;
  32   color: #000;
  33 }
  34 .editor-button-format-preview {
  35   padding: 4px 6px;
  36   display: block;
  37 }
  38 .editor-button-icon svg {
  39   width: 24px;
  40   height: 24px;
  41   fill: #000;
  42 }
  43
  44 // Containers
  45 .editor-dropdown-menu-container {
  46     position: relative;
  47 }
  48 .editor-dropdown-menu {
  49   position: absolute;
  50   background-color: #FFF;
  51   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15);
  52   z-index: 99;
  53   min-width: 120px;
  54 }
  55 .editor-menu-list {
  56   display: flex;
  57   flex-direction: column;
  58 }
  59 .editor-menu-list > .editor-button {
  60   border-bottom: 0;
  61   text-align: start;
  62 }
  63
  64 .editor-format-menu .editor-dropdown-menu {
  65   min-width: 320px;
  66 }
  67
  68 .editor-overflow-container {
  69   display: flex;
  70 }
  71
  72 // Modals
  73 .editor-modal-wrapper {
  74   position: fixed;
  75   display: flex;
  76   align-items: center;
  77   justify-content: center;
  78   z-index: 999;
  79   background-color: rgba(0, 0, 0, 0.5);
  80   width: 100%;
  81   height: 100%;
  82 }
  83 .editor-modal {
  84   background-color: #FFF;
  85   border: 1px solid #DDD;
  86   padding: 1rem;
  87   border-radius: 4px;
  88 }
  89 .editor-modal-header {
  90   display: flex;
  91   justify-content: space-between;
  92   margin-bottom: 1rem;
  93 }
  94 .editor-modal-title {
  95   font-weight: 700;
  96 }
  97
  98 // Specific UI elements
  99 .editor-color-select-row {
 100   display: flex;
 101 }
 102 .editor-color-select-option {
 103   width: 28px;
 104   height: 28px;
 105   cursor: pointer;
 106 }
 107 .editor-color-select-option:hover {
 108   border-radius: 3px;
 109   box-sizing: border-box;
 110   z-index: 3;
 111   box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.25);
 112 }
 113 .editor-table-creator-row {
 114   display: flex;
 115 }
 116 .editor-table-creator-cell {
 117   border: 1px solid #DDD;
 118   width: 15px;
 119   height: 15px;
 120   cursor: pointer;
 121   &.active {
 122     background-color: var(--editor-color-primary);
 123   }
 124 }
 125 .editor-table-creator-display {
 126   text-align: center;
 127   padding: 0.2em;
 128 }
 129
 130 // In-editor elements
 131 .editor-image-wrap {
 132   position: relative;
 133   display: inline-flex;
 134 }
 135 .editor-image-decorator {
 136   position: absolute;
 137   left: 0;
 138   right: 0;
 139   width: 100%;
 140   height: 100%;
 141   display: inline-block;
 142   &.selected {
 143     border: 1px dashed var(--editor-color-primary);
 144   }
 145 }
 146 .editor-image-decorator-handle {
 147   position: absolute;
 148   display: block;
 149   width: 10px;
 150   height: 10px;
 151   border: 2px solid var(--editor-color-primary);
 152   background-color: #FFF;
 153   user-select: none;
 154   &.nw {
 155     inset-inline-start: -5px;
 156     inset-block-start: -5px;
 157     cursor: nw-resize;
 158   }
 159   &.ne {
 160     inset-inline-end: -5px;
 161     inset-block-start: -5px;
 162     cursor: ne-resize;
 163   }
 164   &.se {
 165     inset-inline-end: -5px;
 166     inset-block-end: -5px;
 167     cursor: se-resize;
 168   }
 169   &.sw {
 170     inset-inline-start: -5px;
 171     inset-block-end: -5px;
 172     cursor: sw-resize;
 173   }
 174 }
 175
 176 .editor-table-marker {
 177   position: fixed;
 178   background-color: var(--editor-color-primary);
 179   z-index: 99;
 180   user-select: none;
 181   opacity: 0;
 182   &:hover, &.active {
 183     opacity: 0.4;
 184   }
 185 }
 186 .editor-table-marker-column {
 187   width: 4px;
 188   cursor: col-resize;
 189 }
 190 .editor-table-marker-row {
 191   height: 4px;
 192   cursor: row-resize;
 193 }
 194
 195 // Editor theme styles
 196 .editor-theme-bold {
 197   font-weight: bold;
 198 }
 199 .editor-theme-italic {
 200   font-style: italic;
 201 }
 202 .editor-theme-strikethrough {
 203   text-decoration-line: line-through;
 204 }
 205 .editor-theme-underline {
 206   text-decoration-line: underline;
 207 }
 208 .editor-theme-underline-strikethrough {
 209   text-decoration: underline line-through;
 210 }