Template:CreateHub/styles.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
-/* Row wrapper: center each input+button horizontally */
+/* Row wrapper: centers each pair horizontally */
 .creation-row {
-    display: flex;
+  display: flex;
-    justify-content: center;
+  justify-content: center;
-    margin: 0.75rem 0;
+  margin: 0.75rem 0;
 }
-/* InputBox wrapper */
+/* The InputBox output wrapper */
 .creation-row .mw-inputbox-centered {
-    display: flex;
+  display: flex;
-    justify-content: center;
+  justify-content: center;
 }
 /* Treat the inner form as a flex row: [input] [button] */
 .creation-row .mw-inputbox-centered form {
-    display: flex;
+  display: flex;
-    align-items: center;
+  align-items: center;
-    gap: 1rem;
+  gap: 1rem;
 }
-/* Fixed, matching size for both controls */
+/* FIXED, MATCHING SIZE for both controls */
 .creation-row .mw-inputbox-centered form input[type="text"],
 .creation-row .mw-inputbox-centered form input[type="submit"] {
-    width: 260px;
+  width: 260px;
-    height: 40px;
+  height: 40px;
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
-/* Input (left side) */
+/* --- INPUT (left side) --- */
 .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;
-    background: #fff;
+  background: #fff;
-    font-size: 0.95rem;
+  font-size: 0.95rem;
-    text-align: center;
+  text-align: center !important;
-    font-style: italic;
+  font-style: italic;
 }
 /* Placeholder styling */
 .creation-row .mw-inputbox-centered form input[type="text"]::placeholder {
-    text-align: center;
+  text-align: center !important;
-    color: #777;
+  color: #777;
-    font-style: italic;
+  font-style: italic;
 }
-/* Button (right side) */
+/* --- BUTTON (right side) --- */
 .creation-row .mw-inputbox-centered form input[type="submit"] {
-    border: 1.5px solid #000;
+  border: 1.5px solid #000 !important;
-    border-radius: 2px;
+  border-radius: 2px !important;
-    background: transparent;
+  background: transparent !important;
-    color: #000;
+  color: #000 !important;
+  font-weight: 600;
-    font-weight: 600;
+  font-size: 0.95rem;
-    font-size: 0.95rem;
+  text-align: center;
-    text-align: center;
+  line-height: 40px;
-    line-height: 40px;
+  cursor: pointer;
-    cursor: pointer;
+  box-shadow: none !important;
+  transition:
-    box-shadow: none;
+    background-color 0.2s ease,
-    transition:
+    transform 0.15s ease,
-        background-color 0.2s ease,
+    border-color 0.15s ease;
-        transform 0.15s ease,
-        border-color 0.15s ease;
 }
-/* Hover */
+/* Hover state */
 .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 state */
 .creation-row .mw-inputbox-centered form input[type="submit"]:active {
-    transform: translateY(0);
+  transform: translateY(0);
 }
-/* Disabled */
+/* Disabled state */
 .creation-row .mw-inputbox-centered form input[type="submit"]:disabled {
-    border: 1.5px solid #000;
+  border: 1.5px solid #000 !important;
-    background: transparent;
+  background: transparent !important;
-    color: #000;
+  color: #000 !important;
-    cursor: not-allowed;
+  cursor: not-allowed;
-    opacity: 1;
+  opacity: 1;
 }