Created
May 31, 2016 11:58
-
-
Save kyleruane/18a19605d9acb85078b28b1e089dce69 to your computer and use it in GitHub Desktop.
Fluid app user styles for myfantasyleague.com's dashboard
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
@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic"); | |
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"); | |
/* Global */ | |
* { | |
-webkit-font-smoothing: antialiased; | |
} | |
body, #body_home { | |
background: #ededed !important; | |
font-family: 'roboto' !important; | |
padding: 0; | |
margin: 0; | |
padding-top: 140px; | |
} | |
a, a:link, a:visited { | |
color: #111 !important; | |
text-decoration: none; | |
/*border-bottom: 1px solid rgba(0,0,0,0.1);*/ | |
} | |
/* Header & Navigation */ | |
h1 { | |
font-size: 24px; | |
font-weight: 600 !important; | |
margin-top: 0 !important; | |
text-transform: uppercase; | |
letter-spacing: .5px; | |
font-style: italic; | |
text-shadow: 0 1px 4px rgba(0,0,0,0.1); | |
-webkit-font-smoothing: antialiased; | |
color: #444 !important; | |
} | |
div#menu0.mmenucontainer { | |
width: 100%; | |
left: 0; | |
top: 0 !important; | |
background: white !important; | |
border: none !important; | |
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.08); | |
position: fixed !important; | |
padding-right: 200px !important; | |
} | |
div#menu0.mmenucontainer > table.milonictable { | |
margin-right: 260px !important; | |
padding-left: 0px !important; | |
} | |
.mainmenuoff, | |
A.mainmenuoff:link, | |
A.mainmenuoff:visited, | |
A.mainmenuoff:hover, | |
A.mainmenuoff:active, | |
A.mainmenucurrent:link, | |
A.mainmenucurrent:visited, | |
A.mainmenucurrent:hover, | |
A.mainmenucurrent:active { | |
background: none !important; | |
color: #333 !important; | |
font-size: 12px !important; | |
padding: 4px 8px 5px 6px !important; | |
} | |
.mainmenuon, | |
A.mainmenuon:link, | |
A.mainmenuon:visited, | |
A.mainmenuon:hover, | |
A.mainmenuon:active { | |
background: #f9f9f9 !important; | |
color: #333 !important; | |
font-size: 12px !important; | |
padding: 4px 8px 5px 6px !important; | |
} | |
.mainmenuoff table tr td:last-child, .mainmenuon table tr td:last-child, .mainmenucurrent table tr td:last-child { | |
position: relative; | |
} | |
.mainmenuoff table tr td:last-child:after, .mainmenuon table tr td:last-child:after, mainmenucurrent table tr td:last-child:after { | |
display: block; | |
content: " "; | |
height: 0; | |
width: 0; | |
border: 4px solid; | |
border-color: #d8d8d8 transparent transparent transparent; | |
position: absolute; | |
right: 0; | |
top: 50%; | |
margin-top: 0; | |
} | |
.mainmenuoff table tr td:last-child img, .mainmenuon table tr td:last-child img, .mainmenucurrent table tr td:last-child img { | |
display: none; | |
} | |
.mmenucontainer { | |
border: none !important; | |
background: #f9f9f9 !important; | |
box-shadow: 0 4px 9px 0 rgba(0,0,0,0.1); | |
} | |
.pageheader { | |
position: absolute; | |
top: 40px; | |
left: 0; | |
height: 100px; | |
padding: 20px; | |
} | |
.welcome { | |
position: fixed; | |
top: 0; | |
right: 0; | |
width: 320px !important; | |
display: block; | |
z-index: 1000; | |
padding: 11px 14px 6px 0 !important; | |
color: #e7e7e7 !important; | |
} | |
.welcome br { | |
display: none; | |
} | |
.welcome b { | |
font-size: 12px !important; | |
font-weight: 500 !important; | |
margin-right: 8px; | |
color: #333 !important; | |
} | |
.welcome a:first-of-type { | |
color: #ccc !important; | |
text-decoration: none !important; | |
font-size: 0 !important; | |
text-indent: -9999px; | |
overflow: hidden; | |
width: 20px; | |
display: inline-block; | |
} | |
.welcome a:first-of-type:after { | |
display: inline-block; | |
font-family: 'FontAwesome'; | |
font-size: 16px !important; | |
text-indent: 0; | |
content: "\f08b"; | |
text-align: center; | |
width: 20px; | |
vertical-align: -2px; | |
} | |
.welcome small a { | |
color: #ccc !important; | |
text-decoration: none !important; | |
font-size: 0 !important; | |
text-indent: -9999px; | |
overflow: hidden; | |
width: 20px; | |
display: inline-block; | |
} | |
.welcome small a:after { | |
display: inline-block; | |
font-family: 'FontAwesome'; | |
font-size: 16px !important; | |
text-indent: 0; | |
content: "\f059"; | |
text-align: center; | |
width: 20px; | |
vertical-align: -2px; | |
} | |
.welcome small a:first-of-type:after { | |
content: "\f0d0"; | |
} | |
.welcome small a:last-of-type:after { | |
content: "\f059"; | |
} | |
.brandlogo { | |
display: none; | |
} | |
.pagetitle { | |
width: 100% !important; | |
} | |
/* Sub-Nav Bar—i.e. Home, Live Scoring, etc.*/ | |
#hsubmenu { | |
padding: 0 0 0 180px !important; | |
} | |
#hsubmenu ul { | |
background: white !important; | |
float: none !important; | |
left: auto !important; | |
box-shadow: 0 0 6px 0 rgba(0,0,0,0.1); | |
} | |
#hsubmenu ul:before, | |
#hsubmenu ul:after { | |
content: ""; | |
display: table; | |
} | |
#hsubmenu ul:after { | |
clear: both; | |
} | |
#hsubmenu ul li { | |
right: auto !important; | |
width: 10%; | |
margin: 0 !important; | |
box-sizing: border-box; | |
padding: 10px 0 11px !important; | |
border-color: #f2f2f2 !important; | |
box-shadow: 0 -7px 9px -6px rgba(0,0,0,0.1) inset, 0 -1px 0 0 rgba(0,0,0,0.01) inset; | |
} | |
#hsubmenu ul a { | |
color: #333 !important; | |
} | |
/* Sub-Nav Rail */ | |
#vsubmenu { | |
width: 180px; | |
background: #333 !important; | |
position: relative; | |
} | |
#vsubmenu:after { | |
content: ""; | |
display: block; | |
height: 100%; | |
width: 16px; | |
position: absolute; | |
right: 0; | |
top: 0; | |
box-shadow: -5px 0 8px -2px rgba(0,0,0,0.3) inset; | |
} | |
#vsubmenu ul { | |
width: 180px !important; | |
box-sizing: border-box; | |
} | |
#vsubmenu ul li { | |
font-weight: 500 !important; | |
width: 180px !important; | |
color: white !important; | |
box-sizing: border-box; | |
} | |
#vsubmenu > ul > li { | |
font-size: 12px; | |
text-transform: uppercase; | |
letter-spacing: .75px; | |
text-indent: 11px; | |
padding-top: 14px !important; | |
padding-bottom: 2px !important; | |
} | |
#vsubmenu ul li ul { | |
padding-top: 14px !important; | |
} | |
#vsubmenu ul li ul li { | |
width: 180px !important; | |
color: white !important; | |
text-transform: none; | |
letter-spacing: normal; | |
text-indent: 0; | |
float: none !important; | |
background: #444 !important; | |
} | |
#vsubmenu ul li a { | |
width: 100% !important; | |
box-sizing: border-box; | |
padding: 9px 16px !important; | |
color: white !important; | |
border-color: rgba(255,255,255,0.12) !important; | |
font-weight: 400 !important; | |
} | |
#vsubmenu ul li ul li:last-child a { | |
border-bottom: 1px solid rgba(255,255,255,0.2); | |
} | |
#withmenus.withleft { | |
margin-left: 180px !important; | |
} | |
/* Homepage Tabbed Links—i.e. Main, My Team, etc. */ | |
#homepagetabs { | |
border-bottom: 1px solid rgba(0,0,0,0.09) !important; | |
background: #fcfcfc !important; | |
height: 70px !important; | |
padding: 26px 20px !important; | |
box-sizing: border-box; | |
} | |
#homepagetabs li { | |
float: none !important; | |
background: none !important; | |
border: none !important; | |
font-size: 14px; | |
color: #666 !important; | |
font-weight: 400; | |
position: relative; | |
} | |
#homepagetabs li.currenttab { | |
color: #111 !important; | |
} | |
#homepagetabs li.currenttab:before { | |
content: ""; | |
display: block; | |
height: 0; | |
width: 0; | |
border: 8px solid; | |
border-color: rgba(0,0,0,0.08) transparent transparent transparent; | |
position: absolute; | |
bottom: -41px; | |
left: 50%; | |
margin-left:-8px; | |
} | |
#homepagetabs li.currenttab:after { | |
content: ""; | |
display: block; | |
height: 0; | |
width: 0; | |
border: 8px solid; | |
border-color: #fcfcfc transparent transparent transparent; | |
position: absolute; | |
bottom: -40px; | |
left: 50%; | |
margin-left:-8px; | |
} | |
/* Homepage Main Content Area */ | |
.homepagetabcontent { | |
background: #f4f4f4; | |
box-shadow: 0 4px 3px -1px rgba(0,0,0,0.02) inset, 0 14px 12px -8px rgba(0,0,0,0.02) inset; | |
} | |
.homepagecolumn { | |
padding: 30px !important; | |
} | |
.homepagecolumn#homepagecolumn1 { | |
padding-right: 0 !important; | |
} | |
.homepagecolumn .homepagemodule { | |
width: 100% !important; | |
background: white !important; | |
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.06), 0 5px 10px 0 rgba(0,0,0,0.06); | |
margin-bottom: 30px !important; | |
} | |
.homepagecolumn .homepagemodule h3, .homepagecolumn .homepagemodule caption { | |
color: #333 !important; | |
background: white; | |
box-shadow: 0 1px 0 0 rgba(0,0,0,0.08); | |
padding: 12px 16px !important; | |
text-align: left !important; | |
font-weight: 400 !important; | |
} | |
.homepagecolumn .homepagemodule caption { | |
width: 100% !important; | |
background: white !important; | |
box-sizing: border-box; | |
padding-top: 20px !important; | |
padding-bottom: 20px !important; | |
font-size: 15px !important; | |
position: relative; | |
} | |
.homepagecolumn #standings h3, .homepagecolumn #brief_standings h3 { | |
background: #f9f9f9 !important; | |
} | |
.homepagecolumn .homepagemodule th { | |
background: #f9f9f9 !important; | |
font-size: 10px !important; | |
text-transform: uppercase; | |
letter-spacing: .5px; | |
font-weight: 400 !important; | |
color: #999 !important; | |
font-style: normal !important; | |
padding: 6px 4px !important; | |
} | |
.homepagecolumn .homepagemodule th:first-child { | |
text-align: left; | |
padding-left: 16px !important; | |
} | |
.homepagecolumn .homepagemodule td { | |
font-weight: 300 !important; | |
} | |
.homepagecolumn .homepagemodule td.ficonname > a { | |
display: inline-block; | |
width: 60px; | |
height: 60px; | |
border-radius: 50%; | |
overflow: hidden; | |
margin-right: 14px; | |
vertical-align: middle; | |
} | |
.homepagecolumn .homepagemodule td.ficonname > a img.franchiseicon { | |
width: 100% !important; | |
height: auto !important; | |
min-height: 100%; | |
} | |
.oddtablerow td, .eventablerow td { | |
padding: 10px !important; | |
} | |
.oddtablerow td:first-child, .eventablerow td:first-child { | |
padding-left: 16px !important; | |
} | |
.oddtablerow td:last-child, .eventablerow td:last-child { | |
padding-left: 16px !important; | |
} | |
.oddtablerow td a, .eventablerow td a { | |
color: #333 !important; | |
font-weight: 400 !important; | |
text-decoration: none !important; | |
} | |
.eventablerow td { | |
background: #fbfbfb !important; | |
} | |
.module_expand { | |
display: block; | |
width: 28px; | |
height: 24px; | |
position: absolute; | |
right: 14px; | |
color: #ccc; | |
} | |
.newposition td, .newposition th { | |
border-top: 1px solid #e8e8e8 !important; | |
} | |
/* Footer Garbage */ | |
.pagefooter { | |
padding: 40px; | |
font-weight: 300; | |
line-height: 1.8; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment