Skip to content

LSU Moodle Purple Dark Theme - Mar 2024 by ValentineVetraya

Details

AuthorValentineVetraya

LicenseNo License

Categoryhttps://lsu.moodle.edu

Created

Updated

Size8.7 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A Userstyle for LSU Moodle's website, since none existed previously. made with the intention of being easier on the eyes.

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name          LSU Moodle Purple Dark Theme - Mar 2024
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A Userstyle for LSU Moodle's website, since none existed previously. made with the intention of being easier on the eyes.
@author         Valentine
==/UserStyle== */
@-moz-document domain("moodle.lsu.edu"){
    
    /*Colors:
        Main - Gray: #4a4a4a
        Secondary - Purple: #461D7C
        Accent 1 - Dark Purple: #33155B
        Accent 2 - Light Purple: #cbb4e9
        Highlight -  Pink
        Outline - Black
    
        Main - Gray: #4d424d
        Secondary - Purple: #461D7C
        Accent 1 - Dark Purple: #3A1867
        Accent 2 - Light Purple: #DADFF7
        Highlight - Coral: #D88373
    
    */
    
    
    
/* SECTION 1: MAIN COLOR. */
    
    body{ /*top part of the main page*/
    background-image: url("https://www.colorhexa.com/4d424d.png");
    }
    
     section#region-main { /* below the top part of the main page*/
      background-image: url("https://www.colorhexa.com/4d424d.png");
    }
    
    div{ /* most of the white parts of the pages.*/
    background-image: url("https://www.colorhexa.com/4d424d.png");
    }
    
    /* user initials background color */
    .userinitials {
	background-color: #4d424d;
	vertical-align: middle;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #343a40;
	font-weight: 400;
	margin-right: .25rem;
    }
    
        
    /* this random text that keeps not being the same color as the background */
    body, .card, nav#topBar, nav#span-pm, #snap-pm{
	background-color: #4d424d !important;
    }   
    
     /* Course/HRM tab background */
    .nav-tabs:not(.more-nav), .nav-pills {
	margin: 0;
	border: 0;
	padding: .125rem;
	background-color: #4d424d !important;
    }
    
     li.snap-asset { /* the side bars of the main page, i got this by finding the exact thing and copying the rule */
    display: block;
    position: relative;
    padding: 0;
    margin: 0 auto;
    height: auto;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    background-color: #4d424d !important;
    border: 1px solid #493860;
    border-top-width: .3em;
    transition: all 0.4s ease-in-out;
    }
        
        
/* SECTION 2: SECONDARY COLOR  */     
        
    .coursecard .coursecard-contacts .userpicture,.coursecard .coursecardcontacts .coursecard-contacts-more {
	margin: 0 1%;
	width: 35px;
	height: 35px;
    border: 0px solid;
	background-color: #67089c;
	padding: 2px;
    }

    .userinitials {
	background-color: #67089c;
	vertical-align: middle;
	display: inline-flex;
	align-items: center;
    border: 3px solid #67089c;
	justify-content: center;
	border-radius: 50%;
	color: #67089c;
	font-weight: 400;
	margin-right: .25rem;
    }
    
    #region-main, .modal-dialog, .modal-content, .bg-pulse-grey, .dropdown-menu, .btn-secondary, .bt-light, .custom-select {
	background-color: #67089c !important;
	border-color: var(--item-border-color) !important;
    }

    
    li.tab {
	border: 1px solid #fff;
	border-radius: 10px 10px 0 0;
	background-color: #7f4ac4;
    }
       
	span{
		color: #301c49;
	}
        
	span.text{
		color: #7f4ac4
	}
/* ACCENT 1: LIGHT PURPLE */        
    
        
	
    /*Course grade, progress, the "courses" highlight */
    body, .nav-link, .modal-header button.close, .table, .card, .btn-light, .btn-outline-secondary, .dropdown-item, .custom-select{
	color:#cbb4e9 !important;
}
    
	:root{
		--text-color: #cbb4e9 !important;
	}
	
	p#yui_3_17_2_1_1711920154017_21,p.alert.error{
		background-image: url("https://www.colorhexa.com/67089c.png") !important;
	}
	

    #snap-pm-header h1, #snap-pm-header a {
	color: #cbb4e9 !important;
	padding-top: 0;
}
 
 /* completion bar background */   
    .coursecard, .completionstatus {
	border-bottom: .3em solid #cbb4e9;
        
}

        
    /* Search by activity or name background */
    .form-control, .form-control:focus{
	display: block;
	width: 100%;
	height: calc(1.5em + 0.75rem + 2px);
	padding: .375rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #343a40;
	background-color: #cbb4e9;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: 0;
	transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
}
    

    
    /* Titles on preferences tab */
    h1, h2, h3, h4, h5, #page-user-profile .userprofile .profile_tree .node_category h3, .path-course.path-user .userprofile .profile_tree .node_category h3, h6, #page-course-edit #maincontent + h2, #page-course-editsection #maincontent + h2, .pagelayout-admin.path-mod #maincontent + h2, .h1, .messaging-area-container .messaging-area .contacts-area .searcharea .heading, .h2, .h3, .h4, .h5, .h6 {
	margin-bottom: .5rem;
	font-weight: 400;
	line-height: 1.2;
	color: #cbb4e9;
}
    
   

