Cookiebot styling met CSS variabelen

CSS Code

css
<style>
  /* COOKIEBOT STYLING */
:root {
  --main_clr: #714B94;
  --secondary_clr: #93C01A;
  --grey_clr: #abb8c3;
  --light_clr: #fff;
  }
  
body {
    #CybotCookiebotDialogHeader {
        background-color: var(--main_clr);
    }

    #CybotCookiebotDialogPoweredbyLink {
        width: 250px;
        background-position: center left !important;
        height: 48px;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='168.601' height='49.74' viewBox='0 0 168.601 49.74'%3E%3Cpath d='M62.316,32.456c4.552,0,6.419.526,8.4,2.278C72.7,36.6,73.7,39.4,73.7,43.37V60.878H65.874V42.493c0-2.857-1.165-3.965-4.025-3.965H55.08V60.878H47.257V32.456Z' transform='translate(-31.736 -21.796)' fill='%23033b40'%3E%3C/path%3E%3Cpath d='M316.635,32.456h7.822V60.878h-15.35c-4.552,0-6.422-.526-8.4-2.278-1.983-1.867-2.976-4.667-2.976-8.636V32.456h7.819V50.722c0,2.569,1.4,4.085,3.738,4.085h7.352Z' transform='translate(-199.944 -21.796)' fill='%2393c01a'%3E%3C/path%3E%3Cpath d='M424.207,38.521h-13.89c-3.5,0-4.32.467-4.32,2.509a2.511,2.511,0,0,0,1.284,2.334c.526.351,1.4.467,3.794.467h4.611c6.243,0,9.805,2.92,9.805,8.114,0,3.387-1.811,6.77-4.376,8.054-1.169.642-3.151.874-6.6.874H398.354V54.8h13.89a18.85,18.85,0,0,0,4.2-.235,2.055,2.055,0,0,0,1.4-2.158,2.656,2.656,0,0,0-1.341-2.449c-.586-.295-1.4-.351-3.387-.351h-4.783c-3.622,0-5.313-.411-7-1.636a8.737,8.737,0,0,1-3.387-7.236,8.688,8.688,0,0,1,3.1-6.829c1.341-1.049,3.092-1.46,6.478-1.46h16.691Z' transform='translate(-267.246 -21.792)' fill='%2393c01a'%3E%3C/path%3E%3Cpath d='M147.838,78.8l7.107-7.107h17.765a10.658,10.658,0,0,0,0-21.316H165.6a3.553,3.553,0,0,1,0-7.107h7.107a17.764,17.764,0,0,1,0,35.529Z' transform='translate(-99.283 -29.059)' fill='%2393c01a'%3E%3C/path%3E%3Cpath d='M165.6,7.107a10.658,10.658,0,0,0,0,21.316h7.107a3.553,3.553,0,0,1,0,7.107H165.6A17.765,17.765,0,0,1,165.6,0h24.871l-7.107,7.107Z' transform='translate(-99.282 0)' fill='%23033b40'%3E%3C/path%3E%3Crect width='7.819' height='7.107' transform='translate(0 0.002)' fill='%23033b40'%3E%3C/rect%3E%3Crect width='7.819' height='28.422' transform='translate(0 10.66)' fill='%23033b40'%3E%3C/rect%3E%3Cpath d='M497.932,103.379c.432,0,.589-.109.589-.407s-.14-.4-.589-.4h-.821v.807Zm-.821,1.677h-.635v-2.98h1.442a1.762,1.762,0,0,1,.916.165l.375.681a.792.792,0,0,1-.579.8c.351.133.5.383.526.863a.865.865,0,0,0,.1.47h-.691l-.021-.056-.032-.158-.025-.224c-.056-.565-.291-.744-.958-.744h-.421Zm-1.821-1.491a2.48,2.48,0,1,0,2.52-2.52,2.508,2.508,0,0,0-2.52,2.52m5.541,0a3.062,3.062,0,1,1-3.011-3.039,3.044,3.044,0,0,1,3.011,3.039' transform='translate(-332.23 -67.51)' fill='%23033b40'%3E%3C/path%3E%3C/svg%3E");
    }

    #CybotCookiebotDialogPoweredbyImage {
        opacity: 0;
    }

    #CybotCookiebotDialog {
        border-radius: 1em;

        .CybotCookiebotScrollContainer {
            border: unset;
        }

        .CookieCard {
            button {
                &::after {
                    content: unset;
                }
            }
        }
    }

    #CybotCookiebotDialogPoweredbyCybot {
        path {
            fill: white;
        }
    }

    #CybotCookiebotDialog,
    #CybotCookiebotDialogBodyUnderlay {
        * {
            font-family: "archivo", "Open Sans", Helvetica, Arial, sans-serif;
        }
    }

    #CybotCookiebotDialogNav {
        .CybotCookiebotDialogNavItemLink {
            &:hover {
                color: var(--secondary_clr);
            }

            &.CybotCookiebotDialogActive {
                color: var(--main_clr);
                border-color: var(--main_clr);
            }
        }
    }

    #CybotCookiebotDialogHeader {
        border-color: var(--grey_clr);
    }

    #CybotCookiebotDialogNav {
        border-color: var(--grey_clr);
    }

    #CybotCookiebotDialogTabContent {
        .CybotCookiebotDialogBodyLevelButtonSlider {
            background-color: var(--grey_clr);
        }

        input {
            &:checked {
                &+.CybotCookiebotDialogBodyLevelButtonSlider {
                    background-color: var(--secondary_clr);
                }
            }
        }
    }

    #CybotCookiebotDialogFooter {

        #CybotCookiebotDialogBodyButtonAccept,
        #CybotCookiebotDialogBodyLevelButtonAccept,
        #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
            background-color: var(--secondary_clr);
            border-color: var(--secondary_clr);
        }

        #CybotCookiebotDialogBodyLevelButtonCustomize,
        #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
        .CybotCookiebotDialogBodyButton {
            border-color: var(--light_clr);
            background-color: var(--light_clr);
            color: var(--secondary_clr);

            .CybotCookiebotDialogArrow {
                display: none;
            }
        }

        .CybotCookiebotDialogBodyButton {
            padding: .75em 1.5em;
            border-radius: 1em;
            border-width: 1px;
            font-weight: 700;
        }

        position: relative;
        margin-top: 3em;
    }
}

/* END COOKIEBOT STYLING */
</style>
Bekijk Snippet