CSS for the buttons

[enterprisey]

I saw this cool button CSS... maybe we want to use it?

Edit: We might not even be using this CSS - see most recent messages.

button {
    background-color: rgb(91, 183, 91);
    background-image: -moz-linear-gradient(center top , rgb(98, 196, 98), rgb(81, 163, 81));
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    color: rgb(255, 255, 255);
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
    display: inline-block;
    padding: 4px 10px;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.05);
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: normal;
    margin: 0px;
}

[wikipedia-mabdul]

why don't you put that at any test.wikipedia page with a functional AFCH script (so e.g. in your userspace) and post here your importscript location so we can test it? (or a screenshot)

[enterprisey]

Here's how it looks with the HTML <button>Click Me!</button>:

[theopolisme]

I like it. Make sure the original button css is under a compatible license, though.

[enterprisey]

One interesting feature of this CSS is that it's used by A LOT of websites, most of them related to the digital currency Bitcoin; all of them seem to copy eachother back and forth.

I got this particularly nasty chunk of CSS from blockchain.info, a fairly reputable website, and I am waiting on their Support Desk to get back to me on whether or not I can use it.

[theopolisme]

Awesome, yep, just make sure it's licensed under cc-by-sa or the gdfl... we just want to make sure we don't run afoul of any copyright laws :)

[enterprisey]

Interesting: it's even used in this GitHub repo (look in the "bitcoin-button" folder, then the "style.css" file).

If it's there, can we use it? The repository, according to the COPYING file, is licensed under GPL3.

Edit: This version might not be the one we're using.

[theopolisme]

IANAL, but yes, I believe so.

[enterprisey]

That doesn't sound extremely certain - but, on a better note, I think I found the original source of the CSS. Even better, the authors of the CSS say you can "grab them, make a few changes and ready to go":

http://medleyweb.com/freebies/50-super-sleek-css-button-style-snippets/

The ones all the way on the bottom look fine to me.

[theopolisme]

/me gives APerson a thumbs up -- yes, go for it.

[enterprisey]

Will continue to work on the CSS later... should really go to sleep.

Here is the unholy mess that I have came up with so far (will be improved):

Edit: CSS will now be hosted here

[theopolisme]

Alright, here's a demo of @APerson241's latest css: http://cssdesk.com/n5HcX

Thanks for your work on it; personally, though, I think it's a bit too over the top, if you know what I mean -- the grey inner shadows are...funky...the gradients don't look very smooth in Safari on Mac OS 10.8, and the fact that all the buttons to the right of the one pressed shift to the left a few pixels is confusing.

I rather like your original button css, so I will work on something to that effect on my own.

[theopolisme]

Here's me just messing around with http://www.cssbuttongenerator.com for 15 minutes: http://cssdesk.com/B8r77 ... problem with those buttons is that they're quite cutesy, imho. @APerson241, that's why you're in charge of this ;)

[wikipedia-mabdul]

well, I think we should get back to the colors.

accept, decline and comment are all green? shouldn't we use separated colors as original?

[theopolisme]

@wikipedia-mabdul they aren't all green... what makes you say that?

[theopolisme]

Looks like the whole "shrinking" thing is https://github.com/WPAFC/afch/commit/82e90deb9fc1bc8ceff83545f7db35bfa6276904 ... can we revert this? Reason being, it messes with how everything else looks on the page when it shrinks. I get your original intentions though.

[enterprisey]

Oh - sorry. The new CSS from the URL I posted earlier already has a hover animation - removed that shrinking thing.

[enterprisey]

The current CSS is really weird - let me fix it.

[wikipedia-mabdul]

@theopolisme all buttons which trigger the actions having as id = "afcHelper_prompt_button" and thus all are green. previously the action trigger buttons were colored same as the "prompt" button

e.g. in code:

        + '<br/><button type="button" id="afcHelper_prompt_button" name="afcHelper_prompt_button" onclick="afcHelper_act(\'accept\')">Accept and publish to mainspace</button>';

or

        var text = '<h3>Marking submission ' + afcHelper_PageName + 'for reviewing</h3>' + '<br /><label for="afcHelper_comments">Additional comment (signature is automatically added): </label><textarea rows="3" cols="60" name="afcHelper_comments" id="afcHelper_comments"></textarea><br/><button type="button" class="mark" id="afcHelper_prompt_button" name="afcHelper_prompt_button" onclick="afcHelper_act(\'mark\')">Place under review</button>';

[theopolisme]

No, @wikipedia-mabdul, that's incorrect... https://github.com/WPAFC/afch/blob/develop/src/submissions.js#L203-L226 their ids are different.

Edit: I see what you're saying as far as https://github.com/WPAFC/afch/blob/develop/src/submissions.js#L321 goes. @APerson241 we'll need to "generalize" the classes or something...or just redefine specifics for those.

[enterprisey]

Alright... here's the latest version of my hacked-together CSS (tell me if it looks good):

[theopolisme]

Haha, nice. Can you give a link to cssdesk so we can look at the animations?

[enterprisey]

Here is the exact same thing that produced my image above: http://cssdesk.com/FFFnA

[theopolisme]

Can we do something a bit more subtle with the shadows on click? e.g., http://cssdesk.com/3KpQH

[enterprisey]

Yeah, that looks great.

cssdesk.com is awesome.

[theopolisme]

Feel free to merge this into the code, looks really spiffy -- thanks again for your work on this :)