Vivaldi Forum mod

hlehyaric

@luetage Thanks a lot for your kind comment.
Regarding color variables, I do what I can 😄. In fact, I don't know CSS, so there are some mistakes. I should learn how to use properly CSS.

luetage

The forum update came as surprise again, I am currently working on fixing everything.

Ornorm

@luetage Mmm, you love surprises, don't you?
You're wonderful Luetage! Really!

hlehyaric

@Ornorm There are some surprises in this update I'm not a fan of.

Surprise

You click on a topic, go back to the previous page (the topics' list). The topic you just visited is highlighted (for a few seconds) in this light blue/turquoise colour. Total joy.

luetage

@hlehyaric Already fixed.

hlehyaric

@luetage You're our saviour. Long live @luetage 🎉.

hlehyaric

@luetage Thanks a lot for your great work (I just updated from github).

CantankRus

Thanks @luetage .
Using the github version after vivaldi turned the lights out on dracula.
I see the light in the dark.

My theme...

{"themeName":"Blue Steel","colorBg":"#222d32","colorFg":"#e6eff1","colorHi":"#31d9cc","colorBtn":"#435c68","colorDrop":"#344d58","colorLi":"#009688","colorLi2":"#8ce2f6"}

CantankRus

Using vivaldi_forum_mod 3 my selected theme doesn't persist after vivaldi is restarted.
The vivaldiforum page loads using my theme but then flashes and reverts to Dracula.

https://streamable.com/pr7ow <---- video 1.8mb

hlehyaric

@CantankRus I have the same issue: sometimes (not every time), the forum loads Neon on start instead on my own theme, only in the main page (navbar and header are not affected).

luetage

@hlehyaric @CantankRus
You're using an unsupported version, the behavior you're experiencing isn't bugged at all but to be expected.

It's unfortunate, I first got sick and then was away, I've been only on mobile for a while. But I'm back now…

hlehyaric

@luetage We've just reported an issue, not asking for a fix right now (just in case this point would have not been clear 😉)
I can't speak on behalf on @CantankRus, but for me it's a minor annoyance, though I'm pretty sure a fix will come in due course.
Above all, take care of you. We need you more than you imagine.

CantankRus

@luetage
No problem... I thought you were after feedback on this version.
Hope your feeling better.

I'm working on a new theme (probably called Chocolate after the background pattern). It's not even half done, but if you'd like to help me (as I'm usually OK with half-done things (i.e. the text is readable)) or test (and notify me of missing parts):

body, #header-menu {
    /* Background pattern (a bit darkened) from https://leaverou.github.io/css3patterns/#chocolate-weave */
    background: linear-gradient(45deg, #ba8 13%, transparent 0, transparent 88%, #ba8 0),
        linear-gradient(135deg, transparent 37%, #863 0, #863 63%, transparent 0),
        linear-gradient(45deg, transparent 37%, #ba8 0, #ba8 63%, transparent 0) #531;
    background-size: 25px 25px;
    color: #fff !important;
}
#vivaldiheader {
    background: transparent;
}
#submenu, #header-menu {
    border-bottom-width: 0;
}
#vivaldimenu a,
#vivaldimenu a.current,
#vivaldimenu a:hover {
    color: #fff;
}
#vivaldimenu ul {
    background: #000a;
    backdrop-filter: blur(2px);
    border-width: 0;
    border-radius: 5px;
}
#vivaldimenu ul li {
    border-top-color: #000d;
}
#vivaldimenu ul li a:hover {
    background: #fff8;
    color: #000;
}
#vivaldiheader a, #vivaldiheader a:active, #vivaldiheader a:focus, #vivaldiheader a:visited {
    color: #fff;
}
#search-button {
    color: #fff;
}
#vivaldilogo {
    background: url('chrome-extension://pgmhhogphakajgbmbankhhjocdjmbbed/themes/img/logo-white.png') no-repeat;
}
#vivaldilogo img {
    display: none !important;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
    background: #0008;
}
.dropdown-menu {
    background-color: #000a;
    backdrop-filter: blur(2px);
    color: #fff;
}
.dropdown-menu a {
    color: #fff !important;
}
.dropdown-menu a:hover {
    background: #fffa !important;
    color: #000 !important;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}
.notification-list li.unread,
.notifications-list li.unread {
    background: #fffa !important;
    color: #000 !important;
}
.notification-list li.unread .text,
.notification-list li.unread .relTime,
.notification-list li.unread .mark-read:after,
.notification-list li.unread::before,
.notifications-list li.unread .text,
.notifications-list li.unread .relTime,
.notifications-list li.unread .mark-read:after,
.notifications-list li.unread::before {
    color: #000 !important;
}
.notification-list li:not(.unread) .text,
.notification-list li:not(.unread) .relTime,
.notification-list li:not(.unread) .mark-read:after,
.notification-list li:not(.unread)::before,
.notifications-list li:not(.unread) .text,
.notifications-list li:not(.unread) .relTime,
.notifications-list li:not(.unread) .mark-read:after,
.notifications-list li:not(.unread)::before {
    color: #fff !important
}

#submenu {
    background: #0008;
    backdrop-filter: blur(1px);
}
#submenu a:focus, #submenu a:hover, #submenu li.active>a {
    background: #fffa;
    color: #000;
}

