Template:CreateHub/styles.css: Difference between revisions

Latest revision as of 15:09, 24 November 2025

.creation-row {
  margin: 10px 0;
  width: 100%;
}

/* Force InputBox to align horizontally */
.creation-row .mw-inputbox-centered {
  margin: 0 !important;
  white-space: nowrap !important; /* Prevents wrapping */
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
}

.creation-row form {
  display: flex !important;
  gap: 15px !important;
  align-items: center !important;
}

/* Shared Styling */
.creation-row input[type="text"],
.creation-row input[type="submit"] {
  height: 40px !important;
  box-sizing: border-box !important;
  font-size: 14px !important;
}

/* Text Box */
.creation-row input[type="text"] {
  width: 260px !important;
  background: #fff !important;
  border: 1px solid #a2a9b1 !important;
  padding: 0 10px !important;
}

/* Button */
.creation-row input[type="submit"] {
  width: 260px !important;
  background: #fff !important;
  border: 1.5px solid #000 !important;
  color: #000 !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  border-radius: 2px !important;
}

.creation-row input[type="submit"]:hover {
  background-color: #f2f2f2 !important;
  color: #000 !important;
}

@@ Line 1: / Line 1: @@
-/* --- CreateHub Container --- */
+.creation-row {
-.creation-hub {
+   margin: 10px 0;
-  display: flex;
+   width: 100%;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 2rem;
-   margin-top: 2rem;
-}
-/* --- Card Styling (matching create-button aesthetic) --- */
-.creation-card {
-   width: 250px;
-  padding: 1.5rem;
-  text-align: center;
-  border: 1.5px solid #000000;     /* thin black border */
-  border-radius: 2px;              /* minimal rounding */
-  background: #fafafa;
-  transition:
-      background-color 0.2s ease,
-      box-shadow 0.2s ease,
-      transform 0.15s ease;
 }
-.creation-card:hover {
+/* Force InputBox to align horizontally */
-   background: #f0f0f0;
+.creation-row .mw-inputbox-centered {
-   box-shadow: 0 3px 10px rgba(0,0,0,0.12);
+   margin: 0 !important;
-   transform: translateY(-2px);
+   white-space: nowrap !important; /* Prevents wrapping */
+   display: flex !important;
+  align-items: center !important;
+  gap: 15px !important;
 }
-.creation-card h3 {
+.creation-row form {
-   margin-top: 0;
+   display: flex !important;
-  font-size: 1.2em;
+   gap: 15px !important;
-   color: #111;                    /* darker neutral */
+   align-items: center !important;
-   font-weight: 600;
 }
-/* --- InputBox Container --- */
+/* Shared Styling */
-.creation-card .inputbox {
+.creation-row input[type="text"],
-   margin-top: 1rem;
+.creation-row input[type="submit"] {
+   height: 40px !important;
+  box-sizing: border-box !important;
+  font-size: 14px !important;
 }
-/* --- Input Fields --- */
+/* Text Box */
-.creation-card input {
+.creation-row input[type="text"] {
-  width: 100%;
+   width: 260px !important;
-  padding: 0.4rem 0.6rem;
+   background: #fff !important;
-  border: 1.5px solid #000;       /* match the button outline */
+   border: 1px solid #a2a9b1 !important;
-  border-radius: 2px;
+   padding: 0 10px !important;
-  font-size: 0.95rem;
-  background: #fff;
-  text-align: center;
-}
-.creation-card input::placeholder {
-  text-align: center;
-  color: #777;
-  font-style: italic;
-}
-/* --- Submit Button (matching create-button look) --- */
-.creation-card input[type="submit"] {
-   width: 100%;
-  padding: 8px 0;
-  margin-top: 0.7rem;
-   background: transparent !important;
-   border: 1.5px solid #000;       /* same thin border */
-   border-radius: 2px;
-  color: inherit;
-  font-weight: 600;
-  cursor: pointer;
-  transition:
-      background-color 0.2s ease,
-      transform 0.15s ease,
-      border-color 0.2s ease;
 }
-.creation-card input[type="submit"]:hover {
+/* Button */
-   background-color: #e6e6e6 !important;   /* same darker hover fill as create-button */
+.creation-row input[type="submit"] {
-   border-color: #000;
+  width: 260px !important;
-   transform: translateY(-1px);
+   background: #fff !important;
+   border: 1.5px solid #000 !important;
+   color: #000 !important;
+  font-weight: 700 !important;
+   cursor: pointer !important;
+  border-radius: 2px !important;
 }
-.creation-card input[type="submit"]:active {
+.creation-row input[type="submit"]:hover {
-   transform: translateY(0);
+   background-color: #f2f2f2 !important;
+  color: #000 !important;
 }