Template:Deployment calendar event card/style.css
Appearance
/**
* General
*/
.deploycal-eventcard-row {
/* mimic .wikitable */
margin: 1em 0;
}
.deploycal-eventcard-when {
border: 1px solid var( --border-color-muted, #eaecf0 );
border-bottom-width: 0;
color: var( --color-base, #202122 );
background-color: var( --background-color-interactive-subtle, #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-what {
background: var( --background-color-neutral, #eaecf0 );
color: var( --color-base, #202122 );
border: inherit;
border-bottom-width: 0;
line-height: 1.4;
padding: 0.4em;
text-align: left;
}
.deploycal-eventcard-row th,
/* ensure same or higher specificity as used by wikitable */
.deploycal-eventcard-row tr > th {
text-align: left;
width: 0;
}
.deploycal-eventcard tr {
vertical-align: top;
}
.deploycal-eventcard tr th {
/* 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 var( --background-color-warning-subtle, #f8eaba );
background: var( --background-color-warning-subtle, #f8eaba );
outline: 2px solid var( --color-warning, #edab00 );
position: relative;
z-index: 2;
padding: 0.4em 0;
}
.deploycal-event-now .deploycal-eventcard-what,
.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 {
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");
}
/**
* Hide add button except for backports
*/
.deploycal-item-changes .add-button {
display: none;
float: right;
}
.deploycal-item-window-backport+tbody .deploycal-item-changes .add-button {
display: block;
}
/**
* 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;
}