1
0

test.css 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532
  1. body {
  2. font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", sans-serif
  3. }
  4. h1, .h1, h2, .h2, h3, .h3, h4, .h4, .lead {
  5. font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif
  6. }
  7. body {
  8. padding-top: 30px
  9. }
  10. @media (min-width: 768px) {
  11. .navbar {
  12. min-height: 40px
  13. }
  14. .navbar-nav > li > a {
  15. font-size: 14px;
  16. padding-top: 11px;
  17. padding-bottom: 11px
  18. }
  19. .navbar-brand {
  20. padding-top: 0;
  21. padding-bottom: 0;
  22. line-height: 42px;
  23. height: 42px
  24. }
  25. }
  26. .jumbotron {
  27. position: relative;
  28. padding: 40px 0;
  29. color: #fff;
  30. text-align: center;
  31. text-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 0 30px rgba(0, 0, 0, .075);
  32. background: #020031;
  33. background: -moz-linear-gradient(45deg, #020031 0, #6d3353 100%);
  34. background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #020031), color-stop(100%, #6d3353));
  35. background: -webkit-linear-gradient(45deg, #020031 0, #6d3353 100%);
  36. background: -o-linear-gradient(45deg, #020031 0, #6d3353 100%);
  37. background: -ms-linear-gradient(45deg, #020031 0, #6d3353 100%);
  38. background: linear-gradient(45deg, #020031 0, #6d3353 100%);
  39. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#020031', endColorstr='#6d3353', GradientType=1);
  40. -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, .2), inset 0 -3px 7px rgba(0, 0, 0, .2);
  41. -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, .2), inset 0 -3px 7px rgba(0, 0, 0, .2);
  42. box-shadow: inset 0 3px 7px rgba(0, 0, 0, .2), inset 0 -3px 7px rgba(0, 0, 0, .2)
  43. }
  44. .jumbotron a {
  45. color: #fff;
  46. color: rgba(255, 255, 255, .5);
  47. -webkit-transition: all .2s ease-in-out;
  48. -moz-transition: all .2s ease-in-out;
  49. transition: all .2s ease-in-out
  50. }
  51. .jumbotron aa:hover {
  52. color: #fff;
  53. text-shadow: 0 0 10px rgba(255, 255, 255, .25)
  54. }
  55. .jumbotron .container {
  56. position: relative;
  57. z-index: 2
  58. }
  59. .jumbotron:after {
  60. content: '';
  61. display: block;
  62. position: absolute;
  63. top: 0;
  64. right: 0;
  65. bottom: 0;
  66. left: 0;
  67. background: url(../img/bs-docs-masthead-pattern.png) repeat center center;
  68. opacity: .4
  69. }
  70. @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1) {
  71. .jumbotron:after {
  72. background-size: 150px 150px
  73. }
  74. }
  75. .masthead {
  76. padding: 60px 0 80px;
  77. margin-bottom: 0;
  78. color: #fff
  79. }
  80. @media screen and (min-width: 768px) {
  81. .masthead {
  82. padding: 90px 0 110px
  83. }
  84. }
  85. .masthead h1 {
  86. font-size: 60px;
  87. line-height: 1;
  88. letter-spacing: -2px;
  89. font-weight: 700
  90. }
  91. @media screen and (min-width: 768px) {
  92. .masthead h1 {
  93. font-size: 90px
  94. }
  95. }
  96. @media screen and (min-width: 992px) {
  97. .masthead h1 {
  98. font-size: 100px
  99. }
  100. }
  101. .masthead h2 {
  102. font-size: 18px;
  103. font-weight: 200;
  104. line-height: 1.25
  105. }
  106. @media screen and (min-width: 768px) {
  107. .masthead h2 {
  108. font-size: 24px
  109. }
  110. }
  111. @media screen and (min-width: 992px) {
  112. .masthead h2 {
  113. font-size: 30px
  114. }
  115. }
  116. .masthead p {
  117. font-size: 40px;
  118. font-weight: 200;
  119. line-height: 1.25
  120. }
  121. .masthead .masthead-button-links {
  122. margin-top: 30px
  123. }
  124. .masthead-links {
  125. margin: 0;
  126. padding: 0;
  127. list-style: none
  128. }
  129. .masthead-links li {
  130. display: inline;
  131. padding: 0 10px;
  132. color: rgba(255, 255, 255, .25)
  133. }
  134. .masthead-links li a:hover {
  135. color: #fff
  136. }
  137. .subhead {
  138. text-align: center;
  139. border-bottom: 1px solid #ddd
  140. }
  141. @media screen and (min-width: 768px) {
  142. .subhead {
  143. text-align: left
  144. }
  145. }
  146. .subhead h1 {
  147. font-size: 60px
  148. }
  149. .subhead p {
  150. margin-bottom: 20px
  151. }
  152. @media screen and (min-width: 768px) {
  153. .subhead p {
  154. text-align: left
  155. }
  156. }
  157. .btn-primary.btn-shadow {
  158. -webkit-box-shadow: inset 0 -4px 0 #2a6496;
  159. box-shadow: inset 0 -4px 0 #2a6496;
  160. border: 0;
  161. color: #fff
  162. }
  163. .btn-lg.btn-shadow {
  164. padding: 13px 35px 17px
  165. }
  166. .bc-social {
  167. padding: 15px 0;
  168. text-align: center;
  169. background-color: #f5f5f5;
  170. border-top: 1px solid #fff;
  171. border-bottom: 1px solid #ddd
  172. }
  173. .bc-social-buttons {
  174. margin-left: 0;
  175. margin-bottom: 0;
  176. padding-left: 0;
  177. list-style: none
  178. }
  179. .bc-social-buttons li {
  180. display: inline-block;
  181. line-height: 1;
  182. color: #555
  183. }
  184. .bc-social-buttons li .fa {
  185. font-size: 18px;
  186. margin-right: 3px
  187. }
  188. .bc-social-buttons li .fa-weibo {
  189. font-size: 20px
  190. }
  191. .bc-social-buttons li a {
  192. color: #555
  193. }
  194. .bc-social-buttons li.social-qq:hover {
  195. color: #428bca
  196. }
  197. .bc-social-buttons li.social-weibo a:hover {
  198. color: #d9534f
  199. }
  200. .bc-social-buttons > li + li:before {
  201. padding: 0 10px;
  202. color: #ccc;
  203. content: "|"
  204. }
  205. .projects .thumbnail {
  206. display: block;
  207. margin-left: auto;
  208. margin-right: auto;
  209. text-align: center;
  210. max-width: 310px;
  211. margin-bottom: 30px;
  212. border-radius: 0
  213. }
  214. .projects .thumbnail .caption {
  215. height: 200px;
  216. overflow-y: hidden;
  217. color: #555
  218. }
  219. .projects .thumbnail .caption a:hover, .projects .thumbnail .caption a:focus {
  220. text-decoration: none
  221. }
  222. .projects .thumbnail img {
  223. max-width: 100%;
  224. height: auto
  225. }
  226. .projects-header {
  227. width: 60%;
  228. text-align: center;
  229. margin: 60px 0 10px;
  230. font-weight: 200;
  231. margin-bottom: 40px;
  232. display: block;
  233. margin-left: auto;
  234. margin-right: auto
  235. }
  236. .projects-header h2 {
  237. font-size: 30px;
  238. letter-spacing: -1px
  239. }
  240. @media screen and (min-width: 768px) {
  241. .projects-header h2 {
  242. font-size: 42px
  243. }
  244. }
  245. .nav-sub {
  246. padding-top: 10px;
  247. padding-bottom: 10px;
  248. margin-top: 70px;
  249. border-top: 1px solid #eee
  250. }
  251. .footer {
  252. color: #777;
  253. padding: 30px 0;
  254. border-top: 1px solid #e5e5e5;
  255. margin-top: 70px
  256. }
  257. .footer a {
  258. color: #777
  259. }
  260. .footer-top .about > div {
  261. height: 110px;
  262. margin-bottom: 10px
  263. }
  264. .footer-top .about > div h4 {
  265. color: #563d7c;
  266. font-size: 16px
  267. }
  268. .footer-bottom {
  269. font-size: 13px
  270. }
  271. .footer-bottom ul > li {
  272. padding: 0
  273. }
  274. .footer-bottom ul > li + li:before {
  275. padding: 0 10px;
  276. color: #ccc;
  277. content: "|"
  278. }
  279. #scrollUp {
  280. background-color: #777;
  281. color: #eee;
  282. font-size: 40px;
  283. line-height: 1;
  284. text-align: center;
  285. text-decoration: none;
  286. bottom: 20px;
  287. right: 20px;
  288. overflow: hidden;
  289. width: 46px;
  290. height: 46px;
  291. border: none;
  292. opacity: .8
  293. }
  294. #scrollUp:hover {
  295. background-color: #333
  296. }
  297. @media screen and (min-width: 992px) {
  298. #scrollUp {
  299. bottom: 100px
  300. }
  301. }
  302. .bc-sidebar {
  303. margin-top: 30px
  304. }
  305. .bc-sidebar > ul > li > a {
  306. display: block;
  307. margin: 0 0 -1px;
  308. padding: 8px 14px;
  309. border: 1px solid #e5e5e5
  310. }
  311. .excerpt-list {
  312. margin-top: 60px
  313. }
  314. .excerpt {
  315. min-height: 120px;
  316. border: 1px solid #eee;
  317. position: relative;
  318. margin-bottom: 10px;
  319. padding: 20px 20px 20px 24px
  320. }
  321. .excerpt-title {
  322. font-size: 24px;
  323. margin-top: 0
  324. }
  325. .excerpt-title a {
  326. color: #555
  327. }
  328. .excerpt-title a:hover, .excerpt-title a:active {
  329. color: #3071a9
  330. }
  331. .excerpt-meta {
  332. position: absolute;
  333. bottom: 12px
  334. }
  335. .excerpt-tags {
  336. color: #777
  337. }
  338. .excerpt-tags .glyphicon {
  339. position: relative;
  340. top: 2px;
  341. color: #eee
  342. }
  343. .excerpt-tags a, .excerpt-tags span {
  344. color: #777;
  345. font-size: 12px
  346. }
  347. .post {
  348. position: relative;
  349. margin-top: 60px;
  350. max-width: 680px;
  351. display: block;
  352. margin-left: auto;
  353. margin-right: auto
  354. }
  355. .post-header h1, .post-header h2 {
  356. font-size: 32px;
  357. margin: 0 0 45px;
  358. position: relative;
  359. text-align: center
  360. }
  361. @media (min-width: 768px) {
  362. .post-header h1, .post-header h2 {
  363. font-size: 36px
  364. }
  365. }
  366. .post-header h1:after, .post-header h2:after {
  367. border-top: 1px solid #e5e5e5;
  368. bottom: 0;
  369. content: "";
  370. left: 50%;
  371. margin: 0 0 0 -30%;
  372. position: absolute;
  373. width: 60%
  374. }
  375. .post-header h1 a, .post-header h2 a {
  376. color: #363636;
  377. display: block;
  378. padding: 65px 0 20px;
  379. position: relative
  380. }
  381. .post-header h1 a:hover, .post-header h2 a:hover {
  382. color: #428bca
  383. }
  384. .post-header h1 a:before, .post-header h2 a:before {
  385. border-top: 1px solid #e5e5e5;
  386. bottom: -4px;
  387. content: "";
  388. left: 50%;
  389. margin: 0 0 0 -27%;
  390. position: absolute;
  391. width: 60%
  392. }
  393. .post-header h1 a:after, .post-header h2 a:after {
  394. border-top: 1px solid #e5e5e5;
  395. bottom: -3px;
  396. content: "";
  397. left: 50%;
  398. margin: 0 0 0 -28%;
  399. position: absolute;
  400. width: 60%
  401. }
  402. @media (min-width: 768px) {
  403. .post-header h1 a, .post-header h2 a {
  404. padding-left: 65px;
  405. padding-right: 65px
  406. }
  407. }
  408. .post-content {
  409. font-size: 16px;
  410. line-height: 1.8;
  411. padding-top: 20px;
  412. padding-bottom: 20px
  413. }
  414. .post-content p, .post-content pre, .post-content ul, .post-content ol, .post-content dl, .post-content form, .post-content hr, .post-content table, .post-content blockquote {
  415. margin-bottom: 1.8em
  416. }
  417. .post-content blockquote {
  418. font-size: 16px
  419. }
  420. .post-content pre {
  421. margin-top: -20px
  422. }
  423. .post-content li > p {
  424. margin-bottom: 5px
  425. }
  426. .post-content img, .post-content video, .post-content embed, .post-content iframe {
  427. max-width: 100%
  428. }
  429. .post-content img {
  430. height: auto
  431. }
  432. article.page {
  433. margin-top: 0;
  434. max-width: none
  435. }
  436. article.page .post-content {
  437. padding-top: 0
  438. }
  439. article.page .post-content h2 {
  440. font-size: 36px;
  441. padding-bottom: 9px;
  442. margin: 40px 0 20px;
  443. border-bottom: 1px solid #eee
  444. }