mess with colors
This commit is contained in:
parent
208f4da683
commit
f8afbff5d1
3 changed files with 27 additions and 5 deletions
2
brut.min.css
vendored
2
brut.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -1,4 +1,4 @@
|
||||||
.tb, .btn { text-decoration: none; display: inline-block; }
|
.tb, .btn { text-decoration: none; display: inline-block; text-align: center;}
|
||||||
.tb { font-weight: bold;
|
.tb { font-weight: bold;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 2px; }
|
padding: 2px; }
|
||||||
|
@ -9,6 +9,13 @@
|
||||||
.tb:hover::before,.tb:hover::after { opacity: 1; }
|
.tb:hover::before,.tb:hover::after { opacity: 1; }
|
||||||
.tb:active:before { content: "❰"; }
|
.tb:active:before { content: "❰"; }
|
||||||
.tb:active:after { content: "❱"; }
|
.tb:active:after { content: "❱"; }
|
||||||
|
.tb {
|
||||||
|
&.info { color: var(--fg); background: var(--bg2); }
|
||||||
|
&.ok { color: var(--fg); background: var(--nl); }
|
||||||
|
&.warn { background: var(--n0); color: var(--bg); }
|
||||||
|
&.err { background: var(--n2); color: var(--bg); }
|
||||||
|
&.fatal { background: var(--fg); color: var(--bg); }
|
||||||
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
background: var(--n0);
|
background: var(--n0);
|
||||||
|
@ -20,14 +27,28 @@
|
||||||
margin: 0 4px 4px 0;
|
margin: 0 4px 4px 0;
|
||||||
padding: 1rem 2rem;
|
padding: 1rem 2rem;
|
||||||
box-shadow: 4px 4px var(--shadow);
|
box-shadow: 4px 4px var(--shadow);
|
||||||
text-align: center;
|
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
&.info { color: var(--fg); background: var(--bg2); }
|
||||||
|
&.ok { color: var(--fg); background: var(--nl); }
|
||||||
|
&.warn { background: var(--n0); color: var(--bg); }
|
||||||
|
&.err { background: var(--n2); color: var(--bg); }
|
||||||
|
&.fatal { background: var(--fg); color: var(--bg); }
|
||||||
|
}
|
||||||
|
|
||||||
.btn:hover {
|
.btn:hover {
|
||||||
background: var(--n1);
|
background: var(--n1);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
.btn {
|
||||||
|
&.err, &.fatal {
|
||||||
|
&:hover,&:active,&:focus {
|
||||||
|
background: var(--fg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.btn:active,.btn:focus {
|
.btn:active,.btn:focus {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
@ -42,3 +63,4 @@
|
||||||
.btn.std { width: 12rem; }
|
.btn.std { width: 12rem; }
|
||||||
.btn.big.std { width: 20rem; }
|
.btn.big.std { width: 20rem; }
|
||||||
.btn.huge.std { width: 24rem; }
|
.btn.huge.std { width: 24rem; }
|
||||||
|
|
||||||
|
|
|
@ -46,8 +46,8 @@ ol {
|
||||||
ul > li::marker { font-size: 1.5rem; }
|
ul > li::marker { font-size: 1.5rem; }
|
||||||
|
|
||||||
.sm { font-size: 0.75rem; }
|
.sm { font-size: 0.75rem; }
|
||||||
.big { font-size: 2rem; line-height: 3rem;}
|
.big { font-size: 2rem; line-height: 3.5rem;}
|
||||||
.huge { font-size: 3rem; line-height: 4.5rem;}
|
.huge { font-size: 3rem; line-height: 5.5rem;}
|
||||||
/* highligh revert the colors */
|
/* highligh revert the colors */
|
||||||
.hl { background: var(--fg); color: var(--bg); }
|
.hl { background: var(--fg); color: var(--bg); }
|
||||||
/* doc are for long text to read */
|
/* doc are for long text to read */
|
||||||
|
|
Loading…
Reference in a new issue