ags weather widget fish
This commit is contained in:
wt committed
1 parent
95e4bf8d80
commit
0de5a828a0
4 files changed
+594
-440
No files matched your search
+539
-23
@@ -1,23 +1,539 @@
|
|||||||
import { PopupContent } from '../bar/buttons/Weather.js';
|
export default () => Widget.Box(
|
||||||
import Widget from 'resource:///com/github/Aylur/ags/widget.js';
|
{
|
||||||
import PopupWindow from '../misc/PopupWindow.js';
|
class_name: "weather",
|
||||||
import options from '../options.js';
|
css: "min-height: 2px; min-width: 2px;",
|
||||||
|
},
|
||||||
export default () => PopupWindow({
|
Widget.Box(
|
||||||
name: 'weather',
|
{ class_name: "list" },
|
||||||
anchor: ['top'],
|
Widget.Box(
|
||||||
setup: self => self.hook(options.bar.position, () => {
|
{
|
||||||
self.anchor = [options.bar.position.value];
|
class_name: "weater-box-yesterday",
|
||||||
if (options.bar.position.value === 'top')
|
vertical: true
|
||||||
self.transition = 'slide_down';
|
},
|
||||||
|
Widget.Box(
|
||||||
if (options.bar.position.value === 'bottom')
|
{
|
||||||
self.transition = 'slide_up';
|
class_name: "horizontal",
|
||||||
}),
|
css: "padding: 0 10px 10px 10px;"
|
||||||
child: Widget.Box({
|
},
|
||||||
class_name: 'dashboard',
|
Widget.Label({
|
||||||
children: [
|
class_name: "title",
|
||||||
PopupContent(),
|
wrap: false,
|
||||||
],
|
label: " 0.77mm ↑ 10°C ↓ 4°C THU"
|
||||||
}),
|
})
|
||||||
});
|
),
|
||||||
|
Widget.Box(
|
||||||
|
{ class_name: "horizontal" },
|
||||||
|
Widget.Box(
|
||||||
|
{
|
||||||
|
class_name: "weather-box-hour",
|
||||||
|
vertical: true,
|
||||||
|
},
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "18h",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "⛅️",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "6°C",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: " 0.26mm",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: " 5 kph",
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
Widget.Box(
|
||||||
|
{
|
||||||
|
class_name: "weather-box-hour",
|
||||||
|
vertical: true,
|
||||||
|
},
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "18h",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "⛅️",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "6°C",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: " 0.26mm",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: " 5 kph",
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
Widget.Box(
|
||||||
|
{
|
||||||
|
class_name: "weather-box-hour",
|
||||||
|
vertical: true,
|
||||||
|
},
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "18h",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "⛅️",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "6°C",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
// label: " 0.26mm",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: " 5 kph",
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
),
|
||||||
|
Widget.Box(
|
||||||
|
{
|
||||||
|
class_name: "weather-box-today",
|
||||||
|
vertical: true,
|
||||||
|
},
|
||||||
|
Widget.Box(
|
||||||
|
{
|
||||||
|
class_name: "horizontal",
|
||||||
|
css: "color: black;margin-top: 0;",
|
||||||
|
// space_evenly: true
|
||||||
|
},
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
css: "color: black;font-size: 20px;",
|
||||||
|
wrap: true,
|
||||||
|
label: "",
|
||||||
|
hpack: "start"
|
||||||
|
}),
|
||||||
|
Widget.Box({hexpand: true}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
css: "color: black;margin-right: 10px;font-size: 20px;",
|
||||||
|
wrap: true,
|
||||||
|
label: "↑ 10 ↓ 4 FRI",
|
||||||
|
hpack: "end"
|
||||||
|
})
|
||||||
|
),
|
||||||
|
Widget.Box(
|
||||||
|
{
|
||||||
|
class_name: "horizontal",
|
||||||
|
css: "margin: 10px 0 10px 0;"
|
||||||
|
},
|
||||||
|
Widget.Box(
|
||||||
|
{
|
||||||
|
class_name: "weather-box-hour",
|
||||||
|
vertical: true,
|
||||||
|
css: "color: black;"
|
||||||
|
},
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "18h",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "6°C",
|
||||||
|
}),
|
||||||
|
Widget.Box({vexpand: true}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: " 5 kph",
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
Widget.Box(
|
||||||
|
{
|
||||||
|
class_name: "weather-box-hour",
|
||||||
|
vertical: true,
|
||||||
|
css: "color: black;"
|
||||||
|
},
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "18h",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "6°C",
|
||||||
|
}),
|
||||||
|
Widget.Box({vexpand: true}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: " 5 kph",
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
Widget.Box(
|
||||||
|
{
|
||||||
|
class_name: "weather-box-hour",
|
||||||
|
vertical: true,
|
||||||
|
css: "color: black;"
|
||||||
|
},
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "18h",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "6°C",
|
||||||
|
}),
|
||||||
|
Widget.Box({vexpand: true}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: " 5 kph",
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
Widget.Box(
|
||||||
|
{
|
||||||
|
class_name: "weather-box-hour",
|
||||||
|
vertical: true,
|
||||||
|
css: "color: black;"
|
||||||
|
},
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "18h",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "6°C",
|
||||||
|
}),
|
||||||
|
Widget.Box({vexpand: true}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: " 5 kph",
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
Widget.Box(
|
||||||
|
{
|
||||||
|
class_name: "weather-box-hour",
|
||||||
|
vertical: true,
|
||||||
|
css: "color: black;"
|
||||||
|
},
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "18h",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "6°C",
|
||||||
|
}),
|
||||||
|
Widget.Box({vexpand: true}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: " 5 kph",
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
Widget.Box(
|
||||||
|
{
|
||||||
|
class_name: "weather-box-hour",
|
||||||
|
vertical: true,
|
||||||
|
css: "color: black;"
|
||||||
|
},
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "18h",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "6°C",
|
||||||
|
}),
|
||||||
|
Widget.Box({vexpand: true}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: " 5 kph",
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
Widget.Box(
|
||||||
|
{
|
||||||
|
class_name: "weather-box-hour",
|
||||||
|
vertical: true,
|
||||||
|
css: "color: black;"
|
||||||
|
},
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "18h",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "6°C",
|
||||||
|
}),
|
||||||
|
Widget.Box({vexpand: true}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: " 5 kph",
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
),
|
||||||
|
Widget.Box(
|
||||||
|
{
|
||||||
|
class_name: "weather-box",
|
||||||
|
vertical: true,
|
||||||
|
},
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "MON",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "10h",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "⛅️",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "10°C",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
// label: " 0.26mm",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "↑ 10°C",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "↓ 4°C",
|
||||||
|
})
|
||||||
|
),
|
||||||
|
Widget.Box(
|
||||||
|
{
|
||||||
|
class_name: "weather-box",
|
||||||
|
vertical: true,
|
||||||
|
},
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "TUE",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "10h",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "⛅️",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "10°C",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
// label: " 0.26mm",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "↑ 10°C",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "↓ 4°C",
|
||||||
|
})
|
||||||
|
),
|
||||||
|
Widget.Box(
|
||||||
|
{
|
||||||
|
class_name: "weather-box",
|
||||||
|
vertical: true,
|
||||||
|
},
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "WED",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "10h",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "⛅️",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "10°C",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
// label: " 0.26mm",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "↑ 10°C",
|
||||||
|
}),
|
||||||
|
Widget.Label({
|
||||||
|
class_name: "title",
|
||||||
|
wrap: true,
|
||||||
|
hpack: "center",
|
||||||
|
label: "↓ 4°C",
|
||||||
|
})
|
||||||
|
),
|
||||||
|
)
|
||||||
|
)
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import Weather from "./Weather.js"
|
||||||
|
|
||||||
|
const win = Widget.Window({
|
||||||
|
name: "weather",
|
||||||
|
css: "background: transparent",
|
||||||
|
anchor: ["top", "left"],
|
||||||
|
child: Weather(),
|
||||||
|
})
|
||||||
|
|
||||||
|
App.config({
|
||||||
|
style: "./style.css",
|
||||||
|
window: [win],
|
||||||
|
})
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
.weather {
|
||||||
|
min-width: 600px;
|
||||||
|
min-height: 160px;
|
||||||
|
background-color: #11120E;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 0 0 0 10px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.weather-box {
|
||||||
|
min-width: 80px;
|
||||||
|
background: linear-gradient(to right bottom, black, #171e6e);
|
||||||
|
border-radius: 13px;
|
||||||
|
margin: 10px 10px 10px 0;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.weater-box-yesterday {
|
||||||
|
min-width: 270px;
|
||||||
|
margin: 10px 10px 10px 0;
|
||||||
|
background: linear-gradient(to right bottom, black, #171e6e);
|
||||||
|
border-radius: 13px;
|
||||||
|
padding: 10px 0px 0px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal {
|
||||||
|
margin: 5px 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.weather-box-hour {
|
||||||
|
min-width: 80px;
|
||||||
|
margin: 0 10px 0 0;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.weather-box-today {
|
||||||
|
min-width: 400px;
|
||||||
|
background: linear-gradient(to right bottom, gray, white);
|
||||||
|
margin: 10px 10px 10px 0;
|
||||||
|
border-radius: 13px;
|
||||||
|
padding: 10px 0px 0px 10px;
|
||||||
|
}
|
||||||
@@ -1,417 +0,0 @@
|
|||||||
@mixin calendar {
|
|
||||||
@include widget;
|
|
||||||
padding: $padding*2 $padding*2 0;
|
|
||||||
|
|
||||||
calendar{
|
|
||||||
// all: unset;
|
|
||||||
.view {
|
|
||||||
all:unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.button{
|
|
||||||
@include button($flat: true);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:selected{
|
|
||||||
box-shadow: inset 0 -8px 0 0 transparentize($accent, 0.5),
|
|
||||||
inset 0 0 0 1px $accent;
|
|
||||||
border-radius: $radii*0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.header{
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
color: transparentize($fg-color, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.highlight{
|
|
||||||
background-color: transparent;
|
|
||||||
color: transparentize($accent, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:indeterminate {
|
|
||||||
color: transparentize($fg-color, 0.9);
|
|
||||||
}
|
|
||||||
font-size: 1.1em;
|
|
||||||
padding: .2em;
|
|
||||||
color: $fg_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window#notification .dashboard,
|
|
||||||
window#weather .weather,
|
|
||||||
window#dashboard .window-content {
|
|
||||||
@include floating-widget;
|
|
||||||
|
|
||||||
.notifications {
|
|
||||||
min-width: $notifications-width;
|
|
||||||
|
|
||||||
.header {
|
|
||||||
margin-bottom: $spacing;
|
|
||||||
margin-right: $spacing;
|
|
||||||
|
|
||||||
> label { margin-left: $radii / 2; }
|
|
||||||
|
|
||||||
button {
|
|
||||||
@include button;
|
|
||||||
padding: $padding/2 $padding;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification-scrollable {
|
|
||||||
@include scrollable;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification-list {
|
|
||||||
//fixes weird spacing bug on notification panel - release4
|
|
||||||
// margin-right: $spacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification {
|
|
||||||
@include notification;
|
|
||||||
|
|
||||||
> box {
|
|
||||||
@include widget;
|
|
||||||
padding: $padding;
|
|
||||||
margin-bottom: $spacing;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.placeholder {
|
|
||||||
image { font-size: 7em; }
|
|
||||||
label { font-size: 1.2em; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
separator {
|
|
||||||
background-color: $popover-border-color;
|
|
||||||
min-width: 2px;
|
|
||||||
border-radius: $radii;
|
|
||||||
margin-right: $spacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
.datemenu, .system-info {
|
|
||||||
@include spacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clock-box {
|
|
||||||
padding: $padding;
|
|
||||||
|
|
||||||
.clock {
|
|
||||||
font-size: 5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uptime {
|
|
||||||
color: transparentize($fg-color, 0.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar {
|
|
||||||
@include calendar;
|
|
||||||
}
|
|
||||||
|
|
||||||
//weather popup
|
|
||||||
.weather-info {
|
|
||||||
.weather-icon{
|
|
||||||
font-size: 1.5em;
|
|
||||||
margin-top: 0.3em;
|
|
||||||
margin-bottom: 0.15em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weather-temperature {
|
|
||||||
all: unset;
|
|
||||||
font-size: 1.2em;
|
|
||||||
margin-left: 0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// height of the notification popup
|
|
||||||
window#notification .dashboard {
|
|
||||||
min-height: 32em;
|
|
||||||
}
|
|
||||||
|
|
||||||
// weather popup
|
|
||||||
.weather-refresh {
|
|
||||||
all: unset;
|
|
||||||
border: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weather-refresh:hover {
|
|
||||||
color: gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weather-refresh:active {
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weather-refresh:focus {
|
|
||||||
color: $accent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weather-info {
|
|
||||||
background-color: rgba(81, 164, 231, 0.76);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 0.55em;
|
|
||||||
// margin: 0 5px;
|
|
||||||
|
|
||||||
min-width: 5em;
|
|
||||||
min-height: 10em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weather-temperature {
|
|
||||||
margin-bottom: 0.6em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weather-day {
|
|
||||||
padding: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weather-day:first-child {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
window#dashboard .dashboard,
|
|
||||||
window#quicksettings .window-content {
|
|
||||||
.circular-progress-box {
|
|
||||||
@include widget;
|
|
||||||
padding: $padding;
|
|
||||||
|
|
||||||
.circular-progress {
|
|
||||||
min-height: $sys-info-size;
|
|
||||||
min-width: $sys-info-size;
|
|
||||||
margin: $padding/2;
|
|
||||||
font-size: $padding;
|
|
||||||
background-color: $bg-color;
|
|
||||||
color: $accent;
|
|
||||||
|
|
||||||
image {
|
|
||||||
font-size: 1.8em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// weather window width of the weather widget
|
|
||||||
window#weather .weather .tooltip {
|
|
||||||
.weather-spacing {
|
|
||||||
padding-left: $spacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
.qsweather-widget {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.qs-weather-box-child {
|
|
||||||
min-width: 5em;
|
|
||||||
|
|
||||||
.weather-icon {
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.qs-weather-box-main {
|
|
||||||
min-width: 16.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// shared logic for weather widget, first one only goes to qs
|
|
||||||
window#quicksettings .window-content,
|
|
||||||
window#weather .tooltip {
|
|
||||||
.qsweather-widget {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
margin-top: $padding / 2;
|
|
||||||
border-radius: $radii;
|
|
||||||
}
|
|
||||||
|
|
||||||
.qs-weather-box-main {
|
|
||||||
margin: 0.5em;
|
|
||||||
|
|
||||||
.weather-icon {
|
|
||||||
font-size: 2.42em;
|
|
||||||
margin-left: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weather-temperature {
|
|
||||||
all: unset;
|
|
||||||
font-size: 1.6em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weather-rain {
|
|
||||||
margin-left: 1.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weather-hour {
|
|
||||||
margin-right: 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.qs-weather-box-child {
|
|
||||||
padding-bottom: 0.7em;
|
|
||||||
|
|
||||||
.weather-icon {
|
|
||||||
margin-top: 0.3em;
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weather-temperature {
|
|
||||||
all: unset;
|
|
||||||
margin-bottom: 0.2em;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// .weather-max {
|
|
||||||
// color: #FF8C00;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .weather-min {
|
|
||||||
// color: #87ceeb;
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
|
|
||||||
// fix to keep topbar on the correct height - 29 (hyprctl layers), new on release4
|
|
||||||
.weather.panel-button label{
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
$sliderVolumeMinHeight: 2em;
|
|
||||||
$sliderTroughMinWidth: 2em;
|
|
||||||
|
|
||||||
window#dashboard .datemenu .sub-menu {
|
|
||||||
all:unset;
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:hover{
|
|
||||||
color: $accent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.led-light-color-switcher {
|
|
||||||
.on,
|
|
||||||
.off {
|
|
||||||
min-width: 1.8em;
|
|
||||||
min-height: 3.8em;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 1px solid black;
|
|
||||||
border-radius: 5px;
|
|
||||||
color: black;
|
|
||||||
margin-top: 0.5em;
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:hover{
|
|
||||||
box-shadow: inset 0 0 4px 2px $accent,
|
|
||||||
inset 0 0 0 99px $widget_bg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.on {
|
|
||||||
box-shadow: inset 0px -20px 2px 2px rgba(0, 0, 0, 0.2);
|
|
||||||
margin-right: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.off {
|
|
||||||
box-shadow: inset 0px 20px 2px 2px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider {
|
|
||||||
min-width: 21.3em;
|
|
||||||
margin: 0 0.5em;
|
|
||||||
padding: 0;
|
|
||||||
margin-top: 1em;
|
|
||||||
|
|
||||||
slider {
|
|
||||||
all: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
trough{
|
|
||||||
min-height: $sliderVolumeMinHeight;
|
|
||||||
border-radius: $radii;
|
|
||||||
}
|
|
||||||
|
|
||||||
highlight,
|
|
||||||
progress {
|
|
||||||
background: transparent;
|
|
||||||
border-radius: $radii;
|
|
||||||
min-width: $sliderTroughMinWidth;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-temp.slider,
|
|
||||||
.hue.slider,
|
|
||||||
.brightness.slider {
|
|
||||||
highlight,
|
|
||||||
progress {
|
|
||||||
&:focus,
|
|
||||||
&:hover{
|
|
||||||
box-shadow: inset 0 0 3px 3px $accent,
|
|
||||||
inset 0 0 0 99px $widget_bg;
|
|
||||||
|
|
||||||
border: $accent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-temp.slider {
|
|
||||||
trough{
|
|
||||||
box-shadow:
|
|
||||||
inset 700px 0 10px rgba(98, 159, 255, 0.8), /* 6500K */
|
|
||||||
inset 600px 0 10px rgba(144, 196, 255, 0.8), /* 6000K */
|
|
||||||
inset 500px 0 10px rgba(200, 232, 255, 0.8), /* 5000K */
|
|
||||||
inset 400px 0 10px rgba(255, 255, 255, 0.8), /* 4000K */
|
|
||||||
inset 300px 0 10px rgba(255, 249, 200, 0.8), /* 3000K */
|
|
||||||
inset 200px 0 10px rgba(255, 232, 156, 0.8), /* 2000K */
|
|
||||||
inset 100px 0 10px rgba(255, 184, 104, 0.8), /* 1700K */
|
|
||||||
;
|
|
||||||
}
|
|
||||||
|
|
||||||
highlight,
|
|
||||||
progress {
|
|
||||||
box-shadow: inset 0px 0px 2px 1px black;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hue.slider {
|
|
||||||
trough{
|
|
||||||
box-shadow:
|
|
||||||
inset 350px 0 10px rgba(255, 0, 0, 0.8), /* Red */
|
|
||||||
inset 300px 0 10px rgba(255, 0, 255, 0.8), /* Magenta */
|
|
||||||
inset 250px 0 10px rgba(0, 0, 255, 0.8), /* Blue */
|
|
||||||
inset 200px 0 10px rgba(0, 255, 255, 0.8), /* Cyan */
|
|
||||||
inset 150px 0 10px rgba(0, 255, 0, 0.8), /* Green */
|
|
||||||
inset 100px 0 10px rgba(255, 255, 0, 0.8), /* Yellow */
|
|
||||||
inset 50px 0 10px rgba(255, 0, 0, 0.8), /* Red */
|
|
||||||
;
|
|
||||||
}
|
|
||||||
|
|
||||||
highlight,
|
|
||||||
progress {
|
|
||||||
box-shadow: inset 0px 0px 2px 1px black;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.brightness.slider {
|
|
||||||
trough{
|
|
||||||
box-shadow:
|
|
||||||
inset 500px 0 10px rgba(255, 255, 255, 0.5),
|
|
||||||
inset 450px 0 10px rgba(220, 220, 220, 0.5),
|
|
||||||
inset 400px 0 10px rgba(190, 190, 190, 0.5),
|
|
||||||
inset 350px 0 10px rgba(160, 160, 160, 0.5),
|
|
||||||
inset 300px 0 10px rgba(130, 130, 130, 0.5),
|
|
||||||
inset 250px 0 10px rgba(100, 100, 100, 0.5),
|
|
||||||
inset 200px 0 10px rgba(70, 70, 70, 0.5),
|
|
||||||
inset 150px 0 10px rgba(40, 40, 40, 0.5),
|
|
||||||
inset 100px 0 10px rgba(10, 10, 10, 0.5),
|
|
||||||
inset 50px 0 10px rgba(0, 0, 0, 0.5)
|
|
||||||
;
|
|
||||||
|
|
||||||
highlight,
|
|
||||||
progress {
|
|
||||||
box-shadow: inset 0px 0px 2px 1px white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in new issue
Block a user