Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Webkit CSS Scrollbars #140

Open
ghost opened this issue Jan 19, 2023 · 3 comments
Open

Webkit CSS Scrollbars #140

ghost opened this issue Jan 19, 2023 · 3 comments
Assignees
@NsCDE
Labels
enhancement New feature or request Postponed Postponed for the next release

Comments

@ghost
Copy link

ghost commented Jan 19, 2023 •
edited by ghost

This will change whatever scrollbars the browser/website is using to NsCDE's.

Chromium users can use it using the GPL3 Stylus extension.

Unfortunately this will not aid the Firefox CSS, as Mozilla never implemented it and appears to instead have implemented the far more limited w3c's scrollbar css.

A note: The thumb uses box-shadow as a hack to make it appear to be within the trough as setting the width of the thumb itself is unsupported and it is always the same exact width as the trough.

The colors below are using Broica's by default. You can grab yours by running:

grep "_5" $HOME/.themes/NsCDE/gtk-3.20/cdecolors.css | sed -e "s/@define-color /--/g" -e "s/_5 /_5: /g"

And then replacing the first 5 lines after :root {.

:root {
    --bg_color_5: #c6b2a8;
    --fg_color_5: #000000;
    --ts_color_5: #e7deda;
    --bs_color_5: #6b605b;
    --sel_color_5: #a8978f;

    --bg_gen: var(--bg_color_5);
    --ts_gen: var(--ts_color_5);
    --bs_gen: var(--bs_color_5);
    --sel_gen: var(--sel_color_5);
    --fg_gen: var(--fg_color_5);
}

*::-webkit-scrollbar {
    min-width: 11px !important;
    min-height: 11px !important;
    border-top: 1px solid var(--ts_gen) !important;
    border-left: 1px solid var(--ts_gen) !important;
    border-right: 1px solid var(--bs_gen) !important;
    border-bottom: 1px solid var(--bs_gen) !important;
    background-color: var(--bg_gen) !important;
    color: var(--fg_gen) !important;
}

*::-webkit-scrollbar-thumb:vertical {
    border-right: 1px solid var(--ts_gen) !important;
    border-left: 1px solid var(--bs_gen) !important;
    box-shadow: inset 1px 1px 0 0px var(--ts_gen), inset -1px -1px 0 0px var(--bs_gen);
    background-color: var(--bg_gen) !important;
    color: var(--fg_gen) !important;
    border-radius: 0px !important;
}
*::-webkit-scrollbar-thumb:horizontal {
    border-bottom: 1px solid var(--ts_gen) !important;
    border-top: 1px solid var(--bs_gen) !important;
    box-shadow: inset 1px 1px 0 0px var(--ts_gen), inset -1px -1px 0 0px var(--bs_gen) !important;
    background-color: var(--bg_gen) !important;
    color: var(--fg_gen) !important;
    border-radius: 0px !important;
}


/*__scrollbartrough */
*::-webkit-scrollbar-track {
    /*width of the inside=width of cde button image*/
    min-width: 11px !important;
    min-height: 11px !important;
    /*inset*/
    border-top: 0px solid var(--bs_gen) !important;
    border-bottom: 0px solid var(--bs_gen) !important;
    border-left: 1px solid var(--bs_gen) !important;
    border-right: 1px solid var(--ts_gen) !important;
    background-color: var(--sel_gen) !important;
    color: var(--fg_gen) !important;
}

*::-webkit-scrollbar-button:single-button:vertical:decrement {
    border-left: 1px solid var(--bs_gen) !important;
    border-top: 1px solid var(--bs_gen) !important;
    border-right: 1px solid var(--ts_gen) !important;
    border-bottom: 0px solid var(--sel_gen) !important;
    margin: 0px 0px 0px 0px !important;
    /*the one line format doesnt work??*/
    min-height: 11px !important;
    min-width: 11px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gQOCBAk+tVm4gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAWElEQVQY043MsQ4AIQgDUNrcRxMXEgb9bG+5G0RFOzXQPLTWioSoqphZPAtXQwDV3c9jAPWrNR2r6vCMOjeqrHTu1JXORJ10ZmrUeVBHvfde5C7l+cvN+gUURxnynJdl1QAAAABJRU5ErkJggg==") !important;
}

*::-webkit-scrollbar-button:single-button:vertical:decrement:active {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gQOCQgr6bOJHQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAWElEQVQY043OwQ3AMAhD0Q9TAwMk2ZqeSxMaHy3ryTLnDErMjLVWrdFauDsiMszsfwwMABEZ7djdP3c6+aVVXU/qTteTutO1U6uunbrTg4tkZggQmXmz5wHMrxybWmK5SQAAAABJRU5ErkJggg==") !important;
}


*::-webkit-scrollbar-button:single-button:vertical:increment {
    border-left: 1px solid var(--bs_gen) !important;
    border-right: 1px solid var(--ts_gen) !important;
    border-top: 0px solid var(--bs_gen) !important;
    border-bottom: 1px solid var(--ts_gen) !important;
    margin: 0px 0px 0px 0px !important;
    /*the one line format doesnt work??*/
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    min-height: 11px !important;
    min-width: 11px !important;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gQOCBMI4yBZwgAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAUUlEQVQY05XPQQrAMAhE0WmO7QXGW5tFUqlKiHWnfB74mJmgOz9iGaraKkliNHUBsOKbThIeX3S/e3zSXzXEBz3sIc76Vy1x0ssPJd66ZBUAJiRtJ5t93t4TAAAAAElFTkSuQmCC") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius: unset !important;
}

*::-webkit-scrollbar-button:single-button:vertical:increment:active {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gQOCQYg4OJ9GwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAU0lEQVQY05XMwQ2AMAzFUNOxs0Cy9eeAWpW0QPDZegdg/Kg0S7Lm7iUxImgVXZIB1/ylRwRjftO7epuf9K5medFndZmzPqs7eehZ3c7ujiTLKsAJP4YnmwOenokAAAAASUVORK5CYII=") !important;
    border-radius: unset !important;
}


*::-webkit-scrollbar-button:single-button:horizontal:decrement {
    border-left: 1px solid var(--bs_gen) !important;
    border-top: 1px solid var(--bs_gen) !important;
    border-right: 0px solid var(--ts_gen) !important;
    border-bottom: 1px solid var(--ts_gen) !important;
    margin: 0px 0px 0px 0px !important;
    /*the one line format doesnt work??*/
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    min-height: 11px !important;
    min-width: 11px !important;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABmJLR0QAhwCHAIdtI8x7AAAACXBIWXMAAAsSAAALEgHS3X78AAAAB3RJTUUH4gQOCBQeWLV6VAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAV0lEQVQY042RMQ7AMAgDj4hHJzygfna6pFGHtOCB6SwZ2yQFiXrvAHgGmdk1xgAIL0BbXoG2JMWcM80NxD4VuEkqG9qKwqowUviV/9fUPp4+mqyy4FPlDTOlJvOfzZurAAAAAElFTkSuQmCC") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius: unset !important;
}

*::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsSAAALEgHS3X78AAAAB3RJTUUH4gQOCQsBGSUTCAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAU0lEQVQY042RQQrAMAjAUumjqw+Y/tqdNlrY0NyU5CAOdzcKVBWA2ZAugMy0WUk7syMdciW9ZGZ54ONJRLQDAYgI3N2qSPahiuRr+ReNzgfXWgDcPWMznm9fpwwAAAAASUVORK5CYII=") !important;
}


