bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-20 02:03:39 +00:00
Code Issues Releases Wiki Activity

[PM-1643] Tweak search box styling (#4788)

Browse Source 
* Set explicit selection foreground/background for header search input

* Modify solarized dark colours for search
This commit is contained in:
Patrick H. Lauke
2023-05-11 11:23:42 +01:00
committed by GitHub
parent ab4d8df2ae
commit de6e0c8c3d
3 changed files with 19 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/browser/src/popup/scss/base.scss
View File

@@ -289,6 +289,14 @@ header {
color: themed("headerInputColor"); color: themed("headerInputColor");
} }
&::selection {
@include themify($themes) {
// explicitly set text selection to invert foreground/background
background-color: themed("headerInputColor");
color: themed("headerInputBackgroundColor");
}
}
&:focus { &:focus {
border-radius: $border-radius; border-radius: $border-radius;
outline: none; outline: none;

6
apps/browser/src/popup/scss/variables.scss
View File

@@ -266,10 +266,10 @@ $themes: (
headerBackgroundColor: $solarizedDarkBase02, headerBackgroundColor: $solarizedDarkBase02,
headerBackgroundHoverColor: $solarizedDarkBase01, headerBackgroundHoverColor: $solarizedDarkBase01,
headerBorderColor: $solarizedDarkBase03, headerBorderColor: $solarizedDarkBase03,
headerInputBackgroundColor: $solarizedDarkBase2, headerInputBackgroundColor: darken($solarizedDarkBase0, 5%),
headerInputBackgroundFocusColor: $solarizedDarkBase1, headerInputBackgroundFocusColor: $solarizedDarkBase1,
headerInputColor: $solarizedDarkBase01, headerInputColor: $solarizedDarkBase02,
headerInputPlaceholderColor: $solarizedDarkBase00, headerInputPlaceholderColor: lighten($solarizedDarkBase02, 5%),
listItemBackgroundHoverColor: lighten($solarizedDarkBase02, 5%), listItemBackgroundHoverColor: lighten($solarizedDarkBase02, 5%),
disabledIconColor: $solarizedDarkBase0, disabledIconColor: $solarizedDarkBase0,
disabledBoxOpacity: 0.5, disabledBoxOpacity: 0.5,

8
apps/desktop/src/scss/header.scss
View File

@@ -73,6 +73,14 @@
color: themed("headerInputColor"); color: themed("headerInputColor");
} }
&::selection {
@include themify($themes) {
// explicitly set text selection to invert foreground/background
background-color: themed("headerInputColor");
color: themed("headerInputBackgroundColor");
}
}
&:focus { &:focus {
border-radius: $border-radius; border-radius: $border-radius;
outline: none; outline: none;