examples/transparency-test/index.html

1<!DOCTYPE html>

2<html lang="en">

3<head>

4 <meta charset="utf-8">

5 <meta name="viewport" content="width=device-width, initial-scale=1">

6 <title>Lantern transparency test</title>

7 <style>

8 /* Semi-transparent page background: the desktop should show through this,

9 tinted dark. If you see a SOLID dark/grey fill instead of your wallpaper,

10 the window is still opaque. */

11 html, body {

12 margin: 0;

13 height: 100%;

14 font-family: system-ui, sans-serif;

15 color: #f4f4f8;

16 background: rgba(30, 30, 40, 0.45);

17 }

19 .layout {

20 box-sizing: border-box;

21 min-height: 100%;

22 display: flex;

23 flex-direction: column;

24 align-items: center;

25 justify-content: center;

26 gap: 24px;

27 padding: 40px;

28 }

30 /* A FULLY OPAQUE panel: proves opaque regions still paint normally (this

31 must NOT show the desktop through it). */

32 .panel {

33 background: #1b6ac9;

34 color: #ffffff;

35 padding: 28px 36px;

36 border-radius: 14px;

37 box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);

38 text-align: center;

39 max-width: 420px;

40 }

41 .panel h1 { margin: 0 0 8px; font-size: 22px; }

42 .panel p { margin: 0; font-size: 14px; line-height: 1.5; opacity: 0.92; }

44 /* A FULLY TRANSPARENT cutout: the desktop should show through CLEANLY here

45 (no tint), framed by a dashed border so you can spot its edges. */

46 .cutout {

47 width: 240px;

48 height: 120px;

49 background: transparent;

50 border: 2px dashed rgba(255, 255, 255, 0.7);

51 border-radius: 12px;

52 display: flex;

53 align-items: center;

54 justify-content: center;

55 font-size: 13px;

56 text-align: center;

57 color: rgba(255, 255, 255, 0.85);

58 }

60 .legend {

61 font-size: 12px;

62 opacity: 0.8;

63 text-align: center;

64 max-width: 460px;

65 line-height: 1.6;

66 }

67 </style>

68</head>

69<body>

70 <div class="layout">

71 <div class="panel">

72 <h1>Lantern transparency</h1>

73 <p>This blue panel is fully opaque and must look solid. The page behind it

74 is 45% opaque, so your desktop should glow through the tinted background.</p>

75 </div>

77 <div class="cutout">fully transparent<br>desktop shows through here</div>

79 <div class="legend">

80 Expected: wallpaper/windows visible (tinted) behind everything, fully clear

81 inside the dashed box, and the blue panel solid. If the whole window is an

82 opaque grey/dark rectangle, transparency is not active.

83 </div>

84 </div>

85</body>

86</html>