Справка/VideoGallery — различия между версиями

Материал из rock63.ru
Перейти к: навигация, поиск
(Отмена правки 11226, сделанной участником WikiSysop (обс.))
Строка 1: Строка 1:
−
<includeonly><div class="{{#ifeq:{{{align|right}}}|center|center|t{{{align|right}}} thumb}} morph-frame"><div style="width:{{#expr:{{{width|350}}}+10}}px">{{#if:{{{title|}}}|<div style="padding:2px;font-size:10pt;text-align:left">'''{{{title}}}'''</div>}}<div class="thumbinner morphcontainer">
+
/*
−
<!--
+
AnythingSlider v1.8+ Minimalist Square theme
−
// Шапка
+
By Rob Garrison
−
  --><table width="100%" border="0" cellspacing="0" cellpadding="0" style="background:transparent;font-size:17px;font-weight:bold;color:black;"><tr><!--
+
*/
−
// Кнопки
+
/*****************************
−
--><td align="left" width="33"><span class="morphprev fake-button">◄</span></td><td align="left"><div style="visibility:collapse" width="10"><span class="morphlink_hilight" style="background:black;"></span></div></td><td width="100%" align="center"><!--
+
  SET DEFAULT DIMENSIONS HERE
−
// Линки
+
*****************************/
−
  -->{{#ifeq:{{{hide|}}}|1|<div class="morphlink"></div>}}<!--
+
/* change the ID & dimensions to match your slider */
−
-->{{#if:{{{1|}}}|<div class="morphlink"></div>}}<!--
+
#slider {
−
-->{{#if:{{{3|}}}|<div class="morphlink"></div>}}<!--
+
width: 700px;
−
-->{{#if:{{{5|}}}|<div class="morphlink"></div>}}<!--
+
height: 390px;
−
-->{{#if:{{{7|}}}|<div class="morphlink"></div>}}<!--
+
list-style: none;
−
-->{{#if:{{{9|}}}|<div class="morphlink"></div>}}<!--
+
/* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
−
-->{{#if:{{{11|}}}|<div class="morphlink"></div>}}<!--
+
overflow-y: auto;
−
-->{{#if:{{{13|}}}|<div class="morphlink"></div>}}<!--
+
overflow-x: hidden;
−
-->{{#if:{{{15|}}}|<div class="morphlink"></div>}}<!--
+
}
−
-->{{#if:{{{17|}}}|<div class="morphlink"></div>}}<!--
+
 
−
-->{{#if:{{{19|}}}|<div class="morphlink"></div>}}<!--
+
/******************
−
-->{{#if:{{{21|}}}|<div class="morphlink"></div>}}<!--
+
  SET STYLING HERE
−
-->{{#if:{{{23|}}}|<div class="morphlink"></div>}}<!--
+
******************
−
-->{{#if:{{{25|}}}|<div class="morphlink"></div>}}<!--
+
  =================================
−
-->{{#if:{{{27|}}}|<div class="morphlink"></div>}}<!--
+
Default state (no keyboard focus)
−
-->{{#if:{{{29|}}}|<div class="morphlink"></div>}}<!--
+
  ==================================*/
−
-->{{#if:{{{31|}}}|<div class="morphlink"></div>}}<!--
+
/* Overall Wrapper */
−
-->{{#if:{{{33|}}}|<div class="morphlink"></div>}}<!--
+
.anythingSlider-minimalist-square {
−
-->{{#if:{{{35|}}}|<div class="morphlink"></div>}}<!--
+
margin: 0 auto;
−
-->{{#if:{{{37|}}}|<div class="morphlink"></div>}}<!--
+
/* 30px right & left padding for the navigation arrows */
−
-->{{#if:{{{39|}}}|<div class="morphlink"></div>}}<!--
+
padding: 0 30px;
−
-->{{#if:{{{41|}}}|<div class="morphlink"></div>}}<!--
+
}
−
-->{{#if:{{{43|}}}|<div class="morphlink"></div>}}<!--
+
/* slider window - top & bottom borders, default state */
−
-->{{#if:{{{45|}}}|<div class="morphlink"></div>}}<!--
+
.anythingSlider-minimalist-square .anythingWindow {
−
-->{{#if:{{{47|}}}|<div class="morphlink"></div>}}<!--
+
border-top: 3px solid #333;
−
-->{{#if:{{{49|}}}|<div class="morphlink"></div>}}<!--
+
border-bottom: 3px solid #333;
−
-->{{#if:{{{51|}}}|<div class="morphlink"></div>}}<!--
+
}
−
-->{{#if:{{{53|}}}|<div class="morphlink"></div>}}<!--
+
/* Navigation buttons + start/stop button, default state */
−
-->{{#if:{{{55|}}}|<div class="morphlink"></div>}}<!--
+
.anythingSlider-minimalist-square .anythingControls a {
−
-->{{#if:{{{57|}}}|<div class="morphlink"></div>}}<!--
+
background-color: #333;
−
-->{{#if:{{{59|}}}|<div class="morphlink"></div>}}<!--
+
color: #fff;
−
-->{{#if:{{{61|}}}|<div class="morphlink"></div>}}<!--
+
border: #000 1px solid;
−
-->{{#if:{{{63|}}}|<div class="morphlink"></div>}}<!--
+
}
−
-->{{#if:{{{65|}}}|<div class="morphlink"></div>}}<!--
+
/* Navigation current button, default state */
−
-->{{#if:{{{67|}}}|<div class="morphlink"></div>}}<!--
+
.anythingSlider-minimalist-square .anythingControls a.cur,
−
-->{{#if:{{{69|}}}|<div class="morphlink"></div>}}<!--
+
.anythingSlider-minimalist-square .anythingControls a:hover {
−
-->{{#if:{{{71|}}}|<div class="morphlink"></div>}}<!--
+
background-color: #777;
−
-->{{#if:{{{73|}}}|<div class="morphlink"></div>}}<!--
+
color: #000;
−
-->{{#if:{{{75|}}}|<div class="morphlink"></div>}}<!--
+
}
−
-->{{#if:{{{77|}}}|<div class="morphlink"></div>}}<!--
+
 
−
-->{{#if:{{{79|}}}|<div class="morphlink"></div>}}<!--
+
/* start-stop button, stopped, default state */
−
-->{{#if:{{{81|}}}|<div class="morphlink"></div>}}<!--
+
.anythingSlider-minimalist-square .anythingControls a.start-stop {
−
-->{{#if:{{{83|}}}|<div class="morphlink"></div>}}<!--
+
background: #040;
−
-->{{#if:{{{85|}}}|<div class="morphlink"></div>}}<!--
+
color: #ddd;
−
-->{{#if:{{{87|}}}|<div class="morphlink"></div>}}<!--
+
/* top shadow */
−
-->{{#if:{{{89|}}}|<div class="morphlink"></div>}}<!--
+
-moz-box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5);
−
-->{{#if:{{{91|}}}|<div class="morphlink"></div>}}<!--
+
-webkit-box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5);
−
-->{{#if:{{{93|}}}|<div class="morphlink"></div>}}<!--
+
box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5);
−
-->{{#if:{{{95|}}}|<div class="morphlink"></div>}}<!--
+
}
−
-->{{#if:{{{97|}}}|<div class="morphlink"></div>}}<!--
+
/* start-stop button, playing, default state */
−
-->{{#if:{{{99|}}}|<div class="morphlink"></div>}}<!--
+
.anythingSlider-minimalist-square .anythingControls a.start-stop.playing {
−
-->{{#if:{{{101|}}}|<div class="morphlink"></div>}}<!--
+
background-color: #800;
−
-->{{#if:{{{103|}}}|<div class="morphlink"></div>}}<!--
+
}
−
-->{{#if:{{{105|}}}|<div class="morphlink"></div>}}<!--
+
 
−
-->{{#if:{{{107|}}}|<div class="morphlink"></div>}}<!--
+
/* start-stop button, default hovered text color (when visible) */
−
-->{{#if:{{{109|}}}|<div class="morphlink"></div>}}<!--
+
/* hide nav/start-stop background image shadow on hover - makes the button appear to come forward */
−
-->{{#if:{{{111|}}}|<div class="morphlink"></div>}}<!--
+
.anythingSlider-minimalist-square .anythingControls a.start-stop:hover,
−
-->{{#if:{{{113|}}}|<div class="morphlink"></div>}}<!--
+
.anythingSlider-minimalist-square .anythingControls a.start-stop.hover,
−
-->{{#if:{{{115|}}}|<div class="morphlink"></div>}}<!--
+
.anythingSlider-minimalist-square .anythingControls a.start-stop .anythingControls ul a:hover {
−
-->{{#if:{{{117|}}}|<div class="morphlink"></div>}}<!--
+
color: #fff;
−
-->{{#if:{{{119|}}}|<div class="morphlink"></div>}}<!--
+
/* clear top shadow */
−
-->{{#if:{{{121|}}}|<div class="morphlink"></div>}}<!--
+
-moz-box-shadow: inset 0 0 0 #000000;
−
--></td><td align="right" width="10"><div style="visibility:collapse"><span class="morphlink_default" style="background:silver;"></span></div></td><td align="right" width="33"><span class="morphnext fake-button">►</span></td></tr></table><!--  
+
-webkit-box-shadow: inset 0 0 0 #000000;
−
// Контент
+
box-shadow: inset 0 0 0 #000000;
−
--><div style="max-height:{{{maxheight|1000}}}px;overflow-x:hidden;overflow-y:hidden;" class="MorphVideoimages">{{#ifeq:{{{hide|}}}|1|<div style="width:{{{width|180}}}px" class="morphcontent thumbimage">Для просмотра содержимого используйте кнопки «вперед», «назад» и переключатели.</div>}}<!--
+
}
−
-->{{MorphVideo/Cell|{{{1|}}}|{{{width|}}}|{{{2|}}}|{{{height|}}}}}<!--
+
 
−
-->{{MorphVideo/Cell|{{{3|}}}|{{{width|}}}|{{{4|}}}|{{{height|}}}}}<!--
+
/*
−
-->{{MorphVideo/Cell|{{{5|}}}|{{{width|}}}|{{{6|}}}|{{{height|}}}}}<!--
+
=================================
−
-->{{MorphVideo/Cell|{{{7|}}}|{{{width|}}}|{{{8|}}}|{{{height|}}}}}<!--
+
Active State (has keyboard focus)
−
-->{{MorphVideo/Cell|{{{9|}}}|{{{width|}}}|{{{10|}}}|{{{height|}}}}}<!--
+
=================================
−
-->{{MorphVideo/Cell|{{{11|}}}|{{{width|}}}|{{{12|}}}|{{{height|}}}}}<!--
+
*/
−
-->{{MorphVideo/Cell|{{{13|}}}|{{{width|}}}|{{{14|}}}|{{{height|}}}}}<!--
+
/* slider window - top & bottom borders, active state */
−
-->{{MorphVideo/Cell|{{{15|}}}|{{{width|}}}|{{{16|}}}|{{{height|}}}}}<!--
+
.anythingSlider-minimalist-square.activeSlider .anythingWindow {
−
-->{{MorphVideo/Cell|{{{17|}}}|{{{width|}}}|{{{18|}}}|{{{height|}}}}}<!--
+
border-color: #164054;
−
-->{{MorphVideo/Cell|{{{19|}}}|{{{width|}}}|{{{20|}}}|{{{height|}}}}}<!--
+
}
−
-->{{MorphVideo/Cell|{{{21|}}}|{{{width|}}}|{{{22|}}}|{{{height|}}}}}<!--
+
 
−
-->{{MorphVideo/Cell|{{{23|}}}|{{{width|}}}|{{{24|}}}|{{{height|}}}}}<!--
+
/* Navigation buttons, active state */
−
-->{{MorphVideo/Cell|{{{25|}}}|{{{width|}}}|{{{26|}}}|{{{height|}}}}}<!--
+
.anythingSlider-minimalist-square.activeSlider .anythingControls a {
−
-->{{MorphVideo/Cell|{{{27|}}}|{{{width|}}}|{{{28|}}}|{{{height|}}}}}<!--
+
background-color: #164054;
−
-->{{MorphVideo/Cell|{{{29|}}}|{{{width|}}}|{{{30|}}}|{{{height|}}}}}<!--
+
color: #fff;
−
-->{{MorphVideo/Cell|{{{31|}}}|{{{width|}}}|{{{32|}}}|{{{height|}}}}}<!--
+
}
−
-->{{MorphVideo/Cell|{{{33|}}}|{{{width|}}}|{{{34|}}}|{{{height|}}}}}<!--
+
/* Navigation current button, active state */
−
-->{{MorphVideo/Cell|{{{35|}}}|{{{width|}}}|{{{36|}}}|{{{height|}}}}}<!--
+
.anythingSlider-minimalist-square.activeSlider .anythingControls a.cur,
−
-->{{MorphVideo/Cell|{{{37|}}}|{{{width|}}}|{{{38|}}}|{{{height|}}}}}<!--
+
.anythingSlider-minimalist-square.activeSlider .anythingControls a:hover {
−
-->{{MorphVideo/Cell|{{{39|}}}|{{{width|}}}|{{{40|}}}|{{{height|}}}}}<!--
+
background-color: #fff;
−
-->{{MorphVideo/Cell|{{{41|}}}|{{{width|}}}|{{{42|}}}|{{{height|}}}}}<!--
+
color: #000;
−
-->{{MorphVideo/Cell|{{{43|}}}|{{{width|}}}|{{{44|}}}|{{{height|}}}}}<!--
+
}
−
-->{{MorphVideo/Cell|{{{45|}}}|{{{width|}}}|{{{46|}}}|{{{height|}}}}}<!--
+
 
−
-->{{MorphVideo/Cell|{{{47|}}}|{{{width|}}}|{{{48|}}}|{{{height|}}}}}<!--
+
/* start-stop button, stopped, active state */
−
-->{{MorphVideo/Cell|{{{49|}}}|{{{width|}}}|{{{50|}}}|{{{height|}}}}}<!--
+
.anythingSlider-minimalist-square.activeSlider .anythingControls a.start-stop {
−
-->{{MorphVideo/Cell|{{{51|}}}|{{{width|}}}|{{{52|}}}|{{{height|}}}}}<!--
+
background: #080;
−
-->{{MorphVideo/Cell|{{{53|}}}|{{{width|}}}|{{{54|}}}|{{{height|}}}}}<!--
+
color: #fff;
−
-->{{MorphVideo/Cell|{{{55|}}}|{{{width|}}}|{{{56|}}}|{{{height|}}}}}<!--
+
}
−
-->{{MorphVideo/Cell|{{{57|}}}|{{{width|}}}|{{{58|}}}|{{{height|}}}}}<!--
+
/* start-stop button, playing, active state */
−
-->{{MorphVideo/Cell|{{{59|}}}|{{{width|}}}|{{{60|}}}|{{{height|}}}}}<!--
+
.anythingSlider-minimalist-square.activeSlider .anythingControls a.start-stop.playing {
−
-->{{MorphVideo/Cell|{{{61|}}}|{{{width|}}}|{{{62|}}}|{{{height|}}}}}<!--
+
color: #fff;
−
-->{{MorphVideo/Cell|{{{63|}}}|{{{width|}}}|{{{64|}}}|{{{height|}}}}}<!--
+
background: #f00;
−
-->{{MorphVideo/Cell|{{{65|}}}|{{{width|}}}|{{{66|}}}|{{{height|}}}}}<!--
+
}
−
-->{{MorphVideo/Cell|{{{67|}}}|{{{width|}}}|{{{68|}}}|{{{height|}}}}}<!--
+
/* start-stop button, active slider hovered text color (when visible) */
−
-->{{MorphVideo/Cell|{{{69|}}}|{{{width|}}}|{{{70|}}}|{{{height|}}}}}<!--
+
.anythingSlider-minimalist-square.activeSlider .start-stop:hover,
−
-->{{MorphVideo/Cell|{{{71|}}}|{{{width|}}}|{{{72|}}}|{{{height|}}}}}<!--
+
.anythingSlider-minimalist-square.activeSlider .start-stop.hover {
−
-->{{MorphVideo/Cell|{{{73|}}}|{{{width|}}}|{{{74|}}}|{{{height|}}}}}<!--
+
color: #fff;
−
-->{{MorphVideo/Cell|{{{75|}}}|{{{width|}}}|{{{76|}}}|{{{height|}}}}}<!--
+
}
−
-->{{MorphVideo/Cell|{{{77|}}}|{{{width|}}}|{{{78|}}}|{{{height|}}}}}<!--
+
 
−
-->{{MorphVideo/Cell|{{{79|}}}|{{{width|}}}|{{{80|}}}|{{{height|}}}}}<!--
+
/************************
−
-->{{MorphVideo/Cell|{{{81|}}}|{{{width|}}}|{{{82|}}}|{{{height|}}}}}<!--
+
  NAVIGATION POSITIONING
−
-->{{MorphVideo/Cell|{{{83|}}}|{{{width|}}}|{{{84|}}}|{{{height|}}}}}<!--
+
************************/
−
-->{{MorphVideo/Cell|{{{85|}}}|{{{width|}}}|{{{86|}}}|{{{height|}}}}}<!--
+
/* Navigation Arrows */
−
-->{{MorphVideo/Cell|{{{87|}}}|{{{width|}}}|{{{88|}}}|{{{height|}}}}}<!--
+
.anythingSlider-minimalist-square .arrow {
−
-->{{MorphVideo/Cell|{{{89|}}}|{{{width|}}}|{{{90|}}}|{{{height|}}}}}<!--
+
top: 50%;
−
-->{{MorphVideo/Cell|{{{91|}}}|{{{width|}}}|{{{92|}}}|{{{height|}}}}}<!--
+
position: absolute;
−
-->{{MorphVideo/Cell|{{{93|}}}|{{{width|}}}|{{{94|}}}|{{{height|}}}}}<!--
+
display: block;
−
-->{{MorphVideo/Cell|{{{95|}}}|{{{width|}}}|{{{96|}}}|{{{height|}}}}}<!--
+
}
−
-->{{MorphVideo/Cell|{{{97|}}}|{{{width|}}}|{{{98|}}}|{{{height|}}}}}<!--
+
 
−
-->{{MorphVideo/Cell|{{{99|}}}|{{{width|}}}|{{{100|}}}|{{{height|}}}}}<!--
+
.anythingSlider-minimalist-square .arrow a {
−
-->{{MorphVideo/Cell|{{{101|}}}|{{{width|}}}|{{{102|}}}|{{{height|}}}}}<!--
+
display: block;
−
-->{{MorphVideo/Cell|{{{103|}}}|{{{width|}}}|{{{104|}}}|{{{height|}}}}}<!--
+
width: 30px;
−
-->{{MorphVideo/Cell|{{{105|}}}|{{{width|}}}|{{{106|}}}|{{{height|}}}}}<!--
+
height: 40px;
−
-->{{MorphVideo/Cell|{{{107|}}}|{{{width|}}}|{{{108|}}}|{{{height|}}}}}<!--
+
margin: -20px 0 0 0; /* half height of image */
−
-->{{MorphVideo/Cell|{{{109|}}}|{{{width|}}}|{{{110|}}}|{{{height|}}}}}<!--
+
text-align: center;
−
-->{{MorphVideo/Cell|{{{111|}}}|{{{width|}}}|{{{112|}}}|{{{height|}}}}}<!--
+
outline: 0;
−
-->{{MorphVideo/Cell|{{{113|}}}|{{{width|}}}|{{{114|}}}|{{{height|}}}}}<!--
+
/*background: url(../images/arrows-minimalist.png) no-repeat;*/
−
-->{{MorphVideo/Cell|{{{115|}}}|{{{width|}}}|{{{116|}}}|{{{height|}}}}}<!--
+
}
−
-->{{MorphVideo/Cell|{{{117|}}}|{{{width|}}}|{{{118|}}}|{{{height|}}}}}<!--
+
 
−
-->{{MorphVideo/Cell|{{{119|}}}|{{{width|}}}|{{{120|}}}|{{{height|}}}}}<!--
+
/* back arrow */
−
-->{{#if:{{{121|}}}|<div style="width:{{{width|180}}}px" class="morphcontent thumbimage">ВНИМАНИЕ! Произошёл фэйл. Был превышен лимит на количество слайдов в галерее.</div>}}
+
.anythingSlider-minimalist-square .back { left: 0; }
−
</div></div></div></div></includeonly>
+
.anythingSlider-minimalist-square .back a { background-position: left bottom; }
−
<noinclude>{{Doc}}</noinclude>
+
.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;
 +
}

Версия 12:47, 30 июля 2014

/* AnythingSlider v1.8+ Minimalist Square theme By Rob Garrison

  • /

/***************************** 

 SET DEFAULT DIMENSIONS HERE
*****************************/

/* change the ID & dimensions to match your slider */

  1. 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; }

/****************** 

 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 */ .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; }

/* 

=================================
Active State (has keyboard focus)
=================================
  • /

/* slider window - top & bottom borders, active state */ .anythingSlider-minimalist-square.activeSlider .anythingWindow { border-color: #164054; }

/* Navigation buttons, active state */ .anythingSlider-minimalist-square.activeSlider .anythingControls a { 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; 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; }

Источник — «https://wiki.rock63.ru/index.php?title=Справка/VideoGallery&oldid=11292»