(help) Responsive one liner CSS modification
-
Can this modification be possible in Vivaldi using custom CSS?
https://www.reddit.com/r/FirefoxCSS/comments/bg4oqd/responsive_one_liner/
Thanks
-
@tsugane This should be doable in Vivaldi, and looks like a good idea to experiment with.
-
@tsugane I'm not sure if I can do this only with CSS, but maybe someone can do this
-
I imagine it would go something like this:
.toolbar-mainbar *{ // hide everything that isn't a button } .toolbar-mainbar .addressfield{ // show this } .toolbar-mainbar:hover *{ // show everything when hovering }
Getting the animation right will prove tricky however.
-
Thank you for the replies! How would the code look like if there was no animation? If it were to be static. Sorry, I don't have any experience in CSS so I can't seem to figure it out.
-
@tsugane It could be as simple as (for a proof-of-concept)
.toolbar-mainbar > :not(.addressfield) *{ display: none; } .toolbar-mainbar:hover *{ display: inline-block; }
Though it will need some work to look good.
-
No CSS width/height/size changing animation/transition r possible cuz AFAIK most element inside main bar can't be animated smoothly other than using
transform
. Here is the code to do that:#header:not(:hover) ~ #main .toolbar-addressbar:not(:hover):not(:focus-within) > :not(.addressfield) {max-width:0; visibility:hidden;}
-
You can try this, but I don't say it worksβ¦
.tabs-top.address-top:not(.native) .toolbar-addressbar.toolbar-mainbar:not(:hover) > *:not(.addressfield) { display: none; } .tabs-top.address-top:not(.native) .toolbar-addressbar.toolbar-mainbar .addressfield { margin-top: 4px; margin-bottom: 4px; } .tabs-top.address-top:not(.native) .toolbar-addressbar.toolbar { position: fixed; top: 0; left: 0; width: 50%; } .tabs-top.address-top:not(.native) #header { height: 34px; width: 50%; position: fixed; top: 0; right: 0; border-bottom: 1px solid var(--colorAccentBgDarker); } .tabs-top.address-top:not(.native) #titlebar { right: 0; left: unset; height: 100%; width: 124px; margin-right: 0; } .tabs-top.address-top:not(.native) .window-buttongroup { position: unset !important; width: 90px; display: inline-flex !important; } .tabs-top.address-top:not(.native) .window-buttongroup button { width: 30px; height: 100%; } .tabs-top.address-top:not(.native) .vivaldi { position: unset; } .tabs-top.address-top:not(.native) #header .window-buttongroup .window-close { order: unset; } .tabs-top.address-top:not(.native) #tabs-container { padding-left: 1px !important; height: 33px !important; width: calc(100% - 124px); } .tabs-top.address-top:not(.native) #main { margin-top: 34px; }
-
-