Vivaldi Forum mod

LonM

Update on my new emote picker - The new way I'm planning will work like:

Enable advanced formatting
You can add your own by file upload in the extension settings (chrome extension storage has a max space of about 5Mb, so should be plenty of space for emotes + custom css)
When you use an emote in a comment it uploads it directly, that way if the link to an external emote breaks, it still works

Does that sound easy to use? Is there anything in that workflow that doesn't make sense or could be made cleaner?
I don't want to end up dealing with feature creep or angering mod users

Oh and one more thing - If there was a "communal" set of emotes people could share and add to, how would you prefer to share them? I'd like to avoid, if at all possible, relying on external websites, so this seems like a very tricky problem.

A Former User

@LonM said in Vivaldi Forum mod:

You can add your own by file upload in the extension settings (chrome extension storage has a max space of about 5Mb, so should be plenty of space for emotes + custom css)

When you use an emote in a comment it uploads it directly, that way if the link to an external emote breaks, it still works

Does that mean that

every single emoji would be loaded separately? (I know they’re usually small, but is it really necessary?)
the post composer would be filled with a base64 URL?

Can they be added as /assets/uploads/files/* forum URLs instead?

Oh and one more thing - If there was a "communal" set of emotes people could share and add to, how would you prefer to share them? I'd like to avoid, if at all possible, relying on external websites, so this seems like a very tricky problem.

Maybe there could be a topic somewhere & people could add posts in a given format. Then you could make use of /api/, e.g. /api/topic/19728/vivaldi-forum-mod/751 gives this thread — but only posts from this page, so everyone should edit their own post when adding more emoji to avoid loading too many times (that should be used either on user request or after an interval). Also, to avoid overloading the picker, there should in a way be categories — default, local, {someone’s nickname}

Sorry, I got a little blown away. That’s just an idea how it could be made. Take it or throw it away.

luetage

@LonM I don’t really have an opinion, to me the opera set we currently have is enough. And you can’t anger anyone, it’s a mod which has to be enabled and it doesn’t hurt anybody.

LonM

@potmeklecbohdan Yes, it would be far better for space & network efficiency if I could get a set of URLs that wouldn't change instead of re-uploading unique images.

Then, with a specific topic the API could pull everything in and just extract image URLs. Thanks for teaching me about that - I didn't know it existed.

TbGbe · Win: Snapshot Vivaldi 7.1.3570.27

@potmeklecbohdan said in Vivaldi Forum mod:

Then you could make use of /api/, e.g. /api/topic/19728/vivaldi-forum-mod/751 gives this thread

According to my address bar it is 752 not 751 ??
Does that change depending on user settings?

Ornorm

@TbGbe That number changes when scrolling up/down on the page (756 when at the bottom, 741 at the top -> seems to be related to the number of the post in the thread).

TbGbe · Win: Snapshot Vivaldi 7.1.3570.27

@Ornorm Yes, so it is a specific post (not the whole thread). Although a post does indicate the page as @potmeklecbohdan stated - but that means it does depend on user configuration of "Pagination".
Unless the user uses "infinite scroll" and so there are no pages!?

Ornorm

@TbGbe said in Vivaldi Forum mod:

the user uses "infinite scroll"

I believe the post number would remain the same because I don't see a reference to the page number (just a supposition).

TbGbe · Win: Snapshot Vivaldi 7.1.3570.27

@Ornorm That was my point too.
So using an api would have to be post specific, that would lead to a large number of duplicate posts of emojis wouldn't it?

stardepp

@luetage Politely asked, will your Chrome Web Store extension be updated again? Because the themes do not cover the top bar, see screenshot:

2020-12-07 09_45_08-Window.jpg

luetage

@stardepp Yeah, working on it. Aiming for an xmas release.

luetage

@guigirl No, just fill a pen with bio‐ink and write “naughty” on the back of your hand, then treat yourself to some recycled paper. It’s very nutritious.

stardepp

@luetage Good to know. How can one thank you?

Ornorm

Something useless...
I must confess...
But if someone's interess...
Be my guess...

.account .cover .avatar-wrapper {
    position: center;
    border-radius: 15% !important;
    border: 4px solid #337AB7;
    animation: avatargrow 2s 1;
}
@keyframes avatargrow {
    50%{border: 10px solid white;}
}

hlehyaric

@Ornorm When will you learn ? Unnecessary and superfluous details make all the difference and are the funniest.

Ornorm

@hlehyaric I've learned the lesson... (I don't share all my cherries you know... I have more unnecessary and superfluous details all around now).

hlehyaric

@Ornorm said in Vivaldi Forum mod:

I've learned the lesson

Excellent!

Il sort d'où celui-ci? Je l'ai manqué dans la liste?

Ornorm

@hlehyaric Nope, you didn't miss it, it was a surprise for you (I know you love them so... giving a little surprise from time to time is worth it )

hlehyaric

@Ornorm Thanks! It's Christmas before Christmas!

Ornorm

@Ornorm So, the initial mod has been updated several times since the "first shot".
If someone wants to use it, enhance it and/or tweak it a bit to fulfill its own needs, just copy/paste the following code and have fun! :

{"themeName":"SeaCountrySide","colorBg":"#358FBC","colorFg":"#005ec1","colorHi":"#9c515c","colorBtn":"#71afc4","colorDrop":"#99c6db","colorLi":"#9CB6BE","colorLi2":"#0078f4"}

/** Theme based on the community theme "Mod" by luetage **/

