Pathfinder Online Wiki
Log in

Difference between revisions of "MediaWiki:Common.css"

From Pathfinder Online Wiki
Line 6: Line 6:
 
   { display:none; }
 
   { display:none; }
  
/*Ensure that the Sitenotice is above the body content*/
+
/*Main Line Not Just Link Margin - From left Side*/
 +
ul#nav{
 +
margin:3;
 +
padding:2;
 +
list-style-type:none;
 +
border:none;
 +
background:#fff;
 +
padding:.5em;
 +
width:auto;
 +
}
 +
/*Drop Menu Line Colors that "flash" to load Menu*/
 +
ul#nav li ul{
 +
background:#fff;
 +
margin:0;
 +
padding:5;
 +
width:auto;
 +
}
 +
ul#nav li{
 +
position:relative;
 +
margin:5;
 +
width:auto;
 +
padding:5;
 +
list-style-type:none;
 +
background:333;
 +
color:#333;
 +
line-height:150%;
 +
}
 +
/*Main Link Font Color and "loading border" set to fff for invisibility*/
 +
ul#nav a{
 +
border:1px solid #fff;
 +
color:#333;
 +
text-decoration:none;
 +
display:block;
 +
}
 +
/*Mouse over option text color*/
 +
ul#nav a:hover{
 +
border:1px inset #333;
 +
background:#333;
 +
color:#333;
 +
}
 +
/*Color of Text option drop down without mouse on them.*/
 +
ul#nav li li a{
 +
padding-left:1em;
 +
color:#006AFF;
 +
text-decoration:none;
 +
display:block;
 +
}
 +
ul#nav li li a:hover{
 +
background:#cef;
 +
}
  
#bodyContent {
+
/* DDM relative dropdown example */
z-index: 98;
+
.hiddenChild{
 +
position: absolute;
 +
left: -999em;
 +
}
 +
.shownChild{
 +
left:-1px;
 +
}
 +
p{
 +
clear:both;float:none;
 +
}
 +
/*Parent initial border information white fff set to hide "optional options area"*/
 +
ul#nav.dhtml{
 +
list-style-image: none;
 +
display: block;
 +
position:relative;
 +
width:auto;
 +
border:2px solid #fff;
 +
background:#333
 +
margin:2;
 +
padding:2;
 +
list-style-type:none;
 +
height:1.5em;
 +
}
 +
/*WIDTH IS TOP OPTION WIDTH. (OPTION WIDTH - 1)*/
 +
ul#nav.dhtml li{
 +
position:relative;
 +
float:left;
 +
width:9em;
 +
border-right:1px solid #333;
 +
border-top:1px solid #333;
 +
border-left:1px solid #333;
 +
border-bottom:1px solid #333;
 +
}
 +
/*Initial background color of options with mouse hovered over main link*/
 +
ul#nav.dhtml ul{
 +
list-style-image: none;
 +
display: block;
 +
top:1.5em;
 +
position:absolute;
 +
border-top:1px solid #333;
 +
border-right:1px solid #333;
 +
border-left:1px solid #333;
 +
background:#333;
 +
width:auto;
 +
z-index:10;
 +
}
 +
ul#nav.dhtml li a,ul#nav.dhtml li a:hover{
 +
border:none;
 +
background:#333;
 +
}
 +
ul#nav.dhtml li a{
 +
padding:0 .5em;
 +
background:#333;
 +
}
 +
/*Options background color when main category is highlighted with mouse and options not selected WIDTH IS OPTIONS WIDTH*/
 +
ul#nav.dhtml ul li{
 +
border:none;
 +
width:9em;
 +
background:#fff;
 
}
 
}
#siteNotice {
+
/*No Mouse On Main Link Background*/
z-index: 99;
+
ul#nav.dhtml li.isParent{
 +
background:#cef;
 
}
 
}
 
+
/*Yes Mouse On Main Link Background*/
/* START DROP DOWN MENUS */
+
ul#nav.dhtml li.isActive{
/* http://www.mediawiki.org/wiki/Extension:CSS_Dropdowns#Adding_it_to_your_site */
+
background:#fff;
 
+
}
div#siteNotice {
+
ul#nav.dhtml li.isActive a{
        width:100%;     /* makes the entire box full width */
+
background:cef;
        float:left; /*makes the  entire box  enclose the list */
+
}
        font-size:1.3em; /* SET FONT-SIZE HERE */
+
ul#nav.dhtml li.isActive ul a{
        background-color:#CFCFCF; /* colors the background  behind the box*/
+
padding:0 .5em;
a:link {color: #FFFFFF;} /* FFFFFF = COLOR WHITE */
 
        background:#930B00; /*  BACKGROUND COLORS FOR ENTIRE BOX 930B00 = DARK RED */
 
        margin:7px -2px -2px -2px;
 
        padding:0;    
 
 
}
 
}
div#siteNotice li {
+
ul#nav.dhtml a:hover{
        float:left;    /* Causes the list to align horizontally instead of stack */
