blog主题，存储一下

  1. /* Author: Io_oTI*/
  3. /*Public*/
  5. * {
  6.     margin: 0;
  7.     padding: 0;
  8.     box-sizing: border-box;
  9.     transition: all 0.5s;
  10. }
  12. ::selection,
  13. ::-moz-selection {
  14.     background: rgba(204, 204, 204, 0.7);
  15. }
  17. html {
  18.     background: #202125;
  19. }
  21. html,
  22. body {
  23.     color: gray;
  24.     margin: 0;
  25.     padding: 0;
  26.     overflow-x: hidden;
  27.     font-size: 14px;
  28.     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  29. }
  31. h1 {
  32.     font-size: 31px;
  33.     font-weight: bold
  34. }
  36. h2 {
  37.     font-size: 23px;
  38.     font-weight: bold
  39. }
  41. h3,
  42. .entrylistItemTitle {
  43.     font-size: 15px;
  44.     font-weight: bold
  45. }
  47. ul {
  48.     padding: 0;
  49.     list-style: none;
  50. }
  52. a {
  53.     color: gray;
  54.     text-decoration: none;
  55. }
  57. a:hover {
  58.     color: #E30;
  59. }
  61. canvas {
  62.     position: fixed;
  63.     z-index: -1;
  64. }
  66. /*header*/
  68. #header {
  69.     height: 240px;
  70. }
  72. #blogTitle,
  73. #navigator {
  74.     text-align: center;
  75. }
  77. a#Header1_HeaderTitle {
  78.     font-size: 48px;
  79.     padding: 0px 5px;
  80.     border-radius: 10px;
  81. }
  83. a#Header1_HeaderTitle:hover {
  84.     color: gray;
  85.     /* box-shadow: 0px 2px 3px 1px black; */
  86. }
  88. #navList li {
  89.     display: inline-block;
  90. }
  92. .blogStats {
  93.     width: 240px;
  94.     margin: auto;
  95.     border-radius: 1em;
  96.     background: #C4E17F linear-gradient(to right, #C4E17F, #C4E17F 12.5%, #F7FDCA 12.5%, #F7FDCA 25%, #FECF71 25%, #FECF71 37.5%, #F0776C 37.5%, #F0776C 50%, #DB9DBE 50%, #DB9CBE 62.5%, #C49CDE 62.5%, #C49CDE 75%, #669AE1 75%, #669AE1 87.5%, #62C2E4 87.5%, #62C2E4) repeat scroll 0% 0%;
  97.     background-size: 200%;
  98.     animation: conveyor 4s ease infinite;
  99. }
  101. /*main*/
  103. #main {
  104.     margin: auto;
  105.     padding: 0 20px;
  106. }
  108. /*mainContent*/
  110. #mainContent {
  111.     margin: 0 auto;
  112. }
  114. /*main panel*/
  116. .day,
  117. .commentform,
  118. .entrylist,
  119. #post_detail,
  120. #blog-comments-placeholder,
  121. #myposts,
  122. .gallery {
  123.     margin: 0px auto 20px;
  124. }
  126. .forFlow {
  127.     border-radius: 3px;
  128.     background: rgba(51, 51, 51, 0.7);
  129. }
  131. .dayTitle {
  132.     float: left;
  133.     margin-right: 20px;
  134. }
  136. .postCon,
  137. .entrylistPostSummary {
  138.     margin: 10px auto;
  139. }
  141. .dayTitle,
  142. .postTitle {
  143.     font-size: 20px;
  144.     padding-top: 20px;
  145. }
  147. .postBody {
  148.     padding: 0px;
  149. }
  151. .cnblogs_code {
  152.     border: none;
  153.     border-radius: 3px;
  154.     background: rgba(204, 204, 204, 1);
  155. }
  157. .code_img_opened,
  158. .cnblogs_code a,
  159. .cnblogs_code div,
  160. .cnblogs_code img {
  161.     background: none;
  162. }
  164. /*paging*/
  166. .topicListFooter {
  167.     margin: 0px;
  168. }
  170. .pager {
  171.     margin: 0 0 20px;
  172.     padding: 5px;
  173.     border-radius: 3px;
  174.     background: rgba(238, 238, 238, 0.7);
  175. }
  177. .pager a {
  178.     border-color: lightgray;
  179.     border-radius: 3px;
  180. }
  182. .pager a:hover {
  183.     color: #3F51B5;
  184. }
  186. /*option*/
  188. #green_channel {
  189.     max-width: 271px;
  190.     float: right;
  191.     border: none;
  192.     margin: 0;
  193.     overflow: unset;
  194. }
  196. #green_channel a {
  197.     float: left;
  198.     margin: 3px 6px 3px 0px;
  199.     padding: 3px 7px;
  200.     background: none;
  201.     box-shadow: none;
  202.     text-shadow: none;
  203.     border-radius: 3px;
  204.     vertical-align: middle;
  205. }
  207. #green_channel #green_channel_weibo,
  208. #green_channel #green_channel_wechat {
  209.     padding: 0px 2px;
  210. }
  212. #div_digg {
  213.     float: right;
  214.     width: 124px;
  215.     margin: 1px 6px;
  216.     padding: 10px 0;
  217. }
  219. .diggit,
  220. .buryit,
  221. #green_channel #green_channel_digg,
  222. #green_channel #green_channel_follow,
  223. #green_channel #green_channel_favorite {
  224.     background: rgba(34, 34, 34, 0.7);
  225. }
  227. .diggit:hover {
  228.     background: rgba(153, 204, 153, 0.7);
  229. }
  231. .buryit:hover {
  232.     background: rgba(153, 153, 204, 0.7);
  233. }
  235. #green_channel #green_channel_digg:hover {
  236.     background: rgba(45, 174, 191, 0.7);
  237. }
  239. #green_channel #green_channel_follow:hover {
  240.     background: rgba(227, 49, 0, 0.7);
  241. }
  243. #green_channel #green_channel_favorite:hover {
  244.     background: rgba(255, 181, 21, 0.7);
  245. }
  247. .diggit,
  248. .buryit {
  249.     width: 59px;
  250.     height: 24px;
  251.     padding: 0px 6px;
  252.     text-align: left;
  253.     position: relative;
  254.     border-radius: 3px;
  255. }
  257. .buryit {
  258.     margin: 2px 0px 0px 6px;
  259. }
  261. .diggit:before,
  262. .buryit:before {
  263.     top: 3px;
  264.     right: 6px;
  265.     position: absolute;
  266.     font-weight: bold;
  267. }
  269. .diggit:before {
  270.     color: rgba(255, 0, 0, 0.5);
  271.     content: "♥";
  272.     animation: beats 1s ease infinite;
  273. }
  275. .buryit:before {
  276.     color: black;
  277.     content: "♠";
  278. }
  280. .buryit:hover:before {
  281.     animation: rotate 0.5s ease infinite;
  282. }
  284. .diggnum,
  285. .burynum {
  286.     color: white;
  287. }
  289. /*comment title*/
  291. .feedback_area_title,
  292. #commentform_title {
  293.     font-size: 16px;
  294.     font-weight: bold;
  295. }
  297. #commentform_title {
  298.     padding: 0;
  299.     background-image: none;
  300. }
  302. /*comment*/
  304. .feedbackItem {
  305.     margin-top: 20px;
  306.     border-radius: 4px;
  307.     background: rgba(34, 34, 34, 0.7);
  308. }
  310. .feedbackListSubtitle {
  311.     margin-top: 10px;
  312.     padding: 5px 10px;
  313. }
  315. .feedbackCon {
  316.     padding: 5px 10px;
  317.     border-bottom-left-radius: 4px;
  318.     border-bottom-right-radius: 4px;
  319.     background: rgba(68, 68, 68, 0.7);
  320. }
  322. .feedbackManage {
  323.     float: right;
  324. }
  326. div.commentform input.author {
  327.     color: lightgray;
  328.     padding: 0;
  329.     font-size: 14px;
  330.     border: none;
  331.     background-color: transparent;
  332.     background-image: none;
  333. }
  335. .commentbox_title,
  336. div.commentform textarea {
  337.     width: 100%;
  338. }
  340. /* menu button */
  342. .tols {
  343.     right: 0px;
  344.     bottom: 91px;
  345.     width: 30px;
  346.     margin: 5px;
  347.     padding: 5px;
  348.     position: fixed;
  349. }
  351. .back-top,
  352. .refresh-cmts {
  353.     width: 20px;
  354.     height: 20px;
  355.     display: block;
  356. }
  358. .back-top {
  359.     display: none;
  360.     margin-bottom: 10px;
  361.     animation: tly .6s ease infinite;
  362. }
  364. .back-top:before {
  365.     border-left: 3px solid black;
  366.     border-top-left-radius: 2px;
  367.     border-top: 3px solid black;
  368.     content: '';
  369.     display: block;
  370.     height: 12px;
  371.     left: 2.3px;
  372.     position: absolute;
  373.     top: 5px;
  374.     transform: rotate(45deg);
  375.     width: 12px;
  376. }
  378. .refresh-cmts {
  379.     border-radius: 100%;
  380.     border-width: 3px;
  381.     border-style: solid;
  382.     border-color: black transparent black black;
  383. }
  385. .refresh-cmts:before,
  386. .refresh-cmts:after {
  387.     background: rgba(0, 0, 0, 0.7);
  388.     border-radius: 3px;
  389.     content: '';
  390.     display: block;
  391.     position: relative;
  392. }
  394. .refresh-cmts:before {
  395.     top: -5px;
  396.     right: -12px;
  397.     width: 3px;
  398.     height: 8px;
  399. }
  401. .refresh-cmts:after {
  402.     top: -7px;
  403.     right: -7px;
  404.     width: 8px;
  405.     height: 3px;
  406. }
  408. .refresh-cmts:hover {
  409.     animation: rot .8s ease;
  410. }
  412. .show {
  413.     display: block;
  414. }
  416. #menu {
  417.     display: none;
  418. }
  420. #menu~label {
  421.     right: 0px;
  422.     bottom: 61px;
  423.     position: fixed;
  424.     cursor: pointer;
  425.     display: block;
  426.     margin: 5px;
  427.     padding: 5px;
  428.     transition: all .5s ease;
  429. }
  431. #menu~label span {
  432.     background-color: rgba(0, 0, 0, 0.7);
  433.     border-radius: 5px;
  434.     display: block;
  435.     height: 3px;
  436.     margin: 3px auto;
  437.     transition: transform .8s ease;
  438.     width: 20px;
  439. }
  441. #menu:checked~label .top {
  442.     -webkit-transform: translateY(5.5px) rotate(-45deg);
  443.     -moz-transform: translateY(5.5px) rotate(-45deg);
  444.     -ms-transform: translateY(5.5px) rotate(-45deg);
  445.     -o-transform: translateY(5.5px) rotate(-45deg);
  446.     transform: translateY(5.5px) rotate(-45deg);
  447. }
  449. #menu:checked~label .middle {
  450.     -webkit-transform: scaleX(0);
  451.     -moz-transform: scaleX(0);
  452.     -ms-transform: scaleX(0);
  453.     -o-transform: scaleX(0);
  454.     transform: scaleX(0);
  455. }
  457. #menu:checked~label .bottom {
  458.     -webkit-transform: translateY(-5.5px) rotate(45deg);
  459.     -moz-transform: translateY(-5.5px) rotate(45deg);
  460.     -ms-transform: translateY(-5.5px) rotate(45deg);
  461.     -o-transform: translateY(-5.5px) rotate(45deg);
  462.     transform: translateY(-5.5px) rotate(45deg);
  463. }
  465. #menu:checked~#sideBar {
  466.     right: 0px;
  467. }
  469. #menu:checked~label,
  470. #menu:checked~.tols {
  471.     right: 280px;
  472. }
  474. /*sideBar*/
  476. #sideBar {
  477.     top: 0px;
  478.     right: -280px;
  479.     width: 280px;
  480.     height: 100%;
  481.     overflow-y: auto;
  482.     position: fixed;
  483.     transition: all .5s ease;
  484.     background: rgba(51, 51, 51, 0.7);
  485. }
  487. #sideBarMain {
  488.     padding: 55px 0px;
  489. }
  491. .profile {
  492.     border-radius: 100%;
  493.     display: block;
  494.     height: 150px;
  495.     margin: 0 auto;
  496.     padding: 5px;
  497.     text-align: center;
  498.     width: 150px;
  499. }
  501. .head-img {
  502.     top: 10px;
  503.     width: 120px;
  504.     border-radius: 100%;
  505.     overflow: visible;
  506.     box-sizing: border-box;
  507.     position: relative;
  508.     animation: scales_bs 1s linear infinite;
  509. }
  511. #profile_block {
  512.     text-align: center;
  513. }
  515. #blog-calendar {
  516.     color: white;
  517.     margin: 10px 15px;
  518.     padding: 10px;
  519.     font-size: 12px;
  520.     border-radius: 3px;
  521.     background: rgba(34, 34, 34, 0.7);
  522. }
  524. #blog-calendar:hover {
  525.     background: rgba(153, 204, 153, 0.7);
  526. }
  528. #blog-calendar td:hover {
  529.     border-radius: 3px;
  530.     background: rgba(119, 170, 119, 0.7);
  531. }
  533. .CalNextPrev,
  534. .CalNextPrev {
  535.     font-weight: bold;
  536. }
  538. .div_my_zzk {
  539.     margin: 20px 0px;
  540. }
  542. .input_my_zzk,
  543. .btn_my_zzk,
  544. .comment_btn,
  545. #commentbox_opt a,
  546. div.commentform textarea {
  547.     color: gray;
  548.     margin: 2px auto;
  549.     padding: 2px 5px;
  550.     border: none;
  551.     border-radius: 3px;
  552.     background: rgba(68, 68, 68, 0.7);
  553. }
  555. /* .btn_my_zzk,
  556. .comment_btn,
  557. #commentbox_opt a {
  558.     color: gray;
  559.     background: gray;
  560. } */
  562. .btn_my_zzk:hover,
  563. .comment_btn:hover,
  564. #commentbox_opt a:hover {
  565.     background: rgba(34, 34, 34, 0.7);
  566. }
  568. .input_my_zzk,
  569. input.btn_my_zzk {
  570.     width: 100%;
  571.     height: 25px;
  572. }
  574. #RecentCommentsBlock {
  575.     padding: 8px;
  576.     font-size: 12px;
  577.     border-radius: 5px;
  578.     background: rgba(34, 34, 34, 0.7);
  579. }
  581. .commentform {
  582.     margin: 0
  583. }
  585. .input_my_zzk:hover,
  586. .input_my_zzk:focus,
  587. .comment_textarea:hover,
  588. .comment_textarea:focus {
  589.     outline: 0;
  590.     color: gray;
  591.     background: rgba(34, 34, 34, 0.7)
  592. }
  594. #leftcontentcontainer {
  595.     padding: 0px 15px;
  596. }
  598. div#blog-sidecolumn div {
  599.     margin-bottom: 15px;
  600. }
  602. .catListTitle {
  603.     margin-bottom: 5px;
  604. }
  606. /*footer*/
  608. #footer {
  609.     margin-top: 20px;
  610.     padding: 20px;
  611.     text-align: center;
  612.     background: rgba(51, 51, 51, 0.7);
  613. }
  615. /* Responsive */
  617. @media (min-width: 768px) {
  619.     #main {
  620.         width: 90%;
  621.     }
  623.     .forFlow {
  624.         padding: 10px;
  625.     }
  626. }
  628. @media (min-width: 992px) {
  629.     #main {
  630.         width: 75%;
  631.     }
  633.     .forFlow {
  634.         padding: 15px;
  635.     }
  636. }
  638. @media (min-width: 1200px) {
  640.     #main {
  641.         width: 60%;
  642.     }
  644.     .forFlow {
  645.         padding: 20px;
  646.     }
  648. }
  650. /*animation*/
  652. @keyframes conveyor {
  653.     50% {
  654.         background-position: 100% 0%;
  655.     }
  656. }
  658. @keyframes beats {
  659.     40% {
  660.         transform: scale(1.1, 1.1);
  661.         text-shadow: 0px 0px 1px rgba(255, 0, 0, 0.5);
  662.     }
  663. }
  665. @keyframes rotate {
  666.     25% {
  667.         transform: rotate(20deg);
  668.     }
  670.     50% {
  671.         transform: rotate(0deg);
  672.     }
  674.     75% {
  675.         transform: rotate(-20deg);
  676.     }
  677. }
  679. @keyframes rot {
  680.     100% {
  681.         transform: rotate(360deg);
  682.     }
  683. }
  685. @keyframes tly {
  686.     75% {
  687.         -webkit-transform: translateY(2px);
  688.         -moz-transform: translateY(2px);
  689.         -ms-transform: translateY(2px);
  690.         -o-transform: translateY(2px);
  691.         transform: translateY(2px);
  692.     }
  693. }
  695. @keyframes scales_bs {
  696.     50% {
  697.         box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.5);
  698.     }
  700.     100% {
  701.         box-shadow: 0px 0px 0px 20px rgba(0, 0, 0, 0);
  702.     }
  703. }
  705. @keyframes scales {
  706.     50% {
  707.         transform: scale(1.05, 1.05);
  708.     }
  709. }
  711. /*AD Kill*/
  713. .newsItem h3,
  714. .diggword,
  715. #author_profile,
  716. #comment_nav,
  717. #lnkBlogLogo,
  718. #under_post_news,
  719. #under_post_kb,
  720. #ad_t2,
  721. #ad_c1,
  722. #ad_c2,
  723. #cnblogs_c1,
  724. #cnblogs_c2 {
  725.     display: none;
  726. }

