mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-25 09:46:07 +08:00
fc43bc834a
Summary: This diff takes out the progress bars, since they can appear to not move for very large mailboxes. Instead, just show an icon that indicates whether the sync is complete or in progress, and add a tooltip that displays how far back the folder has been synced to. Submodule commit is D3662 Test Plan: tested locally Reviewers: evan, juan Reviewed By: evan, juan Differential Revision: https://phab.nylas.com/D3663
269 lines
5.9 KiB
Plaintext
269 lines
5.9 KiB
Plaintext
@import "ui-variables";
|
|
@import "ui-mixins";
|
|
|
|
.sidebar-activity-transition-wrapper {
|
|
order: 2;
|
|
z-index: 2;
|
|
overflow-y: auto;
|
|
|
|
&.sidebar-activity-empty {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.sidebar-activity {
|
|
display: block;
|
|
width: 100%;
|
|
bottom: 0;
|
|
background: @background-off-primary;
|
|
font-size: @font-size-small;
|
|
color: @text-color-subtle;
|
|
line-height:@line-height-computed * 0.95;
|
|
box-shadow:inset 0 1px 0 @border-color-divider;
|
|
&:hover { cursor: default }
|
|
|
|
.item {
|
|
border-bottom:1px solid @border-color-divider;
|
|
&:hover { cursor: default }
|
|
|
|
.syncing {
|
|
padding: @padding-large-vertical @padding-base-horizontal @padding-large-vertical @padding-base-horizontal;
|
|
}
|
|
.syncing::after {
|
|
content: '...';
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
overflow: hidden;
|
|
animation: expand-ellipsis 3s infinite;
|
|
}
|
|
.count {
|
|
color: @text-color-very-subtle;
|
|
float:right;
|
|
}
|
|
.btn {
|
|
display:block;
|
|
text-align:center;
|
|
margin-top:4px;
|
|
margin-bottom:4px;
|
|
font-size: @font-size-small;
|
|
}
|
|
// TODO: Necessary for Chromium 42 to render `activity-opacity-leave` animation
|
|
// properly. Removing position relative causes the div to remain visible
|
|
position:relative;
|
|
opacity: 1;
|
|
|
|
.account-detail-area {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.2s;
|
|
}
|
|
&.expanded-sync {
|
|
.account {
|
|
padding: @padding-base-vertical @padding-base-horizontal @padding-large-vertical*1.5 @padding-base-horizontal;
|
|
border-bottom: 1px solid rgba(0,0,0,0.1);
|
|
|
|
.model-progress::before {
|
|
height: 10px;
|
|
width: 10px;
|
|
background-color: #00dd00;
|
|
content: '';
|
|
display: inline-block;
|
|
border-radius: 5px;
|
|
margin-right: 5px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.model-progress.busy::before {
|
|
background-color: transparent;
|
|
border: solid 2px #00dd00;
|
|
animation: border-pulse 3s infinite;
|
|
}
|
|
|
|
.model-progress {
|
|
font-size: @font-size-base;
|
|
margin: 3px;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
|
|
.progress-label {
|
|
color: @text-color-very-subtle;
|
|
margin-left: 2px;
|
|
font-size: @font-size-smaller;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
h2 {
|
|
font-size: 14px;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-weight: 500;
|
|
margin-bottom: @padding-large-vertical;
|
|
}
|
|
h3 {
|
|
font-size: 14px;
|
|
margin: 10px 0 4px 0;
|
|
}
|
|
.amount {
|
|
margin-top: 2px;
|
|
font-size: 12px;
|
|
color: @text-color-subtle;
|
|
}
|
|
.close-expanded {
|
|
display: block;
|
|
text-align: right;
|
|
border-top: 1px solid rgba(0,0,0,0.1);
|
|
padding: @padding-large-vertical @padding-base-horizontal 0 @padding-base-horizontal;
|
|
}
|
|
}
|
|
|
|
transition: height 0.4s;
|
|
transition-delay: 2s;
|
|
&.sidebar-activity-error {
|
|
.progress {
|
|
background-color: @color-error;
|
|
}
|
|
}
|
|
}
|
|
|
|
.activity-opacity-enter {
|
|
opacity:0;
|
|
transition: opacity .125s ease-out;
|
|
}
|
|
|
|
.activity-opacity-enter.activity-opacity-enter-active {
|
|
opacity:1;
|
|
}
|
|
|
|
.activity-opacity-leave {
|
|
opacity:1;
|
|
transition: opacity .125s ease-in;
|
|
transition-delay: 0.5s;
|
|
}
|
|
|
|
.activity-opacity-leave.activity-opacity-leave-active {
|
|
transition-delay: 0.5s;
|
|
opacity:0;
|
|
}
|
|
|
|
.notifications-sticky {
|
|
width:100%;
|
|
|
|
.notification-info {
|
|
background-color: @background-color-info;
|
|
}
|
|
.notification-developer {
|
|
background-color: #615396;
|
|
}
|
|
.notification-upgrade {
|
|
background-image: -webkit-linear-gradient(bottom, #429E91, #40b1ac);
|
|
img { background-color: @text-color-inverse; }
|
|
}
|
|
.notification-error {
|
|
background: linear-gradient(to top, darken(@background-color-error, 4%) 0%, @background-color-error 100%);
|
|
border-color: @background-color-error;
|
|
color: @color-error;
|
|
}
|
|
.notification-offline {
|
|
background: linear-gradient(to top, darken(#CC9900, 4%) 0%, #CC9900 100%);
|
|
border-color: darken(#CC9900, 5%);
|
|
}
|
|
|
|
.notifications-sticky-item {
|
|
display:flex;
|
|
font-size: @font-size-base;
|
|
color: @text-color-inverse;
|
|
border-bottom:1px solid rgba(0,0,0,0.25);
|
|
padding-left: @padding-base-horizontal;
|
|
line-height: @line-height-base * 1.5;
|
|
align-items: baseline;
|
|
a {
|
|
flex-shrink: 0;
|
|
color:@text-color-inverse;
|
|
padding: 0 @padding-base-horizontal;
|
|
}
|
|
a:hover {
|
|
background-color: rgba(255,255,255,0.15);
|
|
text-decoration:none;
|
|
color:@text-color-inverse;
|
|
}
|
|
a.default {
|
|
background-color: rgba(0,0,0,0.15);
|
|
}
|
|
a.default:hover {
|
|
background-color: rgba(255,255,255,0.15);
|
|
}
|
|
i {
|
|
margin-right:@padding-base-horizontal;
|
|
}
|
|
.icon {
|
|
display: inline-block;
|
|
align-self: center;
|
|
line-height: 16px;
|
|
margin-right:@padding-base-horizontal;
|
|
|
|
img {
|
|
vertical-align: initial;
|
|
}
|
|
}
|
|
|
|
div.message {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
line-height: @line-height-base * 1.1;
|
|
padding: @padding-small-vertical 0;
|
|
}
|
|
|
|
&.has-default-action:hover {
|
|
-webkit-filter: brightness(110%);
|
|
cursor:default;
|
|
}
|
|
}
|
|
}
|
|
|
|
.blink {
|
|
animation: blink 1s ease;
|
|
}
|
|
|
|
@-webkit-keyframes blink {
|
|
0%, 100%{
|
|
box-shadow: none;
|
|
}
|
|
50% {
|
|
box-shadow: 5px 5px 1px rgba(37, 143, 225, 1) inset,
|
|
-5px -5px 1px rgba(37, 143, 225, 1) inset;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes border-pulse {
|
|
0%, 100%{
|
|
border-color: #00dd00;
|
|
}
|
|
50% {
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes expand-ellipsis {
|
|
from {width: 0;}
|
|
to {width: 10px;}
|
|
}
|
|
|
|
// Windows Changes
|
|
|
|
body.platform-win32 {
|
|
.notifications-sticky {
|
|
.notifications-sticky-item {
|
|
a {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|