View source for User:76561197970425841/sandbox/Template:Test/styles.css

.portable-infobox {
   width: 300px;
}
.portable-infobox.pi-theme-test .pi-background {
	background-color: #1a1e23;
}
.portable-infobox.pi-theme-test .pi-secondary-background {
    background-color: #21252a;
}

.portable-infobox.pi-theme-test .pi-secondary-font {
    color: orange;
}

.portable-infobox.pi-theme-test .pi-border-color {
    color: #c2c9d6;
}

.portable-infobox.pi-theme-test.pi-background {
    background-color: pink;
}

.portable-infobox.pi-theme-test .pi-section-navigation {
    background-color: cornflowerblue;
}

.portable-infobox.pi-theme-test .pi-section-label {
    color: red;
}

.portable-infobox.pi-theme-test .pi-section-tab.pi-section-active {
    background-color: green;
}

.portable-infobox.pi-theme-test .pi-section-tab {
    background-color: blue;
}

.pi-section-navigation.pi-theme-test .wds-tabs__wrapper{
	background-color: purple;
}

/*
.pi-section-navigation.pi-theme-test .wds-tabs {
	background-color: blue;
}

.pi-section-navigation.pi-theme-test .wds-tabs__tab {
	background-color: orange;
}

.pi-media-collection.pi-theme-test .wds-tab__content {
	background-color: green;
}
*/

.portable-infobox.pi-theme-test .pi-data {
    background-color: purple;
    color: white;
}

.portable-infobox.pi-theme-test .pi-group-head {
    background-color: yellow;
}

.portable-infobox.pi-theme-test .pi-group {
    background-color: green;
}

/** Portable infobox root
  --pi-background: #f8f9fa;
  --pi-secondary-background: #eaecf0;
  --pi-border-color: #a2a9b1;
  --pi-item-spacing: 5px 10px;
  --pi-margin: 15px;
  --pi-width: 270px;
/*
/** PI defaults
.portable-infobox {
  background:#f8f9fa;
  background:var(--pi-background);
  clear:right;
  float:right;
  font-size:0.85em;
  margin:0 0 15px 15px;
  margin:0 0 var(--pi-margin) var(--pi-margin);
  width:270px;
  width:var(--pi-width)
}
.portable-infobox .pi-border-color {
  border-color:#a2a9b1;
  border-color:var(--pi-border-color)
}
.portable-infobox .pi-secondary-background {
  background-color:#eaecf0;
  background-color:var(--pi-secondary-background)
}
.portable-infobox .pi-secondary-font {
  margin:0;
  padding:0
}
.portable-infobox .pi-item-spacing {
  padding:5px 10px;
  padding:var(--pi-item-spacing)
}
.portable-infobox .pi-title {
  border:0;
  margin:0;
  font-family:inherit;
  font-size:1.75em;
  line-height:1.5
}
.portable-infobox .pi-header {
  border:0;
  margin:0;
  font-family:inherit;
  font-size:1.2em;
  font-weight:bold;
  line-height:1.3
}
.portable-infobox .pi-media {
  margin:0;
  max-width:100%;
  text-align:center
}
.portable-infobox .pi-data-label {
  font-size:inherit;
  line-height:inherit;
  font-weight:bold
}
.portable-infobox .pi-data-value {
  flex-basis:200px;
  -webkit-flex-basis:200px;
  -moz-flex-basis:200px
}
*/