Select Git revision
-
Stuart Gathman authoredStuart Gathman authored
post.scss 27.47 KiB
/* stylelint-disable declaration-no-important */
/* stylelint-disable max-line-length */
/*------------------------------------
Login page
-------------------------------------*/
body.loginbackgroundimage {
background-size: cover;
background-position: center;
background-repeat: repeat-x;
}
/* Add media breakpoint to only load images on screens with a medium size and up.
* Check if variable exists to only add code to images that were uploaded.
* Note: Building this code with a @for loop did not work. */
@include media-breakpoint-up(md) {
@if variable-exists(loginbackgroundimage1) {
body.loginbackgroundimage1 {
background-image: url($loginbackgroundimage1);
}
}
@if variable-exists(loginbackgroundimage2) {
body.loginbackgroundimage2 {
background-image: url($loginbackgroundimage2);
}
}
@if variable-exists(loginbackgroundimage3) {
body.loginbackgroundimage3 {
background-image: url($loginbackgroundimage3);
}
}
@if variable-exists(loginbackgroundimage4) {
body.loginbackgroundimage4 {
background-image: url($loginbackgroundimage4);
}
}
@if variable-exists(loginbackgroundimage5) {
body.loginbackgroundimage5 {
background-image: url($loginbackgroundimage5);
}
}
@if variable-exists(loginbackgroundimage6) {
body.loginbackgroundimage6 {
background-image: url($loginbackgroundimage6);
}
}
@if variable-exists(loginbackgroundimage7) {
body.loginbackgroundimage7 {
background-image: url($loginbackgroundimage7);
}
}
@if variable-exists(loginbackgroundimage8) {
body.loginbackgroundimage8 {
background-image: url($loginbackgroundimage8);
}
}
@if variable-exists(loginbackgroundimage9) {
body.loginbackgroundimage9 {
background-image: url($loginbackgroundimage9);
}
}
@if variable-exists(loginbackgroundimage10) {
body.loginbackgroundimage10 {
background-image: url($loginbackgroundimage10);
}
}
}
/* This will only be needed if the setting "loginform" is checked */@if variable-exists(loginform) {
@if $loginform == 'yes' {
/* Make background of login panel slightly transparent */
#page-login-index #region-main-box {
div.card {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 3px;
}
}
#page-login-index #page {
margin-top: 0;
}
}
}
/*------------------------------------
Page header
-------------------------------------*/
/*
* Navbar
*/
/* Make page navbar dark if setting "darknavabr" is set to yes. */
@if variable-exists(darknavbar) {
@if $darknavbar == 'yes' {
header.navbar {
background-color: $gray-dark;
.navbar-nav .nav-link .icon,
.navbar-nav .nav-link,
.usertext,
.dropdown-toggle,
.site-name,
.login,
.login a {
color: #fff;
}
.navbar-nav .nav-link .icon:hover,
.usertext:hover,
.dropdown-toggle:hover,
.site-name:hover {
color: $brand-primary;
}
.navbar-brand:not(.has-logo) .site-name:hover {
color: #fff;
}
}
}
}
/*------------------------------------
User menu
-------------------------------------*/
/* Don't display switched role information in the user menu
* if setting 'showswitchedroleincourse' is active */
@if variable-exists(showswitchedroleincourse) {
@if $showswitchedroleincourse == 'yes' {
.userswitchedrole .usermenu {
.usertext {
float: inherit;
text-align: inherit;
margin-right: inherit;
height: inherit;
}
span.meta.role {
display: none;
}
.avatar img { margin-left: 1rem;
margin-right: .5rem;
}
}
}
}
/*------------------------------------
Nav drawer menu
-------------------------------------*/
/*
* We separate or junk sections together by dividing
* them either by a solid or a dotted line. For the course
* sections, we display no borders to make clear they are a
* separate unit.
*/
#nav-drawer {
/* Remove border radius from the menu items. */
.list-group-item {
border-radius: 0;
}
/* Reduce space between pix icons and text as this is too much. */
.media-left {
padding-right: 2px;
}
/*
* General left menu.
*/
/* Course home menu. */
.list-group-item[data-key="coursehome"] {
padding: .75rem 1.25rem;
/* As this node is a heading node, no icon is needed and the media span can be hidden. */
.media-left {
display: none;
}
}
/* Menu item: my courses. */
.list-group-item[data-key="mycourses"] {
margin-top: 15px;
/* As this node is a heading node, no icon is needed and the media span can be hidden. */
.media-left {
display: none;
}
}
/* Remove border of child nodes which should appear as one block. */
.list-group-item[data-parent-key="mycourses"],
.list-group-item[href*="#section-"]:not([href*="#section-0"]) {
border-top: none;
}
/* If the setting navdrawerfullwidth is enabled, we want the nav drawer menu to be displayed full size on small screens. */
@if variable-exists(nawdrawerfullwidth) {
@if $nawdrawerfullwidth == 'yes' {
@include media-breakpoint-down(sm) {
#nav-drawer {
width: 100%;
}
#nav-drawer.closed {
left: -100%;
}
}
}
}}
/*------------------------------------
Course header
-------------------------------------*/
/*
* If set in showswitchedroleincourse, the switched role information will be displayed
* in the course header instead of next to the user name.
*/
.switched-role-infobox span.switched-role {
font-weight: bold;
padding-left: 0.5em;
}
/* If showsettingsincourse is enabled, we have to style the cog icon a bit different. */
@if variable-exists(showsettingsincourse) {
@if $showsettingsincourse == 'yes' {
#page-navbar {
.breadcrumb-button {
margin-top: 0;
}
/* If the setting is enabled we do not need the triangle icon, because there is no menu
* popping up next to the cog icon. */
.context-header-settings-menu .dropdown-toggle::after {
display: none;
}
}
}
}
/*------------------------------------
Course content
-------------------------------------*/
/*
* Sections
*/
/* Check if setting theme_boost_campus|section0title is set.
If set, then revert the styles from .accesshide and set the style to be the same as other section titles. */
@if variable-exists(section0title) {
@if $section0title == 'yes' {
body.path-course-view #section-0 h3.accesshide {
position: inherit;
left: inherit;
font-weight: $headings-font-weight;
font-size: $h3-font-size;
}
}
}
.course-content {
/* Selectors for course format "Topics", "Weeks" and "Periods" */
ul.topics,
ul.weeks,
ul.periods {
/* We need this to prevent bullet points are cut on the left side of the course content. */
.contentwithoutlink ul li {
list-style-position: inside;
}
/* Set section dividing border-color to brand-primary. */
li.section.main {
border: none;
border-bottom: 1px solid $brand-primary;
padding-top: 3rem;
padding-bottom: 2rem; margin: 0;
}
/* Remove the border from last section in non editing mode. */
li.section.main:last-child {
border-bottom: none;
}
/* Reduce indent of hidden sections as this is not aligned with visible ones. */
li.section.main.hidden {
.section {
padding: 0;
}
.activity .activityinstance {
margin-left: 14px;
}
}
/* Change style of highlighted section to highlight more. */
li.section.main.current {
border-bottom: $brand-primary 4px solid;
border-top: $brand-primary 3px solid; /*1px less because of section dividing border. */
background: $gray-lightest;
}
/* Remove highlighting from Theme Boost. */
li.section.main.current::before {
display: none;
}
/* Section 0 needs no extra top padding. */
li#section-0 {
padding-top: 0;
}
/* Remove padding => section move button is center-aligned in front of section title and sections are aligned equal to
section elements. */
li.section .left {
padding: 0;
padding-right: 5px; /* Align section title equal to beginning of icons within section. */
}
/* Remove spacer from regular sections. */
img.icon.spacer {
display: none;
}
/* Increase space from section title (edit mode off) to left border. */
h3.sectionname {
padding-left: 15px;
padding-bottom: 10px;
}
/* Display icon of hidden activity or resource in grayscale.*/
.activity .contentwithoutlink .dimmed .activityicon,
.activity .activityinstance .dimmed .activityicon {
filter: grayscale(100%);
}
/* Add border to descripion text to differ it from module content. */
.section .contentafterlink {
border-left: 2px solid $gray-light;
padding-left: 10px;
font-size: .9rem;
}
/* Place meta information in a new line. */
.resourcelinkdetails {
display: block;
margin-left: 30px;
}
}
/* Increase padding from last section to section number control buttons. */
#changenumsections {
padding-top: 1rem;
}
/* Special styles for single section view. */
.single-section {
/* Align section title in single view left. */
h3.sectionname {
text-align: left; padding-left: 40px;
padding-top: 1.5rem;
}
/* Reduce padding top of first and only section in this view. */
ul li.section.main {
padding-top: 1rem;
}
.section-navigation .mdl-left:not(:empty),
.section-navigation .mdl-right:not(:empty) {
background-color: $brand-primary;
padding: 2px 8px;
border-radius: 2px;
a {
/*Important to prevent link color of hidden section getting gray in the button. */
color: #fff !important;
}
}
}
}
/* Special styles for the editing mode. */
.editing .course-content {
ul.topics,
ul.weeks,
ul.periods {
/* Add bottom border to last section in editing mode. */
li.section.main:last-child {
border-bottom: 1px solid $brand-primary;
}
/* Special rule for hidden sections in editing mode as indents are different in this view. */
li.section.main.hidden {
.section-handle {
padding-left: 0;
}
li.activity .mod-indent-outer {
padding-left: 1rem;
}
ul.section {
padding-left: 1rem;
}
}
}
}
/*
* Activities and resources
*/
/* Add a decent background to intro text */
#intro {
background-color: $gray-lightest;
margin-bottom: 1em;
border-left: 3px solid $brand-primary;
padding-left: 15px;
padding-right: 15px;
}
/* Do not display the intro box if it does not contain any content. */
#intro:empty {
display: none;
}
/* Adjust the activity navigation buttons to suit to the topics navigation buttons. */
#next-activity-link,
#prev-activity-link {
background-color: $brand-primary;
padding: 4px 8px;
border-radius: 2px;
color: #fff;
}
/* If showsettingsincourse is enabled */
@if variable-exists(showsettingsincourse) {
@if $showsettingsincourse == 'yes' { /* We do not show the cog icon on the participants page as the settings on this page are
* duplicated with the in-course course menu. */
.path-user #region-main-settings-menu {
display: none;
}
/* Hide the triangle down icon. */
#region-main-settings-menu .dropdown-toggle::after {
display: none;
}
}
}
/*
* Misc
* /
/* Design blockquotes. */
blockquote {
padding-left: 30px;
}
blockquote::before {
font-family: FontAwesome;
content: '\f10e';
font-size: 1.5em;
padding-right: 10px;
margin-left: -30px;
}
/*------------------------------------
Course categories
-------------------------------------*/
/* Reduce the size and the font-weight of the headings */
.course_category_tree {
h3 {
font-size: 1.45rem;
font-weight: normal;
}
h4 {
font-size: 1.2rem;
font-weight: normal;
}
}
.coursebox {
.moreinfo {
float: left;
margin-left: 21px;
// Put the further information into a new line.
clear: left;
}
.enrolmenticons {
// Align the icons in one line with the information icon.
display: inline;
padding-left: 0.75rem;
// As these icons are just for information and not clickable, make the color gray.
color: $gray-light;
}
.moreinfo a + div.enrolmenticons {
border-left: 2px solid $gray-light;
}
}
/*------------------------------------
Blocks
-------------------------------------*/
@if variable-exists(blockicon) {
@if $blockicon == 'yes' {
/* If setting blockicon is checked, add a default Font Awesome icon * before the block title. */
.block .card-block .card-title::before {
font-family: FontAwesome;
content: '\f009';
font-size: 1.3rem;
padding-right: 7px;
}
/* Provide different, suitable Font Awesome icons for different Moodle blocks. */
.block_recent_activity .card-block .card-title::before {
content: '\f017';
}
.block_calendar_month .card-block .card-title::before,
.block_calendar_upcoming .card-block .card-title::before {
content: '\f133';
}
.block_people .card-block .card-title::before {
content: '\f0c0';
}
.block_quickmail .card-block .card-title::before {
content: '\f003';
}
.block_activity_module .card-block .card-title::before {
content: '\f12e';
}
.block_news_items .card-block .card-title::before {
content: '\f0a1';
}
.block_progress .card-block .card-title::before {
content: '\f0ae';
}
.block_private_files .card-block .card-title::before {
content: '\f114';
}
.block_comments .card-block .card-title::before {
content: '\f075';
}
.block_completion_status .card-block .card-title::before {
content: '\f0e4';
}
.block_search_forums .card-block .card-title::before {
content: '\f0e6';
}
.block_admin_bookmarks .card-block .card-title::before {
content: '\f097';
}
.block_adminblock .card-block .card-title::before {
content: '\f0fe';
}
.block_attendance .card-block .card-title::before {
content: '\f046';
}
.block_sharing_cart .card-block .card-title::before {
content: '\f07a';
}
.block_glossary_random .card-block .card-title::before {
content: '\f14b';
}
.block_selfcompletion .card-block .card-title::before {
content: '\f14a';
}
.block_badges .card-block .card-title::before {
content: '\f0a3';
}
}
}
/* Rule to wrap the content within a block card. */
.block .card-text.content {
word-wrap: break-word;
}/* Rule to reset the whitespace for buttons within blocks. */
.block .btn {
white-space: normal;
}
/*------------------------------------
Profile Page
-------------------------------------*/
#page-user-profile {
/* Hide the "Edit profile" link, because we added a breadcrumb button in the page header. */
.editprofile {
display: none;
}
}
/* Hide the "Reset page to default" button in non editing mode. */
#page-user-profile .breadcrumb-button:first-of-type .singlebutton:first-of-type {
display: none;
}
/* Only show the "Reset page to default" button in editing mode. */
#page-user-profile.editing .breadcrumb-button:first-of-type .singlebutton:first-of-type {
display: initial;
}
/*------------------------------------
Page Footer
-------------------------------------*/
#page-footer {
/* Increase padding. */
padding-top: 30px !important;
/* Set footer blocks text color from white to dark gray. */
.block {
color: $gray-dark;
/* Set link and icon color from white to gray. */
a,
.icon {
color: $gray-dark;
}
/* Remove the underline decoration from footer blocks context menu items.*/
.dropdown-item.menu-action {
text-decoration: none;
}
}
/* Add bottom padding to the Moodle default footer links, reset usertour only if not empty.*/
.helplink,
.logininfo,
.homelink,
.tool_usertours-resettourcontainer:not(:empty) {
padding-bottom: 1rem;
}
/* If the setting footerhidehelplink is enabled, then hide the helplink. */
@if variable-exists(footerhidehelplink) {
@if $footerhidehelplink == 'yes' {
.helplink {
display: none;
}
}
}
/* If the setting footerhidelogininfo is enabled, then hide the logininfo. */
@if variable-exists(footerhidelogininfo) {
@if $footerhidelogininfo == 'yes' {
.logininfo {
display: none; }
}
}
/* If the setting footerhidehomelink is enabled, then hide the homelink. */
@if variable-exists(footerhidehomelink) {
@if $footerhidehomelink == 'yes' {
.homelink {
display: none;
}
}
}
/* If the setting footerhideusertourslink is enabled, then hide the link to reset the user tour. */
@if variable-exists(footerhideusertourslink) {
@if $footerhideusertourslink == 'yes' {
.tool_usertours-resettourcontainer {
display: none;
}
}
}
/* Insert some separator lines for different contents in the footer. */
.performanceinfo,
.purgecaches,
.nav.navbar-nav {
border-top: 1px solid #fff;
padding-top: 1rem;
padding-bottom: 1rem;
}
/* We need a top border only if there are footer block columns. */
@if variable-exists(footerblocks) {
@if $footerblocks != '0columns' {
.container-fluid:nth-of-type(2) > .row-fluid {
border-top: 1px solid #fff;
padding-top: 1rem;
}
}
}
/* If all Moodle links are hidden in the footer, we don't need a top line for the performance info.*/
@if variable-exists(footerhidehelplink) and variable-exists(footerhidelogininfo) and variable-exists(footerhidehomelink) {
@if $footerhidehelplink == 'yes' and $footerhidelogininfo == 'yes' and $footerhidehomelink == 'yes' {
.container-fluid:nth-of-type(2) > .row-fluid {
border-top: none;
}
}
}
}
/*------------------------------------
General improvements
-------------------------------------*/
/* Mark broken links with red color. */
a[href*="/brokenfile.php"] {
color: $brand-danger;
}
/* Add Font Awesome "broken chain" icon in front of broken link. */
a[href*="/brokenfile.php"]::before {
font-family: FontAwesome;
content: "\f127" !important;
padding-right: 10px;
}
/* Add Font Awesome "email" icon in front of mailto links. */
a[href^="mailto"]::before { font-family: FontAwesome;
content: "\f003";
padding-right: 5px;
}
/*------------------------------------
Maintenance Info
-------------------------------------*/
/* Improve the maintenance warning to be full width and to be displayed above the navdrawer navigation. */
.maintenancewarning {
z-index: $zindex-dropdown;
width: 100%;
text-align: center;
margin: 0 !important;
border-radius: 0;
border-width: 1px 0 1px 0;
bottom: 15px;
}
/*------------------------------------
Additional Regions
-------------------------------------*/
/*
* Image area.
*/
.imagearea {
text-align: center;
background-color: $gray-dark;
border-top: 1px solid #fff;
img {
/* If setting imageareaitemsmaxheight is not empty. */
@if variable-exists(imageareaitemsmaxheight) {
/* set the value. */
max-height: #{$imageareaitemsmaxheight}px;
}
width: auto;
padding-left: 1rem;
padding-right: 1rem;
}
}
/*
* Footnote.
*/
.footnote {
min-height: 40px;
color: #fff;
border-top: 1px solid #fff;
background-color: $gray-dark;
}
/*------------------------------------
Additional Elements
-------------------------------------*/
/* Back to top button */
#back-to-top {
display: none;
position: fixed;
padding: 0.5rem;
bottom: 0.5em;
right: 0.5em;
line-height: 1.7rem;
color: #fff;
background-color: $brand-primary;
border-radius: 100px;
cursor: pointer; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
}
#back-to-top::before {
vertical-align: 0.3rem;
}
/* In-course settings. */
#boost-campus-course-settings,
#boost-campus-activity-settings {
/* Initially do not display the settings. Visibility will be changed on click with incoursesettings.js. */
display: none;
padding: 1rem;
padding-top: 0;
margin-bottom: 3rem;
margin-top: 1rem;
border: none;
.nav-tabs {
border: none;
.active {
background-color: darken($body-bg, 5%);
border-color: darken($body-bg, 5%);
}
}
/* Improve color of tab content so it looks more like a real tab. */
.tab-content .card {
background-color: darken($body-bg, 5%);
border: none;
}
}
/* Setting to move 'Switch role to...' menu item to the course settings - but only if
setting showsettingsincourse is also enabled. */
@if (variable-exists(incoursesettingsswitchtorole) and variable-exists(showsettingsincourse)) {
@if ($incoursesettingsswitchtorole == 'yes' and $showsettingsincourse == 'yes') {
/* Hide the switch role to menu item within the user menu */
.usermenu {
.dropdown-menu a[data-title*="switchroleto"],
.dropdown-menu a[data-title*="switchrolereturn"] {
display: none;
}
/* As the last menu item is missing, we have to modify the dropdown menu container. */
.dropdown-menu.dropdown-menu-right {
padding-bottom: 0;
border-bottom: none;
}
/* We have to add a border for the users who do not have a switch role menu item due to their capabilities. */
.dropdown-menu.dropdown-menu-right a:last-child {
border-bottom: 1px solid $gray-lighter;
}
}
}
}
/* Setting to show a hint for hidden courses. */
/* Because the Font Awesome icon is set to fa-3x, we need a minimum size for the container. */
.course-hidden-infobox,
.switched-role-infobox,
.course-guestaccess-infobox {
min-height: 5rem;
}
/*------------------------------------
Special Settings
-------------------------------------*/
/* If the setting "hidefooteronloginpage" is enabled, hide the footer on the login page. */
@if variable-exists(hidefooteronloginpage) {
@if $hidefooteronloginpage == 'yes' { #page-login-index {
#page-footer {
display: none;
}
/* Because the footnote is not hidden, but moves up with no footer, we have to handle this and move the
footnote back to the bottom of the page. */
.footnote {
position: absolute;
bottom: 0;
width: 100%;
}
}
}
}
/* TODO: Remove when MDL-61319 is fixed */
/* This is needed because a bug leads to a mess with fa.fa-pull-left/right rules. */
.fa-pull-left {
margin-right: 0.3em;
}
.fa-pull-right {
margin-left: 0.3em;
}
/*------------------------------------
Special: Local Plugins
-------------------------------------*/
/* Special styles for plugin local_boostnavigation. */
#nav-drawer {
/* Remove border of child nodes which should appear as one block. */
.list-group-item[data-key^="localboostnavigationactivity"],
.list-group-item[data-parent-key^="localboostnavigationcustom"],
.list-group-item[data-key="localboostnavigationcoursesections"][data-collapse="0"] + .list-group-item[href$="#section-0"] {
border-top: none;
}
/* Remove (empty) icons from the heading nodes. */
.list-group-item[data-key="localboostnavigationactivities"] .media-left,
.list-group-item[data-key="localboostnavigationcoursesections"] .media-left,
.list-group-item[data-key^="localboostnavigationcustom"][data-isexpandable="1"] .media-left {
display: none;
}
/* Revert the indent to the collapsed custom child nodes which was
added by local_boostnavigation. Unfortunately, this has to be done for each custom node block individually because the child
node does not know (with a CSS-selectable attribute) if its parent node is collapsed or node. */
.list-group-item[data-key^="localboostnavigationcustomcourseusers"][data-isexpandable="1"]:not([data-parent-key^="localboostnavigationcustomcourseusers"]) ~ .list-group-item[data-parent-key^="localboostnavigationcustomcourseusers"] > div,
.list-group-item[data-key^="localboostnavigationcustomcourseadmins"][data-isexpandable="1"]:not([data-parent-key^="localboostnavigationcustomcourseadmins"]) ~ .list-group-item[data-parent-key^="localboostnavigationcustomcourseadmins"] > div,
.list-group-item[data-key^="localboostnavigationcustomrootusers"][data-isexpandable="1"]:not([data-parent-key^="localboostnavigationcustomrootusers"]) ~ .list-group-item[data-parent-key^="localboostnavigationcustomrootusers"] > div,
.list-group-item[data-key^="localboostnavigationcustomcrootadmins"][data-isexpandable="1"]:not([data-parent-key^="localboostnavigationcustomrootadmins"]) ~ .list-group-item[data-parent-key^="localboostnavigationcustomrooradmins"] > div,
.list-group-item[data-key^="localboostnavigationcustombottomusers"][data-isexpandable="1"]:not([data-parent-key^="localboostnavigationcustombottomusers"]) ~ .list-group-item[data-parent-key^="localboostnavigationcustombottomusers"] > div,
.list-group-item[data-key^="localboostnavigationcustombottomadmins"][data-isexpandable="1"]:not([data-parent-key^="localboostnavigationcustombottomadmins"]) ~ .list-group-item[data-parent-key^="localboostnavigationcustombottomadmins"] > div {
margin-left: inherit !important;
}
}