yogsototh/brutcss
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Colors improvements

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2022-09-28 17:26:11 +02:00
parent 564c76c38a
commit a1029b0ec4
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646
7 changed files with 115 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
brut.min.css vendored
View file

File diff suppressed because one or more lines are too long

42
h/docs.html
View file

@ -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">&lt;a class="btn btn-b"&gt;btn-b&lt;/a&gt;</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>&lt;div class="msg"&gt;

2
h/download.html
View file

@ -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>

18
src/buttons.less
View file

@ -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; }

33
src/colors.less
View file

@ -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;
}
}

2
src/general.less
View file

@ -15,7 +15,7 @@ body, textarea, input, select {
font-size: 10px;
}
.btn, .nav a {
.tb, .btn, .nav a {
text-decoration: none;
}

43
src/messages.less
View file

@ -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);
}