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

Prepend "birb" to all css variables

Browse Source
This commit is contained in:
Idrees Hassan
2025-09-15 22:41:51 -04:00
parent b371e4f8dc
commit ab33090eb6
5 changed files with 212 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
birb.js
View File

@@ -443,6 +443,7 @@ function loadSpriteSheetPixels(dataUri, templateColors = true) {
}); });
} }
// @ts-ignore
Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATIONS_SPRITE_SHEET, false), loadSpriteSheetPixels(FEATHER_SPRITE_SHEET)]).then(([birbPixels, decorationPixels, featherPixels]) => { Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATIONS_SPRITE_SHEET, false), loadSpriteSheetPixels(FEATHER_SPRITE_SHEET)]).then(([birbPixels, decorationPixels, featherPixels]) => {
const SPRITE_SHEET = birbPixels; const SPRITE_SHEET = birbPixels;
const DECORATIONS_SPRITE_SHEET = decorationPixels; const DECORATIONS_SPRITE_SHEET = decorationPixels;
@@ -865,7 +866,7 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
const modTop = `${stickyNote.top - Math.min(window.innerHeight - noteElement.offsetHeight, stickyNote.top)}px`; const modTop = `${stickyNote.top - Math.min(window.innerHeight - noteElement.offsetHeight, stickyNote.top)}px`;
const modLeft = `${stickyNote.left - Math.min(window.innerWidth - noteElement.offsetWidth, stickyNote.left)}px`; const modLeft = `${stickyNote.left - Math.min(window.innerWidth - noteElement.offsetWidth, stickyNote.left)}px`;
noteElement.style.transform = `scale(var(--ui-scale)) translate(-${modLeft}, -${modTop})`; noteElement.style.transform = `scale(var(--birb-ui-scale)) translate(-${modLeft}, -${modTop})`;
}); });
return noteElement; return noteElement;
@@ -1414,8 +1415,8 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
*/ */
function switchSpecies(type) { function switchSpecies(type) {
currentSpecies = type; currentSpecies = type;
// Update CSS variable --highlight to be wing color // Update CSS variable --birb-highlight to be wing color
document.documentElement.style.setProperty("--highlight", species[type].colors[THEME_HIGHLIGHT]); document.documentElement.style.setProperty("--birb-highlight", species[type].colors[THEME_HIGHLIGHT]);
save(); save();
} }

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-03 // @version 2025-09-15-01
// @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

139
dist/birb.js vendored
View File

