Template:CreateHub/styles.css: Difference between revisions

← Older edit Newer edit →

@@ Line 8: / Line 8: @@
 }
-/* --- Card Styling (matching create-button aesthetic) --- */
+/* --- Card Styling (simple, in line with site aesthetic) --- */
 .creation-card {
-   width: 250px;
+   width: 420px;
    padding: 1.5rem;
-  text-align: center;
+   border: 1.5px solid #000000;
-   border: 1.5px solid #000000;     /* thin black border */
+   border-radius: 2px;
-   border-radius: 2px;              /* minimal rounding */
    background: #fafafa;
    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
@@ Line 30: / Line 29: @@
 .creation-card h3 {
    margin-top: 0;
+  margin-bottom: 0.25rem;
    font-size: 1.2em;
-   color: #111;                    /* darker neutral */
+   color: #111;
    font-weight: 600;
 }
-/* --- InputBox Container --- */
+.creation-card p {
-.creation-card .inputbox {
+  margin-top: 0;
-   margin-top: 1rem;
+  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;
+   margin-top: 0.5rem;
 }
-/* --- Input Fields --- */
+/* Text input */
-.creation-card input {
+.creation-card .inputbox input[type="text"] {
-   width: 100%;
+   flex: 1 1 auto;
    padding: 0.4rem 0.6rem;
-   border: 1.5px solid #000;       /* match the button outline */
+   border: 1.5px solid #000;
    border-radius: 2px;
-   font-size: 0.95rem;
+   font-size: 0.9rem;
    background: #fff;
-  text-align: center;
 }
-.creation-card input::placeholder {
+/* Placeholder styling */
-  text-align: center;
+.creation-card .inputbox input[type="text"]::placeholder {
    color: #777;
    font-style: italic;
 }
-/* --- Submit Button (matching create-button look) --- */
+/* Submit button — visually aligned with .create-button style */
-.creation-card input[type="submit"] {
+.creation-card .inputbox input[type="submit"] {
-   width: 100%;
+   flex: 0 0 180px;
    padding: 8px 0;
-   margin-top: 0.7rem;
+   text-align: center;
    background: transparent !important;
-   border: 1.5px solid #000;       /* same thin border */
+   border: 1.5px solid #000;
    border-radius: 2px;
    color: inherit;
    font-weight: 600;
+  font-size: 0.9rem;
    cursor: pointer;
    transition:
-      background-color 0.2s ease,
        transform 0.15s ease,
-       border-color 0.2s ease;
+       border-color 0.15s ease,
+      background-color 0.2s ease;
 }
-.creation-card input[type="submit"]:hover {
+.creation-card .inputbox input[type="submit"]:hover {
-  background-color: #e6e6e6 !important;   /* same darker hover fill as create-button */
    border-color: #000;
+  background-color: #e6e6e6 !important;
    transform: translateY(-1px);
 }
-.creation-card input[type="submit"]:active {
+.creation-card .inputbox input[type="submit"]:active {
    transform: translateY(0);
 }