mirror of
https://github.com/bitcoinresearchkit/brk.git
synced 2026-07-23 00:48:11 -07:00
website_next: part 3
This commit is contained in:
nym21
@@ -0,0 +1,320 @@
|
||||
dialog[data-block-receipt] {
|
||||
--receipt-page-width: 80mm;
|
||||
--receipt-paper-width: 72mm;
|
||||
--receipt-top-teeth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 1 1 0 2 1z'/%3E%3C/svg%3E");
|
||||
--receipt-bottom-teeth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 0 2 0 1 1z'/%3E%3C/svg%3E");
|
||||
--receipt-dialog-padding-block: var(--page-x);
|
||||
--receipt-tooth-count: 36;
|
||||
--receipt-tooth-size: 0.16rem;
|
||||
|
||||
position: fixed;
|
||||
inset: 0 0 auto;
|
||||
width: min(100% - 2rem, 28rem);
|
||||
max-height: 100dvh;
|
||||
margin: 0 auto;
|
||||
border-radius: 0;
|
||||
overflow-y: auto;
|
||||
padding-block: var(--receipt-dialog-padding-block);
|
||||
color: var(--black);
|
||||
background: transparent;
|
||||
font-family: var(--font-mono);
|
||||
overscroll-behavior: contain;
|
||||
scrollbar-width: none;
|
||||
|
||||
:is(
|
||||
[data-receipt-head] > h2,
|
||||
[data-receipt-section] > h3,
|
||||
[data-receipt-row] > span,
|
||||
[data-receipt-row] > strong,
|
||||
[data-receipt-row] small,
|
||||
[data-receipt-note],
|
||||
[data-receipt-qr] > span,
|
||||
[data-receipt-qr] > a
|
||||
) {
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: var(--line-height-xs);
|
||||
}
|
||||
|
||||
[data-receipt-paper] {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 0.375rem;
|
||||
width: min(100%, var(--receipt-paper-width));
|
||||
margin-inline: auto;
|
||||
padding: calc(var(--receipt-tooth-size) + 0.5rem) 1rem
|
||||
calc(var(--receipt-tooth-size) + 0.75rem);
|
||||
border-radius: 0;
|
||||
background: var(--white);
|
||||
mask:
|
||||
var(--receipt-top-teeth) top left / calc(100% / var(--receipt-tooth-count))
|
||||
var(--receipt-tooth-size) repeat-x,
|
||||
linear-gradient(#000 0 0) 0 var(--receipt-tooth-size) / 100%
|
||||
calc(
|
||||
100% - var(--receipt-tooth-size) - var(--receipt-tooth-size)
|
||||
)
|
||||
no-repeat,
|
||||
var(--receipt-bottom-teeth) bottom left /
|
||||
calc(100% / var(--receipt-tooth-count)) var(--receipt-tooth-size)
|
||||
repeat-x;
|
||||
}
|
||||
|
||||
[data-receipt-head] {
|
||||
--block-title-height-color: color-mix(in oklch, var(--black) 62%, transparent);
|
||||
--block-title-height-line-height: var(--line-height-base);
|
||||
--block-title-height-size: var(--font-size-base);
|
||||
--block-title-label-size: 1.375rem;
|
||||
|
||||
display: grid;
|
||||
gap: 0.3125rem;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
margin-block-start: 0.5rem;
|
||||
text-align: center;
|
||||
|
||||
> h2 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35em;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
color: var(--black);
|
||||
font-family: var(--font-mono);
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
[data-receipt-section] {
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
min-width: 0;
|
||||
border-top: 1px dashed color-mix(in oklch, var(--black) 35%, transparent);
|
||||
padding-top: 0.75rem;
|
||||
|
||||
> h3 {
|
||||
color: var(--black);
|
||||
font-family: var(--font-mono);
|
||||
font-weight: var(--font-weight-strong);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
[data-receipt-row] {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(5rem, auto) minmax(0, 1fr);
|
||||
gap: 0.75rem;
|
||||
align-items: baseline;
|
||||
min-width: 0;
|
||||
|
||||
> span {
|
||||
color: color-mix(in oklch, var(--black) 58%, transparent);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
> strong {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
color: var(--black);
|
||||
font-weight: var(--font-weight-strong);
|
||||
text-align: right;
|
||||
|
||||
small {
|
||||
display: block;
|
||||
color: color-mix(in oklch, var(--black) 52%, transparent);
|
||||
font-weight: var(--font-weight-regular);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-receipt-row="wide"] {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 0.125rem;
|
||||
|
||||
> strong {
|
||||
word-break: break-all;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-receipt-row="amount"],
|
||||
&[data-receipt-row="total"] {
|
||||
align-items: start;
|
||||
|
||||
> strong {
|
||||
display: grid;
|
||||
gap: 0.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-receipt-row="total"] {
|
||||
border-block: 1px dashed
|
||||
color-mix(in oklch, var(--black) 35%, transparent);
|
||||
padding-block: 0.375rem;
|
||||
|
||||
> span,
|
||||
> strong {
|
||||
color: var(--black);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-receipt-note] {
|
||||
overflow: hidden;
|
||||
color: var(--black);
|
||||
font-style: italic;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[data-receipt-brand] {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
border-top: 1px dashed color-mix(in oklch, var(--black) 35%, transparent);
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
[data-receipt-qr] {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 0.5rem;
|
||||
border-top: 1px dashed color-mix(in oklch, var(--black) 35%, transparent);
|
||||
padding-top: 0.75rem;
|
||||
text-align: center;
|
||||
|
||||
> span {
|
||||
color: var(--black);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
img {
|
||||
width: min(100%, 10rem);
|
||||
aspect-ratio: 1;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
a {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
color: var(--black);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
[data-receipt-controls] {
|
||||
position: fixed;
|
||||
bottom: 0.5rem;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.375rem;
|
||||
justify-content: center;
|
||||
width: min(100% - 2rem, var(--receipt-paper-width));
|
||||
transform: translateX(-50%);
|
||||
|
||||
form {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.25rem 0.375rem;
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
[data-receipt-action="close"] {
|
||||
--button-background: var(--red);
|
||||
--button-hover-background: var(--black);
|
||||
--button-color: var(--black);
|
||||
}
|
||||
|
||||
[data-receipt-action="print"] {
|
||||
--button-background: var(--green);
|
||||
--button-hover-background: var(--black);
|
||||
--button-color: var(--black);
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
[data-receipt-action="close"]:hover {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
[data-receipt-action="print"]:hover {
|
||||
color: var(--green);
|
||||
}
|
||||
}
|
||||
|
||||
[data-receipt-action="close"][data-press] {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
[data-receipt-action="print"][data-press] {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
[data-receipt-action]:active {
|
||||
color: var(--black);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
@page {
|
||||
size: 80mm auto;
|
||||
margin: 4mm;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
body > :not(dialog[data-block-receipt]) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
dialog[data-block-receipt] {
|
||||
position: static;
|
||||
display: block;
|
||||
width: var(--receipt-page-width);
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
color: black;
|
||||
background: white;
|
||||
overscroll-behavior: auto;
|
||||
}
|
||||
|
||||
dialog[data-block-receipt]::backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
dialog[data-block-receipt] [data-receipt-paper] {
|
||||
width: var(--receipt-paper-width);
|
||||
padding: calc(var(--receipt-tooth-size) + 0.5rem) 1rem
|
||||
calc(var(--receipt-tooth-size) + 0.75rem);
|
||||
border-radius: 0;
|
||||
color: black;
|
||||
background: white;
|
||||
font-size: 8pt;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
dialog[data-block-receipt] :is(
|
||||
[data-receipt-head] > h2,
|
||||
[data-receipt-row] > span,
|
||||
[data-receipt-row] > strong,
|
||||
[data-receipt-row] small,
|
||||
[data-receipt-section] > h3,
|
||||
[data-receipt-qr] > span,
|
||||
[data-receipt-qr] > a
|
||||
) {
|
||||
font-size: 8pt;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
dialog[data-block-receipt] [data-receipt-controls] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user