#panel {
    background: transparent;
}
#content {
    background: #000a;
    backdrop-filter: blur(2px);
    margin-top: 20px;
    border-radius: 10px;
    padding-left: 50px;
    padding-right: 50px;
}
.categories>li:hover,
.category>ul>li:hover {
    background-color: #0004;
}
.category .category-item, .topic .topic-item {
    transition: none;
}
.categories .description, .category .description, .subcategory .description {
    color: #ececec;
}
#category-no-topics {
    background: #444a;
    border-color: #888;
    border-width: 0 0 0 5px;
    color: #fff;
    margin-top: 20px;
}
.topic [component="post/parent"], .topic [component="post/parent"]:hover, .topic [component="post/parent"]:active, .topic [component="post/parent"]:focus {
    background-color: #fff8 !important;
    color: #000 !important;
    text-decoration: none !important;
}
[component="post"] .post-footer .pull-right a {
    color: #ff4d4d !important;
}
.topic [component="post/upvote"]:not(.upvoted),
.topic [component="post/downvote"]:not(.downvoted) {
    background-color: #fff4;
}
.topic [component="post/upvote"]:not(.upvoted):hover,
.topic [component="post/downvote"]:not(.downvoted):hover {
    background-color: #fff6;
}
.topic [component="post/upvote"].upvoted {
    background-color: #5fbf5f !important;
}
/* Just for case downvotes will return... */
.topic [component="post/downvote"].downvoted {
    background-color: #bf5f5f !important;
}
[component="user/picture"] + .fa.fa-circle[component="user/status"] {
    opacity: .7;
}

ul.pagination {
    border: 1px solid #8888;
    border-radius: 5px;
}
ul.pagination>li:first-child a {
    border-radius: 5px 0 0 5px;
}
ul.pagination>li:last-child a {
    border-radius: 0 5px 5px 0;
}
ul.pagination>li>a, ul.pagination>li>span {
    background-color: #0008;
    color: #fff;
    border-width: 0;
    margin-left: 0;
}
ul.pagination>li>a:focus, ul.pagination>li>a:hover, ul.pagination>li>span:focus, ul.pagination>li>span:hover,
ul.pagination>.active>a, ul.pagination>.active>a:focus, ul.pagination>.active>a:hover, ul.pagination>.active>span, ul.pagination>.active>span:focus, ul.pagination>.active>span:hover {
    background-color: #fff8;
    color: #000;
}
ul.pagination>.disabled>a, ul.pagination>.disabled>a:focus, ul.pagination>.disabled>a:hover, ul.pagination>.disabled>span, ul.pagination>.disabled>span:focus, ul.pagination>.disabled>span:hover {
    background-color: #0008;
    color: #888;
}
#vivaldifooter a {
    color: #fff;
}

