debugger/static/style.css

// http://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links/3844452#3844452
:focus {
	outline: none;
}
::-moz-focus-inner {
	border: 0;
}

@keyframes pulsate {
	from { opacity: 1; }
	to { opacity: 0.25; }
}

#part-header {
	background: #444444;
	color: #ffffff;
	font: 24pt monospace;
	border-bottom: 2px solid #cccccc;
	padding: 20px 0px 20px 10px;
}

/* http://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
#part-middle {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;

	min-height: 800px;

	border-top: 1px solid #ffffff;
	padding: 8px;
	margin-top: 2px;
}
#left-area {
	flex: 0 0 11em;
	margin-right: 20px;
	margin-bottom: 10px;
}
#center-area {
	flex: 1 1 0;
	margin-bottom: 10px;
}
#right-area {
	flex: 0 0 40em;
	margin-left: 20px;
	margin-bottom: 10px;
}

#part-footer {
	clear: both;
	border-top: 2px solid #bbbbbb;
	background: #eeeeee;
	color: #555555;
	text-align: center;
	padding-top: 12px;
	padding-bottom: 12px;
	line-height: 1.5;
}

#exec-status {
	margin-top: 25px;
	margin-bottom: 25px;
}
#exec-state {
	display: inline-block;
	vertical-align: middle;
}
#exec-other {
	display: inline-block;
	vertical-align: middle;
	font-size: 125%;
}
#current-state {
	background: #228822;
	color: #ffffff;
	font: 16pt;
	padding: 6pt;
	border: 5px solid #228822;
	border-radius: 10px;
	font-size: 200%;
	font-weight: bold;
	margin-right: 10px;
}
#current-state.notrunning {
	background: #882222;
	border: 5px solid #882222;
	border-radius: 10px;
	animation: pulsate 0.7s cubic-bezier(0.75, 0, 0.75, 1) infinite alternate;
}
#exec-other:hover {
	text-decoration: underline;
	color: #9999ff;
}

#left-area button {
	display: inline-block;
	width: 100%;
	min-width: 8em;
	background: #226622;
	color: #ffffff;
	font: 16pt sans-serif;
	font-weight: bold;
	text-decoration: none;
	margin: 10px 0 0 0;
	padding: 0.4em;
	border: 2px solid #000000;
	border-radius: 4px;
}
#left-area button a {
	color: #ffffff;
	text-decoration: none;
}
#left-area button:hover {
	background: #55aa55;
}
#left-area button:disabled {
	background: #555555;
	color: #888888;
}
#left-area button:disabled a {
	background: #555555;
	color: #888888;
}

#pause-button.pending {
	background: #5555ff;
	animation: pulsate 0.2s cubic-bezier(0.75, 0, 0.75, 1) infinite alternate;
}

#attach-button {
}
#attach-button.enabled {
	animation: pulsate 0.7s cubic-bezier(0.75, 0, 0.75, 1) infinite alternate;
}

.duktape-exec-line {
	outline: 2px solid red;
	background: #550000;
}
.duktape-break-line {
	outline: 2px solid white;
}

#output {
	font: 9pt monospace;
	color: #000000;
	border: 2px solid #cccccc;
	border-radius: 5px;
	padding: 3px;
	height: 30ex;
	overflow: scroll;
	overflow-x: auto;
	overflow-y: scroll;
	white-space: pre;
}
#output .alert {
	color: #ff0000;
}
/* Default color (should be overridden by level) */
#output .log {
	color: #00ff00;
}
/* Trace */
#output .loglevel0 {
	color: #cccccc;
}
/* Debug */
#output .loglevel1 {
	color: #cccccc;
}
/* Info */
#output .loglevel2 {
	color: #888888;
	font-weight: bold;
}
/* Warn */
#output .loglevel3 {
	color: #ff4444;
	font-weight: bold;
}
/* Error */
#output .loglevel4 {
	color: #ff0000;
	font-weight: bold;
}
/* Fatal */
#output .loglevel5 {
	background: #000000;
	color: #ff0000;
	font-weight: bold;
}
#output .debugger-info {
	color: #880000;
	font-weight: bold;
	font-style: italic;
}
#output .debugger-debug {
	color: #888888;
	font-weight: bold;
	font-style: italic;
}

#callstack {
	font: 9pt monospace;
	color: #000000;
	margin-top: 10px;
	border: 2px solid #cccccc;
	border-radius: 5px;
	padding: 3px;
	height: 14ex;
	overflow: scroll;
	overflow-x: auto;
	overflow-y: scroll;
	white-space: pre;
}
#callstack div:nth-child(2n) {
	background: #eeeeee;
}
#callstack .func {
}
#callstack .rest {
	float: right;
	color: #6666ff;
}
#callstack .rest:hover {
	text-decoration: underline;
	color: #9999ff;
}

#locals {
	font: 9pt monospace;
	color: #000000;
	margin-top: 10px;
	border: 2px solid #cccccc;
	border-radius: 5px;
	padding: 10px;
	height: 30ex;
	overflow: scroll;
	overflow-x: auto;
	overflow-y: scroll;
	white-space: pre;
}
#locals div:nth-child(2n) {
	background: #eeeeee;
}
#locals .key {
}
#locals .value {
	float: right;
	color: #888888;
}

