You are browsing a read-only backup copy of Wikitech. The live site can be found at wikitech.wikimedia.org

Template:Deployment calendar event card/style.css

From Wikitech-static
< Template:Deployment calendar event card
Revision as of 00:15, 13 August 2021 by imported>Gergő Tisza (add styling for note field)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search
/**
 * General
 */
.deploycal-eventcard-row {
	/* mimic .wikitable */
	margin: 1em 0;
}
.deploycal-eventcard-when {
	border: 1px solid #eaecf0;
	border-bottom-width: 0;
	background-color: #f8f9fa;
	padding: 0.2em 0.4em;
}
.deploycal-starttime {
	font-weight: bold;
}
.deploycal-item-note {
	/* this is a separate table row but styled as part of the previous row */
	border-top-style: hidden;
    padding-top: 0;
}
/* "local" and "rel" are created dynamically by [[MediaWiki:Common.js]]. */
.deploycal-time-sf,
.deploycal-time-local,
.deploycal-time-rel {
	padding-left: 1em;
	white-space: nowrap;
}
.deploycal-time-local,
.deploycal-time-rel {
	font-style: italic;
}
.deploycal-eventcard {
	width: 100%;
	margin: 0;
}
.deploycal-eventcard tr:nth-child(n+2) th,
.deploycal-eventcard tr:nth-child(n+2) td {
	vertical-align: top;
	/* Reduce clutter, only bold the event title (deploycal-eventcard-what) */
	font-weight: normal;
}
/* Reduce clutter, collapse table cell and paragraph spacing */
.deploycal-eventcard th > p:first-child,
.deploycal-eventcard td > p:first-child {
	margin-top: 0;
}
.deploycal-eventcard th > p:last-child,
.deploycal-eventcard td > p:last-child {
	margin-bottom: 0;
}

/**
 * Past rows, de-emphasized
 */
.deploycal-event-past {
	opacity: 0.8;
}
.deploycal-event-past strong,
.deploycal-event-past b,
.deploycal-event-past th {
	font-weight: normal;
}

/**
 * Current row
 */
.deploycal-event-now {
	box-shadow: 0 0 10px 5px #f8eaba;
	background: #f8eaba;
	outline: 2px solid orange;
	position: relative;
	z-index: 2;
	padding: 0.4em 0;
}
.deploycal-event-now .deploycal-eventcard-when,
.deploycal-event-now table,
.deploycal-event-now th,
.deploycal-event-now td {
	background: transparent;
}
.deploycal-event-now .deploycal-eventcard-when,
.deploycal-event-now table {
	border: 0;
}
.deploycal-event-now tr:first-child th,
.deploycal-event-now tr:first-child td {
	border-top: 0;
}
.deploycal-event-now th:first-child,
.deploycal-event-now td:first-child {
	border-left: 0;
}
.deploycal-event-now th:last-child,
.deploycal-event-now td:last-child {
	border-right: 0;
}
.deploycal-event-now tr:last-child th,
.deploycal-event-now tr:last-child td {
	border-bottom: 0;
}

/**
 * Wide viewports
 */
@media screen and (min-width: 982px) {
	.deploycal-eventcard-when {
		box-sizing: border-box;
		width: 13em;
		margin-right: 1em;
		border-bottom-width: 1px;
	}
	.deploycal-eventcard-row {
		display: flex;
		align-items: flex-start;
	}
	.deploycal-eventcard {
		width: calc(100% - 14em);
	}
	/* Timeless skin has late JS code that wraps every table in two layers of DIVs,
	   with classes like "content-table". These break the flexbox layout and cause
	   the '100%-14em' width expression to basically be applied twice, making the
	   boxes very tiny. Workaround this...
	*/
	body.skin-timeless .deploycal-eventcard-row .content-table-wrapper {
		width: 100%;
	}
	body.skin-timeless .deploycal-eventcard-row .deploycal-eventcard {
		width: 100%;
	}
}