Template:Routemap/styles.css: Difference between revisions

Latest revision as of 19:32, 20 July 2024

/* {{pp-template}} */
/* container */
.RMbox {
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2);
}

.RMinline {
	float: none;
	width: 100%;
	margin: 0;
	border: none;
}

/* diagram table */
table.routemap {
	padding: 0;
	border: 0;
	border-collapse: collapse;
	background: transparent;
	white-space: nowrap;
	line-height: 1.2;
	margin: auto;
}

/* collapsible section tables */
table.routemap .RMcollapse {
	margin: 0;
	border-collapse: collapse;
	vertical-align: middle;
}

/* collapsible section row replacement tables */
table.routemap .RMreplace {
	margin: 0;
	border-collapse: collapse;
	vertical-align: middle;
	position: absolute;
	bottom: 0;
}

/* small text in side cells */
table.routemap .RMsi {
	display: inline; /* HTML Tidy forced the use of div instead of span */
	font-size: 90%;
}

/* icon row container */
table.routemap .RMir {
	padding: 0 !important;
}

/* first left cell */
table.routemap .RMl1 {
	padding: 0 3px !important;
	text-align: left;
}

/* first right cell */
table.routemap .RMr1 {
	padding: 0 3px !important;
	text-align: right;
}

/* main left cell */
table.routemap .RMl {
	padding: 0 !important;
	text-align: right;
}

/* main right cell */
table.routemap .RMr {
	padding: 0 !important;
	text-align: left;
}

/* leftmost cell */
table.routemap .RMl4 {
	padding: 0 3px 0 0 !important;
	text-align: left;
}

/* rightmost cell */
table.routemap .RMr4 {
	padding: 0 0 0 3px !important;
	text-align: right;
}

/* table rows */
table.routemap > tbody > tr {
	line-height: 1;
}

/* all table cells */
table.routemap > tbody > tr > td,
table.RMcollapse > tbody > tr > td,
table.RMreplace > tbody > tr > td{
	padding: 0;
	width: auto;
	vertical-align: middle;
	text-align: center;
}

/* icon row inline divs */
.RMir > div {
	display: inline-block;
	vertical-align: middle;
	padding: 0;
	height: 20px;
	min-height: 20px;
}

/* icons */
.RMir img {
	height: initial !important; /* Monobook uses !important */
	max-width: initial !important; /* Monobook uses !important */
}

/* overlap containers */
.RMir .RMov {
	position: relative;
}

/* overlap icons and text cells */
.RMir .RMov .RMic,
.RMir .RMov .RMtx {
	position: absolute;
	left: 0;
	top: 0;
	padding: 0;
}

/* text cells */
.RMir .RMtx {
	line-height: 20px;
	height: 20px;
	min-height: 20px;
	vertical-align: middle;
	text-align: center;
}

/* empty cells */
.RMir .RMsp {
	height: 20px;
	min-height: 20px;
}

/* text in text cells */
.RMir .RMtx > abbr,
.RMir .RMtx > div {
	line-height: .975;
	display: inline-block;
	vertical-align: middle;
}

/* small text */
.RMir .RMts {
	font-size: 90%;
	transform: scaleX(.89);
}

/* filler cells */
.RMir .RMf_ {
	height: 5px;
	min-height: 5px;
	width: 20px;
	min-width: 20px;
}

/* "line" in filler cells */
.RMir .RMfm {
	height: 100%;
	min-height: 100%;
	width: 4px;
	min-width: 4px;
	margin: 0 auto;
}

/* widths */
.RMir .RMo{width:2.5px;min-width:2.5px}
.RMir .RMc{width:5px;min-width:5px}
.RMir .RMoc{width:7.5px;min-width:7.5px}
.RMir .RMd{width:10px;min-width:10px}
.RMir .RMod{width:12.5px;min-width:12.5px}
.RMir .RMcd{width:15px;min-width:15px}
.RMir .RMocd{width:17.5px;min-width:17.5px}
.RMir .RM_{width:20px;min-width:20px}
.RMir .RM_o{width:22.5px;min-width:22.5px}
.RMir .RM_c{width:25px;min-width:25px}
.RMir .RM_oc{width:27.5px;min-width:27.5px}
.RMir .RM_d{width:30px;min-width:30px}
.RMir .RM_od{width:32.5px;min-width:32.5px}
.RMir .RM_cd{width:35px;min-width:35px}
.RMir .RM_ocd{width:37.5px;min-width:37.5px}
.RMir .RMb{width:40px;min-width:40px}
.RMir .RMcb{width:45px;min-width:45px}
.RMir .RMdb{width:50px;min-width:50px}
.RMir .RMcdb{width:55px;min-width:55px}
.RMir .RM_b{width:60px;min-width:60px}
.RMir .RM_cb{width:65px;min-width:65px}
.RMir .RM_db{width:70px;min-width:70px}
.RMir .RM_cdb{width:75px;min-width:75px}
.RMir .RMs{width:80px;min-width:80px}
.RMir .RMds{width:90px;min-width:90px}
.RMir .RM_s{width:100px;min-width:100px}
.RMir .RM_ds{width:110px;min-width:110px}
.RMir .RMbs{width:120px;min-width:120px}
.RMir .RMdbs{width:130px;min-width:130px}
.RMir .RM_bs{width:140px;min-width:140px}
.RMir .RM_dbs{width:150px;min-width:150px}
.RMir .RMw{width:160px;min-width:160px}
.RMir .RM_w{width:180px;min-width:180px}
.RMir .RMbw{width:200px;min-width:200px}
.RMir .RM_bw{width:220px;min-width:220px}
.RMir .RMsw{width:240px;min-width:240px}
.RMir .RM_sw{width:260px;min-width:260px}
.RMir .RMbsw{width:280px;min-width:280px}
.RMir .RM_bsw{width:300px;min-width:300px}

/* BSsplit, BSto, BScvt, BSsrws */
.RMsplit {
	font-weight: inherit;
	color: inherit;
	background: transparent;
	margin-top: -3px;
	margin-bottom: -3px;
	width: initial !important;
	box-sizing: initial;
	display: inline-table;
	vertical-align: middle;
}

/* BSsplit, etc., when used in main left cell or main right cell */
table.routemap .RMl > .RMsplit,
table.routemap .RMr > .RMsplit {
	font-size: 90%;
}

@media screen {
	html.skin-theme-clientpref-night .RMbox {
	    background: inherit !important;
	    color: white;
	}
	
	html.skin-theme-clientpref-night .RMbox img {
	    filter: contrast(0.4);
	}
	
	html.skin-theme-clientpref-night .navbar-brackets a abbr {
	    color: white !important;
	}
	
	html.skin-theme-clientpref-night .RMbox th {
	    background: inherit !important;
	    color: inherit !important;
	    border-bottom: solid 1px #be2d2c;
	}
	
	html.skin-theme-clientpref-night .RMbox small {
	    color: white;
	}
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .RMbox img {
    filter: contrast(0.4);
  }
  html.skin-theme-clientpref-os .navbar-brackets a abbr {
    color: white !important;
  }
  html.skin-theme-clientpref-os .RMbox {
    background: inherit !important;
    color: white;
  }

  html.skin-theme-clientpref-os .RMbox th {
    background: inherit !important;
    color: inherit !important;
    border-bottom: solid 1px #be2d2c;
  }

  html.skin-theme-clientpref-os .RMbox small {
    color: white;
  }
}