From 4f2204fdd78c85b31e56cd75fb63b7848ab38f80 Mon Sep 17 00:00:00 2001 From: Anri Dellal Date: Thu, 20 May 2021 12:41:54 +0300 Subject: [PATCH] Make about: pages more adaptive (MR 10) Adds stylesheets for some "about:" pages, the pages were chosen depending on importance for user. preferences.css was moved to sidebar.css since changes in this file could be applied for more pages and were related only to sidebar. Adds copyrights --- src/userContent/addons.css | 8 +++ src/userContent/config.css | 37 ++++++++++++++ src/userContent/license.css | 11 +++++ src/userContent/logins.css | 24 +++++++++ src/userContent/policies.css | 11 +++++ src/userContent/protections.css | 49 +++++++++++++++++++ src/userContent/rights.css | 11 +++++ .../{preferences.css => sidebar.css} | 14 +++++- 8 files changed, 163 insertions(+), 2 deletions(-) create mode 100644 src/userContent/addons.css create mode 100644 src/userContent/config.css create mode 100644 src/userContent/license.css create mode 100644 src/userContent/logins.css create mode 100644 src/userContent/policies.css create mode 100644 src/userContent/protections.css create mode 100644 src/userContent/rights.css rename src/userContent/{preferences.css => sidebar.css} (61%) diff --git a/src/userContent/addons.css b/src/userContent/addons.css new file mode 100644 index 0000000..2755b0f --- /dev/null +++ b/src/userContent/addons.css @@ -0,0 +1,8 @@ +/* Copyright 2021 Anri Dellal + SPDX-License-Identifier: GPL-3.0-or-later */ + +@-moz-document url("about:addons"), url-prefix("about:addons") { + :root { + --section-width: min(664px, 100%) !important; + } +} diff --git a/src/userContent/config.css b/src/userContent/config.css new file mode 100644 index 0000000..a1a80b2 --- /dev/null +++ b/src/userContent/config.css @@ -0,0 +1,37 @@ +/* Copyright 2021 Anri Dellal + SPDX-License-Identifier: GPL-3.0-or-later */ + +@-moz-document url("about:config") { + #search-container, + #toolbar, #prefs { + min-width: 300px !important; + } + + @media (max-width: 644px) { + #toolbar { + flex-direction: column; + } + + #about-config-search { + max-width: 100%; + } + + #prefs { + word-wrap: anywhere; + } + + .checkbox-container { + margin-top: 5px; + } + } + + @media (max-width: 500px) { + tr { + font-size: 12px; + } + + th { + padding-left: 8px !important; + } + } +} diff --git a/src/userContent/license.css b/src/userContent/license.css new file mode 100644 index 0000000..6e5c8fd --- /dev/null +++ b/src/userContent/license.css @@ -0,0 +1,11 @@ +/* Copyright 2021 Anri Dellal + SPDX-License-Identifier: GPL-3.0-or-later */ + +@-moz-document url("about:license") { + @media (max-width: 500px) { + .license-header { + background-image: none !important; + padding-inline-end: unset !important; + } + } +} diff --git a/src/userContent/logins.css b/src/userContent/logins.css new file mode 100644 index 0000000..b5ae43a --- /dev/null +++ b/src/userContent/logins.css @@ -0,0 +1,24 @@ +/* Copyright 2021 Anri Dellal + SPDX-License-Identifier: GPL-3.0-or-later */ + +@-moz-document url("about:logins") { + .container { + min-width: 300px !important; + } + + @media (max-width: 700px) { + body { + --sidebar-width: 200px !important; + grid-template-columns: var(--sidebar-width) 1fr !important; + } + + .edit-button, .delete-button { + font-size: 0 !important; + background-position: center; + } + + #branding-logo { + display: none; + } + } +} diff --git a/src/userContent/policies.css b/src/userContent/policies.css new file mode 100644 index 0000000..022b494 --- /dev/null +++ b/src/userContent/policies.css @@ -0,0 +1,11 @@ +/* Copyright 2021 Anri Dellal + SPDX-License-Identifier: GPL-3.0-or-later */ + +@-moz-document url("about:policies"), url-prefix("about:policies") { + @media (max-width: 830px) { + tbody.collapsible td, + .active-policies td { + word-wrap: anywhere; + } + } +} diff --git a/src/userContent/protections.css b/src/userContent/protections.css new file mode 100644 index 0000000..27f23ca --- /dev/null +++ b/src/userContent/protections.css @@ -0,0 +1,49 @@ +/* Copyright 2021 Anri Dellal + SPDX-License-Identifier: GPL-3.0-or-later */ + +@-moz-document url("about:protections") { + #report-content { + width: calc(100% - 16px) !important; + max-width: 800px !important; + } + + /* hide element with Firefox for Android and iOS ad */ + .lockwise-card .card-body, + #mobile-hanger { + display: none !important; + } + + @media (max-width: 800px) { + #report-content { + margin: 16px 8px !important; + } + + .icon { + width: 32px !important; + height: 32px !important; + } + + .body-wrapper { + /* make trackers report to fill the entire card width */ + grid-column-start: 1 !important; + grid-column-end: -1 !important; + } + + #manage-protections, + #sign-up-for-monitor-link, + #save-passwords-button, + #get-proxy-extension-link { + /* move button on a separate row */ + grid-area: 2 / 1 / 2 / 6 !important; + } + + .card-header .wrapper { + grid-row-gap: 8px !important; + } + + .card:not(.has-logins) .wrapper div:nth-child(1) { + /* make card title to use more width */ + grid-column-end: -1 !important; + } + } +} diff --git a/src/userContent/rights.css b/src/userContent/rights.css new file mode 100644 index 0000000..c5d9505 --- /dev/null +++ b/src/userContent/rights.css @@ -0,0 +1,11 @@ +/* Copyright 2021 Anri Dellal + SPDX-License-Identifier: GPL-3.0-or-later */ + +@-moz-document url("about:rights") { + @media (max-width: 500px) { + .rights-header { + background-image: none !important; + padding-inline-end: unset !important; + } + } +} diff --git a/src/userContent/preferences.css b/src/userContent/sidebar.css similarity index 61% rename from src/userContent/preferences.css rename to src/userContent/sidebar.css index 3bd8eaf..e6023de 100644 --- a/src/userContent/preferences.css +++ b/src/userContent/sidebar.css @@ -1,10 +1,19 @@ -@-moz-document url("about:preferences"), url-prefix("about:preferences") { +/* Copyright 2021 plata, Anri Dellal + SPDX-License-Identifier: GPL-3.0-or-later */ + +@-moz-document regexp("about:(preferences|addons|policies).*") { + .category-icon { + user-select: none !important; + } + @media (max-width: 700px) { /* avoid that sidebar is too wide */ :root { --in-content-sidebar-width: 50px !important; + --sidebar-width: 50px !important; } + /* reduce space around category icons */ #categories > .category { margin-inline-start: auto !important; padding-inline: auto !important; @@ -14,13 +23,14 @@ display: none !important; } + /* reduce space around footer icons (addons, help) */ .sidebar-footer-list { margin-inline: auto !important; padding-inline: auto !important; } .sidebar-footer-label { - display:none !important; + display: none !important; } }