@@ -52,16 +52,16 @@ const DEFAULT_SETTINGS = {
let userSettings = {}; let userSettings = {};
const STYLESHEET = `:root { const STYLESHEET = `:root {
--border-size: 2px; --birb-border-size: 2px;
--neg-border-size: calc(var(--border-size) * -1); --birb-neg-border-size: calc(var(--birb-border-size) * -1);
--double-border-size: calc(var(--border-size) * 2); --birb-double-border-size: calc(var(--birb-border-size) * 2);
--neg-double-border-size: calc(var(--neg-border-size) * 2); --birb-neg-double-border-size: calc(var(--birb-neg-border-size) * 2);
--highlight: #ffa3cb; --birb-highlight: #ffa3cb;
--border-color: var(--highlight); --birb-border-color: var(--birb-highlight);
--background-color: #ffecda; --birb-background-color: #ffecda;
--mix-color: color-mix(in srgb, var(--highlight) 50%, var(--background-color)); --birb-mix-color: color-mix(in srgb, var(--birb-highlight) 50%, var(--birb-background-color));
--birb-scale: ${BIRB_CSS_SCALE}; --birb-scale: ${BIRB_CSS_SCALE};
--ui-scale: ${UI_CSS_SCALE}; --birb-ui-scale: ${UI_CSS_SCALE};
} }
#birb { #birb {
@@ -89,26 +89,26 @@ const STYLESHEET = `:root {
color: #000000 !important; color: #000000 !important;
z-index: 2147483639 !important; z-index: 2147483639 !important;
position: fixed; position: fixed;
background-color: var(--background-color); background-color: var(--birb-background-color);
box-shadow: box-shadow:
var(--border-size) 0 var(--border-color), var(--birb-border-size) 0 var(--birb-border-color),
var(--neg-border-size) 0 var(--border-color), var(--birb-neg-border-size) 0 var(--birb-border-color),
0 var(--neg-border-size) var(--border-color), 0 var(--birb-neg-border-size) var(--birb-border-color),
0 var(--border-size) var(--border-color), 0 var(--birb-border-size) var(--birb-border-color),
var(--double-border-size) 0 var(--border-color), var(--birb-double-border-size) 0 var(--birb-border-color),
var(--neg-double-border-size) 0 var(--border-color), var(--birb-neg-double-border-size) 0 var(--birb-border-color),
0 var(--neg-double-border-size) var(--border-color), 0 var(--birb-neg-double-border-size) var(--birb-border-color),
0 var(--double-border-size) var(--border-color), 0 var(--birb-double-border-size) var(--birb-border-color),
0 0 0 var(--border-size) var(--border-color), 0 0 0 var(--birb-border-size) var(--birb-border-color),
0 0 0 var(--double-border-size) white, 0 0 0 var(--birb-double-border-size) white,
var(--double-border-size) 0 0 var(--border-size) white, var(--birb-double-border-size) 0 0 var(--birb-border-size) white,
var(--neg-double-border-size) 0 0 var(--border-size) white, var(--birb-neg-double-border-size) 0 0 var(--birb-border-size) white,
0 var(--neg-double-border-size) 0 var(--border-size) white, 0 var(--birb-neg-double-border-size) 0 var(--birb-border-size) white,
0 var(--double-border-size) 0 var(--border-size) white; 0 var(--birb-double-border-size) 0 var(--birb-border-size) white;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transform: scale(var(--ui-scale)) !important; transform: scale(var(--birb-ui-scale)) !important;
animation: pop-in 0.08s; animation: pop-in 0.08s;
transition-timing-function: ease-in; transition-timing-function: ease-in;
} }
@@ -137,7 +137,7 @@ const STYLESHEET = `:root {
100% { 100% {
opacity: 1; opacity: 1;
transform: scale(var(--ui-scale)); transform: scale(var(--birb-ui-scale));
} }
} }
@@ -152,14 +152,14 @@ const STYLESHEET = `:root {
padding-bottom: 3px; padding-bottom: 3px;
padding-left: 30px; padding-left: 30px;
padding-right: 30px; padding-right: 30px;
background-color: var(--highlight); background-color: var(--birb-highlight);
box-shadow: box-shadow:
var(--border-size) 0 var(--highlight), var(--birb-border-size) 0 var(--birb-highlight),
var(--neg-border-size) 0 var(--highlight), var(--birb-neg-border-size) 0 var(--birb-highlight),
0 var(--neg-border-size) var(--highlight), 0 var(--birb-neg-border-size) var(--birb-highlight),
var(--neg-border-size) var(--border-size) var(--border-color), var(--birb-neg-border-size) var(--birb-border-size) var(--birb-border-color),
var(--border-size) var(--border-size) var(--border-color); var(--birb-border-size) var(--birb-border-size) var(--birb-border-color);
color: var(--border-color) !important; color: var(--birb-border-color) !important;
font-size: 16px; font-size: 16px;
} }
@@ -167,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: var(--background-color); color: var(--birb-background-color);
} }
.birb-window-close { .birb-window-close {
position: absolute; position: absolute;
top: 1px; top: 1px;
right: 0; right: 0;
color: var(--background-color); color: var(--birb-background-color);
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
padding-left: 5px; padding-left: 5px;
@@ -187,21 +187,21 @@ const STYLESHEET = `:root {
.birb-window-content { .birb-window-content {
box-sizing: border-box; box-sizing: border-box;
background-color: var(--background-color); background-color: var(--birb-background-color);
margin-top: var(--border-size); margin-top: var(--birb-border-size);
flex-grow: 1; flex-grow: 1;
box-shadow: box-shadow:
var(--border-size) 0 var(--background-color), var(--birb-border-size) 0 var(--birb-background-color),
var(--neg-border-size) 0 var(--background-color), var(--birb-neg-border-size) 0 var(--birb-background-color),
0 var(--border-size) var(--background-color), 0 var(--birb-border-size) var(--birb-background-color),
0 var(--neg-border-size) var(--border-color), 0 var(--birb-neg-border-size) var(--birb-border-color),
0 var(--border-size) var(--border-color); 0 var(--birb-border-size) var(--birb-border-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding-top: calc(var(--double-border-size)); padding-top: calc(var(--birb-double-border-size));
padding-bottom: var(--border-size); padding-bottom: var(--birb-border-size);
} }
.birb-pico-8-content { .birb-pico-8-content {
@@ -224,13 +224,13 @@ const STYLESHEET = `:root {
} }
.birb-music-player-content { .birb-music-player-content {
background: var(--background-color); background: var(--birb-background-color);
box-shadow: box-shadow:
var(--border-size) 0 var(--background-color), var(--birb-border-size) 0 var(--birb-background-color),
var(--neg-border-size) 0 var(--background-color), var(--birb-neg-border-size) 0 var(--birb-background-color),
0 var(--border-size) var(--background-color), 0 var(--birb-border-size) var(--birb-background-color),
0 var(--neg-border-size) var(--border-color), 0 var(--birb-neg-border-size) var(--birb-border-color),
0 var(--border-size) var(--border-color); 0 var(--birb-border-size) var(--birb-border-color);
display: flex; display: flex;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
@@ -238,7 +238,7 @@ const STYLESHEET = `:root {
} }
.birb-menu-item { .birb-menu-item {
width: calc(100% - var(--double-border-size)); width: calc(100% - var(--birb-double-border-size));
font-size: 14px; font-size: 14px;
padding-top: 4px; padding-top: 4px;
padding-bottom: 4px; padding-bottom: 4px;
@@ -255,13 +255,13 @@ const STYLESHEET = `:root {
.birb-menu-item:hover { .birb-menu-item:hover {
opacity: 1 !important; opacity: 1 !important;
background: var(--highlight) !important; background: var(--birb-highlight) !important;
color: white !important; color: white !important;
box-shadow: box-shadow:
var(--border-size) 0 var(--highlight), var(--birb-border-size) 0 var(--birb-highlight),
var(--neg-border-size) 0 var(--highlight), var(--birb-neg-border-size) 0 var(--birb-highlight),
0 var(--neg-border-size) var(--highlight), 0 var(--birb-neg-border-size) var(--birb-highlight),
0 var(--border-size) var(--highlight); 0 var(--birb-border-size) var(--birb-highlight);
} }
.birb-menu-item-arrow { .birb-menu-item-arrow {
@@ -270,11 +270,11 @@ const STYLESHEET = `:root {
.birb-window-separator { .birb-window-separator {
width: 100%; width: 100%;
height: var(--border-size); height: var(--birb-border-size);
background-color: var(--border-color); background-color: var(--birb-border-color);
box-sizing: border-box; box-sizing: border-box;
margin-top: var(--double-border-size); margin-top: var(--birb-double-border-size);
margin-bottom: var(--double-border-size); margin-bottom: var(--birb-double-border-size);
opacity: 0.4; opacity: 0.4;
} }
@@ -308,18 +308,18 @@ const STYLESHEET = `:root {
} }
.birb-grid-item:hover { .birb-grid-item:hover {
border-color: var(--highlight); border-color: var(--birb-highlight);
} }
.birb-grid-item canvas { .birb-grid-item canvas {
image-rendering: pixelated; image-rendering: pixelated;
transform: scale(2); transform: scale(2);
padding-bottom: var(--border-size); padding-bottom: var(--birb-border-size);
} }
.birb-grid-item, .birb-field-guide-description, .birb-message-content { .birb-grid-item, .birb-field-guide-description, .birb-message-content {
border: var(--border-size) solid rgb(255, 207, 144); border: var(--birb-border-size) solid rgb(255, 207, 144);
box-shadow: 0 0 0 var(--border-size) white; box-shadow: 0 0 0 var(--birb-border-size) white;
background: rgba(255, 221, 177, 0.5); background: rgba(255, 221, 177, 0.5);
} }
@@ -333,8 +333,8 @@ const STYLESHEET = `:root {
} }
.birb-grid-item-selected { .birb-grid-item-selected {
border: var(--border-size) solid var(--highlight); border: var(--birb-border-size) solid var(--birb-highlight);
background: var(--mix-color); background: var(--birb-mix-color);
} }
.birb-field-guide-description { .birb-field-guide-description {
@@ -782,6 +782,7 @@ function loadSpriteSheetPixels(dataUri, templateColors = true) {
}); });
} }
// @ts-ignore
Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATIONS_SPRITE_SHEET, false), loadSpriteSheetPixels(FEATHER_SPRITE_SHEET)]).then(([birbPixels, decorationPixels, featherPixels]) => { Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATIONS_SPRITE_SHEET, false), loadSpriteSheetPixels(FEATHER_SPRITE_SHEET)]).then(([birbPixels, decorationPixels, featherPixels]) => {
const SPRITE_SHEET = birbPixels; const SPRITE_SHEET = birbPixels;
const DECORATIONS_SPRITE_SHEET = decorationPixels; const DECORATIONS_SPRITE_SHEET = decorationPixels;
@@ -1204,7 +1205,7 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
const modTop = `${stickyNote.top - Math.min(window.innerHeight - noteElement.offsetHeight, stickyNote.top)}px`; const modTop = `${stickyNote.top - Math.min(window.innerHeight - noteElement.offsetHeight, stickyNote.top)}px`;
const modLeft = `${stickyNote.left - Math.min(window.innerWidth - noteElement.offsetWidth, stickyNote.left)}px`; const modLeft = `${stickyNote.left - Math.min(window.innerWidth - noteElement.offsetWidth, stickyNote.left)}px`;
noteElement.style.transform = `scale(var(--ui-scale)) translate(-${modLeft}, -${modTop})`; noteElement.style.transform = `scale(var(--birb-ui-scale)) translate(-${modLeft}, -${modTop})`;
}); });
return noteElement; return noteElement;
@@ -1753,8 +1754,8 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
*/ */
function switchSpecies(type) { function switchSpecies(type) {
currentSpecies = type; currentSpecies = type;
// Update CSS variable --highlight to be wing color // Update CSS variable --birb-highlight to be wing color
document.documentElement.style.setProperty("--highlight", species[type].colors[THEME_HIGHLIGHT]); document.documentElement.style.setProperty("--birb-highlight", species[type].colors[THEME_HIGHLIGHT]);
save(); save();
} }

