Brackets for Linux Scrollbars

brackets_scrollbars.less

/*
 * Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a
 * copy of this software and associated documentation files (the "Software"),
 * to deal in the Software without restriction, including without limitation
 * the rights to use, copy, modify, merge, publish, distribute, sublicense,
 * and/or sell copies of the Software, and to permit persons to whom the
 * Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
 * DEALINGS IN THE SOFTWARE.
 *
 */

/* Temporary implementation of unobtrusive scrollbars.
   FUTURE: These currently rely on nonstandard WebKit styles, and don't have all the right behavior.
   Longer-term, we'll need to implement custom scrollbars. */

.platform-mac .quiet-scrollbars,
.platform-win .quiet-scrollbars,
.platform-linux .quiet-scrollbars {

    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    ::-webkit-scrollbar-corner {
        background-color: transparent;
    }

    ::-webkit-scrollbar-thumb {
        box-shadow: none;
        border: none;
    }

    /* This looks like a dupe, but without it the thumb doesn't fade in
     * properly, probably due to flakiness in how these styles are handled
     * in the build of WebKit that's in CEF.
     */
    ::-webkit-scrollbar-corner {
        background-color: transparent;
    }

    /* The data URIs for the thumb were generated from the Fireworks files in
     * styles/vertical-thumb-fw-outline.png and styles/horiz-thumb-fw-outline.png.
     */
    :hover::-webkit-scrollbar-thumb,
    :focus::-webkit-scrollbar-thumb {
        border-radius: 999px;
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.34) inset;
        border: 2px solid rgba(0, 0, 0, 0);
    }
    
    :hover::-webkit-scrollbar-thumb:vertical,
    :focus::-webkit-scrollbar-thumb:vertical {
        min-height: 20px;
    }
    :hover::-webkit-scrollbar-thumb:horizontal,
    :focus::-webkit-scrollbar-thumb:horizontal {
        min-width: 20px;
    }
}

.platform-linux {
    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    ::-webkit-scrollbar-track:vertical {
        margin: 0 0 8px 0;
    }

    ::-webkit-scrollbar-track:horizontal {
        margin: 0 8px 0 0;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 999px;
        box-shadow: 0 0 0 4px @custom-scrollbar-thumb inset;
        border: 2px solid rgba(0, 0, 0, 0);
    }

    ::-webkit-scrollbar-corner {
        background: none;
    }

    ::-webkit-scrollbar-thumb:window-inactive {
        box-shadow: 0 0 0 4px @custom-scrollbar-thumb-inactive inset;
    }
}