Grasscutters/mitmproxy
3
0
Fork 0
mirror of https://github.com/Grasscutters/mitmproxy.git synced 2025-01-30 23:09:44 +00:00
Code Issues Projects Releases Wiki Activity

tweak css

Browse Source
This commit is contained in:
Maximilian Hils 2015-03-22 00:28:08 +01:00
parent 1143552e16
commit 89d66360d6
10 changed files with 172 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
libmproxy/web/static/app.css
View File

@ -290,6 +290,9 @@ header .menu {
max-height: 100px; max-height: 100px;
overflow-y: auto; overflow-y: auto;
} }
.flow-detail hr {
margin: 0 0 5px;
}
.view-selector { .view-selector {
margin-top: 10px; margin-top: 10px;
} }
@ -309,6 +312,9 @@ header .menu {
width: 50%; width: 50%;
padding-right: 1em; padding-right: 1em;
} }
.header-table td {
line-height: 1.3em;
}
.header-table .header-name { .header-table .header-name {
width: 33%; width: 33%;
padding-right: 1em; padding-right: 1em;

2
web/src/css/eventlog.less
View File

@ -6,7 +6,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
> div { > div {
background-color: #F2F2F2; background-color: #F2F2F2;
padding: 0 5px; padding: 0 5px;
@ -23,7 +22,6 @@
background-color: #fcfcfc; background-color: #fcfcfc;
} }
.fa-close { .fa-close {
cursor: pointer; cursor: pointer;
float: right; float: right;

23
web/src/css/flowdetail.less
View File

@ -1,13 +1,12 @@
//TODO: Move into some utils //TODO: Move into some utils
.monospace(){ .monospace() {
font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
} }
.flow-detail { .flow-detail {
width: 100%; width: 100%;
overflow: auto; overflow: auto;
nav { nav {
background-color: #F2F2F2; background-color: #F2F2F2;
} }
@ -27,10 +26,15 @@
max-height: 100px; max-height: 100px;
overflow-y: auto; overflow-y: auto;
} }
hr {
margin: 0 0 5px;
}
} }
.view-selector { .view-selector {
margin-top: 10px; margin-top: 10px;
} }
.flow-detail table { .flow-detail table {
@ -38,10 +42,10 @@
width: 100%; width: 100%;
table-layout: fixed; table-layout: fixed;
word-break: break-all; word-break: break-all;
tr { tr {
&:not(:first-child){ &:not(:first-child) {
border-top: 1px solid #f7f7f7; border-top: 1px solid #f7f7f7;
} }
} }
@ -62,12 +66,15 @@
} }
.header-table { .header-table {
td {
line-height: 1.3em;
}
.header-name { .header-name {
width: 33%; width: 33%;
padding-right: 1em; padding-right: 1em;
} }
.header-value { .header-value {
} }
} }

212
web/src/css/flowtable.less
View File

@ -1,127 +1,127 @@
//TODO: move into utils //TODO: move into utils
.user-select (@val) { .user-select (@val) {
-webkit-touch-callout: @val; -webkit-touch-callout: @val;
-webkit-user-select: @val; -webkit-user-select: @val;
-khtml-user-select: @val; -khtml-user-select: @val;
-moz-user-select: @val; -moz-user-select: @val;
-ms-user-select: @val; -ms-user-select: @val;
user-select: @val; user-select: @val;
} }
.flow-table { .flow-table {
width: 100%;
overflow: auto;
table {
width: 100%; width: 100%;
table-layout: fixed; overflow: auto;
}
thead { table {
background-color: #F2F2F2; width: 100%;
line-height: 23px; table-layout: fixed;
}
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";
} }
} thead {
background-color: #F2F2F2;
line-height: 23px;
}
tr { th {
cursor: pointer; font-weight: normal;
box-shadow: 0 1px 0 #a6a6a6;
position: relative !important;
padding-left: 1px;
.user-select(none);
&:nth-child(even) { &.sort-asc, &.sort-desc {
background-color: rgba(0, 0, 0, 0.05); background-color: lighten(#F2F2F2, 3%);
} }
&.selected { &.sort-asc:after, &.sort-desc:after {
background-color: hsla(209, 52%, 84%, 0.5) !important; font: normal normal normal 14px/1 FontAwesome;
} position: absolute;
&.highlighted { right: 3px;
background-color: hsla(48, 100%, 50%, 0.4); top: 3px;
} padding: 2px;
&.highlighted:nth-child(even) { background-color: fadeout(lighten(#F2F2F2, 3%), 20%);
background-color: hsla(48, 100%, 50%, 0.5); }
} &.sort-asc:after {
} content: "\f0de";
}
&.sort-desc:after {
content: "\f0dd";
}
td { }
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
@interceptorange: hsl(30, 100%, 50%); tr {
cursor: pointer;
tr.intercepted:not(.has-response) { &:nth-child(even) {
.col-path, .col-method { background-color: rgba(0, 0, 0, 0.05);
color: @interceptorange; }
&.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.intercepted.has-response {
.col-status, .col-size, .col-time {
color: @interceptorange;
}
}
.fa { td {
line-height: inherit; overflow: hidden;
&.pull-right { white-space: nowrap;
margin-left: 0; text-overflow: ellipsis;
} }
}
.col-tls { @interceptorange: hsl(30, 100%, 50%);
width: 10px;
} tr.intercepted:not(.has-response) {
.col-tls-https { .col-path, .col-method {
background-color: rgba(0, 185, 0, 0.5); color: @interceptorange;
} }
.col-icon {
width: 32px;
}
.col-path {
.fa-repeat {
color: green;
} }
.fa-pause { tr.intercepted.has-response {
color: @interceptorange; .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;
} }
}
.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;
}
} }

10
web/src/css/flowview.less
View File

@ -1,9 +1,9 @@
.flowview-image { .flowview-image {
text-align: center; text-align: center;
img { img {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
} }
} }

32
web/src/css/header.less
View File

@ -2,30 +2,30 @@
@import (reference) '../../node_modules/bootstrap/less/mixins/grid.less'; @import (reference) '../../node_modules/bootstrap/less/mixins/grid.less';
header { header {
padding-top: 0.5em; padding-top: 0.5em;
background-color: white; background-color: white;
@separator-color: lighten(grey, 15%); @separator-color: lighten(grey, 15%);
.menu { .menu {
padding: 10px; padding: 10px;
border-bottom: solid @separator-color 1px; border-bottom: solid @separator-color 1px;
} }
} }
@menu-row-gutter-width: 5px; @menu-row-gutter-width: 5px;
.menu-row { .menu-row {
.make-row(@menu-row-gutter-width); .make-row(@menu-row-gutter-width);
} }
.filter-input { .filter-input {
.make-md-column(3, @menu-row-gutter-width); .make-md-column(3, @menu-row-gutter-width);
} }
.filter-input .popover { .filter-input .popover {
top: 27px; top: 27px;
display: block; display: block;
max-width: none; max-width: none;
.popover-content { .popover-content {
max-height: 500px; max-height: 500px;
overflow-y: auto; overflow-y: auto;
} }
} }

2
web/src/css/layout.less
View File

@ -15,7 +15,7 @@ html, body, #container {
.main-view { .main-view {
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
flex-direction: row; flex-direction: row;

28
web/src/css/sprites.less
View File

@ -5,34 +5,42 @@
// From Chrome Dev Tools // From Chrome Dev Tools
.resource-icon-css { .resource-icon-css {
background-image: url(images/chrome-devtools/resourceCSSIcon.png); background-image: url(images/chrome-devtools/resourceCSSIcon.png);
} }
.resource-icon-document { .resource-icon-document {
background-image: url(images/chrome-devtools/resourceDocumentIcon.png); background-image: url(images/chrome-devtools/resourceDocumentIcon.png);
} }
.resource-icon-js { .resource-icon-js {
background-image: url(images/chrome-devtools/resourceJSIcon.png); background-image: url(images/chrome-devtools/resourceJSIcon.png);
} }
.resource-icon-plain { .resource-icon-plain {
background-image: url(images/chrome-devtools/resourcePlainIcon.png); background-image: url(images/chrome-devtools/resourcePlainIcon.png);
} }
// Own // Own
.resource-icon-executable { .resource-icon-executable {
background-image: url(images/resourceExecutableIcon.png); background-image: url(images/resourceExecutableIcon.png);
} }
.resource-icon-flash { .resource-icon-flash {
background-image: url(images/resourceFlashIcon.png); background-image: url(images/resourceFlashIcon.png);
} }
.resource-icon-image { .resource-icon-image {
background-image: url(images/resourceImageIcon.png); background-image: url(images/resourceImageIcon.png);
} }
.resource-icon-java { .resource-icon-java {
background-image: url(images/resourceJavaIcon.png); background-image: url(images/resourceJavaIcon.png);
} }
.resource-icon-not-modified { .resource-icon-not-modified {
background-image: url(images/resourceNotModifiedIcon.png); background-image: url(images/resourceNotModifiedIcon.png);
} }
.resource-icon-redirect { .resource-icon-redirect {
background-image: url(images/resourceRedirectIcon.png); background-image: url(images/resourceRedirectIcon.png);
} }

11
web/src/css/vendor-bootstrap-variables.less
View File

@ -1,6 +1,5 @@
@navbar-height: 32px;
@navbar-height: 32px; @navbar-default-link-color: #303030;
@navbar-default-link-color: #303030; @navbar-default-color: #303030;
@navbar-default-color: #303030; @navbar-default-bg: #ffffff;
@navbar-default-bg: #ffffff; @navbar-default-border: #e0e0e0;
@navbar-default-border: #e0e0e0;

5
web/src/css/vendor-bootstrap.less
View File

@ -2,12 +2,10 @@
@import "../../node_modules/bootstrap/less/variables.less"; @import "../../node_modules/bootstrap/less/variables.less";
@import "vendor-bootstrap-variables.less"; @import "vendor-bootstrap-variables.less";
@import "../../node_modules/bootstrap/less/mixins.less"; @import "../../node_modules/bootstrap/less/mixins.less";
// Reset and dependencies // Reset and dependencies
@import "../../node_modules/bootstrap/less/normalize.less"; @import "../../node_modules/bootstrap/less/normalize.less";
@import "../../node_modules/bootstrap/less/print.less"; @import "../../node_modules/bootstrap/less/print.less";
@import "../../node_modules/bootstrap/less/glyphicons.less"; @import "../../node_modules/bootstrap/less/glyphicons.less";
// Core CSS // Core CSS
@import "../../node_modules/bootstrap/less/scaffolding.less"; @import "../../node_modules/bootstrap/less/scaffolding.less";
@import "../../node_modules/bootstrap/less/type.less"; @import "../../node_modules/bootstrap/less/type.less";
@ -16,7 +14,6 @@
@import "../../node_modules/bootstrap/less/tables.less"; @import "../../node_modules/bootstrap/less/tables.less";
@import "../../node_modules/bootstrap/less/forms.less"; @import "../../node_modules/bootstrap/less/forms.less";
@import "../../node_modules/bootstrap/less/buttons.less"; @import "../../node_modules/bootstrap/less/buttons.less";
// Components // Components
@import "../../node_modules/bootstrap/less/component-animations.less"; @import "../../node_modules/bootstrap/less/component-animations.less";
@import "../../node_modules/bootstrap/less/dropdowns.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/responsive-embed.less";
@import "../../node_modules/bootstrap/less/wells.less"; @import "../../node_modules/bootstrap/less/wells.less";
@import "../../node_modules/bootstrap/less/close.less"; @import "../../node_modules/bootstrap/less/close.less";
// Components w/ JavaScript // Components w/ JavaScript
@import "../../node_modules/bootstrap/less/modals.less"; @import "../../node_modules/bootstrap/less/modals.less";
@import "../../node_modules/bootstrap/less/tooltip.less"; @import "../../node_modules/bootstrap/less/tooltip.less";
@import "../../node_modules/bootstrap/less/popovers.less"; @import "../../node_modules/bootstrap/less/popovers.less";
@import "../../node_modules/bootstrap/less/carousel.less"; @import "../../node_modules/bootstrap/less/carousel.less";
// Utility classes // Utility classes
@import "../../node_modules/bootstrap/less/utilities.less"; @import "../../node_modules/bootstrap/less/utilities.less";
@import "../../node_modules/bootstrap/less/responsive-utilities.less"; @import "../../node_modules/bootstrap/less/responsive-utilities.less";