Vivaldi Forum mod

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...

hlehyaric

@Ornorm Wow! Impressive!

Hadden89

@Ornorm said in Vivaldi Forum mod:

I think I will calm down a bit for the moment...

Yeah, otherwise you'll end up to do a whole Forum CSS theme

hlehyaric

@Hadden89 Isn't it the purpose?

Ornorm

@hlehyaric It was indeed what I intended to do with my little fingers Brave