diff --git a/dist/res/common.css b/dist/res/common.css index ea4a5fd..3c5ed8f 100644 --- a/dist/res/common.css +++ b/dist/res/common.css @@ -413,4 +413,42 @@ input[type=submit] { background: var(--shale); content: ""; border-radius: 10px; -} \ No newline at end of file +} + +/* 7 day stack graph for pass fail ratio */ +#weeklyGraph { + height: auto; + width: 75%; + border: 1.2px solid var(--blue); + border-radius: 5px; +} + +.barGraphComponent { + margin: 0.2em 0.5em !important; + display: flex; + flex-direction: row; + font-size: 0.75em; + height: auto; + align-content: flex-end; +} + +.bar, .date { + margin: 0 auto; + width: 5em; + display: flex; + flex-direction: column; + text-align: center; + align-self: flex-end; +} + +.visited{ + background-color: #8B9AC0; +} + +.blocked { + background: #193174; +} + +.passed{ + background-color: #576CA8; +} diff --git a/dist/res/pages/options.html b/dist/res/pages/options.html index 4b78faa..6f69ff1 100644 --- a/dist/res/pages/options.html +++ b/dist/res/pages/options.html @@ -48,10 +48,12 @@
a list showing your most recent entries.
+ +
a bar graph showing the details of your reflect usage over the past seven days.