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
 
(35 intermediate revisions by the same user not shown)
Line 1: Line 1:
.creation-hub {
.creation-row {
  display: flex;
   margin: 10px 0;
  justify-content: center;
   width: 100%;
  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);
}
}


.creation-card h3 {
/* Force InputBox to align horizontally */
   margin-top: 0;
.creation-row .mw-inputbox-centered {
   font-size: 1.3em;
   margin: 0 !important;
   color: #2a2a2a;
  white-space: nowrap !important; /* Prevents wrapping */
  display: flex !important;
   align-items: center !important;
   gap: 15px !important;
}
}


.creation-card .inputbox {
.creation-row form {
   margin-top: 1rem;
   display: flex !important;
  gap: 15px !important;
  align-items: center !important;
}
}


.creation-card input {
/* Shared Styling */
   width: 100%;
.creation-row input[type="text"],
   padding: 0.4rem;
.creation-row input[type="submit"] {
  border: 1px solid #ccc;
   height: 40px !important;
  border-radius: 6px;
   box-sizing: border-box !important;
   font-size: 0.95rem;
   font-size: 14px !important;
  text-align: center;  
}
}


.creation-card input::placeholder {
/* Text Box */
   text-align: center;      
.creation-row input[type="text"] {
   color: #999;              
  width: 260px !important;
   font-style: italic;        
   background: #fff !important;
   border: 1px solid #a2a9b1 !important;
   padding: 0 10px !important;
}
}


.creation-card input[type="submit"] {
/* Button */
   background: #3366cc;
.creation-row input[type="submit"] {
   color: white;
   width: 260px !important;
   border: none;
   background: #fff !important;
   padding: 0.5rem 1rem;
   border: 1.5px solid #000 !important;
   border-radius: 6px;
   color: #000 !important;
   cursor: pointer;
   font-weight: 700 !important;
   font-weight: bold;
   cursor: pointer !important;
  margin-top: 0.5rem;
   border-radius: 2px !important;
  transition: background 0.2s ease;
}
}


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