[gnome-shell/wip/snwh/sass-cleanup] theme: update keyboard to use button drawing
- From: Sam Hewitt <snwh src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell/wip/snwh/sass-cleanup] theme: update keyboard to use button drawing
- Date: Tue, 3 Dec 2019 15:04:48 +0000 (UTC)
commit e0d59b5a0340f9029313ca44d4a5de4c17b384bf
Author: Sam Hewitt <sam snwh org>
Date: Tue Dec 3 10:04:43 2019 -0500
theme: update keyboard to use button drawing
data/theme/gnome-shell-sass/_colors.scss | 5 +-
data/theme/gnome-shell-sass/_drawing.scss | 82 ++++++-------
data/theme/gnome-shell-sass/widgets/_keyboard.scss | 48 ++++----
.../gnome-shell-sass/widgets/_login-dialog.scss | 2 +-
data/theme/key-enter.svg | 111 +----------------
data/theme/key-hide.svg | 115 +-----------------
data/theme/key-layout.svg | 132 +--------------------
data/theme/key-shift-latched-uppercase.svg | 110 +----------------
data/theme/key-shift-uppercase.svg | 105 +---------------
data/theme/key-shift.svg | 109 +----------------
10 files changed, 87 insertions(+), 732 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss
index c2506d90d2..c0c46f81f2 100644
--- a/data/theme/gnome-shell-sass/_colors.scss
+++ b/data/theme/gnome-shell-sass/_colors.scss
@@ -25,9 +25,10 @@ $osd_bg_color: if($variant == 'light', rgba(255,255,255,0.9), transparentize(dar
$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
$osd_borders_color: if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.3));
-$osd_outer_borders_color: if($variant == 'light', rgba(255,255,255,0.4), rgba(255,255,255,0.1));
+$osd_outer_borders_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(255,255,255,0.1));
-$shadow_color: rgba(0,0,0,0.9);
+$shadow_color: rgba(0,0,0,0.4);
+$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.2), rgba(0,0,0,0.2));
//insensitive state derived colors
$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 141c1bc58c..e6c17468e5 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -2,7 +2,7 @@
// generic drawing of more complex things
-@function _widget_edge($c:$borders_edge) {
+@function draw_widget_edge($c:$borders_edge) {
// outer highlight "used" on most widgets
@return 0 1px $c;
}
@@ -13,7 +13,7 @@
//font-size: ($size / $base) * 1rem;
}
-@mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
+@mixin draw_shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
//
// Helper function to stack up to 4 box-shadows;
//
@@ -31,8 +31,7 @@
//
// $t: entry type
// $fc: focus color
-// $edge: set to none to not draw the bottom edge or specify a color to not
-// use the default one
+// $edge: set to none to not draw the bottom edge or specify a color to not use the default one
//
// possible $t values:
// normal, focus, insensitive
@@ -45,8 +44,8 @@
}
@if $t==focus {
border-color: if($fc==$selected_bg_color,
- $selected_borders_color,
- darken($fc,35%));
+ $selected_borders_color,
+ darken($fc,35%));
}
@if $t==hover { }
@if $t==insensitive {
@@ -58,23 +57,26 @@
// buttons
-@function _border_color ($c) { @return darken($c,25%); } // colored buttons want
-
// the border form the
-
// base color
+@function draw_border_color ($c) {
+ //
+ // colored buttons want the border form the base color
+ //
+ @return darken($c,16%);
+}
-@function _text_shadow_color ($tc:$fg_color, $bg:$bg_color) {
+@function draw_text_shadow_color ($tc:$fg_color, $bg:$bg_color) {
//
// calculate the color of text shadows
//
// $tc is the text color
// $bg is the background color
//
- $_lbg: lightness($bg)/100%;
- @if lightness($tc)<50% { @return rgba(255,255,255,1-$_lbg/($_lbg*1.3)); }
- @else { @return rgba(0,0,0,$_lbg*0.8); }
+ $lbg: lightness($bg)/100%;
+ @if lightness($tc)<50% { @return rgba(255,255,255,1-$lbg/($lbg*1.3)); }
+ @else { @return rgba(0,0,0,$lbg*0.8); }
}
-@function _button_hilight_color($c) {
+@function draw_button_hilight_color($c) {
//
// calculate the right top hilight color for buttons
//
@@ -87,7 +89,7 @@
@else { @return rgba(255,255,255, 0.9); }
}
-@mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
+@mixin draw_button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
//
// helper function for the text emboss effect
//
@@ -96,15 +98,15 @@
// TODO: this functions needs a way to deal with special cases
//
- $_shadow: _text_shadow_color($tc, $bg);
+ $shadow: draw_text_shadow_color($tc, $bg);
@if lightness($tc)<50% {
- text-shadow: 0 1px $_shadow;
- icon-shadow: 0 1px $_shadow;
+ text-shadow: 0 1px $shadow;
+ icon-shadow: 0 1px $shadow;
}
@else {
- text-shadow: 0 -1px $_shadow;
- icon-shadow: 0 -1px $_shadow;
+ text-shadow: 0 -1px $shadow;
+ icon-shadow: 0 -1px $shadow;
}
}
@@ -124,45 +126,45 @@
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
//
- $_hilight_color: _button_hilight_color($c);
- $_button_edge: if($edge == none, none, _widget_edge($edge));
- $_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1)));
- $_button_shadow: 0 1px 2px transparentize($shadow_color, 0.03);
+ $hilight_color: draw_button_hilight_color($c);
+ $button_edge: if($edge == none, none, draw_widget_edge($edge));
+ $blank_edge: if($edge == none, none, draw_widget_edge(transparentize($edge,1)));
// normal button
@if $t==normal {
color: $tc;
background-color: $c;
- border-color: $borders_color;
- box-shadow: $_button_shadow;
- text-shadow: 0 1px black;
- icon-shadow: 0 1px black;
+ border-color: draw_border_color($c);
+ @include draw_shadows(0 1px 1px 0 rgba(0,0,0,0.1));
+ // box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
+ text-shadow: 0 1px rgba(0,0,0,0.4);
+ icon-shadow: 0 1px rgba(0,0,0,0.4);
}
// focused button
@if $t==focus {
color: $tc;
- text-shadow: 0 1px black;
- icon-shadow: 0 1px black;
- box-shadow: inset 0 0 0 2px $selected_bg_color;
+ text-shadow: 0 1px rgba(0,0,0,0.4);
+ icon-shadow: 0 1px rgba(0,0,0,0.4);
+ box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.7);
//border-color: $selected_bg_color;
}
- // active osd button
+ // hover osd button
@else if $t==hover {
color: $tc;
- border-color: $borders_color;
- background-color: $c;
- box-shadow: $_button_shadow;
- text-shadow: 0 1px black;
- icon-shadow: 0 1px black;
+ background-color: lighten($c,3%);
+ border-color: draw_border_color(lighten($c,5%));
+ @include draw_shadows(0 1px 1px 0 rgba(0,0,0,0.1));
+ text-shadow: 0 1px rgba(0,0,0,0.4);
+ icon-shadow: 0 1px rgba(0,0,0,0.4);
}
// active osd button
@else if $t==active {
color: $tc;
- border-color: $borders_color;
- background-color: $c;
+ background-color: darken($c,5%);
+ border-color: draw_border_color(darken($c,4%));
text-shadow: none;
icon-shadow: none;
box-shadow: none;
@@ -183,7 +185,7 @@
border-color: transparent;
background-color: transparent;
background-image: none;
- @include _shadows(inset 0 1px rgba(255,255,255,1),$_blank_edge);
+ @include draw_shadows(inset 0 1px rgba(255,255,255,1),$blank_edge);
text-shadow: none;
icon-shadow: none;
}
diff --git a/data/theme/gnome-shell-sass/widgets/_keyboard.scss
b/data/theme/gnome-shell-sass/widgets/_keyboard.scss
index fba69d5edf..84400d53ef 100644
--- a/data/theme/gnome-shell-sass/widgets/_keyboard.scss
+++ b/data/theme/gnome-shell-sass/widgets/_keyboard.scss
@@ -7,25 +7,19 @@ $key_bg_color: lighten($bg_color, if($variant=='light', 0%, 2%));
$default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten($osd_bg_color, 2%));
+// draw keys using button function
%keyboard_key {
- background-color: $key_bg_color;
- border-radius: $key_border_radius;
- border: 1px solid if($variant=='light', darken($borders_color, 9%), darken($borders_color, 5%));
- box-shadow: inset 0 1px 0 0 $borders_edge;
- color: $osd_fg_color;
- &:focus { @include button(focus); }
- &:hover, &:checked { background-color: lighten($key_bg_color, 3%); }
- &:active {
- border: 1px solid darken($borders_color, 20%);
- background-color: darken($key_bg_color, 2%);
- &:checked { background-color: red;}
- }
+ @include button(normal, $c:$key_bg_color, $tc:$osd_fg_color);
+
+ &:focus { @include button(focus);}
+ &:hover, &:checked { @include button(hover, $c: $key_bg_color);}
+ &:active { @include button(active, $c: $key_bg_color); }
}
#keyboard {
background-color: transparentize(if($variant=='light', darken($bg_color, 5%), darken($bg_color, 8%)),
0.1);
- box-shadow: inset 0 1px 0 0 $borders_edge;
+ box-shadow: inset 0 1px 0 0 $osd_outer_borders_color !important;
.page-indicator {
padding: $base_padding;
@@ -37,38 +31,48 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
}
}
+// the container for individual keys
.key-container {
+ background-color: transparent;
padding: $base_margin;
spacing: $base_margin;
}
+// the keys
.keyboard-key {
@extend %keyboard_key;
font-size: $base_font_size + 5pt;
min-height: $key_size;
min-width: $key_size;
+ border-radius: $key_border_radius;
+
&:grayed { //FIXME
background-color: $bg_color;
color: $osd_fg_color;
border-color: $osd_borders_color;
}
+ // non-character keys
&.default-key {
- background-color: $default_key_bg_color;
- background-size: 20px;
- &:hover, &:checked { background-color: lighten($default_key_bg_color, 3%); }
- &:active { background-color: darken($default_key_bg_color, 2%); }
+
+ // size of the icon asset
+ background-size: 24px;
+
+ @include button(normal, $c:$default_key_bg_color);
+ &:hover, &:checked {@include button(hover, $c: $default_key_bg_color);}
+ &:active { @include button(active, $c: $default_key_bg_color);}
+ box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) !important; // drawing override because of a visual
bug
}
// enter key is suggested-action
&.enter-key {
- border: 1px solid if($variant=='light', darken($selected_bg_color, 9%),
lighten($selected_bg_color, 5%));
- background-color: $selected_bg_color;
- color: $selected_fg_color;
background-image: url("resource:///org/gnome/shell/theme/key-enter.svg");
- &:hover, &:checked { background-color: lighten($selected_bg_color, 3%); }
- &:active { background-color: darken($selected_bg_color, 2%); }
+
+ @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
+ &:hover, &:checked { @include button(hover, $c: lighten($selected_bg_color, 3%));}
+ &:active {@include button(active, $c: darken($selected_bg_color, 2%));}
+ box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) !important; // drawing override because of a visual
bug
}
// key assets
diff --git a/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
b/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
index 1a33f2a9a2..890280248b 100644
--- a/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
+++ b/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
@@ -26,7 +26,7 @@
.modal-dialog-button-box { spacing: 3px; }
.modal-dialog-button {
padding: 4px 18px;
- box-shadow: 0 1px 3px transparentize($shadow_color, 0.02);
+ box-shadow: 0 1px 3px rgba(0,0,0,0.2);
background-color: $_gdm_bg;
border-color: $_gdm_bg;
color: $fg_color;
diff --git a/data/theme/key-enter.svg b/data/theme/key-enter.svg
index ea7b243b57..f758eee913 100644
--- a/data/theme/key-enter.svg
+++ b/data/theme/key-enter.svg
@@ -1,109 +1,4 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
- xmlns:osb="http://www.openswatchbook.org/uri/2009/osb";
- xmlns:dc="http://purl.org/dc/elements/1.1/";
- xmlns:cc="http://creativecommons.org/ns#";
- xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
- xmlns:svg="http://www.w3.org/2000/svg";
- xmlns="http://www.w3.org/2000/svg";
- xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
- xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
- width="32"
- viewBox="0 0 32 32"
- version="1.1"
- id="svg7384"
- height="32"
- sodipodi:docname="key-enter.svg"
- inkscape:version="0.92.2 (5c3e80d, 2017-08-06)">
- <sodipodi:namedview
- pagecolor="#ffffff"
- bordercolor="#666666"
- borderopacity="1"
- objecttolerance="10"
- gridtolerance="10"
- guidetolerance="10"
- inkscape:pageopacity="0"
- inkscape:pageshadow="2"
- inkscape:window-width="1744"
- inkscape:window-height="866"
- id="namedview19"
- showgrid="false"
- inkscape:zoom="14.75"
- inkscape:cx="7.9322034"
- inkscape:cy="14.554666"
- inkscape:window-x="0"
- inkscape:window-y="55"
- inkscape:window-maximized="0"
- inkscape:current-layer="svg7384" />
- <metadata
- id="metadata90">
- <rdf:RDF>
- <cc:Work
- rdf:about="">
- <dc:format>image/svg+xml</dc:format>
- <dc:type
- rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
- <dc:title>Gnome Symbolic Icon Theme</dc:title>
- </cc:Work>
- </rdf:RDF>
- </metadata>
- <title
- id="title9167">Gnome Symbolic Icon Theme</title>
- <defs
- id="defs7386">
- <linearGradient
- osb:paint="solid"
- id="linearGradient19282"
- gradientTransform="matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)">
- <stop
- style="stop-color:#666666;stop-opacity:1;"
- offset="0"
- id="stop19284" />
- </linearGradient>
- </defs>
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="layer9" />
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="layer10" />
- <g
- transform="translate(-141.0002,-791)"
- id="layer11" />
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="layer13" />
- <g
- transform="translate(-141.0002,-791)"
- id="layer14" />
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="layer15" />
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="g71291" />
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="g4953" />
- <g
- transform="matrix(2,0,0,2,-281.56285,-1615.0002)"
- style="display:inline"
- id="layer12">
- <path
- id="path16589"
- d="m 148.00015,821.0002 h -1 c -0.26528,0 -0.53057,-0.093 -0.71875,-0.2812 l -3.71875,-3.7188 c 0,0
2.47917,-2.4792 3.71875,-3.7187 0.18817,-0.1882 0.45344,-0.2813 0.71875,-0.2813 h 1 v 1 c 0,0.2653
-0.0931,0.5306 -0.28125,0.7188 l -2.28125,2.2812 2.28125,2.2813 c 0.18811,0.1881 0.28129,0.4534
0.28125,0.7187 z"
-
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:'Bitstream
Vera Sans';-inkscape-font-specification:'Bitstream Vera
Sans';text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:2;marker:none;enable-background:accumulate"
- inkscape:connector-curvature="0" />
- <path
-
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;stroke:#bebebe;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
- d="m 154.0002,810 v 4.5 c 0,1.3807 -1.11929,2.5 -2.5,2.5 h -6.50005"
- id="path16591"
- inkscape:connector-curvature="0" />
- </g>
+<svg xmlns="http://www.w3.org/2000/svg"; class="keyboard-key" width="24" height="24">
+ <path overflow="visible" font-weight="400"
style="line-height:normal;-inkscape-font-specification:'Bitstream Vera
Sans';text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none" d="M10
23H8.5c-.398 0-.796-.14-1.079-.422L.345 15.5l7.078-7.078C7.704 8.14 8.102 8 8.5 8H10v1.5c0 .398-.14.796-.422
1.079L4.657 15.5l4.921 4.922c.282.282.422.68.422 1.078z" color="#000" font-family="Bitstream Vera Sans"
fill="#fff"/>
+ <path overflow="visible" d="M22 1.5v9a5 5 0 01-5 5H4" style="marker:none" color="#000" fill="none"
stroke="#fff" stroke-width="3"/>
</svg>
diff --git a/data/theme/key-hide.svg b/data/theme/key-hide.svg
index 288fe881e7..ac728a0b7b 100644
--- a/data/theme/key-hide.svg
+++ b/data/theme/key-hide.svg
@@ -1,114 +1,3 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
- xmlns:osb="http://www.openswatchbook.org/uri/2009/osb";
- xmlns:dc="http://purl.org/dc/elements/1.1/";
- xmlns:cc="http://creativecommons.org/ns#";
- xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
- xmlns:svg="http://www.w3.org/2000/svg";
- xmlns="http://www.w3.org/2000/svg";
- xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
- xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
- width="32"
- viewBox="0 0 32 32"
- version="1.1"
- id="svg7384"
- height="32"
- sodipodi:docname="key-hide.svg"
- inkscape:version="0.92.2 (5c3e80d, 2017-08-06)">
- <sodipodi:namedview
- pagecolor="#ffffff"
- bordercolor="#666666"
- borderopacity="1"
- objecttolerance="10"
- gridtolerance="10"
- guidetolerance="10"
- inkscape:pageopacity="0"
- inkscape:pageshadow="2"
- inkscape:window-width="1919"
- inkscape:window-height="1011"
- id="namedview19"
- showgrid="false"
- inkscape:zoom="14.75"
- inkscape:cx="-12.338983"
- inkscape:cy="14.554666"
- inkscape:window-x="0"
- inkscape:window-y="55"
- inkscape:window-maximized="0"
- inkscape:current-layer="svg7384" />
- <metadata
- id="metadata90">
- <rdf:RDF>
- <cc:Work
- rdf:about="">
- <dc:format>image/svg+xml</dc:format>
- <dc:type
- rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
- <dc:title>Gnome Symbolic Icon Theme</dc:title>
- </cc:Work>
- </rdf:RDF>
- </metadata>
- <title
- id="title9167">Gnome Symbolic Icon Theme</title>
- <defs
- id="defs7386">
- <linearGradient
- osb:paint="solid"
- id="linearGradient19282"
- gradientTransform="matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)">
- <stop
- style="stop-color:#666666;stop-opacity:1;"
- offset="0"
- id="stop19284" />
- </linearGradient>
- </defs>
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="layer9" />
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="layer10" />
- <g
- transform="translate(-141.0002,-791)"
- id="layer11" />
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="layer13" />
- <g
- transform="translate(-141.0002,-791)"
- id="layer14" />
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="layer15" />
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="g71291" />
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="g4953" />
- <g
- style="display:inline"
- inkscape:label="go-down"
- id="g11722"
- transform="matrix(2,0,0,2,-362.0004,-1494)">
- <rect
- transform="rotate(90)"
-
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:none;stroke:none;stroke-width:1;marker:none;enable-background:new"
- id="rect11718"
- y="-197.0002"
- x="747"
- height="16"
- width="16" />
- <path
- style="display:inline;fill:#e5e5e5;fill-opacity:1;stroke:none"
- d="m 189.0002,759.4375 -5.71875,-5.7187 C 183.08558,753.5229 183.0002,753.2556 183.0002,753 v -1 h 1
c 0.25562,0 0.52288,0.085 0.71875,0.2813 l 4.28125,4.2812 4.28125,-4.2812 C 193.47732,752.0854 193.74458,752
194.0002,752 h 1 v 1 c 0,0.2556 -0.0854,0.5229 -0.28125,0.7188 z"
- id="path11720"
- inkscape:connector-curvature="0"
- sodipodi:nodetypes="ccscsccsscscc" />
- </g>
+<svg class="keyboard-key" xmlns="http://www.w3.org/2000/svg"; width="24" height="24">
+ <path d="M12 20.875L.562 9.438C.171 9.046 0 8.51 0 8V6h2c.511 0 1.046.17 1.438.563L12
15.125l8.563-8.562C20.953 6.17 21.488 6 22 6h2v2c0 .511-.17 1.046-.563 1.438z" fill="#e5e5e5"/>
</svg>
diff --git a/data/theme/key-layout.svg b/data/theme/key-layout.svg
index 79930699b4..fb198d0e05 100644
--- a/data/theme/key-layout.svg
+++ b/data/theme/key-layout.svg
@@ -1,129 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
- xmlns:osb="http://www.openswatchbook.org/uri/2009/osb";
- xmlns:dc="http://purl.org/dc/elements/1.1/";
- xmlns:cc="http://creativecommons.org/ns#";
- xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
- xmlns:svg="http://www.w3.org/2000/svg";
- xmlns="http://www.w3.org/2000/svg";
- xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
- xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
- width="32"
- viewBox="0 0 32 32"
- version="1.1"
- id="svg7384"
- height="32"
- sodipodi:docname="key-layout.svg"
- inkscape:version="0.92.3 (2405546, 2018-03-11)">
- <sodipodi:namedview
- pagecolor="#ffffff"
- bordercolor="#666666"
- borderopacity="1"
- objecttolerance="10"
- gridtolerance="10"
- guidetolerance="10"
- inkscape:pageopacity="0"
- inkscape:pageshadow="2"
- inkscape:window-width="3440"
- inkscape:window-height="1376"
- id="namedview19"
- showgrid="false"
- inkscape:zoom="1"
- inkscape:cx="46.246852"
- inkscape:cy="17.474578"
- inkscape:window-x="0"
- inkscape:window-y="27"
- inkscape:window-maximized="1"
- inkscape:current-layer="svg7384">
- <inkscape:grid
- type="xygrid"
- id="grid861" />
- </sodipodi:namedview>
- <metadata
- id="metadata90">
- <rdf:RDF>
- <cc:Work
- rdf:about="">
- <dc:format>image/svg+xml</dc:format>
- <dc:type
- rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
- <dc:title>Gnome Symbolic Icon Theme</dc:title>
- </cc:Work>
- </rdf:RDF>
- </metadata>
- <title
- id="title9167">Gnome Symbolic Icon Theme</title>
- <defs
- id="defs7386">
- <linearGradient
- osb:paint="solid"
- id="linearGradient19282"
- gradientTransform="matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)">
- <stop
- style="stop-color:#666666;stop-opacity:1;"
- offset="0"
- id="stop19284" />
- </linearGradient>
- </defs>
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="layer9" />
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="layer10" />
- <g
- transform="translate(-141.0002,-791)"
- id="layer11" />
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="layer13" />
- <g
- transform="translate(-141.0002,-791)"
- id="layer14" />
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="layer15" />
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="g71291" />
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="g4953" />
- <g
- style="stroke-width:0.5;enable-background:new"
- id="g3561"
- inkscape:label="preferences-desktop-locale"
- transform="matrix(2,0,0,2,135.99464,-895.9793)">
- <path
- sodipodi:nodetypes="cc"
- inkscape:connector-curvature="0"
- id="path3535"
- d="m -65,450 v 12"
-
style="fill:#e5e5e5;fill-opacity:1;fill-rule:evenodd;stroke:#e5e5e5;stroke-width:1;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
/>
- <path
- sodipodi:nodetypes="ccccccccc"
- inkscape:connector-curvature="0"
- id="path3537"
- d="m -65,456 h 4 l 1,2 h 5 v -6 h -4 l -1,-2 h -5 z"
-
style="fill:none;fill-rule:evenodd;stroke:#e5e5e5;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
/>
- <path
-
style="opacity:1;vector-effect:none;fill:#e5e5e5;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
- d="m -65,456 h 4 l 1,2 h 5 v -6 h -4 l -1,-2 h -5 z"
- id="path3539"
- inkscape:connector-curvature="0"
- sodipodi:nodetypes="ccccccccc" />
- <rect
-
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:none;stroke:none;stroke-width:0.89050001;marker:none;enable-background:new"
- id="rect3543"
- y="448"
- x="-68"
- height="16"
- width="16" />
- </g>
+<svg xmlns="http://www.w3.org/2000/svg"; class="keyboard-key" width="24" height="24">
+ <path d="M4.5 2v21" fill="#e5e5e5" fill-rule="evenodd" stroke="#e5e5e5" stroke-width="3"/>
+ <path d="M4 12h6l2 4h8V6h-6l-2-4H4z" fill="none" stroke="#e5e5e5" stroke-width="2"
stroke-linejoin="round"/>
+ <path d="M4 12h6l2 4h8V6h-6l-2-4H4z" fill="#e5e5e5" fill-rule="evenodd"/>
</svg>
diff --git a/data/theme/key-shift-latched-uppercase.svg b/data/theme/key-shift-latched-uppercase.svg
index 02bddd5dd3..50778218fc 100644
--- a/data/theme/key-shift-latched-uppercase.svg
+++ b/data/theme/key-shift-latched-uppercase.svg
@@ -1,109 +1,3 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
- xmlns:osb="http://www.openswatchbook.org/uri/2009/osb";
- xmlns:dc="http://purl.org/dc/elements/1.1/";
- xmlns:cc="http://creativecommons.org/ns#";
- xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
- xmlns:svg="http://www.w3.org/2000/svg";
- xmlns="http://www.w3.org/2000/svg";
- xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
- xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
- width="32"
- viewBox="0 0 32 32"
- version="1.1"
- id="svg7384"
- height="32"
- sodipodi:docname="key-shift-latched-uppercase.svg"
- inkscape:version="0.92.2 (5c3e80d, 2017-08-06)">
- <sodipodi:namedview
- pagecolor="#ffffff"
- bordercolor="#666666"
- borderopacity="1"
- objecttolerance="10"
- gridtolerance="10"
- guidetolerance="10"
- inkscape:pageopacity="0"
- inkscape:pageshadow="2"
- inkscape:window-width="1791"
- inkscape:window-height="984"
- id="namedview19"
- showgrid="false"
- inkscape:zoom="14.75"
- inkscape:cx="-0.77966097"
- inkscape:cy="18.847458"
- inkscape:window-x="0"
- inkscape:window-y="55"
- inkscape:window-maximized="0"
- inkscape:current-layer="svg7384" />
- <metadata
- id="metadata90">
- <rdf:RDF>
- <cc:Work
- rdf:about="">
- <dc:format>image/svg+xml</dc:format>
- <dc:type
- rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
- <dc:title>Gnome Symbolic Icon Theme</dc:title>
- </cc:Work>
- </rdf:RDF>
- </metadata>
- <title
- id="title9167">Gnome Symbolic Icon Theme</title>
- <defs
- id="defs7386">
- <linearGradient
- osb:paint="solid"
- id="linearGradient19282"
- gradientTransform="matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)">
- <stop
- style="stop-color:#666666;stop-opacity:1;"
- offset="0"
- id="stop19284" />
- </linearGradient>
- </defs>
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="layer9" />
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="layer10" />
- <g
- transform="translate(-141.0002,-791)"
- id="layer11" />
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="layer13" />
- <g
- transform="translate(-141.0002,-791)"
- id="layer14" />
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="layer15" />
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="g71291" />
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="g4953" />
- <g
- transform="matrix(2,0,0,2,-282.0004,-1614.2187)"
- style="display:inline;fill:#006098;fill-opacity:1"
- id="layer12">
- <path
-
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#006098;fill-opacity:1;stroke:none;stroke-width:2;marker:none;enable-background:new"
- d="m 147,818 v -4 h -3.1248 l 5.125,-5.7813 5.125,5.7813 h -3.1875 v 4 z"
- id="path16532"
- inkscape:connector-curvature="0" />
- <path
- id="path16534"
- d="m 147,822 v -2 h 3.9377 v 2 z"
-
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#006098;fill-opacity:1;stroke:none;stroke-width:2;marker:none;enable-background:new"
- inkscape:connector-curvature="0" />
- </g>
+<svg class="keyboard-key" xmlns="http://www.w3.org/2000/svg"; width="24" height="24">
+ <path style="marker:none" d="M12 0L2 12h6v6h8v-6h6zM8 21v3h8v-3z" color="#000" overflow="visible"
fill="#3584e4"/>
</svg>
diff --git a/data/theme/key-shift-uppercase.svg b/data/theme/key-shift-uppercase.svg
index b4e293b155..15342a8d03 100644
--- a/data/theme/key-shift-uppercase.svg
+++ b/data/theme/key-shift-uppercase.svg
@@ -1,104 +1,3 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
- xmlns:osb="http://www.openswatchbook.org/uri/2009/osb";
- xmlns:dc="http://purl.org/dc/elements/1.1/";
- xmlns:cc="http://creativecommons.org/ns#";
- xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
- xmlns:svg="http://www.w3.org/2000/svg";
- xmlns="http://www.w3.org/2000/svg";
- xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
- xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
- width="32"
- viewBox="0 0 32 32"
- version="1.1"
- id="svg7384"
- height="32"
- sodipodi:docname="key-shift-uppercase.svg"
- inkscape:version="0.92.2 (5c3e80d, 2017-08-06)">
- <sodipodi:namedview
- pagecolor="#ffffff"
- bordercolor="#666666"
- borderopacity="1"
- objecttolerance="10"
- gridtolerance="10"
- guidetolerance="10"
- inkscape:pageopacity="0"
- inkscape:pageshadow="2"
- inkscape:window-width="2160"
- inkscape:window-height="1311"
- id="namedview18"
- showgrid="false"
- inkscape:zoom="14.75"
- inkscape:cx="-27.898305"
- inkscape:cy="8"
- inkscape:window-x="0"
- inkscape:window-y="55"
- inkscape:window-maximized="1"
- inkscape:current-layer="svg7384" />
- <metadata
- id="metadata90">
- <rdf:RDF>
- <cc:Work
- rdf:about="">
- <dc:format>image/svg+xml</dc:format>
- <dc:type
- rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
- <dc:title>Gnome Symbolic Icon Theme</dc:title>
- </cc:Work>
- </rdf:RDF>
- </metadata>
- <title
- id="title9167">Gnome Symbolic Icon Theme</title>
- <defs
- id="defs7386">
- <linearGradient
- osb:paint="solid"
- id="linearGradient19282"
- gradientTransform="matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)">
- <stop
- style="stop-color:#666666;stop-opacity:1;"
- offset="0"
- id="stop19284" />
- </linearGradient>
- </defs>
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="layer9" />
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="layer10" />
- <g
- transform="translate(-141.0002,-791)"
- id="layer11" />
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="layer13" />
- <g
- transform="translate(-141.0002,-791)"
- id="layer14" />
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="layer15" />
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="g71291" />
- <g
- transform="translate(-141.0002,-791)"
- style="display:inline"
- id="g4953" />
- <g
- transform="matrix(2,0,0,2,-282.0008,-1614.2187)"
- style="display:inline;fill:#006098;fill-opacity:1"
- id="layer12">
- <path
- id="path16548"
- d="m 147.0002,820 v -4 h -3.1248 l 5.125,-5.7813 5.125,5.7813 h -3.1875 v 4 z"
-
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#006098;fill-opacity:1;stroke:none;stroke-width:2;marker:none;enable-background:new"
- inkscape:connector-curvature="0" />
- </g>
+<svg class="keyboard-key" xmlns="http://www.w3.org/2000/svg"; width="24" height="24">
+ <path d="M8 22v-8H2L12 2l10 12h-6v8z" style="marker:none" color="#000" overflow="visible"
fill="#3584e4"/>
</svg>
diff --git a/data/theme/key-shift.svg b/data/theme/key-shift.svg
index e925164f37..89e6919576 100644
--- a/data/theme/key-shift.svg
+++ b/data/theme/key-shift.svg
@@ -1,108 +1,3 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
- xmlns:osb="http://www.openswatchbook.org/uri/2009/osb";
- xmlns:dc="http://purl.org/dc/elements/1.1/";
- xmlns:cc="http://creativecommons.org/ns#";
- xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
- xmlns:svg="http://www.w3.org/2000/svg";
- xmlns="http://www.w3.org/2000/svg";
- xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
- xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
- width="32"
- viewBox="0 0 32 32"
- version="1.1"
- id="svg7384"
- height="32"
- sodipodi:docname="key-shift.svg"
- inkscape:version="0.92.2 (5c3e80d, 2017-08-06)">
- <sodipodi:namedview
- pagecolor="#ffffff"
- bordercolor="#666666"
- borderopacity="1"
- objecttolerance="10"
- gridtolerance="10"
- guidetolerance="10"
- inkscape:pageopacity="0"
- inkscape:pageshadow="2"
- inkscape:window-width="1400"
- inkscape:window-height="1034"
- id="namedview4569"
- showgrid="false"
- fit-margin-top="0"
- fit-margin-left="0"
- fit-margin-right="0"
- fit-margin-bottom="0"
- inkscape:zoom="14.75"
- inkscape:cx="1.5993763"
- inkscape:cy="5"
- inkscape:window-x="0"
- inkscape:window-y="55"
- inkscape:window-maximized="0"
- inkscape:current-layer="svg7384" />
- <metadata
- id="metadata90">
- <rdf:RDF>
- <cc:Work
- rdf:about="">
- <dc:format>image/svg+xml</dc:format>
- <dc:type
- rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
- <dc:title>Gnome Symbolic Icon Theme</dc:title>
- </cc:Work>
- </rdf:RDF>
- </metadata>
- <title
- id="title9167">Gnome Symbolic Icon Theme</title>
- <defs
- id="defs7386">
- <linearGradient
- osb:paint="solid"
- id="linearGradient19282"
- gradientTransform="matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)">
- <stop
- style="stop-color:#666666;stop-opacity:1;"
- offset="0"
- id="stop19284" />
- </linearGradient>
- </defs>
- <g
- transform="translate(-143.8754,-788)"
- style="display:inline"
- id="layer9" />
- <g
- transform="translate(-143.8754,-788)"
- style="display:inline"
- id="layer10" />
- <g
- transform="translate(-143.8754,-788)"
- id="layer11" />
- <g
- transform="translate(-143.8754,-788)"
- style="display:inline"
- id="layer13" />
- <g
- transform="translate(-143.8754,-788)"
- id="layer14" />
- <g
- transform="translate(-143.8754,-788)"
- style="display:inline"
- id="layer15" />
- <g
- transform="translate(-143.8754,-788)"
- style="display:inline"
- id="g71291" />
- <g
- transform="translate(-143.8754,-788)"
- style="display:inline"
- id="g4953" />
- <g
- transform="matrix(2,0,0,2,-282.0008,-1614.2187)"
- style="display:inline"
- id="layer12">
- <path
- id="path16548"
- d="m 147.0002,820 v -4 h -3.1248 l 5.125,-5.7813 5.125,5.7813 h -3.1875 v 4 z"
-
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:2;marker:none;enable-background:new"
- inkscape:connector-curvature="0" />
- </g>
+<svg class="keyboard-key" xmlns="http://www.w3.org/2000/svg"; width="24" height="24">
+ <path d="M8 22v-8H2L12 2l10 12h-6v8z" style="marker:none" color="#000" overflow="visible"
fill="#bebebe"/>
</svg>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
