From 6ac7b2f3826c72229ecb8abbefd1a4baf9d383eb Mon Sep 17 00:00:00 2001 From: "Yann Esposito (Yogsototh)" Date: Tue, 11 Oct 2022 14:50:00 +0200 Subject: [PATCH] Color play with filters --- bb/brut/site.clj | 30 ++++-- brut.min.css | 2 +- build.clj | 5 +- build.sh | 11 +- h/docs.html | 53 ++++------ src/buttons.less | 30 ++---- src/colors.less | 17 +++ src/extended-colors.less | 221 --------------------------------------- src/general.less | 1 + src/icons.less | 2 +- src/messages.less | 10 +- 11 files changed, 82 insertions(+), 300 deletions(-) delete mode 100644 src/extended-colors.less diff --git a/bb/brut/site.clj b/bb/brut/site.clj index e6ab18e..57676c4 100644 --- a/bb/brut/site.clj +++ b/bb/brut/site.clj @@ -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 diff --git a/brut.min.css b/brut.min.css index b43b7ee..6531765 100644 --- a/brut.min.css +++ b/brut.min.css @@ -1 +1 @@ -/* Copyright 2022 Yann Esposito; MIT licensed */:root{--bg:#fff;--fg:#000;--bg2:#eee;--darken:rgba(0, 0, 0, 0.1);--nl:#d9d9d9;--n0:#999;--n1:#808080;--n2:#666666;--shadow:rgba(0, 0, 0, 0.75);--cnt:#fff;--na:#333;--nb:#000}@media(prefers-color-scheme:dark){:root{--bg:#000;--fg:#ccc;--bg2:#333;--darken:rgba(255, 255, 255, 0.1);--nl:#666666;--n0:#808080;--n1:#999999;--n2:#b3b3b3;--shadow:rgba(200, 200, 200, 0.7);--cnt:#000;--na:#eee;--nb:#fff}}.neutral{color:var(--n0)}.bg-neutral{background:var(--nl)}a{color:var(--fg)}html,body{font-size:12px;line-height:1.5em;min-height:100vh;margin:0;padding:0;border:0;outline:0}*{box-sizing:border-box}body,textarea,input,select{background:var(--bg);color:var(--fg);border-radius:0;font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;font-size:1rem;margin:0}img{max-width:100%}.addon,.sm,.nav,textarea,input,select{outline:0;line-height:1rem}.container{padding:0 20px;width:100%}@media(min-width:1380px){.container{margin:auto;max-width:1270px}}pre{background:var(--bg2);padding:10px;overflow:scroll}code{background:var(--darken);border:solid 1px var(--darken);padding:1px}blockquote{margin:1rem 0;padding-left:1rem;border-left:solid 1rem var(--nl)}ul{list-style-type:square;list-style-position:outside;padding-inline-start:1.5rem}ol{padding-inline-start:2rem}ul>li::marker{font-size:1.5rem}summary:hover{cursor:pointer}table{font-size:1rem}.sm{font-size:.75rem;line-height:.65rem}.big{font-size:2rem;line-height:3.4rem}.huge{font-size:3rem;line-height:5.2rem}.hl{background:var(--fg);color:var(--bg)}.doc{max-width:65ch;font-size:1.25rem;font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;line-height:1.5em}.doc p{text-indent:3rem}.tb,.btn{text-decoration:none;display:inline-block;text-align:center}.tb{font-weight:700;cursor:pointer;padding:2px;vertical-align:text-bottom}.tb:before,.tb:after{opacity:.3;display:inline-block}.tb:before{content:"❬"}.tb:after{content:"❭"}.tb:hover{text-decoration:underline}.tb:hover::before,.tb:hover::after{opacity:1}.tb:active:before{content:"❰"}.tb:active:after{content:"❱"}.tb.info{color:var(--fg);background:var(--bg2)}.tb.ok{color:var(--fg);background:var(--nl)}.tb.warn{background:var(--n0);color:var(--bg)}.tb.err{background:var(--n2);color:var(--bg)}.tb.fatal{background:var(--fg);color:var(--bg)}.btn{background:var(--n0);border:solid 2px var(--fg);color:#fff;font-weight:700;cursor:pointer;display:inline-block;margin:0 4px 4px 0;padding:1rem 2rem;box-shadow:4px 4px var(--shadow);vertical-align:bottom}.btn.info{color:var(--fg);background:var(--bg2)}.btn.ok{color:var(--fg);background:var(--nl)}.btn.warn{background:var(--n0);color:var(--bg)}.btn.err{background:var(--n2);color:var(--bg)}.btn.fatal{background:var(--fg);color:var(--bg)}.btn:hover{background:var(--n1);color:#fff}.btn.err:hover,.btn.fatal:hover,.btn.err:active,.btn.fatal:active,.btn.err:focus,.btn.fatal:focus{background:var(--fg)}.btn:active,.btn:focus{color:#fff;background:var(--n2);box-shadow:1px 1px #000;position:relative;top:3px;left:3px}.btn.sm{padding:.5rem 1rem}.btn.std{width:12rem}.btn.big.std{width:20rem}.btn.huge.std{width:24rem}.col,.row{display:flex;flex-direction:row;justify-content:stretch;align-items:stretch;flex-wrap:wrap;gap:1rem}.row>*{flex:1}.col>*{flex:0}.col{flex-direction:column}.start{justify-content:flex-start;align-items:flex-start}.middle{justify-content:center;align-item:center}.gapless{gap:0}.table,.c12{width:100%;flex:12}.c11{flex:11;width:91.66%}.c10{flex:10;width:83.33%}.c9{flex:9;width:75%}.c8{flex:8;width:66.66%}.c7{flex:7;width:58.33%}.c6{flex:6;width:50%}.c5{flex:5;width:41.66%}.c4{flex:4;width:33.33%}.c3{flex:3;width:25%}.c2{flex:2;width:16.66%}.c1{flex:1;width:8.33%}@media(max-width:800px){.row>*{flex:0 1 100%;width:100%}.no-mobile{display:none}}.no-grow{flex:0}.fixed{flex-grow:0;flex-shrink:0}.card,.block{padding:1rem;border:solid 1rem}.col.card,.col.block{justify-content:flex-start;align-items:flex-start}.card{border-color:var(--nl)}.block{border-color:transparent}.central{display:flex;align-items:center;justify-content:center;background-size:cover;min-height:100vh}button~.central{min-height:calc(100vh - 50px)}.hero{padding:2rem;border:double 1rem}.fill{flex-grow:1}.push{justify-self:flex-end;margin-top:auto}h1,h2,h3,h4,h5,h6{display:block;padding:.5rem;font-size:1rem;margin:0;outline:0;color:var(--bg);margin:1rem 0;border:solid 1px var(--fg)}.tight{margin:0}h1{background:var(--fg)}h2{background:var(--n2)}h2{background:var(--n1)}h3{background:var(--n0)}h4{background:var(--nl);color:var(--fg)}h5{background:var(--bg2);color:var(--fg)}h6{color:var(--fg)}.ico{font:20px Arial Unicode MS,Lucida Sans Unicode;line-height:10px;vertical-align:top}label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:2px solid;padding:8px}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid}.addon{padding:8px 12px;border-width:2px;border-style:solid none solid solid}textarea:focus,input:focus,select:focus{border-color:var(--i1)}.nav{background:var(--bg2);border-bottom:solid 1px var(--darken)}footer{background:var(--bg2);border-top:solid 1px var(--darken)}.nav{height:3rem;padding:11px 0 15px}.nav a{text-decoration:none;opacity:.7;padding-right:1em;position:relative;top:-1px}.nav a:hover{opacity:1}.nav .pagename{opacity:1;font-weight:700;font-size:22px;top:1px}.btn.btn-close{float:right;font-size:25px;margin:-4.1rem 0;display:none;border:none;box-shadow:none;background:0 0;color:var(--fg)}@media(max-width:640px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:var(--bg2);border-bottom:11px double;border-top:3px solid;content:'';float:right;height:.25rem;position:relative;right:0;top:8px;width:2rem}.nav a{display:block;padding:.5em 0;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:var(--bg2)}.msg{background:var(--bg2);border-left:5px solid var(--darken);padding:1rem}.msg.info{background:var(--bg2)}.msg.ok{background:var(--nl)}.msg.warn{background:var(--n0);color:var(--bg)}.msg.err{background:var(--n2);color:var(--bg)}.msg.fatal{background:var(--fg);color:var(--bg)} \ No newline at end of file +/* Copyright 2022 Yann Esposito; MIT licensed */:root{--bg:#fff;--fg:#000;--bg2:#eee;--darken:rgba(0, 0, 0, 0.1);--nl:#d9d9d9;--n0:#999;--n1:#808080;--n2:#666666;--shadow:rgba(0, 0, 0, 0.75);--cnt:#fff;--na:#333;--nb:#000}@media(prefers-color-scheme:dark){:root{--bg:#000;--fg:#ccc;--bg2:#333;--darken:rgba(255, 255, 255, 0.1);--nl:#666666;--n0:#808080;--n1:#999999;--n2:#b3b3b3;--shadow:rgba(200, 200, 200, 0.7);--cnt:#000;--na:#eee;--nb:#fff}}.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(0)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(0)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)}html,body{font-size:12px;line-height:1.5em;min-height:100vh;margin:0;padding:0;border:0;outline:0}*{box-sizing:border-box}body,textarea,input,select{background:var(--bg);color:var(--fg);border-radius:0;font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;font-size:1rem;margin:0}img{max-width:100%}.addon,.sm,.nav,textarea,input,select{outline:0;line-height:1rem}.container{padding:0 20px;width:100%}@media(min-width:1380px){.container{margin:auto;max-width:1270px}}pre{background:var(--bg2);padding:10px;overflow:scroll}code{background:var(--darken);border:solid 1px var(--darken);padding:1px}blockquote{margin:1rem 0;padding-left:1rem;border-left:solid 1rem var(--nl)}ul{list-style-type:square;list-style-position:outside;padding-inline-start:1.5rem}ol{padding-inline-start:2rem}ul>li::marker{font-size:1.5rem}summary:hover{cursor:pointer}table{font-size:1rem}.sm{font-size:.75rem;line-height:.65rem}.big{font-size:2rem;line-height:3.4rem}.huge{font-size:3rem;line-height:5.2rem}.hl{background:var(--fg);color:var(--bg)}.doc{max-width:65ch;font-size:1.25rem;font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;line-height:1.5em}.doc p{text-indent:3rem}.tb,.btn{text-decoration:none;display:inline-block;text-align:center}.tb{font-weight:700;cursor:pointer;padding:2px;vertical-align:baseline}.tb:before,.tb:after{opacity:.3;display:inline-block}.tb:before{content:"❬"}.tb:after{content:"❭"}.tb:hover{text-decoration:underline}.tb:hover::before,.tb:hover::after{opacity:1}.tb:active:before{content:"❰"}.tb:active:after{content:"❱"}.tb.info{color:var(--n2)}.tb.ok{color:var(--n2)}.tb.warn{color:var(--n2)}.tb.err{color:var(--n2)}.tb.fatal{color:var(--n2)}.btn{background:var(--n0);border:solid 2px var(--fg);color:#fff;font-weight:700;cursor:pointer;display:inline-block;margin:0 4px 4px 0;padding:1rem 2rem;box-shadow:4px 4px var(--shadow);vertical-align:bottom}.btn.info{background:var(--n2)}.btn.ok{background:var(--n2)}.btn.warn{background:var(--n2)}.btn.err{background:var(--n2)}.btn.fatal{background:var(--n2)}.btn:hover{background:var(--n1);color:#fff}.btn:active,.btn:focus{color:#fff;background:var(--n2);box-shadow:1px 1px #000;position:relative;top:3px;left:3px}.btn.sm{padding:.5rem 1rem}.btn.std{width:12rem}.btn.big.std{width:20rem}.btn.huge.std{width:24rem}.col,.row{display:flex;flex-direction:row;justify-content:stretch;align-items:stretch;flex-wrap:wrap;gap:1rem}.row>*{flex:1}.col>*{flex:0}.col{flex-direction:column}.start{justify-content:flex-start;align-items:flex-start}.middle{justify-content:center;align-item:center}.gapless{gap:0}.table,.c12{width:100%;flex:12}.c11{flex:11;width:91.66%}.c10{flex:10;width:83.33%}.c9{flex:9;width:75%}.c8{flex:8;width:66.66%}.c7{flex:7;width:58.33%}.c6{flex:6;width:50%}.c5{flex:5;width:41.66%}.c4{flex:4;width:33.33%}.c3{flex:3;width:25%}.c2{flex:2;width:16.66%}.c1{flex:1;width:8.33%}@media(max-width:800px){.row>*{flex:0 1 100%;width:100%}.no-mobile{display:none}}.no-grow{flex:0}.fixed{flex-grow:0;flex-shrink:0}.card,.block{padding:1rem;border:solid 1rem}.col.card,.col.block{justify-content:flex-start;align-items:flex-start}.card{border-color:var(--nl)}.block{border-color:transparent}.central{display:flex;align-items:center;justify-content:center;background-size:cover;min-height:100vh}button~.central{min-height:calc(100vh - 50px)}.hero{padding:2rem;border:double 1rem}.fill{flex-grow:1}.push{justify-self:flex-end;margin-top:auto}h1,h2,h3,h4,h5,h6{display:block;padding:.5rem;font-size:1rem;margin:0;outline:0;color:var(--bg);margin:1rem 0;border:solid 1px var(--fg)}.tight{margin:0}h1{background:var(--fg)}h2{background:var(--n2)}h2{background:var(--n1)}h3{background:var(--n0)}h4{background:var(--nl);color:var(--fg)}h5{background:var(--bg2);color:var(--fg)}h6{color:var(--fg)}.ico{font:20px Arial Unicode MS,Lucida Sans Unicode;line-height:10px;vertical-align:text-top}label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:2px solid;padding:8px}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid}.addon{padding:8px 12px;border-width:2px;border-style:solid none solid solid}textarea:focus,input:focus,select:focus{border-color:var(--i1)}.nav{background:var(--bg2);border-bottom:solid 1px var(--darken)}footer{background:var(--bg2);border-top:solid 1px var(--darken)}.nav{height:3rem;padding:11px 0 15px}.nav a{text-decoration:none;opacity:.7;padding-right:1em;position:relative;top:-1px}.nav a:hover{opacity:1}.nav .pagename{opacity:1;font-weight:700;font-size:22px;top:1px}.btn.btn-close{float:right;font-size:25px;margin:-4.1rem 0;display:none;border:none;box-shadow:none;background:0 0;color:var(--fg)}@media(max-width:640px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:var(--bg2);border-bottom:11px double;border-top:3px solid;content:'';float:right;height:.25rem;position:relative;right:0;top:8px;width:2rem}.nav a{display:block;padding:.5em 0;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:var(--bg2)}.msg{background:var(--bg2);border-left:5px solid var(--darken);padding:1rem}.msg.info{background:var(--n0)}.msg.ok{background:var(--n0)}.msg.warn{background:var(--n0)}.msg.err{background:var(--n0)}.msg.fatal{background:var(--n0)} \ No newline at end of file diff --git a/build.clj b/build.clj index e36d1cd..c15f149 100755 --- a/build.clj +++ b/build.clj @@ -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}) diff --git a/build.sh b/build.sh index f6b078e..f437563 100755 --- a/build.sh +++ b/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" diff --git a/h/docs.html b/h/docs.html index e22fd9a..bfa94a6 100644 --- a/h/docs.html +++ b/h/docs.html @@ -202,33 +202,26 @@ </div> </div>

icons

Android Safe

☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € № -
The &quot;Android Safe&quot; icons work everywhere, tested on hundreds of devices. -
code
+
The "Android Safe" icons work everywhere, tested on hundreds of devices.
code
   <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>

Total Set

✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩ -
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.) -
code
+
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.)
code
   <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>

