Vivaldi Forum mod
-
@potmeklecbohdan Is that the bar that runs at top when loading a site?
-
@luetage Correct.
-
@potmeklecbohdan I'll look at it, but it won't be default. I'll put it into the theme machine. But I guess that's your intention anyway.
-
@luetage … … … I still don't get why should it be in the theme machine… If it won't be default why shouldn't it be in the Mods part? Or do you think it should be something like Accent color from website — used only if it matches the colour scheme?
-
@potmeklecbohdan Hmm, I fear we have a misunderstanding here. You are using theme color variables to set the color of the bar. Color variables are only available in custom themes. Therefore I would put these 2 lines into the custom.css file of the themes folder – which makes them available to all themes featured in the theme machine section. If you want the bar in the other themes too, you will have to provide more code, talk to the authors.
-
@luetage Sorry, I forgot about other themes than custom ones… yes, that makes sense.
-
@potmeklecbohdan No problem, it's not a bad idea. I completely ignored the bar at top so far. It's most likely one of, if not the only, non themed part of custom themes.
-
@luetage If you use blue-shaded theme it's easy to ignore. But with my green one (and yellow/brown Vivaldi) it has been annoying me…
-
@potmeklecbohdan I remember why I left it untouched now. All focus borders are standard blue and not themed. and they look really off in some themes when you try to put one of the calculated colors on them. I probably figured since the focus borders will remain blue, the bar at top should be blue too. I'm gonna run your code as user css for a few days and see how I like it with different themes, it's likely gonna be implemented. But the focus borders will have to remain blue I'm afraid.
-
@luetage I've got focus borders red. (I don't know if it's because of the (system) theme I use or something another)
-
@potmeklecbohdan Yeah, it's set by the system, but they can be altered if I remember correctly. But better not mess with it…
-
@potmeklecbohdan I added your code to my custom CSS and it's far better now. Thanks a lot for sharing it.
-
@hlehyaric It's better than the blue one for sure, but I'm unsure if we shouldn't go for var(--colorFG) instead. The highlight color can be a bit heavy on some themes.
-
@luetage Yes, I was talking about the blue line. Anyway, Highlight and Foreground are better than the bue line, at least with my theme (I've just tried Foreground and it will be up to you to choose what sounds better ).
-
@luetage I didn't test other variables than this one. But it's still something that
should beusually is highlighted. -
@potmeklecbohdan Fg is a foreground color, just like hi, link and link2. All are valid since they have enough contrast to the background.
-
Please try this:
/* progress */ #nprogress .spinner-icon { border-top-color: var(--colorHi); border-left-color: var(--colorHi); opacity: 0.66; } #nprogress .bar { background: var(--colorHi); opacity: 0.66; } #nprogress .peg { box-shadow: 0 0 10px var(--colorHi), 0 0 5px var(--colorHi); }
It's a bit toned down – I believe it's a working solution and we would still be using the highlight color on the progress bar with matching spinner.
-
@luetage Nice, that can be.
I forgot there's the spinner because it's invisible… when I was looking for it now I found it behind the profile image. So thanks for changing also its colour.
-
This is my theme. I have simplified things to just remain blue and black
{"themeName":"Night Blue","colorBg":"#212930","colorFg":"#b3b3b3","colorHi":"#1c5ed7","colorBtn":"#1546a3","colorDrop":"#212930","colorLi":"#1080fb","colorLi2":"#3b97fc"}
It is use with User CSS
#submenu { background-color: var(--colorBtn); border-bottom-color: var(--colorBtnHi); } #submenu li>a { color: var(--colorBtnFg); } #submenu a:focus, #submenu a:hover { background-color: var(--colorBtnHi); color: var(--colorBtnFg); } #submenu li.active>a { background-color: var(--colorHi); color: var(--colorHiFg); }
-
@tam710562 Good one. What I recently thought about was introducing an extra class for the used theme in the body, so we can have all the additional user css we want and it is only active when the theme is in use.
So for example
.night-blue #submenu { background-color: var(--colorBtn); border-bottom-color: var(--colorBtnHi); }
would only trigger when Night Blue is in use.