binusmaya.binus.ac.id by manu-febie

/* ==UserStyle==
@name         binusmaya.binus.ac.id
@version      20210819.12.29
@namespace    userstyles.world/user/manu-febie
@description  A Gruvbox dark colorscheme inspired theme for Binus Maya, the learning management system for Bina Nusantara University.
@author       manu-febie
@license      No License
==/UserStyle== */

@-moz-document domain("binusmaya.binus.ac.id") {
@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&family=JetBrains+Mono:wght@300&display=swap');
@import url('https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css');

:root {
	--primary-bg-color: #282828;
	--primary-color: #ebdbb2;
	--secondary-color: #83a598;
	--ternary-color: #d79921;
}

* {
	box-sizing: border-box;
}

body {
	background-color: var(--primary-bg-color) !important;
	color: var(--primary-color) !important;
	font-family: 'JetBrains Mono', monospace;	
	font-size: 16px;
	letter-spacing: .1rem;
}

a {
	color: var(--secondary-color);
	border: none !important;
}

ul {
	list-style: none;
}

/** HEADINGS **/

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--secondary-color);
}

#binusmayaheadertitle {
	display: none !important;
}



/*** USER PROFILE ***/

.user-profile, .header {
	border: none !important;
}

.user-profile .header .top-navigation .navigation .menu > li > a,
.header .top-navigation .navigation .menu > li > span.wrapper {
	border: none !important;
}

.header .top-navigation .navigation .menu > li.current {
	background-color: var(--primary-bg-color) !important;
	border-top-color: var(--primary-bg-color) !important;
	border: none !important;
}

.header .top-navigation .navigation .menu .sub-menu {
	border: none !important;
	box-shadow: 0px 1px 5px rgba(0,0,0,0.4) !important;
}

/** notification **/

.header .top-navigation .expand-notification .sub-menu li.sub-title {
	background-color: var(--primary-bg-color);
	border-bottom: none !important;
	padding: 2rem 0 !important;
	text-align: center !important;
	color: var(--secondary-color) !important;
	font-size: 1.2rem;
}

.header .top-navigation .expand-notification .sub-menu li.view-all a {
	background-color: var(--primary-bg-color) !important;
	color: var(--ternary-color) !important;
}

.header .top-navigation .expand-notification .sub-menu li.list-notification {
	background-color: var(--primary-bg-color) !important;
}

.header .top-navigation .expand-notification .sub-menu li.list-notification .notification {
	border: none !important;
}

.header .top-navigation .expand-notification .sub-menu li.list-notification .notification .thumbnail {
	background-color: var(--primary-bg-color) !important;
}

.icon-widget-message {
	color: var(--secondary-color) !important;
	width: 20px !important;
	height: 21px !important;
}

.header .top-navigation .expand-notification .sub-menu li.list-notification .notification .details .description {
	color: var(--secondary-color) !important;
}

.header .top-navigation .expand-notification .sub-menu li.list-notification .notification .details .date {
	color: var(--primary-color) !important;
}


/** PROFILE **/

.header .top-navigation .expand-settings .sub-menu li.sub-title {
	background-color: var(--primary-bg-color) !important;
	border: none !important;
}

.header .top-navigation .expand-settings .sub-menu li.setting-content {
	background-color: var(--primary-bg-color) !important;
}

.header .top-navigation .expand-settings .sub-menu li.logout {
	background-color: var(--ternary-color) !important;
}

.header .top-navigation .expand-settings .sub-menu li.setting-content .details .link a {
	color: var(--secondary-color) !important;
	text-decoration: none !important;
}

.header .top-navigation .expand-settings .sub-menu li.setting-content .details .link {
	margin-bottom: .5em
}

.student-name {
	text-transform: capitalize !important;
	color: var(--secondary-color) !important;
}

.position {
	margin-top: 1rem !important;
	font-family: 'Gloria Hallelujah', cursive;

}

.field.with-divider {
	display: none !important;
}

.action #opennoble {
	display: none !important;
}


/** TOP NAVBAR **/

.navbar {
	background-color: var(--primary-bg-color);
	box-shadow: none;
}

.header .top-navigation .navigation.fixed-layout {
	background: var(--primary-bg-color) !important;
	box-shadow: 0px 1px 5px rgba(0,0,0,0.4) !important;
	padding: 1.5rem !important;
}

.header .top-navigation .navigation.fixed-layout .logo-nav {
	display: none !important;
}

.banner {
	display: none !important;
}

.logo {
	text-align: left !important;
}

.header .top-navigation .navigation .menu > li.expand-menu.current > a, .header .top-navigation .navigation .menu > li.expand-menu.current > span.wrapper {
	background-color: var(--primary-bg-color) !important;
	overflow: hidden;
}

