100 lines
2.1 KiB
Stylus
100 lines
2.1 KiB
Stylus
:root {
|
|
--text-secondary-color: #91B9CD;
|
|
--active-color: #20A5D6;
|
|
--primary-background-color: black;
|
|
--ui-border-color-dark: #3C5D80
|
|
--sidebar-transition: all 0.3s ease;
|
|
}
|
|
|
|
.ThumbnailEntry.active .ImageThumbnail
|
|
border-color: var(--active-color);
|
|
box-shadow: none
|
|
transition: var(--sidebar-transition);
|
|
|
|
.ImageThumbnail
|
|
background-color: var(--primary-background-color);
|
|
box-shadow: inset 0 0 0 1px var(--ui-border-color-dark);
|
|
border: 5px solid transparent
|
|
border-radius: 12px
|
|
height: 135px
|
|
margin: 0 auto
|
|
padding 5px
|
|
position: relative
|
|
transition: var(--sidebar-transition);
|
|
width: 217px
|
|
-moz-background-clip: padding
|
|
-webkit-background-clip: padding
|
|
background-clip: padding-box
|
|
|
|
// Thumbnail Loading Indicator
|
|
|
|
.image-thumbnail-loading-indicator
|
|
position: absolute
|
|
left: 50%
|
|
top: 50%
|
|
margin: -22px 0 0 -22px
|
|
display: block
|
|
width: 44px
|
|
height: 44px
|
|
|
|
&:after
|
|
content: " "
|
|
display: block
|
|
width: 32px
|
|
height: 32px
|
|
margin: 1px
|
|
border-radius: 50%
|
|
border: 5px solid var(--ui-border-color-dark)
|
|
border-color: var(--ui-border-color-dark) transparent var(--ui-border-color-dark) transparent
|
|
animation: image-thumbnail-loading-indicator 1.2s linear infinite
|
|
|
|
@keyframes image-thumbnail-loading-indicator
|
|
0%
|
|
transform: rotate(0deg)
|
|
100%
|
|
transform: rotate(360deg)
|
|
|
|
// The End...
|
|
|
|
.image-thumbnail-canvas
|
|
height: 100%
|
|
overflow: hidden
|
|
display: flex
|
|
justify-content: center
|
|
|
|
img
|
|
-webkit-user-drag: none
|
|
pointer-events: none
|
|
|
|
.thumbnailLoadingIndicator
|
|
display: none
|
|
pointer-events: none
|
|
color: var(--text-secondary-color);
|
|
height: 20px
|
|
width: 100%
|
|
top: 0
|
|
left: 0
|
|
right: 0
|
|
bottom: 0
|
|
margin: auto
|
|
position: absolute
|
|
|
|
&.d-block
|
|
display: block;
|
|
|
|
p
|
|
text-align: center
|
|
font-size: 10pt
|
|
|
|
.image-thumbnail-progress-bar
|
|
position: relative
|
|
width: 100%
|
|
height: 3px
|
|
top: -5px
|
|
|
|
.image-thumbnail-progress-bar-inner
|
|
height: 100%
|
|
width: 0
|
|
border-radius: 5px
|
|
background-color: var(--active-color);
|