openaire-library/notifications/notifications-sidebar/notification-sidebar.compon...

122 lines
2.7 KiB
CSS

#notifications-switcher {
top: 250px !important;
position: fixed;
height: 36px;
background-color: var(--portal-main-color);
color: var(--portal-main-contrast);
border-radius: 4px 0 0 4px;
cursor: pointer;
padding: 4px;
box-shadow: -2px 2px 5px rgba(0, 0, 0, .26);
box-sizing: border-box;
right: 0;
z-index: 980;
}
#notifications-switcher #notifications-count {
position: absolute;
top: 0;
left: 0;
font-size: 10px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 14px;
border-radius: 50%;
padding: 1px 5px;
}
#notifications .uk-offcanvas-bar {
background-color: white;
color: #1a1a1a;
font-size: 14px;
top: 100px;
padding: 0;
border: 1px solid var(--portal-main-color);
width: 550px;
}
#notifications .uk-offcanvas-flip .uk-offcanvas-bar {
right: -550px;
}
#notifications .uk-offcanvas-bar .text-small {
font-size: 12px;
}
#notifications .uk-offcanvas-bar h5, #notifications .uk-offcanvas-bar h6 {
color: #1a1a1a;
}
#notifications button.notification-close, #notifications button.notification-close:focus {
border-radius: 4px;
background-color: #F0F0F0;
color: #76706B;
border: none;
outline: none;
}
#notifications button.notification-close:hover, #notifications button.notification-close:focus {
color: #1a1a1a;
}
#notifications .notification-list {
padding: 45px 0 45px 45px;
}
#notifications .notification-list:not(:last-child) {
height: 440px;
border-bottom: 1px solid #E4E4E4;
}
#notifications .notification-list ul {
overflow: auto;
padding: 10px 45px 10px 0;
height: calc(100% - 66px);
}
#notifications .notification-list ul > li:nth-child(n+2){
margin-top: 15px;
}
#notifications .notify {
padding: 20px 45px;
}
#notifications .notification {
padding: 45px 45px;
overflow: auto;
}
#notifications .uk-offcanvas-bar a, #notifications .uk-offcanvas-bar button.uk-button-link {
color: var(--secondary-color);
}
#notifications .uk-offcanvas-bar a:hover, #notifications .uk-offcanvas-bar button.uk-button-link:hover {
color: var(--portal-main-color);
}
#notifications .uk-offcanvas-bar button.uk-button-link:disabled {
color: var(--secondary-color);
opacity: 0.5;
}
#notifications .uk-offcanvas-bar .uk-button-secondary {
background-color: var(--secondary-color);
color: #fff;
border: 1px solid transparent;
}
#notifications .uk-offcanvas-bar .uk-button-secondary:focus, #notifications .uk-offcanvas-bar .uk-button-secondary:hover {
background-color: transparent;
color: #4687e6;
border-color: #4687e6;
}
#notifications .uk-offcanvas-bar .uk-button-secondary:disabled {
background-color: transparent;
color: #bfbfbf;
border: 1px solid #ededed;
background-image: none;
box-shadow: none;
}