.header .top-navigation .expand-menu .expand-menu-container {
	background-color: var(--primary-bg-color) !important;
	overflow: hidden;
}

.header .top-navigation .expand-menu .sub-menu li a {
	color: var(--secondary-color) !important;
	border: none !important;
}

.header .top-navigation .navigation .menu > li.expand-menu.current .expand-menu-container > .sub-menu {
	background-color: var(--primary-bg-color) !important;
}


/** SECTION USER ROLE **/

#user-role, .user-role {
	display: none;
}



/*** DASHBOARD NAV ***/

.body-navigation.on-pre-content {
	background: transparent !important;
	border: none;
}

.body-navigation .nav-head {
	border: none !important;
}



.body-navigation .nav-head ul li a {
	border: none !important;
	color: var(--secondary-color) !important;
	text-transform: lowercase !important;
	font-size: 1.2rem !important;
}



/** DASHBOARD CONTENT **/

.main-content {
	background-color: var(--primary-bg-color) !important;
	color: var(--primary-color) !important;
}


/*** WIDGETS ***/

#main-content.has-widget, .widget-parent .widget {
	background-color: var(--primary-bg-color) !important;
}

.widget {
	border: none !important;
	border-radius: 10px !important;
	box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.4) !important;
	padding-top: 2em !important;
}

.widget-parent .widget .widget-head {
	border-bottom: none !important;
}

.widget-parent .widget .widget-head .head-wrap .icon {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--secondary-color) !important;
	border-right: none !important;
}

.head-wrap .label .title {
	font-size: 1.8rem !important;
	color: var(--secondary-color) !important;
	margin-bottom: 1.5rem !important;
}

a.title {
	text-transform: lowercase !important;
	margin-left: 1rem !important;
	font-size: 1.1rem;
}

a.title:hover {
	color: var(--ternary-color) !important;
}

a.title::before {
	content: '> '
}

/** NEWSTREAMDATA **/

.widget .widget-news .news-item:first-child {
	border: none !important;
}

#main-content.has-widget .widget-parent .widget .widget-footer {
	background-color: var(--primary-bg-color) !important;
}

/** COURSE CREDIT **/

.widget .widget-course-credit .course-credit-title {
	text-align: center !important;
	color: var(--secondary-color) !important;
}

.group-item {
	display: flex !important;
	flex-wrap: wrap !important;
	height: 100% !important;
	align-items: center !important;
}

.widget .widget-course-credit .course-credit-table .item {
	text-align: left !important;
}


.widget .widget-course-credit .course-credit-description {
	display: none !important;
}

.widget .widget-course-credit .course-credit-table .course-credit-value {
	font-size: 2rem;
}

/*** Don't display footer of to do list widget ***/
#main-content.has-widget .widget-parent .widget .widget-footer {
	display: none !important;
}

.button.button-primary {
	background: var(--secondary-color) !important;
	color: var(--primary-bg-color) !important;
}

/**
** FOOTER
**/

.footer {
	background-color: var(--primary-bg-color) !important;
}

.footer .footer-widget .group-item {
	display: flex !important;
	justify-content: space-evenly;
}

.footer .footer-title .title {
	color: var(--secondary-color) !important;
	font-size: 1.5rem;
}

.footer .footer-widget .group-item .item {
	border-left: none !important;
}

.footer.new-layout .corporate-area {
	display: none !important;
}


/****************************************************
	COURSES
*****************************************************/

.page-information {
	background-color: var(--primary-bg-color) !important;
	text-align: justify !important;
	font-size: 1rem;
}

.page-information .information .page-title {
	color: var(--secondary-color) !important;
}

.page-information .container .description p {
	color: var(--primary-color) !important;
}

.page-information .details .subtitle {
	color: var(--secondary-color) !important;
}

.page-information .details .single-content {
	color: var(--primary-color) !important;
}

.agenda-navigation {
	background-color: transparent !important;
	border: none !important;
}

.agenda-navigation .heading .label {
	color: var(--secondary-color) !important;
}

.body-navigation .nav-head {
	border-bottom: none !important;
}

#main-content.has-widget .box-container {
	background-color: var(--primary-bg-color) !important;
}


#main-content.has-widget .box-container {
	background-color: transparent !important;
	border: none !important;
	border-radius: 10px !important;
	box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.4) !important;
}

#page .page-sub-heading {
	border-bottom: none !important;
}

#page .page-sub-heading h2 {
	color: var(--secondary-color) !important;
}

table thead tr th {
	color:var(--secondary-color) !important;
	text-align: left !important;
}

table tbody tr td {
	background-color: var(--primary-bg-color) !importa...