@oddessentials/agent-guild 0.24.1 → 0.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/README.md +2 -1
  2. package/package.json +1 -1
  3. package/web/index.html +1 -0
  4. package/web/skins/goblinville/characters/anthropic/idle.avif +0 -0
  5. package/web/skins/goblinville/characters/anthropic/idle.webp +0 -0
  6. package/web/skins/goblinville/characters/anthropic/locked.avif +0 -0
  7. package/web/skins/goblinville/characters/anthropic/locked.webp +0 -0
  8. package/web/skins/goblinville/characters/anthropic/working.avif +0 -0
  9. package/web/skins/goblinville/characters/anthropic/working.webp +0 -0
  10. package/web/skins/goblinville/characters/google/idle.avif +0 -0
  11. package/web/skins/goblinville/characters/google/idle.webp +0 -0
  12. package/web/skins/goblinville/characters/google/locked.avif +0 -0
  13. package/web/skins/goblinville/characters/google/locked.webp +0 -0
  14. package/web/skins/goblinville/characters/google/working.avif +0 -0
  15. package/web/skins/goblinville/characters/google/working.webp +0 -0
  16. package/web/skins/goblinville/characters/openai/idle.avif +0 -0
  17. package/web/skins/goblinville/characters/openai/idle.webp +0 -0
  18. package/web/skins/goblinville/characters/openai/locked.avif +0 -0
  19. package/web/skins/goblinville/characters/openai/locked.webp +0 -0
  20. package/web/skins/goblinville/characters/openai/working.avif +0 -0
  21. package/web/skins/goblinville/characters/openai/working.webp +0 -0
  22. package/web/skins/goblinville/characters/shell/idle.avif +0 -0
  23. package/web/skins/goblinville/characters/shell/idle.webp +0 -0
  24. package/web/skins/goblinville/characters/shell/locked.avif +0 -0
  25. package/web/skins/goblinville/characters/shell/locked.webp +0 -0
  26. package/web/skins/goblinville/characters/shell/working.avif +0 -0
  27. package/web/skins/goblinville/characters/shell/working.webp +0 -0
  28. package/web/skins/goblinville/characters/xai/idle.avif +0 -0
  29. package/web/skins/goblinville/characters/xai/idle.webp +0 -0
  30. package/web/skins/goblinville/characters/xai/locked.avif +0 -0
  31. package/web/skins/goblinville/characters/xai/locked.webp +0 -0
  32. package/web/skins/goblinville/characters/xai/working.avif +0 -0
  33. package/web/skins/goblinville/characters/xai/working.webp +0 -0
  34. package/web/skins/goblinville/familiars/aether.png +0 -0
  35. package/web/skins/goblinville/familiars/flame.png +0 -0
  36. package/web/skins/goblinville/familiars/leaf.png +0 -0
  37. package/web/skins/goblinville/familiars/night.png +0 -0
  38. package/web/skins/goblinville/fonts/OFL.txt +94 -0
  39. package/web/skins/goblinville/fonts/germania-one.woff2 +0 -0
  40. package/web/skins/goblinville/icons/anthropic.avif +0 -0
  41. package/web/skins/goblinville/icons/anthropic.webp +0 -0
  42. package/web/skins/goblinville/icons/google.avif +0 -0
  43. package/web/skins/goblinville/icons/google.webp +0 -0
  44. package/web/skins/goblinville/icons/openai.avif +0 -0
  45. package/web/skins/goblinville/icons/openai.webp +0 -0
  46. package/web/skins/goblinville/icons/shell.avif +0 -0
  47. package/web/skins/goblinville/icons/shell.webp +0 -0
  48. package/web/skins/goblinville/icons/xai.avif +0 -0
  49. package/web/skins/goblinville/icons/xai.webp +0 -0
  50. package/web/skins/goblinville/page-light.avif +0 -0
  51. package/web/skins/goblinville/page-light.webp +0 -0
  52. package/web/skins/goblinville/page.avif +0 -0
  53. package/web/skins/goblinville/page.webp +0 -0
  54. package/web/skins/goblinville/skin.css +422 -0
  55. package/web/skins/goblinville/ui/empty-state.avif +0 -0
  56. package/web/skins/goblinville/ui/empty-state.webp +0 -0
  57. package/web/skins/goblinville/ui/frame.svg +1 -0
  58. package/web/skins/goblinville/ui/gauge.svg +1 -0
  59. package/web/skins/goblinville/ui/level.svg +1 -0
  60. package/web/skins/goblinville/ui/lock.svg +1 -0
  61. package/web/skins/goblinville/ui/nut.svg +1 -0
  62. package/web/skins/goblinville/ui/tube.svg +1 -0
  63. package/web/theme.js +1 -0
package/README.md CHANGED
@@ -154,7 +154,8 @@ dark mode, without a reload. **Guild** is the default fantasy look;
154
154
  **Professional** is a plain business look with no characters; **Orbital**
155
155
  puts a crew of little robots in deep space; **Grove** is a calm moss garden
156
156
  of gentle nature spirits; **Gnomeland** is a lantern-lit village of gnome
157
- builders, engineers with a little magic. The page
157
+ builders, engineers with a little magic; **Goblinville** is a steam-powered
158
+ town of goblin, orc, ogre and troll builders on stilts over a bog. The page
158
159
  follows your system's light or dark setting until you pick one. See
159
160
  [docs/SKINS.md](docs/SKINS.md) to make another. **Alert sounds**, off until
160
161
  you turn them on in the same menu, chime when the session manager confirms
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oddessentials/agent-guild",
3
- "version": "0.24.1",
3
+ "version": "0.25.0",
4
4
  "description": "Launch and watch AI coding-assistant terminal sessions from one local web page. A bundled session manager owns the terminals so the page can close and reconnect.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/web/index.html CHANGED
@@ -15,6 +15,7 @@
15
15
  <link rel="stylesheet" href="/skins/orbital/skin.css">
16
16
  <link rel="stylesheet" href="/skins/grove/skin.css">
17
17
  <link rel="stylesheet" href="/skins/gnomeland/skin.css">
18
+ <link rel="stylesheet" href="/skins/goblinville/skin.css">
18
19
  </head>
19
20
  <body>
20
21
  <header class="topbar">
