MediaWiki:Common.css

From Wiki of ZZT
Revision as of 07:55, 15 February 2021 by Quantum (talk | contribs) (Add WIP styles for byte layout diagram)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */

@font-face {
	font-family: "EGA8";
	src: url("/w/images/a/ae/Web437_IBM_EGA_8x14.woff") format("woff");
}

.blinking {
	animation: 2.5s linear infinite blinking_text;
}
@keyframes blinking_text {
	35% {
		opacity: 100%;
	}
	45% {
		opacity: 0%;
	}
	55% {
		opacity: 0%;
	}
	65% {
		opacity: 100%;
	}
}


/* Navbox CSS */
.navbox {
	width: 100%;
	border: 1px solid #aaa;
	box-sizing: border-box;
	margin: 1em 0;
}
.navbox .title th {
	background: #B6CEE7;
}
.navbox .group th {
	background: #DBE7F3;
	padding-left: 1em;
	padding-right: 1em;
}
.navbox .group td {
	padding-left: 0.5em;
	padding-right: 0.5em;
	width: 100%;
}
.navbox .group:nth-child(2n+1) td {
	background: #f5f5f5;
}

/* Style lists as dot-separated items */
.navbox ul {
	margin: 0;
}
.navbox li {
	display: inline;
}
.navbox li:nth-child(n+2):before {
	content: " · ";
	font-weight: bold;
}

/* Experimental: styles for a future byte layout diagram*/
table.byte-layout {
  border-collapse: collapse;
}
table.byte-layout th, table.byte-layout td {
    padding: 5px;
}
table.byte-layout tr:first-child th {
  width: 50px;
}
table.byte-layout tr:nth-child(n+2) td {
  border: 1px solid black;
}
table.byte-layout .integer {
  background-color: #fcc;
}
table.byte-layout .byte {
  background-color: #f3e2d8;
}
table.byte-layout .literal {
  background-color: #cedbf5;
}
table.byte-layout .boolean {
  background-color: #def2dc;
}
table.byte-layout .pointer {
  background-color: #f4dcf2;
}
table.byte-layout .string {
  background: linear-gradient(90deg, #b9dce4 0 50px, #dff1f0 50px 100%);
}
table.byte-layout .string-continued {
  background-color: #dff1f0;
}
table.byte-layout .padding {
  background-color: #c3c3c3;
}
table.byte-layout tr td.skip {
  background-color: inherit;
  text-align: center;
  border: 0px;
}