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

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.

nomadic

@RadekPilich This should do that for the address bar and status bar:

/* Hide addressbar and statusbar content overflow from RTL instead of LTR on small windows */
.toolbar-mainbar,
.toolbar-statusbar {
  justify-content: flex-end;
}

RadekPilich

@nomadic Awesome, seems to work without any issues at the first sight. Thanks a lot!

PatStar15

This looks amazing but I'm having trouble getting this to work.

I copied the code for 'no borders'
Pasted in windows notepad
Renamed extension from txt to css
Placed file in a new folder
Under settings, appearance, custom ui modifications, open = folder containing CSS

I have no other files other than the css in the folder. What am I missing?

ChimeraLove

@PatStar15 Hi, Thanks!

Does your file have a name with a space in it like 'no borders.css'? if so try changing it to 'no_borders.css'.

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

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