recaptime.dev / phorge
@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.) hq.recaptime.dev/wiki/Phorge
phorge phabricator
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

Replace checkerboard pattern image with repeating-conic-gradient CSS

Summary:
Replace `background: url('/rsrc/image/checker_lighter.png')` (which is problematic in Pholio for dark mode support) with corresponding modern CSS `repeating-conic-gradient`.

Note that this is a trade-off between improved Dark Mode and browser compatibility: Such CSS is only supported since Chrome 69/Opera 56 (09/2018), Firefox 83 (11/2020), Safari 12.1 (03/2019), and Edge 79 (01/2020) according to https://caniuse.com/?search=repeating-conic-gradient. Older browsers will display the `{$page.content}` color instead with no checkerboard pattern.

The image file is also used in other CSS files; a future patch might potentially also replace these usages.

Refs T15056

Test Plan:
* Go to http://phorge.localhost/settings/panel/display/ and set `Accessibility` to `Dark Mode (Experimental)`
* Go to http://phorge.localhost/pholio/create/ and upload an image with alpha channel transparency
* Go to http://phorge.localhost/M1 and lock at the background of the image

Reviewers: O1 Blessed Committers, mainframe98

Reviewed By: O1 Blessed Committers, mainframe98

Subscribers: mainframe98, tobiaswiese, valerio.bozzolan, Matthew, Cigaryno

Maniphest Tasks: T15056

Differential Revision: https://we.phorge.it/D26155

Andre Klapper 03e8c8ab 284d66a6

+16 -4
+4 -4
resources/celerity/map.php
··· 83 83 'rsrc/css/application/people/people-picture-menu-item.css' => 'fe8e07cf', 84 84 'rsrc/css/application/people/people-profile.css' => '2ea2daa1', 85 85 'rsrc/css/application/phame/phame.css' => '209125c7', 86 - 'rsrc/css/application/pholio/pholio-edit.css' => '4df55b3b', 86 + 'rsrc/css/application/pholio/pholio-edit.css' => '6ca86f27', 87 87 'rsrc/css/application/pholio/pholio-inline-comments.css' => '722b48c2', 88 - 'rsrc/css/application/pholio/pholio.css' => '87870afb', 88 + 'rsrc/css/application/pholio/pholio.css' => 'c82315da', 89 89 'rsrc/css/application/phortune/phortune-credit-card-form.css' => '3b9868a8', 90 90 'rsrc/css/application/phortune/phortune-invoice.css' => '4436b241', 91 91 'rsrc/css/application/phortune/phortune.css' => '508a1a5e', ··· 773 773 'phabricator-ui-example-css' => '69d6682f', 774 774 'phabricator-zindex-css' => '56fbe5ba', 775 775 'phame-css' => '209125c7', 776 - 'pholio-css' => '87870afb', 777 - 'pholio-edit-css' => '4df55b3b', 776 + 'pholio-css' => 'c82315da', 777 + 'pholio-edit-css' => '6ca86f27', 778 778 'pholio-inline-comments-css' => '722b48c2', 779 779 'phortune-credit-card-form' => 'd12d214f', 780 780 'phortune-credit-card-form-css' => '3b9868a8',
+4
webroot/rsrc/css/application/pholio/pholio-edit.css
··· 49 49 } 50 50 51 51 .pholio-thumb-frame { 52 + /* TODO: Remove static image for old browsers some day; see D26155 */ 52 53 background: url('/rsrc/image/checker_lighter.png'); 54 + background: repeating-conic-gradient( 55 + {$lightgreybackground} 0% 25%, 56 + {$page.content} 0% 50%) 0 0/20px 20px; 53 57 } 54 58 55 59 .device .pholio-thumb-frame {
+8
webroot/rsrc/css/application/pholio/pholio.css
··· 5 5 text-align: center; 6 6 vertical-align: middle; 7 7 position: relative; 8 + /* TODO: Remove static image for old browsers some day; see D26155 */ 8 9 background: url('/rsrc/image/checker_lighter.png'); 10 + background: repeating-conic-gradient( 11 + {$lightgreybackground} 0% 25%, 12 + {$page.content} 0% 50%) 0 0/20px 20px; 9 13 } 10 14 11 15 .pholio-mock-thumb-grid-container { ··· 28 32 vertical-align: middle; 29 33 border: 1px solid {$lightgreyborder}; 30 34 position: relative; 35 + /* TODO: Remove static image for old browsers some day; see D26155 */ 31 36 background: url('/rsrc/image/checker_lighter.png'); 37 + background: repeating-conic-gradient( 38 + {$lightgreybackground} 0% 25%, 39 + {$page.content} 0% 50%) 0 0/20px 20px; 32 40 } 33 41 34 42 .device-desktop .pholio-mock-thumb-grid-item:hover {