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

updated the design on the rest of the places

Browse source
This commit is contained in:
supertiger1234 2020-02-06 20:22:56 +00:00
parent 017b76e9c1
commit df0b830836
22 changed files with 136 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/app/FriendsList.vue
View file

@ -147,6 +147,7 @@ export default {
color: white; color: white;
flex-shrink: 0; flex-shrink: 0;
position: relative; position: relative;
background: rgba(0, 0, 0, 0.2);
} }
.tab { .tab {
display: flex; display: flex;
@ -171,10 +172,10 @@ export default {
content: ""; content: "";
position: absolute; position: absolute;
height: 3px; height: 3px;
left: 0; left: 10px;
right: 0; right: 10px;
bottom: 0; bottom: 0;
background: rgb(177, 177, 177); background: rgba(255, 255, 255, 0.4);
} }
.tab::before { .tab::before {
content: ""; content: "";
@ -190,8 +191,8 @@ export default {
content: ""; content: "";
position: absolute; position: absolute;
height: 3px; height: 3px;
left: 0; left: 10px;
right: 0; right: 10px;
bottom: 0; bottom: 0;
background: rgb(255, 255, 255); background: rgb(255, 255, 255);
} }

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

@ -841,7 +841,7 @@ export default {
top: -25px; top: -25px;
left: 0; left: 0;
right: 0; right: 0;
z-index: 999999; z-index: 1;
} }
.hidden { .hidden {
display: none; display: none;
@ -1006,7 +1006,7 @@ export default {
border-radius: 100px; border-radius: 100px;
color: white; color: white;
position: absolute; position: absolute;
bottom: 15px; bottom: 30px;
right: 25px; right: 25px;
height: 52px; height: 52px;
z-index: 2; z-index: 2;

4
src/components/app/Navigation.vue
View file

@ -315,10 +315,10 @@ export default {
opacity: 0.8; opacity: 0.8;
transition: 0.2s; transition: 0.2s;
&:hover { &:hover {
background: #093b4b; background: rgba(0, 0, 0, 0.2);
} }
&.selected { &.selected {
background: #042a2b; background: rgba(0, 0, 0, 0.2);
} }
} }

17
src/components/app/Popouts/Popouts/AddFriend.vue
View file

@ -118,13 +118,18 @@ export default {
margin: auto; margin: auto;
overflow: hidden; overflow: hidden;
box-shadow: 0px 0px 20px 5px #151515bd; box-shadow: 0px 0px 20px 5px #151515bd;
background: linear-gradient(#0b4155, #01677e); background: linear-gradient(
to bottom,
rgba(0, 87, 153, 0.8) 0,
rgba(0, 118, 209, 0.8)
);
border-radius: 4px; border-radius: 4px;
backdrop-filter: blur(5px);
} }
.header { .header {
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
background-color: #05222d; background: rgba(0, 0, 0, 0.4);
color: white; color: white;
height: 50px; height: 50px;
align-content: center; align-content: center;
@ -159,12 +164,16 @@ export default {
align-self: center; align-self: center;
color: white; color: white;
width: initial; width: initial;
background: #024554; background: rgba(0, 0, 0, 0.2);
border-radius: 4px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: #02303c; background: rgba(0, 0, 0, 0.4);
} }
} }
input {
border-radius: 4px;
}
.alerts { .alerts {
display: flex; display: flex;

22
src/components/app/Popouts/Popouts/AddServer.vue
View file

@ -257,14 +257,19 @@ export default {
color: white; color: white;
overflow: hidden; overflow: hidden;
box-shadow: 0px 0px 20px 5px #151515bd; box-shadow: 0px 0px 20px 5px #151515bd;
background: linear-gradient(#0b4155, #01677e); background: linear-gradient(
to bottom,
rgba(0, 87, 153, 0.8) 0,
rgba(0, 118, 209, 0.8)
);
border-radius: 4px; border-radius: 4px;
backdrop-filter: blur(5px);
} }
.tabs { .tabs {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding-top: 15px; padding-top: 15px;
background: #05222d; background: rgba(0, 0, 0, 0.4);
flex-shrink: 0; flex-shrink: 0;
} }
.tab { .tab {
@ -284,7 +289,7 @@ export default {
border-bottom: solid 5px white !important; border-bottom: solid 5px white !important;
} }
.tab:hover { .tab:hover {
border-bottom: solid 5px rgb(107, 107, 107); border-bottom: solid 5px rgba(255, 255, 255, 0.4);
} }
.content { .content {
@ -322,8 +327,12 @@ export default {
align-self: center; align-self: center;
margin-top: 15px; margin-top: 15px;
margin-bottom: 10px; margin-bottom: 10px;
background-color: #044050; background-color: rgba(0, 0, 0, 0.4);
padding: 10px; padding: 10px;
border-radius: 4px;
}
.input input {
border-radius: 4px;
} }
.title { .title {
@ -339,7 +348,7 @@ export default {
.button { .button {
padding: 5px; padding: 5px;
background: #024554; background-color: rgba(0, 0, 0, 0.2);
user-select: none; user-select: none;
border: none; border: none;
color: white; color: white;
@ -349,9 +358,10 @@ export default {
align-self: center; align-self: center;
margin: 5px; margin: 5px;
cursor: pointer; cursor: pointer;
border-radius: 4px;
} }
.button:hover { .button:hover {
background: #02303c; background-color: rgba(0, 0, 0, 0.4);
} }
.button-clicked { .button-clicked {

3
src/components/app/Popouts/Popouts/DragDropFileUploadDialog.vue
View file

@ -30,7 +30,8 @@
user-select: none; user-select: none;
overflow: hidden; overflow: hidden;
box-shadow: 0px 0px 20px 5px #151515bd; box-shadow: 0px 0px 20px 5px #151515bd;
background-color: #044050; background-color: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(5px);
border-radius: 4px; border-radius: 4px;
} }
.material-icons { .material-icons {

8
src/components/app/Popouts/Popouts/GDriveLinkMenu.vue
View file

@ -82,8 +82,13 @@ export default {
color: white; color: white;
overflow: hidden; overflow: hidden;
box-shadow: 0px 0px 20px 5px #151515bd; box-shadow: 0px 0px 20px 5px #151515bd;
background: linear-gradient(#0b4155, #01677e); background: linear-gradient(
to bottom,
rgba(0, 87, 153, 0.8) 0,
rgba(0, 118, 209, 0.8)
);
border-radius: 4px; border-radius: 4px;
backdrop-filter: blur(5px);
} }
.text { .text {
color: white; color: white;
@ -134,6 +139,7 @@ export default {
transition: 0.3s; transition: 0.3s;
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
border-radius: 4px;
} }
.donate { .donate {
background: rgb(218, 179, 6); background: rgb(218, 179, 6);

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

@ -111,7 +111,7 @@ export default {
rolesMenu.style.top = rolesMenu.style.top =
mainMenuY + mainMenu.clientHeight - rolesMenu.clientHeight + "px"; mainMenuY + mainMenu.clientHeight - rolesMenu.clientHeight + "px";
rolesMenu.style.left = mainMenuX - mainMenu.clientWidth - 22 + "px"; rolesMenu.style.left = mainMenuX - mainMenu.clientWidth - 11 + "px";
}); });
}, },
setPosition() { setPosition() {

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

@ -158,7 +158,7 @@ export default {
}, },
keyDownEvent(event) { keyDownEvent(event) {
const keyCode = event.keyCode; const keyCode = event.keyCode;
if (keyCode == 13) { if (keyCode == 13 && !event.shiftKey) {
return this.send(); return this.send();
} }
if (keyCode == 27) { if (keyCode == 27) {
@ -201,8 +201,13 @@ export default {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
box-shadow: 0px 0px 20px 5px #151515bd; box-shadow: 0px 0px 20px 5px #151515bd;
background-color: #01677e; background: linear-gradient(
to bottom,
rgba(0, 87, 153, 0.8) 0,
rgba(0, 118, 209, 0.8)
);
border-radius: 4px; border-radius: 4px;
backdrop-filter: blur(5px);
} }
.info { .info {
display: flex; display: flex;
@ -259,14 +264,17 @@ export default {
display: flex; display: flex;
align-content: center; align-content: center;
align-items: center; align-items: center;
background: #024554; background: rgba(0, 0, 0, 0.2);
border-radius: 4px;
padding: 5px; padding: 5px;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
transition: 0.3s; transition: 0.2s;
color: rgba(255, 255, 255, 0.8);
} }
.button:hover { .button:hover {
background: #02303c; background: rgba(0, 0, 0, 0.4);
color: white;
} }
.button .text { .button .text {
margin-left: 5px; margin-left: 5px;
@ -286,7 +294,8 @@ export default {
} }
.chat-input { .chat-input {
font-family: "Montserrat", sans-serif; font-family: "Montserrat", sans-serif;
background: #014655; background: rgba(0, 0, 0, 0.4);
border-radius: 4px;
color: white; color: white;
width: 100%; width: 100%;
height: 20px; height: 20px;

4
src/components/app/relationships/FriendsTemplate.vue
View file

@ -164,10 +164,10 @@ export default {
} }
.friend:hover { .friend:hover {
background: #053c4c; background-color: rgba(0, 0, 0, 0.2);
} }
.friend.selected { .friend.selected {
background: #053240; background-color: rgba(0, 0, 0, 0.4);
} }
.profile-picture { .profile-picture {
height: 30px; height: 30px;

10
src/components/app/relationships/OfflineFriends.vue
View file

@ -1,8 +1,10 @@
<template> <template>
<div class="friends"> <div class="friends">
<div class="tab" @click="expanded = !expanded"> <Tab
<Tab :expanded="expanded" tabname="Offline" /> @click.native="expanded = !expanded"
</div> :expanded="expanded"
tabname="Offline"
/>
<transition name="list"> <transition name="list">
<div v-if="expanded" class="list"> <div v-if="expanded" class="list">
<FriendsTemplate <FriendsTemplate
@ -71,6 +73,6 @@ export default {
border-radius: 4px; border-radius: 4px;
} }
.tab:hover { .tab:hover {
background: #053240; background-color: rgba(0, 0, 0, 0.2);
} }
</style> </style>

10
src/components/app/relationships/OnlineFriends.vue
View file

@ -1,8 +1,10 @@
<template> <template>
<div class="friends"> <div class="friends">
<div class="tab" @click="expanded = !expanded"> <Tab
<Tab :expanded="expanded" tabname="Online" /> @click.native="expanded = !expanded"
</div> :expanded="expanded"
tabname="Online"
/>
<transition name="list"> <transition name="list">
<div v-if="expanded" class="list"> <div v-if="expanded" class="list">
<FriendsTemplate <FriendsTemplate
@ -88,6 +90,6 @@ export default {
border-radius: 4px; border-radius: 4px;
} }
.tab:hover { .tab:hover {
background: #053240; background-color: rgba(0, 0, 0, 0.2);
} }
</style> </style>

12
src/components/app/relationships/PendingFriends.vue
View file

@ -1,8 +1,10 @@
<template> <template>
<div class="pending-friends" v-if="friends && friends.length"> <div class="pending-friends" v-if="friends && friends.length">
<div class="tab" @click="expanded = !expanded"> <Tab
<Tab :expanded="expanded" tabname="Pending requests" /> @click.native="expanded = !expanded"
</div> :expanded="expanded"
tabname="Pending requests"
/>
<transition name="list"> <transition name="list">
<div v-if="expanded" class="list"> <div v-if="expanded" class="list">
<PendingTemplate <PendingTemplate
@ -62,8 +64,10 @@ export default {
} }
.tab { .tab {
transition: 0.3s; transition: 0.3s;
margin: 4px;
border-radius: 4px;
} }
.tab:hover { .tab:hover {
background-color: rgba(0, 0, 0, 0.123); background-color: rgba(0, 0, 0, 0.2);
} }
</style> </style>

3
src/components/app/relationships/PendingTemplate.vue
View file

@ -107,7 +107,8 @@ export default {
} }
.button { .button {
background-color: rgba(65, 65, 65, 0.438); background-color: rgba(0, 0, 0, 0.2);
border-radius: 4px;
width: 30px; width: 30px;
height: 30px; height: 30px;
margin: 5px; margin: 5px;

3
src/components/app/uploadsQueue.vue
View file

@ -33,11 +33,12 @@ export default {
} }
.upload { .upload {
color: white; color: white;
background: #26778a; background: rgba(255, 255, 255, 0.2);
margin: 10px; margin: 10px;
margin-left: 10px; margin-left: 10px;
display: flex; display: flex;
padding: 10px; padding: 10px;
border-radius: 4px;
} }
.icon { .icon {
display: flex; display: flex;

5
src/components/homePage/ProfilePopout.vue
View file

@ -60,14 +60,15 @@ export default {
height: 0; height: 0;
border-left: 10px solid transparent; border-left: 10px solid transparent;
border-right: 10px solid transparent; border-right: 10px solid transparent;
border-bottom: 15px solid #0f272a; border-bottom: 15px solid rgba(0, 0, 0, 0.7);
} }
.inner { .inner {
right: 0; right: 0;
top: 15px; top: 15px;
position: absolute; position: absolute;
display: flex; display: flex;
background: #0f272a; background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(5px);
border-radius: 5px; border-radius: 5px;
width: 300px; width: 300px;
height: 60px; height: 60px;

5
src/views/404.vue
View file

@ -65,7 +65,7 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: white; color: white;
background: linear-gradient(#0b4155, #01677e); background: linear-gradient(to bottom, #005799 0, #0076d1);
} }
.app-content { .app-content {
display: flex; display: flex;
@ -94,7 +94,8 @@ body {
align-items: center; align-items: center;
z-index: 9999; z-index: 9999;
padding-bottom: 20px; padding-bottom: 20px;
background: #044050; background: rgba(0, 0, 0, 0.4);
border-radius: 4px;
} }
.box .title { .box .title {
text-align: center; text-align: center;

5
src/views/GDriveCallback.vue
View file

@ -96,7 +96,7 @@ body {
color: white; color: white;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
background: linear-gradient(#0b4155, #01677e); background: linear-gradient(to bottom, #005799 0, #0076d1);
} }
.app-content { .app-content {
display: flex; display: flex;
@ -135,7 +135,8 @@ body {
justify-content: center; justify-content: center;
z-index: 9999; z-index: 9999;
padding: 20px; padding: 20px;
background: #044050; background: rgba(0, 0, 0, 0.4);
border-radius: 4px;
} }
.loading { .loading {

32
src/views/HomePage.vue
View file

@ -44,8 +44,12 @@
</div> </div>
<img class="graphic" src="@/assets/graphics/HomeGraphics.webp" /> <img class="graphic" src="@/assets/graphics/HomeGraphics.webp" />
<div class="buttons"> <div class="buttons">
<div class="button" @click="openApp">Open In Browser</div> <div class="button" @click="openApp">
<div class="material-icons">open_in_browser</div>
Open In Browser
</div>
<div class="button download" @click="showDownloadsPopout = true"> <div class="button download" @click="showDownloadsPopout = true">
<div class="material-icons">vertical_align_bottom</div>
Download App Download App
</div> </div>
</div> </div>
@ -236,7 +240,7 @@ body {
flex-shrink: 0; flex-shrink: 0;
border: 10px; border: 10px;
position: relative; position: relative;
background: #072834; background: rgba(0, 0, 0, 0.2);
} }
.logo { .logo {
background: url("../assets/logo.png"); background: url("../assets/logo.png");
@ -262,7 +266,7 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: 0.5s; transition: 0.5s;
background: linear-gradient(#0b4155, #01677e); background: linear-gradient(to bottom, #005799 0, #0076d1);
} }
.content { .content {
position: fixed; position: fixed;
@ -309,26 +313,24 @@ body {
} }
.button { .button {
padding: 15px; padding: 15px;
background: rgba(24, 132, 255, 0.733); background: rgba(0, 0, 0, 0.2);
color: white; color: white;
user-select: none; user-select: none;
transition: 0.3s; transition: 0.3s;
margin: 10px; margin: 10px;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
display: flex;
align-items: center;
}
.button .material-icons {
margin-right: 5px;
} }
.button:hover { .button:hover {
background: rgb(24, 132, 255); background: rgba(0, 0, 0, 0.4);
} }
.button.download {
background: rgba(0, 223, 67, 0.733);
}
.button.download:hover {
background: rgba(0, 223, 67, 0.904);
}
.features-list { .features-list {
margin-top: 20px; margin-top: 20px;
@ -338,7 +340,7 @@ body {
justify-content: center; justify-content: center;
} }
.feature { .feature {
background: #024352; background: rgba(0, 0, 0, 0.4);
color: white; color: white;
margin: 10px; margin: 10px;
padding: 2px; padding: 2px;
@ -368,7 +370,7 @@ body {
} }
.link { .link {
padding: 10px; padding: 10px;
background: #25424d; background: rgba(0, 0, 0, 0.2);
user-select: none; user-select: none;
margin-left: 5px; margin-left: 5px;
transition: 0.3s; transition: 0.3s;
@ -376,7 +378,7 @@ body {
border-radius: 4px; border-radius: 4px;
} }
.link:hover { .link:hover {
background: rgba(255, 255, 255, 0.26); background: rgba(0, 0, 0, 0.4);
} }
.warn { .warn {
color: red; color: red;

13
src/views/Invites.vue
View file

@ -139,7 +139,7 @@ body {
flex-direction: column; flex-direction: column;
color: white; color: white;
height: 100%; height: 100%;
background: linear-gradient(#0b4155, #01677e); background: linear-gradient(to bottom, #005799 0, #0076d1);
} }
.app-content { .app-content {
display: flex; display: flex;
@ -168,7 +168,8 @@ body {
justify-content: center; justify-content: center;
z-index: 9999; z-index: 9999;
padding-bottom: 20px; padding-bottom: 20px;
background: #044050; background: rgba(0, 0, 0, 0.4);
border-radius: 4px;
} }
.server { .server {
display: flex; display: flex;
@ -180,10 +181,11 @@ body {
} }
.invalid { .invalid {
margin-top: 15px; margin-top: 15px;
align-items: center;
align-content: center;
text-align: center;
} }
.red {
background: #9e1a1c;
}
.avatar { .avatar {
align-self: center; align-self: center;
margin-bottom: 10px; margin-bottom: 10px;
@ -208,6 +210,7 @@ body {
flex-shrink: 0; flex-shrink: 0;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
border-radius: 4px;
} }
.button:hover { .button:hover {
background: rgb(25, 151, 255); background: rgb(25, 151, 255);

10
src/views/LoginPage.vue
View file

@ -218,7 +218,7 @@ body {
flex-direction: column; flex-direction: column;
color: white; color: white;
height: 100%; height: 100%;
background: linear-gradient(#0b4155, #01677e); background: linear-gradient(to bottom, #005799 0, #0076d1);
} }
.app-content { .app-content {
display: flex; display: flex;
@ -246,7 +246,7 @@ body {
align-items: center; align-items: center;
z-index: 9999; z-index: 9999;
padding-bottom: 20px; padding-bottom: 20px;
background: #043b4a; background: rgba(0, 0, 0, 0.3);
border-radius: 4px; border-radius: 4px;
} }
.box .title { .box .title {
@ -279,7 +279,8 @@ form {
margin: 10px; margin: 10px;
width: 80%; width: 80%;
align-self: center; align-self: center;
background: #032b35; background: rgba(0, 0, 0, 0.4);
border-radius: 4px;
padding: 10px; padding: 10px;
} }
.input-text { .input-text {
@ -290,7 +291,8 @@ input {
outline: none; outline: none;
padding: 10px; padding: 10px;
border: none; border: none;
background: #021b21; background: rgba(0, 0, 0, 0.4);
border-radius: 4px;
color: white; color: white;
} }
.buttons { .buttons {

10
src/views/RegisterPage.vue
View file

@ -226,7 +226,7 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: white; color: white;
background: linear-gradient(#0b4155, #01677e); background: linear-gradient(to bottom, #005799 0, #0076d1);
} }
.app-content { .app-content {
display: flex; display: flex;
@ -254,7 +254,7 @@ body {
align-items: center; align-items: center;
z-index: 9999; z-index: 9999;
padding-bottom: 20px; padding-bottom: 20px;
background: #043b4a; background: rgba(0, 0, 0, 0.3);
border-radius: 4px; border-radius: 4px;
} }
.box .title { .box .title {
@ -287,7 +287,8 @@ form {
margin: 10px; margin: 10px;
width: 80%; width: 80%;
align-self: center; align-self: center;
background: #032b35; background: rgba(0, 0, 0, 0.4);
border-radius: 4px;
padding: 10px; padding: 10px;
} }
.input-text { .input-text {
@ -299,7 +300,8 @@ input {
padding: 10px; padding: 10px;
border: none; border: none;
background: none; background: none;
background: #021b21; background: rgba(0, 0, 0, 0.4);
border-radius: 4px;
color: white; color: white;
} }
.buttons { .buttons {