/* Post composer */
.composer {
    background: #000a;
    backdrop-filter: blur(2px);
}
.composer .formatting-bar .formatting-group li i {
    color: #ccc;
}
.composer .formatting-bar .formatting-group li:hover,
.composer .formatting-bar .formatting-group li:focus {
    background-color: #8888;
}
.composer .write {
    border-color: #444a;
    background-color: #000a;
    color: #fff;
}
.composer .preview.well {
    background: transparent; /* or #0008 */
    border-color: transparent; /* or #4448 */
}
.composer .title {
    background-color: transparent;
}
.composer .mobile-navbar {
    background-color: #0004;
}

.modal-content {
    background: #000a;
    backdrop-filter: blur(2px);
}
.modal-dialog button.close {
    color: #aaa;
    text-shadow: none;
    opacity: 1;
}
.modal-footer {
    border-top-color: #000;
}

/* Chat */
.chat-modal .chat-content li.chat-message .message-body-wrapper:hover .message-body, .expanded-chat .chat-content li.chat-message .message-body-wrapper:hover .message-body {
    background: transparent;
}

/* Search */
.alert-info {
    background-color: #0804;
    color: #7fff7f;
    border-color: #0808;
}
.panel {
    background-color: #0008;
    border-radius: 5px;
}
.panel-default {
    border-color: #8888;
}

/* Notifications */
.alert-window .alert {
    background-color: #000a;
    backdrop-filter: blur(2px);
    box-shadow: none;
}
.alert-window .alert .close {
    color: #fff;
    text-shadow: none;
}

/* Profile */
.account .profile .profile-meta strong {
    color: #aaa;
}
/* Settings */
.list-group-item {
    background-color: #333a;
    border-color: transparent;
}

a {
    color: #f00;
}
blockquote {
    background: #0008;
    border-left-color: #333;
}
.topic .posts .content .toggle {
    background: #fff8;
    color: #000;
    border-color: transparent;
}
hr {
    border-top-color: #555;
}
code {
    font-family: 'Hack', monospace;
}
:not(pre) > code {
    background: #fff8;
    color: #000;
    border-radius: 3px;
}
pre:not(.markdown-highlight) {
    background-color: #2228;
    color: #fff;
    border-color: #8884;
    border-radius: 5px;
}
.hljs {
    color: #fff;
}
.btn-primary, .btn-info {
    background: #888a;
    color: #fff !important;
    border-color: transparent;
}
.btn-primary:hover, .btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus,
.btn-info:hover, .btn-info:active, .open > .dropdown-toggle.btn-info {
    background: #aaaa;
}
.btn-default {
    background: #000a;
    color: #fff;
    border-color: #888a;
}
.btn-default.active, .btn-default.focus, .btn-default:active, .btn-default:focus, .btn-default:hover, .open>.dropdown-toggle.btn-default {
    background: #444a;
    color: #fff;
    border-color: #888a;
}
.form-control {
    background-color: #333a;
    color: #fff;
    border-color: #888 !important;
    box-shadow: none !important;
}

/* ====================================================================ADDED LATER==================================================================== */
.chat-list.chats-list {
    color: #fff;
}
.chat-list.chats-list,
.header .chat-list > li:not(:last-child) {
    border-color: #444;
}
.chat-list.chats-list > li:hover {
    background: #5558;
}

You may need to enable vivaldi://flags/#enable-experimental-web-platform-features

AltCode

Will the chrome web store version be updated, or has the support for it been discontinued?

luetage

@AltCode Of course it will be updated.

derDay

since the forum update the bar at the top is displayed in the wrong way.
There was a another fault at the botton, but I can't reproduce it

luetage

@derDay There have been numerous changes to the design, the whole mod has to be rewritten. Will take some time.

derDay

@luetage don't hurry

hlehyaric

@luetage You're back. That's good news! 🎉👏