canvas-editor_fex765/src/style.css

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #F2F4F7;
}

ul {
  list-style: none;
}

.menu {
  width: 100%;
  height: 60px;
  top: 0;
  z-index: 9;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F2F4F7;
  box-shadow: 0 2px 4px 0 transparent;
}

.menu-divider {
  width: 1px;
  height: 16px;
  margin: 0 6px;
  display: inline-block;
  background-color: #cfd2d8;
}

.menu-item {
  height: 24px;
  display: flex;
  align-items: center;
  position: relative;
}

.menu-item>div {
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 6px;
}

.menu-item>div:hover {
  background: rgba(25, 55, 88, .04);
}

.menu-item>div.active {
  background: rgba(25, 55, 88, .08);
}

.menu-item i {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.menu-item>div span {
  width: 16px;
  height: 3px;
  display: inline-block;
  border: 1px solid #e2e6ed;
}

.menu-item .select {
  border: none;
  font-size: 12px;
  line-height: 24px;
  user-select: none;
}

.menu-item .select::after {
  position: absolute;
  content: "";
  top: 11px;
  width: 0;
  height: 0;
  right: 2px;
  border-color: #767c85 transparent transparent;
  border-style: solid solid none;
  border-width: 3px 3px 0;
}

.menu-item .options {
  width: 70px;
  position: absolute;
  left: 0;
  top: 25px;
  padding: 10px;
  background: #fff;
  font-size: 14px;
  box-shadow: 0 2px 12px 0 rgb(56 56 56 / 20%);
  border: 1px solid #e2e6ed;
  border-radius: 2px;
  display: none;
}

.menu-item .options.visible {
  display: block;
}

.menu-item .options li {
  padding: 5px;
  margin: 5px 0;
  user-select: none;
  transition: all .3s;
}

.menu-item .options li:hover {
  background-color: #ebecef;
}

.menu-item .options li.active {
  background-color: #e2e6ed;
}

.menu-item .menu-item__font {
  width: 65px;
  position: relative;
}

.menu-item__font .select {
  width: 100%;
  height: 100%;
}

.menu-item__undo.no-allow,
.menu-item__redo.no-allow {
  color: #c0c4cc;
  cursor: not-allowed;
  opacity: 0.4;
}

.menu-item__undo i {
  background-image: url('./assets/images/undo.svg');
}

.menu-item__redo i {
  background-image: url('./assets/images/redo.svg');
}

.menu-item__painter i {
  background-image: url('./assets/images/painter.svg');
}

.menu-item__format i {
  background-image: url('./assets/images/format.svg');
}

.menu-item__size-add i {
  background-image: url('./assets/images/size-add.svg');
}

.menu-item__size-minus i {
  background-image: url('./assets/images/size-minus.svg');
}

.menu-item__bold i {
  background-image: url('./assets/images/bold.svg');
}

.menu-item__italic i {
  background-image: url('./assets/images/italic.svg');
}

.menu-item__underline i {
  background-image: url('./assets/images/underline.svg');
}

.menu-item__strikeout i {
  background-image: url('./assets/images/strikeout.svg');
}

.menu-item__color,
.menu-item__highlight {
  display: flex;
  flex-direction: column;
}

.menu-item__color #color,
.menu-item__highlight #highlight {
  width: 1px;
  height: 1px;
  visibility: hidden;
  outline: none;
  appearance: none;
}

.menu-item__color i {
  background-image: url('./assets/images/color.svg');
}

.menu-item__color span {
  background-color: #000000;
}

.menu-item__highlight i {
  background-image: url('./assets/images/highlight.svg');
}

.menu-item__highlight span {
  background-color: #ffff00;
}

.menu-item__left i {
  background-image: url('./assets/images/left.svg');
}

.menu-item__center i {
  background-image: url('./assets/images/center.svg');
}

.menu-item__right i {
  background-image: url('./assets/images/right.svg');
}

.menu-item__row-margin {
  position: relative;
}

.menu-item__row-margin i {
  background-image: url('./assets/images/row-margin.svg');
}

.menu-item__search {
  position: relative;
}

.menu-item__search i {
  background-image: url('./assets/images/search.svg');
}

.menu-item .menu-item__search__collapse {
  box-sizing: border-box;
  position: absolute;
  display: none;
  z-index: 99;
  top: 25px;
  left: 0;
  box-shadow: 0px 5px 5px #e3dfdf;
}

.menu-item .menu-item__search__collapse__search {
  width: 205px;
  height: 36px;
  padding: 0 5px;
  line-height: 36px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
}

.menu-item .menu-item__search__collapse__search input {
  height: 27px;
  appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #ebebeb;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  line-height: 27px;
  outline: none;
  padding: 0 5px;
}

.menu-item .menu-item__search__collapse__search span {
  height: 100%;
  color: #dcdfe6;
  font-size: 25px;
  display: inline-block;
  border: 0;
}

.menu-item__print i {
  background-image: url('./assets/images/print.svg');
}

.editor {
  width: 794px;
  height: 1123px;
  margin: 80px auto;
  position: relative;
  background-color: #ffffff;
  box-shadow: rgb(158 161 165 / 40%) 0px 2px 12px 0px;
}