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">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="styles/index.css">
<script src="bundle.js" defer></script>
</head>
<body>

View File

@@ -5,6 +5,18 @@ import ReactDOM from "react-dom";
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 winHeight = 200;
@@ -97,11 +109,12 @@ class App extends Component {
to:
</div>
<ul className="receivers">
{ this.state.receivers.map(receiver => {
{ this.state.receivers.map((receiver, i) => {
return (
<Receiver receiver={receiver}
onCast={this.onCast.bind(this)}
isLoading={this.state.isLoading} />
isLoading={this.state.isLoading}
key={i}/>
);
})}
</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;
}