miniprogramme/components/message-action-menu/message-action-menu.wxss

/* ✨ 消息操作菜单组件样式 */

/* CSS变量定义 */
.message-action-menu {
  --menu-bg: rgba(0, 0, 0, 0.8);
  --content-bg: #FFFFFF;
  --border-color: #E5E5EA;
  --text-primary: #000000;
  --text-secondary: #8E8E93;
  --text-danger: #FF3B30;
  --button-bg: #F2F2F7;
  --button-active: #E5E5EA;
  --shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
  --radius: 16rpx;
}

/* 🌙 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .message-action-menu {
    --content-bg: #1C1C1E;
    --border-color: #38383A;
    --text-primary: #FFFFFF;
    --text-secondary: #8E8E93;
    --text-danger: #FF453A;
    --button-bg: #2C2C2E;
    --button-active: #3A3A3C;
    --shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.4);
  }
}

/* 🎨 菜单容器 */
.message-action-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 🎨 背景遮罩 */
.menu-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--menu-bg);
}

/* 🎨 菜单内容 */
.menu-content {
  width: 100%;
  max-width: 750rpx;
  background: var(--content-bg);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow);
  animation: slideUp 0.3s ease-out;
  overflow: hidden;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* 🎨 表情回应区域 */
.reactions-section {
  padding: 32rpx;
  border-bottom: 1rpx solid var(--border-color);
}

.reactions-title {
  margin-bottom: 24rpx;
}

.title-text {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--text-primary);
}

.reactions-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.reaction-item {
  width: 88rpx;
  height: 88rpx;
  border-radius: 44rpx;
  background: var(--button-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: 2rpx solid transparent;
}

.reaction-item:active {
  background: var(--button-active);
  transform: scale(0.9);
}

.reaction-emoji {
  font-size: 48rpx;
}

.more-emoji {
  border: 2rpx dashed var(--border-color);
  background: transparent;
}

.more-icon {
  font-size: 32rpx;
  color: var(--text-secondary);
}

/* 🎨 操作按钮区域 */
.actions-section {
  padding: 16rpx 0;
}

.action-item {
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx;
  transition: all 0.2s ease;
  border-bottom: 1rpx solid var(--border-color);
}

.action-item:last-child {
  border-bottom: none;
}

.action-item:active {
  background: var(--button-bg);
}

.action-item.danger {
  color: var(--text-danger);
}

.action-item.danger .action-text {
  color: var(--text-danger);
}

.action-icon {
  width: 72rpx;
  height: 72rpx;
  border-radius: 36rpx;
  background: var(--button-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
}

.action-item.danger .action-icon {
  background: rgba(255, 59, 48, 0.1);
}

.icon-text {
  font-size: 32rpx;
}

.action-text {
  font-size: 32rpx;
  color: var(--text-primary);
  font-weight: 500;
}

/* 🎨 消息信息区域 */
.message-info-section {
  padding: 32rpx;
  background: var(--button-bg);
  border-top: 1rpx solid var(--border-color);
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 28rpx;
  color: var(--text-secondary);
}

.info-value {
  font-size: 28rpx;
  color: var(--text-primary);
  font-weight: 500;
}

/* 🎨 表情选择器弹窗 */
.emoji-picker-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: var(--menu-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-out;
}

.emoji-picker-content {
  width: 90%;
  max-width: 600rpx;
  height: 80%;
  max-height: 800rpx;
  background: var(--content-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: scaleIn 0.3s ease-out;
}

@keyframes scaleIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.emoji-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  border-bottom: 1rpx solid var(--border-color);
}

.picker-title {
  font-size: 36rpx;
  font-weight: 600;
  color: var(--text-primary);
}

.close-btn {
  width: 64rpx;
  height: 64rpx;
  border-radius: 32rpx;
  background: var(--button-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.close-btn:active {
  background: var(--button-active);
  transform: scale(0.9);
}

.close-icon {
  font-size: 28rpx;
  color: var(--text-secondary);
}

/* 🎨 表情分类标签 */
.emoji-categories {
  display: flex;
  border-bottom: 1rpx solid var(--border-color);
}

.category-tab {
  flex: 1;
  padding: 24rpx 16rpx;
  text-align: center;
  transition: all 0.2s ease;
  border-bottom: 4rpx solid transparent;
}

.category-tab.active {
  border-bottom-color: #007AFF;
}

.category-tab:active {
  background: var(--button-bg);
}

.tab-text {
  font-size: 28rpx;
  color: var(--text-secondary);
  font-weight: 500;
}

.category-tab.active .tab-text {
  color: #007AFF;
  font-weight: 600;
}

/* 🎨 表情网格 */
.emoji-grid-container {
  flex: 1;
  padding: 16rpx;
}

.emoji-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
}

.emoji-grid-item {
  width: 88rpx;
  height: 88rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.emoji-grid-item:active {
  background: var(--button-bg);
  transform: scale(0.9);
}

.grid-emoji {
  font-size: 48rpx;
}

/* 📱 响应式设计 */
@media screen and (max-width: 375px) {
  .reactions-section {
    padding: 24rpx;
  }
  
  .reaction-item {
    width: 72rpx;
    height: 72rpx;
    border-radius: 36rpx;
  }
  
  .reaction-emoji {
    font-size: 40rpx;
  }
  
  .action-item {
    padding: 20rpx 24rpx;
  }
  
  .action-icon {
    width: 64rpx;
    height: 64rpx;
    border-radius: 32rpx;
    margin-right: 20rpx;
  }
  
  .icon-text {
    font-size: 28rpx;
  }
  
  .action-text {
    font-size: 28rpx;
  }
  
  .emoji-grid-item {
    width: 72rpx;
    height: 72rpx;
  }
  
  .grid-emoji {
    font-size: 40rpx;
  }
}

@media screen and (min-width: 414px) {
  .reactions-section {
    padding: 40rpx;
  }
  
  .reaction-item {
    width: 96rpx;
    height: 96rpx;
    border-radius: 48rpx;
  }
  
  .reaction-emoji {
    font-size: 52rpx;
  }
  
  .action-item {
    padding: 28rpx 40rpx;
  }
  
  .action-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 40rpx;
    margin-right: 28rpx;
  }
  
  .icon-text {
    font-size: 36rpx;
  }
  
  .action-text {
    font-size: 36rpx;
  }
  
  .emoji-grid-item {
    width: 96rpx;
    height: 96rpx;
  }
  
  .grid-emoji {
    font-size: 52rpx;
  }
}