Recoloring and various interface adjustments for MUICT My Courses & E-Learning (using Stylish to apply)

NewMoodle-MyCourses-Advanced.css

/* Advanced Adjustments */

/* Star background + Transparent UI */

#page, #nav-drawer {
    background-image: url("https://i.ytimg.com/vi/EZ7la-hMNuk/maxresdefault.jpg");
}
body, #page {
	background-color: rgba(0,0,0,0) !important;   
}

.card, .list-group {
	background-color: rgba(250,250,250,0.16) !important;   
}

.modal-content .list-group, .modal-content .list-group-item {
 	background-color: inherit !important;   
}

.list-group-item-action:focus, .list-group-item-action {
    background-color: rgba(250,250,250,0.16) !important;
    color: #999 !important;
}

/* Thinner dashboard header */

#page-header .card-block {
	padding: 10px 15px 10px 15px;
}
#page-header form {
	margin-bottom: 0 !important;   
}
.page-context-header .page-header-headings {
    padding-top: 10px;
}
.page-context-header .page-header-image {
	margin-right: 0 !important;
    margin-bottom: 0 !important;
}
.page-header-image img {
    width: auto !important;
    height: 50px !important; /* Height will be based on the profile image */
}

/* Wider right pane */

#region-main-settings-menu.has-blocks, #region-main.has-blocks {
    width: calc(100% - 350px) !important;
}
[data-region="blocks-column"] {
 	width: 320px !important;   
}

/* Minimalistic Upcoming Events */

.block_news_items .date, .block_news_items .name {
    resize: both;
    margin: 0px 5px 0px 0px;
    display: inline-block;
}

/* Event popup over mini calendar shows at left */

.yui3-overlay-content.yui3-widget-stdmod {
    width: auto !important;
    margin-left: 0px !important;
    margin-top: 180px !important;
}

/* Smaller course names + spacing (Course Overview) */

.block_course_overview .content h2.title {
	font-size: 18px;
    margin: 0 0 0.2em 0;
}
.path-my .coursebox {
    margin: 0;
    padding: 5px !important;
}

NewMoodle-MyCourses.css

.page-header-image img {
    display: inline-block !important; /* Show hidden profie image in dashboard heading */
}

#site-news-forum .posting img {
    margin: auto; /* No oversized images on announcement posts */
    max-width: 50% !important;
}

/* Better MUICT logo */

img[alt="My Courses"] {
	opacity: 1 !important;
    content: url("https://www.ict.mahidol.ac.th/en/wp-content/uploads/2017/11/site-logo.png");
}
header .logo img {
    margin-top: -20px;
    margin-right: 5px;
    width: 150px !important;
    height: auto !important;
    max-height: 60px !important;
}

/* General Start */

/* Link colors */

a {
    color: #77c !important;
}
a:focus,
a:hover {
    color: #77e !important;
}

/* Color of "My Courses" text */

.site-name {
    color: #999 !important;
}

/* Color of navigation bar */

.navbar-light {
    background-color: #222222 !important;
    border-color: #080808;
}

/* Color of page items */

.page-link {
    color: #08b;
    background-color: #ddd;
}
.page-item.active .page-link,
.page-item.active .page-link:focus,
.page-item.active .page-link:hover {
    color: #ccc;
    background-color: #08b;
}

/* Color of modals */

.modal-content,
.moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
    background-color: #666;
}

/* Color of card headers */

.card-header {
    background-color: rgba(0, 0, 0, 0);
}

/* Color of tables */

td,
th {
    color: #888 !important;
    background-color: #333;
}
td:hover,
tr:hover,
th:hover {
    background-color: #444;
}

/* Color of buttons */

button {
    color: #888;
    background-color: #555;
}

/* Color of text input entries */

input[type='text'],
.form-control,
.form-control-danger,
.form-control:focus,
textarea {
    color: #888;
    background-color: #555 !important;
}

/* Color of WYSIWYG editor toolbar */

div.editor_atto_toolbar,
div.editor_atto_toolbar div.atto_group {
    background-color: #555;
    background: #555;
}
div.editor_atto_toolbar button {
    background-color: #444;
}
div.editor_atto_toolbar button[disabled] {
    background-color: #222;
}

/* Color of radio buttons */

input[type='radio'] {
    background-color: #555;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    outline: none;
    border: 3px solid gray;
}
input[type='radio']:before {
    content: '';
    display: block;
    margin: 20% auto;
    border-radius: 50%;
}
input[type="radio"]:checked:before {
    background: #ccc;
}
input[type="radio"]:checked {
    border-color: #55a;
}

/* Color of filename labels */

.fp-iconview .fp-filename-field .fp-filename {
    background-color: inherit;
}

/* Color of cards + Rounded */

