Try to more closely imitate native widget theming on Linux

Renames stdHtml buttonspec to widgetspec, and applies a number of Linux-
specific adjustments, including:

+ updated button designs that more native/modern
+ updated widget focus colors that follow the theme
  default color palette
This commit is contained in:
Glutanimate 2018-08-30 22:07:06 +02:00
parent 2ff1376336
commit 2f58152f13

View file

@ -213,20 +213,38 @@ class AnkiWebView(QWebEngineView):
def stdHtml(self, body, css=[], js=["jquery.js"], head=""):
if isWin:
buttonspec = "button { font-size: 12px; font-family:'Segoe UI'; }"
widgetspec = "button { font-size: 12px; font-family:'Segoe UI'; }"
fontspec = 'font-size:12px;font-family:"Segoe UI";'
elif isMac:
family="Helvetica"
fontspec = 'font-size:15px;font-family:"%s";'% \
family
buttonspec = """
widgetspec = """
button { font-size: 13px; -webkit-appearance: none; background: #fff; border: 1px solid #ccc;
border-radius:5px; font-family: Helvetica }"""
else:
buttonspec = ""
palette = self.style().standardPalette()
family = self.font().family()
fontspec = 'font-size:14px;font-family:"%s";'%\
family
color_hl = palette.color(QPalette.Highlight).name()
color_hl_txt = palette.color(QPalette.HighlightedText).name()
color_btn = palette.color(QPalette.Button).name()
fontspec = 'font-size:14px;font-family:"%s";'% family
widgetspec = """
/* Buttons */
button{ font-size:14px; -webkit-appearance:none; outline:0;
background-color: %(color_btn)s; border:1px solid rgba(0,0,0,.2);
border-radius:2px; height:24px; font-family:"%(family)s"; }
button:focus{ border-color: %(color_hl)s }
button:hover{ background-color:#fff }
button:active, button:active:hover { background-color: %(color_hl)s; color: %(color_hl_txt)s;}
/* Input field focus outline */
textarea:focus, input:focus, input[type]:focus, .uneditable-input:focus,
div[contenteditable="true"]:focus {
outline: 0 none;
border-color: %(color_hl)s;
}""" % {"family": family, "color_btn": color_btn,
"color_hl": color_hl, "color_hl_txt": color_hl_txt}
csstxt = "\n".join([self.bundledCSS("webview.css")]+
[self.bundledCSS(fname) for fname in css])
jstxt = "\n".join([self.bundledScript("webview.js")]+
@ -248,7 +266,7 @@ body {{ zoom: {}; {} }}
</head>
<body>{}</body>
</html>""".format(self.title, self.zoomFactor(), fontspec, buttonspec, head, body)
</html>""".format(self.title, self.zoomFactor(), fontspec, widgetspec, head, body)
#print(html)
self.setHtml(html)