X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fdevtools%2Fwebconsole.css;h=dfd389714be60156471ee3356b81a9fd19950ac4;hp=bc546f9c573346c3058dbfd0be282463a1edd477;hb=589b5528220a57ff70809bd8ef0eeaf51a0c8b2f;hpb=6dc70335b2a0bf287f39b81011cb275c8158622c diff --git a/LCARStrek/browser/devtools/webconsole.css b/LCARStrek/browser/devtools/webconsole.css index bc546f9c..dfd38971 100644 --- a/LCARStrek/browser/devtools/webconsole.css +++ b/LCARStrek/browser/devtools/webconsole.css @@ -15,7 +15,7 @@ window { width: 200px; } -/* === webconsole.inc.css === */ +/* === BEGIN webconsole.inc.css === */ /* General output styles */ @@ -33,35 +33,39 @@ a { .message { display: flex; flex: 0 0 auto; - -moz-margin-start: 6px; - -moz-margin-end: 8px; - width: calc(100% - 6px - 8px); + padding: 0 7px; + width: 100%; + box-sizing: border-box; } .message > .timestamp { flex: 0 0 auto; color: #8050B0; - margin: 4px 0; + margin: 4px 6px 0 0; +} + +.message > .indent { + flex: 0 0 auto; } .message > .icon { background: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 0, 1, 0, 0) no-repeat; - background-position: center 0.5em; + background-position: center; flex: 0 0 auto; - margin: 0 6px; + margin: 3px 6px 0 0; padding: 0 4px; width: 8px; + height: 1em; + align-self: flex-start; } -.message > .body { +.message > .message-body-wrapper { flex: 1 1 100%; - white-space: pre-wrap; - word-wrap: break-word; - margin-top: 4px; + margin: 3px; } /* The red bubble that shows the number of times a message is repeated */ -.message > .repeats { +.message-repeats { -moz-user-select: none; flex: 0 0 auto; margin: 2px 6px; @@ -75,35 +79,35 @@ a { font-weight: 600; } -.message > .repeats[value="1"] { +.message-repeats[value="1"] { display: none; } -.message > .location { - -moz-margin-start: 6px; +.message-location { display: flex; flex: 0 0 auto; align-self: flex-start; justify-content: flex-end; width: 10em; - margin-top: 4px; + margin-top: 3px; color: #3333FF; text-decoration: none; + white-space: nowrap; } -.message > .location:hover, -.message > .location:focus { +.message-location:hover, +.message-location:focus { text-decoration: underline; } -.message > .location > .filename { +.message-location > .filename { text-overflow: ellipsis; text-align: end; overflow: hidden; white-space: nowrap; } -.message > .location > .line-number { +.message-location > .line-number { flex: 0 0 auto; } @@ -112,9 +116,32 @@ a { color: inherit; } +.message-flex-body { + display: flex; +} + +.message-body { + white-space: pre-wrap; + word-wrap: break-word; +} + +.message-flex-body > .message-body { + display: block; + flex: 1 1 auto; + vertical-align: middle; +} + +.message-flex-body > .message-location { + margin-top: 0; +} + +.jsterm-input-container { + border-top-width: 1px; + border-top-style: solid; +} + #output-wrapper { direction: ltr; - border-bottom: 1px solid #9C9CFF; overflow: auto; } @@ -126,10 +153,20 @@ a { align-items: flex-start; } +#output-container.hideTimestamps > .message { + -moz-padding-start: 0; + -moz-margin-start: 7px; + width: calc(100% - 7px); +} + #output-container.hideTimestamps > .message > .timestamp { display: none; } +#output-container.hideTimestamps > .message > .indent { + background-color: #000000; /* .theme-body */ +} + .filtered-by-type, .filtered-by-string { display: none; @@ -178,15 +215,23 @@ a { border-color: #FFCF00; } -.message[category=network] > .icon { - -moz-border-start: solid #FFCF00 6px; +.message[severity=error] { + background-color: #FF0000; +} + +.console-string { + color: #FF0000; +} + +.message[category=network] > .indent { + -moz-border-end: solid #FF0000 6px; } .message[category=network][severity=error] > .icon { background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 0, 16, 8, 8); } -.message[category=network] > .body { +.message[category=network] > .message-body { display: flex; } @@ -224,8 +269,8 @@ a { border-color: #9C9CFF; } -.message[category=cssparser] > .icon { - -moz-border-start: solid #9C9CFF 6px; +.message[category=cssparser] > .indent { + -moz-border-end: solid #9C9CFF 6px; } .message[category=cssparser][severity=error] > .icon { @@ -242,8 +287,8 @@ a { border-color: #FF9F00; } -.message[category=exception] > .icon { - -moz-border-start: solid #FF9F00 6px; +.message[category=exception] > .indent { + -moz-border-end: solid #FF9F00 6px; } .message[category=exception][severity=error] > .icon { @@ -260,8 +305,8 @@ a { border-color: #8050B0; } -.message[category=console] > .icon { - -moz-border-start: solid #8050B0 6px; +.message[category=console] > .indent { + -moz-border-end: solid #8050B0 6px; } .message[category=console][severity=error] > .icon, @@ -278,9 +323,9 @@ a { } /* Input and output styles */ -.message[category=input] > .icon, -.message[category=output] > .icon { - -moz-border-start: solid #A09090 6px; +.message[category=input] > .indent, +.message[category=output] > .indent { + -moz-border-end: solid #A09090 6px; } .message[category=input] > .icon { @@ -297,11 +342,11 @@ a { .jsterm-complete-node { -moz-padding-start: 16px; margin: 3px 0 0 0; + background-color: transparent; } .jsterm-input-node { background: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16) no-repeat; - background-position: 0%; } :-moz-any(.jsterm-input-node, @@ -309,11 +354,7 @@ a { overflow-x: hidden; } -.jsterm-complete-node > .textbox-input-box > .textbox-textarea { - color: #8050B0; -} - -.inlined-variables-view .body { +.inlined-variables-view .message-body { display: flex; flex-direction: column; } @@ -321,6 +362,7 @@ a { .inlined-variables-view iframe { display: block; flex: 1; + margin-top: 5px; margin-bottom: 15px; -moz-margin-end: 15px; border: 1px solid #9C9CFF; @@ -332,10 +374,14 @@ a { border: none; } +.devtools-side-splitter ~ #webconsole-sidebar[hidden] { + display: none; +} + /* Security styles */ -.message[category=security] > .icon { - -moz-border-start: solid #FF0000 6px; +.message[category=security] > .indent { + -moz-border-end: solid #FF0000 6px; } .webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before { @@ -360,7 +406,160 @@ a { } .navigation-marker .url { - background-color: #000000; -moz-padding-end: 9px; text-decoration: none; } + +.stacktrace { + display: none; + list-style: none; + padding: 0 1em 0 1.5em; + margin: 5px 0 0 0; + max-height: 10em; + overflow-y: auto; + border: 1px solid #A09090; + border-radius: 3px; +} + +.message[severity=error] .stacktrace { + background-color: #000000; +} + +.message[open] .stacktrace { + display: block; +} + +.message .theme-twisty { + display: inline-block; + vertical-align: middle; + margin: 0 3px 0 0; +} + +.stacktrace li { + display: flex; + margin: 0; +} + +.stacktrace .function { + display: block; + flex: 1 1 auto; +} + +.cm-s-mozilla a[class] { + font-style: italic; + text-decoration: none; +} + +.cm-s-mozilla a[class]:hover, +.cm-s-mozilla a[class]:focus { + text-decoration: underline; +} + +/* Open DOMNode in inspector button */ +.open-inspector { + background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0; + padding-left: 16px; + margin-left: 5px; + cursor: pointer; +} + +.elementNode:hover .open-inspector, +.open-inspector:hover { + background-position: -32px 0; +} + +.open-inspector:active { + background-position: -16px 0; +} + +/* Replace these values with CSS variables as available */ +.theme-dark .jsterm-input-container { + background-color: #000000; /* tabToolbarBackgroundColor */ + border-color: #9C9CFF; /* mainBackgroundColor */ +} + +.theme-dark .jsterm-input-node { + color: #E7ADE7; /* textColor */ +} + +.theme-dark .jsterm-complete-node { + color: #A09090; /* commentColor */ +} + +.theme-dark .navigation-marker .url { + background: #000000; /* mainBackgroundColor */ +} + +.theme-dark .inlined-variables-view iframe { + border-color: #A09090; +} + +.theme-dark .stacktrace { + border-color: #A09090; +} + +.theme-light .jsterm-input-container { + background-color: #000000; /* tabToolbarBackgroundColor */ + border-color: #9C9CFF; /* mainBackgroundColor */ +} + +.theme-light .jsterm-input-node { + color: #E7ADE7; /* textColor */ +} + +.theme-light .jsterm-complete-node { + color: #A09090; /* commentColor */ +} + +.theme-light .navigation-marker .url { + background: #000000; /* mainBackgroundColor */ +} + +.theme-light .inlined-variables-view iframe { + border-color: #A09090; +} + +.theme-dark .stacktrace { + border-color: #A09090; +} + +@media (max-width: 500px) { + .message > .timestamp { + display: none; + } + .toolbarbutton-text { + display: none; + } + .hud-console-filter-toolbar .webconsole-filter-button { + min-width: 40px; + } + .hud-console-filter-toolbar .webconsole-clear-console-button { + min-width: 25px; + } + .webconsole-filter-button > .toolbarbutton-menubutton-button:before { + width: 16px; + height: 16px; + margin-left: 1px; + } + .toolbarbutton-menubutton-dropmarker { + margin: 0px; + } +} + +@media (max-width: 300px) { + .hud-console-filter-toolbar { + -moz-box-orient: vertical; + } + .toolbarbutton-text { + display: -moz-box; + } + .devtools-toolbarbutton { + margin-top: 3px; + } + .hud-console-filter-toolbar .hud-filter-box, + .hud-console-filter-toolbar .devtools-toolbarbutton { + margin-top: 5px; + } +} + +/* === END webconsole.inc.css === */