Improve mirroring stream options style

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

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).",
"description": "Mirroring app ID option description."
},
"optionsMirroringMediaStreamOptions": {
"message": "Media stream encoding options",
"optionsMirroringStreamOptions": {
"message": "Stream encoding options",
"description": "Options page mirroring category description."
},
"optionsMirroringStreamFrameRate": {
@@ -527,7 +527,7 @@
"description": "Mirroring stream resolution option label."
},
"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."
},
"optionsMirroringStreamMaxResolutionWidthPlaceholder": {

View File

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

View File

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