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 6px;
  41   color: #444;
  42   border-radius: 4px;
  43   display: flex;
  44   align-items: center;
  45   justify-content: center;
  46 }
  47 .editor-button:hover {
  48   background-color: #EEE;
  49   cursor: pointer;
  50   color: #000;
  51 }
  52 .editor-button[disabled] {
  53   pointer-events: none;
  54   cursor: not-allowed;
  55   opacity: .6;
  56 }
  57 .editor-button-active, .editor-button-active:hover {
  58   background-color: #ceebff;
  59   color: #000;
  60 }
  61 .editor-button-format-preview {
  62   padding: 4px 6px;
  63   display: block;
  64 }
  65 .editor-button-icon svg {
  66   width: 24px;
  67   height: 24px;
  68   color: inherit;
  69   fill: currentColor;
  70 }
  71
  72 // Containers
  73 .editor-dropdown-menu-container {
  74     position: relative;
  75 }
  76 .editor-dropdown-menu {
  77   position: absolute;
  78   background-color: #FFF;
  79   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15);
  80   z-index: 99;
  81   min-width: 120px;
  82 }
  83 .editor-menu-list {
  84   display: flex;
  85   flex-direction: column;
  86 }
  87 .editor-menu-list > .editor-button {
  88   border-bottom: 0;
  89   text-align: start;
  90 }
  91
  92 .editor-format-menu .editor-dropdown-menu {
  93   min-width: 320px;
  94 }
  95
  96 .editor-overflow-container {
  97   display: flex;
  98 }
  99
 100 .editor-context-toolbar {
 101   position: fixed;
 102   background-color: #FFF;
 103   border: 1px solid #DDD;
 104   padding: .2rem;
 105   border-radius: 4px;
 106   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
 107   &:before {
 108     content: '';
 109     z-index: -1;
 110     display: block;
 111     width: 8px;
 112     height: 8px;
 113     position: absolute;
 114     background-color: #FFF;
 115     border-top: 1px solid #DDD;
 116     border-left: 1px solid #DDD;
 117     transform: rotate(45deg);
 118     left: 50%;
 119     margin-left: -4px;
 120     top: -5px;
 121   }
 122 }
 123
 124 // Modals
 125 .editor-modal-wrapper {
 126   position: fixed;
 127   display: flex;
 128   align-items: center;
 129   justify-content: center;
 130   z-index: 999;
 131   background-color: rgba(0, 0, 0, 0.5);
 132   width: 100%;
 133   height: 100%;
 134 }
 135 .editor-modal {
 136   background-color: #FFF;
 137   border: 1px solid #DDD;
 138   padding: 1rem;
 139   border-radius: 4px;
 140 }
 141 .editor-modal-header {
 142   display: flex;
 143   justify-content: space-between;
 144   margin-bottom: 1rem;
 145 }
 146 .editor-modal-title {
 147   font-weight: 700;
 148 }
 149
 150 // Specific UI elements
 151 .editor-color-select-row {
 152   display: flex;
 153 }
 154 .editor-color-select-option {
 155   width: 28px;
 156   height: 28px;
 157   cursor: pointer;
 158 }
 159 .editor-color-select-option:hover {
 160   border-radius: 3px;
 161   box-sizing: border-box;
 162   z-index: 3;
 163   box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.25);
 164 }
 165 .editor-table-creator-row {
 166   display: flex;
 167 }
 168 .editor-table-creator-cell {
 169   border: 1px solid #DDD;
 170   width: 15px;
 171   height: 15px;
 172   cursor: pointer;
 173   &.active {
 174     background-color: var(--editor-color-primary);
 175   }
 176 }
 177 .editor-table-creator-display {
 178   text-align: center;
 179   padding: 0.2em;
 180 }
 181
 182 // In-editor elements
 183 .editor-image-wrap {
 184   position: relative;
 185   display: inline-flex;
 186 }
 187 .editor-image-decorator {
 188   position: absolute;
 189   left: 0;
 190   right: 0;
 191   width: 100%;
 192   height: 100%;
 193   display: inline-block;
 194   &.selected {
 195     border: 1px dashed var(--editor-color-primary);
 196   }
 197 }
 198 .editor-image-decorator-handle {
 199   position: absolute;
 200   display: block;
 201   width: 10px;
 202   height: 10px;
 203   border: 2px solid var(--editor-color-primary);
 204   background-color: #FFF;
 205   user-select: none;
 206   &.nw {
 207     inset-inline-start: -5px;
 208     inset-block-start: -5px;
 209     cursor: nw-resize;
 210   }
 211   &.ne {
 212     inset-inline-end: -5px;
 213     inset-block-start: -5px;
 214     cursor: ne-resize;
 215   }
 216   &.se {
 217     inset-inline-end: -5px;
 218     inset-block-end: -5px;
 219     cursor: se-resize;
 220   }
 221   &.sw {
 222     inset-inline-start: -5px;
 223     inset-block-end: -5px;
 224     cursor: sw-resize;
 225   }
 226 }
 227
 228 .editor-table-marker {
 229   position: fixed;
 230   background-color: var(--editor-color-primary);
 231   z-index: 99;
 232   user-select: none;
 233   opacity: 0;
 234   &:hover, &.active {
 235     opacity: 0.4;
 236   }
 237 }
 238 .editor-table-marker-column {
 239   width: 4px;
 240   cursor: col-resize;
 241 }
 242 .editor-table-marker-row {
 243   height: 4px;
 244   cursor: row-resize;
 245 }
 246
 247 // Editor theme styles
 248 .editor-theme-bold {
 249   font-weight: bold;
 250 }
 251 .editor-theme-italic {
 252   font-style: italic;
 253 }
 254 .editor-theme-strikethrough {
 255   text-decoration-line: line-through;
 256 }
 257 .editor-theme-underline {
 258   text-decoration-line: underline;
 259 }
 260 .editor-theme-underline-strikethrough {
 261   text-decoration: underline line-through;
 262 }