Файл: gal/css/lenta.css
Строк: 275
/* общие стили для лент */
.corner-ribbon{
width:
200px;
background: #e43;
position: absolute;
top: 25px;
left:
-50px;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
color: #f0f0f0;
transform: rotate(-45deg);
-webkit-transform:
rotate(-45deg);
}
/* фиксируем ленточки
*/
.corner-ribbon.sticky{
position: fixed;
}
/* легкая тень
*/
.corner-ribbon.shadow{
box-shadow: 0 0 3px rgba(0,0,0,.3);
}
/*
позиции лент */
.corner-ribbon.top-left{ /* верхний
угол слева */
top: 25px;
left: -50px;
transform:
rotate(-45deg);
-webkit-transform:
rotate(-45deg);
}
.corner-ribbon.top-right{ /* верхний угол
справа */
top: 25px;
right: -50px;
left: auto;
transform:
rotate(45deg);
-webkit-transform:
rotate(45deg);
}
.corner-ribbon.bottom-left{ /* нижний угол
слева */
top: auto;
bottom: 25px;
left: -50px;
transform:
rotate(45deg);
-webkit-transform:
rotate(45deg);
}
.corner-ribbon.bottom-right{ /* нижний угол
справа */
top: auto;
right: -50px;
bottom: 25px;
left: auto;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
/*
выбор цвета лент */
.corner-ribbon.white{background: #f0f0f0;
color: #555;}
.corner-ribbon.black{background:
#333;}
.corner-ribbon.grey{background:
#999;}
.corner-ribbon.blue{background:
#39d;}
.corner-ribbon.green{background:
#2c7;}
.corner-ribbon.turquoise{background:
#1b9;}
.corner-ribbon.purple{background:
#95b;}
.corner-ribbon.red{background:
#e43;}
.corner-ribbon.orange{background:
#e82;}
.corner-ribbon.yellow{background: #ec0;}
.lightbox {
/**
определяем базовый стиль lightbox */
position:
fixed;
overflow: hidden;
z-index: 9999;
width: 0;
height: 0;
text-align: center;
top: 0;
left: 0;
background:
rgba(0,0,0,0.8);
}
.lightbox img {
/** базовый стиль
изображений lightbox*/
width: 95%;
max-width: 800px;
height: auto;
margin: 5% auto;
/** полная прозрачность
изначально */
opacity: 0;
border: 1px solid #4D4D4D;
/**
тени у картинок - это по желанию */
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px
0px 10px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(0, 0, 0,
0.8);
/* трансформация прозрачности при
открытии */
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
transition: opacity 500ms
ease-in;
}
.lightbox:target {
/** активируем lightbox при
нажатии */
width: auto;
height: auto;
bottom: 0;
right:
0;
/** удаляем контур по умолчанию */
outline:
none;
}
.lightbox:target img {
/** делаем элемент
непрозрачным */
opacity: 1;
}
/** стиль
миниатюр для демо-страницы */
.thumb img{
width:
15%;
margin:2%;
box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 1px
2px 10px rgba(0, 0, 0, 0.6);
}
/* Стили модального окна
*/
.modal-header h2 {
color: #555;
font-size: 20px;
font-weight: normal;
line-height: 1;
margin: 0;
}
/*
кнопка закрытия окна */
.modal .btn-close {
color:
#aaa;
cursor: pointer;
font-size: 30px;
text-decoration: none;
position: absolute;
right: 5px;
top: 0;
}
.modal
.btn-close:hover {
color: red;
}
/* слой затемнения
*/
.modal-wrap:before {
content: "";
display: none;
background: rgba(0, 0, 0, .3);
position: fixed;
top: 0;
left:
0;
right: 0;
bottom: 0;
z-index: 101;
}
.modal-overlay {
bottom: 0;
display: none;
left: 0;
position: fixed;
right:
0;
top: 0;
z-index: 102;
}
/* активация слоя
затемнения и модального блока
*/
.modal-open:checked ~ .modal-wrap:before,
.modal-open:checked ~
.modal-wrap .modal-overlay {
display: block;
}
.modal-open:checked ~
.modal-wrap .modal-dialog {
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);
top: 20%;
}
/* элементы
модального окна */
.modal-dialog {
background: #fefefe;
border: none;
border-radius: 5px;
position: fixed;
width:
80%;
max-width: 500px;
left: 50%;
top: -100%;
-webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px
rgba(0,0,0,.3);
-moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px
60px rgba(0,0,0,.3);
box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px
60px rgba(0,0,0,.3);
-webkit-transform: translate(-50%, -500%);
-ms-transform: translate(-50%, -500%);
-o-transform: translate(-50%,
-500%);
transform: translate(-50%, -500%);
-webkit-transition:
-webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s
ease-out;
-o-transition: -o-transform 0.4s ease-out;
transition:
transform 0.4s ease-out;
z-index: 103;
}
.modal-body {
padding:
20px;
}
.modal-body p {
margin: 0;
}
.modal-header,
.modal-footer {
padding: 20px 20px;
}
.modal-header {
border-bottom: #eaeaea solid
1px;
}
.modal-header h2 {
font-size: 20px;
margin:
0;
}
.modal-footer {
border-top: #eaeaea solid 1px;
text-align:
right;
}
/* адаптивные картинки в модальном
блоке */
.modal-body img {
max-width: 100%;
height:
auto;
}
/* кнопки */
.btn {
background: #fff;
border: #555
solid 1px;
border-radius: 3px;
cursor: pointer;
display:
inline-block;
font-size: 14px;
padding: 8px 15px;
text-decoration: none;
text-align: center;
min-width: 60px;
position: relative;
}
.btn:hover, .btn:focus {
background:
#f2f2f2;
}
.btn-primary {
background: #428bca;
border-color:
#357ebd;
color: #fff;
}
.btn-primary:hover{
background:
#66A1D3;
}
.column {
width: 100%;
padding: 0 2em;
min-height:
300px;
position: relative;
}
.column:nth-child(2) {
box-shadow: -1px 0 0
rgba(0,0,0,0.1);
}
.column p {
font-weight: 300;
font-size:
1.5em;
padding: 0;
margin: 0;
text-align: right;
line-height:
1.5;
}
.message{
background-size: 40px 40px;
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05)
25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%,
rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05)
25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%,
rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%,
transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%,
rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
box-shadow: 0 0 8px rgba(0,0,0,.3);
font:16px 'Open Sans';
width: 85%;
margin: 20px auto;
padding:15px;
-moz-animation:
bg-animate 5s linear infinite;
-webkit-animation: bg-animate 5s linear
infinite;
-ms-animation: bg-animate 5s linear infinite;
animation:
bg-animate 5s linear infinite;
}
.message span{font-weight:600;}
.message
#close{float:right; color:inherit; text-decoration:none;}
.message#error{
background-color:tomato;
border-left:7px #dc3d21 solid;
color:white;
}
.message#warning{
background-color: #eaaf51;
border-left:7px #df8b00 solid;
color:#6b6d31;
}
.message#info{
background-color: #4ea5cd;
border-left:7px #3b8eb5 solid;
color:#beecfc;
}
.message#success{
background-color: #61b832;
border-left:7px #55a12c solid;
color:#296829;
}
@-webkit-keyframes
bg-animate {
from {
background-position: 0 0;
}
to {
background-position: -80px 0;
}
}
@-moz-keyframes bg-animate {
from {
background-position: 0 0;
}
to {
background-position: -80px 0;
}
}
@keyframes bg-animate {
from
{
background-position: 0 0;
}
to {
background-position: -80px 0;
}
}