(Address Bar + Title Bar + Status Bar) = Docked to side

ChimeraLove

@Pathduck said in Address Bar + Title Bar + Status Bar - Docked to side:

Code looks better, some suggestions though:

Update your first post with the new code instead
Maybe add a version number so users can tell what version they have
Using a lot of z-index is probably not a good idea, can lead to problems down the line, so avoid unless you absolutely have to
Since this is mostly a mod of positioning consider dropping all styling of colours, borders, filters etc, should be unnecessary

Hi, Just updated the code in the first post, it's more refined now with 3 Designs.

I added in the bottom a section labeled /* Color Changes to Theme */ so if people want they can edit or delete it.

Honestly, I could never understood the behavior of the theme's Accent, Contrast and Background and I can't make it work for me without CSS...

I also add this for myself but removed it from the code here in case someone wants to use a background image.
It will make the background color in the color of the chosen background color...

#browser {background-color: var(--colorBg) !important;}

There are few things visible when the screen is maximized to full screen (F11), do you have a suggestion how to solve it?
like "If screen is maximized then" I could do display:none for them.

Pathduck

@ChimeraLove Hi - it still looks kind of strange when testing in a clean profile. I suggest you always test your mod in a clean profile with a default theme to make sure it works and looks good in the most common user scenario. No-one has your exact theme or setup.

Also make sure to note down what changes need to be set in the browser for the mod to work, like mentioned before.

Honestly, I could never understood the behavior of the theme's Accent, Contrast and Background and I can't make it work for me without CSS...

You can examine the colours in the elements inspector, by selecting for instance the id="browser", and all the colour variables should show up in the Styles section. This lets you understand how the different colours change with the theme.

There are few things visible when the screen is maximized to full screen (F11), do you have a suggestion how to solve it?

I don't really know, but it's a good idea to add code to handle the different "states" the window can be in - fullscreen, maximized etc - as well as the different states of UI elements like panels/tab location.

If you examine the class of the browser id you will see a bunch of classes that can be used for different states. For instance fullscreen, maximized, tabs-left, tabs-top etc. This way you could make sure your mod is only active if tabs are set left, and that you properly handle fullscreen versus maximized and so on. But it's a lot of code to handle all possibilities

dude99

@ChimeraLove After studying your CSS mod a bit, I think there are some improvement can be done. Here is my 2 cents.

Maybe you can envelop your code with @media to exclude 'em from small width window, because this mod do take up about 300px of vertical space & it won't work very well during small width window:

@media only screen and (min-width: 820px) {
YOUR CODE
}

You can try using :root {} to add global valued for min/max width when toolbars are in shrink/expand state. That way other user can customize all of 'em at once to any width they desired with ease.

:root {
	--minwidth: 300px;
	--maxwidth: 800px;
}

.toolbar > .button-textonly:hover {
	width: var(--maxwidth);
}

You can also made toolbar expand when it's in focus/hover:

.toolbar > .button-textonly:is(:hover, :focus-within) {width: ...}

You can support visible statubar with:

#browser:has(footer > .toolbar-statusbar) #tabs-tabbar-container {margin-bottom: 25px;}

As for 2 level stacked tabs support, you can study this half-baked automate vertical tabbar mod I made for fun in the past, the weakness of this code is it doesn't perform very well with a few hundreds of tabs opened:

/* Automate Floating Big Vertical Tabbar */
:root {
	--tabbarwidth: 400px; /* full tabbar width */
	--tabbarwidth2: 600px; /* 2 columnns full tabbar width */
	--tabbarmargin: calc(-1 * var(--tabbarwidth) + 30px);
	--tabbarmargin2: calc(-1 * var(--tabbarwidth2) + 60px);
}

/* full width tabbar on hover */
#tabs-tabbar-container:is(.left, .right) {width: var(--tabbarwidth)!important; max-width: calc(100vw - 70px); transition: margin-left 0s .15s, width 0s .15s !important;}

/* shrink tabbar into favicon on mouseout */
#tabs-tabbar-container:is(.left, .right):not(:hover):not(:focus-within) {width: 30px !important; transition: width 0s .4s, margin-left 0s .4s !important;}

/* optional: always shrink tabbar into favicon when window is off-focus */
:has(.isblurred, :not(.hasfocus)) #tabs-tabbar-container:is(.left, .right):not(:hover):not(:focus-within) {width: 30px !important; transition: width 0s 0s, margin-left 0s 0s !important;}

