aboutsummaryrefslogtreecommitdiffstats
path: root/web/src/css
diff options
context:
space:
mode:
Diffstat (limited to 'web/src/css')
-rw-r--r--web/src/css/app.less19
-rw-r--r--web/src/css/eventlog.less43
-rw-r--r--web/src/css/flowdetail.less112
-rw-r--r--web/src/css/flowtable.less127
-rw-r--r--web/src/css/flowview.less9
-rw-r--r--web/src/css/footer.less4
-rw-r--r--web/src/css/header.less33
-rw-r--r--web/src/css/layout.less65
-rw-r--r--web/src/css/prompt.less27
-rw-r--r--web/src/css/sprites.less46
-rw-r--r--web/src/css/tabs.less49
-rw-r--r--web/src/css/vendor-bootstrap-variables.less5
-rw-r--r--web/src/css/vendor-bootstrap.less46
-rw-r--r--web/src/css/vendor.less3
14 files changed, 588 insertions, 0 deletions
diff --git a/web/src/css/app.less b/web/src/css/app.less
new file mode 100644
index 00000000..046d378a
--- /dev/null
+++ b/web/src/css/app.less
@@ -0,0 +1,19 @@
+// www.paulirish.com/2012/box-sizing-border-box-ftw/
+html {
+ box-sizing: border-box;
+}
+
+*, *:before, *:after {
+ box-sizing: inherit;
+}
+
+@import (less) "sprites.less";
+@import (less) "layout.less";
+@import (less) "tabs.less";
+@import (less) "header.less";
+@import (less) "flowtable.less";
+@import (less) "flowdetail.less";
+@import (less) "flowview.less";
+@import (less) "prompt.less";
+@import (less) "eventlog.less";
+@import (less) "footer.less"; \ No newline at end of file
diff --git a/web/src/css/eventlog.less b/web/src/css/eventlog.less
new file mode 100644
index 00000000..26dea3cc
--- /dev/null
+++ b/web/src/css/eventlog.less
@@ -0,0 +1,43 @@
+.eventlog {
+
+ height: 200px;
+ flex: 0 0 auto;
+
+ display: flex;
+ flex-direction: column;
+
+ > div {
+ background-color: #F2F2F2;
+ padding: 0 5px;
+ flex: 0 0 auto;
+ }
+
+ > pre {
+ flex: 1 1 auto;
+
+ margin: 0;
+ border-radius: 0;
+ overflow-x: auto;
+ overflow-y: scroll;
+ background-color: #fcfcfc;
+ }
+
+ .fa-close {
+ cursor: pointer;
+ float: right;
+ color: grey;
+ padding: 3px 0;
+ padding-left: 10px;
+ &:hover {
+ color: black;
+ }
+ }
+
+ .label {
+ cursor: pointer;
+ vertical-align: middle;
+ display: inline-block;
+ margin-top: -2px;
+ margin-left: 3px;
+ }
+} \ No newline at end of file
diff --git a/web/src/css/flowdetail.less b/web/src/css/flowdetail.less
new file mode 100644
index 00000000..edf97566
--- /dev/null
+++ b/web/src/css/flowdetail.less
@@ -0,0 +1,112 @@
+//TODO: Move into some utils
+.monospace() {
+ font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+
+.flow-detail {
+ width: 100%;
+ overflow-x: auto;
+ overflow-y: scroll;
+
+ nav {
+ background-color: #F2F2F2;
+ }
+
+ section {
+ padding: 5px 12px;
+ }
+
+ .first-line {
+ .monospace();
+ background-color: #428bca;
+ color: white;
+ margin: 0 -8px;
+ padding: 4px 8px;
+ border-radius: 5px;
+ word-break: break-all;
+ max-height: 100px;
+ overflow-y: auto;
+ }
+ .request-line {
+ margin-bottom: 2px;
+ }
+ /*.request .response-line,
+ .response .request-line {
+ opacity: 0.7;
+ }*/
+
+ hr {
+ margin: 0 0 5px;
+ }
+
+}
+
+.inline-input {
+ margin: 0 -5px;
+ padding: 0 5px;
+
+ &[contenteditable] {
+
+ background-color: rgba(255, 255, 255, 0.2);
+
+ &.has-warning {
+ color: rgb(255, 184, 184);
+ }
+ &.has-success {
+ //color: green;
+ }
+ }
+}
+
+.view-options {
+ margin-top: 10px;
+}
+
+.flow-detail table {
+ .monospace();
+ width: 100%;
+ table-layout: fixed;
+ word-break: break-all;
+
+ tr {
+ &:not(:first-child) {
+ border-top: 1px solid #f7f7f7;
+ }
+ }
+
+ td {
+ vertical-align: top;
+ //alt:
+ //white-space: nowrap;
+ //overflow: hidden;
+ //text-overflow: ellipsis;
+ }
+}
+
+.connection-table {
+ td:first-child {
+ width: 50%;
+ padding-right: 1em;
+ }
+}
+
+.header-table {
+ td {
+ line-height: 1.3em;
+ }
+ .header-name {
+ width: 33%;
+ padding-right: 1em;
+ }
+ .header-value {
+
+ }
+}
+
+.connection-table, .timing-table {
+ td {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+} \ No newline at end of file
diff --git a/web/src/css/flowtable.less b/web/src/css/flowtable.less
new file mode 100644
index 00000000..3533983c
--- /dev/null
+++ b/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
diff --git a/web/src/css/flowview.less b/web/src/css/flowview.less
new file mode 100644
index 00000000..aa8a2df2
--- /dev/null
+++ b/web/src/css/flowview.less
@@ -0,0 +1,9 @@
+.flowview-image {
+
+ text-align: center;
+
+ img {
+ max-width: 100%;
+ max-height: 100%;
+ }
+} \ No newline at end of file
diff --git a/web/src/css/footer.less b/web/src/css/footer.less
new file mode 100644
index 00000000..c041a022
--- /dev/null
+++ b/web/src/css/footer.less
@@ -0,0 +1,4 @@
+footer {
+ box-shadow: 0 -1px 3px lightgray;
+ padding: 0px 10px 3px;
+} \ No newline at end of file
diff --git a/web/src/css/header.less b/web/src/css/header.less
new file mode 100644
index 00000000..8fa5e37f
--- /dev/null
+++ b/web/src/css/header.less
@@ -0,0 +1,33 @@
+@import (reference) '../../node_modules/bootstrap/less/variables.less';
+@import (reference) '../../node_modules/bootstrap/less/mixins/grid.less';
+
+header {
+ padding-top: 0.5em;
+ background-color: white;
+ @separator-color: lighten(grey, 15%);
+ .menu {
+ padding: 10px;
+ border-bottom: solid @separator-color 1px;
+ }
+}
+
+@menu-row-gutter-width: 5px;
+.menu-row {
+ .make-row(@menu-row-gutter-width);
+}
+
+.filter-input {
+ .make-sm-column(3, @menu-row-gutter-width);
+}
+
+.filter-input .popover {
+ top: 27px;
+ display: block;
+ max-width: none;
+ opacity: 0.9;
+
+ .popover-content {
+ max-height: 500px;
+ overflow-y: auto;
+ }
+} \ No newline at end of file
diff --git a/web/src/css/layout.less b/web/src/css/layout.less
new file mode 100644
index 00000000..1075d6c9
--- /dev/null
+++ b/web/src/css/layout.less
@@ -0,0 +1,65 @@
+html, body, #container {
+ height: 100%;
+ margin: 0;
+ overflow: hidden;
+}
+
+#container {
+ display: flex;
+ flex-direction: column;
+
+ outline: none; // our root element is focused by default.
+
+ > header, > footer, > .eventlog {
+ flex: 0 0 auto;
+ }
+}
+
+.main-view {
+ flex: 1 1 auto;
+
+ // All children of #container need an explicit height
+ // If we don't set this, the scrollbars disappear
+ // (https://github.com/mitmproxy/mitmproxy/issues/615)
+ height: 0;
+
+ display: flex;
+ flex-direction: row;
+
+ &.vertical {
+ flex-direction: column;
+ }
+
+ .flow-detail, .flow-table {
+ flex: 1 1 auto;
+ }
+
+}
+
+.splitter {
+ flex: 0 0 1px;
+ background-color: #aaa;
+ position: relative;
+
+ > div {
+ position: absolute;
+ //debug: background-color: orange;
+ }
+
+ &.splitter-x {
+ cursor: col-resize;
+ > div {
+ margin-left: -1px;
+ width: 4px;
+ height: 100%;
+ }
+ }
+ &.splitter-y {
+ cursor: row-resize;
+ > div {
+ margin-top: -1px;
+ height: 4px;
+ width: 100%;
+ }
+ }
+}
diff --git a/web/src/css/prompt.less b/web/src/css/prompt.less
new file mode 100644
index 00000000..eee0426d
--- /dev/null
+++ b/web/src/css/prompt.less
@@ -0,0 +1,27 @@
+.prompt-dialog {
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ position: fixed;
+ z-index: 100;
+ background-color: rgba(0, 0, 0, 0.1);
+}
+
+.prompt-content {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 25px;
+ padding: 2px 5px;
+ background-color: white;
+ box-shadow: 0 -1px 3px lightgray;
+
+ .option {
+ cursor: pointer;
+ &:not(:last-child)::after {
+ content: ", ";
+ }
+ }
+} \ No newline at end of file
diff --git a/web/src/css/sprites.less b/web/src/css/sprites.less
new file mode 100644
index 00000000..74131c5e
--- /dev/null
+++ b/web/src/css/sprites.less
@@ -0,0 +1,46 @@
+.resource-icon {
+ width: 32px;
+ height: 32px;
+}
+
+// From Chrome Dev Tools
+.resource-icon-css {
+ background-image: url(images/chrome-devtools/resourceCSSIcon.png);
+}
+
+.resource-icon-document {
+ background-image: url(images/chrome-devtools/resourceDocumentIcon.png);
+}
+
+.resource-icon-js {
+ background-image: url(images/chrome-devtools/resourceJSIcon.png);
+}
+
+.resource-icon-plain {
+ background-image: url(images/chrome-devtools/resourcePlainIcon.png);
+}
+
+// Own
+.resource-icon-executable {
+ background-image: url(images/resourceExecutableIcon.png);
+}
+
+.resource-icon-flash {
+ background-image: url(images/resourceFlashIcon.png);
+}
+
+.resource-icon-image {
+ background-image: url(images/resourceImageIcon.png);
+}
+
+.resource-icon-java {
+ background-image: url(images/resourceJavaIcon.png);
+}
+
+.resource-icon-not-modified {
+ background-image: url(images/resourceNotModifiedIcon.png);
+}
+
+.resource-icon-redirect {
+ background-image: url(images/resourceRedirectIcon.png);
+} \ No newline at end of file
diff --git a/web/src/css/tabs.less b/web/src/css/tabs.less
new file mode 100644
index 00000000..43f7264e
--- /dev/null
+++ b/web/src/css/tabs.less
@@ -0,0 +1,49 @@
+.nav-tabs {
+
+ @separator-color: lighten(grey, 15%);
+
+ border-bottom: solid @separator-color 1px;
+
+ a {
+ display: inline-block;
+ border: solid transparent 1px;
+ text-decoration: none;
+ //text-transform: uppercase;
+ //font-family: Lato;
+
+ &.active {
+ background-color: white;
+ border-color: @separator-color;
+ border-bottom-color: white;
+ }
+ &.special {
+ @special-color: #396cad;
+ color: white;
+ background-color: @special-color;
+ border-bottom-color: @special-color;
+ &:hover {
+ background-color: lighten(@special-color, 10%);
+ }
+ }
+ }
+
+}
+
+.nav-tabs-lg {
+ a {
+ padding: 3px 14px;
+ margin: 0 2px -1px;
+ }
+}
+
+.nav-tabs-sm {
+ a {
+ padding: 0px 7px;
+ margin: 2px 2px -1px;
+ }
+ a.nav-action {
+ float: right;
+ padding: 0;
+ margin: 1px 0 0px;
+ }
+} \ No newline at end of file
diff --git a/web/src/css/vendor-bootstrap-variables.less b/web/src/css/vendor-bootstrap-variables.less
new file mode 100644
index 00000000..e2c37bf5
--- /dev/null
+++ b/web/src/css/vendor-bootstrap-variables.less
@@ -0,0 +1,5 @@
+@navbar-height: 32px;
+@navbar-default-link-color: #303030;
+@navbar-default-color: #303030;
+@navbar-default-bg: #ffffff;
+@navbar-default-border: #e0e0e0;
diff --git a/web/src/css/vendor-bootstrap.less b/web/src/css/vendor-bootstrap.less
new file mode 100644
index 00000000..35fda379
--- /dev/null
+++ b/web/src/css/vendor-bootstrap.less
@@ -0,0 +1,46 @@
+// Core variables and mixins
+@import "../../node_modules/bootstrap/less/variables.less";
+@import "vendor-bootstrap-variables.less";
+@import "../../node_modules/bootstrap/less/mixins.less";
+// Reset and dependencies
+@import "../../node_modules/bootstrap/less/normalize.less";
+@import "../../node_modules/bootstrap/less/print.less";
+@import "../../node_modules/bootstrap/less/glyphicons.less";
+// Core CSS
+@import "../../node_modules/bootstrap/less/scaffolding.less";
+@import "../../node_modules/bootstrap/less/type.less";
+@import "../../node_modules/bootstrap/less/code.less";
+@import "../../node_modules/bootstrap/less/grid.less";
+@import "../../node_modules/bootstrap/less/tables.less";
+@import "../../node_modules/bootstrap/less/forms.less";
+@import "../../node_modules/bootstrap/less/buttons.less";
+// Components
+@import "../../node_modules/bootstrap/less/component-animations.less";
+@import "../../node_modules/bootstrap/less/dropdowns.less";
+@import "../../node_modules/bootstrap/less/button-groups.less";
+@import "../../node_modules/bootstrap/less/input-groups.less";
+@import "../../node_modules/bootstrap/less/navs.less";
+@import "../../node_modules/bootstrap/less/navbar.less";
+@import "../../node_modules/bootstrap/less/breadcrumbs.less";
+@import "../../node_modules/bootstrap/less/pagination.less";
+@import "../../node_modules/bootstrap/less/pager.less";
+@import "../../node_modules/bootstrap/less/labels.less";
+@import "../../node_modules/bootstrap/less/badges.less";
+@import "../../node_modules/bootstrap/less/jumbotron.less";
+@import "../../node_modules/bootstrap/less/thumbnails.less";
+@import "../../node_modules/bootstrap/less/alerts.less";
+@import "../../node_modules/bootstrap/less/progress-bars.less";
+@import "../../node_modules/bootstrap/less/media.less";
+@import "../../node_modules/bootstrap/less/list-group.less";
+@import "../../node_modules/bootstrap/less/panels.less";
+@import "../../node_modules/bootstrap/less/responsive-embed.less";
+@import "../../node_modules/bootstrap/less/wells.less";
+@import "../../node_modules/bootstrap/less/close.less";
+// Components w/ JavaScript
+@import "../../node_modules/bootstrap/less/modals.less";
+@import "../../node_modules/bootstrap/less/tooltip.less";
+@import "../../node_modules/bootstrap/less/popovers.less";
+@import "../../node_modules/bootstrap/less/carousel.less";
+// Utility classes
+@import "../../node_modules/bootstrap/less/utilities.less";
+@import "../../node_modules/bootstrap/less/responsive-utilities.less";
diff --git a/web/src/css/vendor.less b/web/src/css/vendor.less
new file mode 100644
index 00000000..e91ae3a8
--- /dev/null
+++ b/web/src/css/vendor.less
@@ -0,0 +1,3 @@
+// Bootstrap
+@import 'vendor-bootstrap.less';
+@import (less) '../fonts/font-awesome.css';
generated by cgit v1.2.3 (git 2.25.1) at 2024-10-03 08:49:44 +0000