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; flex: 0 1 300px;

/* 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, .tpl-osproject-tile:active { border-color: #36c; outline: none; box-shadow: 0 1px 4px 0 rgba( 0, 0, 0, 0.25 ); }

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

.tpl-osproject-tile-links:before { float: right; content: "More information…"; color: #72777d; cursor: pointer; padding-left: 16px; background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/OOjs_UI_icon_caretDown.svg/24px-OOjs_UI_icon_caretDown.svg.png) 0 50% / 12px no-repeat; } .tpl-osproject-tile-links:hover:before { text-decoration: underline; }

.tpl-osproject-tile-links li, .tpl-osproject-tile:focus .tpl-osproject-tile-links:before, .tpl-osproject-tile:active .tpl-osproject-tile-links:before { display: none; } .tpl-osproject-tile:focus .tpl-osproject-tile-links li, .tpl-osproject-tile:active .tpl-osproject-tile-links li { display: list-item; list-style-position: inside; }

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