I just wanted to say how much I like the ability to hack the CSS and make my own custom theme the way I wanted. Had to fiddle with it for a few hours but the final look is much better suited for my display and resolution. Here I'm sharing my current version of CSS hacks. I may work on more UI parts later.
/* Overrides */
body { font-size: 1.10em; font-family: "Arial" !important; }
body #conversation-view .message { border: none; }
body #conversation-view.latest, body #pm_view.latest { width: 70%;}
body #conversation-list-columns { width: 30%; }
I just wanted to say how much I like the ability to hack the CSS and make my own custom theme the way I wanted. Had to fiddle with it for a few hours but the final look is much better suited for my display and resolution. Here I'm sharing my current version of CSS hacks. I may work on more UI parts later.
/* Overrides */
body { font-size: 1.10em; font-family: "Arial" !important; }
body #conversation-view .message { border: none; }
body #conversation-view.latest, body #pm_view.latest { width: 70%;}
body #conversation-list-columns { width: 30%; }
#conversationHeader h1 { font-size: 16px; letter-spacing:-1px; padding: 14px 50px 14px 5px; color:#999;}
#conversation-view .message .summary { background:#f6f6f6 !important; }
#conversation-view .message .summary .time { background:#f6f6f6 !important; }
#conversation-view .message .summary .labels, #conversation-view .message .summary .location.folders, #conversation-view .message .summary .message-attachments, #conversation-view .message .summary .status, #conversation-view .message .summary .time { background:#f6f6f6 !important; }
.conversation { height: 81px; }
#conversation-view .message .summary .summary-right { background:none !important;}
#conversation-view .message .details { background:#e6e6e6 !important;}
#conversation-view .message .details .recipients-summary { margin-top: 8px;}
.messageExtra-container>[class*=-container] { background:#ccc;}
.pm_buttons .pm_buttons-child { padding: 18px; box-shadow: none;}
.pm_buttons .moveElement-container { padding: 18px; box-shadow: none;}
.conversationView-container { width: 100%;}
body #conversation-view, body #pm_view { width: 70%; }
.pm_buttons-child { box-shadow: none; }
.pm_buttons a, .pm_buttons button { box-shadow: none; background:#e6e6e6; }
.navigationItem-title { font-size: 17px; text-transform: uppercase; }
.sidebarApp-item, .sidebarApp-menu li { margin-top: 10px; }
body #pm_thread:focus { outline: none; }
.navigation li .navigation-icon { font-size: 24px; }
.navigation li .navigation-title { font-size: 12px; margin-top: 5px;}
.pm_toolbar.pm_toolbar_withSelector { background:#555; }
.sidebarApp-container, .mobileMode .sidebarApp-container, body .headerDesktop-logo, .composerHeader-container { background:#555;}
/*.headerSecuredDesktop-container, .headerSecuredDesktop-logo, .headerSecuredMobile-container { height: 70px; } */
.conversation.marked:before { background: #9b9b9b; }
.labelsElement-name { font-size: 12px;}
.headerSecuredDesktop-logo:before { width: 210px; height: 40px;}
.conversation.read { background:#e6e6e6;}
.elements-selector-trigger-dropdown { color:#fff; }
.sidebarApp-container .footer { padding: 10px 0 35px; }
.sidebarApp-container .sidebar-btn-compose { background:#333; border:none;}
.sidebarApp-container .sidebar-btn-compose:hover { background:#000;}
.from-value { margin-bottom:6px; }
.sidebarApp-container, .mobileMode .sidebarApp-container, body .headerDesktop-logo, .composerHeader-container { padding-top: 20px; }