MediaWiki:Common.css: различия между версиями

Материал из Ботвапедии
Перейти к: навигация, поиск
Строка 17: Строка 17:
 
}
 
}
  
/* == 10. Horizontal menu Background == */
 
  
/*====================
 
Color Scheme Begin
 
=====================================================================
 
====================================================================*/
 
  
/* Menu bar background color */
 
#navigation,
 
#nav li ul li,
 
#nav li ul li a{
 
background: #000;
 
}
 
  
/* Menu Item text color */
+
/* ================================================================
#nav li a,
+
This copyright notice must be kept untouched in the stylesheet at
#nav li a:hover,
+
all times.
#nav li ul li,
 
#nav li ul li a,
 
#nav li ul li a:hover  {
 
color: #fff;
 
}
 
  
/* Menu Item background color on hover */
+
The original version of this stylesheet and the associated (x)html
#nav li a:hover,
+
is available at http://www.stunicholls.com/menu/pro_drop_2.html
#nav li ul li a:hover  {
+
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
background: #FF8C00;
+
This stylesheet and the associated (x)html may be modified in any
}
+
way to fit your requirements.
 +
=================================================================== */
  
/* Text Shadow */
+
.preload1 {background: url(three_1.gif);}
#nav li a,
+
.preload2 {background: url(three_1a.gif);}
#nav li a:hover,
 
#nav li ul li a:hover  {
 
text-shadow: 0 1px 1px #333;  
 
}
 
  
/* Search form colors */
+
#nav {padding:0; margin:0; list-style:none; height:38px; background:#fff url(three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
.searchform input, .searchform input:not(:focus){
+
#nav li.top {display:block; float:left; height:38px;}
color:#B1B1B1; /*search form text color default*/
+
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(three_0.gif);}
background: #fff; /*search form background color default*/
+
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0.gif) right top no-repeat;}
}
+
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0a.gif) no-repeat right top;}
.searchfield:focus{
 
color: #000; /* search form text color after click */
 
}
 
  
/*=====================================================================
+
#nav li:hover a.top_link {color:#fff; background: url(three_1.gif) no-repeat;}
=======================================================================
+
#nav li:hover a.top_link span {background:url(three_1.gif) no-repeat right top;}
Color Scheme End
+
#nav li:hover a.top_link span.down {background:url(three_1a.gif) no-repeat right top;}
====================*/
 
  
#menu_div{
+
/* Default list styling */
clear: both;
 
position: relative;
 
top: 0;
 
left: 0;
 
} /* Free space to top specialy for menu */
 
  
#navigation {
+
#nav li:hover {position:relative; z-index:200;}
position: fixed;
 
}
 
  
#navigation, #menu_div {
+
#nav li:hover ul.sub
width: 100%;
+
{left:1px; top:38px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:90px; height:auto; z-index:300;}
margin: 0 !important;
+
#nav li:hover ul.sub li
padding: 0 !important;
+
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
}
+
#nav li:hover ul.sub li a
 +
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #bbd37e;}
 +
#nav li ul.sub li a.fly
 +
{background:#bbd37e url(arrow.gif) 80px 6px no-repeat;}
 +
#nav li:hover ul.sub li a:hover
 +
{background:#6a812c; color:#fff; border-color:#fff;}
 +
#nav li:hover ul.sub li a.fly:hover
 +
{background:#6a812c url(arrow_over.gif) 80px 6px no-repeat; color:#fff;}
  
#menu_div, #navigation, #menu, #nav{
 
height: 45px; /* menu height */
 
}
 
  
#menu_div:hover,
+
#nav li:hover li:hover ul,
#navigation:hover,
+
#nav li:hover li:hover li:hover ul,
#nav li a:hover, #nav li ul a
+
#nav li:hover li:hover li:hover li:hover ul,
{
+
#nav li:hover li:hover li:hover li:hover li:hover ul
opacity: 0.95;/* Menu transparency on mouse hover*/
+
{left:90px; top:-4px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:90px; z-index:400; height:auto;}
}  
 
  
#menu_div,
+
#nav ul,  
#navigation,  
+
#nav li:hover ul ul,
#nav li a,  
+
#nav li:hover li:hover ul ul,
#menu_div:not(:hover),  
+
#nav li:hover li:hover li:hover ul ul,
#navigation:not(:hover)
+
#nav li:hover li:hover li:hover li:hover ul ul
{
+
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
opacity: 0.8;/* Menu transparency on mouse out */
 
}
 
  
 +
#nav li:hover li:hover a.fly,
 +
#nav li:hover li:hover li:hover a.fly,
 +
#nav li:hover li:hover li:hover li:hover a.fly,
 +
#nav li:hover li:hover li:hover li:hover li:hover a.fly
 +
{background:#6a812c url(arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}
  
#menu {
+
#nav li:hover li:hover li a.fly,
width: 960px;
+
#nav li:hover li:hover li:hover li a.fly,
margin:0 auto; /*center the menu*/
+
#nav li:hover li:hover li:hover li:hover li a.fly
padding:0;
+
{background:#bbd37e url(arrow.gif) 80px 6px no-repeat; color:#000; border-color:#bbd37e;}
position: relative;
 
}
 
 
 
#nav{
 
width: 960px;
 
margin:0;
 
padding:0;
 
position: relative;
 
font-family: 'Arial', Helvetica, sans-serif;
 
}
 
 
 
#nav li a,#nav li {
 
float:left;
 
}
 
 
 
#nav li {
 
list-style:none;
 
position:relative;
 
}
 
 
 
