gradual.scss 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. .theme-gradual {
  2. .avue-contail {
  3. background: linear-gradient(120deg, #bc00e3, #4efffb) !important;
  4. }
  5. .avue-header,
  6. .tags-container,
  7. .avue-logo {
  8. background-color: transparent;
  9. }
  10. .el-card {
  11. opacity: .9;
  12. }
  13. .top {
  14. .el-dropdown {
  15. color: #fff;
  16. i {
  17. color: #fff;
  18. }
  19. }
  20. .top-item {
  21. i {
  22. color: #fff;
  23. }
  24. }
  25. }
  26. .avue-tabs {
  27. padding: 0 20px !important;
  28. }
  29. .avue-sidebar,
  30. .logo,
  31. .el-menu-item,
  32. .el-submenu__title,
  33. .el-menu {
  34. background-color: transparent !important
  35. }
  36. .logo_subtitle {
  37. color: #ccc !important;
  38. }
  39. .logo_title,
  40. .avue-breadcrumb,
  41. {
  42. color: #fff !important;
  43. i {
  44. color: #fff;
  45. }
  46. }
  47. .el-menu--horizontal>.el-menu-item.is-active {
  48. border-bottom: none;
  49. }
  50. .top {
  51. border-bottom: none;
  52. }
  53. .avue-tags {
  54. background-color: transparent;
  55. border: none;
  56. }
  57. .tag-item {
  58. color: #fff !important;
  59. border: none !important;
  60. background-color: rgba(255, 255, 255, .5) !important;
  61. &.is-active {
  62. color: #fff !important;
  63. border: 1px solid #fff !important;
  64. background: linear-gradient(90deg, hsla(0, 0%, 100%, .28), hsla(0, 0%, 100%, 0)) !important;
  65. .tag-item-icon {
  66. color: #fff !important;
  67. }
  68. }
  69. }
  70. .el-menu-item {
  71. i,
  72. span {
  73. color: #fff;
  74. }
  75. &:hover {
  76. span,
  77. i {
  78. color: #fff !important;
  79. }
  80. }
  81. &.is-active {
  82. &::before {
  83. background: #fff;
  84. }
  85. span,
  86. i {
  87. color: #fff !important;
  88. }
  89. background: linear-gradient(90deg, hsla(0, 0%, 100%, .28), hsla(0, 0%, 100%, 0)) !important;
  90. &:hover {
  91. color: #fff !important;
  92. background: linear-gradient(90deg, hsla(0, 0%, 100%, .28), hsla(0, 0%, 100%, 0)) !important;
  93. }
  94. }
  95. }
  96. .el-submenu__title {
  97. i,
  98. span {
  99. color: #fff !important;
  100. }
  101. }
  102. .el-submenu .el-menu-item {
  103. &:hover {
  104. span,
  105. i {
  106. color: #fff !important;
  107. }
  108. }
  109. &.is-active {
  110. background: linear-gradient(90deg, hsla(0, 0%, 100%, .28), hsla(0, 0%, 100%, 0)) !important;
  111. span,
  112. i {
  113. color: #fff !important;
  114. }
  115. &:hover {
  116. background: linear-gradient(90deg, hsla(0, 0%, 100%, .28), hsla(0, 0%, 100%, 0)) !important;
  117. }
  118. }
  119. }
  120. .top-bar__item {
  121. i {
  122. color: #fff;
  123. }
  124. }
  125. .el-tabs--card>.el-tabs__header .el-tabs__item {
  126. &.is-active {
  127. border: 1px solid #fff;
  128. color: #fff;
  129. }
  130. }
  131. }