design changes

This commit is contained in:
supertiger1234 2020-01-19 13:46:57 +00:00
parent ca97457f27
commit a4282c11ac
6 changed files with 24 additions and 12 deletions

View file

@ -46,7 +46,7 @@ export default {
.edit-panel { .edit-panel {
padding: 10px; padding: 10px;
color: white; color: white;
background: #0f272a; background: #012c36;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
z-index: 1; z-index: 1;
@ -66,6 +66,7 @@ export default {
transition: 0.3s; transition: 0.3s;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
border-radius: 4px;
} }
.close-button:hover { .close-button:hover {
background: #485b5d; background: #485b5d;

View file

@ -407,7 +407,7 @@ export default {
<style scoped> <style scoped>
.emoji-panel { .emoji-panel {
position: absolute; position: absolute;
bottom: 10px; bottom: -50px;
right: 20px; right: 20px;
max-width: 410px; max-width: 410px;
width: calc(100% - 50px); width: calc(100% - 50px);
@ -417,7 +417,10 @@ export default {
} }
.emoji-panel-inner { .emoji-panel-inner {
background: rgb(32, 32, 32); background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(5px);
border-radius: 4px;
overflow: hidden;
transition: 0.3s; transition: 0.3s;
z-index: 99999; z-index: 99999;
} }
@ -454,6 +457,7 @@ export default {
padding: 2px; padding: 2px;
min-width: 30px; min-width: 30px;
cursor: pointer; cursor: pointer;
border-radius: 4px;
} }
.emoji-item:hover { .emoji-item:hover {
background: rgb(59, 59, 59); background: rgb(59, 59, 59);
@ -497,6 +501,7 @@ export default {
justify-content: center; justify-content: center;
flex-shrink: 0; flex-shrink: 0;
cursor: pointer; cursor: pointer;
border-radius: 4px;
} }
.tab:hover { .tab:hover {
@ -520,18 +525,20 @@ export default {
height: 0; height: 0;
border-left: 10px solid transparent; border-left: 10px solid transparent;
border-right: 10px solid transparent; border-right: 10px solid transparent;
border-top: 15px solid rgb(32, 32, 32); border-top: 15px solid #000000ad;
align-self: flex-end; align-self: flex-end;
margin-right: 60px; margin-right: 46px;
} }
.tooltip { .tooltip {
display: none; display: none;
position: absolute; position: absolute;
margin: auto; margin: auto;
background: rgb(29, 29, 29); background: rgba(0, 0, 0, 0.7);
padding: 10px; backdrop-filter: blur(5px);
bottom: -20px; padding: 5px;
border-radius: 4px;
bottom: -30px;
text-transform: capitalize; text-transform: capitalize;
user-select: none; user-select: none;
} }

View file

@ -312,6 +312,7 @@ export default {
position: absolute; position: absolute;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
border-radius: 4px;
padding: 5px; padding: 5px;
max-width: 150px; max-width: 150px;
white-space: nowrap; white-space: nowrap;

View file

@ -315,7 +315,7 @@ export default {
opacity: 0.8; opacity: 0.8;
transition: 0.2s; transition: 0.2s;
&:hover { &:hover {
background: #074447; background: #093b4b;
} }
&.selected { &.selected {
background: #042a2b; background: #042a2b;
@ -341,6 +341,7 @@ export default {
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
padding: 5px; padding: 5px;
border-radius: 4px;
max-width: 150px; max-width: 150px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;

View file

@ -118,7 +118,7 @@ export default {
user-select: none; user-select: none;
} }
.GDrive-img { .GDrive-img {
background-image: url(./../../../../assets/Google_Drive_logo.png); background-image: url(./../../../../assets/Google_Drive_logo.webp);
} }
.buttons { .buttons {
margin: auto; margin: auto;

View file

@ -64,10 +64,12 @@ export default {
position: absolute; position: absolute;
top: 60px; top: 60px;
right: 5px; right: 5px;
background: rgba(3, 32, 41, 0.9); background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
width: 180px; width: 180px;
z-index: 4; z-index: 4;
border-radius: 4px;
overflow: hidden;
} }
.status-list { .status-list {
padding: 10px; padding: 10px;
@ -80,7 +82,7 @@ export default {
} }
.status-list:hover { .status-list:hover {
background: #081619; background: rgba(255, 255, 255, 0.2);;
} }
.status-icon { .status-icon {