diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..10fabd9
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,395 @@
+Attribution 4.0 International
+
+=======================================================================
+
+Creative Commons Corporation ("Creative Commons") is not a law firm and
+does not provide legal services or legal advice. Distribution of
+Creative Commons public licenses does not create a lawyer-client or
+other relationship. Creative Commons makes its licenses and related
+information available on an "as-is" basis. Creative Commons gives no
+warranties regarding its licenses, any material licensed under their
+terms and conditions, or any related information. Creative Commons
+disclaims all liability for damages resulting from their use to the
+fullest extent possible.
+
+Using Creative Commons Public Licenses
+
+Creative Commons public licenses provide a standard set of terms and
+conditions that creators and other rights holders may use to share
+original works of authorship and other material subject to copyright
+and certain other rights specified in the public license below. The
+following considerations are for informational purposes only, are not
+exhaustive, and do not form part of our licenses.
+
+ Considerations for licensors: Our public licenses are
+ intended for use by those authorized to give the public
+ permission to use material in ways otherwise restricted by
+ copyright and certain other rights. Our licenses are
+ irrevocable. Licensors should read and understand the terms
+ and conditions of the license they choose before applying it.
+ Licensors should also secure all rights necessary before
+ applying our licenses so that the public can reuse the
+ material as expected. Licensors should clearly mark any
+ material not subject to the license. This includes other CC-
+ licensed material, or material used under an exception or
+ limitation to copyright. More considerations for licensors:
+ wiki.creativecommons.org/Considerations_for_licensors
+
+ Considerations for the public: By using one of our public
+ licenses, a licensor grants the public permission to use the
+ licensed material under specified terms and conditions. If
+ the licensor's permission is not necessary for any reason--for
+ example, because of any applicable exception or limitation to
+ copyright--then that use is not regulated by the license. Our
+ licenses grant only permissions under copyright and certain
+ other rights that a licensor has authority to grant. Use of
+ the licensed material may still be restricted for other
+ reasons, including because others have copyright or other
+ rights in the material. A licensor may make special requests,
+ such as asking that all changes be marked or described.
+ Although not required by our licenses, you are encouraged to
+ respect those requests where reasonable. More considerations
+ for the public:
+ wiki.creativecommons.org/Considerations_for_licensees
+
+=======================================================================
+
+Creative Commons Attribution 4.0 International Public License
+
+By exercising the Licensed Rights (defined below), You accept and agree
+to be bound by the terms and conditions of this Creative Commons
+Attribution 4.0 International Public License ("Public License"). To the
+extent this Public License may be interpreted as a contract, You are
+granted the Licensed Rights in consideration of Your acceptance of
+these terms and conditions, and the Licensor grants You such rights in
+consideration of benefits the Licensor receives from making the
+Licensed Material available under these terms and conditions.
+
+
+Section 1 -- Definitions.
+
+ a. Adapted Material means material subject to Copyright and Similar
+ Rights that is derived from or based upon the Licensed Material
+ and in which the Licensed Material is translated, altered,
+ arranged, transformed, or otherwise modified in a manner requiring
+ permission under the Copyright and Similar Rights held by the
+ Licensor. For purposes of this Public License, where the Licensed
+ Material is a musical work, performance, or sound recording,
+ Adapted Material is always produced where the Licensed Material is
+ synched in timed relation with a moving image.
+
+ b. Adapter's License means the license You apply to Your Copyright
+ and Similar Rights in Your contributions to Adapted Material in
+ accordance with the terms and conditions of this Public License.
+
+ c. Copyright and Similar Rights means copyright and/or similar rights
+ closely related to copyright including, without limitation,
+ performance, broadcast, sound recording, and Sui Generis Database
+ Rights, without regard to how the rights are labeled or
+ categorized. For purposes of this Public License, the rights
+ specified in Section 2(b)(1)-(2) are not Copyright and Similar
+ Rights.
+
+ d. Effective Technological Measures means those measures that, in the
+ absence of proper authority, may not be circumvented under laws
+ fulfilling obligations under Article 11 of the WIPO Copyright
+ Treaty adopted on December 20, 1996, and/or similar international
+ agreements.
+
+ e. Exceptions and Limitations means fair use, fair dealing, and/or
+ any other exception or limitation to Copyright and Similar Rights
+ that applies to Your use of the Licensed Material.
+
+ f. Licensed Material means the artistic or literary work, database,
+ or other material to which the Licensor applied this Public
+ License.
+
+ g. Licensed Rights means the rights granted to You subject to the
+ terms and conditions of this Public License, which are limited to
+ all Copyright and Similar Rights that apply to Your use of the
+ Licensed Material and that the Licensor has authority to license.
+
+ h. Licensor means the individual(s) or entity(ies) granting rights
+ under this Public License.
+
+ i. Share means to provide material to the public by any means or
+ process that requires permission under the Licensed Rights, such
+ as reproduction, public display, public performance, distribution,
+ dissemination, communication, or importation, and to make material
+ available to the public including in ways that members of the
+ public may access the material from a place and at a time
+ individually chosen by them.
+
+ j. Sui Generis Database Rights means rights other than copyright
+ resulting from Directive 96/9/EC of the European Parliament and of
+ the Council of 11 March 1996 on the legal protection of databases,
+ as amended and/or succeeded, as well as other essentially
+ equivalent rights anywhere in the world.
+
+ k. You means the individual or entity exercising the Licensed Rights
+ under this Public License. Your has a corresponding meaning.
+
+
+Section 2 -- Scope.
+
+ a. License grant.
+
+ 1. Subject to the terms and conditions of this Public License,
+ the Licensor hereby grants You a worldwide, royalty-free,
+ non-sublicensable, non-exclusive, irrevocable license to
+ exercise the Licensed Rights in the Licensed Material to:
+
+ a. reproduce and Share the Licensed Material, in whole or
+ in part; and
+
+ b. produce, reproduce, and Share Adapted Material.
+
+ 2. Exceptions and Limitations. For the avoidance of doubt, where
+ Exceptions and Limitations apply to Your use, this Public
+ License does not apply, and You do not need to comply with
+ its terms and conditions.
+
+ 3. Term. The term of this Public License is specified in Section
+ 6(a).
+
+ 4. Media and formats; technical modifications allowed. The
+ Licensor authorizes You to exercise the Licensed Rights in
+ all media and formats whether now known or hereafter created,
+ and to make technical modifications necessary to do so. The
+ Licensor waives and/or agrees not to assert any right or
+ authority to forbid You from making technical modifications
+ necessary to exercise the Licensed Rights, including
+ technical modifications necessary to circumvent Effective
+ Technological Measures. For purposes of this Public License,
+ simply making modifications authorized by this Section 2(a)
+ (4) never produces Adapted Material.
+
+ 5. Downstream recipients.
+
+ a. Offer from the Licensor -- Licensed Material. Every
+ recipient of the Licensed Material automatically
+ receives an offer from the Licensor to exercise the
+ Licensed Rights under the terms and conditions of this
+ Public License.
+
+ b. No downstream restrictions. You may not offer or impose
+ any additional or different terms or conditions on, or
+ apply any Effective Technological Measures to, the
+ Licensed Material if doing so restricts exercise of the
+ Licensed Rights by any recipient of the Licensed
+ Material.
+
+ 6. No endorsement. Nothing in this Public License constitutes or
+ may be construed as permission to assert or imply that You
+ are, or that Your use of the Licensed Material is, connected
+ with, or sponsored, endorsed, or granted official status by,
+ the Licensor or others designated to receive attribution as
+ provided in Section 3(a)(1)(A)(i).
+
+ b. Other rights.
+
+ 1. Moral rights, such as the right of integrity, are not
+ licensed under this Public License, nor are publicity,
+ privacy, and/or other similar personality rights; however, to
+ the extent possible, the Licensor waives and/or agrees not to
+ assert any such rights held by the Licensor to the limited
+ extent necessary to allow You to exercise the Licensed
+ Rights, but not otherwise.
+
+ 2. Patent and trademark rights are not licensed under this
+ Public License.
+
+ 3. To the extent possible, the Licensor waives any right to
+ collect royalties from You for the exercise of the Licensed
+ Rights, whether directly or through a collecting society
+ under any voluntary or waivable statutory or compulsory
+ licensing scheme. In all other cases the Licensor expressly
+ reserves any right to collect such royalties.
+
+
+Section 3 -- License Conditions.
+
+Your exercise of the Licensed Rights is expressly made subject to the
+following conditions.
+
+ a. Attribution.
+
+ 1. If You Share the Licensed Material (including in modified
+ form), You must:
+
+ a. retain the following if it is supplied by the Licensor
+ with the Licensed Material:
+
+ i. identification of the creator(s) of the Licensed
+ Material and any others designated to receive
+ attribution, in any reasonable manner requested by
+ the Licensor (including by pseudonym if
+ designated);
+
+ ii. a copyright notice;
+
+ iii. a notice that refers to this Public License;
+
+ iv. a notice that refers to the disclaimer of
+ warranties;
+
+ v. a URI or hyperlink to the Licensed Material to the
+ extent reasonably practicable;
+
+ b. indicate if You modified the Licensed Material and
+ retain an indication of any previous modifications; and
+
+ c. indicate the Licensed Material is licensed under this
+ Public License, and include the text of, or the URI or
+ hyperlink to, this Public License.
+
+ 2. You may satisfy the conditions in Section 3(a)(1) in any
+ reasonable manner based on the medium, means, and context in
+ which You Share the Licensed Material. For example, it may be
+ reasonable to satisfy the conditions by providing a URI or
+ hyperlink to a resource that includes the required
+ information.
+
+ 3. If requested by the Licensor, You must remove any of the
+ information required by Section 3(a)(1)(A) to the extent
+ reasonably practicable.
+
+ 4. If You Share Adapted Material You produce, the Adapter's
+ License You apply must not prevent recipients of the Adapted
+ Material from complying with this Public License.
+
+
+Section 4 -- Sui Generis Database Rights.
+
+Where the Licensed Rights include Sui Generis Database Rights that
+apply to Your use of the Licensed Material:
+
+ a. for the avoidance of doubt, Section 2(a)(1) grants You the right
+ to extract, reuse, reproduce, and Share all or a substantial
+ portion of the contents of the database;
+
+ b. if You include all or a substantial portion of the database
+ contents in a database in which You have Sui Generis Database
+ Rights, then the database in which You have Sui Generis Database
+ Rights (but not its individual contents) is Adapted Material; and
+
+ c. You must comply with the conditions in Section 3(a) if You Share
+ all or a substantial portion of the contents of the database.
+
+For the avoidance of doubt, this Section 4 supplements and does not
+replace Your obligations under this Public License where the Licensed
+Rights include other Copyright and Similar Rights.
+
+
+Section 5 -- Disclaimer of Warranties and Limitation of Liability.
+
+ a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
+ EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
+ AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
+ ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
+ IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
+ WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
+ PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
+ ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
+ KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
+ ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
+
+ b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
+ TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
+ NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
+ INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
+ COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
+ USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
+ ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
+ DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
+ IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
+
+ c. The disclaimer of warranties and limitation of liability provided
+ above shall be interpreted in a manner that, to the extent
+ possible, most closely approximates an absolute disclaimer and
+ waiver of all liability.
+
+
+Section 6 -- Term and Termination.
+
+ a. This Public License applies for the term of the Copyright and
+ Similar Rights licensed here. However, if You fail to comply with
+ this Public License, then Your rights under this Public License
+ terminate automatically.
+
+ b. Where Your right to use the Licensed Material has terminated under
+ Section 6(a), it reinstates:
+
+ 1. automatically as of the date the violation is cured, provided
+ it is cured within 30 days of Your discovery of the
+ violation; or
+
+ 2. upon express reinstatement by the Licensor.
+
+ For the avoidance of doubt, this Section 6(b) does not affect any
+ right the Licensor may have to seek remedies for Your violations
+ of this Public License.
+
+ c. For the avoidance of doubt, the Licensor may also offer the
+ Licensed Material under separate terms or conditions or stop
+ distributing the Licensed Material at any time; however, doing so
+ will not terminate this Public License.
+
+ d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
+ License.
+
+
+Section 7 -- Other Terms and Conditions.
+
+ a. The Licensor shall not be bound by any additional or different
+ terms or conditions communicated by You unless expressly agreed.
+
+ b. Any arrangements, understandings, or agreements regarding the
+ Licensed Material not stated herein are separate from and
+ independent of the terms and conditions of this Public License.
+
+
+Section 8 -- Interpretation.
+
+ a. For the avoidance of doubt, this Public License does not, and
+ shall not be interpreted to, reduce, limit, restrict, or impose
+ conditions on any use of the Licensed Material that could lawfully
+ be made without permission under this Public License.
+
+ b. To the extent possible, if any provision of this Public License is
+ deemed unenforceable, it shall be automatically reformed to the
+ minimum extent necessary to make it enforceable. If the provision
+ cannot be reformed, it shall be severed from this Public License
+ without affecting the enforceability of the remaining terms and
+ conditions.
+
+ c. No term or condition of this Public License will be waived and no
+ failure to comply consented to unless expressly agreed to by the
+ Licensor.
+
+ d. Nothing in this Public License constitutes or may be interpreted
+ as a limitation upon, or waiver of, any privileges and immunities
+ that apply to the Licensor or You, including from the legal
+ processes of any jurisdiction or authority.
+
+
+=======================================================================
+
+Creative Commons is not a party to its public licenses.
+Notwithstanding, Creative Commons may elect to apply one of its public
+licenses to material it publishes and in those instances will be
+considered the “Licensor.” The text of the Creative Commons public
+licenses is dedicated to the public domain under the CC0 Public Domain
+Dedication. Except for the limited purpose of indicating that material
+is shared under a Creative Commons public license or as otherwise
+permitted by the Creative Commons policies published at
+creativecommons.org/policies, Creative Commons does not authorize the
+use of the trademark "Creative Commons" or any other trademark or logo
+of Creative Commons without its prior written consent including,
+without limitation, in connection with any unauthorized modifications
+to any of its public licenses or any other arrangements,
+understandings, or agreements concerning use of licensed material. For
+the avoidance of doubt, this paragraph does not form part of the public
+licenses.
+
+Creative Commons may be contacted at creativecommons.org.
diff --git a/categories/index.html b/categories/index.html
new file mode 100644
index 0000000..2a6a22b
--- /dev/null
+++ b/categories/index.html
@@ -0,0 +1,307 @@
+
分类 | 時痕
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
new file mode 100644
index 0000000..8f93b96
--- /dev/null
+++ b/css/index.css
@@ -0,0 +1,6181 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+html {
+ line-height: 1.15;
+ -webkit-text-size-adjust: 100%
+}
+
+body {
+ margin: 0
+}
+
+main {
+ display: block
+}
+
+h1 {
+ font-size: 2em;
+ margin: .67em 0
+}
+
+hr {
+ box-sizing: content-box;
+ height: 0;
+ overflow: visible
+}
+
+pre {
+ font-family: monospace, monospace;
+ font-size: 1em
+}
+
+a {
+ background-color: transparent
+}
+
+abbr[title] {
+ border-bottom: none;
+ text-decoration: underline;
+ text-decoration: underline dotted
+}
+
+b,
+strong {
+ font-weight: bolder
+}
+
+code,
+kbd,
+samp {
+ font-family: monospace, monospace;
+ font-size: 1em
+}
+
+small {
+ font-size: 80%
+}
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline
+}
+
+sub {
+ bottom: -.25em
+}
+
+sup {
+ top: -.5em
+}
+
+img {
+ border-style: none
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit;
+ font-size: 100%;
+ line-height: 1.15;
+ margin: 0
+}
+
+button,
+input {
+ overflow: visible
+}
+
+button,
+select {
+ text-transform: none
+}
+
+[type=button],
+[type=reset],
+[type=submit],
+button {
+ -webkit-appearance: button
+}
+
+[type=button]::-moz-focus-inner,
+[type=reset]::-moz-focus-inner,
+[type=submit]::-moz-focus-inner,
+button::-moz-focus-inner {
+ border-style: none;
+ padding: 0
+}
+
+[type=button]:-moz-focusring,
+[type=reset]:-moz-focusring,
+[type=submit]:-moz-focusring,
+button:-moz-focusring {
+ outline: 1px dotted ButtonText
+}
+
+fieldset {
+ padding: .35em .75em .625em
+}
+
+legend {
+ box-sizing: border-box;
+ color: inherit;
+ display: table;
+ max-width: 100%;
+ padding: 0;
+ white-space: normal
+}
+
+progress {
+ vertical-align: baseline
+}
+
+textarea {
+ overflow: auto
+}
+
+[type=checkbox],
+[type=radio] {
+ box-sizing: border-box;
+ padding: 0
+}
+
+[type=number]::-webkit-inner-spin-button,
+[type=number]::-webkit-outer-spin-button {
+ height: auto
+}
+
+[type=search] {
+ -webkit-appearance: textfield;
+ outline-offset: -2px
+}
+
+[type=search]::-webkit-search-decoration {
+ -webkit-appearance: none
+}
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ font: inherit
+}
+
+details {
+ display: block
+}
+
+summary {
+ display: list-item
+}
+
+template {
+ display: none
+}
+
+[hidden] {
+ display: none
+}
+.limit-one-line,
+#article-container .flink .flink-item-name,
+#article-container .flink .flink-item-desc,
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span,
+#aside-content .card-categories ul.card-category-list > .card-category-list-item a span,
+.site-data > a .headline,
+#nav #blog-info,
+#pagination .prev_info,
+#pagination .next_info,
+#sidebar #sidebar-menus .menus_items .site-page {
+ overflow: hidden;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.limit-more-line,
+.article-sort-item-title,
+#recent-posts .recent-post-item >.recent-post-info > .article-title,
+#recent-posts .recent-post-item >.recent-post-info > .content,
+#aside-content .aside-list > .aside-list-item .content > .name,
+#aside-content .aside-list > .aside-list-item .content > .title,
+#aside-content .aside-list > .aside-list-item .content > .comment,
+#post-info .post-title,
+.relatedPosts > .relatedPosts-list .content .title,
+#article-container figure.gallery-group p,
+#article-container figure.gallery-group .gallery-group-name {
+ display: -webkit-box;
+ overflow: hidden;
+ -webkit-box-orient: vertical;
+}
+.fontawesomeIcon,
+.custom-hr:before,
+#post .post-copyright:before,
+#post .post-outdate-notice:before,
+.note:not(.no-icon)::before,
+.search-dialog hr:before {
+ display: inline-block;
+ font-weight: 600;
+ font-family: 'Font Awesome 6 Free';
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+}
+.cardHover,
+.layout > div:first-child:not(.nc),
+#recent-posts .recent-post-item,
+#article-container .shuoshuo-item,
+#aside-content .card-widget,
+.layout .pagination > *:not(.space) {
+ background: var(--card-bg);
+ -webkit-box-shadow: var(--card-box-shadow);
+ box-shadow: var(--card-box-shadow);
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ -o-transition: all 0.3s;
+ -ms-transition: all 0.3s;
+ transition: all 0.3s;
+ border-radius: 8px;
+}
+.cardHover:hover,
+.layout > div:first-child:not(.nc):hover,
+#recent-posts .recent-post-item:hover,
+#article-container .shuoshuo-item:hover,
+#aside-content .card-widget:hover,
+.layout .pagination > *:not(.space):hover {
+ -webkit-box-shadow: var(--card-hover-box-shadow);
+ box-shadow: var(--card-hover-box-shadow);
+}
+.imgHover,
+.article-sort-item-img :first-child,
+#recent-posts .recent-post-item .post_cover .post-bg,
+#aside-content .aside-list > .aside-list-item .thumbnail :first-child {
+ width: 100%;
+ height: 100%;
+ -webkit-transition: filter 375ms ease-in 0.2s, -webkit-transform 0.6s;
+ -moz-transition: filter 375ms ease-in 0.2s, -moz-transform 0.6s;
+ -o-transition: filter 375ms ease-in 0.2s, -o-transform 0.6s;
+ -ms-transition: filter 375ms ease-in 0.2s, -ms-transform 0.6s;
+ transition: filter 375ms ease-in 0.2s, transform 0.6s;
+ object-fit: cover;
+}
+.imgHover:hover,
+.article-sort-item-img :first-child:hover,
+#recent-posts .recent-post-item .post_cover .post-bg:hover,
+#aside-content .aside-list > .aside-list-item .thumbnail :first-child:hover {
+ -webkit-transform: scale(1.1);
+ -moz-transform: scale(1.1);
+ -o-transform: scale(1.1);
+ -ms-transform: scale(1.1);
+ transform: scale(1.1);
+}
+.postImgHover:hover .cover,
+#pagination .prev-post:hover .cover,
+#pagination .next-post:hover .cover,
+.relatedPosts > .relatedPosts-list > a:hover .cover {
+ opacity: 0.7;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+ filter: alpha(opacity=70);
+ -webkit-transform: scale(1.1);
+ -moz-transform: scale(1.1);
+ -o-transform: scale(1.1);
+ -ms-transform: scale(1.1);
+ transform: scale(1.1);
+}
+.postImgHover .cover,
+#pagination .prev-post .cover,
+#pagination .next-post .cover,
+.relatedPosts > .relatedPosts-list > a .cover {
+ width: 100%;
+ height: 100%;
+ opacity: 0.4;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
+ filter: alpha(opacity=40);
+ -webkit-transition: all 0.6s, filter 375ms ease-in 0.2s;
+ -moz-transition: all 0.6s, filter 375ms ease-in 0.2s;
+ -o-transition: all 0.6s, filter 375ms ease-in 0.2s;
+ -ms-transition: all 0.6s, filter 375ms ease-in 0.2s;
+ transition: all 0.6s, filter 375ms ease-in 0.2s;
+ object-fit: cover;
+}
+.list-beauty,
+.category-lists ul {
+ list-style: none;
+}
+.list-beauty li,
+.category-lists ul li {
+ position: relative;
+ padding: 0.12em 0.4em 0.12em 1.4em;
+}
+.list-beauty li:hover:before,
+.category-lists ul li:hover:before {
+ border-color: var(--pseudo-hover);
+}
+.list-beauty li:before,
+.category-lists ul li:before {
+ position: absolute;
+ top: 0.67em;
+ left: 0;
+ width: 0.43em;
+ height: 0.43em;
+ border: 0.215em solid #49b1f5;
+ border-radius: 0.43em;
+ background: transparent;
+ content: '';
+ cursor: pointer;
+ -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;
+}
+.custom-hr,
+.search-dialog hr {
+ position: relative;
+ margin: 40px auto;
+ border: 2px dashed var(--hr-border);
+ width: calc(100% - 4px);
+}
+.custom-hr:hover:before,
+.search-dialog hr:hover:before {
+ left: calc(95% - 20px);
+}
+.custom-hr:before,
+.search-dialog hr:before {
+ position: absolute;
+ top: -10px;
+ left: 5%;
+ z-index: 1;
+ color: var(--hr-before-color);
+ content: '\f0c4';
+ font-size: 20px;
+ line-height: 1;
+ -webkit-transition: all 1s ease-in-out;
+ -moz-transition: all 1s ease-in-out;
+ -o-transition: all 1s ease-in-out;
+ -ms-transition: all 1s ease-in-out;
+ transition: all 1s ease-in-out;
+}
+.verticalCenter,
+.relatedPosts > .relatedPosts-list .content {
+ position: absolute;
+ top: 50%;
+ width: 100%;
+ -webkit-transform: translate(0, -50%);
+ -moz-transform: translate(0, -50%);
+ -o-transform: translate(0, -50%);
+ -ms-transform: translate(0, -50%);
+ transform: translate(0, -50%);
+}
+#content-inner,
+#footer {
+ -webkit-animation: bottom-top 1s;
+ -moz-animation: bottom-top 1s;
+ -o-animation: bottom-top 1s;
+ -ms-animation: bottom-top 1s;
+ animation: bottom-top 1s;
+}
+#page-header:not(.full_page),
+#nav.show {
+ -webkit-animation: header-effect 1s;
+ -moz-animation: header-effect 1s;
+ -o-animation: header-effect 1s;
+ -ms-animation: header-effect 1s;
+ animation: header-effect 1s;
+}
+#site-title,
+#site-subtitle {
+ -webkit-animation: titleScale 1s;
+ -moz-animation: titleScale 1s;
+ -o-animation: titleScale 1s;
+ -ms-animation: titleScale 1s;
+ animation: titleScale 1s;
+}
+canvas:not(#ribbon-canvas),
+#web_bg {
+ -webkit-animation: to_show 4s;
+ -moz-animation: to_show 4s;
+ -o-animation: to_show 4s;
+ -ms-animation: to_show 4s;
+ animation: to_show 4s;
+}
+#ribbon-canvas {
+ -webkit-animation: ribbon_to_show 4s;
+ -moz-animation: ribbon_to_show 4s;
+ -o-animation: ribbon_to_show 4s;
+ -ms-animation: ribbon_to_show 4s;
+ animation: ribbon_to_show 4s;
+}
+#sidebar-menus.open > :nth-child(1) {
+ -webkit-animation: sidebarItem 0.2s;
+ -moz-animation: sidebarItem 0.2s;
+ -o-animation: sidebarItem 0.2s;
+ -ms-animation: sidebarItem 0.2s;
+ animation: sidebarItem 0.2s;
+}
+#sidebar-menus.open > :nth-child(2) {
+ -webkit-animation: sidebarItem 0.4s;
+ -moz-animation: sidebarItem 0.4s;
+ -o-animation: sidebarItem 0.4s;
+ -ms-animation: sidebarItem 0.4s;
+ animation: sidebarItem 0.4s;
+}
+#sidebar-menus.open > :nth-child(3) {
+ -webkit-animation: sidebarItem 0.6s;
+ -moz-animation: sidebarItem 0.6s;
+ -o-animation: sidebarItem 0.6s;
+ -ms-animation: sidebarItem 0.6s;
+ animation: sidebarItem 0.6s;
+}
+#sidebar-menus.open > :nth-child(4) {
+ -webkit-animation: sidebarItem 0.8s;
+ -moz-animation: sidebarItem 0.8s;
+ -o-animation: sidebarItem 0.8s;
+ -ms-animation: sidebarItem 0.8s;
+ animation: sidebarItem 0.8s;
+}
+.scroll-down-effects {
+ -webkit-animation: scroll-down-effect 1.5s infinite;
+ -moz-animation: scroll-down-effect 1.5s infinite;
+ -o-animation: scroll-down-effect 1.5s infinite;
+ -ms-animation: scroll-down-effect 1.5s infinite;
+ animation: scroll-down-effect 1.5s infinite;
+}
+.reward-main {
+ -webkit-animation: donate_effcet 0.3s 0.1s ease both;
+ -moz-animation: donate_effcet 0.3s 0.1s ease both;
+ -o-animation: donate_effcet 0.3s 0.1s ease both;
+ -ms-animation: donate_effcet 0.3s 0.1s ease both;
+ animation: donate_effcet 0.3s 0.1s ease both;
+}
+@-moz-keyframes scroll-down-effect {
+ 0% {
+ opacity: 0.4;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
+ filter: alpha(opacity=40);
+ -webkit-transform: translate(0, 0);
+ -moz-transform: translate(0, 0);
+ -o-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ transform: translate(0, 0);
+ }
+ 50% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ -webkit-transform: translate(0, -16px);
+ -moz-transform: translate(0, -16px);
+ -o-transform: translate(0, -16px);
+ -ms-transform: translate(0, -16px);
+ transform: translate(0, -16px);
+ }
+ 100% {
+ opacity: 0.4;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
+ filter: alpha(opacity=40);
+ -webkit-transform: translate(0, 0);
+ -moz-transform: translate(0, 0);
+ -o-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ transform: translate(0, 0);
+ }
+}
+@-webkit-keyframes scroll-down-effect {
+ 0% {
+ opacity: 0.4;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
+ filter: alpha(opacity=40);
+ -webkit-transform: translate(0, 0);
+ -moz-transform: translate(0, 0);
+ -o-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ transform: translate(0, 0);
+ }
+ 50% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ -webkit-transform: translate(0, -16px);
+ -moz-transform: translate(0, -16px);
+ -o-transform: translate(0, -16px);
+ -ms-transform: translate(0, -16px);
+ transform: translate(0, -16px);
+ }
+ 100% {
+ opacity: 0.4;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
+ filter: alpha(opacity=40);
+ -webkit-transform: translate(0, 0);
+ -moz-transform: translate(0, 0);
+ -o-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ transform: translate(0, 0);
+ }
+}
+@-o-keyframes scroll-down-effect {
+ 0% {
+ opacity: 0.4;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
+ filter: alpha(opacity=40);
+ -webkit-transform: translate(0, 0);
+ -moz-transform: translate(0, 0);
+ -o-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ transform: translate(0, 0);
+ }
+ 50% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ -webkit-transform: translate(0, -16px);
+ -moz-transform: translate(0, -16px);
+ -o-transform: translate(0, -16px);
+ -ms-transform: translate(0, -16px);
+ transform: translate(0, -16px);
+ }
+ 100% {
+ opacity: 0.4;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
+ filter: alpha(opacity=40);
+ -webkit-transform: translate(0, 0);
+ -moz-transform: translate(0, 0);
+ -o-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ transform: translate(0, 0);
+ }
+}
+@keyframes scroll-down-effect {
+ 0% {
+ opacity: 0.4;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
+ filter: alpha(opacity=40);
+ -webkit-transform: translate(0, 0);
+ -moz-transform: translate(0, 0);
+ -o-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ transform: translate(0, 0);
+ }
+ 50% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ -webkit-transform: translate(0, -16px);
+ -moz-transform: translate(0, -16px);
+ -o-transform: translate(0, -16px);
+ -ms-transform: translate(0, -16px);
+ transform: translate(0, -16px);
+ }
+ 100% {
+ opacity: 0.4;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
+ filter: alpha(opacity=40);
+ -webkit-transform: translate(0, 0);
+ -moz-transform: translate(0, 0);
+ -o-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ transform: translate(0, 0);
+ }
+}
+@-moz-keyframes header-effect {
+ 0% {
+ -webkit-transform: translateY(-35px);
+ -moz-transform: translateY(-35px);
+ -o-transform: translateY(-35px);
+ -ms-transform: translateY(-35px);
+ transform: translateY(-35px);
+ }
+ 100% {
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -o-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+@-webkit-keyframes header-effect {
+ 0% {
+ -webkit-transform: translateY(-35px);
+ -moz-transform: translateY(-35px);
+ -o-transform: translateY(-35px);
+ -ms-transform: translateY(-35px);
+ transform: translateY(-35px);
+ }
+ 100% {
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -o-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+@-o-keyframes header-effect {
+ 0% {
+ -webkit-transform: translateY(-35px);
+ -moz-transform: translateY(-35px);
+ -o-transform: translateY(-35px);
+ -ms-transform: translateY(-35px);
+ transform: translateY(-35px);
+ }
+ 100% {
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -o-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+@keyframes header-effect {
+ 0% {
+ -webkit-transform: translateY(-35px);
+ -moz-transform: translateY(-35px);
+ -o-transform: translateY(-35px);
+ -ms-transform: translateY(-35px);
+ transform: translateY(-35px);
+ }
+ 100% {
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -o-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+@-moz-keyframes bottom-top {
+ 0% {
+ -webkit-transform: translateY(35px);
+ -moz-transform: translateY(35px);
+ -o-transform: translateY(35px);
+ -ms-transform: translateY(35px);
+ transform: translateY(35px);
+ }
+ 100% {
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -o-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+@-webkit-keyframes bottom-top {
+ 0% {
+ -webkit-transform: translateY(35px);
+ -moz-transform: translateY(35px);
+ -o-transform: translateY(35px);
+ -ms-transform: translateY(35px);
+ transform: translateY(35px);
+ }
+ 100% {
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -o-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+@-o-keyframes bottom-top {
+ 0% {
+ -webkit-transform: translateY(35px);
+ -moz-transform: translateY(35px);
+ -o-transform: translateY(35px);
+ -ms-transform: translateY(35px);
+ transform: translateY(35px);
+ }
+ 100% {
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -o-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+@keyframes bottom-top {
+ 0% {
+ -webkit-transform: translateY(35px);
+ -moz-transform: translateY(35px);
+ -o-transform: translateY(35px);
+ -ms-transform: translateY(35px);
+ transform: translateY(35px);
+ }
+ 100% {
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -o-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+@-moz-keyframes titleScale {
+ 0% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ -webkit-transform: scale(0.7);
+ -moz-transform: scale(0.7);
+ -o-transform: scale(0.7);
+ -ms-transform: scale(0.7);
+ transform: scale(0.7);
+ }
+ 100% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -o-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+}
+@-webkit-keyframes titleScale {
+ 0% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ -webkit-transform: scale(0.7);
+ -moz-transform: scale(0.7);
+ -o-transform: scale(0.7);
+ -ms-transform: scale(0.7);
+ transform: scale(0.7);
+ }
+ 100% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -o-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+}
+@-o-keyframes titleScale {
+ 0% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ -webkit-transform: scale(0.7);
+ -moz-transform: scale(0.7);
+ -o-transform: scale(0.7);
+ -ms-transform: scale(0.7);
+ transform: scale(0.7);
+ }
+ 100% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -o-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+}
+@keyframes titleScale {
+ 0% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ -webkit-transform: scale(0.7);
+ -moz-transform: scale(0.7);
+ -o-transform: scale(0.7);
+ -ms-transform: scale(0.7);
+ transform: scale(0.7);
+ }
+ 100% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -o-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+}
+@-moz-keyframes search_close {
+ 0% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -o-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ -webkit-transform: scale(0.7);
+ -moz-transform: scale(0.7);
+ -o-transform: scale(0.7);
+ -ms-transform: scale(0.7);
+ transform: scale(0.7);
+ }
+}
+@-webkit-keyframes search_close {
+ 0% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -o-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ -webkit-transform: scale(0.7);
+ -moz-transform: scale(0.7);
+ -o-transform: scale(0.7);
+ -ms-transform: scale(0.7);
+ transform: scale(0.7);
+ }
+}
+@-o-keyframes search_close {
+ 0% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -o-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ -webkit-transform: scale(0.7);
+ -moz-transform: scale(0.7);
+ -o-transform: scale(0.7);
+ -ms-transform: scale(0.7);
+ transform: scale(0.7);
+ }
+}
+@keyframes search_close {
+ 0% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -o-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ -webkit-transform: scale(0.7);
+ -moz-transform: scale(0.7);
+ -o-transform: scale(0.7);
+ -ms-transform: scale(0.7);
+ transform: scale(0.7);
+ }
+}
+@-moz-keyframes to_show {
+ 0% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ }
+ 100% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ }
+}
+@-webkit-keyframes to_show {
+ 0% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ }
+ 100% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ }
+}
+@-o-keyframes to_show {
+ 0% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ }
+ 100% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ }
+}
+@keyframes to_show {
+ 0% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ }
+ 100% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ }
+}
+@-moz-keyframes to_hide {
+ 0% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ }
+ 100% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ }
+}
+@-webkit-keyframes to_hide {
+ 0% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ }
+ 100% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ }
+}
+@-o-keyframes to_hide {
+ 0% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ }
+ 100% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ }
+}
+@keyframes to_hide {
+ 0% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ }
+ 100% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ }
+}
+@-moz-keyframes ribbon_to_show {
+ 0% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ }
+ 100% {
+ opacity: 0.6;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+ filter: alpha(opacity=60);
+ }
+}
+@-webkit-keyframes ribbon_to_show {
+ 0% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ }
+ 100% {
+ opacity: 0.6;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+ filter: alpha(opacity=60);
+ }
+}
+@-o-keyframes ribbon_to_show {
+ 0% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ }
+ 100% {
+ opacity: 0.6;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+ filter: alpha(opacity=60);
+ }
+}
+@keyframes ribbon_to_show {
+ 0% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ }
+ 100% {
+ opacity: 0.6;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+ filter: alpha(opacity=60);
+ }
+}
+@-moz-keyframes avatar_turn_around {
+ from {
+ -webkit-transform: rotate(0);
+ -moz-transform: rotate(0);
+ -o-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ }
+ to {
+ -webkit-transform: rotate(360deg);
+ -moz-transform: rotate(360deg);
+ -o-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+@-webkit-keyframes avatar_turn_around {
+ from {
+ -webkit-transform: rotate(0);
+ -moz-transform: rotate(0);
+ -o-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ }
+ to {
+ -webkit-transform: rotate(360deg);
+ -moz-transform: rotate(360deg);
+ -o-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+@-o-keyframes avatar_turn_around {
+ from {
+ -webkit-transform: rotate(0);
+ -moz-transform: rotate(0);
+ -o-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ }
+ to {
+ -webkit-transform: rotate(360deg);
+ -moz-transform: rotate(360deg);
+ -o-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+@keyframes avatar_turn_around {
+ from {
+ -webkit-transform: rotate(0);
+ -moz-transform: rotate(0);
+ -o-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ }
+ to {
+ -webkit-transform: rotate(360deg);
+ -moz-transform: rotate(360deg);
+ -o-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+@-moz-keyframes sub_menus {
+ 0% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ -webkit-transform: translateY(10px);
+ -moz-transform: translateY(10px);
+ -o-transform: translateY(10px);
+ -ms-transform: translateY(10px);
+ transform: translateY(10px);
+ }
+ 100% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -o-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+@-webkit-keyframes sub_menus {
+ 0% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ -webkit-transform: translateY(10px);
+ -moz-transform: translateY(10px);
+ -o-transform: translateY(10px);
+ -ms-transform: translateY(10px);
+ transform: translateY(10px);
+ }
+ 100% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -o-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+@-o-keyframes sub_menus {
+ 0% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ -webkit-transform: translateY(10px);
+ -moz-transform: translateY(10px);
+ -o-transform: translateY(10px);
+ -ms-transform: translateY(10px);
+ transform: translateY(10px);
+ }
+ 100% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -o-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+@keyframes sub_menus {
+ 0% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ -webkit-transform: translateY(10px);
+ -moz-transform: translateY(10px);
+ -o-transform: translateY(10px);
+ -ms-transform: translateY(10px);
+ transform: translateY(10px);
+ }
+ 100% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -o-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+@-moz-keyframes donate_effcet {
+ 0% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ -webkit-transform: translateY(-20px);
+ -moz-transform: translateY(-20px);
+ -o-transform: translateY(-20px);
+ -ms-transform: translateY(-20px);
+ transform: translateY(-20px);
+ }
+ 100% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -o-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+@-webkit-keyframes donate_effcet {
+ 0% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ -webkit-transform: translateY(-20px);
+ -moz-transform: translateY(-20px);
+ -o-transform: translateY(-20px);
+ -ms-transform: translateY(-20px);
+ transform: translateY(-20px);
+ }
+ 100% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -o-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+@-o-keyframes donate_effcet {
+ 0% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ -webkit-transform: translateY(-20px);
+ -moz-transform: translateY(-20px);
+ -o-transform: translateY(-20px);
+ -ms-transform: translateY(-20px);
+ transform: translateY(-20px);
+ }
+ 100% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -o-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+@keyframes donate_effcet {
+ 0% {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ -webkit-transform: translateY(-20px);
+ -moz-transform: translateY(-20px);
+ -o-transform: translateY(-20px);
+ -ms-transform: translateY(-20px);
+ transform: translateY(-20px);
+ }
+ 100% {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -o-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+@-moz-keyframes sidebarItem {
+ 0% {
+ -webkit-transform: translateX(200px);
+ -moz-transform: translateX(200px);
+ -o-transform: translateX(200px);
+ -ms-transform: translateX(200px);
+ transform: translateX(200px);
+ }
+ 100% {
+ -webkit-transform: translateX(0);
+ -moz-transform: translateX(0);
+ -o-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+@-webkit-keyframes sidebarItem {
+ 0% {
+ -webkit-transform: translateX(200px);
+ -moz-transform: translateX(200px);
+ -o-transform: translateX(200px);
+ -ms-transform: translateX(200px);
+ transform: translateX(200px);
+ }
+ 100% {
+ -webkit-transform: translateX(0);
+ -moz-transform: translateX(0);
+ -o-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+@-o-keyframes sidebarItem {
+ 0% {
+ -webkit-transform: translateX(200px);
+ -moz-transform: translateX(200px);
+ -o-transform: translateX(200px);
+ -ms-transform: translateX(200px);
+ transform: translateX(200px);
+ }
+ 100% {
+ -webkit-transform: translateX(0);
+ -moz-transform: translateX(0);
+ -o-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+@keyframes sidebarItem {
+ 0% {
+ -webkit-transform: translateX(200px);
+ -moz-transform: translateX(200px);
+ -o-transform: translateX(200px);
+ -ms-transform: translateX(200px);
+ transform: translateX(200px);
+ }
+ 100% {
+ -webkit-transform: translateX(0);
+ -moz-transform: translateX(0);
+ -o-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+:root {
+ --global-font-size: 14px;
+ --global-bg: #fff;
+ --font-color: #4c4948;
+ --hr-border: #a4d8fa;
+ --hr-before-color: #80c8f8;
+ --search-bg: #f6f8fa;
+ --search-input-color: #4c4948;
+ --search-a-color: #4c4948;
+ --preloader-bg: #37474f;
+ --preloader-color: #fff;
+ --tab-border-color: #f0f0f0;
+ --tab-botton-bg: #f0f0f0;
+ --tab-botton-color: #1f2d3d;
+ --tab-button-hover-bg: #dcdcdc;
+ --tab-button-active-bg: #fff;
+ --card-bg: #fff;
+ --card-meta: #858585;
+ --sidebar-bg: #f6f8fa;
+ --sidebar-menu-bg: #fff;
+ --btn-hover-color: #ff7242;
+ --btn-color: #fff;
+ --btn-bg: #49b1f5;
+ --text-bg-hover: rgba(73,177,245,0.7);
+ --light-grey: #eee;
+ --dark-grey: #cacaca;
+ --white: #fff;
+ --text-highlight-color: #1f2d3d;
+ --blockquote-color: #6a737d;
+ --blockquote-bg: rgba(73,177,245,0.1);
+ --reward-pop: #f5f5f5;
+ --toc-link-color: #666261;
+ --card-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.05);
+ --card-hover-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.09);
+ --pseudo-hover: #ff7242;
+ --headline-presudo: #a0a0a0;
+ --scrollbar-color: rgba(0,0,0,0.5);
+ --default-bg-color: #49b1f5;
+ --zoom-bg: #fff;
+ --mark-bg: rgba(0,0,0,0.3);
+}
+body {
+ position: relative;
+ overflow-y: scroll;
+ min-height: 100%;
+ background: var(--global-bg);
+ color: var(--font-color);
+ font-size: var(--global-font-size);
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
+ line-height: 2;
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ scroll-behavior: smooth;
+}
+@-moz-document url-prefix() {
+ * {
+ scrollbar-width: thin;
+ scrollbar-color: var(--scrollbar-color) transparent;
+ }
+}
+*::-webkit-scrollbar {
+ width: 5px;
+ height: 5px;
+}
+*::-webkit-scrollbar-thumb {
+ background: var(--scrollbar-color);
+}
+*::-webkit-scrollbar-track {
+ background-color: transparent;
+}
+input::placeholder {
+ color: var(--font-color);
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ position: relative;
+ margin: 20px 0 14px;
+ color: var(--text-highlight-color);
+ font-weight: bold;
+}
+h1 code,
+h2 code,
+h3 code,
+h4 code,
+h5 code,
+h6 code {
+ font-size: inherit !important;
+}
+* {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.table-wrap {
+ overflow-x: scroll;
+ margin: 0 0 20px;
+ border-radius: 5px;
+}
+.table-wrap table {
+ border-radius: 5px;
+}
+.table-wrap table thead > tr:first-child th:first-child {
+ border-top-left-radius: 5px;
+}
+.table-wrap table thead > tr:first-child th:last-child {
+ border-top-right-radius: 5px;
+}
+.table-wrap table tbody > tr:last-child td:first-child {
+ border-bottom-left-radius: 5px;
+}
+.table-wrap table tbody > tr:last-child td:last-child {
+ border-bottom-right-radius: 5px;
+}
+table {
+ display: table;
+ width: 100%;
+ border-spacing: 0;
+ border-collapse: separate;
+ border-top: 1px solid var(--light-grey);
+ border-left: 1px solid var(--light-grey);
+ empty-cells: show;
+}
+table thead {
+ background: rgba(153,169,191,0.1);
+}
+table th,
+table td {
+ padding: 6px 12px;
+ border: 1px solid var(--light-grey);
+ border-top: none;
+ border-left: none;
+ vertical-align: middle;
+}
+*::selection {
+ background: #00c4b6;
+ color: #f7f7f7;
+}
+button {
+ padding: 0;
+ outline: 0;
+ border: none;
+ background: none;
+ cursor: pointer;
+ touch-action: manipulation;
+}
+a {
+ color: #99a9bf;
+ text-decoration: none;
+ word-wrap: break-word;
+ -webkit-transition: all 0.2s;
+ -moz-transition: all 0.2s;
+ -o-transition: all 0.2s;
+ -ms-transition: all 0.2s;
+ transition: all 0.2s;
+ overflow-wrap: break-word;
+}
+a:hover {
+ color: #49b1f5;
+}
+.is-center {
+ text-align: center;
+}
+.pull-left {
+ float: left;
+}
+.pull-right {
+ float: right;
+}
+img[src=''],
+img:not([src]) {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+}
+.img-alt {
+ margin: -10px 0 10px;
+ color: #858585;
+}
+.img-alt:hover {
+ text-decoration: none !important;
+}
+blockquote {
+ margin: 0 0 20px;
+ padding: 7px 15px;
+ border-left: 4px solid #49b1f5;
+ background-color: var(--blockquote-bg);
+ color: var(--blockquote-color);
+ border-radius: 6px;
+}
+blockquote footer cite:before {
+ padding: 0 5px;
+ content: '—';
+}
+blockquote > :last-child {
+ margin-bottom: 0 !important;
+}
+:root {
+ --hl-color: #90a4ae;
+ --hl-bg: #f6f8fa;
+ --hltools-bg: #e6ebf1;
+ --hltools-color: #90a4ae;
+ --hlnumber-bg: #f6f8fa;
+ --hlnumber-color: rgba(144,164,174,0.5);
+ --hlscrollbar-bg: #dce4eb;
+ --hlexpand-bg: linear-gradient(180deg, rgba(246,248,250,0.6), rgba(246,248,250,0.9));
+}
+[data-theme='dark'] {
+ --hl-color: rgba(255,255,255,0.7);
+ --hl-bg: #171717;
+ --hltools-bg: #1a1a1a;
+ --hltools-color: #90a4ae;
+ --hlnumber-bg: #171717;
+ --hlnumber-color: rgba(255,255,255,0.4);
+ --hlscrollbar-bg: #1f1f1f;
+ --hlexpand-bg: linear-gradient(180deg, rgba(23,23,23,0.6), rgba(23,23,23,0.9));
+}
+@-moz-document url-prefix() {
+ scrollbar-color: var(--hlscrollbar-bg) transparent;
+}
+figure.highlight table::-webkit-scrollbar-thumb {
+ background: var(--hlscrollbar-bg);
+}
+figure.highlight pre .deletion {
+ color: #bf42bf;
+}
+figure.highlight pre .addition {
+ color: #105ede;
+}
+figure.highlight pre .meta {
+ color: #7c4dff;
+}
+figure.highlight pre .comment {
+ color: rgba(149,165,166,0.8);
+}
+figure.highlight pre .variable,
+figure.highlight pre .attribute,
+figure.highlight pre .regexp,
+figure.highlight pre .ruby .constant,
+figure.highlight pre .xml .tag .title,
+figure.highlight pre .xml .pi,
+figure.highlight pre .xml .doctype,
+figure.highlight pre .html .doctype,
+figure.highlight pre .css .id,
+figure.highlight pre .tag .name,
+figure.highlight pre .css .class,
+figure.highlight pre .css .pseudo {
+ color: #e53935;
+}
+figure.highlight pre .tag {
+ color: #39adb5;
+}
+figure.highlight pre .number,
+figure.highlight pre .preprocessor,
+figure.highlight pre .literal,
+figure.highlight pre .params,
+figure.highlight pre .constant,
+figure.highlight pre .command {
+ color: #f76d47;
+}
+figure.highlight pre .built_in {
+ color: #ffb62c;
+}
+figure.highlight pre .ruby .class .title,
+figure.highlight pre .css .rules .attribute,
+figure.highlight pre .string,
+figure.highlight pre .value,
+figure.highlight pre .inheritance,
+figure.highlight pre .header,
+figure.highlight pre .ruby .symbol,
+figure.highlight pre .xml .cdata,
+figure.highlight pre .special,
+figure.highlight pre .number,
+figure.highlight pre .formula {
+ color: #91b859;
+}
+figure.highlight pre .keyword,
+figure.highlight pre .title,
+figure.highlight pre .css .hexcolor {
+ color: #39adb5;
+}
+figure.highlight pre .function,
+figure.highlight pre .python .decorator,
+figure.highlight pre .python .title,
+figure.highlight pre .ruby .function .title,
+figure.highlight pre .ruby .title .keyword,
+figure.highlight pre .perl .sub,
+figure.highlight pre .javascript .title,
+figure.highlight pre .coffeescript .title {
+ color: #6182b8;
+}
+figure.highlight pre .tag .attr,
+figure.highlight pre .javascript .function {
+ color: #7c4dff;
+}
+#article-container figure.highlight .line.marked {
+ background-color: rgba(128,203,196,0.251);
+}
+#article-container figure.highlight table {
+ display: block;
+ overflow: auto;
+ border: none;
+}
+#article-container figure.highlight table td {
+ padding: 0;
+ border: none;
+}
+#article-container figure.highlight .gutter pre {
+ padding-right: 10px;
+ padding-left: 10px;
+ background-color: var(--hlnumber-bg);
+ color: var(--hlnumber-color);
+ text-align: right;
+}
+#article-container figure.highlight .code pre {
+ padding-right: 10px;
+ padding-left: 10px;
+ width: 100%;
+}
+#article-container pre,
+#article-container figure.highlight {
+ overflow: auto;
+ margin: 0 0 20px;
+ padding: 0;
+ background: var(--hl-bg);
+ color: var(--hl-color);
+ line-height: 1.6;
+}
+#article-container pre,
+#article-container code {
+ font-size: var(--global-font-size);
+ font-family: consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
+ border-radius: 6px;
+}
+#article-container code {
+ padding: 2px 5px;
+ background: rgba(27,31,35,0.05);
+ color: #f47466;
+}
+#article-container pre {
+ padding: 10px 20px;
+}
+#article-container pre code {
+ padding: 0;
+ background: none;
+ color: var(--hl-color);
+ text-shadow: none;
+}
+#article-container figure.highlight {
+ position: relative;
+ border-radius: 6px;
+}
+#article-container figure.highlight pre {
+ margin: 0;
+ padding: 8px 0;
+ border: none;
+}
+#article-container figure.highlight figcaption,
+#article-container figure.highlight .caption {
+ padding: 6px 0 2px 14px;
+ font-size: var(--global-font-size);
+ line-height: 1em;
+}
+#article-container figure.highlight figcaption a,
+#article-container figure.highlight .caption a {
+ float: right;
+ padding-right: 10px;
+ color: var(--hl-color);
+}
+#article-container figure.highlight figcaption a:hover,
+#article-container figure.highlight .caption a:hover {
+ border-bottom-color: var(--hl-color);
+}
+#article-container figure.highlight.copy-true {
+ -webkit-user-select: all;
+ -moz-user-select: all;
+ -ms-user-select: all;
+ user-select: all;
+ -webkit-user-select: all;
+}
+#article-container figure.highlight.copy-true > table,
+#article-container figure.highlight.copy-true > pre {
+ display: block !important;
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+}
+#article-container .highlight-tools {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: box;
+ display: flex;
+ -webkit-box-align: center;
+ -moz-box-align: center;
+ -o-box-align: center;
+ -ms-flex-align: center;
+ -webkit-align-items: center;
+ align-items: center;
+ padding: 0 8px;
+ min-height: 24px;
+ height: 2.15em;
+ background: var(--hltools-bg);
+ color: var(--hltools-color);
+ font-size: var(--global-font-size);
+ overflow: hidden;
+}
+#article-container .highlight-tools > * {
+ padding: 5px;
+}
+#article-container .highlight-tools i {
+ cursor: pointer;
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ -o-transition: all 0.3s;
+ -ms-transition: all 0.3s;
+ transition: all 0.3s;
+}
+#article-container .highlight-tools i:hover {
+ color: #49b1f5;
+}
+#article-container .highlight-tools.closed ~ * {
+ display: none;
+}
+#article-container .highlight-tools.closed .expand {
+ -webkit-transform: rotate(-90deg);
+ -moz-transform: rotate(-90deg);
+ -o-transform: rotate(-90deg);
+ -ms-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+}
+#article-container .highlight-tools > .macStyle {
+ padding: 0;
+}
+#article-container .highlight-tools .code-lang {
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ -o-box-flex: 1;
+ box-flex: 1;
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ text-transform: uppercase;
+ font-weight: bold;
+ font-size: 1.15em;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ -webkit-user-select: none;
+ padding: 2px;
+}
+#article-container .highlight-tools .copy-notice {
+ padding-right: 2px;
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ -webkit-transition: opacity 0.4s;
+ -moz-transition: opacity 0.4s;
+ -o-transition: opacity 0.4s;
+ -ms-transition: opacity 0.4s;
+ transition: opacity 0.4s;
+}
+#article-container .highlight-tools .code-lang {
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ -o-box-flex: 1;
+ box-flex: 1;
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+#article-container .gutter {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ -webkit-user-select: none;
+}
+#article-container .gist table {
+ width: auto;
+}
+#article-container .gist table td {
+ border: none;
+}
+.article-sort {
+ margin-left: 10px;
+ padding-left: 20px;
+ border-left: 2px solid #aadafa;
+}
+.article-sort-title {
+ position: relative;
+ margin-left: 10px;
+ padding-bottom: 20px;
+ padding-left: 20px;
+ font-size: 1.72em;
+}
+.article-sort-title:hover:before {
+ border-color: var(--pseudo-hover);
+}
+.article-sort-title:before {
+ position: absolute;
+ top: calc(((100% - 36px) / 2));
+ left: -9px;
+ z-index: 1;
+ width: 10px;
+ height: 10px;
+ border: 5px solid #49b1f5;
+ border-radius: 10px;
+ background: var(--card-bg);
+ content: '';
+ line-height: 10px;
+ -webkit-transition: all 0.2s ease-in-out;
+ -moz-transition: all 0.2s ease-in-out;
+ -o-transition: all 0.2s ease-in-out;
+ -ms-transition: all 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
+}
+.article-sort-title:after {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ z-index: 0;
+ width: 2px;
+ height: 1.5em;
+ background: #aadafa;
+ content: '';
+}
+.article-sort-item {
+ position: relative;
+ display: -webkit-box;
+ display: -moz-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: box;
+ display: flex;
+ -webkit-box-align: center;
+ -moz-box-align: center;
+ -o-box-align: center;
+ -ms-flex-align: center;
+ -webkit-align-items: center;
+ align-items: center;
+ margin: 0 0 20px 10px;
+ -webkit-transition: all 0.2s ease-in-out;
+ -moz-transition: all 0.2s ease-in-out;
+ -o-transition: all 0.2s ease-in-out;
+ -ms-transition: all 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
+}
+.article-sort-item:hover:before {
+ border-color: var(--pseudo-hover);
+}
+.article-sort-item:before {
+ position: absolute;
+ left: calc(-20px - 17px);
+ width: 6px;
+ height: 6px;
+ border: 3px solid #49b1f5;
+ border-radius: 6px;
+ background: var(--card-bg);
+ content: '';
+ -webkit-transition: all 0.2s ease-in-out;
+ -moz-transition: all 0.2s ease-in-out;
+ -o-transition: all 0.2s ease-in-out;
+ -ms-transition: all 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
+}
+.article-sort-item.no-article-cover {
+ height: 80px;
+}
+.article-sort-item.no-article-cover .article-sort-item-info {
+ padding: 0;
+}
+.article-sort-item.year {
+ font-size: 1.43em;
+ margin-bottom: 10px;
+}
+.article-sort-item.year:hover:before {
+ border-color: #49b1f5;
+}
+.article-sort-item.year:before {
+ border-color: var(--pseudo-hover);
+}
+.article-sort-item-time {
+ color: var(--card-meta);
+ font-size: 0.85em;
+}
+.article-sort-item-time time {
+ padding-left: 6px;
+ cursor: default;
+}
+.article-sort-item-title {
+ color: var(--font-color);
+ font-size: 1.05em;
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ -o-transition: all 0.3s;
+ -ms-transition: all 0.3s;
+ transition: all 0.3s;
+ -webkit-line-clamp: 2;
+}
+.article-sort-item-title:hover {
+ color: #49b1f5;
+ -webkit-transform: translateX(10px);
+ -moz-transform: translateX(10px);
+ -o-transform: translateX(10px);
+ -ms-transform: translateX(10px);
+ transform: translateX(10px);
+}
+.article-sort-item-img {
+ overflow: hidden;
+ width: 100px;
+ height: 70px;
+ border-radius: 6px;
+}
+@media screen and (max-width: 768px) {
+ .article-sort-item-img {
+ width: 70px;
+ height: 70px;
+ }
+}
+.article-sort-item-info {
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ -o-box-flex: 1;
+ box-flex: 1;
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ padding: 0 16px;
+}
+.category-lists .category-title {
+ font-size: 2.57em;
+}
+@media screen and (max-width: 768px) {
+ .category-lists .category-title {
+ font-size: 2em;
+ }
+}
+.category-lists .category-list {
+ margin-bottom: 0;
+}
+.category-lists .category-list a {
+ color: var(--font-color);
+}
+.category-lists .category-list a:hover {
+ color: #49b1f5;
+}
+.category-lists .category-list .category-list-count {
+ margin-left: 8px;
+ color: var(--card-meta);
+}
+.category-lists .category-list .category-list-count:before {
+ content: '(';
+}
+.category-lists .category-list .category-list-count:after {
+ content: ')';
+}
+.category-lists ul {
+ padding: 0 0 0 20px;
+}
+.category-lists ul ul {
+ padding-left: 4px;
+}
+.category-lists ul li {
+ position: relative;
+ margin: 6px 0;
+ padding: 0.12em 0.4em 0.12em 1.4em;
+}
+#body-wrap {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: box;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -moz-box-orient: vertical;
+ -o-box-orient: vertical;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ min-height: 100vh;
+}
+.layout {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: box;
+ display: flex;
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ -o-box-flex: 1;
+ box-flex: 1;
+ -webkit-flex: 1 auto;
+ -ms-flex: 1 auto;
+ flex: 1 auto;
+ margin: 0 auto;
+ padding: 40px 15px;
+ max-width: 1200px;
+ width: 100%;
+}
+@media screen and (max-width: 900px) {
+ .layout {
+ -webkit-box-orient: vertical;
+ -moz-box-orient: vertical;
+ -o-box-orient: vertical;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ }
+}
+@media screen and (max-width: 768px) {
+ .layout {
+ padding: 20px 5px;
+ }
+}
+@media screen and (min-width: 2000px) {
+ .layout {
+ max-width: 70%;
+ }
+}
+.layout > div:first-child:not(.nc) {
+ -webkit-align-self: flex-start;
+ align-self: flex-start;
+ -ms-flex-item-align: start;
+ padding: 50px 40px;
+}
+@media screen and (max-width: 768px) {
+ .layout > div:first-child:not(.nc) {
+ padding: 36px 14px;
+ }
+}
+.layout > div:first-child {
+ width: 74%;
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ -o-transition: all 0.3s;
+ -ms-transition: all 0.3s;
+ transition: all 0.3s;
+}
+@media screen and (max-width: 900px) {
+ .layout > div:first-child {
+ width: 100% !important;
+ }
+}
+.layout.hide-aside {
+ max-width: 1000px;
+}
+@media screen and (min-width: 2000px) {
+ .layout.hide-aside {
+ max-width: 1300px;
+ }
+}
+.layout.hide-aside > div {
+ width: 100% !important;
+}
+.apple #page-header.full_page {
+ background-attachment: scroll !important;
+}
+.apple .recent-post-item,
+.apple .avatar-img,
+.apple .flink-item-icon {
+ -webkit-transform: translateZ(0);
+ -moz-transform: translateZ(0);
+ -o-transform: translateZ(0);
+ -ms-transform: translateZ(0);
+ transform: translateZ(0);
+}
+#article-container .flink {
+ margin-bottom: 20px;
+}
+#article-container .flink .flink-list {
+ overflow: auto;
+ padding: 10px 10px 0;
+ text-align: center;
+}
+#article-container .flink .flink-list > .flink-list-item {
+ position: relative;
+ float: left;
+ overflow: hidden;
+ margin: 15px 7px;
+ width: calc(100% / 3 - 15px);
+ height: 90px;
+ line-height: 17px;
+ -webkit-transform: translateZ(0);
+ border-radius: 8px;
+}
+@media screen and (max-width: 1024px) {
+ #article-container .flink .flink-list > .flink-list-item {
+ width: calc(50% - 15px) !important;
+ }
+}
+@media screen and (max-width: 600px) {
+ #article-container .flink .flink-list > .flink-list-item {
+ width: calc(100% - 15px) !important;
+ }
+}
+#article-container .flink .flink-list > .flink-list-item:hover .flink-item-icon {
+ margin-left: -10px;
+ width: 0;
+}
+#article-container .flink .flink-list > .flink-list-item:before {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: -1;
+ background: var(--text-bg-hover);
+ content: '';
+ -webkit-transition: -webkit-transform 0.3s ease-out;
+ -moz-transition: -moz-transform 0.3s ease-out;
+ -o-transition: -o-transform 0.3s ease-out;
+ -ms-transition: -ms-transform 0.3s ease-out;
+ transition: transform 0.3s ease-out;
+ -webkit-transform: scale(0);
+ -moz-transform: scale(0);
+ -o-transform: scale(0);
+ -ms-transform: scale(0);
+ transform: scale(0);
+}
+#article-container .flink .flink-list > .flink-list-item:hover:before,
+#article-container .flink .flink-list > .flink-list-item:focus:before,
+#article-container .flink .flink-list > .flink-list-item:active:before {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -o-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+}
+#article-container .flink .flink-list > .flink-list-item a {
+ color: var(--font-color);
+ text-decoration: none;
+}
+#article-container .flink .flink-list > .flink-list-item a .flink-item-icon {
+ float: left;
+ overflow: hidden;
+ margin: 15px 10px;
+ width: 60px;
+ height: 60px;
+ border-radius: 7px;
+ -webkit-transition: width 0.3s ease-out;
+ -moz-transition: width 0.3s ease-out;
+ -o-transition: width 0.3s ease-out;
+ -ms-transition: width 0.3s ease-out;
+ transition: width 0.3s ease-out;
+}
+#article-container .flink .flink-list > .flink-list-item a .flink-item-icon img {
+ width: 100%;
+ height: 100%;
+ -webkit-transition: filter 375ms ease-in 0.2s, -webkit-transform 0.3s;
+ -moz-transition: filter 375ms ease-in 0.2s, -moz-transform 0.3s;
+ -o-transition: filter 375ms ease-in 0.2s, -o-transform 0.3s;
+ -ms-transition: filter 375ms ease-in 0.2s, -ms-transform 0.3s;
+ transition: filter 375ms ease-in 0.2s, transform 0.3s;
+ object-fit: cover;
+}
+#article-container .flink .flink-list > .flink-list-item a .img-alt {
+ display: none;
+}
+#article-container .flink .flink-item-name {
+ padding: 16px 10px 0 0;
+ height: 40px;
+ font-weight: bold;
+ font-size: 1.43em;
+}
+#article-container .flink .flink-item-desc {
+ padding: 16px 10px 16px 0;
+ height: 50px;
+ font-size: 0.93em;
+}
+#article-container .flink .flink-name {
+ margin-bottom: 5px;
+ font-weight: bold;
+ font-size: 1.5em;
+}
+#recent-posts .recent-post-item {
+ position: relative;
+ overflow: hidden;
+ margin-bottom: 20px;
+ display: -webkit-box;
+ display: -moz-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: box;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -moz-box-orient: horizontal;
+ -o-box-orient: horizontal;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -moz-box-align: center;
+ -o-box-align: center;
+ -ms-flex-align: center;
+ -webkit-align-items: center;
+ align-items: center;
+ height: 16.8em;
+}
+@media screen and (max-width: 768px) {
+ #recent-posts .recent-post-item {
+ -webkit-box-orient: vertical;
+ -moz-box-orient: vertical;
+ -o-box-orient: vertical;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ height: auto;
+ }
+}
+@media screen and (min-width: 2000px) {
+ #recent-posts .recent-post-item {
+ height: 18.8em;
+ }
+}
+#recent-posts .recent-post-item:hover .post-bg {
+ -webkit-transform: scale(1.1);
+ -moz-transform: scale(1.1);
+ -o-transform: scale(1.1);
+ -ms-transform: scale(1.1);
+ transform: scale(1.1);
+}
+#recent-posts .recent-post-item.ads-wrap {
+ display: block !important;
+ height: auto !important;
+}
+#recent-posts .recent-post-item .post_cover {
+ overflow: hidden;
+ width: 42%;
+ height: 100%;
+}
+@media screen and (max-width: 768px) {
+ #recent-posts .recent-post-item .post_cover {
+ width: 100%;
+ height: 230px;
+ }
+}
+#recent-posts .recent-post-item .post_cover.right {
+ -webkit-box-ordinal-group: 1;
+ -moz-box-ordinal-group: 1;
+ -o-box-ordinal-group: 1;
+ -ms-flex-order: 1;
+ -webkit-order: 1;
+ order: 1;
+}
+@media screen and (max-width: 768px) {
+ #recent-posts .recent-post-item .post_cover.right {
+ -webkit-box-ordinal-group: 0;
+ -moz-box-ordinal-group: 0;
+ -o-box-ordinal-group: 0;
+ -ms-flex-order: 0;
+ -webkit-order: 0;
+ order: 0;
+ }
+}
+#recent-posts .recent-post-item .post_cover .post-bg {
+ z-index: -4;
+}
+#recent-posts .recent-post-item >.recent-post-info {
+ padding: 0 40px;
+ width: 58%;
+}
+@media screen and (max-width: 768px) {
+ #recent-posts .recent-post-item >.recent-post-info {
+ padding: 20px 20px 30px;
+ width: 100%;
+ }
+}
+#recent-posts .recent-post-item >.recent-post-info.no-cover {
+ width: 100%;
+}
+@media screen and (max-width: 768px) {
+ #recent-posts .recent-post-item >.recent-post-info.no-cover {
+ padding: 30px 20px;
+ }
+}
+#recent-posts .recent-post-item >.recent-post-info > .article-title {
+ color: var(--text-highlight-color);
+ font-size: 1.55em;
+ line-height: 1.4;
+ -webkit-transition: all 0.2s ease-in-out;
+ -moz-transition: all 0.2s ease-in-out;
+ -o-transition: all 0.2s ease-in-out;
+ -ms-transition: all 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
+ -webkit-line-clamp: 2;
+}
+#recent-posts .recent-post-item >.recent-post-info > .article-title .sticky {
+ margin-right: 10px;
+ color: #ff7242;
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+}
+@media screen and (max-width: 768px) {
+ #recent-posts .recent-post-item >.recent-post-info > .article-title {
+ font-size: 1.43em;
+ }
+}
+#recent-posts .recent-post-item >.recent-post-info > .article-title:hover {
+ color: #49b1f5;
+}
+#recent-posts .recent-post-item >.recent-post-info > .article-meta-wrap {
+ margin: 6px 0;
+ color: var(--card-meta);
+ font-size: 0.9em;
+}
+#recent-posts .recent-post-item >.recent-post-info > .article-meta-wrap > .post-meta-date {
+ cursor: default;
+}
+#recent-posts .recent-post-item >.recent-post-info > .article-meta-wrap i {
+ margin: 0 4px 0 0;
+}
+#recent-posts .recent-post-item >.recent-post-info > .article-meta-wrap .fa-spinner {
+ margin: 0;
+}
+#recent-posts .recent-post-item >.recent-post-info > .article-meta-wrap .article-meta-label {
+ padding-right: 4px;
+}
+#recent-posts .recent-post-item >.recent-post-info > .article-meta-wrap .article-meta-separator {
+ margin: 0 6px;
+}
+#recent-posts .recent-post-item >.recent-post-info > .article-meta-wrap .article-meta-link {
+ margin: 0 4px;
+}
+#recent-posts .recent-post-item >.recent-post-info > .article-meta-wrap a {
+ color: var(--card-meta);
+}
+#recent-posts .recent-post-item >.recent-post-info > .article-meta-wrap a:hover {
+ color: #49b1f5;
+ text-decoration: underline;
+}
+#recent-posts .recent-post-item >.recent-post-info > .content {
+ -webkit-line-clamp: 2;
+}
+#article-container .shuoshuo-item {
+ margin-bottom: 20px;
+ padding: 35px 30px 30px;
+}
+@media screen and (max-width: 768px) {
+ #article-container .shuoshuo-item {
+ padding: 25px 20px 20px;
+ }
+}
+#article-container .shuoshuo-item-header {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: box;
+ display: flex;
+ -webkit-box-align: center;
+ -moz-box-align: center;
+ -o-box-align: center;
+ -ms-flex-align: center;
+ -webkit-align-items: center;
+ align-items: center;
+}
+#article-container .shuoshuo-avatar {
+ overflow: hidden;
+ width: 40px;
+ height: 40px;
+ border-radius: 40px;
+}
+#article-container .shuoshuo-avatar img {
+ margin: 0;
+ width: 100%;
+ height: 100%;
+}
+#article-container .shuoshuo-info {
+ margin-left: 10px;
+ line-height: 1.5;
+}
+#article-container .shuoshuo-date {
+ color: #858585;
+ font-size: 0.8em;
+}
+#article-container .shuoshuo-content {
+ padding: 15px 0 10px;
+}
+#article-container .shuoshuo-content > *:last-child {
+ margin-bottom: 0;
+}
+#article-container .shuoshuo-tag {
+ display: inline-block;
+ margin-right: 8px;
+ padding: 0 8px;
+ width: fit-content;
+ border: 1px solid #49b1f5;
+ border-radius: 12px;
+ color: #49b1f5;
+ font-size: 0.85em;
+ cursor: default;
+ -webkit-transition: all 0.2s ease-in-out;
+ -moz-transition: all 0.2s ease-in-out;
+ -o-transition: all 0.2s ease-in-out;
+ -ms-transition: all 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
+}
+#article-container .shuoshuo-tag:hover {
+ background: #49b1f5;
+ color: var(--white);
+}
+.tag-cloud-list a {
+ display: inline-block;
+ margin: 2px;
+ padding: 2px 7px;
+ line-height: 1.7;
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ -o-transition: all 0.3s;
+ -ms-transition: all 0.3s;
+ transition: all 0.3s;
+ border-radius: 5px;
+}
+.tag-cloud-list a:hover {
+ background: var(--btn-bg) !important;
+ -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
+ box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
+ color: var(--btn-color) !important;
+}
+@media screen and (max-width: 768px) {
+ .tag-cloud-list a {
+ zoom: 0.85;
+ }
+}
+.tag-cloud-title {
+ font-size: 2.57em;
+}
+@media screen and (max-width: 768px) {
+ .tag-cloud-title {
+ font-size: 2em;
+ }
+}
+.page-title + .tag-cloud-list {
+ text-align: left;
+}
+#aside-content {
+ width: 26%;
+}
+@media screen and (min-width: 900px) {
+ #aside-content {
+ padding-left: 15px;
+ }
+}
+@media screen and (max-width: 900px) {
+ #aside-content {
+ margin-top: 20px;
+ width: 100%;
+ }
+}
+#aside-content .card-widget {
+ position: relative;
+ overflow: hidden;
+ margin-bottom: 20px;
+ padding: 20px 24px;
+}
+#aside-content .card-widget:last-child {
+ margin-bottom: 0;
+}
+#aside-content .card-info .author-info-name {
+ font-weight: 500;
+ font-size: 1.57em;
+}
+#aside-content .card-info .author-info-description {
+ margin-top: -0.42em;
+}
+#aside-content .card-info .site-data {
+ margin: 14px 0 4px;
+}
+#aside-content .card-info .card-info-social-icons {
+ margin: 6px 0 -6px;
+}
+#aside-content .card-info .card-info-social-icons .social-icon {
+ margin: 0 10px;
+ color: var(--font-color);
+ font-size: 1.4em;
+}
+#aside-content .card-info #card-info-btn {
+ display: block;
+ margin-top: 14px;
+ background-color: var(--btn-bg);
+ color: var(--btn-color);
+ text-align: center;
+ line-height: 2.4;
+ border-radius: 7px;
+}
+#aside-content .card-info #card-info-btn:hover {
+ background-color: var(--btn-hover-color);
+}
+#aside-content .card-info #card-info-btn span {
+ padding-left: 10px;
+}
+#aside-content .item-headline {
+ padding-bottom: 6px;
+ font-size: 1.2em;
+}
+#aside-content .item-headline span {
+ margin-left: 6px;
+}
+@media screen and (min-width: 900px) {
+ #aside-content .sticky_layout {
+ position: sticky;
+ position: -webkit-sticky;
+ top: 20px;
+ -webkit-transition: top 0.3s;
+ -moz-transition: top 0.3s;
+ -o-transition: top 0.3s;
+ -ms-transition: top 0.3s;
+ transition: top 0.3s;
+ }
+}
+#aside-content .card-tag-cloud a {
+ display: inline-block;
+ padding: 0 4px;
+ line-height: 1.8;
+}
+#aside-content .card-tag-cloud a:hover {
+ color: #49b1f5 !important;
+}
+#aside-content .aside-list > span {
+ display: block;
+ margin-bottom: 10px;
+ text-align: center;
+}
+#aside-content .aside-list > .aside-list-item {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: box;
+ display: flex;
+ -webkit-box-align: center;
+ -moz-box-align: center;
+ -o-box-align: center;
+ -ms-flex-align: center;
+ -webkit-align-items: center;
+ align-items: center;
+ padding: 6px 0;
+}
+#aside-content .aside-list > .aside-list-item:first-child {
+ padding-top: 0;
+}
+#aside-content .aside-list > .aside-list-item:not(:last-child) {
+ border-bottom: 1px dashed #f5f5f5;
+}
+#aside-content .aside-list > .aside-list-item:last-child {
+ padding-bottom: 0;
+}
+#aside-content .aside-list > .aside-list-item .thumbnail {
+ overflow: hidden;
+ width: 4em;
+ height: 4em;
+ border-radius: 6px;
+}
+#aside-content .aside-list > .aside-list-item .content {
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ -o-box-flex: 1;
+ box-flex: 1;
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ padding-left: 10px;
+ word-break: break-all;
+}
+#aside-content .aside-list > .aside-list-item .content > .name {
+ -webkit-line-clamp: 1;
+}
+#aside-content .aside-list > .aside-list-item .content > time,
+#aside-content .aside-list > .aside-list-item .content > .name {
+ display: block;
+ color: var(--card-meta);
+ font-size: 0.85em;
+}
+#aside-content .aside-list > .aside-list-item .content > .title,
+#aside-content .aside-list > .aside-list-item .content > .comment {
+ color: var(--font-color);
+ line-height: 1.5;
+ -webkit-line-clamp: 2;
+}
+#aside-content .aside-list > .aside-list-item .content > .title:hover,
+#aside-content .aside-list > .aside-list-item .content > .comment:hover {
+ color: #49b1f5;
+}
+#aside-content .aside-list > .aside-list-item.no-cover {
+ min-height: 4.4em;
+}
+#aside-content .card-archives ul.card-archive-list,
+#aside-content .card-categories ul.card-category-list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a,
+#aside-content .card-categories ul.card-category-list > .card-category-list-item a {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: box;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -moz-box-orient: horizontal;
+ -o-box-orient: horizontal;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ padding: 2px 8px;
+ margin: 2px 0;
+ color: var(--font-color);
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ -o-transition: all 0.3s;
+ -ms-transition: all 0.3s;
+ transition: all 0.3s;
+ border-radius: 6px;
+}
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover,
+#aside-content .card-categories ul.card-category-list > .card-category-list-item a:hover {
+ padding: 2px 12px;
+ background-color: var(--text-bg-hover);
+ color: var(--white);
+}
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child,
+#aside-content .card-categories ul.card-category-list > .card-category-list-item a span:first-child {
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ -o-box-flex: 1;
+ box-flex: 1;
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+#aside-content .card-categories .card-category-list.child {
+ padding: 0 0 0 16px;
+}
+#aside-content .card-categories .card-category-list > .parent > a.expand i {
+ -webkit-transform: rotate(-90deg);
+ -moz-transform: rotate(-90deg);
+ -o-transform: rotate(-90deg);
+ -ms-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+}
+#aside-content .card-categories .card-category-list > .parent > a.expand + .child {
+ display: block;
+}
+#aside-content .card-categories .card-category-list > .parent > a .card-category-list-name {
+ width: 70% !important;
+}
+#aside-content .card-categories .card-category-list > .parent > a .card-category-list-count {
+ width: calc(100% - 70% - 20px);
+ text-align: right;
+}
+#aside-content .card-categories .card-category-list > .parent > a i {
+ float: right;
+ margin-right: -0.5em;
+ padding: 0.5em;
+ -webkit-transition: -webkit-transform 0.3s;
+ -moz-transition: -moz-transform 0.3s;
+ -o-transition: -o-transform 0.3s;
+ -ms-transition: -ms-transform 0.3s;
+ transition: transform 0.3s;
+ -webkit-transform: rotate(0);
+ -moz-transform: rotate(0);
+ -o-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+}
+#aside-content .card-webinfo .webinfo .webinfo-item {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: box;
+ display: flex;
+ -webkit-box-align: center;
+ -moz-box-align: center;
+ -o-box-align: center;
+ -ms-flex-align: center;
+ -webkit-align-items: center;
+ align-items: center;
+ padding: 2px 10px 0;
+}
+#aside-content .card-webinfo .webinfo .webinfo-item div:first-child {
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ -o-box-flex: 1;
+ box-flex: 1;
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ padding-right: 20px;
+}
+@media screen and (min-width: 901px) {
+ #aside-content #card-toc {
+ right: 0 !important;
+ }
+}
+@media screen and (max-width: 900px) {
+ #aside-content #card-toc {
+ position: fixed;
+ right: 55px;
+ bottom: 30px;
+ z-index: 100;
+ max-width: 380px;
+ max-height: calc(100% - 60px);
+ width: calc(100% - 80px);
+ -webkit-transition: none;
+ -moz-transition: none;
+ -o-transition: none;
+ -ms-transition: none;
+ transition: none;
+ -webkit-transform: scale(0);
+ -moz-transform: scale(0);
+ -o-transform: scale(0);
+ -ms-transform: scale(0);
+ transform: scale(0);
+ -webkit-transform-origin: right bottom;
+ -moz-transform-origin: right bottom;
+ -o-transform-origin: right bottom;
+ -ms-transform-origin: right bottom;
+ transform-origin: right bottom;
+ }
+ #aside-content #card-toc.open {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -o-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+}
+#aside-content #card-toc .toc-percentage {
+ float: right;
+ margin-top: -9px;
+ color: #a9a9a9;
+ font-style: italic;
+ font-size: 140%;
+}
+#aside-content #card-toc .toc-content {
+ overflow-y: scroll;
+ overflow-y: overlay;
+ margin: 0 -24px;
+ max-height: calc(100vh - 120px);
+ width: calc(100% + 48px);
+}
+@media screen and (max-width: 900px) {
+ #aside-content #card-toc .toc-content {
+ max-height: calc(100vh - 140px);
+ }
+}
+#aside-content #card-toc .toc-content > * {
+ margin: 0 20px !important;
+}
+#aside-content #card-toc .toc-content > * > .toc-item > .toc-child {
+ margin-left: 10px;
+ padding-left: 10px;
+ border-left: 1px solid var(--dark-grey);
+}
+#aside-content #card-toc .toc-content:not(.is-expand) .toc-child {
+ display: none;
+}
+@media screen and (max-width: 900px) {
+ #aside-content #card-toc .toc-content:not(.is-expand) .toc-child {
+ display: block !important;
+ }
+}
+#aside-content #card-toc .toc-content:not(.is-expand) .toc-item.active .toc-child {
+ display: block;
+}
+#aside-content #card-toc .toc-content ol,
+#aside-content #card-toc .toc-content li {
+ list-style: none;
+}
+#aside-content #card-toc .toc-content > ol {
+ padding: 0 !important;
+}
+#aside-content #card-toc .toc-content ol {
+ margin: 0;
+ padding-left: 18px;
+}
+#aside-content #card-toc .toc-content .toc-link {
+ display: block;
+ margin: 4px 0;
+ padding: 1px 8px;
+ color: var(--toc-link-color);
+ -webkit-transition: all 0.2s ease-in-out;
+ -moz-transition: all 0.2s ease-in-out;
+ -o-transition: all 0.2s ease-in-out;
+ -ms-transition: all 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
+ border-radius: 6px;
+}
+#aside-content #card-toc .toc-content .toc-link:hover {
+ color: #49b1f5;
+}
+#aside-content #card-toc .toc-content .toc-link.active {
+ background: #00c4b6;
+ color: #fff;
+}
+#aside-content .sticky_layout:only-child > :first-child {
+ margin-top: 0;
+}
+#aside-content .card-more-btn {
+ float: right;
+ color: inherit;
+}
+#aside-content .card-more-btn:hover {
+ -webkit-animation: more-btn-move 1s infinite;
+ -moz-animation: more-btn-move 1s infinite;
+ -o-animation: more-btn-move 1s infinite;
+ -ms-animation: more-btn-move 1s infinite;
+ animation: more-btn-move 1s infinite;
+}
+#aside-content .card-announcement .item-headline i {
+ color: #f00;
+}
+.avatar-img {
+ overflow: hidden;
+ margin: 0 auto;
+ width: 110px;
+ height: 110px;
+ border-radius: 70px;
+ -webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
+ box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
+}
+.avatar-img img {
+ width: 100%;
+ height: 100%;
+ -webkit-transition: filter 375ms ease-in 0.2s, -webkit-transform 0.3s;
+ -moz-transition: filter 375ms ease-in 0.2s, -moz-transform 0.3s;
+ -o-transition: filter 375ms ease-in 0.2s, -o-transform 0.3s;
+ -ms-transition: filter 375ms ease-in 0.2s, -ms-transform 0.3s;
+ transition: filter 375ms ease-in 0.2s, transform 0.3s;
+ object-fit: cover;
+}
+.site-data {
+ display: table;
+ width: 100%;
+ table-layout: fixed;
+}
+.site-data > a {
+ display: table-cell;
+}
+.site-data > a div {
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ -o-transition: all 0.3s;
+ -ms-transition: all 0.3s;
+ transition: all 0.3s;
+}
+.site-data > a:hover div {
+ color: #49b1f5 !important;
+}
+.site-data > a .headline {
+ color: var(--font-color);
+}
+.site-data > a .length-num {
+ margin-top: -0.32em;
+ color: var(--text-highlight-color);
+ font-size: 1.4em;
+}
+@media screen and (min-width: 900px) {
+ html.hide-aside .layout {
+ -webkit-box-pack: center;
+ -moz-box-pack: center;
+ -o-box-pack: center;
+ -ms-flex-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ }
+ html.hide-aside .layout > .aside-content {
+ display: none;
+ }
+ html.hide-aside .layout > div:first-child {
+ width: 80%;
+ }
+}
+.page .sticky_layout {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: box;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -moz-box-orient: vertical;
+ -o-box-orient: vertical;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+@-moz-keyframes more-btn-move {
+ 0%, 100% {
+ -webkit-transform: translateX(0);
+ -moz-transform: translateX(0);
+ -o-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+ 50% {
+ -webkit-transform: translateX(3px);
+ -moz-transform: translateX(3px);
+ -o-transform: translateX(3px);
+ -ms-transform: translateX(3px);
+ transform: translateX(3px);
+ }
+}
+@-webkit-keyframes more-btn-move {
+ 0%, 100% {
+ -webkit-transform: translateX(0);
+ -moz-transform: translateX(0);
+ -o-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+ 50% {
+ -webkit-transform: translateX(3px);
+ -moz-transform: translateX(3px);
+ -o-transform: translateX(3px);
+ -ms-transform: translateX(3px);
+ transform: translateX(3px);
+ }
+}
+@-o-keyframes more-btn-move {
+ 0%, 100% {
+ -webkit-transform: translateX(0);
+ -moz-transform: translateX(0);
+ -o-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+ 50% {
+ -webkit-transform: translateX(3px);
+ -moz-transform: translateX(3px);
+ -o-transform: translateX(3px);
+ -ms-transform: translateX(3px);
+ transform: translateX(3px);
+ }
+}
+@keyframes more-btn-move {
+ 0%, 100% {
+ -webkit-transform: translateX(0);
+ -moz-transform: translateX(0);
+ -o-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+ 50% {
+ -webkit-transform: translateX(3px);
+ -moz-transform: translateX(3px);
+ -o-transform: translateX(3px);
+ -ms-transform: translateX(3px);
+ transform: translateX(3px);
+ }
+}
+@-moz-keyframes toc-open {
+ 0% {
+ -webkit-transform: scale(0.7);
+ -moz-transform: scale(0.7);
+ -o-transform: scale(0.7);
+ -ms-transform: scale(0.7);
+ transform: scale(0.7);
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -o-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+}
+@-webkit-keyframes toc-open {
+ 0% {
+ -webkit-transform: scale(0.7);
+ -moz-transform: scale(0.7);
+ -o-transform: scale(0.7);
+ -ms-transform: scale(0.7);
+ transform: scale(0.7);
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -o-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+}
+@-o-keyframes toc-open {
+ 0% {
+ -webkit-transform: scale(0.7);
+ -moz-transform: scale(0.7);
+ -o-transform: scale(0.7);
+ -ms-transform: scale(0.7);
+ transform: scale(0.7);
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -o-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+}
+@keyframes toc-open {
+ 0% {
+ -webkit-transform: scale(0.7);
+ -moz-transform: scale(0.7);
+ -o-transform: scale(0.7);
+ -ms-transform: scale(0.7);
+ transform: scale(0.7);
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -o-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+}
+@-moz-keyframes toc-close {
+ 0% {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -o-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+ 100% {
+ -webkit-transform: scale(0.7);
+ -moz-transform: scale(0.7);
+ -o-transform: scale(0.7);
+ -ms-transform: scale(0.7);
+ transform: scale(0.7);
+ }
+}
+@-webkit-keyframes toc-close {
+ 0% {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -o-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+ 100% {
+ -webkit-transform: scale(0.7);
+ -moz-transform: scale(0.7);
+ -o-transform: scale(0.7);
+ -ms-transform: scale(0.7);
+ transform: scale(0.7);
+ }
+}
+@-o-keyframes toc-close {
+ 0% {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -o-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+ 100% {
+ -webkit-transform: scale(0.7);
+ -moz-transform: scale(0.7);
+ -o-transform: scale(0.7);
+ -ms-transform: scale(0.7);
+ transform: scale(0.7);
+ }
+}
+@keyframes toc-close {
+ 0% {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -o-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+ 100% {
+ -webkit-transform: scale(0.7);
+ -moz-transform: scale(0.7);
+ -o-transform: scale(0.7);
+ -ms-transform: scale(0.7);
+ transform: scale(0.7);
+ }
+}
+#post-comment .comment-head {
+ margin-bottom: 20px;
+}
+#post-comment .comment-head:after {
+ display: block;
+ clear: both;
+ content: '';
+}
+#post-comment .comment-head .comment-headline {
+ display: inline-block;
+ vertical-align: middle;
+ font-weight: 700;
+ font-size: 1.43em;
+}
+#post-comment .comment-head .comment-switch {
+ display: inline-block;
+ float: right;
+ margin: 2px auto 0;
+ padding: 4px 16px;
+ width: max-content;
+ border-radius: 8px;
+ background: #f6f8fa;
+}
+#post-comment .comment-head .comment-switch .first-comment {
+ color: #49b1f5;
+}
+#post-comment .comment-head .comment-switch .second-comment {
+ color: #ff7242;
+}
+#post-comment .comment-head .comment-switch #switch-btn {
+ position: relative;
+ display: inline-block;
+ margin: -4px 8px 0;
+ width: 42px;
+ height: 22px;
+ border-radius: 34px;
+ background-color: #49b1f5;
+ vertical-align: middle;
+ cursor: pointer;
+ -webkit-transition: 0.4s;
+ -moz-transition: 0.4s;
+ -o-transition: 0.4s;
+ -ms-transition: 0.4s;
+ transition: 0.4s;
+}
+#post-comment .comment-head .comment-switch #switch-btn:before {
+ position: absolute;
+ bottom: 4px;
+ left: 4px;
+ width: 14px;
+ height: 14px;
+ border-radius: 50%;
+ background-color: #fff;
+ content: '';
+ -webkit-transition: 0.4s;
+ -moz-transition: 0.4s;
+ -o-transition: 0.4s;
+ -ms-transition: 0.4s;
+ transition: 0.4s;
+}
+#post-comment .comment-wrap > div {
+ -webkit-animation: tabshow 0.5s;
+ -moz-animation: tabshow 0.5s;
+ -o-animation: tabshow 0.5s;
+ -ms-animation: tabshow 0.5s;
+ animation: tabshow 0.5s;
+}
+#post-comment .comment-wrap > div:nth-child(2) {
+ display: none;
+}
+#post-comment.move #switch-btn {
+ background-color: #ff7242;
+}
+#post-comment.move #switch-btn:before {
+ -webkit-transform: translateX(20px);
+ -moz-transform: translateX(20px);
+ -o-transform: translateX(20px);
+ -ms-transform: translateX(20px);
+ transform: translateX(20px);
+}
+#post-comment.move .comment-wrap > div:first-child {
+ display: none;
+}
+#post-comment.move .comment-wrap > div:last-child {
+ display: block;
+}
+#footer {
+ position: relative;
+ background-color: #49b1f5;
+ background-attachment: scroll;
+ background-position: bottom;
+ background-size: cover;
+}
+#footer-wrap {
+ position: relative;
+ padding: 40px 20px;
+ color: var(--font-color);
+ text-align: center;
+}
+#footer-wrap a {
+ color: var(--font-color);
+}
+#footer-wrap a:hover {
+ text-decoration: underline;
+}
+#footer-wrap .footer-separator {
+ margin: 0 4px;
+}
+#footer-wrap .icp-icon {
+ padding: 0 4px;
+ max-height: 1.4em;
+ width: auto;
+ vertical-align: text-bottom;
+}
+#page-header {
+ position: relative;
+ width: 100%;
+ background-color: #49b1f5;
+ background-position: center center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ -webkit-transition: all 0.5s;
+ -moz-transition: all 0.5s;
+ -o-transition: all 0.5s;
+ -ms-transition: all 0.5s;
+ transition: all 0.5s;
+}
+#page-header:not(.not-top-img):before {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: var(--mark-bg);
+ content: '';
+}
+#page-header.full_page {
+ height: 100vh;
+ background-attachment: fixed;
+}
+#page-header.full_page #site-info {
+ position: absolute;
+ top: 43%;
+ padding: 0 10px;
+ width: 100%;
+}
+#page-header #site-title,
+#page-header #site-subtitle,
+#page-header #scroll-down .scroll-down-effects {
+ text-align: center;
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.15);
+ line-height: 1.5;
+}
+#page-header #site-title {
+ margin: 0;
+ color: var(--white);
+ font-size: 1.85em;
+}
+@media screen and (min-width: 768px) {
+ #page-header #site-title {
+ font-size: 2.85em;
+ }
+}
+#page-header #site-subtitle {
+ color: var(--light-grey);
+ font-size: 1.15em;
+}
+@media screen and (min-width: 768px) {
+ #page-header #site-subtitle {
+ font-size: 1.72em;
+ }
+}
+#page-header #site_social_icons {
+ display: none;
+ margin: 0 auto;
+ text-align: center;
+}
+@media screen and (max-width: 768px) {
+ #page-header #site_social_icons {
+ display: block;
+ }
+}
+#page-header #site_social_icons .social-icon {
+ margin: 0 10px;
+ color: var(--light-grey);
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.15);
+ font-size: 1.43em;
+}
+#page-header #scroll-down {
+ position: absolute;
+ bottom: 10px;
+ width: 100%;
+ cursor: pointer;
+}
+#page-header #scroll-down .scroll-down-effects {
+ position: relative;
+ width: 100%;
+ color: var(--light-grey);
+ font-size: 20px;
+}
+#page-header.not-home-page {
+ height: 400px;
+}
+@media screen and (max-width: 768px) {
+ #page-header.not-home-page {
+ height: 280px;
+ }
+}
+#page-header #page-site-info {
+ position: absolute;
+ top: 200px;
+ padding: 0 10px;
+ width: 100%;
+}
+@media screen and (max-width: 768px) {
+ #page-header #page-site-info {
+ top: 140px;
+ }
+}
+#page-header.post-bg {
+ height: 400px;
+}
+@media screen and (max-width: 768px) {
+ #page-header.post-bg {
+ height: 360px;
+ }
+}
+#page-header #post-info {
+ position: absolute;
+ width: 100%;
+ bottom: 30px;
+}
+#page-header #post-info > * {
+ margin: 0 auto;
+ padding: 0 15px;
+ max-width: 1200px;
+}
+@media screen and (min-width: 768px) and (max-width: 1300px) {
+ #page-header #post-info > * {
+ padding: 0 30px;
+ }
+}
+@media screen and (min-width: 2000px) {
+ #page-header #post-info > * {
+ max-width: 70%;
+ }
+}
+#page-header.not-top-img {
+ margin-bottom: 10px;
+ height: 60px;
+ background: 0;
+}
+#page-header.not-top-img .title-seo {
+ display: none;
+}
+#page-header.not-top-img #nav {
+ background: rgba(255,255,255,0.8);
+ -webkit-box-shadow: 0 5px 6px -5px rgba(133,133,133,0.6);
+ box-shadow: 0 5px 6px -5px rgba(133,133,133,0.6);
+}
+#page-header.not-top-img #nav a,
+#page-header.not-top-img #nav span.site-page,
+#page-header.not-top-img #nav .site-name {
+ color: var(--font-color);
+ text-shadow: none;
+}
+#page-header.nav-fixed #nav {
+ position: fixed;
+ top: -60px;
+ z-index: 91;
+ background: rgba(255,255,255,0.8);
+ -webkit-box-shadow: 0 5px 6px -5px rgba(133,133,133,0.6);
+ box-shadow: 0 5px 6px -5px rgba(133,133,133,0.6);
+ -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+ -moz-transition: -moz-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+ -o-transition: -o-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+ -ms-transition: -ms-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+ transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+ will-change: transform;
+}
+#page-header.nav-fixed #nav #blog-info {
+ color: var(--font-color);
+}
+#page-header.nav-fixed #nav #blog-info:hover {
+ color: #49b1f5;
+}
+#page-header.nav-fixed #nav #blog-info .site-name {
+ text-shadow: none;
+}
+#page-header.nav-fixed #nav #blog-info > a:first-child {
+ display: none;
+}
+#page-header.nav-fixed #nav #blog-info > a:last-child {
+ display: inline;
+}
+#page-header.nav-fixed #nav a,
+#page-header.nav-fixed #nav span.site-page,
+#page-header.nav-fixed #nav #toggle-menu {
+ color: var(--font-color);
+ text-shadow: none;
+}
+#page-header.nav-fixed #nav a:hover,
+#page-header.nav-fixed #nav span.site-page:hover,
+#page-header.nav-fixed #nav #toggle-menu:hover {
+ color: #49b1f5;
+}
+#page-header.nav-fixed.fixed #nav {
+ top: 0;
+ -webkit-transition: all 0.5s;
+ -moz-transition: all 0.5s;
+ -o-transition: all 0.5s;
+ -ms-transition: all 0.5s;
+ transition: all 0.5s;
+}
+#page-header.nav-visible:not(.fixed) #nav {
+ -webkit-transition: all 0.5s;
+ -moz-transition: all 0.5s;
+ -o-transition: all 0.5s;
+ -ms-transition: all 0.5s;
+ transition: all 0.5s;
+ -webkit-transform: translate3d(0, 100%, 0);
+ -moz-transform: translate3d(0, 100%, 0);
+ -o-transform: translate3d(0, 100%, 0);
+ -ms-transform: translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0);
+}
+#page-header.nav-visible:not(.fixed) + .layout > .aside-content > .sticky_layout {
+ top: 70px;
+ -webkit-transition: top 0.5s;
+ -moz-transition: top 0.5s;
+ -o-transition: top 0.5s;
+ -ms-transition: top 0.5s;
+ transition: top 0.5s;
+}
+#page-header.fixed #nav {
+ position: fixed;
+}
+#page-header.fixed + .layout > .aside-content > .sticky_layout {
+ top: 70px;
+ -webkit-transition: top 0.5s;
+ -moz-transition: top 0.5s;
+ -o-transition: top 0.5s;
+ -ms-transition: top 0.5s;
+ transition: top 0.5s;
+}
+#page-header.fixed + .layout #card-toc .toc-content {
+ max-height: calc(100vh - 170px);
+}
+#page .page-title {
+ margin: 0 0 10px;
+ font-weight: bold;
+ font-size: 2em;
+}
+#post > #post-info {
+ margin-bottom: 30px;
+}
+#post > #post-info .post-title {
+ padding-bottom: 4px;
+ border-bottom: 1px solid var(--light-grey);
+ color: var(--text-highlight-color);
+}
+#post > #post-info .post-title .post-edit-link {
+ float: right;
+}
+#post > #post-info #post-meta,
+#post > #post-info #post-meta a {
+ color: #78818a;
+}
+#post-info .post-title {
+ margin-bottom: 8px;
+ color: var(--white);
+ font-weight: normal;
+ font-size: 2.5em;
+ line-height: 1.5;
+ -webkit-line-clamp: 3;
+}
+@media screen and (max-width: 768px) {
+ #post-info .post-title {
+ font-size: 2.1em;
+ }
+}
+#post-info .post-title .post-edit-link {
+ padding-left: 10px;
+}
+#post-info #post-meta {
+ color: var(--light-grey);
+ font-size: 95%;
+}
+@media screen and (min-width: 768px) {
+ #post-info #post-meta > .meta-secondline > span:first-child {
+ display: none;
+ }
+}
+@media screen and (max-width: 768px) {
+ #post-info #post-meta {
+ font-size: 90%;
+ }
+ #post-info #post-meta > .meta-firstline,
+ #post-info #post-meta > .meta-secondline {
+ display: inline;
+ }
+}
+#post-info #post-meta .post-meta-separator {
+ margin: 0 5px;
+}
+#post-info #post-meta .post-meta-icon {
+ margin-right: 4px;
+}
+#post-info #post-meta .post-meta-label {
+ margin-right: 4px;
+}
+#post-info #post-meta a {
+ color: var(--light-grey);
+ -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;
+}
+#post-info #post-meta a:hover {
+ color: #49b1f5;
+ text-decoration: underline;
+}
+#nav {
+ position: absolute;
+ top: 0;
+ z-index: 90;
+ display: -webkit-box;
+ display: -moz-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: box;
+ display: flex;
+ -webkit-box-align: center;
+ -moz-box-align: center;
+ -o-box-align: center;
+ -ms-flex-align: center;
+ -webkit-align-items: center;
+ align-items: center;
+ padding: 0 36px;
+ width: 100%;
+ height: 60px;
+ font-size: 1.3em;
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ -webkit-transition: all 0.5s;
+ -moz-transition: all 0.5s;
+ -o-transition: all 0.5s;
+ -ms-transition: all 0.5s;
+ transition: all 0.5s;
+}
+@media screen and (max-width: 768px) {
+ #nav {
+ padding: 0 16px;
+ }
+}
+#nav.show {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+}
+#nav #blog-info {
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ -o-box-flex: 1;
+ box-flex: 1;
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ color: var(--light-grey);
+}
+#nav #blog-info .site-icon {
+ margin-right: 6px;
+ height: 36px;
+ vertical-align: middle;
+}
+#nav #blog-info .nav-page-title {
+ display: none;
+}
+#nav #toggle-menu {
+ display: none;
+ padding: 2px 0 0 6px;
+ vertical-align: top;
+}
+#nav #toggle-menu:hover {
+ color: var(--white);
+}
+#nav a,
+#nav span.site-page {
+ color: var(--light-grey);
+}
+#nav a:hover,
+#nav span.site-page:hover {
+ color: var(--white);
+}
+#nav .site-name {
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.15);
+ font-weight: bold;
+}
+#nav .menus_items {
+ display: inline;
+}
+#nav .menus_items .menus_item {
+ position: relative;
+ display: inline-block;
+ padding: 0 0 0 14px;
+}
+#nav .menus_items .menus_item:hover .menus_item_child {
+ display: block;
+}
+#nav .menus_items .menus_item:hover > span > i:last-child {
+ -webkit-transform: rotate(180deg);
+ -moz-transform: rotate(180deg);
+ -o-transform: rotate(180deg);
+ -ms-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+#nav .menus_items .menus_item > span > i:last-child {
+ padding: 4px;
+ -webkit-transition: -webkit-transform 0.3s;
+ -moz-transition: -moz-transform 0.3s;
+ -o-transition: -o-transform 0.3s;
+ -ms-transition: -ms-transform 0.3s;
+ transition: transform 0.3s;
+}
+#nav .menus_items .menus_item .menus_item_child {
+ position: absolute;
+ right: 0;
+ display: none;
+ margin-top: 8px;
+ padding: 0;
+ width: max-content;
+ background-color: var(--sidebar-bg);
+ -webkit-box-shadow: 0 5px 20px -4px rgba(0,0,0,0.5);
+ box-shadow: 0 5px 20px -4px rgba(0,0,0,0.5);
+ -webkit-animation: sub_menus 0.3s 0.1s ease both;
+ -moz-animation: sub_menus 0.3s 0.1s ease both;
+ -o-animation: sub_menus 0.3s 0.1s ease both;
+ -ms-animation: sub_menus 0.3s 0.1s ease both;
+ animation: sub_menus 0.3s 0.1s ease both;
+ border-radius: 5px;
+}
+#nav .menus_items .menus_item .menus_item_child:before {
+ position: absolute;
+ top: -8px;
+ left: 0;
+ width: 100%;
+ height: 20px;
+ content: '';
+}
+#nav .menus_items .menus_item .menus_item_child li {
+ list-style: none;
+}
+#nav .menus_items .menus_item .menus_item_child li:hover {
+ background: var(--text-bg-hover);
+}
+#nav .menus_items .menus_item .menus_item_child li:first-child {
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+}
+#nav .menus_items .menus_item .menus_item_child li:last-child {
+ border-bottom-right-radius: 5px;
+ border-bottom-left-radius: 5px;
+}
+#nav .menus_items .menus_item .menus_item_child li a {
+ display: inline-block;
+ padding: 8px 16px;
+ width: 100%;
+ color: var(--font-color) !important;
+ text-shadow: none !important;
+}
+#nav.hide-menu #toggle-menu {
+ display: inline-block !important;
+}
+#nav.hide-menu #toggle-menu .site-page {
+ font-size: inherit;
+}
+#nav.hide-menu .menus_items {
+ display: none;
+}
+#nav.hide-menu #search-button span:not(.site-page) {
+ display: none;
+}
+#nav #search-button {
+ display: inline;
+ padding: 0 0 0 14px;
+}
+#nav .site-page {
+ position: relative;
+ padding-bottom: 6px;
+ text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
+ font-size: 0.78em;
+ cursor: pointer;
+}
+#nav .site-page:not(.child):after {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ z-index: -1;
+ width: 0;
+ height: 3px;
+ background-color: #80c8f8;
+ content: '';
+ -webkit-transition: all 0.3s ease-in-out;
+ -moz-transition: all 0.3s ease-in-out;
+ -o-transition: all 0.3s ease-in-out;
+ -ms-transition: all 0.3s ease-in-out;
+ transition: all 0.3s ease-in-out;
+}
+#nav .site-page:not(.child):hover:after {
+ width: 100%;
+}
+#pagination .pagination {
+ margin-top: 20px;
+ text-align: center;
+}
+#pagination .page-number.current {
+ background: #00c4b6;
+ color: var(--white);
+}
+#pagination .pagination-info {
+ position: absolute;
+ top: 50%;
+ padding: 20px 40px;
+ width: 100%;
+ -webkit-transform: translate(0, -50%);
+ -moz-transform: translate(0, -50%);
+ -o-transform: translate(0, -50%);
+ -ms-transform: translate(0, -50%);
+ transform: translate(0, -50%);
+}
+#pagination .prev_info,
+#pagination .next_info {
+ color: var(--white);
+ font-weight: 500;
+}
+#pagination .next-post .pagination-info {
+ text-align: right;
+}
+#pagination .pull-full {
+ width: 100% !important;
+}
+#pagination .prev-post .label,
+#pagination .next-post .label {
+ color: var(--light-grey);
+ text-transform: uppercase;
+ font-size: 90%;
+}
+#pagination .prev-post,
+#pagination .next-post {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ width: 50%;
+ height: 150px;
+}
+@media screen and (max-width: 768px) {
+ #pagination .prev-post,
+ #pagination .next-post {
+ width: 100%;
+ }
+}
+#pagination.pagination-post {
+ overflow: hidden;
+ margin-top: 40px;
+ width: 100%;
+ background: #000;
+ border-radius: 6px;
+}
+.layout .pagination > * {
+ display: inline-block;
+ margin: 0 6px;
+ width: 2.5em;
+ height: 2.5em;
+ line-height: 2.5em;
+}
+.layout .pagination > *:not(.space):hover {
+ background: var(--btn-hover-color);
+ color: var(--btn-color);
+}
+#archive .pagination {
+ margin-top: 30px;
+}
+#archive .pagination > *:not(.space) {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+#article-container {
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+}
+#article-container a {
+ color: #49b1f5;
+}
+#article-container a:hover {
+ text-decoration: underline;
+}
+#article-container img {
+ display: block;
+ margin: 0 auto 20px;
+ max-width: 100%;
+ -webkit-transition: filter 375ms ease-in 0.2s;
+ -moz-transition: filter 375ms ease-in 0.2s;
+ -o-transition: filter 375ms ease-in 0.2s;
+ -ms-transition: filter 375ms ease-in 0.2s;
+ transition: filter 375ms ease-in 0.2s;
+ border-radius: 6px;
+}
+#article-container p {
+ margin: 0 0 16px;
+}
+#article-container iframe {
+ margin: 0 0 20px;
+}
+#article-container kbd {
+ margin: 0 3px;
+ padding: 3px 5px;
+ border: 1px solid #b4b4b4;
+ background-color: #f8f8f8;
+ -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25), 0 2px 1px 0 rgba(255,255,255,0.6) inset;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.25), 0 2px 1px 0 rgba(255,255,255,0.6) inset;
+ color: #34495e;
+ white-space: nowrap;
+ font-weight: 600;
+ font-size: 0.9em;
+ font-family: Monaco, 'Ubuntu Mono', monospace;
+ line-height: 1em;
+ border-radius: 3px;
+}
+#article-container h1,
+#article-container h2,
+#article-container h3,
+#article-container h4,
+#article-container h5,
+#article-container h6 {
+ width: fit-content;
+}
+#article-container h1 a:not(.headerlink),
+#article-container h2 a:not(.headerlink),
+#article-container h3 a:not(.headerlink),
+#article-container h4 a:not(.headerlink),
+#article-container h5 a:not(.headerlink),
+#article-container h6 a:not(.headerlink) {
+ position: relative;
+ z-index: 10;
+}
+#article-container h1 a.headerlink,
+#article-container h2 a.headerlink,
+#article-container h3 a.headerlink,
+#article-container h4 a.headerlink,
+#article-container h5 a.headerlink,
+#article-container h6 a.headerlink {
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ height: 100%;
+}
+#article-container ol ol,
+#article-container ul ol,
+#article-container ol ul,
+#article-container ul ul {
+ padding-left: 20px;
+}
+#article-container ol li,
+#article-container ul li {
+ margin: 4px 0;
+}
+#article-container ol p,
+#article-container ul p {
+ margin: 0 0 8px;
+}
+#article-container > :last-child {
+ margin-bottom: 0 !important;
+}
+#article-container hr {
+ margin: 20px 0;
+}
+#post .tag_share:after {
+ display: block;
+ clear: both;
+ content: '';
+}
+#post .tag_share .post-meta__tag-list {
+ display: inline-block;
+}
+#post .tag_share .post-meta__tags {
+ display: inline-block;
+ margin: 8px 8px 8px 0;
+ padding: 0 12px;
+ width: fit-content;
+ border: 1px solid #49b1f5;
+ border-radius: 12px;
+ color: #49b1f5;
+ font-size: 0.85em;
+ -webkit-transition: all 0.2s ease-in-out;
+ -moz-transition: all 0.2s ease-in-out;
+ -o-transition: all 0.2s ease-in-out;
+ -ms-transition: all 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
+}
+#post .tag_share .post-meta__tags:hover {
+ background: #49b1f5;
+ color: var(--white);
+}
+#post .tag_share .post-share {
+ display: inline-block;
+ float: right;
+ margin: 8px 0 0;
+ width: fit-content;
+}
+#post .tag_share .post-share .social-share {
+ font-size: 0.85em;
+}
+#post .tag_share .post-share .social-share .social-share-icon {
+ margin: 0 4px;
+ width: 1.85em;
+ height: 1.85em;
+ font-size: 1.2em;
+ line-height: 1.85em;
+}
+#post .post-copyright {
+ position: relative;
+ margin: 40px 0 10px;
+ padding: 10px 16px;
+ border: 1px solid var(--light-grey);
+ -webkit-transition: box-shadow 0.3s ease-in-out;
+ -moz-transition: box-shadow 0.3s ease-in-out;
+ -o-transition: box-shadow 0.3s ease-in-out;
+ -ms-transition: box-shadow 0.3s ease-in-out;
+ transition: box-shadow 0.3s ease-in-out;
+ border-radius: 6px;
+}
+#post .post-copyright:before {
+ position: absolute;
+ top: 2px;
+ right: 12px;
+ color: #49b1f5;
+ content: '\f1f9';
+ font-size: 1.3em;
+}
+#post .post-copyright:hover {
+ -webkit-box-shadow: 0 0 8px 0 rgba(232,237,250,0.6), 0 2px 4px 0 rgba(232,237,250,0.5);
+ box-shadow: 0 0 8px 0 rgba(232,237,250,0.6), 0 2px 4px 0 rgba(232,237,250,0.5);
+}
+#post .post-copyright .post-copyright-meta {
+ color: #49b1f5;
+ font-weight: bold;
+}
+#post .post-copyright .post-copyright-meta i {
+ margin-right: 3px;
+}
+#post .post-copyright .post-copyright-info {
+ padding-left: 6px;
+}
+#post .post-copyright .post-copyright-info a {
+ text-decoration: underline;
+ word-break: break-word;
+}
+#post .post-copyright .post-copyright-info a:hover {
+ text-decoration: none;
+}
+#post .post-outdate-notice {
+ position: relative;
+ margin: 0 0 20px;
+ padding: 0.5em 1.2em;
+ background-color: #ffe6e6;
+ color: #f66;
+ border-radius: 3px;
+ padding: 0.5em 1em 0.5em 2.6em;
+ border-left: 5px solid #ff8080;
+}
+#post .post-outdate-notice:before {
+ position: absolute;
+ top: 50%;
+ left: 0.9em;
+ color: #ff8080;
+ content: '\f071';
+ -webkit-transform: translateY(-50%);
+ -moz-transform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+}
+#post .ads-wrap {
+ margin: 40px 0;
+}
+.relatedPosts {
+ margin-top: 40px;
+}
+.relatedPosts > .headline {
+ margin-bottom: 5px;
+ font-weight: 700;
+ font-size: 1.43em;
+}
+.relatedPosts > .relatedPosts-list > a {
+ position: relative;
+ display: inline-block;
+ overflow: hidden;
+ margin: 3px;
+ width: calc(33.333% - 6px);
+ height: 200px;
+ background: #000;
+ vertical-align: bottom;
+ border-radius: 6px;
+}
+@media screen and (max-width: 768px) {
+ .relatedPosts > .relatedPosts-list > a {
+ margin: 2px;
+ width: calc(50% - 4px);
+ height: 150px;
+ }
+}
+@media screen and (max-width: 600px) {
+ .relatedPosts > .relatedPosts-list > a {
+ width: calc(100% - 4px);
+ }
+}
+.relatedPosts > .relatedPosts-list .content {
+ padding: 0 20px;
+}
+.relatedPosts > .relatedPosts-list .content .date {
+ color: var(--light-grey);
+ font-size: 90%;
+}
+.relatedPosts > .relatedPosts-list .content .title {
+ color: var(--white);
+ -webkit-line-clamp: 2;
+}
+.post-reward {
+ position: relative;
+ margin-top: 80px;
+ width: 100%;
+ text-align: center;
+ pointer-events: none;
+}
+.post-reward > * {
+ pointer-events: auto;
+}
+.post-reward .reward-button {
+ display: inline-block;
+ padding: 4px 24px;
+ background: var(--btn-bg);
+ color: var(--btn-color);
+ cursor: pointer;
+ border-radius: 6px;
+}
+.post-reward .reward-button i {
+ margin-right: 5px;
+}
+.post-reward:hover .reward-button {
+ background: var(--btn-hover-color);
+}
+.post-reward:hover > .reward-main {
+ display: block;
+}
+.post-reward .reward-main {
+ position: absolute;
+ bottom: 40px;
+ left: 0;
+ z-index: 100;
+ display: none;
+ padding: 0 0 15px;
+ width: 100%;
+ border-radius: 6px;
+}
+.post-reward .reward-main .reward-all {
+ display: inline-block;
+ margin: 0;
+ padding: 20px 10px;
+ background: var(--reward-pop);
+}
+.post-reward .reward-main .reward-all:before {
+ position: absolute;
+ bottom: -10px;
+ left: 0;
+ width: 100%;
+ height: 20px;
+ content: '';
+}
+.post-reward .reward-main .reward-all:after {
+ position: absolute;
+ right: 0;
+ bottom: 2px;
+ left: 0;
+ margin: 0 auto;
+ width: 0;
+ height: 0;
+ border-top: 13px solid var(--reward-pop);
+ border-right: 13px solid transparent;
+ border-left: 13px solid transparent;
+ content: '';
+}
+.post-reward .reward-main .reward-all .reward-item {
+ display: inline-block;
+ padding: 0 8px;
+ list-style-type: none;
+ vertical-align: top;
+}
+.post-reward .reward-main .reward-all .reward-item img {
+ width: 130px;
+ height: 130px;
+}
+.post-reward .reward-main .reward-all .reward-item .post-qr-code-desc {
+ width: 130px;
+ color: #858585;
+}
+#rightside {
+ position: fixed;
+ right: -48px;
+ bottom: 40px;
+ z-index: 100;
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ -webkit-transition: all 0.5s;
+ -moz-transition: all 0.5s;
+ -o-transition: all 0.5s;
+ -ms-transition: all 0.5s;
+ transition: all 0.5s;
+}
+#rightside.rightside-show {
+ opacity: 0.8;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+ filter: alpha(opacity=80);
+ -webkit-transform: translate(-58px, 0);
+ -moz-transform: translate(-58px, 0);
+ -o-transform: translate(-58px, 0);
+ -ms-transform: translate(-58px, 0);
+ transform: translate(-58px, 0);
+}
+#rightside #rightside-config-hide {
+ height: 0;
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ -webkit-transition: -webkit-transform 0.4s;
+ -moz-transition: -moz-transform 0.4s;
+ -o-transition: -o-transform 0.4s;
+ -ms-transition: -ms-transform 0.4s;
+ transition: transform 0.4s;
+ -webkit-transform: translate(45px, 0);
+ -moz-transform: translate(45px, 0);
+ -o-transform: translate(45px, 0);
+ -ms-transform: translate(45px, 0);
+ transform: translate(45px, 0);
+}
+#rightside #rightside-config-hide.show {
+ height: auto;
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ -webkit-transform: translate(0, 0);
+ -moz-transform: translate(0, 0);
+ -o-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ transform: translate(0, 0);
+}
+#rightside #rightside-config-hide.status {
+ height: auto;
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+}
+#rightside > div > button,
+#rightside > div > a {
+ display: block;
+ margin-bottom: 5px;
+ width: 35px;
+ height: 35px;
+ background-color: var(--btn-bg);
+ color: var(--btn-color);
+ text-align: center;
+ font-size: 16px;
+ line-height: 35px;
+ border-radius: 5px;
+}
+#rightside > div > button:hover,
+#rightside > div > a:hover {
+ background-color: var(--btn-hover-color);
+}
+#rightside #mobile-toc-button {
+ display: none;
+}
+@media screen and (max-width: 900px) {
+ #rightside #mobile-toc-button {
+ display: block;
+ }
+}
+@media screen and (max-width: 900px) {
+ #rightside #hide-aside-btn {
+ display: none;
+ }
+}
+#sidebar #menu-mask {
+ position: fixed;
+ z-index: 102;
+ display: none;
+ width: 100%;
+ height: 100%;
+ background: rgba(0,0,0,0.8);
+}
+#sidebar #sidebar-menus {
+ position: fixed;
+ top: 0;
+ right: -330px;
+ z-index: 103;
+ overflow-x: hidden;
+ overflow-y: scroll;
+ padding-left: 5px;
+ width: 330px;
+ height: 100%;
+ background: var(--sidebar-bg);
+ -webkit-transition: all 0.5s;
+ -moz-transition: all 0.5s;
+ -o-transition: all 0.5s;
+ -ms-transition: all 0.5s;
+ transition: all 0.5s;
+}
+#sidebar #sidebar-menus.open {
+ -webkit-transform: translate3d(-100%, 0, 0);
+ -moz-transform: translate3d(-100%, 0, 0);
+ -o-transform: translate3d(-100%, 0, 0);
+ -ms-transform: translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0);
+}
+#sidebar #sidebar-menus > .avatar-img {
+ margin: 20px auto;
+}
+#sidebar #sidebar-menus .site-data {
+ padding: 0 10px;
+}
+#sidebar #sidebar-menus hr {
+ margin: 20px auto;
+}
+#sidebar #sidebar-menus .menus_items {
+ margin: 20px;
+ padding: 15px;
+ background: var(--sidebar-menu-bg);
+ -webkit-box-shadow: 0 0 1px 1px rgba(7,17,27,0.05);
+ box-shadow: 0 0 1px 1px rgba(7,17,27,0.05);
+ border-radius: 10px;
+}
+#sidebar #sidebar-menus .menus_items .site-page {
+ position: relative;
+ display: block;
+ margin: 4px 0;
+ padding: 2px 23px 2px 15px;
+ color: var(--font-color);
+ font-size: 1.15em;
+ cursor: pointer;
+ border-radius: 6px;
+}
+#sidebar #sidebar-menus .menus_items .site-page:hover {
+ background: var(--text-bg-hover);
+ color: var(--white);
+}
+#sidebar #sidebar-menus .menus_items .site-page i:first-child {
+ width: 15%;
+ text-align: left;
+}
+#sidebar #sidebar-menus .menus_items .site-page.group > i:last-child {
+ position: absolute;
+ top: 0.6em;
+ right: 10px;
+ -webkit-transition: -webkit-transform 0.3s;
+ -moz-transition: -moz-transform 0.3s;
+ -o-transition: -o-transform 0.3s;
+ -ms-transition: -ms-transform 0.3s;
+ transition: transform 0.3s;
+}
+#sidebar #sidebar-menus .menus_items .site-page.group.hide > i:last-child {
+ -webkit-transform: rotate(90deg);
+ -moz-transform: rotate(90deg);
+ -o-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ transform: rotate(90deg);
+}
+#sidebar #sidebar-menus .menus_items .site-page.group.hide + .menus_item_child {
+ display: none;
+}
+#sidebar #sidebar-menus .menus_items .menus_item_child {
+ margin: 0;
+ padding-left: 25px;
+ list-style: none;
+}
+#vcomment {
+ font-size: 1.1em;
+}
+#vcomment .vbtn {
+ border: none;
+ background: var(--btn-bg);
+ color: var(--btn-color);
+}
+#vcomment .vbtn:hover {
+ background: var(--btn-hover-color);
+}
+#vcomment .vimg {
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ -o-transition: all 0.3s;
+ -ms-transition: all 0.3s;
+ transition: all 0.3s;
+}
+#vcomment .vimg:hover {
+ -webkit-transform: rotate(360deg);
+ -moz-transform: rotate(360deg);
+ -o-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ transform: rotate(360deg);
+}
+#vcomment .vcards .vcard .vcontent.expand:before,
+#vcomment .vcards .vcard .vcontent.expand:after {
+ z-index: 22;
+}
+#waline-wrap {
+ --waline-font-size: 1.1em;
+ --waline-theme-color: #49b1f5;
+ --waline-active-color: #ff7242;
+}
+#waline-wrap .wl-comment-actions > button:not(last-child) {
+ padding-right: 4px;
+}
+.twikoo .tk-content p {
+ margin: 3px 0;
+}
+.fireworks {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 9999;
+ pointer-events: none;
+}
+.medium-zoom-image--opened {
+ z-index: 99999 !important;
+ margin: 0 !important;
+}
+.medium-zoom-overlay {
+ z-index: 99999 !important;
+}
+.mermaid-wrap {
+ margin: 0 0 20px;
+ text-align: center;
+}
+.mermaid-wrap > svg {
+ height: 100%;
+}
+pre > code.mermaid {
+ display: none;
+}
+.utterances,
+.fb-comments iframe {
+ width: 100% !important;
+}
+#gitalk-container .gt-meta {
+ margin: 0 0 0.8em;
+ padding: 6px 0 16px;
+}
+.katex-display {
+ overflow: auto hidden;
+ padding: 5px;
+}
+.katex-display .katex-show {
+ display: block;
+}
+.katex {
+ display: none;
+}
+.katex.katex-show {
+ display: inline;
+}
+mjx-container {
+ overflow-x: auto;
+ overflow-y: hidden;
+ padding-bottom: 4px;
+ max-width: 100%;
+}
+mjx-container[display] {
+ display: block !important;
+ min-width: auto !important;
+}
+mjx-container:not([display]) {
+ display: inline-grid !important;
+}
+mjx-assistive-mml {
+ right: 0;
+ bottom: 0;
+}
+.aplayer {
+ color: #4c4948;
+}
+#article-container .aplayer {
+ margin: 0 0 20px;
+}
+.snackbar-container.snackbar-css {
+ border-radius: 5px;
+ opacity: 0.85 !important;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)" !important;
+ filter: alpha(opacity=85) !important;
+}
+.abc-music-sheet {
+ margin: 0 0 20px;
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ -webkit-transition: opacity 0.3s;
+ -moz-transition: opacity 0.3s;
+ -o-transition: opacity 0.3s;
+ -ms-transition: opacity 0.3s;
+ transition: opacity 0.3s;
+}
+.abc-music-sheet.abcjs-container {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+}
+@media screen and (max-width: 768px) {
+ .fancybox__toolbar__column.is-middle {
+ display: none;
+ }
+}
+#article-container .btn-center {
+ margin: 0 0 20px;
+ text-align: center;
+}
+#article-container .btn-beautify {
+ display: inline-block;
+ margin: 0 4px 6px;
+ padding: 0 15px;
+ background-color: var(--btn-beautify-color, #777);
+ color: #fff;
+ line-height: 2;
+ border-radius: 6px;
+}
+#article-container .btn-beautify.blue {
+ --btn-beautify-color: #428bca;
+}
+#article-container .btn-beautify.pink {
+ --btn-beautify-color: #ff69b4;
+}
+#article-container .btn-beautify.red {
+ --btn-beautify-color: #f00;
+}
+#article-container .btn-beautify.purple {
+ --btn-beautify-color: #6f42c1;
+}
+#article-container .btn-beautify.orange {
+ --btn-beautify-color: #ff8c00;
+}
+#article-container .btn-beautify.green {
+ --btn-beautify-color: #5cb85c;
+}
+#article-container .btn-beautify:hover {
+ background-color: var(--btn-hover-color);
+}
+#article-container .btn-beautify i + span {
+ margin-left: 6px;
+}
+#article-container .btn-beautify:not(.block) + .btn-beautify:not(.block) {
+ margin: 0 4px 20px;
+}
+#article-container .btn-beautify.block {
+ display: block;
+ margin: 0 0 20px;
+ width: fit-content;
+ width: -moz-fit-content;
+}
+#article-container .btn-beautify.block.center {
+ margin: 0 auto 20px;
+}
+#article-container .btn-beautify.block.right {
+ margin: 0 0 20px auto;
+}
+#article-container .btn-beautify.larger {
+ padding: 6px 15px;
+}
+#article-container .btn-beautify:hover {
+ text-decoration: none;
+}
+#article-container .btn-beautify.outline {
+ border: 1px solid transparent;
+ border-color: var(--btn-beautify-color, #777);
+ background-color: transparent;
+ color: var(--btn-beautify-color, #777);
+}
+#article-container .btn-beautify.outline:hover {
+ background-color: var(--btn-beautify-color, #777);
+}
+#article-container .btn-beautify.outline:hover {
+ color: #fff !important;
+}
+#article-container figure.gallery-group {
+ position: relative;
+ float: left;
+ overflow: hidden;
+ margin: 6px 4px;
+ width: calc(50% - 8px);
+ height: 250px;
+ border-radius: 10px;
+ background: #000;
+ -webkit-transform: translate3d(0, 0, 0);
+}
+@media screen and (max-width: 600px) {
+ #article-container figure.gallery-group {
+ width: calc(100% - 8px);
+ }
+}
+@media screen and (min-width: 1024px) {
+ #article-container figure.gallery-group {
+ width: calc(100% / 3 - 8px);
+ }
+}
+#article-container figure.gallery-group:hover img {
+ opacity: 0.4;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
+ filter: alpha(opacity=40);
+ -webkit-transform: translate3d(0, 0, 0);
+ -moz-transform: translate3d(0, 0, 0);
+ -o-transform: translate3d(0, 0, 0);
+ -ms-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+}
+#article-container figure.gallery-group:hover .gallery-group-name::after {
+ -webkit-transform: translate3d(0, 0, 0);
+ -moz-transform: translate3d(0, 0, 0);
+ -o-transform: translate3d(0, 0, 0);
+ -ms-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+}
+#article-container figure.gallery-group:hover p {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ -webkit-transform: translate3d(0, 0, 0);
+ -moz-transform: translate3d(0, 0, 0);
+ -o-transform: translate3d(0, 0, 0);
+ -ms-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+}
+#article-container figure.gallery-group img {
+ position: relative;
+ margin: 0;
+ max-width: none;
+ width: calc(100% + 20px);
+ height: 250px;
+ -webkit-backface-visibility: hidden;
+ -moz-backface-visibility: hidden;
+ -ms-backface-visibility: hidden;
+ backface-visibility: hidden;
+ opacity: 0.8;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+ filter: alpha(opacity=80);
+ -webkit-transition: all 0.3s, filter 375ms ease-in 0.2s;
+ -moz-transition: all 0.3s, filter 375ms ease-in 0.2s;
+ -o-transition: all 0.3s, filter 375ms ease-in 0.2s;
+ -ms-transition: all 0.3s, filter 375ms ease-in 0.2s;
+ transition: all 0.3s, filter 375ms ease-in 0.2s;
+ -webkit-transform: translate3d(-10px, 0, 0);
+ -moz-transform: translate3d(-10px, 0, 0);
+ -o-transform: translate3d(-10px, 0, 0);
+ -ms-transform: translate3d(-10px, 0, 0);
+ transform: translate3d(-10px, 0, 0);
+ object-fit: cover;
+}
+#article-container figure.gallery-group figcaption {
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding: 30px;
+ width: 100%;
+ height: 100%;
+ color: #fff;
+ text-transform: uppercase;
+ -webkit-backface-visibility: hidden;
+ -moz-backface-visibility: hidden;
+ -ms-backface-visibility: hidden;
+ backface-visibility: hidden;
+}
+#article-container figure.gallery-group figcaption > a {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 1000;
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+}
+#article-container figure.gallery-group p {
+ margin: 0;
+ padding: 8px 0 0;
+ letter-spacing: 1px;
+ font-size: 1.1em;
+ line-height: 1.5;
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+ -moz-transition: opacity 0.35s, -moz-transform 0.35s;
+ -o-transition: opacity 0.35s, -o-transform 0.35s;
+ -ms-transition: opacity 0.35s, -ms-transform 0.35s;
+ transition: opacity 0.35s, transform 0.35s;
+ -webkit-transform: translate3d(100%, 0, 0);
+ -moz-transform: translate3d(100%, 0, 0);
+ -o-transform: translate3d(100%, 0, 0);
+ -ms-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ -webkit-line-clamp: 4;
+}
+#article-container figure.gallery-group .gallery-group-name {
+ position: relative;
+ margin: 0;
+ padding: 8px 0;
+ font-weight: bold;
+ font-size: 1.65em;
+ line-height: 1.5;
+ -webkit-line-clamp: 2;
+}
+#article-container figure.gallery-group .gallery-group-name:after {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 2px;
+ background: #fff;
+ content: '';
+ -webkit-transition: -webkit-transform 0.35s;
+ -moz-transition: -moz-transform 0.35s;
+ -o-transition: -o-transform 0.35s;
+ -ms-transition: -ms-transform 0.35s;
+ transition: transform 0.35s;
+ -webkit-transform: translate3d(-100%, 0, 0);
+ -moz-transform: translate3d(-100%, 0, 0);
+ -o-transform: translate3d(-100%, 0, 0);
+ -ms-transform: translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0);
+}
+#article-container .gallery-group-main {
+ overflow: auto;
+ padding: 0 0 16px;
+}
+#article-container .gallery-container {
+ margin: 0 0 20px;
+ text-align: center;
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+}
+#article-container .gallery-container.loaded {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+}
+#article-container .gallery-container img {
+ display: initial;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+}
+#article-container .gallery-container .gallery-data {
+ display: none;
+}
+#article-container .gallery-container button {
+ margin-top: 25px;
+ padding: 8px 14px;
+ background: var(--btn-bg);
+ color: var(--btn-color);
+ font-weight: bold;
+ font-size: 1.1em;
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ -o-transition: all 0.3s;
+ -ms-transition: all 0.3s;
+ transition: all 0.3s;
+ border-radius: 5px;
+}
+#article-container .gallery-container button:hover {
+ background: var(--btn-hover-color);
+}
+#article-container .gallery-container button:hover i {
+ margin-left: 8px;
+}
+#article-container .gallery-container button i {
+ margin-left: 4px;
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ -o-transition: all 0.3s;
+ -ms-transition: all 0.3s;
+ transition: all 0.3s;
+}
+#article-container .loading-container {
+ display: inline-block;
+ overflow: hidden;
+ width: 154px;
+ height: 154px;
+}
+#article-container .loading-container .loading-item {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ -webkit-backface-visibility: hidden;
+ -moz-backface-visibility: hidden;
+ -ms-backface-visibility: hidden;
+ backface-visibility: hidden;
+ -webkit-transform: translateZ(0) scale(1);
+ -moz-transform: translateZ(0) scale(1);
+ -o-transform: translateZ(0) scale(1);
+ -ms-transform: translateZ(0) scale(1);
+ transform: translateZ(0) scale(1);
+ -webkit-transform-origin: 0 0;
+ -moz-transform-origin: 0 0;
+ -o-transform-origin: 0 0;
+ -ms-transform-origin: 0 0;
+ transform-origin: 0 0;
+}
+#article-container .loading-container .loading-item div {
+ position: absolute;
+ width: 30.8px;
+ height: 30.8px;
+ border-radius: 50%;
+ background: #e15b64;
+ -webkit-transform: translate(61.6px, 61.6px) scale(1);
+ -moz-transform: translate(61.6px, 61.6px) scale(1);
+ -o-transform: translate(61.6px, 61.6px) scale(1);
+ -ms-transform: translate(61.6px, 61.6px) scale(1);
+ transform: translate(61.6px, 61.6px) scale(1);
+ -webkit-animation: loading-ball 1.92s infinite cubic-bezier(0, 0.5, 0.5, 1);
+ -moz-animation: loading-ball 1.92s infinite cubic-bezier(0, 0.5, 0.5, 1);
+ -o-animation: loading-ball 1.92s infinite cubic-bezier(0, 0.5, 0.5, 1);
+ -ms-animation: loading-ball 1.92s infinite cubic-bezier(0, 0.5, 0.5, 1);
+ animation: loading-ball 1.92s infinite cubic-bezier(0, 0.5, 0.5, 1);
+}
+#article-container .loading-container .loading-item div:nth-child(1) {
+ background: #f47e60;
+ -webkit-transform: translate(113.96px, 61.6px) scale(1);
+ -moz-transform: translate(113.96px, 61.6px) scale(1);
+ -o-transform: translate(113.96px, 61.6px) scale(1);
+ -ms-transform: translate(113.96px, 61.6px) scale(1);
+ transform: translate(113.96px, 61.6px) scale(1);
+ -webkit-animation: loading-ball-r 0.48s infinite cubic-bezier(0, 0.5, 0.5, 1), loading-ball-c 1.92s infinite step-start;
+ -moz-animation: loading-ball-r 0.48s infinite cubic-bezier(0, 0.5, 0.5, 1), loading-ball-c 1.92s infinite step-start;
+ -o-animation: loading-ball-r 0.48s infinite cubic-bezier(0, 0.5, 0.5, 1), loading-ball-c 1.92s infinite step-start;
+ -ms-animation: loading-ball-r 0.48s infinite cubic-bezier(0, 0.5, 0.5, 1), loading-ball-c 1.92s infinite step-start;
+ animation: loading-ball-r 0.48s infinite cubic-bezier(0, 0.5, 0.5, 1), loading-ball-c 1.92s infinite step-start;
+}
+#article-container .loading-container .loading-item div:nth-child(2) {
+ background: #e15b64;
+ -webkit-animation-delay: -0.48s;
+ -moz-animation-delay: -0.48s;
+ -o-animation-delay: -0.48s;
+ -ms-animation-delay: -0.48s;
+ animation-delay: -0.48s;
+}
+#article-container .loading-container .loading-item div:nth-child(3) {
+ background: #f47e60;
+ -webkit-animation-delay: -0.96s;
+ -moz-animation-delay: -0.96s;
+ -o-animation-delay: -0.96s;
+ -ms-animation-delay: -0.96s;
+ animation-delay: -0.96s;
+}
+#article-container .loading-container .loading-item div:nth-child(4) {
+ background: #f8b26a;
+ -webkit-animation-delay: -1.44s;
+ -moz-animation-delay: -1.44s;
+ -o-animation-delay: -1.44s;
+ -ms-animation-delay: -1.44s;
+ animation-delay: -1.44s;
+}
+#article-container .loading-container .loading-item div:nth-child(5) {
+ background: #abbd81;
+ -webkit-animation-delay: -1.92s;
+ -moz-animation-delay: -1.92s;
+ -o-animation-delay: -1.92s;
+ -ms-animation-delay: -1.92s;
+ animation-delay: -1.92s;
+}
+@-moz-keyframes loading-ball {
+ 0% {
+ -webkit-transform: translate(9.24px, 61.6px) scale(0);
+ -moz-transform: translate(9.24px, 61.6px) scale(0);
+ -o-transform: translate(9.24px, 61.6px) scale(0);
+ -ms-transform: translate(9.24px, 61.6px) scale(0);
+ transform: translate(9.24px, 61.6px) scale(0);
+ }
+ 25% {
+ -webkit-transform: translate(9.24px, 61.6px) scale(0);
+ -moz-transform: translate(9.24px, 61.6px) scale(0);
+ -o-transform: translate(9.24px, 61.6px) scale(0);
+ -ms-transform: translate(9.24px, 61.6px) scale(0);
+ transform: translate(9.24px, 61.6px) scale(0);
+ }
+ 50% {
+ -webkit-transform: translate(9.24px, 61.6px) scale(1);
+ -moz-transform: translate(9.24px, 61.6px) scale(1);
+ -o-transform: translate(9.24px, 61.6px) scale(1);
+ -ms-transform: translate(9.24px, 61.6px) scale(1);
+ transform: translate(9.24px, 61.6px) scale(1);
+ }
+ 75% {
+ -webkit-transform: translate(61.6px, 61.6px) scale(1);
+ -moz-transform: translate(61.6px, 61.6px) scale(1);
+ -o-transform: translate(61.6px, 61.6px) scale(1);
+ -ms-transform: translate(61.6px, 61.6px) scale(1);
+ transform: translate(61.6px, 61.6px) scale(1);
+ }
+ 100% {
+ -webkit-transform: translate(113.96px, 61.6px) scale(1);
+ -moz-transform: translate(113.96px, 61.6px) scale(1);
+ -o-transform: translate(113.96px, 61.6px) scale(1);
+ -ms-transform: translate(113.96px, 61.6px) scale(1);
+ transform: translate(113.96px, 61.6px) scale(1);
+ }
+}
+@-webkit-keyframes loading-ball {
+ 0% {
+ -webkit-transform: translate(9.24px, 61.6px) scale(0);
+ -moz-transform: translate(9.24px, 61.6px) scale(0);
+ -o-transform: translate(9.24px, 61.6px) scale(0);
+ -ms-transform: translate(9.24px, 61.6px) scale(0);
+ transform: translate(9.24px, 61.6px) scale(0);
+ }
+ 25% {
+ -webkit-transform: translate(9.24px, 61.6px) scale(0);
+ -moz-transform: translate(9.24px, 61.6px) scale(0);
+ -o-transform: translate(9.24px, 61.6px) scale(0);
+ -ms-transform: translate(9.24px, 61.6px) scale(0);
+ transform: translate(9.24px, 61.6px) scale(0);
+ }
+ 50% {
+ -webkit-transform: translate(9.24px, 61.6px) scale(1);
+ -moz-transform: translate(9.24px, 61.6px) scale(1);
+ -o-transform: translate(9.24px, 61.6px) scale(1);
+ -ms-transform: translate(9.24px, 61.6px) scale(1);
+ transform: translate(9.24px, 61.6px) scale(1);
+ }
+ 75% {
+ -webkit-transform: translate(61.6px, 61.6px) scale(1);
+ -moz-transform: translate(61.6px, 61.6px) scale(1);
+ -o-transform: translate(61.6px, 61.6px) scale(1);
+ -ms-transform: translate(61.6px, 61.6px) scale(1);
+ transform: translate(61.6px, 61.6px) scale(1);
+ }
+ 100% {
+ -webkit-transform: translate(113.96px, 61.6px) scale(1);
+ -moz-transform: translate(113.96px, 61.6px) scale(1);
+ -o-transform: translate(113.96px, 61.6px) scale(1);
+ -ms-transform: translate(113.96px, 61.6px) scale(1);
+ transform: translate(113.96px, 61.6px) scale(1);
+ }
+}
+@-o-keyframes loading-ball {
+ 0% {
+ -webkit-transform: translate(9.24px, 61.6px) scale(0);
+ -moz-transform: translate(9.24px, 61.6px) scale(0);
+ -o-transform: translate(9.24px, 61.6px) scale(0);
+ -ms-transform: translate(9.24px, 61.6px) scale(0);
+ transform: translate(9.24px, 61.6px) scale(0);
+ }
+ 25% {
+ -webkit-transform: translate(9.24px, 61.6px) scale(0);
+ -moz-transform: translate(9.24px, 61.6px) scale(0);
+ -o-transform: translate(9.24px, 61.6px) scale(0);
+ -ms-transform: translate(9.24px, 61.6px) scale(0);
+ transform: translate(9.24px, 61.6px) scale(0);
+ }
+ 50% {
+ -webkit-transform: translate(9.24px, 61.6px) scale(1);
+ -moz-transform: translate(9.24px, 61.6px) scale(1);
+ -o-transform: translate(9.24px, 61.6px) scale(1);
+ -ms-transform: translate(9.24px, 61.6px) scale(1);
+ transform: translate(9.24px, 61.6px) scale(1);
+ }
+ 75% {
+ -webkit-transform: translate(61.6px, 61.6px) scale(1);
+ -moz-transform: translate(61.6px, 61.6px) scale(1);
+ -o-transform: translate(61.6px, 61.6px) scale(1);
+ -ms-transform: translate(61.6px, 61.6px) scale(1);
+ transform: translate(61.6px, 61.6px) scale(1);
+ }
+ 100% {
+ -webkit-transform: translate(113.96px, 61.6px) scale(1);
+ -moz-transform: translate(113.96px, 61.6px) scale(1);
+ -o-transform: translate(113.96px, 61.6px) scale(1);
+ -ms-transform: translate(113.96px, 61.6px) scale(1);
+ transform: translate(113.96px, 61.6px) scale(1);
+ }
+}
+@keyframes loading-ball {
+ 0% {
+ -webkit-transform: translate(9.24px, 61.6px) scale(0);
+ -moz-transform: translate(9.24px, 61.6px) scale(0);
+ -o-transform: translate(9.24px, 61.6px) scale(0);
+ -ms-transform: translate(9.24px, 61.6px) scale(0);
+ transform: translate(9.24px, 61.6px) scale(0);
+ }
+ 25% {
+ -webkit-transform: translate(9.24px, 61.6px) scale(0);
+ -moz-transform: translate(9.24px, 61.6px) scale(0);
+ -o-transform: translate(9.24px, 61.6px) scale(0);
+ -ms-transform: translate(9.24px, 61.6px) scale(0);
+ transform: translate(9.24px, 61.6px) scale(0);
+ }
+ 50% {
+ -webkit-transform: translate(9.24px, 61.6px) scale(1);
+ -moz-transform: translate(9.24px, 61.6px) scale(1);
+ -o-transform: translate(9.24px, 61.6px) scale(1);
+ -ms-transform: translate(9.24px, 61.6px) scale(1);
+ transform: translate(9.24px, 61.6px) scale(1);
+ }
+ 75% {
+ -webkit-transform: translate(61.6px, 61.6px) scale(1);
+ -moz-transform: translate(61.6px, 61.6px) scale(1);
+ -o-transform: translate(61.6px, 61.6px) scale(1);
+ -ms-transform: translate(61.6px, 61.6px) scale(1);
+ transform: translate(61.6px, 61.6px) scale(1);
+ }
+ 100% {
+ -webkit-transform: translate(113.96px, 61.6px) scale(1);
+ -moz-transform: translate(113.96px, 61.6px) scale(1);
+ -o-transform: translate(113.96px, 61.6px) scale(1);
+ -ms-transform: translate(113.96px, 61.6px) scale(1);
+ transform: translate(113.96px, 61.6px) scale(1);
+ }
+}
+@-moz-keyframes loading-ball-r {
+ 0% {
+ -webkit-transform: translate(113.96px, 61.6px) scale(1);
+ -moz-transform: translate(113.96px, 61.6px) scale(1);
+ -o-transform: translate(113.96px, 61.6px) scale(1);
+ -ms-transform: translate(113.96px, 61.6px) scale(1);
+ transform: translate(113.96px, 61.6px) scale(1);
+ }
+ 100% {
+ -webkit-transform: translate(113.96px, 61.6px) scale(0);
+ -moz-transform: translate(113.96px, 61.6px) scale(0);
+ -o-transform: translate(113.96px, 61.6px) scale(0);
+ -ms-transform: translate(113.96px, 61.6px) scale(0);
+ transform: translate(113.96px, 61.6px) scale(0);
+ }
+}
+@-webkit-keyframes loading-ball-r {
+ 0% {
+ -webkit-transform: translate(113.96px, 61.6px) scale(1);
+ -moz-transform: translate(113.96px, 61.6px) scale(1);
+ -o-transform: translate(113.96px, 61.6px) scale(1);
+ -ms-transform: translate(113.96px, 61.6px) scale(1);
+ transform: translate(113.96px, 61.6px) scale(1);
+ }
+ 100% {
+ -webkit-transform: translate(113.96px, 61.6px) scale(0);
+ -moz-transform: translate(113.96px, 61.6px) scale(0);
+ -o-transform: translate(113.96px, 61.6px) scale(0);
+ -ms-transform: translate(113.96px, 61.6px) scale(0);
+ transform: translate(113.96px, 61.6px) scale(0);
+ }
+}
+@-o-keyframes loading-ball-r {
+ 0% {
+ -webkit-transform: translate(113.96px, 61.6px) scale(1);
+ -moz-transform: translate(113.96px, 61.6px) scale(1);
+ -o-transform: translate(113.96px, 61.6px) scale(1);
+ -ms-transform: translate(113.96px, 61.6px) scale(1);
+ transform: translate(113.96px, 61.6px) scale(1);
+ }
+ 100% {
+ -webkit-transform: translate(113.96px, 61.6px) scale(0);
+ -moz-transform: translate(113.96px, 61.6px) scale(0);
+ -o-transform: translate(113.96px, 61.6px) scale(0);
+ -ms-transform: translate(113.96px, 61.6px) scale(0);
+ transform: translate(113.96px, 61.6px) scale(0);
+ }
+}
+@keyframes loading-ball-r {
+ 0% {
+ -webkit-transform: translate(113.96px, 61.6px) scale(1);
+ -moz-transform: translate(113.96px, 61.6px) scale(1);
+ -o-transform: translate(113.96px, 61.6px) scale(1);
+ -ms-transform: translate(113.96px, 61.6px) scale(1);
+ transform: translate(113.96px, 61.6px) scale(1);
+ }
+ 100% {
+ -webkit-transform: translate(113.96px, 61.6px) scale(0);
+ -moz-transform: translate(113.96px, 61.6px) scale(0);
+ -o-transform: translate(113.96px, 61.6px) scale(0);
+ -ms-transform: translate(113.96px, 61.6px) scale(0);
+ transform: translate(113.96px, 61.6px) scale(0);
+ }
+}
+@-moz-keyframes loading-ball-c {
+ 0% {
+ background: #e15b64;
+ }
+ 25% {
+ background: #abbd81;
+ }
+ 50% {
+ background: #f8b26a;
+ }
+ 75% {
+ background: #f47e60;
+ }
+ 100% {
+ background: #e15b64;
+ }
+}
+@-webkit-keyframes loading-ball-c {
+ 0% {
+ background: #e15b64;
+ }
+ 25% {
+ background: #abbd81;
+ }
+ 50% {
+ background: #f8b26a;
+ }
+ 75% {
+ background: #f47e60;
+ }
+ 100% {
+ background: #e15b64;
+ }
+}
+@-o-keyframes loading-ball-c {
+ 0% {
+ background: #e15b64;
+ }
+ 25% {
+ background: #abbd81;
+ }
+ 50% {
+ background: #f8b26a;
+ }
+ 75% {
+ background: #f47e60;
+ }
+ 100% {
+ background: #e15b64;
+ }
+}
+@keyframes loading-ball-c {
+ 0% {
+ background: #e15b64;
+ }
+ 25% {
+ background: #abbd81;
+ }
+ 50% {
+ background: #f8b26a;
+ }
+ 75% {
+ background: #f47e60;
+ }
+ 100% {
+ background: #e15b64;
+ }
+}
+blockquote.pullquote {
+ position: relative;
+ max-width: 45%;
+ font-size: 110%;
+}
+blockquote.pullquote.left {
+ float: left;
+ margin: 1em 0.5em 0 0;
+}
+blockquote.pullquote.right {
+ float: right;
+ margin: 1em 0 0 0.5em;
+}
+.video-container {
+ position: relative;
+ overflow: hidden;
+ margin-bottom: 16px;
+ padding-top: 56.25%;
+ height: 0;
+}
+.video-container iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ margin-top: 0;
+ width: 100%;
+ height: 100%;
+}
+.hide-inline > .hide-button,
+.hide-block > .hide-button {
+ display: inline-block;
+ padding: 5px 18px;
+ background: #49b1f5;
+ color: var(--white);
+ border-radius: 6px;
+}
+.hide-inline > .hide-button:hover,
+.hide-block > .hide-button:hover {
+ background-color: var(--btn-hover-color);
+}
+.hide-inline > .hide-button.open,
+.hide-block > .hide-button.open {
+ display: none;
+}
+.hide-inline > .hide-button.open + div,
+.hide-block > .hide-button.open + div {
+ display: block;
+}
+.hide-inline > .hide-button.open + span,
+.hide-block > .hide-button.open + span {
+ display: inline;
+}
+.hide-inline > .hide-content,
+.hide-block > .hide-content {
+ display: none;
+}
+.hide-inline > .hide-button {
+ margin: 0 6px;
+}
+.hide-inline > .hide-content {
+ margin: 0 6px;
+}
+.hide-block {
+ margin: 0 0 16px;
+}
+.toggle {
+ margin-bottom: 20px;
+ border: 1px solid #f0f0f0;
+ border-radius: 5px;
+ overflow: hidden;
+}
+.toggle > .toggle-button {
+ padding: 6px 15px;
+ background: #f0f0f0;
+ color: #1f2d3d;
+ cursor: pointer;
+}
+.toggle > .toggle-content {
+ margin: 30px 24px;
+}
+#article-container .inline-img {
+ display: inline;
+ margin: 0 3px;
+ height: 1.1em;
+ vertical-align: text-bottom;
+}
+.hl-label {
+ padding: 2px 4px;
+ color: #fff;
+ border-radius: 3px;
+}
+.hl-label.default {
+ background-color: #777;
+}
+.hl-label.blue {
+ background-color: #428bca;
+}
+.hl-label.pink {
+ background-color: #ff69b4;
+}
+.hl-label.red {
+ background-color: #f00;
+}
+.hl-label.purple {
+ background-color: #6f42c1;
+}
+.hl-label.orange {
+ background-color: #ff8c00;
+}
+.hl-label.green {
+ background-color: #5cb85c;
+}
+.note {
+ position: relative;
+ margin: 0 0 20px;
+ padding: 15px;
+ border-radius: 3px;
+}
+.note.icon-padding {
+ padding-left: 3em;
+}
+.note > .note-icon {
+ position: absolute;
+ top: calc(50% - 0.5em);
+ left: 0.8em;
+ font-size: larger;
+}
+.note.blue:not(.disabled) {
+ border-left-color: #428bca !important;
+}
+.note.blue:not(.disabled).modern {
+ border-left-color: transparent !important;
+ color: #428bca;
+}
+.note.blue:not(.disabled):not(.simple) {
+ background: #e3eef7 !important;
+}
+.note.blue > .note-icon {
+ color: #428bca;
+}
+.note.pink:not(.disabled) {
+ border-left-color: #ff69b4 !important;
+}
+.note.pink:not(.disabled).modern {
+ border-left-color: transparent !important;
+ color: #ff69b4;
+}
+.note.pink:not(.disabled):not(.simple) {
+ background: #ffe9f4 !important;
+}
+.note.pink > .note-icon {
+ color: #ff69b4;
+}
+.note.red:not(.disabled) {
+ border-left-color: #f00 !important;
+}
+.note.red:not(.disabled).modern {
+ border-left-color: transparent !important;
+ color: #f00;
+}
+.note.red:not(.disabled):not(.simple) {
+ background: #ffd9d9 !important;
+}
+.note.red > .note-icon {
+ color: #f00;
+}
+.note.purple:not(.disabled) {
+ border-left-color: #6f42c1 !important;
+}
+.note.purple:not(.disabled).modern {
+ border-left-color: transparent !important;
+ color: #6f42c1;
+}
+.note.purple:not(.disabled):not(.simple) {
+ background: #e9e3f6 !important;
+}
+.note.purple > .note-icon {
+ color: #6f42c1;
+}
+.note.orange:not(.disabled) {
+ border-left-color: #ff8c00 !important;
+}
+.note.orange:not(.disabled).modern {
+ border-left-color: transparent !important;
+ color: #ff8c00;
+}
+.note.orange:not(.disabled):not(.simple) {
+ background: #ffeed9 !important;
+}
+.note.orange > .note-icon {
+ color: #ff8c00;
+}
+.note.green:not(.disabled) {
+ border-left-color: #5cb85c !important;
+}
+.note.green:not(.disabled).modern {
+ border-left-color: transparent !important;
+ color: #5cb85c;
+}
+.note.green:not(.disabled):not(.simple) {
+ background: #e7f4e7 !important;
+}
+.note.green > .note-icon {
+ color: #5cb85c;
+}
+.note.simple {
+ border: 1px solid #eee;
+ border-left-width: 5px;
+}
+.note.modern {
+ border: 1px solid transparent !important;
+ background-color: #f5f5f5;
+ color: #4c4948;
+}
+.note.flat {
+ border: initial;
+ border-left: 5px solid #eee;
+ background-color: #f9f9f9;
+ color: #4c4948;
+}
+.note h2,
+.note h3,
+.note h4,
+.note h5,
+.note h6 {
+ margin-top: 3px;
+ margin-bottom: 0;
+ padding-top: 0 !important;
+ border-bottom: initial;
+}
+.note p:first-child,
+.note ul:first-child,
+.note ol:first-child,
+.note table:first-child,
+.note pre:first-child,
+.note blockquote:first-child,
+.note img:first-child {
+ margin-top: 0 !important;
+}
+.note p:last-child,
+.note ul:last-child,
+.note ol:last-child,
+.note table:last-child,
+.note pre:last-child,
+.note blockquote:last-child,
+.note img:last-child {
+ margin-bottom: 0 !important;
+}
+.note .img-alt {
+ margin: 5px 0 10px;
+}
+.note:not(.no-icon) {
+ padding-left: 3em;
+}
+.note:not(.no-icon)::before {
+ position: absolute;
+ top: calc(50% - 0.95em);
+ left: 0.8em;
+ font-size: larger;
+}
+.note.default.flat {
+ background: #f7f7f7;
+}
+.note.default.modern {
+ border-color: #e1e1e1;
+ background: #f3f3f3;
+ color: #666;
+}
+.note.default.modern a:not(.btn) {
+ color: #666;
+}
+.note.default.modern a:not(.btn):hover {
+ color: #454545;
+}
+.note.default:not(.modern) {
+ border-left-color: #777;
+}
+.note.default:not(.modern) h2,
+.note.default:not(.modern) h3,
+.note.default:not(.modern) h4,
+.note.default:not(.modern) h5,
+.note.default:not(.modern) h6 {
+ color: #777;
+}
+.note.default:not(.no-icon)::before {
+ content: '\f0a9';
+}
+.note.default:not(.no-icon):not(.modern)::before {
+ color: #777;
+}
+.note.primary.flat {
+ background: #f5f0fa;
+}
+.note.primary.modern {
+ border-color: #e1c2ff;
+ background: #f3daff;
+ color: #6f42c1;
+}
+.note.primary.modern a:not(.btn) {
+ color: #6f42c1;
+}
+.note.primary.modern a:not(.btn):hover {
+ color: #453298;
+}
+.note.primary:not(.modern) {
+ border-left-color: #6f42c1;
+}
+.note.primary:not(.modern) h2,
+.note.primary:not(.modern) h3,
+.note.primary:not(.modern) h4,
+.note.primary:not(.modern) h5,
+.note.primary:not(.modern) h6 {
+ color: #6f42c1;
+}
+.note.primary:not(.no-icon)::before {
+ content: '\f055';
+}
+.note.primary:not(.no-icon):not(.modern)::before {
+ color: #6f42c1;
+}
+.note.info.flat {
+ background: #eef7fa;
+}
+.note.info.modern {
+ border-color: #b3e5ef;
+ background: #d9edf7;
+ color: #31708f;
+}
+.note.info.modern a:not(.btn) {
+ color: #31708f;
+}
+.note.info.modern a:not(.btn):hover {
+ color: #215761;
+}
+.note.info:not(.modern) {
+ border-left-color: #428bca;
+}
+.note.info:not(.modern) h2,
+.note.info:not(.modern) h3,
+.note.info:not(.modern) h4,
+.note.info:not(.modern) h5,
+.note.info:not(.modern) h6 {
+ color: #428bca;
+}
+.note.info:not(.no-icon)::before {
+ content: '\f05a';
+}
+.note.info:not(.no-icon):not(.modern)::before {
+ color: #428bca;
+}
+.note.success.flat {
+ background: #eff8f0;
+}
+.note.success.modern {
+ border-color: #d0e6be;
+ background: #dff0d8;
+ color: #3c763d;
+}
+.note.success.modern a:not(.btn) {
+ color: #3c763d;
+}
+.note.success.modern a:not(.btn):hover {
+ color: #32562c;
+}
+.note.success:not(.modern) {
+ border-left-color: #5cb85c;
+}
+.note.success:not(.modern) h2,
+.note.success:not(.modern) h3,
+.note.success:not(.modern) h4,
+.note.success:not(.modern) h5,
+.note.success:not(.modern) h6 {
+ color: #5cb85c;
+}
+.note.success:not(.no-icon)::before {
+ content: '\f058';
+}
+.note.success:not(.no-icon):not(.modern)::before {
+ color: #5cb85c;
+}
+.note.warning.flat {
+ background: #fdf8ea;
+}
+.note.warning.modern {
+ border-color: #fae4cd;
+ background: #fcf4e3;
+ color: #8a6d3b;
+}
+.note.warning.modern a:not(.btn) {
+ color: #8a6d3b;
+}
+.note.warning.modern a:not(.btn):hover {
+ color: #714f30;
+}
+.note.warning:not(.modern) {
+ border-left-color: #f0ad4e;
+}
+.note.warning:not(.modern) h2,
+.note.warning:not(.modern) h3,
+.note.warning:not(.modern) h4,
+.note.warning:not(.modern) h5,
+.note.warning:not(.modern) h6 {
+ color: #f0ad4e;
+}
+.note.warning:not(.no-icon)::before {
+ content: '\f06a';
+}
+.note.warning:not(.no-icon):not(.modern)::before {
+ color: #f0ad4e;
+}
+.note.danger.flat {
+ background: #fcf1f2;
+}
+.note.danger.modern {
+ border-color: #ebcdd2;
+ background: #f2dfdf;
+ color: #a94442;
+}
+.note.danger.modern a:not(.btn) {
+ color: #a94442;
+}
+.note.danger.modern a:not(.btn):hover {
+ color: #84333f;
+}
+.note.danger:not(.modern) {
+ border-left-color: #d9534f;
+}
+.note.danger:not(.modern) h2,
+.note.danger:not(.modern) h3,
+.note.danger:not(.modern) h4,
+.note.danger:not(.modern) h5,
+.note.danger:not(.modern) h6 {
+ color: #d9534f;
+}
+.note.danger:not(.no-icon)::before {
+ content: '\f056';
+}
+.note.danger:not(.no-icon):not(.modern)::before {
+ color: #d9534f;
+}
+#article-container .series-items a:hover {
+ color: var(--pseudo-hover);
+}
+#article-container .tabs {
+ position: relative;
+ margin: 0 0 20px;
+ border-right: 1px solid var(--tab-border-color);
+ border-bottom: 1px solid var(--tab-border-color);
+ border-left: 1px solid var(--tab-border-color);
+ border-radius: 6px;
+ overflow: hidden;
+}
+#article-container .tabs > .nav-tabs {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: box;
+ display: flex;
+ -webkit-box-lines: multiple;
+ -moz-box-lines: multiple;
+ -o-box-lines: multiple;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ margin: 0;
+ padding: 0;
+ background: var(--tab-botton-bg);
+}
+#article-container .tabs > .nav-tabs > .tab {
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ -o-box-flex: 1;
+ -ms-box-flex: 1;
+ box-flex: 1;
+ -webkit-flex-grow: 1;
+ flex-grow: 1;
+ padding: 8px 18px;
+ border-top: 2px solid var(--tab-border-color);
+ background: var(--tab-botton-bg);
+ color: var(--tab-botton-color);
+ line-height: 2;
+ -webkit-transition: all 0.4s;
+ -moz-transition: all 0.4s;
+ -o-transition: all 0.4s;
+ -ms-transition: all 0.4s;
+ transition: all 0.4s;
+}
+#article-container .tabs > .nav-tabs > .tab i {
+ width: 1.5em;
+}
+#article-container .tabs > .nav-tabs > .tab.active {
+ border-top: 2px solid #49b1f5;
+ background: var(--tab-button-active-bg);
+ cursor: default;
+}
+#article-container .tabs > .nav-tabs > .tab:not(.active):hover {
+ border-top: 2px solid var(--tab-button-hover-bg);
+ background: var(--tab-button-hover-bg);
+}
+#article-container .tabs > .nav-tabs.no-default ~ .tab-to-top {
+ display: none;
+}
+#article-container .tabs > .tab-contents .tab-item-content {
+ position: relative;
+ display: none;
+ padding: 36px 24px 10px;
+}
+@media screen and (max-width: 768px) {
+ #article-container .tabs > .tab-contents .tab-item-content {
+ padding: 24px 14px;
+ }
+}
+#article-container .tabs > .tab-contents .tab-item-content.active {
+ display: block;
+ -webkit-animation: tabshow 0.5s;
+ -moz-animation: tabshow 0.5s;
+ -o-animation: tabshow 0.5s;
+ -ms-animation: tabshow 0.5s;
+ animation: tabshow 0.5s;
+}
+#article-container .tabs > .tab-contents .tab-item-content > :last-child {
+ margin-bottom: 0;
+}
+#article-container .tabs > .tab-to-top {
+ padding: 0 16px 10px 0;
+ width: 100%;
+ text-align: right;
+}
+#article-container .tabs > .tab-to-top button {
+ color: #99a9bf;
+}
+#article-container .tabs > .tab-to-top button:hover {
+ color: #49b1f5;
+}
+@-moz-keyframes tabshow {
+ 0% {
+ -webkit-transform: translateY(15px);
+ -moz-transform: translateY(15px);
+ -o-transform: translateY(15px);
+ -ms-transform: translateY(15px);
+ transform: translateY(15px);
+ }
+ 100% {
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -o-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+@-webkit-keyframes tabshow {
+ 0% {
+ -webkit-transform: translateY(15px);
+ -moz-transform: translateY(15px);
+ -o-transform: translateY(15px);
+ -ms-transform: translateY(15px);
+ transform: translateY(15px);
+ }
+ 100% {
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -o-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+@-o-keyframes tabshow {
+ 0% {
+ -webkit-transform: translateY(15px);
+ -moz-transform: translateY(15px);
+ -o-transform: translateY(15px);
+ -ms-transform: translateY(15px);
+ transform: translateY(15px);
+ }
+ 100% {
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -o-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+@keyframes tabshow {
+ 0% {
+ -webkit-transform: translateY(15px);
+ -moz-transform: translateY(15px);
+ -o-transform: translateY(15px);
+ -ms-transform: translateY(15px);
+ transform: translateY(15px);
+ }
+ 100% {
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -o-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+#article-container .timeline {
+ margin: 0 10px 20px;
+ padding: 14px 0 5px 20px;
+ border-left: 2px solid var(--timeline-color, #49b1f5);
+}
+#article-container .timeline.blue {
+ --timeline-color: #428bca;
+ --timeline-bg: rgba(66,139,202, 0.2);
+}
+#article-container .timeline.pink {
+ --timeline-color: #ff69b4;
+ --timeline-bg: rgba(255,105,180, 0.2);
+}
+#article-container .timeline.red {
+ --timeline-color: #f00;
+ --timeline-bg: rgba(255,0,0, 0.2);
+}
+#article-container .timeline.purple {
+ --timeline-color: #6f42c1;
+ --timeline-bg: rgba(111,66,193, 0.2);
+}
+#article-container .timeline.orange {
+ --timeline-color: #ff8c00;
+ --timeline-bg: rgba(255,140,0, 0.2);
+}
+#article-container .timeline.green {
+ --timeline-color: #5cb85c;
+ --timeline-bg: rgba(92,184,92, 0.2);
+}
+#article-container .timeline .timeline-item {
+ margin: 0 0 15px;
+}
+#article-container .timeline .timeline-item:hover .item-circle:before {
+ border-color: var(--timeline-color, #49b1f5);
+}
+#article-container .timeline .timeline-item.headline .timeline-item-title .item-circle > p {
+ font-weight: 600;
+ font-size: 1.2em;
+}
+#article-container .timeline .timeline-item.headline .timeline-item-title .item-circle:before {
+ left: -28px;
+ border: 4px solid var(--timeline-color, #49b1f5);
+}
+#article-container .timeline .timeline-item.headline:hover .item-circle:before {
+ border-color: var(--pseudo-hover);
+}
+#article-container .timeline .timeline-item .timeline-item-title {
+ position: relative;
+}
+#article-container .timeline .timeline-item .item-circle:before {
+ position: absolute;
+ top: 50%;
+ left: -27px;
+ width: 6px;
+ height: 6px;
+ border: 3px solid var(--pseudo-hover);
+ border-radius: 50%;
+ background: var(--card-bg);
+ content: '';
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ -o-transition: all 0.3s;
+ -ms-transition: all 0.3s;
+ transition: all 0.3s;
+ -webkit-transform: translate(0, -50%);
+ -moz-transform: translate(0, -50%);
+ -o-transform: translate(0, -50%);
+ -ms-transform: translate(0, -50%);
+ transform: translate(0, -50%);
+}
+#article-container .timeline .timeline-item .item-circle > p {
+ margin: 0 0 8px;
+ font-weight: 500;
+}
+#article-container .timeline .timeline-item .timeline-item-content {
+ position: relative;
+ padding: 12px 15px;
+ border-radius: 8px;
+ background: var(--timeline-bg, #e4f3fd);
+ font-size: 0.93em;
+}
+#article-container .timeline .timeline-item .timeline-item-content > :last-child {
+ margin-bottom: 0;
+}
+#article-container .timeline + .timeline {
+ margin-top: -20px;
+}
+[data-theme='dark'] {
+ --global-bg: #0d0d0d;
+ --font-color: rgba(255,255,255,0.7);
+ --hr-border: rgba(255,255,255,0.4);
+ --hr-before-color: rgba(255,255,255,0.7);
+ --search-bg: #121212;
+ --search-input-color: rgba(255,255,255,0.7);
+ --search-a-color: rgba(255,255,255,0.7);
+ --preloader-bg: #0d0d0d;
+ --preloader-color: rgba(255,255,255,0.7);
+ --tab-border-color: #2c2c2c;
+ --tab-botton-bg: #2c2c2c;
+ --tab-botton-color: rgba(255,255,255,0.7);
+ --tab-button-hover-bg: #383838;
+ --tab-button-active-bg: #121212;
+ --card-bg: #121212;
+ --sidebar-bg: #121212;
+ --sidebar-menu-bg: #1f1f1f;
+ --btn-hover-color: #787878;
+ --btn-color: rgba(255,255,255,0.7);
+ --btn-bg: #1f1f1f;
+ --text-bg-hover: #383838;
+ --light-grey: rgba(255,255,255,0.7);
+ --dark-grey: rgba(255,255,255,0.2);
+ --white: rgba(255,255,255,0.9);
+ --text-highlight-color: rgba(255,255,255,0.9);
+ --blockquote-color: rgba(255,255,255,0.7);
+ --blockquote-bg: #2c2c2c;
+ --reward-pop: #2c2c2c;
+ --toc-link-color: rgba(255,255,255,0.6);
+ --scrollbar-color: #525252;
+ --timeline-bg: #1f1f1f;
+ --zoom-bg: #121212;
+ --mark-bg: rgba(0,0,0,0.6);
+}
+[data-theme='dark'] #web_bg:before {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0,0,0,0.7);
+ content: '';
+}
+[data-theme='dark'] #article-container code {
+ background: #2c2c2c;
+}
+[data-theme='dark'] #article-container pre > code {
+ background: #171717;
+}
+[data-theme='dark'] #article-container figure.highlight {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+[data-theme='dark'] #article-container .note code {
+ background: rgba(27,31,35,0.05);
+}
+[data-theme='dark'] #article-container .aplayer {
+ filter: brightness(0.8);
+}
+[data-theme='dark'] #article-container kbd {
+ border-color: #696969;
+ background-color: #525252;
+ color: #e2f1ff;
+}
+[data-theme='dark'] #page-header.nav-fixed > #nav,
+[data-theme='dark'] #page-header.not-top-img > #nav {
+ background: rgba(18,18,18,0.8);
+ -webkit-box-shadow: 0 5px 6px -5px rgba(133,133,133,0);
+ box-shadow: 0 5px 6px -5px rgba(133,133,133,0);
+}
+[data-theme='dark'] #post-comment .comment-switch {
+ background: #2c2c2c !important;
+}
+[data-theme='dark'] #post-comment .comment-switch #switch-btn {
+ filter: brightness(0.8);
+}
+[data-theme='dark'] .note {
+ filter: brightness(0.8);
+}
+[data-theme='dark'] .hide-button,
+[data-theme='dark'] .btn-beautify,
+[data-theme='dark'] .hl-label,
+[data-theme='dark'] .post-outdate-notice,
+[data-theme='dark'] .error-img,
+[data-theme='dark'] #article-container iframe,
+[data-theme='dark'] .gist,
+[data-theme='dark'] .ads-wrap {
+ filter: brightness(0.8);
+}
+[data-theme='dark'] img {
+ filter: brightness(0.8);
+}
+[data-theme='dark'] #aside-content .aside-list > .aside-list-item:not(:last-child) {
+ border-bottom: 1px dashed rgba(255,255,255,0.1);
+}
+[data-theme='dark'] #gitalk-container {
+ filter: brightness(0.8);
+}
+[data-theme='dark'] #gitalk-container svg {
+ fill: rgba(255,255,255,0.9) !important;
+}
+[data-theme='dark'] #disqusjs #dsqjs:hover,
+[data-theme='dark'] #disqusjs #dsqjs:focus,
+[data-theme='dark'] #disqusjs #dsqjs .dsqjs-tab-active,
+[data-theme='dark'] #disqusjs #dsqjs .dsqjs-no-comment {
+ color: rgba(255,255,255,0.7);
+}
+[data-theme='dark'] #disqusjs #dsqjs .dsqjs-order-label {
+ background-color: #1f1f1f;
+}
+[data-theme='dark'] #disqusjs #dsqjs .dsqjs-post-body {
+ color: rgba(255,255,255,0.7);
+}
+[data-theme='dark'] #disqusjs #dsqjs .dsqjs-post-body code,
+[data-theme='dark'] #disqusjs #dsqjs .dsqjs-post-body pre {
+ background: #2c2c2c;
+}
+[data-theme='dark'] #disqusjs #dsqjs .dsqjs-post-body blockquote {
+ color: rgba(255,255,255,0.7);
+}
+[data-theme='dark'] #artitalk_main #lazy {
+ background: #121212;
+}
+[data-theme='dark'] #operare_artitalk .c2 {
+ background: #121212;
+}
+@media screen and (max-width: 900px) {
+ [data-theme='dark'] #card-toc {
+ background: #1f1f1f;
+ }
+}
+[data-theme='dark'] .artalk.atk-dark-mode,
+[data-theme='dark'] .atk-layer-wrap.atk-dark-mode {
+ --at-color-font: rgba(255,255,255,0.7);
+ --at-color-meta: rgba(255,255,255,0.7);
+ --at-color-grey: rgba(255,255,255,0.7);
+}
+[data-theme='dark'] .atk-send-btn,
+[data-theme='dark'] .atk-badge {
+ color: rgba(255,255,255,0.7) !important;
+}
+[data-theme='dark'] #waline-wrap {
+ --waline-color: rgba(255,255,255,0.7);
+ --waline-dark-grey: rgba(255,255,255,0.7);
+ --waline-info-color: rgba(255,255,255,0.5);
+}
+.read-mode {
+ --font-color: #4c4948;
+ --readmode-light-color: #fff;
+ --white: #4c4948;
+ --light-grey: #4c4948;
+ --gray: #d6dbdf;
+ --hr-border: #d6dbdf;
+ --hr-before-color: #b9c2c9;
+ --highlight-bg: #f7f7f7;
+ --exit-btn-bg: #c0c0c0;
+ --exit-btn-color: #fff;
+ --exit-btn-hover: #8d8d8d;
+ --pseudo-hover: none;
+}
+[data-theme='dark'] .read-mode {
+ --font-color: rgba(255,255,255,0.7);
+ --readmode-light-color: #0d0d0d;
+ --white: rgba(255,255,255,0.9);
+ --light-grey: rgba(255,255,255,0.7);
+ --gray: rgba(255,255,255,0.7);
+ --hr-border: rgba(255,255,255,0.5);
+ --hr-before-color: rgba(255,255,255,0.7);
+ --highlight-bg: #171717;
+ --exit-btn-bg: #1f1f1f;
+ --exit-btn-color: rgba(255,255,255,0.9);
+ --exit-btn-hover: #525252;
+}
+.read-mode {
+ background: var(--readmode-light-color);
+}
+.read-mode .exit-readmode {
+ position: fixed;
+ top: 30px;
+ right: 30px;
+ z-index: 100;
+ width: 40px;
+ height: 40px;
+ background: var(--exit-btn-bg);
+ color: var(--exit-btn-color);
+ font-size: 16px;
+ -webkit-transition: background 0.3s;
+ -moz-transition: background 0.3s;
+ -o-transition: background 0.3s;
+ -ms-transition: background 0.3s;
+ transition: background 0.3s;
+ border-radius: 8px;
+}
+@media screen and (max-width: 768px) {
+ .read-mode .exit-readmode {
+ top: initial;
+ bottom: 30px;
+ }
+}
+.read-mode .exit-readmode:hover {
+ background: var(--exit-btn-hover);
+}
+.read-mode #aside-content {
+ display: none;
+}
+.read-mode #page-header.post-bg {
+ background: none !important;
+}
+.read-mode #page-header.post-bg:before {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+}
+.read-mode #page-header.post-bg > #post-info {
+ text-align: center;
+}
+.read-mode #post {
+ margin: 0 auto;
+ background: transparent;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.read-mode #post:hover {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.read-mode > canvas {
+ display: none !important;
+}
+.read-mode .highlight-tools,
+.read-mode #footer,
+.read-mode #post > *:not(#post-info):not(.post-content),
+.read-mode #nav,
+.read-mode .post-outdate-notice,
+.read-mode #web_bg,
+.read-mode #rightside,
+.read-mode .not-top-img {
+ display: none !important;
+}
+.read-mode #article-container a {
+ color: #99a9bf;
+}
+.read-mode #article-container pre,
+.read-mode #article-container .highlight:not(.js-file-line-container) {
+ background: var(--highlight-bg) !important;
+}
+.read-mode #article-container pre *,
+.read-mode #article-container .highlight:not(.js-file-line-container) * {
+ color: var(--font-color) !important;
+}
+.read-mode #article-container figure.highlight {
+ border-radius: 0 !important;
+ -webkit-box-shadow: none !important;
+ box-shadow: none !important;
+}
+.read-mode #article-container figure.highlight > :not(.highlight-tools) {
+ display: block !important;
+}
+.read-mode #article-container figure.highlight .line:before {
+ color: var(--font-color) !important;
+}
+.read-mode #article-container figure.highlight .hljs {
+ background: var(--highlight-bg) !important;
+}
+.read-mode #article-container h1,
+.read-mode #article-container h2,
+.read-mode #article-container h3,
+.read-mode #article-container h4,
+.read-mode #article-container h5,
+.read-mode #article-container h6 {
+ padding: 0;
+}
+.read-mode #article-container h1:before,
+.read-mode #article-container h2:before,
+.read-mode #article-container h3:before,
+.read-mode #article-container h4:before,
+.read-mode #article-container h5:before,
+.read-mode #article-container h6:before {
+ content: '';
+}
+.read-mode #article-container h1:hover,
+.read-mode #article-container h2:hover,
+.read-mode #article-container h3:hover,
+.read-mode #article-container h4:hover,
+.read-mode #article-container h5:hover,
+.read-mode #article-container h6:hover {
+ padding: 0;
+}
+.read-mode #article-container ul:hover:before,
+.read-mode #article-container li:hover:before,
+.read-mode #article-container ol:hover:before {
+ -webkit-transform: none !important;
+ -moz-transform: none !important;
+ -o-transform: none !important;
+ -ms-transform: none !important;
+ transform: none !important;
+}
+.read-mode #article-container ol:before,
+.read-mode #article-container li:before {
+ background: transparent !important;
+ color: var(--font-color) !important;
+}
+.read-mode #article-container ul >li:before {
+ border-color: var(--gray) !important;
+}
+.read-mode #article-container .tabs {
+ border: 2px solid var(--tab-border-color);
+}
+.read-mode #article-container .tabs > .nav-tabs {
+ background: transparent;
+}
+.read-mode #article-container .tabs > .nav-tabs > .tab {
+ border-top: none !important;
+}
+.read-mode #article-container .tabs > .tab-contents .tab-item-content.active {
+ -webkit-animation: none;
+ -moz-animation: none;
+ -o-animation: none;
+ -ms-animation: none;
+ animation: none;
+}
+.read-mode #article-container code {
+ color: var(--font-color);
+}
+.read-mode #article-container blockquote {
+ border-color: var(--gray);
+ background-color: var(--readmode-light-color);
+}
+.read-mode #article-container kbd {
+ border: 1px solid var(--gray);
+ background-color: transparent;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ color: var(--font-color);
+}
+.read-mode #article-container .hide-toggle {
+ border: 1px solid var(--gray) !important;
+}
+.read-mode #article-container .hide-button,
+.read-mode #article-container .btn-beautify,
+.read-mode #article-container .hl-label {
+ border: 1px solid var(--gray) !important;
+ background: var(--readmode-light-color) !important;
+ color: var(--font-color) !important;
+}
+.read-mode #article-container .note {
+ border: 2px solid var(--gray);
+ border-left-color: var(--gray) !important;
+ filter: none;
+ background-color: var(--readmode-light-color) !important;
+ color: var(--font-color);
+}
+.read-mode #article-container .note:before,
+.read-mode #article-container .note .note-icon {
+ color: var(--font-color);
+}
+.search-dialog {
+ position: fixed;
+ top: 10%;
+ left: 50%;
+ z-index: 1001;
+ display: none;
+ margin-left: -300px;
+ padding: 20px;
+ width: 600px;
+ background: var(--search-bg);
+ --search-height: 100vh;
+ border-radius: 8px;
+}
+@media screen and (max-width: 768px) {
+ .search-dialog {
+ top: 0;
+ left: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ border-radius: 0;
+ }
+}
+.search-dialog hr {
+ margin: 20px auto;
+}
+.search-dialog .search-nav {
+ margin: 0 0 14px;
+ color: #49b1f5;
+ font-size: 1.4em;
+ line-height: 1;
+}
+.search-dialog .search-nav .search-dialog-title {
+ margin-right: 10px;
+}
+.search-dialog .search-nav .search-close-button {
+ float: right;
+ color: #858585;
+ -webkit-transition: color 0.2s ease-in-out;
+ -moz-transition: color 0.2s ease-in-out;
+ -o-transition: color 0.2s ease-in-out;
+ -ms-transition: color 0.2s ease-in-out;
+ transition: color 0.2s ease-in-out;
+}
+.search-dialog .search-nav .search-close-button:hover {
+ color: #49b1f5;
+}
+.search-dialog hr {
+ margin: 20px auto;
+}
+#search-mask {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 1000;
+ display: none;
+ background: rgba(0,0,0,0.6);
+}
diff --git a/css/minimal.css b/css/minimal.css
new file mode 100644
index 0000000..4b3fc12
--- /dev/null
+++ b/css/minimal.css
@@ -0,0 +1,22 @@
+.pace {
+ -webkit-pointer-events: none;
+ pointer-events: none;
+
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+}
+
+.pace-inactive {
+ display: none;
+}
+
+.pace .pace-progress {
+ background: #9c9c9c77;
+ position: fixed;
+ z-index: 2000;
+ top: 0;
+ right: 100%;
+ width: 100%;
+ height: 3px;
+}
\ No newline at end of file
diff --git a/css/var.css b/css/var.css
new file mode 100644
index 0000000..e69de29
diff --git a/img/404.jpg b/img/404.jpg
new file mode 100644
index 0000000..4bab3c3
Binary files /dev/null and b/img/404.jpg differ
diff --git a/img/avatar.png b/img/avatar.png
new file mode 100644
index 0000000..33aeaaa
Binary files /dev/null and b/img/avatar.png differ
diff --git a/img/butterfly-icon.png b/img/butterfly-icon.png
new file mode 100644
index 0000000..3992d77
Binary files /dev/null and b/img/butterfly-icon.png differ
diff --git a/img/cover.jpg b/img/cover.jpg
new file mode 100644
index 0000000..b1edfbc
Binary files /dev/null and b/img/cover.jpg differ
diff --git a/img/error-page.png b/img/error-page.png
new file mode 100644
index 0000000..9d1de96
Binary files /dev/null and b/img/error-page.png differ
diff --git a/img/favicon.ico b/img/favicon.ico
new file mode 100644
index 0000000..56d07f5
Binary files /dev/null and b/img/favicon.ico differ
diff --git a/img/friend_404.gif b/img/friend_404.gif
new file mode 100644
index 0000000..91dd56a
Binary files /dev/null and b/img/friend_404.gif differ
diff --git a/img/index.jpg b/img/index.jpg
new file mode 100644
index 0000000..6b04067
Binary files /dev/null and b/img/index.jpg differ
diff --git a/img/top.jpg b/img/top.jpg
new file mode 100644
index 0000000..b1edfbc
Binary files /dev/null and b/img/top.jpg differ
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..6cd6637
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,943 @@
+document.addEventListener('DOMContentLoaded', () => {
+ let headerContentWidth, $nav
+ let mobileSidebarOpen = false
+
+ const adjustMenu = init => {
+ const getAllWidth = ele => Array.from(ele).reduce((width, i) => width + i.offsetWidth, 0)
+
+ if (init) {
+ const blogInfoWidth = getAllWidth(document.querySelector('#blog-info > a').children)
+ const menusWidth = getAllWidth(document.getElementById('menus').children)
+ headerContentWidth = blogInfoWidth + menusWidth
+ $nav = document.getElementById('nav')
+ }
+
+ const hideMenuIndex = window.innerWidth <= 768 || headerContentWidth > $nav.offsetWidth - 120
+ $nav.classList.toggle('hide-menu', hideMenuIndex)
+ }
+
+ // 初始化header
+ const initAdjust = () => {
+ adjustMenu(true)
+ $nav.classList.add('show')
+ }
+
+ // sidebar menus
+ const sidebarFn = {
+ open: () => {
+ btf.overflowPaddingR.add()
+ btf.animateIn(document.getElementById('menu-mask'), 'to_show 0.5s')
+ document.getElementById('sidebar-menus').classList.add('open')
+ mobileSidebarOpen = true
+ },
+ close: () => {
+ btf.overflowPaddingR.remove()
+ btf.animateOut(document.getElementById('menu-mask'), 'to_hide 0.5s')
+ document.getElementById('sidebar-menus').classList.remove('open')
+ mobileSidebarOpen = false
+ }
+ }
+
+ /**
+ * 首頁top_img底下的箭頭
+ */
+ const scrollDownInIndex = () => {
+ const handleScrollToDest = () => {
+ btf.scrollToDest(document.getElementById('content-inner').offsetTop, 300)
+ }
+
+ const $scrollDownEle = document.getElementById('scroll-down')
+ $scrollDownEle && btf.addEventListenerPjax($scrollDownEle, 'click', handleScrollToDest)
+ }
+
+ /**
+ * 代碼
+ * 只適用於Hexo默認的代碼渲染
+ */
+ const addHighlightTool = () => {
+ const highLight = GLOBAL_CONFIG.highlight
+ if (!highLight) return
+
+ const { highlightCopy, highlightLang, highlightHeightLimit, highlightFullpage, highlightMacStyle, plugin } = highLight
+ const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink
+ const isShowTool = highlightCopy || highlightLang || isHighlightShrink !== undefined || highlightFullpage || highlightMacStyle
+ const $figureHighlight = plugin === 'highlight.js' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]')
+
+ if (!((isShowTool || highlightHeightLimit) && $figureHighlight.length)) return
+
+ const isPrismjs = plugin === 'prismjs'
+ const highlightShrinkClass = isHighlightShrink === true ? 'closed' : ''
+ const highlightShrinkEle = isHighlightShrink !== undefined ? ' ' : ''
+ const highlightCopyEle = highlightCopy ? '
' : ''
+ const highlightMacStyleEle = ''
+ const highlightFullpageEle = highlightFullpage ? ' ' : ''
+
+ const alertInfo = (ele, text) => {
+ if (GLOBAL_CONFIG.Snackbar !== undefined) {
+ btf.snackbarShow(text)
+ } else {
+ ele.textContent = text
+ ele.style.opacity = 1
+ setTimeout(() => { ele.style.opacity = 0 }, 800)
+ }
+ }
+
+ const copy = async (text, ctx) => {
+ try {
+ await navigator.clipboard.writeText(text)
+ alertInfo(ctx, GLOBAL_CONFIG.copy.success)
+ } catch (err) {
+ console.error('Failed to copy: ', err)
+ alertInfo(ctx, GLOBAL_CONFIG.copy.noSupport)
+ }
+ }
+
+ // click events
+ const highlightCopyFn = (ele, clickEle) => {
+ const $buttonParent = ele.parentNode
+ $buttonParent.classList.add('copy-true')
+ const preCodeSelector = isPrismjs ? 'pre code' : 'table .code pre'
+ const codeElement = $buttonParent.querySelector(preCodeSelector)
+ if (!codeElement) return
+ copy(codeElement.innerText, clickEle.previousElementSibling)
+ $buttonParent.classList.remove('copy-true')
+ }
+
+ const highlightShrinkFn = ele => ele.classList.toggle('closed')
+
+ const codeFullpage = (item, clickEle) => {
+ const wrapEle = item.closest('figure.highlight')
+ const isFullpage = wrapEle.classList.toggle('code-fullpage')
+
+ document.body.style.overflow = isFullpage ? 'hidden' : ''
+ clickEle.classList.toggle('fa-down-left-and-up-right-to-center', isFullpage)
+ clickEle.classList.toggle('fa-up-right-and-down-left-from-center', !isFullpage)
+ }
+
+ const highlightToolsFn = e => {
+ const $target = e.target.classList
+ const currentElement = e.currentTarget
+ if ($target.contains('expand')) highlightShrinkFn(currentElement)
+ else if ($target.contains('copy-button')) highlightCopyFn(currentElement, e.target)
+ else if ($target.contains('fullpage-button')) codeFullpage(currentElement, e.target)
+ }
+
+ const expandCode = e => e.currentTarget.classList.toggle('expand-done')
+
+ // 獲取隱藏狀態下元素的真實高度
+ const getActualHeight = item => {
+ const hiddenElements = new Map()
+
+ const fix = () => {
+ let current = item
+ while (current !== document.body && current != null) {
+ if (window.getComputedStyle(current).display === 'none') {
+ hiddenElements.set(current, current.getAttribute('style') || '')
+ }
+ current = current.parentNode
+ }
+
+ const style = 'visibility: hidden !important; display: block !important;'
+ hiddenElements.forEach((originalStyle, elem) => {
+ elem.setAttribute('style', originalStyle ? originalStyle + ';' + style : style)
+ })
+ }
+
+ const restore = () => {
+ hiddenElements.forEach((originalStyle, elem) => {
+ if (originalStyle === '') elem.removeAttribute('style')
+ else elem.setAttribute('style', originalStyle)
+ })
+ }
+
+ fix()
+ const height = item.offsetHeight
+ restore()
+ return height
+ }
+
+ const createEle = (lang, item) => {
+ const fragment = document.createDocumentFragment()
+
+ if (isShowTool) {
+ const hlTools = document.createElement('div')
+ hlTools.className = `highlight-tools ${highlightShrinkClass}`
+ hlTools.innerHTML = highlightMacStyleEle + highlightShrinkEle + lang + highlightCopyEle + highlightFullpageEle
+ btf.addEventListenerPjax(hlTools, 'click', highlightToolsFn)
+ fragment.appendChild(hlTools)
+ }
+
+ if (highlightHeightLimit && getActualHeight(item) > highlightHeightLimit + 30) {
+ const ele = document.createElement('div')
+ ele.className = 'code-expand-btn'
+ ele.innerHTML = ' '
+ btf.addEventListenerPjax(ele, 'click', expandCode)
+ fragment.appendChild(ele)
+ }
+
+ isPrismjs ? item.parentNode.insertBefore(fragment, item) : item.insertBefore(fragment, item.firstChild)
+ }
+
+ $figureHighlight.forEach(item => {
+ let langName = ''
+ if (isPrismjs) btf.wrap(item, 'figure', { class: 'highlight' })
+
+ if (!highlightLang) {
+ createEle('', item)
+ return
+ }
+
+ if (isPrismjs) {
+ langName = item.getAttribute('data-language') || 'Code'
+ } else {
+ langName = item.getAttribute('class').split(' ')[1]
+ if (langName === 'plain' || langName === undefined) langName = 'Code'
+ }
+ createEle(`${langName}
`, item)
+ })
+ }
+
+ /**
+ * PhotoFigcaption
+ */
+ const addPhotoFigcaption = () => {
+ if (!GLOBAL_CONFIG.isPhotoFigcaption) return
+ document.querySelectorAll('#article-container img').forEach(item => {
+ const altValue = item.title || item.alt
+ if (!altValue) return
+ const ele = document.createElement('div')
+ ele.className = 'img-alt is-center'
+ ele.textContent = altValue
+ item.insertAdjacentElement('afterend', ele)
+ })
+ }
+
+ /**
+ * Lightbox
+ */
+ const runLightbox = () => {
+ btf.loadLightbox(document.querySelectorAll('#article-container img:not(.no-lightbox)'))
+ }
+
+ /**
+ * justified-gallery 圖庫排版
+ */
+
+ const fetchUrl = async url => {
+ const response = await fetch(url)
+ return await response.json()
+ }
+
+ const runJustifiedGallery = (item, data, isButton = false, tabs) => {
+ const dataLength = data.length
+
+ const ig = new InfiniteGrid.JustifiedInfiniteGrid(item, {
+ gap: 5,
+ isConstantSize: true,
+ sizeRange: [150, 600],
+ // useResizeObserver: true,
+ // observeChildren: true,
+ useTransform: true
+ // useRecycle: false
+ })
+
+ const replaceDq = str => str.replace(/"/g, '"') // replace double quotes to "
+
+ const getItems = (nextGroupKey, count) => {
+ const nextItems = []
+ const startCount = (nextGroupKey - 1) * count
+
+ for (let i = 0; i < count; ++i) {
+ const num = startCount + i
+ if (num >= dataLength) {
+ break
+ }
+
+ const item = data[num]
+ const alt = item.alt ? `alt="${replaceDq(item.alt)}"` : ''
+ const title = item.title ? `title="${replaceDq(item.title)}"` : ''
+
+ nextItems.push(`
+
+
`)
+ }
+ return nextItems
+ }
+
+ const buttonText = GLOBAL_CONFIG.infinitegrid.buttonText
+ const addButton = item => {
+ const button = document.createElement('button')
+ button.innerHTML = buttonText + ' '
+
+ button.addEventListener('click', e => {
+ e.target.closest('button').remove()
+ btf.setLoading.add(item)
+ appendItem(ig.getGroups().length + 1, 10)
+ }, { once: true })
+
+ item.insertAdjacentElement('afterend', button)
+ }
+
+ const appendItem = (nextGroupKey, count) => {
+ ig.append(getItems(nextGroupKey, count), nextGroupKey)
+ }
+
+ const maxGroupKey = Math.ceil(dataLength / 10)
+ let isLayoutHidden = false
+
+ const completeFn = e => {
+ if (tabs) {
+ const parentNode = item.parentNode
+
+ if (isLayoutHidden) {
+ parentNode.style.visibility = 'visible'
+ }
+
+ if (item.offsetHeight === 0) {
+ parentNode.style.visibility = 'hidden'
+ isLayoutHidden = true
+ }
+ }
+
+ const { updated, isResize, mounted } = e
+ if (!updated.length || !mounted.length || isResize) {
+ return
+ }
+
+ btf.loadLightbox(item.querySelectorAll('img:not(.medium-zoom-image)'))
+
+ if (ig.getGroups().length === maxGroupKey) {
+ btf.setLoading.remove(item)
+ !tabs && ig.off('renderComplete', completeFn)
+ return
+ }
+
+ if (isButton) {
+ btf.setLoading.remove(item)
+ addButton(item)
+ }
+ }
+
+ const requestAppendFn = btf.debounce(e => {
+ const nextGroupKey = (+e.groupKey || 0) + 1
+ appendItem(nextGroupKey, 10)
+
+ if (nextGroupKey === maxGroupKey) {
+ ig.off('requestAppend', requestAppendFn)
+ }
+ }, 300)
+
+ btf.setLoading.add(item)
+ ig.on('renderComplete', completeFn)
+
+ if (isButton) {
+ appendItem(1, 10)
+ } else {
+ ig.on('requestAppend', requestAppendFn)
+ ig.renderItems()
+ }
+
+ btf.addGlobalFn('pjaxSendOnce', () => { ig.destroy() })
+ }
+
+ const addJustifiedGallery = async (ele, tabs = false) => {
+ if (!ele.length) return
+ const init = async () => {
+ for (const item of ele) {
+ if (btf.isHidden(item) || item.classList.contains('loaded')) continue
+
+ const isButton = item.getAttribute('data-button') === 'true'
+ const children = item.firstElementChild
+ const text = children.textContent
+ children.textContent = ''
+ item.classList.add('loaded')
+ try {
+ const content = item.getAttribute('data-type') === 'url' ? await fetchUrl(text) : JSON.parse(text)
+ runJustifiedGallery(children, content, isButton, tabs)
+ } catch (e) {
+ console.error('Gallery data parsing failed:', e)
+ }
+ }
+ }
+
+ if (typeof InfiniteGrid === 'function') {
+ init()
+ } else {
+ await btf.getScript(`${GLOBAL_CONFIG.infinitegrid.js}`)
+ init()
+ }
+ }
+
+ /**
+ * rightside scroll percent
+ */
+ const rightsideScrollPercent = currentTop => {
+ const scrollPercent = btf.getScrollPercent(currentTop, document.body)
+ const goUpElement = document.getElementById('go-up')
+
+ if (scrollPercent < 95) {
+ goUpElement.classList.add('show-percent')
+ goUpElement.querySelector('.scroll-percent').textContent = scrollPercent
+ } else {
+ goUpElement.classList.remove('show-percent')
+ }
+ }
+
+ /**
+ * 滾動處理
+ */
+ const scrollFn = () => {
+ const $rightside = document.getElementById('rightside')
+ const innerHeight = window.innerHeight + 56
+ let initTop = 0
+ const $header = document.getElementById('page-header')
+ const isChatBtn = typeof chatBtn !== 'undefined'
+ const isShowPercent = GLOBAL_CONFIG.percent.rightside
+
+ // 檢查文檔高度是否小於視窗高度
+ const checkDocumentHeight = () => {
+ if (document.body.scrollHeight <= innerHeight) {
+ $rightside.classList.add('rightside-show')
+ return true
+ }
+ return false
+ }
+
+ // 如果文檔高度小於視窗高度,直接返回
+ if (checkDocumentHeight()) return
+
+ // find the scroll direction
+ const scrollDirection = currentTop => {
+ const result = currentTop > initTop // true is down & false is up
+ initTop = currentTop
+ return result
+ }
+
+ let flag = ''
+ const scrollTask = btf.throttle(() => {
+ const currentTop = window.scrollY || document.documentElement.scrollTop
+ const isDown = scrollDirection(currentTop)
+ if (currentTop > 56) {
+ if (flag === '') {
+ $header.classList.add('nav-fixed')
+ $rightside.classList.add('rightside-show')
+ }
+
+ if (isDown) {
+ if (flag !== 'down') {
+ $header.classList.remove('nav-visible')
+ isChatBtn && window.chatBtn.hide()
+ flag = 'down'
+ }
+ } else {
+ if (flag !== 'up') {
+ $header.classList.add('nav-visible')
+ isChatBtn && window.chatBtn.show()
+ flag = 'up'
+ }
+ }
+ } else {
+ flag = ''
+ if (currentTop === 0) {
+ $header.classList.remove('nav-fixed', 'nav-visible')
+ }
+ $rightside.classList.remove('rightside-show')
+ }
+
+ isShowPercent && rightsideScrollPercent(currentTop)
+ checkDocumentHeight()
+ }, 300)
+
+ btf.addEventListenerPjax(window, 'scroll', scrollTask, { passive: true })
+ }
+
+ /**
+ * toc,anchor
+ */
+ const scrollFnToDo = () => {
+ const isToc = GLOBAL_CONFIG_SITE.isToc
+ const isAnchor = GLOBAL_CONFIG.isAnchor
+ const $article = document.getElementById('article-container')
+
+ if (!($article && (isToc || isAnchor))) return
+
+ let $tocLink, $cardToc, autoScrollToc, $tocPercentage, isExpand
+
+ if (isToc) {
+ const $cardTocLayout = document.getElementById('card-toc')
+ $cardToc = $cardTocLayout.querySelector('.toc-content')
+ $tocLink = $cardToc.querySelectorAll('.toc-link')
+ $tocPercentage = $cardTocLayout.querySelector('.toc-percentage')
+ isExpand = $cardToc.classList.contains('is-expand')
+
+ // toc元素點擊
+ const tocItemClickFn = e => {
+ const target = e.target.closest('.toc-link')
+ if (!target) return
+
+ e.preventDefault()
+ btf.scrollToDest(btf.getEleTop(document.getElementById(decodeURI(target.getAttribute('href')).replace('#', ''))), 300)
+ if (window.innerWidth < 900) {
+ $cardTocLayout.classList.remove('open')
+ }
+ }
+
+ btf.addEventListenerPjax($cardToc, 'click', tocItemClickFn)
+
+ autoScrollToc = item => {
+ const sidebarHeight = $cardToc.clientHeight
+ const itemOffsetTop = item.offsetTop
+ const itemHeight = item.clientHeight
+ const scrollTop = $cardToc.scrollTop
+ const offset = itemOffsetTop - scrollTop
+ const middlePosition = (sidebarHeight - itemHeight) / 2
+
+ if (offset !== middlePosition) {
+ $cardToc.scrollTop = scrollTop + (offset - middlePosition)
+ }
+ }
+
+ // 處理 hexo-blog-encrypt 事件
+ $cardToc.style.display = 'block'
+ }
+
+ // find head position & add active class
+ const $articleList = $article.querySelectorAll('h1,h2,h3,h4,h5,h6')
+ let detectItem = ''
+
+ const findHeadPosition = top => {
+ if (top === 0) return false
+
+ let currentId = ''
+ let currentIndex = ''
+
+ for (let i = 0; i < $articleList.length; i++) {
+ const ele = $articleList[i]
+ if (top > btf.getEleTop(ele) - 80) {
+ const id = ele.id
+ currentId = id ? '#' + encodeURI(id) : ''
+ currentIndex = i
+ } else {
+ break
+ }
+ }
+
+ if (detectItem === currentIndex) return
+
+ if (isAnchor) btf.updateAnchor(currentId)
+
+ detectItem = currentIndex
+
+ if (isToc) {
+ $cardToc.querySelectorAll('.active').forEach(i => i.classList.remove('active'))
+
+ if (currentId) {
+ const currentActive = $tocLink[currentIndex]
+ currentActive.classList.add('active')
+
+ setTimeout(() => autoScrollToc(currentActive), 0)
+
+ if (!isExpand) {
+ let parent = currentActive.parentNode
+ while (!parent.matches('.toc')) {
+ if (parent.matches('li')) parent.classList.add('active')
+ parent = parent.parentNode
+ }
+ }
+ }
+ }
+ }
+
+ // main of scroll
+ const tocScrollFn = btf.throttle(() => {
+ const currentTop = window.scrollY || document.documentElement.scrollTop
+ if (isToc && GLOBAL_CONFIG.percent.toc) {
+ $tocPercentage.textContent = btf.getScrollPercent(currentTop, $article)
+ }
+ findHeadPosition(currentTop)
+ }, 100)
+
+ btf.addEventListenerPjax(window, 'scroll', tocScrollFn, { passive: true })
+ }
+
+ const handleThemeChange = mode => {
+ const globalFn = window.globalFn || {}
+ const themeChange = globalFn.themeChange || {}
+ if (!themeChange) {
+ return
+ }
+
+ Object.keys(themeChange).forEach(key => {
+ const themeChangeFn = themeChange[key]
+ if (['disqus', 'disqusjs'].includes(key)) {
+ setTimeout(() => themeChangeFn(mode), 300)
+ } else {
+ themeChangeFn(mode)
+ }
+ })
+ }
+
+ /**
+ * Rightside
+ */
+ const rightSideFn = {
+ readmode: () => { // read mode
+ const $body = document.body
+ const newEle = document.createElement('button')
+
+ const exitReadMode = () => {
+ $body.classList.remove('read-mode')
+ newEle.remove()
+ newEle.removeEventListener('click', exitReadMode)
+ }
+
+ $body.classList.add('read-mode')
+ newEle.type = 'button'
+ newEle.className = 'fas fa-sign-out-alt exit-readmode'
+ newEle.addEventListener('click', exitReadMode)
+ $body.appendChild(newEle)
+ },
+ darkmode: () => { // switch between light and dark mode
+ const willChangeMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
+ if (willChangeMode === 'dark') {
+ btf.activateDarkMode()
+ GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
+ } else {
+ btf.activateLightMode()
+ GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
+ }
+ btf.saveToLocal.set('theme', willChangeMode, 2)
+ handleThemeChange(willChangeMode)
+ },
+ 'rightside-config': item => { // Show or hide rightside-hide-btn
+ const hideLayout = item.firstElementChild
+ if (hideLayout.classList.contains('show')) {
+ hideLayout.classList.add('status')
+ setTimeout(() => {
+ hideLayout.classList.remove('status')
+ }, 300)
+ }
+
+ hideLayout.classList.toggle('show')
+ },
+ 'go-up': () => { // Back to top
+ btf.scrollToDest(0, 500)
+ },
+ 'hide-aside-btn': () => { // Hide aside
+ const $htmlDom = document.documentElement.classList
+ const saveStatus = $htmlDom.contains('hide-aside') ? 'show' : 'hide'
+ btf.saveToLocal.set('aside-status', saveStatus, 2)
+ $htmlDom.toggle('hide-aside')
+ },
+ 'mobile-toc-button': (p, item) => { // Show mobile toc
+ const tocEle = document.getElementById('card-toc')
+ tocEle.style.transition = 'transform 0.3s ease-in-out'
+
+ const tocEleHeight = tocEle.clientHeight
+ const btData = item.getBoundingClientRect()
+
+ const tocEleBottom = window.innerHeight - btData.bottom - 30
+ if (tocEleHeight > tocEleBottom) {
+ tocEle.style.transformOrigin = `right ${tocEleHeight - tocEleBottom - btData.height / 2}px`
+ }
+
+ tocEle.classList.toggle('open')
+ tocEle.addEventListener('transitionend', () => {
+ tocEle.style.cssText = ''
+ }, { once: true })
+ },
+ 'chat-btn': () => { // Show chat
+ window.chatBtnFn()
+ },
+ translateLink: () => { // switch between traditional and simplified chinese
+ window.translateFn.translatePage()
+ }
+ }
+
+ document.getElementById('rightside').addEventListener('click', e => {
+ const $target = e.target.closest('[id]')
+ if ($target && rightSideFn[$target.id]) {
+ rightSideFn[$target.id](e.currentTarget, $target)
+ }
+ })
+
+ /**
+ * menu
+ * 側邊欄sub-menu 展開/收縮
+ */
+ const clickFnOfSubMenu = () => {
+ const handleClickOfSubMenu = e => {
+ const target = e.target.closest('.site-page.group')
+ if (!target) return
+ target.classList.toggle('hide')
+ }
+
+ const menusItems = document.querySelector('#sidebar-menus .menus_items')
+ menusItems && menusItems.addEventListener('click', handleClickOfSubMenu)
+ }
+
+ /**
+ * 手机端目录点击
+ */
+ const openMobileMenu = () => {
+ const toggleMenu = document.getElementById('toggle-menu')
+ if (!toggleMenu) return
+ btf.addEventListenerPjax(toggleMenu, 'click', () => { sidebarFn.open() })
+ }
+
+ /**
+ * 複製時加上版權信息
+ */
+ const addCopyright = () => {
+ const { limitCount, languages } = GLOBAL_CONFIG.copyright
+
+ const handleCopy = (e) => {
+ e.preventDefault()
+ const copyFont = window.getSelection(0).toString()
+ let textFont = copyFont
+ if (copyFont.length > limitCount) {
+ textFont = `${copyFont}\n\n\n${languages.author}\n${languages.link}${window.location.href}\n${languages.source}\n${languages.info}`
+ }
+ if (e.clipboardData) {
+ return e.clipboardData.setData('text', textFont)
+ } else {
+ return window.clipboardData.setData('text', textFont)
+ }
+ }
+
+ document.body.addEventListener('copy', handleCopy)
+ }
+
+ /**
+ * 網頁運行時間
+ */
+ const addRuntime = () => {
+ const $runtimeCount = document.getElementById('runtimeshow')
+ if ($runtimeCount) {
+ const publishDate = $runtimeCount.getAttribute('data-publishDate')
+ $runtimeCount.textContent = `${btf.diffDate(publishDate)} ${GLOBAL_CONFIG.runtime}`
+ }
+ }
+
+ /**
+ * 最後一次更新時間
+ */
+ const addLastPushDate = () => {
+ const $lastPushDateItem = document.getElementById('last-push-date')
+ if ($lastPushDateItem) {
+ const lastPushDate = $lastPushDateItem.getAttribute('data-lastPushDate')
+ $lastPushDateItem.textContent = btf.diffDate(lastPushDate, true)
+ }
+ }
+
+ /**
+ * table overflow
+ */
+ const addTableWrap = () => {
+ const $table = document.querySelectorAll('#article-container table')
+ if (!$table.length) return
+
+ $table.forEach(item => {
+ if (!item.closest('.highlight')) {
+ btf.wrap(item, 'div', { class: 'table-wrap' })
+ }
+ })
+ }
+
+ /**
+ * tag-hide
+ */
+ const clickFnOfTagHide = () => {
+ const hideButtons = document.querySelectorAll('#article-container .hide-button')
+ if (!hideButtons.length) return
+ hideButtons.forEach(item => item.addEventListener('click', e => {
+ const currentTarget = e.currentTarget
+ currentTarget.classList.add('open')
+ addJustifiedGallery(currentTarget.nextElementSibling.querySelectorAll('.gallery-container'))
+ }, { once: true }))
+ }
+
+ const tabsFn = () => {
+ const navTabsElements = document.querySelectorAll('#article-container .tabs')
+ if (!navTabsElements.length) return
+
+ const setActiveClass = (elements, activeIndex) => {
+ elements.forEach((el, index) => {
+ el.classList.toggle('active', index === activeIndex)
+ })
+ }
+
+ const handleNavClick = e => {
+ const target = e.target.closest('button')
+ if (!target || target.classList.contains('active')) return
+
+ const navItems = [...e.currentTarget.children]
+ const tabContents = [...e.currentTarget.nextElementSibling.children]
+ const indexOfButton = navItems.indexOf(target)
+ setActiveClass(navItems, indexOfButton)
+ e.currentTarget.classList.remove('no-default')
+ setActiveClass(tabContents, indexOfButton)
+ addJustifiedGallery(tabContents[indexOfButton].querySelectorAll('.gallery-container'), true)
+ }
+
+ const handleToTopClick = tabElement => e => {
+ if (e.target.closest('button')) {
+ btf.scrollToDest(btf.getEleTop(tabElement), 300)
+ }
+ }
+
+ navTabsElements.forEach(tabElement => {
+ btf.addEventListenerPjax(tabElement.firstElementChild, 'click', handleNavClick)
+ btf.addEventListenerPjax(tabElement.lastElementChild, 'click', handleToTopClick(tabElement))
+ })
+ }
+
+ const toggleCardCategory = () => {
+ const cardCategory = document.querySelector('#aside-cat-list.expandBtn')
+ if (!cardCategory) return
+
+ const handleToggleBtn = e => {
+ const target = e.target
+ if (target.nodeName === 'I') {
+ e.preventDefault()
+ target.parentNode.classList.toggle('expand')
+ }
+ }
+ btf.addEventListenerPjax(cardCategory, 'click', handleToggleBtn, true)
+ }
+
+ const switchComments = () => {
+ const switchBtn = document.getElementById('switch-btn')
+ if (!switchBtn) return
+
+ let switchDone = false
+ const postComment = document.getElementById('post-comment')
+ const handleSwitchBtn = () => {
+ postComment.classList.toggle('move')
+ if (!switchDone && typeof loadOtherComment === 'function') {
+ switchDone = true
+ loadOtherComment()
+ }
+ }
+ btf.addEventListenerPjax(switchBtn, 'click', handleSwitchBtn)
+ }
+
+ const addPostOutdateNotice = () => {
+ const { limitDay, messagePrev, messageNext, position } = GLOBAL_CONFIG.noticeOutdate
+ const diffDay = btf.diffDate(GLOBAL_CONFIG_SITE.postUpdate)
+ if (diffDay >= limitDay) {
+ const ele = document.createElement('div')
+ ele.className = 'post-outdate-notice'
+ ele.textContent = `${messagePrev} ${diffDay} ${messageNext}`
+ const $targetEle = document.getElementById('article-container')
+ if (position === 'top') {
+ $targetEle.insertBefore(ele, $targetEle.firstChild)
+ } else {
+ $targetEle.appendChild(ele)
+ }
+ }
+ }
+
+ const lazyloadImg = () => {
+ window.lazyLoadInstance = new LazyLoad({
+ elements_selector: 'img',
+ threshold: 0,
+ data_src: 'lazy-src'
+ })
+
+ btf.addGlobalFn('pjaxComplete', () => {
+ window.lazyLoadInstance.update()
+ }, 'lazyload')
+ }
+
+ const relativeDate = selector => {
+ selector.forEach(item => {
+ item.textContent = btf.diffDate(item.getAttribute('datetime'), true)
+ item.style.display = 'inline'
+ })
+ }
+
+ const justifiedIndexPostUI = () => {
+ const recentPostsElement = document.getElementById('recent-posts')
+ if (!(recentPostsElement && recentPostsElement.classList.contains('masonry'))) return
+
+ const init = () => {
+ const masonryItem = new InfiniteGrid.MasonryInfiniteGrid('.recent-post-items', {
+ gap: { horizontal: 10, vertical: 20 },
+ useTransform: true,
+ useResizeObserver: true
+ })
+ masonryItem.renderItems()
+ btf.addGlobalFn('pjaxCompleteOnce', () => { masonryItem.destroy() }, 'removeJustifiedIndexPostUI')
+ }
+
+ typeof InfiniteGrid === 'function' ? init() : btf.getScript(`${GLOBAL_CONFIG.infinitegrid.js}`).then(init)
+ }
+
+ const unRefreshFn = () => {
+ window.addEventListener('resize', () => {
+ adjustMenu(false)
+ mobileSidebarOpen && btf.isHidden(document.getElementById('toggle-menu')) && sidebarFn.close()
+ })
+
+ const menuMask = document.getElementById('menu-mask')
+ menuMask && menuMask.addEventListener('click', () => { sidebarFn.close() })
+
+ clickFnOfSubMenu()
+ GLOBAL_CONFIG.islazyload && lazyloadImg()
+ GLOBAL_CONFIG.copyright !== undefined && addCopyright()
+
+ if (GLOBAL_CONFIG.autoDarkmode) {
+ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+ if (btf.saveToLocal.get('theme') !== undefined) return
+ e.matches ? handleThemeChange('dark') : handleThemeChange('light')
+ })
+ }
+ }
+
+ const forPostFn = () => {
+ addHighlightTool()
+ addPhotoFigcaption()
+ addJustifiedGallery(document.querySelectorAll('#article-container .gallery-container'))
+ runLightbox()
+ scrollFnToDo()
+ addTableWrap()
+ clickFnOfTagHide()
+ tabsFn()
+ }
+
+ const refreshFn = () => {
+ initAdjust()
+ justifiedIndexPostUI()
+
+ if (GLOBAL_CONFIG_SITE.isPost) {
+ GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice()
+ GLOBAL_CONFIG.relativeDate.post && relativeDate(document.querySelectorAll('#post-meta time'))
+ } else {
+ GLOBAL_CONFIG.relativeDate.homepage && relativeDate(document.querySelectorAll('#recent-posts time'))
+ GLOBAL_CONFIG.runtime && addRuntime()
+ addLastPushDate()
+ toggleCardCategory()
+ }
+
+ GLOBAL_CONFIG_SITE.isHome && scrollDownInIndex()
+ scrollFn()
+
+ forPostFn()
+ switchComments()
+ openMobileMenu()
+ }
+
+ btf.addGlobalFn('pjaxComplete', refreshFn, 'refreshFn')
+ refreshFn()
+ unRefreshFn()
+
+ // 處理 hexo-blog-encrypt 事件
+ window.addEventListener('hexo-blog-decrypt', e => {
+ forPostFn()
+ window.translateFn.translateInitialization()
+ Object.values(window.globalFn.encrypt).forEach(fn => {
+ fn()
+ })
+ })
+})
diff --git a/js/search/algolia.js b/js/search/algolia.js
new file mode 100644
index 0000000..814a00c
--- /dev/null
+++ b/js/search/algolia.js
@@ -0,0 +1,173 @@
+window.addEventListener('load', () => {
+ const { algolia } = GLOBAL_CONFIG
+ const { appId, apiKey, indexName, hitsPerPage = 5, languages } = algolia
+
+ if (!appId || !apiKey || !indexName) {
+ return console.error('Algolia setting is invalid!')
+ }
+
+ const $searchMask = document.getElementById('search-mask')
+ const $searchDialog = document.querySelector('#algolia-search .search-dialog')
+
+ const animateElements = show => {
+ const action = show ? 'animateIn' : 'animateOut'
+ const maskAnimation = show ? 'to_show 0.5s' : 'to_hide 0.5s'
+ const dialogAnimation = show ? 'titleScale 0.5s' : 'search_close .5s'
+ btf[action]($searchMask, maskAnimation)
+ btf[action]($searchDialog, dialogAnimation)
+ }
+
+ const fixSafariHeight = () => {
+ if (window.innerWidth < 768) {
+ $searchDialog.style.setProperty('--search-height', `${window.innerHeight}px`)
+ }
+ }
+
+ const openSearch = () => {
+ btf.overflowPaddingR.add()
+ animateElements(true)
+ setTimeout(() => { document.querySelector('#algolia-search .ais-SearchBox-input').focus() }, 100)
+
+ const handleEscape = event => {
+ if (event.code === 'Escape') {
+ closeSearch()
+ document.removeEventListener('keydown', handleEscape)
+ }
+ }
+
+ document.addEventListener('keydown', handleEscape)
+ fixSafariHeight()
+ window.addEventListener('resize', fixSafariHeight)
+ }
+
+ const closeSearch = () => {
+ btf.overflowPaddingR.remove()
+ animateElements(false)
+ window.removeEventListener('resize', fixSafariHeight)
+ }
+
+ const searchClickFn = () => {
+ btf.addEventListenerPjax(document.querySelector('#search-button > .search'), 'click', openSearch)
+ }
+
+ const searchFnOnce = () => {
+ $searchMask.addEventListener('click', closeSearch)
+ document.querySelector('#algolia-search .search-close-button').addEventListener('click', closeSearch)
+ }
+
+ const cutContent = (content) => {
+ if (!content) return ''
+ const firstOccur = content.indexOf('')
+ let start = firstOccur - 30
+ let end = firstOccur + 120
+ let pre = ''
+ let post = ''
+
+ if (start <= 0) {
+ start = 0
+ end = 140
+ } else {
+ pre = '...'
+ }
+
+ if (end > content.length) {
+ end = content.length
+ } else {
+ post = '...'
+ }
+
+ return `${pre}${content.substring(start, end)}${post}`
+ }
+
+ const disableDiv = [
+ document.getElementById('algolia-hits'),
+ document.getElementById('algolia-pagination'),
+ document.querySelector('#algolia-info .algolia-stats')
+ ]
+
+ const search = instantsearch({
+ indexName,
+ searchClient: algoliasearch(appId, apiKey),
+ searchFunction (helper) {
+ disableDiv.forEach(item => {
+ item.style.display = helper.state.query ? '' : 'none'
+ })
+ if (helper.state.query) helper.search()
+ }
+ })
+
+ const widgets = [
+ instantsearch.widgets.configure({ hitsPerPage }),
+ instantsearch.widgets.searchBox({
+ container: '#algolia-search-input',
+ showReset: false,
+ showSubmit: false,
+ placeholder: languages.input_placeholder,
+ showLoadingIndicator: true
+ }),
+ instantsearch.widgets.hits({
+ container: '#algolia-hits',
+ templates: {
+ item (data) {
+ const link = data.permalink || (GLOBAL_CONFIG.root + data.path)
+ const result = data._highlightResult
+ const content = result.contentStripTruncate
+ ? cutContent(result.contentStripTruncate.value)
+ : result.contentStrip
+ ? cutContent(result.contentStrip.value)
+ : result.content
+ ? cutContent(result.content.value)
+ : ''
+ return `
+
+ ${result.title.value || 'no-title'}
+ ${content ? `${content}
` : ''}
+ `
+ },
+ empty (data) {
+ return `${languages.hits_empty.replace(/\$\{query}/, data.query)}
`
+ }
+ }
+ }),
+ instantsearch.widgets.stats({
+ container: '#algolia-info > .algolia-stats',
+ templates: {
+ text (data) {
+ const stats = languages.hits_stats
+ .replace(/\$\{hits}/, data.nbHits)
+ .replace(/\$\{time}/, data.processingTimeMS)
+ return ` ${stats}`
+ }
+ }
+ }),
+ instantsearch.widgets.poweredBy({
+ container: '#algolia-info > .algolia-poweredBy'
+ }),
+ instantsearch.widgets.pagination({
+ container: '#algolia-pagination',
+ totalPages: 5,
+ templates: {
+ first: ' ',
+ last: ' ',
+ previous: ' ',
+ next: ' '
+ }
+ })
+ ]
+
+ search.addWidgets(widgets)
+ search.start()
+ searchClickFn()
+ searchFnOnce()
+
+ window.addEventListener('pjax:complete', () => {
+ if (!btf.isHidden($searchMask)) closeSearch()
+ searchClickFn()
+ })
+
+ if (window.pjax) {
+ search.on('render', () => {
+ window.pjax.refresh(document.getElementById('algolia-hits'))
+ })
+ }
+})
diff --git a/js/search/local-search.js b/js/search/local-search.js
new file mode 100644
index 0000000..0b21774
--- /dev/null
+++ b/js/search/local-search.js
@@ -0,0 +1,360 @@
+/**
+ * Refer to hexo-generator-searchdb
+ * https://github.com/next-theme/hexo-generator-searchdb/blob/main/dist/search.js
+ * Modified by hexo-theme-butterfly
+ */
+
+class LocalSearch {
+ constructor ({
+ path = '',
+ unescape = false,
+ top_n_per_article = 1
+ }) {
+ this.path = path
+ this.unescape = unescape
+ this.top_n_per_article = top_n_per_article
+ this.isfetched = false
+ this.datas = null
+ }
+
+ getIndexByWord (words, text, caseSensitive = false) {
+ const index = []
+ const included = new Set()
+
+ if (!caseSensitive) {
+ text = text.toLowerCase()
+ }
+ words.forEach(word => {
+ if (this.unescape) {
+ const div = document.createElement('div')
+ div.innerText = word
+ word = div.innerHTML
+ }
+ const wordLen = word.length
+ if (wordLen === 0) return
+ let startPosition = 0
+ let position = -1
+ if (!caseSensitive) {
+ word = word.toLowerCase()
+ }
+ while ((position = text.indexOf(word, startPosition)) > -1) {
+ index.push({ position, word })
+ included.add(word)
+ startPosition = position + wordLen
+ }
+ })
+ // Sort index by position of keyword
+ index.sort((left, right) => {
+ if (left.position !== right.position) {
+ return left.position - right.position
+ }
+ return right.word.length - left.word.length
+ })
+ return [index, included]
+ }
+
+ // Merge hits into slices
+ mergeIntoSlice (start, end, index) {
+ let item = index[0]
+ let { position, word } = item
+ const hits = []
+ const count = new Set()
+ while (position + word.length <= end && index.length !== 0) {
+ count.add(word)
+ hits.push({
+ position,
+ length: word.length
+ })
+ const wordEnd = position + word.length
+
+ // Move to next position of hit
+ index.shift()
+ while (index.length !== 0) {
+ item = index[0]
+ position = item.position
+ word = item.word
+ if (wordEnd > position) {
+ index.shift()
+ } else {
+ break
+ }
+ }
+ }
+ return {
+ hits,
+ start,
+ end,
+ count: count.size
+ }
+ }
+
+ // Highlight title and content
+ highlightKeyword (val, slice) {
+ let result = ''
+ let index = slice.start
+ for (const { position, length } of slice.hits) {
+ result += val.substring(index, position)
+ index = position + length
+ result += `${val.substr(position, length)} `
+ }
+ result += val.substring(index, slice.end)
+ return result
+ }
+
+ getResultItems (keywords) {
+ const resultItems = []
+ this.datas.forEach(({ title, content, url }) => {
+ // The number of different keywords included in the article.
+ const [indexOfTitle, keysOfTitle] = this.getIndexByWord(keywords, title)
+ const [indexOfContent, keysOfContent] = this.getIndexByWord(keywords, content)
+ const includedCount = new Set([...keysOfTitle, ...keysOfContent]).size
+
+ // Show search results
+ const hitCount = indexOfTitle.length + indexOfContent.length
+ if (hitCount === 0) return
+
+ const slicesOfTitle = []
+ if (indexOfTitle.length !== 0) {
+ slicesOfTitle.push(this.mergeIntoSlice(0, title.length, indexOfTitle))
+ }
+
+ let slicesOfContent = []
+ while (indexOfContent.length !== 0) {
+ const item = indexOfContent[0]
+ const { position } = item
+ // Cut out 120 characters. The maxlength of .search-input is 80.
+ const start = Math.max(0, position - 20)
+ const end = Math.min(content.length, position + 100)
+ slicesOfContent.push(this.mergeIntoSlice(start, end, indexOfContent))
+ }
+
+ // Sort slices in content by included keywords' count and hits' count
+ slicesOfContent.sort((left, right) => {
+ if (left.count !== right.count) {
+ return right.count - left.count
+ } else if (left.hits.length !== right.hits.length) {
+ return right.hits.length - left.hits.length
+ }
+ return left.start - right.start
+ })
+
+ // Select top N slices in content
+ const upperBound = parseInt(this.top_n_per_article, 10)
+ if (upperBound >= 0) {
+ slicesOfContent = slicesOfContent.slice(0, upperBound)
+ }
+
+ let resultItem = ''
+
+ url = new URL(url, location.origin)
+ url.searchParams.append('highlight', keywords.join(' '))
+
+ if (slicesOfTitle.length !== 0) {
+ resultItem += `