141
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-03 // @version 2025-09-15-01
// @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
@@ -66,16 +66,16 @@ const DEFAULT_SETTINGS = {
let userSettings = {}; let userSettings = {};
const STYLESHEET = `:root { const STYLESHEET = `:root {
--border-size: 2px; --birb-border-size: 2px;
--neg-border-size: calc(var(--border-size) * -1); --birb-neg-border-size: calc(var(--birb-border-size) * -1);
--double-border-size: calc(var(--border-size) * 2); --birb-double-border-size: calc(var(--birb-border-size) * 2);
--neg-double-border-size: calc(var(--neg-border-size) * 2); --birb-neg-double-border-size: calc(var(--birb-neg-border-size) * 2);
--highlight: #ffa3cb; --birb-highlight: #ffa3cb;
--border-color: var(--highlight); --birb-border-color: var(--birb-highlight);
--background-color: #ffecda; --birb-background-color: #ffecda;
--mix-color: color-mix(in srgb, var(--highlight) 50%, var(--background-color)); --birb-mix-color: color-mix(in srgb, var(--birb-highlight) 50%, var(--birb-background-color));
--birb-scale: ${BIRB_CSS_SCALE}; --birb-scale: ${BIRB_CSS_SCALE};
--ui-scale: ${UI_CSS_SCALE}; --birb-ui-scale: ${UI_CSS_SCALE};
} }
#birb { #birb {
@@ -103,26 +103,26 @@ const STYLESHEET = `:root {
color: #000000 !important; color: #000000 !important;
z-index: 2147483639 !important; z-index: 2147483639 !important;
position: fixed; position: fixed;
background-color: var(--background-color); background-color: var(--birb-background-color);
box-shadow: box-shadow:
var(--border-size) 0 var(--border-color), var(--birb-border-size) 0 var(--birb-border-color),
var(--neg-border-size) 0 var(--border-color), var(--birb-neg-border-size) 0 var(--birb-border-color),
0 var(--neg-border-size) var(--border-color), 0 var(--birb-neg-border-size) var(--birb-border-color),
0 var(--border-size) var(--border-color), 0 var(--birb-border-size) var(--birb-border-color),
var(--double-border-size) 0 var(--border-color), var(--birb-double-border-size) 0 var(--birb-border-color),
var(--neg-double-border-size) 0 var(--border-color), var(--birb-neg-double-border-size) 0 var(--birb-border-color),
0 var(--neg-double-border-size) var(--border-color), 0 var(--birb-neg-double-border-size) var(--birb-border-color),
0 var(--double-border-size) var(--border-color), 0 var(--birb-double-border-size) var(--birb-border-color),
0 0 0 var(--border-size) var(--border-color), 0 0 0 var(--birb-border-size) var(--birb-border-color),
0 0 0 var(--double-border-size) white, 0 0 0 var(--birb-double-border-size) white,
var(--double-border-size) 0 0 var(--border-size) white, var(--birb-double-border-size) 0 0 var(--birb-border-size) white,
var(--neg-double-border-size) 0 0 var(--border-size) white, var(--birb-neg-double-border-size) 0 0 var(--birb-border-size) white,
0 var(--neg-double-border-size) 0 var(--border-size) white, 0 var(--birb-neg-double-border-size) 0 var(--birb-border-size) white,
0 var(--double-border-size) 0 var(--border-size) white; 0 var(--birb-double-border-size) 0 var(--birb-border-size) white;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transform: scale(var(--ui-scale)) !important; transform: scale(var(--birb-ui-scale)) !important;
animation: pop-in 0.08s; animation: pop-in 0.08s;
transition-timing-function: ease-in; transition-timing-function: ease-in;
} }
@@ -151,7 +151,7 @@ const STYLESHEET = `:root {
100% { 100% {
opacity: 1; opacity: 1;
transform: scale(var(--ui-scale)); transform: scale(var(--birb-ui-scale));
} }
} }
@@ -166,14 +166,14 @@ const STYLESHEET = `:root {
padding-bottom: 3px; padding-bottom: 3px;
padding-left: 30px; padding-left: 30px;
padding-right: 30px; padding-right: 30px;
background-color: var(--highlight); background-color: var(--birb-highlight);
box-shadow: box-shadow:
var(--border-size) 0 var(--highlight), var(--birb-border-size) 0 var(--birb-highlight),
var(--neg-border-size) 0 var(--highlight), var(--birb-neg-border-size) 0 var(--birb-highlight),
0 var(--neg-border-size) var(--highlight), 0 var(--birb-neg-border-size) var(--birb-highlight),
var(--neg-border-size) var(--border-size) var(--border-color), var(--birb-neg-border-size) var(--birb-border-size) var(--birb-border-color),
var(--border-size) var(--border-size) var(--border-color); var(--birb-border-size) var(--birb-border-size) var(--birb-border-color);
color: var(--border-color) !important; color: var(--birb-border-color) !important;
font-size: 16px; font-size: 16px;
} }
@@ -181,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: var(--background-color); color: var(--birb-background-color);
} }
.birb-window-close { .birb-window-close {
position: absolute; position: absolute;
top: 1px; top: 1px;
right: 0; right: 0;
color: var(--background-color); color: var(--birb-background-color);
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
padding-left: 5px; padding-left: 5px;
@@ -201,21 +201,21 @@ const STYLESHEET = `:root {
.birb-window-content { .birb-window-content {
box-sizing: border-box; box-sizing: border-box;
background-color: var(--background-color); background-color: var(--birb-background-color);
margin-top: var(--border-size); margin-top: var(--birb-border-size);
flex-grow: 1; flex-grow: 1;
box-shadow: box-shadow:
var(--border-size) 0 var(--background-color), var(--birb-border-size) 0 var(--birb-background-color),
var(--neg-border-size) 0 var(--background-color), var(--birb-neg-border-size) 0 var(--birb-background-color),
0 var(--border-size) var(--background-color), 0 var(--birb-border-size) var(--birb-background-color),
0 var(--neg-border-size) var(--border-color), 0 var(--birb-neg-border-size) var(--birb-border-color),
0 var(--border-size) var(--border-color); 0 var(--birb-border-size) var(--birb-border-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding-top: calc(var(--double-border-size)); padding-top: calc(var(--birb-double-border-size));
padding-bottom: var(--border-size); padding-bottom: var(--birb-border-size);
} }
.birb-pico-8-content { .birb-pico-8-content {
@@ -238,13 +238,13 @@ const STYLESHEET = `:root {
} }
.birb-music-player-content { .birb-music-player-content {
background: var(--background-color); background: var(--birb-background-color);
box-shadow: box-shadow:
var(--border-size) 0 var(--background-color), var(--birb-border-size) 0 var(--birb-background-color),
var(--neg-border-size) 0 var(--background-color), var(--birb-neg-border-size) 0 var(--birb-background-color),
0 var(--border-size) var(--background-color), 0 var(--birb-border-size) var(--birb-background-color),
0 var(--neg-border-size) var(--border-color), 0 var(--birb-neg-border-size) var(--birb-border-color),
0 var(--border-size) var(--border-color); 0 var(--birb-border-size) var(--birb-border-color);
display: flex; display: flex;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
@@ -252,7 +252,7 @@ const STYLESHEET = `:root {
} }
.birb-menu-item { .birb-menu-item {
width: calc(100% - var(--double-border-size)); width: calc(100% - var(--birb-double-border-size));
font-size: 14px; font-size: 14px;
padding-top: 4px; padding-top: 4px;
padding-bottom: 4px; padding-bottom: 4px;
@@ -269,13 +269,13 @@ const STYLESHEET = `:root {
.birb-menu-item:hover { .birb-menu-item:hover {
opacity: 1 !important; opacity: 1 !important;
background: var(--highlight) !important; background: var(--birb-highlight) !important;
color: white !important; color: white !important;
box-shadow: box-shadow:
var(--border-size) 0 var(--highlight), var(--birb-border-size) 0 var(--birb-highlight),
var(--neg-border-size) 0 var(--highlight), var(--birb-neg-border-size) 0 var(--birb-highlight),
0 var(--neg-border-size) var(--highlight), 0 var(--birb-neg-border-size) var(--birb-highlight),
0 var(--border-size) var(--highlight); 0 var(--birb-border-size) var(--birb-highlight);
} }
.birb-menu-item-arrow { .birb-menu-item-arrow {
@@ -284,11 +284,11 @@ const STYLESHEET = `:root {
.birb-window-separator { .birb-window-separator {
width: 100%; width: 100%;
height: var(--border-size); height: var(--birb-border-size);
background-color: var(--border-color); background-color: var(--birb-border-color);
box-sizing: border-box; box-sizing: border-box;
margin-top: var(--double-border-size); margin-top: var(--birb-double-border-size);
margin-bottom: var(--double-border-size); margin-bottom: var(--birb-double-border-size);
opacity: 0.4; opacity: 0.4;
} }
@@ -322,18 +322,18 @@ const STYLESHEET = `:root {
} }
.birb-grid-item:hover { .birb-grid-item:hover {
border-color: var(--highlight); border-color: var(--birb-highlight);
} }
.birb-grid-item canvas { .birb-grid-item canvas {
image-rendering: pixelated; image-rendering: pixelated;
transform: scale(2); transform: scale(2);
padding-bottom: var(--border-size); padding-bottom: var(--birb-border-size);
} }
.birb-grid-item, .birb-field-guide-description, .birb-message-content { .birb-grid-item, .birb-field-guide-description, .birb-message-content {
border: var(--border-size) solid rgb(255, 207, 144); border: var(--birb-border-size) solid rgb(255, 207, 144);
box-shadow: 0 0 0 var(--border-size) white; box-shadow: 0 0 0 var(--birb-border-size) white;
background: rgba(255, 221, 177, 0.5); background: rgba(255, 221, 177, 0.5);
} }
@@ -347,8 +347,8 @@ const STYLESHEET = `:root {
} }
.birb-grid-item-selected { .birb-grid-item-selected {
border: var(--border-size) solid var(--highlight); border: var(--birb-border-size) solid var(--birb-highlight);
background: var(--mix-color); background: var(--birb-mix-color);
} }
.birb-field-guide-description { .birb-field-guide-description {
@@ -796,6 +796,7 @@ function loadSpriteSheetPixels(dataUri, templateColors = true) {
}); });
} }
// @ts-ignore
Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATIONS_SPRITE_SHEET, false), loadSpriteSheetPixels(FEATHER_SPRITE_SHEET)]).then(([birbPixels, decorationPixels, featherPixels]) => { Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATIONS_SPRITE_SHEET, false), loadSpriteSheetPixels(FEATHER_SPRITE_SHEET)]).then(([birbPixels, decorationPixels, featherPixels]) => {
const SPRITE_SHEET = birbPixels; const SPRITE_SHEET = birbPixels;
const DECORATIONS_SPRITE_SHEET = decorationPixels; const DECORATIONS_SPRITE_SHEET = decorationPixels;
@@ -1218,7 +1219,7 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
const modTop = `${stickyNote.top - Math.min(window.innerHeight - noteElement.offsetHeight, stickyNote.top)}px`; const modTop = `${stickyNote.top - Math.min(window.innerHeight - noteElement.offsetHeight, stickyNote.top)}px`;
const modLeft = `${stickyNote.left - Math.min(window.innerWidth - noteElement.offsetWidth, stickyNote.left)}px`; const modLeft = `${stickyNote.left - Math.min(window.innerWidth - noteElement.offsetWidth, stickyNote.left)}px`;
noteElement.style.transform = `scale(var(--ui-scale)) translate(-${modLeft}, -${modTop})`; noteElement.style.transform = `scale(var(--birb-ui-scale)) translate(-${modLeft}, -${modTop})`;
}); });
return noteElement; return noteElement;
@@ -1767,8 +1768,8 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
*/ */
function switchSpecies(type) { function switchSpecies(type) {
currentSpecies = type; currentSpecies = type;
// Update CSS variable --highlight to be wing color // Update CSS variable --birb-highlight to be wing color
document.documentElement.style.setProperty("--highlight", species[type].colors[THEME_HIGHLIGHT]); document.documentElement.style.setProperty("--birb-highlight", species[type].colors[THEME_HIGHLIGHT]);
save(); save();
} }

