MediaWiki:Common.css

/* =====================================================================
   FEED SYSTEM - COMPLETE STYLESHEET
   Replaces BOTH earlier feed blocks in this file ("Feed block" and
   "FEED SYSTEM - LAYOUT ADDITIONS").
   ===================================================================== */

/* ---------- Frame, header, title ---------- */
.feed-block { margin: 2em 0; container-type: inline-size; container-name: feed; }
.feed-block .feed-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5em 1em; margin-bottom: 0.7em; }
.feed-block .feed-title { margin: 0; padding: 0; border: 0; font-size: 1.4em; font-weight: bold; }
.feed-block .feed-title a, .feed-block .feed-title a:visited { color: inherit; text-decoration: none; }
.feed-block .feed-title a:hover { text-decoration: underline; }
.feed-block .feed-footer { margin-top: 0.9em; text-align: right; }

/* ---------- Row of cards: 3 per row by default ---------- */
.feed-block .feed-items { display: flex; flex-wrap: wrap; gap: 1em; }
.feed-block .feed-items .feed-item { position: relative; box-sizing: border-box; flex: 1 1 calc((100% - 2em) / 3); min-width: 0; max-width: calc((100% - 2em) / 3); }
.feed-block.feed-cols-1 .feed-items .feed-item { max-width: 100%; flex-basis: 100%; }
.feed-block.feed-cols-2 .feed-items .feed-item { max-width: calc((100% - 1em) / 2); flex-basis: calc((100% - 1em) / 2); }
.feed-block.feed-cols-4 .feed-items .feed-item { max-width: calc((100% - 3em) / 4); flex-basis: calc((100% - 3em) / 4); }
.feed-block.feed-cols-5 .feed-items .feed-item { max-width: calc((100% - 4em) / 5); flex-basis: calc((100% - 4em) / 5); }

