tweak css

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

View File

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

View File

@ -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;

View File

@ -1,13 +1,12 @@
//TODO: Move into some utils
.monospace(){
.monospace() {
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
.flow-detail {
width: 100%;
overflow: auto;
nav {
background-color: #F2F2F2;
}
@ -27,10 +26,15 @@
max-height: 100px;
overflow-y: auto;
}
hr {
margin: 0 0 5px;
}
}
.view-selector {
margin-top: 10px;
margin-top: 10px;
}
.flow-detail table {
@ -38,10 +42,10 @@
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;
}
}
@ -62,12 +66,15 @@
}
.header-table {
td {
line-height: 1.3em;
}
.header-name {
width: 33%;
padding-right: 1em;
}
.header-value {
}
}

View File

@ -1,127 +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;
-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;
}
overflow: auto;
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";
table {
width: 100%;
table-layout: fixed;
}
}
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);
&: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);
}
}
&.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";
}
td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
@interceptorange: hsl(30, 100%, 50%);
tr {
cursor: pointer;
tr.intercepted:not(.has-response) {
.col-path, .col-method {
color: @interceptorange;
&: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.intercepted.has-response {
.col-status, .col-size, .col-time {
color: @interceptorange;
}
}
.fa {
line-height: inherit;
&.pull-right {
margin-left: 0;
td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.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;
@interceptorange: hsl(30, 100%, 50%);
tr.intercepted:not(.has-response) {
.col-path, .col-method {
color: @interceptorange;
}
}
.fa-pause {
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;
}
}
.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;
}
}

View File

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

View File

@ -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;
}
}

View File

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

View File

@ -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);
}

View File

@ -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;

View File

@ -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";