KEATS Userstyle

a guide (keats userstyle).md

1. Install Stylus: https://addons.mozilla.org/en-US/firefox/addon/styl-us/

2. Select manage styles from extension:

   

3. Call the style "KEATS Userstyle"

4. Select "write new style" then click on "import" and paste the keats-userstyle.css file below. Select "override style", then save the style.

5. Subscribe to this Gist for updates

   

keats-userstyle.css

@-moz-document regexp("^https://(\\w+.)?keats.kcl.ac.uk/(.*)$") {
@import "https://cdn.insrt.uk/css/keats/keats.css";
}

keats.css

/***
  ** KEATS Userstyle
  **
  ** by insert
  ** Version 2.4
  **
  ** https://gist.github.com/insertish/befba3bf0c16c14c372d97aff6edd726
  **
  ** Changelog
  ** =========
  ** 1.0: - module banner icons
  ** 2.0: - compact module overview
  **      - better visual clarity for sections of a module
  **      - remove random crap on the screen that gets in the way
  **      - made everything 20% cooler
  ** 2.1: - improved video player container
  ** 2.2: - remove all padding / border on course items
  **      - add additional effects to course items for visual clarity
  ** 2.3: - COM, ML1, NSE, OME module pictures
  ** 2.4: - also run on KEATS subdomains
  **      - hide the play button on Kaltura videos
  **/

/**
 * Module Page - Compact
 */

/* Make cards smaller */
#page-content .activity .activity-item:not(.activityinline) {
    /* old style:
       padding: 0.2rem;
       border-radius: 2px; */

    /* remove all extra padding / border on individual items */
    padding: 0;
    border: none;
    
    /* for animations */
    transition: .01s ease all;
}

#page-content .activity .activity-item:not(.activityinline):hover {
    /* add hover effects for visual clarity */
    background: #0002;
    outline: 8px solid #0002;
}

.activityiconcontainer {
    /* make the icons smaller */
    width: 25px;
    height: 25px;
    
    /* fix broken icons overflowing out */
    overflow: hidden;
}

.activityiconcontainer .activityicon,
.activityiconcontainer .icon {
    /* also scale the actual icons */
    width: 12px;
    height: 12px;
}

/* Make the buttons more reasonable with new cards */
#page-content .btn:not(.btn-icon)[data-action="toggle-manual-completion"],
.btn:not(:disabled):not(.disabled).btn-secondary {
    padding: 0 2px !important;
    font-size: 0.8rem;
}


/**
 * Module Page - Visual Clarity For Sections
 */
.format-topcoll .ctopics.ctoggled li.section.main > .content .sectionhead .the_toggle {
    /* add a background to the top of each section like on old KEATS */
    background: #977ACB;
    padding: 0.75rem 1rem;
}

.format-topcoll .ctopics.ctoggled li.section.main > .content .sectionhead .the_toggle .sectionname,
.format-topcoll .ctopics.ctoggled li.section.main > .content .sectionhead .the_toggle::after,
.cps_centre .tcosif.fa.fa-dot-circle-o{
    /* make the icons and text legible */
    color: white !important;
}

.format-topcoll .ctopics.ctoggled li.section.main {
    /* remove padding from the whole section container */
    padding: 0;
}

.format-topcoll .ctopics.ctoggled li.section.main .sectionbody {
    /* add padding back to each child element */
    padding: 0.2rem 1.25rem;
}

.format-topcoll .ctopics.ctoggled li.section.main > .content .sectionhead .the_toggle::after {
    /* fix the toggle button positioning */
    /* this is quite hacky but I don't care */
    margin-right: 14px;
    margin-top: 14px;
}

.format-topcoll .ctopics.ctoggled li.section.main .right {
    /* fix the "view only X" button */
    /* i dont even know what this shit is wtf are they doing */
    top: 0.8rem;
    right: 2.5rem;
}


/**
 * Improved Video Player Container
 */
.kaltura-player-container iframe {
    width: 100% !important;
    height: unset !important;
    aspect-ratio: 16/10;
}

/**
 * Remove the play button on pause
 */
a.largePlayBtn {
    display: none !important;
}


/**
 * Dashboard Module Banners
 */

/** AIN */
[data-region="courses-view"] a[href="https://keats.kcl.ac.uk/course/view.php?id=109895"] .card-img {
    background-image: url('https://keats.kcl.ac.uk/pluginfile.php/9684797/mod_label/intro/Peter.jpeg') !important;
    opacity: 1 !important;
}

/** CFL */
[data-region="courses-view"] a[href="https://keats.kcl.ac.uk/course/view.php?id=109918"] .card-img {
    background-image: url('https://www.kcl.ac.uk/ImportedImages/Schools/NMS/NMS-Headshots/Christian-Urban-web.x1f987d51.jpg') !important;
    opacity: 1 !important;
}

/** CIS */
[data-region="courses-view"] a[href="https://keats.kcl.ac.uk/course/view.php?id=109883"] .card-img {
    background-image: url('https://keats.kcl.ac.uk/pluginfile.php/9693077/block_html/content/Luca%20Picture%20%281%29.jpg') !important;
    opacity: 1 !important;
}

/** COM */
[data-region="courses-view"] a[href="https://keats.kcl.ac.uk/course/view.php?id=109897"] .card-img {
    background-image: url('https://keats.kcl.ac.uk/pluginfile.php/9694346/mod_label/intro/profile.jpg') !important;
    opacity: 1 !important;
}

/** ML1 */
[data-region="courses-view"] a[href="https://keats.kcl.ac.uk/course/view.php?id=109956"] .card-img {
    background-image: url('https://www.kcl.ac.uk/ImportedImages/Schools/NMS/informatics/helen-yannakoudakis.x4b1c891b.jpg') !important;
    opacity: 1 !important;
}

/** OME */
[data-region="courses-view"] a[href="https://keats.kcl.ac.uk/course/view.php?id=109896"] .card-img {
    background-image: url('https://keats.kcl.ac.uk/pluginfile.php/9697340/mod_label/intro/tomasz-radzik-web.x14155959.jpg') !important;
    opacity: 1 !important;
}

/** NSE */
[data-region="courses-view"] a[href="https://keats.kcl.ac.uk/course/view.php?id=109907"] .card-img {
    background-image: url('https://keats.kcl.ac.uk/pluginfile.php/9374393/course/section/1800438/hannanicon.jpeg') !important;
    opacity: 1 !important;
}


/**
 * Hide random things that get in the way
 */
#page footer [aria-label="Show footer"],
#page button#back-to-top {
    /* hide the info and scroll to top buttons in the bottom right */
    display: none !important;
}


/**
 * :)
 */
#page #footnote .footer-lower {
    padding-bottom: 0;
    padding-right: 0;
    padding-left: 0;
}

#page #footnote .footer-lower::after {
    margin-top: 100px;
    
    content: '';
    width: 100%;
    height: 400px;
    display: block;
    color: transparent;
    
    background-image: url('https://derpicdn.net/img/view/2023/5/25/3131503.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom right;
}