Update menu item styling

This commit is contained in:
Idrees Hassan
2025-09-13 13:41:29 -04:00
parent d02c68c388
commit f388079d44
4 changed files with 156 additions and 93 deletions

View File

@@ -35,15 +35,15 @@
z-index: 2147483639 !important;
position: fixed;
background-color: #ffecda;
box-shadow:
var(--border-size) 0 var(--border-color),
var(--neg-border-size) 0 var(--border-color),
0 var(--neg-border-size) var(--border-color),
0 var(--border-size) var(--border-color),
var(--double-border-size) 0 var(--border-color),
var(--neg-double-border-size) 0 var(--border-color),
0 var(--neg-double-border-size) var(--border-color),
0 var(--double-border-size) var(--border-color),
box-shadow:
var(--border-size) 0 var(--border-color),
var(--neg-border-size) 0 var(--border-color),
0 var(--neg-border-size) var(--border-color),
0 var(--border-size) var(--border-color),
var(--double-border-size) 0 var(--border-color),
var(--neg-double-border-size) 0 var(--border-color),
0 var(--neg-double-border-size) var(--border-color),
0 var(--double-border-size) var(--border-color),
0 0 0 var(--border-size) var(--border-color),
0 0 0 var(--double-border-size) white,
var(--double-border-size) 0 0 var(--border-size) white,
@@ -75,8 +75,15 @@
}
@keyframes pop-in {
0% { opacity: 1; transform: scale(0.1); }
100% { opacity: 1; transform: scale(var(--ui-scale)); }
0% {
opacity: 1;
transform: scale(0.1);
}
100% {
opacity: 1;
transform: scale(var(--ui-scale));
}
}
.birb-window-header {
@@ -92,10 +99,10 @@
padding-right: 30px;
background-color: var(--highlight);
box-shadow:
var(--border-size) 0 var(--highlight),
var(--neg-border-size) 0 var(--highlight),
0 var(--neg-border-size) var(--highlight),
var(--neg-border-size) var(--border-size) var(--border-color),
var(--border-size) 0 var(--highlight),
var(--neg-border-size) 0 var(--highlight),
0 var(--neg-border-size) var(--highlight),
var(--neg-border-size) var(--border-size) var(--border-color),
var(--border-size) var(--border-size) var(--border-color);
color: var(--border-color) !important;
font-size: 16px;
@@ -128,9 +135,9 @@
background-color: #ffecda;
margin-top: var(--border-size);
width: 100%;
flex-grow: 1;
flex-grow: 1;
box-shadow:
var(--border-size) 0 #ffecda,
var(--border-size) 0 #ffecda,
var(--neg-border-size) 0 #ffecda,
0 var(--border-size) #ffecda,
0 var(--neg-border-size) var(--border-color),
@@ -139,10 +146,8 @@
flex-direction: column;
align-items: center;
justify-content: center;
padding-left: 15px;
padding-right: 15px;
padding-top: 8px;
padding-bottom: 8px;
padding-top: calc(var(--double-border-size));
padding-bottom: var(--border-size);
}
.birb-pico-8-content {
@@ -160,14 +165,14 @@
margin-right: -30px;
margin-top: -10px;
margin-bottom: -23px;
border:none;
border: none;
aspect-ratio: 1;
}
.birb-music-player-content {
background: #ffecda;
box-shadow:
var(--border-size) 0 #ffecda,
var(--border-size) 0 #ffecda,
var(--neg-border-size) 0 #ffecda,
0 var(--border-size) #ffecda,
0 var(--neg-border-size) var(--border-color),
@@ -178,11 +183,14 @@
padding: 10px;
}
.birb-window-list-item {
width: 100%;
.birb-menu-item {
width: calc(100% - var(--double-border-size));
font-size: 14px;
padding-top: 4px;
padding-top: 5px;
padding-bottom: 4px;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
opacity: 0.7 !important;
user-select: none;
display: flex;
@@ -191,11 +199,18 @@
color: black !important;
}
.birb-window-list-item:hover {
.birb-menu-item:hover {
opacity: 1 !important;
background: var(--highlight) !important;
color: white !important;
box-shadow:
var(--border-size) 0 var(--border-color),
var(--neg-border-size) 0 var(--border-color),
0 var(--neg-border-size) var(--border-color),
0 var(--border-size) var(--border-color);
}
.birb-window-list-item-arrow {
.birb-menu-item-arrow {
display: inline-block;
}
@@ -221,6 +236,9 @@
flex-direction: row;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
}
.birb-grid-item {
@@ -261,14 +279,14 @@
}
.birb-field-guide-description {
box-sizing: border-box;
width: 100%;
width: calc(100% - 16px);
margin-top: 10px;
padding: 8px;
padding-top: 4px;
padding-bottom: 4px;
margin-bottom: 6px;
font-size: 14px;
box-sizing: border-box;
color: rgb(124, 108, 75);
}