// // 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 block styles 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 // .block-region-front .block { border: none; } .block-region-front .block .header { border: none; } .block .content a.dimmed { font-style: italic; } .block_timeline .col-sm { flex-basis: 0%; flex-grow: 1; max-width: 100%; } // Reset border values. [class^="block-side-"] .card-body, .block { background-color: [[setting:blockbackgroundcolor]]; border: none !important; border-radius: 0 !important; box-shadow: none !important; margin-bottom: 2px; } // Block action classes lifted from previously used bootstrapbase parent theme. .block.hidden .header .block_action { .block-hider-hide { display: none; } .block-hider-show { display: inline; } } .block .header .block_action { float: right; margin-left: 5px; padding: 1px 2px; } .block .header .block_action .block-hider-show, .block .header .block_action .block-hider-hide { cursor: pointer; } .block .header .block_action .block-hider-show, .jsenabled .block-region:not(#block-region-information) .block.hidden .content { display: none; } .jsenabled .block-region:not(#block-region-information) .block.hidden .content { opacity: 0; } .jsenabled .block .content { opacity: 1; display: block; -webkit-transition: ease [[setting:navbardropdowntransitiontime]]; -moz-transition: ease [[setting:navbardropdowntransitiontime]]; -ms-transition: ease [[setting:navbardropdowntransitiontime]]; -o-transition: ease [[setting:navbardropdowntransitiontime]]; transition: ease [[setting:navbardropdowntransitiontime]]; } // Block titles. .block .header, .block > .card-body { border-width: [[setting:blockheaderbordertop]] [[setting:blockheaderborderright]] [[setting:blockheaderborderbottom]] [[setting:blockheaderborderleft]]; border-color: [[setting:blockbordercolor]]; border-style: [[setting:blockheaderbordertopstyle]]; padding: 5px; border-radius: [[setting:blockheadertopradius]] [[setting:blockheadertopradius]] [[setting:blockheaderbottomradius]] [[setting:blockheaderbottomradius]]; } // Block header. .block .header { background-color: [[setting:blockheaderbackgroundcolor]]; padding-right: 0; .action-menu { .menubar { margin-top: 4px; } .dropdown-toggle, .action-menu-item { color: [[setting:fontblockheadercolor]]; } } } #block-region-information { .block { .header { .block-action { display: none; } } } } // Block title. .block .title h2 { color: [[setting:fontblockheadercolor]]; font-size: [[setting:fontblockheadersize]]; font-weight: [[setting:fontblockheaderweight]] !important; margin-bottom: 0; text-shadow: none; text-transform: none; } // Block content. .block > .content { border-color: [[setting:blockbordercolor]]; border-radius: [[setting:blockmaintopradius]] [[setting:blockmaintopradius]] [[setting:blockmainbottomradius]] [[setting:blockmainbottomradius]]; border-style: [[setting:blockmainbordertopstyle]]; border-width: [[setting:blockmainbordertop]] [[setting:blockmainborderright]] [[setting:blockmainborderbottom]] [[setting:blockmainborderleft]]; font-weight: normal; padding: 10px 5px; } .block-region-front .block .content { padding: 10px 5px; } .block .block-hider-show, .block .block-hider-hide { width: 18px; } // Some specific block styles for calendar block, login block, my profile block, etc. // Navigation block. .jsenabled .block_settings .block_tree .tree_item.branch, .block_navigation .block_tree .tree_item.branch { color: [[setting:linkcolor]] !important; } // Fix wrong indentation. .block_navigation .block_tree p.hasicon img { padding-right: 0; } .block_navigation ul.block_tree > li > ul, .block_navigation ul.block_tree > li > ul > li p.tree_item.branch { padding-left: 0; } .block_navigation ul.block_tree > li > ul > li p.hasicon { padding-left: 1px; } .block_navigation ul.block_tree > li > p[aria-expanded="true"]:before { content: "\f625"; // gauge-high <- dashboard. font-family: "Font Awesome 6 Free"; text-indent: -3px; } // Course Timeline block. .block .content .block-timeline a:hover { background-color: [[setting:navbardropdownhovercolor]] !important; color: [[setting:navbardropdowntexthovercolor]] !important; } // Recently accessed courses block. .block_recentlyaccessedcourses .paging-bar-container { margin-top: -3rem; } // Login block. .block_login label { font-size: 14px; color: #666; margin-bottom: 5px; margin-top: 5px; font-weight: 400; } .block_login .username label:before { content: "\f007"; // user <- user. font-family: "Font Awesome 6 Free"; margin-right: 5px; color: #999; } .block_login .password label:before { content: "\f084"; // key <- key. font-family: "Font Awesome 6 Free"; margin-right: 5px; color: #999; } .loginbox .loginpanel .desc { clear: both; } .block_login .content { margin-left: auto; margin-right: auto; max-width: 100%; } .block_login .c1.btn input { display: block; text-align: center; width: 96%; } .loginbox .loginform .form-input input { width: 50%; } .loginbox .loginform .form-input { float: right; width: 66%; } .loginbox .loginform .form-label { width: 33%; } // Admin block. .block_adminblock .content { margin: 0 auto; } // Course Overview block. .block_course_overview .content { margin: 0; } .btn.coursemenubtn { background-color: transparent !important; border: none !important; border-radius: 0% !important; color: #000000 !important; } .btn.coursemenubtn:hover { background-color: #f0f0f0 !important; border-radius: 100% !important; } .coursemenubtn .fa { color: #000000 !important; } // Calendar block. .block_calendar_month table.minicalendar.calendartable td { border: none !important; } .block_calendar_month table.minicalendar.calendartable th { border: none !important; border-radius: 0; background-color: #e0e0e0; } .block_calendar_month table.minicalendar { margin-bottom: 0 !important; } .block_calendar_month table.minicalendar.calendartable th abbr { border: none !important; text-decoration: none; } .block .calendar-controls { .previous, .next { font-size: 0.8rem; margin-top: 0.125rem; .arrow { display: none; } &:before, &:after { font-family: "Font Awesome 6 Free"; font-weight: 900; } } .previous { &:before { content: "\f053"; // chevron-left. } } .next { &:after { content: "\f054"; // chevron-right. } } } @media (min-width: 768px) { section:not(#region-main) .block.block_calendar_month .maincalendar .calendarwrapper { .previous, .next { font-size: .8rem; } } } // Comments block. .block_comments div.content li { list-style-type: none; } .block_tree_box hr { background: transparent; border: none; border-top: 1px solid #eee; } // Site Info block. .site-info-container { background-color: [[setting:maincolor]]; padding: 5px 10px; height: 120px } .site-info-value { color: #ffffff; font-size: 48px; display: block; text-align: right; } .site-info-label { color: #ffffff; font-size: 18px; display: block; text-align: right; } // Server Info block. .server-info-container { background-color: #39c121; padding: 5px 10px; height: 120px } // Quiz editing block header. .questionbankwindow.block { padding: 0; } #page-mod-quiz-edit .questionbankwindow div.header { background-color: #eee; color: inherit; } #page-mod-quiz-edit .questionbankwindow div.header a { color: inherit; } #mod_quiz_navblock input { white-space: normal; } // Hidden blocks. .block.hidden .header { border-bottom: 0; } .block.invisible:hover { opacity: 1; } body.has_dock div#dock { z-index: 3; } // Squared dot. .block_settings .block_tree li.item_with_icon > p img { left: 3px; top: 2px; } // Block Icons. .showblockicons { .block .header .title h2:before { content: "\f0c9"; // navicon <- navicon. display: inline-block; font-family: "Font Awesome 6 Free"; font-size: [[setting:blockiconsheadersize]]; font-style: normal; font-variant: normal; font-weight: 900; // fa-solid. padding-right: 8px; text-rendering: auto; } .block_news_items.block .header .title h2:before { content: "\f0a1"; // bullhorn <- bullhorn. font-family: "Font Awesome 6 Free"; } .block_navigation.block .header .title h2:before { content: "\f0e8"; // sitemap <- sitemap. } .block_calendar_upcoming.block .header .title h2:before, .block_calendar_month.block .header .title h2:before { content: "\f133"; // far calendar <- calendar-o. font-weight: 400; // fa-regular. } .block_course_list.block .header .title h2:before { content: "\f390"; // desktop <- desktop. } .block_completionstatus.block .header .title h2:before, .block_selfcompletion.block .header .title h2:before { content: "\f625"; // gauge-high <- tachometer. } .block_blog_menu.block .header .title h2:before, .block_book_toc.block .header .title h2:before { content: "\f02d"; // book <- book. } .block_quiz_results.block .header .title h2:before { content: "\e0e3"; // chart-column <- bar-chart. } .block_quiz_navblock.block .header .title h2:before { content: "\f126"; // code-branch <- code-fork. } .block_glossary_random.block .header .title h2:before { content: "\f0eb"; // far lightbulb <- lightbulb-o. font-weight: 400; // fa-regular. } .block_participants.block .header .title h2:before, .block_online_users.block .header .title h2:before, .block_block_mentees.block .header .title h2:before { content: "\f0c0"; // users <- group. } .block_html.block .header .title h2:before { content: "\f022"; // far rectangle-list <- list-alt. font-weight: 400; // fa-regular. } .block_section_links.block .header .title h2:before, .block_admin_bookmarks.block .header .title h2:before { content: "\f02e"; // bookmark <- bookmark. } .block_activity_modules.block .header .title h2:before { content: "\f12e"; // puzzle-piece <- puzzle-piece. } .block_comments.block .header .title h2:before { content: "\f075"; // comment <- comment. } .block_settings.block .header .title h2:before { content: "\f085"; // gears <- cogs. } .block_blog_tags.block .header .title h2:before, .block_tags.block .header .title h2:before { content: "\f02c"; // tags <- tags. } .block_private_files.block .header .title h2:before { content: "\f07b"; // folder <- folder. } .block_messages.block .header .title h2:before { content: "\f0e0"; // envelope <- envelope. } .block_community.block .header .title h2:before { content: "\f0ac"; // globe <- globe. } .block_recent_activity.block .header .title h2:before { content: "\f017"; // far clock <- clock-o. font-weight: 400; // fa-regular. } .block_rss_client.block .header .title h2:before { content: "\f09e"; // rss <- feed. } .block_search_forums.block .header .title h2:before, .block_globalsearch.block .header .title h2:before { content: "\f002"; // magnifying-glass <- search. } .block_myprofile.block .header .title h2:before { content: "\f007"; // user <- user. } .block_adminblock.block .header .title h2:before { content: "\f009"; // table-cells-large <- th-large. } .block_feedback.block .header .title h2:before { content: "\f164"; // far thumbs-up <- thumbs-o-up. font-weight: 400; // fa-regular. } .block_flickr.block .header .title h2:before { content: "\f03e"; // far image <- picture-o. font-weight: 400; // fa-regular. } .block_youtube.block .header .title h2:before { content: "\f145"; // ticket <- ticket. } .block_course_badges.block .header .title h2:before, .block_badges.block .header .title h2:before { content: "\f0a3"; // certificate <- certificate. } .block_twitter_search.block .header .title h2:before { content: "\e61b"; // x-twitter <- twitter. } .block_overview.block .header .title h2:before { content: "\f03a"; // list <- list. } .block_timeline.block .header .title h2:before { content: "\f062"; // arrow-up <- arrow-up. } .block_starredcourses.block .header .title h2:before { content: "\f005"; // star <- star. } .block_lp.block .header .title h2:before { content: "\f277"; // signs-post <- map-signs. } .block_sitenews.block .header .title h2:before { content: "\f1ea"; // far newspaper <- newspaper-o. font-weight: 400; // fa-regular. } } // Overriden from Boost.. .block_tree .tree_item.branch { margin-left: 0; } .block_settings .block_tree .tree_item.branch { padding-left: 5px; } .block_settings .block_tree p.hasicon { padding-left: 5px; } // Add slightly extra margin on right. .block_settings .block_tree p.hasicon .icon { margin-right: 4px; } // Circle icon size decreased. .block_settings .fa-circle { font-size: 10px; margin-right: .25rem; } // Tabbed layout for course and dashboard. main.tabcontentcontainer { margin: 5px 0; min-height: 400px; padding: 0; } #dashboardtabcontainer section.adaptable-tab-section { border-top: 4px solid [[setting:tabbedlayoutdashboardcolorselected]]; display: none; padding: 20px 0 0; } #coursetabcontainer section.adaptable-tab-section { border-top: 4px solid [[setting:tabbedlayoutcoursepagetabcolorselected]]; display: none; padding: 20px 0 0; } #dashboardtabcontainer input.dashboardtab, #coursetabcontainer input.coursetab { display: none; } .tabcontentcontainer div.linktab, .tabcontentcontainer label.dashboardtab, .tabcontentcontainer label.coursetab { border-bottom: 0; cursor: pointer; display: inline-block; font-weight: 400; padding: 15px 15px 25px; position: relative; margin: 0 4px 0 0; transition: background-color 0.2s ease; } .tabcontentcontainer label.dashboardtab { background-color: [[setting:tabbedlayoutdashboardcolorunselected]]; } .tabcontentcontainer div.linktab, .tabcontentcontainer label.coursetab { background-color: [[setting:tabbedlayoutcoursepagetabcolorunselected]]; } .tabcontentcontainer div.linktab { line-height: 1; vertical-align: top; } .tabcontentcontainer div.linktab a { color: inherit; } .tabcontentcontainer > dashboardtab.label:hover::after, .tabcontentcontainer > dashboardtab.input:focus + label::after, .tabcontentcontainer > dashboardtab.input:checked + label::after { background-color: [[setting:tabbedlayoutdashboardcolorselected]]; } .tabcontentcontainer > coursetab.label:hover::after, .tabcontentcontainer > coursetab.input:focus + label::after, .tabcontentcontainer > coursetab.input:checked + label::after { background-color: [[setting:tabbedlayoutcoursepagetabcolorselected]]; } .tabcontentcontainer div.linktab, .tabcontentcontainer input.dashboardtab:checked + label { border-color: [[setting:tabbedlayoutdashboardcolorselected]]; background-color: [[setting:tabbedlayoutdashboardcolorselected]]; border-top: 4px solid [[setting:tabbedlayoutdashboardcolorselected]]; // Override this in custom css to change the selected tab colour. color: #FFF; } .tabcontentcontainer input.coursetab:checked + label { border-color: [[setting:tabbedlayoutcoursepagetabcolorselected]]; background-color: [[setting:tabbedlayoutcoursepagetabcolorselected]]; border-top: 4px solid [[setting:tabbedlayoutcoursepagetabcolorselected]]; // Override this in custom css to change the selected tab colour. color: #FFF; } #tab-content:checked ~ #adaptable-course-tab-content, #tab1:checked ~ #adaptable-course-tab-1, #tab2:checked ~ #adaptable-course-tab-2 { display: block; } #dashboard-tab-content:checked ~ #adaptable-dashboard-tab-content, #dashboard-tab1:checked ~ #adaptable-dashboard-tab-1, #dashboard-tab2:checked ~ #adaptable-dashboard-tab-2 { display: block; } .tabcontentcontainer .tab-panel { padding: 30px 0; margin-right: 5px; margin-bottom: 5px; } .tabcontentcontainer .tabset { max-width: 100%; min-height: 200px; } #dashboard-tab-content:checked ~ #adaptable-dashboard-tab-content.adaptable-tab-section.tab-panel { padding-left: 15px; padding-right: 15px; } @media (min-width: 1024px) { .tabcontentcontainer div.linktab, .tabcontentcontainer dashboardtab.input[type="radio"], .tabcontentcontainer coursetab.input[type="radio"] { font-size: 1.4em; } .tabcontentcontainer div.linktab { font-size: 3em; padding: 10px 15px; } .tabcontentcontainer label.dashboardtab, .tabcontentcontainer label.coursetab { font-size: 1.25em; padding: 20px 40px; } } @media (max-width: 1023px) { .tabcontentcontainer div.linktab { font-size: 1.6em; padding: 10px 15px; } .tabcontentcontainer label.dashboardtab, .tabcontentcontainer label.coursetab { padding: 12px; } } @media (max-width: 460px) { .tabcontentcontainer div.linktab { font-size: 1.5em; padding: 12px; } .tabcontentcontainer label.dashboardtab, .tabcontentcontainer label.coursetab { font-size: 0.95em; } .tabcontentcontainer div.linktab, .tabcontentcontainer label.dashboardtab, .tabcontentcontainer label.coursetab { width: 100%; // Make tabs full width at this resolution. margin: 2px 0; } .tabcontentcontainer label.dashboardtab:before, .tabcontentcontainer label.coursetab:before { content: "\f101"; // angles-right <- angle-double-right. font-family: "Font Awesome 6 Free"; padding-right: 5px; } #coursetabcontainer section.adaptable-tab-section, #dashboardtabcontainer section.adaptable-tab-section { border: 0; } }