initial commit

css/timeline.css

@@ -0,0 +1,146 @@
+.timeline {
+  height: 50px;
+  position: relative;
+}
+.timeline .time-tips {
+  width: 130px;
+  font-size: 12px;
+  position: absolute;
+  background-color: rgba(128,128,128,0.5);
+  color: #fff;
+  height: 16px;
+  top: -30px;
+  padding: 2px 0;
+  text-align: center;
+  border-radius: 2px;
+  left: -45px;
+  transition-property: all;
+  transition-duration: 0.1s;
+  transition-timing-function: linear;
+}
+.timeline .time-tips .time-tips-time {
+  font-family: VeraSansMono;
+  font-size: 12px;
+}
+.timeline .time-tips-arrow {
+  position: absolute;
+  bottom: -6px;
+  left: 50%;
+  margin-left: -6px;
+  width: 0;
+  height: 0;
+  border-right: 6px solid transparent;
+  border-left: 6px solid transparent;
+  border-top: 6px solid rgba(128,128,128,0.5);
+}
+.timeline .timeline-button {
+  position: absolute;
+  right: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #84cdc9;
+}
+.timeline .timeline-button .timeline-play {
+  width: 0;
+  height: 0;
+  margin: 7px 7px 7px 8px;
+  display: inline-block;
+  border-style: solid;
+  border-width: 5px 0 5px 10px;
+  border-color: transparent transparent transparent #299387;
+}
+.timeline .timeline-button .timeline-pause {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin: 7px;
+  border-style: double;
+  border-width: 0 0 0 10px;
+  border-color: #299387;
+}
+.timeline .timeline-content {
+  position: absolute;
+  left: 0;
+  right: 30px;
+  height: 100%;
+}
+.timeline .timeline-line {
+  height: 25px;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  left: 10px;
+  right: 10px;
+  top: 0;
+  z-index: 10;
+}
+.timeline .timeline-line:after {
+  content: '';
+  background-color: rgba(128,128,128,0.5);
+  position: absolute;
+  top: 0;
+  height: 5px;
+  width: 100%;
+}
+.timeline .timeline-line-limit,
+.timeline .timeline-line-passed {
+  position: absolute;
+  top: 0;
+  width: 0;
+  height: 5px;
+  background-color: #41f8ff;
+  pointer-events: none;
+  transition-property: all;
+  transition-duration: 0.1s;
+  transition-timing-function: linear;
+  z-index: 12;
+}
+.timeline .timeline-line-limit {
+  background-color: #7da8cc;
+  z-index: 11;
+}
+.timeline .timeline-label {
+  color: #fff;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 25px;
+  justify-content: space-between;
+}
+.timeline .timeline-label span {
+  font-family: "VeraSansMono";
+  text-align: center;
+  font-size: 12px;
+  display: block;
+  flex: 0 0 20px;
+  position: relative;
+  cursor: default;
+}
+.timeline .timeline-label span:after {
+  z-index: 9;
+  content: '';
+  position: absolute;
+  height: 10px;
+  top: -20px;
+  background-color: rgba(255,255,255,0.5);
+  width: 1px;
+  left: 50%;
+  margin-left: -1px;
+  transition-duration: 0.1s;
+  transition-property: all;
+  transition-timing-function: linear;
+}
+.timeline .timeline-label span:first-child:after {
+  height: 15px;
+  margin-left: 0;
+}
+.timeline .timeline-label span:last-child:after {
+  height: 15px;
+}
+.timeline .timeline-label span.time-passed:after {
+  background-color: #41f8ff;
+}