deine cousine 4. grades

resources/bar.css

@@ -136,3 +136,93 @@ button {
 		opacity: 1;
 	}
 }
+
+.battery-widget {
+	padding: 2px 6px;
+	border-radius: 6px;
+	background-color: rgba(255, 255, 255, 0.04);
+}
+
+.battery-widget-icon {
+	min-width: 7ch;
+	text-align: center;
+	font-weight: 700;
+	letter-spacing: 0.08ch;
+}
+
+.battery-widget-text {
+	font-weight: 500;
+}
+
+.battery-widget-normal {
+	background-color: rgba(120, 120, 120, 0.18);
+}
+
+.battery-widget-full {
+	background-color: rgba(76, 129, 76, 0.24);
+}
+
+.battery-widget-full .battery-widget-icon {
+	color: #bdf5bd;
+}
+
+.battery-widget-charging {
+	background-color: rgba(76, 129, 76, 0.28);
+}
+
+.battery-widget-charging .battery-widget-icon {
+	color: #9df19d;
+	animation: battery-charge-glow 1.4s ease-in-out infinite;
+}
+
+.battery-widget-low {
+	background-color: rgba(148, 61, 61, 0.28);
+}
+
+.battery-widget-low .battery-widget-icon {
+	color: #ff8585;
+	animation: battery-low-blink 1s steps(2, start) infinite;
+}
+
+.battery-widget-external {
+	background-color: rgba(100, 100, 100, 0.18);
+}
+
+.battery-widget-external .battery-widget-icon {
+	color: #d7d7d7;
+}
+
+@keyframes battery-charge-glow {
+	0% {
+		opacity: 0.7;
+		transform: translateX(0);
+	}
+
+	50% {
+		opacity: 1;
+		transform: translateX(1px);
+	}
+
+	100% {
+		opacity: 0.7;
+		transform: translateX(0);
+	}
+}
+
+@keyframes battery-low-blink {
+	0% {
+		opacity: 1;
+	}
+
+	49% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0.4;
+	}
+
+	100% {
+		opacity: 0.4;
+	}
+}