Vivaldi Forum mod

luetage

@catweazle Dark Reader is the culprit, set Vivaldi Forum on the ignore list and it will work. Haven’t tried the flag, hope it doesn’t interfere too, but I can reproduce your issue with only black and white colors and transparent composer by running it.

Catweazle

@luetage , you got ahead of me, it was the first thing I tried and it was this indeed. It would therefore be fine, if you can add in the description, there may be interference with Dark Reader (and possibly with other extensions of this type). There are a lot of users which use Dark Reader.

luetage

@juanvase Good find, I see it too with this setting. It happens whenever someone is part of a group (moderator, ambassador, etc.) and replies to someone else. Both fields get slightly misaligned and in turn push the post content to the right side.

Enable User CSS on the options page and paste this code and hit SAVE:

.topic .content {
    margin-top: -25px !important;
}

hlehyaric

@guigirl said in Vivaldi Forum mod:

Ooh, yeah, i also echo the praise for the Bookmarks shortcut.

Isn't it wonderful?

Btw, purple everywhere (with fifty shades of lavender)?

hlehyaric

Btw, now, usercss modifications apply directly without having to refresh the page.

barbudo2005

For those who like the cards view I suggest my Stylus CSS style for Vivaldi Forum for use it in User CSS.

/* FOR TOKYO NIGHT THEME */

/* THREAD LIST */

/* Outline */

li.row.clearfix.category-item

{outline: rgba(169,177,214,0.2) solid 2px !important;} /*Foregound color */

/* Outline and Highlight on Hover */

li.row.clearfix.category-item:hover

{outline: rgba(122,162,247,0.4) solid 3px !important; /* Code color */
filter: brightness(1.2) contrast(1.05) !important;}    


/* Separation of Threads */

.categories>li, .category>ul>li

{margin-bottom: 30px !important;}


/*Alternate color */

li.row.clearfix.category-item:nth-child(even)

{background-color: rgba(40,42, 54, 1.0) !important;} /*Accent color*/


li.row.clearfix.category-item:nth-child(odd)

{background-color: rgba(26,27, 38, 1.0) !important;} /*Background color */




/* POSTS LIST */

/* Outline */

ul.posts li

{outline: rgba(169,177,214,0.2) solid 2px !important; /*Foregound color */
margin-bottom: 30px !important;  /* Separation */}
	

/* Outline and Highlight on Hover */

ul.posts li:hover

{outline:  rgba(122,162,247,0.4) solid 3px !important; /* Code color */
filter: brightness(1.2) contrast(1.05) !important;}    


/*Alternate color */

ul.posts li:nth-of-type(even)

{background-color: rgba(40,42, 54, 1.0) !important;} /*Accent color*/

I do it for Tokyo Night theme. You can modify it accord your theme modifying the RGB colors:

THREAD LIST

Without CSS:

With CSS:

POSTS LIST

Without CSS:

With CSS:

Enjoy.

A Former User

The theme I apply everywhere recently:

{"themeName":"Everforest light","colorBg":"#f8f0dc","colorFg":"#5c6a72","colorHi":"#dfa000","colorAc":"#8da101","colorLi":"#8da101","colorCo":"#dfa000","colorDd":"#fdf6e3"}

{"themeName":"Everforest dark","colorBg":"#2b3339","colorFg":"#d3c6aa","colorHi":"#dbbc7f","colorAc":"#a7c080","colorLi":"#a7c080","colorCo":"#dbbc7f","colorDd":"#2f383e"}

shifte

Translation, "Land of the Rising Sun" is better than "Tokyo Night".

無題.png

hlehyaric

@juanvase Here's the code:

body {
    background-image: url("https://xxxxxxxxxxxxxxxx");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: xxxx xxxx;
}

You have to choose a picture (mine comes from unsplash).
You have to play with center, bottom & top for background-position, e.g. center top or bottom left.

You may want to set the navbar as transparent:

#submenu {
    background-color: transparent;
}

Depending on the picture, you may have to put the same code in header.

#vivaldi-header {
    background-image: url("https://xxxxxxxxxxxxx");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: xxxx xxxxx;
}

hlehyaric

@juanvase Here we are:

/* Leaves */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color:  #f6f6f6 !important;
    background-image: url("https://images.unsplash.com/photo-1599540017148-25049bd49fcb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: left bottom;
}

/* Header */

#vivaldi-header {
    background-image: url("https://images.unsplash.com/photo-1599540017148-25049bd49fcb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: left bottom;
}

#vivaldimenu a.current, #vivaldimenu a:hover,
.topic .posts>li .post-footer a:hover, .topic .posts>li .post-header a:hover, .posts-list .posts-list-item .topic-title:hover, a:hover, a:focus, .breadcrumb a:hover, .stats.text-muted {
    color: #cdcdcd;
}

#vivaldimenu a, #vivaldimenu a:hover {font-weight: 800}

#vivaldimenu > li:nth-child(2), #vivaldimenu > li:nth-child(3),  #vivaldimenu > li:nth-child(4),  #vivaldimenu > li:nth-child(5),
.dropdown-menu .badge {
    display: none;
}

a.dropdown-toggle,
a.dropdown-toggle img,
a.dropdown-toggle:active,
.navbar-default .navbar-nav>.open>a,
#search-form #search-button {
    color: #aed8f1  !important;
    background-color: transparent;
}

a.dropdown-toggle:focus,
a.dropdown-toggle img:focus,
a.dropdown-toggle:active,
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
    color: #1c8db2 !important;
    background-color: transparent;
}

.unread-count:after {
    position: absolute;
    left: 23px;
    top: 6px;
    text-align: center;
    font-size: .9em;
    border: 0;
    color: #f6f6f6;
    background:transparent;
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
button.btn.btn-link:hover {
    color: #75f0ff !important;
}

.dropdown-menu {
    margin: 0;
    border-radius: 4px;
}

.dropdown-menu>.top-divider {
    margin: -5px;
}

.dropdown-menu>.bottom-divider {
    margin: 0;
}

.dropdown-menu>li>a {
    padding: 1px 13px;
    line-height: 2.5;
}

.header .notif-dropdown-link {
    border-top: 1px solid #1c8db2;
}

li.divider {
    background-color: #1c8db2 !important;
    margin: 5px 10px !important;
}

/* Submenu */

#submenu {
    background-color: transparent;
}

#submenu li>a {
    color: #15bbd0 !important;
}

#submenu a:focus, #submenu a:hover,
#submenu li.active>a:hover, #submenu li.active>a {
    color: #ffffff !important;
    background-color: transparent;
}

span.visible-xs-inline.showmenutext:not(.slideout-menu) {
    display: none !important;
}

/* Content */

#content {
    background-color: rgba(0,15,26,0.2);
    border-radius: 10px;
    padding-top: 15px !important;
    margin-top: 40px !important;
}

.account .initialised, .account .cover {margin-top: 70px;}

.categories>li .content h2, 
.categories .category-children, 
.categories .description, 
.category .category-children, 
.category .description, 
.subcategory .category-children, 
.subcategory .description {
    margin-left: 0;
}

.categories>li .card, 
.category>ul>li .card, 
.category>ul>li:not(.unread) .card {
    border-left: 1px solid #9ea0a0 !important;
    border-radius: 4px;
}

.category>ul>li:nth-child(odd),
.subcategory>ul>li:nth-child(odd),
.category .category-item:nth-child(odd), 
.topic .topic-item:nth-child(odd) {
    background: rgba(0,102,133,0.1) !important;
    border-radius: 4px;
}

.categories>li,
.category>ul>li {
    margin-bottom: 0 !important;
    padding-bottom: 20px;
}

.categories>li:hover,
.category>ul>li:hover, {
    background-color: transparent !important;
}

.category-children a small:hover {
    color: #b4b4b4 !important;
}

.page-categories .teaser.hidden-xs {
    position: absolute;
    right: 0;
} 

div.shadow-box3, .topic .topic-header, .topic-list-header, 
#search-button {
    background: transparent !important;
}

.topic-list-header, .input-group-addon,
.chat-modal [component="chat/composer"] [component="chat/input"], 
.chats-full [component="chat/composer"] [component="chat/input"] {
    border: none !important;
}

hr,
.topic .topic-info,
.topic .posts>[component=post], 
.topic .timeline-event {
    border-color: #858585 !important;
}

.topic .posts>[component=post] .avatar, .topic .timeline-event .avatar,
.form-control:focus {
    box-shadow: none;
}

.topic .posts>[component=post]:first-child {
    padding-top: 12px;
}

.topic .posts>[component=post]:last-child {
    padding-bottom: 15px;
}

