' . rex_view::error(rex_addon::get('consent_manager')->i18n('consent_manager_error_noconfig')) . '
';
+ return;
+}
?>
cookiegroups): ?>
diff --git a/fragments/consent_manager_box_cssjs.php b/fragments/consent_manager_box_cssjs.php
index 28219eb..2ae7d8f 100644
--- a/fragments/consent_manager_box_cssjs.php
+++ b/fragments/consent_manager_box_cssjs.php
@@ -36,7 +36,7 @@
// Standard-CSS ausgeben
if (false === $addon->getConfig('outputowncss', false)) {
$_csscontent = consent_manager_frontend::getFrontendCss();
- if (false !== $_csscontent) {
+ if ('' !== $_csscontent) {
$consentparams['outputcss'] .= ' ' . PHP_EOL;
}
}
diff --git a/lang/de_de.lang b/lang/de_de.lang
index 276da57..f76ea4f 100644
--- a/lang/de_de.lang
+++ b/lang/de_de.lang
@@ -80,3 +80,28 @@ consent_manager_thead_ip = IP
consent_manager_thead_consents = Consents
consent_manager_thead_cachelogid = Cachelog-Id
consent_manager_thead_consentid = Consent-Id
+
+consent_manager_theme = Themes
+consent_manager_config_owncss_active = „Eigenes CSS verwenden” ist in den Einstellungen aktiv. Für die Verwendung von Themes muss diese Einstellung deaktiviert werden!
+consent_manager_config_active_theme = [Aktives Theme]
+consent_manager_config_btn_preview = Theme Vorschau
+consent_manager_config_btn_select = Theme „{0}” anwenden
+consent_manager_config_confirm_select = Theme „{0}” anwenden!?
+consent_manager_config_saved = Theme wurde angewendet und ist jetzt aktiv!
+consent_manager_config_invalid_theme = Theme-Datei ungültig. Keine Theme-Informationen vorhanden!
+
+consent_manager_theme_name = Theme-Name:
+consent_manager_theme_scssfile = SCSS-Datei:
+consent_manager_theme_description = Beschreibung:
+consent_manager_theme_type = Theme-Typ:
+consent_manager_theme_style = Theme-Stil:
+consent_manager_theme_autor = Autor(en):
+
+consent_manager_themes_addon = Themes im Consent-Manager-Addon
+consent_manager_themes_addon_info = (SCSS-Dateien im Ordner:
./src/addons/consent_manager/scss/)
+consent_manager_themes_project_addon = Themes im project-Addon
+consent_manager_themes_project_addon_info = (SCSS-Dateien im Ordner:
./src/addons/project/consent_manager_themes/)
+
+consent_manager_error_no_themes = Es sind keine Themes vorhanden!
Ordner: {0}
+consent_manager_error_css_notfound = Die angeforderte SCSS-Datei '{0}' ist nicht vorhanden!
+consent_manager_error_noconfig = Es sind noch keine Texte/Domains/Dienste konfiguriert!
\ No newline at end of file
diff --git a/lib/consent_manager_frontend.php b/lib/consent_manager_frontend.php
index 008fd61..0df3589 100644
--- a/lib/consent_manager_frontend.php
+++ b/lib/consent_manager_frontend.php
@@ -1,5 +1,7 @@
getAssetsPath($_cssfilename));
+ if (false !== $addon->getConfig('theme', false)) {
+ $_themecssfilename = strval($addon->getConfig('theme', false));
+ $_themecssfilename = str_replace('project:', 'project_', str_replace('.scss', '.css', $_themecssfilename));
+ if ('' !== $_themecssfilename && file_exists($addon->getAssetsPath($_themecssfilename))) {
+ $_cssfilename = $_themecssfilename;
+ }
+ }
- return $_csscontent;
+ $_csscontent = file_get_contents($addon->getAssetsPath($_cssfilename));
+ if (false === $_csscontent) {
+ return '';
+ }
+ return '/*' . $_cssfilename . '*/ ' . $_csscontent;
}
}
diff --git a/lib/consent_manager_rex_list.php b/lib/consent_manager_rex_list.php
index 36d1d04..0621b77 100644
--- a/lib/consent_manager_rex_list.php
+++ b/lib/consent_manager_rex_list.php
@@ -35,9 +35,11 @@ public static function formatDomain($params)
*/
public static function formatCookie($params)
{
- $uids = array_filter(explode('|', $params['value']));
- if ($uids) { /** @phpstan-ignore-line */
- return implode('
', $uids);
+ if (isset($params['value'])) {
+ $uids = array_filter(explode('|', $params['value']));
+ if ($uids) { /** @phpstan-ignore-line */
+ return implode('
', $uids);
+ }
}
return '-';
}
diff --git a/lib/consent_manager_theme.php b/lib/consent_manager_theme.php
new file mode 100644
index 0000000..6312e5f
--- /dev/null
+++ b/lib/consent_manager_theme.php
@@ -0,0 +1,149 @@
+setTheme($theme);
+ }
+
+ /**
+ * Set theme.
+ */
+ public function setTheme(string $theme): void
+ {
+ $this->theme = $theme;
+ }
+
+ /**
+ * Get theme.
+ */
+ public function getTheme(): string
+ {
+ return $this->theme;
+ }
+
+ /**
+ * Compile scss.
+ */
+ public function compileScss(string $source, string $dest): void
+ {
+ $compiler = new rex_scss_compiler();
+ $compiler->setScssFile($source);
+ $compiler->setCssFile($dest);
+ $compiler->compile();
+ }
+
+ /**
+ * Get compiled scss.
+ * @return string|false
+ */
+ public function getCompiledStyle(string $theme = '')
+ {
+ if ('' === $theme) {
+ $theme = $this->getTheme();
+ }
+
+ if (0 === strpos($theme, 'project:')) {
+ $addon = rex_addon::get('project');
+ if (!file_exists($addon->getPath('consent_manager_themes/' . str_replace('project:', '', $theme)))) {
+ return false;
+ }
+
+ $themefile = str_replace('project:', '', $theme);
+ $tempfile = rex_path::addonCache('consent_manager', $themefile . '_preview.css');
+ $this->compileScss($addon->getPath('consent_manager_themes/' . $themefile), $tempfile);
+ $css = trim(strval(rex_file::get($tempfile)));
+ rex_file::delete($tempfile);
+ } else {
+ $addon = rex_addon::get('consent_manager');
+ if (!file_exists($addon->getPath('scss/' . $theme))) {
+ return false;
+ }
+ $themefile = $theme;
+ $tempfile = rex_path::addonCache('consent_manager', $theme . '_preview.css');
+ $this->compileScss($addon->getPath('scss/' . $themefile), $tempfile);
+ $css = trim(strval(rex_file::get($tempfile)));
+ rex_file::delete($tempfile);
+ }
+
+ return $css;
+ }
+
+ /**
+ * Compile addon default assets (backend+frontend).
+ */
+ public static function generateDefaultAssets(): void
+ {
+ $addon = rex_addon::get('consent_manager');
+
+ $cmtheme = new self();
+ $cmtheme->compileScss($addon->getPath('scss/consent_manager_backend.scss'), $addon->getPath('assets/consent_manager_backend.css'));
+ $cmtheme->compileScss($addon->getPath('scss/consent_manager_frontend.scss'), $addon->getPath('assets/consent_manager_frontend.css'));
+ }
+
+ /**
+ * Copy assets to assets-Direcotry.
+ */
+ public static function copyAllAssets(): void
+ {
+ $addon = rex_addon::get('consent_manager');
+ rex_dir::copy($addon->getPath('assets'), $addon->getAssetsPath());
+ }
+
+ /**
+ * Compile theme assets.
+ */
+ public static function generateThemeAssets(string $theme): void
+ {
+ if (0 === strpos($theme, 'project:')) {
+ $addon = rex_addon::get('project');
+ $source = $addon->getPath('consent_manager_themes/' . str_replace('project:', '', $theme));
+ $addon = rex_addon::get('consent_manager');
+ $dest = $addon->getPath('assets/' . str_replace('project:', 'project_', str_replace('.scss', '.css', $theme)));
+ } else {
+ $addon = rex_addon::get('consent_manager');
+ $source = $addon->getPath('scss/' . $theme);
+ $dest = $addon->getPath('assets/' . str_replace('.scss', '.css', $theme));
+ }
+ $cmtheme = new self();
+ $cmtheme->compileScss($source, $dest);
+ }
+
+ /**
+ * Get theme info from file.
+ * @return array
+ */
+ public function getThemeInformation(string $theme = '')
+ {
+ if ('' === $theme) {
+ $theme = $this->getTheme();
+ }
+ if (0 === strpos($theme, 'project:')) {
+ $addon = rex_addon::get('project');
+ $themefile = rex_file::get($addon->getPath('consent_manager_themes/' . str_replace('project:', '', $theme)));
+ } else {
+ $addon = rex_addon::get('consent_manager');
+ $themefile = rex_file::get($addon->getPath('scss/' . $theme));
+ }
+ $lines = explode("\n", (string) $themefile);
+
+ $json = '';
+ foreach ($lines as $line) {
+ if (false !== strstr($line, 'Theme: ')) {
+ $json = trim(str_replace('Theme: ', '', $line));
+ }
+ }
+ $themeinfo = (array) json_decode($json, true);
+ return $themeinfo; /** @phpstan-ignore-line */
+ }
+}
diff --git a/lib/consent_manager_util.php b/lib/consent_manager_util.php
index 1e39652..e540819 100644
--- a/lib/consent_manager_util.php
+++ b/lib/consent_manager_util.php
@@ -12,9 +12,11 @@ public static function has_consent($cookieUid): bool
{
if (null !== rex_request::cookie('consent_manager')) {
$cookieData = (array) json_decode(strval(rex_request::cookie('consent_manager')), true);
- foreach ((array) $cookieData['consents'] as $consent) {
- if ($cookieUid === $consent) {
- return true;
+ if (isset($cookieData['consents']) && is_array($cookieData['consents']) && 0 !== count($cookieData['consents'])) {
+ foreach ($cookieData['consents'] as $consent) {
+ if ($cookieUid === $consent) {
+ return true;
+ }
}
}
}
diff --git a/package.yml b/package.yml
index 1f12b19..19c83a6 100644
--- a/package.yml
+++ b/package.yml
@@ -1,5 +1,5 @@
package: consent_manager
-version: "4.0.0beta4"
+version: "4.0.0beta5"
author: "Friends Of REDAXO"
supportpage: https://redaxo.org/support/community/#slack
@@ -19,6 +19,8 @@ page:
title: "translate:consent_manager_domains"
config:
title: "translate:consent_manager_config"
+ theme:
+ title: "translate:consent_manager_theme"
log:
title: "translate:consent_manager_log"
setup:
@@ -42,6 +44,12 @@ requires:
php:
version: ">=7, <9"
+default_config:
+ hidebodyscrollbar: false
+ outputowncss: false
+ skip_consent: ''
+ theme: false
+
installer_ignore:
- .github
- .gitignore
diff --git a/pages/config.php b/pages/config.php
index f014a3b..c9586df 100644
--- a/pages/config.php
+++ b/pages/config.php
@@ -39,3 +39,8 @@
$fragment->setVar('title', $addon->i18n('consent_manager_config_title'), false);
$fragment->setVar('body', $form->get(), false);
echo $fragment->parse('core/page/section.php');
+
+if ('' !== rex_post('_csrf_token', 'string', '')) {
+ consent_manager_theme::generateDefaultAssets();
+ consent_manager_theme::copyAllAssets();
+}
diff --git a/pages/cookiegroup.php b/pages/cookiegroup.php
index fd3ab2f..d8ffab5 100644
--- a/pages/cookiegroup.php
+++ b/pages/cookiegroup.php
@@ -120,7 +120,7 @@
$db->setWhere('domain != ""');
$db->select('count(*) as count');
$dbresult = $db->execute();
- if ('0' === $dbresult->getValue('count')) {
+ if (0 === (int) $dbresult->getValue('count')) {
echo rex_view::warning($addon->i18n('consent_manager_cookiegroup_nodomain_notice'));
}
diff --git a/pages/domain.php b/pages/domain.php
index f65d3d7..05b9014 100644
--- a/pages/domain.php
+++ b/pages/domain.php
@@ -6,7 +6,6 @@
$id = rex_request('id', 'int', 0);
$func = rex_request('func', 'string');
$csrf = rex_csrf_token::factory('consent_manager_domain');
-$clang_id = (int) str_replace('clang', '', rex_be_controller::getCurrentPagePart(3)); /** @phpstan-ignore-line */
$table = rex::getTable('consent_manager_domain');
$msg = '';
if ('delete' === $func) {
@@ -31,12 +30,12 @@
$field->getValidator()->add('custom', $addon->i18n('consent_manager_domain_malformed_msg'), 'consent_manager_rex_form::validateHostname');
$field = $form->addLinkmapField('privacy_policy');
- $field->setLabel($addon->i18n('consent_manager_domain_privacy_policy'));
- $field->getValidator()->add('notEmpty', $addon->i18n('consent_manager_domain_privacy_policy_empty_msg'));
+ $field->setLabel($addon->i18n('consent_manager_domain_privacy_policy')); /** @phpstan-ignore-line */
+ $field->getValidator()->add('notEmpty', $addon->i18n('consent_manager_domain_privacy_policy_empty_msg')); /** @phpstan-ignore-line */
$field = $form->addLinkmapField('legal_notice');
- $field->setLabel($addon->i18n('consent_manager_domain_legal_notice'));
- $field->getValidator()->add('notEmpty', $addon->i18n('consent_manager_domain_legal_notic_empty_msg'));
+ $field->setLabel($addon->i18n('consent_manager_domain_legal_notice')); /** @phpstan-ignore-line */
+ $field->getValidator()->add('notEmpty', $addon->i18n('consent_manager_domain_legal_notic_empty_msg')); /** @phpstan-ignore-line */
$title = $form->isEditMode() ? $addon->i18n('consent_manager_domain_edit') : $addon->i18n('consent_manager_domain_add');
$content = $form->get();
@@ -50,7 +49,7 @@
echo $msg;
if ($showlist) {
$listDebug = false;
- $sql = 'SELECT id,uid FROM ' . $table;
+ $sql = 'SELECT id, uid FROM ' . $table . ' ORDER BY uid ASC';
$list = rex_list::factory($sql, 100, '', $listDebug);
$list->addParam('page', rex_be_controller::getCurrentPage());
diff --git a/pages/theme.php b/pages/theme.php
new file mode 100644
index 0000000..599a182
--- /dev/null
+++ b/pages/theme.php
@@ -0,0 +1,384 @@
+
+
+getAssetsPath('*.jpg'));
+ $backgroundimage = basename((string) $backgrounds[array_rand($backgrounds)]);
+
+ $cmtheme = new consent_manager_theme($preview);
+ $theme_options = $cmtheme->getThemeInformation();
+ if (count($theme_options) > 0) {
+ $cmstyle = $cmtheme->getCompiledStyle();
+ $cmbox = consent_manager_frontend::getFragment(0, 0, 'consent_manager_box.php');
+ } else {
+ $cmstyle = '';
+ $cmbox = rex_view::error($addon->i18n('error_css_notfound', $preview));
+ }
+ ?>
+
+
+
+
+
+
+
+
+
+
+
+
i18n('theme_name') ?>
+
i18n('theme_description') ?>
+
i18n('theme_type') ?>
+
i18n('theme_style') ?>
+
i18n('theme_scssfile') ?>
+
i18n('theme_autor') ?>
+
' . $addon->i18n('themes_addon') . '
';
+ echo '' . $addon->i18n('themes_addon_info') . '
';
+ $cmtheme = new consent_manager_theme();
+ foreach ($themes as $themefile) {
+ $output = '';
+ $content = '';
+ $class = '';
+ $titleactive = '';
+
+ $themeid = basename(strval($themefile));
+ $theme_options = $cmtheme->getThemeInformation($themeid);
+
+ if (count($theme_options) > 0) {
+ $authorlinks = [];
+ $authors = explode(',', $theme_options['autor']);
+ foreach ($authors as $author) {
+ $url = 'https://github.com/' . str_replace('@', '', trim($author));
+ $authorlinks[] = ''.$author.'';
+ }
+
+ $formElements = [];
+
+ $n = [];
+ $n['field'] = '';
+
+ $n['field'] .= '';
+ $n['field'] .= '' . $addon->i18n('theme_name') . ' ' . $theme_options['name'] . '
';
+ $n['field'] .= '' . $addon->i18n('theme_description') . ' ' . $theme_options['description'] . '
';
+ $n['field'] .= '' . $addon->i18n('theme_type') . ' ' . $theme_options['type'] . '
';
+ $n['field'] .= '' . $addon->i18n('theme_style') . ' ' . $theme_options['style'] . '
';
+ $n['field'] .= '' . $addon->i18n('theme_scssfile') . ' ' . $themeid . '
';
+ $n['field'] .= '' . $addon->i18n('theme_autor') . ' ' . implode(', ', $authorlinks) . '
';
+ $n['field'] .= '
';
+
+ $n['field'] .= '';
+ $n['field'] .= '
';
+ $n['field'] .= ' ';
+ $n['field'] .= '
';
+ $n['field'] .= '
' . $addon->i18n('themes_project_addon') . '
';
+ echo '' . $addon->i18n('themes_project_addon_info') . '
';
+ $cmtheme = new consent_manager_theme();
+ foreach ($themes as $themefile) {
+ $output = '';
+ $content = '';
+ $class = '';
+ $titleactive = '';
+
+ $themeid = 'project:' . basename(strval($themefile));
+ $theme_options = $cmtheme->getThemeInformation($themeid);
+ if (count($theme_options) > 0) {
+ $authorlinks = [];
+ $authors = explode(',', $theme_options['autor']);
+ foreach ($authors as $author) {
+ $url = 'https://github.com/' . str_replace('@', '', trim($author));
+ $authorlinks[] = ''.$author.'';
+ }
+
+ $formElements = [];
+
+ $n = [];
+ $n['field'] = '';
+
+ $n['field'] .= '';
+ $n['field'] .= '' . $addon->i18n('theme_name') . ' ' . $theme_options['name'] . '
';
+ $n['field'] .= '' . $addon->i18n('theme_description') . ' ' . $theme_options['description'] . '
';
+ $n['field'] .= '' . $addon->i18n('theme_type') . ' ' . $theme_options['type'] . '
';
+ $n['field'] .= '' . $addon->i18n('theme_style') . ' ' . $theme_options['style'] . '
';
+ $n['field'] .= '' . $addon->i18n('theme_scssfile') . ' ' . $themeid . '
';
+ $n['field'] .= '' . $addon->i18n('theme_autor') . ' ' . implode(', ', $authorlinks) . '
';
+ $n['field'] .= '
';
+
+ $n['field'] .= '';
+ $n['field'] .= '
';
+ $n['field'] .= ' ';
+ $n['field'] .= '
';
+ $n['field'] .= '
+
+
+
diff --git a/scss/consent_manager_backend.scss b/scss/consent_manager_backend.scss
index c5ba898..5d5f8ca 100644
--- a/scss/consent_manager_backend.scss
+++ b/scss/consent_manager_backend.scss
@@ -3,13 +3,105 @@
padding: 5px 15px;
background: #f09000;
color: #fff;
+
i {
margin-right: .5em;
}
}
+
.consent_manager-fake {
label {
cursor: default;
}
+
opacity: .6;
+}
+
+ul.navbar-nav li.active {
+ font-weight: bold;
+}
+
+legend>span {
+ font-size: .7em;
+ font-weight: normal;
+}
+
+p.theme_description span,
+p.theme_selected_description span {
+ display: inline-block;
+ width: 160px;
+}
+
+.cm_modal-overlay {
+ position: fixed;
+ box-sizing: border-box;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, .6);
+ display: none;
+ z-index: 9999;
+}
+
+.cm_modal-overlay.is-open {
+ display: block;
+}
+
+.cm_modal-iframe {
+ border: 0;
+ background-color: #000;
+ transform: scale(1.0, 1.0);
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+}
+
+.cm_modal-button-close {
+ position: absolute;
+ top: 30px;
+ right: 30px;
+ z-index: 99999;
+}
+
+/* iframe thumbnails */
+
+div.thumbnail-container {
+ width: calc(1440px * 0.20);
+ height: calc(900px * 0.20);
+ display: inline-block;
+ overflow: hidden;
+ position: relative;
+ cursor: pointer;
+}
+
+div.thumbnail {
+ width: 1440px;
+ height: 900px;
+ position: relative;
+ -ms-zoom: 0.20;
+ -moz-transform: scale(0.20);
+ -moz-transform-origin: 0 0;
+ -o-transform: scale(0.20);
+ -o-transform-origin: 0 0;
+ -webkit-transform: scale(0.20);
+ -webkit-transform-origin: 0 0;
+}
+
+div.thumbnail:after {
+ content: "";
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+
+div.thumbnail iframe {
+ border: 0;
+ width: 1440px;
+ height: 900px;
+ opacity: 0;
+ transition: all 300ms ease-in-out;
}
\ No newline at end of file
diff --git a/scss/consent_manager_frontend.scss b/scss/consent_manager_frontend.scss
index 3f36e03..273216f 100644
--- a/scss/consent_manager_frontend.scss
+++ b/scss/consent_manager_frontend.scss
@@ -1,10 +1,67 @@
-.consent_manager-background {
+/*
+Theme: {"name": "Standard-Theme „Light“", "description": "Theme „Light“ mit hellem Hintergrund, Auswahl mit Checkboxen, farbneutral gehalten", "type": "light", "style": "Popup zentriert, Checkboxen", "autor": "@IngoWinter, @aeberhard"}
+*/
+
+$font-family: Verdana, Geneva, sans-serif;
+$font-size: 14px;
+
+$overlay-background: rgba(0, 0, 0, .4);
+
+$consent_manager-background: #fefefe;
+
+$title-color: #666;
+$text-color: #444;
+
+$close-background: #666;
+$close-color: #eee;
+$close-hover-background: darken($close-background, 10);
+$close-hover-color: lighten($close-color, 10);
+
+$checkbox-color: #111;
+
+$button-background: #999;
+$button-color: #fff;
+$button-hover-background: darken($button-background, 30);
+$button-hover-color: lighten($button-color, 30);
+
+$link-color: #999;
+$link-hover-color: darken($link-color, 20);
+
+$cookie-title-color: $title-color;
+$cookie-title-background: #d4d4d4;
+$cookie-desc-background: #f9f9f9;
+
+/* Animations */
+
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes fadeOut {
+ 0% {
+ opacity: 1;
+ }
+
+ 100% {
+ opacity: 0;
+ }
+}
+
+/* Overlay */
+
+div.consent_manager-background {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
- background: rgba(0, 0, 0, .6);
+ background: $overlay-background;
display: flex;
flex-direction: column;
justify-content: center;
@@ -15,212 +72,281 @@
width: 100%;
overflow: hidden;
box-sizing: border-box;
+ animation: fadeIn .2s;
}
-.consent_manager-wrapper {
- background: #fff;
+
+/* Wrapper */
+
+div.consent_manager-wrapper {
+ font-family: $font-family;
+ font-size: $font-size;
+ line-height: 1.5em;
+ background: $consent_manager-background;
+ border: 1px solid darken($consent_manager-background, 20);
+ color: $text-color;
position: relative;
- font-size: 15px;
width: 100%;
- max-width: 60em;
- max-height: 100vh;
+ max-width: 65em;
+ max-height: 95vh;
overflow-y: auto;
box-sizing: border-box;
+ animation: fadeIn .2s;
}
-.consent_manager-wrapper-inner {
- padding: 1em;
+
+div.consent_manager-wrapper-inner {
+ padding: 2em;
position: relative;
}
-.consent_manager-hidden {
+
+div.consent_manager-hidden {
display: none;
}
-.consent_manager-detail {
- margin-bottom: 1em;
-}
-.consent_manager-headline {
- font-weight: bold;
- font-size: 1.2em;
- span {
- font-weight: normal;
- }
-}
-.consent_manager-show-details {
- padding: 0 0 1em 0;
- a {
- color: #999;
- text-decoration: none;
- &:hover {
- color: #444;
- text-decoration: none;
- }
- }
-}
-.consent_manager-save-selection,
-.consent_manager-accept-all,
-.consent_manager-accept-none {
- transition: 200ms ease all;
- background: #999;
- border: 1px solid #444;
- color: #fff;
- padding: .5em 2em;
- border-radius: .2em;
- font-weight: bold;
- text-align: center;
- margin: .5em 0;
- display: block;
- &:hover {
- background: #444;
- border-color: #444;
- color: #fff;
- text-decoration: none;
- }
-}
-.consent_manager-sitelinks {
- a {
- display: inline-block;
- margin: .5em .5em .5em 0;
- color: #999;
- text-decoration: none;
- &:hover {
- color: #444;
- text-decoration: none;
- }
-}
-}
-.consent_manager-save-and-close {
- color: #999;
- &:hover {
- color: #444;
- }
-}
+
+/* Close-Button */
.consent_manager-close-box {
position: absolute;
cursor: pointer;
- right: 1em;
+ right: 1.5em;
top: 1em;
display: block;
border-radius: 50% !important;
- border: solid 2px #666;
+ border: solid 2px $close-background;
width: 30px;
height: 30px;
line-height: 28px;
- background-color:#666;
- color:#fff;
+ background-color: $close-background;
+ color: $close-color;
font-family: Arial;
font-size: 18px;
padding: 0;
margin: 0;
+ opacity: .5;
+ transition: .3s ease all;
+
&:hover {
- border-color: #444;
- background-color: #444;
- color: #fff;
+ border-color: $close-hover-background;
+ background-color: $close-hover-background;
+ color: $close-hover-color;
+ opacity: 1;
}
}
-.consent_manager-cookiegroups {
- padding: 1em 0;
+/* Headline */
+
+div.consent_manager-wrapper .consent_manager-headline {
+ margin: 0 0 1em 0;
+ font-weight: bold;
+ font-size: $font-size +4px;
+ color: $title-color;
}
-.consent_manager-cookiegroup {
- & + .consent_manager-cookiegroup-title {
- margin-top: 1em;
- }
+/* Text-Block */
+
+div.consent_manager-wrapper p.consent_manager-text {
+ margin: 0 0 1.5em 0;
}
-.consent_manager-cookiegroup-title {
- background-color: #d4d4d4;
- padding: 5px 10px;
+
+/* Cookie Checkboxen */
+
+div.consent_manager-cookiegroups {
+ margin: 0 0 1.5em 0;
}
-.consent_manager-cookie {
- margin-top: .5em;
- border-left: 2px solid #999;
- padding: .5em .5em .5em 1em;
- background: #f9f9f9;
- span {
- display: block;
+
+div.consent_manager-cookiegroup-checkbox {
+ margin-bottom: 1.5em;
+}
+
+div.consent_manager-cookiegroups label {
+ position: relative;
+ font-weight: bold;
+ font-size: $font-size +1px;
+ color: $checkbox-color;
+ cursor: pointer;
+}
+
+div.consent_manager-cookiegroups label>span {
+ cursor: pointer;
+}
+
+div.consent_manager-cookiegroups label>input[type="checkbox"] {
+ filter: grayscale(1);
+ filter: hue-rotate(275deg);
+ transform: scale(1.6);
+ margin: 0 .7em 0 .2em;
+ cursor: pointer;
+}
+
+.consent_manager-wrapper input[type="checkbox"]:disabled,
+.consent_manager-cookiegroups label>input[type="checkbox"]:disabled+* {
+ opacity: .7;
+ cursor: default;
+}
+
+/* Detail-Link Toggle */
+
+div.consent_manager-show-details {
+ padding: 0 0 1.5em 0;
+
+ a {
+ display: inline-block;
+ line-height: 1.2em;
+ height: 1.4em;
+ cursor: pointer;
+ color: $link-color;
+
+ &:hover {
+ color: $link-hover-color;
+ }
}
}
-.consent_manager-show-details .icon-info-circled:before {
+div.consent_manager-show-details a.icon-info-circled:before {
color: #fff;
- background-color: #666;
+ background-color: $link-color;
+ opacity: .7;
content: "i";
font-family: "Serif";
- font-weight:bold;
+ font-weight: bold;
display: inline-block;
- border-radius: 50% !important;
- line-height:1.0em;
- width:1.0em;
- height:1.0em;
- text-align:center;
- vertical-align:middle;
- margin-right:5px;
+ border-radius: 50%;
+ text-align: center;
+ margin-right: 7px;
+ line-height: 1.4em;
+ height: 1.4em;
+ width: 1.4em;
}
-a.consent_manager-close, #consent_manager-toggle-details {
- cursor:pointer;
-}
+/* Buttons */
-.consent_manager-cookiegroups label > span {
+button.consent_manager-save-selection,
+button.consent_manager-accept-all,
+button.consent_manager-accept-none {
+ transition: .3s ease all;
+ background: $button-background;
+ border: 1px solid $button-background;
+ color: $button-color;
+ padding: .5em 2em;
+ border-radius: 3px;
+ font-size: $font-size;
+ font-weight: bold;
+ text-align: center;
+ display: block;
+ min-height: 3em;
+ width: 100%;
+ margin-bottom: 1.0em;
cursor: pointer;
+
+ &:hover {
+ background: $button-hover-background;
+ border-color: $button-hover-background;
+ color: $button-hover-color;
+ text-decoration: none;
+ }
}
-.consent_manager-cookiegroups label > input[type="checkbox"] {
- filter: grayscale(1);
- transform: scale(1.5);
- margin: 10px;
- cursor: pointer;
+/* Seitenlinks - Datenschutz + Impressum */
+
+div.consent_manager-sitelinks {
+ margin: 1.5em 0 0 0;
+
+ a {
+ display: inline-block;
+ margin: .4em 1em .4em 0;
+ color: $link-color;
+ text-decoration: none;
+ cursor: pointer;
+
+ &:hover {
+ color: $link-hover-color;
+ text-decoration: none;
+ }
+ }
}
-.consent_manager-cookiegroups label > input[type="checkbox"]:disabled {
- cursor: default;
+/* Detail Block */
+
+div.consent_manager-wrapper div.consent_manager-detail {
+ margin-bottom: 3em;
+}
+
+div.consent_manager-wrapper div.consent_manager-detail a {
+ color: $link-color;
+
+ &:hover {
+ color: $link-hover-color;
+ text-decoration: none;
+ }
+}
+
+div.consent_manager-wrapper div.consent_manager-detail div.consent_manager-cookiegroup-title {
+ color: $cookie-title-color;
+ background-color: $cookie-title-background;
+ padding: 5px 11px;
+ margin: 1.5em 0 0 0;
+}
+
+div.consent_manager-wrapper div.consent_manager-cookiegroup-description {
+ border-left: 1px solid $cookie-title-background;
+ padding: 5px 10px;
+ background: $cookie-desc-background;
}
-@media (min-width: 35em) {
- .consent_manager-cookiegroups {
+div.consent_manager-wrapper div.consent_manager-cookie {
+ margin-top: 3px;
+ border-left: 1px solid $cookie-title-background;
+ padding: 5px 10px;
+ background: $cookie-desc-background;
+
+ span {
+ display: block;
+ margin-top: .5em;
+ }
+}
+
+/* Breakpoints */
+
+@media only screen and (min-width: 600px) {
+ div.consent_manager-cookiegroups {
+ padding: 1em 0 0 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
- padding-top: 1em;
+ margin-bottom: 0;
}
- .consent_manager-cookiegroup-checkbox {
- margin: 0 2em 0 0;
+
+ div.consent_manager-cookiegroup-checkbox {
+ margin-left: 1.5em;
+ margin-bottom: 1.0em;
}
- .consent_manager-show-details {
+
+ div.consent_manager-show-details {
text-align: right;
- padding: 1em 2em 1em 0;
+ padding: 1.5em 0 1.5em 0;
}
- .consent_manager-buttons {
+
+ div.consent_manager-buttons {
display: flex;
justify-content: flex-end;
align-items: center;
}
- .consent_manager-sitelinks {
- text-align: right;
- padding-right: 1.5em;
- a {
- margin: .5em 0 .5em 1em;
- }
- }
- .consent_manager-save-selection,
- .consent_manager-accept-all,
- .consent_manager-accept-none {
+
+ button.consent_manager-save-selection,
+ button.consent_manager-accept-all,
+ button.consent_manager-accept-none {
display: inline-block;
margin: 0 0 0 .5em;
+ width: auto;
}
-}
-@media (min-width: 50em) {
- .consent_manager-wrapper-inner {
- padding: 2em;
+ div.consent_manager-sitelinks {
+ margin: 0 0 0 0;
}
- .consent_manager-buttons-sitelinks {
+
+ div.consent_manager-buttons-sitelinks {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row-reverse;
}
- a.consent_manager-close-box {
- right: 1.5em;
- top: 1.5em;
- }
}
diff --git a/scss/consent_manager_frontend_bottom_bar.scss b/scss/consent_manager_frontend_bottom_bar.scss
new file mode 100644
index 0000000..a63f10f
--- /dev/null
+++ b/scss/consent_manager_frontend_bottom_bar.scss
@@ -0,0 +1,362 @@
+/*
+Theme: { "name": "Standard-Theme „Light Bottom-Bar“", "description": "Theme „Light Bottom-Bar“ mit hellem Hintergrund, Auswahl mit Checkboxen, farbneutral gehalten", "type": "light", "style": "Popup unten über die ganze Breite, Checkboxen", "autor": "@IngoWinter, @aeberhard"}
+*/
+
+$font-family: Verdana, Geneva, sans-serif;
+$font-size: 14px;
+
+$overlay-background: rgba(0, 0, 0, .6);
+
+$consent_manager-background: #fefefe;
+
+$title-color: #666;
+$text-color: #444;
+
+$close-background: #666;
+$close-color: #eee;
+$close-hover-background: darken($close-background, 10);
+$close-hover-color: lighten($close-color, 10);
+
+$checkbox-color: #111;
+
+$button-background: #999;
+$button-color: #fff;
+$button-hover-background: darken($button-background, 30);
+$button-hover-color: lighten($button-color, 30);
+
+$link-color: #999;
+$link-hover-color: darken($link-color, 10);
+
+$cookie-title-color: $title-color;
+$cookie-title-background: #d4d4d4;
+$cookie-desc-background: #f9f9f9;
+
+/* Animations */
+
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes fadeOut {
+ 0% {
+ opacity: 1;
+ }
+
+ 100% {
+ opacity: 0;
+ }
+}
+
+/* Overlay */
+
+div.consent_manager-background {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ background: $overlay-background;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 1em;
+ z-index: 999999;
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+ box-sizing: border-box;
+ animation: fadeIn .2s;
+ -webkit-backdrop-filter: grayscale(80%);
+ backdrop-filter: grayscale(80%);
+}
+
+/* Wrapper */
+
+div.consent_manager-wrapper {
+ font-family: $font-family;
+ font-size: $font-size;
+ line-height: 1.5em;
+ background: $consent_manager-background;
+ border: 1px solid darken($consent_manager-background, 20);
+ color: $text-color;
+ position: absolute;
+ bottom:0;
+ right:0;
+ width: 100%;
+ max-width: 100%;
+ max-height: 85vh;
+ overflow-y: auto;
+ box-sizing: border-box;
+ animation: fadeIn .2s;
+
+}
+
+
+div.consent_manager-wrapper-inner {
+ padding: 2em;
+ position: relative;
+ max-width: 1100px;
+ margin: 0 auto;
+}
+
+div.consent_manager-hidden {
+ display: none;
+}
+
+/* Close-Button */
+
+.consent_manager-close-box {
+ position: absolute;
+ cursor: pointer;
+ right: 1.5em;
+ top: 1em;
+ display: block;
+ border-radius: 50% !important;
+ border: solid 2px $close-background;
+ width: 30px;
+ height: 30px;
+ line-height: 28px;
+ background-color: $close-background;
+ color: $close-color;
+ font-family: Arial;
+ font-size: 18px;
+ padding: 0;
+ margin: 0;
+ opacity: .5;
+ transition: .3s ease all;
+
+ &:hover {
+ border-color: $close-hover-background;
+ background-color: $close-hover-background;
+ color: $close-hover-color;
+ opacity: 1;
+ }
+}
+
+/* Headline */
+
+div.consent_manager-wrapper .consent_manager-headline {
+ margin: 0 0 1em 0;
+ font-weight: bold;
+ font-size: $font-size +4px;
+ color: $title-color;
+}
+
+/* Text-Block */
+
+div.consent_manager-wrapper p.consent_manager-text {
+ margin: 0 0 1.5em 0;
+}
+
+/* Cookie Checkboxen */
+
+div.consent_manager-cookiegroups {
+ margin: 0 0 1.5em 0;
+}
+
+div.consent_manager-cookiegroup-checkbox {
+ margin-bottom: 1.5em;
+}
+
+div.consent_manager-cookiegroups label {
+ position: relative;
+ font-weight: bold;
+ font-size: $font-size +1px;
+ color: $checkbox-color;
+ cursor: pointer;
+}
+
+div.consent_manager-cookiegroups label>span {
+ cursor: pointer;
+}
+
+div.consent_manager-cookiegroups label>input[type="checkbox"] {
+ filter: grayscale(1);
+ filter: hue-rotate(275deg);
+ transform: scale(1.6);
+ margin: 0 .7em 0 .2em;
+ cursor: pointer;
+}
+
+.consent_manager-wrapper input[type="checkbox"]:disabled,
+.consent_manager-cookiegroups label>input[type="checkbox"]:disabled+* {
+ opacity: .7;
+ cursor: default;
+}
+
+/* Detail-Link Toggle */
+
+div.consent_manager-show-details {
+ padding: 0 0 1.5em 0;
+
+ a {
+ display: inline-block;
+ line-height: 1.2em;
+ height: 1.4em;
+ cursor: pointer;
+ color: $link-color;
+
+ &:hover {
+ color: $link-hover-color;
+ }
+ }
+}
+
+div.consent_manager-show-details a.icon-info-circled:before {
+ color: #fff;
+ background-color: $link-color;
+ opacity: .7;
+ content: "i";
+ font-family: "Serif";
+ font-weight: bold;
+ display: inline-block;
+ border-radius: 50%;
+ text-align: center;
+ margin-right: 7px;
+ line-height: 1.4em;
+ height: 1.4em;
+ width: 1.4em;
+}
+
+/* Buttons */
+
+button.consent_manager-save-selection,
+button.consent_manager-accept-all,
+button.consent_manager-accept-none {
+ transition: .3s ease all;
+ background: $button-background;
+ border: 1px solid $button-background;
+ color: $button-color;
+ padding: .5em 2em;
+ border-radius: 3px;
+ font-size: $font-size;
+ font-weight: bold;
+ text-align: center;
+ display: block;
+ min-height: 3em;
+ width: 100%;
+ margin-bottom: 1.0em;
+ cursor: pointer;
+
+ &:hover {
+ background: $button-hover-background;
+ border-color: $button-hover-background;
+ color: $button-hover-color;
+ text-decoration: none;
+ }
+}
+
+/* Seitenlinks - Datenschutz + Impressum */
+
+div.consent_manager-sitelinks {
+ margin: 1.5em 0 0 0;
+
+ a {
+ display: inline-block;
+ margin: .4em 1em .4em 0;
+ color: $link-color;
+ text-decoration: none;
+ cursor: pointer;
+
+ &:hover {
+ color: $link-hover-color;
+ text-decoration: none;
+ }
+ }
+}
+
+/* Detail Block */
+
+div.consent_manager-wrapper div.consent_manager-detail {
+ margin-bottom: 3em;
+}
+
+div.consent_manager-wrapper div.consent_manager-detail a {
+ color: $link-color;
+
+ &:hover {
+ color: $link-hover-color;
+ text-decoration: none;
+ }
+}
+
+div.consent_manager-wrapper div.consent_manager-detail div.consent_manager-cookiegroup-title {
+ color: $cookie-title-color;
+ background-color: $cookie-title-background;
+ padding: 5px 11px;
+ margin: 1.5em 0 0 0;
+}
+
+div.consent_manager-wrapper div.consent_manager-cookiegroup-description {
+ border-left: 1px solid $cookie-title-background;
+ padding: 5px 10px;
+ background: $cookie-desc-background;
+}
+
+div.consent_manager-wrapper div.consent_manager-cookie {
+ margin-top: 3px;
+ border-left: 1px solid $cookie-title-background;
+ padding: 5px 10px;
+ background: $cookie-desc-background;
+
+ span {
+ display: block;
+ margin-top: .5em;
+ }
+}
+
+/* Breakpoints */
+
+@media only screen and (min-width: 600px) {
+ div.consent_manager-cookiegroups {
+ padding: 1em 0 0 0;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ margin-bottom: 0;
+ }
+
+ div.consent_manager-cookiegroup-checkbox {
+ margin-left: 1.5em;
+ margin-bottom: 1.0em;
+ }
+
+ div.consent_manager-show-details {
+ text-align: right;
+ padding: 1.5em 0 1.5em 0;
+ text-align: left !important;
+ margin-top: -4em !important;
+ }
+
+ div.consent_manager-buttons {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ }
+
+ button.consent_manager-save-selection,
+ button.consent_manager-accept-all,
+ button.consent_manager-accept-none {
+ display: inline-block;
+ margin: 0 0 0 .5em;
+ width: auto;
+ }
+
+ div.consent_manager-sitelinks {
+ margin: 0 0 0 0;
+ }
+
+ div.consent_manager-buttons-sitelinks {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-direction: row-reverse;
+ }
+}
\ No newline at end of file
diff --git a/scss/consent_manager_frontend_bottom_right.scss b/scss/consent_manager_frontend_bottom_right.scss
new file mode 100644
index 0000000..16e245b
--- /dev/null
+++ b/scss/consent_manager_frontend_bottom_right.scss
@@ -0,0 +1,358 @@
+/*
+Theme: {"name": "Standard-Theme „Light Bottom-Right“", "description": "Theme „Light Bottom-Right“ mit hellem Hintergrund, Auswahl mit Checkboxen, farbneutral gehalten", "type": "light", "style": "Popup unten rechts, Checkboxen", "autor": "@IngoWinter, @aeberhard"}
+*/
+
+$font-family: Verdana, Geneva, sans-serif;
+$font-size: 14px;
+
+$overlay-background: rgba(0, 0, 0, .6);
+
+$consent_manager-background: #fefefe;
+
+$title-color: #666;
+$text-color: #444;
+
+$close-background: #666;
+$close-color: #eee;
+$close-hover-background: darken($close-background, 10);
+$close-hover-color: lighten($close-color, 10);
+
+$checkbox-color: #111;
+
+$button-background: #999;
+$button-color: #fff;
+$button-hover-background: darken($button-background, 30);
+$button-hover-color: lighten($button-color, 30);
+
+$link-color: #999;
+$link-hover-color: darken($link-color, 10);
+
+$cookie-title-color: $title-color;
+$cookie-title-background: #d4d4d4;
+$cookie-desc-background: #f9f9f9;
+
+/* Animations */
+
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes fadeOut {
+ 0% {
+ opacity: 1;
+ }
+
+ 100% {
+ opacity: 0;
+ }
+}
+
+/* Overlay */
+
+div.consent_manager-background {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ background: $overlay-background;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 1em;
+ z-index: 999999;
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+ box-sizing: border-box;
+ animation: fadeIn .2s;
+ -webkit-backdrop-filter: grayscale(60%);
+ backdrop-filter: grayscale(60%);
+}
+
+/* Wrapper */
+
+div.consent_manager-wrapper {
+ font-family: $font-family;
+ font-size: $font-size;
+ line-height: 1.5em;
+ background: $consent_manager-background;
+ border: 1px solid darken($consent_manager-background, 20);
+ color: $text-color;
+ position: absolute;
+ bottom:0;
+ right:0;
+ width: 100%;
+ max-width: 620px;
+ max-height: 85vh;
+ overflow-y: auto;
+ box-sizing: border-box;
+ animation: fadeIn .2s;
+
+}
+
+
+div.consent_manager-wrapper-inner {
+ padding: 2em;
+ position: relative;
+}
+
+div.consent_manager-hidden {
+ display: none;
+}
+
+/* Close-Button */
+
+.consent_manager-close-box {
+ position: absolute;
+ cursor: pointer;
+ right: 1.5em;
+ top: 1em;
+ display: block;
+ border-radius: 50% !important;
+ border: solid 2px $close-background;
+ width: 30px;
+ height: 30px;
+ line-height: 28px;
+ background-color: $close-background;
+ color: $close-color;
+ font-family: Arial;
+ font-size: 18px;
+ padding: 0;
+ margin: 0;
+ opacity: .5;
+ transition: .3s ease all;
+
+ &:hover {
+ border-color: $close-hover-background;
+ background-color: $close-hover-background;
+ color: $close-hover-color;
+ opacity: 1;
+ }
+}
+
+/* Headline */
+
+div.consent_manager-wrapper .consent_manager-headline {
+ margin: 0 0 1em 0;
+ font-weight: bold;
+ font-size: $font-size +4px;
+ color: $title-color;
+}
+
+/* Text-Block */
+
+div.consent_manager-wrapper p.consent_manager-text {
+ margin: 0 0 1.5em 0;
+}
+
+/* Cookie Checkboxen */
+
+div.consent_manager-cookiegroups {
+ margin: 0 0 1.5em 0;
+}
+
+div.consent_manager-cookiegroup-checkbox {
+ margin-bottom: 1.5em;
+}
+
+div.consent_manager-cookiegroups label {
+ position: relative;
+ font-weight: bold;
+ font-size: $font-size +1px;
+ color: $checkbox-color;
+ cursor: pointer;
+}
+
+div.consent_manager-cookiegroups label>span {
+ cursor: pointer;
+}
+
+div.consent_manager-cookiegroups label>input[type="checkbox"] {
+ filter: grayscale(1);
+ filter: hue-rotate(275deg);
+ transform: scale(1.6);
+ margin: 0 .7em 0 .2em;
+ cursor: pointer;
+}
+
+.consent_manager-wrapper input[type="checkbox"]:disabled,
+.consent_manager-cookiegroups label>input[type="checkbox"]:disabled+* {
+ opacity: .7;
+ cursor: default;
+}
+
+/* Detail-Link Toggle */
+
+div.consent_manager-show-details {
+ padding: 0 0 1.5em 0;
+
+ a {
+ display: inline-block;
+ line-height: 1.2em;
+ height: 1.4em;
+ cursor: pointer;
+ color: $link-color;
+
+ &:hover {
+ color: $link-hover-color;
+ }
+ }
+}
+
+div.consent_manager-show-details a.icon-info-circled:before {
+ color: #fff;
+ background-color: $link-color;
+ opacity: .7;
+ content: "i";
+ font-family: "Serif";
+ font-weight: bold;
+ display: inline-block;
+ border-radius: 50%;
+ text-align: center;
+ margin-right: 7px;
+ line-height: 1.4em;
+ height: 1.4em;
+ width: 1.4em;
+}
+
+/* Buttons */
+
+button.consent_manager-save-selection,
+button.consent_manager-accept-all,
+button.consent_manager-accept-none {
+ transition: .3s ease all;
+ background: $button-background;
+ border: 1px solid $button-background;
+ color: $button-color;
+ padding: .5em 2em;
+ border-radius: 3px;
+ font-size: $font-size;
+ font-weight: bold;
+ text-align: center;
+ display: block;
+ min-height: 3em;
+ width: 100%;
+ margin-bottom: 1.0em;
+ cursor: pointer;
+
+ &:hover {
+ background: $button-hover-background;
+ border-color: $button-hover-background;
+ color: $button-hover-color;
+ text-decoration: none;
+ }
+}
+
+/* Seitenlinks - Datenschutz + Impressum */
+
+div.consent_manager-sitelinks {
+ margin: 1.5em 0 0 0;
+
+ a {
+ display: inline-block;
+ margin: .4em 1em .4em 0;
+ color: $link-color;
+ text-decoration: none;
+ cursor: pointer;
+
+ &:hover {
+ color: $link-hover-color;
+ text-decoration: none;
+ }
+ }
+}
+
+/* Detail Block */
+
+div.consent_manager-wrapper div.consent_manager-detail {
+ margin-bottom: 3em;
+}
+
+div.consent_manager-wrapper div.consent_manager-detail a {
+ color: $link-color;
+
+ &:hover {
+ color: $link-hover-color;
+ text-decoration: none;
+ }
+}
+
+div.consent_manager-wrapper div.consent_manager-detail div.consent_manager-cookiegroup-title {
+ color: $cookie-title-color;
+ background-color: $cookie-title-background;
+ padding: 5px 11px;
+ margin: 1.5em 0 0 0;
+}
+
+div.consent_manager-wrapper div.consent_manager-cookiegroup-description {
+ border-left: 1px solid $cookie-title-background;
+ padding: 5px 10px;
+ background: $cookie-desc-background;
+}
+
+div.consent_manager-wrapper div.consent_manager-cookie {
+ margin-top: 3px;
+ border-left: 1px solid $cookie-title-background;
+ padding: 5px 10px;
+ background: $cookie-desc-background;
+
+ span {
+ display: block;
+ margin-top: .5em;
+ }
+}
+
+/* Breakpoints */
+
+@media only screen and (min-width: 600px) {
+ div.consent_manager-cookiegroups {
+ padding: 1em 0 0 0;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ margin-bottom: 0;
+ }
+
+ div.consent_manager-cookiegroup-checkbox {
+ margin-left: 1.5em;
+ margin-bottom: 1.0em;
+ }
+
+ div.consent_manager-show-details {
+ text-align: right;
+ padding: 1.5em 0 1.5em 0;
+ }
+
+ div.consent_manager-buttons {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ }
+
+ button.consent_manager-save-selection,
+ button.consent_manager-accept-all,
+ button.consent_manager-accept-none {
+ display: inline-block;
+ margin: 0 0 0 .5em;
+ width: auto;
+ }
+
+ div.consent_manager-sitelinks {
+ margin: 0 0 0 0;
+ }
+
+ div.consent_manager-buttons-sitelinks {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-direction: row-reverse;
+ }
+}
\ No newline at end of file
diff --git a/scss/consent_manager_frontend_dark.scss b/scss/consent_manager_frontend_dark.scss
new file mode 100644
index 0000000..afff103
--- /dev/null
+++ b/scss/consent_manager_frontend_dark.scss
@@ -0,0 +1,352 @@
+/*
+Theme: {"name": "Standard-Theme „Dark“", "description": "Theme „Dark“ mit dunklem Hintergrund, Auswahl mit Checkboxen, relativ farbneutral gehalten", "type": "dark", "style": "Popup zentriert, Checkboxen", "autor": "@IngoWinter, @aeberhard"}
+*/
+
+$font-family: Verdana, Geneva, sans-serif;
+$font-size: 14px;
+
+$overlay-background: rgba(0, 0, 0, .6);
+
+$consent_manager-background: #161a1c;
+
+$title-color: #d8e5ea;
+$text-color: #b3bfc5;
+
+$close-background: #33383c;
+$close-color: #d8e5ea;
+$close-hover-background: lighten($close-background, 10);
+$close-hover-color: lighten($close-color, 10);
+
+$checkbox-color: #d8e5ea;
+
+$button-background: #33383c;
+$button-color: #d8e5ea;
+$button-hover-background: lighten($button-background, 10);
+$button-hover-color: lighten($button-color, 10);
+
+$link-color: #a6c4dd;
+$link-hover-color: darken($link-color, 10);
+
+$cookie-title-color: $title-color;
+$cookie-title-background: #2b3035;
+$cookie-desc-background: #23272a;
+
+/* Animations */
+
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes fadeOut {
+ 0% {
+ opacity: 1;
+ }
+
+ 100% {
+ opacity: 0;
+ }
+}
+
+/* Overlay */
+
+div.consent_manager-background {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ background: $overlay-background;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 1em;
+ z-index: 999999;
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+ box-sizing: border-box;
+ animation: fadeIn .2s;
+}
+
+/* Wrapper */
+
+div.consent_manager-wrapper {
+ font-family: $font-family;
+ font-size: $font-size;
+ line-height: 1.5em;
+ background: $consent_manager-background;
+ border: 1px solid lighten($consent_manager-background, 20);
+ color: $text-color;
+ position: relative;
+ width: 100%;
+ max-width: 65em;
+ max-height: 95vh;
+ overflow-y: auto;
+ box-sizing: border-box;
+ animation: fadeIn .2s;
+}
+
+div.consent_manager-wrapper-inner {
+ padding: 2em;
+ position: relative;
+}
+
+div.consent_manager-hidden {
+ display: none;
+}
+
+/* Close-Button */
+
+.consent_manager-close-box {
+ position: absolute;
+ cursor: pointer;
+ right: 1.5em;
+ top: 1em;
+ display: block;
+ border-radius: 50% !important;
+ border: solid 2px $close-background;
+ width: 30px;
+ height: 30px;
+ line-height: 28px;
+ background-color: $close-background;
+ color: $close-color;
+ font-family: Arial;
+ font-size: 18px;
+ padding: 0;
+ margin: 0;
+ opacity: .5;
+ transition: .3s ease all;
+
+ &:hover {
+ border-color: $close-hover-background;
+ background-color: $close-hover-background;
+ color: $close-hover-color;
+ opacity: 1;
+ }
+}
+
+/* Headline */
+
+div.consent_manager-wrapper .consent_manager-headline {
+ margin: 0 0 1em 0;
+ font-weight: bold;
+ font-size: $font-size +4px;
+ color: $title-color;
+}
+
+/* Text-Block */
+
+div.consent_manager-wrapper p.consent_manager-text {
+ margin: 0 0 1.5em 0;
+}
+
+/* Cookie Checkboxen */
+
+div.consent_manager-cookiegroups {
+ margin: 0 0 1.5em 0;
+}
+
+div.consent_manager-cookiegroup-checkbox {
+ margin-bottom: 1.5em;
+}
+
+div.consent_manager-cookiegroups label {
+ position: relative;
+ font-weight: bold;
+ font-size: $font-size +1px;
+ color: $checkbox-color;
+ cursor: pointer;
+}
+
+div.consent_manager-cookiegroups label>span {
+ cursor: pointer;
+}
+
+div.consent_manager-cookiegroups label>input[type="checkbox"] {
+ filter: grayscale(1);
+ filter: hue-rotate(225deg);
+ transform: scale(1.6);
+ margin: 0 .7em 0 .2em;
+ cursor: pointer;
+}
+
+.consent_manager-wrapper input[type="checkbox"]:disabled,
+.consent_manager-cookiegroups label>input[type="checkbox"]:disabled+* {
+ opacity: .7;
+ cursor: default;
+}
+
+/* Detail-Link Toggle */
+
+div.consent_manager-show-details {
+ padding: 0 0 1.5em 0;
+
+ a {
+ display: inline-block;
+ line-height: 1.2em;
+ height: 1.4em;
+ cursor: pointer;
+ color: $link-color;
+
+ &:hover {
+ color: $link-hover-color;
+ }
+ }
+}
+
+div.consent_manager-show-details a.icon-info-circled:before {
+ color: $consent_manager-background;
+ background-color: $link-color;
+ opacity: .7;
+ content: "i";
+ font-family: "Serif";
+ font-weight: bold;
+ display: inline-block;
+ border-radius: 50%;
+ text-align: center;
+ margin-right: 7px;
+ line-height: 1.4em;
+ height: 1.4em;
+ width: 1.4em;
+}
+
+/* Buttons */
+
+button.consent_manager-save-selection,
+button.consent_manager-accept-all,
+button.consent_manager-accept-none {
+ transition: .3s ease all;
+ background: $button-background;
+ border: 1px solid $button-background;
+ color: $button-color;
+ padding: .5em 2em;
+ border-radius: 3px;
+ font-size: $font-size;
+ font-weight: bold;
+ text-align: center;
+ display: block;
+ min-height: 3em;
+ width: 100%;
+ margin-bottom: 1.0em;
+ cursor: pointer;
+
+ &:hover {
+ background: $button-hover-background;
+ border-color: $button-hover-background;
+ color: $button-hover-color;
+ text-decoration: none;
+ }
+}
+
+/* Seitenlinks - Datenschutz + Impressum */
+
+div.consent_manager-sitelinks {
+ margin: 1.5em 0 0 0;
+
+ a {
+ display: inline-block;
+ margin: .4em 1em .4em 0;
+ color: $link-color;
+ text-decoration: none;
+ cursor: pointer;
+
+ &:hover {
+ color: $link-hover-color;
+ text-decoration: none;
+ }
+ }
+}
+
+/* Detail Block */
+
+div.consent_manager-wrapper div.consent_manager-detail {
+ margin-bottom: 3em;
+}
+
+div.consent_manager-wrapper div.consent_manager-detail a {
+ color: $link-color;
+
+ &:hover {
+ color: $link-hover-color;
+ text-decoration: none;
+ }
+}
+
+div.consent_manager-wrapper div.consent_manager-detail div.consent_manager-cookiegroup-title {
+ color: $cookie-title-color;
+ background-color: $cookie-title-background;
+ padding: 5px 11px;
+ margin: 1.5em 0 0 0;
+}
+
+div.consent_manager-wrapper div.consent_manager-cookiegroup-description {
+ border-left: 1px solid $cookie-title-background;
+ padding: 5px 10px;
+ background: $cookie-desc-background;
+}
+
+div.consent_manager-wrapper div.consent_manager-cookie {
+ margin-top: 3px;
+ border-left: 1px solid $cookie-title-background;
+ padding: 5px 10px;
+ background: $cookie-desc-background;
+
+ span {
+ display: block;
+ margin-top: .5em;
+ }
+}
+
+/* Breakpoints */
+
+@media only screen and (min-width: 600px) {
+ div.consent_manager-cookiegroups {
+ padding: 1em 0 0 0;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ margin-bottom: 0;
+ }
+
+ div.consent_manager-cookiegroup-checkbox {
+ margin-left: 1.5em;
+ margin-bottom: 1.0em;
+ }
+
+ div.consent_manager-show-details {
+ text-align: right;
+ padding: 1.5em 0 1.5em 0;
+ }
+
+ div.consent_manager-buttons {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ }
+
+ button.consent_manager-save-selection,
+ button.consent_manager-accept-all,
+ button.consent_manager-accept-none {
+ display: inline-block;
+ margin: 0 0 0 .5em;
+ width: auto;
+ }
+
+ div.consent_manager-sitelinks {
+ margin: 0 0 0 0;
+ }
+
+ div.consent_manager-buttons-sitelinks {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-direction: row-reverse;
+ }
+}
diff --git a/scss/consent_manager_frontend_theme_olien_dark.scss b/scss/consent_manager_frontend_theme_olien_dark.scss
new file mode 100644
index 0000000..a3c258d
--- /dev/null
+++ b/scss/consent_manager_frontend_theme_olien_dark.scss
@@ -0,0 +1,404 @@
+/*
+Theme: {"name": "„Olien's Dark Theme“", "description": "„Olien's Dark Theme“ mit dunklem Hintergrund, Auswahl mit Switches, Blurry Webseite, Highlight-Color ist grün", "type": "dark", "style": "Popup zentriert, Switches", "autor": "@olien"}
+*/
+
+$font-family: Verdana, Geneva, sans-serif;
+$font-size: 13px;
+
+$overlay-background: rgba(0, 0, 0, .5);
+
+$consent_manager-background: #2a2a2a;
+
+$title-color: #666;
+$text-color: #fff;
+
+$close-background: #666;
+$close-color: #eee;
+$close-hover-background: darken($close-background, 10);
+$close-hover-color: lighten($close-color, 10);
+
+$checkbox-color: #111;
+
+$button-background: #16a085;
+$button-color: #fff;
+$button-hover-background: darken($button-background, 10);
+$button-hover-color: lighten($button-color, 30);
+
+$link-color: #16a085;
+$link-hover-color: darken($link-color, 10);
+
+$cookie-title-color: $text-color;
+$cookie-title-background: #16a085;
+$cookie-desc-background: #f9f9f9;
+
+/* Animations */
+
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes fadeOut {
+ 0% {
+ opacity: 1;
+ }
+
+ 100% {
+ opacity: 0;
+ }
+}
+
+/* Overlay */
+
+div.consent_manager-background {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ background: $overlay-background;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 1em;
+ z-index: 999999;
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+ box-sizing: border-box;
+ -webkit-backdrop-filter: blur(10px);
+ backdrop-filter: blur(10px);
+}
+
+/* Wrapper */
+
+div.consent_manager-wrapper {
+ font-family: $font-family;
+ font-size: $font-size;
+ line-height: 1.65;
+ background: $consent_manager-background;
+ border: 1px solid lighten($consent_manager-background, 10);
+ color: $text-color;
+ position: relative;
+ width: 100%;
+ max-width: 65em;
+ max-height: 95vh;
+ overflow-y: auto;
+ box-sizing: border-box;
+ animation: fadeIn .2s;
+}
+
+div.consent_manager-wrapper-inner {
+ padding: 24px;
+ position: relative;
+}
+
+div.consent_manager-hidden {
+ display: none;
+}
+
+/* Close-Button */
+
+.consent_manager-close-box {
+ border: 0;
+ position: absolute;
+ right: 20px;
+ top: 20px;
+ display: inline-block;
+ width: 30px;
+ height: 30px;
+ display: inline-block;
+ background-color: $consent_manager-background;
+ text-indent: -9999px;
+ color: $text-color;
+ cursor: pointer;
+
+ &::before,
+ &::after {
+ content: " ";
+ position: absolute;
+ display: block;
+ background-color: $text-color;
+ width: 3px;
+ left: 13px;
+ top: 7px;
+ bottom: 7px;
+ }
+
+ &::before {
+ transform: rotate(45deg);
+ }
+
+ &::after {
+ transform: rotate(-45deg);
+ }
+
+ &:hover {
+
+ &::before,
+ &::after {
+ transition: .2s ease all;
+ background: $link-color;
+ cursor: pointer;
+ }
+ }
+}
+
+/* Headline */
+
+div.consent_manager-wrapper .consent_manager-headline {
+ margin: 0 0 1em 0;
+ font-weight: bold;
+ font-size: $font-size +3px;
+ color: $text-color;
+}
+
+/* Text-Block */
+
+div.consent_manager-wrapper p.consent_manager-text {
+ margin: 0 0 1.5em 0;
+ text-align: justify;
+}
+
+/* Cookie Checkboxen/Switches */
+
+div.consent_manager-cookiegroups {
+ margin: 0 0 1.5em 0;
+}
+
+.consent_manager-cookiegroup-checkbox {
+ margin-bottom: 1.5em;
+
+ span {
+ font-size: $font-size -2px;
+ line-height: 1.85;
+ vertical-align: top;
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
+}
+
+.consent_manager-wrapper [type="checkbox"] {
+ -webkit-appearance: none;
+ -webkit-tap-highlight-color: transparent;
+ position: relative;
+ border: 0;
+ outline: 0;
+ cursor: pointer;
+ display: inline-block;
+ width: 40px;
+ background: transparent;
+}
+
+.consent_manager-wrapper [type="checkbox"]:after {
+ content: '';
+ width: 32px;
+ height: 16px;
+ display: inline-block;
+ background: lighten($consent_manager-background, 20);
+ border-radius: 8px;
+ clear: both;
+}
+
+.consent_manager-wrapper [type="checkbox"]:before {
+ content: '';
+ width: 16px;
+ height: 16px;
+ display: block;
+ position: absolute;
+ left: 0;
+ top: 0;
+ border-radius: 50%;
+ background: rgb(255, 255, 255);
+ box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
+}
+
+.consent_manager-wrapper [type="checkbox"]:checked:before {
+ left: 16px;
+ box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.6);
+}
+
+.consent_manager-wrapper [type="checkbox"]:checked:after {
+ background: $button-background;
+}
+
+.consent_manager-wrapper [type="checkbox"],
+.consent_manager-wrapper [type="checkbox"]:before,
+.consent_manager-wrapper [type="checkbox"]:after,
+.consent_manager-wrapper [type="checkbox"]:checked:before,
+.consent_manager-wrapper [type="checkbox"]:checked:after {
+ transition: ease .2s;
+ -webkit-transition: ease .2s;
+ -moz-transition: ease .2s;
+ -o-transition: ease .2s;
+}
+
+.consent_manager-wrapper input[type="checkbox"]:disabled,
+.consent_manager-cookiegroups label>input[type="checkbox"]:disabled+* {
+ opacity: .7;
+ cursor: default;
+}
+
+/* Detail-Link Toggle */
+
+div.consent_manager-show-details {
+ padding: 0 0 1.5em 0;
+}
+
+.consent_manager-show-details {
+ a {
+ color: $text-color;
+ text-decoration: none;
+ cursor: pointer;
+
+ &:hover {
+ color: $link-color;
+ text-decoration: none;
+ }
+ }
+}
+
+div.consent_manager-show-details .icon-info-circled:before {
+ display: none;
+}
+
+/* Buttons */
+
+button.consent_manager-save-selection,
+button.consent_manager-accept-all,
+button.consent_manager-accept-none {
+ transition: .2s ease all;
+ background: $button-background;
+ border: 1px solid $button-background;
+ color: $button-color;
+ padding: .5em 2em;
+ border-radius: 3px;
+ font-size: $font-size;
+ font-weight: bold;
+ text-align: center;
+ display: block;
+ min-height: 3em;
+ width: 100%;
+ margin-bottom: 1.0em;
+ cursor: pointer;
+
+ &:hover {
+ background: $button-hover-background;
+ border-color: $button-hover-background;
+ color: $button-hover-color;
+ text-decoration: none;
+ }
+}
+
+/* Seitenlinks - Datenschutz + Impressum */
+
+.consent_manager-sitelinks {
+ margin: 1.5em 0 0 0;
+ cursor: pointer;
+
+ a {
+ display: inline-block;
+ margin: .4em 1em .4em 0;
+ color: $text-color;
+ text-decoration: none;
+
+ &:hover {
+ color: $link-color;
+ text-decoration: none;
+ }
+ }
+}
+
+/* Detail Block */
+
+div.consent_manager-wrapper div.consent_manager-detail {
+ margin-bottom: 3em;
+}
+
+div.consent_manager-wrapper div.consent_manager-detail a {
+ color: $link-color;
+}
+
+div.consent_manager-wrapper div.consent_manager-detail a:hover {
+ color: $link-hover-color;
+ text-decoration: none;
+}
+
+div.consent_manager-wrapper div.consent_manager-detail div.consent_manager-cookiegroup-title {
+ color: $cookie-title-color;
+ background-color: $cookie-title-background;
+ padding: 5px 11px;
+ margin: 1.5em 0 0 0;
+}
+
+div.consent_manager-wrapper div.consent_manager-cookiegroup-description {
+ border-left: 1px solid $cookie-title-background;
+ padding: 5px 10px;
+ background: lighten($consent_manager-background, 5);
+}
+
+div.consent_manager-wrapper div.consent_manager-cookie {
+ margin-top: 3px;
+ border-left: 1px solid $cookie-title-background;
+ padding: 5px 10px;
+ background: lighten($consent_manager-background, 5);
+
+ span {
+ display: block;
+ }
+}
+
+/* Breakpoints */
+
+@media only screen and (min-width: 600px) {
+ div.consent_manager-cookiegroups {
+ padding: 1em 0 0 0;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ margin-bottom: 0;
+ }
+
+ div.consent_manager-cookiegroup-checkbox {
+ margin-left: 1.5em;
+ margin-bottom: 1.0em;
+ }
+
+ div.consent_manager-show-details {
+ text-align: right;
+ padding: 1.5em 0 1.5em 0;
+ }
+
+ div.consent_manager-buttons {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ }
+
+ button.consent_manager-save-selection,
+ button.consent_manager-accept-all,
+ button.consent_manager-accept-none {
+ display: inline-block;
+ margin: 0 0 0 .5em;
+ width: auto;
+ }
+
+ div.consent_manager-sitelinks {
+ margin: 0 0 0 0;
+ }
+
+ div.consent_manager-buttons-sitelinks {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-direction: row-reverse;
+ }
+}