npm_ui_monster/dist/index.css

Copy paste in root file (index.js): import "npm_ui_monster/dist/index.css"

/* src/index.css */
.vertexButton {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  transition:
    box-shadow 250ms linear,
    background-color 250ms linear,
    color 250ms linear;
  padding: var(--padding);
  border-radius: var(--borderRadius);
  font-family: var(--family);
  font-size: var(--fsize);
  color: var(--tcolor);
  gap: var(--gap);
  width: var(--width);
  height: var(--height);
  background-color: var(--main-bg-color);
  line-height: var(--lineHeight);
  font-weight: var(--fontWeight);
  border: var(--border);
}
.vertexButton .vertexButtonLeftImg {
  width: 12px;
  height: 12px;
}
.vertexButton .vertexButtonRightImg {
  width: 12px;
  height: 12px;
}
.vertexButton:hover {
  background-color: var(--hover-bg-color);
}
.vertexButton:focus {
  outline: none;
  background-color: var(--focus-bg-color);
  box-shadow: 0px 0px 0px 3px rgb(204, 177, 255);
}
.vertexButton:active {
  background-color: var(--active-bg-color);
}
.vertexTextButton {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  transition:
    box-shadow 250ms linear,
    background-color 250ms linear,
    color 250ms linear;
  padding: var(--padding);
  border-radius: var(--borderRadius);
  font-family: var(--family);
  font-size: var(--fsize);
  color: var(--tcolor);
  gap: var(--gap);
  width: var(--width);
  height: var(--height);
  background-color: var(--main-bg-color);
  line-height: var(--lineHeight);
  font-weight: var(--fontWeight);
  border: var(--border);
}
.vertexTextButton .vertexTextButtonLeftImg {
  width: 16px;
  height: 16px;
}
.vertexTextButton .vertexTextButtonRightImg {
  width: 16px;
  height: 16px;
}
.vertexTextButton:hover {
  background-color: var(--hover-bg-color);
  text-decoration: underline;
  color: var(--hover-tcolor);
}
.vertexTextButton:focus {
  outline: none;
  background-color: var(--focus-bg-color);
  box-shadow: 0px 0px 0px 3px rgb(204, 177, 255);
}
.vertexTextButton:active {
  background-color: var(--active-bg-color);
  color: var(--pressed-tcolor);
}
.vertexIcon {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: var(--padding);
  border-radius: var(--borderRadius);
  font-family: var(--family);
  font-size: var(--fsize);
  color: var(--tcolor);
  gap: var(--gap);
  width: var(--width);
  height: var(--height);
  background-color: var(--main-bg-color);
  line-height: var(--lineHeight);
  font-weight: var(--fontWeight);
  border: var(--border);
}
.vertexIcon .vertexIconImg {
  width: 12px;
  height: 12px;
}
.vertexIcon:hover {
  background-color: var(--hover-bg-color);
}
.vertexIcon:focus {
  outline: none;
  background-color: var(--focus-bg-color);
  box-shadow: 0px 0px 0px 3px rgb(204, 177, 255);
}
.vertexIcon:active {
  background-color: var(--active-bg-color);
}