Template:CreateHub/styles.css: Difference between revisions

No edit summary
No edit summary
Line 20: Line 20:


/* FIXED, MATCHING SIZE for both controls */
/* FIXED, MATCHING SIZE for both controls */
.creation-row .mw-inputbox-centered form > *:first-child,
.creation-row .mw-inputbox-centered form input[type="text"],
.creation-row .mw-inputbox-centered form > *:last-child {
.creation-row .mw-inputbox-centered form input[type="submit"] {
   width: 260px;
   width: 260px;
   height: 40px;
   height: 40px;
Line 27: Line 27:
}
}


/* --- INPUT (first child) --- */
/* --- INPUT (left side) --- */
.creation-row .mw-inputbox-centered form > *:first-child {
.creation-row .mw-inputbox-centered form input[type="text"] {
   border: 1.5px solid #000;
   border: 1.5px solid #000;
   border-radius: 2px;
   border-radius: 2px;
Line 37: Line 37:
}
}


/* Placeholder styling for any text input inside the row */
/* Placeholder styling */
.creation-row input::placeholder {
.creation-row .mw-inputbox-centered form input[type="text"]::placeholder {
   text-align: center;
   text-align: center;
   color: #777;
   color: #777;
Line 44: Line 44:
}
}


/* --- BUTTON (last child) --- */
/* --- BUTTON (right side) --- */
.creation-row .mw-inputbox-centered form > *:last-child {
.creation-row .mw-inputbox-centered form input[type="submit"] {
  /* wipe inherited UI look as much as possible */
   border: 1.5px solid #000 !important;
   border: 1.5px solid #000;
   border-radius: 2px !important;
   border-radius: 2px;
   background: transparent !important;
   background: transparent;
   color: #000 !important;
   color: #000;
 
   font-weight: 600;
   font-weight: 600;
   font-size: 0.95rem;
   font-size: 0.95rem;
   text-align: center;
   text-align: center;
  line-height: 40px;
   cursor: pointer;
   cursor: pointer;


   box-shadow: none;
   box-shadow: none !important;
  padding: 0;                /* height is controlled above */
  line-height: 40px;          /* vertical centering */


   transition:
   transition:
Line 66: Line 65:
}
}


/* Hover (enabled only) */
/* Hover */
.creation-row .mw-inputbox-centered form > *:last-child:hover:not(:disabled) {
.creation-row .mw-inputbox-centered form input[type="submit"]:hover {
   background-color: #f2f2f2;
   background-color: #f2f2f2 !important;
   transform: translateY(-1px);
   transform: translateY(-1px);
}
}


/* Active */
/* Active */
.creation-row .mw-inputbox-centered form > *:last-child:active:not(:disabled) {
.creation-row .mw-inputbox-centered form input[type="submit"]:active {
   transform: translateY(0);
   transform: translateY(0);
}
}


/* Disabled state: look the same as enabled (no grey pill) */
/* Disabled same visual style, just non-clickable */
.creation-row .mw-inputbox-centered form > *:last-child:disabled {
.creation-row .mw-inputbox-centered form input[type="submit"]:disabled {
   border: 1.5px solid #000;
   border: 1.5px solid #000 !important;
  border-radius: 2px;
   background: transparent !important;
   background: transparent;
   color: #000 !important;
   color: #000;
   cursor: not-allowed;
   box-shadow: none;
   opacity: 1; /* cancel any dimming from the skin */
  line-height: 40px;
   opacity: 1;             /* cancel skin's fade-out */
  cursor: not-allowed;    /* optional: still shows it's disabled */
}
}