Common CSS for privacy manager

In order to help facilitate your organization's customization of its privacy managers, Sourcepoint has aggregated some commonly used custom CSS by our clients. These customizations can be added to the custom CSS section of the GDPR TCF, GDPR Standard, and U.S. Privacy privacy manager builders. 

• Add scrolling for mobile devices
• Prevent sizing changes when toggling between sections (GDPR TCF)
• Edit color of privacy manager icons

Add scrolling for mobile devices

For mobile phone support, your organization may want the privacy manager window to have scrolling capabilities. This customization is useful for older generations of iPhones and for when a site is viewed on a mobile device in a landscape orientation. Add the custom CSS below to the custom CSS section of your privacy manager builder to support scrolling.

@media screen and (max-width: 500px), screen and (max-height: 500px) {  .sp_message_container .sp_message {    margin: initial;    max-height: initial;    width: initial;    height: initial;    overflow: scroll;    max-width: initial;  }  .sp_message .sp_message_panel {    margin-top: 30px;  }}

Prevent sizing changes when toggling between sections (GDPR TCF)

By default, there are no maximum or minimum heights for the stack area of a GDPR TCF privacy manager. This default means that navigating between a Purposes tab and a Features tab can change the size of the privacy manager modal.

To prevent sizing changes when toggling between these sections, add the following custom CSS to the privacy manager builder. 

.pm-purposes {
    min-height: 300px !important;
    max-height: 300px !important;
    overflow-y: scroll !important;
}
.pm-features {
    min-height: 300px !important;
    max-height: 300px !important;
    overflow-y: scroll !important;
}
.stack-row {
    margin-right:8px !important;
}
.pm-type-toggle {
    margin-right: 15px !important;
}

Edit color of privacy manager icons

Privacy manager icons allow end-users navigating your privacy manager to quickly understand the categorization of custom purposes, Apple data brokers, custom vendors, vendor labels. The table below outlines the css classes associated with each icon:

.legend-key {background: #D76AD2 !important;}
.is-custom-vendor-label-1 {background: #a23f0a !important;}
.is-custom-vendor-label-2 {background: #88a78a !important;}
.is-custom-vendor-label-3 {background: #f73b41 !important;}
.apple-broker {background: #12d5c7 !important;}