style.css 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  1. /*
  2. * Title: Pure CSS3 Backend Panel
  3. * Author: Clear
  4. * Version: 1.0.0
  5. * Create: 2015-06-05
  6. * Update: 2015-06-05
  7. */
  8. /* CSS Reset */
  9. * {
  10. padding: 0;
  11. margin: 0;
  12. list-style: none;
  13. box-sizing: border-box;
  14. outline: none;
  15. font-weight: normal;
  16. }
  17. body {
  18. background: #1ABC9C;
  19. font-family: "Segoe UI","Microsoft YaHei";
  20. }
  21. a {
  22. color: #000;
  23. text-decoration: none;
  24. }
  25. header {
  26. color: #fff;
  27. text-align: center;
  28. min-height: 140px;
  29. margin-bottom: 60px;
  30. }
  31. header h1{
  32. /*margin-top: 100px;*/
  33. font-size: 50px;
  34. margin-bottom: 20px;
  35. font-weight: 100;
  36. }
  37. header a{
  38. font-size: 18px;
  39. margin-left: 20px;
  40. }
  41. .copyright {
  42. font-size: 25px;
  43. font-weight: 100;
  44. color: #fff;
  45. text-align: center;
  46. margin: 100px 0;
  47. }
  48. .copyright a {
  49. color: #fff;
  50. }
  51. .pb30{padding-bottom: 30px;}
  52. .fl {
  53. float: left
  54. }
  55. .fr {
  56. float: right
  57. }
  58. .ease {
  59. -webkit-transition: all .5s;
  60. -moz-transition: all .5s;
  61. -o-transition: all .5s;
  62. transition: all .5s;
  63. }
  64. .container {
  65. width: 100%;
  66. max-width: 1200px;
  67. margin: 0 auto;
  68. }
  69. /* Backend Panel Start */
  70. .clear-backend {
  71. background: #fff;
  72. width: 100%;
  73. /*height: 800px;*/
  74. height: 100%;
  75. /*position: relative;*/
  76. }
  77. .avatar {
  78. background: #f0f0f0;
  79. width: 200px;
  80. height: 200px;
  81. }
  82. .avatar div {
  83. width: 150px;
  84. height: 150px;
  85. border-radius: 50%;
  86. overflow: hidden;
  87. position: relative;
  88. top: 25px;
  89. left: 25px;
  90. }
  91. .avatar div img {
  92. width: 100%;
  93. height: auto;
  94. }
  95. .menu{
  96. width: 200px;
  97. display: block;
  98. }
  99. .menu > input {
  100. position: absolute;
  101. filter: alpha(opacity=0);
  102. opacity: 0;
  103. }
  104. .menu > input:hover {
  105. cursor: pointer;
  106. }
  107. .menu > input:hover + span,
  108. .menu > input:checked + span {
  109. background: #fff;
  110. color: #1ABC9C;
  111. }
  112. .menu > input:checked + span + i {
  113. color: #1ABC9C;
  114. }
  115. .menu > i {
  116. position: absolute;
  117. margin-top: -40px;
  118. padding: 0 20px;
  119. font-size: 20px;
  120. }
  121. .menu > span,
  122. .menu > i {
  123. -webkit-transition: all .5s;
  124. -moz-transition: all .5s;
  125. -o-transition: all .5s;
  126. transition: all .5s;
  127. }
  128. .menu > input,
  129. .menu > span {
  130. background: #f0f0f0;
  131. display: block;
  132. width: 200px;
  133. height: 60px;
  134. line-height: 60px;
  135. text-align: center;
  136. z-index: 9;
  137. }
  138. .top-bar {
  139. background: #f0f0f0;
  140. color: #000;
  141. position: absolute;
  142. top: 0;
  143. right: 0;
  144. width: calc(100% - 200px);
  145. height: 60px;
  146. line-height: 60px;
  147. font-size: 20px;
  148. z-index: 9;
  149. }
  150. .top-bar li {
  151. float: right;
  152. }
  153. .top-bar a {
  154. display: block;
  155. padding: 0 20px;
  156. -webkit-transition: all .5s;
  157. -moz-transition: all .5s;
  158. -o-transition: all .5s;
  159. transition: all .5s;
  160. }
  161. .top-bar a:hover {
  162. color: #1ABC9C;
  163. }
  164. .top-bar li:hover {
  165. background: #fff;
  166. }
  167. .tab-content {
  168. position: absolute;
  169. top: 0;
  170. right: 0;
  171. width: calc(100% - 200px);
  172. height: 100%;
  173. padding-top: 60px;
  174. overflow: hidden;
  175. }
  176. .tab-content section {
  177. position: absolute;
  178. width: 100%;
  179. height: 100%;
  180. padding: 20px;
  181. display: none;
  182. }
  183. .clear-backend > input.tab-1:checked ~ .tab-content .tab-item-1 {
  184. display: block;
  185. }
  186. .clear-backend > input.tab-2:checked ~ .tab-content .tab-item-2 {
  187. display: block;
  188. }
  189. .clear-backend > input.tab-3:checked ~ .tab-content .tab-item-3 {
  190. display: block;
  191. }
  192. .clear-backend > input.tab-4:checked ~ .tab-content .tab-item-4 {
  193. display: block;
  194. }
  195. .clear-backend > input.tab-5:checked ~ .tab-content .tab-item-5 {
  196. display: block;
  197. }
  198. .clear-backend > input.tab-6:checked ~ .tab-content .tab-item-6 {
  199. display: block;
  200. }
  201. .clear-backend > input.tab-7:checked ~ .tab-content .tab-item-7 {
  202. display: block;
  203. }
  204. .clear-backend > input.tab-8:checked ~ .tab-content .tab-item-8 {
  205. display: block;
  206. }
  207. .clear-backend > input.tab-9:checked ~ .tab-content .tab-item-9 {
  208. display: block;
  209. }
  210. .clear-backend > input.tab-10:checked ~ .tab-content .tab-item-10 {
  211. display: block;
  212. }
  213. /* Responsive */
  214. @media screen and (max-width: 1367px) {
  215. }
  216. @media screen and (max-width: 1281px) {
  217. }
  218. @media screen and (max-width: 1025px) {
  219. }
  220. @media only screen and (max-width: 961px) {
  221. }
  222. @media only screen and (max-width: 641px) {
  223. .avatar,
  224. .clear-backend > input,
  225. .clear-backend > span {
  226. width: 60px;
  227. height: 60px;
  228. }
  229. .clear-backend > span {
  230. filter: alpha(opacity=0);
  231. opacity: 0;
  232. }
  233. .avatar div {
  234. width: 40px;
  235. height: 40px;
  236. border-radius: 50%;
  237. top: 5px;
  238. left: 5px;
  239. }
  240. .top-bar,
  241. .tab-content {
  242. width: calc(100% - 60px);
  243. }
  244. }
  245. @media only screen and (max-width: 481px) {
  246. }