megna-dark.less 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. @import "../variables.less";
  2. /*Just change your choise color here its theme Colors*/
  3. @topbar: @white;
  4. @sidebar: #2f323e;
  5. @bodycolor: #f1f2f7;
  6. @headingtext: #2b2b2b;
  7. @bodytext: #686868;
  8. @sidebar-text: #97999f;
  9. @themecolor: @info;
  10. @dark-themecolor: #4F5467;
  11. body {
  12. background: @sidebar;
  13. }
  14. /*Top Header Part*/
  15. .logo i{ color:@inverse;}
  16. .top-left-part{
  17. .light-logo{
  18. display:inline-block;
  19. }
  20. .dark-logo{
  21. display:none;
  22. }
  23. }
  24. .navbar-header {
  25. background: @topbar;
  26. }
  27. .app-search .form-control, .app-search .form-control:focus{
  28. border:1px solid @border;
  29. }
  30. .navbar-top-links > li > a {
  31. color: @bodytext;
  32. }
  33. .bg-title{
  34. border-bottom: 1px solid @border;
  35. }
  36. /*Right panel*/
  37. .right-sidebar .rpanel-title {
  38. background: @themecolor;
  39. }
  40. /*Bread Crumb*/
  41. .bg-title .breadcrumb .active {
  42. color: @themecolor;
  43. }
  44. .bg-title {}
  45. /*Sidebar*/
  46. .sidebar {
  47. background: @sidebar;
  48. box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
  49. .label-custom {
  50. background: @megna;
  51. }
  52. }
  53. #side-menu li a {
  54. color: @sidebar-text;
  55. }
  56. #side-menu li a {
  57. color: @sidebar-text;
  58. border-left: 0px solid @sidebar;
  59. }
  60. #side-menu > li > a {
  61. &:hover,
  62. &:focus {
  63. background: rgba(0, 0, 0, 0.07);
  64. }
  65. &.active {
  66. background: @themecolor;
  67. color: @white;
  68. font-weight: 500;
  69. }
  70. }
  71. #side-menu ul > li > a {
  72. &:hover {
  73. color: @white;
  74. }
  75. &.active {
  76. color: @white;
  77. font-weight: 500;
  78. }
  79. }
  80. .user-profile .user-pro-body .u-dropdown {
  81. color: @sidebar-text;
  82. }
  83. /*themecolor*/
  84. .bg-theme {
  85. background-color: #707cd2 !important;
  86. }
  87. .bg-theme-dark {
  88. background-color: @themecolor !important;
  89. }
  90. /*Button*/
  91. .btn-custom {
  92. background: @themecolor;
  93. border: 1px solid @themecolor;
  94. color: @white;
  95. &:hover {
  96. background: @themecolor;
  97. opacity: 0.8;
  98. color: @white;
  99. border: 1px solid @themecolor;
  100. }
  101. }
  102. /*Custom tab*/
  103. .customtab li.active a,
  104. .customtab li.active a:hover,
  105. .customtab li.active a:focus {
  106. border-bottom: 2px solid @themecolor;
  107. color: @themecolor;
  108. }
  109. .tabs-vertical li.active a,
  110. .tabs-vertical li.active a:hover,
  111. .tabs-vertical li.active a:focus {
  112. background: @themecolor;
  113. border-right: 2px solid @themecolor;
  114. }
  115. /*Nav-pills*/
  116. .nav-pills>li.active>a,
  117. .nav-pills>li.active>a:focus,
  118. .nav-pills>li.active>a:hover {
  119. background: @themecolor;
  120. color: @white;
  121. }