sam_oneal/fx_cast
1
0
Fork 0
mirror of https://github.com/hensm/fx_cast.git synced 2026-06-10 09:39:58 +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 {