├── .gitignore ├── ChangeLog.md ├── LICENSE ├── README.md ├── package.json ├── pnpm-lock.yaml ├── release ├── PKU-Art.user.css └── PKU-Art.user.js ├── server.py ├── src ├── Arthals-mcskin.png ├── README.md ├── css │ ├── arco-palette.css │ ├── courseAnnouncement.css │ ├── courseAssignmentUpload.css │ ├── courseBlankPage.css │ ├── courseClassGrade.css │ ├── courseClassin.css │ ├── courseContent.css │ ├── courseDiscussion.css │ ├── courseFileEmbed.css │ ├── courseGlobalAnnouncement.css │ ├── courseGlobalPage.css │ ├── courseHomePage.css │ ├── courseListContent.css │ ├── courseLoginPage.css │ ├── courseOther.css │ ├── courseTask.css │ ├── courseTeachingStaffList.css │ ├── courseToolAlert.css │ ├── courseToolFrame.css │ ├── courseToolGrade.css │ ├── courseToolGradeClass.css │ ├── courseToolGradeItem.css │ ├── courseVideoPlay.css │ ├── courseVideoPlayFrame.css │ ├── courseVideolist.css │ ├── courseViewAttempt.css │ ├── iaaaOAuthPage.css │ ├── main.css │ └── src │ │ ├── PKU.svg │ │ ├── PKU_Logo.svg │ │ ├── PKU_Logo_Dark.svg │ │ ├── alarm-clock.svg │ │ ├── arrow.svg │ │ ├── arrow_dark.svg │ │ ├── check-simple.svg │ │ ├── check-simple_dark.svg │ │ ├── check.svg │ │ ├── check_dark.svg │ │ ├── clover.svg │ │ ├── comment.svg │ │ ├── download.svg │ │ ├── download_dark.svg │ │ ├── exit.svg │ │ ├── exit_dark.svg │ │ ├── file.svg │ │ ├── file_dark.svg │ │ ├── folder.svg │ │ ├── folder_dark.svg │ │ ├── id-card-v.svg │ │ ├── link.svg │ │ ├── link_dark.svg │ │ ├── more.svg │ │ ├── more_dark.svg │ │ ├── note.svg │ │ ├── pku_16x16.png │ │ ├── pku_180x180.png │ │ ├── pku_32x32.png │ │ ├── refresh.svg │ │ ├── refresh_dark.svg │ │ ├── remind.svg │ │ ├── remind_dark.svg │ │ ├── sandclock.svg │ │ ├── search.svg │ │ ├── search_dark.svg │ │ ├── setting.svg │ │ ├── setting_dark.svg │ │ ├── stopwatch-start.svg │ │ ├── stopwatch-start_dark.svg │ │ ├── student.svg │ │ ├── student_dark.svg │ │ ├── tip.svg │ │ ├── verified.svg │ │ ├── warning.svg │ │ └── warning_dark.svg ├── main.js └── vite-env.d.ts ├── version.env └── vite.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | **/.DS_Store 3 | 4 | # Logs 5 | logs 6 | *.log 7 | npm-debug.log* 8 | yarn-debug.log* 9 | yarn-error.log* 10 | pnpm-debug.log* 11 | lerna-debug.log* 12 | 13 | node_modules 14 | dist 15 | dist-ssr 16 | *.local 17 | 18 | # Editor directories and files 19 | .vscode/* 20 | !.vscode/extensions.json 21 | .idea 22 | .DS_Store 23 | *.suo 24 | *.ntvs* 25 | *.njsproj 26 | *.sln 27 | *.sw? 28 | 29 | update-cdn.py 30 | test -------------------------------------------------------------------------------- /ChangeLog.md: -------------------------------------------------------------------------------- 1 | # ChangeLog 2 | 3 | **2025.05.12 - v2.3.66** 4 | 5 | > close #24 6 | 7 | **2025.04.26 - v2.3.65** 8 | 9 | > 修复了 iaaa 登录页面背景色的问题。 10 | 11 | **2025.03.16 - v2.3.64** 12 | 13 | > 修复了 Safari 下 Favicon 没有成功替换的问题。 14 | 15 | **2025.03.16 - v2.3.63** 16 | 17 | > 添加了侧栏的作者信息。 18 | 19 | **2025.03.15 - v2.3.62** 20 | 21 | > Merged #23, thx @dfshfghj, 适配了教参页面。 22 | 23 | **2025.03.15 - v2.3.61** 24 | 25 | > 继续适配答疑讨论页面。 26 | 27 | **2025.03.15 - v2.3.60** 28 | 29 | > 适配答疑讨论页面。 30 | 31 | **2025.03.15 - v2.3.59** 32 | 33 | > Merged #22, thx @dfshfghj, 修复了作业提交页面评论区 tinymce 的颜色问题，fix #8 34 | 35 | **2025.03.13 - v2.3.58** 36 | 37 | > 更新依赖。 38 | > 39 | > 修复了 Safari 相关的一些提示信息样式问题。 40 | 41 | **2025.03.08 - v2.3.57** 42 | 43 | > 修改了下载录播界面的按钮背景色。 44 | 45 | **2024.12.25 - v2.3.56** 46 | 47 | > 修复了课程主页的导航弹窗行内样式导致的背景溢出问题。 48 | 49 | **2024.12.01 - v2.3.55** 50 | 51 | > Merged #18，thx @djdjz7，让通知 badge 直接展示在顶层图标右上角。 52 | 53 | **2024.11.24 - v2.3.54** 54 | 55 | > 由于存在加载问题，回退上一个版本的更改 56 | 57 | **2024.11.24 - v2.3.53** 58 | 59 | > 对全局 CSS 样式进行了一些优化，添加了过渡效果。 60 | 61 | **2024.10.06 - v2.3.52** 62 | 63 | > 做了一些对于助教视角下页面的修改（可能导致某些功能不可用，暂不计划支持助教视角的全部功能）。 64 | 65 | **2024.10.06 - v2.3.51** 66 | 67 | > 由于可以直接点击 Logo 回到主页，所以移除 “我的主页” 按钮。 68 | 69 | **2024.10.03 - v2.3.50** 70 | 71 | > 添加了点击 logo 直接返回课程首页的功能。 72 | 73 | **2024.09.17 - v2.3.49** 74 | 75 | > 修改了下载区域的样式，强迫症狂喜。 76 | 77 | **2024.08.18 - v2.3.48** 78 | 79 | > 修改了文件页面的标题栏样式，在注入时额外附加了两个字段。 80 | 81 | **2024.06.18 - v2.3.47** 82 | 83 | > 修改了复制下载链接的逻辑，现在复制的是可以直接在浏览器中打开触发 mp4 下载的链接。 84 | 85 | **2024.06.06 - v2.3.46** 86 | 87 | > 适配教学网视频接口修改，移除乱码文件名获取（现接口不再返回此数据）。 88 | 89 | **2024.04.27 - v2.3.45** 90 | 91 | > Merged #13，增加了基于指数平滑的下载时间估计 92 | 93 | **2024.04.19 - v2.3.44** 94 | 95 | > 适配教学网视频接口修改，修复上一版本无法下载的问题。 96 | 97 | **2024.04.07 - v2.3.43** 98 | 99 | > 支持替换 disk.pku.edu.cn 的图标。 100 | 101 | **2024.04.04 - v2.3.42** 102 | 103 | > 修复了近期下载路径变化导致某些视频无法下载的问题。 104 | 105 | **2024.04.03 - v2.3.41** 106 | 107 | > 移除了下载时的打印。 108 | 109 | **2024.03.26 - v2.3.40** 110 | 111 | > 将上一个版本的修复复制到了 `courseClassGrade` 页面，修复了这个页面的样式问题。 112 | 113 | **2024.03.26 - v2.3.39** 114 | 115 | > merged #12，fixed [#9](https://github.com/zhuozhiyongde/PKU-Art/issues/9) 116 | 117 | **2024.03.25 - v2.3.38** 118 | 119 | > 让首页的课程 a 标签宽度范围大了一些，方便点击。 120 | > 121 | > 修复了固定导航栏后，背景错误的问题。 122 | > 123 | > 美化了下载选择框的样式，更改了 GM API，更加稳定。 124 | 125 | **2024.03.25 - v2.3.37** 126 | 127 | > 修正了更改打包方式之后导致的作者信息丢失问题。 128 | 129 | **2024.03.25 - v2.3.36** 130 | 131 | > 固定了顶部和左侧导航栏的位置，使得在滚动时不会消失。 132 | 133 | **2024.03.25 - v2.3.35** 134 | 135 | > 添加了下载时的进度提示。 136 | 137 | **2024.03.23 - v2.3.34** 138 | 139 | > 接受了来自 @wjsoj 的 PR，并对之进行更改，现在已经可以在课程页面中直接下载 mp4 格式的录播了。 140 | 141 | **2024.03.07 - v2.3.33** 142 | 143 | > 参照 https://leohlee.github.io/pkuVideo.html 的代码，修改了录播下载页面的代码，使得可以直接下载 mp4 格式的录播。 144 | > 145 | > 修正了 `main.css` 和 `arco-palette.css` 注入时机匹配失败的问题。 146 | 147 | **2024.02.24 - v2.3.32** 148 | 149 | > 修复了回放页面 URL 变动的问题。 150 | 151 | **2023.12.02 - v2.3.31** 152 | 153 | > 修改了 `replaceIcon()` 的选择范围。 154 | 155 | **2023.11.28 - v2.3.30** 156 | 157 | > 添加了作者信息，移除了无效引用，更新了 CDN Header。 158 | 159 | **2023.11.15 - v2.3.29** 160 | 161 | > 增加了对于单独文件附件的 CSS 样式的动画。 162 | 163 | **2023.11.15 - v2.3.28** 164 | 165 | > 优化了替换 ICON 的逻辑。 166 | 167 | **2023.11.15 - v2.3.27** 168 | 169 | > 修改了上一个版本中选择范围的错误，略微优化了一下样式。 170 | 171 | **2023.11.15 - v2.3.26** 172 | 173 | > 增加了对于单独文件附件的 CSS 样式。 174 | 175 | **2023.10.28 - v2.3.25** 176 | 177 | > 修复了全局导航栏判定过宽影响退出的问题。 178 | 179 | **2023.09.03 - v2.3.24** 180 | 181 | > 修复了一些小的问题。 182 | 183 | **2023.09.03 - v2.3.23** 184 | 185 | > 改正了 `ReplaceIcon()` 的逻辑，使得对于附件页面也可以生效了。 186 | 187 | **2023.09.03 - v2.3.22** 188 | 189 | > 修改了 README 的病句。 190 | 191 | **2023.06.05 - v2.3.21** 192 | 193 | > 将原有的 PKU_Logo 图片从 PNG 格式切换到了 SVG 格式，以提高图片质量，降低请求大小。 194 | 195 | **2023.05.14 - v2.3.20** 196 | 197 | > 修复了一个 `courseGlobalPage.css` 的宽度样式问题。 198 | 199 | **2023.04.27 - v2.3.19** 200 | 201 | > 添加了一些对于 courseBlankPage 的字体颜色样式的更改。 202 | > 203 | > 类似的，修复了一个 `courseAnnouncement.css` 的字体颜色样式更改的选择器问题。 204 | 205 | **2023.04.08 - v2.3.18** 206 | 207 | > 修复了 `deleteCourseSerial()` 函数对于某些课程无法正常工作的问题。closed #7 208 | 209 | **2023.04.01 - v2.3.17** 210 | 211 | > 修复了因为 `min-height:100vh` 带来的过高显示问题。 212 | > 213 | > 修复了文件上传区、通知说明区文本下划线选择范围过宽的问题。 214 | > 215 | > 修复了替换课程序号功能在某些情况下不可用的问题。 216 | 217 | **2023.04.01 - v2.3.16** 218 | 219 | > 意识到现在的 IIFE 写法有可能污染所有 pku.edu.cn 的网站。已增加限制作用域。 220 | > 221 | > 更正了一些打印格式。 222 | 223 | **2023.04.01 - v2.3.15** 224 | 225 | > 完蛋了 以后一定发布前先自己测试一下。 226 | > 227 | > 发现闪烁问题，已修复。 228 | 229 | **2023.04.01 - v2.3.14** 230 | 231 | > 草 忘了作用域问题了，修复一下。 232 | 233 | **2023.04.01 - v2.3.13** 234 | 235 | > 添加了 `deleteCourseSerial()` 函数，用于删除课程序号。 236 | > 237 | > 这意味着你不用修读这些课程了。 238 | > 239 | > 愚人节快乐！ 240 | 241 | **2023.03.31 - v2.3.12** 242 | 243 | > 美化了通知、成绩界面的新项目。 244 | > 245 | > 美化了成绩上传页面的一些元素。 246 | > 247 | > 美化了滚动条。 248 | 249 | **2023.03.31 - v2.3.11** 250 | 251 | > 增加了 `replaceIcon()` 函数，用于替换标签页的图标。 252 | > 253 | > 修复了上传文件悬浮时样式失效的问题。 254 | 255 | **2023.03.31 - v2.3.10** 256 | 257 | > 更新了脚本的运行时间至 `document-start` ，解决了 JS 加载方式“卡一下”的问题。 258 | > 259 | > ↑ 2.3.9 版本的自动构建脚本没有同时更正，此版本修复了这个问题。 260 | 261 | **2023.03.31 - v2.3.9** 262 | 263 | > 更新了 `preventHideSidebar()` 的逻辑。 264 | > 265 | > 更新了脚本的运行时间至 `document-start` ，解决了 JS 加载方式“卡一下”的问题。 266 | 267 | **2023.03.31 - v2.3.8** 268 | 269 | > 所有 2.3.0~2.3.8 的日志和版本都可能是混乱的。 270 | > 271 | > 因为我使用了这些版本以测试自动化发布流程脚本。 272 | > 273 | > 从功能上来讲，这些版本是一致的，不必更新。 274 | 275 | **2023.03.30 - v2.3.0** 276 | 277 | > 经过分析，一直以来存在的侧边栏收起后（可能是窗口大小改变或者误触 puller）无法重新展开的问题无法简单地通过附加 CSS 样式解决，因此，我在 JavaScript 脚本种引入了新的 IIFE（立即调用表达式），即 `preventHideSidebar()` 函数，它会检测侧栏是否被收起，如果被收起，则在 **页面刷新** 后，帮你自动点击 puller 并展开侧栏。 278 | > 279 | > 上述原因导致 PKU Art 首次出现了 JavaScript 安装和 CSS 安装的差异，所以我建议所有采用 CSS 安装的用户 **改变安装方式** 至 JavaScript 安装。 280 | > 281 | > `custom-builder.py` 现在支持解析 `main.js` 中的 IIFE 表达式，并且自动添加到脚本后。 282 | 283 | **2023.02.28 - v2.2.0** 284 | 285 | > 修复了一些小的 bug。 286 | > 287 | > 通过更仔细的对比选择器修复了部分小的样式失效问题。 288 | > 289 | > 构建了完整的发布工作流程，并且迁移部署了 CDN 文件发放域名至 https://cdn.arthals.ink/ 下。稍后可能会完全禁用原有途径。 290 | 291 | **2023.02.19 - v2.2.0 - dev** 292 | 293 | > 状态：开发中，还未构建发布版 css/js。 294 | > 295 | > 简单的用 tampermonkey-vite-plugin 重构了一下，小修了几个明显的显示错误，现在可以直接在本地用 Vite HMR 了，不用手写自动刷新脚本了。 296 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | ![PKU Art](https://cdn.arthals.ink/bed/2023/09/320e0710b11ef734ec11feb2b8e2a061.jpeg) 4 | 5 | # 🎨 PKU Art 6 | 7 |
8 | 9 | PKU Art 是一款通过浏览器插件向页面附加的 CSS 样式表 / JavaScript 脚本。它可以完成对于原有样式的覆盖，从而增强教学网视觉体验与功能优化。 10 | 11 | PKU Art 第一版发布于 2021 年 11 月，相对简陋；2022 年暑假更新的第二版实现了对第一版完整重构，完美支持了暗色模式，并且增加了更多的交互动效和设计改进。 12 | 13 |
14 | 15 | [💫 碎碎念](#-%E7%A2%8E%E7%A2%8E%E5%BF%B5) · [✨ 功能](#-%E5%8A%9F%E8%83%BD) · [📦 安装](#-%E5%AE%89%E8%A3%85) · [🚨 使用须知](#-%E4%BD%BF%E7%94%A8%E9%A1%BB%E7%9F%A5) · [🧑‍💻 贡献](#-%E8%B4%A1%E7%8C%AE) · [📝 更新日志](#-%E6%9B%B4%E6%96%B0%E6%97%A5%E5%BF%97) · [💬 Q&A](#-qa) · [📜 后记](#-%E5%90%8E%E8%AE%B0) · [📋 LICENSE](#-license) 16 | 17 |
18 | 19 | ## 💫 碎碎念 20 | 21 | 作为一名 PKUer，我从入学伊始就对教学网的样式适应不来，这做的真的太丑了！这怎么会让人有学习的动力呢？！我为什么老摸鱼？不就是因为这教学网让我看了就不想学习吗！（震声 22 | 23 | 这种不满终于入学考完第一个期中后的某个周四爆发了。我看着又土又老的编程网格，再也忍不下去了，正好周五加周末没啥事，于是开始快乐地在图书馆摸鱼（其实只有最后看到成果的时候才快乐，期间调各种样式啊选择器啊的时候让我简直要吐血，好多知识和语法还是边用边学的），爆肝出了编程网格、IAAA 登录页、教学网大部分页面的 CSS。 24 | 25 | 我真的很想吐槽那用 Table 搭出来的编程网格、大黑框顶头上的教学网，还有那设计简直离天下之大谱、让我甚至真的想问“就这还注册专利吗？”的成绩页面（它居然还用 iframe 套娃套了两层！），但最终，我还是完成了这个略显稚嫩的作品。而这，就是 PKU Art 的诞生了。 26 | 27 | 现在想想，两三天的时间换未来几年的视觉快感，也算是值辽！ 28 | 29 | ## ✨ 功能 30 | 31 | ### `1` 界面美化、深色模式 32 | 33 |
34 | 点击展开 35 | 36 | ![IAAA 登录界面](https://cdn.arthals.ink/bed/2023/09/3073959894d62a0044d8b8b1ebb3d0a8.png) 37 | 38 | ![课程网首页](https://cdn.arthals.ink/bed/2023/09/a1a55c7889ee532f526471938bca84bf.png) 39 | 40 | ![作业上传界面](https://cdn.arthals.ink/bed/2023/09/fda9cfc9e1d8d857eef2ae86a8290e45.png) 41 | 42 | ![课程成绩页面](https://cdn.arthals.ink/bed/2023/09/368159ac183a1a86f78397db3313803f.png) 43 | 44 | ![课程公告页面](https://cdn.arthals.ink/bed/2023/09/7fd8b750fafe7a7655c46f75e2e7b668.png) 45 | 46 | ![课程作业复核页面](https://cdn.arthals.ink/bed/2023/09/588818b8557f967f6fdcd7342e809adf.png) 47 | 48 | ![课程教学内容页面](https://cdn.arthals.ink/bed/2023/09/28d039f6d0a546c10dba9fb3ddfef43a.png) 49 | 50 | ![全局通知页面](https://cdn.arthals.ink/bed/2023/09/c960ab13b295396b89974b1e5aecf824.png) 51 | 52 | ![全局成绩页面](https://cdn.arthals.ink/bed/2023/09/afd7c19dc08d7020a8ed7521718c29f6.png) 53 | 54 | ![全局公告页面](https://cdn.arthals.ink/bed/2023/09/b63c155e7ce13eef5f2185ea5212e5f7.png) 55 | 56 | ![全局课程成绩页面](https://cdn.arthals.ink/bed/2023/09/62b77db88f0222d5ec6632a186cbdaa1.png) 57 | 58 |
59 | 60 | ### `2` 录播下载、重命名 61 | 62 |
63 | 点击展开 64 | 65 | ![download](https://cdn.arthals.ink/bed/2025/03/download-cf6787897a09ef8b607b3c375f899a38.png) 66 | 67 |
68 | 69 | ## 📦 安装 70 | 71 | PKU Art 目前支持 CSS 安装与 JavaScript 安装两种安装方式，兼容 Safari 与 Chrome（Edge/Arc）两大浏览器。 72 | 73 | ### JavaScript [推荐] 74 | 75 | 请注意，Safari 下部分 JavaScript 功能无法使用，如录播下载重命名（但仍然可以下载 mp4 文件！）、复制视频下载链接等。 76 | 77 | 前置插件需求： 78 | 79 | - Chrome/Edge/Arc 需安装浏览器插件 [TamperMonkey](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo)，点开脚本页面后自动触发安装页面，跟随指引即可。 80 | - Safari 需安装浏览器插件 [UserScripts](https://apps.apple.com/cn/app/userscripts/id1463298887)，安装好后点击工具栏图标，启用并授权后再在脚本页面点击图标，再点击 Click to install 即可安装。 81 | 82 | 安装渠道： 83 | 84 | - [CDN for JavaScript](https://cdn.arthals.ink/release/PKU-Art.user.js)：源代码更新后立即更新 85 | - [GreasyFork](https://greasyfork.org/zh-CN/scripts/436323-pku-art)：每天同步上述源一次 86 | 87 | > [!WARNING] 88 | > 注意，由于 Chrome 权限更新，你可能需要在扩展页面打开开发者模式，详见 [这里](https://www.tampermonkey.net/faq.php?locale=en#Q209)。 89 | 90 | ### CSS 91 | 92 | CSS 安装方式只提供了非侵入式样式修改，不支持 JavaScript 版本功能（如首页自动隐去课程号、录播下载等）。 93 | 94 | CSS 安装方式目前已不会在版本更新前确认效果。 95 | 96 | 前置插件要求： 97 | 98 | - Chrome/Edge/Arc 需安装浏览器插件 [xStyle](https://chrome.google.com/webstore/detail/xstyle/hncgkmhphmncjohllpoleelnibpmccpj)/[Stylish](https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe) 99 | - Safari 需安装浏览器插件 [Cascadea](https://apps.apple.com/cn/app/cascadea/id1432182561)（售价 18 ￥） 100 | 101 | 安装渠道： 102 | 103 | - [CDN for CSS](https://cdn.arthals.ink/release/PKU-Art.user.css)：源代码更新后立即更新 104 | - [Stylish](https://userstyles.org/styles/220453/pku-art)：每天同步上述源一次 105 | 106 | ## 🚨 使用须知 107 | 108 | 本脚本移除了一些我觉得没有用处的控件元素，如侧栏的收起框（这个太丑了），播放列表上方的导航栏（下方有一样的），这可能会导致一些特殊情况下，某些功能不可用（如助教功能）。你可以 **随时在插件内禁用本样式** ，以恢复到原有界面。 109 | 110 | 本样式覆盖了所有我认为常用的界面，但我毕竟不是教学网的专业前端维护人员，所以我并不能做到对全部的页面加以修改。但如果你认为某个页面十分常用但却没有被修改，欢迎联系我，在 GitHub 提 issue，抑或是直接加我微信的方式（zhuozhiyongde）都可以。 111 | 112 | 如果你喜欢这个样式，请不要吝啬点击 Star（树洞和 GitHub 的都可以！），这是对我最大的鼓励与肯定！ 113 | 114 | ## 🧑‍💻 贡献 115 | 116 | 欢迎为 PKU Art 贡献代码！ 117 | 118 | 1. 克隆本项目： 119 | 120 | ```bash 121 | git clone https://github.com/zhuozhiyongde/PKU-Art.git 122 | ``` 123 | 124 | 2. 进入工作目录，安装依赖： 125 | 126 | ```bash 127 | cd PKU-Art && pnpm install 128 | ``` 129 | 130 | 3. 启动 Vite 服务器以获得 HMR 热更新开发体验： 131 | 132 | ```bash 133 | pnpm dev 134 | ``` 135 | 136 | 4. 如果你需要引入新的图标（`src/css/src` 目录），你可能需要在本地额外启动文件服务器： 137 | 138 | ```bash 139 | python server.py 140 | ``` 141 | 142 | 5. 编译，随后在本地预览： 143 | 144 | ```bash 145 | pnpm build 146 | ``` 147 | 148 | 6. 而后，你就可以发起 Pull Request，我将在审核代码后进行合并，随后更新 CDN。 149 | 150 | ## 📝 更新日志 151 | 152 | 参见 [ChangeLog.md](https://github.com/zhuozhiyongde/PKU-Art/blob/main/ChangeLog.md) 或 [GitHub Release](https://github.com/zhuozhiyongde/PKU-Art/releases)。 153 | 154 |
155 |
156 | 157 | 163 | Activity Trends of zhuozhiyongde/PKU-Art - Last 28 days 169 | 170 |
171 |   172 |
173 | 174 | 175 | Pushes and Commits of zhuozhiyongde/PKU-Art 176 | 177 |
178 |   179 |
180 | 181 | 187 | Star History of zhuozhiyongde/PKU-Art 193 | 194 |
195 |
196 | 197 | ## 💬 Q&A 198 | 199 | ### 有适配手机版的打算吗？ 200 | 201 | 没有，做手机版自适应工程量几乎等于重构，一个人维护这个项目，我真的太累了 qwq... 202 | 203 | ### 可以在 iPad 上使用吗？ 204 | 205 | 可以，方式等同于在 Safari 上使用 JavaScript 安装。 206 | 207 | ### 我可以审阅代码、提交 PR 吗？ 208 | 209 | 十分欢迎！你可以随时访问我的 GitHub，哪里有本项目用到的所有代码。我可以保证项目内不含有任何恶意代码，仅仅是通过附加 css（通过 CDN 分发）来改变页面样式。如果你愿意提交 PR，那我会十分乐意接受的！ 210 | 211 | ## 📜 后记 212 | 213 | 平日里的我并非是个话很多的人，但这堪称疯狂的一周，实在是让我感触颇丰，总觉得还是得记下点什么。 214 | 215 | 去年刚刚进入燕园的我，因为受不了编程网格的老土设计，在图书馆摸了好半天，就为了把编程网格做的好看了一点（[树洞#2908869](https://treehole.pku.edu.cn/web/#2908869)），彼时的我甚至连 CSS 的容器布局都不甚了解，好多知识都是在敲代码的过程中才去第一次认真学习，可我没想到的是哪个略显粗糙的拙劣样式，却得到了很多同学的肯定。于是我再接再厉，凭借着那三脚猫的功夫，滥用各种现在看起来简直不可接受的语句完成了对于教学网的美化（也正是这烂到几乎不可维护的屎山让我下定决心重构整个项目），发布了 PKU Art v1。承蒙厚爱，发布以后我得到了很多同学的赞扬，收获了至今为止 Star 最多的一个树洞 & 项目。那段时间我最快乐的一件事情就是每天刷树洞看看涨了多少关注，在 Stylish 上看看涨了多少下载（好虚荣啊 hhh），真是相当感谢大家的支持！ 216 | 217 | 开心过后的我，却也从未忘记，那只是一个徒有其表的半成品，根本经不起哪怕一次 Code Review。事实上，自从发布以后，我自己也就是用着，而并没有想办法去优化。毕竟程序员们不总是有句老话嘛 —— 代码能跑就不要动。就这么凑合着，我搁置了这个项目。 218 | 219 | 时光转眼来到今年的八月一日。对前端一直很感兴趣的我，在七月份刚刚系统化学了一遍 JavaScript，Vue，React 等前端常用技术，也对 CSS 有了一些新的了解。就如同去年的我一样，闲到不知道干什么的我，终于还是给自己找起了事情做 —— 我要重构这一坨屎山代码！ 220 | 221 | 重构的过程，用到的知识其实相较第一版并没有太大的差异，但有了系统化知识的打底，我对于页面结构有了更深的理解，没有再滥用万能的 translate，也没有随意乱加伪类，而是顺着原有的结构一步步选择适合的语句去实现我想要的效果。同时，一回生二回熟的我，也对教学网的路由和套娃谙熟于心，没有再像之前一样对着一个 iframe 愣半天，也通过正则表达式对于样式生效的网址有了更精细的控制。 222 | 223 | 要说这一周真的学到了什么，我想，也没有什么。抠细节带来的大概只有对于耐心的考验，每个页面，我大概都要写数个小时才能满意，每个用到颜色的地方我都使用了变量来保证在黑暗模式下的可用性，每个我觉得原先图标不行的地方我都专门去 IconPark 网站上找了替代品并加以更换。Mac 告诉我，为了完成这个项目，我的相关屏幕使用时间在上周达到了 50 个小时，然而这还不算我找参考，挑配色的时间。 224 | 225 | 我向来是一个对于自己感兴趣的事物会不惜代价去投入的人，可是这次所花费的时间和最终写出的代码行数都远远超出了我最开始的预期。 226 | 227 | 期间，我也不是没有心生厌倦，我曾问过自己，就算花了这么久时间去写，最后能用上的又有多少人？我付出的时间精力难道不是自娱自乐吗？万一教学网也像编程网格一样更新了样式怎么办？... 但我却总是安慰自己，已经写了这么多了（沉没价值啊啊啊啊），怎么能忍心半途而废呢？于是，就在这种一边否定自己，一边问怀疑原有代码究竟是怎么写出来的，一边机械化的敲着已经用了数百遍的那些属性和变量的过程中，我还是渐渐磨出来了最终的成果 —— 全新的、带黑暗模式的 PKU Art v2。 228 | 229 | 于是，我终于相信，这一版的 PKU Art v2，足够让我、让大家满意。 230 | 231 | ## 📋 LICENSE 232 | 233 | GPL-3.0 license 234 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pku-art", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "python3 update-cdn.py build", 9 | "preview": "vite preview", 10 | "release": "python3 update-cdn.py update" 11 | }, 12 | "devDependencies": { 13 | "dotenv": "^16.4.5", 14 | "unplugin-auto-import": "^0.17.5", 15 | "vite": "^6.2.1", 16 | "vite-plugin-mkcert": "^1.17.6", 17 | "vite-plugin-monkey": "^5.0.8" 18 | }, 19 | "dependencies": { 20 | "monkey": "^0.9.0" 21 | } 22 | } -------------------------------------------------------------------------------- /server.py: -------------------------------------------------------------------------------- 1 | from fastapi import FastAPI, HTTPException 2 | from fastapi.responses import FileResponse 3 | from fastapi.middleware.cors import CORSMiddleware 4 | import os 5 | 6 | app = FastAPI() 7 | 8 | # 允许的图片和 SVG 文件类型 9 | ALLOWED_EXTENSIONS = {"png", "jpg", "jpeg", "gif", "svg", "bmp", "webp"} 10 | 11 | # CORS 配置 12 | app.add_middleware( 13 | CORSMiddleware, 14 | allow_origins=["*"], # 允许所有来源 15 | allow_credentials=True, 16 | allow_methods=["*"], # 允许所有方法 17 | allow_headers=["*"], # 允许所有头 18 | ) 19 | 20 | # 设置静态文件目录 21 | STATIC_DIR = "src/css/src" 22 | 23 | 24 | # 提供静态文件 25 | @app.get("/{filename:path}") 26 | async def serve_file(filename: str): 27 | if "." in filename and filename.rsplit(".", 1)[1].lower() in ALLOWED_EXTENSIONS: 28 | file_path = os.path.join(STATIC_DIR, filename) 29 | if os.path.exists(file_path): 30 | return FileResponse(file_path) 31 | else: 32 | raise HTTPException(status_code=404, detail="File not found") 33 | else: 34 | raise HTTPException(status_code=403, detail="File type not allowed") 35 | 36 | 37 | if __name__ == "__main__": 38 | import uvicorn 39 | 40 | uvicorn.run(app, host="0.0.0.0", port=3000) 41 | -------------------------------------------------------------------------------- /src/Arthals-mcskin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhuozhiyongde/PKU-Art/b51e17b66bfb9c4f52b4958306a22233d70cf17d/src/Arthals-mcskin.png -------------------------------------------------------------------------------- /src/README.md: -------------------------------------------------------------------------------- 1 | # README 2 | 3 | Dev folder of PKU-Art. 4 | Use [vite-plugin-monkey](https://github.com/lisonge/vite-plugin-monkey) to build in vite. 5 | 6 | > [!WARNING] 7 | > Since I've set `inject-into` to `page`, the `GM` API is not available for Safari. 8 | 9 | ## install 10 | 11 | ```bash 12 | pnpm install 13 | ``` 14 | 15 | ## run 16 | 17 | ```bash 18 | pnpm dev 19 | ``` 20 | 21 | ## build 22 | 23 | ```bash 24 | pnpm build 25 | ``` 26 | 27 | Then, you can find the built file in `dist` folder. -------------------------------------------------------------------------------- /src/css/arco-palette.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | :root { 8 | --red-1: #FFECE8; 9 | --red-2: #FDCDC5; 10 | --red-3: #FBACA3; 11 | --red-4: #F98981; 12 | --red-5: #F76560; 13 | --red-6: #F53F3F; 14 | --red-7: #CB272D; 15 | --red-8: #A1151E; 16 | --red-9: #770813; 17 | --red-10: #4D000A; 18 | 19 | --orangered-1: #FFF3E8; 20 | --orangered-2: #FDDDC3; 21 | --orangered-3: #FCC59F; 22 | --orangered-4: #FAAC7B; 23 | --orangered-5: #F99057; 24 | --orangered-6: #F77234; 25 | --orangered-7: #CC5120; 26 | --orangered-8: #A23511; 27 | --orangered-9: #771F06; 28 | --orangered-10: #4D0E00; 29 | 30 | --orange-1: #FFF7E8; 31 | --orange-2: #FFE4BA; 32 | --orange-3: #FFCF8B; 33 | --orange-4: #FFB65D; 34 | --orange-5: #FF9A2E; 35 | --orange-6: #FF7D00; 36 | --orange-7: #D25F00; 37 | --orange-8: #A64500; 38 | --orange-9: #792E00; 39 | --orange-10: #4D1B00; 40 | 41 | --gold-1: #FFFCE8; 42 | --gold-2: #FDF4BF; 43 | --gold-3: #FCE996; 44 | --gold-4: #FADC6D; 45 | --gold-5: #F9CC45; 46 | --gold-6: #F7BA1E; 47 | --gold-7: #CC9213; 48 | --gold-8: #A26D0A; 49 | --gold-9: #774B04; 50 | --gold-10: #4D2D00; 51 | 52 | --yellow-1: #FEFFE8; 53 | --yellow-2: #FEFEBE; 54 | --yellow-3: #FDFA94; 55 | --yellow-4: #FCF26B; 56 | --yellow-5: #FBE842; 57 | --yellow-6: #FADC19; 58 | --yellow-7: #CFAF0F; 59 | --yellow-8: #A38408; 60 | --yellow-9: #785D03; 61 | --yellow-10: #4D3800; 62 | 63 | --lime-1: #FCFFE8; 64 | --lime-2: #EDF8BB; 65 | --lime-3: #DCF190; 66 | --lime-4: #C9E968; 67 | --lime-5: #B5E241; 68 | --lime-6: #9FDB1D; 69 | --lime-7: #7EB712; 70 | --lime-8: #5F940A; 71 | --lime-9: #437004; 72 | --lime-10: #2A4D00; 73 | 74 | --green-1: #E8FFEA; 75 | --green-2: #AFF0B5; 76 | --green-3: #7BE188; 77 | --green-4: #4CD263; 78 | --green-5: #23C343; 79 | --green-6: #00B42A; 80 | --green-7: #009A29; 81 | --green-8: #008026; 82 | --green-9: #006622; 83 | --green-10: #004D1C; 84 | 85 | --cyan-1: #E8FFFB; 86 | --cyan-2: #B7F4EC; 87 | --cyan-3: #89E9E0; 88 | --cyan-4: #5EDFD6; 89 | --cyan-5: #37D4CF; 90 | --cyan-6: #14C9C9; 91 | --cyan-7: #0DA5AA; 92 | --cyan-8: #07828B; 93 | --cyan-9: #03616C; 94 | --cyan-10: #00424D; 95 | 96 | --blue-1: #E8F7FF; 97 | --blue-2: #C3E7FE; 98 | --blue-3: #9FD4FD; 99 | --blue-4: #7BC0FC; 100 | --blue-5: #57A9FB; 101 | --blue-6: #3491FA; 102 | --blue-7: #206CCF; 103 | --blue-8: #114BA3; 104 | --blue-9: #063078; 105 | --blue-10: #001A4D; 106 | 107 | --arcoblue-1: #E8F3FF; 108 | --arcoblue-2: #BEDAFF; 109 | --arcoblue-3: #94BFFF; 110 | --arcoblue-4: #6AA1FF; 111 | --arcoblue-5: #4080FF; 112 | --arcoblue-6: #165DFF; 113 | --arcoblue-7: #0E42D2; 114 | --arcoblue-8: #072CA6; 115 | --arcoblue-9: #031A79; 116 | --arcoblue-10: #000D4D; 117 | 118 | --purple-1: #F5E8FF; 119 | --purple-2: #DDBEF6; 120 | --purple-3: #C396ED; 121 | --purple-4: #A871E3; 122 | --purple-5: #8D4EDA; 123 | --purple-6: #722ED1; 124 | --purple-7: #551DB0; 125 | --purple-8: #3C108F; 126 | --purple-9: #27066E; 127 | --purple-10: #16004D; 128 | 129 | --pinkpurple-1: #FFE8FB; 130 | --pinkpurple-2: #F7BAEF; 131 | --pinkpurple-3: #F08EE6; 132 | --pinkpurple-4: #E865DF; 133 | --pinkpurple-5: #E13EDB; 134 | --pinkpurple-6: #D91AD9; 135 | --pinkpurple-7: #B010B6; 136 | --pinkpurple-8: #8A0993; 137 | --pinkpurple-9: #650370; 138 | --pinkpurple-10: #42004D; 139 | 140 | --magenta-1: #FFE8F1; 141 | --magenta-2: #FDC2DB; 142 | --magenta-3: #FB9DC7; 143 | --magenta-4: #F979B7; 144 | --magenta-5: #F754A8; 145 | --magenta-6: #F5319D; 146 | --magenta-7: #CB1E83; 147 | --magenta-8: #A11069; 148 | --magenta-9: #77064F; 149 | --magenta-10: #4D0034; 150 | 151 | --gray-1: #f7f8fa; 152 | --gray-2: #f2f3f5; 153 | --gray-3: #e5e6eb; 154 | --gray-4: #c9cdd4; 155 | --gray-5: #a9aeb8; 156 | --gray-6: #86909c; 157 | --gray-7: #6b7785; 158 | --gray-8: #4e5969; 159 | --gray-9: #272e3b; 160 | --gray-10: #1d2129; 161 | 162 | } 163 | 164 | @media(prefers-color-scheme: dark) { 165 | :root { 166 | --red-1: #4D000A; 167 | --red-2: #770611; 168 | --red-3: #A1161F; 169 | --red-4: #CB2E34; 170 | --red-5: #F54E4E; 171 | --red-6: #F76965; 172 | --red-7: #F98D86; 173 | --red-8: #FBB0A7; 174 | --red-9: #FDD1CA; 175 | --red-10: #FFF0EC; 176 | 177 | --orangered-1: #4D0E00; 178 | --orangered-2: #771E05; 179 | --orangered-3: #A23714; 180 | --orangered-4: #CC5729; 181 | --orangered-5: #F77E45; 182 | --orangered-6: #F9925A; 183 | --orangered-7: #FAAD7D; 184 | --orangered-8: #FCC6A1; 185 | --orangered-9: #FDDEC5; 186 | --orangered-10: #FFF4EB; 187 | 188 | --orange-1: #4D1B00; 189 | --orange-2: #793004; 190 | --orange-3: #A64B0A; 191 | --orange-4: #D26913; 192 | --orange-5: #FF8D1F; 193 | --orange-6: #FF9626; 194 | --orange-7: #FFB357; 195 | --orange-8: #FFCD87; 196 | --orange-9: #FFE3B8; 197 | --orange-10: #FFF7E8; 198 | 199 | --gold-1: #4D2D00; 200 | --gold-2: #774B04; 201 | --gold-3: #A26F0F; 202 | --gold-4: #CC961F; 203 | --gold-5: #F7C034; 204 | --gold-6: #F9CC44; 205 | --gold-7: #FADC6C; 206 | --gold-8: #FCE995; 207 | --gold-9: #FDF4BE; 208 | --gold-10: #FFFCE8; 209 | 210 | --yellow-1: #4D3800; 211 | --yellow-2: #785E07; 212 | --yellow-3: #A38614; 213 | --yellow-4: #CFB325; 214 | --yellow-5: #FAE13C; 215 | --yellow-6: #FBE94B; 216 | --yellow-7: #FCF374; 217 | --yellow-8: #FDFA9D; 218 | --yellow-9: #FEFEC6; 219 | --yellow-10: #FEFFF0; 220 | 221 | --lime-1: #2A4D00; 222 | --lime-2: #447006; 223 | --lime-3: #629412; 224 | --lime-4: #84B723; 225 | --lime-5: #A8DB39; 226 | --lime-6: #B8E24B; 227 | --lime-7: #CBE970; 228 | --lime-8: #DEF198; 229 | --lime-9: #EEF8C2; 230 | --lime-10: #FDFFEE; 231 | 232 | --green-1: #004D1C; 233 | --green-2: #046625; 234 | --green-3: #0A802D; 235 | --green-4: #129A37; 236 | --green-5: #1DB440; 237 | --green-6: #27C346; 238 | --green-7: #50D266; 239 | --green-8: #7EE18B; 240 | --green-9: #B2F0B7; 241 | --green-10: #EBFFEC; 242 | 243 | --cyan-1: #00424D; 244 | --cyan-2: #06616C; 245 | --cyan-3: #11838B; 246 | --cyan-4: #1FA6AA; 247 | --cyan-5: #30C9C9; 248 | --cyan-6: #3FD4CF; 249 | --cyan-7: #66DFD7; 250 | --cyan-8: #90E9E1; 251 | --cyan-9: #BEF4ED; 252 | --cyan-10: #F0FFFC; 253 | 254 | --blue-1: #001A4D; 255 | --blue-2: #052F78; 256 | --blue-3: #134CA3; 257 | --blue-4: #2971CF; 258 | --blue-5: #469AFA; 259 | --blue-6: #5AAAFB; 260 | --blue-7: #7DC1FC; 261 | --blue-8: #A1D5FD; 262 | --blue-9: #C6E8FE; 263 | --blue-10: #EAF8FF; 264 | 265 | --arcoblue-1: #000D4D; 266 | --arcoblue-2: #041B79; 267 | --arcoblue-3: #0E32A6; 268 | --arcoblue-4: #1D4DD2; 269 | --arcoblue-5: #306FFF; 270 | --arcoblue-6: #3C7EFF; 271 | --arcoblue-7: #689FFF; 272 | --arcoblue-8: #93BEFF; 273 | --arcoblue-9: #BEDAFF; 274 | --arcoblue-10: #EAF4FF; 275 | 276 | --purple-1: #16004D; 277 | --purple-2: #27066E; 278 | --purple-3: #3E138F; 279 | --purple-4: #5A25B0; 280 | --purple-5: #7B3DD1; 281 | --purple-6: #8E51DA; 282 | --purple-7: #A974E3; 283 | --purple-8: #C59AED; 284 | --purple-9: #DFC2F6; 285 | --purple-10: #F7EDFF; 286 | 287 | --pinkpurple-1: #42004D; 288 | --pinkpurple-2: #650370; 289 | --pinkpurple-3: #8A0D93; 290 | --pinkpurple-4: #B01BB6; 291 | --pinkpurple-5: #D92ED9; 292 | --pinkpurple-6: #E13DDB; 293 | --pinkpurple-7: #E866DF; 294 | --pinkpurple-8: #F092E6; 295 | --pinkpurple-9: #F7C1F0; 296 | --pinkpurple-10: #FFF2FD; 297 | 298 | --magenta-1: #4D0034; 299 | --magenta-2: #770850; 300 | --magenta-3: #A1176C; 301 | --magenta-4: #CB2B88; 302 | --magenta-5: #F545A6; 303 | --magenta-6: #F756A9; 304 | --magenta-7: #F97AB8; 305 | --magenta-8: #FB9EC8; 306 | --magenta-9: #FDC3DB; 307 | --magenta-10: #FFE8F1; 308 | 309 | --gray-10: #f7f8fa; 310 | --gray-9: #f2f3f5; 311 | --gray-8: #e5e6eb; 312 | --gray-7: #c9cdd4; 313 | --gray-6: #a9aeb8; 314 | --gray-5: #86909c; 315 | --gray-4: #6b7785; 316 | --gray-3: #4e5969; 317 | --gray-2: #272e3b; 318 | --gray-1: #1d2129; 319 | 320 | } 321 | } -------------------------------------------------------------------------------- /src/css/courseAnnouncement.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | @import 'main.css'; 9 | 10 | /* 重置公告样式 */ 11 | #containerdiv, 12 | #announcementList { 13 | border: none; 14 | } 15 | 16 | #announcementList > li { 17 | border: 1px solid var(--c-border); 18 | background: var(--c-card); 19 | margin-bottom: 2em; 20 | border-radius: 5px; 21 | position: relative; 22 | } 23 | 24 | #announcementList > li > h3:first-child { 25 | color: var(--c-title) !important; 26 | font-size: 18px; 27 | } 28 | 29 | #announcementList > li > .announcementInfo { 30 | position: absolute; 31 | top: 50px; 32 | left: 30px; 33 | height: 60px; 34 | border: none; 35 | display: flex; 36 | flex-direction: row; 37 | width: fit-content; 38 | justify-content: flex-start; 39 | padding: 0; 40 | margin-top: 5px; 41 | } 42 | 43 | #announcementList > li > .announcementInfo > p { 44 | display: inline; 45 | width: fit-content; 46 | height: fit-content; 47 | border-radius: 1000px; 48 | border: 1px solid var(--c-border); 49 | background-color: var(--c-label); 50 | padding: 0.2em 1em; 51 | color: var(--c-text); 52 | margin-right: 1em; 53 | } 54 | 55 | #announcementList > li > .announcementInfo > p > span { 56 | display: none; 57 | } 58 | 59 | #announcementList > li > .details { 60 | margin: 0; 61 | margin-top: 40px; 62 | } 63 | 64 | #announcementList > li > .details * { 65 | font-family: inherit !important; 66 | color: var(--c-text) !important; 67 | text-decoration: none !important; 68 | font-style: normal !important; 69 | font-size: 14px !important; 70 | line-height: 1.6; 71 | } 72 | 73 | #announcementList > li > .details *[style*='background-color'], 74 | #announcementList > li > .details *[style*='text-decoration'] { 75 | background-color: transparent !important; 76 | background: linear-gradient(180deg, transparent 90%, var(--red-2) 90%) !important; 77 | } 78 | #announcementList > li > .details *[style*='text-decoration-style: initial;']:not([style*='background-color']) { 79 | background: none !important; 80 | } 81 | /* #announcementList>li>.details strong { 82 | padding: 0 0.4em; 83 | background-color: var(--c-label); 84 | margin-left: 0.2em; 85 | margin-right: 0.2em; 86 | border-radius: 3px; 87 | } */ 88 | 89 | #announcementList > li > .details strong { 90 | color: var(--c-accent) !important; 91 | font-weight: normal; 92 | } 93 | 94 | #announcementList > li > .details a { 95 | color: var(--c-accent) !important; 96 | background: linear-gradient(180deg, transparent 90%, var(--c-link) 90%) !important; 97 | } 98 | 99 | #announcementList > li > .details a:hover { 100 | background: linear-gradient(180deg, var(--c-hover) 90%, var(--c-link) 90%) !important; 101 | } 102 | 103 | /* #announcementList>li>.details a[value]:before { 104 | display: inline-block; 105 | content: ""; 106 | background: url('/css/src/link.svg'); 107 | background-size: 100%; 108 | background-position: center center; 109 | width: 20px; 110 | height: 19px; 111 | background-repeat: no-repeat; 112 | } */ 113 | #announcementList > li > .details > p:first-child span { 114 | display: flex; 115 | flex-direction: flex-start; 116 | justify-content: center; 117 | align-items: center; 118 | width: fit-content; 119 | } 120 | 121 | #announcementList > li > .details > p:first-child span:before { 122 | content: ''; 123 | display: inline-block; 124 | background: var(--i-watch); 125 | margin-right: 1em; 126 | background-size: 100%; 127 | background-position: center center; 128 | width: 20px; 129 | height: 20px; 130 | background-repeat: no-repeat; 131 | } 132 | -------------------------------------------------------------------------------- /src/css/courseAssignmentUpload.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | @import 'main.css'; 9 | 10 | /* 移除Content边框 */ 11 | #containerdiv { 12 | border: none; 13 | } 14 | 15 | /* form卡片样式 */ 16 | .container > form { 17 | background: var(--c-card); 18 | border-radius: 5px; 19 | border: 1px solid var(--c-border); 20 | padding: 10px; 21 | } 22 | 23 | .container > form * { 24 | background: var(--c-card); 25 | color: var(--c-text); 26 | font-style: normal; 27 | font-family: sans-serif; 28 | } 29 | /* 提示文本的颜色修改 */ 30 | .container > form #instructions *[style*='color'] { 31 | color: var(--c-text) !important; 32 | background: transparent !important; 33 | background: linear-gradient(180deg, transparent 90%, var(--red-2) 90%) !important; 34 | } 35 | #dataCollectionContainer, 36 | #dataCollectionContainer > div { 37 | background: var(--c-card); 38 | } 39 | 40 | /* 顶部空白 不知道干啥 暂且不动 */ 41 | /* #dataCollectionContainer>.submitStepTop { 42 | } */ 43 | 44 | /* 各步骤布局 */ 45 | #dataCollectionContainer > div[id^='step'] { 46 | border-top: none; 47 | background: var(--c-card) !important; 48 | padding-bottom: 16px; 49 | } 50 | 51 | /* 步骤标题 */ 52 | #dataCollectionContainer > div[id^='step'] > .steptitle { 53 | position: relative; 54 | top: 0; 55 | margin: 0; 56 | padding: 0; 57 | margin-bottom: 10px; 58 | font-size: 18px; 59 | color: var(--c-title); 60 | } 61 | 62 | /* 边框 */ 63 | div[id*='stepcontent'] { 64 | border-bottom: 1px solid var(--c-border); 65 | background: var(--c-card) !important; 66 | } 67 | 68 | /* 作业信息引用着色 */ 69 | #metadata div.metaSection { 70 | border: none; 71 | border-left: 6px solid var(--cyan-6); 72 | background: var(--cyan-2) !important; 73 | } 74 | 75 | #metadata div[class*='meta'], 76 | #metadata div[class*='meta'] span.metaSubInfo { 77 | background: transparent; 78 | } 79 | 80 | #metadata div.metaField { 81 | color: var(--cyan-8); 82 | font-size: 16px; 83 | } 84 | 85 | /* 全局按钮样式更改 */ 86 | form[name='uploadAssignmentForm'] a#submissionLink, 87 | form[name='uploadAssignmentForm'] input[type='file'], 88 | form[name='uploadAssignmentForm'] input[type='button'] { 89 | border-radius: 5px; 90 | background: var(--c-button); 91 | box-shadow: none; 92 | color: var(--c-text); 93 | } 94 | 95 | form[name='uploadAssignmentForm'] a#submissionLink:hover, 96 | form[name='uploadAssignmentForm'] input[type='file']:hover, 97 | form[name='uploadAssignmentForm'] input[type='button']:hover { 98 | background: var(--gray-2); 99 | color: var(--c-title); 100 | font-weight: bold; 101 | } 102 | 103 | /* 提交按钮特判 */ 104 | form[name='uploadAssignmentForm'] input[type='submit'].submit { 105 | border-radius: 5px; 106 | background: var(--c-primary-light); 107 | box-shadow: none; 108 | color: var(--c-primary); 109 | } 110 | 111 | form[name='uploadAssignmentForm'] input[type='submit'].submit:hover { 112 | background: var(--blue-2); 113 | /* box-shadow: none ; */ 114 | color: var(--blue-7); 115 | font-weight: bold; 116 | } 117 | 118 | /* 步骤布局 */ 119 | form[name='uploadAssignmentForm'] ol[role='presentation'] > li { 120 | display: flex; 121 | justify-content: space-between; 122 | align-items: flex-start; 123 | padding-left: 20px; 124 | border: 2px solid transparent; 125 | margin: 10px; 126 | } 127 | 128 | /* 标签统一宽度 */ 129 | form[name='uploadAssignmentForm'] ol[role='presentation'] > li div.label { 130 | width: 40px; 131 | min-width: none; 132 | max-width: none; 133 | } 134 | 135 | /* 文件上传区域样式修改 */ 136 | form[name='uploadAssignmentForm'] ol[role='presentation'] > li.dropzone { 137 | border: 2px dashed var(--c-border) !important; 138 | } 139 | 140 | form[name='uploadAssignmentForm'] ol[role='presentation'] > li.dropzone.hover { 141 | background: var(--c-hover) !important; 142 | } 143 | 144 | form[name='uploadAssignmentForm'] ol[role='presentation'] > li.dropzone div, 145 | form[name='uploadAssignmentForm'] ol[role='presentation'] > li.dropzone label { 146 | background: transparent; 147 | } 148 | 149 | /* 上传文件列表 */ 150 | form[name='uploadAssignmentForm'] #newFile_table * { 151 | border-color: var(--c-border) !important; 152 | } 153 | 154 | form[name='uploadAssignmentForm'] #newFile_table img { 155 | /* content: var(--i-file); 156 | height: 15px; */ 157 | display: none; 158 | } 159 | 160 | form[name='uploadAssignmentForm'] li#newFile_listHtmlDiv { 161 | margin-top: 30px !important; 162 | } 163 | 164 | /* 注释区样式 */ 165 | form[name='uploadAssignmentForm'] table.mceLayout { 166 | border: 1px solid var(--c-border) !important; 167 | border-radius: 5px; 168 | padding: 5px; 169 | } 170 | 171 | form[name='uploadAssignmentForm'] table.mceLayout * { 172 | border: none !important; 173 | background: transparent !important; 174 | box-shadow: none !important; 175 | } 176 | 177 | /* 聚焦提示下属margin */ 178 | form[name='uploadAssignmentForm'] .vtbehelp { 179 | margin-bottom: 5px; 180 | } 181 | 182 | form[name='uploadAssignmentForm'] .mceFirst:hover, 183 | form[name='uploadAssignmentForm'] .mceLast:hover { 184 | background: transparent; 185 | } 186 | 187 | /* 语法检查按钮 */ 188 | form[name='uploadAssignmentForm'] .defaultSkin .mceSplitButton span.mceAction { 189 | background-image: var(--i-check); 190 | background-repeat: no-repeat; 191 | background-position: center center; 192 | background-size: contain; 193 | } 194 | 195 | /* 语法检查下拉选择框 */ 196 | form[name='uploadAssignmentForm'] div[role='listbox'] { 197 | background: var(--c-card); 198 | border: 1px solid var(--c-border); 199 | border-radius: 5px; 200 | padding: 5px; 201 | box-shadow: var(--c-box-shadow); 202 | } 203 | 204 | form[name='uploadAssignmentForm'] div[role='listbox'] * { 205 | border: none !important; 206 | } 207 | 208 | form[name='uploadAssignmentForm'] .defaultSkin .mceMenu { 209 | top: 0; 210 | left: 0; 211 | position: relative; 212 | } 213 | 214 | .defaultSkin .mceMenu table, 215 | .defaultSkin .mceMenuItemTitle a { 216 | background: var(--c-card); 217 | } 218 | 219 | .defaultSkin .mceMenu .mceMenuItemEnabled a:hover, 220 | .defaultSkin .mceMenu .mceMenuItemActive { 221 | background: var(--c-hover); 222 | } 223 | 224 | /* TINY深色模式 */ 225 | @media screen and (prefers-color-scheme: dark) { 226 | .tox.tox-tinymce { 227 | -webkit-filter: invert(100%) hue-rotate(180deg); 228 | filter: invert(100%) hue-rotate(180deg); 229 | } 230 | .tox.tox-tinymce svg { 231 | -webkit-filter: invert(100%) hue-rotate(180deg); 232 | filter: invert(100%) hue-rotate(180deg); 233 | } 234 | } 235 | 236 | /* 作业复查界面 */ 237 | #inlineReceipt_good { 238 | background: var(--c-accent); 239 | } 240 | #inlineGrader { 241 | border: 1px solid var(--c-border); 242 | border-radius: 5px; 243 | /* padding: 0 5px; */ 244 | background: var(--c-card); 245 | } 246 | 247 | #inlineGrader * { 248 | color: var(--c-text); 249 | border: none; 250 | box-shadow: none; 251 | background: transparent; 252 | text-decoration: none; 253 | line-height: 1.6; 254 | } 255 | 256 | #inlineGrader .fileTile { 257 | background: var(--c-card) !important; 258 | } 259 | 260 | #inlineGrader .fileTile > img { 261 | content: var(--i-file); 262 | width: 50px; 263 | height: 50px; 264 | } 265 | 266 | #inlineGrader .fileTile > h5 { 267 | color: var(--c-title); 268 | } 269 | 270 | #inlineGrader .fileTile > a { 271 | background: var(--c-button); 272 | border-radius: 5px; 273 | } 274 | 275 | #inlineGrader .fileTile > a:hover { 276 | background: var(--cyan-2); 277 | color: var(--c-title); 278 | font-weight: bold; 279 | } 280 | 281 | #inlineGrader #gradingPanel { 282 | border-left: 1px solid var(--c-border); 283 | padding: 15px 0; 284 | } 285 | 286 | #inlineGrader #gradingPanel .gradingPanelHeader { 287 | border-left: 6px solid var(--cyan-5); 288 | height: auto; 289 | } 290 | 291 | #inlineGrader #gradingPanel .gradingPanelHeader h2 { 292 | margin: 5px 0; 293 | } 294 | 295 | #inlineGrader #gradingPanel .gradingPanelHeader span { 296 | color: var(--c-title); 297 | font-weight: bold; 298 | font-size: 16px; 299 | } 300 | 301 | #inlineGrader .resizeControls { 302 | top: 17px; 303 | border-radius: 5px; 304 | } 305 | 306 | #inlineGrader .resizeControls a { 307 | border-radius: 5px; 308 | } 309 | 310 | #inlineGrader .resizeControls a:hover { 311 | background: var(--c-hover); 312 | } 313 | 314 | #inlineGrader .resizeControls #maximizer_btn { 315 | display: none; 316 | } 317 | 318 | #inlineGrader #gradingPanel h3, 319 | #inlineGrader #gradingPanel h4, 320 | #inlineGrader #gradingPanel span.mainLabel { 321 | color: var(--c-title); 322 | /* padding-bottom: 5px; */ 323 | font-weight: bold; 324 | font-size: 14px; 325 | } 326 | 327 | #inlineGrader #gradingPanel .attemptHeader { 328 | background: var(--cyan-2) !important; 329 | } 330 | 331 | #inlineGrader #gradingPanel div.attemptHeaderLabel { 332 | margin-left: 15px; 333 | } 334 | 335 | #inlineGrader #gradingPanel .attemptContent .segment { 336 | margin: 35px 0; 337 | } 338 | 339 | #inlineGrader #gradingPanel .genericFile { 340 | background-image: var(--i-file); 341 | background-repeat: no-repeat; 342 | background-size: 15px; 343 | background-position: 5px center; 344 | } 345 | 346 | #inlineGrader #gradingPanel .filesList .dwnldBtn { 347 | background-image: var(--i-download); 348 | background-repeat: no-repeat; 349 | background-size: 15px; 350 | background-position: center center; 351 | } 352 | 353 | #inlineGrader #gradingPanel .backLink a { 354 | background: var(--c-card); 355 | border-radius: 5px 0 5px 0; 356 | } 357 | 358 | #inlineGrader #gradingPanel .backLink a:hover { 359 | background: var(--c-hover); 360 | } 361 | 362 | #inlineGrader div.contentDetailsHeader { 363 | margin-top: 15px; 364 | } 365 | -------------------------------------------------------------------------------- /src/css/courseBlankPage.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | @import 'main.css'; 9 | 10 | #containerdiv { 11 | border: 1px solid var(--c-border); 12 | background: var(--c-card); 13 | margin-bottom: 2em; 14 | border-radius: 5px; 15 | padding: 20px 30px; 16 | color: var(--c-text); 17 | } 18 | /* 尝试更改空白页面的字体显示 */ 19 | #containerdiv * { 20 | font-family: inherit !important; 21 | color: var(--c-text) !important; 22 | text-decoration: none !important; 23 | font-style: normal !important; 24 | font-size: 14px !important; 25 | line-height: 1.6; 26 | } 27 | 28 | #containerdiv *[style*='background-color'], 29 | #containerdiv *[style*='text-decoration'] { 30 | background-color: transparent !important; 31 | background: linear-gradient(180deg, transparent 90%, var(--red-2) 90%) !important; 32 | } 33 | #containerdiv *[style*='text-decoration-style: initial;']:not([style*='background-color']) { 34 | background: none !important; 35 | } 36 | -------------------------------------------------------------------------------- /src/css/courseClassGrade.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | @import 'main.css'; 9 | 10 | /*#containerdiv{*/ 11 | /* border-radius: 5px;*/ 12 | /* border:1px solid var(--c-border);*/ 13 | /* background: var(--c-background);*/ 14 | /*}*/ 15 | 16 | #containerdiv { 17 | border: none; 18 | background: var(--c-background); 19 | } 20 | 21 | /*筛选栏*/ 22 | .filterBarHorizontal { 23 | background: var(--c-background); 24 | border-bottom: 1px solid var(--c-border); 25 | } 26 | 27 | #filterby { 28 | display: inline-flex; 29 | height: 100%; 30 | padding-top: 0; 31 | padding-bottom: 0; 32 | } 33 | 34 | #filterby > li { 35 | height: 100%; 36 | position: relative; 37 | } 38 | 39 | #filterby a { 40 | box-sizing: border-box; 41 | height: 100%; 42 | display: flex; 43 | padding: 10px 15px; 44 | box-shadow: none !important; 45 | font-size: 11pt; 46 | font-weight: bold; 47 | /*border:none;*/ 48 | color: var(--c-text); 49 | border-radius: 5px 5px 0 0; 50 | border: none; 51 | border-bottom: 2px solid transparent; 52 | } 53 | 54 | #filterby a:hover { 55 | background: var(--c-hover); 56 | border-bottom: 2px solid var(--c-accent); 57 | } 58 | 59 | #filterby a.active { 60 | color: var(--c-accent); 61 | background: var(--c-background); 62 | border-bottom: 2px solid var(--c-accent); 63 | } 64 | 65 | .filterBarHorizontal select { 66 | -webkit-appearance: none; 67 | -moz-appearance: none; 68 | appearance: none; 69 | background: var(--c-card); 70 | color: var(--c-text); 71 | border: 1px solid var(--c-border); 72 | border-radius: 3px; 73 | outline: none; 74 | } 75 | 76 | .filterBarHorizontal select:hover { 77 | background: var(--c-hover); 78 | color: var(--c-title); 79 | } 80 | 81 | /* 面板 */ 82 | .gradeTableNew { 83 | display: flex; 84 | flex-direction: column; 85 | margin-top: 50px; 86 | } 87 | 88 | /* 表头 */ 89 | .gradeTableNew .grades_header { 90 | position: relative; 91 | width: 100%; 92 | padding: 0; 93 | left: 0; 94 | right: 0; 95 | top: 0; 96 | margin-top: 1em; 97 | border: 1px solid var(--c-border); 98 | border-bottom: none; 99 | border-radius: 5px 5px 0 0; 100 | background: var(--c-card); 101 | display: flex; 102 | padding: 0 10px; 103 | height: fit-content; 104 | box-sizing: border-box; 105 | } 106 | 107 | .gradeTableNew .grades_header > div { 108 | color: var(--c-title); 109 | font-weight: bold; 110 | font-size: 11pt !important; 111 | /*margin:10px 0;*/ 112 | margin-top: 10px; 113 | border-bottom: 1px solid var(--c-border); 114 | padding-bottom: 10px !important; 115 | margin-bottom: 4px; 116 | height: fit-content !important; 117 | } 118 | 119 | /* 表格 */ 120 | .gradeTableNew > #grades_wrapper { 121 | width: 100%; 122 | display: block; 123 | margin-top: 0; 124 | border: 1px solid var(--c-border); 125 | border-top: none; 126 | border-radius: 0 0 5px 5px; 127 | background: var(--c-card); 128 | padding: 0 10px 10px 10px; 129 | box-sizing: border-box; 130 | } 131 | 132 | #grades_wrapper > div { 133 | border-radius: 5px; 134 | padding: 5px 0; 135 | border: none; 136 | box-sizing: border-box; 137 | height: 65px; 138 | } 139 | 140 | /*斑马纹*/ 141 | #grades_wrapper > div:not(.calculatedRow):nth-child(2n) { 142 | background: var(--gray-1); 143 | } 144 | 145 | #grades_wrapper > div:not(.calculatedRow):hover { 146 | background: var(--c-hover); 147 | } 148 | 149 | /* 计算行特殊处理 */ 150 | #grades_wrapper .calculatedRow { 151 | box-shadow: none; 152 | border: none; 153 | /*border-radius: 0 5px 5px 0;*/ 154 | box-sizing: border-box; 155 | border-left: 6px solid var(--gray-4); 156 | border-radius: 0 5px 5px 0; 157 | background: var(--gray-2); 158 | background: linear-gradient(90deg, var(--gray-2) 10%, var(--c-card) 90%); 159 | margin-bottom: 10px; 160 | } 161 | 162 | #grades_wrapper .calculatedRow input { 163 | box-shadow: none; 164 | text-decoration: none !important; 165 | border: none; 166 | color: var(--c-text); 167 | } 168 | 169 | /* 第一列单元格样式 */ 170 | #grades_wrapper > div > div.gradable { 171 | height: 100%; 172 | } 173 | 174 | #grades_wrapper > div > div.gradable, 175 | #grades_wrapper > div > div.gradable > a { 176 | color: var(--gray-7); 177 | font-weight: bold; 178 | font-size: 14px; 179 | } 180 | 181 | #grades_wrapper > div > div.gradable > a { 182 | /*overflow: visible;*/ 183 | /*border-bottom:2px solid var(--c-accent);*/ 184 | width: fit-content; 185 | /*height:18px;*/ 186 | display: block; 187 | color: var(--blue-6); 188 | overflow: visible; 189 | margin-bottom: 8px; 190 | } 191 | 192 | #grades_wrapper > div > div.gradable > div { 193 | font-size: 12px; 194 | display: inline; 195 | /*width: fit-content;*/ 196 | color: var(--c-text); 197 | /*background: var(--c-label);*/ 198 | } 199 | 200 | /* 达到block-inline-block的效果 */ 201 | #grades_wrapper > div > div.gradable > div:first-child:before { 202 | display: block; 203 | margin-bottom: 8px; 204 | content: ''; 205 | } 206 | 207 | #grades_wrapper > div > div.gradable > a + div:before { 208 | display: none; 209 | } 210 | 211 | /* 其他列div */ 212 | #grades_wrapper > div > div.gradable > div { 213 | margin-right: 8px; 214 | } 215 | 216 | #grades_wrapper > div > div.activity span { 217 | color: var(--c-text); 218 | } 219 | 220 | #grades_wrapper > div > div.grade span.grade { 221 | color: var(--cyan-7); 222 | } 223 | 224 | #grades_wrapper > div > div.grade span.pointsPossible { 225 | color: var(--c-text); 226 | } 227 | 228 | /*icon更改*/ 229 | #grades_wrapper > div > div img.tooltip-icon { 230 | width: 18px; 231 | content: var(--i-tip); 232 | } 233 | 234 | #grades_wrapper > div > div i.icon-comment:before { 235 | width: 18px; 236 | background: var(--i-comment); 237 | background-size: contain !important; 238 | background-repeat: no-repeat; 239 | background-position: center center; 240 | content: '.'; 241 | color: transparent; 242 | } 243 | 244 | /*提示页面*/ 245 | #grades_wrapper > div > div .tooltip { 246 | background: var(--c-card); 247 | border: 1px solid var(--c-border); 248 | box-shadow: none !important; 249 | color: var(--c-title); 250 | text-shadow: none; 251 | } 252 | 253 | #grades_wrapper > div > div .tooltipContainer-left .tooltip:after { 254 | text-shadow: none; 255 | } 256 | 257 | #submissionReceipts { 258 | background: var(--c-card); 259 | color: var(--c-text); 260 | font-family: sans-serif; 261 | } 262 | 263 | #grades_wrapper > div { 264 | position: relative; 265 | } 266 | 267 | #grades_wrapper .itemStats { 268 | position: absolute; 269 | top: 0; 270 | right: 0px; 271 | padding: 5px; 272 | } 273 | 274 | /* 留言框 */ 275 | div.lb-overlay { 276 | z-index: 2000; 277 | } 278 | 279 | body div.lb-wrapper { 280 | background-color: var(--c-card) !important; 281 | } 282 | body div.lb-wrapper div.lb-header { 283 | color: var(--c-text); 284 | background: transparent; 285 | } 286 | 287 | body div.lb-wrapper div.lb-content { 288 | background: transparent; 289 | } 290 | 291 | body div.lb-wrapper div.lb-content .container { 292 | color: var(--c-text); 293 | border: none; 294 | } -------------------------------------------------------------------------------- /src/css/courseClassin.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | @import 'main.css'; 9 | 10 | #pageTitleDiv > *:not([id='pageTitleBar']) { 11 | display: none; 12 | } 13 | 14 | #pageTitleDiv { 15 | color: transparent; 16 | } 17 | 18 | #actionbar { 19 | border: none; 20 | border-bottom: 1px solid var(--c-border); 21 | } 22 | 23 | #actionbar .mainButton > a { 24 | color: var(--c-text); 25 | border-radius: 5px 5px 0 0; 26 | border-bottom: 2px solid transparent !important; 27 | } 28 | 29 | #actionbar .mainButton > a:hover { 30 | background: var(--c-hover); 31 | border-bottom: 2px solid var(--c-accent) !important; 32 | } 33 | 34 | #searchForm { 35 | display: none; 36 | } 37 | 38 | .container { 39 | border: 1px solid var(--c-border); 40 | background: var(--c-card); 41 | border-radius: 5px; 42 | } 43 | 44 | .container * { 45 | font-family: inherit !important; 46 | color: var(--c-text) !important; 47 | text-decoration: none !important; 48 | font-style: normal !important; 49 | font-size: 14px; 50 | line-height: 1.6; 51 | } 52 | 53 | .container .backLink a { 54 | background: var(--c-card); 55 | } 56 | 57 | .container .backLink a:hover { 58 | background-color: var(--c-hover); 59 | } 60 | -------------------------------------------------------------------------------- /src/css/courseContent.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | @import 'main.css'; 9 | 10 | /* 限制页面最低高度 */ 11 | body { 12 | position: relative; 13 | display: flex; 14 | flex-direction: column; 15 | min-height: 100%; 16 | } 17 | 18 | .brandingImgWrap, 19 | #appTabList > tbody > tr, 20 | .hideoff, 21 | #quick_links_wrap, 22 | #global-avatar, 23 | #global-toggle-img { 24 | display: none !important; 25 | /* visibility: hidden; */ 26 | } 27 | 28 | /* 个人界面面板 */ 29 | #global-nav-link > * { 30 | display: none; 31 | } 32 | 33 | #global-nav-link, 34 | #global-nav-link:hover, 35 | #global-nav-link:focus { 36 | color: transparent; 37 | width: 32px; 38 | height: 32px; 39 | padding: 0; 40 | background: transparent; 41 | background-image: var(--i-remind) !important; 42 | background-size: 80%; 43 | background-repeat: no-repeat; 44 | background-position: center center; 45 | border: none; 46 | outline: none; 47 | } 48 | 49 | /* 退出按键 */ 50 | .global-nav-bar a.logout-link, 51 | .global-nav-bar a.logout-link:hover, 52 | .global-nav-bar a.logout-link:focus { 53 | color: transparent; 54 | width: 32px; 55 | height: 32px; 56 | padding: 0; 57 | background: transparent; 58 | background-image: var(--i-exit) !important; 59 | background-size: 80%; 60 | background-repeat: no-repeat !important; 61 | background-position: center center !important; 62 | } 63 | 64 | /* 替换背景 */ 65 | /* .tabWrapper-right, 66 | #globalNavPageNavArea, 67 | #topTabs, */ 68 | .container, 69 | .locationPane, 70 | .contentPane, 71 | .contentBox { 72 | background-color: var(--c-background); 73 | } 74 | 75 | /* 移除边框 */ 76 | #containerdiv { 77 | border: none; 78 | } 79 | 80 | /* 全局Container */ 81 | /*#containerdiv{*/ 82 | /* border-radius: 5px!important;*/ 83 | /* border:1px solid var(--c-border)!important;*/ 84 | /*}*/ 85 | 86 | /* 重置导航栏布局 */ 87 | .tabWrapper-right, 88 | #globalNavPageNavArea, 89 | #topTabs { 90 | /* position: absolute; */ 91 | /* width: fit-content; */ 92 | background-color: var(--c-navbar) !important; 93 | } 94 | 95 | #globalNavPageNavArea { 96 | padding: 1em 0; 97 | height: 60px; 98 | box-sizing: border-box; 99 | /* vertical-align: middle; */ 100 | display: flex; 101 | text-align: right; 102 | justify-content: flex-end; 103 | flex-direction: row; 104 | padding-right: 140px; 105 | background: var(--c-navbar) var(--i-logo) no-repeat 2em center / auto 30px !important; 106 | border-bottom: 1px solid var(--c-border); 107 | position: fixed; 108 | width: 100%; 109 | z-index: 30; 110 | } 111 | 112 | .tabWrapper-right, 113 | .bouncer[role='presentation'] { 114 | width: fit-content; 115 | } 116 | 117 | body .global-nav-bar-wrap { 118 | position: fixed; 119 | /* left: 90vw; */ 120 | right: 20px; 121 | display: flex; 122 | /* height: fit-content; */ 123 | justify-content: flex-end; 124 | flex-direction: row-reverse; 125 | background-color: var(--c-navbar); 126 | width: 100px; 127 | height: 60px; 128 | box-sizing: border-box; 129 | /* margin-right: 10px; */ 130 | /* transform: translateX(calc(90vw - 120px)); */ 131 | margin: 0; 132 | padding: 0; 133 | border-bottom: 1px solid var(--c-border); 134 | } 135 | 136 | .global-nav-bar { 137 | /* margin: 30px 5px; */ 138 | margin: 0; 139 | float: none !important; 140 | height: 60px !important; 141 | display: flex; 142 | /* display: inline-block; */ 143 | /* background-color: var(--c-navbar); */ 144 | flex-direction: row-reverse; 145 | justify-content: center; 146 | align-items: center; 147 | } 148 | 149 | .global-nav-bar:not(:first-child) { 150 | margin: 0 5px; 151 | } 152 | 153 | /* .nav-link { 154 | transform: translateY(-50%); 155 | } */ 156 | 157 | table.bouncer, 158 | .appTabs td.active, 159 | .appTabs a:hover span, 160 | .appTabs a:focus span { 161 | border: none; 162 | } 163 | 164 | .topTabs .tabWrapper-right { 165 | height: fit-content; 166 | padding: 0; 167 | } 168 | 169 | #globalNavPageNavArea a, 170 | #globalNavPageNavArea td { 171 | padding: 0 !important; 172 | } 173 | 174 | /* 课程标题栏 */ 175 | #breadcrumbs { 176 | /* display: inline-block; */ 177 | float: right; 178 | /* width: 1000px; */ 179 | width: calc(100% - min(25%, 300px)); 180 | padding: 1.2em 1em 1em 1em; 181 | box-sizing: border-box; 182 | height: 80px; 183 | margin-bottom: 1em; 184 | margin-top: 60px; 185 | z-index: 10; 186 | color: var(--c-title); 187 | background-color: var(--c-background); 188 | display: flex; 189 | text-align: center; 190 | justify-content: center; 191 | border: none; 192 | } 193 | 194 | /*跳转到其他课程的链接删除*/ 195 | #breadcrumbs .coursePath *:not(:first-child) { 196 | display: none; 197 | } 198 | 199 | #breadcrumbs .coursePath { 200 | padding: 0; 201 | margin: 0; 202 | border-right: none; 203 | } 204 | 205 | #breadcrumb_controls_id, 206 | #breadcrumbs li:not([class*='coursePath']) { 207 | display: none; 208 | } 209 | 210 | #breadcrumbs span { 211 | font-size: 18pt; 212 | color: var(--c-title); 213 | -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) both; 214 | animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) both; 215 | } 216 | 217 | /* 置高 */ 218 | #globalNavPageContentArea { 219 | flex-grow: 1; 220 | } 221 | .locationPane { 222 | min-height: 100%; 223 | } 224 | #globalNavPageNavArea { 225 | flex-shrink: 0; 226 | } 227 | /* #globalNavPageContentArea, 228 | #globalNavPageContentArea .locationPane, 229 | #contentPanel, 230 | div#content, 231 | div.container { 232 | height: fit-content !important; 233 | min-height: 100vh; 234 | } */ 235 | 236 | nav.navigationPane { 237 | height: 100%; 238 | transition: none !important; 239 | } 240 | 241 | nav.navigationPane:after { 242 | content: 'PKU Art @ Arthals'; 243 | display: block; 244 | background-color: var(--c-sidebar); 245 | position: absolute; 246 | bottom: 80px; 247 | left: 50%; 248 | transform: translateX(-50%); 249 | color: var(--c-text); 250 | height: 20px; 251 | z-index: 99999; 252 | opacity: 0.3; 253 | visibility: visible !important; 254 | } 255 | 256 | /* 侧栏样式 */ 257 | .locationPane nav { 258 | width: min(25%, 300px) !important; 259 | position: fixed; 260 | margin-top: 60px; 261 | } 262 | 263 | #menuWrap { 264 | border-right: 1px solid var(--c-border); 265 | } 266 | 267 | #menuWrap > #puller { 268 | display: none; 269 | } 270 | /* 禁止左侧边栏收缩 */ 271 | .navcollapsed { 272 | margin-left: 0; 273 | } 274 | 275 | /* 侧栏背景 */ 276 | #menuWrap, 277 | .navPaletteContent, 278 | #courseMenuPalette_contents li, 279 | #courseMenuPalette div.navPaletteContent { 280 | background-color: var(--c-sidebar) !important; 281 | border-top: none; 282 | } 283 | 284 | #menuWrap .navPalette.tools { 285 | border-top: none; 286 | } 287 | 288 | /* 移除装饰性元素 */ 289 | .actionBarMicro, 290 | li.divider, 291 | #copyright, 292 | #menuWrap li > hr { 293 | display: none !important; 294 | } 295 | 296 | /* 选项着色 */ 297 | #courseMenuPalette_contents li * { 298 | color: var(--c-text) !important; 299 | font-size: 11pt; 300 | } 301 | 302 | /* 标题着色 */ 303 | #menuWrap a[title] { 304 | background: none; 305 | font-size: 12pt; 306 | font-weight: bold !important; 307 | color: var(--c-title); 308 | } 309 | 310 | #courseMenuPalette_paletteTitleHeading h3 { 311 | background: none !important; 312 | border-left: 6px solid var(--c-accent); 313 | } 314 | 315 | #menuWrap li a, 316 | #menuWrap li span { 317 | background: none !important; 318 | } 319 | 320 | #menuWrap span { 321 | color: var(--c-text); 322 | font-size: 11pt; 323 | } 324 | 325 | #menuWrap a[title]:before, 326 | #menuWrap .submenuLink, 327 | #menuWrap .submenuLink_active { 328 | display: none; 329 | } 330 | 331 | #menuWrap h3.navPaletteCol > a { 332 | border-left: 4px solid var(--c-accent); 333 | margin-left: 10px; 334 | padding-left: 16px; 335 | /* background: var(--c-accent); 336 | background-size: 2px auto; */ 337 | /* display: none; */ 338 | } 339 | 340 | /* 侧栏选项 下划线 Hover样式覆盖 */ 341 | #menuWrap > .menuWrap-inner a:hover, 342 | #menuWrap > .menuWrap-inner span:not(.reorder):hover { 343 | color: var(--red-5) !important; 344 | text-decoration: none; 345 | } 346 | 347 | #menuWrap h3 a:hover { 348 | background-color: var(--c-hover); 349 | transition: all ease-in-out 0.15s; 350 | } 351 | 352 | /* 下划线动画 */ 353 | #menuWrap a span { 354 | /* width: fit-content; */ 355 | display: inline; 356 | position: relative; 357 | } 358 | 359 | #menuWrap a span:nth-child(1):after { 360 | content: ''; 361 | color: transparent; 362 | visibility: visible !important; 363 | position: absolute; 364 | border-bottom: 2px solid var(--red-5); 365 | border-radius: 2px; 366 | bottom: -2px; 367 | /*border-radius: 2px !important;*/ 368 | /*bottom: -2px;*/ 369 | /*向左偏移隐藏*/ 370 | left: 100%; 371 | width: 0; 372 | -webkit-transition: width 350ms, left 350ms; 373 | -moz-transition: width 350ms, left 350ms; 374 | transition: width 350ms, left 350ms; 375 | } 376 | 377 | #menuWrap a span:nth-child(1):hover:after { 378 | visibility: visible !important; 379 | left: 0; 380 | width: 100%; 381 | -webkit-transition: width 350ms; 382 | -moz-transition: width 350ms; 383 | transition: width 350ms; 384 | } 385 | 386 | .navPalette.tools { 387 | border: none; 388 | } 389 | 390 | /* 面板内容样式 */ 391 | #globalNavPageContentArea .locationPane { 392 | background-color: var(--c-background); 393 | } 394 | 395 | .contentPane .shadow { 396 | border: none !important; 397 | background-color: var(--c-background); 398 | } 399 | 400 | #pageTitleDiv { 401 | margin: 0 !important; 402 | } 403 | 404 | #contentPanel { 405 | z-index: 10; 406 | margin-top: 60px; 407 | margin-left: min(25%, 300px); 408 | /* -webkit-animation: fadeInUpStablePixel 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards; 409 | animation: fadeInUpStablePixel 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards; */ 410 | } 411 | 412 | /* 固定最大宽度 */ 413 | #content { 414 | width: min(100%, 1200px); 415 | margin: 0 auto; 416 | } 417 | 418 | /* 动画 */ 419 | #contentPanel { 420 | -webkit-animation: fadeInUpStablePixelForContentBox 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) both; 421 | animation-delay: 500ms; 422 | animation: fadeInUpStablePixelForContentBox 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) both; 423 | } 424 | 425 | .localViewToggle { 426 | display: none; 427 | } 428 | 429 | #pageTitleHeader { 430 | /*color: var(--c-primary);*/ 431 | /*background-color: var(--c-primary-light);*/ 432 | color: var(--blue-7) !important; 433 | background-color: var(--blue-2); 434 | padding: 0.3em 1em; 435 | border-radius: 5px; 436 | font-size: 20px !important; 437 | } 438 | 439 | #pageTitleHeader * { 440 | color: var(--blue-7) !important; 441 | } 442 | 443 | #pageTitleText { 444 | font-weight: bold; 445 | } 446 | 447 | /* 个人导航面板 */ 448 | #vertical_container, 449 | #bottomButtons { 450 | display: none; 451 | } 452 | 453 | #global-nav-tools { 454 | z-index: 9999; 455 | height: inherit !important; 456 | } 457 | 458 | #global-nav-flyout { 459 | box-shadow: none; 460 | border-radius: 5px; 461 | width: 40px !important; 462 | height: 100px !important; 463 | transform: translateY(34px); 464 | background-color: transparent; 465 | /*background-color: #000;*/ 466 | } 467 | 468 | #global-nav-tools { 469 | background-color: var(--c-card); 470 | } 471 | 472 | #global-list-tools { 473 | margin: 0 !important; 474 | box-shadow: var(--c-box-shadow); 475 | border: 1px solid var(--c-border); 476 | padding: 5px; 477 | border-radius: 5px; 478 | background-color: var(--c-card); 479 | /*border:1px solid #EEE;*/ 480 | } 481 | 482 | #global-list-tools > .overview, 483 | #global-list-tools > .stream, 484 | #global-list-tools > .calendar { 485 | display: none; 486 | } 487 | 488 | #global-list-tools > .alerts, 489 | #global-list-tools > .grade { 490 | background-color: var(--c-card); 491 | } 492 | 493 | #global-list-tools > .alerts > a:hover, 494 | #global-list-tools > .grades > a:hover { 495 | background-color: var(--c-hover); 496 | } 497 | 498 | #global-list-tools > .alerts > a { 499 | border-radius: 5px; 500 | background: var(--i-alarm); 501 | /* background-color: var(--c-card) !important; */ 502 | background-size: 60%; 503 | background-repeat: no-repeat; 504 | background-position: center center; 505 | margin: 0 auto; 506 | /* transition: 350ms opacity; */ 507 | } 508 | 509 | #global-list-tools > .grades > a { 510 | border-radius: 5px; 511 | background: var(--i-idcard); 512 | /* background-color: var(--c-card) !important; */ 513 | background-size: 60%; 514 | background-repeat: no-repeat; 515 | background-position: center center; 516 | margin: 0 auto; 517 | /* transition: 350ms opacity; */ 518 | } 519 | 520 | #global-list-tools > .more-link > a { 521 | border-radius: 5px; 522 | background: var(--i-idcard); 523 | /* background-color: var(--c-card) !important; */ 524 | background-size: 60%; 525 | background-repeat: no-repeat; 526 | background-position: center center; 527 | } 528 | 529 | #global-more-tools { 530 | display: none !important; 531 | } 532 | 533 | .mybb-tools li a { 534 | opacity: 1; 535 | background-color: var(--c-card); 536 | } 537 | 538 | .mybb-tools li a:focus, 539 | .mybb-tools li a:focus img { 540 | outline: none; 541 | } 542 | 543 | /* 独立文件链接，如外接课件打开 */ 544 | 545 | #pageList a.individualContent-link { 546 | background-color: transparent !important; 547 | background: linear-gradient(180deg, transparent 90%, var(--red-2) 90%) !important; 548 | } 549 | 550 | #pageList a.individualContent-link span { 551 | text-decoration: none; 552 | color: var(--c-text) !important; 553 | } 554 | 555 | #pageList .liItem, 556 | #pageList .buildList > li { 557 | padding: 1rem 1.5rem; 558 | border-radius: 0.5rem; 559 | border: 1px solid var(--c-border); 560 | width: fit-content; 561 | transition: all ease-in 0.15s; 562 | } 563 | 564 | #pageList .liItem:hover, 565 | #pageList .buildList > li:hover { 566 | background: var(--c-hover); 567 | border: 1px solid var(--c-border); 568 | } 569 | 570 | /* 下拉小图标 */ 571 | .pageTitle h1 + .contextMenuContainer { 572 | display: none !important; 573 | } 574 | 575 | /* 左侧边栏间距移除 .reorder for 助教页面 */ 576 | /* #menuWrap span.reorder { 577 | position: absolute; 578 | display: inline !important; 579 | } */ 580 | 581 | /* 我用不到这个编辑模式，移除 */ 582 | /* .ineditmode div.listCm ul.courseMenu li:hover { 583 | background-color: var(--c-background) !important; 584 | } */ 585 | 586 | .ineditmode div.listCm ul.courseMenu li { 587 | border: none !important; 588 | } 589 | -------------------------------------------------------------------------------- /src/css/courseDiscussion.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | @import 'main.css'; 9 | 10 | *[var='nameFormatEnum'] #breadcrumbs { 11 | /* 中间有一层 导致 body 的 flex 布局无法继承 */ 12 | margin-top: 0; 13 | } 14 | 15 | #containerdiv form table.inventory { 16 | background-color: var(--c-card); 17 | } 18 | 19 | #conferenceFormId th, 20 | #conferenceFormId td { 21 | vertical-align: middle !important; 22 | } 23 | 24 | #conferenceFormId th { 25 | background-color: var(--c-card); 26 | } 27 | 28 | .inventory > tbody tr { 29 | background: var(--c-card) !important; 30 | } 31 | 32 | .inventory > tbody tr td, 33 | .inventory > tbody tr th, 34 | .inventory > thead tr th, 35 | .splashTable thead tr th { 36 | border-color: var(--c-border) !important; 37 | } 38 | 39 | table.inventory > tbody tr:last-child td, 40 | table.inventory > tbody tr:last-child th { 41 | border-bottom: 1px solid var(--c-border) !important; 42 | } 43 | 44 | .inventory > tbody .gray td, 45 | .inventory > tbody .gray th { 46 | background-color: var(--c-hover) !important; 47 | } 48 | 49 | table.inventory a.cmimg { 50 | display: none; 51 | } 52 | 53 | table.inventory .vtbegenerated tbody tr td, 54 | table.inventory .vtbegenerated tbody tr th, 55 | table.reorderable .vtbegenerated tbody tr td, 56 | table.reorderable .vtbegenerated tbody tr th, 57 | table.inventory .vtbegenerated tbody tr:hover td, 58 | table.inventory .vtbegenerated tbody tr:hover th, 59 | table.reorderable .vtbegenerated tbody tr:hover td, 60 | table.reorderable .vtbegenerated tbody tr:hover th, 61 | table.reorderable .vtbegenerated tbody tr:hover { 62 | background: transparent !important; 63 | } 64 | 65 | /* table.inventory .gray .vtbegenerated { 66 | background-color: var(--c-hover) !important; 67 | } */ 68 | 69 | table.inventory .gray .vtbegenerated tbody tr td, 70 | table.inventory .gray .vtbegenerated tbody tr th, 71 | table.reorderable .gray .vtbegenerated tbody tr td, 72 | table.reorderable .gray .vtbegenerated tbody tr th, 73 | table.inventory .gray .vtbegenerated tbody tr:hover td, 74 | table.inventory .gray .vtbegenerated tbody tr:hover th, 75 | table.reorderable .gray .vtbegenerated tbody tr:hover td, 76 | table.reorderable .gray .vtbegenerated tbody tr:hover th, 77 | table.reorderable .gray .vtbegenerated tbody tr:hover { 78 | background-color: var(--c-hover) !important; 79 | } 80 | 81 | /* table.inventory .vtbegenerated tbody tr, */ 82 | table.inventory .vtbegenerated tbody tr:last-child td { 83 | border-bottom: none !important; 84 | } 85 | 86 | table.inventory .unread-count:not(.none) { 87 | color: #fff !important; 88 | background: #e44c47 !important; 89 | } 90 | table.inventory .unread-count.none { 91 | background: transparent !important; 92 | color: var(--c-text) !important; 93 | } 94 | 95 | /* @media (prefers-color-scheme: dark){ 96 | 97 | } */ 98 | 99 | #containerdiv.container { 100 | border: 1px solid var(--c-border) !important; 101 | background-color: var(--c-card); 102 | } 103 | 104 | .inventory > thead tr th.sorted, 105 | th.sorted, 106 | .splashTable thead tr th.sorted { 107 | background-color: var(--c-card) !important; 108 | color: var(--c-text) !important; 109 | } 110 | 111 | .inventory > thead tr th.sorted a { 112 | color: var(--c-text) !important; 113 | } 114 | 115 | .genericButton, 116 | .genericButtonImg, 117 | input[type='submit'].genericButton, 118 | .browse, 119 | .browseIcon, 120 | .rumble h3 + ul > li > a, 121 | .rumble h3 + ul > li > a, 122 | .rumble_top h3 + ul > li > a, 123 | .rumble_top h3 + ul > li > a, 124 | .paging a, 125 | .itemHeaderControl > a, 126 | .actionMenuButton, 127 | .button-3, 128 | .button-3-img, 129 | .button-4, 130 | .button-4-img, 131 | #toolsSearchBox + .button-4, 132 | .treeContainer .tree li a.button-4-img, 133 | .rumble a, 134 | .rumble_top a, 135 | .rumble .abutton, 136 | .rumble_top .abutton { 137 | background: var(--c-button) !important; 138 | box-shadow: none !important; 139 | } 140 | 141 | .nav .sub ul, 142 | .nav.gb_currView .sub > ul, 143 | .menumini ul, 144 | .quickAddPal, 145 | .keyboardAccess, 146 | span.currentTags, 147 | .liveArea, 148 | .liveArea-slim, 149 | .previewArea, 150 | .jumptopage, 151 | .panelTabs li.active a.edit, 152 | .panelTabs li.active a.edit:hover, 153 | .panelTabs li.active a.edit:focus, 154 | .flyout, 155 | .bcContent .flyout, 156 | ul.tree li a + img + a:focus, 157 | ul.tree li img + img + a:focus, 158 | div.treeContainer ul.tree li a.itemActive, 159 | #learningUnitToc ul.tree li a.itemActive, 160 | ul.tree li a.itemActive, 161 | #loginLang ul, 162 | .unread-posts, 163 | .need-moderation, 164 | .unread-replies-to-me-posts { 165 | background: var(--c-button) !important; 166 | border: 1px solid var(--c-border) !important; 167 | border-radius: 5px; 168 | } 169 | 170 | .thread-detail-page .contentBox { 171 | background: var(--c-background); 172 | /* padding-bottom: 30px; */ 173 | } 174 | .db-message-wrapper { 175 | box-shadow: none; 176 | background: var(--c-card); 177 | border: 1px solid var(--c-border) !important; 178 | border-radius: 5px; 179 | } 180 | 181 | .reply-lvl-0 .message-wrapper-inner, 182 | .db-head-message .message-wrapper-inner { 183 | background: var(--c-card); 184 | border: none !important; 185 | box-shadow: none; 186 | } 187 | .db-reply-block, 188 | .reply-lvl-0 .messageTemplate { 189 | /* border: 1px solid var(--c-border); */ 190 | border: none; 191 | /* border-radius: 5px; */ 192 | box-shadow: none; 193 | background: var(--c-card); 194 | } 195 | 196 | .db-collapse-control { 197 | display: none; 198 | } 199 | 200 | .reply-lvl-0 .threadButtons .browse, 201 | .threadButtons .browse, 202 | .threadButtons .reply { 203 | background: var(--c-button) !important; 204 | border: 1px solid var(--c-border) !important; 205 | border-radius: 5px !important; 206 | width: fit-content; 207 | height: 100%; 208 | display: block; 209 | margin: 0; 210 | } 211 | 212 | .threadButtons { 213 | display: flex !important; 214 | flex-direction: row; 215 | width: fit-content; 216 | gap: 5px; 217 | } 218 | 219 | /* 消息内页头像 */ 220 | .db-message .profileCardAvatarThumb img { 221 | height: 64px; 222 | width: 64px; 223 | border: 1px solid var(--c-border) !important; 224 | display: inline-block; 225 | padding: 1px; 226 | -webkit-border-radius: 2px; 227 | -moz-border-radius: 2px; 228 | border-radius: 10px; 229 | box-shadow: none; 230 | background: transparent; 231 | } 232 | 233 | .db-message-wrapper .profileCardAvatarThumb { 234 | color: var(--c-title) !important; 235 | } 236 | 237 | /* 外部 table 头像 */ 238 | .profileCardAvatarThumb img { 239 | box-shadow: none; 240 | background: transparent; 241 | border: 1px solid var(--c-border) !important; 242 | } 243 | 244 | img[src='/images/ci/ng/default_profile_avatar.svg'] { 245 | content: var(--i-student) !important; 246 | } 247 | 248 | .msg-fringe.db-message-fringe-show { 249 | display: none; 250 | } 251 | 252 | #inlinePost { 253 | margin-top: 30px; 254 | } 255 | 256 | .steptitle, 257 | div[id*='step'], 258 | div[id*='Step'], 259 | #dataCollectionContainer, 260 | .container { 261 | background: var(--c-card); 262 | } 263 | 264 | div[id*='stepcontent'] { 265 | background: var(--c-card) !important; 266 | } 267 | 268 | input[type='text'], 269 | input[type='password'], 270 | select { 271 | border: 1px solid var(--c-border) !important; 272 | background: var(--c-card) !important; 273 | } 274 | 275 | @media screen and (prefers-color-scheme: dark) { 276 | .tox.tox-tinymce { 277 | -webkit-filter: invert(100%) hue-rotate(180deg); 278 | filter: invert(100%) hue-rotate(180deg); 279 | } 280 | .tox.tox-tinymce svg { 281 | -webkit-filter: invert(100%) hue-rotate(180deg); 282 | filter: invert(100%) hue-rotate(180deg); 283 | } 284 | } 285 | 286 | .taskbuttondiv_wrapper { 287 | background: var(--c-card); 288 | } 289 | 290 | #bottom_submitButtonRow { 291 | display: flex; 292 | gap: 10px; 293 | } 294 | 295 | /* 全局按钮样式更改 */ 296 | form[id='inlineMessageForm'] a#submissionLink, 297 | form[id='inlineMessageForm'] input[type='file'], 298 | form[id='inlineMessageForm'] input[type='button'] { 299 | border-radius: 5px; 300 | background: var(--c-button); 301 | box-shadow: none; 302 | color: var(--c-text); 303 | font-size: 12px; 304 | } 305 | 306 | form[id='inlineMessageForm'] a#submissionLink:hover, 307 | form[id='inlineMessageForm'] input[type='file']:hover, 308 | form[id='inlineMessageForm'] input[type='button']:hover { 309 | background: var(--gray-2); 310 | color: var(--c-title); 311 | font-weight: bold; 312 | } 313 | 314 | /* 提交按钮特判 */ 315 | form[id='inlineMessageForm'] input[type='submit'].submit { 316 | border-radius: 5px; 317 | background: var(--c-primary-light); 318 | box-shadow: none; 319 | color: var(--c-primary); 320 | font-size: 12px; 321 | } 322 | 323 | form[id='inlineMessageForm'] input[type='submit'].submit:hover { 324 | background: var(--blue-2); 325 | /* box-shadow: none ; */ 326 | color: var(--blue-7); 327 | font-weight: bold; 328 | } 329 | 330 | .nav .sub ul li a, 331 | .cmdiv a, 332 | .menumini a, 333 | #loginLang ul li a { 334 | color: var(--c-text); 335 | } 336 | 337 | /* 创建话题 */ 338 | div[id*='step'], 339 | .submittitle, 340 | #infoStep, 341 | #taskStatusStep, 342 | #linkedContentStep { 343 | border: none !important; 344 | } 345 | 346 | div[id*='stepcontent'] { 347 | border: none !important; 348 | } 349 | 350 | h3.steptitle, 351 | span.reqfield { 352 | display: none !important; 353 | } 354 | 355 | .submitStepTop:has(span.reqfield:only-child) { 356 | height: 20px !important; 357 | } 358 | 359 | input[type='text'][name='title'] { 360 | width: 100%; 361 | } 362 | 363 | input[type='checkbox'] { 364 | /* 移除默认样式 */ 365 | -webkit-appearance: none; 366 | -moz-appearance: none; 367 | appearance: none; 368 | 369 | /* 自定义样式 */ 370 | width: 16px; 371 | height: 16px; 372 | background-color: var(--c-card); /* 自定义背景色 */ 373 | border: 1px solid var(--c-border); 374 | border-radius: 3px; 375 | } 376 | 377 | /* 选中状态样式 */ 378 | input[type='checkbox']:checked { 379 | background-color: var(--c-accent); /* 选中时的背景色 */ 380 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E"); 381 | background-size: 80%; 382 | background-position: center; 383 | background-repeat: no-repeat; 384 | } 385 | 386 | /* 整个滚动条 */ 387 | .vtbegenerated::-webkit-scrollbar { 388 | width: 10px; 389 | height: 10px; 390 | } 391 | 392 | /* 滚动条轨道 */ 393 | .vtbegenerated::-webkit-scrollbar-track { 394 | background-color: transparent; 395 | } 396 | 397 | .vtbegenerated::-webkit-scrollbar { 398 | height: 5px; 399 | } 400 | 401 | /* 滚动条滑块 */ 402 | .vtbegenerated::-webkit-scrollbar-thumb { 403 | background-color: var(--c-scrollbar); 404 | border-radius: 9999px; 405 | } 406 | 407 | /* icon */ 408 | .author_props .highlight-pop { 409 | background: var(--i-verified); 410 | background-repeat: no-repeat; 411 | background-position: center; 412 | background-size: 100% 100%; 413 | width: 20px; 414 | height: 20px; 415 | } 416 | 417 | img[src='../images/paperclip.png'] { 418 | /* content: var(--i-file); */ 419 | display: none; 420 | } 421 | 422 | img[src='/images/ci/ng/cal_year_event.gif'] { 423 | content: var(--i-file); 424 | } 425 | 426 | .dbAttachment { 427 | border: 1px solid var(--c-border); 428 | border-radius: 5px; 429 | width: fit-content; 430 | padding: 3px 5px; 431 | } 432 | 433 | .dbAttachment img { 434 | width: 20px; 435 | height: 20px; 436 | } 437 | 438 | .dbAttachment:hover { 439 | background-color: var(--c-hover); 440 | } 441 | 442 | .navigationBar div > button { 443 | border: 1px solid var(--c-border); 444 | display: inline-block; 445 | box-shadow: none; 446 | background: var(--c-button); 447 | border-radius: 3px; 448 | color: var(--c-text); 449 | text-shadow: none; 450 | margin: 0px; 451 | padding: 0px; 452 | } 453 | 454 | a.reply-count-link { 455 | bottom: 3px; 456 | position: absolute; 457 | background: transparent; 458 | display: block; 459 | border-radius: 3px !important; 460 | border: 1px solid var(--c-border) !important; 461 | } 462 | 463 | .db_msg_metadata, 464 | .reply-lvl-0 .db_msg_metadata { 465 | border: 1px solid var(--c-border) !important; 466 | box-shadow: none; 467 | background: var(--c-card); 468 | border-radius: 0 0 0 2px; 469 | line-height: 1.5; 470 | top: 3px; 471 | right: 3px; 472 | min-width: 140px; 473 | text-align: right; 474 | } 475 | 476 | #actionbar { 477 | top: 100px; 478 | right: 30px; 479 | box-shadow: none; 480 | opacity: 1 !important; 481 | background: transparent !important; 482 | border-bottom: none !important; 483 | } 484 | 485 | .collapsedMessage .db-message .profileCardAvatarThumb:after { 486 | display: none; 487 | } 488 | 489 | .thread-detail-page #actionbar .mainButton > a, 490 | .thread-detail-page #actionbar .secondaryButton > a { 491 | color: var(--c-text) !important; 492 | } 493 | 494 | .thread-detail-page #actionbar .mainButton > a:hover, 495 | .thread-detail-page #actionbar .secondaryButton > a:hover { 496 | background: var(--c-hover) !important; 497 | } 498 | 499 | .thread-detail-page #navsecondary a#refreshTreeActionButtonId:before { 500 | content: ''; 501 | display: inline-block; 502 | height: 20px; 503 | width: 20px; 504 | background-image: var(--i-refresh); 505 | background-size: contain; 506 | background-repeat: no-repeat; 507 | background-position: center; 508 | } 509 | 510 | .thread-detail-page #navsecondary #searchActionButtonId a:before { 511 | content: ''; 512 | display: inline-block; 513 | height: 20px; 514 | width: 20px; 515 | background-image: var(--i-search); 516 | background-size: contain; 517 | background-repeat: no-repeat; 518 | background-position: center; 519 | } 520 | 521 | img[src='/images/ci/actionbar/flag.gif'] { 522 | display: none; 523 | } 524 | 525 | img[src='/images/ci/ng/sort_on2.gif'] { 526 | content: var(--i-arrow); 527 | width: 16px; 528 | height: 16px; 529 | } 530 | img[src='/images/ci/ng/sort_on_up2.gif'] { 531 | content: var(--i-arrow); 532 | transform: rotate(180deg); 533 | width: 16px; 534 | height: 16px; 535 | } 536 | -------------------------------------------------------------------------------- /src/css/courseFileEmbed.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | @import 'main.css'; 9 | 10 | /* 标题 */ 11 | ul#content_listContainer { 12 | background: var(--cyan-1); 13 | } 14 | 15 | ul#content_listContainer > li:hover { 16 | background: var(--cyan-1); 17 | border: none; 18 | border-left: 6px solid var(--cyan-6); 19 | } 20 | 21 | ul#content_listContainer > li { 22 | border-left: 6px solid var(--cyan-6); 23 | border-top: none; 24 | border-bottom: none; 25 | padding: 5px 10px; 26 | color: var(--c-text); 27 | display: flex; 28 | justify-content: center; 29 | align-items: center; 30 | flex-direction: column; 31 | transition: none; 32 | margin: 0; 33 | } 34 | 35 | ul#content_listContainer > li > * { 36 | padding: 0; 37 | width: 100%; 38 | } 39 | 40 | ul#content_listContainer > li a { 41 | color: var(--cyan-6); 42 | } 43 | 44 | #pageTitleBar span.contextMenuContainer { 45 | display: none !important; 46 | } 47 | 48 | /* 插入embed Tag的卡片样式 */ 49 | embed { 50 | margin-top: 50px; 51 | position: relative; 52 | height: min(1000px, 80vh) !important; 53 | background: var(--c-card); 54 | border-radius: 10px; 55 | border: 1px solid var(--c-border); 56 | padding: 10px; 57 | box-sizing: border-box; 58 | } 59 | -------------------------------------------------------------------------------- /src/css/courseGlobalAnnouncement.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | @import 'main.css'; 9 | 10 | .announcementFilter, 11 | .announcementList { 12 | margin: 0; 13 | } 14 | 15 | #containerdiv { 16 | margin-top: 0; 17 | padding-top: 0; 18 | } 19 | 20 | .announcementFilter { 21 | display: flex; 22 | align-items: center; 23 | justify-content: center; 24 | /* border-bottom: 1px solid var(--c-border); */ 25 | border-bottom: none; 26 | margin-bottom: 10px; 27 | } 28 | 29 | .announcementFilter select#searchSelectId { 30 | -webkit-appearance: none; 31 | -moz-appearance: none; 32 | appearance: none; 33 | background: var(--c-card); 34 | color: var(--c-text); 35 | border: 1px solid var(--c-border); 36 | border-right: none; 37 | border-radius: 5px 0 0 5px; 38 | outline: none; 39 | padding: 3px 10px; 40 | box-sizing: border-box; 41 | height: 30px; 42 | margin: 0; 43 | } 44 | 45 | .announcementFilter a.genericButton { 46 | background: var(--c-button); 47 | color: var(--c-title); 48 | border: 1px solid var(--c-border); 49 | border-left: none; 50 | border-radius: 0 5px 5px 0; 51 | outline: none; 52 | padding: 3px 10px; 53 | box-sizing: border-box; 54 | height: 30px; 55 | box-shadow: none; 56 | /* margin-left: 20px; */ 57 | } 58 | 59 | .announcementFilter a.genericButton:hover { 60 | background: var(--cyan-2); 61 | color: var(--cyan-6); 62 | } 63 | -------------------------------------------------------------------------------- /src/css/courseGlobalPage.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | @import 'main.css'; 9 | 10 | body { 11 | position: relative; 12 | } 13 | 14 | .brandingImgWrap, 15 | #appTabList > tbody > tr, 16 | .hideoff, 17 | #quick_links_wrap, 18 | #global-avatar, 19 | #global-toggle-img { 20 | display: none; 21 | /* visibility: hidden; */ 22 | } 23 | 24 | /* 个人界面面板 */ 25 | #global-nav-link > * { 26 | display: none; 27 | } 28 | 29 | #global-nav-link, 30 | #global-nav-link:hover, 31 | #global-nav-link:focus { 32 | color: transparent; 33 | width: 32px; 34 | height: 32px; 35 | padding: 0; 36 | background: transparent; 37 | background-image: var(--i-remind) !important; 38 | background-size: 80%; 39 | background-repeat: no-repeat; 40 | background-position: center center; 41 | border: none; 42 | outline: none; 43 | } 44 | 45 | /* 退出按键 */ 46 | .global-nav-bar a.logout-link, 47 | .global-nav-bar a.logout-link:hover, 48 | .global-nav-bar a.logout-link:focus { 49 | color: transparent; 50 | width: 32px; 51 | height: 32px; 52 | padding: 0; 53 | background: transparent; 54 | background-image: var(--i-exit) !important; 55 | background-size: 80%; 56 | background-repeat: no-repeat; 57 | background-position: center center; 58 | } 59 | 60 | /* 替换背景 */ 61 | /* .tabWrapper-right, 62 | #globalNavPageNavArea, 63 | #topTabs, */ 64 | .container, 65 | .locationPane, 66 | .contentPane { 67 | background-color: var(--c-background); 68 | } 69 | 70 | /* 全局Container */ 71 | /*#containerdiv{*/ 72 | /* border-radius: 5px!important;*/ 73 | /* border:1px solid var(--c-border)!important;*/ 74 | /*}*/ 75 | 76 | /* 重置导航栏布局 */ 77 | .tabWrapper-right, 78 | #globalNavPageNavArea, 79 | #topTabs { 80 | /* position: absolute; */ 81 | /* width: fit-content; */ 82 | background-color: var(--c-navbar); 83 | } 84 | 85 | #globalNavPageNavArea { 86 | padding: 1em 0; 87 | height: 60px; 88 | top: 0px !important; 89 | box-sizing: border-box; 90 | /* vertical-align: middle; */ 91 | display: flex; 92 | text-align: right; 93 | justify-content: flex-end; 94 | flex-direction: row; 95 | padding-right: 140px; 96 | background-image: var(--i-logo); 97 | background-repeat: no-repeat; 98 | background-size: auto 30px; 99 | background-position: 2em center; 100 | border-bottom: 1px solid var(--c-border); 101 | position: fixed; 102 | width: 100%; 103 | z-index: 20; 104 | } 105 | 106 | .tabWrapper-right, 107 | .bouncer[role='presentation'] { 108 | width: fit-content; 109 | } 110 | 111 | .global-nav-bar-wrap { 112 | position: fixed; 113 | z-index: 30; 114 | /* left: 90vw; */ 115 | right: 20px; 116 | display: flex; 117 | /* height: fit-content; */ 118 | justify-content: flex-end; 119 | flex-direction: row-reverse; 120 | background-color: var(--c-navbar); 121 | width: 100px; 122 | height: 60px; 123 | box-sizing: border-box; 124 | /* margin-right: 10px; */ 125 | /* transform: translateX(calc(90vw - 120px)); */ 126 | margin: 0; 127 | padding: 0; 128 | border-bottom: 1px solid var(--c-border); 129 | } 130 | 131 | .global-nav-bar { 132 | /* margin: 30px 5px; */ 133 | margin: 0; 134 | float: none; 135 | height: 60px; 136 | display: flex; 137 | /* display: inline-block; */ 138 | /* background-color: var(--c-navbar); */ 139 | flex-direction: row-reverse; 140 | justify-content: center; 141 | align-items: center; 142 | } 143 | 144 | .global-nav-bar:not(:first-child) { 145 | margin: 0 5px; 146 | } 147 | 148 | /* .nav-link { 149 | transform: translateY(-50%); 150 | } */ 151 | 152 | table.bouncer, 153 | .appTabs td.active, 154 | .appTabs a:hover span, 155 | .appTabs a:focus span { 156 | border: none; 157 | } 158 | 159 | .topTabs .tabWrapper-right { 160 | height: fit-content; 161 | padding: 0; 162 | } 163 | 164 | #globalNavPageNavArea a, 165 | #globalNavPageNavArea td { 166 | padding: 0 !important; 167 | } 168 | 169 | /* 课程标题栏 */ 170 | #breadcrumbs { 171 | /* display: inline-block; */ 172 | /* float: right; */ 173 | /* width: 1000px; */ 174 | /* width: 100%; */ 175 | padding: 1.2em 1em 1em 1em; 176 | box-sizing: border-box; 177 | height: 80px; 178 | margin-bottom: 1em; 179 | margin-top: 60px; 180 | z-index: 10; 181 | color: var(--c-title); 182 | background-color: var(--c-background); 183 | display: flex; 184 | text-align: center; 185 | justify-content: center; 186 | border: none; 187 | } 188 | 189 | #breadcrumbs .coursePath { 190 | padding: 0; 191 | margin: 0; 192 | } 193 | 194 | #breadcrumbs span { 195 | font-size: 18pt; 196 | color: var(--c-title); 197 | -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) both; 198 | animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) both; 199 | } 200 | 201 | /* 置高 */ 202 | #globalNavPageContentArea { 203 | margin-top: 60px; 204 | } 205 | 206 | #globalNavPageContentArea, 207 | #globalNavPageContentArea .locationPane, 208 | #contentPanel, 209 | div#content, 210 | div.container { 211 | height: fit-content !important; 212 | /* min-height: 100vh; */ 213 | } 214 | 215 | /* 面板内容样式 */ 216 | .locationPane { 217 | background-color: var(--c-background); 218 | } 219 | 220 | .contentPane .shadow { 221 | border: none; 222 | } 223 | 224 | #pageTitleDiv { 225 | margin: 0 !important; 226 | } 227 | 228 | /* 固定最大宽度 */ 229 | #content { 230 | width: min(100%, 1200px); 231 | margin: 0 auto; 232 | } 233 | 234 | /* 动画 */ 235 | #contentPanel { 236 | -webkit-animation: fadeInUpStablePixel 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) both; 237 | animation-delay: 500ms; 238 | animation: fadeInUpStablePixel 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) both; 239 | } 240 | 241 | .localViewToggle { 242 | display: none; 243 | } 244 | 245 | #pageTitleHeader { 246 | /*color: var(--c-primary);*/ 247 | /*background-color: var(--c-primary-light);*/ 248 | color: var(--blue-7) !important; 249 | background-color: var(--blue-2); 250 | padding: 0.3em 1em; 251 | border-radius: 5px; 252 | font-size: 20px !important; 253 | } 254 | 255 | #pageTitleHeader * { 256 | color: var(--blue-7) !important; 257 | } 258 | 259 | #pageTitleText { 260 | font-weight: bold; 261 | } 262 | 263 | /* 个人导航面板 */ 264 | #vertical_container, 265 | #bottomButtons { 266 | display: none; 267 | } 268 | 269 | #global-nav-tools { 270 | z-index: 9999; 271 | height: inherit !important; 272 | } 273 | 274 | #global-nav-flyout { 275 | box-shadow: none; 276 | border-radius: 5px; 277 | width: 40px !important; 278 | height: 100px !important; 279 | transform: translateY(34px); 280 | background-color: transparent; 281 | /*background-color: #000;*/ 282 | } 283 | 284 | #global-nav-tools { 285 | background-color: var(--c-card); 286 | } 287 | 288 | #global-list-tools { 289 | margin: 0; 290 | box-shadow: var(--c-box-shadow); 291 | border: 1px solid var(--c-border); 292 | padding: 5px; 293 | border-radius: 5px; 294 | background-color: var(--c-card); 295 | /*border:1px solid #EEE;*/ 296 | } 297 | 298 | #global-list-tools > .overview, 299 | #global-list-tools > .stream, 300 | #global-list-tools > .calendar { 301 | display: none; 302 | } 303 | 304 | #global-list-tools > .alerts, 305 | #global-list-tools > .grade { 306 | background-color: var(--c-card); 307 | } 308 | 309 | #global-list-tools > .alerts > a:hover, 310 | #global-list-tools > .grades > a:hover { 311 | background-color: var(--c-hover); 312 | } 313 | 314 | #global-list-tools > .alerts > a { 315 | border-radius: 5px; 316 | background: var(--i-alarm); 317 | /* background-color: var(--c-card) !important; */ 318 | background-size: 60%; 319 | background-repeat: no-repeat; 320 | background-position: center center; 321 | margin: 0 auto; 322 | /* transition: 350ms opacity; */ 323 | } 324 | 325 | #global-list-tools > .grades > a { 326 | border-radius: 5px; 327 | background: var(--i-idcard); 328 | /* background-color: var(--c-card) !important; */ 329 | background-size: 60%; 330 | background-repeat: no-repeat; 331 | background-position: center center; 332 | margin: 0 auto; 333 | /* transition: 350ms opacity; */ 334 | } 335 | 336 | #global-list-tools > .more-link > a { 337 | border-radius: 5px; 338 | background: var(--i-idcard); 339 | /* background-color: var(--c-card) !important; */ 340 | background-size: 60%; 341 | background-repeat: no-repeat; 342 | background-position: center center; 343 | } 344 | 345 | #global-more-tools { 346 | display: none !important; 347 | } 348 | 349 | .mybb-tools li a { 350 | opacity: 1; 351 | background-color: var(--c-card); 352 | } 353 | 354 | .mybb-tools li a:focus, 355 | .mybb-tools li a:focus img { 356 | outline: none; 357 | } 358 | -------------------------------------------------------------------------------- /src/css/courseHomePage.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | @import 'main.css'; 9 | 10 | /* 固定 body 作为 relative */ 11 | body { 12 | position: relative; 13 | } 14 | 15 | /* 隐藏不需要的模块 */ 16 | .brandingImgWrap, 17 | #appTabList > tbody > tr, 18 | .hideoff, 19 | #quick_links_wrap, 20 | #global-avatar, 21 | #global-toggle-img { 22 | display: none; 23 | /* visibility: hidden; */ 24 | } 25 | 26 | /* 个人界面面板 */ 27 | /* #global-nav-link > * { 28 | display: none; 29 | } */ 30 | 31 | #global-nav-link, 32 | #global-nav-link:hover, 33 | #global-nav-link:focus { 34 | overflow: hidden; 35 | color: transparent; 36 | width: 32px; 37 | height: 32px; 38 | padding: 0; 39 | background: transparent; 40 | background-image: var(--i-remind); 41 | background-size: 80%; 42 | background-repeat: no-repeat; 43 | background-position: center center; 44 | border: none; 45 | outline: none; 46 | } 47 | 48 | /* #global-nav-link > * { 49 | display: none !important; 50 | } */ 51 | 52 | #global-nav-link > #badgeTotal > .badge { 53 | top: 0 !important; 54 | right: 0 !important; 55 | border-radius: 3px; 56 | background-color: var(--c-accent); 57 | color: #fff; 58 | } 59 | 60 | /* 退出按键 */ 61 | .global-nav-bar.logout a.logout-link, 62 | .global-nav-bar.logout a.logout-link:hover, 63 | .global-nav-bar.logout a.logout-link:focus { 64 | color: transparent; 65 | width: 32px; 66 | height: 32px; 67 | padding: 0; 68 | background: transparent; 69 | background-image: var(--i-exit); 70 | background-size: 80%; 71 | background-repeat: no-repeat; 72 | background-position: center center; 73 | } 74 | 75 | /* 替换背景 */ 76 | /* .tabWrapper-right, 77 | #globalNavPageNavArea, 78 | #topTabs, */ 79 | .container, 80 | .locationPane { 81 | background-color: var(--c-background); 82 | } 83 | 84 | /* 重置导航栏布局 */ 85 | #globalNavPageNavArea { 86 | position: fixed; 87 | width: 100%; 88 | z-index: 30; 89 | } 90 | 91 | .tabWrapper-right, 92 | #globalNavPageNavArea, 93 | #topTabs { 94 | /* position: absolute; */ 95 | /* width: fit-content; */ 96 | background-color: var(--c-navbar); 97 | } 98 | 99 | #globalNavPageNavArea { 100 | padding: 1em 0; 101 | height: 60px; 102 | box-sizing: border-box; 103 | /* vertical-align: middle; */ 104 | display: flex; 105 | text-align: right; 106 | justify-content: flex-end; 107 | flex-direction: row; 108 | padding-right: 140px; 109 | background-image: var(--i-logo); 110 | background-repeat: no-repeat; 111 | background-size: auto 30px; 112 | background-position: 2em center; 113 | border-bottom: 1px solid var(--c-border); 114 | } 115 | 116 | .tabWrapper-right, 117 | .bouncer[role='presentation'] { 118 | width: fit-content; 119 | } 120 | 121 | .global-nav-bar-wrap { 122 | position: fixed; 123 | /* left: 90vw; */ 124 | right: 20px; 125 | display: flex; 126 | /* height: fit-content; */ 127 | justify-content: flex-end; 128 | flex-direction: row-reverse; 129 | background-color: var(--c-navbar); 130 | width: 100px; 131 | height: 60px; 132 | box-sizing: border-box; 133 | /* margin-right: 10px; */ 134 | /* transform: translateX(calc(90vw - 120px)); */ 135 | margin: 0; 136 | padding: 0; 137 | border-bottom: 1px solid var(--c-border); 138 | } 139 | 140 | .global-nav-bar { 141 | /* margin: 30px 5px; */ 142 | margin: 0; 143 | float: none; 144 | height: 60px; 145 | display: flex; 146 | /* display: inline-block; */ 147 | /* background-color: var(--c-navbar); */ 148 | flex-direction: row-reverse; 149 | justify-content: center; 150 | align-items: center; 151 | } 152 | 153 | .global-nav-bar:not(:first-child) { 154 | margin: 0 5px; 155 | } 156 | 157 | /* .nav-link { 158 | transform: translateY(-50%); 159 | } */ 160 | 161 | .topTabs .tabWrapper-right { 162 | height: fit-content; 163 | padding: 0; 164 | } 165 | 166 | #globalNavPageNavArea a, 167 | #globalNavPageNavArea td { 168 | padding: 0 !important; 169 | } 170 | 171 | /* 内容部分调整 */ 172 | #globalNavPageContentArea, 173 | .locationPane, 174 | .contentPaneWide, 175 | #content, 176 | #content > div, 177 | #content > div > div, 178 | #content > div > div > div, 179 | #content > div > div > div > div { 180 | /* height: 100% !important; */ 181 | /* min-height: (fit-content, 100vh); */ 182 | height: fit-content; 183 | min-height: 100vh; 184 | padding: 0; 185 | } 186 | 187 | .container { 188 | margin: 0; 189 | padding: 0; 190 | border: none; 191 | height: fit-content; 192 | /* overflow: scroll; */ 193 | /* overflow: hidden; */ 194 | } 195 | 196 | .containerPortal { 197 | display: flex; 198 | flex-direction: row; 199 | /* height: 80vh; */ 200 | /* overflow: scroll; */ 201 | } 202 | 203 | /* 位置导航栏 */ 204 | /* 这玩意只在首页有，暂时先屏蔽了 */ 205 | /* woc还是个状态保留的 */ 206 | /* TODO：搞清楚这玩意是干什么的 */ 207 | .locationPane .paneTabs { 208 | position: absolute; 209 | display: none; 210 | } 211 | 212 | /* 第一栏成导航栏 */ 213 | #column0 { 214 | /* height: 200%; */ 215 | /* margin-bottom: 1000px; */ 216 | /* padding-bottom: 1000px; */ 217 | margin: 0; 218 | margin-top: 60px; 219 | background-color: var(--c-sidebar); 220 | border-right: 1px solid var(--c-border); 221 | width: min(25%, 300px) !important; 222 | position: fixed; 223 | height: 100%; 224 | } 225 | 226 | #column0:after { 227 | content: 'PKU Art @ Arthals'; 228 | display: block; 229 | background-color: var(--c-sidebar); 230 | position: absolute; 231 | bottom: 80px; 232 | left: 50%; 233 | transform: translateX(-50%); 234 | color: var(--c-text); 235 | height: 20px; 236 | z-index: 99999; 237 | opacity: 0.3; 238 | visibility: visible !important; 239 | } 240 | 241 | html #global-nav-bar-wrap { 242 | /* display: none !important; */ 243 | display: flex; 244 | justify-content: flex-end; 245 | } 246 | 247 | /* fuck！找了两个小时，哪个**写的底部空白伪类！！ */ 248 | .clearfix:after, 249 | .clearfixParent > div:after, 250 | .clearfixParent > li:after { 251 | display: none; 252 | } 253 | 254 | /* 左侧侧栏样式 */ 255 | .portlet { 256 | padding: 1em; 257 | background-color: var(--c-sidebar); 258 | } 259 | 260 | #column0 > div:first-child h2 { 261 | background-color: var(--c-sidebar); 262 | font-size: 14pt; 263 | color: var(--c-title); 264 | } 265 | 266 | #column0 > div:first-child { 267 | border: none; 268 | } 269 | 270 | #column0 > div:first-child h2:after { 271 | z-index: 1; 272 | content: ''; 273 | color: transparent; 274 | visibility: visible; 275 | display: block; 276 | height: 10px; 277 | position: relative; 278 | top: 5px; 279 | width: 60px; 280 | border-radius: 50px; 281 | background-color: var(--c-accent); 282 | } 283 | 284 | #column0 > div:first-child div.collapsible { 285 | border: none; 286 | } 287 | 288 | .portlet .portletList li { 289 | border-top: none; 290 | } 291 | 292 | /* 左侧工具栏项目样式、交互 */ 293 | .portlet .portletList-img > li { 294 | border: none; 295 | } 296 | 297 | .portlet .portletList li a { 298 | position: relative; 299 | color: var(--c-text); 300 | font-size: 11pt; 301 | } 302 | 303 | .portlet .portletList li a:hover { 304 | color: var(--red-5); 305 | } 306 | 307 | .portlet .portletList li a:after { 308 | content: ''; 309 | color: transparent; 310 | visibility: visible !important; 311 | position: absolute; 312 | border-bottom: 2px solid var(--red-5); 313 | border-radius: 2px; 314 | bottom: -2px; 315 | /*向左偏移隐藏*/ 316 | left: 100%; 317 | width: 0; 318 | -webkit-transition: width 350ms, left 350ms; 319 | -moz-transition: width 350ms, left 350ms; 320 | transition: width 350ms, left 350ms; 321 | } 322 | 323 | .portlet .portletList li a:hover:after { 324 | visibility: visible !important; 325 | left: 0; 326 | width: 100%; 327 | -webkit-transition: width 350ms; 328 | -moz-transition: width 350ms; 329 | transition: width 350ms; 330 | } 331 | 332 | #column0 > div:not(:first-child) { 333 | display: none; 334 | } 335 | 336 | /* 浮现动画 */ 337 | #column0 { 338 | -webkit-animation: fadeInLeftStablePixel 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; 339 | animation: fadeInLeftStablePixel 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; 340 | } 341 | 342 | #column1, 343 | #column2 { 344 | -webkit-animation: fadeInUpStablePixel 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; 345 | animation: fadeInUpStablePixel 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; 346 | } 347 | 348 | /* 右侧卡片样式 */ 349 | 350 | #column1 { 351 | margin-left: calc(min(25%, 300px) + 1rem) !important; 352 | } 353 | 354 | #column1, 355 | #column2 { 356 | margin-top: 60px; 357 | margin-left: 1em; 358 | height: fit-content; 359 | } 360 | 361 | #column1 .portlet, 362 | #column2 .portlet { 363 | border: 1px solid var(--c-border); 364 | border-radius: 5px; 365 | background-color: var(--c-card); 366 | margin-top: 1em; 367 | } 368 | 369 | /* 卡片标题 */ 370 | .portlet h2 { 371 | font-size: 14pt; 372 | background-color: transparent; 373 | color: var(--c-title); 374 | border: none; 375 | } 376 | 377 | /* 课程链接样式、交互 */ 378 | .containerPortal > div:not(:first-child) .portlet .portletList-img > li { 379 | padding: 7px 10px !important; 380 | border-radius: 5px; 381 | margin-bottom: 0.25em; 382 | position: relative; 383 | } 384 | 385 | .collapsible { 386 | border-top: none; 387 | } 388 | 389 | .containerPortal > div:not(:first-child) .portlet .portletList-img > li:hover { 390 | background-color: var(--c-hover); 391 | } 392 | 393 | .containerPortal > div:not(:first-child) .portlet .portletList-img > li > a { 394 | display: block; 395 | color: var(--c-subtitle); 396 | font-size: 11pt; 397 | } 398 | 399 | .containerPortal > div:not(:first-child) .portlet .portletList-img > li > a:hover { 400 | color: var(--blue-5); 401 | } 402 | 403 | /* 其余卡片内容 */ 404 | /* 空元素区居左显示 */ 405 | .portlet .noItems { 406 | text-align: left; 407 | } 408 | 409 | #column2 .collapsible div, 410 | #column2 .collapsible h3, 411 | #column2 .collapsible a, 412 | .portlet h3 { 413 | font-style: normal; 414 | color: var(--c-text); 415 | } 416 | 417 | /* 个人导航面板 */ 418 | #vertical_container, 419 | #bottomButtons { 420 | display: none; 421 | } 422 | 423 | #global-nav-tools { 424 | z-index: 9999; 425 | height: inherit !important; 426 | } 427 | 428 | #global-nav-flyout { 429 | box-shadow: none; 430 | border-radius: 5px; 431 | width: 40px !important; 432 | height: 100px !important; 433 | transform: translateY(34px); 434 | background-color: transparent; 435 | /*background-color: #000;*/ 436 | } 437 | 438 | #global-nav-tools { 439 | background-color: var(--c-card); 440 | } 441 | 442 | #global-list-tools { 443 | margin: 0; 444 | box-shadow: var(--c-box-shadow); 445 | border: 1px solid var(--c-border); 446 | padding: 5px; 447 | border-radius: 5px; 448 | background-color: var(--c-card); 449 | /*border:1px solid #EEE;*/ 450 | } 451 | 452 | #global-list-tools > .overview, 453 | #global-list-tools > .stream, 454 | #global-list-tools > .calendar { 455 | display: none; 456 | } 457 | 458 | #global-list-tools > .alerts, 459 | #global-list-tools > .grade { 460 | background-color: var(--c-card); 461 | } 462 | 463 | #global-list-tools > .alerts > a:hover, 464 | #global-list-tools > .grades > a:hover, 465 | #global-list-tools > .more-link a:hover { 466 | background-color: var(--c-hover); 467 | } 468 | 469 | #global-list-tools > .alerts > a { 470 | border-radius: 5px; 471 | background: var(--i-alarm); 472 | /* background-color: var(--c-card) !important; */ 473 | background-size: 60%; 474 | background-repeat: no-repeat; 475 | background-position: center center; 476 | margin: 0 auto; 477 | /* transition: 350ms opacity; */ 478 | } 479 | 480 | #global-list-tools > .grades > a { 481 | border-radius: 5px; 482 | background: var(--i-idcard); 483 | /* background-color: var(--c-card) !important; */ 484 | background-size: 60%; 485 | background-repeat: no-repeat; 486 | background-position: center center; 487 | margin: 0 auto; 488 | /* transition: 350ms opacity; */ 489 | } 490 | 491 | #global-list-tools > .more-link > a { 492 | border-radius: 5px; 493 | background: var(--i-idcard); 494 | /* background-color: var(--c-card) !important; */ 495 | background-size: 60%; 496 | background-repeat: no-repeat; 497 | background-position: center center; 498 | } 499 | 500 | #global-more-tools { 501 | display: none !important; 502 | } 503 | 504 | .mybb-tools li a { 505 | opacity: 1; 506 | background-color: var(--c-card); 507 | } 508 | 509 | .mybb-tools li a:focus, 510 | .mybb-tools li a:focus img { 511 | outline: none; 512 | } 513 | 514 | /* 公告设置按钮 */ 515 | 516 | div.edit_controls > a::before, 517 | div.edit_controls > a:hover::before { 518 | background: var(--i-setting); 519 | background-repeat: no-repeat; 520 | background-size: contain; 521 | color: transparent; 522 | } 523 | -------------------------------------------------------------------------------- /src/css/courseListContent.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | @import 'main.css'; 9 | 10 | /* 卡片样式、flex布局 */ 11 | #content_listContainer > li { 12 | background: var(--c-card); 13 | border: 1px solid var(--c-border); 14 | border-radius: 5px; 15 | margin-bottom: 16px; 16 | display: flex; 17 | /*flex-direction: column;*/ 18 | flex-direction: row; 19 | flex-wrap: wrap; 20 | justify-content: center; 21 | align-items: center; 22 | align-content: center; 23 | height: fit-content; 24 | } 25 | 26 | /* 移除不知道干啥的after */ 27 | #content_listContainer > li:after { 28 | display: none; 29 | } 30 | 31 | /* 图标模板调整 */ 32 | #content_listContainer > li > img { 33 | position: relative; 34 | top: 0; 35 | left: 0; 36 | padding: 5px; 37 | border-radius: 5px; 38 | height: 32px; 39 | width: 32px; 40 | box-sizing: border-box; 41 | margin-right: 10px; 42 | } 43 | 44 | /* 图标内容、背景 */ 45 | #content_listContainer > li > img[src*='document'], 46 | #content_listContainer > li > img[src*='file'], 47 | #content_listContainer > li > img { 48 | content: var(--i-file); 49 | background: var(--red-3); 50 | } 51 | 52 | #content_listContainer > li > img[src*='folder'] { 53 | content: var(--i-folder); 54 | background: var(--orange-3); 55 | } 56 | 57 | #content_listContainer > li > img[src*='link'] { 58 | content: var(--i-link); 59 | background: var(--yellow-3); 60 | } 61 | #content_listContainer > li > div img[alt='链接的项目'] { 62 | display: none; 63 | } 64 | 65 | /* 标题占满首行 */ 66 | #content_listContainer > li > div.item { 67 | display: inline; 68 | /*position: relative;*/ 69 | flex-basis: calc(100% - 42px); 70 | padding: 0; 71 | } 72 | 73 | /* 标题样式 */ 74 | #content_listContainer > li > div.item * { 75 | text-decoration: none; 76 | color: var(--c-title) !important; 77 | } 78 | 79 | /* detail样式 */ 80 | #content_listContainer > li > div.details { 81 | padding-left: 0; 82 | flex-basis: 100%; 83 | } 84 | 85 | /* detail首个非空顶框 */ 86 | #content_listContainer > li > div.details > *:not(.alignPanel):first-child { 87 | margin-top: 10px !important; 88 | border-top: 1px solid var(--c-border); 89 | padding-top: 5px !important; 90 | } 91 | 92 | /*#content_listContainer>li>div.details>.alignPanel{*/ 93 | /* display: none;*/ 94 | /*}*/ 95 | 96 | /* detail文字格式 */ 97 | #content_listContainer > li > div.details * { 98 | background: var(--c-card); 99 | border: none; 100 | color: var(--c-text) !important; 101 | line-height: 1.6 !important; 102 | font-family: inherit !important; 103 | font-size: 14px !important; 104 | text-decoration: none !important; 105 | font-style: normal !important; 106 | } 107 | 108 | /* detail下img */ 109 | #content_listContainer > li > div.details img { 110 | border-radius: 5px; 111 | } 112 | 113 | /* detail下链接文件的小图icon，删去 */ 114 | #content_listContainer > li > div.details img[alt='文件'] { 115 | display: none; 116 | } 117 | 118 | /*带color的文字改下划线*/ 119 | #content_listContainer > li > div.details *[style*='background'] { 120 | background: none !important; 121 | } 122 | 123 | #content_listContainer > li > div.details span[style*='text-decoration'], 124 | #content_listContainer > li > div.details span[style*='color'], 125 | #content_listContainer > li > div.details span[style*='background'] { 126 | color: var(--c-text) !important; 127 | background: linear-gradient(180deg, transparent 90%, var(--red-2) 90%) !important; 128 | } 129 | 130 | /* detail下链接变蓝 */ 131 | #content_listContainer > li > div.details a, 132 | #content_listContainer > li > div.details span[style*='color: #0000ff'] { 133 | color: var(--blue-5) !important; 134 | text-decoration: none; 135 | } 136 | -------------------------------------------------------------------------------- /src/css/courseLoginPage.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | @import 'main.css'; 9 | 10 | .container > div:nth-child(1), 11 | .ad, 12 | #footer, 13 | iframe { 14 | display: none; 15 | } 16 | 17 | .container { 18 | background: none; 19 | width: fit-content; 20 | height: fit-content; 21 | } 22 | 23 | /* 覆盖行内样式 */ 24 | .container > div { 25 | padding: 0 !important; 26 | display: flex; 27 | justify-content: center; 28 | } 29 | 30 | #login form { 31 | padding: 0 !important; 32 | } 33 | 34 | #login { 35 | background: none; 36 | display: flex; 37 | justify-content: center; 38 | align-items: center; 39 | margin: 0; 40 | padding: 0; 41 | height: fit-content; 42 | } 43 | 44 | body > div > div > #login > form :not(:first-child) { 45 | display: none; 46 | } 47 | 48 | body > div > div > #login > form { 49 | width: 100%; 50 | height: 10px; 51 | display: block; 52 | text-align: center !important; 53 | margin-top: min(20vh, 300px); 54 | } 55 | 56 | .login_stu { 57 | /* position: absolute; 58 | top: 20%; 59 | left: 50%; 60 | transform: translate(-111px); */ 61 | background-color: var(--c-card); 62 | border: 1px solid var(--c-border); 63 | background-image: var(--i-logo); 64 | background-size: 50%; 65 | background-position: top center; 66 | background-position-y: 20px; 67 | background-repeat: no-repeat; 68 | float: none; 69 | border-radius: 10px; 70 | margin: 0 auto !important; 71 | width: 200px !important; 72 | height: 100px; 73 | padding: 10px; 74 | text-align: center; 75 | box-shadow: var(--c-box-shadow); 76 | } 77 | 78 | .login_stu a:before { 79 | display: block; 80 | content: ''; 81 | color: rgba(0, 0, 0, 0); 82 | height: 1px; 83 | width: 200px; 84 | /*transform: translate(-20px);*/ 85 | margin: 0 auto; 86 | background-color: var(--c-border); 87 | position: relative; 88 | bottom: 17px; 89 | } 90 | 91 | .login_stu a { 92 | display: block; 93 | margin: 2px auto; 94 | width: 100%; 95 | height: 25px; 96 | text-decoration: none; 97 | padding-top: 5px; 98 | color: #fff; 99 | position: relative; 100 | top: 65px; 101 | background-color: var(--c-accent); 102 | border-radius: 10px; 103 | font-size: 10pt; 104 | } 105 | -------------------------------------------------------------------------------- /src/css/courseOther.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | @import 'main.css'; 9 | 10 | #pageTitleDiv > *:not([id='pageTitleBar']) { 11 | display: none; 12 | } 13 | 14 | #pageTitleDiv { 15 | color: transparent; 16 | } 17 | 18 | #actionbar { 19 | border: none; 20 | border-bottom: 1px solid var(--c-border); 21 | } 22 | 23 | #actionbar .mainButton > a, 24 | #actionbar .secondaryButton > a { 25 | color: var(--c-text); 26 | background: var(--c-background); 27 | outline: none; 28 | border-radius: 5px 5px 0 0; 29 | border-bottom: 2px solid transparent !important; 30 | } 31 | 32 | #actionbar .mainButton > a:hover, 33 | #actionbar .secondaryButton > a:hover { 34 | background: var(--c-hover); 35 | border-bottom: 2px solid var(--c-accent) !important; 36 | } 37 | 38 | #actionbar .secondaryButton > a.liveAreaTab { 39 | /*background: var(--c-hover);*/ 40 | border-bottom: 2px solid var(--c-accent) !important; 41 | } 42 | 43 | #actionbar + .containerOptions { 44 | padding-right: 30px; 45 | padding-left: 30px; 46 | } 47 | 48 | #actionbar + .containerOptions .liveArea { 49 | /*padding: 0;*/ 50 | border-radius: 0 0 5px 5px; 51 | border: 1px solid var(--c-border); 52 | border-top: none; 53 | } 54 | 55 | #searchForm { 56 | display: none; 57 | } 58 | 59 | .container { 60 | border: 1px solid var(--c-border); 61 | background: var(--c-card); 62 | border-radius: 5px; 63 | } 64 | 65 | .container * { 66 | font-family: inherit !important; 67 | color: var(--c-text) !important; 68 | text-decoration: none !important; 69 | font-style: normal !important; 70 | font-size: 14px; 71 | line-height: 1.6; 72 | } 73 | 74 | .container .backLink a { 75 | background: var(--c-card); 76 | } 77 | 78 | .container .backLink a:hover { 79 | background-color: var(--c-hover); 80 | } 81 | -------------------------------------------------------------------------------- /src/css/courseTask.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | @import 'main.css'; 9 | -------------------------------------------------------------------------------- /src/css/courseTeachingStaffList.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | @import 'main.css'; 9 | 10 | /*container向上*/ 11 | 12 | .container { 13 | margin-top: 0; 14 | padding-top: 0; 15 | } 16 | 17 | /* 调整按钮样式 */ 18 | #nav { 19 | display: flex; 20 | } 21 | 22 | #actionbar { 23 | border-top: none; 24 | padding-left: 30px; 25 | } 26 | 27 | .mainButton > a { 28 | border-radius: 5px; 29 | background: var(--gray-1); 30 | color: var(--c-text); 31 | } 32 | 33 | .pagingprefs > a { 34 | background: var(--gray-1); 35 | color: var(--c-text); 36 | box-shadow: none; 37 | border-radius: 5px; 38 | } 39 | 40 | /* 调整列表样式 */ 41 | #listContainer { 42 | border: 1px solid var(--c-border); 43 | background: var(--c-card); 44 | border-radius: 5px; 45 | padding: 5px 0; 46 | } 47 | 48 | #listContainer_datatable { 49 | padding: 0 10px; 50 | background: var(--c-card); 51 | /*border-collapse: separate;*/ 52 | /*border-spacing: 0 4px;*/ 53 | } 54 | 55 | /*顶部标题栏样式*/ 56 | #listContainer_datatable .inventoryListHead * { 57 | color: var(--c-title); 58 | font-weight: bold; 59 | padding-left: 12px; 60 | } 61 | 62 | /*标题栏底部边框*/ 63 | #listContainer_datatable > .inventoryListHead * { 64 | border-bottom: 1px solid var(--c-border) !important; 65 | } 66 | 67 | #listContainer_databody { 68 | border-bottom: none; 69 | } 70 | 71 | /*斑马纹表格*/ 72 | #listContainer_databody > tr { 73 | background: var(--c-card); 74 | } 75 | 76 | #listContainer_databody > tr:nth-child(2n) { 77 | background: var(--gray-1); 78 | } 79 | 80 | /* 录播表格限宽 */ 81 | #containerdiv { 82 | width: inherit; 83 | } 84 | 85 | /*感觉hover用不太到*/ 86 | /*#listContainer_databody>tr:hover {*/ 87 | /* background: var(--c-hover);*/ 88 | /*}*/ 89 | 90 | /*每行行首行尾圆角*/ 91 | #listContainer_databody > tr > *:first-child { 92 | border-radius: 5px 0 0 5px; 93 | } 94 | 95 | #listContainer_databody > tr > *:last-child { 96 | border-radius: 0 5px 5px 0; 97 | border-bottom: none !important; 98 | } 99 | 100 | /*表格底部边框*/ 101 | #listContainer_databody > tr:last-child > * { 102 | border-bottom: none !important; 103 | } 104 | 105 | #listContainer_databody > tr > * { 106 | line-height: 24px; 107 | margin-top: 5px; 108 | /*padding-top:100px!important;*/ 109 | border: none; 110 | 111 | /*border-top: 1px solid var(--c-border);*/ 112 | /*border-bottom: 1px solid var(--c-border);*/ 113 | } 114 | 115 | #listContainer_databody > tr * { 116 | color: var(--c-text); 117 | } 118 | 119 | #listContainer_databody > tr .table-data-cell-value > a { 120 | color: var(--cyan-7); 121 | border-radius: 3px; 122 | padding: 0 1em; 123 | } 124 | 125 | #listContainer_databody > tr .table-data-cell-value > a:hover { 126 | text-decoration: none; 127 | background: var(--cyan-2); 128 | } 129 | 130 | /*导航栏*/ 131 | #listContainer > .rumble_top { 132 | display: none; 133 | } 134 | 135 | #listContainer_nav_batch_bot { 136 | display: flex; 137 | justify-content: center; 138 | padding: 10px 0 0 0; 139 | } 140 | 141 | #listContainer_nav_batch_bot > .inventory_paging { 142 | margin: 0; 143 | padding: 0; 144 | } 145 | 146 | #listContainer_navpaging_bot .jumpToLinkContainer, 147 | #listContainer_navpaging_bot .jumpToLinkContainer * { 148 | background: var(--c-primary-light); 149 | color: var(--c-primary); 150 | border: none; 151 | box-shadow: none; 152 | } 153 | 154 | #listContainer_navpaging_bot .jumpToLinkContainer { 155 | border-radius: 5px; 156 | padding: 5px 8px; 157 | display: inline-flex; 158 | justify-content: center; 159 | } 160 | 161 | #listContainer_navpaging_bot > a { 162 | background-color: transparent; 163 | border: none; 164 | box-shadow: none; 165 | } 166 | 167 | #listContainer_pagingcontrols { 168 | display: flex; 169 | /*margin:0 auto;*/ 170 | justify-content: center; 171 | width: 100%; 172 | margin-bottom: 5px; 173 | } 174 | 175 | #listContainer_pagingcontrols #listContainer_itemcount > span { 176 | border: none; 177 | padding: 0; 178 | margin: 0; 179 | color: var(--c-text); 180 | } 181 | 182 | #listContainer_pagingcontrols #listContainer_itemcount > span > strong { 183 | color: var(--c-title); 184 | display: inline; 185 | padding: 0 5px; 186 | } 187 | 188 | #listContainer_pagingcontrols #listContainer_itemcount > span > strong:last-child { 189 | padding-right: 0; 190 | } 191 | 192 | /*#listContainer_navpaging_bot #listContainer_currentpage_bot*/ 193 | -------------------------------------------------------------------------------- /src/css/courseToolAlert.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | @import 'main.css'; 9 | 10 | /* 背景着色，移除box-shadow,text-shadow*/ 11 | html, 12 | #outer_left_stream_alerts { 13 | background: var(--c-card); 14 | } 15 | 16 | * { 17 | box-shadow: none !important; 18 | } 19 | 20 | html, 21 | .locationPane, 22 | #contentPanel { 23 | padding: 0; 24 | height: fit-content; 25 | } 26 | 27 | #streamHeader_alerts, 28 | #streamHeader_alerts * { 29 | background: var(--c-card); 30 | text-shadow: none; 31 | } 32 | 33 | #settingsContainer_alerts, 34 | #outer_left_stream_alerts { 35 | border: none; 36 | } 37 | 38 | #settingsContainer_alerts { 39 | background: var(--c-card); 40 | border: 1px solid var(--c-border); 41 | margin: 10px; 42 | } 43 | 44 | #settingsContainer_alerts * { 45 | color: var(--c-text); 46 | } 47 | 48 | #settingsContainer_alerts .streamSettingHelpLinks { 49 | border-top: 1px solid var(--c-border); 50 | } 51 | 52 | #streamSettingButtons a { 53 | color: var(--cyan-5); 54 | border: none; 55 | border-radius: 3px; 56 | font-size: 12px; 57 | background: var(--c-label); 58 | } 59 | 60 | #streamSettingButtons a:hover { 61 | background: var(--cyan-2); 62 | color: var(--cyan-7); 63 | } 64 | 65 | /* #left_stream_alerts>div span.inlineContextMenu>a { 66 | color: var(--cyan-5); 67 | border: none; 68 | border-radius: 3px; 69 | font-size: 12px; 70 | } 71 | 72 | #left_stream_alerts>div span.inlineContextMenu>a:hover { 73 | background: var(--cyan-2); 74 | color: var(--cyan-7); 75 | } */ 76 | /* html, 77 | .locationPane, 78 | #contentPanel, 79 | #content, 80 | #containerdiv, 81 | #stream_alerts, 82 | #outer_left_stream_alerts { 83 | height: 100%; 84 | } */ 85 | 86 | #streamHeader_alerts { 87 | padding-bottom: 0; 88 | height: 100%; 89 | /* border-right: 1px solid var(--c-border); */ 90 | border: none; 91 | } 92 | 93 | #streamHeader_alerts span.current-page, 94 | #streamHeader_alerts span.icon { 95 | display: none; 96 | } 97 | 98 | #filter_by_alerts button { 99 | color: var(--c-text); 100 | border: 1px solid var(--c-border); 101 | border-radius: 0.2rem; 102 | } 103 | 104 | #filter_by_alerts button:hover { 105 | background: var(--c-hover); 106 | color: var(--c-accent); 107 | } 108 | 109 | #streamHeader_alerts .title-text { 110 | color: var(--c-title); 111 | font-weight: bold; 112 | text-shadow: none; 113 | padding-left: 12px; 114 | } 115 | 116 | #streamHeader_alerts li { 117 | padding: 0; 118 | } 119 | 120 | #streamHeader_alerts a[id*='filter_type_all'] { 121 | background: var(--c-label); 122 | border: 1px solid var(--c-border); 123 | } 124 | 125 | #streamHeader_alerts h5 { 126 | color: var(--c-title); 127 | font-weight: bold; 128 | } 129 | 130 | #streamHeader_alerts a { 131 | color: var(--c-text); 132 | line-height: 1.6; 133 | text-decoration: none; 134 | border-radius: 0; 135 | border: none; 136 | border-left: 4px solid transparent; 137 | } 138 | 139 | #streamHeader_alerts a.active { 140 | box-shadow: none; 141 | border-left: 4px solid var(--c-accent); 142 | } 143 | 144 | #streamHeader_alerts a:hover { 145 | color: var(--red-5); 146 | background: var(--c-hover); 147 | } 148 | 149 | /* 右侧面板 */ 150 | #stream_alerts #stream_currentFilterText_alerts, 151 | #stream_alerts .left_stream_wrapper { 152 | box-shadow: none; 153 | background: var(--c-card); 154 | border: none; 155 | } 156 | 157 | #stream_currentFilterText_alerts { 158 | color: var(--c-text); 159 | font-weight: bold; 160 | text-shadow: none; 161 | } 162 | 163 | #left_stream_alerts > div, 164 | #left_stream_alerts > div * { 165 | color: var(--c-text); 166 | font-style: normal; 167 | /* font-family: inherit; */ 168 | font-family: sans-serif !important; 169 | border-radius: 5px; 170 | border: none; 171 | /* font-weight: normal; */ 172 | } 173 | /* 新项目 */ 174 | #left_stream_alerts > div.stream_new_entry { 175 | background: inherit; 176 | } 177 | #left_stream_alerts > div.stream_new_entry .stream_context::before { 178 | content: 'New'; 179 | color: var(--c-accent); 180 | font-size: 12px; 181 | font-weight: bold; 182 | padding: 0 5px; 183 | background: var(--c-label); 184 | border-radius: 5px; 185 | margin-right: 5px; 186 | } 187 | #left_stream_alerts > div:nth-child(2n) { 188 | background: var(--gray-1); 189 | } 190 | 191 | #left_stream_alerts > div:hover { 192 | background: var(--c-card-hover) !important; 193 | transition: all ease-in 0.2s; 194 | } 195 | 196 | #left_stream_alerts > div span.stream_area_name { 197 | color: var(--c-secondary); 198 | } 199 | 200 | #left_stream_alerts > div span.inlineContextMenu > a { 201 | color: var(--cyan-5); 202 | border: none; 203 | border-radius: 3px; 204 | font-size: 12px; 205 | } 206 | 207 | #left_stream_alerts > div span.inlineContextMenu > a:hover { 208 | background: var(--cyan-2); 209 | color: var(--cyan-7); 210 | } 211 | 212 | #left_stream_alerts > div div.stream_details * { 213 | font-size: 14px; 214 | line-height: 1em; 215 | } 216 | 217 | span.open_stream_settings { 218 | background: var(--i-setting) !important; 219 | background-repeat: no-repeat; 220 | background-position: center center; 221 | } 222 | 223 | .streamError { 224 | display: none; 225 | } 226 | -------------------------------------------------------------------------------- /src/css/courseToolFrame.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | @import 'main.css'; 9 | 10 | .brandingImgWrap, 11 | #appTabList > tbody > tr, 12 | .hideoff, 13 | #quick_links_wrap, 14 | #global-avatar, 15 | #global-toggle-img { 16 | display: none; 17 | /* visibility: hidden; */ 18 | } 19 | 20 | /* 个人界面面板 */ 21 | #global-nav-link > * { 22 | display: none; 23 | } 24 | 25 | #global-nav-link, 26 | #global-nav-link:hover, 27 | #global-nav-link:focus { 28 | color: transparent; 29 | width: 32px; 30 | height: 32px; 31 | padding: 0; 32 | background: transparent; 33 | background-image: var(--i-remind) !important; 34 | background-size: 80%; 35 | background-repeat: no-repeat; 36 | background-position: center center; 37 | border: none; 38 | outline: none; 39 | } 40 | 41 | /* 退出按键 */ 42 | .global-nav-bar a.logout-link, 43 | .global-nav-bar a.logout-link:hover, 44 | .global-nav-bar a.logout-link:focus { 45 | color: transparent; 46 | width: 32px; 47 | height: 32px; 48 | padding: 0; 49 | background: transparent; 50 | background-image: var(--i-exit) !important; 51 | background-size: 80%; 52 | background-repeat: no-repeat; 53 | background-position: center center; 54 | } 55 | 56 | /* 替换背景 */ 57 | /* .tabWrapper-right, 58 | #globalNavPageNavArea, 59 | #topTabs, */ 60 | .container, 61 | .locationPane, 62 | .contentPane { 63 | background-color: var(--c-background); 64 | } 65 | 66 | /* 全局Container */ 67 | /*#containerdiv{*/ 68 | /* border-radius: 5px!important;*/ 69 | /* border:1px solid var(--c-border)!important;*/ 70 | /*}*/ 71 | 72 | /* 重置导航栏布局 */ 73 | .tabWrapper-right, 74 | #globalNavPageNavArea, 75 | #topTabs { 76 | /* position: absolute; */ 77 | /* width: fit-content; */ 78 | background-color: var(--c-navbar); 79 | } 80 | 81 | #globalNavPageNavArea { 82 | padding: 1em 0; 83 | height: 60px; 84 | box-sizing: border-box; 85 | /* vertical-align: middle; */ 86 | display: flex; 87 | text-align: right; 88 | justify-content: flex-end; 89 | flex-direction: row; 90 | padding-right: 140px; 91 | background-image: var(--i-logo); 92 | background-repeat: no-repeat; 93 | background-size: auto 30px; 94 | background-position: 2em center; 95 | border-bottom: 1px solid var(--c-border); 96 | } 97 | 98 | .tabWrapper-right, 99 | .bouncer[role='presentation'] { 100 | width: fit-content; 101 | } 102 | 103 | .global-nav-bar-wrap { 104 | position: absolute; 105 | /* left: 90vw; */ 106 | right: 20px; 107 | display: flex; 108 | /* height: fit-content; */ 109 | justify-content: flex-end; 110 | flex-direction: row-reverse; 111 | background-color: var(--c-navbar); 112 | width: 100px; 113 | height: 60px; 114 | box-sizing: border-box; 115 | /* margin-right: 10px; */ 116 | /* transform: translateX(calc(90vw - 120px)); */ 117 | margin: 0; 118 | padding: 0; 119 | border-bottom: 1px solid var(--c-border); 120 | } 121 | 122 | .global-nav-bar { 123 | /* margin: 30px 5px; */ 124 | margin: 0; 125 | float: none; 126 | height: 60px; 127 | display: flex; 128 | /* display: inline-block; */ 129 | /* background-color: var(--c-navbar); */ 130 | flex-direction: row-reverse; 131 | justify-content: center; 132 | align-items: center; 133 | } 134 | 135 | .global-nav-bar:not(:first-child) { 136 | margin: 0 5px; 137 | } 138 | 139 | /* .nav-link { 140 | transform: translateY(-50%); 141 | } */ 142 | 143 | table.bouncer, 144 | .appTabs td.active, 145 | .appTabs a:hover span, 146 | .appTabs a:focus span { 147 | border: none; 148 | } 149 | 150 | .topTabs .tabWrapper-right { 151 | height: fit-content; 152 | padding: 0; 153 | } 154 | 155 | #globalNavPageNavArea a, 156 | #globalNavPageNavArea td { 157 | padding: 0 !important; 158 | } 159 | 160 | /* 置高 */ 161 | #globalNavPageContentArea, 162 | #globalNavPageContentArea .locationPane, 163 | #contentPanel, 164 | #content, 165 | #containerdiv, 166 | #containerdiv > div, 167 | #iframe_wrap { 168 | height: fit-content !important; 169 | /* min-height: calc(100vh - 60px) !important; */ 170 | } 171 | 172 | #globalNavPageContentArea { 173 | height: calc(100vh - 60px) !important; 174 | top: 0px; 175 | } 176 | 177 | nav.navigationPane { 178 | height: 100%; 179 | } 180 | 181 | #side_nav:after { 182 | content: 'PKU Art @ Arthals'; 183 | display: block; 184 | background-color: var(--c-sidebar); 185 | position: absolute; 186 | bottom: 20px; 187 | left: 50%; 188 | transform: translateX(-50%); 189 | color: var(--c-text); 190 | height: 20px; 191 | z-index: 99999; 192 | opacity: 0.3; 193 | visibility: visible !important; 194 | } 195 | 196 | /* 面板内容样式 */ 197 | .locationPane { 198 | background-color: var(--c-background); 199 | } 200 | 201 | .contentPane .shadow { 202 | border: none; 203 | } 204 | 205 | #pageTitleDiv { 206 | margin: 0 !important; 207 | } 208 | 209 | #contentPanel { 210 | /* -webkit-animation: fadeInUpStablePixel 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards; 211 | animation: fadeInUpStablePixel 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards; */ 212 | } 213 | 214 | /* 个人导航面板 */ 215 | #vertical_container, 216 | #bottomButtons { 217 | display: none; 218 | } 219 | 220 | #global-nav-tools { 221 | z-index: 9999; 222 | height: inherit !important; 223 | } 224 | 225 | #global-nav-flyout { 226 | box-shadow: none; 227 | border-radius: 5px; 228 | width: 40px !important; 229 | height: 100px !important; 230 | transform: translateY(34px); 231 | background-color: transparent; 232 | /*background-color: #000;*/ 233 | } 234 | 235 | #global-nav-tools { 236 | background-color: var(--c-card); 237 | } 238 | 239 | #global-list-tools { 240 | margin: 0; 241 | box-shadow: var(--c-box-shadow); 242 | border: 1px solid var(--c-border); 243 | padding: 5px; 244 | border-radius: 5px; 245 | background-color: var(--c-card); 246 | /*border:1px solid #EEE;*/ 247 | } 248 | 249 | #global-list-tools > .overview, 250 | #global-list-tools > .stream, 251 | #global-list-tools > .calendar { 252 | display: none; 253 | } 254 | 255 | #global-list-tools > .alerts, 256 | #global-list-tools > .grade { 257 | background-color: var(--c-card); 258 | } 259 | 260 | #global-list-tools > .alerts > a:hover, 261 | #global-list-tools > .grades > a:hover { 262 | background-color: var(--c-hover); 263 | } 264 | 265 | #global-list-tools > .alerts > a { 266 | border-radius: 5px; 267 | background: var(--i-alarm); 268 | /* background-color: var(--c-card) !important; */ 269 | background-size: 60%; 270 | background-repeat: no-repeat; 271 | background-position: center center; 272 | margin: 0 auto; 273 | /* transition: 350ms opacity; */ 274 | } 275 | 276 | #global-list-tools > .grades > a { 277 | border-radius: 5px; 278 | background: var(--i-idcard); 279 | /* background-color: var(--c-card) !important; */ 280 | background-size: 60%; 281 | background-repeat: no-repeat; 282 | background-position: center center; 283 | margin: 0 auto; 284 | /* transition: 350ms opacity; */ 285 | } 286 | 287 | #global-list-tools > .more-link > a { 288 | border-radius: 5px; 289 | background: var(--i-idcard); 290 | /* background-color: var(--c-card) !important; */ 291 | background-size: 60%; 292 | background-repeat: no-repeat; 293 | background-position: center center; 294 | } 295 | 296 | #global-more-tools { 297 | display: none !important; 298 | } 299 | 300 | .mybb-tools li a { 301 | opacity: 1; 302 | background-color: var(--c-card); 303 | } 304 | 305 | .mybb-tools li a:focus, 306 | .mybb-tools li a:focus img { 307 | outline: none; 308 | } 309 | 310 | #globalNavPageNavArea .bouncer * { 311 | vertical-align: middle; 312 | font-weight: bold !important; 313 | overflow: visible; 314 | border: none; 315 | } 316 | 317 | #globalNavPageNavArea a { 318 | margin: 0; 319 | } 320 | 321 | /* 内容框架 */ 322 | #globalNavPageContentArea, 323 | #globalNavPageContentArea .locationPane, 324 | #contentPanel, 325 | #content { 326 | background: var(--c-background); 327 | } 328 | 329 | /* 左侧边栏 */ 330 | #side_nav { 331 | background: var(--c-sidebar); 332 | border-right: 1px solid var(--c-border); 333 | width: min(25%, 300px) !important; 334 | padding: 1em; 335 | } 336 | 337 | #side_nav:before { 338 | content: '工具'; 339 | display: block; 340 | width: 100%; 341 | font-size: 19px; 342 | text-align: left; 343 | color: var(--c-title); 344 | font-weight: bold; 345 | padding: 7px 18px 0px 18px; 346 | } 347 | 348 | #side_nav #mybbListTools { 349 | display: flex; 350 | flex-direction: column; 351 | box-sizing: border-box; 352 | width: 100%; 353 | padding: 0px 18px; 354 | margin-top: 0; 355 | } 356 | 357 | #side_nav #mybbListTools:before { 358 | z-index: 1; 359 | content: ''; 360 | color: transparent; 361 | visibility: visible; 362 | display: block; 363 | height: 10px; 364 | position: relative; 365 | top: 5px; 366 | width: 60px; 367 | border-radius: 50px; 368 | box-sizing: border-box; 369 | background-color: var(--c-accent); 370 | margin-bottom: 21px; 371 | } 372 | 373 | /* 移除不需要的边栏选项 */ 374 | #side_nav #mybbListTools li { 375 | display: none; 376 | border: none; 377 | border-left: 6px solid transparent; 378 | } 379 | 380 | #side_nav #mybbListTools li[id*='Alerts'], 381 | #side_nav #mybbListTools li[id*='MyGrades'] { 382 | display: block; 383 | } 384 | 385 | #side_nav #mybbListTools li * { 386 | background-color: transparent; 387 | box-shadow: none; 388 | outline: none; 389 | text-decoration: none; 390 | } 391 | 392 | #side_nav #mybbListTools li.active { 393 | border-left: 6px solid var(--c-accent); 394 | } 395 | 396 | #side_nav #mybbListTools li span.menu-icon { 397 | padding-left: 50px; 398 | border-radius: 5px; 399 | display: flex; 400 | justify-content: left; 401 | flex-direction: row; 402 | justify-items: flex-start; 403 | align-items: center; 404 | text-decoration: none !important; 405 | } 406 | 407 | #side_nav #mybbListTools li.active span.menu-icon { 408 | border-radius: 0 5px 5px 0; 409 | } 410 | 411 | #side_nav #mybbListTools li[id*='Alerts'] span.menu-icon { 412 | background: var(--i-sandclock); 413 | background-repeat: no-repeat; 414 | background-size: 25px 25px; 415 | background-position: 10px; 416 | transition: all ease-in-out 0.15s; 417 | } 418 | 419 | #side_nav #mybbListTools li[id*='Alerts'] span.menu-icon:after { 420 | content: '禁止摸鱼'; 421 | color: var(--c-text); 422 | display: block; 423 | font-size: 16px; 424 | /* text-decoration: none !important; */ 425 | } 426 | 427 | #side_nav #mybbListTools li[id*='MyGrades'] span.menu-icon { 428 | background: var(--i-clover); 429 | background-repeat: no-repeat; 430 | background-size: 25px 25px; 431 | background-position: 10px; 432 | transition: all ease-in-out 0.15s; 433 | } 434 | 435 | #side_nav #mybbListTools li[id*='MyGrades'] span.menu-icon:after { 436 | content: '绩点高高'; 437 | color: var(--c-text); 438 | display: block; 439 | font-size: 16px; 440 | /* text-decoration: none !important; */ 441 | } 442 | 443 | #side_nav #mybbListTools li span.menu-icon:hover:after { 444 | color: var(--c-accent); 445 | } 446 | 447 | #side_nav #mybbListTools li span.menu-icon:hover { 448 | background-color: var(--c-hover) !important; 449 | } 450 | 451 | #side_nav #mybbListTools li[id*='Alerts'] img { 452 | display: none; 453 | } 454 | 455 | #iframe_wrap { 456 | /* display: none; */ 457 | margin-left: min(25%, 300px); 458 | position: relative; 459 | left: 0; 460 | box-shadow: none; 461 | border: none; 462 | display: flex; 463 | align-items: center; 464 | justify-content: center; 465 | height: 100%; 466 | padding-top: calc(10vh - 30px); 467 | } 468 | 469 | #iframe_wrap iframe { 470 | width: min(100%, 1200px); 471 | /* height: 0% !important; */ 472 | height: 80vh !important; 473 | border-radius: 5px; 474 | border: 1px solid var(--c-border); 475 | padding: 5px; 476 | background: var(--c-card); 477 | } 478 | 479 | /* 动画 */ 480 | /* #contentPanel { 481 | animation-delay: 500ms; 482 | animation: fadeInUpTransition 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; 483 | -webkit-animation: fadeInUpTransition 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; 484 | } */ 485 | -------------------------------------------------------------------------------- /src/css/courseToolGrade.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | @import 'main.css'; 9 | 10 | .stream_pages { 11 | display: flex; 12 | justify-content: space-between; 13 | width: 100%; 14 | } 15 | 16 | * { 17 | background: var(--c-card); 18 | box-shadow: none !important; 19 | outline: none !important; 20 | font-style: normal !important; 21 | font-family: sans-serif !important; 22 | } 23 | 24 | .stream_page_left, 25 | .stream_right, 26 | html { 27 | border: none !important; 28 | background: var(--c-card) !important; 29 | } 30 | 31 | .stream_page_left { 32 | width: 400px !important; 33 | flex-basis: 400px; 34 | box-sizing: border-box; 35 | } 36 | 37 | .stream_header > h1 span.current-page, 38 | .stream_header span.icon { 39 | display: none; 40 | } 41 | 42 | .stream_header > h1 span.title-text { 43 | color: var(--c-title); 44 | font-weight: bold; 45 | text-shadow: none; 46 | padding-left: 12px; 47 | } 48 | 49 | /* 筛选栏 */ 50 | .stream_list_filter { 51 | display: flex; 52 | flex-wrap: wrap; 53 | height: fit-content; 54 | } 55 | 56 | .stream_list_filter > li { 57 | background: transparent !important; 58 | } 59 | 60 | .stream_list_filter > li:nth-child(1), 61 | .stream_list_filter > li:nth-child(2) { 62 | flex-basis: 50%; 63 | margin-bottom: 10px; 64 | padding: 10px 8px 5px 8px; 65 | box-sizing: border-box; 66 | border-bottom: 1px solid var(--c-border); 67 | } 68 | 69 | .stream_list_filter > li:nth-child(1) a, 70 | .stream_list_filter > li:nth-child(2) a { 71 | background: transparent; 72 | color: var(--c-text); 73 | border-bottom: 2px solid transparent; 74 | transition: all ease-in-out 0.15s; 75 | } 76 | 77 | .stream_list_filter > li:nth-child(1) a:hover, 78 | .stream_list_filter > li:nth-child(2) a:hover { 79 | border-bottom: 2px solid var(--c-accent); 80 | background: var(--c-hover); 81 | border-radius: 5px 5px 0 0; 82 | } 83 | 84 | .stream_list_filter > li.stream_filterlinks_divider { 85 | border: none; 86 | } 87 | 88 | .stream_list_filter > li a:hover { 89 | color: var(--c-accent) !important; 90 | } 91 | 92 | .stream_list_filter > li:nth-child(4) button, 93 | .stream_list_filter > li:nth-child(5) button, 94 | .stream_list_filter > li:nth-child(6) button { 95 | color: var(--c-text); 96 | border-bottom: 2px solid transparent; 97 | background: transparent; 98 | border: none !important; 99 | } 100 | 101 | .stream_list_filter > li button.active { 102 | background: var(--c-hover); 103 | } 104 | 105 | .stream_header { 106 | border: none; 107 | } 108 | 109 | .stream_dynamic_filters { 110 | background-color: var(--c-card) !important; 111 | border: 1px solid var(--c-border); 112 | padding: 10px; 113 | box-shadow: var(--c-box-shadow) !important; 114 | } 115 | 116 | .stream_dynamic_filters h5 { 117 | color: var(--c-title); 118 | font-size: 15px !important; 119 | font-weight: bold; 120 | } 121 | 122 | .stream_dynamic_filters li a { 123 | color: var(--c-text); 124 | border-radius: 3px; 125 | margin-bottom: 2px; 126 | } 127 | 128 | .stream_dynamic_filters li a:hover { 129 | background: var(--c-hover); 130 | } 131 | 132 | .stream_left > div { 133 | border: none !important; 134 | border-radius: 6px; 135 | } 136 | 137 | .stream_left > div:last-child { 138 | margin-bottom: 50px; 139 | } 140 | 141 | .stream_left > div * { 142 | background: transparent; 143 | } 144 | 145 | .stream_left > div.active_stream_item { 146 | background: var(--c-hover); 147 | } 148 | 149 | .stream_left > div .grade-value { 150 | color: var(--c-secondary); 151 | } 152 | 153 | .stream_left > div.active_stream_item .grade-value { 154 | color: var(--cyan-7); 155 | } 156 | 157 | .stream_left > div .stream_context { 158 | color: var(--c-text) !important; 159 | font-size: 14px !important; 160 | } 161 | 162 | .stream_left > div .stream_area_name { 163 | background-color: var(--c-secondary); 164 | border-radius: 100px; 165 | padding: 0 5px; 166 | color: var(--c-card); 167 | } 168 | 169 | .stream_left > div.active_stream_item .stream_area_name { 170 | background-color: var(--cyan-7); 171 | } 172 | 173 | .stream_pages > .stream_settings { 174 | position: absolute; 175 | display: none !important; 176 | } 177 | 178 | .stream_pages::after { 179 | position: absolute; 180 | display: none !important; 181 | } 182 | 183 | iframe.stream_right { 184 | width: calc(100% - 420px) !important; 185 | flex-basis: calc(100% - 420px); 186 | padding: 5px !important; 187 | box-sizing: border-box; 188 | } 189 | 190 | .streamError { 191 | display: none; 192 | } 193 | -------------------------------------------------------------------------------- /src/css/courseToolGradeClass.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | @import 'main.css'; 9 | 10 | * { 11 | box-shadow: none !important; 12 | text-shadow: none !important; 13 | } 14 | 15 | body, 16 | html, 17 | .container { 18 | border: none; 19 | background: var(--c-card) !important; 20 | } 21 | 22 | /* 标题栏 */ 23 | #streamDetailHeaderRight > span { 24 | display: none; 25 | } 26 | 27 | #streamDetailHeaderRight h2.streamHeader a { 28 | color: var(--cyan-8); 29 | border: none; 30 | } 31 | 32 | #streamDetailHeaderRight { 33 | height: fit-content; 34 | min-height: 0; 35 | border-bottom: none; 36 | padding-bottom: 0; 37 | margin-bottom: 10px; 38 | } 39 | 40 | /*筛选栏*/ 41 | .filterBarHorizontal { 42 | background: var(--c-card); 43 | border-bottom: 1px solid var(--c-border); 44 | } 45 | 46 | #filterby { 47 | display: inline-flex; 48 | height: 100%; 49 | padding-top: 0; 50 | padding-bottom: 0; 51 | } 52 | 53 | #filterby > li { 54 | height: 100%; 55 | position: relative; 56 | } 57 | 58 | #filterby a { 59 | box-sizing: border-box; 60 | height: 100%; 61 | display: flex; 62 | padding: 10px 15px; 63 | box-shadow: none !important; 64 | font-size: 11pt; 65 | font-weight: bold; 66 | /*border:none;*/ 67 | color: var(--c-text); 68 | border-radius: 5px 5px 0 0; 69 | border: none; 70 | border-bottom: 2px solid transparent; 71 | } 72 | 73 | #filterby a:hover { 74 | background: var(--c-hover) !important; 75 | border-bottom: 2px solid var(--c-secondary); 76 | } 77 | 78 | #filterby a.active { 79 | color: var(--c-secondary); 80 | background: var(--c-card); 81 | border-bottom: 2px solid var(--c-secondary); 82 | } 83 | 84 | /* 右侧列表表头 */ 85 | /* TODO: 最后一栏状态栏是啥需要确认 */ 86 | 87 | .filterBarHorizontal select { 88 | -webkit-appearance: none; 89 | -moz-appearance: none; 90 | appearance: none; 91 | background: var(--c-card); 92 | color: var(--c-text); 93 | border: 1px solid var(--c-border); 94 | border-radius: 5px; 95 | outline: none; 96 | padding: 3px 10px; 97 | } 98 | 99 | .filterBarHorizontal select:hover { 100 | background: var(--c-hover) !important; 101 | color: var(--c-title) !important; 102 | } 103 | 104 | /* 表头 */ 105 | .gradeTableNew .grades_header { 106 | padding-top: 1em; 107 | border-bottom: none; 108 | border-radius: 5px 5px 0 0; 109 | background: var(--c-card); 110 | display: flex; 111 | padding: 0 10px; 112 | height: fit-content; 113 | box-sizing: border-box; 114 | } 115 | .gradeTableNew .grades_header .cell.grade { 116 | font-size: 12px; 117 | } 118 | 119 | .gradeTableNew .grades_header > div { 120 | color: var(--c-title); 121 | font-weight: bold; 122 | font-size: 11pt !important; 123 | font-family: sans-serif; 124 | /*margin:10px 0;*/ 125 | margin-top: 10px; 126 | border-bottom: 1px solid var(--c-border); 127 | padding-bottom: 10px !important; 128 | margin-bottom: 4px; 129 | height: fit-content !important; 130 | } 131 | 132 | .gradeTableNew #grades_wrapper { 133 | margin-top: 90px !important; 134 | } 135 | 136 | #grades_wrapper > div { 137 | border-radius: 5px; 138 | padding: 5px 0; 139 | border: none; 140 | box-sizing: border-box; 141 | height: 65px; 142 | transition: all ease-in 0.2s; 143 | } 144 | 145 | #grades_wrapper > div:last-child { 146 | margin-bottom: 50px; 147 | } 148 | 149 | /*斑马纹*/ 150 | #grades_wrapper > div:not(.calculatedRow):nth-child(2n) { 151 | background: var(--gray-1); 152 | } 153 | 154 | #grades_wrapper > div:not(.calculatedRow):hover { 155 | background: var(--c-card-hover); 156 | } 157 | 158 | #grades_wrapper > div:first-child { 159 | margin-top: 10px; 160 | } 161 | 162 | /* 计算行特殊处理 */ 163 | #grades_wrapper .calculatedRow { 164 | box-shadow: none; 165 | border: none; 166 | /*border-radius: 0 5px 5px 0;*/ 167 | box-sizing: border-box; 168 | border-left: 6px solid var(--gray-4); 169 | border-radius: 0 5px 5px 0; 170 | background: var(--gray-2); 171 | background: linear-gradient(90deg, var(--gray-2) 10%, var(--c-card) 90%); 172 | margin-bottom: 10px; 173 | } 174 | 175 | #grades_wrapper .calculatedRow input { 176 | box-shadow: none; 177 | text-decoration: none !important; 178 | border: none; 179 | color: var(--c-text); 180 | } 181 | 182 | /* 第一列单元格样式 */ 183 | #grades_wrapper > div > div.gradable { 184 | height: 100%; 185 | } 186 | 187 | #grades_wrapper > div > div.gradable, 188 | #grades_wrapper > div > div.gradable > a { 189 | color: var(--gray-7); 190 | font-weight: bold; 191 | font-size: 14px; 192 | } 193 | 194 | #grades_wrapper > div > div.gradable > a { 195 | /*overflow: visible;*/ 196 | /*border-bottom:2px solid var(--c-accent);*/ 197 | width: fit-content; 198 | /*height:18px;*/ 199 | display: block; 200 | color: var(--cyan-6); 201 | overflow: visible; 202 | margin-bottom: 8px; 203 | } 204 | 205 | #grades_wrapper > div > div.gradable > div { 206 | font-size: 12px; 207 | display: inline; 208 | /*width: fit-content;*/ 209 | color: var(--c-text); 210 | /*background: var(--c-label);*/ 211 | } 212 | 213 | /* 达到block-inline-block的效果 */ 214 | #grades_wrapper > div > div.gradable > div:first-child:before { 215 | display: block; 216 | margin-bottom: 8px; 217 | content: ''; 218 | } 219 | 220 | #grades_wrapper > div > div.gradable > a + div:before { 221 | display: none; 222 | } 223 | 224 | /* 其他列div */ 225 | #grades_wrapper > div > div.gradable > div { 226 | margin-right: 8px; 227 | } 228 | 229 | #grades_wrapper > div > div.activity span { 230 | color: var(--c-text); 231 | } 232 | 233 | #grades_wrapper > div > div.grade span.grade { 234 | color: var(--cyan-7); 235 | } 236 | 237 | #grades_wrapper > div > div.grade span.pointsPossible { 238 | color: var(--c-text); 239 | } 240 | 241 | /*icon更改*/ 242 | #grades_wrapper > div > div img.tooltip-icon { 243 | width: 18px; 244 | content: var(--i-tip); 245 | } 246 | 247 | #grades_wrapper > div > div i.icon-comment:before { 248 | width: 18px; 249 | background: var(--i-comment); 250 | background-size: contain !important; 251 | background-repeat: no-repeat; 252 | background-position: center center; 253 | content: '.'; 254 | color: transparent; 255 | } 256 | 257 | /*提示页面*/ 258 | #grades_wrapper > div > div .tooltip { 259 | background: var(--c-card); 260 | border: 1px solid var(--c-border); 261 | box-shadow: none !important; 262 | color: var(--c-title); 263 | text-shadow: none; 264 | } 265 | 266 | #grades_wrapper > div > div .tooltipContainer-left .tooltip:after { 267 | text-shadow: none; 268 | } 269 | 270 | #submissionReceipts { 271 | background: var(--c-card); 272 | color: var(--c-text); 273 | font-family: sans-serif; 274 | } 275 | 276 | #grades_wrapper > div { 277 | position: relative; 278 | } 279 | 280 | #grades_wrapper .itemStats { 281 | position: absolute; 282 | top: 0; 283 | right: 0px; 284 | padding: 5px; 285 | } 286 | 287 | /* 留言框 */ 288 | div.lb-overlay { 289 | z-index: 2000; 290 | } 291 | 292 | body div.lb-wrapper { 293 | background-color: var(--c-card) !important; 294 | } 295 | body div.lb-wrapper div.lb-header { 296 | color: var(--c-text); 297 | background: transparent; 298 | } 299 | 300 | body div.lb-wrapper div.lb-content { 301 | background: transparent; 302 | } 303 | 304 | body div.lb-wrapper div.lb-content .container { 305 | color: var(--c-text); 306 | border: none; 307 | } -------------------------------------------------------------------------------- /src/css/courseToolGradeItem.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | @import 'main.css'; 9 | 10 | * { 11 | box-shadow: none !important; 12 | text-shadow: none !important; 13 | } 14 | 15 | body, 16 | html, 17 | .container { 18 | border: none; 19 | background: var(--c-card) !important; 20 | } 21 | 22 | /* 标题栏 */ 23 | #streamDetailHeaderRight > span { 24 | display: none; 25 | } 26 | 27 | #streamDetailHeaderRight h2.streamHeader a { 28 | color: var(--cyan-8); 29 | border: none; 30 | } 31 | 32 | #streamDetailHeaderRight { 33 | height: fit-content; 34 | min-height: 0; 35 | border-bottom: none; 36 | padding-bottom: 0; 37 | margin-bottom: 10px; 38 | } 39 | 40 | /* 反馈页面 */ 41 | .gb_feedback { 42 | border-left: 6px solid var(--cyan-2); 43 | height: fit-content; 44 | padding: 5px 10px; 45 | margin-bottom: 10px; 46 | } 47 | 48 | .gb_feedback::before { 49 | display: none; 50 | } 51 | 52 | .gb_feedback p { 53 | font-family: sans-serif; 54 | font-size: 14px; 55 | color: var(--c-text); 56 | line-height: 1.6; 57 | } 58 | 59 | .gb_feedback p:last-child { 60 | margin-bottom: 0; 61 | } 62 | 63 | /* 成绩表格 */ 64 | .gradeTable * { 65 | background: var(--c-card); 66 | border: none !important; 67 | color: var(--c-text) !important; 68 | } 69 | 70 | .gradeTable .gradeCellGrade { 71 | color: var(--cyan-7) !important; 72 | } 73 | 74 | .gradesByDate input[type='button'] { 75 | color: var(--c-text) !important; 76 | padding: 3px 8px; 77 | text-decoration: none; 78 | border-radius: 3px; 79 | } 80 | 81 | .gradesByDate input[type='button']:hover { 82 | background: var(--cyan-2); 83 | } 84 | 85 | #grades_wrapper > div { 86 | position: relative; 87 | } 88 | 89 | #grades_wrapper .itemStats { 90 | position: absolute; 91 | top: 0; 92 | right: 0px; 93 | padding: 5px; 94 | } 95 | -------------------------------------------------------------------------------- /src/css/courseVideoPlay.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | @import 'main.css'; 9 | 10 | /* 容器 */ 11 | #content, 12 | .container { 13 | border: none; 14 | width: auto !important; 15 | } 16 | 17 | iframe { 18 | min-height: 100vh; 19 | height: fit-content; 20 | } 21 | -------------------------------------------------------------------------------- /src/css/courseVideoPlayFrame.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | @import 'main.css'; 9 | 10 | body { 11 | position: relative; 12 | } 13 | 14 | html, 15 | body, 16 | #app { 17 | background: var(--c-background) !important; 18 | } 19 | 20 | .course-info__wrapper { 21 | /* margin-top: 20px; */ 22 | margin-bottom: 0; 23 | } 24 | 25 | .course-info__header { 26 | display: flex; 27 | justify-content: center !important; 28 | align-items: center; 29 | /* text-align: center; */ 30 | } 31 | 32 | .course-info__header span { 33 | font-weight: bold; 34 | font-size: 18pt; 35 | color: var(--c-title); 36 | -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) both; 37 | animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) both; 38 | } 39 | 40 | .course-info__wrapper .course-info__main { 41 | background: var(--c-card); 42 | padding: 5px; 43 | border-radius: 5px; 44 | border: 1px solid var(--c-border); 45 | } 46 | .course-info__wrapper .course-info__footer { 47 | display: grid; 48 | width: fit-content; 49 | grid-template-columns: 1fr 1fr 1fr; 50 | justify-content: center; 51 | align-items: center; 52 | gap: 10px; 53 | } 54 | 55 | .course-info__wrapper .course-info__footer button { 56 | background: var(--c-tip); 57 | border: none; 58 | color: var(--c-text); 59 | margin-left: 0; 60 | height: 35px; 61 | } 62 | 63 | #injectDownloadSwitchArea { 64 | background: var(--c-tip); 65 | border: none; 66 | color: var(--c-text); 67 | padding: 10px 20px; 68 | border-radius: 4px; 69 | display: inline-flex; 70 | flex-direction: row; 71 | justify-content: center; 72 | align-items: center; 73 | gap: 1rem; 74 | height: 35px; 75 | line-height: 14px; 76 | font-size: 14px; 77 | box-sizing: border-box; 78 | border: none; 79 | font-weight: bold; 80 | border-image-width: 0; 81 | transition: 0.1s; 82 | height: 35px !important; 83 | } 84 | 85 | #injectDownloadSwitchArea.safari { 86 | /* 占据父亲 grid 的 2 列 */ 87 | grid-column: span 2; 88 | } 89 | 90 | #injectDownloadSwitch { 91 | display: none; 92 | } 93 | 94 | #injectDownloadSwitch:checked + label { 95 | background-color: var(--c-tip); 96 | background-image: var(--i-check-simple); 97 | background-size: 80% 80%; 98 | background-position: center; 99 | background-repeat: no-repeat; 100 | } 101 | 102 | label[for='injectDownloadSwitch'] { 103 | display: inline-block; 104 | width: 16px; 105 | height: 16px; 106 | background: var(--c-tip); 107 | border: 1px solid var(--c-border); 108 | border-radius: 4px; 109 | } 110 | 111 | #injectDownloadSwitchArea.safari label[for='injectDownloadSwitch'] { 112 | display: inline-block; 113 | width: 16px; 114 | height: 16px; 115 | background: var(--c-tip); 116 | background-image: var(--i-warning); 117 | background-size: 80% 80%; 118 | background-position: center; 119 | background-repeat: no-repeat; 120 | border: none; 121 | border-radius: 4px; 122 | } 123 | 124 | label[for='injectDownloadSwitch']:before { 125 | content: ''; 126 | transition: 0.1s; 127 | } 128 | 129 | #injectDownloadTip { 130 | background: var(--c-tip); 131 | border: none; 132 | color: var(--c-text); 133 | padding: 10px 20px; 134 | border-radius: 4px; 135 | font-size: 14px; 136 | box-sizing: border-box; 137 | border: none; 138 | font-weight: bold; 139 | transition: 0.1s; 140 | width: fit-content; 141 | margin-top: 10px; 142 | /* margin-bottom: -10px; */ 143 | line-height: 1.5rem; 144 | grid-column: 1 / 4; 145 | width: 100%; 146 | } 147 | 148 | #injectDownloadTip a { 149 | color: var(--c-accent); 150 | text-decoration: underline; 151 | } 152 | 153 | .course-info__wrapper .course-info__footer button:hover { 154 | background: var(--cyan-2); 155 | color: var(--cyan-6); 156 | } 157 | 158 | .course-info__wrapper .course-info__footer #injectDownloadUrlInput:hover { 159 | background: var(--cyan-2); 160 | color: var(--cyan-6); 161 | font-weight: bold; 162 | transition: 0.1s; 163 | } 164 | 165 | .course-info__wrapper .course-info__footer #injectDownloadUrlInput:hover::placeholder { 166 | color: var(--cyan-6); 167 | transition: 0.1s; 168 | } 169 | -------------------------------------------------------------------------------- /src/css/courseVideolist.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | @import 'main.css'; 9 | 10 | /*container向上*/ 11 | 12 | .container { 13 | margin-top: 0; 14 | padding-top: 0; 15 | } 16 | 17 | /* 移除原有搜索栏（基本用不上） */ 18 | .searchbar { 19 | display: none; 20 | } 21 | 22 | /* 调整列表样式 */ 23 | #listContainer { 24 | border: 1px solid var(--c-border); 25 | background: var(--c-card); 26 | border-radius: 5px; 27 | padding: 5px 0; 28 | } 29 | 30 | #listContainer_datatable { 31 | padding: 0 10px; 32 | background: var(--c-card); 33 | /*border-collapse: separate;*/ 34 | /*border-spacing: 0 4px;*/ 35 | } 36 | 37 | /*顶部标题栏样式*/ 38 | #listContainer_datatable .inventoryListHead * { 39 | color: var(--c-title); 40 | font-weight: bold; 41 | padding-left: 12px; 42 | } 43 | 44 | /*标题栏底部边框*/ 45 | #listContainer_datatable > .inventoryListHead * { 46 | border-bottom: 1px solid var(--c-border) !important; 47 | } 48 | 49 | #listContainer_databody { 50 | border-bottom: none; 51 | } 52 | 53 | /*斑马纹表格*/ 54 | #listContainer_databody > tr { 55 | background: var(--c-card); 56 | } 57 | 58 | #listContainer_databody > tr:nth-child(2n) { 59 | background: var(--gray-1); 60 | } 61 | 62 | /* 录播表格限宽 */ 63 | #containerdiv { 64 | width: inherit; 65 | } 66 | 67 | /*感觉hover用不太到*/ 68 | /*#listContainer_databody>tr:hover {*/ 69 | /* background: var(--c-hover);*/ 70 | /*}*/ 71 | 72 | /*每行行首行尾圆角*/ 73 | #listContainer_databody > tr > *:first-child { 74 | border-radius: 5px 0 0 5px; 75 | } 76 | 77 | #listContainer_databody > tr > *:last-child { 78 | border-radius: 0 5px 5px 0; 79 | border-bottom: none !important; 80 | } 81 | 82 | /*表格底部边框*/ 83 | #listContainer_databody > tr:last-child > * { 84 | border-bottom: none !important; 85 | } 86 | 87 | #listContainer_databody > tr > * { 88 | line-height: 24px; 89 | margin-top: 5px; 90 | /*padding-top:100px!important;*/ 91 | border: none; 92 | 93 | /*border-top: 1px solid var(--c-border);*/ 94 | /*border-bottom: 1px solid var(--c-border);*/ 95 | } 96 | 97 | #listContainer_databody > tr * { 98 | color: var(--c-text); 99 | } 100 | 101 | #listContainer_databody > tr .table-data-cell-value > a { 102 | color: var(--cyan-7); 103 | border-radius: 3px; 104 | padding: 0 1em; 105 | } 106 | 107 | #listContainer_databody > tr .table-data-cell-value > a:hover { 108 | text-decoration: none; 109 | background: var(--cyan-2); 110 | } 111 | 112 | /*导航栏*/ 113 | #listContainer > .rumble_top { 114 | display: none; 115 | } 116 | 117 | #listContainer_nav_batch_bot { 118 | display: flex; 119 | justify-content: center; 120 | padding: 10px 0 0 0; 121 | } 122 | 123 | #listContainer_nav_batch_bot > .inventory_paging { 124 | margin: 0; 125 | padding: 0; 126 | } 127 | 128 | #listContainer_navpaging_bot .jumpToLinkContainer, 129 | #listContainer_navpaging_bot .jumpToLinkContainer * { 130 | background: var(--c-primary-light); 131 | color: var(--c-primary); 132 | border: none; 133 | box-shadow: none; 134 | } 135 | 136 | #listContainer_navpaging_bot .jumpToLinkContainer { 137 | border-radius: 5px; 138 | padding: 5px 8px; 139 | display: inline-flex; 140 | justify-content: center; 141 | } 142 | 143 | #listContainer_navpaging_bot > a { 144 | background-color: transparent; 145 | border: none; 146 | box-shadow: none; 147 | } 148 | 149 | #listContainer_pagingcontrols { 150 | display: flex; 151 | /*margin:0 auto;*/ 152 | justify-content: center; 153 | width: 100%; 154 | margin-bottom: 5px; 155 | } 156 | 157 | #listContainer_pagingcontrols #listContainer_itemcount > span { 158 | border: none; 159 | padding: 0; 160 | margin: 0; 161 | color: var(--c-text); 162 | } 163 | 164 | #listContainer_pagingcontrols #listContainer_itemcount > span > strong { 165 | color: var(--c-title); 166 | display: inline; 167 | padding: 0 5px; 168 | } 169 | 170 | #listContainer_pagingcontrols #listContainer_itemcount > span > strong:last-child { 171 | padding-right: 0; 172 | } 173 | 174 | /*#listContainer_navpaging_bot #listContainer_currentpage_bot*/ 175 | -------------------------------------------------------------------------------- /src/css/courseViewAttempt.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | @import 'main.css'; 9 | 10 | /* 整体卡片布局 */ 11 | #containerdiv { 12 | border-radius: 5px; 13 | background: var(--c-card); 14 | padding: 16px; 15 | border: 1px solid var(--c-border); 16 | } 17 | 18 | /* 标题样式重置 */ 19 | #containerdiv h3 { 20 | padding: 0; 21 | background: none; 22 | margin: 0; 23 | margin-bottom: 10px; 24 | font-size: 16px; 25 | top: 0; 26 | color: var(--c-title); 27 | } 28 | 29 | /* 卡片内区域着色 */ 30 | #containerdiv > .stepcontent { 31 | /*display: none;*/ 32 | background: var(--gray-1); 33 | box-sizing: border-box; 34 | border-radius: 5px; 35 | margin-bottom: 16px; 36 | } 37 | 38 | /* 左侧装饰边框 */ 39 | #containerdiv > .stepcontent .label { 40 | color: var(--c-text); 41 | border-left: 3px solid var(--c-accent); 42 | padding-left: 6px; 43 | } 44 | 45 | /* 标题信息着色 */ 46 | #containerdiv > .stepcontent .field { 47 | color: var(--c-title); 48 | } 49 | 50 | /* 拒绝多余空间 */ 51 | #containerdiv > .stepcontent li:last-child { 52 | padding-bottom: 0; 53 | margin-bottom: 0; 54 | } 55 | 56 | /* 卡片内区域着色 */ 57 | #containerdiv > .columnStep > div { 58 | background: var(--gray-1); 59 | padding: 5px; 60 | box-sizing: border-box; 61 | border-radius: 5px; 62 | margin-bottom: 16px; 63 | } 64 | 65 | /* 行首样式特判 */ 66 | #containerdiv > .columnStep .attachments tr:first-child { 67 | border: none; 68 | } 69 | 70 | #containerdiv > .columnStep .attachments tr:first-child * { 71 | color: var(--c-title); 72 | font-weight: bold; 73 | } 74 | 75 | /* 内容顶部划分线条 */ 76 | #containerdiv > .columnStep .attachments tr:not(:first-child) { 77 | border-top: 1px solid var(--c-border); 78 | } 79 | 80 | #containerdiv > .columnStep .attachments tr:not(:first-child) * { 81 | padding-top: 5px; 82 | padding-bottom: 5px; 83 | color: var(--c-text); 84 | } 85 | 86 | /* 图标解释按钮 */ 87 | #containerdiv > .iconlegend a { 88 | background: var(--c-label); 89 | border: 1px solid var(--c-border); 90 | border-radius: 5px; 91 | color: var(--c-text); 92 | box-shadow: none; 93 | } 94 | 95 | /* 返回链接 */ 96 | #containerdiv > .backLink a { 97 | border-radius: 5px 0 5px 0; 98 | background: var(--c-card); 99 | box-shadow: none; 100 | color: var(--c-text); 101 | } 102 | 103 | #containerdiv > .backLink a:hover { 104 | background: var(--c-hover); 105 | color: var(--c-primary); 106 | } 107 | -------------------------------------------------------------------------------- /src/css/iaaaOAuthPage.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | @import 'main.css'; 9 | 10 | /*移除不必要的部分*/ 11 | .top, 12 | .bottom { 13 | display: none; 14 | } 15 | 16 | .main { 17 | display: flex; 18 | flex-direction: column; 19 | justify-content: center; 20 | background: transparent; 21 | } 22 | 23 | .mid { 24 | background-image: none !important; 25 | display: flex; 26 | justify-content: center; 27 | } 28 | 29 | .single_col_panel { 30 | margin-top: 20vh; 31 | /* height: 400px; */ 32 | display: flex; 33 | height: max(fit-content, 400px); 34 | width: 300px !important; 35 | align-items: center; 36 | flex-direction: column; 37 | box-shadow: var(--c-box-shadow); 38 | background-color: var(--c-card); 39 | background-image: var(--i-logo); 40 | border: 1px solid var(--c-border); 41 | background-size: 50%; 42 | background-position: top center; 43 | background-position-y: 25px; 44 | background-repeat: no-repeat; 45 | float: none; 46 | border-radius: 10px; 47 | padding: 90px 20px 20px 20px; 48 | text-align: center; 49 | } 50 | 51 | .row .row-title { 52 | border-bottom: 1px solid var(--c-border); 53 | } 54 | 55 | .row .row-title a { 56 | color: var(--c-text); 57 | } 58 | 59 | .row .row-title .current { 60 | color: var(--c-accent); 61 | } 62 | 63 | input:nth-last-child(n + 2) { 64 | background-color: var(--c-input-bg); 65 | border: 1px solid var(--c-border); 66 | color: var(--c-text); 67 | } 68 | 69 | input:nth-last-child(n + 2):focus { 70 | background-color: transparent; 71 | border: 2px solid var(--c-accent); 72 | } 73 | 74 | input[type='submit'] { 75 | background-color: var(--c-accent); 76 | } 77 | 78 | #remember_text { 79 | margin-top: 4px; 80 | color: var(--c-text); 81 | } 82 | 83 | #passwd_area:before { 84 | content: '密码'; 85 | display: block; 86 | /*font-weight: 800;*/ 87 | /*font-size:16p;*/ 88 | font: bold 13pt arial, sans-serif; 89 | text-align: left; 90 | margin-left: 5px; 91 | margin-bottom: 3px; 92 | color: var(--c-title); 93 | } 94 | 95 | #login_panel > div:nth-child(1):before { 96 | content: '账号'; 97 | display: block; 98 | height: 25px; 99 | /*font-weight: 800;*/ 100 | /*font-size:16p;*/ 101 | font: bold 13pt arial, sans-serif; 102 | text-align: left; 103 | margin-left: 5px; 104 | margin-bottom: 3px; 105 | color: var(--c-title); 106 | } 107 | 108 | .fa.fa-times-circle, 109 | .pad-tip { 110 | transform: translate(0, 25px); 111 | color: var(--c-title); 112 | font-weight: 100; 113 | } 114 | 115 | input[type='password']::placeholder, 116 | input[type='text']::placeholder { 117 | color: transparent; 118 | } 119 | 120 | input { 121 | border-radius: 6px !important; 122 | height: 40px !important; 123 | box-sizing: border-box; 124 | } 125 | 126 | /* 提示消息居中 */ 127 | #msg { 128 | display: flex; 129 | justify-content: center; 130 | text-align: center; 131 | width: 100%; 132 | } 133 | -------------------------------------------------------------------------------- /src/css/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: Arthals 3 | * Email: zhuozhiyongde@126.com 4 | * Github: https://github.com/zhuozhiyongde 5 | * Blog: https://arthals.ink 6 | */ 7 | @import 'arco-palette.css'; 8 | 9 | :root { 10 | --c-title: #212121; 11 | --c-text: #666; 12 | --c-border: #d0d7de; 13 | --c-background: #f6f8fa; 14 | --c-input-bg: #f6f8fa; 15 | --c-card: #fff; 16 | --c-hover: rgba(230, 230, 230, 0.5); 17 | --c-focus: #fff; 18 | --c-box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px; 19 | --c-accent: #9b0000; 20 | --c-navbar: #fff; 21 | --c-sidebar: #fff; 22 | --c-subtitle: #82a3ac; 23 | --c-label: #f6f8fa; 24 | --c-link: #fcc59f; 25 | --c-primary: #165dff; 26 | --c-primary-light: #e8f3ff; 27 | --c-secondary: #89a2ac; 28 | --c-button: #f7f8fa; 29 | --c-card-hover: #66ecf331; 30 | --c-scrollbar: #c1c1c1; 31 | --c-tip: #e5e7eb; 32 | 33 | /* 图片 */ 34 | --i-logo: url('https://cdn.arthals.ink/css/src/PKU_Logo.svg'); 35 | --i-remind: url('https://cdn.arthals.ink/css/src/remind.svg'); 36 | --i-exit: url('https://cdn.arthals.ink/css/src/exit.svg'); 37 | --i-watch: url('https://cdn.arthals.ink/css/src/stopwatch-start.svg'); 38 | --i-file: url('https://cdn.arthals.ink/css/src/file.svg'); 39 | --i-folder: url('https://cdn.arthals.ink/css/src/folder.svg'); 40 | --i-link: url('https://cdn.arthals.ink/css/src/link.svg'); 41 | --i-setting: url('https://cdn.arthals.ink/css/src/setting.svg'); 42 | --i-check: url('https://cdn.arthals.ink/css/src/check.svg'); 43 | --i-check-simple: url('https://cdn.arthals.ink/css/src/check-simple.svg'); 44 | --i-download: url('https://cdn.arthals.ink/css/src/download.svg'); 45 | --i-warning: url('https://cdn.arthals.ink/css/src/warning.svg'); 46 | --i-student: url('https://cdn.arthals.ink/css/src/student.svg'); 47 | --i-refresh: url('https://cdn.arthals.ink/css/src//refresh.svg'); 48 | --i-search: url('https://cdn.arthals.ink/css/src//search.svg'); 49 | --i-arrow: url('https://cdn.arthals.ink/css/src//arrow.svg'); 50 | 51 | /* 不需要根据黑暗模式改编的变量 */ 52 | --c-pku: #9b0000; 53 | 54 | --i-alarm: url('https://cdn.arthals.ink/css/src/alarm-clock.svg'); 55 | --i-idcard: url('https://cdn.arthals.ink/css/src/id-card-v.svg'); 56 | --i-tip: url('https://cdn.arthals.ink/css/src/tip.svg'); 57 | --i-comment: url('https://cdn.arthals.ink/css/src/comment.svg'); 58 | --i-clover: url('https://cdn.arthals.ink/css/src/clover.svg'); 59 | --i-sandclock: url('https://cdn.arthals.ink/css/src/sandclock.svg'); 60 | --i-verified: url('https://cdn.arthals.ink/css/src//verified.svg'); 61 | /* --i-more: url('https://cdn.arthals.ink/css/src//more.svg'); */ 62 | } 63 | 64 | @media (prefers-color-scheme: dark) { 65 | :root { 66 | --c-title: #e2e2e2; 67 | --c-text: #bababa; 68 | --c-border: #30363d; 69 | --c-background: #020409; 70 | --c-input-bg: #020409; 71 | --c-hover: rgba(29, 33, 41, 0.5); 72 | --c-card: #0e1017; 73 | --c-focus: #010409; 74 | --c-box-shadow: none; 75 | --c-accent: #e44c47; 76 | --c-navbar: #171a22; 77 | --c-sidebar: #0e1017; 78 | --c-subtitle: #86909c; 79 | --c-label: #22252d; 80 | --c-link: #f9925a; 81 | --c-primary: #7dc1fc; 82 | --c-primary-light: #262947; 83 | --c-secondary: #00879d; 84 | --c-button: #22262d; 85 | --c-card-hover: rgba(23, 231, 242, 0.23); 86 | --c-scrollbar: #6b6b6b; 87 | --c-tip: #22262d; 88 | 89 | --i-logo: url('https://cdn.arthals.ink/css/src/PKU_Logo_Dark.svg'); 90 | --i-remind: url('https://cdn.arthals.ink/css/src/remind_dark.svg'); 91 | --i-exit: url('https://cdn.arthals.ink/css/src/exit_dark.svg'); 92 | --i-watch: url('https://cdn.arthals.ink/css/src/stopwatch-start_dark.svg'); 93 | --i-file: url('https://cdn.arthals.ink/css/src/file_dark.svg'); 94 | --i-folder: url('https://cdn.arthals.ink/css/src/folder_dark.svg'); 95 | --i-link: url('https://cdn.arthals.ink/css/src/link_dark.svg'); 96 | --i-setting: url('https://cdn.arthals.ink/css/src/setting_dark.svg'); 97 | --i-check: url('https://cdn.arthals.ink/css/src/check_dark.svg'); 98 | --i-check-simple: url('https://cdn.arthals.ink/css/src/check-simple_dark.svg'); 99 | --i-download: url('https://cdn.arthals.ink/css/src/download_dark.svg'); 100 | --i-warning: url('https://cdn.arthals.ink/css/src/warning_dark.svg'); 101 | --i-student: url('https://cdn.arthals.ink/css/src/student_dark.svg'); 102 | --i-refresh: url('https://cdn.arthals.ink/css/src//refresh_dark.svg'); 103 | --i-search: url('https://cdn.arthals.ink/css/src//search_dark.svg'); 104 | --i-arrow: url('https://cdn.arthals.ink/css/src//arrow_dark.svg'); 105 | /* --i-more: url('https://cdn.arthals.ink/css/src//more_dark.svg'); */ 106 | } 107 | } 108 | 109 | body, 110 | html { 111 | background: var(--c-background) !important; 112 | /* animation: transparentToOpaque .5s ease-in-out; */ 113 | } 114 | 115 | * { 116 | outline: none !important; 117 | } 118 | 119 | @keyframes fadeInUpTransition { 120 | from { 121 | opacity: 0; 122 | -webkit-transform: translateY(100px); 123 | transform: translateY(100px); 124 | } 125 | 126 | to { 127 | opacity: 1; 128 | -webkit-transform: none; 129 | transform: none; 130 | } 131 | } 132 | 133 | @keyframes fadeInUpStablePixel { 134 | from { 135 | opacity: 0; 136 | -webkit-transform: translateY(200px); 137 | transform: translateY(200px); 138 | } 139 | 140 | to { 141 | opacity: 1; 142 | -webkit-transform: none; 143 | transform: none; 144 | } 145 | } 146 | 147 | @keyframes fadeInUpStablePixelForContentBox { 148 | from { 149 | margin-left: min(25%, 300px); 150 | opacity: 0; 151 | -webkit-transform: translateY(200px); 152 | transform: translateY(200px); 153 | } 154 | 155 | to { 156 | margin-left: min(25%, 300px); 157 | opacity: 1; 158 | -webkit-transform: none; 159 | transform: none; 160 | } 161 | } 162 | 163 | @keyframes fadeInLeftStablePixel { 164 | from { 165 | color: #fff; 166 | transform: translateX(-72px); 167 | -webkit-transform: translateX(-72px); 168 | } 169 | 170 | to { 171 | opacity: 1; 172 | -webkit-transform: none; 173 | transform: none; 174 | } 175 | } 176 | 177 | @keyframes tracking-in-expand { 178 | 0% { 179 | letter-spacing: -0.5em; 180 | opacity: 0; 181 | } 182 | 183 | 40% { 184 | opacity: 0.6; 185 | } 186 | 187 | 100% { 188 | opacity: 1; 189 | } 190 | } 191 | 192 | /* 定义滚动条的宽度和高度 */ 193 | ::-webkit-scrollbar { 194 | width: 10px; 195 | height: 10px; 196 | } 197 | 198 | /* 定义滚动条轨道的背景色 */ 199 | ::-webkit-scrollbar-track { 200 | background-color: transparent; 201 | } 202 | ::-webkit-scrollbar { 203 | width: 5px; 204 | } 205 | 206 | /* 定义滚动条滑块的背景色 */ 207 | ::-webkit-scrollbar-thumb { 208 | background-color: var(--c-scrollbar); 209 | border-radius: 9999px; 210 | } 211 | -------------------------------------------------------------------------------- /src/css/src/alarm-clock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/arrow_dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/check-simple.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/check-simple_dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/check_dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/clover.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 11 | 12 | 14 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /src/css/src/comment.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/download.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/download_dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/exit.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/exit_dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/file.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 7 | 9 | 10 | -------------------------------------------------------------------------------- /src/css/src/file_dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 7 | 9 | 10 | -------------------------------------------------------------------------------- /src/css/src/folder.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/folder_dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/id-card-v.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/link.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/link_dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/more.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/more_dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/note.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/pku_16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhuozhiyongde/PKU-Art/b51e17b66bfb9c4f52b4958306a22233d70cf17d/src/css/src/pku_16x16.png -------------------------------------------------------------------------------- /src/css/src/pku_180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhuozhiyongde/PKU-Art/b51e17b66bfb9c4f52b4958306a22233d70cf17d/src/css/src/pku_180x180.png -------------------------------------------------------------------------------- /src/css/src/pku_32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhuozhiyongde/PKU-Art/b51e17b66bfb9c4f52b4958306a22233d70cf17d/src/css/src/pku_32x32.png -------------------------------------------------------------------------------- /src/css/src/refresh.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/refresh_dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/remind.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/remind_dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/sandclock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/search_dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/setting.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/setting_dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/stopwatch-start.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/stopwatch-start_dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/student.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/student_dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/tip.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/verified.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/warning.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/src/warning_dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | //// 4 | -------------------------------------------------------------------------------- /version.env: -------------------------------------------------------------------------------- 1 | VERSION='2.3.66' 2 | BUILT='true' 3 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import monkey, { util } from 'vite-plugin-monkey'; 3 | import mkcert from 'vite-plugin-mkcert'; 4 | import fs from 'fs'; 5 | import dotenv from 'dotenv'; 6 | import AutoImport from 'unplugin-auto-import/vite'; 7 | 8 | const date = new Date().toLocaleDateString('zh-CN', { 9 | year: 'numeric', 10 | month: '2-digit', 11 | day: '2-digit', 12 | }); 13 | 14 | // 读取并解析 version.env 文件 15 | const envConfig = dotenv.parse(fs.readFileSync('./version.env')); 16 | 17 | // https://vitejs.dev/config/ 18 | export default defineConfig({ 19 | plugins: [ 20 | AutoImport({ 21 | imports: [util.unimportPreset], 22 | }), 23 | mkcert(), 24 | monkey({ 25 | entry: 'src/main.js', 26 | userscript: { 27 | icon: 'http://cdn.arthals.ink/Arthals-mcskin.png', 28 | namespace: 'arthals/pku-art', 29 | name: 'PKU-Art', 30 | description: '给你一个足够好看的教学网。', 31 | match: ['*://*.pku.edu.cn/*'], 32 | 'run-at': 'document-start', 33 | 'inject-into': 'page', 34 | version: envConfig.VERSION, 35 | updateURL: 'https://cdn.arthals.ink/release/PKU-Art.user.js', 36 | supportURL: 'https://github.com/zhuozhiyongde/PKU-Art/issues', 37 | connect: ['pku.edu.cn'], 38 | license: 'GPL-3.0 license', 39 | author: 'Arthals', 40 | $extra: { 41 | 'author-blog': 'https://arthals.ink', 42 | date, 43 | }, 44 | }, 45 | server: { mountGmApi: true }, 46 | }), 47 | ], 48 | }); 49 | --------------------------------------------------------------------------------