roundcube-multibox/plugins/xframework/assets/styles/elastic.scss

@import "_colors";
@import "_common";
@import "_icons_common";
@import "_icons_elastic";

// hide the labels added by the elastic's pretty checkbox function to the checkboxes that shouldn't have them
input[type='checkbox'].no-switchbox.icon-checkbox + label {
    display: none;
}

// rc will hide the checkboxes that don't undergo the automatic conversion to switchboxes: fix it
.dark-mode input[type='checkbox'].no-switchbox {
    opacity: 1 !important;
    z-index: auto !important;
}

// fix the line height inconsistencies between the different fonts that could be used
// and adjust the icon size to make sure the buttons don't change size with and without icons
.btn.btn-primary,
.btn.btn-secondary,
.btn.btn-success,
.btn.btn-danger,
.btn.btn-warning,
.btn.btn-info,
.btn.btn-link,
.btn.btn-dark {
    line-height: 1.3rem;

    &:before {
        font-size: 1.1rem;
    }
}

// *********************** RC+ apps menu ***********************

.layout-large,
.layout-normal {
    #button-apps:before {
        margin-top: 5px;
    }
}

.layout-normal.touch {
    #button-apps:before {
        margin-top: 0;
    }
}

#button-apps {
    &.top {
        &:before {
            font-size: 1.8em;
        }

        span {
            display: none;
        }
    }
}

#apps-menu {
    padding: 4px;

    .section-title {
        margin-bottom: 5px;
    }

    .section {
        padding: 5px;
    }

    #look-and-feel-shortcut {
        padding-top: 5px;

        a {
            width: 100%;
            margin: 0 !important;
        }
    }

    #menu-apps-list {
        a.app-item {
            display: flex;
            flex-flow: row nowrap;
            padding: 1px;
            @include text-color;

            .icon {
                order: 1;
                font-size: 1.3rem;
                width: 2rem;
                text-align: center;
            }

            .title {
                order: 2;
                padding-left: .4rem;
                align-self: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            &:hover {
                text-decoration: none;
                @include background-highlight-color(7);
            }
        }
    }
}

// *********************** RC+ sidebar ***********************

#xsidebar,
#xsidebar-mobile-header,
#taskmenu a#show-mobile-xsidebar {
    display: none;
}

#show-xsidebar-item {
    float: right;
}

#layout #xsidebar {
    overflow-y: hidden;
    border-left: 1px solid;
    @include border-color;
    @include background-color;


    #xsidebar-inner {
        overflow-y: auto;
        height: 100%;
    }

    h2.boxtitle {
        border-bottom: 1px solid;
        @include border-color;
    }

    .header {
        justify-content: left !important;
        padding-left: 0 !important;
    }
}

body.xsidebar-visible {
    #layout-content {
        min-width: 0;
    }

    #show-xsidebar {
        display: none;
    }

    #xsidebar-menu {
        text-align: right;
    }

    #xsidebar {
        display: flex;
        flex-direction: column;
        flex-grow: 0;
        max-width: 18%;
    }
}

html.touch {
    #taskmenu a#show-mobile-xsidebar {
        display: block;
    }

    #xsidebar,
    #show-xsidebar {
        display: none !important;
    }

    body.xsidebar-mobile-visible {
        #xmobile-overlay {
            display: block;
        }

        #xsidebar {
            position: absolute;
            top: 0;
            right: 0;
            left: auto;
            bottom: 0;
            width: 50%;
            max-width: 100%;
            display: block !important;
            border-radius: 0;
            border: none !important;
            z-index: 2;

            #xsidebar-mobile-header {
                display: block;
                padding: 0 .5em;
                height: 4.2rem;
                line-height: 4.2rem;
                font-size: 1.2rem;
                background-color: #005984;

                a {
                    color: #fff !important;
                }
            }

            .header {
                display: none;
            }

            #xsidebar-inner {
                padding-bottom: 100px; // otherwise can't scroll to the bottom
            }
        }
    }
}

html.dark-mode.touch body.xsidebar-mobile-visible #xsidebar {
    background-color: #161b1d;

    #xsidebar-mobile-header {
        background-color: transparent;
        border-bottom: 1px solid #4d6066;
    }
}

html.layout-small body.xsidebar-mobile-visible #xsidebar {
    width: 60%;
}

html.layout-phone body.xsidebar-mobile-visible #xsidebar {
    width: 100%;
}

// *********************** third-party plugins ***********************

// managesieve
.action-plugin-managesieve,
.action-plugin-managesieve-action,
.action-plugin-managesieve-save {
    .rowbuttons a {
        padding-left: 2px;
        padding-right: 2px;
        background: transparent !important;
        color: #333 !important;

        html.dark-mode & {
            color: #ddd !important;
        }
    }
}