Select Git revision
-
Chris Sangwin authoredChris Sangwin authored
post.scss 22.43 KiB
/* stylelint-disable declaration-no-important */
/*------------------------------------
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 a.nav-link,
.nav-link,
.usertext,
.dropdown-toggle {
color: #fff;
}
.nav-link:hover,
.usertext:hover,
.dropdown-toggle:hover {
color: $brand-primary;
}
.popover-region-notifications .icon,
.popover-region-messages .icon {
filter: brightness(9);
}
}
}
}
/*------------------------------------
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.
* Icons will be added to menu items that are children of a
* root item and the ident has to be adjusted for consistency
* throuout the improved menu layout.
*/
#nav-drawer {
/*
* General preparation.
*/
/* First remove all existing borders from the menu items + reset the bottom margin. */
.list-group-item {
border: 0;
margin-bottom: 0;
}
/* Reduce space between pix icons and text as this is too much*/
.media-left {
padding-right: 2px;
}
/*
* General left menu.
*/
/* Add solid border: myhome, website start and calendar. */
a.list-group-item[data-key|=myhome],
a.list-group-item[data-key|=home],
a.list-group-item[data-key|=calendar] {
@include navdrawer-node-separator(parent);
}
/* Remove icon from elements that does not need any. */
a.list-group-item[data-key|=coursehome] span.media-left > img,
a.list-group-item[data-key|=myhome] span.media-left > img,
a.list-group-item[data-key|=home] span.media-left > img,
a.list-group-item[data-key|=calendar] span.media-left > img,
a.list-group-item[href*="files"] span.media-left > img,
a.list-group-item[data-key|=sitesettings] span.media-left > img {
display: none;
}
/* Menu item: my files. */
a.list-group-item[href*="files"] {
border-bottom-right-radius: .25rem;
border-bottom-left-radius: .25rem;
}
/* Menu item: my courses. */
/* Separate the courses menu items from the other ones and add a bottom border*/
div.list-group-item[data-key|=mycourses] {
@include navdrawer-node-separator(parent);
margin-top: 15px;
border-top-right-radius: .25rem;
border-top-left-radius: .25rem;
}
/* Dashed border for all courses I'm enrolled in except the last one. */
a.list-group-item[href*="course/view.php?id="] {
@include navdrawer-node-separator(child);
}
a.list-group-item[href*="course/view.php?id="]:last-child {
border-bottom: none;
}
/* Reduce the indent. */
div.list-group-item[data-key|=mycourses] ~ a.list-group-item[href*="course/view.php?id="] > div {
margin-left: 0 !important;
}
/* Set course icon to each course menu items. */
div.list-group-item[data-key|=mycourses] ~ a.list-group-item[href*="course/view.php?id="] span.media-left > img {
content: url([[pix:i/course]]);
}
/*
* Course home menu
*/
/* Add solid border and realign the node with the other ones. */
a.list-group-item[data-key|=coursehome] {
@include navdrawer-node-separator(parent);
padding: .75rem 1.25rem;
}
/* Menu items participants, badges, grades and competencies need dashed bottom border. */
a.list-group-item[data-key|=participants],
a.list-group-item[data-key|=badgesview],
a.list-group-item[data-key|=grades],
a.list-group-item[href*="coursecompetencies"] {
@include navdrawer-node-separator(child);
}
/* Set icons to menu items participants, badges, grades and competencies. */
a.list-group-item[data-key|=participants] span.media-left > img {
content: url([[pix:i/users]]);
}
a.list-group-item[data-key|=badgesview] span.media-left > img {
content: url([[pix:i/badge]]);
}
a.list-group-item[data-key|=grades] span.media-left > img {
content: url([[pix:i/grades]]);
}
a.list-group-item[href*="coursecompetencies"] span.media-left > img {
content: url([[pix:i/user]]);
}
/* Set and align icons before course section links */
a.list-group-item[href*="section-"] span.media-left > img.icon {
content: url([[pix:i/folder]]);
}
a.list-group-item[href*="section-"] .icon {
vertical-align: sub;
}
}
/*------------------------------------
Course header
-------------------------------------*/
/*
* If set in showswitchedroleincourse, the switched role information will be displayed
* in the course header instead of ben the user name. */
.switched-role-infobox {
span.switched-role {
font-weight: bold;
padding-left: 0.5em;
}
.switched-role-back {
padding-top: 10px;
}
.switched-role-backlink {
padding-left: 0.5em;
vertical-align: middle;
}
}
/* 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: $font-size-h3;
}
}
}
.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 {
padding-left: 0;
}
.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;
}
/* 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 {
h3.sectionname > span {
margin-left: 0;
}
.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%);
}
/* Make availability info more eye catching. */
.availabilityinfo {
@extend .label;
font-weight: 400;
font-size: .9rem;
display: block;
/* Change the color of links within the availability to the same color of the text. */
a {
color: #fff;
}
}
/* 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;
}
/*
* 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;
}
}
/*------------------------------------
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;
color: $gray-dark;
}
/* 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';
}
}
}
/*------------------------------------
Page Footer
-------------------------------------*/
#page-footer {
/* Increase padding. */
padding-top: 30px !important;
/* Set footer blocks text color from white to dark gray. */
.block {
color: $gray-dark;
}
/* Add bottom padding to the Moodle default footer links. */
.helplink,
.logininfo,
.homelink {
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;
}
}
}
/* 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
-------------------------------------*/
/*
* Badgearea.
*/
.badgearea {
text-align: center;
background-color: $gray-dark;
border-top: 1px solid #fff;
img {
/* If setting badgeareaitemsmaxheight is not empty. */
@if variable-exists(badgeareaitemsmaxheight) {
/* set the value. */
max-height: #{$badgeareaitemsmaxheight}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 course settings. */
#boost-campus-course-settings {
/* Initially do not display the settings. Visibility will be changed on click with incoursesettings.js. */
display: none;
/* Improve color of tab content so it looks more like a real tab. */
.tab-content .card {
background-color: #f4f4f4;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
}
}