A cyberpunk color theme for the boring old google classroom
Google Classroom Cyberpunk Theme by THEDESTROYER6667
Details
AuthorTHEDESTROYER6667
LicenseNo License
Category#school, #futuristic, #cyberpunk
Created
Updated
Size45 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
It might need some fixes, it's not 100% done yet.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Google Classroom Cyberpunk Theme
@namespace github.com/openstyles/stylus
@version 1.0.0
@description A new userstyle
@author Me
==/UserStyle== */
@-moz-document domain("classroom.google.com") {
:root {
--background-primary: linear-gradient(180deg, rgb(30, 0, 5) 10%, rgba(0, 0, 0, 1) 65%);
--background-secondary: linear-gradient(180deg, rgba(23, 0, 5, 0.75) 10%, rgba(0, 0, 0, 1) 65%);
--font-primary: 'Rajdhani';
--primary-text-color: rgba(255, 255, 255, 0.8);
--primary: rgb(23, 13, 22);
--dark-primary: rgba(var(--primary), 0.7) --darkgrey: rgb(40, 40, 40);
--red: rgba(255, 0, 60, 1);
--pink: rgba(210, 0, 90, 1);
--darkred: rgb(85, 0, 30);
--blue: rgba(114, 234, 255, 1);
--light-blue: rgba(166, 242, 255, 1);
--yellow: rgba(255, 255, 0, 1);
--green: rgba(71, 213, 139, 1);
--dark-green: rgb(56, 171, 111);
--primary-color: rgba(var(--primary), 0.9);
--dark-primary-color: rgba(var(--primary), 1);
--light-primary-color: rgba(var(--primary), 0.6);
}
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');
/*Everything*/
* {
font-family: var(--font-primary) !important;
text-decoration: none !important;
}
body {
background-color: black;
}
h2 {
color: var(--blue);
}
/*Top Bar*/
nav > div.QRiHXd {
background: black;
}
/*Also the Top Bar*/
nav.joJglb {
border-bottom-color: var(--red);
}
/*Top Bar Class Title*/
span[class="YVvGBb dDKhVc Pce5Kb"],
span#UGb2Qe {
color: var(--red);
}
/*Top Bar Menu Icon*/
svg.gb_E {
fill: var(--blue);
}
/*Google Classroom Title text*/
span[class="rpo4wf-J3yWx Pce5Kb dR850e"] {
color: var(--blue);
}
/*Google Classroom Title text*/
a[class="onkcGd CbuVcc cGvavf QRiHXd fcsk5"],
span[class="rpo4wf-J3yWx Pce5Kb dR850e"]:hover {
color: var(--blue) !important;
}
.rIyhE .cGvavf:hover {
span[class="rpo4wf-J3yWx Pce5Kb dR850e"] {
color: var(--blue) !important;
}
}
span.UDKLAf > img.UAJaRc {
content: url("data:image/png;base64,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");
}
/*
====================================================================================================
CLASSROOM SELECTION
====================================================================================================
*/
/*Top Bar + Icon*/
button[class="VfPpkd-Bz112c-LgbsSe yHy1rc eT1oJ mN1ivc sEZiv TYHMlb oxacD"] > span > svg > path, button[class="VfPpkd-Bz112c-LgbsSe yHy1rc eT1oJ mN1ivc GR7QId oxacD"] > span > svg > path {
fill: var(--blue);
}
button[class="VfPpkd-Bz112c-LgbsSe yHy1rc eT1oJ mN1ivc xSP5ic oxacD"] > span > svg > path {
fill: var(--blue);
}
/*Classroom Background*/
.JwPp0e {
background: var(--background-primary);
border-left-color: var(--red);
}
/*Classrooms*/
ol.JwPp0e > li[class="gHz6xd Aopndd rZXyy"] {
background: var(--primary-color);
border-radius: 0px;
border-color: var(--red);
}
/*Celebration Announcement*/
.WufxEd .ynt9Dc,
.WufxEd .ynt9Dc .VfPpkd-WLXbod {
background-color: var(--primary);
border-bottom: 1px solid var(--red);
}
/*Celebration Announcement Text*/
.VfPpkd-Rj7Y9b {
color: var(--yellow) !important;
}
/*Classroom Work Text*/
a[class="onkcGd zZN2Lb-Wvd9Cc VBEdtc-Wvd9Cc apFsO"] {
color: var(--yellow) !important;
}
/*Classroom Under Div*/
div.SZ0kZe {
border-top-color: var(--red);
background-color: black;
}
/*Classroom Options Icon*/
span.VfPpkd-kBDsod > svg > path {
fill: var(--red);
}
/*Classroom Profile Pictures*/
img.PNzAWd {
content: url("https://static.thenounproject.com/png/1797861-200.png");
filter: invert(91%) sepia(14%) saturate(5008%) hue-rotate(164deg) brightness(105%) contrast(101%);
}
/*Classroom Title*/
a[class="onkcGd ZmqAt Vx8Sxd"] {
background-color: black;
}
/*Classroom Title Text*/
div[class="YVvGBb z3vRcc-ZoZQ1"] {
color: var(--red);
}
div[class="YVvGBb z3vRcc-ZoZQ1"]:hover {
color: var(--red) !important;
}
/*Classroom Text*/
a[class="onkcGd eDfb1d YVvGBb Vx8Sxd"] > div.YVvGBb {
color: var(--blue);
font-size: 25px;
}
/*
==================================================================================================
SIDE BAR
==================================================================================================
*/
/*Background*/
div.OX4Vcb {
background-color: var(--primary-color) !important;
border-right-color: transparent;
}
/*Background Wtih Skinny Window*/
.ETRkCe {
background-color: black !important;
}
div.Du1LZe.Tabkde {
background-color: var(--background-primary);
border-color: var(--background-primary);
}
/*Side bar classes*/
div.LlcfK {
border: 1px solid var(--red);
border-radius: 0px;
border-bottom-right-radius: 15px;
background-color: var(--primary);
}
/*Side Bar Classes Active*/
.Xi8cpb:focus:not(:active) .LlcfK,
.qr5cDe:focus:not(:active) .LlcfK {
border-color: var(--yellow);
}
.Xi8cpb:focus:not(:active) {
border-color: var(--yellow) !important;
}
/*Seprating Side Bar Classes*/
a[class="Xi8cpb vG1fDb TMOcX"],
a[class="Xi8cpb TMOcX"],
a[class="Xi8cpb vG1fDb TMOcX qs41qe"],
a.Xi8cpb {
margin-top: 15px;
}
/*Adjusting the height of some of the side bar classes*/
a[class="Xi8cpb TMOcX"],
a.Xi8cpb,
div.qr5cDe {
height: 48px !important;
}
/*Side bar class letter icons*/
div[class="OqAhgb TGnLfc A6dC2c UISY8d-Tvm9db bFjUmb-Tvm9db"] {
content: url("https://www.svgrepo.com/show/341880/greenkeeper.svg");
background: transparent !important;
filter: invert(13%) sepia(94%) saturate(6771%) hue-rotate(342deg) brightness(99%) contrast(105%);
}
/*Side bar Enrolled text*/
div[class="CsoGbf asQXV YVvGBb"] {
color...