mirrors/fcast
1
0
Fork 0
mirror of https://gitlab.com/futo-org/fcast.git synced 2025-08-31 19:43:07 +00:00
Code Activity

webOS: Fixed UI scaling to use correct resolution styles

Browse source
This commit is contained in:
Michael Hollister 2025-07-16 15:59:54 -05:00
parent 842eb1cd26
commit 82a10fc47c
9 changed files with 177 additions and 740 deletions
Download patch file Download diff file Expand all files Collapse all files

64
receivers/webos/fcast-receiver/src/main/1280x720.css
View file

@ -1,12 +1,12 @@
/* @media only screen and ((max-width: 1919px) or (max-height: 1079px)) { */
/* @media only screen and ((max-width: 1279px) or (max-height: 719px)) { */
.card { .card {
padding: 15px; padding: 15px;
} }
.card-title { .card-title {
line-height: 18px; line-height: 20px;
margin: 5px; margin: 5px;
margin-bottom: 10px;
} }
.card-title-separator { .card-title-separator {
@ -14,22 +14,27 @@
} }
.iconSize { .iconSize {
width: 24px; width: 32px;
height: 24px; height: 32px;
} }
#overlay { #overlay {
gap: 10vw; gap: unset;
font-size: 18px; /* gap: 12.5vw; */
font-size: 20px;
}
#main-view {
margin-right: 12.5vw;
} }
#title-text { #title-text {
font-size: 80px; font-size: 100px;
} }
#title-icon { #title-icon {
width: 64px; width: 84px;
height: 64px; height: 84px;
margin-right: 15px; margin-right: 15px;
} }
@ -50,10 +55,10 @@
} }
#qr-code { #qr-code {
width: 128px; width: 192px;
height: 128px; height: 192px;
margin: 15px auto; margin: 15px auto;
padding: 8px; padding: 12px;
} }
#ips { #ips {
@ -61,41 +66,42 @@
} }
.ip-entry-text { .ip-entry-text {
margin-top: 1.5px; margin-top: 4px;
margin-bottom: 1.5px; margin-bottom: 4px;
} }
#window-can-be-closed { #window-can-be-closed {
margin-bottom: 10px; margin-bottom: 15px;
font-size: 16px; font-size: 18px;
} }
.lds-ring { .lds-ring {
width: 80px; width: 100px;
height: 80px; height: 100px;
} }
.lds-ring div { .lds-ring div {
width: 64px; width: 84px;
height: 64px; height: 84px;
} }
#connection-check { #connection-check {
width: 64px; width: 84px;
height: 64px; height: 84px;
margin: 20px; margin: 24px;
} }
#toast-notification { #toast-notification {
padding: 4px; padding: 8px;
top: -100px; top: -140px;
} }
#toast-icon { #toast-icon {
width: 40px; width: 60px;
height: 40px; height: 60px;
margin-right: 15px;
} }
#toast-text { #toast-text {
font-size: 18px; font-size: 20px;
} }
/* } */ /* } */

236
receivers/webos/fcast-receiver/src/main/1920x1080.css
View file

