TDvorak/swingmusic-extended
1
0
Fork 0
mirror of https://github.com/Dvorinka/swingmusic-extended.git synced 2026-06-04 12:33:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

search component initial build

Browse Source
This commit is contained in:
geoffrey45
2021-11-26 10:52:32 +03:00
parent 872badbc65
commit 206e89878c
8 changed files with 350 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/css/global.css
+83 -75
View File
@@ -1,133 +1,141 @@
:root {
--seperator: #ffffff48;
--green: #4AD168;
--seperator: #ffffff46;
--green: #4AD168;
}
body {
margin: 0;
background: #0d0e0e;
color: #fff;
font-family: 'Helvetica Neue', sans-serif;
margin: 0;
background: #0d0e0e;
color: #fff;
font-family: 'Helvetica Neue', sans-serif;
}
/* #app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} */
a {
text-decoration: none;
color: #fff;
text-decoration: none;
color: #fff;
}
.seperator {
border: 1px solid;
color: transparent;
margin: 0em;
border: 1px solid;
color: transparent;
margin: 0em;
}
.hidden {
display: none;
display: none;
}
.l-container {
display: grid;
grid-template-columns: min-content 4fr 1.5fr;
grid-template-rows: 78px 1fr 1fr;
grid-auto-flow: row;
grid-template-areas:
"l-sidebar nav nav"
"l-sidebar content r-sidebar"
"l-sidebar content r-sidebar";
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background: rgba(0, 0, 0, 0.575);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
-moz-backdrop-filter: blur(40px)
display: grid;
grid-template-columns: min-content 4fr 30em;
grid-template-rows: 4em 1fr 1fr;
grid-auto-flow: row;
grid-template-areas: "l-sidebar content r-sidebar" "l-sidebar content r-sidebar" "l-sidebar content r-sidebar";
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background: rgba(0, 0, 0, 0.575);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
-moz-backdrop-filter: blur(40px);
}
#bg-blur {
position: absolute;
width: 100vw;
height: 100vh;
background-color: rgba(27, 27, 27, 0.548);
background-image: url(../images/dark-bg.jpg);
z-index: -1;
position: absolute;
width: 100vw;
height: 100vh;
background-color: rgba(27, 27, 27, 0.548);
background-image: url(../images/dark-bg.jpg);
z-index: -1;
}
.collapsed .l-sidebar {
width: 70px;
transition-timing-function: ease-in-out;
transition-duration: 0.3s;
transition-property: width;
width: 70px;
transition-timing-function: ease-in-out;
transition-duration: 0.3s;
transition-property: width;
}
.l-sidebar {
width: 250px;
grid-area: l-sidebar;
padding-top: 0.5em;
background-color: #131313b2;
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
transition-duration: 0.3s;
transition-property: width;
width: 250px;
grid-area: l-sidebar;
padding-top: 0.5em;
margin: .5em 0 .5em .5em;
border-radius: .5em;
background-color: #131313b2;
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
transition-duration: 0.3s;
transition-property: width;
}
.rounded {
border-radius: 10px;
border-radius: 10px;
}
.circular {
border-radius: 20px;
border-radius: 20px;
}
.flex {
display: flex;
}
.nav {
grid-area: nav;
border: 1px solid;
display: flex;
}
.content {
grid-area: content;
border-radius: .25em;
padding: .5em;
overflow: hidden;
grid-area: content;
border-radius: .25em;
padding: .5em;
overflow: hidden;
}
.r-sidebar {
grid-area: r-sidebar;
border: 1px solid rgb(109, 109, 109);
border-radius: 5px;
grid-area: r-sidebar;
border-radius: 5px;
margin-right: .5em;
}
.image {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* scrollbars */
/* width */
::-webkit-scrollbar {
width: .5em;
width: .5em;
}
/* Track */
::-webkit-scrollbar-track {
background: rgba(51, 51, 51, 0.459);
border-radius: 1em;
background: rgba(51, 51, 51, 0.459);
border-radius: 1em;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: grey;
border-radius: 1em;
background: grey;
border-radius: 1em;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgb(163, 163, 163);
}
::-webkit-scrollbar-thumb:hover {
background: rgb(163, 163, 163);
}