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:
parent
abc97e56a1
commit
09eb9c41d5
4 changed files with 20 additions and 8 deletions
|
@ -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 */
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 */
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 */
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 */
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue