About links in player screen - ES 4750

[CarlosLima 148]

Hi,
The image was extracted from the plex style CSS application and I would like to have just the code to change just that part of links that position above in the form of buttons.
I've scoured the massive CSS for this part but to no avail.
Thanks for any tips.

[Happy2Play 8281]

Looks like this, may need additional code 

.skinHeader.videoOsdHeader {
  margin-top: calc(1.2em + env(safe-area-inset-top, 0)) !important;
  padding-top: 0 !important;
  right: unset;
}

.videoosd-tab-button {
  -webkit-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%) !important;
  -moz-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%) !important;
  box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%) !important;
  -webkit-backdrop-filter: blur(0.5em) saturate(0.5) !important;
  backdrop-filter: blur(0.5em) saturate(0.5) !important;
  background: #ffffff30 !important;
  font-size: 1.2em !important;
  text-shadow: 2px 2px 15px #333;
  padding: 13px 30px !important;
  transition: background 0.5s !important;
  border: 2px solid transparent;
  margin: 10px 7px 10px 7px;
}
.videoosd-tab-button:hover {
  background: #ffffff70 !important;
  color: #fff !important;
}
.videoosd-tab-button.emby-tab-button-active {
  background: #ffffff70 !important;
  color: #fff !important;
}
.videoosd-bottom-with-opentab .videoosd-tab-button {
  background: transparent;
  color: #fff !important;
  border: 2px solid #ffffff80;
}
.videoosd-bottom-with-opentab .videoosd-tab-button.emby-tab-button-active {
  background: #fff;
  color: #fff !important;
  border: 2px solid transparent;
}
.videoOsdBottom-tabs {
  position: fixed;
  top: 0;
  right: 0;
}
@media (orientation: landscape) and (min-height: 30em) and (min-width: 60em) {
  .videoOsdBottom-tabs {
    margin-left: 0 !important;
    padding-top: 30px !important;
    padding-bottom: 0.5em !important;
  }
}

 

[CarlosLima 148]

Oops, sorry, I didn't read your answer. It worked perfect for me.
Thank you very much.

[Meeko 34]

Hello

 

great job but i have a Problem with this css, I have no back button on the top left side.

 

can you fix this?

 

best regards

 

Soldize
 

 

 

 

 

[visproduction 122]

Hi, I like this code for my back button:
 

/* Back button */
button.headerBackButton.headerButton.hide-mouse-idle-tv.paper-icon-button-light.headerBackButton-showfullscreen > i {
    font-size: 36px;
    color: #a58f1b !important;
    border-radius: 1em;
    transform: scale(1);
    background-color: #124078;
    display: block !important;
    top: -3px;
    left: 3px;
    padding: 4px 0;
    margin-right: -4px;
    width: 44px;
    height: 38px;
}
button.headerBackButton.headerButton.hide-mouse-idle-tv.paper-icon-button-light.headerBackButton-showfullscreen > i:hover {
	left: 1px;
    transform: scale(1.1);
    color: #e2cc50 !important;
    background-color: #1a5bac;
}

You might want to tweak .headerLeft  but it's probably not needed.
 

.headerLeft {
    padding-left: 0.7em;
    position: relative;
    top: 2px;
}

 

Back button looks like this.  (There is a lot of other custom CSS in this area.)
 

Edited October 16, 2022 by visproduction

[Meeko 34]

first code dont work for me

[Happy2Play 8281]

@Soldize The issue is right: unset; as the header covers the OSD tabs when moved to the top. 

adjusting @fillidillcode you can do something like this.

.skinHeader.videoOsdHeader.semiTransparent:not(.videoOsdHeader-remotecontrol) {
    position: fixed;
    bottom: 90px;
    width: -webkit-fill-available;
    margin-bottom: 25px;
    max-height: 100px;
    max-width: 50%;
}

div.skinHeader.videoOsdHeader button.headerCastButton {
  left: 1.5cm;
  position: fixed;
}

.videoosd-tab-button {
  -webkit-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%) !important;
  -moz-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%) !important;
  box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%) !important;
  -webkit-backdrop-filter: blur(0.5em) saturate(0.5) !important;
  backdrop-filter: blur(0.5em) saturate(0.5) !important;
  background: #ffffff30 !important;
  font-size: 1.2em !important;
  text-shadow: 2px 2px 15px #333;
  padding: 13px 30px !important;
  transition: background 0.5s !important;
  border: 2px solid transparent;
  margin: 10px 7px 10px 7px;
}
.videoosd-tab-button:hover {
  background: #ffffff70 !important;
  color: #fff !important;
}
.videoosd-tab-button.emby-tab-button-active {
  background: #ffffff70 !important;
  color: #fff !important;
}
.videoosd-bottom-with-opentab .videoosd-tab-button {
  background: transparent;
  color: #fff !important;
  border: 2px solid #ffffff80;
}
.videoosd-bottom-with-opentab .videoosd-tab-button.emby-tab-button-active {
  background: #fff;
  color: #fff !important;
  border: 2px solid transparent;
}
.videoOsdBottom-tabs {
  position: fixed;
  top: 0;
  right: 0;
}
@media (orientation: landscape) and (min-height: 30em) and (min-width: 60em) {
  .videoOsdBottom-tabs {
    margin-left: 0 !important;
    padding-top: 30px !important;
    padding-bottom: 0.5em !important;
  }
}