Skip to content

Canvas | Instructure | Modern Style | Lite edition by rockshowgamer2

Screenshot of Canvas | Instructure | Modern Style | Lite edition

Details

Authorrockshowgamer2

LicenseSchover

Categoryinstructure

Created

Updated

Size106 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

This is a custom theme for Canvas/Instructure

|"""""""""""""""""""""""""""""""""""""""""""|
|This style has the following:
|"""""""""""""""""""""""""""""""""""""""""""'
|Customizable settings: ✔️
|Backgrounds: ✔️
|Animations: ❌
|UI Transparency: ✔️
|Rounded corners: ✔️
|________________________________________

~Want more features? Then check out the Main version of this theme:
https://userstyles.world/style/4650/canvas-instructure-modern-style

~If bugs are found email me at: Rockshowgamer2@gmail.com~
Made by Rockshow_Gamer.

Notes

|"""""""""""""""-Change-log-"""""""""""""""
|
|Made by students, for students.
|
|"""""""""""""""""""""""""""""""""""""""""""
|V1 (Beta)
|
|Major bug found and fixed!
|I just noticed a bug where this style was running on every website
|Why? Well I did not close the (@-moz-document{}) properly in an older version.
|
|Start of development...
|Removed most if not ALL animations
|Fixed bugs with UI
|Made the UI usable without animations
|__________________________________________

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         Canvas | Instructure | Modern Style | Lite edition
@version      v1
@namespace    userstyles.world/user/rockshowgamer2
@description  This is a custom theme for Canvas/Instructure
@author       rockshowgamer2
@license      Schover
@supportURL https://sites.google.com/view/schover/home

@advanced dropdown dashboardbgchanger "Background Image" {
1. "Retrowave blue w stars (default) GIF"    <<<EOT https://i.gifer.com/origin/35/35ffd57e3539dd0d71f6bd69e106df2f.gif EOT;
2. "Retrowave pink (old default) GIF"  <<<EOT https://c.tenor.com/-usuBYt1mNAAAAAd/retrowave-grid.gif EOT;
3. "Retrowave pink slow GIF" <<<EOT https://i.imgur.com/BzMIeML.gif?noredirect EOT;
4. "Green textured background PNG"    <<<EOT https://cdn.pixabay.com/photo/2020/07/27/20/44/green-5443435_1280.jpg EOT;
5. "Lofi room GIF" <<<EOT https://wallpaperaccess.com/full/869923.gif EOT;
6. "Lofi lake GIF" <<<EOT https://i.pinimg.com/originals/34/d7/a3/34d7a3bbe7ab056f213e66c7182dd57e.gif EOT;
7. "Lofi train GIF" <<<EOT https://wallpaperaccess.com/full/2825711.gif EOT;
8. "Lofi city GIF" <<<EOT https://images.squarespace-cdn.com/content/v1/6137845ccfa8877e18491837/1631129485130-CU9KCAO9LKHZIDFV5SCG/sean-lewis_toonorth_loop_1000px.gif EOT;
9. "Lofi mario GIF" <<<EOT https://cutewallpaper.org/27/can-you-use-gifs-for-desktop-wallpaper/pixel-bfe7d-art-32039-gif-195e7-wallpaper-8ce82-gambar-ec855-wallpaper-ba575-keren.gif EOT;
10. "Lofi train/city GIF" <<<EOT https://wallpaperaccess.com/full/785502.gif EOT;
11. "Lofi Sleeping GIF" <<<EOT https://wallpaperaccess.com/full/2471364.gif EOT;
12. "Mario game GIF" <<<EOT https://www.pixelstalk.net/wp-content/uploads/2016/06/Free-HD-Gif-Wallpapers-For-Desktop.gif EOT;
13. "Rainbow wave GIF" <<<EOT https://i.pinimg.com/originals/c6/c1/1d/c6c11d8ba0b9f26caf0a6a8ee3a3e78e.gif EOT;

	dashboardbgchanger-custom-dropdown "Custom" <<<EOT /*[[dashboardbgchanger-custom]]*\/ EOT;
}
@advanced text dashboardbgchanger-custom "Background Image (Custom)" "https://example.com/image.png"

==/UserStyle== */
@-moz-document regexp("https:\\/\\/(?!(www)\\.).+\\.instructure\\.(com|de|org|stu).*") {
	/*Home Page! (Customizable)*/
	/*
	
 ___      ___   _____      
|\  \    /  /| / __  \    
\ \  \  /  / /|\/_|\  \ 
 \ \  \/  / / \|/ \ \  \ 
  \ \    / /___    \ \  \
   \ \__/ /|\__\    \ \__\
    \|__|/ \|__|     \|__|	
                                                                
                                _                               __                  
 |\/|  _.  _|  _    |_     o   |_)  _   _ |   _ |_   _         /__  _. ._ _   _  ._ 
 |  | (_| (_| (/_   |_) \/ o   | \ (_) (_ |< _> | | (_) \/\/   \_| (_| | | | (/_ |  
                        /                                   ___                                      
*/
	/* Canvas logo, !MAY NOT SHOW UP! */
	.ic-app-header__logomark {
		display: block;
		overflow: hidden;
		background-image: url(https://www.nicepng.com/png/full/4-43043_free-library-80s-vector-sun-july-16.png);
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 70%;
		transition: transform .3s;
		height: 0px;
	}
	/* Customize settings below at your OWN RISK!!!!! */
	/*Animations*/
	div,
	body,
	:before,
	:after,
	* {
		/* remove all animations */
		animation: none!important;
		transition: none!important;
	}






	.ic-app-header__menu-list-link .ic-icon-svg:hover {
		transform: rotateZ(-19deg) !important;
	}

	.ic-app-header__menu-list-link .ic-icon-svg {
		transform: rotateZ(0deg) !important;
	}

	.fbyHH_bGBk,
	a.fbyHH_bGBk,
	button.fbyHH_bGBk:active {
		vertical-align: baseline;
		animation: wobble3 0.1s;
	}

	@keyframes wobble3 {
		0% {
			filter: blur(0px);
			transform: scale3d(1, 1, 1);
		}
		50% {
			filter: blur(0px);
			transform: scale3d(1.3, 1.3, 1.3);
		}
		100% {
			filter: blur(0px);
			transform: scale3d(1, 1, 1);
		}
	}

	.ic-app-header__menu-list-link:not(.ic-app-header__menu-list-link--nav-toggle):active {
		transform: scale3d(1.3, 1.3, 1.3);
	}

	.jpyTq_bGBk:hover {
		animation: hover1 100s;
	}
	@keyframes hover1 {
		0% {
			background-color: #22442a94;
			transform: scale3d(1, 1, 1);
		}
		0.05% {
			background-color: #22442a94;
			transform: scale3d(1.15, 1.15, 1.15);
		}
		0.1% {
			background-color: #22442a7a;
			transform: scale3d(1, 1, 1);
		}
	}

	.jpyTq_bGBk:active {
		animation: wobble2 100s;
	}
	@keyframes wobble2 {
		0% {
			filter: blur(0px);
			transform: scale3d(1, 1, 1);
		}
		0.2% {
			filter: blur(0.2px);
			transform: scale3d(0.9, 0.9, 0.9);
		}
		0.3% {
			filter: blur(0px);
			transform: scale3d(1, 1, 1);
		}
	}

	.ic-app-header__main-navigation {
		box-sizing: border-box;
		border-radius: 0px;
		flex: 1 0 auto;
		background: #00000070;
	}

	.ic-app-header__menu-list-link.ic-app-header__menu-list-link--nav-toggle .ic-icon-svg--navtoggle {
		transform: none !important;
	}

	:root {
		--ic-brand-primary-darkened-5: #036FAC;
		--ic-brand-primary-darkened-10: #0369A3;
		--ic-brand-primary-darkened-15: #03639A;
		--ic-brand-primary-lightened-5: #0F7AB8;
		--ic-brand-primary-lightened-10: #1C81BC;
		--ic-brand-primary-lightened-15: #2888C0;
		--ic-brand-button--primary-bgd-darkened-5: #036FAC;
		--ic-brand-button--primary-bgd-darkened-15: #03639A;
		--ic-brand-button--secondary-bgd-darkened-5: #2B3942;
		--ic-brand-button--secondary-bgd-darkened-15: #27333B;
		--ic-brand-font-color-dark-lightened-15: #4C5860;
		--ic-brand-font-color-dark-lightened-30: #6C757C;
		--ic-link-color-darkened-10: #0369A3;
		--ic-link-color-lightened-10: #1C81BC;
		--ic-brand-primary: #0374B5;
		--ic-brand-font-color-dark: #2D3B45;
		--ic-link-color: #0374B5;
		--ic-brand-button--primary-bgd: var(--ic-brand-primary);
		--ic-brand-button--primary-text: #00ff08;
		--ic-brand-button--secondary-bgd: #2D3B45;
		--ic-brand-button--secondary-text: #7bb576;
		--ic-brand-global-nav-bgd: #394B58;
		--ic-brand-global-nav-ic-icon-svg-fill: #74aa66;
		--ic-brand-global-nav-ic-icon-svg-fill--active: #000;
		--ic-brand-global-nav-menu-item__text-color: #74aa66;
		--ic-brand-global-nav-menu-item__text-color--active: #65cb7b;
		--ic-brand-global-nav-avatar-border: #467d1b00;
		--ic-brand-global-nav-menu-item__badge-bgd: #ffffff;
		--ic-brand-global-nav-menu-item__badge-bgd--active: #ffffff;
		--ic-brand-global-nav-menu-item__badge-text: #000000;
		--ic-brand-global-nav-menu-item__badge-text--active: #ffffff;
		--ic-brand-global-nav-logo-bgd: #394B58;
		--ic-brand-header-image: url(/dist/images/canvas_logomark_only@2x-e197434829.png);
		--ic-brand-mobile-global-nav-logo: url(/dist/images/mobile-global-nav-logo-aff8453309.svg);
		--ic-brand-watermark: ;
		--ic-brand-watermark-opacity: 1.0;
		--ic-brand-favicon: url(/dist/images/favicon-e10d657a73.ico);
		--ic-brand-apple-touch-icon: url(/dist/images/apple-touch-icon-585e5d997d.png);
		--ic-brand-msapplication-tile-color: var(--ic-brand-primary);
		--ic-brand-msapplication-tile-square: url(/dist/images/windows-tile-eda8889e7b.png);
		--ic-brand-msapplication-tile-wide: url(/dist/images/windows-tile-wide-44d3cc1060.png);
		--ic-brand-right-sidebar-logo: ;
		--ic-brand-Login-body-bgd-color: #394B58;
		--ic-brand-Login-body-bgd-image: ;
		--ic-brand-Login-body-bgd-shadow-color: #2D3B45;
		--ic-brand-Login-logo: url(/dist/images/login/canvas-logo-5617606953.svg);
		--ic-brand-Login-Content-bgd-color: none;
		--ic-brand-Login-Content-border-color: none;
		--ic-brand-Login-Content-inner-bgd: none;
		--ic-brand-Login-Content-inner-border: none;
		--ic-brand-Login-Content-inner-body-bgd: none;
		--ic-brand-Login-Content-inner-body-border: none;
		--ic-brand-Login-Content-label-text-color: #ffffff;
		--ic-brand-Login-Content-password-text-color: #ffffff;
		--ic-brand-Login-footer-link-color: #ffffff;
		--ic-brand-Login-footer-link-color-hover: #ffffff;
		--ic-brand-Login-instructure-logo: #ffffff;
	}

	.ic-notification__content {
		flex: 1;
		padding: 12px;
		box-sizing: border-box;
		background: #000;
		position: relative;
	}

	.ic-app-header__menu-list-link .ic-icon-svg {
		width: 26px;
		display: inline-block;
		vertical-align: middle;
		fill: #77b38ff0;
	}

	.ic-app-header__menu-list-item.ic-app-header__menu-list-item--active .ic-app-header__menu-list-link {
		background: #0000005e;
	}

	.ic-app-header__menu-list-link:not(.ic-app-header__menu-list-link--nav-toggle) {
		padding: 0.3rem 0;
	}

	.menu-item__text {
		transform: translate3d(-100%, 0, 0);
		opacity: 0;
		pointer-events: none;
		box-sizing: border-box;
		background-color: #1d261bcf;
		position: absolute;
		left: 100%;
		top: 50%;
		padding: 0 12px;
		line-height: 1.8rem;
		margin-top: -0.9rem;
		font-size: 14px;
		font-size: 0.875rem;
		border-radius: 3px;
		color: #fff;
		white-space: nowrap;
	}

	.fLzZc_bGBk {
		background: linear-gradient(180deg, #090f1800, #1c776575);
		box-sizing: border-box;
		max-height: 100vh;
		max-width: 100vw;
		overflow: hidden auto;
		position: fixed;
		z-index: var(--fLzZc-zIndex);
	}


	.ic-app-header__menu-list-item.ic-app-header__menu-list-item--active .ic-icon-svg {
		fill: #80fbb7;
	}

	body.primary-nav-expanded .ic-app-header__secondary-navigation {
		position: static;
		left: auto;
		bottom: auto;
		z-index: auto;
		width: auto;
		background-color: #00000070;
	}

	:root {
		--ic-brand-global-nav-bgd: #0000;
	}

	body.primary-nav-expanded .ic-app-header__logomark {
		height: 70px;
	}


	.ic-app-nav-toggle-and-crumbs {
		display: flex;
		align-items: center;
		background: #00000070;
		min-height: 4.5rem;
		box-sizing: border-box;
	}

	#breadcrumbs {
		background-color: #00000070;
	}

	body.primary-nav-expanded .ic-app-header__logomark {
		height: 70px;
	}

	.ic-app-course-nav-toggle {
		margin-right: 12px;
		padding: 0;
		width: 37px;
		height: 50px;
	}

	.ic-app-course-nav-toggle i[class*=icon-],
	.ic-app-course-nav-toggle i[class^=icon-] {
		line-height: 1.21;
	}

	.ic-avatar {
		overflow: hidden;
		border-radius: 100%;
		border: 0px solid var(--ic-brand-global-nav-avatar-border);
		width: 50px;
		height: 50px;
		box-si...

Reviews

No reviews yet.