2020-07-03 15:36:23 +08:00
|
|
|
.bg-mask
|
|
|
|
background-color: black
|
|
|
|
z-index: 1
|
|
|
|
filter: opacity(20%)
|
|
|
|
position: fixed
|
|
|
|
width: 100%
|
|
|
|
height: 100%
|
|
|
|
left: 0
|
|
|
|
top: 0
|
|
|
|
display: none
|
|
|
|
|
|
|
|
@mixin modal
|
|
|
|
z-index: 2
|
|
|
|
display: none
|
|
|
|
position: fixed
|
|
|
|
width: 500px
|
|
|
|
top: 50%
|
|
|
|
left: 50%
|
|
|
|
transform: translate(-50%, -50%)
|
|
|
|
background-color: $color-bright
|
|
|
|
padding: 20px 20px 10px 20px
|
|
|
|
color: $color-secondary
|
|
|
|
& &__head
|
2020-07-10 21:28:09 +08:00
|
|
|
margin-bottom: 20px
|
2020-07-03 15:36:23 +08:00
|
|
|
&::after
|
|
|
|
@include clear
|
|
|
|
|
|
|
|
& &__title
|
|
|
|
font-weight: bold
|
|
|
|
font-size: 1.2em
|
|
|
|
float: left
|
|
|
|
|
|
|
|
& &__close-button
|
|
|
|
float: right
|
2020-07-10 21:28:09 +08:00
|
|
|
cursor: pointer
|
2020-07-03 15:36:23 +08:00
|
|
|
|
|
|
|
& &__body
|
|
|
|
|
|
|
|
& &__confirm-button
|
|
|
|
float: right
|
|
|
|
|
|
|
|
.mark-modal
|
|
|
|
@include modal
|
|
|
|
& input[type="radio"]
|
|
|
|
margin-right: 0
|
|
|
|
|
|
|
|
& &__rating-star
|
|
|
|
display: inline
|
|
|
|
float: left
|
|
|
|
position: relative
|
|
|
|
left: -3px
|
|
|
|
|
|
|
|
& &__status-radio
|
|
|
|
float: right
|
|
|
|
& ul
|
|
|
|
margin-bottom: 0
|
|
|
|
& li, & label
|
|
|
|
display: inline
|
|
|
|
& input[type="radio"]
|
|
|
|
position: relative
|
|
|
|
top: 1px
|
|
|
|
|
|
|
|
& &__clear
|
|
|
|
@include clear
|
|
|
|
|
|
|
|
& &__content-input, & form textarea
|
|
|
|
height: 200px
|
|
|
|
width: 100%
|
|
|
|
margin-top: 5px
|
|
|
|
margin-bottom: 5px
|
|
|
|
resize: vertical
|
|
|
|
|
2020-07-10 21:28:09 +08:00
|
|
|
& &__tag
|
|
|
|
// margin-top: 10px
|
|
|
|
margin-bottom: 20px
|
|
|
|
|
2020-07-03 15:36:23 +08:00
|
|
|
& &__option
|
|
|
|
margin-bottom: 24px
|
|
|
|
&::after
|
|
|
|
@include clear
|
|
|
|
|
|
|
|
& &__visibility-radio
|
|
|
|
float: left
|
|
|
|
& ul, & li, & label
|
|
|
|
display: inline
|
|
|
|
& label
|
|
|
|
font-size: normal
|
|
|
|
& input[type="radio"]
|
|
|
|
position: relative
|
|
|
|
top: 2px
|
|
|
|
|
|
|
|
& &__share-checkbox
|
|
|
|
float: right
|
|
|
|
& input[type="checkbox"]
|
|
|
|
position: relative
|
|
|
|
top: 2px
|
|
|
|
|
|
|
|
.confirm-modal
|
|
|
|
@include modal
|
|
|
|
|
2020-12-09 13:47:00 +01:00
|
|
|
.announcement-modal
|
|
|
|
@include modal
|
|
|
|
|
|
|
|
& &__body
|
|
|
|
overflow-y: auto
|
|
|
|
max-height: 64vh
|
|
|
|
& .announcement
|
|
|
|
&__title
|
|
|
|
display: inline-block
|
|
|
|
|
|
|
|
&__datetime
|
|
|
|
color: $color-light
|
|
|
|
margin-left: 10px
|
|
|
|
|
|
|
|
&__content
|
2020-12-09 14:21:56 +01:00
|
|
|
word-break: break-all
|
2020-12-09 13:47:00 +01:00
|
|
|
|
2022-11-09 13:56:50 -05:00
|
|
|
.add-to-list-modal
|
|
|
|
@include modal
|
2020-12-09 13:47:00 +01:00
|
|
|
|
2020-07-03 15:36:23 +08:00
|
|
|
// Small devices (landscape phones, 576px and up)
|
|
|
|
@media (max-width: $small-devices)
|
2022-11-09 13:56:50 -05:00
|
|
|
.mark-modal, .confirm-modal, .announcement-modal .add-to-list-modal
|
2020-07-03 15:36:23 +08:00
|
|
|
width: 100%
|
|
|
|
// Medium devices (tablets, 768px and up)
|
|
|
|
@media (max-width: $medium-devices)
|
|
|
|
pass
|
|
|
|
// Large devices (desktops, 992px and up)
|
|
|
|
@media (max-width: $large-devices)
|
|
|
|
pass
|
|
|
|
// Extra large devices (large desktops, 1200px and up)
|
|
|
|
@media (max-width: $x-large-devices)
|
|
|
|
pass
|