style: change notification style to only have colours on the edge (#28389)
This commit is contained in:
parent
aec563c4ca
commit
96b20b4478
|
@ -285,37 +285,6 @@ ul.messages {
|
||||||
|
|
||||||
li {
|
li {
|
||||||
font-size: 110%;
|
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 {
|
.close {
|
||||||
float: right;
|
float: right;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -326,6 +295,7 @@ ul.messages {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ul.messages li,
|
||||||
div.infonotice,
|
div.infonotice,
|
||||||
div.successnotice,
|
div.successnotice,
|
||||||
div.warningnotice,
|
div.warningnotice,
|
||||||
|
@ -350,37 +320,32 @@ div.errornotice {
|
||||||
font-family: FontAwesome;
|
font-family: FontAwesome;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
&.success,
|
||||||
&.successnotice {
|
&.successnotice {
|
||||||
&:before { content: "\f058"; } // check-circle
|
&:before { content: "\f058"; } // check-circle
|
||||||
border-color: #00b000;
|
border-color: #00b000;
|
||||||
border-image: linear-gradient(#27eb00, #78ff31) 27;
|
border-image: linear-gradient(#27eb00, lighten(#27eb00, 10%)) 2;
|
||||||
}
|
}
|
||||||
|
&.info,
|
||||||
&.infonotice {
|
&.infonotice {
|
||||||
&:before { content: "\f05a"; } // info-circle
|
&:before { content: "\f05a"; } // info-circle
|
||||||
border-color: #0000b0;
|
border-color: #0000b0;
|
||||||
border-image: linear-gradient(#386ede, #00d6eb) 27;
|
border-image: linear-gradient(#4474f6, lighten(#4474f6, 10%)) 2;
|
||||||
}
|
}
|
||||||
|
&.warning,
|
||||||
&.warningnotice {
|
&.warningnotice {
|
||||||
&:before { content: "\f06a"; } //exclamation-circle
|
&:before { content: "\f06a"; } //exclamation-circle
|
||||||
border-color: #ffb000;
|
border-color: #ffb000;
|
||||||
border-image: linear-gradient(#ff7831, #ebd600) 27;
|
border-image: linear-gradient(#f47f13, lighten(#f47f13, 15%)) 2;
|
||||||
}
|
}
|
||||||
|
&.error,
|
||||||
&.errornotice {
|
&.errornotice {
|
||||||
&:before { content: "\f071"; } // exclamation-triangle
|
&:before { content: "\f071"; } // exclamation-triangle
|
||||||
background: linear-gradient(to right, #f64474, #f4635e);
|
border-color: #f64474;
|
||||||
color: white;
|
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 content */
|
||||||
|
|
||||||
#main {
|
#main {
|
||||||
|
|
Loading…
Reference in New Issue