Some minor CSS improvements to Emoji selector


(Pirat) #1

propose to do so



You can still add the bottom triangle
P.S. Google translate

box-shadow: 0 1px 5px rgba(0, 0, 0, 0.32)

(Mittineague) #2

Sorry, I’m completely not seeing what you’re getting at.
Might be my tired old eyes, but the 2 screenshots look essentially the same to me.


(Pirat) #3

I showed an example of how to be comfortable and beautiful


(Jeff Atwood) #4

I think it is the box shadow @Mittineague


Sam's personal "minimal" topic list design
(Pirat) #5

codinghorror not only, I corrected a little style
Look better


(Jeff Atwood) #6

Can you post the actual CSS changes here, it is hard to see what is different in your screenshot.


(Pirat) #7

yes I can

.emoji-modal { background-color: #dadada; }
.emoji-page td { border: none; background-color: fff; }
.emoji-page { margin: 0; }
.emoji-modal .toolbar { margin-top: 7px; margin-left: 0px; margin-bottom: 5px; }
.emoji-table-wrapper { min-width: 432px; }

I left the black background


(Dean Taylor) #8

I’m struggling to see the changes, so I animated your first two screen shots:

I still couldn’t see the changes

So I applied this style block into head based on your CSS:

<style>
.emoji-modal { background-color: #dadada !important }
.emoji-page td { border: none !important; background-color: fff !important; }
.emoji-page { margin: 0 !important; }
.emoji-modal .toolbar { margin-top: 7px !important; margin-left: 0px !important; margin-bottom: 5px !important; }
.emoji-table-wrapper { min-width: 432px !important; }
</style>

###Normal (before CSS added)

###After (custom CSS added)

@Pirat Is this what you expect?


(Pirat) #9

you forgot to add
.emoji-page td { border: none; background-color: fff; }


(Dean Taylor) #10

I spotted the problem a missing # in #fff in your code:

###CSS I added

<style>
.emoji-modal { background-color: #dadada !important }
.emoji-page td { border: none !important; background-color: #fff !important; }
.emoji-page { margin: 0 !important; }
.emoji-modal .toolbar { margin-top: 7px !important; margin-left: 0px !important; margin-bottom: 5px !important; }
.emoji-table-wrapper { min-width: 432px !important; }
</style>

###Before
//discourse-meta.s3-us-west-1.amazonaws.com/original/3X/e/6/e6711b52a6b5cf85bec30120bc08ea7d8d62f477.png

###After

Is this what you expect?


(Tom Wells) #11

Just to throw it out there, I like that design (the latest one Dean showed). It does look a bit cleaner and stuff without straying from the design.


(Pirat) #12

yes that’s what I meant


(cpradio) #13

I’m not sure I like the gray at the bottom though. It should be white as it is part of the tab. The arrows are to navigate through that tab’s pages. Not the tabs themselves. With it gray, it seems disjointed.


(Jeff Atwood) #14

Ok good idea @pirat , thanks for the assist @DeanMarkTaylor I am checking this in

I do think that looks better.


(cpradio) #15

I’d like to suggest adding this CSS rule too

.emoji-modal .clearfix { background-color: #FFF; border-top: 1px solid #CCC; }

which turns the bottom section from gray to white, making it part of the tab (can add a top border for separation too).


(Pirat) #16

evenness

here we go

.emoji-page td { border: 1px solid transparent } - remove

(Jeff Atwood) #17

Ah yes, so I will do

.emoji-modal .toolbar li {
  display: inline;
  padding-right: 1px;
}

I think the extra space is needed as we are doing away with the grid, I don’t want emojis to look busy and too close to each other. Narrowing space is not a desirable side effect of removing the grid.


(Pirat) #18

wrong

.emoji-modal .toolbar li {
  display: inline;
  padding-right: 1px;
}

here we go

.emoji-modal .toolbar li {
  display: inline;
  padding-left: 1px;
}

.emoji-page a {
 border-radius: 20px;
}

(Pirat) #19

correct what I wrote for you


(Jeff Atwood) #20

It looks correct to me. Can you mark up a screenshot so I can understand better? Pictures are better than words for this stuff.