1
0
mirror of https://github.com/pkimpel/retro-220.git synced 2026-01-13 15:18:24 +00:00
pkimpel.retro-220/webUI/B220ControlConsole.css
Paul Kimpel 654af4f683 Commit 220 emulator version 0.3c:
1. Rework magnetic tape drive implementation to use Promises; refactor and consolidate drive operation routines.
2. Implement remaining magnetic tape operations: MOW, MOR, MRD, MRR, MTS, MFS, MTC, MFC.
3. Implement better error status reporting in mag tape control MISC register.
4. Implement memory and Processor-state dump by clicking the Burroughs "meatball" logo.
5. Implement preliminary run-time statistics on Console.
6. Use Function.bind() to bind context in Processor and mag tape scripts.
2017-11-17 06:29:31 -08:00

632 lines
16 KiB
CSS

/***********************************************************************
* retro-220/webUI B220ControlConsole.css
************************************************************************
* Copyright (c) 2017, Paul Kimpel.
* Licensed under the MIT License, see
* http://www.opensource.org/licenses/mit-license.php
************************************************************************
* Burroughs 220 Emulator Control Console style sheet.
************************************************************************
* 2017-01-01 P.Kimpel
* Original version, from D205SupervisoryPanel.css
***********************************************************************/
#BurroughsLogo {
position: absolute;
left: 12px;
top: 6px;
height: 36px}
#BurroughsMeatball {
position: absolute;
left: 334px;
top: 6px;
height: 36px}
#B220Logo {
position: absolute;
top: 4px;
right: 12px;
height: 36px;
line-height: 36px;
font-family: Verdana, Arial, Helvetica, DejaVuSansWeb, san-serif;
font-size: 36px;
font-weight: bold}
#IntervalTimerResetCaption {
left: calc(50% - 206px);
bottom: 20px;
width: 120px;
text-align: right}
#IntervalTimerResetBtn {
position: absolute;
box-shadow: 3px 3px 2px #999;
bottom: 12px;
left: calc(50% - 80px)}
#IntervalTimer {
position: absolute;
bottom: 12px;
left: calc(50% - 42px);
width: 84px;
height: 18px;
font-size: 18px;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 18px;
border-top: 3px solid #666;
border-left: 3px solid #666;
border-right: 3px solid #333;
border-bottom: 3px solid #333;
box-shadow: 3px 3px 2px #999;
color: white;
background-color: black}
#PowerOffBtn {
box-shadow: 3px 3px 2px #999;
left: calc(50% + 64px);
bottom: 12px}
#PowerOffCaption {
left: calc(50% + 92px);
bottom: 20px}
#VersionDiv {
right: 150px;
bottom: 18px;
color: black}
#LeftPanelBtn {
width: 100px;
left: 12px;
bottom: 12px}
#RightPanelBtn {
width: 100px;
right: 12px;
bottom: 12px}
#ProcDelta {
position: absolute;
width: 64px;
text-align: right;
left: 120px;
bottom: 12px}
#ProcSlack {
position: absolute;
width: 64px;
text-align: right;
left: 190px;
bottom: 12px}
#ProcRun {
position: absolute;
width: 64px;
text-align: right;
left: 260px;
bottom: 12px}
#PanelSurface {
height: 100%;
width: 100%}
/***** Main Registers *****/
#ARegPanel {
left: 12px;
top: 48px;
width: 312px;
height: 128px}
#RRegPanel {
left: calc(50% - 156px);
top: 48px;
width: 312px;
height: 128px}
#DRegPanel {
right: 12px;
top: 48px;
width: 312px;
height: 128px}
#BRegPanel {
left: 12px;
top: 208px;
width: 144px;
height: 128px}
#PRegPanel {
left: 180px;
top: 208px;
width: 144px;
height: 128px}
#CRegPanel {
left: calc(50% - 144px);
top: 208px;
width: 288px;
height: 128px}
#ERegPanel {
right: 180px;
top: 208px;
width: 144px;
height: 128px}
#SRegPanel {
right: 12px;
top: 208px;
width: 144px;
height: 128px}
/***** Alarm Panel *****/
#AlarmPanel {
left: 12px;
top: 368px;
width: 382px;
height: 64px}
#AlarmCaption {
position: absolute;
left: 0;
width: 268px}
#NotReadyCaption {
position: absolute;
left: 266px;
right: 0}
#DigitCheckLampLabel {
left: 4px;
top: 12px}
#DigitCheckLamp {
left: 6px;
top: 32px;
box-shadow: 3px 3px 2px #000}
#ProgramCheckLampLabel {
left: 42px;
top: 12px}
#ProgramCheckLamp {
left: 44px;
top: 32px;
box-shadow: 3px 3px 2px #000}
#StorageLampLabel {
left: 80px;
top: 12px}
#StorageLamp {
left: 82px;
top: 32px;
box-shadow: 3px 3px 2px #000}
#MagneticTapeLampLabel {
left: 118px;
top: 12px}
#MagneticTapeLamp {
left: 120px;
top: 32px;
box-shadow: 3px 3px 2px #000}
#CardatronLampLabel {
left: 156px;
top: 12px}
#CardatronLamp {
left: 158px;
top: 32px;
box-shadow: 3px 3px 2px #000}
#PaperTapeLampLabel {
left: 194px;
top: 12px}
#PaperTapeLamp {
left: 196px;
top: 32px;
box-shadow: 3px 3px 2px #000}
#HighSpeedPrinterLampLabel {
left: 232px;
top: 12px}
#HighSpeedPrinterLamp {
left: 234px;
top: 32px;
box-shadow: 3px 3px 2px #000}
#Blank1LampLabel {
left: 270px;
top: 12px}
#SystemNotReadyLampLabel {
left: 308px;
top: 12px}
#SystemNotReadyLamp {
left: 310px;
top: 32px;
box-shadow: 3px 3px 2px #000}
#ComputerNotReadyLampLabel {
left: 346px;
top: 12px}
#ComputerNotReadyLamp {
left: 348px;
top: 32px;
box-shadow: 3px 3px 2px #000}
/***** Operation Panel *****/
#OperationPanel {
left: calc(50% - 77px);
top: 368px;
width: 154px;
height: 64px}
#OperationCaption {
position: absolute;
left: 0;
width: 268px}
#RunLampLabel {
left: 4px;
top: 12px}
#RunLamp {
left: 6px;
top: 32px;
box-shadow: 3px 3px 2px #000}
#FetchLampLabel {
left: 42px;
top: 12px}
#FetchLamp {
left: 44px;
top: 32px;
box-shadow: 3px 3px 2px #000}
#ExecuteLampLabel {
left: 80px;
top: 12px}
#ExecuteLamp {
left: 82px;
top: 32px;
box-shadow: 3px 3px 2px #000}
#Blank2LampLabel {
left: 118px;
top: 12px}
/***** Status Panel *****/
#StatusPanel {
right: 12px;
top: 368px;
width: 382px;
height: 64px}
#ComparisonCaption {
position: absolute;
left: 114px;
width: 116px}
#OverflowLampLabel {
left: 4px;
top: 12px}
#OverflowLamp {
left: 6px;
top: 32px;
box-shadow: 3px 3px 2px #000}
#RepeatLampLabel {
left: 42px;
top: 12px}
#RepeatLamp {
left: 44px;
top: 32px;
box-shadow: 3px 3px 2px #000}
#Blank3LampLabel {
left: 80px;
top: 12px}
#LowLampLabel {
left: 118px;
top: 12px}
#LowLamp {
left: 120px;
top: 32px;
box-shadow: 3px 3px 2px #000}
#EqualLampLabel {
left: 156px;
top: 12px}
#EqualLamp {
left: 158px;
top: 32px;
box-shadow: 3px 3px 2px #000}
#HighLampLabel {
left: 194px;
top: 12px}
#HighLamp {
left: 196px;
top: 32px;
box-shadow: 3px 3px 2px #000}
#Blank4LampLabel {
left: 232px;
top: 12px}
#Blank5LampLabel {
left: 270px;
top: 12px}
#Blank6LampLabel {
left: 308px;
top: 12px}
#Blank7LampLabel {
left: 346px;
top: 12px}
/***** Control Switch Panel *****/
#ControlSwitchPanel {
left: 12px;
top: 464px;
width: 382px;
height: 80px}
#ControlSwitch1Label {
left: 4px;
top: 12px}
#ControlSwitch1 {
position: absolute;
left: 4px;
top: 40px;
height: 32px;
width: 32px}
#ControlSwitch2Label {
left: 42px;
top: 12px}
#ControlSwitch2 {
position: absolute;
left: 42px;
top: 40px;
height: 32px;
width: 32px}
#ControlSwitch3Label {
left: 80px;
top: 12px}
#ControlSwitch3 {
position: absolute;
left: 80px;
top: 40px;
height: 32px;
width: 32px}
#ControlSwitch4Label {
left: 118px;
top: 12px}
#ControlSwitch4 {
position: absolute;
left: 118px;
top: 40px;
height: 32px;
width: 32px}
#ControlSwitch5Label {
left: 156px;
top: 12px}
#ControlSwitch5 {
position: absolute;
left: 156px;
top: 40px;
height: 32px;
width: 32px}
#ControlSwitch6Label {
left: 194px;
top: 12px}
#ControlSwitch6 {
position: absolute;
left: 194px;
top: 40px;
height: 32px;
width: 32px}
#ControlSwitch7Label {
left: 232px;
top: 12px}
#ControlSwitch7 {
position: absolute;
left: 232px;
top: 40px;
height: 32px;
width: 32px}
#ControlSwitch8Label {
left: 270px;
top: 12px}
#ControlSwitch8 {
position: absolute;
left: 270px;
top: 40px;
height: 32px;
width: 32px}
#ControlSwitch9Label {
left: 308px;
top: 12px}
#ControlSwitch9 {
position: absolute;
left: 308px;
top: 40px;
height: 32px;
width: 32px}
#ControlSwitch10Label {
left: 346px;
top: 12px}
#ControlSwitch10 {
position: absolute;
left: 346px;
top: 40px;
height: 32px;
width: 32px}
/***** Operation Switch Panel *****/
#OperationSwitchPanel {
left: calc(50% - 77px);
top: 464px;
width: 154px;
height: 80px}
#StopSwitchLabel {
left: 4px;
top: 12px}
#StopSwitch {
position: absolute;
left: 4px;
top: 40px;
height: 32px;
width: 32px}
#StartSwitchLabel {
left: 42px;
top: 12px}
#StartSwitch {
position: absolute;
left: 42px;
top: 40px;
height: 32px;
width: 32px}
#StepSwitchLabel {
left: 80px;
top: 12px}
#StepSwitch {
position: absolute;
left: 80px;
top: 40px;
height: 32px;
width: 32px}
#ClearSwitchLabel {
left: 118px;
top: 12px}
#ClearSwitch {
position: absolute;
left: 118px;
top: 40px;
height: 32px;
width: 32px}
/***** Miscellaneous Switch Panel *****/
#MiscellaneousSwitchPanel {
right: 12px;
top: 464px;
width: 382px;
height: 80px}
#ProgramCheckingCaption {
position: absolute;
left: 114px;
width: 192px}
#Blank10SwitchLabel {
left: 4px;
top: 12px}
#Blank11SwitchLabel {
left: 42px;
top: 12px}
#Blank12SwitchLabel {
left: 80px;
top: 12px}
#KeyboardSwitchLabel {
left: 118px;
top: 12px}
#KeyboardSwitch {
position: absolute;
left: 118px;
top: 40px;
height: 32px;
width: 32px}
#SOnSwitchLabel {
left: 156px;
top: 12px}
#SOnSwitch {
position: absolute;
left: 156px;
top: 40px;
height: 32px;
width: 32px}
#UnitsSwitchLabel {
left: 194px;
top: 12px}
#UnitsSwitch {
position: absolute;
left: 194px;
top: 40px;
height: 32px;
width: 32px}
#SToPSwitchLabel {
left: 232px;
top: 12px}
#SToPSwitch {
position: absolute;
left: 232px;
top: 40px;
height: 32px;
width: 32px}
#SToCSwitchLabel {
left: 270px;
top: 12px}
#SToCSwitch {
position: absolute;
left: 270px;
top: 40px;
height: 32px;
width: 32px}
#ResetTransferSwitchLabel {
left: 308px;
top: 12px}
#ResetTransferSwitch {
position: absolute;
left: 308px;
top: 40px;
height: 32px;
width: 32px}
#TCUClearSwitchLabel {
left: 346px;
top: 12px}
#TCUClearSwitch {
position: absolute;
left: 346px;
top: 40px;
height: 32px;
width: 32px}
/***** Diagnostics Panel (DEBUG) *****/
#Diagnostics {
display: none}
#CallbackTable {
position: relative;
top: 1ex;
visibility: visible;
border-collapse: collapse;
border-spacing: 0}