, + // because the visual parent is a
. + margin-top: @baseLineHeight + (@baseLineHeight / 2); + text-align: center; + margin-bottom: 3em; + label { + display: inline; + } +} +#addcontrols input, +#removecontrols input { + .btn-block; + margin-right: auto; + margin-left: auto; +} + +button, +input.form-submit, +input[type="button"], +input[type="submit"], +input[type="reset"] +{ + .btn +} +button, +input.form-submit, +input[type="button"], +input[type="submit"], +input[type="reset"] +{ + .btn-lineup +} +button.yui3-button.closebutton, +button.yui3-button.closebutton:hover { + background-position: 0 0; + // Because we assign button looks to every button tag above, + // we need to remove some styles from non-standard looking + // buttons. Correct fix, assign .btn class to every actual + // button in Moodle so we don't need to carpet bomb the + // bare button tag. +} + +input.fp-btn-choose { + .btn-small; +} +.user-enroller-panel .uep-search-results .user .options .enrol { + .btn-mini +} diff --git a/less/moodle/calendar.less b/less/moodle/calendar.less new file mode 100644 index 00000000..ac30be96 --- /dev/null +++ b/less/moodle/calendar.less @@ -0,0 +1,191 @@ +/* calendar.less */ +.calendartable { + width: 100%; +} +.calendartable th, +.calendartable td { + width: 14%; + vertical-align: top; + text-align: center; + border: 0; +} +.calendar_event_course { + background-color: #FFD3BD; +} +.calendar_event_global { + background-color: #D6F8CD; +} +.calendar_event_group { + background-color: #FEE7AE; +} +.calendar_event_user { + background-color: #DCE7EC; +} +.path-calendar .calendar-controls .previous, +.path-calendar .calendar-controls .next, +.path-calendar .calendar-controls .current { + display: block; + float: left; + width: 12%; +} +.path-calendar .calendar-controls .previous { + text-align: left; +} +.path-calendar .calendar-controls .current { + text-align: center; + width: 76%; +} +.path-calendar .calendar-controls .next { + text-align: right; +} +.path-calendar .maincalendar { + vertical-align: top; + padding: 0; +} +.path-calendar .maincalendar .bottom { + text-align: center; + padding: 5px 0 0 0; +} +.path-calendar .maincalendar .heightcontainer { + height: 100%; + position: relative; +} +.path-calendar .maincalendar .calendarmonth { + width: 98%; + margin: 10px auto; +} +.path-calendar .maincalendar .calendarmonth ul { + margin: 0; +} +.path-calendar .maincalendar .calendarmonth ul li { + list-style-type: none; + margin-top: 4px; +} +.path-calendar .maincalendar .calendarmonth td { + height: 5em; +} +.path-calendar .maincalendar .calendar-controls .previous, +.path-calendar .maincalendar .calendar-controls .next{ + width: 30%; +} +.path-calendar .maincalendar .calendar-controls .current { + width: 39.95%; +} +.path-calendar .maincalendar .controls { + width: 98%; + margin: 10px auto; +} +.path-calendar .maincalendar .eventlist .event { + width: 100%; + margin-bottom: 10px; + border-spacing: 0; + border-collapse: separate; + border-width: 1px; + border-style: solid; +} +.path-calendar .maincalendar .eventlist .event .topic .name { + float: left; +} +.dir-rtl.path-calendar .maincalendar .eventlist .event .topic .name, +.path-calendar .maincalendar .eventlist .event .topic .date { + float: right; +} +.dir-rtl.path-calendar .maincalendar .eventlist .event .topic .date { + float: left; +} +.path-calendar .maincalendar .eventlist .event .subscription, +.path-calendar .maincalendar .eventlist .event .course { + float: left; + clear: left; +} +.dir-rtl.path-calendar .maincalendar .eventlist .event .subscription, +.dir-rtl.path-calendar .maincalendar .eventlist .event .course { + float: right; + clear: right; +} +.path-calendar .maincalendar .eventlist .event .side { + width: 32px; +} +.path-calendar .maincalendar .eventlist .event .commands a { + margin: 0 3px; +} +.path-calendar .maincalendar .header { + overflow: hidden; +} +.path-calendar .maincalendar .header .buttons { + float: right; +} +.dir-rtl.path-calendar .maincalendar .header .buttons { + float: left; +} +.path-calendar .filters table { + border-collapse: separate; + border-spacing: 2px; + width: 100%; +} +#page-calendar-export .indent { + padding-left: 20px; +} +.path-calendar .cal_courses_flt label { + margin-right: .45em; +} +.dir-rtl.path-calendar .cal_courses_flt label { + margin-left: .45em; + margin-right: 0; +} +.block .minicalendar th, +.block .minicalendar td { + padding: 2px; + font-size: 0.8em; +} +.block .minicalendar { + max-width: 280px; + margin-left: auto; + margin-right: auto; +} +.block .minicalendar td.weekend { + color: #A00; +} +.block .calendar-controls .previous { + text-align: left; + display: block; + float: left; + width: 12%; +} +.block .calendar-controls .current { + float: left; + text-align: center; + display: block; + width: 76%; +} +.block .calendar-controls .next { + text-align: right; + display: block; + float: left; + width: 12%; +} +.block .calendar_filters ul { + list-style: none; + margin: 0; +} +.block .calendar_filters li { + margin-bottom: .2em; +} +.block .calendar_filters li span img { + padding: 0 .2em; +} +.block .calendar_filters .eventname { + padding-left: .2em; +} +.dir-rtl .block .calendar_filters .eventname { + padding-right: .2em; + padding-left: 0; +} +.block .content h3.eventskey { + margin-top: 0.5em; +} +@media (min-width: 768px) { + #page-calender-view .container fluid { + min-width: 1024px; + } +} diff --git a/less/moodle/chat.less b/less/moodle/chat.less new file mode 100644 index 00000000..e87a8603 --- /dev/null +++ b/less/moodle/chat.less @@ -0,0 +1,114 @@ +// Chat (more!) +// ------------------------- +.yui-skin-sam .yui-layout.path-mod-chat-gui_ajax { + background-color: @white; + .yui-layout-unit div.yui-layout-bd-nohd, + .yui-layout-unit div.yui-layout-bd-noft, + .yui-layout-unit div.yui-layout-bd, + .yui-layout-unit-right, + .yui-layout-unit-bottom { + border: 0; + } + .yui-layout-unit-right, + .yui-layout-unit-bottom { + .well; + border-radius: 0; + } + .yui-layout-unit div.yui-layout-bd { + background-color: transparent; + } + #chat-input-area table.generaltable, + #chat-input-area table.generaltable td.cell { + border: 0; + padding: 3px 15px; + white-space: nowrap; + input { + margin: 0 10px; + input-message { + width: 45%; + margin: auto; + } + } + a { + margin: 0 5px; + } + } + #chat-userlist { + padding: 10px 5px; + #users-list { + border-top: 1px solid #ddd; + border-bottom: 1px solid @white; + li { + border-top: 1px solid @white; + border-bottom: 1px solid #ddd; + padding: 5px 10px; + } + img { + margin-right: 8px; + border: 1px solid #ccc; + border-radius: 4px; + max-width: none; + } + } + } + #chat-messages { + margin: 20px 25px; + .chat-event.course-theme { + text-align: center; + margin: 10px 0; + font-size: @fontSizeSmall; + color: #777; + } + .chat-message.course-theme { + background-color: @white; + border: 1px dotted #ddd; + .border-radius(4px); + padding: 4px 10px; + margin: 10px 0; + .time { + float: right; + font-size: 11px; + color: #777; + } + } + .mdl-chat-my-entry .chat-message.course-theme { + background-color:#f6f6f6; + .user { + font-weight: bold; + } + } + } +} + +// RTL overides +.yui-skin-sam .yui-layout.path-mod-chat-gui_ajax.dir-rtl { + .yui-layout-unit-right { + padding: 0; + } + .yui-layout-unit div.yui-layout-bd { + text-align: right; + } + #chat-userlist { + #users-list { + img { + margin-left: 8px; + } + } + } + #chat-messages { + .chat-message.course-theme { + .time { + float: left; + } + .user { + float: right; + } + .chat-message-meta { + height: 20px; + } + .text { + text-align: right; + } + } + } +} diff --git a/less/moodle/core.less b/less/moodle/core.less new file mode 100644 index 00000000..71dc1ff1 --- /dev/null +++ b/less/moodle/core.less @@ -0,0 +1,2230 @@ +/* core.less */ + +/** Page layout CSS starts **/ +.layout-option-noheader #page-header, +.layout-option-nonavbar #page-navbar, +.layout-option-nofooter #page-footer, +.layout-option-nocourseheader .course-content-header, +.layout-option-nocoursefooter .course-content-footer { + display:none; +} + +.empty-region-side-pre #block-region-side-pre, // Pre region is empty. +.empty-region-side-post #block-region-side-post, // Post region is empty. +.jsenabled.docked-region-side-post #block-region-side-post, // All post blocks are docked. +.jsenabled.docked-region-side-pre #block-region-side-pre { // All pre blocks are docked. + display:none; +} + +.empty-region-side-post #region-bs-main-and-pre.span9, // LTR with no post area. +.empty-region-side-pre #region-bs-main-and-post.span9, // RTL with no pre area. +.empty-region-side-post #region-bs-main-and-post.span9 #region-main.span8, // RTL with no post area. +.jsenabled.docked-region-side-post #region-bs-main-and-pre.span9, // LTR with all post blocks docked. +.jsenabled.docked-region-side-post #region-bs-main-and-post.span9 #region-main.span8, +.jsenabled.docked-region-side-pre #region-bs-main-and-post.span9 { // RTL with all pre blocks docked. + width: 100%; +} + +.empty-region-side-pre #region-bs-main-and-pre.span9 #region-main, // LTR with no pre area. +.jsenabled.docked-region-side-pre #region-bs-main-and-pre.span9 #region-main { // LTR with all pre blocks docked. + float:none; + width:100%; +} + +.empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use. +.jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use. + #region-main.span8 { + /** Increase the span size by 1 **/ + .fluid-span(9); + } + #block-region-side-pre.span4 { + /** Decrease the span size by 1 **/ + .fluid-span(3); + } +} + +.empty-region-side-pre #region-bs-main-and-post.span9 #region-main.span8, // RTL with no pre area. +.jsenabled.docked-region-side-pre #region-bs-main-and-post.span9 #region-main.span8 { // RTL with all pre blocks docked. + float: right; +} + +/** Page layout CSS ends **/ + +.dir-ltr, +.mdl-left, +.dir-rtl .mdl-right { + text-align: left; +} +.dir-rtl, +.mdl-right, +.dir-rtl .mdl-left { + text-align: right; +} +#add, +#remove, +.centerpara, +.mdl-align { + text-align: center; +} +a.dimmed, +a.dimmed:link, +a.dimmed:visited, +a.dimmed_text, +a.dimmed_text:link, +a.dimmed_text:visited, +.dimmed_text, +.dimmed_text a, +.dimmed_text a:link, +.dimmed_text a:visited, +.usersuspended, +.usersuspended a, +.usersuspended a:link, +.usersuspended a:visited, +.dimmed_category, +.dimmed_category a { + .muted +} +.activity.label .dimmed_text { + .opacity(50) +} +.unlist, +.unlist li, +.inline-list, +.inline-list li, +.block .list, +.block .list li, +.section li.activity, +.section li.movehere, +.tabtree li { + list-style: none; + margin: 0; + padding: 0; +} +.inline, +.inline-list li { + display: inline; +} +.notifytiny { + font-size: @fontSizeMini; +} +.notifytiny li, +.notifytiny td { + font-size: 100%; +} +.red, +.notifyproblem { + color: @errorText; +} +.green, +.notifysuccess { + color: @successText; +} +.highlight { + background: @infoBackground; +} +.reportlink { + text-align: right; +} +a.autolink.glossary:hover { + cursor: help; +} +/* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */ +.collapsibleregioncaption { + white-space: nowrap; +} +.collapsibleregioncaption img { + vertical-align: middle; +} +.jsenabled .hiddenifjs { + display: none; +} +.visibleifjs { + display: none; +} +.jsenabled .visibleifjs { + display: inline; +} +.jsenabled .collapsibleregion { + overflow: hidden; +} +.jsenabled .collapsed .collapsibleregioninner { + visibility: hidden; +} +.collapsible-actions { + display: none; + text-align: right; +} +.dir-rtl .collapsible-actions { + text-align: left; +} +.jsenabled .collapsible-actions { + display: block; +} +.collapsible-actions .collapseexpand { + padding-left: 20px; + background: url([[pix:t/collapsed]]) 2px center no-repeat; +} +.dir-rtl .collapsible-actions .collapseexpand { + padding-right: 20px; + padding-left: 0; + background: url([[pix:t/collapsed_rtl]]) right center no-repeat; +} +.collapsible-actions .collapse-all, +.dir-rtl .collapsible-actions .collapse-all { + background-image: url([[pix:t/expanded]]); +} +.yui-overlay .yui-widget-bd { + background-color: #FFEE69; + border: 1px solid #A6982B; + border-top-color: #D4C237; + color: #000000; + left: 0; + padding: 2px 5px; + position: relative; + top: 0; + z-index: 1; +} +.clearer { + background: transparent; + border-width: 0; + clear: both; + display: block; + height: 1px; + margin: 0; + padding: 0; +} +.bold, +.warning, +.errorbox .title, +.pagingbar .title, +.pagingbar .thispage { + font-weight: bold; +} +img.resize { + height: 1em; + width: 1em; +} +.block img.resize, +.breadcrumb img.resize { + height: 0.9em; + width: 0.8em; +} +/* Icon styles */ +img.icon { + height: 16px; + vertical-align: text-bottom; + width: 16px; + padding-right: 6px; +} +.dir-rtl img.icon { + padding-left: 6px; + padding-right: 0; +} +img.iconsmall { + height: 12px; + margin-right: 3px; + vertical-align: middle; + width: 12px; +} +img.iconhelp, .helplink img { + height: 16px; + padding-left: 3px; + vertical-align: text-bottom; + width: 16px; +} +h1 img.iconhelp, h1 img.icon, +h2 img.iconhelp, h2 img.icon, +h3 img.iconhelp, h3 img.icon, +h4 img.iconhelp, h4 img.icon, +h5 img.iconhelp, h5 img.icon, +h6 img.iconhelp, h6 img.icon { + vertical-align: middle; + padding: 4px; +} +.dir-rtl img.iconhelp, .dir-rtl .helplink img { + padding-right: 3px; + padding-left: 0; +} +img.iconlarge { + height: 24px; + width: 24px; + vertical-align: middle; +} +img.iconsort { + vertical-align: text-bottom; + padding-left: .3em; + margin-bottom: .15em; +} +.dir-rtl img.iconsort { + padding-right: .3em; + padding-left: 0; +} +img.icontoggle { + height: 17px; + vertical-align: middle; + width: 50px; +} +img.iconkbhelp { + height: 17px; + width: 49px; +} +img.icon-pre, .dir-rtl img.icon-post { + padding-right: 3px; + padding-left: 0; +} +img.icon-post, .dir-rtl img.icon-pre { + padding-left: 3px; + padding-right: 0; +} +.boxaligncenter { + margin-left: auto; + margin-right: auto; +} +.boxalignright { + margin-left: auto; + margin-right: 0; +} +.boxalignleft { + margin-left: 0; + margin-right: auto; +} +.boxwidthnarrow { + width: 30%; +} +.boxwidthnormal { + width: 50%; +} +.boxwidthwide { + width: 80%; +} +.headermain { + font-weight: bold; +} +#maincontent { + display: block; + height: 1px; + overflow: hidden; +} +img.uihint { + cursor: help; +} +#addmembersform table { + margin-left: auto; + margin-right: auto; +} +.flexible th { + white-space: nowrap; +} +table.flexible .emptyrow { + display: none; +} +img.emoticon { + vertical-align: middle; + width: 15px; + height: 15px; +} +form.popupform, +form.popupform div { + display: inline; +} +.arrow_button input { + overflow: hidden; +} +.action-icon img.smallicon { + vertical-align: text-bottom; + margin: 0 0.3em; +} + +/** The 1-pixel padding is there to avoid phantom scroll bars on OS X (FF, Safari and Chrome)**/ +.no-overflow { + overflow: auto; + padding-bottom: 1px; +} +.pagelayout-report .no-overflow { + overflow: visible; +} +.no-overflow > .generaltable { + margin-bottom: 0; +} +// Accessibility features + +// Accessibility: text 'seen' by screen readers but not visual users. +.accesshide { + position: absolute; + left: -10000px; + font-weight: normal; + font-size: 1em; +} +.dir-rtl .accesshide { + top: -30000px; + left: auto; +} +span.hide, +div.hide { + display: none; +} +// Accessibility: Skip block link, for keyboard-only users. +a.skip-block, +a.skip { + position: absolute; + top: -1000em; + font-size: 0.85em; + text-decoration: none; +} +a.skip-block:focus, +a.skip-block:active, +a.skip:focus, +a.skip:active { + position: static; + display: block; +} +.skip-block-to { + display: block; + height: 1px; + overflow: hidden; +} +// Blogs +.addbloglink { + text-align: center; +} +.blog_entry .audience { + text-align: right; + padding-right: 4px; +} +.blog_entry .tags { + margin-top: 15px; +} +.blog_entry .tags .action-icon img.smallicon { + height: 16px; + width: 16px; +} +.blog_entry .content { + margin-left: 43px; +} +// Group +#page-group-index #groupeditform { + text-align: center; +} +#doc-contents h1 { + margin: 1em 0 0 0; +} +#doc-contents ul { + margin: 0; + padding: 0; + width: 90%; +} +#doc-contents ul li { + list-style-type: none; +} +.groupmanagementtable td { + vertical-align: top; +} +.groupmanagementtable #existingcell, +.groupmanagementtable #potentialcell { + width: 42%; +} +.groupmanagementtable #buttonscell { + width: 16%; +} +.groupmanagementtable #buttonscell p.arrow_button input { + width: auto; + min-width: 80%; + margin: 0 auto; +} +.groupmanagementtable #removeselect_wrapper, +.groupmanagementtable #addselect_wrapper { + width: 100%; +} +.groupmanagementtable #removeselect_wrapper label, +.groupmanagementtable #addselect_wrapper label { + font-weight: normal; +} +.dir-rtl .groupmanagementtable p { + text-align: right; +} +#group-usersummary { + width: 14em; +} +.groupselector { + margin-top: 3px; + margin-bottom: 3px; + display: inline-block; +} +.groupselector label { + display: inline-block; +} +// Login +.loginbox { + margin: 15px; + overflow: visible; +} +.loginbox.twocolumns { + margin: 15px; +} +.loginbox h2, +.loginbox .subcontent { + margin: 5px; + padding: 10px; + text-align: center; +} +.loginbox .loginpanel .desc { + margin: 0; + padding: 0; + margin-bottom: 5px; + margin-top:15px; +} +.loginbox .signuppanel .subcontent { + text-align: left; +} +.dir-rtl .loginbox .signuppanel .subcontent { + text-align: right; +} +.loginbox .loginsub { + margin-left: 0; + margin-right: 0; +} +.loginbox .guestsub, +.loginbox .forgotsub, +.loginbox .potentialidps { + margin: 5px 12%; +} +.loginbox .potentialidps .potentialidplist { + margin-left: 40%; +} +.loginbox .potentialidps .potentialidplist div { + text-align: left; +} +.loginbox .loginform { + margin-top: 1em; + text-align: left; +} +.loginbox .loginform .form-label { + float: left; + text-align: right; + width: 49%; + direction: rtl; + white-space: nowrap; +} +.dir-rtl .loginbox .loginform .form-label { + float: left; + text-align: right; + width: 49%; + direction: ltr; + white-space: nowrap; +} +.loginbox .loginform .form-input { + float: right; + width: 50%; +} +.loginbox .loginform .form-input input { + width: 6em; +} +.loginbox .signupform { + margin-top: 1em; + text-align: center; +} +.loginbox.twocolumns .loginpanel, +.loginbox.twocolumns .signuppanel { + width: 48%; + border: 0; + margin: 0; + padding: 0; + .box-sizing(border-box); + display: block; + float: left; + margin-left: 2.76243%; + min-height: 30px; + margin-bottom: -2000px; + padding-bottom: 2000px; +} +.dir-rtl { + .loginbox.twocolumns .loginpanel, + .loginbox.twocolumns .signuppanel { + float:right; + } +} + +.loginbox .potentialidp .smallicon { + vertical-align: text-bottom; + margin: 0 .3em; +} + +// Notes +.notepost { + margin-bottom: 1em; +} +.notepost .userpicture { + float: left; + margin-right: 5px; +} +.notepost .content, +.notepost .footer { + clear: both; +} +.notesgroup { + margin-left: 20px; +} + +// My Moodle +.path-my .coursebox .overview { + margin: 15px 30px 10px 30px; +} +.path-my .coursebox .info { + float: none; + margin: 0; +} + +// Modules +.mod_introbox { + padding: 10px; +} +table.mod_index { + width: 100%; +} + +// Comments +.comment-ctrl { + font-size: 12px; + display: none; + margin: 0; + padding: 0; +} +.comment-ctrl h5 { + margin: 0; + padding: 5px; +} +.comment-area { + max-width: 400px; + padding: 5px; +} +.comment-area textarea { + width: 100%; + overflow: auto; +} +.comment-area .fd { + text-align: right; +} +.comment-meta span { + color: gray; +} +.comment-link img { + vertical-align: text-bottom; +} +.comment-list { + font-size: 11px; + overflow: auto; + list-style: none; + padding: 0; + margin: 0; +} +.comment-list li { + margin: 2px; + list-style: none; + margin-bottom: 5px; + clear: both; + padding: .3em; + position: relative; +} +.comment-list li.first { + display: none +} +.comment-paging{ + text-align: center; +} +.comment-paging .pageno{ + padding: 2px; +} +.comment-paging .curpage{ + border: 1px solid #CCC; +} +.comment-message .picture { + width: 20px; + float: left; +} +.dir-rtl .comment-message .picture { + float: right; +} +.comment-message .text { + margin: 0; + padding: 0; +} +.comment-message .text p { + padding: 0; + margin: 0 18px 0 0; +} +.comment-delete { + position: absolute; + top: 0; + right: 0; + margin: .3em; +} +.dir-rtl .comment-delete { + position: absolute; + left: 0; + right: auto; + margin: .3em; +} +.comment-delete-confirm { + background: #eee; + padding: 2px; + width: 5em; + text-align: center; +} +.comment-container { + float: left; + margin: 4px; +} +.comment-report-selectall{ + display: none +} +.comment-link { + display: none +} +.jsenabled .comment-link { + display: block +} +.jsenabled .showcommentsnonjs{ + display: none +} +.jsenabled .comment-report-selectall{ + display: inline +} +/** +* Completion progress report +*/ +.completion-expired { + background: @errorBackground; +} +.completion-expected { + font-size: @fontSizeMini; +} +.completion-sortchoice, +.completion-identifyfield { + font-size: @fontSizeMini; + vertical-align: bottom; +} +.completion-progresscell { + text-align: right; +} +.completion-expired .completion-expected { + font-weight: bold; +} +/** +* Tags +*/ +#page-tag-coursetags_edit .coursetag_edit_centered { + position: relative; + width: 600px; + margin: 20px auto; +} +#page-tag-coursetags_edit .coursetag_edit_row { + clear: both; +} +#page-tag-coursetags_edit .coursetag_edit_row .coursetag_edit_left { + float: left; + width: 50%; + text-align: right; +} +#page-tag-coursetags_edit .coursetag_edit_row .coursetag_edit_right { + margin-left: 50%; +} +#page-tag-coursetags_edit .coursetag_edit_input3 { + display: none; +} +#page-tag-coursetags_more .coursetag_more_large { + font-size: 120%; +} +#page-tag-coursetags_more .coursetag_more_small { + font-size: 80%; +} +#page-tag-coursetags_more .coursetag_more_link { + font-size: 80%; +} +#tag-description, +#tag-blogs { + width: 100%; +} +#tag-management-box { + margin-bottom: 10px; + line-height: 20px; +} +#tag-user-table { + padding: 3px; + clear: both; + width: 100%; +} +#tag-user-table { + .clearfix +} +img.user-image { + height: 100px; + width: 100px; +} +#small-tag-cloud-box { + width: 300px; + margin: 0 auto; +} +#big-tag-cloud-box { + width: 600px; + margin: 0 auto; + float: none; +} +ul#tag-cloud-list { + list-style: none; + padding: 5px; + margin: 0; +} +ul#tag-cloud-list li { + margin: 0; + display: inline; + list-style-type: none; +} +#tag-search-box { + text-align: center; + margin: 10px auto; +} +#tag-search-results-container { + padding: 0; + width: 100%; +} +#tag-search-results { + padding: 0; + margin: 15px 20% 0 20%; + float: left; + width: 60%; + display: block; +} +#tag-search-results li { + width: 30%; + float: left; + padding-left: 1%; + text-align: left; + line-height: 20px; + padding-right: 1%; + list-style: none; +} +span.flagged-tag, +span.flagged-tag a { + color: @errorText; +} +table#tag-management-list { + text-align: left; + width: 100%; +} +table#tag-management-list td, +table#tag-management-list th { + vertical-align: middle; + text-align: left; + padding: 4px; +} +.tag-management-form { + text-align: center; +} +#relatedtags-autocomplete-container { + margin-left: auto; + margin-right: auto; + min-height: 4.6em; + width: 100%; +} +#relatedtags-autocomplete { + position: relative; + display: block; + width: 60%; + margin-left: auto; + margin-right: auto; +} +#relatedtags-autocomplete .yui-ac-content { + position: absolute; + width: 420px; + left: 20%; + border: 1px solid #404040; + background: #fff; + overflow: hidden; + z-index: 9050; +} +#relatedtags-autocomplete .ysearchquery { + position: absolute; + right: 10px; + color: #808080; + z-index: 10; +} +#relatedtags-autocomplete .yui-ac-shadow { + position: absolute; + margin: .3em; + width: 100%; + background: #a0a0a0; + z-index: 9049; +} +#relatedtags-autocomplete ul { + padding: 0; + width: 100%; + margin: 0; + list-style-type: none; +} +#relatedtags-autocomplete li { + padding: 0 5px; + cursor: default; + white-space: nowrap; +} +#relatedtags-autocomplete li.yui-ac-highlight{ + background: #FFFFCC; +} +h2.tag-heading, +div#tag-description, +div#tag-blogs, +body.tag .managelink { + padding: 5px; +} +.tag_cloud .s20 { + font-size: 1.5em; + font-weight: bold; +} +.tag_cloud .s19 { + font-size: 1.5em; +} +.tag_cloud .s18 { + font-size: 1.4em; + font-weight: bold; +} +.tag_cloud .s17 { + font-size: 1.4em; +} +.tag_cloud .s16 { + font-size: 1.3em; + font-weight: bold; +} +.tag_cloud .s15 { + font-size: 1.3em; +} +.tag_cloud .s14 { + font-size: 1.2em; + font-weight: bold; +} +.tag_cloud .s13 { + font-size: 1.2em; +} +.tag_cloud .s12, +.tag_cloud .s11 { + font-size: 1.1em; + font-weight: bold; +} +.tag_cloud .s10, +.tag_cloud .s9 { + font-size: 1.1em; +} +.tag_cloud .s8, +.tag_cloud .s7 { + font-size: 1em; + font-weight: bold; +} +.tag_cloud .s6, +.tag_cloud .s5 { + font-size: 1em; +} +.tag_cloud .s4, +.tag_cloud .s3 { + font-size: 0.9em; + font-weight: bold; +} +.tag_cloud .s2, +.tag_cloud .s1 { + font-size: 0.9em; +} +.tag_cloud .s0 { + font-size: 0.8em; +} +/** +* Web Service +*/ +#webservice-doc-generator td { + text-align: left; + border: 0 solid black; +} +/** +* Smart Select Element +*/ +.smartselect { + position: absolute; +} +.smartselect .smartselect_mask { + background-color: #fff; +} +.smartselect ul { + padding: 0; + margin: 0; +} +.smartselect ul li { + list-style: none; +} +.smartselect .smartselect_menu { + margin-right: 5px; +} +.safari .smartselect .smartselect_menu { + margin-left: 2px; +} +.smartselect .smartselect_menu, +.smartselect .smartselect_submenu { + border: 1px solid #000; + background-color: #FFF; + display: none; +} +.smartselect .smartselect_menu.visible, +.smartselect .smartselect_submenu.visible { + display: block; +} +.smartselect .smartselect_menu_content ul li { + position: relative; + padding: 2px 5px; +} +.smartselect .smartselect_menu_content ul li a { + color: #333; + text-decoration: none; +} +.smartselect .smartselect_menu_content ul li a.selectable { + color: inherit; +} +.smartselect .smartselect_submenuitem { + background-image: url([[pix:moodle|t/collapsed]]); + background-repeat: no-repeat; + background-position: 100%; +} +/** Spanning mode */ +.smartselect.spanningmenu .smartselect_submenu { + position: absolute; + top: -1px; + left: 100%; +} +.smartselect.spanningmenu .smartselect_submenu a { + white-space: nowrap; + padding-right: 16px; +} +.smartselect.spanningmenu .smartselect_menu_content ul li a.selectable:hover { + text-decoration: underline; +} +/** Compact mode */ +.smartselect.compactmenu .smartselect_submenu { + position: relative; + margin: 2px -3px; + margin-left: 10px; + display: none; + border-width: 0; + z-index: 1010; +} +.smartselect.compactmenu .smartselect_submenu.visible { + display: block; +} +.smartselect.compactmenu .smartselect_menu { + z-index: 1000; + overflow: hidden; +} +.smartselect.compactmenu .smartselect_submenu .smartselect_submenu { + z-index: 1020; +} +.smartselect.compactmenu .smartselect_submenuitem:hover > .smartselect_menuitem_label { + font-weight: bold; +} +/** +* Registration +*/ +#page-admin-registration-register .registration_textfield { + width: 300px; +} +/** +* Enrol +*/ +.userenrolment { + width: 100%; + border-collapse: collapse; +} +.userenrolment td { + padding: 0; + height: 41px; +} +.userenrolment .subfield { + margin-right: 5px; +} +.userenrolment .col_userdetails .subfield_picture { + float: left; +} +.userenrolment .col_lastseen { + width: 150px; +} +.userenrolment .col_role { + width: 262px; +} +.userenrolment .col_role .roles { + margin-right: 30px; +} +.userenrolment .col_role .role { + float: left; + padding: 3px; + margin: 3px; +} +.dir-rtl .userenrolment .col_role .role { + float: right; +} +.userenrolment .col_role .role a { + margin-left: 3px; + cursor: pointer; +} +.userenrolment .col_role .addrole { + float: right; + width: 18px; + height: 18px; + margin: 3px; + text-align: center; + background-color: @successBackground; + border: 1px solid @successBorder; +} +.userenrolment .col_role .addrole img { + vertical-align: baseline; +} +.userenrolment .hasAllRoles .col_role .addrole { + display: none; +} +.userenrolment .col_group .groups { + margin-right: 30px; +} +.userenrolment .col_group .group { + float: left; + padding: 3px; + margin: 3px; + white-space: nowrap; +} +.userenrolment .col_group .group a { + margin-left: 3px; + cursor: pointer; +} +.userenrolment .col_group .addgroup { + float: right; + width: 18px; + margin: 3px; + height: 18px; + text-align: center; +} +.userenrolment .col_group .addgroup a img { + vertical-align: bottom; +} +.userenrolment .col_enrol .enrolment { + float: left; + padding: 3px; + margin: 3px; +} +.userenrolment .col_enrol .enrolment a { + float: right; + margin-left: 3px; +} +#page-enrol-users { + .enrol_user_buttons { + float: right; + .enrolusersbutton { + display: inline; + div, + form { + display: inline; + margin-right: 0; + } + } + } + #filterform { + .well; + .well-small; + display: inline-block; + .fitem { + display: inline-block; + line-height: @baseLineHeight * 2; + margin-right: .3em; + white-space: nowrap; + label { + display: inline; + line-height: @baseLineHeight; + padding-right: .3em; + } + :before, + :after { + display: inline; + } + } + div, + fieldset { + display: inline; + float: none; + clear: none; + width: auto; + margin: 0; + } + select, + .ftext input { + width: 7em; + } + input, + select { + margin-bottom: 0; + } + } + .user-enroller-panel .uep-search-results .user .details { + width: 237px; + } +} +.dir-rtl { + page-enrol-users { + .col_userdetails { + .subfield_picture { + float: right; + } + } + .enrol_user_buttons { + float: left; + .enrolusersbutton { + margin-left: 0; + margin-right: 1em; + div { + margin-left: 0; + } + } + } + #filterform { + .fitem { + margin-right: 0; + margin-left: .3em; + label { + padding-right: 0; + padding-left: .3em; + } + } + } + } +} + +/** +* Overide for RTL layout +**/ +.dir-rtl .headermain { + float: right; +} +.dir-rtl .headermenu { + float: left; +} +.dir-rtl .loginbox .loginform .form-label { + float: right; + text-align: left; +} +.dir-rtl .loginbox .loginform .form-input { + text-align: right; + margin-right: 1%; +} +.dir-rtl .yui3-menu-hidden { + left: 0; +} +#page-admin-roles-define.dir-rtl #rolesform .felement { + margin-right: 180px; +} +#page-message-edit.dir-rtl table.generaltable th.c0 { + text-align: right; +} +.corelightbox { + background-color: #CCC; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; +} +.corelightbox img { + position: fixed; + top: 50%; + left: 50%; +} + +.mod-indent-outer { + display: table; +} +.mod-indent { + display: table-cell; +} +.label .mod-indent { + float:left; + padding-top:20px +} + +/* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */ +@mod-indent-size: 30px; +@mod-indent-levels: 16; +.mod-indent-generate(@n, @i: 1) when (@i =< @n) { + .mod-indent-@{i} { + width: (@i * @mod-indent-size); + } + .mod-indent-generate(@n, (@i + 1)); +} +.mod-indent-generate(@n, @i: 1) when (@i = @n) { + .mod-indent-huge { + width: (@i * @mod-indent-size); + } +} +.mod-indent-generate(@mod-indent-levels); + +/* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */ +.resourcecontent .mediaplugin_mp3 object { + height: 25px; + width: 600px +} +.resourcecontent audio.mediaplugin_html5audio { + width: 600px +} +/** Large resource images should avoid hidden overflow **/ +.resourceimage { + max-width: 100%; +} +/* Audio player size in 'inline' mode (can only change width, as above) */ +.mediaplugin_mp3 object { + height: 15px; + width: 300px +} +audio.mediaplugin_html5audio { + width: 300px +} +/* TinyMCE moodle media preview frame should not have padding */ +.core_media_preview.pagelayout-embedded #content { + padding: 0; +} +.core_media_preview.pagelayout-embedded #maincontent { + height: 0; +} +body#page-lib-editor-tinymce-plugins-moodlemedia-preview { + padding: 0; + margin: 0; + min-width: 0; + background: none; +} +/** Fix YUI 2 Treeview for Right to left languages **/ +.dir-rtl .ygtvtn, +.dir-rtl .ygtvtm, +.dir-rtl .ygtvtmh, +.dir-rtl .ygtvtmhh, +.dir-rtl .ygtvtp, +.dir-rtl .ygtvtph, +.dir-rtl .ygtvtphh, +.dir-rtl .ygtvln, +.dir-rtl .ygtvlm, +.dir-rtl .ygtvlmh, +.dir-rtl .ygtvlmhh, +.dir-rtl .ygtvlp, +.dir-rtl .ygtvlph, +.dir-rtl .ygtvlphh, +.dir-rtl .ygtvdepthcell, +.dir-rtl .ygtvok, +.dir-rtl .ygtvok:hover, +.dir-rtl .ygtvcancel, +.dir-rtl .ygtvcancel:hover { + width: 18px; + height: 22px; + background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]); + background-repeat: no-repeat; + cursor: pointer; +} +.dir-rtl .ygtvtn { + background-position: 0 -5600px; +} +.dir-rtl .ygtvtm { + background-position: 0 -4000px; +} +.dir-rtl .ygtvtmh, +.dir-rtl .ygtvtmhh { + background-position: 0 -4800px; +} +.dir-rtl .ygtvtp { + background-position: 0 -6400px; +} +.dir-rtl .ygtvtph, +.dir-rtl .ygtvtphh { + background-position: 0 -7200px; +} +.dir-rtl .ygtvln { + background-position: 0 -1600px; +} +.dir-rtl .ygtvlm { + background-position: 0 0; +} +.dir-rtl .ygtvlmh, +.dir-rtl .ygtvlmhh { + background-position: 0 -800px; +} +.dir-rtl .ygtvlp { + background-position: 0 -2400px; +} +.dir-rtl .ygtvlph, +.dir-rtl .ygtvlphh { + background-position: 0 -3200px +} +.dir-rtl .ygtvdepthcell { + background-position: 0 -8000px; +} +.dir-rtl .ygtvok { + background-position: 0 -8800px; +} +.dir-rtl .ygtvok:hover { + background-position: 0 -8844px; +} +.dir-rtl .ygtvcancel { + background-position: 0 -8822px; +} +.dir-rtl .ygtvcancel:hover { + background-position: 0 -8866px; +} +.dir-rtl.yui-skin-sam .yui-panel .hd { + text-align: right; +} +.dir-rtl .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd { + text-align: right; +} +/** Fix TinyMCE editor right to left **/ +.dir-rtl .clearlooks2.ie9 .mceAlert .mceMiddle span,.dir-rtl .clearlooks2 .mceConfirm .mceMiddle span { + top: 44px; +} +.dir-rtl .o2k7Skin table, +.dir-rtl .o2k7Skin tbody, +.dir-rtl .o2k7Skin a, +.dir-rtl .o2k7Skin img, +.dir-rtl .o2k7Skin tr, +.dir-rtl .o2k7Skin div, +.dir-rtl .o2k7Skin td, +.dir-rtl .o2k7Skin iframe, +.dir-rtl .o2k7Skin span, +.dir-rtl .o2k7Skin *, +.dir-rtl .o2k7Skin .mceText, +.dir-rtl .o2k7Skin .mceListBox .mceText { + text-align: right; +} +.path-rating .ratingtable { + width: 100%; + margin-bottom: 1em; +} +.path-rating .ratingtable th.rating { + width: 100%; +} +.path-rating .ratingtable td.rating, +.path-rating .ratingtable td.time { + white-space: nowrap; + text-align: center; +} +.initialbar { + a, strong { + padding-left: 3px; + padding-right: 3px; + } +} +/* Moodle Dialogue Settings (moodle-core-dialogue) */ +.moodle-dialogue-base .moodle-dialogue-lightbox { + background-color: #AAA; +} +.moodle-dialogue-base .hidden, +.moodle-dialogue-base .moodle-dialogue-hidden { + display: none; +} +.no-scrolling { + overflow: hidden; +} +.moodle-dialogue-base .moodle-dialogue-fullscreen { + left: 0px; + top: 0px; + right: 0px; + bottom: -50px; + position: fixed; +} +.moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content { + overflow: auto; +} +.moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton { + width: 28px; + height: 16px; + background-size: 100%; +} +.moodle-dialogue-base .moodle-dialogue { + padding: 0; + margin: 0; + background: none; + border: none; + z-index: 600; + outline: #000 dotted 0; +} +.moodle-dialogue-base .moodle-dialogue-wrap { + margin-top: -3px; + margin-left: -3px; + background-color: #fff; + border: 1px solid #ccc; + .border-radius(10px); + .box-shadow(5px 5px 20px 0 #666); +} +.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd, +.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd { + margin: 0; + padding: 5px; + font-size: 12px; + font-weight: normal; + letter-spacing: 1px; + color: #333; + text-align: center; + text-shadow: 1px 1px 1px #fff; + .border-radius(10px 10px 0 0); + border-bottom: 1px solid #bbb; + background: #ccc; + #gradient > .vertical(#fff, #ccc); + filter: 0; +} +.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 { + margin: 0; + padding: 0; + display: inline; + font-size: 100%; + font-weight: bold; +} +.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons { + padding: 5px; +} +.moodle-dialogue-base .closebutton { + width: 25px; + height: 15px; + float: right; + vertical-align: middle; + display: inline-block; + cursor: pointer; + padding: 0; + background-image: url([[pix:theme|sprite]]); + background-repeat: no-repeat; + border-style: none; +} +.dir-rtl .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons { + left: 0; + right: auto; +} +.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd { + padding: 1em; + line-height: 2em; + color: #555; + font-size: 12px; +} +.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-content { + padding: 0; + background: #FFF; +} + +.moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd { + padding: 10px; + font-size: 16px; +} + +.moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content { + overflow: auto; + position: absolute; + top: 0px; + bottom: 50px; + left: 0px; + right: 0px; + margin: 0px; + border: 0px; +} +.moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd, +.moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-wrap { + border-radius: 0px; +} +.moodle-dialogue-confirm .confirmation-dialogue { + text-align: center; +} +.moodle-dialogue-confirm .confirmation-dialogue input { + text-align: center; +} +.moodle-dialogue-exception .moodle-exception-message { + text-align: center +} +.moodle-dialogue-exception .moodle-exception-param label { + font-weight: bold; +} +.moodle-dialogue-exception .param-stacktrace label { + background-color: #EEE; + border: 1px solid #ccc; + border-bottom-width: 0; +} +.moodle-dialogue-exception .param-stacktrace pre { + border: 1px solid #ccc; + background-color: #fff; +} +.moodle-dialogue-exception .param-stacktrace .stacktrace-file { + color: navy; + font-size: @fontSizeSmall; +} +.moodle-dialogue-exception .param-stacktrace .stacktrace-line { + color: @errorText; + font-size: @fontSizeSmall; +} +.moodle-dialogue-exception .param-stacktrace .stacktrace-call { + color: #333; + font-size: 90%; + border-bottom: 1px solid #eee; +} +.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft { + padding: 0; + margin: 0.7em 1em; + text-align: right; + background-color: #FFF; + font-size: 12px; +} +.moodle-dialogue-confirm .confirmation-message { + margin: 0.5em 1em; +} +.moodle-dialogue-confirm .confirmation-dialogue input { + min-width: 80px +} +.moodle-dialogue-exception .moodle-exception-message { + margin: 1em; +} +.moodle-dialogue-exception .moodle-exception-param { + margin-bottom: 0.5em; +} +.moodle-dialogue-exception .moodle-exception-param label { + width: 150px; +} +.moodle-dialogue-exception .param-stacktrace label { + display: block; + margin: 0; + padding: 4px 1em; +} +.moodle-dialogue-exception .param-stacktrace pre { + display: block; + height: 200px; + overflow: auto; +} +.moodle-dialogue-exception .param-stacktrace .stacktrace-file { + display: inline-block; + margin: 4px 0; +} +.moodle-dialogue-exception .param-stacktrace .stacktrace-line { + display: inline-block; + width: 50px; + margin: 4px 1em; +} +.moodle-dialogue-exception .param-stacktrace .stacktrace-call { + padding-left: 25px; + margin-bottom: 4px; + padding-bottom: 4px; +} +.moodle-dialogue .moodle-dialogue-bd .content-lightbox { + .opacity(75); + width: 100%; + height: 100%; + top: 0; + left: 0; + background-color: white; + text-align: center; + padding: 10% 0; +} +/* Apply a default max-height on tooltip text */ +.moodle-dialogue .tooltiptext { + max-height: 300px; +} + +.moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip { + z-index: 3001; + + .moodle-dialogue-bd { + overflow: auto; + } +} + +/* Question Bank - Question Chooser "Close" button */ +#page-question-edit.dir-rtl a.container-close { + right: auto; + left: 6px; +} +/** +* Chooser Dialogues (moodle-core-chooserdialogue) +* +* This CSS belong to the chooser dialogue which should work both with, and +* without javascript enabled +*/ +/* Hide the dialog and it's title */ +.chooserdialoguebody, +.choosertitle { + display: none; +} +.moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft { + margin: 0; +} +.chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd { + padding: 0; + background: #F2F2F2; + .border-bottom-radius(10px); +} +/* Center the submit buttons within the area */ +.choosercontainer #chooseform .submitbuttons { + padding: 0.7em 0; + text-align: center; +} +/* Fixed for safari browser on iPhone4S with ios7.*/ +@media (max-height: 639px) { + .ios.safari .choosercontainer #chooseform .submitbuttons { + padding: 45px 0; + } +} +.choosercontainer #chooseform .submitbuttons input { + min-width: 100px; + margin: 0 0.5em; +} +/* Various settings for the options area */ +.choosercontainer #chooseform .options { + position: relative; + border-bottom: 1px solid #BBBBBB; +} +/* Only set these options if we're showing the js container */ +.jsenabled .choosercontainer #chooseform .alloptions { + overflow-x: hidden; + overflow-y: auto; + max-width: 20.3em; + .box-shadow(inset 0 0 30px 0px #ccc); +} +.dir-rtl.jsenabled .choosercontainer #chooseform .alloptions { + max-width: 18.3em; +} +/* Settings for option rows and option subtypes */ +.choosercontainer #chooseform .moduletypetitle, +.choosercontainer #chooseform .option, +.choosercontainer #chooseform .nonoption { + margin-bottom: 0; + padding: 0 1.6em 0 1.6em; +} +.choosercontainer #chooseform .moduletypetitle { + text-transform: uppercase; + padding-top: 1.2em; + padding-bottom: 0.4em; +} +.choosercontainer #chooseform .option .typename, +.choosercontainer #chooseform .option span.modicon img.icon, +.choosercontainer #chooseform .nonoption .typename, +.choosercontainer #chooseform .nonoption span.modicon img.icon { + padding: 0 0 0 0.5em; +} +.dir-rtl .choosercontainer #chooseform .option .typename, +.dir-rtl .choosercontainer #chooseform .option span.modicon img.icon, +.dir-rtl .choosercontainer #chooseform .nonoption .typename, +.dir-rtl .choosercontainer #chooseform .nonoption span.modicon img.icon { + padding: 0 0.5em 0 0; +} +.choosercontainer #chooseform .option span.modicon img.icon, +.choosercontainer #chooseform .nonoption span.modicon img.icon { + height: 24px; + width: 24px; +} +.choosercontainer #chooseform .option input[type=radio], +.choosercontainer #chooseform .option span.typename, +.choosercontainer #chooseform .option span.modicon { + vertical-align: middle; +} +.choosercontainer #chooseform .option label { + display: block; + padding: 0.3em 0 0.1em 0; + border-bottom: 1px solid #FFFFFF; +} +.choosercontainer #chooseform .nonoption { + padding-left: 2.7em; + padding-top: 0.3em; + padding-bottom: 0.1em; +} +.dir-rtl .choosercontainer #chooseform .nonoption { + padding-right: 2.7em; + padding-left: 0; +} +.choosercontainer #chooseform .subtype { + margin-bottom: 0; + padding: 0 1.6em 0 3.2em; +} +.dir-rtl .choosercontainer #chooseform .subtype { + padding: 0 3.2em 0 1.6em; +} +.choosercontainer #chooseform .subtype .typename { + margin: 0 0 0 0.2em; +} +.dir-rtl .choosercontainer #chooseform .subtype .typename { + margin: 0 0.2em 0 0; +} +/* The instruction/help area */ +.jsenabled .choosercontainer #chooseform .instruction, +.jsenabled .choosercontainer #chooseform .typesummary { + display: none; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 20.3em; + margin: 0; + padding: 1.6em; + background-color: @bodyBackground; + overflow-x: hidden; + overflow-y: auto; + line-height: 2em; +} +.dir-rtl.jsenabled .choosercontainer #chooseform .instruction, +.dir-rtl.jsenabled .choosercontainer #chooseform .typesummary { + left: 0; + right: 18.5em; + border-right: 1px solid grey; +} +/* Selected option settings */ +.jsenabled .choosercontainer #chooseform .instruction, +.choosercontainer #chooseform .selected .typesummary { + display: block; +} +.choosercontainer #chooseform .selected { + background-color: @bodyBackground; + .box-shadow(0px 0 10px 0 #ccc); +} +.section-modchooser-link img.smallicon { + padding: 3px; +} +/* Form element: listing */ +.formlistingradio { + padding-bottom: 25px; + padding-right: 10px; +} +.formlistinginputradio { + float: left; +} +.formlistingmain { + min-height: 225px; +} +.formlisting { + position: relative; + margin: 15px 0; + padding: 1px 19px 14px; + background-color: white; + border: 1px solid #DDD; + .border-radius(4px); +} +.formlistingmore { + position: absolute; + cursor: pointer; + bottom: -1px; + right: -1px; + padding: 3px 7px; + font-size: 12px; + font-weight: bold; + background-color: whiteSmoke; + border: 1px solid #ddd; + color: #9DA0A4; + .border-radius(4px 0 4px 0); +} +.formlistingall { + margin: 15px 0; + padding: 0; + .border-radius(4px); +} +.formlistingrow { + cursor: pointer; + border-bottom: 1px solid; + border-color: #E1E1E8; + border-left: 1px solid #E1E1E8; + border-right: 1px solid #E1E1E8; + background-color: #F7F7F9; + .border-radius(0 0 4px 4px); + padding: 6px; + top: 50%; + left: 50%; + min-height: 34px; + float: left; + width: 150px; +} +body.jsenabled .formlistingradio { + display: none; +} +body.jsenabled .formlisting { + display: block; +} + +/* Badges styles */ +table.collection { + .table; + .table-bordered; + .table-striped; +} +table.collection .name { + text-align: left; + vertical-align: middle; +} +table.collection .awards { + width: 10%; + text-align: center; + vertical-align: middle; +} +table.collection .criteria { + width: 40%; + text-align: left; + vertical-align: top; +} +table.collection .badgeimage, +table.collection .status { + width: 15%; + text-align: center; + vertical-align: middle; +} +table.collection .description { + width: 25%; + text-align: left; +} +table.collection .actions { + width: 11em; + text-align: center; + vertical-align: middle; +} + +a.criteria-action { + padding: 0px 3px; + float: right; +} +table.issuedbadgebox { + width: 750px; + background-color: #FFFFFF; +} +table.badgeissuedimage { + width: 150px; + text-align: center; +} +table.badgeissuedinfo { + width: 600px; +} +table.badgeissuedinfo .bvalue { + text-align: left; + vertical-align: middle; +} +table.badgeissuedinfo .bfield { + width: 125px; + text-align: left; + font-style: italic; +} +.dir-rtl { + table.badgeissuedinfo .bvalue, + table.badgeissuedinfo .bfield { + text-align: right; + } +} +ul.badges { + margin: 0; + list-style: none; +} +.badges li { + position: relative; + display: inline-block; + padding-bottom: 2em; + text-align: center; + vertical-align: top; + width: 150px; +} +.badges li .badge-name { + display: block; + padding: 5px; +} +.badges li > img { + position: absolute; +} +.badges li .badge-image { + width: 90px; + height: 90px; + left: 10px; + top: 0px; + z-index: 1; +} +.badges li .badge-actions { + position: relative; +} +div.badge { + position: relative; + display: block; +} +div.badge .expireimage { + width: 100px; + height: 100px; + left: 20px; + top: 0px; +} +.expireimage { + .opacity(85); + width: 90px; height: 90px; + left: 30px; + top: 0px; + position: absolute; + z-index:10; +} +.badge-profile { + vertical-align: top; +} +.connected { + color: @successText; +} +.notconnected { + color: @errorText; +} +.connecting { + color: @warningText; +} +#page-badges-award .recipienttable tr td { + vertical-align: top; +} +#page-badges-award .recipienttable tr td.actions .actionbutton { + margin: 0.3em 0; + padding: 0.5em 0; + width: 100%; +} +#page-badges-award .recipienttable tr td.existing, +#page-badges-award .recipienttable tr td.potential { + width: 42%; +} + +.statustable { + margin-bottom: 0px; +} +.statusbox.active { + background-color: @successBackground; +} +.statusbox.inactive { + background-color: @warningBackground; +} +.activatebadge { + margin: 0px; + text-align: left; + vertical-align: middle; +} +.dir-rtl .activatebadge { + text-align: right; +} +img#persona_signin { + cursor: pointer; +} +.addcourse { + float: right; +} +.invisiblefieldset { + display: inline; + margin: 0; + padding: 0; + border-width: 0; +} +.breadcrumb-nav { + float: left; + margin-bottom: 10px; +} +.dir-rtl .breadcrumb-nav { + float: right; +} +.breadcrumb-button .singlebutton div { + margin-right: 0; +} +.breadcrumb-nav .breadcrumb { + margin: 0; +} + +/** Action menu component styles **/ +.moodle-actionmenu, +.moodle-actionmenu > ul, +.moodle-actionmenu > ul > li { + display: inline-block; +} + +.moodle-actionmenu ul { + padding: 0; + margin: 0; + list-style-type: none; +} + +.moodle-actionmenu .toggle-display, +.moodle-actionmenu .menu-action-text { + display: none; /** Hidden by default, display none so that we don't take up space. **/ +} + +.jsenabled { + .moodle-actionmenu[data-enhance] { + display: block; + .menu { + display:none; + } + .toggle-display { + display: inline; /** JS is enabled, we'll be using it so return display to normal **/ + .opacity(50); + } + .toggle-display.textmenu { + display: block; + margin-left: 4px; + padding-left: 4px; + padding-right: 4px; + + .iconsmall { + margin: 4px 4px 4px 0px; + padding: 8px 4px 0px 2px; + vertical-align: text-bottom; + } + + .caret { + margin-top: 8px; + margin-left: 2px; + border-top-color: @navbarLinkColor; + &:hover, + &:active { + border-top-color: @navbarLinkColorActive; + } + } + } + } + .moodle-actionmenu[data-enhanced] { + .toggle-display { + .opacity(100); + } + .menu-action-text { + display:inline; + } + } + + &.dir-rtl { + .moodle-actionmenu[data-enhance] { + .toggle-display.textmenu { + margin-left: initial; + margin-right: 4px; + + .caret { + margin-left: initial; + margin-right: 2px; + } + } + } + } +} + +.moodle-actionmenu[data-enhanced].show { + + position: relative; + + .menu { + + display:block; + position: absolute; + text-align: left; + background-color: #fff; + border: 1px solid #ccc; + z-index:1000; + .border-radius(5px); + .box-shadow(5px 5px 20px 0 #666); + + a { + display: block; + color: @dropdownLinkColor; + padding:2px 1em 2px 28px; + &:hover { + color: @dropdownLinkColorHover; + background-color: @dropdownLinkBackgroundHover; + } + &:first-child { + .border-top-radius(4px); + } + &:last-child { + .border-bottom-radius(4px); + } + } + a.hidden { + display:none; + } + img { + vertical-align: middle; + } + .iconsmall { + margin: 4px 4px 4px -24px; + } + > li { + display:block; + } + + /** bottom left of button **/ + &.align-tl-bl {top: 100%;left:0;margin-top: 4px;} + &.align-tr-bl {top: 100%;right: 100%;} + &.align-bl-bl {bottom: 100%;left:0;} + &.align-br-bl {bottom: 100%;right: 100%;} + /** bottom right of button **/ + &.align-tl-br {top: 100%;left:100%;} + &.align-tr-br {top: 100%;right: 0;margin-top: 4px;} + &.align-bl-br {bottom: 100%;left:100%;} + &.align-br-br {bottom: 100%;right: 0;} + /** top left of button **/ + &.align-tl-tl {top: 0;left:0;} + &.align-tr-tl {top: 0;right: 100%;margin-right: 4px;} + &.align-bl-tl {bottom: 100%;left:0;margin-bottom: 4px;} + &.align-br-tl {bottom: 100%;right: 100%;} + /** top right of button **/ + &.align-tl-tr {top: 0;left:100%;margin-left: 4px;} + &.align-tr-tr {top: 0;right: 0;} + &.align-bl-tr {bottom: 100%;left:100%;} + &.align-br-tr {bottom: 100%;right: 0;margin-bottom: 4px;} + } +} + +.block .moodle-actionmenu { + text-align: right; +} + +.dir-rtl { + .moodle-actionmenu[data-enhanced].show { + .menu { + text-align: right; + left: 0; + right: auto; + .iconsmall { + margin-right:0; + margin-left:8px; + } + + /** bottom left of button **/ + &.align-tl-bl {left: auto; right: 0;} + &.align-tr-bl {right: auto; left: 100%;} + &.align-bl-bl {left: auto; right: 0;} + &.align-br-bl {right: auto; left: 100%;} + /** bottom right of button **/ + &.align-tl-br {left: auto; right: 100%;} + &.align-tr-br {right: auto; left: 0;} + &.align-bl-br {left: auto; right: 100%;} + &.align-br-br {right: auto; left: 0;} + /** top left of button **/ + &.align-tl-tl {left: auto; right: 0;} + &.align-tr-tl {right: auto; left: 100%;} + &.align-bl-tl {left: auto; right: 0;} + &.align-br-tl {right: auto; left: 100%;} + /** top right of button **/ + &.align-tl-tr {left: auto; right: 100%;} + &.align-tr-tr {right: auto; left: 0;} + &.align-bl-tr {left: auto; right: 100%;} + &.align-br-tr {right: auto; left: 0;} + } + } + .block .moodle-actionmenu { + text-align: right; + } +} + +ul.dragdrop-keyboard-drag li { + list-style-type: none; +} + +.block-control-actions .moodle-core-dragdrop-draghandle img { + width: 12px; + height: 12px; +} + +a.disabled:hover, +a.disabled { + text-decoration: none; + cursor: default; + font-style: italic; + color: #808080; +} +body.lockscroll { + height: 100%; + overflow: hidden; +} +.dir-rtl { + ul, ol { + margin-right: 25px; + } +} diff --git a/less/moodle/course.less b/less/moodle/course.less new file mode 100644 index 00000000..25654637 --- /dev/null +++ b/less/moodle/course.less @@ -0,0 +1,1361 @@ +/* course.less */ +/* COURSE CONTENT */ +.section_add_menus { + text-align: right; +} +.dir-rtl .section_add_menus { + text-align: left; +} +.section_add_menus .horizontal div, +.section_add_menus .horizontal form { + display: inline; +} +.section_add_menus optgroup { + font-weight: normal; + font-style: italic; +} +.section_add_menus .urlselect { + margin-left: .4em; +} +.dir-rtl .section_add_menus .urlselect { + margin-right: .4em; + margin-left: 0; +} +.section_add_menus .urlselect select { + margin-left: .2em; +} +.dir-rtl .section_add_menus .urlselect select { + margin-right: .2em; + margin-left: 0; +} +.section_add_menus .urlselect img.iconhelp { + padding: 0; + margin: 0; + vertical-align: text-bottom; +} + +.sitetopic ul.section { + margin: 0; +} +.course-content ul.section { + margin: 1em; +} +.section { + .spinner { + height: 16px; + width: 16px; + } + .activity { + .spinner { + left: 100%; + position: absolute; + vertical-align: text-bottom; + } + + .editing_move { + /* Move the move icon to the start of the line */ + position: absolute; + left: 0; + top: 0; + } + + .mod-indent-outer { + /** + * Add appropriate padding such that nothing overlaps the + * absolute positioned move icon. + */ + padding-left: 32px; + } + + /* The command block for each activity */ + .actions { + position: absolute; + right: 0; + top: 0; + } + + .contentwithoutlink, + .activityinstance { + + min-width: 40%; + display: table-cell; + padding-right: 4px; + min-height: 2em; + + .dimmed { + img.activityicon { + opacity: 0.5; + filter: alpha(opacity=50); + } + } + } + } + .label { + .contentwithoutlink, + .activityinstance { + padding-right: 32px; + display: block; + height: inherit; + } + + .mod-indent-outer { + padding-left: 24px; + display: block; + } + } + + .filler { + width: 16px; + height: 16px; + padding: 0.3em; + display: inline-block; + } + + .activity.editor_displayed { + a.editing_title, + .moodle-actionmenu { + display: none; + } + div.activityinstance { + padding-right: initial; + + input { + margin-bottom: initial; + padding-top: initial; + padding-bottom: initial; + vertical-align: text-bottom; + } + } + } +} + +.dir-rtl .section { + .activity { + .spinner { + left: auto; + right: 100%; + } + + .mod-indent-outer { + /** + * Add appropriate padding such that nothing overlaps the + * absolute positioned move icon. + */ + padding-left: initial; + padding-right: 32px; + } + + /* The command block for each activity */ + .actions { + left: 0; + right: auto; + } + + .contentwithoutlink, + .activityinstance { + padding-left: 4px; + padding-right: initial; + } + } +} + +.dir-rtl.editing .section { + .activity { + .editing_move { + /* Move the move icon to the start of the line */ + left: auto; + right: 0; + } + + &.editor_displayed { + div.activityinstance { + padding-left: initial; + } + } + } +} + +.activity img.activityicon { + margin-right: 6px; + vertical-align: text-bottom; +} +.dir-rtl .section .activity img.activityicon { + margin-left: 6px; + margin-right: 0; +} +.section .activity .activityinstance, +.section .activity .activityinstance div { + display: inline-block; +} +.editing { + .section { + .activity { + .contentwithoutlink, + .activityinstance { + padding-right: 200px; + } + } + } +} + +.dir-rtl.editing { + .section { + .activity { + .contentwithoutlink, + .activityinstance { + padding-left: 200px; + padding-right: 0; + } + } + } +} + +.editing_show + .editing_assign, +.editing_hide + .editing_assign { + // if roles icon missing, add space + margin-left: 20px; +} +.section .activity .commands { + white-space: nowrap; + display: inline; +} +.section .activity.modtype_label.label { + font-weight: normal; + padding: .2em; +} +.section li.activity { + padding: .2em; + clear: both; +} +.section .activity .activityinstance .groupinglabel { + padding-left: 30px; +} +.dir-rtl .section .activity .activityinstance .groupinglabel { + padding-right: 30px; +} +.section .activity .availabilityinfo, +.section .activity .contentafterlink { + margin-top: 0.5em; + margin-left: 30px; +} +.dir-rtl .section .activity .availabilityinfo, +.dir-rtl .section .activity .contentafterlink { + margin-left: 0; + margin-right: 30px; +} +.section .activity .contentafterlink p { + margin: .5em 0; +} +.editing .section .activity:hover, +.editing .section .activity.action-menu-shown { + background-color: @grayLighter; +} +.course-content .current { + background-color: @infoBackground; +} +.course-content .section-summary { + border: 1px solid #DDD; + margin-top: 5px; + list-style: none; +} +.course-content .section-summary .section-title { + margin: 2px 5px 10px 5px; +} +.course-content .section-summary .summarytext { + margin: 2px 5px 2px 5px; +} +.course-content .section-summary .section-summary-activities .activity-count { + .muted; + font-size: @fontSizeSmall; + margin: 3px; + white-space: nowrap; + display: inline-block; +} +.course-content .section-summary .summary { + margin-top: 5px; +} +.course-content .single-section { + margin-top: 1em; +} +.course-content .single-section .section-navigation { + display: block; + padding: 0.5em; + margin-bottom: -0.5em; +} +.course-content .single-section .section-navigation .title { + font-weight: bold; + font-size: 108%; + clear: both; +} +.course-content .single-section .section-navigation .mdl-left { + font-weight: normal; + float: left; + margin-right: 1em; +} +.dir-rtl .course-content .single-section .section-navigation .mdl-left { + float: right; +} +.course-content .single-section .section-navigation .mdl-left .larrow { + margin-right: 0.1em; +} +.course-content .single-section .section-navigation .mdl-right { + font-weight: normal; + float: right; + margin-left: 1em; +} +.dir-rtl .course-content .single-section .section-navigation .mdl-right { + float: left; +} +.course-content .single-section .section-navigation .mdl-right .rarrow { + margin-left: 0.1em; +} +.course-content .single-section .section-navigation .mdl-bottom { + margin-top: 0; +} +.course-content ul li.section.main { + border-bottom: 2px solid #eee; + margin-top: 0; +} +.course-content ul li.section.hidden { + opacity: 0.5; +} +.course-content ul.topics li.section .content, +.course-content ul.weeks li.section .content { + margin-right: 20px; + margin-left: 20px; + padding: 0; +} + +.course-content { + margin-top: 0; +} + +.course-content ul.topics li.section { + padding-bottom: 20px; +} + +.course-content ul.topics li.section .summary { + margin-left: 25px; +} + +.path-course-view .completionprogress { + margin-left: 25px +} + +.path-course-view .completionprogress { + display: block; + float: right; + height: 20px; + position: relative; + z-index: 1000; +} + +#page-site-index .subscribelink { + text-align: right; +} +#site-news-forum h2, +#frontpage-course-list h2, +#frontpage-category-names h2, +#frontpage-category-combo h2 { + margin-bottom: 9px; +} +.path-course-view a.reduce-sections { + padding-left: 0.2em; +} +.path-course-view .subscribelink { + text-align: right; +} +.path-course-view .unread { + margin-left: 30px; +} +.dir-rtl.path-course-view .unread { + margin-right: 30px; +} +.path-course-view .block.drag .header { + cursor: move; +} +.path-course-view .completionprogress { + text-align: right; +} +.dir-rtl.path-course-view .completionprogress { + text-align: left; +} +.path-course-view .single-section .completionprogress { + margin-right: 5px; +} +.path-course-view .section .summary { + line-height: normal; +} + +.path-site li.activity > div, +.path-course-view li.activity > div { + position: relative; + padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */ +} +.dir-rtl.path-site li.activity > div, +.dir-rtl.path-course-view li.activity > div { + position: relative; + padding: 0 0 0 16px; +} +.path-course-view li.activity span.autocompletion img { + vertical-align: text-bottom; +} +.path-course-view li.activity form.togglecompletion img { + max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */ +} +.path-course-view li.activity form.togglecompletion .ajaxworking { + width: 16px; + height: 16px; + position: absolute; + right: 22px; + top: 3px; + background: url([[pix:i/ajaxloader]]) no-repeat; +} +.dir-rtl.path-course-view .completionprogress { + float: none; +} +.dir-rtl.path-course-view li.activity form.togglecompletion .ajaxworking { + right: -22px; +} + +li.section.hidden span.commands a.editing_hide, +li.section.hidden span.commands a.editing_show { + cursor: default; +} +ul.weeks h3.sectionname { + white-space: nowrap; +} +.editing ul.weeks h3.sectionname { + white-space: normal; +} + +.single-section h3.sectionname { + text-align: center; + clear: both; +} + +.section img.movetarget { + height: 16px; + width: 80px; +} + +input.titleeditor { + width: 330px; + vertical-align: text-bottom; +} + +span.editinstructions { + position: absolute; + top: 0; + margin-top: -22px; + margin-left: 30px; + line-height: 16px; + font-size: @fontSizeSmall; + padding: .1em .4em; + background-color: @infoBackground; + color: @infoText; + text-decoration: none; + z-index: 9999; + .box-shadow(2px 2px 5px 1px #ccc); + border: 1px solid @infoBorder; +} +.dir-rtl span.editinstructions { +} + +/* Course drag and drop upload styles */ +#dndupload-status { + position: fixed; + left:0; + width: 40%; + margin: 0 30%; + padding: 6px; + border: 1px solid @infoBorder; + text-align: center; + background: @infoBackground; + color: @infoText; + z-index: 1; // Required in order to have this above relatively positioned course content. + .box-shadow(2px 2px 5px 1px #ccc); + .border-radius(8px); +} +.dndupload-preview { + color: #909090; + border: 1px dashed #909090; + list-style: none; + margin-top: .2em; + padding: .3em; +} +.dndupload-preview img.icon { + vertical-align: text-bottom; + padding: 0; +} +.dndupload-progress-outer { + .progress; +} +.dndupload-progress-inner { + .progress .bar; +} +.dndupload-hidden { + display: none; +} + +/* COURSES LISTINGS AND COURSE SUMMARY */ +#page-course-pending .singlebutton, +#page-course-index .singlebutton, +#page-course-index-category .singlebutton, +#page-course-editsection .singlebutton { + text-align: center; +} +#page-admin-course-manage #movecourses td img { + margin: 0 .22em; + vertical-align: text-bottom; +} +#page-admin-course-manage #movecourses td img.icon { + padding: 0; +} + +#coursesearch { + margin-top: 1em; + text-align: center; +} + +#page-course-pending .pendingcourserequests { + margin-bottom: 1em; +} +#page-course-pending .pendingcourserequests .singlebutton { + display: inline; +} +#page-course-pending .pendingcourserequests .cell { + padding: 0 5px; +} +#page-course-pending .pendingcourserequests .cell.c6 { + white-space: nowrap; +} + +.coursebox { + margin-bottom: 15px; + border: 1px dotted #ddd; + .border-radius(4px); + padding: 5px; +} + +.coursebox > .info > .coursename a { + display:block; + background-image:url([[pix:moodle|i/course]]); + background-repeat: no-repeat; + padding-left:21px; + background-position: left 0.5em; +} +.dir-rtl .coursebox > .info > .coursename a { + padding-left: 0; + padding-right: 21px; + background-position: right; +} +.coursebox.remotehost > .info > .categoryname a { + background-image:url([[pix:moodle|i/mnethost]]); +} +.coursebox .content .teachers, +.coursebox .content .courseimage, +.coursebox .content .coursefile { + float:left; + width:40%; + clear:left; +} +.dir-rtl .coursebox > .info > .coursename, +.dir-rtl .coursebox .teachers, +.dir-rtl .coursebox .content .courseimage, +.dir-rtl .coursebox .content .coursefile { + float: right; + clear: right; +} +.coursebox > .info > h3.coursename { + margin: 5px; +} +.coursebox > .info > .coursename { + margin: 5px; + padding: 0; +} +.coursebox .content .teachers li { + list-style-type:none; + padding:0; + margin:0; +} +.coursebox .enrolmenticons { + padding:3px 0; + float:right; +} +.coursebox .moreinfo { + padding:3px 0; + float:right; +} +.coursebox .enrolmenticons img, +.coursebox .moreinfo img { + margin:0 .2em; +} +.coursebox .content { + clear:both; +} +.coursebox .content .summary, +.coursebox .content .coursecat { + float:right; + width: 55%; +} +.coursebox .content .coursecat { + text-align:right; + clear:right; +} +.coursebox.remotecoursebox .remotecourseinfo { + float:left; + width: 40%; +} +.coursebox .content .courseimage img { + max-width:100px; + max-height:100px; +} +.coursebox .content .coursecat, +.coursebox .content .summary, +.coursebox .content .courseimage, +.coursebox .content .coursefile, +.coursebox .content .teachers, +.coursebox.remotecoursebox .remotecourseinfo { + margin:3px 5px; + padding:0; +} + +.dir-rtl .coursebox > .info > .categoryname a { + padding-left:0; + padding-right:21px; + background-position: center right; +} +.dir-rtl .coursebox > .info > .categoryname, +.dir-rtl .coursebox .teachers, +.dir-rtl .coursebox .content .courseimage, +.dir-rtl .coursebox .content .coursefile { + float:right; + clear:right; +} +.dir-rtl .coursebox .enrolmenticons, +.dir-rtl .coursebox .moreinfo { + float:left; +} +.dir-rtl .coursebox .summary, +.dir-rtl .coursebox .coursecat { + float:left; +} +.dir-rtl .coursebox .coursecat { + text-align:left; + clear:left; +} + +.coursebox.collapsed { + margin-bottom:0; +} +.coursebox.collapsed > .content { + display:none; +} +.courses .coursebox.collapsed { + border:1px solid #eeeeee; + padding:5px; +} + +.courses .coursebox.even { + background-color:#f6f6f6; +} +.courses .coursebox:hover, +.course_category_tree .courses > .paging.paging-morelink:hover { + background-color:#eeeeee; +} + +.course_category_tree .category .numberofcourse { + font-size: @fontSizeSmall; +} + +.course_category_tree .controls { + visibility: hidden; +} +.course_category_tree .controls div { + display:inline; + cursor:pointer; +} +.jsenabled .course_category_tree .controls { + visibility: visible; +} +.course_category_tree .controls { + margin-bottom:5px; + text-align:right; + float:right; +} +.course_category_tree .controls div { + padding-right:2em; + font-size:75%; +} + +.course_category_tree .category > .info > .categoryname{ + background-image:url([[pix:moodle|t/collapsed_empty]]); + background-repeat: no-repeat; + padding:2px 18px; + margin:3px; + background-position:center left; +} +.dir-rtl .course_category_tree .category > .info > .categoryname { + background-image:url([[pix:moodle|t/collapsed_empty_rtl]]); + background-position:center right; +} +.course_category_tree .category.with_children > .info > .categoryname { + background-image:url([[pix:moodle|t/expanded]]); + cursor: pointer; +} +.course_category_tree .category.with_children.collapsed >.info > .categoryname { + background-image:url([[pix:moodle|t/collapsed]]); +} +.dir-rtl .course_category_tree .category.with_children.collapsed > .info > .categoryname { + background-image:url([[pix:moodle|t/collapsed_rtl]]); +} +.course_category_tree .category.collapsed>.content { + display:none; +} + +.course_category_tree .category >.info { + .well; + min-height:0; + padding:0; + margin:3px 0; + margin-bottom:3px; + clear: both; +} +.course_category_tree.frontpage-category-names .category >.info { + background:none; + border:none; + margin:0; +} +.course_category_tree .category > .content { + padding-left:16px; +} + +.dir-rtl .course_category_tree .category > .content { + padding-left:0; + padding-right:16px; +} + +.course_category_tree .subcategories > .paging, +.courses > .paging { + margin:0; + padding:5px; + text-align:center; +} + +.courses > .paging.paging-morelink, +.course_category_tree .subcategories > .paging.paging-morelink { + text-align:left; +} + +.course_category_tree .paging.paging-morelink a { + font-size: @fontSizeSmall; +} +.dir-rtl .courses > .paging.paging-morelink, +.dir-rtl .course_category_tree .paging.paging-morelink { + text-align:right; +} + +#page-course-index-category .generalbox.info { + margin-bottom: 15px; + border: 1px dotted #ddd; + .border-radius(4px); + padding: 5px; +} + +#page-course-index-category .categorypicker { + text-align: center; + margin: 10px 0 20px; +} + +.section { + .summary, + .activity { + .iconsmall { + width: 16px; + height: 16px; + } + } + .editing_title { + .iconsmall { + width: 12px; + height: 12px; + margin: 8px 8px 0px 0; + padding: 4px 8px 0px 0; + vertical-align: text-bottom; + } + } + .moodle-actionmenu { + .iconsmall { + max-width: none !important; /** reset sets 100% !important which breaks on IE8 without this !important */ + width:16px; + height:16px; + padding: 4px; + vertical-align: text-bottom; + } + } + .moodle-actionmenu[data-enhanced] { + .menu { + img { + width: 12px; + height: 12px; + } + } + } +} + +.dir-rtl .section { + .editing_title { + .iconsmall { + margin: 8px 0 0 8px; + padding: 4px 0 0 8px; + } + } +} + +/** + * Course management page + * Palette + * + * Background (reg) #F5F5F5 + * Background (light #fafafa + * Background (highlight) #ddffaa + * Borders #e1e1e8 + */ +#course-category-listings { + background-color:#fff; + margin-bottom:200px; + + /** Two column layout */ + &.columns-2 { + > #course-listing > div { + position:relative; + left:-1px; + } + } + /** Three column layout */ + &.columns-3 > #course-listing > div { + height:100%; + } + + > div > div { + min-height:300px; + border:1px solid #e1e1e8; + > ul.ml > li:first-child > div { + border-top:0; + } + } + h3 { + margin:0; + padding:0.4rem 0.6rem 0.3rem; + background-color:#F5F5F5; + border-bottom:1px solid #e1e1e8; + } + h4 { + margin:1rem 0 0; + padding:0.6rem 1rem 0.5rem; + } + .moodle-actionmenu { + white-space:nowrap; + } + + .moodle-actionmenu[data-enhance] { + .toggle-display { + img { + width: auto; + } + &.textmenu { + padding-right: 4px; + + .caret { + margin-top: 12px; + } + } + } + } + + .listing-actions { + text-align:center; + padding:0.4rem 0.3rem 0.3rem; + line-height:2.2em; + > .moodle-actionmenu { + display:inline-block; + .menu a { + padding-left:1rem; + } + } + .moodle-actionmenu:not([data-enhanced]) { + li {line-height:normal;} + > .menubar a { + color:inherit; + display:inline-block; + > img { + display:none; + } + .caret { + display: none; + } + } + > .menu .menu-action-text { + display:inline-block; + } + } + } + ul.ml { + list-style: none; + margin:1rem 0; + ul.ml { + margin:0; + } + } + li { + line-height:2.2em; + > div { + &:hover { + background-color:#fafafa; + } + } + .tree-icon { + margin: 2px 6px 0 0; + width:12px; + vertical-align:inherit; + } + &[data-selected='1'] { + > div { + background-color:#FFFFD8; + border-top-color: #e1e1e8; + border-bottom-color:#F5F5F5; + } + li:first-of-type > div, + &[data-expandable='0']+li > div { + border-top-color:#e1e1e8; + } + &:last-of-type > div { + border-bottom-color:#e1e1e8; + } + } + + // Tree item indenting to represent depth. + .tree-icon {margin-left:0;} + li .tree-icon {margin-left:1em;} + li li .tree-icon {margin-left:2em;} + li li li .tree-icon {margin-left:3em;} + li li li li .tree-icon {margin-left:4em;} + li li li li li .tree-icon {margin-left:4.5em;} + li li li li li li .tree-icon {margin-left:5em;} + li li li li li li li .tree-icon {margin-left:5.5em;} + + &+li > div, + &:first-child > div { + border-top-color:#F5F5F5; + } + } + + .item-actions { + margin-right:1em; + display:inline-block; + display:initial; + img { + margin: 0 4px; + height:12px; + padding: 0; + vertical-align: inherit; + } + &.show .menu { + a { + padding:4px 1em 4px 4px; + } + img { + width: 12px; + max-width:none; + } + } + .menu-action-text { + vertical-align: inherit; + } + } + + .listitem { + > div { + > .float-left { + float:left; + } + > .float-right { + float:right; + text-align:right; + } + .item-actions { + .action-show { + display:none; + } + .action-hide { + display:inline; + } + } + .without-actions { + color: #333; + } + .idnumber { + color:#a1a1a8; + margin-right:2em; + } + } + // The category or course is hidden. + &[data-visible="0"] { + .muted; + > div { + > a { + .muted; + } + .item-actions { + .action-show { + display:inline; + } + .action-hide { + display:none; + } + } + } + } + &.highlight { + background-color:transparent; + > div, + > div:hover, + &[data-selected='1'] > div { + background-color:#ddffaa; + } + } + } + + #course-listing { + .listitem { + .categoryname { + display:inline-block; + margin-left:1em; + color:#a1a1a8; + } + .coursename { + display:inline-block; + } + > div { + padding-left:1rem; + } + } + > .firstpage .listitem:first-child > div .item-actions .action-moveup, + > .lastpage .listitem:last-child > div .item-actions .action-movedown { + display: none; + } + .bulk-action-checkbox { + margin:-2px 6px 0 0; + } + } + #category-listing { + .listitem.collapsed > ul.ml { + display: none; + } + .listitem { + > div { + > .ba-checkbox { + width:2.2em; + text-align:center; + margin:-1px 0.5em 0 0; + padding-top:2px; + } + } + &.highlight > div > .ba-checkbox { + background-color:#ddffaa; + } + &[data-selected='1'] > div > .ba-checkbox { + margin:0 0.5em 0 0; + padding:0; + background-color: inherit; + } + &:first-child > div .item-actions .action-moveup, + &:last-child > div .item-actions .action-movedown { + display: none; + } + } + .course-count { + color:#a1a1a8; + margin-right:2rem; + min-width:3.5em; + display:inline-block; + .smallicon { + width:12px; + margin-left:4px; + vertical-align: inherit; + } + } + .bulk-action-checkbox { + margin-right: -3px; + } + .category-listing > ul > .listitem:first-child { + position:relative; + } + .category-bulk-actions { + margin: 0 0.5em 0.5em; + position:relative; + } + } + + .detail-pair { + border-bottom:1px solid #e1e1e8; + margin:0 1rem; + > * { + display:inline-block; + line-height:2.2rem; + } + .pair-key { + font-weight:bold; + vertical-align: top; + span { + margin-right: 1rem; + display:block; + } + } + .pair-value select { + max-width:100%; + } + } + + .bulk-actions .detail-pair { + > * { + display:block; + width:100%; + } + } + + .listing-pagination { + text-align:center; + .yui3-button { + background-color:#FFF; + border:0; + margin:0.4rem 0.2rem 0.45rem; + font-size:10.4px; + &.active-page { + background-color:#E5EFFD; + } + } + } + .listing-pagination-totals { + text-align:center; + &.dimmed { + .muted; + margin:0.4rem 1rem 0.45rem; + } + } + .select-a-category .notifymessage, + .select-a-category .alert { + margin: 1em; + } +} + +#course-category-listings #course-listing .listitem .drag-handle { + display: none; +} +.jsenabled #course-category-listings #course-listing .listitem .drag-handle { + display:inline-block; + margin: 0 6px 0 0; + cursor:pointer; +} + +.dir-rtl #course-category-listings { + #category-listing, + #course-listing { + float: right; + margin-left: 0; + } + + .listitem { + > div { + > .float-left { + float:right; + } + > .float-right { + float:left; + text-align:left; + } + } + } + li { + .tree-icon { + margin: 2px 0 0 6px; + } + + // Tree item indenting to represent depth. + .tree-icon {margin-right:0;} + li .tree-icon {margin-right:1em;} + li li .tree-icon {margin-right:2em;} + li li li .tree-icon {margin-right:3em;} + li li li li .tree-icon {margin-right:4em;} + li li li li li .tree-icon {margin-right:4.5em;} + li li li li li li .tree-icon {margin-right:5em;} + li li li li li li li .tree-icon {margin-right:5.5em;} + } + #category-listing { + .listitem { + > div { + margin-right:0.5em; + margin-left: 0; + > .ba-checkbox { + margin:-1px 0 0 0.5em; + } + } + + &[data-selected='1'] > div > .ba-checkbox { + margin:0 0 0 0.5em; + } + } + .course-count { + margin-left:2rem; + } + .bulk-action-checkbox { + margin-left: -3px; + margin-right: 0; + } + } + #course-listing { + padding-right: 24px; + .listitem { + .idnumber { + color:#a1a1a8; + padding-right:2em; + } + .categoryname { + display:inline-block; + margin-right:1em; + margin-left:0; + } + .drag-handle { + margin: 0 6px 0 6px; + } + > div { + padding-left:1rem; + } + } + .bulk-action-checkbox { + vertical-align:middle; + margin:-2px 0 0 6px; + } + } + .detail-pair { + > * { + float: right; + margin-right: 0; + } + .pair-key { + span { + margin-right:0; + margin-left: 0; + } + } + .pair-value { + margin-right: 0.5em; + } + } +} + +/** Management header styling **/ +.coursecat-management-header { + vertical-align:middle; + h2 { + display:inline-block; + text-align:left; + } + > div { + display:inline-block; + float:right; + line-height:40px; + > div { + margin-left:1em; + margin: 10px 0; + display:inline-block; + } + } + select { + max-width: 300px; + cursor: pointer; + padding: 0.4em 0.5em 0.45em 1em; + vertical-align: baseline; + white-space: nowrap; + } + .view-mode-selector { + .moodle-actionmenu { + white-space:nowrap; + display:inline-block; + } + .moodle-actionmenu[data-enhanced].show .menu a { + padding-left:1em; + } + } +} +.dir-rtl .coursecat-management-header { + h2 { + text-align:right; + } + > div { + float:left; + margin-right:1em; + margin-left: 0; + } +} +.course-being-dragged-proxy { + border: 0; + color: @linkColor; + vertical-align:middle; + padding: 0 0 0 4em; +} +.course-being-dragged { + .opacity(50); +} + +/** + * Display sizes: + * Large displays 1200 + + * Default displays 980 1199 + * Tablets 768 979 + * Small tablets and large phones 481 767 + * Phones 0 480 + */ +@media (min-width: 1200px) and (max-width: 1600px) { + #course-category-listings.columns-3 { + background-color:transparent; + border:0; + + #category-listing, + #course-listing { + width:50%; + } + #category-listing > div, + #course-listing > div, + #course-detail > div { + border:1px solid #e1e1e8; + background-color:#FFF; + } + #course-detail { + width:100%; + margin-top:1em; + } + } + +} + +@media (max-width: 1199px) { + #course-category-listings.columns-2, + #course-category-listings.columns-3 { + background-color:transparent; + border:0; + #category-listing, + #course-listing, + #course-detail { + width:100%; + margin:0 0 1em; + } + #category-listing > div, + #course-listing > div, + #course-detail > div { + border:1px solid #e1e1e8; + background-color:#FFF; + } + } +} diff --git a/less/moodle/debug.less b/less/moodle/debug.less new file mode 100644 index 00000000..a605b000 --- /dev/null +++ b/less/moodle/debug.less @@ -0,0 +1,80 @@ +.phpinfo table, +.phpinfo th, +.phpinfo h2 { + margin: auto; + text-align: left; +} +.phpinfo h2 { + width: 600px; +} +.phpinfo .e, +.phpinfo .v, +.phpinfo .h { + border: 1px solid #000000; + font-size: 0.8em; + vertical-align: baseline; + color: #000000; + background-color: #cccccc; +} +.phpinfo .e { + background-color: #ccccff; + font-weight: bold; +} +.phpinfo .h { + background-color: #9999cc; + font-weight: bold; +} +#page-footer .performanceinfo { + margin: 10px 20%; +} +#page-footer .performanceinfo span { + display: block; +} +#page-footer .validators { + margin-top: 40px; + padding-top: 5px; + border-top: 1px dotted gray; +} +#page-footer .validators ul { + margin: 0; + padding: 0; + list-style-type: none; +} +#page-footer .validators ul li { + display: inline; + margin-right: 10px; + margin-left: 10px; +} +.performanceinfo .cachesused { + margin-top: 1em; +} +.performanceinfo .cachesused .cache-stats-heading, +.performanceinfo .cachesused .cache-total-stats { + font-weight: bold; + font-size: 110%; + margin-top: 0.3em; +} +#page-footer .performanceinfo .cachesused .cache-definition-stats { + margin: .3em; + display: inline-block; + vertical-align: top; + background-color: @wellBackground; +} +.cache-store-stats { + padding: 0 1.3em; +} +.cache-store-stats.nohits { + background-color: @errorBackground; +} +.cache-store-stats.lowhits { + background-color: @warningBackground; +} +.cache-store-stats.hihits { + background-color: @successBackground; +} +#page-footer, +#page-footer .validators, +#page-footer .purgecaches, +#page-footer .performanceinfo { + text-align: center; +} \ No newline at end of file diff --git a/less/moodle/dock.less b/less/moodle/dock.less new file mode 100644 index 00000000..1d2d428f --- /dev/null +++ b/less/moodle/dock.less @@ -0,0 +1,148 @@ +@dockWidth: 36px; +@dockTitleMargin: 3px; +@dockPanelWidth: (768px / 2); +@dockTitleFontSize: 11px; + +/** + * This styles the H2 node the dock creates to test the width before making its title rotation. + * We need to apply these EXACT styles to the #dock .dockedtitle h2 to be sure things are spaced correctly. + */ +.transform-test-heading { + font-family: @sansFontFamily; + font-size: @dockTitleFontSize; + line-height: @dockWidth; + text-align: center; + font-weight: bold; + margin: 0; + padding: 0; +} + +body.has_dock { + #page { + padding-left: (@dockWidth + (@dockTitleMargin * 3)); + } + div#dock { + display: inline; + } +} + +#dock { + width: (@dockWidth + (@dockTitleMargin * 2)); + position: fixed; + top: 0; + left: 0; + height: 100%; + background-color: transparent; + border-right: 0 none; + .nothingdocked { + visibility: hidden; + display: none; + } + .dockeditem_container { + margin-top: 68px; + } + .dockeditem .firstdockitem { + margin-top: 1em; + } + .dockedtitle { + .btn; + display: block; + width: @dockWidth; + margin: @dockTitleMargin; + padding:0; + cursor: pointer; + h2 { + .transform-test-heading; + } + .filterrotate { + margin-left: 8px; + } + } + .controls { + position: absolute; + bottom: 1em; + text-align: center; + width: 100%; + img { + cursor: pointer; + } + } +} + +#dockeditempanel { + z-index: 12000; /** Required to place the dock panel above the fixed pos navbar */ + &.dockitempanel_hidden { + display: none; + } + min-width: 200px; + position: relative; + left: 100%; + padding-left: 5px; + .dockeditempanel_content { + background-color: @wellBackground; + width: @dockPanelWidth; + border: 1px solid darken(@grayLighter, 10%); + .box-shadow(2px 4px 4px 2px @grayLighter); + .border-radius(4px); + } + .dockeditempanel_bd { + overflow: auto; /** Required to make the content scrollable when it flows over the fixed area of the screen */ + > * { + margin: 1em; + } + .block_navigation .block_tree li { + overflow: visible; + } + } + .dockeditempanel_hd { + border-bottom: 1px solid @white; + padding: 0.5em 1em; + h2 { + .nav-header; + font-size: 1.1em; + padding:0; + margin: 0; + } + .commands { + display: block; + text-align: right; + > a, + > span { + margin-left: 3px; + cursor: pointer; + } + img, + input { + vertical-align: middle; + margin-right: 1px; + } + .hidepanemicon img { + cursor: pointer; + } + } + } +} + +.dir-rtl { + &.has_dock #page { + padding-left: 0; + padding-right: (@dockWidth + (@dockTitleMargin * 3)); + } + #dock { + left: auto; + right: 0%; + .dockedtitle { + h2 { + line-height: @dockWidth - @dockTitleFontSize; + } + } + } + #dockeditempanel { + right: 100%; + .dockeditempanel_hd { + .commands { + text-align: left; + } + } + } +} \ No newline at end of file diff --git a/less/moodle/editor.less b/less/moodle/editor.less new file mode 100644 index 00000000..27de921b --- /dev/null +++ b/less/moodle/editor.less @@ -0,0 +1,5 @@ +// Over ride bootstrap editor CSS. + +body { + margin: 8px; +} diff --git a/less/moodle/expendable.less b/less/moodle/expendable.less new file mode 100644 index 00000000..0804f5ef --- /dev/null +++ b/less/moodle/expendable.less @@ -0,0 +1,106 @@ +table#explaincaps, +table#defineroletable, +table.grading-report, +table#listdirectories, +table.rolecaps, +table.userenrolment, +table#form, +form#movecourses table, +#page-admin-course-index .editcourse, +.forumheaderlist, +table.flexible, +.generaltable { + .table-striped; +} + +.dir-rtl { + table#explaincaps, + table#defineroletable, + table.grading-report, + table#listdirectories, + table.rolecaps, + table.userenrolment, + table#form, + form#movecourses table, + .forumheaderlist, + table.flexible, + .generaltable, + .generaltable thead:first-child tr:first-child { + td , th { + text-align:right; + } + } +} + +#page-admin-course-index.dir-rtl .editcourse { + td , th { + text-align:right; + } +} + +#page-report-loglive-index .generaltable, +#page-admin-report-log-index .generaltable, +#page-report-log-user .generaltable, +#page-admin-user table, +.environmenttable, +.category_subcategories, +.rcs-results, +table#listdirectories { + .table-condensed +} +.user-enroller-panel .uep-search-results .users, +table.grading-report, +.forumheaderlist, +.generaltable, +table.flexible, +.category_subcategories, +table#modules, +table#permissions { + .table-hover +} +// language editing progress bar +// copied in because the styles are set on the HTML +div[id^="bar_pbar_"] { + overflow: hidden !important; + height: @baseLineHeight !important; + margin-bottom: @baseLineHeight !important; + #gradient > .vertical(#f5f5f5, #f9f9f9) !important; + .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)) !important; + .border-radius(@baseBorderRadius) !important; + border: none !important; +} +div[id^="progress_pbar_"] { + height: 100% !important; + color: @white !important; + float: left !important; + font-size: 12px !important; + text-align: center !important; + text-shadow: 0 -1px 0 rgba(0,0,0,.25) !important; + #gradient > .vertical(#149bdf, #0480be) !important; + .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)) !important; + .box-sizing(border-box) !important; + .transition(width .6s ease) !important; + padding-top: 0 !important; + border: none !important; +} +// colored buttons +input.form-submit, +input#id_submitbutton, +input#id_submitbutton2, +.path-admin .buttons input[type="submit"], +td.submit input { + .btn-primary +} +// override .btn-primary +#notice .singlebutton + .singlebutton input, +.submit.buttons input[name="cancel"] { + .btn +} +#notice .singlebutton + .singlebutton input, +.submit.buttons input[name="cancel"] { + .btn-lineup +} +input[id$="_clearbutton"], +input[type="reset"] { + .btn-warning +} diff --git a/less/moodle/filemanager.less b/less/moodle/filemanager.less new file mode 100644 index 00000000..c5e75205 --- /dev/null +++ b/less/moodle/filemanager.less @@ -0,0 +1,1221 @@ + // File Picker and File Manager +.filemanager, +.filepicker, +.file-picker { + font-size: 11px; +} +.filemanager a, +.file-picker a, +.filemanager a:hover, +.file-picker a:hover { + color: #555555; + text-decoration: none; +} +.filemanager input[type="text"], +.file-picker input[type="text"] { + width: 265px; +} +.filemanager .fp-license, +.file-picker .fp-setlicense { + td { + max-width: 265px; + } + select { + max-width: 100%; + } +} +.fp-content-center { + height: 100%; + width: 100%; + display: table-cell; + vertical-align: middle; +} +.fp-content-hidden { + visibility: hidden; +} +// Dialogue (File Picker and File Manager) +.yui3-panel-focused { + outline: none; +} +#filesskin .yui3-panel-content { + padding-bottom: 20px; + background: #F2F2F2; + .border-radius(8px); + border: 1px solid #fff; + display: inline-block; + .ie7-inline-block(); + .box-shadow(5px 5px 20px 0 #666); +} +#filesskin .yui3-widget-hd { + .border-radius(10px 10px 0 0); + border-bottom: 1px solid #BBBBBB; + padding: 5px; + text-align: center; + font-size: 12px; + color: #333; + letter-spacing: 1px; + text-shadow: 1px 1px 1px #fff; + filter: dropshadow(color=#FFFFFF, offx=1, offy=1); + #gradient > .vertical (#fff, #ccc); +} +.fp-panel-button { + background: #fff; + padding: 3px 20px 2px 20px; + text-align: center; + margin: 10px; + .border-radius(10px); + display: inline-block; + .ie7-inline-block(); + .box-shadow(2px 2px 3px .1px #999); +} + + .moodle-dialogue-base .filepicker .moodle-dialogue-wrap .moodle-dialogue-bd { + padding: 0px; +} + +// File Picker layout +#filesskin .file-picker.fp-generallayout { + width: 859px; + background: #FFFFFF; + .border-radius(10px); + border: 1px solid #CCCCCC; + position: relative; +} +.file-picker .fp-repo-area { + width: 180px; + overflow: auto; + display: inline-block; + .ie7-inline-block(); + float: left; + height: 525px; + border-right: 1px solid #BBBBBB; +} +.dir-rtl .file-picker .fp-repo-area { + border-left: 1px solid #BBBBBB; + border-right: none; + float: right; +} +.file-picker .fp-repo-items { + float: none; + width: auto; + margin-left:181px; +} +.moodle-dialogue-fullscreen .file-picker .fp-repo-items { + margin-left: 0px; + margin-right:0px; + float: left; +} +.dir-rtl .file-picker .fp-repo-items { + margin-left: 0px; + margin-right:181px; +} +.dir-rtl .moodle-dialogue-fullscreen .file-picker .fp-repo-items { + margin-left: 0px; + margin-right:0px; + float: right; +} +.file-picker .fp-navbar { + background: #F2F2F2; + border-bottom: 1px solid #BBBBBB; + min-height: 40px; + overflow: hidden; +} +.file-picker .fp-navbar .fp-viewbar { + margin: 4px; +} + +.file-picker .fp-content { + background: #FFFFFF; + clear: none; + overflow: auto; + height: 452px; +} +.filepicker.moodle-dialogue-fullscreen .file-picker .fp-content { + width: 100%; +} +.file-picker .fp-content-loading { + height: 100%; + width: 100%; + display: table; + text-align: center; +} +.file-picker .fp-content .fp-object-container { + width: 98%; + height: 98%; +} +.dir-rtl .file-picker .fp-list { + text-align: right; +} +.dir-rtl .file-picker .fp-toolbar { + padding: 4px; +} +.dir-rtl .file-picker .fp-list { + text-align: right; +} +.dir-rtl .file-picker .fp-repo-name { + display: inline; +} +.dir-rtl .file-picker .fp-pathbar { + text-align: right; + display: block; + border-top: none; +} +.dir-rtl .file-picker div.bd { + text-align: right; +} +.dir-rtl #filemenu .yuimenuitemlabel { + text-align: right; +} +.dir-rtl .filepicker .yui-layout-unit-left { + left: 500px; +} +.dir-rtl .filepicker .yui-layout-unit-center { + left: 0; +} +// File Manager +.dir-rtl .filemanager-toolbar a { + padding: 0; +} +// Repositories on fp-repo-area (File Picker only) +.file-picker .fp-list { + list-style-type: none; + padding: 0; + float: left; + width: 100%; + margin: 0; +} +.dir-rtl .file-picker .fp-list { + text-align: right; + float: left; +} +.file-picker .fp-list .fp-repo a { + display: block; + padding: .5em .7em; +} +.file-picker .fp-list .fp-repo.active { + background: #F2F2F2; +} +.file-picker .fp-list .fp-repo-icon { + padding: 0 7px 0 5px; + width: 16px; + height: 16px; +} +// Tools, Path & View on fp-navbar (File Picker and File Manager) +.fp-toolbar { + float: left; +} +.dir-rtl .fp-toolbar { + float: right; +} +.fp-toolbar.empty { + display: none; +} +.dir-rtl .fp-toolbar div.disabled, +.fp-toolbar .disabled { + display: none; +} +.fp-toolbar div { + display: block; + float: left; + margin-right: 4px; +} +.dir-rtl .fp-toolbar div { + display: block; + float: right; + margin-left: 4px; + margin-right: 0px; +} +.fp-toolbar img { + vertical-align: -15%; + margin-right: 5px; +} +.fp-toolbar .fp-tb-search { + width: 235px; + height: 27px; +} +.fp-toolbar .fp-tb-search input { + background: #FFFFFF url('[[pix:a/search]]') no-repeat 7px 7px; + padding: 2px 6px 1px 27px; + width: 200px; + height: 27px; + border: 1px solid #BBBBBB; +} +.fp-viewbar { + float: right; + height: 30px; + border: 1px solid #CCC; + border-bottom: 1px solid #B3B3B3; + border-radius: 4px; + background: white; +} +.fp-repo-items fp-viewbar { + margin: 4px; +} +.dir-rtl .fp-toolbar img { + vertical-align: -35%; +} +.dir-rtl .fp-viewbar { + float: left; +} + +.fp-viewbar a { + width: 30px; + height: 30px; + border-right: 1px solid #CCC; + display: block; + float:left; +} +.fp-viewbar a.checked:hover, +.fp-viewbar a:hover { + background-image: radial-gradient(ellipse at center, #ffffff 60%,#dfdfdf 100%); + background-color: #ebebeb; +} + +.fp-viewbar a.checked, +.fp-viewbar a:active { + background-image: radial-gradient(ellipse at center, #ffffff 40%,#dfdfdf 100%); + background-color: #dfdfdf; +} + +.fp-viewbar a.fp-vb-icons { + border-radius: 4px 0 0 4px; +} +.fp-viewbar a.fp-vb-tree { + border-right: 0; + border-radius: 0 4px 4px 0; +} +.fp-viewbar a img { + margin: 7px; +} + +.fp-viewbar.disabled a { + opacity: .45; + background: none; + cursor: default; +} + +.file-picker .fp-clear-left { + clear: left; +} +// over ride hover rule from core.css +.dir-rtl .filemanager-toolbar .fp-vb-icons a:hover { + background: url('[[pix:theme|fp/view_icon_selected]]'); +} +.dir-rtl .filemanager-toolbar .fp-vb-icons.checked a:hover { + background: url('[[pix:theme|fp/view_icon_active]]') no-repeat 0 0; +} +.dir-rtl .fp-vb-details a:hover { + background: none; + border: 20px solid black; +} +.dir-rtl .fp-vb-details.checked a:hover { + background: none; + border: 40px solid black; +} +.dir-rtl .fp-vb-tree a:hover { + background: none; + border: 30px solid black; +} +.dir-rtl .fp-vb-tree.checked a:hover { + background: none; + border: 50px solid black; +} +.file-picker .fp-pathbar { + display: table-row; +} +.fp-pathbar.empty { + display: none; +} +.fp-pathbar .fp-path-folder { + background: url('[[pix:theme|fp/path_folder]]') no-repeat 0 0; + width: 27px; + height: 12px; + margin-left: 4px; +} +.dir-rtl .fp-pathbar .fp-path-folder { + background: url('[[pix:theme|fp/path_folder_rtl]]') no-repeat right top; + width: auto; + height: 12px; + margin-left: 4px; +} +.dir-rtl .fp-pathbar span { + display: inline-block; + .ie7-inline-block(); + float: right; + margin-left: 32px; +} +.fp-pathbar .fp-path-folder-name { + margin-left: 32px; + line-height: 20px; +} +.dir-rtl .fp-pathbar .fp-path-folder-name { + margin-right: 32px; + line-height: 20px; +} +// Icon view (File Picker and File Manager) +.fp-iconview .fp-file { + float: left; + text-align: center; + position: relative; + margin: 10px 10px 35px; +} +.fp-iconview .fp-thumbnail { + min-width: 110px; + min-height: 110px; + line-height: 110px; + text-align: center; + border: 1px solid #FFFFFF; + display: block; +} +.fp-iconview .fp-thumbnail img { + border: 1px solid #ddd; + padding: 3px; + vertical-align: middle; + .box-shadow(1px 1px 2px 0 #ccc); +} +.fp-iconview .fp-thumbnail:hover { + background: #fff; + border: 1px solid #ddd; + .box-shadow(inset 0 0 10px 0px #ccc); +} +.fp-iconview .fp-filename-field { + height: 33px; + word-wrap: break-word; + overflow: hidden; + position: absolute; +} +.fp-iconview .fp-filename-field:hover { + overflow: visible; + z-index: 1000; +} +.fp-iconview .fp-filename-field .fp-filename { + background: #FFFFFF; + padding-top: 5px; + padding-bottom: 12px; + min-width: 112px; +} +.dir-rtl .fp-iconview .fp-file { + float: right; +} +// Table view (File Picker only) +.file-picker .yui3-datatable table { + border: 0 solid #BBBBBB; + width: 100%; +} +#filesskin .file-picker .yui3-datatable-header { + background: #FFFFFF; + border-bottom: 1px solid #CCCCCC; + border-left: 0 solid #FFFFFF; + color: #555555; +} +#filesskin .file-picker .yui3-datatable-odd .yui3-datatable-cell { + background-color: #F6F6F6; + border-left: 0 solid #F6F6F6; +} +#filesskin .file-picker .yui3-datatable-even .yui3-datatable-cell { + background-color: #FFFFFF; + border-left: 0 solid #FFFFFF; +} +.dir-rtl .file-picker .yui3-datatable-header { + text-align: right; +} +// Tree view (File Manager only) + +// first or middle sibling, no children +.file-picker .ygtvtn, +.filemanager .ygtvtn { + background: url('[[pix:moodle|y/tn]]') 0 0 no-repeat; + width: 17px; + height: 22px; +} +.dir-rtl .filemanager .ygtvtn, +.dir-rtl .file-picker .ygtvtn { + background: url('[[pix:moodle|y/tn_rtl]]') 0 0 no-repeat; + width: 17px; + height: 22px; +} +// first or middle sibling, collapsable +.file-picker .ygtvtm, +.filemanager .ygtvtm { + background: url('[[pix:moodle|y/tm]]') 0 10px no-repeat; + width: 13px; + height: 12px; + cursor: pointer; +} +// first or middle sibling, collapsable, hover +.file-picker .ygtvtmh, +.filemanager .ygtvtmh { + background: url('[[pix:moodle|y/tm]]') 0 10px no-repeat; + width: 13px; + height: 12px; + cursor: pointer; +} +// first or middle sibling, expandable +.file-picker .ygtvtp, +.filemanager .ygtvtp { + background: url('[[pix:moodle|y/tp]]') 0 10px no-repeat; + width: 13px; + height: 12px; + cursor: pointer; +} +.dir-rtl .file-picker .ygtvtp, +.dir-rtl .filemanager .ygtvtp { + background: url('[[pix:moodle|y/tp_rtl]]') 0 10px no-repeat; +} +// first or middle sibling, expandable, hover +.file-picker .ygtvtph, +.filemanager .ygtvtph { + background: url('[[pix:moodle|y/tp]]') 0 10px no-repeat; + width: 13px; + height: 22px; + cursor: pointer; +} +.dir-rtl .file-picker .ygtvtph, +.dir-rtl .filemanager .ygtvtph { + background: url('[[pix:moodle|y/tp_rtl]]') 0 10px no-repeat; +} +// last sibling, no children +.file-picker .ygtvln, +.filemanager .ygtvln { + background: url('[[pix:moodle|y/ln]]') 0 0 no-repeat; + width: 17px; + height: 22px; +} +.dir-rtl .file-picker .ygtvln, +.dir-rtl .filemanager .ygtvln { + background: url('[[pix:moodle|y/ln_rtl]]') 0 0 no-repeat; +} +// Last sibling, collapsable +.file-picker .ygtvlm, +.filemanager .ygtvlm { + background: url('[[pix:moodle|y/lm]]') 0 10px no-repeat; + width: 13px; + height: 12px; + cursor: pointer; +} +// Last sibling, collapsable, hover +.file-picker .ygtvlmh, +.filemanager .ygtvlmh { + background: url('[[pix:moodle|y/lm]]') 0 10px no-repeat; + width: 13px; + height: 12px; + cursor: pointer; +} +// Last sibling, expandable +.file-picker .ygtvlp, +.filemanager .ygtvlp { + background: url('[[pix:moodle|y/lp]]') 0 10px no-repeat; + width: 13px; + height: 12px; + cursor: pointer; +} +.dir-rtl .file-picker .ygtvlp, +.dir-rtl .filemanager .ygtvlp { + background: url('[[pix:moodle|y/lp_rtl]]') 0 10px no-repeat; +} +// Last sibling, expandable, hover +.file-picker .ygtvlph, +.filemanager .ygtvlph { + background: url('[[pix:moodle|y/lp]]') 0 10px no-repeat; + width: 13px; + height: 12px; + cursor: pointer; +} +.dir-rtl .file-picker .ygtvlph, +.dir-rtl .filemanager .ygtvlph { + background: url('[[pix:moodle|y/lp_rtl]]') 0 10px no-repeat; +} +// Loading icon +.file-picker .ygtvloading, +.filemanager .ygtvloading { + background: transparent url('[[pix:moodle|y/loading]]') 0 0 no-repeat; + width: 16px; + height: 22px; +} +// the style for the empty cells that are used for rendering the depth of the node +.file-picker .ygtvdepthcell, +.filemanager .ygtvdepthcell { + background: url('[[pix:moodle|y/vline]]') 0 0 no-repeat; + width: 17px; + height: 32px; +} +.file-picker .ygtvblankdepthcell, +.filemanager .ygtvblankdepthcell { + width: 17px; + height: 22px; +} +a.ygtvspacer:hover { + color: transparent; + text-decoration: none; +} +.ygtvlabel, +.ygtvlabel:link, +.ygtvlabel:visited, +.ygtvlabel:hover { + background-color: transparent; + cursor: pointer; + margin-left: 2px; + text-decoration: none; +} +.file-picker .ygtvfocus, +.filemanager .ygtvfocus { + background-color: #EEEEEE; +} +.fp-filename-icon { + margin-top: 10px; + display: block; + position: relative; +} +.fp-icon { + float: left; + margin-top: -7px; + width: 24px; + height: 24px; + margin-right: 10px; + text-align: center; + line-height: 24px; +} +.dir-rtl .fp-icon { + float: right; + margin-left: 10px; + margin-right: 0; +} +.fp-icon img { + max-height: 24px; + max-width: 24px; + vertical-align: middle; +} +.fp-filename { + padding-right: 10px; +} +.dir-rtl .fp-filename { + padding-left: 10px; + padding-right: 0; +} +// Repositories Login on fp-content (File Picker only) + +.file-picker .fp-login-form { + height: 100%; + width: 100%; + display: table; +} +.file-picker .fp-login-form table { + margin: 0 auto; +} +.file-picker .fp-login-form p { + text-align: center; + margin-top: 3em; +} +.file-picker .fp-login-form .fp-login-input label { + text-align: right; + display: block; +} +.file-picker .fp-login-form .fp-login-input .input { + text-align: left; +} +.file-picker .fp-login-form input[type="checkbox"]{ + width: 15px; + height: 15px; +} +// Upload on fp-content (File Picker only) +.file-picker .fp-upload-form { + height: 100%; + width: 100%; + display: table; +} +.file-picker .fp-upload-form table { + margin: 0 auto; +} +// File exists dialogue on Upload (File Picker only) +.file-picker.fp-dlg { + text-align: center; +} +.file-picker.fp-dlg .fp-dlg-text { + padding: 30px 20px 10px; + font-size: 12px; +} +.file-picker.fp-dlg .fp-dlg-buttons { + margin: 0 20px; +} +// Error dialogue on Upload (File Picker only) +.file-picker.fp-msg { + text-align: center; +} +.file-picker.fp-msg .fp-msg-text { + padding: 40px 20px 10px 20px; + min-width: 200px; + max-width: 500px; + max-height: 300px; + overflow: auto; + font-size: 12px; +} +.file-picker.fp-msg.fp-msg-error .fp-msg-text { + padding: 40px 20px 10px 20px; + font-size: 12px; +} +// Error on fp-content (File Picker only) +.file-picker .fp-content-error { + height: 100%; + width: 100%; + display: table; + text-align: center; +} +.file-picker .fp-content-error .fp-error { + height: 100%; + width: 100%; + display: table-cell; + vertical-align: middle; + padding: 40px 20px 10px 20px; + font-size: 12px; +} +// Lazy loading on fp-content (File Picker only) +.file-picker .fp-nextpage { + clear: both; +} +.file-picker .fp-nextpage .fp-nextpage-loading { + display: none; +} +.file-picker .fp-nextpage.loading .fp-nextpage-link { + display: none; +} +.file-picker .fp-nextpage.loading .fp-nextpage-loading { + display: block; + text-align: center; + height: 100px; + padding-top: 50px; +} +// Select Dialogue (File Picker and File Manager) +.fp-select form { + padding: 20px 20px 0; +} +.fp-select .fp-select-loading { + text-align: center; + margin-top: 20px; +} +.fp-select .fp-hr { + clear: both; + height: 1px; + background-color: #FFFFFF; + border-bottom: 1px solid #BBBBBB; + width: auto; + margin: 10px 0; +} +.fp-select table { + padding: 0 0 10px; +} +.fp-select table .mdl-right { + min-width: 84px; +} +.fp-select .fp-reflist .mdl-right { + vertical-align: top; +} +.fp-select .fp-select-buttons { + float: right; +} +.fp-select .fp-info { + display: block; + clear: both; + padding: 1px 20px 0; +} +.fp-select .fp-thumbnail { + float: left; + min-width: 110px; + min-height: 110px; + line-height: 110px; + text-align: center; + margin: 10px 20px 0 0; + background: #fff; + border: 1px solid #ddd; + .box-shadow(inset 0 0 10px 0 #ccc); +} +.fp-select .fp-thumbnail img { + border: 1px solid #DDDDDD; + padding: 3px; + vertical-align: middle; + margin: 10px; +} +.fp-select .fp-fileinfo { + display: inline-block; + .ie7-inline-block(); + margin-top: 10px; +} +.file-picker.fp-select .fp-fileinfo { + max-width: 240px; +} +.fp-select .fp-fileinfo div { + padding-bottom: 5px; +} +.file-picker.fp-select .uneditable { + display: none; +} +.file-picker.fp-select .fp-select-loading { + display: none; +} +.file-picker.fp-select.loading .fp-select-loading { + display: block; +} +.file-picker.fp-select.loading form { + display: none; +} +.fp-select .fp-dimensions.fp-unknown { + display: none; +} +// File Manager +.filemanager-loading{ + display: none; +} +.jsenabled .filemanager-loading{ + display: block; + margin-top: 100px; +} +.filemanager.fm-loading .filemanager-toolbar, +.filemanager.fm-loading .fp-pathbar, +.filemanager.fm-loading .filemanager-container, +.filemanager.fm-loaded .filemanager-loading, +.filemanager.fm-maxfiles .fp-btn-add, +.filemanager.fm-maxfiles .dndupload-message, +.filemanager.fm-noitems .fp-btn-download, +.filemanager .fm-empty-container, +.filemanager.fm-noitems .filemanager-container .fp-content { + display: none; +} +.filemanager .filemanager-updating { + display: none; + text-align: center; +} +.filemanager.fm-updating .filemanager-updating { + display: block; + margin-top: 37px; +} +.filemanager.fm-updating .fm-content-wrapper, +.filemanager.fm-nomkdir .fp-btn-mkdir, +.fitem.disabled .filemanager .filemanager-toolbar, +.fitem.disabled .filemanager .fp-pathbar, +.fitem.disabled .filemanager .fp-restrictions, +.fitem.disabled .filemanager .fm-content-wrapper { + display: none; +} +// File Manager layout +.filemanager { + .fp-restrictions{ + text-align: right; + } +} +.filemanager .fp-navbar { + background: #F2F2F2; + border: 1px solid #BBBBBB; + border-bottom: none; +} +.filemanager-toolbar{ + padding: 4px; + overflow: hidden; +} +.fp-pathbar { + border-top: 1px solid #BBBBBB; + padding: 5px 8px 1px; + min-height: 20px; +} + +.file-picker .fp-toolbar { + padding: 4px; +} + +.fp-toolbar .fp-btn-add, +.fp-toolbar .fp-btn-download, +.fp-toolbar .fp-btn-mkdir, +.fp-toolbar .fp-tb-help, +.fp-toolbar .fp-tb-manage, +.fp-toolbar .fp-tb-logout, +.fp-toolbar .fp-tb-refresh + { + border: 1px solid #CCC; + border-bottom: 1px solid #B3B3B3; + border-radius: 4px; + background: white; + width: 30px; + height: 30px; +} + +.fp-toolbar a:hover { + background-image: radial-gradient(ellipse at center, #ffffff 60%,#dfdfdf 100%); + background-color: #ebebeb; +} + +.fp-toolbar a:active { + background-image: radial-gradient(ellipse at center, #ffffff 40%,#dfdfdf 100%); + background-color: #dfdfdf; +} + +.fp-btn-add a, +.fp-btn-download a, +.fp-btn-mkdir a, +.fp-tb-help a, +.fp-tb-manage a, +.fp-tb-logout a, +.fp-tb-refresh a +{ + display: block; + width: 30px; + height: 30px; + border-radius: 4px; +} + +.fp-btn-add img, +.fp-btn-download img, +.fp-btn-mkdir img, +.fp-tb-help img, +.fp-tb-manage img, +.fp-tb-logout img, +.fp-tb-refresh img { + margin: 7px; +} + +.filemanager .fp-pathbar.empty { + display: none; +} +.filepicker-filelist, +.filemanager-container { + background: #FFFFFF; + clear: both; + overflow: auto; + border: 1px solid #BBBBBB; + min-height: 140px; + position: relative; +} +.filemanager .fp-content{ + overflow: auto; + max-height: 472px; + min-height: 157px; +} +.filemanager-container, +.filepicker-filelist { + overflow: hidden; +} +.fitem.disabled .filepicker-filelist, +.fitem.disabled .filemanager-container { + background-color: #EBEBE4; +} +.fitem.disabled .fp-btn-choose { + .muted +} +.fitem.disabled .filepicker-filelist .filepicker-filename { + display: none; +} +// Icon view (File Manager only) +.fp-iconview .fp-reficons1 { + position: absolute; + height: 100%; + width: 100%; + top: 0; + left: 0; +} +.fp-iconview .fp-reficons2 { + position: absolute; + height: 100%; + width: 100%; + top: 0; + left: 0; +} +.fp-iconview .fp-file.fp-hasreferences .fp-reficons1 { + background: url('[[pix:theme|fp/link]]') no-repeat; + background-position: bottom right; +} +.fp-iconview .fp-file.fp-isreference .fp-reficons2 { + background: url('[[pix:theme|fp/alias]]') no-repeat; + background-position: bottom left; +} +.filemanager .fp-iconview .fp-file.fp-originalmissing .fp-thumbnail img { + display: none; +} +.filemanager .fp-iconview .fp-file.fp-originalmissing .fp-thumbnail { + background: url([[pix:s/dead]]) no-repeat; + background-position: center center; +} +// Table view (File Manager only) +.filemanager .yui3-datatable table { + border: 0 solid #BBBBBB; + width: 100%; +} +.filemanager .yui3-datatable-header { + background: #FFFFFF!important; + border-bottom: 1px solid #CCCCCC!important; + border-left: 0 solid #FFFFFF!important; + color: #555555!important; +} +.filemanager .yui3-datatable-odd .yui3-datatable-cell { + background-color: #F6F6F6!important; + border-left: 0 solid #F6F6F6; +} +.filemanager .yui3-datatable-even .yui3-datatable-cell { + background-color: #FFFFFF!important; + border-left: 0 solid #FFFFFF; +} +.filemanager .fp-filename-icon.fp-hasreferences .fp-reficons1{ + background: url('[[pix:theme|fp/link_sm]]') no-repeat 0 0; + height: 100%; + width: 100%; + position: absolute; + top: 8px; + left: 17px; + z-index: 1000; +} +.filemanager .fp-filename-icon.fp-isreference .fp-reficons2 { + background: url('[[pix:theme|fp/alias_sm]]') no-repeat 0 0; + height: 100%; + width: 100%; + position: absolute; + top: 9px; + left: -6px; + z-index: 1001; +} +// Folder Context Menu (File Manager only) +.filemanager .fp-contextmenu { + display: none; +} +.filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu { + display: block; + position: absolute; + right: 7px; + bottom: 5px; +} +.filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu, +.filemanager .fp-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu { + display: inline; + position: absolute; + left: 14px; + margin-right: -20px; + top: 6px; +} +.dir-rtl .filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu { + left: 7px; + right: inherit; +} +.dir-rtl .filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu, +.dir-rtl .filemanager .fp-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu { + left: inherit; + right: 16px; + margin-right: 0; +} + +// Drag and drop support (filemanager and filepicker form elements) +.filepicker-filelist .filepicker-container, +.filemanager.fm-noitems .fm-empty-container { + display: block; + position: absolute; + top: 10px; + bottom: 10px; + left: 10px; + right: 10px; + border: 2px dashed #BBBBBB; + padding-top: 85px; + text-align: center; +} +.filepicker-filelist .dndupload-target, +.filemanager-container .dndupload-target { + background: #FFFFFF; + position: absolute; + top: 10px; + bottom: 10px; + left: 10px; + right: 10px; + border: 2px dashed #fb7979; + padding-top: 85px; + text-align: center; + .box-shadow(0px 0 0 10px #fff); +} +.filepicker-filelist.dndupload-over .dndupload-target, +.filemanager-container.dndupload-over .dndupload-target { + background: #FFFFFF; + position: absolute; + top: 10px; + bottom: 10px; + left: 10px; + right: 10px; + border: 2px dashed #6c8cd3; + padding-top: 85px; + text-align: center; +} +.dndupload-message { + display: none; +} +.dndsupported .dndupload-message { + display: inline; +} +.dnduploadnotsupported-message { + display: none; +} +.dndnotsupported .dnduploadnotsupported-message { + display: inline; +} +.dndupload-target { + display: none; +} +.dndsupported .dndupload-ready .dndupload-target { + display: block; +} +.dndupload-uploadinprogress { + display: none; + text-align: center; +} +.dndupload-uploading .dndupload-uploadinprogress { + display: block; +} +.dndupload-arrow { + background: url([[pix:theme|fp/dnd_arrow]]) center no-repeat; + width: 100%; + height: 80px; + position: absolute; + top: 5px; +} +.fitem.disabled .filepicker-container, +.fitem.disabled .fm-empty-container { + display: none; +} +.dndupload-progressbars { + padding: 10px; + display: none; +} +.dndupload-inprogress .dndupload-progressbars { + display: block; +} +.dndupload-inprogress .fp-content { + display: none; +} +.filemanager.fm-noitems .dndupload-inprogress .fm-empty-container { + display: none; +} +.filepicker-filelist.dndupload-inprogress .filepicker-container { + display: none; +} +.filepicker-filelist.dndupload-inprogress a { + display: none; +} +// Select Dialogue (File Manager only) +.filemanager.fp-select .fp-select-loading { + display: none; +} +.filemanager.fp-select.loading .fp-select-loading { + display: block; +} +.filemanager.fp-select.loading form { + display: none; +} +.filemanager.fp-select.fp-folder .fp-license, +.filemanager.fp-select.fp-folder .fp-author, +.filemanager.fp-select.fp-file .fp-file-unzip, +.filemanager.fp-select.fp-folder .fp-file-unzip, +.filemanager.fp-select.fp-file .fp-file-zip, +.filemanager.fp-select.fp-zip .fp-file-zip { + display: none; +} +.filemanager.fp-select .fp-file-setmain, +.filemanager.fp-select .fp-file-setmain-help { + display: none; +} +.filemanager.fp-select.fp-cansetmain .fp-file-setmain, +.filemanager.fp-select.fp-cansetmain .fp-file-setmain-help { + display: inline-block; + .ie7-inline-block(); +} +.filemanager .fp-mainfile .fp-filename { + font-weight: bold; +} +.filemanager.fp-select.fp-folder .fp-file-download { + display: none; +} +// to be implemented +.fm-operation { + font-weight: bold; +} +.filemanager.fp-select .fp-original.fp-unknown, +.filemanager.fp-select .fp-original .fp-originloading { + display: none; +} +.filemanager.fp-select .fp-original.fp-loading .fp-originloading { + display: inline; +} +.filemanager.fp-select .fp-reflist.fp-unknown, +.filemanager.fp-select .fp-reflist .fp-reflistloading { + display: none; +} +.filemanager.fp-select .fp-refcount { + max-width: 265px; +} +.filemanager.fp-select .fp-reflist.fp-loading .fp-reflistloading { + display: inline; +} +.filemanager.fp-select .fp-reflist .fp-value { + background: #F9F9F9; + border: 1px solid #BBBBBB; + padding: 8px 7px; + margin: 0; + max-width: 265px; + max-height: 75px; + overflow: auto; +} +.filemanager.fp-select .fp-reflist .fp-value li { + padding-bottom: 7px; +} +// Create folder dialogue (File Manager only) +.filemanager.fp-mkdir-dlg { + text-align: center; +} +.filemanager.fp-mkdir-dlg .fp-mkdir-dlg-text { + text-align: left; + margin: 20px; +} +.dir-rtl .filemanager .fp-mkdir-dlg p { + text-align: right; +} +// Confirm dialogue for delete (File Manager only) +.filemanager.fp-dlg { + text-align: center; +} +.filemanager.fp-dlg .fp-dlg-text { + padding: 0 10px; + min-width: 200px; + max-width: 340px; + max-height: 300px; + overflow: auto; + line-height: 22px; + margin: 40px 20px 20px; + font-size: 12px; +} +// file picker search dialog +.file-picker div.bd { + text-align: left; +} + +// RTL Overrides +.dir-rtl { + .filemanager { + .fp-restrictions{ + text-align: left; + } + } + .file-picker div.bd, + .file-picker .fp-pathbar, + .file-picker .fp-list, + #filemenu .yuimenuitemlabel, + .filemanager-container .yui3-skin-sam .yui3-datatable-header { + text-align: right; + } + .filepicker { + .yui-layout-unit-left { + left: 500px; + } + .yui-layout-unit-center { + left: 0; + } + } + .file-picker .fp-toolbar { + .fp-tb-search input { + background-position: 208px 7px; + padding: 2px 30px 1px 3px; + } + div { + float: right; + margin-left:4px; + } + } +} diff --git a/less/moodle/forms.less b/less/moodle/forms.less new file mode 100644 index 00000000..7ab0a08a --- /dev/null +++ b/less/moodle/forms.less @@ -0,0 +1,477 @@ +/** + * Moodle forms HTML isn't changeable via renderers (yet?) so this + * .less file imports styles from the bootstrap @variables file and + * adds them to the existing Moodle form CSS ids and classes. + * + */ + +form { + margin: 0; +} +.mform fieldset .advancedbutton { + text-align: right; +} +.jsenabled .mform .containsadvancedelements .advanced { + display: none; +} +.mform .containsadvancedelements .advanced.show { + display: block; +} +.mform fieldset.group { + margin-bottom: 0 +} +.mform fieldset.error { + border: 1px solid @errorText; +} +.mform span.error { + display: inline-block; + border: 1px solid @errorBorder; + border-radius: 4px; + background-color: @errorBackground; + padding: 4px; + margin-bottom: 4px; +} +.mform fieldset.collapsible legend a.fheader { + padding: 0 5px 0 20px; + margin-left: -20px; + background: url([[pix:t/expanded]]) 2px center no-repeat; +} +.dir-rtl .mform fieldset.collapsible legend a.fheader { + padding: 0 20px 0 5px; + margin-right: -20px; + margin-left: 0; + background-position: right center; +} +.mform fieldset.collapsed legend a.fheader { + background-image: url([[pix:t/collapsed]]); +} +.dir-rtl .mform fieldset.collapsed legend a.fheader { + background-image: url([[pix:t/collapsed_rtl]]); +} +.jsenabled .mform .collapsed .fcontainer { + display: none; +} + +.mform .fitem .fitemtitle div { + display: inline; +} +.loginpanel .error, +.mform .error { + color: @errorText; +} +.mform .fdescription.required { + margin-left: @horizontalComponentOffset; +} +.mform .fpassword .unmask { + display: inline-block; + margin-left: 0.5em; + & > input { + margin: 0; + } + & > label { + display: inline-block; + } +} +.mform label { + display: inline-block; +} + +.mform .iconhelp { + margin-left: 4px; +} +.dir-rtl .mform .iconhelp { + margin-right: 4px; +} +.mform .ftextarea #id_alltext { + width: 100%; +} +.mform ul.file-list { + padding: 0; + margin: 0; + list-style: none; +} +.mform label .req, +.mform label .adv { + cursor: help; +} +.mform .fcheckbox input { + margin-left: 0; + margin-top: 5px; +} +.mform .fitem fieldset.fgroup label, +.mform fieldset.fdate_selector label { + display: inline; + float: none; + width: auto; +} +.mform .ftags label.accesshide { + display: block; + position: static; +} +.mform .ftags select { + margin-bottom: 0.7em; + min-width: 22em; +} +.mform .helplink img { + margin: 0 .45em; + padding: 0; +} +.mform legend .helplink img { + margin: 0 .2em; +} +.singleselect label { + margin-right: .3em; +} +.dir-rtl .singleselect label { + margin-left: .3em; + margin-right: 0; +} +input#id_externalurl { + direction: ltr; +} +#portfolio-add-button { + display: inline; +} + +// Copying in Bootstrap styles. +.form-item, +.mform .fitem { + .form-horizontal .control-group; + margin-bottom: 10px; + // Theres's a mysterious extra 10px inside this item, + // so reduce margin by 10px from 20px standard to compensate. +} +.form-item .form-label, +.mform .fitem div.fitemtitle { + .form-horizontal .control-label +} +.dir-rtl { + .form-item .form-label, + .mform .fitem div.fitemtitle { + float:right; + text-align: left; + } +} +.form-defaultinfo, +.form-label .form-shortname { + .muted; +} +.form-label .form-shortname { + font-size: @fontSizeMini; + display: block; +} +.dir-rtl .form-label .form-shortname { + text-align: left; +} +.form-item .form-setting, +.form-item .form-description, +.mform .fitem .felement, +#page-mod-forum-search .c1 { + .form-horizontal .controls +} + + +.formsettingheading { + .form-horizontal .help-block +} +// Moodle doesn't differentiate between what Bootstrap calls +// .uneditable-inputs and form help text. Styling them both as +// uneditable looks ugly, styling both as form help is fairly +// subtle in it's impact. Going for the latter as the best option. +.form-item .form-description, +.felement.fstatic { + .help-block; + padding-top: 5px; +} +.form-item .form-description { + padding-top: 0; +} + +// Pale grey container for submit buttons. +table#form td.submit, +.form-buttons, +.path-admin .buttons, +#fitem_id_submitbutton, +.fp-content-center form + div, +div.backup-section + form, +#fgroup_id_buttonar { + .form-actions; + padding-left: 0; +} +.path-admin .buttons, +.form-buttons { // Add back the padding it would usually get from being inside a .form-horizontal. + padding-left: @horizontalComponentOffset; +} +.dir-rtl { + table#form td.submit, + .form-buttons, + .path-admin .buttons, + #fitem_id_submitbutton, + .fp-content-center form + div, + div.backup-section + form, + #fgroup_id_buttonar { + .form-actions; + padding-right: 0; + } + .path-admin .buttons, + .form-buttons { // Add back the padding it would usually get from being inside a .form-horizontal. + padding-right: @horizontalComponentOffset; + } +} +.form-item .form-setting .form-checkbox.defaultsnext { + // Need to specify .defaultsnext and the .form-checkbox class + // is somewhat randomly re-used on various actual checkboxes + // throughout the admin forms, instead of on the wrapper div. + margin-top: 5px; // Push down checkboxes to align. + display: inline-block; // So above style sticks. +} + +#adminsettings h3 { + // Copied from bootstrap/forms.less tag legend. + display: block; + width: 100%; + padding: 0; + margin-bottom: @baseLineHeight; + font-size: @baseFontSize * 1.5; + line-height: @baseLineHeight * 2; + color: @grayDark; + border: 0; + border-bottom: 1px solid #e5e5e5; +} +.mform legend a, +.mform legend a:hover { + color: @grayDark; + text-decoration: none; +} +.dir-rtl .mform .fitem .felement { + margin-right: 30%; + margin-left: auto; + text-align: right; +} +// I think this could be avoided (or at least tidied up) ifr +// we used HTML5 input types like url, phone, email, number etc. +.dir-rtl .mform .fitem .felement input[name=email], +.dir-rtl .mform .fitem .felement input[name=email2], +.dir-rtl .mform .fitem .felement input[name=url], +.dir-rtl .mform .fitem .felement input[name=idnumber], +.dir-rtl .mform .fitem .felement input[name=phone1], +.dir-rtl .mform .fitem .felement input[name=phone2] { + text-align: left; + direction: ltr; +} +.dir-rtl #id_s__pathtodu, +.dir-rtl #id_s__aspellpath, +.dir-rtl #id_s__pathtodot, +.dir-rtl #id_s__supportemail, +.dir-rtl #id_s__supportpage, +.dir-rtl #id_s__sessioncookie, +.dir-rtl #id_s__sessioncookiepath, +.dir-rtl #id_s__sessioncookiedomain, +.dir-rtl #id_s__proxyhost, +.dir-rtl #id_s__proxyuser, +.dir-rtl #id_s__proxypassword, +.dir-rtl #id_s__proxybypass, +.dir-rtl #id_s__jabberhost, +.dir-rtl #id_s__jabberserver, +.dir-rtl #id_s__jabberusername, +.dir-rtl #id_s__jabberpassword, +.dir-rtl #id_s__additionalhtmlhead, +.dir-rtl #id_s__additionalhtmltopofbody, +.dir-rtl #id_s__additionalhtmlfooter, +.dir-rtl #id_s__docroot, +.dir-rtl #id_s__filter_tex_latexpreamble, +.dir-rtl #id_s__filter_tex_latexbackground, +.dir-rtl #id_s__filter_tex_pathlatex, +.dir-rtl #id_s__filter_tex_pathdvips, +.dir-rtl #id_s__filter_tex_pathconvert, +.dir-rtl #id_s__blockedip, +.dir-rtl #id_s__pathtoclam, +.dir-rtl #id_s__quarantinedir, +.dir-rtl #id_s__sitepolicy, +.dir-rtl #id_s__sitepolicyguest, +.dir-rtl #id_s__cronremotepassword, +.dir-rtl #id_s__allowedip, +.dir-rtl #id_s__blockedip, +.dir-rtl #id_s_enrol_meta_nosyncroleids, +.dir-rtl #id_s_enrol_ldap_host_url, +.dir-rtl #id_s_enrol_ldap_ldapencoding, +.dir-rtl #id_s_enrol_ldap_bind_dn, +.dir-rtl #id_s_enrol_ldap_bind_pw, +.dir-rtl #admin-emoticons .form-text, +.dir-rtl #admin-role_mapping input[type=text], +.dir-rtl #id_s_enrol_paypal_paypalbusiness, +.dir-rtl #id_s_enrol_flatfile_location, +#page-admin-setting-enrolsettingsflatfile.dir-rtl input[type=text], +#page-admin-setting-enrolsettingsdatabase.dir-rtl input[type=text], +#page-admin-auth-db.dir-rtl input[type=text] { + direction: ltr; +} +#page-admin-setting-enrolsettingsflatfile.dir-rtl .informationbox { + direction: ltr; + text-align: left; +} +#page-admin-grade-edit-scale-edit.dir-rtl .error input#id_name { + margin-right: 170px; +} +#page-grade-edit-outcome-course .courseoutcomes { + margin-left: auto; + margin-right: auto; + width: 100%; +} +#page-grade-edit-outcome-course .courseoutcomes td { + text-align:center; +} +/* Install Process' text fields Forms, should always be justified to the left */ +#installform #id_wwwroot, +#installform #id_dirroot, +#installform #id_dataroot, +#installform #id_dbhost, +#installform #id_dbname, +#installform #id_dbuser, +#installform #id_dbpass, +#installform #id_prefix { + direction: ltr; +} + +.mdl-right > label { + // Workaround for repository pop-up because the : are outside the label, + // can/should be fixed in filemanager renderers. + display: inline-block; +} + +// Checkbox labels. Bootstrap puts the associated checkbox inside the label. +// Moodle puts it beside the label, so we need to make it inline-block +// to keep it on the same horizontal level. +input[type="radio"] + label, +input[type="checkbox"] + label { + display: inline; + padding-left: 0.2em; +} +input[type="radio"], +input[type="checkbox"] { + margin-top: -4px; // Dodgy hack, must be better way. + margin-right: 7px; +} +.dir-rtl { + input[type="radio"], + input[type="checkbox"] { + margin-left: 7px; + margin-right: auto; + } +} +.singleselect { + display: inline-block; + form, + select{ + margin: 0; + } +} +.form-item .form-label label { + margin-bottom: 0; +} +.dir-rtl .form-item .form-label label { + text-align:left; +} +.felement.ffilepicker { + margin-top: 5px; +} +div#dateselector-calendar-panel { + z-index: 3100; /* Set higher than the z-index of the filemanager - see MDL-39047. */ +} + +fieldset.coursesearchbox label { + display: inline; +} + +/** + * Show the labels above text editors and file managers except on wide screens. + */ +#region-main .mform:not(.unresponsive) .fitem .fitemtitle label { + font-weight: bold; +} + +.makeFormsVertical() { + #region-main .mform:not(.unresponsive) .fitem .fitemtitle { + display: block; + margin-top: 4px; + margin-bottom: 4px; + text-align: left; + width: 100%; + } + #region-main .mform:not(.unresponsive) .femptylabel .fitemtitle { + display: inline-block; + width: auto; + margin-right: 8px; + } + &.dir-rtl #region-main .mform:not(.unresponsive) .femptylabel .fitemtitle { + margin-right: 0px; + margin-left: 8px; + } + &.dir-rtl #region-main .mform:not(.unresponsive) .fitem .fitemtitle { + text-align: right; + } + + #region-main .mform:not(.unresponsive) .fitem .felement { + margin-left: 0; + width: 100%; + float: left; + padding-left: 0; + padding-right: 0; + } + #region-main .mform:not(.unresponsive) .fitem .fstatic:empty { + display: none; + } + #region-main .mform:not(.unresponsive) .femptylabel .felement { + display: inline-block; + margin-top: 4px; + padding-top: 5px; + width: auto; + } + &.dir-rtl #region-main .mform:not(.unresponsive) .fitem .felement { + margin-right: 0; + float: right; + padding-right: 0; + padding-left: 0; + } + #region-main .mform:not(.unresponsive) .fitem_fcheckbox .fitemtitle, + #region-main .mform:not(.unresponsive) .fitem_fcheckbox .felement { + display: inline-block; + width: auto; + } + &.dir-rtl #region-main .mform:not(.unresponsive) .fitem_fcheckbox .felement { + float: right; + } + #region-main .mform:not(.unresponsive) .fitem_fcheckbox .felement { + padding: 6px; + } +} + +/** + * Make forms vertical when the screen is less than 1200px; + */ +@media (max-width: 1199px) { + body { + .makeFormsVertical; + } +} + +/** + * Make forms vertical when the screen is less than 1474px AND both side-pre and side-post contain blocks. + * This is an extra special media rule. + * It causes forms to show vertically when the screen size is calculated as: + * 1199px + (1199px * 23%) + * Where 23% is the width of span3 + */ +@maxWidthForVerticalForms: 1199px * (unit(((@fluidGridColumnWidth1200 * 3) + (@fluidGridGutterWidth * (3 - 1)))) / 100) + 1199px; +@media (max-width: @maxWidthForVerticalForms) { + .used-region-side-pre.used-region-side-post { + .makeFormsVertical; + } +} + +/* Revert to the non-fixed width where a textarea has the number of columns + specified, or an input has it's size specified. */ +textarea[cols], +input[size] { + width: auto; +} diff --git a/less/moodle/grade.less b/less/moodle/grade.less new file mode 100644 index 00000000..f7692463 --- /dev/null +++ b/less/moodle/grade.less @@ -0,0 +1,232 @@ +// The class gradetreebox matches the pages displaying the gradebook +// "Categories and items" > "Simple view" and "Full view". +.gradetreebox { + h4 { + // Force back the base font-size to minimise width. + font-size: @baseFontSize; + } + th.cell, + input[type=text] { + // Fallback on the minimum width. + width: auto; + } + input[type=text], + select { + // Remove the bottom margin to gain height. + margin-bottom: 0; + } +} + +// Rubrics +#page-grade-grading-manage { + #activemethodselector { + label { + display: inline-block; + } + .helptooltip { + margin-right: 0.5em; + } + } + .actions { + display: block; + text-align: center; + margin-bottom: 1em; + .action { + .btn(); + .btn-large(); + display: inline-block; + position: relative; + vertical-align: top; + width: 150px; + text-align: center; + overflow: hidden; + margin: 0.5em; + padding: 1em; + border: 1px solid #aaa; + .action-icon { + display: inline-block; + position: relative; + height: 64px; + width: 64px; + } + .action-text { + position: relative; + top: 0.4em; + font-size: 14px; + } + } + } +} + +#page-grade-grading-form-rubric-edit { + .gradingform_rubric_editform .status { + font-size: 70%; + } +} + +.gradingform_rubric.editor { + .addlevel, .addcriterion { + input { + // Fallback for IE8: we use Bootstrap 2's button styles normally, but + // IE8 ignores background-image: linear-gradient rules. + background: #fff none no-repeat top left; + } + } +} + +.dir-rtl { + #rubric-rubric.gradingform_rubric { + #rubric-criteria .criterion { + .level { + .score { + text-align: right; + float: right; + margin-left: 28px; + margin-right: 0px; + } + .delete { + float: left; + input { + left: 0; + right: auto; + } + } + } + } + .addcriterion { + margin-right: 5px; + margin-left: 0px; + + input { + padding-right: 26px; + padding-left: 10px; + background-position: right 8px top 8px; + } + } + .options { + .option { + .value { + margin-left: 0px; + margin-right: 5px; + } + input { + // margins flipped for RTL. + margin-left: 12px; + margin-right: 5px; + } + } + } + } +} + +#rubric-rubric { + &.gradingform_rubric { + #rubric-criteria { + margin-bottom: 1em; + @rubricPadding: 6px; + .criterion { + .description { + vertical-align: top; + padding: @rubricPadding; + textarea { + margin-bottom: 0px; + height: 115px; + } + } + .definition { + textarea { + width: 80%; + margin-bottom: 0px; + } + } + .score { + position: relative; + float: left; + margin-right: 28px; + input { + margin-bottom: 0px; + } + } + .level { + vertical-align: top; + padding: @rubricPadding; + .delete { + position: relative; + width: 32px; + height: 32px; + margin-top: -32px; + clear: both; + float: right; + input { + display: block; + position: absolute; + right: 0; + bottom: 0; + height: 24px; + width: 24px; + margin: 0px; + &:hover { + background-color: #ddd; + } + } + } + } + .scorevalue { + input { + // Should handle at least three chars with room to spare. + float: none; + width: 2em; + &.hiddenelement,&.pseudotablink { + // Zero out the width if it's still in the block flow for some reason + // when hidden + width: 0; + } + } + } + .addlevel { + vertical-align: middle; + input { + .btn(); + background-position: 0px 0px; + height: 30px; + margin-right: 5px; + } + } + } + } + .addcriterion { + margin-left: 5px; + .btn(); + padding: 0; + input { + margin: 0; + color: inherit; + text-shadow: inherit; + border: 0px none; + line-height: inherit; + background: transparent url([[pix:t/add]]) no-repeat 7px 8px; + padding-left: 26px; + } + margin-bottom: 1em; + } + .options { + clear: both; + .option { + label { + margin: 0; + padding: 0; + font-size: inherit; + font-weight: normal; + line-height: 2em; + color: inherit; + text-shadow: none; + background-color: transparent; + } + input { + margin-left: 5px; + margin-right: 12px; + } + } + } + } +} diff --git a/less/moodle/message.less b/less/moodle/message.less new file mode 100644 index 00000000..98fa7789 --- /dev/null +++ b/less/moodle/message.less @@ -0,0 +1,193 @@ +/** Message **/ +.message-discussion-noframes h1 { + font-size: 1em; +} +.message-discussion-noframes #userinfo .commands, +.message .noframesjslink, +.message .link { + font-size: @fontSizeSmall; +} +.message .heading { + font-size: 1em; + font-weight: bold; +} +.message .author { + font-weight: bold; +} +.message .time { + font-style: italic; +} +#page-message-user .commands span { + font-size: 0.7em; +} +#page-message-user .name { + font-weight: bold; + font-size: 1.1em; +} +table.message_search_results td { + border-color: #ddd; +} +.message .time, +.message.me .author { + color: #999; +} +.message.other .author { + color: #88c; +} +#page-message-messages { + padding: 10px; +} +#page-message-send .notifysuccess { + padding: 1px; +} +#page-message-send td.fixeditor { + text-align: center; +} +.message .note { + padding: 10px; +} +table.message .searchresults td { + padding: 5px; +} +.message .contactselector { + width: 24%; + float: left; +} +.message .contactselector .contact { + text-align: left; +} +.message .contactselector .messageselecteduser { + font-weight: bold; +} +.message .contactselector .paging { + z-index: 1; + position: relative; +} +.message .messagearea { + padding-left: 1%; + border-left: 1px solid #d3d3d3; + width: 74%; + float: right; + min-height: 200px; +} +.message .messagearea .messagehistorytype { + clear: both; + padding-bottom: 20px; +} +.message .messagearea .messagehistory .message_user_pictures { + margin-left: auto; + margin-right: auto; +} +.message .messagearea .messagehistory .message_user_pictures #user1 { + vertical-align: top; + width: 200px; +} +.message .messagearea .messagehistory .message_user_pictures #user2 { + vertical-align: top; + width: 200px; +} +.message .messagearea .messagehistory .message_user_pictures .useractionlinks { + font-size: 0.9em; +} +.message .messagearea .messagehistory .heading { + width: 100%; + clear: both; +} +.message .messagearea .messagehistory .left { + padding-bottom: 10px; + width: 50%; + float: left; + clear: both; +} +.dir-rtl .message .messagearea .messagehistory .left { + float:right; +} +.message .messagearea .messagehistory .right { + padding-bottom: 10px; + width: 50%; + float: right; + clear: both; +} +.dir-rtl .message .messagearea .messagehistory .right { + float:left; +} +.message .messagearea .messagehistory .notification { + padding: 10px; + background-color: #eee; + margin-top: 5px; +} +.message .messagearea .messagesend { + padding-top: 20px; + clear: both; +} +.message .messagearea .messagesend .messagesendbox { + width: 100%; +} +.message .messagearea .messagesend fieldset { + padding: 0; + margin: 0; +} +// Bring the message send button closer to the message box. +.message .messagearea .messagerecent { + text-align: left; + width: 100%; +} +.message .messagearea .messagerecent .singlemessage { + border-bottom: 1px solid #d3d3d3; + padding: 10px; +} +.message .messagearea .messagerecent .singlemessage .otheruser span { + padding: 5px; +} +.message .messagearea .messagerecent .singlemessage .messagedate { + float: right; +} +.message .hiddenelement { + display: none; +} +// not just using hidden as mform adds that class to its fieldset */ +.message .visible { + display: inline; +} +.message #usergroupselector.fieldset, .message #viewing { + width: 100%; +} +.messagesearchresults { + margin-bottom: 40px; +} +.messagesearchresults td { + padding: 0 10px 0 20px; +} +.messagesearchresults td span { + white-space: nowrap; +} +.messagesearchresults td img.userpicture { + padding-right: .45em; + vertical-align: text-bottom; +} +.dir-rtl .messagesearchresults td img.userpicture { + padding-left: .45em; + padding-right: 0; +} +.messagesearchresults td span img { + padding: 0 0 0 .45em; + vertical-align: text-bottom; +} +.dir-rtl .messagesearchresults td span img { + padding: 0 .45em 0 0; +} +#newmessageoverlay { + background-color: #d3d3d3; + border: 1px solid black; + padding: 20px; + position: fixed; + bottom: 0; + right: 0; +} +#newmessageoverlay #usermessage { + padding: 10px; +} +/* Widen the plain text editor on the bulk message screen */ +#page-user-action_redir #edit-messagebody { + width:auto; +} diff --git a/less/moodle/modules.less b/less/moodle/modules.less new file mode 100644 index 00000000..00de46c2 --- /dev/null +++ b/less/moodle/modules.less @@ -0,0 +1,286 @@ +/* modules.less */ + +// The home for small tweaks to modules that don't require +// changes drastic enough to pull in the full module css +// and replace it completely +// Plus some misc. odds and ends + +select { + width: auto; +} + +// Forum + +.path-mod-forum .forumsearch { + input, + .helptooltip { + margin: 0 3px; + } +} + +.path-mod-forum .forumheaderlist, +.path-mod-forum .forumheaderlist td { + border: none; +} + +.path-mod-forum .forumheaderlist { + thead .header { + white-space: normal; + vertical-align: top; + } + thead .header.replies { + text-align: center; + } + thead .header.lastpost { + text-align: right; + } + .discussion { + .author, .replies, .lastpost { + white-space: normal; + } + .replies { + text-align: center; + } + .topic, .topic.starter, .picture, .author, .replies, .lastpost { + vertical-align: top; + } + } +} + +.path-mod-feedback .feedback_bar_image { + height: 5px; // we should remove the bar height specification in core +} + +.forumpost { + .well; + padding: 6px; + .header { + margin-bottom: 3px; + } + .picture img { + margin: 3px; + &.userpicture { + margin-left: 3px; + margin-right: 10px; + } + } + .content { + .posting.fullpost { + margin-top: 8px; + } + } + .row { + .topic, + .content-mask, + .options { + margin-left: 48px; + } + &.side { + clear: both; + } + } +} + +.dir-rtl .forumpost { + .picture img { + &.userpicture { + margin-left: 10px; + margin-right: 3px; + } + } + .row { + .topic, + .content-mask, + .options { + margin-left: 0; + margin-right: 48px; + } + } +} + +.forumpost .row .left { + width: 48px; +} + +.forumpost .options .commands { + margin-left: 0; +} + +.forumpost .subject { + font-weight: bold; +} + +// Override hardcoded forum modules styling +.forumsearch input[type=text] { + margin-bottom: 0 !important; +} + +#page-mod-forum-discuss .discussioncontrols { + width: auto; + margin: 0; +} + +#page-footer { + margin-top: 1em; + padding: 1em 0; + border-top: 2px solid #eee; +} + +.maincalendar .calendarmonth td,.maincalendar .calendarmonth th { + border: 1px dotted #ddd; +} + +.path-grade-report-grader h1 { + text-align: inherit; +} + +#page-mod-chat-gui_basic input#message { + max-width: 100%; +} + +#page-mod-data-view #singleimage { + width: auto; +} + +.path-mod-data form { + margin-top: 10px; +} + +.template_heading { + margin-top: 10px; +} + +.breadcrumb-button { + float: right; + margin-top: 4px; +} + +.dir-rtl { + .nav-tabs > li, + .nav-pills > li { + float: right; + } +} +.dir-rtl .navbar .brand { + float: right; +} + +.navbar-inverse .logininfo a { + color: @navbarInverseLinkColor; +} +.navbar-inverse .logininfo a:hover { + background-color: @navbarInverseLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active + color: @navbarInverseLinkColorHover; +} + +.navbar-fixed-top, +.navbar-fixed-bottom { + z-index: 4030; +} + +.dir-rtl .breadcrumb-button, +.dir-rtl .navbar .btn-navbar { + float: left; +} + +.ie .row-fluid .desktop-first-column { + margin-left: 0; +} +.langmenu form { + margin: 0; +} +.container-fluid { + max-width: 1680px; + margin: 0 auto; +} +// contributed by Paul Hibbitts, see http://msdn.microsoft.com/en-us/library/ie/jj583807(v=vs.85).aspx +canvas { + -ms-touch-action: auto; +} + +div#dock { + display: none; +} + +.path-mod-choice { + .horizontal .choices { + margin: 0; + .option { + display: inline-block; + padding: 10px; + } + } + .results .data { + white-space: normal; + } +} + +.path-mod-lesson .firstpageoptions { + margin: auto; + min-width: 280px; + width: 60%; +} + +.path-mod-lesson .centerpadded { + padding: 5px; + text-align: center; +} + +.path-mod-wiki .wiki_headingtitle, +.path-mod-wiki .midpad, +.path-mod-wiki .wiki_headingtime { + text-align: inherit; +} + +.path-mod-wiki .wiki_contentbox { + width: 100%; +} + +// Dropdown styling. +.dropdown-menu { + > li > a { + padding: 3px 20px 3px 8px; + } +} +.dir-rtl .dropdown-menu { + > li > a { + padding: 3px 8px 3px 20px; + } +} +.dir-rtl .dropdown-submenu > .dropdown-menu { + .border-radius(6px 0px 6px 6px); +} + + +// Survey module + +.path-mod-survey { + .surveytable { + .r0 {background-color: #eee;} + .r1 {background-color: #ddd;} + .rblock label {text-align: center;} + } + .resultgraph, .reportsummary, .studentreport, .reportbuttons, .centerpara { + text-align:center; + } +} +// rtl overrides +.dir-rtl { + &.path-mod-forum .forumheaderlist { + thead .header.lastpost { + text-align: left; + } + .discussion { + .lastpost { + text-align: left; + } + } + } +} + +.nav .caret { + margin-left: 4px; +} +.dir-rtl .nav .caret { + margin-right: 4px; +} \ No newline at end of file diff --git a/less/moodle/question.less b/less/moodle/question.less new file mode 100644 index 00000000..36abd5e7 --- /dev/null +++ b/less/moodle/question.less @@ -0,0 +1,551 @@ +/* Question */ +.questionbank h2 { + margin-top: 0; +} +.questioncategories h3 { + margin-top: 0; +} +#chooseqtypebox { + margin-top: 1em; +} +#chooseqtype h3 { + margin: 0 0 0.3em; +} +#chooseqtype .instruction { + display: none; +} +#chooseqtype .fakeqtypes { + border-top: 1px solid silver; +} +#chooseqtype .qtypeoption { + margin-bottom: 0.5em; +} +#chooseqtype label { + display: block; +} +#chooseqtype .qtypename img { + padding: 0 0.3em; +} +#chooseqtype .qtypename { + display: inline-table; + width: 16em; +} +#chooseqtype .qtypesummary { + display: block; + margin: 0 2em; +} +#chooseqtype .submitbuttons { + margin: 0.7em 0; + text-align: center; +} +#qtypechoicecontainer { + display: none; +} +#qtypechoicecontainer_c.yui-panel-container.shadow .underlay { + background: none; +} +#qtypechoicecontainer.yui-panel .hd { + color: #333; + letter-spacing: 1px; + text-shadow: 1px 1px 1px #fff; + .border-top-radius(10px); + border: 1px solid #ccc; + border-bottom: 1px solid #bbb; + #gradient > .vertical(#fff, #ccc); +} +#qtypechoicecontainer { + font-size: 12px; + color: #333; + background: #F2F2F2; + .border-radius(10px); + border: 1px solid #ccc; + border-top: 0 none; + .box-shadow(5px 5px 20px 0 #666); +} +#qtypechoicecontainer #chooseqtype { + width: 40em; +} +#chooseqtypehead h3 { + margin: 0; + font-weight: normal; +} +#chooseqtype .qtypes { + position: relative; + border-bottom: 1px solid #bbb; + padding: 0.24em 0; +} +#chooseqtype .alloptions { + overflow-x: hidden; + overflow-y: auto; + max-height: 400px; + max-height: calc(100vh - 15em); + /* The next line is a workaround because recess is crap. Delete ththe following line once + * https://github.com/twitter/recess/issues/59 / https://github.com/twitter/recess/issues/75 + * is fixed. The previous line is the right one. */ + max-height: 60vh; + width: 60%; +} +#chooseqtype .qtypeoption { + margin-bottom: 0; + padding: 0.3em 0.3em 0.3em 1.6em; +} +#chooseqtype .qtypeoption img { + vertical-align: text-bottom; + padding-left: 1em; + padding-right: 0.5em; +} +#chooseqtype .selected { + background-color: #fff; + .box-shadow(0px 0 10px 0 #ccc); +} +#chooseqtype .instruction, +#chooseqtype .qtypesummary { + display: none; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 60%; + margin: 0; + overflow-x: hidden; + overflow-y: auto; + padding: 1.5em 1.6em; + background-color: #fff; + overflow-y: auto; +} +#chooseqtype .instruction, +#chooseqtype .selected .qtypesummary { + display: block; +} +#categoryquestions { + margin: 0; + td, + th { + padding: 0 0.2em; + } + th { + text-align: left; + font-weight: normal; + } + .checkbox { + padding-left: 5px; + } + .checkbox input[type="checkbox"] { + margin-left: 0px; + float: none; + } + img.iconsmall { + padding: 0; + } + .iconcol { + padding: 3px; + } + label { + margin: 0; + } +} +#page-mod-quiz-edit { + div.questionbankwindow div.header { + margin: 0; + } + div.questionbankwindow.block { + padding: 0; + } +} +.dir-rtl #categoryquestions th { + text-align: right; +} +.questionbank .singleselect { + margin: 0; +} +/* Question editing form */ +#combinedfeedbackhdr div.fhtmleditor { + padding: 0; +} +#combinedfeedbackhdr div.fcheckbox { + margin-bottom: 1em; +} +#multitriesheader div.fitem_feditor { + margin-top: 1em; +} +#multitriesheader div.fitem_fgroup { + margin-bottom: 1em; +} +#multitriesheader div.fitem_fgroup fieldset.felement label { + margin-left: 0.3em; + margin-right: 0.3em; +} +body.path-question-type .fitem_fgroup .accesshide { + font: inherit; + left: 0; + position: static; + padding-right: .3em; +} +.que { + clear: left; + text-align: left; + margin: 0 auto 1.8em auto; +} +.dir-rtl .que { + text-align: right; +} +.que .info { + float: left; + width: 7em; + padding: 0.5em; + margin-bottom: 1.8em; + background-color: @grayLighter; + border: 1px solid darken(spin(@grayLighter, -10), 7%); + .border-radius(2px); +} +.que h3.no { + margin: 0; + font-size: 0.8em; + line-height: 1; +} +.que span.qno { + font-size: 1.5em; + font-weight: bold; +} +.que .info > div { + font-size: 0.8em; + margin-top: 0.7em; +} +.que .info .questionflag.editable { + cursor: pointer; +} +.que .info .editquestion img, +.que .info .questionflag img, +.que .info .questionflag input { + vertical-align: bottom; +} +.que .content { + margin: 0 0 0 8.5em; +} +.que .formulation, +.que .outcome, +.que .comment { + .alert +} +.que .formulation { + .alert-info; + color: @textColor; +} +.formulation input[type="text"], +.formulation select { + width: auto; +} +.path-mod-quiz input[size] { + width: auto; +} +.que .outcome { +} +.que .comment { + .alert-success; +} +.que .history { + .well +} +.que .ablock { + margin: 0.7em 0 0.3em 0; +} +.que .im-controls { + margin-top: 0.5em; + text-align: left; +} +.dir-rtl .que .im-controls { + text-align: right; +} +.que .specificfeedback, +.que .generalfeedback, +.que .rightanswer, +.que .im-feedback, +.que .feedback, +.que p { + margin: 0 0 0.5em; +} +.que .qtext { + margin-bottom: 1.5em; +} +.que .correctness { + .label; + &.correct { + background-color: @successText; + } + &.partiallycorrect { + background-color: @orange; + } + &.notanswered, + &.incorrect { + background-color: @errorText; + } +} +.que .validationerror { + color: @errorText; +} +// copied from .formFieldState in mixin.less +// and made more specific +.answerState(@textColor, @backgroundColor) { + @borderColor: @textColor; + color: @textColor; + background-color: @backgroundColor; + border-color: @borderColor; + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work + &:focus { + border-color: darken(@borderColor, 10%); + @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%); + .box-shadow(@shadow); + } +} + +.formulation .correct { + background-color: @successBackground; +} +.formulation .partiallycorrect { + background-color: @warningBackground; +} +.formulation .incorrect { + background-color: @errorBackground; +} +.formulation select.correct, +.formulation input.correct { + .answerState(@successText, @successBackground); +} +.formulation select.partiallycorrect, +.formulation input.partiallycorrect { + .answerState(@warningText, @warningBackground); +} +.formulation select.incorrect, +.formulation input.incorrect { + .answerState(@errorText, @errorBackground); +} + +.que .grading, +.que .comment, +.que .commentlink, +.que .history { + margin-top: 0.5em; +} +.que .history h3 { + margin: 0 0 0.2em; + font-size: 1em; +} +.que .history table { + width: 100%; + margin: 0; +} +.que .history .current { + font-weight: bold; +} +.que .questioncorrectnessicon { + vertical-align: text-bottom; +} +.que input.questionflagimage { + padding-right: 3px; +} +.dir-rtl .que input.questionflagimage { + padding-left: 3px; + padding-right: 0; +} +.importerror { + margin-top: 10px; + border-bottom: 1px solid #555; +} +.mform .que.comment .fitemtitle { + width: 20%; +} +#page-question-preview #techinfo { + margin: 1em 0; +} +/** Overide for RTL layout **/ +.dir-rtl #chooseqtype .instruction, +.dir-rtl #chooseqtype .qtypesummary { + right: 60%; + left: 0%; + border-left: 0; + border-right: 1px solid grey; +} + +// imported from quiz.css + +#page-mod-quiz-edit .box.generalbox.questionbank { + padding: 0.5em; +} + +#page-mod-quiz-edit .questionbank .categorypagingbarcontainer, +#page-mod-quiz-edit .questionbank .categoryquestionscontainer, +#page-mod-quiz-edit .questionbank .choosecategory { + padding: 0; +} + +#page-mod-quiz-edit .questionbank .choosecategory select { + width: 100%; +} + +#page-mod-quiz-edit div.questionbank .categoryquestionscontainer { + background: transparent; +} +#page-mod-quiz-edit #categoryquestions>thead { + background: #FFF; +} +#page-mod-quiz-edit #categoryquestions>tbody>tr:nth-of-type(even) { + background: #e4e4e4; +} + +#page-mod-quiz-edit .questionbankwindow div.header { + color: #444; + text-shadow: none; + padding: 3px; + .border-top-radius(4px); + margin: 0 -10px 0 -10px; + padding: 2px 10px 2px 10px; + background: transparent; /* Old browsers */ +} + +#page-mod-quiz-edit .questionbankwindow div.header a:link, +#page-mod-quiz-edit .questionbankwindow div.header a:visited { + color: @linkColor; +} + +#page-mod-quiz-edit .questionbankwindow div.header a:hover { + color: @linkColorHover; +} + +#page-mod-quiz-edit .createnewquestion { + padding: 0.3em 0; + div, input { + margin: 0; + } +} + +#page-mod-quiz-edit .questionbankwindow div.header .title { + color: @textColor; +} + +#page-mod-quiz-edit div.container div.generalbox { + background-color: transparent; + padding: 1.5em; +} + +#page-mod-quiz-edit .categoryinfo { + background-color: transparent; + border-bottom: none; +} + +#page-mod-quiz-edit .createnewquestion .singlebutton input { + margin-bottom: 0; +} + +#page-mod-quiz-edit div.questionbank .categorysortopotionscontainer, +#page-mod-quiz-edit div.questionbank .categoryselectallcontainer { + padding: 0 0 1.5em 0; +} + +#page-mod-quiz-edit div.questionbank .categorypagingbarcontainer { + background-color: transparent; + margin: 0; + border-top: 0; + border-bottom: 0; + .paging { + padding: 0 0.3em; + } +} + +#page-mod-quiz-edit div.question div.content div.questioncontrols { + background-color: @bodyBackground; +} +#page-mod-quiz-edit div.question div.content div.points { + margin-top: -0.5em; + padding-bottom: 0em; + border: none; + background-color: @bodyBackground; + position: static; + width: 12.1em; + float: right; + margin-right: 60px; +} +#page-mod-quiz-edit.dir-rtl div.question div.content div.points { + float: left; + margin-left: 60px; + margin-right: 0px; + +} +#page-mod-quiz-edit div.question div.content div.points br { + display: none; +} +#page-mod-quiz-edit div.question div.content div.points label { + display: inline-block; +} + +#page-mod-quiz-edit div.quizpage .pagecontent .pagestatus { + background-color: @bodyBackground; +} + +#page-mod-quiz-edit .quizpagedelete, +#page-mod-quiz-edit .quizpagedelete img { + background-color: transparent; +} + +#page-mod-quiz-edit div.quizpage .pagecontent { + border: 1px solid #ddd; + .border-radius(2px); + overflow: hidden; +} + +#page-mod-quiz-edit div.questionbank .categoryinfo { + padding: 0.3em 0; +} + +#page-mod-quiz-edit div.questionbank .modulespecificbuttonscontainer { + padding: 0; + strong { + display: block; + } + hr, br { + display: none; + } + strong { + margin-left: -0.3em; + } + strong label { + margin-left: 0.3em; + } + input { + margin-left: 0; + } + input + input { + margin-left: 5px; + } +} + +.questionbankwindow .module { + width: auto; +} + +#page-mod-quiz-edit div.editq div.question div.content { + background-color: @bodyBackground; + border: 1px solid #ddd; + .border-radius(2px); + overflow: hidden; +} + +.path-mod-quiz .statedetails { + display: block; + font-size: 0.9em; +} + +a#hidebankcmd { + color: @linkColor; +} + +// override question plugins + +// qtype_shortanswer + +.que.shortanswer .answer { + padding: 0; +} + +.que label { + display: inline; +} diff --git a/less/moodle/reports.less b/less/moodle/reports.less new file mode 100644 index 00000000..6c90a808 --- /dev/null +++ b/less/moodle/reports.less @@ -0,0 +1,18 @@ +/* reports.less */ + +// The home for small tweaks to reports that don't require +// changes drastic enough to pull in the full module css +// and replace it completely. + +#page-report-participation-index .participationselectform div label { // Using 'div' here to override the report styles.css + display: inline; + margin: 0 5px; // No top and bottom margin with a 5px left and right for LTR and RTL. +} + +#page-report-participation-index.dir-ltr .participationselectform div label[for=menuinstanceid] { + margin-left: 0px; // No left margin for LTR. +} + +#page-report-participation-index.dir-rtl .participationselectform div label[for=menuinstanceid] { + margin-right: 0px; // No right margin for RTL. +} \ No newline at end of file diff --git a/less/moodle/responsive.less b/less/moodle/responsive.less new file mode 100644 index 00000000..58168dac --- /dev/null +++ b/less/moodle/responsive.less @@ -0,0 +1,611 @@ +/* responsive.less */ + +// Should probably be moved to relevant .less files +// after 4095 selector issue is solved + +@media (min-width: 980px) { + .dir-rtl .navbar .nav.pull-right, + .dir-rtl .navbar .logininfo { + float: left; + } + .dir-rtl .navbar .nav { + float: right; + & > li { + float: right; + } + } +} + +@media (min-width: 980px) and (max-width: 1199px) { + // Wider form labels. + .form-item .form-label, + .mform .fitem div.fitemtitle, + .userprofile dl.list dt, + .form-horizontal .control-label { + width: @horizontalComponentOffset980 - 20px; + } + .form-item .form-setting, + .form-item .form-description, + .mform .fitem .felement, + #page-mod-forum-search .c1, + .mform .fdescription.required, + .userprofile dl.list dd, + .form-horizontal .controls { + margin-left: @horizontalComponentOffset980; + } + .dir-rtl { + .form-item .form-setting, + .form-item .form-description, + .mform .fitem .felement, + .mform .fdescription.required, + .userprofile dl.list dd, + .form-horizontal .controls { + margin-right: @horizontalComponentOffset980; + } + } + #page-mod-forum-search.dir-lrt .c1 { + margin-right: @horizontalComponentOffset980; + } + .path-admin .buttons, + .form-buttons { + padding-left: @horizontalComponentOffset980; + } +} + +@media (max-width: 873px) { + .file-picker .fp-repo-area { + width: 100%; + height: auto; + max-height: 220px; + y-scroll: auto; + float: none; + border: 0px; + } + .file-picker .fp-repo-items { + width: 100%; + float: none; + } + .file-picker .fp-login-form .fp-login-input label { + text-align: left; + } + .dir-rtl .file-picker .fp-login-form .fp-login-input label { + text-align: right; + } + .file-picker .fp-content form td { + display: block; + width: 100%; + text-align: left; + } + .dir-rtl .file-picker .fp-content form td { + text-align: right; + } + .fp-content .mdl-right { + text-align: left; + } + .dir-rtl .fp-content .mdl-right { + text-align: right; + } + + .fp-repo-items .fp-navbar { + border-top: 1px solid rgb(187, 187, 187); + } + + .dir-rtl { + .userprofile dl.list dt, + .userprofile dl.list dd { + float: none; + text-align: right; + margin-right: 0; + } + } + +} + +@media (min-width: 1200px) { + // Login page. + .loginbox.twocolumns .loginpanel { + margin-left: 0; + } + .loginbox.twocolumns .loginpanel, + .loginbox.twocolumns .signuppanel { + width: 48.717948717948715%; + *width: 48.664757228587014%; + } + // Wider form labels. + .form-item .form-label, + .mform .fitem div.fitemtitle, + .userprofile dl.list dt, + .form-horizontal .control-label { + width: @horizontalComponentOffset1200 - 20px; + } + .form-item .form-setting, + .form-item .form-description, + .mform .fitem .felement, + #page-mod-forum-search .c1, + .mform .fdescription.required, + .userprofile dl.list dd, + .form-horizontal .controls { + margin-left: @horizontalComponentOffset1200; + } + .dir-rtl { + .form-item .form-setting, + .form-item .form-description, + .mform .fitem .felement, + .mform .fdescription.required, + .userprofile dl.list dd, + .form-horizontal .controls { + margin-right: (@horizontalComponentOffset1200 - 100px); + } + #page-mod-forum-search .c1 { + margin-right: @horizontalComponentOffset1200; + } + .form-item .form-label, + .mform .fitem div.fitemtitle, + .userprofile dl.list dt, + .form-horizontal .control-label { + width: (@horizontalComponentOffset1200 - 120px); + } + + } + .path-admin .buttons, + .form-buttons { + padding-left: @horizontalComponentOffset1200; + } + .dir-rtl { + .path-admin .buttons, + .form-buttons { + padding-right: @horizontalComponentOffset1200; + } + } + + // Core empty block regions. + .fluid-span (@columns) { + .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200); + } + .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use. + .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use. + #region-main.span8 { + /** increase the span size by 1 **/ + .fluid-span(9); + } + #block-region-side-pre.span4 { + /** decrease the span size by 1 **/ + .fluid-span(3); + } + } +} + +@media (min-width: 980px) { + .loginbox.twocolumns .loginpanel { + margin-left: 0; + } + .loginbox.twocolumns .loginpanel, + .loginbox.twocolumns .signuppanel { + width: 48.617948717948715%; + *width: 48.664757228587014%; + } +} + +@media (min-width: 768px) and (max-width: 979px) { + // Login page. + .loginbox.twocolumns .loginpanel { + margin-left: 0; + } + .loginbox.twocolumns .loginpanel, + .loginbox.twocolumns .signuppanel { + width: 48.61878453038674%; + *width: 48.56559304102504%; + } + // Core empty block regions. + .fluid-span (@columns) { + .fluid-span-full(@columns, @fluidGridColumnWidth768, @fluidGridGutterWidth768); + } + .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use. + .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use. + #region-main.span8 { + /** increase the span size by 1 **/ + .fluid-span(9); + } + #block-region-side-pre.span4 { + /** decrease the span size by 1 **/ + .fluid-span(3); + } + } +} + +@media (max-width: 767px) { + .loginbox.twocolumns .loginpanel, + .loginbox.twocolumns .signuppanel { + display: block; + float: none; + width: 100%; + margin-left: 0; + .box-sizing(border-box); + } + #page-mod-quiz-edit div.quizcontents, + .questionbankwindow.block { + width: 100%; + float: none; + } + #page-mod-quiz-edit #block-region-side-pre, + #page-mod-quiz-edit #block-region-side-post { + clear: both; + } + + } + +@media (max-width: 480px) { + // make tabs act like nav-stacked + // (mostly) copied from bootstrap/navs.less + .nav-tabs > li { + float: none; + } + .nav-tabs > li > a { + margin-right: 0; // no need for the gap between nav items + } + .nav-tabs { + border-bottom: 0; + } + .nav-tabs > li > a { + border: 1px solid #ddd; + .border-radius(0); + } + .nav-tabs > .active > a, + .nav-tabs > .active > a:hover { + border: 1px solid #ddd; + } + .nav-tabs > li:first-child > a { + .border-top-radius(4px); + } + .nav-tabs > li:last-child > a { + .border-bottom-radius(4px); + } + .nav-tabs > li > a:hover, + .nav-tabs > li > a:focus { + border-color: #ddd; + z-index: 2; + } + .fp-content-center { + display: block; + vertical-align: top; + } + .course-content ul.topics li.section, + .course-content ul.topics li.section .content, + .course-content ul.weeks li.section .content, + .course-content ul.weeks li.section, + .course-content ul.section { + margin-right: 0; + margin-left: 0; + padding: 0; + } + .activityinstance { + display: block; + } + .editing .course-content .section .activity { + margin-bottom: 0.2em; + padding-bottom: 0.2em; + border-bottom: thin solid #eee; + } + .course-content .section .activity .commands { + text-align: right; + } + /** Handles display of the activity chooser on small screens **/ + .jsenabled .choosercontainer #chooseform .alloptions { + max-width: 100%; + } + .jsenabled .choosercontainer #chooseform .instruction, + .jsenabled .choosercontainer #chooseform .typesummary { + position:static; + } + .que .info { + float: none; + width: auto; + } + .que .content { + margin: 0; + } + .path-mod-choice .horizontal .choices .option { + display: block; + } + .path-mod-forum .forumsearch #search { + width: 120px; + } + .path-mod-forum .forumheaderlist .picture { + display: none; + } +} + +// Stuart's 2,1,3 layout +@media (min-width : 768px) { + .row-fluid .desktop-first-column { + margin-left: 0; + } + #page-navbar .breadcrumb-button { + display: inline; + } +} +@media (max-width : 767px) { + .row-fluid .desktop-first-column { + clear: right; + } +} +// Forms +@media (max-width: 767px) { + // Remove the horizontal form styles + .form-item .form-label, + .mform .fitem div.fitemtitle { + // copied from .control-label { + float: none; + width: auto; + padding-top: 0; + text-align: left; + } + .form-item .form-label label{ + display: inline-block; + margin-right: .5em; + } + .form-item .form-setting .form-checkbox { + margin-top: 0; + } + .form-label span.form-shortname { + display: inline-block; + } + .form-item .form-setting, + .mform .fitem .felement, + .path-backup .mform .fitem .felement, + .mform .fdescription.required, + .form-item .form-description { + margin-left: 0; + } + table#form td.submit, + .form-buttons, + #fitem_id_submitbutton, + .fp-content-center form + div, + #fgroup_id_buttonar, + .form-horizontal .form-actions, + .fitem_fsubmit .felement.fsubmit { + padding-left: 10px; + padding-right: 10px; + } + #helppopupbox { + width: auto !important; + left: 0 !important; + } +} +// Shrink calender when short on space in block +@media (min-width : 768px) and (max-width: 979px) { + .block_calendar_month .content, + .block .minicalendar td { + padding-left: 0; + padding-right: 0; + } +} + +.dir-rtl { + .dropdown-menu { + right:0; + left:auto; + margin-right: 0px; + } + .navbar .nav > li > .dropdown-menu:before { + right:9px; + left:auto; + } + .navbar .nav > li > .dropdown-menu:after { + right: 10px; + left:auto; + } + .dropdown-submenu > a:after { + margin-right: 0; + margin-left: -10px; + float: left; + border-right-color: #ccc; + border-left-color: transparent; + border-width: 5px 5px 5px 0px; + } + .dropdown-submenu > .dropdown-menu { + right:100%; + left:auto; + } +} + +@media (max-width: 979px) { + .nav-collapse { + height: 0; + .nav > li > a { + color: @grayDark; + } + .nav > li > a:hover, + .nav > li > a:focus, + .dropdown-menu a:hover, + .dropdown-menu a:focus, + .dropdown-submenu a:focus, + .dropdown-submenu a:hover, + .dropdown-submenu a:active, + .dropdown-menu > li > a:hover, + .dropdown-menu > li > a:focus, + { + background-image: none; + color: @grayDark; + } + } + .nav-collapse.active { + height: auto; + } + .path-mod-data .box > table > tbody > tr > td { + display: block; + } + .path-mod-forum .forumheaderlist { + thead .header { + font-weight: normal; + font-size: round(@fontSizeSmall); + } + .discussion { + .author, .replies, .lastpost { + font-size: round(@fontSizeSmall); + } + .replies .unread a { + padding: 0; + } + } + } +} + +@media (max-width: 767px) { +// Resize, reflow file-picker on small devices + #filesskin .yui3-panel, + #filesskin .file-picker.fp-generallayout { + width: 100%; + left: 0; + } + .userprofile dl.list { + // copied from dl-horizontal in bootstrap/repsonsive.less + dt { + float: none; + clear: none; + width: auto; + text-align: left; + } + dd { + margin-left: 0; + } + } + // Reset the alignment for required label to display inline on mobile devices + #page-mod-wiki-create .mform .fitem div.fitemtitle { + float: left; + } + + // GRID & CONTAINERS + // ----------------- + // Remove width from containers + .container { + width: auto; + } + // Fluid rows + .row-fluid { + width: 100%; + } + .row-fluid .span8.pull-right, + .row-fluid .span9.pull-right { + float: none; + } + // Undo negative margin on rows and thumbnails + .row { + margin-left: 0; + } + // Make all grid-sized elements block level again + [class*="span"], + .row-fluid [class*="span"] { + float: none; + display: block; + width: 100%; + margin-left: 0; + .box-sizing(border-box); + } + + // We need to specify a more specific selector to reset the width for + // cases when we have content in the side-pre blockregion but not in the + // side-post blockregion as there are more specific selectors in + // core.less which take precedence which break responsiveness. + .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use. + .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use. + #block-region-side-pre.span4, + #region-main.span8 { + .fluid-span(12); + } + } + + .row-fluid .span12 { + width: 100%; + .box-sizing(border-box); + } + .row-fluid [class*="offset"]:first-child { + margin-left: 0; + } + div[role=main] { + margin-bottom: 1em; + } + .coursebox { + .info { + .name { + a { + background-position: 0 13px; + } + } + } + } + .category-browse { + .coursebox { + .info { + .name { + a { + background-position: 0 13px; + } + } + } + } + } +} + +// All widths between 1200px and 1600px +@media (min-width: 1200px) and (max-width: 1600px) { + .fluid-span (@columns) { + .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200); + } + // CSS for the course management pages. + #course-category-listings.columns-3 { + background-color:transparent; + border:0; + + #category-listing, + #course-listing { + .fluid-span(6); + margin-left: @fluidGridGutterWidth1200; + *margin-left: @fluidGridGutterWidth1200 - (.5 / @gridRowWidth * 100 * 1%); + &:first-child { + margin-left: 0; + } + } + #course-detail { + .fluid-span(12); + margin: 1em 0 0; + } + } +} + +// All widths up to 1199px. +@media (max-width: 1199px) { + // CSS for the course management pages. + #course-category-listings.columns-3 { + background-color:transparent; + border:0; + #category-listing, + #course-listing, + #course-detail { + .fluid-span(12); + margin: 0 0 1em 0; + } + } + + #page-mod-forum-discuss .discussioncontrols { + text-align: right; + .discussioncontrol { + float: none; + width: auto; + display: inline-block; + margin: 0 3px 0.5em; + select, + input { + margin-bottom: 0; + } + &.movediscussion { + margin-right: 0; + padding-right: 0; + } + } + } + + #page-mod-forum-discuss.dir-rtl .discussioncontrols { + text-align: left; + } +} diff --git a/less/moodle/tables.less b/less/moodle/tables.less new file mode 100644 index 00000000..3c67f8b5 --- /dev/null +++ b/less/moodle/tables.less @@ -0,0 +1,6 @@ +table.flexible, +.generaltable { + .table; +} +// fancier table styles moved to expendable.less +// to shift after 4096 selector break diff --git a/less/moodle/undo.less b/less/moodle/undo.less new file mode 100644 index 00000000..5aeebd93 --- /dev/null +++ b/less/moodle/undo.less @@ -0,0 +1,191 @@ +/* some very targetted corrections to roll back nameclashes between + * Moodle and Bootstrap like .row, .label, .content, .controls + * + * Mostly relies on these styles being more specific than the Bootstrap + * ones in order to overule them. + */ + +// .label vs .label + +li.activity.label, +.file-picker td.label { + background: inherit; + color: inherit; + border: inherit; + text-shadow: none; + padding: 8px; + white-space: normal; + display: block; + font-size: inherit; + line-height: inherit; +} +.file-picker td.label { + display: table-cell; + text-align: right; +} + +// Some of this dialog is sized in ems so a different font size +// effects the whole layout. +.choosercontainer #chooseform .option label { + font-size: 12px; +} + +/* block.invisible vs .invisible + * block.hidden vs .invisible + * + * uses .invisible where the rest of Moodle uses .dimmed + * fixible in block renderer? + * + * There's seems to be even more naming confusion here since, + * blocks can be actually 'visible' (or not) to students, + * marked 'visible' but really just dimmed to indicate to editors + * that students can't see them or 'visible' to the user who + * collapses them, 'visible' if you have the right role and in + * different circumstances different sections of a block can + * be 'visible' or not. + * + * currently worked around in renderers.php function block{} + * by rewriting the class name "invisible" to "dimmed", + * though the blocks don't look particularly different apart + * from their contents disappearing. Maybe try .muted? or + * dimming all the edit icons apart from unhide, might be a + * nice effect, though they'd still be active. Maybe reverse + * it to white? + */ + +li.section.hidden, +.block.hidden, +.block.invisible { + visibility: visible; + display: block; +} + + +/* .row vs .row + * + * very tricky to track down this when it goes wrong, + * since the styles are applied to generated content + * + * basically if you see things shifted left or right compared + * with where they should be check for a .row + */ + +#turnitintool_style .row, +.forumpost .row { + margin-left: 0 !important; + // not sure if this needs !important +} +#turnitintool_style .row:before, +#turnitintool_style .row:after, +.forumpost .row:before, +.forumpost .row:after { + content: none; +} +/* fieldset.hidden vs .hidden + * + * Moodle uses fieldset.hidden for mforms, to signify a collection of + * form elements that don't have a box drawn round them. Bootstrap + * uses hidden for stuff that is hidden in various responsive modes. + * + * Relatedly, there is also fieldset.invisiblefieldset which hides the + * border and sets the display to inline. + * + * Originally this just set block and visible, but it is used + * in random question dialogue in Quiz, + * that dialogue is hidden and shown, so when hidden the + * above workaround leaves you with a button floating around + */ + +fieldset.hidden { + display: inherit; + visibility: inherit; +} + + +/* .controls vs .controls + * + * in expanding course list, can be fixed in renderer though + */ + + +/* .btn vs .btn + * + * links, inputs and buttons are commonly styled with .btn in + * bootstrap but it seems that some buttons in Moodle are + * wrapped in div.btn e.g. the login block's "login" button + */ + +div.c1.btn { + display: block; + padding: 0; + margin-bottom: 0; + font-size: inherit; + line-height: inherit; + text-align: inherit; + vertical-align: inherit; + cursor: default; + color: inherit; + text-shadow: inherit; + background-color: inherit; + background-image: none; + background-repeat: none; + border: none; + border-radius: none; + box-shadow: none; +} +/* .container vs .container + * + * bootstrap uses .container to set the width of the layout at 960px or so, Moodle uses it + * in the Quiz to contain the questions to add. If you don't overule the Bootstrap code, + * it becomes near unuseable. + */ + +#questionbank + .container { + width: auto; +} +// In Moodle .hide is the eye icon +// In Bootstrap it hides things +img.hide { + display: inherit; +} + +// Bootstrap adds a background sprite to anything with classname starting "icon-". +// we only want to load it if we use them in content. +.icon-bar, +img.icon-post, +img.icon-info, +img.icon-warn, +img.icon-pre { + background-image: none; +} + +// Weird big margins on login page +.loginbox.twocolumns, +.loginbox.twocolumns { + .signuppanel, + .loginpanel { + padding: 0px; + margin: 0px; + } +} + +//Bootstrap needs tooltips to be specified. Moodle does not use this +.tooltip { + .opacity(100); + display: inline; +} + +// Allow the custom menu to expand/collapse when the user hovers over it with JS disabled. +body:not(.jsenabled) .dropdown:hover > .dropdown-menu { + display: block; + margin-top: -6px; // We need to move it up to counter the arrows as they introduce hover bugs. +} + +// Extends bootstrapbase/less/bootstrap/navbar.less +// to enable scroll in the language menu. +body:not(.jsenabled) .langmenu:hover > .dropdown-menu, +.langmenu.open > .dropdown-menu { + display: block; + max-height: 150px; + overflow-y: auto; +} \ No newline at end of file diff --git a/less/moodle/user.less b/less/moodle/user.less new file mode 100644 index 00000000..9823cbb3 --- /dev/null +++ b/less/moodle/user.less @@ -0,0 +1,213 @@ +/* user.less */ +.userprofile .fullprofilelink { + text-align: center; + margin: 10px; +} +.userprofile .description { + margin-bottom: 20px; +} +.userprofile dl.list { + .dl-horizontal; +} +.user-box { + margin: 8px; + width: 115px; + height: 160px; + text-align: center; + float: left; + clear: none; +} +.dir-rtl { + .userprofile .description { + margin-right:0; + } + .user-box { + float:right; + } + .userprofile dl.list dt { + float:right; + text-align: left; + padding-left: 10px; + } + .userprofile dl.list dd { + margin-left:0; + } +} +.userlist .action-icon img { + vertical-align: middle; +} +.userlist #showall { + margin: 10px 0; +} +.userlist .buttons { + text-align: center; +} +.userlist .buttons label { + padding: 0 3px; +} +.userlist table#participants { + text-align: center; +} +.userlist table#participants td, +.userlist table#participants th { + vertical-align: middle; + text-align: left; + padding: 4px; +} +.userlist { + table.controls { + width: 100%; + tr { + vertical-align: top; + } + .right { + text-align: right; + } + .groupselector { + margin-bottom: 0; + margin-top: 0; + label { + display: block; + } + } + } +} +.userinfobox { + width: 100%; + border: 1px solid; + border-collapse: separate; + padding: 10px; +} +.userinfobox .left, +.userinfobox .side { + width: 100px; + vertical-align: top; +} +.userinfobox .userpicture { + width: 100px; + height: 100px; +} +.userinfobox .content { + vertical-align: top; +} +.userinfobox .links { + width: 100px; + padding: 5px; + vertical-align: bottom; +} +.userinfobox .links a { + display: block; +} +.userinfobox .list td { + padding: 3px; +} +.userinfobox .username { + padding-bottom: 20px; + font-weight: bold; +} +.userinfobox td.label { + text-align: right; + white-space: nowrap; + vertical-align: top; + font-weight: bold; +} +.groupinfobox { + .well +} +.groupinfobox .left { + padding: 10px; + width: 100px; + vertical-align: top; +} +.course-participation #showall { + text-align: center; + margin: 10px 0; +} +#user-policy .noticebox { + text-align: center; + margin-left: auto; + margin-right: auto; + margin-bottom: 10px; + width: 80%; + height: 250px; +} +#user-policy #policyframe { + width: 100%; + height: 100%; +} +.iplookup #map { + margin: auto; +} +.userselector select { + width: 100%; +} +.userselector div { + margin-top: 0.2em; +} +.userselector div label { + margin-right: 0.3em; +} +/* Next style does not work in all browsers but looks nicer when it does */ +.userselector .userselector-infobelow { + font-size: 0.8em; +} +#userselector_options { + padding: 0.3em 0; +} +#userselector_options .collapsibleregioncaption { + font-weight: bold; +} +#userselector_options p { + margin: 0.2em 0; + text-align: left; +} +.dir-rtl #userselector_options p { + text-align: right; +} +/** user full profile */ +#page-user-profile .messagebox { + text-align: center; + margin-left: auto; + margin-right: auto; +} +/** user course profile */ +#page-course-view-weeks .messagebox { + text-align: center; + margin-left: auto; + margin-right: auto; +} +/** Overide for RTL layout **/ +.dir-rtl .userprofilebox .descriptionbox { + margin: 0; +} +.dir-rtl .userlist table#participants td, +.dir-rtl .userlist table#participants th { + text-align: right; +} +.dir-rtl .userlist table#participants { + margin: 0 auto; +} +#page-my-index.dir-rtl .block h3 { + text-align: right; +} + +.profileeditor { + > .singleselect { + margin: 0 0.5em 0 0; + } + > .singlebutton { + display: inline-block; + margin: 0 0 0 0.5em; + div, input { + margin: 0; + } + } +} +.dir-rtl .profileeditor { + > .singleselect { + margin: 0 0 0 0.5em; + } + > .singlebutton { + margin: 0 0.5em 0 0; + } +} diff --git a/less/moodle/yui_fixes.less b/less/moodle/yui_fixes.less new file mode 100644 index 00000000..e8c61086 --- /dev/null +++ b/less/moodle/yui_fixes.less @@ -0,0 +1,10 @@ +// we might be able to just turn these off for 2.5 see bug MDL-???? +input[type=text],input[type=password],textarea { + width:auto; +} +th, +td { + border: 0 solid #fff; +} + + diff --git a/lib.php b/lib.php index 8e585d22..ef94cdce 100644 --- a/lib.php +++ b/lib.php @@ -33,7 +33,7 @@ */ function theme_essential_set_fontwww($css) { - global $CFG, $PAGE; + global $CFG; if(empty($CFG->themewww)){ $themewww = $CFG->wwwroot."/theme"; } else { @@ -41,19 +41,31 @@ function theme_essential_set_fontwww($css) { } $tag = '[[setting:fontwww]]'; - $theme = theme_config::load('essential'); - if (!empty($theme->settings->bootstrapcdn)) { + + if (theme_essential_get_setting('bootstrapcdn')) { $css = str_replace($tag, '//netdna.bootstrapcdn.com/font-awesome/4.1.0/fonts/', $css); } else { $css = str_replace($tag, $themewww.'/essential/fonts/', $css); } return $css; } + +function theme_essential_get_setting($setting) { + static $theme = ''; + if (empty($theme)) { + $theme = theme_config::load('essential'); + } + if (empty($theme->settings->$setting)) { + return false; + } else { + return $theme->settings->$setting; + } +} + function theme_essential_set_logo($css, $logo) { - global $OUTPUT; $tag = '[[setting:logo]]'; $replacement = $logo; - if (is_null($replacement)) { + if (!($replacement)) { $replacement = ''; } $css = str_replace($tag, $replacement, $css); @@ -73,30 +85,26 @@ function theme_essential_set_logo($css, $logo) { * @return bool */ function theme_essential_pluginfile($course, $cm, $context, $filearea, $args, $forcedownload, array $options = array()) { + static $theme = ''; + if (empty($theme)) { + $theme = theme_config::load('essential'); + } if ($context->contextlevel == CONTEXT_SYSTEM) { if ($filearea === 'logo') { - $theme = theme_config::load('essential'); return $theme->setting_file_serve('logo', $args, $forcedownload, $options); } else if ($filearea === 'pagebackground') { - $theme = theme_config::load('essential'); return $theme->setting_file_serve('pagebackground', $args, $forcedownload, $options); } else if (preg_match("/slide[1-9][0-9]*image/", $filearea) !== false) { - $theme = theme_config::load('essential'); return $theme->setting_file_serve($filearea, $args, $forcedownload, $options); } else if ((substr($filearea, 0, 9) === 'marketing') && (substr($filearea, 10, 5) === 'image')) { - $theme = theme_config::load('essential'); return $theme->setting_file_serve($filearea, $args, $forcedownload, $options); } else if ($filearea === 'iphoneicon') { - $theme = theme_config::load('essential'); return $theme->setting_file_serve('iphoneicon', $args, $forcedownload, $options); } else if ($filearea === 'iphoneretinaicon') { - $theme = theme_config::load('essential'); return $theme->setting_file_serve('iphoneretinaicon', $args, $forcedownload, $options); } else if ($filearea === 'ipadicon') { - $theme = theme_config::load('essential'); return $theme->setting_file_serve('ipadicon', $args, $forcedownload, $options); } else if ($filearea === 'ipadretinaicon') { - $theme = theme_config::load('essential'); return $theme->setting_file_serve('ipadretinaicon', $args, $forcedownload, $options); } else { send_file_not_found(); @@ -113,10 +121,10 @@ function theme_essential_pluginfile($course, $cm, $context, $filearea, $args, $f * @param mixed $pagewidth * @return string */ -function essential_set_pagewidth($css, $pagewidth) { +function theme_essential_set_pagewidth($css, $pagewidth) { $tag = '[[setting:pagewidth]]'; $replacement = $pagewidth; - if (is_null($replacement)) { + if (!($replacement)) { $replacement = '1200'; } if ( $replacement == "100" ) { @@ -135,22 +143,72 @@ function essential_set_pagewidth($css, $pagewidth) { * * @return string */ -function essential_performance_output($param, $perfinfo) { +function theme_essential_performance_output($param, $perfinfo) { - $html = '