diff --git a/css/styles.css b/css/styles.css
deleted file mode 100644
index 3397e5dc0..000000000
--- a/css/styles.css
+++ /dev/null
@@ -1,190 +0,0 @@
-.notification {
-	display: block;
-	padding: 16px 12px;
-	line-height: 1em;
-}
-.notification:not(:last-child) {
-	border-bottom: 1px solid rgb(238, 238, 238);
-}
-
-.notification-container {
-	background-color: #fff;
-	display: none;
-	position: absolute;
-	right: 13px;
-	top: 45px;
-	width: 350px;
-	max-width: 90%;
-	min-height: 100px;
-	max-height: 260px;
-	border-radius: 0 0 3px 3px;
-	border: 1px solid rgb(238, 238, 238);
-}
-
-.notification-container .emptycontent h2 {
-	font-weight: 300;
-	font-size: 16px;
-}
-
-.notification {
-	color: black;
-	position: relative;
-	clear: both;
-}
-
-img.notification-icon {
-	width: 32px;
-	height: 32px;
-	display: block;
-}
-
-/**
- * Vertical alignment from http://stackoverflow.com/a/39923209
- */
-.notification-subject {
-	padding-top: 12px;
-	position: relative;
-}
-
-.notification-subject a {
-	display: inline-block;
-}
-
-.notification-subject > span.image,
-.notification-subject > span.text,
-.notification-subject > a > span.image,
-.notification-subject > a > span.text {
-	display:table-cell;
-	vertical-align:middle;
-}
-
-.notification-subject > span.text,
-.notification-subject > a > span.text {
-	padding-left: 10px;
-}
-
-.notification .notification-empty {
-	color: #999;
-}
-
-.notification > .notification-delete {
-	display: none;
-}
-
-.notification:hover > .notification-delete {
-	display: block !important;
-	position: absolute;
-	top: 7px;
-	right: 12px;
-	opacity: 0.3;
-}
-
-.notification-delete:hover {
-	opacity: 0.8 !important;
-	cursor: pointer;
-}
-
-.notification-delete div, .notifications-button img {
-	cursor: pointer;
-}
-
-.notification-time {
-	text-align: right;
-	opacity: 0.5;
-	padding-right: 32px;
-	margin-top: -7px;
-	position: absolute;
-	right: 0;
-}
-
-.notifications-button {
-	position: relative;
-	float: right;
-	width: 16px;
-	height: 16px;
-	display: block;
-	border-radius: 50%;
-	text-align: center;
-	padding: 10px;
-	opacity: .6;
-	cursor: pointer;
-}
-.notifications-button.hasNotifications,
-.notifications-button:hover,
-.notifications-button:focus {
-	opacity: 1 !important;
-}
-
-.notification .button {
-	border: 1px solid rgba(240,240,240,.9) !important;
-	padding: 0 10px;
-	box-shadow: none;
-	margin: 0;
-}
-
-.notification .notification-actions {
-	padding: 0;
-	display: inline-block;
-	width: 100%;
-	margin: -6px 0;
-}
-
-.notification .notification-actions .action-button.primary {
-	color: #fff;
-}
-
-.notification .notification-actions:first-child {
-	margin-left: auto;
-}
-
-.notification .notification-subject {
-	margin-right: 20px;
-}
-
-.notification .notification-message,
-.notification .notification-full-message {
-	line-height: 20px;
-	padding-bottom: 16px;
-	opacity: .57;
-}
-
-.notification .notification-message img,
-.notification .notification-full-message img,
-.notification .notification-subject img:not(.notification-icon) {
-	max-width: 32px;
-	max-height: 32px;
-	margin: 0 5px 5px 0;
-}
-
-.notification .avatar {
-	vertical-align: middle;
-	display: inline-block;
-	margin: 0 5px 2px 3px;
-}
-
-.notification strong,
-.notification .notification-subject a:not(.full-subject-link) {
-	font-weight: bold;
-	opacity: 1;
-}
-
-/* Menu arrow */
-.notification-container:after {
-	right: 101px;
-}
-
-.notification-wrapper {
-	max-height: 260px;
-	overflow: hidden;
-	overflow-y: auto;
-	margin-right: 3px;
-}
-
-.notifications .emptycontent {
-	margin: 50px 0;
-}
-
-.notifications .avatar-name-wrapper {
-	position: relative;
-	cursor: pointer;
-}
diff --git a/css/styles.scss b/css/styles.scss
new file mode 100644
index 000000000..26ee23525
--- /dev/null
+++ b/css/styles.scss
@@ -0,0 +1,198 @@
+#notifications {
+	.notifications-button {
+		position: relative;
+		float: right;
+		width: 16px;
+		height: 16px;
+		display: block;
+		border-radius: 50%;
+		text-align: center;
+		padding: 10px;
+		opacity: .6;
+		cursor: pointer;
+
+		.hasNotifications,
+		&:hover,
+		&:focus {
+			opacity: 1 !important;
+		}
+
+		img {
+			cursor: pointer;
+		}
+	}
+
+	.notification-container {
+		background-color: #fff;
+		display: none;
+		position: absolute;
+		right: 13px;
+		top: 45px;
+		width: 350px;
+		max-width: 90%;
+		min-height: 100px;
+		max-height: 260px;
+		border-radius: 0 0 3px 3px;
+		border: 1px solid rgb(238, 238, 238);
+
+		.emptycontent {
+			margin: 50px 0;
+
+			h2 {
+				font-weight: 300;
+				font-size: 16px;
+			}
+		}
+
+		/* Menu arrow */
+		&:after {
+			right: 101px;
+		}
+
+		.notification-wrapper {
+			max-height: 260px;
+			overflow: hidden;
+			overflow-y: auto;
+			margin-right: 3px;
+
+
+			.notification {
+				display: block;
+				padding: 16px 12px;
+				line-height: 1em;
+				color: black;
+				position: relative;
+				clear: both;
+
+				&:not(:last-child) {
+					border-bottom: 1px solid rgb(238, 238, 238);
+				}
+
+				.notification-empty {
+					color: #999;
+				}
+
+				> .notification-delete {
+					display: none;
+
+					&:hover {
+						opacity: 0.8 !important;
+						cursor: pointer;
+					}
+
+					div {
+						cursor: pointer;
+					}
+				}
+
+				&:hover > .notification-delete {
+					display: block !important;
+					position: absolute;
+					top: 7px;
+					right: 12px;
+					opacity: 0.3;
+				}
+
+				img.notification-icon {
+					width: 32px;
+					height: 32px;
+					display: block;
+				}
+
+				.notification-time {
+					text-align: right;
+					opacity: 0.5;
+					padding-right: 32px;
+					margin-top: -7px;
+					position: absolute;
+					right: 0;
+				}
+
+				.button {
+					border: 1px solid rgba(240,240,240,.9) !important;
+					padding: 0 10px;
+					box-shadow: none;
+					margin: 0;
+				}
+
+				.notification-actions {
+					padding: 0;
+					display: inline-block;
+					width: 100%;
+					margin: -6px 0;
+
+					.action-button.primary {
+						color: #fff;
+					}
+
+					&:first-child {
+						margin-left: auto;
+					}
+				}
+
+				.notification-subject {
+					padding-top: 12px;
+					position: relative;
+					margin-right: 20px;
+
+					a {
+						display: inline-block;
+
+						&:not(.full-subject-link) {
+							font-weight: bold;
+							opacity: 1;
+						}
+					}
+
+					> span.image,
+					> span.text,
+					> a > span.image,
+					> a > span.text {
+						display:table-cell;
+						vertical-align:middle;
+					}
+
+					> span.text,
+					> a > span.text {
+						padding-left: 10px;
+					}
+
+					img:not(.notification-icon) {
+						max-width: 32px;
+						max-height: 32px;
+						margin: 0 5px 5px 0;
+					}
+				}
+
+				.avatar {
+					vertical-align: middle;
+					display: inline-block;
+					margin: 0 5px 2px 3px;
+				}
+
+				strong {
+					font-weight: bold;
+					opacity: 1;
+				}
+
+				.notification-message,
+				.notification-full-message {
+					line-height: 20px;
+					padding-bottom: 16px;
+					opacity: .57;
+
+					img {
+						max-width: 32px;
+						max-height: 32px;
+						margin: 0 5px 5px 0;
+					}
+				}
+
+				.avatar-name-wrapper {
+					position: relative;
+					cursor: pointer;
+				}
+			}
+		}
+	}
+}
diff --git a/js/components/root.js b/js/components/root.js
index ffa9e49aa..da9c33e12 100644
--- a/js/components/root.js
+++ b/js/components/root.js
@@ -13,7 +13,7 @@
 
 	OCA.Notifications.Components.Root = {
 		template: '' +
-		'<div v-if="!shutdown" class="notifications">' +
+		'<div v-if="!shutdown" id="notifications">' +
 		'  <div class="notifications-button menutoggle" :class="{ hasNotifications: notifications.length }">' +
 		'    <img class="svg" alt="" title="' + t('notifications', 'Notifications') + '" :src="iconPath">' +
 		'  </div>' +