.posts-list .posts-list-item .topic-category a, 
.posts-list .posts-list-item .post-info .post-author span.timeago, 
.stats small, .breadcrumb .fa, .tag-item, 
.account .profile .account-stats .stat-label, 
.account .profile .profile-meta span {
    color: #cdcdcd;
    opacity: 1 !important;
}

small.pull-left a {color: #b9b9b9 !important;}

.avatar.avatar-xs,
.page-categories .hidden-sm.hidden-xs.stats,
.topic .pagination-block,
.categories-title,
.subcategory>p,
.categories>li .content .icon, 
.category>ul>li .content .icon,
li.deleted {
    display: none;
}

#vivaldifooter a {
    background: transparent;
    color: #f6f6f6 !important;
}

#vivaldifooter p {color: #9ea0a0;}

/*  Divers */

.answered {
    border: 1px solid #f18a97;
    border-radius: 4px;
    color: #f18a97;
}

.topic [component="topic/labels"] .answered {
    color: #f18a97;
    border-radius: 4px;
}

.posts [component=post][data-index="-1"].isSolved {
    background-color: rgba(137,78,86,0.2);
    border: none !important;
    border-right: none !important;
    border-left: 5px solid #894e56 !important;
    border-radius: 4px;
}

.unanswered {
    border: 1px solid #9c515c;
    border-radius: 4px;
    color: #9c515c;
}

.topic [component="topic/labels"] .unanswered {
    color: #9c515c;
    border-radius: 4px;
}

span.votes .upvoted .fa-chevron-up::before {
    color: #01ab31 !important;
}

.topic .votes [component="post/vote-count"] {
    background-color: none;
    color: #75f0ff !important;
}

blockquote {
    background-color: rgba(0,56,77,0.3);
    color: #f6f6f6;
    border-radius: 4px;
}

blockquote, .topic [component="post/replies"] {
    border-left: 5px solid #ff7375 !important;
}

.notifications-list li:nth-child(odd), 
.notifications-list li.unread:nth-child(odd) {
    background-color: rgba(26,39,49,0.8) !important;
    border-radius: 4px;
}

.notifications-list li:nth-child(even), 
.notifications-list li.unread:nth-child(even) {
    background-color: rgba(51,63,72,0.8) !important;
    border-radius: 4px;
}

code {
    background-color: transparent !important;
    color: #ffc8cf !important;
    border: 1px solid #bd5172;
    border-radius: 4px;
}

pre code, div.content pre code  {
    background-color: rgba(28,28,28,0.8) !important;
    color: #f5b0c4 !important;
    border-radius: 4px;
    border: 1px solid #009e82;
}

pre {
    border-radius: 4px;
    background-color: rgba(26,26,26,0.8);
}

/* Usercard */

.persona-usercard {
    background-color: #007a00;
    border-radius: 4px;
}

.persona-usercard .usercard-picture {
    color: #b63e62;
    border-radius: 4px;
}

.usercard-info small {
    color: #ffd7e5;
    opacity: 1;
}

.fab.btn-morph.plus>span>span, .btn-morph {
    background-color: #040404;
    border-radius: 4px;
}

.fab.btn-morph.heart>span>span {background-color: #f5b0c4 !important;}

.btn-morph.fab.plus {
    background-color: #f5b0c4;
    border-radius: 4px;
}

/* Alert */

#reconnect-alert.alert.alert-dismissable.alert-warning.clearfix {
    background-color: rgba(4,4,4) !important;
    color: #46cdff !important;
    border-radius: 4px !important;
    border-left: solid #ff368f !important;
    box-shadow: none !important;
}

.alert.alert-danger, .alert.alert-info, .alert-window .alert.alert-info {
    background-color: rgba(4,4,4,0.8) !important;
    color: #46cdff !important;
    border-radius: 4px !important;
    border: none;
}

.alert-window .alert.alert-success {
    background-color: rgba(4,4,4,0.8) !important;
    color: #46cdff !important;
    border-radius: 4px !important;
    border-left: solid #009682 !important;
}

.alert.alert-success::before {
    background-color: #009682 !important;
}
    
.alert.alert-warning {
    background-color: transparent !important;
    border: none !important;
    box-shadow: 0px 0px 5px 0px #15bbd0;
    border-radius: 4px;
    color: #15bbd0;
}

.alert-window .close {
    color: #b63e92;
    opacity: 0.4;
}
.alert-window .close:hover, .alert-window .close:focus {
    color: #b63e92;
    opacity: 0.85;
}

/* Buttons */

a.btn.btn-xs.btn-default.hidden-xs {
    padding: 3px 8px !important;
    color: #ececec !important;
    font-size: .8em;
}

.btn-primary, .btn-primary[disabled], .account .cover .indicator, .account .cover .save, .btn-danger, .btn-success, a.list-group-item {
    border: 1px solid #b86c7e  !important;
    background-color: #b63e62;
    color: #fbfbfb !important;
    border-radius: 4px;
}

.btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open>.dropdown-toggle.btn-primary, .account .cover .indicator:hover, .account .cover .save:hover, a.list-group-item:focus, a.list-group-item:hover {
    background-color: #b63e62;
    border-radius: 4px;
}

.btn-primary.form-control, .btn-info, .btn-info.active, .btn-info.focus, .btn-info:active, .btn-info:focus, .btn-info:hover, 
.open>.dropdown-toggle.btn-info, .btn-danger:hover, .btn-danger:focus, .btn-success:hover, .btn-success:focus, 
a.btn.btn-xs.btn-default.hidden-xs:hover {
    background-color: #b63e62 !important;
    border: 1px solid #b86c7e !important;
    color: #fbfbfb !important;
    border-radius: 4px;
}

.btn-default.active, .btn-default.focus, .btn-default:active, .btn-default:focus, .open>.dropdown-toggle.btn-default {
    background-color: transparent !important;
    border-color: #00a1a1 !important;
    color: #00a1a1;
    border-radius: 4px;
}

.btn-default:hover,
.btn.btn-default,
.topic .posts .content .toggle,
.btn-primary:active,
.btn-primary:focus {
    background-color: transparent;
    border: 1px solid #ececec !important;
    color: #ececec;
    border-radius: 4px;
}

.btn-group.account-fab .fab, .taskbar .navbar-nav li.taskbar-composer a, .taskbar .navbar-nav li.taskbar-composer a:hover, .taskbar .navbar-nav li.taskbar-composer a:focus {
    background-color: #b63e62;
    border-radius: 4px;
}

/* Composer & Form */

html.composing .composer {
    left: 0%;
    width: 100%;
}

.composer .resizer .trigger i {
    border-radius: 4px;
}

.composer, .form-control, #inputAboutMe, #inputSignature,
.search .post-search-item .bootstrap-tagsinput {
    background-color: rgba(8,13,33,0.4);
    color: #ffd4e4;
    border: none;
    border-top: none !important;
    border-radius: 4px;
}

.composer .write {
    color: #ffd4e4;
    background-color: #000f1a;
    border-color: #67485a;
    border-radius: 4px;
}

.composer .write:focus {
    border: 1px solid #ffccd4 !important;
}

.composer .preview {
    background-color: #04121b;
    border-color: #b86c7e;
    color: #f6f6f6;
    border-radius: 4px;
}

.composer .formatting-bar .formatting-group li:focus, .composer .formatting-bar .formatting-group li:hover {
    background-color:  transparent !important;
    color: #458c68;
}

#quick-search-results.quick-search-results, 
#quick-search-container.quick-search-container {
    display: none !important;
}

#advanced-search .panel, #advanced-search .panel-heading, .panel, .well {
    background-color: transparent;
    border-radius: 4px;
}

.fa-ellipsis-v, 
.taskbar .navbar-nav li.taskbar-chat a i, 
.taskbar .navbar-nav li.taskbar-composer a i 
    {color: #ffffff !important;
}

/* Pagination */

.pagination>li>a, .pagination>li>span {
    background-color: transparent;
    border: none !important;
    color: #188a97 !important;
}

.pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
    background-color: #458c68;
    color: #f7f1db !important;
}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    background-color: #116418 !important;
    color: #c5f7f7 !important;
}

.pagination>.disabled>a, .pagination>.disabled>span {
    background-color: transparent;
    color: #46b542 !important;
}

.nav>li>a:focus, .nav>li>a:hover {
    background-color: #01213b;
    border-radius: 4px;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    background-color: #009e82;
    color: #ececec !important;
    border-radius: 4px;
}


/* Chat */

.taskbar .navbar-nav li.taskbar-chat a, .taskbar .navbar-nav li.taskbar-chat a {
    border-radius: 4px;
}

{"themeName":"Leaves","colorBg":"#000000","colorFg":"#cdcdcd","colorHi":"#9c515c","colorAc":"#b63e62","colorLi":"#b9b9b9","colorCo":"#ffccd4","colorDd":"#040404"}

