.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: 0; 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*/ .lots-popup .footer { text-align: center; background-color: #009688; color: white; line-height: 2em; padding: .4em; } .lots-popup .footer > button { margin: 0; } .lots-popup .erase { float: left; } .lots-popup .confirm { float: right; } .lots-popup .erase > img, .lots-popup .confirm > img { display: block; height: 1em; } /* Items */ .catalog .second-category { font-weight: bold; color: orange; } .catalog .third-category { font-weight: bold; color: red; } .catalog .price { color: green; font-size: 1.1em; } .catalog .footer-message { padding-bottom: 1em; text-align: center; } .catalog .item-info > h2 { font-weight: normal; font-size: 1.1em; } .catalog .item-info > p { margin: 0; padding: 0; color: #777; font-size: .8em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .catalog .item-info > .producer { text-transform: uppercase; font-weight: bold; padding: .15em 0; } .catalog .item-info > .htk-button { margin: -0.3em; padding: .3em; } .catalog .item-info > .htk-button > img { vertical-align: middle; } .catalog .item-info .from { font-size: .8em; font-style: italic; } /* 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: 5.5em; right: 0; top: 0; bottom: 0; margin: .9em; margin-left: 0; } .list-view .item-info > h2 { font-size: 1em; padding: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .list-view .item-info > .color { display: none; } .list-view .item-info > .aval-price { position: absolute; bottom: 0; right: .3em; } .list-view .item-info > .htk-button { float: right; } .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 { padding-top: 0; } .grid-view .item-info > .aval-price { position: absolute; bottom: 0; right: 2.8em; } .grid-view .item-info .add-button { position: absolute; bottom: 0; right: 0; } .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; } }