yos_web/buildAnnexation/ZB/css/cxcalendar.css

/*!
 * cxCalendar
 * ------------------------------ */
.cxcalendar {
  --cxcalendar-bg: #fff;
  --cxcalendar-border: #ccc;
  --cxcalendar-item-bg: #eee;
  --cxcalendar-text-color: #333;
  --cxcalendar-days-color: #666;
  --cxcalendar-sat-color: #4a89dc;
  --cxcalendar-sun-color: #da4453;
  --cxcalendar-other-color: #ccc;
  --cxcalendar-note-color: #aaa;
  --cxcalendar-now-bg: #f3f3f3;
  --cxcalendar-set-bg: #8cc152;
  --cxcalendar-range-bg: #dceffc;
  --cxcalendar-range-set-bg: #70a9ce;
  --cxcalendar-btn-color: #fff;
  --cxcalendar-btn-bg: #666;
  --cxcalendar-confirm-bg: #4a89dc;
  --cxcalendar-gap-out: 8px;
  --cxcalendar-text-size: 14px;
  --cxcalendar-title-size: 16px;
  --cxcalendar-unit-size: 10px;
  --cxcalendar-btn-size: 12px;
  position: fixed;
  z-index: 10000;
  top: -999px;
  left: -999px;
  width: 266px;
  border: 1px solid var(--cxcalendar-border);
  border-radius: 3px;
  background-color: var(--cxcalendar-bg);
  box-shadow: 1px 2px 3px rgba(0,0,0,.2);
  color: var(--cxcalendar-text-color);
  font-size: var(--cxcalendar-text-size);
  opacity: 0;
  transform: translate(0,5%);
  transition-property: opacity,transform;
  transition-duration: .3s;
  -webkit-user-select: none;
  user-select: none
}
.cxcalendar_mask {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0)
}
.cxcalendar.show {
  opacity: 1;
  transform: translate(0,0)
}
.cxcalendar.show + .cxcalendar_mask {
  display: block
}
.cxcalendar_hd {
  position: relative;
  height: 32px;
  padding: var(--cxcalendar-gap-out);
  padding-bottom: 0;
  font-weight: 700;
  font-size: var(--cxcalendar-title-size);
  line-height: 32px;
  text-align: center
}
.cxcalendar_hd .next,
.cxcalendar_hd .prev {
  position: absolute;
  top: var(--cxcalendar-gap-out);
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--cxcalendar-text-color);
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  outline: 0;
  transition-property: border-color,background-color;
  transition-duration: .2s
}
.cxcalendar_hd .prev {
  left: var(--cxcalendar-gap-out)
}
.cxcalendar_hd .next {
  right: var(--cxcalendar-gap-out)
}
.cxcalendar_hd .next:before,
.cxcalendar_hd .prev:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin: -6px 0 0 -5px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent
}
.cxcalendar_hd .prev:before {
  border-right: 10px solid currentColor
}
.cxcalendar_hd .next:before {
  border-left: 10px solid currentColor
}
.cxcalendar_bd .times select,
.cxcalendar_hd select {
  display: inline-block;
  box-sizing: border-box;
  height: 32px;
  margin: 0;
  padding: 0 .5em;
  border: 1px solid transparent;
  border-radius: 3px;
  background: 0 0;
  color: var(--cxcalendar-text-color);
  font-weight: 700;
  font-size: var(--cxcalendar-title-size);
  line-height: 32px;
  text-align: center;
  vertical-align: top;
  outline: 0;
  cursor: pointer;
  transition-property: border-color,background-color;
  transition-duration: .2s;
  -webkit-appearance: none;
  appearance: none
}
.cxcalendar_hd em {
  display: inline-block;
  padding: 0 1px;
  font-style: normal
}
.cxcalendar_hd .year + em:after {
  content: '年'
}
.cxcalendar_hd .month + em:after {
  content: '月'
}
.cxcalendar_hd .fill {
  font-weight: 400;
  font-size: var(--cxcalendar-text-size)
}
.cxcalendar_hd .fill span {
  padding: 0 4px
}
.cxcalendar_bd .times select:hover,
.cxcalendar_hd .next:hover,
.cxcalendar_hd .prev:hover,
.cxcalendar_hd select:hover {
  border-color: var(--cxcalendar-border);
  background: var(--cxcalendar-item-bg)
}
.cxcalendar_bd {
  position: relative;
  padding: var(--cxcalendar-gap-out);
  padding-top: 0;
  z-index: 1
}
.cxcalendar_bd ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--cxcalendar-days-color);
  line-height: 32px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start
}
.cxcalendar_bd ul li {
  box-sizing: border-box;
  position: relative;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--cxcalendar-bg);
  border-radius: 5px;
  cursor: pointer;
  flex: none;
  transition-property: background-color,color;
  transition-duration: .2s
}
.cxcalendar_bd ul li.del,
.cxcalendar_bd ul li.week {
  cursor: default
}
.cxcalendar_bd ul li.del,
.cxcalendar_bd ul li.del.holiday,
.cxcalendar_bd ul li.del.now,
.cxcalendar_bd ul li.del.sat,
.cxcalendar_bd ul li.del.sun {
  color: var(--cxcalendar-other-color);
  text-decoration: line-through
}
.cxcalendar_bd ul li.now {
  background-color: var(--cxcalendar-now-bg)
}
.cxcalendar_bd ul li.del:hover,
.cxcalendar_bd ul li.now.del,
.cxcalendar_bd ul li.week:hover {
  background: 0 0
}
.cxcalendar_bd ul li:hover {
  background-color: var(--cxcalendar-item-bg)
}
.cxcalendar_bd ul li.selected,
.cxcalendar_bd ul li.selected.holiday,
.cxcalendar_bd ul li.selected.other,
.cxcalendar_bd ul li.selected.sat,
.cxcalendar_bd ul li.selected.sun,
.cxcalendar_bd ul li.selected:hover {
  background-color: var(--cxcalendar-set-bg);
  color: var(--cxcalendar-btn-color)
}
.cxcalendar_bd ul li.del:after,
.cxcalendar_bd ul li.selected:after {
  color: inherit
}
.cxcalendar_bd .days li {
  flex-basis: 14%
}
.cxcalendar_bd .days .sat {
  color: var(--cxcalendar-sat-color)
}
.cxcalendar_bd .days .holiday,
.cxcalendar_bd .days .sun {
  color: var(--cxcalendar-sun-color)
}
.cxcalendar_bd .days .other {
  color: var(--cxcalendar-other-color)
}
.cxcalendar_bd .days li.week.sat,
.cxcalendar_bd .days li.week.sun {
  color: inherit
}
.cxcalendar_bd .months li {
  flex-basis: 33%
}
.cxcalendar_bd .years li {
  flex-basis: 25%
}
.cxcalendar_bd .months li:after,
.cxcalendar_bd .years li:after {
  content: '月';
  display: inline-block;
  margin-left: 2px;
  color: var(--cxcalendar-note-color);
  font-size: var(--cxcalendar-unit-size);
  vertical-align: top
}
.cxcalendar_bd .years li:after {
  content: '年'
}
.cxcalendar_bd .times {
  position: relative;
  margin-top: var(--cxcalendar-gap-out);
  padding-top: var(--cxcalendar-gap-out);
  color: var(--cxcalendar-note-color);
  line-height: 32px;
  display: flex
}
.cxcalendar_bd .times:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,.1) 15%,rgba(0,0,0,.1) 85%,rgba(0,0,0,0) 100%)
}
.cxcalendar_bd .times:only-child:before {
  display: none
}
.cxcalendar_bd .times section {
  flex: 1;
  display: flex;
  justify-content: center
}
.cxcalendar_bd .times section:before {
  content: '选择时间';
  margin-right: .5em
}
.cxcalendar_bd .times select {
  font-weight: 400;
  font-size: var(--cxcalendar-text-size)
}
.cxcalendar_bd .times i {
  padding: 0 1px;
  font-style: normal
}
.cxcalendar_bd .times i:after {
  content: ':'
}
.cxcalendar_acts {
  padding: var(--cxcalendar-gap-out) 0;
  border-top: 1px solid var(--cxcalendar-border);
  border-radius: 0 0 3px 3px;
  background-color: var(--cxcalendar-item-bg);
  font-size: var(--cxcalendar-btn-size);
  line-height: 30px;
  display: flex;
  justify-content: center
}
.cxcalendar_acts a {
  padding: 0 1em;
  border-radius: 3px;
  background-color: var(--cxcalendar-btn-bg);
  color: var(--cxcalendar-btn-color);
  text-decoration: none;
  text-align: center;
  transition-property: opacity;
  transition-duration: .2s
}
.cxcalendar_acts a + a {
  margin-left: 1em
}
.cxcalendar_acts a:hover {
  color: var(--cxcalendar-btn-color);
  opacity: .8
}
.cxcalendar_acts .today:before {
  content: '今天'
}
.cxcalendar_acts .clear:before {
  content: '清除'
}
.cxcalendar_acts .confirm {
  background-color: var(--cxcalendar-confirm-bg)
}
.cxcalendar_acts .confirm:before {
  content: '确定'
}
.cxcalendar.m_datetime .cxcalendar_acts .today:before,
.cxcalendar.m_time .cxcalendar_acts .today:before {
  content: '现在'
}
.cxcalendar.m_year .cxcalendar_acts .today:before {
  content: '今年'
}
.cxcalendar.m_month .cxcalendar_acts .today:before {
  content: '本月'
}
.cxcalendar.at_end .cxcalendar_hd .next,
.cxcalendar.at_start .cxcalendar_hd .prev {
  color: var(--cxcalendar-other-color);
  cursor: default
}
.cxcalendar.at_end .cxcalendar_hd .next:hover,
.cxcalendar.at_start .cxcalendar_hd .prev:hover {
  border-color: transparent;
  background: 0 0
}
.cxcalendar.range {
  width: 524px
}
.cxcalendar.range .cxcalendar_bd .days,
.cxcalendar.range .cxcalendar_bd .months,
.cxcalendar.range .cxcalendar_bd .years,
.cxcalendar.range .cxcalendar_hd {
  display: flex
}
.cxcalendar.range .cxcalendar_bd ul,
.cxcalendar.range .cxcalendar_hd section {
  flex: 1
}
.cxcalendar.range .cxcalendar_bd ul + ul {
  margin-left: var(--cxcalendar-gap-out)
}
.cxcalendar.range .cxcalendar_bd ul + ul:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  width: 1px;
  background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.1) 35%,rgba(0,0,0,.1) 65%,rgba(0,0,0,0) 100%)
}
.cxcalendar.range .cxcalendar_bd ul li.other {
  visibility: hidden
}
.cxcalendar.range .cxcalendar_bd ul li.selected {
  background-color: var(--cxcalendar-range-bg);
  color: var(--cxcalendar-days-color)
}
.cxcalendar.range .cxcalendar_bd ul li.selected.end,
.cxcalendar.range .cxcalendar_bd ul li.selected.start {
  background-color: var(--cxcalendar-range-set-bg);
  color: var(--cxcalendar-btn-color)
}
.cxcalendar.range .cxcalendar_bd .times section:first-child:before {
  content: '开始时间'
}
.cxcalendar.range .cxcalendar_bd .times section:nth-child(2):before {
  content: '结束时间'
}
.cxcalendar.fixed {
  position: fixed;
  top: auto;
  bottom: -500px;
  left: 0;
  right: 0;
  width: auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  transform: none;
  transition-property: bottom
}
.cxcalendar.fixed + .cxcalendar_mask {
  display: block;
  background-color: rgba(0,0,0,0);
  transform: translate(0,-100%);
  transition-property: background-color,transform;
  transition-duration: .3s,0s;
  transition-delay: 0s,0.3s
}
.cxcalendar.fixed.show {
  bottom: 0
}
.cxcalendar.fixed.show + .cxcalendar_mask {
  background-color: rgba(0,0,0,.4);
  transform: translate(0,0);
  transition-delay: 0s
}
.cxcalendar.fixed .cxcalendar_bd ul:nth-child(2),
.cxcalendar.fixed .cxcalendar_hd section:nth-child(2) {
  display: none
}
.cxcalendar.fixed .cxcalendar_bd .times {
  display: block
}
.cxcalendar.fixed .cxcalendar_hd .prev {
  left: 24px
}
.cxcalendar.fixed .cxcalendar_hd .next {
  right: 24px
}
.cxcalendar.fixed .cxcalendar_bd {
  padding-bottom: 20px
}
.cxcalendar.fixed .cxcalendar_bd ul {
  line-height: 36px
}
.cxcalendar.fixed .cxcalendar_bd ul li {
  height: 40px
}
.cxcalendar.fixed .cxcalendar_bd .times {
  padding-top: 10px;
  padding-bottom: 10px
}
.cxcalendar.fixed .cxcalendar_acts {
  position: absolute;
  top: auto;
  left: auto;
  bottom: 100%;
  right: 10px;
  width: auto;
  padding: 0;
  border: none;
  background: 0 0;
  line-height: 32px;
  display: flex
}
.cxcalendar.fixed .cxcalendar_acts a {
  border-radius: 3px 3px 0 0
}
.cxcalendar.has_weeknum .cxcalendar_bd .days ul {
  padding-left: 24px
}
.cxcalendar.has_weeknum .cxcalendar_bd .days li[data-week-num]:before {
  content: attr(data-week-num);
  position: absolute;
  top: 50%;
  left: -16px;
  width: 16px;
  margin-top: -8px;
  margin-left: -8px;
  border-radius: 3px;
  background-color: rgba(0,0,0,.1);
  color: #fff;
  font-size: var(--cxcalendar-unit-size);
  line-height: 16px;
  text-align: center;
  pointer-events: none
}
.cxcalendar.not_secs .times .mint + i,
.cxcalendar.not_secs .times .secs {
  display: none
}
.cxcalendar.not_acts .cxcalendar_acts {
  display: none
}
.cxcalendar.en .cxcalendar_bd .months li:after,
.cxcalendar.en .cxcalendar_bd .years li:after,
.cxcalendar.en .cxcalendar_hd .month + em:after,
.cxcalendar.en .cxcalendar_hd .year + em:after {
  content: ''
}
.cxcalendar.en .cxcalendar_bd .times section:before {
  content: 'Time:'
}
.cxcalendar.en .cxcalendar_acts .today:before {
  content: 'Now'
}
.cxcalendar.en .cxcalendar_acts .clear:before {
  content: 'Clear'
}
.cxcalendar.en .cxcalendar_acts .confirm:before {
  content: 'Ok'
}
.cxcalendar.en.range .cxcalendar_bd .times section:first-child:before {
  content: 'Start Time:'
}
.cxcalendar.en.range .cxcalendar_bd .times section:nth-child(2):before {
  content: 'End Time:'
}
@media (prefers-color-scheme:dark) {
  .cxcalendar {
    --cxcalendar-bg: #222;
    --cxcalendar-item-bg: #333;
    --cxcalendar-border: #444;
    --cxcalendar-text-color: #eee;
    --cxcalendar-days-color: #ddd;
    --cxcalendar-other-color: #555;
    --cxcalendar-note-color: #888;
    --cxcalendar-now-bg: #333;
    --cxcalendar-set-bg: #8cc152;
    --cxcalendar-range-bg: #29485d;
    --cxcalendar-range-set-bg: #70a9ce;
    --cxcalendar-btn-color: #333;
    --cxcalendar-btn-bg: #ccc;
    --cxcalendar-confirm-bg: #4a89dc
  }
  .cxcalendar.range .cxcalendar_bd ul li.selected.end,
  .cxcalendar.range .cxcalendar_bd ul li.selected.start,
  .cxcalendar_acts .confirm,
  .cxcalendar_acts .confirm:hover,
  .cxcalendar_bd ul li.selected,
  .cxcalendar_bd ul li.selected.holiday,
  .cxcalendar_bd ul li.selected.other,
  .cxcalendar_bd ul li.selected.sat,
  .cxcalendar_bd ul li.selected.sun,
  .cxcalendar_bd ul li.selected:hover {
    color: #fff
  }
  .cxcalendar_bd .times:before {
    background: linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.1) 15%,rgba(255,255,255,.1) 85%,rgba(255,255,255,0) 100%)
  }
  .cxcalendar.range .cxcalendar_bd ul + ul:before {
    background: linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,.1) 35%,rgba(255,255,255,.1) 65%,rgba(255,255,255,0) 100%)
  }
  .cxcalendar.has_weeknum .cxcalendar_bd .days li[data-week-num]:before {
    background-color: rgba(255,255,255,.1);
    color: #888
  }
}
@media (min-width:640px) {
  .cxcalendar.fixed .cxcalendar_bd ul:nth-child(2),
  .cxcalendar.fixed .cxcalendar_hd section:nth-child(2) {
    display: inherit
  }
  .cxcalendar.fixed .cxcalendar_bd .times {
    display: flex
  }
}
@media (width:375px) and (height:812px),
(width:414px) and (height:896px),
(width:390px) and (height:844px),
(width:428px) and (height:926px) {
  .cxcalendar.fixed .cxcalendar_bd {
    padding-bottom: env(safe-area-inset-bottom)
  }
}