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

270 lines
3.0 KiB
CSS
Raw Normal View History

2015-03-06 23:33:54 +00:00
.catalog
{
position: relative;
width: 100%;
2015-02-01 03:21:54 +00:00
height: 100%;
2015-02-08 15:38:38 +00:00
min-height: 25em;
2015-02-01 03:21:54 +00:00
}
2015-03-07 00:56:24 +00:00
.catalog div.center
2015-02-01 03:21:54 +00:00
{
position: absolute;
2015-02-08 15:38:38 +00:00
top: 0;
bottom: 0;
left: 0;
right: 17em;
}
2015-02-08 15:38:38 +00:00
/* Main */
2015-03-07 00:56:24 +00:00
.catalog div.main
{
position: absolute;
2015-02-08 15:38:38 +00:00
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
2015-02-08 15:38:38 +00:00
padding: 1em;
}
2015-03-07 00:56:24 +00:00
.catalog div.main .box
{
2015-02-08 15:38:38 +00:00
margin: 0 auto;
2015-07-07 15:27:47 +00:00
max-width: 50em;
min-width: 25em;
}
2015-02-18 16:11:25 +00:00
2015-03-06 23:33:54 +00:00
.catalog .footer-message
{
2015-02-18 16:11:25 +00:00
padding-bottom: 1em;
text-align: center;
}
2015-02-08 15:38:38 +00:00
/* Topbar */
.catalog .action-bar
2015-02-08 15:38:38 +00:00
{
max-width: 15em;
}
2015-03-06 23:33:54 +00:00
.catalog .search
2015-02-08 15:38:38 +00:00
{
float: left;
display: block;
background-color: white;
2015-02-17 11:48:53 +00:00
height: 2.2em;
2015-02-08 15:38:38 +00:00
padding: 0;
}
2015-03-06 23:33:54 +00:00
.catalog .search > input
{
2015-02-08 15:38:38 +00:00
margin: 0;
border: none;
2015-02-01 03:21:54 +00:00
width: 10em;
2015-02-08 15:38:38 +00:00
box-shadow: none;
}
2015-03-06 23:33:54 +00:00
.catalog .search > input:focus
2015-02-08 15:38:38 +00:00
{
background-color: initial;
}
2015-03-06 23:33:54 +00:00
.catalog .search > img
2015-02-08 15:38:38 +00:00
{
2015-02-17 11:48:53 +00:00
margin: 0.4em;
2015-02-08 15:38:38 +00:00
margin-top: 0;
vertical-align: middle;
}
2015-03-06 23:33:54 +00:00
.catalog button.menu
2015-02-08 15:38:38 +00:00
{
float: left;
display: none;
border: none;
background-color: transparent;
box-shadow: none;
padding: 0.3em;
padding-left: 0;
margin-left: 0;
}
2015-03-06 23:33:54 +00:00
.catalog button.menu > img
2015-02-08 15:38:38 +00:00
{
height: 1.8em;
}
/* Menu */
2015-03-07 00:56:24 +00:00
.catalog div.menu
2015-02-08 15:38:38 +00:00
{
position: absolute;
z-index: 20;
2015-07-03 05:49:45 +00:00
top: 0;
bottom: 0;
right: 0;
2015-02-08 15:38:38 +00:00
width: 17em;
background-color: white;
box-shadow: 0 0.2em 0.2em #AAA;
}
2015-03-06 23:33:54 +00:00
button.basket
{
2015-02-08 15:38:38 +00:00
width: 100%;
height: 3em;
2015-04-01 08:24:15 +00:00
font-size: 1.1em;
text-align: center;
background-color: #00BCD4;
2015-07-23 15:58:48 +00:00
border-radius: 0;
}
2015-03-06 23:33:54 +00:00
button.basket:hover
{
background-color: #0AB;
}
/* Realms */
2015-07-23 15:58:48 +00:00
.realms-box
{
2015-04-01 08:24:15 +00:00
box-shadow: 0 0 0.4em #AAA;
2015-07-23 15:58:48 +00:00
background-color: rgba(1, 1, 1, .1);
}
2015-07-23 15:58:48 +00:00
.realms-box a
{
2015-08-17 18:02:14 +00:00
display: block;
float: left;
2015-07-23 15:58:48 +00:00
line-height: 0;
width: 33.3%;
}
.realms-box a > img
{
width: 100%;
border: 0;
2015-02-08 15:38:38 +00:00
padding: 0;
cursor: pointer;
}
2015-07-23 15:58:48 +00:00
.realms-box img:hover
{
2015-07-03 05:49:45 +00:00
opacity: 0.85;
2015-02-08 15:38:38 +00:00
}
/* Types */
2015-03-06 23:33:54 +00:00
.types-box
2015-02-01 03:21:54 +00:00
{
position: absolute;
2015-07-23 15:58:48 +00:00
top: 14.6em;
2015-07-03 05:49:45 +00:00
bottom: 0;
right: 0;
left: 0;
2015-02-01 03:21:54 +00:00
overflow: auto;
}
2015-07-23 15:58:48 +00:00
.types-box a
{
2015-07-23 15:58:48 +00:00
padding: .5em 1.5em;
display: block;
}
2015-07-23 15:58:48 +00:00
.types-box a:hover
{
2015-07-23 15:58:48 +00:00
background-color: rgba(1, 1, 1, .1);
}
2015-03-15 12:44:57 +00:00
/* Grid view */
2015-03-09 08:36:54 +00:00
.item-box
{
padding: 1em;
border-bottom: 1px solid #DDD;
2015-03-15 12:44:57 +00:00
min-height: 14em;
2015-03-09 08:36:54 +00:00
}
2015-03-15 12:44:57 +00:00
.item-box > .image
2015-03-09 08:36:54 +00:00
{
2015-03-15 12:44:57 +00:00
width: 8em;
height: 14em;
2015-03-09 08:36:54 +00:00
float: left;
margin-right: 1em;
2015-03-15 12:44:57 +00:00
}
.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;
2015-03-09 08:36:54 +00:00
}
2015-07-07 15:27:47 +00:00
/* Lots popup*/
div.amount
{
text-align: center;
background-color: #009688;
color: white;
line-height: 2.5em;
padding: 0.2em;
2015-07-07 15:27:47 +00:00
}
button.erase
{
float: left;
}
button.confirm
{
float: right;
}
button.erase > img,
button.confirm > img
{
height: 1em;
}
2015-03-09 08:36:54 +00:00
/* List view */
2015-07-03 05:49:45 +00:00
.items
2015-02-01 03:21:54 +00:00
{
width: 100%;
}
2015-07-03 05:49:45 +00:00
.catalog div.box div.header,
.items > thead > tr,
2015-03-06 23:33:54 +00:00
.realms-bar
2015-02-08 15:38:38 +00:00
{
2015-02-17 11:48:53 +00:00
background-color: #777;
2015-02-08 15:38:38 +00:00
}
2015-07-03 05:49:45 +00:00
.items > tbody > tr
2015-02-01 03:21:54 +00:00
{
height: 6em;
}
2015-07-03 05:49:45 +00:00
.items > tbody img
{
max-height: 6em;
max-width: 6em;
border-radius: 50%;
}
.items .icon
{
width: 6em;
padding: .2em;
padding-right: .5em;
}
td.second-category
{
font-weight: bold;
color: orange;
}
td.third-category
{
font-weight: bold;
color: red;
}
2015-08-17 18:02:14 +00:00
td.price
{
color: green;
}