132
stylesheet.css
View File

@@ -1,14 +1,14 @@
:root { :root {
--border-size: 2px; --birb-border-size: 2px;
--neg-border-size: calc(var(--border-size) * -1); --birb-neg-border-size: calc(var(--birb-border-size) * -1);
--double-border-size: calc(var(--border-size) * 2); --birb-double-border-size: calc(var(--birb-border-size) * 2);
--neg-double-border-size: calc(var(--neg-border-size) * 2); --birb-neg-double-border-size: calc(var(--birb-neg-border-size) * 2);
--highlight: #ffa3cb; --birb-highlight: #ffa3cb;
--border-color: var(--highlight); --birb-border-color: var(--birb-highlight);
--background-color: #ffecda; --birb-background-color: #ffecda;
--mix-color: color-mix(in srgb, var(--highlight) 50%, var(--background-color)); --birb-mix-color: color-mix(in srgb, var(--birb-highlight) 50%, var(--birb-background-color));
--birb-scale: ${BIRB_CSS_SCALE}; --birb-scale: ${BIRB_CSS_SCALE};
--ui-scale: ${UI_CSS_SCALE}; --birb-ui-scale: ${UI_CSS_SCALE};
} }
#birb { #birb {
@@ -36,26 +36,26 @@
color: #000000 !important; color: #000000 !important;
z-index: 2147483639 !important; z-index: 2147483639 !important;
position: fixed; position: fixed;
background-color: var(--background-color); background-color: var(--birb-background-color);
box-shadow: box-shadow:
var(--border-size) 0 var(--border-color), var(--birb-border-size) 0 var(--birb-border-color),
var(--neg-border-size) 0 var(--border-color), var(--birb-neg-border-size) 0 var(--birb-border-color),
0 var(--neg-border-size) var(--border-color), 0 var(--birb-neg-border-size) var(--birb-border-color),
0 var(--border-size) var(--border-color), 0 var(--birb-border-size) var(--birb-border-color),
var(--double-border-size) 0 var(--border-color), var(--birb-double-border-size) 0 var(--birb-border-color),
var(--neg-double-border-size) 0 var(--border-color), var(--birb-neg-double-border-size) 0 var(--birb-border-color),
0 var(--neg-double-border-size) var(--border-color), 0 var(--birb-neg-double-border-size) var(--birb-border-color),
0 var(--double-border-size) var(--border-color), 0 var(--birb-double-border-size) var(--birb-border-color),
0 0 0 var(--border-size) var(--border-color), 0 0 0 var(--birb-border-size) var(--birb-border-color),
0 0 0 var(--double-border-size) white, 0 0 0 var(--birb-double-border-size) white,
var(--double-border-size) 0 0 var(--border-size) white, var(--birb-double-border-size) 0 0 var(--birb-border-size) white,
var(--neg-double-border-size) 0 0 var(--border-size) white, var(--birb-neg-double-border-size) 0 0 var(--birb-border-size) white,
0 var(--neg-double-border-size) 0 var(--border-size) white, 0 var(--birb-neg-double-border-size) 0 var(--birb-border-size) white,
0 var(--double-border-size) 0 var(--border-size) white; 0 var(--birb-double-border-size) 0 var(--birb-border-size) white;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transform: scale(var(--ui-scale)) !important; transform: scale(var(--birb-ui-scale)) !important;
animation: pop-in 0.08s; animation: pop-in 0.08s;
transition-timing-function: ease-in; transition-timing-function: ease-in;
} }
@@ -84,7 +84,7 @@
100% { 100% {
opacity: 1; opacity: 1;
transform: scale(var(--ui-scale)); transform: scale(var(--birb-ui-scale));
} }
} }
@@ -99,14 +99,14 @@
padding-bottom: 3px; padding-bottom: 3px;
padding-left: 30px; padding-left: 30px;
padding-right: 30px; padding-right: 30px;
background-color: var(--highlight); background-color: var(--birb-highlight);
box-shadow: box-shadow:
var(--border-size) 0 var(--highlight), var(--birb-border-size) 0 var(--birb-highlight),
var(--neg-border-size) 0 var(--highlight), var(--birb-neg-border-size) 0 var(--birb-highlight),
0 var(--neg-border-size) var(--highlight), 0 var(--birb-neg-border-size) var(--birb-highlight),
var(--neg-border-size) var(--border-size) var(--border-color), var(--birb-neg-border-size) var(--birb-border-size) var(--birb-border-color),
var(--border-size) var(--border-size) var(--border-color); var(--birb-border-size) var(--birb-border-size) var(--birb-border-color);
color: var(--border-color) !important; color: var(--birb-border-color) !important;
font-size: 16px; font-size: 16px;
} }
@@ -114,14 +114,14 @@
text-align: center; text-align: center;
flex-grow: 1; flex-grow: 1;
user-select: none; user-select: none;
color: var(--background-color); color: var(--birb-background-color);
} }
.birb-window-close { .birb-window-close {
position: absolute; position: absolute;
top: 1px; top: 1px;
right: 0; right: 0;
color: var(--background-color); color: var(--birb-background-color);
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
padding-left: 5px; padding-left: 5px;
@@ -134,21 +134,21 @@
.birb-window-content { .birb-window-content {
box-sizing: border-box; box-sizing: border-box;
background-color: var(--background-color); background-color: var(--birb-background-color);
margin-top: var(--border-size); margin-top: var(--birb-border-size);
flex-grow: 1; flex-grow: 1;
box-shadow: box-shadow:
var(--border-size) 0 var(--background-color), var(--birb-border-size) 0 var(--birb-background-color),
var(--neg-border-size) 0 var(--background-color), var(--birb-neg-border-size) 0 var(--birb-background-color),
0 var(--border-size) var(--background-color), 0 var(--birb-border-size) var(--birb-background-color),
0 var(--neg-border-size) var(--border-color), 0 var(--birb-neg-border-size) var(--birb-border-color),
0 var(--border-size) var(--border-color); 0 var(--birb-border-size) var(--birb-border-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding-top: calc(var(--double-border-size)); padding-top: calc(var(--birb-double-border-size));
padding-bottom: var(--border-size); padding-bottom: var(--birb-border-size);
} }
.birb-pico-8-content { .birb-pico-8-content {
@@ -171,13 +171,13 @@
} }
.birb-music-player-content { .birb-music-player-content {
background: var(--background-color); background: var(--birb-background-color);
box-shadow: box-shadow:
var(--border-size) 0 var(--background-color), var(--birb-border-size) 0 var(--birb-background-color),
var(--neg-border-size) 0 var(--background-color), var(--birb-neg-border-size) 0 var(--birb-background-color),
0 var(--border-size) var(--background-color), 0 var(--birb-border-size) var(--birb-background-color),
0 var(--neg-border-size) var(--border-color), 0 var(--birb-neg-border-size) var(--birb-border-color),
0 var(--border-size) var(--border-color); 0 var(--birb-border-size) var(--birb-border-color);
display: flex; display: flex;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
@@ -185,7 +185,7 @@
} }
.birb-menu-item { .birb-menu-item {
width: calc(100% - var(--double-border-size)); width: calc(100% - var(--birb-double-border-size));
font-size: 14px; font-size: 14px;
padding-top: 4px; padding-top: 4px;
padding-bottom: 4px; padding-bottom: 4px;
@@ -202,13 +202,13 @@
.birb-menu-item:hover { .birb-menu-item:hover {
opacity: 1 !important; opacity: 1 !important;
background: var(--highlight) !important; background: var(--birb-highlight) !important;
color: white !important; color: white !important;
box-shadow: box-shadow:
var(--border-size) 0 var(--highlight), var(--birb-border-size) 0 var(--birb-highlight),
var(--neg-border-size) 0 var(--highlight), var(--birb-neg-border-size) 0 var(--birb-highlight),
0 var(--neg-border-size) var(--highlight), 0 var(--birb-neg-border-size) var(--birb-highlight),
0 var(--border-size) var(--highlight); 0 var(--birb-border-size) var(--birb-highlight);
} }
.birb-menu-item-arrow { .birb-menu-item-arrow {
@@ -217,11 +217,11 @@
.birb-window-separator { .birb-window-separator {
width: 100%; width: 100%;
height: var(--border-size); height: var(--birb-border-size);
background-color: var(--border-color); background-color: var(--birb-border-color);
box-sizing: border-box; box-sizing: border-box;
margin-top: var(--double-border-size); margin-top: var(--birb-double-border-size);
margin-bottom: var(--double-border-size); margin-bottom: var(--birb-double-border-size);
opacity: 0.4; opacity: 0.4;
} }
@@ -255,18 +255,18 @@
} }
.birb-grid-item:hover { .birb-grid-item:hover {
border-color: var(--highlight); border-color: var(--birb-highlight);
} }
.birb-grid-item canvas { .birb-grid-item canvas {
image-rendering: pixelated; image-rendering: pixelated;
transform: scale(2); transform: scale(2);
padding-bottom: var(--border-size); padding-bottom: var(--birb-border-size);
} }
.birb-grid-item, .birb-field-guide-description, .birb-message-content { .birb-grid-item, .birb-field-guide-description, .birb-message-content {
border: var(--border-size) solid rgb(255, 207, 144); border: var(--birb-border-size) solid rgb(255, 207, 144);
box-shadow: 0 0 0 var(--border-size) white; box-shadow: 0 0 0 var(--birb-border-size) white;
background: rgba(255, 221, 177, 0.5); background: rgba(255, 221, 177, 0.5);
} }
@@ -280,8 +280,8 @@
} }
.birb-grid-item-selected { .birb-grid-item-selected {
border: var(--border-size) solid var(--highlight); border: var(--birb-border-size) solid var(--birb-highlight);
background: var(--mix-color); background: var(--birb-mix-color);
} }
.birb-field-guide-description { .birb-field-guide-description {