日主题多语言切换样式美化

温馨提示: 本文最后更新于 2026-01-09 04:52:38,某些文章具有时效性,若有错误或已失效,请在下方留言或联系一点点

日主题RiPro V5正式版9.5之后加入了多语言切换,但是样式有点简约。让AI写了个自定义样式,稍微美化一下。

将代码复制粘贴到主题设置-基础设置-自定义CSS样式代码里边保存就行。

/* Notion 风格多语言切换器 - 纯图标按钮版(仅下拉菜单显示语言) */
#translate.language-selector {
    display: inline-flex;
    align-items: center;
    position: relative;
    vertical-align: middle;
    line-height: normal;
}

.translateSelectLanguage {
    text-align: left;
    /* 核心1:压缩按钮宽度至仅容纳图标(可微调:38-42px) */
    width: 40px !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: transparent !important; /* 强制隐藏文字(兜底) */
    height: 32px;
    /* 核心2:调整内边距,仅保留图标空间(左右各8px,上下0) */
    padding: 0 8px !important;
    margin: 0;
    background-color: transparent;
    border: 1px solid rgba(55, 53, 47, 0.16);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    /* 亮色模式图标(深色)- 保留原有图标,位置居中 */
    background-image: 
        url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2337352f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"),
        url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2337352f'%3e%3cpath d='M12.87 15.07l-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.02-.03zm10.95 2.15L19 10.5h-1.81l-4.83 6.72h1.9l.99-1.44h4.49l.98 1.44h1.9l-.8-1.15zM15.74 14.4l1.52-2.19 1.52 2.19h-3.04z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center, left 8px center;
    background-size: 12px 12px, 18px 18px;
    /* 核心3:隐藏按钮内所有文字(无需伪元素,直接缩进) */
    text-indent: -9999px;
    position: relative;
    /* 确保按钮是方形,适配图标 */
    box-sizing: border-box;
}

/* 移除之前的缩写伪元素(关键:彻底隐藏文字) */
.translateSelectLanguage::after {
    content: none !important;
}

/* 保留hover交互效果(适配纯图标按钮) */
.translateSelectLanguage:hover {
    background-color: rgba(55, 53, 47, 0.08);
    border-color: rgba(55, 53, 47, 0.24);
}

/* 保留focus交互效果(适配纯图标按钮) */
.translateSelectLanguage:focus {
    background-color: white !important;
    border-color: #2eaadc;
    box-shadow: 0 0 0 2px rgba(46, 170, 220, 0.2);
}

/* 核心4:恢复下拉菜单选项的正常显示(取消所有文字隐藏) */
.translateSelectLanguage option {
    color: #37352f !important;
    padding: 8px 12px !important;
    background: #fff !important;
    text-indent: 0 !important; /* 恢复文字显示 */
    font-size: 14px !important;
}

/* ********** 深色模式适配(纯图标按钮)********** */
[data-bs-theme="dark"] .translateSelectLanguage {
    color: transparent !important; /* 兜底隐藏文字 */
    border-color: rgba(247, 246, 243, 0.2) !important;
    background-color: rgba(31, 41, 55, 0.8) !important;
    /* 深色模式图标(白色) */
    background-image: 
        url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7f6f3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"),
        url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f7f6f3'%3e%3cpath d='M12.87 15.07l-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.02-.03zm10.95 2.15L19 10.5h-1.81l-4.83 6.72h1.9l.99-1.44h4.49l.98 1.44h1.9l-.8-1.15zM15.74 14.4l1.52-2.19 1.52 2.19h-3.04z'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .translateSelectLanguage:hover {
    background-color: rgba(49, 53, 59, 0.8) !important;
    border-color: rgba(247, 246, 243, 0.3) !important;
}

[data-bs-theme="dark"] .translateSelectLanguage:focus {
    background-color: #1f2937 !important;
    border-color: #2eaadc !important;
    box-shadow: 0 0 0 2px rgba(46, 170, 220, 0.3) !important;
}

/* 深色模式下拉菜单选项正常显示 */
[data-bs-theme="dark"] .translateSelectLanguage option {
    color: #f7f6f3 !important;
    background: #1f2937 !important;
}

/* 兼容body.dark-mode的情况(纯图标按钮) */
body.dark-mode .translateSelectLanguage {
    color: transparent !important;
    border-color: rgba(247, 246, 243, 0.2) !important;
    background-color: rgba(31, 41, 55, 0.8) !important;
    background-image: 
        url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7f6f3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"),
        url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f7f6f3'%3e%3cpath d='M12.87 15.07l-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.02-.03zm10.95 2.15L19 10.5h-1.81l-4.83 6.72h1.9l.99-1.44h4.49l.98 1.44h1.9l-.8-1.15zM15.74 14.4l1.52-2.19 1.52 2.19h-3.04z'/%3e%3c/svg%3e");
}

body.dark-mode .translateSelectLanguage option {
    color: #f7f6f3 !important;
    background: #1f2937 !important;
}
© 版权声明
THE END
喜欢就支持一下吧
点赞15 分享
评论 共1条

请登录后发表评论