119 lines
4.3 KiB
Plaintext
119 lines
4.3 KiB
Plaintext
export component MainWindow inherits Window {
|
|
always-on-top: true;
|
|
no-frame: true;
|
|
width: 320px;
|
|
height: 110px;
|
|
background: transparent;
|
|
|
|
weather_popup := Rectangle {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 10px; // keep content inset from edges
|
|
border-radius: 14px;
|
|
border-color: #ffffff22;
|
|
border-width: 1px;
|
|
background: @linear-gradient(135deg, #ffffff18, #7e7e7e24);
|
|
drop-shadow-blur: 10px;
|
|
drop-shadow-color: #00000066;
|
|
|
|
VerticalLayout {
|
|
spacing: 6px;
|
|
horizontal-stretch: 1.0;
|
|
padding: 10px;
|
|
|
|
/* Top: City */
|
|
Text {
|
|
text: "Los Angeles";
|
|
font-size: 14px;
|
|
color: #fff;
|
|
font-family: "IosevkaTermSlab Nerd Font Mono";
|
|
horizontal-alignment: TextHorizontalAlignment.left;
|
|
}
|
|
|
|
/* Middle: icon on left, temp on right */
|
|
HorizontalLayout {
|
|
spacing: 8px;
|
|
horizontal-stretch: 1.0;
|
|
|
|
/* Icon (fixed size) */
|
|
Text {
|
|
text: "";
|
|
font-family: "IosevkaTermSlab Nerd Font Mono";
|
|
font-size: 40px;
|
|
color: #fff;
|
|
vertical-alignment: TextVerticalAlignment.center;
|
|
}
|
|
|
|
/* flexible spacer pushes the temperature group to the right */
|
|
Rectangle {
|
|
horizontal-stretch: 1.0;
|
|
background: transparent;
|
|
}
|
|
|
|
/* Temperature group (numeric + degree/unit) */
|
|
HorizontalLayout {
|
|
spacing: 6px;
|
|
//vertical-alignment: TextVerticalAlignment.center;
|
|
|
|
Text {
|
|
text: "124.4";
|
|
font-family: "IosevkaTermSlab Nerd Font Mono";
|
|
font-size: 40px;
|
|
color: #fff;
|
|
vertical-alignment: TextVerticalAlignment.center;
|
|
}
|
|
|
|
VerticalLayout {
|
|
spacing: -6px; // bring degree and unit closer to the number
|
|
// keep the combined height near the numeric height
|
|
Text {
|
|
text: "°";
|
|
font-size: 20px;
|
|
color: #fff;
|
|
horizontal-alignment: TextHorizontalAlignment.center;
|
|
vertical-alignment: TextVerticalAlignment.bottom;
|
|
}
|
|
Text {
|
|
text: "F";
|
|
font-size: 18px;
|
|
color: #fff;
|
|
horizontal-alignment: TextHorizontalAlignment.center;
|
|
vertical-alignment: TextVerticalAlignment.top;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Bottom: summary (left) + description (right).
|
|
HorizontalLayout {
|
|
spacing: 10px;
|
|
horizontal-stretch: 1.0;
|
|
height: 28px;
|
|
|
|
// Summary (left) — single prominent line, vertically centered
|
|
Text {
|
|
text: "Thunderstorm";
|
|
font-size: 22px;
|
|
color: #fff;
|
|
font-family: "IosevkaTermSlab Nerd Font Mono";
|
|
vertical-alignment: TextVerticalAlignment.center;
|
|
horizontal-alignment: TextHorizontalAlignment.left;
|
|
// width can be fixed or let text size itself
|
|
}
|
|
|
|
// Description (right) — can take remaining width and occupy same height
|
|
Text {
|
|
text: "Thunderstorm with heavy drizzle";
|
|
font-size: 13px;
|
|
color: #ffffffcc;
|
|
font-family: "IosevkaTermSlab Nerd Font Mono";
|
|
horizontal-alignment: TextHorizontalAlignment.left;
|
|
vertical-alignment: TextVerticalAlignment.center;
|
|
horizontal-stretch: 1.0;
|
|
wrap: word-wrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|