/*

Theme Name: argon

Author: solstice23

Author URI: https://solstice23.top/

Description: 轻盈、简洁、美观的 Hexo 主题

License: GNU General Public License v3.0

License URI: https://www.gnu.org/licenses/gpl-3.0.html

*/

@charset "utf-8";

:root{

--themecolor: #5e72e4;

--card-radius: 4px;

}

html.themecolor-toodark.darkmode{

--themecolor: #5e72e4 !important;

--themecolor-light: #8a98eb !important;

}

body{

background: #f4f5f7 !important;

font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;

}

a{

transition: color .25s ease;

}

audio , canvas , progress , video{

display: inline-block;

vertical-align: baseline;

}

article .post-content{

margin-top: 6px;

}

article .post-content p{

line-height: 1.8;

word-wrap: break-word;

}

article h1 , article h2 , article h3 , article h4 , article h5 , article h6 , article strong{

font-weight: 600;

}

article h1 , article h2 , article h3 , article h4 , article h5 , article h6{

margin-top: 18px !important;

margin-bottom: 15px;

}

article h1{

font-size: 30px;

}

article h2{

font-size: 26px;

}

article h3{

font-size: 22px;

}

article h4{

font-size: 18px;

}

article h5{

font-size: 15px;

}

article h6{

font-size: 13px;

}

article img , .shuoshuo-preview-container img{

max-width: 100%;

height: auto;

}

article .wp-block-image figcaption , .shuoshuo-preview-container .wp-block-image figcaption{

text-align: center;

font-size: 14px;

opacity: 0.6;

}

article video , .shuoshuo-preview-container video{

max-width: 100%;

outline: none;

}

article .wp-caption , .shuoshuo-preview-container .wp-caption{

max-width: 100%;

}

article .post-content a{

position: relative;

}

article .post-content a:before{

content: ' ';

position: absolute;

top: auto;

bottom: 0px;

left: 0;

width: 100%;

height: 1px;

background-color: var(--themecolor);

transition: all .2s;

transform: scaleX(0);

backface-visibility: hidden;

}

article .post-content a:hover:before{

transform: scaleX(1);

}

article pre:not(.hljs-codeblock){

font-family: Consolas,Menlo,Monaco,'Andale Mono WT','Andale Mono','Lucida Console','Lucida Sans Typewriter','DejaVu Sans Mono','Bitstream Vera Sans Mono','Liberation Mono','Nimbus Mono L','Courier New',Courier,monospace;

font-size: 14px;

line-height: 1.375;

text-align: left;

white-space: pre;

word-spacing: normal;

word-break: normal;

tab-size: 4;

hyphens: none;

color: #5e6687;

background: #f5f7ff;

direction: ltr;

border: 1px solid rgba(0, 0, 0, .12);

padding: 14px;

border-radius: 3px;

}

article .post-content blockquote{

padding-left: 1em;

margin: 1em 3em 1em 0;

font-weight: 400;

border-left: 4px solid rgba(0, 0, 0, .12);

}

article .post-content mark{

padding: 2px;

margin: 0 5px;

background: #fffdd1;

border-bottom: 1px solid #ffedce;

}

article .post-content u , article .post-content ins{

text-decoration: none;

border-bottom: 1px solid;

}

article code:not([hljs-codeblock-inner]){

font-family: Consolas,Menlo,Monaco,'Andale Mono WT','Andale Mono','Lucida Console','Lucida Sans Typewriter','DejaVu Sans Mono','Bitstream Vera Sans Mono','Liberation Mono','Nimbus Mono L','Courier New',Courier,monospace;

color: #f5365c;

background: ##eff1f5;

direction: ltr;

border-radius: 3px;

}

article > code:not([hljs-codeblock-inner]) , article > p > code:not([hljs-codeblock-inner]){

padding: 2px 3px;

}

article .post-content abbr[title]{

text-decoration: none;

cursor: help;

border-bottom: 1px dotted;

}

article .post-content kbd{

padding: 2px 6px;

font-size: 90%;

color: #fff;

background-color: #333;

border-radius: 3px;

}

article .wp-embedded-content {

max-width: 100%;

}

article table{

max-width: 100%;

word-break: break-word;

}

article table > tbody > tr > td,

article table > tbody > tr > th,

article table > tfoot > tr > td,

article table > tfoot > tr > th,

article table > thead > tr > td,

article table > thead > tr > th{

padding: 1rem;

vertical-align: top;

border: 1px solid #dee2e6;

}

::-webkit-scrollbar{

width: 8px;

height: 8px;

background-color: rgba(0, 0, 0, 0);

}

::-webkit-scrollbar-track{

background-color: rgba(0, 0, 0, 0.05);

}

::-webkit-scrollbar-thumb{

background-color: rgba(0, 0, 0, 0.2);

}

::-webkit-scrollbar-thumb:hover{

background-color: rgba(var(--themecolor-rgbstr), 0.8);

}

*::selection{

background-color: #cce2ff;

}

*::-moz-selection{

background-color: #cce2ff;

}

*::-webkit-selection{

background-color: #cce2ff;

}

html.use-serif p , html.use-serif span , html.use-serif div{

font-family: 'Noto Serif SC',serif !important;

}

html.use-big-shadow *.shadow-sm{

box-shadow: 0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07)!important;

}

/*标题样式*/

.article-header-style-1 article h1, .article-header-style-1 article h2, .article-header-style-1 article h3{

position: relative;

}

.article-header-style-1 article h1:after,

.article-header-style-1 article h2:after,

.article-header-style-1 article h3:after {

content: '';

display: block;

position: absolute;

background: var(--themecolor);

opacity: .25;

pointer-events: none;

border-radius: 15px;

left: -2px;

bottom: 0px;

}

.article-header-style-1 article h1:after {

width: 45px;

height: 13px;

}

.article-header-style-1 article h2:after {

width: 40px;

height: 11px;

}

.article-header-style-1 article h3:after {

width: 30px;

height: 9px;

}

.article-header-style-1 article h1.text-center:after, .article-header-style-1 article h1[style*='text-align: center']:after, .article-header-style-1 article h1[style*='text-align:center']:after, .article-header-style-1 article h1[class*='text-align-center']:after,

.article-header-style-1 article h2.text-center:after, .article-header-style-1 article h2[style*='text-align: center']:after, .article-header-style-1 article h2[style*='text-align:center']:after, .article-header-style-1 article h2[class*='text-align-center']:after,

.article-header-style-1 article h3.text-center:after, .article-header-style-1 article h3[style*='text-align: center']:after, .article-header-style-1 article h3[style*='text-align:center']:after, .article-header-style-1 article h3[class*='text-align-center']:after {

left: 50%;

transform: translateX(-50%);

}

.article-header-style-1 article h1.text-right:after, .article-header-style-1 article h1[style*='text-align: right']:after, .article-header-style-1 article h1[style*='text-align:right']:after, .article-header-style-1 article h1[class*='text-align-right']:after,

.article-header-style-1 article h2.text-right:after, .article-header-style-1 article h2[style*='text-align: right']:after, .article-header-style-1 article h2[style*='text-align:right']:after, .article-header-style-1 article h2[class*='text-align-right']:after,

.article-header-style-1 article h3.text-right:after, .article-header-style-1 article h3[style*='text-align: right']:after, .article-header-style-1 article h3[style*='text-align:right']:after, .article-header-style-1 article h3[class*='text-align-right']:after {

left: unset;

right: -2px;

}

.article-header-style-2 article h1:before,

.article-header-style-2 article h2:before,

.article-header-style-2 article h3:before {

content: '';

display: inline-block;

background: var(--themecolor);

opacity: 1;

pointer-events: none;

border-radius: 15px;

width: 6px;

vertical-align: middle;

margin-right: 15px;

}

.article-header-style-2 article h1:before {

height: 25px;

transform: translateY(-1px);

}

.article-header-style-2 article h2:before {

height: 20px;

transform: translateY(-2px);

}

.article-header-style-2 article h3:before {

height: 16px;

transform: translateY(-1px);

}

/*卡片圆角*/

.card{

border-radius: var(--card-radius);

}

/*主题色适配*/

