header.css 28 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504
  1. html {
  2. overflow:auto
  3. }
  4. body {
  5. background-color:#edf1f5;
  6. min-width:1263px;
  7. overflow:hidden
  8. }
  9. header {
  10. height:62px;
  11. background-color:#00a5e0;
  12. position:relative;
  13. z-index:1
  14. }
  15. .logo {
  16. float:left;
  17. width:200px;
  18. height:62px;
  19. margin-left:17px;
  20. background:url(images/logo_beta.png) no-repeat center;
  21. text-indent:-99em;
  22. overflow:hidden
  23. }
  24. .header_l {
  25. float:left
  26. }
  27. .header_r {
  28. float:right;
  29. height:100%
  30. }
  31. .header_avatar {
  32. display:inline-block;
  33. height:34px;
  34. padding:14px 35px 0 0;
  35. letter-spacing:-.25em;
  36. vertical-align:top;
  37. white-space:nowrap
  38. }
  39. .header_avatar .avatar {
  40. width:34px;
  41. height:34px;
  42. border-radius:34px;
  43. font-size:0
  44. }
  45. .header_name {
  46. display:inline-block;
  47. height:100%;
  48. line-height:32px;
  49. margin:0 2px 0 10px;
  50. font-weight:400;
  51. color:#fff;
  52. letter-spacing:0;
  53. vertical-align:top;
  54. cursor:pointer
  55. }
  56. .header_avatar>.icon {
  57. position:absolute;
  58. margin-top:7px
  59. }
  60. .header_icon {
  61. display:inline-block;
  62. width:62px;
  63. height:100%;
  64. text-align:center;
  65. -webkit-transition:background-color .25s;
  66. transition:background-color .25s;
  67. cursor:pointer
  68. }
  69. .header_icon:hover {
  70. background-color:#01b0ee
  71. }
  72. .header_icon>.icon {
  73. margin-top:21px
  74. }
  75. .main {
  76. overflow:hidden
  77. }
  78. .main>aside {
  79. float:left;
  80. padding-bottom:3999em;
  81. margin-bottom:-3991em;
  82. border-right:1px solid #dbdee5;
  83. background-color:#fff
  84. }
  85. .main>aside,.logo,img {
  86. -webkit-user-select:none;
  87. -moz-user-select:none;
  88. -ms-user-select:none;
  89. user-select:none
  90. }
  91. :root .main>aside {
  92. display:none
  93. }
  94. @media all and (min-width:1281px) {
  95. .main {
  96. margin-right:calc(100% - 100vw)
  97. }
  98. body {
  99. min-width:calc(1280px - 100vw - 100%)
  100. }
  101. }.aside_bg {
  102. width:199px;
  103. position:absolute;
  104. top:0;
  105. bottom:0;
  106. border-right:1px solid #dbdee5;
  107. background-color:#fff
  108. }
  109. .main>aside,.aside_bg {
  110. width:199px;
  111. -webkit-transition:width .25s;
  112. transition:width .25s
  113. }
  114. .aside_main {
  115. display:inline-block;
  116. width:100%;
  117. background-color:#fff;
  118. position:relative;
  119. white-space:nowrap
  120. }
  121. .checked .aside_main {
  122. z-index:2
  123. }
  124. .aside_toggle {
  125. display:block;
  126. height:14px;
  127. line-height:0;
  128. padding:7px 9px 0 15px;
  129. margin-bottom:-8px;
  130. text-align:right;
  131. cursor:pointer;
  132. -webkit-transition:all .25s;
  133. transition:all .25s
  134. }
  135. .aside_toggle+dl {
  136. margin-top:0
  137. }
  138. .aside_arrow {
  139. display:inline-block;
  140. width:0;
  141. height:0;
  142. border:6px solid transparent;
  143. border-right-color:#d0d4da;
  144. -webkit-transition:border-color .25s;
  145. transition:border-color .25s;
  146. overflow:hidden
  147. }
  148. .aside_toggle:hover .aside_arrow {
  149. border-right-color:#9facba
  150. }
  151. .aside_dl {
  152. margin:10px 0
  153. }
  154. .aside_dt {
  155. height:30px;
  156. line-height:30px;
  157. padding-left:22px;
  158. color:#9facba;
  159. -webkit-transition:height .25s;
  160. transition:height .25s;
  161. overflow:hidden
  162. }
  163. .aside_nav {
  164. display:block;
  165. padding:12px 20px;
  166. color:#4c5161;
  167. -webkit-transition:background-color .25s,color .5s;
  168. transition:background-color .25s,color .5s;
  169. cursor:pointer;
  170. position:relative
  171. }
  172. .aside_group>.aside_nav {
  173. display:none
  174. }
  175. .aside_nav:hover {
  176. color:#4c5161;
  177. background-color:#eceef3
  178. }
  179. .aside_nav:before,.aside_nav:after,.aside_button_add:before,.aside_button_add:after {
  180. position:absolute;
  181. top:50%;
  182. left:62px;
  183. color:#fff;
  184. z-index:1
  185. }
  186. .aside_button_add:before,.aside_button_add:after {
  187. left:50px
  188. }
  189. .aside_nav[data-title]:before,.aside_button_add:before {
  190. width:0;
  191. height:0;
  192. margin:-6px 0 0 -6px;
  193. border:6px solid transparent;
  194. border-right-color:#373c42;
  195. overflow:hidden
  196. }
  197. .aside_nav[data-title]:after,.aside_button_add:after {
  198. line-height:20px;
  199. padding:5px 10px;
  200. margin:-15px 0 0 6px;
  201. border-radius:4px;
  202. background-color:#373c42;
  203. font-size:12px;
  204. color:#fff;
  205. letter-spacing:0
  206. }
  207. .aside_nav>.icon {
  208. margin-right:7px;
  209. vertical-align:-5px;
  210. *vertical-align:-1px;
  211. text-align:center;
  212. line-height:20px
  213. }
  214. .aside_nav>.icon>img {
  215. display:none
  216. }
  217. .active>.icon[style] {
  218. visibility:hidden
  219. }
  220. .active>.icon>img {
  221. display:inline;
  222. vertical-align:middle;
  223. visibility:visible
  224. }
  225. .aside_dl .active {
  226. background-color:#00a5e0;
  227. color:#fff
  228. }
  229. .aside_divide {
  230. margin:10px;
  231. border-top:1px solid #e9ebf2
  232. }
  233. .aside_button_add {
  234. display:block;
  235. height:20px;
  236. line-height:20px;
  237. padding:8px 8px 8px 45px;
  238. margin:10px 22px 20px;
  239. border:2px dashed;
  240. color:#ccc;
  241. -webkit-transition:all .25s;
  242. transition:all .25s;
  243. overflow:hidden;
  244. cursor:pointer
  245. }
  246. .aside_shape_add {
  247. position:absolute;
  248. width:20px;
  249. height:20px;
  250. margin-left:-28px
  251. }
  252. .aside_shape_add .v,.aside_shape_add .h {
  253. position:absolute
  254. }
  255. .aside_shape_add .v {
  256. height:16px;
  257. border-left:2px solid;
  258. top:2px;
  259. left:9px
  260. }
  261. .aside_shape_add .h {
  262. width:16px;
  263. border-top:2px solid;
  264. top:9px;
  265. left:2px
  266. }
  267. .aside_button_add:hover {
  268. color:#a6a6a6;
  269. position:relative
  270. }
  271. aside.checked,.checked>.aside_bg {
  272. width:61px
  273. }
  274. .checked .aside_toggle {
  275. text-align:center;
  276. margin-bottom:3px
  277. }
  278. .checked .aside_arrow {
  279. border-right-color:transparent;
  280. border-left-color:#d0d4da
  281. }
  282. .checked .aside_toggle:hover .aside_arrow {
  283. border-left-color:#9facba;
  284. border-right-color:transparent
  285. }
  286. .checked .aside_dt {
  287. height:0;
  288. overflow:hidden
  289. }
  290. .checked .aside_nav {
  291. color:transparent;
  292. -webkit-transition:background-color .25s;
  293. transition:background-color .25s
  294. }
  295. .checked .aside_main>dl .aside_nav {
  296. letter-spacing:-9em;
  297. letter-spacing:0vw
  298. }
  299. .checked .aside_main>dl .aside_nav>.icon {
  300. margin-right:-150px;
  301. *margin-right:50px
  302. }
  303. .checked.aside_group .aside_nav {
  304. color:#4c5161;
  305. letter-spacing:0
  306. }
  307. .checked .aside_group .active {
  308. color:#fff;
  309. background-color:#00a5e0
  310. }
  311. .checked .aside_nav:hover:before,.checked .aside_button_add:hover:before {
  312. content:''
  313. }
  314. .checked .aside_nav:hover:after,.checked .aside_button_add:hover:after {
  315. content:attr(data-title)
  316. }
  317. .checked .aside_button_add:hover {
  318. overflow:visible
  319. }
  320. .checked .aside_group>.aside_nav {
  321. display:block
  322. }
  323. .checked .aside_group>.aside_nav:hover {
  324. z-index:1
  325. }
  326. .checked .aside_group .aside_dl {
  327. position:absolute;
  328. visibility:hidden
  329. }
  330. .checked>.aside_nav:before,.checked>.aside_nav:after {
  331. display:none
  332. }
  333. .checked>.aside_nav {
  334. background-color:#eceef3
  335. }
  336. .checked .checked>.aside_dl {
  337. padding:5px 0;
  338. margin-top:-95px;
  339. left:70px;
  340. border-radius:4px;
  341. background-color:#fff;
  342. box-shadow:0 1px 3px rgba(0,0,0,.1);
  343. visibility:visible
  344. }
  345. .checked .aside_group .aside_dt {
  346. position:absolute;
  347. width:0;
  348. padding:0;
  349. border:6px solid transparent;
  350. border-right-color:#fff;
  351. top:70px;
  352. left:-12px
  353. }
  354. :root .checked .aside_group .aside_dt {
  355. top:70px;
  356. left:-6px;
  357. left:-5px\9;
  358. width:8px;
  359. height:8px;
  360. border:0 none;
  361. border-left:1px solid rgba(0,0,0,.05);
  362. border-top:1px solid rgba(0,0,0,.05);
  363. background-color:#fff;
  364. background-clip:content-box;
  365. -webkit-transform:rotate(-45deg);
  366. -ms-transform:rotate(-45deg);
  367. transform:rotate(-45deg);
  368. -webkit-transition:background-color .25s;
  369. transition:background-color .25s
  370. }
  371. .checked .aside_group .i1 .aside_dt {
  372. border-right-color:#eceef3;
  373. background-color:#eceef3
  374. }
  375. .checked .aside_group .a1 .aside_dt {
  376. border-right-color:#00a5e0;
  377. background-color:#00a5e0
  378. }
  379. .checked .aside_button_add {
  380. padding-left:37px;
  381. padding-right:0;
  382. margin-left:10px;
  383. margin-right:10px
  384. }
  385. .checked .aside_button_text {
  386. position:absolute;
  387. color:transparent;
  388. visibility:hidden
  389. }
  390. .main>section {
  391. min-height:calc(100vh - 62px);
  392. overflow:hidden
  393. }
  394. .section_main {
  395. padding:0 30px
  396. }
  397. .section_auto {
  398. min-width:1003px;
  399. max-width:1440px;
  400. margin-left:auto;
  401. margin-right:auto;
  402. padding-bottom:120px
  403. }
  404. .checked ~ section .section_auto {
  405. min-width:1157px
  406. }
  407. .section_title {
  408. margin:36px 0 24px;
  409. font-size:28px
  410. }
  411. @media all and (max-width:1440px) {
  412. .section_title {
  413. font-size:26px;
  414. margin:31px 0 19px
  415. }
  416. }.section_title>.icon {
  417. position:absolute;
  418. margin-left:10px;
  419. margin-top:12px
  420. }
  421. .icon {
  422. display:inline-block;
  423. width:20px;
  424. height:20px;
  425. line-height:0;
  426. color:transparent!important;
  427. overflow:hidden;
  428. background:url(images/icons.png) no-repeat 20px 20px;
  429. -webkit-user-select:none;
  430. -moz-user-select:none;
  431. -ms-user-select:none;
  432. user-select:none
  433. }
  434. .active .icon_nav_ablity {
  435. background-position:-20px 0
  436. }
  437. .active .icon_nav_api {
  438. background-position:-60px -80px
  439. }
  440. .active .icon_nav_comment {
  441. background-position:0 -20px
  442. }
  443. .active .icon_nav_developer {
  444. background-position:-20px -20px
  445. }
  446. .active .icon_nav_fans {
  447. background-position:-40px 0
  448. }
  449. .active .icon_nav_limit {
  450. background-position:-40px -20px
  451. }
  452. .active .icon_nav_menu {
  453. background-position:0 -40px
  454. }
  455. .active .icon_nav_msg {
  456. background-position:-20px -40px
  457. }
  458. .active .icon_nav_news {
  459. background-position:-40px -40px
  460. }
  461. .active .icon_nav_pay {
  462. background-position:-60px 0
  463. }
  464. .active .icon_nav_reply {
  465. background-position:-60px -20px
  466. }
  467. .active .icon_nav_run {
  468. background-position:-60px -40px
  469. }
  470. .active .icon_nav_security {
  471. background-position:0 -60px
  472. }
  473. .active .icon_nav_send {
  474. background-position:-20px -60px
  475. }
  476. .active .icon_nav_set {
  477. background-position:-40px -60px
  478. }
  479. .active .icon_nav_source {
  480. background-position:-60px -60px
  481. }
  482. .active .icon_nav_stat {
  483. background-position:-80px 0
  484. }
  485. .active .icon_nav_tag {
  486. background-position:-80px -20px
  487. }
  488. .active .icon_nav_user {
  489. background-position:-80px -40px
  490. }
  491. .active .icon_nav_ux {
  492. background-position:-80px -60px
  493. }
  494. .active .icon_nav_verity {
  495. background-position:0 -80px
  496. }
  497. .icon_hook {
  498. background-position:-20px -80px
  499. }
  500. .icon_logout {
  501. background-position:-40px -80px
  502. }
  503. .icon_nav_ablity {
  504. background-position:0 0
  505. }
  506. .icon_nav_api {
  507. background-position:-80px -80px
  508. }
  509. .icon_nav_comment {
  510. background-position:-100px 0
  511. }
  512. .icon_nav_developer {
  513. background-position:-100px -20px
  514. }
  515. .icon_nav_fans {
  516. background-position:-100px -40px
  517. }
  518. .icon_nav_limit {
  519. background-position:-100px -60px
  520. }
  521. .icon_nav_menu {
  522. background-position:-100px -80px
  523. }
  524. .icon_nav_msg {
  525. background-position:0 -100px
  526. }
  527. .icon_nav_news {
  528. background-position:-20px -100px
  529. }
  530. .icon_nav_pay {
  531. background-position:-40px -100px
  532. }
  533. .icon_nav_reply {
  534. background-position:-60px -100px
  535. }
  536. .icon_nav_run {
  537. background-position:-80px -100px
  538. }
  539. .icon_nav_security {
  540. background-position:-100px -100px
  541. }
  542. .icon_nav_send {
  543. background-position:-120px 0
  544. }
  545. .icon_nav_set {
  546. background-position:-120px -20px
  547. }
  548. .icon_nav_source {
  549. background-position:-120px -40px
  550. }
  551. .icon_nav_stat {
  552. background-position:-120px -60px
  553. }
  554. .icon_nav_tag {
  555. background-position:-120px -80px
  556. }
  557. .icon_nav_user {
  558. background-position:-120px -100px
  559. }
  560. .icon_nav_ux {
  561. background-position:0 -120px
  562. }
  563. .icon_nav_verity {
  564. background-position:-20px -120px
  565. }
  566. .icon_title_inf:hover {
  567. background-position:-40px -120px
  568. }
  569. .icon_title_inf {
  570. background-position:-60px -120px
  571. }
  572. @media(-webkit-min-device-pixel-ratio:1.5),(min-resolution:2dppx) {
  573. background-size:140px 120px
  574. }
  575. .active .icon_nav_ablity {
  576. background-position:-20px 0
  577. }
  578. .active .icon_nav_comment {
  579. background-position:0 -80px
  580. }
  581. .active .icon_nav_developer {
  582. background-position:0 -20px
  583. }
  584. .active .icon_nav_fans {
  585. background-position:-20px -20px
  586. }
  587. .active .icon_nav_limit {
  588. background-position:-40px 0
  589. }
  590. .active .icon_nav_menu {
  591. background-position:-40px -20px
  592. }
  593. .active .icon_nav_msg {
  594. background-position:0 -40px
  595. }
  596. .active .icon_nav_news {
  597. background-position:-20px -40px
  598. }
  599. .active .icon_nav_pay {
  600. background-position:-40px -40px
  601. }
  602. .active .icon_nav_reply {
  603. background-position:-60px 0
  604. }
  605. .active .icon_nav_run {
  606. background-position:-60px -20px
  607. }
  608. .active .icon_nav_security {
  609. background-position:-60px -40px
  610. }
  611. .active .icon_nav_send {
  612. background-position:0 -60px
  613. }
  614. .active .icon_nav_set {
  615. background-position:-20px -60px
  616. }
  617. .active .icon_nav_source {
  618. background-position:-40px -60px
  619. }
  620. .active .icon_nav_stat {
  621. background-position:-60px -60px
  622. }
  623. .active .icon_nav_user {
  624. background-position:-80px 0
  625. }
  626. .active .icon_nav_ux {
  627. background-position:-80px -20px
  628. }
  629. .active .icon_nav_verity {
  630. background-position:-80px -40px
  631. }
  632. .icon_hook {
  633. background-position:-80px -60px
  634. }
  635. .icon_logout {
  636. background-position:0 0
  637. }
  638. .icon_nav_ablity {
  639. background-position:-20px -80px
  640. }
  641. .icon_nav_comment {
  642. background-position:-40px -80px
  643. }
  644. .icon_nav_developer {
  645. background-position:-60px -80px
  646. }
  647. .icon_nav_fans {
  648. background-position:-80px -80px
  649. }
  650. .icon_nav_limit {
  651. background-position:-100px 0
  652. }
  653. .icon_nav_menu {
  654. background-position:-100px -20px
  655. }
  656. .icon_nav_msg {
  657. background-position:-100px -40px
  658. }
  659. .icon_nav_news {
  660. background-position:-100px -60px
  661. }
  662. .icon_nav_pay {
  663. background-position:-100px -80px
  664. }
  665. .icon_nav_reply {
  666. background-position:0 -100px
  667. }
  668. .icon_nav_run {
  669. background-position:-20px -100px
  670. }
  671. .icon_nav_security {
  672. background-position:-40px -100px
  673. }
  674. .icon_nav_send {
  675. background-position:-60px -100px
  676. }
  677. .icon_nav_set {
  678. background-position:-80px -100px
  679. }
  680. .icon_nav_source {
  681. background-position:-100px -100px
  682. }
  683. .icon_nav_stat {
  684. background-position:-120px 0
  685. }
  686. .icon_nav_user {
  687. background-position:-120px -20px
  688. }
  689. .icon_nav_ux {
  690. background-position:-120px -40px
  691. }
  692. .icon_nav_verity {
  693. background-position:-120px -60px
  694. }
  695. } .foot {
  696. padding: 24px 0;
  697. color: #f1f1f1;
  698. text-align: center;
  699. background-color: rgba(152, 148, 148, 0.85);
  700. position: relative;
  701. }
  702. .ft.links {
  703. font-size: 12px;
  704. }
  705. .links_item {
  706. display: inline-block;
  707. vertical-align: middle;
  708. padding: 0 1em;
  709. line-height: 1em;
  710. border-left: 1px solid #d9dadc;
  711. }
  712. .ft .links_item a {
  713. color: #f1f1f1;
  714. }
  715. .copyright {
  716. display: inline;
  717. }
  718. .links_item:first-child {
  719. border-left-width: 0;
  720. }
  721. .dropdown-user {
  722. height: 60px;
  723. display: block;
  724. }
  725. .dropdown-menu>li>a>.fa {
  726. color:#00a5e0;
  727. margin-left: -4px;
  728. }
  729. .navbar-nav .navbar-right>li {
  730. margin-right: 0;
  731. margin-left: 12px;html {
  732. overflow:auto
  733. }
  734. body {
  735. background-color:#edf1f5;
  736. min-width:1263px;
  737. overflow:hidden
  738. }
  739. header {
  740. height:62px;
  741. background-color:#00a5e0;
  742. position:relative;
  743. z-index:1
  744. }
  745. .logo {
  746. float:left;
  747. width:200px;
  748. height:62px;
  749. margin-left:17px;
  750. background:url(images/logo_beta.png) no-repeat center;
  751. text-indent:-99em;
  752. overflow:hidden
  753. }
  754. .header_l {
  755. float:left
  756. }
  757. .header_r {
  758. float:right;
  759. height:100%
  760. }
  761. .header_avatar {
  762. display:inline-block;
  763. height:34px;
  764. padding:14px 35px 0 0;
  765. letter-spacing:-.25em;
  766. vertical-align:top;
  767. white-space:nowrap
  768. }
  769. .header_avatar .avatar {
  770. width:34px;
  771. height:34px;
  772. border-radius:34px;
  773. font-size:0
  774. }
  775. .header_name {
  776. display:inline-block;
  777. height:100%;
  778. line-height:32px;
  779. margin:0 2px 0 10px;
  780. font-weight:400;
  781. color:#fff;
  782. letter-spacing:0;
  783. vertical-align:top;
  784. cursor:pointer
  785. }
  786. .header_avatar>.icon {
  787. position:absolute;
  788. margin-top:7px
  789. }
  790. .header_icon {
  791. display:inline-block;
  792. width:62px;
  793. height:100%;
  794. text-align:center;
  795. -webkit-transition:background-color .25s;
  796. transition:background-color .25s;
  797. cursor:pointer
  798. }
  799. .header_icon:hover {
  800. background-color:#01b0ee
  801. }
  802. .header_icon>.icon {
  803. margin-top:21px
  804. }
  805. .main {
  806. overflow:hidden
  807. }
  808. .main>aside {
  809. float:left;
  810. padding-bottom:3999em;
  811. margin-bottom:-3991em;
  812. border-right:1px solid #dbdee5;
  813. background-color:#fff
  814. }
  815. .main>aside,.logo,img {
  816. -webkit-user-select:none;
  817. -moz-user-select:none;
  818. -ms-user-select:none;
  819. user-select:none
  820. }
  821. :root .main>aside {
  822. display:none
  823. }
  824. @media all and (min-width:1281px) {
  825. .main {
  826. margin-right:calc(100% - 100vw)
  827. }
  828. body {
  829. min-width:calc(1280px - 100vw - 100%)
  830. }
  831. }.aside_bg {
  832. width:199px;
  833. position:absolute;
  834. top:0;
  835. bottom:0;
  836. border-right:1px solid #dbdee5;
  837. background-color:#fff
  838. }
  839. .main>aside,.aside_bg {
  840. width:199px;
  841. -webkit-transition:width .25s;
  842. transition:width .25s
  843. }
  844. .aside_main {
  845. display:inline-block;
  846. width:100%;
  847. background-color:#fff;
  848. position:relative;
  849. white-space:nowrap
  850. }
  851. .checked .aside_main {
  852. z-index:2
  853. }
  854. .aside_toggle {
  855. display:block;
  856. height:14px;
  857. line-height:0;
  858. padding:7px 9px 0 15px;
  859. margin-bottom:-8px;
  860. text-align:right;
  861. cursor:pointer;
  862. -webkit-transition:all .25s;
  863. transition:all .25s
  864. }
  865. .aside_toggle+dl {
  866. margin-top:0
  867. }
  868. .aside_arrow {
  869. display:inline-block;
  870. width:0;
  871. height:0;
  872. border:6px solid transparent;
  873. border-right-color:#d0d4da;
  874. -webkit-transition:border-color .25s;
  875. transition:border-color .25s;
  876. overflow:hidden
  877. }
  878. .aside_toggle:hover .aside_arrow {
  879. border-right-color:#9facba
  880. }
  881. .aside_dl {
  882. margin:10px 0
  883. }
  884. .aside_dt {
  885. height:30px;
  886. line-height:30px;
  887. padding-left:22px;
  888. color:#9facba;
  889. -webkit-transition:height .25s;
  890. transition:height .25s;
  891. overflow:hidden
  892. }
  893. .aside_nav {
  894. display:block;
  895. padding:12px 20px;
  896. color:#4c5161;
  897. -webkit-transition:background-color .25s,color .5s;
  898. transition:background-color .25s,color .5s;
  899. cursor:pointer;
  900. position:relative
  901. }
  902. .aside_group>.aside_nav {
  903. display:none
  904. }
  905. .aside_nav:hover {
  906. color:#4c5161;
  907. background-color:#eceef3
  908. }
  909. .aside_nav:before,.aside_nav:after,.aside_button_add:before,.aside_button_add:after {
  910. position:absolute;
  911. top:50%;
  912. left:62px;
  913. color:#fff;
  914. z-index:1
  915. }
  916. .aside_button_add:before,.aside_button_add:after {
  917. left:50px
  918. }
  919. .aside_nav[data-title]:before,.aside_button_add:before {
  920. width:0;
  921. height:0;
  922. margin:-6px 0 0 -6px;
  923. border:6px solid transparent;
  924. border-right-color:#373c42;
  925. overflow:hidden
  926. }
  927. .aside_nav[data-title]:after,.aside_button_add:after {
  928. line-height:20px;
  929. padding:5px 10px;
  930. margin:-15px 0 0 6px;
  931. border-radius:4px;
  932. background-color:#373c42;
  933. font-size:12px;
  934. color:#fff;
  935. letter-spacing:0
  936. }
  937. .aside_nav>.icon {
  938. margin-right:7px;
  939. vertical-align:-5px;
  940. *vertical-align:-1px;
  941. text-align:center;
  942. line-height:20px
  943. }
  944. .aside_nav>.icon>img {
  945. display:none
  946. }
  947. .active>.icon[style] {
  948. visibility:hidden
  949. }
  950. .active>.icon>img {
  951. display:inline;
  952. vertical-align:middle;
  953. visibility:visible
  954. }
  955. .aside_dl .active {
  956. background-color:#00a5e0;
  957. color:#fff
  958. }
  959. .aside_divide {
  960. margin:10px;
  961. border-top:1px solid #e9ebf2
  962. }
  963. .aside_button_add {
  964. display:block;
  965. height:20px;
  966. line-height:20px;
  967. padding:8px 8px 8px 45px;
  968. margin:10px 22px 20px;
  969. border:2px dashed;
  970. color:#ccc;
  971. -webkit-transition:all .25s;
  972. transition:all .25s;
  973. overflow:hidden;
  974. cursor:pointer
  975. }
  976. .aside_shape_add {
  977. position:absolute;
  978. width:20px;
  979. height:20px;
  980. margin-left:-28px
  981. }
  982. .aside_shape_add .v,.aside_shape_add .h {
  983. position:absolute
  984. }
  985. .aside_shape_add .v {
  986. height:16px;
  987. border-left:2px solid;
  988. top:2px;
  989. left:9px
  990. }
  991. .aside_shape_add .h {
  992. width:16px;
  993. border-top:2px solid;
  994. top:9px;
  995. left:2px
  996. }
  997. .aside_button_add:hover {
  998. color:#a6a6a6;
  999. position:relative
  1000. }
  1001. aside.checked,.checked>.aside_bg {
  1002. width:61px
  1003. }
  1004. .checked .aside_toggle {
  1005. text-align:center;
  1006. margin-bottom:3px
  1007. }
  1008. .checked .aside_arrow {
  1009. border-right-color:transparent;
  1010. border-left-color:#d0d4da
  1011. }
  1012. .checked .aside_toggle:hover .aside_arrow {
  1013. border-left-color:#9facba;
  1014. border-right-color:transparent
  1015. }
  1016. .checked .aside_dt {
  1017. height:0;
  1018. overflow:hidden
  1019. }
  1020. .checked .aside_nav {
  1021. color:transparent;
  1022. -webkit-transition:background-color .25s;
  1023. transition:background-color .25s
  1024. }
  1025. .checked .aside_main>dl .aside_nav {
  1026. letter-spacing:-9em;
  1027. letter-spacing:0vw
  1028. }
  1029. .checked .aside_main>dl .aside_nav>.icon {
  1030. margin-right:-150px;
  1031. *margin-right:50px
  1032. }
  1033. .checked.aside_group .aside_nav {
  1034. color:#4c5161;
  1035. letter-spacing:0
  1036. }
  1037. .checked .aside_group .active {
  1038. color:#fff;
  1039. background-color:#00a5e0
  1040. }
  1041. .checked .aside_nav:hover:before,.checked .aside_button_add:hover:before {
  1042. content:''
  1043. }
  1044. .checked .aside_nav:hover:after,.checked .aside_button_add:hover:after {
  1045. content:attr(data-title)
  1046. }
  1047. .checked .aside_button_add:hover {
  1048. overflow:visible
  1049. }
  1050. .checked .aside_group>.aside_nav {
  1051. display:block
  1052. }
  1053. .checked .aside_group>.aside_nav:hover {
  1054. z-index:1
  1055. }
  1056. .checked .aside_group .aside_dl {
  1057. position:absolute;
  1058. visibility:hidden
  1059. }
  1060. .checked>.aside_nav:before,.checked>.aside_nav:after {
  1061. display:none
  1062. }
  1063. .checked>.aside_nav {
  1064. background-color:#eceef3
  1065. }
  1066. .checked .checked>.aside_dl {
  1067. padding:5px 0;
  1068. margin-top:-95px;
  1069. left:70px;
  1070. border-radius:4px;
  1071. background-color:#fff;
  1072. box-shadow:0 1px 3px rgba(0,0,0,.1);
  1073. visibility:visible
  1074. }
  1075. .checked .aside_group .aside_dt {
  1076. position:absolute;
  1077. width:0;
  1078. padding:0;
  1079. border:6px solid transparent;
  1080. border-right-color:#fff;
  1081. top:70px;
  1082. left:-12px
  1083. }
  1084. :root .checked .aside_group .aside_dt {
  1085. top:70px;
  1086. left:-6px;
  1087. left:-5px\9;
  1088. width:8px;
  1089. height:8px;
  1090. border:0 none;
  1091. border-left:1px solid rgba(0,0,0,.05);
  1092. border-top:1px solid rgba(0,0,0,.05);
  1093. background-color:#fff;
  1094. background-clip:content-box;
  1095. -webkit-transform:rotate(-45deg);
  1096. -ms-transform:rotate(-45deg);
  1097. transform:rotate(-45deg);
  1098. -webkit-transition:background-color .25s;
  1099. transition:background-color .25s
  1100. }
  1101. .checked .aside_group .i1 .aside_dt {
  1102. border-right-color:#eceef3;
  1103. background-color:#eceef3
  1104. }
  1105. .checked .aside_group .a1 .aside_dt {
  1106. border-right-color:#00a5e0;
  1107. background-color:#00a5e0
  1108. }
  1109. .checked .aside_button_add {
  1110. padding-left:37px;
  1111. padding-right:0;
  1112. margin-left:10px;
  1113. margin-right:10px
  1114. }
  1115. .checked .aside_button_text {
  1116. position:absolute;
  1117. color:transparent;
  1118. visibility:hidden
  1119. }
  1120. .main>section {
  1121. min-height:calc(100vh - 62px);
  1122. overflow:hidden
  1123. }
  1124. .section_main {
  1125. padding:0 30px
  1126. }
  1127. .section_auto {
  1128. min-width:1003px;
  1129. max-width:1440px;
  1130. margin-left:auto;
  1131. margin-right:auto;
  1132. padding-bottom:120px
  1133. }
  1134. .checked ~ section .section_auto {
  1135. min-width:1157px
  1136. }
  1137. .section_title {
  1138. margin:36px 0 24px;
  1139. font-size:28px
  1140. }
  1141. @media all and (max-width:1440px) {
  1142. .section_title {
  1143. font-size:26px;
  1144. margin:31px 0 19px
  1145. }
  1146. }.section_title>.icon {
  1147. position:absolute;
  1148. margin-left:10px;
  1149. margin-top:12px
  1150. }
  1151. .icon {
  1152. display:inline-block;
  1153. width:20px;
  1154. height:20px;
  1155. line-height:0;
  1156. color:transparent!important;
  1157. overflow:hidden;
  1158. background:url(images/icons.png) no-repeat 20px 20px;
  1159. -webkit-user-select:none;
  1160. -moz-user-select:none;
  1161. -ms-user-select:none;
  1162. user-select:none
  1163. }
  1164. .active .icon_nav_ablity {
  1165. background-position:-20px 0
  1166. }
  1167. .active .icon_nav_api {
  1168. background-position:-60px -80px
  1169. }
  1170. .active .icon_nav_comment {
  1171. background-position:0 -20px
  1172. }
  1173. .active .icon_nav_developer {
  1174. background-position:-20px -20px
  1175. }
  1176. .active .icon_nav_fans {
  1177. background-position:-40px 0
  1178. }
  1179. .active .icon_nav_limit {
  1180. background-position:-40px -20px
  1181. }
  1182. .active .icon_nav_menu {
  1183. background-position:0 -40px
  1184. }
  1185. .active .icon_nav_msg {
  1186. background-position:-20px -40px
  1187. }
  1188. .active .icon_nav_news {
  1189. background-position:-40px -40px
  1190. }
  1191. .active .icon_nav_pay {
  1192. background-position:-60px 0
  1193. }
  1194. .active .icon_nav_reply {
  1195. background-position:-60px -20px
  1196. }
  1197. .active .icon_nav_run {
  1198. background-position:-60px -40px
  1199. }
  1200. .active .icon_nav_security {
  1201. background-position:0 -60px
  1202. }
  1203. .active .icon_nav_send {
  1204. background-position:-20px -60px
  1205. }
  1206. .active .icon_nav_set {
  1207. background-position:-40px -60px
  1208. }
  1209. .active .icon_nav_source {
  1210. background-position:-60px -60px
  1211. }
  1212. .active .icon_nav_stat {
  1213. background-position:-80px 0
  1214. }
  1215. .active .icon_nav_tag {
  1216. background-position:-80px -20px
  1217. }
  1218. .active .icon_nav_user {
  1219. background-position:-80px -40px
  1220. }
  1221. .active .icon_nav_ux {
  1222. background-position:-80px -60px
  1223. }
  1224. .active .icon_nav_verity {
  1225. background-position:0 -80px
  1226. }
  1227. .icon_hook {
  1228. background-position:-20px -80px
  1229. }
  1230. .icon_logout {
  1231. background-position:-40px -80px
  1232. }
  1233. .icon_nav_ablity {
  1234. background-position:0 0
  1235. }
  1236. .icon_nav_api {
  1237. background-position:-80px -80px
  1238. }
  1239. .icon_nav_comment {
  1240. background-position:-100px 0
  1241. }
  1242. .icon_nav_developer {
  1243. background-position:-100px -20px
  1244. }
  1245. .icon_nav_fans {
  1246. background-position:-100px -40px
  1247. }
  1248. .icon_nav_limit {
  1249. background-position:-100px -60px
  1250. }
  1251. .icon_nav_menu {
  1252. background-position:-100px -80px
  1253. }
  1254. .icon_nav_msg {
  1255. background-position:0 -100px
  1256. }
  1257. .icon_nav_news {
  1258. background-position:-20px -100px
  1259. }
  1260. .icon_nav_pay {
  1261. background-position:-40px -100px
  1262. }
  1263. .icon_nav_reply {
  1264. background-position:-60px -100px
  1265. }
  1266. .icon_nav_run {
  1267. background-position:-80px -100px
  1268. }
  1269. .icon_nav_security {
  1270. background-position:-100px -100px
  1271. }
  1272. .icon_nav_send {
  1273. background-position:-120px 0
  1274. }
  1275. .icon_nav_set {
  1276. background-position:-120px -20px
  1277. }
  1278. .icon_nav_source {
  1279. background-position:-120px -40px
  1280. }
  1281. .icon_nav_stat {
  1282. background-position:-120px -60px
  1283. }
  1284. .icon_nav_tag {
  1285. background-position:-120px -80px
  1286. }
  1287. .icon_nav_user {
  1288. background-position:-120px -100px
  1289. }
  1290. .icon_nav_ux {
  1291. background-position:0 -120px
  1292. }
  1293. .icon_nav_verity {
  1294. background-position:-20px -120px
  1295. }
  1296. .icon_title_inf:hover {
  1297. background-position:-40px -120px
  1298. }
  1299. .icon_title_inf {
  1300. background-position:-60px -120px
  1301. }
  1302. @media(-webkit-min-device-pixel-ratio:1.5),(min-resolution:2dppx) {
  1303. background-size:140px 120px
  1304. }
  1305. .active .icon_nav_ablity {
  1306. background-position:-20px 0
  1307. }
  1308. .active .icon_nav_comment {
  1309. background-position:0 -80px
  1310. }
  1311. .active .icon_nav_developer {
  1312. background-position:0 -20px
  1313. }
  1314. .active .icon_nav_fans {
  1315. background-position:-20px -20px
  1316. }
  1317. .active .icon_nav_limit {
  1318. background-position:-40px 0
  1319. }
  1320. .active .icon_nav_menu {
  1321. background-position:-40px -20px
  1322. }
  1323. .active .icon_nav_msg {
  1324. background-position:0 -40px
  1325. }
  1326. .active .icon_nav_news {
  1327. background-position:-20px -40px
  1328. }
  1329. .active .icon_nav_pay {
  1330. background-position:-40px -40px
  1331. }
  1332. .active .icon_nav_reply {
  1333. background-position:-60px 0
  1334. }
  1335. .active .icon_nav_run {
  1336. background-position:-60px -20px
  1337. }
  1338. .active .icon_nav_security {
  1339. background-position:-60px -40px
  1340. }
  1341. .active .icon_nav_send {
  1342. background-position:0 -60px
  1343. }
  1344. .active .icon_nav_set {
  1345. background-position:-20px -60px
  1346. }
  1347. .active .icon_nav_source {
  1348. background-position:-40px -60px
  1349. }
  1350. .active .icon_nav_stat {
  1351. background-position:-60px -60px
  1352. }
  1353. .active .icon_nav_user {
  1354. background-position:-80px 0
  1355. }
  1356. .active .icon_nav_ux {
  1357. background-position:-80px -20px
  1358. }
  1359. .active .icon_nav_verity {
  1360. background-position:-80px -40px
  1361. }
  1362. .icon_hook {
  1363. background-position:-80px -60px
  1364. }
  1365. .icon_logout {
  1366. background-position:0 0
  1367. }
  1368. .icon_nav_ablity {
  1369. background-position:-20px -80px
  1370. }
  1371. .icon_nav_comment {
  1372. background-position:-40px -80px
  1373. }
  1374. .icon_nav_developer {
  1375. background-position:-60px -80px
  1376. }
  1377. .icon_nav_fans {
  1378. background-position:-80px -80px
  1379. }
  1380. .icon_nav_limit {
  1381. background-position:-100px 0
  1382. }
  1383. .icon_nav_menu {
  1384. background-position:-100px -20px
  1385. }
  1386. .icon_nav_msg {
  1387. background-position:-100px -40px
  1388. }
  1389. .icon_nav_news {
  1390. background-position:-100px -60px
  1391. }
  1392. .icon_nav_pay {
  1393. background-position:-100px -80px
  1394. }
  1395. .icon_nav_reply {
  1396. background-position:0 -100px
  1397. }
  1398. .icon_nav_run {
  1399. background-position:-20px -100px
  1400. }
  1401. .icon_nav_security {
  1402. background-position:-40px -100px
  1403. }
  1404. .icon_nav_send {
  1405. background-position:-60px -100px
  1406. }
  1407. .icon_nav_set {
  1408. background-position:-80px -100px
  1409. }
  1410. .icon_nav_source {
  1411. background-position:-100px -100px
  1412. }
  1413. .icon_nav_stat {
  1414. background-position:-120px 0
  1415. }
  1416. .icon_nav_user {
  1417. background-position:-120px -20px
  1418. }
  1419. .icon_nav_ux {
  1420. background-position:-120px -40px
  1421. }
  1422. .icon_nav_verity {
  1423. background-position:-120px -60px
  1424. }
  1425. } .foot {
  1426. padding: 24px 0;
  1427. color: #f1f1f1;
  1428. text-align: center;
  1429. background-color: rgba(152, 148, 148, 0.85);
  1430. position: relative;
  1431. }
  1432. .ft.links {
  1433. font-size: 12px;
  1434. }
  1435. .links_item {
  1436. display: inline-block;
  1437. vertical-align: middle;
  1438. padding: 0 1em;
  1439. line-height: 1em;
  1440. border-left: 1px solid #d9dadc;
  1441. }
  1442. .ft .links_item a {
  1443. color: #f1f1f1;
  1444. }
  1445. .copyright {
  1446. display: inline;
  1447. }
  1448. .links_item:first-child {
  1449. border-left-width: 0;
  1450. }
  1451. .dropdown-user {
  1452. height: 60px;
  1453. display: block;
  1454. }
  1455. .dropdown-menu>li>a>.fa {
  1456. color:#00a5e0;
  1457. margin-left: -4px;
  1458. }
  1459. .navbar-nav .navbar-right>li {
  1460. margin-right: 0;
  1461. margin-left: 12px;
  1462. float: left;
  1463. }
  1464. #logout {
  1465. height: 62px;
  1466. margin-right: 40px;
  1467. }
  1468. #logout:hover {
  1469. background-color:#0AB0EB;
  1470. }
  1471. .topbar-notice {
  1472. height: 62px;
  1473. }
  1474. .topbar-notice>a {
  1475. line-height: 30px !important;
  1476. }
  1477. .topbar-notice>a>i {
  1478. color:white;
  1479. }
  1480. #notice-total {
  1481. background-color: #00a5e0;
  1482. }
  1483. float: left;
  1484. }
  1485. #logout {
  1486. height: 62px;
  1487. margin-right: 40px;
  1488. }
  1489. #logout:hover {
  1490. background-color:#0AB0EB;
  1491. }
  1492. .topbar-notice {
  1493. height: 62px;
  1494. }
  1495. .topbar-notice>a {
  1496. line-height: 30px !important;
  1497. }
  1498. .topbar-notice>a>i {
  1499. color:white;
  1500. }
  1501. #notice-total {
  1502. background-color: #00a5e0;
  1503. }