styles.css

/* This file is part of Moodle - http://moodle.org/

   Moodle is free software: you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
   the Free Software Foundation, either version 3 of the License, or
   (at your option) any later version.

   Moodle is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   GNU General Public License for more details.

   You should have received a copy of the GNU General Public License
   along with Moodle.  If not, see <http://www.gnu.org/licenses/>. */

/**
 * Grid Format - A topics based format that uses a grid of user selectable images to popup a light box of the section.
 *
 * @package    course/format
 * @subpackage grid
 * @version    See the value of '$plugin->version' in version.php.
 * @copyright  &copy; 2012 onwards G J Barnard in respect to modifications of standard topics format.
 * @author     G J Barnard - {@link http://about.me/gjbarnard} and
 *                           {@link http://moodle.org/user/profile.php?id=442195}
 * @author     Based on code originally written by Paul Krix and Julian Ridden.
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

.course-content .grid_title {
    font-size: 160%;
    font-weight: bold;
}
.course-content ul.gtopics h3.sectionname {
    background: transparent;
    border: 0 none;
    border-bottom: dashed 1px #000;
    font-weight: normal;
    padding: 0;
    padding-bottom: 5px;
}
.course-content ul.gtopics-0 #section-0 {
    background: transparent;
    border: 0 none;
}

.course-content ul.gtopics-0 #section-0 .side {
    width: 28px;
}

/* Change of logic such that topics are hidden by default and then shown to prevent 'flash' whilst JavaScript kicks in. */
body.jsenabled li.grid_section.hide_section {
    display: none !important; /* Important to override bootstrap/moodle/undo.less. */
}

div#gridmiddle-column > ul {
    list-style-type: none;
    overflow: visible;
}

.course-content ul.gtopics {
    margin: 0;
}

.course-content ul.gtopics li.section {
    list-style: none;
    margin: 5px 0 0 0;
    padding:0;
}

.course-content ul.gtopics li.section .content {
    margin:0 40px;
}

.course-content ul.gtopics li.section .side {
    text-align: center;
    width: 40px;
}

.course-content ul.gtopics li.section .left {
    float: left;
    padding: 0;
}

.course-content ul.gtopics li.section .right {
    float: right;
}

/* @group Icons */
#gridiconcontainer {
    height: auto;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}
#gridiconcontainer ul.gridicons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}
#gridiconcontainer ul.gridicons li {
    display: inline-block;
    height: auto;
    padding: 10px;
    text-align: left;
}
.dir-rtl #gridiconcontainer ul.gridicons li {
    text-align: right;
}
#gridiconcontainer ul.gridicons.content_inside li {
    position: relative;
}

.course-content ul.gridicons img.new_activity {
    position: absolute;
    z-index: 1;
}

.course-content .gridcursor .gridicon_link {
    /*rtl:ignore*/
    cursor: url('[[pix:format_grid|fa-hand-o-up-f]]'), auto;
}
.course-content ul.gridicons li .icon_content {
    font-weight: bold;
    height: 20px;
    margin: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.course-content ul.gridicons li .icon_content.content_inside {
    background-color: white;
    color: black;
    height: 40px;
    opacity: 0.8;
    overflow-wrap: break-word;
    padding: 10px;
    position: absolute;
    text-overflow: inherit;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.course-content ul.gridicons li .icon_content.content_inside.middle {
    bottom: 0;
    left: 0;
    margin: auto;
    right: 0;
    top: 0;
}
.course-content ul.gridicons li .icon_content.content_inside.bottom {
    bottom: 0;
    left: 0;
    margin: auto;
    right: 0;
}

.course-content ul.gridicons li .gridicon_link .tooltip {
    font-size: 14px;
}

/* Set the width of the tooltip when the section summary is 'Inside', thus within the 'image_holder'. */
.course-content ul.gridicons li .gridicon_link .image_holder .tooltip {
    width: 100%;
}

.course-content ul.gridicons li .gridicon_link .tooltip-inner {
    background-color: #ffc540;
    color: #3b53ad;
    max-width: none;
}

.course-content ul.gridicons li .gridicon_link .tooltip.top .tooltip-arrow {
    border-top-color: #ffc540;
}

.course-content ul.gridicons li .gridicon_link .tooltip.bottom .tooltip-arrow {
    border-bottom-color: #ffc540;
}

.course-content ul.gridicons li .gridicon_link .tooltip.left .tooltip-arrow {
    border-left-color: #ffc540;
}

.course-content ul.gridicons li .gridicon_link .tooltip.right .tooltip-arrow {
    border-right-color: #ffc540;
}

.course-content ul.gridicons li .image_holder {
    border-style: solid;
    /* Override Bootstrap V3 box sizing of .box-sizing(border-box); in scaffolding.less. */
    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box;
    overflow: visible;
    position: relative;
    text-align: center;
    vertical-align: middle;
}

.course-content ul.gridicons li img {
    margin-top: 0;
}

.course-content ul.gridicons li img.info {
    height: 100%;
    width: 100%;
}

.course-content li.grid_section {
    clear: both;
}
/* @end */

/* @group Shadebox */

.gridcursor div#gridshadebox_overlay {
    /*rtl:ignore*/
    cursor: url('[[pix:format_grid|fa-times-circle-o-f]]'), auto;
}

div#gridshadebox_overlay {
    background: black;
    /* for IE */
    filter: alpha(opacity=70);
    height: 500px;
    left: 0;
    /* CSS3 standard */
    opacity: 0.7;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3;
}
#gridshadebox_content {
    background: #fff;
    border: solid 2px #a71e38;
    min-height: 200px;
}
body.jsenabled #gridshadebox_content.hide_content {
    display: none;
}

#gridshadebox_content.absolute {
    left: 60px;
    position: absolute;
    right: 60px;
    z-index: 3;
}

#gridshadebox_content.fit_to_window {
    bottom: 10%;
    left: 10%;
    position: fixed;
    right: 10%;
    top: 10%;
    z-index: 3;
}

#gridshadebox_content.fit_to_window ul.gtopics {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    margin: 0;
    overflow: auto;
    padding: 10px;
}

#gridshadebox_content.fit_to_window ul.gtopics h3.sectionname {
    margin-top: 0;
}

#gridshadebox_content .activity {
    border-bottom: 1px dashed #ccc;
    list-style: none;
    padding-bottom: 4px;
    padding-top: 2px;
}

#gridshadebox_content ul li.grid_section {
    list-style: none;
}

#gridshadebox_content ul li ul li, #gridshadebox_content ul li ol li {
    border-bottom: none;
    padding-bottom: 4px;
    padding-top: 2px;
}

#gridshadebox_content ul li ul li {
    list-style: disc outside none;
}

#gridshadebox_content ul li ol li {
    list-style: decimal outside none;
} 

.gridcursor #gridshadebox_close {
    /*rtl:ignore*/
    cursor: url('[[pix:format_grid|fa-hand-o-up-f]]'), auto;
}

#gridshadebox_close {
    position: absolute;
    right: -10px;
    top: -10px;
    z-index: 2;
}

.gridcursor .gridshadebox_arrow {
    cursor: inherit;
}
.gridshadebox_arrow {
    height: 55px;
    opacity: 0.35;
    position: absolute;
    top: 75px;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    width: 55px;
}
.gridshadebox_area:hover .gridshadebox_arrow {
    opacity: 0.9;
}

.gridshadebox_area  {
    height: 100%;
    position: absolute;
    top: 0;
    width: 55px;
}

.gridshadebox_previous_area {
    left: -55px;
}

.gridshadebox_next_area {
    right: -55px;
}

.gridcursor .gridshadebox_previous_area.ltr,
.gridcursor .gridshadebox_next_area.rtl {
    /*rtl:ignore*/
    cursor: url('[[pix:format_grid|fa-hand-o-left-f]]'), auto;
}

