Template:CreateHub/styles.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
-/* Row container: one input + one button */
+/* Row: center the pair horizontally */
 .creation-row {
    display: flex;
@@ Line 6: / Line 6: @@
 }
-/* Let the InputBox wrapper form act as our flex row */
+/* Make the inner InputBox container a row as well */
 .creation-row .mw-inputbox-centered {
    display: flex;
@@ Line 18: / Line 18: @@
 }
-/* SAME SIZE for input and button */
+/* SAME width + height for both input and button */
-.creation-row .createboxInput,
+.creation-row .mw-ui-input,
-.creation-row .createboxButton {
+.creation-row .mw-ui-button {
    width: 260px !important;
    height: 40px !important;
@@ Line 26: / Line 26: @@
 }
-/* --- Text input styling --- */
+/* --- INPUT: centered, italic, outlined --- */
-.creation-row .createboxInput {
+.creation-row .mw-ui-input {
    border: 1.5px solid #000 !important;
    border-radius: 2px !important;
    background: #fff !important;
    font-size: 0.95rem !important;
    text-align: center !important;
    font-style: italic !important;
 }
-/* Placeholder */
+.creation-row .mw-ui-input::placeholder {
-.creation-row .createboxInput::placeholder {
    text-align: center;
    color: #777;
@@ Line 44: / Line 42: @@
 }
-/* --- Button styling (outline style) --- */
+/* --- BUTTON: outline style, like noarticletext --- */
-.creation-row .createboxButton {
+.creation-row .mw-ui-button {
    border: 1.5px solid #000 !important;
    border-radius: 2px !important;
@@ Line 53: / Line 51: @@
    font-size: 0.95rem !important;
    text-align: center !important;
+  box-shadow: none !important;
    cursor: pointer;
-  box-shadow: none !important;
    transition:
      background-color 0.2s ease,
@@ Line 62: / Line 60: @@
 }
-/* Hover */
+/* Hover (enabled only) */
-.creation-row .createboxButton:hover:not(:disabled) {
+.creation-row .mw-ui-button:hover:not(:disabled) {
    background-color: #f2f2f2 !important;
    transform: translateY(-1px);
 }
-/* Active */
+/* Active (enabled only) */
-.creation-row .createboxButton:active:not(:disabled) {
+.creation-row .mw-ui-button:active:not(:disabled) {
    transform: translateY(0);
 }
-/* Disabled */
+/* Disabled look (before a name is entered) */
-.creation-row .createboxButton:disabled {
+.creation-row .mw-ui-button:disabled {
    background-color: #f5f5f5 !important;
    border-color: #ccc !important;