Vivaldi Forum mod
-
@dude99 I couldn’t help but notice you are using the
:has
selector here. I’m so confused. I know it works in the UI, but I thought it has zero influence on webpages. To my knowledge, Chrome doesn’t support it on stable right now. -
-
@luetage said in Vivaldi Forum mod:
Chrome doesn’t support it on stable right now.
It's on the experimental stage, so yeah... We need to enabled chrome://flags/#enable-experimental-web-platform-features for it to work. No reason to holding back if it's already supported "unofficially". It's a really powerful function that can't be replace with other syntax in many instances, & the CSS community have being requesting & waiting for it like 'forever' so I'm not gonna wait for it to be finalized to put it to good use. It's just like the
:is()
situation, where it got stuck in experimental stage for years & everyone just want to access it asap back then...I guess I will put up instruction for everyone who want to access the latest toy, until someone tell me it's pointless & not needed anymore. LOL
-
Do you know anything about the selector has-text()?
I mean: the CSS community have being requesting & waiting for?
It can be used in uBO:
-
version 4.2
is live on the webstore now. It contains fixes for the new forum update, including a simplified implementation of the custom notification icons mod. It will only work in the notifications dropdown from now on and the icons replace the mark‐read button toggle. This means each icon needs two states (regular and solid) and Fontawesome provides only a limited amount of solid icons, and even fewer regular icons, for free. The Vivaldi team has installed FA version 5.3) and I was forced to switch some icons around. No biggie in any case, just mentioning it. Thanks @nomadic for testing the fixes! -
@barbudo2005 I heard
:has-tex()
didn't make it into CSS3, so let's wait for another 14 years when they decided to move on to CSS4 then... LOLEveryone recommend using XPath thingy to get the job done, but I don't know much about it though.
-
With the arrival of autumn, @LonM felt nostalgic.
So that he started watching black and white and silent movies. (aka 2018 posts) LOLIf you want to dim them use this code:
h2.title:has([title*="2018"]) > a {color:#adadad !important; filter: opacity(25%) !important;}
-
And if you want that not appears the posts that have this texts in the new comments:
- As this has received 0 votes over 4 years
- Will not do
- This request received 0 votes over 4 years
- Hi, Thanks for your feature request
- This looks like a duplicate of
- Thanks for your request, but as this is an old request with no votes
- I'm going to close this request
Use this code in My filters in uBO:
forum.vivaldi.net##div.post-content:has-text(/\b(As this has received 0 votes over 4 years|Will not do|This request received 0 votes over 4 years|Hi, Thanks for your feature request|This looks like a duplicate of|Thanks for your request, but as this is an old request with no votes|I'm going to close this request)['‘’´]?s?\b/i):upward(li)
-
There's not much I can do about that I'm afraid. I can mark a topic as unread for all, and make it show up. But I can't do the reverse and mark it as read for all to hide it. Good CSS mod.
-
.shadow-box3 .notification { display: none; }
if you’ve seen enough of the global notification
-
There isn’t really much to do after this forum update, but I have a few improvements already stacked from before and the search in header could need some tlc. So another version it is.
-
If you don't want to view the very old requests use this code in My filters in uBO (Updated):
forum.vivaldi.net##.category > ul > li .card .post-content:has-text(/\b(As this has received 0 votes|This is done|Will not do|This request received 0 votes|Thanks for your feature request|I will close this request|Please vote for the existing request|has now been closed|This looks like a duplicate of|Thanks for your request, but as this is an old request with few|but as this is an old request with no votes|I'm going to close this request)['‘’´]?s?\b/i):upward(li)
-
CSS for Stylus or Vivaldi Forum extension
Minimized top Subcategories section if there are topic listed in later section, allow u get to topics onload without scrolling downward:#content .subcategory ul { overflow: hidden; max-height: 300vh; padding: 0 20px; transition: .5s ease-in .25s; } #body #content .category:has(.topic-list > li) > .subcategory:not(:hover):not(:focus-within) ul { max-height: 0; transition: .5s .4s; } #body #content .category:has(.topic-list > li) > .subcategory:not(:hover):not(:focus-within) { background: repeating-linear-gradient(137deg, #fff4 0 1px, transparent 2px 4px); }
NOTE: Pls enable chrome://flags/#enable-experimental-web-platform-features for this code to work properly.
Highlight topic on mouseover:
.categories > li:hover, .category > ul > li:hover { box-shadow: 3px 3px 9px #0004; }
Topic row separator, alter the background color to whatever fit your forum theme
.categories > li:nth-child(even), .category > ul > li:nth-child(even) { background: #9751; }
-
Version 4.3 is live on the webstore, your instances should already have been updated. Not that many changes: The notifications mod has been simplified considerably, pinned topic icons use the highlight color now and I toned down the border of the search input field in the header and changed its font icon.
Should you notice any issues, please do tell.
-
For those who like the card view:
https://forum.vivaldi.net/topic/19728/vivaldi-forum-mod/885
This is the code for card mode for:
1.- IMAGE
img:not(.emoji, .avatar) {box-shadow: rgb(0,0,0) 3px 4px 0px 0px !important; border: 0.4px solid rgba(216,216,216,0.4) !important; border-radius: 10px !important;}
2.- BLOCKQUOTE
blockquote, .content > ul > li {box-shadow: rgb(0,0,0) 3px 4px 0px 0px !important; border: 0.4px solid rgba(216,216,216,0.4) !important; border-radius: 10px !important; margin-right: 10px !important; margin-left: 0px !important; padding-right: 15px !important;}
3.- CODE
pre.markdown-highlight {box-shadow: rgb(0,0,0) 3px 4px 0px 0px !important; border: 0.4px solid rgba(216,216,216,0.4) !important; border-radius: 10px !important; width: 1100px !important; margin-right: 15px !important;} code.hljs.language-css, code.hljs.language-javascript {box-shadow: rgb(0,0,0) 3px 4px 0px 0px !important; border: 0.4px solid rgba(216,216,216,0.4) !important; border-radius: 10px !important; width: 900px !important; margin-right: 0px !important;}
-
I discovered this great supplement today. Thanks a lot for this!
-
If you are not logged in, thread titles in all of the dark themes are illegible
Logged in
Not logged in
-
@sjudenim Damn…
.user-guest .category>ul>li:not(.unread) h2 a { color: var(--colorFg); opacity: 1; }
This is the fix, apparently nodeBB introduced some guest styling for whatever obscure reason. I’m gonna wait awhile for other issues to arise. Don’t think it’s that pressing, everyone is logged in all the time anyway it seems.
-
Two lines of post-comment is too little:
Look this 3 :
I have noticed that with 5 lines you can read complete a great majority of comments, without having to open a new tab.
Look this:
In the first and third posts the comment is complete and in the second you got a clear idea of where the comment was going.
Use this code:
.categories>li .card, .category>ul>li .card {height: 112px !important; font-family: Lato !important; font-size: 16px !important; line-height: 17px !important; text-align: justify !important; width: 400px !important;} li.category-item.clearfix.row, li.posts-list-item.row, li[id*="comment"] {min-height: 150px !important;}
-
This post is deleted!