Improve Vomnibar UI

* Increase input size, removing margin around search bar
* Remove top and bottom margin on unordered list used for search items
* Maintain consistent border radius by clipping child content with
  `overflow: hidden`
This commit is contained in:
Xavier Valarino 2022-12-19 21:06:53 -08:00
parent abc97e56a1
commit 09eb9c41d5
4 changed files with 20 additions and 8 deletions

View file

@ -23,6 +23,7 @@
background: #303446; /* base */ background: #303446; /* base */
border: 2px solid #BABBF1; /* lavender */ border: 2px solid #BABBF1; /* lavender */
animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
overflow: hidden;
} }
@keyframes show { @keyframes show {
@ -40,17 +41,19 @@
color: #C6D0F5; /* text */ color: #C6D0F5; /* text */
background: #303446; /* base */ background: #303446; /* base */
border: none; border: none;
padding: 2; height: unset;
padding: 16px 30px;
} }
#vomnibar .vomnibarSearchArea { #vomnibar .vomnibarSearchArea {
padding: 10px 30px;
border: none; border: none;
padding: unset;
background: #303446; /* base */ background: #303446; /* base */
} }
#vomnibar ul { #vomnibar ul {
padding: 0; padding: 0;
margin: 0;
background: #303446; /* base */ background: #303446; /* base */
border-top: 1px solid #414559; /* surface0 */ border-top: 1px solid #414559; /* surface0 */
} }

View file

@ -23,6 +23,7 @@
background: #EFF1F5; /* base */ background: #EFF1F5; /* base */
border: 2px solid #7287FD; /* lavender */ border: 2px solid #7287FD; /* lavender */
animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
overflow: hidden;
} }
@keyframes show { @keyframes show {
@ -40,17 +41,19 @@
color: #4C4F69; /* text */ color: #4C4F69; /* text */
background: #EFF1F5; /* base */ background: #EFF1F5; /* base */
border: none; border: none;
padding: 2; height: unset;
padding: 16px 30px;
} }
#vomnibar .vomnibarSearchArea { #vomnibar .vomnibarSearchArea {
padding: 10px 30px;
border: none; border: none;
padding: unset;
background: #EFF1F5; /* base */ background: #EFF1F5; /* base */
} }
#vomnibar ul { #vomnibar ul {
padding: 0; padding: 0;
margin: 0;
background: #EFF1F5; /* base */ background: #EFF1F5; /* base */
border-top: 1px solid #CCD0DA; /* surface0 */ border-top: 1px solid #CCD0DA; /* surface0 */
} }

View file

@ -23,6 +23,7 @@
background: #24273A; /* base */ background: #24273A; /* base */
border: 2px solid #B7BDF8; /* lavender */ border: 2px solid #B7BDF8; /* lavender */
animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
overflow: hidden;
} }
@keyframes show { @keyframes show {
@ -40,17 +41,19 @@
color: #CAD3F5; /* text */ color: #CAD3F5; /* text */
background: #24273A; /* base */ background: #24273A; /* base */
border: none; border: none;
padding: 2; height: unset;
padding: 16px 30px;
} }
#vomnibar .vomnibarSearchArea { #vomnibar .vomnibarSearchArea {
padding: 10px 30px;
border: none; border: none;
padding: unset;
background: #24273A; /* base */ background: #24273A; /* base */
} }
#vomnibar ul { #vomnibar ul {
padding: 0; padding: 0;
margin: 0;
background: #24273A; /* base */ background: #24273A; /* base */
border-top: 1px solid #363A4F; /* surface0 */ border-top: 1px solid #363A4F; /* surface0 */
} }

View file

@ -23,6 +23,7 @@
background: #1E1E2E; /* base */ background: #1E1E2E; /* base */
border: 2px solid #B4BEFE; /* lavender */ border: 2px solid #B4BEFE; /* lavender */
animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
overflow: hidden;
} }
@keyframes show { @keyframes show {
@ -40,17 +41,19 @@
color: #CDD6F4; /* text */ color: #CDD6F4; /* text */
background: #1E1E2E; /* base */ background: #1E1E2E; /* base */
border: none; border: none;
padding: 2; height: unset;
padding: 16px 30px;
} }
#vomnibar .vomnibarSearchArea { #vomnibar .vomnibarSearchArea {
padding: 10px 30px;
border: none; border: none;
padding: unset;
background: #1E1E2E; /* base */ background: #1E1E2E; /* base */
} }
#vomnibar ul { #vomnibar ul {
padding: 0; padding: 0;
margin: 0;
background: #1E1E2E; /* base */ background: #1E1E2E; /* base */
border-top: 1px solid #313244; /* surface0 */ border-top: 1px solid #313244; /* surface0 */
} }