Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@hadakadenkyu

Redmineの進捗度バーに色付けすると捗る

今年Redmineに導入してよかったカスタマイズ。
Redmineの進捗度バーに10%ごとに同系色、1%毎に濃くしていくと進捗が一目でわかって捗る。

image

進捗度バーを色付け
@for $i from 1 through 100 {
  table.progress.progress-#{$i} td.closed {
    @if $i%10 == 0{
      background-color: unquote("hsla(#{(floor($i/10))*36}, 100%, 60%, 1)");
    } @else {
      background-color: unquote("hsla(#{(floor($i/10))*36}, 100%, #{($i - 1)*3+73}%, 0.75)");
    }
  }
}

適用にはView Customizeを使ったが、SASSを受け付けないためCSSにコンパイル後適用した。

進捗度バーを色付け
table.progress.progress-1 td.closed {
  background-color: hsla(0, 100%, 73%,0.75);
}

table.progress.progress-2 td.closed {
  background-color: hsla(0, 100%, 76%,0.75);
}

table.progress.progress-3 td.closed {
  background-color: hsla(0, 100%, 79%,0.75);
}

table.progress.progress-4 td.closed {
  background-color: hsla(0, 100%, 82%,0.75);
}

table.progress.progress-5 td.closed {
  background-color: hsla(0, 100%, 85%,0.75);
}

table.progress.progress-6 td.closed {
  background-color: hsla(0, 100%, 88%,0.75);
}

table.progress.progress-7 td.closed {
  background-color: hsla(0, 100%, 91%,0.75);
}

table.progress.progress-8 td.closed {
  background-color: hsla(0, 100%, 94%,0.75);
}

table.progress.progress-9 td.closed {
  background-color: hsla(0, 100%, 97%,0.75);
}

table.progress.progress-10 td.closed {
  background-color: hsla(36, 100%, 60%,1);
}

table.progress.progress-11 td.closed {
  background-color: hsla(36, 100%, 73%,0.75);
}

table.progress.progress-12 td.closed {
  background-color: hsla(36, 100%, 76%,0.75);
}

table.progress.progress-13 td.closed {
  background-color: hsla(36, 100%, 79%,0.75);
}

table.progress.progress-14 td.closed {
  background-color: hsla(36, 100%, 82%,0.75);
}

table.progress.progress-15 td.closed {
  background-color: hsla(36, 100%, 85%,0.75);
}

table.progress.progress-16 td.closed {
  background-color: hsla(36, 100%, 88%,0.75);
}

table.progress.progress-17 td.closed {
  background-color: hsla(36, 100%, 91%,0.75);
}

table.progress.progress-18 td.closed {
  background-color: hsla(36, 100%, 94%,0.75);
}

table.progress.progress-19 td.closed {
  background-color: hsla(36, 100%, 97%,0.75);
}

table.progress.progress-20 td.closed {
  background-color: hsla(72, 100%, 60%,1);
}

table.progress.progress-21 td.closed {
  background-color: hsla(72, 100%, 73%,0.75);
}

table.progress.progress-22 td.closed {
  background-color: hsla(72, 100%, 76%,0.75);
}

table.progress.progress-23 td.closed {
  background-color: hsla(72, 100%, 79%,0.75);
}

table.progress.progress-24 td.closed {
  background-color: hsla(72, 100%, 82%,0.75);
}

table.progress.progress-25 td.closed {
  background-color: hsla(72, 100%, 85%,0.75);
}

table.progress.progress-26 td.closed {
  background-color: hsla(72, 100%, 88%,0.75);
}

table.progress.progress-27 td.closed {
  background-color: hsla(72, 100%, 91%,0.75);
}

table.progress.progress-28 td.closed {
  background-color: hsla(72, 100%, 94%,0.75);
}

table.progress.progress-29 td.closed {
  background-color: hsla(72, 100%, 97%,0.75);
}

table.progress.progress-30 td.closed {
  background-color: hsla(108, 100%, 60%,1);
}

table.progress.progress-31 td.closed {
  background-color: hsla(108, 100%, 73%,0.75);
}

table.progress.progress-32 td.closed {
  background-color: hsla(108, 100%, 76%,0.75);
}

table.progress.progress-33 td.closed {
  background-color: hsla(108, 100%, 79%,0.75);
}

table.progress.progress-34 td.closed {
  background-color: hsla(108, 100%, 82%,0.75);
}

table.progress.progress-35 td.closed {
  background-color: hsla(108, 100%, 85%,0.75);
}

table.progress.progress-36 td.closed {
  background-color: hsla(108, 100%, 88%,0.75);
}

table.progress.progress-37 td.closed {
  background-color: hsla(108, 100%, 91%,0.75);
}

table.progress.progress-38 td.closed {
  background-color: hsla(108, 100%, 94%,0.75);
}

table.progress.progress-39 td.closed {
  background-color: hsla(108, 100%, 97%,0.75);
}

table.progress.progress-40 td.closed {
  background-color: hsla(144, 100%, 60%,1);
}

table.progress.progress-41 td.closed {
  background-color: hsla(144, 100%, 73%,0.75);
}

table.progress.progress-42 td.closed {
  background-color: hsla(144, 100%, 76%,0.75);
}

table.progress.progress-43 td.closed {
  background-color: hsla(144, 100%, 79%,0.75);
}

table.progress.progress-44 td.closed {
  background-color: hsla(144, 100%, 82%,0.75);
}

table.progress.progress-45 td.closed {
  background-color: hsla(144, 100%, 85%,0.75);
}

table.progress.progress-46 td.closed {
  background-color: hsla(144, 100%, 88%,0.75);
}

