@import 'hint';
$darkBlue: #252839; $darkGray: #677077; $lightGray: b5b5b7; $darkYellow: f2b632; $monospace: Ricty, Consolas, 'Courier New', Courier, Monaco, monospace;
-
{ box-sizing: border-box; font-size: 100%;
}
html, body {
font-size: 12px; position: relative; margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background-color: $darkBlue; font-family: $monospace;
}
// Classes
.clearfix:after {
content: ""; display: block; clear: both;
}
.duration-ms {
position: absolute; top: 50%; right: 20px; margin-top: -.6em; font-weight: normal; background-color: rgba(0, 0, 0, .3); color: #fff; line-height: 1; padding: 0.2em 10px; border-radius: 2px;
}
- class^=“icon-”
-
{
margin-right: 5px; vertical-align: baseline; font-size: 120%;
}
report {
position: relative; background-color: #efefef; color: $darkBlue; line-height: 36px; height: 36px; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); z-index: 10; h1 { position: relative; margin: 0 300px 0 0; padding: 0 20px; } .tabs { position: absolute; top: 0; right: 0; line-height: 28px; & > a { display: inline-block; padding: 4px 20px 0 20px; text-decoration: none; color: $darkBlue; width: 150px; text-align: center; border-bottom: 4px solid transparent; transition: border-bottom-color .2s ease-in-out; &.active { border-bottom-color: lighten($darkBlue, 20%); } } }
}
events, sources {
position: absolute; top: 36px; left: 0; right: 0; bottom: 0; &.active { z-index: 1; }
}
events {
overflow-y: auto; background-color: #fff;
}
event-details {
.event { .event-info { margin: 20px; border: 1px solid $darkYellow; border-radius: 4px; overflow: hidden; &.closed { .icon-square-plus { display: inline-block; } .icon-square-minus { display: none; } .event-payload { display: none; } } .icon-square-plus { display: none; } .icon-square-minus { display: inline-block; } .event-name { position: relative; margin: 0; padding: 10px 10px; background-color: $darkYellow; a { display: block; color: #fff; text-decoration: none; } } .event-payload { table { margin: 0; width: 100%; border-collapse: collapse; td { padding: 10px 20px; border: 1px solid #ccc; border-width: 0 1px 1px 0; vertical-align: top; word-wrap: break-word; word-break: break-all; &:first-child { width: 150px; background-color: #efefef; } &:last-child { border-right-width: 0; } &.table { padding: 0; } } & tr:last-child > td { border-bottom-width: 0; } } } } } .event-children { padding-left: 20px; } .backtraces { margin: 0; padding: 0; list-style: none outside; .backtrace { a { display: block; color: inherit; text-decoration: none; .icon-fast-forward { margin-left: 10px; } } } }
}
sources {
background-color: $darkBlue;
}
source-list, source-code {
position: absolute; top: 0; bottom: 0; overflow-y: auto;
}
source-list {
left: 0; width: 300px; background-color: #fff; .source-link { border-bottom: 1px solid #ccc; &.focus { background-color: #eee; } a { display: block; padding: 10px 20px; color: $darkBlue; text-decoration: none; } .shortpath, .fullpath { display: block; } .shortpath { margin-bottom: 5px; } .fullpath { font-size: 9px; word-wrap: break-word; overflow-wrap: break-word; word-break: break-all; } }
}
source-code {
left: 300px; right: 0; overflow-x: hidden; .source { display: none; .filename { margin: 0; a { background-color: lighten($darkBlue, 20%); display: block; padding: 10px 20px; color: #fff; text-decoration: none; } } } .source-line { position: relative; margin: 0; padding: 0 0 0 400px; color: #fff; font-size: 14px; transition: all .2s ease-in-out; &.focus { color: $darkYellow; background-color: lighten($darkBlue, 20%); } .line-info { @extend .clearfix; position: absolute; width: 400px; top: 0; left: 0; } .line-info div { float: left; text-align: right; } .line-info a { display: block; color: inherit; text-decoration: none; } .line-cpu, .line-wall, .line-allocs { width: 90px; } .line-calls { width: 60px; } .line-no { width: 70px; padding-right: 20px; } .line-code { margin: 0; padding: 0; width: 100%; font-family: $monospace; word-wrap: break-word; overflow-wrap: break-word; word-break: break-all; white-space: pre-wrap; } .line-info, .line-code { line-height: 2; } }
}