Common CSS Changes

Below is a list of CSS examples that can be used to customize the look and feel of your Cookie Consent dialog/preferences drawer. This CSS MAY be subject to change based on which classes are being utilized. All public classes are listed HERE. 

Note: Customizations and changes to the Cookie Consent dialog may void the Osano "No Fines, No Penalties" Guarantee.

Gray out the background until choice is made

.osano-cm-dialog {
box-shadow: 0 0 0 100vmax rgba(0,0,0,0.66)
}

Hide a button      

.osano-cm-button--type_deny,
.osano-cm-button--type_denyAll {
display: none;
}    

Ensure left alignment of link   

.osano-cm-content__message.osano-cm-message {
display: block
}         

Adjust specific button (can be used on any button by adjusting button--type)

.osano-cm-button--type_accept {
padding: 8px 12px; 
color: #ffffff; 
background-color: #156bc1;
border-radius: 24px; 
border: 1px solid #f800ba;
box-shadow: 0 -2px 0 #00ff6a inset; 
font-size: 16px; 
line-height: 20px; 
font-weight: bold; 
cursor: pointer; 
overflow: hidden; 
outline: none;
}     

Add the shadow to the dialog

.osano-cm-window__dialog {
box-shadow: 10px 10px 20px rgb(50 50 50 / 80%);
min-height: 14rem;
} 

Add custom text to the main message - this will negate the auto-translate feature

.osano-cm-content__message::before {
content: "Your custom message text here. This message is visually injected with CSS and is not selectable, translatable, or accessible as real text.";
visibility: visible;
}
.osano-cm-content__message{ 
max-height: 80px; 
}

Hide existing message text on dialog 

.osano-cm-content__message {
visibility: hidden;
} 

Add text to the beginning of the link - this will negate the auto-translate feature

a.osano-cm-storage-policy.osano-cm-content__link.osano-cm-link::before {
visibility: visible; 
position: inline; 
content: "Read more on our ";
}

Hide the link text

.osano-cm-storage-policy.osano-cm-content__link.osano-cm-link{
visibility: hidden;
}

Add icon

.osano-cm-window__dialog.osano-cm-dialog::before {
background-image: url("https://cdn.osano.com/hubfs/assets/logos/1000w/Indigo%20O%20on%20Transparent-1000px.png");
background-size: 100px 100px;
display: inline-block;
width: 100px;
height: 100px;
content:"";
margin-right: 1rem;
}

Adds icon to Box Dialog Type

.osano-cm-dialog:after {
position: absolute; top: 30px; left: 28px; right: 28px; height: 40px; content: ''; background: url("https://cdn.osano.com/hubfs/assets/logos/1000w/Indigo%20Osano%20on%20Transparent-1000px.png"); background-position: center; background-size: 200px; background-repeat: no-repeat
}

.osano-cm-dialog .osano-cm-content__message { padding: 60px 0px 0 0px; }

Add icon to top of banner

.osano-cm-dialog:after {
position: absolute;
top: 20px;
left: 28px;
right: 28px;
height:30px;
content: '';
background: url("https://cdn.osano.com/hubfs/assets/logos/1000w/Indigo%20Osano%20on%20Transparent-1000px.png");
background-position: center;
background-size: 150px;
background-repeat: no-repeat
}
.osano-cm-content {
padding-top: 40px;
}

Add text to the beginning of dialog

.osano-cm-dialog__content.osano-cm-content::before {
content: "We value your privacy!\A";
color: #FFF;
font-weight: bold;
font-size: 1.5rem;
display: block;
padding-bottom: 1em;
}

Change order of the Banner Buttons

div.osano-cm-dialog__buttons.osano-cm-buttons{
display:flex;
flex-flow: column;
}
.osano-cm-button--type_manage {order:1;}
.osano-cm-button--type_deny,
.osano-cm-button--type_denyAll {order:2;}
.osano-cm-button--type_accept {order:3;}

Change the Font

.osano-cm-info {
font-family: Papyrus;
}
.osano-cm-dialog {
font-family: Papyrus;
}
.osano-cm-view__button {
font-family: Papyrus;
}
.osano-cm-button {
font-family: Papyrus;
}

Font Family Examples: https://www.w3.org/Style/Examples/007/fonts.en.html

Preferences Drawer as a Centered Modal

.osano-cm-info {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50vw;
max-width: 640px;
min-width: 320px;
min-height: 70vh;
max-height: 80vh;
}

Rearrange Elements in the Preferences Drawer list

.osano-cm-list {
display: flex;
flex-flow: column;
}
/* Essential */ .osano-cm-list-item:nth-child(1) { display: block; order: 1 !important; }
/* Marketing */ .osano-cm-list-item:nth-child(2) { display: block; order: 3 !important; }
/* Personalization */ .osano-cm-list-item:nth-child(3) { display: block; order: 4 !important; }
/* Analytics */ .osano-cm-list-item:nth-child(4) { display: block; order: 2 !important; } 
/* Do Not Sell*/ .osano-cm-list-item:nth-child(5) { display: block; order: 5 !important; } 

Hide Do Not Sell from Preferences Drawer

/ Do Not Sell /
.osano-cm-list-item:nth-child(5) {
display: none;
}

Invert toggle directions

.osano-cm-toggle .osano-cm-toggle__switch::after {
left: 100% !important;
transform: translateX(-100%) !important;
}
.osano-cm-toggle .osano-cm-toggle__input:checked + .osano-cm-toggle__switch::after {
left: 0 !important;
transform: translateX(0) !important;
}

Change Cookie Widget color

Cookie outline:

button.osano-cm-window__widget > svg > path:nth-child(1) {
stroke: black !important;
}

Cookie background:

button.osano-cm-window__widget > svg > path:nth-child(2) {
stroke: black !important; / needs to match stroke color from outline */ fill: white !important;
}

Cookie dots:

button.osano-cm-window__widget > svg > g {
fill: black !important;
}

Change order of the link and the popup message

div.osano-cm-dialog__content {
display:flex;
flex-flow: column;
}
.osano-cm-link {
order:1;
}

.osano-cm-content__message { order:2; }