/* emulating floating left tabbar */
.inner > div:has(#tabs-tabbar-container.left) {width: 30px !important; z-index:1;}

/* emulating floating rigth tabbar */
.hasfocus #tabs-tabbar-container.right:is(:hover, :focus-within), #browser.hasfocus:not(:hover) #tabs-tabbar-container.right:not(:hover) {margin-left: var(--tabbarmargin);}

/* overlay scrollbar when tabbar minimized */
#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) > div.overflow .tab-strip {animation: ofh .4s .4s forwards !important;}
@keyframes ofh {to {overflow-y: hidden;}}
#tabs-tabbar-container:is(.left, .right) .tab.tab-mini:is(.tab-small, .pinned) .tab-header {justify-content: unset; padding-left: 6px; border:0;}


/* 2 Level/Column Tab Stacking */
/* add extra width during 2 columns */
#tabs-tabbar-container:is(.left, .right):has(#tabs-subcontainer) {width: var(--tabbarwidth2) !important;}

/* shrink tabbar into 2 columns on mouseout */
#tabs-tabbar-container:is(.left, .right):has(#tabs-subcontainer):not(:hover):not(:focus-within) {width: 60px !important; transition: width 0s .4s, margin-left 0s .4s !important;}

/* optional: shrink tabbar into 2 columns favicon when window is off-focus */
:has(.isblurred, :not(.hasfocus)) #tabs-tabbar-container:is(.left, .right):has(#tabs-subcontainer):not(:hover):not(:focus-within) {width: 60px !important; transition: width 0s 0s, margin-left 0s 0s !important;}

/* emulating floating left tabbar with 2 columns */
.inner > div:has(#tabs-tabbar-container.left > #tabs-subcontainer) {width: 60px !important; z-index:1;}

/* emulating floating rigth tabbar with 2 columns */
.hasfocus #tabs-tabbar-container.right:has(#tabs-subcontainer):is(:hover, :focus-within), #browser.hasfocus:not(:hover) #tabs-tabbar-container.right:not(:hover) {margin-left: var(--tabbarmargin2);}

/* shrink 2 columns into favicon when minimized */
#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover):not(:active) #tabs-subcontainer {max-width: 50% !important; transition: max-width .4s .4s !important;}


/* optional: remove small/mini tab effect to improve onhover performance */
#tabs-tabbar-container:is(.left, .right) .tab-header > :is(.stack-counter, span.title) {display: flex !important;}

/* optional: improve onhover performance */
#tabs-tabbar-container:is(.left, .right):not(:hover):not(:focus-within) { will-change: width;}

Hopefully this is helpful for you, you can study my other CSS code from the link in my sig. Keep up the good work!

ChimeraLove

@dude99 said in Address Bar + Title Bar + Status Bar - Docked to side:

@ChimeraLove After studying your CSS mod a bit, I think there are some improvement can be done. Here is my 2 cents.

Thanks for looking into it and great suggestions!
I will incorporate them.

.

@Pathduck said in Address Bar + Title Bar + Status Bar - Docked to side:

Hi - it still looks kind of strange when testing in a clean profile.

Can you take a screenshot?
I'm afraid that if you are using windows with DPI scaling of 150% I don't know how to adjust for it.

.

@Pathduck said in Address Bar + Title Bar + Status Bar - Docked to side:

This lets you understand how the different colours change with the theme.

Not to change the subject too much, I love Vivaldi and converted more than 10 people to use it and laughed as each one of them struggled with the theme's color mumbling "Why the Accent effect the tabs and the title and other stuff and why is it not the color I chose and text color is changing and what is the interaction between these and background and contrast and foreground color etc..."
I do appreciate that there was much thought and work behind the design of it but I consider it as problematic if something that was designed to make things simpler now require learning and it's not intuitive for some people...
Luckily it's so easy to change with CSS.

As for the code here, I couldn't make it work naturally with the theme without including a few changes to the color in the Color Changes to Theme, but I'm sure it can be done.

Pathduck

@ChimeraLove said in Address Bar + Title Bar + Status Bar - Docked to side:

Can you take a screenshot?
I'm afraid that if you are using windows with DPI scaling of 150% I don't know how to adjust for it.

I'll do you one better, a video

This is basically launching a clean profile with only this CSS mod applied, using a cmd argument to override system DPI scaling to 1.0:
https://ttm.sh/0nr.mp4

As you can see, if a user experiences this, they would just assume "this mod don't work" and remove it.

However, I know that tabs need to be set to left, panels need to be set to float, and the title bar won't show before toggling the status bar (weird case) - so I can fix it so it at least looks workable. Another user might not understand this at all and just think it's "broken".

ChimeraLove

@dude99 said in Address Bar + Title Bar + Status Bar - Docked to side:

You can support visible statubar with:

@Pathduck said in Address Bar + Title Bar + Status Bar - Docked to side:

and the title bar won't show before toggling the status bar (weird case)

@dude99 I just realized the status bar seem to be already supported with the last version, do you think the code is necessary?
@Pathduck The bug of the status bar and title bar now seem to be solved with the last version. Still a problem?

@Pathduck said in Address Bar + Title Bar + Status Bar - Docked to side:

I'll do you one better, a video

Actually it looks good to me after you changed the settings.
(I added in my first post in the end the Instructions of what to do in settings)
But you are right, I need to include my theme file as well. I'll upload it.

Edit: @Pathduck I added a link to the theme in the first post in the Instructions. Can you check how it works for you?

Pathduck

@ChimeraLove Looks much better now - and DPI Scaling has no effect on how it looks

Still get those "fugly" corners on the tabs unless Accent on Window is turned off:

Can be somewhat remedied by doing:

#tabs-container {margin-left: unset;}
#tabs-tabbar-container {border-radius: 15px; width: 279px !important;}

But the width of the tabs container will have to be set exactly the width of the tab bar which is tricky and I really don't know how to do this properly. You'll figure it out I'm sure

However, I recommend you don't hardcode value for corner rounding, and use: border-radius: var(--radius);
This way the theme corner rounding setting will be respected.

Like I said before you should not override the theme's border colours. For some reason the colorBorder value is not actually used for UI borders but this one:
var(--colorAccentBg);
Using this will make borders follow the theme colours (I guess might depend on settings...) This shows for instance when opening panels in different themes:

Strike that, apparently the colorAccentBg is set in your mod

https://themes.vivaldi.net/themes/NOb716R5l1g

I don't think your theme is approved yet
But you can share the zip instead somewhere.

ChimeraLove

@Pathduck said in Address Bar + Title Bar + Status Bar - Docked to side:

Accent on Window is turned off:

Yes, this one is mentioned in the instructions.

@Pathduck said in Address Bar + Title Bar + Status Bar - Docked to side:

However, I recommend you don't hardcode value for corner rounding, and use: border-radius: var(--radius);
This way the theme corner rounding setting will be respected.

Good Idea I'll do it.

ChimeraLove

@Pathduck I updated the code as you suggested with 2 exceptions:

In the first design - Full Borders, I feel the address bar always looks nicer with 0 radius and fill the sides of the box.
This can be changed in this line:

.toolbar > .button-textonly {border-radius: 0px;}

alt text

.

In the second design - Minimal Borders, I wanted to differentiate the cute corner where the tabs and panels meet, I think it gives small but nice visual information, and can be changed in this line:

/* Change --PanelTabsCornerRadius to control the radius of their shared corner */
--PanelTabsCornerRadius: 15px;

alt text

ChimeraLove

@Pathduck said in Address Bar + Title Bar + Status Bar - Docked to side:

Still get those "fugly" corners on the tabs unless Accent on Window is turned off:

This should be fixed now even if Accent on Window is On.

dude99

@ChimeraLove said in Address Bar + Title Bar + Status Bar - Docked to side:

I just realized the status bar seem to be already supported with the last version, do you think the code is necessary?

Great! Lesser code is always better for any mod.

Abhimanyu

Hi @ChimeraLove thanks a lot for this mod. I was looking for something like this to achieve 100% vertical screen estate usage. Please help me with my doubts

how to apply this mod, i.e. where to put this code. I read sticky post on the mod homepage, but I am not clear. I just want to know that do i have to paste this code in a file and put that in a folder set for vivaldi custom ui in settings. And what should be the extension for this file? (.css?)
can i customize it by setting tab bar on the upper side and the rest of the toolset at the bottom?
can i keep both address bar and search field?
I am currently using a mod for making title disappear and turning window minimize buttons transparent. I believe after using your mod i wont be requiring the existing one?

Abhimanyu

This post is deleted!

ChimeraLove

@Abhimanyu said in Address Bar + Title Bar + Status Bar - Docked to side:

Hi @ChimeraLove thanks a lot for this mod. I was looking for something like this to achieve 100% vertical screen estate usage. Please help me with my doubts

how to apply this mod, i.e. where to put this code. I read sticky post on the mod homepage, but I am not clear. I just want to know that do i have to paste this code in a file and put that in a folder set for vivaldi custom ui in settings. And what should be the extension for this file? (.css?)

can i customize it by setting tab bar on the upper side and the rest of the toolset at the bottom?

can i keep both address bar and search field?

Hi, happy you like it!
I believe tomorrow I will be able to answer with detail and create a version for you
Can you create a mockup image to illustrate what do you mean? To show your vision visually.

Abhimanyu

@ChimeraLove Thanks for your efforts. I tried to do this mod but got this error on starting vivaldi from the terminal. (tool docked to left side vertically.css is the file name and vivaldi_custom_ui_css is the directory set for the css mod)

[94793:94812:0218/222918.155631:ERROR:vivaldi_data_url_utils.cc(172)] File not found - /home/abhi/Downloads/vivaldi_custom_ui_css/tool%20docked%20to%20left%20side%20vertically.css

while following is the image which i am looking forward for the vivaldi ui

ChimeraLove

Hi @Abhimanyu

how to apply this mod, i.e. where to put this code. I read sticky post on the mod homepage, but I am not clear. I just want to know that do i have to paste this code in a file and put that in a folder set for vivaldi custom ui in settings. And what should be the extension for this file? (.css?)

Yes paste the code in a .css text file and put it in a folder.
Then in Vivaldi's settings, go to Appearance -> Cutom ui modifications and choose the folder.

I am currently using a mod for making title disappear and turning window minimize buttons transparent. I believe after using your mod i wont be requiring the existing one?

I don't know which is the code you mean here and how they would work together...

I tried to do this mod but got this error on starting vivaldi from the terminal. (tool docked to left side vertically.css is the file name and vivaldi_custom_ui_css is the directory set for the css mod)

I don't know what this error means but I believe "tool docked to left side vertically.css" should be without spaces.

OK, I have made this version you can try.

alt text

Instructions:

All the instruction I wrote in my first post still apply except these:

• Set the Panel Hidden or on the opposite side.

• If you want the look like In the GIF above,
these are the changes to the Themes Settings:
Vivaldi default theme
Editor -> Color -> OFF - "Accent from page"
Editor -> Settings -> OFF - "Transparent Tab Bar"
Editor -> Settings -> OFF - "Transparent Background Tabs"
Match "Accent Color" to Background Color"

• Also, you'll need to adjust the width of the vertical tab bar manually using the mouse by grabbing the vertical border that's between the vertical tab bar and the window.

• This is how to arrange "Customize Toolbar":

alt text

/*Date: 2023_02_21*/


/*Title bar and address bar on left*/


:root {
	--hoverwidth: 800px;
	--width_elements: 300px;
}

#pagetitle {
	cursor: move;
	z-index: 1;
}

#header {
	position: absolute;
	width: var(--width_elements);
	height: 30px;
	z-index: 1;
}