package/web/skins/goblinville/fonts/OFL.txt ADDED
@@ -0,0 +1,94 @@
1
+ Copyright (c) 2011, John Vargas Beltr�n (www.johnvargasbeltran.com|john.vargasbeltran@gmail.com),
2
+ with Reserved Font Name "Germania".
3
+
4
+ This Font Software is licensed under the SIL Open Font License, Version 1.1.
5
+ This license is copied below, and is also available with a FAQ at:
6
+ http://scripts.sil.org/OFL
7
+
8
+
9
+ -----------------------------------------------------------
10
+ SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
11
+ -----------------------------------------------------------
12
+
13
+ PREAMBLE
14
+ The goals of the Open Font License (OFL) are to stimulate worldwide
15
+ development of collaborative font projects, to support the font creation
16
+ efforts of academic and linguistic communities, and to provide a free and
17
+ open framework in which fonts may be shared and improved in partnership
18
+ with others.
19
+
20
+ The OFL allows the licensed fonts to be used, studied, modified and
21
+ redistributed freely as long as they are not sold by themselves. The
22
+ fonts, including any derivative works, can be bundled, embedded,
23
+ redistributed and/or sold with any software provided that any reserved
24
+ names are not used by derivative works. The fonts and derivatives,
25
+ however, cannot be released under any other type of license. The
26
+ requirement for fonts to remain under this license does not apply
27
+ to any document created using the fonts or their derivatives.
28
+
29
+ DEFINITIONS
30
+ "Font Software" refers to the set of files released by the Copyright
31
+ Holder(s) under this license and clearly marked as such. This may
32
+ include source files, build scripts and documentation.
33
+
34
+ "Reserved Font Name" refers to any names specified as such after the
35
+ copyright statement(s).
36
+
37
+ "Original Version" refers to the collection of Font Software components as
38
+ distributed by the Copyright Holder(s).
39
+
40
+ "Modified Version" refers to any derivative made by adding to, deleting,
41
+ or substituting -- in part or in whole -- any of the components of the
42
+ Original Version, by changing formats or by porting the Font Software to a
43
+ new environment.
44
+
45
+ "Author" refers to any designer, engineer, programmer, technical
46
+ writer or other person who contributed to the Font Software.
47
+
48
+ PERMISSION & CONDITIONS
49
+ Permission is hereby granted, free of charge, to any person obtaining
50
+ a copy of the Font Software, to use, study, copy, merge, embed, modify,
51
+ redistribute, and sell modified and unmodified copies of the Font
52
+ Software, subject to the following conditions:
53
+
54
+ 1) Neither the Font Software nor any of its individual components,
55
+ in Original or Modified Versions, may be sold by itself.
56
+
57
+ 2) Original or Modified Versions of the Font Software may be bundled,
58
+ redistributed and/or sold with any software, provided that each copy
59
+ contains the above copyright notice and this license. These can be
60
+ included either as stand-alone text files, human-readable headers or
61
+ in the appropriate machine-readable metadata fields within text or
62
+ binary files as long as those fields can be easily viewed by the user.
63
+
64
+ 3) No Modified Version of the Font Software may use the Reserved Font
65
+ Name(s) unless explicit written permission is granted by the corresponding
66
+ Copyright Holder. This restriction only applies to the primary font name as
67
+ presented to the users.
68
+
69
+ 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
70
+ Software shall not be used to promote, endorse or advertise any
71
+ Modified Version, except to acknowledge the contribution(s) of the
72
+ Copyright Holder(s) and the Author(s) or with their explicit written
73
+ permission.
74
+
75
+ 5) The Font Software, modified or unmodified, in part or in whole,
76
+ must be distributed entirely under this license, and must not be
77
+ distributed under any other license. The requirement for fonts to
78
+ remain under this license does not apply to any document created
79
+ using the Font Software.
80
+
81
+ TERMINATION
82
+ This license becomes null and void if any of the above conditions are
83
+ not met.
84
+
85
+ DISCLAIMER
86
+ THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
87
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
88
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
89
+ OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
90
+ COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
91
+ INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
92
+ DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
93
+ FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
94
+ OTHER DEALINGS IN THE FONT SOFTWARE.
package/web/skins/goblinville/page.avif ADDED
Binary file
package/web/skins/goblinville/page.webp ADDED
Binary file
package/web/skins/goblinville/skin.css ADDED
@@ -0,0 +1,422 @@
1
+ /* The Goblinville skin: a steam-powered town of goblin builders on stilts over a bog, in riveted copper, brass, soot and lamplight.
2
+ Everything here applies only while <html data-skin="goblinville">; docs/SKINS.md lists every slot.
3
+ The art is built by concept-art/goblinville-skin/source/build.py. */
4
+
5
+ @font-face {
6
+ font-family: "Germania One";
7
+ src: url("fonts/germania-one.woff2") format("woff2");
8
+ font-weight: 400;
9
+ font-display: swap;
10
+ }
11
+
12
+ :where(:root[data-skin="goblinville"]) {
13
+ --bg: #eef0e6;
14
+ --surface: #fbfaf2;
15
+ --surface-2: #eeeee0;
16
+ --border: #d3d3bc;
17
+ --text: #1d211b;
18
+ --muted: #5b6052;
19
+ --heading: #23291f;
20
+ --accent: #1f6e5c;
21
+ --accent-fill: #216f5d;
22
+ --accent-text: #ffffff;
23
+ --danger: #b0362a;
24
+ --ok: #2c7a3c;
25
+ --warn: #985200;
26
+ --gold: #b8703a;
27
+ --gold-ink: #7a3f17;
28
+ --focus: #1f6e5c;
29
+ --shadow: 0 1px 2px rgba(35, 45, 30, 0.08), 0 6px 18px rgba(35, 45, 30, 0.08);
30
+ --radius: 7px;
31
+ --font-display: "Germania One", "Rockwell", "Roboto Slab", "Georgia", serif;
32
+
33
+ --panel: rgba(251, 250, 242, 0.86);
34
+ --panel-strong: rgba(251, 250, 242, 0.95);
35
+ --rule: linear-gradient(90deg, transparent, #b8703a 20%, #e3a677 50%, #b8703a 80%, transparent);
36
+ --embers:
37
+ radial-gradient(circle, rgba(255, 176, 96, 0.8) 0 0.9px, transparent 1.8px) 0 0 / 41px 39px,
38
+ radial-gradient(circle, rgba(255, 222, 160, 0.55) 0 0.7px, transparent 1.5px) 17px 23px / 57px 51px,
39
+ radial-gradient(circle, rgba(150, 230, 200, 0.4) 0 0.6px, transparent 1.3px) 9px 31px / 33px 63px;
40
+ --page-art: image-set(url("page-light.avif") type("image/avif"), url("page-light.webp") type("image/webp"));
41
+ --page-veil: linear-gradient(rgba(238, 240, 230, 0.55), rgba(238, 240, 230, 0.32) 40%, rgba(238, 240, 230, 0.5));
42
+ --empty-shadow: rgba(35, 45, 30, 0.3);
43
+ --card-shadow: 0 1px 2px rgba(35, 45, 30, 0.08), 0 10px 26px rgba(35, 45, 30, 0.12);
44
+ --card-hover-shadow: 0 2px 4px rgba(35, 45, 30, 0.08), 0 16px 34px color-mix(in srgb, var(--pc) 20%, rgba(35, 45, 30, 0.14));
45
+ --dialog-shadow: 0 30px 70px -18px rgba(25, 32, 22, 0.42);
46
+
47
+ body { background: var(--bg); }
48
+ body::before {
49
+ content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
50
+ background: var(--page-veil), var(--page-art) center bottom / cover no-repeat;
51
+ }
52
+ /* Text that sits on the town itself gets a halo of the page colour. */
53
+ .section-head h2, .cwd > span, .empty { text-shadow: 0 0 2px var(--bg), 0 0 8px var(--bg), 0 0 16px var(--bg); }
54
+ h2 { font-weight: 400; letter-spacing: 0.03em; font-size: 1.22rem; }
55
+
56
+ .topbar { background: var(--panel); backdrop-filter: blur(12px) saturate(1.1); border-bottom: 1px solid transparent; border-image: var(--rule) 1; }
57
+ .version { font-family: var(--font-display); letter-spacing: 0.03em; color: var(--gold-ink); border-color: color-mix(in srgb, var(--gold) 50%, transparent); background: transparent; }
58
+ .version:hover { color: var(--gold-ink); border-color: var(--gold); }
59
+ .version.unread::after { background: radial-gradient(circle at 35% 30%, #fff0dc 0 14%, #f08a4a 50%, #9a4416 100%); box-shadow: 0 0 0 2px var(--surface), 0 0 8px #f08a4a; }
60
+ .connection .dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 18%, transparent), 0 0 7px var(--dot); }
61
+ .section-head { padding-bottom: 9px; border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 30%, transparent) 45%, transparent 85%) 1; }
62
+
63
+ /* --furnace reads --pc, so it is declared on the elements that set it, not on :root. */
64
+ .provider, .session-card {
65
+ --furnace: radial-gradient(120% 90% at 50% 38%, color-mix(in srgb, var(--pc) 32%, #17201b) 0%, #0c110e 62%, #060807 100%);
66
+ }
67
+
68
+ /* Provider colour and art. Unknown providers fall back to the Shell watchman. */
69
+ .provider, .session-card {
70
+ --pc: #9a6cf0;
71
+ --idle: image-set(url("characters/shell/idle.avif") type("image/avif"), url("characters/shell/idle.webp") type("image/webp"));
72
+ --working: image-set(url("characters/shell/working.avif") type("image/avif"), url("characters/shell/working.webp") type("image/webp"));
73
+ --locked: image-set(url("characters/shell/locked.avif") type("image/avif"), url("characters/shell/locked.webp") type("image/webp"));
74
+ }
75
+ .provider[data-id="anthropic"], .session-card[data-provider="anthropic"] {
76
+ --pc: #dd7a3e;
77
+ --idle: image-set(url("characters/anthropic/idle.avif") type("image/avif"), url("characters/anthropic/idle.webp") type("image/webp"));
78
+ --working: image-set(url("characters/anthropic/working.avif") type("image/avif"), url("characters/anthropic/working.webp") type("image/webp"));
79
+ --locked: image-set(url("characters/anthropic/locked.avif") type("image/avif"), url("characters/anthropic/locked.webp") type("image/webp"));
80
+ }
81
+ .provider[data-id="openai"], .session-card[data-provider="openai"] {
82
+ --pc: #36b86f;
83
+ --idle: image-set(url("characters/openai/idle.avif") type("image/avif"), url("characters/openai/idle.webp") type("image/webp"));
84
+ --working: image-set(url("characters/openai/working.avif") type("image/avif"), url("characters/openai/working.webp") type("image/webp"));
85
+ --locked: image-set(url("characters/openai/locked.avif") type("image/avif"), url("characters/openai/locked.webp") type("image/webp"));
86
+ }
87
+ .provider[data-id="google"], .session-card[data-provider="google"] {
88
+ --pc: #4d84e6;
89
+ --idle: image-set(url("characters/google/idle.avif") type("image/avif"), url("characters/google/idle.webp") type("image/webp"));
90
+ --working: image-set(url("characters/google/working.avif") type("image/avif"), url("characters/google/working.webp") type("image/webp"));
91
+ --locked: image-set(url("characters/google/locked.avif") type("image/avif"), url("characters/google/locked.webp") type("image/webp"));
92
+ }
93
+ .provider[data-id="xai"], .session-card[data-provider="xai"] {
94
+ --pc: #2cc3d3;
95
+ --idle: image-set(url("characters/xai/idle.avif") type("image/avif"), url("characters/xai/idle.webp") type("image/webp"));
96
+ --working: image-set(url("characters/xai/working.avif") type("image/avif"), url("characters/xai/working.webp") type("image/webp"));
97
+ --locked: image-set(url("characters/xai/locked.avif") type("image/avif"), url("characters/xai/locked.webp") type("image/webp"));
98
+ }
99
+
100
+ .provider-icon[data-provider="anthropic"] { --icon: image-set(url("icons/anthropic.avif") type("image/avif"), url("icons/anthropic.webp") type("image/webp")); }
101
+ .provider-icon[data-provider="openai"] { --icon: image-set(url("icons/openai.avif") type("image/avif"), url("icons/openai.webp") type("image/webp")); }
102
+ .provider-icon[data-provider="google"] { --icon: image-set(url("icons/google.avif") type("image/avif"), url("icons/google.webp") type("image/webp")); }
103
+ .provider-icon[data-provider="xai"] { --icon: image-set(url("icons/xai.avif") type("image/avif"), url("icons/xai.webp") type("image/webp")); }
104
+ .provider-icon[data-provider="shell"] { --icon: image-set(url("icons/shell.avif") type("image/avif"), url("icons/shell.webp") type("image/webp")); }
105
+ .provider-icon:not(.has-image) { border-radius: 8px; box-shadow: 0 0 0 1.5px #b8703a, 0 0 0 2.5px rgba(74, 34, 12, 0.35); }
106
+ .provider-icon:not(.has-image)[data-provider="anthropic"],
107
+ .provider-icon:not(.has-image)[data-provider="openai"],
108
+ .provider-icon:not(.has-image)[data-provider="google"],
109
+ .provider-icon:not(.has-image)[data-provider="xai"],
110
+ .provider-icon:not(.has-image)[data-provider="shell"] {
111
+ background: var(--icon) center / cover no-repeat; color: transparent;
112
+ box-shadow: 0 0 0 1.5px #b8703a, 0 0 0 2.5px rgba(74, 34, 12, 0.45), 0 2px 6px rgba(25, 32, 22, 0.3);
113
+ }
114
+
115
+ /* Cards: riveted plates held by copper gussets in each corner, joined by a thin copper pipe. */
116
+ .provider, .session-card {
117
+ position: relative; isolation: isolate; overflow: hidden;
118
+ padding: 16px; background: var(--panel); backdrop-filter: blur(10px);
119
+ border: 1px solid color-mix(in srgb, var(--pc) 18%, var(--border)); box-shadow: var(--card-shadow);
120
+ transition: border-color 0.25s, box-shadow 0.25s, transform 0.3s var(--ease);
121
+ }
122
+ .provider:hover, .session-card:hover {
123
+ transform: translateY(-2px); border-color: color-mix(in srgb, var(--pc) 50%, var(--border)); box-shadow: var(--card-hover-shadow);
124
+ }
125
+ .provider::after, .session-card::after, .models::after, .auth::after {
126
+ content: ""; position: absolute; inset: 2px; z-index: 2; pointer-events: none;
127
+ border: 22px solid transparent; border-image: url("ui/frame.svg") 30 / 22px stretch;
128
+ }
129
+ /* A puff of lamplit steam drifts across a provider card on hover. */
130
+ .provider::before {
131
+ content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
132
+ background: radial-gradient(40% 60% at 50% 50%, rgba(255, 236, 214, 0.34), transparent 70%) -60% 30% / 70% 90% no-repeat;
133
+ opacity: 0;
134
+ }
135
+ .provider:hover::before { opacity: 1; background-position: 160% 0; transition: background-position 1.4s var(--ease), opacity 0.25s; }
136
+
137
+ .card-art { position: absolute; z-index: -1; overflow: hidden; pointer-events: none; background: var(--embers), var(--furnace); }
138
+ .card-art::before { content: ""; position: absolute; inset: 0; background: var(--idle) no-repeat; }
139
+ .provider .card-art::before { transition: transform 0.5s var(--ease); }
140
+ .provider:hover .card-art::before { transform: translate(calc(var(--px, 0) * -6px), calc(var(--py, 0) * -4px)) scale(1.04); }
141
+ .provider.unavailable { border-color: var(--border); }
142
+ .provider.unavailable .card-art { background: radial-gradient(120% 90% at 50% 38%, #2f3631 0%, #111512 70%); }
143
+ .provider.unavailable .card-art::before { background-image: var(--locked); }
144
+ .provider.unavailable::after {
145
+ background: url("ui/lock.svg") right 8px top 8px / 32px 32px no-repeat; background-origin: border-box;
146
+ }
147
+
148
+ .session-card { min-height: 196px; }
149
+ .session-card .card-art::after {
150
+ content: ""; position: absolute; inset: 0; background: var(--working) no-repeat;
151
+ opacity: 0; transition: opacity 0.6s var(--ease);
152
+ }
153
+ .session-card:has(.status-pill.active) .card-art::after { opacity: 1; }
154
+ .session-card:has(.status-pill.active) { border-color: color-mix(in srgb, var(--pc) 60%, var(--border)); }
155
+ .session-card.exited .card-art { filter: sepia(0.4) grayscale(0.75) brightness(0.8); }
156
+ .session-card .card-top > .provider-icon { display: none; }
157
+ .session-card .card-top { flex-wrap: wrap; gap: 6px 8px; }
158
+ .session-card .card-title { flex-basis: 100%; }
159
+ /* The reorder grip steps out from under the corner gusset. */
160
+ .session-card .drag-handle { margin-right: 14px; }
161
+
162
+ /* Working: a big pressure gauge rattles behind the builder while steam rises. */
163
+ .card-aura { position: absolute; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 0.6s var(--ease); }
164
+ .card-aura::before {
165
+ content: ""; position: absolute; left: 50%; top: 34%; width: 150%; aspect-ratio: 1; translate: -50% -50%;
166
+ background: url("ui/gauge.svg") center / 100% no-repeat; opacity: 0.3;
167
+ filter: drop-shadow(0 0 6px color-mix(in srgb, var(--pc) 70%, transparent));
168
+ }
169
+ .card-aura::after {
170
+ content: ""; position: absolute; inset: 0 0 auto 0; height: calc(100% + 140px);
171
+ background-image:
172
+ radial-gradient(closest-side, rgba(255, 255, 255, 0.34), transparent),
173
+ radial-gradient(closest-side, color-mix(in srgb, var(--pc) 40%, rgba(255, 255, 255, 0.3)), transparent),
174
+ radial-gradient(closest-side, rgba(255, 240, 220, 0.26), transparent);
175
+ background-size: 64px 70px, 88px 70px, 46px 140px;
176
+ background-position: 0 10px, 34px 40px, 18px 70px;
177
+ filter: blur(2px);
178
+ mask-image: linear-gradient(to top, #000 25%, transparent 80%);
179
+ }
180
+ .session-card:has(.status-pill.active) .card-aura { opacity: 1; }
181
+ .session-card:has(.status-pill.active) .card-aura::before { animation: goblinville-rattle 2.4s ease-in-out infinite; }
182
+ .session-card:has(.status-pill.active) .card-aura::after { animation: goblinville-steam 3.4s linear infinite; }
183
+ body:has(#terminal-panel:not([hidden])) main :is(.card-aura, .status-pill, .agent)::before,
184
+ body:has(#terminal-panel:not([hidden])) main :is(.card-aura, .agent)::after { animation-play-state: paused; }
185
+
186
+ .level-badge {
187
+ display: grid; place-items: center; position: absolute; left: 10px; bottom: 10px; z-index: 3;
188
+ width: 52px; height: 52px; padding-top: 1px;
189
+ background: url("ui/level.svg") center / contain no-repeat;
190
+ font-family: var(--font-display); font-weight: 400; font-size: 1.12rem; color: #ffe3b0; font-variant-numeric: tabular-nums;
191
+ text-shadow: 0 0 6px rgba(240, 138, 74, 0.8), 0 1px 2px #000;
192
+ filter: drop-shadow(0 2px 3px rgba(10, 14, 10, 0.45));
193
+ }
194
+ .level-badge:empty { display: none; }
195
+ .level-badge.level-up { animation: goblinville-tighten 1.1s var(--ease); }
196
+
197
+ .agent {
198
+ --fc: var(--c);
199
+ border-width: 1.5px; border-color: #b8703a; border-radius: 9px; place-items: end end; padding: 0 3px 1px 0;
200
+ background: #101511 center / cover no-repeat;
201
+ color: #fff; font-size: 0.6rem; text-shadow: 0 0 3px #000, 0 1px 2px #000;
202
+ box-shadow: 0 0 0 1px rgba(74, 34, 12, 0.5), 0 0 8px color-mix(in srgb, var(--fc) 45%, transparent);
203
+ }
204
+ .session-card .agent { width: 34px; height: 34px; }
205
+ .agent.working::after { border-color: var(--fc); border-radius: 11px; }
206
+ .agent[data-familiar="flame"] { --fc: #ff9a4a; background-image: url("familiars/flame.png"); }
207
+ .agent[data-familiar="leaf"] { --fc: #7fd35a; background-image: url("familiars/leaf.png"); }
208
+ .agent[data-familiar="night"] { --fc: #b38cff; background-image: url("familiars/night.png"); }
209
+ .agent[data-familiar="aether"] { --fc: #6cc8ff; background-image: url("familiars/aether.png"); }
210
+ .agent.summon { animation: goblinville-hatch 0.8s var(--ease) both; }
211
+
212
+ .meter-label { padding-left: 19px; background: url("ui/nut.svg") left center / 14px 14px no-repeat; }
213
+ .meter + .meter .meter-label { background-image: url("ui/tube.svg"); }
214
+ .meter-bar, .stat-bar { height: 7px; border-radius: 2px; box-shadow: inset 0 1px 1px rgba(30, 40, 25, 0.2); }
215
+ .meter-fill { border-radius: 2px; background: linear-gradient(90deg, #1d6656, #4fae8c); }
216
+ .meter + .meter .meter-fill { background: linear-gradient(90deg, #2f55b8, #64a0f0); }
217
+ .meter.low .meter-fill { background: linear-gradient(90deg, #985200, #e9a53e); }
218
+ .meter.empty .meter-fill { background: linear-gradient(90deg, #9c2a20, #d9584a); }
219
+ .stat-fill { border-radius: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 60%, #23291f), var(--tier)); }
220
+ .model-stats-head { color: var(--accent); }
221
+ .stat-tier { border-radius: 4px; font-family: var(--font-display); font-weight: 400; }
222
+ .tier-s { --tier: #b07d12; --tier-ink: #6b4a00; }
223
+ .tier-a { --tier: #8a55c8; --tier-ink: #5a2f94; }
224
+ .tier-b { --tier: #3a6fd0; --tier-ink: #1f4a9c; }
225
+ .tier-c { --tier: #2f8a45; --tier-ink: #1c5e2c; }
226
+ .tier-d { --tier: #8d8f7c; --tier-ink: #52554a; }
227
+
228
+ #empty { padding: 4px 16px 8px; text-align: center; }
229
+ #empty::before {
230
+ content: ""; display: block; width: 236px; height: 214px; margin: 0 auto 12px;
231
+ background: image-set(url("ui/empty-state.avif") type("image/avif"), url("ui/empty-state.webp") type("image/webp")) center / contain no-repeat;
232
+ filter: drop-shadow(0 12px 16px var(--empty-shadow));
233
+ transform-origin: 50% 100%;
234
+ animation: goblinville-idle 5.5s ease-in-out infinite;
235
+ }
236
+
237
+ .status-pill { border: 1px solid var(--border); background: var(--panel-strong); }
238
+ .status-pill.active { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 9%, var(--surface)); }
239
+ .status-pill.exited { border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
240
+ .model-pill { border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
241
+ .provider .tier { border-color: color-mix(in srgb, var(--pc) 45%, var(--border)); color: color-mix(in srgb, var(--pc) 50%, var(--text)); background: color-mix(in srgb, var(--pc) 10%, var(--surface)); }
242
+
243
+ .btn { background: var(--panel-strong); }
244
+ .btn:hover { border-color: color-mix(in srgb, var(--gold) 70%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent); }
245
+ .btn.primary {
246
+ border-color: #154a3e; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
247
+ background: linear-gradient(#2f8a73, #1c5c4d);
248
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(227, 166, 119, 0.35), 0 3px 10px rgba(20, 70, 56, 0.28);
249
+ }
250
+ .btn.primary:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0 0 1px rgba(227, 166, 119, 0.6), 0 5px 16px rgba(20, 70, 56, 0.35); }
251
+ .btn.danger:hover { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent); }
252
+ .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select, .notes-text { background: var(--panel-strong); }
253
+
254
+ .models, .news-panel, .auth, .news-latest, .appearance-menu { background: var(--panel-strong); backdrop-filter: blur(16px); }
255
+ .models, .news-panel { box-shadow: var(--dialog-shadow); }
256
+ .model-columns, .news-day { background: transparent; backdrop-filter: blur(16px); }
257
+ .models::backdrop, .news-panel::backdrop { background: rgba(18, 26, 20, 0.42); backdrop-filter: blur(2px); }
258
+ .models { border-radius: 10px; }
259
+ .models-bar, .panel-bar { border-bottom: 1px solid transparent; border-image: var(--rule) 1; }
260
+ .model-group h4, .news-day, .changelog-type { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.05em; color: var(--gold-ink); }
261
+ .news-latest { border-radius: 8px; }
262
+ .news-row { transition: background-color 0.15s; }
263
+ .news-row:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); }
264
+ .news-row:first-child { border-radius: 8px 8px 0 0; }
265
+ .news-row:last-child { border-radius: 0 0 8px 8px; }
266
+ .news-filter[aria-pressed="true"] { border-color: #154a3e; background: linear-gradient(#2f8a73, #1c5c4d); }
267
+ .auth { position: relative; border-radius: 10px; padding: 32px; box-shadow: var(--dialog-shadow); }
268
+ .terminal-panel { border-radius: 8px; border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); box-shadow: 0 30px 70px rgba(15, 22, 16, 0.45); }
269
+ .panel-bar { background: var(--panel-strong); }
270
+ .tip { background: #121814; color: #e6e8dc; border: 1px solid #8a4a22; box-shadow: inset 0 0 0 1px rgba(227, 166, 119, 0.12), 0 12px 30px rgba(5, 10, 6, 0.45); }
271
+ .tip strong { color: #f2b47e; font-family: var(--font-display); font-weight: 400; letter-spacing: 0.03em; }
272
+
273
+ .providers.deal > .provider { animation: goblinville-hoist 0.75s var(--ease) both; }
274
+ .providers.deal > .provider:nth-child(2) { animation-delay: 0.09s; }
275
+ .providers.deal > .provider:nth-child(3) { animation-delay: 0.18s; }
276
+ .providers.deal > .provider:nth-child(4) { animation-delay: 0.27s; }
277
+ .providers.deal > .provider:nth-child(5) { animation-delay: 0.36s; }
278
+ .providers.deal > .provider:nth-child(n + 6) { animation-delay: 0.45s; }
279
+ .session-card.enter { animation: goblinville-bolt 0.6s var(--ease) both; }
280
+
281
+ /* Light: the builders look out of round-topped workshop windows rimmed in copper. */
282
+ .card-art { border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 200, 160, 0.16), 0 0 0 1.5px #b8703a, 0 0 0 3px rgba(74, 34, 12, 0.26), 0 2px 8px rgba(25, 32, 22, 0.25); }
283
+ .provider { padding-top: 240px; }
284
+ .provider .card-art { inset: 14px 14px auto; height: 212px; border-radius: 50% 50% 6px 6px / 56px 56px 6px 6px; }
285
+ .provider .card-art::before { background-size: 108% auto; background-position: 50% 10%; }
286
+ .session-card { padding-left: 164px; }
287
+ .session-card .card-art, .session-card .card-aura { inset: 14px auto 14px 14px; width: 134px; border-radius: 50% 50% 6px 6px / 40px 40px 6px 6px; }
288
+ .session-card .card-art::before, .session-card .card-art::after { background-size: 165% auto; background-position: 50% 14%; }
289
+ .session-card .level-badge { left: 18px; bottom: 18px; width: 46px; height: 46px; font-size: 1.02rem; }
290
+
291
+ @media (max-width: 640px) {
292
+ .session-card { padding-left: 144px; }
293
+ .session-card .card-art, .session-card .card-aura { width: 114px; }
294
+ }
295
+
296
+ @media (prefers-reduced-motion: reduce) {
297
+ .provider, .session-card, .card-aura, .session-card .card-art::after, .provider .card-art::before { transition: none; }
298
+ .provider:hover, .session-card:hover, .provider:hover .card-art::before { transform: none; }
299
+ .provider::before { display: none; }
300
+ .providers.deal > .provider, .session-card.enter, .level-badge.level-up, .agent.summon, #empty::before,
301
+ .session-card:has(.status-pill.active) .card-aura::before, .session-card:has(.status-pill.active) .card-aura::after { animation: none; }
302
+ }
303
+ }
304
+
305
+ :where(:root[data-skin="goblinville"][data-theme="dark"]) {
306
+ --bg: #070a09;
307
+ --surface: #0f1512;
308
+ --surface-2: #161e1a;
309
+ --border: #26322b;
310
+ --text: #e3e6da;
311
+ --muted: #9aa292;
312
+ --heading: #f3d9b8;
313
+ --accent: #7fd2b4;
314
+ --accent-fill: #23735f;
315
+ --danger: #f07b6a;
316
+ --ok: #82d67a;
317
+ --warn: #ebb75a;
318
+ --gold: #e0955a;
319
+ --gold-ink: #f2b47e;
320
+ --focus: #f2b47e;
321
+ --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
322
+
323
+ --panel: rgba(13, 19, 16, 0.8);
324
+ --panel-strong: rgba(14, 20, 17, 0.93);
325
+ --page-art: image-set(url("page.avif") type("image/avif"), url("page.webp") type("image/webp"));
326
+ --page-veil: linear-gradient(rgba(7, 10, 9, 0.12), rgba(7, 10, 9, 0.12) 45%, rgba(7, 10, 9, 0.4));
327
+ --empty-shadow: rgba(240, 140, 70, 0.22);
328
+ --card-shadow: inset 0 1px 0 rgba(255, 210, 170, 0.06), 0 10px 30px rgba(0, 0, 0, 0.5);
329
+ --card-hover-shadow: inset 0 1px 0 rgba(255, 210, 170, 0.08), 0 0 26px color-mix(in srgb, var(--pc) 24%, transparent);
330
+ --dialog-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(227, 166, 119, 0.06);
331
+
332
+ .tier-s { --tier: #f2c25b; --tier-ink: #fbe2a6; }
333
+ .tier-a { --tier: #b69af0; --tier-ink: #e2d6ff; }
334
+ .tier-b { --tier: #6ea2f2; --tier-ink: #d2e3ff; }
335
+ .tier-c { --tier: #82d67a; --tier-ink: #d6f5d0; }
336
+ .tier-d { --tier: #9aa292; --tier-ink: #dde2d4; }
337
+
338
+ /* Dark: the builders stand in the furnace light, faded into the plate. */
339
+ .card-art { border-radius: 0; box-shadow: none; }
340
+ .provider { padding-top: 198px; }
341
+ .provider .card-art { inset: 0 0 auto 0; height: 252px; border-radius: 0; mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); }
342
+ .provider .card-art::before { background-size: cover; background-position: center 6%; }
343
+ .provider .vendor { color: #fff1de; }
344
+ .session-card { padding-left: 154px; }
345
+ .session-card .card-art, .session-card .card-aura {
346
+ inset: 0 auto 0 0; width: 170px; border-radius: 0;
347
+ mask-image: linear-gradient(to right, #000 62%, transparent 100%);
348
+ }
349
+ .session-card .card-art::before, .session-card .card-art::after { background-size: 170px auto; background-position: center 8%; }
350
+ .session-card .level-badge { left: 12px; bottom: 12px; }
351
+ .provider-icon:not(.has-image) { box-shadow: 0 0 0 1.5px #b8703a, 0 0 10px rgba(240, 138, 74, 0.25); }
352
+
353
+ .meter-bar, .stat-bar { background: #050806; box-shadow: inset 0 0 0 1px rgba(227, 166, 119, 0.16); }
354
+ .meter-fill { background: linear-gradient(90deg, #1f7a64, #6fdcb2); box-shadow: 0 0 8px rgba(111, 220, 178, 0.4); }
355
+ .meter + .meter .meter-fill { background: linear-gradient(90deg, #3a62cc, #7ab2ff); box-shadow: 0 0 8px rgba(122, 178, 255, 0.45); }
356
+ .meter.low .meter-fill { background: linear-gradient(90deg, #b8781a, #f2bf5c); box-shadow: 0 0 8px rgba(242, 191, 92, 0.45); }
357
+ .meter.empty .meter-fill { background: linear-gradient(90deg, #b8402f, #f07b6a); box-shadow: 0 0 8px rgba(240, 123, 106, 0.45); }
358
+ .stat-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 50%, #000), var(--tier)); box-shadow: 0 0 8px color-mix(in srgb, var(--tier) 40%, transparent); }
359
+ .stat-tier { background: linear-gradient(color-mix(in srgb, var(--tier) 28%, #0f1512), #050806); border-color: color-mix(in srgb, var(--tier) 60%, #000); }
360
+
361
+ .status-pill { background: rgba(5, 8, 6, 0.6); }
362
+ .status-pill.active { background: color-mix(in srgb, var(--ok) 10%, rgba(5, 8, 6, 0.6)); box-shadow: 0 0 10px rgba(130, 214, 122, 0.2); }
363
+ .status-pill.exited { background: color-mix(in srgb, var(--danger) 8%, rgba(5, 8, 6, 0.6)); }
364
+ .provider .tier { color: color-mix(in srgb, var(--pc) 65%, #fff); background: rgba(5, 8, 6, 0.6); }
365
+ .badge { background: rgba(5, 8, 6, 0.5); }
366
+
367
+ .btn { background: linear-gradient(rgba(30, 40, 34, 0.92), rgba(16, 22, 18, 0.92)); border-color: #3a4a3f; box-shadow: inset 0 1px 0 rgba(255, 210, 170, 0.08); }
368
+ .btn:hover { border-color: #b8703a; box-shadow: inset 0 1px 0 rgba(255, 210, 170, 0.1), 0 0 12px rgba(224, 149, 90, 0.3); }
369
+ .btn.primary { border-color: #3f9a80; background: linear-gradient(#2f8a73, #1b5a4b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(227, 166, 119, 0.3), 0 0 16px rgba(60, 170, 140, 0.3); }
370
+ .btn.danger { color: #f59a8c; }
371
+ .btn.danger:hover { border-color: #b8402f; box-shadow: 0 0 12px rgba(240, 123, 106, 0.3); }
372
+ .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select, .notes-text { border-color: #3a4a3f; background: rgba(5, 8, 6, 0.7); }
373
+
374
+ .models::backdrop, .news-panel::backdrop { background: rgba(2, 5, 3, 0.66); }
375
+ .terminal-panel { border-color: #5a3a22; box-shadow: 0 0 0 1px rgba(227, 166, 119, 0.06), 0 30px 80px rgba(0, 0, 0, 0.7); }
376
+ .news-link { color: #f6efe2; }
377
+ a.news-link:visited { color: var(--muted); }
378
+
379
+ @media (max-width: 640px) {
380
+ .session-card { padding-left: 120px; }
381
+ .session-card .card-art, .session-card .card-aura { width: 134px; }
382
+ .session-card .card-art::before, .session-card .card-art::after { background-size: 134px auto; }
383
+ }
384
+ }
385
+
386
+ @keyframes goblinville-hoist {
387
+ from { opacity: 0; transform: translateY(-34px) rotate(1.6deg); }
388
+ 55% { opacity: 1; transform: translateY(5px) rotate(-0.6deg); }
389
+ 78% { transform: translateY(-2px) rotate(0.2deg); }
390
+ }
391
+ @keyframes goblinville-bolt {
392
+ from { opacity: 0; transform: translateX(-18px) scaleX(0.94); transform-origin: 0 50%; }
393
+ 60% { opacity: 1; transform: translateX(3px) scaleX(1.01); }
394
+ 80% { transform: translateX(-1px); }
395
+ }
396
+ @keyframes goblinville-tighten {
397
+ 20% { transform: rotate(120deg) scale(1.22); filter: brightness(1.4) drop-shadow(0 0 10px #f2b47e); }
398
+ 45% { transform: rotate(240deg) scale(1.22); }
399
+ 70% { transform: rotate(1turn) scale(1.18); filter: brightness(1.5) drop-shadow(0 0 12px #f2b47e); }
400
+ 86% { transform: rotate(1turn) scale(0.94); }
401
+ to { transform: rotate(1turn); }
402
+ }
403
+ @keyframes goblinville-hatch {
404
+ from { opacity: 0; transform: scale(0.2) rotate(-25deg); filter: blur(4px) brightness(2); }
405
+ 55% { opacity: 1; transform: scale(1.18) rotate(8deg); filter: blur(0) brightness(1.2); }
406
+ 80% { transform: scale(0.95) rotate(-3deg); }
407
+ }
408
+ @keyframes goblinville-rattle {
409
+ 0%, 100% { transform: rotate(0deg); }
410
+ 20% { transform: rotate(-4deg); }
411
+ 24% { transform: rotate(-2.5deg); }
412
+ 28% { transform: rotate(-4.5deg); }
413
+ 60% { transform: rotate(3deg); }
414
+ 64% { transform: rotate(1.5deg); }
415
+ 68% { transform: rotate(3.5deg); }
416
+ }
417
+ @keyframes goblinville-steam { to { transform: translateY(-140px); } }
418
+ @keyframes goblinville-idle {
419
+ 0%, 100% { transform: translateY(0) rotate(0deg); }
420
+ 30% { transform: translateY(-3px) rotate(-0.8deg); }
421
+ 65% { transform: translateY(-1px) rotate(0.8deg); }
422
+ }
package/web/skins/goblinville/ui/frame.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96"><defs><linearGradient id="c" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#f3b483"/><stop offset="0.5" stop-color="#b8693a"/><stop offset="1" stop-color="#6a3317"/></linearGradient></defs><path d="M26 5.5h44M26 90.5h44M5.5 26v44M90.5 26v44" stroke="#6a3317" stroke-opacity="0.7" stroke-width="2.6" stroke-linecap="round"/><path d="M26 5.5h44M26 90.5h44M5.5 26v44M90.5 26v44" stroke="#d98b55" stroke-opacity="0.9" stroke-width="1.2" stroke-linecap="round"/><path d="M3 7a4 4 0 0 1 4-4h21L3 28z" fill="url(#c)" stroke="#4a220c" stroke-width="0.8" stroke-linejoin="round"/><path d="M6 6.5h15M6.5 6v15" stroke="#ffd9b8" stroke-opacity="0.4" stroke-width="0.7"/><g fill="#ffe7c8" stroke="#5a2a10" stroke-width="0.6"><circle cx="7.5" cy="7.5" r="1.7"/><circle cx="17.5" cy="7" r="1.25"/><circle cx="7" cy="17.5" r="1.25"/></g><g transform="matrix(-1 0 0 1 96 0)"><path d="M3 7a4 4 0 0 1 4-4h21L3 28z" fill="url(#c)" stroke="#4a220c" stroke-width="0.8" stroke-linejoin="round"/><path d="M6 6.5h15M6.5 6v15" stroke="#ffd9b8" stroke-opacity="0.4" stroke-width="0.7"/><g fill="#ffe7c8" stroke="#5a2a10" stroke-width="0.6"><circle cx="7.5" cy="7.5" r="1.7"/><circle cx="17.5" cy="7" r="1.25"/><circle cx="7" cy="17.5" r="1.25"/></g></g><g transform="matrix(1 0 0 -1 0 96)"><path d="M3 7a4 4 0 0 1 4-4h21L3 28z" fill="url(#c)" stroke="#4a220c" stroke-width="0.8" stroke-linejoin="round"/><path d="M6 6.5h15M6.5 6v15" stroke="#ffd9b8" stroke-opacity="0.4" stroke-width="0.7"/><g fill="#ffe7c8" stroke="#5a2a10" stroke-width="0.6"><circle cx="7.5" cy="7.5" r="1.7"/><circle cx="17.5" cy="7" r="1.25"/><circle cx="7" cy="17.5" r="1.25"/></g></g><g transform="matrix(-1 0 0 -1 96 96)"><path d="M3 7a4 4 0 0 1 4-4h21L3 28z" fill="url(#c)" stroke="#4a220c" stroke-width="0.8" stroke-linejoin="round"/><path d="M6 6.5h15M6.5 6v15" stroke="#ffd9b8" stroke-opacity="0.4" stroke-width="0.7"/><g fill="#ffe7c8" stroke="#5a2a10" stroke-width="0.6"><circle cx="7.5" cy="7.5" r="1.7"/><circle cx="17.5" cy="7" r="1.25"/><circle cx="7" cy="17.5" r="1.25"/></g></g></svg>
package/web/skins/goblinville/ui/gauge.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><linearGradient id="b" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#f8dc9a"/><stop offset="0.45" stop-color="#c38f3e"/><stop offset="1" stop-color="#6e4718"/></linearGradient></defs><circle cx="100" cy="100" r="92" fill="none" stroke="url(#b)" stroke-width="9"/><circle cx="100" cy="100" r="82" fill="none" stroke="url(#b)" stroke-width="1.6"/><path d="M53.33 146.67L46.26 153.74M48.17 140.86L40.32 147.05M43.73 134.48L35.20 139.71M40.06 127.63L30.98 131.82M37.23 120.40L27.72 123.49M35.27 112.88L25.46 114.83M34.20 105.18L24.23 105.96M34.05 97.41L24.06 97.02M34.81 89.68L24.94 88.11M36.48 82.08L26.85 79.37M39.02 74.74L29.79 70.92M42.42 67.75L33.69 62.86M46.60 61.21L38.51 55.33M51.53 55.20L44.19 48.41M57.14 49.81L50.64 42.21M63.33 45.12L57.78 36.81M70.04 41.19L65.50 32.28M77.16 38.08L73.70 28.70M84.59 35.82L82.26 26.10M92.24 34.46L91.07 24.53M100.00 34.00L100.00 24.00M107.76 34.46L108.93 24.53M115.41 35.82L117.74 26.10M122.84 38.08L126.30 28.70M129.96 41.19L134.50 32.28M136.67 45.12L142.22 36.81M142.86 49.81L149.36 42.21M148.47 55.20L155.81 48.41M153.40 61.21L161.49 55.33M157.58 67.75L166.31 62.86M160.98 74.74L170.21 70.92M163.52 82.08L173.15 79.37M165.19 89.68L175.06 88.11M165.95 97.41L175.94 97.02M165.80 105.18L175.77 105.96M164.73 112.88L174.54 114.83M162.77 120.40L172.28 123.49M159.94 127.63L169.02 131.82M156.27 134.48L164.80 139.71M151.83 140.86L159.68 147.05M146.67 146.67L153.74 153.74" stroke="url(#b)" stroke-width="1.6"/><path d="M60.40 139.60L46.26 153.74M45.08 110.93L25.46 114.83M48.26 78.57L29.79 70.92M68.89 53.44L57.78 36.81M100.00 44.00L100.00 24.00M131.11 53.44L142.22 36.81M151.74 78.57L170.21 70.92M154.92 110.93L174.54 114.83M139.60 139.60L153.74 153.74" stroke="url(#b)" stroke-width="4" stroke-linecap="round"/><path d="M100 100L136 64" stroke="url(#b)" stroke-width="5" stroke-linecap="round"/><circle cx="100" cy="100" r="10" fill="url(#b)"/><g fill="url(#b)"><circle cx="100.00" cy="8.00" r="4"/><circle cx="165.05" cy="34.95" r="4"/><circle cx="192.00" cy="100.00" r="4"/><circle cx="165.05" cy="165.05" r="4"/><circle cx="100.00" cy="192.00" r="4"/><circle cx="34.95" cy="165.05" r="4"/><circle cx="8.00" cy="100.00" r="4"/><circle cx="34.95" cy="34.95" r="4"/></g></svg>
package/web/skins/goblinville/ui/level.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="b" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#f8dc9a"/><stop offset="0.45" stop-color="#c38f3e"/><stop offset="1" stop-color="#6e4718"/></linearGradient><radialGradient id="w" cx="42%" cy="36%" r="70%"><stop offset="0" stop-color="#3c4440"/><stop offset="0.75" stop-color="#1c2220"/><stop offset="1" stop-color="#101412"/></radialGradient></defs><path d="M58.85 47.50L32.00 63.00L5.15 47.50L5.15 16.50L32.00 1.00L58.85 16.50Z" fill="url(#b)" stroke="#4f3210" stroke-width="1" stroke-linejoin="round"/><path d="M56.25 46.00L32.00 60.00L7.75 46.00L7.75 18.00L32.00 4.00L56.25 18.00Z" fill="none" stroke="#fff1c8" stroke-opacity="0.45" stroke-width="0.8" stroke-linejoin="round"/><circle cx="32" cy="32" r="19.5" fill="url(#w)" stroke="#f3d08a" stroke-width="1.6"/><circle cx="32" cy="32" r="16.5" fill="none" stroke="#7fc4a8" stroke-opacity="0.35" stroke-width="0.8" stroke-dasharray="2.2 2.2"/><g fill="#fff0c4" stroke="#6b4419" stroke-width="0.5"><circle cx="32.00" cy="6.00" r="1.4"/><circle cx="54.52" cy="19.00" r="1.4"/><circle cx="54.52" cy="45.00" r="1.4"/><circle cx="32.00" cy="58.00" r="1.4"/><circle cx="9.48" cy="45.00" r="1.4"/><circle cx="9.48" cy="19.00" r="1.4"/></g></svg>
package/web/skins/goblinville/ui/lock.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><linearGradient id="c" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#f3b483"/><stop offset="0.5" stop-color="#b8693a"/><stop offset="1" stop-color="#6a3317"/></linearGradient><radialGradient id="v" cx="70%" cy="80%" r="60%"><stop offset="0" stop-color="#5fae8f" stop-opacity="0.75"/><stop offset="1" stop-color="#5fae8f" stop-opacity="0"/></radialGradient><linearGradient id="i" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#d9dde3"/><stop offset="1" stop-color="#7d848f"/></linearGradient></defs><rect x="2" y="2" width="36" height="36" rx="7" fill="url(#c)" stroke="#4a220c" stroke-width="1"/><rect x="2" y="2" width="36" height="36" rx="7" fill="url(#v)"/><rect x="4.6" y="4.6" width="30.8" height="30.8" rx="5" fill="none" stroke="#ffd9b8" stroke-opacity="0.35" stroke-width="0.7"/><g fill="#ffe1c4" stroke="#5a2a10" stroke-width="0.5"><circle cx="7.5" cy="7.5" r="1.3"/><circle cx="32.5" cy="7.5" r="1.3"/><circle cx="7.5" cy="32.5" r="1.3"/><circle cx="32.5" cy="32.5" r="1.3"/></g><path d="M15.4 19.5v-3.2a4.6 4.6 0 0 1 9.2 0v3.2" fill="none" stroke="url(#i)" stroke-width="2.3" stroke-linecap="round"/><rect x="12.6" y="19" width="14.8" height="11.2" rx="2.4" fill="url(#i)" stroke="#4a5059" stroke-width="0.7"/><circle cx="20" cy="23.6" r="1.7" fill="#2a2e35"/><rect x="19.25" y="24" width="1.5" height="3.3" rx="0.75" fill="#2a2e35"/></svg>
package/web/skins/goblinville/ui/nut.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><linearGradient id="b" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#f8dc9a"/><stop offset="0.45" stop-color="#c38f3e"/><stop offset="1" stop-color="#6e4718"/></linearGradient></defs><path d="M14.50 11.75L8.00 15.50L1.50 11.75L1.50 4.25L8.00 0.50L14.50 4.25Z" fill="url(#b)" stroke="#4f3210" stroke-width="0.5" stroke-linejoin="round"/><circle cx="8" cy="8" r="2.9" fill="#1c2220" stroke="#f3d08a" stroke-width="0.7"/></svg>
package/web/skins/goblinville/ui/tube.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><radialGradient id="g" cx="50%" cy="45%" r="60%"><stop offset="0" stop-color="#eaf5ff"/><stop offset="0.45" stop-color="#7ab4ff"/><stop offset="1" stop-color="#2f4fc8" stop-opacity="0.85"/></radialGradient><linearGradient id="b" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#7a5320"/><stop offset="0.5" stop-color="#f3d08a"/><stop offset="1" stop-color="#7a5320"/></linearGradient></defs><path d="M4.2 11V5.4a3.8 3.8 0 0 1 7.6 0V11z" fill="url(#g)" stroke="#dbe9ff" stroke-width="0.6"/><path d="M8 4.2v4.6M6.4 8.8h3.2" stroke="#fff" stroke-opacity="0.85" stroke-width="0.7" stroke-linecap="round"/><rect x="3.4" y="10.6" width="9.2" height="3.6" rx="0.8" fill="url(#b)" stroke="#4f3210" stroke-width="0.4"/></svg>
package/web/theme.js CHANGED
@@ -10,6 +10,7 @@
10
10
  { id: 'orbital', name: 'Orbital' },
11
11
  { id: 'grove', name: 'Grove' },
12
12
  { id: 'gnomeland', name: 'Gnomeland' },
13
+ { id: 'goblinville', name: 'Goblinville' },
13
14
  ];
14
15
  window.agentGuildSkins = skins;
15
16