mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-11-14 13:44:41 +08:00
96 lines
1.9 KiB
Text
96 lines
1.9 KiB
Text
@import 'ui-variables';
|
|
|
|
.notifications {
|
|
background-color: @panel-background-color;
|
|
box-shadow: 0 -6px 4px @panel-background-color;
|
|
z-index: 2;
|
|
}
|
|
|
|
.notification {
|
|
background: @background-color-info;
|
|
display: none;
|
|
color: @text-color-inverse;
|
|
margin: 10px;
|
|
margin-top: 0;
|
|
border-radius: @border-radius-large;
|
|
}
|
|
|
|
.notification.error {
|
|
background: @background-color-error;
|
|
}
|
|
|
|
.notification.offline {
|
|
background: linear-gradient(to top, darken(#CC9900, 4%) 0%, #CC9900 100%);
|
|
}
|
|
|
|
.notification.highest-priority {
|
|
display: block;
|
|
}
|
|
|
|
.notif-top {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 10px;
|
|
}
|
|
|
|
.notification .icon {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.notification .title {
|
|
padding: 10px;
|
|
}
|
|
|
|
.notification .subtitle {
|
|
font-size: @font-size-smaller;
|
|
position: relative;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.notification .subtitle.has-action {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.notification .subtitle.has-action::after {
|
|
content:'';
|
|
background: url(nylas://notifications/assets/minichevron@2x.png) top left no-repeat;
|
|
background-size: 4.5px 7px;
|
|
margin-left:3px;
|
|
display: inline-block;
|
|
width:4.5px;
|
|
height:7px;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.notification .actions-wrapper {
|
|
display: flex;
|
|
}
|
|
|
|
.notification .action {
|
|
text-align: center;
|
|
flex: 1;
|
|
border-top: solid rgba(255, 255, 255, 0.5) 1px;
|
|
border-left: solid rgba(255, 255, 255, 0.5) 1px;
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
|
|
/* The semi-transparent backgrounds that can be layered on top
|
|
of this class shouldn't have sharp corners on the bottom */
|
|
border-bottom-left-radius: @border-radius-large;
|
|
border-bottom-right-radius: @border-radius-large;
|
|
}
|
|
|
|
.notification .action:first-child {
|
|
border-left: none;
|
|
}
|
|
|
|
.notification .action:hover {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
box-shadow: @standard-shadow inset;
|
|
}
|
|
|
|
.notification .action.loading {
|
|
cursor: progress;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
box-shadow: @standard-shadow inset;
|
|
}
|