Forms



$
Be careful with addons! If you do not want a space between the addon and the input make sure that there is no space between the <span> and <input> tags. Example: 
... </span> <input ...
$ 
... </span><input ...
$
code
@@ -347,13 +340,13 @@ you should stick to the &quot;Android Safe&quot; set.
☑ OK This is done by adding ok to the class.
☣ Warning This is done by adding warn to the class.
☒ Error This is done by adding err to the class. -
☒ Fatal This is done by adding fatal to the class. -

Strong Alerts


Alert MessageThis is a normal message with msg. -
☞ Alert InfoThis is done by adding info to the class. -
☑ Alert OKThis is done by adding ok to the class. -
☣ Alert WarningThis is done by adding warn to the class. -
☒ Alert ErrorThis is done by adding err to the class. -
☒ Alert FatalThis is done by adding fatal to the class. +
☠ Fatal This is done by adding fatal to the class. +

Strong Alerts


Alert Message This is a normal message with msg. +
☞ Alert Info This is done by adding info to the class. +
☑ Alert OK This is done by adding ok to the class. +
☣ Alert Warning This is done by adding warn to the class. +
☒ Alert Error This is done by adding err to the class. +
☠ Alert Fatal This is done by adding fatal to the class.
code
   <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>
diff --git a/src/buttons.less b/src/buttons.less
index be2f73a..dac717d 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -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;
diff --git a/src/colors.less b/src/colors.less
index 4e8878b..9d06b87 100644
--- a/src/colors.less
+++ b/src/colors.less
@@ -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); }
+
diff --git a/src/extended-colors.less b/src/extended-colors.less
deleted file mode 100644
index e8b8882..0000000
--- a/src/extended-colors.less
+++ /dev/null
@@ -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);
-	}
-}
diff --git a/src/general.less b/src/general.less
index 1d3dba2..b4fbf67 100644
--- a/src/general.less
+++ b/src/general.less
@@ -61,3 +61,4 @@ table { font-size: 1rem; }
            text-indent: 3rem;
        }
      }
+
diff --git a/src/icons.less b/src/icons.less
index b598137..044b10b 100644
--- a/src/icons.less
+++ b/src/icons.less
@@ -1,5 +1,5 @@
 .ico {
 	font: 20px Arial Unicode MS, Lucida Sans Unicode;
 	line-height: 10px;
-	vertical-align: top;
+	vertical-align: text-top;
 }
diff --git a/src/messages.less b/src/messages.less
index faf6328..f5d6b36 100644
--- a/src/messages.less
+++ b/src/messages.less
@@ -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); }
 }