diaspora.css 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  1. body,div,h1,h2,h3,h4,h5,p,ul,li {margin:0;padding:0;font-weight:normal;list-style:none;}
  2. html {-webkit-text-size-adjust:100%;}
  3. html,body {-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;background:#fff;}
  4. body {font-family:'PingFang SC','Hiragino Sans GB','Microsoft Yahei','WenQuanYi Micro Hei',sans-serif;font-size:14px;position:relative;overflow-x:hidden;}
  5. body:before {background:grey;position:absolute;content:'';display:block;width:14px;height:14px;left:50%;top:50%;margin-left:-7px;margin-top:-7px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-webkit-animation:loading 2s ease-out forwards infinite;-moz-animation:loading 2s ease-out forwards infinite;display:none;}
  6. body.loading:before {display:block;}
  7. @-webkit-keyframes loading {
  8. 0% {-webkit-transform:scale(0.3);}
  9. 50% {-webkit-transform:scale(1.0);}
  10. 100% {-webkit-transform:scale(0.3);}
  11. }
  12. @-moz-keyframes loading {
  13. 0% {-moz-transform:scale(0.3);}
  14. 50% {-moz-transform:scale(1.0);}
  15. 100% {-moz-transform:scale(0.3);}
  16. }
  17. body.loading #container,body.loading #single,body.loading .nav {opacity:0;}
  18. html.loading,body.loading {height:100%;overflow:hidden;}
  19. a,a:hover {text-decoration:none;}
  20. img {display:block;max-width:100%;height:auto;}
  21. audio {display:none;visibility:hidden;opacity:0;width:0;height:0;}
  22. #screen {position:relative;}
  23. #mark {width:100%;height:560px;overflow:hidden;}
  24. .layer {position:relative;}
  25. #cover {position:absolute;max-width:none;}
  26. #header {position:absolute;top:70px;width:100%;}
  27. #header > div {margin:0 60px;position:relative;}
  28. .icon-menu {font-size:20px;padding:6px 6px 5px;border-radius:2px;cursor:pointer;position:absolute;z-index:4;right:0;top:0;margin-top:-3px;background:rgba(255,255,255,.9);}
  29. .image-logo {z-index:4;position:relative;display:inline-block;width:75px;height:32px;}
  30. #vibrant {position:absolute;top:0;left:0;width:100%;height:100%;}
  31. #vibrant div {position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;background-color:#000;}
  32. #post0 {width:28%;position:absolute;top:42%;left:10%;}
  33. #post0 p:first-child {color:#fff;font-size:12px;}
  34. #post0 h2 {font-size:28px;margin-top:15px;}
  35. #post0 h2 a {color:#fff;}
  36. #post0 h2 + p {color:#fff;font-size:14px;margin-top:30px;}
  37. .post {margin:100px auto 0;width:1200px;position:relative;}
  38. .post > a {display:inline-block;width:680px;height:440px;overflow:hidden;position:relative;z-index:3;}
  39. .else {position:absolute;background:#fff;text-align:left;top:20px;height:398px;width:498px;border:1px solid #eaeaea;}
  40. .post:nth-child(odd) {text-align:left;}
  41. .post:nth-child(even) {text-align:right;}
  42. .post:nth-child(odd) .else {left:660px;}
  43. .post:nth-child(even) .else {right:660px;}
  44. .else p:first-child {color:#999;font-size:12px;margin:80px 0 0 80px;}
  45. .else h3 {font-size:30px;line-height:1.1;margin:10px 100px 0 80px;}
  46. .else h3 a {color:#333;}
  47. .else h3 + p {color:#555;margin:10px 100px 0 80px;font-size:14px;line-height:1.8;}
  48. .here {position:absolute;left:80px;bottom:80px;color:#999;font-size:13px;}
  49. .here span {display:inline-block;vertical-align:middle;margin-right:10px;font-family:"icomoon","Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;}
  50. .here span:before {display:inline-block;vertical-align:top;margin-right:7px;font-size:16px;}
  51. .here a {display:inline-block;cursor:default;}
  52. .here .icon-like {color:#999!important;margin-right:0;}
  53. .here .likeThis .count {display:inline-block;position:static;color:#999;background:none;padding:0;width:auto;}
  54. .here .likeThis:hover .count {display:inline-block;}
  55. .here .likeThis.active .icon-like {color:#999;}
  56. #pager {text-align:center;margin:70px 0 0;position:relative;}
  57. #pager a {font-size:14px;letter-spacing:5px;color:#666;border:1px solid #dadada;padding:10px 40px;background:#fff;}
  58. #loader {display:none;position:fixed;top:0;width:100%;height:3px;z-index:100;background-image:-webkit-linear-gradient(left,#F16F5C 0%,#F16F5C 12.5%,#5B56DD 12.5%,#5B56DD 25%,#E15CED 25%,#E15CED 37.5%,#27E559 37.5%,#27E559 50%,#18C8C9 50%,#18C8C9 62.5%,#DC8987 62.5%,#DC8987 75%,#BB83D6 75%,#BB83D6 87.5%,#E774BD 87.5%,#E774BD 100%);background-image:-moz-linear-gradient(left,#F16F5C 0%,#F16F5C 12.5%,#5B56DD 12.5%,#5B56DD 25%,#E15CED 25%,#E15CED 37.5%,#27E559 37.5%,#27E559 50%,#18C8C9 50%,#18C8C9 62.5%,#DC8987 62.5%,#DC8987 75%,#BB83D6 75%,#BB83D6 87.5%,#E774BD 87.5%,#E774BD 100%);}
  59. #top {height:50px;text-align:center;border-bottom:1px solid #f7f7f7;background:#fefefe;width:100%;position:fixed;top:0;z-index:10;display:none;}
  60. body.touch #top {position:relative;}
  61. .icon-icon {color:#333;font-size:20px;position:absolute;left:14px;top:16px;}
  62. .image-icon {-webkit-background-size:24px 24px;-moz-background-size:24px 24px;background-size:24px 24px;background-position:center center;background-repeat:no-repeat;width:24px;height:24px;position:absolute;left:14px;top:15px;color:#333;}
  63. .image-icon:hover {color:black;}
  64. .subtitle {color:#666;font-size:14px;margin-top:16px;display:none;}
  65. .icon-play,.icon-pause,.icon-images {position:absolute;left:70px;color:#666;top:17px;font-size:18px;cursor:pointer;}
  66. .icon-images {left:100px;}
  67. .icon-images.active {color:#EF6D57;}
  68. .like-icon {position:relative;}
  69. .icon-like {color:#666;}
  70. #top .count {display:none;}
  71. .likeThis.active .icon-like,.icon-like:hover {color:#EF6D57;}
  72. .social {position:absolute;right:0;height:30px;top:12px;}
  73. .share a {display:inline-block;color:#666;margin-right:15px;}
  74. .share a:hover {color:#333;}
  75. .share {position:relative;}
  76. .social > div {display:inline-block;font-size:20px;color:#666;cursor:pointer;margin-left:15px;}
  77. #qr {z-index:10;display:none;position:absolute;background:#fff;padding:16px;border:1px solid #f7f7f7;right:10px;top:50px;}
  78. .bar {position:absolute;height:100%;background:rgba(0,0,0,.07);z-index:-1;width:0;-webkit-transition:width .5s ease;-moz-transition:width .5s ease;transition:width .5s ease;}
  79. .scrollbar {position:absolute;height:2px;width:10px;top:0;background-color:#50bcb6;-webkit-transition:width .5s ease;-moz-transition:width .5s ease;transition:width .5s ease;}
  80. body.touch .scrollbar {display:none;}
  81. .nav {position:fixed;height:100%;width:100%;background:rgba(255,255,255,.97);z-index:3;top:-100%;-webkit-transition:top 0.3s cubic-bezier(0.4,0,0.2,1);-moz-transition:top 0.3s cubic-bezier(0.4,0,0.2,1);transition:top 0.3s cubic-bezier(0.4,0,0.2,1);}
  82. body.mu {overflow:hidden;height:100%;}
  83. html.mu {height:100%;}
  84. body.mu .icon-menu {color:#333;background: none;}
  85. body.mu .icon-menu:before {content:"\e607";}
  86. body.mu .nav {top:0;}
  87. body.mu .icon-logo {color:#333;}
  88. .menu {text-align:center;margin-top:200px;}
  89. .menu li {font-size:20px;display:inline-block;margin:0 20px 20px 0;}
  90. .menu a {color:#666;letter-spacing:1px;}
  91. .menu a:hover {color:#333;}
  92. .nav p {color:#999;font-size:12px;position:absolute;width:100%;text-align:center;bottom:30px;}
  93. .nav p a {color:#999;text-decoration:underline;}
  94. .nav p:first-letter {font-family:sans-serif;}
  95. #container {padding-bottom:100px;overflow:hidden;position:relative;}
  96. #container:before {content:'';display:block;width:1px;height:200%;position:absolute;left:50%;background:#eaeaea;top:-50%;z-index:0;}
  97. #primary {position:relative;}
  98. #single {background:#fff;position:relative;overflow-x:hidden;}
  99. .section {position:relative;width:100%;overflow:hidden;-webkit-transition:all 0.3s cubic-bezier(0.25,0.5,0.5,0.9);-moz-transition:all 0.3s cubic-bezier(0.25,0.5,0.5,0.9);transition:all 0.3s cubic-bezier(0.25,0.5,0.5,0.9);}
  100. body.touch,body.touch .article {margin-top:0;}
  101. .zoom:before {opacity:0;color:#fff;font-size:20px;display:block;z-index:3;left:50%;top:70%;padding:5px;margin-top:-15px;margin-left:-15px;position:absolute;background:rgba(0,0,0,.7);-webkit-transition:all 0.3s cubic-bezier(0.25,0.5,0.5,0.9);-moz-transition:all 0.3s cubic-bezier(0.25,0.5,0.5,0.9);transition:all 0.3s cubic-bezier(0.25,0.5,0.5,0.9);}
  102. .zoom:hover:before {opacity:1;top:50%;}
  103. .touch .zoom:hover:before {opacity:0;}
  104. .icon-arrow-left:before {content:'\e606';position:absolute;left:0;top:50%;margin-top:-30px;color:#666;}
  105. .icon-arrow-right:before {content:'\e605';position:absolute;right:0;top:50%;margin-top:-30px;color:#666;}
  106. h1.title {font-size:30px;color:#333;line-height:1.3;position:relative;font-weight:bold;}
  107. .page .content:before {display:none;}
  108. .stuff {margin-top:20px;color:#666;font-size:13px;}
  109. .stuff span {display:inline-block;margin-right:20px;}
  110. .stuff .likeThis {pointer-events:none;}
  111. .stuff .icon-like {display:none;}
  112. .stuff .count {color:#666;}
  113. .comment {margin:50px auto;}
  114. .comment.link,.downloadlink {cursor:pointer;letter-spacing:5px;border:1px solid #dadada;width:170px;text-align:center;color:#666;font-size:14px;padding:10px 0;}
  115. .comment .gt-comments-null{display:none;}
  116. .comment .gt-header-textarea{border-radius:0;background: white;}
  117. .comment .gt-popup{margin-top:8px;}
  118. .comment .gt-counts a{color:black;border-bottom:0;pointer-events:none;}
  119. .comment .gt-avatar-github{display:none;}
  120. .comment .gt-header-avatar{display:none;}
  121. .comment .gt-header-comment{margin-left: 0;!important;}
  122. .comment .gt-header-preview{border-radius:0;}
  123. .comment .gt-btn-public{border-radius:0;}
  124. .comment .gt-btn-preview{border-radius:0;}
  125. .comment .gt-btn-login{border-radius:0;}
  126. .comment .gt-ico-tip{display:none;}
  127. .comment .gt-btn-public .gt-btn-text:after{content:"(Cmd | Ctrl + Enter)";}
  128. .comment .gt-meta{margin:0; border:0;}
  129. #preview {position:fixed;top:0;width:100%;height:100%;z-index:5;background:#fff;left:100%;-moz-transition:all 0.3s cubic-bezier(0,0,0.2,1);-webkit-transition:all 0.3s cubic-bezier(0,0,0.2,1);transition:all 0.3s cubic-bezier(0,0,0.2,1);overflow-y:scroll;}
  130. #preview.show {left:0;}
  131. #preview + canvas {display:none;}
  132. .article {width:70%;margin:0 auto;margin-top:50px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:flex-start;justify-content:flex-start;}
  133. .article > div {width:100%;padding:30px 0;margin:0 auto;}
  134. .article .main {width:700px;}
  135. .article .side {align-self:flex-start;flex:0 0 200px;}
  136. .article .toc {position:fixed;top:60px;right:100px;}
  137. .article .toc {width:200px;padding:1em;line-height:2.3;}
  138. .article .toc .toc-item:hover {font-weight:900;}
  139. .article .toc li a {display:inline-block;color:#737373;text-decoration:none;transition:color,padding 0.2s ease-in-out;}
  140. .article .toc li a:hover {padding-left:8px;border-left:3px solid black;}
  141. .page .main{padding:0px;}
  142. /* Icon font style */
  143. @font-face {font-family:"iconfont";src:url('//at.alicdn.com/t/font_1474439954_4508538.eot');/* IE9*/ src:url('//at.alicdn.com/t/font_1474439954_4508538.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */ url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),/* chrome,firefox */ url('//at.alicdn.com/t/font_1474439954_4508538.ttf') format('truetype'),/* chrome,firefox,opera,Safari,Android,iOS 4.2+*/ url('//at.alicdn.com/t/font_1474439954_4508538.svg#iconfont') format('svg');/* iOS 4.1- */ src:url('//at.alicdn.com/t/font_1474439954_4508538.eot')\0;/* ie8 fix */}
  144. [class^="icon-"],[class*=" icon-"] {font-family:'iconfont' !important;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;font-family:"iconfont" !important;font-size:20px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale;}
  145. .icon-scan:before {content:"\e60d";}
  146. .icon-twitter:before {content:"\e600";}
  147. .icon-view:before {content:"\e601";}
  148. .icon-like:before {content:"\e602";}
  149. .icon-menu:before {content:"\e603";}
  150. .icon-github:before {content:"\e604";}
  151. .icon-home:before {content:"\e60e";}
  152. .icon-wechat:before {content:"\e605";}
  153. .icon-pause:before {content:"\e606";}
  154. .icon-close:before {content:"\e607";}
  155. .icon-facebook:before {content:"\e608";}
  156. .icon-left:before {content:"\e609";}
  157. .icon-font:before {content:"\e60a";}
  158. .icon-play:before {content:"\e60b";}
  159. .icon-email:before {content:"\e60c";}
  160. /* tags style */
  161. .post-tags-list {margin-top:10px;display:table;}
  162. .post-tags-list-item {float:left;margin-right:10px;background:rgba(102,128,153,0.075);border-radius:0;padding:2px 5px;}
  163. .post-tags-list-link {color:rgba(44,63,81,0.5);pointer-events:none;}
  164. /* Post or Page content style */
  165. .content {margin-top:50px;font-size:15px;line-height:2;color:#232323;}
  166. .content h1 {font-size:39px}
  167. .content h2 {font-size:32px}
  168. .content h3 {font-size:26px}
  169. .content h4 {font-size:19px}
  170. .content h5 {font-size:15px}
  171. .content h6 {font-size:13px}
  172. .content a {background:transparent;color:#1980e6;text-decoration:none;}
  173. .content a:hover {color:#518dca;}
  174. .content hr {margin-top:21px;margin-bottom:21px;border:0;border-top:1px solid rgba(102,128,153,0.1)}
  175. .content p {margin:0 0 .8em;}
  176. .content ul,.content ol {margin:10px 0;padding-left:20px;}
  177. .content ul li {list-style:disc;margin:5px 0;}
  178. .content ol li {list-style:decimal;margin:5px 0;}
  179. .content > h1,.content > h2,.content > h3,.content > h4,.content > h5,.content > h6 {margin-top:2rem;margin-bottom:0.8rem;color:#000;}
  180. .content > h1:first-child,.content > h2:first-child,.content > h3:first-child,.content > h4:first-child,.content > h5:first-child,.content > h6:first-child {margin-top:0;}
  181. .content img {cursor:pointer;}
  182. .content pre,.content .highlight {background:#2d2d2d;margin:1.6rem 0;padding:0.8rem 0.8rem;border-style:solid;border-width:1px 0;overflow:auto;color:#ccc;line-height:20px;}
  183. .content .gutter {display:none;}
  184. .content .highlight .gutter pre {color:#666;font-size:0.9rem;}
  185. .content code,.content pre {font-family:"Source Code Pro",monospace}
  186. .content code {background:rgba(99,99,99,0.07);color:#ef459c;padding:1px 2px;border-radius:2px;}
  187. .content pre code {background:none;text-shadow:none;padding:0;}
  188. .content blockquote {color:#656565;margin:0 0 1.1em;border-left:3px solid #efefef;border-left-width:6px;background-color:rgba(119,119,119,0.05);border-top-right-radius:5px;border-bottom-right-radius:5px;padding:15px 20px;}
  189. .content blockquote p {margin:0;}
  190. .content table {margin:15px 0;border-collapse:collapse;display:table;width:100%;table-layout:fixed;word-wrap:break-word;}
  191. .content table tr {border-top:1px solid #ccc;background-color:#fff;}
  192. .content table th,.content table td {border:1px solid #ddd;padding:6px 13px;}
  193. .content .highlight pre {border:none;margin:0;padding:0;}
  194. .content .highlight table {margin:0;width:auto;}
  195. .content .highlight td {border:none;padding:0;}
  196. .content .highlight tr {border:0;}
  197. .content .highlight figcaption {font-size:0.85em;color:#999;line-height:1em;margin-bottom:1em;}
  198. .content .highlight figcaption a {float:right;}
  199. .content .highlight .gutter pre {text-align:right;padding-right:20px;}
  200. .content .highlight .line {height:20px;}
  201. .content .video-container {position:relative;padding-bottom:56.25%;padding-top:25px;height:0;}
  202. .content .video-container iframe {position:absolute;top:0;left:0;width:100%;height:100%;}
  203. pre .comment,pre .title {color:#999;}
  204. pre .variable,pre .attribute,pre .tag,pre .regexp,pre .ruby .constant,pre .xml .tag,pre .title,pre .xml .pi,pre .xml .doctype,pre .html .doctype,pre .css .id,pre .css .class,pre .css .pseudo {color:#f2777a;}
  205. pre .number,pre .preprocessor,pre .built_in,pre .literal,pre .params,pre .constant {color:#f99157;}
  206. pre .class,pre .ruby .class .title,pre .css .rules .attribute {color:#99cc99;}
  207. pre .string,pre .value,pre .inheritance,pre .header,pre .ruby .symbol,pre .xml .cdata {color:#99cc99;}
  208. pre .css .hexcolor {color:#66cccc;}
  209. pre .function,pre .python .decorator,pre .python .title,pre .ruby .function .title,pre .ruby .title .keyword,pre .perl .sub,pre .javascript .title,pre .coffeescript .title {color:#6699cc;}
  210. pre .keyword,pre .javascript .function {color:#cc99cc;}
  211. /* Responsive style */
  212. @media screen and (max-width:1200px) {
  213. #header > div {width:900px;margin:0 auto;}
  214. #post0 {width:32%;}
  215. #post0 h2 {font-size:24px;}
  216. .post {width:900px;}
  217. .post > a {width:480px;height:310px;}
  218. .else {top:10px;width:420px;height:290px;}
  219. .post:nth-child(odd) .else {left:450px;}
  220. .post:nth-child(even) .else {right:450px;}
  221. .else p:first-child {font-size:12px;margin:50px 0 0 60px;}
  222. .else h3 {font-size:24px;margin:10px 60px 0 60px;}
  223. .else h3 + p {margin:10px 60px 0 60px;}
  224. .here {left:60px;bottom:50px;}
  225. .article{width:100%;}
  226. .article .main{width:94%;}
  227. .article .side {display:none}
  228. .comment .gt-btn-public .gt-btn-text:after{content:"";}
  229. }
  230. @media screen and (max-width:900px) {
  231. #mark {height:480px;}
  232. #header > div {width:90%;}
  233. #vibrant polygon {transform:translateX(-10%);-moz-transform:translateX(-10%);-webkit-transform:translateX(-10%);}
  234. #post0 {width:40%;}
  235. #post0 h2 {font-size:20px;}
  236. .post {width:100%;margin-top:60px;background:#fff;padding-bottom:30px;border-bottom:1px solid #eaeaea;}
  237. .post > a {display:block;margin:0 auto;width:100%;height:auto;}
  238. .post > a img {margin:0 auto;}
  239. .else {height:auto;position:static;width:100%;margin:0 auto;background:transparent;border:none;}
  240. .else p:first-child {margin:30px 0 0 20px;}
  241. .else h3 {font-size:24px;margin:10px 30px 0 20px;}
  242. .else h3 + p {margin:10px 30px 0 20px;}
  243. .here {position:static;margin:20px 0 20px 20px;}
  244. .article{width:100%;}
  245. .article .main{width:94%;}
  246. .article .side {display:none}
  247. .comment .gt-btn-public .gt-btn-text:after{content:"";}
  248. }
  249. @media screen and (max-width:780px) {
  250. #header {top:40px;}
  251. #vibrant svg {display:none;}
  252. #vibrant div {opacity:0.3;}
  253. #container {padding-bottom:50px;}
  254. #post0 {bottom:60px;top:auto;width:70%;left:5%;}
  255. .menu {width:80%;margin:160px auto 0;}
  256. .menu li {font-size:16px;}
  257. #pager {margin:30px 0 0;}
  258. h1.title {font-size:24px;}
  259. .tab {display:none;}
  260. .icon-scan {display:none!important;}
  261. .icon-images {left:80px;}
  262. .icon-pause,.icon-play {left:50px;}
  263. .comment.link {width:140px;padding:5px 0;}
  264. .article{width:100%;}
  265. .article .main{width:94%;}
  266. .article .side {display:none}
  267. .comment .gt-btn-public .gt-btn-text:after{content:"";}
  268. }
  269. @media screen and (max-width:480px) {
  270. #post0 p:first-child {display:block;}
  271. #container:before {display:none;}
  272. #post0 h2 {text-align:left;margin:0 10px 0 0;}
  273. #post0 h2 + p {text-align:left;margin:10px 20px 0 0;color:#f2f2f2;font-size:14px;}
  274. #post0 h2 a {color:#fff;}
  275. #post0 .summary {display:none;}
  276. .stuff span {margin-right:10px;}
  277. .stuff span:first-child {display:none;}
  278. .content table {font-size:smaller;}
  279. .content table tr td {padding:6px;}
  280. .article {width:100%;}
  281. .article .main{width:94%;}
  282. .article .side {display:none}
  283. .comment .gt-btn-public .gt-btn-text:after{content:"";}
  284. }