Template:CreateHub/styles.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
-/* --- CreateHub Container --- */
+/* Container: stack rows with spacing */
-.creation-hub {
+.creation-row {
    display: flex;
    justify-content: center;
-  flex-wrap: wrap;
+   margin: 1rem 0;
-  gap: 2rem;
-   margin-top: 2rem;
 }
-/* --- Card Styling (simple, in line with site aesthetic) --- */
+/* InputBox row layout */
-.creation-card {
+.creation-row .inputbox form {
-  width: 420px;
-  padding: 1.5rem;
-  border: 1.5px solid #000000;
-  border-radius: 2px;
-  background: #fafafa;
-  transition:
-      background-color 0.2s ease,
-      box-shadow 0.2s ease,
-      transform 0.15s ease;
-}
-.creation-card:hover {
-  background: #f0f0f0;
-  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
-  transform: translateY(-2px);
-}
-.creation-card h3 {
-  margin-top: 0;
-  margin-bottom: 0.25rem;
-  font-size: 1.2em;
-  color: #111;
-  font-weight: 600;
-}
-.creation-card p {
-  margin-top: 0;
-  margin-bottom: 0.75rem;
-}
-/* --- InputBox inline layout: input on left, button on right --- */
-.creation-card .inputbox form {
    display: flex;
    align-items: center;
-   gap: 0.75rem;
+   gap: 0.75rem;       /* space between input + button */
-  margin-top: 0.5rem;
 }
-/* Text input */
+/* Text input styling */
-.creation-card .inputbox input[type="text"] {
+.creation-row .inputbox input[type="text"] {
-   flex: 1 1 auto;
+   width: 220px;
    padding: 0.4rem 0.6rem;
    border: 1.5px solid #000;
    border-radius: 2px;
-  font-size: 0.9rem;
    background: #fff;
+  font-size: 0.95rem;
+  text-align: center;
 }
-/* Placeholder styling */
+.creation-row .inputbox input[type="text"]::placeholder {
-.creation-card .inputbox input[type="text"]::placeholder {
    color: #777;
    font-style: italic;
 }
-/* Submit button — visually aligned with .create-button style */
+/* Submit button — SAME aesthetic as .create-button */
-.creation-card .inputbox input[type="submit"] {
+.creation-row .inputbox input[type="submit"] {
-   flex: 0 0 180px;
+   width: 220px;                     /* same fixed size as your noarticletext buttons */
    padding: 8px 0;
    text-align: center;
@@ Line 75: / Line 40: @@
    color: inherit;
    font-weight: 600;
-   font-size: 0.9rem;
+   font-size: 0.95rem;
    cursor: pointer;
    transition:
-      transform 0.15s ease,
+    transform 0.15s ease,
-      border-color 0.15s ease,
+    border-color 0.15s ease,
-      background-color 0.2s ease;
+    background-color 0.2s ease;
 }
-.creation-card .inputbox input[type="submit"]:hover {
+/* Hover: identical to .create-button */
+.creation-row .inputbox input[type="submit"]:hover {
    border-color: #000;
-   background-color: #e6e6e6 !important;
+   background-color: #f2f2f2 !important;
    transform: translateY(-1px);
 }
-.creation-card .inputbox input[type="submit"]:active {
+.creation-row .inputbox input[type="submit"]:active {
    transform: translateY(0);
 }