apt15e/src/style/common.styl

@import 'mixin.styl'
@font-face {
  font-family: 'iconfont';
  src: url('iconfont/iconfont.woff2?t=1631676179964') format('woff2'),
       url('iconfont/iconfont.woff?t=1631676179964') format('woff'),
       url('iconfont/iconfont.ttf?t=1631676179964') format('truetype');
}
@font-face {
  font-family: "YouSheBiaoTiHei";
  src: url('font/YouSheBiaoTiHei.ttf') format('truetype');
}
@font-face {
  font-family: "SourceHanSansCN-Bold";
  src: url('font/SourceHanSansCN-Bold.otf') format('truetype');
}
@font-face {
  font-family: "SourceHanSansCN-Regular";
  src: url('font/SourceHanSansCN-Regular.otf') format('truetype');
}
@font-face {
  font-family: "SourceHanSansCN-Medium";
  src: url('font/SourceHanSansCN-Medium.otf') format('truetype');
}

::-webkit-scrollbar-track
{
	background-color: #1A2B47;
}

::-webkit-scrollbar
{
	width: 6px;
}

::-webkit-scrollbar-thumb
{
	background-color: #5291F0;
}

// 软键盘
#keyboard
  position fixed
  right 0
  bottom 0
  z-index 1000
  width 100%
  padding 0.05rem
  background-color: #ececec
  border-radius 0
  font-family: HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
  .keyboard
    .line:not(:last-child)
      margin-bottom 0.05rem
    .key
      height .36rem
      line-height .36rem
      background-color: #fff;
      border: none;
      border-bottom: 1px solid #b5b5b5;
      border-radius: 5px;
      box-shadow: 0 0 3px -1px rgba(0,0,0,.3);
      color: #000;
      font-size .2rem
      &:not(:last-child)
        margin-right 0.05rem
    .backspace
      background-color: #b3b3b3;

// animation
@keyframes scrollText {
  0% {
    transform translateX(0)
  }
  100% {
    transform translateX(-100%)
  }
}

// element css
.el-loading-spinner i
  font-size .5rem
  color #fff
.el-button
  font-size .2rem
  padding-top 0
  padding-bottom 0
  height .32rem
  line-height .32rem
.el-button--text:focus, .el-button--text:hover
  color #fff
  border-color #ed865c
  background-color #ed865c
.el-dialog
  background center / 100% 100% url(../images/new/modal_bg.png) no-repeat
.el-dialog__header
  padding .08rem .2rem .1rem
.warn_modal
  .el-dialog
    height 70vh
    overflow hidden
  .el-dialog__header
    padding .08rem .3rem 0 .3rem
  .el-dialog__body
    height calc(100% - .32rem)
    padding: 0.1rem 0.2rem 0.1rem 0.3rem;
  .el-tabs
    height calc(100% - 0.3rem)
.el-dialog__headerbtn
  top .08rem
  right .2rem
  font-size .2rem
  font-weight 700
.el-dialog__headerbtn .el-dialog__close, .el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close
  color #fff
.warn_modal .el-dialog__headerbtn
  right .3rem
.el-dialog__body
  padding .2rem .2rem .3rem .2rem
.el-dialog__title
  font-size .24rem
  font-family 'YouSheBiaoTiHei'
  line-height .24rem
  color #fff
  letter-spacing 0.02rem
.el-form-item__label
  font-size .18rem
  line-height .4rem
  color #AFBED8
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item
  margin-bottom .22rem
.el-form-item--mini .el-form-item__content, .el-form-item--mini .el-form-item__label
  line-height .4rem
.el-form-item__content
  font-size .15rem
.el-input, .el-select .el-input .el-select__caret, .el-select-dropdown__item
  font-size .18rem
  line-height .4rem
  height .4rem
.el-input__inner
  background: rgba(45,88,184,0.1);
  border: 2px solid #4980BD;
  box-sizing: border-box;
  color: #fff;
  border-radius: 0;
  padding 0 0.1rem
  height: .4rem;
  line-height: .4rem;
.el-input--mini .el-input__inner
  line-height .4rem
  height .4rem
.el-select-dropdown
  background-color rgba(7,31,62,0.95)
  border-color #4980BD
.el-popper[x-placement^=bottom] .popper__arrow,.el-popper[x-placement^=bottom] .popper__arrow::after
  border-bottom-color #4980BD
.el-select-dropdown__item
  padding 0 0.1rem
  color #fff
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover
  background-color #2D58B8
.el-select:hover .el-input__inner
  border-color: #409EFF;
.el-select-dropdown__empty
  font-size .2rem
.el-table, .el-table tr
  background-color transparent
.el-table th
  font-size .16rem
  font-family 'Source Han Sans CN'
  color #AFBED8
  background left center / 1px 81px url(../images/new/th_bg.png) repeat-x
.el-table td
  border-bottom 2px solid rgba(122,159,224,0.17)
.el-table .cell
  font-size .16rem
  font-family 'Source Han Sans CN'
  color #fff
  line-height .23rem
