The Like icon, wut?

Would it be possible to have posts go from 100% opacity to say... 75-80% opacity, but only while you're scrolling over a 1-2 second time period? (100%->75%->100%->75%, etc)

You know, just to fuck with @Arantor? It would go back to 100% whenever you stopped scrolling.

Arantor

Hey, don't fuck with me. I have enough WTFery fucking with me without you guys adding to it.

PJH

@Matches said:

Would it be possible to have posts go from 100% opacity to say... 75-80% opacity, but only while you're scrolling over a 1-2 second time period? (100%->75%->100%->75%, etc)

No idea. CSS and JS aren't exactly my forte.

darkmatter

@Arantor said:

How about just cutting the fucking opacity changing?

We're big people we can handle having controls always be visible at full opacity.

Hey look at that, he did it. I like, so much easier to tell where a post ends now

darkmatter

@dkf said:

Boo! They (effectively) turned off nested <big>s…

They had to do that.. a lot of nice HTML goodies with nested bigs and all ;)

darkmatter

@PJH said:

@Matches said:
Would it be possible to have posts go from 100% opacity to say... 75-80% opacity, but only while you're scrolling over a 1-2 second time period? (100%->75%->100%->75%, etc)

No idea. CSS and JS aren't exactly my forte.

Yes I think, if you put a CSS3 animation in the :hover that has a 1s delay as the start of the animation, then animates opacity change for the next 1s.
--edit: granted, it will only work in modern browers and IE10 or 11, but then again that's all this site works on anyway

darkmatter

@PJH said:

No idea. CSS and JS aren't exactly my forte.

