MediaWiki:Common.css: Difference between revisions

From Wiki of ZZT
Jump to navigation Jump to search
(Add preliminary navbox CSS)
(Add WIP styles for byte layout diagram)
 
(4 intermediate revisions by the same user not shown)
Line 27: Line 27:
/* Navbox CSS */
/* Navbox CSS */
.navbox {
.navbox {
  width: 100%;
width: 100%;
  border: 1px solid #aaa;
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;
}
}


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


.navbox tr:nth-child(n+2) th {
/* Experimental: styles for a future byte layout diagram*/
   background: #DBDBF3;
table.byte-layout {
  padding-left: 1em;
  border-collapse: collapse;
   padding-right: 1em;
}
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 {
.navbox td {
  background-color: #f3e2d8;
   padding-left: 0.5em;
}
   padding-right: 0.5em;
table.byte-layout .literal {
   width: 100%;
   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 {
.navbox tr:nth-child(2n+1) td {
   background-color: inherit;
   background: #f5f5f5;
  text-align: center;
  border: 0px;
}
}

Latest revision as of 07:55, 15 February 2021

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