.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; } /* List view */ .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; } /* Grid view */ .catalog .grid-view { padding: 1em; padding-right: .2em; padding-bottom: .4em; text-align: center; } .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; } .item-box > .image { width: 10em; height: 100%; float: left; } .item-box > .image > img { max-width: 100%; height: 100%; display: block; margin: 0 auto; } .item-info { position: absolute; left: 10.4em; right: 0; top: 0; bottom: 0; margin: .6em; } .item-info > h2 { font-size: 1.2em; font-weight: normal; padding-top: 0; } .item-info > p { margin: 0; padding: 0; color: #777; font-size: .8em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .item-info > .producer { text-transform: uppercase; } .item-info > .aval-price { position: absolute; bottom: 0; right: 2.8em; } .item-info .from { font-size: .8em; font-style: italic; } .item-info .add-button { position: absolute; bottom: 0; right: 0; padding: .3em; } .item-info .add-button > img { vertical-align: middle; } .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: 950px) { .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; } }