MDL-69395 theme_boost: improve colour contrast for form input fields
[moodle.git] / theme / boost / scss / moodle / admin.scss
1 /* admin.less */
2 .formtable tbody th {
3     font-weight: normal;
4     text-align: right;
5 }
7 .path-admin #assignrole {
8     width: 60%;
9     margin-left: auto;
10     margin-right: auto;
11 }
13 .path-admin .admintable .leftalign {
14     text-align: left;
15 }
17 .environmenttable {
18     .warn {
19         background-color: $state-warning-bg;
20         color: $warning;
21     }
23     .error {
24         background-color: $state-danger-bg;
25         color: $danger;
26     }
28     .ok {
29         background-color: $state-success-bg;
30         color: $success;
31     }
32 }
34 .path-admin .admintable.environmenttable .name,
35 .path-admin .admintable.environmenttable .info,
36 .path-admin #assignrole .admintable .role,
37 .path-admin #assignrole .admintable .userrole,
38 .path-admin #assignrole .admintable .roleholder {
39     white-space: nowrap;
40 }
42 .path-admin .incompatibleblockstable td.c0 {
43     font-weight: bold;
44 }
46 #page-admin-course-category .addcategory {
47     padding: 10px;
48 }
50 #page-admin-course-index .editcourse {
51     margin: 20px auto;
52 }
54 #page-admin-course-index .editcourse th,
55 #page-admin-course-index .editcourse td {
56     padding-left: 10px;
57     padding-right: 10px;
58 }
60 .timewarninghidden {
61     display: none;
62 }
64 #page-admin-report-capability-index #capabilitysearch {
65     width: 30em;
66 }
68 #page-admin-qtypes #qtypes div,
69 #page-admin-qtypes #qtypes form,
70 #page-admin-qbehaviours #qbehaviours div,
71 #page-admin-qbehaviours #qbehaviours form {
72     display: inline;
73 }
75 #page-admin-qtypes #qtypes img.spacer,
76 #page-admin-qbehaviours #qbehaviours img.spacer {
77     width: 16px;
78 }
80 #page-admin-qbehaviours .cell.c3,
81 #page-admin-qtypes .cell.c3 {
82     font-size: $font-size-sm;
83 }
85 #page-admin-lang .generalbox,
86 #page-admin-course-index .singlebutton,
87 #page-admin-course-index .addcategory,
88 #page-course-index .buttons,
89 #page-course-index-category .buttons,
90 #page-admin-course-category .addcategory,
91 #page-admin-stickyblocks .generalbox,
92 #page-admin-maintenance .buttons,
93 #page-admin-course-index .buttons,
94 #page-admin-course-category .buttons,
95 #page-admin-index .copyright,
96 #page-admin-index .copyrightnotice,
97 #page-admin-index .adminerror .singlebutton,
98 #page-admin-index .adminwarning .singlebutton,
99 #page-admin-index #layout-table .singlebutton {
100     text-align: center;
101     margin-bottom: 1em;
104 .path-admin-roles .capabilitysearchui {
105     text-align: left;
106     margin-left: auto;
107     margin-right: auto;
108     margin-top: $spacer;
111 #page-admin-roles-define .topfields {
112     margin: 1em 0 2em;
115 #page-admin-roles-define .capdefault {
116     background-color: $table-hover-bg;
119 #page-filter-manage .backlink,
120 .path-admin-roles .backlink {
121     margin-top: 1em;
124 #page-admin-roles-explain #chooseuser h3,
125 #page-admin-roles-usersroles .contextname {
126     margin-top: 0;
129 #page-admin-roles-explain #chooseusersubmit {
130     margin-top: 0;
131     text-align: center;
134 #page-admin-roles-usersroles p {
135     margin: 0;
138 #page-admin-roles-override .cell.c1,
139 #page-admin-roles-assign .cell.c3,
140 #page-admin-roles-assign .cell.c1 {
141     padding-top: 0.75em;
144 #page-admin-roles-override .overridenotice,
145 #page-admin-roles-define .definenotice {
146     margin: 1em 10% 2em 10%;
147     text-align: left;
150 #page-admin-index .adminwarning.availableupdatesinfo .moodleupdateinfo span {
151     display: block;
154 #page-admin-index .updateplugin div {
155     margin-bottom: 0.5em;
158 #page-admin-user-user_bulk #users .fgroup {
159     white-space: nowrap;
162 #page-admin-report-stats-index .graph {
163     text-align: center;
164     margin-bottom: 1em;
167 #page-admin-report-courseoverview-index .graph {
168     text-align: center;
169     margin-bottom: 1em;
172 #page-admin-lang .translator {
173     border-width: 1px;
174     border-style: solid;
177 // This is the CSS for the role assignment control.
178 .path-admin .roleassigntable {
179     width: 100%;
182 .path-admin .roleassigntable td {
183     vertical-align: top;
184     padding: 0.2em 0.3em;
187 .path-admin .roleassigntable p {
188     text-align: left;
189     margin: 0.2em 0;
192 .path-admin .roleassigntable #existingcell,
193 .path-admin .roleassigntable #potentialcell {
194     width: 42%;
197 // Targetting the label at the top.
198 .path-admin .roleassigntable #existingcell p > label:first-child,
199 .path-admin .roleassigntable #potentialcell p > label:first-child {
200     font-weight: bold;
203 .path-admin .roleassigntable #buttonscell {
204     width: 16%;
207 .path-admin .roleassigntable #buttonscell #assignoptions {
208     font-size: $font-size-sm;
211 .path-admin .roleassigntable #removeselect_wrapper,
212 .path-admin .roleassigntable #addselect_wrapper {
213     width: 100%;
216 .path-admin table.rolecap tr.rolecap th {
217     text-align: left;
218     font-weight: normal;
221 .path-admin .rolecap .hiddenrow {
222     display: none;
225 .path-admin #defineroletable {
226     .rolecap {
227         .inherit,
228         .allow,
229         .prevent,
230         .prohibit {
231             text-align: center;
232             padding: 0;
233             min-width: 3.5em;
234         }
235     }
238 .path-admin .rolecap .cap-name,
239 .path-admin .rolecap .note {
240     display: block;
241     font-size: $font-size-sm;
242     white-space: nowrap;
243     font-weight: normal;
246 .path-admin .rolecap label {
247     display: block;
248     text-align: center;
249     padding: 0.5em;
250     margin: 0;
253 .plugincheckwrapper {
254     width: 100%;
257 .environmentbox {
258     margin-top: 1em;
261 #mnetconfig table {
262     margin-left: auto;
263     margin-right: auto;
266 .environmenttable .cell {
267     padding: .15em .5em;
270 #trustedhosts .generaltable {
271     margin-left: auto;
272     margin-right: auto;
273     width: 500px;
276 #trustedhosts .standard {
277     width: auto;
280 // This usage of legend is a bit weird,
281 // seems to be using them as error text
282 // that's only sometimes visible. Should
283 // look into sorting it.
284 #adminsettings legend {
285     display: none;
288 #adminsettings fieldset.error {
289     margin: .2em 0 .5em 0;
292 #adminsettings fieldset.error legend {
293     display: block;
296 #admin-spelllanguagelist textarea,
297 #page-admin-setting-editorsettingstinymce .form-textarea textarea {
298     /* rtl:ignore */
299     text-align: left;
300     /* rtl:ignore */
301     direction: ltr;
304 /* Styles for flags on admin settings */
305 .adminsettingsflags {
306     float: right;
309 .adminsettingsflags label {
310     margin-right: 7px;
313 .form-description pre,
314 .formsettingheading pre {
315     /*rtl:ignore*/
316     direction: ltr;
319 .form-item .form-setting .form-htmlarea {
320     display: inline;
323 .form-item .form-setting .form-htmlarea .htmlarea {
324     width: 640px;
325     display: block;
328 .form-item .form-setting .form-multicheckbox ul {
329     list-style: none;
330     padding: 0;
331     margin: 7px 0 0 0;
334 .form-item .form-setting .defaultsnext {
335     display: inline;
338 .form-item .form-setting .locked-checkbox {
339     margin-right: 0.2em;
340     margin-left: 0.5em;
341     display: inline;
344 .form-item .form-setting .form-password .unmask,
345 .form-item .form-setting .form-defaultinfo {
346     display: inline-block;
349 .form-item .form-setting .form-defaultinfo {
350     max-width: 100%;
351     word-wrap: break-word;
354 #admin-emoticons td input {
355     width: 8em;
358 #admin-emoticons td.c0 input {
359     width: 4em;
362 #adminthemeselector .selectedtheme td.c0 {
363     border: 1px solid $state-info-border;
364     border-right-width: 0;
367 #adminthemeselector .selectedtheme td.c1 {
368     border: 1px solid $state-info-border;
369     border-left-width: 0;
372 .admin_colourpicker,
373 .admin_colourpicker_preview {
374     display: none;
377 .jsenabled .admin_colourpicker_preview {
378     display: inline;
381 @include media-breakpoint-up(md) {
382     .jsenabled .admin_colourpicker {
383         display: block;
384         height: 102px;
385         width: 410px;
386         margin-bottom: 10px;
387         box-sizing: content-box;
388     }
389     .admin_colourpicker .colourdialogue {
390         float: left;
391         border: 1px solid $input-border-color;
392     }
393     .admin_colourpicker .previewcolour {
394         border: 1px solid $input-border-color;
395         margin-left: 301px;
396     }
398     .admin_colourpicker .currentcolour {
399         border: 1px solid $input-border-color;
400         margin-left: 301px;
401         border-top-width: 0;
402     }
405 @include media-breakpoint-down(sm) {
406     .jsenabled .admin_colourpicker {
407         height: 150px;
408         margin-bottom: 10px;
409         display: block;
410         position: relative;
411     }
412     .admin_colourpicker .previewcolour {
413         display: none;
414     }
415     .admin_colourpicker .currentcolour {
416         position: absolute;
417         border: 1px solid $border-color;
418         top: 100px;
419         left: 0;
420     }
423 .admin_colourpicker .loadingicon {
424     vertical-align: middle;
425     margin-left: auto;
428 #page-admin-index #notice .checkforupdates {
429     text-align: center;
432 // Plugins overview page at admin/plugins.php
433 #page-admin-plugins {
434     #plugins-overview-panel {
435         .info {
436             display: inline-block;
437             margin-right: 1em;
438         }
439     }
441     .checkforupdates {
442         margin: 10px 0;
444         .singlebutton {
445             margin: 5px 0;
446             padding: 0;
448             div,
449             input {
450                 margin: 0 3px 0 0;
451             }
452         }
453     }
455     .updateavailableinstallall {
456         margin: 5px 0;
457         padding: 0;
459         div,
460         input {
461             margin: 0 3px 5px 0;
462         }
463     }
465     #plugins-control-panel {
466         .status-missing td {
467             background-color: $state-warning-bg;
468         }
470         .pluginname {
471             .componentname {
472                 font-size: $font-size-sm;
473                 color: $text-muted;
474                 margin-left: 22px;
475             }
476         }
478         .version {
479             .versionnumber {
480                 font-size: $font-size-sm;
481                 color: $text-muted;
482             }
483         }
485         .uninstall {
486             a {
487                 color: $danger;
488             }
489         }
491         .notes {
492             .label {
493                 margin-right: 3px;
494             }
496             .requiredby {
497                 font-size: $font-size-sm;
498                 color: $text-muted;
499             }
500         }
501     }
505 // Plugins check page displayed during upgrade.
506 #plugins-check-page {
508     // Plugins check table.
509     #plugins-check {
510         .status-missing,
511         .status-downgrade {
512             td {
513                 background-color: $state-danger-bg;
514             }
515         }
516     }
519 // Available plugin update notification.
521 #plugins-check-page,
522 #plugins-control-panel {
523     .pluginupdateinfo {
524         background-color: $state-info-bg;
526         &.maturity50 {
527             background-color: $state-danger-bg;
528         }
530         &.maturity100,
531         &.maturity150 {
532             background-color: $state-warning-bg;
533         }
534         padding: 5px;
535         margin: 10px 0;
537         @include border-radius(5px);
539         .info {
540             display: inline-block;
541         }
543         .separator:after {
544             content: " | ";
545         }
547         .singlebutton {
548             margin: 5px 0;
549             padding: 0;
551             div,
552             input {
553                 margin: 0 3px 0 0;
554             }
555         }
556     }
559 .plugins-management-confirm-buttons {
560     > div {
561         display: inline-block;
562         margin: 1em 1em 1em 0;
563     }
565     .continue {
566         padding: 0;
568         div,
569         input {
570             margin: 0;
571         }
572     }
575 #page-admin-index .upgradepluginsinfo {
576     text-align: center;
579 #page-admin-index .adminwarning.availableupdatesinfo .moodleupdateinfo .separator:after {
580     content: " | ";
583 /** MNet networking */
584 #page-admin-mnet-peers .box.deletedhosts {
585     margin-bottom: 1em;
586     font-size: $font-size-sm;
589 #core-cache-plugin-summaries table,
590 #core-cache-store-summaries table {
591     width: 100%;
594 #core-cache-lock-summary table,
595 #core-cache-definition-summaries table,
596 #core-cache-mode-mappings table {
597     margin: 0 auto;
600 #core-cache-store-summaries .default-store td {
601     font-style: italic;
604 #core-cache-rescan-definitions,
605 #core-cache-mode-mappings .edit-link,
606 #core-cache-lock-summary .new-instance {
607     margin-top: 0.5em;
608     text-align: center;
611 .maintenancewarning {
612     position: fixed;
613     bottom: 0;
614     right: 0;
615     overflow: hidden;
616     z-index: $zindex-dropdown;
619 .modal.modal-in-page {
620     z-index: 0;
623 #page-admin-search {
624     .adminpagetitle {
625         margin-bottom: 0;
626         border-bottom: none;
627     }
628     .adminpagepath {
629         display: flex;
630         flex-wrap: wrap;
631         list-style: none;
632         padding: 0;
633         margin: 0 0 1.5rem 0;
634         li {
635             + li:before {
636                 padding-right: 0.5rem;
637                 padding-left: 0.5rem;
638                 content: "#{$breadcrumb-divider}";
639             }
640         }
641     }
642     @media (min-width: 576px) {
643         .container {
644             overflow-wrap: break-word;
645         }
646     }
649 #page-admin-tasklogs {
650     .task-class {
651         font-size: $font-size-sm;
652         color: $gray-600;
653     }