User:TheRafaMarc15/common.css

/*** "Snackbar" design for notifications. ***/ /**** Layout. ****/ .postedit-container, .wds-banner-notification__container { align-items: center; bottom: 32px; cursor: pointer; display: flex; font-size: initial; /*height: 48px;*/ justify-content: flex-start; left: 72px; margin: 8px; max-width: 672px; pointer-events: none; position: fixed; right: 0; top: unset; z-index: 5000; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

/**** Inner layout. ****/ .postedit-container .postedit, .wds-banner-notification { align-items: center; background-color: var(--theme-link-dynamic-color-2); border: 0; border-radius: 4px; box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12); color: var(--theme-text-primary-on-background); display: flex; left: unset; margin: 0; max-width: 672px; opacity: 1; padding: 0; position: relative; top: unset; transform: none; transition: opacity 150ms cubic-bezier(.4, 0, .2, 1); }

/**** Exclusive to notifications. ****/ /***** Removes the 'check' icon at the start of the notificaiton. *****/ .wds-banner-notification__icon { display: none; }

/***** Close button styling. *****/ .wds-banner-notification__close { border: 0; margin-inline-end: 8px; pointer-events: initial; }

/**** Exclusive 'Saved edit' notification styling. ****/ /***** Adds 'ripple' effect element. *****/ .postedit-container .postedit::before { background-color: var(--theme-text-on-background); border-radius: 50%; content: ''; height: 36px; opacity: 0; right: 9px; position: absolute; top: 6px; transition: opacity 75ms linear; width: 36px; }

/****** Adds 'ripple' interactivity effect on hover and focus/active. ******/ .postedit-container .postedit:hover::before { opacity: .08; }

.postedit-container .postedit:is(:focus, :active)::before { opacity: .24; }

/***** Adds and pseudo 'close' button element. *****/ .postedit-container .postedit::after { background: none; border-radius: 50%; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18px' viewBox='0 0 24 24' width='18px' fill='%23fff'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E"); cursor: pointer; display: flex; margin: 0 8px; opacity: 1; padding: 8px; pointer-events: initial; height: 36px; width: 36px; position: relative; right: 0; top: 1px; }

/***** Removes checkmark icon. *****/ .postedit-icon-checkmark { background-image: none; }

.postedit-icon { padding: 0; line-height: 1; }

/***** Text styles. *****/ .postedit-content, .wds-banner-notification__text { border: 0; font: 400 .875rem/1.25rem var(--theme-font-2); letter-spacing: .0178571429em; flex-grow: 1; line-height: 20px; padding: 14px 16px; }