Out of Ore Wiki

MediaWiki:Common.css: Difference between revisions

← Older editNewer edit →
m global styiling prep
mNo edit summary
Line 43: Line 43:
   margin: 0;
   margin: 0;
   background: var(--ooo-tab-arrow-bg);
   background: var(--ooo-tab-arrow-bg);
  color: var(--ooo-tab-arrow-color);
}


  /* drives SVG stroke="currentColor" */
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow::before {
  color: var(--ooo-tab-arrow-color);
  content:"";
  position:absolute;
  inset:-6px;
}
}
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow::before { content:""; position:absolute; inset:-6px; } /* bigger hit area */
 
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow--prev { inset-inline-start: 2px; }
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow--prev { inset-inline-start: 2px; }
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow--next { inset-inline-end: 2px; }
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow--next { inset-inline-end: 2px; }
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow:hover { background: var(--ooo-tab-arrow-bg-hover); }
 
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow:disabled { opacity:.4; cursor: default; box-shadow: none; }
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow:hover {
  background: var(--ooo-tab-arrow-bg-hover);
}
 
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow:disabled {
  opacity:.4;
  cursor: default;
  box-shadow: none;
}
 
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow.is-hidden { display: none; }
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow.is-hidden { display: none; }
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow__icon { display: block; }
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow__icon { display: block; }
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow:focus-visible { outline: none; box-shadow: var(--ooo-tab-arrow-focus); }
 
.ooo-infobox-tabwrap--scroll .ooo-tab-arrow:focus-visible {
  outline: none;
  box-shadow: var(--ooo-tab-arrow-focus);
}


/* Dark theme — explicit client preference */
/* Dark theme — explicit client preference */
Line 60: Line 77:
   --ooo-tab-arrow-color: var(--color-base, #eaecf0);
   --ooo-tab-arrow-color: var(--color-base, #eaecf0);
}
}
html.skin-theme-clientpref-night .ooo-infobox-tabwrap--scroll .ooo-tab-arrow {
html.skin-theme-clientpref-night .ooo-infobox-tabwrap--scroll .ooo-tab-arrow {
   border-color: #3a3a3a;
   border-color: #3a3a3a;
Line 65: Line 83:
   box-shadow: 0 1px 2px rgba(0,0,0,.35);
   box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
}
html.skin-theme-clientpref-night .ooo-infobox-tabwrap--scroll .ooo-tab-arrow:hover {
html.skin-theme-clientpref-night .ooo-infobox-tabwrap--scroll .ooo-tab-arrow:hover {
   background: var(--background-color-neutral-subtle, #222325);
   background: var(--background-color-neutral-subtle, #222325);
Line 74: Line 93:
     --ooo-tab-arrow-color: var(--color-base, #eaecf0);
     --ooo-tab-arrow-color: var(--color-base, #eaecf0);
   }
   }
   html.skin-theme-clientpref-os .ooo-infobox-tabwrap--scroll .ooo-tab-arrow {
   html.skin-theme-clientpref-os .ooo-infobox-tabwrap--scroll .ooo-tab-arrow {
     border-color: #3a3a3a;
     border-color: #3a3a3a;
Line 79: Line 99:
     box-shadow: 0 1px 2px rgba(0,0,0,.35);
     box-shadow: 0 1px 2px rgba(0,0,0,.35);
   }
   }
   html.skin-theme-clientpref-os .ooo-infobox-tabwrap--scroll .ooo-tab-arrow:hover {
   html.skin-theme-clientpref-os .ooo-infobox-tabwrap--scroll .ooo-tab-arrow:hover {
     background: var(--background-color-neutral-subtle, #222325);
     background: var(--background-color-neutral-subtle, #222325);
Line 89: Line 110:
   content: "";
   content: "";
   display: inline-block;
   display: inline-block;
   width: 20px; height: 20px;
   width: 20px;
 
  height: 20px;
  /* color comes from .tabber__header { color: ... } */
   background-color: currentColor !important;
   background-color: currentColor !important;
   background: none !important;
   background: none !important;


  /* right chevron default (left overrides below) */
   -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='currentColor' d='M7 1L5.6 2.5 13 10l-7.4 7.5L7 19l9-9z'/></svg>") no-repeat center / contain;
   -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='currentColor' d='M7 1L5.6 2.5 13 10l-7.4 7.5L7 19l9-9z'/></svg>") no-repeat center / contain;
           mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='currentColor' d='M7 1L5.6 2.5 13 10l-7.4 7.5L7 19l9-9z'/></svg>") no-repeat center / contain;
           mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='currentColor' d='M7 1L5.6 2.5 13 10l-7.4 7.5L7 19l9-9z'/></svg>") no-repeat center / contain;
}
}
.tabber__header__prev:after {
.tabber__header__prev:after {
   -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='currentColor' d='M13 1l1.4 1.5L7 10l7.4 7.5L13 19l-9-9z'/></svg>") no-repeat center / contain;
   -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='currentColor' d='M13 1l1.4 1.5L7 10l7.4 7.5L13 19l-9-9z'/></svg>") no-repeat center / contain;
Line 104: Line 124:
}
}


/* Make header inherit the same color token as the buttons */
.ooo-infobox-tabwrap--scroll .tabber__header {
.ooo-infobox-tabwrap--scroll .tabber__header { color: var(--ooo-tab-arrow-color); }
  color: var(--ooo-tab-arrow-color);
}


/* Mobile helper (safe in Common.css; move to TemplateStyles if you prefer) */
@media (max-width: 640px) {
@media (max-width: 640px) {
   .ooo-infobox-tabwrap,
   .ooo-infobox-tabwrap,
Line 119: Line 139:
}
}


/* Remove the header separator line under the tab row */
.ooo-infobox-tabwrap .tabber__header {
.ooo-infobox-tabwrap .tabber__header {
   border-bottom: 0 !important;
   border-bottom: 0 !important;
Line 125: Line 144:
}
}


/* Some TabberNeue builds draw the line as a pseudo-element */
.ooo-infobox-tabwrap .tabber__tabs::after {
.ooo-infobox-tabwrap .tabber__tabs::after {
   content: none !important;
   content: none !important;
}
}


/* Optional: if you see a faint seam from the active tab “inset” shadow */
.ooo-infobox-tabwrap .tabber__tab--active {
.ooo-infobox-tabwrap .tabber__tab--active {
   box-shadow: none !important;   /* remove the 1px inset line */
   box-shadow: none !important;
   margin-bottom: 0 !important;   /* avoid creating a gap */
   margin-bottom: 0 !important;
}
}


/* Pull the tab row closer to the infobox panel */
.ooo-infobox-tabwrap .tabber__tabs {
.ooo-infobox-tabwrap .tabber__tabs {
   margin-bottom: 0px !important;   /* tweak: try -1px, -2px, or -3px to taste */
   margin-bottom: 0px !important;
}
}


/* ===== OOO Headings ===== */
/* ===== OOO Headings ===== */
Line 169: Line 183:
   border: 1px solid var(--ooo-border);
   border: 1px solid var(--ooo-border);
   border-collapse: collapse;
   border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
}
}


Line 175: Line 191:
   color: var(--ooo-accent);
   color: var(--ooo-accent);
   text-align: left;
   text-align: left;
   padding: 8px;
   padding: 8px 10px;
  font-weight: 600;
   border: none;
   border: none;
}
}


.wikitable td {
.wikitable td {
   padding: 8px;
   padding: 8px 10px;
   border-top: 1px solid var(--ooo-border);
   border-top: 1px solid var(--ooo-border);
}
.wikitable tr:hover td {
  background: rgba(255,122,0,0.05);
}
}
Retrieved from "https://wiki.outofore.com/index.php/MediaWiki:Common.css"