rayan/bruno
1
0
Fork 0
mirror of https://github.com/usebruno/bruno.git synced 2026-06-27 14:44:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: enhance CodeMirror dropdown styles with theme integration (#6577)

Browse Source 
* style: enhance CodeMirror dropdown styles with theme integration for improved consistency

* style: refine dropdown and CodeMirror hint styles for improved consistency and usability

* style: clean up scrollbar and CodeMirror hint styles for improved readability
This commit is contained in:
Abhishek S Lal
2025-12-31 15:10:16 +05:30
committed by GitHub
parent 746a49faed
commit ddc88b3b05
1 changed files with 31 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
packages/bruno-app/src/globalStyles.js
View File

@@ -181,16 +181,16 @@ const GlobalStyle = createGlobalStyle`
* {
scrollbar-color: ${(props) => props.theme.scrollbar.color};
}
*::-webkit-scrollbar {
width: 5px;
}
*::-webkit-scrollbar-track {
background: transparent;
border-radius: 5px;
}
*::-webkit-scrollbar-thumb {
background-color: ${(props) => props.theme.scrollbar.color};
border-radius: 14px;
@@ -222,7 +222,7 @@ const GlobalStyle = createGlobalStyle`
&:hover {
scrollbar-color: ${(props) => props.theme.scrollbar.color} transparent;
&::-webkit-scrollbar-thumb {
background-color: ${(props) => props.theme.scrollbar.color};
}
@@ -273,8 +273,31 @@ const GlobalStyle = createGlobalStyle`
z-index: 10;
}
// Autocomplete hints dropdown container
.CodeMirror-hints {
z-index: 50 !important;
background: ${(props) => props.theme.dropdown.bg};
${(props) =>
props.theme.dropdown.border !== 'none'
? `border: 1px solid ${props.theme.dropdown.border};`
: ''}
${(props) =>
props.theme.dropdown.shadow !== 'none'
? `box-shadow: ${props.theme.dropdown.shadow};`
: ''}
border-radius: ${(props) => props.theme.border.radius.base};
padding: 0.25rem;
font-size: ${(props) => props.theme.font.size.sm};
font-family: inherit;
}
// Individual hint items
.CodeMirror-hint {
color: ${(props) => props.theme.dropdown.color};
border-radius: ${(props) => props.theme.border.radius.base};
line-height: 1.5rem;
font-size: ${(props) => props.theme.font.size.sm};
cursor: pointer;
}
.CodeMirror-brunoVarInfo :first-child {
@@ -492,11 +515,12 @@ const GlobalStyle = createGlobalStyle`
line-height: 1.25rem;
}
// Active/selected hint - using theme colors instead of hardcoded blue
.CodeMirror-hint-active {
background: #08f !important;
color: #fff !important;
background: ${(props) => props.theme.dropdown.hoverBg} !important;
color: ${(props) => props.theme.dropdown.color} !important;
}
.hovered-link.CodeMirror-link {
text-decoration: underline !important;
}