☰

nure-ui-fix

виправлення для темної теми та деяких меню

  1. // ==UserScript==
  2. // @name            nure-ui-fix
  3. // @name:en         nure-ui-fix
  4. // @icon            https://dl.nure.ua/pluginfile.php/1/theme_moove/favicon/1664384975/favicon.ico
  5. // @namespace       https://tampermonkey.net/
  6. // @version         9
  7. // @description     виправлення для темної теми та деяких меню
  8. // @description:en  changes to the dark theme and some menus
  9. // @author          sekomi
  10. // @match           https://dl.nure.ua/*
  11. // @run-at          document-end
  12. // @grant           GM_addStyle
  13. // @license         MIT
  14. // @noframes
  15. // ==/UserScript==
  16.  
  17. (function() {
  18.     'use strict';
  19.     /* global $ */
  20.  
  21.     const enableLayoutChanges = true
  22.     const colorBgDefault      = "#151515"
  23.     const colorBgAlt1         = "#1f2022"
  24.     const colorBgAlt2         = "#1c1c1c"
  25.     const colorFgDefault      = "#aaaaaa"
  26.  
  27.     const darkModeCss = `
  28. /* nure-ui-fix darkModeCss */
  29. /* page */
  30. body.moove-darkmode #page, body.moove-darkmode #region-main, body.moove-darkmode #page.drawers .main-inner {
  31.   background-color: ${colorBgDefault};
  32. }
  33. body.moove-darkmode #page-footer, body.moove-darkmode div[role="main"] {
  34.   background-color: ${colorBgDefault};
  35. }
  36. body.moove-darkmode .dashboard-card-deck .dashboard-card .dashboard-card-footer, body.moove-darkmode #region-main .section.main, body.moove-darkmode .course-content .single-section .sectionname, body.moove-darkmode .course-content .section .sectionname {
  37.   background-color: ${colorBgDefault} !important;
  38. }
  39. .description .course-description-item {
  40.   background-color: ${colorBgAlt2};
  41. }
  42. div.description-inner {
  43.   background-color: ${colorBgAlt2};
  44. }
  45. .path-mod .activity-header:not(:empty) {
  46.   background-color: ${colorBgAlt2};
  47. }
  48. .activity-item .activity-completion button.btn, .activity-item .activity-completion a[role="button"].btn {
  49.   color: #deeae7;
  50.   background-color: ${colorBgAlt1};
  51.   border-color: #576470;
  52. }
  53. .activity-item {
  54.   background-color: ${colorBgAlt1};
  55. }
  56. .navbar-toggler-icon {
  57.   background-color: darkslategray;
  58. }
  59. .course-section.hidden .section-item {
  60.   background-color: ${colorBgDefault};
  61. }
  62.  
  63. /* assignments */
  64. .path-mod-assign td.submissionstatussubmitted, .path-mod-assign div.submissionstatussubmitted, .path-mod-assign a:link.submissionstatussubmitted {
  65.   color: #deeae7;
  66.   background-color: #0c3511;
  67. }
  68. .path-mod-assign td.submissiongraded, .path-mod-assign div.submissiongraded {
  69.   color: #deeae7;
  70.   background-color: #0c3511;
  71. }
  72. .path-mod-assign td.earlysubmission, .path-mod-assign div.earlysubmission {
  73.   color: #deeae7;
  74.   background-color: #0c3511;
  75. }
  76. .path-mod-assign td.latesubmission, .path-mod-assign a:link.latesubmission, .path-mod-assign div.latesubmission {
  77.   color: #deeae7;
  78.   background-color: #411313;
  79. }
  80. .path-mod-assign td.submissionnotgraded, .path-mod-assign div.submissionnotgraded {
  81.   color: #deeae7;
  82. }
  83. .path-mod-assign td.submissionlocked, .path-mod-assign div.submissionlocked {
  84.   color: #deeae7;
  85.   background-color: #262434;
  86. }
  87. .path-mod-assign td.submissionstatusdraft, .path-mod-assign div.submissionstatusdraft, .path-mod-assign a:link.submissionstatusdraft {
  88.   color: #deeae7;
  89.   background-color: #3d3d35;
  90. }
  91.  
  92. /* quizzes */
  93. #page-mod-quiz-view table.quizattemptsummary tr.bestrow td {
  94.   background-color: #092a0d;
  95. }
  96. .que .info {
  97.   background-color: ${colorBgAlt1};
  98.   border: 1px solid #56595d;
  99. }
  100. .que .formulation {
  101.   color: #e8eeed;
  102.   background-color: #22262e;
  103.   border-color: #a7b6b8;
  104. }
  105. #quiz-timer-wrapper #quiz-timer {
  106.   border: 1px solid #ca3120;
  107.   background-color: ${colorBgAlt1};
  108. }
  109. .path-mod-quiz .qnbutton {
  110.   border: 1px solid #bbb;
  111.   background-color: ${colorBgAlt2} !important;
  112. }
  113. .path-mod-quiz .qnbutton {
  114.   background: ${colorBgAlt2};
  115.     background-color: rgb(30, 30, 30);
  116.     background-image: none;
  117. }
  118. .path-mod-quiz #mod_quiz_navblock .qnbutton.complete .trafficlight, .path-mod-quiz #mod_quiz_navblock .qnbutton.answersaved .trafficlight, .path-mod-quiz #mod_quiz_navblock .qnbutton.requiresgrading .trafficlight {
  119.   background-color: #11691b;
  120. }
  121. .path-mod-quiz #mod_quiz_navblock .qnbutton.notyetanswered .trafficlight, .path-mod-quiz #mod_quiz_navblock .qnbutton.invalidanswer .trafficlight {
  122.   background-color: #4a3e9e;
  123. }
  124. table.quizreviewsummary th.cell {
  125.   background: ${colorBgAlt1};
  126. }
  127. table.quizreviewsummary td.cell {
  128.   background: ${colorBgAlt1};
  129. }
  130. .qn-question {
  131.   background-color: ${colorBgAlt1};
  132. }
  133. .que.ddwtos .group1 {
  134.   background-color: #161719;
  135. }
  136. .que.ddimageortext .group1, form.mform fieldset#id_previewareaheader .group1 {
  137.   background-color: #161719;
  138. }
  139.  
  140. /* notification colors */
  141. .popover-region-container {
  142.   border: 1px solid #757b7f;
  143. }
  144. body.moove-darkmode .message-app, body.moove-darkmode .navbar .popover-region-container {
  145.   background-color: #1d1d1d;
  146. }
  147. .popover-region-notifications .popover-region-container .popover-region-content-container .content-item-container.unread {
  148.   background-color: #1a1a1a;
  149. }
  150. .popover-region-notifications .popover-region-container .popover-region-content-container .content-item-container {
  151.   background-color: #1a1a1a;
  152. }
  153. .content-item-container.unread {
  154.   background-color: #1a1a1a;
  155. }
  156. .popover-region-notifications .popover-region-container .popover-region-content-container .content-item-container:hover {
  157.   background-color: #1a1a1a;
  158.   color: inherit;
  159. }
  160. .popover-region-footer-container {
  161.   background-color: #202122;
  162. }
  163.  
  164. .text-dark {
  165.   color: #dfe6ed !important;
  166. }
  167.  
  168. /* search button color */
  169. .simplesearchform .btn-submit {
  170.   background-color: #0f47ad;
  171. }
  172. .simplesearchform .btn-submit {
  173.   border-color: #9facc0;
  174.   color: #dfe6ed;
  175. }
  176.  
  177. /* menu */
  178. .dropdown-menu {
  179.   background-color: ${colorBgAlt1};
  180. }
  181.  
  182. /* drawer */
  183. .drawer {
  184.   background-color: ${colorBgAlt1};
  185. }
  186. .btn {
  187.   color: #e1e6ec;
  188. }
  189. .courseindex .courseindex-item .courseindex-link, .courseindex .courseindex-item .courseindex-chevron {
  190.   color: #e1e6ec;
  191. }
  192. .courseindex .courseindex-item.dimmed .courseindex-link, .courseindex .courseindex-item.dimmed .courseindex-chevron {
  193.   color: #e1e6ec;
  194. }
  195.  
  196. .moove-darkmode .courseindex-item:not(.pageitem):hover .icon, .btn.drawertoggle {
  197.   color: ${colorFgDefault} !important;
  198. }
  199. .courseindex .courseindex-item:hover, .courseindex .courseindex-item:focus {
  200.   color: ${colorFgDefault} !important;
  201. }
  202. .courseindex d-flex:hover .courseindex-item:hover .courseindex-link:hover, .courseindex .courseindex-item .courseindex-link:focus, .courseindex .courseindex-item .courseindex-chevron:hover, .courseindex .courseindex-item .courseindex-chevron:focus {
  203.   color: ${colorFgDefault} !important;
  204. }
  205. a:hover {
  206.   color: ${colorFgDefault} !important;
  207. }
  208. .courseindex .courseindex-item:hover .courseindex-link, .courseindex .courseindex-item:hover .courseindex-chevron, .courseindex .courseindex-item:focus .courseindex-link, .courseindex .courseindex-item:focus .courseindex-chevron {
  209.   color: ${colorFgDefault} !important;
  210. }
  211. .fp-icon {
  212.   background: #8ca7db;
  213. }
  214.  
  215. /* calendar */
  216. .maincalendar .calendarmonth .clickable:hover {
  217.   background-color: ${colorBgAlt1};
  218. }
  219. .modal-content {
  220.   background-color: ${colorBgAlt1};
  221. }
  222. .block .block-controls .dropdown-toggle {
  223.   color: #deeae7;
  224. }
  225.  
  226. /* grades */
  227. .path-grade-report-user .user-grade thead th, .grade-report-user .user-grade thead th {
  228.   background-color: ${colorBgDefault};
  229. }
  230. .path-grade-report-user .user-report-container, .grade-report-user .user-report-container {
  231.   background-color: ${colorBgDefault};
  232. }
  233. .path-grade-report-user .user-grade th.category, .grade-report-user .user-grade th.category {
  234.   background-color: ${colorBgDefault};
  235. }
  236. .path-grade-report-user .user-grade td, .grade-report-user .user-grade td {
  237.   background-color: ${colorBgDefault};
  238. }
  239. .path-grade-report-user .user-grade .baggt, .path-grade-report-user .user-grade .baggb, .grade-report-user .user-grade .baggt, .grade-report-user .user-grade .baggb {
  240.   background-color: ${colorBgDefault};
  241. }
  242. .path-grade-report-user .user-grade th.column-itemname:not(.header, .category, .baggt, .baggb), .grade-report-user .user-grade th.column-itemname:not(.header, .category, .baggt, .baggb) {
  243.   background-color: ${colorBgDefault};
  244. }
  245. .path-grade-report-user .user-grade td.item, .grade-report-user .user-grade td.item {
  246.   background-color: ${colorBgDefault};
  247. }
  248.  
  249. /* general colors */
  250. body {
  251.   background-color: ${colorBgDefault} !important;
  252. }
  253. body.moove-darkmode .card, body.moove-darkmode #page-enrol-users #filterform, body.moove-darkmode .que .history, body.moove-darkmode .userprofile .profile_tree section, body.moove-darkmode .groupinfobox, body.moove-darkmode .well {
  254.   background-color: ${colorBgDefault};
  255. }
  256. .btn-secondary {
  257.   background-color: ${colorBgAlt1};
  258. }
  259. #page.drawers {
  260.   scrollbar-color: #6a737b #131317;
  261. }
  262. .generaltable tbody tr:nth-of-type(2n)
  263. {
  264.   background-color: ${colorBgDefault};
  265. }
  266. body.moove-darkmode {
  267.   color: #dfe6ed;
  268. }
  269. body.moove-darkmode a {
  270.   color: #79accf;
  271. }
  272. .custom-select:disabled {
  273.   color: #dfe6ed;
  274.   background-color: ${colorBgAlt1};
  275. }
  276. .border {
  277.   border: 1px solid #888 !important;
  278. }
  279. .generaltable th, .generaltable td {
  280.   border-top: 1px solid #6c7175;
  281. }
  282. .table-bordered th, .table-bordered td {
  283.   border: 1px solid #6c7175;
  284. }
  285. .dashboard-card {
  286.   border: 1px solid #a7aeb4;
  287. }
  288. .forumpost.unread .row.header, .path-course-view .unread, span.unread
  289. {
  290.   background-color: ${colorBgAlt1};
  291. }
  292. .page-link {
  293.   background-color: ${colorBgAlt1};
  294.   border: 1px solid #888;
  295. }
  296. .page-link:hover {
  297.   background-color: #afbbd240;
  298. }
  299. .page-item.disabled .page-link {
  300.   color: #6a737b;
  301.   background-color: #161719;
  302.   border: 1px solid #888;
  303. }
  304. .generaltable tbody tr:hover {
  305.   color: #646f7b;
  306. }
  307. .list-group-item {
  308.   background-color: ${colorBgAlt1};
  309. }
  310. [data-region="right-hand-drawer"].drawer .footer-container {
  311.   background-color: #2a2929;
  312. }
  313. .moremenu .nav-link.active:focus, .moremenu .nav-link.active:hover {
  314.   background-color: #222222;
  315. }
  316. .moremenu .nav-link:hover, .moremenu .nav-link:focus {
  317.   background-color: #222222;
  318. }
  319. .card-header {
  320.   background-color: rgba(127, 136, 151, 0.1);
  321. }
  322. .h-100.bg-white {
  323.   background-color: #262626 !important;
  324. }
  325. .bg-light {
  326.   background-color: ${colorBgAlt1} !important;
  327. }
  328. .bg-white {
  329.   background-color: ${colorBgDefault} !important;
  330. }
  331. .dropdown-item {
  332.   color: #dfe6ed;
  333. }
  334. .path-mod-attendance table.allsessions tr.grouper td {
  335.   background-color: ${colorBgDefault};
  336. }
  337. .moodle-dialogue-base .moodle-dialogue-wrap {
  338.   background-color: ${colorBgDefault};
  339.   border: 1px solid #565656;
  340. }
  341. .yui3-button {
  342.   color: rgba(255, 255, 255, 0.8);
  343. }
  344. a.text-dark:hover, a.text-dark:focus {
  345.   color: #fff !important;
  346. }
  347. .close {
  348.   color: #fff;
  349.   text-shadow: 0 1px 0 ${colorFgDefault};
  350. }
  351. .close:hover {
  352.   color: #ccc;
  353. }
  354. .custom-select {
  355.   background: ${colorBgAlt1} url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right .75rem center / 8px 10px no-repeat;
  356.   color: #dfe6ed;
  357. }
  358. .btn-success {
  359.   color: #deeae7;
  360.   background-color: #0c3511;
  361.   border-color: #0f3914;
  362. }
  363. a.dimmed, a.dimmed:link, a.dimmed:visited, a.dimmed_text, a.dimmed_text:link, a.dimmed_text:visited, .dimmed_text, .dimmed_text a, .dimmed_text a:link, .dimmed_text a:visited, .usersuspended, .usersuspended a, .usersuspended a:link, .usersuspended a:visited, .dimmed_category, .dimmed_category a {
  364.   color: #747f88;
  365. }
  366. .tertiary-navigation .navitem-divider {
  367.   background-color: #888;
  368. }
  369. .course-section .availabilityinfo {
  370.   background-color: #2c3033;
  371. }
  372. .dropdown-menu {
  373.   color: #dadcdf;
  374. }
  375. .btn.btn-icon:hover, .btn.btn-icon:focus {
  376.   background-color: #aaaaaa00;
  377. }
  378. div[style]:has(p) {
  379.   background-color: ${colorBgDefault} !important;
  380. }
  381. .pagelayout-frontpage .dashboard-card .course-contacts .contact p.role, .pagelayout-coursecategory .dashboard-card .course-contacts .contact p.role {
  382.   color: #66717b;
  383. }
  384. .message-app .message.send .time {
  385.   background-color: #3f4448 !important;
  386.   color: #deeae7;
  387. }
  388. .message-app .message.send {
  389.   background-color: #3f4448;
  390.   color: #deeae7;
  391. }
  392. .message-app .icon {
  393.   color: #deeae7;
  394. }
  395. .message-app .btn.btn-link.btn-icon:hover, .message-app .btn.btn-link.btn-icon:focus {
  396.   background-color: #5e6164;
  397. }
  398. #MathJax_Zoom {
  399.   background-color: ${colorBgDefault};
  400. }
  401. .bg-secondary {
  402.   background-color: #162d44 !important;
  403. }
  404. .file-picker .fp-content {
  405.   background: ${colorBgDefault};
  406. }
  407. .path-mod .automatic-completion-conditions .badge {
  408.   mix-blend-mode: normal;
  409. }
  410. `
  411.     const layoutCss = `
  412. /* nure-ui-fix layoutCss */
  413. .content-item-container .view-more {
  414.   bottom: 2px;
  415.   visibility: hidden;
  416. }
  417. .que .specificfeedback, .que .generalfeedback, .que .numpartscorrect .que .rightanswer, .que .im-feedback, .que .feedback, .que p {
  418.   margin: 0 0 .1em;
  419. }
  420. #quiz-timer-wrapper {
  421.   top: 12px;
  422. }
  423. .mt-3, .my-3 {
  424.   margin-top: 0.5rem !important;
  425. }
  426. @media (min-width: 768px) {
  427.   .activity-item:not(.activityinline) {
  428.     padding: 1rem;
  429.     border: 1px solid #484d51;
  430.   }
  431. }
  432.     `
  433.  
  434.     if (document.body.classList.contains('moove-darkmode')) {
  435.         GM_addStyle(darkModeCss);
  436.     }
  437.     if (enableLayoutChanges) {
  438.         GM_addStyle(layoutCss);
  439.     }
  440. })();