mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-23 10:07:19 +00:00
Code Issues Releases Wiki Activity

Consent banner: Use palette colours

Browse Source
This commit is contained in:
jeremy@jermolene.com 2020-06-22 12:25:55 +01:00
parent c57bdc46f4
commit 4d2d6cc818
3 changed files with 48 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
plugins/tiddlywiki/consent-banner/config/DefaultColourMappings.multids Normal file
View File

@ -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

18
plugins/tiddlywiki/consent-banner/readme.tid
View File

@ -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:

28
plugins/tiddlywiki/consent-banner/styles.tid
View File

@ -8,7 +8,7 @@ tags: $:/tags/Stylesheet
right: 0;
top: 0;
bottom: 0;
background: rgba(0,0,0,0.2);
background: <<colour consent-banner-backdrop-background>>;
}
.tc-consent-banner-left {
@ -23,19 +23,19 @@ tags: $:/tags/Stylesheet
.tc-consent-banner {
padding: 1em;
background: #009677;
color: #fff;
background: <<colour consent-banner-background>>;
color: <<colour consent-banner-foreground>>;
box-shadow: 0 0 20px rgba(0,0,0,.2);
}
.tc-consent-banner a.tc-tiddlylink-external {
text-decoration: underline;
color: #fff;
color: <<colour consent-banner-link-foreground>>;
background-color: inherit;
}
.tc-consent-banner a.tc-tiddlylink-external:visited {
color: #fff;
color: <<colour consent-banner-link-foreground>>;
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: <<colour consent-banner-hr-background>>;
}
.tc-consent-buttons {
@ -57,23 +57,23 @@ tags: $:/tags/Stylesheet
}
.tc-consent-button {
border: 1px solid #fff;
border: 1px solid <<colour consent-banner-button-border>>;
margin-right: 1em;
margin-top: 1em;
padding: 0.75em 1.5em;
color: #fff;
background: transparent;
color: <<colour consent-banner-button-foreground>>;
background: <<colour consent-banner-button-background>>;
font-weight: bold;
}
.tc-consent-button:hover {
color: #009577;
border-color: #fff;
background: #fff;
color: <<colour consent-banner-button-hover-foreground>>;
border-color: <<colour consent-banner-button-hover-border>>;
background: <<colour consent-banner-button-hover-background>>;
opacity: .6;
}
.tc-consent-button-default {
color: #009677;
background: #fff;
color: <<colour consent-banner-button-default-foreground>>;
background: <<colour consent-banner-button-default-background>>;
}