Add login background animation

dev/Screen/User/Login.js

@@ -1,4 +1,9 @@
 
+import $ from '$';
+import _ from '_';
+
+import {$win} from 'Common/Globals';
+
 import {AbstractScreen} from 'Knoin/AbstractScreen';
 
 import {LoginUserView} from 'View/User/Login';
@@ -13,6 +18,35 @@ class LoginUserScreen extends AbstractScreen
 
 	onShow() {
 		getApp().setWindowTitle('');
+		this.initFunBackgroud();
+	}
+
+	getHeightAndWidth() {
+		const
+			height = $win.height(),
+			width = $win.width();
+
+		return {height, width};
+	}
+
+	initFunBackgroud() {
+
+		const
+			$bg = $('#rl-bg'),
+			movementStrength = 25,
+			winHeight = $win.height(),
+			winWidth = $win.width(),
+			height = movementStrength / winHeight,
+			width = movementStrength / winWidth,
+			winHeightHalf = winHeight / 2,
+			winWidthHalf = winWidth / 2;
+
+		$('#rl-app').on('mousemove', _.throttle((e) => {
+			$bg.css({
+				top: height * (e.pageY - winHeightHalf) * -1 - movementStrength,
+				left: width * (e.pageX - winWidthHalf) * -1 - movementStrength
+			});
+		}, 1));
 	}
 }
 

dev/Styles/Layout.less

@@ -2,10 +2,10 @@
 #rl-bg {
 	z-index: -1;
 	position: absolute;
-	left: 0;
-	right: 0;
+	left: -0;
+	right: -25px;
 	top: 0;
-	bottom: 0;
+	bottom: -25px;
 }
 
 #rl-content {

rainloop/v/0.0.0/app/templates/Themes/template.less

@@ -310,7 +310,7 @@ html.glass {
 					text-shadow: none !important;
 				}
 
-				&:focus {
+				&:focus, &:hover {
 					border-color: @glass-color;
 				}
 			}