users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/weather.js

08d200c7b0c9210afe5bc2819b99a2726b4421a7 · 3.4 KB · 163 lines raw

1	// Styles for /lib/components/data/weather.jsx component
2	export const weatherStyles = /* css */ `
3	.weather {
4	position: relative;
5	color: var(--foreground);
6	background-color: var(--minor);
7	overflow: hidden;
8	z-index: 0;
9	}
10	.simple-bar--widgets-background-color-as-foreground .weather {
11	background-color: transparent;
12	}
13	.weather__gradient {
14	position: absolute;
15	top: 0;
16	left: 0;
17	width: 100%;
18	height: 100%;
19	opacity: 0.65;
20	z-index: -1;
21	}
22	.weather--sunrise .weather__gradient {
23	background: linear-gradient(to top right, var(--main), var(--red), var(--yellow), var(--blue));
24	}
25	.weather--sunset .weather__gradient {
26	background: linear-gradient(to bottom right, var(--blue), var(--yellow), var(--red), var(--magenta), var(--main));
27	}
28	.simple-bar--no-color-in-data .weather__gradient {
29	display: none;
30	}
31	.sun-icon,
32	.moon-icon {
33	transform-origin: 50% 50%;
34	animation: sunny-and-moon-scale-and-rotate 2560ms ease infinite;
35	}
36	.simple-bar--animations-disabled .sun-icon,
37	.simple-bar--animations-disabled .moon-icon {
38	animation: none;
39	}
40	@keyframes sunny-and-moon-scale-and-rotate {
41	50% {
42	transform: rotate(14deg);
43	}
44	}
45	.cloud-icon {
46	transform: translateY(-1%) rotate(5deg);
47	animation: cloud-levitating 2560ms ease-in-out infinite;
48	}
49	.simple-bar--animations-disabled .cloud-icon {
50	animation: none;
51	}
52	@keyframes cloud-levitating {
53	50% {
54	transform: translateY(10%) rotate(-3deg);
55	}
56	}
57	.rain-icon > g > path {
58	animation: rain-translate 2560ms ease-in-out infinite;
59	}
60	.simple-bar--animations-disabled .rain-icon > g > path {
61	animation: none;
62	}
63	.rain-icon > g > path:nth-child(2) {
64	animation-delay: 320ms;
65	}
66	.rain-icon > g > path:nth-child(1) {
67	animation-delay: 640ms;
68	}
69	@keyframes rain-translate {
70	0% {
71	opacity: 0;
72	transform: translateY(-10%);
73	}
74	50% {
75	opacity: 0.5;
76	}
77	100% {
78	opacity: 0;
79	transform: translateY(10%);
80	}
81	}
82	.snow-icon > g > path {
83	animation: snow-translate 2560ms ease-in-out infinite;
84	}
85	.simple-bar--animations-disabled .snow-icon > g > path {
86	animation: none;
87	}
88	.snow-icon > g > path:nth-child(5) {
89	animation-delay: 320ms;
90	}
91	.snow-icon > g > path:nth-child(4) {
92	animation-delay: 640ms;
93	}
94	.snow-icon > g > path:nth-child(3) {
95	animation-delay: 960ms;
96	}
97	.snow-icon > g > path:nth-child(2) {
98	animation-delay: 1280ms;
99	}
100	.snow-icon > g > path:nth-child(1) {
101	animation-delay: 1600ms;
102	}
103	@keyframes phasing-snow {
104	50% {
105	opacity: 0.1;
106	}
107	}
108	.fog-icon > g > path {
109	animation: fog-phasing 2560ms ease-in-out infinite;
110	}
111	.simple-bar--animations-disabled .fog-icon > g > path {
112	animation: none;
113	}
114	.fog-icon > g > path:nth-child(8) {
115	animation-delay: -640ms;
116	}
117	.fog-icon > g > path:nth-child(7) {
118	animation-delay: -320ms;
119	}
120	.fog-icon > g > path:nth-child(5) {
121	animation-delay: 320ms;
122	}
123	.fog-icon > g > path:nth-child(4) {
124	animation-delay: 640ms;
125	}
126	.fog-icon > g > path:nth-child(3) {
127	animation-delay: 960ms;
128	}
129	.fog-icon > g > path:nth-child(2) {
130	animation-delay: 1280ms;
131	}
132	.fog-icon > g > path:nth-child(1) {
133	animation-delay: 1600ms;
134	}
135	@keyframes fog-phasing {
136	50% {
137	opacity: 0.2;
138	}
139	}
140	.storm-icon > g > path {
141	animation: flashing-storm 2560ms ease-in-out infinite;
142	}
143	.simple-bar--animations-disabled .storm-icon > g > path {
144	animation: none;
145	}
146	.storm-icon > g > path:nth-child(2) {
147	animation-delay: 320ms;
148	}
149	.storm-icon > g > path:nth-child(1) {
150	animation-delay: 640ms;
151	}
152	@keyframes flashing-storm {
153	15%,
154	30%,
155	34% {
156	opacity: 1;
157	}
158	16%,
159	31% {
160	opacity: 0;
161	}
162	}
163	`;