New theme - Plex inspired look

[Happy2Play 9444]

18 minutes ago, Mithrim said:

I'm not sure what view you are showing there but this is how it looks for me when hovering over the speaker icon (this time Microsoft Edge Version 126.0.2592.68 (Official Build) (64-Bit):

CSS is from Emby-Stable-style-v3.2.txt

Here is what I get but looks like it may be a resolution thing but can't get what you see resizing the browser.

Chrome Version 126.0.6478.115 (Official Build) (64-bit)

Edge Version 127.0.2651.8 (Official build) stable app, beta channel (64-bit)

[Mithrim 5]

I can't reproduce what I see in your screenshot, @Happy2Play
This is at 100% (Edge)

And this is scaled way down:


The slider stays above the speaker icon.
Are you also using Emby-Stable-style-v3.2.txt without any other modifications?

[Happy2Play 9444]

54 minutes ago, Mithrim said:

I can't reproduce what I see in your screenshot, @Happy2Play
This is at 100% (Edge)

And this is scaled way down:


The slider stays above the speaker icon.
Are you also using Emby-Stable-style-v3.2.txt without any other modifications?

 

Only that file is loaded into css even cleared history/cache.  I do not have volume indicator on bottom row, it is up with volume slider.

zoom 100%

[PinkMellow 0]

Hola a todos, soy nuevo en esto de los css y quisiera saber si pudieran ayudarme ,esta todo perfecto pero el control de volumen de los videos ,me sale en algunos navegadores y en otros no, muchas gracias de antemano por la ayuda.

Estilo PLEX.css

[PinkMellow 0]

54 minutes ago, PinkMellow said:

Hola a todos, soy nuevo en esto de los css y quisiera saber si pudieran ayudarme ,esta todo perfecto pero el control de volumen de los videos ,me sale en algunos navegadores y en otros no, muchas gracias de antemano por la ayuda.

Estilo PLEX.css 113.11 kB · 0 downloads

ejemplo y veo que tampoco sale el botón de retornar atrás, muchas gracias

[Happy2Play 9444]

19 minutes ago, PinkMellow said:

everything is perfect but the volume control of the videos appears in some browsers and not in others

 

example and I see that the back button does not come out either, thank you very much

Will take a look as I notice this earlier as this is an issue specific to Firefox.

[Happy2Play 9444]

@fillidillI doubt you even look at Firefox.

But it requires its own variables is some cases as width: -webkit-fill-available; is not compatible so you need to add width: -moz-available. @PinkMellow

Only looked at this specific issue as there is a different issue with the PIP button.  Looks to be independent of Emby buttons as Emby button is hidden.

Edited June 23, 2024 by Happy2Play
typo

[PinkMellow 0]

muchas gracias por la ayuda al implementar ese codigo solucione para firefox ,pero me deba error en otros navegadores y esta fue la solucion que encontre y me abre en todos ya bien ,incluido el boton de ir a atrás

.skinHeader.focuscontainer-x.headroom.videoOsdHeader.semiTransparent:not(.videoOsdHeader-remotecontrol) {
    position: fixed;
    top: unset!important;
    bottom: 100px;
    margin-bottom: 25px;
    max-height: 100px;
    width: 100%;
}

 

[PinkMellow 0]

ahora tengo un problemilla jsjsj ,que al achicar el navegador se desaparece la barra de volumen

Estilo PLEX.css

[Happy2Play 9444]

5 minutes ago, PinkMellow said:

Now I have a little problem jsjsj, that when I shrink the browser the volume bar disappears

Style PLEX.css 113.12 kB · 0 downloads

Yes as that code falls into a @media (min-width: 50em).    I guess you can lower that value.

[PinkMellow 0]

.skinHeader.focuscontainer-x.headroom.videoOsdHeader.semiTransparent:not(.videoOsdHeader-remotecontrol) {
    position: fixed!important;
    top: unset!important;
    bottom: 100px;
    margin-bottom: 25px;
    max-height: 100px;
    width: 100%; /* Ajuste para mayor compatibilidad */
}

osea como quedaria ese fragamento para que no pase eso ,disculpe la molestia es que soy nuevo en todo esto

[Happy2Play 9444]

53 minutes ago, PinkMellow said:

.skinHeader.focuscontainer-x.headroom.videoOsdHeader.semiTransparent:not(.videoOsdHeader-remotecontrol) {
    position: fixed!important;
    top: unset!important;
    bottom: 100px;
    margin-bottom: 25px;
    max-height: 100px;
    width: 100%; /* Ajuste para mayor compatibilidad */
}

