app/BTCPayApp.UI/Components/Keypad.razor.css
2025-03-25 17:47:27 +01:00

146 lines
2.8 KiB
CSS

/* modes */
#ModeTabs {
min-height: 2.75rem;
}
/* keypad */
.keypad {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.keypad .btn {
--icon-size: 1.75rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
position: relative;
border-radius: 0;
border-color: transparent !important;
font-weight: var(--btcpay-font-weight-bold);
font-size: var(--icon-size);
min-height: 4rem;
height: 8vh;
max-height: 6rem;
color: var(--btcpay-body-text);
}
.keypad .btn:disabled,
.keypad .btn.disabled {
color: var(--btcpay-body-text-muted);
}
.btcpay-pills label,
.btn-secondary.rounded-pill {
padding-left: 1rem;
padding-right: 1rem;
}
#Calculation {
min-height: 1.5rem;
}
button[data-bs-toggle] {
position: absolute;
z-index: 1;
top: 0;
height: 3.25em !important;
width: 3.25em !important;
color: var(--btcpay-header-link);
}
button[data-bs-toggle] .icon {
--icon-size: 1.75em;
}
#ItemsListToggle {
right: var(--btcpay-space-m);
}
#RecentTransactionsToggle {
left: var(--btcpay-space-m);
}
@media (max-width: 359px) {
#RecentTransactions .list-group .badge-container {
flex-grow: 1;
}
}
#PosItems {
--image-size: 3rem;
}
#PosItems .img img {
width: var(--image-size);
height: var(--image-size);
}
#PosItems .img img {
max-width: var(--image-size);
max-height: var(--image-size);
object-fit: scale-down;
border-radius: var(--btcpay-border-radius);
}
#PosItems .posItem {
display: none;
position: relative;
}
#PosItems .posItem.posItem--inStock {
cursor: pointer;
}
#PosItems .posItem--displayed {
display: flex;
}
#PosItems .quantities .btn {
--btcpay-btn-disabled-opacity: .3;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
background: none;
border: transparent;
padding: 0;
}
#PosItems .quantities .btn span {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--btcpay-light);
}
#PosItems .quantities .btn:hover span {
background: var(--btcpay-light-bg-hover);
}
#PosItems .quantities .btn ::deep .icon {
--icon-size: 1rem;
}
#RecentTransactionsRefresh[disabled] .icon {
animation: 1.25s linear infinite spinner-border;
}
#RecentTransactions .list-group {
margin: calc(var(--btcpay-modal-padding) * -1);
width: calc(100% + var(--btcpay-modal-padding) * 2);
}
#RecentTransactions .list-group-item {
background-color: transparent;
}
#RecentTransactions .list-group .badge-container {
flex: 0 0 5.125rem;
text-align: right;
}
@media (max-width: 359px) {
#RecentTransactions .list-group .badge-container {
flex-grow: 1;
}
}
/* fix sticky hover effect on mobile browsers */
@media (hover: none) {
.actions .btn-secondary:hover {
border-color: var(--btcpay-secondary-border-active) !important;
}
}