Improve macOS styles in popup

This commit is contained in:
hensm
2018-11-29 00:18:17 +00:00
parent b7fbbb29d0
commit ffa2a84793
4 changed files with 37 additions and 3 deletions

View File

@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="styles/index.css">
<script src="bundle.js" defer></script> <script src="bundle.js" defer></script>
</head> </head>
<body> <body>

View File

@@ -5,6 +5,18 @@ import ReactDOM from "react-dom";
const _ = browser.i18n.getMessage; const _ = browser.i18n.getMessage;
// macOS styles
browser.runtime.getPlatformInfo()
.then(platformInfo => {
if (platformInfo.os === "mac") {
const link = document.createElement("link");
link.rel = "stylesheet";
link.href = "styles/mac.css";
document.head.appendChild(link);
}
});
let winWidth = 350; let winWidth = 350;
let winHeight = 200; let winHeight = 200;
@@ -97,11 +109,12 @@ class App extends Component {
to: to:
</div> </div>
<ul className="receivers"> <ul className="receivers">
{ this.state.receivers.map(receiver => { { this.state.receivers.map((receiver, i) => {
return ( return (
<Receiver receiver={receiver} <Receiver receiver={receiver}
onCast={this.onCast.bind(this)} onCast={this.onCast.bind(this)}
isLoading={this.state.isLoading} /> isLoading={this.state.isLoading}
key={i}/>
); );
})} })}
</ul> </ul>

21
ext/src/popup/styles/mac.css Executable file
View File

@@ -0,0 +1,21 @@
body {
background: rgb(236, 236, 236);
font: menu;
}
button,
select {
font: inherit;
}
button:not([disabled]):hover:active {
color: -moz-mac-buttonactivetext;
}
.receiver-address {
font: message-box;
}
.receiver-connect {
height: 22px;
}