dark.scss 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. /**
  2. * @author chuzhixin 1204505056@qq.com (不想保留author可删除)
  3. * @description 暗黑之子主题(VIP群专享)
  4. */
  5. @charset "utf-8";
  6. .vue-admin-beautiful-theme-dark {
  7. $base-menu-background: #2e2f34;
  8. $base-menu-background-active: #000;
  9. $base-color-blue: #000;
  10. color: #fff !important;
  11. background-color: #2e2f34 !important;
  12. *:not(a):not([class*="svg"]):not(.el-drawer__wrapper):not(.el-drawer__container) {
  13. color: #fff !important;
  14. background-color: #2e2f34 !important;
  15. border-color: #999 !important;
  16. box-shadow: none !important;
  17. }
  18. .is-active:not(li) {
  19. *:not(a):not([class*="svg"]) {
  20. color: #fff !important;
  21. background-color: #000 !important;
  22. border-color: #999 !important;
  23. }
  24. }
  25. .svg-external-icon {
  26. color: #fff !important;
  27. }
  28. .el-scrollbar__bar {
  29. display: none;
  30. }
  31. @mixin container {
  32. background: $base-menu-background !important;
  33. }
  34. @mixin active {
  35. &:hover {
  36. background-color: $base-menu-background-active !important;
  37. }
  38. &.is-active {
  39. background-color: $base-menu-background-active !important;
  40. }
  41. }
  42. .logo-container-horizontal {
  43. @include container;
  44. }
  45. .logo-container-vertical {
  46. @include container;
  47. }
  48. .el-menu {
  49. @include container;
  50. .el-submenu__title {
  51. @include container;
  52. }
  53. .el-menu-item {
  54. @include container;
  55. }
  56. }
  57. .side-bar-container {
  58. @include container;
  59. .el-menu-item {
  60. @include active;
  61. }
  62. }
  63. .top-bar-container {
  64. @include container;
  65. .vab-main {
  66. @include container;
  67. .el-menu {
  68. &--horizontal {
  69. .el-submenu,
  70. .el-menu-item {
  71. &.is-active {
  72. background-color: $base-menu-background-active !important;
  73. }
  74. }
  75. > .el-menu-item {
  76. &.is-active {
  77. border-bottom: 3px solid $base-menu-background-active !important;
  78. }
  79. }
  80. }
  81. }
  82. }
  83. }
  84. .tabs-bar-container {
  85. background: $base-color-white;
  86. border-top: 1px solid #f6f6f6;
  87. .tags-content {
  88. .el-tabs__header {
  89. .el-tabs__item {
  90. &.is-active {
  91. background: $base-color-blue !important;
  92. border: 1px solid $base-color-blue !important;
  93. }
  94. }
  95. }
  96. }
  97. }
  98. .theme-bar-setting {
  99. background: $base-color-blue !important;
  100. }
  101. }