@trenoxxious/n-components 1.0.4 → 1.0.6
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.
- package/dist/index.css +204 -0
- package/dist/index.html +98 -0
- package/dist/{n-components.js → n-components.es.js} +64 -5
- package/dist/n-components.umd.js +142 -0
- package/dist/one-dark.css +449 -0
- package/package.json +4 -2
package/dist/index.css
ADDED
|
@@ -0,0 +1,204 @@
|
|
|
1
|
+
@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&display=swap');
|
|
2
|
+
@import url('https://fonts.googleapis.com/css2?family=Manjari:wght@100;400;700&display=swap');
|
|
3
|
+
|
|
4
|
+
:root {
|
|
5
|
+
font-family: "Cal Sans", system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
6
|
+
line-height: 1.5;
|
|
7
|
+
font-weight: 300;
|
|
8
|
+
font-size: 16px;
|
|
9
|
+
color-scheme: light dark;
|
|
10
|
+
color: rgba(255, 255, 255, 0.87);
|
|
11
|
+
background: linear-gradient(to top, #182633, #242424);
|
|
12
|
+
font-synthesis: none;
|
|
13
|
+
text-rendering: optimizeLegibility;
|
|
14
|
+
-webkit-font-smoothing: antialiased;
|
|
15
|
+
-moz-osx-font-smoothing: grayscale;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
* {
|
|
19
|
+
margin: 0;
|
|
20
|
+
padding: 0;
|
|
21
|
+
text-align: center;
|
|
22
|
+
text-wrap: pretty;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
body {
|
|
26
|
+
margin: 0;
|
|
27
|
+
min-width: 320px;
|
|
28
|
+
min-height: 100vh;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
header {
|
|
32
|
+
position: relative;
|
|
33
|
+
display: flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
justify-content: center;
|
|
36
|
+
flex-direction: column;
|
|
37
|
+
background-clip: text;
|
|
38
|
+
margin-left: 5%;
|
|
39
|
+
margin-right: 5%;
|
|
40
|
+
margin-bottom: 50px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
header h1 {
|
|
44
|
+
position: relative;
|
|
45
|
+
background-clip: text;
|
|
46
|
+
background-image: linear-gradient(2deg, rgb(255, 255, 255) 40%, transparent 40.5%);
|
|
47
|
+
-webkit-background-clip: text;
|
|
48
|
+
color: transparent;
|
|
49
|
+
font-size: 9rem;
|
|
50
|
+
-webkit-text-stroke-color: rgb(255, 255, 255);
|
|
51
|
+
-webkit-text-stroke-width: 2px;
|
|
52
|
+
overflow: hidden;
|
|
53
|
+
text-wrap: nowrap;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
header p {
|
|
57
|
+
text-align: center;
|
|
58
|
+
text-wrap: pretty;
|
|
59
|
+
font-size: 1.8rem;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
h3 {
|
|
63
|
+
font-family: "Cal Sans", system-ui, Avenir, Helvetica, Arial, sans-serif !important;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
p {
|
|
67
|
+
font-family: "Manjari", sans-serif, system-ui;
|
|
68
|
+
font-weight: 400;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
b {
|
|
72
|
+
font-family: "Cal Sans", system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
::selection {
|
|
76
|
+
color: hsla(187, 83%, 62%, 1.00);
|
|
77
|
+
background: hsla(286, 36%, 46%, 1.00);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.sec {
|
|
81
|
+
margin-top: 15px;
|
|
82
|
+
margin-bottom: 15px;
|
|
83
|
+
font-size: 1.5rem;
|
|
84
|
+
font-family: "Manjari", sans-serif, system-ui;
|
|
85
|
+
font-weight: 400;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.components-grid {
|
|
89
|
+
font-family: "Manjari", sans-serif, system-ui;
|
|
90
|
+
display: grid;
|
|
91
|
+
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
92
|
+
gap: 24px;
|
|
93
|
+
max-width: 1200px;
|
|
94
|
+
margin: 0 auto;
|
|
95
|
+
padding: 0 20px;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.component-card {
|
|
99
|
+
display: flex;
|
|
100
|
+
flex-direction: column;
|
|
101
|
+
gap: 16px;
|
|
102
|
+
padding: 24px;
|
|
103
|
+
background: rgba(36, 36, 36, 0.6);
|
|
104
|
+
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
105
|
+
border-radius: 4px;
|
|
106
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
107
|
+
transition: border-color 0.2s ease;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.component-header {
|
|
111
|
+
display: flex;
|
|
112
|
+
flex-direction: column;
|
|
113
|
+
gap: 6px;
|
|
114
|
+
align-items: flex-start;
|
|
115
|
+
padding-bottom: 12px;
|
|
116
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.component-header h3 {
|
|
120
|
+
margin: 0;
|
|
121
|
+
font-size: 1.25rem;
|
|
122
|
+
font-weight: 500;
|
|
123
|
+
color: rgba(255, 255, 255, 0.95);
|
|
124
|
+
font-family: "Manjari", sans-serif, system-ui;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.button-grid {
|
|
128
|
+
display: grid;
|
|
129
|
+
grid-template-columns: repeat(2, 1fr);
|
|
130
|
+
padding: 16px;
|
|
131
|
+
background: rgba(24, 38, 51, 0.4);
|
|
132
|
+
border: 1px dashed rgba(255, 255, 255, 0.1);
|
|
133
|
+
border-radius: 4px;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.button-grid n-button {
|
|
137
|
+
padding: 8px;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.code {
|
|
141
|
+
font-family: "Manjari", sans-serif, system-ui;
|
|
142
|
+
text-wrap: nowrap;
|
|
143
|
+
text-align: left;
|
|
144
|
+
overflow-x: auto;
|
|
145
|
+
justify-content: flex-start;
|
|
146
|
+
align-items: center;
|
|
147
|
+
padding: 5px 5px 0 5px;
|
|
148
|
+
background: hsl(220, 13%, 18%);
|
|
149
|
+
border-radius: 4px;
|
|
150
|
+
font-size: 1rem;
|
|
151
|
+
color: rgba(194, 194, 194, 1);
|
|
152
|
+
font-weight: 500;
|
|
153
|
+
margin-bottom: 15px;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
pre {
|
|
157
|
+
text-align: left;
|
|
158
|
+
margin-left: 25px;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.code span {
|
|
162
|
+
text-wrap: nowrap;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.html-red {
|
|
166
|
+
color: rgba(255, 84, 84, 1);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.html-orange {
|
|
170
|
+
color: rgba(255, 158, 79, 1);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.html-green {
|
|
174
|
+
color: rgba(101, 255, 121, 1);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.w-full {
|
|
178
|
+
width: -webkit-fill-available;
|
|
179
|
+
width: -moz-available;
|
|
180
|
+
width: stretch;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
/* @media (prefers-color-scheme: light) {
|
|
184
|
+
:root {
|
|
185
|
+
color: #213547;
|
|
186
|
+
background-color: #ffffff;
|
|
187
|
+
}
|
|
188
|
+
} */
|
|
189
|
+
|
|
190
|
+
@media screen and (width < 1050px) {
|
|
191
|
+
header h1 {
|
|
192
|
+
font-size: 3rem;
|
|
193
|
+
-webkit-text-stroke-width: 1px;
|
|
194
|
+
background-image: linear-gradient(2deg, rgb(255, 255, 255) 39%, transparent 39.5%);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
header p {
|
|
198
|
+
font-size: 1rem;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.sec {
|
|
202
|
+
font-size: 1.25rem;
|
|
203
|
+
}
|
|
204
|
+
}
|
package/dist/index.html
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<link rel="icon" type="image/svg+xml" href="vite.svg" />
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
8
|
+
<title>n-components</title>
|
|
9
|
+
<link rel="stylesheet" href="index.css" />
|
|
10
|
+
<link rel="stylesheet" href="one-dark.css" />
|
|
11
|
+
<script src="n-components.umd.js"></script>
|
|
12
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
|
|
13
|
+
</head>
|
|
14
|
+
|
|
15
|
+
<body>
|
|
16
|
+
<header>
|
|
17
|
+
<h1>
|
|
18
|
+
n-components!
|
|
19
|
+
</h1>
|
|
20
|
+
<p>Light-weight, simple web components for use with vanilla HTML, JS and CSS.</p>
|
|
21
|
+
</header>
|
|
22
|
+
<p style="margin-left: 5%; margin-right: 5%;">Import the latest version of <b>n-components</b> into your vanilla static HTML file using:</p>
|
|
23
|
+
<div class="code" style="padding-bottom: 5px; margin-left: 5%; margin-right: 5%; text-align: center; margin-bottom: 0;"><<span class="html-red">script</span> <span class="html-orange">src=</span><span class="html-green">"https://unpkg.com/@trenoxxious/n-components@latest/dist/n-components.umd.js"</span>></<span class="html-red">script</span>></div>
|
|
24
|
+
<p style="margin-bottom: 50px;">Then, simply call any of the below <b>n-components</b> to get started.</p>
|
|
25
|
+
<p class="sec">You want some buttons? We have some cool, customizable <span class="html-red"><b>n-</b>button</span>s.</p>
|
|
26
|
+
<div class="components-grid">
|
|
27
|
+
<div class="component-card">
|
|
28
|
+
<div class="component-header">
|
|
29
|
+
<h3>Base Buttons</h3>
|
|
30
|
+
<p>Input:</p>
|
|
31
|
+
<pre><code class="language-html"><n-button variant="info">More Info</n-button></code></pre>
|
|
32
|
+
<p>Output:</p>
|
|
33
|
+
<n-button variant="info">More Info</n-button>
|
|
34
|
+
</div>
|
|
35
|
+
<p>Examples:</p>
|
|
36
|
+
<div class="button-grid">
|
|
37
|
+
<n-button variant="normal">Normal</n-button>
|
|
38
|
+
<n-button variant="info">Info</n-button>
|
|
39
|
+
<n-button variant="warning">Warning</n-button>
|
|
40
|
+
<n-button variant="alert">Alert</n-button>
|
|
41
|
+
<n-button variant="success">Success</n-button>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="component-card">
|
|
45
|
+
<div class="component-header">
|
|
46
|
+
<h3>Thin Buttons</h3>
|
|
47
|
+
<p>Input:</p>
|
|
48
|
+
<pre><code class="language-html"><n-button variant="warning" thin>A warning!</n-button></code></pre>
|
|
49
|
+
<p>Output:</p>
|
|
50
|
+
<n-button variant="warning" thin>A warning!</n-button>
|
|
51
|
+
</div>
|
|
52
|
+
<p>Examples:</p>
|
|
53
|
+
<div class="button-grid">
|
|
54
|
+
<n-button variant="normal" thin>Thin</n-button>
|
|
55
|
+
<n-button variant="info" thin>Thin</n-button>
|
|
56
|
+
<n-button variant="warning" thin>Thin</n-button>
|
|
57
|
+
<n-button variant="alert" thin>Thin</n-button>
|
|
58
|
+
<n-button variant="success" thin>Thin</n-button>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="component-card">
|
|
62
|
+
<div class="component-header">
|
|
63
|
+
<h3>Thick Buttons</h3>
|
|
64
|
+
<p>Input:</p>
|
|
65
|
+
<pre><code class="language-html"><n-button thick>Play</n-button></code></pre>
|
|
66
|
+
<p>Output:</p>
|
|
67
|
+
<n-button thick>Play</n-button>
|
|
68
|
+
</div>
|
|
69
|
+
<p>Examples:</p>
|
|
70
|
+
<div class="button-grid">
|
|
71
|
+
<n-button variant="normal" thick>Thick</n-button>
|
|
72
|
+
<n-button variant="info" thick>Thick</n-button>
|
|
73
|
+
<n-button variant="warning" thick>Thick</n-button>
|
|
74
|
+
<n-button variant="alert" thick>Thick</n-button>
|
|
75
|
+
<n-button variant="success" thick>Thick</n-button>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="component-card">
|
|
79
|
+
<div class="component-header">
|
|
80
|
+
<h3>Outlined Buttons, w/ Dark Mode</h3>
|
|
81
|
+
<p>Input:</p>
|
|
82
|
+
<pre><code class="language-html"><n-button outlineOnly dark thin>Go!</n-button></code></pre>
|
|
83
|
+
<p>Output:</p>
|
|
84
|
+
<n-button outlineOnly dark thin>Go!</n-button>
|
|
85
|
+
</div>
|
|
86
|
+
<p>Examples:</p>
|
|
87
|
+
<div class="button-grid">
|
|
88
|
+
<n-button id="buttoncomp" variant="normal" outlineOnly dark>Outlined</n-button>
|
|
89
|
+
<n-button variant="info" outlineOnly dark>Outlined</n-button>
|
|
90
|
+
<n-button variant="warning" outlineOnly dark>Outlined</n-button>
|
|
91
|
+
<n-button variant="alert" outlineOnly dark>Outlined</n-button>
|
|
92
|
+
<n-button variant="success" outlineOnly dark>Outlined</n-button>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
</body>
|
|
97
|
+
|
|
98
|
+
</html>
|
|
@@ -531,7 +531,7 @@ function __decorate(x, j, F, U) {
|
|
|
531
531
|
}
|
|
532
532
|
var NButton = class extends i {
|
|
533
533
|
constructor(...x) {
|
|
534
|
-
super(...x), this.variant = "normal", this.thin = !1, this.thick = !1, this.outlineOnly = !1, this.scaleHover = !1, this.rounded = !1, this.sharp = !1, this.dark = !1, this.animation = "normal";
|
|
534
|
+
super(...x), this.variant = "normal", this.thin = !1, this.thick = !1, this.outlineOnly = !1, this.scaleHover = !1, this.rounded = !1, this.sharp = !1, this.dark = !1, this.dontPunch = !1, this.animation = "normal", this.type = "button", this.id = "", this.name = "", this.disabled = !1, this.form = "", this.formaction = "", this.formmethod = "", this.formnovalidate = !1, this.formtarget = "", this.title = "", this.ariaLabel = "", this.ariaDescribedby = "", this.ariaPressed = "", this.bgColor = "", this.borderColor = "";
|
|
535
535
|
}
|
|
536
536
|
static #e = this.properties = {
|
|
537
537
|
variant: { type: String },
|
|
@@ -542,7 +542,32 @@ var NButton = class extends i {
|
|
|
542
542
|
rounded: { type: Boolean },
|
|
543
543
|
sharp: { type: Boolean },
|
|
544
544
|
scaleHover: { type: Boolean },
|
|
545
|
-
dark: { type: Boolean }
|
|
545
|
+
dark: { type: Boolean },
|
|
546
|
+
bgColor: { type: String },
|
|
547
|
+
borderColor: { type: String },
|
|
548
|
+
dontPunch: { type: Boolean },
|
|
549
|
+
type: { type: String },
|
|
550
|
+
id: { type: String },
|
|
551
|
+
name: { type: String },
|
|
552
|
+
disabled: { type: Boolean },
|
|
553
|
+
form: { type: String },
|
|
554
|
+
formaction: { type: String },
|
|
555
|
+
formmethod: { type: String },
|
|
556
|
+
formnovalidate: { type: Boolean },
|
|
557
|
+
formtarget: { type: String },
|
|
558
|
+
title: { type: String },
|
|
559
|
+
ariaLabel: {
|
|
560
|
+
type: String,
|
|
561
|
+
attribute: "aria-label"
|
|
562
|
+
},
|
|
563
|
+
ariaDescribedby: {
|
|
564
|
+
type: String,
|
|
565
|
+
attribute: "aria-describedby"
|
|
566
|
+
},
|
|
567
|
+
ariaPressed: {
|
|
568
|
+
type: String,
|
|
569
|
+
attribute: "aria-pressed"
|
|
570
|
+
}
|
|
546
571
|
};
|
|
547
572
|
static #t = this.styles = i$1`
|
|
548
573
|
button {
|
|
@@ -555,6 +580,12 @@ var NButton = class extends i {
|
|
|
555
580
|
transition: all;
|
|
556
581
|
animation-duration: 0.3s;
|
|
557
582
|
min-width: 100px;
|
|
583
|
+
user-select: none;
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
button:not(.dont-punch):active {
|
|
587
|
+
transition: transform 0.15s linear;
|
|
588
|
+
scale: 0.97;
|
|
558
589
|
}
|
|
559
590
|
|
|
560
591
|
button.info {
|
|
@@ -568,6 +599,17 @@ var NButton = class extends i {
|
|
|
568
599
|
border: 1px solid #4da3ffff;
|
|
569
600
|
}
|
|
570
601
|
|
|
602
|
+
button.success {
|
|
603
|
+
background-color: #00ff55ff;
|
|
604
|
+
color: #242424ff;
|
|
605
|
+
border: 1px solid #2cff72ff;
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
button.success:hover {
|
|
609
|
+
background-color: #26ff67ff;
|
|
610
|
+
border: 1px solid #93ffb7ff;
|
|
611
|
+
}
|
|
612
|
+
|
|
571
613
|
button.normal {
|
|
572
614
|
background-color: #e0e0e0;
|
|
573
615
|
color: #242424ff;
|
|
@@ -617,6 +659,10 @@ var NButton = class extends i {
|
|
|
617
659
|
transform: scale(1.05);
|
|
618
660
|
}
|
|
619
661
|
|
|
662
|
+
button.custom-color:hover {
|
|
663
|
+
filter: brightness(1.1);
|
|
664
|
+
}
|
|
665
|
+
|
|
620
666
|
.animation-fast {
|
|
621
667
|
transition: all 0.10s;
|
|
622
668
|
}
|
|
@@ -648,10 +694,23 @@ var NButton = class extends i {
|
|
|
648
694
|
}
|
|
649
695
|
`;
|
|
650
696
|
render() {
|
|
651
|
-
let x = this.variant === "normal" && this.dark ? "white" : "";
|
|
697
|
+
let x = (this.variant === "normal" || this.variant === "success") && this.dark ? this.variant === "normal" ? "white" : "#2cff72ff" : "", j = this.variant === "normal" && this.bgColor !== "" ? this.bgColor : null, F = this.variant === "normal" && this.borderColor !== "" ? this.borderColor : null;
|
|
652
698
|
return b`<button
|
|
653
|
-
|
|
654
|
-
|
|
699
|
+
type="${this.type}"
|
|
700
|
+
?disabled="${this.disabled}"
|
|
701
|
+
id="${this.id || ""}"
|
|
702
|
+
name="${this.name || ""}"
|
|
703
|
+
form="${this.form || ""}"
|
|
704
|
+
formaction="${this.formaction || ""}"
|
|
705
|
+
formmethod="${this.formmethod || ""}"
|
|
706
|
+
?formnovalidate="${this.formnovalidate}"
|
|
707
|
+
formtarget="${this.formtarget || ""}"
|
|
708
|
+
title="${this.title || ""}"
|
|
709
|
+
aria-label="${this.ariaLabel || ""}"
|
|
710
|
+
aria-describedby="${this.ariaDescribedby || ""}"
|
|
711
|
+
aria-pressed="${this.ariaPressed || ""}"
|
|
712
|
+
class="${this.variant}${this.bgColor || this.borderColor ? " custom-color" : ""}${this.dontPunch ? " dont-punch" : ""}${this.thin && !this.thick ? " thin" : this.thick ? " thick" : ""}${this.outlineOnly ? " outline-only" : ""}${this.scaleHover ? " scale-hover" : ""}${this.rounded && !this.sharp ? " rounded" : this.sharp ? " sharp" : ""} animation-${this.animation}"
|
|
713
|
+
style="${x ? `color: ${x}; ` : ""}${j && !this.outlineOnly ? `background-color: ${j}; ` : ""}${j && !F ? `border: 1px solid color-mix(in hsl, ${j} 100%, white 10%); ` : F ? `border: 1px solid ${F}; ` : ""}">
|
|
655
714
|
<slot></slot>
|
|
656
715
|
</button>`;
|
|
657
716
|
}
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.nComponents={}))})(this,function(e){var t=globalThis,n=t.ShadowRoot&&(t.ShadyCSS===void 0||t.ShadyCSS.nativeShadow)&&`adoptedStyleSheets`in Document.prototype&&`replace`in CSSStyleSheet.prototype,r=Symbol(),i=new WeakMap,a=class{constructor(e,t,n){if(this._$cssResult$=!0,n!==r)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o,t=this.t;if(n&&e===void 0){let n=t!==void 0&&t.length===1;n&&(e=i.get(t)),e===void 0&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),n&&i.set(t,e))}return e}toString(){return this.cssText}},o=e=>new a(typeof e==`string`?e:e+``,void 0,r),s=(e,...t)=>new a(e.length===1?e[0]:t.reduce((t,n,r)=>t+(e=>{if(!0===e._$cssResult$)return e.cssText;if(typeof e==`number`)return e;throw Error(`Value passed to 'css' function must be a 'css' function result: `+e+`. Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.`)})(n)+e[r+1],e[0]),e,r),c=(e,r)=>{if(n)e.adoptedStyleSheets=r.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(let n of r){let r=document.createElement(`style`),i=t.litNonce;i!==void 0&&r.setAttribute(`nonce`,i),r.textContent=n.cssText,e.appendChild(r)}},l=n?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t=``;for(let n of e.cssRules)t+=n.cssText;return o(t)})(e):e,{is:u,defineProperty:d,getOwnPropertyDescriptor:ee,getOwnPropertyNames:te,getOwnPropertySymbols:f,getPrototypeOf:p}=Object,m=globalThis,h=m.trustedTypes,ne=h?h.emptyScript:``,re=m.reactiveElementPolyfillSupport,g=(e,t)=>e,_={toAttribute(e,t){switch(t){case Boolean:e=e?ne:null;break;case Object:case Array:e=e==null?e:JSON.stringify(e)}return e},fromAttribute(e,t){let n=e;switch(t){case Boolean:n=e!==null;break;case Number:n=e===null?null:Number(e);break;case Object:case Array:try{n=JSON.parse(e)}catch{n=null}}return n}},v=(e,t)=>!u(e,t),y={attribute:!0,type:String,converter:_,reflect:!1,useDefault:!1,hasChanged:v};Symbol.metadata??=Symbol(`metadata`),m.litPropertyMetadata??=new WeakMap;var b=class extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=y){if(t.state&&(t.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){let n=Symbol(),r=this.getPropertyDescriptor(e,n,t);r!==void 0&&d(this.prototype,e,r)}}static getPropertyDescriptor(e,t,n){let{get:r,set:i}=ee(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get:r,set(t){let a=r?.call(this);i?.call(this,t),this.requestUpdate(e,a,n)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??y}static _$Ei(){if(this.hasOwnProperty(g(`elementProperties`)))return;let e=p(this);e.finalize(),e.l!==void 0&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(g(`finalized`)))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(g(`properties`))){let e=this.properties,t=[...te(e),...f(e)];for(let n of t)this.createProperty(n,e[n])}let e=this[Symbol.metadata];if(e!==null){let t=litPropertyMetadata.get(e);if(t!==void 0)for(let[e,n]of t)this.elementProperties.set(e,n)}this._$Eh=new Map;for(let[e,t]of this.elementProperties){let n=this._$Eu(e,t);n!==void 0&&this._$Eh.set(n,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){let t=[];if(Array.isArray(e)){let n=new Set(e.flat(1/0).reverse());for(let e of n)t.unshift(l(e))}else e!==void 0&&t.push(l(e));return t}static _$Eu(e,t){let n=t.attribute;return!1===n?void 0:typeof n==`string`?n:typeof e==`string`?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(e=>e(this))}addController(e){(this._$EO??=new Set).add(e),this.renderRoot!==void 0&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){let e=new Map,t=this.constructor.elementProperties;for(let n of t.keys())this.hasOwnProperty(n)&&(e.set(n,this[n]),delete this[n]);e.size>0&&(this._$Ep=e)}createRenderRoot(){let e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return c(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(e=>e.hostConnected?.())}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach(e=>e.hostDisconnected?.())}attributeChangedCallback(e,t,n){this._$AK(e,n)}_$ET(e,t){let n=this.constructor.elementProperties.get(e),r=this.constructor._$Eu(e,n);if(r!==void 0&&!0===n.reflect){let i=(n.converter?.toAttribute===void 0?_:n.converter).toAttribute(t,n.type);this._$Em=e,i==null?this.removeAttribute(r):this.setAttribute(r,i),this._$Em=null}}_$AK(e,t){let n=this.constructor,r=n._$Eh.get(e);if(r!==void 0&&this._$Em!==r){let e=n.getPropertyOptions(r),i=typeof e.converter==`function`?{fromAttribute:e.converter}:e.converter?.fromAttribute===void 0?_:e.converter;this._$Em=r;let a=i.fromAttribute(t,e.type);this[r]=a??this._$Ej?.get(r)??a,this._$Em=null}}requestUpdate(e,t,n,r=!1,i){if(e!==void 0){let a=this.constructor;if(!1===r&&(i=this[e]),n??=a.getPropertyOptions(e),!((n.hasChanged??v)(i,t)||n.useDefault&&n.reflect&&i===this._$Ej?.get(e)&&!this.hasAttribute(a._$Eu(e,n))))return;this.C(e,t,n)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(e,t,{useDefault:n,reflect:r,wrapped:i},a){n&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,a??t??this[e]),!0!==i||a!==void 0)||(this._$AL.has(e)||(this.hasUpdated||n||(t=void 0),this._$AL.set(e,t)),!0===r&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}let e=this.scheduleUpdate();return e!=null&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(let[e,t]of this._$Ep)this[e]=t;this._$Ep=void 0}let e=this.constructor.elementProperties;if(e.size>0)for(let[t,n]of e){let{wrapped:e}=n,r=this[t];!0!==e||this._$AL.has(t)||r===void 0||this.C(t,void 0,n,r)}}let e=!1,t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach(e=>e.hostUpdate?.()),this.update(t)):this._$EM()}catch(t){throw e=!1,this._$EM(),t}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach(e=>e.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&=this._$Eq.forEach(e=>this._$ET(e,this[e])),this._$EM()}updated(e){}firstUpdated(e){}};b.elementStyles=[],b.shadowRootOptions={mode:`open`},b[g(`elementProperties`)]=new Map,b[g(`finalized`)]=new Map,re?.({ReactiveElement:b}),(m.reactiveElementVersions??=[]).push(`2.1.2`);var x=globalThis,S=e=>e,C=x.trustedTypes,w=C?C.createPolicy(`lit-html`,{createHTML:e=>e}):void 0,T=`$lit$`,E=`lit$${Math.random().toFixed(9).slice(2)}$`,D=`?`+E,O=`<${D}>`,k=document,A=()=>k.createComment(``),j=e=>e===null||typeof e!=`object`&&typeof e!=`function`,M=Array.isArray,ie=e=>M(e)||typeof e?.[Symbol.iterator]==`function`,N=`[
|
|
2
|
+
\f\r]`,P=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,F=/-->/g,I=/>/g,L=RegExp(`>|${N}(?:([^\\s"'>=/]+)(${N}*=${N}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,`g`),R=/'/g,z=/"/g,B=/^(?:script|style|textarea|title)$/i,ae=(e=>(t,...n)=>({_$litType$:e,strings:t,values:n}))(1),V=Symbol.for(`lit-noChange`),H=Symbol.for(`lit-nothing`),U=new WeakMap,W=k.createTreeWalker(k,129);function G(e,t){if(!M(e)||!e.hasOwnProperty(`raw`))throw Error(`invalid template strings array`);return w===void 0?t:w.createHTML(t)}var K=(e,t)=>{let n=e.length-1,r=[],i,a=t===2?`<svg>`:t===3?`<math>`:``,o=P;for(let t=0;t<n;t++){let n=e[t],s,c,l=-1,u=0;for(;u<n.length&&(o.lastIndex=u,c=o.exec(n),c!==null);)u=o.lastIndex,o===P?c[1]===`!--`?o=F:c[1]===void 0?c[2]===void 0?c[3]!==void 0&&(o=L):(B.test(c[2])&&(i=RegExp(`</`+c[2],`g`)),o=L):o=I:o===L?c[0]===`>`?(o=i??P,l=-1):c[1]===void 0?l=-2:(l=o.lastIndex-c[2].length,s=c[1],o=c[3]===void 0?L:c[3]===`"`?z:R):o===z||o===R?o=L:o===F||o===I?o=P:(o=L,i=void 0);let d=o===L&&e[t+1].startsWith(`/>`)?` `:``;a+=o===P?n+O:l>=0?(r.push(s),n.slice(0,l)+T+n.slice(l)+E+d):n+E+(l===-2?t:d)}return[G(e,a+(e[n]||`<?>`)+(t===2?`</svg>`:t===3?`</math>`:``)),r]},q=class e{constructor({strings:t,_$litType$:n},r){let i;this.parts=[];let a=0,o=0,s=t.length-1,c=this.parts,[l,u]=K(t,n);if(this.el=e.createElement(l,r),W.currentNode=this.el.content,n===2||n===3){let e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;(i=W.nextNode())!==null&&c.length<s;){if(i.nodeType===1){if(i.hasAttributes())for(let e of i.getAttributeNames())if(e.endsWith(T)){let t=u[o++],n=i.getAttribute(e).split(E),r=/([.?@])?(.*)/.exec(t);c.push({type:1,index:a,name:r[2],strings:n,ctor:r[1]===`.`?se:r[1]===`?`?ce:r[1]===`@`?le:X}),i.removeAttribute(e)}else e.startsWith(E)&&(c.push({type:6,index:a}),i.removeAttribute(e));if(B.test(i.tagName)){let e=i.textContent.split(E),t=e.length-1;if(t>0){i.textContent=C?C.emptyScript:``;for(let n=0;n<t;n++)i.append(e[n],A()),W.nextNode(),c.push({type:2,index:++a});i.append(e[t],A())}}}else if(i.nodeType===8)if(i.data===D)c.push({type:2,index:a});else{let e=-1;for(;(e=i.data.indexOf(E,e+1))!==-1;)c.push({type:7,index:a}),e+=E.length-1}a++}}static createElement(e,t){let n=k.createElement(`template`);return n.innerHTML=e,n}};function J(e,t,n=e,r){if(t===V)return t;let i=r===void 0?n._$Cl:n._$Co?.[r],a=j(t)?void 0:t._$litDirective$;return i?.constructor!==a&&(i?._$AO?.(!1),a===void 0?i=void 0:(i=new a(e),i._$AT(e,n,r)),r===void 0?n._$Cl=i:(n._$Co??=[])[r]=i),i!==void 0&&(t=J(e,i._$AS(e,t.values),i,r)),t}var oe=class{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){let{el:{content:t},parts:n}=this._$AD,r=(e?.creationScope??k).importNode(t,!0);W.currentNode=r;let i=W.nextNode(),a=0,o=0,s=n[0];for(;s!==void 0;){if(a===s.index){let t;s.type===2?t=new Y(i,i.nextSibling,this,e):s.type===1?t=new s.ctor(i,s.name,s.strings,this,e):s.type===6&&(t=new ue(i,this,e)),this._$AV.push(t),s=n[++o]}a!==s?.index&&(i=W.nextNode(),a++)}return W.currentNode=k,r}p(e){let t=0;for(let n of this._$AV)n!==void 0&&(n.strings===void 0?n._$AI(e[t]):(n._$AI(e,n,t),t+=n.strings.length-2)),t++}},Y=class e{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,n,r){this.type=2,this._$AH=H,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=n,this.options=r,this._$Cv=r?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode,t=this._$AM;return t!==void 0&&e?.nodeType===11&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=J(this,e,t),j(e)?e===H||e==null||e===``?(this._$AH!==H&&this._$AR(),this._$AH=H):e!==this._$AH&&e!==V&&this._(e):e._$litType$===void 0?e.nodeType===void 0?ie(e)?this.k(e):this._(e):this.T(e):this.$(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==H&&j(this._$AH)?this._$AA.nextSibling.data=e:this.T(k.createTextNode(e)),this._$AH=e}$(e){let{values:t,_$litType$:n}=e,r=typeof n==`number`?this._$AC(e):(n.el===void 0&&(n.el=q.createElement(G(n.h,n.h[0]),this.options)),n);if(this._$AH?._$AD===r)this._$AH.p(t);else{let e=new oe(r,this),n=e.u(this.options);e.p(t),this.T(n),this._$AH=e}}_$AC(e){let t=U.get(e.strings);return t===void 0&&U.set(e.strings,t=new q(e)),t}k(t){M(this._$AH)||(this._$AH=[],this._$AR());let n=this._$AH,r,i=0;for(let a of t)i===n.length?n.push(r=new e(this.O(A()),this.O(A()),this,this.options)):r=n[i],r._$AI(a),i++;i<n.length&&(this._$AR(r&&r._$AB.nextSibling,i),n.length=i)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e!==this._$AB;){let t=S(e).nextSibling;S(e).remove(),e=t}}setConnected(e){this._$AM===void 0&&(this._$Cv=e,this._$AP?.(e))}},X=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,n,r,i){this.type=1,this._$AH=H,this._$AN=void 0,this.element=e,this.name=t,this._$AM=r,this.options=i,n.length>2||n[0]!==``||n[1]!==``?(this._$AH=Array(n.length-1).fill(new String),this.strings=n):this._$AH=H}_$AI(e,t=this,n,r){let i=this.strings,a=!1;if(i===void 0)e=J(this,e,t,0),a=!j(e)||e!==this._$AH&&e!==V,a&&(this._$AH=e);else{let r=e,o,s;for(e=i[0],o=0;o<i.length-1;o++)s=J(this,r[n+o],t,o),s===V&&(s=this._$AH[o]),a||=!j(s)||s!==this._$AH[o],s===H?e=H:e!==H&&(e+=(s??``)+i[o+1]),this._$AH[o]=s}a&&!r&&this.j(e)}j(e){e===H?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??``)}},se=class extends X{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===H?void 0:e}},ce=class extends X{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==H)}},le=class extends X{constructor(e,t,n,r,i){super(e,t,n,r,i),this.type=5}_$AI(e,t=this){if((e=J(this,e,t,0)??H)===V)return;let n=this._$AH,r=e===H&&n!==H||e.capture!==n.capture||e.once!==n.once||e.passive!==n.passive,i=e!==H&&(n===H||r);r&&this.element.removeEventListener(this.name,this,n),i&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){typeof this._$AH==`function`?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}},ue=class{constructor(e,t,n){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=n}get _$AU(){return this._$AM._$AU}_$AI(e){J(this,e)}},de=x.litHtmlPolyfillSupport;de?.(q,Y),(x.litHtmlVersions??=[]).push(`3.3.2`);var fe=(e,t,n)=>{let r=n?.renderBefore??t,i=r._$litPart$;if(i===void 0){let e=n?.renderBefore??null;r._$litPart$=i=new Y(t.insertBefore(A(),e),e,void 0,n??{})}return i._$AI(e),i},Z=globalThis,Q=class extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){let e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){let t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=fe(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return V}};Q._$litElement$=!0,Q.finalized=!0,Z.litElementHydrateSupport?.({LitElement:Q});var pe=Z.litElementPolyfillSupport;pe?.({LitElement:Q}),(Z.litElementVersions??=[]).push(`4.2.2`);var me=e=>(t,n)=>{n===void 0?customElements.define(e,t):n.addInitializer(()=>{customElements.define(e,t)})};function he(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}var $=class extends Q{constructor(...e){super(...e),this.variant=`normal`,this.thin=!1,this.thick=!1,this.outlineOnly=!1,this.scaleHover=!1,this.rounded=!1,this.sharp=!1,this.dark=!1,this.dontPunch=!1,this.animation=`normal`,this.type=`button`,this.id=``,this.name=``,this.disabled=!1,this.form=``,this.formaction=``,this.formmethod=``,this.formnovalidate=!1,this.formtarget=``,this.title=``,this.ariaLabel=``,this.ariaDescribedby=``,this.ariaPressed=``,this.bgColor=``,this.borderColor=``}static#e=this.properties={variant:{type:String},animation:{type:String},thin:{type:Boolean},thick:{type:Boolean},outlineOnly:{type:Boolean},rounded:{type:Boolean},sharp:{type:Boolean},scaleHover:{type:Boolean},dark:{type:Boolean},bgColor:{type:String},borderColor:{type:String},dontPunch:{type:Boolean},type:{type:String},id:{type:String},name:{type:String},disabled:{type:Boolean},form:{type:String},formaction:{type:String},formmethod:{type:String},formnovalidate:{type:Boolean},formtarget:{type:String},title:{type:String},ariaLabel:{type:String,attribute:`aria-label`},ariaDescribedby:{type:String,attribute:`aria-describedby`},ariaPressed:{type:String,attribute:`aria-pressed`}};static#t=this.styles=s`
|
|
3
|
+
button {
|
|
4
|
+
padding: 8px 16px;
|
|
5
|
+
border: none;
|
|
6
|
+
cursor: pointer;
|
|
7
|
+
font-size: 14px;
|
|
8
|
+
font-weight: 400;
|
|
9
|
+
border-radius: 2px;
|
|
10
|
+
transition: all;
|
|
11
|
+
animation-duration: 0.3s;
|
|
12
|
+
min-width: 100px;
|
|
13
|
+
user-select: none;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
button:not(.dont-punch):active {
|
|
17
|
+
transition: transform 0.15s linear;
|
|
18
|
+
scale: 0.97;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
button.info {
|
|
22
|
+
background-color: #007bff;
|
|
23
|
+
color: white;
|
|
24
|
+
border: 1px solid #2c92ffff;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
button.info:hover {
|
|
28
|
+
background-color: #268fffff;
|
|
29
|
+
border: 1px solid #4da3ffff;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
button.success {
|
|
33
|
+
background-color: #00ff55ff;
|
|
34
|
+
color: #242424ff;
|
|
35
|
+
border: 1px solid #2cff72ff;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
button.success:hover {
|
|
39
|
+
background-color: #26ff67ff;
|
|
40
|
+
border: 1px solid #93ffb7ff;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
button.normal {
|
|
44
|
+
background-color: #e0e0e0;
|
|
45
|
+
color: #242424ff;
|
|
46
|
+
border: 1px solid #ddd;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
button.normal:hover {
|
|
50
|
+
background-color: #f5f5f5ff;
|
|
51
|
+
border: 1px solid #ffffffff;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
button.warning {
|
|
55
|
+
background-color: rgba(241, 132, 7, 1);
|
|
56
|
+
color: white;
|
|
57
|
+
border: 1px solid rgba(248, 142, 42, 1);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
button.warning:hover {
|
|
61
|
+
background-color: rgba(240, 162, 16, 1);
|
|
62
|
+
border: 1px solid rgba(255, 184, 53, 1);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
button.alert {
|
|
66
|
+
background-color: rgba(233, 30, 23, 1);
|
|
67
|
+
color: white;
|
|
68
|
+
border: 1px solid rgba(248, 49, 42, 1);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
button.alert:hover {
|
|
72
|
+
background-color: rgba(248, 44, 44, 1);
|
|
73
|
+
border: 1px solid rgba(255, 76, 76, 1);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
button.thin {
|
|
77
|
+
padding: 4px 8px;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
button.thick {
|
|
81
|
+
padding: 12px 24px;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
button.outline-only {
|
|
85
|
+
background-color: transparent !important;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
button.scale-hover:hover {
|
|
89
|
+
transform: scale(1.05);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
button.custom-color:hover {
|
|
93
|
+
filter: brightness(1.1);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.animation-fast {
|
|
97
|
+
transition: all 0.10s;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.animation-normal {
|
|
101
|
+
transition: all 0.25s;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.animation-slow {
|
|
105
|
+
transition: all 0.45s;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.animation-extra-slow {
|
|
109
|
+
transition: all 1s;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.rounded {
|
|
113
|
+
border-radius: 4px;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.sharp {
|
|
117
|
+
border-radius: 0;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
@media screen and (width <= 1024px) {
|
|
121
|
+
button {
|
|
122
|
+
font-size: 12px;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
`;render(){let e=(this.variant===`normal`||this.variant===`success`)&&this.dark?this.variant===`normal`?`white`:`#2cff72ff`:``,t=this.variant===`normal`&&this.bgColor!==``?this.bgColor:null,n=this.variant===`normal`&&this.borderColor!==``?this.borderColor:null;return ae`<button
|
|
126
|
+
type="${this.type}"
|
|
127
|
+
?disabled="${this.disabled}"
|
|
128
|
+
id="${this.id||``}"
|
|
129
|
+
name="${this.name||``}"
|
|
130
|
+
form="${this.form||``}"
|
|
131
|
+
formaction="${this.formaction||``}"
|
|
132
|
+
formmethod="${this.formmethod||``}"
|
|
133
|
+
?formnovalidate="${this.formnovalidate}"
|
|
134
|
+
formtarget="${this.formtarget||``}"
|
|
135
|
+
title="${this.title||``}"
|
|
136
|
+
aria-label="${this.ariaLabel||``}"
|
|
137
|
+
aria-describedby="${this.ariaDescribedby||``}"
|
|
138
|
+
aria-pressed="${this.ariaPressed||``}"
|
|
139
|
+
class="${this.variant}${this.bgColor||this.borderColor?` custom-color`:``}${this.dontPunch?` dont-punch`:``}${this.thin&&!this.thick?` thin`:this.thick?` thick`:``}${this.outlineOnly?` outline-only`:``}${this.scaleHover?` scale-hover`:``}${this.rounded&&!this.sharp?` rounded`:this.sharp?` sharp`:``} animation-${this.animation}"
|
|
140
|
+
style="${e?`color: ${e}; `:``}${t&&!this.outlineOnly?`background-color: ${t}; `:``}${t&&!n?`border: 1px solid color-mix(in hsl, ${t} 100%, white 10%); `:n?`border: 1px solid ${n}; `:``}">
|
|
141
|
+
<slot></slot>
|
|
142
|
+
</button>`}};$=he([me(`n-button`)],$),Object.defineProperty(e,`NButton`,{enumerable:!0,get:function(){return $}})});
|
|
@@ -0,0 +1,449 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* One Dark theme for prism.js
|
|
3
|
+
* Based on Atom's One Dark theme: https://github.com/atom/atom/tree/master/packages/one-dark-syntax
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* One Dark colours (accurate as of commit 8ae45ca on 6 Sep 2018)
|
|
8
|
+
* From colors.less
|
|
9
|
+
* --mono-1: hsl(220, 14%, 71%);
|
|
10
|
+
* --mono-2: hsl(220, 9%, 55%);
|
|
11
|
+
* --mono-3: hsl(220, 10%, 40%);
|
|
12
|
+
* --hue-1: hsl(187, 47%, 55%);
|
|
13
|
+
* --hue-2: hsl(207, 82%, 66%);
|
|
14
|
+
* --hue-3: hsl(286, 60%, 67%);
|
|
15
|
+
* --hue-4: hsl(95, 38%, 62%);
|
|
16
|
+
* --hue-5: hsl(355, 65%, 65%);
|
|
17
|
+
* --hue-5-2: hsl(5, 48%, 51%);
|
|
18
|
+
* --hue-6: hsl(29, 54%, 61%);
|
|
19
|
+
* --hue-6-2: hsl(39, 67%, 69%);
|
|
20
|
+
* --syntax-fg: hsl(220, 14%, 71%);
|
|
21
|
+
* --syntax-bg: hsl(220, 13%, 18%);
|
|
22
|
+
* --syntax-gutter: hsl(220, 14%, 45%);
|
|
23
|
+
* --syntax-guide: hsla(220, 14%, 71%, 0.15);
|
|
24
|
+
* --syntax-accent: hsl(220, 100%, 66%);
|
|
25
|
+
* From syntax-variables.less
|
|
26
|
+
* --syntax-selection-color: hsl(220, 13%, 28%);
|
|
27
|
+
* --syntax-gutter-background-color-selected: hsl(220, 13%, 26%);
|
|
28
|
+
* --syntax-cursor-line: hsla(220, 100%, 80%, 0.04);
|
|
29
|
+
*/
|
|
30
|
+
|
|
31
|
+
code[class*="language-"],
|
|
32
|
+
pre[class*="language-"] {
|
|
33
|
+
background: hsl(220, 13%, 18%);
|
|
34
|
+
color: hsl(220, 14%, 71%);
|
|
35
|
+
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
|
|
36
|
+
font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
|
|
37
|
+
direction: ltr;
|
|
38
|
+
text-align: left;
|
|
39
|
+
white-space: pre;
|
|
40
|
+
word-spacing: normal;
|
|
41
|
+
word-break: normal;
|
|
42
|
+
line-height: 1.5;
|
|
43
|
+
-moz-tab-size: 2;
|
|
44
|
+
-o-tab-size: 2;
|
|
45
|
+
tab-size: 2;
|
|
46
|
+
-webkit-hyphens: none;
|
|
47
|
+
-moz-hyphens: none;
|
|
48
|
+
-ms-hyphens: none;
|
|
49
|
+
hyphens: none;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* pre[class*="language-"],
|
|
53
|
+
code[class*="language-"] {
|
|
54
|
+
white-space: normal;
|
|
55
|
+
overflow: auto;
|
|
56
|
+
word-break: break-word;
|
|
57
|
+
} */
|
|
58
|
+
|
|
59
|
+
/* Selection */
|
|
60
|
+
code[class*="language-"]::-moz-selection,
|
|
61
|
+
code[class*="language-"] *::-moz-selection,
|
|
62
|
+
pre[class*="language-"] *::-moz-selection {
|
|
63
|
+
background: hsl(220, 13%, 28%);
|
|
64
|
+
color: inherit;
|
|
65
|
+
text-shadow: none;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
code[class*="language-"]::selection,
|
|
69
|
+
code[class*="language-"] *::selection,
|
|
70
|
+
pre[class*="language-"] *::selection {
|
|
71
|
+
background: hsl(220, 13%, 28%);
|
|
72
|
+
color: inherit;
|
|
73
|
+
text-shadow: none;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/* Code blocks */
|
|
77
|
+
pre[class*="language-"] {
|
|
78
|
+
padding: 1em;
|
|
79
|
+
margin: 0.5em 0;
|
|
80
|
+
overflow: auto;
|
|
81
|
+
border-radius: 0.3em;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* Inline code */
|
|
85
|
+
:not(pre)>code[class*="language-"] {
|
|
86
|
+
padding: 0.2em 0.3em;
|
|
87
|
+
border-radius: 0.3em;
|
|
88
|
+
white-space: normal;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* Print */
|
|
92
|
+
@media print {
|
|
93
|
+
|
|
94
|
+
code[class*="language-"],
|
|
95
|
+
pre[class*="language-"] {
|
|
96
|
+
text-shadow: none;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.token.comment,
|
|
101
|
+
.token.prolog,
|
|
102
|
+
.token.cdata {
|
|
103
|
+
color: hsl(220, 10%, 40%);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.token.doctype,
|
|
107
|
+
.token.punctuation,
|
|
108
|
+
.token.entity {
|
|
109
|
+
color: hsl(220, 14%, 71%);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.token.attr-name,
|
|
113
|
+
.token.class-name,
|
|
114
|
+
.token.boolean,
|
|
115
|
+
.token.constant,
|
|
116
|
+
.token.number,
|
|
117
|
+
.token.atrule {
|
|
118
|
+
color: hsl(29, 54%, 61%);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.token.keyword {
|
|
122
|
+
color: hsl(286, 60%, 67%);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.token.property,
|
|
126
|
+
.token.tag,
|
|
127
|
+
.token.symbol,
|
|
128
|
+
.token.deleted,
|
|
129
|
+
.token.important {
|
|
130
|
+
color: hsl(355, 65%, 65%);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.token.selector,
|
|
134
|
+
.token.string,
|
|
135
|
+
.token.char,
|
|
136
|
+
.token.builtin,
|
|
137
|
+
.token.inserted,
|
|
138
|
+
.token.regex,
|
|
139
|
+
.token.attr-value,
|
|
140
|
+
.token.attr-value>.token.punctuation {
|
|
141
|
+
color: hsl(95, 38%, 62%);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.token.variable,
|
|
145
|
+
.token.operator,
|
|
146
|
+
.token.function {
|
|
147
|
+
color: hsl(207, 82%, 66%);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.token.url {
|
|
151
|
+
color: hsl(187, 47%, 55%);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
/* HTML overrides */
|
|
155
|
+
.token.attr-value>.token.punctuation.attr-equals,
|
|
156
|
+
.token.special-attr>.token.attr-value>.token.value.css {
|
|
157
|
+
color: hsl(220, 14%, 71%);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
/* CSS overrides */
|
|
161
|
+
.language-css .token.selector {
|
|
162
|
+
color: hsl(355, 65%, 65%);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.language-css .token.property {
|
|
166
|
+
color: hsl(220, 14%, 71%);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.language-css .token.function,
|
|
170
|
+
.language-css .token.url>.token.function {
|
|
171
|
+
color: hsl(187, 47%, 55%);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.language-css .token.url>.token.string.url {
|
|
175
|
+
color: hsl(95, 38%, 62%);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.language-css .token.important,
|
|
179
|
+
.language-css .token.atrule .token.rule {
|
|
180
|
+
color: hsl(286, 60%, 67%);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
/* JS overrides */
|
|
184
|
+
.language-javascript .token.operator {
|
|
185
|
+
color: hsl(286, 60%, 67%);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.language-javascript .token.template-string>.token.interpolation>.token.interpolation-punctuation.punctuation {
|
|
189
|
+
color: hsl(5, 48%, 51%);
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
/* JSON overrides */
|
|
193
|
+
.language-json .token.operator {
|
|
194
|
+
color: hsl(220, 14%, 71%);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.language-json .token.null.keyword {
|
|
198
|
+
color: hsl(29, 54%, 61%);
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
/* MD overrides */
|
|
202
|
+
.language-markdown .token.url,
|
|
203
|
+
.language-markdown .token.url>.token.operator,
|
|
204
|
+
.language-markdown .token.url-reference.url>.token.string {
|
|
205
|
+
color: hsl(220, 14%, 71%);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.language-markdown .token.url>.token.content {
|
|
209
|
+
color: hsl(207, 82%, 66%);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.language-markdown .token.url>.token.url,
|
|
213
|
+
.language-markdown .token.url-reference.url {
|
|
214
|
+
color: hsl(187, 47%, 55%);
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.language-markdown .token.blockquote.punctuation,
|
|
218
|
+
.language-markdown .token.hr.punctuation {
|
|
219
|
+
color: hsl(220, 10%, 40%);
|
|
220
|
+
font-style: italic;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.language-markdown .token.code-snippet {
|
|
224
|
+
color: hsl(95, 38%, 62%);
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.language-markdown .token.bold .token.content {
|
|
228
|
+
color: hsl(29, 54%, 61%);
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.language-markdown .token.italic .token.content {
|
|
232
|
+
color: hsl(286, 60%, 67%);
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.language-markdown .token.strike .token.content,
|
|
236
|
+
.language-markdown .token.strike .token.punctuation,
|
|
237
|
+
.language-markdown .token.list.punctuation,
|
|
238
|
+
.language-markdown .token.title.important>.token.punctuation {
|
|
239
|
+
color: hsl(355, 65%, 65%);
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
/* General */
|
|
243
|
+
.token.bold {
|
|
244
|
+
font-weight: bold;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.token.comment,
|
|
248
|
+
.token.italic {
|
|
249
|
+
font-style: italic;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.token.entity {
|
|
253
|
+
cursor: help;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.token.namespace {
|
|
257
|
+
opacity: 0.8;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
/* Plugin overrides */
|
|
261
|
+
/* Selectors should have higher specificity than those in the plugins' default stylesheets */
|
|
262
|
+
|
|
263
|
+
/* Show Invisibles plugin overrides */
|
|
264
|
+
.token.token.tab:not(:empty):before,
|
|
265
|
+
.token.token.cr:before,
|
|
266
|
+
.token.token.lf:before,
|
|
267
|
+
.token.token.space:before {
|
|
268
|
+
color: hsla(220, 14%, 71%, 0.15);
|
|
269
|
+
text-shadow: none;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
/* Toolbar plugin overrides */
|
|
273
|
+
/* Space out all buttons and move them away from the right edge of the code block */
|
|
274
|
+
div.code-toolbar>.toolbar.toolbar>.toolbar-item {
|
|
275
|
+
margin-right: 0.4em;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
/* Styling the buttons */
|
|
279
|
+
div.code-toolbar>.toolbar.toolbar>.toolbar-item>button,
|
|
280
|
+
div.code-toolbar>.toolbar.toolbar>.toolbar-item>a,
|
|
281
|
+
div.code-toolbar>.toolbar.toolbar>.toolbar-item>span {
|
|
282
|
+
background: hsl(220, 13%, 26%);
|
|
283
|
+
color: hsl(220, 9%, 55%);
|
|
284
|
+
padding: 0.1em 0.4em;
|
|
285
|
+
border-radius: 0.3em;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
div.code-toolbar>.toolbar.toolbar>.toolbar-item>button:hover,
|
|
289
|
+
div.code-toolbar>.toolbar.toolbar>.toolbar-item>button:focus,
|
|
290
|
+
div.code-toolbar>.toolbar.toolbar>.toolbar-item>a:hover,
|
|
291
|
+
div.code-toolbar>.toolbar.toolbar>.toolbar-item>a:focus,
|
|
292
|
+
div.code-toolbar>.toolbar.toolbar>.toolbar-item>span:hover,
|
|
293
|
+
div.code-toolbar>.toolbar.toolbar>.toolbar-item>span:focus {
|
|
294
|
+
background: hsl(220, 13%, 28%);
|
|
295
|
+
color: hsl(220, 14%, 71%);
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
/* Line Highlight plugin overrides */
|
|
299
|
+
/* The highlighted line itself */
|
|
300
|
+
.line-highlight.line-highlight {
|
|
301
|
+
background: hsla(220, 100%, 80%, 0.04);
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
/* Default line numbers in Line Highlight plugin */
|
|
305
|
+
.line-highlight.line-highlight:before,
|
|
306
|
+
.line-highlight.line-highlight[data-end]:after {
|
|
307
|
+
background: hsl(220, 13%, 26%);
|
|
308
|
+
color: hsl(220, 14%, 71%);
|
|
309
|
+
padding: 0.1em 0.6em;
|
|
310
|
+
border-radius: 0.3em;
|
|
311
|
+
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
|
|
312
|
+
/* same as Toolbar plugin default */
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
/* Hovering over a linkable line number (in the gutter area) */
|
|
316
|
+
/* Requires Line Numbers plugin as well */
|
|
317
|
+
pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows>span:hover:before {
|
|
318
|
+
background-color: hsla(220, 100%, 80%, 0.04);
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
/* Line Numbers and Command Line plugins overrides */
|
|
322
|
+
/* Line separating gutter from coding area */
|
|
323
|
+
.line-numbers.line-numbers .line-numbers-rows,
|
|
324
|
+
.command-line .command-line-prompt {
|
|
325
|
+
border-right-color: hsla(220, 14%, 71%, 0.15);
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
/* Stuff in the gutter */
|
|
329
|
+
.line-numbers .line-numbers-rows>span:before,
|
|
330
|
+
.command-line .command-line-prompt>span:before {
|
|
331
|
+
color: hsl(220, 14%, 45%);
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
/* Match Braces plugin overrides */
|
|
335
|
+
/* Note: Outline colour is inherited from the braces */
|
|
336
|
+
.rainbow-braces .token.token.punctuation.brace-level-1,
|
|
337
|
+
.rainbow-braces .token.token.punctuation.brace-level-5,
|
|
338
|
+
.rainbow-braces .token.token.punctuation.brace-level-9 {
|
|
339
|
+
color: hsl(355, 65%, 65%);
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
.rainbow-braces .token.token.punctuation.brace-level-2,
|
|
343
|
+
.rainbow-braces .token.token.punctuation.brace-level-6,
|
|
344
|
+
.rainbow-braces .token.token.punctuation.brace-level-10 {
|
|
345
|
+
color: hsl(95, 38%, 62%);
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.rainbow-braces .token.token.punctuation.brace-level-3,
|
|
349
|
+
.rainbow-braces .token.token.punctuation.brace-level-7,
|
|
350
|
+
.rainbow-braces .token.token.punctuation.brace-level-11 {
|
|
351
|
+
color: hsl(207, 82%, 66%);
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
.rainbow-braces .token.token.punctuation.brace-level-4,
|
|
355
|
+
.rainbow-braces .token.token.punctuation.brace-level-8,
|
|
356
|
+
.rainbow-braces .token.token.punctuation.brace-level-12 {
|
|
357
|
+
color: hsl(286, 60%, 67%);
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
/* Diff Highlight plugin overrides */
|
|
361
|
+
/* Taken from https://github.com/atom/github/blob/master/styles/variables.less */
|
|
362
|
+
pre.diff-highlight>code .token.token.deleted:not(.prefix),
|
|
363
|
+
pre>code.diff-highlight .token.token.deleted:not(.prefix) {
|
|
364
|
+
background-color: hsla(353, 100%, 66%, 0.15);
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
pre.diff-highlight>code .token.token.deleted:not(.prefix)::-moz-selection,
|
|
368
|
+
pre.diff-highlight>code .token.token.deleted:not(.prefix) *::-moz-selection,
|
|
369
|
+
pre>code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection,
|
|
370
|
+
pre>code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection {
|
|
371
|
+
background-color: hsla(353, 95%, 66%, 0.25);
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
pre.diff-highlight>code .token.token.deleted:not(.prefix)::selection,
|
|
375
|
+
pre.diff-highlight>code .token.token.deleted:not(.prefix) *::selection,
|
|
376
|
+
pre>code.diff-highlight .token.token.deleted:not(.prefix)::selection,
|
|
377
|
+
pre>code.diff-highlight .token.token.deleted:not(.prefix) *::selection {
|
|
378
|
+
background-color: hsla(353, 95%, 66%, 0.25);
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
pre.diff-highlight>code .token.token.inserted:not(.prefix),
|
|
382
|
+
pre>code.diff-highlight .token.token.inserted:not(.prefix) {
|
|
383
|
+
background-color: hsla(137, 100%, 55%, 0.15);
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
pre.diff-highlight>code .token.token.inserted:not(.prefix)::-moz-selection,
|
|
387
|
+
pre.diff-highlight>code .token.token.inserted:not(.prefix) *::-moz-selection,
|
|
388
|
+
pre>code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection,
|
|
389
|
+
pre>code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection {
|
|
390
|
+
background-color: hsla(135, 73%, 55%, 0.25);
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
pre.diff-highlight>code .token.token.inserted:not(.prefix)::selection,
|
|
394
|
+
pre.diff-highlight>code .token.token.inserted:not(.prefix) *::selection,
|
|
395
|
+
pre>code.diff-highlight .token.token.inserted:not(.prefix)::selection,
|
|
396
|
+
pre>code.diff-highlight .token.token.inserted:not(.prefix) *::selection {
|
|
397
|
+
background-color: hsla(135, 73%, 55%, 0.25);
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
/* Previewers plugin overrides */
|
|
401
|
+
/* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-dark-ui */
|
|
402
|
+
/* Border around popup */
|
|
403
|
+
.prism-previewer.prism-previewer:before,
|
|
404
|
+
.prism-previewer-gradient.prism-previewer-gradient div {
|
|
405
|
+
border-color: hsl(224, 13%, 17%);
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
/* Angle and time should remain as circles and are hence not included */
|
|
409
|
+
.prism-previewer-color.prism-previewer-color:before,
|
|
410
|
+
.prism-previewer-gradient.prism-previewer-gradient div,
|
|
411
|
+
.prism-previewer-easing.prism-previewer-easing:before {
|
|
412
|
+
border-radius: 0.3em;
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
/* Triangles pointing to the code */
|
|
416
|
+
.prism-previewer.prism-previewer:after {
|
|
417
|
+
border-top-color: hsl(224, 13%, 17%);
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
.prism-previewer-flipped.prism-previewer-flipped.after {
|
|
421
|
+
border-bottom-color: hsl(224, 13%, 17%);
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
/* Background colour within the popup */
|
|
425
|
+
.prism-previewer-angle.prism-previewer-angle:before,
|
|
426
|
+
.prism-previewer-time.prism-previewer-time:before,
|
|
427
|
+
.prism-previewer-easing.prism-previewer-easing {
|
|
428
|
+
background: hsl(219, 13%, 22%);
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
/* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */
|
|
432
|
+
/* For time, this is the alternate colour */
|
|
433
|
+
.prism-previewer-angle.prism-previewer-angle circle,
|
|
434
|
+
.prism-previewer-time.prism-previewer-time circle {
|
|
435
|
+
stroke: hsl(220, 14%, 71%);
|
|
436
|
+
stroke-opacity: 1;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
/* Stroke colours of the handle, direction point, and vector itself */
|
|
440
|
+
.prism-previewer-easing.prism-previewer-easing circle,
|
|
441
|
+
.prism-previewer-easing.prism-previewer-easing path,
|
|
442
|
+
.prism-previewer-easing.prism-previewer-easing line {
|
|
443
|
+
stroke: hsl(220, 14%, 71%);
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
/* Fill colour of the handle */
|
|
447
|
+
.prism-previewer-easing.prism-previewer-easing circle {
|
|
448
|
+
fill: transparent;
|
|
449
|
+
}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@trenoxxious/n-components",
|
|
3
3
|
"description": "Customizable components for use with vanilla HTML, Javascript and CSS.",
|
|
4
4
|
"private": false,
|
|
5
|
-
"version": "1.0.
|
|
5
|
+
"version": "1.0.6",
|
|
6
6
|
"repository": "github:Trenoxxious/n-components",
|
|
7
7
|
"keywords": [
|
|
8
8
|
"web-components",
|
|
@@ -21,9 +21,11 @@
|
|
|
21
21
|
"preview": "vite preview"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"lit": "^3.3.1"
|
|
24
|
+
"lit": "^3.3.1",
|
|
25
|
+
"prismjs": "^1.30.0"
|
|
25
26
|
},
|
|
26
27
|
"devDependencies": {
|
|
28
|
+
"@types/node": "^25.0.3",
|
|
27
29
|
"typescript": "~5.9.3",
|
|
28
30
|
"vite": "npm:rolldown-vite@7.2.5"
|
|
29
31
|
},
|