@font-face {
font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(/css/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), url(/css/fonts/MaterialIcons-Regular.woff2) format('woff2'), url(/css/fonts/MaterialIcons-Regular.woff) format('woff'), url(/css/fonts/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; width: 1em; height: 1em; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr;
/* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility;
/* Support for Firefox. */ -moz-osx-font-smoothing: grayscale;
/* Support for IE. */ font-feature-settings: 'liga';
}
html {
color: rgba(0,0,0,0.8);
} .container {
width: 900px;
} @media (max-width: 1000px) {
.container { width: 90%; }
} .container .row {
margin-left: auto; margin-right: auto;
} @media (max-width: 1000px) {
.container.main-container { width: 100%; }
} ul, ol {
padding-left: 20px;
} ul.tabs, ol.tabs {
padding-left: 0;
} ul, ul li {
list-style-type: disc; word-break: break-word;
} nav ul, .fixed-action-btn ul {
padding-left: 0;
} nav li, .fixed-action-btn li {
list-style-type: none;
} ul.pagination, ul.collapsible, ul.indicators {
padding-left: 0;
} ul.pagination li, ul.collapsible li, ul.indicators li {
list-style-type: none;
} img {
max-width: 100%; padding: 4px; background-color: #f5f5f5; border: 1px solid #ddd; border-radius: 4px;
} strong {
font-weight: bold;
} blockquote {
background-color: rgba(0,0,0,0.03); padding: 0.6rem 0.6rem 0.6rem 1.2rem;
} table {
margin-bottom: 1.5em;
} nav ul a:hover {
background-color: rgba(0,0,0,0);
} nav .brand-logo {
font-size: 1.6rem;
} .side-nav li, .side-nav a {
padding: 0 15px;
} .card {
margin-top: 0;
} .card.medium {
height: 440px;
} .card .card-content {
padding: 25px 25px 30px;
} @media (max-width: 767px) {
.card .card-content { padding-left: 15px; padding-right: 15px; }
} .card .card-action {
padding-left: 25px; padding-right: 25px;
} .chip {
height: initial; line-height: 18px; padding: 4px 14px; color: #fff;
} .breadcrumb {
font-size: 1em;
} .materialboxed {
display: initial; margin-top: 10px; max-width: 100%;
} .materialboxed.active {
max-width: initial;
} .slider .indicators {
bottom: 60px; z-index: 10;
} .main-container {
margin-top: 30px;
} .mt-0 {
margin-top: 0;
} .collection a.collection-item:not(.active):hover {
background-color: #f5f5f5;
} .card .card-action a:not(.btn):not(.btn-large):not(.btn-floating) {
text-transform: initial;
} .breadcrumb:before {
content: "\f105"; font-family: FontAwesome;
} .fa {
margin-right: 5px;
} footer.page-footer {
padding-top: inherit;
} html, body {
font-family: "Roboto", "sans-serif", "微软雅黑", "Helvetica Neue";
} body {
background-color: #f5f5f5; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; min-height: 100vh; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
} main {
-webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto;
} .red-link-context a {
color: #f44336 !important;
} .red-link-context a:hover {
color: #e57373 !important;
} .pink-link-context a {
color: #e91e63 !important;
} .pink-link-context a:hover {
color: #f06292 !important;
} .purple-link-context a {
color: #9c27b0 !important;
} .purple-link-context a:hover {
color: #ba68c8 !important;
} .deep-purple-link-context a {
color: #673ab7 !important;
} .deep-purple-link-context a:hover {
color: #9575cd !important;
} .indigo-link-context a {
color: #3f51b5 !important;
} .indigo-link-context a:hover {
color: #7986cb !important;
} .blue-link-context a {
color: #2196f3 !important;
} .blue-link-context a:hover {
color: #64b5f6 !important;
} .light-blue-link-context a {
color: #03a9f4 !important;
} .light-blue-link-context a:hover {
color: #4fc3f7 !important;
} .cyan-link-context a {
color: #00bcd4 !important;
} .cyan-link-context a:hover {
color: #4dd0e1 !important;
} .teal-link-context a {
color: #009688 !important;
} .teal-link-context a:hover {
color: #4db6ac !important;
} .green-link-context a {
color: #4caf50 !important;
} .green-link-context a:hover {
color: #81c784 !important;
} .light-green-link-context a {
color: #8bc34a !important;
} .light-green-link-context a:hover {
color: #aed581 !important;
} .lime-link-context a {
color: #cddc39 !important;
} .lime-link-context a:hover {
color: #dce775 !important;
} .yellow-link-context a {
color: #ffeb3b !important;
} .yellow-link-context a:hover {
color: #fff176 !important;
} .amber-link-context a {
color: #ffc107 !important;
} .amber-link-context a:hover {
color: #ffd54f !important;
} .orange-link-context a {
color: #ff9800 !important;
} .orange-link-context a:hover {
color: #ffb74d !important;
} .deep-orange-link-context a {
color: #ff5722 !important;
} .deep-orange-link-context a:hover {
color: #ff8a65 !important;
} .brown-link-context a {
color: #795548 !important;
} .brown-link-context a:hover {
color: #a1887f !important;
} .grey-link-context a {
color: #9e9e9e !important;
} .grey-link-context a:hover {
color: #e0e0e0 !important;
} .blue-grey-link-context a {
color: #607d8b !important;
} .blue-grey-link-context a:hover {
color: #90a4ae !important;
} .nav-wrapper {
padding: 0 25px;
} @media (max-width: 767px) {
.nav-wrapper { padding: 0 10px; }
} .search-modal {
padding: 30px 20px; max-height: 80%;
} .search-modal input[type=text]:focus {
border-bottom-color: #757575; -webkit-box-shadow: 0 1px 0 0 #757575; box-shadow: 0 1px 0 0 #757575;
} .search-modal input[type=text]:focus+label {
color: #212121;
} .search-modal .search-result {
margin-top: 5px; margin-bottom: 15px;
} .simple-article {
margin-bottom: 30px;
} article .entry {
margin-top: 20px;
} article .article-title h1 {
font-family: "微软雅黑", "sans-serif", "Helvetica Neue"; font-size: 2em; font-weight: bold; line-height: 1.4; margin-top: 0; margin-bottom: 10px; color: #333;
} article a:not(.chip) {
color: #1976d2;
} article a:not(.chip):hover {
color: #42a5f5;
} article .simple-article-title h1 {
font-size: 1.4em; padding: 5px 0;
} article .tags-row {
margin-top: 10px;
} article .article-tag {
display: inline-block; height: 32px; line-height: 32px; padding: 0 12px; border-radius: 16px; color: #fff;
} article header {
border-radius: 0; background: none; position: relative; padding: 0; border-bottom: 0; margin-bottom: 10px;
} article header time {
font: 0.9em "微软雅黑", "Droid Serif", Helvetica Neue, Helvetica, Arial, sans-serif; margin-bottom: 5px; display: block; line-height: 1;
} article header:hover {
color: #069;
} article .card-content .entry {
font-size: 16px; line-height: 1.7;
} @media (max-width: 480px) {
article .card-content .entry { line-height: 1.5em; }
} article .card-content .entry p {
margin-top: 0; margin-bottom: 1em; text-align: justify; text-justify: inter-ideograph; word-break: initial; word-break: break-word;
} article .card-content .entry p:last-child {
margin-bottom: 0;
} article .card-content .entry ul, article .card-content .entry ol {
margin-bottom: 1em;
} article .card-content .entry ul ul, article .card-content .entry ol ul, article .card-content .entry ul ol, article .card-content .entry ol ol {
margin-bottom: 0;
} article .card-content .entry h1, article .card-content .entry h2, article .card-content .entry h3, article .card-content .entry h4, article .card-content .entry h5, article .card-content .entry h6 {
margin-top: 0; margin-bottom: 0.5em;
} article .card-content .entry h1 {
font-size: 1.6em; color: #333;
} article .card-content .entry h2 {
font-size: 1.4em; color: #333;
} article .card-content .entry h3, article .card-content .entry h4, article .card-content .entry h5, article .card-content .entry h6 {
font-size: 1.2em; color: #333;
} article .card-content .entry.nstyle {
border-radius: 0; padding: 0; background: none; -webkit-box-shadow: none; box-shadow: none;
} article .card-content .entry iframe {
max-width: 98%;
} article .card-content .entry .caption {
display: block; margin-top: 5px; color: #aaa; position: relative; font-size: 0.9em; padding-left: 25px;
} article .card-content .entry .caption:before {
content: '\f040'; position: absolute; font: 1.3em font-icon; position: absolute; left: 0; top: 3px;
} article .toc-wrap {
float: right; -webkit-border-radius: 4px; border-radius: 4px; background: #eee; border: 1px solid #ddd; margin-left: 1.5em; margin-bottom: 2em; padding: 15px 20px; line-height: 1.6em;
} article .toc-wrap >ol {
margin-left: 0;
} article .toc-wrap ol, article .toc-wrap ul {
list-style: none;
} article .toc-title {
font-weight: bold; font-size: 1.2em; margin-bottom: 0.6em; color: #2c3e50;
} article .toc-number {
display: none;
} article .toc-link {
color: #0e83cd; text-decoration: none; font-size: 0.9em;
} article .toc-link:hover {
text-decoration: underline;
} article .toc-child {
margin-left: 1em;
} a.social-link {
display: inline-block; color: #f5f5f5; margin-right: 10px;
} a.social-link:hover {
color: #e0e0e0;
} .footer-container {
padding-top: 20px;
} .slider-image {
border: none; border-radius: 0; background-color: transparent; padding: 0;
} .side-nav .row {
margin-bottom: 0;
} .side-nav .row .col {
line-height: 100px;
} .side-nav a {
height: 48px; line-height: 48px; color: #fff;
} .side-nav a i {
height: 48px; line-height: 48px; width: 1.5rem;
} .side-nav li {
line-height: 48px;
} .side-nav li:hover, .side-nav li:active {
background-color: rgba(0,0,0,0.2);
} .side-nav li:hover.side-user, .side-nav li:active.side-user {
background-color: transparent;
} .side-nav .avatar-image {
width: 50px; padding: 0; vertical-align: middle;
} .side-nav .info {
height: 100px;
} .side-nav .info p {
line-height: 24px; margin-top: 5px; margin-bottom: 0; text-shadow: 1px 1px 1px #444;
} .side-nav .info .name {
font-size: 1.2em;
} .side-nav .info .desc {
font-size: 0.9em;
} .side-nav li.side-user {
height: 100px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;
} .side-nav .collapse-level-0 {
padding-left: 15px;
} .side-nav .collapse-level-1 {
padding-left: 30px;
} .side-nav .collapse-level-2 {
padding-left: 45px;
} .side-nav .collapse-space {
margin-bottom: 10px;
}
- category-menu.side-nav a {
height: 36px; line-height: 36px;
}
- category-menu.side-nav a i {
height: 36px; line-height: 36px;
}
- category-menu.side-nav li {
line-height: 36px; padding-right: 15px;
} .toc {
position: fixed; top: 0px; margin-top: 15%; left: calc(50% + 450px);
} .toc ol {
list-style-type: none; padding-left: 1em;
} .toc .section {
margin: 2px 0; padding-top: 0; padding-bottom: 0;
} .toc .table-of-contents a.active {
border-left-color: #2196f3; font-weight: bold;
} .toc .table-of-contents a:hover {
border-left-color: #2196f3;
} .page-nav {
height: 50px; line-height: 50px;
} .float-sitemap {
position: fixed; right: 45px; bottom: 50px;
} @media only screen and (max-width: 600px) {
.float-sitemap { right: 10px; bottom: 15px; }
} .construction-container {
display: inline-block; margin-top: 40px;
} .construction-container .btn {
margin-top: 20px;
} .ds-sync input[type="checkbox"] {
position: initial; visibility: initial;
} .ds-sync input[type="checkbox"] +label:before {
display: none;
} article .gallery .control {
opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s;
} article .gallery:hover .control {
opacity: 1; -ms-filter: none; filter: none; -ms-filter: none; filter: none;
} article .gallery .prev, article .gallery .next {
position: absolute; top: 0; width: 50%; height: 100%; cursor: pointer;
} article .gallery .prev:before, article .gallery .next:before {
position: absolute; font: 24px/1 FontAwesome; text-align: center; width: 24px; text-shadow: 0 0 15px rgba(0,0,0,0.5); color: #fff; margin-top: -12px; top: 50%;
} article .gallery .prev {
left: 0;
} article .gallery .prev:before {
content: '\f053'; left: 10px;
} article .gallery .next {
right: 0;
} article .gallery .next:before {
content: '\f054'; right: 10px;
} .noscript {
background: rgba(0,0,0,0.5); position: fixed; left: 0; top: 0; width: 100%; z-index: 9999; -webkit-animation-duration: 6s; -moz-animation-duration: 6s; -o-animation-duration: 6s; -ms-animation-duration: 6s; animation-duration: 6s; -webkit-animation-name: noscript-slide; -moz-animation-name: noscript-slide; -o-animation-name: noscript-slide; -ms-animation-name: noscript-slide; animation-name: noscript-slide;
} .noscript p {
margin: 0; padding: 0 30px; color: #fff;
} .read-times-container {
margin-left: 15px;
} .read-times-container .fa {
margin-right: 0;
} .site-visitors-container {
margin-top: 10px;
} @-moz-keyframes noscript-slide {
0% { top: -100px; } 50% { top: -100px; } 100% { top: 0; }
} @-webkit-keyframes noscript-slide {
0% { top: -100px; } 50% { top: -100px; } 100% { top: 0; }
} @-o-keyframes noscript-slide {
0% { top: -100px; } 50% { top: -100px; } 100% { top: 0; }
} @keyframes noscript-slide {
0% { top: -100px; } 50% { top: -100px; } 100% { top: 0; }
} article pre {
padding: 10px 16px;
} article .line:after {
content: ; display: inline-block;
} article code, article pre {
font-family: Consolas, "微软雅黑", Monaco, Menlo, Courier New, monospace; color: #333; font-size: 1em;
} article p code, article li code {
margin: 0 3px; padding: 0 5px; border-radius: 5px; border: 1px solid #e0e0e0; color: #212121; background-color: #eee;
} pre .keyword {
color: #859900;
} pre .tag {
color: #f8f8f2;
} pre .comment, pre .template_comment, pre .diff .header, pre .doctype, pre .pi, pre .lisp .string, pre .javadoc {
color: #75715c; font-style: italic;
} pre .doctype {
color: #268bd2;
} pre .keyword, pre .winutils, pre .method, pre .addition, pre .css .tag, pre .request, pre .status, pre .nginx .title {
color: #66d9ef;
} pre .number, pre .command, pre .phpdoc, pre .tex .formula, pre .regexp, pre .hexcolor {
color: #ae81fc;
} pre .string, pre .tag .value {
color: #e6db6e;
} pre .title, pre .localvars, pre .chunk, pre .decorator, pre .built_in, pre .identifier, pre .vhdl, pre .literal, pre .id {
color: #f22672;
} pre .attribute, pre .variable, pre .lisp .body, pre .smalltalk .number, pre .constant, pre .class .title, pre .parent, pre .haskell .type {
color: #a6e22e;
} pre .preprocessor, pre .preprocessor .keyword, pre .shebang, pre .symbol, pre .symbol .string, pre .diff .change, pre .special, pre .attr_selector, pre .important, pre .subst, pre .cdata, pre .clojure .title {
color: #cb4b16;
} pre .deletion {
color: #dc322f;
} figure.highlight {
margin-left: 0; margin-right: 0; overflow: auto;
} figure.highlight td {
padding: 0;
} figure.highlight pre {
margin: 0; overflow: auto;
} figure.highlight figcaption a {
position: absolute; right: 25px;
} figure.highlight .gutter {
width: 5%;
} .book-item {
display: inline-block; position: relative;
} .book-item img {
padding: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
} .book-item:hover img {
-webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);
} .book-item .card-content {
padding: 15px;
} .book-item .card-content .card-title {
line-height: initial; font-size: 1.4em;
} .book-item .card.small .card-image {
min-height: 70%; max-height: 70%;
} .book-item .card.small .card-content {
max-height: 30%;
} .book-item .external-link {
font-size: 1.2em;
} .about-page .header {
padding: 40px 15px 30px;
} .about-page .avatar-wrapper .avatar-image {
width: 160px;
} .about-page .info {
padding: 0 20px;
} .about-page .info p {
line-height: 24px; margin-top: 25px; margin-bottom: 0; color: #fff; text-shadow: 1px 1px 1px #444;
} .about-page .info .name {
font-size: 1.8em;
} .about-page .info .desc {
margin-top: 15px; font-size: 1em;
} .about-page .social-group {
margin-top: 15px;
} .about-page section {
margin-bottom: 20px;
} .about-page h1 {
font-size: 1.6rem; margin-top: 10px; margin-bottom: 15px;
} .about-page ul.skill-list, .about-page ul.skill-list li {
list-style-type: none;
} .about-page ul.skill-list {
padding-left: 0;
} .about-page .skill-list li {
margin-bottom: 0;
} .about-page .split {
margin-top: 5px;
} .about-page .skills .fa {
margin-right: 0;
} .about-page .project-item {
display: inline-block; width: 100%;
} .about-page .project-item img {
padding: 0;
} .about-page .project-item .card-title {
font-weight: 400; font-size: 20px; text-shadow: 1px 1px 1px #000; line-height: 30px;
} .about-page .project-item .card-tag {
position: absolute; top: 15px; right: 10px;
} .about-page.row {
margin-left: 0; margin-right: 0;
} .about-page.row .row {
margin-left: 0; margin-right: 0;
}
![](./localhost_files/weixin_favicon.png)