@ -1,13 +1,11 @@
/* @media only screen and ((max-width: 2559px) or (max-height: 1439px)) { */
/* @media only screen and ((max-width: 1919px) or (max-height: 1079px)) { */
.card { .card {
padding: 15px; padding: 25px;
} }
.card-title { .card-title {
line-height: 20px; line-height: 24px;
margin: 5px; margin: 10px;
margin-bottom: 10px;
} }
.card-title-separator { .card-title-separator {
@ -15,190 +13,100 @@
} }
.iconSize { .iconSize {
width: 32px; width: 48px;
height: 32px; height: 48px;
} }
#overlay { #overlay {
gap: 12.5vw; gap: unset;
font-size: 20px; /* gap: 15vw; */
font-size: 28px;
}
#main-view {
margin-right: 15vw;
} }
#title-text { #title-text {
font-size: 100px; font-size: 140px;
} }
#title-icon { #title-icon {
width: 84px; width: 124px;
height: 84px; height: 124px;
margin-right: 15px; margin-right: 25px;
} }
#connection-status { #connection-status {
padding: 15px; padding: 25px;
} }
#connection-error-icon { #connection-error-icon {
margin-top: 10px; margin-top: 20px;
} }
#connection-information-loading-text { #connection-information-loading-text {
margin: 10px;
}
#scan-to-connect {
margin-top: 10px;
}
#qr-code {
width: 192px;
height: 192px;
margin: 15px auto;
padding: 12px;
}
#ips {
margin-top: 10px;
}
.ip-entry-text {
margin-top: 4px;
margin-bottom: 4px;
}
#window-can-be-closed {
margin-bottom: 15px;
font-size: 18px;
}
.lds-ring {
width: 100px;
height: 100px;
}
.lds-ring div {
width: 84px;
height: 84px;
}
#connection-check {
width: 84px;
height: 84px;
margin: 24px;
}
#toast-notification {
padding: 8px;
top: -140px;
}
#toast-icon {
width: 60px;
height: 60px;
margin-right: 15px;
}
#toast-text {
font-size: 20px;
}
/* } */
@media only screen and ((max-width: 1279px) or (max-height: 719px)) {
.card {
padding: 15px;
}
.card-title {
line-height: 18px;
margin: 5px;
}
.card-title-separator {
margin: 3px 0px;
}
.iconSize {
width: 24px;
height: 24px;
}
#overlay {
gap: 10vw;
font-size: 18px;
}
#title-text {
font-size: 80px;
}
#title-icon {
width: 64px;
height: 64px;
margin-right: 15px;
}
#connection-status {
padding: 15px;
}
#connection-error-icon {
margin-top: 10px;
}
#connection-information-loading-text {
margin: 10px;
}
#scan-to-connect {
margin-top: 10px;
}
#qr-code {
width: 128px;
height: 128px;
margin: 15px auto;
padding: 8px;
}
#ips {
margin-top: 10px;
}
.ip-entry-text {
margin-top: 1.5px;
margin-bottom: 1.5px;
}
#window-can-be-closed {
margin-bottom: 10px;
font-size: 16px;
}
.lds-ring {
width: 80px;
height: 80px;
}
.lds-ring div {
width: 64px;
height: 64px;
}
#connection-check {
width: 64px;
height: 64px;
margin: 20px; margin: 20px;
} }
#scan-to-connect {
margin-top: 20px;
}
#qr-code {
width: 256px;
height: 256px;
margin: 20px auto;
padding: 16px;
}
#connection-details-separator {
margin-top: 15px;
}
#ips {
margin-top: 20px;
gap: 15px;
}
.ip-entry-text {
margin-top: 7px;
margin-bottom: 7px;
}
#window-can-be-closed {
margin-bottom: 20px;
font-size: 24px;
}
.lds-ring {
width: 120px;
height: 120px;
}
.lds-ring div {
width: 104px;
height: 104px;
}
#connection-check {
width: 104px;
height: 104px;
margin: 28px;
}
#toast-notification { #toast-notification {
padding: 4px; padding: 12px;
top: -100px; top: -175px;
} }
#toast-icon { #toast-icon {
width: 40px; width: 70px;
height: 40px; height: 70px;
margin: 5px 10px;
margin-right: 15px;
} }
#toast-text { #toast-text {
font-size: 18px; font-size: 28px;
}
} }
/* } */

9
receivers/webos/fcast-receiver/src/main/style.css
View file

@ -10,14 +10,6 @@ html {
#overlay { #overlay {
font-family: InterRegular; font-family: InterRegular;
/* gap not supported in WebOS 6.0 */
gap: unset;
}
#main-view {
/* gap not supported in WebOS 6.0 */
gap: unset;
margin-right: 15vw;
} }
#title-text { #title-text {
@ -33,6 +25,7 @@ html {
font-family: InterBold; font-family: InterBold;
} }
/* gap not supported in WebOS 6.0 */
#ips { #ips {
gap: unset; gap: unset;
} }