/* ---------- Picture area ---------- */
.feed-block .feed-item-media { position: relative; height: 180px; overflow: hidden; border-radius: 6px; background: #c8ccd1; }
.feed-block .feed-item-media > a, .feed-block .feed-item-media > span:not(.feed-item-noimg) { display: block; height: 100%; }
.feed-block .feed-item-media img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; }
.feed-block .feed-item-noimg { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #a2a9b1, #72777d); }

/* ---------- Titles (two copies; each style shows one) ---------- */
.feed-block .feed-item-title { font-weight: bold; line-height: 1.25; }
.feed-block .feed-item-title a, .feed-block .feed-item-title a:visited { text-decoration: none; }
.feed-block .feed-item-title-side { display: none; }
.feed-block .feed-item-title-over { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.3em 0.75em 0.55em; font-size: 1.05em; background: linear-gradient(transparent, rgba(0, 0, 0, 0.78)); }
.feed-block .feed-item-title-over a, .feed-block .feed-item-title-over a:visited { display: block; color: #fff !important; }

/* ---------- Text under the picture ---------- */
.feed-block .feed-item-body { padding-top: 0.5em; }
.feed-block .feed-item-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; font-size: 0.9em; line-height: 1.4; }
.feed-block .feed-item-more { margin-top: 0.2em; font-size: 0.85em; }
.feed-block .feed-item-more a { position: relative; z-index: 3; font-weight: bold; }

/* ---------- Buttons ---------- */
.feed-block .feed-feedbtn a,
.feed-block .feed-item-postbtn a,
.feed-block .feed-item-feedcard-btn a { position: relative; z-index: 3; display: inline-block; padding: 0.45em 1em !important; border-radius: 4px; font-size: 0.85em; font-weight: bold; line-height: 1.2; text-decoration: none !important; background-image: none !important; }
.feed-block .feed-feedbtn a, .feed-block .feed-feedbtn a:visited { background-color: #202122; color: #fff !important; }
.feed-block .feed-item-postbtn a, .feed-block .feed-item-postbtn a:visited { background-color: #36c; color: #fff !important; }
.feed-block .feed-item-feedcard-btn a, .feed-block .feed-item-feedcard-btn a:visited { background-color: #fff; color: #36c !important; border: 1px solid #36c; }
.feed-block .feed-feedbtn a:hover, .feed-block .feed-item-postbtn a:hover { opacity: 0.85; }
/* A post's own button only shows in feeds that have postbuttons=1 */
.feed-block .feed-item-postbtn { display: none; margin-top: 0.5em; }
.feed-block.feed-postbuttons .feed-item-postbtn { display: block; }
.feed-block .feed-item-feedcard-btn { display: block; margin-top: 0.5em; }

/* ---------- Like / share icons (actions=1) - look only, no click behavior yet ---------- */
.feed-block .feed-item-actionsbar { display: none; position: absolute; top: 0.5em; right: 0.5em; z-index: 3; gap: 0.4em; }
.feed-block.feed-actions .feed-item-actionsbar { display: flex; }
.feed-block .feed-action { display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.15); background: rgba(255, 255, 255, 0.92); color: #202122; font-size: 0.9em; line-height: 1; cursor: pointer; }

/* =====================================================================
   STYLE: overlaytop  - title across the TOP of the picture, text across
   the BOTTOM of the picture, buttons at the bottom. Whole card clickable.
   ===================================================================== */
.feed-block.feed-style-overlaytop .feed-items .feed-item { height: 240px; overflow: hidden; border-radius: 6px; background: #c8ccd1; }
.feed-block.feed-style-overlaytop .feed-item-media { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: auto; border-radius: 0; display: flex; flex-direction: column; }
.feed-block.feed-style-overlaytop .feed-item-media > a,
.feed-block.feed-style-overlaytop .feed-item-media > span { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: auto; }
.feed-block.feed-style-overlaytop .feed-item-title-over { position: static; z-index: 1; padding: 0.6em 0.75em 1.4em; background: linear-gradient(rgba(0, 0, 0, 0.72), transparent); }
.feed-block.feed-style-overlaytop .feed-item-title-over a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; }
.feed-block.feed-style-overlaytop.feed-actions .feed-item-title-over { padding-right: 5.5em; }
.feed-block.feed-style-overlaytop .feed-item-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1.8em 0.75em 0.6em; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, 0.85)); }
.feed-block.feed-style-overlaytop .feed-item-more a, .feed-block.feed-style-overlaytop .feed-item-more a:visited { color: #fff !important; }
.feed-block.feed-style-overlaytop .feed-item-feedcard-btn { position: absolute; right: 0.6em; bottom: 0.6em; z-index: 3; margin-top: 0; }

/* =====================================================================
   STYLE: side  - picture alone on the LEFT; title, text and buttons on
   the RIGHT, nothing written over the picture. One card per row.
   ===================================================================== */
.feed-block.feed-style-side .feed-items { flex-direction: column; flex-wrap: nowrap; }
.feed-block.feed-style-side .feed-items .feed-item { max-width: 100%; flex: 1 1 auto; display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 1em; align-items: start; }
.feed-block.feed-style-side .feed-item-media { grid-column: 1; grid-row: 1 / span 2; height: 160px; }
.feed-block.feed-style-side .feed-item-body { grid-column: 2; grid-row: 1; padding-top: 0; }
.feed-block.feed-style-side .feed-item-feedcard-btn { grid-column: 2; grid-row: 2; margin-top: 0.5em; }
.feed-block.feed-style-side .feed-item-title-over { display: none; }
.feed-block.feed-style-side .feed-item-title-side { display: block; margin-bottom: 0.3em; font-size: 1.25em; }
.feed-block.feed-style-side .feed-item-title-side a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }

/* =====================================================================
   RESPONSIVE - the cards react to the width of the box the feed is in
   (so a feed in a narrow sidebar behaves like a phone), with a fallback
   to the screen width for very old browsers.
   ===================================================================== */
@media (max-width: 900px) {
  .feed-block.feed-block .feed-items .feed-item { max-width: calc((100% - 1em) / 2); flex-basis: calc((100% - 1em) / 2); }
}
@media (max-width: 600px) {
  .feed-block.feed-block .feed-items .feed-item { max-width: 100%; flex-basis: 100%; }
}
@container feed (max-width: 720px) {
  .feed-block.feed-block .feed-items .feed-item { max-width: calc((100% - 1em) / 2); flex-basis: calc((100% - 1em) / 2); }
}
@container feed (max-width: 480px) {
  .feed-block.feed-block .feed-items .feed-item { max-width: 100%; flex-basis: 100%; }
  .feed-block.feed-style-side .feed-items .feed-item { grid-template-columns: minmax(0, 1fr); }
  .feed-block.feed-style-side .feed-item-media { grid-column: 1; grid-row: auto; height: 200px; margin-bottom: 0.5em; }
  .feed-block.feed-style-side .feed-item-body { grid-column: 1; grid-row: auto; }
  .feed-block.feed-style-side .feed-item-feedcard-btn { grid-column: 1; grid-row: auto; margin-top: 0.5em; }
}
@media (max-width: 600px) {
  .feed-block.feed-style-side .feed-items .feed-item { grid-template-columns: minmax(0, 1fr); }
  .feed-block.feed-style-side .feed-item-media { grid-column: 1; grid-row: auto; height: 200px; margin-bottom: 0.5em; }
  .feed-block.feed-style-side .feed-item-body { grid-column: 1; grid-row: auto; }
  .feed-block.feed-style-side .feed-item-feedcard-btn { grid-column: 1; grid-row: auto; margin-top: 0.5em; }
}
/* cols=1 always means one per row */
.feed-block.feed-cols-1 .feed-items .feed-item { max-width: 100%; flex-basis: 100%; }

/* ---------- box=1 : grey rounded box (also used by the sidebar feed) ---------- */
.feed-block.feed-boxed { padding: 1em; border: 1px solid #c8ccd1; border-radius: 8px; background: #f8f9fa; }

/* ======================== Thumbnail / Text Overlay ==================== */
/* post button over the picture, bottom right */

.feed-block.feed-style-overlaytop .feed-item-postbtn {
  position:absolute; right:.6em; bottom:.6em; z-index:3; margin:0;
}
/* title on top of the picture in the DEFAULT style too */
.feed-block .feed-item-title-over {
  top:0; bottom:auto; padding:.55em .75em 1.3em;
  background:linear-gradient(rgba(0,0,0,.75),transparent);
}
/* blurb over the picture (all styles except side) */
.feed-block:not(.feed-style-side) .feed-item-body {
  position:absolute; left:0; right:0; bottom:0; padding:1.6em .75em .6em;
  color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.85));
}
.feed-block:not(.feed-style-side) .feed-item { height:240px; overflow:hidden; border-radius:6px; }
.feed-block:not(.feed-style-side) .feed-item-more a { color:#fff !important; }

/* ======================== Make custom Look For Feeds ==================== */
/* The example is for a gray outline 
add class= to the feed in page

{{Feed|title=Knitting|category=Knitting|class=knittingfeed}}

Or wrap it by hand: <div class="home-feed">{{Feed|...}}</div> and style .home-feed

*/

/* --- The custom feed code to add. Can add as many as possible and customize  -----*/

/*
.feed-block.knittingfeed { background:#eef3ea; padding:1em; border-radius:10px; }
.feed-block.knittingfeed .feed-title { color:#2d5a27; }

*/