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