93
receivers/webos/fcast-receiver/src/player/1280x720.css
View file

@ -1,101 +1,30 @@
/* @media only screen and ((max-width: 1919px) or (max-height: 1079px)) { */
/* @media only screen and ((max-width: 1279px) or (max-height: 719px)) { */
.card {
padding: 15px;
}
.card-title {
line-height: 18px;
margin: 5px;
}
.card-title-separator {
margin: 3px 0px;
}
.iconSize {
width: 24px;
height: 24px;
}
#overlay {
gap: 10vw;
font-size: 18px;
}
#title-text {
font-size: 80px;
}
#title-icon { #title-icon {
width: 64px; width: 84px;
height: 64px; height: 84px;
margin-right: 15px;
}
#connection-status {
padding: 15px;
}
#connection-error-icon {
margin-top: 10px;
}
#connection-information-loading-text {
margin: 10px;
}
#scan-to-connect {
margin-top: 10px;
}
#qr-code {
width: 128px;
height: 128px;
margin: 15px auto;
padding: 8px;
}
#ips {
margin-top: 10px;
}
.ip-entry-text {
margin-top: 1.5px;
margin-bottom: 1.5px;
}
#window-can-be-closed {
margin-bottom: 10px;
font-size: 16px;
} }
.lds-ring { .lds-ring {
width: 80px; width: 100px;
height: 80px; height: 100px;
} }
.lds-ring div { .lds-ring div {
width: 64px; width: 84px;
height: 64px; height: 84px;
}
#connection-check {
width: 64px;
height: 64px;
margin: 20px;
} }
#toast-notification { #toast-notification {
padding: 4px; padding: 8px;
top: -100px;
} }
#toast-icon { #toast-icon {
width: 40px; width: 40px;
height: 40px; height: 40px;
margin: 5px 5px;
margin-right: 10px;
} }
#toast-text { #toast-text {
font-size: 18px; font-size: 16px;
} }
/* } */ /* } */

196
receivers/webos/fcast-receiver/src/player/1920x1080.css
View file

