Fix: Added a workaround for incompatible icons on WebOS

This commit is contained in:
lscambo13
2025-03-17 06:36:01 -07:00
parent 7411aa59f7
commit f3655a2e3f
2 changed files with 27 additions and 13 deletions

View File

@@ -86,7 +86,7 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
<summary>1⃣ - <i>How do I check if I am using the latest version on ElegantFin?</i></summary> <summary>1⃣ - <i>How do I check if I am using the latest version on ElegantFin?</i></summary>
- To make sure that you are using the latest version of ElegantFin, check the version number at the bottom in the Dashboard screen. - To make sure that you are using the latest version of ElegantFin, check the version number at the bottom in the Dashboard screen.
- It should be something like ElegantFin v24.12.XX - It should be something like ElegantFin v25.03.XX
</details> </details>
<details> <details>
@@ -103,11 +103,24 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
<summary>3⃣ - <i>Why do I notice visual bugs and inconsistencies on Jellyfin Media Player?</i></summary> <summary>3⃣ - <i>Why do I notice visual bugs and inconsistencies on Jellyfin Media Player?</i></summary>
- Currently JMP uses Qt 5.x which uses an outdated web engine, so many new CSS features do not work. Once they release a new version based on Qt 6.x, most issues should automatically be resolved. Until then, I advise using the web app instead. - Currently JMP uses Qt 5.x which uses an outdated web engine, so many new CSS features do not work. Once they release a new version based on Qt 6.x, most issues should automatically be resolved. Until then, I advise using the web app instead.
- Are you not using JMP and still facing issues? See the 4th point below.
</details> </details>
<details> <details>
<summary>4⃣ - <i>How do I report bugs/issues?</i></summary> <summary>4⃣ - <i>All the icons on my LG TV seem to be broken. How to fix?</i></summary>
- It seems that modern Material Icons which this theme uses are [not compatible on some WebOS TVs](https://github.com/lscambo13/ElegantFin/issues/39). There is a [huge similar thread](https://www.reddit.com/r/youtubetv/comments/e27go3/chinese_symbols_instead_of_icons_on_lg_tv/) about this.
- This bug can be fixed by using the older icons, so I have implemented the following workaround to bring back older, supported icons.
- Simply add the following code at the end in Custom CSS box and save, then refresh your apps and webpages:
```
:root{
--iconPack: 'Material Icons';
}
```
</details>
<details>
<summary>5⃣ - <i>How do I report bugs/issues?</i></summary>
- First check [here](https://github.com/lscambo13/ElegantFin/issues?q=) whether a similar issue has been reported already. If it exists, upvote and comment there to let me know. - First check [here](https://github.com/lscambo13/ElegantFin/issues?q=) whether a similar issue has been reported already. If it exists, upvote and comment there to let me know.
- Alternatively, create a new issue [here](https://github.com/lscambo13/ElegantFin/issues/new/choose). - Alternatively, create a new issue [here](https://github.com/lscambo13/ElegantFin/issues/new/choose).
@@ -115,7 +128,7 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
</details> </details>
<details> <details>
<summary>5️⃣ - <i>When can I expect another update?</i></summary> <summary>6️⃣ - <i>When can I expect another update?</i></summary>
- 🤷 - 🤷
</details> </details>

View File

@@ -1323,7 +1323,8 @@ div[data-role=controlgroup] a.ui-btn-active {
color: #fff !important; color: #fff !important;
} }
.guide-date-tab-button.emby-tab-button-active, .guide-date-tab-button:focus { .guide-date-tab-button.emby-tab-button-active,
.guide-date-tab-button:focus {
color: white; color: white;
} }
@@ -1936,7 +1937,7 @@ div[data-role=controlgroup] a.ui-btn-active {
} }
#liveTvSuggestedPage, #liveTvSuggestedPage,
.liveTvContainer{ .liveTvContainer {
background-color: var(--tableBodyColor); background-color: var(--tableBodyColor);
} }
@@ -1946,7 +1947,7 @@ div[data-role=controlgroup] a.ui-btn-active {
margin-block: .5em !important; margin-block: .5em !important;
} }
.guideVerticalScroller{ .guideVerticalScroller {
padding: 0; padding: 0;
} }
@@ -2015,7 +2016,7 @@ table:not(.MuiTable-root.MuiTable-stickyHeader) {
overflow: hidden; overflow: hidden;
} }
.detailTableHeaderCell{ .detailTableHeaderCell {
vertical-align: middle; vertical-align: middle;
} }
@@ -2026,7 +2027,7 @@ table:not(.MuiTable-root.MuiTable-stickyHeader) {
#serverActivityPage .MuiPaper-elevation2, #serverActivityPage .MuiPaper-elevation2,
#serverActivityPage .MuiPaper-elevation2>.MuiBox-root, #serverActivityPage .MuiPaper-elevation2>.MuiBox-root,
#serverActivityPage .MuiTableRow-root.MuiTableRow-head{ #serverActivityPage .MuiTableRow-root.MuiTableRow-head {
background-color: var(--tableBodyColor); background-color: var(--tableBodyColor);
} }
@@ -2367,12 +2368,12 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
min-width: 72px; min-width: 72px;
} }
.MuiTabs-flexContainer>.MuiButtonBase-root.Mui-selected{ .MuiTabs-flexContainer>.MuiButtonBase-root.Mui-selected {
color: white; color: white;
background-color: transparent !important; background-color: transparent !important;
} }
.MuiToggleButtonGroup-grouped.Mui-selected{ .MuiToggleButtonGroup-grouped.Mui-selected {
color: white; color: white;
} }
@@ -2381,6 +2382,6 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
background-color: transparent; background-color: transparent;
} }
#viewPanel .ui-panel-inner{ #viewPanel .ui-panel-inner {
margin-top: 4em; margin-top: 4em;
} }