action-bar.module.less 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. .action-bar{
  2. box-sizing: border-box;
  3. height: var(--action-bar-height);
  4. padding: 14px 22px;
  5. display: flex;
  6. align-items: center;
  7. justify-content: space-between;
  8. button{
  9. overflow: hidden;
  10. }
  11. }
  12. .bar-btn {
  13. display: flex;
  14. flex-direction: column;
  15. align-items: center;
  16. color: var(--live-color);
  17. font-size: 14px;
  18. .bar-btn-text {
  19. padding-top: 6px;
  20. line-height: 1;
  21. }
  22. }
  23. :global {
  24. .el-button:active {
  25. border-color: transparent;
  26. background-color: transparent;
  27. }
  28. .el-dropdown__popper.el-popper {
  29. border-color: var(--live-main-color) !important;
  30. }
  31. .el-dropdown__popper.el-popper[role=tooltip] .el-popper__arrow::before {
  32. border-color: var(--live-main-color);
  33. background-color: var(--live-main-color);
  34. }
  35. .el-slider {
  36. --el-slider-height: 2px;
  37. --el-slider-button-size: 14px;
  38. --el-slider-button-wrapper-offset: -17px;
  39. --el-slider-main-bg-color: #00D6C9;
  40. }
  41. .el-slider__button {
  42. border-color: var(--live-color);
  43. background-color: #00D6C9;
  44. }
  45. .el-dropdown-menu {
  46. background-color: var(--live-main-color);
  47. color: var(--live-color);
  48. border-radius: 2px;
  49. .el-dropdown-menu__item {
  50. color: inherit;
  51. }
  52. .el-dropdown-menu__item:not(.is-disabled):focus {
  53. background-color: var(--live-main-color);
  54. color: var(--live-color);
  55. }
  56. }
  57. }
  58. .volumeSlider {
  59. display: flex;
  60. align-items: center;
  61. padding: 0 12px;
  62. width: 195px;
  63. height: 55px;
  64. background-color: var(--live-main-color);
  65. border-color: var(--live-main-color);
  66. .volumeIcon {
  67. width: 14px;
  68. height: 15px;
  69. padding-right: 8px;
  70. }
  71. }