style: change notification style to only have colours on the edge (#28389)

This commit is contained in:
Frédéric Péters 2018-11-27 14:07:15 +01:00
parent aec563c4ca
commit 96b20b4478
1 changed files with 10 additions and 45 deletions

View File

@ -285,37 +285,6 @@ ul.messages {
li {
font-size: 110%;
background: #fafafa;
margin: 1ex 0;
padding: 1ex;
padding-left: 25px;
border: 1px solid transparent;
&:before {
position: absolute;
left: 0;
width: 25px;
display: inline-block;
text-align: center;
font-family: FontAwesome;
color: white;
}
color: white;
&.success {
&:before { content: "\f058"; } /* check-circle */
background: linear-gradient(to right, darken(adjust-hue(#f64474, 120deg), 20%), darken(adjust-hue(#f4635e, 120deg), 20%));
}
&.info {
&:before { content: "\f05a"; } /* info-circle */
background: linear-gradient(to right, adjust-hue(#f64474, 220deg), adjust-hue(#f4635e, 220deg));
}
&.warning {
&:before { content: "\f071"; } /* exclamation-triangle */
background: linear-gradient(to right, darken(adjust-hue(#f64474, 45deg), 10%), darken(adjust-hue(#f4635e, 45deg), 10%));
}
&.error {
&:before { content: "\f06a"; } /* exclamation-circle */
background: linear-gradient(to right, #f64474, #f4635e);
}
.close {
float: right;
cursor: pointer;
@ -326,6 +295,7 @@ ul.messages {
}
}
ul.messages li,
div.infonotice,
div.successnotice,
div.warningnotice,
@ -350,37 +320,32 @@ div.errornotice {
font-family: FontAwesome;
color: white;
}
&.success,
&.successnotice {
&:before { content: "\f058"; } // check-circle
border-color: #00b000;
border-image: linear-gradient(#27eb00, #78ff31) 27;
border-image: linear-gradient(#27eb00, lighten(#27eb00, 10%)) 2;
}
&.info,
&.infonotice {
&:before { content: "\f05a"; } // info-circle
border-color: #0000b0;
border-image: linear-gradient(#386ede, #00d6eb) 27;
border-image: linear-gradient(#4474f6, lighten(#4474f6, 10%)) 2;
}
&.warning,
&.warningnotice {
&:before { content: "\f06a"; } //exclamation-circle
border-color: #ffb000;
border-image: linear-gradient(#ff7831, #ebd600) 27;
border-image: linear-gradient(#f47f13, lighten(#f47f13, 15%)) 2;
}
&.error,
&.errornotice {
&:before { content: "\f071"; } // exclamation-triangle
background: linear-gradient(to right, #f64474, #f4635e);
color: white;
border-color: #f64474;
border-image: linear-gradient(#f64474, lighten(#f64474, 5%)) 2;
}
}
div.workflow-messages > div.errornotice {
// slightly different style for error notices in workflow messages as
// the messages can be longer.
background: white;
border-color: #f4635e;
border-image: linear-gradient(#f64474, #f4635e) 27;
color: inherit;
}
/* main content */
#main {