Try this insanity:
[code]
button.like:hover
{
-webkit-animation: animatelikes 4s; /* Chrome, Safari, Opera */
animation: animatelikes 4s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes animatelikes {
0% {opacity: 1;background:red;}
25% {opacity: .99;background:orange;}
50% {opacity: 0.77;background:blue;}
100% {opacity: 0.15;background:green;}
}

/* Standard syntax */
@keyframes animatelikes {
0% {opacity: 1;background:red;}
25% {opacity: .99;background:orange;}
50% {opacity: 0.77;background:blue;}
100% {opacity: 0.15;background:green;}
}
[/code]

--change the color, opacity, timings to whatever you want.

darkmatter

I had to get stylish just to see what the above really looks like here.
And it is so worth it - @PJH you should definitely give it a whirl

riking

@darkmatter said:

...

Patch submitted.

button.like:hover
{
    -webkit-animation: animatelikes 4s infinite; /* Chrome, Safari, Opera */
    animation: animatelikes 4s infinite;
}

darkmatter

+1 for evilness. What'd you set in the @keyframes definitions?

I'd like your post if I could like things right now, but I have another the next 20 hours give or take 15 hours of Dicsourse time.

darkmatter

By the by, this is way more sickening:
[code]
button.like:hover
{
-webkit-animation: animatelikes 2s infinite; /* Chrome, Safari, Opera /
animation: animatelikes 2s infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
/ Chrome, Safari, Opera */
@-webkit-keyframes animatelikes {
0% {opacity: 1.0;background:red;zoom:1.0;}
20% {opacity: 0.8;background:blue;zoom:1.5}
40% {opacity: 0.6;background:yellow;zoom:2.0;}
50% {opacity: 0.25;background:purple;zoom:2.25;}
60% {opacity: 0.6;background:orange;zoom:2.0;}
80% {opacity: 0.8;background:pink;zoom:1.5;}
100% {opacity: 1.0;background:green;zoom:1.0;}
}

/* Standard syntax */
@keyframes animatelikes {
0% {opacity: 1.0;background:red;zoom:1.0;}
20% {opacity: 0.8;background:blue;zoom:1.5}
40% {opacity: 0.6;background:yellow;zoom:2.0;}
50% {opacity: 0.25;background:purple;zoom:2.25;}
60% {opacity: 0.6;background:orange;zoom:2.0;}
80% {opacity: 0.8;background:pink;zoom:1.5;}
100% {opacity: 1.0;background:green;zoom:1.0;}
}
[/code]

PJH

No. Just no....

At least not for everyday use...

faoileag

@PJH said:

Been there for as long as I can remember it.

Am I the only one noticing that it says "minutes" on the left and "seconds" below the box?

Discourse: proudly confusing people since 2013!

PJH

https://meta.discourse.org/t/copy-error-post-undo-action-window-mins/17854

faoileag

@PJH said:

https://meta.discourse.org/t/copy-error-post-undo-action-window-mins/17854

What, FIXED before CLOSED? I am impressed!

DoctorJones

@darkmatter said:

By the by, this is way more sickening:

Just add some spin and it'll be perfect!

Zecc

@darkmatter said:

Hey look at that, he did it. I like, so much easier to tell where a post ends now

.post-cloak::after {
    color: white;
    background-color: red;
    font-size: 16pt;
    content: "!!! END OF POST !!!";
}

On a somewhat more serious note:

button.has-like {
    -webkit-animation: animatelikes 1.5s infinite; /* Chrome, Safari, Opera */
    animation: animatelikes 1.5s infinite;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
}

@-webkit-keyframes animatelikes {
    0%   { font-size: 16px; opacity: 1.0; }
    20%  { font-size: 14px; opacity: 0.6; }
    38%  { font-size: 14px; opacity: 0.6; }
    40%  { font-size: 16px; opacity: 1.0; }
    60%  { font-size: 14px; opacity: 0.6; }
    98%  { font-size: 14px; opacity: 0.6; }
    100% { font-size: 16px; opacity: 1.0; }
}
@keyframes animatelikes {
    0%   { font-size: 16px; opacity: 1.0; }
    20%  { font-size: 14px; opacity: 0.6; }
    38%  { font-size: 14px; opacity: 0.6; }
    40%  { font-size: 16px; opacity: 1.0; }
    60%  { font-size: 14px; opacity: 0.6; }
    98%  { font-size: 14px; opacity: 0.6; }
    100% { font-size: 16px; opacity: 1.0       ;}
}

PJH

@faoileag said:

What, FIXED before CLOSED? I am impressed!

Of course, someone's a bit slow in releasing stuff that's been committed - I can only use the admin panel to update to the highlighted commit near the bottom in the following image - the copy-fix is at the top:

Arantor

I'm not sure whether to applaud for evilness or not. Example please.

Onyx

Freaking gif generator! Why so small?

Oh well, you get the picture.

Edit: Slightly bigger one

Keith

I think the whole screen should flash those colours, to make it clear that you're about to like something.

Luhmann

@Keith said:

the whole screen should flash those colours,

No blinking text then?

Keith

@Luhmann said:

No blinking text then?

No, that would just make it gaudy.

Arantor

That's awesomely puke-inducing. I endorse this evilness.

Zecc

http://gfycat.com/GraveSpryJanenschia

Or direct link to video: http://zippy.gfycat.com/GraveSpryJanenschia.webm

Unfortunately resized and sped up.

Arantor

I definitely approve.

Onyx

Look ma, I'm on TV!

Zecc

It took me a while to find you on that video, so obviously my first thought was that you'd be the guy on @Luhmann's post.

Luhmann

It would be even more impressive if the dildo was pulsating ...

Onyx

Dildo, crowbar, I'm not picky.

darkmatter

I like it with more pulsation.
[code]
button.like:hover
{
-webkit-animation: animatelikes 2s infinite; /* Chrome, Safari, Opera /
animation: animatelikes 2s infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
/ Chrome, Safari, Opera */
@-webkit-keyframes animatelikes {
0% {opacity: 1.0;background:red;font-size:10px;}
20% {opacity: 0.8;background:blue;font-size:14px;}
40% {opacity: 0.6;background:yellow;font-size:18px;}
50% {opacity: 0.25;background:purple;font-size:20px;}
60% {opacity: 0.6;background:orange;font-size:18px;}
80% {opacity: 0.8;background:pink;font-size:14px;}
100% {opacity: 1.0;background:green;font-size:10px;}
}

/* Standard syntax */
@keyframes animatelikes {
0% {opacity: 1.0;background:red;font-size:10px;}
20% {opacity: 0.8;background:blue;font-size:14px;}
40% {opacity: 0.6;background:yellow;font-size:18px;}
50% {opacity: 0.25;background:purple;font-size:20px;}
60% {opacity: 0.6;background:orange;font-size:18px;}
80% {opacity: 0.8;background:pink;font-size:14px;}
100% {opacity: 1.0;background:green;font-size:10px;}
}
[/code]

Zecc

Gotta love Discourse:

Arantor

Cruel and unusual, I like it.

darkmatter

@Arantor said:

Cruel and unusual, I like it.

My middle names.

dhromed

I would like to point out that ~75% of any given page consists of UI and empty space. It's especially obvious with single-line posts.

dhromed

Als my crude font-styler turns all the icons into Cambria, which are then boxes with a surprisingly pleasing light outline and which have not nearly as heavy a presence as the intended icons.

M_Adams

@darkmatter said:

I like it with more pulsation.

My current Stylish (with all the gleaned stuff from various threads):

/*
     http://what.thedailywtf.com/t/discourse-vs-community-server/249/156
*/

a[href="#tag"] {
  background: lightgrey;
  padding: 3px;
  color: black;
  border-radius: 2px;
}
a[href="#tag"]:hover {
  color: black;
}

     /* borders don't mix with below additions nicely :(

.topic-body {
  border-top-width: 3px !important;
  border-top-color: #000000 !important;
}
.topic-avatar {
  border-top-width: 3px !important;
  border-top-color: #000000 !important;
}
.gap {
  border-top-width: 3px !important;
  border-top-color: #000000 !important;
}

     */

.reply-to-tab {
  border-top: none !important;
}
.gap {
  border-top: 3px solid black !important;
  width: 832px !important;
}

/*
   http://what.thedailywtf.com/t/discourse-vs-community-server/249/162
*/

   #main-outlet {
    background-color: #ddd;
}

article {
    margin-bottom: 2px;
    background-color: #F4F4F4;
}


article {
    border-top: #ccc solid 1px;
    border-right: #888 solid 1px;
    border-bottom: #888 solid 1px;
    border-left: #ccc solid 1px;
}

.topic-avatar {
    position: relative;
    margin-right: -12px;
}

.topic-avatar .avatar {
    position: relative;
    left: -12px;
    box-shadow: 2px 2px 1px #ddd;
    border-color: #ccc;
    background-color: white;
}

.topic-meta-data {
    /*background-color: #d7e3ed;*/
    border-bottom: 1px solid #ddd;
}

/*
   http://what.thedailywtf.com/t/discourse-vs-community-server/249/168
*/

#main-outlet {
    background-color: #ddd;
}

article {
    margin-bottom: 2px;
    background-color: #F4F4F4;
}

article {
    box-shadow: inset 2px 4px 3px #ccc;
}

.topic-avatar {
    position: relative;
    margin-left: -12px;
}

.topic-avatar .avatar {
    position: relative;
    left: -12px;
    border: 1px solid #888;
    box-shadow: 2px 2px 1px #888;
    border-color: #ccc;
    background-color: white;
}
.topic-meta-data {
    background-color: #d7e3ed;
    border: 1px solid #888;
    box-shadow: 2px 3px 1px #ccc;
    padding-left: 0.2em;
    padding-right: 0.2em;
}

#reply-control {
    box-shadow: 0px -5px 5px rgba(128,140,140,0.5);
    background-color: #D9E6F0 !important;
}

