@charset "UTF-8"; /* Grid样式 */ .masonry.grid{display:block;}@media only screen and (min-width:768px){.masonry.grid{-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:0;-moz-column-gap:0;column-gap:0;}.ui.doubling.masonry.grid[class*="three column"] > .column{width:100%!important}}@media only screen and (min-width:500px){.masonry.grid{-webkit-column-count:2;-moz-column-count:2;column-count:2;}}@media only screen and (min-width:992px){.masonry.grid{-webkit-column-count:3;-moz-column-count:3;column-count:3;}}@media only screen and (min-width:1500px){.masonry.grid{-webkit-column-count:3;-moz-column-count:3;column-count:3;}}#uitab{overflow-x:auto!important;overflow-y:hidden;border:none!important;}#uitab::-webkit-scrollbar{height:3px!important;}.ui.secondary.pointing.short.scrolling.menu a.active.item{color:#0076D1!important;}.google_ad{width:100%;max-width:100%;margin:auto;overflow:hidden!important;}.masonry-container{--column-count-small:1;--column-count-medium:2;--column-count-large:3;--column-gap:20px;margin:0 auto;}.masonry-columns{column-gap:var(--column-gap);column-count:var(--column-count-small);column-width:calc(1 / var(--column-count-small) * 100%);}@media only screen and (min-width:640px){.masonry-columns{column-count:var(--column-count-medium);column-width:calc(1 / var(--column-count-medium) * 100%);}}@media only screen and (min-width:800px){.masonry-columns{column-count:var(--column-count-large);column-width:calc(1 / var(--column-count-large) * 100%);}}.masonry-brick img{width:100%;height:auto;margin:var(--column-gap) 0;display:block;}.masonry-brick img:first-child{margin:0 0 var(--column-gap);} /* 随机文章样式 */ .bmore *{margin:0;padding:0;box-sizing:border-box;color:inherit;}.bmore_cards > ul{list-style:none;}.bmore_card + .bmore_card{margin-top:1.5rem;}@supports (display:grid){.bmore_cards > ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));grid-column-gap:1.5rem;grid-row-gap:1.5rem;}.bmore_card + .bmore_card{margin-top:0;}}.bmore_card{border:1px solid;border-radius:0.25rem;display:flex;flex-direction:column;position:relative;}.bmore_card .bmore_text{padding:1rem;flex:1 0 auto;display:flex;flex-direction:column;}.bmore_card p{max-width:60ch;display:inline-block;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis;}.bmore_card a{text-decoration:none;display:inline-block;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis;}.bmore_card a:focus{outline:none;text-decoration:underline;}.bmore_card:focus-within,.bmore_card:hover{box-shadow:0 0 0 0.15rem #0074C8;}.bmore_card:focus-within a:focus{text-decoration:none;}.bmore_card small{display:block;}.bmore_card .bmore_text > * + *{margin-top:0.75rem;}.bmore_card .bmore_text >:last-child{margin-top:auto;padding-top:0.75rem;} /* 工具栏样式 */ .btn-toolbar{background:#364347;width:20px;height:20px;text-align:center;padding:10px;border-radius:6px;display:block;transition:none;}.btn-toolbar > i{color:#02baf2;font-size:16px!important;}.btn-toolbar-primary{background-color:#009dcd;}.btn-toolbar-primary.pressed{background-color:#02baf2;}.btn-toolbar-primary:hover{background-color:#02baf2;}.btn-toolbar-primary > i{color:white;}.btn-toolbar-danger{background-color:#cc0000;}.btn-toolbar-danger.pressed{background-color:#f84545;}.btn-toolbar-danger:hover{background-color:#f84545;}.btn-toolbar-danger > i{color:white;}.btn-toolbar-warning{background-color:#f3bc65;}.btn-toolbar-warning.pressed{background-color:#fad46b;}.btn-toolbar-warning:hover{background-color:#fad46b;}.btn-toolbar-warning > i{color:white;}.btn-toolbar-info{background-color:#e96300;}.btn-toolbar-info.pressed{background-color:#f58410;}.btn-toolbar-info:hover{background-color:#f58410;}.btn-toolbar-info > i{color:white;}.btn-toolbar-success{background-color:#28948c;}.btn-toolbar-success.pressed{background-color:#3eb5ac;}.btn-toolbar-success:hover{background-color:#3eb5ac;}.btn-toolbar-success > i{color:white;}.btn-toolbar-info-o{background-color:#9175bd;}.btn-toolbar-info-o.pressed{background-color:#a88cd5;}.btn-toolbar-info-o:hover{background-color:#a88cd5;}.btn-toolbar-info-o > i{color:white;}.btn-toolbar-light{background-color:#b2c6cd;}.btn-toolbar-light.pressed{background-color:#d6e1e5;}.btn-toolbar-light:hover{background-color:#d6e1e5;}.btn-toolbar-light > i{color:white;}.btn-toolbar-dark{background-color:#364347;}.btn-toolbar-dark.pressed{background-color:#5e696d;}.btn-toolbar-dark:hover{background-color:#5e696d;}.btn-toolbar-dark > i{color:white;}.tool-container{background-color:#5e696d;background-size:100% 100%;border-radius:6px;position:absolute;}.tool-container{margin-left:-15px;}.tool-container.tool-top,.tool-container.tool-bottom{height:40px;border-bottom:0px solid #beb8b8;}.tool-container.tool-top .tool-item,.tool-container.tool-bottom .tool-item{float:left;border-right:0;border-left:0;}.tool-item{height:100%;display:block;text-align:center;padding:10px;transition:none;color:#fff;border-bottom:1px solid gray;}.tool-item:last-child{border-bottom:none;}.tool-item > .icon{color:#fff;}.tool-items a{color:#fff!important;}.toolbar-icons a:hover{color:#fff!important;}.tool-item.selected > .icon,.tool-item:hover > .icon,.tool-item:hover > a{color:white;}.tool-top .tool-item:first-child:hover,.tool-bottom .tool-item:first-child:hover{border-top-left-radius:6px;border-bottom-left-radius:6px;}.tool-top .tool-item:last-child:hover,.tool-bottom .tool-item:last-child:hover{border-top-right-radius:6px;border-bottom-right-radius:6px;}.tool-vertical-top .tool-item:first-child:hover,.tool-vertical-bottom .tool-item:first-child:hover,.tool-right .tool-item:first-child:hover,.tool-left .tool-item:first-child:hover{border-top-left-radius:6px;border-top-right-radius:6px;}.tool-vertical-top .tool-item:last-child:hover,.tool-vertical-bottom .tool-item:last-child:hover,.tool-right .tool-item:last-child:hover,.tool-left .tool-item:last-child:hover{border-bottom-left-radius:6px;border-bottom-right-radius:6px;}.tool-container .arrow{width:0;height:0;position:absolute;border-width:7px;border-style:solid;}.tool-container.tool-top .arrow{border-color:#5e696d transparent transparent;left:50%;bottom:-14px;margin-left:-7px;}.tool-container.tool-bottom .arrow{border-color:transparent transparent #5e696d;left:50%;top:-14px;margin-left:-7px;}.tool-container.tool-left .arrow{border-color:transparent transparent transparent #5e696d;top:50%;right:-14px;margin-top:-7px;}.tool-container.tool-right .arrow{border-color:transparent #5e696d transparent transparent;top:50%;left:-14px;margin-top:-7px;}.toolbar-primary{background-color:#02baf2;}.toolbar-primary.tool-top .arrow{border-color:#02baf2 transparent transparent;}.toolbar-primary.tool-bottom .arrow{border-color:transparent transparent #02baf2;}.toolbar-primary.tool-left .arrow{border-color:transparent transparent transparent #02baf2;}.toolbar-primary.tool-right .arrow{border-color:transparent #02baf2 transparent transparent;}.toolbar-primary .tool-item > .fa{color:white;}.toolbar-primary .tool-item.selected,.toolbar-primary .tool-item:hover{background:#009dcd;color:white;}.toolbar-danger{background-color:#f84545;}.toolbar-danger.tool-top .arrow{border-color:#f84545 transparent transparent;}.toolbar-danger.tool-bottom .arrow{border-color:transparent transparent #f84545;}.toolbar-danger.tool-left .arrow{border-color:transparent transparent transparent #f84545;}.toolbar-danger.tool-right .arrow{border-color:transparent #f84545 transparent transparent;}.toolbar-danger .tool-item > .fa{color:white;}.toolbar-danger .tool-item.selected,.toolbar-danger .tool-item:hover{background:#cc0000;color:white;}.toolbar-warning{background-color:#f3bc65;}.toolbar-warning.tool-top .arrow{border-color:#f3bc65 transparent transparent;}.toolbar-warning.tool-bottom .arrow{border-color:transparent transparent #f3bc65;}.toolbar-warning.tool-left .arrow{border-color:transparent transparent transparent #f3bc65;}.toolbar-warning.tool-right .arrow{border-color:transparent #f3bc65 transparent transparent;}.toolbar-warning .tool-item > .fa{color:white;}.toolbar-warning .tool-item.selected,.toolbar-warning .tool-item:hover{background:#fad46b;color:white;}.toolbar-info{background-color:#e96300;}.toolbar-info.tool-top .arrow{border-color:#e96300 transparent transparent;}.toolbar-info.tool-bottom .arrow{border-color:transparent transparent #e96300;}.toolbar-info.tool-left .arrow{border-color:transparent transparent transparent #e96300;}.toolbar-info.tool-right .arrow{border-color:transparent #e96300 transparent transparent;}.toolbar-info .tool-item > .fa{color:white;}.toolbar-info .tool-item.selected,.toolbar-info .tool-item:hover{background:#f58410;color:white;}.toolbar-success{background-color:#28948c;}.toolbar-success.tool-top .arrow{border-color:#28948c transparent transparent;}.toolbar-success.tool-bottom .arrow{border-color:transparent transparent #28948c;}.toolbar-success.tool-left .arrow{border-color:transparent transparent transparent #28948c;}.toolbar-success.tool-right .arrow{border-color:transparent #28948c transparent transparent;}.toolbar-success .tool-item > .fa{color:white;}.toolbar-success .tool-item.selected,.toolbar-success .tool-item:hover{background:#3eb5ac;color:white;}.toolbar-info-o{background-color:#9175bd;}.toolbar-info-o.tool-top .arrow{border-color:#9175bd transparent transparent;}.toolbar-info-o.tool-bottom .arrow{border-color:transparent transparent #9175bd;}.toolbar-info-o.tool-left .arrow{border-color:transparent transparent transparent #9175bd;}.toolbar-info-o.tool-right .arrow{border-color:transparent #9175bd transparent transparent;}.toolbar-info-o .tool-item > .fa{color:white;}.toolbar-info-o .tool-item.selected,.toolbar-info-o .tool-item:hover{background:#a88cd5;color:white;}.toolbar-light{background-color:#b2c6cd;}.toolbar-light.tool-top .arrow{border-color:#b2c6cd transparent transparent;}.toolbar-light.tool-bottom .arrow{border-color:transparent transparent #b2c6cd;}.toolbar-light.tool-left .arrow{border-color:transparent transparent transparent #b2c6cd;}.toolbar-light.tool-right .arrow{border-color:transparent #b2c6cd transparent transparent;}.toolbar-light .tool-item > .fa{color:white;}.toolbar-light .tool-item.selected,.toolbar-light .tool-item:hover{background:#d6e1e5;color:white;}.toolbar-dark{background-color:#4C4C4C;}.toolbar-dark.tool-top .arrow{border-color:#4C4C4C transparent transparent;}.toolbar-dark.tool-bottom .arrow{border-color:transparent transparent #4C4C4C;}.toolbar-dark.tool-left .arrow{border-color:transparent transparent transparent #4C4C4C;}.toolbar-dark.tool-right .arrow{border-color:transparent #4C4C4C transparent transparent;}.toolbar-dark .tool-item > .fa{color:white;}.toolbar-dark .tool-item.selected,.toolbar-dark .tool-item:hover{background:#414141;color:white;}.animate-standard{-webkit-animation:standardAnimate 0.3s 1 ease;}.animate-flyin{-webkit-animation:rotateAnimate 0.5s 1 ease;}.animate-grow{-webkit-animation:growAnimate 0.4s 1 ease;}.animate-flip{-webkit-animation:flipAnimate 0.4s 1 ease;}.animate-bounce{-webkit-animation:bounceAnimate 0.4s 1 ease-out;}@-webkit-keyframes rotateAnimate{from{transform:rotate(180deg) translate(-120px);opacity:0;}to{transform:rotate(0deg) translate(0px);opacity:1;}}@-webkit-keyframes standardAnimate{from{transform:translateY(20px);opacity:0;}to{transform:translateY(0px);opacity:1;}}@-webkit-keyframes growAnimate{0%{transform:scale(0) translateY(40px);opacity:0;}70%{transform:scale(1.5) translate(0px);}100%{transform:scale(1) translate(0px);opacity:1;}}@-webkit-keyframes rotate2Animate{from{transform:rotate(-90deg);transform-origin:0% 100%;opacity:0;}to{transform:rotate(0deg);opacity:1;}}@-webkit-keyframes flipAnimate{from{transform:rotate3d(2,2,2,180deg);opacity:0;}to{transform:rotate3d(0,0,0,0deg);opacity:1;}}@-webkit-keyframes bounceAnimate{0%{transform:translateY(40px);opacity:0;}30%{transform:translateY(-40px);}70%{transform:translateY(20px);}100%{transform:translateY(0px);opacity:1;}}.hidden{display:none;} /* 归档样式 */ .timeline{position:relative;margin:50px auto;padding:40px 0;width:1000px;box-sizing:border-box;}.timeline:before{content:'';position:absolute;left:50%;width:2px;height:100%;background:#c5c5c5;}.timeline ul{padding:0;margin:0;}.timeline ul li:not(.yearli){list-style:none;position:relative;width:50%;padding:20px 40px;box-sizing:border-box;}.timeline ul .yearli{list-style:none;position:relative;width:50%;padding:20px 40px;box-sizing:border-box;}.timeline ul .yearli:not(:first-child){padding:60px 40px;bottom:-80px;}.timeline ul .yearli:before{content:'';position:absolute;width:20px;height:20px;top:-60px;right:-10px;background-color:#FE5C5A;border-radius:50%;box-shadow:0 0 0 3px #EEA5A4;}.timeline ul .yearli{float:left;text-align:right;clear:both;}.timeline ul li:nth-child(odd):not(.yearli){float:left;text-align:right;clear:both;}.timeline ul li:nth-child(even):not(.yearli){float:right;text-align:left;clear:both;}.timeline.content{padding-bottom:20px;}.timeline ul li:nth-child(odd):not(.yearli):before{content:'';position:absolute;width:10px;height:10px;top:24px;right:-5px;background:rgba(0,33,99,1);border-radius:50%;box-shadow:0 0 0 3px rgba(0,33,99,0.2);}.timeline ul li:nth-child(even):not(.yearli):before{content:'';position:absolute;width:10px;height:10px;top:24px;left:-5px;background:rgba(0,33,99,1);border-radius:50%;box-shadow:0 0 0 3px rgba(0,33,99,0.2);}.timeline ul li h3{padding:0;margin:0;color:rgba(0,33,99,1);font-weight:600;}.timeline ul li p{margin:10px 0 0;padding:0;}.timeline ul li .time h4{margin:0;padding:0;font-size:14px;}.timeline ul .yearli .time{position:absolute;top:-65px;right:-100px;margin:0;padding:8px 16px;background-color:#FE5C5A;color:#fff;border-radius:18px;box-shadow:0 0 0 3px #EEA5A4;}.timeline ul li:nth-child(odd):not(.yearli) .time{position:absolute;top:12px;right:-130px;margin:0;padding:8px 16px;background:rgba(0,33,99,1);color:#fff;border-radius:18px;box-shadow:0 0 0 3px rgba(0,33,99,0.3);}.timeline ul li:nth-child(even):not(.yearli) .time{position:absolute;top:12px;left:-130px;margin:0;padding:8px 16px;background:rgba(0,33,99,1);color:#fff;border-radius:18px;box-shadow:0 0 0 3px rgba(0,33,99,0.3);}.year{background-color:#000!important;}@media(max-width:1000px){.timeline{width:100%;}}@media(max-width:767px){.timeline{width:100%;padding-bottom:0;}.timeline h1{font-size:40px;text-align:center;}.timeline:before{left:20px;height:100%;}.timeline ul li:nth-child(odd):not(.yearli),.timeline ul li:nth-child(even):not(.yearli){width:100%;text-align:left;padding-left:50px;padding-bottom:50px;}.timeline ul li:nth-child(odd):not(.yearli):before,.timeline ul li:nth-child(even):not(.yearli):before{top:-18px;left:15px;}.timeline ul li:nth-child(odd):not(.yearli) .time,.timeline ul li:nth-child(even):not(.yearli) .time{top:-30px;left:50px;right:inherit;}.timeline ul .yearli{width:100%;text-align:left;padding-left:50px;padding-bottom:50px;}.timeline ul .yearli:before{top:-50px;left:10px;}.timeline ul .yearli .time{top:-55px;left:50px;right:inherit;}} .card-header { background-color: #f8f9fa; padding: 15px; border-bottom: 1px solid #eee; display: flex; align-items: center; font-size: 16px; font-weight: bold; color: #333; } .card-header i { margin-right: 10px; } /* 友链新样式 */ .flcard { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; border: 1px solid gray; border-radius: 0.8rem; } .flcard > hr { margin-right: 0; margin-left: 0; } .flcard > .list-group { border-top: inherit; border-bottom: inherit; } .flcard > .list-group:first-child { border-top-width: 0; border-top-right-radius: 0.8rem; border-top-left-radius: 0.8rem; } .flcard > .list-group:last-child { border-bottom-width: 0; border-bottom-right-radius: 0.8rem; border-bottom-left-radius: 0.8rem; } .flcard > .flcard-header + .list-group, .flcard > .list-group + .flcard-footer { border-top: 0; } .flcard-body { flex: 1 1 auto; min-height: 1px; padding: 5px; } .flcard-title { font-size: 1.8rem; font-weight: 500; line-height: 1.5; margin-bottom: 0.5rem; } .flcard-subtitle { font-weight: 400; margin-top: 0.2rem; margin-bottom: 0; } .flcard-text:last-child { margin-bottom: 0; } .flcard-link { font-size: 1rem; font-weight: 500; letter-spacing: 0.0178571em; } .flcard-link:hover { text-decoration: none; } .flcard-link + .flcard-link { margin-left: 1.5rem; } .flcard-header { padding: 10px; margin-bottom: 0; border-bottom: 0; } .flcard-header:first-child { border-radius: 0.8rem 0.8rem 0 0; } .flcard-footer { padding: 10px; border-top: 0; } .flcard-footer:last-child { border-radius: 0 0 0.8rem 0.8rem; } .flcard-header-tabs { border-bottom: 0; } .flcard-img-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 1.25rem; border-radius: 0.8rem; } .flcard-img, .flcard-img-top, .flcard-img-bottom { flex-shrink: 0; width: 100%; } .flcard-img, .flcard-img-top { border-top-right-radius: 0.8rem; border-top-left-radius: 0.8rem; } .flcard-img, .flcard-img-bottom { border-bottom-right-radius: 0.8rem; border-bottom-left-radius: 0.8rem; } .flcard-deck .flcard { margin-bottom: 15px; } @media (min-width: 576px) { .flcard-deck { display: flex; flex-flow: row wrap; margin-right: -15px; margin-left: -15px; } .flcard-deck .flcard { flex: 1 0 0%; margin-right: 15px; margin-bottom: 0; margin-left: 15px; } } .flcard-group > .flcard { margin-bottom: 15px; } @media (min-width: 576px) { .flcard-group { display: flex; flex-flow: row wrap; } .flcard-group > .flcard { flex: 1 0 0%; margin-bottom: 0; } .flcard-group > .flcard + .flcard { margin-left: 0; border-left: 0; } .flcard-group > .flcard:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .flcard-group > .flcard:not(:last-child) .flcard-img-top, .flcard-group > .flcard:not(:last-child) .flcard-header { border-top-right-radius: 0; } .flcard-group > .flcard:not(:last-child) .flcard-img-bottom, .flcard-group > .flcard:not(:last-child) .flcard-footer { border-bottom-right-radius: 0; } .flcard-group > .flcard:not(:first-child) { border-top-left-radius: 0; border-top-left-radius: 0; } .flcard-group > .flcard:not(:first-child) .flcard-img-top, .flcard-group > .flcard:not(:first-child) .flcard-header { border-top-left-radius: 0; } .flcard-group > .flcard:not(:first-child) .flcard-img-bottom, .flcard-group > .flcard:not(:first-child) .flcard-footer { border-bottom-left-radius: 0; } } .flcard-columns .flcard { margin-bottom: 1.5rem; } @media (min-width: 576px) { .flcard-columns { -moz-column-count: 1; column-count: 1; -moz-column-gap: 1.25rem; column-gap: 1.25rem; orphans: 1; widows: 1; } .flcard-columns .flcard { display: inline-block; width: 100%; } } @media (min-width: 768px) { .flcard-columns { -moz-column-count: 2; column-count: 2; -moz-column-gap: 1.25rem; column-gap: 1.25rem; orphans: 1; widows: 1; } } @media (min-width: 992px) { .flcard-columns { -moz-column-count: 2; column-count: 2; -moz-column-gap: 1.25rem; column-gap: 1.25rem; orphans: 1; widows: 1; } } @media (min-width: 1200px) { .flcard-columns { -moz-column-count: 3; column-count: 3; -moz-column-gap: 1.25rem; column-gap: 1.25rem; orphans: 1; widows: 1; } } .accordion { overflow-anchor: none; } .accordion > .flcard { overflow: hidden; } .accordion > .flcard:not(:last-of-type) { border-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .accordion > .flcard:not(:first-of-type) { border-top-right-radius: 0; border-top-left-radius: 0; } .accordion > .flcard > .flcard-header { border-radius: 0; margin-bottom: -1px; } .--flcard-focus { cursor: pointer !important; transition: all 0.1s ease-in-out; } .--flcard-focus:active, .--flcard-focus.active, .--flcard-focus:focus, .--flcard-focus.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); } .--flcard-focus.--flcard-focus-primary:active, .--flcard-focus.--flcard-focus-primary.active, .--flcard-focus.--flcard-focus-primary:focus, .--flcard-focus.--flcard-focus-primary.focus { box-shadow: 0 0 0 0.2rem rgba(118, 19, 94, 0.3); } .--flcard-focus.--flcard-focus-secondary:active, .--flcard-focus.--flcard-focus-secondary.active, .--flcard-focus.--flcard-focus-secondary:focus, .--flcard-focus.--flcard-focus-secondary.focus { box-shadow: 0 0 0 0.2rem rgba(126, 103, 118, 0.3); } .--flcard-focus.--flcard-focus-success:active, .--flcard-focus.--flcard-focus-success.active, .--flcard-focus.--flcard-focus-success:focus, .--flcard-focus.--flcard-focus-success.focus { box-shadow: 0 0 0 0.2rem rgba(145, 190, 111, 0.3); } .--flcard-focus.--flcard-focus-warning:active, .--flcard-focus.--flcard-focus-warning.active, .--flcard-focus.--flcard-focus-warning:focus, .--flcard-focus.--flcard-focus-warning.focus { box-shadow: 0 0 0 0.2rem rgba(251, 139, 35, 0.3); } .--flcard-focus.--flcard-focus-danger:active, .--flcard-focus.--flcard-focus-danger.active, .--flcard-focus.--flcard-focus-danger:focus, .--flcard-focus.--flcard-focus-danger.focus { box-shadow: 0 0 0 0.2rem rgba(155, 3, 31, 0.3); } .--flcard-focus.--flcard-focus-info:active, .--flcard-focus.--flcard-focus-info.active, .--flcard-focus.--flcard-focus-info:focus, .--flcard-focus.--flcard-focus-info.focus { box-shadow: 0 0 0 0.2rem rgba(15, 77, 92, 0.3); } .--flcard-focus.--flcard-focus-light:active, .--flcard-focus.--flcard-focus-light.active, .--flcard-focus.--flcard-focus-light:focus, .--flcard-focus.--flcard-focus-light.focus { box-shadow: 0 0 0 0.2rem rgba(242, 242, 242, 0.3); } .--flcard-focus.--flcard-focus-dark:active, .--flcard-focus.--flcard-focus-dark.active, .--flcard-focus.--flcard-focus-dark:focus, .--flcard-focus.--flcard-focus-dark.focus { box-shadow: 0 0 0 0.2rem rgba(36, 30, 35, 0.3); } .--flcard-cup { height: 130px; width: 100%; border-top-right-radius: 0.8rem; border-top-left-radius: 0.8rem; } .--flcard-smooth-caption { background: rgba(0, 0, 0, 0) linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.98)) repeat scroll 0% 0%; position: absolute; bottom: 0; right: 0; left: 0; padding: 3.5rem 1.5rem 1.5rem 1.5rem; } .--flcard-footer { display: block; margin: 0; padding: 0; border-bottom-right-radius: 0.8rem; border-bottom-left-radius: 0.8rem; } .--flcard-footer-inner { margin: 0; padding: 1.5rem; display: block; font-size: 0.89rem; font-weight: 500; text-transform: uppercase; line-height: 1.5; letter-spacing: 0.0178571em; border-bottom-right-radius: 0.8rem; border-bottom-left-radius: 0.8rem; transition: all 0.2s ease-in-out; } .--flcard-footer-inner:hover { text-decoration: none; } .--flcard-footer-inner:not(:disabled):not(.disabled):active, .--flcard-footer-inner:not(:disabled):not(.disabled).active, .--flcard-footer-inner:focus, .--flcard-footer-inner.focus { background-color: #f8f9fa; outline: 0; } .flcard-avatar { border-radius: 50%; width:111px; height:111px; max-width:111px!important; max-height:111px!important; } .avatar-border { border: 5px solid #fff; } .flcard-radius { border-radius: 0.8rem; } .flcard{transition:.4s} .flcard:hover{border:1px solid #fff;box-shadow:0px 1px 18px 0px #0076D1} #bearsimple-scroll, .page-card{ background-color: #fff; padding: 15px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin-top: 10px; } .comment-card{ background-color: #fff; padding: 15px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin-top: 30px; } .recent-menutree-card { background-color: #fff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin-bottom: 20px; } .card-body { padding: 15px; } .blogger-card { background-color: #fff; border: 1px solid #eee; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 20px; text-align: center; margin: 0 auto; margin-bottom: 20px; max-width: 100%; display: flex; flex-direction: column; gap: 15px; position: relative; /* 确保子元素的定位相对于此容器 */ overflow: hidden; /* 防止顶部背景溢出 */ } .blogger-top-bg { background-image: linear-gradient(135deg, #2c3e50, #bdc3c7); /* 渐变色背景 */ background-size: cover; /* 背景图片自适应 */ background-position: center; /* 背景图片居中 */ height: 100px; /* 背景高度与头像高度一致 */ position: absolute; top: 0; left: 0; right: 0; } .blogger-header { margin-bottom: 0; position: relative; /* 确保头像的定位相对于此容器 */ z-index: 1; /* 确保头像在背景之上 */ } .blogger-avatar { width: 80px; height: 80px; border-radius: 50%; position: relative; top: 40px; /* 将头像向下移动一半的高度 */ border: 3px solid #fff; } [data-theme=dark] .blogger-top-bg{ filter:invert(1) hue-rotate(180deg); } .blogger-name { font-size: 18px; font-weight: bold; color: #333; margin-top: 45px; /* 调整名字的位置 */ } .blogger-bio { font-size: 14px; color: #666; margin-bottom: 0; line-height: 1.5; } .blogger-social { display: flex; justify-content: center; gap: 10px; margin-bottom: 0; flex-wrap: wrap; } .social-icon { color: #666; font-size: 18px; transition: color 0.3s ease; } .social-icon:hover { color: #007bff; } .blogger-stats { display: flex; justify-content: space-around; gap: 10px; margin-top: auto; } .stat-item { text-align: center; } .stat-number { font-size: 18px; font-weight: bold; color: #333; } .stat-label { font-size: 12px; color: #666; } .search-box { margin-bottom: 20px; position: relative; } .search-box input[type="text"] { width: 100%; padding: 10px 40px 10px 10px; border: 1px solid #eee; border-radius: 5px; font-size: 14px; outline: none; transition: border-color 0.3s ease, box-shadow 0.3s ease; background-color: #fafafa; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .search-box input[type="text"]:focus { border-color: #007bff; box-shadow: 0 0 6px rgba(0, 123, 255, 0.1); background-color: #fff; } .search-box i { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); background: none; border: none; color: #999; font-size: 16px; cursor: pointer; transition: color 0.3s ease; } .search-box .prompt{ border-radius:5px!important; } .tree-view { list-style: none; padding-left: 20px; margin: 0; } .tree-node { position: relative; padding: 5px 0; } .toggle-icon { position: absolute; left: -15px; top: 50%; transform: translateY(-50%); cursor: pointer; font-size: 12px; color: #999; } .toggle-icon::before { content: "▶"; /* 默认显示向右箭头 */ } .toggle-icon.open::before { content: "▼"; /* 展开时显示向下箭头 */ } .category-link { color: #333; text-decoration: none; } .category-link:hover { color: #007bff; } .category-count { color: #999; font-size: 12px; margin-left: 5px; } /* 连接线样式 */ .tree-view ul { position: relative; display: none; /* 默认隐藏子分类 */ } .tree-view ul.open { display: block; /* 展开状态的子分类显示 */ } .recent-posts-card { background-color: #fff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin-bottom: 20px; overflow: hidden; } .recent-posts-title { font-size: 16px; font-weight: bold; margin-bottom: 10px; } .recent-posts-list { list-style: none; padding: 0; margin: 0; } .recent-posts-list li { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #eee; } .recent-posts-list li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .recent-posts-list a { color: #333; text-decoration: none; display: block; } .recent-posts-list a:hover { color: #007bff; } .recent-posts-meta { font-size: 12px; color: #666; margin-top: 5px; } .recent-posts-more { display: block; text-align: right; color: #007bff; text-decoration: none; font-size: 12px; margin-top: 10px; } .recent-comments-card { background-color: #fff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin-bottom: 20px; overflow: hidden; } .recent-comments-title { font-size: 16px; font-weight: bold; margin-bottom: 10px; } .recent-comments-list { list-style: none; padding: 0; margin: 0; } .recent-comments-list li { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #eee; } .recent-comments-list li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .recent-comments-author { font-weight: bold; color: #333; } .recent-comments-text { color: #666; font-size: 14px; margin-top: 5px; } .recent-comments-meta { font-size: 12px; color: #999; margin-top: 5px; } .recent-comments-meta-article { font-size: 12px; color: #999; margin-top: 5px; } .recent-comments-meta-article{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } .recent-comments-more { display: block; text-align: right; color: #007bff; text-decoration: none; font-size: 12px; margin-top: 10px; } .tag-cloud-card { background-color: #fff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin-bottom: 20px; overflow: hidden; } .tag-cloud-title { font-size: 16px; font-weight: bold; margin-bottom: 10px; } .tag-cloud-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; /* 标签之间的间距 */ } .tag-cloud-list li { display: inline-block; } .tag-cloud-list a { display: block; padding: 5px 10px; background-color: #f5f5f5; color: #333; text-decoration: none; border-radius: 3px; font-size: 12px; transition: background-color 0.3s ease, color 0.3s ease; } .tag-cloud-list a:hover { background-color: #007bff; color: #fff; } .countdown-card { background-color: #fff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin-bottom: 20px; overflow: hidden; } .countdown-title { font-size: 16px; font-weight: bold; margin-bottom: 15px; } .countdown-item { margin-bottom: 15px; } .countdown-item:last-child { margin-bottom: 0; } .countdown-label { font-size: 14px; color: #333; margin-bottom: 5px; } .countdown-progress { background-color: #f5f5f5; border-radius: 5px; height: 10px; overflow: hidden; position: relative; } .countdown-progress-bar { height: 100%; border-radius: 5px; width: 0; background-color: #007bff; /* 默认颜色 */ background-image: linear-gradient( 45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent ); background-size: 20px 20px; animation: progress-scroll 1s linear infinite; transition: width 0.5s ease; } #year-progress { background-color: #ff7e5f; /* 今年剩余时间颜色 */ } #month-progress { background-color: #6a11cb; /* 本月剩余时间颜色 */ } #day-progress { background-color: #00b09b; /* 今天剩余时间颜色 */ } @keyframes progress-scroll { 0% { background-position: 0 0; } 100% { background-position: 20px 0; } } .countdown-time { font-size: 12px; color: #666; margin-top: 5px; } .sidebar-card { background-color: #fff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin-bottom: 20px; overflow: hidden; } .card-title { font-size: 16px; font-weight: bold; margin-bottom: 10px; } .card-content { list-style: none; padding: 0; margin: 0; } .card-content li { margin-bottom: 5px; } .card-content a { color: #333; text-decoration: none; } .card-content a:hover { color: #007bff; } .card-more { display: block; text-align: right; color: #007bff; text-decoration: none; font-size: 12px; } .prompt{ border-radius:7px!important; } /* 文章卡片容器 */ .pic-article-card { background-color: #fff; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; margin-bottom: 30px; display: flex; flex-direction: row; align-items: stretch; transition: transform 0.3s ease, box-shadow 0.3s ease; max-height: 200px; } .pic-article-card:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); } /* 偶数卡片图片在右侧 */ .pic-article-card:nth-child(even) { flex-direction: row-reverse; } /* 文章封面 */ .pic-article-cover { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; max-height: 200px; min-width: 50%; position: relative; border: none; outline: none; } /* 奇数卡片：图片在左侧，遮罩在右侧 */ .pic-article-card:nth-child(odd) .pic-article-cover::before { right: -1px; } /* 偶数卡片：图片在右侧，遮罩在左侧 */ .pic-article-card:nth-child(even) .pic-article-cover::before { left: -1px; } /* 封面图片 */ .pic-article-cover img { width: 100%; height: 100%; min-width: 100%; min-height: 100%; object-fit: cover; display: block; border: none; outline: none; } /* 文章内容 */ .pic-article-content { flex: 1; padding: 20px; display: flex; flex-direction: column; justify-content: center; max-height: 200px; overflow: hidden; border: none; outline: none; } /* 文章标题 */ .pic-article-title { font-size: 24px; font-weight: bold; margin: 0 0 10px; } .pic-article-title a { color: #333; text-decoration: none; transition: color 0.3s ease; } .pic-article-title a:hover { color: #007bff; } /* 文章摘要 */ .pic-article-excerpt { font-size: 14px; color: #666; line-height: 1.6; margin-bottom: 15px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* 文章元信息 */ .pic-article-meta { font-size: 12px; color: #999; display: flex; gap: 15px; } .pic-meta-item i { margin-right: 5px; } /* 手机端样式 */ @media (max-width: 768px) { .pic-article-card { flex-direction: column; max-height: none; position: relative; /* 确保遮罩相对于卡片定位 */ overflow: hidden; /* 隐藏超出部分 */ } .pic-article-card:nth-child(even) { flex-direction: column; } .pic-article-cover { width: 100%; max-height: 150px; min-width: 100%; position: relative; } .pic-article-content { width: 100%; max-height: none; padding: 15px; position: relative; /* 确保内容在遮罩上方 */ z-index: 2; /* 确保内容在遮罩上方 */ } .pic-article-title { font-size: 20px; position: relative; /* 确保标题在遮罩上方 */ z-index: 3; /* 确保标题在遮罩上方 */ } .pic-article-excerpt { -webkit-line-clamp: 3; } } .simple-article-item { background-color: #fff; border-radius: 8px; border: 1px solid #eee; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 20px; margin-top:10px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; transition: transform 0.3s ease; } .simple-article-item:hover { transform: scale(1.02); } /* 文章标题 */ .simple-article-title { font-size: 20px; font-weight: bold; margin: 0 0 10px; } .simple-article-title a { color: #333; text-decoration: none; transition: color 0.3s ease; } .simple-article-title a:hover { color: #007bff; } /* 文章摘要 */ .simple-article-excerpt { font-size: 14px; color: #666; line-height: 1.6; margin-bottom: 10px; } /* 文章元信息 */ .simple-article-meta { font-size: 12px; color: #999; display: flex; gap: 15px; } .simple-article-meta .meta-item i { margin-right: 5px; } /* 卡片容器 */ .category-card { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin-top:10px; margin-bottom: 20px; } /* 背景图片 */ .card-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* 确保图片覆盖整个区域 */ opacity: 0.3; /* 调整透明度 */ z-index: 1; } /* 内容区域 */ .card-content { position: relative; z-index: 2; padding: 20px; text-align: center; } /* 图标样式 */ .icon { font-size: 2.5rem; margin-bottom: 15px; } /* 分类名称样式 */ .category-name { font-size: 1.5rem; color: #333333; margin-bottom: 10px; } /* 分类介绍样式 */ .category-description { font-size: 1rem; color: #666666; line-height: 1.5; } /* 文章标题 */ .article-title { font-size: 24px; font-weight: 800; /* 更粗的字体 */ margin: 0 0 20px; line-height: 1.2; /* 更好的行高 */ position: relative; display: inline-block; } .article-title::after { content: ''; display: block; width: 100%; height: 4px; background: linear-gradient(90deg, #3498db, #8e44ad); /* 渐变下划线 */ margin-top: 10px; border-radius: 2px; } /* 文章元信息 */ .article-meta { font-size: 14px!important; color: #999; display:block; margin-bottom: 30px; font-style: normal; } .meta-item { display:inline-block; transition: color 0.3s ease; } .meta-item:not(:first-child){ margin-left:8px; } .meta-item:hover { color: #3498db; /* 悬停颜色 */ } .meta-item i { font-size: 14px; } .meta-item a { color: inherit; text-decoration: none; } .meta-item a:hover { text-decoration: underline; } /* 响应式设计 */ @media (max-width: 768px) { .article-title { font-size: 36px; /* 小屏幕下更小的字体 */ } } @media (max-width: 480px) { .article-title { font-size: 28px; } } /* 功能按钮容器 */ .article-actions { position: relative; display: inline-block; margin-bottom: 20px; } /* 主按钮 */ .action-btn { background-color: #fff; border: 1px solid #ddd; border-radius: 8px; font-size: 5px; color: #333; cursor: pointer; transition: background-color 0.3s ease, box-shadow 0.3s ease; display: flex; align-items: center; gap: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .action-btn:hover { background-color: #f9f9f9; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .action-btn i { font-size: 14px; } /* 下拉菜单 */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background-color: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); z-index: 10; min-width: 200px; overflow: hidden; animation: slideDown 0.3s ease; margin-top: 8px; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .dropdown-menu button { display: flex; align-items: center; width: 100%; padding: 10px 16px; font-size: 14px; color: #333; text-align: left; background-color: transparent; border: none; cursor: pointer; transition: background-color 0.3s ease; gap: 8px; } .dropdown-menu button:hover { background-color: #f5f5f5; } .dropdown-menu button i { font-size: 14px; color: #666; width: 16px; text-align: center; } /* 分隔线 */ .dropdown-menu .divider { height: 1px; background-color: #eee; margin: 4px 0; } /* 显示下拉菜单 */ .show { display: block; } .article-navigation { display: flex; justify-content: space-between; /* 将内容分布到两端 */ align-items: center; /* 垂直居中 */ margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee; } /* 导航链接 */ .nav-link { display: flex; align-items: center; text-decoration: none; color: #333; font-size: 14px; transition: color 0.3s ease; max-width: 45%; /* 限制链接的最大宽度 */ } .nav-link:hover { color: #007bff; } /* 上一篇图标 */ .prev-link i { margin-right: 8px; } /* 下一篇图标 */ .next-link i { margin-left: 8px; } /* 导航文字 */ .nav-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 功能按钮容器 */ .article-actions { display: flex; gap: 10px; margin-bottom: 10px; margin-top:-15px; } /* 主按钮 */ .action-btn { background-color: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 10px 12px; font-size: 14px; color: #333; cursor: pointer; transition: background-color 0.3s ease, box-shadow 0.3s ease; display: flex; align-items: center; gap: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .action-btn:hover { background-color: #f9f9f9; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .action-btn i { font-size: 16px; } /* 阅读模式遮罩层 */ .reading-mode-overlay { position: absolute; top: -9999px; left: -9999px; width: 100%; height: 100%; background-color: #fff; color: #333; z-index: 1000000000; overflow-y: auto; overflow-x: hidden; transition: background-color 0.3s ease, color 0.3s ease; } .reading-mode-overlay.show { position: fixed; top: 0; left: 0; } /* 阅读模式内容容器 */ .reading-mode-content { position: relative; width: 90%; max-width: 1000px; margin: 0 auto; padding-top: 60px; text-align: center; transition: all 0.3s ease; filter: none; } /* 关闭阅读模式按钮 */ .exit-reading-mode-btn { position: fixed; margin-top: -40px; right: 10px; z-index: 1001; filter: none; } /* 阅读设置按钮 */ .reading-settings-btn { margin-bottom: 20px; filter: none; } /* 阅读模式设置面板 */ .reading-mode-panel { display: none; background-color: rgba(245, 245, 245, 0.9); border: 1px solid #ddd; border-radius: 8px; padding: 20px; margin-bottom: 20px; animation: fadeIn 0.3s ease; filter: none; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .reading-mode-panel h3 { font-size: 18px; margin: 0 0 16px; color: #333; } .reading-mode-panel .options { display: flex; flex-direction: column; gap: 10px; } .reading-mode-panel button { display: flex; align-items: center; gap: 8px; padding: 10px; font-size: 14px; color: #333; background-color: #fff; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease; filter: none; /* 显式重置 filter */ } .reading-mode-panel button:hover { background-color: #e0e0e0; } .reading-mode-panel button i { font-size: 14px; color: #666; } /* 阅读模式样式 */ .reading-mode { padding: 20px; border-radius: 8px; transition: background-color 0.3s ease, color 0.3s ease, font-size 0.3s ease; filter: none; /* 显式重置 filter */ text-align: left; font-size:16.369px; } .reading-mode img{ border-radius:5px; } /* 背景颜色选项 */ .bg-light { background-color: #fff; color: #333; } .bg-sepia { background-color: #f3e9d2; color: #5a4a42; } .bg-dark { background-color: #333; color: #f5f5f5; } /* 字体大小选项 */ .text-small { font-size: 16.369px; } .text-medium { font-size: 18.82px; } .text-large { font-size: 21.28px; } /* 阅读模式中的文章标题 */ .reading-mode .reading-article-title { font-size: 40px; margin-bottom: 20px; color: inherit; /* 继承阅读模式的文字颜色 */ } /* 阅读模式中的文章元信息 */ .reading-mode .article-meta { font-size: 16px; margin-bottom: 30px; color: inherit; /* 继承阅读模式的文字颜色 */ } .reading-mode .meta-item i { color: inherit; /* 继承阅读模式的文字颜色 */ } .reading-mode hr{ border:0; height:1px; background-image:linear-gradient(to right,rgba(0,0,0,0.1),rgba(0,0,0,0.3),rgba(0,0,0,0.1)); margin:2rem 0; position:relative; } .reading-mode h1, .reading-mode h2, .reading-mode h3, .reading-mode h4, .reading-mode h5, .reading-mode h6 { border-bottom: none; border-left: 4px solid #8f8c8c; padding-left: 12px; margin-left: -8px; padding-bottom: 4px; } /* 文章标题 */ .reading-article-title { font-size: 24px; font-weight: 800; margin: 0 0 20px; line-height: 1.2; position: relative; display:inline-block; } .reading-article-title::after { content: ''; display: block; width: 100%; height: 4px; background: linear-gradient(90deg, #3498db, #8e44ad); /* 渐变下划线 */ margin: 10px auto 0; /* 上下边距 10px，左右自动居中 */ border-radius: 2px; } .checkmark { display: none; /* 默认隐藏 */ margin-left: 8px; /* 与文字的间距 */ color: green; /* 打勾颜色 */ } button.active .checkmark { display: inline; /* 选中时显示 */ } /* 推荐文章容器 */ .recommended-articles { margin-top: 40px; padding-top: 20px; } /* 推荐文章标题 */ .recommended-title { font-size: 24px; font-weight: bold; color: #333; } /* 瀑布流布局 */ .article-masonry { column-count: 3; /* 三列布局 */ column-gap: 20px; /* 列间距 */ } /* 文章项 */ .barticle-item { background-color: #fff; border: 1px solid #eee; border-radius: 8px; padding: 15px 15px 15px 15px; margin-bottom: 20px; /* 文章项之间的间距 */ break-inside: avoid; /* 防止文章项被分割到不同列 */ transition: transform 0.3s ease, box-shadow 0.3s ease; } .barticle-item:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); } /* 文章标题 */ .barticle-title { font-size: 18px; font-weight: bold; color: #333; margin: 0 0 10px; transition: color 0.3s ease; white-space: nowrap; /* 强制不换行 */ overflow: hidden; /* 隐藏超出部分 */ text-overflow: ellipsis; /* 用省略号表示截断的文本 */ width: 100%; /* 确保容器有宽度限制 */ } .barticle-link:hover .barticle-title { color: #007bff; } /* 文章摘要 */ .barticle-excerpt { font-size: 14px; color: #666; line-height: 1.6; margin-top: 10px; margin-bottom: 10px; white-space: nowrap; /* 强制不换行 */ overflow: hidden; /* 隐藏超出部分 */ text-overflow: ellipsis; /* 用省略号表示截断的文本 */ width: 100%; /* 确保容器有宽度限制 */ } /* 文章元信息 */ .barticle-meta { font-size: 12px; color: #999; display: flex; gap: 15px; } .bmeta-item i { margin-right: 5px; } /* 响应式设计 */ @media (max-width: 768px) { .article-masonry { column-count: 2; /* 两列布局 */ } } @media (max-width: 480px) { .article-masonry { column-count: 1; /* 单列布局 */ } .barticle-title { font-size: 16px; } .barticle-excerpt { font-size: 13px; } .barticle-meta { font-size: 11px; gap: 10px; } } .popup-overlay { display: none; /* 初始状态为隐藏 */ position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; /* 只过渡 opacity */ z-index:99999999!important; } /* 弹窗显示时的样式 */ .popup-overlay.active { opacity: 1; /* 透明度变为1 */ } /* 弹窗卡片 */ .popup-card { background-color: #fff; padding: 30px 20px 20px; border-radius: 10px; text-align: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); max-width: 300px; position: relative; transform: scale(0.8); /* 初始缩放为0.8 */ opacity: 0; /* 初始透明度为0 */ transition: transform 0.3s ease, opacity 0.3s ease; /* 过渡效果 */ } /* 弹窗显示时的卡片样式 */ .popup-overlay.active .popup-card { transform: scale(1); /* 缩放变为1 */ opacity: 1; /* 透明度变为1 */ } /* 关闭按钮 */ .popup-close { position: absolute; top: 10px; right: 15px; font-size: 24px; color: #666; cursor: pointer; transition: color 0.3s ease; } .popup-close:hover { color: #000; } /* 二维码图片 */ .popup-qr { width: 100%; max-width: 200px; height: auto; margin: 20px 0; } /* 弹窗中的文字 */ .popup-card p { font-size: 14px; color: #333; margin: 0; } /* 相册列表容器 */ .album-list { display: flex; flex-wrap: wrap; gap: 20px; /* 缩小相册之间的间距 */ padding: 10px; justify-content: center; /* 居中显示 */ position: relative; margin-bottom:20px; } /* 单个相册容器 - 堆叠效果 */ .album { width: 150px; /* 缩小相册宽度 */ background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; position: relative; z-index: 1; } /* 堆叠效果 - 每个相册的偏移 */ .album:nth-child(1) { transform: rotate(3deg) translateY(0); } .album:nth-child(2) { transform: rotate(-2deg) translateY(10px); } .album:nth-child(3) { transform: rotate(4deg) translateY(20px); } .album:nth-child(4) { transform: rotate(-3deg) translateY(30px); } /* 鼠标悬停效果 */ .album:hover { transform: rotate(0deg) translateY(-10px); /* 悬停时恢复水平并上移 */ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); z-index: 10; /* 悬停时置于顶层 */ } /* 相册封面图片 */ img.album-cover{ width: 100%!important; height: 120px!important; /* 缩小封面图片高度 */ object-fit: cover; } /* 相册信息 */ .album-info { padding: 10px; text-align: center; } /* 相册标题 */ .album-title { font-size: 14px; /* 缩小标题字体 */ font-weight: bold; margin: 0 0 5px 0; color: #333; white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 超出部分隐藏 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ } /* 手机端优化 */ @media (max-width: 768px) { .album-list { gap: 20px; /* 缩小间距 */ padding: 10px; } .album { width: 45%; /* 每行显示两个相册 */ max-width: none; /* 取消最大宽度限制 */ margin-bottom: 10px; /* 增加底部间距 */ } .album:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 保持默认阴影 */ } .album-cover { height: 150px; /* 增加封面高度，适应大屏幕 */ } .album-title { font-size: 16px; /* 增大标题字体 */ } } /* 容器样式 */ .github-projects { column-count: 3; /* 分为 3 列 */ column-gap: 20px; /* 列之间的间距 */ } /* 项目卡片样式 */ .project-card { background-color: #fff; border: 1px solid #e1e4e8; border-radius: 8px; padding: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease; display: inline-block; /* 必须设置为 inline-block */ width: 100%; /* 宽度占满列 */ margin-bottom: 20px; /* 卡片之间的间距 */ break-inside: avoid; /* 防止卡片被分割到两列 */ } .project-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } /* 项目名称 */ .project-name { font-size: 1.5rem; margin: 0 0 10px; word-break: break-word; /* 长名称换行 */ } /* 项目描述 */ .project-description { font-size: 1rem; color: #586069; margin: 0 0 15px; flex-grow: 1; /* 描述部分撑开剩余空间 */ word-break: break-word; /* 长描述换行 */ } /* 项目元数据 */ .project-meta { display: flex; flex-direction: column; gap: 15px; margin-bottom: 15px; font-size: 0.9rem; color: #586069; } .project-lan { display: flex; flex-direction: column; gap: 15px; margin-bottom: 10px; font-size: 0.9rem; color: #586069; } .project-language { display: flex; align-items: center; } /* 语言图标样式 */ .project-language i { margin-right: 5px; vertical-align: middle; } .project-stats { display: flex; align-items: center; gap: 15px; /* Star 和 Fork 之间的间距 */ font-size: 0.9rem; color: #586069; } .project-stars, .project-forks { display: flex; align-items: center; gap: 5px; } /* 项目链接 */ .project-link { display: inline-block; padding: 8px 16px; background-color: #eee; color: #000; text-decoration: none; border-radius: 4px; font-size: 0.9rem; transition: background-color 0.2s ease; text-align: center; } .project-link:hover { background-color: #000; color:#fff; } /* 小屏幕（手机） */ @media (max-width: 600px) { .github-projects { column-count: 1; /* 1 列 */ } } /* 中等屏幕（平板） */ @media (min-width: 601px) and (max-width: 900px) { .github-projects { column-count: 2; /* 2 列 */ } } /* 大屏幕（桌面） */ @media (min-width: 901px) { .github-projects { column-count: 3; /* 3 列 */ } } /* 固定在右下角的按钮 */ .fixed-button { position: fixed; right: 20px; width: 50px; height: 50px; border: none; border-radius: 50%; background-color: white; color: #333; font-size: 24px; cursor: pointer; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease; z-index:99999!important; display: flex; align-items: center; justify-content: center; opacity: 0.9; } .fixed-button:hover { transform: translateY(-2px); box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); opacity: 1; } /* 返回顶部按钮位置 */ #back-to-top { bottom: 80px; /* 在设置按钮上方 */ display: none; /* 默认隐藏 */ } /* 设置按钮位置 */ #foot-settings-button { bottom: 20px; } /* 设置面板 */ .foot-settings-panel { position: fixed; right: 20px; bottom: 80px; width: 240px; background: linear-gradient(135deg, #ffffff, #f9f9f9); border: 1px solid #e0e0e0; border-radius: 12px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); display: none; /* 默认隐藏 */ z-index: 10000000!important; transition: transform 0.3s ease, opacity 0.3s ease; } /* 面板头部 */ .foot-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 1px solid #e0e0e0; } .foot-panel-header h3 { margin: 0; font-size: 18px; color: #333; } .foot-close-button { background: none; border: none; font-size: 20px; cursor: pointer; color: #666; transition: color 0.3s ease; } .foot-close-button:hover { color: #333; } /* 面板内容 */ .foot-panel-content { padding: 15px; } .foot-setting-item { display: flex; justify-content: space-between; align-items: center; } .foot-setting-item:not(:last-child):not(.global) { margin-bottom: 20px; } .foot-setting-label { display: flex; align-items: center; font-size: 14px; color: #555; } .foot-setting-label i { font-size: 18px; width: 24px; text-align: center; margin-right: 10px; color: #666; } /* 全球语言选择框 */ .language-select { padding: 5px 10px; border: 1px solid #e0e0e0; border-radius: 6px; background-color: white; color: #333; font-size: 14px; cursor: pointer; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .language-select:hover { border-color: #007bff; } .language-select:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); } .language-buttons { display: flex; gap: 8px; } .language-btn { padding: 6px 12px; border: 1px solid #e0e0e0; border-radius: 6px; background-color: white; color: #333; font-size: 14px; cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .language-btn:hover { border-color: #007bff; color: #007bff; } .language-btn.active { background-color: #007bff; border-color: #007bff; color: white; } /* 生成海报按钮 */ .poster-generator__button { padding: 12px 24px; font-size: 16px; color: #fff; background-color: #007bff; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease; } .poster-generator__button:hover { background-color: #0056b3; } /* 弹窗样式 */ .poster-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); justify-content: center; align-items: center; z-index: 1000; } .poster-modal--active { display: flex; animation: fadeIn 0.3s ease; } .poster-modal__content { background-color: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); overflow: hidden; width: 90%; max-width: 400px; text-align: center; position: relative; padding: 20px; animation: scaleIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scaleIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } .poster-modal__content img { width: 100%; border-radius: 8px; } .poster-modal__button-container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ margin-top: 20px; /* 与上方内容保持间距 */ } /* 下载按钮 */ .poster-modal__button { padding: 10px 20px; font-size: 16px; color: #fff; background-color: #007bff; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease; } .poster-modal__button:hover { background-color: #0056b3; } .poster-modal__close { position: absolute; top: 10px; right: 10px; font-size: 24px; color: #999; cursor: pointer; background-color: rgba(255, 255, 255, 0.8); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; transition: color 0.3s ease, background-color 0.3s ease; } .poster-modal__close:hover { color: #333; background-color: rgba(255, 255, 255, 1); } /* 加载动画 */ .poster-modal__loading { display: none; /* 默认隐藏 */ flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .poster-modal__loading--active { display: flex; /* 显示加载动画 */ } /* 旋转图标 */ .poster-modal__spinner { border: 4px solid #f3f3f3; border-top: 4px solid #007bff; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 加载文字 */ .poster-modal__loading-text { font-size: 16px; color: #333; } /* 海报样式 */ .poster-template { width: 600px; height: 800px; background: linear-gradient(135deg, #f9f9f9, #ffffff); /* 背景渐变 */ border-radius: 1px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); position: fixed; top: -9999px; display: flex; flex-direction: column; } .poster-template__cover { width: 100%; height: 300px; background-size: cover; background-position: center; position: relative; } .poster-template__cover::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; background: linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)); } .poster-template__content { padding: 30px; text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .poster-template__title { font-size: 28px; font-weight: bold; color: #333; margin-bottom: 20px; position: relative; line-height: 1.5em; } .poster-template__title::after { content: ''; display: block; width: 60px; height: 4px; background-color: #007bff; margin: 10px auto; border-radius: 2px; } .poster-template__summary { font-size: 20px; color: #666; line-height: 1.6; margin-bottom: 30px; padding: 0 20px; } .poster-template__info { font-size: 16px; color: #999; margin-bottom: 30px; display: flex; justify-content: center; align-items: center; gap: 10px; } .poster-template__info span { display: flex; align-items: center; gap: 5px; } .poster-template__info span::before { content: '•'; color: #007bff; font-size: 20px; } /* 底部区域 */ .poster-template__footer { display: flex; justify-content: space-between; align-items: center; padding: 20px; background-color: #f9f9f9; border-top: 1px solid #eee; } .poster-template__footer .poster-template__blog-name { font-size: 20px; font-weight: bold; color: #333; display: flex; align-items: center; gap: 10px; } .poster-template__footer .poster-template__blog-name img { height: 50px; /* 图片高度 */ } .poster-template__footer .poster-template__qrcode { text-align: center; } .poster-template__footer .poster-template__qrcode img { width: 100px; height: 100px; } .poster-template__footer .poster-template__qrcode-text { font-size: 14px; color: #666; margin-top: 5px; } .bearsimple-button{ display:none; } .link-post { margin:0 3px 0 3px; color: #3498db; text-decoration: none!important; font-weight: 500; transition: color 0.3s ease, border-bottom 0.3s ease; border-bottom: 2px solid transparent; display: inline; white-space: normal; align-items: center; gap: 5px; } .link-post:hover { color: #e74c3c!important; border-bottom: 2px solid #e74c3c; } .link-post:active { color: #e74c3c; border-bottom: 2px solid #e74c3c; } .link-post:focus { outline: none; box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.5); } .link-post:focus:not(:focus-visible) { box-shadow: none; } .link-post:focus-visible { box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.5); } .link-post .fas { font-size: 0.9em; margin-right:2px; } /* 友情链接卡片容器 */ .friend-link-card { background-color: #fff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin-bottom: 20px; overflow: hidden; } /* 卡片内容 */ .friend-link-card-body { padding: 15px 15px 0 15px; } /* 无友情链接时的提示 */ .empty-state { text-align: center; padding: 20px; } .empty-state svg { width: 100px; height: 100px; margin-bottom: 10px; } .empty-state p { font-size: 14px; color: #666; margin: 0; } /* 友情链接列表 */ .friend-link-list { list-style: none; padding: 0; margin-top:-5px; } .friend-link-list li:not(:last-child) { margin-bottom: 5px; } .friend-link-list a { display: block; padding: 5px; border-radius: 5px; color: #333; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease; } .friend-link-list a:hover { background-color: #f8f9fa; color: #007bff; } .widget{ margin-bottom: 20px!important; } blockquote { position: relative; margin: 2rem auto; padding: 3rem 3rem 2rem 3rem; background: #fff; border-left: 4px solid #4a90e2; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.2s ease; } blockquote:hover { transform: translateY(-2px); } .post-content blockquote::before { content: "\201C"; position: absolute; left: 1rem; top: -1rem; font-size: 4rem; color: #4a90e2; opacity: 0.3; z-index: 1; font-family: Georgia, serif; } .reading-mode blockquote::before { content: "\201C"; position: absolute; left: 1rem; top: 2rem; font-size: 4rem; color: #4a90e2; opacity: 0.3; z-index: 1; font-family: Georgia, serif; } blockquote p { font-size: 1.1rem; color: #333; font-style: italic; margin-bottom: 1rem; } @media (max-width: 768px) { blockquote { padding: 3rem 3rem 2rem 3rem; } blockquote::before { left: 0.5rem; font-size: 3rem; } } .reading-mode img:not(.emoji){max-width:100%;height: auto;margin: 20px 0!important;border-radius:10px;}.reading-mode .imgalt{color:#939393;font-size:13px;margin-top:15px;text-align:center;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} .reading-mode{ line-height: 2rem; } .reading-mode p code{margin:0 5px;padding:0 5px;background:#f8f2f4;color:#b03051;border-radius:5px;font-family:Menlo,Consolas,monospace!important} .archive-list { background: white; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 2rem; } .year-group { margin-bottom: 1.5rem; } .year-header { background: #f8f9fa; padding: 1.2rem; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s; } .year-header:hover { background: #e9ecef; } .year-header.active { background: #007bff; color: white; } .month-group { padding-left: 2rem; margin-top: 1rem; } .month-title { font-size: 1.1rem; color: #666; margin: 1rem 0; padding-bottom: 0.5rem; border-bottom: 2px solid #eee; } .post-list { column-count: 2; column-gap: 1rem; margin-bottom: 1.5rem; } .post-item { padding: 1rem; background: #f8f9fa; border-radius: 6px; transition: transform 0.2s; } .post-item:hover { transform: translateY(-2px); background: #e9ecef; } @media (max-width: 768px) { .post-list { column-count: 1; } .chart-container { padding: 1rem; } } .chart-category-title{ font-size:20px; display:flex; justify-content: center; } .year-title { cursor: pointer; padding: 1rem; background: #e9ecef; border-radius: 5px; margin: 1rem 0; display: flex; justify-content: space-between; align-items: center; word-break: break-all; transition: all 0.3s ease; } .year-title:hover { background: #dee2e6; } .year-title::after { content: "\25BC"; font-size: 0.8em; transition: transform 0.3s ease; } .year-title.collapsed::after { transform: rotate(-90deg); } .post-list { margin-left: 2rem; border-left: 2px solid #dee2e6; padding-left: 1rem; } .post-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; width: 100%; } .post-item { padding: 0.8rem; border-bottom: 1px solid #eee; display: flex; flex-direction: column; align-items: flex-start; transition: all 0.2s ease; break-inside: avoid; } .post-item:hover { transform: translateX(5px); background-color: #f8f9fa; } .post-date { color: #6c757d; font-size: 0.9em; } .archive-loading { text-align: center; padding: 1rem; color: #6c757d; } @media (max-width: 768px) { .post-item { flex-direction: column; align-items: flex-start; } .post-date { margin-top: 0.5rem; } } .archive-category-title{ font-size:20px; display:flex; justify-content: center; margin-bottom:30px; } .year-group:not(:first-child){ margin-top:-10px; } .archived-load-more { text-align: center; margin: 30px 0; } .archived-load-btn { padding: 12px 36px; background: #4a90e2; color: white; border: none; border-radius: 25px; cursor: pointer; transition: all 0.3s ease; font-size: 16px; } .archived-load-btn:hover { background: #357abd; transform: translateY(-2px); box-shadow: 0 3px 12px rgba(0,0,0,0.1); } .archived-load-btn:disabled { background: #95a5a6; cursor: not-allowed; } .tag-cloud { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; } .tag-card { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; background: hsl(var(--hue), 90%, 98%); border: 1px solid hsl(var(--hue), 60%, 90%); border-radius: 8px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; } .tag-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: hsl(var(--hue), 60%, 80%); } .tag-name { color: hsl(var(--hue), 50%, 30%); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%; } .tag-count { background: hsl(var(--hue), 60%, 90%); color: hsl(var(--hue), 50%, 30%); padding: 0.25rem 0.75rem; border-radius: 1rem; font-size: 0.85rem; font-family: monospace; } .load-control { text-align: center; margin: 3rem 0; } .load-btn { padding: 0.8rem 2.5rem; background: #4a90e2; color: white; border: none; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; position: relative; } .load-btn:hover { background: #357abd; transform: scale(1.02); } .load-btn:disabled { background: #a0c1ef; cursor: not-allowed; } @media (max-width: 768px) { .tag-cloud { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; } .tag-card { padding: 0.8rem 1.2rem; } } .donate-modal__mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 100000; } .donate-modal__container { background: white; border-radius: 12px; width: 420px; max-width: 90%; box-shadow: 0 4px 20px rgba(0,0,0,0.15); position: relative; } .donate-modal__header { padding: 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; } .donate-modal__header h3 { margin: 0; font-size: 18px; color: #333; } .donate-modal__close { cursor: pointer; font-size: 24px; color: #999; transition: color 0.2s; } .donate-modal__close:hover { color: #666; } .donate-modal__nav { display: flex; flex-wrap: wrap; /* 允许换行 */ border-bottom: 1px solid #eee; } .donate-tab { flex: 1 1 auto; /* 允许 flex 项缩小和换行 */ text-align: center; padding: 15px; cursor: pointer; color: #666; transition: all 0.2s; border-bottom: 2px solid transparent; min-width: 100px; /* 设置最小宽度，避免过窄 */ } .donate-tab.active { color: #007bff; border-bottom-color: #007bff; } .donate-tab:hover:not(.active) { background: #f8f9fa; } .donate-content { position: relative; min-height: 300px; } .donate-pane { position: absolute; top: 0; left: 0; right: 0; padding: 30px 20px; opacity: 0; visibility: hidden; transition: opacity 0.3s; } .donate-pane.active { opacity: 1; visibility: visible; } .donate-pane img { width: 100%; max-width: 240px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .donate-paypal-link { display: flex; justify-content: center; align-items: center; height: 200px; background: #f8f9fa; border-radius: 8px; text-decoration: none; color: #007bff; transition: all 0.2s; } .donate-paypal-link:hover { background: #e9ecef; } .donate-empty{ display: flex; justify-content: center; align-items: center; height: 200px; background: #f8f9fa; border-radius: 8px; text-decoration: none; color: #007bff; transition: all 0.2s; } .schedule-container { max-width: 100%; margin: 0 auto; background: white; padding: 20px 10px 10px 10px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); word-break: break-all; overflow-x:auto; -webkit-overflow-scrolling: touch; } .schedule-title { text-align: center; color: #2c3e50; margin-bottom: 25px; font-size: 24px; font-weight: 600; } .time-table { width: 100%; min-width: 600px; table-layout: auto; } .time-table th { background-color: #f8f9fa; padding: 12px; text-align: left; border-bottom: 2px solid #e9ecef; color: #495057; } .time-table td { padding: 12px; border-bottom: 1px solid #e9ecef; color: #212529; overflow-x:auto; } .time-column { width: 25%; font-weight: 500; } .time-table tr:nth-child(even) { background-color: #f8f9fa; } .time-table tr:hover { background-color: #f1f3f5; } .custom-confirm-button { background-color: #8F8C8C !important; border-color: #8F8C8C !important; color: #fff !important; } .memo-item { display: flex; gap: 15px; margin-bottom: 20px; } .avatar-container { flex: 0 0 50px; height: 50px; } .avatar { width: 50px; height: 50px; border-radius: 50%; background: #e5e7eb; overflow: hidden; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .memo-card { flex: 1; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 15px; position: relative; min-width: 0; } .memo-card::before { content: ''; position: absolute; left: -8px; top: 15px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid #fff; filter: drop-shadow(-2px 0 2px rgba(0,0,0,0.1)); } .memo-header { display: flex; align-items: baseline; margin-bottom: 8px; } .author-name { font-weight: 600; color: #1a1a1a; margin-right: 10px; font-size: 16px; } .memo-time { color: #999; font-size: 0.85em; } .memo-body { color: #333; line-height: 1.6; word-break: break-word; } .memo-body img { max-width: 100%; border-radius: 8px; margin-top: 10px; } .memo-resources { margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; } .resource-item { margin-top: 10px; } .load-more { display: block; width: fit-content; padding: 12px; background: #fff; border: 1px solid #eee; border-radius: 8px; cursor: pointer; transition: all 0.2s; margin:20px auto 0 auto; } .load-more:hover { background: #f8f8f8; } .memo-body { color: #374151; line-height: 1.75; font-size: 16px; } .memo-body h1 { font-size: 2em; margin: 1.2em 0 0.8em; padding-bottom: 0.3em; border-bottom: 1px solid #e5e7eb; color: #1f2937; } .memo-body h2 { font-size: 1.5em; margin: 1.5em 0 0.8em; color: #1f2937; } .memo-body p { margin: 1em 0; } .memo-body strong { color: #1f2937; font-weight: 600; } .memo-body em { color: #4b5563; font-style: italic; } .memo-body ul, .memo-body ol { padding-left: 1.5em; margin: 1em 0; } .memo-body ul { list-style: none; } .memo-body ol { list-style: decimal; } .memo-body pre { background: #f3f4f6; border-radius: 8px; padding: 1.25em; margin: 1.5em 0; overflow-x: auto; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; border: 1px solid #e5e7eb; } .memo-body code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; background: rgba(156,163,175,0.15); padding: 0.2em 0.4em; border-radius: 4px; color: #3b82f6; font-size: 0.9em; } .memo-body pre code { background: transparent; padding: 0; color: #1f2937; font-size: 0.95em; line-height: 1.5; } .memo-body a { color: #3b82f6; text-decoration: none; border-bottom: 1px solid #bfdbfe; } .memo-body a:hover { color: #2563eb; border-bottom-color: currentColor; } .memo-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 1em 0; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .memo-body blockquote { border-left: 4px solid #e5e7eb; margin: 1.5em 0; padding: 0.5em 1em; color: #4b5563; background: #f8fafc; border-radius: 0 6px 6px 0; } .memo-body table { width: 100%; border-collapse: collapse; margin: 1.5em 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .memo-body th, .memo-body td { padding: 0.75em; border: 1px solid #e5e7eb; text-align: left; } .memo-body th { background: #f3f4f6; font-weight: 600; } .memo-body tr:nth-child(even) { background: #f8fafc; } .memo-body hr { border: none; border-top: 1px solid #e5e7eb; margin: 2em 0; } .memo-body .code-toolbar, .memo-body .code-toolbar:before{ all: unset!important; } .memo-location { margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; display: flex; align-items: center; gap: 8px; color: #666; font-size: 14px; } .location-icon { width: 18px; height: 18px; background: url('data:image/svg+xml;utf8,'); } .location-text { display: flex; gap: 6px; align-items: baseline; } .emoji-reaction{ margin-top:8px; } :root { --rank1-bg: linear-gradient(135deg, #ffd700 0%, #ffb347 100%); --rank2-bg: linear-gradient(135deg, #c0c0c0 0%, #a8a8a8 100%); --rank3-bg: linear-gradient(135deg, #cd7f32 0%, #b87333 100%); --normal-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --dark-text: #e2e8f0; } .readers-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.5rem; padding: 2rem; max-width: 1200px; margin: 0 auto; } .reader-card { background: white; border-radius: 15px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; align-items: center; position: relative; } .reader-card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); } .reader-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); margin-bottom: 1rem; } .reader-name { font-size: 1.1rem; color: #2d3748; font-weight: 600; margin-bottom: 0.5rem; max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } .reader-stats { background: var(--normal-bg); color: white; padding: 0.3rem 1rem; border-radius: 20px; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; } [data-theme=dark] .reader-stats{ filter:invert(1) hue-rotate(180deg); } [data-theme=dark] .reader-card.top-1::after{ filter:invert(1) hue-rotate(180deg); } [data-theme=dark] .reader-card.top-2::after{ filter:invert(1) hue-rotate(180deg); } [data-theme=dark] .reader-card.top-3::after{ filter:invert(1) hue-rotate(180deg); } .reader-card.top-1 { transform: scale(1.05); z-index: 3; } .reader-card.top-1 .reader-stats { background: var(--rank1-bg); } .reader-card.top-1::after { content: "🥇"; position: absolute; top: -10px; right: -10px; font-size: 1.8rem; } .reader-card.top-2 { transform: scale(1.03); z-index: 2; } .reader-card.top-2 .reader-stats { background: var(--rank2-bg); } .reader-card.top-2::after { content: "🥈"; position: absolute; top: -10px; right: -10px; font-size: 1.6rem; } .reader-card.top-3 { transform: scale(1.01); z-index: 1; } .reader-card.top-3 .reader-stats { background: var(--rank3-bg); } .reader-card.top-3::after { content: "🥉"; position: absolute; top: -10px; right: -10px; font-size: 1.4rem; } @media (max-width: 768px) { .readers-wall { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; padding: 1rem; } .reader-avatar { width: 60px; height: 60px; } .reader-name { font-size: 1rem; max-width: 100%; } .reader-card.top-1::after, .reader-card.top-2::after, .reader-card.top-3::after { font-size: 1.2rem; top: -8px; right: -8px; } } @media (max-width: 480px) { .readers-wall { grid-template-columns: repeat(2, 1fr); } .reader-card { padding: 1rem; } .reader-stats { font-size: 0.8rem; padding: 0.3rem 0.8rem; } }