108 lines
2.3 KiB
Stylus
108 lines
2.3 KiB
Stylus
#slideshowEditor
|
|
display: block
|
|
|
|
select[name='slideshows']
|
|
font-size: 1.5em
|
|
min-width: 100px
|
|
input[name="newSlideshowName"]
|
|
display: inline-block
|
|
transition: all .75s ease
|
|
width: 0
|
|
border: 0
|
|
opacity: 0
|
|
font-size: 1.2em
|
|
input[name="newSlideshowName"].show
|
|
opacity: 1
|
|
border: 1px solid #ccc
|
|
border-radius: 4px
|
|
width: 200px
|
|
transform: translateX(4px)
|
|
.createSlideshow
|
|
display: inline-block
|
|
padding: 2px 6px
|
|
margin: 0 4px
|
|
//width: 33px
|
|
text-align: center
|
|
font-size: 1.5em
|
|
line-height: 1.5em
|
|
border-radius: 8px
|
|
//border: 1px solid rgba(0, 0, 0, 0)
|
|
box-sizing: border-box
|
|
.createSlideshow:hover
|
|
//border: 1px inset #b100d1
|
|
//-webkit-box-shadow: inset 0px 0px 20px 0px #de7cff
|
|
//-moz-box-shadow: inset 0px 0px 20px 0px #de7cff
|
|
//box-shadow: inset 0px 0px 20px 0px #de7cff
|
|
color: #5c8744
|
|
.createSlideshow
|
|
transform: translateX(-25px) rotate(0deg)
|
|
transition: all .75s ease
|
|
.createSlideshow.move
|
|
transform: translateX(6px) rotate(720deg)
|
|
.deleteSlideshow
|
|
display: inline-block
|
|
padding: 2px 3px
|
|
margin: 0 4px
|
|
width: 1.5em
|
|
line-height: 1.5em
|
|
//width: 33px
|
|
text-align: center
|
|
font-size: 1.5em
|
|
border-radius: 50%
|
|
//border: 1px solid #8c0000
|
|
box-sizing: border-box
|
|
color: black
|
|
.deleteSlideshow:hover
|
|
color: #8c2353
|
|
.addSlide
|
|
display:inline-block
|
|
width: 200px
|
|
height: 200px
|
|
background-size: contain
|
|
background-repeat: no-repeat
|
|
border-radius: 6px
|
|
border 3px dashed black
|
|
.addSlide:hover
|
|
border-color: #5c8744
|
|
.slideThumbnail
|
|
position: relative
|
|
width: 200px
|
|
height: 200px
|
|
background-position: 50% 50%
|
|
background-repeat:no-repeat
|
|
background-size: contain
|
|
display: inline-block
|
|
.controls
|
|
position: absolute
|
|
bottom: 50%
|
|
left: 50%
|
|
right: 50%
|
|
top: 50%
|
|
height: 22px
|
|
width: 90px
|
|
margin-left: -45px
|
|
margin-top: -10px
|
|
background-color: rgba(0, 0, 0, .8)
|
|
display: none
|
|
text-align: center
|
|
font-size: 20px
|
|
line-height: 20px
|
|
border-radius: 8px
|
|
border: 1px solid black
|
|
.slideThumbnail:hover > .controls, .controls:hover
|
|
display: block
|
|
.moveLeft, .moveRight, .removeThumbnail
|
|
color: white
|
|
padding: 0 4px
|
|
.moveLeft
|
|
padding-right: 14px
|
|
.moveRight
|
|
padding-left: 14px
|
|
.moveLeft:hover, .moveRight:hover
|
|
color: #00ff55
|
|
.moveLeft:active, .moveRight:active
|
|
color: #006e27
|
|
.removeThumbnail:hover
|
|
color: #ff0019
|
|
.removeThumbnail:active
|
|
color: #57000c |