@ -1,204 +1,30 @@
/* @media only screen and ((max-width: 2559px) or (max-height: 1439px)) { */
/* @media only screen and ((max-width: 1919px) or (max-height: 1079px)) { */
.card {
padding: 15px;
}
.card-title {
line-height: 20px;
margin: 5px;
margin-bottom: 10px;
}
.card-title-separator {
margin: 3px 0px;
}
.iconSize {
width: 32px;
height: 32px;
}
#overlay {
gap: 12.5vw;
font-size: 20px;
}
#title-text {
font-size: 100px;
}
#title-icon { #title-icon {
width: 84px; width: 124px;
height: 84px; height: 124px;
margin-right: 15px;
}
#connection-status {
padding: 15px;
}
#connection-error-icon {
margin-top: 10px;
}
#connection-information-loading-text {
margin: 10px;
}
#scan-to-connect {
margin-top: 10px;
}
#qr-code {
width: 192px;
height: 192px;
margin: 15px auto;
padding: 12px;
}
#ips {
margin-top: 10px;
}
.ip-entry-text {
margin-top: 4px;
margin-bottom: 4px;
}
#window-can-be-closed {
margin-bottom: 15px;
font-size: 18px;
} }
.lds-ring { .lds-ring {
width: 100px; width: 120px;
height: 100px; height: 120px;
} }
.lds-ring div { .lds-ring div {
width: 84px; width: 104px;
height: 84px; height: 104px;
}
#connection-check {
width: 84px;
height: 84px;
margin: 24px;
} }
#toast-notification { #toast-notification {
padding: 8px; padding: 12px;
top: -140px;
} }
#toast-icon { #toast-icon {
width: 60px; width: 60px;
height: 60px; height: 60px;
margin-right: 15px; margin: 5px 5px;
margin-right: 10px;
} }
#toast-text { #toast-text {
font-size: 20px; font-size: 22px;
} }
/* } */ /* } */
@media only screen and ((max-width: 1279px) or (max-height: 719px)) {
.card {
padding: 15px;
}
.card-title {
line-height: 18px;
margin: 5px;
}
.card-title-separator {
margin: 3px 0px;
}
.iconSize {
width: 24px;
height: 24px;
}
#overlay {
gap: 10vw;
font-size: 18px;
}
#title-text {
font-size: 80px;
}
#title-icon {
width: 64px;
height: 64px;
margin-right: 15px;
}
#connection-status {
padding: 15px;
}
#connection-error-icon {
margin-top: 10px;
}
#connection-information-loading-text {
margin: 10px;
}
#scan-to-connect {
margin-top: 10px;
}
#qr-code {
width: 128px;
height: 128px;
margin: 15px auto;
padding: 8px;
}
#ips {
margin-top: 10px;
}
.ip-entry-text {
margin-top: 1.5px;
margin-bottom: 1.5px;
}
#window-can-be-closed {
margin-bottom: 10px;
font-size: 16px;
}
.lds-ring {
width: 80px;
height: 80px;
}
.lds-ring div {
width: 64px;
height: 64px;
}
#connection-check {
width: 64px;
height: 64px;
margin: 20px;
}
#toast-notification {
padding: 4px;
top: -100px;
}
#toast-icon {
width: 40px;
height: 40px;
}
#toast-text {
font-size: 18px;
}
}

12
receivers/webos/fcast-receiver/src/player/style.css
View file

@ -1,5 +1,9 @@
/* WebOS custom player styles */ /* WebOS custom player styles */
html {
overflow: hidden;
}
.container { .container {
height: 240px; height: 240px;
} }
@ -180,3 +184,11 @@
#captions { #captions {
display: none; display: none;
} }
#toast-notification {
gap: unset;
}
#toast-text {
font-family: InterRegular;
}

95
receivers/webos/fcast-receiver/src/viewer/1280x720.css
View file

@ -1,101 +1,30 @@
/* @media only screen and ((max-width: 1919px) or (max-height: 1079px)) { */
/* @media only screen and ((max-width: 1279px) or (max-height: 719px)) { */ #titleIcon {
.card { width: 84px;
padding: 15px; height: 84px;
}
.card-title {
line-height: 18px;
margin: 5px;
}
.card-title-separator {
margin: 3px 0px;
}
.iconSize {
width: 24px;
height: 24px;
}
#overlay {
gap: 10vw;
font-size: 18px;
}
#title-text {
font-size: 80px;
}
#title-icon {
width: 64px;
height: 64px;
margin-right: 15px;
}
#connection-status {
padding: 15px;
}
#connection-error-icon {
margin-top: 10px;
}
#connection-information-loading-text {
margin: 10px;
}
#scan-to-connect {
margin-top: 10px;
}
#qr-code {
width: 128px;
height: 128px;
margin: 15px auto;
padding: 8px;
}
#ips {
margin-top: 10px;
}
.ip-entry-text {
margin-top: 1.5px;
margin-bottom: 1.5px;
}
#window-can-be-closed {
margin-bottom: 10px;
font-size: 16px;
} }
.lds-ring { .lds-ring {
width: 80px; width: 100px;
height: 80px; height: 100px;
} }
.lds-ring div { .lds-ring div {
width: 64px; width: 84px;
height: 64px; height: 84px;
}
#connection-check {
width: 64px;
height: 64px;
margin: 20px;
} }
#toast-notification { #toast-notification {
padding: 4px; padding: 8px;
top: -100px;
} }
#toast-icon { #toast-icon {
width: 40px; width: 40px;
height: 40px; height: 40px;
margin: 5px 5px;
margin-right: 10px;
} }
#toast-text { #toast-text {
font-size: 18px; font-size: 16px;
} }
/* } */ /* } */

