src/styles/brackets_scrollbars.less - master - githubmirror/brackets

src/styles/brackets_scrollbars.less
198 строк6 KB
Prayag Verma
Make src folder files evergreen
27 янв 2016, 13:58
27 янв 2016, 13:580e99e63
/*
 * Copyright (c) 2013 - present 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 fix for issue#10150 for weird project tree scrollbar behaviour on mac. Scrollbar not appearing on hover. Forcing the project tree div to render displays the scrollbar. So setting transparent background color of div on hover.
*/

.platform-mac
{
    .open-files-container:hover,
    #project-files-container:hover {
        background-color: rgba(128, 128, 128, 0);
    }
}

/* 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,
.dark.platform-mac .quiet-scrollbars,
.dark.platform-win .quiet-scrollbars,
.dark.platform-linux .quiet-scrollbars {

    ::-webkit-scrollbar {
        width: 9px;
        height: 9px;
        background-color: transparent;
    }

    ::-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;
    }

    .dragging ::-webkit-scrollbar-thumb,
    :hover::-webkit-scrollbar-thumb,
    :focus::-webkit-scrollbar-thumb {
        border-radius: 999px;
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.6) inset;
        border: 2px solid transparent;
    }

    .dragging ::-webkit-scrollbar-thumb,
    :hover::-webkit-scrollbar-thumb:vertical,
    :focus::-webkit-scrollbar-thumb:vertical {
        min-height: 20px;
    }

    .dragging :-webkit-scrollbar-thumb,
    :hover::-webkit-scrollbar-thumb:horizontal,
    :focus::-webkit-scrollbar-thumb:horizontal {
        min-width: 20px;
    }
}

.platform-linux {
    // Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js
    
    ::-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 @linux-scrollbar-thumb inset;
        border: 2px solid transparent;
    }

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

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

.platform-win {
    // Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js
    
    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
        background-color: @win-scrollbar-track;
    }
    
    ::-webkit-scrollbar-thumb {
        box-shadow: 0 0 0 12px @win-scrollbar-thumb inset;
    }

    .dragging ::-webkit-scrollbar-thumb,
    ::-webkit-scrollbar-thumb:hover,
    ::-webkit-scrollbar-thumb:focus {
        box-shadow: 0 0 0 12px @win-scrollbar-thumb-hover inset;
    }
    ::-webkit-scrollbar-thumb:active {
        box-shadow: 0 0 0 12px @win-scrollbar-thumb-active inset;
    }
    
    ::-webkit-scrollbar-thumb:vertical {
        min-height: 20px;
    }
    ::-webkit-scrollbar-thumb:horizontal {
        min-width: 20px;
    }
    
    ::-webkit-scrollbar-corner {
        background: none;
    }
}


// Dark Scrollbars

.dark {
    /* Custom scrollbar colors */
    &.platform-win {
        .CodeMirror-scrollbar-filler,
        .CodeMirror-gutter-filler {
            background-color: rgb(15, 15, 15);
        }

        // Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js

        ::-webkit-scrollbar {
            background-color: rgb(15, 15, 15);
        }

        ::-webkit-scrollbar-thumb {
            box-shadow: 0 0 0 12px rgb(49, 49, 49) inset;
        }
        ::-webkit-scrollbar-thumb:hover,
        ::-webkit-scrollbar-thumb:focus {
            box-shadow: 0 0 0 12px rgb(89, 89, 89) inset;
        }
        ::-webkit-scrollbar-thumb:active {
            box-shadow: 0 0 0 12px rgb(169, 169, 169) inset;
        }
    }

    &.platform-linux {
        .CodeMirror-scrollbar-filler,
        .CodeMirror-gutter-filler {
            background-color: #1d1f21;
        }

        ::-webkit-scrollbar-thumb {
            box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.24) inset;
        }

        ::-webkit-scrollbar-thumb:window-inactive {
            box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12) inset;
        }
    }
}