dan/design
1
0
Fork 0
mirror of https://github.com/danbulant/design synced 2026-06-24 09:01:58 +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; position: sticky;
top: 0; top: 0;
left: 0; left: 0;
z-index: 99;
/*width: calc(100vw - 15px);*/ /*width: calc(100vw - 15px);*/
max-width: 1920px; max-width: 1920px;
margin: 0 auto 30px auto; margin: 0 auto 30px auto;
background: white; background: rgba(255,255,255, 0.2);
backdrop-filter: blur(10px);
} }
@media (max-width: 400px) { @media (max-width: 400px) {
.bar { .bar {
@ -170,7 +172,7 @@
} }
} }
.dark.bar { .dark.bar {
background: rgb(28, 28, 33); background: rgba(28, 28, 33, 0.2);
} }
.bar h3 { .bar h3 {
font-size: 18px; font-size: 18px;

4
src/components/bar.svelte
View file

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