Form:ResearchItem/styles.css: Difference between revisions

Revision as of 14:45, 20 January 2026

/* ResearchItem form – make PageForms not look like ass */

/* Keep the form centered and readable */
.mw-parser-output .formtable{
  width:100%;
  max-width:980px;
  margin:0 auto 18px;
  border-collapse:separate;
  border-spacing:0 12px;
}

/* Each row becomes a "cardy" block */
.mw-parser-output .formtable > tbody > tr{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
}

/* Labels */
.mw-parser-output .formtable th{
  width:220px;
  vertical-align:top;
  text-align:left;
  font-weight:700;
  color:#1f2937;
  padding:14px 14px 8px;
  border:0;
  white-space:nowrap;
}

/* Fields */
.mw-parser-output .formtable td{
  padding:10px 14px 14px;
  border:0;
}

/* Inputs: consistent look */
.mw-parser-output .formtable input[type="text"],
.mw-parser-output .formtable input[type="number"],
.mw-parser-output .formtable input[type="url"],
.mw-parser-output .formtable select,
.mw-parser-output .formtable textarea{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  background:#fff;
  border:1px solid #d1d5db;
  border-radius:10px;
  padding:10px 12px;
  font-size:15px;
  line-height:1.35;
}

/* Make textareas feel nicer */
.mw-parser-output .formtable textarea{
  resize:vertical;
  min-height:96px;
}

/* Datepicker widgets */
.mw-parser-output .formtable .ui-datepicker-input,
.mw-parser-output .formtable input.hasDatepicker{
  width:100% !important;
}

/* Subtle help text */
.mw-parser-output .mw-ui-muted{
  color:#6b7280;
  font-size:12px;
}

/* Buttons row */
.mw-parser-output .standardinput{
  max-width:980px;
  margin:0 auto;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* PageForms "standard input" buttons inherit MW UI classes; just improve spacing */
.mw-parser-output .standardinput .mw-ui-button,
.mw-parser-output .standardinput input[type="submit"],
.mw-parser-output .standardinput input[type="button"]{
  border-radius:10px;
  padding:9px 14px;
  font-weight:700;
}

/* Responsive: labels above fields on mobile */
@media (max-width: 720px){
  .mw-parser-output .formtable > tbody > tr{
    display:block;
    padding:10px 12px;
  }
  .mw-parser-output .formtable th,
  .mw-parser-output .formtable td{
    display:block;
    width:auto;
    padding:0;
  }
  .mw-parser-output .formtable th{
    margin:0 0 6px;
    white-space:normal;
  }
  .mw-parser-output .formtable td{
    margin:0 0 8px;
  }
}

/* SMW template output wraps results in <p> tags. Kill their default margins. */
.portal-events-feed > p {
  margin: 0;
}

/* Sometimes SMW emits empty paragraphs */
.portal-events-feed > p:empty {
  display: none;
}

/* Make sure the actual card fills the feed width */
.portal-events-feed > p > .research-item,
.portal-events-feed > p > .news-card,
.portal-events-feed > p > div {
  width: 100%;
}