Extra CSS

Addon CSS pour progressbar

docs/stylesheets/extra.css

Markdown

[=55% "55%"]
[=20% "20%"]{: .candystripe}
[=55% "55%"]{: .candystripe}
[=85% "85%"]{: .candystripe}
[=100% "100%"]{: .candystripe .candystripe-animate}
[=25%]{: .thin .candystripe}
[=45%]{: .thin}

55%

20%

55%

85%

100%

docs/stylesheets/extra.css

  .progress-label {
    position: absolute;
    text-align: center;
    font-weight: 700;
    width: 100%;
    margin: 0;
    line-height: 1.2rem;
    white-space: nowrap;
    overflow: hidden;
  }

  .progress-bar {
    height: 1.2rem;
    float: left;
    background-color: #2979ff;
  }

  .progress.candystripe-animate .progress-bar {
      animation: animate-stripes 5s linear infinite;
  }

  .progress {
    display: block;
    width: 100%;
    margin: 0.5rem 0;
    height: 1.2rem;
    background-color: #eeeeee;
    position: relative;
  }

  @keyframes animate-stripes {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 4rem 0;
    }
  }

  .progress.candystripe .progress-bar {
      background-size: 1.2rem 1.2rem;
      background-image:
        linear-gradient(
          135deg,
          hsl(229, 29%, 85%) 27%,
          transparent 27%,
          transparent 52%,
          hsl(229, 29%, 85%) 52%,
          hsl(229, 29%, 85%) 77%,
          transparent 77%,
          transparent
        );
    }

  .progress.thin {
    margin-top: 0.9rem;
    height: 0.4rem;
  }

  .progress.thin .progress-label {
    margin-top: -0.4rem;
  }

  .progress.thin .progress-bar {
    height: 0.4rem;
  }

  .progress-100plus .progress-bar {
    background-color: #00e676;
  }

  .progress-80plus .progress-bar {
    background-color: #fbc02d;
  }

  .progress-60plus .progress-bar {
    background-color: #ff9100;
  }

  .progress-40plus .progress-bar {
    background-color: #ff5252;
  }

  .progress-20plus .progress-bar {
    background-color: #ff1744;
  }

  .progress-0plus .progress-bar {
    background-color: #f50057;
  }

  /* .md-nav__item {
    border-bottom-width: 1px;
    border-bottom-style: solid;
  } */

  .md-nav__link--active {
    border: solid;
    border-width: 1px;
    margin-left: 1px;
    padding: 1px 1px 1px 3px;
    border-radius: 5px;
    background-color: #d9def8;
  }

  /*
  .md-typeset table:not([class]) {
    line-height: 1;
  } */

  .md-button {
    line-height: 0.5;
  }

  :root .twemoji {
    --md-icon-size: 1em;
  }

  .md-typeset table:not([class]) td,th {
    border: .05rem solid var(--md-typeset-table-color);
  }

  .md-typeset table:not([class]) tr:nth-child(odd) {
    background:#cfdff7;
  }

  .md-typeset table:not([class]) tr:nth-child(even) {
    background:#9dc7f7;
  }

  .md-typeset table:not([class]) thead th {
    background:#17cce7;
  }

  .md-typeset table:not([class]) tbody tr:hover {
    /* background:#a9a6c4; */
    cursor:pointer;
  }

  /*
  .md-typeset table:not([class]) th,tr:hover {
    background:#bae9f0;
    cursor:pointer;
  } */