/** Global theme background and colors **/
/* set background image of theme, the main panel part handles background with narrow screen widths */
body, main#panel.slideout-panel {
    background-image: url("https://media.giphy.com/media/xTiQykLdYMyX2UAxj2/giphy.gif") !important;
    color: #2a363b;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: 100% 100%;
}

/* Panel color - applicable for tiled forum tabs where one tab is too small to display the background image or when window width is smaller than 1199px */
@media (max-width: 1199px) {
    body, main#panel.slideout-panel {
        background-color: transparent;
        background-image : url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.o5YXHARzLud2KBeUpC_5ZQHaNK%26pid%3DApi&f=1") !important;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
    }
}

/* transparency setting for the content + adjusted spacing */
#content {
     background-color: rgba(217,247,249,0.55);
     padding-right: 25px !important;
     padding-left: 25px !important;
}

.topic .posts>li a:hover {
    color: white;
}

/* category + various other hover backgrounds */
.categories>li:hover, .category>ul>li:hover, .notifications-list li:nth-child(even), #content .nav>li:not(.active)>a:focus, #content .nav>li:not(.active)>a:hover {
    background-color: rgba(20,139,224,0.35) !important;
}
.notification-list li.unread {
    background-color: rgba(20,139,224,0.35) !important;
}
.table-striped>tbody>tr:nth-of-type(even):hover {
    background-color: transparent;
}
/* change color of grey text */
.timeago {
    color: #e0f3f9;
}
.stats small {
    color: #e0f3f9;
}
.tag-item {
    color: #e0f3f9;
}
.tag-topic-count {
    color: #750750;
}

/* buttons */
#new_topic {
    background-color: #338dba;
}
#new_topic.active, #new_topic.focus, #new_topic:active, #new_topic:focus, #new_topic:hover {
    background-color: #71afc4;
    border-color: #0a7193;
}
.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 0.8s;
}
button.btn.btn-default:active:after, .btn-primary:active:after {
    opacity: 0.8;
    transform: scale(0, 0);
    transition: 0s;
}


/* Menu (resized window) */
    /* Menu background color and transparency */
@media (max-width: 1199px) {
    .slideout-menu {
        background-color: transparent;
        background-image: linear-gradient(145deg,rgba(11,70,165,0.9),rgba(41,111,146,0.7));
    }
    /* Menu profile cover added at the top of the menu - update the number before "-profilecover.jpeg" with the number of your user ID */
    .menu-profile {
        background-image: url("https://forum.vivaldi.net/assets/uploads/profile/110234-profilecover.jpeg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-color: transparent;
    }
    /* Change icons of menu */
    /* Browser */
    .fa-rss:before {
        content: "\f2d0";
    }
    .fa-envelope:before {
        content: "\f1fa";
    }
    .fa-fire:before {
        content: "\f0e7";
    }
}


/** Header **/
/* Header gradient */
#vivaldi-header {
    background: linear-gradient(to bottom, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%);
}

/* Vivaldi Logo */
#vivaldilogo {
    background: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/bc6b7c24-7748-4c6c-9171-107578bb927d/dakqp9y-ff2b13b5-2b08-4b9b-8c35-85fa6bdaebcb.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvYmM2YjdjMjQtNzc0OC00YzZjLTkxNzEtMTA3NTc4YmI5MjdkXC9kYWtxcDl5LWZmMmIxM2I1LTJiMDgtNGI5Yi04YzM1LTg1ZmE2YmRhZWJjYi5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.gjR74Q2IzDqZU9SoX9Lr4BcSxvl3ILlsiVF5n0ZFBjI") no-repeat;
    background-size: 50px 50px;
    position: inherit;
    margin-top: 5px;
}
#vivaldilogo: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 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
@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;}
}

#vivaldi-header #vivaldilogo, #vivaldi-header #vivaldilogo img {
    position: absolute;
    display: block;
    width: 50px;
    height: 50px;
    z-index: 98;
}
#vivaldilogo img {
    display: none !important; 
} 
/* Active notifications background color */
.navbar-default .navbar-nav>.open>a {
    background: linear-gradient(to bottom, rgba(184,225,252,1) 0%,rgba(169,210,243,1) 10%,rgba(144,186,228,1) 25%,rgba(144,188,234,1) 37%,rgba(144,191,240,1) 50%,rgba(107,168,229,1) 51%,rgba(162,218,245,1) 83%,rgba(189,243,253,1) 100%);
    color: white;
}
/* #vivaldilogin>a:active>i */ #vivaldi-header a:active, #vivaldi-header a:focus {
    color: white
}