#breakpoints {
	color: #000000;
	margin-top: 10px;
	border: 2px solid #cccccc;
	border-radius: 5px;
	padding: 3px;
	height: 15ex;
	overflow: scroll;
	overflow-x: auto;
	overflow-y: scroll;
	white-space: pre;
}
#breakpoints div {
	margin: 2px 0 2px 0;
}
#breakpoints div:nth-child(2n) {
	background: #eeeeee;
}
#breakpoints a {
	font: 9pt monospace;
	color: #6666ff;
}
#breakpoints a:hover {
	text-decoration: underline;
	color: #9999ff;
}
.breakpoint-line {
	clear: both;
	padding-top: 2px;
	padding-bottom: 2px;
}
#add-breakpoint-file {
	font: 10pt monospace;
	width: 10em;
	padding: 5px;
}
#add-breakpoint-line {
	font: 10pt monospace;
	width: 3em;
	margin-left: 3px;
	padding: 5px;
}
#delete-all-breakpoints-button {
	float: right;
	font: 10pt sans-serif;
	padding: 5px;
	border: 1px solid #888888;
	background: #ddffdd;
	color: #000000;
}
#delete-all-breakpoints-button:hover {
	background: #f8fff8;
}
#delete-all-breakpoints-button:disabled {
	background: #dddddd;
	color: #444444;
}
#add-breakpoint-button {
	font: 10pt sans-serif;
	margin-left: 10px;
	padding: 5px;
	border: 1px solid #888888;
	background: #ddffdd;
	color: #000000;
}
#add-breakpoint-button:hover {
	background: #f8fff8;
}
#add-breakpoint-button:disabled {
	background: #dddddd;
	color: #444444;
}
#breakpoint-hint {
	color: #aaaaaa;
	font-style: italic;
	margin-left: 10px;
}
.delete-breakpoint-button {
	float: right;
	display: inline;
	font: 9pt sans-serif;
	padding: 3px;
	border: none;
	background: none;
	color: #6666ff;
}
.delete-breakpoint-button {
	font: 9pt sans-serif;
}
.delete-breakpoint-button:hover {
	text-decoration: underline;
	color: #9999ff;
}
.delete-breakpoint-button:disabled {
	color: #888888;
}

#about-dialog p {
	margin: 10px 0 10px 0;
}

#bytecode-dialog p {
	margin: 10px 0 10px 0;
}
#bytecode-dialog pre {
	font: 10pt monospace;
	color: #000000;
}
#bytecode-dialog div.highlight {
	background: #888888;
	color: #ffffff;
}

#eval {
	color: #000000;
	margin-top: 10px;
	border: 2px solid #cccccc;
	border-radius: 5px;
	padding: 3px;
	height: 30ex;
	overflow: scroll;
	overflow-x: auto;
	overflow-y: scroll;
	white-space: pre;
}
#eval-input {
	display: inline;
	font: 10pt monospace;
	width: 20em;
	padding: 5px;
}
#eval-button {
	display: inline;
	margin-left: 10px;
	padding: 5px;
	border: 1px solid #888888;
	font: 10pt sans-serif;
	background: #ddffdd;
	color: #000000;
}
#eval-button {
}
#eval-button:hover {
	background: #f8fff8;
}
#eval-button:disabled {
	background: #dddddd;
	color: #444444;
}
#eval-button.pending {
	background: #5555ff;
	animation: pulsate 0.2s cubic-bezier(0.75, 0, 0.75, 1) infinite alternate;
}
#eval-watch {
	margin-left: 20px;
	vertical-align: middle;
}
#eval-output {
	font: 10pt monospace;
	white-space: pre;
	padding: 5px;
	border: 1px solid #888888;
	min-height: 4ex;
	margin-top: 5px;
}

#varname-input {
	font: 10pt monospace;
	width: 10em;
	padding: 5px;
}
#varvalue-input {
	margin-left: 10px;
	font: 10pt monospace;
	width: 20em;
	padding: 5px;
}
#getvar-button,
#putvar-button {
	display: inline;
	float: right;
	margin-left: 10px;
	padding: 5px;
	border: 1px solid #888888;
	font: 10pt sans-serif;
	background: #ddffdd;
	color: #000000;
}
#getvar-button:hover,
#putvar-button:hover {
	background: #f8fff8;
}
#getvar-button:disabled,
#putvar-button:disabled {
	background: #dddddd;
	color: #444444;
}
#var-output {
	font: 10pt monospace;
	white-space: pre;
	padding: 5px;
	border: 1px solid #888888;
	min-height: 4ex;
	margin-top: 5px;
}

#source-pre {
	margin-top: 10px;
	border: 2px solid #cccccc;
	border-radius: 5px;
	height: 400px;
	overflow: scroll;
	overflow-x: auto;
	overflow-y: scroll;
}
#source-pre.running {
	background: #eeeeee;
	color: #888888;
}
#source-pre.running #source-code {
	background: #eeeeee;
	color: #888888;
}
#source-filename {
	font-size: 125%;
	color: #888888;
}
code.sourcecode {
	counter-reset: source-line;
}
code.sourcecode div {
	font: 10pt monospace;
	padding: 2px 5px 2px 5px;
	white-space: pre;
	border-bottom: 1px solid #eeeeee;
}
code.sourcecode div:before {
	display: inline-block;
	content: counter(source-line);
	counter-increment: source-line;
	width: 4em;
	color: #888888;
	text-align: right;
	margin-right: 20px;
}
code.sourcecode div.breakpoint:before {
	margin-right: 0px;
	border-right: 20px solid #ff0000;
}
code.sourcecode div.highlight {
	background: #aaaaaa;
	color: #000000;
}
code.sourcecode div.execution {
	background: #000000;
	color: #ffffff;
}

#source-select {
	margin-top: 5px;
}