// // This file is part of Adaptable theme for moodle // // 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 . // // // Adaptable Responsive style sheet // // @package theme_adaptable // @copyright 2015-2019 Jeremy Hopkins (Coventry University) // @copyright 2015-2019 Fernando Acedo (3-bits.com) // @copyright 2018-2019 Manoj Solanki (Coventry University) // // @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later // // ======================================================= // Media Queries - max's in reverse // order for prescidence. // ======================================================= // ======================================================= // 1200px // ======================================================= @media (max-width: 1199px) { .showhideblocksdesc, .zoomdesc { display: none; } } // ======================================================= // 991px // ======================================================= @media(max-width: 991px) { #region-main-box { flex: 0 0 100%; max-width: 100%; } #block-region-side-post .block-controls { display: none; } } // ======================================================= // 979px // ======================================================= @media (max-width: 979px) { #page-header { min-height: 60px; } .langdesc { display: inline; } .slidestyle2 .flex-caption { right: -800px; } .slidestyle2 .flex-active-slide .flex-caption { right: 0; transition: all 1s ease; } .slidestyle2 .flex-caption h3 { max-width: 970px; } .slidestyle2 .flex-caption br { display: none; } .slidestyle2 .flex-caption { top: 25%; } .slidestyle2 .flex-direction-nav { display: none; } .slidestyle2 .flex-caption h4 { font-size: 23px; line-height: 30px; } .slidestyle2 .flex-caption a.submit { font-size: 14px; float: none; white-space: normal; width: auto; } .navbar { float: none !important; } .navbar .pull-right { float: none; } .navbar .nav > li > a { margin: 0 10px 0 0 !important; } .flex-direction-nav .flex-next { right: 0 !important; } .flex-direction-nav .flex-prev { left: 0 !important; } // Header. // Logo. #logocontainer { clear: both; display: block !important; height: auto; margin: 5px 0; padding: 0; width: 100%; } #logo img { display: block; margin: 0 auto; } // Header title. #headertitle { clear: both; display: block; height: auto; left: 0; margin: 5px 0; max-width: 100%; padding: 0; text-align: center; top: 0; } // Social Icons. .socialbox { clear: both; display: table; float: none; margin: 15px auto; padding: 5px; } .coursebox .panel-body p { font-size: 90%; line-height: 130%; } .enrolmenticons { display: none; } #editingbutton a, #editingbutton .btn { margin-left: 10px !important; } .hbl, .sbl, .hbll, .sbll { display: none !important; } .nav-collapse .nav { margin-left: 0 !important; width: 100%; } #adaptable-page-header-wrapper #main-navbar { border-bottom: 0; } #page-header a img { display: block; float: none; margin: 0 auto; } .nav .dropdown-menu li a { color: [[setting:menufontcolor]]; } .nav-collapse.active { background-color: [[setting:mobilemenubkcolor]]; height: auto; padding-bottom: 4px; top: 6px; } #editingbutton { margin-left: 10px; } .menutitle { float: none; } // New styles for Adaptable 2. #adaptable-page-header-wrapper .nav-link { padding: inherit; } #adaptable-page-header-wrapper .topmenuleft { float: left !important; margin: 0; padding: 5px 5px 0 0; } #adaptable-page-header-wrapper .navbar .popover-region { margin: 4px 0 0 4px; } .page-header-margin.header-style1 #page { margin-top: 41px; } .mobiletheme.page-header-margin.header-style1.has-header-bg .headerbgimage { background-image: none !important; } .page-header-margin.header-style2 #page { margin-top: 46px; } // Course activity and section layout updates to remove any extra padding on smaller screens. .section .activity .activityinstance { min-width: 100%; } .activity-meta-container { margin: 0 0 0 20px; } } // ======================================================= // 767px // ======================================================= @media (max-width: 767px) { #ticker-announce { float: none; margin: 0; text-align: center; } #ticker-wrap #newscontent { line-height: normal; max-width: inherit; overflow: inherit; padding: 10px 10px 10px; white-space: normal; #news { white-space: normal; } } .slidestyle2 .flex-caption { background-color: transparent !important; left: 0; position: relative; top: auto; } .slidestyle2 .flex-caption a.submit { float: none; margin: 0; text-align: center; width: auto; } .slidestyle2 .flex-caption h3 { background-color: #000; margin: 0 !important; } .slidestyle2 .flex-caption h4 { font-size: 18px; line-height: 22px; padding: 10px 0; } // 1 tile. .coursebox.col-12 .coursebtn { width: 30% !important; } // 2 tiles. .coursebox.col-6 .coursebtn { width: 55% !important; } // 3 tiles. .coursebox.col-4 .coursebtn { width: 70% !important; } // 4 tiles. .coursebox.col-3 .coursebtn { width: 80% !important; } // 6 tiles. .coursebox.col-2 .coursebtn { width: 95% !important; } #page-site-index a.submit { width: auto; } .headermenu2 { clear: both; float: none; padding: 10px 0; text-align: center; } .flex-caption { font-size: 90% !important; padding: 5px 0 !important; width: 100% !important; } .flex-caption p { font-size: 90% !important; line-height: 1.4em; margin: 0 5px !important; } .flex-caption h3 { font-size: 1.1em !important; line-height: 2em; margin: 0 5px !important; } a.submit { display: block; margin: 5px auto; text-align: center; width: 80%; } .block .header { margin: 0 !important; } #page-footer { margin: 50px 0; } #editingbutton a, #editingbutton .btn { margin-left: -10px !important; } .navbar .nav > li > a { margin: 0 10px 0 4px !important; } #social-connect { clear: both; float: none; width: auto; } .message .contactselector { float: none; width: auto; } .message .messagearea { border-left: none; float: none; min-height: 200px; padding-left: 1%; width: auto; } .navbar .nav-collapse.in > .nav > li > a { border-radius: 0; padding-left: 0 !important; } .userhead { height: 20px; } .userprofile dl.list dt { width: 110px !important; } .userprofile dl.list dd { margin-left: 120px !important; } .newmenu1, .newmenu2, .newmenu3, .newmenu4, .newmenu5, .newmenu6, .newmenu7, .newmenu8, .newmenu9, .newmenu10, .newmenu11, .newmenu12, .newmenu13, .newmenu14, .newmenu15, .newmenu16 { display: none; } // Links and Language menu, hide text on small screens. .above-header .langdesc, .above-header .linksdesc { display: none; } .above-header { min-height: 37px; } #header2, #header2 .row, #adaptable-page-header-wrapper > #header2 > div > div, #adaptable-page-header-wrapper #header2 .navbar-nav { min-height: 46px; } .page-header-margin.header-style2 #page { margin-top: 62px; } .socialbox a { color: [[setting:headertextcolor]]; } .socialbox a i { // Make at least 29px, values look odd but on inspection they are needed to be so for FontAwesome. font-size: [[setting:responsivesocialsize]]; line-height: [[setting:responsivesocialsize]]; } .custom-select { max-width:100%; } } // ======================================================= // 576px // ======================================================= @media (max-width: 576px) { .page-header-margin.header-style2 #page { margin-top: 38px; } } // ======================================================= // 480px // ======================================================= @media (max-width: 480px) { .flex-caption { background-color: #000 !important; margin-top: -1px !important; padding: 5px 0 !important; position: relative !important; width: auto !important; } #page-content { margin-top: 15px; padding: 0; width: auto; } #page-header .userimg { display: none; } } // Mins in ascending order. // ======================================================= // 481px // ======================================================= @media (min-width: 481px) { // Activity chooser styling. Desktop styling. .jsenabled .choosercontainer #chooseform .alloptions { max-height: -webkit-calc(100vh - 15em) !important; max-height: calc(100vh - 15em) !important; max-width: 50%; overflow-x: hidden; overflow-y: auto; } .jsenabled .choosercontainer #chooseform .instruction, .jsenabled .choosercontainer #chooseform .typesummary { background-color: #fff; bottom: 0; left: 50%; margin: 0; overflow-x: hidden; overflow-y: auto; padding: 1.8em; position: absolute; right: 0; top: 0; } // Selected option settings. .jsenabled .choosercontainer #chooseform .instruction { display: block; font-size: 1.2em; } .choosercontainer #chooseform .selected .typesummary, .choosercontainer #chooseform .selected .instruction { display: block; font-size: 1.1em; } .choosercontainer #chooseform .selected { background-color: #fff; } // Styling for overall activity chooser box. .moodle-dialogue-base .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-hd, .moodle-dialogue-base .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd { font-size: 36px; min-height: 40px; padding: 20px; padding-right: 30px; text-align: center; } .moodle-dialogue-base .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons { margin-right: 10px; margin-top: 10px; } .moodle-dialogue-base .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons button.yui3-button.closebutton:hover { filter: alpha(opacity=100); opacity: 1; } .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd { border-bottom-right-radius: 0; border-bottom-left-radius: 0; padding: 0; } // End Activity chooser styling. } // ======================================================= // 786px // ======================================================= @media (min-width: 768px) { body.drawer-open-left { margin-left: 0; } .above-header .linksmenu { margin-left: 0; } .adaptable-drawer { display: none; } } // ======================================================= // 1201px or higher / nozoom // ======================================================= @media (min-width: 1200px) { .standard .container { max-width: 100%; width: 1170px; } } @media (min-width: 992px) and (max-width: 1199px) { .standard .container { max-width: 100%; width: 960px; } } @media (min-width: 1000px) { .narrow .container { max-width: 100%; width: 1000px; } } @media (max-width: 992px) and (max-width: 999px) { .narrow .container { max-width: 100%; width: 960px; } } @media (min-width: 768px) and (max-width: 991px) { #adaptable-page-header-wrapper .container, .container { max-width: 100%; } } @media (min-width: 576px) and (max-width: 767px) { .container { max-width: 100%; } }