mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-07-05 02:50:46 +00:00
creating explore main page.
This commit is contained in:
supertiger1234
parent
e388a6db57
commit
0889a08ee1
5 changed files with 578 additions and 4 deletions
|
|
@ -8,7 +8,8 @@
|
||||||
<div class="header" :class="{critical: tabs[index].critical}"><div class="material-icons">{{tabs[index].icon}}</div><div>{{tabs[index].title}}</div></div>
|
<div class="header" :class="{critical: tabs[index].critical}"><div class="material-icons">{{tabs[index].icon}}</div><div>{{tabs[index].title}}</div></div>
|
||||||
<general v-if="index === 0"/>
|
<general v-if="index === 0"/>
|
||||||
<manage-channels v-if="index === 1"/>
|
<manage-channels v-if="index === 1"/>
|
||||||
<delete-server v-if="index === 2"/>
|
<server-visibility v-if="index === 2"/>
|
||||||
|
<delete-server v-if="index === 3"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -24,9 +25,9 @@ import { mapState } from "vuex";
|
||||||
import General from './General.vue'
|
import General from './General.vue'
|
||||||
import DeleteServer from './DeleteServer.vue'
|
import DeleteServer from './DeleteServer.vue'
|
||||||
import ManageChannels from './ManageChannels.vue'
|
import ManageChannels from './ManageChannels.vue'
|
||||||
|
import ServerVisibility from './ServerVisibility.vue'
|
||||||
export default {
|
export default {
|
||||||
components: { General, DeleteServer, ManageChannels},
|
components: { General, DeleteServer, ManageChannels, ServerVisibility},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
index: 0,
|
index: 0,
|
||||||
|
|
@ -34,6 +35,7 @@ export default {
|
||||||
{title: "General", icon: "info"},
|
{title: "General", icon: "info"},
|
||||||
{title: "Manage Channels", icon: "storage"},
|
{title: "Manage Channels", icon: "storage"},
|
||||||
// {title: "Manage Invites", icon: "local_post_office"},
|
// {title: "Manage Invites", icon: "local_post_office"},
|
||||||
|
{title: "Server Visibility", icon: "visibility"},
|
||||||
{title: "Delete Server", icon: "warning", critical: true},
|
{title: "Delete Server", icon: "warning", critical: true},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -104,7 +106,7 @@ export default {
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
transition: 0.2s;
|
transition: 0.2s;
|
||||||
cursor: default;
|
cursor: pointer;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,93 @@
|
||||||
|
<template>
|
||||||
|
<div class="content-inner" v-if="server">
|
||||||
|
<div class="details">Making your server visibility public means that your server will be shown publicly in the Nertivia's "Explore" tab.</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="toggle">
|
||||||
|
<div class="title">Server Visibility</div>
|
||||||
|
<div class="item" @click="privateServer = false"><div class="box" :class="{selected: !privateServer}"></div> Public</div>
|
||||||
|
<div class="item" @click="privateServer = true"><div class="box" :class="{selected: privateServer}"></div> Private</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import config from "@/config.js";
|
||||||
|
import { bus } from "@/main";
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
privateServer: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
server() {
|
||||||
|
const serverID = this.$store.state.popoutsModule.serverSettings.serverID
|
||||||
|
return this.$store.getters['servers/servers'][serverID]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
.content-inner {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details {
|
||||||
|
margin: 10px;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle {
|
||||||
|
background: rgb(46, 46, 46);
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 5px;
|
||||||
|
margin-left: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
margin: 3px;
|
||||||
|
cursor: pointer;
|
||||||
|
.box {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: rgb(95, 95, 95);
|
||||||
|
margin-right: 5px;
|
||||||
|
&.selected {
|
||||||
|
background: rgb(34, 156, 255);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.button {
|
||||||
|
padding: 10px;
|
||||||
|
background: rgba(255, 0, 0, 0.719);
|
||||||
|
margin: auto;
|
||||||
|
border-radius: 10px;
|
||||||
|
transition: 0.3s;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.button:hover {
|
||||||
|
background: rgb(255, 0, 0);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
160
src/components/app/Tabs/Explore.vue
Normal file
160
src/components/app/Tabs/Explore.vue
Normal file
|
|
@ -0,0 +1,160 @@
|
||||||
|
<template>
|
||||||
|
<div class="explore-tab">
|
||||||
|
<div class="left-panel">
|
||||||
|
<div class="header">
|
||||||
|
<div class="icon">
|
||||||
|
<i class="material-icons">explore</i>
|
||||||
|
</div>
|
||||||
|
<div class="details">
|
||||||
|
<div class="title">Explore</div>
|
||||||
|
<div class="description">Find new servers, Emojis and more!</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="items">
|
||||||
|
<div
|
||||||
|
class="item"
|
||||||
|
v-for="(tab, index) in tabs"
|
||||||
|
:key="index"
|
||||||
|
:class="{selected: selectedTab === index}"
|
||||||
|
@click="selectedTab = index"
|
||||||
|
>
|
||||||
|
<i class="material-icons">{{tab.icon}}</i>
|
||||||
|
{{tab.name}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right-panel">
|
||||||
|
<div class="header"> <i class="material-icons">{{tabs[selectedTab].icon}}</i>{{tabs[selectedTab].name}}</div>
|
||||||
|
<div class="coming-soon" v-if="selectedTab > 0">
|
||||||
|
<div class="icon">
|
||||||
|
<i class="material-icons">explore</i>
|
||||||
|
</div>
|
||||||
|
<div class="text">Coming soon!</div>
|
||||||
|
</div>
|
||||||
|
<component :is="tabs[selectedTab].component" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { bus } from "@/main";
|
||||||
|
import Servers from './Explore/servers'
|
||||||
|
export default {
|
||||||
|
components: { Servers },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
selectedTab: 0,
|
||||||
|
tabs: [
|
||||||
|
// {icon: "home", name: "home", component: ""},
|
||||||
|
{ icon: "rss_feed", name: "Servers", component: "servers" },
|
||||||
|
{ icon: "face", name: "Emojis", component: "" },
|
||||||
|
{ icon: "brush", name: "Themes", component: "" },
|
||||||
|
{ icon: "message", name: "Message Styles", component: "" }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
methods: {},
|
||||||
|
computed: {}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.explore-tab {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.459);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.left-panel {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: rgba(0, 0, 0, 0.274);
|
||||||
|
width: 300px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
.items {
|
||||||
|
user-select: none;
|
||||||
|
.item {
|
||||||
|
.material-icons {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: rgba(0, 0, 0, 0.199);
|
||||||
|
margin: 5px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.3s;
|
||||||
|
&:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.452);
|
||||||
|
}
|
||||||
|
&.selected {
|
||||||
|
background: rgba(0, 0, 0, 0.452);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
height: 100px;
|
||||||
|
background: rgba(0, 0, 0, 0.226);
|
||||||
|
user-select: none;
|
||||||
|
.icon {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 100px;
|
||||||
|
.material-icons {
|
||||||
|
font-size: 70px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.details {
|
||||||
|
align-self: center;
|
||||||
|
.title {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.description {
|
||||||
|
opacity: 0.7;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.coming-soon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.39);
|
||||||
|
color: white;
|
||||||
|
.material-icons {
|
||||||
|
font-size: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-panel {
|
||||||
|
.header {
|
||||||
|
background: rgba(0, 0, 0, 0.448);
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
.material-icons {margin-right: 5px;}
|
||||||
|
user-select: none;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
39
src/components/app/Tabs/Explore/searchHeader.vue
Normal file
39
src/components/app/Tabs/Explore/searchHeader.vue
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
<template>
|
||||||
|
<div class="search-header">
|
||||||
|
<div class="search-area">
|
||||||
|
<input type="text" :placeholder="`Search for ${name}`">
|
||||||
|
</div>
|
||||||
|
<div class="filter-area"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: [
|
||||||
|
'name'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.search-header {
|
||||||
|
display: flex;
|
||||||
|
background: rgba(0, 0, 0, 0.231);
|
||||||
|
width: 100%;
|
||||||
|
height: 70px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.search-area {
|
||||||
|
height: 100%;
|
||||||
|
width: 300px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
280
src/components/app/Tabs/Explore/servers.vue
Normal file
280
src/components/app/Tabs/Explore/servers.vue
Normal file
|
|
@ -0,0 +1,280 @@
|
||||||
|
<template>
|
||||||
|
<div class="servers-tab">
|
||||||
|
<search-header name="servers" />
|
||||||
|
<div class="items-main-container">
|
||||||
|
<div class="items-container">
|
||||||
|
<div class="items">
|
||||||
|
<div class="item">
|
||||||
|
<div class="top">
|
||||||
|
<div class="avatar"></div>
|
||||||
|
<div class="name">Nertivia</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="description">Nertivia is a cool server.</div>
|
||||||
|
<div class="button">Join</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="top">
|
||||||
|
<div class="avatar"></div>
|
||||||
|
<div class="name">Nertivia</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="description">Nertivia is a cool server.</div>
|
||||||
|
<div class="button">Join</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="top">
|
||||||
|
<div class="avatar"></div>
|
||||||
|
<div class="name">Nertivia</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="description">Nertivia is a cool server.</div>
|
||||||
|
<div class="button">Join</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="top">
|
||||||
|
<div class="avatar"></div>
|
||||||
|
<div class="name">Nertivia</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="description">Nertivia is a cool server.</div>
|
||||||
|
<div class="button">Join</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="top">
|
||||||
|
<div class="avatar"></div>
|
||||||
|
<div class="name">Nertivia</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="description">Nertivia is a cool server.</div>
|
||||||
|
<div class="button">Join</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="top">
|
||||||
|
<div class="avatar"></div>
|
||||||
|
<div class="name">Nertivia</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="description">Nertivia is a cool server.</div>
|
||||||
|
<div class="button">Join</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="top">
|
||||||
|
<div class="avatar"></div>
|
||||||
|
<div class="name">Nertivia</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="description">Nertivia is a cool server.</div>
|
||||||
|
<div class="button">Join</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="top">
|
||||||
|
<div class="avatar"></div>
|
||||||
|
<div class="name">Nertivia</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="description">Nertivia is a cool server.</div>
|
||||||
|
<div class="button">Join</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="top">
|
||||||
|
<div class="avatar"></div>
|
||||||
|
<div class="name">Nertivia</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="description">Nertivia is a cool server.</div>
|
||||||
|
<div class="button">Join</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="top">
|
||||||
|
<div class="avatar"></div>
|
||||||
|
<div class="name">Nertivia</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="description">Nertivia is a cool server.</div>
|
||||||
|
<div class="button">Join</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="top">
|
||||||
|
<div class="avatar"></div>
|
||||||
|
<div class="name">Nertivia</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="description">Nertivia is a cool server.</div>
|
||||||
|
<div class="button">Join</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="top">
|
||||||
|
<div class="avatar"></div>
|
||||||
|
<div class="name">Nertivia</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="description">Nertivia is a cool server.</div>
|
||||||
|
<div class="button">Join</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="top">
|
||||||
|
<div class="avatar"></div>
|
||||||
|
<div class="name">Nertivia</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="description">Nertivia is a cool server.</div>
|
||||||
|
<div class="button">Join</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="top">
|
||||||
|
<div class="avatar"></div>
|
||||||
|
<div class="name">Nertivia</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="description">Nertivia is a cool server.</div>
|
||||||
|
<div class="button">Join</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="top">
|
||||||
|
<div class="avatar"></div>
|
||||||
|
<div class="name">Nertivia</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="description">Nertivia is a cool server.</div>
|
||||||
|
<div class="button">Join</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="top">
|
||||||
|
<div class="avatar"></div>
|
||||||
|
<div class="name">Nertivia</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="description">Nertivia is a cool server.</div>
|
||||||
|
<div class="button">Join</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import searchHeader from "./searchHeader";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { searchHeader }
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.servers-tab {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.items-main-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.items-container {
|
||||||
|
display: block;
|
||||||
|
align-content: center;
|
||||||
|
align-items: center;
|
||||||
|
max-width: 1066px;
|
||||||
|
margin: auto;
|
||||||
|
width: 100%;
|
||||||
|
.items {
|
||||||
|
margin-top: 40px;
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 16px;
|
||||||
|
grid-template-columns: repeat(auto-fill, 250px);
|
||||||
|
grid-auto-rows: min-content;
|
||||||
|
align-items: stretch;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: 250px;
|
||||||
|
height: 270px;
|
||||||
|
background: rgba(0, 0, 0, 0.479);
|
||||||
|
opacity: 0.9;
|
||||||
|
margin: 5px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-radius: 10px;
|
||||||
|
transition: 0.3s;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.top {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
height: 140px;
|
||||||
|
justify-content: center;
|
||||||
|
align-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
.avatar {
|
||||||
|
background: rgb(26, 133, 255);
|
||||||
|
height: 80px;
|
||||||
|
width: 80px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
font-size: 23px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: rgba(0, 0, 0, 0.194);
|
||||||
|
flex: 1;
|
||||||
|
.description {
|
||||||
|
margin: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
background: rgba(40, 140, 255, 0.8);
|
||||||
|
border-radius: 5px;
|
||||||
|
align-self: flex-end;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
padding: 7px;
|
||||||
|
transition: 0.3s;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
background: rgb(40, 140, 255);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in a new issue