~~I'm afraid you might experience some inconsistencies as I've also slightly moded custom.css in extension folder (where I put a lot of border-radius: 4p; for example).~~ Edit: All necessary code is in userCSS above.
Btw, there's also a lot of transparency…

Edit: I forgot, here's the original picture.

luetage

@barbudo2005 When you write code for a specific theme, you can use the theme’s class in the body of the site to target it specifically. This has the advantage that you can leave all your code active when switching themes. Like so:

/* FOR TOKYO NIGHT THEME */

/* THREAD LIST */

/* Outline */

.vfm_Tokyo_Night li.row.clearfix.category-item

{outline: rgba(169,177,214,0.2) solid 2px !important;} /*Foregound color */

/* Outline and Highlight on Hover */

.vfm_Tokyo_Night li.row.clearfix.category-item:hover

{outline: rgba(122,162,247,0.4) solid 3px !important; /* Code color */
filter: brightness(1.2) contrast(1.05) !important;}    


/* Separation of Threads */

.vfm_Tokyo_Night .categories>li, .category>ul>li

{margin-bottom: 30px !important;}


/*Alternate color */

.vfm_Tokyo_Night li.row.clearfix.category-item:nth-child(even)

{background-color: rgba(40,42, 54, 1.0) !important;} /*Accent color*/


.vfm_Tokyo_Night li.row.clearfix.category-item:nth-child(odd)

{background-color: rgba(26,27, 38, 1.0) !important;} /*Background color */




/* POSTS LIST */

/* Outline */

.vfm_Tokyo_Night ul.posts li

{outline: rgba(169,177,214,0.2) solid 2px !important; /*Foregound color */
margin-bottom: 30px !important;  /* Separation */}
	

/* Outline and Highlight on Hover */

.vfm_Tokyo_Night ul.posts li:hover

{outline:  rgba(122,162,247,0.4) solid 3px !important; /* Code color */
filter: brightness(1.2) contrast(1.05) !important;}    


/*Alternate color */

.vfm_Tokyo_Night l.posts li:nth-of-type(even)

{background-color: rgba(40,42, 54, 1.0) !important;} /*Accent color*/

The class name can be looked up when hovering the theme name on the options page.

A Former User

@luetage Hmm… looking at the code a lil bit, could you add --*-rgb vars as well? I mean, you could do crazy stuff like

--color0: #dfddc8; --color0-rgb: 223, 221, 200; --color0-r: 223; --color0-g: 221; --color0-b: 200;--color0-h: 55; --color0-s: 26; --color0-l: 83;

but I think -rgb should be enough.

luetage

@hlehyaric Just as with Vivaldi modding where you shouldn’t edit common.css, in VFM you shouldn’t edit custom.css. The code will be replaced on update and you can’t simply save your version and implement it again, because there will likely be changes to the file. Make your adjustments in User CSS, it’s the code that runs last and will override everything else. It’s meant to serve your use case exactly.

hlehyaric

@luetage Yes, you're right. I know I shouldn't. It's just laziness, to spare me from writing lines in usercss… Btw, I have a back up of the moded file, just in case.

barbudo2005

@luetage What would be nice for those that use the User CSS is the possibility to use :

.vfm_Tokyo_Night li.row.clearfix.category-item:hover

{outline: var(--colorCo) solid 3px !important; /* Code color */
filter: brightness(1.2) contrast(1.05) !important;}

Is it possible?

luetage

@potmeklecbohdan I looked at this some time ago and thought about doing the whole thing in hsla when I redid the color calculations. But I noticed I didn’t really need transparency, other than for text where opacity can be set separately.

luetage

@barbudo2005 Yes, if you don’t have vfm-standard active you can use the color variables. They are visible in the elements/styles tab in developer tools. There you will find the calculated colors too, it’s 20 variables overall.

Screenshot from 2021-05-26 20-03-36.png

Hadden89

As VFM was revamped, it would be nice to have a separate thread for usercss mods. They are easy to lose here mixed with the extension itself feedback ^^

A Former User

@luetage I meant them just for the user CSS – see, @barbudo2005 and @hlehyaric are both using transparency, & for semi-transparent elements opacity doesn’t really work.

luetage

@hadden89 This would get confusing in a separate topic too, because at some point it will be filled with outdated mods and support questions. It’s the same situation as with Vivaldi Modding, separate topics would have to be created for each modification. We could collect both themes and modifications as links from the original post. Don’t know.