Scheduled tasks

by toubia95

HTML

<ul>
  <li class="service down">04:05 - Accès indisponible</li>
  <li class="service up">10:46 - Rétablissement de l'accès</li>
  <li class="service pending">11:47 - Accès indisponible</li>
  <li class="service down">12:47 - Rétablissement de l'accès</li>
</ul>
dfghdfgh
<ul>
  <li class="service down">04:05 - Accès indisponible</li>
  <li class="service up">06:05 - Rétablissement de l'accès</li>
</ul>

CSS

.service {
    position: relative;
    padding: 5px 12px 5px 56px;
    font-weight: 100;
    font-size: .75em;
    list-style-type: none;
}
.service:before {
    content: '';
    position: absolute;
    left: 21px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 3px solid #575d74
}
.service:after {
    content: '';
    position: absolute;
    top: 20px;
    left: 28px;
    width: 2px;
    height: calc(100% - 14px);
    background: #575d74
}

.service.up:last-child:after {
    display: none
}
.down:before {
    background-color: #ff2952;
    border-color: #ff2952
}
.down:after {
    background: #ff2952
}

.up:before {
    background-color: #559043;
    border-color: #83bd71
}
.up:after {
    background-color: #83bd71
}
.pending:before {
    background-color: #559043;
    border-color: #83bd71;
    border-style: dashed;
}
.pending:after {
    background-color: #83bd71
}
.service.down:last-child:before {
    animation-name: pulse;
    animation-duration: 10s;
    animation-iteration-count: infinite
}

@keyframes pulse {
    from {box-shadow: 0 0 0 0 #121f33, 0 0 0 0 #ffc334}
    50% {box-shadow: 0 0 0 6px rgba(18, 31, 51, 0), 0 0 0 8px rgba(255, 195, 52, 0)}
}