@opensig/opendesign/es/rate/style/index.css

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>

.o-rate {
  --rate-color: var(--o-color-control1);
}

.o-rate-normal {
  --rate-color-selected: rgb(var(--o-yellow-6));
}

.o-rate-primary {
  --rate-color-selected: var(--o-color-primary1);
}

.o-rate-success {
  --rate-color-selected: var(--o-color-success1);
}

.o-rate-warning {
  --rate-color-selected: var(--o-color-warning1);
}

.o-rate-danger {
  --rate-color-selected: var(--o-color-danger1);
}

.o-rate-large {
  --rate-size: var(--o-icon_size_control-l);
  --rate-gap: 12px;
}

.o-rate-medium {
  --rate-size: var(--o-icon_size_control-xs);
  --rate-gap: 8px;
}

.o-rate-popover {
  --rate-popover-color: var(--o-color-info1);
  --rate-popover-text-size: var(--o-font_size-tip1);
  --rate-popover-text-height: var(--o-line_height-tip2);
  --rate-popover-radius: var(--o-radius_control-s);
  --rate-popover-padding: 2px 8px;
}

.o-rate {
  display: inline-flex;
  align-items: center;
  user-select: none;
  font-size: var(--rate-size);
  cursor: pointer;
}

.o-rate-readonly {
  cursor: auto;
}

.o-rate-item {
  position: relative;
}
.o-rate-item.is-half .o-rate-icon-top svg > *:nth-child(2) {
  color: var(--rate-color-selected);
}
.o-rate-item.is-full .o-rate-icon-bottom svg > * {
  color: var(--rate-color-selected);
}
.o-rate-item + .o-rate-item {
  margin-left: var(--rate-gap);
}

.o-rate-icon svg > * {
  transition: all var(--o-duration-m1) var(--o-easing-standard);
}

.o-rate-icon-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  overflow: hidden;
}
.o-rate-icon-top svg {
  color: transparent;
}

.o-rate-icon-bottom svg {
  color: transparent;
}
.o-rate-icon-bottom svg > *:nth-child(1) {
  color: var(--rate-color);
}

.o-rate-popover {
  border-radius: var(--rate-popover-radius);
}
.o-rate-popover .o-popover-body {
  color: var(--rate-popover-color);
  font-size: var(--rate-popover-text-size);
  line-height: var(--rate-popover-text-height);
  padding: var(--rate-popover-padding);
  min-width: auto;
}