-
Notifications
You must be signed in to change notification settings - Fork 0
/
kbd-icons.css
116 lines (102 loc) · 13.7 KB
/
kbd-icons.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
kbd {
display: inline-block;
min-width: 1em;
height: 1em;
padding: .1em;
border: .1em outset;
border-radius: .2em;
text-align: center;
font-weight: bold;
}
kbd.icon {
padding: .1em .3em;
}
.icon span {
font-size: 0;
}
.icon::before {
content: ".";
display: inline-block;
background-size: contain;
background-color: currentColor;
background-repeat: no-repeat;
background-position: center;
height: 1em;
width: 1em;
}
/**
* https://www.svgrepo.com/collection/denali-line-interface-icons/
* the Mac Command key has been unzoomed a bit
* MIT licence
**/
:root {
--denali-backspace: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M15.9,13H42V35H15.9L6.6,24l9.3-11M14.5,9a.9.9,0,0,0-.8.4L2.4,22.8a2.1,2.1,0,0,0,0,2.4L13.7,38.6a.9.9,0,0,0,.8.4H44a2,2,0,0,0,2-2V11a2,2,0,0,0-2-2Z'/><path d='M29.8,24l3.6-3.5a2.1,2.1,0,0,0,.2-2.7,1.9,1.9,0,0,0-3-.2L27,21.2l-3.6-3.6a1.9,1.9,0,0,0-3,.2,2.1,2.1,0,0,0,.2,2.7L24.2,24l-3.6,3.5a2.1,2.1,0,0,0-.2,2.7,1.9,1.9,0,0,0,3,.2L27,26.8l3.6,3.6a1.9,1.9,0,0,0,3-.2,2.1,2.1,0,0,0-.2-2.7Z'/></svg>");
--denali-delete: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><g transform='rotate(180 24 24)'><path d='M15.9,13H42V35H15.9L6.6,24l9.3-11M14.5,9a.9.9,0,0,0-.8.4L2.4,22.8a2.1,2.1,0,0,0,0,2.4L13.7,38.6a.9.9,0,0,0,.8.4H44a2,2,0,0,0,2-2V11a2,2,0,0,0-2-2Z'/><path d='M29.8,24l3.6-3.5a2.1,2.1,0,0,0,.2-2.7,1.9,1.9,0,0,0-3-.2L27,21.2l-3.6-3.6a1.9,1.9,0,0,0-3,.2,2.1,2.1,0,0,0,.2,2.7L24.2,24l-3.6,3.5a2.1,2.1,0,0,0-.2,2.7,1.9,1.9,0,0,0,3,.2L27,26.8l3.6,3.6a1.9,1.9,0,0,0,3-.2,2.1,2.1,0,0,0-.2-2.7Z'/></g></svg>");
--denali-enter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M44,13a2,2,0,0,0-4,0V25H10.8l4.6-4.6a1.9,1.9,0,0,0-.2-3,2.1,2.1,0,0,0-2.7.2l-7.9,8a1.9,1.9,0,0,0,0,2.8l7.9,8a2.1,2.1,0,0,0,2.7.2,1.9,1.9,0,0,0,.2-3L10.8,29H42a2,2,0,0,0,2-2Z'/></svg>");
--denali-shift: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M24,6.8,39.2,22H33V42H15V22H8.8L24,6.8M24,2a2,2,0,0,0-1.4.6l-20,20A2,2,0,0,0,4,26h7V44a2,2,0,0,0,2,2H35a2,2,0,0,0,2-2V26h7a2,2,0,0,0,1.4-3.4l-20-20A2,2,0,0,0,24,2Z'/></svg>");
--denali-caps: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M24,6.8,39.2,22H33v6H15V22H8.8L24,6.8M24,2a2,2,0,0,0-1.4.6l-20,20A2,2,0,0,0,4,26h7v4a2,2,0,0,0,2,2H35a2,2,0,0,0,2-2V26h7a2,2,0,0,0,1.4-3.4l-20-20A2,2,0,0,0,24,2Z'/><path d='M33,40v2H15V40H33m2-4H13a2,2,0,0,0-2,2v6a2,2,0,0,0,2,2H35a2,2,0,0,0,2-2V38a2,2,0,0,0-2-2Z'/></svg>");
--denali-menu: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M42,12a2,2,0,0,1-2,2H8a2,2,0,0,1-2-2H6a2,2,0,0,1,2-2H40a2,2,0,0,1,2,2Z'/><path d='M42,24a2,2,0,0,1-2,2H8a2,2,0,0,1-2-2H6a2,2,0,0,1,2-2H40a2,2,0,0,1,2,2Z'/><path d='M42,36a2,2,0,0,1-2,2H8a2,2,0,0,1-2-2H6a2,2,0,0,1,2-2H40a2,2,0,0,1,2,2Z'/></svg>");
--denali-tab: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M35.4,22.6l-6.9-7a2.1,2.1,0,0,0-2.7-.2,1.9,1.9,0,0,0-.2,3L29.2,22H6a2,2,0,0,0-2,2H4a2,2,0,0,0,2,2H29.2l-3.6,3.6a1.9,1.9,0,0,0,.2,3,2.1,2.1,0,0,0,2.7-.2l6.9-7A1.9,1.9,0,0,0,35.4,22.6Z'/><path d='M44,12V36a2,2,0,0,1-4,0V12a2,2,0,0,1,4,0Z'/></svg>");
/* macOS */
--denali-cmd: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 64 64' stroke='currentColor' stroke-width='1'><path d='M37,46a9,9,0,0,1-9-9V32H20v5a9,9,0,1,1-9-9h5V20H11a9,9,0,1,1,9-9v5h8V11a9,9,0,1,1,9,9H32v8h5a9,9,0,0,1,0,18ZM32,32v5a5,5,0,1,0,5-5ZM11,32a5,5,0,1,0,5,5V32Zm9-4h8V20H20ZM32,16h5a5,5,0,1,0-5-5ZM11,6a5,5,0,0,0,0,10h5V11A5,5,0,0,0,11,6Z'/></svg>");
--denali-opt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M44,34H29L17,18H4a2,2,0,0,1,0-4H19L31,30H44a2,2,0,0,1,0,4Z'></path><path d='M44,18H31a2,2,0,0,1,0-4H44a2,2,0,0,1,0,4Z'/></svg>");
--denali-ctrl: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M24,20.8,13.4,31.4a1.9,1.9,0,0,1-3-.2,2.1,2.1,0,0,1,.2-2.7l12-11.9a1.9,1.9,0,0,1,2.8,0l12,11.9a2.1,2.1,0,0,1,.2,2.7,1.9,1.9,0,0,1-3,.2Z'/></svg>");
}
/**
* https://www.svgrepo.com/collection/vaadin-flat-vectors/
* the stroke has been added to make the labels bolder
* Apache licence
**/
:root {
--vaadin-ctrl: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='currentColor' stroke-width='.4'><path d='M4.19 12c-2.030 0-3.19-1.46-3.19-4s1.16-4 3.19-4c0.009-0 0.019-0 0.029-0 0.539 0 1.052 0.114 1.515 0.32l-0.424 0.901c-0.319-0.139-0.69-0.22-1.080-0.22-0.014 0-0.028 0-0.042 0-1.808-0-2.188 1.63-2.188 3s0.38 3 2.19 3c0.497-0.013 0.96-0.145 1.366-0.368l0.444 0.898c-0.524 0.285-1.146 0.458-1.806 0.47z'/><path d='M9 7v-1h-1v-1h-1v1h-0.5v1h0.5v3.56c0.176 0.835 0.907 1.453 1.783 1.453 0.077 0 0.152-0.005 0.226-0.014l-0.009-0.999c-0.055 0.012-0.119 0.019-0.185 0.019-0.359 0-0.669-0.21-0.813-0.514l-0.002-3.505h1z'/><path d='M13 6c-0.025-0.001-0.055-0.001-0.085-0.001-0.773 0-1.462 0.358-1.911 0.917l-0.004-0.915h-1v6h1v-3c-0.003-0.037-0.004-0.080-0.004-0.124 0-1.038 0.842-1.88 1.88-1.88 0.044 0 0.087 0.001 0.13 0.004l-0.006-1z'/><path d='M14 3h1v9h-1v-9z'/></svg>");
--vaadin-alt: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='currentColor' stroke-width='.4'><path d='M14 7v-1h-1v-1h-1v1h-0.5v1h0.5v3.56c0 1 0.56 1.44 2 1.44v-1c-0.055 0.012-0.119 0.019-0.185 0.019-0.359 0-0.669-0.21-0.813-0.514l-0.002-3.505h1z'/><path d='M9 3h1v9h-1v-9z'/><path d='M3 12l0.57-2h2.82l0.61 2h1l-2.27-8h-1.46l-2.27 8h1zM5 5.1l1.11 3.9h-2.22z'/></svg>");
--vaadin-esc: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='currentColor' stroke-width='.4'><path d='M5 4v-1h-4v9h4v-1h-3v-3h3v-1h-3v-3h3z'/><path d='M8 12c-0.726-0.029-1.409-0.177-2.043-0.425l0.403-0.915c0.435 0.202 0.945 0.319 1.482 0.319 0.326 0 0.643-0.043 0.943-0.125 0.121-0.109 0.215-0.285 0.215-0.484 0-0 0-0 0-0 0.070-0.43-0.22-0.62-1.17-1-0.83-0.29-2.040-0.76-1.83-2.080 0.072-0.594 0.46-1.082 0.989-1.296 0.223-0.053 0.466-0.081 0.715-0.081 0.724 0 1.393 0.235 1.934 0.633l-0.569 0.754c-0.366-0.248-0.817-0.396-1.302-0.396-0.123 0-0.243 0.009-0.361 0.028-0.215 0.084-0.377 0.296-0.387 0.547-0.080 0.401 0.14 0.581 1.15 1.001 0.85 0.33 2 0.77 1.8 2.080-0.067 0.511-0.364 0.94-0.782 1.186-0.323 0.163-0.696 0.256-1.090 0.256-0.034 0-0.069-0.001-0.103-0.002z'/><path d='M13.71 12c-0.027 0.001-0.058 0.001-0.089 0.001-0.583 0-1.124-0.18-1.57-0.488-0.646-0.548-1.059-1.37-1.059-2.289 0-0.079 0.003-0.157 0.009-0.235-0.011-0.079-0.016-0.183-0.016-0.288 0-0.899 0.413-1.701 1.060-2.228 0.5-0.282 1.091-0.446 1.72-0.446 0.443 0 0.868 0.081 1.259 0.23l-0.374 0.922c-0.276-0.111-0.595-0.176-0.93-0.176-0.388 0-0.756 0.087-1.086 0.242-0.395 0.361-0.652 0.893-0.652 1.485 0 0.095 0.007 0.188 0.019 0.279-0.010 0.063-0.016 0.148-0.016 0.234 0 0.599 0.255 1.138 0.663 1.514 0.346 0.177 0.754 0.28 1.185 0.28 0.292 0 0.573-0.047 0.835-0.134l0.331 0.905c-0.383 0.121-0.823 0.19-1.279 0.19-0.004 0-0.008 0-0.012-0z'/></svg>");}
/**
* https://www.svgrepo.com/collection/framework7-line-icons/
* the stroke has been added to make it bolder
* the viewBox has been unzoomed a bit
* MIT licence
**/
:root {
--framework7-esc: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 68 68' stroke='currentColor' stroke-width='1.8'><path d='M 28.0469 51.2969 C 40.8672 51.2969 51.2968 40.8672 51.2968 28.0469 C 51.2968 15.8594 41.5704 5.6875 29.6641 4.8203 C 28.3047 4.7031 27.2735 5.5469 27.2735 6.7422 C 27.2735 7.7969 28.0235 8.6641 29.3829 8.7813 C 39.6250 9.5078 47.3126 18.0625 47.3126 28.0469 C 47.3126 38.8516 38.8282 47.3359 28.0469 47.3359 C 18.0391 47.3359 9.4845 39.6484 8.7579 29.3828 C 8.6407 28.0469 7.7735 27.2734 6.7188 27.2734 C 5.5235 27.2734 4.7032 28.3282 4.8204 29.6641 C 5.6876 41.5938 15.8360 51.2969 28.0469 51.2969 Z M 26.3126 28.9141 C 27.5313 28.9141 28.3985 28.0234 28.3985 26.8516 C 28.3985 26.3125 28.1407 25.7500 27.7188 25.3282 L 15.5079 13.1172 L 11.0079 9.1094 C 13.6094 9.4375 16.8907 9.4141 18.0391 9.4141 C 19.0938 9.4141 19.9376 8.5469 19.9376 7.4922 C 19.9376 6.4375 19.0938 5.5938 18.0391 5.5938 L 7.4923 5.5938 C 5.9688 5.5938 5.1251 6.4141 5.1251 7.9609 L 5.1251 18.4844 C 5.1251 19.5391 5.9688 20.3828 7.0001 20.3828 C 8.0313 20.3828 8.8985 19.5391 8.8985 18.4844 C 8.8985 17.3828 8.8985 13.8672 8.6641 11.4531 L 12.6250 15.9766 L 24.8594 28.2344 C 25.3047 28.6797 25.7969 28.9141 26.3126 28.9141 Z'/></svg>");
}
/**
* https://www.svgrepo.com/collection/modern-ui-icons/
* the viewBox has been zoomed a bit
* public domain
**/
:root {
--modern-ui-win: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='13 13 50 50'><path d='M 17,23L 34,20.7738L 34,37L 17,37L 17,23 Z M 34,55.2262L 17,53L 17,39L 34,39L 34,55.2262 Z M 59,17.5L 59,37L 36,37L 36,20.5119L 59,17.5 Z M 59,58.5L 36,55.4881L 36,39L 59,39L 59,58.5 Z'/></svg>");
--modern-ui-tux: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='13 13 50 50'><path d='M 35.625,29.6875C 36.4995,29.6875 37.2083,30.3964 37.2083,31.2708C 37.2083,32.1453 36.4994,32.8542 35.625,32.8542C 34.7505,32.8542 34.0417,32.1453 34.0417,31.2708C 34.0417,30.3964 34.7505,29.6875 35.625,29.6875 Z M 40.7708,29.6875C 41.6453,29.6875 42.3542,30.3964 42.3542,31.2708C 42.3542,32.1453 41.6453,32.8542 40.7708,32.8542C 39.8964,32.8542 39.1875,32.1453 39.1875,31.2708C 39.1875,30.3964 39.8964,29.6875 40.7708,29.6875 Z M 25.6695,50.3757C 24.9442,48.0415 24.5417,45.4621 24.5417,42.75L 24.5568,41.8418C 22.3238,43.0668 19.8176,44.3333 19,44.3333C 16.8873,44.3333 20.8257,39.4499 25.9794,34.1962C 26.4655,32.8374 27.0638,31.5722 27.7572,30.4249C 28.2641,24.0121 32.6565,19 38,19C 43.3435,19 47.7358,24.0121 48.2428,30.4249C 48.9362,31.5722 49.5345,32.8374 50.0206,34.1962C 55.1743,39.4499 59.1127,44.3333 57,44.3333C 56.1824,44.3333 53.6762,43.0669 51.4432,41.8418L 51.4583,42.75C 51.4583,45.4621 51.0558,48.0415 50.3305,50.3757L 48.2917,49.875C 48.2917,43.7841 45.5317,38.5857 41.649,36.5467L 38,42.75L 34.3514,36.5475C 30.4685,38.59 27.7084,43.8045 27.7085,49.9664L 25.6695,50.3757 Z M 34.0416,26.125C 31.8555,26.125 30.0833,28.2517 30.0833,30.875C 30.0833,33.4984 31.8555,35.625 34.0416,35.625C 36.2278,35.625 38,33.4984 38,30.875C 38,28.2517 36.2278,26.125 34.0416,26.125 Z M 38,30.875C 38,32.6239 39.7722,34.4375 41.9583,34.4375C 44.1444,34.4375 45.9166,32.6239 45.9166,30.875C 45.9166,29.1261 44.1444,27.3125 41.9583,27.3125C 39.7722,27.3125 38,29.1261 38,30.875 Z M 30.0833,50.6667C 33.1473,50.6667 35.7032,52.0266 36.29,53.8333L 36.8125,53.8333L 36.8125,55.4167L 36.29,55.4167C 35.7032,57.2234 33.1473,58.5833 30.0833,58.5833C 26.5855,58.5833 23.75,56.8111 23.75,54.625C 23.75,52.4389 26.5855,50.6667 30.0833,50.6667 Z M 45.9166,50.6667C 49.4144,50.6667 52.25,52.4389 52.25,54.625C 52.25,56.8111 49.4144,58.5833 45.9166,58.5833C 42.8526,58.5833 40.2968,57.2234 39.71,55.4167L 39.1875,55.4167L 39.1875,53.8333L 39.71,53.8333C 40.2968,52.0266 42.8526,50.6667 45.9166,50.6667 Z'/></svg>");
--modern-ui-mac: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='13 13 50 50'><path d='M 50.839,52.2824C 49.2599,54.5988 47.6263,56.9011 45.0474,56.9493C 42.509,56.9976 41.6954,55.4412 38.7989,55.4412C 35.8995,55.4412 34.9926,56.9011 32.596,56.9976C 30.1062,57.0912 28.2129,54.4958 26.6207,52.1896C 23.3679,47.4744 20.8853,38.8576 24.2242,33.0424C 25.8776,30.1544 28.8404,28.3272 32.051,28.279C 34.496,28.2338 36.806,29.9326 38.2994,29.9326C 39.7954,29.9326 42.5989,27.893 45.5465,28.1922C 46.7802,28.2433 50.2429,28.6909 52.4667,31.9551C 52.291,32.0709 48.3336,34.3806 48.3817,39.1922C 48.4303,44.9399 53.4028,46.8504 53.4606,46.8764C 53.4154,47.0114 52.6656,49.6039 50.839,52.2824 Z M 40.0103,21.8782C 41.3753,20.2737 43.6819,19.0802 45.5853,19C 45.8285,21.2288 44.9347,23.4607 43.6144,25.069C 42.2916,26.6744 40.126,27.925 38.0009,27.758C 37.7121,25.5774 38.7833,23.3032 40.0103,21.8782 Z'/></svg>");
}
/**
* https://www.svgrepo.com/collection/orchid-line-interface-icons/
* the stroke has been added to make it bolder + zoom
* MIT licence
**/
:root {
--orchid-os: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4.5 2 28 28' stroke='currentColor' stroke-width='1'><path d='M17.84 6.28l-17.12 2.36c0 0-0.72 0.080-0.72 0.84v13.040c0 0 0 0.76 0.76 0.88l17.12 2.32c0.96 0.080 0.92-0.8 0.92-0.8v-17.8c0 0 0-0.96-0.96-0.84zM7.44 15.16h-5.76v-4.96l5.76-0.8c-0.040 0-0.040 5.76 0 5.76zM9.080 9.2l8.040-1.080v7.080h-8.040v-6zM1.68 16.84h5.72v5.72l-5.76-0.8c0 0 0-4.92 0.040-4.92zM9.080 16.84h8.040v7.080l-8.040-1.12v-5.96z'/></svg>");
}
/* see also:
https://www.svgrepo.com/svg/369058/windows (Teenyicons, MIT)
https://www.svgrepo.com/svg/488736/windows (Licons Oval, MIT)
*/
.backspace::before { mask-image: var(--denali-backspace); }
.delete::before { mask-image: var(--denali-delete); }
.enter::before { mask-image: var(--denali-enter); }
.shift::before { mask-image: var(--denali-shift); }
.caps::before { mask-image: var(--denali-caps); }
.menu::before { mask-image: var(--denali-menu); }
.tab::before { mask-image: var(--denali-tab); }
.esc::before { mask-image: var(--vaadin-esc); }
.esc::before { mask-image: var(--framework7-esc); }
.mac-ctrl::before { mask-image: var(--denali-ctrl); }
.mac-cmd::before { mask-image: var(--denali-cmd); }
.mac-opt::before { mask-image: var(--denali-opt); }
.ctrl::before { mask-image: var(--vaadin-ctrl); }
.alt::before { mask-image: var(--vaadin-alt); }
.os::before { mask-image: var(--orchid-os); }
.win::before { mask-image: var(--modern-ui-win); }
.mac::before { mask-image: var(--modern-ui-mac); }
.tux::before { mask-image: var(--modern-ui-tux); }