Created
January 13, 2010 19:47
-
-
Save BenWard/276518 to your computer and use it in GitHub Desktop.
A user CSS override to restyle Outlook Web Access 2003; to make it more Mac-like. Use this file with Fluid <http://fluidapp.com/>, or another Webkit renderer, to transform OWA into something more palatable. Micah Laaker has an icon you can use for the Flu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
# "Outlook Mac Access" CSS | |
A user CSS override to restyle Outlook Web Access 2003; to make it more Mac-like. | |
Use this file with Fluid <http://fluidapp.com/>, or another Webkit renderer, to transform | |
OWA into something more palatable. | |
By Ben Ward <http://benward.me> | |
## Status: | |
* Reskining of the sidebar colours, fonts and sizes is done | |
* List headers and toolbars are done | |
* Most of the mail view is done | |
* The calendar sidebar, and calendar widget, is done; calendar events need more work. | |
## Todo: | |
* Replace sidebar graphics with Mac-like non-Windowsesque replacements (use data: uri background images on the original image, use padding with width: 0 to crop) | |
* Events in the Calendar view aren't really "there" yet. The tables are a pain to style. | |
* Address Book (nothing done on this yet, beyond what the default overrides take away.) | |
* Compose/Read mail could be improved a lot. The actual typography of email messages, for example. | |
* The options pane is bland. | |
The general aim is to have as much of the transformation happen inside CSS as possible. Use Webkit gradients, rounded corners, box shadows and so on. If you do need to embed new graphics, use base64 encoded data URIs. | |
*/ | |
/** General Reset */ | |
* { | |
background: none !important; | |
color: inherit; | |
font-size: inherit !important; | |
} | |
input, textarea { background: #fff !important; } | |
body { | |
margin: 0 !important; | |
font-size: 11px !important; | |
} | |
font { | |
font-size: inherit !important; | |
color: inherit !important; | |
} | |
html { | |
font-family: "Lucida Grande" !important; | |
} | |
/** Navigation Sidebar */ | |
body.bdyNavbar { | |
background-color: #e9ecf0 !important; | |
padding: 3px; | |
} | |
body.bdyNavbar table tr:first-child { | |
display: none; | |
} | |
body.bdyNavbar table tr td.nbbutton { | |
height: auto !important; | |
padding: 2px 0; | |
} | |
body.bdyNavbar table tr img { | |
width: 16px !important; height: 16px !important; | |
} | |
/** Global View Pane */ | |
body .trToolbar { | |
background-image: -webkit-gradient(linear, left top, left bottom, from(#E8E8E8), to(#CECECE)) !important; | |
} | |
/* This kills a spacer row: */ | |
body .trToolbar + tr { | |
display: none; | |
} | |
body table.tblFolderBar { | |
background-color: #CECECE !important; | |
} | |
#statusbar { | |
display: block !important; | |
background: #E6D7B9 !important; | |
padding: 6px 3px !important; | |
width: 100% !important; | |
} | |
/* Table headers; silver gradient ala OSX list views: */ | |
body table tr th.Head, | |
.calWkTRColHdr th { | |
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF), color-stop(0.5, #DFDFDF)) !important; | |
border: 1px solid #A3A3A3 !important; | |
border-width: 1px 1px 1px 0px !important; | |
font-weight: normal; | |
} | |
body table tr th.Head:last-child { | |
border-right-width: 0 !important; | |
} | |
/** Email Specific */ | |
/* Try to restrain the padding and margin of the message view: */ | |
table.tblMsgBody, table.tblMsgBody td { | |
border: 0 !important; | |
padding: 0 !important; | |
margin: 0 !important; | |
} | |
table.tblMsgBody { | |
border-top: 1px solid #ccc !important; | |
margin-top: 10px !important; | |
padding-top: 10px !important; | |
} | |
table[id$="MessageHeaderTbl"] { | |
padding: 4px !important; | |
} | |
table[id$="MessageHeaderTbl"] td:first-child { | |
text-align: right !important; | |
font-weight: bold !important; | |
color: #666 !important; | |
padding-right: 3px !important; | |
} | |
.tblMsgBody td p { | |
padding: 10px !important; | |
} | |
/** Options Pane */ | |
.bdyOptions { | |
background-color: #CECECE !important; | |
} | |
/** Folders Hierachy Pane */ | |
table.tblHierarchy tbody { | |
height: 200px !important; | |
max-height: 200px !important; | |
width: 100% !important; | |
overflow-y: scroll !important; | |
display: block !important; | |
} | |
/** Calendar */ | |
/* Right hand column (mini cal) */ | |
form[action=Calendar] .tblFolderBar + table > tbody > tr > td + td, | |
form[action=Calendar] .tblFolderBar + table > tbody > tr > th + th { | |
color: #333 !important; | |
background: -webkit-gradient(linear, left top, left bottom, from(#e9ecf0), to(#c0c6cd)) !important; | |
text-shadow: #fff 1px 1px 0px; | |
padding: 0 !important; | |
} | |
form[action=Calendar] .tblFolderBar + table > tbody > tr > th + th { | |
background: #e9ecf0 !important; | |
} | |
form[action=Calendar] .tblFolderBar + table > tbody > tr > th + th { | |
font-size: 120% !important; | |
padding: 4px 0 !important; | |
} | |
form[action=Calendar] .tblFolderBar + table > tbody > tr > th + th a { | |
padding: 4px 8px; | |
opacity: 0.7; | |
} | |
form[action=Calendar] .tblFolderBar + table > tbody > tr > th + th a:first-child { | |
float: left; | |
} | |
form[action=Calendar] .tblFolderBar + table > tbody > tr > th + th a:last-child { | |
float: right; | |
} | |
form[action=Calendar] .tblFolderBar + table .calDtPckr { | |
} | |
form[action=Calendar] .tblFolderBar + table .calDtPckr th { | |
font-size: 80% !important; | |
} | |
form[action=Calendar] .tblFolderBar + table .calDtPckr td { | |
font-size: 120% !important; | |
font-weight: bold; | |
border: 1px solid #D6DBDF !important; | |
border-right-color: #A0ACBB !important; | |
border-bottom-color: #A0ACBB !important; | |
padding: 0 !important; | |
} | |
form[action=Calendar] .tblFolderBar + table .calDtPckr td:first-child { | |
border-left-width: 0 !important; | |
} | |
form[action=Calendar] .tblFolderBar + table .calDtPckr td:last-child { | |
border-right-width: 0 !important; | |
} | |
form[action=Calendar] .tblFolderBar + table .calDtPckr td font { | |
display: block !important; | |
/*background-color: #C3CAD2 !important;*/ | |
height: 20px !important; | |
font-size: 110% !important; | |
padding: 2px !important; | |
} | |
form[action=Calendar] .tblFolderBar + table .calDtPckr td a { | |
color: #333 !important; | |
} | |
/* Days containing events: */ | |
form[action=Calendar] .tblFolderBar + table .calDtPckr td b { | |
display: block; | |
height: 20px !important; | |
color: #fff !important; | |
text-shadow: #333 1px 1px 0 !important; | |
} | |
/* Current Date */ | |
form[action=Calendar] .tblFolderBar + table .calDtPckr td[bgcolor="#FF0000"] { | |
border-top-color: #2B3648 !important; | |
border-left-color: #4C5F7F !important; | |
border-right-color: #465976 !important; | |
border-bottom-color: #576D91 !important; | |
background-image: -webkit-gradient(linear, left top, left bottom, from(#3C4B63), to(#6079A0), color-stop(0.1, #586E92), color-stop(0.2, #6985B0), color-stop(0.5, #5D7AA6)) !important; | |
color: #fff !important; | |
text-shadow: #1C3D62 1px 0 0 !important; | |
} | |
/* Override special date children: */ | |
form[action=Calendar] .tblFolderBar + table .calDtPckr td[bgcolor="#FF0000"] * { | |
color: inherit !important; | |
background: none !important; | |
} | |
/* Selected Date */ | |
form[action=Calendar] .tblFolderBar + table .calDtPckr td[bgcolor="#808080"] { | |
border-color: #56638F !important; | |
background-image: -webkit-gradient(linear, left top, left bottom, from(#ADD1F5), to(#0f6fe1), color-stop(0.1, #80B8F0), color-stop(0.2, #80b8f0), color-stop(0.5, #3389e6)) !important; | |
color: #fff !important; | |
text-shadow: #1C3D62 1px 0 0 !important; | |
} | |
/* Override special date children: */ | |
form[action=Calendar] .tblFolderBar + table .calDtPckr td[bgcolor="#808080"] * { | |
color: inherit !important; | |
background: none !important; | |
} | |
/* Main calendar view */ | |
form[action=Calendar] .tblFolderBar + table > tbody > tr > th:first-child { | |
font-size: 140% !important; | |
} | |
form[action=Calendar] .tblFolderBar + table > tbody > tr > td:first-child table td[colspan="4"] { | |
color: #666 !important; | |
/* background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#fff)) !important;*/ | |
padding: 2px 0 !important; | |
font-weight: bold !important; | |
text-shadow: #fff 1px 0 0; | |
} | |
form[action=Calendar] .tblFolderBar + table > tbody > tr > td:first-child table td[colspan="4"][height="5"] { | |
display: none; | |
} | |
form[action=Calendar] .tblFolderBar + table > tbody > tr > td:first-child table tbody tr[width="100%"] { | |
/* display: block !important;*/ | |
width: 100% !important; | |
background-color: #fff !important; | |
border: 1px solid #000 !important; | |
-webkit-border-radius: 5px !important; | |
margin: 2px 0 !important; | |
} | |
form[action=Calendar] .tblFolderBar + table table { | |
border-spacing: 0 !important; | |
} | |
table.calDayVwTbl { | |
border-color: #eee !important; | |
} | |
table.calDayVwTbl tr { | |
min-height: 20px !important; | |
} | |
table.calDayVwTbl td[title] font { | |
display: block; | |
background-color: #c1b5e6 !important; | |
border: 2px solid #492ca1; | |
-webkit-border-radius: 5px; | |
margin: 2px !important; | |
padding: 2px !important; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment