Template:OSProject/style.css

.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; }