Skip to content

Commit

Permalink
fix eclipse-theia#5656: Improved button performance when displaying m…
Browse files Browse the repository at this point in the history 
…ultiple lines of text

Signed-off-by: Brokun <brokun0128@gmail.com>
  • Loading branch information
@BroKun
BroKun committed Jul 8, 2019
1 parent f247b57 commit 7a53abe
Showing 1 changed file with 136 additions and 136 deletions.
272 changes: 136 additions & 136 deletions packages/messages/src/browser/style/notifications.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,188 +15,188 @@
********************************************************************************/

.theia-NotificationsContainer {
pointer-events: none;
z-index: 1000000;
position: fixed;
width: 100%;
display: flex;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
top: 0;
left: 0;
right: 0;
text-align: left;
position: fixed;
z-index: 1000000;
top: 0;
right: 0;
left: 0;
display: flex;
-webkit-align-items: center;
align-items: center;
flex-direction: column;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
text-align: left;
pointer-events: none;
}

.theia-Notification {
pointer-events: all;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: flex;
flex-direction: row;
-webkit-justify-content: center;
justify-content: center;
clear: both;
box-sizing: border-box;
position: relative;
width: 60%;
min-width: 500px;
background-color: var(--theia-ui-dialog-color);
box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.6);
min-height: 35px;
-webkit-animation: fadeInDown 0.5s ease both;
animation: fadeInDown 0.5s ease both;
margin-bottom: 1px;
color: var(--theia-ui-dialog-font-color);
position: relative;
display: flex;
clear: both;
flex-direction: row;
-webkit-justify-content: center;
justify-content: center;
box-sizing: border-box;
width: 60%;
min-width: 500px;
min-height: 35px;
margin-bottom: 1px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-animation: fadeInDown 0.5s ease both;
animation: fadeInDown 0.5s ease both;
pointer-events: all;
color: var(--theia-ui-dialog-font-color);
background-color: var(--theia-ui-dialog-color);
box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.6);
}

.theia-Notification .icon {
display: inline-block;
width: 35px;
order: 1;
padding: 10px 15px;
display: inline-block;
order: 1;
width: 35px;
padding: 10px 15px;
}

.theia-Notification .icon .fa {
line-height: inherit;
vertical-align: middle;
font-size: 120%;
color: var(--theia-accent-color2);
font-size: 120%;
line-height: inherit;
vertical-align: middle;
color: var(--theia-accent-color2);
}

.theia-Notification .icon .error {
color: var(--theia-error-color1);
color: var(--theia-error-color1);
}

.theia-Notification .icon .warning {
color: var(--theia-warn-color0);
color: var(--theia-warn-color0);
}

.theia-notification-progress {
order: 2;
width: 35px;
display: flex;
align-items: center;
justify-items: left;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
align-self: center;
height: 100%;
display: flex;
align-items: center;
align-self: center;
order: 2;
width: 35px;
height: 100%;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;

justify-items: left;
}

.theia-notification-progress > p {
margin: 0px;
font-size: var(--theia-ui-font-size1);
vertical-align: middle;
font-size: var(--theia-ui-font-size1);
margin: 0;
vertical-align: middle;
}

.theia-Notification .text {
order: 3;
display: flex;
align-items: center;
justify-items: left;
max-height: calc(100vh - 100px);
max-width: calc(100vw - 100px);
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
align-self: center;
flex: 1 100%;
height: 100%;
padding: 10px;
overflow: auto;
display: flex;
overflow: auto;
align-items: center;
align-self: center;
flex: 1 100%;
order: 3;
max-width: calc(100vw - 100px);
height: 100%;
max-height: calc(100vh - 100px);
padding: 10px;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;

justify-items: left;
}

.theia-Notification .text > p {
margin: 0px;
font-size: var(--theia-ui-font-size1);
vertical-align: middle;
font-size: var(--theia-ui-font-size1);
margin: 0;
vertical-align: middle;
}

.theia-Notification .buttons {
display: flex;
flex-direction: row;
order: 4;
white-space: nowrap;
align-self: flex-end;
height: 40px;
display: flex;
flex-direction: row;
order: 4;
white-space: nowrap;
}

.theia-Notification .buttons > button {
background-color: var(--theia-ui-button-color);
color: var(--theia-ui-button-font-color);
border: none;
border-radius: 0px;
text-align: center;
text-decoration: none;
display: inline-block;
padding: 0px 10px;
margin: 0px;
font-size: var(--theia-ui-font-size1);
outline: none;
cursor: pointer;
font-size: var(--theia-ui-font-size1);
display: inline-block;
margin: 0;
padding: 0 10px;
cursor: pointer;
text-align: center;
text-decoration: none;
color: var(--theia-ui-button-font-color);
border: none;
border-radius: 0;
outline: none;
background-color: var(--theia-ui-button-color);
}

.theia-Notification .buttons > button:hover {
background-color: var(--theia-accent-color1);
background-color: var(--theia-accent-color1);
}

@-moz-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
opacity: 0;
}
to {
-webkit-transform: none;
transform: none;
opacity: 1;
}
}

@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
opacity: 0;
}
to {
-webkit-transform: none;
transform: none;
opacity: 1;
}
}

@-o-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
opacity: 0;
}
to {
-webkit-transform: none;
transform: none;
opacity: 1;
}
}

@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
opacity: 0;
}
to {
-webkit-transform: none;
transform: none;
opacity: 1;
}
}

0 comments on commit 7a53abe

Please sign in to comment.