Skip to content

Skeuomorphic Google Classroom by SatinFoil

Write a review Install Get Stylus

Details

AuthorSatinFoil

LicenseNo License

Categoryclassroom.google.com

Created

Updated

Code size2.5 kB

Code checksum162efe30

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A nice skeuomorphic theme for Google Classroom

Notes

UPDATE 05.01.2025 (January 5th 2025) 21:35 (9:35 PM)
Replaced the selected indicator on the tab select thing from the default flat one to a glow one, which is more compatible with this design style

UPDATE 12.13.2024 (December 13th 2024) 8:21 (AM)
Fixed colour error on some elements on the header

UPDATE 10.29.2024 (Oct. 29 2024) 18:32 (6:32 PM)
Greatly improved the gradients. They look much more glossy now and less flat-ish.

UPDATE 10.10.2024 (Oct 10 2024) 22:55 (10:55 PM)
Small Bug Fixes (Likely due to Google pushing an update)

Source code

/* ==UserStyle==
@name         Skeuomorphic Google Classroom
@version      20241029.22.34
@namespace    https://userstyles.world/user/SatinFoil
@description  A nice skeuomorphic theme for Google Classroom
@author       SatinFoil
@license      No License
==/UserStyle== */

@-moz-document domain("classroom.google.com") {
.QRiHXd, .n4xnA, .d4Fe0d:not(.JZicYb, .YJHsie) {
    background: linear-gradient(#f3f3f3 0%, #ddd 50%, #c4c4c4 50%, #eaeaea 100%);
}
.hN1OOc.eumXzf::after {
    border-width: 13px;
    border-image: linear-gradient(#00a9ff00, #00a9ffbf) 30;
}
.hN1OOc.eumXzf:hover::after {
    border-image: linear-gradient(#00a9ff00, #00a9ff66) 30;
}
.d4Fe0d span {
    font-size: 14px;
}
.KEDCCd {
    background: linear-gradient(#595959, #303030) !important;
    color: white !important;
}
.u2mfde {
    color: white !important;
}
.u2mfde {
    border-left: 1px solid #474747;
    border-right: 1px solid #474747;
}
.u2mfde:hover {
    background: linear-gradient(#303030, #595959) !important;
    /* text-shadow: 0px 0px 15px white, 1px 0px 15px white, 0px 1px 15px white; */
    text-shadow: 0px 0px 15px #35bbff, 1px 0px 15px #35bbff, 0px 1px 15px #35bbff !important;
}
.u2mfde:hover {
    color: #35bbff !important;
    transition: 0.2s;
}
.u2mfde {
    transition: 0.2s;
}
.tfGBod {
    border: 5px solid #fff0;
}
.NMm5M {
    color: black;
}
.kFwPee {
    background: linear-gradient(#f3f3f3, #bebebe) !important;
}
.IzVHde {
    background: linear-gradient(#f3f3f3, #bebebe) !important;
}
.v9TZ3c {
    box-shadow: 0px 5px 10px #939393 !important;
}
/* sidebar */
.OX4Vcb {
   background: linear-gradient(#f3f3f3, #979797);
    /* background: url(); */
    background-size: 100vw 100vh;
}
.STek2d {
    box-shadow: 5px 7px 30px #6b6b6b !important;
}
/* buttons */
.VfPpkd-LgbsSe {
    background: linear-gradient(#63bef7 0%, #3e93c8 50%, #006eb3 50%, #86d1ff 100%) !important;
    color: white !important;
    transition: 0.2s;
}
.VfPpkd-LgbsSe:hover {
    background: linear-gradient(#63edf7 0%, #3ec8c6 50%, #009bb3 50%, #86fffd 100%) !important;
    text-shadow: 0px 0px 15px #fff, 1px 0px 15px #fff, 0px 1px 15px #fff;
    transition: 0.2s;
}
.VfPpkd-dgl2Hf-ppHlrf-sM5MNb svg {
    color: white !important;
}
/* Home */
.Vx8Sxd {
    color: black !important;
}
}
.YJHsie {
    background: transparent !important;
}
.YJHsie svg {
    color: white !important;
}

Reviews

No reviews yet.