doctype html

html
  head
    meta(charset='utf-8')
    title Trendy
    meta(name="viewport" content="width=device-width, initial-scale=1.0")

    script(src="/public/components/webcomponentsjs/webcomponents.min.js")
    script(src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js")
    script(src="/public/client.js")

    link(rel="import", href="/public/card.html")
    link(rel="import", href="/public/components/paper-styles/color.html")
    link(rel="import", href="/public/components/paper-progress/paper-progress.html")

    style(is="custom-style")
      | paper-progress {
      |  display: block;
      |  width: 100%;
      |  padding: 0;
      |}
      
      |paper-progress.green {
      |  --paper-progress-active-color: var(--paper-light-green-800);
      |  --paper-progress-secondary-color: var(--paper-light-green-300);
      |}

  body
    paper-progress.green(value=0,min=0,max=60000,step=1)
    .list
      each url in urls
        my-card
          .shares #{url.share_count}
          .url.truncate
            a(href="#{url.url}")
              | !{url.title || url.url}

doctype html

html
  head
    meta(charset='utf-8')
    title Trendy
    meta(name="viewport" content="width=device-width, initial-scale=1.0")

    script(src="/public/components/webcomponentsjs/webcomponents.min.js")
    script(src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js")
    script(src="/public/client.js")

    link(rel="import", href="/public/card.html")
    link(rel="import", href="/public/components/paper-styles/color.html")
    link(rel="import", href="/public/components/paper-progress/paper-progress.html")

    style(is="custom-style")
      | paper-progress {
      |  display: block;
      |  width: 100%;
      |  padding: 0;
      |}
      
      |paper-progress.green {
      |  --paper-progress-active-color: var(--paper-light-green-800);
      |  --paper-progress-secondary-color: var(--paper-light-green-300);
      |}
      |paper-progress.red {
      |  --paper-progress-active-color: var(--paper-red-700);
      |  --paper-progress-secondary-color: var(--paper-red-300);
      |}

  body
    paper-progress.red(value=0,min=0,max=60000,step=1)
    .list
      each url in urls
        my-card
          .shares #{url.share_count}
          .url.truncate
            a(href="#{url.url}")
              | !{url.title || url.url}

Change the progress bar color from green to red
Change the progress bar color from green to red
