Template:Deployment calendar event card/style.css

/**
 * 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-row th,
/* ensure same or higher specificity as used by wikitable */
.deploycal-eventcard-row tr > th {
  text-align: left;
}
.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:not( .deploycal-item-window-train ):not( .deploycal-item-window-backport ),
.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;
}

/**
 * Highlight train and backport windows
 */
.deploycal-item-window-train,
.deploycal-item-window-backport {
	height: 30px;
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-position: center right 0.4em;
}

.deploycal-item-window-train {
	background-color: rgba(221, 204, 255, 0.7) !important;
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/2/2c/BSicon_lDAMPF.svg");
}

.deploycal-item-window-backport {
	background-color: rgba(204, 221, 255, 0.7) !important;
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/ad/Octicons-tools-minor.svg");
}

/**
 * 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%;
	}
}

/* Hide block slugs in visual editor, they don't seem very useful for the Deployments page,
   and they cause content to shift visually when loading the editor */
.deploycal-eventcard-row + .ve-ce-branchNode-blockSlug:not( :last-child ) {
	display: none;
}