theme-sky-blue.css 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. /** 透明侧边栏导航 */
  2. .layui-layout-admin .layui-side .layui-nav {
  3. background-color: transparent;
  4. }
  5. .layui-layout-admin .layui-side .layui-nav .layui-nav-item > a:hover {
  6. background: rgba(255,255,255,.03);
  7. }
  8. /** logo部分样式 */
  9. .layui-layout-admin .layui-header .layui-logo {
  10. background-color: #2C6AF9;
  11. color: #ffffff;
  12. }
  13. /** header样式 */
  14. .layui-layout-admin .layui-header {
  15. background-color: #4078fc;
  16. }
  17. .layui-layout-admin .layui-header a {
  18. color: #ffffff;
  19. }
  20. .layui-layout-admin .layui-header a:hover {
  21. color: #ffffff;
  22. }
  23. .layui-layout-admin .layui-header .layui-nav .layui-nav-more {
  24. border-color: #eee transparent transparent;
  25. }
  26. .layui-layout-admin .layui-header .layui-nav .layui-nav-mored {
  27. border-color: transparent transparent #eee;
  28. }
  29. /** 导航栏下面的线条 */
  30. .layui-layout-admin .layui-header .layui-nav .layui-this:after, .layui-layout-admin .layui-header .layui-nav-bar {
  31. background-color: #eee;
  32. }
  33. /** 侧边栏样式 */
  34. .layui-layout-admin .layui-side {
  35. background-color: #ffffff !important;
  36. }
  37. .layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-this, .layui-nav-tree .layui-this > a, .layui-nav-tree .layui-this > a:hover {
  38. background-color: #5E8FFC !important;
  39. }
  40. .layui-nav-tree .layui-nav-bar {
  41. background-color: #5E8FFC;
  42. }
  43. /** 主题颜色 */
  44. /** 按钮 */
  45. .layui-btn:not(.layui-btn-primary):not(.layui-btn-normal):not(.layui-btn-warm):not(.layui-btn-danger):not(.layui-btn-disabled) {
  46. background-color: #5E8FFC;
  47. }
  48. .layui-btn.layui-btn-primary:hover {
  49. border-color: #5E8FFC;
  50. }
  51. /** 开关 */
  52. .layui-form-onswitch {
  53. border-color: #5E8FFC;
  54. background-color: #5E8FFC;
  55. }
  56. /** 分页插件 */
  57. .layui-laypage .layui-laypage-curr .layui-laypage-em {
  58. background-color: #5E8FFC;
  59. }
  60. .layui-table-page .layui-laypage input:focus {
  61. border-color: #5E8FFC !important;
  62. }
  63. .layui-table-view select:focus {
  64. border-color: #5E8FFC !important;
  65. }
  66. .layui-table-page .layui-laypage a:hover {
  67. color: #5E8FFC;
  68. }
  69. /** 单选按钮 */
  70. .layui-form-radio > i:hover, .layui-form-radioed > i {
  71. color: #5E8FFC;
  72. }
  73. /** 下拉条目选中 */
  74. .layui-form-select dl dd.layui-this {
  75. background-color: #5E8FFC;
  76. }
  77. /** 选项卡 */
  78. .layui-tab-brief > .layui-tab-title .layui-this {
  79. color: #5E8FFC;
  80. }
  81. .layui-tab-brief > .layui-tab-more li.layui-this:after, .layui-tab-brief > .layui-tab-title .layui-this:after {
  82. border-color: #5E8FFC !important;
  83. }
  84. /** 面包屑导航 */
  85. .layui-breadcrumb a:hover {
  86. color: #5E8FFC !important;
  87. }
  88. /** 主体标题 */
  89. .layui-body-header-title {
  90. border-left-color: #5E8FFC;
  91. }
  92. /** 日期选择器按钮 */
  93. .laydate-footer-btns span:hover {
  94. color: #5E8FFC !important;
  95. }
  96. /** 时间轴 */
  97. .layui-timeline-axis {
  98. color: #5E8FFC;
  99. }
  100. /** 主题切换 */
  101. .btnTheme:hover, .btnTheme.active {
  102. border-color: #5E8FFC;
  103. }
  104. /** 侧边栏文字颜色 */
  105. .layui-side .layui-nav .layui-nav-item a {
  106. color: rgba(51,51,51,.7);
  107. }
  108. .layui-side .layui-nav-itemed > a, .layui-nav-tree .layui-nav-title a, .layui-nav-tree .layui-nav-title a:hover {
  109. color: #333 !important;
  110. }
  111. /** header线条 */
  112. .layui-layout-admin .layui-header .layui-nav .layui-this:after, .layui-layout-admin .layui-header .layui-nav-bar {
  113. background-color: #eee;
  114. }
  115. /** tab下划线 */
  116. .layui-layout-admin .layui-body > .layui-tab > .layui-tab-title li.layui-this:after {
  117. background-color: #4078fc;
  118. top: 38px;
  119. }
  120. /** 复选框 */
  121. .layui-form-checked[lay-skin=primary] i {
  122. border-color: #5E8FFC;
  123. background-color: #5E8FFC;
  124. }
  125. .layui-form-checkbox[lay-skin=primary] i:hover {
  126. border-color: #5E8FFC;
  127. }
  128. /** PC端折叠鼠标经过样式 */
  129. .layui-layout-admin.admin-nav-mini .layui-side .layui-nav .layui-nav-item.admin-nav-hover > .layui-nav-child {
  130. background: #ffffff !important;
  131. }
  132. .layui-layout-admin.admin-nav-mini .layui-side .layui-nav .layui-nav-item.admin-nav-hover > .layui-nav-child:before{
  133. background: #ffffff !important;
  134. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  135. }
  136. /** 移动设备样式 */
  137. @media screen and (max-width: 750px) {
  138. /** 去掉PC端折叠鼠标经过样式 */
  139. .layui-layout-admin.admin-nav-mini .layui-side .layui-nav .layui-nav-item.admin-nav-hover > .layui-nav-child {
  140. background-color: rgba(0, 0, 0, .3) !important;
  141. }
  142. }
  143. /** admin风格弹窗样式 */
  144. .layui-layer.layui-layer-admin .layui-layer-title {
  145. background-color: #2C6AF9;
  146. color: #ffffff;
  147. }
  148. /** 按钮颜色 */
  149. .layui-layer.layui-layer-admin .layui-layer-setwin a {
  150. color: #ffffff;
  151. }
  152. /* 最小化按钮 */
  153. .layui-layer.layui-layer-admin .layui-layer-setwin .layui-layer-min cite {
  154. background-color: #dddddd;
  155. }
  156. /** 弹窗确定按钮 */
  157. .layui-layer.layui-layer-admin .layui-layer-btn .layui-layer-btn0 {
  158. border-color: #5E8FFC;
  159. background-color: #5E8FFC;
  160. }
  161. /* 圆形按钮 */
  162. .btn-circle {
  163. background: #5E8FFC;
  164. }
  165. /*.layui-nav-tree .layui-nav-item .layui-nav-child{
  166. background-color: #ffffff !important;
  167. }*/
  168. .layui-layout-admin .layui-side .layui-nav .layui-nav-item a{
  169. background-color: #f2f2f2;
  170. }
  171. .layui-nav-tree .layui-nav-child a{
  172. background: #ffffff !important;
  173. }
  174. .layui-nav-item .first-tit{
  175. background-color: #f2f2f2;
  176. color: #555;
  177. }