19 replies to this topic

[BetaTester]

I browse around and I saw some nice screenshot from you guys. How can I change the button shape to circle?

 

 

Do I need to replace another button with transparent corner png? It has conflict with backdrop or non-black background.

It doesn't seems a problem on most of the screenshots from you guys tho.

 

 

I found this from another thread about buttons, but it is not working now. Is it because most of you turn the buttons to css instead of image?

 

/*----Complete Overhaul of Movie/TV buttons: play, resume, ... etc etc ----*/

.detailButton.emby-button{transition:all 0.2s;}
.detailButton.emby-button:hover {transform:scale(1.085);transition:all 0.2s;}


.detailButton.emby-button{
   border: 0px;
  display: inline-block;
  position: relative;
  z-index: 1;
  border: 0px solid #000000;
  background-color: transparent;
  font-family: Futura, Tahoma, sans-serif;
  color: #ffffff;
  padding: 15px;
  margin-left: 20px;

}

.detailButton.emby-button::after{

-webkit-box-shadow: 0px 2px 4px #000000;
  -moz-box-shadow: 0px 2px 4px #000000;
  box-shadow: 0px 2px 4px #000000;
content: "'";
  color: transparent;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  z-index: -1;
  border-radius: 3px;
  background-color: #5F9EA0;
  transform: skew(-30deg);
-webkit-transform: skew(-30deg);
-o-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-ms-transform: skew(-30deg);
}

[Happy2Play]

Quick and dirty

/*Itemdetails Buttons Round*/
div.detailButton-content {padding: 0 10px 0 0;}

div.detailButton-content i.detailButton-icon {
    -webkit-border-radius: 50%!important;
    border-radius: 50%!important;
    padding: .5em!important;
    width: auto!important;
    min-width: 0!important;
}

Edited by Happy2Play, 27 March 2020 - 11:37 PM.

[BetaTester]

 

Quick and dirty

/*Itemdetails Buttons Round*/
div.detailButton-content {padding: 0 10px 0 0;}

div.detailButton-content i.detailButton-icon {
    -webkit-border-radius: 50%!important;
    border-radius: 50%!important;
    padding: .5em!important;
    width: auto!important;
    min-width: 0!important;
}

 

 

It is circle now, but the corner is there still oh can you hide the text as well please! 

[Happy2Play]

 

It is circle now, but the corner is there still oh can you hide the text as well please! 

 

What browser?  Could you have other css affecting this?  Also what theme are you using?

 

This is what I get with only this css in Chrome.

 

As for removing the text

div.detailButton-content div.detailButton-text {display: none;}

[BetaTester]

 

What browser?  Could you have other css affecting this?  Also what theme are you using?

 

This is what I get with only this css in Chrome.

 

As for removing the text

div.detailButton-content div.detailButton-text {display: none;}

 

hmmm I remove all CSS except those lines for button and it is still the same.I am using latest Chrome, Black Theme.

The corners of the button is black. I changed the theme to Dark which is dark gray and the black corners show as well. Basically anything other than black and backdrop will cause the issue.

Edited by BetaTester, 28 March 2020 - 10:09 AM.

[Happy2Play]

I am not sure as I am not seeing what you are seeing on any of the browsers I have.

 

What server version are you on?

Edited by Happy2Play, 28 March 2020 - 01:22 PM.

[BetaTester]

I am not sure as I am not seeing what you are seeing on any of the browsers I have.

 

What server version are you on?

 

4.4.0.40

 

This problem exists at the Dashboard as well.

https://i.imgur.com/bza2IiX.png

Edited by BetaTester, 28 March 2020 - 08:31 PM.

[Happy2Play]

4.4.0.40

 

This problem exists at the Dashboard as well.

https://i.imgur.com/bza2IiX.png

I honestly don't know as I have this with no css in Chrome.

 

[BetaTester]

I honestly don't know as I have this with no css in Chrome.

 

 

omg wierd. I dont have this problem at firefox and edge. Just chrome. Thanks anyway

 

That problem only exists in clickable item.

https://i.imgur.com/NR8W5dU.png

It doesnt appear in this kind of corner.

Edited by BetaTester, 28 March 2020 - 09:18 PM.

[Happy2Play]

Sorry just can't see the additional layer you appear to have. 

 

What version of Chrome?

Have you tried clearing the browser cache in Chrome?

[BetaTester]

Sorry just can't see the additional layer you appear to have. 

 

What version of Chrome?

Have you tried clearing the browser cache in Chrome?

 

Google Chrome is up to date

Version 80.0.3987.149 (Official Build) (64-bit)

 

Ya I did cleared the cache. Should I uninstall the whole thing? I only need to backup the people settings right? ( Sorry I am new to this )

I tried to run it in Vivaldi which is another chrome core and my problem is there as well

Cocoon with firefox core works well tho. argg I want to die now

Edited by BetaTester, 28 March 2020 - 10:22 PM.

[Happy2Play]

 

Google Chrome is up to date

Version 80.0.3987.149 (Official Build) (64-bit)

 

Ya I did cleared the cache. Should I uninstall the whole thing? I only need to backup the people settings right? ( Sorry I am new to this )

I tried to run it in Vivaldi which is another chrome core and my problem is there as well

Cocoon with firefox core works well tho. argg I want to die now

 

I wouldn't uninstall as it is a browser issue.  Just a matter of figuring out the issue.

[Happy2Play]

 

Google Chrome is up to date

Version 80.0.3987.149 (Official Build) (64-bit)

 

Ya I did cleared the cache. Should I uninstall the whole thing? I only need to backup the people settings right? ( Sorry I am new to this )

I tried to run it in Vivaldi which is another chrome core and my problem is there as well

Cocoon with firefox core works well tho. argg I want to die now

 

I installed Vivaldi on my Windows system and don't see this issue there either.

[PenkethBoy]

FWIW - i dont see this either in chrome

 

just the circles

 

One other thing to try is disable/uninstall any chrome browser plugins

 

friend was having problems with css on FF and had a dark theme plugin installed which was messing with the emby css

[Happy2Play]

@rechigo do you see this issue as shown in post 3 or 7?

[rechigo]

Tested in Edge (chromium-based 80.0.361.69), Chrome (80.0.3987.149), Firefox (v74.0) 

 

I do not see the black corners in any of these browsers listed above

Edited by rechigo, 29 March 2020 - 08:34 PM.

[rechigo]

@BetaTester Have you tried a different device (for the client)

Sent from my SM-G973U using Tapatalk

[BetaTester]

@BetaTester Have you tried a different device (for the client)

Sent from my SM-G973U using Tapatalk

 

@Happy2Play

@rechigo

 

omg the corners show correctly on my Chrome in other PC 80.0.3987.100

What should I do now? The problem exists on my Vivaldi as well, I think it wont be fixed even I reinstall Chrome?

Edited by BetaTester, 31 March 2020 - 12:01 AM.

[rechigo]

@Happy2Play

@rechigo

 

omg the corners show correctly on my Chrome in other PC 80.0.3987.100

What should I do now? The problem exists on my Vivaldi as well, I think it wont be fixed even I reinstall Chrome?

by corners show correctly you mean there is no black box around the buttons on the other PC?

[BetaTester]

by corners show correctly you mean there is no black box around the buttons on the other PC?

 

Yeah