mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use theme colors in debug viewer

Browse source
This commit is contained in:
Tom Najdek 2024-04-11 20:08:10 +02:00
parent 5681954f39
commit 14586d72b0
No known key found for this signature in database
GPG key ID: EEC61A7B4C667D77
3 changed files with 19 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
chrome/content/zotero/debugViewer.html
View file

@ -2,6 +2,7 @@
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="chrome://zotero-platform/content/zotero.css">
<title>Debug Output</title>
<script src="include.js"></script>
<script src="debugViewer.js"></script>
@ -9,7 +10,7 @@
<style>
body {
margin: 0;
background: Canvas;
background: var(--material-background);
}
a {
@ -19,7 +20,8 @@
header {
position: fixed;
top: 0;
background: lightgrey;
color: var(--fill-primary);
background: var(--material-sidepane);
display: flex;
align-items: center;
width: calc(100% - 20px);
@ -53,7 +55,7 @@
#submit-error {
font-weight: 600;
color: red;
color: var(--accent-red);
}
#content {
@ -65,7 +67,7 @@
#errors {
padding-bottom: 12px;
border-bottom: 1px lightgray solid;
border-bottom: var(--material-panedivider);
white-space: pre-wrap;
}
@ -84,8 +86,8 @@
content: attr(data-tooltip);
display: none;
position: absolute;
background: #000;
color: #fff;
background: var(--color-menu-opaque);
color: var(--fill-primary);
padding: 4px 8px;
font-size: 12px;
font-family: sans-serif;
@ -115,7 +117,7 @@
top: 100%;
border-width: 0 6px 6px;
border-bottom-color: #000;
border-bottom-color: var(--color-menu-opaque);
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,

5
scss/themes/_dark.scss
View file

@ -74,6 +74,11 @@ $-colors: (
--color-stripe-on-background: #{color.mix(
map.get($-colors, "color-background"), color.change(map.get($-colors, "color-stripe"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "color-stripe")))
)};
--color-menu-opaque: rgb(
#{color.alpha(map.get($-colors, "color-menu")) * color.red(map.get($-colors, "color-menu"))},
#{color.alpha(map.get($-colors, "color-menu")) * color.green(map.get($-colors, "color-menu"))},
#{color.alpha(map.get($-colors, "color-menu")) * color.blue(map.get($-colors, "color-menu"))}
);
// background materials
--material-background: var(--color-background);

5
scss/themes/_light.scss
View file

@ -74,6 +74,11 @@ $-colors: (
--color-stripe-on-background: #{color.mix(
map.get($-colors, "color-background"), color.change(map.get($-colors, "color-stripe"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "color-stripe")))
)};
--color-menu-opaque: rgb(
#{color.alpha(map.get($-colors, "color-menu")) * color.red(map.get($-colors, "color-menu"))},
#{color.alpha(map.get($-colors, "color-menu")) * color.green(map.get($-colors, "color-menu"))},
#{color.alpha(map.get($-colors, "color-menu")) * color.blue(map.get($-colors, "color-menu"))}
);
// background materials
--material-background: var(--color-background);