aboutsummaryrefslogtreecommitdiffstats
path: root/web/src/css
diff options
context:
space:
mode:
Diffstat (limited to 'web/src/css')
-rw-r--r--web/src/css/app.less1
-rw-r--r--web/src/css/eventlog.less2
-rw-r--r--web/src/css/flowdetail.less27
-rw-r--r--web/src/css/flowtable.less188
-rw-r--r--web/src/css/flowview.less9
-rw-r--r--web/src/css/header.less32
-rw-r--r--web/src/css/layout.less2
-rw-r--r--web/src/css/sprites.less28
-rw-r--r--web/src/css/vendor-bootstrap-variables.less11
-rw-r--r--web/src/css/vendor-bootstrap.less5
10 files changed, 179 insertions, 126 deletions
diff --git a/web/src/css/app.less b/web/src/css/app.less
index 26f22572..ecec3d9c 100644
--- a/web/src/css/app.less
+++ b/web/src/css/app.less
@@ -13,5 +13,6 @@ html {
@import (less) "header.less";
@import (less) "flowtable.less";
@import (less) "flowdetail.less";
+@import (less) "flowview.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
index 8b0a7647..26dea3cc 100644
--- a/web/src/css/eventlog.less
+++ b/web/src/css/eventlog.less
@@ -6,7 +6,6 @@
display: flex;
flex-direction: column;
-
> div {
background-color: #F2F2F2;
padding: 0 5px;
@@ -23,7 +22,6 @@
background-color: #fcfcfc;
}
-
.fa-close {
cursor: pointer;
float: right;
diff --git a/web/src/css/flowdetail.less b/web/src/css/flowdetail.less
index 7649057f..cc67eeb2 100644
--- a/web/src/css/flowdetail.less
+++ b/web/src/css/flowdetail.less
@@ -1,13 +1,13 @@
//TODO: Move into some utils
-.monospace(){
+.monospace() {
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
-
.flow-detail {
width: 100%;
- overflow: auto;
-
+ overflow-x: auto;
+ overflow-y: scroll;
+
nav {
background-color: #F2F2F2;
}
@@ -27,18 +27,26 @@
max-height: 100px;
overflow-y: auto;
}
+
+ hr {
+ margin: 0 0 5px;
+ }
+
}
+.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;
+ &:not(:first-child) {
+ border-top: 1px solid #f7f7f7;
}
}
@@ -59,12 +67,15 @@
}
.header-table {
+ td {
+ line-height: 1.3em;
+ }
.header-name {
width: 33%;
padding-right: 1em;
}
.header-value {
-
+
}
}
diff --git a/web/src/css/flowtable.less b/web/src/css/flowtable.less
index 9988f1a8..3533983c 100644
--- a/web/src/css/flowtable.less
+++ b/web/src/css/flowtable.less
@@ -1,95 +1,127 @@
-.flow-table {
- width: 100%;
- overflow: auto;
+//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;
+}
- table {
+.flow-table {
width: 100%;
- table-layout: fixed;
- }
+ overflow: auto;
- thead {
- background-color: #F2F2F2;
- line-height: 23px;
- }
+ table {
+ width: 100%;
+ table-layout: fixed;
+ }
- th {
- font-weight: normal;
- box-shadow: 0 1px 0 #a6a6a6;
- }
+ thead {
+ background-color: #F2F2F2;
+ line-height: 23px;
+ }
- tr {
- cursor: pointer;
+ 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";
+ }
- &: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);
+
+ 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;
- }
+ td {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
- @interceptorange: hsl(30, 100%, 50%);
+ @interceptorange: hsl(30, 100%, 50%);
- tr.intercepted:not(.has-response) {
- .col-path, .col-method {
- color: @interceptorange;
+ tr.intercepted:not(.has-response) {
+ .col-path, .col-method {
+ color: @interceptorange;
+ }
}
- }
- tr.intercepted.has-response {
- .col-status, .col-size, .col-time {
- color: @interceptorange;
+ tr.intercepted.has-response {
+ .col-status, .col-size, .col-time {
+ color: @interceptorange;
+ }
}
- }
- .fa {
- line-height: inherit;
- &.pull-right {
- margin-left: 0;
+ .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;
- }
+ .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/header.less b/web/src/css/header.less
index 57f122e8..6e61b956 100644
--- a/web/src/css/header.less
+++ b/web/src/css/header.less
@@ -2,30 +2,30 @@
@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;
- }
+ 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);
+ .make-row(@menu-row-gutter-width);
}
.filter-input {
- .make-md-column(3, @menu-row-gutter-width);
+ .make-md-column(3, @menu-row-gutter-width);
}
.filter-input .popover {
- top: 27px;
- display: block;
- max-width: none;
- .popover-content {
- max-height: 500px;
- overflow-y: auto;
- }
+ top: 27px;
+ display: block;
+ max-width: none;
+ .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
index f6807f24..4e96609b 100644
--- a/web/src/css/layout.less
+++ b/web/src/css/layout.less
@@ -15,7 +15,7 @@ html, body, #container {
.main-view {
flex: 1 1 auto;
-
+
display: flex;
flex-direction: row;
diff --git a/web/src/css/sprites.less b/web/src/css/sprites.less
index 49b3600c..74131c5e 100644
--- a/web/src/css/sprites.less
+++ b/web/src/css/sprites.less
@@ -5,34 +5,42 @@
// From Chrome Dev Tools
.resource-icon-css {
- background-image: url(images/chrome-devtools/resourceCSSIcon.png);
+ background-image: url(images/chrome-devtools/resourceCSSIcon.png);
}
+
.resource-icon-document {
- background-image: url(images/chrome-devtools/resourceDocumentIcon.png);
+ background-image: url(images/chrome-devtools/resourceDocumentIcon.png);
}
+
.resource-icon-js {
- background-image: url(images/chrome-devtools/resourceJSIcon.png);
+ background-image: url(images/chrome-devtools/resourceJSIcon.png);
}
+
.resource-icon-plain {
- background-image: url(images/chrome-devtools/resourcePlainIcon.png);
+ background-image: url(images/chrome-devtools/resourcePlainIcon.png);
}
// Own
.resource-icon-executable {
- background-image: url(images/resourceExecutableIcon.png);
+ background-image: url(images/resourceExecutableIcon.png);
}
+
.resource-icon-flash {
- background-image: url(images/resourceFlashIcon.png);
+ background-image: url(images/resourceFlashIcon.png);
}
+
.resource-icon-image {
- background-image: url(images/resourceImageIcon.png);
+ background-image: url(images/resourceImageIcon.png);
}
+
.resource-icon-java {
- background-image: url(images/resourceJavaIcon.png);
+ background-image: url(images/resourceJavaIcon.png);
}
+
.resource-icon-not-modified {
- background-image: url(images/resourceNotModifiedIcon.png);
+ background-image: url(images/resourceNotModifiedIcon.png);
}
+
.resource-icon-redirect {
- background-image: url(images/resourceRedirectIcon.png);
+ background-image: url(images/resourceRedirectIcon.png);
} \ No newline at end of file
diff --git a/web/src/css/vendor-bootstrap-variables.less b/web/src/css/vendor-bootstrap-variables.less
index b2818993..e2c37bf5 100644
--- a/web/src/css/vendor-bootstrap-variables.less
+++ b/web/src/css/vendor-bootstrap-variables.less
@@ -1,6 +1,5 @@
-
-@navbar-height: 32px;
-@navbar-default-link-color: #303030;
-@navbar-default-color: #303030;
-@navbar-default-bg: #ffffff;
-@navbar-default-border: #e0e0e0;
+@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
index 0b3252fe..35fda379 100644
--- a/web/src/css/vendor-bootstrap.less
+++ b/web/src/css/vendor-bootstrap.less
@@ -2,12 +2,10 @@
@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";
@@ -16,7 +14,6 @@
@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";
@@ -39,13 +36,11 @@
@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";
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-15 02:48:33 +0000