Clean: Proton - Page info

black7375 · Jun 1, 2022 · 9f855fe · 9f855fe
1 parent 0a7be87
commit 9f855fe
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 73 deletions.
diff --git a/css/leptonChrome.css b/css/leptonChrome.css
@@ -2092,35 +2092,27 @@
       border-radius: 8px !important;
       padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important;
       margin: 4px !important;
+      list-style-image: none !important;
+      background-image: var(--viewgroup-image) !important;
+      background-repeat: no-repeat;
+      background-position: top var(--in-content-button-vertical-padding) center;
+      background-size: 32px !important;
+      -moz-context-properties: fill !important;
+      fill: currentColor !important;
+      color: var(--in-content-deemphasized-text) !important;
+      /* FieldText */
     }
-
     #viewGroup > radio:hover {
       background-color: var(--in-content-button-background-hover) !important;
       /* #E0E8F6; */
     }
-
     #viewGroup > radio[selected="true"] {
       color: var(--in-content-button-text-color) !important;
       /* SelectedItemText */
       background-color: var(--in-content-button-background-active) !important;
       /* #C1D2EE; */
     }
 
-    #viewGroup > radio {
-      color: var(--in-content-deemphasized-text) !important;
-      /* FieldText */
-    }
-
-    #viewGroup > radio {
-      list-style-image: none !important;
-      background-image: var(--viewgroup-image) !important;
-      background-repeat: no-repeat;
-      background-position: top var(--in-content-button-vertical-padding) center;
-      background-size: 32px !important;
-      -moz-context-properties: fill !important;
-      fill: currentColor !important;
-    }
-
     #generalTab {
       --viewgroup-image: url(chrome://global/skin/icons/page-portrait.svg);
     }
@@ -2142,13 +2134,13 @@
       margin: 0 !important;
       padding: 0 6px !important;
     }
-
     @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
       #viewGroup > radio > .radio-label-box {
         padding-top: 32px !important;
         /* as -moz-image-region: rect(0px, 32px, 32px, 0px); */
       }
     }
+
     #mainDeck input {
       color: var(--in-content-page-color) !important;
     }
@@ -2173,7 +2165,6 @@
       background: var(--in-content-table-header-background) !important;
       color: var(--in-content-table-header-color) !important;
     }
-
     treecols > treecol,
     treecols > treecolpicker.treecol-image {
       -moz-appearance: none !important;
@@ -2196,27 +2187,22 @@
     treechildren::-moz-tree-row(odd) {
       background-color: var(--in-content-box-background-odd) !important;
     }
-
     treechildren::-moz-tree-row(hover) {
       color: var(--in-content-item-hover-text) !important;
       background-color: var(--in-content-item-hover) !important;
     }
-
     treechildren::-moz-tree-row(selected) {
       background-color: var(--in-content-item-selected) !important;
     }
-
     treechildren::-moz-tree-cell {
       border-inline: 1px solid var(--in-content-table-border-color) !important;
       border-spacing: 0 !important;
       padding: 4px !important;
       margin: 0 !important;
     }
-
     treechildren::-moz-tree-cell-text(hover) {
       color: var(--in-content-item-hover-text) !important;
     }
-
     treechildren::-moz-tree-cell-text(selected) {
       font-weight: 600 !important;
       color: var(--in-content-item-selected-text) !important;

diff --git a/src/theme/proton_chrome/_page_info.scss b/src/theme/proton_chrome/_page_info.scss
@@ -9,19 +9,7 @@
     border-radius: 8px !important;
     padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important;
     margin: 4px !important;
-  }
-  #viewGroup > radio:hover {
-    background-color: var(--in-content-button-background-hover) !important; /* #E0E8F6; */
-  }
-  #viewGroup > radio[selected="true"] {
-    color: var(--in-content-button-text-color) !important; /* SelectedItemText */
-    background-color: var(--in-content-button-background-active) !important; /* #C1D2EE; */
-  }
-  #viewGroup > radio {
-    color: var(--in-content-deemphasized-text) !important; /* FieldText */
-  }
 
