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
  33 // Containers
  34 .editor-dropdown-menu-container {
  35     position: relative;
  36 }
  37 .editor-dropdown-menu {
  38   position: absolute;
  39   background-color: #FFF;
  40   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15);
  41   z-index: 99;
  42   min-width: 120px;
  43 }
  44 .editor-menu-list {
  45   display: flex;
  46   flex-direction: column;
  47 }
  48 .editor-menu-list > .editor-button {
  49   border-bottom: 0;
  50   text-align: start;
  51 }
  52
  53 .editor-format-menu .editor-dropdown-menu {
  54   min-width: 320px;
  55 }
  56
  57 // Modals
  58 .editor-modal-wrapper {
  59   position: fixed;
  60   display: flex;
  61   align-items: center;
  62   justify-content: center;
  63   z-index: 999;
  64   background-color: rgba(0, 0, 0, 0.5);
  65   width: 100%;
  66   height: 100%;
  67 }
  68 .editor-modal {
  69   background-color: #FFF;
  70   border: 1px solid #DDD;
  71   padding: 1rem;
  72   border-radius: 4px;
  73 }
  74 .editor-modal-header {
  75   display: flex;
  76   justify-content: space-between;
  77   margin-bottom: 1rem;
  78 }
  79 .editor-modal-title {
  80   font-weight: 700;
  81 }
  82
  83 // Specific UI elements
  84 .editor-color-select-row {
  85   display: flex;
  86 }
  87 .editor-color-select-option {
  88   width: 28px;
  89   height: 28px;
  90   cursor: pointer;
  91 }
  92 .editor-color-select-option:hover {
  93   border-radius: 3px;
  94   box-sizing: border-box;
  95   z-index: 3;
  96   box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.25);
  97 }
  98
  99 // In-editor elements
 100 .editor-image-wrap {
 101   position: relative;
 102   display: inline-flex;
 103 }
 104 .editor-image-decorator {
 105   position: absolute;
 106   left: 0;
 107   right: 0;
 108   width: 100%;
 109   height: 100%;
 110   display: inline-block;
 111   &.selected {
 112     border: 1px dashed var(--editor-color-primary);
 113   }
 114 }
 115 .editor-image-decorator-handle {
 116   position: absolute;
 117   display: block;
 118   width: 10px;
 119   height: 10px;
 120   border: 2px solid var(--editor-color-primary);
 121   background-color: #FFF;
 122   user-select: none;
 123   &.nw {
 124     inset-inline-start: -5px;
 125     inset-block-start: -5px;
 126     cursor: nw-resize;
 127   }
 128   &.ne {
 129     inset-inline-end: -5px;
 130     inset-block-start: -5px;
 131     cursor: ne-resize;
 132   }
 133   &.se {
 134     inset-inline-end: -5px;
 135     inset-block-end: -5px;
 136     cursor: se-resize;
 137   }
 138   &.sw {
 139     inset-inline-start: -5px;
 140     inset-block-end: -5px;
 141     cursor: sw-resize;
 142   }
 143 }