added desktop class and removed notify animation.

src/components/app/FriendsList.vue

@@ -6,12 +6,12 @@
       <div class="tabs">
         <div
           class="tab"
-          :class="{notifyAnimation: friendRequestExists, selected: currentTab === 0}"
+          :class="{notify: friendRequestExists, selected: currentTab === 0}"
           @click="currentTab = 0"
         ><div class="material-icons">group</div>Friends</div>
         <div
           class="tab"
-          :class="{notifyAnimation: DMNotification, selected: currentTab === 1 }"
+          :class="{notify: DMNotification, selected: currentTab === 1 }"
           @click="currentTab = 1"
         ><div class="material-icons">access_time</div>Recents</div>
       </div>
@@ -198,27 +198,11 @@ export default {
   flex-shrink: 0;
 }
 
-.notifyAnimation {
+.notify {
-  animation: notifyAnime;
+  background: rgba(255, 0, 0, 0.568);
-  animation-duration: 1s;
-  animation-iteration-count: infinite;
-  animation-fill-mode: forwards;
-}
-@keyframes notifyAnime {
-  0% {
-    background: rgba(121, 3, 3, 0.541);
-  }
-  40% {
-    background: rgba(255, 0, 0, 0.568);
-  }
-  60% {
-    background: rgba(255, 0, 0, 0.568);
-  }
-  100% {
-    background: rgba(121, 3, 3, 0.541);
-  }
 }
 
+
 @media (max-width: 600px) {
   .content{
     border-radius: 0;

src/components/app/MainNav.vue

@@ -344,28 +344,11 @@ export default {
   right: 5px;
   width: 20px;
   height: 20px;
-  animation: notifyAnime;
-  animation-duration: 1s;
-  animation-iteration-count: infinite;
-  animation-fill-mode: forwards;
   border-radius: 50%;
   background: rgba(255, 23, 23, 0.753);
   flex-shrink: 0;
 }
-@keyframes notifyAnime {
+
-  0% {
-    opacity: 0.2;
-  }
-  40% {
-    opacity: 1;
-  }
-  60% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.2;
-  }
-}
 
 .tool-tip {
   color: white;

src/components/app/Navigation.vue

@@ -366,28 +366,11 @@ export default {
   right: 5px;
   width: 20px;
   height: 20px;
-  animation: notifyAnime;
-  animation-duration: 1s;
-  animation-iteration-count: infinite;
-  animation-fill-mode: forwards;
   border-radius: 50%;
   background: rgba(255, 23, 23, 0.753);
   flex-shrink: 0;
 }
-@keyframes notifyAnime {
+
-  0% {
-    opacity: 0.2;
-  }
-  40% {
-    opacity: 1;
-  }
-  60% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.2;
-  }
-}
 
 .tool-tip {
   color: white;

src/components/app/ServerTemplate/ChannelTemplate.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="channel"
-    :class="{notifyAnimation: hasNotifications, selected: selectedChannelID === channelData.channelID}"
+    :class="{notify: hasNotifications, selected: selectedChannelID === channelData.channelID}"
   >
     <i class="material-icons">storage</i>
     <div class="channel-name">{{ channelData.name }}</div>
@@ -36,25 +36,8 @@ export default {
 
 
 <style scoped>
-.notifyAnimation {
+.notify {
-  animation: notifyAnime;
+  background: rgba(255, 0, 0, 0.411);
-  animation-duration: 1s;
-  animation-iteration-count: infinite;
-  animation-fill-mode: forwards;
-}
-@keyframes notifyAnime {
-  0% {
-    background: rgba(255, 0, 0, 0.198);
-  }
-  40% {
-    background: rgba(255, 0, 0, 0.411);
-  }
-  60% {
-    background: rgba(255, 0, 0, 0.411);
-  }
-  100% {
-    background: rgba(255, 0, 0, 0.198);
-  }
 }
 
 .channel {

src/components/app/ServerTemplate/ServerTemplate.vue

@@ -116,7 +116,7 @@ export default {
     background: #ffffffc5;
   }
 }
-.notifyAnimation:before {
+.notifyAnimation:after {
   content: "!";
   color: white;
   display: flex;
@@ -131,25 +131,8 @@ export default {
   right: 5px;
   width: 20px;
   height: 20px;
-  animation: notifyAnime;
-  animation-duration: 1s;
-  animation-iteration-count: infinite;
-  animation-fill-mode: forwards;
   border-radius: 50%;
   background: rgba(255, 23, 23, 0.753);
 }
-@keyframes notifyAnime {
+
-  0% {
-    opacity: 1;
-  }
-  40% {
-    opacity: 0.9;
-  }
-  60% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.2;
-  }
-}
 </style>

src/components/app/relationships/FriendsTemplate.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="friend"
-    :class="{selected: uniqueIDSelected, notifyAnimation: (notifications && notifications > 0), tree }"
+    :class="{selected: uniqueIDSelected, notify: (notifications && notifications > 0), tree }"
     @click="openChat"
     @mouseover="hover = true"
     @mouseleave="hover = false"
@@ -136,27 +136,11 @@ export default {
 .tree {
   padding-left: 22px;
 }
-.notifyAnimation {
+.notify {
-  animation: notifyAnime;
+  background: rgba(255, 0, 0, 0.411);
-  animation-duration: 1s;
-  animation-iteration-count: infinite;
-  animation-fill-mode: forwards;
-}
-@keyframes notifyAnime {
-  0% {
-    background: rgba(255, 0, 0, 0.198);
-  }
-  40% {
-    background: rgba(255, 0, 0, 0.411);
-  }
-  60% {
-    background: rgba(255, 0, 0, 0.411);
-  }
-  100% {
-    background: rgba(255, 0, 0, 0.198);
-  }
 }
 
+
 .friend:hover {
   background: #053c4c;
 }

src/views/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app" ref="app">
+  <div id="app" ref="app" :class="{desktop: isElectron}">
     <vue-headful :title="title" description="Nertivia Chat Client" />
     <div class="background-image"></div>
     <transition name="fade-between-two" appear>
@@ -238,32 +238,13 @@ export default {
   height: 100%;
 }
 
-.notifyAnimation {
-  animation: notifyAnime;
-  animation-duration: 1s;
-  animation-iteration-count: infinite;
-  animation-fill-mode: forwards;
-}
 .box {
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
 }
-@keyframes notifyAnime {
+
-  0% {
-    background: rgba(121, 3, 3, 0.541);
-  }
-  40% {
-    background: rgba(255, 0, 0, 0.568);
-  }
-  60% {
-    background: rgba(255, 0, 0, 0.568);
-  }
-  100% {
-    background: rgba(121, 3, 3, 0.541);
-  }
-}
 
 .coming-soon {
   display: flex;