dan/Nertivia-Client
1
0
Fork 0
mirror of https://github.com/danbulant/Nertivia-Client synced 2026-07-05 11:00:50 +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 --> <!-- 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> <link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap" rel="stylesheet" async>
<!-- Google recaptcha <!-- Google recaptcha
<script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer> --> <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 { #app {
font-family: "Roboto", sans-serif; font-family: "Montserrat", sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
color: #383838; color: #383838;

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

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

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

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

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

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

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

@ -362,35 +362,6 @@ export default {
align-self: center; 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 { .show-message-animation {
animation: showMessage 0.3s ease-in-out; animation: showMessage 0.3s ease-in-out;

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

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

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

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

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

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

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

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

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

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

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

@ -170,6 +170,16 @@ export default {
.extendBanner { .extendBanner {
height: 130px; height: 130px;
background-color: rgb(32, 32, 32); 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 { .banner-image {
position: absolute; position: absolute;

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

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

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

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

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

@ -156,7 +156,14 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.material-icons { .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; margin-left: 5px;
} }
} }
@ -209,8 +216,8 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 40px; height: 36px;
border-radius: 4px; border-radius: 2px;
background: rgba(0, 179, 219, 0.8); background: rgba(0, 179, 219, 0.8);
transition: 0.2s; transition: 0.2s;
margin-right: 10px; margin-right: 10px;

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

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

8
src/views/App.vue
View file

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