From a6ffebdcece0def70fb618b6eae23fa31a261c18 Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Sun, 25 Jul 2021 11:58:43 +0200
Subject: [PATCH] #585 - fixed light theme
---
src/main/resources/static/css/charts.css | 31 +++++++++++++++++--
src/main/resources/static/css/colors.css | 3 +-
.../resources/templates/charts/charts.ftl | 4 +--
3 files changed, 33 insertions(+), 5 deletions(-)
diff --git a/src/main/resources/static/css/charts.css b/src/main/resources/static/css/charts.css
index a89b14a33..aa6afbe6b 100644
--- a/src/main/resources/static/css/charts.css
+++ b/src/main/resources/static/css/charts.css
@@ -3,11 +3,16 @@
}
.quick-date {
- color: #BDFF3F;
+ color: var(--color-blue);
text-align: center;
padding: 0 0 10px 0;
}
+[data-theme="dark"] .quick-date {
+ color: #BDFF3F;
+}
+
+
.quick-date:hover {
cursor: pointer;
text-decoration: underline var(--color-blue);
@@ -36,6 +41,14 @@
font-size: 1.2rem;
}
+.chart-preview {
+ background-color: var(--color-grey-ccc);
+}
+
+[data-theme="dark"] .chart-preview {
+ background-color: var(--color-grey-dark);
+}
+
.chart-preview:hover {
cursor: pointer;
}
@@ -47,6 +60,16 @@
padding: 1rem;
}
+[data-theme="dark"] .button-display-type,
+[data-theme="dark"] .button-group-type {
+ background-color: var(--color-grey) !important;
+}
+
+.button-display-type,
+.button-group-type {
+ background-color: var(--color-grey-ccc) !important;
+}
+
.button-display-type.active {
background-color: var(--color-green) !important;
}
@@ -60,7 +83,11 @@
}
#chart-date-card {
- background-color: var(--color-grey-dark-almost-transparent);
+ background-color: var(--color-white);
+}
+
+[data-theme="dark"] #chart-date-card {
+ background-color: var(--color-background-light);
}
#filterActiveBadge {
diff --git a/src/main/resources/static/css/colors.css b/src/main/resources/static/css/colors.css
index e0a884ec1..1180c6202 100644
--- a/src/main/resources/static/css/colors.css
+++ b/src/main/resources/static/css/colors.css
@@ -19,6 +19,7 @@
--color-grey: #696969;
--color-grey-dark: rgba(0, 0, 0, 0.25);
--color-grey-dark-almost-transparent: rgba(0, 0, 0, 0.08);
+ --color-grey-ccc: #CCCCCC;
--color-black: rgba(0, 0, 0, 0.87);
--color-text: #212121;
@@ -34,7 +35,7 @@
--color-blue-light: rgba(80, 115, 146, 0.8);
--color-yellow: #E9C46A;
--color-grey-light: #333333;
- --color-grey: #CCCCCC;
+ --color-grey: var(--color-grey-ccc);
--color-grey-dark: rgba(255, 255, 255, 0.5);
--color-grey-dark-almost-transparent: rgba(255, 255, 255, 0.125);
diff --git a/src/main/resources/templates/charts/charts.ftl b/src/main/resources/templates/charts/charts.ftl
index 299348baf..d340ffccd 100644
--- a/src/main/resources/templates/charts/charts.ftl
+++ b/src/main/resources/templates/charts/charts.ftl
@@ -133,7 +133,7 @@
<#macro chartTypeButton item buttonClass initialItem>
<#assign isInitialItem=item.name()==initialItem.name()/>
- <a class="waves-effect waves-light btn-large background-grey text-black ${buttonClass} <#if isInitialItem>active</#if>" data-value="${item.name()}">
+ <a class="waves-effect waves-light btn-large text-black ${buttonClass} <#if isInitialItem>active</#if>" data-value="${item.name()}">
<#if item.hasFontAwesomeIcon()>
<i class="${item.getIcon()} left"></i> ${locale.getString(item.getLocalizationKey())}
<#else>
@@ -144,7 +144,7 @@
<#macro chartPreview chart>
<div class="col s6 m4 l3 center-align chart-preview-column hidden" data-display-type="${chart.getDisplayType()}" data-group-type="${chart.getGroupType()}" data-id="${chart.getID()?c}">
- <div class="card chart-preview background-grey-dark">
+ <div class="card chart-preview">
<div class="card-image">
<img src="<@s.url '/images/charts/' + chart.getPreviewImageFileName()!"placeholder.png"/>">
</div>
--
GitLab