|
|
| (21 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* Row wrapper: centers each pair horizontally */
| |
| .creation-row { | | .creation-row { |
| display: flex; | | margin: 10px 0; |
| justify-content: center; | | width: 100%; |
| margin: 0.75rem 0;
| |
| } | | } |
|
| |
|
| /* The InputBox output wrapper */ | | /* Force InputBox to align horizontally */ |
| .creation-row .mw-inputbox-centered { | | .creation-row .mw-inputbox-centered { |
| display: flex; | | margin: 0 !important; |
| justify-content: center; | | white-space: nowrap !important; /* Prevents wrapping */ |
| | display: flex !important; |
| | align-items: center !important; |
| | gap: 15px !important; |
| } | | } |
|
| |
|
| /* Treat the inner form as a flex row: [input] [button] */
| | .creation-row form { |
| .creation-row .mw-inputbox-centered form { | | display: flex !important; |
| display: flex; | | gap: 15px !important; |
| align-items: center; | | align-items: center !important; |
| gap: 1rem;
| |
| } | | } |
|
| |
|
| /* FIXED, MATCHING SIZE for both controls */ | | /* Shared Styling */ |
| .creation-row .mw-inputbox-centered form > *:first-child, | | .creation-row input[type="text"], |
| .creation-row .mw-inputbox-centered form > *:last-child { | | .creation-row input[type="submit"] { |
| width: 260px;
| | height: 40px !important; |
| height: 40px; | | box-sizing: border-box !important; |
| box-sizing: border-box; | | font-size: 14px !important; |
| } | | } |
|
| |
|
| /* --- INPUT (first child) --- */ | | /* Text Box */ |
| .creation-row .mw-inputbox-centered form > *:first-child { | | .creation-row input[type="text"] { |
| border: 1.5px solid #000; | | width: 260px !important; |
| border-radius: 2px;
| | background: #fff !important; |
| background: #fff; | | border: 1px solid #a2a9b1 !important; |
| font-size: 0.95rem; | | padding: 0 10px !important; |
| text-align: center; | |
| font-style: italic;
| |
| } | | } |
|
| |
|
| /* Placeholder styling for any text input inside the row */ | | /* Button */ |
| .creation-row input::placeholder { | | .creation-row input[type="submit"] { |
| text-align: center; | | width: 260px !important; |
| color: #777; | | background: #fff !important; |
| font-style: italic; | | border: 1.5px solid #000 !important; |
| | color: #000 !important; |
| | font-weight: 700 !important; |
| | cursor: pointer !important; |
| | border-radius: 2px !important; |
| } | | } |
|
| |
|
| /* --- BUTTON (last child) --- */
| | .creation-row input[type="submit"]:hover { |
| .creation-row .mw-inputbox-centered form > *:last-child { | | background-color: #f2f2f2 !important; |
| /* wipe inherited UI look as much as possible */
| | color: #000 !important; |
| border: 1.5px solid #000;
| |
| border-radius: 2px;
| |
| background: transparent;
| |
| color: #000;
| |
| font-weight: 600;
| |
| font-size: 0.95rem;
| |
| text-align: center;
| |
| cursor: pointer;
| |
| | |
| box-shadow: none;
| |
| padding: 0; /* height is controlled above */
| |
| line-height: 40px; /* vertical centering */
| |
| | |
| transition:
| |
| background-color 0.2s ease,
| |
| transform 0.15s ease,
| |
| border-color 0.15s ease;
| |
| }
| |
| | |
| /* Hover (enabled only) */
| |
| .creation-row .mw-inputbox-centered form > *:last-child:hover:not(:disabled) {
| |
| background-color: #f2f2f2; | |
| transform: translateY(-1px);
| |
| }
| |
| | |
| /* Active */
| |
| .creation-row .mw-inputbox-centered form > *:last-child:active:not(:disabled) {
| |
| transform: translateY(0);
| |
| }
| |
| | |
| /* Disabled look */
| |
| .creation-row .mw-inputbox-centered form > *:last-child:disabled {
| |
| background-color: #f5f5f5;
| |
| border-color: #ccc;
| |
| color: #888; | |
| cursor: not-allowed;
| |
| }
| |
| | |
| /* Force disabled create buttons in CreateHub to match outline aesthetic */
| |
| .creation-row .mw-inputbox-centered input[disabled],
| |
| .creation-row .mw-inputbox-centered button[disabled] {
| |
| width: 260px;
| |
| height: 40px;
| |
| box-sizing: border-box;
| |
| | |
| border: 1.5px solid #000; /* black border even when disabled */
| |
| border-radius: 2px;
| |
| background-color: #f5f5f5; /* light grey fill */
| |
| color: #888; /* readable grey text */
| |
| | |
| font-weight: 600;
| |
| font-size: 0.95rem;
| |
| text-align: center;
| |
| | |
| box-shadow: none;
| |
| cursor: not-allowed;
| |
| }
| |
| | |
| /* When enabled, keep the outline + hover behaviour */
| |
| .creation-row .mw-inputbox-centered input:not([disabled]),
| |
| .creation-row .mw-inputbox-centered button:not([disabled]) {
| |
| border: 1.5px solid #000;
| |
| border-radius: 2px;
| |
| background: transparent;
| |
| color: #000;
| |
| }
| |
| | |
| .creation-row .mw-inputbox-centered input:not([disabled]):hover,
| |
| .creation-row .mw-inputbox-centered button:not([disabled]):hover {
| |
| background-color: #f2f2f2;
| |
| transform: translateY(-1px);
| |
| transition:
| |
| background-color 0.2s ease,
| |
| transform 0.15s ease,
| |
| border-color 0.15s ease;
| |
| } | | } |