Template:CreateHub/styles.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* | /* Row wrapper: centers each pair horizontally */ | ||
.creation-row { | .creation-row { | ||
display: flex; | display: flex; | ||
| Line 6: | Line 6: | ||
} | } | ||
/* | /* The InputBox output wrapper */ | ||
.creation-row .mw-inputbox-centered { | .creation-row .mw-inputbox-centered { | ||
display: flex; | display: flex; | ||
| Line 12: | Line 12: | ||
} | } | ||
/* Treat the inner form as a flex row: [input] [button] */ | |||
.creation-row .mw-inputbox-centered form { | .creation-row .mw-inputbox-centered form { | ||
display: flex; | display: flex; | ||
| Line 18: | Line 19: | ||
} | } | ||
/* | /* FIXED, MATCHING SIZE for both controls */ | ||
.creation-row | .creation-row .mw-inputbox-centered form > *:first-child, | ||
.creation-row | .creation-row .mw-inputbox-centered form > *:last-child { | ||
width: 260px; | width: 260px; | ||
height: 40px; | height: 40px; | ||
| Line 26: | Line 27: | ||
} | } | ||
/* --- | /* --- INPUT (first child) --- */ | ||
.creation-row | .creation-row .mw-inputbox-centered form > *:first-child { | ||
border: 1.5px solid #000; | border: 1.5px solid #000; | ||
border-radius: 2px; | border-radius: 2px; | ||
| Line 36: | Line 37: | ||
} | } | ||
.creation-row input | /* Placeholder styling for any text input inside the row */ | ||
.creation-row input::placeholder { | |||
text-align: center; | text-align: center; | ||
color: #777; | color: #777; | ||
| Line 42: | Line 44: | ||
} | } | ||
/* --- | /* --- BUTTON (last child) --- */ | ||
.creation-row | .creation-row .mw-inputbox-centered form > *:last-child { | ||
/* wipe inherited UI look as much as possible */ | |||
border: 1.5px solid #000; | border: 1.5px solid #000; | ||
border-radius: 2px; | border-radius: 2px; | ||
| Line 58: | Line 55: | ||
text-align: center; | text-align: center; | ||
cursor: pointer; | cursor: pointer; | ||
box-shadow: none; | |||
padding: 0; /* height is controlled above */ | |||
line-height: 40px; /* vertical centering */ | |||
transition: | transition: | ||
| Line 66: | Line 67: | ||
/* Hover (enabled only) */ | /* Hover (enabled only) */ | ||
.creation-row | .creation-row .mw-inputbox-centered form > *:last-child:hover:not(:disabled) { | ||
background-color: #f2f2f2; | background-color: #f2f2f2; | ||
transform: translateY(-1px); | transform: translateY(-1px); | ||
| Line 72: | Line 73: | ||
/* Active */ | /* Active */ | ||
.creation-row | .creation-row .mw-inputbox-centered form > *:last-child:active:not(:disabled) { | ||
transform: translateY(0); | transform: translateY(0); | ||
} | } | ||
/* Disabled | /* Disabled look */ | ||
.creation-row | .creation-row .mw-inputbox-centered form > *:last-child:disabled { | ||
background-color: #f5f5f5; | background-color: #f5f5f5; | ||
border-color: #ccc; | border-color: #ccc; | ||