Jump to content


Photo

Need some help on the buttons..


  • Please log in to reply
19 replies to this topic

#1 BetaTester OFFLINE  

BetaTester

    Advanced Member

  • Members
  • 54 posts
  • Local time: 08:06 PM

Posted 27 March 2020 - 10:30 PM

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



#2 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 19125 posts
  • Local time: 12:06 AM
  • LocationWashington State

Posted 27 March 2020 - 11:19 PM

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.


#3 BetaTester OFFLINE  

BetaTester

    Advanced Member

  • Members
  • 54 posts
  • Local time: 08:06 PM

Posted 28 March 2020 - 12:21 AM

 

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! 



#4 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 19125 posts
  • Local time: 12:06 AM
  • LocationWashington State

Posted 28 March 2020 - 05:22 AM

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


#5 BetaTester OFFLINE  

BetaTester

    Advanced Member

  • Members
  • 54 posts
  • Local time: 08:06 PM

Posted 28 March 2020 - 10:02 AM

 

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, 28 March 2020 - 10:09 AM.


#6 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 19125 posts
  • Local time: 12:06 AM
  • LocationWashington State

Posted 28 March 2020 - 01:20 PM

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.


#7 BetaTester OFFLINE  

BetaTester

    Advanced Member

  • Members
  • 54 posts
  • Local time: 08:06 PM

Posted 28 March 2020 - 08:31 PM

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.


#8 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 19125 posts
  • Local time: 12:06 AM
  • LocationWashington State

Posted 28 March 2020 - 08:38 PM

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



#9 BetaTester OFFLINE  

BetaTester

    Advanced Member

  • Members
  • 54 posts
  • Local time: 08:06 PM

Posted 28 March 2020 - 09:15 PM

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, 28 March 2020 - 09:18 PM.


#10 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 19125 posts
  • Local time: 12:06 AM
  • LocationWashington State

Posted 28 March 2020 - 09:49 PM

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?



#11 BetaTester OFFLINE  

BetaTester

    Advanced Member

  • Members
  • 54 posts
  • Local time: 08:06 PM

Posted 28 March 2020 - 10:20 PM

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.


#12 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 19125 posts
  • Local time: 12:06 AM
  • LocationWashington State

Posted 28 March 2020 - 10:29 PM

 

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.



#13 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 19125 posts
  • Local time: 12:06 AM
  • LocationWashington State

Posted 28 March 2020 - 10:35 PM

 

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.



#14 PenkethBoy OFFLINE  

PenkethBoy

    Advanced Member

  • Members
  • 4291 posts
  • Local time: 08:06 AM
  • LocationWarrington,UK

Posted 29 March 2020 - 10:08 AM

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 likes this

#15 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 19125 posts
  • Local time: 12:06 AM
  • LocationWashington State

Posted 29 March 2020 - 07:38 PM

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



#16 rechigo OFFLINE  

rechigo

    Advanced Member

  • Members
  • 770 posts
  • Local time: 12:06 AM
  • LocationCALIFORNIA

Posted 29 March 2020 - 08:34 PM

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.

  • Happy2Play likes this

#17 rechigo OFFLINE  

rechigo

    Advanced Member

  • Members
  • 770 posts
  • Local time: 12:06 AM
  • LocationCALIFORNIA

Posted 29 March 2020 - 08:45 PM

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

Sent from my SM-G973U using Tapatalk

#18 BetaTester OFFLINE  

BetaTester

    Advanced Member

  • Members
  • 54 posts
  • Local time: 08:06 PM

Posted 30 March 2020 - 10:52 PM

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


#19 rechigo OFFLINE  

rechigo

    Advanced Member

  • Members
  • 770 posts
  • Local time: 12:06 AM
  • LocationCALIFORNIA

Posted 31 March 2020 - 01:07 AM

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



#20 BetaTester OFFLINE  

BetaTester

    Advanced Member

  • Members
  • 54 posts
  • Local time: 08:06 PM

Posted 31 March 2020 - 01:30 AM

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

 

Yeah






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users