Figured I\'d make a thread for updates here so the status isn\'t spammed.
I\'ve made a custom stylesheet for the Outlook Web App so it doesn\'t look like poop. You can paste it into an extension that allows you to inject custom CSS (such as Stylish for Chrome).
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
.o365button._ad_3{
height:auto;
margin-top:2px;
padding-top:4px;
padding-bottom:6px;
border-radius:3px;
}
div.o365cs-nav-header16{
color:#eee !important;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#777777+0,666666+100 */
background: rgb(119,119,119); /* Old browsers */
background: -moz-linear-gradient(top, rgba(119,119,119,1) 0%, rgba(102,102,102,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(119,119,119,1) 0%,rgba(102,102,102,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(119,119,119,1) 0%,rgba(102,102,102,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#777777\', endColorstr=\'#666666\',GradientType=0 ); /* IE6-9 */
text-shadow:0 -1px 0 #222;
box-shadow:inset 0 -1px 0 0 rgba(0,0,0,0.1);
z-index:4;
}
.nonDraftPart._pe_q1._pe_J1{
border-radius:2px;
box-shadow:inset 0 -1px 0 0 rgba(0,0,0,0.2);
text-shadow:0 -1px 0 rgba(0,0,0,0.2);
}
.o365cs-nav-brandingText{
color:#ccc;
text-shadow:none;
font-family: \'Open Sans\', sans-serif !important;
}
.o365cs-o365logo .o365cs-nav-brandingText{
font-weight:700;
color:#eee;
text-shadow:0 -1px 0 rgba(0,0,0,0.2);
}
.o365cs-nav-header16 .o365cs-nav-appTitleLine{
background-color:rgba(0,0,0,0.05);
opacity:0;
}
button.ms-bgc-tp{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#777777+0,666666+100 */
background: rgb(119,119,119); /* Old browsers */
background: -moz-linear-gradient(top, rgba(119,119,119,1) 0%, rgba(102,102,102,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(119,119,119,1) 0%,rgba(102,102,102,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(119,119,119,1) 0%,rgba(102,102,102,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#777777\', endColorstr=\'#666666\',GradientType=0 ); /* IE6-9 */
box-shadow:inset 0 -1px 0 0 rgba(0,0,0,0.1);
}
button.ms-bgc-tp:hover{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#888888+0,666666+100 */
background: rgb(136,136,136); /* Old browsers */
background: -moz-linear-gradient(top, rgba(136,136,136,1) 0%, rgba(102,102,102,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(136,136,136,1) 0%,rgba(102,102,102,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(136,136,136,1) 0%,rgba(102,102,102,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#888888\', endColorstr=\'#666666\',GradientType=0 ); /* IE6-9 */
}
button.ms-bgc-tp span.owaimg{
color:#ccc !important;
text-shadow:0 -1px 0 rgba(0,0,0,0.2);
}
button.ms-bgc-tp:hover span.owaimg{
color:#eee !important;
}
.o365cs-nav-header16 .o365cs-nav-o365Branding{
border-left-color:rgba(0,0,0,0.2);
}
.o365cs-nav-header16 .o365cs-nav-rightAlign .o365cs-nav-button{
border:none;
}
.o365cs-base.o365cst .o365cs-topnavLinkBackground-2{
background:transparent;
}
.ms-bgc-tdr-h span.o365cs-topnavText, .ms-bgc-tdr-h span.owaimg{
color:#aaa !important;
text-shadow:0 -1px 0 rgba(0,0,0,0.2);
}
.ms-bgc-tdr-h:hover span.o365cs-topnavText, .ms-bgc-tdr-h:hover span.owaimg{
color:#ccc !important;
}
.ms-bgc-tdr-h:hover{
background-color:rgba(255,255,255,0.2);
}
._ho2_6{
width:50px;
}
._ho2_6 img:hover{
-webkit-filter: brightness(120%);
filter: brightness(110%);
}
._ho2_5{
border-right:none;
}
._n_O3{
background:#f8f8f8;
}
#primaryContainer{
background:#f8f8f8;
}
._n_A4, ._n_l1{
background:transparent !important;
}
.ms-bg-color-themeLighterAlt{
background:transparent;
}
/* search button bg */
button.ms-bg-color-themeLighter{
background-color:#555;
border-bottom:none !important;
box-shadow:inset 0 4px 8px -4px rgba(0,0,0,0.5), 0 0 8px 0 rgba(0,0,0,0.3);
}
button.ms-bg-color-themeLighter .ms-font-color-neutralPrimary{
color:#aaa;
}
button.ms-bg-color-themeLighter:hover .ms-font-color-neutralPrimary{
color:#ccc;
}
._is_x.ms-bg-color-themeLight{
background:#555;
box-shadow:inset 0 4px 8px -4px rgba(0,0,0,0.5), 0 0 8px 0 rgba(0,0,0,0.3);
}
/* Search button */
.ms-fcl-ts-b:before{
color:#aaa;
}
/* Search button */
.ms-fcl-ts-b:hover:before{
color:#ccc;
}
/* Search input */
._is_w{
background:#eee;
border-radius:2px;
color:#555;
top:4px;
bottom:4px;
height:auto !important;
padding-left:4px !important;
padding-right:24px !important;
box-sizing: border-box;
z-index:5;
box-shadow:0 1px 4px 0 rgba(0,0,0,0.3);
}
/* override search input hover */
._is_w.ms-bcl-nsa-h:hover{
background:#eee;
}
/* input sizing container */
._is_v{
left:14px !important;
right:34px !important;
}
/* search X */
._is_z.o365button{
position:relative;
z-index:6;
margin-right:12px;
}
/* search X icon hover */
.ms-fcl-nd-b:before{
color:#555;
}
button.ms-bg-color-themeLighter:hover{
background-color:#555 !important;
}
._n_P1{
border-left:none;
}
._fce_a.ms-bg-color-themeLighterAlt{
background-color:#555;
color:#ccc !important;
box-shadow:inset 0 4px 8px -4px rgba(0,0,0,0.5), 0 0 8px 0 rgba(0,0,0,0.3);
z-index:2;
}
.ms-bgc-tl{
background:transparent;
}
.ms-bgc-tlr-h:hover{
background:transparent;
}
.ms-bgc-tl-h:hover{
background: #444;
color:#eee !important;
}
.ms-bgc-tl-h:hover span{
color:#eee !important;
}
.ms-font-color-themePrimary-before:before, .ms-fcl-tp-b:before{
color:inherit !important;
border-color:transparent;
}
._fce_a .ms-bgc-tlr-h .ms-fcl-np, ._fce_a .ms-fcl-np, ._fce_a .ms-fcl-ns{
color:#ccc !important;
text-shadow:0 -1px 0 rgba(0,0,0,0.5) !important;
}
._n_m1, .listItemDefaultBackground{
background:transparent;
}
/* scrollbar */
.customScrollBar::-webkit-scrollbar-track, .customScrollBar::-webkit-scrollbar-corner, .customScrollBar::-webkit-scrollbar-button{
background:transparent;
}
.customScrollBar::-webkit-scrollbar-thumb{
border-color:#f8f8f8 !important;
}
/* checkboxes */
.wf-size-checkboxMultiselectSize{
border-radius:2px;
}
._rp_r1{
margin:2px;
}
._rp_05._rp_Z4{
background:#fff;
margin-left:0;
padding-left:8px;
padding-top:4px;
border-radius:2px;
border:1px solid #eee;
}
._pe_s1{
border-radius:2px;
box-shadow:inset 0 0 16px 0 rgba(0,0,0,0.2);
}
._fce_l{
margin-left:0;
}
button._fce_h.ms-fwt-r.ms-fcl-np.o365button + .ms-fcl-nt{
display:none;
}
._fce_c{
margin-right:8px;
}
.contextMenuPopup, .contextMenuPopup .ms-bgc-w{
background:#555;
}
.contextMenuPopup .ms-font-s{
color:#ccc;
text-shadow:0 -1px 0 rgba(0,0,0,0.5) !important;
}
.contextMenuPopup .ms-font-s:hover{
background:#444;
color:#eee;
}
.contextMenuPopup .ms-bcl-nl{
border-color:#444;
margin-top:0;
}
.contextMenuPopup .ms-fcl-tp{
color:#888;
}
.contextMenuDropShadow, .headerMenuDropShadow{
border-color:#444;
}
.headerMenuDropShadow{
box-shadow:3px 3px 6px -4px rgba(0,0,0,0.4), -3px 3px 6px -4px rgba(0,0,0,0.4);
}
._n_71 > div:first-child{
z-index:3;
}
/* divider */
._n_s1, ._n_t1{
box-shadow: inset 1px 0 0 0 rgba(255,255,255,0.5);
z-index:3;
}
/* select an item to view */
._db_M4.ms-bg-color-neutralLighter._db_N4{
box-shadow:0 0 16px 0 rgba(0,0,0,0.1), 0 0 1px 1px rgba(0,0,0,0.1);
border-radius:4px;
background:#fff;
}