re-frame-10x/resources/day8/re_frame/trace/main.less

589 lines
11 KiB
Plaintext
Raw Normal View History

@background-blue: #e7f1ff;
@background-gray: #a8a8a8;
@background-gray-hint: #fafafa;
@dark-green: #008766;
@dark-gold: #A66900;
@dark-purple: #762cff;
@dark-blue: #284694;
@dark-gray: gray;
@dark-skyblue: #007CC2;
@medium-gray: #999;
2017-08-31 15:01:36 +00:00
@light-purple: #616cdb;
@light-blue: lightblue;
@light-gray: #efeef1;
@yellow: yellow;
2017-08-31 15:01:36 +00:00
@text-color: #222;
@text-color-muted: #8f8f8f;
2017-08-31 15:01:36 +00:00
#--re-frame-trace-- {
2017-08-30 16:21:15 +00:00
all: initial;
* {
all: unset;
}
2017-08-31 10:38:45 +00:00
/*! abridged from normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
2017-08-30 16:21:15 +00:00
2017-08-31 10:38:45 +00:00
line-height: 1.15;
2017-08-30 16:21:15 +00:00
div,
nav {
display: block;
}
pre {
2017-08-31 10:38:45 +00:00
font-family: monospace, monospace;
font-size: 1em;
2017-08-30 16:21:15 +00:00
}
/* Text-level semantics
========================================================================== */
2017-08-31 10:38:45 +00:00
a, a:visited {
2017-08-31 15:01:36 +00:00
color: @text-color;
2017-08-31 10:38:45 +00:00
border-bottom: 1px #333 dotted;
2017-08-30 16:21:15 +00:00
}
2017-08-31 10:38:45 +00:00
a:hover, a:focus {
border-bottom: 1px #666666 solid;
2017-08-30 16:21:15 +00:00
}
code {
2017-08-31 10:38:45 +00:00
font-family: monospace, monospace;
font-size: 1em;
2017-08-30 16:21:15 +00:00
}
small {
font-size: 80%;
}
2017-08-31 10:38:45 +00:00
// Prevent `sub` and `sup` elements from affecting the line height
2017-08-30 16:21:15 +00:00
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
img {
border-style: none;
}
/* Forms
========================================================================== */
option {
display: block;
}
button,
input,
optgroup,
select,
textarea {
2017-08-31 10:38:45 +00:00
font-family: "courier new", monospace;
font-size: 100%;
2017-08-31 13:41:50 +00:00
// line-height: 1.15;
padding: 3px 3px 1px 3px;
border: 1px solid @medium-gray;
2017-08-30 16:21:15 +00:00
}
2017-08-31 10:38:45 +00:00
button, // Show the overflow in IE.
input { // Show the overflow in Edge.
2017-08-30 16:21:15 +00:00
overflow: visible;
}
button,
select {
&:focus {
outline: @medium-gray dotted 1px;
}
}
2017-08-30 16:21:15 +00:00
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
2017-08-31 10:38:45 +00:00
// Restore the focus styles unset by the previous rule.
2017-08-30 16:21:15 +00:00
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
textarea {
2017-08-31 10:38:45 +00:00
overflow: auto; // Remove the default vertical scrollbar in IE.
2017-08-30 16:21:15 +00:00
}
[type="checkbox"],
[type="radio"] {
2017-08-31 10:38:45 +00:00
box-sizing: border-box; // IE 10-
2017-08-30 16:21:15 +00:00
}
2017-08-31 10:38:45 +00:00
// Correct the cursor style of increment and decrement buttons in Chrome.
2017-08-30 16:21:15 +00:00
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
2017-08-31 10:38:45 +00:00
-webkit-appearance: textfield; // Correct the odd appearance in Chrome and Safari.
outline-offset: -2px; // Correct the outline style in Safari.
2017-08-30 16:21:15 +00:00
}
::-webkit-file-upload-button {
2017-08-31 10:38:45 +00:00
-webkit-appearance: button; // Correct the inability to style clickable types in iOS and Safari.
2017-08-30 16:21:15 +00:00
}
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}
li {
2017-08-31 10:38:45 +00:00
display: block;
2017-08-30 16:21:15 +00:00
}
button {
2017-08-31 10:38:45 +00:00
overflow: visible;
border: 0;
-webkit-font-smoothing: inherit;
letter-spacing: inherit;
background: none;
cursor: pointer;
2017-08-30 16:21:15 +00:00
}
img {
2017-08-31 10:38:45 +00:00
max-width: 100%;
height: auto;
border: 0;
2017-08-30 16:21:15 +00:00
}
2017-08-31 10:38:45 +00:00
// tables
2017-08-30 16:21:15 +00:00
2017-08-31 10:38:45 +00:00
table,
thead,
tbody,
tfoot,
tr,
th,
td {
2017-08-30 16:21:15 +00:00
display: block;
width: auto;
height: auto;
margin: 0;
padding: 0;
border: none;
border-collapse: collapse;
border-spacing: 0;
border-color: inherit;
vertical-align: inherit;
text-align: left;
font-weight: inherit;
-webkit-border-horizontal-spacing: 0;
-webkit-border-vertical-spacing: 0;
2017-08-31 10:38:45 +00:00
}
table {
display: table;
2017-08-31 10:38:45 +00:00
}
2017-08-31 14:55:18 +00:00
th, td {
display: table-cell;
padding: 0 5px;
}
tr {
display: table-row;
}
2017-08-31 10:38:45 +00:00
thead {
display: table-header-group;
}
tbody {
display: table-row-group;
}
th, td {
display: table-cell;
}
tr {
display: table-row;
2017-08-31 10:38:45 +00:00
}
2017-08-30 16:21:15 +00:00
/* re-frame-trace styles
========================================================================== */
background: white;
font-family: 'courier new', monospace;
color: @text-color;
table {
width: 100%;
font-size: 14px;
}
tbody {
color: @text-color;
}
thead {
font-weight: bold;
}
tr {
th, td {
padding: 6px;
}
th:first-child {
text-align: right;
}
&.trace--trace {
}
&:nth-child(even) {
background: @background-gray-hint;
}
&.trace--sub-create {
.trace--op{
color: @dark-green;
}
}
&.trace--sub-run {
.trace--op{
color: @dark-purple;
}
}
&.trace--event {
.trace--op{
color: @dark-gold;
}
}
&.trace--render {
.trace--op{
color: @dark-skyblue;
}
}
&.trace--fsm-trigger {
.trace--op{
color: @dark-blue;
}
}
&.trace--details {
color: @text-color-muted;
&:hover,
&:focus {
color: darken(@text-color-muted, 20);
.trace--details-icon:before {
color: @text-color;
cursor: pointer;
content: "🖶";
}
}
&:focus {
.trace--details-tags-text {
border-left: 1px dotted @medium-gray;
padding-left: 7px;
}
}
}
td {
&.trace--toggle {
color: @background-gray;
padding: 0;
text-align: right;
button:focus {
color: @text-color;
outline: none;
}
}
&.trace--op {
color: @text-color-muted;
padding-left: 0;
white-space: nowrap;
}
&.trace--op-string {
word-break: break-all;
}
&.trace--details-tags {
padding: 0;
cursor: pointer;
.trace--details-tags-text {
padding: 8px 5px;
padding-left: 8px;
margin-bottom: 5px;
}
}
&.trace--meta {
color: @text-color-muted;
white-space: nowrap;
text-align: right;
}
.op-string {
cursor: pointer;
padding: 1px;
&:hover {
border-bottom: 1px dotted @light-purple;
padding-bottom: 0;
}
}
}
&:hover {
.trace--toggle {
color: @text-color;
}
}
th, td {
&:first-child {
padding-left: 7px;
}
&:last-child {
padding-right: 7px;
}
}
}
.button {
padding: 5px 5px 3px;
margin: 5px;
border-radius: 2px;
cursor: pointer;
}
.text-button {
border-bottom: 1px dotted #888;
font-weight: normal;
&:focus {
outline: @medium-gray dotted 1px;
}
}
.icon-button {
font-size: 10px;
}
button.tab {
}
.tab {
background: transparent;
border-radius: 0;
text-transform: uppercase;
font-family: monospace;
letter-spacing: 2px;
margin-bottom: 0;
padding-bottom: 4px;
vertical-align: bottom;
}
.tab.active {
background: transparent;
border-bottom: 3px solid @dark-gray;
border-radius: 0;
padding-bottom: 1px;
}
ul.filter-items {
list-style-type: none;
margin: 0 5px;
.filter-item {
color: @text-color-muted;
background: @background-gray-hint;
border: 1px solid @light-gray;
display: inline-block;
font-size: 0.9em;
margin: 10px 5px;
.filter-item-string {
color: @text-color;
background: @yellow;
}
&:hover {
text-decoration: line-through;
}
}
}
.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
.icon-remove {
margin-left: 10px;
}
.filter {
box-shadow: -7px 15px 6px -15px rgba(0, 0, 0, 0.3);
z-index: 1001;
.filter-control {
select {
border: none;
border-bottom: 1px solid @text-color-muted;
background: white;
display: inline-block;
font-family: 'courier new', monospace;
font-size: 1em;
padding: 2px 0 0 0;
-moz-appearance: menulist;
-webkit-appearance: menulist;
appearance: menulist;
}
.filter-control-input {
border-bottom: 1px solid @text-color-muted;
display: inline-block;
&:before {
display: inline-block;
color: @text-color-muted;
content: "⚲";
transform: rotate(-45deg);
}
input {
border: none;
}
}
}
2017-08-31 10:38:45 +00:00
}
.nav {
2017-08-31 15:01:36 +00:00
background: @light-gray;
color: @text-color;
}
.panel-content-top {
}
.panel-content-scrollable {
padding-top: 10px;
flex: 1 1 auto;
height: 100%;
overflow: auto;
padding-top: 10px;
z-index: 1000;
}
.tab-contents {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.filter-control {
margin: 10px 0 0 10px;
}
.filter-items-count {
&.active {
background: @yellow;
&:hover {
text-decoration: line-through;
}
}
}
.filter-fields {
margin-top: 10px;
}
.filter-category {
display: inline-block;
background: #efeef1;
cursor: pointer;
padding: 5px;
margin: 5px;
opacity: 0.3;
}
.active {
opacity: 1;
}
/* app-state data viewer
========================================================================== */
.re-frame-trace--collection {
border-left: 1px solid @light-gray;
margin-left: 10px;
padding-left: 10px;
// background: rgba(0, 0, 0, 0.07);
}
.re-frame-trace--primative:not(:first-child) {
margin-left: 10px;
// color: @text-color-muted;
}
.re-frame-trace--number {
}
.re-frame-trace--boolean {
font-style: italic;
}
.re-frame-trace--string {
&:before {
color: @text-color-muted;
content: "\"";
}
&:after {
color: @text-color-muted;
content: "\"";
}
}
.re-frame-trace--nil {
text-decoration: line-through;
font-style: italic;
}
.re-frame-trace--keyword {
color: @light-purple;
}
.re-frame-trace--symbol {
}
.re-frame-trace--cljs-core-PersistentArrayMap,
.re-frame-trace--cljs-core-PersistentTreeMap,
.re-frame-trace--cljs-core-PersistentVector {
&:before {
color: @text-color-muted;
content: "{";
}
&:after {
color: @text-color-muted;
content: "}";
}
}
.re-frame-trace--object {
&:before {
color: @text-color-muted;
content: "▶ ";
}
2017-09-19 11:39:03 +00:00
// display: block;
&>span {
vertical-align: text-top;
}
}
}