Popup color refinement

This commit is contained in:
Andre Beging
2021-11-11 10:40:05 +01:00
committed by GitHub
parent 44fa5c30a6
commit f6821d319d

View File

@@ -1,7 +1,7 @@
// ==UserScript== // ==UserScript==
// @name Foodsharing Planner // @name Foodsharing Planner
// @namespace http://tampermonkey.net/ // @namespace http://tampermonkey.net/
// @version 0.7 // @version 0.8
// @updateURL https://github.com/TroogS/userscripts/raw/master/foodsharing_planner.user.js // @updateURL https://github.com/TroogS/userscripts/raw/master/foodsharing_planner.user.js
// @downloadURL https://github.com/TroogS/userscripts/raw/master/foodsharing_planner.user.js // @downloadURL https://github.com/TroogS/userscripts/raw/master/foodsharing_planner.user.js
// @description Generate a calendar like view as addition to the foodsharing website germany, austria and switzerland // @description Generate a calendar like view as addition to the foodsharing website germany, austria and switzerland
@@ -236,11 +236,16 @@ class StyleHelper {
} }
static Style = ` static Style = `
:root {
--fs-red: #dc3545;
--fs-yellow: #ffc107;
}
.fspl { .fspl {
position: fixed; position: fixed;
background: #f1e7c9; color: var(--fs-brown);
border: 5px solid #533a20; background-color: var(--fs-beige);
border: 5px solid var(--fs-brown);
border-radius: 10px; border-radius: 10px;
z-index: 5000; z-index: 5000;
height: calc(100vh - 100px); height: calc(100vh - 100px);
@@ -282,7 +287,7 @@ class StyleHelper {
.day { .day {
flex: 1; flex: 1;
border: 1px solid #533a20; border: 1px solid var(--fs-brown);
height: max-content; height: max-content;
height: 100%; height: 100%;
} }
@@ -298,8 +303,10 @@ class StyleHelper {
} }
.day .pickup { .day .pickup {
border: 1px solid #533a20; border: 0px solid transparent;
border-left-width: 5px; border-left-width: 5px;
outline: 1px solid var(--fs-brown);
background-color: var(--fs-white);
margin: 5px; margin: 5px;
border-radius: 5px; border-radius: 5px;
padding: 5px; padding: 5px;
@@ -310,19 +317,19 @@ class StyleHelper {
} }
.day .pickup > a { .day .pickup > a {
color: #000; color: var(--fs-brown);
} }
.day .pickup.pickup-green { .day .pickup.pickup-green {
border-left-color: #64ae24; border-left-color: var(--fs-green);;
} }
.day .pickup.pickup-yellow { .day .pickup.pickup-yellow {
border-left-color: #64ae2457; border-left-color: #64ae2466;
} }
.day .pickup.pickup-red { .day .pickup.pickup-red {
border-left-color: #dc3545; border-left-color: var(--fs-red);
} }
.day .pickup .img-container { .day .pickup .img-container {
@@ -363,6 +370,14 @@ class StyleHelper {
color: #533a20; color: #533a20;
} }
.button-red {
background-color: var(--fs-red);
}
.button-red:hover {
background-color: #ff6977;
}
@keyframes rotation { @keyframes rotation {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
@@ -415,6 +430,7 @@ class DOMHelper {
}); });
parentElement.append(buttonElement); parentElement.append(buttonElement);
return buttonElement;
} }
static CreateLoadingOverlay(parentElement) { static CreateLoadingOverlay(parentElement) {
@@ -534,6 +550,11 @@ function CreateNavigationButtons(mainPanel) {
BuildPlannerAsync(); BuildPlannerAsync();
}); });
var closeButton = DOMHelper.CreateNavigationButton(navigationPanel, "Heute", "fas fa-times", () => {
TogglePlanner();
});
closeButton.classList.add("button-red");
DOMHelper.CreateNavigationButton(navigationPanel, "Neu laden", "fas fa-sync", () => { DOMHelper.CreateNavigationButton(navigationPanel, "Neu laden", "fas fa-sync", () => {
DataStore.Loaded = false; DataStore.Loaded = false;
BuildPlannerAsync(); BuildPlannerAsync();