Browse Source

P4TB-367: Make the dialogs themeable (dark mode support).

1.1.101
Richard Marti 1 year ago
parent
commit
0346f662e1
9 changed files with 119 additions and 23 deletions
  1. +57
    -11
      addon/content/dialogs/common.css
  2. +15
    -3
      addon/content/dialogs/options.css
  3. +4
    -0
      addon/content/dialogs/options.xhtml
  4. +9
    -6
      addon/content/dialogs/privacy_status.css
  5. +3
    -0
      addon/content/dialogs/privacy_status.xhtml
  6. +2
    -0
      addon/content/dialogs/sync_wizard.xhtml
  7. +1
    -1
      addon/content/tutorial/tutorial-1.html
  8. +2
    -2
      addon/content/tutorial/tutorial-3.html
  9. +26
    -0
      addon/content/tutorial/tutorial.css

+ 57
- 11
addon/content/dialogs/common.css View File

@ -1,9 +1,46 @@
/* This file is under GNU General Public License 3.0 */
:root:not([lwt-tree]):-moz-lwtheme,
#appPreferences:not([lwt-tree]):-moz-lwtheme {
background: -moz-Dialog !important;
color: -moz-DialogText;
text-shadow: none !important;
--button-background: rgba(128, 128, 128, .15);
--button-background-hover: rgba(128, 128, 128, .25);
--button-background-active: rgba(128, 128, 128, .35);
--button-border-color: rgba(128, 128, 128, .4);
--box-text-color: MenuText;
--box-background-color: Menu;
--box-border-color: ThreeDShadow;
--field-text-color: FieldText;
--field-background-color: Field;
--field-border-color: rgba(128, 128, 128, .6);
--field-border-hover-color: rgba(128, 128, 128, .8);
--highlight-color: Highlight;
--lwt-accent-color: -moz-Dialog;
--popup-item-hover: rgba(128, 128, 128, .2);
--popup-item-hover-text: MenuText;
--richlist-button-background: -moz-Dialog;
--tab-hover-background: hsla(0, 0%, 50%, 0.15);
--tab-selected-background: hsla(0, 0%, 50%, 0.25);
}
:root[lwtheme-image]:-moz-lwtheme {
text-shadow: none;
}
:root[lwt-tree] {
background-color: var(--lwt-accent-color);
color: var(--lwt-text-color);
}
.trustwords {
text-transform: uppercase;
background-color: white;
border: 1px solid lightgray;
background-color: var(--field-background-color);
border: 1px solid var(--field-border-color);
border-radius: 2px;
color: var(--field-text-color);
padding: 0.5em;
}
@ -19,22 +56,31 @@ button.action {
margin: 0.5em;
}
button.accept {
color: white;
button.accept:not(:hover) {
color: white !important;
/* green is #008000 */
background-color: green;
}
button.reject {
color: white;
button.accept:not([disabled="true"]):hover {
color: white !important;
/* #006600 = #008000 - #001A00 */
background-color: #060;
}
button.reject:not(:hover) {
color: white !important;
/* red is #ff0000 */
background-color: red;
}
button.cancel {
color: black;
background-color: white;
button.reject:not([disabled="true"]):hover {
color: white !important;
/* #e50000 = #ff0000 - #1A0000 */
background-color: #e50000;
}
button.reset {
:root:not([lwt-tree-brighttext]) button.cancel:not(:hover) {
color: black;
background-color: #ddd;
background-color: white;
}

+ 15
- 3
addon/content/dialogs/options.css View File

@ -1,5 +1,9 @@
/* This file is under GNU General Public License 3.0 */
.prefPanel {
padding: 8px;
}
.section {
margin-top: 0.1em;
margin-bottom: 0.1em;
@ -44,13 +48,21 @@ textarea#disclaimer {
#accountlist {
/* background-color: -moz-Dialog; */
border: 2px groove ThreeDFace;
border: 1px solid var(--field-border-color);
overflow: auto;
}
:root[lwt-tree] #accountlist {
scrollbar-color: rgba(204,204,204,.5) rgba(230,230,235,.5);
}
:root[lwt-tree-brighttext] #accountlist {
scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3);
}
.account-title {
background-color: ThreeDLightShadow;
padding: 2px 5px 2px;
background-color: hsla(0, 0%, 50%, 0.3);
padding: 2px 5px;
}
.checkbox-account {


+ 4
- 0
addon/content/dialogs/options.xhtml View File

@ -3,15 +3,19 @@
<?xml-stylesheet type="text/css" href="chrome://global/skin/global.css"?>
<?xml-stylesheet type="text/css" href="chrome://messenger/skin/preferences/preferences.css"?>
<?xml-stylesheet type="text/css" href="chrome://pEp4Tb/content/dialogs/options.css"?>
<?xml-stylesheet type="text/css" href="chrome://pEp4Tb/content/dialogs/common.css"?>
<?xml-stylesheet type="text/css" href="chrome://messenger/skin/messenger.css"?>
<?xml-stylesheet type="text/css" href="chrome://messenger/skin/themeableDialog.css"?>
<window id="appPreferences"
windowtype="pEp:options"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
lightweightthemes="true"
title="">
<script src="chrome://global/content/preferencesBindings.js"/>
<script src="chrome://pEp4Tb/content/dialogs/options.js"/>
<script src="chrome://messenger/content/dialogShadowDom.js"/>
<menupopup id="identityContextMenu">
<menuitem id="resetIdentity"
label="set dynamically"


+ 9
- 6
addon/content/dialogs/privacy_status.css View File

@ -31,24 +31,27 @@
.tabs button {
float: left;
border: 1px solid lightgray;
border: 1px solid var(--field-border-color);
border-bottom: none;
cursor: pointer;
margin-bottom: 0;
padding: 4px 6px;
transition: 0.3s;
}
.tabs button:hover {
background-color: #ddd;
:root[lwt-tree-brighttext] .tabs button {
--button-background: #202023;
}
.tabs button.active {
background-color: white;
background-color: var(--field-background-color);
}
.fpr {
white-space: pre;
background-color: white;
border: 1px solid lightgray;
background-color: var(--field-background-color);
border: 1px solid var(--field-border-color);
border-radius: 2px;
color: var(--field-text-color);
padding: 0.5em;
}

+ 3
- 0
addon/content/dialogs/privacy_status.xhtml View File

@ -3,14 +3,17 @@
<?xml-stylesheet type="text/css" href="chrome://global/skin/global.css"?>
<?xml-stylesheet type="text/css" href="chrome://pEp4Tb/content/dialogs/privacy_status.css"?>
<?xml-stylesheet type="text/css" href="chrome://pEp4Tb/content/dialogs/common.css"?>
<?xml-stylesheet type="text/css" href="chrome://messenger/skin/themeableDialog.css"?>
<dialog id="privacyStatusDialog"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
title-localekey="privacyStatusTitle"
onload="pEpPrivacyStatus.onLoad()"
lightweightthemes="true"
buttons="accept">
<script src="chrome://pEp4Tb/content/dialogs/privacy_status.js"/>
<script src="chrome://messenger/content/dialogShadowDom.js"/>
<vbox flex="1" style="overflow: auto; min-height: 200px; min-width: 400px;">
<html:div id="root"


+ 2
- 0
addon/content/dialogs/sync_wizard.xhtml View File

@ -4,10 +4,12 @@
<?xml-stylesheet type="text/css" href="chrome://pEp4Tb/content/pEp.css"?>
<?xml-stylesheet type="text/css" href="chrome://pEp4Tb/content/dialogs/sync_wizard.css"?>
<?xml-stylesheet type="text/css" href="chrome://pEp4Tb/content/dialogs/common.css"?>
<?xml-stylesheet type="text/css" href="chrome://messenger/skin/themeableDialog.css"?>
<window windowtype="pEp:sync"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
title-localekey="syncWizardTitle"
lightweightthemes="true"
onload="pEpSyncWizard.onLoad()"
onclose="pEpSyncWizard.onClose()">
<script type="application/javascript" src="chrome://pEp4Tb/content/dialogs/sync_wizard.js"/>


+ 1
- 1
addon/content/tutorial/tutorial-1.html View File

@ -10,7 +10,7 @@
<span data-localekey="tutorial-1-2"></span><br><br>
<span data-localekey="tutorial-1-3"></span><br><br>
<img class="padImage" src="../resources/images/green-shield.svg"><span class="padText" data-localekey="privacyTextSecureAndTrusted"></span>
<div style="background: #E3D02E;">
<div style="background: #E3D02E; color:#000;">
<img class="padImage" src="../resources/images/yellow-shield-white.svg"><span class="padText" data-localekey="privacyTextSecure"></span>
</div>
</body>


+ 2
- 2
addon/content/tutorial/tutorial-3.html View File

@ -11,13 +11,13 @@
<tr><td>
<span data-localekey="tutorial-3-1"></span>
</td><td class="sizeTd">
<div style="background: #E3D02E;">
<div style="background: #E3D02E; color:#000;">
<img class="padImage" src="../resources/images/yellow-shield-white.svg"><span
class="padText" data-localekey="privacyTextSecure"></span></div>
</td></tr>
</table>
<div class="trustwords-tutorial">
<div style="margin: 0 auto; background-color: #fff; border: 1px solid #d3d3d3; padding: 0.2em;">
<div id="trustwords">
<span data-localekey="tutorial-3-2"></span>
</div>
<div class="actions">


+ 26
- 0
addon/content/tutorial/tutorial.css View File

@ -50,3 +50,29 @@
width: 32em;
height: 18em;
}
#trustwords {
margin: 0 auto;
background-color: #fff;
border: 1px solid #d3d3d3;
padding: 0.2em;
}
@media (prefers-color-scheme: dark) {
html {
scrollbar-color: rgba(249, 249, 250, .4) rgba(20, 20, 25, .3);
}
body {
color: #f9f9fa;
background-color: #2a2a2e;
}
.trustwords-tutorial {
background-color: #444;
}
#trustwords {
background-color: #202020;
border-color: #eee;
}
}

Loading…
Cancel
Save