Out of Ore Wiki

Template:OOOInfoBoxTabber/styles.css: Difference between revisions

← Older edit
No edit summary
No edit summary
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* OOO Infobox — Tabber wrapper (full-width lines, neat wrap)
/* Template:OOOInfoBoxTabber/styles.css
   Version: tight-pack flex (TemplateStyles-safe) */
   Layout-only styles safe for TemplateStyles. */


/* Wrapper (default right) */
/* Wrapper (default right) */
Line 6: Line 6:
   float: right;
   float: right;
   clear: right;
   clear: right;
   width: 300px;                /* keep in sync with .ooo-infobox */
   width: 300px;                /* match {{OOOInfoBox}} default if needed */
   margin: 0 0 1em 1em;
   margin: 0 0 1em 1em;
}
}
Line 15: Line 15:
.ooo-infobox-tabwrap--center { float: none; display: block; margin: 0 auto 1em; }
.ooo-infobox-tabwrap--center { float: none; display: block; margin: 0 auto 1em; }


/* Tabs row: wrap naturally with even gaps (no row stretching) */
/* ===== Wrap mode (default) ===== */
.ooo-infobox-tabwrap .tabber__tabs {
.ooo-infobox-tabwrap .tabber__tabs {
   display: flex;
   display: flex;
   flex-wrap: wrap;
   flex-wrap: wrap;
   gap: .35rem;                 /* both column + row gap */
   gap: .35rem;
   justify-content: flex-start; /* keep items packed left */
   justify-content: flex-start;
   align-content: flex-start;
   align-content: flex-start;
   margin: 0 0 .25rem 0;
  align-items: flex-end;
   margin: 0;                   /* snug against the panel */
   width: 100%;
   width: 100%;
   box-sizing: border-box;
   box-sizing: border-box;
   border: 0;
   border: 0;
   background: none;
   background: none;
  align-items: flex-end;
}
}


/* Remove filler used by the old layout */
/* Remove TabberNeue's default separator pseudo-element */
.ooo-infobox-tabwrap .tabber__tabs::after { content: none; }
.ooo-infobox-tabwrap .tabber__tabs::after { content: none; }


/* Pills */
/* Pills */
.ooo-infobox-tabwrap .tabber__tab {
.ooo-infobox-tabwrap .tabber__tab {
   flex: 0 0 auto;               /* natural width; don't shrink */
   flex: 0 0 auto;
   min-width: 3.5ch;             /* small floor so tiny labels don't collapse */
   min-width: 3.5ch;
   white-space: nowrap;         /* keep short labels on one line */
   white-space: nowrap;
   text-align: center;
   text-align: center;
   line-height: 1.2;
   line-height: 1.2;
   font-weight: 700;
   font-weight: 700;
   font-size: 90%;
   font-size: 90%;
   padding: .3rem .55rem;       /* TemplateStyles-safe padding */
   padding: .3rem .55rem;
   text-decoration: none;
   text-decoration: none;


   background: var(--background-color-neutral, #f5f5f5);
   background: var(--background-color-neutral, #f5f5f5);
   color: var(--color-base, #202122);
   color: var(--color-base, #202122);
   border: 1px solid #a2a9b1;   /* literal to satisfy TemplateStyles */
   border: 1px solid #a2a9b1;
   border-bottom: none;
   border-bottom: none;
   border-radius: 12px 12px 0 0;
   border-radius: 12px 12px 0 0;
}
}


/* Hover + focus: accessible but subtle */
.ooo-infobox-tabwrap .tabber__tab:hover { background: rgba(255,255,255,.06); }
.ooo-infobox-tabwrap .tabber__tab:hover {
  background: rgba(255,255,255,.06);   /* subtle lift on dark theme */
}
.ooo-infobox-tabwrap .tabber__tab:focus {
.ooo-infobox-tabwrap .tabber__tab:focus {
   outline: 2px solid #cea141;         /* brand gold */
   outline: 2px solid #cea141;
   outline-offset: 2px;
   outline-offset: 2px;
   border-radius: 12px;                 /* full pill outline, not just top */
   border-radius: 12px;
}
}


/* Active tab feels attached & not clickable */
/* Active tab (no inset line, no negative margin) */
.ooo-infobox-tabwrap .tabber__tab--active {
.ooo-infobox-tabwrap .tabber__tab--active {
   cursor: default;
   cursor: default;
   background: var(--background-color-base, #ffffff);
   background: var(--background-color-base, #ffffff);
   color: var(--color-base, #202122);
   color: var(--color-base, #202122);
   margin-bottom: -1px;                 /* keep panel seam flush */
   box-shadow: none;             /* no seam */
  box-shadow: inset 0 -1px 0 var(--background-color-base, #ffffff);
}
}


Line 78: Line 73:
   background: transparent;
   background: transparent;
}
}
/* ===== Scroll mode (opt-in via .ooo-infobox-tabwrap--scroll) ===== */
.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll { position: relative; }
.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll .tabber__tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: .35rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 .75rem;            /* room for arrows/edge fades */
  margin: 0;
  border: 0;
  background: none;
}
/* Optional edge fades (comment out if you don't want them) */
.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::before,
.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::after {
  content: "";
  position: absolute;
  top: -2px;
  height: 28px;                /* approx pill height */
  width: 10px;
}
.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::before {
  left: 0;
  background: linear-gradient(to right, var(--background-color-base, #1f1f1f), transparent);
}
.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::after {
  right: 0;
  background: linear-gradient(to left, var(--background-color-base, #1f1f1f), transparent);
}
/* Tabs inside scroller stay fixed-size */
.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll .tabber__tab { flex: 0 0 auto; }


/* Mobile */
/* Mobile */
Retrieved from "https://wiki.outofore.com/index.php/Template:OOOInfoBoxTabber/styles.css"