.mainbar {
	position: absolute;
	/* top: 35px; */
	bottom: 22px;
	z-index: 10;
	width: var(--width_elements);
	height: 98px;
}

.toolbar > .button-textonly {
	position: absolute;
	top: 35px;
	z-index: 5;
	margin-left: 0px;
}


.toolbar > .button-textonly:is(:hover, :focus-within) {
	width: var(--hoverwidth);
}


.toolbar-extensions {
	position: absolute !important;
	top: 87px;
	width: var(--width_elements);
	margin-top: 1px;
}

.toolbar-large .SearchField {
    top: 65px !important;
}

.OmniDropdown {
	top: calc(100% + 0px);
}

.address-top .mainbar > .toolbar-mainbar .toolbar-extensions:before, .address-top .mainbar > .toolbar-mainbar:before {
	height: 0px;
}


/*General Design*/

#tabs-tabbar-container {
	top: 25px;
	height: calc(100% - 150px) !important;
}

#tabs-container {
	min-width: var(--width_elements);
	max-width: var(--width_elements);
}


.tabs-left .tab-position .tab, .tabs-right .tab-position .tab {
	margin: 0px !important;
}


.button-popup {
	z-index: 10;
}


/* Color Changes to Theme */


#header {
	background: none !important;
}

.toolbar-mainbar {
	background: none !important;
}

