From 74612dbfcc2a813b03f8768cec9b89b4dd4efb31 Mon Sep 17 00:00:00 2001 From: Idrees Hassan Date: Sat, 13 Sep 2025 17:13:28 -0400 Subject: [PATCH] Update field guide colors and use more color variables --- build.js | 2 +- dist/birb.js | 37 ++++++++++++++++++++++--------------- dist/birb.user.js | 39 +++++++++++++++++++++++---------------- stylesheet.css | 37 ++++++++++++++++++++++--------------- 4 files changed, 68 insertions(+), 47 deletions(-) diff --git a/build.js b/build.js index aea4f12..07d2d5d 100644 --- a/build.js +++ b/build.js @@ -24,7 +24,7 @@ const userScriptHeader = `// ==UserScript== // @name Browser Bird // @namespace https://idreesinc.com -// @version 2025-09-13-01 +// @version 2025-09-13-02 // @description birb // @author Idrees // @downloadURL https://github.com/IdreesInc/Browser-Bird/raw/refs/heads/main/dist/birb.user.js diff --git a/dist/birb.js b/dist/birb.js index 9e2fa96..f7d13d7 100644 --- a/dist/birb.js +++ b/dist/birb.js @@ -58,6 +58,8 @@ const STYLESHEET = `:root { --neg-double-border-size: calc(var(--neg-border-size) * 2); --highlight: #ffa3cb; --border-color: var(--highlight); + --background-color: #ffecda; + --mix-color: color-mix(in srgb, var(--highlight) 50%, var(--background-color)); --birb-scale: ${BIRB_CSS_SCALE}; --ui-scale: ${UI_CSS_SCALE}; } @@ -87,7 +89,7 @@ const STYLESHEET = `:root { color: #000000 !important; z-index: 2147483639 !important; position: fixed; - background-color: #ffecda; + background-color: var(--background-color); box-shadow: var(--border-size) 0 var(--border-color), var(--neg-border-size) 0 var(--border-color), @@ -165,14 +167,14 @@ const STYLESHEET = `:root { text-align: center; flex-grow: 1; user-select: none; - color: #ffecda; + color: var(--background-color); } .birb-window-close { position: absolute; top: 1px; right: 0; - color: #ffecda; + color: var(--background-color); user-select: none; cursor: pointer; padding-left: 5px; @@ -185,13 +187,13 @@ const STYLESHEET = `:root { .birb-window-content { box-sizing: border-box; - background-color: #ffecda; + background-color: var(--background-color); margin-top: var(--border-size); flex-grow: 1; box-shadow: - var(--border-size) 0 #ffecda, - var(--neg-border-size) 0 #ffecda, - 0 var(--border-size) #ffecda, + var(--border-size) 0 var(--background-color), + var(--neg-border-size) 0 var(--background-color), + 0 var(--border-size) var(--background-color), 0 var(--neg-border-size) var(--border-color), 0 var(--border-size) var(--border-color); display: flex; @@ -222,11 +224,11 @@ const STYLESHEET = `:root { } .birb-music-player-content { - background: #ffecda; + background: var(--background-color); box-shadow: - var(--border-size) 0 #ffecda, - var(--neg-border-size) 0 #ffecda, - 0 var(--border-size) #ffecda, + var(--border-size) 0 var(--background-color), + var(--neg-border-size) 0 var(--background-color), + 0 var(--border-size) var(--background-color), 0 var(--neg-border-size) var(--border-color), 0 var(--border-size) var(--border-color); display: flex; @@ -256,10 +258,10 @@ const STYLESHEET = `:root { 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); + var(--border-size) 0 var(--highlight), + var(--neg-border-size) 0 var(--highlight), + 0 var(--neg-border-size) var(--highlight), + 0 var(--border-size) var(--highlight); } .birb-menu-item-arrow { @@ -305,6 +307,10 @@ const STYLESHEET = `:root { cursor: pointer; } +.birb-grid-item:hover { + border-color: var(--highlight); +} + .birb-grid-item canvas { image-rendering: pixelated; transform: scale(2); @@ -328,6 +334,7 @@ const STYLESHEET = `:root { .birb-grid-item-selected { border: var(--border-size) solid var(--highlight); + background: var(--mix-color); } .birb-field-guide-description { diff --git a/dist/birb.user.js b/dist/birb.user.js index e1fb463..6bbc5c1 100644 --- a/dist/birb.user.js +++ b/dist/birb.user.js @@ -1,7 +1,7 @@ // ==UserScript== // @name Browser Bird // @namespace https://idreesinc.com -// @version 2025-09-13-01 +// @version 2025-09-13-02 // @description birb // @author Idrees // @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); --highlight: #ffa3cb; --border-color: var(--highlight); + --background-color: #ffecda; + --mix-color: color-mix(in srgb, var(--highlight) 50%, var(--background-color)); --birb-scale: ${BIRB_CSS_SCALE}; --ui-scale: ${UI_CSS_SCALE}; } @@ -101,7 +103,7 @@ const STYLESHEET = `:root { color: #000000 !important; z-index: 2147483639 !important; position: fixed; - background-color: #ffecda; + background-color: var(--background-color); box-shadow: var(--border-size) 0 var(--border-color), var(--neg-border-size) 0 var(--border-color), @@ -179,14 +181,14 @@ const STYLESHEET = `:root { text-align: center; flex-grow: 1; user-select: none; - color: #ffecda; + color: var(--background-color); } .birb-window-close { position: absolute; top: 1px; right: 0; - color: #ffecda; + color: var(--background-color); user-select: none; cursor: pointer; padding-left: 5px; @@ -199,13 +201,13 @@ const STYLESHEET = `:root { .birb-window-content { box-sizing: border-box; - background-color: #ffecda; + background-color: var(--background-color); margin-top: var(--border-size); flex-grow: 1; box-shadow: - var(--border-size) 0 #ffecda, - var(--neg-border-size) 0 #ffecda, - 0 var(--border-size) #ffecda, + var(--border-size) 0 var(--background-color), + var(--neg-border-size) 0 var(--background-color), + 0 var(--border-size) var(--background-color), 0 var(--neg-border-size) var(--border-color), 0 var(--border-size) var(--border-color); display: flex; @@ -236,11 +238,11 @@ const STYLESHEET = `:root { } .birb-music-player-content { - background: #ffecda; + background: var(--background-color); box-shadow: - var(--border-size) 0 #ffecda, - var(--neg-border-size) 0 #ffecda, - 0 var(--border-size) #ffecda, + var(--border-size) 0 var(--background-color), + var(--neg-border-size) 0 var(--background-color), + 0 var(--border-size) var(--background-color), 0 var(--neg-border-size) var(--border-color), 0 var(--border-size) var(--border-color); display: flex; @@ -270,10 +272,10 @@ const STYLESHEET = `:root { 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); + var(--border-size) 0 var(--highlight), + var(--neg-border-size) 0 var(--highlight), + 0 var(--neg-border-size) var(--highlight), + 0 var(--border-size) var(--highlight); } .birb-menu-item-arrow { @@ -319,6 +321,10 @@ const STYLESHEET = `:root { cursor: pointer; } +.birb-grid-item:hover { + border-color: var(--highlight); +} + .birb-grid-item canvas { image-rendering: pixelated; transform: scale(2); @@ -342,6 +348,7 @@ const STYLESHEET = `:root { .birb-grid-item-selected { border: var(--border-size) solid var(--highlight); + background: var(--mix-color); } .birb-field-guide-description { diff --git a/stylesheet.css b/stylesheet.css index 1d5c4df..4ffd8bc 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -5,6 +5,8 @@ --neg-double-border-size: calc(var(--neg-border-size) * 2); --highlight: #ffa3cb; --border-color: var(--highlight); + --background-color: #ffecda; + --mix-color: color-mix(in srgb, var(--highlight) 50%, var(--background-color)); --birb-scale: ${BIRB_CSS_SCALE}; --ui-scale: ${UI_CSS_SCALE}; } @@ -34,7 +36,7 @@ color: #000000 !important; z-index: 2147483639 !important; position: fixed; - background-color: #ffecda; + background-color: var(--background-color); box-shadow: var(--border-size) 0 var(--border-color), var(--neg-border-size) 0 var(--border-color), @@ -112,14 +114,14 @@ text-align: center; flex-grow: 1; user-select: none; - color: #ffecda; + color: var(--background-color); } .birb-window-close { position: absolute; top: 1px; right: 0; - color: #ffecda; + color: var(--background-color); user-select: none; cursor: pointer; padding-left: 5px; @@ -132,13 +134,13 @@ .birb-window-content { box-sizing: border-box; - background-color: #ffecda; + background-color: var(--background-color); margin-top: var(--border-size); flex-grow: 1; box-shadow: - var(--border-size) 0 #ffecda, - var(--neg-border-size) 0 #ffecda, - 0 var(--border-size) #ffecda, + var(--border-size) 0 var(--background-color), + var(--neg-border-size) 0 var(--background-color), + 0 var(--border-size) var(--background-color), 0 var(--neg-border-size) var(--border-color), 0 var(--border-size) var(--border-color); display: flex; @@ -169,11 +171,11 @@ } .birb-music-player-content { - background: #ffecda; + background: var(--background-color); box-shadow: - var(--border-size) 0 #ffecda, - var(--neg-border-size) 0 #ffecda, - 0 var(--border-size) #ffecda, + var(--border-size) 0 var(--background-color), + var(--neg-border-size) 0 var(--background-color), + 0 var(--border-size) var(--background-color), 0 var(--neg-border-size) var(--border-color), 0 var(--border-size) var(--border-color); display: flex; @@ -203,10 +205,10 @@ 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); + var(--border-size) 0 var(--highlight), + var(--neg-border-size) 0 var(--highlight), + 0 var(--neg-border-size) var(--highlight), + 0 var(--border-size) var(--highlight); } .birb-menu-item-arrow { @@ -252,6 +254,10 @@ cursor: pointer; } +.birb-grid-item:hover { + border-color: var(--highlight); +} + .birb-grid-item canvas { image-rendering: pixelated; transform: scale(2); @@ -275,6 +281,7 @@ .birb-grid-item-selected { border: var(--border-size) solid var(--highlight); + background: var(--mix-color); } .birb-field-guide-description {