|
|
| (не показаны 3 промежуточные версии этого же участника) |
| Строка 1: |
Строка 1: |
| − | /*
| + | Видео-галерея на замену неработающего MorphVideo. Используется слайдер [http://kenwheeler.github.io/slick/ slick]. |
| − | AnythingSlider v1.8+ Minimalist Square theme
| |
| − | By Rob Garrison
| |
| − | */
| |
| − | /***************************** | |
| − | SET DEFAULT DIMENSIONS HERE
| |
| − | *****************************/
| |
| − | /* 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;
| |
| − | }
| |
| | | | |
| − | /******************
| + | Подключается с помощью [[Special:Gadgets|гаджетов]]: [[MediaWiki:Gadget-Slick.js]], [[MediaWiki:Gadget-SlickInit.js]], [[MediaWiki:Gadget-SlickTheme.css]], [[MediaWiki:Gadget-Slick.css]]. |
| − | SET STYLING HERE
| |
| − | ******************
| |
| − | =================================
| |
| − | Default state (no keyboard focus)
| |
| − | ==================================*/
| |
| − | /* Overall Wrapper */
| |
| − | .anythingSlider-minimalist-square {
| |
| − | margin: 0 auto;
| |
| − | /* 30px right & left padding for the navigation arrows */
| |
| − | padding: 0 30px;
| |
| − | }
| |
| − | /* slider window - top & bottom borders, default state */
| |
| − | .anythingSlider-minimalist-square .anythingWindow {
| |
| − | border-top: 3px solid #333;
| |
| − | border-bottom: 3px solid #333;
| |
| − | }
| |
| − | /* Navigation buttons + start/stop button, default state */
| |
| − | .anythingSlider-minimalist-square .anythingControls a {
| |
| − | background-color: #333;
| |
| − | color: #fff;
| |
| − | border: #000 1px solid;
| |
| − | }
| |
| − | /* Navigation current button, default state */
| |
| − | .anythingSlider-minimalist-square .anythingControls a.cur,
| |
| − | .anythingSlider-minimalist-square .anythingControls a:hover { | |
| − | background-color: #777;
| |
| − | color: #000;
| |
| − | }
| |
| | | | |
| − | /* start-stop button, stopped, default state */
| + | Галерея создается оборачиванием контента в тег <nowiki><div class="slick">...</div></nowiki>. |
| − | .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.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 */ | |
| − | .anythingSlider-minimalist-square .anythingControls a.start-stop.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)}} |
| − | Active State (has keyboard focus)
| + | {{#widget:YouTube|id=q-KDkCDsmZI|desc=клип «Колыбельный Марш» (1997)}} |
| − | =================================
| + | {{#widget:YouTube|id=6s_S_SG9EmQ|desc=клип «Креозот» (2002)}} |
| − | */
| + | {{#widget:YouTube|id=UhT0-huCgAk|desc=клип «Тысячи Дорог» (2009)}} |
| − | /* slider window - top & bottom borders, active state */ | + | {{#widget:YouTube|id=sBwrn-NdFXc|desc=клип «Механизмы» (2011)}} |
| − | .anythingSlider-minimalist-square.activeSlider .anythingWindow {
| + | {{#widget:YouTube|id=q0jL5H4T0WY|desc=клип «В Комнате» (2011)}} |
| − | border-color: #164054;
| + | {{#widget:YouTube|id=6exCdsrRE94|desc=клип «Беззаботность» (2011)}} |
| − | }
| + | {{#widget:YouTube|id=lJ5CfchUi7Y|desc=клип «Беги, беги» (2011)}} |
| | + | {{#widget:YouTube|id=hpRCVtS_7FQ|desc=клип «Ржавое сало» (2011)}} |
| | + | </div></nowiki></pre> |
| | | | |
| − | /* Navigation buttons, active state */
| + | === Результат === |
| − | .anythingSlider-minimalist-square.activeSlider .anythingControls a {
| + | <div class="slick"> |
| − | background-color: #164054;
| + | {{#widget:YouTube|id=5YtWoVqUvAQ|desc=клип «Сдвиг» (1997)}} |
| − | color: #fff;
| + | {{#widget:YouTube|id=q-KDkCDsmZI|desc=клип «Колыбельный Марш» (1997)}} |
| − | }
| + | {{#widget:YouTube|id=6s_S_SG9EmQ|desc=клип «Креозот» (2002)}} |
| − | /* Navigation current button, active state */
| + | {{#widget:YouTube|id=UhT0-huCgAk|desc=клип «Тысячи Дорог» (2009)}} |
| − | .anythingSlider-minimalist-square.activeSlider .anythingControls a.cur,
| + | {{#widget:YouTube|id=sBwrn-NdFXc|desc=клип «Механизмы» (2011)}} |
| − | .anythingSlider-minimalist-square.activeSlider .anythingControls a:hover {
| + | {{#widget:YouTube|id=q0jL5H4T0WY|desc=клип «В Комнате» (2011)}} |
| − | background-color: #fff;
| + | {{#widget:YouTube|id=6exCdsrRE94|desc=клип «Беззаботность» (2011)}} |
| − | color: #000;
| + | {{#widget:YouTube|id=lJ5CfchUi7Y|desc=клип «Беги, беги» (2011)}} |
| − | }
| + | {{#widget:YouTube|id=hpRCVtS_7FQ|desc=клип «Ржавое сало» (2011)}} |
| − | | + | </div> |
| − | /* start-stop button, stopped, active state */
| |
| − | .anythingSlider-minimalist-square.activeSlider .anythingControls a.start-stop {
| |
| − | background: #080;
| |
| − | color: #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 (when visible) */
| |
| − | .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: -20px 0 0 0; /* half height of image */
| |
| − | text-align: center;
| |
| − | outline: 0;
| |
| − | /*background: url(../images/arrows-minimalist.png) 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: 0; }
| |
| − | .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: 15px; /* limit height, needed for IE9 of all things */
| |
| − | outline: 0;
| |
| − | display: none;
| |
| − | float: right;
| |
| − | position: absolute;
| |
| − | bottom: 5px;
| |
| − | right: 20px;
| |
| − | margin: 0 45px;
| |
| − | z-index: 100;
| |
| − | opacity: 0.90;
| |
| − | filter: alpha(opacity=90);
| |
| − | } | |
| − | | |
| − | .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: inline-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;
| |
| − | } | |
| − | /* 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: 45%;
| |
| − | } | |
| − | .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: hidden;
| |
| − | position: relative;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | }
| |
| − | /* anythingSlider base (original element) */
| |
| − | .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: block;
| |
| − | /*visibility: hidden;*/
| |
| − | }
| |
| − | /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
| |
| − | .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: none;
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | z-index: 0;
| |
| − | }
| |
| − | /* fade mode active page - visible & on top */
| |
| − | .anythingSlider .fade .activePage {
| |
| − | z-index: 1;
| |
| − | } | |
| − | | |
| − | /***********************
| |
| − | 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;
| |
| − | }
| |
