RPJosh
/
memories
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix photo icons

old-stable24
Varun Patil 2022-10-15 21:06:26 -07:00
parent 0343a626e6
commit ae5fb92682
1 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/frame/Photo.vue
View File

@ -229,10 +229,13 @@ export default class Photo extends Mixins(GlobalMixin) {
to { transform: translateX(0); opacity: 1; } to { transform: translateX(0); opacity: 1; }
} }
// Distance of icon from border
$icon-dist: min(10px, 6%);
/* Extra icons */ /* Extra icons */
.check-icon.select { .check-icon.select {
position: absolute; position: absolute;
top: 6%; left: 6%; top: $icon-dist; left: $icon-dist;
z-index: 100; z-index: 100;
background-color: var(--color-main-background); background-color: var(--color-main-background);
border-radius: 50%; border-radius: 50%;
@ -249,10 +252,10 @@ export default class Photo extends Mixins(GlobalMixin) {
filter: invert(1) brightness(100); filter: invert(1) brightness(100);
} }
.video-icon { .video-icon {
top: 6%; right: 6%; top: $icon-dist; right: $icon-dist;
} }
.star-icon { .star-icon {
bottom: 6%; left: 6%; bottom: $icon-dist; left: $icon-dist;
} }
/* Actual image */ /* Actual image */
@ -260,23 +263,23 @@ div.img-outer {
padding: 2px; padding: 2px;
@media (max-width: 768px) { padding: 1px; } @media (max-width: 768px) { padding: 1px; }
transition: transform 0.1s ease; transition: padding 0.1s ease;
background-clip: content-box, padding-box; background-clip: content-box, padding-box;
background-color: var(--color-background-dark); background-color: var(--color-background-dark);
.selected > & { transform: scale(0.9); } .selected > & { padding: calc($icon-dist - 2px); }
> img { > img {
background-clip: content-box; background-clip: content-box;
object-fit: cover; object-fit: cover;
cursor: pointer; cursor: pointer;
transform: translateZ(0);
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; -webkit-touch-callout: none;
user-select: none; user-select: none;
transition: box-shadow 0.1s ease;
.selected > & { box-shadow: 0 0 3px 2px var(--color-primary); } .selected > & { box-shadow: 0 0 4px 2px var(--color-primary); }
.p-outer.p-loading > & { display: none; } .p-outer.p-loading > & { display: none; }
.p-outer.error & { object-fit: contain; } .p-outer.error & { object-fit: contain; }
} }