Out of Ore Wiki

Template:OOOInfoBoxTabber/styles.css: Difference between revisions

← Older edit
No edit summary
No edit summary
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* OOO Infobox — Tabber wrapper styles
/* Template:OOOInfoBoxTabber/styles.css
   Modes:
   Layout-only styles safe for TemplateStyles. */
  - default: wrap (tight-pack flex)
  - opt-in: add class .ooo-infobox-tabwrap--scroll for horizontal scroll
*/


/* Wrapper (default right) */
/* Wrapper (default right) */
Line 9: Line 6:
   float: right;
   float: right;
   clear: right;
   clear: right;
   width: 300px;                /* keep in sync with .ooo-infobox default */
   width: 300px;                /* match {{OOOInfoBox}} default if needed */
   margin: 0 0 1em 1em;
   margin: 0 0 1em 1em;
}
}
Line 18: 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; }


/* =========================
/* ===== Wrap mode (default) ===== */
  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; /* pack left, no stretching */
   justify-content: flex-start;
   align-content: flex-start;
   align-content: flex-start;
   align-items: flex-end;
   align-items: flex-end;
   margin: 0 0 .25rem 0;
   margin: 0;                   /* snug against the panel */
   width: 100%;
   width: 100%;
   box-sizing: border-box;
   box-sizing: border-box;
Line 35: Line 30:
}
}


/* Remove TabberNeue's default separator pseudo-element */
.ooo-infobox-tabwrap .tabber__tabs::after { content: none; }
.ooo-infobox-tabwrap .tabber__tabs::after { content: none; }


/* Pills (shared base styles) */
/* 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;             /* floor so tiny labels don't collapse */
   min-width: 3.5ch;
   white-space: nowrap;
   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%;
Line 57: Line 52:
}
}


/* Hover + focus */
.ooo-infobox-tabwrap .tabber__tab:hover { background: rgba(255,255,255,.06); }
.ooo-infobox-tabwrap .tabber__tab:hover { background: rgba(255,255,255,.06); }
.ooo-infobox-tabwrap .tabber__tab:focus {
.ooo-infobox-tabwrap .tabber__tab:focus {
Line 65: Line 59:
}
}


/* Active tab sits flush with the panel */
/* 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;
   box-shadow: none;             /* no seam */
   box-shadow: inset 0 -1px 0 var(--background-color-base, #ffffff);
}
}


Line 81: Line 74:
}
}


/* =========================
/* ===== Scroll mode (opt-in via .ooo-infobox-tabwrap--scroll) ===== */
  SCROLL MODE (opt-in)
  Add .ooo-infobox-tabwrap--scroll via |mode=scroll
  ========================= */
.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll { position: relative; }
.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll { position: relative; }


/* Make the tab row horizontally scrollable */
.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll .tabber__tabs {
.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll .tabber__tabs {
   display: flex;
   display: flex;
Line 94: Line 83:
   overflow-x: auto;
   overflow-x: auto;
   overflow-y: hidden;
   overflow-y: hidden;
   padding: 0 .75rem;            /* room for edge fades / arrows */
   padding: 0 .75rem;            /* room for arrows/edge fades */
   margin: 0 0 .25rem 0;
   margin: 0;
   border: 0;
   border: 0;
   background: none;
   background: none;
}
}


/* Simple edge fades using overlays (TemplateStyles-safe) */
/* 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::before,
.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::after {
.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::after {
   content: "";
   content: "";
   position: absolute;
   position: absolute;
   top: -2px;                   /* align with top of pills */
   top: -2px;
   height: 28px;                /* approximate pill height */
   height: 28px;                /* approx pill height */
   width: 10px;
   width: 10px;
}
}
Line 118: Line 107:
}
}


/* Tabs inside the scroller */
/* Tabs inside scroller stay fixed-size */
.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll .tabber__tab {
.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll .tabber__tab { flex: 0 0 auto; }
  flex: 0 0 auto;               /* fixed-size items; no snapping props */
}


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