V2 styling for system messages.

This commit is contained in:
Paulo Reis 2018-03-28 14:46:07 +01:00
parent 525deabc2b
commit 8d2db3b31e
4 changed files with 36 additions and 11 deletions

View file

@ -1,8 +1,14 @@
.system-message { .system-message {
padding: (@line-height-computed / 4) (@line-height-computed / 2); padding: (@line-height-computed / 4) (@line-height-computed / 2);
background-color: @state-warning-bg; background-color: @sys-msg-background;
color: #333; color: @sys-msg-color;
border-bottom: 1px solid @common-border-color; border-bottom: @sys-msg-border;
}
.system-message .close when (@is-overleaf = true) {
color: #FFF;
opacity: 1;
text-shadow: none;
} }
.clickable { .clickable {

View file

@ -1,14 +1,23 @@
.translations-message { .translations-message {
padding: (@line-height-computed / 4) (@line-height-computed / 2); .system-message;
background-color: @state-warning-bg;
color: #333;
border-bottom: 1px solid @common-border-color;
text-align:center; text-align:center;
img { img {
vertical-align: text-bottom; vertical-align: text-bottom;
margin-bottom: -1px; margin-bottom: -1px;
} }
}
.translations-message when (@is-overleaf = true) {
.close {
color: #FFF;
opacity: 1;
text-shadow: none;
}
a {
color: #FFF;
&:hover,
&:focus {
color: #FFF;
}
}
} }

View file

@ -960,3 +960,8 @@
@tag-bg-hover-color : darken(@label-default-bg, 10%); @tag-bg-hover-color : darken(@label-default-bg, 10%);
@tag-top-adjustment : -2px; @tag-top-adjustment : -2px;
@labels-font-size : 75%; @labels-font-size : 75%;
// System messages
@sys-msg-background : @state-warning-bg;
@sys-msg-color : #333;
@sys-msg-border : 1px solid @common-border-color;

View file

@ -256,6 +256,11 @@
@log-line-no-color : #FFF; @log-line-no-color : #FFF;
@log-hints-color : @ol-blue-gray-4; @log-hints-color : @ol-blue-gray-4;
// System messages
@sys-msg-background : @ol-blue;
@sys-msg-color : #FFF;
@sys-msg-border : solid 1px lighten(@ol-blue, 10%);
//== Colors //== Colors
// //
//## Gray and brand colors for use across Bootstrap. //## Gray and brand colors for use across Bootstrap.