.text-primary{

color: var(--themecolor) !important;

}

a , .btn-neutral{

color: var(--themecolor);

}

a:hover{

color: var(--themecolor-dark);

}

a.text-primary:focus , a.text-primary:hover {

color: var(--themecolor) !important;

}

.btn-primary.disabled, .btn-primary:disabled {

border-color: var(--themecolor);

background-color: var(--themecolor);

}

.custom-toggle input:checked+.custom-toggle-slider{

border-color: var(--themecolor);

}

.custom-toggle input:checked+.custom-toggle-slider:before{

background-color: var(--themecolor);

}

.btn-primary{

border-color: var(--themecolor);

background-color: var(--themecolor);

}

.btn-outline-primary{

border-color: var(--themecolor) !important;

color: var(--themecolor);

}

.btn-primary:hover , .btn-outline-primary:hover{

border-color: var(--themecolor-dark);

background-color: var(--themecolor-dark);

}

.btn-primary:active , .btn-outline-primary:active{

border-color: var(--themecolor-dark2) !important;

background-color: var(--themecolor-dark2) !important;

}

.page-item.active .page-link ,

.custom-checkbox .custom-control-input:checked~.custom-control-label::before ,

.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before ,

.custom-control-input:not(:disabled):active~.custom-control-label::before{

border-color: var(--themecolor);

background-color: var(--themecolor);

}

/*页面框架*/

#content{

padding: 0 5px;

max-width: 1200px;

margin: auto;

margin-top: -30vh;

}

@media screen and (min-width:1700px){

#content{

max-width: 1500px;

}

}

#primary{

width: calc(100% - 280px);

float: right;

}

#leftbar{

padding-left: 20px;

padding-right: 20px;

width: 280px;

float: left;

margin-bottom: 25px;

}

#main{

padding: 0 20px;

overflow: visible;

}

/*单栏布局*/

html.single-column #leftbar{

display: none;

}

html.single-column #primary{

width: 100%;

float: none;

max-width: 1200px;

margin: auto;

}

html.single-column #main{

padding: 0;

}

html.single-column #fabtn_open_sidebar{

display: none !important;

}

html.page-information-card{

width: 100%;

max-width: 1200px;

margin-left: auto;

margin-right: auto;

}

/*三栏布局*/

#rightbar {

padding-left: 0;

padding-right: 0;

width: 280px;

float: right;

margin-bottom: 25px;

}

#rightbar > .card {

margin-left: 10px;

margin-right: 20px;

margin-bottom: 15px;

padding: 20px 25px;

}

#rightbar > .card ul {

list-style: none;

padding-inline-start: 0;

}

#rightbar > .card ul li {

margin-bottom: 5px;

}

#rightbar > .card > h6 {

margin-bottom: 15px;

}

@media screen and (min-width:1100px){

html.triple-column #leftbar {

padding-right: 10px;

}

html.triple-column #leftbar_part2.sticky{

width: 250px;

}

html.triple-column #primary {

width: calc(100% - 560px);

float: left;

}

}

html.triple-column #content {

max-width: 1500px;

}

@media screen and (min-width:1700px){

html.triple-column #content{

max-width: 1600px;

}

}

@media screen and (max-width:1100px){

#rightbar{

display: none;

}

}

/*Pjax加载动画 & 卡片动画*/

@keyframes card-show{

0%{

opacity: 0;

transform: scale(0.8);

}

100%{

opacity: 1;

transform: none;

}

}

#primary{

transition: all .3s ease;

}

.card{

animation: card-show 0.25s ease-out;

transform-origin: center top;

}

.card .card{

animation: none;

}

/*顶栏和 Banner 部分*/

#navbar-main{

--toolbar-color: var(--themecolor-rgbstr);

}

html.darkmode #navbar-main{

--toolbar-color: 33, 33, 33;

}

html.darkmode.amoled-dark #navbar-main{

--toolbar-color: 0, 0, 0;

}

@media (min-width: 1700px){

.navbar-main .container {

max-width: 1500px !important;

}

}

@media (min-width: 1200px) and (max-width: 1700px){

.navbar-main .container {

max-width: 1200px !important;

}

}

