Skip to content

Instantly share code, notes, and snippets.

@seaside98

seaside98/SassMeister-input.scss

Created April 12, 2014 01:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save seaside98/10514434 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save seaside98/10514434 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.5)
// Compass (v1.0.0.alpha.18)
// ----
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----
/* Parallel CSS
* By: Seaside98, AgentSpy, Nxtstep101, Drew1200, Codyn329, ToaMeiko
*/
// Skew degrees
$deg: 25deg;
// Right property of several arrows
$arrow-val: 2px;
// Colors
$b: #187EC9;
$bh: #2C9ED7;
$o: #f08211;
$oh: #fa9c20;
$black: #3a3a3a;
// Font sizes
$small-f: 14px;
$large-f: 17px;
$x-small-f: 12px;
// Images
$wall-img: url(//images.wikia.com/lmbtest/images/2/2a/WhiteWallBubble.png);
$menu-arrow: url(//images.wikia.com/lmbtest/images/d/d3/WhiteMenuArrow.png);
$black-arrow: url(//images.wikia.com/lmbtest/images/e/eb/BlackMenuArrow.png);
// Outer shadows
@mixin box-shadow($shad-vals : 0 0 20px rgba(0, 0, 0, .2)) {
box-shadow: $shad-vals;
-webkit-box-shadow: $shad-vals;
}
// No shadow
@mixin no-shadow {
box-shadow: none;
-webkit-box-shadow: none;
}
// Skew
@mixin skew($degrees) {
-webkit-transform: skew($degrees * $deg);
-ms-transform: skew($degrees * $deg);
transform: skew($degrees * $deg);
}
// Rotate
@mixin rotate($degrees) {
-webkit-transform: rotate($degrees);
-ms-transform: rotate($degrees);
transform: rotate($degrees);
}
// Skew and rotate
@mixin skew-rotate($skew, $rotate) {
-webkit-transform: rotate($rotate) skewY($skew * $deg);
-ms-transform: rotate($rotate) skewY($skew * $deg);
transform: rotate($rotate) skewY($skew * $deg);
}
// Skewed parent elements
%skew {
@include skew(-1);
> a, > ul {
@include skew(1);
}
&:hover {
background-color: $bh;
}
}
// White menu arrows
@mixin menu-arrow($size, $top: 0, $right: 0, $position: absolute) {
@if($top == 0) {
$position: static;
}
content: "";
display: block;
position: $position;
height: $size;
width: $size;
top: $top;
background-size: $size;
z-index: 6;
right: $right;
background-image: $menu-arrow;
}
// Odd shadows
%odd-para {
&:after {
@include rotate(-3deg);
@include box-shadow(0 0 50px rgba(0, 0, 0, .5));
left: -50%;
content: "";
position: absolute;
top: -125%;
height: 100%;
width: 100%;
}
}
// Odd elements
%odd-child {
@extend %odd-para;
@include skew(1);
margin-left: 20px;
a {
@include skew(-1);
}
}
// Even shadows
%even-para {
&:after {
@include rotate(3deg);
@include box-shadow(0 0 50px rgba(0, 0, 0, .5));
right: -50%;
content: "";
position: absolute;
top: -125%;
height: 100%;
width: 100%;
}
}
// Even elements
%even-child {
@extend %even-para;
@include skew(-1);
margin-right: 20px;
a {
@include skew(1);
}
}
// Base drop downs
%drop-down {
li {
@include box-shadow;
border: 0;
position: relative;
overflow: hidden;
background-color: $b;
&:hover {
background-color: $bh !important;
}
}
a {
color: white;
font-size: $small-f;
padding-left: 20px;
}
}
// Normal drop down (even first)
%drop-down-nor {
@extend %drop-down;
li {
// Even stuff
&:nth-child(even){
@extend %even-child;
}
// Odd stuff
&:nth-child(odd){
@extend %odd-child;
}
}
}
// Reverse drop down (odd first)
%drop-down-rev {
@extend %drop-down;
li {
// Even stuff
&:nth-child(even){
@extend %odd-child;
}
// Odd stuff
&:nth-child(odd){
@extend %even-child;
}
}
}
/* *** HEADER *** */
#WikiaHeader {
$arrow-pad: 0 19px 0 5px;
@include no-shadow;
border-top: 0;
height: 40px;
background-image: none;
background-color: $b;
.wikia-header-mask {
background-image: none;
height: 100%;
}
.page-width-container {
height: 100%;
}
.WikiaLogo {
@extend %skew;
background-color: $o;
padding: 0 17px;
height: 100%;
position: relative;
z-index: 5;
margin-top: 0;
margin-left: 9px;
&:hover {
background-color: $oh;
}
a {
height: 34px;
display: block;
position: static;
padding-top: 6px;
}
}
.start-a-wiki {
@extend %skew;
border-left: 0;
margin-top: 0;
padding: 0 12px;
height: 100%;
.wikia-button {
border: 0;
height: 100%;
line-height: 40px;
vertical-align: middle;
padding: 0;
background-color: transparent;
background-image: none;
font-size: $large-f;
padding: 0 5px;
border-radius: 0;
top: 0;
z-index: 5;
}
}
%HEADER-li {
height: 40px;
padding: 0 12px;
&:hover {
background-image: none;
}
}
%HEADER-a {
height: 100%;
border-left: 0;
padding: 0 4px 0 5px;
line-height: 40px;
font-size: $large-f;
vertical-align: middle;
position: relative;
z-index: 5;
}
#GlobalNavigation {
.topNav {
@extend %HEADER-li;
@extend %skew;
&:after {
float: right;
margin-right: 2px;
line-height: 40px;
margin-top: 13px;
background-repeat: no-repeat;
vertical-align: middle;
}
> a {
@extend %HEADER-a;
padding: $arrow-pad;
&:after {
@include menu-arrow(11px, 14px, $arrow-val);
}
}
&:nth-of-type(1) .subnav {
left: -219px;
}
&:nth-of-type(2) .subnav {
left: -365px;
}
&:nth-of-type(3) .subnav {
left: -513px;
}
}
.subnav {
width: 1032px;
background-color: transparent;
> li {
@include skew(-1);
@include box-shadow;
width: 25%;
margin-left: -1px;
background-color: $b;
height: 40px;
&:hover {
background-color: $oh;
}
li {
width: 100%;
border-top: 0;
}
a {
@include skew(1);
padding: 0 20px;
height: 40px;
line-height: 40px;
color: white;
}
.catnav {
@extend %drop-down-nor;
@include skew(1);
left: 7px;
position: relative;
li {
height: 40px;
}
}
}
}
}
#WallNotifications {
right: 10px;
top: 0;
> li {
@extend %HEADER-li;
@extend %skew;
margin-right: 0;
width: 35px;
&:hover .bubbles:after {
display: block;
}
.bubbles {
$bubbles-size: 20px;
@extend %HEADER-a;
@include skew(1);
margin-left: 7px;
padding: 0;
margin-top: 9px;
background-repeat: no-repeat;
background-size: $bubbles-size;
height: $bubbles-size;
width: $bubbles-size;
z-index: 6;
background-image: $wall-img;
}
#bubbles_count {
top: -19px;
left: 11px;
}
.subnav {
transform-origin: top right;
-ms-transform-origin: top right;
-webkit-transform-origin: top right;
background: transparent;
right: -20px;
width: 250px;
left: auto;
li {
border-top: 0;
&:nth-of-type(2) .notifications-wiki-header {
display: none;
}
.notifications-for-wiki-list {
@extend %drop-down-nor;
.notification {
width: 145px;
.msg-title, .msg-body {
width: 100%;
}
.msg-title {
font-size: $small-f;
font-weight: normal;
}
}
li:after {
@include box-shadow(0 0 100px rgba(0, 0, 0, .5));
}
a {
padding: 5px 15px;
}
.notifications-empty {
-webkit-transform: none !important;
-ms-transform: none !important;
transform: none !important;
color: white;
width: 210px;
&:after {
@include box-shadow(0 0 30px rgba(0, 0, 0, .5));
}
}
.unread_notification {
background-color: $o;
&:hover {
background-color: $oh !important;
}
}
}
.notifications-wiki-header {
background-image: none;
background-color: $b;
z-index: 0;
@include box-shadow;
&:after {
@include menu-arrow(11px, 7px, 4px)
}
}
&.unread_notification a {
background: transparent;
}
}
.notifications-header {
display: none;
}
.timeago {
color: white;
}
}
}
#wall-notifications-markasread {
top: 0;
}
.notifications-wiki-count-container {
top: 2px;
}
.notifications-wiki-count {
margin-right: 0;
}
}
#AccountNavigation {
top: 0;
right: 55px;
> li:only-child {
margin-right: 15px;
}
> li {
@extend %HEADER-li;
@extend %skew;
> a {
@extend %HEADER-a;
padding: $arrow-pad;
border: 0;
&:after {
@include menu-arrow(11px, 14px, $arrow-val);
}
}
& + li {
margin-right: 0;
}
}
.subnav {
@extend %drop-down-nor;
width: 169px;
left: 50%;
margin-left: -47px;
background-color: transparent;
}
.avatar {
display: none !important;
}
#UserLoginDropdown {
$login-width: 175px;
width: $login-width;
.input-group {
width: $login-width - 20;
padding: 0px 10px;
margin-top: 15px;
margin-bottom: 0;
label {
font-size: $small-f;
.keep-logged-in {
width: auto;
margin-top: 0;
}
}
input {
width: $login-width - 20 - 6;
border: 0;
&.login-button {
background-image: none;
border-radius: 0;
background-color: $b;
width: $login-width - 20;
height: 30px;
}
}
}
}
}
.subnav {
@include no-shadow;
border: 0;
padding: 0;
&.show {
top: 40px;
}
a:hover:not(.forgot-password) {
background-color: transparent !important;
color: white !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
}
.chevron {
display: none;
}
.avatar {
border: 0;
}
#WallNotificationsReminder {
@extend %odd-para;
@include box-shadow;
@include skew(1);
border: 0;
border-radius: 0;
overflow: hidden;
background-color: $b;
padding: 0 20px;
right: 30px;
&:hover {
background-color: $bh;
}
a {
@include skew(-1);
display: block;
color: white;
padding: 10px 0;
&:hover {
text-decoration: none;
}
}
}
}
/* *** FOOTER *** */
#WikiaBarWrapper {
background-color: $b;
background-image: none;
@include no-shadow;
.wikia-bar {
background-image: none;
}
@at-root %arrow {
@include skew(-1);
padding: 0 7px;
right: -7px;
position: relative;
background-image: none;
&:after {
background-size: 12px;
background-image: $menu-arrow;
background-repeat: no-repeat;
background-position: center;
content: "";
display: block;
background-color: transparent;
height: 25px;
width: 25px;
}
&:hover {
background-color: $bh;
}
}
.arrow {
@extend %arrow;
position: absolute;
&:after {
@include skew-rotate(-1, 90deg);
}
}
.toolbar {
height: 100%;
padding: 0;
}
.tools {
padding: 0 2px;
> li {
@include skew(-1);
height: 25px;
border: 0;
margin-top: 0;
line-height: 25px;
vertical-align: middle;
position: relative;
padding: 0 9px;
&:hover {
background-color: $bh;
}
> a {
padding: 0 5px;
}
}
li.mytools {
a {
padding-right: 13px;
}
&:after {
@include skew(1);
@include menu-arrow(8px, 9px, $arrow-val);
margin-right: 8px;
}
}
a {
@include skew(1);
height: 100%;
display: inline-block;
&:hover {
text-decoration: none;
background-color: transparent;
}
}
}
.tools-menu {
@extend %drop-down-nor;
@include skew(1);
@include no-shadow;
right: auto !important;
left: -50% !important;
bottom: 25px;
border: 0px;
z-index: -1;
background-color: transparent;
margin-left: -5px;
width: 120px;
li {
height: 30px;
padding: 0 10px;
border: 0;
width: 100%;
}
a {
font-size: $x-small-f;
color: white;
width: 100%;
padding: 0;
vertical-align: middle;
line-height: 30px;
padding-left: 10px;
}
}
.gear, .arrow-icon-ctr {
display: none;
}
}
.WikiaBarCollapseWrapper {
@include no-shadow;
background-image: none;
background-color: transparent;
right: 1px;
.wikia-bar-collapse {
@extend %arrow;
background-color: $b;
&:after {
@include skew-rotate(-1, -90deg);
}
}
}
.popover.wikiaBar {
display: none !important;
}
/* *** Navbar *** */
#WikiaTopAds {
padding: 0;
}
#WikiHeader {
padding: 20px 10px 0 10px;
margin-bottom: 0;
height: 100%;
.wordmark {
margin-bottom: 21px;
margin-top: 5px;
}
.WikiNav {
margin-right: 44px;
right: -8px !important;
.nav {
height: 35px;
.nav-item {
height: 100%;
border-bottom: 0;
line-height: 30px;
margin-right: 15px;
margin-left: 0 !important;
&.marked {
background-color: transparent;
border-top-right-radius: 0;
border-top-left-radius: 0;
> a {
color: $black;
cursor: pointer;
border-bottom: 5px solid $b;
}
}
a {
border: 0;
padding: 0 20px;
margin: 0;
font-size: 15px;
height: 100%;
&:hover {
text-decoration: none;
}
}
> a {
height: 30px;
&:hover {
border-bottom: 5px solid $bh;
}
}
}
}
}
.subnav-2 {
height: 35px;
top: 35px;
margin-left: 8px;
width: 100%;
.subnav-2-item {
@include skew(1);
height: 100%;
line-height: 35px;
padding: 0 16px;
&:hover {
background-color: $bh;
}
a.subnav-2a {
@include skew(-1);
padding: 0 5px;
}
}
.subnav-expandable a.subnav-2a {
padding-right: 14px;
&:after {
@include menu-arrow(10px, 13px, -1px);
}
}
}
.marked2 .subnav-2a {
height: 100%;
background-color: transparent;
border-radius: 0;
color: white;
}
.subnav-3 {
@include no-shadow;
@include skew(-1);
@extend %drop-down-rev;
padding: 0;
margin: 0;
top: 35px !important;
border: 0;
left: -25px;
background-color: transparent;
-webkit-transform-origin: top left;
.subnav-3-item {
height: 35px;
a.subnav-3a {
line-height: 35px;
font-size: $small-f;
&:hover {
background-color: transparent;
}
}
}
}
.navbackground {
@include skew(1);
@include box-shadow(0 0 1px transparent); // Smooths the edges
@extend %odd-para;
overflow: hidden;
margin: 0;
top: 35px;
height: 35px;
margin-left: 10px;
background-color: $b;
padding-left: 20px;
left: -2px;
div, img {
display: none;
}
}
.chevron {
display: none;
}
.buttons {
top: 20px;
right: 16px;
> .secondary {
background: none;
border-radius: 0;
border: 0;
font-size: 15px;
padding: 0 20px;
height: 30px;
line-height: 30px;
margin-left: 15px;
&:hover {
border-bottom: 5px solid $oh;
}
&.active {
border-bottom: 5px solid $o;
}
img, .drop, .share-dot, .share-pixel {
display: none;
}
.WikiaMenuElement {
@extend %drop-down-nor;
@include no-shadow;
background-color: transparent;
border: 0;
top: 34px;
width: 148px;
left: -50%;
margin-left: 38px;
li {
background-color: $o;
&:hover {
background-color: $oh !important;
}
a:hover {
background-color: transparent !important;
}
}
}
&.contribute {
padding-right: 25px;
&:after {
@include menu-arrow(10px, 10px, 12px);
background-image: $black-arrow;
}
}
}
}
}
/* *** Rail *** */
#WikiaRail {
#WikiaSearch {
input {
border: 0;
}
}
}
/* a.wikia-button,
.wikia-single-button a,
.wikia-menu-button,
input[type="submit"],
input[type="reset"],
input[type="button"],
.button,
button {
background-image: none;
border-radius: 0 !important;
border: 0;
background: transparent;
height: 35px !important;
padding: 0 20px;
img {
display: none;
}
} */
/* *** Fluid *** */
@media screen and (max-width: 1023px) {
#WikiaBarWrapper .toolbar {
margin-left: 9px;
> ul > li:first-child .tools-menu {
margin-left: 11px;
}
}
#WikiaHeader {
#GlobalNavigation .topNav {
.subnav {
width: 748px;
}
&:nth-of-type(1) .subnav {
left: -110px;
}
&:nth-of-type(2) .subnav {
left: -256px;
}
&:nth-of-type(3) .subnav {
left: -404px;
}
}
#WallNotifications > li .subnav {
right: 0;
}
}
#WikiHeader {
padding-top: 0;
height: 180px;
.WikiNav {
top: 85px;
}
.buttons {
top: 85px;
}
.WikiaMenuElement {
right: -9px;
left: auto !important;
}
}
}
Raw
SassMeister-output.css
/* Parallel CSS
* By: Seaside98, AgentSpy, Nxtstep101, Drew1200, Codyn329, ToaMeiko
*/
#WikiaHeader .WikiaLogo, #WikiaHeader .start-a-wiki, #WikiaHeader #GlobalNavigation .topNav, #WikiaHeader #WallNotifications > li, #WikiaHeader #AccountNavigation > li {
-webkit-transform: skew(-25deg);
-ms-transform: skew(-25deg);
transform: skew(-25deg);
}
#WikiaHeader .WikiaLogo > a, #WikiaHeader .start-a-wiki > a, #WikiaHeader #GlobalNavigation .topNav > a, #WikiaHeader #WallNotifications > li > a, #WikiaHeader #AccountNavigation > li > a, #WikiaHeader .WikiaLogo > ul, #WikiaHeader .start-a-wiki > ul, #WikiaHeader #GlobalNavigation .topNav > ul, #WikiaHeader #WallNotifications > li > ul, #WikiaHeader #AccountNavigation > li > ul {
-webkit-transform: skew(25deg);
-ms-transform: skew(25deg);
transform: skew(25deg);
}
#WikiaHeader .WikiaLogo:hover, #WikiaHeader .start-a-wiki:hover, #WikiaHeader #GlobalNavigation .topNav:hover, #WikiaHeader #WallNotifications > li:hover, #WikiaHeader #AccountNavigation > li:hover {
background-color: #2c9ed7;
}
#WikiaHeader #GlobalNavigation .subnav > li .catnav li:nth-child(odd):after, #WikiaHeader #WallNotifications > li .subnav li .notifications-for-wiki-list li:nth-child(odd):after, #WikiaHeader #AccountNavigation .subnav li:nth-child(odd):after, #WikiaBarWrapper .tools-menu li:nth-child(odd):after, #WikiHeader .buttons > .secondary .WikiaMenuElement li:nth-child(odd):after, #WikiHeader .subnav-3 li:nth-child(even):after, #WikiaHeader #WallNotificationsReminder:after, #WikiHeader .navbackground:after {
-webkit-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
left: -50%;
content: "";
position: absolute;
top: -125%;
height: 100%;
width: 100%;
}
#WikiaHeader #GlobalNavigation .subnav > li .catnav li:nth-child(odd), #WikiaHeader #WallNotifications > li .subnav li .notifications-for-wiki-list li:nth-child(odd), #WikiaHeader #AccountNavigation .subnav li:nth-child(odd), #WikiaBarWrapper .tools-menu li:nth-child(odd), #WikiHeader .buttons > .secondary .WikiaMenuElement li:nth-child(odd), #WikiHeader .subnav-3 li:nth-child(even) {
-webkit-transform: skew(25deg);
-ms-transform: skew(25deg);
transform: skew(25deg);
margin-left: 20px;
}
#WikiaHeader #GlobalNavigation .subnav > li .catnav li:nth-child(odd) a, #WikiaHeader #WallNotifications > li .subnav li .notifications-for-wiki-list li:nth-child(odd) a, #WikiaHeader #AccountNavigation .subnav li:nth-child(odd) a, #WikiaBarWrapper .tools-menu li:nth-child(odd) a, #WikiHeader .buttons > .secondary .WikiaMenuElement li:nth-child(odd) a, #WikiHeader .subnav-3 li:nth-child(even) a {
-webkit-transform: skew(-25deg);
-ms-transform: skew(-25deg);
transform: skew(-25deg);
}
#WikiaHeader #GlobalNavigation .subnav > li .catnav li:nth-child(even):after, #WikiaHeader #WallNotifications > li .subnav li .notifications-for-wiki-list li:nth-child(even):after, #WikiaHeader #AccountNavigation .subnav li:nth-child(even):after, #WikiaBarWrapper .tools-menu li:nth-child(even):after, #WikiHeader .buttons > .secondary .WikiaMenuElement li:nth-child(even):after, #WikiHeader .subnav-3 li:nth-child(odd):after {
-webkit-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
right: -50%;
content: "";
position: absolute;
top: -125%;
height: 100%;
width: 100%;
}
#WikiaHeader #GlobalNavigation .subnav > li .catnav li:nth-child(even), #WikiaHeader #WallNotifications > li .subnav li .notifications-for-wiki-list li:nth-child(even), #WikiaHeader #AccountNavigation .subnav li:nth-child(even), #WikiaBarWrapper .tools-menu li:nth-child(even), #WikiHeader .buttons > .secondary .WikiaMenuElement li:nth-child(even), #WikiHeader .subnav-3 li:nth-child(odd) {
-webkit-transform: skew(-25deg);
-ms-transform: skew(-25deg);
transform: skew(-25deg);
margin-right: 20px;
}
#WikiaHeader #GlobalNavigation .subnav > li .catnav li:nth-child(even) a, #WikiaHeader #WallNotifications > li .subnav li .notifications-for-wiki-list li:nth-child(even) a, #WikiaHeader #AccountNavigation .subnav li:nth-child(even) a, #WikiaBarWrapper .tools-menu li:nth-child(even) a, #WikiHeader .buttons > .secondary .WikiaMenuElement li:nth-child(even) a, #WikiHeader .subnav-3 li:nth-child(odd) a {
-webkit-transform: skew(25deg);
-ms-transform: skew(25deg);
transform: skew(25deg);
}
#WikiaHeader #GlobalNavigation .subnav > li .catnav li, #WikiaHeader #WallNotifications > li .subnav li .notifications-for-wiki-list li, #WikiaHeader #AccountNavigation .subnav li, #WikiaBarWrapper .tools-menu li, #WikiHeader .buttons > .secondary .WikiaMenuElement li, #WikiHeader .subnav-3 li {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
border: 0;
position: relative;
overflow: hidden;
background-color: #187ec9;
}
#WikiaHeader #GlobalNavigation .subnav > li .catnav li:hover, #WikiaHeader #WallNotifications > li .subnav li .notifications-for-wiki-list li:hover, #WikiaHeader #AccountNavigation .subnav li:hover, #WikiaBarWrapper .tools-menu li:hover, #WikiHeader .buttons > .secondary .WikiaMenuElement li:hover, #WikiHeader .subnav-3 li:hover {
background-color: #2c9ed7 !important;
}
#WikiaHeader #GlobalNavigation .subnav > li .catnav a, #WikiaHeader #WallNotifications > li .subnav li .notifications-for-wiki-list a, #WikiaHeader #AccountNavigation .subnav a, #WikiaBarWrapper .tools-menu a, #WikiHeader .buttons > .secondary .WikiaMenuElement a, #WikiHeader .subnav-3 a {
color: white;
font-size: 14px;
padding-left: 20px;
}
/* *** HEADER *** */
#WikiaHeader {
box-shadow: none;
-webkit-box-shadow: none;
border-top: 0;
height: 40px;
background-image: none;
background-color: #187ec9;
}
#WikiaHeader .wikia-header-mask {
background-image: none;
height: 100%;
}
#WikiaHeader .page-width-container {
height: 100%;
}
#WikiaHeader .WikiaLogo {
background-color: #f08211;
padding: 0 17px;
height: 100%;
position: relative;
z-index: 5;
margin-top: 0;
margin-left: 9px;
}
#WikiaHeader .WikiaLogo:hover {
background-color: #fa9c20;
}
#WikiaHeader .WikiaLogo a {
height: 34px;
display: block;
position: static;
padding-top: 6px;
}
#WikiaHeader .start-a-wiki {
border-left: 0;
margin-top: 0;
padding: 0 12px;
height: 100%;
}
#WikiaHeader .start-a-wiki .wikia-button {
border: 0;
height: 100%;
line-height: 40px;
vertical-align: middle;
padding: 0;
background-color: transparent;
background-image: none;
font-size: 17px;
padding: 0 5px;
border-radius: 0;
top: 0;
z-index: 5;
}
#WikiaHeader #GlobalNavigation .topNav, #WikiaHeader #WallNotifications > li, #WikiaHeader #AccountNavigation > li {
height: 40px;
padding: 0 12px;
}
#WikiaHeader #GlobalNavigation .topNav:hover, #WikiaHeader #WallNotifications > li:hover, #WikiaHeader #AccountNavigation > li:hover {
background-image: none;
}
#WikiaHeader #GlobalNavigation .topNav > a, #WikiaHeader #WallNotifications > li .bubbles, #WikiaHeader #AccountNavigation > li > a {
height: 100%;
border-left: 0;
padding: 0 4px 0 5px;
line-height: 40px;
font-size: 17px;
vertical-align: middle;
position: relative;
z-index: 5;
}
#WikiaHeader #GlobalNavigation .topNav:after {
float: right;
margin-right: 2px;
line-height: 40px;
margin-top: 13px;
background-repeat: no-repeat;
vertical-align: middle;
}
#WikiaHeader #GlobalNavigation .topNav > a {
padding: 0 19px 0 5px;
}
#WikiaHeader #GlobalNavigation .topNav > a:after {
content: "";
display: block;
position: absolute;
height: 11px;
width: 11px;
top: 14px;
background-size: 11px;
z-index: 6;
right: 2px;
background-image: url(//images.wikia.com/lmbtest/images/d/d3/WhiteMenuArrow.png);
}
#WikiaHeader #GlobalNavigation .topNav:nth-of-type(1) .subnav {
left: -219px;
}
#WikiaHeader #GlobalNavigation .topNav:nth-of-type(2) .subnav {
left: -365px;
}
#WikiaHeader #GlobalNavigation .topNav:nth-of-type(3) .subnav {
left: -513px;
}
#WikiaHeader #GlobalNavigation .subnav {
width: 1032px;
background-color: transparent;
}
#WikiaHeader #GlobalNavigation .subnav > li {
-webkit-transform: skew(-25deg);
-ms-transform: skew(-25deg);
transform: skew(-25deg);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
width: 25%;
margin-left: -1px;
background-color: #187ec9;
height: 40px;
}
#WikiaHeader #GlobalNavigation .subnav > li:hover {
background-color: #fa9c20;
}
#WikiaHeader #GlobalNavigation .subnav > li li {
width: 100%;
border-top: 0;
}
#WikiaHeader #GlobalNavigation .subnav > li a {
-webkit-transform: skew(25deg);
-ms-transform: skew(25deg);
transform: skew(25deg);
padding: 0 20px;
height: 40px;
line-height: 40px;
color: white;
}
#WikiaHeader #GlobalNavigation .subnav > li .catnav {
-webkit-transform: skew(25deg);
-ms-transform: skew(25deg);
transform: skew(25deg);
left: 7px;
position: relative;
}
#WikiaHeader #GlobalNavigation .subnav > li .catnav li {
height: 40px;
}
#WikiaHeader #WallNotifications {
right: 10px;
top: 0;
}
#WikiaHeader #WallNotifications > li {
margin-right: 0;
width: 35px;
}
#WikiaHeader #WallNotifications > li:hover .bubbles:after {
display: block;
}
#WikiaHeader #WallNotifications > li .bubbles {
-webkit-transform: skew(25deg);
-ms-transform: skew(25deg);
transform: skew(25deg);
margin-left: 7px;
padding: 0;
margin-top: 9px;
background-repeat: no-repeat;
background-size: 20px;
height: 20px;
width: 20px;
z-index: 6;
background-image: url(//images.wikia.com/lmbtest/images/2/2a/WhiteWallBubble.png);
}
#WikiaHeader #WallNotifications > li #bubbles_count {
top: -19px;
left: 11px;
}
#WikiaHeader #WallNotifications > li .subnav {
transform-origin: top right;
-ms-transform-origin: top right;
-webkit-transform-origin: top right;
background: transparent;
right: -20px;
width: 250px;
left: auto;
}
#WikiaHeader #WallNotifications > li .subnav li {
border-top: 0;
}
#WikiaHeader #WallNotifications > li .subnav li:nth-of-type(2) .notifications-wiki-header {
display: none;
}
#WikiaHeader #WallNotifications > li .subnav li .notifications-for-wiki-list .notification {
width: 145px;
}
#WikiaHeader #WallNotifications > li .subnav li .notifications-for-wiki-list .notification .msg-title, #WikiaHeader #WallNotifications > li .subnav li .notifications-for-wiki-list .notification .msg-body {
width: 100%;
}
#WikiaHeader #WallNotifications > li .subnav li .notifications-for-wiki-list .notification .msg-title {
font-size: 14px;
font-weight: normal;
}
#WikiaHeader #WallNotifications > li .subnav li .notifications-for-wiki-list li:after {
box-shadow: 0 0 100px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 100px rgba(0, 0, 0, 0.5);
}
#WikiaHeader #WallNotifications > li .subnav li .notifications-for-wiki-list a {
padding: 5px 15px;
}
#WikiaHeader #WallNotifications > li .subnav li .notifications-for-wiki-list .notifications-empty {
-webkit-transform: none !important;
-ms-transform: none !important;
transform: none !important;
color: white;
width: 210px;
}
#WikiaHeader #WallNotifications > li .subnav li .notifications-for-wiki-list .notifications-empty:after {
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}
#WikiaHeader #WallNotifications > li .subnav li .notifications-for-wiki-list .unread_notification {
background-color: #f08211;
}
#WikiaHeader #WallNotifications > li .subnav li .notifications-for-wiki-list .unread_notification:hover {
background-color: #fa9c20 !important;
}
#WikiaHeader #WallNotifications > li .subnav li .notifications-wiki-header {
background-image: none;
background-color: #187ec9;
z-index: 0;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
#WikiaHeader #WallNotifications > li .subnav li .notifications-wiki-header:after {
content: "";
display: block;
position: absolute;
height: 11px;
width: 11px;
top: 7px;
background-size: 11px;
z-index: 6;
right: 4px;
background-image: url(//images.wikia.com/lmbtest/images/d/d3/WhiteMenuArrow.png);
}
#WikiaHeader #WallNotifications > li .subnav li.unread_notification a {
background: transparent;
}
#WikiaHeader #WallNotifications > li .subnav .notifications-header {
display: none;
}
#WikiaHeader #WallNotifications > li .subnav .timeago {
color: white;
}
#WikiaHeader #WallNotifications #wall-notifications-markasread {
top: 0;
}
#WikiaHeader #WallNotifications .notifications-wiki-count-container {
top: 2px;
}
#WikiaHeader #WallNotifications .notifications-wiki-count {
margin-right: 0;
}
#WikiaHeader #AccountNavigation {
top: 0;
right: 55px;
}
#WikiaHeader #AccountNavigation > li:only-child {
margin-right: 15px;
}
#WikiaHeader #AccountNavigation > li > a {
padding: 0 19px 0 5px;
border: 0;
}
#WikiaHeader #AccountNavigation > li > a:after {
content: "";
display: block;
position: absolute;
height: 11px;
width: 11px;
top: 14px;
background-size: 11px;
z-index: 6;
right: 2px;
background-image: url(//images.wikia.com/lmbtest/images/d/d3/WhiteMenuArrow.png);
}
#WikiaHeader #AccountNavigation > li + li {
margin-right: 0;
}
#WikiaHeader #AccountNavigation .subnav {
width: 169px;
left: 50%;
margin-left: -47px;
background-color: transparent;
}
#WikiaHeader #AccountNavigation .avatar {
display: none !important;
}
#WikiaHeader #AccountNavigation #UserLoginDropdown {
width: 175px;
}
#WikiaHeader #AccountNavigation #UserLoginDropdown .input-group {
width: 155px;
padding: 0px 10px;
margin-top: 15px;
margin-bottom: 0;
}
#WikiaHeader #AccountNavigation #UserLoginDropdown .input-group label {
font-size: 14px;
}
#WikiaHeader #AccountNavigation #UserLoginDropdown .input-group label .keep-logged-in {
width: auto;
margin-top: 0;
}
#WikiaHeader #AccountNavigation #UserLoginDropdown .input-group input {
width: 149px;
border: 0;
}
#WikiaHeader #AccountNavigation #UserLoginDropdown .input-group input.login-button {
background-image: none;
border-radius: 0;
background-color: #187ec9;
width: 155px;
height: 30px;
}
#WikiaHeader .subnav {
box-shadow: none;
-webkit-box-shadow: none;
border: 0;
padding: 0;
}
#WikiaHeader .subnav.show {
top: 40px;
}
#WikiaHeader .subnav a:hover:not(.forgot-password) {
background-color: transparent !important;
color: white !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
#WikiaHeader .chevron {
display: none;
}
#WikiaHeader .avatar {
border: 0;
}
#WikiaHeader #WallNotificationsReminder {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-transform: skew(25deg);
-ms-transform: skew(25deg);
transform: skew(25deg);
border: 0;
border-radius: 0;
overflow: hidden;
background-color: #187ec9;
padding: 0 20px;
right: 30px;
}
#WikiaHeader #WallNotificationsReminder:hover {
background-color: #2c9ed7;
}
#WikiaHeader #WallNotificationsReminder a {
-webkit-transform: skew(-25deg);
-ms-transform: skew(-25deg);
transform: skew(-25deg);
display: block;
color: white;
padding: 10px 0;
}
#WikiaHeader #WallNotificationsReminder a:hover {
text-decoration: none;
}
/* *** FOOTER *** */
#WikiaBarWrapper {
background-color: #187ec9;
background-image: none;
box-shadow: none;
-webkit-box-shadow: none;
}
#WikiaBarWrapper .wikia-bar {
background-image: none;
}
#WikiaBarWrapper .arrow, .WikiaBarCollapseWrapper .wikia-bar-collapse {
-webkit-transform: skew(-25deg);
-ms-transform: skew(-25deg);
transform: skew(-25deg);
padding: 0 7px;
right: -7px;
position: relative;
background-image: none;
}
#WikiaBarWrapper .arrow:after, .WikiaBarCollapseWrapper .wikia-bar-collapse:after {
background-size: 12px;
background-image: url(//images.wikia.com/lmbtest/images/d/d3/WhiteMenuArrow.png);
background-repeat: no-repeat;
background-position: center;
content: "";
display: block;
background-color: transparent;
height: 25px;
width: 25px;
}
#WikiaBarWrapper .arrow:hover, .WikiaBarCollapseWrapper .wikia-bar-collapse:hover {
background-color: #2c9ed7;
}
#WikiaBarWrapper .arrow {
position: absolute;
}
#WikiaBarWrapper .arrow:after {
-webkit-transform: rotate(90deg) skewY(-25deg);
-ms-transform: rotate(90deg) skewY(-25deg);
transform: rotate(90deg) skewY(-25deg);
}
#WikiaBarWrapper .toolbar {
height: 100%;
padding: 0;
}
#WikiaBarWrapper .tools {
padding: 0 2px;
}
#WikiaBarWrapper .tools > li {
-webkit-transform: skew(-25deg);
-ms-transform: skew(-25deg);
transform: skew(-25deg);
height: 25px;
border: 0;
margin-top: 0;
line-height: 25px;
vertical-align: middle;
position: relative;
padding: 0 9px;
}
#WikiaBarWrapper .tools > li:hover {
background-color: #2c9ed7;
}
#WikiaBarWrapper .tools > li > a {
padding: 0 5px;
}
#WikiaBarWrapper .tools li.mytools a {
padding-right: 13px;
}
#WikiaBarWrapper .tools li.mytools:after {
-webkit-transform: skew(25deg);
-ms-transform: skew(25deg);
transform: skew(25deg);
content: "";
display: block;
position: absolute;
height: 8px;
width: 8px;
top: 9px;
background-size: 8px;
z-index: 6;
right: 2px;
background-image: url(//images.wikia.com/lmbtest/images/d/d3/WhiteMenuArrow.png);
margin-right: 8px;
}
#WikiaBarWrapper .tools a {
-webkit-transform: skew(25deg);
-ms-transform: skew(25deg);
transform: skew(25deg);
height: 100%;
display: inline-block;
}
#WikiaBarWrapper .tools a:hover {
text-decoration: none;
background-color: transparent;
}
#WikiaBarWrapper .tools-menu {
-webkit-transform: skew(25deg);
-ms-transform: skew(25deg);
transform: skew(25deg);
box-shadow: none;
-webkit-box-shadow: none;
right: auto !important;
left: -50% !important;
bottom: 25px;
border: 0px;
z-index: -1;
background-color: transparent;
margin-left: -5px;
width: 120px;
}
#WikiaBarWrapper .tools-menu li {
height: 30px;
padding: 0 10px;
border: 0;
width: 100%;
}
#WikiaBarWrapper .tools-menu a {
font-size: 12px;
color: white;
width: 100%;
padding: 0;
vertical-align: middle;
line-height: 30px;
padding-left: 10px;
}
#WikiaBarWrapper .gear, #WikiaBarWrapper .arrow-icon-ctr {
display: none;
}
.WikiaBarCollapseWrapper {
box-shadow: none;
-webkit-box-shadow: none;
background-image: none;
background-color: transparent;
right: 1px;
}
.WikiaBarCollapseWrapper .wikia-bar-collapse {
background-color: #187ec9;
}
.WikiaBarCollapseWrapper .wikia-bar-collapse:after {
-webkit-transform: rotate(-90deg) skewY(-25deg);
-ms-transform: rotate(-90deg) skewY(-25deg);
transform: rotate(-90deg) skewY(-25deg);
}
.popover.wikiaBar {
display: none !important;
}
/* *** Navbar *** */
#WikiaTopAds {
padding: 0;
}
#WikiHeader {
padding: 20px 10px 0 10px;
margin-bottom: 0;
height: 100%;
}
#WikiHeader .wordmark {
margin-bottom: 21px;
margin-top: 5px;
}
#WikiHeader .WikiNav {
margin-right: 44px;
right: -8px !important;
}
#WikiHeader .WikiNav .nav {
height: 35px;
}
#WikiHeader .WikiNav .nav .nav-item {
height: 100%;
border-bottom: 0;
line-height: 30px;
margin-right: 15px;
margin-left: 0 !important;
}
#WikiHeader .WikiNav .nav .nav-item.marked {
background-color: transparent;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
#WikiHeader .WikiNav .nav .nav-item.marked > a {
color: #3a3a3a;
cursor: pointer;
border-bottom: 5px solid #187ec9;
}
#WikiHeader .WikiNav .nav .nav-item a {
border: 0;
padding: 0 20px;
margin: 0;
font-size: 15px;
height: 100%;
}
#WikiHeader .WikiNav .nav .nav-item a:hover {
text-decoration: none;
}
#WikiHeader .WikiNav .nav .nav-item > a {
height: 30px;
}
#WikiHeader .WikiNav .nav .nav-item > a:hover {
border-bottom: 5px solid #2c9ed7;
}
#WikiHeader .subnav-2 {
height: 35px;
top: 35px;
margin-left: 8px;
width: 100%;
}
#WikiHeader .subnav-2 .subnav-2-item {
-webkit-transform: skew(25deg);
-ms-transform: skew(25deg);
transform: skew(25deg);
height: 100%;
line-height: 35px;
padding: 0 16px;
}
#WikiHeader .subnav-2 .subnav-2-item:hover {
background-color: #2c9ed7;
}
#WikiHeader .subnav-2 .subnav-2-item a.subnav-2a {
-webkit-transform: skew(-25deg);
-ms-transform: skew(-25deg);
transform: skew(-25deg);
padding: 0 5px;
}
#WikiHeader .subnav-2 .subnav-expandable a.subnav-2a {
padding-right: 14px;
}
#WikiHeader .subnav-2 .subnav-expandable a.subnav-2a:after {
content: "";
display: block;
position: absolute;
height: 10px;
width: 10px;
top: 13px;
background-size: 10px;
z-index: 6;
right: -1px;
background-image: url(//images.wikia.com/lmbtest/images/d/d3/WhiteMenuArrow.png);
}
#WikiHeader .marked2 .subnav-2a {
height: 100%;
background-color: transparent;
border-radius: 0;
color: white;
}
#WikiHeader .subnav-3 {
box-shadow: none;
-webkit-box-shadow: none;
-webkit-transform: skew(-25deg);
-ms-transform: skew(-25deg);
transform: skew(-25deg);
padding: 0;
margin: 0;
top: 35px !important;
border: 0;
left: -25px;
background-color: transparent;
-webkit-transform-origin: top left;
}
#WikiHeader .subnav-3 .subnav-3-item {
height: 35px;
}
#WikiHeader .subnav-3 .subnav-3-item a.subnav-3a {
line-height: 35px;
font-size: 14px;
}
#WikiHeader .subnav-3 .subnav-3-item a.subnav-3a:hover {
background-color: transparent;
}
#WikiHeader .navbackground {
-webkit-transform: skew(25deg);
-ms-transform: skew(25deg);
transform: skew(25deg);
box-shadow: 0 0 1px transparent;
-webkit-box-shadow: 0 0 1px transparent;
overflow: hidden;
margin: 0;
top: 35px;
height: 35px;
margin-left: 10px;
background-color: #187ec9;
padding-left: 20px;
left: -2px;
}
#WikiHeader .navbackground div, #WikiHeader .navbackground img {
display: none;
}
#WikiHeader .chevron {
display: none;
}
#WikiHeader .buttons {
top: 20px;
right: 16px;
}
#WikiHeader .buttons > .secondary {
background: none;
border-radius: 0;
border: 0;
font-size: 15px;
padding: 0 20px;
height: 30px;
line-height: 30px;
margin-left: 15px;
}
#WikiHeader .buttons > .secondary:hover {
border-bottom: 5px solid #fa9c20;
}
#WikiHeader .buttons > .secondary.active {
border-bottom: 5px solid #f08211;
}
#WikiHeader .buttons > .secondary img, #WikiHeader .buttons > .secondary .drop, #WikiHeader .buttons > .secondary .share-dot, #WikiHeader .buttons > .secondary .share-pixel {
display: none;
}
#WikiHeader .buttons > .secondary .WikiaMenuElement {
box-shadow: none;
-webkit-box-shadow: none;
background-color: transparent;
border: 0;
top: 34px;
width: 148px;
left: -50%;
margin-left: 38px;
}
#WikiHeader .buttons > .secondary .WikiaMenuElement li {
background-color: #f08211;
}
#WikiHeader .buttons > .secondary .WikiaMenuElement li:hover {
background-color: #fa9c20 !important;
}
#WikiHeader .buttons > .secondary .WikiaMenuElement li a:hover {
background-color: transparent !important;
}
#WikiHeader .buttons > .secondary.contribute {
padding-right: 25px;
}
#WikiHeader .buttons > .secondary.contribute:after {
content: "";
display: block;
position: absolute;
height: 10px;
width: 10px;
top: 10px;
background-size: 10px;
z-index: 6;
right: 12px;
background-image: url(//images.wikia.com/lmbtest/images/d/d3/WhiteMenuArrow.png);
background-image: url(//images.wikia.com/lmbtest/images/e/eb/BlackMenuArrow.png);
}
/* *** Rail *** */
#WikiaRail #WikiaSearch input {
border: 0;
}
/* a.wikia-button,
.wikia-single-button a,
.wikia-menu-button,
input[type="submit"],
input[type="reset"],
input[type="button"],
.button,
button {
background-image: none;
border-radius: 0 !important;
border: 0;
background: transparent;
height: 35px !important;
padding: 0 20px;
img {
display: none;
}
} */
/* *** Fluid *** */
@media screen and (max-width: 1023px) {
#WikiaBarWrapper .toolbar {
margin-left: 9px;
}
#WikiaBarWrapper .toolbar > ul > li:first-child .tools-menu {
margin-left: 11px;
}
#WikiaHeader #GlobalNavigation .topNav .subnav {
width: 748px;
}
#WikiaHeader #GlobalNavigation .topNav:nth-of-type(1) .subnav {
left: -110px;
}
#WikiaHeader #GlobalNavigation .topNav:nth-of-type(2) .subnav {
left: -256px;
}
#WikiaHeader #GlobalNavigation .topNav:nth-of-type(3) .subnav {
left: -404px;
}
#WikiaHeader #WallNotifications > li .subnav {
right: 0;
}
#WikiHeader {
padding-top: 0;
height: 180px;
}
#WikiHeader .WikiNav {
top: 85px;
}
#WikiHeader .buttons {
top: 85px;
}
#WikiHeader .WikiaMenuElement {
right: -9px;
left: auto !important;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment