Canvas | Instructure | Modern Style by rockshowgamer2

/* ==UserStyle==
@name         Canvas/instructure Theme.
@version      v11.5
@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

@var text mainsettingsheader "𝙈𝘼𝙄𝙉 𝙎𝙀𝙏𝙏𝙄𝙉𝙂𝙎" '"↓"'

@advanced dropdown Modernicons "Modern menu icons (Beta)" {
1.	Modernicons "Off*" <<<EOT

.ic-app-header__menu-list-link .ic-icon-svg {
		        animation: sidemenubuttonsmouseleft 0.2s;    
 }
	
    @keyframes sidemenubuttonsmouseleft {
  0% {
      transform: rotateZ(-19deg);   
  }	
  100% {
 	  transform: rotateZ(0deg);
  }
}	

.ic-app-header__menu-list-link .ic-icon-svg:hover {
		        animation: sidemenubuttonsmousehover 0.75s forwards;    
 }
	
    @keyframes sidemenubuttonsmousehover {
  0% {
      transform: rotateZ(0deg);   
  }	
  50% {
      transform: rotateZ(30deg);   
  }	
  100% {
 	  transform: rotateZ(-19deg);
  }
}	
	
.fbyHH_bGBk, a.fbyHH_bGBk, button.fbyHH_bGBk:active, .ic-app-header__menu-list-link:not(.ic-app-header__menu-list-link--nav-toggle):active {
    vertical-align: baseline;
        animation: wobble3 0.1s;    
 }
    
    @keyframes wobble3 {
  0% {
    transform: scale3d(1, 1, 1);  
  }
  50% {
	transform: scale3d(1.3, 1.3, 1.3);    

  }
  100% { 
	transform: scale3d(1, 1, 1);  
  }
}EOT;

2.  Modernicons "On" <<<EOT

.ic-app-header__menu-list-link .ic-icon-svg:hover {
fill: black !important;
}

svg.ic-icon-svg.ic-icon-svg--inbox path,  svg.ic-icon-svg.menu-item__icon.svg-icon-history path, svg.ic-icon-svg.ic-icon-svg--calendar path, svg.ic-icon-svg.ic-icon-svg--courses path, svg.ic-icon-svg.ic-icon-svg--dashboard path, svg.ic-icon-svg.menu-item__icon.svg-icon-help path { 
    d: none;
}

svg.ic-icon-svg.ic-icon-svg--inbox {
 transform: scale3d(1.1,1.1,1) translateY(2.5px); 
 background-image: url("https://i.ibb.co/Yy39CPG/download-3.png") !important;
 background-position-y: 50%;
 background-position-x: 50%;
 background-repeat: no-repeat;
 background-size: 150% 150%;
 filter: invert(0.5);
}
	
svg.ic-icon-svg.ic-icon-svg--inbox:hover {
 transform: scale3d(1.1,1.1,1) translateY(0px); 
 background-image: url("https://i.ibb.co/tB783R5/download-4.png") !important;
 background-position-y: 50%;
 background-position-x: 50%;
 background-repeat: no-repeat;
 background-size: 150% 150%;
}		

svg.ic-icon-svg.menu-item__icon.svg-icon-history {
 background-image:  
url("https://www.clipartmax.com/png/middle/273-2733855_hand-signs-symbols-clocks-clock-clock-minute-hand-png.png"), 

url("https://www.clipartmax.com/png/middle/273-2733855_hand-signs-symbols-clocks-clock-clock-minute-hand-png.png"),

url("https://i.ibb.co/MfrcFL5/download-6.png") !important;
 background-position-y: 50%, 50%, 50%;
 background-position-x: 67%, 80%, 50%;
 background-repeat: no-repeat, no-repeat, no-repeat;
 background-size: 30% 7%, 40% 7%, 200% 200%;
 rotate: 10deg;
 filter: invert(0.5);
}	

svg.ic-icon-svg.menu-item__icon.svg-icon-history:hover {
        animation: HistoryHoverIco 1s forwards;    
 }
    @keyframes HistoryHoverIco {
  0% {
   background-size: 30% 7%, 40% 7%, 200% 200%;
 filter: invert(1);	  
  }			
  50% {
   background-size: 7% 50%, 40% 7%, 200% 200%;
   background-position-y: 0%, 50%, 50%;
   background-position-x: 49%, 80%, 50%;
   rotate: 380deg;
   transform: scale3d(1.2, 1.2, 1);  
  filter: invert(0);	  
  }  
  55% {
   background-size: 50% 7%, 40% 7%, 200% 200%;
   background-position-y: 50%, 50%, 50%;
   background-position-x: 9%, 80%, 50%;
  }
  60% {
   background-size: 7% 50%, 40% 7%, 200% 200%;
   background-position-y: 95%, 50%, 50%;
   background-position-x: 50%, 80%, 50%;
  }		
  65% {
   background-size: 50% 7%, 40% 7%, 200% 200%;
   background-position-y: 50%, 50%, 50%;
   background-position-x: 100%, 80%, 50%;
   rotate: 360deg;
  transform: scale3d(1.2, 1.2, 1);  
  filter: invert(0);	
  }			
}


svg.ic-icon-svg.menu-item__icon.svg-icon-history:active {
        animation: HistoryClickIco 0.2s forwards;    
 }
    @keyframes HistoryClickIco {
  0% {
   filter: invert(1);	  	  
  }		
  100% {
   filter: invert(1);	
  }			
}

svg.ic-icon-svg.ic-icon-svg--calendar {
 background-image: url("https://i.ibb.co/Y7QwZN1/Calendar.png") !important;
 background-position-y: 50%;
 background-position-x: 50%;
 background-repeat: no-repeat;
 background-size: 180% 180%;
 filter: invert(0.5);
}	
svg.ic-icon-svg.ic-icon-svg--calendar:hover {
 background-image: url("https://i.ibb.co/Gd211QL/Calander-Open.png") !important;
 background-position-y: 50%;
 background-position-x: 50%;
 background-repeat: no-repeat;
 background-size: 180% 180%;
 filter: invert(0.5);
}	
svg.ic-icon-svg.ic-icon-svg--calendar:active {
 background-image: url("https://i.ibb.co/CHx8Gx2/Calendar-Click.png") !important;
 background-position-y: 50%;
 background-position-x: 50%;
 background-repeat: no-repeat;
 background-size: 180% 180%;
 filter: invert(0.5);
}		
	
svg.ic-icon-svg.ic-icon-svg--courses {
 background-image: url("https://i.ibb.co/Jd4S6tN/download-11.png") !important;
 background-position-y: 50%;
 background-position-x: 50%;
 background-repeat: no-repeat;
 background-size: 180% 180%;
 filter: invert(0.5);
}	

svg.ic-icon-svg.ic-icon-svg--courses:active {
 background-image: url("https://i.ibb.co/DtbwXZx/download-12.png") !important;
 background-position-y: 50%;
 background-position-x: 50%;
 background-repeat: no-repeat;
 background-size: 180% 180%;
 filter: invert(0.5);
}	

svg.ic-icon-svg.ic-icon-svg--dashboard {
 background-image: url("https://i.ibb.co/VqT6RTw/download-15.png") !important;
 background-position-y: 50%;
 background-position-x: 50%;
 background-repeat: no-repeat;
 background-size: 100% 100%;
 transform: scale3d(1.6, 2, 1);
 filter: invert(0.5);
}	

.ic-app-header__menu-list-link .ic-icon-svg:hover{
        animation: ColorHover 0.2s forwards;    
 }
	
    @keyframes ColorHover {
  0% {
    
  }	
  100% {
    filter: invert(1); 
  }
}

svg.ic-icon-svg.menu-item__icon.svg-icon-help {
 background-image: url("https://i.ibb.co/P5gK6cq/download-16.png") !important;
 background-position-y: 50%;
 background-position-x: 50%;
 background-repeat: no-repeat;
 background-size: 140% 140%;
 filter: invert(0.5);
 transform: scale3d(1.2, 1.2, 1);
}	

svg.ic-icon-svg.menu-item__icon.svg-icon-help:hover {
 background-image: url("https://i.ibb.co/P5gK6cq/download-16.png") !important;
 background-position-y: 50%;
 background-position-x: 50%;
 background-repeat: no-repeat;
 background-size: 140% 140%;
 transform: scale3d(1.2, 1.2, 1);
 animation: HelpHover 1s forwards;    
 }
	
    @keyframes HelpHover {
  0% {
   transform: rotate(0deg) scale3d(1.2, 1.2, 1);
  }
  50% {
   transform: rotate(-34deg) scale3d(1.2, 1.2, 1);
   filter: invert(1);
  }	
  60% {
   transform: rotate(-34deg) scale3d(1.2, 1.2, 1);
   filter: invert(1);
  }	
  100% {
   transform: rotate(0deg) scale3d(1.2, 1.2, 1);
   filter: invert(1);
  }
}		

.ic-app-header__menu-list-link .ic-icon-svg {
    width: 26px;
    display: inline-block;
    vertical-align: middle;
    fill: #000000f0;
	filter: invert(0.5);
}EOT;

}

@advanced dropdown Bettersizemenus  "Better sized menus (Beta)" {
1.	Bettersizemenus "Off*" <<<EOT /* off *\/ EOT;

#questions.assessing .answer {
    padding: 5px;
    margin: 0;
}

2.  Bettersizemenus "On" <<<EOT  

#questions.assessing .answer {
    padding: 0px;
    margin: 0;
}

.ic-app-header {
    width: fit-content !important;
}

body.course-menu-expanded .ic-app-main-content__secondary{
    padding-left: 2px;
    width: 236px;
}

.ic-app-main-content__secondary {
    padding: 0px;
}

#right-side ul, ol {
    padding: 0;
    margin: 0 0 0px 0px;
}

.ToDoSidebarItem {
    line-height: 0;
    display: flex;
    align-items: flex-start;
    margin: 2px 0px 0px;
}

.with-right-side #right-side-wrapper .jpyTq_bGBk:hover, .with-right-side #right-side-wrapper .jpyTq_bGBk:active  {
    animation: none;
}

body:not(.no-headers) .ic-Layout-wrapper {
    margin-left: 48px;
}

.ic-app-nav-toggle-and-crumbs {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #c7cdd100;
    margin: 0 0px;
    min-height: fit-content !important;
}

.ic-app-header {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    width: fit-content;
    z-index: 100;
    background-color: #00000000;
}

body:not(.no-headers).primary-nav-expanded .ic-Layout-wrapper {
    margin-left: 66.5px;
}EOT;

}

@advanced dropdown Simplesidebar "Simple navigation bar (Beta)" {
1.	Simplesidebar "Off*" <<<EOT 

.ic-app-header__main-navigation {
    box-sizing: border-box;
    border-radius: 0px;
    flex: 1 0 auto;
    background: linear-gradient(124deg, #8c140040, #770d0d40, #775e0e40, #6a6c0c40, #0e772140, #0e696f40, #160f7940, #87009540, #dd00f340);
    background-size: 1800% 1800%;

    -webkit-animation: rainbow 10s ease infinite;
    -z-animation: rainbow 5s ease infinite;
    -o-animation: rainbow 10s ease infinite;
    animation: rainbow 5s ease infinite;
} EOT;

2.  Simplesidebar "On" <<<EOT


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

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

body.primary-nav-expanded .menu-item__text {
    color: #78797a;
}

body.primary-nav-expanded .ic-app-header__menu-list-item.ic-app-header__menu-list-item--active .menu-item__text {
    color: #ffffff !important;
}

.ic-app-header__menu-list-item.ic-app-header__menu-list-item--active .ic-app-header__menu-list-link:focus {
    box-shadow: inset 0 0 0 1px var(--ic-brand-global-nav-bgd),inset 0 0 0 2px #000000;
}

.ic-app-header__menu-list-link:focus {
    box-shadow: inset 0 0 0 1px var(--ic-br...