For a more complete picture, this is the CSS our development site is currently using (4.2.2+) for the activity cards. I personally think the icons are a little close to the card border, and would tweak some more. It's important to note we're still using 3.11 on our live site, so I may have missed some styling of elements in places purely because they're not fully tested. We did experiment with moving the Completion and Open/Due information and I have posted that somewhere on the theme forum I think. Ultimately, we've opted to switch when 4.3 arrives at the end of the year so most of this wont be necessary, with the exception of the icon styling.
.activity-item:not(.activityinline) { padding: 0.5rem; }
.activity-item .automatic-completion-conditions { flex-direction: row; }
.description .course-description-item:first-child { margin-top: 0.25rem; padding-top: 0.25rem; }
.description .course-description-item:last-child { padding-bottom: 0.25rem; }
.activityiconcontainer { border-radius: 45px; width: 30px; height: 30px; }
.activityiconcontainer.collaboration { background-color: rgba(247, 99, 77, 0.1); }
.activityiconcontainer.content { background-color: rgba(57, 155, 226, 0.1); }
.activityiconcontainer.assessment { background-color: rgba(235, 102, 162, 0.1); }
.activityiconcontainer.communication { background-color: rgba(17, 166, 118, 0.1); }
.activityiconcontainer.collaboration .activityicon, .activityiconcontainer.collaboration .icon { width:20px; filter: invert(49%) sepia(27%) saturate(1451%) hue-rotate(320deg) brightness(100%) contrast(95%) !important; }
.activityiconcontainer.content .activityicon, .activityiconcontainer.content .icon { width:20px; filter: invert(71%) sepia(41%) saturate(5942%) hue-rotate(179deg) brightness(92%) contrast(91%) !important; }
.activityiconcontainer.assessment .activityicon, .activityiconcontainer.assessment .icon { width:20px; filter: invert(55%) sepia(91%) saturate(1396%) hue-rotate(297deg) brightness(97%) contrast(91%) !important; }
.activityiconcontainer.communication .activityicon, .activityiconcontainer.communication .icon { width:20px; filter: invert(41%) sepia(46%) saturate(3247%) hue-rotate(136deg) brightness(97%) contrast(87%) !important; }
The quiz being a different colour from Assignment is because I was experimenting with changing specific activities. The CSS for that is below, although it will need some work as the the icons are styled with both the .activityicon and .icon classes in different places (I should log this in the tracker):
.modtype_quiz .activityiconcontainer { background-color: rgba(255, 255, 0, 0.1); }
.modtype_quiz .activityiconcontainer .activityicon { filter: invert(56%) sepia(99%) saturate(1298%) hue-rotate(360deg) brightness(102%) contrast(105%) !important; }