helium/ui: improve flags webui

- fixed alignment issues
- made search bar wider and less ugly
- made select dropdowns rounded
- proper outline for :focus-visible
This commit is contained in:
wukko
2025-09-15 10:25:48 +06:00
parent f1204f7694
commit 06e5b89b3a
2 changed files with 72 additions and 0 deletions

View File

@@ -0,0 +1,71 @@
--- a/components/webui/flags/resources/app.css
+++ b/components/webui/flags/resources/app.css
@@ -105,8 +106,8 @@ button {
}
:focus-visible {
- box-shadow: 0 0 0 2px var(--focus-shadow-color);
- outline: none;
+ outline: var(--focus-shadow-color) 2px solid;
+ outline-offset: 2px;
}
@media (forced-colors: active) {
@@ -159,7 +160,7 @@ button {
#header .flex-container {
box-sizing: border-box;
margin: 0 auto;
- max-width: 700px;
+ max-width: calc(700px + 2rem);
}
#header .flex-container .flex:first-child {
@@ -185,14 +186,18 @@ button {
background: var(--input-background)
url(chrome://resources/images/icon_search.svg) no-repeat 8px 50%;
border: 1px solid transparent;
- border-radius: 3px;
+ border-radius: 8px;
box-sizing: border-box;
color: inherit;
- font-size: .8125rem;
- padding: 12px 36px;
+ font-size: 14px;
+ padding: 9px 38px;
width: 100%;
}
+#header .flex-container .flex:last-child {
+ flex: unset;
+}
+
#search::placeholder {
color: rgba(var(--google-grey-900-rgb), .71);
}
--- a/components/webui/flags/resources/experiment.css
+++ b/components/webui/flags/resources/experiment.css
@@ -12,8 +12,8 @@
}
:focus-visible {
- box-shadow: 0 0 0 2px var(--focus-shadow-color);
- outline: none;
+ outline: var(--focus-shadow-color) 2px solid;
+ outline-offset: 2px;
}
.experiment {
@@ -89,11 +89,12 @@ select {
border: 1px solid var(--link-color);
color: var(--link-color);
font-size: .8125rem;
- height: 1.625rem;
+ height: 1.8rem;
letter-spacing: .01em;
max-width: 150px;
text-align-last: center;
width: 100%;
+ border-radius: 6px;
}
@media (prefers-color-scheme: dark) {

View File

@@ -222,3 +222,4 @@ helium/ui/status-bubble.patch
helium/ui/clean-incognito-guest-ntp.patch
helium/ui/enable-fluent-scrollbar.patch
helium/ui/helium-color-scheme.patch
helium/ui/improve-flags-webui.patch