sam_oneal/fx_cast
1
0
Fork 0
mirror of https://github.com/hensm/fx_cast.git synced 2026-06-08 08:39:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add dark theme for options/popup

Browse Source
This commit is contained in:
hensm
2020-02-15 06:21:31 +00:00
parent 14999a4f57
commit a76332e9ee
7 changed files with 156 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
ext/src/ui/options/index.html
View File

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

16
ext/src/ui/options/index.tsx
View File

@@ -424,12 +424,14 @@ class OptionsApp extends Component<{}, OptionsAppState> {
<hr />
<div className="about__license">
<h3>LICENSE</h3>
<details className="about__license">
<summary>
<h3>LICENSE</h3>
</summary>
<div className="about__license-text">
{ LICENSE.replace(/\S\n\S/g, "") }
</div>
</div>
</details>
<hr />
@@ -437,19 +439,19 @@ class OptionsApp extends Component<{}, OptionsAppState> {
<h3>TRANSLATORS</h3>
<ul>
<li className="translator">
<a>@RAVMN</a>
@RAVMN
<div className="translator__tag">es</div>
</li>
<li className="translator">
<a>@rimrul</a>
@rimrul
<div className="translator__tag">de</div>
</li>
<li className="translator">
<a>@ThaDaVos</a>
@ThaDaVos
<div className="translator__tag">nl</div>
</li>
<li className="translator">
<a>@Vistaus</a>
@Vistaus
<div className="translator__tag">nl</div>
</li>
</ul>

37
ext/src/ui/options/styles/index.css
View File

@@ -3,8 +3,43 @@
--secondary-color: rgb(125, 125, 125);
}
@media (prefers-color-scheme: dark) {
:root {
--border-color: var(--grey-50);
--secondary-color: var(--grey-10-a60);
}
a { color: var(--blue-40); }
a:hover { color: var(--blue-50); }
a:hover:active { color: var(--blue-60); }
body {
background: #202023 !important;
color: white !important;
}
.editable-list {
background-color: #202023 !important;
color: white !important;
}
.editable-list__item:nth-child(even) {
background-color: initial !important;
}
.editable-list__item:nth-child(odd) {
background-color: var(--grey-80) !important;
}
.about,
.about > summary {
background-color: rgba(255, 255, 255, 0.1) !important;
}
.about hr {
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
}
*:invalid {
box-shadow: 0 0 1.5px 1px red;
box-shadow: 0 0 1.5px 1px var(--red-50);
}
#root {

91
ext/src/ui/photon-colors.css Normal file
View File

@@ -0,0 +1,91 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* Photon Colors CSS Variables v3.2.0 */
:root {
--magenta-50: #ff1ad9;
--magenta-60: #ed00b5;
--magenta-70: #b5007f;
--magenta-80: #7d004f;
--magenta-90: #440027;
--purple-30: #c069ff;
--purple-40: #ad3bff;
--purple-50: #9400ff;
--purple-60: #8000d7;
--purple-70: #6200a4;
--purple-80: #440071;
--purple-90: #25003e;
--blue-40: #45a1ff;
--blue-50: #0a84ff;
--blue-50-a30: rgba(10, 132, 255, 0.3);
--blue-60: #0060df;
--blue-70: #003eaa;
--blue-80: #002275;
--blue-90: #000f40;
--teal-50: #00feff;
--teal-60: #00c8d7;
--teal-70: #008ea4;
--teal-80: #005a71;
--teal-90: #002d3e;
--green-50: #30e60b;
--green-60: #12bc00;
--green-70: #058b00;
--green-80: #006504;
--green-90: #003706;
--yellow-50: #ffe900;
--yellow-60: #d7b600;
--yellow-70: #a47f00;
--yellow-80: #715100;
--yellow-90: #3e2800;
--red-50: #ff0039;
--red-60: #d70022;
--red-70: #a4000f;
--red-80: #5a0002;
--red-90: #3e0200;
--orange-50: #ff9400;
--orange-60: #d76e00;
--orange-70: #a44900;
--orange-80: #712b00;
--orange-90: #3e1300;
--grey-10: #f9f9fa;
--grey-10-a10: rgba(249, 249, 250, 0.1);
--grey-10-a20: rgba(249, 249, 250, 0.2);
--grey-10-a40: rgba(249, 249, 250, 0.4);
--grey-10-a60: rgba(249, 249, 250, 0.6);
--grey-10-a80: rgba(249, 249, 250, 0.8);
--grey-20: #ededf0;
--grey-30: #d7d7db;
--grey-40: #b1b1b3;
--grey-50: #737373;
--grey-60: #4a4a4f;
--grey-70: #38383d;
--grey-80: #2a2a2e;
--grey-90: #0c0c0d;
--grey-90-a05: rgba(12, 12, 13, 0.05);
--grey-90-a10: rgba(12, 12, 13, 0.1);
--grey-90-a20: rgba(12, 12, 13, 0.2);
--grey-90-a30: rgba(12, 12, 13, 0.3);
--grey-90-a40: rgba(12, 12, 13, 0.4);
--grey-90-a50: rgba(12, 12, 13, 0.5);
--grey-90-a60: rgba(12, 12, 13, 0.6);
--grey-90-a70: rgba(12, 12, 13, 0.7);
--grey-90-a80: rgba(12, 12, 13, 0.8);
--grey-90-a90: rgba(12, 12, 13, 0.9);
--ink-70: #363959;
--ink-80: #202340;
--ink-90: #0f1126;
--white-100: #ffffff;
}

3
ext/src/ui/popup/index.html
View File

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

2
ext/src/ui/popup/index.tsx
View File

@@ -310,7 +310,7 @@ class ReceiverEntry extends Component<ReceiverEntryProps, ReceiverEntryState> {
? `${this.props.receiver.host}:${this.props.receiver.port}`
: application.statusText }
</div>
<button className="receiver__connect"
<button className="button receiver__connect"
onClick={ this.handleCast }
disabled={ this.state.showAlternateAction
? application.isIdleScreen

13
ext/src/ui/popup/styles/index.css
View File

@@ -5,6 +5,19 @@ body {
font: message-box;
}
@media (prefers-color-scheme: dark) {
body {
background: var(--grey-70) !important;
color: white !important;
}
.media-select {
border-bottom-color: var(--grey-50) !important;
}
.receiver__address {
color: var(--grey-10-a60) !important;
}
}
.media-select {
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
margin: 0 1em;