mirror of
https://github.com/pkimpel/retro-220.git
synced 2026-04-10 14:49:05 +00:00
67958aa65a
1. Rework Processor internal timing and throttling mechanism during I/O. 2. Revise Console statistics display, add instruction counter. 3. Correct (again) CFA/CFR instruction when sign is included in field. 4. Correct B-register modification of words during Cardatron and magnetic tape input. 5. Clear Processor alarms on Reset/Transfer. 6. Add links to wiki on index and home pages. 7. Eliminate B220Util CSS class functions in favor of DOM classList methods. 8. Attempt to reproduce "Sundland Beige" color for the panels. 9. Correct formatting of tab stops for B220ConsolePrinter. 10. Reduce Whippet printer speed from 5000 to 1000 cps. 11. Reduce Console update frequency from every 50 to 100 ms; increase lamp glow update factor from 0.25 to 0.75. 12. Allow click of white button below console register lamps in addition to clicking the lamps themselves to toggle the lamp state. 13. Rework the way that white vertical bars are drawn on registers. 14. Allow B220PaperTapeReader to properly send sign-2 alphanumeric words with trailing spaces if the tape image file has been space-trimmed on the right. 15. Clear the paper tape reader view window when loading new tapes. 16. Revise yet again the setCallback() delay deviation adjustment algorithm.
587 lines
17 KiB
CSS
587 lines
17 KiB
CSS
/***********************************************************************
|
|
* retro-220/webUI B220Common.css
|
|
************************************************************************
|
|
* Copyright (c) 2017, Paul Kimpel.
|
|
* Licensed under the MIT License, see
|
|
* http://www.opensource.org/licenses/mit-license.php
|
|
************************************************************************
|
|
* Burroughs 220 Emulator common style sheet.
|
|
************************************************************************
|
|
* 2017-01-01 P.Kimpel
|
|
* Original version, split from retro-205/D205Common.css
|
|
***********************************************************************/
|
|
|
|
@font-face {
|
|
font-family: "DejaVuSansMonoBookWeb";
|
|
src: url("./resources/DejaVuSansMono-webfont.woff") format("woff"),
|
|
url("./resources/DejaVuSansMono-webfont.ttf") format("truetype");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "DejaVuSansWeb";
|
|
src: url("./resources/DejaVuSans-webfont.woff") format("woff"),
|
|
url("./resources/DejaVuSans-webfont.ttf") format("truetype");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "DejaVuSansWeb";
|
|
src: url("./resources/DejaVuSans-Bold-webfont.woff") format("woff"),
|
|
url("./resources/DejaVuSans-Bold-webfont.ttf") format("truetype");
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
}
|
|
|
|
HTML {
|
|
height: 100%}
|
|
|
|
BODY {
|
|
font-family: DejaVuSansWeb, sans-serif;
|
|
font-size: 10pt;
|
|
background-color: white;
|
|
color: black;
|
|
margin: 4px;
|
|
padding: 4px}
|
|
|
|
BODY.panelBody {
|
|
position: relative;
|
|
height: 100%;
|
|
font-size: 8pt;
|
|
margin: 0;
|
|
padding: 0}
|
|
|
|
BODY.deviceBody {
|
|
font-size: 7pt;
|
|
overflow: hidden;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #678; /* IBM 1950s blue-gray equipment color */
|
|
color: white}
|
|
|
|
H1 {
|
|
margin-top: 2em;
|
|
margin-bottom: 1em;
|
|
font-size: 14pt;
|
|
font-weight: bold}
|
|
|
|
IFRAME.paper {
|
|
font-family: DejaVuSansMonoBookWeb, monospace;
|
|
font-size: 8pt;
|
|
line-height: 120%;
|
|
color: black;
|
|
background-color: white}
|
|
|
|
PRE {
|
|
font-family: DejaVuSansMonoBookWeb, monospace}
|
|
PRE.paper {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
font-size: 8pt;
|
|
line-height: 120%}
|
|
|
|
INPUT[type=text] {
|
|
font-family: DejaVuSansMonoBookWeb, monospace;
|
|
font-size: 8pt}
|
|
|
|
DIV.paper {
|
|
font-family: DejaVuSansMonoBookWeb, monospace;
|
|
white-space: pre;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
font-size: 8pt;
|
|
line-height: 120%}
|
|
DIV.topOfForm {
|
|
page-break-before: always;
|
|
margin-top: 1px;
|
|
padding-top: 1px;
|
|
border-top: 1px dashed black}
|
|
|
|
DIV.caption {
|
|
position: absolute;
|
|
z-index: 1;
|
|
font-size: 5pt;
|
|
font-weight: bold;
|
|
line-height: 100%;
|
|
text-align: center}
|
|
|
|
DIV.lampBox {
|
|
position: absolute;
|
|
width: 22px;
|
|
height: 30px;
|
|
border-top: 1px solid #999;
|
|
border-left: 1px solid #999;
|
|
border-right: 1px solid #666;
|
|
border-bottom: 1px solid #666;
|
|
background-color: black}
|
|
|
|
DIV.lampButton {
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 6px;
|
|
bottom: 0;
|
|
border-radius: 2px;
|
|
border: 1px solid #CCC;
|
|
font-size: 6px;
|
|
line-height: 6px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
color: black;
|
|
background-color: white}
|
|
|
|
DIV.neonLamp {
|
|
position: absolute;
|
|
z-index: 1;
|
|
width: 16px;
|
|
height: 16px;
|
|
font-size: 4px;
|
|
border-radius: 50%;
|
|
background-image: radial-gradient(circle, #999, #333)}
|
|
DIV.neonLit1 {
|
|
background-image: radial-gradient(circle, #A85, #444)}
|
|
DIV.neonLit2 {
|
|
background-image: radial-gradient(circle, #B84, #555)}
|
|
DIV.neonLit3 {
|
|
background-image: radial-gradient(circle, #C83, #666)}
|
|
DIV.neonLit4 {
|
|
background-image: radial-gradient(circle, #D82, #777)}
|
|
DIV.neonLit5 {
|
|
background-image: radial-gradient(circle, #E91, #888)}
|
|
DIV.neonLit {
|
|
background-image: radial-gradient(circle, #F93, #F93, #999)}
|
|
|
|
DIV.neonLampTopCaption {
|
|
position: absolute;
|
|
width: 32px;
|
|
top: -13px;
|
|
left: -8px;
|
|
line-height: 100%;
|
|
font-size: 6px;
|
|
text-align: center}
|
|
DIV.neonLampBottomCaption {
|
|
position: absolute;
|
|
width: 32px;
|
|
bottom: -10px;
|
|
left: -8px;
|
|
font-size: 6px;
|
|
text-align: center}
|
|
|
|
DIV.lampCollar {
|
|
border: 2px solid #DDD}
|
|
|
|
DIV.whiteLamp {
|
|
position: absolute;
|
|
width: 24px;
|
|
height: 24px;
|
|
font-size: 4px;
|
|
border-radius: 50%;
|
|
background-image: radial-gradient(circle, #999, #333)}
|
|
DIV.whiteLit1 {
|
|
background-image: radial-gradient(circle, #AAA, #999, #444)}
|
|
DIV.whiteLit2 {
|
|
background-image: radial-gradient(circle, #BBB, #AAA, #555)}
|
|
DIV.whiteLit3 {
|
|
background-image: radial-gradient(circle, #CCC, #BBB, #666)}
|
|
DIV.whiteLit4 {
|
|
background-image: radial-gradient(circle, #DDD, #CCC, #777)}
|
|
DIV.whiteLit5 {
|
|
background-image: radial-gradient(circle, #EEE, #DDD, #888)}
|
|
DIV.whiteLit {
|
|
background-image: radial-gradient(circle, #FFF, #EEE, #999)}
|
|
|
|
DIV.redLamp {
|
|
position: absolute;
|
|
width: 24px;
|
|
height: 24px;
|
|
font-size: 4px;
|
|
border-radius: 50%;
|
|
background-image: radial-gradient(circle, #900, #300)}
|
|
DIV.redLit1 {
|
|
background-image: radial-gradient(circle, #A00, #900, #400)}
|
|
DIV.redLit2 {
|
|
background-image: radial-gradient(circle, #B00, #A00, #500)}
|
|
DIV.redLit3 {
|
|
background-image: radial-gradient(circle, #C00, #B00, #600)}
|
|
DIV.redLit4 {
|
|
background-image: radial-gradient(circle, #D00, #C00, #700)}
|
|
DIV.redLit5 {
|
|
background-image: radial-gradient(circle, #E00, #D00, #800)}
|
|
DIV.redLit {
|
|
background-image: radial-gradient(circle, #F00, #E00, #900)}
|
|
|
|
DIV.orangeLamp {
|
|
position: absolute;
|
|
width: 24px;
|
|
height: 24px;
|
|
font-size: 4px;
|
|
border-radius: 50%;
|
|
background-image: radial-gradient(circle, #960, #330)}
|
|
DIV.orangeLit1 {
|
|
background-image: radial-gradient(circle, #A63, #963, #430)}
|
|
DIV.orangeLit2 {
|
|
background-image: radial-gradient(circle, #B73, #A73, #540)}
|
|
DIV.orangeLit3 {
|
|
background-image: radial-gradient(circle, #C73, #B73, #640)}
|
|
DIV.orangeLit4 {
|
|
background-image: radial-gradient(circle, #D83, #C83, #750)}
|
|
DIV.orangeLit5 {
|
|
background-image: radial-gradient(circle, #E83, #D83, #850)}
|
|
DIV.orangeLit {
|
|
background-image: radial-gradient(circle, #F93, #E93, #960)}
|
|
|
|
DIV.blueLamp {
|
|
position: absolute;
|
|
width: 24px;
|
|
height: 24px;
|
|
font-size: 4px;
|
|
border-radius: 50%;
|
|
background-image: radial-gradient(circle, #009, #003)}
|
|
DIV.blueLit1 {
|
|
background-image: radial-gradient(circle, #11A, #006)}
|
|
DIV.blueLit2 {
|
|
background-image: radial-gradient(circle, #22B, #009)}
|
|
DIV.blueLit3 {
|
|
background-image: radial-gradient(circle, #33C, #00A)}
|
|
DIV.blueLit4 {
|
|
background-image: radial-gradient(circle, #55D, #00C)}
|
|
DIV.blueLit5 {
|
|
background-image: radial-gradient(circle, #77E, #00D)}
|
|
DIV.blueLit {
|
|
background-image: radial-gradient(circle, #99F, #00F)}
|
|
|
|
DIV.coloredLampTopCaption {
|
|
position: absolute;
|
|
width: 80px;
|
|
top: -13px;
|
|
left: -28px;
|
|
line-height: 100%;
|
|
font-size: 5pt;
|
|
font-weight: bold;
|
|
text-align: center}
|
|
DIV.coloredLampBottomCaption {
|
|
position: absolute;
|
|
width: 80px;
|
|
bottom: -15px;
|
|
left: -28px;
|
|
font-size: 5pt;
|
|
font-weight: bold;
|
|
text-align: center}
|
|
|
|
DIV.toggleSwitchTopCaption {
|
|
position: absolute;
|
|
width: 64px;
|
|
top: -13px;
|
|
left: -20px;
|
|
line-height: 100%;
|
|
font-size: 5pt;
|
|
font-weight: bold;
|
|
text-align: center}
|
|
DIV.toggleSwitchBottomCaption {
|
|
position: absolute;
|
|
width: 64px;
|
|
bottom: -15px;
|
|
left: -20px;
|
|
font-size: 5pt;
|
|
font-weight: bold;
|
|
text-align: center}
|
|
|
|
DIV.blackControlKnobTopCaption {
|
|
position: absolute;
|
|
width: 64px;
|
|
top: -13px;
|
|
left: -20px;
|
|
line-height: 100%;
|
|
font-size: 5pt;
|
|
font-weight: bold;
|
|
text-align: center}
|
|
DIV.blackControlKnobBottomCaption {
|
|
position: absolute;
|
|
width: 64px;
|
|
bottom: -15px;
|
|
left: -20px;
|
|
font-size: 5pt;
|
|
font-weight: bold;
|
|
text-align: center}
|
|
|
|
DIV.panelSurface {
|
|
position: absolute;
|
|
background-color: #EADAD1; /* was #D8C5BC; #E4DDCD; putty #EDEAE8; */
|
|
color: black}
|
|
|
|
DIV.panelRegister {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
color: white;
|
|
background-color: #333;
|
|
border-radius: 4px;
|
|
border-top: 3px solid #999;
|
|
border-left: 3px solid #999;
|
|
border-right: 3px solid #666;
|
|
border-bottom: 3px solid #666;
|
|
box-shadow: 3px 3px 2px #999;
|
|
font-size: 6px}
|
|
|
|
DIV.panelDiv {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
color: white;
|
|
background-color: #333;
|
|
border-radius: 4px;
|
|
border-top: 3px solid #999;
|
|
border-left: 3px solid #999;
|
|
border-right: 3px solid #666;
|
|
border-bottom: 3px solid #666;
|
|
box-shadow: 3px 3px 2px #999;
|
|
font-size: 6px}
|
|
|
|
DIV.panelCaption {
|
|
position: absolute;
|
|
z-index: 1;
|
|
text-align: center;
|
|
height: 5px;
|
|
font-size: 5pt;
|
|
border-left: 1px solid white;
|
|
border-right: 1px solid white;
|
|
border-top: 1px solid white}
|
|
|
|
DIV.boxCaption {
|
|
position: absolute;
|
|
z-index: 2;
|
|
width: 100%;
|
|
top: -12px;
|
|
left: -3px;
|
|
font-size: 8px;
|
|
text-align: center}
|
|
|
|
SPAN.panelSpan {
|
|
position: relative;
|
|
top: -1em;
|
|
font-size: 5pt;
|
|
font-weight: bold;
|
|
padding-left: 2px;
|
|
padding-right: 2px;
|
|
background-color: #246}
|
|
|
|
DIV.panelTopCaption {
|
|
position: absolute;
|
|
font-size: 7px;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
height: 7px;
|
|
top: 0.75em;
|
|
left: 4px;
|
|
right: 4px;
|
|
border-top: 2px solid #EADAD1;
|
|
color: #EADAD1}
|
|
|
|
SPAN.panelTopCaptionSpan {
|
|
position: relative;
|
|
top: -1em;
|
|
font-size: 7px;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
color: #EADAD1;
|
|
background-color: #333}
|
|
|
|
DIV.panelRegCaption {
|
|
position: absolute;
|
|
width: 22px;
|
|
height: 22px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
line-height: 18px;
|
|
border-top: 1px solid #999;
|
|
border-left: 1px solid #999;
|
|
border-right: 1px solid #666;
|
|
border-bottom: 1px solid #666;
|
|
color: white;
|
|
background-color: #333}
|
|
|
|
SPAN.panelRegSpan {
|
|
font-size: 18px;
|
|
vertical-align: middle}
|
|
|
|
DIV.panelRegSpacer {
|
|
position: absolute;
|
|
width: 22px;
|
|
height: 22px;
|
|
text-align: center;
|
|
font-size: 18pt;
|
|
font-weight: bold;
|
|
border-top: 1px solid #999;
|
|
border-left: 1px solid #999;
|
|
border-right: 1px solid #666;
|
|
border-bottom: 1px solid #666;
|
|
color: white;
|
|
background-color: #333}
|
|
|
|
DIV.panelRegClearBar {
|
|
position: absolute;
|
|
width: 22px;
|
|
top: 24px;
|
|
height: calc(100% - 48px);
|
|
border-top: 1px solid #999;
|
|
border-left: 1px solid #999;
|
|
border-right: 1px solid #666;
|
|
border-bottom: 1px solid #666;
|
|
color: black;
|
|
background-color: white}
|
|
|
|
DIV.greenButton1 {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 14px;
|
|
font-size: 4px;
|
|
background-image: radial-gradient(circle, #090, #0F0);
|
|
border-radius: 50%;
|
|
border: 10px solid #CCC}
|
|
DIV.redButton1 {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 14px;
|
|
font-size: 4px;
|
|
background-image: radial-gradient(circle, #C00, #E00, #F00);
|
|
border-radius: 50%;
|
|
border: 10px solid #CCC}
|
|
DIV.redButton2 {
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
font-size: 4px;
|
|
background-image: radial-gradient(circle, #C00, #E00, #F00);
|
|
border-radius: 50%;
|
|
border: 6px solid #CCC}
|
|
DIV.redButton3 {
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
font-size: 4px;
|
|
background-image: radial-gradient(circle, #C00, #E00, #F00);
|
|
border-radius: 50%;
|
|
border: 2px solid #CCC}
|
|
DIV.blackButton1 {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 14px;
|
|
font-size: 4px;
|
|
background-image: radial-gradient(circle, #333, #111, #000);
|
|
border-radius: 50%;
|
|
border: 10px solid #CCC}
|
|
DIV.blackButton3 {
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
font-size: 4px;
|
|
background-image: radial-gradient(circle, #333, #111, #000);
|
|
border-radius: 50%;
|
|
border: 2px solid #CCC}
|
|
|
|
CANVAS.blackControlKnob1 {
|
|
position: absolute;
|
|
width: 64px;
|
|
height: 64px;
|
|
font-size: 4px}
|
|
|
|
BUTTON {
|
|
font-family: DejaVuSansWeb, sans-serif;
|
|
font-size: 8pt;
|
|
font-weight: normal;
|
|
line-height: 120%;
|
|
width: 60px;
|
|
height: 40px;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
border: 1px solid #DDD;
|
|
border-radius: 4px}
|
|
|
|
BUTTON.plainButton {
|
|
position: absolute;
|
|
font-weight: bold;
|
|
width: auto;
|
|
height: 24px;
|
|
padding: 2px;
|
|
color: #EADAD1;
|
|
background-color: #999;
|
|
box-shadow: 3px 3px 2px #999;
|
|
border: 1px solid #DDD;
|
|
border-radius: 4px}
|
|
|
|
BUTTON.panelLabel {
|
|
position: absolute;
|
|
width: 32px;
|
|
height: 18px;
|
|
color: #EADAD1;
|
|
background-color: #333;
|
|
border-radius: 4px;
|
|
border: 1px solid #EADAD1;
|
|
line-height: 5px;
|
|
font-size: 5px;
|
|
font-weight: normal}
|
|
|
|
BUTTON.large {
|
|
font-family: DejaVuSansWeb, sans-serif;
|
|
font-size: 8pt;
|
|
font-weight: normal;
|
|
line-height: 120%;
|
|
width: 60px;
|
|
height: 40px;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
border: 1px solid #DDD;
|
|
border-radius: 4px}
|
|
|
|
BUTTON.greenButton {
|
|
background-image: radial-gradient(circle, #030, #060);
|
|
color: white}
|
|
|
|
BUTTON.redButton {
|
|
background-image: radial-gradient(circle, #600, #900);
|
|
color: white}
|
|
|
|
BUTTON.blackButton {
|
|
background-color: black;
|
|
color: #999}
|
|
|
|
BUTTON.blackLit {
|
|
color: white}
|
|
|
|
BUTTON.greenLit {
|
|
color: black;
|
|
background-image: radial-gradient(circle, #0F0, #0F0, #0C0)}
|
|
|
|
BUTTON.redLit {
|
|
color: black;
|
|
background-image: radial-gradient(circle, #F00, #F00, #C00)}
|
|
|
|
BUTTON.blackBorder {
|
|
border: 1px solid black}
|
|
|
|
BUTTON.silverBorder {
|
|
border: 1px solid #DDD}
|
|
|
|
.annunciator {
|
|
visibility: hidden;
|
|
white-space: nowrap;
|
|
font-family: DejaVuSansWeb, sans-serif;
|
|
font-size: 7pt;
|
|
line-height: 100%}
|
|
.annunciatorLit {
|
|
visibility: visible}
|
|
|
|
.bold {
|
|
font-weight: bold}
|
|
.center {
|
|
text-align: center}
|
|
.rj {
|
|
text-align: right}
|
|
.data {
|
|
font-family: DejaVuSansMonoBookWeb, monospace;
|
|
text-align: left}
|
|
.number {
|
|
font-family: DejaVuSansMonoBookWeb, monospace;
|
|
text-align: right}
|