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