Firefox Customs

4 readers

10 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]

9 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)

@[email protected] I'm gonna need your help again, sorry. I used your code to gradient border around selected tab and works fine but I see a little flash in certain situations that makes me nuts; this is the code:

.tabbrowser-tab[selected] > .tab-stack::before{
    content: "";
    display: flex;
    min-height: inherit;
    border-radius: var(--tab-border-radius);
    grid-area: 1/1;
    margin-block: var(--tab-block-margin);
  /* Edit gradient colors here */
    background: var(--general-color) !important;
    border-radius: 0px 2px 0px 0px !important;
}

When I click to select the tab, sometimes the tab is first colored with the border color and then it displays correctly, Here is a SS with the problem, there is a way to delay the colored after the tab is completely charged or some trick?

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

At first glance that sounds like for some reason the tab selection is super slow occasionally. The selected attribute on .tabbrowser-tab happens very soon after you click the tab, but the other stuff happens and eventually the .tab-background gets its selected styling. Sounds like that would sometime take several frames during which the background-color is not covered by normal selected-tab styling.

You can try to replace [selected] there with [visuallyselected] which gets added a bit later, but if there's some weird latency going on then that might still be too soon.