MediaWiki:Common.css: Difference between revisions
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/ | src: url("/w/images/a/ae/Web437_IBM_EGA_8x14.woff") format("woff"); | ||
} | } | ||
.blinking | .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; }