<commit_before>// You custom settings file to override Foundation defaults
@import "settings";

@import "compass/css3";
@import "foundation/settings";
@import "foundation/functions/all";
@import "foundation/common/globals";
@import "foundation/mixins/clearfix";
@import "modular-scale";
// Control which mixins you have access too
@import "foundation/mixins/css-triangle";
@import "foundation/mixins/font-size";
// Must include next two for semantic grid to work
@import "foundation/mixins/respond-to";
@import "foundation/mixins/semantic-grid";
// Must include the grid for any responsiveness
@import "foundation/components/grid";
// Control which common styles get compiled
@import "foundation/common/typography";
@import "foundation/common/forms";
// Used for displaying higher quality graphics to hi res displays
@import 'hidpi';

@import "components/labels";
@import "globals/variables";

$navbarDark: #1B4474;
$navbarLight: #002856;
$navbarHeight: 40px;
$navbarItemWidth: 50px;

$navbarBorderDark: 1px solid rgba(darken($navbarDark, 10%),0.7);;
$navbarBorderLight: 1px solid rgba(lighten($navbarDark, 5%),0.7);

$dark: rgba(210,210,210, 0.2);
$light: rgba(255,255,255, 0.1);
$border-color: rgba(200,200,200, 0.5);

$mapHeight: 140px;

@mixin gentle-inset-shadow-on-state{
    &:active, &:hover, &:active {
        @include box-shadow(0 0 2px rgba(0,0,0,0.6) inset);
    }
}

html, body { height: 100%; }
body { 
    background: $body-background; 
    width: 100%;
}

h2 { 
    font-size: ms(2);
    font-weight: 300;
    margin-left: 5px;
}

h3 {
    font-weight: 200;
    margin-top: 8px;
}

// Sidebar 
// This relates to how the sidebar operates
$sidebar-animation-time: 0.33s;
$sidebar-width: 75%;
$sidebar-margin: 100% - $sidebar-width;
#main, #sidebar {
    position: relative;
    @include transition($sidebar-animation-time all ease-out);
}

#main { 
    width: 100%;
    height: 100%;
    margin-left: 0;
    float: right;
    z-index: 1;
    body.is-sidebar-active & {
        margin-right: -$sidebar-width;
    }
}

#sidebar { 
    width: $sidebar-width;
    margin-left: -100%;
    float: left; 
    z-index: 3;
    body.is-sidebar-active & {
        margin-left: 0;
    }
}

.overlay {
    width: 100%; 
    height: 100%; 
    position: absolute;
    opacity: 0;
    background-color: $black; 
    z-index: 0; 
    @include transition($sidebar-animation-time all ease-out);
    body.is-sidebar-active & {
        z-index: 2;
        width: $sidebar-margin;
        margin-left: $sidebar-width;
        opacity: 0.5; 
    }
}

ul.sidebar-items {
    list-style: none;
    > a {
        li {

            padding: 10px 5px;
            border-bottom: 2px solid $border-color;
            color: #666;
            font-weight: 400;
            font-size: ms(2);
            background: url($cream_dust);
            @include hidpi {background: url($cream-dust-hidpi);}
            @include gentle-inset-shadow-on-state();
        }

    }
}


// Navbar
// Make the navbar sexy. 
#navbar, #content {
    overflow: hidden;
    position: absolute;
    left: 0; right: 0;
    @include respondTo(smallScreen) {
        width: auto; min-width: 0; margin-left: 0; margin-right: 0;
        border: 0;
    }
}

