btcpayserver/BTCPayServer/wwwroot/pos/common.css
d11n 6d288271cd
Unify public page styles (#5462)
Based on #5413 and needs it to get merged first.

- Uses `--wrap-max-width` on `.public-page-wrap` rather than inner `.container` classes
- Applies `.tile` class to boxes and makes them connect to the edge of the screen below `400px` width.
2023-11-21 10:13:26 +01:00

64 lines
1.1 KiB
CSS

#PosPrint,
#PosStatic {
--wrap-max-width: 1320px;
}
.lead {
max-width: 36em;
text-align: center;
margin: 0 auto 2.5rem;
}
.lead :last-child {
margin-bottom: 0;
}
.posItem {
display: none;
position: relative;
}
.posItem.posItem--inStock {
cursor: pointer;
}
.posItem-added {
display: flex;
align-items: center;
justify-content: center;
background: var(--btcpay-success);
color: var(--btcpay-success-text);
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
opacity: 0;
pointer-events: none;
transition: opacity var(--btcpay-transition-duration-default) ease-in-out;
}
.posItem-added .icon {
width: 2rem;
height: 2rem;
}
.posItem--added {
pointer-events: none;
}
.posItem--added .posItem-added {
opacity: .8;
}
.posItem--displayed {
display: flex;
}
.posItem--first {
margin-left: auto;
}
.posItem--last {
margin-right: auto;
}
.posItem .card {
width: 100%;
}
.posItem .card .card-body {
flex-grow: 0;
}
.posItem .card .card-img-top {
max-height: 210px;
object-fit: scale-down;
}