+
background:#333;
        position:relative; /* positioning context for the absolutely positioned drop-down */
 
        list-style-type:none;  /* removes the bullet off each list item */
 
        background-color:#930B00; /*sets the background of the menu items */
 
 
 
        margin: -4px 0 0 0; /*Brings the menu items up */   
 
        padding:0 6px; /*creates space each side of menu item's text */
 
 
}
 
}
div#siteNotice li:first-child {
+
ul#nav.dhtml li.isParent a:hover{
        -moz-border-radius-topleft: .5em;
+
background:#333;
        padding-bottom:1px; /*to fix from rounded edge */
 
        border-top-left-radius: .5em;
 
        }
 
div#siteNotice li:last-child {
 
        -moz-border-radius-topright: .5em;
 
        border-top-right-radius: .5em;
 
        padding-bottom:1px; /*to fix from rounded edge */
 
        }
 
div#siteNotice li:hover {  
 
        background-color:#202020; /*Background of the menu items when hovered over #202020 = DARK GRAY */
 
        }
 
div#siteNotice a {
 
        display:block; /*makes list items in drop down highlight and wrapped lines indent correctly */
 
        color:#FFF;  /* LINK TEXT color #FFF = WHITE */
 
        text-decoration: none;    /* removes underline */
 
        }
 
 
 
/* the horizontal menu ends here */
 
/* the drop-down starts here */
 
div#siteNotice ul li ul {
 
        margin:0; /* prevents the TEMP value inheriting from the horizontal menu  */
 
        position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
 
        width:10em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/
 
        left:-1px; /*aligns the drop exactly under the menu */
 
        }
 
div#siteNotice ul li ul li {
 
        margin: -1px 0 0 0; /* prevents the margin value inheriting from the horiz menu + bring menu items up  */
 
        width:100%; /* makes the list items fill the list container (ul) */
 
       
 
        list-style-type:none;  /* removes the bullet off each list item */
 
        list-style-image:none;  /* removes the bullet off each list item */
 
        padding:0 0 1px;
 
        -moz-border-radius-topright: 0;
 
        -moz-border-radius-topleft: 0;
 
        -moz-border-radius-bottomright: 0;
 
        -moz-border-radius-bottomleft: 0;
 
        border-bottom-right-radius: 0;
 
        border-bottom-left-radius: 0;
 
        border-top-left-radius: 0;
 
        border-top-right-radius: 0;
 
        }
 
div#siteNotice ul li ul li:last-child {
 
        -moz-border-radius-bottomright: 1em;
 
        -moz-border-radius-bottomleft: 1em;
 
        -moz-border-radius-topleft: 0; 
 
        -moz-border-radius-topright: 0;
 
        border-bottom-right-radius: 1em;
 
        border-bottom-left-radius: 1em;
 
        border-top-left-radius: 0;
 
        border-top-right-radius: 0;
 
        padding-right:1px; /*to fix from rounded edge */
 
 
}
 
}
div#siteNotice ul li ul li:first-child {
+
ul#nav.dhtml li.isActive ul a:hover{
        /* REMOVED border-top:1px solid #069; /*the top edge of the dropdown #069 = DARK BLUE http://www.color-hex.com/color/006699 */ */
+
background:#333;
        -moz-border-radius-topleft: 0; 
 
        border-top-left-radius: 0;
 
 
}
 
}
/* make the drop-down display as the menu is rolled over */
+
/* End of Drop Down Formatting */
 
 
div#siteNotice ul li ul {display:none;} /* conceals the drop-down when menu not hovered */
 
 
 
div#siteNotice ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */
 
 
 
/* pop-out starts here */
 
body div#siteNotice ul li ul li ul  {
 
        visibility:hidden; /* same effect as display:none in this situation */
 
        top:-1px;
 
        left:10em;
 
        }
 
div#siteNoticeul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */
 
 
 
/* second level popouts start here*/
 
 
 
div#siteNotice ul li ul li:hover ul li ul {visibility:hidden;}
 
 
 
div#siteNotice ul li ul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */
 
 
 
 
 
/* third level popouts start here
 
I haven't tested this */
 
 
 
div#siteNotice ul li ul li ul li:hover ul li ul {visibility:hidden;}
 
 
 
div#siteNotice ul li ul li ul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */
 
 
 
/* THE HACK ZONE - */
 
 
 
/* hack for IE (all flavors) so the menu has a vertical line on the left */
 
 
 
* html div#siteNotice ul {
 
        float:left; /* makes the ul wrap the li's */
 
        }
 
/* add a top line to drops and pops in IE browsers - can't read :first-child */
 
 
 
* html  div#siteNotice ul li ul {
 
        border-left:0px; /* stops the drop inheriting the ul border */
 
        }
 
/* the Tantek hack to feed IE Win 5.5-5.0 a lower value to get the pop-out to touch the drop-down */
 
 
 
