Template:Main page/Collaboration of the month/styles.css

/* * Collaboration blocks on the main page. */

/* Styles for row */ .mp-collab__row { align-items: center; display: flex; }

/* Styles for article photos */ .mp-collab__article-photo { border-radius: 8px; flex: 0 auto; margin-right: 0.75rem; overflow: hidden; width: 64px; }

.mp-collab__article-photo > img { margin-left: 50%; transform: translateX(-50%); }

/* Styles for article text */ .mp-collab__article-text { flex: 1; }

/* Styles for size change result */ .mp-collab__result { flex: 1; margin-right: 1rem; padding-top: 0.75rem; }

.mp-collab__result-after { font-size: 1.25rem; }

.mp-collab__result-after > strong { color: #00796b; }

/* Styles for the chart */ .mp-collab__chart { align-self: flex-end; min-height: 5rem; line-height: 5rem; margin-top: -5rem; overflow: hidden; position: relative; text-align: center; width: 10rem; }

.mp-box .mp-collab__chart { /* See Template:Main page/box/styles.css */ margin-bottom: -0.5rem; }

@media (min-width: 640px) { /* See Template:Main page/box/styles.css */ .mp-box .mp-collab__chart { margin-bottom: -1.25rem; } }

.mp-collab__chart::before, .mp-collab__chart::after, .mp-collab__chart > span::before { /* Circles in the chart */ border-radius: 50%; bottom: -1em; content: ''; height: 2em; left: 5rem; margin-left: -1em; position: absolute; width: 2em; z-index: 1; }

.mp-collab__chart::before { /* Size change circle */ background: #1DE9B6; }

.mp-collab__chart::after { /* Chart boundaries */ box-shadow: inset 0 0 0 1px #c8ccd1; font-size: 5rem; z-index: 0; }

.mp-collab__chart > span::before { /* Page size before the start */ background: #00796b; opacity: 1; }

.mp-collab__chart > img { /* Check mark on the chart */ margin-top: 50%; transform: translateY(-50%); position: relative; z-index: 2; }