.el-table tr:nth-child(odd) td
  background: rgba(31,46,73,0.3);
.el-table tr:nth-child(even) td
  background: rgba(31,46,73,0.5);
.el-table--enable-row-hover .el-table__body tr:hover>td
  background: rgba(63,106,202,0.3);
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell
  background-color: #3F6ACA;
.el-tabs__header
  margin 0 0 .1rem
.el-tabs__nav-wrap::after
  background-color #192B47
.el-tabs--left .el-tabs__header.is-left
  margin-right: .1rem
.el-tabs__item
  padding 0 .2rem
  height .4rem
  line-height .4rem
  font-size .22rem
  color #c9c9c9
.el-tabs__item.is-active
  color #3CC1FF
  font-weight 700
.el-tabs__content
  height calc(100% - 0.5rem)
  overflow-y auto
.el-popover
  background rgba(7,31,62,0.95)
  min-width 150px
  border-color #4980BD
  padding .1rem
  color #606266
  line-height 1.4
  font-size .14rem
.el-message-box
  background-color rgba(13, 49, 95,0.95)
  border-color #4980BD
.el-message-box__title, .el-message-box__content
  color #fff
.el-button
  background-color #c3390c
  border-color #ed865c
  color #fff
  box-sizing border-box
.el-button--primary
  background-color #009fde
  border-color #00d9f3
.el-message-box__title
  font-size .2rem
.el-message-box__headerbtn
  font-size .2rem
.el-message-box__content
  font-size .2rem
.el-message-box__message p
  font-size .2rem
  line-height: .28rem
.el-progress-bar__inner,.el-progress-bar__outer
  border-radius 0
.el-progress__text
  font-size .2rem !important
.config_dialog .el-dialog__body
  padding 0 0.2rem 0.2rem 0.2rem
.el-form-item__error
  font-size .16rem
.el-table__empty-text
  font-size .2rem
  color #fff

// driver
.driver-popover.driverjs-theme {
  background-color: #fde047;
  color: #000;
  padding: 40px 15px 15px 15px;
}

.driver-popover.driverjs-theme .driver-popover-title {
  font-size: 20px;
}

.driver-popover.driverjs-theme .driver-popover-title,
.driver-popover.driverjs-theme .driver-popover-description,
.driver-popover.driverjs-theme .driver-popover-progress-text {
  color: #000;
  font-size: 22px;
}

.driver-popover.driverjs-theme button {
  flex: 1;
  text-align: center;
  background-color: #000;
  color: #ffffff;
  border: 2px solid #000;
  text-shadow: none;
  font-size: 20px;
  padding: 5px 8px;
  border-radius: 6px;
}
.driver-popover.driverjs-theme button+button {
  margin-left: 14px;
}

.driver-popover.driverjs-theme button:hover {
  background-color: #000;
  color: #ffffff;
}

.driver-popover.driverjs-theme .driver-popover-navigation-btns {
  justify-content: space-between;
  gap: 3px;
  font-size: 20px;
}

.driver-popover.driverjs-theme .driver-popover-close-btn {
  font-size: 20px;
  color: #000;
  background-color: transparent;
  border: 0;
}

.driver-popover.driverjs-theme .driver-popover-close-btn:hover {
  opacity: .5;
}
.driver-popover-footer button:hover, .driver-popover-footer button:focus {
  background-color: #000 !important;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {
  border-left-color: #fde047;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {
  border-right-color: #fde047;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {
  border-top-color: #fde047;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
  border-bottom-color: #fde047;
}
.driver-popover-footer  .driver-popover-next-btn {
  animation: scale 1s infinite;
}
@keyframes scale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

// button
.button_control
  _wh(100%, 0.36rem)
  max-width 1.4rem
  background center url(../images/new/button.png) no-repeat
  background-size 100% 100%
  p
    _font(.22rem, 1, #EFF2FF,,center)
    font-family: 'YouSheBiaoTiHei'
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(49,190,255,0.9) 0%, rgba(239,252,254,1) 40%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
.button_control_disabled
  background center url(../images/new/button_disabled.png) no-repeat
  background-size 100% 100%
.button_control_gray
  background center url(../images/new/button_gray.png) no-repeat
  background-size 100% 100%

// main
.body-container
  background center / 100% 100% url(../images/new/bg.jpg) no-repeat
.main-conatiner
  width 100%
  height calc(100% - .48rem)
  padding .4rem 0 .6rem 0
.page_container
  _wh(96%, 100%)
  padding .09rem
  margin 0 auto
.map_tools
  position absolute
  top 0
  right 0
.zoom_data
  width .7rem
  font-size .16rem
  height .44rem
  line-height .44rem
  color #00d9f3
  text-align center
  border-left 1px solid #009fde
  border-right 1px solid #009fde
  box-sizing border-box
.zoom_btn
  display block
  width .7rem
  margin 0 !important
  height .44rem
  line-height .44rem