OpenWeatherWidget/widget/ui/widget-popup.slint
Candifloss 3262745771 Style popup UI
- Adjust color, size, space, padding, position, etc.
2025-11-04 12:55:40 +05:30

132 lines
4.9 KiB
Plaintext

export component MainWindow inherits Window {
always-on-top: true;
no-frame: true;
width: 300px;
height: 120px;
background: transparent;
weather_popup := Rectangle {
width: 100%;
height: 100%;
border-radius: 12px;
background: @linear-gradient(160deg, #246a8ac9, #c5edff75);
drop-shadow-blur: 15px;
drop-shadow-color: #00000066;
VerticalLayout {
spacing: 2px; // Consistent vertical spacing
horizontal-stretch: 1.0;
padding: 12px; // Consistent padding throughout
/* Top: City */
Text {
text: "Province of Turin";
font-size: 14px;
color: #fff;
font-family: "IosevkaTermSlab Nerd Font Mono";
horizontal-alignment: TextHorizontalAlignment.left;
height: 18px; // Fixed height for consistent spacing
font-weight: 600;
}
/* Middle: icon on left, temp on right */
HorizontalLayout {
horizontal-stretch: 1.0;
height: 46px; // Fixed height for main content area
padding: 0px;
/* Icon */
Text {
text: "";
font-family: "IosevkaTermSlab Nerd Font Mono";
font-size: 40px;
color: #fff;
vertical-alignment: TextVerticalAlignment.center;
width: 46px; // Fixed width for consistent alignment
}
/* Flexible spacer to help with alignment */
Rectangle {
horizontal-stretch: 1.0;
background: transparent;
}
/* Temperature group */
HorizontalLayout {
spacing: 4px; // Tighter spacing for temperature elements
padding: 0px;
Text {
text: "124.4";
font-family: "IosevkaTermSlab Nerd Font Mono";
font-size: 40px;
color: #fff;
vertical-alignment: TextVerticalAlignment.center;
font-weight: 900;
}
VerticalLayout {
height: 46px; // Match temperature text height
padding: 0px;
spacing: 0px;
Text {
text: "o";
font-size: 20px;
color: #fff;
font-family: "IosevkaTermSlab Nerd Font Mono";
horizontal-alignment: TextHorizontalAlignment.left;
vertical-alignment: TextVerticalAlignment.bottom;
height: 20px;
font-weight: 800;
}
Text {
text: "F";
font-size: 18px;
color: #fff;
font-family: "IosevkaTermSlab Nerd Font Mono";
horizontal-alignment: TextHorizontalAlignment.left;
vertical-alignment: TextVerticalAlignment.top;
height: 20px;
font-weight: 800;
}
}
}
}
/* Bottom: summary + description */
HorizontalLayout {
spacing: 8px;
horizontal-stretch: 1.0;
height: 32px;
padding: 0px;
/* Summary */
Text {
text: "Thunderstorm";
font-size: 18px;
color: #fff;
font-family: "IosevkaTermSlab Nerd Font Mono";
vertical-alignment: TextVerticalAlignment.top;
horizontal-alignment: TextHorizontalAlignment.left;
width: 40%; // Fixed percentage width for consistent layout
font-weight: 800;
}
/* Description */
Text {
text: "Thunderstorm with heavy drizzle";
font-size: 12px;
color: #ffffffcc;
font-family: "IosevkaTermSlab Nerd Font Mono";
horizontal-alignment: TextHorizontalAlignment.left;
vertical-alignment: TextVerticalAlignment.bottom;
horizontal-stretch: 1.0;
wrap: word-wrap;
height: 100%;
font-weight: 600;
}
}
}
}
}