_neomorphic.scss 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
  1. $main-color:#61677C;
  2. & {
  3. background-color: #EBECF0;
  4. }
  5. .layui-layout-admin .layui-header {
  6. background-color: #EBECF0 !important;
  7. }
  8. .layuimini-container .layui-btn-success {
  9. color: #4bb368;
  10. }
  11. .layuimini-container .layui-btn-danger {
  12. color: #f56c6c;
  13. }
  14. .layuimini-container .layuimini-btn-primary {
  15. color: #2c3e50;
  16. }
  17. .layuimini-container .layui-btn-primary {
  18. color: #5f5f5f;
  19. }
  20. .layuimini-container .layui-btn-normal {
  21. color: #1e9fff;
  22. }
  23. .layui-btn {
  24. border: 0;
  25. outline: 0;
  26. border-radius: 10px;
  27. background-color: #EBECF0;
  28. text-shadow: 1px 1px 0 #FFF;
  29. color: $main-color;
  30. box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
  31. transition: all 0.2s ease-in-out;
  32. cursor: pointer;
  33. font-weight: 600;
  34. &:hover {
  35. box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
  36. }
  37. }
  38. .layui-table-tool .layui-inline[lay-event] {
  39. @extend .layui-btn;
  40. }
  41. .layuimini-main {
  42. @extend .layui-btn;
  43. text-shadow: 0.5px 0.5px 0 #fff;
  44. }
  45. .layui-layer {
  46. @extend .layui-btn;
  47. }
  48. .layui-layer-easy .layui-layer-title {
  49. background-color: transparent !important;
  50. color: $main-color !important;
  51. }
  52. .layui-layer-easy .layui-layer-setwin>span {
  53. color: $main-color !important;
  54. &::before {
  55. border-color: $main-color !important;
  56. }
  57. &::after {
  58. border-color: $main-color !important;
  59. }
  60. }
  61. .layui-layer-easy .layui-layer-setwin .layui-layer-min::before {
  62. background-color: $main-color !important;
  63. }
  64. .layui-card {
  65. @extend .layui-btn;
  66. text-shadow: 0.5px 0.5px 0 #fff;
  67. }
  68. .layuimini-container .layui-table-tool {
  69. background-color: transparent;
  70. }
  71. .layui-table {
  72. background-color: #EBECF0;
  73. }
  74. .panel {
  75. @extend .layui-btn;
  76. text-shadow: 0.5px 0.5px 0 #fff;
  77. }
  78. .layuimini-qiuck-module {
  79. @extend .layui-btn;
  80. i {
  81. background-color: transparent
  82. }
  83. }
  84. .layui-side.layui-bg-black,
  85. .layui-side.layui-bg-black>.layuimini-menu-left>ul,
  86. .layuimini-menu-left-zoom>ul {
  87. @extend .layui-btn;
  88. background-color: #EBECF0 !important;
  89. border-radius: 0;
  90. }
  91. .layuimini-menu-left .layui-nav .layui-nav-item a,
  92. .layuimini-menu-left-zoom.layui-nav .layui-nav-item a {
  93. @extend .layui-btn;
  94. &:hover {
  95. box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
  96. }
  97. }
  98. .layui-nav-tree .layui-nav-item {
  99. margin: 10px;
  100. width: calc(100% - 20px);
  101. }
  102. .layuimini-menu-left .layui-nav-itemed>.layui-nav-child {
  103. background-color: transparent !important;
  104. }
  105. .layui-nav-tree .layui-nav-child dd {
  106. margin: 10px;
  107. width: calc(100% - 20px);
  108. }
  109. .layuimini-menu-left .layui-nav-tree .layui-this,
  110. .layuimini-menu-left .layui-nav-tree .layui-this>a,
  111. .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this,
  112. .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this a,
  113. .layuimini-menu-left-zoom.layui-nav-tree .layui-this,
  114. .layuimini-menu-left-zoom.layui-nav-tree .layui-this>a,
  115. .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this,
  116. .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this a {
  117. background-color: inherit !important;
  118. }
  119. .layuimini-menu-left .layui-nav .layui-nav-item a:hover,
  120. .layuimini-menu-left .layui-nav .layui-this a,
  121. .layuimini-menu-left-zoom.layui-nav .layui-nav-item a:hover,
  122. .layuimini-menu-left-zoom.layui-nav .layui-this a {
  123. color: $main-color !important;
  124. }
  125. .layui-layout-admin .layuimini-logo {
  126. background-color: transparent !important;
  127. }
  128. .layui-header {
  129. .layuimini-header-menu>.layui-nav-item {
  130. @extend .layui-btn;
  131. margin: 10px;
  132. line-height: 40px !important;
  133. height: 40px !important;
  134. }
  135. .layui-nav .layui-nav-item {
  136. @extend .layui-btn;
  137. margin: 10px;
  138. line-height: 40px !important;
  139. height: 40px !important;
  140. }
  141. }
  142. .layui-btn-xs {
  143. padding: 0 9px;
  144. }
  145. .layui-input,
  146. .layui-textarea {
  147. border: 0;
  148. outline: 0;
  149. font-size: 16px;
  150. border-radius: 320px;
  151. padding: 16px;
  152. background-color: #EBECF0;
  153. text-shadow: 1px 1px 0 #FFF;
  154. margin-right: 8px;
  155. box-shadow: inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF;
  156. width: 100%;
  157. box-sizing: border-box;
  158. transition: all 0.2s ease-in-out;
  159. appearance: none;
  160. -webkit-appearance: none;
  161. }
  162. .layuimini-upload .layuimini-upload-btn {
  163. background-color: transparent !important;
  164. }
  165. .layui-form-pane .layui-form-label {
  166. background-color: transparent;
  167. text-align: right;
  168. }
  169. .layuimini-container .layui-form-select dl dd.layui-this {
  170. background-color: transparent !important;
  171. color: #2c3e50
  172. }
  173. .layuimini-color .elem-content li.layui-this {
  174. text-shadow: 0.5px 0.5px 0 #FFF;
  175. }
  176. .layui-form-select dl {
  177. @extend .layui-btn;
  178. }
  179. .layui-form-checkbox {
  180. @extend .layui-btn;
  181. padding: 10px 10px 10px 24px;
  182. }
  183. .layui-form-checkbox>i {
  184. left: 6px;
  185. top: 10px;
  186. text-shadow: 0.5px 0.5px 0 #fff;
  187. }
  188. .layui-form-checked:hover>div,
  189. .layui-form-checked>div {
  190. color: #16b777;
  191. }
  192. .layui-tree,
  193. .laytable-cell-checkbox {
  194. .layui-form-checkbox[lay-skin="primary"] {
  195. padding: 13px;
  196. }
  197. .layui-form-checkbox[lay-skin="primary"]>i {
  198. left: 5px;
  199. top: 5px
  200. }
  201. }
  202. .layui-tree-txt {
  203. margin-left: 10px
  204. }
  205. .layui-form-radio {
  206. @extend .layui-btn;
  207. }
  208. .layui-form-radio:hover>*,
  209. .layui-form-radioed,
  210. .layui-form-radioed>i {
  211. color: #16b777;
  212. }
  213. .layui-table-tips-c {
  214. text-shadow: 0.5px 0.5px 0 #fff;
  215. }
  216. .layuimini-tab .layui-tab-title {
  217. background-color: #EBECF0;
  218. }
  219. .layuimini-tab .layui-tab-control>li {
  220. background-color: #EBECF0;
  221. }