/* Navigation bar */
#vivaldi-header>.row {
    padding: 0px 20px;
    width: 1200px;
    max-width: 100%;
    margin: auto;
}

/* Position adjustment of login menu in the header */
#vivaldilogin {
    top: 10px;
}

/* Adjustment of Vivaldimenu position and size */
#vivaldimenu a, #vivaldimenu li, #vivaldimenu a:hover, #vivaldimenu a:visited, #vivaldimenu a:focus, #vivaldimenu a:active {
    padding: 0px 15px 0px 15px;
    font-size: 15px;
    line-height: 64px;
}
#vivaldimenu li a:hover {
    background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);
    color: white;
}
#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%;
}

/* Add background image to submenu */
#submenu {
    background-color: transparent;
    background-image: url("https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.xenosysusa.com%2Fimages%2Fhome%2Funder.png&f=1&nofb=1"),linear-gradient(rgba(35,111,219,0), rgba(120,181,201,1)) !important;
    background-blend-mode: darken;
    background-repeat: no-repeat;
    background-attachment: scroll; 
    background-position: center center;
    background-size: cover;
} 

/* Modify background color of quick search drop-down */
#quick-search-results.dropdown-menu.quick-search-results {
    background-color: #99c6db;
}
/* Modify background color of quick search drop-down */
.dropdown-menu {
    background-color: transparent;
    background: linear-gradient(to bottom, rgba(205,231,250,1) 0%,rgba(205,231,250,0.5) 100%);
}
/* Modify background of notifications on hover */
ul.notification-list li:hover {
    background-color: #99c6db;
}

/** Icons **/
.fa-fire:before {
    content: "\f0e7";
}

/** Miscellaneous **/

/* New topics alert */
.alert-warning {
    background-color: transparent;
    background: linear-gradient(to bottom, rgba(184,225,252,1) 0%,rgba(169,210,243,1) 10%,rgba(144,186,228,1) 25%,rgba(144,188,234,1) 37%,rgba(144,191,240,1) 50%,rgba(107,168,229,1) 51%,rgba(162,218,245,1) 83%,rgba(189,243,253,1) 100%);
    color: white;
    border-radius: 10px;
}
/* Avatar tooltips */
.tooltip.top .tooltip-arrow {
    border-top-color: #338DBA;
}
.tooltip.bottom .tooltip-arrow {
    border-bottom-color: #338DBA;
}
.tooltip-inner {
    background-color: #338DBA;
  /*  background: linear-gradient(to top, white 0%, rgba(255, 255, 255, 0.3)); */
    color: white;
    border-radius: 5px;
    box-shadow: 0 3px 5px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

/* Bottom chat profile picture */
.taskbar .navbar-nav li.taskbar-chat a, .taskbar .navbar-nav li.taskbar-chat a:hover {
    background-size: contain;
}

/* Pages */
.ul.pagination, .pagination li, .pagination li>a {
    background-color: transparent;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.2) 100%);
}
.pagination 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%);
}
.pagination 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;
}
.pagination li>a:active {
    color: black;
    background: radial-gradient(white, transparent);
    background-size: 100%;
}
/* User details */
.persona-usercard {
    background: linear-gradient(to bottom, #338DBA, RGBA(51, 141, 186, 0.5));
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    box-shadow: 0 25px 10px 0 rgba(0,0,0,.25), 0 2px 10px 0 rgba(0,0,0,.25)
}
.usercard-name, .usercard-username {
    color: white;
}
.avatar.avatar-rounded {
    border-radius: 15px !important;
}
.account .cover .avatar-wrapper {
    position: center;
    border-radius: 15% !important;
    border: 4px solid #337AB7;
    animation: avatargrow 2s 1;
}
@keyframes avatargrow {
    50%{border: 10px solid white;}
}
/* Status */
.fa.fa-circle.status.online {
    background: -webkit-radial-gradient(circle, #2cd81b, #135f0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.fa.fa-circle.status.offline {
    background: -webkit-radial-gradient(circle, grey, black);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.fa.fa-circle.status.dnd {
    background: -webkit-radial-gradient(circle, red, #600a0e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.fa.fa-circle.status.away {
    background: -webkit-radial-gradient(circle, orange, #aa4009);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Necro posts color change */
.topic .necro-post {
    color: rgba(17,127,127,.5);
}

/* Panels (search results) */
.panel {
    background: linear-gradient(rgba(255,255,255,0.5), transparent);
}

It's certainly not perfect and might still be a work in progress but I think I will calm down a bit for the moment...