/* * SunucuRadar Profil > Bildirimler mobil görünümü. * Yalnız .sr-notifications-page içeren sayfada çalışır. */ @media (max-width: 760px) { body:has(.sr-notifications-page) main.container { width: calc(100% - 16px) !important; padding-top: 8px !important; padding-bottom: 18px !important; } .sr-notifications-page { padding: 12px !important; overflow: hidden !important; border: 1px solid rgba(148, 163, 184, .14) !important; border-radius: 17px !important; background: radial-gradient( circle at 88% 0, rgba(34, 197, 94, .13), transparent 34% ), linear-gradient( 150deg, rgba(15, 23, 42, .98), rgba(2, 6, 23, .95) ) !important; box-shadow: 0 18px 42px rgba(0, 0, 0, .28) !important; } .sr-notifications-page > .badge { margin-bottom: 7px !important; padding: 5px 8px !important; border-radius: 999px !important; font-size: 7px !important; line-height: 1.1 !important; } .sr-notifications-page > h1 { margin: 0 0 6px !important; color: #f8fafc !important; font-size: 23px !important; line-height: 1.04 !important; letter-spacing: -.65px !important; } .sr-notifications-page > p { margin: 0 !important; color: #aeb7c6 !important; font-size: 9px !important; line-height: 1.45 !important; } .sr-notifications-page .notifications-list { margin-top: 11px !important; display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; } .sr-notifications-page .notification-card { position: relative !important; min-width: 0 !important; padding: 11px !important; overflow: hidden !important; border: 1px solid rgba(148, 163, 184, .15) !important; border-radius: 13px !important; background: linear-gradient( 155deg, rgba(15, 23, 42, .96), rgba(2, 6, 23, .90) ) !important; box-shadow: 0 10px 25px rgba(0, 0, 0, .22) !important; opacity: 1 !important; } .sr-notifications-page .notification-card::before { content: "" !important; position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important; width: 3px !important; border-radius: 13px 0 0 13px !important; background: rgba(148, 163, 184, .34) !important; } .sr-notifications-page .notification-card.unread { border-color: rgba(74, 222, 128, .34) !important; background: radial-gradient( circle at 92% 0, rgba(34, 197, 94, .14), transparent 36% ), linear-gradient( 155deg, rgba(15, 23, 42, .98), rgba(2, 6, 23, .92) ) !important; box-shadow: 0 0 0 1px rgba(34, 197, 94, .07) inset, 0 12px 28px rgba(0, 0, 0, .25) !important; } .sr-notifications-page .notification-card.unread::before { background: linear-gradient( 180deg, #86efac, #22c55e ) !important; box-shadow: 0 0 16px rgba(34, 197, 94, .38) !important; } .sr-notifications-page .notification-card.read { border-color: rgba(148, 163, 184, .12) !important; background: linear-gradient( 155deg, rgba(15, 23, 42, .78), rgba(2, 6, 23, .72) ) !important; } .sr-notifications-page .notification-head { min-width: 0 !important; margin: 0 0 7px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: start !important; gap: 8px !important; } .sr-notifications-page .notification-title { min-width: 0 !important; overflow-wrap: anywhere !important; color: #f8fafc !important; font-size: 11px !important; font-weight: 950 !important; line-height: 1.3 !important; } .sr-notifications-page .notification-badge { min-width: 0 !important; padding: 4px 7px !important; border-radius: 999px !important; font-size: 6px !important; font-weight: 950 !important; line-height: 1.15 !important; white-space: nowrap !important; } .sr-notifications-page .notification-badge.unread { color: #86efac !important; background: rgba(34, 197, 94, .13) !important; border: 1px solid rgba(74, 222, 128, .30) !important; } .sr-notifications-page .notification-badge.read { color: #94a3b8 !important; background: rgba(148, 163, 184, .08) !important; border: 1px solid rgba(148, 163, 184, .14) !important; } .sr-notifications-page .notification-body { min-width: 0 !important; margin: 0 !important; overflow-wrap: anywhere !important; color: #cbd5e1 !important; font-size: 9px !important; line-height: 1.5 !important; } .sr-notifications-page .notification-meta { margin-top: 8px !important; padding-top: 7px !important; border-top: 1px solid rgba(148, 163, 184, .09) !important; color: #7f8a9a !important; font-size: 6px !important; font-weight: 800 !important; line-height: 1.25 !important; } .sr-notifications-page .notification-actions { margin-top: 8px !important; display: grid !important; grid-template-columns: 1fr !important; } .sr-notifications-page .notification-actions .button { width: 100% !important; min-height: 32px !important; padding: 7px 9px !important; display: grid !important; place-items: center !important; border-radius: 8px !important; color: #86efac !important; background: rgba(34, 197, 94, .09) !important; border: 1px solid rgba(74, 222, 128, .23) !important; font-size: 7px !important; font-weight: 900 !important; line-height: 1.15 !important; text-align: center !important; text-decoration: none !important; } .sr-notifications-page .notifications-list > .empty { min-height: 155px !important; padding: 20px !important; display: grid !important; place-items: center !important; border: 1px dashed rgba(148, 163, 184, .20) !important; border-radius: 13px !important; color: #aeb7c6 !important; background: radial-gradient( circle at 50% 0, rgba(34, 197, 94, .09), transparent 48% ), rgba(15, 23, 42, .58) !important; font-size: 9px !important; line-height: 1.5 !important; text-align: center !important; } } @media (max-width: 390px) { .sr-notifications-page { padding: 10px !important; } .sr-notifications-page > h1 { font-size: 21px !important; } .sr-notifications-page .notifications-list { gap: 6px !important; } .sr-notifications-page .notification-card { padding: 10px !important; } .sr-notifications-page .notification-title { font-size: 10px !important; } .sr-notifications-page .notification-body { font-size: 8px !important; } }