From 02f677a1702642f075c784282bc384ab64d1c510 Mon Sep 17 00:00:00 2001 From: supertiger1234 Date: Fri, 31 Jan 2020 10:19:56 +0000 Subject: [PATCH 1/7] new design --- public/index.html | 2 +- src/Main.vue | 2 +- src/components/app/MainNav.vue | 15 +++---- src/components/app/MemberTemplate.vue | 8 ++-- src/components/app/MembersList.vue | 2 +- src/components/app/MessageLogs.vue | 29 ------------- src/components/app/MessagePanel.vue | 18 ++++---- src/components/app/MessagePanel/Heading.vue | 2 +- src/components/app/MessageTemplate.vue | 5 ++- src/components/app/MyMiniInformation.vue | 2 +- .../app/Popouts/Popouts/uploadDialog.vue | 2 +- src/components/app/ServerList.vue | 10 +++++ .../app/ServerTemplate/ChannelTemplate.vue | 42 ++++++++++++------- src/components/app/Tabs/Explore.vue | 10 ++--- .../app/Tabs/Explore/serverTemplate.vue | 13 ++++-- .../app/Tabs/Explore/themesTemplate.vue | 4 +- src/views/App.vue | 8 ++-- 17 files changed, 90 insertions(+), 84 deletions(-) diff --git a/public/index.html b/public/index.html index be76805..e4c3d65 100644 --- a/public/index.html +++ b/public/index.html @@ -42,7 +42,7 @@ - + diff --git a/src/Main.vue b/src/Main.vue index e661ef8..c343b81 100644 --- a/src/Main.vue +++ b/src/Main.vue @@ -16,7 +16,7 @@ body { } #app { - font-family: "Roboto", sans-serif; + font-family: "Montserrat", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #383838; diff --git a/src/components/app/MainNav.vue b/src/components/app/MainNav.vue index 6e6b1db..80003b0 100644 --- a/src/components/app/MainNav.vue +++ b/src/components/app/MainNav.vue @@ -264,6 +264,10 @@ export default { flex-shrink: 0; } .item { + font-size: 24px; + width: 48px; + height: 48px; + margin-left: 14px; position: relative; display: flex; flex-shrink: 0; @@ -271,20 +275,16 @@ export default { align-content: center; align-items: center; color: white; - font-size: 30px; align-self: center; - width: 50px; - height: 50px; - margin-left: 10px; border-radius: 50%; cursor: pointer; user-select: none; transition: 0.2s; &:hover { - background: #093b4b; + background: rgba(0, 0, 0, 0.3); } &.selected { - background: #072c38; + background: rgba(0, 0, 0, 0.3); } } @@ -295,7 +295,8 @@ export default { flex-direction: column; align-items: center; align-content: center; - font-size: 15px; + font-size: 14px; + font-weight: bold; position: absolute; z-index: 115651; top: 5px; diff --git a/src/components/app/MemberTemplate.vue b/src/components/app/MemberTemplate.vue index 7fb4f50..cc45358 100644 --- a/src/components/app/MemberTemplate.vue +++ b/src/components/app/MemberTemplate.vue @@ -136,7 +136,7 @@ export default { } .member:hover { - background: #063442; + background: rgba(0, 0, 0, 0.3); } .information { @@ -151,9 +151,11 @@ export default { } .type-box { - padding: 3px; - border-radius: 5px; + padding: 4px; + border-radius: 2px; + font-size: 12px; height: 100%; + margin-right: 10px; background: rgb(255, 71, 71); } diff --git a/src/components/app/MembersList.vue b/src/components/app/MembersList.vue index 093a87c..28fbcb0 100644 --- a/src/components/app/MembersList.vue +++ b/src/components/app/MembersList.vue @@ -162,7 +162,7 @@ export default { .header { height: 50px; width: 100%; - background: #083a4a; + background: rgba(0, 0, 0, 0.2); display: flex; flex-shrink: 0; } diff --git a/src/components/app/MessageLogs.vue b/src/components/app/MessageLogs.vue index 39b0b9b..5c0da98 100644 --- a/src/components/app/MessageLogs.vue +++ b/src/components/app/MessageLogs.vue @@ -362,35 +362,6 @@ export default { align-self: center; } } -.back-to-bottom-button { - &:hover { - background: rgb(23, 124, 255); - box-shadow: 0px 0px 15px 0px #0000008a; - } - transition: 0.2s; - background: rgba(23, 124, 255, 0.818); - color: white; - position: absolute; - bottom: 15px; - right: 25px; - border-radius: 10px; - height: 50px; - z-index: 2; - display: flex; - justify-content: center; - flex-shrink: 0; - box-shadow: 0px 0px 7px 0px #0000008a; - align-content: center; - align-items: center; - padding-left: 10px; - user-select: none; - cursor: pointer; - .material-icons { - align-self: center; - flex-shrink: 0; - font-size: 35px; - } -} .show-message-animation { animation: showMessage 0.3s ease-in-out; diff --git a/src/components/app/MessagePanel.vue b/src/components/app/MessagePanel.vue index b9b200b..9613776 100644 --- a/src/components/app/MessagePanel.vue +++ b/src/components/app/MessagePanel.vue @@ -856,6 +856,7 @@ export default { flex-direction: column; overflow: hidden; position: relative; + background: rgba(0, 0, 0, 0.4); } .message-logs { overflow: auto; @@ -872,7 +873,7 @@ export default { flex-direction: column; padding-bottom: 10px; position: relative; - background: #014757; + background: rgba(0, 0, 0, 0.2); } .attachment-button { @@ -918,7 +919,7 @@ export default { } .chat-input { - font-family: "Roboto", sans-serif; + font-family: "Montserrat", sans-serif; background: transparent; color: white; width: 100%; @@ -994,16 +995,17 @@ export default { .back-to-bottom-button { &:hover { - background: rgba(0, 0, 0, 0.9); + background: rgba(0, 0, 0, 0.8); } transition: 0.2s; - background: rgba(0, 0, 0, 0.8); + background: rgba(0, 0, 0, 0.6); + backdrop-filter: blur(3px); border-radius: 100px; color: white; position: absolute; bottom: 15px; right: 25px; - height: 50px; + height: 52px; z-index: 2; display: flex; justify-content: center; @@ -1011,13 +1013,14 @@ export default { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); align-content: center; align-items: center; - padding-left: 10px; + padding-left: 15px; + padding-right: 10px; user-select: none; cursor: pointer; .material-icons { align-self: center; flex-shrink: 0; - font-size: 35px; + font-size: 25px; } } @@ -1037,7 +1040,6 @@ export default { margin-left: 2px; margin-bottom: 10px; flex-shrink: 0; - background: #024b5c; .markdown-icon { font-size: 21px; flex-shrink: 0; diff --git a/src/components/app/MessagePanel/Heading.vue b/src/components/app/MessagePanel/Heading.vue index 74504a5..a143f11 100644 --- a/src/components/app/MessagePanel/Heading.vue +++ b/src/components/app/MessagePanel/Heading.vue @@ -68,7 +68,7 @@ export default { diff --git a/src/components/app/Tabs/Explore.vue b/src/components/app/Tabs/Explore.vue index a0d3fc1..9ff8181 100644 --- a/src/components/app/Tabs/Explore.vue +++ b/src/components/app/Tabs/Explore.vue @@ -224,18 +224,18 @@ export default { &::after { content: "BETA"; position: absolute; - background: #ff3333; - border-radius: 5px; - font-size: 9px; + background: #f33; + border-radius: 2px; + font-size: 10px; padding: 2px; - bottom: 20px; + bottom: 22px; z-index: 999; } } .details { align-self: center; .title { - font-size: 20px; + font-size: 18px; margin-bottom: 5px; position: relative; } diff --git a/src/components/app/Tabs/Explore/serverTemplate.vue b/src/components/app/Tabs/Explore/serverTemplate.vue index e2b9d50..785593b 100644 --- a/src/components/app/Tabs/Explore/serverTemplate.vue +++ b/src/components/app/Tabs/Explore/serverTemplate.vue @@ -156,7 +156,14 @@ export default { text-overflow: ellipsis; } .material-icons { - color: #66e0ff; + color: #ffffff; + width: 12px; + height: 12px; + background-color: #5dcce8; + font-size: 13px; + border-radius: 50%; + padding: 4px; + margin-top: 3px; margin-left: 5px; } } @@ -209,8 +216,8 @@ export default { align-items: center; justify-content: center; width: 100%; - height: 40px; - border-radius: 4px; + height: 36px; + border-radius: 2px; background: rgba(0, 179, 219, 0.8); transition: 0.2s; margin-right: 10px; diff --git a/src/components/app/Tabs/Explore/themesTemplate.vue b/src/components/app/Tabs/Explore/themesTemplate.vue index f08737f..56cccd8 100644 --- a/src/components/app/Tabs/Explore/themesTemplate.vue +++ b/src/components/app/Tabs/Explore/themesTemplate.vue @@ -216,8 +216,8 @@ export default { align-items: center; justify-content: center; width: 100%; - height: 40px; - border-radius: 4px; + height: 36px; + border-radius: 2px; background: rgba(0, 179, 219, 0.8); transition: 0.2s; margin-right: 10px; diff --git a/src/views/App.vue b/src/views/App.vue index f06b7f8..4ddc606 100644 --- a/src/views/App.vue +++ b/src/views/App.vue @@ -1,7 +1,7 @@