github.com/pkimpel.retro-220
1
0
Fork 0
mirror of https://github.com/pkimpel/retro-220.git synced 2026-01-11 23:52:46 +00:00
Code Issues Releases Wiki Activity
pkimpel.retro-220/webUI/B220Common.css
Paul Kimpel bca1b7881a Release emulator version 1.04. 
. Adjust (hopefully for the last time) the RGB code for the 220
Sundland Beige panel color: it's now #C5B1A0. This has been a really
difficult color to pin down.
. Implement Clear Memory button on Console; implement "hover captions"
for the Clear Memory and Load Card buttons.
. Implement current block-number display on magnetic tape panel.
. Implement "word index" counter on the B220MagTapeDrive panel to
indicate the tape position in terms of 11-digit 220 words.
. Implement Rewind and Unload buttons on the paper-tape reader.
. Implement "word index" counter on the B220PaperTapeReader panel.
. When a Cardatron or paper-tape reader encounters a sign=6 control
word, do not reschedule the Processor if it has been halted.
. Correct handling of reload-lockout in B220CardatronInput; change
method of reporting Cardatron end-of-I/O signal to the Processor.
. Correct this.pendingFinish timing race in B220CardatronOutput.
. Correct validation when loading tape images in B220MagTapeDrive so
that the drive will continue to be usable after an invalid image is
detected.
. Correct logic for spacing and searching magnetic tape blocks
backwards.
. Correct output of non-printing characters in B220PaperTapePunch.
. Correct handling of invalid tape image characters in
B220PaperTapeReader.
. Implement additional tracing for paper-tape and magnetic tape I/Os
(currently disabled).
2021-09-06 17:28:48 -07:00

592 lines
18 KiB
CSS
Raw Permalink Blame History

/***********************************************************************
* 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, #007, #003)}
DIV.blueLit1 {
background-image: radial-gradient(circle, #11A, #009, #006)}
DIV.blueLit2 {
background-image: radial-gradient(circle, #22B, #11A, #009)}
DIV.blueLit3 {
background-image: radial-gradient(circle, #33C, #22B, #00A)}
DIV.blueLit4 {
background-image: radial-gradient(circle, #55D, #44C, #00C)}
DIV.blueLit5 {
background-image: radial-gradient(circle, #77E, #55D, #00D)}
DIV.blueLit {
background-image: radial-gradient(circle, #99F, #77E, #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: #C5B1A0; /* Sundland Beige: was #E8D8C8; #EADAD1; #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.panelLabelHidden {
color: #333}
BUTTON.panelLabelHidden:hover {
color: #FF0}
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}
Reference in New Issue View Git Blame Copy Permalink