外观
handsome博客自定义css
约 815 字大约 3 分钟
themehandsomecss
2025-06-27
用于记录使用 handsome博客 博客的 CSS 样式改造
handsome博客自定义css
使用新拟物设计风格(ps:假装),效果图:
/*background-color: #FF683C;*/
/*======*/
:not(.theme-dark) #aside {
background: #E0E0E0;
color: #000000;
font-weight: bold;
}
:not(.theme-dark) #rightAside {
background: #E0E0E0;
}
:not(.theme-dark)#header {
box-shadow: 2px 2px 30px #afafaf, -10px -10px 38px #fff
}
:not(.theme-dark)#header_left {
background: #E0E0E0;
}
:not(.theme-dark)#header_right {
color: #000000;
background: #E0E0E0;
}
:not(.theme-dark)#alllayout {
color: #000000;
background: #E0E0E0;
box-shadow: 19px 19px 38px #afafaf, -10px -10px 38px #fff;
}
.bg-light .lter, .bg-light.lter {
border-radius: 12px 12px 12px 12px;
background: #E0E0E0;
box-shadow: inset 5px 5px 10px #a8a8a8,
inset -5px -5px 10px #ffffff;
}
:not(.theme-dark)#post-panel {
border-radius: 12px 12px 12px 12px;
background: #E0E0E0;
box-shadow: inset 5px 5px 10px #a8a8a8,
inset -5px -5px 10px #ffffff;
}
/*:not(.theme-dark).skt-loading{*/
/* border-radius: 12px 12px 12px 12px;*/
/* background: #E0E0E0;*/
/* box-shadow: inset 5px 5px 10px #a8a8a8,*/
/* inset -5px -5px 10px #ffffff;*/
/*}*/
:not(.theme-dark).list-group-item {
background: #E0E0E0;
}
:not(.theme-dark) li.box-shadow-wrap-normal {
border-radius: 10px;
background: #E0E0E0;
box-shadow: inset 5px 5px 10px #d0d0d0,
inset -5px -5px 10px #f0f0f0;
}
.badge {
background-color: #254e77;
color: #fff;
font-weight: bold;
}
#tag_cloud-2 > div > a {
background-color: #254e77;
color: #fff;
font-weight: bold;
}
:not(.theme-dark).input-group {
border-radius: 16px;
background: #E0E0E0;
box-shadow: inset 11px 11px 24px #d5d5d5,
inset -11px -11px 24px #ebebeb;
}
:not(.theme-dark).single-post {
color: #4c4948;
background: #f2f2f2;
font-weight: bold;
box-shadow: 19px 19px 38px #afafaf, -10px -10px 38px #fff;
}
:not(.theme-dark).single-post:hover {
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .15)
}
:not(.theme-dark).index-post-title {
margin-bottom: 0.3rem;
color: #1f2d3d;
font-size: 1.72em;
font-weight: bolder;
line-height: 1.4;
}
:not(.theme-dark).summary {
color: #4c4948;
}
:not(.theme-dark).meta-value {
color: #858585;
font-weight: bolder;
}
:not(.theme-dark).text {
color: #858585;
}
:not(.theme-dark).text-muted {
color: #858585;
font-weight: bolder;
}
:not(.theme-dark).indexWords {
color: #858585;
}
:not(.theme-dark)#comment {
border-radius: 12px 12px 12px 12px;
background: #E0E0E0;
color: #000 !important;
font-weight: bolder !important;
box-shadow: inset 5px 5px 10px #a8a8a8,
inset -5px -5px 10px #ffffff;
}
.secret_comment_textarea {
border-color: #999 !important;
color: #000 !important;
font-weight: bolder !important;
background: #E0E0E0 !important;
}
:not(.theme-dark).OwO-logo {
color: #2e2e2e;
font-weight: bolder;
background: #E0E0E0;
}
:not(.theme-dark).breadcrumb {
box-shadow: 19px 19px 38px #afafaf;
background: linear-gradient(145deg, #cacaca, #fff);
}
.breadcrumb > li + li:before {
padding: 0 5px;
color: #232222;
content: "/\00a0";
}
p {
color: #4c4948;
font-weight: bold;
}
#text::marker {
color: #4c4948;
font-weight: bold;
}
:not(.theme-dark).entry-title {
font-weight: bolder;
}
.vditor-copy svg {
color: #fff;
width: 20px !important;
height: 20px !important;
}
/*.small-scroll-bar::-webkit-scrollbar {*/
/*}*/
.small-scroll-bar::-webkit-scrollbar-thumb {
background-color: #254e77;
}
.small-scroll-bar::-webkit-scrollbar-track-piece {
background: #e2e2e2;
}
#post-content blockquote {
background: rgba(73, 177, 245, 0.1);
border-left: 3px solid #254e77 !important;
}
#support_author {
background: #f47466;
color: white;
font-weight: bold;
}
:not(.theme-dark)#author {
border-radius: 12px 12px 12px 12px;
background: #E0E0E0;
color: #000 !important;
font-weight: bolder !important;
box-shadow: inset 5px 5px 10px #a8a8a8,
inset -5px -5px 10px #ffffff;
}
:not(.theme-dark)#mail {
border-radius: 12px 12px 12px 12px;
background: #E0E0E0;
color: #000 !important;
font-weight: bolder !important;
box-shadow: inset 5px 5px 10px #a8a8a8,
inset -5px -5px 10px #ffffff;
}
:not(.theme-dark)#url {
border-radius: 12px 12px 12px 12px;
background: #E0E0E0;
color: #000 !important;
font-weight: bolder !important;
box-shadow: inset 5px 5px 10px #a8a8a8,
inset -5px -5px 10px #ffffff;
}
#post-content h1, #post-content h2 {
background: linear-gradient(to bottom, transparent 60%, rgba(37, 78, 119, 0.27) 35%) no-repeat;
width: auto;
display: inline;
}
/*#post-content pre code {*/
/* display: block;*/
/* overflow-x: auto;*/
/* position: relative;*/
/* margin: 0;*/
/* padding-left: 50px;*/
/*}*/
/*pre code {*/
/* position: relative;*/
/* display: block;*/
/* overflow-x: auto;*/
/* margin: 4.4px 0 4px 1px;*/
/* padding: 0;*/
/* max-height: 500px;*/
/* padding-left: 3.5em*/
/*}*/
p code {
color: #f47466 !important;
background: rgba(27, 31, 35, 0.05) !important;
font-weight: bolder !important;
}
.mac_dark code {
background: #212121 !important;
color: #eeeeee;
font-weight: bolder;
}
.tip.share {
border-left-color: #f66;
background: #ffe6e6;
color: #f66;
}
.tip.share:before {
background: #f66;
content: "\0040";
}