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

Update field guide colors and use more color variables

Browse Source
This commit is contained in:
Idrees Hassan
2025-09-13 17:13:28 -04:00
parent 4d1254b9d4
commit 74612dbfcc
4 changed files with 68 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
build.js
View File

@@ -24,7 +24,7 @@ const userScriptHeader =
`// ==UserScript== `// ==UserScript==
// @name Browser Bird // @name Browser Bird
// @namespace https://idreesinc.com // @namespace https://idreesinc.com
// @version 2025-09-13-01 // @version 2025-09-13-02
// @description birb // @description birb
// @author Idrees // @author Idrees
// @downloadURL https://github.com/IdreesInc/Browser-Bird/raw/refs/heads/main/dist/birb.user.js // @downloadURL https://github.com/IdreesInc/Browser-Bird/raw/refs/heads/main/dist/birb.user.js

37
dist/birb.js vendored
View File

@@ -58,6 +58,8 @@ const STYLESHEET = `:root {
--neg-double-border-size: calc(var(--neg-border-size) * 2); --neg-double-border-size: calc(var(--neg-border-size) * 2);
--highlight: #ffa3cb; --highlight: #ffa3cb;
--border-color: var(--highlight); --border-color: var(--highlight);
--background-color: #ffecda;
--mix-color: color-mix(in srgb, var(--highlight) 50%, var(--background-color));
--birb-scale: ${BIRB_CSS_SCALE}; --birb-scale: ${BIRB_CSS_SCALE};
--ui-scale: ${UI_CSS_SCALE}; --ui-scale: ${UI_CSS_SCALE};
} }
@@ -87,7 +89,7 @@ const STYLESHEET = `:root {
color: #000000 !important; color: #000000 !important;
z-index: 2147483639 !important; z-index: 2147483639 !important;
position: fixed; position: fixed;
background-color: #ffecda; background-color: var(--background-color);
box-shadow: box-shadow:
var(--border-size) 0 var(--border-color), var(--border-size) 0 var(--border-color),
var(--neg-border-size) 0 var(--border-color), var(--neg-border-size) 0 var(--border-color),
@@ -165,14 +167,14 @@ const STYLESHEET = `:root {
text-align: center; text-align: center;
flex-grow: 1; flex-grow: 1;
user-select: none; user-select: none;
color: #ffecda; color: var(--background-color);
} }
.birb-window-close { .birb-window-close {
position: absolute; position: absolute;
top: 1px; top: 1px;
right: 0; right: 0;
color: #ffecda; color: var(--background-color);
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
padding-left: 5px; padding-left: 5px;
@@ -185,13 +187,13 @@ const STYLESHEET = `:root {
.birb-window-content { .birb-window-content {
box-sizing: border-box; box-sizing: border-box;
background-color: #ffecda; background-color: var(--background-color);
margin-top: var(--border-size); margin-top: var(--border-size);
flex-grow: 1; flex-grow: 1;
box-shadow: box-shadow:
var(--border-size) 0 #ffecda, var(--border-size) 0 var(--background-color),
var(--neg-border-size) 0 #ffecda, var(--neg-border-size) 0 var(--background-color),
0 var(--border-size) #ffecda, 0 var(--border-size) var(--background-color),
0 var(--neg-border-size) var(--border-color), 0 var(--neg-border-size) var(--border-color),
0 var(--border-size) var(--border-color); 0 var(--border-size) var(--border-color);
display: flex; display: flex;
@@ -222,11 +224,11 @@ const STYLESHEET = `:root {
} }
.birb-music-player-content { .birb-music-player-content {
background: #ffecda; background: var(--background-color);
box-shadow: box-shadow:
var(--border-size) 0 #ffecda, var(--border-size) 0 var(--background-color),
var(--neg-border-size) 0 #ffecda, var(--neg-border-size) 0 var(--background-color),
0 var(--border-size) #ffecda, 0 var(--border-size) var(--background-color),
0 var(--neg-border-size) var(--border-color), 0 var(--neg-border-size) var(--border-color),
0 var(--border-size) var(--border-color); 0 var(--border-size) var(--border-color);
display: flex; display: flex;
@@ -256,10 +258,10 @@ const STYLESHEET = `:root {
background: var(--highlight) !important; background: var(--highlight) !important;
color: white !important; color: white !important;
box-shadow: box-shadow:
var(--border-size) 0 var(--border-color), var(--border-size) 0 var(--highlight),
var(--neg-border-size) 0 var(--border-color), var(--neg-border-size) 0 var(--highlight),
0 var(--neg-border-size) var(--border-color), 0 var(--neg-border-size) var(--highlight),
0 var(--border-size) var(--border-color); 0 var(--border-size) var(--highlight);
} }
.birb-menu-item-arrow { .birb-menu-item-arrow {
@@ -305,6 +307,10 @@ const STYLESHEET = `:root {
cursor: pointer; cursor: pointer;
} }
.birb-grid-item:hover {
border-color: var(--highlight);
}
.birb-grid-item canvas { .birb-grid-item canvas {
image-rendering: pixelated; image-rendering: pixelated;
transform: scale(2); transform: scale(2);
@@ -328,6 +334,7 @@ const STYLESHEET = `:root {
.birb-grid-item-selected { .birb-grid-item-selected {
border: var(--border-size) solid var(--highlight); border: var(--border-size) solid var(--highlight);
background: var(--mix-color);
} }
.birb-field-guide-description { .birb-field-guide-description {

39
dist/birb.user.js vendored
View File

@@ -1,7 +1,7 @@
// ==UserScript== // ==UserScript==
// @name Browser Bird // @name Browser Bird
// @namespace https://idreesinc.com // @namespace https://idreesinc.com
// @version 2025-09-13-01 // @version 2025-09-13-02
// @description birb // @description birb
// @author Idrees // @author Idrees
// @downloadURL https://github.com/IdreesInc/Browser-Bird/raw/refs/heads/main/dist/birb.user.js // @downloadURL https://github.com/IdreesInc/Browser-Bird/raw/refs/heads/main/dist/birb.user.js
@@ -72,6 +72,8 @@ const STYLESHEET = `:root {
--neg-double-border-size: calc(var(--neg-border-size) * 2); --neg-double-border-size: calc(var(--neg-border-size) * 2);
--highlight: #ffa3cb; --highlight: #ffa3cb;
--border-color: var(--highlight); --border-color: var(--highlight);
--background-color: #ffecda;
--mix-color: color-mix(in srgb, var(--highlight) 50%, var(--background-color));
--birb-scale: ${BIRB_CSS_SCALE}; --birb-scale: ${BIRB_CSS_SCALE};
--ui-scale: ${UI_CSS_SCALE}; --ui-scale: ${UI_CSS_SCALE};
} }
@@ -101,7 +103,7 @@ const STYLESHEET = `:root {
color: #000000 !important; color: #000000 !important;
z-index: 2147483639 !important; z-index: 2147483639 !important;
position: fixed; position: fixed;
background-color: #ffecda; background-color: var(--background-color);
box-shadow: box-shadow:
var(--border-size) 0 var(--border-color), var(--border-size) 0 var(--border-color),
var(--neg-border-size) 0 var(--border-color), var(--neg-border-size) 0 var(--border-color),
@@ -179,14 +181,14 @@ const STYLESHEET = `:root {
text-align: center; text-align: center;
flex-grow: 1; flex-grow: 1;
user-select: none; user-select: none;
color: #ffecda; color: var(--background-color);
} }
.birb-window-close { .birb-window-close {
position: absolute; position: absolute;
top: 1px; top: 1px;
right: 0; right: 0;
color: #ffecda; color: var(--background-color);
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
padding-left: 5px; padding-left: 5px;
@@ -199,13 +201,13 @@ const STYLESHEET = `:root {
.birb-window-content { .birb-window-content {
box-sizing: border-box; box-sizing: border-box;
background-color: #ffecda; background-color: var(--background-color);
margin-top: var(--border-size); margin-top: var(--border-size);
flex-grow: 1; flex-grow: 1;
box-shadow: box-shadow:
var(--border-size) 0 #ffecda, var(--border-size) 0 var(--background-color),
var(--neg-border-size) 0 #ffecda, var(--neg-border-size) 0 var(--background-color),
0 var(--border-size) #ffecda, 0 var(--border-size) var(--background-color),
0 var(--neg-border-size) var(--border-color), 0 var(--neg-border-size) var(--border-color),
0 var(--border-size) var(--border-color); 0 var(--border-size) var(--border-color);
display: flex; display: flex;
@@ -236,11 +238,11 @@ const STYLESHEET = `:root {
} }
.birb-music-player-content { .birb-music-player-content {
background: #ffecda; background: var(--background-color);
box-shadow: box-shadow:
var(--border-size) 0 #ffecda, var(--border-size) 0 var(--background-color),
var(--neg-border-size) 0 #ffecda, var(--neg-border-size) 0 var(--background-color),
0 var(--border-size) #ffecda, 0 var(--border-size) var(--background-color),
0 var(--neg-border-size) var(--border-color), 0 var(--neg-border-size) var(--border-color),
0 var(--border-size) var(--border-color); 0 var(--border-size) var(--border-color);
display: flex; display: flex;
@@ -270,10 +272,10 @@ const STYLESHEET = `:root {
background: var(--highlight) !important; background: var(--highlight) !important;
color: white !important; color: white !important;
box-shadow: box-shadow:
var(--border-size) 0 var(--border-color), var(--border-size) 0 var(--highlight),
var(--neg-border-size) 0 var(--border-color), var(--neg-border-size) 0 var(--highlight),
0 var(--neg-border-size) var(--border-color), 0 var(--neg-border-size) var(--highlight),
0 var(--border-size) var(--border-color); 0 var(--border-size) var(--highlight);
} }
.birb-menu-item-arrow { .birb-menu-item-arrow {
@@ -319,6 +321,10 @@ const STYLESHEET = `:root {
cursor: pointer; cursor: pointer;
} }
.birb-grid-item:hover {
border-color: var(--highlight);
}
.birb-grid-item canvas { .birb-grid-item canvas {
image-rendering: pixelated; image-rendering: pixelated;
transform: scale(2); transform: scale(2);
@@ -342,6 +348,7 @@ const STYLESHEET = `:root {
.birb-grid-item-selected { .birb-grid-item-selected {
border: var(--border-size) solid var(--highlight); border: var(--border-size) solid var(--highlight);
background: var(--mix-color);
} }
.birb-field-guide-description { .birb-field-guide-description {

37
stylesheet.css
View File

@@ -5,6 +5,8 @@
--neg-double-border-size: calc(var(--neg-border-size) * 2); --neg-double-border-size: calc(var(--neg-border-size) * 2);
--highlight: #ffa3cb; --highlight: #ffa3cb;
--border-color: var(--highlight); --border-color: var(--highlight);
--background-color: #ffecda;
--mix-color: color-mix(in srgb, var(--highlight) 50%, var(--background-color));
--birb-scale: ${BIRB_CSS_SCALE}; --birb-scale: ${BIRB_CSS_SCALE};
--ui-scale: ${UI_CSS_SCALE}; --ui-scale: ${UI_CSS_SCALE};
} }
@@ -34,7 +36,7 @@
color: #000000 !important; color: #000000 !important;
z-index: 2147483639 !important; z-index: 2147483639 !important;
position: fixed; position: fixed;
background-color: #ffecda; background-color: var(--background-color);
box-shadow: box-shadow:
var(--border-size) 0 var(--border-color), var(--border-size) 0 var(--border-color),
var(--neg-border-size) 0 var(--border-color), var(--neg-border-size) 0 var(--border-color),
@@ -112,14 +114,14 @@
text-align: center; text-align: center;
flex-grow: 1; flex-grow: 1;
user-select: none; user-select: none;
color: #ffecda; color: var(--background-color);
} }
.birb-window-close { .birb-window-close {
position: absolute; position: absolute;
top: 1px; top: 1px;
right: 0; right: 0;
color: #ffecda; color: var(--background-color);
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
padding-left: 5px; padding-left: 5px;
@@ -132,13 +134,13 @@
.birb-window-content { .birb-window-content {
box-sizing: border-box; box-sizing: border-box;
background-color: #ffecda; background-color: var(--background-color);
margin-top: var(--border-size); margin-top: var(--border-size);
flex-grow: 1; flex-grow: 1;
box-shadow: box-shadow:
var(--border-size) 0 #ffecda, var(--border-size) 0 var(--background-color),
var(--neg-border-size) 0 #ffecda, var(--neg-border-size) 0 var(--background-color),
0 var(--border-size) #ffecda, 0 var(--border-size) var(--background-color),
0 var(--neg-border-size) var(--border-color), 0 var(--neg-border-size) var(--border-color),
0 var(--border-size) var(--border-color); 0 var(--border-size) var(--border-color);
display: flex; display: flex;
@@ -169,11 +171,11 @@
} }
.birb-music-player-content { .birb-music-player-content {
background: #ffecda; background: var(--background-color);
box-shadow: box-shadow:
var(--border-size) 0 #ffecda, var(--border-size) 0 var(--background-color),
var(--neg-border-size) 0 #ffecda, var(--neg-border-size) 0 var(--background-color),
0 var(--border-size) #ffecda, 0 var(--border-size) var(--background-color),
0 var(--neg-border-size) var(--border-color), 0 var(--neg-border-size) var(--border-color),
0 var(--border-size) var(--border-color); 0 var(--border-size) var(--border-color);
display: flex; display: flex;
@@ -203,10 +205,10 @@
background: var(--highlight) !important; background: var(--highlight) !important;
color: white !important; color: white !important;
box-shadow: box-shadow:
var(--border-size) 0 var(--border-color), var(--border-size) 0 var(--highlight),
var(--neg-border-size) 0 var(--border-color), var(--neg-border-size) 0 var(--highlight),
0 var(--neg-border-size) var(--border-color), 0 var(--neg-border-size) var(--highlight),
0 var(--border-size) var(--border-color); 0 var(--border-size) var(--highlight);
} }
.birb-menu-item-arrow { .birb-menu-item-arrow {
@@ -252,6 +254,10 @@
cursor: pointer; cursor: pointer;
} }
.birb-grid-item:hover {
border-color: var(--highlight);
}
.birb-grid-item canvas { .birb-grid-item canvas {
image-rendering: pixelated; image-rendering: pixelated;
transform: scale(2); transform: scale(2);
@@ -275,6 +281,7 @@
.birb-grid-item-selected { .birb-grid-item-selected {
border: var(--border-size) solid var(--highlight); border: var(--border-size) solid var(--highlight);
background: var(--mix-color);
} }
.birb-field-guide-description { .birb-field-guide-description {