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
 104 // In-editor elements
 105 .editor-image-wrap {
 106   position: relative;
 107   display: inline-flex;
 108 }
 109 .editor-image-decorator {
 110   position: absolute;
 111   left: 0;
 112   right: 0;
 113   width: 100%;
 114   height: 100%;
 115   display: inline-block;
 116   &.selected {
 117     border: 1px dashed var(--editor-color-primary);
 118   }
 119 }
 120 .editor-image-decorator-handle {
 121   position: absolute;
 122   display: block;
 123   width: 10px;
 124   height: 10px;
 125   border: 2px solid var(--editor-color-primary);
 126   background-color: #FFF;
 127   user-select: none;
 128   &.nw {
 129     inset-inline-start: -5px;
 130     inset-block-start: -5px;
 131     cursor: nw-resize;
 132   }
 133   &.ne {
 134     inset-inline-end: -5px;
 135     inset-block-start: -5px;
 136     cursor: ne-resize;
 137   }
 138   &.se {
 139     inset-inline-end: -5px;
 140     inset-block-end: -5px;
 141     cursor: se-resize;
 142   }
 143   &.sw {
 144     inset-inline-start: -5px;
 145     inset-block-end: -5px;
 146     cursor: sw-resize;
 147   }
 148 }