BIT-Moodle-Theme-Enhance

provide mordern theme design for moodle system.

当前为 2020-03-02 提交的版本,查看 最新版本

  1. /* ==UserStyle==
  2. @name BIT-Moodle-Theme-Enhance
  3. @namespace https://github.com/fky2015/
  4. @version 0.1.4
  5. @description provide mordern theme design for moodle system.
  6. @author FKYnJYQ
  7. ==/UserStyle== */
  8.  
  9. @-moz-document domain("lexue.bit.edu.cn"),
  10. url-prefix("http://online.bit.edu.cn/moodle") {
  11. :root {
  12. --main-gap-color: #181a26;
  13. --main-bg-color: #282a36;
  14. --main-selection-color: #44475a;
  15. --main-header-color: #f1fa8c;
  16. --main-fg-color: #f8f8f2;
  17. --main-block-color: var(--main-bg-color);
  18. --main-comment-color: #6272a4;
  19. --main-red: #ff5555;
  20. --main-green: #50fa7b;
  21. --main-cyan: #8be9fd;
  22. --main-pink: #ff79c6;
  23. }
  24.  
  25. #page-content {
  26. max-width: 100% !important;
  27. }
  28.  
  29. html,
  30. #page-course-search > div.text-center {
  31. background: var(--main-bg-color);
  32. }
  33.  
  34. /* 导航栏 */
  35. header,
  36. #page,
  37. .navbar .brand,
  38. .navbar-inner,
  39. #search,
  40. #coursesearchbox,
  41. .navbar .nav > li > a:focus,
  42. .navbar .nav > li > a:hover,
  43. .navbar .nav > .active > a,
  44. .navbar .nav > .active > a:hover,
  45. .navbar .nav > .active > a:focus,
  46. .navbar .nav li.dropdown.open > .dropdown-toggle,
  47. .navbar .nav li.dropdown.active > .dropdown-toggle,
  48. .navbar .nav li.dropdown.open.active > .dropdown-toggle {
  49. background: var(--main-bg-color) !important;
  50. max-width: 100%;
  51. }
  52.  
  53. .navbar .dropdown-menu {
  54. border-bottom: 0px solid #438eb9;
  55. }
  56.  
  57. .navbar .dropdown-menu > li > a,
  58. .navbar .dropdown-menu > li > a:focus {
  59. background-color: var(--main-red) !important;
  60. color: var(--main-fg-color);
  61. }
  62.  
  63. #page-mod-hvp-view > div.text-center,
  64. #page-enrol-index > div.text-center,
  65. #page-mod-page-view > div.text-center,
  66. #page-course-view-topics > div.text-center,
  67. #page-course-view-weeks > div.text-center,
  68. .text-center {
  69. background: var(--main-bg-color);
  70. }
  71.  
  72. button,
  73. input,
  74. select,
  75. .navbar .btn-navbar {
  76. background: var(--main-bg-color) !important;
  77. border: 1px solid var(--main-fg-color) !important;
  78. color: var(--main-fg-color) !important;
  79. }
  80.  
  81. input[type="image"],
  82. #coursesearchbox {
  83. border-width: 0 !important;
  84. }
  85.  
  86. #search input[type="submit"] {
  87. background: var(--main-bg-color)
  88. url(/theme/image.php/lambda/theme/1582254235/bg/icon-search) no-repeat
  89. center center !important;
  90. border-width: 0px !important;
  91. }
  92.  
  93. header span[tabindex="0"] {
  94. color: var(--main-green);
  95. }
  96.  
  97. table#form td.submit,
  98. .form-buttons,
  99. .path-admin .buttons,
  100. #fitem_id_submitbutton,
  101. .fp-content-center form + div,
  102. div.backup-section + form,
  103. #fgroup_id_buttonar {
  104. background-color: var(--main-bg-color);
  105. }
  106.  
  107. .singleselect form,
  108. .singleselect select,
  109. .moodle-actionmenu[data-enhanced].show .menu {
  110. background-color: var(--main-bg-color);
  111. color: var(--main-fg-color);
  112. }
  113.  
  114. /* 功能块 */
  115. .block {
  116. background: var(--main-block-color);
  117. margin-bottom: 0px;
  118. border: 0;
  119. border-bottom: 2px solid var(--main-gap-color);
  120. }
  121.  
  122. .generaltable tbody > tr:nth-child(odd) > td,
  123. .forumpost {
  124. background: var(--main-bg-color);
  125. }
  126.  
  127. /* 主体 */
  128. body {
  129. color: var(--main-fg-color);
  130. }
  131.  
  132. .content h3.sectionname,
  133. .bx-prev,
  134. .bx-next,
  135. .course-content .current .content {
  136. background: var(--main-bg-color);
  137. }
  138.  
  139. .course-content .current {
  140. background: var(--main-bg-color) !important;
  141. border: 5px solid var(--main-selection-color) !important;
  142. }
  143.  
  144. .fa-chevron-circle-up:before {
  145. color: var(--main-selection-color);
  146. }
  147.  
  148. /* 代码编辑 */
  149. .path-mod-programming td.programming-io span {
  150. background-color: var(--main-selection-color);
  151. }
  152.  
  153. .nav-tabs,
  154. .nav-tabs > .active > a {
  155. background-color: var(--main-bg-color);
  156. border: 0;
  157. color: var(--main-fg-color);
  158. }
  159.  
  160. .nav-tabs > li > a {
  161. background-color: var(--main-bg-color);
  162. color: var(--main-fg-color);
  163. }
  164.  
  165. .nav-tabs > .active > a[href],
  166. .nav-tabs > li.active {
  167. color: var(--main-green);
  168. border-bottom: 1px solid var(--main-green);
  169. border-top: 0;
  170. margin-bottom: -1px;
  171. margin-top: -2px;
  172. }
  173.  
  174. .path-mod-programming #test-result-detail .passed,
  175. .path-mod-programming #test-result-detail .passed .cell {
  176. background-color: var(--main-bg-color);
  177. }
  178.  
  179. .passed a {
  180. color: var(--main-green);
  181. }
  182.  
  183. .nav > .disabled > a {
  184. background: var(--main-bg-color);
  185. }
  186. .nav > .disabled > a:hover {
  187. background: var(--main-bg-color) !important;
  188. transform: none !important;
  189. border: none;
  190. }
  191.  
  192. .dp-highlighter ol li,
  193. .dp-highlighter .columns div {
  194. line-height: 24px;
  195. }
  196.  
  197. body {
  198. font-size: 18px;
  199. }
  200.  
  201. .content h3.sectionname {
  202. border-color: #4f0f0f;
  203. border-width: 0px;
  204. }
  205.  
  206. table#explaincaps tbody > tr:nth-child(odd) > td,
  207. table#defineroletable tbody > tr:nth-child(odd) > td,
  208. table.grading-report tbody > tr:nth-child(odd) > td,
  209. table#listdirectories tbody > tr:nth-child(odd) > td,
  210. table.rolecaps tbody > tr:nth-child(odd) > td,
  211. table.userenrolment tbody > tr:nth-child(odd) > td,
  212. table#form tbody > tr:nth-child(odd) > td,
  213. form#movecourses table tbody > tr:nth-child(odd) > td,
  214. #page-admin-course-index .editcourse tbody > tr:nth-child(odd) > td,
  215. .forumheaderlist tbody > tr:nth-child(odd) > td,
  216. table.flexible tbody > tr:nth-child(odd) > td,
  217. .generaltable tbody > tr:nth-child(odd) > td,
  218. table#explaincaps tbody > tr:nth-child(odd) > th,
  219. table#defineroletable tbody > tr:nth-child(odd) > th,
  220. table.grading-report tbody > tr:nth-child(odd) > th,
  221. table#listdirectories tbody > tr:nth-child(odd) > th,
  222. table.rolecaps tbody > tr:nth-child(odd) > th,
  223. table.userenrolment tbody > tr:nth-child(odd) > th,
  224. table#form tbody > tr:nth-child(odd) > th,
  225. form#movecourses table tbody > tr:nth-child(odd) > th,
  226. #page-admin-course-index .editcourse tbody > tr:nth-child(odd) > th,
  227. .forumheaderlist tbody > tr:nth-child(odd) > th,
  228. table.flexible tbody > tr:nth-child(odd) > th,
  229. .generaltable tbody > tr:nth-child(odd) > th {
  230. background-color: var(--main-bg-color);
  231. }
  232.  
  233. /* footer */
  234. #page-footer {
  235. background: var(--main-bg-color);
  236. border-top: 3px solid var(--main-gap-color);
  237. text-align: center;
  238. margin-top: 0px;
  239. }
  240.  
  241. .footerlinks {
  242. line-height: 15px;
  243. background: var(--main-bg-color);
  244. border-top: 0;
  245. padding: 0;
  246. margin: auto;
  247. }
  248.  
  249. .breadcrumb > li {
  250. text-shadow: 0 0;
  251. }
  252.  
  253. #page-footer .footnote {
  254. float: none;
  255. color: var(--main-header-color);
  256. margin-left: 0px;
  257. }
  258.  
  259. #dock .dockedtitle,
  260. .calendar-event-panel,
  261. .block .calendar-event-panel .yui3-overlay-content,
  262. .path-calendar .maincalendar .eventlist * {
  263. background: var(--main-bg-color) !important;
  264. background-color: var(--main-bg-color);
  265. }
  266.  
  267. .block .calendar-event-panel {
  268. border: none;
  269. }
  270. .block .calendar-event-panel .yui3-overlay-content,
  271. .path-calendar .maincalendar .eventlist * {
  272. box-shadow: none;
  273. border-color: var(--main-fg-color);
  274. }
  275.  
  276. .calendar_event_course {
  277. background-color: var(--main-selection-color);
  278. }
  279.  
  280. #dock .dockedtitle .css3transform {
  281. position: static !important;
  282. transform: none !important;
  283. top: auto !important;
  284. width: auto !important;
  285. padding: 1px !important;
  286. line-height: 20px !important;
  287. }
  288.  
  289. #dockeditempanel .dockeditempanel_content {
  290. background-color: var(--main-bg-color);
  291. -webkit-box-shadow: none;
  292. box-shadow: none;
  293. }
  294.  
  295. /* 消除老代码影响 */
  296. .skip-block-to {
  297. height: 0px;
  298. }
  299.  
  300. #site-news-forum,
  301. #frontpage-course-list,
  302. #frontpage-category-combo,
  303. #frontpage-category-names {
  304. background-image: none;
  305. }
  306.  
  307. .course-content ul li.section.main {
  308. background: var(--main-bg-color);
  309. border-bottom: 3px solid var(--main-gap-color);
  310. }
  311.  
  312. a,
  313. a:visited,
  314. .instancename {
  315. color: var(--main-fg-color) !important;
  316. }
  317.  
  318. .usermenu .moodle-actionmenu[data-enhanced] .menu .menu-action.icon img,
  319. .usermenu
  320. .moodle-actionmenu[data-enhanced]
  321. .menu
  322. .menu-action.icon:hover
  323. img {
  324. color: var(--main-fg-color);
  325. }
  326.  
  327. .path-mod-assign td.submissionnotgraded,
  328. .path-mod-assign div.submissionnotgraded {
  329. color: var(--main-red);
  330. background-color: var(--main-bg-color);
  331. }
  332.  
  333. .block .header .title {
  334. background: var(--main-block-color);
  335. }
  336.  
  337. .header .title h2:before,
  338. .coursebox > .info > .coursename a:before,
  339. .coursebox > .info > .name a:before {
  340. background: var(--main-block-color) !important;
  341. }
  342.  
  343. /* 课程名称 */
  344. .coursebox > .info > .coursename a {
  345. color: var(--main-fg-color);
  346. }
  347.  
  348. #fitem_id_submitbutton {
  349. background: var(--main-bg-color);
  350. }
  351.  
  352. h1,
  353. h2,
  354. h3,
  355. h4,
  356. h5,
  357. h6,
  358. .back-to-top,
  359. .socials p,
  360. #socialheading,
  361. .forumpost .subject {
  362. color: var(--main-header-color) !important;
  363. }
  364.  
  365. .section .activity .actions {
  366. background: rgba(255, 255, 255, 0);
  367. }
  368.  
  369. li {
  370. line-height: inherit;
  371. }
  372.  
  373. /* 课程 */
  374. .coursebox {
  375. border: 1px solid var(--main-gap-color);
  376. border-radius: 0;
  377. border-width: 0 0 1px 0;
  378. background-color: var(--main-bg-color) !important;
  379. margin-bottom: 0px;
  380. }
  381.  
  382. /* 颜色覆盖 */
  383. .green {
  384. background-color: #50fa7b;
  385. }
  386.  
  387. .purple {
  388. background-color: #bd93f9;
  389. }
  390.  
  391. .orange {
  392. background-color: #ffb86c;
  393. }
  394.  
  395. .lightblue {
  396. background-color: #8be9fd;
  397. }
  398.  
  399. .yellow {
  400. background-color: #fdb53f;
  401. }
  402.  
  403. .turquoise {
  404. background-color: #f1fa8c;
  405. }
  406.  
  407. a:hover {
  408. color: var(--main-pink) !important;
  409. transition: all 0.3s ease 0.1s !important;
  410. text-decoration: none !important;
  411. }
  412.  
  413. .nav-tabs > .active > a,
  414. .nav-tabs > .active > a:hover,
  415. .nav-tabs > .active > a:focus,
  416. .navbar .dropdown-menu > li > a:hover,
  417. .navbar .dropdown-menu > li > a:focus,
  418. a:hover,
  419. .block:hover,
  420. .coursebox:hover,
  421. .generaltable tbody tr:hover > td,
  422. .block:hover .header .title,
  423. .block:hover .header .title h2:before,
  424. .coursebox:hover > .info > .coursename a:before,
  425. .coursebox:hover > .info > .name a:before,
  426. #dock .dockedtitle:hover,
  427. #dock .dockedtitle:focus {
  428. background: var(--main-selection-color) !important;
  429. }
  430.  
  431. .usermenu .moodle-actionmenu .menu .menu-action.icon a:hover img {
  432. background-color: transparent;
  433. }
  434.  
  435. /* scrollbar */
  436. ::-webkit-scrollbar {
  437. width: 0.5rem;
  438. height: 0.5rem;
  439. background: var(--main-bg-color);
  440. }
  441.  
  442. ::-webkit-scrollbar-track {
  443. border-radius: 0;
  444. }
  445.  
  446. ::-webkit-scrollbar-thumb {
  447. border-radius: 0.5rem;
  448. background-color: rgba(95, 95, 95, 0);
  449. transition: all 1s;
  450. }
  451.  
  452. ::-webkit-scrollbar-thumb:hover {
  453. background-color: var(--main-selection-color);
  454. }
  455. }