Set dark colors & update charts style

src/routes/pages/stats.rs

@@ -26,6 +26,7 @@ pub fn view(_auth: Authorized, db: State<'_, sled::Db>) -> Result<Template, Stat
         secs_last_week: u64,
         secs_last_month: u64,
 
+        bars_max: f64,
         bars: Vec<(u32, f64, f64)>,
     }
 
@@ -97,6 +98,7 @@ pub fn view(_auth: Authorized, db: State<'_, sled::Db>) -> Result<Template, Stat
                 secs_last_week,
                 secs_last_month,
 
+                bars_max: biggest_hour,
                 bars: (0..24)
                     .map(|hour| {
                         let percentage = *stats_per_hour.entry(hour).or_default();

static/charts.css

@@ -50,20 +50,19 @@
     /*** lined-paper background ***/
     position: relative;
 
-    background: #fff;
-    background: -webkit-gradient(linear, 0 0, 0 100%, from(#d1d1d1), color-stop(4%, #fff)) 0 0;
-    background: -webkit-linear-gradient(top, #d1d1d1 0%, #fff 4%) 0 0;
-    background: -moz-linear-gradient(top, #d1d1d1 0%, #fff 4%) 0 0;
-    background: -ms-linear-gradient(top, #d1d1d1 0%, #fff 4%) 0 0;
-    background: -o-linear-gradient(top, #d1d1d1 0%, #fff 4%) 0 0;
-    background: linear-gradient(top, #d1d1d1 0%, #fff 4%) 0 0;
-
     background-size: 100% 40px;
 
     border-radius: 3px;
 }
 
+.chart_histogram_legend {
+    margin-right: 0.5em;
+}
+
 .chart_histogram_col {
+    border-top: dotted 1px;
+    margin-top: 0.5em;
+
     max-width: 2em;
 
     display: flex;
@@ -73,7 +72,7 @@
 
 .chart_histogram_col_line {
     display: flex;
-    width: 1em;
+    width: 100%;
     margin: auto;
 
     background-color: #785ddc;
@@ -81,9 +80,6 @@
     border-color: #e2e8f0;
     border-style: solid;
     border-width: 0.1em;
-    border-radius: 1em;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
 
     transition: all 0.2s linear;
 }

static/styles.css

@@ -1,11 +1,32 @@
 body {
     font-family: Ubuntu;
+    background-color: #302f3b;
+    color: #e0c1c1;
 }
 
 .title {
     text-align: center;
 }
 
+a {
+    text-decoration: none;
+}
+
+a:link {
+    color: #fff;
+    border-bottom: 1px solid #ff0000;
+}
+
+a:visited {
+    color: #fff;
+    border-bottom: 1px solid #b3b3b3;
+}
+
+a:hover {
+    color: #7bd09f;
+    border-bottom: 1px solid #000099;
+}
+
 ul.striped_list {
     max-width: 40em;
     list-style-type: none;
@@ -14,7 +35,7 @@ ul.striped_list {
 }
 
 ul.striped_list > li:nth-of-type(odd) {
-    background-color: #f0f0f0;
+    background-color: #3f4a53;
 }
 
 .category_entry {
@@ -50,7 +71,7 @@ ul.striped_list > li:nth-of-type(odd) {
 
 .category_button_container {
     margin: 0.1em;
-    background-color: #c1c1c1;
+    background-color: #a4829c;
     border-radius: 3.5em;
     width: 7em;
     height: 7em;
@@ -64,7 +85,7 @@ ul.striped_list > li:nth-of-type(odd) {
     margin-top: 25px;
 
     background-color: transparent;
-    border-color: transparent transparent transparent #202020;
+    border-color: transparent transparent transparent #302f3b;
     transition: 100ms all ease;
     will-change: border-width;
     cursor: pointer;
@@ -89,15 +110,15 @@ ul.striped_list > li:nth-of-type(odd) {
 }
 
 .history_entry_duration {
-    color: #892be1;
+    color: #e4c9ff;
 }
 
 .history_entry_started {
-    color: #cc661e;
+    color: #fdab70;
 }
 
 .history_entry_ended {
-    color: #9f2727;
+    color: #ffa9a9;
 }
 
 .history_entry_delete_button {

templates/stats.hbs

@@ -38,6 +38,7 @@
             </h2>
             <h2>Andel per timme:</h2>
             <div class="chart_histogram">
+                <div class="chart_histogram_legend">{{this.bars_max}}&percnt;</div>
                 {{#each this.bars}}
                 <div class="chart_histogram_col">
                     <div style="flex-grow: {{this.2}};"></div>