You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
284 lines
7.1 KiB
Sass
284 lines
7.1 KiB
Sass
#dash-index-content
|
|
width: 100%
|
|
height: 100%
|
|
margin: 0 auto
|
|
|
|
#dash-index
|
|
width: 100%
|
|
height: 100%
|
|
z-index: 10
|
|
position: relative
|
|
|
|
#dash-index-wrapper
|
|
width: 100%
|
|
height: 100%
|
|
margin: 0 auto
|
|
|
|
.dash-init, .dash-restore
|
|
width: 100%
|
|
height: 100%
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
color: $primary
|
|
|
|
form
|
|
background: $white
|
|
padding: 15px
|
|
width: 300px
|
|
border-radius: 5px
|
|
text-align: center
|
|
#the-logo
|
|
width: 40px
|
|
margin: 20px
|
|
|
|
input
|
|
width: 290px
|
|
margin: 0 0 10px 0
|
|
height: 30px
|
|
|
|
button
|
|
width: 300px
|
|
div
|
|
background: $primary
|
|
color: $white
|
|
border-radius: 3px
|
|
padding: 5px
|
|
label
|
|
display: block
|
|
padding: 5px
|
|
color: $tertiary
|
|
.dash-restore
|
|
display: none
|
|
visibility: hidden
|
|
|
|
#dash-login
|
|
width: 100%
|
|
height: 100%
|
|
margin: 0 auto
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
|
|
#dash-form, #dash-reset
|
|
width: 300px
|
|
padding: 0.75em
|
|
background: $white
|
|
border-radius: 5px
|
|
color: $white
|
|
text-align: center
|
|
#the-logo
|
|
width: 40px
|
|
margin: 20px
|
|
|
|
input
|
|
width: 290px
|
|
margin: 0 0 10px 0
|
|
height: 30px
|
|
|
|
button
|
|
width: 300px
|
|
|
|
#dash-menu
|
|
padding: 10px
|
|
width: 90%
|
|
max-width: 900px
|
|
margin: 50px auto
|
|
|
|
a
|
|
display: inline-block
|
|
vertical-align: top
|
|
background: color.adjust($primary, $lightness: -60%)
|
|
width: 30%
|
|
padding: 5px
|
|
border-radius: 3px
|
|
color: $white
|
|
margin: 0 10px 10px 0
|
|
|
|
&:hover
|
|
background: color.adjust($primary, $lightness: -60%)
|
|
|
|
svg
|
|
display: inline-block
|
|
vertical-align: top
|
|
fill: $white
|
|
|
|
label
|
|
display: inline-block
|
|
margin-top: 5px
|
|
width: 85%
|
|
text-align: center
|
|
cursor: pointer
|
|
|
|
#dash-recent
|
|
width: 100%
|
|
max-width: 900px
|
|
height: 100%
|
|
padding: 5px 0 0 0
|
|
margin: 0 auto
|
|
|
|
#recent-list
|
|
//padding: 5px
|
|
position: relative
|
|
|
|
.recent-header
|
|
height: 50px
|
|
margin-top: 5px
|
|
.index-header-left
|
|
vertical-align: top
|
|
display: inline-block
|
|
width: 50%
|
|
color: $white
|
|
font-size: 3em
|
|
.index-header-right
|
|
width: 50%
|
|
text-align: right
|
|
vertical-align: top
|
|
display: inline-block
|
|
right: 10px
|
|
color: $white
|
|
a
|
|
button
|
|
border-radius: 3px
|
|
margin-left: 10px
|
|
svg
|
|
transition: all 0.2s linear
|
|
width: 40px
|
|
height: 20px
|
|
fill: $white
|
|
|
|
a.post-link, a.post-video-link
|
|
font-size: 1.5em
|
|
font-weight: 300
|
|
display: inline-block
|
|
border-radius: 3px
|
|
vertical-align: top
|
|
text-decoration: none
|
|
position: relative
|
|
overflow: hidden
|
|
.post-video
|
|
width: 100%
|
|
height: 100%
|
|
object-fit: cover
|
|
position: absolute
|
|
|
|
label
|
|
font-size: 1.4em
|
|
font-weight: 700
|
|
color: $white
|
|
padding: 5px
|
|
vertical-align: top
|
|
display: inline-block
|
|
word-wrap: break-word
|
|
width: 100%
|
|
text-align: center
|
|
position: relative
|
|
top: 35%
|
|
text-shadow: 2px 2px 0 rgba($black, 1)
|
|
|
|
div#options
|
|
width: 100%
|
|
position: absolute
|
|
bottom: 0
|
|
border-radius: 0 0 3px 3px
|
|
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%)
|
|
|
|
#option-left
|
|
display: inline-block
|
|
vertical-align: top
|
|
width: 50%
|
|
position: relative
|
|
background: none
|
|
button
|
|
border-radius: 3px
|
|
background: $primary
|
|
margin: 0 0 10px 10px
|
|
svg
|
|
//@include object-transitions(0.1s)
|
|
width: 40px
|
|
height: 20px
|
|
fill: $secondary
|
|
.item-options
|
|
border-radius: 3px
|
|
margin: 5px
|
|
display: inline-block
|
|
button[data-active='false']
|
|
background: $primary
|
|
svg
|
|
fill: $secondary
|
|
|
|
button[data-active='true']
|
|
background: $tertiary
|
|
svg
|
|
fill: $primary
|
|
#option-right
|
|
display: inline-block
|
|
width: 50%
|
|
text-align: right
|
|
span
|
|
font-weight: bold
|
|
display: block
|
|
background: $white
|
|
color: $primary
|
|
border-radius: 3px
|
|
font-size: .6em
|
|
text-align: center
|
|
position: relative
|
|
padding: 5px
|
|
float: right
|
|
margin: 0 10px 0 0
|
|
bottom: -15px
|
|
|
|
|
|
a:nth-child(3)
|
|
width: 100%
|
|
margin-bottom: 20px
|
|
height: 500px
|
|
|
|
a:nth-child(4), a:nth-child(6)
|
|
width: 48.6%
|
|
height: 350px
|
|
margin: 0 10px 20px 0
|
|
|
|
a:nth-child(5), a:nth-child(7)
|
|
width: 48.6%
|
|
height: 350px
|
|
margin: 0 0 20px 10px
|
|
|
|
//Reponsive
|
|
@media only screen and (max-width: 768px)
|
|
#dash-index-content
|
|
#dash-index
|
|
#dash-index-wrapper
|
|
#dash-recent
|
|
#recent-list
|
|
a:nth-child(4), a:nth-child(6)
|
|
width: 48.9%
|
|
|
|
@media only screen and (max-width: 640px)
|
|
#dash-index-content
|
|
#dash-index
|
|
#dash-index-wrapper
|
|
#dash-recent
|
|
#recent-list
|
|
a:nth-child(4), a:nth-child(6)
|
|
width: 48.5%
|
|
|
|
@media only screen and (max-width: 480px)
|
|
#dash-index-content
|
|
#dash-index
|
|
#dash-index-wrapper
|
|
#dash-recent
|
|
#recent-list
|
|
.recent-header
|
|
h3
|
|
width: 40%
|
|
|
|
.index-menu
|
|
width: 60%
|
|
|
|
a:nth-child(3), a:nth-child(4), a:nth-child(5), a:nth-child(6), a:nth-child(7)
|
|
width: 100%
|
|
margin: 15px 0 0 0
|
|
height: 400px
|