ags weather widget fish
This commit is contained in:
+539
-23
@@ -1,23 +1,539 @@
|
||||
import { PopupContent } from '../bar/buttons/Weather.js';
|
||||
import Widget from 'resource:///com/github/Aylur/ags/widget.js';
|
||||
import PopupWindow from '../misc/PopupWindow.js';
|
||||
import options from '../options.js';
|
||||
|
||||
export default () => PopupWindow({
|
||||
name: 'weather',
|
||||
anchor: ['top'],
|
||||
setup: self => self.hook(options.bar.position, () => {
|
||||
self.anchor = [options.bar.position.value];
|
||||
if (options.bar.position.value === 'top')
|
||||
self.transition = 'slide_down';
|
||||
|
||||
if (options.bar.position.value === 'bottom')
|
||||
self.transition = 'slide_up';
|
||||
}),
|
||||
child: Widget.Box({
|
||||
class_name: 'dashboard',
|
||||
children: [
|
||||
PopupContent(),
|
||||
],
|
||||
}),
|
||||
});
|
||||
export default () => Widget.Box(
|
||||
{
|
||||
class_name: "weather",
|
||||
css: "min-height: 2px; min-width: 2px;",
|
||||
},
|
||||
Widget.Box(
|
||||
{ class_name: "list" },
|
||||
Widget.Box(
|
||||
{
|
||||
class_name: "weater-box-yesterday",
|
||||
vertical: true
|
||||
},
|
||||
Widget.Box(
|
||||
{
|
||||
class_name: "horizontal",
|
||||
css: "padding: 0 10px 10px 10px;"
|
||||
},
|
||||
Widget.Label({
|
||||
class_name: "title",
|
||||
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