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 // Modals
  69 .editor-modal-wrapper {
  70   position: fixed;
  71   display: flex;
  72   align-items: center;
  73   justify-content: center;
  74   z-index: 999;
  75   background-color: rgba(0, 0, 0, 0.5);
  76   width: 100%;
  77   height: 100%;
  78 }
  79 .editor-modal {
  80   background-color: #FFF;
  81   border: 1px solid #DDD;
  82   padding: 1rem;
  83   border-radius: 4px;
  84 }
  85 .editor-modal-header {
  86   display: flex;
  87   justify-content: space-between;
  88   margin-bottom: 1rem;
  89 }
  90 .editor-modal-title {
  91   font-weight: 700;
  92 }
  93
  94 // Specific UI elements
  95 .editor-color-select-row {
  96   display: flex;
  97 }
  98 .editor-color-select-option {
  99   width: 28px;
 100   height: 28px;
 101   cursor: pointer;
 102 }
 103 .editor-color-select-option:hover {
 104   border-radius: 3px;
 105   box-sizing: border-box;
 106   z-index: 3;
 107   box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.25);
 108 }
 109 .editor-table-creator-row {
 110   display: flex;
 111 }
 112 .editor-table-creator-cell {
 113   border: 1px solid #DDD;
 114   width: 15px;
 115   height: 15px;
 116   cursor: pointer;
 117   &.active {
 118     background-color: var(--editor-color-primary);
 119   }
 120 }
 121 .editor-table-creator-display {
 122   text-align: center;
 123   padding: 0.2em;
 124 }
 125
 126 // In-editor elements
 127 .editor-image-wrap {
 128   position: relative;
 129   display: inline-flex;
 130 }
 131 .editor-image-decorator {
 132   position: absolute;
 133   left: 0;
 134   right: 0;
 135   width: 100%;
 136   height: 100%;
 137   display: inline-block;
 138   &.selected {
 139     border: 1px dashed var(--editor-color-primary);
 140   }
 141 }
 142 .editor-image-decorator-handle {
 143   position: absolute;
 144   display: block;
 145   width: 10px;
 146   height: 10px;
 147   border: 2px solid var(--editor-color-primary);
 148   background-color: #FFF;
 149   user-select: none;
 150   &.nw {
 151     inset-inline-start: -5px;
 152     inset-block-start: -5px;
 153     cursor: nw-resize;
 154   }
 155   &.ne {
 156     inset-inline-end: -5px;
 157     inset-block-start: -5px;
 158     cursor: ne-resize;
 159   }
 160   &.se {
 161     inset-inline-end: -5px;
 162     inset-block-end: -5px;
 163     cursor: se-resize;
 164   }
 165   &.sw {
 166     inset-inline-start: -5px;
 167     inset-block-end: -5px;
 168     cursor: sw-resize;
 169   }
 170 }
 171
 172 .editor-table-marker {
 173   position: fixed;
 174   background-color: var(--editor-color-primary);
 175   z-index: 99;
 176   user-select: none;
 177   opacity: 0;
 178   &:hover, &.active {
 179     opacity: 0.4;
 180   }
 181 }
 182 .editor-table-marker-column {
 183   width: 4px;
 184   cursor: col-resize;
 185 }
 186 .editor-table-marker-row {
 187   height: 4px;
 188   cursor: row-resize;
 189 }
 190
 191 // Editor theme styles
 192 .editor-theme-bold {
 193   font-weight: bold;
 194 }
 195 .editor-theme-italic {
 196   font-style: italic;
 197 }
 198 .editor-theme-strikethrough {
 199   text-decoration-line: line-through;
 200 }
 201 .editor-theme-underline {
 202   text-decoration-line: underline;
 203 }
 204 .editor-theme-underline-strikethrough {
 205   text-decoration: underline line-through;
 206 }