I mean, how would that fragamento look so that doesn't happen, excuse the inconvenience is that I'm new to all this

Well if you go up a few lines you will see the @media condition as the min-width need changed to accommodate you reducing the width resizing the window.

@media (min-width: 50em) {
  /* Right align logo and move down */
  .videoOsdHeader .pageTitle {
    max-width: 300px;
    min-width: 300px;
    width: 100% !important;
    margin-left: 0.2em !important;
  }
  .videoOsdHeader .pageTitle, 
  .videoOsdHeader.skinHeader.semiTransparent{
    min-height: 80px!important;
    height: 80px!important;
  }
  .skinHeader.focuscontainer-x.headroom.videoOsdHeader.semiTransparent:not(.videoOsdHeader-remotecontrol) {

 

[fillidill 170]

@Happy2Playofficially I don't support Firefox as I don't use it myself but from time to time I take a quick peek. It seems that I missed that one I've now added the fix to below update. I also re-made the volume solution so maybe that works better for you guys who had problems.

Regarding PIP. This seems to be from vanilla Emby and not from me. In Firefox there is a built in PIP browser button on videos (the one seen in your screen) so I think that is why Luke and the gang may have hidden the vanilla Emby button for it. Don't think I can control the placement of the Firefox one.

Emby-Stable-style-v3.3.txt

[sutt359 2]

Hi Fillidill 

I've just found your work great job. 

I did find a little issue when using Edge, its fine in firefox. But as you can see the video and audio detail are cut.

It does it on everything.

Edited June 24, 2024 by sutt359

[fillidill 170]

@sutt359Hmm, that is really weird. In my edge it looks like this. How did you get the Video and Audio sections? Is that a setting perhaps? Which Emby version are you using? 

 

 

[Happy2Play 9444]

6 hours ago, fillidill said:

@sutt359Hmm, that is really weird. In my edge it looks like this. How did you get the Video and Audio sections? Is that a setting perhaps? Which Emby version are you using? 

 

 

Still looking but here is what I get in Edge and Firefox, as your example is missing media info ie video and audio.

ff

screen width issue in edge as I expanded the window

 

Edited June 24, 2024 by Happy2Play

[Happy2Play 9444]

First issue appears related to this Emby code .emby-select-wrapper-inline-disabled as disabling it resolves the alignment issue. @fillidill

[Happy2Play 9444]

As for the moving track element it looks like this needs decreased.  On my screen it corrects is at 58% when full screen.

.topDetailsContainer form.trackSelections {
    max-width: 60% !important;
}

 

[fillidill 170]

Oops! Realized that I had hidden those Video and Audio sections in my own personal CSS edit which was the reason I didn't see it before. The reason I removed them is because I don't like how much space they take so I can't see cast below. I've now done a compromise where I move them to the side instead.

 

 

Emby-Stable-style-v3.4.txt

[PinkMellow 0]

Hola a todos me quisiera hacer estas pequeñas modificaciones al css pero no se como realizarlas y quería ver si pudieran ayudarme ,muchas gracias de antemano.

 

lo 1ro es que quisiera que el botón de volumen en ves de mostrar esos dos iconos de volumen solo mostrara uno del de la izquierda y que al tocarlo se pudiera poner en mute

y lo 2do es hacer que no se recorte la información de los videos

muchas gracias por la ayuda debajo adjunto fotos y el css

 

style.css

Edited June 28, 2024 by PinkMellow

[PinkMellow 0]

por cierto no habria forma de hacerle un inicio de sesion mas llamativo tipo netflix o no se ,pero algo mas lindo

[Happy2Play 9444]

17 minutes ago, PinkMellow said:

The 1st thing is that I would like the volume button instead of showing those two volume icons to only show one of the one on the left and that when you touch it it could be muted

You would have to undo the changes that were recently done as there are two volume controls, one in the header (div.videoOsdVolumeControls-top) and one showing now technically for mobile (videoOsdVolumeControls-bottom).

Will try to compare tomorrow if I get the time.

 

 

17 minutes ago, PinkMellow said:

and the 2nd thing is to make sure that the information in the videos is not cut

You are not following changes already mentioned above.

[Happy2Play 9444]

1 hour ago, PinkMellow said:

By the way, there would be no way to make a more flashy login like Netflix or I don't know, but something nicer

Have you looked around but will need minor code changes from older versions.  As you can add backdrop image url from online or place in correct folder.

Edited June 28, 2024 by Happy2Play

[Happy2Play 9444]

@PinkMellowPM'd revised posted style.css.

[Gremory17 14]

hay alguna forma de arreglar como se ven las temporadas? la imagen