Skip to content

Commit d1a309d

Browse files
committed
Revert "Bug 1881256 - Add some basic input/select/textarea styles to global-shared.css. r=dao,desktop-theme-reviewers"
This reverts commit 13f514c.
1 parent 0b6c3e2 commit d1a309d

File tree

3 files changed

+74
-59
lines changed

3 files changed

+74
-59
lines changed

browser/themes/shared/customizableui/panelUI-shared.css

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2098,6 +2098,67 @@ panelview {
20982098
resize: vertical;
20992099
}
21002100

2101+
select {
2102+
/* copied/adapted from toolkit/themes/shared/menulist-shared.css */
2103+
appearance: none;
2104+
background-color: var(--button-bgcolor, ButtonFace);
2105+
color: var(--button-color, ButtonText);
2106+
border-radius: 4px;
2107+
padding: 6px 16px;
2108+
margin: 5px 2px 3px;
2109+
2110+
font: menu;
2111+
font-weight: 600;
2112+
border: none;
2113+
2114+
background-image: url(chrome://global/skin/icons/arrow-down-12.svg);
2115+
background-position: right 10px center;
2116+
padding-inline-end: 32px; /* 2 * 10px padding + image's 12px width */
2117+
background-repeat: no-repeat;
2118+
-moz-context-properties: fill;
2119+
fill: currentColor;
2120+
2121+
&:-moz-locale-dir(rtl) {
2122+
background-position: left 10px center;
2123+
}
2124+
2125+
&:hover {
2126+
background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace));
2127+
}
2128+
2129+
&:hover:active {
2130+
background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace));
2131+
}
2132+
2133+
&:focus-visible {
2134+
outline: var(--focus-outline);
2135+
outline-offset: var(--focus-outline-offset);
2136+
}
2137+
}
2138+
2139+
input,
2140+
textarea {
2141+
appearance: none;
2142+
background-color: var(--panel-background);
2143+
padding: 0.25em;
2144+
border: 1px solid var(--panel-separator-color);
2145+
border-radius: 4px;
2146+
2147+
&:focus-visible {
2148+
border-color: transparent;
2149+
outline: var(--focus-outline);
2150+
outline-offset: var(--focus-outline-offset);
2151+
}
2152+
}
2153+
2154+
input:user-invalid:not(:focus-visible),
2155+
select:user-invalid:not(:focus-visible) {
2156+
border-color: transparent;
2157+
outline: var(--focus-outline);
2158+
outline-offset: var(--focus-outline-offset);
2159+
outline-color: var(--color-error-outline);
2160+
}
2161+
21012162
> .panel-subview-body > label {
21022163
margin-block: 1.5em 0.5em;
21032164

browser/themes/shared/translations/panel.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,19 @@ h1.translations-panel-header-wrapper {
154154
}
155155

156156
#select-translations-panel-translation-area {
157+
background-color: transparent;
158+
border: none;
159+
border-radius: 4px;
157160
height: 8em;
158161
margin-inline: 5px;
162+
outline: 2px solid var(--arrowpanel-dimmed);
163+
overflow: auto;
164+
padding: 4px;
159165
resize: none;
166+
/* This manual focus styling may no longer be needed after Bug 1881256 lands.
167+
https://bugzilla.mozilla.org/show_bug.cgi?id=1881256 */
168+
&:focus {
169+
outline: var(--focus-outline);
170+
outline-offset: var(--focus-outline-offset);
171+
}
160172
}

toolkit/themes/shared/global-shared.css

Lines changed: 1 addition & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -131,68 +131,10 @@ html|input {
131131

132132
html|button,
133133
html|input,
134-
html|select,
135134
html|textarea {
136135
font: inherit;
137136
}
138137

139-
html|input:where(:not([type=radio i], [type=checkbox i], [type=range i])),
140-
html|textarea {
141-
appearance: none;
142-
padding: var(--space-small);
143-
border: 1px solid var(--input-border-color, ThreeDShadow);
144-
border-radius: var(--border-radius-small);
145-
margin: 0;
146-
background-color: var(--input-bgcolor, Field);
147-
color: var(--input-color, FieldText);
148-
149-
&:where(:user-invalid) {
150-
border-color: var(--color-error-outline);
151-
}
152-
153-
&:where(:focus-visible) {
154-
outline: var(--focus-outline);
155-
outline-offset: var(--focus-outline-inset);
156-
}
157-
}
158-
159-
/* adapted from toolkit/themes/shared/menulist-shared.css */
160-
html|select:where(:not([size], [multiple])) {
161-
appearance: none;
162-
padding: 6px 16px;
163-
padding-inline-end: 32px; /* 2 * 10px padding + image's 12px width */
164-
margin: 5px 2px 3px;
165-
border: none;
166-
border-radius: var(--border-radius-small);
167-
168-
font-weight: var(--font-weight-bold);
169-
170-
color: var(--button-color, ButtonText);
171-
background-color: var(--button-bgcolor, ButtonFace);
172-
background-image: url(chrome://global/skin/icons/arrow-down-12.svg);
173-
background-position: right 10px center;
174-
background-repeat: no-repeat;
175-
-moz-context-properties: fill;
176-
fill: currentColor;
177-
178-
&:-moz-locale-dir(rtl) {
179-
background-position-x: left 10px;
180-
}
181-
182-
&:hover {
183-
background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace));
184-
}
185-
186-
&:hover:active {
187-
background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace));
188-
}
189-
190-
&:focus-visible {
191-
outline: var(--focus-outline);
192-
outline-offset: var(--focus-outline-offset);
193-
}
194-
}
195-
196138
.header {
197139
font-weight: var(--font-weight-bold);
198140
}
@@ -285,7 +227,7 @@ button.text-link .button-text {
285227
.footer-button {
286228
appearance: none;
287229
border: 0;
288-
border-radius: var(--border-radius-small);
230+
border-radius: 4px;
289231
color: var(--button-color, inherit);
290232
background-color: var(--button-bgcolor, color-mix(in srgb, currentColor 13%, transparent));
291233
padding: .45em 1em;

0 commit comments

Comments
 (0)