462 lines
6.2 KiB
CSS
Executable File
462 lines
6.2 KiB
CSS
Executable File
.catalog
|
|
{
|
|
margin-right: 17em;
|
|
}
|
|
|
|
/* Main */
|
|
|
|
.htk-toast
|
|
{
|
|
margin-left: -11em;
|
|
}
|
|
|
|
/* Topbar */
|
|
|
|
.catalog-actions > .htk-search-entry
|
|
{
|
|
margin-top: .8em;
|
|
margin-right: .4em;
|
|
}
|
|
|
|
/* Right panel */
|
|
|
|
.right-panel
|
|
{
|
|
position: fixed;
|
|
top: 3.9em;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 17em;
|
|
background-color: white;
|
|
box-shadow: 0 0 .2em rgba(1, 1, 1, 0.4);
|
|
overflow: auto;
|
|
}
|
|
.right-panel .basket-info
|
|
{
|
|
background-color: #00ACC1;
|
|
color: white;
|
|
box-shadow: 0 .1em .1em rgba(1, 1, 1, 0.3);
|
|
padding: 1.2em 2em;
|
|
}
|
|
.right-panel .basket-info > button
|
|
{
|
|
color: #E0F2F1;
|
|
margin: 0 auto;
|
|
display: block;
|
|
margin-top: .4em;
|
|
}
|
|
.right-panel .basket-info > p
|
|
{
|
|
margin: 0;
|
|
padding: .4em 0;
|
|
font-size: 1.1em;
|
|
text-align: left;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
.right-panel .filter
|
|
{
|
|
padding: 1em 1.8em;
|
|
}
|
|
.right-panel .filters,
|
|
.right-panel .order
|
|
{
|
|
display: none;
|
|
}
|
|
.right-panel .realm-msg
|
|
{
|
|
margin-top: 1em;
|
|
/* box-shadow: 0 0 .3em rgba(1, 1, 1, 0.5);
|
|
border-radius: 50%;
|
|
overflow: hidden;*/
|
|
}
|
|
.right-panel .realm-msg > h1
|
|
{
|
|
font-weight: normal;
|
|
text-align: center;
|
|
padding: 2.5em 0;
|
|
color: #777;
|
|
/* background-color: #009688;
|
|
color: white;*/
|
|
}
|
|
.right-panel h2
|
|
{
|
|
font-weight: normal;
|
|
padding: .4em 0;
|
|
color: #777;
|
|
font-size: 1.1em;
|
|
}
|
|
.right-panel .realms
|
|
{
|
|
width: 95%;
|
|
margin: .2em auto;
|
|
}
|
|
.right-panel .realms a
|
|
{
|
|
display: block;
|
|
float: left;
|
|
width: 33.33%;
|
|
}
|
|
.right-panel .realms a:hover
|
|
{
|
|
background-color: rgba(1, 1, 1, 0.05);
|
|
border-radius: .1em;
|
|
}
|
|
.right-panel .realms a > img
|
|
{
|
|
display: block;
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
.right-panel .vn-filter,
|
|
.right-panel select
|
|
{
|
|
margin: 0 auto;
|
|
margin-bottom: .7em;
|
|
width: 90%;
|
|
display: block;
|
|
}
|
|
.vn-filter > ul
|
|
{
|
|
margin: 0;
|
|
list-style-type: none;
|
|
text-align: left;
|
|
color: #666;
|
|
padding-left: .8em;
|
|
}
|
|
.vn-filter li
|
|
{
|
|
margin: 0;
|
|
margin-top: .3em;
|
|
line-height: 2em;
|
|
max-width: 90%;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
.vn-filter li > button
|
|
{
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
padding: .2em;
|
|
margin-right: .2em;
|
|
}
|
|
.right-panel .filters > button
|
|
{
|
|
display: block;
|
|
margin: 0 auto;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
/* Item description */
|
|
|
|
.desc-popup
|
|
{
|
|
padding: 1em;
|
|
max-width: 15em;
|
|
}
|
|
|
|
/* Lots popup*/
|
|
|
|
div.amount
|
|
{
|
|
text-align: center;
|
|
background-color: #009688;
|
|
color: white;
|
|
line-height: 2.5em;
|
|
padding: 0.2em;
|
|
}
|
|
button.erase
|
|
{
|
|
float: left;
|
|
}
|
|
button.confirm
|
|
{
|
|
float: right;
|
|
}
|
|
button.erase > img,
|
|
button.confirm > img
|
|
{
|
|
height: 1em;
|
|
}
|
|
|
|
/* Items */
|
|
/*
|
|
.catalog .list-view
|
|
{
|
|
margin: 0 auto;
|
|
padding: 1em;
|
|
max-width: 45em;
|
|
min-width: 25em;
|
|
}
|
|
.items
|
|
{
|
|
width: 100%;
|
|
}
|
|
.catalog div.box div.header,
|
|
.items > thead > tr,
|
|
.realms-bar
|
|
{
|
|
background-color: #777;
|
|
}
|
|
.items > tbody > tr
|
|
{
|
|
height: 4em;
|
|
}
|
|
.items .icon
|
|
{
|
|
width: 4em;
|
|
padding: 0;
|
|
}
|
|
.items .icon > img
|
|
{
|
|
max-height: 2.5em;
|
|
max-width: 2.5em;
|
|
border-radius: 50%;
|
|
}*/
|
|
td.second-category
|
|
{
|
|
font-weight: bold;
|
|
color: orange;
|
|
}
|
|
td.third-category
|
|
{
|
|
font-weight: bold;
|
|
color: red;
|
|
}
|
|
.catalog .price
|
|
{
|
|
color: green;
|
|
font-size: 1.1em;
|
|
}
|
|
.catalog .footer-message
|
|
{
|
|
padding-bottom: 1em;
|
|
text-align: center;
|
|
}
|
|
|
|
/* List view */
|
|
|
|
.list-view
|
|
{
|
|
max-width: 30em;
|
|
margin: 0 auto;
|
|
padding: 1em;
|
|
}
|
|
.list-view .item-box
|
|
{
|
|
display: block;
|
|
position: relative;
|
|
width: 100%;
|
|
margin: 0;
|
|
height: 5.5em;
|
|
overflow: visible;
|
|
border-bottom: 1px solid #DDD;
|
|
}
|
|
.list-view .item-box > .image
|
|
{
|
|
margin: 1em;
|
|
width: 3.5em;
|
|
height: 3.5em;
|
|
float: left;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
}
|
|
.list-view .item-box > .image > img
|
|
{
|
|
max-width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
.list-view .item-info
|
|
{
|
|
position: absolute;
|
|
left: 4.6em;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: .9em;
|
|
}
|
|
.list-view .item-info > h2
|
|
{
|
|
font-size: 1em;
|
|
font-weight: normal;
|
|
padding: 0;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
.list-view .item-info > p
|
|
{
|
|
margin: 0;
|
|
padding: 0;
|
|
color: #777;
|
|
font-size: .8em;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
.list-view .item-info > .producer
|
|
{
|
|
text-transform: uppercase;
|
|
}
|
|
.list-view .item-info > .color
|
|
{
|
|
display: none;
|
|
}
|
|
.list-view .item-info > .aval-price
|
|
{
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: .3em;
|
|
}
|
|
.list-view .item-info .from
|
|
{
|
|
font-size: .8em;
|
|
font-style: italic;
|
|
}
|
|
.list-view .item-info > .htk-button
|
|
{
|
|
float: right;
|
|
margin: -0.3em;
|
|
padding: .3em;
|
|
}
|
|
.list-view .item-info > .htk-button > img
|
|
{
|
|
vertical-align: middle;
|
|
}
|
|
.list-view .item-info > .info-button
|
|
{
|
|
margin-right: 0;
|
|
}
|
|
|
|
/* Grid view */
|
|
|
|
.grid-view
|
|
{
|
|
padding: 1em;
|
|
padding-right: .2em;
|
|
padding-bottom: .4em;
|
|
text-align: center;
|
|
}
|
|
.grid-view .item-box
|
|
{
|
|
text-align: left;
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 22.5em;
|
|
margin: 0;
|
|
margin-right: .8em;
|
|
margin-bottom: .6em;
|
|
height: 10em;
|
|
overflow: hidden;
|
|
}
|
|
.grid-view .item-box > .image
|
|
{
|
|
width: 10em;
|
|
height: 100%;
|
|
float: left;
|
|
}
|
|
.grid-view .item-box > .image > img
|
|
{
|
|
max-width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
.grid-view .item-info
|
|
{
|
|
position: absolute;
|
|
left: 10.4em;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: .6em;
|
|
}
|
|
.grid-view .item-info > h2
|
|
{
|
|
font-size: 1.2em;
|
|
font-weight: normal;
|
|
padding-top: 0;
|
|
}
|
|
.grid-view .item-info > p
|
|
{
|
|
margin: 0;
|
|
padding: 0;
|
|
color: #777;
|
|
font-size: .8em;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
.grid-view .item-info > .producer
|
|
{
|
|
text-transform: uppercase;
|
|
}
|
|
.grid-view .item-info > .aval-price
|
|
{
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 2.8em;
|
|
}
|
|
.grid-view .item-info .from
|
|
{
|
|
font-size: .8em;
|
|
font-style: italic;
|
|
}
|
|
.grid-view .item-info .add-button
|
|
{
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
padding: .3em;
|
|
}
|
|
.grid-view .item-info .add-button > img
|
|
{
|
|
vertical-align: middle;
|
|
}
|
|
.grid-view .item-info > .info-button
|
|
{
|
|
float: right;
|
|
}
|
|
|
|
/* Mobile */
|
|
|
|
.catalog-actions > button.menu
|
|
{
|
|
display: none;
|
|
padding: 1.1em .5em;
|
|
}
|
|
.catalog-actions > button.menu > img
|
|
{
|
|
height: 1.8em;
|
|
}
|
|
|
|
@media (max-width: 960px)
|
|
{
|
|
.catalog-actions > button.menu
|
|
{
|
|
display: block;
|
|
}
|
|
.right-panel
|
|
{
|
|
top: 0;
|
|
right: -17em;
|
|
z-index: 20;
|
|
transition: transform 200ms ease-out;
|
|
-webkit-transition: transform 200ms ease-out;
|
|
}
|
|
.right-panel.show
|
|
{
|
|
transform: translateZ(0) translateX(-17em);
|
|
-webkit-transform: translateZ(0) translateX(-17em);
|
|
}
|
|
.catalog
|
|
{
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|