dage-sxk/miniprogram_npm/mini-color-picker/color-picker.wxss

.dialog {
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;
}

.dialog_show {
  visibility: visible;
  opacity: 1;
}

.target {
  height: 600rpx;
  width: 600rpx;
  margin: 0 auto;
  background-image: url(https://houseoss.4dkankan.com/project/DEMO/color_picker_mask.png);
  overflow: hidden;
  border: 0.5px solid rgba(0, 0, 0, 0.5);
}

.ribbon {
  background: -webkit-linear-gradient(left, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
  width: 600rpx;
  margin: 40rpx auto;
}

@font-face {
  font-family: 'iconfont';
  src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
  font-weight: normal;
  font-style: normal;
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 28px;
  line-height: 28px;
  height: 28px;
  width: 28px;
  color: white;
  text-align: center;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-ios-locate-outline:before {
  content: "\ea49";
}

.weui-mask {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}

.weui-actionsheet {
  position: fixed;
  left: 0;
  bottom: 0;
  transform: translate(0, 100%);
  backface-visibility: hidden;
  z-index: 5000;
  width: 100%;
  background-color: #fff;
  transition: transform 0.3s;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  overflow: hidden;
  padding-bottom: calc(env(safe-area-inset-bottom));
}

.weui-actionsheet_toggle {
  transform: translate(0, 0);
}

.weui-half-screen-dialog__hd {
  padding: 0 calc(24px + env(safe-area-inset-right));
  font-size: 8px;
  height: 8em;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.weui-half-screen-dialog__hd .weui-icon-btn {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.weui-half-screen-dialog__hd__side {
  position: relative;
  left: -8px;
}

.weui-half-screen-dialog__hd__main {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}

.weui-half-screen-dialog__hd__side+.weui-half-screen-dialog__hd__main {
  text-align: center;
  padding: 0 40px;
}

.weui-half-screen-dialog__hd__main+.weui-half-screen-dialog__hd__side {
  right: -8px;
  left: auto;
}

.weui-half-screen-dialog__hd__main+.weui-half-screen-dialog__hd__side .weui-icon-btn {
  right: 0;
}

.weui-half-screen-dialog__title {
  display: block;
  color: rgba(0, 0, 0, 0.9);
  font-weight: 700;
  font-size: 15px;
}

.weui-half-screen-dialog__subtitle {
  display: block;
  color: rgba(0, 0, 0, 0.5);
  font-size: 10px;
}

.weui-icon-close-thin {
  -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.25%2010.693L6.057%204.5%205%205.557l6.193%206.193L5%2017.943%206.057%2019l6.193-6.193L18.443%2019l1.057-1.057-6.193-6.193L19.5%205.557%2018.443%204.5z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
  mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.25%2010.693L6.057%204.5%205%205.557l6.193%206.193L5%2017.943%206.057%2019l6.193-6.193L18.443%2019l1.057-1.057-6.193-6.193L19.5%205.557%2018.443%204.5z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  mask-size: 100%;
  background-color: currentColor;
}