/** * Notifications * * @package SmartCycleDiscounts * @subpackage SmartCycleDiscounts/resources/assets/css/admin/notifications.css * @author Webstepper.io * @copyright 2025 Webstepper.io * @license GPL-3.0-or-later https://www.gnu.org/licenses/gpl-3.0.html * @link https://webstepper.io/wordpress/plugins/smart-cycle-discounts/ * @since 1.0.0 */ /* ========================================================================== ANIMATIONS ========================================================================== */ /* Note: @keyframes wsscd-slide-down and wsscd-slide-up defined in shared/_utilities.css */ /* ========================================================================== BASE NOTIFICATION CONTAINER ========================================================================== */ #wsscd-notifications-container { position: fixed; top: 50px; left: 0; right: 0; z-index: var(--wsscd-z-notification); /* WordPress-safe: below admin bar (99999) but above modals */ pointer-events: none; padding: 0 var(--wsscd-spacing-lg); } /* Admin bar adjustments */ body:not(.admin-bar) #wsscd-notifications-container { top: 40px; /* Non-admin-bar spacing */ } /* ========================================================================== BASE NOTIFICATION STYLES ========================================================================== */ .wsscd-notification { /* Layout */ position: relative; display: flex; align-items: flex-start; gap: var(--wsscd-spacing-md); /* Sizing */ margin: 0 auto var(--wsscd-spacing-md); max-width: 600px; width: 100%; padding: var(--wsscd-spacing-md) 3rem var(--wsscd-spacing-md) var(--wsscd-spacing-md); /* Clean white background */ background: var(--wsscd-color-white); /* Borders */ border: 1px solid var(--wsscd-color-border-light); border-left-width: 3px; border-left-color: var(--wsscd-color-info); border-radius: var(--wsscd-radius-md); /* Professional shadow */ box-shadow: 0 2px 8px var(--wsscd-overlay-border), 0 1px 4px var(--wsscd-overlay-faint); /* Typography */ font-size: var(--wsscd-font-size-base); line-height: var(--wsscd-line-height); /* Interaction */ pointer-events: auto; animation: wsscd-slide-down 0.3s ease-out; } /* ========================================================================== NOTIFICATION TYPES ========================================================================== */ .wsscd-notification--success { border-left-color: var(--wsscd-color-success); } .wsscd-notification--error { border-left-color: var(--wsscd-color-danger); } .wsscd-notification--warning { border-left-color: var(--wsscd-color-warning); } .wsscd-notification--info { border-left-color: var(--wsscd-color-info); } /* ========================================================================== NOTIFICATION COMPONENTS ========================================================================== */ /* Message content */ .wsscd-notification__message { flex: 1; margin: 0; color: var(--wsscd-color-text); font-weight: var(--wsscd-font-weight-normal); line-height: var(--wsscd-line-height); } /* Inline links within notifications */ .wsscd-notification__message .wsscd-notification-link { color: var(--wsscd-color-primary); text-decoration: underline; font-weight: var(--wsscd-font-weight-semibold); transition: color var(--wsscd-transition-fast) ease; } .wsscd-notification__message .wsscd-notification-link:hover { color: var(--wsscd-color-primary-dark); text-decoration: underline; } .wsscd-notification__message .wsscd-notification-link:focus { outline: 2px solid transparent; box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wsscd-color-primary); border-radius: var(--wsscd-radius-sm); } /* Close button */ .wsscd-notification__close { position: absolute; top: var(--wsscd-spacing-sm); right: var(--wsscd-spacing-sm); /* Reset button styles */ background: none; border: none; cursor: pointer; /* Size and alignment */ width: var(--wsscd-icon-large); height: var(--wsscd-icon-large); display: flex; align-items: center; justify-content: center; padding: var(--wsscd-spacing-xs); /* Typography */ font-size: var(--wsscd-font-size-xxl); line-height: 1; color: var(--wsscd-color-text-lighter); /* Appearance */ border-radius: var(--wsscd-radius-sm); transition: all var(--wsscd-transition-fast) ease; } .wsscd-notification__close:hover { color: var(--wsscd-color-text); background-color: var(--wsscd-overlay-faint); } .wsscd-notification__close:focus { outline: 2px solid transparent; box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wsscd-color-primary); } /* Auto-generated icons via pseudo-elements using CSS masks for theme color support */ .wsscd-notification::before { content: ''; display: inline-block; width: var(--wsscd-icon-medium); height: var(--wsscd-icon-medium); flex-shrink: 0; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .wsscd-notification--success::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-color: var(--wsscd-color-success); } .wsscd-notification--error::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z' clip-rule='evenodd'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-color: var(--wsscd-color-danger); } .wsscd-notification--warning::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z' clip-rule='evenodd'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-color: var(--wsscd-color-warning); } .wsscd-notification--info::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z' clip-rule='evenodd'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-color: var(--wsscd-color-primary); } /* Fade out animation */ .wsscd-notification--fade-out { animation: wsscd-slide-out-up 0.2s ease-out forwards; } /* Stacked notifications */ .wsscd-notification + .wsscd-notification { margin-top: calc(var(--wsscd-spacing-md) * -1); } /* ========================================================================== RESPONSIVE DESIGN ========================================================================== */ @media screen and (max-width: 782px) { .admin-bar #wsscd-notifications-container { top: 80px; /* Mobile admin bar height + spacing */ } #wsscd-notifications-container { padding: 0 var(--wsscd-spacing-md); } } /* ========================================================================== MEDIA QUERIES - ACCESSIBILITY & BROWSER SUPPORT ========================================================================== */ /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .wsscd-notification { animation: none; } .wsscd-notification--fade-out { animation: none; opacity: 0; } } /* High contrast mode support */ @media (prefers-contrast: high) { .wsscd-notification { border-width: 2px; border-style: solid; } .wsscd-notification--success { border-left-color: var(--wsscd-color-success); } .wsscd-notification--error { border-left-color: var(--wsscd-color-danger); } .wsscd-notification--warning { border-left-color: var(--wsscd-color-warning); } .wsscd-notification--info { border-left-color: var(--wsscd-color-info); } .wsscd-notification__close:focus { outline: 3px solid; outline-offset: 2px; } }