Color play with filters
This commit is contained in:
Yann Esposito (Yogsototh)
parent
cd31348145
commit
6ac7b2f382
GPG key ID:
7B19A4C650D59646
|
|
@ -301,34 +301,42 @@
|
|||
[:code "err"]" to the class.\n"]
|
||||
[:div {:class "msg fatal"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☒"]" Fatal"]
|
||||
[:i {:class "ico"} "☠"]" Fatal"]
|
||||
" This is done by adding "
|
||||
[:code "fatal"]" to the class.\n"]]
|
||||
[:div {:class "col c6 gapless"}
|
||||
[:h2 "Strong Alerts"]
|
||||
[:br]
|
||||
[:div {:class "msg alert"}
|
||||
[:strong "Alert Message"]"This is a normal message with "
|
||||
[:strong "Alert Message"]
|
||||
" This is a normal message with "
|
||||
[:code "msg"]".\n"]
|
||||
[:div {:class "msg alert info"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☞"]" Alert Info"]"This is done by adding "
|
||||
[:i {:class "ico"} "☞"] " Alert Info"]
|
||||
" This is done by adding "
|
||||
[:code "info"]" to the class.\n"]
|
||||
[:div {:class "msg alert ok"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☑"]" Alert OK"]"This is done by adding "
|
||||
[:i {:class "ico"} "☑"]
|
||||
" Alert OK"]
|
||||
" This is done by adding "
|
||||
[:code "ok"]" to the class.\n"]
|
||||
[:div {:class "msg alert warn"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☣"]" Alert Warning"]"This is done by adding "
|
||||
[:i {:class "ico"} "☣"]
|
||||
" Alert Warning"]
|
||||
" This is done by adding "
|
||||
[:code "warn"]" to the class.\n"]
|
||||
[:div {:class "msg alert err"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☒"]" Alert Error"]"This is done by adding "
|
||||
[:i {:class "ico"} "☒"]" Alert Error"]
|
||||
" This is done by adding "
|
||||
[:code "err"]" to the class.\n"]
|
||||
[:div {:class "msg alert fatal"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☒"]" Alert Fatal"]"This is done by adding "
|
||||
[:i {:class "ico"} "☠"]" Alert Fatal"]
|
||||
" This is done by adding "
|
||||
[:code "fatal"]" to the class.\n"]]]
|
||||
messages-section {:title "Messages"
|
||||
:cards [messages]}
|
||||
|
|
@ -393,13 +401,17 @@
|
|||
basic-icons [:div.col.start
|
||||
[:h4 "Android Safe"]
|
||||
[:i {:class "ico block", :style "line-height: 1.5rem"} "☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №\n"]
|
||||
[:div {:class "msg push"} "The "Android Safe" icons work everywhere, tested on hundreds of devices.\n"]]
|
||||
[:div {:class "msg push"}
|
||||
"The \"Android Safe\" icons work everywhere, tested on hundreds of devices."]]
|
||||
full-icons [:div.col.start
|
||||
[:h4 "Total Set"]
|
||||
[:i {:class "ico block", :style "line-height: 1.5rem"}
|
||||
"✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩\n"]
|
||||
[:div {:class "msg warn push"}
|
||||
"Although over 75% of Android devices we tested\nsupport all "Total Set" icons, if a substantial\nportion of your users use old Android devices\nyou should stick to the "Android Safe" set.\n(The "Total Set" does not include icons from the "Android Safe" set.)\n"]]
|
||||
"Although over 75% of Android devices we tested support all \"Total Set\" icons, "
|
||||
"if a substantial portion of your users use old Android devices you should stick to the "
|
||||
" \"Android Safe\" set. (The \"Total Set\" does not include icons from the "
|
||||
"\"Android Safe\" set.)"]]
|
||||
icons-section {:title "icons"
|
||||
:cards [basic-icons full-icons]}
|
||||
grid [:div
|
||||
|
|
|
|||
2
brut.min.css
vendored
2
brut.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -13,7 +13,6 @@
|
|||
|
||||
(def sub-css
|
||||
["colors"
|
||||
"extended-colors"
|
||||
"general"
|
||||
"buttons"
|
||||
"grid"
|
||||
|
|
@ -38,9 +37,7 @@
|
|||
min-css (fs/file dist (str item ".min.css"))
|
||||
_ @(process ["lessc" (format "src/%s.less" item)] {:out css})
|
||||
minified (-> @(process ["minify" css] {:out :string}) :out)]
|
||||
(spit min-css minified)
|
||||
(when-not (= "extended-colors" item)
|
||||
(spit tmp-css minified :append true))))
|
||||
(spit min-css minified)))
|
||||
|
||||
(fs/move tmp-css brut-css {:replace-existing true
|
||||
:atomic-move true})
|
||||
|
|
|
|||
11
build.sh
11
build.sh
|
|
@ -3,14 +3,12 @@
|
|||
DIST="_build"
|
||||
TMPCSS="$DIST/tmp.css"
|
||||
DISTCSS="brut.min.css"
|
||||
TMPFULLCSS="$DIST/tmp-full.css"
|
||||
DISTFULLCSS="brut-nocolors.min.css"
|
||||
|
||||
mkdir $DIST -p
|
||||
[ -f $TMPCSS ] && rm -f $TMPCSS
|
||||
|
||||
|
||||
subtypes=(colors extended-colors general buttons grid components headings icons forms navbar tables messages)
|
||||
subtypes=(colors general buttons grid components headings icons forms navbar tables messages)
|
||||
YEAR="$(date +"%Y")"
|
||||
echo -n "/* Copyright $YEAR Yann Esposito; MIT licensed */" >> $TMPCSS
|
||||
|
||||
|
|
@ -18,22 +16,15 @@ for item in "${subtypes[@]}"; do
|
|||
echo "building: $item"
|
||||
lessc "src/$item.less" > "$DIST/$item.css"
|
||||
minify "$DIST/$item.css" -o "$DIST/$item.min.css"
|
||||
if [ "$item" != "extended-colors" ]; then
|
||||
cat "$DIST/$item.min.css" >> $TMPFULLCSS
|
||||
fi
|
||||
cat "$DIST/$item.min.css" >> $TMPCSS
|
||||
done
|
||||
|
||||
[ -f $DISTCSS.bak ] && rm -f $DISTCSS.bak
|
||||
[ -f $DISTFULLCSS.bak ] && rm -f $DISTFULLCSS.bak
|
||||
[ -f $DISTCSS ] && mv $DISTCSS $DISTCSS.bak
|
||||
[ -f $DISTFULLCSS ] && mv $DISTFULLCSS $DISTFULLCSS.bak
|
||||
mv $TMPCSS $DISTCSS
|
||||
mv $TMPFULLCSS $DISTFULLCSS
|
||||
# cleanup
|
||||
rm -f $DISTCSS.bak
|
||||
rm -f $DISTFULLCSS.bak
|
||||
rm -f $TMPCSS
|
||||
rm -f $TMPFULLCSS
|
||||
echo "Built: $DISTCSS"
|
||||
echo "Built: $DISTFULLCSS"
|
||||
|
|
|
|||
53
h/docs.html
53
h/docs.html
|
|
@ -202,33 +202,26 @@
|
|||
</div>
|
||||
</div>
|
||||
</pre></details></div></div></div><div class="col"><h2>icons</h2><div class="row"><div class="card c6"><div class="col start"><h4>Android Safe</h4><i class="ico block" style="line-height: 1.5rem">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №
|
||||
</i><div class="msg push">The &quot;Android Safe&quot; icons work everywhere, tested on hundreds of devices.
|
||||
</div></div><details><summary>code</summary><pre>
|
||||
</i><div class="msg push">The "Android Safe" icons work everywhere, tested on hundreds of devices.</div></div><details><summary>code</summary><pre>
|
||||
<div class="col start">
|
||||
<h4>Android Safe</h4><i class="ico block" style="line-height: 1.5rem">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜
|
||||
☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №</i>
|
||||
<div class="msg push">
|
||||
The &amp;quot;Android Safe&amp;quot; icons work everywhere,
|
||||
tested on hundreds of devices.
|
||||
The "Android Safe" icons work everywhere, tested on hundreds
|
||||
of devices.
|
||||
</div>
|
||||
</div>
|
||||
</pre></details></div><div class="card c6"><div class="col start"><h4>Total Set</h4><i class="ico block" style="line-height: 1.5rem">✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩
|
||||
</i><div class="msg warn push">Although over 75% of Android devices we tested
|
||||
support all &quot;Total Set&quot; icons, if a substantial
|
||||
portion of your users use old Android devices
|
||||
you should stick to the &quot;Android Safe&quot; set.
|
||||
(The &quot;Total Set&quot; does not include icons from the &quot;Android Safe&quot; set.)
|
||||
</div></div><details><summary>code</summary><pre>
|
||||
</i><div class="msg warn push">Although over 75% of Android devices we tested support all "Total Set" icons, if a substantial portion of your users use old Android devices you should stick to the "Android Safe" set. (The "Total Set" does not include icons from the "Android Safe" set.)</div></div><details><summary>code</summary><pre>
|
||||
<div class="col start">
|
||||
<h4>Total Set</h4><i class="ico block" style="line-height: 1.5rem">✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘
|
||||
⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩</i>
|
||||
<div class="msg warn push">
|
||||
Although over 75% of Android devices we tested support all
|
||||
&amp;quot;Total Set&amp;quot; icons, if a substantial portion
|
||||
of your users use old Android devices you should stick to the
|
||||
&amp;quot;Android Safe&amp;quot; set. (The &amp;quot;Total
|
||||
Set&amp;quot; does not include icons from the
|
||||
&amp;quot;Android Safe&amp;quot; set.)
|
||||
"Total Set" icons, if a substantial portion of your users use
|
||||
old Android devices you should stick to the "Android Safe"
|
||||
set. (The "Total Set" does not include icons from the
|
||||
"Android Safe" set.)
|
||||
</div>
|
||||
</div>
|
||||
</pre></details></div></div></div><div class="col"><h2>Forms</h2><div class="row"><div class="card c6"><div><input class="neutral" placeholder="input" type="text" /><br /><textarea class="neutral" placeholder="textarea" rows="3"></textarea><br /><span class="addon bg-info">$</span><input type="text" /><div class="msg"><strong>Be careful with addons!</strong> If you do not want a space between the addon and the input make sure that there is no space between the <code><span></code> and <code><input></code> tags. Example: <pre>... </span><span class="hl"> </span><input ...</pre><span class="addon">$</span> <input class="smooth" type="text" /><pre>... </span><input ...</pre><span class="addon">$</span><input class="smooth" type="text" /></div></div><details><summary>code</summary><pre>
|
||||
|
|
@ -347,13 +340,13 @@ you should stick to the &quot;Android Safe&quot; set.
|
|||
</div><div class="msg ok"><strong><i class="ico">☑</i> OK</strong> This is done by adding <code>ok</code> to the class.
|
||||
</div><div class="msg warn"><strong><i class="ico">☣</i> Warning</strong> This is done by adding <code>warn</code> to the class.
|
||||
</div><div class="msg err"><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 gapless"><h2>Strong Alerts</h2><br /><div class="msg alert"><strong>Alert Message</strong>This is a normal message with <code>msg</code>.
|
||||
</div><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 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 gapless"><h2>Strong Alerts</h2><br /><div class="msg alert"><strong>Alert Message</strong> This is a normal message with <code>msg</code>.
|
||||
</div><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></div><details><summary>code</summary><pre>
|
||||
<div class="row">
|
||||
<div class="col c6 gapless">
|
||||
|
|
@ -379,34 +372,34 @@ you should stick to the &quot;Android Safe&quot; set.
|
|||
adding <code>err</code> to the class.
|
||||
</div>
|
||||
<div class="msg fatal">
|
||||
<strong><i class="ico">☒</i> Fatal</strong> This is done by
|
||||
<strong><i class="ico">☠</i> Fatal</strong> This is done by
|
||||
adding <code>fatal</code> to the class.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col c6 gapless">
|
||||
<h2>Strong Alerts</h2><br></br>
|
||||
<div class="msg alert">
|
||||
<strong>Alert Message</strong>This is a normal message with
|
||||
<code>msg</code>.
|
||||
<strong>Alert Message</strong> This is a normal message
|
||||
with <code>msg</code>.
|
||||
</div>
|
||||
<div class="msg alert info">
|
||||
<strong><i class="ico">☞</i> Alert Info</strong>This is
|
||||
<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
|
||||
<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
|
||||
<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
|
||||
<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
|
||||
<strong><i class="ico">☠</i> Alert Fatal</strong> This is
|
||||
done by adding <code>fatal</code> to the class.
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
.tb { font-weight: bold;
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
vertical-align: text-bottom;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.tb:before,.tb:after { opacity: 0.3; display: inline-block;}
|
||||
.tb:before { content: "❬"; }
|
||||
|
|
@ -12,11 +12,11 @@
|
|||
.tb:active:before { 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); }
|
||||
&.info { color: var(--n2); }
|
||||
&.ok { color: var(--n2); }
|
||||
&.warn { color: var(--n2); }
|
||||
&.err { color: var(--n2); }
|
||||
&.fatal { color: var(--n2); }
|
||||
}
|
||||
|
||||
.btn {
|
||||
|
|
@ -31,26 +31,18 @@
|
|||
box-shadow: 4px 4px var(--shadow);
|
||||
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); }
|
||||
&.info { background: var(--n2); }
|
||||
&.ok { background: var(--n2); }
|
||||
&.warn { background: var(--n2); }
|
||||
&.err { background: var(--n2); }
|
||||
&.fatal { background: var(--n2); }
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: var(--n1);
|
||||
color: #fff;
|
||||
}
|
||||
.btn {
|
||||
&.err, &.fatal {
|
||||
&:hover,&:active,&:focus {
|
||||
background: var(--fg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn:active,.btn:focus {
|
||||
color: #fff;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
@neutral: #999;
|
||||
@dark-neutral: darken(@neutral,10%);
|
||||
|
||||
|
||||
:root {
|
||||
--bg: #fff;
|
||||
--fg: #000;
|
||||
|
|
@ -41,7 +42,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
.info { filter: sepia(100%) hue-rotate(120deg) contrast(120%) saturate(3); }
|
||||
.ok { filter: sepia(100%) hue-rotate(40deg) contrast(120%) saturate(3); }
|
||||
.warn { filter: sepia(100%) hue-rotate(0deg) contrast(120%) saturate(3); }
|
||||
.err { filter: sepia(100%) hue-rotate(310deg) contrast(120%) saturate(3); }
|
||||
.fatal { filter: sepia(100%) hue-rotate(270deg) contrast(120%) saturate(3); }
|
||||
|
||||
.alert { filter: invert(100%); }
|
||||
.alert.info { filter: sepia(100%) hue-rotate(0deg) brightness(80%) contrast(140%) saturate(3) invert(100%); }
|
||||
.alert.ok { filter: sepia(100%) hue-rotate(270deg) brightness(80%) contrast(140%) saturate(3) invert(100%); }
|
||||
.alert.warn { filter: sepia(100%) hue-rotate(180deg) brightness(60%) contrast(180%) saturate(3) invert(100%); }
|
||||
.alert.err { filter: sepia(100%) hue-rotate(140deg) brightness(100%) contrast(150%) saturate(3) invert(100%); }
|
||||
.alert.fatal { filter: sepia(100%) hue-rotate(80deg) brightness(80%) contrast(150%) saturate(3) invert(100%); }
|
||||
|
||||
.alert img { filter: none; }
|
||||
|
||||
.neutral { color: var(--n0); }
|
||||
.bg-neutral { background: var(--nl); }
|
||||
|
||||
a { color: var(--fg); }
|
||||
|
||||
|
|
|
|||
|
|
@ -1,221 +0,0 @@
|
|||
@info: #59d;
|
||||
@ok: #494;
|
||||
@warn: #c90;
|
||||
@err: #d33;
|
||||
@fatal: #a3d;
|
||||
|
||||
@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 {
|
||||
--il: saturate(lighten(@info,25%),20%);
|
||||
--i0: @info;
|
||||
--i1: darken(@info,5%);
|
||||
--i2: darken(@info,10%);
|
||||
|
||||
--ol: saturate(lighten(@ok,25%),20%);
|
||||
--o0: @ok;
|
||||
--o1: darken(@ok,5%);
|
||||
--o2: darken(@ok,10%);
|
||||
|
||||
--wl: saturate(lighten(@warn,25%),20%);
|
||||
--w0: @warn;
|
||||
--w1: darken(@warn,5%);
|
||||
--w2: darken(@warn,10%);
|
||||
|
||||
--el: saturate(lighten(@err,25%),20%);
|
||||
--e0: @err;
|
||||
--e1: darken(@err,5%);
|
||||
--e2: darken(@err,10%);
|
||||
|
||||
--fl: saturate(lighten(@fatal,25%),20%);
|
||||
--f0: @fatal;
|
||||
--f1: darken(@fatal,5%);
|
||||
--f2: darken(@fatal,10%);
|
||||
/* alert messages */
|
||||
--ia: saturate(darken(@info,10%),25%);
|
||||
--ib: saturate(darken(@info,0%),35%);
|
||||
--oa: saturate(darken(@ok,10%),25%);
|
||||
--ob: saturate(darken(@ok,0%),35%);
|
||||
--wa: saturate(darken(@warn,10%),25%);
|
||||
--wb: saturate(darken(@warn,0%),35%);
|
||||
--ea: saturate(darken(@err,10%),25%);
|
||||
--eb: saturate(darken(@err,0%),35%);
|
||||
--fa: saturate(darken(@fatal,10%),25%);
|
||||
--fb: saturate(darken(@fatal,0%),35%);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--il: darken(@dark-info,10%);
|
||||
--i0: @dark-info;
|
||||
--i1: lighten(@dark-info,5%);
|
||||
--i2: saturate(lighten(@dark-info,10%),10%);
|
||||
|
||||
--ol: darken(@dark-ok,10%);
|
||||
--o0: @dark-ok;
|
||||
--o1: lighten(@dark-ok,5%);
|
||||
--o2: saturate(lighten(@dark-ok,10%),10%);
|
||||
|
||||
--wl: darken(@dark-warn,10%);
|
||||
--w0: @dark-warn;
|
||||
--w1: lighten(@dark-warn,5%);
|
||||
--w2: saturate(lighten(@dark-warn,10%),10%);
|
||||
|
||||
--el: darken(@dark-err,10%);
|
||||
--e0: @dark-err;
|
||||
--e1: lighten(@dark-err,5%);
|
||||
--e2: saturate(lighten(@dark-err,10%),10%);
|
||||
|
||||
--fl: darken(@dark-fatal,10%);
|
||||
--f0: @dark-fatal;
|
||||
--f1: lighten(@dark-fatal,5%);
|
||||
--f2: saturate(lighten(@dark-fatal,10%),10%);
|
||||
}
|
||||
}
|
||||
|
||||
.info { color: var(--i0); }
|
||||
.bg-info { background: var(--il); }
|
||||
.ok { color: var(--o0); }
|
||||
.bg-ok { background: var(--ol); }
|
||||
.warn { color: var(--w0); }
|
||||
.bg-warn { background: var(--wl); }
|
||||
.err { color: var(--e0); }
|
||||
.bg-err { background: var(--el); }
|
||||
.fatal { color: var(--f0); }
|
||||
.bg-fatal { background: var(--fl); }
|
||||
|
||||
/* Messages */
|
||||
.msg.info {
|
||||
color: var(--fg);
|
||||
background: var(--il);
|
||||
border-color: var(--i0);
|
||||
}
|
||||
.msg.ok {
|
||||
color: var(--fg);
|
||||
background: var(--ol);
|
||||
border-color: var(--o0);
|
||||
}
|
||||
.msg.warn {
|
||||
color: var(--fg);
|
||||
background: var(--wl);
|
||||
border-color: var(--w0);
|
||||
}
|
||||
.msg.err {
|
||||
color: var(--fg);
|
||||
background: var(--el);
|
||||
border-color: var(--e0);
|
||||
}
|
||||
.msg.fatal {
|
||||
color: var(--fg);
|
||||
background: var(--fl);
|
||||
border-color: var(--f0);
|
||||
}
|
||||
|
||||
.msg.alert, .msg.alert * {
|
||||
color: var(--cnt);
|
||||
background: var(--na);
|
||||
border-color: var(--nb);
|
||||
}
|
||||
.msg.alert.info, .msg.alert.info * {
|
||||
color: #fff;
|
||||
background: var(--ia);
|
||||
border-color: var(--ib);
|
||||
}
|
||||
.msg.alert.ok, .msg.alert.ok * {
|
||||
color: #fff;
|
||||
background: var(--oa);
|
||||
border-color: var(--ob);
|
||||
}
|
||||
.msg.alert.warn, .msg.alert.warn * {
|
||||
color: #fff;
|
||||
background: var(--wa);
|
||||
border-color: var(--wb);
|
||||
}
|
||||
.msg.alert.err, .msg.alert.err * {
|
||||
color: #fff;
|
||||
background: var(--ea);
|
||||
border-color: var(--eb);
|
||||
}
|
||||
.msg.alert.fatal, .msg.alert.fatal * {
|
||||
color: #fff;
|
||||
background: var(--fa);
|
||||
border-color: var(--fb);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
|
||||
.tb.info { color: var(--i0);
|
||||
&:hover { color: var(--i1); }
|
||||
&:active { color: var(--i2); }
|
||||
}
|
||||
.tb.ok { color: var(--o0);
|
||||
&:hover { color: var(--o1); }
|
||||
&:active { color: var(--o2); }
|
||||
}
|
||||
.tb.warn { color: var(--w0);
|
||||
&:hover { color: var(--w1); }
|
||||
&:active { color: var(--w2); }
|
||||
}
|
||||
.tb.err { color: var(--e0);
|
||||
&:hover { color: var(--e1); }
|
||||
&:active { color: var(--e2); }
|
||||
}
|
||||
.tb.fatal { color: var(--f0);
|
||||
&:hover { color: var(--f1); }
|
||||
&:active { color: var(--f2); }
|
||||
}
|
||||
|
||||
|
||||
.btn.info {
|
||||
background: var(--i0);
|
||||
&:hover {
|
||||
background: var(--i1);
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
background: var(--i2);
|
||||
}
|
||||
}
|
||||
|
||||
.btn.ok {
|
||||
background: var(--o0);
|
||||
&:hover {
|
||||
background: var(--o1);
|
||||
}
|
||||
&:active, &:focus {
|
||||
background: var(--o2);
|
||||
}
|
||||
}
|
||||
|
||||
.btn.warn {
|
||||
background: var(--w0);
|
||||
&:hover {
|
||||
background: var(--w1);
|
||||
}
|
||||
&:active, &:focus {
|
||||
background: var(--w2);
|
||||
}
|
||||
}
|
||||
|
||||
.btn.err {
|
||||
background: var(--e0);
|
||||
&:hover {
|
||||
background: var(--e1);
|
||||
}
|
||||
&:active, &:focus {
|
||||
background: var(--e2);
|
||||
}
|
||||
}
|
||||
.btn.fatal {
|
||||
background: var(--f0);
|
||||
&:hover {
|
||||
background: var(--f1);
|
||||
}
|
||||
&:active, &:focus {
|
||||
background: var(--f2);
|
||||
}
|
||||
}
|
||||
|
|
@ -61,3 +61,4 @@ table { font-size: 1rem; }
|
|||
text-indent: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.ico {
|
||||
font: 20px Arial Unicode MS, Lucida Sans Unicode;
|
||||
line-height: 10px;
|
||||
vertical-align: top;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
background: var(--bg2);
|
||||
border-left: 5px solid var(--darken);
|
||||
padding: 1rem;
|
||||
&.info { background: var(--bg2); }
|
||||
&.ok { background: var(--nl); }
|
||||
&.warn { background: var(--n0); color: var(--bg); }
|
||||
&.err { background: var(--n2); color: var(--bg); }
|
||||
&.fatal { background: var(--fg); color: var(--bg); }
|
||||
&.info { background: var(--n0); }
|
||||
&.ok { background: var(--n0); }
|
||||
&.warn { background: var(--n0); }
|
||||
&.err { background: var(--n0); }
|
||||
&.fatal { background: var(--n0); }
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue