Module:Portal bar/styles.css

/* {{pp|small=y}} */
.portal-bar {
 font-size: 88%;
 font-weight: bold;
 display:flex;
 justify-content: center;
 align-items: baseline;
}

.portal-bar-bordered {
 padding: 0 2em;
 background-color: #fdfdfd;
 border: 1px solid #a2a9b1;
 clear: both;
 margin: 1em auto 0;
}

.portal-bar-related {
 font-size: 100%;
 justify-content: flex-start;
}

.portal-bar-unbordered {
 padding: 0 1.7em;
 margin-left: 0;
}

.portal-bar-header {
    margin: 0 1em 0 0.5em;
    flex: 0 0 auto;
    min-height: 24px;
}

.portal-bar-content {
 display:flex;
 flex-flow: row wrap;
 flex:0 1 auto;
 padding: 0.15em 0;
 column-gap: 1em;
 align-items: baseline;
 margin: 0;
 list-style: none;
}

.portal-bar-content-related {
 margin: 0;
 list-style: none;
}

.portal-bar-item {
 display:inline-block;
 margin:0.15em 0.2em;
 min-height:24px;
 line-height:24px;
}

@media screen and (max-width:768px) {
 .portal-bar {
  font-size: 88%;
  font-weight: bold;
  display:flex;
  flex-flow: column wrap;
  align-items: baseline;
 }
 
 .portal-bar-header {
  text-align: center;
  flex:0;
  padding-left: 0.5em;
  margin: 0 auto;
 }
 
 .portal-bar-related {
  font-size: 100%;
  align-items: flex-start;
 }

 .portal-bar-content {
  display:flex;
  flex-flow: row wrap;
  align-items: center;
  flex:0;
  column-gap: 1em;
  border-top: 1px solid #a2a9b1;
  margin: 0 auto;
  list-style: none;
 }
 
 .portal-bar-content-related {
  border-top: none;
  margin: 0;
  list-style: none;
 }
}

.navbox + link + .portal-bar,
.navbox + style + .portal-bar,
.navbox + link + .portal-bar-bordered,
.navbox + style + .portal-bar-bordered,
.sister-bar + link + .portal-bar,
.sister-bar + style + .portal-bar,
.portal-bar + .navbox-styles + .navbox,
.portal-bar + .navbox-styles + .sister-bar {
 margin-top: -1px;
}