TopToast.module.css
1 .toast { 2 position: fixed; 3 width: 100%; 4 left: 0; 5 display: flex; 6 text-align: center; 7 justify-content: center; 8 align-items: center; 9 z-index: 10000; 10 padding: 14px 40px; 11 background-color: rgb(var(--lsd-surface-secondary)); 12 color: rgb(var(--lsd-text-secondary)); 13 text-align: center; 14 z-index: 1000; 15 min-height: 48px; 16 17 font-size: 14px; 18 font-weight: 400; 19 line-height: 20px; 20 letter-spacing: 0.14px; 21 } 22 23 .toast a { 24 margin-left: 16px; 25 color: rgb(var(--lsd-text-secondary)); 26 text-decoration: underline; 27 } 28 29 .closeButton { 30 display: flex; 31 justify-content: center; 32 align-items: center; 33 cursor: pointer; 34 position: absolute; 35 right: 10px; 36 top: 10px; 37 width: 28px; 38 height: 28px; 39 border: 1px solid rgb(var(--lsd-border-secondary)); 40 background: transparent; 41 padding: 0; 42 } 43 44 .timeRemaining { 45 margin-left: 20px; 46 } 47 48 .mobileText { 49 display: none; 50 } 51 52 .desktopText { 53 display: inline; 54 } 55 56 @media (max-width: 768px) { 57 .toast { 58 flex-direction: column; 59 font-size: 12px; 60 line-height: 16px; 61 padding: 14px; 62 } 63 64 .message { 65 width: 82%; 66 } 67 68 .mobileText { 69 display: inline; 70 } 71 72 .desktopText { 73 display: none; 74 } 75 76 .toast p { 77 width: 75vw; 78 } 79 }