dark-sharplingo by newproplus

/* ==UserStyle==
@name       dark-sharplingo
@version    20250119.00.27
@namespace  ?
==/UserStyle== */

@-moz-document url-prefix("https://sharplingo.cn/") {
/* 
开发者： https://gitee.com/vhash
代码仓库文件： https://gitee.com/vhash/public-data/dark-sharplingo.css

本文件用于对 https://sharplingo.cn 的样式进行修改，使其显示为深色模式。

## 兼容性
目前仅对以下浏览器进行过测试：

* Firefox 桌面版
* Firefox 安卓版
* Edge 桌面版

## 使用方法

可以在上述浏览器中安装扩展 Stylus ，然后新建样式，把本文件的内容全部粘贴进去：

* Firefox 需要设置“前缀”为“https://sharplingo.cn/”
* Edge 不需要

也可以使用其他可以修改样式的插件实现此功能。

## 版本更新
2025年1月18日 基本实现功能
2025年1月19日 优化视频和音频字幕的样式
*/

:root {
    --text-clr: #ccc;
    --bkg-clr: #000;
    --bkg-clr2: #2b2a33;
    --bkg-clr-study: #111827;
    --bdr-clr: #666;
}

body {
    background-color: var(--bkg-clr) !important;
    color: var(--text-clr)
}

/* 导航栏 */
nav.bg-light {
    background-color: var(--bkg-clr2) !important
}

nav.navbar-light .navbar-nav .nav-link {
    color: var(--text-clr)
}

nav.navbar-light .navbar-toggler-icon {
    filter: invert(100%)
}

nav .dropdown-menu {
    background-color: var(--bkg-clr2);
}

nav .dropdown-menu .dropdown-item {
    color: var(--text-clr)
}

nav .dropdown-menu.userProfileDropdown {
    background-color: var(--bkg-clr2) !important;
}

nav .dropdown-menu.userProfileDropdown .dropdown-item.nav-link {
    color: var(--text-clr);
}

nav #searchBarDropDown svg {
    filter: invert(100%)
}

nav .dropdown.nav-item img{
    filter: invert(100%)
}

/* 首页 */
.jumbotron {
    background-color: #2d2b3c;
}

.opaque-font {
    color: var(--text-clr)
}

.opaque-font-darker {
    color: var(--text-clr)
}

/* footer */
#footer {
    background-color: var(--bkg-clr2);
    color: var(--text-clr);
    border-top-color: var(--bdr-clr);
}

/* table */
table.table {
    color: var(--text-clr);
}

/* card */
.card {
    background-color: var(--bkg-clr2);
    color: var(--text-clr);
}

/* modal-dialog */
.modal.show .modal-dialog {
    background-color: var(--bkg-clr2);
    color: var(--text-clr);
}

.modal.show .modal-dialog .modal-content {
    background-color: inherit;
    color: inherit;
}

.modal.show .modal-dialog .modal-footer {
    border-top-color: var(--bdr-clr);
}

/* form */
.form-control {
    background-color: var(--bkg-clr2)
}

/* button */
.btn-light {
    background-color: var(--bkg-clr2)
}

/* task page */
#main-page {
    background-color: var(--bkg-clr-study) !important;
}

@media (max-width: 767px) {
    #card-div {
        padding: 0.5rem;
    }
}

/* 字幕 */
.show-word[style="color:black;"] {
    color: inherit !important;
}

.playing .show-word[style="color:black;"] {
    color: #666 !important;
}


/* 显示功能键菜单 */
.fixed-right {
    background-color: var(--bkg-clr2);
    padding: 0.5rem;
    text-align: left;
}

.fixed-right .custom-switch {
    justify-content: left !important;
}

/* 常见问题和笔记区域 */
.alert-warning {
    color: #b38912;
    background-color: #534f42;
}

/* 英文翻译区域 */
.translation {
    background-color: #9f907c;
}
}