Update field guide colors and use more color variables

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

View File

@@ -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 {