@yeepay/virtual-keyboard/style/mobile.less

YeePay Virtual Keyboard Component

.yee-virtual-keyboard {
  position: fixed;
  left: 0px;
  z-index: 10;
  bottom: 0px;
  width: 100vw;
  min-width: 320px;
  // min-height: 300px;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0 auto;
  background: rgba(255,255,255);
  box-shadow: 0 -2px 16px rgba(0,0,0,0.08);
  border-radius: 8px 8px 0 0;
  padding: 12px 8px 16px 8px;
  box-sizing: border-box;
  user-select: none;
  transition: transform 0.18s cubic-bezier(.4,0,.2,1);
  //安全区域
  padding-bottom: calc(constant(safe-area-inset-bottom) + 10px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
  font-size: 16px;
  border-radius: 16px 16px 0 0;
}
.yee-keyboard-header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 4px 8px 10px 8px;
  font-size: 14px;
  box-sizing: border-box;
  position: relative;

  .keyboard-header-left {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #e53935;
  }
  .keyboard-header-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    .logo {
      width: 24px;
      height: 24px;
    }
    .title {
      font-size: 14px;
      margin-left: 10px;
    }
  }
  .keyboard-header-right {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #22ac38;
  }

}
.yee-keyboard-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  .yee-keyboard-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
    gap: 4px;
  }

  .yee-keyboard-row:nth-child(3) {
    grid-template-columns: 1fr repeat(auto-fit, minmax(30px, 1fr)) 1fr;
  }

  .row-space {
    // grid 布局， 一行 三列
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    gap: 6px;
    .yee-space {
      grid-column-start: 1;
      grid-column-end: 3;
      // grid-column: span 1;

    }
  }
}


.yee-key {
  flex: 1 1 0;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  background: #fff;
  font-size: 18px;
  color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  transition: background 0.15s, transform 0.15s, color 0.15s;
  outline: none;
  position: relative;
  font-weight: 500;
}
// 按钮点击效果

.yee-key:active {
  background: #08c160d6;
  transform: scale(0.96);
}
.yee-key-caps {
  font-weight: bold;
  color: #1976d2;
}
.yee-key-disabled {
  background: #f5f5f5;
  color: #bbb;
  pointer-events: none;
}


/* 特殊按键样式 */
.key-delete {
  background: #ccc;
  color: #e53935;
  font-weight: bold;

  .delete-btn{
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.key-delete:active{
  background: #ddd;
}

.key-shift {
  background: #f5f7fa;
  color: #1976d2;

}
.key-shift:active {
  background: #e3eafc;
}
.key-mode {
  background: #f5f7fa;
  color: #1976d2;
  font-size: 14px;
}
.key-mode:active {
  background: #e3eafc;
}
.key-space {
 display: flex;
 justify-content: center;
 align-items: center;
  flex: 1 1 0;
  max-width: 100%;
}
.key-space:active {
  background: #e0e0e0;
}
.key-confirm {
  background: #f5f7fa;
  color: #888;

}
.key-confirm:active {
  background: #e0e0e0;
}
/* 响应式字体和尺寸 */
@media (max-width: 375px) {
  .yee-virtual-keyboard {
    max-width: 375px;
    padding: 8px 2px 10px 2px;
  }
}
@media (max-width: 340px) {
  .yee-virtual-keyboard {
    max-width: 340px;
    padding: 4px 0 8px 0;
  }
  .yee-key {
    font-size: 14px;
    height: 32px;
    min-width: 22px;
    max-width: 30px;
  }
  .key-space {
    min-width: 40px;
    max-width: 80px;
  }
}