Template:NavCell/styles.css: Difference between revisions
Template page
More actions
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
| Line 1: | Line 1: | ||
/* Container */ | |||
.navcell { | .navcell { | ||
max-width: 100%; | max-width: 100%; | ||
| Line 4: | Line 5: | ||
} | } | ||
/* FLOATING GAMEPAD — THIS IS THE FIX */ | |||
.navcell-ui { | .navcell-ui { | ||
position: fixed; | position: fixed; | ||
bottom: | bottom: 14px; | ||
left: | left: 14px; | ||
z-index: | z-index: 9999; | ||
background: rgba(0,0,0,0. | |||
background: rgba(0,0,0,0.75); | |||
border-radius: 12px; | |||
padding: 8px; | padding: 8px; | ||
width: auto; | |||
} | } | ||
/* D-pad */ | |||
.nav-grid { | .nav-grid { | ||
display: grid; | display: grid; | ||
grid-template-columns: | grid-template-columns: 42px 42px 42px; | ||
grid-template-rows: | grid-template-rows: 42px 42px 42px; | ||
gap: 6px; | gap: 6px; | ||
} | } | ||
| Line 25: | Line 31: | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
background: # | |||
border-radius: | background: #222; | ||
font-size: | border-radius: 6px; | ||
font-size: 11px; | |||
line-height: 1.1; | |||
text-align: center; | text-align: center; | ||
} | } | ||
| Line 36: | Line 45: | ||
} | } | ||
.nav-center { | .nav-center, | ||
.nav-empty { | |||
background: transparent; | background: transparent; | ||
} | } | ||
/* Up / Down */ | |||
.nav-ud { | .nav-ud { | ||
display: flex; | display: flex; | ||
| Line 47: | Line 58: | ||
.nav-ud .nav-btn { | .nav-ud .nav-btn { | ||
width: | width: 42px; | ||
height: 32px; | |||
font-size: 10px; | |||
} | } | ||
/* Text content */ | |||
.nav-text { | .nav-text { | ||
margin-top: | margin-top: 8px; | ||
} | } | ||
.nav-desc { | .nav-desc { | ||
font-size: | font-size: 13px; | ||
line-height: 1. | line-height: 1.2; | ||
margin-bottom: | margin-bottom: 4px; | ||
} | } | ||
.nav-nearby { | .nav-nearby { | ||
font-size: | font-size: 12px; | ||
opacity: 0.85; | opacity: 0.85; | ||
} | |||
/* Prevent overlap */ | |||
@media (max-width: 900px) { | |||
.nav-text { | |||
padding-bottom: 140px; | |||
} | |||
} | } | ||
Revision as of 16:35, 20 December 2025
/* Container */
.navcell {
max-width: 100%;
padding: 8px;
}
/* FLOATING GAMEPAD — THIS IS THE FIX */
.navcell-ui {
position: fixed;
bottom: 14px;
left: 14px;
z-index: 9999;
background: rgba(0,0,0,0.75);
border-radius: 12px;
padding: 8px;
width: auto;
}
/* D-pad */
.nav-grid {
display: grid;
grid-template-columns: 42px 42px 42px;
grid-template-rows: 42px 42px 42px;
gap: 6px;
}
.nav-btn {
display: flex;
align-items: center;
justify-content: center;
background: #222;
border-radius: 6px;
font-size: 11px;
line-height: 1.1;
text-align: center;
}
.nav-btn a {
color: #eee;
text-decoration: none;
}
.nav-center,
.nav-empty {
background: transparent;
}
/* Up / Down */
.nav-ud {
display: flex;
justify-content: space-between;
margin-top: 6px;
}
.nav-ud .nav-btn {
width: 42px;
height: 32px;
font-size: 10px;
}
/* Text content */
.nav-text {
margin-top: 8px;
}
.nav-desc {
font-size: 13px;
line-height: 1.2;
margin-bottom: 4px;
}
.nav-nearby {
font-size: 12px;
opacity: 0.85;
}
/* Prevent overlap */
@media (max-width: 900px) {
.nav-text {
padding-bottom: 140px;
}
}