Tags: Mobile edit Mobile web edit |
Tags: Blanking Mobile edit Mobile web edit |
| (2 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* ============================================================================
| |
| SpiritVale Wiki — Mobile.css
| |
| Mobile policy enforcement (<= 500px)
| |
| - No frosted glass / no transparency
| |
| - Mobile-only layout tightening + overflow safety
| |
| ============================================================================ */
| |
|
| |
|
| @media (max-width:500px){
| |
|
| |
| /* ------------------------------------------------------------------------
| |
| 0) Global mobile overflow safety
| |
| ------------------------------------------------------------------------ */
| |
|
| |
| html,
| |
| body{
| |
| overflow-x:hidden;
| |
| }
| |
|
| |
| img,
| |
| video,
| |
| iframe,
| |
| embed,
| |
| object{
| |
| max-width:100%;
| |
| height:auto;
| |
| }
| |
|
| |
| /* Wide tables scroll instead of blowing the layout */
| |
| table,
| |
| .wikitable,
| |
| table.custom-table{
| |
| display:block;
| |
| width:100%;
| |
| max-width:100%;
| |
| overflow-x:auto;
| |
| -webkit-overflow-scrolling:touch;
| |
| }
| |
|
| |
| th,
| |
| td{
| |
| white-space:nowrap;
| |
| }
| |
|
| |
| /* ------------------------------------------------------------------------
| |
| 1) Citizen mobile hard rule: no frosted glass / no transparency
| |
| (moved from Citizen.css)
| |
| ------------------------------------------------------------------------ */
| |
|
| |
| :root{
| |
| --backdrop-filter-frosted-glass:none !important;
| |
| --opacity-glass:1 !important;
| |
| }
| |
|
| |
| body.skin-citizen .citizen-menu__card,
| |
| body.skin-citizen .citizen-drawer__card,
| |
| body.skin-citizen .citizen-search__form,
| |
| body.skin-citizen .citizen-search__footer{
| |
| background:var(--color-surface-1) !important;
| |
| -webkit-backdrop-filter:none !important;
| |
| backdrop-filter:none !important;
| |
| }
| |
|
| |
| /* ------------------------------------------------------------------------
| |
| 2) Hero Infobox System: mobile layout rules (moved from Common.css)
| |
| ------------------------------------------------------------------------ */
| |
|
| |
| :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot-grid{
| |
| grid-template-columns:1fr;
| |
| gap:0.50em;
| |
| padding:0.70em;
| |
| }
| |
|
| |
| :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
| |
| :where(.sv-type-label, .sv-source-pill, .sv-m4-label, .sv-sm-label, .sv-sm-flag, .sv-pill, .sv-pill--req){
| |
| width:auto !important;
| |
| display:inline-block !important;
| |
| max-width:100%;
| |
| white-space:nowrap;
| |
| padding:0.22em 0.45em;
| |
| }
| |
|
| |
| table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2{
| |
| grid-template-columns:1fr;
| |
| }
| |
|
| |
| /* ------------------------------------------------------------------------
| |
| 3) Mobile “no transparency” for legacy tooltip/button UI
| |
| (this replaces the old Common.css mobile block)
| |
| ------------------------------------------------------------------------ */
| |
|
| |
| :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop{
| |
| background:var(--sv-ui-bg0) !important;
| |
| border:1px solid var(--sv-ui-line1) !important;
| |
| }
| |
|
| |
| :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
| |
| .module-icon-name .sv-tip-btn--notes{
| |
| background:var(--sv-ui-bg2) !important;
| |
| border:1px solid var(--sv-ui-line2) !important;
| |
| }
| |
|
| |
| :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
| |
| .module-icon-name .sv-tip-btn--notes:hover{
| |
| background:var(--sv-ui-bg3) !important;
| |
| }
| |
|
| |
| /* ------------------------------------------------------------------------
| |
| 4) SV shared components (mobile): enforce opaque surfaces
| |
| ------------------------------------------------------------------------ */
| |
|
| |
| :where(.sv-gi-card, .sv-skill-card, .sv-card)
| |
| :where(.sv-tabpanel, .sv-disclose-pop, .sv-tip-pop) {
| |
| background: var(--sv-ui-bg0) !important;
| |
| border-color: var(--sv-ui-line1) !important;
| |
| -webkit-backdrop-filter: none !important;
| |
| backdrop-filter: none !important;
| |
| }
| |
|
| |
| :where(.sv-gi-card, .sv-skill-card, .sv-card)
| |
| :where(.sv-tab, .sv-disclose-btn, .sv-tip-btn) {
| |
| background: var(--sv-ui-bg2) !important;
| |
| border-color: var(--sv-ui-line2) !important;
| |
| }
| |
|
| |
| /* ------------------------------------------------------------------------
| |
| SV utility: right-side infobox wrapper (mobile)
| |
| ------------------------------------------------------------------------ */
| |
|
| |
| .sv-card.sv-infobox-right{
| |
| float:none !important;
| |
| max-width:none !important;
| |
| margin:0 0 12px 0 !important;
| |
| }
| |
|
| |
| /* Class Overview: mobile alignment */
| |
| .sv-class-overview__label,
| |
| .sv-class-overview__value{
| |
| text-align:left;
| |
| }
| |
|
| |
| /* ------------------------------------------------------------------------
| |
| SV GameInfo / GameSkills (mobile): enforce opaque surfaces + no frosted glass
| |
| ------------------------------------------------------------------------ */
| |
|
| |
| .sv-gi-card,
| |
| .sv-skill-card {
| |
| background-image: none !important;
| |
| }
| |
|
| |
| /* Shared components (from Common.css) */
| |
| .sv-gi-card .sv-tabpanel,
| |
| .sv-skill-card .sv-tabpanel,
| |
| .sv-gi-card .sv-disclose-pop,
| |
| .sv-skill-card .sv-disclose-pop,
| |
| .sv-gi-card .sv-tip-pop,
| |
| .sv-skill-card .sv-tip-pop {
| |
| background: var(--sv-ui-bg0) !important;
| |
| border-color: var(--sv-ui-line1) !important;
| |
| -webkit-backdrop-filter: none !important;
| |
| backdrop-filter: none !important;
| |
| }
| |
|
| |
| /* Button-like surfaces */
| |
| .sv-gi-card .sv-tab,
| |
| .sv-skill-card .sv-tab,
| |
| .sv-gi-card .sv-disclose-btn,
| |
| .sv-skill-card .sv-disclose-btn,
| |
| .sv-gi-card .sv-tip-btn,
| |
| .sv-skill-card .sv-tip-btn {
| |
| background: var(--sv-ui-bg2) !important;
| |
| border-color: var(--sv-ui-line2) !important;
| |
| }
| |
|
| |
| /* Key module panels that still come from TemplateStyles */
| |
| .sv-gi-card .sv-meta-card,
| |
| .sv-skill-card .sv-meta-card,
| |
| .sv-skill-level,
| |
| .sv-gi-card .sv-scaling-row,
| |
| .sv-skill-card .sv-scaling-row,
| |
| .sv-gi-card .sv-core-row,
| |
| .sv-skill-card .sv-core-row,
| |
| .sv-gi-card .sv-core-cell,
| |
| .sv-skill-card .sv-core-cell,
| |
| .sv-gi-card .sv-kw-cell,
| |
| .sv-skill-card .sv-kw-cell,
| |
| .sv-gi-card .sv-ref-card,
| |
| .sv-skill-card .sv-ref-card {
| |
| background: var(--sv-ui-bg1) !important;
| |
| border-color: var(--sv-ui-line1) !important;
| |
| }
| |
|
| |
| /* GameInfo: ensure meta pills + level area are opaque too */
| |
| .sv-skill-card .sv-skill-meta .sv-pill,
| |
| .sv-skill-card .sv-skill-level {
| |
| background: var(--sv-ui-bg1) !important;
| |
| border-color: var(--sv-ui-line1) !important;
| |
| }
| |
|
| |
| /* ------------------------------------------------------------------------
| |
| SV GameInfo / GameSkills (mobile): extra inner gutters + scroll-safe buffer
| |
| ------------------------------------------------------------------------ */
| |
|
| |
| .sv-gi-top,
| |
| .sv-skill-top{
| |
| /* extra horizontal inset for thumb-safe scrolling near edges */
| |
| padding-left:20px !important;
| |
| padding-right:20px !important;
| |
| }
| |
|
| |
| .sv-gi-bottom,
| |
| .sv-skill-bottom{
| |
| padding-left:20px !important;
| |
| padding-right:20px !important;
| |
| }
| |
|
| |
| /* Add a small inert zone at the end of the card so swipes don't grab controls */
| |
| .sv-gi-bottom::after,
| |
| .sv-skill-bottom::after{
| |
| content:"";
| |
| display:block;
| |
| height:12px;
| |
| pointer-events:none;
| |
| }
| |
|
| |
| }
| |
