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