myzuck.js/dist/skins/snapssenger.css

A javascript library that lets you add stories EVERYWHERE.

.stories.snapssenger.list .story > .item-link {
  text-decoration: none;
  color: #333;
}
.stories.snapssenger.list .story > .item-link > .item-preview {
  border-radius: 50%;
  padding: 2px;
  background: #0084ff;
}
.stories.snapssenger.list .story > .item-link > .item-preview img {
  border-radius: 50%;
  border: 3px solid #fff;
}

.stories.snapssenger.list .story.seen {
  opacity: 0.75;
}
.stories.snapssenger.list .story.seen > a > span {
  background: #999;
  color: #999;
}
.stories.snapssenger.list .story.seen > a {
  color: #999 !important;
}

.stories.snapssenger.carousel .story {
  max-height: 100px;
  max-width: 100px;
  width: 25vw;
}
.stories.snapssenger.carousel .story > .item-link {
  text-decoration: none;
  text-align: left;
  color: #fff;
  position: relative;
  max-height: 100px;
}
.stories.snapssenger.carousel .story > .item-link > .item-preview {
  height: 18vh;
}
.stories.snapssenger.carousel .story > .item-link > .item-preview img {
  border-radius: 5px;
  position: absolute;
}
.stories.snapssenger.carousel .story > .item-link > .info {
  top: auto;
  height: auto;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px;
  font-weight: 700;
  font-size: 12px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35), 1px 0 1px rgba(0, 0, 0, 0.35);
}
.stories.snapssenger.carousel .story > .item-link > .info .name {
  font-weight: 500;
}
.stories.snapssenger.carousel .story > .item-link > .info .time {
  display: block;
  font-weight: 100;
  font-size: 11px;
}

.stories.snapssenger .story.seen {
  opacity: 0.5;
}