@media (min-width: 992px){

.navbar-main .container {

max-width: 100%;

}

}

.dropdown-menu .dropdown-item {

line-height: 1.5;

}

.navbar-brand {

text-transform: none;

}

.navbar-brand:focus , .navbar-brand:hover{

color: #fff !important;

}

.navbar-brand.navbar-icon-mobile {

display: none;

}

#navbar-main{

transition: background 0s, padding .15s ease;

background-color: var(--toolbar-color) !important;

padding-top: .5rem;

padding-bottom: .5rem;

transition: all .3s ease;

}

#navbar-main.navbar-ontop{

padding-top: 1rem;

padding-bottom: 1rem;

}

body.leftbar-can-headroom.headroom---unpinned #navbar-main{

transform: translateY(-100%);

}

#navbar_search_input_container:not(.open){

cursor: pointer;

}

#navbar_search_input_container .input-group{

box-shadow: none;

}

#navbar_search_input_container:not(.open) .input-group-text{

background: transparent;

color: #fff;

}

#navbar_search_input_container .input-group-text i.fa{

font-size: 16px;

}

#navbar_search_input_container:not(.open) input.form-control{

width: 0 !important;

padding: 0 !important;

background: transparent;

}

#navbar_search_input_container .input-group-prepend {

margin-right: 0px;

}

#navbar_search_input_container .input-group-text{

transition: all .5s cubic-bezier(0.4, 0, 0, 1);

}

#navbar_search_input_container input.form-control {

width: 200px;

transition: all .5s cubic-bezier(0.4, 0, 0, 1);

}

#navbar_search_btn_mobile{

display: none;

}

#navbar_menu_mask{

display: none;

}

.banner{

margin-bottom: 25px;

height: 71.8vh;

overflow: hidden;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

.banner-container{

height: calc(40vh - 120px) !important;

}

.banner-title{

font-size: 1.8em;

vertical-align: middle;

position: absolute;

top: 50%;

transform: translateY(-50%);

width: 100%;

left: 0;

}

.banner-subtitle{

margin-top: 10px;

font-size: 16px;

opacity: .9;

}

.banner-title-inner.typing-effect:after{

content: '';

background: #fff;

width: 2px;

height: 30px;

display: inline-block;

transform: translateX(5px) translateY(5px);

animation: cursor-flash-effect 1s infinite;

}

.banner-title-inner.typing-effect {

transform: translateX(1px) translateY(-50%);

}

@keyframes cursor-flash-effect{

0%{

opacity: 0;

}

15%{

opacity: 1;

}

50%{

opacity: 1;

}

65%{

opacity: 0;

}

100%{

opacity: 0;

}

}

/*左侧栏*/

.leftbar-banner{

/*background: linear-gradient(150deg,#7795f8 15%,#6772e5 70%,#555abf 94%);*/

background: var(--themecolor-gradient);

text-align: center;

border-radius: var(--card-radius) var(--card-radius) 0 0;

}

.leftbar-banner-title{

font-size: 20px;

display: block;

}

.leftbar-banner-subtitle{

margin-top: 15px;

margin-bottom: 8px;

font-size: 13px;

opacity: .8;

display: block;

}

.leftbar-menu{

margin-top: 10px;

margin-left: 0;

margin-right: 0;

padding: 0;

}

.leftbar-menu-item{

height: 36px;

line-height: 36px;

list-style: none;

padding: 0;

position: relative;

}

.leftbar-menu-item:hover > .leftbar-menu-subitem {

opacity: 1;

transform: none;

pointer-events: unset;

}

.leftbar-menu-subitem {

position: absolute;

left: calc(100% + 8px);

top: 0;

background: #fff;

width: max-content;

min-width: 150px;

z-index: 1;

height: unset;

border-radius: 3px;

padding: 6px 0;

opacity: 0;

transform: translateX(-8px);

pointer-events: none;

transition: all .3s ease;

}

.leftbar-menu-subitem:before {

content: '';

width: 8px;

height: calc(100% + 12px);

display: block;

position: absolute;

top: 0;

left: -8px;

}

#leftbar_part1_menu > .leftbar-menu-item > .leftbar-menu-subitem {

left: calc(100% + 12px);

}

