From 8f25126e043529b42c75a6aa32eca7a5edc9f233 Mon Sep 17 00:00:00 2001 From: tim-vu Date: Tue, 12 May 2026 11:58:21 +0200 Subject: [PATCH] New: Faster page loading with optimized icon bundle (#288) * Optimize icon bundle * Move changes to nightly --- Theme/ElegantFin-theme-nightly.css | 69 ++++++++++++++---------------- 1 file changed, 31 insertions(+), 38 deletions(-) diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css index c8b57fa..2b181a4 100644 --- a/Theme/ElegantFin-theme-nightly.css +++ b/Theme/ElegantFin-theme-nightly.css @@ -120,7 +120,7 @@ /* use 'Material Icons Round' for the new icons [default]; use 'Material Icons' to revert to old icons */ - --iconPack: "Material Icons Round", Material Icons; + --iconPack: "Material Symbols Rounded", Material Icons; /* none: hides the watched and mark favorite buttons on hover [default]; block: makes them visible use block */ @@ -198,38 +198,29 @@ select { } /* Material Icons Round */ -/* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200 */ +/* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=add,airplay,album,arrow_back,arrow_forward,arrow_upward,audiotrack,autorenew,backspace,book,brightness_high,call_split,cast,check,chevron_left,chevron_right,clear,close,closed_caption,cloud_download,content_copy,dashboard,delete,devices_other,download,drag_handle,dvr,exit_to_app,expand_more,explore,fast_forward,fast_rewind,favorite,fiber_manual_record,fiber_smart_record,file_download,filter_alt,folder,folder_open,forward_30,fullscreen,get_app,groups,home,image,info,info_outline,keyboard,keyboard_arrow_down,keyboard_arrow_left,keyboard_arrow_right,keyboard_arrow_up,keyboard_return,library_add_check,live_tv,local_movies,lock,lyrics,menu,mode_edit,more_vert,movie,music_note,music_video,navigate_before,navigate_next,pause,pause_circle_filled,pause_circle_outline,person,phonelink_lock,photo,photo_album,picture_in_picture_alt,play,play_arrow,play_circle_filled,play_circle_outline,playlist_add,preview,queue,queue_music,quiz,redo,refresh,remove_circle,remove_red_eye,repeat,repeat_one,replay,replay_10,save,schedule,search,settings,shuffle,skip_next,skip_previous,sort_by_alpha,space_bar,star,stop,storage,subtitles,sync,text_decrease,text_increase,theaters,toc,tv,undo,update,video_library,videocam,view_comfy,volume_off,volume_up */ @font-face { - font-family: "Material Icons Round"; - font-style: normal; - font-weight: 100 700; - font-display: swap; - src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v267/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2) - format("woff2"); + font-family: 'Material Symbols Rounded'; + font-style: normal; + font-weight: 100 700; + src: url(https://fonts.gstatic.com/l/font?kit=sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjzarESMdAUY9qjb3u1M7e05tMSFFiwiIx7ihGnzWmz-lkbsBJUso54WUKiEWtV5-yu0mchXaMnO1vqpcxiqEd46a1XUtwWncyNNmxYr8hocRsPBG56BqeEkny0qMU_aSz_M2MYR8p9qc8uUfT0rnccAg__qWWJGuzJMRCBsajdQcef&skey=70ddea8fe54d532e&v=v338) format('woff2'); } .material-icons { - font-family: var(--iconPack) !important; - font-weight: normal; - font-style: normal; - display: inline-block; - line-height: 1; - text-transform: none; - letter-spacing: normal; - word-wrap: normal; - white-space: nowrap; - direction: ltr; - line-height: 1; - vertical-align: middle; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; - -moz-osx-font-smoothing: grayscale; - font-feature-settings: "liga"; - font-variation-settings: - "FILL" 1, - "wght" 400, - "GRAD" 0, - "opsz" 48; + font-family: var(--iconPack) !important; + font-weight: normal; + font-style: normal; + font-size: 24px; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + -webkit-font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; + font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48; } .material-icons.info_outline:before { @@ -1958,8 +1949,9 @@ progress + span { } .overview-expand.emby-button:after { - content: "\e313"; - font-family: "Material Icons"; + content: "keyboard_arrow_down"; + font-family: var(--iconPack); + font-feature-settings: "liga"; background: var(--selectorBackgroundColor); border-radius: 50%; width: 1.5em; @@ -2269,16 +2261,16 @@ progress + span { } div[data-type="Book"] .play_arrow:before { - content: "\f1c6"; + content: "book"; font-size: 85%; } div[data-type="Photo"] .play_arrow:before { - content: "\e5d0"; + content: "photo"; } div[data-type="PhotoAlbum"] .play_arrow:before { - content: "\e8eb"; + content: "photo_album"; } .emby-button.block, @@ -2414,7 +2406,7 @@ div[data-type="PhotoAlbum"] .play_arrow:before { } .mainDetailButtons:has(.detailButton[data-type="Book"]) .btnPlay .material-icons.play_arrow:before { - content: "\f1c6"; + content: "book"; padding-inline-end: 1ch; } @@ -3861,15 +3853,16 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child { } .noHomeButtonHeader .emby-tab-button[data-index="1"]:before { - content: "\e87d"; + content: "favorite"; } .noHomeButtonHeader .emby-tab-button[data-index="0"]:before { - content: "\e88a"; + content: "home"; } .noHomeButtonHeader .emby-tab-button:before { - font-family: "Material Icons Round"; + font-family: var(--iconPack); + font-feature-settings: "liga"; /* padding-inline-end: 0.5ch; */ font-size: 1.2em; font-variation-settings: "FILL" 0;