Built files from Bizgaze WebServer
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

toggles-full.css 6.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. .toggle-slide {
  2. overflow: hidden;
  3. cursor: pointer;
  4. -webkit-user-select: none;
  5. -moz-user-select: none;
  6. -ms-user-select: none;
  7. user-select: none;
  8. direction: ltr;
  9. text-align: center;
  10. }
  11. div.disabled > .toggle-slide {
  12. opacity: 0.7;
  13. pointer-events: none;
  14. }
  15. .toggle-slide .toggle-on,
  16. .toggle-slide .toggle-off,
  17. .toggle-slide .toggle-blob {
  18. float: left;
  19. }
  20. .toggle-slide .toggle-blob {
  21. position: relative;
  22. z-index: 99;
  23. cursor: hand;
  24. cursor: grab;
  25. }
  26. .toggle-dark .toggle-slide {
  27. border-radius: 5px;
  28. box-shadow: 0 0 0 1px #242529, 0 1px 0 1px #666;
  29. }
  30. .toggle-dark .toggle-on,
  31. .toggle-dark .toggle-off,
  32. .toggle-dark .toggle-blob {
  33. color: rgba(255, 255, 255, 0.7);
  34. font-size: 11px;
  35. }
  36. .toggle-dark .toggle-on,
  37. .toggle-dark .toggle-select .toggle-inner .active {
  38. background: -webkit-linear-gradient(#1A70BE, #31A2E1);
  39. background: linear-gradient(#1A70BE, #31A2E1);
  40. }
  41. .toggle-dark .toggle-off,
  42. .toggle-dark .toggle-select .toggle-on {
  43. background: -webkit-linear-gradient(#242529, #34363B);
  44. background: linear-gradient(#242529, #34363B);
  45. }
  46. .toggle-dark .toggle-blob {
  47. border-radius: 4px;
  48. background: -webkit-linear-gradient(#CFCFCF, whiteSmoke);
  49. background: linear-gradient(#CFCFCF, whiteSmoke);
  50. box-shadow: inset 0 0 0 1px #888, inset 0 0 0 2px white;
  51. }
  52. .toggle-dark .toggle-blob:hover {
  53. background: -webkit-linear-gradient(#c0c0c0, #dadada);
  54. background: linear-gradient(#c0c0c0, #dadada);
  55. box-shadow: inset 0 0 0 1px #888,inset 0 0 0 2px #ddd;
  56. }
  57. .toggle-iphone .toggle-slide {
  58. border-radius: 9999px;
  59. box-shadow: 0 0 0 1px #999;
  60. }
  61. .toggle-iphone .toggle-on,
  62. .toggle-iphone .toggle-off {
  63. color: white;
  64. font-size: 18px;
  65. font-weight: bold;
  66. text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  67. }
  68. .toggle-iphone .toggle-on {
  69. border-radius: 9999px 0 0 9999px;
  70. background: #037bda;
  71. box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.4);
  72. }
  73. .toggle-iphone .toggle-on:after {
  74. background: -webkit-linear-gradient(#1189f1, #3797ef);
  75. background: linear-gradient(#1189f1, #3797ef);
  76. height: 50%;
  77. content: '';
  78. margin-top: -19%;
  79. display: block;
  80. border-radius: 9999px;
  81. margin-left: 10%;
  82. }
  83. .toggle-iphone .toggle-off {
  84. box-shadow: inset -2px 2px 5px rgba(0, 0, 0, 0.4);
  85. border-radius: 0 9999px 9999px 0;
  86. color: #828282;
  87. background: #ECECEC;
  88. text-shadow: 0 0 1px white;
  89. }
  90. .toggle-iphone .toggle-off:after {
  91. background: -webkit-linear-gradient(#fafafa, #fdfdfd);
  92. background: linear-gradient(#fafafa, #fdfdfd);
  93. height: 50%;
  94. content: '';
  95. margin-top: -19%;
  96. display: block;
  97. margin-right: 10%;
  98. border-radius: 9999px;
  99. }
  100. .toggle-iphone .toggle-blob {
  101. border-radius: 50px;
  102. background: -webkit-linear-gradient(#d1d1d1, #fafafa);
  103. background: linear-gradient(#d1d1d1, #fafafa);
  104. box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 2px white, 0 0 3px rgba(0, 0, 0, 0.6);
  105. }
  106. .toggle-light .toggle-slide {
  107. border-radius: 9999px;
  108. box-shadow: 0 0 0 1px #999;
  109. }
  110. .toggle-light .toggle-on,
  111. .toggle-light .toggle-off {
  112. font-size: 11px;
  113. font-weight: 500;
  114. }
  115. .toggle-light .toggle-on,
  116. .toggle-light .toggle-select .toggle-inner .active {
  117. background: #45a31f;
  118. box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.2);
  119. text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
  120. color: rgba(255, 255, 255, 0.8);
  121. }
  122. .toggle-light .toggle-off,
  123. .toggle-light .toggle-select .toggle-on {
  124. color: rgba(0, 0, 0, 0.6);
  125. text-shadow: 0 1px rgba(255, 255, 255, 0.2);
  126. background: -webkit-linear-gradient(#cfcfcf, #f5f5f5);
  127. background: linear-gradient(#cfcfcf, #f5f5f5);
  128. }
  129. .toggle-light .toggle-blob {
  130. border-radius: 50px;
  131. background: -webkit-linear-gradient(#f5f5f5, #cfcfcf);
  132. background: linear-gradient(#f5f5f5, #cfcfcf);
  133. box-shadow: 1px 1px 2px #888;
  134. }
  135. .toggle-light .toggle-blob:hover {
  136. background: -webkit-linear-gradient(#e4e4e4, #f9f9f9);
  137. background: linear-gradient(#e4e4e4, #f9f9f9);
  138. }
  139. .toggle-modern .toggle-slide {
  140. border-radius: 4px;
  141. text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.2);
  142. background: -webkit-linear-gradient(#c0c5c9, #a1a9af);
  143. background: linear-gradient(#c0c5c9, #a1a9af);
  144. box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.15);
  145. }
  146. .toggle-modern .toggle-on,
  147. .toggle-modern .toggle-off {
  148. -webkit-transition: all 0.1s ease-out;
  149. transition: all 0.1s ease-out;
  150. color: white;
  151. text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
  152. font-size: 11px;
  153. box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
  154. }
  155. .toggle-modern .toggle-select .toggle-off,
  156. .toggle-modern .toggle-select .toggle-on {
  157. background: none;
  158. }
  159. .toggle-modern .toggle-off,
  160. .toggle-modern .toggle-off.active {
  161. background: -webkit-linear-gradient(#737e8d, #3f454e);
  162. background: linear-gradient(#737e8d, #3f454e);
  163. }
  164. .toggle-modern .toggle-on,
  165. .toggle-modern .toggle-on.active {
  166. background: -webkit-linear-gradient(#4894cd, #2852a6);
  167. background: linear-gradient(#4894cd, #2852a6);
  168. }
  169. .toggle-modern .toggle-blob {
  170. background: -webkit-linear-gradient(#c0c6c9, #81898f);
  171. background: linear-gradient(#c0c6c9, #81898f);
  172. box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.1), 1px 1px 2px rgba(0, 0, 0, 0.2);
  173. border-radius: 3px;
  174. }
  175. .toggle-modern .toggle-blob:hover {
  176. background-image: -webkit-linear-gradient(#a1a9af, #a1a9af);
  177. background-image: linear-gradient(#a1a9af, #a1a9af);
  178. }
  179. .toggle-soft .toggle-slide {
  180. border-radius: 5px;
  181. box-shadow: 0 0 0 1px #999;
  182. }
  183. .toggle-soft .toggle-on,
  184. .toggle-soft .toggle-off {
  185. color: rgba(0, 0, 0, 0.7);
  186. font-size: 11px;
  187. text-shadow: 1px 1px white;
  188. }
  189. .toggle-soft .toggle-on,
  190. .toggle-soft .toggle-select .toggle-inner .active {
  191. background: -webkit-linear-gradient(#d2ff52, #91e842);
  192. background: linear-gradient(#d2ff52, #91e842);
  193. }
  194. .toggle-soft .toggle-off,
  195. .toggle-soft .toggle-select .toggle-on {
  196. background: -webkit-linear-gradient(#cfcfcf, #f5f5f5);
  197. background: linear-gradient(#cfcfcf, #f5f5f5);
  198. }
  199. .toggle-soft .toggle-blob {
  200. border-radius: 4px;
  201. background: -webkit-linear-gradient(#cfcfcf, #f5f5f5);
  202. background: linear-gradient(#cfcfcf, #f5f5f5);
  203. box-shadow: inset 0 0 0 1px #bbb, inset 0 0 0 2px white;
  204. }
  205. .toggle-soft .toggle-blob:hover {
  206. background: -webkit-linear-gradient(#e4e4e4, #f9f9f9);
  207. background: linear-gradient(#e4e4e4, #f9f9f9);
  208. box-shadow: inset 0 0 0 1px #ddd,inset 0 0 0 2px #ddd;
  209. }