198
receivers/webos/fcast-receiver/src/viewer/1920x1080.css
View file

@ -1,204 +1,30 @@
/* @media only screen and ((max-width: 2559px) or (max-height: 1439px)) { */
/* @media only screen and ((max-width: 1919px) or (max-height: 1079px)) { */ #titleIcon {
.card { width: 124px;
padding: 15px; height: 124px;
}
.card-title {
line-height: 20px;
margin: 5px;
margin-bottom: 10px;
}
.card-title-separator {
margin: 3px 0px;
}
.iconSize {
width: 32px;
height: 32px;
}
#overlay {
gap: 12.5vw;
font-size: 20px;
}
#title-text {
font-size: 100px;
}
#title-icon {
width: 84px;
height: 84px;
margin-right: 15px;
}
#connection-status {
padding: 15px;
}
#connection-error-icon {
margin-top: 10px;
}
#connection-information-loading-text {
margin: 10px;
}
#scan-to-connect {
margin-top: 10px;
}
#qr-code {
width: 192px;
height: 192px;
margin: 15px auto;
padding: 12px;
}
#ips {
margin-top: 10px;
}
.ip-entry-text {
margin-top: 4px;
margin-bottom: 4px;
}
#window-can-be-closed {
margin-bottom: 15px;
font-size: 18px;
} }
.lds-ring { .lds-ring {
width: 100px; width: 120px;
height: 100px; height: 120px;
} }
.lds-ring div { .lds-ring div {
width: 84px; width: 104px;
height: 84px; height: 104px;
}
#connection-check {
width: 84px;
height: 84px;
margin: 24px;
} }
#toast-notification { #toast-notification {
padding: 8px; padding: 12px;
top: -140px;
} }
#toast-icon { #toast-icon {
width: 60px; width: 60px;
height: 60px; height: 60px;
margin-right: 15px; margin: 5px 5px;
margin-right: 10px;
} }
#toast-text { #toast-text {
font-size: 20px; font-size: 22px;
} }
/* } */ /* } */
@media only screen and ((max-width: 1279px) or (max-height: 719px)) {
.card {
padding: 15px;
}
.card-title {
line-height: 18px;
margin: 5px;
}
.card-title-separator {
margin: 3px 0px;
}
.iconSize {
width: 24px;
height: 24px;
}
#overlay {
gap: 10vw;
font-size: 18px;
}
#title-text {
font-size: 80px;
}
#title-icon {
width: 64px;
height: 64px;
margin-right: 15px;
}
#connection-status {
padding: 15px;
}
#connection-error-icon {
margin-top: 10px;
}
#connection-information-loading-text {
margin: 10px;
}
#scan-to-connect {
margin-top: 10px;
}
#qr-code {
width: 128px;
height: 128px;
margin: 15px auto;
padding: 8px;
}
#ips {
margin-top: 10px;
}
.ip-entry-text {
margin-top: 1.5px;
margin-bottom: 1.5px;
}
#window-can-be-closed {
margin-bottom: 10px;
font-size: 16px;
}
.lds-ring {
width: 80px;
height: 80px;
}
.lds-ring div {
width: 64px;
height: 64px;
}
#connection-check {
width: 64px;
height: 64px;
margin: 20px;
}
#toast-notification {
padding: 4px;
top: -100px;
}
#toast-icon {
width: 40px;
height: 40px;
}
#toast-text {
font-size: 18px;
}
}

8
receivers/webos/fcast-receiver/src/viewer/style.css
View file

@ -3,3 +3,11 @@
html { html {
overflow: hidden; overflow: hidden;
} }
#toast-notification {
gap: unset;
}
#toast-text {
font-family: InterRegular;
}