Userguide CSS: add dark mode

Change-Id: I94c308ea22a304f061544a28e1490b9c004191d2
Reviewed-on: https://review.haiku-os.org/c/haiku/+/5329
Reviewed-by: nephele <nep@packageloss.eu>
Reviewed-by: waddlesplash <waddlesplash@gmail.com>
This commit is contained in:
Pascal Abresch 2021-11-02 20:15:25 +01:00 committed by waddlesplash
parent aa633b2839
commit 03ceb64ecb
4 changed files with 286 additions and 50 deletions

View File

@ -9,16 +9,105 @@
* Humdinger <humdingerb@gmail.com> * Humdinger <humdingerb@gmail.com>
* Vincent Duvert <vincent.duvert@free.fr> * Vincent Duvert <vincent.duvert@free.fr>
* Augustin Cavalier <waddlesplash> * Augustin Cavalier <waddlesplash>
* Pascal R. G. Abresch <nep@packageloss.eu>
*/ */
/* don't use @media (prefers-color-scheme: light) here, so it runs correctly in browsers that don't
understand it and thus expect a light mode as is the default for html */
:root {
color-scheme: light dark;
--CanvasBackground: #FFF;
--CanvasText: #333333;
--LinkText: #dc3c01;
--VisitedLinkText: #892601;
--TableBackground: #ff4500;
--TableHeaderBackground: #e0e0e0;
--HeaderColor: #0c3762;
--MenuColor: #24225e;
--ActiveLinkText: #ff4500;
--HeaderText: #0c3762;
--ButtonBackground: #e8e8e8;
--ButtonBorder: #c7c7c7;
--InfoBackground: #e4ffde;
--WarningBackground: #fffbc6;
--StopBackground: #ffeae6;
--SecondaryCanvas: #e0e0e0;
--TertiaryCanvas: #efefef;
}
@media (prefers-color-scheme: dark) {
:root {
--CanvasBackground: #000;
--LinkText: #f24000;
--VisitedLinkText: #bf3401;
--ActiveLinkText: #ff4500;
--HeaderText: #1b80e5;
--ButtonBorder: #666;
--InfoBackground: #0d2f3f;
--WarningBackground: #453b07;
--StopBackground: #4d0000;
--MenuColor: #5c57f2;
}
@media (prefers-contrast: no-preference) {
:root {
--CanvasText: #DDD;
--ButtonBackground: #444;
--SecondaryCanvas: #222;
--TertiaryCanvas: #131313;
}
}
@media (prefers-contrast: more) {
:root {
--CanvasText: #EFEFEF;
--ButtonBackground: #222;
--SecondaryCanvas: #111;
--TertiaryCanvas: #080808;
}
}
@media (prefers-contrast: less) {
:root {
--CanvasText: #AAA;
--ButtonBackground: #444;
}
}
}
@media (forced-colors: active) {
:root {
/* Userguide specific */
/* "Normal values" */
--HeaderText: LinkText;
--CanvasBackground: Canvas;
--CanvasText: CanvasText;
--LinkText: LinkText;
--VisitedLinkText: VisitedText;
--ActiveLinkText: ActiveText;
--ButtonBackground: ButtonFace;
--ButtonBorder: ButtonBorder;
--InputBackground: Field;
--InputText: FieldText;
--HighlightBackground: Highlight;
--HighlightText: HighlightText;
--SelectedBackground: SelectedItem;
--SelectedText: SelectedItemText;
--MarkBackground: Mark;
--MarkText: MarkText;
--DisabledText: GrayText;
}
}
html { html {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #FFF; background: var(--CanvasBackground);
} }
body { body {
color: #333333; color: var(--CanvasText);
line-height: 1.5; line-height: 1.5;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -30,35 +119,35 @@ body {
a:link { a:link {
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
color: #dc3c01; color: var(--LinkText);
} }
a:visited { a:visited {
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
color: #892601; color: var(--VisitedLinkText)
} }
a:hover, a:active { a:hover, a:active {
text-decoration: underline; text-decoration: underline;
color: #ff4500; color: var(--ActiveLinkText);
} }
/* Some headers act as anchors, don't give them a hover effect */ /* Some headers act as anchors, don't give them a hover effect */
h2 a:hover, a:active { h2 a:hover, a:active {
text-decoration: none; text-decoration: none;
color: #0c3762; color: var(--HeaderText);
} }
h3 a:hover, a:active { h3 a:hover, a:active {
text-decoration: none; text-decoration: none;
color: #0c3762; color: var(--HeaderText);
} }
h4 a:hover, a:active { h4 a:hover, a:active {
text-decoration: none; text-decoration: none;
color: #0c3762; color: var(--HeaderText);
} }
h5 a:hover, a:active { h5 a:hover, a:active {
text-decoration: none; text-decoration: none;
color: #0c3762; color: var(--HeaderText);
} }
/* heading and navigation */ /* heading and navigation */
@ -68,7 +157,7 @@ h5 a:hover, a:active {
left: 0; left: 0;
top: 0; top: 0;
height: 84px; height: 84px;
background: #eeeeee; background: var(--SecondaryCanvas);
} }
#banner div { #banner div {
@ -76,6 +165,13 @@ h5 a:hover, a:active {
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
} }
/* HaikuDark.svg -> Haiku logo - white on black - normal; canvas resize to width 254 */
@media (prefers-color-scheme: dark) {
#banner div {
background: url(images/HaikuDark.svg) no-repeat scroll 6px 8px, url(images/LeafDark.png) no-repeat scroll 10px 0;
}
}
@media (min-width:768px) { @media (min-width:768px) {
#banner { #banner {
min-width: 59em; min-width: 59em;
@ -90,7 +186,7 @@ h5 a:hover, a:active {
position: relative; position: relative;
top: 51px; top: 51px;
left: 272px; left: 272px;
color: #333333; color: var(--CanvasText);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 3px; letter-spacing: 3px;
font-family: Myriad Pro,Myriad Web Pro Regular,Lucida Grande,Geneva,Trebuchet MS,sans-serif; font-family: Myriad Pro,Myriad Web Pro Regular,Lucida Grande,Geneva,Trebuchet MS,sans-serif;
@ -102,7 +198,7 @@ div.nav {
position: relative; position: relative;
left: 0; left: 0;
top: 0; top: 0;
background: #e0e0e0; background: var(--SecondaryCanvas);
padding: 0; padding: 0;
} }
@media (min-width:768px) { @media (min-width:768px) {
@ -151,7 +247,7 @@ ul.lang-menu img {
ul.lang-menu li { ul.lang-menu li {
margin-left: 10px; margin-left: 10px;
background: #e0e0e0; background-color: var(--SecondaryCanvas);
display: none; display: none;
} }
@ -160,7 +256,7 @@ ul.lang-menu:hover li {
} }
ul.lang-menu li:hover { ul.lang-menu li:hover {
background-color: #efefef; background-color: var(--TertiaryCanvas);
} }
ul.lang-menu li.now { ul.lang-menu li.now {
@ -176,7 +272,7 @@ ul.lang-menu li.now span.dropdown-caret {
} }
ul.lang-menu li a { ul.lang-menu li a {
color: black; color: var(--CanvasText);
text-decoration: none; text-decoration: none;
font-weight: normal; font-weight: normal;
display: block; display: block;
@ -226,13 +322,13 @@ table.index {
z-index: 10; z-index: 10;
} }
table.index tr.heading { table.index tr.heading {
background-color: #e0e0e0; background-color: var(--SecondaryCanvas);
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
font-size: 1.1em; font-size: 1.1em;
} }
table.index tr.index { table.index tr.index {
background-color: #eeeeee; background-color: var(--TertiaryCanvas);
} }
table.index td { table.index td {
padding: 5px 20px; padding: 5px 20px;
@ -241,11 +337,11 @@ table.index td {
table.index a:link, table.index a:visited { table.index a:link, table.index a:visited {
font-weight: normal; font-weight: normal;
text-decoration: none; text-decoration: none;
color: #dc3c01; color: var(--VisitedLinkText)
} }
table.index a:hover, table.index a:active { table.index a:hover, table.index a:active {
text-decoration: underline; text-decoration: underline;
color: #ff4500; color: var(--ActiveLinkText);
} }
@ -269,27 +365,27 @@ table.index a:hover, table.index a:active {
min-height: 42px; min-height: 42px;
} }
.box-info { .box-info {
background: #e4ffde url(images/alert_info_32.png) 15px 15px no-repeat; background: var(--InfoBackground) url(images/alert_info_32.png) 15px 15px no-repeat;
} }
.box-warning { .box-warning {
background: #fffbc6 url(images/alert_warning_32.png) 15px 15px no-repeat; background: var(--WarningBackground) url(images/alert_warning_32.png) 15px 15px no-repeat;
} }
.box-stop { .box-stop {
background: #ffeae6 url(images/alert_stop_32.png) 15px 15px no-repeat; background: var(--StopBackground) url(images/alert_stop_32.png) 15px 15px no-repeat;
} }
/* More layout and styles */ /* More layout and styles */
h1 { h1 {
font-size: 1.3em; font-size: 1.3em;
font-weight: bold; font-weight: bold;
color: #0c3762; color: var(--HeaderText);
border-bottom: dotted thin #e0e0e0; border-bottom: dotted thin #e0e0e0;
margin-bottom: 25px; margin-bottom: 25px;
} }
h2 { h2 {
font-size: 1.3em; font-size: 1.3em;
font-weight: normal; font-weight: normal;
color: #0c3762; color: var(--HeaderText);
border-bottom: dotted thin #e0e0e0; border-bottom: dotted thin #e0e0e0;
margin-top: 18px; margin-top: 18px;
} }
@ -301,20 +397,20 @@ h2 {
h3 { h3 {
font-size: 1.2em; font-size: 1.2em;
font-weight: normal; font-weight: normal;
color: #0c3762; color: var(--HeaderText);
border-bottom: dotted thin #e0e0e0; border-bottom: dotted thin #e0e0e0;
margin-top: 30px; margin-top: 30px;
} }
h4 { h4 {
font-size: 1.1em; font-size: 1.1em;
font-weight: normal; font-weight: normal;
color: #0c3762; color: var(--HeaderText);
margin-top: 30px; margin-top: 30px;
} }
h5 { h5 {
font-size: 1.0em; font-size: 1.0em;
font-weight: normal; font-weight: normal;
color: #0c3762; color: var(--HeaderText);
margin-top: 30px; margin-top: 30px;
} }
p { p {
@ -337,17 +433,17 @@ td.onelinetop {
white-space: nowrap; white-space: nowrap;
} }
tt { tt {
background-color: #e2e2e2; background-color: var(--SecondaryCanvas);
font-size: 1.0em; font-size: 1.0em;
font-family: monospace; font-family: monospace;
} }
pre { pre {
border-color: #0c3762; border-color: var(--HeaderText);
border-style: dotted; border-style: dotted;
border-width: thin; border-width: thin;
margin: 0em; margin: 0em;
padding: 1.5em; padding: 1.5em;
background-color: #f0f0f0; background-color: var(--SecondaryCanvas);
} }
pre.terminal { /* Terminal output*/ pre.terminal { /* Terminal output*/
border-color: #ffb11f; border-color: #ffb11f;
@ -359,43 +455,43 @@ pre.terminal { /* Terminal output*/
color: #ffb11f; color: #ffb11f;
} }
.menu { /* Menu */ .menu { /* Menu */
font-size: 1.0em; font-size: 1.0em;
font-family: serif; font-family: serif;
font-style: italic; font-style: italic;
color: #24225e; color: var(--MenuColor);
} }
.button { /* Button */ .button { /* Button */
font-size: 1.0em; font-size: 1.0em;
font-family: serif; font-family: serif;
font-style: italic; font-style: italic;
color: #33583c; color: #33583c;
} }
.app { /* GUI Application name */ .app { /* GUI Application name */
font-size: 1.0em; font-size: 1.0em;
font-family: serif; font-family: serif;
font-style: italic; font-style: italic;
color: #5e1c1c; color: #5e1c1c;
} }
.cli { /* Shell command or file */ .cli { /* Shell command or file */
background-color: #e8e8e8; background-color: var(--SecondaryCanvas);
font-size: 0.9em; font-size: 0.9em;
font-family: monospace; font-family: monospace;
} }
.path { /* File path */ .path { /* File path */
background-color: #e8e8e8; background-color: var(--SecondaryCanvas);
font-size: 0.9em; font-size: 0.9em;
font-family: monospace; font-family: monospace;
} }
.key { /* Shortcut (separate with   */ .key { /* Shortcut (separate with   */
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-khtml-border-radius: 3px; -khtml-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
border-color: #c7c7c7; border-color: var(--ButtonBorder);
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
padding: 0px 2px 0px 2px; padding: 0px 2px 0px 2px;
background-color: #e8e8e8; background-color: var(--ButtonBackground);
font-family: serif; font-family: serif;
font-variant: small-caps; font-variant: small-caps;
font-size: 0.8em; font-size: 0.8em;

View File

@ -0,0 +1,110 @@
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg width="254" height="81" color-interpolation="linearRGB" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<g visibility="hidden">
</g>
<g opacity="0.4399">
<path style="fill:#808080"
d="M23.32 18.75v42.33h5.23c0 -14.11 0 -28.22 0 -42.33h-5.23v0z"
/>
<path style="fill:#808080"
d="M48.63 18.75c0 14.11 0 28.22 0 42.33h5.18v-42.33h-5.18v0z"
/>
<path style="fill:#808080"
d="M89.51 16.88l-20.07 44.2h5.68l14.5 -32.3l14.32 32.3h5.67l-20.11 -44.2v0z"
/>
<path style="fill:#808080"
d="M125.33 18.75v42.33h5.23v-42.33h-5.23v0z"
/>
<path style="fill:#808080"
d="M150.94 18.75v42.33h5.23v-17.63l2.05 -2.13l15.9 19.76h7.06l-19.22 -23.36l18.89 -18.97h-6.84l-17.84 18.29v-18.29h-5.23v0z"
/>
<path style="fill:#808080"
d="M221.71 18.75v25.44c0 4.06 -0.83 7.22 -2.5 9.48c-1.67 2.25 -4.25 3.37 -7.74 3.37c-3.66 0 -6.27 -1.23 -7.81 -3.7c-1.55 -2.48 -2.32 -5.37 -2.32 -8.7v-25.89h-5.18v27.17c0 2.57 0.53 5.08 1.62 7.52c1.08 2.45 2.77 4.48 5.09 6.08c2.3 1.6 5.17 2.42 8.6 2.46c2.26 0 4.34 -0.39 6.24 -1.17c1.89 -0.78 3.53 -1.9 4.91 -3.36c1.37 -1.46 2.43 -3.19 3.17 -5.2c0.73 -2 1.1 -4.2 1.1 -6.59v-26.9h-5.18v0z"
/>
</g>
<g>
<path style="fill:#ffffff"
d="M238.73 22.78c0 -0.91 0.34 -1.71 1.02 -2.4c0.68 -0.69 1.57 -1.03 2.67 -1.03c0.92 0 1.74 0.32 2.44 0.98c0.69 0.65 1.04 1.47 1.04 2.46c0 0.93 -0.32 1.76 -0.98 2.49c-0.65 0.72 -1.51 1.09 -2.58 1.09c-0.02 0 -0.04 0 -0.06 0c-0.02 0 -0.04 0 -0.06 0c-0.98 -0.02 -1.77 -0.34 -2.36 -0.93c-0.59 -0.59 -0.95 -1.25 -1.08 -1.96c-0.01 -0.08 -0.02 -0.18 -0.03 -0.27c-0 -0.09 -0.01 -0.18 -0.01 -0.27c0 -0.02 0 -0.04 0 -0.06c0 -0.02 0 -0.04 0 -0.06v-0z
M245.28 22.7c0 -0.01 0 -0.02 0 -0.04c0 -0.01 0 -0.03 0 -0.06c0 -0.09 -0 -0.19 -0.01 -0.29c-0.01 -0.1 -0.03 -0.2 -0.06 -0.3c-0.13 -0.52 -0.44 -1 -0.92 -1.44c-0.47 -0.43 -1.09 -0.65 -1.85 -0.65c-0.01 0 -0.02 0 -0.03 0c-0 0 -0.01 0 -0.03 0c-0.01 0 -0.02 0 -0.03 0c-0 0 -0.01 0 -0.03 0c-0.85 0.02 -1.5 0.27 -1.96 0.72c-0.46 0.45 -0.76 0.94 -0.91 1.48c-0.03 0.14 -0.06 0.28 -0.08 0.42c-0.01 0.13 -0.02 0.27 -0.02 0.4c0.02 0.69 0.21 1.25 0.58 1.67c0.36 0.42 0.76 0.73 1.19 0.93c0.2 0.09 0.4 0.16 0.6 0.21c0.19 0.04 0.37 0.06 0.53 0.06c0.83 0 1.5 -0.23 2.01 -0.71c0.51 -0.47 0.83 -0.99 0.97 -1.56c0.02 -0.09 0.04 -0.19 0.05 -0.29c0.01 -0.09 0.01 -0.19 0.01 -0.29c0 -0.04 0 -0.08 0 -0.12c0 -0.03 -0 -0.07 -0 -0.12v-0z
M240.87 20.94h1.78c0.42 0 0.74 0.08 0.96 0.24c0.21 0.15 0.32 0.4 0.32 0.75c0 0.34 -0.07 0.6 -0.23 0.76c-0.15 0.16 -0.43 0.28 -0.82 0.35l1.06 1.75h-0.71l-0.99 -1.76h-0.78v1.76h-0.57v-3.88z
M242.58 21.44h-1.14v1.05h1.21c0.24 0 0.42 -0.03 0.54 -0.13c0.11 -0.09 0.17 -0.21 0.17 -0.34c0 -0.14 -0.06 -0.27 -0.18 -0.38c-0.12 -0.11 -0.32 -0.17 -0.6 -0.17v-0z"
/>
</g>
<g>
<path style="fill:#ffffff"
d="M24.11 19.05v41.29h4.82v-41.29h-4.82z"
/>
<path style="fill:#ffffff"
d="M48.22 19.05v41.29h4.82v-41.29h-4.82z"
/>
<path style="fill:#ffffff"
d="M89.51 16.88l-20.07 43.41h5.68l14.5 -31.51l14.32 31.51h5.67l-20.11 -43.41v0z"
/>
<path style="fill:#ffffff"
d="M125.39 19.05v41.29h4.82v-41.29h-4.82z"
/>
<path style="fill:#ffffff"
d="M151.11 19.05v41.29h4.82l0.04 -16.89l2.25 -2.13l15.9 18.97h7.06l-19.22 -22.56l18.89 -18.67h-6.84l-18.04 18l-0.04 -17.99h-4.82z"
/>
<path style="fill:#ffffff"
d="M221.84 19.05l-0.03 25.14c0 4.06 -0.93 7.22 -2.6 9.48c-1.67 2.25 -4.25 3.37 -7.74 3.37c-3.66 0 -6.27 -1.23 -7.81 -3.7c-1.55 -2.48 -2.72 -5.37 -2.72 -8.7l0.03 -25.59h-4.82l0.01 26.87c0 2.57 0.53 5.08 1.62 7.52c1.08 2.45 2.77 4.48 5.09 6.08c2.3 1.6 5.17 2.42 8.6 2.46c2.26 0 4.34 -0.39 6.24 -1.17c1.89 -0.78 3.53 -1.9 4.91 -3.36c1.37 -1.46 2.33 -3.19 3.07 -5.2c0.73 -2 1 -4.2 1 -6.59l-0.02 -26.6h-4.82z"
/>
</g>
<g visibility="hidden">
<radialGradient id="gradient0" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="200" gradientTransform="matrix(0.105,-0.1173,-0.1402,-0.1975,214.2878,40.9923)">
<stop offset="0" stop-color="#ffa600"/>
<stop offset="1" stop-color="#ffeb16"/>
</radialGradient>
<path style="fill:url(#gradient0)"
d="M214.86 40.77c-1.21 6.24 0.32 10.94 3.6 14.43c0.05 -0.95 0.59 -2.33 0.9 -2.9c1.1 5.85 4.82 6.89 6.73 7.59c0.07 -0.71 -0.59 -1.09 -0.05 -2.76c0.62 1.31 1.19 2.05 1.93 3.15c1.11 0.28 2.32 0.99 3.52 1.14c1.48 0.18 3.45 0.36 5.09 0.49c-0.02 -0.74 0.2 -1.04 0.48 -1.5c0.19 0.57 0.45 1.1 0.78 1.58c1.69 -0.14 3.17 0.38 3.97 0.86c-0.88 -3.56 -3.48 -7.2 -5.82 -9.55c-1.37 -0.4 -2.37 0.27 -4.23 1.05c0.37 -1.04 1.14 -1.9 2.66 -2.39c-1.86 -1.51 -3.89 -2.83 -5.92 -4.08c-0.78 -0.48 -3.13 -1.39 -4.18 -2.13c-1.03 -0.01 -1.97 0.02 -2.84 0.12c0.59 -0.4 1.12 -0.88 1.77 -1.22c-2.67 -2.93 -4.73 -4.15 -7.91 -5.01c-2.88 -4.35 -4.2 -10.46 -3.49 -10.86l-1.67 0.93c0 0 1.48 6.78 4.65 11.05v0z"
/>
</g>
<g>
<radialGradient id="gradient1" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="200" gradientTransform="matrix(0.114,-0.1003,-0.1522,-0.1689,212.153,53.2874)">
<stop offset="0" stop-color="#ffa600"/>
<stop offset="1" stop-color="#ffee9c"/>
</radialGradient>
<path style="fill:url(#gradient1)"
d="M215 40.77c-1.2 6.24 0.32 10.94 3.59 14.43c0.05 -0.95 0.44 -1.64 0.76 -2.2c0.34 6.02 4.95 6.19 6.86 6.9c0.07 -0.71 -0.59 -1.09 -0.05 -2.76c0.62 1.31 1.19 2.05 1.92 3.15c1.11 0.28 2.31 0.99 3.51 1.14c1.48 0.18 3.44 0.36 5.07 0.49c-0.02 -0.74 0.2 -1.04 0.48 -1.5c0.19 0.57 0.45 1.1 0.78 1.58c1.69 -0.14 3.16 0.38 3.95 0.86c-0.88 -3.56 -3.47 -7.2 -5.8 -9.55c-1.37 -0.4 -2.36 0.27 -4.22 1.05c0.37 -1.04 1.14 -1.9 2.65 -2.39c-1.85 -1.51 -3.88 -2.83 -5.9 -4.08c-0.78 -0.48 -3.13 -1.39 -4.16 -2.13c-1.02 -0.01 -1.96 0.02 -2.83 0.12c0.59 -0.4 1.12 -0.88 1.77 -1.22c-2.66 -2.93 -4.71 -4.15 -7.89 -5.01c-2.88 -4.35 -4.19 -10.46 -3.48 -10.86l-1.66 0.93c0 0 1.48 6.78 4.64 11.05v0z"
/>
</g>
<g visibility="hidden">
<radialGradient id="gradient2" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="200" gradientTransform="matrix(0.2685,-0.0194,0.0101,0.0662,89.1002,41.7602)">
<stop offset="0" stop-color="#ff4500"/>
<stop offset="1" stop-color="#ffaa00"/>
</radialGradient>
<path style="fill:url(#gradient2)"
d="M106.7 50.42c-3.38 -6.91 -8.3 -10.36 -14.03 -11.42c0.64 0.96 1.07 2.39 1.17 3.28c-5.57 -5.5 -9.63 -3.08 -12 -2.41c1.15 0.77 1.9 1.02 2.35 3.25c-2.21 -1.48 -3.78 -1.66 -5.12 -2.13c-1.28 0.51 -2.3 0.5 -3.58 1.21c-1.57 0.87 -3.61 2.09 -5.29 3.12c0.56 0.7 0.56 1.15 0.63 1.8c-0.6 -0.41 -1.24 -0.74 -1.92 -0.97c-1.53 1.34 -3.35 1.87 -4.47 1.97c3.46 2.82 8.63 4.51 12.61 5.12c1.62 -0.58 2.09 -1.94 3.33 -4.02c0.39 1.27 0.27 2.65 -0.83 4.2c2.91 0.14 5.84 -0.01 8.71 -0.24c1.11 -0.08 4.05 -0.87 5.6 -0.89c1 -0.71 1.88 -1.42 2.65 -2.13c-0.27 0.81 -0.44 1.65 -0.82 2.44c4.73 0.94 7.61 0.67 11.32 -0.74c5.97 2.17 11.71 7.15 11.31 8.04l0.93 -2.08c0 0 -6.39 -5.52 -12.58 -7.4v0z"
/>
</g>
<g>
<radialGradient id="gradient3" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="200" gradientTransform="matrix(0.2677,-0.0278,0.0101,0.0948,88.7923,39.4077)">
<stop offset="0" stop-color="#ff7200"/>
<stop offset="1" stop-color="#ffaa00"/>
</radialGradient>
<path style="fill:url(#gradient3)"
d="M106.34 50.42c-3.37 -6.91 -8.28 -10.36 -13.99 -11.42c0.64 0.96 0.76 1.9 0.86 2.67c-4.72 -5.58 -9.3 -2.47 -11.66 -1.8c0.44 0.74 1.37 0.63 2.07 2.64c-1.55 -0.82 -2.65 -1.14 -4.16 -1.68c-1.28 0.51 -2.96 0.67 -4.23 1.38c-1.56 0.87 -3.6 2.09 -5.27 3.12c0.56 0.7 0.56 1.15 0.63 1.8c-0.6 -0.41 -1.24 -0.74 -1.91 -0.97c-1.52 1.34 -3.34 1.87 -4.46 1.97c3.45 2.82 8.6 4.51 12.57 5.12c1.62 -0.58 2.09 -1.94 3.32 -4.02c0.39 1.27 0.27 2.65 -0.83 4.2c2.9 0.14 5.83 -0.01 8.68 -0.24c1.11 -0.08 4.04 -0.87 5.59 -0.89c1 -0.71 1.88 -1.42 2.65 -2.13c-0.27 0.81 -0.44 1.65 -0.81 2.44c4.71 0.94 7.59 0.67 11.29 -0.74c5.96 2.17 11.67 7.15 11.28 8.04l0.93 -2.08c0 0 -6.37 -5.52 -12.54 -7.4v0z"
/>
</g>
<g visibility="hidden">
<path style="fill:#010101; fill-opacity:0.7333"
d="M24.72 46.46c5.62 5.3 11.13 6.91 16.87 5.94c-1.2 -1.29 -1.07 -1.58 -1.44 -2.27c7.47 2.57 9.62 -0.88 11.6 -2.33c-0.68 -0.54 -1.51 -0.11 -2.88 -1.76c1.75 0.24 2.89 0.15 4.51 0.14c1.01 -0.92 2.54 -1.65 3.49 -2.75c1.16 -1.35 2.64 -3.21 3.85 -4.75c-0.77 -0.46 -1.35 -1.16 -1.65 -1.75c0.71 0.18 1.84 0.54 2.56 0.53c0.95 -1.78 2.47 -2.91 3.49 -3.39c-4.24 -1.45 -9.69 -1.25 -13.63 -0.46c-1.31 1.1 -1.27 2.54 -1.7 4.91c-0.82 -1.06 -1.19 -2.39 -0.71 -4.23c-2.77 0.86 -5.47 2.02 -8.08 3.22c-1.01 0.46 -2.89 1.93 -4.34 2.48c-0.8 1.78 -1.6 3.27 -2.71 4.36c-0.2 -1.19 -0.1 -2.68 0.28 -3.74c-4.77 0.73 -7.37 1.98 -10.34 4.59c-6.37 0.02 -13.5 -2.67 -13.45 -3.64l-0.13 2.27c0 0 7.94 2.97 14.41 2.61v0z"
/>
<radialGradient id="gradient4" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="200" gradientTransform="matrix(0.3339,-0.1339,0.0537,0.1115,36.0376,51.6369)">
<stop offset="0" stop-color="#33a02c"/>
<stop offset="1" stop-color="#a9ff00"/>
</radialGradient>
<path style="fill:url(#gradient4)"
d="M24.09 45.87c5.6 5.3 11.42 6.85 17.15 5.87c-0.94 -0.68 -1.39 -1.52 -1.76 -2.2c6.39 3.6 9.59 -0.88 11.57 -2.33c-0.67 -0.54 -1.5 -0.11 -2.87 -1.76c1.75 0.24 2.88 0.15 4.49 0.14c1.01 -0.92 2.54 -1.65 3.48 -2.75c1.16 -1.35 2.63 -3.21 3.83 -4.75c-0.77 -0.46 -0.93 -0.88 -1.22 -1.47c0.71 0.18 1.42 0.26 2.13 0.25c0.95 -1.78 2.46 -2.91 3.48 -3.39c-4.23 -1.45 -9.66 -1.25 -13.59 -0.46c-1.31 1.1 -1.27 2.54 -1.69 4.91c-0.82 -1.06 -1.19 -2.39 -0.7 -4.23c-2.77 0.86 -5.45 2.02 -8.05 3.22c-1.01 0.46 -3.48 2.21 -4.92 2.76c-0.69 1.01 -1.26 1.98 -1.73 2.91c-0.03 -0.85 -0.16 -1.7 -0.09 -2.57c-4.75 0.73 -7.35 1.98 -10.31 4.59c-6.35 0.02 -13.47 -2.67 -13.41 -3.64l-0.13 2.27c0 0 7.92 2.97 14.37 2.61v0z"
/>
</g>
<g>
<radialGradient id="gradient5" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="200" gradientTransform="matrix(0.3339,-0.1339,0.0537,0.1115,36.0376,51.6369)">
<stop offset="0" stop-color="#33a02c"/>
<stop offset="1" stop-color="#a9ff00"/>
</radialGradient>
<path style="fill:url(#gradient5)"
d="M24.09 45.87c5.6 5.3 11.42 6.85 17.15 5.87c-0.94 -0.68 -1.39 -1.52 -1.76 -2.2c6.39 3.6 9.59 -0.88 11.57 -2.33c-0.67 -0.54 -1.5 -0.11 -2.87 -1.76c1.75 0.24 2.88 0.15 4.49 0.14c1.01 -0.92 2.54 -1.65 3.48 -2.75c1.16 -1.35 2.63 -3.21 3.83 -4.75c-0.77 -0.46 -0.93 -0.88 -1.22 -1.47c0.71 0.18 1.42 0.26 2.13 0.25c0.95 -1.78 2.46 -2.91 3.48 -3.39c-4.23 -1.45 -9.66 -1.25 -13.59 -0.46c-1.31 1.1 -1.27 2.54 -1.69 4.91c-0.82 -1.06 -1.19 -2.39 -0.7 -4.23c-2.77 0.86 -5.45 2.02 -8.05 3.22c-1.01 0.46 -3.48 2.21 -4.92 2.76c-0.69 1.01 -1.26 1.98 -1.73 2.91c-0.03 -0.85 -0.16 -1.7 -0.09 -2.57c-4.75 0.73 -7.35 1.98 -10.31 4.59c-6.35 0.02 -13.47 -2.67 -13.41 -3.64l-0.13 2.27c0 0 7.92 2.97 14.37 2.61v0z"
/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

View File

@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg width="372" height="121" color-interpolation="linearRGB" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<g visibility="hidden">
<path style="fill:none; stroke:#e8e8e8; stroke-opacity:0; stroke-width:0.2"
d="M90.85 597.23c6.97 -6.68 14.21 -8.62 21.33 -7.4c-1.17 0.86 -1.72 1.91 -2.19 2.78c7.96 -4.54 11.94 1.11 14.39 2.93c-0.84 0.68 -1.87 0.15 -3.57 2.21c2.17 -0.3 3.59 -0.19 5.59 -0.18c1.26 1.16 3.16 2.08 4.33 3.47c1.44 1.71 3.27 4.04 4.77 5.98c-0.96 0.59 -1.16 1.11 -1.52 1.85c0.88 -0.22 1.77 -0.33 2.66 -0.32c1.19 2.25 3.07 3.66 4.33 4.26c-5.27 1.83 -12.02 1.58 -16.91 0.58c-1.63 -1.39 -1.58 -3.2 -2.11 -6.19c-1.02 1.33 -1.48 3.01 -0.88 5.32c-3.44 -1.08 -6.79 -2.54 -10.02 -4.06c-1.25 -0.58 -4.33 -2.78 -6.12 -3.48c-0.85 -1.27 -1.95 -2.85 -2.54 -4.02c-0.54 0.81 -0.42 2.54 0.15 3.81c-5.91 -0.92 -9.03 -2.71 -12.72 -5.99c-7.9 -0.02 -16.44 3.52 -16.37 4.74l-0.16 -2.86c0 0 9.54 -3.89 17.57 -3.44v0z"
transform="matrix(1.5854,0.6056,1.7959,-3.675,-1127.1127,2182.58)"
/>
<path style="fill:#efefef"
d="M-86 86v39h1555v-39h-1555z"
/>
<path style="fill:#a2a2a2"
d="M-86 86v15h1555v-15h-1555z"
/>
</g>
<g>
<path style="fill:none; stroke:#e8e8e8; stroke-width:0.2"
d="M90.85 597.23c6.97 -6.68 14.21 -8.62 21.33 -7.4c-1.17 0.86 -1.72 1.91 -2.19 2.78c7.96 -4.54 11.94 1.11 14.39 2.93c-0.84 0.68 -1.87 0.15 -3.57 2.21c2.17 -0.3 3.59 -0.19 5.59 -0.18c1.26 1.16 3.16 2.08 4.33 3.47c1.44 1.71 3.27 4.04 4.77 5.98c-0.96 0.59 -1.16 1.11 -1.52 1.85c0.88 -0.22 1.77 -0.33 2.66 -0.32c1.19 2.25 3.07 3.66 4.33 4.26c-5.27 1.83 -12.02 1.58 -16.91 0.58c-1.63 -1.39 -1.58 -3.2 -2.11 -6.19c-1.02 1.33 -1.48 3.01 -0.88 5.32c-3.44 -1.08 -6.79 -2.54 -10.02 -4.06c-1.25 -0.58 -4.33 -2.78 -6.12 -3.48c-0.85 -1.27 -1.95 -2.85 -2.54 -4.02c-0.54 0.81 -0.42 2.54 0.15 3.81c-5.91 -0.92 -9.03 -2.71 -12.72 -5.99c-7.9 -0.02 -16.44 3.52 -16.37 4.74l-0.16 -2.86c0 0 9.54 -3.89 17.57 -3.44v0z"
transform="matrix(1.5854,0.6056,1.7959,-3.675,-1127.1127,2182.58)"
/>
<path style="fill:#a2a2a2"
d="M-86 86v39h1555v-39h-1555z"
/>
</g>
<g visibility="hidden">
<path style="fill:none; stroke:#010101; stroke-width:0.2"
d="M90.85 597.23c6.97 -6.68 14.21 -8.62 21.33 -7.4c-1.17 0.86 -1.72 1.91 -2.19 2.78c7.96 -4.54 11.94 1.11 14.39 2.93c-0.84 0.68 -1.87 0.15 -3.57 2.21c2.17 -0.3 3.59 -0.19 5.59 -0.18c1.26 1.16 3.16 2.08 4.33 3.47c1.44 1.71 3.27 4.04 4.77 5.98c-0.96 0.59 -1.16 1.11 -1.52 1.85c0.88 -0.22 1.77 -0.33 2.66 -0.32c1.19 2.25 3.07 3.66 4.33 4.26c-5.27 1.83 -12.02 1.58 -16.91 0.58c-1.63 -1.39 -1.58 -3.2 -2.11 -6.19c-1.02 1.33 -1.48 3.01 -0.88 5.32c-3.44 -1.08 -6.79 -2.54 -10.02 -4.06c-1.25 -0.58 -4.33 -2.78 -6.12 -3.48c-0.85 -1.27 -1.95 -2.85 -2.54 -4.02c-0.54 0.81 -0.42 2.54 0.15 3.81c-5.91 -0.92 -9.03 -2.71 -12.72 -5.99c-7.9 -0.02 -16.44 3.52 -16.37 4.74l-0.16 -2.86c0 0 9.54 -3.89 17.57 -3.44v0z"
transform="matrix(1.5854,0.6056,1.7959,-3.675,-1127.1127,2182.58)"
/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.0 KiB