#nav li a {
 
line-height: 45px;
 
padding:0 15px;
 
text-decoration:none;
 
margin:0;
 
font-size:12px;
 
font-weight:700;
 
text-transform:uppercase;
 
}
 
 
 
/*====================
 
Submenu
 
=====================*/
 
#nav li ul {
 
display:none;
 
position:absolute;
 
left:0;
 
top:100%;
 
padding:0;
 
margin:0;
 
} /* hide submenu */
 
 
 
#nav li:hover > ul {
 
display:block;
 
} /* show submenu on hover */
 
 
 
#nav li ul li,#nav li ul li a {
 
float:none;
 
height: 35px; /* submenu item height */
 
min-width: 150px; /* submenu item minimal width */
 
line-height: 35px;
 
border-right: 0;
 
text-shadow: none;
 
display:block;
 
font-size:13px;
 
font-weight:400;
 
text-transform:inherit;
 
} /* Submenu item */
 
 
 
#nav li ul li {
 
_display:inline; /* for IE */
 
}
 
 
 
/* == 12. Sub-Sub Menu == */
 
#nav li ul li ul {
 
display:none;
 
}
 
 
 
#nav li ul li:hover ul {
 
left:100%;
 
top:0;
 
}
 
 
 
/*====================
 
Search form
 
====================*/
 
 
 
.searchform {
 
position: absolute;
 
right: 15px;
 
top: 6px;
 
display: inline-block;
 
zoom: 1;
 
*display: inline;
 
border: 0;
 
padding: 0;
 
}
 
.searchform input {
 
font: normal 12px/100% Arial, Helvetica, sans-serif;
 
}
 
.searchform .searchfield {
 
height: 27px;
 
line-height: 27px;
 
padding-left: 10px;
 
padding-right: 10px;
 
width: 150px;
 
border: 2px solid #333;
 
outline: none;
 
-webkit-border-radius: 2em;
 
-moz-border-radius: 2em;
 
border-radius: 2em;
 
-moz-box-shadow: inset 1px 1px 2px #A1A1A1;
 
-webkit-box-shadow: inset 1px 1px 2px #A1A1A1;
 
box-shadow: inner 1px 1px 2px #A1A1A1;
 
}
 
 
 
.searchfield:focus{
 
font-weight: 700;
 
width: 220px;
 
}
 
 
 
.searchfield:not(:focus){
 
width: 150px;
 
}
 
 
 
 
 
/*========================
 
Transitions
 
========================*/
 
 
 
#nav li a:hover,
 
#nav li ul li a:hover  {
 
-webkit-transition-property:color, background;
 
-webkit-transition-duration: 0.5s, 0.5s;
 
-webkit-transition-timing-function: linear, ease-out;
 
}
 
 
 
.searchfield:focus,
 
.searchfield:not(:focus){
 
-webkit-transition-property:width;
 
-webkit-transition-duration: 0.5s, 0.5s;
 
-webkit-transition-timing-function: linear, ease-out;
 
}
 
 
 
#menu_div:hover,
 
#navigation:hover,
 
#nav li ul a,
 
#menu_div,
 
#navigation,
 
#nav li a,
 
#menu_div:not(:hover),
 
#navigation:not(:hover)
 
{
 
-webkit-transition-property:opacity;  
 
-webkit-transition-duration: 0.5s, 0.5s; /* duration in seconds */
 
-webkit-transition-timing-function: linear, ease-out;
 
} /* Menu transparency animation */
 

Версия 10:05, 23 сентября 2013

/** Collapsible tables *********************************************************
 *
 *  Description: Allows tables to be collapsed, showing only the header. See
 *                         http://www.mediawiki.org/wiki/Manual:Collapsible_tables.
 *  Maintainers: [[en:User:R. Koot]]
 */
 
table.collapsed tr.collapsible {
        display: none;
}
 
.collapseButton {               /* 'show'/'hide' buttons created dynamically by the             */
        float: right;           /* CollapsibleTables JavaScript in [[MediaWiki:Common.js]] */
        font-weight: normal;    /* are styled here so they can be customised.             */
        text-align: right;
        width: auto;
}




/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/pro_drop_2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.preload1 {background: url(three_1.gif);}
.preload2 {background: url(three_1a.gif);}

#nav {padding:0; margin:0; list-style:none; height:38px; background:#fff url(three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left; height:38px;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#fff; background: url(three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(three_1a.gif) no-repeat right top;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{left:1px; top:38px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #bbd37e;}
#nav li ul.sub li a.fly
{background:#bbd37e url(arrow.gif) 80px 6px no-repeat;}
#nav li:hover ul.sub li a:hover 
{background:#6a812c; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#6a812c url(arrow_over.gif) 80px 6px no-repeat; color:#fff;}


#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:90px; z-index:400; height:auto;}

#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#6a812c url(arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;} 

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#bbd37e url(arrow.gif) 80px 6px no-repeat; color:#000; border-color:#bbd37e;}