.module-notification .container-fluid { padding-top: 50px; } .module-notification .container-fluid #message { margin-top: 16px; } #notifications > .no-notification { background-color: #ffffff; border-radius: 3px; padding: 2.5rem; color: #545454; border-bottom: 1px solid #cecece; } .notification_menu{ display: inline-block; user-select: none; } .notification_menu .dropdown-toggle::after{ display:none; } .notification_menu .dropdown-toggle{ position: relative; font-size: 20px; } .notification_menu .dropdown-menu { padding: 0; } .notification_menu .notification-item p { overflow-y: hidden; height: 20px; /*max-height: 80px;*/ } .btn .badge.notification-number{ padding: 4px 6px; position: absolute; right: -1px; height: 19px; top: 0; font-size: 10px; z-index: 1; } .btn .badge.notification-number.more-unreads { padding: 3px 4px; height: 17px; } .notification-template{ display: none; } ul.notifications { width: 100%; /*min-width: 500px; max-width: 800px; margin: auto;*/ padding: 0; } .notification_menu .dropdown-item.notification { text-align: center; padding: 1.5rem; opacity: 1; } .notification-item.pinned .btn-delete{ display:none; } ul.notifications > li.unread{ /*border-left: 5px solid #00a9ff;*/ color: #212529; opacity: 1; } .notification_menu .dropdown-item.notification-unread { opacity: 1; background-color: #95c8ff0d; position: relative; } .dropdown-item.notification-unread:before { content: ""; position: absolute; height: 100%; width: 3px; left: 0px; top: calc((100% - 100%) / 2); /*border-left: 3px solid #00a9ff;*/ border-radius: 5px; transform: rotate(-180deg); } .dropdown-item.notification-unread:hover { background-color: #95c8ff2e; } ul.notifications > li{ position: relative; padding: 15px; padding-right: 20%; border-bottom: 1px solid #ebebeb; list-style-type: none; border-radius: 3px; background-color: #ffffff; margin-top: 10px; margin-bottom: 10px; opacity: 0.5; color: #a7a7a7; transition: all 0.2s ease-in-out; } .notification-options { position: absolute; right: 10px; text-align: right; top: 10px; height: 80%; width: 20%; } .notification-options > small { position: absolute; bottom: 0; width: 100%; display: block; } .notification_menu .dropdown-toggle.animated i { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .notification_menu .dropdown-item { cursor: pointer; height: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; transition: background-color 0.1s ease-out; padding: .8rem; padding-right: 5rem; font-size: 0.9em; opacity: 0.5; } .notification_menu .dropdown-item > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notification_menu .dropdown-item p { margin: 0; } .notification_menu .dropdown-divider { margin: 0; border-top: 1px solid #dadada; } .notification_menu .dropdown-item.active, .notification_menu .dropdown-item:active { color: #212529; background-color: #007bff1f; } .notification_menu .all-as-read, .notification_menu .see-all-link { padding: 0.25rem; height: 25px; text-align: center; color: #0077b3; font-size: 0.7em; opacity: 1; } .notification_menu .all-as-read { text-align: right; } .notification_menu .all-as-read:hover, .notification_menu .see-all-link:hover { text-decoration: underline; } .notification-item-options + small { position: absolute; right: 6px; top: 6px; color: #a5a5a5; } .notification-item-options{ /*position: absolute; right: 5px; top: 0;*/ position: absolute; right: 5px; bottom: 0; margin-bottom: 0; } .notification-item-options > li{ list-style-type: none; display: inline-block; padding: 5px 0.2rem; font-size: 14px; cursor: pointer; opacity: 0.5; color:#bebebe; transition:opacity 0.2s ease-in-out; } .notification-item-options > li:hover{ opacity:1; } .notification-item-options > li.notification-read:hover { color: #17a2b8; } .notification-item-options > li.notification-delete:hover { color: #dc3545; } .notification_menu .dropdown-menu { width: 400px; text-align: left; /*max-height: 60vh;*/ /*overflow: auto;*/ } .notification_menu .dropdown-menu.dropdown-menu-right:after { position: absolute; top: -6px; right: 15px; display: inline-block; border-right: 6px solid transparent; border-bottom: 6px solid #ffffff; border-left: 6px solid transparent; content: ''; } .notification_categories > .categories-items > .col-md-6 { padding: 5px 15px } .notification_categories .list-group-item.list-group-item-action { /*cursor: pointer;*/ } .categories-items > .col-md-6 > div { cursor: pointer; user-select: none; } .module-notification,.module-notification body{ min-height: 100%; height: 100%; background-color: #f4f4f4; margin-bottom: 0; } .module-notification .container-fluid{ height: 100%; background-color: #f4f4f4; } .module-notification .footer{ display: none; } .notifications-list{ height: 100%; display: flex; } .notification-summary{ background-color: #ffffff; padding:15px; width: 350px; box-shadow: 1px 0 3px rgba(0,0,0,0.1) } .notification-detail{ padding:15px; flex: 1; } /* modif A.C. */ .notifications-list .categories { font-size: 0.9em; user-select: none; } .notifications-list .categories, .notifications-list .items{ list-style: none; padding: 0px } .notifications-list .categoryLabel{ font-size: 1.1em; padding-left: 5px; } .notifications-list .categoryIcon{ vertical-align: top; font-size: 0.8rem; line-height: 1.8rem; cursor: pointer; transition: transform 0.1s ease-in-out; } .notifications-list .category.folded .categoryIcon{ transform: rotate(90deg); transform-origin: center; } .notifications-list .category.folded .items{ display: block; } .notifications-list .items{ display: none; padding-left: 10px; } .notifications-list .item{ margin-bottom: 4px; padding-left: 10px; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } /* .notifications-list { margin-bottom: 60px; } .notifications-list h3 { margin-bottom: 15px; } .notifications-list .sidebar { user-select: none; position: fixed; padding: 15px; padding-bottom: 10px; width: 360px; height: 100%; z-index: 1; border-right: 1px solid #f5f5f5; background: #f5f5f5; } .notifications-list .sidebar .summary { font-size: 1.05em; } .notifications-list .summary > div { margin: auto; } .notifications-list .summary > div > i, .notifications-list .summary > div > .badge { margin: auto 0; } .notifications-list .sidebar .summary:hover i { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .notifications-list .sidebar .summary:hover { transition: all 0.15s ease-in-out; } .notifications-list ul.notification-listing { padding-left: 20px; } .notifications-list ul.notification-listing li { list-style: none; } .notifications-list ul.sub-categories.collapsing { transition-duration: 0.15s; } .notifications-list ul.sub-categories li { padding: 0.25rem 1.25rem; padding-left: 2rem; } .notifications-list ul.sub-categories span.label { font-size: 0.9em; } */ .notificationType{ list-style: none; padding: 0px; } .notificationType > li{ display: inline-block; margin-right: 1rem; } @media (max-width: 767px){ #loginHeader #dropdownNotification { text-align: center; } div.notification_menu.dropdown { position: unset; } .notification_menu .dropdown-menu.dropdown-menu-right:after { right: 74px; } .notification_menu .dropdown-menu { width: 100% !important; } .btn .badge.notification-number { right: 50% !important; } .notifications-list .sidebar { position: initial; } ul.notifications { min-width: 0; } }