Template:CreateHub/styles.css: Difference between revisions
Created page with ".creation-hub { display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem; margin-top: 2rem; } .creation-card { width: 250px; padding: 1.5rem; text-align: center; border: 2px solid #e0e0e0; →border-radius: 1rem;: background: #fafafa; →box-shadow: 0 2px 6px rgba(0,0,0,0.08);: transition: all 0.2s ease-in-out; } .creation-card:hover { background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.12); transform: translateY(-2px);..." |
No edit summary |
||
| Line 1: | Line 1: | ||
/* --- CreateHub Container --- */ | |||
.creation-hub { | .creation-hub { | ||
display: flex; | display: flex; | ||
| Line 7: | Line 8: | ||
} | } | ||
/* --- Card Styling (matching create-button aesthetic) --- */ | |||
.creation-card { | .creation-card { | ||
width: 250px; | width: 250px; | ||
padding: 1.5rem; | padding: 1.5rem; | ||
text-align: center; | text-align: center; | ||
border: | border: 1.5px solid #000000; /* thin black border */ | ||
border-radius: 2px; /* minimal rounding */ | |||
background: #fafafa; | background: #fafafa; | ||
transition: | |||
background-color 0.2s ease, | |||
box-shadow 0.2s ease, | |||
transform 0.15s ease; | |||
} | } | ||
.creation-card:hover { | .creation-card:hover { | ||
background: # | background: #f0f0f0; | ||
box-shadow: 0 | box-shadow: 0 3px 10px rgba(0,0,0,0.12); | ||
transform: translateY(-2px); | transform: translateY(-2px); | ||
} | } | ||
| Line 26: | Line 30: | ||
.creation-card h3 { | .creation-card h3 { | ||
margin-top: 0; | margin-top: 0; | ||
font-size: 1. | font-size: 1.2em; | ||
color: # | color: #111; /* darker neutral */ | ||
font-weight: 600; | |||
} | } | ||
/* --- InputBox Container --- */ | |||
.creation-card .inputbox { | .creation-card .inputbox { | ||
margin-top: 1rem; | margin-top: 1rem; | ||
} | } | ||
/* --- Input Fields --- */ | |||
.creation-card input { | .creation-card input { | ||
width: 100%; | width: 100%; | ||
padding: 0.4rem; | padding: 0.4rem 0.6rem; | ||
border: | border: 1.5px solid #000; /* match the button outline */ | ||
border-radius: | border-radius: 2px; | ||
font-size: 0.95rem; | font-size: 0.95rem; | ||
text-align: center; | background: #fff; | ||
text-align: center; | |||
} | } | ||
.creation-card input::placeholder { | .creation-card input::placeholder { | ||
text-align: center; | text-align: center; | ||
color: # | color: #777; | ||
font-style: italic; | font-style: italic; | ||
} | } | ||
/* --- Submit Button (matching create-button look) --- */ | |||
.creation-card input[type="submit"] { | .creation-card input[type="submit"] { | ||
width: 100%; | |||
padding: 8px 0; | |||
margin-top: 0.7rem; | |||
border-radius: | background: transparent !important; | ||
border: 1.5px solid #000; /* same thin border */ | |||
border-radius: 2px; | |||
color: inherit; | |||
font-weight: 600; | |||
cursor: pointer; | cursor: pointer; | ||
transition: | |||
background-color 0.2s ease, | |||
transform 0.15s ease, | |||
border-color 0.2s ease; | |||
} | } | ||
.creation-card input[type="submit"]:hover { | .creation-card input[type="submit"]:hover { | ||
background: # | background-color: #e6e6e6 !important; /* same darker hover fill as create-button */ | ||
border-color: #000; | |||
transform: translateY(-1px); | |||
} | |||
.creation-card input[type="submit"]:active { | |||
transform: translateY(0); | |||
} | } | ||