hedera-web/web/forms/ecomerce/catalog/style.css

269 lines
3.0 KiB
CSS
Executable File

.catalog
{
position: relative;
width: 100%;
height: 100%;
min-height: 25em;
}
.catalog div.center
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 17em;
}
/* Main */
.catalog div.main
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
padding: 1em;
}
.catalog div.main .box
{
margin: 0 auto;
max-width: 50em;
min-width: 25em;
}
.catalog .footer-message
{
padding-bottom: 1em;
text-align: center;
}
/* Topbar */
.catalog .action-bar
{
max-width: 15em;
}
.catalog .search
{
float: left;
display: block;
background-color: white;
height: 2.2em;
padding: 0;
}
.catalog .search > input
{
margin: 0;
border: none;
width: 10em;
box-shadow: none;
}
.catalog .search > input:focus
{
background-color: initial;
}
.catalog .search > img
{
margin: 0.4em;
margin-top: 0;
vertical-align: middle;
}
.catalog button.menu
{
float: left;
display: none;
border: none;
background-color: transparent;
box-shadow: none;
padding: 0.3em;
padding-left: 0;
margin-left: 0;
}
.catalog button.menu > img
{
height: 1.8em;
}
/* Menu */
.catalog div.menu
{
position: absolute;
z-index: 20;
top: 0;
bottom: 0;
right: 0;
width: 17em;
background-color: white;
box-shadow: 0 0.2em 0.2em #AAA;
}
button.basket
{
width: 100%;
height: 3em;
font-size: 1.1em;
text-align: center;
background-color: #00BCD4;
border-radius: 0;
}
button.basket:hover
{
background-color: #0AB;
}
/* Realms */
.realms-box
{
box-shadow: 0 0 0.4em #AAA;
background-color: rgba(1, 1, 1, .1);
}
.realms-box a
{
display: block;
float: left;
line-height: 0;
width: 33.3%;
}
.realms-box a > img
{
width: 100%;
border: 0;
padding: 0;
cursor: pointer;
}
.realms-box img:hover
{
opacity: 0.85;
}
/* Types */
.types-box
{
position: absolute;
top: 14.6em;
bottom: 0;
right: 0;
left: 0;
overflow: auto;
}
.types-box a
{
padding: .5em 1.5em;
display: block;
}
.types-box a:hover
{
background-color: rgba(1, 1, 1, .1);
}
/* Grid view */
.item-box
{
padding: 1em;
border-bottom: 1px solid #DDD;
min-height: 14em;
}
.item-box > .image
{
width: 8em;
height: 14em;
float: left;
margin-right: 1em;
}
.item-box img
{
max-width: 8em;
max-height: 8em;
display: block;
margin: 0 auto;
}
.item-box p
{
margin: 0;
padding: 0.6em;
}
.item-box h2
{
font-weight: normal;
}
.item-box .amount
{
width: 3em;
}
.amount-p
{
text-align: right;
}
/* 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 */
.items
{
width: 100%;
}
.catalog div.box div.header,
.items > thead > tr,
.realms-bar
{
background-color: #777;
}
.items > tbody > tr
{
height: 6em;
}
.items .icon
{
width: 6em;
padding: .2em;
padding-right: .5em;
}
.items .icon > img
{
max-height: 6em;
max-width: 6em;
}
td.second-category
{
font-weight: bold;
color: orange;
}
td.third-category
{
font-weight: bold;
color: red;
}
td.price
{
color: green;
}