1 files changed, 127 insertions, 0 deletions
diff --git a/mitmproxy/web/src/css/flowtable.less b/mitmproxy/web/src/css/flowtable.less
new file mode 100644
index 00000000..3533983c
--- /dev/null
+++ b/mitmproxy/web/src/css/flowtable.less
@@ -0,0 +1,127 @@
+//TODO: move into utils
+.user-select (@val) {
+    -webkit-touch-callout: @val;
+    -webkit-user-select: @val;
+    -khtml-user-select: @val;
+    -moz-user-select: @val;
+    -ms-user-select: @val;
+    user-select: @val;
+}
+
+.flow-table {
+    width: 100%;
+    overflow: auto;
+
+    table {
+        width: 100%;
+        table-layout: fixed;
+    }
+
+    thead {
+        background-color: #F2F2F2;
+        line-height: 23px;
+    }
+
+    th {
+        font-weight: normal;
+        box-shadow: 0 1px 0 #a6a6a6;
+        position: relative !important;
+        padding-left: 1px;
+        .user-select(none);
+
+        &.sort-asc, &.sort-desc {
+            background-color: lighten(#F2F2F2, 3%);
+        }
+        &.sort-asc:after, &.sort-desc:after {
+            font: normal normal normal 14px/1 FontAwesome;
+            position: absolute;
+            right: 3px;
+            top: 3px;
+            padding: 2px;
+            background-color: fadeout(lighten(#F2F2F2, 3%), 20%);
+        }
+        &.sort-asc:after {
+            content: "\f0de";
+        }
+        &.sort-desc:after {
+            content: "\f0dd";
+        }
+
+    }
+
+    tr {
+        cursor: pointer;
+
+        &:nth-child(even) {
+            background-color: rgba(0, 0, 0, 0.05);
+        }
+        &.selected {
+            background-color: hsla(209, 52%, 84%, 0.5) !important;
+        }
+        &.highlighted {
+            background-color: hsla(48, 100%, 50%, 0.4);
+        }
+        &.highlighted:nth-child(even) {
+            background-color: hsla(48, 100%, 50%, 0.5);
+        }
+    }
+
+    td {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    @interceptorange: hsl(30, 100%, 50%);
+
+    tr.intercepted:not(.has-response) {
+        .col-path, .col-method {
+            color: @interceptorange;
+        }
+    }
+    tr.intercepted.has-response {
+        .col-status, .col-size, .col-time {
+            color: @interceptorange;
+        }
+    }
+
+    .fa {
+        line-height: inherit;
+        &.pull-right {
+            margin-left: 0;
+        }
+    }
+
+    .col-tls {
+        width: 10px;
+    }
+    .col-tls-https {
+        background-color: rgba(0, 185, 0, 0.5);
+    }
+    .col-icon {
+        width: 32px;
+    }
+    .col-path {
+        .fa-repeat {
+            color: green;
+        }
+        .fa-pause {
+            color: @interceptorange;
+        }
+    }
+    .col-method {
+        width: 60px;
+    }
+    .col-status {
+        width: 50px;
+    }
+    .col-size {
+        width: 70px;
+    }
+    .col-time {
+        width: 50px;
+    }
+    td.col-time, td.col-size {
+        text-align: right;
+    }
+}
+\ No newline at end of file