summaryrefslogtreecommitdiffstats
path: root/src/css/logger-ui.css
diff options
context:
space:
mode:
Diffstat (limited to 'src/css/logger-ui.css')
-rw-r--r--src/css/logger-ui.css126
1 files changed, 74 insertions, 52 deletions
diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css
index 8e5065c..7ae632e 100644
--- a/src/css/logger-ui.css
+++ b/src/css/logger-ui.css
@@ -2,6 +2,7 @@ body {
display: flex;
flex-direction: column;
height: 100vh;
+ height: 100svh;
overflow: hidden;
width: 100vw;
}
@@ -218,6 +219,7 @@ body[dir="rtl"] #netInspector #filterExprPicker {
width: 100%;
}
#vwRenderer .logEntry {
+ background-color: var(--surface-1);
display: block;
left: 0;
overflow: hidden;
@@ -228,7 +230,11 @@ body[dir="rtl"] #netInspector #filterExprPicker {
display: none;
}
#vwRenderer .logEntry > div {
+ border-bottom: 1px dotted var(--border-1);
+ box-sizing: border-box;
+ display: flex;
height: 100%;
+ max-height: 200px;
white-space: nowrap;
}
#vwRenderer .logEntry > div[data-status="1"],
@@ -271,7 +277,7 @@ body[dir="rtl"] #netInspector #filterExprPicker {
color: white;
}
#vwRenderer .logEntry > div[data-type="error"] {
- color: var(--sf-error-ink);
+ color: var(--cm-negative);
}
#vwRenderer .logEntry > div[data-type="info"] {
color: var(--sf-def-ink);
@@ -283,10 +289,8 @@ body[dir="rtl"] #netInspector #filterExprPicker {
opacity: 0.7;
}
-#vwRenderer .logEntry > div > span {
- border: 1px dotted var(--border-1);
- border-top: 0;
- border-right: 0;
+#vwRenderer .logEntry > .fields > span {
+ border-left: 1px dotted var(--border-1);
box-sizing: border-box;
display: inline-block;
height: 100%;
@@ -296,86 +300,74 @@ body[dir="rtl"] #netInspector #filterExprPicker {
white-space: nowrap;
word-break: break-all;
}
-#vwRenderer .logEntry > div.canDetails:hover > span {
+#vwRenderer .logEntry > div:hover > span {
background-color: rgba(0,0,0,0.04);
}
-body[dir="ltr"] #vwRenderer .logEntry > div > span:first-child {
+body[dir="ltr"] #vwRenderer .logEntry > .fields > span:first-child {
border-left: 0;
}
-body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
+body[dir="rtl"] #vwRenderer .logEntry > .fields > span:first-child {
border-right: 0;
}
#vwRenderer .logEntry > div > span:nth-of-type(1) {
}
#vwRenderer .logEntry > div > span:nth-of-type(2) {
}
-#vwRenderer .logEntry > div > span:nth-of-type(2) {
+#vwRenderer .logEntry > .fields > span:nth-of-type(2) {
text-overflow: ellipsis;
}
-#vwRenderer .logEntry > div.messageRealm > span:nth-of-type(2) ~ span {
+#vwRenderer .logEntry > .fields.messageRealm > span:nth-of-type(2) ~ span {
display: none;
}
-.vExpanded #vwRenderer #vwContent .logEntry > div > span:nth-of-type(2) {
+.vExpanded #vwRenderer #vwContent .logEntry > .fields > span:nth-of-type(2) {
overflow-y: auto;
white-space: pre-line;
}
-#vwRenderer .logEntry > div.messageRealm[data-type="tabLoad"] > span:nth-of-type(2) {
+#vwRenderer .logEntry > .fields.messageRealm[data-type="tabLoad"] > span:nth-of-type(2) {
text-align: center;
}
-#vwRenderer .logEntry > div.extendedRealm > span:nth-of-type(2) > span:first-of-type {
+#vwRenderer .logEntry > .fields.extendedRealm > span:nth-of-type(2) > span:first-of-type {
display: none;
}
-#vwRenderer .logEntry > div.extendedRealm > span:nth-of-type(2) > span:last-of-type {
- pointer-events: none;
- }
-#vwRenderer .logEntry > div.extendedRealm.isException > span:nth-of-type(2) > span:last-of-type {
+#vwRenderer .logEntry > .fields.extendedRealm.isException > span:nth-of-type(2) > span:last-of-type {
text-decoration: line-through rgba(0,0,255,0.7);
}
-#vwRenderer .logEntry > div > span:nth-of-type(3) {
+#vwRenderer .logEntry > .fields > span:nth-of-type(3) {
font-family: monospace;
padding-left: 0.3em;
padding-right: 0.3em;
text-align: center;
}
-#vwRenderer .logEntry > div.canDetails:hover > span:not(:nth-of-type(4)):not(:nth-of-type(8)) {
- background: rgba(0, 0, 255, 0.1);
- cursor: zoom-in;
- }
-#netInspector:not(.vExpanded) #vwRenderer .logEntry > div > span:nth-of-type(4) {
- direction: rtl;
+#netInspector:not(.vExpanded) #vwRenderer .logEntry > .fields > span:nth-of-type(4) {
text-align: right;
- unicode-bidi: plaintext;
}
-#vwRenderer #vwContent .logEntry > div > span:nth-of-type(4) {
+#vwRenderer #vwContent .logEntry > .fields > span:nth-of-type(4) {
text-overflow: ellipsis;
}
-.vExpanded #vwRenderer #vwContent .logEntry > div > span:nth-of-type(4) {
+.vExpanded #vwRenderer #vwContent .logEntry > .fields > span:nth-of-type(4) {
overflow-y: auto;
text-overflow: clip;
white-space: pre-line;
}
-#vwRenderer .logEntry > div > span:nth-of-type(5) {
+#vwRenderer .logEntry > .fields > span:nth-of-type(5) {
text-align: center;
}
-/* visual for tabless network requests */
-#vwRenderer .logEntry > div > span:nth-of-type(5) {
- position: relative;
+#vwRenderer .logEntry > .fields > span:nth-of-type(3),
+#vwRenderer .logEntry > .fields > span:nth-of-type(5),
+#vwRenderer .logEntry > .fields > span:nth-of-type(7) {
+ white-space: nowrap !important;
}
-#vwRenderer .logEntry > div > span:nth-of-type(7) {
- }
-#vwRenderer #vwContent .logEntry > div > span:nth-of-type(7) {
- }
-#vwRenderer .logEntry > div > span:nth-of-type(8) {
+#vwRenderer .logEntry > .fields > span:nth-of-type(8) {
position: relative;
}
-#vwRenderer #vwContent .logEntry > div > span:nth-of-type(8) {
+#vwRenderer #vwContent .logEntry > .fields > span:nth-of-type(8) {
text-overflow: ellipsis;
}
-.vExpanded #vwRenderer #vwContent .logEntry > div > span:nth-of-type(8) {
+.vExpanded #vwRenderer #vwContent .logEntry > .fields > span:nth-of-type(8) {
overflow-y: auto;
white-space: pre-line;
}
-#vwRenderer .logEntry > div > span:nth-of-type(8) b {
+#vwRenderer .logEntry > .fields > span:nth-of-type(8) b {
font-weight: bold;
}
#vwRenderer .logEntry > div[data-status="1"] > span:nth-of-type(8) b,
@@ -396,37 +388,65 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
.netFilteringDialog > .panes > .details > div[data-status="2"] b {
background-color: rgb(var(--popup-cell-allow-surface-rgb) / 100%);
}
-#vwRenderer .logEntry > div > span:nth-of-type(8) a {
+#vwRenderer .logEntry > .fields > span:nth-of-type(8) a {
align-items: center;
background-color: dimgray;
+ bottom: 0;
color: white;
display: none;
- height: 100%;
+ height: min(100%, 1.5em);
justify-content: center;
- padding: 0 0.25em;
+ padding: 0.1em;
opacity: 0.4;
position: absolute;
right: 0;
text-decoration: none;
- top: 0;
- width: 2rem;
+ width: 1.5em;
}
-#netInspector.vExpanded #vwRenderer .logEntry > div > span:nth-of-type(8) a {
+#netInspector.vExpanded #vwRenderer .logEntry > .fields > span:nth-of-type(8) a {
bottom: 0px;
height: unset;
- padding: 0.25em;
+ padding: 0.2em;
top: unset;
}
-#vwRenderer .logEntry > div > span:nth-of-type(8) a::after {
+#vwRenderer .logEntry > .fields > span:nth-of-type(8) a::after {
content: '\2197';
}
-#vwRenderer .logEntry > div.networkRealm > span:nth-of-type(8):hover a {
+#vwRenderer .logEntry > .fields.networkRealm > span:nth-of-type(8):hover a {
display: inline-flex;
}
-#vwRenderer .logEntry > div > span:nth-of-type(8) a:hover {
+#vwRenderer .logEntry > .fields > span:nth-of-type(8) a:hover {
opacity: 1;
}
+@keyframes unrollRow {
+ to {
+ box-shadow: 0 2px 3px 0 #444;
+ height: auto;
+ max-height: 200px;
+ z-index: 1;
+ }
+}
+@keyframes unrollRowCell {
+ to {
+ height: auto;
+ overflow-y: auto;
+ white-space: pre-wrap;
+ }
+}
+#netInspector:not(.vExpanded) #vwRenderer .logEntry:hover {
+ animation-delay: 0.8s;
+ animation-fill-mode: forwards;
+ animation-name: unrollRow;
+ animation-timing-function: step-start;
+ }
+#netInspector:not(.vExpanded) #vwRenderer .logEntry:hover > .fields > span {
+ animation-delay: 0.8s;
+ animation-fill-mode: forwards;
+ animation-name: unrollRowCell;
+ animation-timing-function: step-start;
+ }
+
#vwRenderer #vwBottom {
background-color: #00F;
height: 0;
@@ -448,6 +468,7 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
max-width: 640px;
min-width: min(100%, 640px);
position: absolute;
+ z-index: 2;
}
#netInspector .entryTools:empty {
display: none;
@@ -492,6 +513,7 @@ body[dir="rtl"] .closeButton {
bottom: 0;
display: none;
max-height: min(800px, calc(100vh - 2rem));
+ max-height: min(800px, calc(100svh - 2rem));
min-width: 360px;
overflow: hidden;
position: fixed;
@@ -947,10 +969,10 @@ body.dirty .netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules {
background-color: rgb(var(--primary-70) / 40%);
}
#loggerExportDialog .output {
- font: smaller mono;
- height: 60vh;
+ font-size: small;
+ height: 80vh;
padding: 0.5em;
- white-space: pre;
+ white-space: pre-wrap;
}
#loggerSettingsDialog {
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-25 00:05:37 +0000