.catalog { margin-right: 17em; } /* Main */ .catalog > .main { padding: .5em; } .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 0.2em rgba(1, 1, 1, 0.4); overflow: auto; } .right-panel > .body { text-align: center; } .right-panel .section { padding: 1.2em 2em; } .right-panel .section > button { display: block; margin: 0 auto; margin-top: .4em; } .right-panel .basket-info { background-color: #00acc1; color: white; box-shadow: 0 0.1em 0.1em rgba(1, 1, 1, 0.3); } .right-panel .basket-info > button { color: #e0f2f1; } .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 .filters { } .right-panel .section > select, .right-panel .section > .vn-filter { margin-bottom: 1em; } .right-panel select { width: 100%; } .vn-filter > ul { margin: 0; list-style-type: none; text-align: left; color: #666; padding-left: 1.5em; } .vn-filter li { margin: 0; margin-top: .4em; line-height: 2em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 85%; } .vn-filter li > button { vertical-align: middle; text-align: center; padding: .2em; margin-right: .2em; } /* 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; } /* List view */ .catalog .list-view { margin: 0 auto; padding: .5em; 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; } /* Grid view */ .catalog .grid-view { text-align: center; } .item-box { display: inline-block; text-align: left; position: relative; width: 22em; padding: .8em; margin: .4em; margin-bottom: .1em; height: 9em; overflow: hidden; } .item-box > .image { width: 9em; height: 100%; float: left; margin-right: 1em; } .item-box > .image > img { max-width: 100%; height: 100%; display: block; margin: 0 auto; border-radius: .3em; } .item-box > p { margin: 0; padding: 0; font-size: .9em; } .item-box > .producer { text-transform: uppercase; font-size: 1em; } .item-box > h2 { font-size: 1.1em; font-weight: normal; } .item-box > .aval-price { position: absolute; bottom: 1em; right: 4em; } .item-box > .add-button { position: absolute; bottom: .5em; right: .5em; } .item-box > .info-button { float: right; } /* Mobile */ .catalog-actions > button.menu { display: none; } .catalog-actions > button.menu > img { height: 1.8em; } @media (max-width: 950px) { .catalog-actions > button.menu { display: block; } .right-panel { top: 0; right: -17em; z-index: 20; transition: 200ms ease-out all; -webkit-transition: 200ms ease-out all; } .right-panel.show { transform: translateZ(0) translateX(-17em); -webkit-transform: translateZ(0) translateX(-17em); } .catalog { margin-right: 0; } }