.gridcursor .gridshadebox_next_area.ltr,
.gridcursor .gridshadebox_previous_area.rtl {
    /*rtl:ignore*/
    cursor: url('[[pix:format_grid|fa-hand-o-right-f]]'), auto;
}

@media (max-width: 1199px) {
    .gridshadebox_arrow {
        height: 40px;
        width: 40px;
    }
    .gridshadebox_area {
        width: 40px;
    }
    .gridshadebox_previous_area {
        left: -40px;
    }
    .gridshadebox_next_area {
        right: -40px;
    }
}

@media (max-width: 767px) {
    .gridcursor div#gridshadebox_overlay {
        /*rtl:ignore*/
        cursor: url('[[pix:format_grid|fa-times-circle-o-fsm]]'), auto;
    }
    .gridcursor #gridshadebox_close {
        /*rtl:ignore*/
        cursor: url('[[pix:format_grid|fa-hand-o-up-fsm]]'), auto;
    }
    #gridshadebox_close {
        height: 28px;
        width: 28px;
    }
    .gridshadebox_arrow {
        height: 30px;
        width: 30px;
    }
    .gridshadebox_area {
        width: 30px;
    }
    .gridshadebox_previous_area {
        left: -30px;
    }
    .gridshadebox_next_area {
        right: -30px;
    }
    .gridcursor .gridshadebox_previous_area.ltr,
    .gridcursor .gridshadebox_next_area.rtl {
        /*rtl:ignore*/
        cursor: url('[[pix:format_grid|fa-hand-o-left-fsm]]'), auto;
    }
    .gridcursor .gridshadebox_next_area.ltr,
    .gridcursor .gridshadebox_previous_area.rtl {
        /*rtl:ignore*/
        cursor: url('[[pix:format_grid|fa-hand-o-right-fsm]]'), auto;
    }
}

@media (max-width: 480px) {
    #gridshadebox_close {
        height: 20px;
        right: -7px;
        top: -7px;
        width: 20px;
    }
    .gridshadebox_arrow {
        height: 20px;
        width: 20px;
    }
    .gridshadebox_area {
        width: 20px;
    }
    .gridshadebox_previous_area {
        left: -20px;
    }
    .gridshadebox_next_area {
        right: -20px;
    }
}

.gridshadebox_arrow.gridshadebox_mobile {
    height: 18px;
    width: 18px;
}

.gridshadebox_arrow.gridshadebox_mobile.gridshadebox_area {
    width: 18px;
}

.gridshadebox_arrow.gridshadebox_mobile.gridshadebox_previous_area {
    left: -18px;
}

.gridshadebox_arrow.gridshadebox_mobile.gridshadebox_next_area {
    right: -18px;
}

.gridshadebox_arrow.gridshadebox_mobile, .gridshadebox_arrow.gridshadebox_mobile:hover {
    opacity: 1;
}

#gridshadebox_close.gridshadebox_mobile {
    height: 18px;
    right: -7px;
    top: -7px;
    width: 18px;
}

.gridshadebox_arrow.gridshadebox_tablet {
    height: 31px;
    width: 31px;
}

.gridshadebox_arrow.gridshadebox_tablet.gridshadebox_area {
    width: 31px;
}

.gridshadebox_arrow.gridshadebox_tablet.gridshadebox_previous_area {
    left: -31px;
}

.gridshadebox_arrow.gridshadebox_tablet.gridshadebox_next_area {
    right: -31px;
}

.gridshadebox_arrow.gridshadebox_tablet, .gridshadebox_arrow.gridshadebox_tablet:hover {
    opacity: 1;
}

#gridshadebox_content ul.gtopics {
    margin: 0 15px 10px;
}

/* Added by Justin 20160514 */
.course-content ul.gridicons li .image_holder.inaccessible {
    background-color: #999;
    border-color: #aaa;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray; /* IE 6-9 */
    filter: alpha(opacity=70);
    opacity: 0.7;
}
/* @end */