/* AnythingSlider v1Видео-галерея на замену неработающего MorphVideo.8+ Minimalist Square theme By Rob Garrison*Используется слайдер [http://***************************** SET DEFAULT DIMENSIONS HERE *****************************kenwheeler.github.io/slick/* change the ID & dimensions to match your slider */#slider { width: 700px; height: 390px; list-style: none; /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */ overflow-y: auto; overflow-x: hidden;}slick].
/****************** SET STYLING HERE ****************** ================================= Default state (no keyboard focus) ==================================*//* Overall Wrapper */.anythingSlider-minimalist-square { marginПодключается с помощью [[Special:Gadgets|гаджетов]]: 0 auto; /* 30px right & left padding for the navigation arrows */ padding[[MediaWiki: 0 30px;}/* slider window Gadget- top & bottom bordersSlick.js]], default state */.anythingSlider-minimalist[[MediaWiki:Gadget-square SlickInit.anythingWindow { border-topjs]], [[MediaWiki: 3px solid #333; borderGadget-bottom: 3px solid #333;}/* Navigation buttons + start/stop buttonSlickTheme.css]], default state */.anythingSlider-minimalist-square .anythingControls a { background-color: #333; color: #fff; border[[MediaWiki: #000 1px solid;}/* Navigation current button, default state */.anythingSlider-minimalistGadget-square .anythingControls aSlick.cur,css]].anythingSlider-minimalist-square .anythingControls a:hover { background-color: #777; color: #000;}
/* start-stop button, stopped, default state */.anythingSlider-minimalist-square .anythingControls a.start-stop { background: #040; color: #ddd; /* top shadow */ -moz-box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0Галерея создается оборачиванием контента в тег <nowiki><div class="slick">.5); -webkit-box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5); box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5);}</* start-stop button, playing, default state *div></.anythingSlider-minimalist-square .anythingControls a.start-stopnowiki>.playing { background-color: #800;}
/* start-stop button, default hovered text color (when visible) *//* hide nav/start-stop background image shadow on hover - makes the button appear to come forward */.anythingSlider-minimalist-square .anythingControls a.start-stop:hover,.anythingSlider-minimalist-square .anythingControls a.start-stop.hover,.anythingSlider-minimalist-square .anythingControls a.start-stop .anythingControls ul a:hover { color: #fff; /* clear top shadow */ -moz-box-shadow: inset 0 0 0 #000000; -webkit-box-shadow: inset 0 0 0 #000000; box-shadow: inset 0 0 0 #000000;}== Использование ==
/*<pre><nowiki><div class="slick"> {{#widget:YouTube|id=5YtWoVqUvAQ|desc=клип «Сдвиг» (1997)}}{{#widget:YouTube|id=q-KDkCDsmZI|desc=клип «Колыбельный Марш» (1997)}}{{#widget:YouTube|id=6s_S_SG9EmQ|desc=клип «Креозот» (2002)}}{{#widget:YouTube|id=UhT0-huCgAk|desc=клип «Тысячи Дорог» (2009)}}{{#widget:YouTube|id=sBwrn-NdFXc|desc=клип «Механизмы» (2011)}}{{#widget:YouTube|id=q0jL5H4T0WY|desc=клип «В Комнате» (2011)}}{{#widget:YouTube|id=6exCdsrRE94|desc=клип «Беззаботность» (2011)}}{{#widget:YouTube|id=lJ5CfchUi7Y|desc================== Active State клип «Беги, беги» (has keyboard focus2011)}} ==============================={{#widget:YouTube|id=hpRCVtS_7FQ|desc=клип «Ржавое сало» (2011)}}*</div></* slider window - top & bottom borders, active state *nowiki></.anythingSlider-minimalist-square.activeSlider .anythingWindow { border-color: #164054;}pre>
/* Navigation buttons, active state */=== Результат ===.anythingSlider-minimalist-square.activeSlider .anythingControls a {<div class="slick"> background-color: #164054; color: #fff;}/* Navigation current button, active state */.anythingSlider-minimalist-square.activeSlider .anythingControls a.cur,.anythingSlider-minimalist-square.activeSlider .anythingControls a:hover { background-color: #fff; color: #000;} /* start-stop button, stopped, active state */.anythingSlider-minimalist-square.activeSlider .anythingControls a.start-stop { background: #080; colorwidget: #fff;}/* start-stop button, playing, active state */.anythingSlider-minimalist-square.activeSlider .anythingControls a.start-stop.playing { color: #fff; background: #f00;}/* start-stop button, active slider hovered text color YouTube|id=5YtWoVqUvAQ|desc=клип «Сдвиг» (when visible1997) */.anythingSlider-minimalist-square.activeSlider .start-stop:hover,.anythingSlider-minimalist-square.activeSlider .start-stop.hover { color: #fff;}} /************************ NAVIGATION POSITIONING ************************//* Navigation Arrows */.anythingSlider-minimalist-square .arrow { top: 50%; position: absolute; display: block;} .anythingSlider-minimalist-square .arrow a { display: block; width: 30px; height: 40px; margin#widget: YouTube|id=q-20px 0 0 0; /* half height of image */ text-align: center; outline: 0; /*background: urlKDkCDsmZI|desc=клип «Колыбельный Марш» (../images/arrows-minimalist.png1997) no-repeat;*/} /* back arrow */.anythingSlider-minimalist-square .back { left: 0; }.anythingSlider-minimalist-square .back a { background-position: left bottom; }.anythingSlider-minimalist-square .back a:hover,.anythingSlider-minimalist-square .back a.hover { background-position: left top; }/* forward arrow */.anythingSlider-minimalist-square .forward { right#widget: 0; YouTube|id=6s_S_SG9EmQ|desc=клип «Креозот» (2002)}.anythingSlider-minimalist-square .forward a { background-position: right bottom; }.anythingSlider-minimalist-square .forward a:hover,.anythingSlider-minimalist-square .forward a.hover { background-position: right top; } /* Navigation Links */.anythingSlider-minimalist-square .anythingControls { height#widget: 15px; /* limit height, needed for IE9 of all things */ outline: 0; display: none; float: right; position: absolute; bottom: 5px; right: 20px; margin: 0 45px; zYouTube|id=UhT0-index: 100; opacity: 0.90; filter: alphahuCgAk|desc=клип «Тысячи Дорог» (opacity=902009);} .anythingSlider-minimalist-square .anythingControls ul { margin: 0; padding: 0; float: left;}.anythingSlider-minimalist-square .anythingControls ul li { list-style: none; float: left; margin: 0; padding: 0;}.anythingSlider-minimalist-square .anythingControls ul a { display#widget: inlineYouTube|id=sBwrn-block; width: 10px; height: 10px; margin: 3px; padding: 0; text-decoration: none; text-align: center; outline: 0;} .anythingSlider-minimalist-square .anythingControls span { display: block; visibility: hidden;} /* navigationSize window */.anythingSlider-minimalist-square .anythingControls .anythingNavWindow { overflow: hidden; float: left;NdFXc|desc=клип «Механизмы» (2011)}/* navigationSize nav arrow positioning */.anythingSlider-minimalist-square .anythingControls li.prev span,.anythingSlider-minimalist-square .anythingControls li.next span { visibility: visible; position: relative; top: -6px; /* bring navigationSize text arrows into view */} /* Autoplay Start/Stop button */.anythingSlider-minimalist-square .anythingControls .start-stop { margin: 3px; padding: 0; display: inline-block; width: 10px; height: 10px; text-align: center; text-decoration: none; z-index: 100; outline: 0;} /*********************** IE8 AND OLDER STYLING ***********************//* Navigation Arrows */.as-oldie .anythingSlider-minimalist-square .arrow { top#widget: 45%;YouTube|id=q0jL5H4T0WY|desc=клип «В Комнате» (2011)}.as-oldie .anythingSlider-minimalist-square .arrow a { margin: 0;} /***********************COMMON SLIDER STYLING***********************//* Overall Wrapper */.anythingSlider { display: block; overflow: visible !important; position: relative;}/* anythingSlider viewport window */.anythingSlider .anythingWindow { overflow#widget: hidden; position: relative; width: 100%; height: 100%;}/* anythingSlider base YouTube|id=6exCdsrRE94|desc=клип «Беззаботность» (original element2011) */}}.anythingSlider .anythingBase { background: transparent; list-style: none; position: absolute; overflow: visible !important; top: 0; left: 0; margin: 0; padding: 0;} /* Navigation arrow text; indent moved to span inside "a", for IE7; apparently, a negative text-indent on an "a" link moves the link as well as the text */.anythingSlider .arrow span { display#widget: block; /*visibility: hidden;*/}/* disabled arrowsYouTube|id=lJ5CfchUi7Y|desc=клип «Беги, hide or reduce opacity: opacity: .5; filter: alphaбеги» (opacity=502011); */.anythingSlider .arrow.disabled { display: none;}/* all panels inside the slider; horizontal mode */.anythingSlider .panel { background: transparent; display: block; overflow: hidden; float: left; padding: 0; margin: 0;}/* vertical mode */.anythingSlider .vertical .panel { float: none;} /* fade mode */.anythingSlider .fade .panel { float#widget: none; position: absolute; top: 0; left: 0; z-index: 0;}/* fade mode active page - visible & on top */.anythingSlider .fade .activePage { z-index: 1;YouTube|id=hpRCVtS_7FQ|desc=клип «Ржавое сало» (2011)} /*********************** RTL STYLING ***********************//* slider autoplay right-to-left, reverse order of nav links to look better */.anythingSlider.rtl .anythingWindow { direction: ltr; unicode-bidi: bidi-override;}.anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */.anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */.anythingSlider.rtl .start-stop { /* float: right; */ } /* move start/stop button - in case you want to switch sides */ /* probably not necessary, but added just in case *</.anythingSlider .anythingWindow,.anythingSlider .anythingControls ul a,.anythingSlider .arrow a,.anythingSlider .start-stop { transition-duration: 0s; -o-transition-duration: 0s; -moz-transition-duration: 0s; -webkit-transition-duration: 0s;}div>