Template:OSProject/style.css
Appearance
.tpl-osproject-grid {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.tpl-osproject-tile {
background: #f8f9fa;
border: 1px solid #eaecf0;
padding: 1em 2em;
border-radius: 2px;
margin: 0 1em 1em 0;
box-sizing: border-box;
flex: 0 1 360px;
/* Make each tile a flex container so that we can control where the growth goes
* in this case, make the growth to the the tagline so that the links are always
* aligned at the bottom of each row's tiles.
*/
display: flex;
flex-flow: column;
justify-content: flex-start;
}
.tpl-osproject-tile:focus {
border-color: #36c;
outline: none;
box-shadow: 0 1px 4px 0 rgba( 0, 0, 0, 0.25 );
}
.tpl-osproject-tile:not(:focus) .tpl-osproject-tile-title,
.tpl-osproject-tile:not(:focus) .tpl-osproject-tile-tagline {
cursor: pointer;
}
.tpl-osproject-tile-title {
margin-top: 0;
line-height: 1;
display: block; /* override Minerva `.in-block` */
}
.tpl-osproject-tile-title a,
.tpl-osproject-tile-title a.external {
color: inherit;
}
.tpl-osproject-tile-title > span.mw-headline {
display: inline; /* override Minerva `.in-block > span` */
width: auto; /* override Minerva `.in-block .mw-headline` */
}
.tpl-osproject-tile-lang {
float: right;
}
.tpl-osproject-tile-lang em {
color: #72777d;
font-weight: normal;
font-style: normal;
}
.tpl-osproject-tile-lang em:before {
content: '(';
}
.tpl-osproject-tile-lang em:after {
content: ')';
}
.tpl-osproject-tile-tagline {
font-size: 1.2em;
line-height: 1.4;
flex-grow: 2;
}
.tpl-osproject-tile-links {
margin: 1em 0 0 0;
}
.tpl-osproject-tile-links li {
list-style-position: inside;
margin: 0 0 0.1em 0;
}
.tpl-osproject-tile-links li:first-child {
list-style: none;
}
.tpl-osproject-tile-links .tpl-osproject-tile-links-more {
color: #72777d;
cursor: pointer;
list-style: none;
margin-left: -4px;
padding-left: 20px;
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/OOjs_UI_icon_caretDown.svg/24px-OOjs_UI_icon_caretDown.svg.png) 4px 50% / 12px no-repeat;
}
.tpl-osproject-tile-links-more:hover {
text-decoration: underline;
background-color: #eaecf0;
color: #54595d;
}
.tpl-osproject-tile-links-more ~ li,
.tpl-osproject-tile:focus .tpl-osproject-tile-links-more,
html.ve-activated body .tpl-osproject-tile-links-more {
display: none;
}
.tpl-osproject-tile:focus .tpl-osproject-tile-links-more ~ li,
html.ve-activated body .tpl-osproject-tile-links-more ~ li {
display: list-item;
}
.tpl-osproject-screenreader {
display: block;
position: absolute !important;
clip: rect( 1px, 1px, 1px, 1px );
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
overflow: hidden;
}