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

/**
 * Roundcube Framework plugin.
 *
 * Copyright 2019, Tecorama LLC.
 *
 * @license Commercial. See the LICENSE file for details.
 */

@import "_colors";
@import "_common";
@import "_icons_common";
@import "_icons_larry";

// hide font icons on larry and litecube where image icons are displayed
body.xlarry:not(.xskin) {
    #button-apps:before,
    #sections-table tr > td.section:before,
    #settings-tabs a.x2fa:before,
    #settings-tabs a.xcpanel-settings:before,
    .listing.iconized li>a:before {
        display: none !important;
    }
}

// The fixed copy of the mail header list doesn't resize to be smaller than 560px and because it's fixed, it sticks out
// of the box. Without the vertical preview and the sidebar it rarely happens because nobody has a screen that small,
// but with both those added columns, it's easy for the mail list width to go under 560px.
// We're changing the positioning from fixed to absolute so it gets cropped and doesn't stick out of the box. The
// problem with this solution is that it's not fixed any more and scrolls out of the view along with the messages, but
// this is the only workable solution we found. (see xframework.js)

table.messagelist.fixedcopy {
    position: absolute !important;
}

body.xdesktop .messagelist thead tr:hover .flag span:before {
    color: #fff;
}

.formcontent {
    input.button,
    input[type='checkbox'] {
        width: auto;
    }
}

.listing.iconized {
    li a:before,
    tr td:before {
        margin-right: .5rem;
    }
}

// icons

.mailbox a:before {
    display: inline-block;
    padding-right: 10px;
    font-size: 1.3em;
    position: relative;
    top: 2px;
}

.xdesktop #taskbar a:before {
    top: 3px;
}

// mail list

.widescreen .messagelist td.subject span {
    line-height: normal;
}

// sidebar

.xsidebar-visible {
    #mailview-right {
        width: auto !important;
    }

    #xsidebar,
    #xsidebar-splitter {
        display: block;
    }

    #xsidebar-splitter {
        top: 45px;
        bottom: 0px;
        height: auto;
    }
}

#sidebar-splitter {
    display: none;
}

#xsidebar {
    display: none;
    position: absolute;
    top: 42px;
    bottom: 0;
    right: 0;
    overflow-y: auto;

    h2.boxtitle {
        padding: 4px 8px;
        line-height: 17px;
    }

    .listbox.collapsed:before {
        content: "";
    }
}

#xsidebar-preview-frame-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 9999;
}

.xsidebar-wrap #searchfilter {
    right: 288px;
}

.xsidebar-wrap #quicksearchbar {
    right: 34px;
}

#xsidebar-button {
    display: block;
    width: 16px;
    margin: 0;
    padding: 4px 3px 6px 3px;
    margin-top: 2px;
    text-align: center;

    &:before {
        content: "\25c0"; // this is for larry that doesn't use our icon font
    }
}

.xsidebar-visible #xsidebar-button:before {
    content: "\25b6";
}

body.dragging, body.dragging * {
  cursor: move !important;
}

#xsidebar-order-table {
    td.title label:before {
        font-size: 0.9em !important;
        padding-right: 15px;
    }
}

.xmobile {
    #xsidebar-order-table {
        td.title {
            width: 50%;

            label:before {
                content: "" !important;
                padding: 0;
            }
        }
    }

    #xsidebar-order-note {
        display: none;
    }
}

// settings

#sections-table #rcmrowxsidebar td.section {
    background-image: url(../images/settings-sidebar.png);
    background-position: 2px 0;
}

#sections-table #rcmrowxsidebar.selected td.section {
    background-image: url(../images/settings-sidebar-hot.png);
}

// apps menu

#taskbar a.button-apps span.button-inner {
    background-repeat: no-repeat;
    background-position: 3px 2px;
    background-image: url("../images/apps.png");
}

#taskbar a.button-apps:hover span.button-inner {
    background-position: 3px -25px;
}

#apps-menu {
    left: auto !important;
    right: 4px;
    max-width: 575px; // 12 or more icons
    box-sizing: border-box;

    a.app-item {
        display: flex;
        align-items: center;
        text-decoration: none;
        padding: .5em 1em;

        &:hover {
            background: rgba(0, 0, 0, .2);
        }

        &>div.icon {
            color: #fff;
            margin-right: 1rem;

            &:before {
                font-size: 1.2em;
            }
        }

        &>img {
            width: 10px;
            height: 10px;
            display: inline-block;
        }

        &>div.title {
            color: #fff;
        }
    }

    span {
        display: none;
    }
}

.xskin #apps-menu {
    a.app-item {
        &>div.icon {
            color: #434343;
        }

        &>div.title {
            color: #434343;
        }
}
}

.xmobile #apps-menu {
    left: 0 !important;
    right: auto;
}

// interface button / menu

#interface-options {
    min-width: 120px;
    max-width: 216px;
    color: #eee;
    padding: 12px 10px;
    left: auto !important;
    right: 4px;

    a {
        color: #f9f9f9;

        .tooltip {
            display: none !important;
        }
    }

    .section {
        margin: 10px 0;

        select,
        input.button {
            width: 100%;
            margin: 0;
        }

        div.section-title {
            padding-bottom: 5px;
        }
    }

    select,
    input.button {
        width: 100%;
        margin: 0;
    }
}

#taskbar {
    .button-interface-options {
        background-repeat: no-repeat;
        background-position: 10px 12px;
        background-image: url(../images/larry-interface-options.png);
        margin-right: 5px;
        float: right;
        width: 26px;
        text-align: center;

        .button-inner {
            display: none;
        }
    }
}

.minimal #taskbar {
    .button-logout {
        padding-left: 0;
    }

    .button-interface-options {
        padding: 10px 6px 0 6px;
        background-position: 8px 10px;
    }
}

#message-list-sort {
    display: none;
}

.xmobile {
    #interface-options {
        min-width: 0;
        max-width: 100%;
        color: #333 !important;
        left: 0 !important;
        right: auto;
    }

    .section {
        margin: 10px 0;
        padding: 10px;
    }

    #taskbar {
        .button-interface-options {
            margin-right: 5px;
            float: none;
            width: auto;
            text-align: left;

            .button-inner {
                display: block;
            }
        }
    }
}

// settings help

span.xsetting-help {
    position: relative;
    display: inline-block;
    margin-left: 5px;

    &:before {
        display: inline-block;
        text-align: center;
        color: #999999;
        border: 1px solid #ddd;
        padding: 1px;
        border-radius: 50%;
        background: #fff;
        width: 12px;
        height: 12px;
        content: "?";
        font-weight: bold;
        font-size: 10px !important;
        font-family: sans-serif;
        line-height: 12px;
    }

    span {
        position: absolute;
        top: 20px;
        right: 0;
        display: none;
        padding: 8px;
        border: 1px solid #cccccc;
        background: #ffffcc;
        min-width: 200px;
    }

    &:hover span {
        display: block;
    }
}

.xskin {
    #taskbar .minmodetoggle {
        background: none;
    }
}