#reply-control .grippie {
    background-color: #d4e0ea !important;
}

#wmd-button-bar, .wmd-button {
    background-color: #acb6be !important;
}

.wmd-button:hover {
    background-color: #f1b423 !important;
}

/*
   http://what.thedailywtf.com/t/discourse-vs-community-server/249/171
*/

.topic-body, .topic-avatar, #topic-closing-info {
	border-top: 0 !important;
}

/*
   http://what.thedailywtf.com/t/hamburger-spacing-inconsistent/1438/2
*/

.d-header .icons [class^="fa fa-"] { font-size: 21px; }

/*
   http://what.thedailywtf.com/t/the-like-icon-wut/1694/65
*/

button.like:hover
{
    -webkit-animation: animatelikes 2s infinite; /* Chrome, Safari, Opera */
    animation: animatelikes 2s infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes animatelikes {
    0%   {opacity: 1.0;background:red;font-size:10px;}
    20%  {opacity: 0.8;background:blue;font-size:14px;}
    40%  {opacity: 0.6;background:yellow;font-size:18px;}
    50%  {opacity: 0.25;background:purple;font-size:20px;}
    60%  {opacity: 0.6;background:orange;font-size:18px;}
    80%  {opacity: 0.8;background:pink;font-size:14px;}
    100% {opacity: 1.0;background:green;font-size:10px;}
}
/* Standard syntax */
@keyframes animatelikes {
    0%   {opacity: 1.0;background:red;font-size:10px;}
    20%  {opacity: 0.8;background:blue;font-size:14px;}
    40%  {opacity: 0.6;background:yellow;font-size:18px;}
    50%  {opacity: 0.25;background:purple;font-size:20px;}
    60%  {opacity: 0.6;background:orange;font-size:18px;}
    80%  {opacity: 0.8;background:pink;font-size:14px;}
    100% {opacity: 1.0;background:green;font-size:10px;}
}

chubertdev

@dhromed said:

I would like to point out that ~75% of any given page consists of UI and empty space. It's especially obvious with single-line posts.

24pt font on comment text, and make everything else smaller. the text is the most important part of the post.

Zecc

@M_Adams said:

My current Stylish (with all the gleaned stuff from various threads):

@dhromed, I see it now:
@dhromed said:

Fuck me that's hideous. Stop using all those dropshadows. It's like you just discovered Photoshop. Also the fugly plethora of greys, borders and hardly any padding at all. Are you a programmer? This is how programmers "design" things.

Where's the dislike button?

I haven't had enough sleep so I'm taking it out on you.

I still like the floating avatars, even if the dropshadows aren't that good.
As for the colors... eek.

dhromed

@chubertdev said:

make everything else smaller.

Oh interestingly I just did that, locally:

i.fa {
   font-size:75%;
   opacity:0.3;
}

M_Adams

@Zecc said:

I still like the floating avatars, even if the dropshadows aren't that good.As for the colors... eek.

Well, I'm an accountant who does programming. I'm not a bloody artist. Most of my art ended up here:

Besides, it's still not as butt-ugly as default Dicksores.

HardwareGeek

@M_Adams said:

While a doctor is not any of those things¹, at least three of those occupations are, in fact, sometimes doctors. Moreover, psychiatrists are not only doctors; they are medical doctors — physicians:

Psychiatrist - Wikipedia

:
Psychiatrists are medical doctors who must evaluate patients to determine whether or not their symptoms are the result of a physical illness, a combination of physical and mental, or a strictly psychiatric one.... In the U.S. and Canada one must first attain the degree of M.D. or D.O.... In the United Kingdom, psychiatrists must hold a medical degree.... In the Netherlands one must complete medical school after which one is certified as a medical doctor. After a strict selection program one can specialize in psychiatry.

This differentiates a psychiatrist from a psychologist. In some jurisdictions a psychologist also requires a doctorate (not in medicine); in others a Masters or equivalent is sufficient. In most jurisdictions a psychologist cannot prescribe medicine; a few jurisdictions allow psychologists who have additional specialized training to do so.

¹ Typically, although physicians could certainly build a brick wall or work on their car in their spare time, if they choose to do so.