70 lines
1.4 KiB
Stylus
70 lines
1.4 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
|
||
|
|
|
||
|
|
.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);
|