style.css

/*
 *
 *
 * CSS code of "PING ms"
 * The full project is at https://github.com/pingms/pingms
 *
 * @pingms founded the project.
 * @codehz greatly improved it.
 * @pingms improved its compatibility.
 * @pingms fixed the bug of horizontal scrollbar(if browser width is not enough)
 * @pingms added "Test Download".
 * @pingms added 3-column mode.
 * @codehz contributed the color effect.
 * @pingms improved the compatibility of color effect.
 *
 * (@pingms - https://github.com/pingms)
 * (@codehz - https://github.com/codehz)
 *
 *
 *
 */

* {
  box-sizing: border-box;
  /* Include padding and border in the element's total width and height */
}

body {
  background: #4CAF50;
  color: #ffffff;
  font-size: 14px;
  font-family: Tahoma, Helvetica, Arial, sans-serif;
  margin: 8px;
  --item-height: 18px;
  --section-header-height: 30px;
  /* Double leading dash is used for defining custom properties */
  padding: 10px 0px 10px 0px;
  margin: 0px;
}

p {
  display: flex;
  /* This defines a flex container */
  /* It enables a flex context for all its direct children */
}

a:link, a:visited, a:hover, a:active {
  color: LightBlue;
}

.content {
  /* width: 600px; */
  /* "width: 600px;" is disabled */
  /* because it can cause horizontal scrollbar  */
  /* if browser width is not enough */
  width: 95%;
  /* If it's in the mode of "two columns" */
  /* ".content" width will be changed by "@media (min-width: 800px)"*/
  max-width: calc(100vw - 16px);
  /* calc() function performs a calculation to be used as the property value */
  /* vw: 1/100th viewport width */
  margin: 0 auto;
  /* The first parameter 0 indicates that the top and bottom margins will both be set to 0 */
  /* The left and right margins will be set to the same size */
}

section {
  overflow: hidden;
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
  /* Avoids any break (page, column, or region) from being inserted within the principal box */
  top: 0;
  position: relative;
  --max-delay: 1;
  transition: all ease 1s;
  /* CSS transitions allows you to change property values smoothly */
  /* (from one value to another), over a given duration */
  /* all - specified for the transition-property */
  /* ease - specifies a transition effect with a slow start, then fast, then end slowly */
  height: calc(var(--nums) * (var(--item-height) + 2px) + var(--section-header-height));
}

h3 {
  font-size: 20px;
  font-weight: 900;
  height: var(--section-header-height);
  margin: 0;
  padding: 0;
}

section>div {
  /* > */
  /* The selector "div > p.some_class" only selects paragraphs of */
  /* ".some_class" that are nested directly inside a div */
  /* and not any paragraphs that are nested further within. */
  width: 100%;
  position: absolute;
  height: calc(var(--item-height));
  margin: 1px 0;
  transition: all ease .5s;
  display: flex;
  --delay: 0;
  transform: translateY(calc(var(--index) * (var(--item-height) + 2px)));
  /* The translateY() CSS function repositions an element vertically on the 2D plane */
  z-index: calc(var(--nums) - var(--index) + 1);
  padding-left: 3px;
}

section>div>div.bar {
  /* Pseudo elements(":after") are replaced by ordinary elements. */
  content: "";
  position: absolute;
  left: 55px;
  right: 0;
  top: 0;
  bottom: 0;
  /* --base-color: rgb(calc(var(--delay) / var(--max-delay) * 200), calc(255 - var(--delay) / var(--max-delay) * 128), 0); */
  /* "--base-color" is disabled for compatibility */
  /* --percent: calc(var(--delay) / var(--max-delay) * 100%); */
  /* "--percent" is replaced by "--percent-number" */
  /* background: linear-gradient(to right, var(--base-color) var(--percent), transparent var(--percent)); */
  /* "background: linear-gradient" is disabled for compatibility */
  /* background: DarkOliveGreen; */
  /* "background: DarkOliveGreen" is disabled */
  --barColorR: 0;
  --barColorG: 255;
  --barColorB: 0;
  background: rgb(calc(var(--barColorR)),calc(var(--barColorG)),calc(var(--barColorB)));
  --percent-number: calc(var(--delay) * 100 / var(--max-delay));
  width: calc((100% - 85px) * var(--percent-number) / 100);
  z-index: -1;
  transition: all ease 1s;
  height: calc(var(--item-height));
  display: inline-block;
}

