402 lines
8.6 KiB
CSS
402 lines
8.6 KiB
CSS
/* 首行缩进 */
|
|
/* .post-content p {
|
|
text-indent: 2em;
|
|
} */
|
|
|
|
/* 代码块纯黑色背景 */
|
|
code[class*=" language-"], pre[class*=" language-"]{
|
|
background: #18171d;
|
|
}
|
|
|
|
/* banner 字体图标大小及位置 */
|
|
i.haofont.hao-icon-arrow-right.banner-righticon{
|
|
font-size: 80px;
|
|
}
|
|
|
|
/*span.bannerText{*/
|
|
/* display: block;*/
|
|
/* margin-top: 35px;*/
|
|
/*}*/
|
|
|
|
/* 自我介绍渐变色背景 */
|
|
#aside-content > .card-widget.card-info::before {
|
|
background: linear-gradient(-25deg, var(--heo-main), #031764, var(--heo-main), #67044d);
|
|
background-size: 400%;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
content: '';
|
|
animation: gradient 15s ease infinite;
|
|
}
|
|
|
|
/* 列表样式及缩进 */
|
|
ul li {
|
|
font-size: 18px;
|
|
}
|
|
|
|
#article-container ol li:not(.tab), #article-container ul li:not(.tab){
|
|
/* margin-left: 2em; */
|
|
}
|
|
|
|
#article-container pre > code {
|
|
background: transparent !important;
|
|
/* 解决文章界面代码超长时溢出问题 */
|
|
/* display: block;
|
|
overflow: auto; */
|
|
}
|
|
|
|
/* 导航子菜单闪跳 */
|
|
#nav .menus_items .menus_item .menus_item_child li a{
|
|
padding: 0.3rem 0.5rem;
|
|
}
|
|
|
|
|
|
|
|
/* 通讯录 */
|
|
:root {
|
|
--card-friend-class-desc-bgcolor: #e7e7e7;
|
|
--card-friend-name-color: #000;
|
|
--card-friend-item-hover: var(--text-bg-hover);
|
|
--card-friend-descr-color: #797979
|
|
}
|
|
|
|
[data-theme=dark] {
|
|
--card-friend-class-desc-bgcolor: #111;
|
|
--card-friend-name-color: #fff;
|
|
--card-friend-item-hover: var(--text-bg-hover);
|
|
--card-friend-descr-color: #797979
|
|
}
|
|
|
|
.card-widget.card-friend-link {
|
|
padding: 0.4rem 0.6rem !important;
|
|
}
|
|
|
|
|
|
.card-widget.card-friend-link .card-friend-link-container {
|
|
max-height: 460px;
|
|
overflow: scroll
|
|
}
|
|
|
|
.card-widget.card-friend-link .card-friend-link-container::-webkit-scrollbar {
|
|
display: none
|
|
}
|
|
|
|
.card-widget.card-friend-link summary.card-friend-class-desc {
|
|
padding: 0 15px
|
|
}
|
|
|
|
.card-widget.card-friend-link details.card-friend-class-name[open] summary.card-friend-class-desc {
|
|
position: sticky;
|
|
top: 0;
|
|
background: var(--card-friend-class-desc-bgcolor);
|
|
z-index: 1
|
|
}
|
|
|
|
.card-widget.card-friend-link a.card-friend-item {
|
|
padding: 0 15px;
|
|
height: 60px;
|
|
width: auto;
|
|
display: -webkit-box;
|
|
display: -moz-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: box;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-moz-box-align: center;
|
|
-o-box-align: center;
|
|
-ms-flex-align: center;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
-webkit-box-lines: single;
|
|
-moz-box-lines: single;
|
|
-o-box-lines: single;
|
|
-webkit-flex-wrap: nowrap;
|
|
-ms-flex-wrap: nowrap;
|
|
flex-wrap: nowrap
|
|
}
|
|
|
|
.card-widget.card-friend-link a.card-friend-item:hover {
|
|
background-color: var(--heo-main);
|
|
border-radius: 12px;
|
|
-webkit-transition: all .3s ease-in-out;
|
|
-moz-transition: all .3s ease-in-out;
|
|
-o-transition: all .3s ease-in-out;
|
|
-ms-transition: all .3s ease-in-out;
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.card-widget.card-friend-link img.card-friend-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
margin: 10px 10px
|
|
}
|
|
|
|
.card-widget.card-friend-link .offline-friend-link img.card-friend-avatar {
|
|
filter: grayscale(100%)
|
|
}
|
|
|
|
.card-widget.card-friend-link .card-friend-details {
|
|
width: auto;
|
|
height: 60px;
|
|
display: -webkit-box;
|
|
display: -moz-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: box;
|
|
display: flex;
|
|
-webkit-box-lines: single;
|
|
-moz-box-lines: single;
|
|
-o-box-lines: single;
|
|
-webkit-flex-wrap: nowrap;
|
|
-ms-flex-wrap: nowrap;
|
|
flex-wrap: nowrap;
|
|
-webkit-box-orient: vertical;
|
|
-moz-box-orient: vertical;
|
|
-o-box-orient: vertical;
|
|
-webkit-flex-direction: column;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-webkit-box-pack: center;
|
|
-moz-box-pack: center;
|
|
-o-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
-webkit-justify-content: center;
|
|
justify-content: center;
|
|
-webkit-box-align: start;
|
|
-moz-box-align: start;
|
|
-o-box-align: start;
|
|
-ms-flex-align: start;
|
|
-webkit-align-items: flex-start;
|
|
align-items: flex-start
|
|
}
|
|
|
|
.card-widget.card-friend-link .card-friend-name {
|
|
color: var(--card-friend-name-color)
|
|
}
|
|
|
|
.card-widget.card-friend-link .card-friend-descr {
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
-o-text-overflow: ellipsis;
|
|
text-overflow: ellipsis;
|
|
width: 14em;
|
|
color: var(--card-friend-descr-color)
|
|
}
|
|
/* 通讯录 */
|
|
|
|
|
|
|
|
|
|
|
|
/* 音乐天地 */
|
|
#aside-content .item-headline-music {
|
|
padding-bottom: 0;
|
|
margin-left: 8px;
|
|
margin-top: 15px;
|
|
margin-bottom: 5px;
|
|
font-size: 1em;
|
|
font-weight: 700;
|
|
display: -webkit-box;
|
|
display: -moz-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: box;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-moz-box-align: center;
|
|
-o-box-align: center;
|
|
-ms-flex-align: center;
|
|
-webkit-align-items: center;
|
|
align-items: center
|
|
}
|
|
|
|
#aside-content .item-headline-music span {
|
|
margin-left: 6px
|
|
}
|
|
|
|
#flip-wrapper-card {
|
|
-webkit-perspective: 1000;
|
|
perspective: 1000
|
|
}
|
|
|
|
#flip-wrapper-card {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1
|
|
}
|
|
|
|
#flip-music {
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
transition: cubic-bezier(0, 0, 0, 1.29) .3s
|
|
}
|
|
|
|
#aside-content #flip-wrapper-card #flip-music .msimg {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
background-size: 100%
|
|
}
|
|
|
|
#aside-content #flip-wrapper-card #flip-music .back.msimg {
|
|
display: block;
|
|
-webkit-transform: rotateY(180deg);
|
|
transform: rotateY(180deg);
|
|
box-sizing: border-box;
|
|
background-size: 100%
|
|
}
|
|
|
|
#flip-wrapper-card:hover #flip-music {
|
|
-webkit-transform: rotateY(180deg);
|
|
transform: rotateY(180deg)
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.card-music {
|
|
height: 520px !important
|
|
}
|
|
}
|
|
|
|
.card-music {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-content: center;
|
|
padding: 0 !important;
|
|
cursor: pointer;
|
|
border: none !important;
|
|
height: 405px;
|
|
margin-top: 0 !important;
|
|
background: 0 0 !important
|
|
}
|
|
|
|
/* 音乐天地 */
|
|
|
|
|
|
/* 小板报 */
|
|
#welcome-info {
|
|
overflow: hidden;
|
|
border-radius: 14px;
|
|
--hao-welcome-color: #49B1F5;
|
|
--hao-ip-color: #49B1F5;
|
|
--hao-gl-size: 16px !important;
|
|
}
|
|
#aside-content .card-announcement .item-headline i{
|
|
color: red;
|
|
}
|
|
/* 小板报 */
|
|
|
|
|
|
/* Steam卡片 */
|
|
#aside-content .item-headline-steam {
|
|
padding-bottom: 0;
|
|
margin-left: 8px;
|
|
margin-top: 15px;
|
|
margin-bottom: 5px;
|
|
font-size: 1em;
|
|
font-weight: 700;
|
|
display: -webkit-box;
|
|
display: -moz-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: box;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-moz-box-align: center;
|
|
-o-box-align: center;
|
|
-ms-flex-align: center;
|
|
-webkit-align-items: center;
|
|
align-items: center
|
|
}
|
|
|
|
#aside-content .item-headline-steam span {
|
|
margin-left: 6px
|
|
}
|
|
|
|
|
|
#flip-steam {
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: transform .3s
|
|
}
|
|
|
|
#flip-steam::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 200%;
|
|
background: linear-gradient(to right,transparent,#fff,transparent);
|
|
transform: translateX(-200%);
|
|
transition: transform .5s linear;
|
|
z-index: 1
|
|
}
|
|
|
|
#flip-steam:hover::before {
|
|
transform: translateX(100%) skewX(-60deg)
|
|
}
|
|
|
|
#aside-content #flip-wrapper-card #flip-steam .stimg {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100%;
|
|
z-index: 0
|
|
}
|
|
|
|
#aside-content #flip-wrapper-card #flip-steam .back.stimg {
|
|
display: none
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.card-steam {
|
|
height:130px!important
|
|
}
|
|
}
|
|
|
|
.card-steam {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-content: center;
|
|
padding: 0!important;
|
|
cursor: pointer;
|
|
border: none!important;
|
|
height: 105px;
|
|
margin-top: 0!important;
|
|
background: 0 0!important
|
|
}
|
|
|
|
/* Steam卡片 */
|
|
|
|
/* 分类3D */
|
|
#libCategories .card-info p{
|
|
font-size: 0.9rem;
|
|
font-weight: 400;
|
|
text-align: left;
|
|
letter-spacing: 0.6px;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
#libCategories .card-wrap:hover .card-info:after {
|
|
width: 300%
|
|
}
|
|
|
|
.fa-sharp, .fa-solid{
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-font-smoothing: antialiased;
|
|
display: var(--fa-display,inline-block);
|
|
font-style: normal;
|
|
font-variant: normal;
|
|
line-height: 1;
|
|
text-rendering: auto
|
|
} |