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

webOS: Fixed UI scaling to use correct resolution styles

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

View file

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

View file

@ -1,13 +1,11 @@
/* @media only screen and ((max-width: 1919px) or (max-height: 1079px)) { */
/* @media only screen and ((max-width: 2559px) or (max-height: 1439px)) { */
.card {
padding: 15px;
padding: 25px;
}
.card-title {
line-height: 20px;
margin: 5px;
margin-bottom: 10px;
line-height: 24px;
margin: 10px;
}
.card-title-separator {
@ -15,190 +13,100 @@
}
.iconSize {
width: 32px;
height: 32px;
width: 48px;
height: 48px;
}
#overlay {
gap: 12.5vw;
font-size: 20px;
gap: unset;
/* gap: 15vw; */
font-size: 28px;
}
#main-view {
margin-right: 15vw;
}
#title-text {
font-size: 100px;
font-size: 140px;
}
#title-icon {
width: 84px;
height: 84px;
margin-right: 15px;
width: 124px;
height: 124px;
margin-right: 25px;
}
#connection-status {
padding: 15px;
padding: 25px;
}
#connection-error-icon {
margin-top: 10px;
margin-top: 20px;
}
#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;
}
#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 {
padding: 4px;
top: -100px;
padding: 12px;
top: -175px;
}
#toast-icon {
width: 40px;
height: 40px;
width: 70px;
height: 70px;
margin: 5px 10px;
margin-right: 15px;
}
#toast-text {
font-size: 18px;
}
font-size: 28px;
}
/* } */

View file

@ -10,14 +10,6 @@ html {
#overlay {
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 {
@ -33,6 +25,7 @@ html {
font-family: InterBold;
}
/* gap not supported in WebOS 6.0 */
#ips {
gap: unset;
}

View file

@ -1,101 +1,30 @@
/* @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;
}
/* @media only screen and ((max-width: 1919px) or (max-height: 1079px)) { */
#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;
width: 84px;
height: 84px;
}
.lds-ring {
width: 80px;
height: 80px;
width: 100px;
height: 100px;
}
.lds-ring div {
width: 64px;
height: 64px;
}
#connection-check {
width: 64px;
height: 64px;
margin: 20px;
width: 84px;
height: 84px;
}
#toast-notification {
padding: 4px;
top: -100px;
padding: 8px;
}
#toast-icon {
width: 40px;
height: 40px;
margin: 5px 5px;
margin-right: 10px;
}
#toast-text {
font-size: 18px;
font-size: 16px;
}
/* } */

View file

@ -1,204 +1,30 @@
/* @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;
}
/* @media only screen and ((max-width: 2559px) or (max-height: 1439px)) { */
#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;
width: 124px;
height: 124px;
}
.lds-ring {
width: 100px;
height: 100px;
width: 120px;
height: 120px;
}
.lds-ring div {
width: 84px;
height: 84px;
}
#connection-check {
width: 84px;
height: 84px;
margin: 24px;
width: 104px;
height: 104px;
}
#toast-notification {
padding: 8px;
top: -140px;
padding: 12px;
}
#toast-icon {
width: 60px;
height: 60px;
margin-right: 15px;
margin: 5px 5px;
margin-right: 10px;
}
#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;
}
}

View file

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

View file

@ -1,101 +1,30 @@
/* @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;
/* @media only screen and ((max-width: 1919px) or (max-height: 1079px)) { */
#titleIcon {
width: 84px;
height: 84px;
}
.lds-ring {
width: 80px;
height: 80px;
width: 100px;
height: 100px;
}
.lds-ring div {
width: 64px;
height: 64px;
}
#connection-check {
width: 64px;
height: 64px;
margin: 20px;
width: 84px;
height: 84px;
}
#toast-notification {
padding: 4px;
top: -100px;
padding: 8px;
}
#toast-icon {
width: 40px;
height: 40px;
margin: 5px 5px;
margin-right: 10px;
}
#toast-text {
font-size: 18px;
font-size: 16px;
}
/* } */

View file

@ -1,204 +1,30 @@
/* @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 {
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;
/* @media only screen and ((max-width: 2559px) or (max-height: 1439px)) { */
#titleIcon {
width: 124px;
height: 124px;
}
.lds-ring {
width: 100px;
height: 100px;
width: 120px;
height: 120px;
}
.lds-ring div {
width: 84px;
height: 84px;
}
#connection-check {
width: 84px;
height: 84px;
margin: 24px;
width: 104px;
height: 104px;
}
#toast-notification {
padding: 8px;
top: -140px;
padding: 12px;
}
#toast-icon {
width: 60px;
height: 60px;
margin-right: 15px;
margin: 5px 5px;
margin-right: 10px;
}
#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;
}
}

View file

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