dan/Nertivia-Client
1
0
Fork 0
mirror of https://github.com/danbulant/Nertivia-Client synced 2026-06-17 13:31:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

new design

Browse source
This commit is contained in:
supertiger1234 2020-01-31 10:19:56 +00:00
parent 22c13e894f
commit 02f677a170
17 changed files with 90 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/index.html
View file

@ -42,7 +42,7 @@
<!-- Preview meta tags -->
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet" async>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" async>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap" rel="stylesheet" async>
<!-- Google recaptcha
<script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer> -->

2
src/Main.vue
View file

@ -16,7 +16,7 @@ body {
}
#app {
font-family: "Roboto", sans-serif;
font-family: "Montserrat", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #383838;

15
src/components/app/MainNav.vue
View file

@ -264,6 +264,10 @@ export default {
flex-shrink: 0;
}
.item {
font-size: 24px;
width: 48px;
height: 48px;
margin-left: 14px;
position: relative;
display: flex;
flex-shrink: 0;
@ -271,20 +275,16 @@ export default {
align-content: center;
align-items: center;
color: white;
font-size: 30px;
align-self: center;
width: 50px;
height: 50px;
margin-left: 10px;
border-radius: 50%;
cursor: pointer;
user-select: none;
transition: 0.2s;
&:hover {
background: #093b4b;
background: rgba(0, 0, 0, 0.3);
}
&.selected {
background: #072c38;
background: rgba(0, 0, 0, 0.3);
}
}
@ -295,7 +295,8 @@ export default {
flex-direction: column;
align-items: center;
align-content: center;
font-size: 15px;
font-size: 14px;
font-weight: bold;
position: absolute;
z-index: 115651;
top: 5px;

8
src/components/app/MemberTemplate.vue
View file

@ -136,7 +136,7 @@ export default {
}
.member:hover {
background: #063442;
background: rgba(0, 0, 0, 0.3);
}
.information {
@ -151,9 +151,11 @@ export default {
}
.type-box {
padding: 3px;
border-radius: 5px;
padding: 4px;
border-radius: 2px;
font-size: 12px;
height: 100%;
margin-right: 10px;
background: rgb(255, 71, 71);
}

2
src/components/app/MembersList.vue
View file

@ -162,7 +162,7 @@ export default {
.header {
height: 50px;
width: 100%;
background: #083a4a;
background: rgba(0, 0, 0, 0.2);
display: flex;
flex-shrink: 0;
}

29
src/components/app/MessageLogs.vue
View file

@ -362,35 +362,6 @@ export default {
align-self: center;
}
}
.back-to-bottom-button {
&:hover {
background: rgb(23, 124, 255);
box-shadow: 0px 0px 15px 0px #0000008a;
}
transition: 0.2s;
background: rgba(23, 124, 255, 0.818);
color: white;
position: absolute;
bottom: 15px;
right: 25px;
border-radius: 10px;
height: 50px;
z-index: 2;
display: flex;
justify-content: center;
flex-shrink: 0;
box-shadow: 0px 0px 7px 0px #0000008a;
align-content: center;
align-items: center;
padding-left: 10px;
user-select: none;
cursor: pointer;
.material-icons {
align-self: center;
flex-shrink: 0;
font-size: 35px;
}
}
.show-message-animation {
animation: showMessage 0.3s ease-in-out;

18
src/components/app/MessagePanel.vue
View file

@ -856,6 +856,7 @@ export default {
flex-direction: column;
overflow: hidden;
position: relative;
background: rgba(0, 0, 0, 0.4);
}
.message-logs {
overflow: auto;
@ -872,7 +873,7 @@ export default {
flex-direction: column;
padding-bottom: 10px;
position: relative;
background: #014757;
background: rgba(0, 0, 0, 0.2);
}
.attachment-button {
@ -918,7 +919,7 @@ export default {
}
.chat-input {
font-family: "Roboto", sans-serif;
font-family: "Montserrat", sans-serif;
background: transparent;
color: white;
width: 100%;
@ -994,16 +995,17 @@ export default {
.back-to-bottom-button {
&:hover {
background: rgba(0, 0, 0, 0.9);
background: rgba(0, 0, 0, 0.8);
}
transition: 0.2s;
background: rgba(0, 0, 0, 0.8);
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(3px);
border-radius: 100px;
color: white;
position: absolute;
bottom: 15px;
right: 25px;
height: 50px;
height: 52px;
z-index: 2;
display: flex;
justify-content: center;
@ -1011,13 +1013,14 @@ export default {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
align-content: center;
align-items: center;
padding-left: 10px;
padding-left: 15px;
padding-right: 10px;
user-select: none;
cursor: pointer;
.material-icons {
align-self: center;
flex-shrink: 0;
font-size: 35px;
font-size: 25px;
}
}
@ -1037,7 +1040,6 @@ export default {
margin-left: 2px;
margin-bottom: 10px;
flex-shrink: 0;
background: #024b5c;
.markdown-icon {
font-size: 21px;
flex-shrink: 0;

2
src/components/app/MessagePanel/Heading.vue
View file

@ -68,7 +68,7 @@ export default {
<style scoped>
.heading {
background: #073240;
background: rgba(0, 0, 0, 0.2);
margin-bottom: 0;
height: 50px;
display: flex;

5
src/components/app/MessageTemplate.vue
View file

@ -356,8 +356,8 @@ export default {
</script>
<style scoped lang="scss">
$self-message-color: #053746;
$message-color: #03222b;
$self-message-color: rgba(255, 255, 255, 0.1);
$message-color: rgba(0, 0, 0, 0.3);
.container {
position: relative;
@ -550,6 +550,7 @@ $message-color: #03222b;
margin: auto 0;
transition: 0.1s;
cursor: pointer;
font-weight: bold;
}
.username:hover {

2
src/components/app/MyMiniInformation.vue
View file

@ -105,7 +105,7 @@ export default {
align-items: center;
height: 50px;
transition: 0.3s;
background-color: #083a4a;
background-color: rgba(0, 0, 0, 0.2);
}
.avatar {

2
src/components/app/Popouts/Popouts/uploadDialog.vue
View file

@ -285,7 +285,7 @@ export default {
display: flex;
}
.chat-input {
font-family: "Roboto", sans-serif;
font-family: "Montserrat", sans-serif;
background: #014655;
color: white;
width: 100%;

10
src/components/app/ServerList.vue
View file

@ -170,6 +170,16 @@ export default {
.extendBanner {
height: 130px;
background-color: rgb(32, 32, 32);
overflow: hidden;
.sub-banner {
align-items: flex-end;
padding-bottom: 10px;
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
height: 70px;
}
.options-button {
margin-bottom: -7px;
}
}
.banner-image {
position: absolute;

42
src/components/app/ServerTemplate/ChannelTemplate.vue
View file

@ -3,10 +3,14 @@
class="channel"
:class="{ selected: selectedChannelID === channelData.channelID }"
>
<i class="material-icons">storage</i>
<i class="material-icons">arrow_forward_ios</i>
<div class="channel-name">{{ channelData.name }}</div>
<div class="notification" v-if="hasNotifications">
{{ hasNotifications.count }}
<div
class="notification"
v-if="hasNotifications"
:title="hasNotifications.count"
>
{{ hasNotifications.count > 99 ? "99+" : hasNotifications.count }}
</div>
</div>
</template>
@ -45,23 +49,30 @@ export default {
position: relative;
display: flex;
align-items: center;
padding: 5px;
transition: background 0.3s;
padding: 10px;
transition: background 0.2s;
font-size: 14px;
cursor: pointer;
color: white;
color: rgba(255, 255, 255, 0.8);
user-select: none;
overflow: hidden;
padding-right: 10px;
padding-left: 10px;
margin: 5px;
margin: 2px;
margin-left: 10px;
margin-right: 10px;
border-radius: 4px;
}
.material-icons {
font-size: 11px;
}
.channel:hover {
background: #053c4c;
background: #00477d;
color: white;
}
.channel.selected {
background: #053240;
background: #003660;
color: white;
}
.channel-name {
@ -78,12 +89,13 @@ export default {
text-align: center;
justify-content: center;
background: #ee3e34;
height: 34px;
right: 0;
top: 0;
height: 23px;
width: 23px;
border-radius: 50%;
right: 10px;
top: 8px;
bottom: 0;
min-width: 40px;
max-width: 70px;
border-radius: 1px;
font-size: 12px;
font-weight: bold;
}
</style>

10
src/components/app/Tabs/Explore.vue
View file

@ -224,18 +224,18 @@ export default {
&::after {
content: "BETA";
position: absolute;
background: #ff3333;
border-radius: 5px;
font-size: 9px;
background: #f33;
border-radius: 2px;
font-size: 10px;
padding: 2px;
bottom: 20px;
bottom: 22px;
z-index: 999;
}
}
.details {
align-self: center;
.title {
font-size: 20px;
font-size: 18px;
margin-bottom: 5px;
position: relative;
}

13
src/components/app/Tabs/Explore/serverTemplate.vue
View file

@ -156,7 +156,14 @@ export default {
text-overflow: ellipsis;
}
.material-icons {
color: #66e0ff;
color: #ffffff;
width: 12px;
height: 12px;
background-color: #5dcce8;
font-size: 13px;
border-radius: 50%;
padding: 4px;
margin-top: 3px;
margin-left: 5px;
}
}
@ -209,8 +216,8 @@ export default {
align-items: center;
justify-content: center;
width: 100%;
height: 40px;
border-radius: 4px;
height: 36px;
border-radius: 2px;
background: rgba(0, 179, 219, 0.8);
transition: 0.2s;
margin-right: 10px;

4
src/components/app/Tabs/Explore/themesTemplate.vue
View file

@ -216,8 +216,8 @@ export default {
align-items: center;
justify-content: center;
width: 100%;
height: 40px;
border-radius: 4px;
height: 36px;
border-radius: 2px;
background: rgba(0, 179, 219, 0.8);
transition: 0.2s;
margin-right: 10px;

8
src/views/App.vue
View file

@ -1,7 +1,7 @@
<template>
<div id="app" ref="app" :class="{ desktop: isElectron }">
<vue-headful :title="title" description="Nertivia Chat Client" />
<div class="background-image"></div>
<div class="background-color"></div>
<transition name="fade-between-two" appear>
<ConnectingScreen v-if="!loggedIn" />
<div class="box" v-if="loggedIn">
@ -370,15 +370,15 @@ export default {
<style>
textarea {
font-family: "Roboto", sans-serif;
font-family: "Montserrat", sans-serif;
}
.background-image {
.background-color {
position: fixed;
z-index: -1;
width: 100%;
height: 100%;
background: linear-gradient(#0b4155, #01677e);
background: linear-gradient(to bottom, #005799 0, #0076d1);
}
.panel-layout {