8bitworkshop/css/ui.css

344 lines
6.8 KiB
CSS

.dbg_info {
font-size: 0.8em;
}
.gutter-offset {
width: 3em;
}
.gutter-bytes {
width: 6em;
}
.gutter-clock {
width: 0.5em;
}
.gutter-info {
width: 1em;
}
.tooltipbox {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltipbox .tooltiptext {
visibility: hidden;
width: 500px;
background-color: #660000;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 10;
/* <pre> tag wrap */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
}
.tooltipbox:hover .tooltiptext {
visibility: visible;
}
.tooltiperror {
color: #ff6666;
font-weight: bold;
}
.tooltiperrorline {
color:#ffcccc;
background-color:#660000;
}
.tooltipinfoline {
color:#ccccff;
background-color:#000066;
}
#controls_top {
position: absolute;
padding: 0.5em;
height:3em;
width:100%;
background-color:#999;
}
#notebook {
position:absolute;
top:3em;
bottom:0;
left:0;
right:0;
background-color: #666;
overflow: hidden;
}
#workspace {
background-color:#333;
width:50%;
}
div.editor {
line-height:1.25;
font-size:12pt;
}
div.memdump {
background-color: #333;
color: #66ff66;
white-space: pre;
margin-top: 20px auto 0;
font-family: "Andale Mono", "Menlo", "Lucida Console", monospace;
font-size: 10pt;
}
div.mem_info {
position: fixed;
left: 51%;
bottom: 10px;
background-color: #333;
color: #66ff66;
white-space: pre;
padding: 20px;
z-index: 12;
font-family: "Andale Mono", "Menlo", "Lucida Console", monospace;
font-size: 12pt;
-webkit-box-shadow: 3px 3px 5px rgba(0,0,0,.5);
-moz-box-shadow: 3px 3px 5px rgba(0,0,0,.5);
box-shadow: 3px 3px 5px rgba(0,0,0,.5);
}
div.mem_info a {
color: #99ff99;
font-weight: bold;
text-decoration: underline;
}
div.mem_info a:hover {
background-color: #333399;
cursor: pointer;
}
div.mem_info a.selected {
color: #ffffff;
}
.btn_group {
border-radius:6px;
padding:8px;
margin-left:8px;
background-color: #666;
}
.btn_group button {
padding-left:4px;
padding-right:4px;
padding-top:2px;
padding-bottom:2px;
}
.btn_label {
color: #ccc;
}
.btn_group.debug_group {
}
.btn_group.view_group {
}
.btn_active {
color: #33cc33;
}
.btn_stopped {
color: #ff9933;
}
.btn_recording {
color: #ff3333;
}
.seg_code { color: #ff9966; }
.seg_data { color: #66ff66; }
.seg_stack { color: #ffff66; }
.seg_unknown { color: #cccccc; }
span.hilite {
color: #ff66ff;
}
div.has-errors {
background-color: #ff6666 !important;
}
div.is-busy-unused {
background-color: #8888bb !important;
}
div.menu_div {
position: absolute;
width: 200px;
}
div.booklink {
position: fixed;
bottom: 0;
right: 0;
padding: 6px;
background-color: #ffffff;
display:none;
}
div.twitbtn {
position: fixed;
bottom: 0%;
right: 0%;
padding: 10px;
}
a.twitbtn {
color:#333399;
font-weight: bold;
}
a.dropdown-toggle {
color:#66ee66;
padding:3px;
}
/* http://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-missing */
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
.dropdown-submenu>a:after {
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}
div.emulator {
position:absolute;
right:0;
top:0;
width:50%;
height:100%;
background-color: #666;
margin-top: 20px auto 0;
}
div.emuoverlay {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
pointer-events:none;
}
div.emuscope {
background-color: #333;
pointer-events:auto;
}
div.emuspacer {
width:0;
}
/* has to be here b/c renders differently after first load if in inline style */
.emuvideo {
border-radius:20px;
border: 4px solid #222;
outline-color: #666;
padding: 30px;
background: #000;
margin-top:40px;
margin-left:7.5%;
margin-right:7.5%;
width: 85%;
pointer-events:auto;
}
canvas.pixelated {
image-rendering: optimizeSpeed; /* Older versions of FF */
image-rendering: -moz-crisp-edges; /* FF 6.0+ */
image-rendering: -webkit-optimize-contrast; /* Safari */
image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
image-rendering: pixelated; /* Awesome future-browsers */
-ms-interpolation-mode: nearest-neighbor; /* IE */
}
.palbtn {
width:2em;
height:2em;
border-style:none;
}
.palbtn .selected {
border-width:2px;
border-color:white;
border-style:dotted;
}
#javatari-screen canvas {
box-sizing: content-box;
}
#javatari-screen div {
box-sizing: content-box;
}
@font-face {
font-family: TinyFont;
src: url(04B_03__.TTF);
}
#booksMenuButton {
border-width:3px;
border-color:#99ff99;
background-color:#006600;
border-style:solid;
font-family: "Andale Mono", "Menlo", "Lucida Console", monospace;
}
.nav-tabs > li > a.tab {
line-height: 1.0;
}
.twitter-follow-button,
.twitter-follow-button:focus {
border-width:3px;
border-color:#9999ff;
background-color:#333399;
border-style:solid;
font-family: "Andale Mono", "Menlo", "Lucida Console", monospace;
color:#77aaaa;
padding:6px;
}
.twitter-follow-button:hover {
color:#99ffff;
}
.dropdown-item-checked::before {
position: absolute;
left: .4rem;
content: '\2713';
font-weight: 400;
}
div.replaydiv {
position:absolute;
padding:20px;
left:50%;
bottom:0;
width:50%;
background-color: #666;
}
.slider {
margin-left: 1em;
margin-right: 1em;
}
.gutter {
background-color: #555;
background-repeat: no-repeat;
background-position: 50%;
pointer-events:auto;
}
.gutter.gutter-vertical {
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
}
.gutter.gutter-horizontal {
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
height:100%;
}
div.markdown {
background-color: #fff;
width:94%;
margin:3%;
padding:1em;
}