.classMenegerCrash { display: flex; flex-direction: row; } .classNoMenegerCrash { margin-top: 7.4vh; margin-left: 1vh; } .crash-content { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(5, 1fr); gap: 0.625rem; /* 10px в рем */ grid-auto-flow: row; grid-template-areas: "crashgame crashgame crashgame crashgame crashgame crashgame" "crashgame crashgame crashgame crashgame crashgame crashgame" "crashgame crashgame crashgame crashgame crashgame crashgame" "crashplayers crashplayers crashplayers crashplayers crashplayers crashplayers" "crashplayers crashplayers crashplayers crashplayers crashplayers crashplayers"; background: #17181C; box-shadow: 0 0.25rem #00000040; border-radius: 1.25rem; .grid-crash .chat { height: 96.8%; } .crash-game { background: #22252F; border-radius: 1.25rem; box-shadow: 0.25rem 0.25rem 0.25rem 0px #00000040; width: 95%; height: 29.6875rem; margin: 2.5625rem auto 0 auto; } .crash-game__content { display: flex; } /* Crash-Window */ .crash-game__start-window { margin-left: 30px; height: 0; } .crash-game__start-window .crash__game-name { margin: 62px 0 2px 0; font-family: 'Montserrat Alternates'; font-weight: 700; font-size: 26px; color: #fff; box-shadow: 1px 1px 1px 0px #00000001; } .crash-game__start-window p { font-family: 'Montserrat Alternates'; font-weight: 700; font-size: 14px; color: #FFFFFF85; } .crash-game-window__inputs { margin-top: 29px; } .crash-label { font-family: 'Montserrat Alternates'; font-weight: 700; font-size: 13px; color: #44C6EF54; margin: 0 0 4px 4px; } .input-style-crash { width: 347px; height: 40px; border: 2px solid #2B3458; border-radius: 15px; background: #22252F; } .diamond-input-crash { margin-left: -25px; } .input-style-crash__text { font-family: 'Montserrat Alternates'; font-weight: 700; font-size: 12px; color: #fff; padding-left: 35px; } .crash-input-deposit .diamonds-btns__display { margin: 8px 0 19px -22px; } .crash-input-deposit #max-button { padding: 4px 10px; } .crash-input-deposit .diamond-icon { left: 12px; } .crash-game-window__btn-start { display: flex; flex-direction: column; align-items: center; margin-top: 23px; } .crash-game-window__btn-start button { margin-bottom: 5px; background: #EF4444; border: unset; border-radius: 10px; width: 300px; height: 60px; font-family: 'Inter'; font-weight: 700; font-size: 18px; } .claim-btn-crash__prize { background: #4E5EF2 !important; } .waiting-btn-crash { background: #3D3F48 !important; } .crash-window__line { display: flex; flex-direction: row-reverse; } .line-crash { width: 2px; height: 474px; background: #30364F; position: relative; top: -342px; left: 10%; z-index: 1; } .crash-game__content .error-block { top: 425px; } /* /Crash-Window */ /* Crash-Graph */ .crash-game__graph { width: 800px; top: 200px; left: 600px; position: fixed; } .chart-container canvas { background-color: transparent !important; width: 800px !important; height: 400px !important; transition: .3s ease; } .lost-ratio { color: #EF4444; font-weight: 700; } /* /Crash-History */ .crash__history { background: linear-gradient(90deg, rgba(34, 37, 47, 0.8) -0.54%, rgba(34, 37, 47, 0.8) 83.03%, rgba(73, 59, 74, 0.64) 103.54%); width: 66%; height: 50px; border-radius: 18px; margin-left: 455px; display: grid; grid-template-columns: auto auto auto; gap: 10px; } .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.8); text-align: center; } .crash-history__element { height: 80%; border-radius: 18px; background: rgba(34, 37, 47, 0.8); } /* Crash-Players */ .user-crash { display: flex; justify-content: end; margin-left: 400px; } .user-list { overflow-y: auto; height: 300px; } .user-crash-content { background: linear-gradient(90deg, rgba(34, 37, 47, 0.8) -0.54%, rgba(34, 37, 47, 0.8) 83.03%, rgba(73, 59, 74, 0.64) 103.54%); display: grid; justify-content: space-between; grid-template-columns: repeat(5, 50px) 100px; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: "username username bid bid ... status"; margin: 10px auto; width: 90%; height: 70px; border-radius: 18px; } .user-crash-content__lose { background: linear-gradient(90deg, #22252F -0.54%, #322733 83.25%, #B53938 103.54%) !important; } .user-crash-content__win { background: linear-gradient(90deg, #22252F -0.54%, #22252F 84.17%, rgba(42, 110, 57, 0.87) 103.54%); } .user-name-crash { display: flex; align-items: center; margin: 10px; grid: 'username'; } .user-name-crash h2 { margin-left: 8px; color: #61647F; font-family: 'Montserrat'; font-weight: 700; font-size: 20px; } .user-name-crash img { width: 50px; } .user-bid-crash { display: flex; justify-content: center; align-items: center; grid-area: bid; } .user-bid-crash h2 { color: #848484; font-weight: 700; font-family: 'Montserrat'; font-size: 24px; } .user-bid-crash img { margin: 5px 0 0 5px; } .user-game-status-crash { display: flex; align-items: center; grid-area: status; } .user-game-status-crash h2 { font-size: 20px; } .wingame__win-bid-crash { color: #28BD49 !important; } .ingame-crash { color: #61647F; font-family: 'Montserrat'; font-weight: 700; font-size: 12px; background: #22252F; box-shadow: 0px 4px 4px 0px #00000040; border-radius: 5px; width: 70px; height: 24px; } .lostgame-crash { color: #fff; font-weight: 700; font-family: 'Montserrat'; background: #EF4847; box-shadow: 0px 4px 4px 0px #00000040; border-radius: 5px; margin-left: -26px; padding: 4px; } .wingame-crash { box-shadow: 0px 4px 4px 0px #00000040; font-family: 'Montserrat'; font-weight: 700; color: #28BD49; border: 1px solid #28BD49; border-radius: 5px; padding: 6px; } .ratio { position: relative; left: 50%; top: -390px; font-size: 34px; font-weight: 700; font-family: 'Montserrat'; } .time { position: relative; left: 50%; font-size: 34px; font-weight: 700; font-family: 'Montserrat'; } /* /Crash-Players */ /* Notification */ .notification-crash { text-align: center; top: 20%; left: 50%; position: absolute; background: #000; width: 200px; height: 40px; } /* /Notification */ /* Media */ @media screen and (max-width: 1740px) and (min-width: 1400px) { .crash-game__content .error-block{ top: 407px !important; } .crash-game__graph { width: 500px; height: 500px; top: 190px; left: 570px; } .crash-input-deposit .btn-style__diamonds button { padding: 4px 18px !important; } .chart-container { width: 500px !important; height: 500px !important; } } @media screen and (max-width: 1400px) and (min-width: 1200px) { .header__nav nav a { font-size: 16px; } .crash-game__content .error-block{ top: 405px !important; } .crash-game__graph { width: 400px; height: 400px; top: 180px; left: 550px; } .chart-container { width: 400px !important; height: 400px !important; } .crash-input-deposit .btn-style__diamonds button { padding: 4px 18px !important; } } @media screen and (max-height: 950px) and (min-height: 915px) { .grid-crash .chat { height: 92.5%; } .crash-game__players { height: 270px; } .crash-game-players__content { height: 230px; } .ratio { top: -380px; } .time { left: 45%; } } @media screen and (max-height: 915px) and (min-height: 890px) { .grid-crash .chat { height: 100%; } .chat__content--users { height: 58vh; } .crash-game { height: 40vh; } .crash-game__players { height: 290px; } .crash-game-players__content { height: 250px; } .crash-game__graph { height: 100px !important; top: 200px; } #line-chart { height: 300px !important; } .ratio { top: -320px; } .time { left: 40%; } .line-crash { height: 366px; } }} @media screen and (min-height: 950px) { .chat { height: 88vh !important; } } /*.crash-game__graph {*/ /* width: 800px;*/ /* top: 200px;*/ /* left: 600px;*/ /* position: fixed;*/ /*}*/ /*.chart-container canvas {*/ /* background-color: transparent !important;*/ /* width: 800px !important;*/ /* height: 400px !important;*/ /* transition: .3s ease;*/ /*}*/ /* /Media */