dan/design
1
0
Fork 0
mirror of https://github.com/danbulant/design synced 2026-06-14 03:41:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

transparent bar

Browse source
This commit is contained in:
Daniel Bulant 2022-01-22 22:13:31 +01:00
parent f377d896f1
commit a33b416d50
4 changed files with 6 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/screenshots/heaventaker.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.8 MiB

BIN
public/screenshots/mangadex.jfif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6 KiB

6
src/App.svelte
View file

@ -159,10 +159,12 @@
position: sticky;
top: 0;
left: 0;
z-index: 99;
/*width: calc(100vw - 15px);*/
max-width: 1920px;
margin: 0 auto 30px auto;
background: white;
background: rgba(255,255,255, 0.2);
backdrop-filter: blur(10px);
}
@media (max-width: 400px) {
.bar {
@ -170,7 +172,7 @@
}
}
.dark.bar {
background: rgb(28, 28, 33);
background: rgba(28, 28, 33, 0.2);
}
.bar h3 {
font-size: 18px;

4
src/components/bar.svelte
View file

@ -6,14 +6,14 @@
nav {
width: calc(100% - 20px);
border-radius: 5px;
background: white;
background: rgba(255,255,255, 0.2);
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
:global(.dark nav.bar-component) {
background: rgb(28, 28, 33);
background: rgba(28, 28, 33, 0.2);
}
:global(nav.bar-component > *) {
margin: 10px;