581 lines
9.6 KiB
Sass
581 lines
9.6 KiB
Sass
|
|
$main-section-padding: 32px 48px 32px 36px
|
|
$main-section-padding-mobile: 32px 28px 28px 28px
|
|
|
|
$section-title-margin: 20px
|
|
$sub-sections-between-margin: 28px
|
|
$sub-section-title-margin: 8px
|
|
|
|
.main-section-wrapper
|
|
padding: $main-section-padding
|
|
background-color: $color-bright
|
|
overflow: auto
|
|
|
|
& input, & select
|
|
width: 100%
|
|
|
|
// for search result etc
|
|
.entity-list
|
|
|
|
& &__title
|
|
// font-size: large
|
|
margin-bottom: $section-title-margin
|
|
|
|
& &__entities
|
|
|
|
& &__entity
|
|
display: flex
|
|
margin-bottom: 36px
|
|
&::after
|
|
@include clear
|
|
|
|
& &__entity-img
|
|
// float: left
|
|
object-fit: contain
|
|
// height: 150px
|
|
$width: 130px
|
|
min-width: $width
|
|
max-width: $width
|
|
|
|
& &__entity-text
|
|
margin-left: 20px
|
|
overflow: hidden
|
|
width: 100%
|
|
// float: left
|
|
& .tag-collection
|
|
margin-left: -3px
|
|
|
|
& &__entity-link
|
|
font-size: 1.2em
|
|
|
|
& &__entity-title
|
|
display: block
|
|
|
|
& &__entity-category
|
|
color: $color-tertiary
|
|
margin-left: 5px
|
|
position: relative;
|
|
top: -1px;
|
|
|
|
& &__entity-info
|
|
max-width: 73%
|
|
white-space: nowrap
|
|
overflow: hidden
|
|
display: inline-block
|
|
text-overflow: ellipsis
|
|
position: relative
|
|
top: 0.52em
|
|
&--full-length
|
|
// display: block
|
|
max-width: 100%
|
|
// margin-bottom: 12px
|
|
|
|
& &__entity-brief
|
|
margin-top: 8px
|
|
display: -webkit-box
|
|
-webkit-box-orient: vertical
|
|
-webkit-line-clamp: 4
|
|
overflow: hidden
|
|
margin-bottom: 0
|
|
|
|
$rating-info-gap-width: 5px
|
|
& &__rating
|
|
display: inline-block
|
|
margin: 0
|
|
|
|
& &__rating--empty
|
|
// width: $empty-rating-width
|
|
margin-right: $rating-info-gap-width
|
|
|
|
& &__rating-score
|
|
margin-right: $rating-info-gap-width
|
|
position: relative
|
|
top: 1px
|
|
|
|
& &__rating-star
|
|
display: inline
|
|
position: relative
|
|
top: 0.3em
|
|
left: -0.3em
|
|
|
|
// detail page
|
|
.entity-detail
|
|
|
|
& &__img
|
|
height: 210px
|
|
float: left
|
|
object-fit: contain
|
|
max-width: 150px
|
|
object-position: top
|
|
|
|
& &__img-origin
|
|
cursor: zoom-in
|
|
|
|
& &__info
|
|
float: left
|
|
margin-left: 20px
|
|
overflow: hidden
|
|
text-overflow: ellipsis
|
|
width: 70%
|
|
|
|
& &__title
|
|
font-weight: bold
|
|
|
|
& &__title--secondary
|
|
color: $color-tertiary
|
|
|
|
& &__fields
|
|
display: inline-block
|
|
vertical-align: top
|
|
width: 46%
|
|
margin-left: 2%
|
|
// margin-bottom: 5px
|
|
& div, & span
|
|
margin: 1px 0
|
|
& + .tag-collection
|
|
margin-top: 5px
|
|
margin-left: 6px
|
|
|
|
& &__rating
|
|
position: relative
|
|
top: -5px
|
|
|
|
& &__rating-star
|
|
position: relative
|
|
left: -4px
|
|
top: 3px
|
|
|
|
& &__rating-score
|
|
font-weight: bold
|
|
|
|
&::after
|
|
@include clear
|
|
|
|
$mark-review-padding: 3px 0
|
|
$mark-review-padding-wider: 6px 0
|
|
|
|
// includes title and description of an entity
|
|
// sub section
|
|
.entity-desc
|
|
margin-bottom: $sub-sections-between-margin
|
|
& &__title
|
|
display: inline-block
|
|
margin-bottom: $sub-section-title-margin
|
|
& &__content
|
|
overflow: hidden
|
|
&--folded
|
|
max-height: 202px
|
|
|
|
& &__unfold-button
|
|
display: flex
|
|
color: $color-primary
|
|
background-color: transparent
|
|
justify-content: center
|
|
text-align: center
|
|
&--hidden
|
|
display: none
|
|
|
|
& &__empty
|
|
|
|
// includes marks of an entity
|
|
// sub section
|
|
.entity-marks
|
|
margin-bottom: $sub-sections-between-margin
|
|
& &__title
|
|
margin-bottom: $sub-section-title-margin
|
|
display: inline-block
|
|
& > a
|
|
margin-right: 5px
|
|
&--stand-alone
|
|
margin-bottom: $section-title-margin
|
|
|
|
& &__more-link
|
|
margin-left: 5px
|
|
& &__mark-list
|
|
|
|
& &__mark
|
|
margin: 0
|
|
padding: $mark-review-padding
|
|
border-bottom: 1px dashed $color-quinary
|
|
&:last-child
|
|
border: none
|
|
&--wider
|
|
padding: $mark-review-padding-wider
|
|
|
|
& &__mark-content
|
|
margin-bottom: 0
|
|
|
|
& &__mark-time
|
|
color: $color-light
|
|
margin-left: 2px
|
|
|
|
& &__owner-link
|
|
|
|
& &__rating-star
|
|
position: relative
|
|
top: 4px
|
|
|
|
& &__empty
|
|
|
|
// includes reviews of an entity
|
|
// sub section
|
|
.entity-reviews
|
|
// when used alone
|
|
&:first-child
|
|
margin-bottom: $sub-sections-between-margin
|
|
& &__title
|
|
display: inline-block
|
|
margin-bottom: $sub-section-title-margin
|
|
& > a
|
|
margin-right: 5px
|
|
&--stand-alone
|
|
margin-bottom: $section-title-margin
|
|
& &__more-link
|
|
margin-left: 5px
|
|
& &__review-list
|
|
|
|
& &__review
|
|
margin: 0
|
|
padding: $mark-review-padding
|
|
border-bottom: 1px dashed $color-quinary
|
|
&:last-child
|
|
border: none
|
|
&--wider
|
|
padding: $mark-review-padding-wider
|
|
|
|
& &__review-time
|
|
color: $color-light
|
|
margin-left: 2px
|
|
& &__review-title
|
|
|
|
& &__owner-link
|
|
|
|
& &__empty
|
|
|
|
.dividing-line
|
|
height: 0
|
|
width: 100%
|
|
margin: 40px 0 24px 0
|
|
border-top: solid 1px $color-light
|
|
&.dividing-line--dashed
|
|
margin: 0
|
|
margin-top: 10px
|
|
margin-bottom: 2px
|
|
border-top: 1px dashed $color-quinary;
|
|
|
|
// on home page
|
|
.entity-sort
|
|
position: relative
|
|
margin-bottom: 30px
|
|
& &__label
|
|
font-size: large
|
|
display: inline-block
|
|
margin-bottom: $section-title-margin
|
|
|
|
& &__more-link
|
|
margin-left: 8px
|
|
|
|
& &__count
|
|
// font-size: large
|
|
// letter-spacing: -1px
|
|
color: $color-tertiary
|
|
&::before
|
|
content: '('
|
|
&::after
|
|
content: ')'
|
|
|
|
& &__entity-list
|
|
display: flex
|
|
justify-content: flex-start
|
|
// padding-left: 24px
|
|
flex-wrap: wrap
|
|
|
|
& &__entity
|
|
padding: 0 10px
|
|
flex-basis: 20%
|
|
text-align: center
|
|
display: inline-block
|
|
color: $color-secondary
|
|
&:hover
|
|
color: $color-primary
|
|
& > a
|
|
color: inherit
|
|
|
|
& &__entity-img
|
|
height: 110px
|
|
|
|
& &__entity-name
|
|
text-overflow: ellipsis
|
|
overflow: hidden
|
|
display: -webkit-box
|
|
-webkit-box-orient: vertical
|
|
-webkit-line-clamp: 2
|
|
|
|
& &__empty
|
|
|
|
// for drag and sort purpose
|
|
&--placeholder
|
|
border: dashed $color-tertiary 4px
|
|
&--hover
|
|
padding: 10px
|
|
border: dashed $color-primary 2px !important
|
|
border-radius: 3px
|
|
&--sortable
|
|
padding: 10px
|
|
margin: 10px 0
|
|
border: dashed $color-tertiary 2px
|
|
cursor: all-scroll
|
|
&--hidden
|
|
opacity: 0.4
|
|
|
|
.entity-sort-control
|
|
display: flex
|
|
justify-content: flex-end
|
|
|
|
&__button
|
|
margin-top: 5px
|
|
margin-left: 12px
|
|
padding: 0 2px
|
|
cursor: pointer
|
|
color: $color-tertiary
|
|
&:hover
|
|
color: $color-primary
|
|
& > .icon-save svg, & > .icon-edit svg
|
|
fill: $color-primary
|
|
|
|
&--float-right
|
|
position: absolute
|
|
top: 4px
|
|
right: 10px
|
|
|
|
&__text
|
|
|
|
|
|
// follower/following list page
|
|
.related-user-list
|
|
& &__title
|
|
margin-bottom: $section-title-margin
|
|
|
|
& &__user
|
|
display: flex
|
|
justify-content: flex-start
|
|
margin-bottom: 20px
|
|
|
|
& &__user-info
|
|
margin-left: 15px
|
|
overflow: auto
|
|
|
|
& &__user-name
|
|
|
|
& &__user-bio
|
|
|
|
& &__user-avatar
|
|
max-height: 72px
|
|
min-width: 72px
|
|
|
|
// review detail page
|
|
.review-head
|
|
& &__title
|
|
display: inline-block
|
|
font-weight: bold
|
|
|
|
& &__body
|
|
margin-bottom: 10px
|
|
&::after
|
|
@include clear
|
|
|
|
& &__info
|
|
float: left
|
|
|
|
& &__owner-link
|
|
color: $color-light
|
|
&:hover
|
|
color: $color-primary
|
|
|
|
& &__time
|
|
color: $color-light
|
|
|
|
& &__rating-star
|
|
position: relative
|
|
top: 3px
|
|
left: -1px
|
|
|
|
& &__actions
|
|
float: right
|
|
|
|
& &__action-link
|
|
&:not(:first-child)
|
|
margin-left: 5px
|
|
|
|
// tag list
|
|
.tag-collection
|
|
margin-left: -9px
|
|
& &__tag
|
|
position: relative;
|
|
display: block;
|
|
float: left;
|
|
color: white;
|
|
background: $color-light;
|
|
padding: 5px;
|
|
// margin: 4px;
|
|
border-radius: .3rem;
|
|
line-height: 1.2em;
|
|
font-size: 80%
|
|
margin: 3px
|
|
& a
|
|
color: white
|
|
&:hover
|
|
color: $color-primary
|
|
|
|
|
|
.track-carousel
|
|
position: relative
|
|
margin-top: 5px
|
|
// padding: 0
|
|
|
|
&__content
|
|
overflow: auto
|
|
scroll-behavior: smooth
|
|
scrollbar-width: none
|
|
display: flex
|
|
margin: auto
|
|
box-sizing: border-box
|
|
padding-bottom: 10px
|
|
&::-webkit-scrollbar
|
|
// horizontal scrollbar width
|
|
height: 3px
|
|
// vertical scrollbar width
|
|
width: 1px
|
|
background-color: $color-quinary
|
|
&::-webkit-scrollbar-thumb
|
|
background-color: $color-tertiary
|
|
|
|
|
|
&__track
|
|
text-align: center
|
|
overflow: hidden
|
|
text-overflow: ellipsis
|
|
min-width: 18%
|
|
max-width: 18%
|
|
margin-right: 2.5%
|
|
& img
|
|
object-fit: contain
|
|
&__track-title
|
|
// word-break: keep-all
|
|
// overflow-wrap: anywhere
|
|
white-space: nowrap
|
|
|
|
&__button
|
|
display: flex
|
|
justify-content: center
|
|
align-content: center
|
|
background: white
|
|
border: none
|
|
padding: 8px
|
|
border-radius: 50%
|
|
outline: 0
|
|
cursor: pointer
|
|
position: absolute
|
|
top: 50%
|
|
&--prev
|
|
left: 0
|
|
transform: translate(50%, -50%)
|
|
&--next
|
|
right: 0
|
|
transform: translate(-50%, -50%)
|
|
|
|
|
|
// Small devices (landscape phones, 576px and up)
|
|
@media (max-width: $small-devices)
|
|
.entity-list
|
|
& &__entity
|
|
flex-direction: column
|
|
margin-bottom: 30px
|
|
& &__entity-text
|
|
margin-left: 0
|
|
& &__entity-img-wrapper
|
|
margin-bottom: 8px
|
|
& &__entity-info
|
|
max-width: unset
|
|
& &__rating--empty + &__entity-info
|
|
max-width: 70%
|
|
& &__entity-brief
|
|
-webkit-line-clamp: 5
|
|
|
|
.entity-detail
|
|
flex-direction: column
|
|
& &__title
|
|
margin-bottom: 5px
|
|
& &__info
|
|
margin-left: 0
|
|
float: none
|
|
display: flex
|
|
flex-direction: column
|
|
width: 100%
|
|
& &__img
|
|
margin-bottom: 24px
|
|
float: none
|
|
height: unset
|
|
max-width: 170px;
|
|
& &__fields
|
|
width: unset
|
|
margin-left: unset
|
|
& + .tag-collection
|
|
margin-left: -3px
|
|
|
|
.entity-marks
|
|
& &__mark-list
|
|
|
|
& &__mark
|
|
|
|
& &__rating-star
|
|
|
|
& &__rating-star + &__mark-time
|
|
// display: block
|
|
|
|
.dividing-line
|
|
margin-top: 24px
|
|
|
|
.entity-sort
|
|
& &__entity
|
|
flex-basis: 50%
|
|
// margin-left: 10px
|
|
// margin-right: 10px
|
|
& &__entity-img
|
|
height: 130px
|
|
|
|
.review-head
|
|
& &__info
|
|
float: unset
|
|
& &__actions
|
|
float: unset
|
|
|
|
.track-carousel
|
|
&__content
|
|
padding-bottom: 10px
|
|
&__track
|
|
min-width: 31%
|
|
max-width: 31%
|
|
margin-right: 4.5%
|
|
|
|
|
|
.calendar_view
|
|
position: relative
|
|
|
|
// Medium devices (tablets, 768px and up)
|
|
@media (max-width: $medium-devices)
|
|
.calendar_view
|
|
overflow-x: scroll
|
|
|
|
// Large devices (desktops, 992px and up)
|
|
@media (max-width: $large-devices)
|
|
.main-section-wrapper
|
|
padding: $main-section-padding-mobile
|
|
|
|
.entity-detail
|
|
display: flex
|
|
& &__info
|
|
// display: flex
|
|
// Extra large devices (large desktops, 1200px and up)
|
|
@media (max-width: $x-large-devices)
|
|
pass
|