github
/
halo-theme-hao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

顶部信息栏按钮UI优化

This commit is contained in:
1152958806@qq.com 2023-11-08 23:32:33 +08:00
parent d91477082e
commit bc50ca3f24
2 changed files with 83 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
templates/assets/zhheo/zhheoblog.css
View File

@ -9688,9 +9688,25 @@ span.recent-post-top-text {
display: none;
}
#post-meta .post-meta-date {
#post-meta .post-meta-date,#post-meta .post-meta-author {
opacity: .6;
margin-right: .8rem
margin-right: 0.8rem;
}
#post-info #post-meta a.post-meta-pv,
#post-info #post-meta a.post-meta-commentcount,
#post-info #post-meta a.post-meta-editor {
color: var(--heo-white);
display: flex;
align-items: center;
padding: 8px;
}
#post-info #post-meta a.post-meta-pv:hover,
#post-info #post-meta a.post-meta-commentcount:hover,
#post-info #post-meta a.post-meta-editor:hover{
opacity: 1;
background: var(--heo-white-op)
}
@ -10666,17 +10682,23 @@ a.extend.prev {
color: var(--heo-white);
opacity: 0.8;
margin-right: 8px;
padding: 0 8px 0 4px;
border-radius: 12px;
display: flex;
align-items: center;
flex-direction: row
}
#post-firstinfo .post-meta__tags:hover {
color: var(--heo-white);
opacity: 1;
background: var(--heo-white-op)
}
span.post-meta-categories {
background-color: var(--heo-white-op);
padding: 0 0.5rem;
border-radius: 8px;
border-radius: 12px;
line-height: 32px;
height: 32px;
transition: 0.3s;
@ -10706,6 +10728,12 @@ span.post-meta-categories:hover a.post-meta-categories {
margin-left: 1rem;
}
.meta-firstline .tag_share .post-meta__tag-list {
display: flex;
flex-direction: row;
align-items: center
}
#post-firstinfo .meta-firstline {
display: flex;
align-items: center;
@ -10731,7 +10759,7 @@ a.post-meta-original {
padding: 0 0.5rem;
font-size: 0.7rem;
margin: auto;
border-radius: 8px;
border-radius: 12px;
font-weight: bold;
height: 32px;
line-height: 32px;
@ -10743,7 +10771,6 @@ a.post-meta-original {
a.post-meta-original:hover {
color: var(--heo-main) !important;
background: var(--heo-white) !important;
border-radius: 8px !important;
}
.meta-avatar img:hover {
@ -10849,14 +10876,8 @@ span.post-meta-pv-cv {
/* 微信公众号同步 */
span.post-meta-wechat {
margin-right: 0.8rem;
margin-right: 10px;
opacity: 0.6;
transition: 0.3s;
cursor: pointer;
}
.post-meta-wechat:hover {
opacity: 1;
}
span.post-meta-position {
@ -10912,20 +10933,9 @@ span.post-meta-position {
opacity: 0.6;
}
.post-meta-pv {
.post-meta-pv,.post-meta-commentcount,.post-meta-editor {
opacity: 0.6;
margin-right: 0.8rem;
}
.post-meta-commentcount {
opacity: 0.6;
cursor: pointer;
transition: 0.3s;
margin-right: 0.8rem;
}
.post-meta-commentcount:hover {
opacity: 1;
margin-right: 2px
}
#twikoo-count,#ArtalkCount {
@ -10940,6 +10950,9 @@ span.post-meta-position {
.el-textarea .el-input__count {
color: var(--heo-secondtext) !important;
-webkit-user-select: none;
bottom: 8px!important;
right: 12px!important
}
.post-meta-commentcount i {
@ -10955,7 +10968,7 @@ span.post-meta-position {
}
.inline-image a:hover {
background: none !important;
background: 0 0!important;
box-shadow: none !important;
}
@ -11005,12 +11018,16 @@ span.post-meta-position {
text-decoration: none;
color: var(--heo-fontcolor);
line-height: 1;
border-radius: 12px
}
#post-info #post-meta a:hover {
text-decoration: none;
color: var(--heo-blue);
border-radius: 12px
color: var(--heo-white)
}
#post-info #post-meta i {
line-height: 1
}
/* 文章标题前图标 */
@ -13328,7 +13345,18 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
}
}
#post .tag_share .post-meta__tag-list {
display: flex;
padding: 0;
width: 100%;
flex-wrap: wrap;
flex-direction: row
}
#post .tag_share .post-meta__tag-list a {
margin-bottom: 8px;
margin-right: 8px
}
#page .tag-cloud-list a {
color: var(--heo-fontcolor) !important;
@ -13341,6 +13369,7 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
-webkit-transform-style: preserve-3d;
border: var(--style-border-always);
box-shadow: var(--heo-shadow-border);
align-items: center
}
#page .tag-cloud-list a:hover {

55
templates/post.html
View File

@ -58,17 +58,9 @@
<h1 class="post-title" th:text="${post.spec.title}"></h1>
<div id="post-meta">
<div class="meta-secondline">
<span class="post-meta-wechat" data-flag-title="文章作者" title="文章作者">
<span class="post-meta-author" data-flag-title="文章作者" title="文章作者">
<i class="haofont hao-icon-zuozhe post-meta-icon"></i>[[${post.owner.displayName}]]
</span>
<span class="post-meta-date">
<i class="haofont hao-icon-calendar-days post-meta-icon"></i>
<time th:attr="datetime=${#dates.format(post.spec.publishTime, 'yyyy-MM-dd')}"
th:text="${#dates.format(post.spec.publishTime,'yyyy/MM/dd')}"
th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd HH:mm:ss')}">
</time>
</span>
<span class="post-meta-wordcount"
th:with="wordCount = ${#strings.length(post.content.content)}">
<i class="haofont hao-icon-file-word post-meta-icon" title="字数"></i>
@ -79,7 +71,13 @@
<span class="post-meta-label">阅读耗时:</span>
<span>[[${wordCount / 400}]] 分钟</span>
</span>
<span class="post-meta-date">
<i class="haofont hao-icon-calendar-days post-meta-icon"></i>
<time th:attr="datetime=${#dates.format(post.spec.publishTime, 'yyyy-MM-dd')}"
th:text="${#dates.format(post.spec.publishTime,'yyyy/MM/dd')}"
th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd HH:mm:ss')}">
</time>
</span>
<span th:with="syncStatus=${#strings.isEmpty(#annotations.get(post, 'sync_status')) ? '未同步': #annotations.get(post, 'sync_status')}"
class="post-meta-wechat" th:title=" ${pluginFinder.available('plugin-platforms-sync') && syncStatus == '同步更新文章成功' ? '该文章已在公众号中更新' : '该文章在博客首发'}">
<th:block th:if="${!pluginFinder.available('plugin-platforms-sync') || syncStatus != '同步更新文章成功'}">
@ -89,33 +87,32 @@
<th:block th:if="${pluginFinder.available('plugin-platforms-sync') && syncStatus == '同步更新文章成功'}">
<i class="haofont hao-icon-weixin1 post-meta-icon"></i>公众号同步
</th:block>
</span>
<span class="post-meta-pv" data-flag-title="热度" title="热度">
<a class="post-meta-pv" data-flag-title="热度"
title="热度" >
<i class="haofont hao-icon-fire post-meta-icon"></i>
<span class="post-meta-label">热度:</span>
<span id="visit" th:text="${post.stats.visit}"></span>
</span>
<span th:if="${post.spec.allowComment && #strings.contains('Twikoo,Artalk,commentWidget',theme.config.comments.use)}" class="post-meta-commentcount"
onclick="heo.scrollTo('#post-comment');" title="评论数">
</a>
<a th:if="${post.spec.allowComment && #strings.contains('Twikoo,Artalk,commentWidget',theme.config.comments.use)}"
class="post-meta-commentcount" data-flag-title="评论数"
title="评论数"
href="#post-comment">
<i class="haofont hao-icon-comments post-meta-icon"></i>
<span class="post-meta-label">评论:</span>
<a href="#post-comment">
<span th:if="${#strings.equals(theme.config.comments.use, 'commentWidget')}"
id="comment-count" th:text="${post.stats.comment}"></span>
<span th:if="${#strings.equals(theme.config.comments.use, 'Twikoo')}"
id="twikoo-count"></span>
<span th:if="${#strings.equals(theme.config.comments.use, 'Artalk')}"
id="ArtalkCount"></span>
</a>
</span>
<span class="post-meta-commentcount" sec:authorize="isAuthenticated()"
data-flag-title="编辑文章"
title="编辑文章"
th:attr="onclick='javascript:window.open(\''+ '/console/posts/editor?name='+${post.metadata.name}+'&returnToView=true\''+ ',' +'\'_self'+'\')'">
<span th:if="${#strings.equals(theme.config.comments.use, 'commentWidget')}"
id="comment-count" th:text="${post.stats.comment}"></span>
<span th:if="${#strings.equals(theme.config.comments.use, 'Twikoo')}"
id="twikoo-count"></span>
<span th:if="${#strings.equals(theme.config.comments.use, 'Artalk')}"
id="ArtalkCount"></span>
</a>
<a class="post-meta-editor" sec:authorize="isAuthenticated()" data-flag-title="编辑文章"
title="编辑文章"
th:attr="onclick='javascript:window.open(\''+ '/console/posts/editor?name='+${post.metadata.name}+'&returnToView=true\''+ ',' +'\'_self'+'\')'">
<i style="margin-top: 2px;" class="haofont hao-icon-bianji post-meta-icon"></i>
<span>编辑</span>
</span>
</a>
</div>
</div>