小修小改了一波 css,考慮到可能不是所有人都喜歡新的風格,所以另寫一篇新的文章來記錄。本 css 配置源於 bridgg 大佬和 enpitsulin 大佬的所分享的配置,感謝兩位大佬的配置,這是 bridgg 大佬的配置地址:https://birdgg.me/xlog-cutom-css , 這是 enpitsulin 大佬的配置地址:https://gist.github.com/enpitsuLin/d90409c48e1465f1eeb702ec2cc8824e 。 ⚠️因為我自己也是個菜鳥,所以混合了兩個大佬的配置以後肯定會寫的有點亂,所以大佬輕噴
PS:2023 年 6 月 9 號更新了對手機端的適配
🖥️最終效果展示#
◻️PC 淺色模式#
◼️PC 深色模式#
◻️手機淺色模式#
◼️手機深色模式#
👨🏻💻代碼分享:#
@import "https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css";
@import "https://s1.hdslb.com/bfs/static/jinkela/long/font/medium.css";
html{
font-family: 'HarmonyOS_Medium';
}
html {
--theme-color: #afc5ff;
}
html.dark {
--theme-color: #afc5ff;
--grey-0: #c9cbff24;
--grey-1: #302d411c;
--grey-2: #1818184f;
--grey-3: #444;
--grey-4: #666;
--grey-5: #aaa;
--grey-6: #ccc;
--grey-7: #ddd;
--grey-8: #eee;
--grey-9: #f7f7f7;
--grey-1-a7: rgba(34, 34, 34, .7);
--grey-1-a5: rgba(34, 34, 34, .5);
--grey-1-a3: rgba(34, 34, 34, .3);
--grey-1-a0: rgba(34, 34, 34, 0);
--grey-9-a1: rgba(51, 51, 51, .1);
--grey-2-a0: rgba(54, 54, 54, 0);
--color-pink-light: #322d31;
--color-cyan-light: #2d3230;
--color-red: rgba(237, 118, 137, .9);
--color-pink: rgba(241, 139, 179, .8);
--color-orange: rgba(240, 163, 135, .8);
--color-yellow: #ffe175;
--color-green: #86c59d;
--color-aqua: #97d3d6;
--color-blue: #9cd0ed;
--color-purple: #cfacc5;
--color-grey: #c3c8ca;
--body-bg-shadow: #000;
--box-bg-shadow: #000;
--text-color: var(--grey-5);
--header-text-color: var(--grey-9);
--navi-color: #00000050;
}
:root {
--sidebar-width: 20rem;
--theme-color: #89b4fa !important;
--font-fans: 'SF Compact Rounded', 'PingFang SC', 'Microsoft YaHei', Lato, sans-serif;
--header-height: max(50vh, 450px);
--grey-0: #ccd0da57;
--grey-1: #fdfdfd;
--grey-2: #f7f7f7;
--grey-3: #eff2f3;
--grey-4: #ccc;
--grey-5: #999;
--grey-6: #666;
--grey-7: #333;
--grey-8: #222;
--grey-9: #000;
--grey-1-a0: rgba(253, 253, 253, 0);
--grey-1-a7: rgba(253, 253, 253, .7);
--grey-1-a5: rgba(253, 253, 253, .5);
--grey-1-a3: rgba(253, 253, 253, .3);
--grey-9-a1: rgba(0, 0, 0, .1);
--grey-9-a5: rgba(0, 0, 0, .5);
--grey-2-a0: rgba(247, 247, 247, 0);
--color-pink-light: #ffe6fa;
--color-cyan-light: #e3fdf5;
--color-red: #e9546b;
--color-pink: #ed6ea0;
--color-orange: #ec8c69;
--color-yellow: #eab700;
--color-green: #0a7426;
--color-aqua: #3e999f;
--color-blue: #38a1db;
--color-purple: #9d5b8b;
--color-grey: #869194;
--color-red-a1: rgba(233, 84, 107, .1);
--color-red-a3: rgba(233, 84, 107, .3);
--color-pink-a3: rgba(237, 110, 160, .3);
--color-pink-light-a3: rgba(255, 230, 250, .3);
--color-pink-light-a5: rgba(255, 230, 250, .5);
--color-pink-light-a7: rgba(255, 230, 250, .7);
--body-bg-shadow: var(--grey-2);
--box-bg-shadow: var(--grey-9-a1);
--text-color: var(--grey-7);
--header-text-color: var(--grey-0);
--navi-color: #ffffff50;
}
@media screen and (max-width: 1024px) {
.xlog-post-toc {
display: none !important;
}
}
.xlog-site-info{
background-color: transparent;
}
*, :after, :before {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: var(--grey-0);
}
.xlog-header{
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
overflow: hidden;
box-shadow: 0 0.25rem 1rem 0.3125rem #0000003b;
}
.xlog-posts h3{
border-left:3px solid #fab487;
padding-left: 10px;
}
.xlog-post-meta {
border-left:3px solid #9ed899;
padding-left: 10px;
}
.xlog-post-excerpt{
border-left:3px solid #769ede;
padding-left: 10px;
}
.xlog-site-patron span{
color: #ffffff80;
}
.xlog-post-title{
border-left: 3px solid #f28ca7;
padding-left: 10px;
}
.xlog-post-content h2{
border-left: 3px solid #eba0ad;
padding-left: 10px;
}
.xlog-post-content h3{
border-left: 3px solid #ead4a5;
padding-left: 10px;
}
.xlog-site-name {
color: #fff;
text-shadow: 0 0 7px #ffffff30, 0 0 10px #ffffff30, 0 0 21px #fff, 0 0 42px #7287fd30, 0 0 82px #7287fd30, 0 0 92px #7287fd30, 0 0 102px #7287fd30, 0 0 151px #7287fd30;
font-size: 35px;
}
.xlog-site-description{
color: #fff;
}
.text-stone-400{
color: #ee832f;
}
.xlog-site-navigation{
/* padding: 10px 20px; */
border-radius: 25px;
background-color: var(--navi-color);
backdrop-filter: blur(50px);
}
.xlog-site-navigation-item{
color: #fff;
}
.xlog-site-navigation-item span{
margin-left: 10px;
margin-right: 10px;
}
.xlog-site-followings{
word-wrap: break-word;
}
.xlog-site-navigation-item-active{
color: #000;
background-color: #b5e8e0;
border-radius: 25px;
backdrop-filter: blur(50px);
}
.xlog-site-navigation-item-active::after{
display: none;
}
.xlog-site-more-out button{
margin: 3px;
backdrop-filter: blur(50px);
}
.xlog-site-more-out button i{
background-color: #ffffff80;
}
.xlog-site-more-out button svg{
fill: #ffffff80;
}
.xlog-site-more-menu i {
background-color: #ffffff80;
}
main {
background: linear-gradient(to top, var(--grey-0) 0, var(--grey-1) 20%) no-repeat top;
box-shadow: 0 0.25rem 1rem 0.3125rem #0000003b;
padding-bottom: 3.5rem;
border-radius: 20px;
}
.xlog-posts {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.xlog-post:nth-child(odd) {
flex-direction: row-reverse;
}
.xlog-posts>.xlog-post:nth-child(even) .xlog-post-cover {
margin-right: auto;
margin-left: 1.5rem;
-webkit-clip-path: polygon(0 0%, 100% 0%, 100% 100%, 8% 100%);
clip-path: polygon(0 0%, 100% 0%, 100% 100%, 8% 100%);
border-radius: 0 0.625rem 0.625rem 0;
}
.xlog-post {
display: flex;
width: calc(100% - 2rem);
min-width: calc(100% - 2rem);
border-radius: 0.5rem;
box-shadow: 0 0.625rem 1.875rem -0.9375rem var(--box-bg-shadow);
transition: all .2s ease-in-out 0s;
height: 14rem;
margin: 1rem;
margin-top: 1rem !important;
padding: 0;
background-color: transparent;
}
.xlog-post:hover {
box-shadow: 0 0 2rem var(--box-bg-shadow);
background-color: transparent;
}
.xlog-post .xlog-post-cover {
width: 50%;
height: 100%;
margin: 0;
clip-path: polygon(0 0, 92% 0%, 100% 100%, 0% 100%);
}
.xlog-posts .xlog-post>.xlog-post-cover>span img {
width: 100%;
height: 14rem;
transition: all .5s;
}
.xlog-post .xlog-post-cover img:hover {
transform: scale(1.1) rotate(2deg)
}
.xlog-post>div:nth-of-type(1) {
position: relative;
width: 50%;
height:100%;
padding: 2rem;
perspective: 62.5rem;
justify-content: space-around;
}
.font-medium span{
color: #ffffff50;
}
/* post */
.prose :not(pre)>code {
color: var(--theme-color);
border-radius: 0.3rem;
border: 0.0625rem solid rgba(0,0,0,.1);
background-color: var(--grey-0);
padding: 0.2rem 0.3rem;
overflow-wrap: break-word;
word-wrap: break-word;
}
.prose blockquote {
border-radius: 0.1875rem;
padding: .625rem 1.25rem;
border-left: 0.25rem solid var(--theme-color);
font-size: 90%;
background-color: var(--grey-2);
margin: 1.25rem 0;
}
.prose ol {
counter-reset: counter;
}
.prose li {
list-style: none;
position: relative;
}
.prose ol li:before {
counter-increment: counter;
content: counter(counter);
position: absolute;
width: 1.4em;
height: 1.4em;
border-radius: 50%;
text-align: center;
font-size: .8em;
line-height: 1.4;
top: 0.5em;
left: -1.8em;
background: var(--theme-color);
color: rgba(var(--tw-colors-i-gray-100), 1);
cursor: pointer;
outline: 2px solid #797acc;
outline-offset: 1px;
}
.prose li::before{
outline: 2px solid #89b4fa;
outline-offset: 1px;
}
.prose ul li:before {
content: "";
position: absolute;
width: 0.5em;
height: 0.5em;
border-radius: 50%;
top: 0.75em;
left: -1em;
}
.prose .table-wrapper {
border: none !important;
border-radius: 0 !important;
}
.prose table {
border-collapse: collapse;
border-spacing: 0;
font-size: .875em;
margin: 0 0 1.25rem;
width: 100%;
overflow: auto;
}
.prose table tbody tr:nth-child(2n-1) {
background: none !important;
}
.prose table th,
td {
border: 0.0625rem solid var(--border-color);
border-bottom: 0.1875rem solid var(--border-color);
padding: 0.5rem;
padding-bottom: 0.625rem;
text-align: left;
vertical-align: middle;
}
.prose table th {
font-weight: 700;
text-align: center;
}
.prose table td {
border-bottom-width: 0.0625rem;
}
.spoiler {
filter: blur(8px);
transition: filter .5s;
}
.spoiler:hover {
filter: blur(0px);
}
.dark .info {
--note-border: rgba(85, 98, 132, 0.8);
--note-bg: rgba(48, 49, 50, 0.8);
--note-text: rgba(109, 164, 219, 0.8);
--note-hover: rgba(39, 127, 214, 0.8);
}
.info {
--note-border: #8fa4dc;
--note-bg: #f1f9ff;
--note-text: #1d4974;
--note-hover: #1d5fa0;
}
.note {
background: var(--note-bg, var(--grey-2));
color: var(--grey-6);
border-left: 0.25rem solid var(--note-border, var(--grey-4));
font-size: .875em;
--primary-color: var(--note-text);
border-radius: 0.1875rem;
margin: 1rem 0;
padding: 1rem;
position: relative;
padding-left: 1rem;
}
.dark .error {
--note-border: rgba(146, 107, 115, 0.8);
--note-bg: rgba(50, 48, 48, 0.8);
--note-text: rgba(239, 38, 79, 0.8);
--note-hover: rgba(168, 49, 72, 0.8);
}
.error {
--note-border: #f4b3c1;
--note-bg: #fff2f5;
--note-text: #cc0f35;
--note-hover: #f14668;
}
.dark .success {
--note-border: rgba(97, 116, 88, 0.8);
--note-bg: rgba(50, 50, 48, 0.8);
--note-text: rgba(128, 200, 129, 0.8);
--note-hover: rgba(41, 95, 42, 0.8);
}
.success {
--note-border: #a3c293;
--note-bg: #fcfff5;
--note-text: #2c662d;
--note-hover: #3b883c;
}
.xlog-site-description{
font-size: 0.8rem;
background-color: var(--navi-color);
padding: 10px;
border-radius: 10px;
color: #fff;
}
.xlog-site-follow-count{
background-color: var(--navi-color);
padding: 10px;
border-radius: 10px;
color: var(--grey-7);
}
.xlog-site-follow-count span{
color: #ffffff;
}
.xlog-site-follow-count button{
color: #ffffff80;
display:inlin;
}
.xlog-post-toc span{
color: var(--grey-8);
}
/* phone */
@media (max-width: 767px) {
.xlog-header{
border-radius: 10px;
margin: 10px;
padding-bottom: 10px;
}
.xlog-site-navigation-item-active{
color: #000;
}
.xlog-deprecated-class{
margin-left: 10px;
margin-right: 10px;
}
.font-medium span{
color: #222222;
}
.xlog-post {
flex-direction: column-reverse !important;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
max-height: -webkit-fit-content;
max-height: -moz-fit-content;
max-height: fit-content;
}
.xlog-post .xlog-post-cover {
width: 100%;
height: 14rem;
margin: auto;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
border-radius: 0.625rem 0.625rem 0 0;
}
.xlog-posts>.xlog-post:nth-child(even) .xlog-post-cover {
width: 100%;
margin: auto;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%);
border-radius: 0.625rem 0.625rem 0 0;
}
.xlog-post>div:nth-of-type(1) {
width: 100%;
padding: 10px;
}
main {
max-width: 500px;
}
}
@media screen and (min-width: 1024px) {
.xlog-post-area:has(.xlog-post-toc) {
margin-right: 20vw;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
:root {
--sidebar-width: 16rem;
}
.xlog-site-follow-button button{
width: 75px;
}
.xlog-site-follow-count{
font-size: 12px;
}
.xlog-site-followings{
margin-left: 2px;
}
.xlog-post-area,
div:has(> * > button[aria-label='toggle chain info']) {
padding-right: 2rem;
}
}
@media (min-width: 768px) {
.medium-zoom-image--opened {
z-index: 1001;
}
.medium-zoom-overlay {
z-index: 1000;
}
.xlog-page:has(button[aria-label="toggle chain info"][aria-expanded='false']) .xlog-post-area {
min-height: calc(100vh - 124px);
}
.xlog-page:has(button[aria-label="toggle chain info"][aria-expanded='true']) .xlog-post-area {
min-height: calc(100vh - 324px);
}
.xlog-post:focus {
box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
}
.xlog-header {
position: fixed;
left: 0;
height: 100vh;
width: var(--sidebar-width);
z-index: 100;
}
div:has(> .xlog-site-navigation) {
order: 1;
}
div:has(> .xlog-site-info) {
order: 2;
padding: 0;
}
.xlog-header>div:nth-child(2)>div:first-child {
display: none;
}
.xlog-header>div:nth-child(2)>div:last-child {
margin-top: 0.5rem;
margin-bottom: 2rem;
flex-direction: column;
}
.xlog-header>div:nth-child(2)>div:last-child>div:last-child {
margin-top: 1rem;
}
.xlog-header .xlog-site-info {
flex-direction: column;
}
.xlog-site-info>span {
margin-bottom: 1rem;
}
.xlog-site-info>span+div {
margin: 0 !important;
width: 100%;
text-align: center;
}
.xlog-site-info>span+div>div.flex:first-child {
flex-direction: column;
}
.xlog-site-info>span+div>div.flex:first-child>* {
margin-bottom: 1rem;
}
.xlog-site-name+div.flex {
flex-direction: row-reverse;
margin: 0;
gap: 1rem;
}
.xlog-site-name+div.flex>* {
margin: 0 !important;
}
div:has(> .xlog-site-patron) {
flex-direction: column;
}
.xlog-site-description {
order: 3;
}
.xlog-site-patron {
order: 2;
margin-top: 0.2rem !important;
margin-left: 0 !important;
}
.xlog-post-tags a{
border: 1.5px solid var(--grey-0);
border-radius: 5px;
padding-left: 10px;
padding-right: 10px;
background: rgba(37, 39, 57, 0.6);
color: #fff;
font-size: 14px;
}
.xlog-post-area {
margin-left: calc(1rem + var(--sidebar-width));
margin-right: 1rem;
max-width: unset;
}
section.xlog-blockchain-info {
margin-left: calc(1rem + var(--sidebar-width));
margin-right: 1rem;
max-width: unset;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: var(--sidebar-width);
z-index: 1000;
}
footer>div {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
justify-content: center !important;
flex-direction: column-reverse;
align-items: center;
}
footer>div>div {
width: 100%;
text-align: center;
margin-left: 0 !important;
margin-top: 0.75rem !important;
}
footer>div>div:nth-child(2) {
display: flex !important;
justify-content: center;
}
footer>div>div:nth-child(2)>* {
margin-right: 0.5rem !important;
margin-left: 0.5rem !important;
}
footer>div>button {
margin: 0 !important;
}
}