apple2js/js/components/debugger/css/Memory.module.scss
Will Scullin 9173bff1ba
Switch to scss, better scope rules (#170)
Restrict element types and global styling to improve embedability
2023-01-11 18:14:44 -08:00

155 lines
2.2 KiB
SCSS

.memory {
width: auto;
box-sizing: border-box;
}
.bank {
width: 128px;
border-right: 1px solid #000;
}
.bank,
.bank div,
.io,
.rom,
.intcxrom {
text-align: center;
justify-content: center;
}
.upperMemory {
height: 96px;
width: 385px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-top: 1px solid #000;
}
.upperMemory .bank {
height: 96px;
}
.rom {
display: flex;
align-items: center;
height: 96px;
width: 128px;
}
.intcxrom {
display: flex;
align-items: center;
height: 32px;
width: 128px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
.languageCard {
width: 256px;
height: 96px;
border: 1px solid #000;
}
.lc {
display: flex;
align-items: center;
position: relative;
width: 127px;
height: 63px;
}
.lcbanks {
width: 127px;
display: flex;
flex-direction: row;
}
.lcbank {
display: flex;
align-items: center;
width: 64px;
height: 31px;
border-top: 1px solid #000;
}
.lcbank0 {
border-right: 1px solid #000;
}
.io {
display: flex;
align-items: center;
width: 255px;
height: 32px;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
.hires {
display: flex;
align-items: center;
height: 64px;
width: 127px;
position: absolute;
bottom: 64px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.text {
display: flex;
align-items: center;
height: 16px;
width: 127px;
position: absolute;
bottom: 24px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.zp {
display: flex;
align-items: center;
height: 16px;
width: 127px;
position: absolute;
bottom: 0;
border-top: 1px solid #000;
}
.lowerMemory {
border-left: 1px solid #000;
border-bottom: 1px solid #000;
width: 256px;
}
.lowerMemory .bank {
height: 256px;
position: relative;
}
.read {
background-color: #8f8;
}
.write {
background-color: #f88;
}
.read.write {
background-color: #88f;
}
.inactive {
background-color: #bbb;
}
.legend {
width: 1em;
height: 1em;
display: inline-block;
border: 1px solid #000;
}