.card,
#page-enrol-users #filterform,
.path-calendar .maincalendar .calendar-event-panel,
.block .calendar-event-panel .yui3-overlay-content,
.que .history,
.userprofile .profile_tree section,
.groupinfobox,
.forumpost,
.yui-skin-sam .yui-layout.path-mod-chat-gui_ajax .yui-layout-unit-right,
.yui-skin-sam .yui-layout.path-mod-chat-gui_ajax .yui-layout-unit-bottom,
.yui-skin-sam .yui-layout.path-mod-chat-gui_ajax #chat-messages .chat-message.course-theme,
.well {
    color: #888;
    background-color: #222 !important;
    border-radius: 8px !important;
}

/* General fixup */

.region_main_settings_menu_proxy {
    background-color: rgba(0, 0, 0, 0);
}
.path-grade-report-user .user-grade.generaltable .levelodd {
    background-color: #333;
}
.generaltable tbody tr:nth-of-type(odd) {
    background-color: inherit;
}
.nav-tabs .nav-link.active,
.nav-link.active:hover {
    background-color: #aaa !important;
}

#page-wrapper::after {
	display: none !important;
}

/* Color of dropdown menus */

.dropdown-menu {
    background-color: #444 !important;
}
.dropdown-menu a,
.path-mod-forum .activesetting,
.path-mod-forum .subscriptionmode {
    color: #aaa !important;
}

/* Color of primary buttons */

.btn-primary,
.btn-primary:hover {
    color: #aaa;
    background-color: #07a;
    border-color: #07a;
}

/* Color of select menu */

.custom-select {
    color: #888 !important;
    background-color: #555 !important;
}

/* Span color on cards, discarding its background color */

.card span {
    background-color: inherit !important;
}

/* Colors of left menu */

.list-group-item-action:focus,
.list-group-item-action {
    background-color: #444 !important;
    color: #999;
}

/* Text color of left menu */

.list-group-item-action:hover {
    color: #777;
}

/* Body background color */

body,
#nav-drawer,
#page {
    background-color: #666;
}

/* Button background color */

.btn-secondary,
.btn-default {
    background-color: #888 !important;
}

/* Even course box color (dark) */

.courses .coursebox.even {
    background-color: #222;
}
/* Even course box highlight color */

.courses .coursebox.even:hover {
    background-color: #333;
}
/* Course box highlight color */

.courses .coursebox:hover {
    background-color: #333
}

/* Even column background color of (notification) preferences */

.preferences-container .preference-table tr th:nth-child(even),
.preferences-container .preference-table tr td:nth-child(even) {
    background-color: #333;
}
/* Darker danger table type color */

.table-danger,
.table-danger>th,
.table-danger>td {
    background-color: #922 !important;
}
/* Darker success table type color */

.table-success,
.table-success>th,
.table-success>td {
    color: #bbb !important;
    background-color: #292 !important;
}

/* General Stop */

/* Chat Start */

.popover-region-messages .content-item {
    height: auto; /* Normalize height of popover chat entry */
}

/* Chat background color */

div.messaging-area-container {
    background-color: #444;
}
/* Chat message background color */

.messaging-area-container .messaging-area .messages-area .messages .message .content {
    background-color: #444;
    border: 1px solid #666;
}
/* Bottom border color of chat header */

.messaging-area-container .messaging-area .messages-area .messages-header {
    border-bottom: 1px solid #777;
}
/* Background color of outer chat search entry */

.messaging-area-container .messaging-area .contacts-area .searchtextarea,
.messaging-area-container .messaging-area .contacts-area .searchtextarea.searching,
.messaging-area-container .messaging-area .contacts-area .tabs .tab {
    background-color: #555;
}
/* General colors of chat box */

.messaging-area-container .messaging-area .messages-area .response .message-box .message-text-container textarea,
.messaging-area-container .messaging-area .messages-area .response.messaging .message-box .message-text-container textarea {
    background-color: #333;
    color: #aaa;
}
.messaging-area-container .messaging-area .messages-area .response,
.messaging-area-container .messaging-area .messages-area .response.messaging {
    background-color: #444;
}
/* Background color of inner search entry */

.messaging-area-container .messaging-area .contacts-area .searchtextarea input,
.messaging-area-container .messaging-area .contacts-area .searchtextarea.searching input {
    background-color: #444 !important;
}
/* General colors of pop-over chat */

div.popover-region-content-container {
    background-color: #444;
    color: #888;
}
/* Pop-over chat header and footer color */

div.popover-region-footer-container,
.popover-region-header-container {
    background-color: #333;
}
/* Color of "New message" and "See all" texts on pop-over chat */

div.popover-region-seeall-text,
.popover-region-header-container a {
    color: #eee;
}
/* Darker "Online" text color */

.messaging-area-container .status .online-text {
    color: #383;
}

/* Chat Stop */

/* Calendar Start */

td[data-core_calendar-title*="Today "] a,
.today a,
td.today {
    font-weight: bold; /* Highlight current date */
    color: red !important;
}

/* Color of calendar event boxes */

.calendar_event_course {
    background-color: #da8;
    border-color: #eb9;
}
.calendar_event_group {
    background-color: #dc8;
    border-color: #ed9;
}

