whose only content is a background GIF this theme does not ship — and in two templates the URL points at static.tibia.com. Blanking the background also stops that external request. */ .CaptionEdgeLeftTop, .CaptionEdgeRightTop, .CaptionEdgeLeftBottom, .CaptionEdgeRightBottom, .CaptionBorderTop, .CaptionBorderBottom, .CaptionVerticalLeft, .CaptionVerticalRight, .TableShadowContainer, .TableShadowContainerRightTop, .TableShadowRightTop, .TableBottomShadow, .TableBottomLeftShadow, .TableBottomRightShadow, .TableContentAndRightShadow { background-image: none !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; } .CaptionEdgeLeftTop, .CaptionEdgeRightTop, .CaptionEdgeLeftBottom, .CaptionEdgeRightBottom, .CaptionBorderTop, .CaptionBorderBottom, .CaptionVerticalLeft, .CaptionVerticalRight, .TableBottomShadow, .TableBottomLeftShadow, .TableBottomRightShadow { display: none !important; } /* ===================================================== legacy panels ===== */ .TableContainer, .TableContentContainer, .InnerTableContainer, .Table1, .Table2, .Table3 { background: transparent; border: 0; width: 100%; } /* `.CaptionContainer > .Text` is the legacy panel title (e.g. "Account Login"). Promote it to the theme's section header instead of a GIF frame. */ .CaptionContainer { display: block; margin: 0 0 var(--aot-space-4); } .CaptionInnerContainer { display: block; } .CaptionContainer .Text { display: block; padding: 0 0 var(--aot-space-2); font-family: var(--aot-font-display); font-size: 17px; font-weight: 600; letter-spacing: .08em; color: var(--aot-text); border-bottom: 1px solid var(--aot-border-accent); } /* ================================================== legacy form pages ==== */ /* Account login and lost-account sprawl across the full content width because they are laid out as 100%-wide tables. Constrain them to a comfortable reading measure. Targeted by the page slug this theme puts on , so no upstream template needs a wrapper class. */ .aot-page--account-manage .aot-content, .aot-page--account-login .aot-content, .aot-page--account-lost .aot-content { max-width: 620px; } /* `.TableContainer` is the legacy card wrapper on those pages. */ .aot-page--account-manage .TableContainer, .aot-page--account-login .TableContainer, .aot-page--account-lost .TableContainer { background: var(--aot-surface-raised); border: 1px solid var(--aot-border); border-radius: var(--aot-radius-md); padding: var(--aot-space-5); margin-bottom: var(--aot-space-4); } /* Legacy label cells: ``. The upstream treatment is a filled grey block; here it becomes a quiet label column. */ .LabelV { background: transparent !important; padding: var(--aot-space-2) var(--aot-space-5) var(--aot-space-2) 0 !important; color: var(--aot-text-secondary); font-weight: 600; font-size: var(--aot-small); white-space: nowrap; vertical-align: middle; border-bottom: 0 !important; } /* Labels stack above their field on narrow screens so long labels stop squeezing the input. */ @media (max-width: 560px) { .aot-page--account-manage .InnerTableContainer tr, .aot-page--account-login .InnerTableContainer tr, .aot-page--account-lost .InnerTableContainer tr { display: block; } .aot-page--account-manage .InnerTableContainer td, .aot-page--account-login .InnerTableContainer td, .aot-page--account-lost .InnerTableContainer td { display: block; width: 100% !important; } .LabelV { padding-right: 0 !important; white-space: normal; } } /* Inside a legacy form, table rows are layout — not data. Strip the data-table treatment so they stop reading as a grid. */ .aot-page--account-manage .InnerTableContainer table, .aot-page--account-login .InnerTableContainer table, .aot-page--account-lost .InnerTableContainer table, .aot-page--account-create .InnerTableContainer table, .aot-page--account-manage .InnerTableContainer td, .aot-page--account-login .InnerTableContainer td, .aot-page--account-lost .InnerTableContainer td, .aot-page--account-create .InnerTableContainer td { background: transparent !important; border: 0 !important; } /* `:not(.LabelV)` matters — the label column keeps its own right padding, which this rule would otherwise reset to 0 and jam the label against the input. */ .aot-page--account-manage .InnerTableContainer td:not(.LabelV), .aot-page--account-login .InnerTableContainer td:not(.LabelV), .aot-page--account-lost .InnerTableContainer td:not(.LabelV) { padding: var(--aot-space-2) 0 !important; } .aot-page--account-manage .InnerTableContainer input[type="text"], .aot-page--account-manage .InnerTableContainer input[type="password"], .aot-page--account-login .InnerTableContainer input[type="text"], .aot-page--account-login .InnerTableContainer input[type="password"], .aot-page--account-lost .InnerTableContainer input[type="text"] { width: 100%; max-width: 360px; } /* Upstream renders each submit button in its own full-width table, which pushes them to opposite ends of the card. Collapse those wrappers so the actions sit together on one row. */ .aot-page--account-manage form > table:last-of-type, .aot-page--account-login form > table:last-of-type { width: auto; } .aot-page--account-manage form > table:last-of-type td, .aot-page--account-login form > table:last-of-type td { padding: 0 var(--aot-space-3) 0 0 !important; border: 0 !important; background: none !important; width: auto !important; } /* ================================================= semantic buttons ====== */ /* Every MyAAC button carries data-aot-button (see buttons.base.html.twig), so intent can drive appearance instead of every action looking identical. Default remains the bronze primary from components.css. */ /* Secondary: navigational or non-committal actions. */ input[data-aot-button="back"], input[data-aot-button="cancel"], input[data-aot-button="account-lost"], input[data-aot-button="view"], input[data-aot-button="edit"], input[data-aot-button="edit-ranks"], input[data-aot-button="manage-guild"] { color: var(--aot-text) !important; background: var(--aot-surface) !important; border: 1px solid var(--aot-bronze-muted) !important; } input[data-aot-button="back"]:hover, input[data-aot-button="cancel"]:hover, input[data-aot-button="account-lost"]:hover, input[data-aot-button="view"]:hover, input[data-aot-button="edit"]:hover, input[data-aot-button="edit-ranks"]:hover, input[data-aot-button="manage-guild"]:hover { border-color: var(--aot-bronze) !important; background: var(--aot-bronze-subtle) !important; } /* Destructive: wine/crimson, per VIS-0.5 section 6. */ input[data-aot-button="delete-character"], input[data-aot-button="leave-guild"] { color: var(--aot-text) !important; background: linear-gradient(180deg, var(--aot-crimson), var(--aot-wine)) !important; border: 1px solid var(--aot-crimson) !important; } input[data-aot-button="delete-character"]:hover, input[data-aot-button="leave-guild"]:hover { background: linear-gradient(180deg, #A02536, var(--aot-crimson)) !important; } /* =================================== radio / checkbox groups (houses) ==== */ /* Houses, and several filter forms, render radios as bare inputs beside text inside layout tables. Give the pair a proper control affordance without replacing the native input. */ .aot-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--aot-space-4); margin-bottom: var(--aot-space-4); } .aot-choice-group__title, .aot-content .aot-choice-title { display: block; margin-bottom: var(--aot-space-2); font-family: var(--aot-font-display); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--aot-bronze-hi); } /* Native inputs kept — only their presentation changes, so keyboard, focus-visible and checked semantics are untouched. */ input[type="radio"], input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; margin: 0 8px 0 0; border: 1px solid var(--aot-border); background: #101317; cursor: pointer; position: relative; flex: 0 0 auto; transition: border-color .15s ease, background .15s ease; } input[type="radio"] { border-radius: 50%; } input[type="checkbox"] { border-radius: var(--aot-radius-xs); } input[type="radio"]:hover, input[type="checkbox"]:hover { border-color: var(--aot-bronze-muted); } input[type="radio"]:checked, input[type="checkbox"]:checked { border-color: var(--aot-bronze); background: var(--aot-bronze-subtle); } input[type="radio"]:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--aot-bronze-hi); } input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px; border: solid var(--aot-bronze-hi); border-width: 0 2px 2px 0; transform: rotate(45deg); } input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible { outline: 2px solid var(--aot-bronze); outline-offset: 2px; } input[type="radio"][disabled], input[type="checkbox"][disabled] { opacity: .45; cursor: not-allowed; border-style: dashed; } /* Windows high-contrast / forced-colors users get the native control back. */ @media (forced-colors: active) { input[type="radio"], input[type="checkbox"] { appearance: auto; -webkit-appearance: auto; } } /* ========================================================== houses ======= */ /* Upstream renders the search panel twice: an outer table titled "House Search" whose only cell contains a form with an inner table titled "House Search" again. Hide only the duplicate heading. `:first-of-type` matters — the submit button lives in a LATER table inside the same form whose first row is the button row, and a broader `tr:first-child` rule would hide it. */ .aot-page--houses .aot-content form > table:first-of-type > tbody > tr:first-child { display: none; } /* Four consecutive
tags pad the panel before the form. Scoped to this page so real line breaks elsewhere are unaffected. */ .aot-page--houses .aot-content > table td > br { display: none; } /* `Town` / `Status` / `Order` are the group titles. */ .aot-page--houses .aot-content form td > b { display: block; margin-bottom: var(--aot-space-2); font-family: var(--aot-font-display); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--aot-bronze-hi); } /* Radio rows: give each option room and a comfortable hit area. */ .aot-page--houses .aot-content form td { vertical-align: top; line-height: 2.1; padding: var(--aot-space-3) !important; } .aot-page--houses .aot-content form label, .aot-page--houses .aot-content form td { color: var(--aot-text-secondary); } /* Upstream emits `

` inline with no separator, so options run together. Space each radio away from the previous option's text while keeping it tight to its own label. */ .aot-page--houses .aot-content form input[type="radio"] { margin-right: 8px; margin-left: var(--aot-space-4); } .aot-page--houses .aot-content form td > input[type="radio"]:first-of-type { margin-left: 0; } .aot-page--houses .aot-content form input[type="submit"] { margin-top: var(--aot-space-3); } @media (max-width: 720px) { .aot-page--houses .aot-content form td { display: block; width: 100% !important; border-bottom: 1px solid var(--aot-border) !important; } } /* ====================================================== highscores ======= */ /* The right column repeats every skill and vocation as a link list, duplicating the two