From ea017d8cb14b46cd4d5486294cf3b4ae08d59de0 Mon Sep 17 00:00:00 2001 From: Mike Perham Date: Tue, 2 Nov 2021 12:56:08 -0700 Subject: [PATCH] CSS tweaks - remove unused(?) rickshaw_annotation_* - further enhancements to dark mode readability --- web/assets/stylesheets/application-dark.css | 14 ++-- web/assets/stylesheets/application.css | 90 +-------------------- 2 files changed, 10 insertions(+), 94 deletions(-) diff --git a/web/assets/stylesheets/application-dark.css b/web/assets/stylesheets/application-dark.css index 3d050392..4bf27473 100644 --- a/web/assets/stylesheets/application-dark.css +++ b/web/assets/stylesheets/application-dark.css @@ -8,12 +8,12 @@ a, .summary_bar ul .count, span.current-interval, .navbar .navbar-brand { - color: #c04; + color: #d04; } -.history-graph + .active, +.history-graph.active, .beacon .dot { - background-color: #c04; + background-color: #d04; } .navbar .navbar-brand:hover { @@ -88,7 +88,7 @@ input { background-color: #222; border: 1px solid #555; - box-shadow: 0 0 5px rgba(255, 255, 255, 0.1); + box-shadow: 0 0 5px rgba(255, 255, 255, .5); } .navbar-default { @@ -126,14 +126,14 @@ input { } .stat { - border: 1px solid rgba(255, 255, 255, 0.1); + border: 1px solid #888; } .rickshaw_graph .detail { - background: rgba(255, 255, 255, .1) + background: #888; } .rickshaw_graph .x_tick { - border-color: rgba(255, 255, 255, .2); + border-color: #888; } .rickshaw_graph .y_ticks.glow text { diff --git a/web/assets/stylesheets/application.css b/web/assets/stylesheets/application.css index 6933ab78..23e298e8 100644 --- a/web/assets/stylesheets/application.css +++ b/web/assets/stylesheets/application.css @@ -537,7 +537,6 @@ div.interval-slider input { } .history-graph { - font-size: 0.8em; padding: 3px; border-radius: 3px; } @@ -621,7 +620,7 @@ div.interval-slider input { position: absolute; top: 0; z-index: 2; - background: rgba(0, 0, 0, .1); + background: rgba(0, 0, 0, .9); bottom: 0; width: 1px; transition: opacity .25s linear; @@ -727,96 +726,16 @@ div.interval-slider input { top: 0; bottom: 0; width: 0; - border-left: 1px dotted rgba(0, 0, 0, .2); + border-left: 1px dotted rgba(0, 0, 0, .5); pointer-events: none } .rickshaw_graph .x_tick .title { position: absolute; - font-size: 12px; font-family: Arial, sans-serif; - opacity: .5; white-space: nowrap; margin-left: 3px; bottom: 1px } -.rickshaw_annotation_timeline { - height: 1px; - border-top: 1px solid #e0e0e0; - margin-top: 10px; - position: relative -} -.rickshaw_annotation_timeline .annotation { - position: absolute; - height: 6px; - width: 6px; - margin-left: -2px; - top: -3px; - border-radius: 5px; - background-color: rgba(0, 0, 0, .25) -} -.rickshaw_graph .annotation_line { - position: absolute; - top: 0; - bottom: -6px; - width: 0; - border-left: 2px solid rgba(0, 0, 0, .3); - display: none -} -.rickshaw_graph .annotation_line.active { - display: block -} -.rickshaw_graph .annotation_range { - background: rgba(0, 0, 0, .1); - display: none; - position: absolute; - top: 0; - bottom: -6px -} -.rickshaw_graph .annotation_range.active { - display: block -} -.rickshaw_graph .annotation_range.active.offscreen { - display: none -} -.rickshaw_annotation_timeline .annotation .content { - background: #fff; - color: #000; - opacity: .9; - padding: 5px; - box-shadow: 0 0 2px rgba(0, 0, 0, .8); - border-radius: 3px; - position: relative; - z-index: 20; - font-size: 12px; - padding: 6px 8px 8px; - top: 18px; - left: -11px; - width: 160px; - display: none; - cursor: pointer -} -.rickshaw_annotation_timeline .annotation .content:before { - content: "\25b2"; - position: absolute; - top: -11px; - color: #fff; - text-shadow: 0 -1px 1px rgba(0, 0, 0, .8) -} -.rickshaw_annotation_timeline .annotation.active, -.rickshaw_annotation_timeline .annotation:hover { - background-color: rgba(0, 0, 0, .8); - cursor: none -} -.rickshaw_annotation_timeline .annotation .content:hover { - z-index: 50 -} -.rickshaw_annotation_timeline .annotation.active .content { - display: block -} -.rickshaw_annotation_timeline .annotation:hover .content { - display: block; - z-index: 50 -} .rickshaw_graph .y_axis, .rickshaw_graph .x_axis_d3 { fill: none @@ -868,7 +787,6 @@ div.interval-slider input { } .rickshaw_legend { font-family: Arial; - font-size: 12px; color: #fff; background: #404040; display: inline-block; @@ -911,10 +829,8 @@ div.interval-slider input { } .rickshaw_legend .action { margin-right: .2em; - font-size: 10px; - opacity: .2; + opacity: .5; cursor: pointer; - font-size: 14px } .rickshaw_legend .line.disabled { opacity: .4