[READ-ONLY] Mirror of https://github.com/improsocial/impro
An extensible Bluesky client for web
impro.social
Tweak styles
Grace Kind
(Jul 22, 2026, 10:51 PM -0500)
26cf42a4
21787152
+324
-106
+1
-1
package.json
+1
-1
package.json
+12
-69
src/css/style.css
+12
-69
src/css/style.css
···
501
501
color: var(--highlight-color);
502
502
}
503
503
504
-
.text-pill-button:disabled {
505
-
opacity: 0.5;
506
-
cursor: default;
507
-
}
508
-
509
504
.icon-button {
510
505
display: inline-flex;
511
506
align-items: center;
···
518
513
text-decoration: none;
519
514
border-radius: var(--icon-button-border-radius);
520
515
transition: background-color 0.2s;
521
-
}
522
-
523
-
.icon-button:disabled {
524
-
opacity: 0.5;
525
-
cursor: default;
526
516
}
527
517
528
518
.icon-button .icon {
···
1627
1617
}
1628
1618
1629
1619
.post {
1630
-
padding-top: 10px;
1620
+
padding-top: 12px;
1631
1621
padding-left: 16px;
1632
1622
padding-right: 16px;
1633
1623
padding-bottom: 10px;
···
2121
2111
position: relative;
2122
2112
}
2123
2113
2114
+
.icon svg {
2115
+
width: 100%;
2116
+
height: 100%;
2117
+
display: block;
2118
+
}
2119
+
2124
2120
.close-icon {
2125
2121
width: 24px;
2126
2122
height: 24px;
···
2234
2230
}
2235
2231
2236
2232
.post-action-button[disabled] {
2237
-
opacity: 0.5;
2238
2233
cursor: auto;
2239
2234
}
2240
2235
···
4586
4581
}
4587
4582
}
4588
4583
4589
-
.message-input-emoji-button:disabled {
4590
-
opacity: 0.5;
4591
-
cursor: default;
4592
-
}
4593
-
4594
4584
.message-input-emoji-button .emoji-icon {
4595
4585
width: 22px;
4596
4586
height: 22px;
···
4628
4618
opacity: 0.8;
4629
4619
}
4630
4620
4631
-
.message-input-send-button:disabled {
4632
-
opacity: 0.5;
4633
-
cursor: default;
4634
-
}
4635
-
4636
4621
.message-input-send-button .send-icon {
4637
4622
color: var(--overlay-text-color);
4638
4623
width: 20px;
···
4773
4758
}
4774
4759
4775
4760
.reaction-palette-button[disabled] {
4776
-
opacity: 0.4;
4777
4761
cursor: not-allowed;
4778
4762
}
4779
4763
···
4921
4905
font: inherit;
4922
4906
}
4923
4907
4908
+
.reaction-row:disabled {
4909
+
opacity: 1;
4910
+
}
4911
+
4924
4912
.reaction-row-own {
4925
4913
cursor: pointer;
4926
4914
}
···
5310
5298
display: flex;
5311
5299
flex-direction: column;
5312
5300
gap: 8px;
5313
-
padding: 16px;
5301
+
padding: 12px 16px;
5314
5302
border-bottom: var(--hair) solid var(--post-border-color);
5315
5303
cursor: pointer;
5316
5304
}
···
5699
5687
padding: 0;
5700
5688
color: var(--highlight-color);
5701
5689
cursor: pointer;
5702
-
}
5703
-
5704
-
.feeds-list-item-unpin-button:disabled {
5705
-
cursor: default;
5706
-
opacity: 0.5;
5707
5690
}
5708
5691
5709
5692
.feeds-list-item-unpin-button svg {
···
5758
5741
height: 24px;
5759
5742
}
5760
5743
5761
-
.new-chat-button:disabled {
5762
-
opacity: 0.5;
5763
-
cursor: default;
5764
-
}
5765
-
5766
5744
.header svg {
5767
5745
display: block;
5768
5746
}
···
6682
6660
border: none;
6683
6661
}
6684
6662
6685
-
.context-menu-item button[disabled] {
6686
-
opacity: 0.5;
6687
-
cursor: default;
6688
-
}
6689
-
6690
6663
@media (min-width: 800px) {
6691
6664
.context-menu {
6692
6665
position: absolute;
···
7238
7211
}
7239
7212
}
7240
7213
7241
-
.lightbox-nav:disabled {
7242
-
opacity: 0.3;
7243
-
cursor: default;
7244
-
}
7245
-
7246
7214
.lightbox-nav-prev {
7247
7215
left: 20px;
7248
7216
}
···
7517
7485
font-size: 12px;
7518
7486
font-weight: 600;
7519
7487
line-height: 1.4;
7520
-
}
7521
-
7522
-
.muted-word-renew-button:disabled {
7523
-
opacity: 0.5;
7524
-
cursor: default;
7525
7488
}
7526
7489
7527
7490
.muted-word-delete-button {
···
7917
7880
}
7918
7881
}
7919
7882
7920
-
.account-switcher-close[disabled] {
7921
-
opacity: 0.5;
7922
-
cursor: default;
7923
-
}
7924
-
7925
7883
.account-switcher-list {
7926
7884
display: flex;
7927
7885
flex-direction: column;
···
7952
7910
.account-switcher-item:hover {
7953
7911
background-color: var(--post-hover-color);
7954
7912
}
7955
-
}
7956
-
7957
-
.account-switcher-item[disabled] {
7958
-
opacity: 0.6;
7959
-
cursor: default;
7960
7913
}
7961
7914
7962
7915
.account-switcher-item.is-pending {
···
8531
8484
}
8532
8485
8533
8486
.label-pref-button:disabled {
8534
-
opacity: 0.5;
8535
8487
cursor: not-allowed;
8536
8488
}
8537
8489
···
8811
8763
}
8812
8764
8813
8765
.report-submit-button:disabled {
8814
-
opacity: 0.6;
8815
8766
cursor: not-allowed;
8816
8767
}
8817
8768
···
8969
8920
}
8970
8921
8971
8922
.post-notifications-dialog-save:disabled {
8972
-
opacity: 0.5;
8973
8923
cursor: not-allowed;
8974
8924
}
8975
8925
···
9062
9012
}
9063
9013
9064
9014
.add-to-lists-toggle:disabled {
9065
-
opacity: 0.5;
9066
9015
cursor: not-allowed;
9067
9016
}
9068
9017
···
9294
9243
}
9295
9244
9296
9245
.new-chat-result.is-not-messageable {
9297
-
opacity: 0.5;
9298
9246
cursor: not-allowed;
9299
9247
}
9300
9248
···
9413
9361
cursor: pointer;
9414
9362
color: var(--text-link-color);
9415
9363
padding: 4px 0;
9416
-
}
9417
-
9418
-
.form-dialog-header-button:disabled {
9419
-
opacity: 0.5;
9420
-
cursor: default;
9421
9364
}
9422
9365
9423
9366
.form-dialog-save-button:enabled,
+7
-1
src/js/templates/icons/alertIcon.template.js
+7
-1
src/js/templates/icons/alertIcon.template.js
···
4
4
5
5
export function alertIconTemplate() {
6
6
return html`<div class="icon alert-icon">
7
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
7
+
<svg
8
+
xmlns="http://www.w3.org/2000/svg"
9
+
viewBox="0 0 24 24"
10
+
width="24"
11
+
height="24"
12
+
fill="none"
13
+
>
8
14
<circle
9
15
cx="12"
10
16
cy="12"
+7
-1
src/js/templates/icons/arrowLeft.template.js
+7
-1
src/js/templates/icons/arrowLeft.template.js
···
4
4
5
5
export function arrowLeftIconTemplate() {
6
6
return html`<div class="icon arrow-left-icon">
7
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
7
+
<svg
8
+
xmlns="http://www.w3.org/2000/svg"
9
+
viewBox="0 0 24 24"
10
+
width="24"
11
+
height="24"
12
+
fill="none"
13
+
>
8
14
<path
9
15
stroke="currentColor"
10
16
stroke-linecap="round"
+2
src/js/templates/icons/automatedAccountIcon.template.js
+2
src/js/templates/icons/automatedAccountIcon.template.js
+8
-1
src/js/templates/icons/bookmarkIcon.template.js
+8
-1
src/js/templates/icons/bookmarkIcon.template.js
···
4
4
export function bookmarkIconTemplate({ filled = false } = {}) {
5
5
return html`<div class=${classnames("icon bookmark-icon", { filled })}>
6
6
${filled
7
-
? html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
7
+
? html`<svg
8
+
xmlns="http://www.w3.org/2000/svg"
9
+
viewBox="0 0 24 24"
10
+
width="24"
11
+
height="24"
12
+
>
8
13
<path
9
14
fill="currentColor"
10
15
fill-rule="evenodd"
···
15
20
: html`<svg
16
21
xmlns="http://www.w3.org/2000/svg"
17
22
viewBox="0 0 24 24"
23
+
width="24"
24
+
height="24"
18
25
fill="none"
19
26
>
20
27
<path
+4
src/js/templates/icons/boxIcon.template.js
+4
src/js/templates/icons/boxIcon.template.js
···
12
12
? html`<svg
13
13
xmlns="http://www.w3.org/2000/svg"
14
14
viewBox="0 0 24 24"
15
+
width="24"
16
+
height="24"
15
17
fill="none"
16
18
>
17
19
<path
···
24
26
: html`<svg
25
27
xmlns="http://www.w3.org/2000/svg"
26
28
viewBox="0 0 24 24"
29
+
width="24"
30
+
height="24"
27
31
fill="none"
28
32
>
29
33
<path
+7
-1
src/js/templates/icons/cameraIcon.template.js
+7
-1
src/js/templates/icons/cameraIcon.template.js
···
4
4
5
5
export function cameraIconTemplate() {
6
6
return html`<div class="icon camera-icon">
7
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
7
+
<svg
8
+
xmlns="http://www.w3.org/2000/svg"
9
+
viewBox="0 0 24 24"
10
+
width="24"
11
+
height="24"
12
+
fill="none"
13
+
>
8
14
<path
9
15
fill="currentColor"
10
16
fill-rule="evenodd"
+4
src/js/templates/icons/chatIcon.template.js
+4
src/js/templates/icons/chatIcon.template.js
···
13
13
? html`<svg
14
14
xmlns="http://www.w3.org/2000/svg"
15
15
viewBox="0 0 24 24"
16
+
width="24"
17
+
height="24"
16
18
fill="none"
17
19
>
18
20
<path
···
29
31
: html`<svg
30
32
xmlns="http://www.w3.org/2000/svg"
31
33
viewBox="0 0 24 24"
34
+
width="24"
35
+
height="24"
32
36
fill="none"
33
37
>
34
38
<path
+7
-1
src/js/templates/icons/checkIcon.template.js
+7
-1
src/js/templates/icons/checkIcon.template.js
···
2
2
3
3
export function checkIconTemplate() {
4
4
return html`<div class="icon check-icon">
5
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
5
+
<svg
6
+
xmlns="http://www.w3.org/2000/svg"
7
+
viewBox="0 0 24 24"
8
+
width="24"
9
+
height="24"
10
+
fill="none"
11
+
>
6
12
<path
7
13
stroke="currentColor"
8
14
stroke-linecap="round"
+7
-1
src/js/templates/icons/chevronLeft.template.js
+7
-1
src/js/templates/icons/chevronLeft.template.js
···
4
4
5
5
export function chevronLeftIconTemplate() {
6
6
return html`<div class="icon chevron-left-icon">
7
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
7
+
<svg
8
+
xmlns="http://www.w3.org/2000/svg"
9
+
viewBox="0 0 24 24"
10
+
width="24"
11
+
height="24"
12
+
fill="none"
13
+
>
8
14
<path
9
15
stroke="currentColor"
10
16
stroke-linecap="round"
+7
-1
src/js/templates/icons/chevronRight.template.js
+7
-1
src/js/templates/icons/chevronRight.template.js
···
4
4
5
5
export function chevronRightIconTemplate() {
6
6
return html`<div class="icon chevron-right-icon">
7
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
7
+
<svg
8
+
xmlns="http://www.w3.org/2000/svg"
9
+
viewBox="0 0 24 24"
10
+
width="24"
11
+
height="24"
12
+
fill="none"
13
+
>
8
14
<path
9
15
stroke="currentColor"
10
16
stroke-linecap="round"
+7
-1
src/js/templates/icons/chevronUp.template.js
+7
-1
src/js/templates/icons/chevronUp.template.js
···
4
4
5
5
export function chevronUpIconTemplate() {
6
6
return html`<div class="icon chevron-up-icon">
7
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
7
+
<svg
8
+
xmlns="http://www.w3.org/2000/svg"
9
+
viewBox="0 0 24 24"
10
+
width="24"
11
+
height="24"
12
+
fill="none"
13
+
>
8
14
<path
9
15
stroke="currentColor"
10
16
stroke-linecap="round"
+7
-1
src/js/templates/icons/circleCheckIcon.template.js
+7
-1
src/js/templates/icons/circleCheckIcon.template.js
···
2
2
3
3
export function circleCheckIconTemplate() {
4
4
return html`<div class="icon circle-check-icon">
5
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
5
+
<svg
6
+
xmlns="http://www.w3.org/2000/svg"
7
+
viewBox="0 0 24 24"
8
+
width="24"
9
+
height="24"
10
+
fill="none"
11
+
>
6
12
<circle
7
13
cx="12"
8
14
cy="12"
+7
-1
src/js/templates/icons/closeIcon.template.js
+7
-1
src/js/templates/icons/closeIcon.template.js
···
2
2
3
3
export function closeIconTemplate() {
4
4
return html`<div class="icon close-icon">
5
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
5
+
<svg
6
+
xmlns="http://www.w3.org/2000/svg"
7
+
viewBox="0 0 24 24"
8
+
width="24"
9
+
height="24"
10
+
fill="none"
11
+
>
6
12
<path
7
13
stroke="currentColor"
8
14
stroke-linecap="round"
+7
-1
src/js/templates/icons/codeIcon.template.js
+7
-1
src/js/templates/icons/codeIcon.template.js
···
4
4
5
5
export function codeIconTemplate() {
6
6
return html`<div class="icon code-icon">
7
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
7
+
<svg
8
+
xmlns="http://www.w3.org/2000/svg"
9
+
viewBox="0 0 24 24"
10
+
width="24"
11
+
height="24"
12
+
fill="none"
13
+
>
8
14
<path
9
15
stroke="currentColor"
10
16
stroke-linecap="round"
+7
-1
src/js/templates/icons/contactsIcon.template.js
+7
-1
src/js/templates/icons/contactsIcon.template.js
···
3
3
// Source: https://github.com/halfmage/majesticons/blob/main/solid/user-box.svg
4
4
export function contactsIconTemplate() {
5
5
return html`<div class="icon contacts-icon">
6
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
6
+
<svg
7
+
xmlns="http://www.w3.org/2000/svg"
8
+
viewBox="0 0 24 24"
9
+
width="24"
10
+
height="24"
11
+
fill="none"
12
+
>
7
13
<circle
8
14
cx="12"
9
15
cy="10"
+7
-1
src/js/templates/icons/cornerDownRightIcon.template.js
+7
-1
src/js/templates/icons/cornerDownRightIcon.template.js
···
4
4
5
5
export function cornerDownRightIconTemplate() {
6
6
return html`<div class="icon corner-down-right-icon">
7
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
7
+
<svg
8
+
xmlns="http://www.w3.org/2000/svg"
9
+
viewBox="0 0 24 24"
10
+
width="24"
11
+
height="24"
12
+
fill="none"
13
+
>
8
14
<path
9
15
stroke="currentColor"
10
16
stroke-linecap="round"
+7
-1
src/js/templates/icons/cropIndicatorIcon.template.js
+7
-1
src/js/templates/icons/cropIndicatorIcon.template.js
···
2
2
3
3
export function cropIndicatorIconTemplate() {
4
4
return html`<div class="icon crop-indicator-icon">
5
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
5
+
<svg
6
+
xmlns="http://www.w3.org/2000/svg"
7
+
viewBox="0 0 24 24"
8
+
width="24"
9
+
height="24"
10
+
fill="none"
11
+
>
6
12
<path
7
13
stroke="currentColor"
8
14
stroke-linecap="round"
+7
-1
src/js/templates/icons/editIcon.template.js
+7
-1
src/js/templates/icons/editIcon.template.js
···
3
3
// Source: https://github.com/halfmage/majesticons/blob/main/solid/edit-pen-2.svg
4
4
export function editIconTemplate({} = {}) {
5
5
return html`<div class="icon edit-icon">
6
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
6
+
<svg
7
+
xmlns="http://www.w3.org/2000/svg"
8
+
viewBox="0 0 24 24"
9
+
width="24"
10
+
height="24"
11
+
fill="none"
12
+
>
7
13
<path
8
14
fill="currentColor"
9
15
fill-rule="evenodd"
+2
src/js/templates/icons/emojiIcon.template.js
+2
src/js/templates/icons/emojiIcon.template.js
+7
-1
src/js/templates/icons/eyeIcon.template.js
+7
-1
src/js/templates/icons/eyeIcon.template.js
···
4
4
5
5
export function eyeIconTemplate() {
6
6
return html`<div class="icon eye-icon">
7
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
7
+
<svg
8
+
xmlns="http://www.w3.org/2000/svg"
9
+
viewBox="0 0 24 24"
10
+
width="24"
11
+
height="24"
12
+
fill="none"
13
+
>
8
14
<path
9
15
stroke="currentColor"
10
16
stroke-linecap="round"
+7
-1
src/js/templates/icons/eyeSlashIcon.template.js
+7
-1
src/js/templates/icons/eyeSlashIcon.template.js
···
4
4
5
5
export function eyeSlashIconTemplate() {
6
6
return html`<div class="icon eye-slash-icon">
7
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
7
+
<svg
8
+
xmlns="http://www.w3.org/2000/svg"
9
+
viewBox="0 0 24 24"
10
+
width="24"
11
+
height="24"
12
+
fill="none"
13
+
>
8
14
<path
9
15
stroke="currentColor"
10
16
stroke-linecap="round"
+7
-1
src/js/templates/icons/globeIcon.template.js
+7
-1
src/js/templates/icons/globeIcon.template.js
···
3
3
// https://github.com/halfmage/majesticons/blob/main/line/globe-grid-line.svg
4
4
export function globeIconTemplate() {
5
5
return html`<div class="icon globe-icon">
6
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
6
+
<svg
7
+
xmlns="http://www.w3.org/2000/svg"
8
+
viewBox="0 0 24 24"
9
+
width="24"
10
+
height="24"
11
+
fill="none"
12
+
>
7
13
<path
8
14
stroke="currentColor"
9
15
stroke-linecap="round"
+4
src/js/templates/icons/hashtagIcon.template.js
+4
src/js/templates/icons/hashtagIcon.template.js
···
8
8
? html`<svg
9
9
xmlns="http://www.w3.org/2000/svg"
10
10
viewBox="0 0 24 24"
11
+
width="24"
12
+
height="24"
11
13
fill="none"
12
14
>
13
15
<path
···
21
23
: html`<svg
22
24
xmlns="http://www.w3.org/2000/svg"
23
25
viewBox="0 0 24 24"
26
+
width="24"
27
+
height="24"
24
28
fill="none"
25
29
>
26
30
<path
+12
-2
src/js/templates/icons/heartIcon.template.js
+12
-2
src/js/templates/icons/heartIcon.template.js
···
7
7
export function heartIconTemplate({ filled = false } = {}) {
8
8
return html`<div class=${classnames("icon heart-icon", { filled })}>
9
9
${filled
10
-
? html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
10
+
? html`<svg
11
+
xmlns="http://www.w3.org/2000/svg"
12
+
viewBox="0 0 24 24"
13
+
width="24"
14
+
height="24"
15
+
>
11
16
<path
12
17
fill="currentColor"
13
18
stroke="currentColor"
···
17
22
d=${heartPath}
18
23
/>
19
24
</svg>`
20
-
: html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
25
+
: html`<svg
26
+
xmlns="http://www.w3.org/2000/svg"
27
+
viewBox="0 0 24 24"
28
+
width="24"
29
+
height="24"
30
+
>
21
31
<path
22
32
fill="none"
23
33
stroke="currentColor"
+4
src/js/templates/icons/homeIcon.template.js
+4
src/js/templates/icons/homeIcon.template.js
···
12
12
? html`<svg
13
13
xmlns="http://www.w3.org/2000/svg"
14
14
viewBox="0 0 24 24"
15
+
width="24"
16
+
height="24"
15
17
fill="none"
16
18
>
17
19
<path
···
26
28
: html`<svg
27
29
xmlns="http://www.w3.org/2000/svg"
28
30
viewBox="0 0 24 24"
31
+
width="24"
32
+
height="24"
29
33
fill="none"
30
34
>
31
35
<path
+7
-1
src/js/templates/icons/imageIcon.template.js
+7
-1
src/js/templates/icons/imageIcon.template.js
···
4
4
5
5
export function imageIconTemplate() {
6
6
return html`<div class="icon image-icon">
7
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
7
+
<svg
8
+
xmlns="http://www.w3.org/2000/svg"
9
+
viewBox="0 0 24 24"
10
+
width="24"
11
+
height="24"
12
+
fill="none"
13
+
>
8
14
<path
9
15
stroke="currentColor"
10
16
stroke-linecap="round"
+7
-1
src/js/templates/icons/inboxIcon.template.js
+7
-1
src/js/templates/icons/inboxIcon.template.js
···
3
3
// Source: src/img/icons/custom/inbox.svg
4
4
export function inboxIconTemplate() {
5
5
return html`<div class="icon inbox-icon">
6
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
6
+
<svg
7
+
xmlns="http://www.w3.org/2000/svg"
8
+
viewBox="0 0 24 24"
9
+
width="24"
10
+
height="24"
11
+
fill="none"
12
+
>
7
13
<path
8
14
fill="currentColor"
9
15
fill-rule="evenodd"
+7
-1
src/js/templates/icons/infoIcon.template.js
+7
-1
src/js/templates/icons/infoIcon.template.js
···
4
4
5
5
export function infoIconTemplate() {
6
6
return html`<div class="icon info-icon">
7
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
7
+
<svg
8
+
xmlns="http://www.w3.org/2000/svg"
9
+
viewBox="0 0 24 24"
10
+
width="24"
11
+
height="24"
12
+
fill="none"
13
+
>
8
14
<circle
9
15
cx="12"
10
16
cy="12"
+2
src/js/templates/icons/likeIcon.template.js
+2
src/js/templates/icons/likeIcon.template.js
+7
-1
src/js/templates/icons/linkIcon.template.js
+7
-1
src/js/templates/icons/linkIcon.template.js
···
2
2
3
3
export function linkIconTemplate() {
4
4
return html`<div class="icon link-icon">
5
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
5
+
<svg
6
+
xmlns="http://www.w3.org/2000/svg"
7
+
viewBox="0 0 24 24"
8
+
width="24"
9
+
height="24"
10
+
fill="none"
11
+
>
6
12
<path
7
13
stroke="currentColor"
8
14
stroke-linecap="round"
+4
src/js/templates/icons/listIcon.template.js
+4
src/js/templates/icons/listIcon.template.js
···
7
7
? html`<svg
8
8
xmlns="http://www.w3.org/2000/svg"
9
9
viewBox="0 0 24 24"
10
+
width="24"
11
+
height="24"
10
12
fill="none"
11
13
>
12
14
<path
···
56
58
: html`<svg
57
59
xmlns="http://www.w3.org/2000/svg"
58
60
viewBox="0 0 24 24"
61
+
width="24"
62
+
height="24"
59
63
fill="none"
60
64
>
61
65
<path
+7
-1
src/js/templates/icons/lockIcon.template.js
+7
-1
src/js/templates/icons/lockIcon.template.js
···
4
4
5
5
export function lockIconTemplate() {
6
6
return html`<div class="icon lock-icon">
7
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
7
+
<svg
8
+
xmlns="http://www.w3.org/2000/svg"
9
+
viewBox="0 0 24 24"
10
+
width="24"
11
+
height="24"
12
+
fill="none"
13
+
>
8
14
<path
9
15
stroke="currentColor"
10
16
stroke-linecap="round"
+7
-1
src/js/templates/icons/messagePlusIcon.template.js
+7
-1
src/js/templates/icons/messagePlusIcon.template.js
···
3
3
// Source: src/img/icons/custom/message-plus-line.svg
4
4
export function messagePlusIconTemplate() {
5
5
return html`<div class="icon message-plus-icon">
6
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
6
+
<svg
7
+
xmlns="http://www.w3.org/2000/svg"
8
+
viewBox="0 0 24 24"
9
+
width="24"
10
+
height="24"
11
+
fill="none"
12
+
>
7
13
<path
8
14
fill="currentColor"
9
15
fill-rule="evenodd"
+7
-1
src/js/templates/icons/moreMenuIcon.template.js
+7
-1
src/js/templates/icons/moreMenuIcon.template.js
···
4
4
5
5
export function moreMenuIconTemplate() {
6
6
return html`<div class="icon more-menu-icon">
7
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
7
+
<svg
8
+
xmlns="http://www.w3.org/2000/svg"
9
+
viewBox="0 0 24 24"
10
+
width="24"
11
+
height="24"
12
+
fill="none"
13
+
>
8
14
<path
9
15
stroke="currentColor"
10
16
stroke-linecap="round"
+7
-1
src/js/templates/icons/mutedWordIcon.template.js
+7
-1
src/js/templates/icons/mutedWordIcon.template.js
···
4
4
5
5
export function mutedWordIconTemplate() {
6
6
return html`<div class="icon muted-word-icon">
7
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
7
+
<svg
8
+
xmlns="http://www.w3.org/2000/svg"
9
+
viewBox="0 0 24 24"
10
+
width="24"
11
+
height="24"
12
+
fill="none"
13
+
>
8
14
<path
9
15
stroke="currentColor"
10
16
stroke-linecap="round"
+4
src/js/templates/icons/notificationsIcon.template.js
+4
src/js/templates/icons/notificationsIcon.template.js
···
12
12
? html`<svg
13
13
xmlns="http://www.w3.org/2000/svg"
14
14
viewBox="0 0 24 24"
15
+
width="24"
16
+
height="24"
15
17
fill="none"
16
18
>
17
19
<path
···
29
31
: html`<svg
30
32
xmlns="http://www.w3.org/2000/svg"
31
33
viewBox="0 0 24 24"
34
+
width="24"
35
+
height="24"
32
36
fill="none"
33
37
>
34
38
<path
+4
src/js/templates/icons/pinIcon.template.js
+4
src/js/templates/icons/pinIcon.template.js
···
8
8
? html`<svg
9
9
xmlns="http://www.w3.org/2000/svg"
10
10
viewBox="0 0 24 24"
11
+
width="24"
12
+
height="24"
11
13
fill="none"
12
14
>
13
15
<path
···
25
27
: html`<svg
26
28
xmlns="http://www.w3.org/2000/svg"
27
29
viewBox="0 0 24 24"
30
+
width="24"
31
+
height="24"
28
32
fill="none"
29
33
>
30
34
<path
+7
-1
src/js/templates/icons/playIcon.template.js
+7
-1
src/js/templates/icons/playIcon.template.js
···
2
2
3
3
export function playIconTemplate() {
4
4
return html`<div class="icon play-icon">
5
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
5
+
<svg
6
+
xmlns="http://www.w3.org/2000/svg"
7
+
viewBox="0 0 24 24"
8
+
width="24"
9
+
height="24"
10
+
fill="none"
11
+
>
6
12
<path
7
13
fill="currentColor"
8
14
d="M9.528 7.118a1 1 0 0 1 1.027.05l6 4a1 1 0 0 1 0 1.664l-6 4A1 1 0 0 1 9 16V8a1 1 0 0 1 .528-.882z"
+7
-1
src/js/templates/icons/plusIcon.template.js
+7
-1
src/js/templates/icons/plusIcon.template.js
···
4
4
5
5
export function plusIconTemplate() {
6
6
return html`<div class="icon plus-icon">
7
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
7
+
<svg
8
+
xmlns="http://www.w3.org/2000/svg"
9
+
viewBox="0 0 24 24"
10
+
width="24"
11
+
height="24"
12
+
fill="none"
13
+
>
8
14
<path
9
15
stroke="currentColor"
10
16
stroke-linecap="round"
+7
-1
src/js/templates/icons/reloadIcon.template.js
+7
-1
src/js/templates/icons/reloadIcon.template.js
···
3
3
// Source: https://github.com/halfmage/majesticons/blob/main/line/reload-line.svg
4
4
export function reloadIconTemplate() {
5
5
return html`<div class="icon reload-icon">
6
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
6
+
<svg
7
+
xmlns="http://www.w3.org/2000/svg"
8
+
viewBox="0 0 24 24"
9
+
width="24"
10
+
height="24"
11
+
fill="none"
12
+
>
7
13
<path
8
14
stroke="currentColor"
9
15
stroke-linecap="round"
+2
src/js/templates/icons/replyIcon.template.js
+2
src/js/templates/icons/replyIcon.template.js
+2
src/js/templates/icons/repostIcon.template.js
+2
src/js/templates/icons/repostIcon.template.js
+7
-1
src/js/templates/icons/restrictedIcon.template.js
+7
-1
src/js/templates/icons/restrictedIcon.template.js
···
4
4
5
5
export function restrictedIconTemplate() {
6
6
return html`<div class="icon restricted-icon">
7
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
7
+
<svg
8
+
xmlns="http://www.w3.org/2000/svg"
9
+
viewBox="0 0 24 24"
10
+
width="24"
11
+
height="24"
12
+
fill="none"
13
+
>
8
14
<path
9
15
stroke="currentColor"
10
16
stroke-linecap="round"
+4
src/js/templates/icons/searchIcon.template.js
+4
src/js/templates/icons/searchIcon.template.js
···
12
12
? html`<svg
13
13
xmlns="http://www.w3.org/2000/svg"
14
14
viewBox="0 0 24 24"
15
+
width="24"
16
+
height="24"
15
17
fill="none"
16
18
>
17
19
<path
···
24
26
: html`<svg
25
27
xmlns="http://www.w3.org/2000/svg"
26
28
viewBox="0 0 24 24"
29
+
width="24"
30
+
height="24"
27
31
fill="none"
28
32
>
29
33
<path
+7
-1
src/js/templates/icons/sendIcon.template.js
+7
-1
src/js/templates/icons/sendIcon.template.js
···
4
4
5
5
export function sendIconTemplate() {
6
6
return html`<div class="icon send-icon">
7
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
7
+
<svg
8
+
xmlns="http://www.w3.org/2000/svg"
9
+
viewBox="0 0 24 24"
10
+
width="24"
11
+
height="24"
12
+
fill="none"
13
+
>
8
14
<path
9
15
stroke="currentColor"
10
16
stroke-linecap="round"
+4
src/js/templates/icons/settingsIcon.template.js
+4
src/js/templates/icons/settingsIcon.template.js
···
12
12
? html`<svg
13
13
xmlns="http://www.w3.org/2000/svg"
14
14
viewBox="0 0 24 24"
15
+
width="24"
16
+
height="24"
15
17
fill="none"
16
18
>
17
19
<path
···
24
26
: html`<svg
25
27
xmlns="http://www.w3.org/2000/svg"
26
28
viewBox="0 0 24 24"
29
+
width="24"
30
+
height="24"
27
31
fill="none"
28
32
>
29
33
<path
+7
-1
src/js/templates/icons/smileIcon.template.js
+7
-1
src/js/templates/icons/smileIcon.template.js
···
3
3
// Smiley face icon for emoji button
4
4
export function smileIconTemplate() {
5
5
return html`<div class="icon smile-icon">
6
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
6
+
<svg
7
+
xmlns="http://www.w3.org/2000/svg"
8
+
viewBox="0 0 24 24"
9
+
width="24"
10
+
height="24"
11
+
fill="none"
12
+
>
7
13
<circle
8
14
cx="12"
9
15
cy="12"
+7
-1
src/js/templates/icons/trashCanIcon.template.js
+7
-1
src/js/templates/icons/trashCanIcon.template.js
···
3
3
// Source: https://github.com/halfmage/majesticons/blob/main/line/delete-bin-line.svg
4
4
export function trashCanIconTemplate() {
5
5
return html`<div class="icon trash-can-icon">
6
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
6
+
<svg
7
+
xmlns="http://www.w3.org/2000/svg"
8
+
viewBox="0 0 24 24"
9
+
width="24"
10
+
height="24"
11
+
fill="none"
12
+
>
7
13
<path
8
14
stroke="currentColor"
9
15
stroke-linecap="round"
+4
src/js/templates/icons/userIcon.template.js
+4
src/js/templates/icons/userIcon.template.js
···
12
12
? html`<svg
13
13
xmlns="http://www.w3.org/2000/svg"
14
14
viewBox="0 0 24 24"
15
+
width="24"
16
+
height="24"
15
17
fill="none"
16
18
>
17
19
<circle
···
43
45
: html`<svg
44
46
xmlns="http://www.w3.org/2000/svg"
45
47
viewBox="0 0 24 24"
48
+
width="24"
49
+
height="24"
46
50
fill="none"
47
51
>
48
52
<circle
+4
src/js/templates/icons/userPlusIcon.template.js
+4
src/js/templates/icons/userPlusIcon.template.js
···
12
12
? html`<svg
13
13
xmlns="http://www.w3.org/2000/svg"
14
14
viewBox="0 0 24 24"
15
+
width="24"
16
+
height="24"
15
17
fill="none"
16
18
>
17
19
<mask id="user-plus-cutout">
···
49
51
: html`<svg
50
52
xmlns="http://www.w3.org/2000/svg"
51
53
viewBox="0 0 24 24"
54
+
width="24"
55
+
height="24"
52
56
fill="none"
53
57
>
54
58
<mask id="user-plus-cutout-outline">
+7
-1
src/js/templates/icons/usersIcon.template.js
+7
-1
src/js/templates/icons/usersIcon.template.js
···
3
3
// https://github.com/halfmage/majesticons/blob/main/line/users-line.svg
4
4
export function usersIconTemplate() {
5
5
return html`<div class="icon users-icon">
6
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
6
+
<svg
7
+
xmlns="http://www.w3.org/2000/svg"
8
+
viewBox="0 0 24 24"
9
+
width="24"
10
+
height="24"
11
+
fill="none"
12
+
>
7
13
<circle
8
14
cx="9"
9
15
cy="9"
+2
src/js/templates/icons/verifiedCheckIcon.template.js
+2
src/js/templates/icons/verifiedCheckIcon.template.js