#navbar {
    margin: 0 auto;
    height: $navbarHeight;
    line-height: $navbarHeight;
    color: $white;
    list-style: none;
    background: $navbarLight; // Basic background for old devices
    @include background(
        // Highlighting radial gradient. 
        // Light top, dark bottom
        radial-gradient(center, ellipse cover, rgba(0,0,0,0), rgba(0,0,0,0.1)),
        linear-gradient(top, $navbarDark, $navbarLight)
    );

    > li {
        // Most of the elements are on the right, so default to floating them right
        float: right;
        // Set width of each button and center align it 
        width: $navbarItemWidth;
        text-align: center;

        // 3d effect by having a dark and light border on each item
        border-left: $navbarBorderDark;

        a { 
            border-left: $navbarBorderLight;
            display: block;
            color: $white;
            // Feedback for hover/clicked
            &:active, &:hover {@include box-shadow(0 0 $navbarItemWidth/2 $black inset);}
            // If the button has been pressed, distinguish between press and hover
            &:active {background: rgba(0,0,0,0.4);}
        }

        // Left hand button should not have the brighter border
        &:first-child a { border-left: 0;}

        &#home { 
            float: left;
            border: 0;
            border-right: $navbarBorderLight;
            a { border-right: $navbarBorderDark; }
        }
        &#title {
            float: left;
            width: auto;
            border: 0;
            h1 {
                color: $white;
                // Set line-height to navbarHeight to give vertical alignment
                line-height: $navbarHeight;
                font-size: ms(0);
                // Left spacing equivalent to font-size. 
                margin: auto 0 auto ms(0);
                // Pull the text up slightly to align with buttons
                margin-top: -2px;
            }
        }
    }
}



#content {
    /* Content is a container for two child divs:
     - #list which typically contains a scrolling list container
     - .content-detail which holds a detail view or a map (#map)
    */

    top: $navbarHeight;
    bottom: 0;
    background: $white;
    border-left: $grayBorder;
    border-right: $grayBorder;

    #list {
        height: 100%;
        padding: 0px 0px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        @include column(4);
        @include pull(8);
        @include respondTo(smallScreen) {
            right: auto;
            padding-bottom: $mapHeight;
        }
        input {
            margin: 6px 0;
            padding-right: 25px;
        }
        span.deleteicon {
            display: block;
            line-height: 9px;
            position: absolute;
            right: 20px;
            top: 15px;
            padding: 4px 4px 2px 4px;
            border-radius: 30px;
            font-size: 9px;
            color: $white;
            background: #ccc;
            cursor: pointer;
        }
    }

    .content-detail {
        @include column(8);
        @include push(4);
        border-top: $grayBorder;
        border-bottom: $grayBorder;
        border-left: $grayBorder;
        @include respondTo(smallScreen) {
            left: auto;
        }
    }
    #map {
        height: 100%;
        @include respondTo(smallScreen) {
            height: $mapHeight;
            width: 100% !important;
            .leaflet-control-zoom {
                display: none;
            }
        }
    }

    

}
.list-map, .detail-map, .generic {
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
}

