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