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

Improve mirroring stream options style

Browse Source
This commit is contained in:
hensm
2022-09-07 17:12:03 +01:00
parent eac20dfe4a
commit ba6d5fc3df
3 changed files with 23 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ext/src/_locales/en/messages.json
View File

@@ -498,8 +498,8 @@
"message": "App ID for a registered Chromecast receiver application. Advanced use only. Must be compatible with the default app (see GitHub repo).", "message": "App ID for a registered Chromecast receiver application. Advanced use only. Must be compatible with the default app (see GitHub repo).",
"description": "Mirroring app ID option description." "description": "Mirroring app ID option description."
}, },
"optionsMirroringMediaStreamOptions": { "optionsMirroringStreamOptions": {
"message": "Media stream encoding options", "message": "Stream encoding options",
"description": "Options page mirroring category description." "description": "Options page mirroring category description."
}, },
"optionsMirroringStreamFrameRate": { "optionsMirroringStreamFrameRate": {
@@ -527,7 +527,7 @@
"description": "Mirroring stream resolution option label." "description": "Mirroring stream resolution option label."
}, },
"optionsMirroringStreamMaxResolutionDescription": { "optionsMirroringStreamMaxResolutionDescription": {
"message": "Limits the maximum video stream resolution whilst maintaining the source aspect ratio.", "message": "Limits the maximum video stream resolution while maintaining the source aspect ratio.",
"description": "Mirroring stream resolution option description." "description": "Mirroring stream resolution option description."
}, },
"optionsMirroringStreamMaxResolutionWidthPlaceholder": { "optionsMirroringStreamMaxResolutionWidthPlaceholder": {

5
ext/src/ui/options/Options.svelte
View File

@@ -195,6 +195,7 @@
{_("optionsMirroringEnabled")} {_("optionsMirroringEnabled")}
</label> </label>
</div> </div>
<div class="option"> <div class="option">
<label class="option__label" for="mirroringAppId"> <label class="option__label" for="mirroringAppId">
{_("optionsMirroringAppId")} {_("optionsMirroringAppId")}
@@ -214,10 +215,10 @@
<details class="mirroring-stream"> <details class="mirroring-stream">
<summary> <summary>
{_("optionsMirroringMediaStreamOptions")} {_("optionsMirroringStreamOptions")}
</summary> </summary>
<div class="mirroring-stream__options category"> <div class="mirroring-stream__options">
<div class="option option--inline scaling-resolution"> <div class="option option--inline scaling-resolution">
<div class="option__control"> <div class="option__control">
<input <input

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

@@ -246,6 +246,10 @@ input:placeholder-shown {
.category > details:not([open]) > summary ~ * { .category > details:not([open]) > summary ~ * {
display: none; display: none;
} }
.category > details:not([open]) > summary,
.category > details[open] > :last-child {
margin-bottom: 5px;
}
.category__name { .category__name {
float: left; float: left;
@@ -334,12 +338,22 @@ fieldset:disabled .option__description {
.mirroring-stream > summary { .mirroring-stream > summary {
color: var(--secondary-color); color: var(--secondary-color);
} }
.category.mirroring-stream__options { .mirroring-stream__options {
background-color: var(--overlay-color); background-color: var(--overlay-color);
border-radius: 4px; border-radius: 4px;
column-gap: 10px;
display: flex;
flex-direction: column;
grid-column: 2; grid-column: 2;
grid-template-columns: max-content 1fr; padding: 10px 20px;
padding: 10px; row-gap: 5px;
}
.mirroring-stream__options > .option:not(.option--inline) {
display: flex;
gap: inherit;
}
.mirroring-stream__options .option__label {
flex-shrink: 0;
} }
.whitelist { .whitelist {