Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(spotify-web): various unthemed elements #879

Open
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

Papweer
Copy link

@Papweer Papweer commented May 9, 2024

🔧 What does this fix? 🔧

Themes the previously unthemed Accept Cookies banner, vendors info popup and the signup banner. Also fixes the left sidebar background on the main page being unthemed.
fixes #834 and also fixes #826

🗒 Checklist 🗒

  • I have read and followed Catppuccin's contributing guidelines.
  • I have updated the version appropriately in the ==UserStyle== header of the catppuccin.user.css file.

@Papweer Papweer requested a review from Tnixc as a code owner May 9, 2024 13:34
@github-actions github-actions bot added the spotify-web Spotify Web label May 9, 2024
@Papweer Papweer changed the title Some fixes for Spotify-Web Feat Added theming for Cookie Banner, Vendors Info and Signup Banner. Also Fixed Background of Left Sidebar. May 9, 2024
@Papweer Papweer changed the title Feat Added theming for Cookie Banner, Vendors Info and Signup Banner. Also Fixed Background of Left Sidebar. feat: Added theming for Cookie Banner, Vendors Info and Signup Banner. Also Fixed Background of Left Sidebar. May 9, 2024
@uncenter
Copy link
Member

uncenter commented May 9, 2024

Please follow the https://www.conventionalcommits.org/en/v1.0.0/ format for titling your pull request. In this case, the type of change is a fix, the scope should be spotify-web, and the body should be a very succinct summary of your changes.

@Papweer Papweer changed the title feat: Added theming for Cookie Banner, Vendors Info and Signup Banner. Also Fixed Background of Left Sidebar. fix(spotify-web): Added theming for Cookie Banner, Vendors Info and Signup Banner. Also Fixed Background of Left Sidebar. May 12, 2024
@uncenter uncenter changed the title fix(spotify-web): Added theming for Cookie Banner, Vendors Info and Signup Banner. Also Fixed Background of Left Sidebar. fix(spotify-web): various unthemed elements Jun 6, 2024
Comment on lines +301 to +372
// Cookie Banner
#onetrust-banner-sdk {
background-color: @base !important;
color: @text !important;
}
#onetrust-policy-text, .ot-dpd-title, .onetrust-policy-title, .ot-text-bold {
color: @text !important;
}
.ot-dpd-desc, .ot-link-btn {
color: @text !important;
}
#onetrust-consent-sdk #onetrust-policy-title {
color: @text !important;
}
#onetrust-banner-sdk button {
color: @text !important;
}
#onetrust-pc-btn-handler {
background-color: @base !important;
}
// Cookie Settings
#onetrust-consent-sdk #onetrust-pc-sdk,
.ot-acc-txt, .ot-acc-grpdesc{
background-color: @base !important;
}
#onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-title,
#onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-desc,
#onetrust-consent-sdk #onetrust-pc-sdk h3,
#onetrust-consent-sdk #onetrust-pc-sdk h5,
#onetrust-consent-sdk #onetrust-pc-sdk h4,
#onetrust-consent-sdk #onetrust-pc-sdk h6,
#onetrust-consent-sdk #onetrust-pc-sdk h2,
#onetrust-pc-sdk .ot-always-active,
.ot-acc-txt, .ot-acc-grpdesc,
#onetrust-consent-sdk #onetrust-pc-sdk p{
color: @text !important;
}
#onetrust-pc-sdk .ot-accordion-layout.ot-cat-item {
border-color: @accent-color !important;
}
#onetrust-consent-sdk #onetrust-pc-sdk button:not(#clear-filters-handler):not(.ot-close-icon):not(#filter-btn-handler):not(.ot-remove-objection-handler):not(.ot-obj-leg-btn-handler):not([aria-expanded]):not(.ot-link-btn) {
background-color: @accent-color !important;
border-color: @accent-color !important;
}
#onetrust-pc-sdk .ot-accordion-layout.ot-cat-item {
border-radius: 8px;
}
// Vendors List
#onetrust-consent-sdk #onetrust-pc-sdk .ot-sel-all-hdr span {
color: @text;
}
#onetrust-pc-sdk input[type=text] {
background-color: @mantle !important;
border-color: @accent-color !important;
}
#onetrust-pc-sdk .ot-pc-header,
#onetrust-pc-sdk ul li{
border-bottom-color: @accent-color !important;
border-top-color: @accent-color !important;
}
#ot-ven-lst {
border-top-color: @accent-color !important;
}
.ot-pc-footer {
border-top-color: @accent-color !important;
}
#onetrust-pc-sdk li>button {
border-top-color: @accent-color !important;
}
#onetrust-consent-sdk #onetrust-pc-sdk #ot-sel-blk {
background-color: @base !important;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc @isabelroses I actually themed this for Stack Overflow (

#onetrust-consent-sdk {
#onetrust-banner-sdk {
background-color: @mantle;
&:focus {
outline-color: @surface1;
}
#onetrust-accept-btn-handler,
#onetrust-reject-all-handler {
background-color: @accent-color;
color: @crust;
}
#onetrust-button-group button#onetrust-pc-btn-handler {
background-color: @crust !important;
border-color: @accent-color !important;
color: @accent-color !important;
}
#onetrust-policy-title,
#onetrust-policy-text,
.ot-b-addl-desc,
.ot-dpd-desc,
.ot-dpd-title,
#onetrust-policy-text :not(.onetrust-vendors-list-handler),
.ot-dpd-desc :not(.onetrust-vendors-list-handler),
#banner-options *,
.ot-cat-header,
.ot-optout-signal,
a {
color: @text !important;
}
}
/* Manage cookies popup */
#onetrust-pc-sdk {
background-color: @base;
h3,
h4,
h5,
h6,
p,
#ot-ven-lst .ot-ven-opts p,
#ot-pc-desc,
#ot-pc-title,
.ot-li-title,
.ot-sel-all-hdr span,
#ot-host-lst .ot-host-info,
#ot-fltr-modal #modal-header,
.ot-checkbox label span,
#ot-pc-lst #ot-sel-blk p,
#ot-pc-lst #ot-lst-title h3,
#ot-pc-lst .back-btn-handler p,
#ot-pc-lst .ot-ven-name,
#ot-pc-lst #ot-ven-lst .consent-category,
.ot-leg-btn-container .ot-inactive-leg-btn,
.ot-label-status,
.ot-chkbox label span,
#clear-filters-handler,
.ot-optout-signal {
color: @text;
}
.ot-pc-header {
background-color: @mantle !important;
border-bottom-color: @surface1;
}
.ot-accordion-layout.ot-cat-item {
border-color: @surface1;
}
.ot-pc-footer {
border-top-color: @surface2 !important;
}
button:not(
#clear-filters-handler,
.ot-close-icon,
#filter-btn-handler,
.ot-remove-objection-handler,
.ot-obj-leg-btn-handler,
[aria-expanded],
.ot-link-btn
),
.ot-leg-btn-container .ot-active-leg-btn {
background-color: @accent-color !important;
border-color: @accent-color;
color: @mantle;
}
}
}
), seeing as it looks like a reusable component from across websites maybe we add a global userstyle that includes tweaks like this? Or possibly generate it statically and add @import lines for userstyles that involve websites with the OneTrust cookie consent popup?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ohhh this is interesting. Heres my idea. We create a "common" dir and place commonalities between themes and publish them there. But I'll admit this maybe a bit overkill and just repeating the same style here might be easier.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I definitely don't want to repeat this though. Common isn't a bad idea, I have a userstyle on my Windows machine that applies scrollbar fixes to all websites with regex('*'), could do something similar with the common/ directory.

@uncenter uncenter requested a review from isabelroses June 6, 2024 13:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
spotify-web Spotify Web
Projects
None yet
Development

Successfully merging this pull request may close these issues.

spotify: unthemed elements Spotify unthemed background behind sidebar elements
3 participants