/* Font size of events */

.events-new {
    font-size: 0.8em;
}

/* Better location of calendar pop-up */

.yui3-overlay-content.yui3-widget-stdmod {
    margin-left: -200px !important;
    width: 150px !important;
    position: absolute !important;
}
.comment-area {
    max-width: 100% !important;
}

/* Better calendar spacing */

.path-calendar .maincalendar .calendarmonth ul li {
	margin-top: 0 !important;   
}

.path-calendar .maincalendar .calendartable li {
	padding-left: 4px !important;   
}

.calendartable ul {
	padding-left: 0.1rem !important;   
}

/* Calendar Stop */

/* Scroll Bar Start */

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px;
    /* remove scrollbar space */
    
    background: transparent;
    /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */

::-webkit-scrollbar-thumb {
    background: #FF0000;
}

/* Scroll Bar Stop */

OldMoodle-PageResize.css

body {
    width: 75%; /* content is 75% width of that of browser */
    min-width: 800px; /* for good */
    margin: auto;
}
#page,
#content,
#header-home,
#footer,
#layout-table,
.navbar,
.menubar,
.wrapper,
.searchbox,
.FrontSlideshow,
#slideshow,
#slideshow > div {
    width: 100% !important;
}
.navbar {
    padding-left: 0px;
    padding-right: 0px;
}
.navbar .breadcrumb {
    padding-left: 0.4em;   
}
.navbar .navbutton {
    padding-right: 0.4em;   
}
#page {
    margin: auto;
    display: block;
}
#footer,
#header-home {
    background-repeat: no-repeat !important;
    background-size: 100% !important;
}
#slideshow > div > img {
    background-size: 100% !important;
    width: 100% !important;
}
#layout-table #right-column {
    padding-right: 0px;
}
.sideblock .content {
    padding: 0px;
    margin: 2px;
}
#left-column .sideblock, #right-column .sideblock {
    width: 100%;   
}

OldMoodle.css

/* the following CSS hooks normalize images in forum posts */
tr .forumpost .content img {
    max-width: 100%;
}
#layout-table #middle-column>div {
    word-break: break-word;
}

/* glow effect and round display for user avatar */
.userpicture,
.defaultuserpic {
    border-radius: 50%;
    box-shadow: 0 0 1.5vh green;
}

/* blocks shadow effect in block users list */
.listentry .userpicture {
    box-shadow: none;
}

/* background color of our lovely website */
#content,
#page,
#layout-table #left-column,
#layout-table #middle-column,
#layout-table #right-column,
.forumpost .content,
.sideblock .content,
.navbar {
    background-color: #eeffdd; /* default: cream, #ffffcc */
}

/* border color for all */
.forumheaderlist,
.forumpost,
table.minicalendar,
#course-view .section td {
    border-color: green; /* default: light gray, #DDDDDD */
    /* border-style: none; */ /* uncomment if you don't like borders */
}

/* post's header color */
.forumpost .starter {
    background-color: rgba(160, 210, 150, 0.7);
}

/* post's left sidebar color */
.forumpost .left {
    background-color: rgba(170, 210, 170, 0.7);
}

/* color for most links in our website (default: orange) */
a,
a:link,
a:visited {
    color: green; /* default:*#F57110 */
}

/* header/footer bars (default: dark orange) */
.menubar, #footer {
    border-top-color: green; /* default: dark orange, #F57110 */
}

#header-home {
    border-bottom-color: green; /* default: #F57110 */
}

/* emphasize the deadline of events */
.event .date {
    font-weight: bold;
}

/* fix oversize table if placed at middle column, also maximizes when appropriate */
#layout-table {
    table-layout: fixed;
    width: 100%;
}
td#right-column>div>div {
    max-width: 100%;
}
table.topics {
    max-width: 100%;
}
.summary table {
    width: 100%;
}

/* general tune-up */
.tabtree {
    font-weight: bold;
}
.userpicture, .picture user, .picture teacher {
    width: 35px;
    height: 35px;
}
.pix img {
    width: 20px;
    height: 20px;
    margin: 0.5em;
}
.coursesearchbox {
    margin: 1em;
}
.indentation {
    width: 6vw;
}
.headingblock {
    display: none;
}
#middle-column>div>.categorybox {
    display: none;
}
#coursesearch {
    display: none;
}
.forumheaderlist th {
    padding: 5px;
}
.forumheaderlist td {
    padding-left: 6px;
    padding-right: 6px;
}
.today {
    border-radius: 6px;
}
.event_course {
    border-radius: 6px;
    padding: 2px;
    margin: 2px;
}
.block_online_users .content,
.block_calendar_month .content,
.block_course_list .content {
    width: 100%;
}
.groupselector,
.reportlink {
    padding: 10px;
    font-weight: bold;
}
.user-grade td,
.user-grade th {
    padding: 3px;
}

/* menu bar's boring orange? */
.menubar {
    -webkit-filter: grayscale(1);
}