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 // In-editor elements
  83 .editor-image-wrap {
  84   position: relative;
  85   display: inline-flex;
  86 }
  87 .editor-image-decorator {
  88   position: absolute;
  89   left: 0;
  90   right: 0;
  91   width: 100%;
  92   height: 100%;
  93   display: inline-block;
  94   &.selected {
  95     border: 1px dashed var(--editor-color-primary);
  96   }
  97 }
  98 .editor-image-decorator-handle {
  99   position: absolute;
 100   display: block;
 101   width: 10px;
 102   height: 10px;
 103   border: 2px solid var(--editor-color-primary);
 104   background-color: #FFF;
 105   user-select: none;
 106   &.nw {
 107     inset-inline-start: -5px;
 108     inset-block-start: -5px;
 109     cursor: nw-resize;
 110   }
 111   &.ne {
 112     inset-inline-end: -5px;
 113     inset-block-start: -5px;
 114     cursor: ne-resize;
 115   }
 116   &.se {
 117     inset-inline-end: -5px;
 118     inset-block-end: -5px;
 119     cursor: se-resize;
 120   }
 121   &.sw {
 122     inset-inline-start: -5px;
 123     inset-block-end: -5px;
 124     cursor: sw-resize;
 125   }
 126 }