/* ACCENT 2; DARK PURPLE */    
    
    /*Text color for course names, grade percentage, and more*/
.theme-snap a:not(.btn):not(.dropdown-item):not(.badge-info):not(._blanktarget):not(.snap-due-date):not(.yui3-button):not(.mast-breadcrumb):not(.active):not(.disabled):not(.dimmed), .theme-snap .btn-link, .theme-snap .fake-link, span.text-truncate{
	color: #7f4ac4;
}    
 
    /* HRM color*/
    ul.nav-tabs, li.tab{
	border: 1px solid #000 !important;
	border-radius: 10px 10px 0 0;
	border-bottom: 1px solid #000!important;
	background-image: linear-gradient(#7f4ac4, #7f4ac4);
}
    
	
	
	ul.nav-tabs li.tab {
	border: 0px solid #000 !important;
	border-radius: 10px 10px 0 0;
	border-bottom: 0px !important;
	background-image: linear-gradient(#7f4ac4,#7f4ac4);
}
    
        
/* OTHER COLORS */        
	
	
	.form-control::placeholder {
	color: #0b0f13;
	opacity: 1;
}
	
	a#snap-pm-tab-HRM.nav-link, a#snap-pm-tab-current{
	border: 1px solid #000 !important;
	background-image: linear-gradient(#7f4ac4, #6e37b5);	
	}
	
	/* Calender */
	td.day.text-sm-center.text-md-left.weekend.clickable:hover, td.day.text-sm-center.text-md-left.clickable:hover{
	background-color: #67089c;	
	background-image: url("");
	}
	
	h3.popover-header{
	background-color: #4d424d;
	color: #cbb4e9;
	border-bottom: 1px solid #67089c;
	} 
	
	div.popover-body, span.eventname, span.arrow_text, span.hidden-xs-down{
		color: #cbb4e9;
	}
	
	a#snap-pm-tab-HRM.nav-link.active, a#snap-pm-tab-current.active{
	background-image: linear-gradient(#301c49, #301c49);	
	}
  
        /* KEEP THESE URLS BLANK, THEY MAKE THE TOP PART TRANSPARENT */
        div.snap-pm-user,div.course-content,ul.section,div.d-md-none.hidden-desktop.hidden-tablet{
        background-image: url("");
        }
    
       #snap-pm-header-quicklinks {
	    background-image: url("");
        }
    
        div.pull-right{
            background-image: url("");
        }


        div.coursecard-contacts{ /*leave this part blank, it's weird i know.*/
        background-image: url("");
        }
    
       
    
    /* Color of the progress bar */
   	.coursecard .completion-line {
	background-color: #129510;
	background-image: url("");
	height: .4em;
	margin-top: -.4em;
}
    
        
    /* "No activities require action" text */
    .text-muted, a.dimmed, a.dimmed:link, a.dimmed:visited, a.dimmed_text, a.dimmed_text:link, a.dimmed_text:visited, .dimmed_text, .dimmed_text a, .dimmed_text a:link, .dimmed_text a:visited, .usersuspended, .usersuspended a, .usersuspended a:link, .usersuspended a:visited, .dimmed_category, .dimmed_category a, .tag_feed .media .muted a, #page-admin-qtypes .disabled, #page-admin-qbehaviours .disabled, #page-admin-plugins #plugins-control-panel .pluginname .componentname, #page-admin-plugins #plugins-control-panel .version .versionnumber, #page-admin-plugins #plugins-control-panel .notes .requiredby, #plugins-check-page .page-description, #plugins-check-page #plugins-check .requires-ok, #plugins-check-page #plugins-check .displayname .plugindir, #plugins-check-page #plugins-check-available-dependencies .displayname .component, #page-admin-search .adminpagepath li, .block .minicalendar td.weekend, .fitem.disabled .fp-btn-choose, .form-defaultinfo, .form-label .form-shortname, .formsettingheading .form-horizontal, .no-felement.fstatic, .path-backup .backup_progress .backup_stage {
	color: #FFD700 !important;
		
	}
	/* log in search bar fade in color */
	.btn-secondary:is(:hover, :focus), .btn-light:is(:hover, :focus), .custom-select:is(:hover, :focus), .btn-outline-secondary:is(:hover, :focus){
	background-color: rgb(77, 8, 150) !important;
	cursor: pointer;
	box-shadow: none !important;
}
		
		
}

Reviews

No reviews yet.