Template:CreateHub/styles.css: Difference between revisions

No edit summary
No edit summary
Line 1: Line 1:
/* Center the pair horizontally */
/* Row wrapper: centers each pair horizontally */
.creation-row {
.creation-row {
   display: flex;
   display: flex;
Line 6: Line 6:
}
}


/* Make the inputbox output act as a flex row */
/* 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 */
/* FIXED, MATCHING SIZE for both controls */
.creation-row input[type="text"],
.creation-row .mw-inputbox-centered form > *:first-child,
.creation-row input[type="submit"] {
.creation-row .mw-inputbox-centered form > *:last-child {
   width: 260px;
   width: 260px;
   height: 40px;
   height: 40px;
Line 26: Line 27:
}
}


/* --- Text input styling --- */
/* --- INPUT (first child) --- */
.creation-row input[type="text"] {
.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[type="text"]::placeholder {
/* 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:
}
}


/* --- Submit button: nuke default styles, rebuild --- */
/* --- BUTTON (last child) --- */
.creation-row input[type="submit"] {
.creation-row .mw-inputbox-centered form > *:last-child {
   all: unset;                        /* remove MediaWiki/UA styles */
   /* wipe inherited UI look as much as possible */
  box-sizing: border-box;
  display: inline-block;
  width: 260px;
  height: 40px;
 
   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 input[type="submit"]:hover:not(:disabled) {
.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 input[type="submit"]:active:not(:disabled) {
.creation-row .mw-inputbox-centered form > *:last-child:active:not(:disabled) {
   transform: translateY(0);
   transform: translateY(0);
}
}


/* Disabled state */
/* Disabled look */
.creation-row input[type="submit"]:disabled {
.creation-row .mw-inputbox-centered form > *:last-child:disabled {
   background-color: #f5f5f5;
   background-color: #f5f5f5;
   border-color: #ccc;
   border-color: #ccc;