496 lines
6.7 KiB
CSS
496 lines
6.7 KiB
CSS
.catalog
|
|
{
|
|
margin-right: 17em;
|
|
}
|
|
|
|
/* 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, .2);
|
|
overflow: auto;
|
|
}
|
|
.right-panel .basket-info
|
|
{
|
|
background-color: #00ACC1;
|
|
color: white;
|
|
box-shadow: 0 .1em .1em rgba(1, 1, 1, .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;
|
|
}
|
|
.right-panel .filters,
|
|
.right-panel .order
|
|
{
|
|
display: none;
|
|
}
|
|
.right-panel .realm-msg
|
|
{
|
|
margin-top: 1em;
|
|
}
|
|
.right-panel .realm-msg > h1
|
|
{
|
|
font-weight: normal;
|
|
text-align: center;
|
|
padding: 2.5em 0;
|
|
color: #777;
|
|
}
|
|
.right-panel h2
|
|
{
|
|
font-weight: normal;
|
|
padding: .4em 0;
|
|
color: #777;
|
|
font-size: 1.1em;
|
|
}
|
|
.right-panel .realms > div > div
|
|
{
|
|
text-align: center;
|
|
}
|
|
.right-panel .realms a
|
|
{
|
|
display: inline-block;
|
|
width: 30%;
|
|
padding: .6em;
|
|
box-sizing: border-box;
|
|
}
|
|
.right-panel .realms a:hover
|
|
{
|
|
background-color: rgba(1, 1, 1, .05);
|
|
border-radius: .15em;
|
|
}
|
|
.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: 0;
|
|
margin-right: .2em;
|
|
}
|
|
.right-panel .filters > button
|
|
{
|
|
display: block;
|
|
margin: 0 auto;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
/* Items */
|
|
|
|
.item-info
|
|
{
|
|
position: relative;
|
|
}
|
|
.item-info .second-category
|
|
{
|
|
font-weight: bold;
|
|
color: orange;
|
|
}
|
|
.item-info .third-category
|
|
{
|
|
font-weight: bold;
|
|
color: red;
|
|
}
|
|
.item-info > h2
|
|
{
|
|
padding: 0;
|
|
padding-bottom: .15em;
|
|
font-weight: normal;
|
|
font-size: 1em;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
max-height: 3.8em;
|
|
}
|
|
.item-info > p
|
|
{
|
|
margin: 0;
|
|
padding: 0;
|
|
color: #777;
|
|
font-size: .8em;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
.item-info .sub-name
|
|
{
|
|
text-transform: uppercase;
|
|
padding: 0;
|
|
padding-bottom: .2em;
|
|
font-size: .9em;
|
|
}
|
|
.item-info > .htk-button
|
|
{
|
|
margin: -0.3em;
|
|
padding: .3em;
|
|
}
|
|
.item-info > .htk-button > img
|
|
{
|
|
vertical-align: middle;
|
|
}
|
|
.item-info .available-price
|
|
{
|
|
white-space: nowrap;
|
|
}
|
|
.item-info .from
|
|
{
|
|
font-size: .8em;
|
|
font-style: italic;
|
|
}
|
|
.item-info .price
|
|
{
|
|
color: green;
|
|
font-size: 1.1em;
|
|
}
|
|
.tags
|
|
{
|
|
font-size: .8em;
|
|
display: table;
|
|
color: #333;
|
|
margin: 0;
|
|
width: auto;
|
|
border-collapse: collapse;
|
|
}
|
|
.tags td:first-child {
|
|
color: #999;
|
|
}
|
|
|
|
/* 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 > .htk-image
|
|
{
|
|
margin: 1em;
|
|
width: 3.5em;
|
|
height: 3.5em;
|
|
float: left;
|
|
overflow: hidden;
|
|
}
|
|
.list-view .item-box > .htk-image > img
|
|
{
|
|
border-radius: 50%;
|
|
}
|
|
.list-view .item-info
|
|
{
|
|
position: absolute;
|
|
left: 5.5em;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: .8em;
|
|
margin-left: 0;
|
|
}
|
|
.list-view .item-info > h2
|
|
{
|
|
font-size: 1em;
|
|
white-space: nowrap;
|
|
}
|
|
.list-view .item-info > .color
|
|
{
|
|
display: none;
|
|
}
|
|
.list-view .item-info > .htk-button
|
|
{
|
|
float: right;
|
|
}
|
|
.list-view .item-info .extra
|
|
{
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
margin-top: .3em;
|
|
}
|
|
.list-view .item-info .available-price
|
|
{
|
|
float: right;
|
|
right: .3em;
|
|
}
|
|
.list-view .item-info .tags
|
|
{
|
|
display: block;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
margin-top: .3em;
|
|
}
|
|
.list-view .item-info .tags
|
|
{
|
|
display: block;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
.list-view .item-info .tags > tr
|
|
{
|
|
display: inline-block;
|
|
}
|
|
.list-view .item-info .tags td
|
|
{
|
|
display: inline-block;
|
|
padding-right: .5em
|
|
}
|
|
.list-view .item-info .tags td:first-child
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
/* 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: 24em;
|
|
margin: 0;
|
|
margin-right: .8em;
|
|
margin-bottom: .6em;
|
|
height: 11em;
|
|
overflow: hidden;
|
|
}
|
|
.grid-view .item-box > .htk-image
|
|
{
|
|
width: 11em;
|
|
height: 100%;
|
|
float: left;
|
|
}
|
|
.grid-view .item-info
|
|
{
|
|
position: absolute;
|
|
left: 11.4em;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: .6em;
|
|
}
|
|
.grid-view .item-info .add-button
|
|
{
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
.grid-view .item-info .available-price
|
|
{
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 2em;
|
|
}
|
|
.grid-view .item-info .available
|
|
{
|
|
display: inline-block;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
max-width: 4em;
|
|
vertical-align: bottom;
|
|
}
|
|
.grid-view .item-info .tags
|
|
{
|
|
position: absolute;
|
|
top: 6.6em;
|
|
}
|
|
.grid-view .item-info .tags td {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
max-width: 6em;
|
|
width: 6em;
|
|
line-height: 1.1em;
|
|
}
|
|
.grid-view .item-info .tags td:last-child {
|
|
padding-left: .5em;
|
|
}
|
|
.grid-view .item-info .tags td:first-child {
|
|
color: #999;
|
|
}
|
|
|
|
/* Card */
|
|
|
|
.card-popup
|
|
{
|
|
overflow: auto;
|
|
}
|
|
.item-card
|
|
{
|
|
font-size: .9em;
|
|
width: 20em;
|
|
}
|
|
.item-card .top
|
|
{
|
|
padding: 1em;
|
|
}
|
|
.item-card .item-info
|
|
{
|
|
margin-left: 9em;
|
|
height: 8em;
|
|
}
|
|
.item-card .htk-image
|
|
{
|
|
height: 8em;
|
|
width: 8em;
|
|
float: left;
|
|
border-radius: .3em;
|
|
}
|
|
.item-card .desc
|
|
{
|
|
clear: both;
|
|
margin-top: 1em 0;
|
|
font-size: .9em;
|
|
}
|
|
.item-card .lots-grid
|
|
{
|
|
border-top: 1px solid #DDD;
|
|
}
|
|
.item-card .lots-grid tr
|
|
{
|
|
height: 3em;
|
|
}
|
|
.item-card .footer
|
|
{
|
|
text-align: center;
|
|
background-color: #009688;
|
|
color: white;
|
|
line-height: 2em;
|
|
padding: .4em;
|
|
}
|
|
.item-card .footer > button
|
|
{
|
|
margin: 0;
|
|
}
|
|
.item-card .erase
|
|
{
|
|
float: left;
|
|
}
|
|
.item-card .confirm
|
|
{
|
|
float: right;
|
|
}
|
|
.item-card .erase > img,
|
|
.item-card .confirm > img
|
|
{
|
|
display: block;
|
|
height: 1em;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
|