From 4d2d6cc81827be29d7b33cd72e83d76b484205f1 Mon Sep 17 00:00:00 2001 From: "jeremy@jermolene.com" Date: Mon, 22 Jun 2020 12:25:55 +0100 Subject: [PATCH] Consent banner: Use palette colours --- .../config/DefaultColourMappings.multids | 15 ++++++++++ plugins/tiddlywiki/consent-banner/readme.tid | 18 +++++++++++ plugins/tiddlywiki/consent-banner/styles.tid | 30 +++++++++---------- 3 files changed, 48 insertions(+), 15 deletions(-) create mode 100644 plugins/tiddlywiki/consent-banner/config/DefaultColourMappings.multids diff --git a/plugins/tiddlywiki/consent-banner/config/DefaultColourMappings.multids b/plugins/tiddlywiki/consent-banner/config/DefaultColourMappings.multids new file mode 100644 index 000000000..221d8488b --- /dev/null +++ b/plugins/tiddlywiki/consent-banner/config/DefaultColourMappings.multids @@ -0,0 +1,15 @@ +title: $:/config/DefaultColourMappings/ + +consent-banner-backdrop-background: rgba(0,0,0,0.2) +consent-banner-background: #009677 +consent-banner-button-background: transparent +consent-banner-button-border: #fff +consent-banner-button-default-background: #fff +consent-banner-button-default-foreground: #009677 +consent-banner-button-foreground: #fff +consent-banner-button-hover-background: #fff +consent-banner-button-hover-border: #fff +consent-banner-button-hover-foreground: #009577 +consent-banner-foreground: #fff +consent-banner-hr-background: rgba(255,255,255,.25) +consent-banner-link-foreground: #fff \ No newline at end of file diff --git a/plugins/tiddlywiki/consent-banner/readme.tid b/plugins/tiddlywiki/consent-banner/readme.tid index 16094080b..26a526bae 100644 --- a/plugins/tiddlywiki/consent-banner/readme.tid +++ b/plugins/tiddlywiki/consent-banner/readme.tid @@ -14,6 +14,24 @@ Consent is automatically granted if the user logged in (ie the tiddler [[$:/stat Please note that using this plugin does not guarantee compliance with any particular legislation. You will need to understand the technical issues specific to your situation, and if necessary seek legal advice. +! Consent Banner Palette Entries + +Add these entries to your current colour palette to change the colours used by the consent banner: + +* ''consent-banner-backdrop-background'' - the colour of the backdrop behind the consent banner (defaults to {{$:/config/DefaultColourMappings/consent-banner-backdrop-background}}) +* ''consent-banner-background'' - the background colour of the consent banner (defaults to {{$:/config/DefaultColourMappings/consent-banner-background}}) +* ''consent-banner-button-background'' - the background colour of buttons within the consent banner (defaults to {{$:/config/DefaultColourMappings/consent-banner-button-background}}) +* ''consent-banner-button-border'' - the border colour of buttons within the consent banner (defaults to {{$:/config/DefaultColourMappings/consent-banner-button-border}}) +* ''consent-banner-button-default-background'' - the background colour for the default button within the consent banner (defaults to {{$:/config/DefaultColourMappings/consent-banner-button-default-background}}) +* ''consent-banner-button-default-foreground'' - the foreground colour for the default button within the consent banner (defaults to {{$:/config/DefaultColourMappings/consent-banner-button-default-foreground}}) +* ''consent-banner-button-foreground'' - the foreground colour of buttons within the consent banner (defaults to {{$:/config/DefaultColourMappings/consent-banner-button-foreground}}) +* ''consent-banner-button-hover-background'' - the background colour of hovered buttons within the consent banner (defaults to {{$:/config/DefaultColourMappings/consent-banner-button-hover-background}}) +* ''consent-banner-button-hover-border'' - the border colour of hovered buttons within the consent banner (defaults to {{$:/config/DefaultColourMappings/consent-banner-button-hover-border}}) +* ''consent-banner-button-hover-foreground'' - the foreground colour of hovered buttons within the consent banner (defaults to {{$:/config/DefaultColourMappings/consent-banner-button-hover-foreground}}) +* ''consent-banner-foreground'' - the foreground colour of the consent banner (defaults to {{$:/config/DefaultColourMappings/consent-banner-foreground}}) +* ''consent-banner-hr-background'' - the background colour of horizontal rules within the consent banner (defaults to {{$:/config/DefaultColourMappings/consent-banner-hr-background}}) +* ''consent-banner-link-foreground'' - the foreground colour of tiddler links within the consent banner (defaults to {{$:/config/DefaultColourMappings/consent-banner-link-foreground}}) + ! ~YouTube macro A simple macro for embedding ~YouTube videos is provided to show how to adapt content according to whether consent has been granted. It works by checking the tiddler [[$:/state/consent-banner/accepted]] for the following values: diff --git a/plugins/tiddlywiki/consent-banner/styles.tid b/plugins/tiddlywiki/consent-banner/styles.tid index f8c969f14..ddc0fd858 100644 --- a/plugins/tiddlywiki/consent-banner/styles.tid +++ b/plugins/tiddlywiki/consent-banner/styles.tid @@ -8,7 +8,7 @@ tags: $:/tags/Stylesheet right: 0; top: 0; bottom: 0; - background: rgba(0,0,0,0.2); + background: <>; } .tc-consent-banner-left { @@ -23,19 +23,19 @@ tags: $:/tags/Stylesheet .tc-consent-banner { padding: 1em; - background: #009677; - color: #fff; + background: <>; + color: <>; box-shadow: 0 0 20px rgba(0,0,0,.2); } .tc-consent-banner a.tc-tiddlylink-external { text-decoration: underline; - color: #fff; + color: <>; background-color: inherit; } .tc-consent-banner a.tc-tiddlylink-external:visited { - color: #fff; + color: <>; background-color: inherit; } @@ -49,7 +49,7 @@ tags: $:/tags/Stylesheet margin: 24px 0; height: 1px; max-height: 1px; - background: rgba(255,255,255,.25); + background: <>; } .tc-consent-buttons { @@ -57,23 +57,23 @@ tags: $:/tags/Stylesheet } .tc-consent-button { - border: 1px solid #fff; + border: 1px solid <>; margin-right: 1em; margin-top: 1em; padding: 0.75em 1.5em; - color: #fff; - background: transparent; + color: <>; + background: <>; font-weight: bold; } .tc-consent-button:hover { - color: #009577; - border-color: #fff; - background: #fff; + color: <>; + border-color: <>; + background: <>; opacity: .6; } .tc-consent-button-default { - color: #009677; - background: #fff; -} \ No newline at end of file + color: <>; + background: <>; +}