Google Classroom - Moonlight

Custom theme for Google Classroom

当前为 2021-05-15 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Google Classroom - Moonlight
  3. // @namespace Violentmonkey Scripts
  4. // @match https://classroom.google.com/*
  5. // @grant none
  6. // @version 1.3
  7. // @author Risuleia
  8. // @icon https://i.pinimg.com/originals/98/d3/a2/98d3a283f98cded8e639957e935bd373.png
  9. // @require https://code.jquery.com/jquery-3.6.0.min.js
  10. // @description Custom theme for Google Classroom
  11. // ==/UserScript==
  12.  
  13. // ============ START ============ //
  14. (function() {
  15. 'use strict';
  16.  
  17. var style = `
  18. /* custom fonts */
  19. @import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');
  20.  
  21. /* background (change the URL inside quotes to add your own background*/
  22. body {
  23. background: rgba(21,31,46,0.8) url("https://i.imgur.com/LHj4Gil.jpg") center/100% fixed;
  24. background-repeat: no-repeat;
  25. background-size: cover;
  26. }
  27.  
  28. /* global setting */
  29. * {
  30. font-family: Caveat;
  31. color: #fff !important;
  32. }
  33. * {
  34. border-color: rgba(21,31,46,0.8);
  35. }
  36. * {
  37. box-shadow: none !important;
  38. }
  39. /* scrollbar */
  40. ::-webkit-scrollbar {
  41. background: transparent;
  42. width: 5px;
  43. }
  44. ::-webkit-scrollbar-corner {
  45. background: transparent;
  46. }
  47. ::-webkit-scrollbar-track {
  48. background: transparent;
  49. }
  50. ::-webkit-scrollbar-thumb {
  51. background: linear-gradient(180deg, rgba(6,171,255,1) 5%, rgba(102,0,204,1) 97%);
  52. -webkit-border-radius: 1ex;
  53. }
  54.  
  55. /* Annoucement box */
  56. .hgjBDc {
  57. background: rgba(21,31,46,0.8);
  58. }
  59. .vnnr5e .I9OJHe, .vnnr5e .CIy9F {
  60. background: rgba(21,31,46,0.8);
  61. }
  62. .vnnr5e:not(.RDPZE):hover .I9OJHe, .vnnr5e:not(.RDPZE):hover .CIy9F {
  63. background: rgba(21,31,46,0.8);
  64. }
  65. .qk0lee:focus {
  66. background: rgba(21,31,46,0.8);
  67. color: #fff;
  68. }
  69. .Erb9le:not(.RDPZE) .qmMNRc:hover {
  70. color: #fff;
  71. }
  72. .rxO3db {
  73. background: rgba(21,31,46,0.8);
  74. }
  75. .e19J0b, .Y5sE8d:not(.RDPZE) {
  76. background: rgba(21,31,46,0.8);
  77. }
  78. .l4V7wb {
  79. color: #fff;
  80. background: rgba(21,31,46,0.8);
  81. border: 1px solid #4c4c4c;
  82. border-radius: 4px;
  83. }
  84. .T2Ybvb.KRoqRc.editable {
  85. font-size: 1.5rem;
  86. }
  87. .Erb9le:not(.RDPZE) .qmMNRc.y7OZL .DPvwYc {
  88. background-image: linear-gradient(to right, #06abff 5%, #6600CC 97%) !important;
  89. -webkit-background-clip: text !important;
  90. -webkit-text-fill-color: transparent !important;
  91. }
  92. .Y5sE8d:not(.RDPZE) .snByac {
  93. font-size: 1.05rem;
  94. background-image: linear-gradient(to right, #06abff 5%, #6600CC 97%) !important;
  95. -webkit-background-clip: text !important;
  96. -webkit-text-fill-color: transparent !important;
  97. }
  98. .Erb9le:not(.RDPZE) .qmMNRc.y7OZL {
  99. background: rgba(21,31,46,0.8) !important;
  100. }
  101. .Y5sE8d:not(.RDPZE) {
  102. background: rgba(21,31,46,0.8) !important;
  103. }
  104. .hVNH5c .K0NPx {
  105. background: rgba(21,31,46,0.8) !important;
  106. }
  107. .FtBNWb {
  108. background: rgba(21,31,46,0.8) !important;
  109. }
  110. .I7OXgf.ZEeHrd {
  111. background: rgba(21,31,46,0.8) !important;
  112. }
  113. .picker-dialog.XKSfm-Sx9Kwc {
  114. background: rgba(21,31,46,0.8) !important;
  115. }
  116. .jfvobd {
  117. color: #ffffff !important;
  118. }
  119. .GWh4Ge .kx3Hed {
  120. color: #ffffff !important;
  121. }
  122.  
  123. /* top navbar */
  124. .Hwv4mb, .xHPsid .hN1OOc {
  125. font-family: Caveat;
  126. font-size: 2rem;
  127. }
  128. .DShyMc-MTA5NzA3NjA1MzQy .eumXzf:after {
  129. -webkit-border-image: linear-gradient(to right, #06abff 5%, #6600CC 97%);
  130. border-image-slice: 9;
  131. }
  132. .DShyMc-MTA5NzA3NjA1MzQy .VnOHwf-Tvm9db {
  133. background-image: linear-gradient(to right, #06abff 5%, #6600CC 97%);
  134. -webkit-background-clip: text;
  135. -webkit-text-fill-color: transparent;
  136. }
  137. .VnOHwf-Tvm9db {
  138. background-image: linear-gradient(to right, #06abff 5%, #6600CC 97%);
  139. -webkit-background-clip: text;
  140. -webkit-text-fill-color: transparent;
  141. }
  142. .VnOHwf-Tvm9db {
  143. background-image: linear-gradient(to right, #06abff 5%, #6600CC 97%);
  144. -webkit-background-clip: text;
  145. -webkit-text-fill-color: transparent;
  146. }
  147. .VnOHwf-Tvm9db {
  148. background-image: linear-gradient(to right, #06abff 5%, #6600CC 97%);
  149. -webkit-background-clip: text;
  150. -webkit-text-fill-color: transparent;
  151. }
  152. .eumXzf:after {
  153. -webkit-border-image: linear-gradient(to right, #06abff 5%, #6600CC 97%);
  154. border-image-slice: 9;
  155. }
  156.  
  157. /* loading gradient */
  158. .DShyMc-AaTFfe .bFjUmb-Ysl7Fe.kRqvHe {
  159. background: linear-gradient(to right, #06abff 5%, #6600CC 97%) !important;
  160. }
  161. .aP3ZPb.kRqvHe.bFjUmb-Ysl7Fe {
  162. background: linear-gradient(to right, #06abff 5%, #6600CC 97%) !important;
  163. }
  164. .bFjUmb-Wvd9Cc:not(.O1l69):not(.J1HJOd):not(.TIunU) {
  165. background: linear-gradient(to right, #06abff 5%, #6600CC 97%) !important;
  166. }
  167. .aP3ZPb {
  168. background: linear-gradient(to right, #06abff 5%, #6600CC 97%) !important;
  169. }
  170.  
  171. /* font fix */
  172. /* class details */
  173. .uTUgB, .csjh4b {
  174. font-family: Caveat;
  175. }
  176. .csjh4b {
  177. font-size: 1.78rem;
  178. }
  179. / "upcoming" /
  180. .EZrbnd .sxa9Pc {
  181. font-family: Caveat;
  182. }
  183. /* member names */
  184. .asQXV {
  185. font-family: Caveat;
  186. font-size: 1.2rem;
  187. }
  188. /* attachments */
  189. .QDKOcc {
  190. font-family: Caveat;
  191. font-size: 1.1rem;
  192. }
  193. /* due work alert */
  194. .sdDCme {
  195. font-size: 1.12rem;
  196. }
  197. .VBEdtc-Wvd9Cc:hover {
  198. color: #fff;
  199. font-size: 1rem;
  200. }
  201. /* default announement text */
  202. .K6Ovqd {
  203. font-size: 1.5rem:
  204. }
  205. /* semi-global text */
  206. .EZrbnd {
  207. font-family: Caveat;
  208. }
  209. /* announement content */
  210. .obylVb:not(:empty) {
  211. font-size: 1.2rem;
  212. }
  213. /* comments content */
  214. .tLDEHd {
  215. font-size: 1.2rem
  216. }
  217. /* topic names */
  218. .PazDv {
  219. font-family: Caveat;
  220. font-size: 2.5rem;
  221. }
  222. /* people list */
  223. .XjYjO {
  224. font-family: Caveat;
  225. font-size: 2.5rem;
  226. }
  227. /* class name */
  228. .YVvGBb {
  229. font-family: Caveat;
  230. }
  231. .A6dC2c {
  232. font-size: 1.15rem;
  233. }
  234. .dDKhVc {
  235. font-size: 1rem;
  236. }
  237. .tLDEHd {
  238. font-family: Caveat;
  239. }
  240. /* materials, questions, assignments, etc */
  241. .tL9Q4c {
  242. font-family: Caveat;
  243. font-size: 1.5rem;
  244. }
  245. .NE9bBb {
  246. color: #fff !important;
  247. }
  248. /* gradebook */
  249. .VnOHwf-Tvm9db {
  250. font-family: Caveat;
  251. }
  252. .EhRlC {
  253. font-size: 1.5rem !important;
  254. color: #1e8e3e !important;
  255. }
  256. .lYU7F {
  257. font-size: 1.5rem !important;
  258. color: #c5221f !important;
  259. }
  260. .ppMo6b {
  261. font-size: 1.3rem;
  262. color: #b3d3ec !important;
  263. }
  264. /* account panel */
  265. .gb_1b {
  266. color: #fff;
  267. }
  268. .gb_wb.gb_wb {
  269. color: #fff;
  270. }
  271. .gb_l .gb_mb {
  272. color: #fff;
  273. }
  274. .gb_sb.gb_sb {
  275. color: #fff;
  276. }
  277. .gb_wb.gb_wb {
  278. color: #fff;
  279. }
  280. /* Logo */
  281. .s7ovNb {
  282. visibility: hidden;
  283. overflow: visible;
  284. }
  285. .s7ovNb::after {
  286. line-height: 3rem;
  287. overflow: visible;
  288. visibility: visible;
  289. position: absolute;
  290. top: 7px;
  291. left: 1.2em;
  292. content: 'Google Classroom';
  293. font-family: Caveat;
  294. font-size: 2.8rem;
  295. background-image: linear-gradient(to right, #06abff 5%, #6600CC 97%);
  296. -webkit-background-clip: text;
  297. -webkit-text-fill-color: transparent;
  298. }
  299. .XIpEib {
  300. overflow: visible;
  301. }
  302.  
  303. /* scheduled */
  304. .VBEdtc-Wvd9Cc:hover {
  305. font-size: 1.5rem !important;
  306. }
  307. .IMvYId, .IMvYId:visited {
  308. font-size: 1.05rem;
  309. }
  310. .DShyMc-MzI2OTAxNzI5NjYw .tUJKGd:not(.xp2dJ):not(.rZXyy):hover.idtp4e {
  311. background: rgba(21,31,46,0.8);
  312. }
  313. .p0oLxb>.bnqxkd {
  314. background: rgba(21,31,46,0.8);
  315. }
  316. .QkA63b .GJYBjd {
  317. background: rgba(21,31,46,0.8);
  318. }
  319. .DShyMc-MzI2OTAxNzI5NjYw.bFjUmb-Ysl7Fe, .DShyMc-MzI2OTAxNzI5NjYw .bFjUmb-Ysl7Fe, .DShyMc-MzI2OTAxNzI5NjYw .VUoKZ {
  320. background: rgba(21,31,46,0.8) !important;
  321. }
  322. .y2d25 {
  323. background: rgba(21,31,46,0.9);
  324. }
  325. .dKKcxf, .RPt7lf.miHM0e>.NE9bBb {
  326. background: rgba(21,31,46,0.8);
  327. }
  328. .GJYBjd:not(.CeoRYc) {
  329. background: rgba(21,31,46,0.9) !important;
  330. }
  331. .p0oLxb {
  332. background: rgba(21,31,46,0.9) !important;
  333. }
  334. /* transitions */
  335. .qk0lee:hover, .GWZ7yf:hover, .Aopndd:hover, .d4Fe0d:hover, .v9TZ3c:hover {
  336. transform: scale(1.05) !important;
  337. transition: transform 0.2s linear !important;
  338. }
  339. .ZoT1D:hover.idtp4e {
  340. background: rgba(21,31,46,0.8) !important;
  341. }
  342. .tUJKGd:hover .SFCE1b, .UISY8d-Ysl7Fe:not(.S6Vdac):hover, .OlXwxf.OlXwxf:hover {
  343. background: rgba(21,31,46,0.8) !important;
  344. transform: scale(1.05) !important;
  345. transition: transform 0.2s linear !important;
  346. }
  347. .GWZ7yf:focus-within {
  348. transform: scale(1.05) !important;
  349. tansition: transform: 0.2s linear !important;
  350. }
  351. .OlXwxf .SFCE1b:hover {
  352. background: rgba(21,31,46,0.8) !important;
  353. }
  354. .EmVfjc.qs41qe .xq3j6.ERcjC .X6jHbb {
  355. animation: spinner-left-spin 1333ms cubic-bezier(0.4,0.0,0.2,1) infinite both, loadingAnim 0.5s linear infinite both;
  356. }
  357. @keyframes loadingAnim{
  358. 0% {border-color: #06abff}
  359. 100% {border-color: #6600CC 97%}
  360. }
  361.  
  362. /* transition fix */
  363. .Sgw65b {
  364. overflow: visible;
  365. }
  366.  
  367. /* transparency */
  368. .gHz6xd {
  369. background: rgba(21,31,46,0.8);
  370. }
  371. .Aopndd {
  372. background: rgba(21,31,46,0.8);
  373. }
  374. .d4Fe0d {
  375. background: rgba(21,31,46,0.8);
  376. }
  377. .qk0lee {
  378. background: rgba(21,31,46,0.8);
  379. }
  380. .joJglb {
  381. background: rgba(21,31,46,0.8);
  382. }
  383. .GWZ7yf {
  384. background: rgba(21,31,46,0.8);
  385. }
  386. .IzVHde {
  387. background: rgba(21,31,46,0.8);
  388. }
  389. .OX4Vcb {
  390. background: rgba(21,31,46,0.8);
  391. opacity: 0.7;
  392. }
  393. .ETRkCe {
  394. background: rgba(21,31,46,0.8);
  395. }
  396. .Xzp3fc {
  397. background: rgba(21,31,46,0.8);
  398. border-radius: 8px;
  399. }
  400. .FpfvHe {
  401. background: rgba(21,31,46,0.8);
  402. border-radius: 8px;
  403. }
  404. .CJXzee {
  405. background: rgba(21,31,46,0.8);
  406. border-radius: 8px;
  407. }
  408. .CJXzee a.rUnD6d {
  409. background: rgba(21,31,46,0.8);
  410. border-radius: 8px;
  411. background-clip: padding-box;
  412. }
  413. .l3F1ye:not(.RDPZE) {
  414. background: rgba(21,31,46,0);
  415. border-radius: 8px;
  416. }
  417. .pEwOBc {
  418. background: rgba(21,31,46,0.8);
  419. border-radius: 8px;
  420. }
  421. .feojCc {
  422. background: rgba(21,31,46,0.8);
  423. }
  424. .Xi8cpb, a.Xi8cpb {
  425. background: rgba(21,31,46,0.8);
  426. }
  427. .tUJKGd:not(.xp2dJ).ndcsBf .idtp4e {
  428. background: rgba(21,31,46,0.8);
  429. }
  430. .DShyMc-MTA5NzA3NjA1MzQy .tUJKGd:not(.xp2dJ).ndcsBf .idtp4e {
  431. background: rgba(21,31,46,0.8);
  432. }
  433. .SS7JKe .qRUolc {
  434. background: rgba(21,31,46,0.8) !important;
  435. }
  436. .Shk6y {
  437. font-size: 1.5rem;
  438. background-image: linear-gradient(to right, #06abff 5%, #6600CC 97%);
  439. -webkit-background-clip: text;
  440. -webkit-text-fill-color: transparent;
  441. }
  442. .pn5mce .MQL3Ob, .a4Vkrf, .ybOdnf:not(.RDPZE).iWO5td, .jBmls {
  443. background: rgba(21,31,46,0.8) !important;
  444. }
  445. .ry3kXd {
  446. background: rgba(21,31,46,0.8) !important;
  447. }
  448. .e19J0b .CeoRYc {
  449. background: rgba(21,31,46,0.8) !important;
  450. }
  451. .CDELXb {
  452. background: rgba(21,31,46,0.8) !important;
  453. }
  454. .I5Bhjd {
  455. background: rgba(21,31,46,0.8) !important;
  456. }
  457. .cLpBac {
  458. background: rgba(21,31,46,0.8) !important;
  459. background-clip: padding-box !important;
  460. }
  461. .l4V7wb:not(.Fxmcue) {
  462. border: none !important;
  463. }
  464. .dKKcxf, .STMvPe {
  465. background: rgba(21,31,46,0.8) !important;
  466. }
  467. .ncFHed .MocG8c.KKjvXb, .OA0qNb .LMgvRb[aria-selected="true"], .tWfTvb [role="option"][aria-selected="true"] {
  468. background: rgba(21,31,46,0.8) !important;
  469. }
  470. .gb_l.gb_1a.gb_2a {
  471. background: rgba(21,31,46,0.8);
  472. }
  473. .x7zFFe table {
  474. background: rgba(21,31,46,0.8) !important;
  475. }
  476. .HMUCnd {
  477. background: rgba(21,31,46,0.8) !important;
  478. }
  479. .jgvuAb.iWO5td .ncFHed {
  480. background: rgba(21,31,46,0.8) !important;
  481. }
  482. .vUBwW .DPvwYc, .TGnLfc {
  483. color: white !important;
  484. }
  485. .DShyMc-MzI2ODk3OTk4MjE5 .mxmXhf {
  486. fill: #fff !important;
  487. }
  488. .tWfTvb, .XaepId, .NE9bBb, .aVeDNe .MQL3Ob {
  489. background: rgba(21,31,46,0.8) !important;
  490. }
  491. .JPdR6b.qjTEB {
  492. background: rgba(21,31,46,0.8) !important;
  493. }
  494. .fWf7qe .Yalane {
  495. background: rgba(21,31,46,0.8) !important;
  496. background-clip: padding-box !important;
  497. }
  498. .z80M1.FwR7Pc .jO7h3c {
  499. background-image: linear-gradient(to right, #06abff 5%, #6600CC 97%);
  500. -webkit-background-clip: text;
  501. -webkit-text-fill-color: transparent;
  502. }
  503. .z80M1.qs41qe .jO7h3c {
  504. background-image: linear-gradient(to right, #06abff 5%, #6600CC 97%);
  505. -webkit-background-clip: text;
  506. -webkit-text-fill-color: transparent;
  507. }
  508. .z80M1.FwR7Pc {
  509. background: rgba(21,31,46,0.8);
  510. }
  511. .FeRvI .oJeWuf {
  512. background: rgba(21,31,46,0.8);
  513. }
  514. .z80M1.qs41qe {
  515. background: rgba(21,31,46,0.8);
  516. }
  517. .xdKj9c, .Je07k, tbody .qwFLJb {
  518. background: rgba(21,31,46,0.5);
  519. }
  520. .YEeyed, .VUfVLb, thead .qwFLJb {
  521. background: rgba(21,31,46,0.8);
  522. }
  523. .xdKj9c.kTKNNc, .Je07k.kTKNNc, tbody .qwFLJb.kTKNNc {
  524. background: rgba(21,31,46,0.8);
  525. }
  526. .tUJKGd:not(.xp2dJ).ndcsBf .idtp4e {
  527. background: rgba(21,31,46,0.8);
  528. }
  529. .ypv4re {
  530. background: rgba(21,31,46,0.8);
  531. border-top-right-radius: 5px;
  532. border-top-left-radius: 5px;
  533. }
  534. .ypv4re:not(.pco8Kc) {
  535. background: rgba(21,31,46,0.8);
  536. border-radius: 5px;
  537. }
  538. .j70YMc:not(.pco8Kc) {
  539. background: rgba(21,31,46,0.8);
  540. border-radius: 5px;
  541. }
  542. .gb_wb.gb_wb {
  543. background: rgba(21,31,46,0.8);
  544. }
  545. .gb_sb.gb_sb {
  546. background: rgba(21,31,46,0.8);
  547. }
  548. .gb_wb.gb_wb {
  549. background: rgba(21,31,46,0.8);
  550. }
  551. .gb_Db.gb_Db {
  552. background: rgba(21,31,46,0.8);
  553. }
  554. .gb_Nb>.gb_Mb:hover {
  555. background: rgba(21,31,46,0.4);
  556. }
  557.  
  558. /* borders fix */
  559. .joJglb, .BdCNc, .d4Fe0d .Aopndd {
  560. border-color: transparent !important;
  561. }
  562. .u73Apc, .uO32ac, .gQZxn, .ycbm1d, .s2g3Xd, .n4xnA, .d6CWTd, .tfGBod.tfGBod:not(.xp2dJ), .tfGBod.xp2dJ .jWCzBe, .tfGBod.xp2dJ .iobNdf, .PeGHgb.Q8U8uc .Ono85c+.oh9CFb, * {
  563. border-color: #4c4c4c !important;
  564. }
  565. .QkA63b .GJYBjd {
  566. border: 1px solid #4c4c4c !important;
  567. }
  568. `;
  569.  
  570. var elem = document.createElement('style');
  571. elem.type = 'text/css';
  572. elem.innerText = style;
  573. document.head.appendChild(elem);
  574. })();
  575.  
  576. // ============ END ============ //