<commit_before>@import '../../node_modules/normalize.css/normalize.css'
@import './base/_normalize'
@import './base/_colors'

@import 'cozy-ui'

// Should be imported from another stylus in the future,
// 'base/_fonts' for example
// Variable used as divisor for px to em calculations.
base-font-size = 16

[role=application]
    @extend $app-2panes-toolbar
    background-color: #ffffff

    h1
        font-size: 2em
        margin: 1.5em 2em 1em


aside
    background-color    $grey-01
    box-shadow: inset   -1px 0 0 0 $grey-01-alpha
    // to put back to cozy-ui
    overflow            auto
    overflow-x          hidden

    h4
        font-weight: normal
        font-size: 1.5em
        padding: 1em 1.5em
        margin: 0

[role="navigation"]
    width: 13.75em
    a
        display: block
        text-decoration: none
        color: $red
        flex: 1
        padding: 1em 1.5em
        margin: 0.25em 0

        &:hover:not(.router-link-active)
            background-color: $grey-01-alpha

    .submenu
        margin: .5em 0 0 3em

        a
            padding: 0.5em 1em
            color: $grey-08
            margin: 0

        .router-link-active
            color: white
            background-color: $grey-08
            border-radius: 4px 0 0 4px

    .router-link-active
        background-color: $red
        color: white

        svg
            fill: white

    svg
        width: 1.5em
        height: 1.5em
        margin-right: 0.5em
        display: inline-block
        vertical-align: middle
        fill: $red

.connector-list, .use-cases-list
        display         flex
        flex-wrap       wrap
        margin          0 0 2em 3em

.item-wrapper
        width               19em
        position            relative
        border-radius       4px
        background-color    white
        box-shadow          0 2px 6px 0 rgba(0, 0, 0, 0.15)
        padding-bottom      1em
        margin              .7em
        cursor              pointer
        text-decoration     none
        transition          .2s ease all
        &:hover
            box-shadow          0 4px 12px 0 rgba(0, 0, 0, 0.25)
            transform           scale(1.05)
            transition          .2s ease all
        .item-header
            border-radius       4px 4px 0px 0px
            height              9em
            position            relative
            .item-icon
                border-radius   4px 4px 0px 0px
                width           14em
                height          4em
                margin          2.5em
        .item-title
            padding             0em .5em
            font-size           20px
            margin              .5em
            color               black
        .item-subtitle
            font-size           14px
            padding             0em 1em
            margin              0em .5em
            color               $grey-06
        .item-connected
            position absolute
            width    24px
            height   24px
            bottom   1em
            right    1em


// Global styles for dialog
[role=dialog]
    @extend $dialog

    [role=separator]
        cursor pointer
        background-color rgba(78, 91, 105, 0.75)

    .wrapper
        min-height 100vh
        padding 3em 1em
        box-sizing border-box

    .close-button
        height                  3em
        width                   3em
        cursor                  pointer
        position                absolute
        right                   4em
        top                     3.5em
        &:after, &:before
            position            absolute
            content             ' '
            height              3em
            width               2px
            background-color    white
            margin              0em 1.5em
        &:after
            transform: rotate(-45deg);
        &:before
            transform: rotate(45deg);

    [role=contentinfo]
        overflow            initial
        flex-direction      column
        border              none
        flex-basis          80rem
        box-shadow          0 6px 18px 0 rgba(0, 0, 0, 0.22), 0 1px 3px 0 rgba(0, 0, 0, 0.16)

        .dialog-header
            height                      10em
            overflow                    hidden
            border-top-left-radius      inherit
            border-top-right-radius     inherit

        .dialog-content

            .account-connection
            .account-management
                display flex

                h3
                    margin 2em 0 0.5em

                a:not([role=button])
                    color           $blue
                    text-transform  uppercase
                    text-decoration none
                    cursor          pointer

                p
                    margin 0.5em 0

            .account-connection
                > div
                    width   50%

            .account-management
                width               70%
                margin              auto

            .account-description
                background-color $grey-01
                padding          0 2em 0 15%
                > p
                    margin-top   2em

            .account-login
                padding          0 15% 0 2em

            .account-list
                width 25%
                ul
                    margin 2.4em 1em 0.5em 0
                li
                    padding          0.5em 1em
                    color            $grey-08
                    font-weight      bold
                    text-overflow    ellipsis
                    &.selected<commit_msg>[fix] Added ellipsis overflow to the account list<commit_after>@import '../../node_modules/normalize.css/normalize.css'
@import './base/_normalize'
@import './base/_colors'

@import 'cozy-ui'

// Should be imported from another stylus in the future,
// 'base/_fonts' for example
// Variable used as divisor for px to em calculations.
base-font-size = 16

[role=application]
    @extend $app-2panes-toolbar
    background-color: #ffffff

    h1
        font-size: 2em
        margin: 1.5em 2em 1em


aside
    background-color    $grey-01
    box-shadow: inset   -1px 0 0 0 $grey-01-alpha
    // to put back to cozy-ui
    overflow            auto
    overflow-x          hidden

    h4
        font-weight: normal
        font-size: 1.5em
        padding: 1em 1.5em
        margin: 0

[role="navigation"]
    width: 13.75em
    a
        display: block
        text-decoration: none
        color: $red
        flex: 1
        padding: 1em 1.5em
        margin: 0.25em 0

        &:hover:not(.router-link-active)
            background-color: $grey-01-alpha

    .submenu
        margin: .5em 0 0 3em

        a
            padding: 0.5em 1em
            color: $grey-08
            margin: 0

        .router-link-active
            color: white
            background-color: $grey-08
            border-radius: 4px 0 0 4px

    .router-link-active
        background-color: $red
        color: white

        svg
            fill: white

    svg
        width: 1.5em
        height: 1.5em
        margin-right: 0.5em
        display: inline-block
        vertical-align: middle
        fill: $red

.connector-list, .use-cases-list
        display         flex
        flex-wrap       wrap
        margin          0 0 2em 3em

.item-wrapper
        width               19em
        position            relative
        border-radius       4px
        background-color    white
        box-shadow          0 2px 6px 0 rgba(0, 0, 0, 0.15)
        padding-bottom      1em
        margin              .7em
        cursor              pointer
        text-decoration     none
        transition          .2s ease all
        &:hover
            box-shadow          0 4px 12px 0 rgba(0, 0, 0, 0.25)
            transform           scale(1.05)
            transition          .2s ease all
        .item-header
            border-radius       4px 4px 0px 0px
            height              9em
            position            relative
            .item-icon
                border-radius   4px 4px 0px 0px
                width           14em
                height          4em
                margin          2.5em
        .item-title
            padding             0em .5em
            font-size           20px
            margin              .5em
            color               black
        .item-subtitle
            font-size           14px
            padding             0em 1em
            margin              0em .5em
            color               $grey-06
        .item-connected
            position absolute
            width    24px
            height   24px
            bottom   1em
            right    1em


// Global styles for dialog
[role=dialog]
    @extend $dialog

    [role=separator]
        cursor pointer
        background-color rgba(78, 91, 105, 0.75)

    .wrapper
        min-height 100vh
        padding 3em 1em
        box-sizing border-box

    .close-button
        height                  3em
        width                   3em
        cursor                  pointer
        position                absolute
        right                   4em
        top                     3.5em
        &:after, &:before
            position            absolute
            content             ' '
            height              3em
            width               2px
            background-color    white
            margin              0em 1.5em
        &:after
            transform: rotate(-45deg);
        &:before
            transform: rotate(45deg);

    [role=contentinfo]
        overflow            initial
        flex-direction      column
        border              none
        flex-basis          80rem
        box-shadow          0 6px 18px 0 rgba(0, 0, 0, 0.22), 0 1px 3px 0 rgba(0, 0, 0, 0.16)

        .dialog-header
            height                      10em
            overflow                    hidden
            border-top-left-radius      inherit
            border-top-right-radius     inherit

        .dialog-content

            .account-connection
            .account-management
                display flex

                h3
                    margin 2em 0 0.5em

                a:not([role=button])
                    color           $blue
                    text-transform  uppercase
                    text-decoration none
                    cursor          pointer

                p
                    margin 0.5em 0

            .account-connection
                > div
                    width   50%

            .account-management
                width               70%
                margin              auto

            .account-description
                background-color $grey-01
                padding          0 2em 0 15%
                > p
                    margin-top   2em

            .account-login
                padding          0 15% 0 2em

            .account-list
                width 25%
                ul
                    margin 2.4em 1em 0.5em 0
                li
                    padding          0.5em 1em
                    color            $grey-08
                    font-weight      bold
                    text-overflow    ellipsis
                    white-space      nowrap
                    overflow         hidden
                    &.selected
{'fraction_non_alphanumeric': 0.05725524475524475, 'fraction_numerical': 0.038461538461538464, 'mean_word_length': 0.8621419270833334, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, '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': '1048854', 'n_tokens_mistral': 3256, 'n_tokens_neox': 2783, 'n_words': 828}