Reduce white space in Moodle 4.0

.moodle4.md

Moodle 4.0 custom CSS

The following CSS can be used make the layout of Moodle 4.0 more compact.

Use it with a browser extension that permits the application of user-defined CSS, for example Stylus (on Firefox or Chrome).

moodle4.css

r.activity-item:not(.activityinline) {
  border: 1px solid #999999;
    max-width: 500px;
}


.activity-item:not(.activityinline) {
  padding: 0.5rem;
}

.activityiconcontainer {
  width: 30px;
  height: 30px;
}

.activityiconcontainer .activityicon, .activityiconcontainer .icon {
  margin: 0;
  height: 17px;
  width: 17px;
}

.moremenu .nav-link {
  height: 35px;
}

.moremenu .show > .nav-link, .moremenu .active > .nav-link, .moremenu .nav-link.show, .moremenu .nav-link.active {
  background: #f0f5ff;
}

.courseindex .courseindex-item {
  padding: 0.2rem 0.2rem;
}

.dashboard-card-deck .dashboard-card .dashboard-card-footer {
  padding: .2rem;
  padding-left: .8rem;
}

.block .block-cards .course-info-container {
  padding-bottom: .5rem;
}

.moremenu {
  height: 35px;
}

.course-content ul.topics li.section, .course-content ul.weeks li.section {
  padding-bottom: .2rem;
}

body.limitedwidth #page.drawers .main-inner {
  max-width: 90%;
}


.flex-fill, .reportbuilder-report-container {
  width: 100%;
}

.activity-item .no-overflow {
  word-wrap: break-word;
}

.format-tiles #page.container-fluid, .path-course-view li.activity > div {
  padding: 0.5rem !important;
}

#page.drawers .main-inner {
  margin-top: 0rem;
}

.description .course-description-item {
  font-size: 100%;
}

.course-content ul.topics li.section, .course-content ul.weeks li.section {
  padding-top: 3rem;
}

p {
  margin-bottom: .5rem;
}

li.activity .d-flex {
  display: block !important;
}

div[data-region="completion-info"] {
  padding-top: .8rem;
  padding-bottom: .2rem;
}