blog/themes/Ying/static/css/mywaline.css

:root{--waline-font-size: 1rem;--waline-white: #fff;--waline-light-grey: #999;--waline-dark-grey: #666;--waline-theme-color: #27ae60;--waline-active-color: #2ecc71;--waline-color: #444;--waline-bg-color: #fff;--waline-bg-color-light: #f8f8f8;--waline-bg-color-hover: #f0f0f0;--waline-border-color: #ddd;--waline-disable-bg-color: #f8f8f8;--waline-disable-color: #000;--waline-code-bg-color: #282c34;--waline-bq-color: #f0f0f0;--waline-avatar-size: 3.25rem;--waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13);--waline-badge-color: #3498db;--waline-badge-font-size: 0.75em;--waline-info-bg-color: #f8f8f8;--waline-info-color: #999;--waline-info-font-size: 0.625em;--waline-border: 1px solid var(--waline-border-color);--waline-avatar-radius: 50%;--waline-box-shadow: none}[data-waline]{font-size:var(--waline-font-size);text-align:start}[dir=rtl] [data-waline]{direction:rtl}[data-waline] *{box-sizing:content-box;line-height:1.75}[data-waline] p{color:var(--waline-color)}[data-waline] a{position:relative;display:inline-block;color:var(--waline-theme-color);text-decoration:none;word-break:break-word;cursor:pointer}[data-waline] a:hover{color:var(--waline-active-color)}[data-waline] img{max-width:100%;max-height:400px;border:none}[data-waline] hr{margin:.825em 0;border-style:dashed;border-color:var(--waline-bg-color-light)}[data-waline] code,[data-waline] pre{margin:0;padding:.2em .4em;border-radius:3px;background:var(--waline-bg-color-light);font-size:85%}[data-waline] pre{overflow:auto;padding:10px;line-height:1.45}[data-waline] pre::-webkit-scrollbar{width:6px;height:6px}[data-waline] pre::-webkit-scrollbar-track-piece:horizontal{-webkit-border-radius:6px;border-radius:6px;background:rgba(0,0,0,.1)}[data-waline] pre::-webkit-scrollbar-thumb:horizontal{width:6px;-webkit-border-radius:6px;border-radius:6px;background:var(--waline-theme-color)}[data-waline] pre code{padding:0;background:rgba(0,0,0,0);color:var(--waline-color);white-space:pre-wrap;word-break:keep-all}[data-waline] blockquote{margin:.5em 0;padding:.5em 0 .5em 1em;border-inline-start:8px solid var(--waline-bq-color);color:var(--waline-dark-grey)}[data-waline] blockquote>p{margin:0}[data-waline] ol,[data-waline] ul{margin-inline-start:1.25em;padding:0}[data-waline] input[type=checkbox],[data-waline] input[type=radio]{display:inline-block;vertical-align:middle;margin-top:-2px}.wl-btn{display:inline-block;vertical-align:middle;min-width:2.5em;margin-bottom:0;padding:.5em 1em;border:1px solid var(--waline-border-color);border-radius:.5em;background:rgba(0,0,0,0);color:var(--waline-color);font-weight:400;font-size:.75em;line-height:1.5;text-align:center;white-space:nowrap;cursor:pointer;user-select:none;transition-duration:.4s;touch-action:manipulation}.wl-btn:hover,.wl-btn:active{border-color:var(--waline-theme-color);color:var(--waline-theme-color)}.wl-btn:disabled{border-color:var(--waline-border-color);background:var(--waline-disable-bg-color);color:var(--waline-disable-color);cursor:not-allowed}.wl-btn.primary{border-color:var(--waline-theme-color);background:var(--waline-theme-color);color:var(--waline-white)}.wl-btn.primary:hover,.wl-btn.primary:active{border-color:var(--waline-active-color);background:var(--waline-active-color);color:var(--waline-white)}.wl-btn.primary:disabled{border-color:var(--waline-border-color);background:var(--waline-disable-bg-color);color:var(--waline-disable-color);cursor:not-allowed}.wl-loading{text-align:center}.wl-loading svg{margin:0 auto}.wl-comment{position:relative;display:flex;margin-bottom:.75em}.wl-close{position:absolute;top:-4px;inset-inline-end:-4px;padding:0;border:none;background:rgba(0,0,0,0);line-height:1;cursor:pointer}.wl-login-info{max-width:80px;margin-top:.75em;text-align:center}.wl-logout-btn{position:absolute;top:-10px;inset-inline-end:-10px;padding:3px;border:none;background:rgba(0,0,0,0);line-height:0;cursor:pointer}.wl-avatar{position:relative;width:var(--waline-avatar-size);height:var(--waline-avatar-size);margin:0 auto;border:var(--waline-border);border-radius:var(--waline-avatar-radius)}@media(max-wid

/*
waline.min.css的自定义增添
waline.min.css：https://unpkg.com/@waline/client@2.15.8/dist/waline.css
官方文档：https://waline.js.org/reference/client/style.html

增加的CSS在末尾
*/

/**************** 我添加的CSS *********************/
/* 评论区动图 */
/* 然而我并不懂确切的含义，参数是乱调的 */
.wl-editor {
    background-image: url(../image/zhuangzhuang_comment_trans.gif);
    background-size: 25%;
    background-repeat: no-repeat;
    background-position: calc(100% - 20px) bottom;
    background-color: rgba(255, 255, 255, 0);
    resize: vertical;
}
.wl-editor:focus{
    background-position-x: 800px;
    background-position-y: 1000px;
    transition: all 0.2s ease-in-out 0s;
}

/********** 评论区输入提醒 ****************/
/* 感谢Leonus大佬指点迷津！大佬博客：https://b.leonus.cn/ */

.wl-header {
    overflow: visible;
}
.wl-header-item {
    position: relative;
}

/* 调整wl-editor */

.wl-editor {
    min-height: 6.75em!important;
    margin: 0!important;
}

/* merci end */

.wl-header-item:nth-child(1):before {
    content: '请填写您的昵称,本项必填哈';
}

.wl-header-item:nth-child(2):before {
    content: '请填写您的邮箱,强烈推荐QQ邮箱';
}

.wl-header-item:nth-child(3):before {
    content: '填写您的博客🔗,您也可以任性不填';
}

.wl-header-item:focus-within::before{
    display: block;
}

/* 主内容区 */
.wl-header-item::before {
    /* 先隐藏起来 */
    display: none;
    /* 绝对定位 */
    position: absolute;
    /* 向上移动60像素 */
    top: -31px;
    /* 文字强制不换行，防止left:50%导致的文字换行 */
    white-space: nowrap;
    /* 圆角 */
    border-radius: 10px;
    /* 距离左边50% */
    left: 50%;
    /* 然后再向左边挪动自身的一半，即可实现居中 */
    transform: translate(-50%);
    /* 填充 */
    padding: 0px 18px;
    background: #000;
    color: #fff;
}

/* 新版本中waline字体怎么都变小了？ */

.wl-header input{
    font-size: 0.8rem
}

/* 调整评论区的css样式 */
.wl-content p{
    margin: 5px 0px 5px 0px;
}

.wl-card .wl-content {
    margin-bottom: .5em!important;
}

.wl-content>p{
    display: none;
}

.wl-card .wl-head {
    line-height: 2!important;
}