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=""): def stdHtml(self, body, css=[], js=["jquery.js"], head=""):
if isWin: 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";' fontspec = 'font-size:12px;font-family:"Segoe UI";'
elif isMac: elif isMac:
family="Helvetica" family="Helvetica"
fontspec = 'font-size:15px;font-family:"%s";'% \ fontspec = 'font-size:15px;font-family:"%s";'% \
family family
buttonspec = """ widgetspec = """
button { font-size: 13px; -webkit-appearance: none; background: #fff; border: 1px solid #ccc; button { font-size: 13px; -webkit-appearance: none; background: #fff; border: 1px solid #ccc;
border-radius:5px; font-family: Helvetica }""" border-radius:5px; font-family: Helvetica }"""
else: else:
buttonspec = "" palette = self.style().standardPalette()
family = self.font().family() family = self.font().family()
fontspec = 'font-size:14px;font-family:"%s";'%\ color_hl = palette.color(QPalette.Highlight).name()
family 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")]+ csstxt = "\n".join([self.bundledCSS("webview.css")]+
[self.bundledCSS(fname) for fname in css]) [self.bundledCSS(fname) for fname in css])
jstxt = "\n".join([self.bundledScript("webview.js")]+ jstxt = "\n".join([self.bundledScript("webview.js")]+
@ -248,7 +266,7 @@ body {{ zoom: {}; {} }}
</head> </head>
<body>{}</body> <body>{}</body>
</html>""".format(self.title, self.zoomFactor(), fontspec, buttonspec, head, body) </html>""".format(self.title, self.zoomFactor(), fontspec, widgetspec, head, body)
#print(html) #print(html)
self.setHtml(html) self.setHtml(html)