From 99bb71c920261faaa9616f7e84b99ac8a55eee5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C4=93teris=20Caune?= Date: Wed, 7 Jul 2021 15:23:02 +0300 Subject: [PATCH] Use multicolor channel icons for better appearance in the dark mode --- CHANGELOG.md | 5 + static/css/icomoon.css | 151 ++++++++++++++++++++++++------- static/css/my_checks_desktop.css | 4 + static/css/variables.css | 4 +- static/fonts/icomoon.svg | 50 ++++++---- static/fonts/icomoon.ttf | Bin 13992 -> 14608 bytes static/fonts/icomoon.woff | Bin 14068 -> 14684 bytes 7 files changed, 162 insertions(+), 52 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a14226d3..477743c9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,11 @@ # Changelog All notable changes to this project will be documented in this file. +## v1.22.0 - Unreleased + +### Improvements +- Use multicolor channel icons for better appearance in the dark mode + ## v1.21.0 - 2020-07-02 ### Improvements diff --git a/static/css/icomoon.css b/static/css/icomoon.css index 689e8e77..a1e48463 100644 --- a/static/css/icomoon.css +++ b/static/css/icomoon.css @@ -1,11 +1,12 @@ @font-face { font-family: 'icomoon'; src: - url('../fonts/icomoon.ttf?nsf0dg') format('truetype'), - url('../fonts/icomoon.woff?nsf0dg') format('woff'), - url('../fonts/icomoon.svg?nsf0dg#icomoon') format('svg'); + url('../fonts/icomoon.ttf?h8x72b') format('truetype'), + url('../fonts/icomoon.woff?h8x72b') format('woff'), + url('../fonts/icomoon.svg?h8x72b#icomoon') format('svg'); font-weight: normal; font-style: normal; + font-display: block; } [class^="ic-"], [class*=" ic-"] { @@ -23,57 +24,96 @@ -moz-osx-font-smoothing: grayscale; } +.ic-call:before { + content: "\e91a"; + color: rgb(255, 255, 255); +} +.ic-call:after { + content: "\e91d"; + margin-left: -1em; + color: rgb(232, 26, 52); + opacity: 0.98; +} .ic-victorops:before { content: "\e900"; + color: rgb(255, 255, 255); +} +.ic-victorops:after { + content: "\e91e"; + margin-left: -1em; + color: rgb(44, 45, 46); } .ic-zulip:before { content: "\e90f"; - color: #6492fe; + color: rgb(255, 255, 255); +} +.ic-zulip:after { + content: "\e91f"; + margin-left: -1em; + color: rgb(100, 146, 254); } -.ic-signal:before { +.ic-signal:after { content: "\e91c"; color: #2592e9; } .ic-linenotify:before { content: "\e91b"; - color: #00c300; + color: rgb(255, 255, 255); } -.ic-call:before { - content: "\e91a"; - color: #e81a34; +.ic-linenotify:after { + content: "\e920"; + margin-left: -1em; + color: rgb(0, 195, 0); } .ic-spike:before { content: "\e919"; - color: #007bff; + color: rgb(255, 255, 255); +} +.ic-spike:after { + content: "\e921"; + margin-left: -1em; + color: rgb(0, 123, 255); } .ic-pd:before { content: "\e90b"; - color: #04ac38; + color: rgb(255, 255, 255); +} +.ic-pd:after { + content: "\e922"; + margin-left: -1em; + color: rgb(4, 172, 56); } .ic-shell:before { content: "\e917"; + color: rgb(255, 255, 255); +} +.ic-shell:after { + content: "\e923"; + margin-left: -1em; + color: rgb(34, 34, 34); } .ic-msteams:before { content: "\e916"; - color: #4e56be; + color: rgb(255, 255, 255); +} +.ic-msteams:after { + content: "\e924"; + margin-left: -1.056640625em; + color: rgb(78, 86, 190); } -.ic-opsgenie:before { +.ic-opsgenie:after { content: "\e910"; color: #2684ff; } -.ic-mattermost:before { +.ic-mattermost:after { content: "\e907"; color: #045acc; } -.ic-pagerteam:before { - content: "\e914"; - color: #cd2a00; -} -.ic-apprise:before { +.ic-apprise:after { content: "\e915"; color: #236b6b; } -.ic-matrix:before { +.ic-matrix:after { content: "\e901"; } .ic-started:before { @@ -81,34 +121,61 @@ } .ic-pagertree:before { content: "\e90d"; - color: #33ade2; + color: rgb(255, 255, 255); +} +.ic-pagertree:after { + content: "\e929"; + margin-left: -1em; + color: rgb(51, 173, 226); } .ic-po:before { content: "\e90e"; - color: #249df1; + color: rgb(255, 255, 255); +} +.ic-po:after { + content: "\e92a"; + margin-left: -1em; + color: rgb(36, 157, 241); } .ic-email:before { content: "\e90a"; - color: #4f5d73; + color: rgb(255, 255, 255); } -body.dark .ic-email:before { - color: #76a6f0; +.ic-email:after { + content: "\e92b"; + margin-left: -1em; + color: rgb(79, 93, 115); } -.ic-webhook:before { +.ic-webhook:after { content: "\e908"; color: #c73a63; } .ic-sms:before { content: "\e904"; - color: #95c144; + color: rgb(255, 255, 255); +} +.ic-sms:after { + content: "\e92c"; + margin-left: -1em; + color: rgb(149, 193, 68); } .ic-pushbullet:before { content: "\e909"; - color: #67bf79; + color: rgb(255, 255, 255); +} +.ic-pushbullet:after { + content: "\e92d"; + margin-left: -1em; + color: rgb(103, 191, 121); } .ic-discord:before { content: "\e90c"; - color: #7289da; + color: rgb(255, 255, 255); +} +.ic-discord:after { + content: "\e92e"; + margin-left: -1em; + color: rgb(114, 137, 218); } .ic-hipchat:before { content: "\e902"; @@ -116,17 +183,27 @@ body.dark .ic-email:before { } .ic-slack:before { content: "\e905"; - color: #56b68b; + color: rgb(255, 255, 255); } -.ic-telegram:before { +.ic-slack:after { + content: "\e92f"; + margin-left: -1em; + color: rgb(86, 182, 139); +} +.ic-telegram:after { content: "\e906"; color: #2ca5e0; } .ic-trello:before { content: "\e911"; - color: #0079bf; + color: rgb(255, 255, 255); +} +.ic-trello:after { + content: "\e931"; + margin-left: -1em; + color: rgb(0, 121, 191); } -.ic-whatsapp:before { +.ic-whatsapp:after { content: "\e903"; color: #25d366; } @@ -136,7 +213,13 @@ body.dark .ic-email:before { .ic-cancel:before { content: "\e5c9"; } -.ic-up:before, .ic-new:before, .ic-ok:before { +.ic-up:before { + content: "\e86c"; +} +.ic-new:before { + content: "\e86c"; +} +.ic-ok:before { content: "\e86c"; } .ic-grace:before { diff --git a/static/css/my_checks_desktop.css b/static/css/my_checks_desktop.css index cf1686c0..a2ec4477 100644 --- a/static/css/my_checks_desktop.css +++ b/static/css/my_checks_desktop.css @@ -63,6 +63,10 @@ } #checks-table .integrations span.off:before { + color: var(--channel-off-inside-color); +} + +#checks-table .integrations span.off:after { color: var(--channel-off-color); } diff --git a/static/css/variables.css b/static/css/variables.css index 438c86ce..64d0ac2c 100644 --- a/static/css/variables.css +++ b/static/css/variables.css @@ -21,6 +21,7 @@ --btn-remove-color: #d43f3a; --btn-remove-hover: #ffebea; --channel-off-color: #ddd; + --channel-off-inside-color: #FFF; --close-color: #000; --debug-warning-bg: #eee; --dropdown-bg: #fff; @@ -93,7 +94,8 @@ body.dark { --btn-remove-bg: #202024; --btn-remove-color: #ff4c46; --btn-remove-hover: #3f1a22; - --channel-off-color: hsl(240, 2%, 40%); + --channel-off-color: hsl(240, 6.7%, 23.5%); + --channel-off-inside-color: hsl(240, 3.7%, 43.5%); --close-color: #fff; --debug-warning-bg: #60002d; --dropdown-bg: hsl(240, 6%, 16%); diff --git a/static/fonts/icomoon.svg b/static/fonts/icomoon.svg index 19cd74f2..ef85ef3d 100644 --- a/static/fonts/icomoon.svg +++ b/static/fonts/icomoon.svg @@ -17,34 +17,50 @@ - - + + - - + + - - - - - - - + + + + + + + - + - - + + - - - + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/fonts/icomoon.ttf b/static/fonts/icomoon.ttf index d0bfd0100cd12e081208228588c30fabdcc51236..93c60827d80f657db5680817c1d87c519a825148 100644 GIT binary patch delta 1911 zcmY*aeN0nV6u;-*zSmb;XiG~A6e_gxij%LlP_*DcFe=W8P6t91`IaF}hHf%-10y(; zxwyT!s9TmTZi^X{X}X#Hp^<53w!}@$KEj+c2B!iV=VHuU;FXpAEC&OPVc z^X_}^NbA1#P6C7wE$JeRWRy8=0@~Aj}u#4YdYG<3b;#1?qal)UaV1i`AcMqoscK7!c5F}TlZfrwKV*(KIPY?7E{_pwVUDLcx_YirBPcBJ5VqC+d z%_3z#Js09Th?#Y6rUi`%q@elcd==@4D+ z3~+^hIoUq1bUuA+=U{4TU)9>?=CxIQsW_hKe}mc{Yb~4wDyq?`dC_M!#i>Cj2s$t^ zF19qwm~SbFjC6A=DCl%8QTjxIXC_U)$Fs$jyTM9X5ob0UX4|N;Uf^RLI;}y4>oq#u z7Tyao)sIC>N7dt!cgBstsf=C-%u3@yx)!r5pn2*tBt?XL{H&kYiHG>feDWNrB(-D% zd4s%%t&`eP?aMd^A2SE$g4yDAdwe1#vfMdyKyfi5pNzZ_`DD)F zaeK2IZflmq=?AZq^Ts%1oH@=MPP&~M-|0-YgW71})fP`4czp99TbvEFw78lwc->?x zSY5pUYBGz9Gc${dGJ{kL!8Vi4W`ZBgHk&!)afM}xyz-ZvLJd~_YFn_@MtGx>%Oc7u+m2y>u3#wmvm?pEhLJ2nm zfVY`~o>0CYO}6DM%{?*Uj+O4riZ?J@bnuF}a0aYjJY~jLZQz2nUL7bmcSFFYTSKKj z)0w~vmL`bC*F>oK{bV_5CGAQpd!m-l%oXu$sCm4iz-qzE4!J(Oo(7lb;;gwYHFHW6 zQOn`D^sGKXkT0h7ruD)~=_UOVxFMa=Cvdgh89Oti1jqi_%J%?q{HqhDb^84KM2n{s z#~+%L_}+djv4|2pwjX;lAz%90ThJ*gUenNw`e8&00#qdkLUtn#B03Oz5f;P{Vg%8R zSjM_SG3wbbC`$=d`H2#z1o5kiKqATk#2$naZ(2UjbOUvN$kwA1|Hx5!*pvmHN0Lb0 z*~uFmY`aQOjjA4SJXgdG^TYfo|3EFMW7Uh*tJO_Hv#?dTt=SyWtQECB?LuvnwnN*i zJrL=M3`Vs_jq3*tX@AOLt^9C#?Md!V5Ef{r#)PE+)48?KBz^Ujm+0ia6!&4J3E5kf!l zNkVC0=;nXXD4Rmjn#MmwHj|jM8l>lW>sEdXS1ZCJ zu$L?ztWUm?PG0QF+2?wmT0_6r=lYQAcH9^5F71pyXL3T^yJ z@PPt%K^Y!`&Cm}+YrK?a_wW?6)n$NH5 z<9OUB$2&Imb-(37C!)LB(Syj<*uf!nKBnEgS;xnN^S@+PH{ig%3nBG*p{wfRlfG`Z?8dmfPTaDx zyYFkeWCLO?B0b$}Gjej<5=t~7hoUWrd^fwAj#-n*pOI~jc3aI&4rCo_GuMV}r6 zy{zgDVXYpOY7bWrDO<{8w%X~qS~OOlkFgu-R(3dF*E{E|k49H6<#=AIksRq3S&lh4 zkL2owd$2&RJ>Jwc71e=BKwrC=y|GS*UMRJTRy{o0Uu}^iU0rr diff --git a/static/fonts/icomoon.woff b/static/fonts/icomoon.woff index e538de6d877651cc0773b04b677355ce58949c10..e79dd404f26cfcad5f10586f7f1db72d0c0675ab 100644 GIT binary patch delta 1977 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