Template:OOOInfoBoxTabber/styles.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
-/* Keep the tab set where the infobox belongs (right, fixed width) */
+/* OOO Infobox – Tabber wrapper (TemplateStyles safe)
-.ooo-infobox-tabwrap { float:right; clear:right; margin:0 0 1em 1em; }
+   - Default floats right next to article text
+   - Inherits skin tokens so it works in light/dark modes
+   - No fixed width: wrapper shrinks to the infobox (or to an inline width set by Lua)
+*/
-/* Compact tab headers; inherit skin tokens for night mode */
+/* Default: right-aligned wrapper */
-.ooo-infobox-tabwrap .tabber__tabs { margin-bottom:.5rem; }
+.ooo-infobox-tabwrap {
+  float: right;
+  clear: right;
+  margin: 0 0 1em 1em; /* space from article text */
+}
+/* Alignment overrides (module adds these when |align=left/none/center) */
+.ooo-infobox-tabwrap--left   { float: left;  clear: left;  margin: 0 1em 1em 0; }
+.ooo-infobox-tabwrap--none   { float: none;               margin: 0 0 1em 0; }
+.ooo-infobox-tabwrap--center { float: none; display: block; margin: 0 auto 1em; }
+/* Tab strip */
+.ooo-infobox-tabwrap .tabber__tabs {
+  display: block;
+  margin: 0 0 .5rem 0;
+  width: 100%;              /* respect wrapper width */
+  box-sizing: border-box;
+}
+/* Individual tabs */
 .ooo-infobox-tabwrap .tabber__tab {
-   font: 700 90%/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+  display: inline-block;
-   background: var(--background-color-neutral,#f5f5f5);
+   font-weight: 700;
-   color: var(--color-base,#202122);
+  font-size: 90%;
-   border:1px solid #a2a9b1; border-bottom:none; border-radius:6px 6px 0 0;
+  line-height: 1.2;
-  padding:.25rem .5rem; margin-right:.25rem;
+  padding: .25rem .5rem;
+  margin-right: .25rem;
+  text-decoration: none;
+   background: var(--background-color-neutral, #f5f5f5);
+   color: var(--color-base, #202122);
+   border: 1px solid #a2a9b1;   /* literal to avoid TemplateStyles color warning */
+  border-bottom: none;
+  border-radius: 6px 6px 0 0;
 }
+/* Active tab blends into the infobox below */
 .ooo-infobox-tabwrap .tabber__tab--active {
-   background: var(--background-color-base,#fff);
+   background: var(--background-color-base, #ffffff);
-   color: var(--color-base,#202122);
+   color: var(--color-base, #202122);
 }
-/* Make the panel blend into the infobox (our infobox already has borders) */
+/* Tab panel: remove default padding/borders so it sits flush with the infobox */
-.ooo-infobox-tabwrap .tabber__panel { padding:0; border:none; }
+.ooo-infobox-tabwrap .tabber__panel {
+  padding: 0;
+  border: none;
+}
-/* Mobile: unfloat + full width */
+/* Mobile: unfloat and go full width */
-@media (max-width:640px) {
+@media (max-width: 640px) {
-   .ooo-infobox-tabwrap { float:none; width:100%; margin:0 0 1em 0; }
+   .ooo-infobox-tabwrap,
+  .ooo-infobox-tabwrap--left,
+  .ooo-infobox-tabwrap--none,
+  .ooo-infobox-tabwrap--center {
+    float: none;
+    width: 100%;
+    margin: 0 0 1em 0;
+  }
 }