table.progress.progress-47 td.closed {
  background-color: hsla(144, 100%, 91%,0.75);
}

table.progress.progress-48 td.closed {
  background-color: hsla(144, 100%, 94%,0.75);
}

table.progress.progress-49 td.closed {
  background-color: hsla(144, 100%, 97%,0.75);
}

table.progress.progress-50 td.closed {
  background-color: hsla(180, 100%, 60%,1);
}

table.progress.progress-51 td.closed {
  background-color: hsla(180, 100%, 73%,0.75);
}

table.progress.progress-52 td.closed {
  background-color: hsla(180, 100%, 76%,0.75);
}

table.progress.progress-53 td.closed {
  background-color: hsla(180, 100%, 79%,0.75);
}

table.progress.progress-54 td.closed {
  background-color: hsla(180, 100%, 82%,0.75);
}

table.progress.progress-55 td.closed {
  background-color: hsla(180, 100%, 85%,0.75);
}

table.progress.progress-56 td.closed {
  background-color: hsla(180, 100%, 88%,0.75);
}

table.progress.progress-57 td.closed {
  background-color: hsla(180, 100%, 91%,0.75);
}

table.progress.progress-58 td.closed {
  background-color: hsla(180, 100%, 94%,0.75);
}

table.progress.progress-59 td.closed {
  background-color: hsla(180, 100%, 97%,0.75);
}

table.progress.progress-60 td.closed {
  background-color: hsla(216, 100%, 60%,1);
}

table.progress.progress-61 td.closed {
  background-color: hsla(216, 100%, 73%,0.75);
}

table.progress.progress-62 td.closed {
  background-color: hsla(216, 100%, 76%,0.75);
}

table.progress.progress-63 td.closed {
  background-color: hsla(216, 100%, 79%,0.75);
}

table.progress.progress-64 td.closed {
  background-color: hsla(216, 100%, 82%,0.75);
}

table.progress.progress-65 td.closed {
  background-color: hsla(216, 100%, 85%,0.75);
}

table.progress.progress-66 td.closed {
  background-color: hsla(216, 100%, 88%,0.75);
}

table.progress.progress-67 td.closed {
  background-color: hsla(216, 100%, 91%,0.75);
}

table.progress.progress-68 td.closed {
  background-color: hsla(216, 100%, 94%,0.75);
}

table.progress.progress-69 td.closed {
  background-color: hsla(216, 100%, 97%,0.75);
}

table.progress.progress-70 td.closed {
  background-color: hsla(252, 100%, 60%,1);
}

table.progress.progress-71 td.closed {
  background-color: hsla(252, 100%, 73%,0.75);
}

table.progress.progress-72 td.closed {
  background-color: hsla(252, 100%, 76%,0.75);
}

table.progress.progress-73 td.closed {
  background-color: hsla(252, 100%, 79%,0.75);
}

table.progress.progress-74 td.closed {
  background-color: hsla(252, 100%, 82%,0.75);
}

table.progress.progress-75 td.closed {
  background-color: hsla(252, 100%, 85%,0.75);
}

table.progress.progress-76 td.closed {
  background-color: hsla(252, 100%, 88%,0.75);
}

table.progress.progress-77 td.closed {
  background-color: hsla(252, 100%, 91%,0.75);
}

table.progress.progress-78 td.closed {
  background-color: hsla(252, 100%, 94%,0.75);
}

table.progress.progress-79 td.closed {
  background-color: hsla(252, 100%, 97%,0.75);
}

table.progress.progress-80 td.closed {
  background-color: hsla(288, 100%, 60%,1);
}

table.progress.progress-81 td.closed {
  background-color: hsla(288, 100%, 73%,0.75);
}

table.progress.progress-82 td.closed {
  background-color: hsla(288, 100%, 76%,0.75);
}

table.progress.progress-83 td.closed {
  background-color: hsla(288, 100%, 79%,0.75);
}

table.progress.progress-84 td.closed {
  background-color: hsla(288, 100%, 82%,0.75);
}

table.progress.progress-85 td.closed {
  background-color: hsla(288, 100%, 85%,0.75);
}

table.progress.progress-86 td.closed {
  background-color: hsla(288, 100%, 88%,0.75);
}

table.progress.progress-87 td.closed {
  background-color: hsla(288, 100%, 91%,0.75);
}

table.progress.progress-88 td.closed {
  background-color: hsla(288, 100%, 94%,0.75);
}

table.progress.progress-89 td.closed {
  background-color: hsla(288, 100%, 97%,0.75);
}

table.progress.progress-90 td.closed {
  background-color: hsla(324, 100%, 60%,1);
}

table.progress.progress-91 td.closed {
  background-color: hsla(324, 100%, 73%,0.75);
}

table.progress.progress-92 td.closed {
  background-color: hsla(324, 100%, 76%,0.75);
}

table.progress.progress-93 td.closed {
  background-color: hsla(324, 100%, 79%,0.75);
}

table.progress.progress-94 td.closed {
  background-color: hsla(324, 100%, 82%,0.75);
}

table.progress.progress-95 td.closed {
  background-color: hsla(324, 100%, 85%,0.75);
}

table.progress.progress-96 td.closed {
  background-color: hsla(324, 100%, 88%,0.75);
}

table.progress.progress-97 td.closed {
  background-color: hsla(324, 100%, 91%,0.75);
}

table.progress.progress-98 td.closed {
  background-color: hsla(324, 100%, 94%,0.75);
}

table.progress.progress-99 td.closed {
  background-color: hsla(324, 100%, 97%,0.75);
}

table.progress.progress-100 td.closed {
  background-color: hsla(360, 100%, 60%,1);
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
6
Help us understand the problem. What are the problem?