原生:Custom

blog主题——黑夜的更多相关文章

  1. blog主题——马路

    blog主题,存储一下 css /************************************************** 第一部分:所有的模板都使用的公共样式.公告样式是为了更好的向前 ...

  2. blog主题——樱花

    贮存一下,blog代码 QAQ 页脚html <!--live2d--> <script src="https://blog-static.cnblogs.com/file ...

  3. blog主题——田野（1）

    贮存一下,blog代码 QAQ 页首html <link rel='stylesheet' href='https://blog-static.cnblogs.com/files/elkyo/c ...

  4. Orchard Core入门配方和主题

    包含Orchard Core入门配方和主题 可以通过两个不同的NuGet包使用Orchard Core. OrchardCore.Application.Cms.Core.Targets Orchar ...

  5. 浅析MSIL中间语言——PE文件结构篇

    一.开篇 开篇我想讲一下于本文无关的话题,其实我很想美化一下自己博客园一直没时间弄,无意间找了博客园李宝亨的博客园里面有一篇分享自己主题的文章,我就将这个模板暂时用作我的blog主题,我要讲述一个关于 ...

  6. C++ 牛人博客（不断更新中...）

    http://www.zhangjiee.com/ 新浪微博@独酌逸醉. Github. GitCafe. stackoverflow. Quora http://cpp1x.org/ 刘未鹏 | M ...

  7. [补档]暑假集训D2总结

    %dalao https://hzoi-mafia.github.io/2017/07/26/17/ (纪念我已死去的github) 大佬AntiLeaf来讲概率&期望,然后--成功变为 不可 ...

  8. 【Other】最近在研究的, Java/Springboot/RPC/JPA等

    我的Springboot框架,欢迎关注: https://github.com/junneyang/common-web-starter Dubbo-大波-服务化框架 dubbo_百度搜索 Dubbo ...

  9. VB6_小林的气象类模块

    前言. [如果使用过程有什么问题可以QQ或邮箱联系我. 1919988942  | w2638301509@gmail.com] ___________________________________ ...

随机推荐

  1. JQuery函数 $.ajax()

    ajax() 方法通过 HTTP 请求加载远程数据 该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpR ...

  2. 立即关机C++源码

    #include<windows.h> using namespace std; int main(){ system("shutdown /p"); return 0 ...

  3. wpf实现一个windows定时关机的工具

    基本界面 起源 在家睡前喜欢用电脑放情景喜剧看,电脑需要定时关机,一开始直接命令行定时关机,感觉有点小麻烦, 于是最近弄了个有界面的 主要功能 在指定的时间之后执行 关机|休眠|重启 的操作, 支持取 ...

  4. Django | mysql修改个别表后save()报错

    报错内容: elasticsearch.exceptions.ConnectionError: ConnectionError(<urllib3.connection.HTTPConnectio ...

  5. 问题解决：xampp中phpmyadmin“无法连接：无效的设置”

    背景: 在服务器上搭建Testlink测试管理系统,却在打不开phpmyadmin地址,无法设置数据库密码,后续步骤无法进行 (错误界面的图片忘记截取了┭┮﹏┭┮) 解决办法: 一:验证apache端 ...

  6. TP5和TP3.2的使用区别

    模板标签不一样: TP5 可在配置文件中自行定义自己喜欢的标签 TP5  使用双标签 如:{foreach} {/foreach} TP3 : <> TP5 :{} 调用数据表方式: M( ...

  7. ORA_12514:TNS:listener does not currently know of service requested in connect descriptor

    问题描述 ORA_12514:TNS:listener does not currently know of service requested in connect descriptor 解决方式 ...

  8. js获取当前页面的url网址信息

    设置或获取整个 URL 为字符串: window.location.href 获取内容:http://10.100.0.8:7000/SVP/ "window.location.href&q ...

  9. C++分割string字符串（转）

    原文链接:https://blog.csdn.net/jirryzhang/article/details/80473032 或:https://www.cnblogs.com/dingxiaoqia ...

  10. C++类几种初始化的顺序

    首先给段代码: class A{ public: ; A():x(){cout<<"A(): x="<<x<<endl;} A(int a):x ...