mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-24 00:50:28 +00:00
Consent banner: Use palette colours
This commit is contained in:
parent
c57bdc46f4
commit
4d2d6cc818
@ -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
|
@ -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:
|
||||
|
@ -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>>;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user