From c984bc289760cb002fc362f444f399fb1b1e2bed Mon Sep 17 00:00:00 2001
From: Ryosuke Asano <s1F102400011@iniad.org>
Date: Sat, 27 Jul 2024 15:45:52 +0900
Subject: [PATCH] [FB] Preferences | Fix design

---
 .../preferences/preferences-floorp.css        | 314 +-----------------
 1 file changed, 12 insertions(+), 302 deletions(-)

diff --git a/browser/components/preferences/preferences-floorp.css b/browser/components/preferences/preferences-floorp.css
index 139050e2..4941a37b 100644
--- a/browser/components/preferences/preferences-floorp.css
+++ b/browser/components/preferences/preferences-floorp.css
@@ -6,6 +6,18 @@
   --in-content-sidebar-width: 275px !important;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --card-background: #111111 !important;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --card-background: #edebeb !important;
+  }
+}
+
 #trackingGroup[hidden="true"] {
   display: none !important;
 }
@@ -233,35 +245,6 @@
   padding-top: 1em;
 }
 
-#about-legacy-sub {
-  display: block !important;
-}
-
-#contributeDesc {
-  padding-bottom: 1em;
-}
-
-#floorp-legacy-sub-sub {
-  color: var(--in-content-deemphasized-text) !important;
-  margin: 4px 0 10px !important;
-  line-height: 1.4em !important;
-}
-
-#floorp-header {
-  border-top: solid 0.1px gray;
-}
-
-#floorp-legacy-s {
-  color: var(--in-content-deemphasized-text) !important;
-  margin: 4px 0 10px !important;
-  line-height: 1.4em !important;
-}
-
-#floorp-legacy-s::after {
-  content: "\A" !important;
-  white-space: pre !important;
-}
-
 #category-general>.category-icon {
   list-style-image: url(chrome://browser/skin/preferences/category-general.svg) !important;
 }
@@ -301,279 +284,6 @@
   list-style-image: url(chrome://browser/skin/new-tab.svg) !important;
 }
 
