| @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap'); |
| |
| *, |
| button, |
| input, |
| select, |
| textarea { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| font-family: "Inter", sans-serif; |
| } |
|
|
| body { |
| background-color: #1a1f25; |
| color: white; |
| font-family: "Inter"; |
| margin: 0; |
| padding: 0; |
| max-width: 100vw; |
| overflow-x: hidden; |
| font-size: 14px; |
| } |
|
|
| .container { |
| min-height: 100vh; |
| position: relative; |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| |
| .header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 0.625rem 1rem; |
| border-bottom: 1px solid #252a33; |
| background-color: #1e232b; |
| } |
|
|
| .logo-container { |
| display: flex; |
| align-items: center; |
| } |
|
|
| .logo { |
| height: 1.75rem; |
| width: auto; |
| } |
|
|
| .search-container { |
| flex: 0 1 10rem; |
| margin: 0 1rem; |
| margin-left: auto; |
| } |
|
|
| .search-input-wrapper { |
| position: relative; |
| } |
|
|
| .search-icon { |
| position: absolute; |
| left: 0.75rem; |
| top: 50%; |
| transform: translateY(-50%); |
| color: #6b7280; |
| } |
|
|
| .search-input { |
| width: 100%; |
| background-color: #252a33; |
| color: #d1d5db; |
| border-radius: 0.375rem; |
| padding: 0.25rem 0.75rem 0.25rem 2rem; |
| border: none; |
| font-size: 0.72rem; |
| outline: none; |
| height: 1.75rem; |
| font-family: "Inter", sans-serif; |
| } |
|
|
| .search-input::placeholder { |
| color: #6b7280; |
| } |
|
|
| .menu-button { |
| padding: 0.25rem; |
| background: none; |
| border: none; |
| cursor: pointer; |
| color: white; |
| } |
|
|
| |
| .main-content { |
| flex: 1; |
| max-width: 28rem; |
| margin: 0 auto; |
| padding: 0 1rem; |
| width: 100%; |
| } |
|
|
| .username-header { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| margin-top: 1.5rem; |
| margin-bottom: 1.25rem; |
| } |
|
|
| .username-title { |
| font-size: 1.5rem; |
| font-weight: bold; |
| } |
|
|
| .claimed-badge { |
| margin-left: 0.75rem; |
| padding: 0.125rem 0.5rem; |
| background-color: #252a33; |
| color: #4ade80; |
| border-radius: 0.375rem; |
| font-size: 0.75rem; |
| } |
|
|
| .info-box { |
| background-color: #171b21; |
| border-radius: 0.5rem; |
| margin-bottom: 0.75rem; |
| overflow: hidden; |
| } |
|
|
| .info-box-title { |
| font-size: 0.775rem; |
| color: #9ca3af; |
| padding: 0.490rem; |
| border-bottom: 1px solid #252a33; |
| background-color: #1e232b; |
| } |
|
|
| .info-box-content { |
| padding: 0.625rem; |
| background-color: #171b21; |
| } |
|
|
| .info-text { |
| font-size: 0.75rem; |
| color: #d1d5db; |
| margin-bottom: 0.5rem; |
| } |
|
|
| .ton-symbol { |
| color: #5289cc; |
| margin: 0 0.25rem; |
| display: inline-flex; |
| align-items: center; |
| } |
|
|
| .ton-logo { |
| width: 0.625rem; |
| height: 0.625rem; |
| display: inline-block; |
| } |
|
|
| .link { |
| color: #5289cc; |
| text-decoration: none; |
| font-size: 0.75rem; |
| } |
|
|
| .details-box { |
| background-color: #1e232b; |
| border-radius: 0.5rem; |
| overflow: hidden; |
| margin-bottom: 0.75rem; |
| } |
|
|
| .details-row { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 0.625rem; |
| border-bottom: 1px solid #252a33; |
| background-color: #1d2229; |
| } |
|
|
| .details-row.no-border { |
| border-bottom: none; |
| } |
|
|
| .details-label { |
| font-size: 0.75rem; |
| font-weight: bold; |
| } |
|
|
| .timer-container { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 0.25rem; |
| margin-bottom: 0.75rem; |
| font-size: 0.75rem; |
| } |
|
|
| .timer-label { |
| color: #9ca3af; |
| margin-right: 0.25rem; |
| } |
|
|
| .timer-box { |
| background-color: #1e232b; |
| padding: 0.25rem 0.5rem; |
| border-radius: 0.375rem; |
| font-weight: bold; |
| } |
|
|
| .timer-separator { |
| font-weight: bold; |
| } |
|
|
| .accept-button { |
| width: 100%; |
| background-color: #4c8ed9; |
| color: white; |
| font-size: 0.740rem; |
| font-weight: bold; |
| padding: 0.75rem 0; |
| border-radius: 0.5rem; |
| border: none; |
| margin-bottom: 0.75rem; |
| cursor: pointer; |
| font-family: "Inter", sans-serif; |
| } |
|
|
| .accept-button:hover { |
| background-color: #3a7bc7; |
| } |
|
|
| .subscribe-container { |
| text-align: center; |
| margin-bottom: 1.5rem; |
| } |
|
|
| .history-container { |
| margin-bottom: 1.5rem; |
| } |
|
|
| .history-title { |
| font-size: 1.25rem; |
| font-weight: bold; |
| margin-bottom: 0.75rem; |
| font-weight: bold; |
| } |
|
|
| .history-box { |
| background-color: #171b21; |
| border-radius: 0.5rem; |
| overflow: hidden; |
| } |
|
|
| .history-header { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| padding: 0.625rem; |
| border-bottom: 1px solid #252a33; |
| color: #9ca3af; |
| font-size: 0.75rem; |
| background-color: #1e232b; |
| } |
|
|
| .history-row { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| padding: 0.625rem; |
| border-bottom: 1px solid #252a33; |
| font-size: 0.75rem; |
| } |
|
|
| .history-row.no-border { |
| border-bottom: none; |
| } |
|
|
| .history-cell { |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .buyer { |
| color: #5289cc; |
| } |
|
|
| .ton-price { |
| display: flex; |
| align-items: center; |
| } |
|
|
| .ton-symbol-small { |
| display: inline-flex; |
| align-items: center; |
| margin-right: 0.25rem; |
| } |
|
|
| .ton-logo-small { |
| width: 0.625rem; |
| height: 0.625rem; |
| } |
|
|
| |
| .footer { |
| background-color: #171b21; |
| padding: 0.5rem 0; |
| border-top: 1px solid #252a33; |
| margin-top: auto; |
| } |
|
|
| .footer-content { |
| display: flex; |
| justify-content: center; |
| gap: 2rem; |
| max-width: 28rem; |
| margin: 0 auto; |
| } |
|
|
| .footer-link { |
| color: #999999; |
| text-decoration: none; |
| font-size: 0.600rem; |
| } |
|
|
| |
| .sidebar-overlay { |
| position: fixed; |
| inset: 0; |
| z-index: 50; |
| display: none; |
| } |
|
|
| .sidebar-overlay.active { |
| display: flex; |
| } |
|
|
| .overlay { |
| flex: 1; |
| background-color: rgba(0, 0, 0, 0.5); |
| } |
|
|
| .close-button { |
| position: absolute; |
| top: 0.5rem; |
| right: 0.5rem; |
| padding: 1rem; |
| background: none; |
| border: none; |
| color: white; |
| cursor: pointer; |
| } |
|
|
| .sidebar { |
| width: 75%; |
| background-color: #1a1f25; |
| height: 100%; |
| overflow-y: auto; |
| margin-left: auto; |
| } |
|
|
| .sidebar-header { |
| padding: 0.75rem; |
| border-bottom: 1px solid #252a33; |
| background-color: #1e232b; |
| } |
|
|
| .sidebar-logo-container { |
| display: flex; |
| align-items: center; |
| } |
|
|
| .sidebar-logo { |
| height: 1.75rem; |
| width: auto; |
| } |
|
|
| .sidebar-content { |
| padding: 0.75rem; |
| font-size: 0.875rem; |
| } |
|
|
| .sidebar-section-title { |
| color: #9ca3af; |
| font-size: 0.75rem; |
| margin-bottom: 1rem; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| } |
|
|
| .sidebar-menu { |
| display: flex; |
| flex-direction: column; |
| gap: 0.75rem; |
| } |
|
|
| .sidebar-menu-item { |
| display: flex; |
| align-items: center; |
| text-decoration: none; |
| color: white; |
| } |
|
|
| .sidebar-icon-container { |
| width: 1.75rem; |
| height: 1.75rem; |
| border-radius: 9999px; |
| background-color: #252a33; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| margin-right: 0.75rem; |
| } |
|
|
| .connect-container { |
| margin-top: 3rem; |
| text-align: center; |
| } |
|
|
| .connect-title { |
| font-size: 1rem; |
| margin-bottom: 0.25rem; |
| } |
|
|
| .connect-subtitle { |
| color: #9ca3af; |
| margin-bottom: 1rem; |
| font-size: 0.75rem; |
| } |
|
|
| .connect-button { |
| width: 100%; |
| padding: 0.625rem 0; |
| border-radius: 0.375rem; |
| border: none; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 0.75rem; |
| cursor: pointer; |
| color: white; |
| font-family: "Inter", sans-serif; |
| } |
|
|
| .ton-button { |
| background-color: #4c8ed9; |
| margin-bottom: 0.5rem; |
| } |
|
|
| .telegram-button { |
| background-color: #252a33; |
| } |
|
|
| .connect-icon-container { |
| margin-right: 0.5rem; |
| width: 1rem; |
| height: 1rem; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .connect-icon { |
| width: 1rem; |
| height: 1rem; |
| } |
|
|
