Vivaldi Forum mod

[Ornorm]

@hlehyaric Interesting one. Now I'm dreaming of a progress bar on the top changing its color based on the progression of the line...

[A Former User]

@luetage They all have the right alt.

Edit: I tried playing with it a little & ~ an hour after giving up I remembered that imgs can’t have ::before & ::after or what…

[LonM]

@luetage I would love that. I'm pretty sure I made some kind of users riot userscript for that ages ago. I could try and did dig it up again.

edit: phone IMEs suck

[luetage]

@LonM I can remember we had forum emoji, then we didn’t, then some user complained about it, then they got reintroduced and here we are now.

[LonM]

@luetage Turns out to be fairly easy to do - https://github.com/LonMcGregor/vivaldi_forum_mod/blob/moreEmotes/mods/undoMoji.js

[A Former User]

@LonM FYI there’s also this option: $(window).on('action:ajaxify.end', checkDocument), though it doesn’t solve cases such as the post editor.

[stardepp]

@LonM Where do I insert this .jss code? In custom.js ? And what does this code do?

[Hadden89]

@stardepp I think the easiest way is to load the lonm vfm fork as unpacked extension
(but then you have to load the custom css in the "new" extension and choose the same mods+the new ones)

[Hadden89]

@LonM Undomoji is a bit awkard on windows 10 as the default&replaced emoji are the same, only smaller
Custom emoji only via upload or load url is planned? ^^
Linkify bugs, sadly, is useful only for sopranos

[LonM]

@Hadden89 I need to figure out a way to load via URL. Extension permissions are very strict. I also don't want to overload the extension itself. If you want, you can change the size of the emojis. In the forum mod's custom css area, I added this: span.vm-emoji { font-size: x-large; }

[luetage]

@LonM Introducing the tabs permission would be enough. I’ll think about that, other mods would benefit from it too, currently we do all these things with click listeners.

[Ornorm]

Why did I do that? I don't know...
but if you want to reuse it, be my guest

.btn-default, .btn-primary {
    color: #edf6f9;
    background-color: #71afc4;
    border-color: #0a7193;
    position: relative;
}
.btn-default.active, .btn-default.focus, .btn-default:active, .btn-default:focus, .btn-default:hover, .open>.dropdown-toggle.btn-default {
    color: #edf6f9;
    background-color: #0bb2ea;
    border-color: #0bea86;
}
/* Ripple effect */
button.btn.btn-default:after, .btn-primary:after {
    content: '';
    position: absolute; 
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%; 
    background-color: white;
    border-radius: 100%;
    opacity: 0;
    transform: scale(1, 1);
    transition: transform 0.5s, opacity 1s;
}
button.btn.btn-default:active:after, .btn-primary:active:after {
    opacity: 0.4;
    transform: scale(0, 0);
    transition: 0s;
}

[hlehyaric]

@Ornorm
Do we really need a reason to play with CSS?

[Ornorm]

And another one for the players

(not the background, only the effects on hovering and clicking on the submenu items)

@keyframes HoverMove {
    0%   {border-top: 2px solid #ffffff;}
    25%  {border-top: 4px solid #ffe6e6;}
    50%  {border-top: 6px solid #ff8080;}
    100% {border-top: 8px solid #ff0000;}
}
#submenu li.active>a {
    background: linear-gradient(to bottom, rgba(206,219,233,1) 0%,rgba(97,153,199,1) 24%,rgba(58,132,195,1) 42%,rgba(65,154,214,1) 61%,rgba(75,184,240,1) 76%,rgba(58,139,194,1) 87%,rgba(38,85,139,1) 100%);
    color: white;
}
/* Submenu hover animation */
#submenu li>a:hover {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    animation-name: HoverMove;
    animation-duration: 0.45s;
    border-top: 8px solid red;
    box-shadow: 0 3px 5px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    z-index: 999;
    background-color: transparent;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.2) 100%);
}
/* Submenu click animation */
#submenu li>a:active {
    background: radial-gradient(white, transparent);
    background-size: 100%;
}

[hlehyaric]

@Ornorm

[hlehyaric]

@Ornorm That's why you're less active on the forum these days: far too busy modding it!

[Ornorm]

@hlehyaric Concentration was needed... indeed.

[luetage]

Seems like you guys are enjoying yourselves.

[Ornorm]

@luetage It wouldn't have been possible without you...

[hlehyaric]

@luetage That's what this is all about, isn't it? Have fun, have fun with CSS, have fun learning CSS.