/ 175浏览

修改Artalk评论样式

没更新是因为最近都在跑项目,真的把人给累惨了。趁着能摸鱼的时间我把网站相关设置给修改了一下,把暗黑模式给关闭了。恢复默认日间模式,顺便把Artalk的样式作了修改。

这里的样式仅以Halo的Farallon主题为例作修改,其他主题根据自身样式作修改。因Artalk样式优先级高,所以需要增加!important来提高优先级。

/* 评论data*/

.atk-comment>.atk-main>.atk-header .atk-date {
  color: #131313 !important;
  }

/* 评论区页面*/

.artalk, .atk-layer-wrap {
    --at-color-font: #2a2e2e !important;
    --at-color-deep: none !important;
    --at-color-sub: none !important;
    --at-color-grey: none !important;
    --at-color-meta: #697182 !important;
    --at-color-border: none !important;
    --at-color-light: none !important;
    --at-color-bg: none !important;
    --at-color-bg-transl: rgba(30, 34, 36, .95) !important;
    --at-color-bg-grey: #46494e !important;
    --at-color-bg-grey-transl: rgba(8, 8, 8, .95) !important;
    --at-color-bg-light: rgba(29, 161, 242, .1) !important;
    --at-color-main: #0083ff !important;
    --at-color-red: #ff5652 !important;
    --at-color-pink: #fa5a57 !important;
    --at-color-yellow: #ff7c37 !important;
    --at-color-green: #4caf50 !important;
    --at-color-gradient: linear-gradient(180deg, transparent, rgba(30, 34, 36, 1)) !important;
}

/*表情buttom*/

.atk-grp-switcher {
    background-color: var(--farallon-background-white)!important;
}

/* 评论img */

.atk-content img { 
  vertical-align: middle!important;
  background-color: var(--farallon-background-white)!important;
}

/* 表情排列 */
.atk-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px!important;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border-radius: 3px;
    font-size: 15px;
    min-width: 35px!important;
    margin: 1px!important;
}

/* 回复 */
.atk-text-wrap {
    background-color: #c4c4c4 !important;
}

插件也是用的dreamChaser的小屋开发的 https://www.halo.run/store/apps/app-mBoYu

只需要填写相关的参数就能将Artalk嵌入到Halo当中来了,相当省事。