mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
added a notifications service
This commit is contained in:
Luke Pulverenti
parent
95a8a246b9
commit
cfb3392c35
8 changed files with 411 additions and 4 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 2.9 KiB |
160
dashboard-ui/css/notifications.css
Normal file
160
dashboard-ui/css/notifications.css
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
.btnNotifications {
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
padding: 8px 12px;
|
||||
text-align: center;
|
||||
text-decoration: none !important;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
background-color: #f5f5f5;
|
||||
background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1));
|
||||
background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
|
||||
background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1);
|
||||
background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1);
|
||||
background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1);
|
||||
background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
|
||||
border: 1px solid #dcdcdc;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.levelNormal {
|
||||
background-color: #4d90fe;
|
||||
background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));
|
||||
background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
|
||||
background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
|
||||
background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
|
||||
background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
|
||||
background-image: linear-gradient(top,#4d90fe,#4787ed);
|
||||
border-color: #3079ed;
|
||||
color: #fff!important;
|
||||
}
|
||||
|
||||
.levelWarning {
|
||||
background-color: #FF7537;
|
||||
background-image: none;
|
||||
border-color: #FF7537;
|
||||
color: #fff!important;
|
||||
}
|
||||
|
||||
.levelError {
|
||||
background-color: #d14836;
|
||||
background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39),to(#d14836));
|
||||
background-image: -webkit-linear-gradient(top,#dd4b39,#d14836);
|
||||
background-image: -moz-linear-gradient(top,#dd4b39,#d14836);
|
||||
background-image: -ms-linear-gradient(top,#dd4b39,#d14836);
|
||||
background-image: -o-linear-gradient(top,#dd4b39,#d14836);
|
||||
background-image: linear-gradient(top,#dd4b39,#d14836);
|
||||
border-color: #c6322a;
|
||||
color: #fff!important;
|
||||
}
|
||||
|
||||
.flyoutNotification {
|
||||
border-top: 1px solid #ccc;
|
||||
background: #f8f8f8;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.flyoutNotification p {
|
||||
margin: .7em 0;
|
||||
}
|
||||
|
||||
.notificationsFlyout {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.notificationName {
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.notificationImage {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.unreadFlyoutNotification {
|
||||
background-color: #ECEEF4;
|
||||
}
|
||||
|
||||
.btnMarkReadContainer {
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
.imgNotification, .imgNotificationInner {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.imgNotificationInner {
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.imgNotificationIcon {
|
||||
background-size: 50% auto;
|
||||
}
|
||||
|
||||
|
||||
.imgNotificationNormal {
|
||||
background-color: #4d90fe;
|
||||
background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));
|
||||
background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
|
||||
background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
|
||||
background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
|
||||
background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
|
||||
background-image: linear-gradient(top,#4d90fe,#4787ed);
|
||||
}
|
||||
|
||||
.imgNotificationNormal .imgNotificationInner {
|
||||
background-image: url(images/notifications/info.png);
|
||||
}
|
||||
|
||||
.imgNotificationError {
|
||||
background-color: #d14836;
|
||||
background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39),to(#d14836));
|
||||
background-image: -webkit-linear-gradient(top,#dd4b39,#d14836);
|
||||
background-image: -moz-linear-gradient(top,#dd4b39,#d14836);
|
||||
background-image: -ms-linear-gradient(top,#dd4b39,#d14836);
|
||||
background-image: -o-linear-gradient(top,#dd4b39,#d14836);
|
||||
background-image: linear-gradient(top,#dd4b39,#d14836);
|
||||
}
|
||||
|
||||
.imgNotificationError .imgNotificationInner {
|
||||
background-image: url(images/notifications/error.png);
|
||||
}
|
||||
|
||||
.imgNotificationWarning {
|
||||
background-color: #FF7537;
|
||||
}
|
||||
|
||||
.imgNotificationWarning .imgNotificationInner {
|
||||
background-image: url(images/notifications/error.png);
|
||||
}
|
||||
|
||||
@media all and (min-width: 500px) {
|
||||
.notificationsFlyout {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 600px) {
|
||||
.notificationsFlyout {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
|
||||
.notificationImage {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 0 1em;
|
||||
padding: .7em 0;
|
||||
}
|
||||
|
||||
.notificationContent {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
|
@ -35,7 +35,6 @@
|
|||
text-decoration: none !important;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.txtSearch, .btnSearch {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue