☰

learn.vccs.edu

A new userstyle

  1. /* ==UserStyle==
  2. @name           learn.vccs.edu
  3. @version        1
  4. @description    A new userstyle
  5. @author         rssaromeo
  6. @license        GPLv3
  7. @namespace https://gf.qytechs.cn/users/1184528
  8. ==/UserStyle== */
  9.  
  10. @-moz-document domain("learn.vccs.edu"), domain("canvadocs.instructure.com"), regexp("https?://learn.vccs.edu/conversations.*") {
  11. /* 
  12.     @regex \.css-[^-]+([^^ ,{.]+)(?=[ ,{.])
  13.     @replace [class$="$1"]
  14.     @endregex
  15.     */
  16. :root {
  17.   --border: #101014;
  18.   --bg-dark: #16161e;
  19.   --bg-dark-2: #212433;
  20.   --bg: #1a1b26;
  21.   --bg-2: #282b3c;
  22.   --bg-3: #3f4256;
  23.   --bg-4: #444b6a;
  24.   --highlight-1: #1e202e;
  25.   --highlight-2: #2e3448;
  26.   --blue-accent: #89ddff;
  27.   --blue-dim: #5c88e6;
  28.   --text: #c0caf5;
  29.   --text-dim: #565f89;
  30.   --ic-link-color: #7aa2f7;
  31.   --blue: #7aa2f7;
  32.   --notification: #e66135;
  33.   --red: #f7768e;
  34.   --green: #9ece6a;
  35.   --ic-brand-global-nav-bgd: var(--bg-dark);
  36.   --ic-brand-primary: var(--blue);
  37.  
  38.   /*   --bg-dark: #1a1b26; */
  39.   /* --bg-lighter: #16161e; */
  40.   /* --bg-darkest: #000; */
  41.   --fg-dark: #c0caf5;
  42.   --fg-light: #cfd5f3;
  43.   --trans: #0000;
  44.   --secondary-light: #6da2e9;
  45.   --secondary-dark: #4a92f7;
  46.   --change-purple: #7300ff;
  47.   --change-white: #fff;
  48.  
  49.   --custom-thumb-color: var(--fg-dark);
  50.   --custom-track-color: var(--bg-dark-2);
  51.   --webkit-scrollbar-width-height: 10px;
  52.   --webkit-scrollbar-border-radius: 50px;
  53.   --custom-track-color-hover: color-mix( in srgb,
  54.   var(--fg-dark) 10%,
  55.   #000 100%);
  56. }
  57. div,
  58. li,
  59. ul,
  60. h1,
  61. h2,
  62. h3,
  63. h4,
  64. h5,
  65. h6,
  66. h7 {
  67.   color: var(--fg-dark) !important;
  68. }
  69. input,
  70. span:has(>input):before {
  71.   border: 1px solid var(--fg-dark) !important;
  72. }
  73. [class*="transition--fade-"] > *,
  74. [class*="transition--fade-"] > * > *,
  75. [class*="transition--fade-"] > * > * > *,
  76. [class*="transition--fade-"] > * > * > * > *,
  77. [class*="transition--fade-"] > * > * > * > * > * {
  78.   background-color: var(--bg-dark) !important;
  79. }
  80.  
  81. #section-tabs-header-subtitle {
  82.   display: none !important;
  83. }
  84.  
  85. [class$="-textInput__facade"],
  86. [class$="-textInput__facade"]:focus,
  87. .address-book-menu-item-subMenuCourse-subMenu,
  88. [class$="-textInput__beforeElement"],
  89. [class$="-textInput__layout"],
  90. [class$="-textInput__layout"]::before,
  91. [id^="Selectable_"][id$="-list"],
  92. li[class*="optionItem"],
  93. *[id^="Selectable"],
  94. [class$="-view--block"],
  95. *[id^="address-book-menu"],
  96. [class$="-view"],
  97. span:has(> [class$="-view"]) {
  98.   background-color: var(--bg-dark) !important;
  99.   /*   border-color: var(--bg-dark-2) !important; */
  100.   border: none !important;
  101. }
  102. span > [class$="-textInput__facade"] > input {
  103.   border-color: var(--bg-dark) !important;
  104. }
  105. [class$="-view-row"] > [class$="-colHeader"],
  106. [class$="view-cell"] {
  107.   border-radius: 0 !important;
  108. }
  109. [class$="-view"] {
  110.   background-color: var(--trans) !important;
  111. }
  112. [class$="-view-flexItem"] > div > span > div > div > span {
  113.   background-color: var(--bg-dark) !important;
  114.   border-radius: 15px;
  115.   padding: 10px !important;
  116.   width: 40% !important;
  117. }
  118. [id^="Select_"] {
  119.   color: var(--fg-dark) !important;
  120. }
  121. /* [class$="-view--block"] {
  122.       background-color: var(--bg-darkest) !important;
  123.       border: 1px solid var(--bg-light) !important;
  124.     } */
  125. [class$="-mask"],
  126. .transition--fade-entered,
  127. .transition--fade-transitioning,
  128. .transition--fade-entering {
  129.   background-color: var(--trans) !important;
  130. }
  131. [class$="textInput__facade"]::before {
  132.   background-color: var(--trans) !important;
  133. }
  134. [class$="-view--block"]:has(> .discussions-editor) {
  135.   background-color: var(--trans) !important;
  136. }
  137. [class$="-view--block"][data-testid="pill-container"] {
  138.   background-color: var(--trans) !important;
  139. }
  140. [class$="-view--block"] {
  141.   background-color: var(--trans) !important;
  142.   border: none !important;
  143. }
  144. .tox-tbtn.tox-split-button__chevron {
  145.   background-color: var(--trans) !important;
  146. }
  147. /* .tox-swatches,
  148.     .tox-swatches__row {
  149.       background-color: var(--bg-darkest) !important;
  150.     } */
  151. .tox-dialog-wrap,
  152. .tox-dialog-wrap__backdrop {
  153.   background-color: var(--trans) 004a !important;
  154. }
  155. .tox-dialog__header,
  156. .tox-dialog__body,
  157. .tox-dialog__footer,
  158. .tox-dialog,
  159. .tox-tbtn,
  160. .tox-icon,
  161. .tox-tbtn__icon-wrap,
  162. .tox-tbtn,
  163. .tox-split-button__chevron,
  164. .tox-edit-area,
  165. .tox-sidebar-wrap,
  166. iframe,
  167. .tox-menu-nav__js .tox-collection__item,
  168. .tox-collection__group {
  169.   background-color: var(--bg-dark) !important;
  170.   border-color: var(--fg-dark) !important;
  171. }
  172. div:has(> .tox-tbtn) {
  173.   background-color: var(--bg-dark) !important;
  174. }
  175. iframe[src^="/api/v1/canvadoc_session"] {
  176.   overflow: hidden !important;
  177.   box-sizing: border-box !important;
  178.   border: 1px solid var(--fg-dark) !important;
  179.   background-color: var(--bg-dark) !important;
  180. }
  181. atomic-search-desktop-widget,
  182. #ajas-search-widget {
  183.   display: none !important;
  184.   width: 0 !important;
  185.   height: 0 !important;
  186.   background-color: var(--trans) !important;
  187.   color: var(--trans) !important;
  188. }
  189. .closed-for-comments-discussions-v2__wrapper,
  190. .discussions-v2__container-image,
  191. .unpinned-discussions-v2__wrapper,
  192. .ic-item-row.ic-discussion-row {
  193.   background-color: var(--bg-dark) !important;
  194.   border-color: var(--fg-dark) !important;
  195. }
  196. .ic-unread-badge__count.ic-unread-badge__total-count {
  197.   background-color: var(--secondary-light) !important;
  198. }
  199. .ic-unread-badge__count.ic-unread-badge__unread-count {
  200.   background-color: var(--secondary-dark) !important;
  201. }
  202.  
  203. div[data-testid="DiscussionEdit-container"] > * > * > * > [class$="-view--flex-flex"] {
  204.   background-color: var(--bg-dark-2) !important;
  205. }
  206. .cm-gutter.cm-lineNumbers,
  207. [class$="-label"] > * > * > * > * {
  208.   background-color: var(--bg-dark-2) !important;
  209.   border-color: var(--trans) !important;
  210.   color: var(--fg-dark) !important;
  211. }
  212. [class$="-codeEditorContainer"] > * > * > div.cm-content.cm-lineWrapping {
  213.   background-color: var(--bg-dark) !important;
  214. }
  215. .cm-layer.cm-layer-above.cm-cursorLayer,
  216. .cm-cursor.cm-cursor-primary {
  217.   border-left-color: var(--change-purple) !important;
  218.   color: var(--change-white) !important;
  219. }
  220. [class$="-view-flexItem"][title="Editor Status Bar"] > div {
  221.   border-color: var(--trans) !important;
  222. }
  223. [id^="message-body-"][id$="_statusbar"],
  224. [data-testid="DiscussionEdit-container"] > * > * > * > [class$="-view"] {
  225.   background-color: var(--bg-dark) !important;
  226.   border: 1px solid var(--fg-dark) !important;
  227.   border-radius: 0 !important;
  228. }
  229. [data-testid="DiscussionEdit-container"] > * > * > * > [class$="-view"] {
  230.   border-bottom: none !important;
  231. }
  232. [class$="-view-billboard"] {
  233.   background-color: var(--bg-dark) !important;
  234. }
  235. .cm-editor,
  236. [class$="-codeEditorContainer"] {
  237.   border-color: var(--trans) !important;
  238. }
  239. img[src="https://du11hjcvx0uqb.cloudfront.net/dist/webpack-production/775230e7b86a756c.svg"] {
  240.   content: url("");
  241. }
  242. img[src="https://du11hjcvx0uqb.cloudfront.net/dist/webpack-production/3fdd834ad1e40326.svg"] {
  243.   content: url("");
  244. }
  245. img[src="https://instructure-uploads.s3.amazonaws.com/account_130960000000000001/attachments/12/vccs-logo-360x140.png"] {
  246.   content: url("");
  247. }
  248. circle[class$="-spinner__circleTrack"],
  249. circle.InstUISpinner-circleTrack {
  250.   stroke: var(--trans) !important;
  251. }
  252. circle[class$="-spinner__circleSpin"],
  253. circle.InstUISpinner-circleSpin {
  254.   stroke: var(--fg-dark) !important;
  255. }
  256. span.ui-menu-carat,
  257. span.ui-menu-carat > span {
  258.   color: var(--trans) !important;
  259.   border-color: var(--trans) !important;
  260. }
  261. iframe[src="https://www.nr.edu/canvas/canvas-home.php"],
  262. p > iframe[src="https://www.nr.edu/canvas/canvas-home.php"],
  263. .show-content.user_content.clearfix.enhanced > p > iframe[src="https://www.nr.edu/canvas/canvas-home.php"] {
  264.   display: none !important;
  265.   height: 0 !important;
  266. }
  267.  
  268. [role="dialog"][aria-label="Upload Media"][class$="-modal"] {
  269.   border-color: var(--fg-dark) !important;
  270.   background-color: var(--fg-dark) !important;
  271. }
  272. [role="dialog"][aria-label="Upload Media"][class$="-modal"] > * {
  273.   background-color: var(--bg-dark-2) !important;
  274.   border-radius: 0 !important;
  275.   border-color: var(--fg-dark) !important;
  276. }
  277. [class$="-view-panel__content"] {
  278.   overflow: hidden !important;
  279. }
  280. [class$="-view-tabs__tabList"],
  281. [class$="-view-panel__content"] {
  282.   border: 1px solid var(--fg-dark) !important;
  283. }
  284. [class$="-view-tabs__tabList"],
  285. [class$="-view-panel__content"],
  286. .css-1ktha4a-view-panel__content.transition--fade-entered {
  287.   background-color: var(--bg-dark) !important;
  288. }
  289. [id^="tab-"] {
  290.   color: var(--fg-dark) !important;
  291. }
  292. /*[class$="-view-flexItem"] {
  293.       background-color: var(--bg-dark) !important;
  294.     }*/
  295. textarea[placeholder="Submit a Comment"] {
  296.   border: 1px solid var(--fg-dark) !important;
  297. }
  298. [class$="-view-flexItem"] > * > * > * > [class$="-view--inlineBlock"],
  299. #mediaCommentButton,
  300. #attachmentFileButton {
  301.   border: 1px solid var(--fg-dark) !important;
  302.   padding: 4px;
  303. }
  304. #comments-tray {
  305.   border: 1px solid var(--fg-dark) !important;
  306. }
  307. #comments-tray > * > [class$="-view-flexItem"] {
  308.   border-bottom: 1px solid var(--fg-dark) !important;
  309. }
  310. #assignments-not-weighted > div:nth-child(1) > h2 {
  311.   border-bottom-color: var(--fg-dark) !important;
  312. }
  313. *:has(* > [class$="-menu"][role="menu"]) {
  314.   border-color: var(--fg-dark) !important;
  315. }
  316. [class$="contextView__arrow"] {
  317.   display: none !important;
  318. }
  319. [class$="-view--block"] {
  320.   background-color: var(--bg-dark) !important;
  321. }
  322. .ui-state-hover {
  323.   background-color: var(--fg-dark) !important;
  324. }
  325. button[role="menuitem"]:hover,
  326. button[role="menuitem"]:hover > * {
  327.   background-color: var(--bg-dark) !important;
  328.   color: var(--fg-dark) !important;
  329. }
  330. .question_input,
  331. [class$="textInput__layout"],
  332. [id^="opt-"] {
  333.   box-sizing: border-box !important;
  334.   border: 1px solid var(--fg-dark) !important;
  335. }
  336. [id^="opt-"] {
  337.   border-radius: 5px;
  338. }
  339.  
  340. [id^="assignment_comment_"] {
  341.   background-color: var(--bg-dark) !important;
  342.   border-color: var(--bg-dark) !important;
  343. }
  344. .nav-badge {
  345.   background-color: var(--bg-dark) !important;
  346.   color: var(--fg-dark) !important;
  347. }
  348. .ic-flash-success.flash-message-container {
  349.   background-color: var(--bg-dark) !important;
  350. }
  351. .ic-flash-success.flash-message-container > .Button.Button--icon-action.close_link {
  352.   background-color: var(--trans) !important;
  353. }
  354. [class$="-pill"] {
  355.   background-color: var(--bg-dark) !important;
  356.   border-color: var(--fg-dark) !important;
  357. }
  358. span.menu-item__badge:not(:has(*)) {
  359.   display: none !important;
  360. }
  361. span.menu-item__badge:has(*),
  362. span.menu-item__badge > span,
  363. span.menu-item__badge > * > span {
  364.   background-color: var(--bg-dark) !important;
  365. }
  366. span.menu-item__badge:has(*) {
  367.   border: 1px solid var(--fg-dark) !important;
  368. }
  369.  
  370. code {
  371.   background-color: var(--bg-dark) !important;
  372.   border: 1px solid var(--fg-dark) !important;
  373.  
  374.   color: var(--secondary-light) !important;
  375. }
  376.  
  377. *:not(select) {
  378.   scrollbar-color: var(--custom-thumb-color) var(--custom-track-color) !important;
  379.   scrollbar-width: var(--custom-width) !important;
  380. }
  381. /* Chrome and derivatives*/
  382. ::-webkit-scrollbar {
  383.   max-width: var(--webkit-scrollbar-width-height) !important;
  384.   max-height: var(--webkit-scrollbar-width-height) !important;
  385.   background: var(--custom-track-color) !important;
  386. }
  387. ::-webkit-scrollbar-corner,
  388. ::-webkit-scrollbar-track,
  389. ::-webkit-scrollbar-track-piece {
  390.   background: var(--custom-track-color) !important;
  391. }
  392. ::-webkit-scrollbar-thumb {
  393.   background: var(--custom-thumb-color) !important;
  394.   border-radius: var(--webkit-scrollbar-border-radius) !important;
  395. }
  396. ::-webkit-scrollbar-corner:hover,
  397. ::-webkit-scrollbar-track:hover,
  398. ::-webkit-scrollbar-track-piece:hover {
  399.   background: var(--custom-track-color-hover) !important;
  400. }
  401. ::-webkit-scrollbar-thumb:hover {
  402.   background: var(--custom-thumb-color-hover) !important;
  403. }
  404. /* GitHub https://github.com/StylishThemes/GitHub-Dark/issues/870 */
  405. *::-webkit-scrollbar {
  406.   max-width: var(--webkit-scrollbar-width-height) !important;
  407.   width: var(--webkit-scrollbar-width-height) !important;
  408. }
  409. *::-webkit-scrollbar-thumb {
  410.   background: var(--custom-thumb-color) !important;
  411.   border: 0 !important;
  412.   border-radius: var(--webkit-scrollbar-border-radius) !important;
  413.   box-shadow: none !important;
  414. }
  415. *::-webkit-scrollbar-track-piece {
  416.   background: var(--custom-track-color) !important;
  417. }
  418. /* Hide the scrollbars that the overlay scrollbars style adds */
  419. [style*="overflow-y:auto"] {
  420.   scrollbar-width: none !important;
  421. }
  422. [style*="overflow-y:auto"]::-webkit-scrollbar {
  423.   display: none !important;
  424. }
  425. body:not(.full-width):not(.outcomes) .ic-Layout-wrapper {
  426.   max-width: none;
  427. }
  428. #ui-id-1.ui-dialog-title {
  429.   background-color: var(--bg-dark-3) !important;
  430. }
  431. #planner_note_context {
  432.   border-color: var(--fg-dark) !important;
  433. }
  434. [class$="checkbox__control"] > span > span:has( + span),
  435. [class$="checkboxFacade__facade"]:before {
  436.   /*   display: none !important; */
  437.   background-color: var(--bg-dark) !important;
  438.   border: 1px solid var(--fg-dark) !important;
  439. }
  440. svg[name="IconCheckMark"],
  441. svg[name="IconCheckMark"] > *,
  442. svg[name="IconCheckMark"] > * > *,
  443. svg[name="IconCheckMark"] > * > * > * {
  444.   fill: red !important;
  445. }
  446.  
  447. .tool_launch{
  448.   height:1500px !important;
  449. }
  450. }
  451.  
  452. @-moz-document url-prefix("https://canvadocs.instructure.com"), url-prefix("http://canvadocs.instructure.com") {
  453. /* 
  454.     @regex \.css-[^-]+([^^ ,{.]+)(?=[ ,{.])
  455.     @replace [class$="$1"]
  456.     @endregex
  457.     */
  458.   html,
  459.   head,
  460.   body,
  461.   .App,
  462.   .ViewerControls,
  463.   .ViewerControls--with-annotations,
  464.   .Pages,
  465.   .Pages-annotatable,
  466.   .SecondaryControls {
  467.     background-color: var(--trans) !important;
  468.     border-color: var(--trans) !important;
  469.   }
  470.   .ColorButton {
  471.     background-color: var(--bg-dark-2) !important;
  472.     border-color: var(--trans) !important;
  473.   }
  474.   .AnnotationControlButton.selected,
  475.   .AnnotationControls {
  476.     background-color: var(--bg-dark-2) !important;
  477.     border-color: var(--fg-dark) !important;
  478.   }
  479.   .download-button--button > svg > g > g,
  480.   path,
  481.   polygon {
  482.     fill: var(--fg-dark) !important;
  483.   }
  484.   #App > nav > div > nav.DocumentControls > div:nth-child(1) > span,
  485.   .AnnotationControlButton-inner,
  486.   .AnnotationControlButton-outer {
  487.     color: var(--fg-dark) !important;
  488.     background-color: var(--bg-dark-2) !important;
  489.     border-color: var(--fg-dark) !important;
  490.   }
  491.   circle[class$="-spinner__circleTrack"],
  492.   circle.InstUISpinner-circleTrack {
  493.     stroke: var(--trans) !important;
  494.   }
  495.   circle[class$="-spinner__circleSpin"],
  496.   circle.InstUISpinner-circleSpin {
  497.     stroke: var(--fg-dark) !important;
  498.   }
  499.   .ui-state-hover {
  500.     background-color: var(--fg-dark) !important;
  501.   }
  502. [class="TextLayer-container"]{
  503.     background-color: #0007 !important;
  504. }
  505. }
  506.  
  507. @-moz-document regexp("https?://learn.vccs.edu/calendar.*") {
  508. /* 
  509.     @regex \.css-[^-]+([^^ ,{.]+)(?=[ ,{.])
  510.     @replace [class$="$1"]
  511.     @endregex
  512.     */
  513. table:has(> .fc-head),
  514. #calendar-list-holder,
  515. #other-calendars-list-holder,
  516. #undated-events,
  517. .fc-body,
  518. .fc-head,
  519. .fc.fc-unthemed.fc-ltr,
  520. .context_list_context.hover-container.checked,
  521. .calendars-context-list,
  522. .event-details-header,
  523. .details_title,
  524. #event-details-trap-focus,
  525. [id^="popover-"],
  526. #edit_calendar_event_form_holder,
  527. .edit_calendar_event_option,
  528. #edit_planner_note_form_holder {
  529.   background-color: var(--bg-dark) !important;
  530.   border-color: var(--fg-dark) !important;
  531. }
  532. /*.ui-state-active {
  533.   background-color: var(--fg-dark) !important;
  534. }*/
  535. #edit_event_tabs > ul {
  536.   background-color: var(--bg-dark-2) !important;
  537. }
  538. #edit_event_tabs > ul > li > a {
  539.   background-color: var(--bg-dark-3) !important;
  540. }
  541. #edit_event_tabs > ul > li:hover {
  542.   background-color: var(--bg-dark-3) !important;
  543. }
  544. #edit_event_tabs > ul > li.ui-state-hover:not(.ui-state-active) {
  545.   background-color: var(--bg-dark-2) !important;
  546.   border-color: var(--fg-dark)
  547. }
  548. #edit_event_tabs > ul > li.ui-state-active {
  549.   background-color: var(--bg-dark) !important;
  550.   border-color: var(--fg-dark)
  551. }
  552.  
  553. /*.ui-state-default {
  554.   background-color: var(--bg-dark) !important;
  555. }*/
  556.  
  557. /** {
  558.   border-color: var(--fg-dark);
  559. }*/
  560. .popover_close.x-close-link.close {
  561.   text-decoration-color: var(--fg-dark) !important;
  562.   text-shadow: var(--fg-dark) !important;
  563.   color: var(--fg-dark) !important;
  564. }
  565. .event-details-content {
  566.   border-color: var(--fg-dark) !important;
  567. }
  568. a {
  569.   color: var(--fg-light) !important;
  570. }
  571. select {
  572.   background-color: var(--bg-dark) !important;
  573.   border-color: var(--bg-dark-2) !important;
  574.   color: var(--fg-dark) !important;
  575. }
  576. .ui-datepicker-header,
  577. .edit_planner_note_option,
  578. .ui-tabs-anchor {
  579.   background-color: var(--bg-dark-2) !important;
  580.   color: var(--fg-dark) !important;
  581.   border-color: var(--bg-dark-2) !important;
  582. }
  583. .tab_list.ui-tabs-nav {
  584.   background-color: var(--bg-dark-2) !important;
  585. }
  586. }
  587.  
  588. @-moz-document regexp("https?://learn.vccs.edu/courses/\\d{6}/?([?#].*)?$") {
  589. /* 
  590.     @regex \.css-[^-]+([^^ ,{.]+)(?=[ ,{.])
  591.     @replace [class$="$1"]
  592.     @endregex
  593.     */
  594.   iframe {
  595.     /*display: none !important;*/
  596.   }
  597. }
  598.  
  599. @-moz-document regexp("https?://learn\\.vccs\\.edu/courses/\\d+/external_tools/retrieve.*"), regexp("https?://.*\\.quiz-lti-iad-prod\\.instructure.com/taking/\\d+/take/?$") {
  600. * {
  601.     background-color: #000 !important;
  602.     color: #1a1b26 !important;
  603.   }
  604. }
  605.  
  606. @-moz-document regexp(".*://learn.vccs.edu/courses/.*/grades.*") {
  607. #grades_summary > thead > tr > th[scope="col"]:last-child,
  608. #grades_summary > tbody > tr > td:last-child {
  609.   display: none !important;
  610. }
  611. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址