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

Add widget styles for options/popup dark theme

Browse Source
This commit is contained in:
hensm
2020-02-17 00:57:04 +00:00
parent ae82679a8f
commit 1323682a67
6 changed files with 135 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
ext/src/ui/dark-widgets.css Normal file
View File

@@ -0,0 +1,86 @@
button,
.select-wrapper,
input {
background-color: var(--grey-60);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 3px;
color: white;
}
button:not(:disabled):hover,
.select-wrapper:not(:disabled):hover,
input[type="checkbox"]:not(:disabled):hover {
background-color: var(--grey-50);
}
button:not(:disabled):hover:active,
.select-wrapper:not(:disabled):hover:active,
input[type="checkbox"]:not(:disabled):hover:active {
background-color: rgb(94, 94, 99);
}
button:disabled,
input:disabled {
opacity: 0.35;
}
input[type="text"],
input[type="number"] {
padding: 2px;
}
input[type="checkbox"] {
-moz-appearance: none;
}
input[type="checkbox"]:checked {
background-color: var(--blue-60);
padding: 2px;
background-clip: content-box;
}
input[type="checkbox"]:not(:disabled):checked:hover {
background-color: var(--blue-50);
}
input[type="checkbox"]:not(:disabled):checked:hover:active {
background-color: var(--blue-70);
}
button:default {
background-color: var(--blue-60);
color: white !important;
}
button:default:hover {
background-color: var(--blue-50);
}
button:default:hover:active {
background-color: var(--blue-70);
}
.select-wrapper {
--arrow-width: 20px;
position: relative;
display: inline-block;
}
.select-wrapper::after {
align-items: center;
content: "▼";
display: flex;
height: 100%;
justify-content: center;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
width: var(--arrow-width);
}
select {
-moz-appearance: none;
background: inherit;
border: initial;
color: inherit;
padding-right: var(--arrow-width);
}
option {
color: white !important;
}
option:disabled {
color: rgba(255, 255, 255, 0.25) !important;
}

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

@@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="../photon-colors.css"> <link rel="stylesheet" href="../photon-colors.css">
<link rel="stylesheet" href="../dark-widgets.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="styles/index.css"> <link rel="stylesheet" href="styles/index.css">
<script src="bundle.js" defer></script> <script src="bundle.js" defer></script>

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

@@ -324,16 +324,18 @@ class OptionsApp extends Component<{}, OptionsAppState> {
{ _("optionsReceiverSelectorType") } { _("optionsReceiverSelectorType") }
</div> </div>
<div className="option__control"> <div className="option__control">
<select name="receiverSelectorType" <div className="select-wrapper">
value={ this.state.options?.receiverSelectorType } <select name="receiverSelectorType"
onChange={ this.handleReceiverSelectorTypeChange }> value={ this.state.options?.receiverSelectorType }
<option value={ ReceiverSelectorType.Popup }> onChange={ this.handleReceiverSelectorTypeChange }>
{ _("optionsReceiverSelectorTypeBrowser") } <option value={ ReceiverSelectorType.Popup }>
</option> { _("optionsReceiverSelectorTypeBrowser") }
<option value={ ReceiverSelectorType.Native }> </option>
{ _("optionsReceiverSelectorTypeNative") } <option value={ ReceiverSelectorType.Native }>
</option> { _("optionsReceiverSelectorTypeNative") }
</select> </option>
</select>
</div>
</div> </div>
</label> } </label> }

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

@@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="../photon-colors.css"> <link rel="stylesheet" href="../photon-colors.css">
<link rel="stylesheet" href="../dark-widgets.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="styles/index.css"> <link rel="stylesheet" href="styles/index.css">
<script src="bundle.js" defer></script> <script src="bundle.js" defer></script>

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

@@ -139,36 +139,38 @@ class PopupApp extends Component<{}, PopupAppState> {
<div className="media-select__label-cast"> <div className="media-select__label-cast">
{ _("popupMediaSelectCastLabel") } { _("popupMediaSelectCastLabel") }
</div> </div>
<select value={ this.state.mediaType } <div className="select-wrapper">
onChange={ this.onSelectChange } <select value={ this.state.mediaType }
className="media-select__dropdown"> onChange={ this.onSelectChange }
<option value={ ReceiverSelectorMediaType.App } className="media-select__dropdown">
disabled={ !(this.state.availableMediaTypes <option value={ ReceiverSelectorMediaType.App }
& ReceiverSelectorMediaType.App) }> disabled={ !(this.state.availableMediaTypes
{ (this.state.requestedAppId && knownApps[this.state.requestedAppId]?.name) & ReceiverSelectorMediaType.App) }>
?? _("popupMediaTypeApp") } { (this.state.requestedAppId && knownApps[this.state.requestedAppId]?.name)
</option> ?? _("popupMediaTypeApp") }
<option value={ ReceiverSelectorMediaType.Tab } </option>
disabled={ !(this.state.availableMediaTypes <option value={ ReceiverSelectorMediaType.Tab }
& ReceiverSelectorMediaType.Tab) }> disabled={ !(this.state.availableMediaTypes
{ _("popupMediaTypeTab") } & ReceiverSelectorMediaType.Tab) }>
</option> { _("popupMediaTypeTab") }
<option value={ ReceiverSelectorMediaType.Screen } </option>
disabled={ !(this.state.availableMediaTypes <option value={ ReceiverSelectorMediaType.Screen }
& ReceiverSelectorMediaType.Screen) }> disabled={ !(this.state.availableMediaTypes
{ _("popupMediaTypeScreen") } & ReceiverSelectorMediaType.Screen) }>
</option> { _("popupMediaTypeScreen") }
<option disabled> </option>
───── <option disabled>
</option> ─────
<option value={ ReceiverSelectorMediaType.File } </option>
disabled={ !(this.state.availableMediaTypes <option value={ ReceiverSelectorMediaType.File }
& ReceiverSelectorMediaType.File) }> disabled={ !(this.state.availableMediaTypes
{ this.state.filePath & ReceiverSelectorMediaType.File) }>
? truncatedFileName! { this.state.filePath
: _("popupMediaTypeFile") } ? truncatedFileName!
</option> : _("popupMediaTypeFile") }
</select> </option>
</select>
</div>
<div className="media-select__label-to"> <div className="media-select__label-to">
{ _("popupMediaSelectToLabel") } { _("popupMediaSelectToLabel") }
</div> </div>

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

@@ -7,7 +7,7 @@ body {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { body {
background: var(--grey-70) !important; background: var(--grey-80) !important;
color: white !important; color: white !important;
} }
.media-select { .media-select {
@@ -19,7 +19,9 @@ body {
} }
.media-select { .media-select {
align-items: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.25); border-bottom: 1px solid rgba(0, 0, 0, 0.25);
display: flex;
margin: 0 1em; margin: 0 1em;
padding: 0.75em 0; padding: 0.75em 0;
} }