-
-/* Visual Ajustments */
-
- :root {
-  --in-content-page-background: #f7f7f7 !important;
-  --in-content-text-color: #262626 !important;
-  --in-content-page-color: #262626 !important;
-  --card-background: #fff;
-  --card-shadow: rgb(0 0 0 / 13%) 0px 1.6px 3.6px, rgb(0 0 0 / 11%) 0px 0px 2.9px !important;
-  --sidebar-border-color: #bebebe;
-  --in-content-accent-color: #0078d4 !important;
-  --category-selected: #0001;
-  --in-content-link-color: #0078d4 !important;
-  --section-highlight-background-color: #0078d420 !important;
-  --search-bgcolor: #fff;
-  --input-border-color: var(--sidebar-border-color);
-  --input-border-color-focused: #888;
-  --checkbox-bgcolor: #f7f7f7;
-  --checkbox-border-color: #8D8D8D;
-  --checkbox-hover-border-color: #666;
-  --checkbox-fill-color: #262626;
-  --checkbox-checked-bgcolor: #0078D4;
-  --checkbox-checked-fill-color: #fff;
-}
-
-.content-blocking-category.selected {
-  border-color: #0078d4 !important;
-}
-
-.content-blocking-category.expanded:not(.selected) .content-blocking-warning {
-  background-color: #f7f7f7 !important;
-}
-
-@media (prefers-color-scheme: dark) {
-   :root {
-    --in-content-page-background: #333 !important;
-    --in-content-text-color: #fff !important;
-    --in-content-page-color: #fff !important;
-    --card-background: #3b3b3b;
-    --card-shadow: 0px 1.6px 3.6px rgb(0 0 0 / 25%), 0px 0px 2.9px rgb(0 0 0 / 22%) !important;
-    --sidebar-border-color: #6b6b6b;
-    --in-content-accent-color: #63ade5 !important;
-    --category-selected: #fff1;
-    --in-content-link-color: #63ade5 !important;
-    --section-highlight-background-color: #63ade520 !important;
-    --search-bgcolor: #2b2b2b;
-    --input-border-color-focused: #808080;
-    --checkbox-bgcolor: #333;
-    --checkbox-border-color: #7d7d7d;
-    --checkbox-hover-border-color: #A4A4A4;
-    --checkbox-fill-color: #fff;
-    --checkbox-checked-bgcolor: #006CBE;
-    --checkbox-checked-fill-color: #fff;
-  }
-  .content-blocking-category.selected {
-    border-color: #63ade5 !important;
-  }
-  .content-blocking-category.expanded:not(.selected) .content-blocking-warning {
-    background-color: #333 !important;
-  }
-  .dialogBox {
-    --in-content-page-background: #333333 !important;
-  }
-}
-
-
-/* Cards For Certain Sections */
-
-#fxaGroup, .sync-group, #searchbarGroup, #homeContentsGroup, #permissionsGroup, #httpsOnlyBox, #applicationsGroup, #oneClickSearchProvidersGroup {
-  padding: 12px 16px;
-  background: var(--card-background) !important;
-  box-shadow: var(--card-shadow) !important;
-  border-radius: 4px !important;
-  border: 0 !important;
-}
-
- :is(.sync-group, #trackingGroup, #searchbarGroup, #homeContentsGroup, #permissionsGroup, #httpsOnlyBox, #applicationsGroup, #oneClickSearchProvidersGroup) h2 {
-  margin-top: 2px !important;
-}
-
-h1 {
-  margin: 0 0 16px !important;
-  font-weight: 600 !important;
-  font-size: 20px !important;
-}
-
-#openChangeProfileImage {
-  height: 64px !important;
-  width: 64px !important;
-  margin: 10px !important;
-  margin-inline: 6px 20px !important;
-}
-
-menulist {
-  max-width: 400px !important;
-}
-
-search-textbox, input[type="text"] {
-  background-color: transparent !important;
-  border: 1px solid var(--input-border-color) !important;
-  transition: all .2s ease-in-out !important;
-}
-
-search-textbox:hover, search-textbox[focused], input[type="text"]:focus, input[type="text"]:hover {
-  --input-border-color: var(--input-border-color-focused) !important;
-  outline: 0 !important;
-}
-
-search-textbox[focused], input[type="text"]:focus {
-  box-shadow: 0 0 0 1px inset var(--input-border-color) !important;
-}
-
-search-textbox {
-  background-color: var(--search-bgcolor) !important;
-  padding: 2px 8px !important;
-  margin: 16px 0 !important;
-  min-height: 34px !important;
-}
-
-#policies-container {
-  margin: 17px 0 17px 0 !important;
-  position: relative !important;
-  z-index: 99 !important;
-  background-color: var(--in-content-page-background) !important;
-}
-
-button, menulist {
-  background-color: transparent !important;
-  border: 1px solid var(--input-border-color) !important;
-  border-radius: 2px !important;
-  transition: all .2s ease-in-out !important;
-}
-
-button:hover, menulist:hover {
-  border-color: var(--input-border-color-focused) !important;
-}
-
-dropmarker {
-  list-style-image: url(../popup/menu-right.svg) !important;
-  transform: rotate(90deg) scale(calc(16 / 12)) !important;
-  margin: 0 4px 0 0 !important;
-  max-width: 12px !important;
-}
-
-.navigation {
-  border-right: 1px solid var(--sidebar-border-color) !important;
-}
-
-.sticky-container {
-  border-bottom: 1px solid var(--sidebar-border-color) !important;
-}
-
-.preferences-text {
-  font-size: 24px;
-  font-weight: 600;
-  position: absolute !important;
-  min-height: 34px;
-  top: 16px;
-  left: 4px;
-}
-
-#mainPrefPane {
-  margin-top: 16px !important;
-}
-
-.checkbox-check {
-  /* Move Checkboxes to Right */
-  order: 2 !important;
-  width: 40px !important;
-  height: 20px !important;
-  padding: 4px !important;
-  padding-inline: 0 24px !important;
-  list-style-image: none !important;
-  border-radius: 99px !important;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='context-fill'/%3E%3C/svg%3E") !important;
-  background-position: 4px 4px !important;
-  background-repeat: no-repeat !important;
-  background-size: 10px !important;
-  transition: all 0.1s ease-in-out !important;
-  -moz-context-properties: fill, fill-opacity !important;
-  fill: currentColor !important;
-  background-color: var(--checkbox-bgcolor) !important;
-  color: var(--checkbox-fill-color) !important;
-  border: 1px solid var(--checkbox-border-color) !important;
-  margin: 3px 8px !important;
-}
-
-.indent>checkbox>.checkbox-check {
-  margin-inline-start: 32px !important;
-}
-
-.checkbox-check:hover {
-  border-color: var(--checkbox-hover-border-color) !important;
-}
-
-.checkbox-check[checked] {
-  background-position: 24px 4px !important;
-  background-color: var(--checkbox-checked-bgcolor) !important;
-  color: var(--checkbox-checked-fill-color) !important;
-  border-color: transparent !important;
-}
-
-.radio-check {
-  background-color: var(--checkbox-bgcolor) !important;
-  border: 1px solid var(--checkbox-border-color) !important;
-}
-
-.radio-check:hover {
-  background-color: var(--checkbox-bgcolor) !important;
-  border-color: var(--checkbox-hover-border-color) !important;
-}
-
-.radio-check[selected] {
-  background-color: #00b7ff !important;
-  border-color: transparent !important;
-  color: var(--checkbox-bgcolor) !important;
-}
-
-.radio-check[selected]:hover {
-  background-color: var(--checkbox-hover-border-color) !important;
-}
-
-#categories {
-  padding-inline: 16px !important;
-  margin: 16px 0 0 !important;
-}
-
-.category {
-  position: relative !important;
-  margin: 0 !important;
-  padding-inline: 12px !important;
-}
-
-.sidebar-footer-link, .sidebar-footer-button>.text-link {
-  margin-inline: 16px !important;
-  height: 40px !important;
-}
-
-.sidebar-footer-icon {
-  margin: 12px 16px !important;
-  height: 16px !important;
-  width: 16px !important;
-  scale: 1 !important;
-  translate: 0 !important;
-}
-
-.sidebar-footer-list {
-  margin: 0 !important;
-  margin-bottom: 16px !important;
-}
-
-@media (max-width: 830px) {
-   :root {
-    --in-content-sidebar-width: 80px !important;
-  }
-  .navigation {
-    margin-inline-end: 16px !important;
-  }
-}
-
-.category::before {
-  content: "";
-  height: calc(100% - 24px) !important;
-  position: absolute !important;
-  top: 12px;
-  left: 0;
-  border-left: 3px solid transparent !important;
-}
-
-.category[selected]::before {
-  border-color: var(--in-content-accent-color) !important;
-}
-
 BSB-header-links {
   font-size: 1.25rem;
   margin-block-end: 15px;