search

aminomancer / uc.css.js

A dark indigo CSS theme for Firefox and a large collection of privileged scripts to add new buttons, menus, and behaviors and eliminate nuisances. The theme is similar to other userChrome stylesheets, but it's intended for use with an autoconfig loader like fx-autoconfig, since it uses JavaScript to implement its more functional features.
Other
329 stars 27 forks source link

fix about:reader in system.css after fixing computer #11

Closed aminomancer closed 3 years ago

aminomancer commented 3 years ago

left align content, make width proportional but clamped for portrait orientation. ugh. check if you can use double nested fallback values in custom properties? see --final-content-width

@-moz-document url-prefix("about:reader") {
    body.dark {
        --main-background: var(--in-content-bg-dark) !important;
        --tooltip-background: color-mix(in srgb, black 40%, var(--in-content-bg-dark)) !important;
        --active-color: var(--purple-35) !important;
        --selected-background: var(--attention-color) !important;
        --link-foreground: #5311ff !important;
        --visited-link-foreground: #823afc !important;
        --proportional-width: calc(100% - (122.5em - (var(--content-width, 60em) * 2)));
        --final-content-width: max(var(--content-width, 60em), var(--proportional-width, var(--content-width, 60em)));
    }

    .container {
        margin-inline-start: calc(3% + 65px) !important;
        max-width: var(--final-content-width) !important;
    }

    .toolbar-container {
        top: 50% !important;
        margin-inline-start: -15px !important;
    }

    .toolbar {
        transform: translateY(-50%) !important;
        margin-inline-start: 0 !important;
    }

    input:not([type="file"], [type="image"]):focus-visible,
    select:focus-visible,
    button:focus-visible,
    textarea:focus-visible {
        outline-color: var(--purple-35) !important;
        outline-style: solid !important;
        outline-width: 2px !important;
    }
}
aminomancer commented 3 years ago

Also fix tabbrowser-arrowscrollbox's scroll buttons. They need to fully collapse on [scrolledtostart][scrolledtoend] instead of just [overflowing] since the rounded outside corners cause the scrollbox to receive overflow events when it's not actually overflowing. e.g. the tabs are still flexing but it gets attribute overflowing just because the corners overflow by 5px. That causes the scrollbuttons to be visible when they shouldn't be.

Also, something needs to be done to truly collapse scrollbutton bounds when not drag/dropping, since the closing spacer grows when closing tabs with the mouse, while the scrollbox isn't overflowing. That causes like 16px of empty space next to the final tab, until mouse leaves the navbar.

aminomancer commented 3 years ago

Fix by ddd203e211a00f79a568d4de95667b73e0a0f155