User:SignpostMarv/common.css

:root {
	--foo: 'bar' ;
}

:root {
  --satisfactory-ui--theme--ficsit-orange: #e59344;
  --satisfactory-ui--theme--ficsit-orange--original-text: #fff;
  --satisfactory-ui--theme--ficsit-orange--contrast-text: #000;
  --accent-color: var(--satisfactory-ui--theme--ficsit-orange);
  --satisfactory-ui--color--button-background--inactive: #666667;
  --satisfactory-ui--color--button-background--active: #535354;
  --satisfactory-ui--color--button-background--hover: var(--satisfactory-ui--theme--ficsit-orange);
  --satisfactory-ui--color--button-background--inactive--contrast-text: #fff;
  --satisfactory-ui-color--window-title-background: #3f3f3f;
  --satisfactory-ui-color--window-panel-title-background: #313131;
  --satisfactory-ui-color--vertical-tabbing-background: #272727;
  --satisfactory-ui-color--vertical-tabbing-background--hover: var(--satisfactory-ui--theme--ficsit-orange);
  --satisfactory-ui-color--vertical-tabbing-tab: #666667;
  --satisfactory-ui-color--vertical-tabbing-tab--hover: var(--satisfactory-ui--theme--ficsit-orange);
  --satisfactory-ui-color--vertical-tabbing-tab--hover--text: var(--satisfactory-ui--theme--ficsit-orange--contrast-text);
  --satisfactory-wiki--sidebar-width: 11em;
  --satisfactory-wiki--header-navigation-height: 2.5em;
  --satisfactory-wiki--error-text: #f2a1a1;
  --satisfactory-wiki--margin: var(--pi-margin,15px);
  --wiki-navigation-selected-background-color: var(--satisfactory-ui--color--button-background--hover);
  --wiki-navigation-selected-text-color: var(--satisfactory-ui--theme--ficsit-orange--contrast-text)
}
@keyframes background-position-slide {
  0% {
    background-position: -72cqw 0
  }
  to {
    background-position: 72cqw 0
  }
}
*,
:after,
:before {
  box-sizing: border-box
}
header#wikigg-header img.header-logo {
  height: auto
}
body {
  background-image: none
}
a.new,
a.new:visited {
  color: var(--satisfactory-wiki--error-text);
  text-decoration: underline
}
table.navbox th.navbox-title {
  background: var(--satisfactory-ui-color--window-title-background)
}
.navbox-group,
table.navbox th {
  background: var(--satisfactory-ui-color--window-panel-title-background)
}
.navbox .navbox-group a,
div#content .navbox th a {
  color: #fff
}
.navbox-group {
  position: relative
}
.navbox-group > a:first-child:last-child {
  align-items: center;
  background: var(--satisfactory-ui--color--button-background--inactive);
  color: var(--satisfactory-ui--color--button-background--inactive--contrast-text);
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}
.navbox-group > a:first-child:last-child:active {
  background: var(--satisfactory-ui--color--button-background--active)
}
.mw-inputbox-createbox:required:invalid ~ .mw-ui-button,
.oo-ui-layout .oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.oo-ui-layout .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button,
.oo-ui-layout .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button .oo-ui-layout .oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button,
.oo-ui-layout .oo-ui-buttonElement-framed:not(.oo-ui-flaggedElement-primary):not(.oo-ui-buttonElement-active) > .oo-ui-buttonElement-button,
.skin-vector .mw-ui-button {
  background: 0 0;
  background-color: var(--satisfactory-ui--color--button-background--inactive);
  border: none;
  color: var(--satisfactory-ui--color--button-background--inactive--contrast-text);
  cursor: pointer
}
.mw-inputbox-createbox:required:invalid ~ .mw-ui-button:active,
.oo-ui-layout .oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active,
.oo-ui-layout .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active,
.oo-ui-layout .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button .oo-ui-layout .oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active,
.oo-ui-layout .oo-ui-buttonElement-framed:not(.oo-ui-flaggedElement-primary):not(.oo-ui-buttonElement-active) > .oo-ui-buttonElement-button:active,
.skin-vector .mw-ui-button:active {
  background-color: var(--satisfactory-ui--color--button-background--active)
}
.mw-inputbox-createbox:required:invalid ~ .mw-ui-button:focus,
.mw-inputbox-createbox:required:invalid ~ .mw-ui-button:focus-within,
.mw-inputbox-createbox:required:invalid ~ .mw-ui-button:hover,
.oo-ui-layout .oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus,
.oo-ui-layout .oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus-within,
.oo-ui-layout .oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.oo-ui-layout .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus,
.oo-ui-layout .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus-within,
.oo-ui-layout .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover,
.oo-ui-layout .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button .oo-ui-layout .oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus,
.oo-ui-layout .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button .oo-ui-layout .oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus-within,
.oo-ui-layout .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button .oo-ui-layout .oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover,
.oo-ui-layout .oo-ui-buttonElement-framed:not(.oo-ui-flaggedElement-primary):not(.oo-ui-buttonElement-active) > .oo-ui-buttonElement-button:focus,
.oo-ui-layout .oo-ui-buttonElement-framed:not(.oo-ui-flaggedElement-primary):not(.oo-ui-buttonElement-active) > .oo-ui-buttonElement-button:focus-within,
.oo-ui-layout .oo-ui-buttonElement-framed:not(.oo-ui-flaggedElement-primary):not(.oo-ui-buttonElement-active) > .oo-ui-buttonElement-button:hover,
.skin-vector .mw-ui-button:focus,
.skin-vector .mw-ui-button:focus-within,
.skin-vector .mw-ui-button:hover {
  background-color: var(--satisfactory-ui--color--button-background--hover);
  color: var(--satisfactory-ui--theme--ficsit-orange--contrast-text)
}
.mw-inputbox-createbox:required:invalid ~ .mw-ui-button {
  background-color: var(--satisfactory-ui--color--button-background--hover);
  color: var(--satisfactory-ui--theme--ficsit-orange--contrast-text)
}
.skin-vector .mw-ui-button.mw-ui-progressive,
.skin-vector .mw-ui-button.mw-ui-progressive:hover {
  border: none;
  box-shadow: none
}
.skin-vector .mw-ui-button.mw-ui-primary:disabled,
.skin-vector .mw-ui-button.mw-ui-progressive:hover {
  border: none
}
#searchInput,
.skin-vector .mw-ui-input,
input {
  background: 0 0;
  background-color: var(--satisfactory-ui--color--button-background--inactive);
  border: 1px solid;
  box-shadow: none;
  color: var(--satisfactory-ui--color--button-background--inactive--contrast-text)
}
#searchInput,
#searchInput:not(:disabled),
.skin-vector .mw-ui-input,
.skin-vector .mw-ui-input:not(:disabled),
input,
input:not(:disabled) {
  transition: none
}
#searchInput::placeholder,
.skin-vector .mw-ui-input::placeholder,
input::placeholder {
  color: var(--satisfactory-ui--theme--ficsit-orange)
}
#searchInput:checked,
#searchInput:focus,
#searchInput:focus-within,
#searchInput:hover,
#searchInput:invalid,
#searchInput:selected,
.skin-vector .mw-ui-input:checked,
.skin-vector .mw-ui-input:focus,
.skin-vector .mw-ui-input:focus-within,
.skin-vector .mw-ui-input:hover,
.skin-vector .mw-ui-input:invalid,
.skin-vector .mw-ui-input:selected,
input:checked,
input:focus,
input:focus-within,
input:hover,
input:invalid,
input:selected {
  background-color: var(--satisfactory-ui--color--button-background--hover);
  border: 1px solid var(--satisfactory-ui--theme--ficsit-orange);
  box-shadow: none;
  color: var(--satisfactory-ui--theme--ficsit-orange--contrast-text)
}
.mw-ui-button:focus,
.mw-ui-button:focus-within,
.mw-ui-button:hover,
.navbox-group > a:first-child:last-child:focus,
.navbox-group > a:first-child:last-child:focus-within,
.navbox-group > a:first-child:last-child:hover {
  animation: background-position-slide 1s linear 0s 1 normal forwards;
  background: var(--satisfactory-ui--color--button-background--hover);
  background-image: linear-gradient(135deg,#e69649 35%,#ecae73 0,#ecae73 65%,#e69649 0);
  background-repeat: no-repeat
}
#mw-head {
  left: calc(var(--satisfactory-wiki--sidebar-width) + var(--satisfactory-wiki--margin))
}
.content-body {
  margin-top: var(--satisfactory-wiki--header-navigation-height)
}
div#mw-panel {
  background: var(--satisfactory-ui-color--vertical-tabbing-background);
  padding: 0;
  width: var(--satisfactory-wiki--sidebar-width)
}
div#mw-panel div.portal div.body ul li a,
div#mw-panel div.portal div.body ul li a:link,
div#mw-panel div.portal div.body ul li a:visited,
div#mw-panel div.portal h3,
div#mw-panel div.portal h3 a,
div#mw-panel.collapsible-nav .portal h3 a,
div#mw-panel.collapsible-nav .portal.collapsed h3,
div#mw-panel.collapsible-nav .portal.collapsed h3 a,
div#mw-panel.collapsible-nav a:visited {
  color: #fff
}
div#mw-panel .portal div.body ul li,
div#mw-panel.collapsible-nav .portal div.body ul li {
  padding: 0
}
div#mw-panel div.portal {
  margin-bottom: 0
}
div#mw-panel div.portal.collapsed,
div#mw-panel div.portal:not(#p-claimWiki):not(#p-socialProfiles):not(#p-sitePromos) {
  background: 0 0;
  border-radius: 0
}
div#mw-panel div.portal div.body ul li a {
  margin-left: 0
}
div#mw-panel div.portal div.body ul li a:focus,
div#mw-panel div.portal div.body ul li a:focus-within,
div#mw-panel div.portal div.body ul li a:hover {
  color: var(--satisfactory-ui-color--vertical-tabbing-tab--hover--text)
}
div#mw-panel div.portal div.body ul li a:focus > span,
div#mw-panel div.portal div.body ul li a:focus-within > span,
div#mw-panel div.portal div.body ul li a:hover > span {
  background: var(--satisfactory-ui-color--vertical-tabbing-tab--hover)
}
div#mw-panel div.portal div.body ul li a > span {
  display: block;
  padding: var(--satisfactory-wiki--margin)
}
div#mw-panel div.portal h3:not(#p-socialProfiles-label):not(#p-sitePromos-label) {
  border-bottom: none;
  padding: 0
}
div#mw-panel div.portal h3:not(#p-socialProfiles-label):not(#p-sitePromos-label) > span {
  display: block;
  padding: var(--satisfactory-wiki--margin);
  text-align: left
}
div#mw-panel .portal div.body ul,
div#mw-panel.collapsible-nav .portal div.body ul {
  margin-bottom: 0;
  margin-right: 0
}
#mw-panel .vector-menu-portal {
  margin: 0;
  padding: 0
}
#mw-panel .vector-menu-portal .vector-menu-content {
  margin-left: 0;
  padding: 0
}
#mw-panel .vector-menu-portal .vector-menu-content ul {
  padding-top: 0
}
#mw-panel .vector-menu-portal .vector-menu-heading {
  background: 0 0;
  margin: 0
}
#mw-panel .vector-menu-portal .vector-menu-heading-label {
  background: var(--satisfactory-ui-color--vertical-tabbing-tab);
  display: block
}
.vector-menu-tabs-legacy {
  height: var(--satisfactory-wiki--header-navigation-height)
}
#footer,
.mw-body {
  margin-left: calc(var(--satisfactory-wiki--sidebar-width) + var(--satisfactory-wiki--margin))
}
div#content {
  padding-bottom: var(--satisfactory-wiki--margin);
  padding-left: var(--satisfactory-wiki--margin);
  padding-right: var(--satisfactory-wiki--margin);
  padding-top: 0
}
div#footer {
  padding: var(--satisfactory-wiki--margin)
}
#left-navigation {
  margin-left: var(--satisfactory-wiki--margin)
}
#fp-container {
  grid-column-gap: var(--satisfactory-wiki--margin);
  grid-row-gap: var(--satisfactory-wiki--margin)
}
.fpbox {
  display: flex;
  flex-direction: column;
  margin: 0
}
.fpbox:not(:first-child) {
  margin-top: var(--satisfactory-wiki--margin)
}
.fpbox .body {
  padding: var(--satisfactory-wiki--margin)!important
}
.mw-body,
.mw-footer,
.parsoid-body {
  margin-right: 0;
  padding: var(--satisfactory-wiki--margin)
}


/* shifting search bar to top */
/*
:root {
	--satisfactory-wiki--search-bar--width: 20vw ;
	--satisfactory-wiki--search-bar--min-width: 5em ;
	--satisfactory-wiki--search-bar--max-width: 20em ;
}
header#wikigg-header {
	padding-right: calc(1em + max(var(--satisfactory-wiki--search-bar--min-width), min(var(--satisfactory-wiki--search-bar--width), var(--satisfactory-wiki--search-bar--max-width)))) ;
	z-index: 1 ;
}
#p-search {
	position: fixed ;
	top: 3px ;
	right: 1em ;
	z-index: 200 ;
}
#p-search .vector-search-box-inner {
	min-width: var(--satisfactory-wiki--search-bar--min-width) ;
	max-width: var(--satisfactory-wiki--search-bar--max-width) ;
	width: var(--satisfactory-wiki--search-bar--max-width) ;
}
*/

/* test content for ondar https://satisfactory.wiki.gg/wiki/User:SignpostMarv/PioneerTest */
.pioneer-randomness-test-for-ondar
{
	display: flex ;
	width: 256px ;
	height: 256px ;
	overflow: hidden ;
}
}