Firefox Customs

2 readers

1 users here now

Chat with us!

Post your unsupported Firefox customizations here!

From the makers of r/FirefoxCSS

Links

Related

Firefox

Rules

Posts must have flair!
Posts cannot be memes/shitposts. They should be about Firefox customization with CSS.
Please be civil. Bear in mind that many users come here for help and would be turned off by insults and rudeness.
When posting large amount of code use a service dedicated to hosting text snippets, such as pastebin, hastebin, github gist or equivalent. Relatively short snippets can be wrapped in code-block for inline viewing.
Do NOT use url-shorteners or link to compressed downloads (such as zip or rar) when sharing code.

founded 1 year ago

MODERATORS

[email protected]

[Solved] How to Apply margin to web content but not when a video is in fullscreen? (lemmy.world)

submitted 1 month ago* (last edited 1 month ago) by [email protected] to c/[email protected]

10 comments fedilink hide all child comments

hi, I would like to know how to Apply margin to web content but not when a video is in fullscreen? and keep the margin when Firefox is in fullscreen. I mean I would like to apply a margin to web content that not affect when a video is in fullscreen. I used this code:

:root:not([chromehidden~="toolbar"]) {
        
        /* Web content */
        & #appcontent{
            margin-inline-start: var(--my-vertical-toolbar-width) !important;
        }

        /* Sidebar + sidebar content */
        & #sidebar-box[checked="true"] {
            margin-inline-start: var(--my-vertical-toolbar-width) !important;
        }

        /* Sidebar + sidebar content + web content */
        & #sidebar-box[checked="true"] ~ #appcontent {
            margin-inline-start: 0px !important;
        }
    }

but that applies a margin when a video is in fullscreen, I tried too this code but removes the margin when Firefox is in fullscreen:

:root:not([chromehidden~="toolbar"],[sizemode="fullscreen"]) {
     ...
}

you are viewing a single comment's thread
view the rest of the comments

[–] [email protected] 1 points 1 month ago (1 children)

I'm not sure if we're talking about the same thing, but the first thing I noticed from that video is that it seems as if tabs aren't closing properly. Same kind of deal happens with horizontal tabs if you unconditionally force min-width or max-width for tabs.

That being said, I wouldn't put too much effort into supporting vertical tabs yet because it's constantly changing still.

[–] [email protected] 1 points 1 month ago (1 children)

ooh, I notice a rare behavior when use this in horizontal tabs, so the issue is that min-max width cause problems, I understand.

/* Horizontal tab size */

.tabbrowser-tab[fadein]:not([style^="max-width"]) {
    max-width: 200px !important;
}

in Vertical tabs I noticed that the property of the tab that don't close has fadein property, I tried this code to delete that empty space, but visually works but in the background the tab is still stuck.

/* Important! bug fix for tabs that keep space after close them */
    
    .tabbrowser-tab {
        &:not([pinned], [fadein]) {
            visibility: collapse !important;
        }
    }

[–] [email protected] 1 points 1 month ago (1 children)

In horizontal tabs the tab is really removed only after its closing animation is done - in that case when its width reaches 0px. I have not looked what the closing transition is in vertical tabs - but it stands to reason that it might be its height. If that is the case (which again is just a guess) then you should make sure that you aren't setting min-/max-/height for tabs anywhere that then would prevent the tab from being getting to 0px height.

[–] [email protected] 1 points 1 month ago* (last edited 1 month ago)

Information that heals, thanks for all. 💙