andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Improve card background

Browse source
This commit is contained in:
schmelczerandras 2020-11-17 21:02:57 +01:00
parent dc86d30eb2
commit e8177c9c0a
2 changed files with 11 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/page/timeline/timeline-element/timeline-element.scss
View file

@ -76,8 +76,7 @@ section.timeline-element {
width: 50%; width: 50%;
.date { .date {
transform: translateX(calc(var(--icon-size) / 2 + 12px)) transform: translateX(calc(var(--icon-size) / 2 + 12px)) translateY(-10%);
translateY(-10%);
} }
} }
} }
@ -85,7 +84,12 @@ section.timeline-element {
.card { .card {
@include card-base(); @include card-base();
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: var(--card-color);
background-color: var(--blurred-card-color);
backdrop-filter: blur(var(--blur-radius));
@supports not (backdrop-filter: blur(var(--blur-radius))) {
background-color: var(--card-color);
}
& > *:not(:first-child) { & > *:not(:first-child) {
margin-top: var(--line-height); margin-top: var(--line-height);

4
src/style/vars.scss
View file

@ -15,6 +15,8 @@
--background: #ffffff; --background: #ffffff;
--normal-text-color: #31343f; --normal-text-color: #31343f;
--card-color: #ffffff; --card-color: #ffffff;
--blurred-card-color: transparent;
--blur-radius: 16px;
--special-text-color: var(--accent-color); --special-text-color: var(--accent-color);
} }
@ -50,6 +52,8 @@
--background: #242638; --background: #242638;
--normal-text-color: #ffffff; --normal-text-color: #ffffff;
--card-color: #263551; --card-color: #263551;
--blurred-card-color: #26355166;
--blur-radius: 24px;
--special-text-color: #ffffff; --special-text-color: #ffffff;
--inset-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.175), --inset-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.175),
inset 0 0 1px rgba(0, 0, 0, 0.4); inset 0 0 1px rgba(0, 0, 0, 0.4);