{"action":"closed","issue":{"url":"https://api.github.com/repos/woocommerce/woocommerce/issues/19663","repository_url":"https://api.github.com/repos/woocommerce/woocommerce","labels_url":"https://api.github.com/repos/woocommerce/woocommerce/issues/19663/labels{/name}","comments_url":"https://api.github.com/repos/woocommerce/woocommerce/issues/19663/comments","events_url":"https://api.github.com/repos/woocommerce/woocommerce/issues/19663/events","html_url":"https://github.com/woocommerce/woocommerce/issues/19663","id":312780311,"number":19663,"title":"PhotoSwipe styles with !important in woocommerce.css","user":{"login":"markfinst","id":870284,"avatar_url":"https://avatars2.githubusercontent.com/u/870284?v=4","gravatar_id":"","url":"https://api.github.com/users/markfinst","html_url":"https://github.com/markfinst","followers_url":"https://api.github.com/users/markfinst/followers","following_url":"https://api.github.com/users/markfinst/following{/other_user}","gists_url":"https://api.github.com/users/markfinst/gists{/gist_id}","starred_url":"https://api.github.com/users/markfinst/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/markfinst/subscriptions","organizations_url":"https://api.github.com/users/markfinst/orgs","repos_url":"https://api.github.com/users/markfinst/repos","events_url":"https://api.github.com/users/markfinst/events{/privacy}","received_events_url":"https://api.github.com/users/markfinst/received_events","type":"User","site_admin":false},"labels":[{"id":539248221,"url":"https://api.github.com/repos/woocommerce/woocommerce/labels/has-pr","name":"has-pr","color":"0072BB","default":false}],"state":"closed","locked":false,"assignee":{"login":"mikejolley","id":90977,"avatar_url":"https://avatars2.githubusercontent.com/u/90977?v=4","gravatar_id":"","url":"https://api.github.com/users/mikejolley","html_url":"https://github.com/mikejolley","followers_url":"https://api.github.com/users/mikejolley/followers","following_url":"https://api.github.com/users/mikejolley/following{/other_user}","gists_url":"https://api.github.com/users/mikejolley/gists{/gist_id}","starred_url":"https://api.github.com/users/mikejolley/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mikejolley/subscriptions","organizations_url":"https://api.github.com/users/mikejolley/orgs","repos_url":"https://api.github.com/users/mikejolley/repos","events_url":"https://api.github.com/users/mikejolley/events{/privacy}","received_events_url":"https://api.github.com/users/mikejolley/received_events","type":"User","site_admin":false},"assignees":[{"login":"mikejolley","id":90977,"avatar_url":"https://avatars2.githubusercontent.com/u/90977?v=4","gravatar_id":"","url":"https://api.github.com/users/mikejolley","html_url":"https://github.com/mikejolley","followers_url":"https://api.github.com/users/mikejolley/followers","following_url":"https://api.github.com/users/mikejolley/following{/other_user}","gists_url":"https://api.github.com/users/mikejolley/gists{/gist_id}","starred_url":"https://api.github.com/users/mikejolley/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mikejolley/subscriptions","organizations_url":"https://api.github.com/users/mikejolley/orgs","repos_url":"https://api.github.com/users/mikejolley/repos","events_url":"https://api.github.com/users/mikejolley/events{/privacy}","received_events_url":"https://api.github.com/users/mikejolley/received_events","type":"User","site_admin":false}],"milestone":null,"comments":1,"created_at":"2018-04-10T05:43:39Z","updated_at":"2018-04-10T12:49:54Z","closed_at":"2018-04-10T12:49:54Z","author_association":"NONE","body":"There are styles in [woocommerce.css](https://github.com/woocommerce/woocommerce/blob/6e13ac7dc2e2feafc9e9a5f68802d47a2422fe00/assets/css/woocommerce.scss#L1636) that use both `!important` and selectors with high specifity - `tag.class`. Sometimes, developers want to use their own \"skin\" fpr PhotoSwipe and these styles are very hard to override without writing ugly CSS.\r\n\r\n```css\r\n/**\r\n * Photoswipe\r\n * 1. These styles are required to overwrite default theme button styles (Twenty Twelve adds gradients via background-image).\r\n * 2. For zooming on mobile.\r\n */\r\n.pswp {\r\n\tz-index: 999999;\r\n}\r\n\r\n.woocommerce img.pswp__img,\r\n.woocommerce-page img.pswp__img {\r\n\tmax-width: none; /* 2 */\r\n}\r\n\r\nbutton.pswp__button {\r\n\tbox-shadow: none !important;\r\n\tbackground-image: url('photoswipe/default-skin/default-skin.png') !important;\r\n}\r\n\r\nbutton.pswp__button,\r\nbutton.pswp__button:hover,\r\nbutton.pswp__button--arrow--left::before,\r\nbutton.pswp__button--arrow--right::before {\r\n\tbackground-color: transparent !important; /* 1 */\r\n}\r\n\r\nbutton.pswp__button--arrow--left,\r\nbutton.pswp__button--arrow--right,\r\nbutton.pswp__button--arrow--left:hover,\r\nbutton.pswp__button--arrow--right:hover {\r\n\tbackground-image: none !important; /* 1 */\r\n}\r\n```\r\n\r\nWooCommerce has amazing feature to remove lightbox: \r\n\r\n```php\r\nremove_theme_support( 'wc-product-gallery-lightbox' );\r\n``` \r\n\r\nit excludes photoswipe css/js files and allows to use own JS file and own skin (CSS file). The problem is that `woocommerce.css` is unchanged.\r\n\r\n## Proposal 1\r\n\r\nMove these styles to PhotoSwipe css file, so it's possible to exclude them when excluding PhotoSwipe via `remove_theme_support`\r\n\r\n## Proposal 2\r\n\r\nAdd class to root element of PhotoSwipe (HTML is located [in photoswipe.php](https://github.com/woocommerce/woocommerce/blob/2d85b5adde9b074e077100cb67eec7d3027a45d0/templates/single-product/photoswipe.php)) and scope styles.\r\n\r\n`woocommerce.css`:\r\n\r\n```css\r\n.woocommerce-pswp button.pswp__button {\r\n\tbox-shadow: none !important;\r\n\tbackground-image: url('photoswipe/default-skin/default-skin.png') !important;\r\n}\r\n```\r\n\r\nand `photoswipe.php`:\r\n\r\n```html\r\n<div class=\"pswp woocommerce-pswp\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\r\n```"}}
{"actor":{"display_login":"mikejolley"}}