MediaWiki:Common.css: Difference between revisions

From Wiki of ZZT
Jump to navigation Jump to search
(Add a blinking effect that's somewhat less harsh than the actual thing)
(Add WIP styles for byte layout diagram)
 
(7 intermediate revisions by the same user not shown)
Line 3: Line 3:
@font-face {
@font-face {
font-family: "EGA8";
font-family: "EGA8";
src: url("/w/images/d/d7/Px437_IBM_EGA8.woff2") format("woff2");
src: url("/w/images/a/ae/Web437_IBM_EGA_8x14.woff") format("woff");
}
}


.blinking, #mw-sitecsspreview {
.blinking {
animation: 2.5s linear infinite blinking_text;
animation: 2.5s linear infinite blinking_text;
}
}
Line 22: Line 22:
opacity: 100%;
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;
}
}

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