MediaWiki:Common.css: различия между версиями
Строка 76: | Строка 76: | ||
margin: 2px 0; | margin: 2px 0; | ||
opacity: 0.6; | opacity: 0.6; | ||
− | } | + | } |
+ | |||
.addthis_toolbox .custom_images | .addthis_toolbox .custom_images | ||
a:hover img { | a:hover img { | ||
margin: 2px 0; | margin: 2px 0; | ||
opacity: 1.0; | opacity: 1.0; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*Меню*/ | ||
+ | |||
+ | /*************************** Основные пункты */ | ||
+ | #mainmenu{ | ||
+ | position:relative; | ||
+ | border: 1px solid #222; | ||
+ | background-color: #111; | ||
+ | background-image: -moz-linear-gradient(#444, #111); | ||
+ | background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); | ||
+ | background-image: -webkit-linear-gradient(#444, #111); | ||
+ | background-image: -o-linear-gradient(#444, #111); | ||
+ | background-image: -ms-linear-gradient(#444, #111); | ||
+ | background-image: linear-gradient(#444, #111); | ||
+ | border-radius: 6px; | ||
+ | -moz-border-radius: 6px; | ||
+ | -o-border-radius: 6px; | ||
+ | -webkit-border-radius: 6px; | ||
+ | -ms-border-radius: 6px; | ||
+ | box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; | ||
+ | -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; | ||
+ | -o-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; | ||
+ | -ms-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; | ||
+ | -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; | ||
+ | height:40px; | ||
+ | margin:50px auto; | ||
+ | padding:0; | ||
+ | width:960px; | ||
+ | z-index:10; /* для отображения подпунктов поверх остальных блоков */ | ||
+ | } | ||
+ | #mainmenu ul, /* сбрасываем поля и отступы у списков */ | ||
+ | #mainmenu ul ul { | ||
+ | list-style:none; | ||
+ | padding:0; | ||
+ | margin:0; | ||
+ | } | ||
+ | #mainmenu ul { | ||
+ | clear:left; | ||
+ | position:relative; | ||
+ | right:50%; | ||
+ | height:40px; | ||
+ | float:right; | ||
+ | text-align:center; | ||
+ | font:12px Arial, Helvetica, sans-serif; | ||
+ | text-transform:uppercase; | ||
+ | } | ||
+ | #mainmenu ul li { | ||
+ | border-right: 1px solid #222; | ||
+ | box-shadow: 1px 0 0 #444; | ||
+ | -moz-box-shadow: 1px 0 0 #444; | ||
+ | -o-box-shadow: 1px 0 0 #444; | ||
+ | -ms-box-shadow: 1px 0 0 #444; | ||
+ | -webkit-box-shadow: 1px 0 0 #444; | ||
+ | position:relative; | ||
+ | left:50%; | ||
+ | float:left; | ||
+ | height:40px; | ||
+ | padding:0; | ||
+ | margin:0; | ||
+ | } | ||
+ | #mainmenu ul li:last-child { | ||
+ | border:none; | ||
+ | box-shadow:none; | ||
+ | } | ||
+ | #mainmenu ul li a { | ||
+ | display:block; | ||
+ | color: #ccc; | ||
+ | text-decoration: none; | ||
+ | padding:13px 20px; | ||
+ | } | ||
+ | #mainmenu ul li a:hover { | ||
+ | background-color: #0186BA; | ||
+ | background-image: -moz-linear-gradient(#04acec, #0186ba); | ||
+ | background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); | ||
+ | background-image: -webkit-linear-gradient(#04acec, #0186ba); | ||
+ | background-image: -o-linear-gradient(#04acec, #0186ba); | ||
+ | background-image: -ms-linear-gradient(#04acec, #0186ba); | ||
+ | background-image: linear-gradient(#04acec, #0186ba); | ||
+ | color: #fafafa; | ||
+ | } | ||
+ | #mainmenu ul li:hover > ul { | ||
+ | opacity: 1; | ||
+ | visibility: visible; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | /*************************** Выпадающие подпункты */ | ||
+ | #mainmenu ul li ul { | ||
+ | background: #444; | ||
+ | background: -moz-linear-gradient(#444, #111); | ||
+ | background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); | ||
+ | background: -webkit-linear-gradient(#444, #111); | ||
+ | background: -o-linear-gradient(#444, #111); | ||
+ | background: -ms-linear-gradient(#444, #111); | ||
+ | background: linear-gradient(#444, #111); | ||
+ | border-radius: 3px; | ||
+ | -moz-border-radius: 3px; | ||
+ | -o-border-radius: 3px; | ||
+ | -ms-border-radius: 3px; | ||
+ | -webkit-border-radius: 3px; | ||
+ | transition: all .2s ease-in-out; | ||
+ | -webkit-transition: all .2s ease-in-out; | ||
+ | -moz-transition: all .2s ease-in-out; | ||
+ | -ms-transition: all .2s ease-in-out; | ||
+ | -o-transition: all .2s ease-in-out; | ||
+ | text-transform:none; | ||
+ | opacity: 0; | ||
+ | visibility: hidden; | ||
+ | position:absolute; | ||
+ | left:0; | ||
+ | top:40px; | ||
+ | font-size:12px; | ||
+ | height:auto; | ||
+ | width:150px; | ||
+ | } | ||
+ | #mainmenu ul li ul li { | ||
+ | border:none; | ||
+ | box-shadow: 0 1px 0 #111, 0 2px 0 #666; | ||
+ | -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666; | ||
+ | -o-box-shadow: 0 1px 0 #111, 0 2px 0 #666; | ||
+ | -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666; | ||
+ | -ms-box-shadow: 0 1px 0 #111, 0 2px 0 #666; | ||
+ | position:relative; | ||
+ | left:0; | ||
+ | float:none; | ||
+ | height:auto; | ||
+ | margin:0; | ||
+ | text-align:left !important; | ||
+ | } | ||
+ | #mainmenu ul li ul li:last-child { | ||
+ | -moz-box-shadow: none; | ||
+ | -webkit-box-shadow: none; | ||
+ | box-shadow: none; | ||
+ | } | ||
+ | #mainmenu ul li ul li a { | ||
+ | padding:10px 8px; | ||
+ | border:none; | ||
+ | } | ||
+ | |||
+ | /*************************** Выпадающие пункты второго уровня */ | ||
+ | #mainmenu ul li ul li ul { | ||
+ | top: 0; | ||
+ | left: 150px; | ||
+ | margin: 0 0 0 20px; | ||
+ | _margin: 0; /*IE6 only*/ | ||
+ | box-shadow: -1px 0 0 rgba(255,255,255,.3); | ||
+ | -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3); | ||
+ | -o-box-shadow: -1px 0 0 rgba(255,255,255,.3); | ||
+ | -ms-box-shadow: -1px 0 0 rgba(255,255,255,.3); | ||
+ | -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3); | ||
+ | } | ||
+ | |||
+ | /*********************** Стрелочки на подпунктах */ | ||
+ | #mainmenu ul ul li:first-child > a { | ||
+ | border-radius: 3px 3px 0 0; | ||
+ | -moz-border-radius: 3px 3px 0 0; | ||
+ | -o-border-radius: 3px 3px 0 0; | ||
+ | -ms-border-radius: 3px 3px 0 0; | ||
+ | -webkit-border-radius: 3px 3px 0 0; | ||
+ | } | ||
+ | #mainmenu ul ul li:first-child > a:after { | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | left: 40px; | ||
+ | top: -6px; | ||
+ | border-left: 6px solid transparent; | ||
+ | border-right: 6px solid transparent; | ||
+ | border-bottom: 6px solid #444; | ||
+ | } | ||
+ | #mainmenu ul ul ul li:first-child a:after { | ||
+ | left: -6px; | ||
+ | top: 50%; | ||
+ | margin-top: -6px; | ||
+ | border-left: 0; | ||
+ | border-bottom: 6px solid transparent; | ||
+ | border-top: 6px solid transparent; | ||
+ | border-right: 6px solid #3b3b3b; | ||
+ | } | ||
+ | #mainmenu ul ul li:first-child a:hover:after { | ||
+ | border-bottom-color: #04acec; | ||
+ | } | ||
+ | |||
+ | #mainmenu ul ul ul li:first-child a:hover:after { | ||
+ | border-right-color: #0299d3; | ||
+ | border-bottom-color: transparent; | ||
+ | } | ||
+ | #mainmenu ul ul li:last-child > a { | ||
+ | -moz-border-radius: 0 0 3px 3px; | ||
+ | -webkit-border-radius: 0 0 3px 3px; | ||
+ | border-radius: 0 0 3px 3px; | ||
} | } |
Версия 11:17, 13 октября 2013
/* CSS @Invisible_man*/ table.collapsed tr.collapsible { display: none; } .collapseButton { cursor: pointer; } h1 { /* Заголовок 1 */ color: #8D673A; /*Цвет*/ text-shadow: 0 0 5px #CDAA80, 0 0 10px #CDAA80, 0 0 20px #CDAA80, 0 0 30px #CDAA80, 0 0 40px #CDAA80; /* Расплывающаяся тень */ } h2 { color: #8D673A; text-shadow: 0 0 2px #CDAA80, 0 0 5px #CDAA80, 0 0 10px #CDAA80, 0 0 15px #CDAA80, 0 0 20px #CDAA80; } h3 { color: #8D673A; text-shadow: 0 0 1px #CDAA80, 0 0 2px #CDAA80, 0 0 5px #CDAA80, 0 0 7px #CDAA80, 0 0 10px #CDAA80; } h4 { color: #8D673A; text-shadow: 0 0 1px #CDAA80, 0 0 1px #CDAA80, 0 0 2px #CDAA80, 0 0 3px #CDAA80, 0 0 5px #CDAA80; } h5 { color: #8D673A; text-shadow: 0 0 1px #CDAA80, 0 0 1px #CDAA80, 0 0 1px #CDAA80, 0 0 2px #CDAA80, 0 0 3px #CDAA80; } /* Верхрнее меню */ .addthis_toolbox { position: fixed; /*Фиксированно на экране*/ z-index: 1000; /*Окошко всегда будет на переднем плане*/ top: 2px; /*Отступы*/ left: 15%; padding: 5px; width: 600px; height: 90px; opacity: 0.8; /*Прозрачность*/ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); /*IE 5.5+*/ -moz-opacity: 0.8; /* Mozilla 1.6 и ниже */ html-opacity: 0.8; /* Konqueror 3.1, Safari 1.1 */ background-image: url(https://wiki.botva.ru/images/4/43/Fon_2.png); /*Фон*/ background-position: 0px 0px; background-size: 600px; background-repeat: no-repeat; } .addthis_toolbox .custom_images a { width: 32px; height: 32px; cursor: pointer; } .addthis_toolbox .custom_images a img { border: 0; margin: 2px 0; opacity: 0.6; } .addthis_toolbox .custom_images a:hover img { margin: 2px 0; opacity: 1.0; } /*Меню*/ /*************************** Основные пункты */ #mainmenu{ position:relative; border: 1px solid #222; background-color: #111; background-image: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background-image: -webkit-linear-gradient(#444, #111); background-image: -o-linear-gradient(#444, #111); background-image: -ms-linear-gradient(#444, #111); background-image: linear-gradient(#444, #111); border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -webkit-border-radius: 6px; -ms-border-radius: 6px; box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; -o-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; -ms-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; height:40px; margin:50px auto; padding:0; width:960px; z-index:10; /* для отображения подпунктов поверх остальных блоков */ } #mainmenu ul, /* сбрасываем поля и отступы у списков */ #mainmenu ul ul { list-style:none; padding:0; margin:0; } #mainmenu ul { clear:left; position:relative; right:50%; height:40px; float:right; text-align:center; font:12px Arial, Helvetica, sans-serif; text-transform:uppercase; } #mainmenu ul li { border-right: 1px solid #222; box-shadow: 1px 0 0 #444; -moz-box-shadow: 1px 0 0 #444; -o-box-shadow: 1px 0 0 #444; -ms-box-shadow: 1px 0 0 #444; -webkit-box-shadow: 1px 0 0 #444; position:relative; left:50%; float:left; height:40px; padding:0; margin:0; } #mainmenu ul li:last-child { border:none; box-shadow:none; } #mainmenu ul li a { display:block; color: #ccc; text-decoration: none; padding:13px 20px; } #mainmenu ul li a:hover { background-color: #0186BA; background-image: -moz-linear-gradient(#04acec, #0186ba); background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); background-image: -webkit-linear-gradient(#04acec, #0186ba); background-image: -o-linear-gradient(#04acec, #0186ba); background-image: -ms-linear-gradient(#04acec, #0186ba); background-image: linear-gradient(#04acec, #0186ba); color: #fafafa; } #mainmenu ul li:hover > ul { opacity: 1; visibility: visible; margin: 0; } /*************************** Выпадающие подпункты */ #mainmenu ul li ul { background: #444; background: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -webkit-border-radius: 3px; transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; text-transform:none; opacity: 0; visibility: hidden; position:absolute; left:0; top:40px; font-size:12px; height:auto; width:150px; } #mainmenu ul li ul li { border:none; box-shadow: 0 1px 0 #111, 0 2px 0 #666; -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666; -o-box-shadow: 0 1px 0 #111, 0 2px 0 #666; -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666; -ms-box-shadow: 0 1px 0 #111, 0 2px 0 #666; position:relative; left:0; float:none; height:auto; margin:0; text-align:left !important; } #mainmenu ul li ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #mainmenu ul li ul li a { padding:10px 8px; border:none; } /*************************** Выпадающие пункты второго уровня */ #mainmenu ul li ul li ul { top: 0; left: 150px; margin: 0 0 0 20px; _margin: 0; /*IE6 only*/ box-shadow: -1px 0 0 rgba(255,255,255,.3); -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3); -o-box-shadow: -1px 0 0 rgba(255,255,255,.3); -ms-box-shadow: -1px 0 0 rgba(255,255,255,.3); -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3); } /*********************** Стрелочки на подпунктах */ #mainmenu ul ul li:first-child > a { border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -o-border-radius: 3px 3px 0 0; -ms-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; } #mainmenu ul ul li:first-child > a:after { content: ''; position: absolute; left: 40px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #444; } #mainmenu ul ul ul li:first-child a:after { left: -6px; top: 50%; margin-top: -6px; border-left: 0; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid #3b3b3b; } #mainmenu ul ul li:first-child a:hover:after { border-bottom-color: #04acec; } #mainmenu ul ul ul li:first-child a:hover:after { border-right-color: #0299d3; border-bottom-color: transparent; } #mainmenu ul ul li:last-child > a { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; }