* html  div#siteNotice ul li ul li ul {
 
  left:9.85em;
 
  voice-family: "\"}\"";
 
  voice-family:inherit;
 
  left:10em;
 
  }
 
/* and the "be nice to Opera" rule */
 
html>body div#siteNotice ul li ul li ul {
 
  left:10em;
 
  }
 
 
 
 
 
/* an Opera-only hack to fix a redraw problem by invisibly extending the ul */
 
/* the first-level drop stays open for 100px below the bottom but at least it works */
 
/* this can be reduced to as little as 22px if you don't have pop-outs */
 
/* the pop-out menu stays open for 22px below the bottom but at least it works
 
 
 
Not Tested!! */
 
        @media all and (min-width: 0px){
 
  body div#siteNotice ul li ul {padding-bottom:200px;}
 
  body div#siteNotice ul li ul li ul {padding-bottom:22px;}
 
  body div#siteNotice ul li ul li ul li ul li:hover {visibility:visible;} /* same effect as display:block in this situation */
 
  }
 
 
 
/*end Opera hack */
 
 
 
/* end of hack zone */
 
 
 
/* END OF LIST-BASED MENU */
 
 
 
 
 
/* finally after feeding values to all others, we deal with MAc5 IE */
 
/* IE5 Mac can't do drop-downs so we need to present the info in a different way*/
 
/* we present the drop down choices in a row and never show any second-level drops */
 
/* this stylesheet is read by IE5 Mac only - hack omits 'url' and leave no space between @import and (" 
 
Not Tested!!*/
 
@import("/wiki/skins/common/dropdown/ie51_menu_hack.css");
 
/* END OF DROP DOWN MENUS */
 

Revision as of 00:53, 16 October 2014

/* CSS placed here will be applied to all skins */

/* Hide page names of Main Page and other Portals */

body.page-Main_Page h1.firstHeading
  { display:none; }

/*Main Line Not Just Link Margin - From left Side*/
ul#nav{
margin:3;
padding:2;
list-style-type:none;
border:none;
background:#fff;
padding:.5em;
width:auto;
}
/*Drop Menu Line Colors that "flash" to load Menu*/
ul#nav li ul{
background:#fff;
margin:0;
padding:5;
width:auto;
}
ul#nav li{
position:relative;
margin:5;
width:auto;
padding:5;
list-style-type:none;
background:333;
color:#333;
line-height:150%;
}
/*Main Link Font Color and "loading border" set to fff for invisibility*/
ul#nav a{
border:1px solid #fff;
color:#333;
text-decoration:none;
display:block;
}
/*Mouse over option text color*/
ul#nav a:hover{
border:1px inset #333;
background:#333;
color:#333;
}
/*Color of Text option drop down without mouse on them.*/
ul#nav li li a{
padding-left:1em;
color:#006AFF;
text-decoration:none;
display:block;
}
ul#nav li li a:hover{
background:#cef;
}

/* DDM relative dropdown example */
.hiddenChild{
position: absolute;
left: -999em;
}
.shownChild{
left:-1px;
}
p{
clear:both;float:none;
}
/*Parent initial border information white fff set to hide "optional options area"*/
ul#nav.dhtml{
list-style-image: none;
display: block;
position:relative;
width:auto;
border:2px solid #fff;
background:#333
margin:2;
padding:2;
list-style-type:none;
height:1.5em;
}
/*WIDTH IS TOP OPTION WIDTH. (OPTION WIDTH - 1)*/
ul#nav.dhtml li{
position:relative;
float:left;
width:9em;
border-right:1px solid #333;
border-top:1px solid #333;
border-left:1px solid #333;
border-bottom:1px solid #333;
}
/*Initial background color of options with mouse hovered over main link*/
ul#nav.dhtml ul{
list-style-image: none;
display: block;
top:1.5em;
position:absolute;
border-top:1px solid #333;
border-right:1px solid #333;
border-left:1px solid #333;
background:#333;
width:auto;
z-index:10;
}
ul#nav.dhtml li a,ul#nav.dhtml li a:hover{
border:none;
background:#333;
}
ul#nav.dhtml li a{
padding:0 .5em;
background:#333;
}
/*Options background color when main category is highlighted with mouse and options not selected WIDTH IS OPTIONS WIDTH*/
ul#nav.dhtml ul li{
border:none;
width:9em;
background:#fff;
}
/*No Mouse On Main Link Background*/
ul#nav.dhtml li.isParent{
background:#cef;
}
/*Yes Mouse On Main Link Background*/
ul#nav.dhtml li.isActive{
background:#fff;
}
ul#nav.dhtml li.isActive a{
background:cef;
}
ul#nav.dhtml li.isActive ul a{
padding:0 .5em;
}
ul#nav.dhtml a:hover{
background:#333;
}
ul#nav.dhtml li.isParent a:hover{
background:#333;
}
ul#nav.dhtml li.isActive ul a:hover{
background:#333;
}
/* End of Drop Down Formatting */