MediaWiki:UPM.css

/* ================    USER PROFILE MASTHEAD STYLING This CSS uses a number of ideas from across Wikia. Concepts have been borrowed from Kirby Wiki, Criminal Minds Wiki and Deadspace Wiki, amongst others. The code also contains a    few Tardis innovations.

Version 2.0, compatible with Darwin 11 November 2013 ================ */

.WikiaUserPagesHeader { background-color: transparent !important; background-image: none !important; }

.UserProfileMastheadSearch .WikiaSearch { z-index: 1; position: absolute; top: 121px; }

.UserProfileMastheadSearch .WikiaSearch input[type="text"] { background: rgba(1, 44, 87, 0.75); border: 1px solid #fff; width:225px; margin-left:-10px; margin-top:15px; }

.UserProfileMastheadSearch .WikiaSearch input[type="text"]:focus { border: 1px solid #146662; }

.UserProfileMasthead { width: auto; margin-top: 10px; }

.UserProfileMasthead .masthead-avatar .avatar { border-radius: 8px; border: none; -moz-box-shadow: 0 0 10px 3px #fff; -webkit-box-shadow: 0 0 10px 3px #fff; -o-box-shadow: 0 0 10px 3px #fff; -m-box-shadow: 0 0 10px 3px #fff; box-shadow: 0 0 10px 3px #fff; }

.UserProfileMasthead .masthead-info { background: rgba(255,255,255,1); background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(133,173,214,0.84) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(133,173,214,0.84))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(133,173,214,0.84) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(133,173,214,0.84) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(133,173,214,0.84) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(133,173,214,0.84) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#85add6', GradientType=0 ); border: 3px solid #fff; border-top: none; -webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; border-radius:10px; -webkit-box-shadow: 0 0 15px 0 #012c57 inset; -moz-box-shadow: 0 0 15px 0 #012c57 inset; -ms-box-shadow: 0 0 15px 0 #012c57 inset; -o-box-shadow: 0 0 15px 0 #012c57 inset; box-shadow: 0 0 15px 0 #012c57 inset; margin-left: 165px; }

.UserProfileMasthead .masthead-info:after { margin-bottom: 6px; }

.UserProfileMasthead .masthead-info::before, .UserProfileMasthead .masthead-info-lower:before { display: none; }

.UserProfileMasthead .masthead-info hgroup { font-family: 'Raleway'; height: auto; min-height: 40px; padding: 5px 20px; position: relative; width: auto; background: rgba(148,148,148,1); background: -moz-linear-gradient(top, rgba(148,148,148,1) 0%, rgba(1,44,87,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(148,148,148,1)), color-stop(100%, rgba(1,44,87,1))); background: -webkit-linear-gradient(top, rgba(148,148,148,1) 0%, rgba(1,44,87,1) 100%); background: -o-linear-gradient(top, rgba(148,148,148,1) 0%, rgba(1,44,87,1) 100%); background: -ms-linear-gradient(top, rgba(148,148,148,1) 0%, rgba(1,44,87,1) 100%); background: linear-gradient(to bottom, rgba(148,148,148,1) 0%, rgba(1,44,87,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#949494', endColorstr='#012c57', GradientType=0 ); }

.UserProfileMasthead .tally { padding-left: 0px; margin-bottom: 10px; }

.UserProfileMasthead .tally em { margin-right: 10px; }

.UserProfileMasthead .masthead-info h1 { font-size: 24px; font-family:"Raleway"; font-weight:300; color:#FFF }

.UserProfileMasthead .masthead-info h2 { margin-bottom: 5px; font-size: 14px; }

.UserProfileMasthead .details span, .UserProfileMasthead .wikis span { color:#F1F1F1; }

.UserProfileMasthead .masthead-info .tag { top: -1px ; color: #FFFFFF; font-size: 11px; border-radius: 4px; background-color: #012c57; /*   background-image: -moz-linear-gradient(top, #012c57 0%, #fff 100%); background-image: -webkit-linear-gradient(top, #012c57 0%, #b0b0b0 100%); background-image: -o-linear-gradient(top, #315B6D 0%, #072C38 100%); background-image: -ms-linear-gradient(top, #315B6D 0%, #072C38 100%);*/ }

.WikiHeaderRestyle > nav .subnav-2 li.marked2 a.subnav-2a { border: none !important; }

.WikiHeaderRestyle > nav .subnav-3 { border: 1px solid #101010 !important; box-shadow: 1px 2px 12px 0 #fff !important; }

.WikiaUserPagesHeader .tabs li a { display: inline-block; background-color: #012c57; font-size: 12px; letter-spacing:3px; margin-top: 4px; margin-bottom: -3px; padding: 3px 10px; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(50%, #012c57), color-stop(100%, #cccccc)); background-image:   -moz-linear-gradient(top, #012c57 50%, #cccccc 100%); background-image:    -ms-linear-gradient(top, #012c57 50%, #cccccc 100%); background-image:     -o-linear-gradient(top, #012c57 50%, #cccccc 100%); background-image:        linear-gradient(top, #012c57 50%, #cccccc 100%); -webkit-border-radius: 5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; -ms-border-radius: 5px 5px 0px 0px; -o-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; color:white; text-transform:uppercase; }

.tabs .selected a { background: #640d02; border: none; border-bottom: 3px solid #fff; color: #E2E2E2; cursor: pointer !important; top: 2px !important; -webkit-border-radius: 5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; -ms-border-radius: 5px 5px 0px 0px; -o-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; }

.tabs li a:hover { -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; border-bottom: 3px solid #1F7370; text-decoration: none; top: 1px; }

.tabs li a { -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; color: #ADADAD; cursor: pointer; border-bottom: 3px solid transparent; text-shadow: 0 1px rgba(0,0,0,0.7); }

/* ++++++++++++++++    SPANS are the little headings for each of the sections of the UPM, such as "I LIVE IN" +++++++++++++++++ */

.UserProfileMasthead .wikis span, .UserProfileMasthead .details span, .tally span { font-family: 'Lucida Grande', 'Futura', 'Gill Sans', 'Helvetica Neue', 'Trebuchet MS', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif; text-transform:lowercase; font-weight:normal; line-height:1.1em; margin-bottom:5px; font-size:.95em; }

.tally span { font-family: 'Futura', 'Gill Sans', 'Helvetica Neue', 'Trebuchet MS', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif; text-transform:uppercase; font-weight:normal; }

/* +++++++++++++++++    TALLY NUMBER itself +++++++++++++++++ */

.UserProfileMasthead .tally em { font-family: 'Futura', 'Gill Sans', 'Helvetica Neue', 'Trebuchet MS', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif; line-height:.8em; text-transform:uppercase; font-weight:normal; }

/* ++++++++++++++    Styling the user-customised portions of the UPM +++++++++++++++ */

.UserProfileMasthead .wikis li { line-height:.9em; font-family:'Gill Sans', Verdana, sans-serif; text-transform:lowercase; font-style:italic; margin-left:5px; color:#999999; } .UserProfileMasthead .details li { line-height:.9em; font-family:'Gill Sans', Verdana, sans-serif; text-transform:lowercase; color:#999999; font-style:italic; margin-left:auto; margin-right:-100px }

/* Tags */

.UserProfileMasthead .masthead-info .tag { padding:3px; font-family:Raleway; text-transform:lowercase; font-weight:600 }