@charset "utf-8"; /* ============================================================================ admin-modern.css - visual skin for the admin panel. Ported from the AnIsland/DevAdmin panel's identical rework - see ADMIN_UI_MODERNIZATION.md in that repo for the full design rationale, and this project's own copy of that file for what changed in translation (this panel has no HelpTooltipHelper/tbl_mst_help_metadata tooltip system, and its templates used to carry raw bgcolor="#aeeefc" attributes rather than .row-label/ classes - the attributes have since been stripped from every template in favour of the classes, see the "table colour" section below). Loaded AFTER bootstrap.min.css and admin-layout.css, and deliberately additive: it restyles the classes the templates already use (.btn, .form-control, table, .row-label, .form-group, .side_menu ...) rather than requiring markup changes beyond that one class, so the whole panel re-skins across every game's templates and per-game overrides with minimal template edits. Reverting this file alone returns the panel to its previous appearance. ============================================================================ */ /* Palette values are spread deliberately wide. The first pass kept page ground, table headers, alt rows and surfaces all between 94% and 100% relative luminance - a 6-point band that read as washed out, with borders at 89% almost invisible against white. Each step below is a real change in value, so surfaces lift off the ground and headers separate from their rows: surface 100% .. row-alt 97% .. page ground 91% .. table header 88% .. border 81% .. mid 71% A first attempt at this went too far the other way - ground at 87% and headers at 82% put an 18-point jump between a table's header and its own rows, which read as harsh rather than clear. The steps below are smaller but still real: enough to separate, not enough to shout. */ /* Hues come back to the panel's original teal/cyan family. The neutral blue-greys this replaced held their values apart correctly but were desaturated everywhere, so nothing drew the eye - a washed-out painting. Pop is a function of saturation, not value, so the value structure is kept (it works) and the hues are saturated instead. #aeeefc and #13819c are the panel's own original colours, carried forward as the table header and label tokens below (see the "table colour" section) now that every template's own bgcolor="#aeeefc" attribute has been replaced with the .row-label class it was standing in for. */ :root { --bg: #eef6fb; /* page ground - tinted, not grey */ --surface: #ffffff; --row-alt: #f4fafd; --border: #bfdeed; /* inner cell rules - soft */ --border-mid: #74b4d0; /* outer edges + controls - has to hold its own against white */ /* Column headers are a dark band with white text: it separates header from data far more clearly than any tint, and does it without colouring the data area at all. */ --head-bg: #13819c; --head-fg: #ffffff; --caption-bg: #0e6377; /* table title bar - a shade deeper so it stacks above the band */ /* ROW labels are a different job from COLUMN headers and stay light. /gameplay and /general-config are key/value tables whose left column is labels; running that dark would put a heavy bar down the page. */ --label-bg: #cbe5ef; --label-fg: #0c4a5c; --text: #12242c; --muted: #4e6470; --accent: #13819c; /* the original header teal */ --accent-dk: #0e6377; --accent-sf: #e6f3f8; --danger: #c0392b; --danger-sf: #fde8e5; --radius: 3px; --nav: #13819c; /* the original bright header */ --nav-2: #123333; /* the original dark sub-header */ --nav-dev: #a13a5c; /* development environment - saturated, same family, unmistakably not prod */ --lift: 0 1px 2px rgba(19, 79, 99, .13); /* side menu - back to the original light blue ground, with a saturated current-page fill */ --side-bg: #cce8fc; --side-fg: #0f4f61; --side-label: #4c7f92; --side-hover: #ffffff; --side-rule: #9fcdea; --side-band: #b2d7ee; /* group-heading band, spans the menu's full width */ --side-band-fg: #14536a; } /* ---------------------------------------------------------------- typography */ body { /* System stack rather than a webfont: this UI is majority-Japanese, and a CJK webfont is multi-megabyte even subsetted, which is a poor trade for an internal tool. These are the native UI faces on each OS. */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif; font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } .content { background: var(--bg); } h1 { font-size: 21px; font-weight: 600; margin: 2px 0 14px; letter-spacing: .01em; } h2 { font-size: 16px; font-weight: 600; margin: 20px 0 8px; } h3 { font-size: 15px; font-weight: 600; } h4 { font-size: 13px; font-weight: 600; } .content p { color: var(--muted); font-size: 13px; max-width: 78ch; } /* Page help text. EggRates (index + edit), LoginBonus (create + edit) and others open with a paragraph explaining what the screen does and which rules apply - genuinely important guidance that was rendering as plain grey prose, or as a hand-rolled inline-styled box that would have clashed with the padding-left this callout reserves for its icon (see the memo note below). Selected as "the paragraph adjacent to the page heading" so those pages get it with no per-page CSS; `.note` is the explicit opt-in for a memo anywhere else in the page (e.g. Notice's button-URL help, which sits mid-form rather than right after the h1). */ .content h1 + p, .content .note { position: relative; background: var(--accent-sf); border: 1px solid #9cc4d4; border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 11px 14px 11px 38px; margin: 0 0 16px; max-width: 96ch; color: #1d3b48; font-size: 12.5px; line-height: 1.7; } /* Long help boxes collapse to their first line with a toggle - see admin-modern.js, which measures each box and only makes it collapsible when it actually runs long. The max-height is set inline by that script from the box's own line-height and padding, because both vary with the viewport and hardcoding a pixel value here would clip mid-line at some widths. */ .content .help-collapsed { overflow: hidden; } /* Fades the clipped line so it reads as "there is more" rather than as a full stop. ::before is already taken by the ⓘ icon. */ .content .help-collapsed::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 1.35em; /* Reaches full opacity by 55% rather than at the very bottom: Japanese glyphs can overrun their line box, so a sliver of the next line survives the max-height clip and a gradient that only solidifies at the end leaves it faintly visible. */ background: linear-gradient(to bottom, rgba(227, 240, 246, 0) 0%, var(--accent-sf) 55%); pointer-events: none; } .help-toggle { appearance: none; background: none; border: 0; padding: 2px 4px; margin: -10px 0 14px 2px; font-size: 11.5px; font-weight: 700; color: var(--accent); cursor: pointer; text-decoration: underline; } .help-toggle:hover { color: var(--accent-dk); } .content h1 + p::before, .content .note::before { content: ""; position: absolute; left: 13px; top: 12px; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f6b87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11.5v5'/%3E%3Cpath d='M12 7.6h.01'/%3E%3C/svg%3E") no-repeat center; background-size: contain; } /* ------------------------------------------------------------------- chrome */ .header { padding: 0 16px; align-items: center; } h3.title { font-size: 17px; padding: 12px 0; letter-spacing: .02em; } ul.site-tab li a { padding: 14px 10px; font-size: 13px; opacity: .85; } ul.site-tab li a:hover { opacity: 1; color: #fff; } body.env-production .header { background: var(--nav); } /* Development environment. admin-layout.css sets this to #FF819C; the tiled 開発環境 watermark it draws in ::before is untouched and still does the actual signalling. The colour moves to a dark wine that sits in the same value range as the production navy - different hue, so "this is not production" still reads instantly, without the pink fighting the rest of the palette. */ body.env-development .header { background: var(--nav-dev); } #sub_header { background: var(--nav-2); padding: 7px 16px; font-size: 12.5px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* Segmented capsule - the top-level section tabs (統計資料 / ユーザー情報 / マスターデータ / 運営設定 / ログ) were plain bracketed text links ("[統計資料]") with no active-tab indicator at all. This is the same "one bordered group, dividers between states, solid accent fill on the current one" language as .seg (the OS filter toggle on KpiUus/KpiDaus below), adapted for the dark sub_header chrome instead of .seg's light-surface default. Real nav links rather than toggle buttons, so is-active (set server-side in layout/main.php from $link_type, which the controller already computes for the side-menu heading) marks the current one. Selectors are all rooted at #sub_header so they reliably beat admin-layout.css's own "#sub_header ul li a" rules on specificity - an id-selector prefix can't be outweighed by admin-modern.css merely loading last. */ #sub_header .sub-tabs { display: flex; align-items: stretch; border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--radius); overflow: hidden; flex: 0 1 auto; min-width: 0; } #sub_header .sub-tabs li { list-style: none; border-left: 1px solid rgba(255, 255, 255, .15); } #sub_header .sub-tabs li:first-child { border-left: 0; } #sub_header .sub-tabs a { display: block; padding: 6px 14px; color: rgba(255, 255, 255, .75); white-space: nowrap; text-decoration: none; } #sub_header .sub-tabs a:hover { background: rgba(255, 255, 255, .1); color: #fff; border-bottom: none; } #sub_header .sub-tabs li.is-active a { background: var(--accent); color: #fff; font-weight: 700; } #sub_header .sub-status { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; white-space: nowrap; color: rgba(255, 255, 255, .75); } #sub_header .sub-status a { color: rgba(255, 255, 255, .75); text-decoration: none; } #sub_header .sub-status a:hover { color: #fff; text-decoration: underline; border-bottom: none; } #sub_header #clock { font-weight: 700; color: #fff; } /* ---------------------------------------------------------------- side menu */ /* Dark surface, deliberately: a light menu against the light content area gave almost no edge to read (#eef3f7 vs #f5f7f9 is barely a value difference), and no border weight really fixes that. Going dark makes the boundary unmistakable and ties the menu to the header into one chrome L. */ /* 運営設定 runs to ~30 entries depending on which per-game features are enabled, so vertical rhythm here is worth being tight about - every pixel trimmed per row is multiplied by the row count. */ .side_menu { background: var(--side-bg); border-right: 1px solid var(--side-rule); padding: 10px 10px 12px; } /* Three tiers, deliberately distinct at a glance: h4 .............. section (largest, brightest, ruled off) li.menu_group ... group heading (small, muted, spaced above) li > strong > a . page link (mid weight; accent bar when current) The old design got this separation by accident - links were bright blue pills and group headings were bare text between them. Flattening every li to transparent lost it, so it's explicit now. */ /* The section title and the group headings share one label language - same weight, letter-spacing and rule treatment, differing only in size and brightness. That matters because only 運営設定 actually contains group headings (共通運営設定 / 未使用 / DB関連ファイル管理); 統計資料, ユーザー情報 and マスターデータ are flat lists. With two unrelated label styles those sections read as a different component entirely, and matching them means a section reads the same whether or not it happens to have subsections. */ .side_menu h4 { color: #0b3f4e; font-size: 13.5px; font-weight: 700; letter-spacing: .03em; margin: 0 2px 6px; padding-bottom: 7px; border-bottom: 1px solid var(--side-rule); } /* Links carry a surface; group headings are a full-width band. That contrast is the whole point. Telling a heading from a link was previously left to typography alone - an 11.5px muted label against a 14px one - which is a slow cue: you have to read before you can tell them apart. Both a surface and a band are perceived before reading, so "pressable" and "just a label" separate at a glance. (The original design had this by accident: links were bright blue pills and headings were bare text between them. Flattening the pills is what removed it.) The band also caps each group, so the sections read as blocks rather than as a run of items. */ .side_menu li { border: 0; background: transparent; border-radius: var(--radius); margin-bottom: 0; } .side_menu li:not(.menu_group) { background: rgba(255, 255, 255, .72); margin: 0 0 1px; } /* Negative side margins cancel .side_menu's own 10px padding so the band reaches both edges - that full bleed is what makes it read as a divider rather than another item in the list. */ .side_menu li.menu_group { background: var(--side-band); color: var(--side-band-fg); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; margin: 10px -10px 3px; padding: 3px 10px; border-radius: 0; cursor: default; } .side_menu li.menu_group:first-child { margin-top: 1px; } /* Type sized up and rows tightened together. At 13px with 7px of padding on every row the menu read as sparse - a lot of air around not much text. Larger text and less gap makes it a list again. */ .side_menu li:not(.menu_group):hover { background: var(--side-hover); } .side_menu a { margin-left: 0; padding: 5px 8px; color: var(--side-fg); font-size: 14px; font-weight: 500; line-height: 1.3; border-radius: var(--radius); } .side_menu li:hover a { color: var(--accent-dk); } /* Current page. The menu is the only orientation cue once it's parked off-screen on a phone, and the saturated fill against the light blue ground is the strongest single accent on the screen. */ .side_menu li.is-active { background: var(--accent); } .side_menu li.is-active a { color: #fff; font-weight: 700; } .side_menu li.is-active:hover { background: var(--accent); } /* -------------------------------------------------------------------- tables */ /* Outer edge matches the header band so the band sits flush inside the frame; inner cell rules stay soft, so a white table reads as a distinct object without caging every cell in a hard line. */ table { border: 1px solid var(--head-bg); border-collapse: collapse; background: var(--surface); font-size: 13px; box-shadow: var(--lift); } table th { background: var(--head-bg); /* Separators inside the dark band are drawn in light-on-dark rather than the sheet's normal cell rule, which would score light lines across it. */ border: 1px solid rgba(255, 255, 255, .2); color: var(--head-fg); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-align: left; padding: 7px 9px; max-width: 160px; } table td { border: 1px solid var(--border); padding: 6px 9px; vertical-align: middle; /* break-all shredded Japanese mid-word; `anywhere` only breaks when it must. */ word-break: normal; overflow-wrap: anywhere; } /* ---- table colour: semantic classes, not the old bgcolor attribute ---- Every game's templates (base + the Ogtycoon/Slime/Walkpet/Walkprotect/WwEmu/WwOg/WwWoody overrides) used to hardcode bgcolor="#aeeefc" directly in ~90 files - almost always as the wrapping a row of (the table's own header row), and in six key/value tables (Gameplay x5 across its per-game overrides, and GeneralConfig) as on the left-hand label column instead. That attribute has since been removed from every template. The header-row case needed no per-template follow-up at all: `table th` above is unconditional, so a bare gets the same dark band with no class required. Only the label-column case needed one, since a bare can't be told apart from an ordinary data cell - those six templates now carry on the label column specifically. */ .row-label { background-color: var(--label-bg); color: var(--label-fg); font-weight: 600; } /* Zebra striping and hover both skip .row-label and anything still carrying its own bgcolor attribute (MissionSpecial's #eee/#aaa status highlight, Popup's bgcolor="gainsboro" OFF flag, KpiLoginNum's hand-rolled per-row zebra striping) so they're never fought over. This is the same bug the AnIsland panel found on its own /gameplay page: striping a cell that already carries a colour recolours it on every other row instead of leaving it alone, which read as the label column flickering down the table. */ table:not(.layout-table):not(.paired-rows) tr:nth-child(even) td:not(.row-label):not([bgcolor]) { background: var(--row-alt); } /* td[rowspan]: a cell with rowspan > 1 is a DOM child of only the first physical of its record, even though it renders taller. Hovering its visual box still fires :hover on that first only, recolouring that row's other cells instead of whatever row the mouse looks aligned with - Popup's id/action columns do this. Simplest fix is to leave rowspan cells out of hover entirely. */ table:not(.layout-table) tr:hover td:not(.row-label):not([bgcolor]):not([rowspan]) { background: var(--accent-sf); } /* .paired-rows opts a table out of automatic striping because it renders TWO per record (rowspan on the first cells) - KpiDaus shows a count row and a rate row per date, the same shape as the AnIsland panel's /kpi-daus. Striping by nth-child would cut across those pairs instead of grouping them, so the template marks the alternating record itself with .stripe. */ tr.stripe td { background: var(--row-alt); } /* Table titles - Mission/MissionDaily's period-group captions, WwWoody/Walkprotect's MissionSpecial captions, and Ogtycoon/WwOg's OgGambleSlots evolution-table captions (the last of which carried an inline background-color:#aeeefc that no stylesheet could reach - stripped from those four templates so this rule can style them like every other instead). */ table caption { caption-side: top; text-align: left; padding: 7px 10px; font-weight: 700; font-size: 13px; background: var(--caption-bg); color: var(--head-fg); border: 1px solid var(--caption-bg); border-bottom: 0; } /* Numeric columns line up when digits are the same width. */ table td { font-variant-numeric: tabular-nums; } /* ---- layout tables are not data tables ---- del_confirm pages (戻る/削除 button pair) and the search button on Users/search use a borderless purely to position buttons. Giving those the data-table treatment would paint a white panel with a drop shadow behind the buttons. Opted out with class="layout-table" where that's been applied; `
` is deliberately not the discriminator - Gameplay/index.php and GeneralConfig/index.php are real data tables that simply have no header row. */ table.layout-table { background: transparent; border: 0; box-shadow: none; width: auto; } table.layout-table td { background: transparent; border: 0; vertical-align: middle; } /* ------------------------------------------------------------------- buttons */ /* BS3 puts 15px under every .form-group, which is what made button rows in table cells look so airy. Inside a table cell it should be nothing. */ table .form-group { margin-bottom: 0; } .btn { border-radius: var(--radius); padding: 5px 11px; font-size: 13px; font-weight: 500; border: 1px solid var(--border-mid); background: var(--surface); color: var(--text); box-shadow: none; text-shadow: none; transition: background .12s, border-color .12s; } .btn:hover, .btn:focus { background: var(--head-bg); color: var(--text); border-color: var(--border-mid); } .btn:active { background: #e4e9ee; } .btn-primary, .btn-info { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-primary:hover, .btn-primary:focus, .btn-info:hover, .btn-info:focus { background: var(--accent-dk); border-color: var(--accent-dk); color: #fff; } .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; } .btn-danger:hover, .btn-danger:focus { background: #99291f; border-color: #99291f; color: #fff; } .btn-default { background: var(--surface); } .btn[disabled], .btn[disabled]:hover { opacity: .45; background: var(--surface); } /* --------------------------------------------------------------- form fields */ .form-control { height: 32px; padding: 4px 9px; font-size: 13px; border-radius: var(--radius); border: 1px solid var(--border-mid); box-shadow: none; color: var(--text); } .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(18, 113, 143, .13); } textarea.form-control { height: auto; min-height: 76px; } select.form-control { height: 32px; } /* Uneditable values are shown as disabled inputs rather than bare text, so they read as "a field you can't change" instead of as unstyled text. Spelled out here because .form-control above overrides the border/background Bootstrap would otherwise give them, which would leave a disabled field looking identical to an editable one. */ .form-control[disabled], .form-control[readonly] { background: #e9eef2; border-color: var(--border); color: #55636d; cursor: not-allowed; box-shadow: none; } /* Field label + control as one unit. Used by the toolbars; also tidies the plain "label text
control" pattern the edit pages use. */ .field { display: flex; flex-direction: column; gap: 3px; } .field > label { font-size: 11px; font-weight: 700; color: var(--muted); margin: 0; letter-spacing: .02em; } /* ------------------------------------------------------------------- toolbar */ /* Replaces bare floated col-sm-* + `clear: left`. Filters/actions sit on one wrapping row and stay legible when it wraps on a phone. */ .toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 14px; } .toolbar .form-control { width: auto; min-width: 140px; } .toolbar .btn { height: 32px; } /* A captioned group box.
… is the native version of exactly that, and the legend renders in the gap in the border for free - but Bootstrap 3 restyles legend into a full-width 21px heading with a bottom rule, which has to be undone. */ fieldset.toolbar { padding: 4px 12px 11px; min-width: 0; /* fieldsets default to min-content width, which breaks flex children */ } fieldset.toolbar > legend { width: auto; max-width: none; margin: 0; padding: 0 6px; border: 0; font-size: 11.5px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; color: var(--accent-dk); } /* flex-direction is explicit because .range often shares an element with .field, whose column direction would otherwise stack start/～/end into three rows. */ .range { display: flex; flex-direction: row; align-items: flex-end; gap: 6px; } .range .sep { padding-bottom: 7px; color: var(--muted); } .toolbar .spacer { flex: 1 1 auto; } /* Segmented toggle - replaces the OS filter's margin-spaced buttons on KpiUus/KpiDaus, whose "active" state was previously set by overwriting the button's whole className with "btn btn-info" from JS (state and base styling fighting over one attribute). Left as submit buttons - change_data()/csv_form etc. only set the form action/hidden field and rely on native submit, same as before. */ .seg { display: inline-flex; border: 1px solid var(--border-mid); border-radius: var(--radius); overflow: hidden; } .seg > button, .seg > .btn { border: 0; border-left: 1px solid var(--border); border-radius: 0; background: var(--surface); padding: 6px 14px; font-size: 13px; color: var(--text); cursor: pointer; margin: 0; } .seg > *:first-child { border-left: 0; } .seg > button:hover { background: var(--head-bg); } .seg > button[aria-pressed="true"], .seg > .btn.active { background: var(--accent); color: #fff; } /* ------------------------------------------------- packed icon action groups */ /* Built by admin-modern.js from the existing button markup - see that file. The original