ul.results-list {
    list-style: none;
    a:first-child > li {
        border-top: 2px solid $border-color;
    }

    li {
        min-height: 46px;
        border-bottom: 2px solid $border-color;
        padding: 10px 5px;
        @include box-shadow(inset 0 0 2px #fff);
        color: rgba(40, 40, 40, 0.8);
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
        @include background(
            linear-gradient(top, $light, $dark),
            url($cream-dust)
        );
        @include hidpi {
            @include background(
                linear-gradient(top, $light, $dark),
                url($cream-dust-hidpi)
            );
        }

        @include gentle-inset-shadow-on-state();

        & * {
            font-family: Helvetica, Verdana, sans-serif;
            font-size: ms(2)/1.5;
        }
        
        p.metadata, p.type {
            font-size: ms(0);
            margin-bottom: 0;
        }
        p.type {
            margin-top: ms(-4);
            text-transform: uppercase;
            font-weight: 600;
            line-height: ms(0);
        }

        h3 {
            font-size: ms(1);
            font-weight: normal;
            padding: 0;
            margin: 0;
            color: #444;
        }
    }
}


// A box to contain free text items inside a root level div
.free-text {
    padding: 5px;
}
<commit_msg>added detail link button<commit_after>// You custom settings file to override Foundation defaults
@import "settings";

@import "compass/css3";
@import "foundation/settings";
@import "foundation/functions/all";
@import "foundation/common/globals";
@import "foundation/mixins/clearfix";
@import "modular-scale";
// Control which mixins you have access too
@import "foundation/mixins/css-triangle";
@import "foundation/mixins/font-size";
// Must include next two for semantic grid to work
@import "foundation/mixins/respond-to";
@import "foundation/mixins/semantic-grid";
// Must include the grid for any responsiveness
@import "foundation/components/grid";
// Control which common styles get compiled
@import "foundation/common/typography";
@import "foundation/common/forms";
// Used for displaying higher quality graphics to hi res displays
@import 'hidpi';

@import "components/labels";
@import "globals/variables";

$navbarDark: #1B4474;
$navbarLight: #002856;
$navbarHeight: 40px;
$navbarItemWidth: 50px;

$navbarBorderDark: 1px solid rgba(darken($navbarDark, 10%),0.7);;
$navbarBorderLight: 1px solid rgba(lighten($navbarDark, 5%),0.7);

$dark: rgba(210,210,210, 0.2);
$light: rgba(255,255,255, 0.1);
$border-color: rgba(200,200,200, 0.5);

$mapHeight: 140px;

@mixin gentle-inset-shadow-on-state{
    &:active, &:hover, &:active {
        @include box-shadow(0 0 2px rgba(0,0,0,0.6) inset);
    }
}

html, body { height: 100%; }
body { 
    background: $body-background; 
    width: 100%;
}

h2 { 
    font-size: ms(2);
    font-weight: 300;
    margin-left: 5px;
}

h3 {
    font-weight: 200;
    margin-top: 8px;
}

// Sidebar 
// This relates to how the sidebar operates
$sidebar-animation-time: 0.33s;
$sidebar-width: 75%;
$sidebar-margin: 100% - $sidebar-width;
#main, #sidebar {
    position: relative;
    @include transition($sidebar-animation-time all ease-out);
}

#main { 
    width: 100%;
    height: 100%;
    margin-left: 0;
    float: right;
    z-index: 1;
    body.is-sidebar-active & {
        margin-right: -$sidebar-width;
    }
}

#sidebar { 
    width: $sidebar-width;
    margin-left: -100%;
    float: left; 
    z-index: 3;
    body.is-sidebar-active & {
        margin-left: 0;
    }
}

.overlay {
    width: 100%; 
    height: 100%; 
    position: absolute;
    opacity: 0;
    background-color: $black; 
    z-index: 0; 
    @include transition($sidebar-animation-time all ease-out);
    body.is-sidebar-active & {
        z-index: 2;
        width: $sidebar-margin;
        margin-left: $sidebar-width;
        opacity: 0.5; 
    }
}

ul.sidebar-items {
    list-style: none;
    > a {
        li {

            padding: 10px 5px;
            border-bottom: 2px solid $border-color;
            color: #666;
            font-weight: 400;
            font-size: ms(2);
            background: url($cream_dust);
            @include hidpi {background: url($cream-dust-hidpi);}
            @include gentle-inset-shadow-on-state();
        }

    }
}


// Navbar
// Make the navbar sexy. 
#navbar, #content {
    overflow: hidden;
    position: absolute;
    left: 0; right: 0;
    @include respondTo(smallScreen) {
        width: auto; min-width: 0; margin-left: 0; margin-right: 0;
        border: 0;
    }
}

#navbar {
    margin: 0 auto;
    height: $navbarHeight;
    line-height: $navbarHeight;
    color: $white;
    list-style: none;
    background: $navbarLight; // Basic background for old devices
    @include background(
        // Highlighting radial gradient. 
        // Light top, dark bottom
        radial-gradient(center, ellipse cover, rgba(0,0,0,0), rgba(0,0,0,0.1)),
        linear-gradient(top, $navbarDark, $navbarLight)
    );

    > li {
        // Most of the elements are on the right, so default to floating them right
        float: right;
        // Set width of each button and center align it 
        width: $navbarItemWidth;
        text-align: center;

        // 3d effect by having a dark and light border on each item
        border-left: $navbarBorderDark;

        a { 
            border-left: $navbarBorderLight;
            display: block;
            color: $white;
            // Feedback for hover/clicked
            &:active, &:hover {@include box-shadow(0 0 $navbarItemWidth/2 $black inset);}
            // If the button has been pressed, distinguish between press and hover
            &:active {background: rgba(0,0,0,0.4);}
        }

        // Left hand button should not have the brighter border
        &:first-child a { border-left: 0;}

        &#home { 
            float: left;
            border: 0;
            border-right: $navbarBorderLight;
            a { border-right: $navbarBorderDark; }
        }
        &#title {
            float: left;
            width: auto;
            border: 0;
            h1 {
                color: $white;
                // Set line-height to navbarHeight to give vertical alignment
                line-height: $navbarHeight;
                font-size: ms(0);
                // Left spacing equivalent to font-size. 
                margin: auto 0 auto ms(0);
                // Pull the text up slightly to align with buttons
                margin-top: -2px;
            }
        }
    }
}