#leftbar_part1_menu > .leftbar-menu-item > .leftbar-menu-subitem:before {

width: 12px;

left: -12px;

}

.leftbar-menu-subitem > .leftbar-menu-item:first-child a{

border-radius: 3px 3px 0 0;

}

.leftbar-menu-subitem > .leftbar-menu-item:last-child a{

border-radius: 0 0 3px 3px;

}

.leftbar-menu-item > a{

display: block;

height: 100%;

width: 100%;

margin: 0;

padding: 0 20px;

overflow-wrap: break-word;

word-wrap: break-word;

background-color: transparent;

color: #32325d !important;

text-decoration: none;

outline: none;

cursor: pointer;

font-size: 14px;

transition: background .2s ease-in-out;

}

.leftbar-menu-item > a:hover , .leftbar-menu-item.current > a{

background-color: #f9f9f9;

}

.leftbar-menu-item > a > i{

margin-right: 8px;

width: 15px;

text-align: center;

}

.leftbar-menu-item.leftbar-menu-item-haschildren:after {

content: "\f0da";

font: normal normal normal 14px/1 FontAwesome;

font-size: 14px;

text-rendering: auto;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

position: absolute;

right: 16px;

top: 0;

line-height: 36px;

opacity: .6;

transform: translateY(1px);

transition: all .3s ease;

pointer-events: none;

}

.leftbar-search-button{

padding-top: 0;

transition: all .3s cubic-bezier(0.4, 0, 0, 1);

}

#leftbar_search{

height: 30px;

transform: unset !important;

text-transform: capitalize;

}

html.darkmode #leftbar_search {

background: #555;

color: #eee;

}

html.darkmode.amoled-dark #leftbar_search {

background: #151515;

}

.search-result-list {

list-style: none;

max-height: calc(100vh - 300px);

overflow-y: auto;

margin-top: 30px;

padding-inline-start: 0;

}

.search-result-list > li {

padding: 20px 0;

border-bottom: 1px solid #eee;

}

html.darkmode .search-result-list > li {

border-bottom: 1px solid #666;

}

html.darkmode.amoled-dark .search-result-list > li {

padding: 20px 0;

border-bottom: 1px solid #333;

}

.search-result-list > li > a {

font-size: 22px;

margin-bottom: 10px;

display: block;

}

.search-result-list > li > p {

margin: 0;

}

.search-result-list .search-keyword {

font-style: initial;

font-weight: bold;

}

#leftbar_part2{

margin-top: 10px;

transition: all .3s ease;

}

#leftbar_part2.sticky{

position: fixed;

width: 240px;

top: 80px;

}

body.leftbar-can-headroom.headroom---unpinned #leftbar_part2.sticky{

top: 10px;

}

#leftbar_part2_inner{

max-height: calc(100vh - 110px);

overflow-y: auto;

padding: 10px;

}

#leftbar_part2_inner::-webkit-scrollbar{

width: 5px;

}

#leftbar_part2_inner::-webkit-scrollbar-track{

background: transparent;

}

.sidebar-tab-switcher{

font-size: 13px;

padding: 0 !important;

}

.sidebar-tab-switcher > a{

padding-bottom: 5px;

border-bottom: 1px solid transparent;

transition: border-bottom .2s ease;

}

.sidebar-tab-switcher > a.active{

border-bottom: 1px solid var(--themecolor);

}

html.darkmode .sidebar-tab-switcher > a.active{

border-bottom: 1px solid var(--themecolor-light);

}

#leftbar_overview_author_name{

margin-top: 15px;

font-size: 18px;

}

.site-state {

overflow: hidden;

line-height: 1.4;

white-space: nowrap;

text-align: center;

margin-top: 15px;

}

.site-state-item {

display: inline-block;

border-left: 1px solid #eee;

padding: 0 10px;

}

html.darkmode .site-state-item {

border-left: 1px solid #777;

}

html.darkmode.amoled-dark .site-state-item {

border-left: 1px solid #333;

}

.site-state-item:first-child {

border-left: none !important;

}

