MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary |
Adjusting spacing for Nav Buttons GUI |
||
| Line 3: | Line 3: | ||
.navcell { | .navcell { | ||
margin: 1.5em 0; | margin: 1.5em 0; | ||
max-width: 450px; | max-width: 450px; | ||
margin-left: auto; | margin-left: auto; | ||
margin-right: auto; | margin-right: auto; | ||
} | } | ||
| Line 12: | Line 12: | ||
.nav-grid { | .nav-grid { | ||
display: grid; | display: grid; | ||
grid-template-columns: | grid-template-columns: 90px 90px 90px; | ||
grid-template-rows: | grid-template-rows: 90px 90px 90px; | ||
gap: | gap: 10px; | ||
justify-content: center; | justify-content: center; | ||
margin: 1em 0; | margin: 1em 0; | ||
| Line 23: | Line 23: | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
text-align: center; /* FIX: center multiline text */ | |||
padding: 6px; /* FIX: stabilize label spacing */ | |||
background: #222; | background: #222; | ||
border: 1px solid #444; | border: 1px solid #444; | ||
border-radius: | border-radius: 8px; /* slightly more modern */ | ||
font-size: 0. | font-size: 0.75em; /* FIX: smaller to fit words */ | ||
line-height: 1.2em; /* FIX: improves readability */ | |||
text-decoration: none !important; | text-decoration: none !important; | ||
color: #eee !important; | color: #eee !important; | ||
| Line 46: | Line 49: | ||
display: flex; | display: flex; | ||
justify-content: center; | justify-content: center; | ||
gap: | gap: 12px; /* FIX: wider spacing from edges */ | ||
margin: 0. | margin: 0.8em 0 1.3em 0; /* FIX: better vertical spacing */ | ||
} | } | ||
.nav-vertical { | .nav-vertical { | ||
min-width: | min-width: 110px; /* FIX: allows MOVE DOWN to fit */ | ||
min-height: 40px; | |||
} | } | ||
/* Make | /* Make link fill button */ | ||
.nav-btn a { | .nav-btn a { | ||
| Line 62: | Line 66: | ||
height: 100%; | height: 100%; | ||
display: flex; | display: flex; | ||
flex-direction: column; /* FIX: ensures <br> stacking */ | |||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
} | } | ||
Revision as of 21:26, 3 December 2025
/* SK navigation cells */
.navcell {
margin: 1.5em 0;
max-width: 450px;
margin-left: auto;
margin-right: auto;
}
/* 3×3 compass grid */
.nav-grid {
display: grid;
grid-template-columns: 90px 90px 90px;
grid-template-rows: 90px 90px 90px;
gap: 10px;
justify-content: center;
margin: 1em 0;
}
.nav-btn {
display: flex;
align-items: center;
justify-content: center;
text-align: center; /* FIX: center multiline text */
padding: 6px; /* FIX: stabilize label spacing */
background: #222;
border: 1px solid #444;
border-radius: 8px; /* slightly more modern */
font-size: 0.75em; /* FIX: smaller to fit words */
line-height: 1.2em; /* FIX: improves readability */
text-decoration: none !important;
color: #eee !important;
}
.nav-btn:hover {
background: #333;
border-color: #777;
}
.nav-empty {
background: transparent;
border: none;
}
/* Up / Down row */
.nav-vertical-row {
display: flex;
justify-content: center;
gap: 12px; /* FIX: wider spacing from edges */
margin: 0.8em 0 1.3em 0; /* FIX: better vertical spacing */
}
.nav-vertical {
min-width: 110px; /* FIX: allows MOVE DOWN to fit */
min-height: 40px;
}
/* Make link fill button */
.nav-btn a {
text-decoration: none !important;
color: inherit !important;
width: 100%;
height: 100%;
display: flex;
flex-direction: column; /* FIX: ensures <br> stacking */
align-items: center;
justify-content: center;
}