1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
/* The WINDOW FIELD layout (GLOSSARY: "window field") — FLOATING windows. The C++
glue feeds each row's box as bound state (x,y,w,h,z) + the focused flag; this
stylesheet turns that into the on-screen frame, chrome, and highlight. There is
NO automatic layout here (that was the earlier focused-dominates tiling): every
window is absolutely positioned, moved by a data-style translate and sized by
data-style width/height. Tiled / sidebar containers are a LATER wave (windows
will migrate between containers with captured-state animations). */
/* The field fills its whole surface (sized to the output by the glue) and is
transparent so the scene below shows through every unpainted pixel (per-pixel
alpha). Absolutely-positioned .win children stack within it. */
body.field {
width: 100%;
height: 100%;
background-color: transparent;
font-family: Noto Sans;
}
/* A floating window frame. Absolutely positioned; data-style left/top place it,
width/height size it, z-index stacks it (all driven by the bound box state).
Column flex so the titlebar sits above the live body with no calc(). Rounded +
overflow:hidden clips the body texture to the card; a 1dp border becomes the
bright focus ring via .focused. */
div.win {
position: absolute;
left: 0;
top: 0;
display: flex;
flex-direction: column;
background-color: #1c1c20ff;
border-width: 1dp;
border-color: #00000088;
border-radius: 8dp;
overflow: hidden;
}
/* The FOCUSED window gets a bright highlight ring (z-order is driven by the bound
`z`, so no transform/raise needed here). A short transition tweens the ring. */
div.win.focused {
border-color: #4da3ffff;
}
/* Titlebar: the move handle (drag: drag set inline in the RML). Fixed height,
full width, holds the centered title. */
div.win .titlebar {
height: 30dp;
width: 100%;
background-color: #26262cff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
div.win.focused .titlebar {
background-color: #2e3340ff;
}
div.win .title {
color: #c7c9d1ff;
font-size: 13dp;
/* leave room so a long title does not slide under the close button */
padding: 0 36dp 0 36dp;
}
/* Close button: a sibling laid over the titlebar's right edge (NOT inside the
draggable titlebar, so a tap closes rather than starting a move). The "×" glyph
renders in Noto Sans (loaded by the substrate). */
div.win .closebtn {
position: absolute;
top: 0;
right: 0;
width: 30dp;
height: 30dp;
color: #c7c9d1ff;
font-size: 18dp;
text-align: center;
background-color: transparent;
}
div.win .closebtn:hover {
background-color: #e0414aff;
color: #ffffffff;
}
/* The live window texture fills the body below the titlebar (flex:1). RmlUi
scales the texture to this box; once the client is configured to the box size
(resize_mode, default "settle") it maps 1:1. */
img.live {
display: block;
flex: 1 1 0;
width: 100%;
min-height: 0;
}
/* The two BOTTOM resize grips, overlaid at the bottom corners (drag: drag set in
the RML). Small, subtle, slightly brighter on hover; touch can grab the 22dp
square. The top corners have no grip (the titlebar owns the top edge). */
div.win .grip {
position: absolute;
bottom: 0;
width: 22dp;
height: 22dp;
background-color: #ffffff14;
}
div.win .grip:hover {
background-color: #ffffff3c;
}
div.win .grip-bl {
left: 0;
border-top-right-radius: 8dp;
}
div.win .grip-br {
right: 0;
border-top-left-radius: 8dp;
}
|
