Out of Ore Wiki

Template:OOOInfoBoxTabber/styles.css: Difference between revisions

← Older editNewer edit →
No edit summary
No edit summary
Line 1: Line 1:
/* OOO Infobox — Tabber wrapper (full-width lines, neat wrap)
/* OOO Infobox — Tabber wrapper styles
   Version: tight-pack flex (TemplateStyles-safe) */
  Modes:
  - default: wrap (tight-pack flex)
   - opt-in: add class .ooo-infobox-tabwrap--scroll for horizontal scroll
*/


/* Wrapper (default right) */
/* Wrapper (default right) */
Line 6: Line 9:
   float: right;
   float: right;
   clear: right;
   clear: right;
   width: 300px;                /* keep in sync with .ooo-infobox */
   width: 300px;                /* keep in sync with .ooo-infobox default */
   margin: 0 0 1em 1em;
   margin: 0 0 1em 1em;
}
}
Line 15: Line 18:
.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;                  /* both column + row gap */
   justify-content: flex-start;  /* keep items packed left */
   justify-content: flex-start;  /* pack left, no stretching */
   align-content: flex-start;
   align-content: flex-start;
  align-items: flex-end;
   margin: 0 0 .25rem 0;
   margin: 0 0 .25rem 0;
   width: 100%;
   width: 100%;
Line 27: Line 33:
   border: 0;
   border: 0;
   background: none;
   background: none;
  align-items: flex-end;
}
}


/* Remove filler used by the old layout */
.ooo-infobox-tabwrap .tabber__tabs::after { content: none; }
.ooo-infobox-tabwrap .tabber__tabs::after { content: none; }


/* Pills */
/* Pills (shared base styles) */
.ooo-infobox-tabwrap .tabber__tab {
.ooo-infobox-tabwrap .tabber__tab {
   flex: 0 0 auto;              /* natural width; don't shrink */
   flex: 0 0 auto;              /* natural width; don't shrink */
   min-width: 3.5ch;            /* small floor so tiny labels don't collapse */
   min-width: 3.5ch;            /* floor so tiny labels don't collapse */
   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;
Line 43: Line 47:
   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 */
/* Hover + focus */
.ooo-infobox-tabwrap .tabber__tab:hover {
.ooo-infobox-tabwrap .tabber__tab:hover { background: rgba(255,255,255,.06); }
  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 sits flush with the panel */
.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 */
   margin-bottom: -1px;
   box-shadow: inset 0 -1px 0 var(--background-color-base, #ffffff);
   box-shadow: inset 0 -1px 0 var(--background-color-base, #ffffff);
}
}
Line 77: Line 79:
   border: 0;
   border: 0;
   background: transparent;
   background: transparent;
}
/* =========================
  SCROLL MODE (opt-in)
  Add .ooo-infobox-tabwrap--scroll via |mode=scroll
  ========================= */
.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll { position: relative; }
/* Make the tab row horizontally scrollable */
.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 edge fades / arrows */
  margin: 0 0 .25rem 0;
  border: 0;
  background: none;
}
/* Simple edge fades using overlays (TemplateStyles-safe) */
.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::before,
.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::after {
  content: "";
  position: absolute;
  top: -2px;                    /* align with top of pills */
  height: 28px;                /* approximate 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 the scroller */
.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll .tabber__tab {
  flex: 0 0 auto;              /* fixed-size items; no snapping props */
}
}


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