/* ==========================================================================
KG Unified Theme — In-game activity pages partial
--------------------------------------------------------------------------
Harmonises the core in-game activity pages (Nebenraum/Arbeiten, Forschen/
Kontrollzentrum, Items/Ausrüstung, Werkstatt) with the modern dark-navy/
orange chrome. Purely additive, built on the canonical --kg-* tokens and
loaded after css/kg-theme.css so it refines the legacy inline markup of
arbeit.php, forschen.php, items.php, werkstatt.php and overview.php.
Every selector is scoped under #main-content so the header, sidebars,
status bar and modals stay untouched.
========================================================================== */
/* --------------------------------------------------------------------------
1. Section dividers & headings
Legacy markup: Technologien
The
separates each section (Technologien, Training, Aktuelle Übersicht,
Ungenutzte Ausrüstung, …). Turn the dull gray rule into a crisp orange
accent and give the bold section labels the classic orange tone.
-------------------------------------------------------------------------- */
#main-content hr[noshade],
#main-content hr[color="#BAB3B4"],
#main-content hr[color="#bab3b4"] {
height: 2px !important;
border: 0 !important;
margin: 4px 0 14px !important;
background: linear-gradient(90deg, var(--kg-accent) 0%, rgba(255, 102, 0, 0) 75%) !important;
opacity: 1 !important;
line-height: 0 !important;
}
/* Bold white section labels that sit directly in the content column (not in a
card cell) read as headings -> classic orange, comfortably sized. */
#main-content > div > b > font[color="#ffffff"],
#main-content > div > b > font[color="#FFFFFF"],
#main-content td > b > font[color="#ffffff"],
#main-content td > b > font[color="#FFFFFF"] {
color: var(--kg-accent) !important;
font-size: 15px !important;
letter-spacing: .2px;
}
/* --------------------------------------------------------------------------
2. Centered in-page nav menus
Legacy: Kontrollzentrum | …
Give them breathing room and a subtle baseline so they read as a tab strip.
-------------------------------------------------------------------------- */
#main-content center b a.link4,
#main-content > div[align="center"] a.link4 {
padding: 2px 4px;
}
#main-content center {
margin-bottom: 6px;
}
/* --------------------------------------------------------------------------
3. Legacy bumps — the inline size='1'/size='2' text is tiny.
Lift the body copy of the activity pages to a legible size.
-------------------------------------------------------------------------- */
#main-content font[size="1"] { font-size: 12px; }
#main-content font[size="2"] { font-size: 13.5px; line-height: 1.45; }
#main-content span[style*="x-small"] { font-size: 12px !important; }
/* --------------------------------------------------------------------------
4. Stat / overview tables ("Aktuelle Übersicht (pro Überfall)")
Legacy: header cells + #726B6C value cells.
Make the header row read as a dark accent strip and the value row sit on a
clean card with subtle borders.
-------------------------------------------------------------------------- */
#main-content td[background*="bg1.gif"] {
background-image: none !important;
background-color: var(--kg-surface-3) !important;
color: var(--kg-accent-2) !important;
border: 1px solid var(--kg-line) !important;
font-weight: 700;
text-align: center;
padding: 6px 8px !important;
}
#main-content td[background*="bg1.gif"] b,
#main-content td[background*="bg1.gif"] font {
color: var(--kg-accent-2) !important;
}
/* --------------------------------------------------------------------------
5. Item / research / equipment detail tables
Legacy: outer bgcolor='#BAB3B4' wrapper, cellspacing='1', cells
bgcolor='#726B6C', label cells class='messages-head'. Re-skin them as one
cohesive dark card with separated rows and orange label column.
-------------------------------------------------------------------------- */
#main-content table[bgcolor="#BAB3B4"],
#main-content table[bgcolor="#bab3b4"],
#main-content table.equipment-table {
background: var(--kg-surface) !important;
border: 1px solid var(--kg-line) !important;
border-radius: var(--kg-radius) !important;
border-collapse: separate !important;
border-spacing: 0 !important;
overflow: hidden;
box-shadow: var(--kg-shadow);
margin: 6px 0 14px !important;
width: 100%;
max-width: 660px;
}
/* Value cells of those detail tables */
#main-content table[bgcolor="#BAB3B4"] td[bgcolor="#726B6C" i],
#main-content table[bgcolor="#bab3b4"] td[bgcolor="#726B6C" i],
#main-content table.equipment-table td[bgcolor="#726B6C" i] {
background: var(--kg-surface) !important;
color: var(--kg-text-1) !important;
border: 0 !important;
border-bottom: 1px solid var(--kg-line) !important;
padding: 7px 10px !important;
vertical-align: middle;
}
/* The first cell of each detail row is a label ("Wirkungen", "Anforderungen",
"Beschreibung", "Beschaffung") — give it the orange accent + a faint
raised background so the rows align into a clean two-column read. */
#main-content table[bgcolor="#BAB3B4"] td[bgcolor="#726B6C" i] > font:first-child > b,
#main-content table[bgcolor="#bab3b4"] td[bgcolor="#726B6C" i] > font:first-child > b,
#main-content table[bgcolor="#BAB3B4"] td[bgcolor="#726B6C" i] > b,
#main-content table.equipment-table td[bgcolor="#726B6C" i] > font:first-child > b {
color: var(--kg-accent) !important;
}
/* Label header cells rendered with the shared .messages-head class:
re-tone from the legacy gray gradient to the dark accent strip. */
#main-content .messages-head {
background: var(--kg-surface-3) !important;
border: 1px solid var(--kg-line) !important;
color: var(--kg-accent-2) !important;
font-weight: 700 !important;
padding: 7px 10px !important;
text-align: left !important;
}
/* The top row of a detail table (item name + action buttons) reads as a card
header bar. */
#main-content table[bgcolor="#BAB3B4"] tr:first-child td[bgcolor="#726B6C" i],
#main-content table.equipment-table tr:first-child td[bgcolor="#726B6C" i] {
background: var(--kg-surface-2) !important;
border-bottom: 1px solid var(--kg-line) !important;
}
#main-content table[bgcolor="#BAB3B4"] tr:first-child td[bgcolor="#726B6C" i] b {
color: var(--kg-accent) !important;
font-size: 14px;
}
/* --------------------------------------------------------------------------
6. Research / training cards (Kontrollzentrum: Technologien & Training)
These are #645F60 / #635E5E panels remapped by the foundation to dark cards;
here we add comfortable inner spacing and row hover on table-driven rows.
-------------------------------------------------------------------------- */
#main-content tr[bgcolor="#635E5E" i],
#main-content tr[bgcolor="#645F60" i] {
transition: background-color .12s ease;
}
#main-content tr[bgcolor="#635E5E" i]:hover td,
#main-content tr[bgcolor="#645F60" i]:hover td {
background: var(--kg-surface-3) !important;
}
/* --------------------------------------------------------------------------
7. Inline status / result boxes
Legacy OK box : bgcolor='#132d3d' + green border (#328727)
Legacy error box: bgcolor='#2a2636' + orange border (#cc520d)
Keep the semantic colours but modernise the frame.
-------------------------------------------------------------------------- */
#main-content table[bgcolor="#132d3d"],
#main-content td[bgcolor="#132d3d"] {
background: rgba(36, 188, 6, .10) !important;
border: 1px solid var(--kg-success) !important;
border-radius: var(--kg-radius-sm) !important;
}
#main-content table[bgcolor="#2a2636"],
#main-content td[bgcolor="#2a2636"] {
background: rgba(255, 102, 0, .10) !important;
border: 1px solid var(--kg-accent) !important;
border-radius: var(--kg-radius-sm) !important;
}
#main-content table[bgcolor="#132d3d"] font,
#main-content td[bgcolor="#132d3d"] font,
#main-content table[bgcolor="#2a2636"] font,
#main-content td[bgcolor="#2a2636"] font {
color: var(--kg-text-1) !important;
}
/* --------------------------------------------------------------------------
8. Legacy gray inline buttons (style="background-color:#BAB3B4")
Lernen / Wechseln / aus der Werkstatt / Verschicken … — bring them onto the
modern accent button styling while preserving the disabled state.
-------------------------------------------------------------------------- */
#main-content input[type="submit"][style*="#BAB3B4"],
#main-content input[type="button"][style*="#BAB3B4"]:not([disabled]) {
background: linear-gradient(135deg, var(--kg-accent) 0%, var(--kg-accent-2) 100%) !important;
color: #fff !important;
border: none !important;
border-radius: var(--kg-radius-sm) !important;
height: auto !important;
padding: 6px 12px !important;
font-weight: 600;
cursor: pointer;
transition: filter .12s ease, box-shadow .12s ease;
}
#main-content input[type="submit"][style*="#BAB3B4"]:hover,
#main-content input[type="button"][style*="#BAB3B4"]:not([disabled]):hover {
filter: brightness(1.08);
box-shadow: 0 4px 12px rgba(255, 102, 0, .35);
}
#main-content input[type="button"][style*="#BAB3B4"][disabled] {
background: var(--kg-surface-2) !important;
color: var(--kg-text-2) !important;
border: 1px solid var(--kg-line) !important;
border-radius: var(--kg-radius-sm) !important;
cursor: default;
opacity: .7;
}
/* Red "Abbrechen" buttons keep their danger meaning, modernised. */
#main-content input[type="button"][style*="#FF2828"],
#main-content input[type="button"][style*="#ff2828"] {
background: var(--kg-danger) !important;
color: #fff !important;
border: none !important;
border-radius: var(--kg-radius-sm) !important;
padding: 6px 12px !important;
font-weight: 600;
cursor: pointer;
transition: filter .12s ease;
}
#main-content input[type="button"][style*="#FF2828"]:hover,
#main-content input[type="button"][style*="#ff2828"]:hover {
filter: brightness(1.1);
}
/* --------------------------------------------------------------------------
9. Form / control rows on the work page (arbeit.php bottom panel)
"Item:", "Job als …", "Arbeiten:" labels + the big "Los!" submit.
Give the loose rows consistent vertical rhythm.
-------------------------------------------------------------------------- */
#main-content .item-list-row,
#main-content [class*="form-row"] {
padding: 4px 0;
}
/* --------------------------------------------------------------------------
10. Misc legibility polish for the activity column
-------------------------------------------------------------------------- */
#main-content nobr { white-space: normal; } /* allow wrapping on narrow cards */
#main-content font[color="#AC0000"] { color: var(--kg-line) !important; } /* nav pipe separators */
|