page-companion.component_20241201195012.scss 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637
  1. .button-container {
  2. position: absolute; /* 绝对定位 */
  3. top: 8px; /* 距离顶部的距离 */
  4. left: 6px; /* 距离左侧的距离 */
  5. display: flex; /* 使用flexbox布局 */
  6. flex-direction: row; /* 垂直排列 */
  7. }
  8. .custom-button {
  9. font-size: 14px; /* 按钮字体大小 */
  10. border-radius: 6px; /* 圆角按钮 */
  11. color: rgb(250, 222, 222); /* 字体颜色 */
  12. transition: opacity 0.3s, color 0.3s; /* 添加过渡效果 */
  13. }
  14. /* 添加按钮的悬停效果 */
  15. .custom-button:hover {
  16. opacity: 0.5 !important; /* 悬停时透明度变化 */
  17. color:aqua !important;
  18. }
  19. ion-content {
  20. --background: #ffcccb; /* 设置背景颜色为粉色 */
  21. color: black; /* 设置文本颜色为黑色,确保可读性 */
  22. }
  23. ion-header {
  24. background-color: #f19595; /* 设置背景颜色为淡粉色 */
  25. color: black; /* 设置文本颜色为黑色 */
  26. }
  27. ion-toolbar {
  28. --background: transparent; /* 如果需要透明效果,可以设置为透明 */
  29. width: 200px;
  30. margin: auto;
  31. }