Module:Subject bar/styles.css

/* {{pp-template}} */

.subjectbar {

background-color: #f9f9f9;

border: 1px solid #aaa;

clear: both;

box-sizing: border-box;

font-size: 88%;

}

.subjectbar-row {

display: flex;

flex: 0 0 100%;

flex-direction: column;

}

.subjectbar-row:not(:last-child) {

border-bottom: 1px solid #aaa;

}

.subjectbar-heading {

align-items: center;

border-bottom: 1px solid #aaa;

display: flex;

flex: 0;

flex-direction: column;

justify-content: center;

min-width: 125px;

padding-left: 3px;

padding-right: 3px;

}

.subjectbar-cell {

display: flex;

flex: 0 auto;

flex-direction: row;

flex-wrap: wrap;

padding-bottom: 0.7em;

}

.subjectbar-item {

display: flex;

flex-direction: row;

margin: 0.7em 0 0 0.7em;

}

.subjectbar-item > div:first-child {

align-items: center;

display: flex;

flex: 0 1;

justify-content: center;

min-width: 30px;

}

.subjectbar-item > div:last-child {

display: flex;

flex: 1 0;

flex-direction: column;

margin-left: 0.5em;

justify-content: center;

width: 10em;

}

@media screen and (min-width:720px) {

.subjectbar-row {

flex-direction: row;

}

.subjectbar-heading {

align-items: flex-start;

border-bottom: 0;

border-right: 1px solid #aaa;

}

}