:root { --page: #dfe4ea; --page-ink: #2b333d; --title-ink: #1e2a2f; --frame: #8d97a3; --face: #f0f0f0; --line: #d9d9d9; --accent: #0078d7; --ui: "Segoe UI", Tahoma, system-ui, -apple-system, sans-serif; } @media (prefers-color-scheme: dark) { :root { --page: #1c2026; --page-ink: #dfe4ea; --title-ink: #e3e7e2; --frame: #4b5560; } } /* Parchment theme: Georgia for all text except the blackletter buttons. */ :root:not([data-simple]) { --ui: Georgia, "Times New Roman", serif; } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { background: var(--page); } body { margin: 0; min-height: 100vh; min-width: 610px; padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--page); color: var(--page-ink); font: 12px/1.35 var(--ui); } .noscript { margin: 0; padding: 0 16px; font-size: 18px; text-align: center; } /* The site's name at the top left of the page, in the type, colours and place of aoe2vils.net's title on a wide screen: Alegreya Bold at 1.55rem, in a column up to 92rem wide with 1rem margins, centred in a 35.75 px row .7rem from the top. In a browser window too small for both, the window covers it. In place of the font, images/ui/title.webp is the name in that type, drawn at 175 % and placed where the font drew its ink (a pixel higher at 100 %, where the font snapped to whole pixels). Its alpha masks a fill of --title-ink, so it takes each theme's colour. The text stays, at size 0, for screen readers. */ .site-title { position: absolute; left: 0; right: 0; top: calc(32px / 1.75); max-width: 92rem; margin: 0 auto; padding: 0 1rem; font-size: 0; } :root:not([data-simple]) .site-title::before { content: ""; display: block; width: calc(141px / 1.75); height: calc(43px / 1.75); background: var(--title-ink); -webkit-mask: url("images/ui/title.webp") 0 0 / 100% 100%; mask: url("images/ui/title.webp") 0 0 / 100% 100%; } @media (max-resolution: 1dppx) { .site-title { top: calc(32px / 1.75 - 1px); } } /* Window replica */ .window { width: 536px; border: 1px solid var(--frame); background: #fff; color: #000; color-scheme: light; box-shadow: 0 10px 32px rgba(0, 0, 0, .22), 0 2px 6px rgba(0, 0, 0, .12); user-select: none; -webkit-user-select: none; } /* The parchment covers the whole window. The padding keeps the content inside its burnt edge, and the parchment's own shadow replaces the window border and shadow. */ :root:not([data-simple]) .window { width: 578px; padding: 22px; border: 0; box-shadow: none; background: url("images/ui/background.webp") center / 100% 100% no-repeat; } :root:not([data-simple]) .client { background: transparent; } /* Inside the parchment window and its dialogs, the arrow and the pointing hand are the game's cursors. Rules for an arrow or a hand use var(--arrow, default) and var(--hand, pointer), so simple mode and the page around the window keep the system cursors. A touch screen with no mouse shows no cursor, so it doesn't load them. */ @media (any-hover: hover) { :root:not([data-simple]) :is(.window, dialog.win) { --arrow: url("images/ui/cursor.webp") 0 0, default; --hand: url("images/ui/cursor_pointing.webp") 1 0, pointer; cursor: var(--arrow); } } .titlebar { height: 30px; display: flex; align-items: center; justify-content: space-between; padding-left: 10px; font: 12px var(--ui); } .titlebar h1 { display: flex; align-items: center; gap: 6px; margin: 0; font: inherit; font-weight: 600; } /* The app icon before the title, as in a Windows title bar: the favicon at 16 px. It's inline, the favicon's 32 px image as a lossless WebP, because the browser fetches the tab's favicon apart from the page's images, so a url("favicon.ico") here fetched the file a second time. */ :root:not([data-simple]) .app-icon { flex: none; width: 16px; height: 16px; background: url("data:image/webp;base64,UklGRl4BAABXRUJQVlA4TFIBAAAvH8AHAAWcbdvOL3e2bduY+AVsu6Z2u62jjaONzbZt4xPY7sn93jSzbSRJcbQOHi3+t5jc1ratRLsfyiAnJ6SVH1IGY31MCRO7u7v+/k8A+FMVyUOWj/TKHjfGEPF8lLkEHpETe4hHFinBAQAAj6heTPvu1KVt84cvF7EQBEE8kQaQiJeIvirbirU/aT6zxLnUKkccxPGGIPIBANTtuXQ6AsAjfg0Y4UcqrdxAENEAENI3AZDP2+CuJRyeX3urRjfEFgCIxjsAPCFa1h3AsQRHECoAIJd2gGE7hCm8/npVL3MNKnnBoAlCDV5//bKbuQaVYsGgiwN4AEAu7QD35pxTAWCoQR4TPPCANSyKIQgiB8CyCeKGRHhg0sM5ZgC2MwwBGFeTCysVRGBkwTUtsLFmH4JIgQ8GPBxAEASRAAMQxRkEMYoOLIAXxAoiALauaAP+mw==") center / 100% 100% no-repeat; } .menubar { position: relative; z-index: 20; display: flex; height: 20px; } .menu { position: relative; } .menu-title { height: 20px; padding: 0 7px; border: 1px solid transparent; background: none; font: inherit; color: inherit; cursor: var(--arrow, default); } .menu-title:hover { background: #e5f3ff; border-color: #cce8ff; } .menu.open .menu-title { background: #cce8ff; border-color: #99d1ff; } .menu-title:focus-visible { outline: 1px dotted #000; outline-offset: -3px; } .menu-list { position: absolute; top: 20px; left: 0; min-width: 250px; padding: 2px; background: #f2f2f2; border: 1px solid #ccc; box-shadow: 2px 2px 3px rgba(0, 0, 0, .25); } .menu-list > button, .menu-list > a { display: grid; grid-template-columns: 1fr auto; gap: 24px; width: 100%; padding: 3px 18px 3px 30px; border: 0; background: none; font: inherit; color: #000; text-align: left; text-decoration: none; white-space: nowrap; cursor: var(--arrow, default); } .menu-list > button:hover, .menu-list > a:hover, .menu-list > button:focus-visible, .menu-list > a:focus-visible { background: #91c9f7; outline: none; } .menu-list kbd { font: inherit; } .menu-list hr { margin: 3px 2px 3px 30px; border: 0; border-top: 1px solid #d7d7d7; } /* Parchment menus: dark brown with light text, and gold with dark text on the hovered item. The open menu's title matches its list, and a hovered title is gold like an item. */ :root:not([data-simple]) .menu-title:hover { background: #dccb70; border-color: transparent; } :root:not([data-simple]) .menu.open .menu-title { background: #65523b; border-color: #65523b; color: #f1deae; } :root:not([data-simple]) .menu-list { background: #65523b; border-color: #3d2c1c; } :root:not([data-simple]) .menu-list > button, :root:not([data-simple]) .menu-list > a { color: #f1deae; } :root:not([data-simple]) .menu-list > button:hover, :root:not([data-simple]) .menu-list > a:hover, :root:not([data-simple]) .menu-list > button:focus-visible, :root:not([data-simple]) .menu-list > a:focus-visible { background: #dccb70; color: #000; } :root:not([data-simple]) .menu-list hr { border-top-color: rgba(241, 222, 174, .3); } /* Items that open another site get the external icon in their left margin. It's drawn in the menu text's colour, so it turns black with the text on the hovered item. */ :root:not([data-simple]) :is(.menu-list > a[target="_blank"], #menu-civs > [data-act="techtree"]) { position: relative; } :root:not([data-simple]) :is(.menu-list > a[target="_blank"], #menu-civs > [data-act="techtree"])::before { content: ""; position: absolute; left: 9px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: url("images/ui/external.webp") center / contain no-repeat; } :root:not([data-simple]) :is(.menu-list > a[target="_blank"], #menu-civs > [data-act="techtree"]):is(:hover, :focus-visible)::before { filter: brightness(0); } .client { position: relative; width: 534px; height: 511px; background: #fff; overflow: hidden; } .frame { position: absolute; left: 0; right: 0; top: 21px; bottom: 0; border: 1px solid var(--line); } /* Images set in CSS are scoped to :not([data-simple]), so simple mode never loads them. */ :root:not([data-simple]) .frame { border-color: rgba(90, 60, 30, .35); } .tabstrip { position: absolute; z-index: 3; left: 2px; top: 0; display: flex; } .tab { position: relative; top: 2px; height: 19px; margin-right: -1px; padding: 0 6px; border: 1px solid var(--line); border-bottom: 0; background: #f0f0f0; font: inherit; color: #000; cursor: var(--arrow, default); } .tab:hover { background: #d8eaf9; } .tab[aria-selected="true"] { z-index: 1; top: 0; height: 22px; padding: 0 8px; background: #fff; } .tab:focus-visible { outline: 1px dotted #000; outline-offset: -4px; } /* Parchment tabs: Draw Civ and Civ Pool use tab1, Log uses tab2. The tabs atlas has tab1 above tab2, each with its normal look on the left and its hover look on the right. There's no selected image, so the selected tab is bold at full brightness and the others are dimmed. */ :root:not([data-simple]) .tab { top: 0; width: 70px; height: 25px; margin-right: -2px; padding: 0 0 3px; border: 0; background: url("images/ui/tabs.webp") 0 0 / 200% 200% no-repeat; filter: brightness(.88); } :root:not([data-simple]) #tab-1 { background-position-y: 100%; } :root:not([data-simple]) .tab:hover { background-position-x: 100%; } :root:not([data-simple]) .tab[aria-selected="true"] { z-index: 1; filter: none; font-weight: 600; } .panel { position: absolute; z-index: 1; inset: 0; } /* Each control lists the tabs it shows on, e.g. data-on="0 1". */ .client[data-tab="0"] [data-on]:not([data-on~="0"]), .client[data-tab="1"] [data-on]:not([data-on~="1"]), .client[data-tab="2"] [data-on]:not([data-on~="2"]) { display: none !important; } .btn { position: absolute; margin: 0; padding: 0 6px; font: inherit; color: #000; background: #e1e1e1; border: 1px solid #adadad; cursor: var(--hand, pointer); } .btn:hover { background: #e5f1fb; border-color: var(--accent); } .btn:active { background: #cce4f7; border-color: #005499; } .btn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } /* Parchment text buttons: wooden button images with a blackletter face, which hover leaves as it is. A pressed button's text turns gold and, like the hamburger's bars and the share buttons' icon, moves 2 px up and 2 px right with the face of the pressed image. */ :root:not([data-simple]) .btn { border: 0; background: url("images/ui/button.webp") center / 100% 100% no-repeat; font: 14px "Lucida Blackletter", "Old English Text MT", serif; color: #d7c6ad; } :root:not([data-simple]) .btn:active { padding: 0 2px 2px 4px; background-image: url("images/ui/button_pressed.webp"); color: #d7ca15; } :root:not([data-simple]) .btn:focus-visible { outline-color: #f1deae; box-shadow: none; } .imgbtn { position: absolute; margin: 0; padding: 0; border: 0; background: none; cursor: var(--hand, pointer); } .imgbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Sprites: ::before draws the whole of the element's atlas, a grid of --cols by --rows cells the size of the element, and moves it so that cell (--x + --look, --y) lies over the element, which clips the rest. A background showing just part of an image is shrunk without the smoothing a whole image gets, which leaves small icons jagged. The script sets --x and --y for the icons, and --look steps along a row to a hover or pressed look. --cols and --rows are the atlas's grid, as tools/atlas_builder.py prints it for the icon atlases. */ :root:not([data-simple]) .sprite { overflow: hidden; } :root:not([data-simple]) .sprite::before { content: ""; position: absolute; left: calc((var(--x, 0) + var(--look, 0)) * -100%); top: calc(var(--y, 0) * -100%); width: calc(var(--cols) * 100%); height: calc(var(--rows) * 100%); background: var(--atlas) 0 0 / 100% 100% no-repeat; } .civ-cell { --atlas: url("images/civ/civicon_atlas.webp"); --cols: 8; --rows: 8; } /* The big civ icon and its swipe ghost draw one civ's own icon file, which the script sets as --atlas, so the Draw Civ tab loads one icon rather than the atlas of small icons. */ #civIcon, #civGhost { --cols: 1; --rows: 1; } .dlc-cell { --atlas: url("images/dlc/dlc_atlas.webp"); --cols: 6; --rows: 4; } #editionIcon { --atlas: url("images/dlc/edition_banners_atlas.webp"); --cols: 1; --rows: 3; } /* Parchment image buttons: each atlas has the button's looks side by side, normal first and pressed last, with the options button's hover look between them. */ #optionsBig { --atlas: url("images/ui/options_button.webp"); --cols: 3; --rows: 1; } #techBtn { --atlas: url("images/ui/techtree_button.webp"); --cols: 2; --rows: 1; } #optionsBig:hover { --look: 1; } #optionsBig:active { --look: 2; } #techBtn:active { --look: 1; } /* Parchment share buttons: drawn from the 6 px button nine-slice, pressed while held down, with the share icon drawn by ::before over the whole button, borders included. */ :root:not([data-simple]) :is(#shareBtn, #poolShareBtn) { border: 6px solid transparent; border-image: url("images/ui/button_9slice.webp") 6 fill repeat; } :root:not([data-simple]) :is(#shareBtn, #poolShareBtn):active { border-image-source: url("images/ui/button_pressed_9slice.webp"); } :root:not([data-simple]) :is(#shareBtn, #poolShareBtn):active::before { transform: translate(1px, -1px); } :root:not([data-simple]) :is(#shareBtn, #poolShareBtn)::before { content: ""; position: absolute; inset: -6px; background: url("images/ui/share_icon.webp") center / 28px no-repeat; } .label { position: absolute; margin: 0; white-space: nowrap; } :is(#roundCounter, #drawnCount, #remainingCount, #enabledCount) { font-weight: 600; } .chk { position: absolute; display: flex; align-items: center; gap: 4px; white-space: nowrap; cursor: var(--hand, pointer); } .chk input { flex: none; margin: 0; cursor: var(--hand, pointer); } /* Parchment checkboxes: wooden box images in place of the system checkbox, pressed while the label is held down. The checkbox atlas has the unticked box above the ticked one, each with its pressed look on the right. */ :root:not([data-simple]) input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 16px; height: 16px; margin: 0; border: 0; border-radius: 0; background: url("images/ui/checkbox.webp") 0 0 / 200% 200% no-repeat; } :root:not([data-simple]) input[type="checkbox"]:checked { background-position-y: 100%; } :root:not([data-simple]) label:active > input[type="checkbox"] { background-position-x: 100%; } :root:not([data-simple]) input[type="checkbox"]:focus-visible { outline: 1px dotted #000; outline-offset: 1px; } /* The logs keep the arrow cursor rather than the text cursor. The script scrolls them for touch, so the browser's panning, with its momentum, is off. */ .log { position: absolute; margin: 0; padding: 2px 4px; overflow: hidden auto; border: 1px solid #7a7a7a; background: #fff; color: #000; font: 12px/1.35 var(--ui); user-select: text; -webkit-user-select: text; touch-action: none; cursor: var(--arrow, default); } .log:focus-visible { outline: 1px solid var(--accent); border-color: var(--accent); } /* Log rows: each civ's icon, at the size of the Civ Pool tab's, leads its line, and a blank line parts the rounds. The parchment logs' lines are tall enough for the icons. */ .log-row { display: flex; align-items: center; gap: 4px; } .log-icon { position: relative; flex: none; width: 18px; height: 18px; } .log-round + .log-round { margin-top: 1lh; } :root:not([data-simple]) .log { line-height: 20px; } /* Parchment log panels: a sunken brown box drawn from the 6 px nine-slice, with its edges and middle tiled. The transparent border keeps the scrollbar inside the frame, the padding keeps the text a little further in, and the brown under the nine-slice is the colour of its middle. */ :root:not([data-simple]) .log { border: 6px solid transparent; padding: 6px 2px 6px 8px; color: #d9c69d; background: #615035; border-image: url("images/ui/log_9slice.webp") 6 fill repeat; } :root:not([data-simple]) .log:focus-visible { border-color: transparent; outline-color: #5a3d22; } /* Parchment log scrollbars: the script hides the browser's scrollbar on each log and lays one in the game's style over the log's right side, in every browser: an up button, a track and a down button, 27 px wide, and a 21 px knob that runs the whole track. The scrollbar three-slice has the up button, the track and the down button from top to bottom, and the track stretches its middle slice, whose columns are each nearly one colour. A log with a scrollbar keeps its text clear of it. */ :root:not([data-simple]) .log { scrollbar-width: none; } :root:not([data-simple]) .log::-webkit-scrollbar { display: none; } :root:not([data-simple]) .log.has-bar { padding-right: 29px; } .sb { position: absolute; width: 27px; touch-action: none; } .sb-btn { position: absolute; left: 0; width: 27px; height: 27px; } .sb-up { top: 0; } .sb-down { bottom: 0; } .sb-track { position: absolute; top: 27px; bottom: 27px; left: 0; width: 27px; } .sb-knob { position: absolute; left: 3px; width: 21px; height: 21px; } :root:not([data-simple]) :is(.sb-up, .sb-track, .sb-down) { background: url("images/ui/scrollbar_3slice.webp") 0 0 / 100% 300% no-repeat; } :root:not([data-simple]) .sb-track { background-position-y: 50%; } :root:not([data-simple]) .sb-down { background-position-y: 100%; } :root:not([data-simple]) .sb-knob { background: url("images/ui/scrollbar_knob.webp") 0 0 / 100% 100% no-repeat; } /* Positions in the 534x511 client area, as on the desktop app */ #optionsBig { left: 66px; top: 54px; width: 72px; height: 72px; } #civIcon { left: 217px; top: 165px; width: 104px; height: 104px; } #civName { left: 169px; top: 273px; width: 200px; text-align: center; font-size: 13px; font-weight: 600; } #drawBtn { left: 217px; top: 305px; width: 100px; height: 30px; } #resetBtn { left: 10px; top: 471px; width: 100px; height: 30px; } .client[data-tab="1"] #resetBtn { left: 217px; } #techBtn { left: 384px; top: 391px; width: 60px; height: 60px; } /* The share button sits midway between Draw and Reset on the Log tab. */ #shareBtn { left: 249px; top: 385px; width: 37px; height: 37px; } #roundCounter { left: 456px; top: 484px; width: 60px; text-align: right; } #drawnCount { left: 10px; top: 32px; } #clearLogBtn { left: 110px; top: 25px; width: 100px; height: 30px; } #drawnLog { left: 10px; top: 60px; width: 198px; height: 441px; } #remainingCount { left: 327px; top: 32px; } #showRemainingLabel { left: 457px; top: 30px; height: 20px; } #remainingLog { left: 327px; top: 60px; width: 202px; height: 441px; } /* Edition rows, placed by the script */ .edition { display: flex; align-items: center; gap: 4px; width: 175px; height: 28px; font: inherit; color: #000; text-align: left; white-space: nowrap; } .ed-icon { position: relative; flex: none; width: 28px; height: 28px; } .edition[aria-pressed="true"] { font-weight: 600; } /* An edition's icon shows its hover look, or its pressed look while pressed or selected: the next two cells along. */ :root:not([data-simple]) .edition:hover .ed-icon { --look: 1; } :root:not([data-simple]) :is(.edition:active, .edition[aria-pressed="true"]) .ed-icon { --look: 2; } /* The banner and count sit 10 px right of the desktop app's spot, so the bold selected edition name clears them. */ #editionIcon { left: 200px; top: 30px; width: 128px; height: 93px; } #enabledCount { left: 210px; top: 140px; } #autoToggleLabel { left: 10px; top: 180px; height: 20px; } .civ { width: 102px; height: 20px; } /* Civ and DLC toggles: the icon stands in for the checkbox, which stays in the label for the keyboard and screen readers. When off, the icon turns grey under the off cross. */ :root:not([data-simple]) .icon-chk input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .chk-icon { position: relative; flex: none; } .chk-icon > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .chk-off { visibility: hidden; transform: scale(.9); } /* The off cross is a CSS image rather than an img, so it loads with the Civ Pool tab rather than the page. */ :root:not([data-simple]) .chk-off { background: url("images/ui/off.webp") center / contain no-repeat; } .icon-chk input:not(:checked) ~ .chk-icon .chk-face { filter: grayscale(1); } .icon-chk input:not(:checked) ~ .chk-icon .chk-off { visibility: visible; } .icon-chk input:focus-visible ~ .chk-icon { outline: 1px dotted #000; outline-offset: 1px; } /* Civ and DLC names are bold when on and struck through when off. The narrower gap after the civ icon keeps the widest bold civ name, Burgundians, clear of the next column. */ :root:not([data-simple]) .civ { gap: 2px; } .icon-chk input:checked ~ .chk-name { font-weight: 600; } .icon-chk input:not(:checked) ~ .chk-name { font-style: italic; text-decoration: line-through; text-decoration-thickness: 2px; } #enableAllBtn { left: 10px; top: 470px; width: 100px; height: 30px; } #disableAllBtn { left: 125px; top: 470px; width: 100px; height: 30px; } #autoResetLabel { left: 240px; top: 480px; height: 20px; } #poolShareBtn { left: 487px; top: 466px; width: 37px; height: 37px; } /* A hovered civ is highlighted gold while on and red while off. */ :root:not([data-simple]) .civ:hover { background: #dccb70; } :root:not([data-simple]) .civ:hover:has(input:not(:checked)) { background: #dc6a5c; } /* Simple mode (/simple) has a stylesheet of its own, simple/simple.css, which only it loads. Its extra elements, marked .simple, stay hidden here. */ :root:not([data-simple]) .simple { display: none !important; } /* Status messages show just below the window, without moving it. */ #app { position: relative; } #toast { position: absolute; z-index: 5; top: 100%; left: 50%; margin-top: 14px; transform: translateX(-50%); padding: 5px 12px; border-radius: 3px; background: #2b2b2b; color: #fff; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); pointer-events: none; opacity: 0; transition: opacity .15s; } #toast.show { opacity: 1; } #tip { position: fixed; z-index: 100; max-width: 300px; padding: 3px 7px 4px; background: #fff; color: #575757; border: 1px solid #767676; box-shadow: 1px 1px 3px rgba(0, 0, 0, .18); font: 12px/1.35 var(--ui); white-space: pre-line; pointer-events: none; } /* Parchment tooltips: tan with dark brown text. A tooltip for a button that opens another site starts with the external icon, filtered from the menus' cream to the tooltip's text colour. */ :root:not([data-simple]) #tip { background: #d7b394; color: #391c1b; } :root:not([data-simple]) #tip.ext::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; background: url("images/ui/external.webp") center / contain no-repeat; filter: brightness(.15) hue-rotate(-54deg) saturate(3.1); } /* Dialogs */ dialog.win { padding: 0; max-width: calc(100vw - 32px); border: 1px solid var(--frame); background: var(--face); color: #000; color-scheme: light; font: 12px/1.4 var(--ui); box-shadow: 0 12px 36px rgba(0, 0, 0, .35); } dialog.win::backdrop { background: rgba(0, 0, 0, .15); } /* Every dialog is a parchment panel. The padding keeps the content inside the panel's frame, and a drop shadow follows the panel's transparent corners where a box shadow wouldn't. */ :root:not([data-simple]) dialog.win { --slice: 38px; padding: 13px; border: 0; box-shadow: none; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .35)); background: none; } /* The panel is drawn from the 64 px nine-slice, each part --slice px square: ::after draws the corners and the edges, whose tiles round to fit between the corners, and ::before under it stretches the nine-slice's middle into the inlay. The inlay reaches half a slice under the edges and corners, whose inner halves are opaque, so a dialog with a fractional height leaves no gap where they meet. */ :root:not([data-simple]) dialog.win::before, :root:not([data-simple]) dialog.win::after { content: ""; position: absolute; z-index: -1; pointer-events: none; } :root:not([data-simple]) dialog.win::before { inset: calc(var(--slice) / 2); background: url("images/ui/panel_9slice.webp") 50% 50% / 300% 300% no-repeat; } :root:not([data-simple]) dialog.win::after { inset: 0; border: var(--slice) solid transparent; border-image: url("images/ui/panel_9slice.webp") 64 / var(--slice) round; } :root:not([data-simple]) dialog.win .dlg-title { background: none; } :root:not([data-simple]) #dlgOptions .group { border-color: rgba(60, 40, 20, .35); } /* Hint, label, link and error colours dark enough to read on the panel's tan */ :root:not([data-simple]) dialog.win :is(.hint, .facts dt) { color: #3d2c1c; } :root:not([data-simple]) dialog.win a { color: #08306a; } :root:not([data-simple]) dialog.win .err { color: #680a0a; } .dlg-title { display: flex; align-items: center; justify-content: space-between; height: 30px; padding-left: 10px; background: #fff; user-select: none; -webkit-user-select: none; } .dlg-title h2 { margin: 0; font: inherit; } .dlg-x { width: 46px; height: 30px; border: 0; background: none; font: 13px var(--ui); color: #000; cursor: pointer; } .dlg-x:hover { background: #e81123; color: #fff; } /* Parchment close buttons: the wooden x button in place of the ✕ glyph, with no hover change. The padding leaves a 17 px content box in the middle of the button, and the x button atlas, its normal look and then its pressed look, is drawn only there. */ :root:not([data-simple]) .dlg-x { padding: 6.5px 14.5px; color: transparent; cursor: var(--arrow, default); background: url("images/ui/x_button.webp") 0 0 / 200% 100% no-repeat content-box; } :root:not([data-simple]) .dlg-x:active { background-position-x: 100%; } .dlg-body { padding: 12px 14px 4px; } .dlg-body p { margin: 0 0 8px; } .dlg-buttons { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 14px 14px; } .dlg-buttons .btn, .dlg-body .btn { position: static; min-width: 75px; height: 23px; } .dlg-body a { color: #0066cc; cursor: var(--hand, pointer); } .group { min-width: 0; margin: 0; padding: 4px 10px 10px; border: 1px solid #dcdcdc; } .group legend { padding: 0 3px; } .row { display: flex; align-items: center; gap: 6px; min-height: 22px; white-space: nowrap; cursor: var(--hand, pointer); } .row input { margin: 0; cursor: var(--hand, pointer); } .field { display: grid; gap: 4px; width: 420px; margin-bottom: 8px; } dialog select, dialog input[type="text"] { height: 22px; padding: 0 4px; border: 1px solid #7a7a7a; background: #fff; color: #000; font: inherit; } dialog select:disabled { color: #8a8a8a; border-color: #c4c4c4; } /* Parchment dropdowns: dark brown like the menus, with the wooden dropdown button as the arrow. The dropdown button atlas has the button's normal look and then its pressed look. It's placed so that the look shown fills the right 16 px, and a brown layer over it covers the other look when that falls inside the box. */ :root:not([data-simple]) dialog select { appearance: none; -webkit-appearance: none; padding: 0 22px 0 4px; border-color: #3d2c1c; border-radius: 0; color: #f1deae; cursor: var(--hand, pointer); background: linear-gradient(#65523b, #65523b) 0 0 / calc(100% - 16px) 100% no-repeat, #65523b url("images/ui/dropdown_button.webp") right -16px top 0 / 32px 100% no-repeat; } /* Each box fits its longest option, as a system dropdown does, so it keeps its width when the choice changes. */ :root:not([data-simple]) dialog select[name="jingleType"] { width: 124px; } :root:not([data-simple]) dialog select[name="hotkeys"] { width: 120px; } :root:not([data-simple]) dialog select:active { background-position-x: 0, right; } :root:not([data-simple]) dialog select:disabled { opacity: .55; cursor: var(--arrow, default); } :root:not([data-simple]) dialog select:focus-visible { outline: 1px dotted #000; outline-offset: 1px; } :root:not([data-simple]) dialog option { background: #65523b; color: #f1deae; } /* Browsers with customizable selects also get the menus' gold highlight on the hovered option. Elsewhere the open list is brown, but the hovered option keeps the system highlight. */ @supports (appearance: base-select) { :root:not([data-simple]) dialog select, :root:not([data-simple]) dialog select::picker(select) { appearance: base-select; } :root:not([data-simple]) dialog select { min-block-size: 0; align-items: center; } :root:not([data-simple]) dialog select:open { background-position-x: 0, right; } :root:not([data-simple]) dialog select::picker-icon, :root:not([data-simple]) dialog option::checkmark { display: none; } /* The list opens below the box unless it doesn't fit there, as a system dropdown does. */ :root:not([data-simple]) dialog select::picker(select) { padding: 2px; border: 1px solid #3d2c1c; border-radius: 0; background: #65523b; box-shadow: 2px 2px 3px rgba(0, 0, 0, .25); position-try-order: normal; } :root:not([data-simple]) dialog option { min-block-size: 0; padding: 3px 6px; cursor: var(--hand, pointer); } :root:not([data-simple]) dialog option:hover, :root:not([data-simple]) dialog option:focus-visible { background: #dccb70; color: #000; outline: none; } } /* Parchment text fields in the share, lobby and open link dialogs: dark boxes drawn from the 15 px nine-slice at about half size, with white text. The nine-slice reaches past the 1 px border into the padding, and the grey under it is the colour of its middle. */ :root:not([data-simple]) :is(#sharePool, #shareRound, #lobbyCode, #openInput) { padding: 0 5px; border: 1px solid transparent; border-radius: 0; color: #fff; background: #474747; border-image: url("images/ui/textfield_9slice.webp") 15 fill / 7px stretch; } :root:not([data-simple]) #lobbyCode::placeholder { color: rgba(255, 255, 255, .45); } :root:not([data-simple]) :is(#sharePool, #shareRound, #lobbyCode, #openInput):focus-visible { outline: 1px dotted #000; outline-offset: 1px; } dialog input[type="range"] { width: 100%; margin: 2px 0; cursor: var(--arrow, default); } /* Parchment slider: the off track, with the on track over it up to the knob's centre, and the knob image as the thumb. The slider atlas has the off track above the on track, each 340x25 px: ::before and ::after draw them as wide as the slider and centred on it. The knob travels along the track's groove, which runs from 32 to 308 px of the 340 px, between the arrowheads. The script sets --fill (0 to 1) to the slider's position. */ :root:not([data-simple]) .slider { position: relative; margin: 2px 0; } :root:not([data-simple]) .slider::before, :root:not([data-simple]) .slider::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 340 / 25; transform: translateY(-50%); background: url("images/ui/slider.webp") 0 0 / 100% 200% no-repeat; } :root:not([data-simple]) .slider::after { background-position-y: 100%; clip-path: inset(0 calc(100% - 9.41% - 81.18% * var(--fill, 0)) 0 0); } :root:not([data-simple]) .slider:has(input:disabled) { opacity: .55; } :root:not([data-simple]) .slider input { -webkit-appearance: none; appearance: none; position: relative; z-index: 1; display: block; width: calc(81.18% + 24px); height: 24px; margin: 0 auto; background: none; } :root:not([data-simple]) .slider input:focus-visible { outline: 1px dotted #000; outline-offset: 1px; } :root:not([data-simple]) .slider input::-webkit-slider-runnable-track { height: 24px; background: none; } :root:not([data-simple]) .slider input::-moz-range-track { height: 24px; background: none; } :root:not([data-simple]) .slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border: 0; background: url("images/ui/slider_knob.webp") center / contain no-repeat; } :root:not([data-simple]) .slider input::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 0; background: url("images/ui/slider_knob.webp") center / contain no-repeat; } .hint { color: #555; } .err { color: #c42b1c; } .opt-grid { display: grid; grid-template-columns: repeat(3, 214px); gap: 10px; } .span2 { grid-column: span 2; } .inline { display: flex; align-items: center; gap: 10px; } .hk-grid { display: grid; grid-template-columns: auto auto auto; gap: 4px 28px; align-items: start; } .hk-grid h3 { margin: 0 0 4px; font-size: 12px; } .hk-grid section + section { margin-top: 12px; } .hk-grid ul { margin: 0; padding: 0; list-style: none; } .hk-grid .global ul { columns: 2; column-gap: 28px; } .hk-grid li { white-space: nowrap; line-height: 1.75; break-inside: avoid; } kbd.key { display: inline-block; min-width: 20px; padding: 0 4px; border: 1px solid #b4b4b4; border-bottom-width: 2px; border-radius: 3px; background: #fff; font: 11px/1.4 var(--ui); text-align: center; } :root:not([data-simple]) kbd.key { background: #d7b394; color: #391c1b; } .about { width: 440px; } .share { width: 600px; } .share-row { display: grid; grid-template-columns: 120px 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; } .share-row input { width: 100%; } .preview { width: 440px; } .facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0 0 10px; } .facts dt { color: #555; } .facts dd { margin: 0; } .msg { width: 380px; } /* Phones: narrower than the desktop window, the page becomes a phone layout. The parchment fills the screen, the tabs fill the bottom edge and a hamburger menu at the top right stands in for the menu bar. Each tab's panel is a grid of named areas in place of the desktop positions. The Draw Civ tab has no buttons, as the script turns swipes on it into draws, and the Log and Civ Pool tabs are laid out to the screen's width. .desk marks what only the desktop layout shows, and .mob what only the phone layout shows. */ @media (min-width: 610px) { .mob { display: none !important; } } @media (max-width: 609px) { :root { --tabbar: 64px; } :root:not([data-simple]) .desk { display: none !important; } html, body { height: 100%; overflow: hidden; overscroll-behavior: none; } body { min-width: 0; min-height: 0; padding: 0; display: block; font-size: 13px; -webkit-tap-highlight-color: transparent; } #app { position: fixed; inset: 0; } .window, :root:not([data-simple]) .window { position: absolute; inset: 0; width: auto; padding: 0; border: 0; box-shadow: none; } :root:not([data-simple]) .window { background-image: url("images/ui/background_mobile.webp"); } .titlebar, .menubar, .frame { display: none; } .client { position: absolute; inset: 0 0 var(--tabbar); width: auto; height: auto; } /* Hamburger menu: three bars in the button's text colour, drawn by ::before over the whole button, borders included. In parchment mode the button is drawn from the 6 px button nine-slice, pressed while held down or while the menu is open, with cream bars that brighten on hover. */ #mobileMenu { position: fixed; z-index: 20; top: 10px; right: 12px; } #mobileMenu .menu-title { position: relative; width: 44px; height: 40px; padding: 0; background: none; color: #3d2c1c; cursor: var(--hand, pointer); } #mobileMenu .menu-title::before { content: ""; position: absolute; inset: -1px; background: linear-gradient(currentColor 0 0) 50% 11px / 24px 3px no-repeat, linear-gradient(currentColor 0 0) 50% 18px / 24px 3px no-repeat, linear-gradient(currentColor 0 0) 50% 25px / 24px 3px no-repeat; } #mobileMenu.open .menu-title { background-color: #cce8ff; } :root:not([data-simple]) #mobileMenu .menu-title { border: 6px solid transparent; color: #f1deae; border-image: url("images/ui/button_9slice.webp") 6 fill repeat; } :root:not([data-simple]) #mobileMenu .menu-title::before { inset: -6px; } :root:not([data-simple]) #mobileMenu .menu-title:hover { color: #fff8e0; } :root:not([data-simple]) #mobileMenu .menu-title:active, :root:not([data-simple]) #mobileMenu.open .menu-title { background-color: transparent; border-image-source: url("images/ui/button_pressed_9slice.webp"); } :root:not([data-simple]) #mobileMenu .menu-title:active::before, :root:not([data-simple]) #mobileMenu.open .menu-title::before { transform: translate(1px, -1px); } :root:not([data-simple]) #mobileMenu .menu-title:focus-visible { outline-color: #f1deae; } #mobileMenu .menu-list { top: calc(100% + 2px); left: auto; right: 0; min-width: 190px; } #mobileMenu .menu-list > :is(button, a) { padding: 10px 18px 10px 32px; font-size: 15px; } /* Tab bar: the three tabs share the width. The phone tabs atlas has each tab's selected look on the left and its normal look on the right, and the tabs differ in size, so --tx, --ty, --tw and --th give the look's box in the atlas. ::before draws the whole atlas, scaled so that box fills the tab. */ .tabstrip { position: fixed; z-index: 10; inset: auto 0 0; height: var(--tabbar); } :root .tabstrip .tab { flex: 1 1 0; width: auto; top: 0; height: 100%; margin: 0; padding: 0 0 4px; font-size: 16px; } .tab[aria-selected="true"] { font-weight: 600; } :root:not([data-simple]) .tab { background: none; filter: none; isolation: isolate; overflow: hidden; } :root:not([data-simple]) .tab::before { content: ""; position: absolute; z-index: -1; left: calc(var(--tx) / var(--tw) * -100%); top: calc(var(--ty) / var(--th) * -100%); width: calc(1400 / var(--tw) * 100%); height: calc(353 / var(--th) * 100%); background: url("images/ui/mobile_tabs.webp") 0 0 / 100% 100% no-repeat; } #tab-0 { --tx: 363; --ty: 5; --tw: 333; --th: 178; } #tab-0[aria-selected="true"] { --tx: 24; } #tab-1 { --tx: 1045; --ty: 2; --tw: 317; --th: 148; } #tab-1[aria-selected="true"] { --tx: 708; } #tab-2 { --tx: 359; --ty: 195; --tw: 305; --th: 147; } #tab-2[aria-selected="true"] { --tx: 30; } /* Panels: grids of named areas, with room at the top for the menu button. Their items leave the desktop positions, all but the log scrollbars, which the script places, and the sprites, whose images hang off their own box. */ .panel { display: grid; gap: 6px 10px; padding: 58px 14px 10px; } .panel > :not(.sb) { position: static; } :root :is(#civIcon, #civGhost, #editionIcon, #shareBtn, #poolShareBtn) { position: relative; left: auto; top: auto; } /* Draw Civ tab: the round counter level with the menu button, the civ in the middle and the swipe hints at the bottom. touch-action: none keeps the browser from scrolling, zooming or reloading the page on a swipe. The swipe ghost shares the civ icon's place, so the script moves both from there. */ .client[data-tab="0"] .panel { grid-template: "counter" 40px "." 1fr "icon" auto "name" auto "." 1fr "hints" auto / minmax(0, 1fr); justify-items: center; padding-top: 10px; touch-action: none; -webkit-touch-callout: none; } #roundCounter { grid-area: counter; justify-self: start; align-self: center; width: auto; position: relative; left: 5px; top: 5px; } #civIcon, #civGhost { grid-area: icon; width: 144px; height: 144px; } #civGhost { pointer-events: none; } #civName { grid-area: name; width: auto; max-width: 100%; font-size: 20px; } #swipeHints { grid-area: hints; text-align: center; color: #3d2c1c; } #swipeHints p { margin: 0; line-height: 1.7; } /* Log tab: the counts just over the logs, the logs filling the rest, then Clear Log and the share button under the drawn log and Show under the remaining one, just over the tab bar. The drawn log is the wider, as its lines are the longer. */ .client[data-tab="1"] .panel { grid-template: "dcount rcount" auto "dlog rlog" minmax(0, 1fr) "dctl rctl" auto / minmax(0, 5fr) minmax(0, 4fr); align-items: center; } .client[data-tab="1"] :is(#civIcon, #civName) { display: none; } #drawnCount { grid-area: dcount; } #remainingCount { grid-area: rcount; } #clearLogBtn { grid-area: dctl; justify-self: start; } #shareBtn { grid-area: dctl; justify-self: end; } #showRemainingLabel { grid-area: rctl; justify-self: end; } #drawnLog { grid-area: dlog; } #remainingLog { grid-area: rlog; } #drawnLog, #remainingLog { width: 100%; height: 100%; align-self: stretch; font-size: 13px; } /* Civ Pool tab: the editions beside the banner, Auto-toggle beside the count and the DLC toggles in two columns, then the civs in three columns, which scroll when the screen is too short for them, and the buttons at the bottom. The toggles of DE's four oldest DLCs are left out, so that the civs fit without scrolling. */ .client[data-tab="2"] .panel { grid-template: "ed ed banner banner" auto "tog tog count count" auto "dlc dlc dlc dlc" auto "civs civs civs civs" minmax(0, 1fr) "enable disable . share" auto "reset reset reset share" auto / 90px 90px minmax(0, 1fr) auto; gap: 6px 8px; } #editionGroup { grid-area: ed; display: flex; flex-direction: column; gap: 2px; } #editionGroup > .edition { position: static; width: auto; } #editionIcon { grid-area: banner; justify-self: end; } #autoToggleLabel { grid-area: tog; } #enabledCount { grid-area: count; justify-self: end; } .panel > div[data-edition] { grid-area: dlc; display: flex; flex-wrap: wrap; gap: 2px 10px; } .panel > div[data-edition] > label { position: static; width: calc(50% - 5px); } .panel > div[data-edition] > label:is([data-dlc="india"], [data-dlc="dukes"], [data-dlc="west"], [data-dlc="khans"]) { display: none; } #civGrid { grid-area: civs; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 24px; align-content: start; column-gap: 4px; overflow-y: auto; } #civGrid > .civ { position: static; width: auto; height: auto; } #enableAllBtn { grid-area: enable; } #disableAllBtn { grid-area: disable; } #enableAllBtn, #disableAllBtn { width: 90px; } #poolShareBtn { grid-area: share; align-self: center; } #autoResetLabel { grid-area: reset; } /* The status message sits its own height lower than 12 px over the tab bar, below the phone's own message on a copy, so it reaches over the tab bar's top edge. */ #toast { position: fixed; z-index: 11; top: auto; bottom: calc(var(--tabbar) + 12px); margin-top: 0; transform: translate(-50%, 100%); } /* Dialogs fit the screen in one column and close from their own buttons. */ .dlg-x { display: none; } .opt-grid { grid-template-columns: minmax(0, 1fr); } .span2 { grid-column: auto; } :is(.about, .share, .preview, .msg, .field) { width: auto; } .share-row { grid-template-columns: minmax(0, 1fr) auto; } .share-row label { grid-column: 1 / -1; } } /* A touch screen keeps :hover on whatever was last touched, so a tapped civ would stay highlighted. */ @media (max-width: 609px) and (hover: none) { :root:not([data-simple]) .civ:hover, :root:not([data-simple]) .civ:hover:has(input:not(:checked)) { background: none; } }