Tags: Mobile edit Mobile web edit |
Tags: Mobile edit Mobile web edit |
| Line 1: |
Line 1: |
| /* Module:GameInfo/styles.css */ | | /* Module:GameInfo/styles.css */ |
| /* GameInfo Box v1 — TemplateStyles-safe (no CSS vars / no var()) */ | | /* GameInfo Box v1 — TemplateStyles-safe (no CSS vars / no var()) */ |
| /* Phase 4.1 — Unified + Reusable (Layout restored, scoped, mobile-safe) */ | | /* Phase 4.1 — Unified + Reusable (Layout restored, scoped) */ |
| | |
| | /* NOTE: |
| | - Citizen theme overrides (day/night/os) are now in Citizen.css (sitewide). |
| | - Level slider component styling (track/fill/thumb/ticks/bubble) is now sitewide |
| | in Common.css + Citizen.css. This file keeps only the wrapper/layout. |
| | */ |
|
| |
|
| /* ---------------------------------------------------------------------------- | | /* ---------------------------------------------------------------------------- |
| Line 68: |
Line 74: |
| color:rgba(245,249,255,0.92); | | color:rgba(245,249,255,0.92); |
| } | | } |
|
| |
|
| |
|
| /* Ensure source popup nodes are hidden even without sitewide .sv-hidden */ | | /* Ensure source popup nodes are hidden even without sitewide .sv-hidden */ |
| Line 121: |
Line 126: |
| } | | } |
|
| |
|
| /* Focus outline (no markup changes required) */ | | /* Focus outline (no markup changes required) |
| | NOTE: slider focus ring is now sitewide, so it is not listed here. |
| | */ |
| .sv-gi-card .sv-tip-btn:focus, | | .sv-gi-card .sv-tip-btn:focus, |
| .sv-skill-card .sv-tip-btn:focus, | | .sv-skill-card .sv-tip-btn:focus, |
| Line 127: |
Line 134: |
| .sv-skill-card .sv-disclose-btn:focus, | | .sv-skill-card .sv-disclose-btn:focus, |
| .sv-gi-card .sv-tab:focus, | | .sv-gi-card .sv-tab:focus, |
| .sv-skill-card .sv-tab:focus, | | .sv-skill-card .sv-tab:focus{ |
| .sv-gi-card .sv-level-range--custom:focus,
| |
| .sv-skill-card .sv-level-range--custom:focus{
| |
| outline:2px solid rgba(106,166,255,0.85); | | outline:2px solid rgba(106,166,255,0.85); |
| outline-offset:2px; | | outline-offset:2px; |
| Line 419: |
Line 424: |
| /* ---------------------------------------------------------------------------- | | /* ---------------------------------------------------------------------------- |
| 6) REQUIREMENTS / USERS ROW | | 6) REQUIREMENTS / USERS ROW |
| - Compact, meta-like sizing for the triggers
| |
| - Popup content is styled sitewide (Common.css)
| |
| ---------------------------------------------------------------------------- */ | | ---------------------------------------------------------------------------- */ |
|
| |
|
| Line 479: |
Line 482: |
|
| |
|
| /* ---------------------------------------------------------------------------- | | /* ---------------------------------------------------------------------------- |
| 7) LEVEL SELECTOR (module-owned) | | 7) LEVEL SELECTOR (wrapper only; slider component is sitewide) |
| ---------------------------------------------------------------------------- */ | | ---------------------------------------------------------------------------- */ |
|
| |
|
| Line 511: |
Line 514: |
| font-weight:900; | | font-weight:900; |
| color:rgba(245,249,255,0.98); | | color:rgba(245,249,255,0.98); |
| }
| |
|
| |
| .sv-gi-card .sv-level-slider,
| |
| .sv-skill-card .sv-level-slider{
| |
| position:relative;
| |
| }
| |
|
| |
| .sv-gi-card .sv-level-range,
| |
| .sv-skill-card .sv-level-range{
| |
| width:100%;
| |
| margin:0;
| |
| }
| |
|
| |
| .sv-gi-card .sv-level-range--custom,
| |
| .sv-skill-card .sv-level-range--custom{
| |
| display:block;
| |
| position:relative;
| |
| height:26px;
| |
| border-radius:999px;
| |
| border:1px solid rgba(75,99,136,0.55);
| |
| background:#0f172a;
| |
| cursor:pointer;
| |
| }
| |
|
| |
| .sv-gi-card .sv-level-track,
| |
| .sv-skill-card .sv-level-track{
| |
| position:absolute;
| |
| left:8px;
| |
| right:8px;
| |
| top:50%;
| |
| margin-top:-4px;
| |
| height:8px;
| |
| border-radius:999px;
| |
| background:#273449;
| |
| overflow:hidden;
| |
| }
| |
|
| |
| .sv-gi-card .sv-level-fill,
| |
| .sv-skill-card .sv-level-fill{
| |
| display:block;
| |
| height:100%;
| |
| width:0%;
| |
| border-radius:999px;
| |
| background:linear-gradient(90deg, rgba(106,166,255,0.85), rgba(245,249,255,0.22));
| |
| }
| |
|
| |
| .sv-gi-card .sv-level-thumb,
| |
| .sv-skill-card .sv-level-thumb{
| |
| position:absolute;
| |
| left:0%;
| |
| top:50%;
| |
| margin-top:-9px;
| |
| margin-left:-9px;
| |
| width:18px;
| |
| height:18px;
| |
| border-radius:999px;
| |
| border:2px solid rgba(75,99,136,0.55);
| |
| background:rgba(245,249,255,0.92);
| |
| box-shadow:0 10px 18px rgba(0,0,0,0.35);
| |
| }
| |
|
| |
| .sv-gi-card .sv-level-ticklabels,
| |
| .sv-skill-card .sv-level-ticklabels{
| |
| display:flex;
| |
| justify-content:space-between;
| |
| gap:10px;
| |
| margin-top:7px;
| |
| font-weight:900;
| |
| font-size:12px;
| |
| color:rgba(182,198,224,0.95);
| |
| line-height:1.1;
| |
| min-height:12px;
| |
| } | | } |
|
| |
|
| Line 867: |
Line 798: |
| font-size:13px; | | font-size:13px; |
| color:rgba(182,198,224,0.95); | | color:rgba(182,198,224,0.95); |
| }
| |
|
| |
| /* ----------------------------------------------------------------------------
| |
| 12) THEME OVERRIDES (Citizen only)
| |
| ---------------------------------------------------------------------------- */
| |
|
| |
| :root.skin-theme-clientpref-day .sv-gi-card,
| |
| :root.skin-theme-clientpref-day .sv-skill-card{
| |
| border-color:#9fc4ff;
| |
| background-color:#dbeaff;
| |
| background-image:
| |
| radial-gradient(900px 360px at 40% -10%, rgba(11,99,240,0.14), rgba(0,0,0,0) 60%),
| |
| linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.20)),
| |
| linear-gradient(180deg, #cfe3ff, #f3f8ff);
| |
| box-shadow:0 16px 38px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.85);
| |
| color:#1f3556;
| |
| }
| |
|
| |
| :root.skin-theme-clientpref-day .sv-gi-card a,
| |
| :root.skin-theme-clientpref-day .sv-skill-card a{
| |
| color:#0b63f0;
| |
| }
| |
|
| |
| :root.skin-theme-clientpref-day .sv-skill-title{
| |
| color:#0b1a33;
| |
| }
| |
|
| |
| :root.skin-theme-clientpref-day .sv-skill-desc{
| |
| color:#1f3556;
| |
| }
| |
|
| |
| /* Light surfaces */
| |
| :root.skin-theme-clientpref-day .sv-skill-icon,
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-meta-card,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-meta-card,
| |
| :root.skin-theme-clientpref-day .sv-skill-level,
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-scaling-row,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-scaling-row,
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-core-row,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-core-row,
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-ref-card,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-ref-card,
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-tabpanel,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-tabpanel{
| |
| border-color:#bdd7ff;
| |
| background-color:#e8f2ff;
| |
| background-image:linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.15));
| |
| color:#1f3556;
| |
| }
| |
|
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-skill-meta .sv-pill,
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-skill-meta .sv-pill{
| |
| border-color:#bdd7ff;
| |
| background:#f3f8ff;
| |
| color:#0b1a33;
| |
| }
| |
|
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-core-cell,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-core-cell,
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-kw-cell,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-kw-cell,
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-scaling-item,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-scaling-item,
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-ref-stat,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-ref-stat{
| |
| border-color:#bdd7ff;
| |
| background:#f3f8ff;
| |
| color:#1f3556;
| |
| }
| |
|
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-core-num,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-core-num,
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-scaling-value,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-scaling-value,
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-kw-value,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-kw-value,
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-ref-title,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-ref-title,
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-meta-text,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-meta-text{
| |
| color:#0b1a33;
| |
| }
| |
|
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-core-label,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-core-label,
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-scaling-label,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-scaling-label,
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-kw-label,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-kw-label,
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-ref-sub,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-ref-sub{
| |
| color:#456083;
| |
| }
| |
|
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-level-range--custom,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-level-range--custom{
| |
| border-color:#bdd7ff;
| |
| background:#e8f2ff;
| |
| }
| |
|
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-level-track,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-level-track{
| |
| background:#cfe3ff;
| |
| }
| |
|
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-level-fill,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-level-fill{
| |
| background:#0b63f0;
| |
| }
| |
|
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-level-thumb,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-level-thumb{
| |
| border-color:#9fc4ff;
| |
| background:#0b1a33;
| |
| }
| |
|
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-level-ticklabels,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-level-ticklabels{
| |
| color:#456083;
| |
| }
| |
|
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-tip-btn,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-tip-btn{
| |
| border-color:#bdd7ff;
| |
| background:#cfe3ff;
| |
| }
| |
|
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-ico,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-ico{
| |
| border-color:#bdd7ff;
| |
| background:#e8f2ff;
| |
| color:#0b1a33;
| |
| }
| |
|
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-tab:focus,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-tab:focus,
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-disclose-btn:focus,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-disclose-btn:focus,
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-tip-btn:focus,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-tip-btn:focus,
| |
| :root.skin-theme-clientpref-day .sv-gi-card .sv-level-range--custom:focus,
| |
| :root.skin-theme-clientpref-day .sv-skill-card .sv-level-range--custom:focus{
| |
| outline-color:#0b63f0;
| |
| }
| |
|
| |
| /* Citizen OS: follow system */
| |
| @media (prefers-color-scheme: light){
| |
| :root.skin-theme-clientpref-os .sv-gi-card,
| |
| :root.skin-theme-clientpref-os .sv-skill-card{
| |
| border-color:#9fc4ff;
| |
| background-color:#dbeaff;
| |
| background-image:
| |
| radial-gradient(900px 360px at 40% -10%, rgba(11,99,240,0.14), rgba(0,0,0,0) 60%),
| |
| linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.20)),
| |
| linear-gradient(180deg, #cfe3ff, #f3f8ff);
| |
| box-shadow:0 16px 38px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.85);
| |
| color:#1f3556;
| |
| }
| |
| :root.skin-theme-clientpref-os .sv-gi-card a,
| |
| :root.skin-theme-clientpref-os .sv-skill-card a{ color:#0b63f0; }
| |
| }
| |
|
| |
| @media (prefers-color-scheme: dark){
| |
| :root.skin-theme-clientpref-os .sv-gi-card,
| |
| :root.skin-theme-clientpref-os .sv-skill-card{
| |
| border-color:rgba(75,99,136,0.55);
| |
| background-color:#0f172a;
| |
| background-image:
| |
| radial-gradient(900px 360px at 40% -10%, rgba(106,166,255,0.18), rgba(0,0,0,0) 60%),
| |
| linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
| |
| linear-gradient(180deg, #0f172a, #0b1324);
| |
| color:rgba(245,249,255,0.94);
| |
| }
| |
| :root.skin-theme-clientpref-os .sv-gi-card a,
| |
| :root.skin-theme-clientpref-os .sv-skill-card a{ color:rgba(106,166,255,0.95); }
| |
| } | | } |
|
| |
|
