修改侧栏图标颜色

detailed:
1.增加了侧栏中的小板报、最新评论、最近发布、爱发电、广告、文章目录、分类的图标颜色。
2.增加了对侧栏的广告图片鼠标移入图片轻微放大的效果。
3.增加了爱发电API请求失败时的默认显示。
4.修改了侧栏中的标题与图标之间的间距。
5.修改了侧栏中爱发电内容区域的边距。
This commit is contained in:
UPToZ 2024-05-11 17:37:18 +08:00
parent 7f8b310cf7
commit d19c1191ef
11 changed files with 8092 additions and 18 deletions

View File

@ -1,12 +1,11 @@
.timeline {
width: 100%;
height: 20px;
height: 2rem;
background-color: var(--heo-background);
position: relative;
overflow: hidden;
margin-bottom: 20px;
border-radius: 1.5rem;
height: 2.5rem;
}
.progress {

View File

@ -421,6 +421,15 @@ let halo = {
const data = await response.json();
console.log('API Response:', data);
} else {
let powerStar = document.getElementById("power-star");
powerStar.href = GLOBAL_CONFIG.source.power.powerLink
powerStar.innerHTML = `
<div id="power-star-image" style="background-image: url('/themes/theme-hao/assets/images/afadian/afadian.webp')">
</div>
<div class="power-star-body">
<div id="power-star-title">还没有人赞助</div>
<div id="power-star-desc">为爱发电点击赞助</div>
</div>`;
console.error('API Error:', response.status, response.statusText);
}
}
@ -491,7 +500,7 @@ let halo = {
renderer(JSON.parse(data))
} else {
callQuerySponsorApi();
getPower();
// getPower();
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -279,10 +279,37 @@ i.haofont.hao-icon-arrow-right.banner-righticon{
--hao-gl-size: 16px !important;
}
#aside-content .card-announcement .item-headline i{
color: red;
color: palevioletred;
margin-left: -6px;
}
/* 小板报 */
#aside-content .card-ad .item-headline i{
color: orangered;
margin-left: -6px;
}
#aside-content .card-power .item-headline i{
color: mediumpurple;
margin-right: 5px;
}
#aside-content .card-categories .item-headline i{
color: burlywood;
margin-right: 2px;
}
#aside-content .card-toc .item-headline i{
color: green;
}
#aside-content .card-comment .item-headline i{
color: rosybrown;
}
#aside-content .card-article .item-headline i{
color: cornflowerblue;
}
/* Steam卡片 */
#aside-content .item-headline-steam {

View File

@ -2064,7 +2064,7 @@ blockquote footer cite::before {
#aside-content .card-archives ul.card-archive-list,
#aside-content .card-categories ul.card-category-list {
margin: 0px;
margin: 8px 0 0 0;
padding: 0px;
list-style: none;
}
@ -7438,7 +7438,7 @@ span.fund_name {
}
#aside-content .card-widget.card-power .power-charge {
margin-left: auto;
margin-left: 6.4rem;
color: var(--heo-secondtext);
font-size: 14px;
line-height: 1
@ -7491,7 +7491,7 @@ a#power-star {
flex-wrap: nowrap;
justify-content: flex-start;
position: relative;
margin: 12px 0;
margin: 12px 10px;
background: var(--heo-secondbg);
transition: .3s ease-out
}
@ -11557,15 +11557,15 @@ blockquote p {
#article-container .headerlink {
float: right;
opacity: 0.08;
opacity: 0.5;
border-bottom-style: none;
border-bottom: none;
position: relative;
padding: 0px;
border: none;
border-radius: 8px !important;
line-height: 1;
font-size: 1rem;
/* line-height: 1; */
/* font-size: 1rem; */
}
#article-container .headerlink:hover {
@ -18930,4 +18930,10 @@ body[data-type=neodb] .type-button-group button {
.ad-img {
margin: 12px 0 0 0;
border-radius: 8px;
}
.ad-img:hover {
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
transform: scale(1.05)
}

View File

@ -16,8 +16,8 @@
</div>
<div class="card-widget" th:if="${theme.config.sidebar.adbox.adType=='customAd'}">
<div class="item-headline"><i class="haofont hao-icon-bullhorn"></i><span>广告</span></div>
<div class="card-widget card-ad" th:if="${theme.config.sidebar.adbox.adType=='customAd'}">
<div class="item-headline"><i class="haofont hao-icon-fire"></i><span>广告</span></div>
<a th:href="${theme.config.sidebar.adbox.ad_custom.ad_redirect_url}" target="_blank" title="立即前往">
<img class="ad-img" th:src="${theme.config.sidebar.adbox.ad_custom.ad_pic_url}" alt="自定义广告">
</a>

View File

@ -1,5 +1,5 @@
<!-- 最新评论 -->
<div class="card-widget card-recent-post" >
<div class="card-widget card-recent-post card-comment" >
<a th:if="${not #strings.isEmpty(theme.config.sidebar.newcomment.newcommentUrl)}"
th:onclick="pjax.loadUrl([[${theme.config.sidebar.newcomment.newcommentUrl}]])"
title="查看更多"

View File

@ -1,7 +1,7 @@
<!-- 爱发电赞助 -->
<div>
<div class="card-widget card-power">
<div class="item-headline"><i class="haofont hao-icon-aifadian-line"></i><span>爱发电赞助</span>
<div class="item-headline"><i class="haofont hao-icon-aifadian-line"></i><span>爱发电</span>
<a class="power-charge" th:href="${theme.config.sidebar.power.powerLink}" target="_blank" title="赞助博主">赞助
</a>
</div>

View File

@ -1,4 +1,4 @@
<div class="card-widget card-recent-post" th:with='posts = ${postFinder.list(1,theme.config.sidebar.recentPost)},
<div class="card-widget card-recent-post card-article" th:with='posts = ${postFinder.list(1,theme.config.sidebar.recentPost)},
postRandomImg=${#strings.contains(theme.config.layout.postRandomImg,"?") ? theme.config.layout.postRandomImg+"&" : theme.config.layout.postRandomImg+"?"}'>
<div class="item-headline"><i class="haofont hao-icon-eicon_map-2-line1"></i><span>最近发布</span></div>
<div class="aside-list">

View File

@ -1,5 +1,5 @@
<!-- 目录 -->
<div class="card-widget" id="card-toc">
<div class="card-widget card-toc" id="card-toc">
<div class="item-headline">
<i class="haofont hao-icon-bars"></i>
<span>文章目录</span>