icd/rentgen
icd/rentgen
2
1
Fork 0
Code Issues 72 Pull Requests Projects Releases 6 Wiki Activity

Fix address bar animation

Browse Source
This commit is contained in:
Arkadiusz Wieczorek 2022-07-15 10:53:26 +02:00
parent 1c773becf3
commit 4f17c5164a
2 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
components/report-window/screenshot-generator.scss
View File

@ -44,7 +44,6 @@ h2 {
color: $disabled-grey !important; color: $disabled-grey !important;
border: 1px solid $disabled-grey; border: 1px solid $disabled-grey;
background: linear-gradient(to bottom, $icd-rentgen-color 20%, #fff 20%, #fff 100%); background: linear-gradient(to bottom, $icd-rentgen-color 20%, #fff 20%, #fff 100%);
// animation: xray 2s cubic-bezier(0, 1.43, 0.39, 1.43) infinite;
background-size: 100%; background-size: 100%;
background-position-y: 26.5px; background-position-y: 26.5px;
@ -53,13 +52,21 @@ h2 {
background-position-y: 26.5px; background-position-y: 26.5px;
animation: none; animation: none;
.browser__header { &--address-bar {
background-color: #fff; border: 1px solid #8a949f;
height: 1rem;
width: 10rem;
font-size: 0.667rem;
font-weight: 400;
padding: 0 0.25rem;
color: #000;
overflow: hidden;
word-break: normal;
inline-size: 10rem;
text-overflow: ellipsis;
&--addres-bar { background: linear-gradient(to left, $icd-rentgen-color 20%, #fff 20%, #fff 100%);
background-color: #fff; animation: xray-header 2s cubic-bezier(0, 1.43, 0.39, 1.43) infinite;
animation: none;
}
} }
} }
@ -82,11 +89,17 @@ h2 {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background-color: #fff; background-color: #fff;
padding: 0 0.5rem; padding: 0 0.5rem;
font-size: 1.25rem; font-size: 1.25rem;
border-bottom: 1px solid $disabled-grey; border-bottom: 1px solid $disabled-grey;
&--in_progress {
.browser__header--address-bar {
background: linear-gradient(to left, $icd-rentgen-color 20%, #fff 20%, #fff 100%);
animation: xray-header 2s cubic-bezier(0, 1.43, 0.39, 1.43) infinite;
}
}
&--address-bar { &--address-bar {
border: 1px solid #8a949f; border: 1px solid #8a949f;
height: 1rem; height: 1rem;
@ -99,9 +112,6 @@ h2 {
word-break: normal; word-break: normal;
inline-size: 10rem; inline-size: 10rem;
text-overflow: ellipsis; text-overflow: ellipsis;
background: linear-gradient(to left, $icd-rentgen-color 20%, #fff 20%, #fff 100%);
animation: xray-header 2s cubic-bezier(0, 1.43, 0.39, 1.43) infinite;
} }
&--controls { &--controls {

2
components/report-window/screenshot-generator.tsx
View File

@ -217,7 +217,7 @@ export default function ScreenshotGenerator({
backgroundImage: `url(${SS_URL}${preview})`, backgroundImage: `url(${SS_URL}${preview})`,
}} }}
> >
<div className="browser__header"> <div className="browser__header browser__header--in_progress">
<div className="browser__header--address-bar"></div> <div className="browser__header--address-bar"></div>
<div className="browser__header--controls">· · ·</div> <div className="browser__header--controls">· · ·</div>
</div> </div>