mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-06-17 13:31:11 +00:00
redesign
This commit is contained in:
supertiger1234
parent
4951e8729d
commit
a81a296e61
58 changed files with 770 additions and 342 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 122 KiB After Width: | Height: | Size: 189 KiB |
|
|
@ -80,6 +80,7 @@ export default {
|
|||
}
|
||||
.inner-profile-picture {
|
||||
background-color: rgba(0, 0, 0, 0.315);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
|
||||
border-radius: 50%;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<div class="left-panel">
|
||||
<navigation />
|
||||
<div class="content">
|
||||
<MyMiniInformation />
|
||||
<div class="tabs">
|
||||
<div
|
||||
class="tab"
|
||||
|
|
@ -22,8 +23,6 @@
|
|||
<div v-else class="list">
|
||||
<recent-friends />
|
||||
</div>
|
||||
<div class="seperater" />
|
||||
<MyMiniInformation />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -94,15 +93,12 @@ export default {
|
|||
<style scoped>
|
||||
.left-panel {
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
width: 340px;
|
||||
max-width: calc(100% - 60px);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
z-index: 1;
|
||||
background-image: url("../../assets/leftPanelBackground.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
|
|
@ -110,6 +106,9 @@ export default {
|
|||
flex-shrink: 0;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.14);
|
||||
border-top-left-radius: 10px;
|
||||
|
||||
}
|
||||
.list {
|
||||
flex: 1;
|
||||
|
|
@ -136,7 +135,6 @@ export default {
|
|||
height: 50px;
|
||||
transition: 0.2s;
|
||||
cursor: pointer;
|
||||
background: #075e64;
|
||||
position: relative;
|
||||
}
|
||||
.tab .material-icons {
|
||||
|
|
@ -220,4 +218,10 @@ export default {
|
|||
background: rgba(121, 3, 3, 0.541);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.content{
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
380
src/components/app/MainNav.vue
Normal file
380
src/components/app/MainNav.vue
Normal file
|
|
@ -0,0 +1,380 @@
|
|||
<template>
|
||||
<div class="navigation" ref="navigation">
|
||||
<div
|
||||
class="tool-tip"
|
||||
ref="toolTip"
|
||||
:style="{ left: toolTipLeftPosition + 'px' }"
|
||||
v-if="toolTipShown"
|
||||
>
|
||||
{{ toolTipLocalName || servers[toolTipServerID].name }}
|
||||
</div>
|
||||
<div class="container" @mouseleave="mouseLeaveEvent">
|
||||
<div class="navigation-items">
|
||||
<div
|
||||
class="item material-icons"
|
||||
:class="{ selected: currentTab == 0 }"
|
||||
@click="switchTab(0)"
|
||||
@mouseenter="localToolTipEvent('Explore', $event)"
|
||||
>
|
||||
explore
|
||||
</div>
|
||||
<div
|
||||
class="item material-icons"
|
||||
:class="{
|
||||
selected: currentTab == 1,
|
||||
notifyAnimation: DMNotification || friendRequestExists
|
||||
}"
|
||||
@click="switchTab(1)"
|
||||
@mouseenter="localToolTipEvent('Direct Message', $event)"
|
||||
>
|
||||
chat
|
||||
</div>
|
||||
<div
|
||||
class="item material-icons"
|
||||
:class="{
|
||||
selected: currentTab == 2,
|
||||
notifyAnimation: serverNotification
|
||||
}"
|
||||
@click="switchTab(2)"
|
||||
@mouseenter="localToolTipEvent('Servers', $event)"
|
||||
>
|
||||
forum
|
||||
</div>
|
||||
<div
|
||||
class="item material-icons"
|
||||
:class="{ selected: currentTab == 3 }"
|
||||
@click="switchTab(3)"
|
||||
@mouseenter="localToolTipEvent('Changelog', $event)"
|
||||
>
|
||||
import_contacts
|
||||
</div>
|
||||
<div
|
||||
v-if="!user.survey_completed"
|
||||
class="item material-icons"
|
||||
@click="openSurvey"
|
||||
@mouseenter="localToolTipEvent('Click Me', $event)"
|
||||
>
|
||||
error
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item material-icons"
|
||||
@click="openSettings"
|
||||
@mouseleave="mouseLeaveEvent"
|
||||
@mouseenter="localToolTipEvent('Settings', $event)"
|
||||
>
|
||||
settings
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { bus } from "@/main.js";
|
||||
import config from "@/config.js";
|
||||
import settingsService from "@/services/settingsService";
|
||||
import { isMobile } from "@/utils/Mobile";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
avatarDomain: config.domain + "/avatars",
|
||||
toolTipShown: false,
|
||||
toolTipLeftPosition: 0,
|
||||
toolTipServerID: null,
|
||||
toolTipLocalName: null,
|
||||
mobile: isMobile(),
|
||||
|
||||
drag: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async onEnd(event) {
|
||||
this.drag = false;
|
||||
const serverIDArr = this.serversArr.map(s => s.server_id);
|
||||
await settingsService.setServerPositions(serverIDArr);
|
||||
},
|
||||
onStart() {
|
||||
this.toolTipShown = false;
|
||||
this.drag = true;
|
||||
this.$store.dispatch("setAllPopout", { show: false });
|
||||
},
|
||||
dismissNotification(channelID) {
|
||||
const notifications = this.$store.getters.notifications.find(function(e) {
|
||||
return e.channelID === channelID;
|
||||
});
|
||||
|
||||
if (notifications && notifications.count >= 1 && document.hasFocus()) {
|
||||
this.$socket.emit("notification:dismiss", { channelID });
|
||||
}
|
||||
},
|
||||
openServer(serverID) {
|
||||
const server = this.servers[serverID];
|
||||
const lastSelectedChannel = JSON.parse(
|
||||
localStorage.getItem("selectedChannels") || "{}"
|
||||
)[serverID];
|
||||
const defaultChannelID = server.default_channel_id;
|
||||
const channels = this.$store.getters.channels;
|
||||
let channel = channels[lastSelectedChannel || defaultChannelID];
|
||||
if (!channel) {
|
||||
channel = channels[defaultChannelID];
|
||||
}
|
||||
|
||||
this.dismissNotification(channel.channelID);
|
||||
this.$store.dispatch("servers/setSelectedServerID", serverID);
|
||||
this.$store.dispatch("openChannel", channel);
|
||||
},
|
||||
switchChannel(isServer) {
|
||||
const serverChannelID = this.$store.state.channelModule.serverChannelID;
|
||||
const DMChannelID = this.$store.state.channelModule.DMChannelID;
|
||||
|
||||
if (isServer) {
|
||||
this.$store.dispatch("selectedChannelID", serverChannelID);
|
||||
const channel = this.$store.state.channelModule.channels[
|
||||
serverChannelID
|
||||
];
|
||||
this.$store.dispatch("setChannelName", channel ? channel.name : "");
|
||||
this.dismissNotification(serverChannelID);
|
||||
} else {
|
||||
const channel = this.$store.state.channelModule.channels[DMChannelID];
|
||||
this.$store.dispatch(
|
||||
"setChannelName",
|
||||
channel ? channel.recipients[0].username : ""
|
||||
);
|
||||
this.$store.dispatch("selectedChannelID", DMChannelID);
|
||||
this.dismissNotification(DMChannelID);
|
||||
}
|
||||
},
|
||||
switchTab(index) {
|
||||
localStorage.setItem("currentTab", index);
|
||||
this.$store.dispatch("setCurrentTab", index);
|
||||
if (index == 1) {
|
||||
//1: direct message tab.
|
||||
this.switchChannel(false);
|
||||
} else if (index === 2) {
|
||||
//2: server tab
|
||||
this.switchChannel(true);
|
||||
}
|
||||
},
|
||||
openSettings() {
|
||||
this.$store.dispatch("setPopoutVisibility", {
|
||||
name: "settings",
|
||||
visibility: true
|
||||
});
|
||||
},
|
||||
localToolTipEvent(name, event) {
|
||||
this.toolTipLocalName = name;
|
||||
this.toolTipShown = true;
|
||||
|
||||
this.$nextTick(() => {
|
||||
const width = window.innerWidth;
|
||||
const tooltipWidth = this.$refs.toolTip.clientWidth;
|
||||
const rect = event.target.getBoundingClientRect();
|
||||
this.toolTipLeftPosition = rect.left - tooltipWidth / 2 + 25;
|
||||
});
|
||||
},
|
||||
|
||||
mouseLeaveEvent() {
|
||||
this.toolTipShown = false;
|
||||
this.toolTipServerID = null;
|
||||
this.toolTipLocalName = null;
|
||||
},
|
||||
addServer() {
|
||||
this.$store.dispatch("setPopoutVisibility", {
|
||||
name: "addServer",
|
||||
visibility: true
|
||||
});
|
||||
},
|
||||
addFriend() {
|
||||
this.$store.dispatch("setAllPopout", {
|
||||
show: true,
|
||||
type: "ADD_FRIEND"
|
||||
});
|
||||
},
|
||||
openSurvey() {
|
||||
this.$store.dispatch("setPopoutVisibility", {
|
||||
name: "surveyPopout",
|
||||
visibility: true
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
user() {
|
||||
return this.$store.getters.user;
|
||||
},
|
||||
currentTab() {
|
||||
return this.$store.getters.currentTab;
|
||||
},
|
||||
servers() {
|
||||
return this.$store.getters["servers/servers"];
|
||||
},
|
||||
serversArr: {
|
||||
get() {
|
||||
const data = this.servers;
|
||||
return Object.keys(data)
|
||||
.map(key => {
|
||||
return data[key];
|
||||
})
|
||||
.reverse();
|
||||
},
|
||||
set(value) {
|
||||
const reversedServers = value.reverse();
|
||||
// convert array to json
|
||||
const json = {};
|
||||
for (let index = 0; index < reversedServers.length; index++) {
|
||||
const element = reversedServers[index];
|
||||
json[element.server_id] = element;
|
||||
}
|
||||
this.$store.dispatch("servers/setServers", json);
|
||||
}
|
||||
},
|
||||
selectedServerID() {
|
||||
return this.$store.getters["servers/selectedServerID"];
|
||||
},
|
||||
serverNotification() {
|
||||
const notifications = this.$store.getters.notifications;
|
||||
const channels = this.$store.getters.channels;
|
||||
const notification = notifications.find(e => {
|
||||
return (
|
||||
channels[e.channelID] &&
|
||||
channels[e.channelID].server_id &&
|
||||
(e.channelID !== this.$store.getters.selectedChannelID ||
|
||||
!document.hasFocus() ||
|
||||
this.currentTab !== 2)
|
||||
);
|
||||
});
|
||||
return notification;
|
||||
},
|
||||
DMNotification() {
|
||||
const notifications = this.$store.getters.notifications;
|
||||
const channels = this.$store.getters.channels;
|
||||
const notification = notifications.find(e => {
|
||||
return (
|
||||
channels[e.channelID] &&
|
||||
!channels[e.channelID].server_id &&
|
||||
(e.channelID !== this.$store.getters.selectedChannelID ||
|
||||
!document.hasFocus() ||
|
||||
this.currentTab !== 1)
|
||||
);
|
||||
});
|
||||
// unopened dm
|
||||
if (!notification) {
|
||||
return notifications.find(e => {
|
||||
return !channels[e.channelID];
|
||||
});
|
||||
}
|
||||
return notification;
|
||||
},
|
||||
friendRequestExists() {
|
||||
const allFriend = this.$store.getters.user.friends;
|
||||
const result = Object.keys(allFriend).map(function(key) {
|
||||
return allFriend[key];
|
||||
});
|
||||
return result.find(friend => friend.status === 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navigation {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-shrink: 0;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.navigation-items {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-self: flex-start;
|
||||
align-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
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;
|
||||
opacity: 0.8;
|
||||
transition: 0.2s;
|
||||
&:hover {
|
||||
background: #093b4b;
|
||||
}
|
||||
&.selected {
|
||||
background: #072c38;
|
||||
}
|
||||
}
|
||||
|
||||
.notifyAnimation:before {
|
||||
content: "!";
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
font-size: 15px;
|
||||
position: absolute;
|
||||
z-index: 115651;
|
||||
top: 5px;
|
||||
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;
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(3px);
|
||||
padding: 5px;
|
||||
max-width: 150px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
top: 60px;
|
||||
z-index: 99999;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
transition: 0.2s;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -75,10 +75,13 @@ export default {
|
|||
cursor: pointer;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.member:hover {
|
||||
background: #064d55;
|
||||
background: #063442;
|
||||
}
|
||||
|
||||
.information {
|
||||
|
|
|
|||
|
|
@ -81,16 +81,14 @@ export default {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 300px;
|
||||
max-width: calc(100% - 60px);
|
||||
height: 100%;
|
||||
background-image: url("../../assets/leftPanelBackground.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background: rgba(0, 0, 0, 0.14);
|
||||
}
|
||||
.header {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.438);
|
||||
background: #083A4A;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
|
@ -103,12 +101,12 @@ export default {
|
|||
overflow: auto;
|
||||
}
|
||||
.tab {
|
||||
background: #095a5c;
|
||||
padding: 5px;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
color: #cce4e3;
|
||||
color: #b5c4ca;
|
||||
font-size: 15px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -41,7 +41,6 @@
|
|||
</div>
|
||||
|
||||
<edit-panel v-if="editMessage" :data="editMessage" />
|
||||
<div class="seperater" />
|
||||
<div class="markdown-buttons" style="color: white;" v-if="sendMessagePermission === true || editMessage">
|
||||
<div class="material-icons markdown-icon" @click="addFormat('**')" title="Bold">format_bold</div>
|
||||
<div class="material-icons markdown-icon" @click="addFormat('_')" title="Italic">format_italic</div>
|
||||
|
|
@ -78,7 +77,7 @@
|
|||
@paste="onPaste"
|
||||
></textarea>
|
||||
<button class="emojis-button" @click="showEmojiPanel = !showEmojiPanel">
|
||||
<i class="material-icons">face</i>
|
||||
<i class="material-icons">tag_faces</i>
|
||||
</button>
|
||||
<button
|
||||
class="send-button"
|
||||
|
|
@ -146,6 +145,7 @@ export default {
|
|||
methods: {
|
||||
messageColorChange(e) {
|
||||
const hexColor = e.target.value;
|
||||
e.target.value = ""
|
||||
this.customColor = hexColor;
|
||||
},
|
||||
addFormat(type, customEnding, customPos) {
|
||||
|
|
@ -734,26 +734,25 @@ export default {
|
|||
.chat-input-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
position: relative;
|
||||
background: #014757;
|
||||
}
|
||||
|
||||
.attachment-button {
|
||||
width: 50px;
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
margin-right: 2px;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
color: #a5bec4;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.13);
|
||||
color: white;
|
||||
}
|
||||
.material-icons {
|
||||
color: white;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -784,7 +783,7 @@ export default {
|
|||
|
||||
.chat-input {
|
||||
font-family: "Roboto", sans-serif;
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
background: transparent;
|
||||
color: white;
|
||||
width: 100%;
|
||||
min-height: 20px;
|
||||
|
|
@ -799,23 +798,17 @@ export default {
|
|||
overflow: hidden;
|
||||
max-height: 30vh;
|
||||
overflow-y: auto;
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: rgba(255, 255, 255, 0.13);
|
||||
&::placeholder{
|
||||
color: #597981;
|
||||
}
|
||||
}
|
||||
|
||||
.send-button {
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
color: #a5bec4;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
margin-left: 2px;
|
||||
margin-right: 10px;
|
||||
min-height: 40px;
|
||||
width: 50px;
|
||||
transition: 0.3s;
|
||||
|
|
@ -830,7 +823,7 @@ export default {
|
|||
margin: auto;
|
||||
}
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.13);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -843,8 +836,8 @@ export default {
|
|||
|
||||
.emojis-button {
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
color: #a5bec4;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
margin-left: 2px;
|
||||
|
|
@ -859,17 +852,17 @@ export default {
|
|||
margin: auto;
|
||||
}
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.13);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.back-to-bottom-button {
|
||||
&:hover {
|
||||
background: #748b8e;
|
||||
box-shadow: 0px 0px 15px 0px #0000008a;
|
||||
background: rgba(0, 0, 0, 0.90);
|
||||
}
|
||||
transition: 0.2s;
|
||||
background: #516e72;
|
||||
background: rgba(0, 0, 0, 0.80);
|
||||
border-radius: 100px;
|
||||
color: white;
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
|
|
@ -879,7 +872,7 @@ export default {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0px 0px 7px 0px #0000008a;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
|
|
@ -905,9 +898,12 @@ export default {
|
|||
height: 35px;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
margin-left: 10px;
|
||||
margin-left: 2px;
|
||||
margin-bottom: 10px;
|
||||
flex-shrink: 0;
|
||||
background: #024B5C;
|
||||
.markdown-icon {
|
||||
font-size: 21px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
|
|
@ -916,10 +912,10 @@ export default {
|
|||
user-select: none;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
width: 35px;
|
||||
margin-left: 2px;
|
||||
width: 30px;
|
||||
margin-left: 0px;
|
||||
transition: 0.2s;
|
||||
color: #d5dcdd;
|
||||
color: #a5bec4;
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -940,16 +936,17 @@ export default {
|
|||
background: rgb(231, 231, 231);
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.reset-button {
|
||||
color: #a5bec4;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
margin-left: 5px;
|
||||
transition: 0.2s;
|
||||
opacity: 0.6;
|
||||
flex-shrink: 0;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.heading {
|
||||
background: #112c30;
|
||||
background: #073240;
|
||||
margin-bottom: 0;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
</div>
|
||||
<div class="information">
|
||||
<div class="info">{{ getFile.fileName }}</div>
|
||||
<a :href="getFile.url" target="_blank">
|
||||
<a :href="getFile.url" download target="_blank">
|
||||
<div class="download-button">Download</div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -272,6 +272,10 @@ export default {
|
|||
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
$self-message-color: #053746;
|
||||
$message-color: #03222b;
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
@ -299,8 +303,7 @@ export default {
|
|||
display: table;
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
background: #0a1a1c;
|
||||
background: $message-color;
|
||||
}
|
||||
|
||||
.presence-message .text {
|
||||
|
|
@ -329,7 +332,7 @@ export default {
|
|||
}
|
||||
|
||||
.ownMessageLeft .triangle-inner {
|
||||
border-left: 8px solid #3a585c;
|
||||
border-left: 8px solid $self-message-color;
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
|
|
@ -349,19 +352,19 @@ export default {
|
|||
}
|
||||
|
||||
.ownMessage .triangle-inner {
|
||||
border-right: 8px solid #3a585c;
|
||||
border-right: 8px solid $self-message-color;
|
||||
}
|
||||
.ownMessage .content {
|
||||
background: #3a585c;
|
||||
background: $self-message-color;
|
||||
}
|
||||
|
||||
.ownMessage .date {
|
||||
color: rgb(209, 209, 209);
|
||||
color: #d5e3e6;
|
||||
}
|
||||
|
||||
.file-content {
|
||||
display: flex;
|
||||
background: #5b7377;
|
||||
background: #ffffff21;
|
||||
padding: 10px;
|
||||
margin-top: 5px;
|
||||
&.music {
|
||||
|
|
@ -419,11 +422,11 @@ export default {
|
|||
height: 0;
|
||||
border-top: 9px solid transparent;
|
||||
border-bottom: 0px solid transparent;
|
||||
border-right: 8px solid #0a1a1c;
|
||||
border-right: 8px solid $message-color;
|
||||
}
|
||||
|
||||
.content {
|
||||
background: #0a1a1c;
|
||||
background: $message-color;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -440,7 +443,7 @@ export default {
|
|||
.image-content {
|
||||
margin-top: 10px;
|
||||
padding: 5px;
|
||||
background: #1d2c2e;
|
||||
background: #ffffff21;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -457,7 +460,7 @@ export default {
|
|||
display: flex;
|
||||
}
|
||||
.username {
|
||||
color: rgb(219, 219, 219);
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 14px;
|
||||
margin: auto 0;
|
||||
transition: 0.1s;
|
||||
|
|
@ -465,11 +468,11 @@ export default {
|
|||
}
|
||||
|
||||
.username:hover {
|
||||
color: rgb(199, 199, 199);
|
||||
color: rgb(255, 255, 255);
|
||||
text-decoration: underline;
|
||||
}
|
||||
.date {
|
||||
color: rgb(177, 177, 177);
|
||||
color: #d5e3e6;
|
||||
font-size: 10px;
|
||||
margin: auto auto auto 5px;
|
||||
font-weight: normal;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
class="avatar"
|
||||
:url="`${avatar}${hover ? '' : '?type=png'}`"
|
||||
:admin="user.admin"
|
||||
size="40px"
|
||||
size="35px"
|
||||
:hover="true"
|
||||
@click.native="openUserInformation"
|
||||
/>
|
||||
|
|
@ -96,8 +96,9 @@ export default {
|
|||
position: relative;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
height: 50px;
|
||||
transition: 0.3s;
|
||||
background-color: #083A4A
|
||||
}
|
||||
|
||||
.avatar {
|
||||
|
|
|
|||
|
|
@ -8,41 +8,8 @@
|
|||
>{{toolTipLocalName || servers[toolTipServerID].name}}</div>
|
||||
<div class="container" @mouseleave="mouseLeaveEvent">
|
||||
<div class="scrollable">
|
||||
<div class="navigation-items">
|
||||
<div
|
||||
class="item material-icons"
|
||||
:class="{selected: currentTab == 0}"
|
||||
@click="switchTab(0)"
|
||||
@mouseenter="localToolTipEvent('Explore', $event)"
|
||||
>explore</div>
|
||||
<div
|
||||
class="item material-icons"
|
||||
:class="{selected: currentTab == 1, notifyAnimation: DMNotification || friendRequestExists}"
|
||||
@click="switchTab(1)"
|
||||
@mouseenter="localToolTipEvent('Direct Message', $event)"
|
||||
>chat</div>
|
||||
<div
|
||||
class="item material-icons"
|
||||
:class="{selected: currentTab == 2, notifyAnimation: serverNotification}"
|
||||
@click="switchTab(2)"
|
||||
@mouseenter="localToolTipEvent('Servers', $event)"
|
||||
>forum</div>
|
||||
<div
|
||||
class="item material-icons"
|
||||
:class="{selected: currentTab == 3}"
|
||||
@click="switchTab(3)"
|
||||
@mouseenter="localToolTipEvent('Changelog', $event)"
|
||||
>list_alt</div>
|
||||
<div
|
||||
v-if="!user.survey_completed"
|
||||
class="item material-icons"
|
||||
@click="openSurvey"
|
||||
@mouseenter="localToolTipEvent('Click Me', $event)"
|
||||
>error</div>
|
||||
</div>
|
||||
<div class="seperater" />
|
||||
|
||||
<div class="server-items" v-if="currentTab === 2">
|
||||
<div class="server-items">
|
||||
<draggable v-model="serversArr" :animation="200" :delay="mobile ? 400 : 0" ghost-class="ghost" @end="onEnd" @start="onStart">
|
||||
<transition-group type="transition" :name="!drag ? 'flip-list' : null">
|
||||
<server-template
|
||||
|
|
@ -58,24 +25,16 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<div class="seperater" />
|
||||
<div
|
||||
class="item material-icons"
|
||||
v-if="currentTab === 1"
|
||||
@click="addFriend"
|
||||
@mouseenter="localToolTipEvent('Add Friend', $event)"
|
||||
>person_add</div>
|
||||
<div
|
||||
class="item material-icons"
|
||||
v-if="currentTab === 2"
|
||||
@click="addServer"
|
||||
@mouseenter="localToolTipEvent('Add Server', $event)"
|
||||
>add</div>
|
||||
<div
|
||||
class="item material-icons"
|
||||
@click="openSettings"
|
||||
@mouseenter="localToolTipEvent('Settings', $event)"
|
||||
>settings</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -122,6 +81,7 @@ export default {
|
|||
}
|
||||
},
|
||||
openServer(serverID) {
|
||||
this.switchTab(2);
|
||||
const server = this.servers[serverID];
|
||||
const lastSelectedChannel = JSON.parse(
|
||||
localStorage.getItem("selectedChannels") || "{}"
|
||||
|
|
@ -185,7 +145,7 @@ export default {
|
|||
if (this.drag) return;
|
||||
this.toolTipLocalName = null;
|
||||
this.toolTipServerID = serverID;
|
||||
this.toolTipTopPosition = top - this.getTopHeight() + 16;
|
||||
this.toolTipTopPosition = top - this.getTopHeight() + 20;
|
||||
this.toolTipShown = true;
|
||||
},
|
||||
mouseLeaveEvent() {
|
||||
|
|
@ -323,8 +283,7 @@ export default {
|
|||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
width: 60px;
|
||||
background-color: #085053;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -332,7 +291,7 @@ export default {
|
|||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
width: 60px;
|
||||
width: 70px;
|
||||
}
|
||||
.navigation-items {
|
||||
display: flex;
|
||||
|
|
@ -364,8 +323,8 @@ export default {
|
|||
color: white;
|
||||
font-size: 30px;
|
||||
align-self: center;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
opacity: 0.8;
|
||||
|
|
@ -438,10 +397,16 @@ export default {
|
|||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
left: 60px;
|
||||
left: 70px;
|
||||
z-index: 99999;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.navigation{
|
||||
background: linear-gradient(#136A8A, #00B4DB);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -98,15 +98,14 @@ export default {
|
|||
position: relative;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
background-image: url("../../../../assets/leftPanelBackground.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
box-shadow: 0px 0px 20px 5px #151515bd;
|
||||
background: linear-gradient(#0B4155, #01677E);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
background-color: #085053;
|
||||
background-color: #05222d;
|
||||
color: white;
|
||||
height: 50px;
|
||||
align-content: center;
|
||||
|
|
@ -142,10 +141,10 @@ export default {
|
|||
align-self: center;
|
||||
color: white;
|
||||
width: initial;
|
||||
background: #05353b;
|
||||
background: #024554;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: #0f292c;
|
||||
background: #02303c;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -217,16 +217,15 @@ export default {
|
|||
flex-direction: column;
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
background-image: url("../../../../assets/leftPanelBackground.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
box-shadow: 0px 0px 20px 5px #151515bd;
|
||||
background: linear-gradient(#0B4155, #01677E);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 15px;
|
||||
background: #144a59;
|
||||
background: #05222d;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tab {
|
||||
|
|
@ -284,7 +283,7 @@ export default {
|
|||
align-self: center;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 10px;
|
||||
background-color: #06454d;
|
||||
background-color: #044050;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -301,7 +300,7 @@ export default {
|
|||
|
||||
.button {
|
||||
padding: 5px;
|
||||
background: #05353b;
|
||||
background: #024554;
|
||||
user-select: none;
|
||||
border: none;
|
||||
color: white;
|
||||
|
|
@ -313,7 +312,7 @@ export default {
|
|||
cursor: pointer;
|
||||
}
|
||||
.button:hover {
|
||||
background: #0f292c;
|
||||
background: #02303c;
|
||||
}
|
||||
|
||||
.button-clicked {
|
||||
|
|
|
|||
|
|
@ -28,10 +28,10 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
user-select: none;
|
||||
background-image: url("../../../../assets/leftPanelBackground.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 0px 20px 5px #151515bd;
|
||||
background-color: #044050;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.material-icons{
|
||||
font-size: 80px;
|
||||
|
|
|
|||
|
|
@ -94,11 +94,10 @@ export default {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
background-image: url("../../../../assets/leftPanelBackground.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 0px 20px 5px #151515bd;
|
||||
background: linear-gradient(#0B4155, #01677E);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.text {
|
||||
color: white;
|
||||
|
|
|
|||
|
|
@ -110,10 +110,9 @@ export default {
|
|||
flex-direction: column;
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
background-image: url("../../../../assets/leftPanelBackground.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
box-shadow: 0px 0px 20px 5px #151515bd;
|
||||
background: linear-gradient(#0B4155, #01677E);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.top {
|
||||
display: flex;
|
||||
|
|
@ -125,14 +124,14 @@ export default {
|
|||
|
||||
.button {
|
||||
padding: 10px;
|
||||
background: #05353b;
|
||||
background: #062c3a;
|
||||
margin: auto;
|
||||
transition: 0.3s;
|
||||
user-select: none;
|
||||
cursor:pointer;
|
||||
}
|
||||
.button:hover {
|
||||
background: #0f292c;
|
||||
background: #041e27;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.drop-down {
|
||||
background-color: #06454d;
|
||||
background-color: #044050;
|
||||
padding: 10px;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
|
|
@ -97,14 +97,14 @@ export default {
|
|||
margin-bottom: 2px;
|
||||
}
|
||||
.current-select-box {
|
||||
background: #05353b;
|
||||
background: #032d38;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.current-select-box:hover {
|
||||
background: #0f292c;
|
||||
background: #02232b;
|
||||
}
|
||||
.current-select-box div {
|
||||
align-self: center;
|
||||
|
|
@ -123,7 +123,7 @@ export default {
|
|||
|
||||
.drop {
|
||||
position: absolute;
|
||||
background-color: #06454d;
|
||||
background-color: #044050;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 11111;
|
||||
|
|
@ -145,6 +145,7 @@ export default {
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
.item div {
|
||||
align-self: center;
|
||||
|
|
@ -154,10 +155,10 @@ export default {
|
|||
}
|
||||
|
||||
.item:hover {
|
||||
background: #0f292c;
|
||||
background: #033442;
|
||||
}
|
||||
.item.selected {
|
||||
background: #021c1f;
|
||||
background: #021c23;
|
||||
}
|
||||
.material-icons {
|
||||
flex-shrink: 0;
|
||||
|
|
|
|||
|
|
@ -220,7 +220,7 @@ export default {
|
|||
align-self: center;
|
||||
margin-top: 10px;
|
||||
justify-content: center;
|
||||
background-color: #06454d;
|
||||
background-color: #044050;
|
||||
flex-shrink: 0;
|
||||
|
||||
.avatar {
|
||||
|
|
@ -233,7 +233,7 @@ export default {
|
|||
margin-top: 35px;
|
||||
}
|
||||
.button {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
.banner {
|
||||
|
|
@ -247,11 +247,13 @@ export default {
|
|||
margin-left: 2px;
|
||||
.banner-image {
|
||||
position: relative;
|
||||
width: 240px;
|
||||
height: 150px;
|
||||
width: 250px;
|
||||
height: 130px;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.13);
|
||||
.banner-text {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
|
@ -259,7 +261,6 @@ export default {
|
|||
right: 0;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
backdrop-filter: blur(15px);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
|
@ -287,7 +288,7 @@ export default {
|
|||
.input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #06454d;
|
||||
background-color: #044050;;
|
||||
padding: 10px;
|
||||
align-self: center;
|
||||
margin: 10px;
|
||||
|
|
@ -297,10 +298,10 @@ export default {
|
|||
margin-top: 2px;
|
||||
margin-bottom: 0;
|
||||
width: 190px;
|
||||
background: #05353b;
|
||||
|
||||
}
|
||||
.button {
|
||||
background: #05353b;
|
||||
background: #033442;
|
||||
padding: 10px;
|
||||
align-self: center;
|
||||
margin: 5px;
|
||||
|
|
@ -309,7 +310,7 @@ export default {
|
|||
transition: 0.3s;
|
||||
}
|
||||
.button:hover {
|
||||
background: #0f292c;
|
||||
background: #022831;
|
||||
}
|
||||
.save-button {
|
||||
margin-top: 10px;
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ export default {
|
|||
overflow: auto;
|
||||
.member {
|
||||
display: flex;
|
||||
background: #06454d;
|
||||
background: #052935;
|
||||
height: 30px;
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
|
|
|
|||
|
|
@ -182,7 +182,7 @@ export default {
|
|||
position: relative;
|
||||
}
|
||||
.channels-list {
|
||||
background: #082326;
|
||||
background: #00000050;
|
||||
height: 100%;
|
||||
width: 165px;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -207,10 +207,10 @@ export default {
|
|||
align-self: center;
|
||||
}
|
||||
.channel:hover {
|
||||
background: #06454d;
|
||||
background: #04232d;
|
||||
}
|
||||
.channel.selected {
|
||||
background: #064c55;
|
||||
background: #03191f;
|
||||
}
|
||||
.add-channel-button {
|
||||
background: rgba(17, 148, 255, 0.692);
|
||||
|
|
@ -226,7 +226,7 @@ export default {
|
|||
overflow: hidden;
|
||||
}
|
||||
.button {
|
||||
background: #05353b;
|
||||
background: #024554;
|
||||
padding: 10px;
|
||||
align-self: center;
|
||||
margin: 5px;
|
||||
|
|
@ -235,7 +235,7 @@ export default {
|
|||
transition: 0.3s;
|
||||
}
|
||||
.button:hover {
|
||||
background: #0f292c;
|
||||
background: #02303c;
|
||||
}
|
||||
.button.warn {
|
||||
background: rgba(255, 17, 17, 0.692);
|
||||
|
|
@ -266,7 +266,7 @@ export default {
|
|||
.input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #06454d;
|
||||
background-color: #044050;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -107,10 +107,10 @@ export default {
|
|||
color: white;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background-image: url("../../../../../assets/leftPanelBackground.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 0px 20px 5px #151515bd;
|
||||
background: linear-gradient(#0B4155, #01677E);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
@ -123,7 +123,7 @@ export default {
|
|||
.tabs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #144a59;
|
||||
background: #00000033;
|
||||
height: 100%;
|
||||
width: 180px;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -149,16 +149,16 @@ export default {
|
|||
align-self: center;
|
||||
}
|
||||
.tab:hover {
|
||||
background: #103a45;
|
||||
background: #072935;
|
||||
}
|
||||
.critical {
|
||||
color: red;
|
||||
}
|
||||
.tab.selected {
|
||||
background: #0c2c35;
|
||||
background: #051f28;
|
||||
}
|
||||
.header {
|
||||
background: #063e45;
|
||||
background: #05222d;
|
||||
display: flex;
|
||||
height: 50px;
|
||||
flex-shrink: 0;
|
||||
|
|
|
|||
|
|
@ -189,7 +189,7 @@ export default {
|
|||
}
|
||||
|
||||
.toggle {
|
||||
background-color: #06454d;
|
||||
background-color: #044050;
|
||||
padding: 10px;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
|
|
@ -216,7 +216,7 @@ export default {
|
|||
}
|
||||
|
||||
.input {
|
||||
background-color: #06454d;
|
||||
background-color: #044050;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
align-self: flex-start;
|
||||
|
|
@ -228,7 +228,7 @@ export default {
|
|||
margin-bottom: 5px;
|
||||
}
|
||||
textarea {
|
||||
background: #05353b;
|
||||
background: #032d38;
|
||||
resize: none;
|
||||
outline: none;
|
||||
margin-top: 2px;
|
||||
|
|
@ -245,7 +245,7 @@ export default {
|
|||
|
||||
.button {
|
||||
padding: 10px;
|
||||
background: #05353b;
|
||||
background: #024554;
|
||||
-webkit-transition: background 0.3s;
|
||||
transition: 0.3s;
|
||||
-webkit-user-select: none;
|
||||
|
|
@ -259,7 +259,7 @@ export default {
|
|||
}
|
||||
|
||||
.button:hover {
|
||||
background: #0f292c;
|
||||
background: #02303c;
|
||||
}
|
||||
.button.disabled {
|
||||
background: grey;
|
||||
|
|
|
|||
|
|
@ -127,10 +127,9 @@ export default {
|
|||
display: flex;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
background-image: url("../../../../assets/leftPanelBackground.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
box-shadow: 0px 0px 20px 5px #151515bd;
|
||||
background: linear-gradient(#0B4155, #01677E);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.tabs {
|
||||
height: 100%;
|
||||
|
|
@ -140,7 +139,7 @@ export default {
|
|||
overflow-x: hidden;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
background: #02292c;
|
||||
background: #00000033;
|
||||
}
|
||||
.panel {
|
||||
display: flex;
|
||||
|
|
@ -161,11 +160,11 @@ export default {
|
|||
}
|
||||
|
||||
.tab:hover {
|
||||
background: #08616b;
|
||||
background: #072935;
|
||||
}
|
||||
|
||||
.tab.selected {
|
||||
background: #064c55;
|
||||
background: #051f28;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -182,7 +181,7 @@ export default {
|
|||
display: flex;
|
||||
padding: 10px;
|
||||
font-size: 25px;
|
||||
background: #02292c;
|
||||
background: #05222d;
|
||||
}
|
||||
.title .material-icons {
|
||||
font-size: 40px;
|
||||
|
|
@ -204,7 +203,7 @@ export default {
|
|||
transition: 0.3s;
|
||||
}
|
||||
.close-button:hover {
|
||||
background: #064f56;
|
||||
background: #03181f;
|
||||
}
|
||||
.close-button .material-icons {
|
||||
margin: auto;
|
||||
|
|
|
|||
|
|
@ -198,7 +198,7 @@ export default {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.edit-profile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -221,11 +221,17 @@ export default {
|
|||
.change-avatar-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #06454d;
|
||||
background-color: #044050;
|
||||
width: 150px;
|
||||
align-self: center;
|
||||
padding: 20px;
|
||||
margin-top: 10px;
|
||||
.button {
|
||||
background: #033442;
|
||||
&:hover {
|
||||
background: #032b36;
|
||||
}
|
||||
}
|
||||
}
|
||||
.avatar {
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -235,7 +241,7 @@ export default {
|
|||
display: none;
|
||||
}
|
||||
.button {
|
||||
background: #05353b;
|
||||
background: #024554;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
|
|
@ -244,7 +250,7 @@ export default {
|
|||
transition: 0.3s;
|
||||
}
|
||||
.button:hover {
|
||||
background: #0f292c;
|
||||
background: #02303c;
|
||||
}
|
||||
.button.disabled {
|
||||
background: grey;
|
||||
|
|
@ -259,7 +265,7 @@ export default {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background-color: #06454d;
|
||||
background-color: #044050;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
margin-left: 30px;
|
||||
|
|
|
|||
|
|
@ -249,7 +249,7 @@ input:focus {
|
|||
.emojis-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #06454d;
|
||||
background-color: #00000024;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
|
|
@ -269,7 +269,7 @@ input:focus {
|
|||
flex-shrink: 0;
|
||||
}
|
||||
.emoji:hover {
|
||||
background: #0a3f46;
|
||||
background: #052e3b;
|
||||
}
|
||||
.emoji-name {
|
||||
margin: auto;
|
||||
|
|
@ -280,14 +280,15 @@ input:focus {
|
|||
display: inline-block;
|
||||
width: inherit;
|
||||
padding: 10px;
|
||||
background: #05353b;
|
||||
background: #063443;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 20px;
|
||||
user-select: none;
|
||||
transition: 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button:hover {
|
||||
background: #0f292c;
|
||||
background: #052631;
|
||||
}
|
||||
.button .material-icons {
|
||||
vertical-align: -6px;
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ export default {
|
|||
|
||||
.message-example{
|
||||
padding: 10px;
|
||||
background: #173d42;
|
||||
background: linear-gradient(#0B4155, #01677E);
|
||||
}
|
||||
.title{
|
||||
font-size: 20px;
|
||||
|
|
@ -145,7 +145,7 @@ export default {
|
|||
}
|
||||
|
||||
.options {
|
||||
background-color: #06454d;
|
||||
background-color: #023643;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@ export default {
|
|||
.tabs{
|
||||
z-index: 999999;
|
||||
display: flex;
|
||||
background: #04383d;
|
||||
background: #073444;
|
||||
justify-content: center;
|
||||
}
|
||||
.tabs .tab {
|
||||
|
|
|
|||
|
|
@ -144,6 +144,5 @@ export default {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
background:#09464f;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -111,7 +111,6 @@ export default {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
background:#09464f;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -226,7 +226,7 @@ export default {
|
|||
}
|
||||
.survey .button {
|
||||
color: white;
|
||||
background: #05353b;
|
||||
background: #024554;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
width: 100%;
|
||||
|
|
@ -236,7 +236,7 @@ export default {
|
|||
cursor: pointer;
|
||||
}
|
||||
.survey .button:hover {
|
||||
background: #0f292c;
|
||||
background: #02303c;
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
@ -256,7 +256,7 @@ export default {
|
|||
.input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #06454d;
|
||||
background-color: #044050;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
margin-left: 30px;
|
||||
|
|
@ -266,15 +266,14 @@ export default {
|
|||
.input input {
|
||||
width: initial;
|
||||
margin-top: 2px;
|
||||
background: #05353b;
|
||||
background: #032d38;
|
||||
}
|
||||
textarea {
|
||||
padding: 10px;
|
||||
resize: none;
|
||||
background: #05353b;
|
||||
background: #032d38;
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
height: 100px;
|
||||
margin-bottom: 10px;
|
||||
|
|
|
|||
|
|
@ -74,10 +74,10 @@ export default {
|
|||
margin: auto;
|
||||
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.507);
|
||||
padding: 10px;
|
||||
background-image: url("../../../../assets/leftPanelBackground.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 0px 20px 5px #151515bd;
|
||||
background: linear-gradient(#0B4155, #01677E);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.survay-icon .material-icons{
|
||||
color: white;
|
||||
|
|
@ -99,16 +99,16 @@ export default {
|
|||
.button {
|
||||
padding: 10px;
|
||||
margin: 3px;
|
||||
background: #05353b;
|
||||
background: #014656;
|
||||
transition: 0.3s;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.valid {
|
||||
background: #05353b;
|
||||
background: #014656;
|
||||
}
|
||||
.valid:hover{
|
||||
background: #0f292c;
|
||||
background: #02303c;
|
||||
}
|
||||
.warning {
|
||||
background: rgba(255, 27, 27, 0.589)
|
||||
|
|
|
|||
|
|
@ -198,7 +198,7 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.dark-background {
|
||||
background: rgba(0, 0, 0, 0.877);
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -213,10 +213,10 @@ export default {
|
|||
width: 500px;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
background-image: url("../../../../assets/leftPanelBackground.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 0px 20px 5px #151515bd;
|
||||
background-color: #01677E;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.info {
|
||||
display: flex;
|
||||
|
|
@ -273,14 +273,14 @@ export default {
|
|||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
background: #05353b;
|
||||
background: #024554;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.button:hover {
|
||||
background: #0f292c;
|
||||
background: #02303c;
|
||||
}
|
||||
.button .text {
|
||||
margin-left: 5px;
|
||||
|
|
@ -300,7 +300,7 @@ export default {
|
|||
}
|
||||
.chat-input {
|
||||
font-family: "Roboto", sans-serif;
|
||||
background: #45939e;
|
||||
background: #014655;
|
||||
color: white;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
|
|
|
|||
|
|
@ -231,11 +231,10 @@ export default {
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
box-shadow: 0px 0px 20px 11px #151515c4;
|
||||
background-image: url("../../../../assets/leftPanelBackground.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
box-shadow: 0px 0px 20px 5px #151515bd;
|
||||
background: linear-gradient(#0B4155, #01677E);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
|
|
@ -269,7 +268,7 @@ export default {
|
|||
align-content: center;
|
||||
padding-bottom: 10px;
|
||||
flex-shrink: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<div class="left-panel">
|
||||
<navigation />
|
||||
<div class="right">
|
||||
<MyMiniInformation />
|
||||
<div
|
||||
class="server-banner"
|
||||
@mouseenter="bannerHover = true"
|
||||
|
|
@ -26,8 +27,6 @@
|
|||
<div class="channels-list">
|
||||
<channels-list v-if="selectedServerID" :server-i-d="selectedServerID" />
|
||||
</div>
|
||||
<div class="seperater" />
|
||||
<MyMiniInformation />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -121,15 +120,12 @@ export default {
|
|||
<style scoped lang="scss" >
|
||||
.left-panel {
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
width: 340px;
|
||||
max-width: calc(100% - 60px);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
z-index: 1;
|
||||
background-image: url("../../assets/leftPanelBackground.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.seperater {
|
||||
|
|
@ -152,6 +148,8 @@ export default {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.14);
|
||||
border-top-left-radius: 10px;
|
||||
}
|
||||
|
||||
.server-banner {
|
||||
|
|
@ -161,9 +159,12 @@ export default {
|
|||
flex-direction: row;
|
||||
background-color: rgba(32, 32, 32, 0.4);
|
||||
height: 35px;
|
||||
border-radius: 4px;
|
||||
margin: 10px;
|
||||
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.13);
|
||||
}
|
||||
.extendBanner {
|
||||
height: 150px;
|
||||
height: 130px;
|
||||
background-color: rgb(32, 32, 32);
|
||||
}
|
||||
.banner-image {
|
||||
|
|
@ -186,7 +187,6 @@ export default {
|
|||
align-items: center;
|
||||
padding-left: 10px;
|
||||
position: relative;
|
||||
backdrop-filter: blur(15px);
|
||||
z-index: 2;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
|
|
@ -214,4 +214,11 @@ export default {
|
|||
background: rgba(0, 0, 0, 0.322);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.right{
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -70,12 +70,14 @@ export default {
|
|||
overflow: hidden;
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
margin: 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.channel:hover {
|
||||
background: #08616b;
|
||||
background: #053c4c;
|
||||
}
|
||||
.channel.selected {
|
||||
background: #064c55;
|
||||
background: #053240;
|
||||
}
|
||||
|
||||
.channel-name {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
>
|
||||
<profile-picture
|
||||
size="45px"
|
||||
class="avatar"
|
||||
:url="`${avatarDomain}/${serverData.avatar}${hover ? '' : '?type=png'}`"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -85,8 +86,8 @@ export default {
|
|||
z-index: 1;
|
||||
display: flex;
|
||||
align-self: center;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
|
|
@ -94,14 +95,25 @@ export default {
|
|||
user-select: none;
|
||||
transition: background 0.2s;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: #074447;
|
||||
&:hover::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
bottom: 15px;
|
||||
left: 0;
|
||||
width: 3px;
|
||||
background: #ffffff5e;
|
||||
}
|
||||
&.selected {
|
||||
background: #042a2b;
|
||||
&.selected::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
width: 3px;
|
||||
background: #ffffffc5;
|
||||
}
|
||||
}
|
||||
|
||||
.notifyAnimation:before {
|
||||
content: "!";
|
||||
color: white;
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
}
|
||||
|
||||
.codeblock {
|
||||
background-color: #233538;
|
||||
background-color: #ffffff1a;
|
||||
padding: 5px;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="direct-message-tab">
|
||||
<div class="direct-message-tab" :class="{darken: showLeftPanel}">
|
||||
<transition name="slidein">
|
||||
<friends-list
|
||||
v-show="$mq === 'mobile' && showLeftPanel || ($mq !== 'mobile')"
|
||||
|
|
@ -24,7 +24,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
showLeftPanel: false
|
||||
showLeftPanel: true
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -62,14 +62,24 @@ export default {
|
|||
}
|
||||
.slidein-enter, .slidein-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
/* margin-left: -300px; */
|
||||
transform: translateX(-300px);
|
||||
transform: translateX(-340px);
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.left-panel {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: calc(100% - 50px);
|
||||
z-index: 2;
|
||||
background: rgba(19, 107, 139, 0.9);
|
||||
}
|
||||
.darken::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="explore-tab">
|
||||
<div class="explore-tab" :class="{darken: showLeftPanel}">
|
||||
<transition name="slidein">
|
||||
<div
|
||||
class="left-panel"
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
>
|
||||
<navigation />
|
||||
<div class="content">
|
||||
<MyMiniInformation />
|
||||
<div class="header">
|
||||
<div class="icon">
|
||||
<i class="material-icons">explore</i>
|
||||
|
|
@ -73,8 +74,9 @@ import { bus } from "@/main";
|
|||
import Servers from "./Explore/servers";
|
||||
import ServerService from "@/services/ServerService";
|
||||
import Navigation from "@/components/app/Navigation";
|
||||
import MyMiniInformation from "@/components/app/MyMiniInformation.vue";
|
||||
export default {
|
||||
components: { Servers, Navigation },
|
||||
components: { Servers, Navigation, MyMiniInformation },
|
||||
data() {
|
||||
return {
|
||||
showLeftPanel: false,
|
||||
|
|
@ -142,17 +144,18 @@ export default {
|
|||
.left-panel {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 300px;
|
||||
width: 340px;
|
||||
max-width: calc(100% - 60px);
|
||||
flex-shrink: 0;
|
||||
z-index: 2;
|
||||
background-image: url("../../../assets/leftPanelBackground.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.14);
|
||||
border-top-left-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.items {
|
||||
user-select: none;
|
||||
|
|
@ -169,20 +172,22 @@ export default {
|
|||
align-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
margin: 5px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
&:hover {
|
||||
background: #08616b;
|
||||
background: #053c4c;
|
||||
}
|
||||
&.selected {
|
||||
background: #064c55;
|
||||
background: #053240;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
height: 100px;
|
||||
background: #086974;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
.icon {
|
||||
|
|
@ -296,8 +301,9 @@ export default {
|
|||
|
||||
.right-panel {
|
||||
.header {
|
||||
background: rgba(0, 0, 0, 0.448);
|
||||
padding: 10px;
|
||||
background: #063443;
|
||||
padding-left: 10px;
|
||||
height: 54px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
|
|
@ -327,7 +333,7 @@ export default {
|
|||
}
|
||||
.slidein-enter, .slidein-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
/* margin-left: -300px; */
|
||||
transform: translateX(-300px);
|
||||
transform: translateX(-340px);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
|
|
@ -337,8 +343,19 @@ export default {
|
|||
.left-panel {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: calc(100% - 44px);
|
||||
z-index: 2;
|
||||
background: rgba(19, 107, 139, 0.9);
|
||||
height: 100%;
|
||||
}
|
||||
.darken::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="search-header">
|
||||
<div class="filter-area">
|
||||
<div class="filter">
|
||||
<div class="title">Filter:</div>
|
||||
<div class="title">Filter</div>
|
||||
<div class="filter-item">
|
||||
<div
|
||||
class="item"
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="filter">
|
||||
<div class="title">Sort By:</div>
|
||||
<div class="title">Sort By</div>
|
||||
<div class="filter-item">
|
||||
<div
|
||||
class="item"
|
||||
|
|
@ -79,9 +79,9 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
.search-header {
|
||||
display: flex;
|
||||
background: #0a1d20;
|
||||
background: #073847;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
height: 100px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.search-area {
|
||||
|
|
@ -113,11 +113,12 @@ input {
|
|||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
height: 57px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.title {
|
||||
font-size: 17px;
|
||||
font-size: 19px;
|
||||
color: white;
|
||||
border-bottom: solid 1px rgba(255, 255, 255, 0.575);
|
||||
margin-top: 10px;
|
||||
padding-left: 2px;
|
||||
padding-right: 5px;
|
||||
padding-bottom: 2px;
|
||||
|
|
@ -127,6 +128,7 @@ input {
|
|||
color: white;
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
margin: 2px;
|
||||
transition: 0.3s;
|
||||
&.selected {
|
||||
|
|
|
|||
|
|
@ -83,9 +83,10 @@ export default {
|
|||
position: relative;
|
||||
width: 250px;
|
||||
height: 300px;
|
||||
background: rgba(0, 0, 0, 0.479);
|
||||
background: #024253;
|
||||
opacity: 0.9;
|
||||
margin: 5px;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
transition: 0.3s;
|
||||
display: flex;
|
||||
|
|
@ -157,7 +158,7 @@ export default {
|
|||
.bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(0, 0, 0, 0.541);
|
||||
background: #04333F;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -178,39 +179,37 @@ export default {
|
|||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.member-count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
margin-left: 10px;
|
||||
margin-top: 0px;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
flex: 1;
|
||||
background: #022730;
|
||||
.material-icons {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
background: rgba(40, 140, 255, 0.8);
|
||||
align-self: flex-end;
|
||||
flex-shrink: 0;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
background: rgba(0, 179, 219, 0.8);
|
||||
transition: 0.2s;
|
||||
margin-right: 10px;
|
||||
margin-left: 0;
|
||||
margin-bottom: 10px;
|
||||
padding: 7px;
|
||||
transition: 0.3s;
|
||||
width: 80px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: rgb(40, 140, 255);
|
||||
background: #00B4DB;
|
||||
}
|
||||
&.selected {
|
||||
background: grey;
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@ export default {
|
|||
}
|
||||
.heading {
|
||||
padding: 10px;
|
||||
background: #15282a;
|
||||
background: #042f3a;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.information {
|
||||
|
|
@ -108,7 +108,7 @@ export default {
|
|||
background: rgba(38, 139, 255, 0.87);
|
||||
}
|
||||
.change-log {
|
||||
background: #294c51;
|
||||
background: #054151;
|
||||
overflow-y: auto;
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="direct-message-tab">
|
||||
<div class="direct-message-tab" :class="{darken: (showLeftPanel || showMembersPanel) }">
|
||||
<transition name="slide-left">
|
||||
<server-list
|
||||
v-if="$mq === 'mobile' && showLeftPanel || ($mq !== 'mobile')"
|
||||
|
|
@ -85,7 +85,7 @@ export default {
|
|||
transition: 0.5s;
|
||||
}
|
||||
.slide-left-enter, .slide-left-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
transform: translateX(-300px);
|
||||
transform: translateX(-340px);
|
||||
}
|
||||
|
||||
.slide-right-enter-active,
|
||||
|
|
@ -101,8 +101,8 @@ export default {
|
|||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: calc(100% - 50px);
|
||||
z-index: 1;
|
||||
z-index: 2;
|
||||
background: rgba(19, 107, 139, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -110,8 +110,18 @@ export default {
|
|||
.left-panel {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: calc(100% - 50px);
|
||||
z-index: 2;
|
||||
background: rgba(19, 107, 139, 0.9);
|
||||
}
|
||||
.darken::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.embed {
|
||||
background: #1d2b2d;
|
||||
background: #ffffff21;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
max-width: 500px;
|
||||
|
|
|
|||
|
|
@ -130,6 +130,8 @@ export default {
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
margin: 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.tree {
|
||||
padding-left: 22px;
|
||||
|
|
@ -156,10 +158,10 @@ export default {
|
|||
}
|
||||
|
||||
.friend:hover {
|
||||
background: #08616b;
|
||||
background: #053c4c;
|
||||
}
|
||||
.friend.selected {
|
||||
background: #064c55;
|
||||
background: #053240;
|
||||
}
|
||||
.profile-picture {
|
||||
height: 30px;
|
||||
|
|
|
|||
|
|
@ -67,9 +67,11 @@ export default {
|
|||
}
|
||||
.tab {
|
||||
transition: 0.3s;
|
||||
margin: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.tab:hover {
|
||||
background: #08616b;
|
||||
background: #053240;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -83,9 +83,11 @@ export default {
|
|||
}
|
||||
.tab {
|
||||
transition: 0.3s;
|
||||
margin: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.tab:hover {
|
||||
background: #08616b;
|
||||
background: #053240;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -58,14 +58,14 @@ export default {
|
|||
.show-status-list-enter,
|
||||
.show-status-list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.status-popout {
|
||||
position: absolute;
|
||||
bottom: 66px;
|
||||
top: 60px;
|
||||
right: 5px;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
background: rgba(3, 32, 41, 0.9);
|
||||
backdrop-filter: blur(5px);
|
||||
width: 180px;
|
||||
z-index: 4;
|
||||
|
|
@ -81,7 +81,7 @@ export default {
|
|||
}
|
||||
|
||||
.status-list:hover {
|
||||
background: #042f33;
|
||||
background: #081619;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
|
|
|
|||
|
|
@ -39,12 +39,19 @@ export default {
|
|||
}
|
||||
.upload {
|
||||
color: white;
|
||||
background: #3a585c;
|
||||
background: #26778a;
|
||||
margin: 10px;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.icon .material-icons {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
|
@ -61,7 +68,7 @@ export default {
|
|||
}
|
||||
.size {
|
||||
font-size: 15px;
|
||||
color: rgb(207, 207, 207);
|
||||
color: #d5e3e6;
|
||||
}
|
||||
.progress {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ export default {
|
|||
margin: auto;
|
||||
background: rgb(39, 39, 39);
|
||||
flex-direction: column;
|
||||
border-radius: 10px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,12 +9,24 @@ const prototype = {
|
|||
};
|
||||
|
||||
const config = [
|
||||
{
|
||||
version: 8.6,
|
||||
title: "New redesign!",
|
||||
shortTitle: "",
|
||||
date: "23/11/2019",
|
||||
headColor: "#007792",
|
||||
new: [
|
||||
"A new and better designed Nertivia! Thanks to skull."
|
||||
],
|
||||
fix: [
|
||||
"Some bugs have been fixed"
|
||||
]
|
||||
},
|
||||
{
|
||||
version: 8.5,
|
||||
title: "Format buttons and color text!",
|
||||
shortTitle: "",
|
||||
date: "18/11/2019",
|
||||
headColor: "#0c7b7f",
|
||||
new: [
|
||||
"Enter will now create new lines on mobile.",
|
||||
"You can now easily format your messages using the format buttons above.",
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ body {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
background: #173d42;
|
||||
background: linear-gradient(#0B4155, #01677E);
|
||||
}
|
||||
.app-content {
|
||||
display: flex;
|
||||
|
|
@ -94,9 +94,7 @@ body {
|
|||
align-items: center;
|
||||
z-index: 9999;
|
||||
padding-bottom: 20px;
|
||||
background-image: url("../assets/leftPanelBackground.jpg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background: #044050;
|
||||
}
|
||||
.box .title {
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
<electron-frame-buttons />
|
||||
</div>
|
||||
</div>
|
||||
<main-nav/>
|
||||
<div class="panel-layout">
|
||||
<news v-if="currentTab == 3" />
|
||||
<direct-message v-if="currentTab == 1" />
|
||||
|
|
@ -29,6 +30,7 @@ import windowProperties from "@/utils/windowProperties";
|
|||
import changelog from "@/utils/changelog.js";
|
||||
import ConnectingScreen from "./../components/app/ConnectingScreen.vue";
|
||||
import Spinner from "./../components/Spinner.vue";
|
||||
import MainNav from "./../components/app/MainNav.vue";
|
||||
|
||||
const ElectronFrameButtons = () =>
|
||||
import("@/components/ElectronJS/FrameButtons.vue");
|
||||
|
|
@ -63,7 +65,8 @@ export default {
|
|||
Popouts,
|
||||
News,
|
||||
ElectronFrameButtons,
|
||||
Explore
|
||||
Explore,
|
||||
MainNav
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -355,7 +358,7 @@ textarea {
|
|||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #173d42;
|
||||
background: linear-gradient(#0B4155, #01677E);
|
||||
}
|
||||
|
||||
.panel-layout {
|
||||
|
|
|
|||
|
|
@ -90,7 +90,8 @@ body {
|
|||
flex-direction: column;
|
||||
color: white;
|
||||
height: 100%;
|
||||
background: #173d42;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(#0B4155, #01677E);
|
||||
}
|
||||
.app-content {
|
||||
display: flex;
|
||||
|
|
@ -129,9 +130,7 @@ body {
|
|||
justify-content: center;
|
||||
z-index: 9999;
|
||||
padding: 20px;
|
||||
background-image: url("../assets/leftPanelBackground.jpg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background: #044050;
|
||||
}
|
||||
|
||||
.loading {
|
||||
|
|
|
|||
|
|
@ -221,10 +221,7 @@ body {
|
|||
flex-shrink: 0;
|
||||
border: 10px;
|
||||
position: relative;
|
||||
background-image: url("../assets/leftPanelBackground.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background: #072834;
|
||||
}
|
||||
.logo {
|
||||
background-image: url("../assets/logo.png");
|
||||
|
|
@ -250,7 +247,7 @@ body {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
transition: 0.5s;
|
||||
background-color: #173d42;
|
||||
background: linear-gradient(#0B4155, #01677E);
|
||||
}
|
||||
.content {
|
||||
position: fixed;
|
||||
|
|
@ -324,7 +321,7 @@ body {
|
|||
justify-content: center;
|
||||
}
|
||||
.feature {
|
||||
background: #102a2e;
|
||||
background: #024352;
|
||||
color: white;
|
||||
margin: 10px;
|
||||
padding: 2px;
|
||||
|
|
@ -353,7 +350,7 @@ body {
|
|||
}
|
||||
.link {
|
||||
padding: 10px;
|
||||
background: rgba(0, 0, 0, 0.219);
|
||||
background: #25424d;
|
||||
user-select: none;
|
||||
margin-left: 5px;
|
||||
transition: 0.3s;
|
||||
|
|
|
|||
|
|
@ -131,7 +131,7 @@ body {
|
|||
flex-direction: column;
|
||||
color: white;
|
||||
height: 100%;
|
||||
background: #173d42;
|
||||
background: linear-gradient(#0B4155, #01677E);
|
||||
}
|
||||
.app-content {
|
||||
display: flex;
|
||||
|
|
@ -160,9 +160,7 @@ body {
|
|||
justify-content: center;
|
||||
z-index: 9999;
|
||||
padding-bottom: 20px;
|
||||
background-image: url("../assets/leftPanelBackground.jpg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background: #044050;
|
||||
}
|
||||
.server {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -197,7 +197,7 @@ body {
|
|||
flex-direction: column;
|
||||
color: white;
|
||||
height: 100%;
|
||||
background: #173d42;
|
||||
background: linear-gradient(#0B4155, #01677E);
|
||||
}
|
||||
.app-content {
|
||||
display: flex;
|
||||
|
|
@ -224,9 +224,7 @@ body {
|
|||
align-items: center;
|
||||
z-index: 9999;
|
||||
padding-bottom: 20px;
|
||||
background-image: url("../assets/leftPanelBackground.jpg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background: #043b4a;
|
||||
}
|
||||
.box .title {
|
||||
text-align: center;
|
||||
|
|
@ -258,7 +256,7 @@ form {
|
|||
margin: 10px;
|
||||
width: 80%;
|
||||
align-self: center;
|
||||
background: #074d57;
|
||||
background: #032b35;
|
||||
padding: 10px;
|
||||
}
|
||||
.input-text {
|
||||
|
|
@ -269,7 +267,7 @@ input {
|
|||
outline: none;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
background: #03262b;
|
||||
background: #021b21;
|
||||
color: white;
|
||||
}
|
||||
.buttons {
|
||||
|
|
|
|||
|
|
@ -201,7 +201,7 @@ body {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
background: #173d42;
|
||||
background: linear-gradient(#0B4155, #01677E);
|
||||
}
|
||||
.app-content {
|
||||
display: flex;
|
||||
|
|
@ -228,9 +228,8 @@ body {
|
|||
align-items: center;
|
||||
z-index: 9999;
|
||||
padding-bottom: 20px;
|
||||
background-image: url("../assets/leftPanelBackground.jpg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background: #043b4a;
|
||||
|
||||
}
|
||||
.box .title {
|
||||
text-align: center;
|
||||
|
|
@ -262,7 +261,7 @@ form {
|
|||
margin: 10px;
|
||||
width: 80%;
|
||||
align-self: center;
|
||||
background: #074d57;
|
||||
background: #032b35;
|
||||
padding: 10px;
|
||||
}
|
||||
.input-text {
|
||||
|
|
@ -274,7 +273,7 @@ input {
|
|||
padding: 10px;
|
||||
border: none;
|
||||
background: none;
|
||||
background: #03262b;
|
||||
background: #021b21;
|
||||
color: white;
|
||||
}
|
||||
.buttons {
|
||||
|
|
|
|||
Loading…
Reference in a new issue