.toolbar-extensions {
	background: none !important;
}

#browser.transparent-tabbar #tabs-tabbar-container.left, #browser.transparent-tabbar #tabs-tabbar-container.right {
    background: none !important;
}

.toolbar > .button-textonly {
	/* Option1 address field color lighter than background */
	border: 2px solid var(--colorBgLighter);
	background-color: var(--colorBgLighter);
	width: var(--width_elements);
	
	/* Option2 address field color darker than background */
	/* border: 2px solid var(--colorBgIntenser);
	background-color: var(--colorBgIntenser); */
}

.toolbar > .button-textonly:hover {
	/* Option1 address field mouse hover border color from theme accent */
	border: 2px solid var(--colorAccentBg);
	
	/* Option2 address field mouse 
	border color from theme highlight */
	/* border: 2px solid var(--colorHighlightBg); */
}

Abhimanyu

Thanks @ChimeraLove, really appreciate the time you took out for me. very happy with this mod. A couple of queries:

can the length of search bar which appear on cursor hover be altered. which part of the code alters it so that i can change it accordingly.
i am trying this mod on a laptop whose screen resolution is 1366*768, do i need to change any of the values of the code to accomodate this resolution. I am assuming this code has been written for full hd resolution monitor or the code is universal?
I want to fine tune this horizontal boundary line which appears to be shifted from its actual place, which part of the code determines its position.

the panel has been shifted down, can it be fixed?

ChimeraLove

@Abhimanyu said in Address Bar + Title Bar + Status Bar - Docked to side:

Thanks @ChimeraLove, really appreciate the time you took out for me.

Enjoy!

.

I have updated the code above to arrange a few things. Please replace the code with version Date: 2023_02_21
.

can the length of search bar which appear on cursor hover be altered. which part of the code alters it so that i can change it accordingly.

To change hover length change this number:

--hoverwidth: 800px;

I want to fine tune this horizontal boundary line which appears to be shifted from its actual place, which part of the code determines its position.

This should be fixed now. Is it?

i am trying this mod on a laptop whose screen resolution is 1366*768, do i need to change any of the values of the code to accomodate this resolution. I am assuming this code has been written for full hd resolution monitor or the code is universal?

Here are a few additional things to play with to tailor it for you:

.

--width_elements: 300px;

Change the width of Title Bar, Tabs, Address and Search Bar. You'll need to also change the vertical separation using the mouse.
There is a limit of how much you can make it larger and smaller.

.

#tabs-tabbar-container {
	top: 25px;
	height: calc(100% - 150px) !important;
}

I see in your image that the Tabs are overlaying the Title Bar so to bring them down:
Make top: 25px; bigger.

To change the Tabs bottom part change the 150px in the second line.

.

the panel has been shifted down, can it be fixed?

This should be fixed now.

ChimeraLove

New update to code with Date: 2023_03_04
Fixes a few Full screen problems, for both F11 and videos in full screen.
And another little bug in borders after Vivaldi's update.

.

@Pathduck said in Address Bar + Title Bar + Status Bar - Docked to side:

it's a good idea to add code to handle the different "states" the window can be in - fullscreen, maximized etc

This should be fixed now.

.

Edit:

Now it's fixed in update 2023_03_11

There original fix was using @media (device-width: 100vw) and (device-height: 100vh) which worked on 4 out of 5 Vivaldi installations.
Not it works on all 5 and there is a new section called /* Fix Fullscreen */

RadekPilich

@ChimeraLove Wow, nice work. I found your work while looking for something a bit different - maybe you could advice me or suggest css mod - do you know whether it is possible to mod the bars in a way, so that when a window is resized to a smaller size and the bar items don't fit on the screen anymore.... so that in this situation the items are hidden out of the visible window starting from the left side rather than from the right side? Being right handed, I have all the most important controls on the right rather than on the left, unfortunately when using only a small screen, they become inaccessible, which is what I would like to remedy.

(Address Bar + Title Bar + Status Bar) = Docked to side

Sorry, I'm currently hiatus from updating any of my CSS mod until further notice...

Sorry, I'm currently hiatus from updating any of my CSS mod until further notice...