Revert "Bug 1881256 - Add some basic input/select/textarea styles to …

…global-shared.css. r=dao,desktop-theme-reviewers" This reverts commit 13f514c.
Eclipse-Community · Apr 17, 2024 · d1a309d · d1a309d
1 parent 0b6c3e2
commit d1a309d
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 59 deletions.
diff --git a/browser/themes/shared/customizableui/panelUI-shared.css b/browser/themes/shared/customizableui/panelUI-shared.css
@@ -2098,6 +2098,67 @@ panelview {
     resize: vertical;
   }
 
+  select {
+    /* copied/adapted from toolkit/themes/shared/menulist-shared.css */
+    appearance: none;
+    background-color: var(--button-bgcolor, ButtonFace);
+    color: var(--button-color, ButtonText);
+    border-radius: 4px;
+    padding: 6px 16px;
+    margin: 5px 2px 3px;
+
+    font: menu;
+    font-weight: 600;
+    border: none;
+
+    background-image: url(chrome://global/skin/icons/arrow-down-12.svg);
+    background-position: right 10px center;
+    padding-inline-end: 32px; /* 2 * 10px padding + image's 12px width */
+    background-repeat: no-repeat;
+    -moz-context-properties: fill;
+    fill: currentColor;
+
+    &:-moz-locale-dir(rtl) {
+      background-position: left 10px center;
+    }
+
+    &:hover {
+      background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace));
+    }
+
+    &:hover:active {
+      background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace));
+    }
+
+    &:focus-visible {
+      outline: var(--focus-outline);
+      outline-offset: var(--focus-outline-offset);
+    }
+  }
+
+  input,
+  textarea {
+    appearance: none;
+    background-color: var(--panel-background);
+    padding: 0.25em;
+    border: 1px solid var(--panel-separator-color);
+    border-radius: 4px;
+
+    &:focus-visible {
+      border-color: transparent;
+      outline: var(--focus-outline);
+      outline-offset: var(--focus-outline-offset);
+    }
+  }
+
+  input:user-invalid:not(:focus-visible),
+  select:user-invalid:not(:focus-visible) {
+    border-color: transparent;
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-offset);
+    outline-color: var(--color-error-outline);
+  }
+
   > .panel-subview-body > label {
     margin-block: 1.5em 0.5em;
 

diff --git a/browser/themes/shared/translations/panel.css b/browser/themes/shared/translations/panel.css
@@ -154,7 +154,19 @@ h1.translations-panel-header-wrapper {
 }
 
 #select-translations-panel-translation-area {
+  background-color: transparent;
+  border: none;
+  border-radius: 4px;
   height: 8em;
   margin-inline: 5px;
+  outline: 2px solid var(--arrowpanel-dimmed);
+  overflow: auto;
+  padding: 4px;
   resize: none;
+  /* This manual focus styling may no longer be needed after Bug 1881256 lands.
+     https://bugzilla.mozilla.org/show_bug.cgi?id=1881256 */
+  &:focus {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-offset);
+  }
 }
diff --git a/toolkit/themes/shared/global-shared.css b/toolkit/themes/shared/global-shared.css
@@ -131,68 +131,10 @@ html|input {
 
 html|button,
 html|input,
-html|select,
 html|textarea {
   font: inherit;
 }
 
-html|input:where(:not([type=radio i], [type=checkbox i], [type=range i])),
-html|textarea {
-  appearance: none;
-  padding: var(--space-small);
-  border: 1px solid var(--input-border-color, ThreeDShadow);
-  border-radius: var(--border-radius-small);
-  margin: 0;
-  background-color: var(--input-bgcolor, Field);
-  color: var(--input-color, FieldText);
-
-  &:where(:user-invalid) {
-    border-color: var(--color-error-outline);
-  }
-
-  &:where(:focus-visible) {
-    outline: var(--focus-outline);
-    outline-offset: var(--focus-outline-inset);
-  }
-}
-
-/* adapted from toolkit/themes/shared/menulist-shared.css */
-html|select:where(:not([size], [multiple])) {
-  appearance: none;
-  padding: 6px 16px;
-  padding-inline-end: 32px; /* 2 * 10px padding + image's 12px width */
-  margin: 5px 2px 3px;
-  border: none;
-  border-radius: var(--border-radius-small);
-
-  font-weight: var(--font-weight-bold);
-
-  color: var(--button-color, ButtonText);
-  background-color: var(--button-bgcolor, ButtonFace);
-  background-image: url(chrome://global/skin/icons/arrow-down-12.svg);
-  background-position: right 10px center;
-  background-repeat: no-repeat;
-  -moz-context-properties: fill;
-  fill: currentColor;
-
-  &:-moz-locale-dir(rtl) {
-    background-position-x: left 10px;
-  }
-
-  &:hover {
-    background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace));
-  }
-
-  &:hover:active {
-    background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace));
-  }
-
-  &:focus-visible {
-    outline: var(--focus-outline);
-    outline-offset: var(--focus-outline-offset);
-  }
-}
-
 .header {
   font-weight: var(--font-weight-bold);
 }
@@ -285,7 +227,7 @@ button.text-link .button-text {
 .footer-button {
   appearance: none;
   border: 0;
-  border-radius: var(--border-radius-small);
+  border-radius: 4px;
   color: var(--button-color, inherit);
   background-color: var(--button-bgcolor, color-mix(in srgb, currentColor 13%, transparent));
   padding: .45em 1em;