Jump to content

Need some help on the buttons..


Recommended Posts

BetaTester
Posted

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

 

5e7eb50595ff5_58e7e42e6f06d_css.png

 

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.

 

5e7eb53e9535b_issue.jpg

 

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
Posted (edited)

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
  • Like 1
BetaTester
Posted

 

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;
}

 

5e7ed064a38c8_test.jpg

 

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

Happy2Play
Posted

5e7ed064a38c8_test.jpg

 

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.

5e7f15e4bb7b4_detail.jpg

 

As for removing the text

div.detailButton-content div.detailButton-text {display: none;}
BetaTester
Posted (edited)

 

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.

5e7f15e4bb7b4_detail.jpg

 

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
Happy2Play
Posted (edited)

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
BetaTester
Posted (edited)

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
Happy2Play
Posted

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.

 

5e7fedf86c782_nocss.jpg

BetaTester
Posted (edited)

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

 

5e7fedf86c782_nocss.jpg

 

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
Happy2Play
Posted

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
Posted (edited)

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
Happy2Play
Posted

 

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
Posted

 

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
Posted

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

  • Like 1
Happy2Play
Posted

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

rechigo
Posted (edited)

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
  • Like 1
rechigo
Posted

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

 

Sent from my SM-G973U using Tapatalk

BetaTester
Posted (edited)

@@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
rechigo
Posted

@@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
Posted

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

 

Yeah

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...