update the ui to follow new youtube ui design/rounded?(and a how i make round ui directly from tampermonkey editor)

Hello I was wondering if the UI could be officially, updated from the current boxy design to a more rounded one.It would make it feel like an official UI, similar to the new rounded UI on YouTube. I have made some modifications for myself, incorporating a simple style and some logical changes to mimic the new look. I'm just curious if these changes could become official instead of needing to modified the code from user side? No pressure,

i do see in git-hub "467638-tabview-customization.user.css", but i don't know what to do with it or how to implement that to tampermonkey. i not really tampermonkey user to begin with. and for anyone else who might be interested in this quick hack way, here are the modifications I've made to create a more official-looking UI. A.K.A rounded UI directly from tampermonkey editor

NOTE:I know my way of modifying it might not be very good, or there might actually be support for advanced users to use a rounded UI. However, I do know how to write JavaScript, but I don't really ever use JavaScript for webpage, let alone make full websites (HTML, CSS,JS). So yeah, take it with a mountain of salt.

find "mtf_attrPlaylist: (attrName, newValue) => {" then modified to be like this

const dpeIframeReady = eventDispatcher('tabview-chatroom-ready');
function modernuicheck() {
    const tabBtn4 = document.querySelector('[tyt-tab-content="#tab-videos"]');
    const tabBtn5 = document.querySelector('[tyt-tab-content="#tab-list"]');

    if (tabBtn4) {
        if (isAnyPlaylistExist) {
            tabBtn4.style.removeProperty("border-top-right-radius");
            tabBtn4.style.removeProperty("border-bottom-right-radius");
        } else {
            tabBtn4.style.borderTopRightRadius = '10px';
            tabBtn4.style.borderBottomRightRadius = '10px';
        }
    }

    if (tabBtn5) {
        if (tabBtn4) {
            tabBtn5.style.borderTopRightRadius = '10px';
            tabBtn5.style.borderBottomRightRadius = '10px';
        } else {
            tabBtn5.style.removeProperty("border-top-right-radius");
            tabBtn5.style.removeProperty("border-bottom-right-radius");
        }
    }
}
const FP = {

mtf_attrPlaylist: (attrName, newValue) => {
  //attr mutation checker - {ytd-playlist-panel-renderer#playlist} \single
  //::attr ~ hidden    
  //console.log(1210)

  // _console.log(21311)
  if (!scriptEnable) return;
  if (pageType !== 'watch') return;
  /** @type {HTMLElement|null} */
  let cssElm = es.ytdFlexy;
  if (!cssElm) return;

  // _console.log(21312)

  let playlist = document.querySelector('#tab-list ytd-playlist-panel-renderer#playlist'); // can be null if it is manually triggered
  isAnyPlaylistExist = playlist && !playlist.hasAttribute('hidden');
  const tabBtn = document.querySelector('[tyt-tab-content="#tab-list"]');
  //console.log(1212.2, isPlaylistHidden, playlist.getAttribute('hidden'))
  if (tabBtn) {
    //console.log('attr playlist changed')
    let isPlaylistTabHidden = tabBtn.classList.contains('tab-btn-hidden')
    if (isPlaylistTabHidden && isAnyPlaylistExist) {
      //console.log('attr playlist changed - no hide')
      tabBtn.classList.remove("tab-btn-hidden");
    } else if (!isPlaylistTabHidden && !isAnyPlaylistExist) {
      //console.log('attr playlist changed - add hide')
      hideTabBtn(tabBtn);
    }
  }
  /* visible layout for triggering hidden removal */
    modernuicheck();
},

find <a id="tab-btn1" tyt-di="q9Kjc" tyt-tab-content="#tab-info" then modified to be like this

`<a id="tab-btn1" tyt-di="q9Kjc" tyt-tab-content="#tab-info" style="border-top-left-radius: 10px; border-bottom-left-radius: 10px;" class="tab-btn${(hiddenTabsByUserCSS & 1) === 1 ? ' tab-btn-hidden' : ''}">${sTabBtnInfo}${str1}${str_fbtns}</a>`,

3.modified addHTML to be like this

let addHTML = `
    <div id="right-tabs">
        <tabview-view-pos-thead></tabview-view-pos-thead>
        <header>
            <div id="material-tabs" style="border-radius: 10px;">
                ${str_tabs}
            </div>
        </header>
        <div class="tab-content" style=" border-radius: 15px;margin-top: 10px;">
            <div id="tab-info" class="tab-content-cld tab-content-hidden" tyt-hidden userscript-scrollbar-render></div>
            <div id="tab-comments" class="tab-content-cld tab-content-hidden" tyt-hidden userscript-scrollbar-render></div>
            <div id="tab-videos" class="tab-content-cld tab-content-hidden" tyt-hidden userscript-scrollbar-render></div>
            <div id="tab-list" class="tab-content-cld tab-content-hidden" tyt-hidden userscript-scrollbar-render></div>
        </div>
    </div>
    `;

return addHTML;

Anyway, it's not perfect. For example, the bottom margin is slightly off due to margin-top: 10px, and the selected button bar has a slight issue on the side. The reason for that is because I'm not really a JavaScript or website developer; I'm more into Python and Kotlin. So, yeah, the modifications are as basic as possible. if anyone have better way please share step by step, just see the picture what it do. sample 1(no playlist) Screenshot 2023-10-14 at 15-32-02 Marshmello - Rooftops (Official Music Video) sample 2(have playlist) Screenshot 2023-10-14 at 15-31-37 Marshmello - Rooftops (Official Music Video)

tabview-youtube / Tabview-Youtube

update the ui to follow new youtube ui design/rounded?(and a how i make round ui directly from tampermonkey editor) #22

1. Install Stylus

2. Install UserStyle

Remarks