.site-state-item > a{

cursor: pointer;

}

.site-state-item-count {

display: block;

text-align: center;

color: #32325d;

font-weight: bold;

font-size: 16px;

}

.site-state-item-name {

font-size: 13px;

color: #525F82;

}

.tag.badge {

font-size: 14px;

text-transform: none;

transition: background .2s ease;

background: #eee;

padding: 5px 10px;

margin-right: 12px;

margin-bottom: 15px;

}

.tag-num {

font-size: 12px;

opacity: .7;

}

.site-author-links {

display: flex;

flex-wrap: wrap;

justify-content: left;

margin-top: 15px;

}

.site-author-links-item {

display: inline-block;

width: 50%;

border-radius: 4px;

margin-top: 5px;

transition: background .2s ease;

background: transparent;

}

.site-author-links-item:hover {

background: #eee;

}

.site-author-links-item > a {

display: block;

width: 100%;

padding: 2px 8px;

font-size: 15px;

color: #32325d !important;

text-align: left;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

.site-friend-links-title {

margin-top: 25px;

border-top: 1px dotted #ccc;

padding-top: 15px;

}

.site-friend-links-ul {

margin-top: 8px;

padding: 3px 0 0;

}

.site-friend-links-item {

margin: 0;

padding: 0;

list-style: none;

margin-bottom: 3px;

}

.site-friend-links-item > a {

max-width: 280px;

box-sizing: border-box;

display: inline-block;

max-width: 100%;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

color: #32325d;

border-bottom: 1px solid #999;

}

#leftbar_announcement {

margin-bottom: 10px;

background: var(--themecolor-gradient);

}

.leftbar-announcement-body {

padding: 15px 1.2em;

padding-bottom: 22px;

}

.leftbar-announcement-title {

font-size: 18px;

}

.leftbar-announcement-content {

font-size: 15px;

line-height: 1.8;

padding-top: 8px;

opacity: .9;

}

#leftbar_tab_tools ul{

list-style: none;

padding: 0;

}

#leftbar_tab_tools ul li {

padding-top: 10px;

padding-bottom: 10px;

border-bottom: #eee solid 1px;

}

html.darkmode #leftbar_tab_tools ul li {

border-bottom: #555 solid 1px;

}

html.darkmode.amoled-dark #leftbar_tab_tools ul li {

border-bottom: #555 solid 1px;

}

#leftbar_tab_tools ul li:first-child {

padding-top: 5px;

}

#leftbar_tab_tools > div > h6:first-child {

font-size: 17px;

text-align: center;

position: relative;

display: block;

width: max-content;

}

#leftbar_tab_tools > div > h6:first-child:after {

content: '';

display: block;

background: var(--themecolor);

width: 30px;

height: 9px;

position: absolute;

left: 0;

bottom: -1px;

border-radius: 10px;

opacity: 0.25;

pointer-events: none;

}

/*底栏*/

#footer{

background: var(--themecolor-gradient);

color: #fff;

width: 100%;

float: right;

margin-bottom: 25px;

text-align: center;

padding: 25px 20px;

line-height: 1.8;

transition: none;

}

#footer a{

color: #fff;

}

/*浮动按钮栏 (回顶等)*/

#float_action_buttons{

position: fixed;

bottom: 35px;

right: 20px;

height: max-content;

height: -moz-max-content;

z-index: 1000;

transition: all .3s ease;

}

#float_action_buttons.fabtns-float-left{

left: 20px;

right: auto;

}

#float_action_buttons.fabtns-float-left .fabtn-show-on-right{

display: none;

}

#float_action_buttons:not(.fabtns-float-left) .fabtn-show-on-left{

display: none;

}

.fabtns-unloaded{

opacity: 0;

pointer-events: none;

}

.fabtn{

width: 42px;

height: 42px;

padding: 0;

overflow: visible;

display: block;

margin-top: 8px;

border: none !important;

transition: all .3s ease;

}

.fabtn:hover{

color: #fff !important;

background-color: var(--themecolor) !important;

}

.fabtn:active{

color: #fff !important;

background-color: var(--themecolor-dark) !important;

}