-  #viewGroup > radio {
     list-style-image: none !important;
     background-image: var(--viewgroup-image) !important;
     background-repeat: no-repeat;
@@ -30,6 +18,14 @@
 
     -moz-context-properties: fill !important;
     fill: currentColor !important;
+    color: var(--in-content-deemphasized-text) !important; /* FieldText */
+    &:hover {
+      background-color: var(--in-content-button-background-hover) !important; /* #E0E8F6; */
+    }
+    &[selected="true"] {
+      color: var(--in-content-button-text-color) !important; /* SelectedItemText */
+      background-color: var(--in-content-button-background-active) !important; /* #C1D2EE; */
+    }
   }
   #generalTab {
     --viewgroup-image: url(chrome://global/skin/icons/page-portrait.svg);
@@ -48,9 +44,8 @@
     /* Overwrite */
     margin: 0 !important;
     padding: 0 6px !important;
-  }
-  @include OS($mac) {
-    #viewGroup > radio > .radio-label-box {
+
+    @include OS($mac) {
       padding-top: 32px !important; /* as -moz-image-region: rect(0px, 32px, 32px, 0px); */
     }
   }
@@ -76,17 +71,18 @@
     -moz-appearance: none !important;
     background: var(--in-content-table-header-background) !important;
     color: var(--in-content-table-header-color) !important;
-  }
-  treecols > treecol,
-  treecols > treecolpicker.treecol-image {
-    -moz-appearance: none !important;
-    color: var(--in-content-table-header-color) !important;
-    background: var(--in-content-table-header-background) !important;
-    border: 1px solid var(--in-content-table-border-color) !important;
-    padding: 4px !important;
-    border-spacing: 0;
 
-    text-align: center !important;
+    > treecol,
+    > treecolpicker.treecol-image {
+      -moz-appearance: none !important;
+      color: var(--in-content-table-header-color) !important;
+      background: var(--in-content-table-header-background) !important;
+      border: 1px solid var(--in-content-table-border-color) !important;
+      padding: 4px !important;
+      border-spacing: 0;
+
+      text-align: center !important;
+    }
   }
 
   tree,
@@ -96,31 +92,31 @@
     background-color: var(--in-content-table-background) !important;
     border: 1px solid var(--in-content-table-border-color) !important;
   }
+  treechildren {
+    &::-moz-tree-row(odd) {
+      background-color: var(--in-content-box-background-odd) !important;
+    }
+    &::-moz-tree-row(hover) {
+      color: var(--in-content-item-hover-text) !important;
+      background-color: var(--in-content-item-hover) !important;
+    }
+    &::-moz-tree-row(selected) {
+      background-color: var(--in-content-item-selected) !important;
+    }
 
-  treechildren::-moz-tree-row(odd) {
-    background-color: var(--in-content-box-background-odd) !important;
-  }
-
-  treechildren::-moz-tree-row(hover) {
-    color: var(--in-content-item-hover-text) !important;
-    background-color: var(--in-content-item-hover) !important;
-  }
-  treechildren::-moz-tree-row(selected) {
-    background-color: var(--in-content-item-selected) !important;
-  }
-
-  treechildren::-moz-tree-cell {
-    border-inline: 1px solid var(--in-content-table-border-color) !important;
-    border-spacing: 0 !important;
-    padding: 4px !important;
-    margin: 0 !important;
-  }
-  treechildren::-moz-tree-cell-text(hover) {
-    color: var(--in-content-item-hover-text) !important;
-  }
-  treechildren::-moz-tree-cell-text(selected) {
-    font-weight: 600 !important;
-    color: var(--in-content-item-selected-text) !important;
+    &::-moz-tree-cell {
+      border-inline: 1px solid var(--in-content-table-border-color) !important;
+      border-spacing: 0 !important;
+      padding: 4px !important;
+      margin: 0 !important;
+    }
+    &::-moz-tree-cell-text(hover) {
+      color: var(--in-content-item-hover-text) !important;
+    }
+    &::-moz-tree-cell-text(selected) {
+      font-weight: 600 !important;
+      color: var(--in-content-item-selected-text) !important;
+    }
   }
 
   #imagecontainerbox {