monitoring-jekyll-theme 0.2.0 → 0.3.0

data/assets/css/styles.css

@@ -25,20 +25,25 @@ body {
   font-family: PublicSans, sans-serif;
   color: #232323;
   background: #ac7a36;
-  background: rgba(172,41,32,0.05);
+  background: rgba(172, 41, 32, 0.05);
 }
 
 header {
+  margin-bottom: -1.5em !important;
   color: #fefefe;
+  border-bottom: 17px solid rgb(37, 2, 0);
   background: #333;
+  background: linear-gradient(to right, rgb(68, 31, 29), rgb(37, 2, 0));
 }
 
-header a{
-  color: currentColor;
+.wrapper {
+  margin: auto;
+  padding: 0 5vw 0.5em;
 }
 
-.wrapper {
+.wrapper:not(header) {
   padding: 1.5em;
+  max-width: 75em;
 }
 
 body, .article {
@@ -46,19 +51,27 @@ body, .article {
   line-height: 1.8125rem;
   font-size: 1rem;
 }
+
+/*------------------
+  TYPOGRAPHY
+------------------*/
+
 h1, .h1 {
   margin-top: 1.8125rem;
   margin-bottom: 3.625rem;
   line-height: 5.4375rem;
   font-size: 5.1875rem;
 }
+
 h2, .h2 {
   margin-top: 1.8125rem;
   margin-bottom: 1.8125rem;
   line-height: 3.625rem;
   font-family: Optiker, sans-serif;
   font-size: 3rem;
+  ;
 }
+
 h2:not(:first-of-type):before {
   content: '';
   display: block;
@@ -68,23 +81,29 @@ h2:not(:first-of-type):before {
   background: #555;
 }
 
-h2 + p,
+h2 + p, h3 + p {
+  margin-top: -2.5rem;
+  margin-bottom: 1em;
+  line-height: 1.2;
+  font-size: 0.85em;
+}
+
 h3 + p {
   margin-top: -1.8125rem;
 }
 
-h2 small,
-h3 small {
+h2 small, h3 small {
   font-family: PublicSans, sans-serif;
 }
 
-h3, .h3 {
+header h1, h3, .h3 {
   margin-top: 1.8125rem;
   margin-bottom: 1.8125rem;
   line-height: 1.8125rem;
   font-family: Optiker, sans-serif;
   font-size: 1.75rem;
 }
+
 h4, .h4 {
   margin-top: 1.8125rem;
   margin-bottom: 0;
@@ -92,6 +111,16 @@ h4, .h4 {
   font-size: 1rem;
 }
 
+header h1, header p {
+  display: flex;
+  align-content: center;
+  margin: 0;
+}
+
+header a {
+  color: currentColor;
+}
+
 p, ul, ol, pre, table, blockquote {
   margin-top: 0;
   margin-bottom: 1.5rem;
@@ -101,27 +130,221 @@ small {
   font-size: 55%;
 }
 
+a {
+  color: currentColor;
+}
+
+.center {
+  margin: auto;
+  text-align: center;
+}
 
-{{/* #004c6d */}}
-{{/* #346888 */}}
-{{/* #5886a5 */}}
-{{/* #7aa6c2 */}}
-{{/* #9dc6e0 */}}
-{{/* #c1e7ff */}}
+.list-actions h3 {
+  margin-top: 1.5em;
+  margin-bottom: -1em;
+}
 
-a {
-  color: #333;
+.list-actions ol, .list-actions ul {
+  margin: 2rem 0;
+  padding: 0;
+}
+
+.list-actions-grid ol, .list-actions-grid ul {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(100px, 1fr));
+  grid-gap: 0 1em;
+}
+
+.list-actions ol li, .list-actions ul li {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+  margin-top: -1px;
+  margin-bottom: 0;
+  padding: 1em;
+  list-style: none;
+  counter-increment: index;
+  border: 1px solid rgba(0, 0, 0, 0.5);
+  background: #fefefe;
+}
+
+.list-actions ol li {
+  display: flex;
+  align-items: center;
+  padding-left: 3.5em;
+  line-height: 1.3;
+  word-break: break-all;
+}
+
+.list-actions ol li > *, .list-actions ul li > * {
+  display: flex;
+  align-items: center;
+  flex: 0 1 auto;
+  margin: -1rem -1rem -1rem 0rem;
+  padding: 1em 2em 1em 1em;
+}
+
+.list-actions ol li > *:first-child, .list-actions ul li > *:first-child {
+  position: relative;
+  overflow: scroll;
+  flex-grow: 999;
+  white-space: nowrap;
+}
+
+.list-actions ol li > *:last-child, .list-actions ul li > *:last-child {
+  padding-right: 1em;
+}
+
+.list-actions-title ol li, .list-actions-title ul li {
+  margin-top: 6em;
+}
+
+.list-actions ol li h4, .list-actions ul li h4 {
+  position: absolute;
+  top: -1.5em;
+  left: 0;
+  padding: 0.2em 0.8em;
+  width: 100%;
+  font-size: 1.2em;
+  color: #fefefe;
+  background: #333;
+}
+
+.list-actions ol li b, .list-actions ul li b {
+  justify-content: center;
+  min-width: 6rem;
+  max-width: 15rem;
+  text-align: right;
+  color: #fefefe;
+  background: #333;
+}
+
+.list-actions ul .pointseco {
+  min-width: 3rem !important;
+  max-width: 4rem !important;
+}
+
+.list-actions-table ul {
+  position: relative;
+  margin-top: 1.8rem;
+}
+
+.list-actions-table ul::after {
+  position: absolute;
+  content: 'Points';
+  top: calc(-1.7rem - 1px);
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: calc(5rem - 1px) !important;
+  max-width: 4rem !important;
+  height: 1.7em;
+  text-align: center;
+  color: #fefefe;
+  border: 1px solid #555;
+  border-bottom: none;
+  background: #22961e;
+}
+
+.list-actions-title ul li::before {
+  position: absolute;
+  content: attr(data-title);
+  top: -3.9rem;
+  left: -1px;
+  padding: 0.6em;
+  width: calc(100% - 1.2em);
+  font-size: 1.25em;
+  color: #fefefe;
+  border: 1px solid rgba(0, 0, 0, 0.5);
+  background: #333;
+}
+
+.list-actions ol li::before {
+  position: absolute;
+  content: counters(index, '.', decimal);
+  top: 50%;
+  left: 0.5em;
+  align-self: flex-start;
+  padding-right: 12px;
+  min-width: 1.5em;
+  font-size: 1.5em;
+  font-weight: bold;
+  transform: translateY(-50%);
+  text-align: center;
+  color: currentColor;
+
+  font-variant-numeric: tabular-nums;
+}
+
+.grid:not(:nth-last-child(-n+3)) ul li {
+  padding: 0.3em 0 0.3em 1em;
+  max-width: 95%;
+  list-style: none;
+  border-left: 3px solid #333;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.progressive-web-app {
+  order: 1;
+}
+
+.performance {
+  order: 2;
+}
+
+.best-practices {
+  order: 3;
+}
+
+.accessibility {
+  order: 4;
+}
+
+.list-actions ul li.progressive-web-app ~ .progressive-web-app,
+.list-actions ul li.performance ~ .performance,
+.list-actions ul li.best-practices ~ .best-practices,
+.list-actions ul li.accessibility ~ .accessibility,
+.list-actions ul li.seo ~ .seo,
+.list-actions ul li.pwa ~ .pwa {
+  margin-top: -1px;
+}
+
+.list-actions ul li.progressive-web-app ~ .progressive-web-app::before,
+.list-actions ul li.performance ~ .performance::before,
+.list-actions ul li.best-practices ~ .best-practices::before,
+.list-actions ul li.accessibility ~ .accessibility::before,
+.list-actions ul li.seo ~ .seo::before,
+.list-actions ul li.pwa ~ .pwa::before {
+  display: none;
 }
 
 .table {
   display: flex;
+  overflow-x: auto;
   flex-direction: column-reverse;
 }
 
+/*------------------
+  BLOCKS
+------------------*/
+
+.block_action {
+  margin: 1.5em -1.5rem;
+  padding: 0.5em 1.5em;
+  color: #fefefe;
+  background: #333;
+}
+
+/*------------------
+  GRID
+------------------*/
+
 .grid {
   display: flex;
   flex-wrap: wrap;
-  margin: 0 -6px 0;
+  margin: 0;
 }
 
 .grid:not(:nth-last-child(-n+3)) {
@@ -132,6 +355,44 @@ a {
   flex: 1 1 auto;
 }
 
+.grid-score {
+  margin: 2em 0 1em;
+  display: grid;
+  box-sizing: border-box;
+  grid-template-columns: repeat(50,1fr);
+  grid-auto-flow: row dense;
+}
+
+.grid-score b {
+  display: flex;
+  text-align: center;
+  padding: 1em;
+  border: 1px solid;
+  justify-content: center;
+}
+
+.grid-score span {
+  position: absolute;
+  z-index: 10;
+  bottom: 100%;
+  left: 50%;
+  visibility: hidden;
+  padding: 0.1em 0.3em;
+  font-size: 0.85em;
+  transform: translateX(-50%);
+  border-radius: 2px;
+  background: #fff;
+  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);
+}
+
+.grid-score div:hover span {
+  visibility: visible;
+}
+
+/*------------------
+  FLEX
+------------------*/
+
 .flex {
   display: flex;
   flex-wrap: wrap;
@@ -149,19 +410,85 @@ a {
     display: grid;
     grid-template-columns: repeat(10, minmax(100px, 150px));
   }
+
   .flex > * {
     max-width: calc(50% - 2rem);
   }
 }
 
+/* flex-list color */
+.flex-list-color {
+  clear: both;
+  overflow: hidden;
+  margin: 0 0 1.5em;
+  padding: 2.5rem 0 1rem;
+}
+
+.flex-list-color br {
+  clear: both;
+  width: 100%;
+}
+
+.flex-list-color > * {
+  position: relative;
+  float: left;
+  height: 2rem;
+}
+
+.flex-list-color span {
+  position: absolute;
+  z-index: 10;
+  bottom: 100%;
+  left: 50%;
+  visibility: hidden;
+  padding: 0.1em 0.3em;
+  transform: translateX(-50%);
+  border-radius: 2px;
+  background: #fff;
+  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);
+}
+
+.flex-list-color div:hover span {
+  visibility: visible;
+}
+
+/* flex-list */
+.flex-list {
+  padding: 0;
+}
+
+.flex-list > li, .flex-list > div {
+  display: flex;
+  clear: both;
+  margin: 0 0 0.3em;
+  /* justify-content: space-between; */
+  width: 100%;
+}
+
+.flex-list > li a .flex-list > div a {
+  display: block;
+  overflow: hidden;
+  max-width: 50%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.flex-list > li > *, .flex-list > div > * {
+  flex: 1;
+}
+
+.flex-list > li > *:first-child, .flex-list > div > *:first-child {
+  padding: 0 1.5em 0 0;
+}
+
 /*------------------
   BOX
 ------------------*/
 
 .box {
   position: relative;
-  overflow: hidden;
   display: flex;
+  overflow: hidden;
   align-items: center;
   flex-direction: column;
   justify-content: start;
@@ -169,15 +496,16 @@ a {
   padding: 0.5rem 0.5rem 1rem;
   min-width: 3rem;
   line-height: 1;
-  font-weight: bold;
   min-height: 3rem;
+  font-weight: bold;
   text-align: center;
   color: #fff;
   border-radius: 4px;
   background: #fff;
+  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
   text-shadow: 1px 1px #000;
-  box-shadow: 0 0 1px 1px rgba(0,0,0,0.1);
 }
+
 .box i {
   flex: 0 1 1.1rem;
   font-size: 1.2rem;
@@ -190,49 +518,53 @@ a {
   padding-bottom: 0.5rem;
   line-height: 1;
   min-height: 1rem;
-  word-break: break-all;
   text-transform: capitalize;
+  word-break: break-all;
+
   font-variant-numeric: tabular-nums;
 }
 
+/*------------------
+  META
+------------------*/
+
 .score-difference {
   position: absolute;
-  width: 100%;
-  height: calc(100% - 8px);
+  z-index: 0;
   top: 0;
   bottom: 0;
-  z-index: 0;
-
+  width: 100%;
+  height: calc(100% - 8px);
 }
 
 .score-up {
-  background: rgba(255, 75, 75,0.15);
-  box-shadow: inset 0 0 4px rgba(255, 75, 75,0.45);
+  background: rgba(255, 75, 75, 0.15);
+  box-shadow: inset 0 0 4px rgba(255, 75, 75, 0.45);
 }
 
 .score-down {
-  background: rgba(125,255,100,0.15);
-  box-shadow: inset 0 0 4px rgba(125,255,100,0.75);
+  background: rgba(125, 255, 100, 0.15);
+  box-shadow: inset 0 0 4px rgba(125, 255, 100, 0.75);
 }
 
 .score {
   color: #004c6d;
   background: #fff;
-  text-shadow: none;
   /*letter-spacing: -4px;*/
-  box-shadow: inset 0 0 2px rgba(0,0,0,0.1),0 0 1px 1px rgba(0,0,0,0.1);
+  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1), 0 0 1px 1px rgba(0, 0, 0, 0.1);
+  text-shadow: none;
 }
 
 .date {
   color: #fff;
   background: #d3465c;
+  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.2);
   text-shadow: none;
-  box-shadow: inset 0 0 5px 0px rgba(0,0,0,0.2);
 }
 
 .title {
-  letter-spacing: -1px;
   font-weight: bold;
+  letter-spacing: -1px;
 }
 
 .number {
@@ -244,9 +576,9 @@ a {
 
 .date p {
   display: flex;
-  margin: 0 auto;
-  flex: 1;
   align-items: center;
+  flex: 1;
+  margin: 0 auto;
 }
 
 .ct-chart {
@@ -263,52 +595,58 @@ a {
   max-width: 100%;
 }
 
-.flex-list {
-  padding: 0;
+/*------------------
+  META COLOR
+------------------*/
+
+.pointseco {
+  color: #fefefe;
+  background: #22961e !important;
 }
 
-.flex-list > li,
-.flex-list > div {
-  display: flex;
-  clear: both;
-  margin: 0 0 0.3em;
-  /* justify-content: space-between; */
-  width: 100%;
+.top path {
+  stroke: #22961e;
 }
 
-.flex-list > li a
-.flex-list > div a {
-  text-overflow: ellipsis;
-  max-width: 50%;
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
+.verygood path {
+  stroke: #30d42a;
 }
 
-.flex-list > li > *,
-.flex-list > div > * {
-  flex: 1;
+.good path {
+  stroke: #346888;
 }
 
-.flex-list > li > *:first-child,
-.flex-list > div > *:first-child {
-  padding: 0 1.5em 0 0;
+.bad path {
+  stroke: #d68100;
 }
 
+.verybad path {
+  stroke: #b00202;
+}
+
+/*------------------
+  SEO
+------------------*/
+
 .screamingfrog li span {
   float: right;
-  padding: 0em 0.4em;
+  align-self: start;
   flex: 0 1 auto;
+  padding: 0 0.4em;
   color: #fff;
   background: #333;
+
   font-variant-numeric: tabular-nums;
 }
 
-
 .seocli ul li:first-child {
   display: none;
 }
 
+/*------------------
+  AXE
+------------------*/
+
 .axe {
   margin: 0;
   padding-left: 1em;
@@ -332,11 +670,13 @@ a {
 }
 
 .axe ul {
-  list-style: none;
   padding: 0;
+  list-style: none;
 }
 
-/* --------------- styles for tabs -----------------------*/
+/*------------------
+  TABS
+------------------*/
 
 .invisible {
   position: absolute;
@@ -353,6 +693,7 @@ a {
   margin: 0;
   padding: 0;
 }
+
 .tabs-tabs__item {
   display: inline-block;
 }
@@ -361,25 +702,24 @@ a {
   display: inline-block;
   margin-top: 0.5em;
   padding: 0.4em 0.5em 0.3em;
-  text-transform: uppercase;
   cursor: pointer;
   text-transform: uppercase;
   color: #fefefe;
-  background: rgba(0,0,0,0.65);
   border-radius: 3px 3px 0 0;
+  background: rgba(0, 0, 0, 0.65);
 }
 
 [aria-selected='true'].tabs-tabs__link {
   padding-top: 0.6em;
   color: #fff;
-  background: rgba(0,0,0,0.8);
+  background: rgba(0, 0, 0, 0.8);
 }
 
 .tabs-tabs__content {
   padding: 1em;
-  background: rgba(0,0,0,0.08);
-  border: 1px solid rgba(0,0,0,0.1);
-  box-shadow: inset 0 0 4px rgba(0,0,0,0.1),;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  background: rgba(0, 0, 0, 0.08);
+  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1), ;
 }
 
 .js-tabcontent h3 {
@@ -390,8 +730,11 @@ a {
   display: none;
 }
 
-.js-to_expand[aria-hidden=true],
-.js-to_expand[data-hidden=true] {
+/*------------------
+  ACCORDEON
+------------------*/
+
+.js-to_expand[aria-hidden=true], .js-to_expand[data-hidden=true] {
   display: none;
 }
 
@@ -400,50 +743,280 @@ a {
 }
 
 .js-expandmore-button {
-  background: none;
   font: inherit;
+  cursor: pointer;
   color: inherit;
   border: none;
-  cursor: pointer;
+  background: none;
 }
 
 /* optional */
 .animated-expandmore__symbol:before {
-  content : '+';
+  content: '+';
   margin-right: 0.5em;
   padding: 0 0.2em;
-  color: #fefefe;
-  background: #333;
   line-height: 0;
   font-family: monospace;
+  color: #fefefe;
+  background: #333;
 }
 
 .is-opened .animated-expandmore__symbol:before {
-  content : '-';
+  content: '-';
 }
 
-.js-expandmore-button[aria-expanded=true] > .expandmore__symbol:before,
-.js-expandmore-button[data-expanded=true] > .expandmore__symbol:before {
-  content : '− ';
+.js-expandmore-button[aria-expanded=true] > .expandmore__symbol:before, .js-expandmore-button[data-expanded=true] > .expandmore__symbol:before {
+  content: '− ';
 }
 
 /* This is the opened state */
 .animated-expandmore__to_expand {
   display: block;
-  overflow: hidden;
-  opacity: 1;
-  transition: visibility 0s ease, max-height 2s ease, opacity 2s ease ;
-  max-height: 80em;
   /* magic number for max-height = enough height */
   visibility: visible;
+  overflow: hidden;
+  max-height: 280em;
+  transition: visibility 0s ease, max-height 1.2s ease, opacity 1s ease;
   transition-delay: 0s;
- }
+  opacity: 1;
+}
 
- /* This is the hidden state */
- [data-hidden=true].animated-expandmore__to_expand {
+/* This is the hidden state */
+[data-hidden=true].animated-expandmore__to_expand {
   display: block;
+  visibility: hidden;
   max-height: 0;
+  transition-delay: 1.5s, 0s, 0s;
   opacity: 0;
-  visibility: hidden;
-  transition-delay: 2s, 0s, 0s;
- }
+}
+
+.progress {
+  display: grid;
+  grid-template-columns: 20% 1fr;
+  align-items: stretch;
+  margin: 0;
+  padding: 1rem 1.5rem;
+  background: #fff;
+}
+
+.progress ~ .progress {
+  padding-top: 0;
+}
+
+.progress > * {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 1em 0;
+  max-width: 100%;
+  min-height: 7em;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.15);
+}
+
+.progress > div:first-child {
+  display: flex;
+  align-items: center;
+  flex: 0 1 20%;
+  justify-content: center;
+  text-align: center;
+  color: #fff;
+  background: #333;
+  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.35);
+}
+
+.progress h4 {
+  margin: 0;
+  font-family: Optiker, sans-serif;
+  font-size: 1.5rem;
+  word-break: break-all;
+}
+
+/*-------------------------
+  CIRCULAR PROGRESS BAR
+-------------------------*/
+
+.progress-circular {
+  font-size: 0.60em;
+}
+
+.progress-circular ul {
+  display: flex;
+  grid-template-columns: repeat(6, minmax(9em, 11rem));
+  grid-gap: 0.2em 1.5em;
+  justify-content: start;
+  margin: 0 auto 1.5em;
+  padding: 1.5em 1.5em 3em;
+}
+
+.progress-circular ul > li {
+  position: relative;
+  display: inline-block;
+  font-weight: 100;
+  text-align: center;
+}
+
+.progress-circular ul > li:before {
+  position: absolute;
+  content: attr(data-name);
+  bottom: -2em;
+  width: 100%;
+  line-height: 1;
+  font-family: Optiker, sans-serif;
+  font-size: 1.5em;
+  font-weight: bold;
+}
+
+.progress-circular ul > li:after {
+  position: absolute;
+  z-index: 2;
+  content: attr(data-percent);
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-family: Optiker, sans-serif;
+  font-size: 2.3em;
+  text-align: center;
+}
+
+.progress-circular svg {
+  width: 100%;
+  height: 7em;
+}
+
+.progress-circular svg:nth-child(2) {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: rotate(-90deg);
+}
+
+.progress-circular svg:nth-child(2) path {
+  animation: load 1s;
+
+  fill: none;
+  stroke-width: 20;
+  stroke-dasharray: 629;
+  stroke: rgba(255, 255, 255, 0.9);
+}
+
+@keyframes load {
+  0% {
+    stroke-dashoffset: 0;
+  }
+}
+
+/*-------------------------
+  PROGRESS BAR
+-------------------------*/
+
+.progress-bar-element {
+  position: relative;
+  margin: 2rem auto;
+  width: 75%;
+  height: 1em;
+  border: 1px solid #333;
+  border-radius: 5px;
+  background: rgb(34, 150, 30);
+  background: linear-gradient(90deg, rgba(34, 150, 30, 1) 0%, rgba(48, 212, 42, 1) 20%, rgba(214, 129, 0, 1) 70%, rgba(176, 2, 2, 1) 100%);
+}
+
+.progress-bar-score, .progress-bar-tooltip {
+  position: absolute;
+  padding: 0 1em;
+  min-width: 1em;
+  line-height: 2;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+.progress-bar-score:first-child, .progress-bar-score:last-child {
+  top: -110%;
+  right: calc(100% + 2em);
+  height: 2em;
+  text-align: left;
+}
+
+.progress-bar-score:last-child {
+  left: calc(100% + 2em);
+}
+
+.progress-bar-tooltip {
+  bottom: 100%;
+  font-size: 0.65em;
+  color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.45);
+  border-radius: 4px;
+  background: #555;
+}
+
+.progress-bar-score:not(:first-child):not(:last-child), .progress-bar-tooltip {
+  animation: slide 1s;
+}
+
+.progress-bar-score {
+  top: 100%;
+  min-width: 26px;
+  transform: translate(-50%, 35%);
+
+  font-variant-numeric: tabular-nums;
+}
+
+.progress-bar-score:not(:first-child):not(:last-child)::before {
+  position: absolute;
+  content: '';
+  bottom: calc(100% - 3px);
+  left: 50%;
+  width: 0;
+  height: 5px;
+  transform: translateX(-50%);
+  border-left: 2px solid currentColor;
+}
+
+.progress-bar-score:not(:first-child):not(:last-child)::after {
+  position: absolute;
+  content: '';
+  bottom: 100%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  transform: translateX(-50%);
+  border-right: 5px solid transparent;
+  border-bottom: 6px solid currentColor;
+  border-left: 5px solid transparent;
+}
+
+.progress-bar-tooltip::before {
+  position: absolute;
+  z-index: 10;
+  content: '';
+  top: calc(100% + 5px);
+  left: 50%;
+  width: 0;
+  height: 28px;
+  transform: translateX(-50%);
+  border-left: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.progress-bar-tooltip::after {
+  position: absolute;
+  content: '';
+  top: 100%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  transform: translateX(-50%);
+  border-top: 6px solid rgba(0, 0, 0, 0.85);
+  border-right: 5px solid transparent;
+  border-left: 5px solid transparent;
+}
+
+@keyframes slide {
+  0% {
+    left: 100%;
+  }
+}