Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: add-play-icon #429

Merged
merged 3 commits into from
Jan 13, 2025
Merged

chore: add-play-icon #429

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ac35a4a
styles
vishalvivekm Jan 10, 2025
51f4835
import vidoes styles to styles_project.scss
vishalvivekm Jan 10, 2025
f3ed9e7
add play icon
vishalvivekm Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion assets/scss/_styles_project.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
@import "_navbar_project.scss";
@import "tax_project.scss";
@import "search_project.scss";
@import "videos.scss";

.navbar-dark {
min-height: 5rem;
Expand Down Expand Up @@ -673,4 +674,4 @@ a:not([href]):not([class]):hover {

.csvtable {
width: 100%;
}
}
30 changes: 30 additions & 0 deletions assets/scss/_videos.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
.video-btn-wrapper {
height: 60px;
width: 60px;
background-color: #00b39f;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease;
transform: translate(-50%, -50%);
}

.video-btn-wrapper svg {
height: 50%;
width: 50%;
margin-top: 5px;
}

.play-icon-path {
fill: white;
transition: fill 0.3s ease;
}

.bg-gradient-overlay:hover .video-btn-wrapper {
background-color: #ffffff;
}

.bg-gradient-overlay:hover .play-icon-path {
fill: #00b39f;
}
8 changes: 7 additions & 1 deletion layouts/partials/video-section-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,13 @@
></iframe> -->
</div>
{{ end }}
<div class="position-absolute top-0 start-0 w-100 h-100 bg-gradient-overlay"></div>
<div class="position-absolute top-0 start-0 w-100 h-100 bg-gradient-overlay">
<div class="video-btn-wrapper position-absolute top-50 start-50">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 57 60">
<path class="play-icon-path" d="M39.5298 29.028L21.7045 39.395C21.6471 39.4284 21.5893 39.4603 21.5311 39.4908C20.9134 39.8161 20.2107 40 19.4654 40C16.9992 40 15 37.9861 15 35.5018V14.5102C15 13.6377 15.2466 12.8233 15.6734 12.1337C16.9369 10.0722 19.6075 9.38388 21.7044 10.6034L39.5291 20.97C40.2869 21.3504 40.9459 21.9517 41.401 22.7457C41.811 23.4611 42.0038 24.2428 41.9999 25.0133C41.999 25.7747 41.806 26.5461 41.4009 27.2527C40.9461 28.0464 40.2873 28.6476 39.5298 29.028Z"/>
</svg>
</div>
</div>
{{ end }}
</div>

Expand Down