#content {
    /* Content is a container for two child divs:
     - #list which typically contains a scrolling list container
     - .content-detail which holds a detail view or a map (#map)
    */

    top: $navbarHeight;
    bottom: 0;
    background: $white;
    border-left: $grayBorder;
    border-right: $grayBorder;

    #list {
        height: 100%;
        padding: 0px 0px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        @include column(4);
        @include pull(8);
        @include respondTo(smallScreen) {
            right: auto;
            padding-bottom: $mapHeight;
        }
        input {
            margin: 6px 0;
            padding-right: 25px;
        }
        span.deleteicon {
            display: block;
            line-height: 9px;
            position: absolute;
            right: 20px;
            top: 15px;
            padding: 4px 4px 2px 4px;
            border-radius: 30px;
            font-size: 9px;
            color: $white;
            background: #ccc;
            cursor: pointer;
        }
    }

    .content-detail {
        @include column(8);
        @include push(4);
        border-top: $grayBorder;
        border-bottom: $grayBorder;
        border-left: $grayBorder;
        @include respondTo(smallScreen) {
            left: auto;
        }
    }
    #map {
        height: 100%;
        @include respondTo(smallScreen) {
            height: $mapHeight;
            width: 100% !important;
            .leaflet-control-zoom {
                display: none;
            }
        }
    }

    

}
.list-map, .detail-map, .generic {
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
}

ul.results-list {
    list-style: none;
    a:first-child > li {
        border-top: 2px solid $border-color;
    }

    li {
        min-height: 46px;
        border-bottom: 2px solid $border-color;
        padding: 10px 5px;
        @include box-shadow(inset 0 0 2px #fff);
        color: rgba(40, 40, 40, 0.8);
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
        @include background(
            linear-gradient(top, $light, $dark),
            url($cream-dust)
        );
        @include hidpi {
            @include background(
                linear-gradient(top, $light, $dark),
                url($cream-dust-hidpi)
            );
        }

        // Extra button to lead to detail directly or after the main button has been pressed
        a.detail_disclosure {
                content: "▻";
                @include background(linear-gradient(lighten(#1B4474, 20%), #002856));
                color: #fff;
                border: 3px solid #fff;
                box-shadow: 0 0 5px rgba(0,0,0,0.4);
                height: 30px;
                width: 30px;
                padding-left: 5px;
                border-radius: 15px;
                line-height: 27px;
                display: inline-block;
                font-family: "SSStandard";
                vertical-align: middle;
        }

        @include gentle-inset-shadow-on-state();

        & * {
            font-family: Helvetica, Verdana, sans-serif;
            font-size: ms(2)/1.5;
        }
        
        p.metadata, p.type {
            font-size: ms(0);
            margin-bottom: 0;
        }
        p.type {
            margin-top: ms(-4);
            text-transform: uppercase;
            font-weight: 600;
            line-height: ms(0);
        }

        h3 {
            font-size: ms(1);
            font-weight: normal;
            padding: 0;
            margin: 0;
            color: #444;
        }

    }
}


// A box to contain free text items inside a root level div
.free-text {
    padding: 5px;
}

{'fraction_non_alphanumeric': 0.12176886519068042, 'fraction_numerical': 0.03042772690390634, 'mean_word_length': 1.8075170842824602, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '860909', 'n_tokens_mistral': 5842, 'n_tokens_neox': 5213, 'n_words': 1404}