Файл: upload/assets/css/styles.css
Строк: 252
body {
padding-top:70px;
}
#masthead {
}
#masthead h1 {
font-size:
55px;
line-height: 1;
}
#masthead .well
{
margin-top:2%;
background-color:#226622;
border-color:#225522;
}
@media screen and (min-width: 768px) {
#masthead
h1 {
font-size: 100px;
}
}
.navbar-bright {
background-color:#226622;
color:#fff;
}
.navbar-bright a, #masthead a, #masthead .lead
{
}
.navbar-bright li > a:hover
{
}
/*********************************************
PRODUCTS
*********************************************/
.product{
border:
1px solid #dddddd;
-webkit-border-radius: 10px;
-moz-border-radius:
10px;
border-radius:
10px;
overflow:hidden;
margin-bottom:10px;
}
.product>img{
width:
100%;
min-width: 400px;
-webkit-border-radius:
10px;
}
.product-rating{
font-size: 20px;
margin-bottom:
25px;
}
.product-title{
font-size: 20px;
}
.product-desc{
font-size:
14px;
}
.product-price{
font-size: 22px;
}
.product-stock{
color:
#74DF00;
font-size: 20px;
margin-top:
10px;
}
.product-info{
margin-top:
50px;
}
/*********************************************
VIEW
*********************************************/
.content-wrapper
{
max-width: 1140px;
background: #fff;
margin: 0 auto;
margin-top:
25px;
margin-bottom: 10px;
border: 0px;
border-radius:
0px;
}
.container-fluid{
max-width: 1140px;
margin: 0
auto;
}
.view-wrapper {
float: right;
max-width: 70%;
margin-top:
25px;
}
/*********************************************
ITEM
*********************************************/
.app-items {
padding:
0;
margin:0 10px;;
position: relative;
overflow: hidden;
max-width:
100px;
height: auto;
border: 1px solid #dddddd;
-webkit-border-radius:
10px;
-moz-border-radius: 10px;
border-radius:
10px;
max-height:400px;
}
.fancybox
{
overflow:hidden;
max-width:120px;
max-height:120px;
display:inline-block;
}
.app-item
{
max-width: 146px;
width: 120px;
display: block;
float:
left;
position: relative;
padding-right: 20px;
}
.app-item > img
{
opacity: 0.6;
transition: all .2s ease-in;
-o-transition: all .2s
ease-in;
-moz-transition: all .2s ease-in;
-webkit-transition: all .2s
ease-in;
}
.app-item > img:hover {
opacity: 1;
}
.app-image-left
{
padding:0
}
.app-image-right {
padding-left: 50px;
}
.app-image-left
> center > img,.app-image-right > center > img{
max-height:
155px;
}
#container {
display: block;
margin: 0
auto;
width: 1000px;
}
#toplist {}
#toplist input[type=radio]
{
position: absolute;
z-index: 100;
opacity: 0;
height:
40px;
width: 40px;
}
#toplist .control {
display:
inline-block;
margin: 0 -.13em;
width: 40px;
padding: 5px 3px 1px
2px;
vertical-align: bottom;
text-align: center;
/* box-shadow:
inset 0px 0px 1px #fcfcfc;*/
}
.control:hover,
input[type=radio]:hover + .control,
input[type=radio]:checked +
.control {
box-shadow: inset 0px 0px 1px #fcfcfc;
border-radius:
3px;
}
#toplist .first {
border-top-left-radius:
3px;
border-bottom-left-radius: 3px;
}
#toplist .last
{
border-top-right-radius: 3px;
border-bottom-right-radius:
3px;
border-right: 0px;
}
#item-list {
margin-top: 2em;
padding:
0;
list-style-type: none;
text-align: left;
}
#item-list li
{
display: inline-block;
width: 300px;
vertical-align:
top;
margin: 0 0.5em 1em 0;
padding: 10px;
/*
background:
#fcfcfc;
box-shadow: inset 0px 0px 20px #ccc;
*/
border-radius:
5px;
overflow: hidden;
}
#item-list li img
{
vertical-align: top;
width: 100px;
margin-right:
.5em;
float:left
}
#item-list li p
{
width:auto;
margin: 0;
padding: 0;
float:left
word-wrap:
break-word;
}
#item-list .title, #item-list .developer
{
display: block;
}
#item-list .title {
font-size:
18px;
}
#item-list .developer {
font-size:
12px;
}
#item-list span {
font-size: 18px;
display:
-webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow:
ellipsis;
}
/* Animation start here */
.view-control-1:checked ~
#item-list li img {
opacity: 1;
width: 90px;
visibility:
visible;
-webkit-transition: .4s .4s ease-out;
-moz-transition: .4s .4s
ease-out;
-ms-transition: .4s .4s ease-out;
-o-transition: .4s .4s
ease-out;
transition: .4s .4s ease-out;
}
.view-control-1:checked ~
#item-list li p {
opacity: 1;
visibility:
visible;
-webkit-transition: .4s ease-out;
-moz-transition: .4s
ease-out;
-ms-transition: .4s ease-out;
-o-transition: .4s
ease-out;
transition: .4s ease-out;
}
.view-control-1:checked ~
#item-list li p .title{
font-size:14px;
}
.view-control-1:checked ~
#item-list li {
width: 30.6%;
-webkit-transition: .4s
ease-out;
-moz-transition: .4s ease-out;
-ms-transition: .4s
ease-out;
-o-transition: .4s ease-out;
transition: .4s
ease-out;
max-height:110px;
}
.view-control-2:checked ~ #item-list
li img {
opacity: 1;
width: 55px;
visibility:
visible;
-webkit-transition: .4s ease-out;
-moz-transition: .4s
ease-out;
-ms-transition: .4s ease-out;
-o-transition: .4s
ease-out;
transition: .4s ease-out;
}
.view-control-2:checked ~
#item-list li span {
height: auto;
}
.view-control-2:checked ~
#item-list li p {
opacity: 1;
visibility:
visible;
-webkit-transition: .4s ease-out;
-moz-transition: .4s
ease-out;
-ms-transition: .4s ease-out;
-o-transition: .4s
ease-out;
transition: .4s ease-out;
}
.view-control-2:checked ~
#item-list li {
width: 100%;
-webkit-transition: .4s .4s
ease-out;
-moz-transition: .4s .4s ease-out;
-ms-transition: .4s .4s
ease-out;
-o-transition: .4s .4s ease-out;
transition: .4s .4s
ease-out;
}
.view-control-3:checked ~ #item-list li img
{
opacity: 1;
width: 100px;
visibility:
visible;
-webkit-transition: .4s ease-out;
-moz-transition: .4s
ease-out;
-ms-transition: .4s ease-out;
-o-transition: .4s
ease-out;
transition: .4s ease-out;
}
.view-control-3:checked ~
#item-list li p {
opacity: 1;
visibility:
visible;
-webkit-transition: .4s ease-out;
-moz-transition: .4s
ease-out;
-ms-transition: .4s ease-out;
-o-transition: .4s
ease-out;
transition: .4s ease-out;
}
.view-control-3:checked ~
#item-list li {
width: 100%;
-webkit-transition: .4s
ease-out;
-moz-transition: .4s ease-out;
-ms-transition: .4s
ease-out;
-o-transition: .4s ease-out;
transition: .4s
ease-out;
}
.view-control-4:checked ~ #item-list li img {
opacity:
1;
width: 80px;
visibility: visible;
-webkit-transition: .4s
ease-out;
-moz-transition: .4s ease-out;
-ms-transition: .4s
ease-out;
-o-transition: .4s ease-out;
transition: .4s
ease-out;
}
.view-control-4:checked ~ #item-list li p {
opacity:
0;
position: absolute;
visibility: hidden;
-webkit-transition: .4s
ease-out;
-moz-transition: .4s ease-out;
-ms-transition: .4s
ease-out;
-o-transition: .4s ease-out;
transition: .4s
ease-out;
}
.view-control-4:checked ~ #item-list li {
width:
100px;
-webkit-transition: .4s ease-out;
-moz-transition: .4s
ease-out;
-ms-transition: .4s ease-out;
-o-transition: .4s
ease-out;
transition: .4s ease-out;
}
.col-md-6
{position:inherit!important}
.control .fa {margin-top:-3px}