You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
730 lines
13 KiB
730 lines
13 KiB
@keyframes translate2Left { |
|
from { |
|
transform: rotate(-20deg) translateX(50%) translateY(200%); |
|
} |
|
to { |
|
transform: rotate(0deg) translateX(0%) translateY(0%); |
|
} |
|
} |
|
@keyframes translate2Right { |
|
from { |
|
transform: rotate(20deg) translateX(-50%) translateY(200%); |
|
} |
|
to { |
|
transform: rotate(0deg) translateX(0%) translateY(0%); |
|
} |
|
} |
|
@keyframes translate2Bottom { |
|
from { |
|
transform: rotate(20deg) translateX(150%) translateY(-200%); |
|
} |
|
to { |
|
transform: rotate(0deg) translateX(0%) translateY(0%); |
|
} |
|
} |
|
|
|
@keyframes move2Left { |
|
from { |
|
transform: translateX(-30%); |
|
} |
|
to { |
|
transform: translateX(0%); |
|
} |
|
} |
|
@keyframes move2Right { |
|
from { |
|
transform: translateX(30%); |
|
} |
|
to { |
|
transform: translateX(0%); |
|
} |
|
} |
|
@keyframes move2Bottom { |
|
from { |
|
transform: translateY(-50%); |
|
} |
|
to { |
|
transform: translateY(0%); |
|
} |
|
} |
|
@keyframes move2Top { |
|
from { |
|
transform: translateY(50%); |
|
} |
|
to { |
|
transform: translateY(0%); |
|
} |
|
} |
|
|
|
.translate-2l { |
|
animation: translate2Left 1000ms; |
|
} |
|
.translate-2r { |
|
animation: translate2Right 1000ms; |
|
} |
|
|
|
.translate-2b { |
|
animation: translate2Bottom 1000ms; |
|
} |
|
|
|
.tab { |
|
.table-no { |
|
width: 86px; |
|
height: 24px; |
|
border-radius: 16px; |
|
background-color: #EA8C28; |
|
text-align: center; |
|
line-height: 24px; |
|
color: #fff; |
|
font-size: 16px; |
|
} |
|
.playerRow { |
|
display: flex; |
|
justify-content: space-between; |
|
// align-content: space-around; |
|
flex-flow: row wrap; |
|
// width: 405px; |
|
margin: 46px 26px 0 26px; |
|
} |
|
|
|
.player-wrap { |
|
// flex: 0 0 50%; |
|
position: relative; |
|
display: flex; |
|
} |
|
|
|
.p-status-ready { |
|
position: absolute; |
|
// z-index: 99; |
|
top: -25px; |
|
left: 25px; |
|
color: #1BCE7D; |
|
font-weight: bold; |
|
font-size: 12px; |
|
} |
|
.player-no,.player-no-crown { |
|
position: absolute; |
|
top: -26px; |
|
color: #EE914E; |
|
font-size: 14px; |
|
height: 24px; |
|
width: 24px; |
|
line-height: 24px; |
|
border-radius: 50%; |
|
text-align: center; |
|
font-weight: bold; |
|
} |
|
.player-no { |
|
background-color: #D8D8D8; |
|
} |
|
.player-no-running { |
|
font-weight: bold; |
|
color: #fff; |
|
background-color: #EE914E; |
|
} |
|
|
|
.player-no-crown { |
|
line-height: 28px; |
|
color: #EE914E; |
|
} |
|
.pnc-bg-icon { |
|
position: absolute; |
|
z-index: -1; |
|
top: 0; |
|
left: 0; |
|
height: 24px; |
|
width: auto; |
|
} |
|
.pnc-text-running { |
|
color: #fff; |
|
} |
|
|
|
.blind-icon { |
|
position: absolute; |
|
left: 110px; |
|
top: 25px; |
|
width: 48px; |
|
height: 48px; |
|
} |
|
.blind-icon-self { |
|
left: -2px; |
|
top: -2px; |
|
z-index: 1; |
|
} |
|
|
|
.round-wrap-l,.round-wrap-r { |
|
position: absolute; |
|
top: 8px; |
|
left: 154px; |
|
width: 36px; |
|
height: 60px; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: space-evenly; |
|
align-items: center; |
|
} |
|
.round-wrap-r { |
|
left: -40px; |
|
} |
|
.round-wrap-self { |
|
top: -66px; |
|
// left: 21px; |
|
left: 0px; |
|
z-index: 2; |
|
} |
|
.time-wrap { |
|
color: #1BCE7D; |
|
font-weight: bold; |
|
text-align: center; |
|
line-height: 10px; |
|
} |
|
.time-icon { |
|
width: 36px; |
|
height: 36px; |
|
} |
|
.time-wrap-self { |
|
margin-top: -46px; |
|
margin-left: -15px; |
|
line-height: 14px; |
|
} |
|
|
|
.notice-wrap-l,.notice-wrap-r { |
|
position: absolute; |
|
top: 0px; |
|
left: 156px; |
|
width: 68px; |
|
height: 82px; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: space-evenly; |
|
z-index: 99; |
|
// align-items: center; |
|
// background-color: rgba($color: #fff, $alpha: 0.8); |
|
animation: move2Left 1000ms; |
|
} |
|
.notice-wrap-r { |
|
left: -49px; |
|
animation: move2Right 1000ms; |
|
// text-align: right; |
|
} |
|
.notice-wrap-self { |
|
left: 180px; |
|
top: -4px; |
|
width: 120px; |
|
|
|
.line1 { |
|
color: #FAFAFA; |
|
} |
|
} |
|
|
|
.line2,.line3 { // .line1, |
|
white-space: nowrap; |
|
word-break: keep-all; // 中文不换行, https://www.cnblogs.com/wqsbk/p/3493948.html |
|
// overflow: hidden; |
|
// text-overflow: ellipsis; |
|
line-height: 14px; |
|
height: 14px; |
|
} |
|
.line1 { |
|
white-space: nowrap; |
|
word-break: keep-all; |
|
font-size: 18px; |
|
font-weight: bold; |
|
color: #EE914E; |
|
} |
|
.line2 { |
|
font-size: 14px; |
|
font-weight: bold; |
|
color: #FF4400; |
|
} |
|
.line3 { |
|
font-size: 14px; |
|
font-weight: normal; |
|
color: #3D3D3D; |
|
} |
|
.wins-chip-wrap { |
|
position: absolute; |
|
top: 93px; |
|
// left: 56px; |
|
left: 0; |
|
width: 153px; |
|
height: 16px; |
|
line-height: 16px; |
|
// border: 1px solid red; |
|
display: flex; |
|
justify-content: center; |
|
animation: move2Bottom 1000ms; |
|
} |
|
.wins-chip { |
|
font-size: 18px; |
|
font-weight: bold; |
|
color: #EE914E; |
|
text-shadow: 0 4px 10px rgba($color: #f40, $alpha: 0.3); |
|
} |
|
.wins-chip-wrap-self { |
|
left: -66px; |
|
top: -50px; |
|
animation: move2Top 1000ms; |
|
} |
|
.lose { |
|
color: #A8A29D; |
|
} |
|
.hand-type,.self-hand-type { |
|
position: absolute; |
|
top: 4px; |
|
left: 66px; |
|
width: 70px; |
|
height: 24px; |
|
line-height: 24px; |
|
border-radius: 5px; |
|
background-color: rgba($color: #FDFDFD, $alpha: 0.75); |
|
color: #359220; |
|
font-size: 14px; |
|
font-weight: bold; |
|
text-align: center; |
|
z-index: 99; |
|
} |
|
.self-hand-type { |
|
left: 88px; |
|
} |
|
|
|
.filling-chip { |
|
font-size: 18px; |
|
font-weight: bold; |
|
color: #EE914E; |
|
} |
|
.filling-chip-l { |
|
margin-left: -10px; |
|
} |
|
.filling-chip-self { |
|
color: #FF4400; |
|
margin-top: -10px; |
|
} |
|
.kickout { |
|
position: absolute; |
|
z-index: 99; |
|
width: 24px; |
|
height: 24px; |
|
border-radius: 50%; |
|
} |
|
.kickout-icon { |
|
top: 5px; |
|
left: 125px; |
|
} |
|
|
|
.card1, |
|
.card2 { |
|
position: absolute; |
|
z-index: 9; |
|
top: -20px; |
|
} |
|
|
|
.card1 { |
|
left: 60px; |
|
} |
|
|
|
.card2 { |
|
left: 104px; |
|
} |
|
|
|
.player { |
|
width: 153px; |
|
height: 69px; |
|
background-color: #EE914E; |
|
// text-align: center; |
|
// line-height: 114px; |
|
display: flex; |
|
// padding: 10px 4px; |
|
// border: 1px solid #000; |
|
border-radius: 5px; |
|
} |
|
|
|
.player-wait { |
|
background-color: #A8A29D; |
|
} |
|
|
|
.avatar-wrap { |
|
margin: 10px 0 10px 4px; |
|
height: 50px; |
|
width: 50px; |
|
border-radius: 5px; |
|
background-color: #D8D8D8; |
|
} |
|
|
|
.avatar { |
|
border-radius: 5px; |
|
height: 50px; |
|
width: 50px; |
|
} |
|
|
|
.player-name { |
|
font-size: 12px; |
|
line-height: 20px; |
|
height: 22px; |
|
color: #fff; |
|
font-weight: bold; |
|
width: 82px; |
|
border-bottom: 1px solid #fff; |
|
margin-top: 36px; |
|
margin-left: 8px; |
|
} |
|
|
|
.wallet-wrap { |
|
display: flex; |
|
margin-top: 3px; |
|
} |
|
|
|
.wallet { |
|
display: flex; |
|
background-color: #EE914E; |
|
width: 100px; |
|
height: 18px; |
|
border-radius: 5px; |
|
justify-content: space-between; |
|
box-sizing: border-box; |
|
padding: 0 4px; |
|
} |
|
.wallet-wait { |
|
background-color: #A8A29D; |
|
} |
|
|
|
.wallet-icon { |
|
//margin: 2px 0 2px 4px; |
|
line-height: 22px; |
|
} |
|
|
|
.wallet-icon-img { |
|
width: 14px; |
|
height: 14px; |
|
} |
|
|
|
.wallet-amount { |
|
font-size: 12px; |
|
color: #fff; |
|
line-height: 18px; |
|
} |
|
|
|
.pct { |
|
background-color: #807878; |
|
font-size: 12px; |
|
line-height: 18px; |
|
width: 50px; |
|
border-radius: 5px; |
|
text-align: center; |
|
color: #fff; |
|
margin-left: 5px; |
|
} |
|
|
|
.desktop-box { |
|
display: flex; |
|
justify-content: center; |
|
flex-wrap: nowrap; |
|
margin: 33px 26px 0 26px; |
|
} |
|
|
|
.desktop-wrap {} |
|
|
|
.desktop-cards { |
|
width: 250px; |
|
height: 95px; |
|
border-radius: 5px; |
|
background-color: #584D4D; |
|
display: flex; |
|
justify-content: space-evenly; |
|
align-items: center; |
|
flex-wrap: nowrap; |
|
} |
|
|
|
.desktop-wallet { |
|
margin-top: 4px; |
|
width: 250px; |
|
height: 36px; |
|
background-color: #EE914E; |
|
border-radius: 5px; |
|
display: flex; |
|
justify-content: space-between; |
|
box-sizing: border-box; |
|
padding: 0 5px; |
|
} |
|
|
|
.d-wallet-icon { |
|
font-size: 18px; |
|
color: #fff; |
|
font-weight: bold; |
|
line-height: 36px; |
|
display: flex; |
|
align-items: center; |
|
} |
|
|
|
.d-wallet-icon-img { |
|
height: 28px; |
|
width: 28px; |
|
} |
|
|
|
.d-wallet-icon-text { |
|
margin-left: 7px; |
|
} |
|
|
|
.d-wallet-amount { |
|
font-size: 18px; |
|
color: #fff; |
|
font-weight: bold; |
|
line-height: 36px; |
|
} |
|
|
|
.chatbox { |
|
width: 159px; |
|
height: 134px; |
|
border: 1px solid #000; |
|
border-radius: 5px; |
|
padding: 5px; |
|
} |
|
|
|
.chat-window { |
|
|
|
.line { |
|
font-size: 10px; |
|
line-height: 12px; |
|
} |
|
} |
|
|
|
.chat-panel {} |
|
|
|
.self-box { |
|
width: 380px; |
|
height: 109px; |
|
background-color: #EE914E; |
|
// margin: 30px 26px 0 26px; |
|
margin: 30px auto 0 auto; |
|
border-radius: 5px; |
|
display: flex; |
|
justify-content: center; |
|
} |
|
|
|
.self-wrap { |
|
position: relative; |
|
} |
|
|
|
.s-info-wrap { |
|
display: flex; |
|
height: 89px; |
|
} |
|
|
|
.s-avatar { |
|
align-self: center; |
|
// margin-left: 6px; |
|
} |
|
|
|
.s-avatar-img { |
|
width: 65px; |
|
height: 65px; |
|
} |
|
|
|
.s-username { |
|
font-size: 12px; |
|
font-weight: bold; |
|
border-bottom: 1px solid #fff; |
|
color: #fff; |
|
height: 26px; |
|
align-self: flex-end; |
|
margin-bottom: 16px; |
|
margin-left: 10px; |
|
} |
|
|
|
.s-wallet-wrap { |
|
display: flex; |
|
width: 156px; |
|
} |
|
|
|
.s-w-amount-wrap { |
|
width: 97px; |
|
height: 18px; |
|
background-color: #fff; |
|
// margin-left: 4px; |
|
border-radius: 5px; |
|
display: flex; |
|
justify-content: space-between; |
|
// align-items: flex-start; |
|
box-sizing: border-box; |
|
padding: 0 5px 0 3px; |
|
} |
|
|
|
.s-w-amount-icon { |
|
width: 14px; |
|
height: 14px; |
|
margin-top: -2px; |
|
} |
|
|
|
.s-w-amount-icon-img { |
|
width: 15px; |
|
height: 15px; |
|
} |
|
|
|
.s-w-amount { |
|
color: #3D3D3D; |
|
font-size: 12px; |
|
line-height: 18px; |
|
} |
|
|
|
.s-w-pct { |
|
width: 50px; |
|
height: 18px; |
|
border-radius: 5px; |
|
font-size: 12px; |
|
line-height: 18px; |
|
color: #3D3D3D; |
|
text-align: center; |
|
background-color: #fff; |
|
margin-left: 8px; |
|
} |
|
|
|
.hand-card1, |
|
.hand-card2 { |
|
position: absolute; |
|
top: -20px; |
|
left: 80px; |
|
} |
|
|
|
.hand-card2 { |
|
left: 126px; |
|
} |
|
|
|
.hand-five { |
|
position: absolute; |
|
left: 188px; |
|
top: -24px; |
|
z-index: 999; |
|
width: 166px; |
|
height: 46px; |
|
align-items: center; |
|
display: flex; |
|
justify-content: space-evenly; |
|
// background-color: #807878; |
|
} |
|
|
|
.hand-five-item {} |
|
|
|
.u-opt { |
|
display: flex; |
|
justify-content: flex-start; |
|
} |
|
|
|
.control { |
|
align-self: flex-end; |
|
margin-left: 30px; |
|
margin-bottom: 1px; |
|
} |
|
|
|
.ctl-opt-wrap,.ctl-opt-wrap-cfm { |
|
display: flex; |
|
width: 170px; |
|
justify-content: space-between; |
|
margin-top: 10px; |
|
} |
|
|
|
.amount-input { |
|
width: 80px; |
|
height: 24px; |
|
box-sizing: border-box; |
|
text-align: center; |
|
background-color: #F1D09F; |
|
border-radius: 8px; |
|
padding: 2px 0; |
|
} |
|
.amount-input-in { |
|
font-size: 14px; |
|
line-height: 28px; |
|
color: #3D3D3D; |
|
} |
|
|
|
.amount-sub, |
|
.amount-plus { |
|
width: 36px; |
|
height: 24px; |
|
background-color: #fff; |
|
border-radius: 8px; |
|
text-align: center; |
|
} |
|
|
|
.amount-sub-icon, |
|
.amount-plus-icon { |
|
width: 16px; |
|
height: 13px; |
|
} |
|
|
|
.amount-plus-icon { |
|
width: 16px; |
|
height: 13px; |
|
} |
|
|
|
.ctl-opacity0 { |
|
opacity: 0; |
|
} |
|
.ctl-opt {} |
|
.ctl-opt-btn-1, |
|
.ctl-opt-btn-2, |
|
.ctl-opt-btn-3, |
|
.ctl-opt-btn-4, |
|
.ctl-opt-btn-5, |
|
.ctl-opt-btn-6 { |
|
width: 53.25px; |
|
height: 24px; |
|
border-radius: 8px; |
|
font-size: 12px; |
|
font-weight: bold; |
|
padding: 0; |
|
line-height: 24px; |
|
border: 0; |
|
} |
|
|
|
.ctl-opt-btn-1 { |
|
background-color: #F1D09F; |
|
color: #EA8C28; |
|
} |
|
|
|
.ctl-opt-btn-2 { |
|
background-color: #F1D09F; |
|
color: #D05959; |
|
} |
|
|
|
.ctl-opt-btn-3 { |
|
background-color: #FF4400; |
|
color: #F1D09F; |
|
} |
|
.ctl-opt-btn-ain { |
|
width: 58px; |
|
} |
|
.ctl-opt-wrap-cfm { |
|
justify-content: flex-end; |
|
} |
|
.ctl-opt-btn-cfm { |
|
width: 71px; |
|
margin-left: 6px; |
|
} |
|
|
|
.ctl-opt-btn-4, |
|
.ctl-opt-btn-5, |
|
.ctl-opt-btn-6 { |
|
width: 79.2px; |
|
} |
|
.ctl-opt-btn-4 { |
|
background-color: #F1D09F; |
|
color: #D05959; |
|
} |
|
.ctl-opt-btn-5 { |
|
background-color: #48C25D; |
|
color: #FFF; |
|
} |
|
.ctl-opt-btn-5-ready { |
|
background-color: #6AAD76; |
|
color: #FFF; |
|
} |
|
.ctl-opt-btn-6 { |
|
background-color: #FF4400; |
|
color: #F1D09F; |
|
} |
|
.ctl-opt-btn-disable { |
|
background-color: #A8A29D; |
|
color: #FFF; |
|
} |
|
}
|
|
|