Garmelon/showbits
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve shadows slightly

Browse source
This commit is contained in:
Joscha 2025-03-03 02:27:23 +01:00
parent 93fe8f1031
commit c7c640eeff
1 changed files with 21 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

24
showbits-thermal-printer-ui/src/App.vue
View file

@ -26,10 +26,28 @@ import CSegment from "./components/CSegment.vue";
padding: 32px; padding: 32px;
background-color: white; background-color: white;
box-shadow: inset 0 0 32px #0003;
position: relative;
}
/* This construction makes the outside shadow/glow look like the strip of paper
* extends below the screen. Otherwise, the glow at the bottom would look
* thinner, which looks weird. */
.strip::after {
content: " ";
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(100% + 500px);
box-shadow: box-shadow:
0 0 16px #0006, 0 0 16px #0006 /* for contrast */,
0 0 500px #ffff, 0 0 500px -10px #fffa;
inset 0 0 32px #0003;
} }
</style> </style>