/* ==UserStyle==
@name eLearning@UA - QoL fixes & other random things
@namespace USO Archive
@author nightershadow
@description `As the name implies, changes that will make using eLearning easier, along with some random things I think of along the way.Most notable changes are improved layouts as well as links more distinguishable from text.Made with some free time™ by a former LEI student.[2019-11-18 NOTE: Screenshots will be updated whenever 2 breakpoints are done properly... Which due to time constraints + hacks needed, might not be this year]`
@version 20191118.5.8
@license CC-BY-NC-SA-4.0
@preprocessor uso
==/UserStyle== */
@-moz-document domain("elearning.ua.pt") {
:root {
--navbar-font-size: 12px;
--navbar-padding-right: calc(var(--navbar-font-size) * 1.2);
--navbar-padding-top: calc(var(--navbar-font-size) * 0.4);
--navbar-padding-dropdown: calc(var(--navbar-padding-right) * 1.6);
--navbar-padding: var(--navbar-padding-top) var(--navbar-padding-right);
--buttons-radius: 8px;
--main-color: #A5CA56;
--darker-color: #729723;
--default-title-color: #333;
--container-spacing: 1.25rem;
}
/* Media Queries for fixing stuff that was broken by the custom classes and/or changing size of the page*/
@media only screen and (max-width:576px),
only screen and (max-width: 768px) {
#page.container-fluid > .container,
#main-navbar > .container {
width: 95%;
}
}
@media only screen and (min-width: 768px) {
#page.container-fluid > .container,
#main-navbar > .container {
width: 90%;
}
}
@media only screen and (min-width: 992px) {
:root {
--navbar-padding-right: calc(var(--navbar-font-size) * 0.7);
--navbar-padding-top: calc(var(--navbar-font-size) * 0.2);
--navbar-padding-dropdown: calc(var(--navbar-padding-right) * 2);
}
#page.container-fluid > .container,
#main-navbar > .container {
width: 85%;
}
.course-info-container {
padding-bottom: 1.5rem;
}
.media {
flex: 1 1 auto;
display: flex;
}
.media-object,
.media > .pull-left,
.media-heading {
display: inline-block;
}
.media > .pull-left {
float: none;
}
.media-body {
height: 6rem;
}
}
@media only screen and (min-width: 1200px) {
:root {
--navbar-font-size: 1rem;
}
#page.container-fluid > .container,
#main-navbar > .container {
width: 85%;
}
.course-info-container {
padding-bottom: 0rem;
}
.media-body {
height: 0rem;
}
}
/* reset fix */
.m-t-2 {
margin-top: 0px !important;
}
.media,
.media-body {
overflow: visible;
}
/* New Event Modal */
.fcontainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.fitem {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1 1;
flex: 1 1;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.fitem fieldset {
width: auto;
}
.fitemtitle {
-webkit-box-flex: 0;
-ms-flex: 0 180px;
flex: 0 180px;
-ms-flex-item-align: start;
align-self: flex-start;
}
/* Proper Reset */
.mform .fitem .felement {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-ms-flex-item-align: end;
align-self: flex-end;
margin-left: 10px;
width: auto;
}
/* Removing unnecessary margin from icons */
.icon {
margin-right: 0;
}
img.icon,
#adaptable-page-header-wrapper #main-navbar .nav-item i,
#adaptable-page-header-wrapper #main-navbar a.dropdown-item img.icon {
padding-right: 0px;
margin-right: 4px;
}
/* Dropdown Fixes */
.dropdown-menu,
.dropdown-menu * {
box-sizing: border-box;
}
.dropdown-menu {
padding: 0px;
min-width: 100%;
}
.dropdown-menu {
border-radius: 0px 0px 10px 10px;
}
.dropdown-menu > li:last-child > a:hover {
border-radius: 0px 0px 10px 10px;
}
li.dropdown > ul.dropdown-menu > li > a {
border: none !important;
color: rgb(54, 91, 26) !important;
padding: 4px 10px 6px 10px;
}
/*
Still using fontawesome's icon, because it's just more visible than Bootstrap's
(+ no conflict with alignment)
*/
#adaptable-page-header-wrapper #main-navbar .dropdown-toggle:after,
#adaptable-page-header-wrapper #nav-drawer .dropdown-toggle:after,
#adaptable-page-header-wrapper #main-navbar .action-menu .dropdown-toggle:after {
/* ,  , arrow character*/
font-family: 'FontAwesome';
content: "\00a0\00a0 \f107";
vertical-align: 0;
margin-left: 0;
border: 0;
}
/* (#region-main-settings-menu)
Bringing some fixes to the cog
Taking out the needless margin...
*/
.context-header-settings-menu,
.region-main-settings-menu,
#region-main-settings-menu > div,
#region-main-settings-menu {
position: static;
float: none;
right: 0;
}
#region-main-settings-menu,
.region-main-settings-menu {
padding: var(--navbar-padding-top) var(--navbar-padding-right);
margin-top: 8px;
}
/*
Not sure why they used the navbar-nav to apply the settings, but must have
been for some valid reason...
Instead, we're forced to use these
*/
#adaptable-page-header-wrapper #main-navbar .action-menu .dropdown-toggle:after {
position: relative;
top: -10px;
}
/*
Unecessarily lengthy rule...
Not sure why add a rule over 2 IDs....
Resetting the padding on the last child in the navbar, because it'd look weird
having text cut out.
TODO: Maybe replace the last-child fix with a centering of the text
Resetting the paddings to the defaults
*/
#adaptable-page-header-wrapper #main-navbar .navbar-nav > li > a,
#adaptable-page-header-wrapper #main-navbar .navbar .navbar-nav > li:last-child a {
font-size: var(--navbar-font-size);
padding: var(--navbar-padding);
}
/*
Except for dropdowns, which we need to increase a tiny little bit on the padding right
*/
#adaptable-page-header-wrapper #main-navbar .navbar-nav > li.dropdown > a,
#adaptable-page-header-wrapper #main-navbar .navbar .navbar-nav > li.dropdown:last-child a {
padding-right: var(--navbar-padding-dropdown);
}
.block .header {
border: none;
}
/** Forum Fixes ( see element tr.discussion ) **/
/* Removing border-radius from forum-discussion's menus */
tr.discussion .dropdown-menu {
border-radius: 0;
}
/* Fixed Author's image not being centered */
td.author > div,
td.author ~ td.text-left > div {
align-items: center;
}
#intro.generalbox {
margin-right: 0;
margin-left: 0;
width: 100%;
font-size: larger;
}
/* Breadcrumb Fixes (#page-navbar)
Peculiar fix... Breadcrumb navbar needs no padding on the left, and same padding on the right to match alignment with both sidebar + main content, since they're not bound
by the `.col-*` classes
*/
#page-navbar {
padding-left: 0;
padding-right: var(--container-spacing);
}
/* (.breadcrumb)
And in order to restore (what I'd guess) proper intention,
breadcrumb needs to have the same padding-left... this is weird
Restoring original breadcrumb padding */
.breadcrumb {
padding: .25rem 0 .25rem var(--container-spacing);
border-radius: 4px;
border: 1px #e3e3e3 solid;
}
/* (#page-content)
Since both #region-main and #block-region-side-post
need 1.25rem to stay align, moving them upwards in the markup
to avoid having 2 rules that do the same
*/
#page-content {
margin-top: var(--container-spacing);
}
/** MainContent + Sidebar Fixes ( #region-main, #block-region-side-post ) **/
/*
#region-main - Fixing display on dashboard to make it consistent with UC's view...
- Replacing top-padding with margin, to make it semantically relevant, moved to #page-content
#block-region-side-post - Fixing alignment with #region-main
- Margin for semantic vertical alignment, moved to #page-content
- Padding for centering
*/
#block-region-side-post,
.pagelayout-mydashboard #region-main,
#region-main {
padding: 0px var(--container-spacing);
margin-top: 0;
}
#block-region-side-post,
#block-region-content .header {
border: 1px #e3e3e3 solid;
border-radius: 4px;
}
/* Replacing margin with padding */
.block .calendar_filters li {
margin-bottom: 0px;
padding: .2em;
}
/* Unnecessary margin since now padding exists*/
#block-region-side-post .block {
margin-bottom: 0px;
}
.block.block_fake > .content {
padding: 0px;
padding-left: 6px;
}
.block.block...