.result {
  display: inline-block;
  width: 55px;
  font-family: 'Lucida Console', Monaco, monospace;
  font-size: 12px;
  text-align: right;
  padding-right: .5em;
}

.name {
  /* flex: 1; */
  /* Let all the flexible items be the same length, regardless of its content */
  /* "flex: 1" is disabled */
  display: inline-block;
  height: calc(var(--item-height));
  vertical-align: middle;
  line-height: calc(var(--item-height));
}

.tip {
  position: absolute;
  z-index: 100;
  width: 120px;
  left: 0px;
  opacity: 0.2;
  visibility: hidden;
  background-color: SeaGreen;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  display: inline-block;
  height: calc(var(--item-height));
  font-weight: normal !important;
  font-style: normal !important;
}

.name:hover .tip {
  animation: tipAnimation 5s ease forwards;
}

.name:hover {
  font-weight: bold;
  font-style: italic;
}

@keyframes tipAnimation {
  10% {
    visibility: visible;
    left: calc(100% - 120px);
    opacity:1;
  }
  60% {
    visibility: visible;
    left: calc(100% - 120px);
    opacity: 1;
  }
  100% {
    visibility: hidden;
    left: calc(100% - 120px);
    opacity: 0;
  }
}

.usage {
  font-style: italic;
}

img {
  position: absolute;
  opacity: 0;
}

.header {
  display: flex;
  flex-direction: column;
  padding: 0px 0px 10px 0px;
}

.title{
  font-size: 26px;
  font-weight: bold;
  padding: 0px 0px 0px 0px;
}

.introduction {
  font-size: 13px;
  padding: 0px 0px 0px 10px;
}

.message {
  position: fixed;
  top: 0px;
  left: 50%;
  width: 200px;
  margin-top: 0px;
  margin-left: -100px;
  background-color: DarkGreen;
  color: white;
  z-index: 10000;
  padding: 10px;
  padding-top: 20px;
  border-radius: 0px 0px 25px 25px;
}

@media (min-width: 650px) and (max-width: 949px) {
  #result {
    column-count: 2;
    /* The column-count property specifies */
    /* the number of columns an element should be divided into */
    column-gap: 20px;
    /* The column-gap property specifies the gap between the columns. */
    column-rule-style: solid;
    /* Specify the style of the rule between columns */
    column-rule-width: 1px;
    /* The column-rule-width property specifies */
    /* the width of the rule between columns. */
    column-rule-color: white;
    /* Specify the color of the rule between columns */
  }
  .content {
    width: 600px;
  }
  /* In the mode of "two columns", set ".content" width */
  .header {
    display: flex;
    flex-direction: row;
  }
  .title {
    padding: 6px 0px 0px 0px;
  }
}

@media (min-width: 950px) {
  #result {
    column-count: 3;
    /* The column-count property specifies */
    /* the number of columns an element should be divided into */
    column-gap: 20px;
    /* The column-gap property specifies the gap between the columns. */
    column-rule-style: solid;
    /* Specify the style of the rule between columns */
    column-rule-width: 1px;
    /* The column-rule-width property specifies */
    /* the width of the rule between columns. */
    column-rule-color: white;
    /* Specify the color of the rule between columns */
  }
  .content {
    width: 900px;
  }
  /* In the mode of "two columns", set ".content" width */
  .header {
    display: flex;
    flex-direction: row;
  }
  .title {
    padding: 0px 0px 0px 0px;
  }
}

/*
 *
 *
 * END OF FILE
 * The full project is at https://github.com/pingms/pingms
 *
 *
 */