noham/Pocket-Bird
1
0
Fork 0
mirror of https://github.com/NohamR/Pocket-Bird.git synced 2026-05-25 19:59:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update menu item styling

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

5
birb.js
View File

@@ -277,6 +277,7 @@ const species = {
[UNDERBELLY]: "#babec2", [UNDERBELLY]: "#babec2",
[WING]: "#aaa094", [WING]: "#aaa094",
[WING_EDGE]: "#888580", [WING_EDGE]: "#888580",
[THEME_HIGHLIGHT]: "#ffaf34",
}), }),
redCardinal: new BirdType("Red Cardinal", redCardinal: new BirdType("Red Cardinal",
"Native to the eastern United States, this strikingly red bird is hard to miss.", { "Native to the eastern United States, this strikingly red bird is hard to miss.", {
@@ -339,6 +340,7 @@ const species = {
[UNDERBELLY]: "#dcdcdc", [UNDERBELLY]: "#dcdcdc",
[WING]: "#2b2b2b", [WING]: "#2b2b2b",
[WING_EDGE]: "#ebebeb", [WING_EDGE]: "#ebebeb",
[THEME_HIGHLIGHT]: "#fc5633",
}), }),
americanRobin: new BirdType("American Robin", americanRobin: new BirdType("American Robin",
"While not a true robin, this social North American bird is so named due to its orange coloring. It seems unbothered by nearby humans.", { "While not a true robin, this social North American bird is so named due to its orange coloring. It seems unbothered by nearby humans.", {
@@ -349,6 +351,7 @@ const species = {
[UNDERBELLY]: "#eb7a3a", [UNDERBELLY]: "#eb7a3a",
[WING]: "#444444", [WING]: "#444444",
[WING_EDGE]: "#232323", [WING_EDGE]: "#232323",
[THEME_HIGHLIGHT]: "#eb7a3a",
}), }),
carolinaWren: new BirdType("Carolina Wren", carolinaWren: new BirdType("Carolina Wren",
"Native to the eastern United States, these little birds are known for their curious and energetic nature.", { "Native to the eastern United States, these little birds are known for their curious and energetic nature.", {
@@ -1482,7 +1485,7 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
if (item instanceof Separator) { if (item instanceof Separator) {
return makeElement("birb-window-separator"); return makeElement("birb-window-separator");
} }
let menuItem = makeElement("birb-window-list-item", item.text); let menuItem = makeElement("birb-menu-item", item.text);
onClick(menuItem, () => { onClick(menuItem, () => {
if (item.removeMenu) { if (item.removeMenu) {
removeMenu(); removeMenu();

51
dist/birb.js vendored
View File

@@ -127,8 +127,15 @@ const STYLESHEET = `:root {
} }
@keyframes pop-in { @keyframes pop-in {
0% { opacity: 1; transform: scale(0.1); } 0% {
100% { opacity: 1; transform: scale(var(--ui-scale)); } opacity: 1;
transform: scale(0.1);
}
100% {
opacity: 1;
transform: scale(var(--ui-scale));
}
} }
.birb-window-header { .birb-window-header {
@@ -191,10 +198,8 @@ const STYLESHEET = `:root {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding-left: 15px; padding-top: calc(var(--double-border-size));
padding-right: 15px; padding-bottom: var(--border-size);
padding-top: 8px;
padding-bottom: 8px;
} }
.birb-pico-8-content { .birb-pico-8-content {
@@ -212,7 +217,7 @@ const STYLESHEET = `:root {
margin-right: -30px; margin-right: -30px;
margin-top: -10px; margin-top: -10px;
margin-bottom: -23px; margin-bottom: -23px;
border:none; border: none;
aspect-ratio: 1; aspect-ratio: 1;
} }
@@ -230,11 +235,14 @@ const STYLESHEET = `:root {
padding: 10px; padding: 10px;
} }
.birb-window-list-item { .birb-menu-item {
width: 100%; width: calc(100% - var(--double-border-size));
font-size: 14px; font-size: 14px;
padding-top: 4px; padding-top: 5px;
padding-bottom: 4px; padding-bottom: 4px;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
opacity: 0.7 !important; opacity: 0.7 !important;
user-select: none; user-select: none;
display: flex; display: flex;
@@ -243,11 +251,18 @@ const STYLESHEET = `:root {
color: black !important; color: black !important;
} }
.birb-window-list-item:hover { .birb-menu-item:hover {
opacity: 1 !important; 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; display: inline-block;
} }
@@ -273,6 +288,9 @@ const STYLESHEET = `:root {
flex-direction: row; flex-direction: row;
padding-top: 4px; padding-top: 4px;
padding-bottom: 4px; padding-bottom: 4px;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
} }
.birb-grid-item { .birb-grid-item {
@@ -313,14 +331,14 @@ const STYLESHEET = `:root {
} }
.birb-field-guide-description { .birb-field-guide-description {
box-sizing: border-box; width: calc(100% - 16px);
width: 100%;
margin-top: 10px; margin-top: 10px;
padding: 8px; padding: 8px;
padding-top: 4px; padding-top: 4px;
padding-bottom: 4px; padding-bottom: 4px;
margin-bottom: 6px; margin-bottom: 6px;
font-size: 14px; font-size: 14px;
box-sizing: border-box;
color: rgb(124, 108, 75); color: rgb(124, 108, 75);
} }
@@ -592,6 +610,7 @@ const species = {
[UNDERBELLY]: "#babec2", [UNDERBELLY]: "#babec2",
[WING]: "#aaa094", [WING]: "#aaa094",
[WING_EDGE]: "#888580", [WING_EDGE]: "#888580",
[THEME_HIGHLIGHT]: "#ffaf34",
}), }),
redCardinal: new BirdType("Red Cardinal", redCardinal: new BirdType("Red Cardinal",
"Native to the eastern United States, this strikingly red bird is hard to miss.", { "Native to the eastern United States, this strikingly red bird is hard to miss.", {
@@ -654,6 +673,7 @@ const species = {
[UNDERBELLY]: "#dcdcdc", [UNDERBELLY]: "#dcdcdc",
[WING]: "#2b2b2b", [WING]: "#2b2b2b",
[WING_EDGE]: "#ebebeb", [WING_EDGE]: "#ebebeb",
[THEME_HIGHLIGHT]: "#fc5633",
}), }),
americanRobin: new BirdType("American Robin", americanRobin: new BirdType("American Robin",
"While not a true robin, this social North American bird is so named due to its orange coloring. It seems unbothered by nearby humans.", { "While not a true robin, this social North American bird is so named due to its orange coloring. It seems unbothered by nearby humans.", {
@@ -664,6 +684,7 @@ const species = {
[UNDERBELLY]: "#eb7a3a", [UNDERBELLY]: "#eb7a3a",
[WING]: "#444444", [WING]: "#444444",
[WING_EDGE]: "#232323", [WING_EDGE]: "#232323",
[THEME_HIGHLIGHT]: "#eb7a3a",
}), }),
carolinaWren: new BirdType("Carolina Wren", carolinaWren: new BirdType("Carolina Wren",
"Native to the eastern United States, these little birds are known for their curious and energetic nature.", { "Native to the eastern United States, these little birds are known for their curious and energetic nature.", {
@@ -1797,7 +1818,7 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
if (item instanceof Separator) { if (item instanceof Separator) {
return makeElement("birb-window-separator"); return makeElement("birb-window-separator");
} }
let menuItem = makeElement("birb-window-list-item", item.text); let menuItem = makeElement("birb-menu-item", item.text);
onClick(menuItem, () => { onClick(menuItem, () => {
if (item.removeMenu) { if (item.removeMenu) {
removeMenu(); removeMenu();

51
dist/birb.user.js vendored
View File

@@ -141,8 +141,15 @@ const STYLESHEET = `:root {
} }
@keyframes pop-in { @keyframes pop-in {
0% { opacity: 1; transform: scale(0.1); } 0% {
100% { opacity: 1; transform: scale(var(--ui-scale)); } opacity: 1;
transform: scale(0.1);
}
100% {
opacity: 1;
transform: scale(var(--ui-scale));
}
} }
.birb-window-header { .birb-window-header {
@@ -205,10 +212,8 @@ const STYLESHEET = `:root {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding-left: 15px; padding-top: calc(var(--double-border-size));
padding-right: 15px; padding-bottom: var(--border-size);
padding-top: 8px;
padding-bottom: 8px;
} }
.birb-pico-8-content { .birb-pico-8-content {
@@ -226,7 +231,7 @@ const STYLESHEET = `:root {
margin-right: -30px; margin-right: -30px;
margin-top: -10px; margin-top: -10px;
margin-bottom: -23px; margin-bottom: -23px;
border:none; border: none;
aspect-ratio: 1; aspect-ratio: 1;
} }
@@ -244,11 +249,14 @@ const STYLESHEET = `:root {
padding: 10px; padding: 10px;
} }
.birb-window-list-item { .birb-menu-item {
width: 100%; width: calc(100% - var(--double-border-size));
font-size: 14px; font-size: 14px;
padding-top: 4px; padding-top: 5px;
padding-bottom: 4px; padding-bottom: 4px;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
opacity: 0.7 !important; opacity: 0.7 !important;
user-select: none; user-select: none;
display: flex; display: flex;
@@ -257,11 +265,18 @@ const STYLESHEET = `:root {
color: black !important; color: black !important;
} }
.birb-window-list-item:hover { .birb-menu-item:hover {
opacity: 1 !important; 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; display: inline-block;
} }
@@ -287,6 +302,9 @@ const STYLESHEET = `:root {
flex-direction: row; flex-direction: row;
padding-top: 4px; padding-top: 4px;
padding-bottom: 4px; padding-bottom: 4px;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
} }
.birb-grid-item { .birb-grid-item {
@@ -327,14 +345,14 @@ const STYLESHEET = `:root {
} }
.birb-field-guide-description { .birb-field-guide-description {
box-sizing: border-box; width: calc(100% - 16px);
width: 100%;
margin-top: 10px; margin-top: 10px;
padding: 8px; padding: 8px;
padding-top: 4px; padding-top: 4px;
padding-bottom: 4px; padding-bottom: 4px;
margin-bottom: 6px; margin-bottom: 6px;
font-size: 14px; font-size: 14px;
box-sizing: border-box;
color: rgb(124, 108, 75); color: rgb(124, 108, 75);
} }
@@ -606,6 +624,7 @@ const species = {
[UNDERBELLY]: "#babec2", [UNDERBELLY]: "#babec2",
[WING]: "#aaa094", [WING]: "#aaa094",
[WING_EDGE]: "#888580", [WING_EDGE]: "#888580",
[THEME_HIGHLIGHT]: "#ffaf34",
}), }),
redCardinal: new BirdType("Red Cardinal", redCardinal: new BirdType("Red Cardinal",
"Native to the eastern United States, this strikingly red bird is hard to miss.", { "Native to the eastern United States, this strikingly red bird is hard to miss.", {
@@ -668,6 +687,7 @@ const species = {
[UNDERBELLY]: "#dcdcdc", [UNDERBELLY]: "#dcdcdc",
[WING]: "#2b2b2b", [WING]: "#2b2b2b",
[WING_EDGE]: "#ebebeb", [WING_EDGE]: "#ebebeb",
[THEME_HIGHLIGHT]: "#fc5633",
}), }),
americanRobin: new BirdType("American Robin", americanRobin: new BirdType("American Robin",
"While not a true robin, this social North American bird is so named due to its orange coloring. It seems unbothered by nearby humans.", { "While not a true robin, this social North American bird is so named due to its orange coloring. It seems unbothered by nearby humans.", {
@@ -678,6 +698,7 @@ const species = {
[UNDERBELLY]: "#eb7a3a", [UNDERBELLY]: "#eb7a3a",
[WING]: "#444444", [WING]: "#444444",
[WING_EDGE]: "#232323", [WING_EDGE]: "#232323",
[THEME_HIGHLIGHT]: "#eb7a3a",
}), }),
carolinaWren: new BirdType("Carolina Wren", carolinaWren: new BirdType("Carolina Wren",
"Native to the eastern United States, these little birds are known for their curious and energetic nature.", { "Native to the eastern United States, these little birds are known for their curious and energetic nature.", {
@@ -1811,7 +1832,7 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
if (item instanceof Separator) { if (item instanceof Separator) {
return makeElement("birb-window-separator"); return makeElement("birb-window-separator");
} }
let menuItem = makeElement("birb-window-list-item", item.text); let menuItem = makeElement("birb-menu-item", item.text);
onClick(menuItem, () => { onClick(menuItem, () => {
if (item.removeMenu) { if (item.removeMenu) {
removeMenu(); removeMenu();

46
stylesheet.css
View File

@@ -75,8 +75,15 @@
} }
@keyframes pop-in { @keyframes pop-in {
0% { opacity: 1; transform: scale(0.1); } 0% {
100% { opacity: 1; transform: scale(var(--ui-scale)); } opacity: 1;
transform: scale(0.1);
}
100% {
opacity: 1;
transform: scale(var(--ui-scale));
}
} }
.birb-window-header { .birb-window-header {
@@ -139,10 +146,8 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding-left: 15px; padding-top: calc(var(--double-border-size));
padding-right: 15px; padding-bottom: var(--border-size);
padding-top: 8px;
padding-bottom: 8px;
} }
.birb-pico-8-content { .birb-pico-8-content {
@@ -160,7 +165,7 @@
margin-right: -30px; margin-right: -30px;
margin-top: -10px; margin-top: -10px;
margin-bottom: -23px; margin-bottom: -23px;
border:none; border: none;
aspect-ratio: 1; aspect-ratio: 1;
} }
@@ -178,11 +183,14 @@
padding: 10px; padding: 10px;
} }
.birb-window-list-item { .birb-menu-item {
width: 100%; width: calc(100% - var(--double-border-size));
font-size: 14px; font-size: 14px;
padding-top: 4px; padding-top: 5px;
padding-bottom: 4px; padding-bottom: 4px;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
opacity: 0.7 !important; opacity: 0.7 !important;
user-select: none; user-select: none;
display: flex; display: flex;
@@ -191,11 +199,18 @@
color: black !important; color: black !important;
} }
.birb-window-list-item:hover { .birb-menu-item:hover {
opacity: 1 !important; 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; display: inline-block;
} }
@@ -221,6 +236,9 @@
flex-direction: row; flex-direction: row;
padding-top: 4px; padding-top: 4px;
padding-bottom: 4px; padding-bottom: 4px;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
} }
.birb-grid-item { .birb-grid-item {
@@ -261,14 +279,14 @@
} }
.birb-field-guide-description { .birb-field-guide-description {
box-sizing: border-box; width: calc(100% - 16px);
width: 100%;
margin-top: 10px; margin-top: 10px;
padding: 8px; padding: 8px;
padding-top: 4px; padding-top: 4px;
padding-bottom: 4px; padding-bottom: 4px;
margin-bottom: 6px; margin-bottom: 6px;
font-size: 14px; font-size: 14px;
box-sizing: border-box;
color: rgb(124, 108, 75); color: rgb(124, 108, 75);
} }