for inline notices */
.wn-content p.note,
.wn-content .note {
position: relative;
padding: var(--wn-space-4) var(--wn-space-5);
padding-left: calc(var(--wn-space-5) + 3px);
background: var(--wn-surface-raised);
border: 1px solid var(--wn-border-iron);
border-radius: var(--wn-radius);
color: var(--wn-text-secondary);
font-size: var(--wn-text-small);
}
.wn-content p.note::before,
.wn-content .note::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--wn-gold);
}
/* ==========================================================================
Tables
========================================================================== */
.wn-content table {
width: 100%;
border-collapse: collapse;
margin-bottom: var(--wn-space-5);
font-size: var(--wn-text-small);
}
/* MyAAC emits bgcolor/border/cellpadding attributes; override them */
.wn-content table[border],
.wn-content table[cellspacing],
.wn-content td[bgcolor],
.wn-content tr[bgcolor] { border: 0 !important; }
.wn-content th,
.wn-content td {
padding: 0.625rem 0.875rem;
border-bottom: 1px solid var(--wn-border-hairline);
text-align: left;
vertical-align: middle;
background-color: transparent !important;
color: inherit;
}
.wn-content thead th,
.wn-content thead td {
border-bottom: 1px solid var(--wn-border);
background: rgba(255, 255, 255, 0.025) !important;
font-size: var(--wn-text-label);
font-weight: 700;
letter-spacing: var(--wn-track-label);
text-transform: uppercase;
color: var(--wn-gold) !important;
white-space: nowrap;
}
/* MyAAC's zebra striping comes from getStyle() inline bgcolors, which the
config.ini palette already remaps. This adds a readable hover on top. */
.wn-content tbody tr { transition: background-color var(--wn-dur) var(--wn-ease); }
.wn-content tbody tr:hover { background: rgba(200, 163, 90, 0.05); }
.wn-content .myaac-table > tbody > tr:nth-child(odd) { background: rgba(255, 255, 255, 0.018) !important; }
.wn-content .myaac-table > tbody > tr:nth-child(even) { background: transparent !important; }
.wn-content .myaac-table > thead > tr > td,
.wn-content .myaac-table > thead > tr > th,
.wn-content .myaac-table > tfoot > tr > td {
background: rgba(255, 255, 255, 0.03) !important;
color: var(--wn-gold) !important;
}
/* Wide tables must scroll inside their own box, never the page */
.wn-table-scroll { overflow-x: auto; }
/* ==========================================================================
Classic .TableContainer / .Table1..5 panels
========================================================================== */
.wn-content .TableContainer,
.wn-content .SmallBox {
margin-bottom: var(--wn-space-6);
}
.wn-content .Table1,
.wn-content .Table2,
.wn-content .Table3,
.wn-content .Table4,
.wn-content .Table5 {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--wn-stone-face);
border: 1px solid var(--wn-border-iron);
border-radius: var(--wn-radius);
box-shadow: var(--wn-shadow-sm), var(--wn-inset-top);
overflow: hidden;
}
/* The caption block becomes the panel header */
.wn-content .CaptionContainer {
display: block;
padding: var(--wn-space-4) var(--wn-space-5);
background: linear-gradient(180deg, rgba(200, 163, 90, 0.10), rgba(200, 163, 90, 0.02));
border-bottom: 1px solid var(--wn-border);
}
.wn-content .CaptionInnerContainer { display: block; }
.wn-content .CaptionContainer .Text {
font-family: var(--wn-font-display);
font-size: var(--wn-text-h4);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wn-gold-bright);
}
.wn-content .InnerTableContainer { padding: var(--wn-space-5); }
.wn-content .InnerTableContainer > table { margin-bottom: 0; }
.wn-content .InnerTableContainer td { border-bottom: 0; }
/* Field labels inside legacy forms */
.wn-content .LabelV,
.wn-content .LabelH {
width: 1%;
padding-right: var(--wn-space-5);
font-size: var(--wn-text-label);
font-weight: 600;
letter-spacing: var(--wn-track-label);
text-transform: uppercase;
color: var(--wn-text-secondary);
white-space: nowrap;
vertical-align: middle;
}
.wn-content .LabelV span.red,
.wn-content .red { color: var(--wn-danger-text) !important; }
.wn-content .white { color: var(--wn-bone) !important; }
.wn-content .green { color: #8FBE89 !important; }
/* ==========================================================================
Form controls inside legacy markup
========================================================================== */
.wn-content input[type="text"],
.wn-content input[type="password"],
.wn-content input[type="email"],
.wn-content input[type="number"],
.wn-content input[type="search"],
.wn-content input[type="url"],
.wn-content input[type="date"],
.wn-content select,
.wn-content textarea {
max-width: 100%;
padding: 0.625rem 0.8125rem;
background: var(--wn-surface-sunken);
border: 1px solid var(--wn-border-iron);
border-radius: var(--wn-radius);
color: var(--wn-bone);
font-family: var(--wn-font-body);
font-size: var(--wn-text-small);
line-height: 1.5;
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45);
transition: border-color var(--wn-dur) var(--wn-ease), box-shadow var(--wn-dur) var(--wn-ease);
}
.wn-content input[type="text"]:focus,
.wn-content input[type="password"]:focus,
.wn-content input[type="email"]:focus,
.wn-content input[type="number"]:focus,
.wn-content select:focus,
.wn-content textarea:focus {
border-color: var(--wn-gold);
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(200, 163, 90, 0.14);
outline: none;
}
.wn-content select { min-width: 12rem; }
.wn-content textarea { width: 100%; min-height: 8rem; }
.wn-content input[type="checkbox"],
.wn-content input[type="radio"] {
accent-color: var(--wn-gold);
width: 16px;
height: 16px;
vertical-align: middle;
margin-right: var(--wn-space-1);
}
/* Legacy submit buttons (buttons.base.html.twig emits a bare ) */
.wn-content input[type="submit"],
.wn-content input[type="button"],
.wn-content input[type="reset"],
.wn-content button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.6875rem 1.5rem;
background: linear-gradient(180deg, var(--wn-iron-light), var(--wn-iron));
border: 1px solid var(--wn-border-strong);
border-radius: var(--wn-radius);
color: var(--wn-bone);
font-family: var(--wn-font-body);
font-size: var(--wn-text-tiny);
font-weight: 700;
letter-spacing: var(--wn-track-label);
text-transform: uppercase;
cursor: pointer;
box-shadow: var(--wn-shadow-sm), var(--wn-inset-top);
transition: border-color var(--wn-dur) var(--wn-ease),
color var(--wn-dur) var(--wn-ease),
transform var(--wn-dur-fast) var(--wn-ease);
}
.wn-content input[type="submit"]:hover,
.wn-content input[type="button"]:hover,
.wn-content button:hover {
border-color: var(--wn-gold);
color: var(--wn-gold-bright);
}
.wn-content input[type="submit"]:active,
.wn-content button:active { transform: translateY(1px); }
/* The primary submit of a form gets the gold treatment */
.wn-content form input[type="submit"]:first-of-type {
background: linear-gradient(180deg, var(--wn-gold-bright), var(--wn-gold));
border-color: var(--wn-gold-bright);
color: var(--wn-text-inverse);
}
.wn-content form input[type="submit"]:first-of-type:hover {
background: linear-gradient(180deg, #F0D690, var(--wn-gold-bright));
color: var(--wn-text-inverse);
box-shadow: var(--wn-shadow), var(--wn-glow-gold);
}
/* ==========================================================================
Messages
========================================================================== */
.wn-content .ErrorMessage,
.wn-content .Message {
position: relative;
padding: var(--wn-space-4) var(--wn-space-5);
padding-left: calc(var(--wn-space-5) + 3px);
background: rgba(116, 30, 36, 0.14);
border: 1px solid rgba(168, 48, 57, 0.4);
border-radius: var(--wn-radius);
color: #E9C4C7;
font-size: var(--wn-text-small);
}
.wn-content .ErrorMessage::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--wn-danger);
}
.wn-content .ErrorMessage b { color: #F0D5D7; }
.wn-content .ErrorMessage li { margin-left: var(--wn-space-4); }
.wn-content .MessageContainer { display: block; }
/* MyAAC's toast/message helpers (tools/css/messages.css) */
.wn-content .success,
.wn-content .warning,
.wn-content .error,
.wn-content .info {
padding: var(--wn-space-4) var(--wn-space-5);
border-radius: var(--wn-radius);
border: 1px solid var(--wn-border-iron);
background: var(--wn-surface-raised) !important;
color: var(--wn-text-secondary) !important;
font-size: var(--wn-text-small);
}
.wn-content .success { border-left: 3px solid var(--wn-success); }
.wn-content .warning { border-left: 3px solid var(--wn-warning); }
.wn-content .error { border-left: 3px solid var(--wn-danger); }
.wn-content .info { border-left: 3px solid var(--wn-info); }
/* ==========================================================================
News (classic markup) — kept for the archive views
========================================================================== */
.wn-content .NewsHeadline {
margin-bottom: var(--wn-space-3);
padding-bottom: var(--wn-space-3);
border-bottom: 1px solid var(--wn-border-hairline);
}
.wn-content .NewsHeadlineBackground {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--wn-space-3);
background-image: none !important;
background-color: transparent !important;
}
.wn-content .NewsHeadlineIcon {
width: 32px; height: 32px;
flex: none;
border: 1px solid var(--wn-border);
border-radius: var(--wn-radius-sm);
background: var(--wn-surface-sunken);
padding: 2px;
}
.wn-content .NewsHeadlineDate {
font-size: var(--wn-text-label);
font-weight: 600;
letter-spacing: var(--wn-track-label);
text-transform: uppercase;
color: var(--wn-gold);
}
.wn-content .NewsHeadlineText {
font-family: var(--wn-font-display);
font-size: var(--wn-text-h4);
font-weight: 700;
color: var(--wn-bone);
}
.wn-content .NewsHeadlineAuthor {
width: 100%;
font-size: var(--wn-text-tiny);
color: var(--wn-text-muted);
}
/* ==========================================================================
Admin affordances (admin.links.html.twig, admin-bar)
========================================================================== */
.wn-content .admin-links,
.wn-content .admin_links {
display: inline-flex;
gap: var(--wn-space-2);
padding: var(--wn-space-2) var(--wn-space-3);
border: 1px dashed var(--wn-border);
border-radius: var(--wn-radius-sm);
font-size: var(--wn-text-tiny);
}
/* ==========================================================================
Third-party widgets MyAAC loads on some pages
========================================================================== */
.wn-content .dataTables_wrapper { color: var(--wn-text-secondary); font-size: var(--wn-text-small); }
.wn-content .dataTables_wrapper .dataTables_filter input,
.wn-content .dataTables_wrapper .dataTables_length select { margin-inline: var(--wn-space-2); }
.wn-content .pagination { display: flex; flex-wrap: wrap; gap: var(--wn-space-1); list-style: none; padding: 0; }
.wn-content .pagination a { display: inline-block; padding: 0.375rem 0.625rem; border: 1px solid var(--wn-border-iron); border-radius: var(--wn-radius-sm); }
/* Signature / outfit images rendered by MyAAC keep their pixel crispness */
.wn-content img[src*="outfit"],
.wn-content img[src*="signature"],
.wn-content img[src*="/items/"],
.wn-content img[src*="/monsters/"] {
image-rendering: pixelated;
}
/* ==========================================================================
Equipment slots (system/winnera/item_images.php)
==========================================================================
Item sprites come from an external service whose archive is incomplete:
some ids answer 404. Core markup carried the raw item id in alt, so a miss
rendered the browser's broken-image glyph with a bare number beside it.
The slot is now a 32x32 box that is styled whether or not the sprite
resolves. On failure the inline onerror handler removes the and adds
--failed, and the rules below draw a local placeholder in its place — no
sprite archive is vendored and nothing is fetched to render it. The item
name stays in the slot's title, the id in data-item-id.
========================================================================== */
.wn-content .wn-item-slot {
display: block;
position: relative;
width: 32px;
height: 32px;
line-height: 0;
}
.wn-content .wn-item-slot__img {
display: block;
width: 32px;
height: 32px;
image-rendering: pixelated;
}
/* Unresolvable sprite: a quiet engraved rune, not an error. It must read as
"nothing to show here", never as a fault the player has to act on. */
.wn-content .wn-item-slot--failed {
background:
radial-gradient(circle at 50% 45%, rgba(200, 163, 90, 0.10), transparent 62%),
linear-gradient(180deg, var(--wn-surface-raised), var(--wn-surface-sunken));
box-shadow: inset 0 0 0 1px var(--wn-border-iron);
}
.wn-content .wn-item-slot--failed::after {
content: "\25C7"; /* white diamond — the portal's own separator mark */
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--wn-gold-deep);
font-size: 13px;
line-height: 1;
opacity: 0.72;
}
/* An empty slot's silhouette ships with MyAAC and resolves; if the local file
ever goes missing it falls back to the same placeholder, one shade quieter
so a genuinely empty slot never shouts louder than an equipped one. */
.wn-content .wn-item-slot--empty.wn-item-slot--failed::after {
opacity: 0.28;
}
/* ==========================================================================
Character outfit portrait (views/characters.html.twig)
==========================================================================
Upstream pinned this with position:absolute and a hardcoded
margin-left:376px, inside a