Jump to content

Need some help on the buttons..


BetaTester

Recommended Posts

BetaTester

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

Link to comment
Share on other sites

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
  • Like 1
Link to comment
Share on other sites

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

 

5e7ed064a38c8_test.jpg

 

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

Link to comment
Share on other sites

Happy2Play

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;}
Link to comment
Share on other sites

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.

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
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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
Link to comment
Share on other sites

BetaTester

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
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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
  • Like 1
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

BetaTester

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

 

Yeah

Link to comment
Share on other sites

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...