2018-03-18 19:09:58 +01:00
|
|
|
const item-color-pro-account = hsl(0, 100%, 71%)
|
|
|
|
|
const item-color-anime-support-ticket = hsl(217, 64%, 50%)
|
2017-10-06 12:44:55 +02:00
|
|
|
|
2017-10-03 15:26:29 +02:00
|
|
|
.shop-items
|
2018-04-08 22:10:45 +02:00
|
|
|
vertical
|
|
|
|
|
width 100%
|
|
|
|
|
max-width 600px
|
|
|
|
|
margin 0 auto
|
2017-11-05 07:29:13 +01:00
|
|
|
|
|
|
|
|
.shop-item
|
2018-04-08 22:10:45 +02:00
|
|
|
horizontal
|
|
|
|
|
align-items center
|
|
|
|
|
padding 0.5rem 0
|
|
|
|
|
border-bottom ui-border
|
|
|
|
|
|
|
|
|
|
:last-child
|
|
|
|
|
border-bottom none
|
|
|
|
|
|
|
|
|
|
.shop-item-info-column
|
|
|
|
|
flex 0.7
|
|
|
|
|
vertical
|
2017-11-05 07:29:13 +01:00
|
|
|
|
|
|
|
|
.shop-item-name
|
2018-04-08 22:10:45 +02:00
|
|
|
font-size 1.4rem
|
|
|
|
|
text-align left
|
|
|
|
|
margin 0
|
|
|
|
|
clip-long-text
|
2017-10-03 15:26:29 +02:00
|
|
|
|
2018-04-08 22:10:45 +02:00
|
|
|
.shop-item-popularity
|
|
|
|
|
opacity 0.5
|
|
|
|
|
|
|
|
|
|
.shop-item-icon
|
|
|
|
|
//
|
2017-10-03 15:26:29 +02:00
|
|
|
|
2017-10-06 12:44:55 +02:00
|
|
|
// Colors
|
2017-11-05 09:32:46 +01:00
|
|
|
.shop-item, .inventory-slot, .shop-history-item
|
2018-04-08 10:21:40 +02:00
|
|
|
[data-item-id="pro-account-1"],
|
|
|
|
|
[data-item-id="pro-account-3"],
|
|
|
|
|
[data-item-id="pro-account-6"],
|
|
|
|
|
[data-item-id="pro-account-12"],
|
2017-10-06 12:44:55 +02:00
|
|
|
[data-item-id="pro-account-24"]
|
2018-04-08 22:10:45 +02:00
|
|
|
.shop-item-icon
|
2017-10-06 12:44:55 +02:00
|
|
|
color item-color-pro-account
|
|
|
|
|
|
2018-04-08 22:10:45 +02:00
|
|
|
// [data-item-id="anime-support-ticket"]
|
|
|
|
|
// .shop-item-icon
|
|
|
|
|
// color item-color-anime-support-ticket
|
2017-10-03 15:26:29 +02:00
|
|
|
|
|
|
|
|
.shop-item-price
|
|
|
|
|
// ...
|
|
|
|
|
|
|
|
|
|
.shop-buttons
|
2018-04-08 22:10:45 +02:00
|
|
|
flex 0.3
|
|
|
|
|
white-space nowrap
|
2017-10-03 15:26:29 +02:00
|
|
|
|
|
|
|
|
.shop-button-buy
|
2018-04-08 22:10:45 +02:00
|
|
|
width 100%
|
|
|
|
|
justify-content center
|
|
|
|
|
|
2019-08-30 16:04:28 +09:00
|
|
|
svg-icon
|
|
|
|
|
[name="diamond"]
|
|
|
|
|
margin-left 0.3rem
|
|
|
|
|
margin-right 0
|
2018-11-17 00:07:12 +09:00
|
|
|
|
|
|
|
|
#pro-benefits-footer
|
|
|
|
|
margin-top 3rem
|
2018-11-17 00:20:58 +09:00
|
|
|
margin-bottom 1rem
|
2018-11-17 00:07:12 +09:00
|
|
|
|
|
|
|
|
.pro-benefits-button
|
|
|
|
|
vertical
|
|
|
|
|
color hsla(text-color-h, text-color-s, text-color-l, 0.5)
|
|
|
|
|
background transparent
|
|
|
|
|
border none
|
|
|
|
|
font-size 0.8rem
|
|
|
|
|
|
|
|
|
|
:hover
|
|
|
|
|
background transparent
|
|
|
|
|
border none
|
|
|
|
|
color link-hover-color
|
|
|
|
|
|
|
|
|
|
#pro-benefits
|
|
|
|
|
margin 0 auto
|
|
|
|
|
width 100%
|
2018-11-17 00:20:58 +09:00
|
|
|
max-width 450px
|
2018-11-17 00:07:12 +09:00
|
|
|
|
|
|
|
|
.pro-benefits-header
|
|
|
|
|
text-align center
|
|
|
|
|
margin-bottom 1rem
|
|
|
|
|
|
|
|
|
|
.pro-benefit
|
2019-08-30 16:22:08 +09:00
|
|
|
horizontal
|
|
|
|
|
align-items center
|
2018-11-17 00:07:12 +09:00
|
|
|
list-style-type none
|
2018-11-17 00:20:58 +09:00
|
|
|
font-size 1.2rem
|
|
|
|
|
line-height 1.6em
|
2018-11-17 00:07:12 +09:00
|
|
|
|
2019-08-30 16:22:08 +09:00
|
|
|
svg-icon
|
2018-11-17 00:07:12 +09:00
|
|
|
color like-color
|