*::-webkit-scrollbar-button:single-button:horizontal:increment {
    border-left: 0px solid var(--ts_gen) !important;
    border-top: 1px solid var(--bs_gen) !important;
    border-right: 1px solid var(--ts_gen) !important;
    border-bottom: 1px solid var(--ts_gen) !important;
    margin: 0px 0px 0px 0px !important;
    /*the one line format doesnt work??*/
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    min-height: 11px !important;
    min-width: 11px !important;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAAAB3RJTUUH4gQOCBUl8KWiMQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAUElEQVQY042PSQ7AMAgDh4pX84CGX5MTUpcE4hvSjGUkIgzA3emiACJyA0SEVZI+j07SVcNO0mrjT8oHD2LXKTjGqGck1G1+QTt4CX3hEspMYfUpz640OCcAAAAASUVORK5CYII=") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius: unset !important;
}

*::-webkit-scrollbar-button:single-button:horizontal:increment:active {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAAAB3RJTUUH4gQOCQoGnlq36gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAWklEQVQY043LsRHAIAwEwcNOaIrGVIClvkxfcgIBjAVc9jP7CRAAVWVXavhpW1anGbM6RTg8CftEVeUU4+5ynUIz4wYK8EYo51xqrQD/eEa9AUdowO5eVqj3AYHNMrJDlXghAAAAAElFTkSuQmCC") !important;
}


*::-webkit-scrollbar-corner {
    background: #c6b2a8 !important;
    border-radius: unset !important;
}
@NsCDE
Copy link
Owner

NsCDE commented Feb 9, 2023

Thanks for this CSS code. Currently, I don't have any "integrations" for chrome/chromium based browsers. If I make this in 2.3 I will have to replace or make dynamic at least data:image/png lines. :-)

@NsCDE NsCDE self-assigned this Feb 9, 2023
@NsCDE NsCDE added the enhancement New feature or request label Feb 9, 2023
@NsCDE NsCDE added the Postponed Postponed for the next release label May 24, 2023
@normandy8757675
Copy link

tbh i hate firefox's puny scrollbar because it makes scrolling trickier on touch screen devices. Why reduce the scroll bar width when most websites already taken half of your screen?

@NsCDE
Copy link
Owner

NsCDE commented Sep 9, 2023

Hi @normandy8757675

You can control this with widget.non-native-theme.scrollbar.size.override (for example 20) in about:config or user.js.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@NsCDE NsCDE

Labels
enhancement New feature or request Postponed Postponed for the next release
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@NsCDE @normandy8757675