Skip to content
GitLab
Explore
Sign in
Register
Primary navigation
Search or go to…
Project
S
sg_youtube
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Deploy
Model registry
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Terms and privacy
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
TYPO3
sg_youtube
Commits
ad785c95
Commit
ad785c95
authored
1 year ago
by
Georgi
Browse files
Options
Downloads
Patches
Plain Diff
[BUGFIX] Add pointer cursor to the close button
parent
5096d2c0
No related branches found
Branches containing commit
Tags
6.0.6
Tags containing commit
No related merge requests found
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
Resources/Public/Sass/Modules/_sg-video.scss
+1
-0
1 addition, 0 deletions
Resources/Public/Sass/Modules/_sg-video.scss
Resources/Public/StyleSheets/main.min.css
+1
-1
1 addition, 1 deletion
Resources/Public/StyleSheets/main.min.css
with
2 additions
and
1 deletion
Resources/Public/Sass/Modules/_sg-video.scss
+
1
−
0
View file @
ad785c95
...
...
@@ -409,6 +409,7 @@ $sg-video-screen-xs-min: $sg-video-screen-xs;
background-size
:
contain
;
background-image
:
url("data:image/svg+xml,%3Csvg width='90px' height='90px' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23ffffff' stroke='%23ffffff'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ctitle%3EClose-Circle%3C/title%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Close-Circle'%3E%3Crect id='Rectangle' fill-rule='nonzero' x='0' y='0' width='24' height='24'%3E%3C/rect%3E%3Ccircle id='Oval' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' cx='12' cy='12' r='9'%3E%3C/circle%3E%3Cline x1='14.1213' y1='9.87866' x2='9.8787' y2='14.1213' id='Path' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3C/line%3E%3Cline x1='9.87866' y1='9.87866' x2='14.1213' y2='14.1213' id='Path' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3C/line%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
;
background-repeat
:
no-repeat
;
cursor
:
pointer
;
}
&
--visible
{
...
...
This diff is collapsed.
Click to expand it.
Resources/Public/StyleSheets/main.min.css
+
1
−
1
View file @
ad785c95
:root
{
--sg-video-component-color-headline
:
#0a293b
;
--sg-video-component-color-foreground
:
#174566
;
--sg-video-component-color-background
:
none
;
--sg-video-component-color-link
:
#15415e
;
--sg-video-component-color-play-button
:
#fff
;
--sg-video-component-color-link--hover
:
#061924
}
.tx-sg-youtube
{
margin-bottom
:
20px
}
.tx-sg-vimeo
{
margin-bottom
:
20px
}
.sg-video__image
{
width
:
100%
;
height
:
auto
;
transition
:
transform
var
(
--sg-video-base-transition-timing
,
0.3s
)
ease
}
.sg-video__image-container
{
position
:
relative
;
overflow
:
hidden
;
width
:
100%
;
color
:
var
(
--sg-video-component-color-play-button
);
display
:
block
}
.sg-video__image-container
:not
(
.no-lightbox
)
svg
{
position
:
absolute
;
top
:
50%
;
left
:
50%
;
width
:
40px
;
height
:
50px
;
transform
:
translate
(
-50%
,
-50%
)
scale
(
0.8
);
opacity
:
.8
;
transition
:
opacity
var
(
--sg-video-base-transition-timing
,
0.3s
),
transform
var
(
--sg-video-base-transition-timing
,
0.3s
);
z-index
:
9
;
text-shadow
:
-1px
4px
27px
rgba
(
0
,
0
,
0
,
.5
)}
.sg-video__image-container
:hover
,
.sg-video__image-container
:focus
{
text-decoration
:
none
}
.sg-video__image-container
:hover
.sg-video__image
,
.sg-video__image-container
:focus
.sg-video__image
{
transform
:
scale
(
1.1
)}
.sg-video__image-container
:hover::after
,
.sg-video__image-container
:focus::after
{
transform
:
translate
(
-50%
,
-50%
)
scale
(
1.1
)}
.sg-video__read-more
{
padding
:
10px
0
;
display
:
inline-block
;
cursor
:
pointer
;
width
:
100%
;
text-align
:
left
;
margin-top
:
auto
;
text-decoration
:
none
;
font-weight
:
700
;
text-transform
:
lowercase
}
.sg-video__bodytext
{
padding
:
10px
0
;
margin-top
:
auto
;
margin-bottom
:
auto
;
min-height
:
90px
}
@media
(
1200px
){
.sg-video__bodytext
{
padding
:
20px
}}
.sg-video__bodytext
h3
{
color
:
var
(
--sg-video-component-color-headline
);
margin-top
:
0
;
padding-top
:
0
}
.sg-video__bodytext
.sg-video__description
{
display
:
-webkit-box
;
-webkit-line-clamp
:
4
;
-webkit-box-orient
:
vertical
;
overflow
:
hidden
}
.sg-video__bodytext
.sg-video__description.expanded
{
-webkit-line-clamp
:
unset
}
.sg-video__item
{
box-shadow
:
0
0
7px
rgba
(
var
(
--sg-video-box-shadow-rgb
),
0.18
);
background
:
var
(
--sg-video-component-color-background
)}
.sg-video__list
{
margin-bottom
:
0
;
list-style
:
none
}
.sg-video__highlight
.sg-video__item
{
display
:
flex
;
flex-direction
:
column
}
.sg-video__highlight
.sg-video__image
{
-o-object-fit
:
scale-down
;
object-fit
:
scale-down
}
@media
(
min-width
:
1200px
){
.sg-video__list-item--alt
.sg-video__item
{
display
:
flex
}
.sg-video__list-item--alt
.sg-video__image-container
{
width
:
50%
}
.sg-video__list-item--alt
.sg-video__bodytext
{
width
:
50%
;
background
:
rgba
(
0
,
0
,
0
,
0
);
padding
:
0
5px
0
20px
}}
@media
(
min-width
:
1200px
){
.sg-video--playlist
{
display
:
grid
;
gap
:
20px
;
grid-template-columns
:
70%
auto
;
position
:
relative
}}
.sg-video__list--playlist
{
display
:
flex
;
flex-direction
:
row
;
position
:
relative
}
@media
(
min-width
:
1200px
){
.sg-video__list--playlist
>
div
{
position
:
absolute
;
height
:
100%
;
overflow-y
:
auto
;
flex-direction
:
column
;
flex-grow
:
1
;
justify-content
:
space-between
}
.sg-video__list--playlist
>
div
.sg-video__list-item
:not
(
:last-child
)
{
margin-bottom
:
15px
}}
.sg-video__list--playlist
.sg-video__item
{
height
:
100%
}
.sg-video__list--playlist
.sg-video__bodytext
{
padding
:
10px
0
0
}
.sg-video__list--playlist
h3
{
font-size
:
1.3em
}
.sg-video__list-item
{
position
:
relative
;
margin
:
15px
10px
}
@media
(
min-width
:
1200px
){
.sg-video__list-item
{
margin
:
auto
}}
@media
(
min-width
:
1200px
){
.sg-video__list-item--alt
{
margin
:
0
}}
@media
(
max-width
:
767.98px
){
.sg-video
.sg-video__list--playlist
{
display
:
block
}}
.sg-video__list--default
{
display
:
flex
;
flex-wrap
:
wrap
;
margin
:
0
-10px
}
.sg-video__list--default
>
li
{
width
:
100%
;
margin
:
10px
;
display
:
flex
;
flex-direction
:
column
}
@media
(
min-width
:
1200px
){
.sg-video__list--default
>
li
{
width
:
calc
(
33.3333%
-
20px
)}}
.sg-video__list--default
a
{
box-shadow
:
none
}
.sg-video__list--default
.sg-video__bodytext
{
position
:
relative
;
display
:
block
;
overflow
:
hidden
;
padding
:
10px
0
;
transition
:
max-height
var
(
--sg-video-base-transition-timing-fast
,
0.1s
)}
.sg-video__list--default
.sg-video__read-more
{
display
:
block
;
width
:
100%
;
text-align
:
left
;
margin-top
:
auto
}
.sg-video__list--default
.sg-video__item
{
flex-grow
:
1
}
@media
(
max-width
:
var
(
--sg-video-mobile-breakpoint
,
768px
)
-1px
){
.sg-video__list--default
img
{
min-height
:
0
!important
}}
.sg-video__read-more
{
background
:
none
;
color
:
var
(
--sg-video-component-color-link
);
border
:
0
}
.sg-video__read-more
:hover
{
color
:
var
(
--sg-video-component-color-link--hover
)}
.sg-video__read-more
svg
{
display
:
inline-block
;
width
:
13px
;
height
:
10px
;
transition
:
transform
var
(
--sg-video-base-transition-timing
,
0.3s
)}
.sg-video__read-more.disabled
{
display
:
none
}
.sg-video__list--rows
.sg-video__read-more.disabled
{
display
:
none
!important
}
.sg-video__list--rows
.sg-video__image
{
-o-object-fit
:
contain
;
object-fit
:
contain
}
@media
(
min-width
:
992px
){
.sg-video__list--rows
.sg-video__item
{
box-shadow
:
none
;
background-color
:
rgba
(
0
,
0
,
0
,
0
);
display
:
flex
}
.sg-video__list--rows
.sg-video__image-container
{
float
:
left
;
clear
:
left
;
width
:
40.5%
}
.sg-video__list--rows
.sg-video__image-container
span
{
position
:
relative
}}
@media
(
min-width
:
992px
)
and
(
min-width
:
1200px
){
.sg-video__list--rows
.sg-video__image-container
{
width
:
35%
}}
@media
(
min-width
:
992px
){
.sg-video__list--rows
.sg-video__bodytext
{
position
:
relative
;
box-shadow
:
0
0
7px
rgba
(
var
(
--sg-video-box-shadow-rgb
),
0.18
);
margin-left
:
auto
;
display
:
block
;
min-height
:
210px
}}
@media
(
min-width
:
992px
)
and
(
min-width
:
1200px
){
.sg-video__list--rows
.sg-video__bodytext
{
width
:
65%
;
min-height
:
225px
;
padding-top
:
0
;
padding-left
:
20px
}}
@media
(
min-width
:
992px
){
.sg-video__list--rows
.sg-video__description
{
-webkit-line-clamp
:
5
;
transition
:
max-height
var
(
--sg-video-base-transition-timing-fast
,
0.1s
)}}
@media
(
min-width
:
992px
){
.sg-video__list--rows
.sg-video__list-item
{
margin-bottom
:
25px
}}
@media
(
min-width
:
992px
){
.sg-video__list--rows
.sg-video__read-more
{
display
:
block
;
padding
:
20px
0
0
}}
.sg-video__read-more.expanded
.sg-video__read-more-arrow
{
transform
:
rotateX
(
180deg
)}
.sg-video-lightbox-wrapper
{
pointer-events
:
all
;
padding
:
0
;
margin
:
0
}
.no-lightbox
svg
{
display
:
none
}
.plyr
.sg-cookie-optin-iframe-consent
{
min-height
:
410px
}
.basicLightbox
{
position
:
fixed
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100vh
;
background
:
rgba
(
0
,
0
,
0
,
.8
);
opacity
:
.01
;
transition
:
opacity
.4s
ease
;
z-index
:
1000
;
will-change
:
opacity
}
.basicLightbox
::after
{
content
:
""
;
position
:
absolute
;
top
:
1.8rem
;
right
:
1.8rem
;
width
:
2em
;
height
:
2em
;
background-size
:
contain
;
background-image
:
url("data:image/svg+xml,%3Csvg width='90px' height='90px' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23ffffff' stroke='%23ffffff'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ctitle%3EClose-Circle%3C/title%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Close-Circle'%3E%3Crect id='Rectangle' fill-rule='nonzero' x='0' y='0' width='24' height='24'%3E%3C/rect%3E%3Ccircle id='Oval' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' cx='12' cy='12' r='9'%3E%3C/circle%3E%3Cline x1='14.1213' y1='9.87866' x2='9.8787' y2='14.1213' id='Path' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3C/line%3E%3Cline x1='9.87866' y1='9.87866' x2='14.1213' y2='14.1213' id='Path' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3C/line%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
;
background-repeat
:
no-repeat
}
.basicLightbox--visible
{
opacity
:
1
;
pointer-events
:
auto
}
.basicLightbox__placeholder
{
max-width
:
100%
;
transform
:
scale
(
0.9
);
transition
:
transform
.4s
ease
;
z-index
:
1
;
will-change
:
transform
}
.basicLightbox__placeholder
>
img
:first-child:last-child
,
.basicLightbox__placeholder
>
video
:first-child:last-child
,
.basicLightbox__placeholder
>
iframe
:first-child:last-child
{
display
:
block
;
position
:
absolute
;
top
:
0
;
right
:
0
;
bottom
:
0
;
left
:
0
;
margin
:
auto
}
.basicLightbox__placeholder
>
video
:first-child:last-child
,
.basicLightbox__placeholder
>
iframe
:first-child:last-child
{
pointer-events
:
auto
}
.basicLightbox__placeholder
>
img
:first-child:last-child
,
.basicLightbox__placeholder
>
video
:first-child:last-child
{
width
:
auto
;
height
:
auto
}
.basicLightbox--img
.basicLightbox__placeholder
,
.basicLightbox--video
.basicLightbox__placeholder
,
.basicLightbox--iframe
.basicLightbox__placeholder
{
width
:
100%
;
height
:
100%
;
pointer-events
:
none
}
.basicLightbox--visible
.basicLightbox__placeholder
{
transform
:
scale
(
1
)}
iframe
.sg-video-iframe
{
width
:
100%
;
height
:
auto
;
max-width
:
900px
;
aspect-ratio
:
16
/
9
}
\ No newline at end of file
:root
{
--sg-video-component-color-headline
:
#0a293b
;
--sg-video-component-color-foreground
:
#174566
;
--sg-video-component-color-background
:
none
;
--sg-video-component-color-link
:
#15415e
;
--sg-video-component-color-play-button
:
#fff
;
--sg-video-component-color-link--hover
:
#061924
}
.tx-sg-youtube
{
margin-bottom
:
20px
}
.tx-sg-vimeo
{
margin-bottom
:
20px
}
.sg-video__image
{
width
:
100%
;
height
:
auto
;
transition
:
transform
var
(
--sg-video-base-transition-timing
,
0.3s
)
ease
}
.sg-video__image-container
{
position
:
relative
;
overflow
:
hidden
;
width
:
100%
;
color
:
var
(
--sg-video-component-color-play-button
);
display
:
block
}
.sg-video__image-container
:not
(
.no-lightbox
)
svg
{
position
:
absolute
;
top
:
50%
;
left
:
50%
;
width
:
40px
;
height
:
50px
;
transform
:
translate
(
-50%
,
-50%
)
scale
(
0.8
);
opacity
:
.8
;
transition
:
opacity
var
(
--sg-video-base-transition-timing
,
0.3s
),
transform
var
(
--sg-video-base-transition-timing
,
0.3s
);
z-index
:
9
;
text-shadow
:
-1px
4px
27px
rgba
(
0
,
0
,
0
,
.5
)}
.sg-video__image-container
:hover
,
.sg-video__image-container
:focus
{
text-decoration
:
none
}
.sg-video__image-container
:hover
.sg-video__image
,
.sg-video__image-container
:focus
.sg-video__image
{
transform
:
scale
(
1.1
)}
.sg-video__image-container
:hover::after
,
.sg-video__image-container
:focus::after
{
transform
:
translate
(
-50%
,
-50%
)
scale
(
1.1
)}
.sg-video__read-more
{
padding
:
10px
0
;
display
:
inline-block
;
cursor
:
pointer
;
width
:
100%
;
text-align
:
left
;
margin-top
:
auto
;
text-decoration
:
none
;
font-weight
:
700
;
text-transform
:
lowercase
}
.sg-video__bodytext
{
padding
:
10px
0
;
margin-top
:
auto
;
margin-bottom
:
auto
;
min-height
:
90px
}
@media
(
1200px
){
.sg-video__bodytext
{
padding
:
20px
}}
.sg-video__bodytext
h3
{
color
:
var
(
--sg-video-component-color-headline
);
margin-top
:
0
;
padding-top
:
0
}
.sg-video__bodytext
.sg-video__description
{
display
:
-webkit-box
;
-webkit-line-clamp
:
4
;
-webkit-box-orient
:
vertical
;
overflow
:
hidden
}
.sg-video__bodytext
.sg-video__description.expanded
{
-webkit-line-clamp
:
unset
}
.sg-video__item
{
box-shadow
:
0
0
7px
rgba
(
var
(
--sg-video-box-shadow-rgb
),
0.18
);
background
:
var
(
--sg-video-component-color-background
)}
.sg-video__list
{
margin-bottom
:
0
;
list-style
:
none
}
.sg-video__highlight
.sg-video__item
{
display
:
flex
;
flex-direction
:
column
}
.sg-video__highlight
.sg-video__image
{
-o-object-fit
:
scale-down
;
object-fit
:
scale-down
}
@media
(
min-width
:
1200px
){
.sg-video__list-item--alt
.sg-video__item
{
display
:
flex
}
.sg-video__list-item--alt
.sg-video__image-container
{
width
:
50%
}
.sg-video__list-item--alt
.sg-video__bodytext
{
width
:
50%
;
background
:
rgba
(
0
,
0
,
0
,
0
);
padding
:
0
5px
0
20px
}}
@media
(
min-width
:
1200px
){
.sg-video--playlist
{
display
:
grid
;
gap
:
20px
;
grid-template-columns
:
70%
auto
;
position
:
relative
}}
.sg-video__list--playlist
{
display
:
flex
;
flex-direction
:
row
;
position
:
relative
}
@media
(
min-width
:
1200px
){
.sg-video__list--playlist
>
div
{
position
:
absolute
;
height
:
100%
;
overflow-y
:
auto
;
flex-direction
:
column
;
flex-grow
:
1
;
justify-content
:
space-between
}
.sg-video__list--playlist
>
div
.sg-video__list-item
:not
(
:last-child
)
{
margin-bottom
:
15px
}}
.sg-video__list--playlist
.sg-video__item
{
height
:
100%
}
.sg-video__list--playlist
.sg-video__bodytext
{
padding
:
10px
0
0
}
.sg-video__list--playlist
h3
{
font-size
:
1.3em
}
.sg-video__list-item
{
position
:
relative
;
margin
:
15px
10px
}
@media
(
min-width
:
1200px
){
.sg-video__list-item
{
margin
:
auto
}}
@media
(
min-width
:
1200px
){
.sg-video__list-item--alt
{
margin
:
0
}}
@media
(
max-width
:
767.98px
){
.sg-video
.sg-video__list--playlist
{
display
:
block
}}
.sg-video__list--default
{
display
:
flex
;
flex-wrap
:
wrap
;
margin
:
0
-10px
}
.sg-video__list--default
>
li
{
width
:
100%
;
margin
:
10px
;
display
:
flex
;
flex-direction
:
column
}
@media
(
min-width
:
1200px
){
.sg-video__list--default
>
li
{
width
:
calc
(
33.3333%
-
20px
)}}
.sg-video__list--default
a
{
box-shadow
:
none
}
.sg-video__list--default
.sg-video__bodytext
{
position
:
relative
;
display
:
block
;
overflow
:
hidden
;
padding
:
10px
0
;
transition
:
max-height
var
(
--sg-video-base-transition-timing-fast
,
0.1s
)}
.sg-video__list--default
.sg-video__read-more
{
display
:
block
;
width
:
100%
;
text-align
:
left
;
margin-top
:
auto
}
.sg-video__list--default
.sg-video__item
{
flex-grow
:
1
}
@media
(
max-width
:
var
(
--sg-video-mobile-breakpoint
,
768px
)
-1px
){
.sg-video__list--default
img
{
min-height
:
0
!important
}}
.sg-video__read-more
{
background
:
none
;
color
:
var
(
--sg-video-component-color-link
);
border
:
0
}
.sg-video__read-more
:hover
{
color
:
var
(
--sg-video-component-color-link--hover
)}
.sg-video__read-more
svg
{
display
:
inline-block
;
width
:
13px
;
height
:
10px
;
transition
:
transform
var
(
--sg-video-base-transition-timing
,
0.3s
)}
.sg-video__read-more.disabled
{
display
:
none
}
.sg-video__list--rows
.sg-video__read-more.disabled
{
display
:
none
!important
}
.sg-video__list--rows
.sg-video__image
{
-o-object-fit
:
contain
;
object-fit
:
contain
}
@media
(
min-width
:
992px
){
.sg-video__list--rows
.sg-video__item
{
box-shadow
:
none
;
background-color
:
rgba
(
0
,
0
,
0
,
0
);
display
:
flex
}
.sg-video__list--rows
.sg-video__image-container
{
float
:
left
;
clear
:
left
;
width
:
40.5%
}
.sg-video__list--rows
.sg-video__image-container
span
{
position
:
relative
}}
@media
(
min-width
:
992px
)
and
(
min-width
:
1200px
){
.sg-video__list--rows
.sg-video__image-container
{
width
:
35%
}}
@media
(
min-width
:
992px
){
.sg-video__list--rows
.sg-video__bodytext
{
position
:
relative
;
box-shadow
:
0
0
7px
rgba
(
var
(
--sg-video-box-shadow-rgb
),
0.18
);
margin-left
:
auto
;
display
:
block
;
min-height
:
210px
}}
@media
(
min-width
:
992px
)
and
(
min-width
:
1200px
){
.sg-video__list--rows
.sg-video__bodytext
{
width
:
65%
;
min-height
:
225px
;
padding-top
:
0
;
padding-left
:
20px
}}
@media
(
min-width
:
992px
){
.sg-video__list--rows
.sg-video__description
{
-webkit-line-clamp
:
5
;
transition
:
max-height
var
(
--sg-video-base-transition-timing-fast
,
0.1s
)}}
@media
(
min-width
:
992px
){
.sg-video__list--rows
.sg-video__list-item
{
margin-bottom
:
25px
}}
@media
(
min-width
:
992px
){
.sg-video__list--rows
.sg-video__read-more
{
display
:
block
;
padding
:
20px
0
0
}}
.sg-video__read-more.expanded
.sg-video__read-more-arrow
{
transform
:
rotateX
(
180deg
)}
.sg-video-lightbox-wrapper
{
pointer-events
:
all
;
padding
:
0
;
margin
:
0
}
.no-lightbox
svg
{
display
:
none
}
.plyr
.sg-cookie-optin-iframe-consent
{
min-height
:
410px
}
.basicLightbox
{
position
:
fixed
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100vh
;
background
:
rgba
(
0
,
0
,
0
,
.8
);
opacity
:
.01
;
transition
:
opacity
.4s
ease
;
z-index
:
1000
;
will-change
:
opacity
}
.basicLightbox
::after
{
content
:
""
;
position
:
absolute
;
top
:
1.8rem
;
right
:
1.8rem
;
width
:
2em
;
height
:
2em
;
background-size
:
contain
;
background-image
:
url("data:image/svg+xml,%3Csvg width='90px' height='90px' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23ffffff' stroke='%23ffffff'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ctitle%3EClose-Circle%3C/title%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Close-Circle'%3E%3Crect id='Rectangle' fill-rule='nonzero' x='0' y='0' width='24' height='24'%3E%3C/rect%3E%3Ccircle id='Oval' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' cx='12' cy='12' r='9'%3E%3C/circle%3E%3Cline x1='14.1213' y1='9.87866' x2='9.8787' y2='14.1213' id='Path' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3C/line%3E%3Cline x1='9.87866' y1='9.87866' x2='14.1213' y2='14.1213' id='Path' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3C/line%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
;
background-repeat
:
no-repeat
;
cursor
:
pointer
}
.basicLightbox--visible
{
opacity
:
1
;
pointer-events
:
auto
}
.basicLightbox__placeholder
{
max-width
:
100%
;
transform
:
scale
(
0.9
);
transition
:
transform
.4s
ease
;
z-index
:
1
;
will-change
:
transform
}
.basicLightbox__placeholder
>
img
:first-child:last-child
,
.basicLightbox__placeholder
>
video
:first-child:last-child
,
.basicLightbox__placeholder
>
iframe
:first-child:last-child
{
display
:
block
;
position
:
absolute
;
top
:
0
;
right
:
0
;
bottom
:
0
;
left
:
0
;
margin
:
auto
}
.basicLightbox__placeholder
>
video
:first-child:last-child
,
.basicLightbox__placeholder
>
iframe
:first-child:last-child
{
pointer-events
:
auto
}
.basicLightbox__placeholder
>
img
:first-child:last-child
,
.basicLightbox__placeholder
>
video
:first-child:last-child
{
width
:
auto
;
height
:
auto
}
.basicLightbox--img
.basicLightbox__placeholder
,
.basicLightbox--video
.basicLightbox__placeholder
,
.basicLightbox--iframe
.basicLightbox__placeholder
{
width
:
100%
;
height
:
100%
;
pointer-events
:
none
}
.basicLightbox--visible
.basicLightbox__placeholder
{
transform
:
scale
(
1
)}
iframe
.sg-video-iframe
{
width
:
100%
;
height
:
auto
;
max-width
:
900px
;
aspect-ratio
:
16
/
9
}
\ No newline at end of file
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment
