.activity-list { } .activity-item { display:block; position: relative; margin-bottom:20px; border:1px solid @border-light; padding:20px; text-decoration:none; } .activity-item h2 { color: @darker; font-size:18px; margin-bottom: 10px; } .activity-item p { .text-overflow(); margin: 0px; margin-bottom: 2px; max-width: 100%; color: #999; } .activity-sha, .activity-branch, .activity-date { color: #999; } .activity-branch:before, .activity-date:before { content: '\2022'; opacity: 0.5; margin-left: 5px; margin-right: 5px; } .activity-item img { border-radius:@circle; width:32px; height:32px; margin-left:15px; } .activity-item .fa { float: right; width: 48px; height: 48px; font-size: 36px; line-height: 74px; vertical-align: middle; &:before{ display: inline-block; } } .activity-item-Success .fa { color: @green; } .activity-item-Error, .activity-item-Failure, .activity-item-Killed { border:1px solid @red-border; background: @red-background; color: @red; p, span { color: @red-text-light; } h2 span { color: @red-text; } } .activity-item { &:after { font-family: 'FontAwesome'; font-size:22px; min-width:32px; display:inline-block; text-align:center; margin-left: 30px; margin-top: 20px; font-size: 32px; } &[data-status="Success"]:after { color: @green; content: "\f00c"; } &[data-status="Error"], &[data-status="Failure"], &[data-status="Killed"] { border:1px solid @red-border; background: @red-background; color: @red; p, span { color: @red-text-light; } h2 { color: @red-text; } &:after { color: @red; content: "\f00d"; } } }