theme.css 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. /*主题*/
  2. .theme {
  3. position: relative;
  4. border: 1px solid #dedede;
  5. -webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, .1);
  6. box-shadow: 0 1px 1px -1px rgba(0, 0, 0, .1);
  7. -webkit-box-sizing: border-box;
  8. -moz-box-sizing: border-box;
  9. box-sizing: border-box;
  10. }
  11. .theme .theme-screenshot {
  12. display: block;
  13. overflow: hidden;
  14. height: 290px;
  15. }
  16. .theme .theme-screenshot img {
  17. height:auto;
  18. width: 100%;
  19. opacity: 0.8;
  20. }
  21. .theme.active .theme-screenshot img {
  22. opacity: 1;
  23. }
  24. .theme .theme-screenshot.blank, .theme-overlay .screenshot.blank {
  25. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=)
  26. }
  27. .theme .more-details {
  28. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  29. opacity: 0;
  30. position: absolute;
  31. top: 35%;
  32. right: 25%;
  33. left: 25%;
  34. background: #23282d;
  35. background: rgba(0, 0, 0, .7);
  36. color: #fff;
  37. font-size: 15px;
  38. text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
  39. -webkit-font-smoothing: antialiased;
  40. font-weight: 600;
  41. padding: 15px 12px;
  42. text-align: center;
  43. -webkit-border-radius: 3px;
  44. border-radius: 3px;
  45. -webkit-transition: opacity .1s ease-in-out;
  46. transition: opacity .1s ease-in-out;
  47. }
  48. .theme .theme-author {
  49. background: #23282d;
  50. color: #eee;
  51. display: none;
  52. font-size: 14px;
  53. margin: 0 10px;
  54. padding: 5px 10px;
  55. position: absolute;
  56. bottom: 56px;
  57. }
  58. .theme .theme-name {
  59. font-size: 15px;
  60. font-weight: 600;
  61. margin: 0;
  62. padding: 15px;
  63. overflow: hidden;
  64. white-space: nowrap;
  65. text-overflow: ellipsis;
  66. background: #ecf0f5;
  67. }
  68. .theme.active .theme-name {
  69. background: #e14d43;
  70. color: #fff;
  71. font-weight: 300;
  72. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5);
  73. box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5);
  74. }
  75. .theme.active .theme-name span {
  76. font-weight: 600;
  77. }
  78. .theme .theme-actions {
  79. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  80. display: none;
  81. -webkit-transition: opacity .1s ease-in-out;
  82. transition: opacity .1s ease-in-out;
  83. position: absolute;
  84. bottom: 0;
  85. right: 0;
  86. height: 46px;
  87. padding: 0 15px;
  88. line-height: 45px;
  89. background: rgba(244, 244, 244, .7);
  90. border-left: 1px solid rgba(0, 0, 0, .05);
  91. }
  92. .theme.active .theme-actions {
  93. background: rgba(49, 49, 49, .7);
  94. border-left: none;
  95. opacity: 1;
  96. display: block;
  97. }
  98. .theme:hover .theme-actions {
  99. display: block;
  100. }
  101. .theme:hover .more-details {
  102. opacity: 1;
  103. }
  104. .theme:hover .theme-screenshot img {
  105. opacity: 0.5;
  106. }
  107. .theme-screenshots {
  108. text-align: center;
  109. }
  110. .theme-overlay .screenshot {
  111. overflow: hidden;
  112. max-height:662px;
  113. line-height:662px;
  114. }
  115. .theme-overlay .screenshot img {
  116. height: auto;
  117. max-width: 100%;
  118. border: 1px solid #fff;
  119. box-sizing: border-box;
  120. -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
  121. box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
  122. }
  123. .theme-overlay .theme-name {
  124. color: #23282d;
  125. font-size: 32px;
  126. font-weight: 100;
  127. margin: 10px 0 0;
  128. line-height: 1.3;
  129. }
  130. .theme-overlay .theme-version {
  131. color: #999;
  132. font-size: 13px;
  133. font-weight: 400;
  134. float: none;
  135. display: inline-block;
  136. margin-left: 10px;
  137. }
  138. .theme-overlay .theme-author {
  139. color: #686868;
  140. font-size: 16px;
  141. font-weight: 400;
  142. margin: 15px 0 25px;
  143. }
  144. .theme-overlay .theme-description {
  145. color: #555;
  146. font-size: 15px;
  147. font-weight: 400;
  148. line-height: 1.5;
  149. margin: 30px 0 0;
  150. }
  151. .theme-overlay .theme-tags {
  152. border-top: 3px solid #eee;
  153. color: #82878c;
  154. font-size: 13px;
  155. font-weight: 400;
  156. margin: 30px 0;
  157. padding-top: 20px;
  158. }
  159. .theme-overlay .current-label {
  160. background: #32373c;
  161. color: #fff;
  162. font-size: 11px;
  163. display: inline-block;
  164. padding: 2px 8px;
  165. -webkit-border-radius: 2px;
  166. border-radius: 2px;
  167. margin: 0 0 -10px;
  168. user-select: none;
  169. }
  170. .upload-theme {
  171. box-sizing: border-box;
  172. overflow: hidden;
  173. position: relative;
  174. }
  175. .upload-theme .install-help {
  176. color: #999;
  177. font-size: 18px;
  178. font-style: normal;
  179. margin: 0;
  180. padding: 40px 0 0;
  181. text-align: center;
  182. }
  183. .upload-theme .wp-upload-form {
  184. background: #fafafa;
  185. border: 1px solid #e5e5e5;
  186. padding: 30px;
  187. margin: 30px auto;
  188. max-width: 500px;
  189. }
  190. #template textarea {
  191. font-family: Consolas,Monaco,monospace;
  192. font-size: 13px;
  193. background: #f9f9f9;
  194. outline: 0;
  195. }