refactor: Consistent LESS box-shadow

frontend/src/App.vue

@@ -820,8 +820,7 @@ img {
 .night-mode {
 	.tippy-box {
 		border: 1px solid var(--light-grey-3);
-		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
-			0 10px 10px rgba(0, 0, 0, 0.22);
+		box-shadow: @box-shadow-dropdown;
 		background-color: var(--white);
 
 		.tippy-content {
@@ -953,7 +952,7 @@ img {
 	font-size: 15px;
 	padding: 5px 10px;
 	border: 1px solid var(--light-grey-3);
-	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+	box-shadow: @box-shadow-dropdown;
 	background-color: var(--white);
 
 	.button {
@@ -1058,7 +1057,7 @@ img {
 
 .tippy-box[data-theme~="stationSettings"] {
 	border: 1px solid var(--light-grey-3);
-	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+	box-shadow: @box-shadow-dropdown;
 	background-color: var(--white);
 
 	button:not(:last-of-type) {
@@ -1070,7 +1069,7 @@ img {
 	font-size: 15px;
 	padding: 0;
 	border: 1px solid var(--light-grey-3);
-	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+	box-shadow: @box-shadow-dropdown;
 	background-color: var(--white);
 	color: var(--dark-grey);
 	width: 350px;
@@ -1192,7 +1191,7 @@ img {
 	font-size: 15px;
 	padding: 0;
 	border: 1px solid var(--light-grey-3);
-	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+	box-shadow: @box-shadow-dropdown;
 	background-color: var(--white);
 	color: var(--dark-grey);
 	width: 100% !important;
@@ -1851,7 +1850,7 @@ h4.section-title {
 	border-radius: @border-radius;
 	padding: 20px;
 	border: unset !important;
-	box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+	box-shadow: @box-shadow;
 
 	* {
 		font-family: Karla, Arial, sans-serif;
@@ -2028,7 +2027,7 @@ html {
 	font-weight: 600;
 	white-space: nowrap;
 	margin-top: 5px;
-	box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+	box-shadow: @box-shadow;
 	transition: all 0.2s ease-in-out;
 
 	&:hover,

frontend/src/components/AdvancedTable.vue

@@ -2038,7 +2038,7 @@ export default {
 
 .table-outer-container {
 	border-radius: @border-radius;
-	box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+	box-shadow: @box-shadow;
 	margin: 10px 0;
 	overflow: hidden;
 
@@ -2407,7 +2407,7 @@ export default {
 	z-index: 5;
 	border: 1px solid var(--light-grey-3);
 	border-radius: @border-radius;
-	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+	box-shadow: @box-shadow-dropdown;
 	background-color: var(--white);
 	color: var(--dark-grey);
 	padding: 5px;

frontend/src/components/layout/MainHeader.vue

@@ -326,7 +326,7 @@ export default {
 
 		.nav-menu {
 			display: none !important;
-			box-shadow: 0 4px 7px rgba(10, 10, 10, 0.1);
+			box-shadow: @box-shadow-dropdown;
 			left: 0;
 			right: 0;
 			top: 100%;

frontend/src/components/modals/EditNews.vue

@@ -244,7 +244,7 @@ export default {
 	#preview {
 		word-break: break-all;
 		overflow: auto;
-		box-shadow: none;
+		box-shadow: 0;
 	}
 
 	textarea,

frontend/src/components/modals/ManageStation/Tabs/Settings.vue

@@ -575,7 +575,7 @@ export default {
 			border-radius: @border-radius;
 			font-size: 18px;
 			color: var(--white);
-			box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
+			box-shadow: @box-shadow;
 			display: flex;
 			text-align: center;
 			justify-content: center;

frontend/src/pages/About.vue

@@ -89,7 +89,7 @@ export default {
 	overflow: hidden;
 	background-color: var(--white);
 	color: var(--dark-grey);
-	box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+	box-shadow: @box-shadow;
 
 	.card-header {
 		font-weight: 700;

frontend/src/pages/Admin/index.vue

@@ -361,7 +361,7 @@ export default {
 }
 
 /deep/ .box {
-	box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+	box-shadow: @box-shadow;
 	display: block;
 
 	&:not(:last-child) {

frontend/src/pages/Admin/tabs/Punishments.vue

@@ -335,7 +335,7 @@ export default {
 	border-radius: @border-radius;
 	background-color: var(--white);
 	color: var(--dark-grey);
-	box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+	box-shadow: @box-shadow;
 
 	.card-header {
 		font-weight: 700;

frontend/src/pages/Admin/tabs/Statistics.vue

@@ -269,7 +269,7 @@ td {
 	border-radius: @border-radius;
 	background-color: var(--white);
 	color: var(--dark-grey);
-	box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+	box-shadow: @box-shadow;
 
 	.card-header {
 		font-weight: 700;

frontend/src/pages/Home.vue

@@ -1149,7 +1149,7 @@ html {
 	max-width: 400px;
 	flex-wrap: wrap;
 	border-radius: @border-radius;
-	box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+	box-shadow: @box-shadow;
 
 	.card-content {
 		display: flex;
@@ -1342,7 +1342,7 @@ html {
 }
 
 .station-card:hover {
-	box-shadow: 0 2px 3px rgba(10, 10, 10, 0.3), 0 0 10px rgba(10, 10, 10, 0.3);
+	box-shadow: @box-shadow-hover;
 	transition: all ease-in-out 0.2s;
 }
 

frontend/src/pages/Profile/index.vue

@@ -394,7 +394,7 @@ export default {
 		button {
 			outline: none;
 			border: none;
-			box-shadow: none;
+			box-shadow: 0;
 			color: var(--primary-color);
 			font-size: 22px;
 			line-height: 26px;
@@ -418,6 +418,7 @@ export default {
 		background-color: var(--white);
 		padding: 30px 50px;
 		border-radius: @border-radius;
+		box-shadow: @box-shadow;
 
 		h3 {
 			font-weight: 400;
@@ -454,5 +455,8 @@ export default {
 		.activity-type-icon {
 		color: var(--light-grey-2);
 	}
+	/deep/ .content {
+		box-shadow: 0;
+	}
 }
 </style>

frontend/src/pages/Settings/index.vue

@@ -147,6 +147,12 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.night-mode {
+	.container .content {
+		box-shadow: 0 !important;
+	}
+}
+
 /deep/ .character-counter {
 	display: flex;
 	justify-content: flex-end;
@@ -167,6 +173,7 @@ export default {
 		background-color: var(--white);
 		padding: 30px 50px;
 		border-radius: @border-radius;
+		box-shadow: @box-shadow;
 	}
 
 	#sidebar-with-content {
@@ -201,7 +208,7 @@ export default {
 		a {
 			outline: none;
 			border: none;
-			box-shadow: none;
+			box-shadow: 0;
 			color: var(--primary-color);
 			font-size: 22px;
 			line-height: 26px;

frontend/src/pages/Team.vue

@@ -307,8 +307,7 @@ h2 {
 			margin-top: 5px;
 			font-size: 16px;
 			text-align: center;
-			box-shadow: 0 1px 2px rgba(10, 10, 10, 0.1),
-				0 0 0 1px rgba(10, 10, 10, 0.1);
+			box-shadow: @box-shadow;
 			&:not(:last-of-type) {
 				margin-right: 5px;
 			}
@@ -334,8 +333,7 @@ h2 {
 		margin: 10px;
 		text-align: left;
 		border-radius: @border-radius;
-		box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1),
-			0 0 0 1px rgba(10, 10, 10, 0.1);
+		box-shadow: @box-shadow;
 		.card-header {
 			display: flex;
 			position: relative;

frontend/src/styles/variables.less

@@ -1 +1,4 @@
 @border-radius: 5px;
+@box-shadow-dropdown: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+@box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+@box-shadow-hover: 0 2px 3px rgba(10, 10, 10, 0.3), 0 0 10px rgba(10, 10, 10, 0.3);