A Userstyle for LSU Moodle's website, since none existed previously. made with the intention of being easier on the eyes.
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
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;
}
}