yawaflua/LuckyDiamond
1
0
Fork 0
mirror of https://github.com/yawaflua/LuckyDiamond.git synced 2025-12-10 04:09:29 +02:00
Code Issues Packages Projects Releases Wiki Activity

edited bg color for asidebar

Browse Source
This commit is contained in:
Kostya
2023-11-13 20:53:44 +03:00
parent 9df6813956
commit 49f8914556
1 changed files with 22 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
luckydiamond/src/pages/AsidebarElement.vue
View File

@@ -1,6 +1,7 @@
<template> <template>
<aside class="bar"> <aside class="bar">
<div class="bar__content"> <div class="bar__content">
<div class="bar__blurry-bg"></div>
<div class="bar__buttons"> <div class="bar__buttons">
<a href="#" class="bar__button--home"> <img src="../assets/icons/icon-home-button.png"> </a> <a href="#" class="bar__button--home"> <img src="../assets/icons/icon-home-button.png"> </a>
<div class="bar__settings"> <div class="bar__settings">
@@ -21,18 +22,35 @@ export default {
.bar { .bar {
width: 88px; width: 88px;
height: 100vh; height: 100vh;
background: #1D202B;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
user-select: none; user-select: none;
overflow: hidden;
} }
.bar__content { .bar__content {
padding-top: 26px; padding-top: 26px;
justify-content: center; justify-content: center;
background: #1D202B;
display: flex; display: flex;
align-items: center; align-items: flex-start;
text-align: center; text-align: center;
position: relative;
z-index: 1;
height: 100%;
}
.bar__blurry-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #051B53;
filter: blur(39px);
z-index: -1;
}
.bar__buttons {
z-index: 2;
} }
.bar__settings { .bar__settings {
position: absolute; position: absolute;
@@ -41,4 +59,4 @@ export default {
.bar__settings .bar__button--settings img { .bar__settings .bar__button--settings img {
margin-bottom: 15px; margin-bottom: 15px;
} }
</style> </style>