☰

Google Classroom - Moonlight

Custom theme for Google Classroom

目前为 2021-05-13 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name        Google Classroom - Moonlight
  3. // @namespace   Violentmonkey Scripts
  4. // @match       https://classroom.google.com/*
  5. // @grant       none
  6. // @version     1.0
  7. // @author      Risuleia
  8. // @require     https://code.jquery.com/jquery-3.6.0.min.js
  9. // @description Custom theme for Google Classroom
  10. // ==/UserScript==
  11.  
  12. // ============ START ============ //
  13. (function() {
  14.     'use strict';
  15.  
  16.     var style = `
  17. /* custom fonts */
  18. @import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');
  19.  
  20. /* background (change the URL inside quotes to add your own background*/
  21. body {
  22.    background: rgba(21,31,46,0.8) url("https://i.imgur.com/LHj4Gil.jpg") center/100% fixed;
  23.    background-repeat: no-repeat;
  24.    background-size: cover;
  25. }
  26.  
  27. /* global setting */
  28. * {
  29.   font-family: Caveat;
  30.   color: #fff !important;
  31. }
  32. * {
  33.   border-color: rgba(21,31,46,0.8);
  34. }
  35. * {
  36.   box-shadow: none !important;
  37. }
  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::after {
  535.   position: absolute;
  536.   content: '';
  537.   background: rgba(21,31,46,0.8);
  538.   top: 80px;
  539.   height: 15px;
  540.   width: 758px;
  541.   border: 1px solid transparent;
  542. }
  543. .j70YMc {
  544.   background: rgba(21,31,46,0.8);
  545.   border-bottom-left-radius: 5px;
  546.   border-bottom-right-radius: 5px;
  547. }
  548. .gb_wb.gb_wb {
  549.   background: rgba(21,31,46,0.8);
  550. }
  551. .gb_sb.gb_sb {
  552.   background: rgba(21,31,46,0.8);
  553. }
  554. .gb_wb.gb_wb {
  555.   background: rgba(21,31,46,0.8);
  556. }
  557. .gb_Db.gb_Db {
  558.   background: rgba(21,31,46,0.8);
  559. }
  560. .gb_Nb>.gb_Mb:hover {
  561.   background: rgba(21,31,46,0.4);
  562. }
  563.  
  564. /* borders fix */
  565. .joJglb, .BdCNc, .d4Fe0d .Aopndd {
  566.   border-color: transparent !important;
  567. }
  568. .u73Apc, .uO32ac, .gQZxn, .ycbm1d, .s2g3Xd, .n4xnA, .d6CWTd, .tfGBod.tfGBod:not(.xp2dJ), .tfGBod.xp2dJ .jWCzBe, .tfGBod.xp2dJ .iobNdf, .PeGHgb.Q8U8uc .Ono85c+.oh9CFb, * {
  569.   border-color: #4c4c4c !important;
  570. }
  571. .QkA63b .GJYBjd {
  572.   border: 1px solid #4c4c4c !important;
  573. }
  574. `;
  575.  
  576.     var elem = document.createElement('style');
  577.     elem.type = 'text/css';
  578.     elem.innerText = style;
  579.     document.head.appendChild(elem);
  580. })();
  581.  
  582. // ============ END ============ //