Skip to content

Instantly share code, notes, and snippets.

@MasterGeekMX

MasterGeekMX/scrollbars.css

Last active September 4, 2021 06:23
Show Gist options
  • Save MasterGeekMX/bcd5751cc1af572355bc7f413d8cd56e to your computer and use it in GitHub Desktop.
Save MasterGeekMX/bcd5751cc1af572355bc7f413d8cd56e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. MasterGeekMX revised this gist Sep 4, 2021. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion scrollbars.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    /*
    the colors you see (@main-normal, @main-dark, @gray2, etc)
    are defined in an external file. here I will rpovide those valuse for the sare of completeness
    are defined in an external file. here I will provide those valuse for the sake of completeness
    */

    @define-color gray1 #101010;
  2. MasterGeekMX created this gist Sep 4, 2021.
    106 changes: 106 additions & 0 deletions scrollbars.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,106 @@
    /*
    the colors you see (@main-normal, @main-dark, @gray2, etc)
    are defined in an external file. here I will rpovide those valuse for the sare of completeness
    */

    @define-color gray1 #101010;
    @define-color gray2 #202020;
    @define-color gray3 #404040;

    @define-color main-normal #00FFFF;
    @define-color main-dark #008080;
    @define-color main-darker #004040;

    scrollbar, scrollbar *{
    min-width: 4px;
    border-width: 0px;
    border-radius: 0px;
    }

    scrollbar:disabled, scrollbar:disabled *{
    color: @gray2;
    border-color: @gray2;
    }

    scrollbar.horizontal, scrollbar.horizontal *{
    min-height: 4px;
    }

    scrollbar.vertical, scrollbar.vertical *{
    min-width: 4px;
    }

    /* make the scrollbar wider when we hover above it */

    scrollbar.hovering button{
    min-width: 8px;
    min-height: 8px;
    }

    scrollbar.horizontal.hovering, scrollbar.horizontal.hovering *{
    min-height: 8px;
    }

    scrollbar.vertical.hovering, scrollbar.vertical.hovering *{
    min-width: 8px;
    }

    /* make the scrollbar only show a border on the side facing inside the content */

    scrollbar.top contents{
    border-bottom: 1px solid @main-dark;
    }

    scrollbar.bottom contents{
    border-top: 1px solid @main-dark;
    }

    scrollbar.left contents{
    border-right: 1px solid @main-dark;
    }

    scrollbar.right contents{
    border-left: 1px solid @main-dark;
    }

    /* disable the buttons only when the scrollbar isn't actively used */

    scrollbar{
    -GtkScrollbar-has-backward-stepper: false;
    -GtkScrollbar-has-forward-stepper: false;
    }

    scrollbar.hovering{
    -GtkScrollbar-has-backward-stepper: true;
    -GtkScrollbar-has-forward-stepper: true;
    }

    /* make the buttons show a border only towards the slider */

    scrollbar.top > contents > button:first-child,
    scrollbar.bottom > contents > button:first-child{
    border-right: 1px solid @main-dark;
    }

    scrollbar.right > contents > button:first-child,
    scrollbar.left > contents > button:first-child{
    border-bottom: 1px solid @main-dark;
    }

    scrollbar.top > contents > button:last-child,
    scrollbar.bottom > contents > button:last-child{
    border-left: 1px solid @main-dark;
    }

    scrollbar.right > contents > button:last-child,
    scrollbar.left > contents > button:last-child{
    border-top: 1px solid @main-dark;;
    }

    scrollbar slider{
    background-color: @main-dark;
    }

    scrollbar.dragging slider{
    background-color: @main-normal;
    }