Skip to main content
Topic: Elkarte Light has a funky button (Read 14397 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Re: Elkarte Light has a funky button

Reply #75
Yeah I thought adding the styled linktree into mobile instead of the text only version was a big step up even with it having minor artifacts.

Re: Elkarte Light has a funky button

Reply #76
Try adding these three lines to the end of the .linktree definition in index.css

Code: [Select]
  box-shadow: 0 -2px 0 -1px #ccc,
              3px -2px 0 -1px #ccc,
              3px 1px 0 -1px #ccc;

ETA: Three line version that should work with most sizing arrangements of first and second line when it splits to two lines.

Re: Elkarte Light has a funky button

Reply #77
Ah, great idea, multiple shadows  8)   What you posted looked great in chrome but was a bit rubbed out in Fx on the top ... I updated the test site with the following (and tweaked the position to close the lower right gap on big-ol-zooms)

Code: [Select]
box-shadow: 2px -2px 0 1px rgba(200, 204, 204, 0.7), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
Be safe, Be kind, Happy Programing

Re: Elkarte Light has a funky button

Reply #78
I like my setup better because yours has lost the top border of the bottom row if it extends past the top row.  The corners will always have minor issues.  But I'm sure the two can be blended back together.

Re: Elkarte Light has a funky button

Reply #79
Quote
I like my setup better because yours has lost the top border of the bottom row if it extends past the top row
So the box-shadow you posted fixes that or something else?
Be safe, Be kind, Happy Programing

Re: Elkarte Light has a funky button

Reply #80
The box shadow I posted was to fix the missing top border and help the corners look better.  The main thing I started on was fixing the top border.

Re: Elkarte Light has a funky button

Reply #81
Ah I had added them to the pseudo element lol, thats why I was confused.  FYI on the test site now is the top border with negative margin for a test.  I tried border collapse but that only works if we use a display inline-table and doing those two things has a set of other changes that would be needed, so I stopped there.
Be safe, Be kind, Happy Programing

Re: Elkarte Light has a funky button

Reply #82
I still kind of like my version.  I've attached blow ups of my version from my test forum (just adding the box shadows to the linktree leave the :after alone and not use negative margins) and your version just captured from the test site.  I only have firefox and chrome on linux to look though.  The captures are from firefox.  Chrome is similar though but the difference is a little more subtle.

Re: Elkarte Light has a funky button

Reply #83
Winner Winner, Chicken Dinner . . . I'll make the pr with your box-shadow then.
Be safe, Be kind, Happy Programing