Colors improvements
This commit is contained in:
parent
564c76c38a
commit
a1029b0ec4
7 changed files with 115 additions and 27 deletions
2
brut.min.css
vendored
2
brut.min.css
vendored
File diff suppressed because one or more lines are too long
42
h/docs.html
42
h/docs.html
|
@ -55,12 +55,15 @@
|
|||
<a class="tb ok">tb ok</a>
|
||||
<a class="tb warn">tb warn</a>
|
||||
<a class="tb err">tb err</a>
|
||||
<a class="tb fatal">tb fatal</a>
|
||||
|
||||
<h3>Sizes</h3>
|
||||
<a class="tb sm">tb sm</a>
|
||||
<a class="tb info">tb</a>
|
||||
<a class="tb sm info">tb sm</a>
|
||||
<a class="tb ok">tb</a>
|
||||
<a class="tb big warn">tb big</a>
|
||||
<a class="tb huge err">tb huge</a>
|
||||
<a class="tb huge fatal">tb huge</a>
|
||||
|
||||
<h2>Classic</h2>
|
||||
<a class="btn">btn</a>
|
||||
|
@ -68,6 +71,7 @@
|
|||
<a class="btn ok">btn ok</a>
|
||||
<a class="btn warn">btn warn</a>
|
||||
<a class="btn err">btn err</a>
|
||||
<a class="btn fatal">btn fatal</a>
|
||||
|
||||
<pre class="block"><a class="btn btn-b">btn-b</a></pre>
|
||||
|
||||
|
@ -89,6 +93,7 @@
|
|||
<a class="btn std ok">btn std ok</a>
|
||||
<a class="btn std warn">btn std warn</a>
|
||||
<a class="btn std err">btn std err</a>
|
||||
<a class="btn std fatal">btn std fatal</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -143,21 +148,38 @@
|
|||
<strong><i class="ico">☒</i> Error</strong>
|
||||
This is done by adding <code>err</code> to the class.
|
||||
</div>
|
||||
<div class="msg fatal">
|
||||
<strong><i class="ico">☒</i> Fatal</strong>
|
||||
This is done by adding <code>fatal</code> to the class.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col c6">
|
||||
<h2>Strong Alerts</h2>
|
||||
<div class="msg attention">
|
||||
<strong>Attention</strong>
|
||||
This is done by adding <code>attention</code> to the class.
|
||||
|
||||
<div class="msg alert">
|
||||
<strong>Alert Message</strong>
|
||||
This is a normal message with <code>msg</code>.
|
||||
</div>
|
||||
<div class="msg fatal">
|
||||
<strong><i class="ico">☣</i> Fatal</strong>
|
||||
<div class="msg alert info">
|
||||
<strong><i class="ico">☞</i>Alert Info</strong>
|
||||
This is done by adding <code>info</code> to the class.
|
||||
</div>
|
||||
<div class="msg alert ok">
|
||||
<strong><i class="ico">☑</i>Alert OK</strong>
|
||||
This is done by adding <code>ok</code> to the class.
|
||||
</div>
|
||||
<div class="msg alert warn">
|
||||
<strong><i class="ico">☣</i>Alert Warning</strong>
|
||||
This is done by adding <code>warn</code> to the class.
|
||||
</div>
|
||||
<div class="msg alert err">
|
||||
<strong><i class="ico">☒</i>Alert Error</strong>
|
||||
This is done by adding <code>err</code> to the class.
|
||||
</div>
|
||||
<div class="msg alert fatal">
|
||||
<strong><i class="ico">☒</i>Alert Fatal</strong>
|
||||
This is done by adding <code>fatal</code> to the class.
|
||||
</div>
|
||||
<div class="msg black">
|
||||
<strong>Black</strong>
|
||||
This is done by adding <code>black</code> to the class.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre><div class="msg">
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
</nav>
|
||||
<button class="btn sm btn-close">×</button>
|
||||
<div class="central" style="background-image:url('img/brutalisme.jpg')">
|
||||
<a class="btn info huge" href="../brut.min.css">Download BRUT</a>
|
||||
<a class="btn warn huge" href="../brut.min.css">Download BRUT</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -1,10 +1,11 @@
|
|||
.tb { font-weight: bold;
|
||||
cursor: pointer;
|
||||
padding: 2px; }
|
||||
.tb:before,.tb:after { opacity: 0.3; }
|
||||
.tb:before,.tb:after { opacity: 0.3; display: inline-block;}
|
||||
.tb:before { content: "〈"; }
|
||||
.tb:after { content: "〉"; }
|
||||
.tb:hover:before,.tb:hover:after { opacity: 1; }
|
||||
.tb:hover { text-decoration: underline; }
|
||||
.tb:hover::before,.tb:hover::after { opacity: 1; }
|
||||
.tb:active:before { content: "《"; }
|
||||
.tb:active:after { content: "》"; }
|
||||
|
||||
|
@ -24,6 +25,10 @@
|
|||
&:hover { color: var(--ce1); }
|
||||
&:active { color: var(--ce2); }
|
||||
}
|
||||
.tb.fatal { color: var(--cf0);
|
||||
&:hover { color: var(--cf1); }
|
||||
&:active { color: var(--cf2); }
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: var(--cn0);
|
||||
|
@ -92,6 +97,15 @@
|
|||
background: var(--ce2);
|
||||
}
|
||||
}
|
||||
.btn.fatal {
|
||||
background: var(--cf0);
|
||||
&:hover {
|
||||
background: var(--cf1);
|
||||
}
|
||||
&:active, &:focus {
|
||||
background: var(--cf2);
|
||||
}
|
||||
}
|
||||
|
||||
.btn.sm { padding: 0.5rem 1rem; }
|
||||
.btn.std { width: 12rem; }
|
||||
|
|
|
@ -3,12 +3,14 @@
|
|||
@ok: #494;
|
||||
@warn: #c90;
|
||||
@err: #d33;
|
||||
@fatal: #a3d;
|
||||
|
||||
@dark-neutral: darken(@neutral,10%);
|
||||
@dark-info: darken(@info,10%) ;
|
||||
@dark-ok: darken(@ok,10%);
|
||||
@dark-warn: darken(@warn,10%);
|
||||
@dark-err: darken(@err,10%);
|
||||
@dark-fatal: darken(@fatal,10%);
|
||||
|
||||
:root {
|
||||
--bg: #fff;
|
||||
|
@ -41,7 +43,29 @@
|
|||
--ce1: darken(@err,5%);
|
||||
--ce2: darken(@err,10%);
|
||||
|
||||
--cf-1: saturate(lighten(@fatal,25%),20%);
|
||||
--cf0: @fatal;
|
||||
--cf1: darken(@fatal,5%);
|
||||
--cf2: darken(@fatal,10%);
|
||||
|
||||
--shadow: rgba(0,0,0,0.75);
|
||||
|
||||
|
||||
/* alert messages */
|
||||
|
||||
--cnt: #fff;
|
||||
--cna: #333;
|
||||
--cnab: #000;
|
||||
--cia: saturate(darken(@info,10%),25%);
|
||||
--ciab: saturate(darken(@info,0%),35%);
|
||||
--coa: saturate(darken(@ok,10%),25%);
|
||||
--coab: saturate(darken(@ok,0%),35%);
|
||||
--cwa: saturate(darken(@warn,10%),25%);
|
||||
--cwab: saturate(darken(@warn,0%),35%);
|
||||
--cea: saturate(darken(@err,10%),25%);
|
||||
--ceab: saturate(darken(@err,0%),35%);
|
||||
--cfa: saturate(darken(@fatal,10%),25%);
|
||||
--cfab: saturate(darken(@fatal,0%),35%);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
@ -76,7 +100,16 @@
|
|||
--ce1: lighten(@dark-err,5%);
|
||||
--ce2: saturate(lighten(@dark-err,10%),10%);
|
||||
|
||||
--cf-1: darken(@dark-fatal,10%);
|
||||
--cf0: @dark-fatal;
|
||||
--cf1: lighten(@dark-fatal,5%);
|
||||
--cf2: saturate(lighten(@dark-fatal,10%),10%);
|
||||
|
||||
--shadow: rgba(128,128,128,0.3);
|
||||
|
||||
--cnt: #000;
|
||||
--cna: #eee;
|
||||
--cnab: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -15,7 +15,7 @@ body, textarea, input, select {
|
|||
font-size: 10px;
|
||||
}
|
||||
|
||||
.btn, .nav a {
|
||||
.tb, .btn, .nav a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
|
@ -23,20 +23,39 @@
|
|||
background: var(--ce-1);
|
||||
border-color: var(--ce0);
|
||||
}
|
||||
|
||||
.msg.black, .msg.black * {
|
||||
background: #333;
|
||||
border-color: #000;
|
||||
color: #fff;
|
||||
.msg.fatal {
|
||||
color: var(--fg);
|
||||
background: var(--cf-1);
|
||||
border-color: var(--cf0);
|
||||
}
|
||||
|
||||
.msg.attention, .msg.attention * {
|
||||
background: #b74fde;
|
||||
border-color: #9311bb;
|
||||
color: #fff;
|
||||
.msg.alert, .msg.alert * {
|
||||
color: var(--cnt);
|
||||
background: var(--cna);
|
||||
border-color: var(--cnab);
|
||||
}
|
||||
.msg.fatal, .msg.fatal * {
|
||||
background: #df1023;
|
||||
border-color: #ba0000;
|
||||
.msg.alert.info, .msg.alert.info * {
|
||||
color: #fff;
|
||||
background: var(--cia);
|
||||
border-color: var(--ciab);
|
||||
}
|
||||
.msg.alert.ok, .msg.alert.ok * {
|
||||
color: #fff;
|
||||
background: var(--coa);
|
||||
border-color: var(--coab);
|
||||
}
|
||||
.msg.alert.warn, .msg.alert.warn * {
|
||||
color: #fff;
|
||||
background: var(--cwa);
|
||||
border-color: var(--cwab);
|
||||
}
|
||||
.msg.alert.err, .msg.alert.err * {
|
||||
color: #fff;
|
||||
background: var(--cea);
|
||||
border-color: var(--ceab);
|
||||
}
|
||||
.msg.alert.fatal, .msg.alert.fatal * {
|
||||
color: #fff;
|
||||
background: var(--cfa);
|
||||
border-color: var(--cfab);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue