dev #3
@@ -48,9 +48,12 @@ export const styles = {
|
||||
fontWeight: 1000,
|
||||
fontFamily: '"Cinzel Decorative", "IM Fell English", system-ui',
|
||||
letterSpacing: 1.0,
|
||||
color: stylesTokens.sectionHeaderText,
|
||||
background: `linear-gradient(180deg, ${stylesTokens.sectionHeaderBgTop}, ${stylesTokens.sectionHeaderBgBottom})`,
|
||||
borderBottom: `1px solid ${stylesTokens.sectionHeaderBorder}`,
|
||||
color: stylesTokens.textGold,
|
||||
|
||||
// WICHTIG: Header-Farben aus Theme-Tokens, nicht hart codiert
|
||||
background: `linear-gradient(180deg, ${stylesTokens.headerBgTop}, ${stylesTokens.headerBgBottom})`,
|
||||
borderBottom: `1px solid ${stylesTokens.headerBorder}`,
|
||||
|
||||
textTransform: "uppercase",
|
||||
textShadow: "0 1px 0 rgba(0,0,0,0.6)",
|
||||
},
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
// frontend/src/styles/theme.js
|
||||
export const stylesTokens = {
|
||||
pageBg: "var(--hp-pageBg)",
|
||||
panelBg: "var(--hp-panelBg)",
|
||||
@@ -10,41 +9,25 @@ export const stylesTokens = {
|
||||
|
||||
goldLine: "var(--hp-goldLine)",
|
||||
|
||||
// ===== Section Header (NEW) =====
|
||||
sectionHeaderBgTop: "var(--hp-sectionHeaderBgTop)",
|
||||
sectionHeaderBgBottom: "var(--hp-sectionHeaderBgBottom)",
|
||||
sectionHeaderText: "var(--hp-sectionHeaderText)",
|
||||
sectionHeaderBorder: "var(--hp-sectionHeaderBorder)",
|
||||
// Header
|
||||
headerBgTop: "var(--hp-headerBgTop)",
|
||||
headerBgBottom: "var(--hp-headerBgBottom)",
|
||||
headerBorder: "var(--hp-headerBorder)",
|
||||
|
||||
// ===== Row/Table colors =====
|
||||
rowDefaultBg: "var(--hp-rowDefaultBg)",
|
||||
// Rows
|
||||
rowNoBg: "var(--hp-rowNoBg)",
|
||||
rowNoText: "var(--hp-rowNoText)",
|
||||
rowNoBorder: "var(--hp-rowNoBorder)",
|
||||
|
||||
rowOkBg: "var(--hp-rowOkBg)",
|
||||
rowOkBorder: "var(--hp-rowOkBorder)",
|
||||
rowOkText: "var(--hp-rowOkText)",
|
||||
|
||||
rowNoBg: "var(--hp-rowNoBg)",
|
||||
rowNoBorder: "var(--hp-rowNoBorder)",
|
||||
rowNoText: "var(--hp-rowNoText)",
|
||||
rowOkBorder: "var(--hp-rowOkBorder)",
|
||||
|
||||
rowMaybeBg: "var(--hp-rowMaybeBg)",
|
||||
rowMaybeBorder: "var(--hp-rowMaybeBorder)",
|
||||
rowMaybeText: "var(--hp-rowMaybeText)",
|
||||
rowMaybeBorder: "var(--hp-rowMaybeBorder)",
|
||||
|
||||
rowEmptyBg: "var(--hp-rowEmptyBg)",
|
||||
rowEmptyBorder: "var(--hp-rowEmptyBorder)",
|
||||
rowEmptyText: "var(--hp-rowEmptyText)",
|
||||
|
||||
// ===== Badge colors (NEW: getrennt von row*) =====
|
||||
badgeOkBg: "var(--hp-badgeOkBg)",
|
||||
badgeOkText: "var(--hp-badgeOkText)",
|
||||
|
||||
badgeNoBg: "var(--hp-badgeNoBg)",
|
||||
badgeNoText: "var(--hp-badgeNoText)",
|
||||
|
||||
badgeMaybeBg: "var(--hp-badgeMaybeBg)",
|
||||
badgeMaybeText: "var(--hp-badgeMaybeText)",
|
||||
|
||||
badgeEmptyBg: "var(--hp-badgeEmptyBg)",
|
||||
badgeEmptyText: "var(--hp-badgeEmptyText)",
|
||||
rowEmptyBorder: "var(--hp-rowEmptyBorder)",
|
||||
};
|
||||
|
||||
@@ -10,33 +10,30 @@ export const THEMES = {
|
||||
textMain: "rgba(245, 239, 220, 0.92)",
|
||||
textDim: "rgba(233, 216, 166, 0.70)",
|
||||
textGold: "#e9d8a6",
|
||||
|
||||
goldLine: "rgba(233, 216, 166, 0.18)",
|
||||
|
||||
rowDefaultBg: "rgba(255,255,255,0.06)",
|
||||
// Section header (wie TopBar, aber leicht “tiefer”)
|
||||
headerBgTop: "rgba(32,32,36,0.92)",
|
||||
headerBgBottom: "rgba(14,14,16,0.92)",
|
||||
headerBorder: "rgba(233, 216, 166, 0.18)",
|
||||
|
||||
// Row colors (fix falsch bleibt rot in ALLEN themes)
|
||||
rowNoBg: "rgba(255, 35, 35, 0.16)",
|
||||
rowNoText: "#ffb3b3",
|
||||
rowNoBorder: "rgba(255,35,35,0.55)",
|
||||
|
||||
rowOkBg: "rgba(0, 190, 80, 0.16)",
|
||||
rowOkBorder: "rgba(0,190,80,0.55)",
|
||||
rowOkText: "#baf3c9",
|
||||
badgeOkBg: "rgba(0,190,80,0.18)",
|
||||
badgeOkText: "#baf3c9",
|
||||
|
||||
rowNoBg: "rgba(255,35,35,0.18)",
|
||||
rowNoBorder: "rgba(255,35,35,0.65)",
|
||||
rowNoText: "#ffb3b3",
|
||||
badgeNoBg: "rgba(255,35,35,0.20)",
|
||||
badgeNoText: "#ffb3b3",
|
||||
rowOkBorder: "rgba(0,190,80,0.55)",
|
||||
|
||||
rowMaybeBg: "rgba(140, 140, 140, 0.12)",
|
||||
rowMaybeBorder: "rgba(233,216,166,0.22)",
|
||||
rowMaybeText: "rgba(233,216,166,0.85)",
|
||||
badgeMaybeBg: "rgba(140,140,140,0.14)",
|
||||
badgeMaybeText: "rgba(233,216,166,0.85)",
|
||||
rowMaybeBorder: "rgba(233,216,166,0.22)",
|
||||
|
||||
rowEmptyBg: "rgba(255,255,255,0.06)",
|
||||
rowEmptyBorder: "rgba(0,0,0,0)",
|
||||
rowEmptyText: "rgba(233,216,166,0.75)",
|
||||
badgeEmptyBg: "rgba(255,255,255,0.08)",
|
||||
badgeEmptyText: "rgba(233,216,166,0.75)",
|
||||
rowEmptyBorder: "rgba(0,0,0,0)",
|
||||
},
|
||||
},
|
||||
|
||||
@@ -50,33 +47,28 @@ export const THEMES = {
|
||||
textMain: "rgba(245, 239, 220, 0.92)",
|
||||
textDim: "rgba(255, 210, 170, 0.70)",
|
||||
textGold: "#ffb86b",
|
||||
|
||||
goldLine: "rgba(255, 184, 107, 0.18)",
|
||||
|
||||
rowDefaultBg: "rgba(255, 184, 107, 0.08)",
|
||||
headerBgTop: "rgba(42,18,18,0.92)",
|
||||
headerBgBottom: "rgba(18,10,10,0.92)",
|
||||
headerBorder: "rgba(255, 184, 107, 0.22)",
|
||||
|
||||
rowOkBg: "rgba(255, 184, 107, 0.18)",
|
||||
rowOkBorder: "rgba(255, 184, 107, 0.55)",
|
||||
rowOkText: "rgba(255, 235, 210, 0.95)",
|
||||
badgeOkBg: "rgba(255, 184, 107, 0.20)",
|
||||
badgeOkText: "rgba(255, 235, 210, 0.95)",
|
||||
|
||||
rowNoBg: "rgba(255,35,35,0.18)",
|
||||
rowNoBorder: "rgba(255,35,35,0.65)",
|
||||
rowNoBg: "rgba(255, 35, 35, 0.16)",
|
||||
rowNoText: "#ffb3b3",
|
||||
badgeNoBg: "rgba(255,35,35,0.20)",
|
||||
badgeNoText: "#ffb3b3",
|
||||
rowNoBorder: "rgba(255,35,35,0.55)",
|
||||
|
||||
rowOkBg: "rgba(255, 184, 107, 0.16)",
|
||||
rowOkText: "#ffd2a8",
|
||||
rowOkBorder: "rgba(255,184,107,0.55)",
|
||||
|
||||
rowMaybeBg: "rgba(140, 140, 140, 0.12)",
|
||||
rowMaybeBorder: "rgba(233,216,166,0.22)",
|
||||
rowMaybeText: "rgba(233,216,166,0.85)",
|
||||
badgeMaybeBg: "rgba(140,140,140,0.14)",
|
||||
badgeMaybeText: "rgba(233,216,166,0.85)",
|
||||
rowMaybeText: "rgba(255,210,170,0.85)",
|
||||
rowMaybeBorder: "rgba(255,184,107,0.22)",
|
||||
|
||||
rowEmptyBg: "rgba(255,255,255,0.06)",
|
||||
rowEmptyText: "rgba(255,210,170,0.75)",
|
||||
rowEmptyBorder: "rgba(0,0,0,0)",
|
||||
rowEmptyText: "rgba(255, 230, 190, 0.75)",
|
||||
badgeEmptyBg: "rgba(255,255,255,0.08)",
|
||||
badgeEmptyText: "rgba(255, 230, 190, 0.75)",
|
||||
},
|
||||
},
|
||||
|
||||
@@ -90,33 +82,28 @@ export const THEMES = {
|
||||
textMain: "rgba(235, 245, 240, 0.92)",
|
||||
textDim: "rgba(175, 240, 210, 0.70)",
|
||||
textGold: "#7CFFB6",
|
||||
|
||||
goldLine: "rgba(124, 255, 182, 0.18)",
|
||||
|
||||
rowDefaultBg: "rgba(124, 255, 182, 0.07)",
|
||||
headerBgTop: "rgba(14,28,22,0.92)",
|
||||
headerBgBottom: "rgba(10,14,12,0.92)",
|
||||
headerBorder: "rgba(124, 255, 182, 0.22)",
|
||||
|
||||
rowNoBg: "rgba(255, 35, 35, 0.16)",
|
||||
rowNoText: "#ffb3b3",
|
||||
rowNoBorder: "rgba(255,35,35,0.55)",
|
||||
|
||||
rowOkBg: "rgba(124, 255, 182, 0.16)",
|
||||
rowOkText: "rgba(190,255,220,0.92)",
|
||||
rowOkBorder: "rgba(124,255,182,0.55)",
|
||||
rowOkText: "rgba(210, 255, 235, 0.95)",
|
||||
badgeOkBg: "rgba(124, 255, 182, 0.18)",
|
||||
badgeOkText: "rgba(210, 255, 235, 0.95)",
|
||||
|
||||
rowNoBg: "rgba(255,35,35,0.18)",
|
||||
rowNoBorder: "rgba(255,35,35,0.65)",
|
||||
rowNoText: "#ffb3b3",
|
||||
badgeNoBg: "rgba(255,35,35,0.20)",
|
||||
badgeNoText: "#ffb3b3",
|
||||
rowMaybeBg: "rgba(120, 255, 190, 0.10)",
|
||||
rowMaybeText: "rgba(175,240,210,0.85)",
|
||||
rowMaybeBorder: "rgba(120,255,190,0.22)",
|
||||
|
||||
rowMaybeBg: "rgba(140,140,140,0.12)",
|
||||
rowMaybeBorder: "rgba(233,216,166,0.22)",
|
||||
rowMaybeText: "rgba(233,216,166,0.85)",
|
||||
badgeMaybeBg: "rgba(140,140,140,0.14)",
|
||||
badgeMaybeText: "rgba(233,216,166,0.85)",
|
||||
|
||||
rowEmptyBg: "rgba(255,255,255,0.05)",
|
||||
rowEmptyBg: "rgba(255,255,255,0.06)",
|
||||
rowEmptyText: "rgba(175,240,210,0.75)",
|
||||
rowEmptyBorder: "rgba(0,0,0,0)",
|
||||
rowEmptyText: "rgba(180, 240, 210, 0.75)",
|
||||
badgeEmptyBg: "rgba(255,255,255,0.08)",
|
||||
badgeEmptyText: "rgba(180, 240, 210, 0.75)",
|
||||
},
|
||||
},
|
||||
|
||||
@@ -130,33 +117,28 @@ export const THEMES = {
|
||||
textMain: "rgba(235, 240, 250, 0.92)",
|
||||
textDim: "rgba(180, 205, 255, 0.72)",
|
||||
textGold: "#8FB6FF",
|
||||
|
||||
goldLine: "rgba(143, 182, 255, 0.18)",
|
||||
|
||||
rowDefaultBg: "rgba(143, 182, 255, 0.07)",
|
||||
headerBgTop: "rgba(18,22,40,0.92)",
|
||||
headerBgBottom: "rgba(10,12,20,0.92)",
|
||||
headerBorder: "rgba(143, 182, 255, 0.22)",
|
||||
|
||||
rowNoBg: "rgba(255, 35, 35, 0.16)",
|
||||
rowNoText: "#ffb3b3",
|
||||
rowNoBorder: "rgba(255,35,35,0.55)",
|
||||
|
||||
rowOkBg: "rgba(143, 182, 255, 0.16)",
|
||||
rowOkText: "rgba(210,230,255,0.92)",
|
||||
rowOkBorder: "rgba(143,182,255,0.55)",
|
||||
rowOkText: "rgba(225, 235, 255, 0.95)",
|
||||
badgeOkBg: "rgba(143, 182, 255, 0.18)",
|
||||
badgeOkText: "rgba(225, 235, 255, 0.95)",
|
||||
|
||||
rowNoBg: "rgba(255,35,35,0.18)",
|
||||
rowNoBorder: "rgba(255,35,35,0.65)",
|
||||
rowNoText: "#ffb3b3",
|
||||
badgeNoBg: "rgba(255,35,35,0.20)",
|
||||
badgeNoText: "#ffb3b3",
|
||||
rowMaybeBg: "rgba(140, 180, 255, 0.10)",
|
||||
rowMaybeText: "rgba(180,205,255,0.85)",
|
||||
rowMaybeBorder: "rgba(143,182,255,0.22)",
|
||||
|
||||
rowMaybeBg: "rgba(140,140,140,0.12)",
|
||||
rowMaybeBorder: "rgba(233,216,166,0.22)",
|
||||
rowMaybeText: "rgba(233,216,166,0.85)",
|
||||
badgeMaybeBg: "rgba(140,140,140,0.14)",
|
||||
badgeMaybeText: "rgba(233,216,166,0.85)",
|
||||
|
||||
rowEmptyBg: "rgba(255,255,255,0.05)",
|
||||
rowEmptyBorder: "rgba(0,0,0,0)",
|
||||
rowEmptyBg: "rgba(255,255,255,0.06)",
|
||||
rowEmptyText: "rgba(180,205,255,0.78)",
|
||||
badgeEmptyBg: "rgba(255,255,255,0.08)",
|
||||
badgeEmptyText: "rgba(180, 205, 255, 0.78)",
|
||||
rowEmptyBorder: "rgba(0,0,0,0)",
|
||||
},
|
||||
},
|
||||
|
||||
@@ -170,33 +152,28 @@ export const THEMES = {
|
||||
textMain: "rgba(245, 239, 220, 0.92)",
|
||||
textDim: "rgba(255, 240, 180, 0.70)",
|
||||
textGold: "#FFE27A",
|
||||
|
||||
goldLine: "rgba(255, 226, 122, 0.18)",
|
||||
|
||||
rowDefaultBg: "rgba(255, 226, 122, 0.08)",
|
||||
headerBgTop: "rgba(34,30,14,0.92)",
|
||||
headerBgBottom: "rgba(16,14,8,0.92)",
|
||||
headerBorder: "rgba(255, 226, 122, 0.22)",
|
||||
|
||||
rowOkBg: "rgba(255, 226, 122, 0.18)",
|
||||
rowOkBorder: "rgba(255, 226, 122, 0.60)",
|
||||
rowOkText: "rgba(255, 245, 210, 0.95)",
|
||||
badgeOkBg: "rgba(255, 226, 122, 0.20)",
|
||||
badgeOkText: "rgba(255, 245, 210, 0.95)",
|
||||
|
||||
rowNoBg: "rgba(255,35,35,0.18)",
|
||||
rowNoBorder: "rgba(255,35,35,0.65)",
|
||||
rowNoBg: "rgba(255, 35, 35, 0.16)",
|
||||
rowNoText: "#ffb3b3",
|
||||
badgeNoBg: "rgba(255,35,35,0.20)",
|
||||
badgeNoText: "#ffb3b3",
|
||||
rowNoBorder: "rgba(255,35,35,0.55)",
|
||||
|
||||
rowMaybeBg: "rgba(140,140,140,0.12)",
|
||||
rowMaybeBorder: "rgba(233,216,166,0.22)",
|
||||
rowMaybeText: "rgba(233,216,166,0.85)",
|
||||
badgeMaybeBg: "rgba(140,140,140,0.14)",
|
||||
badgeMaybeText: "rgba(233,216,166,0.85)",
|
||||
rowOkBg: "rgba(255, 226, 122, 0.16)",
|
||||
rowOkText: "rgba(255,240,190,0.92)",
|
||||
rowOkBorder: "rgba(255,226,122,0.55)",
|
||||
|
||||
rowEmptyBg: "rgba(255,255,255,0.05)",
|
||||
rowEmptyBorder: "rgba(0,0,0,0)",
|
||||
rowMaybeBg: "rgba(255, 226, 122, 0.10)",
|
||||
rowMaybeText: "rgba(255,240,180,0.85)",
|
||||
rowMaybeBorder: "rgba(255,226,122,0.22)",
|
||||
|
||||
rowEmptyBg: "rgba(255,255,255,0.06)",
|
||||
rowEmptyText: "rgba(255,240,180,0.78)",
|
||||
badgeEmptyBg: "rgba(255,255,255,0.08)",
|
||||
badgeEmptyText: "rgba(255, 240, 180, 0.78)",
|
||||
rowEmptyBorder: "rgba(0,0,0,0)",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user