Compare commits

...

222 Commits

Author SHA1 Message Date
3b5b94d4f2 Updated default values 2024-04-09 17:32:25 -07:00
HJ
0635a6c131 Merge branch 'themes3-fixes' into 'develop'
Themes 3 fixes

Closes #1301 and #1303

See merge request pleroma/pleroma-fe!1906
2024-04-06 14:53:53 +00:00
Henry Jameson
3eabdf9ded lint 2024-04-04 22:58:50 +03:00
Henry Jameson
ece159822c force user profile links in summary to be text colored... for now. 2024-04-04 22:50:04 +03:00
Henry Jameson
c0010d0f48 fix transparent popovers 2024-04-04 22:45:13 +03:00
Henry Jameson
8ead084421 fix #1301 2024-04-04 22:40:50 +03:00
Henry Jameson
19ab07af96 changelog 2024-04-03 23:08:13 +03:00
Henry Jameson
1c23a16bac try to apply lazy part in one go while still having chunked processing 2024-04-03 22:57:44 +03:00
Henry Jameson
9806eea12e only show interface after theme has been applied 2024-04-03 22:52:12 +03:00
Henry Jameson
e8159164e3 color input improvements 2024-04-03 22:43:36 +03:00
Henry Jameson
dd4867d8de refactor style setter to separate theme generation from theme application 2024-04-03 22:42:34 +03:00
Henry Jameson
2382810823 fix repeater links 2024-04-03 21:27:25 +03:00
Henry Jameson
fbea4f9986 fix shout 2024-04-03 21:27:19 +03:00
Henry Jameson
940df1efa7 add fallbacks for lazy stuff loading 2024-04-03 21:10:27 +03:00
Henry Jameson
9bdc8d9b9c fix transparency blur in statuses on firefox 2024-03-29 13:36:43 +02:00
HJ
d7f744d281 Merge branch 'themes3' into 'develop'
Themes 3.0 / Pleroma ISS (Interface Style Sheets) [Side A]

See merge request pleroma/pleroma-fe!1892
2024-03-26 17:13:41 +00:00
Henry Jameson
c298611af2 fix tests and make them pass on shit hardware 2024-03-26 18:49:29 +02:00
Henry Jameson
300b3a2517 fix emoji react buttons in notifications sidebar 2024-03-26 17:20:53 +02:00
Henry Jameson
4c10cf21a0 please the stylint 2024-03-25 19:13:04 +02:00
Henry Jameson
f3d3901a92 more tests 2024-03-25 19:07:28 +02:00
Henry Jameson
c1568ad2ba fix massive issue in getAllPossibleCombinations 2024-03-25 18:18:48 +02:00
Henry Jameson
1050fed558 fix non-round panel headers 2024-03-25 17:02:36 +02:00
Henry Jameson
e51278cdf1 Merge remote-tracking branch 'origin/develop' into themes3 2024-03-25 16:54:40 +02:00
Henry Jameson
b925c32e67 Make unloaded statuses follow panel styling 2024-03-25 16:38:03 +02:00
Henry Jameson
46562d5318 fix unnecessary backdrop filter in timelines 2024-03-25 16:30:21 +02:00
Henry Jameson
4852f5b833 unify tabs fixes for panels 2024-03-25 16:29:24 +02:00
Henry Jameson
d02a15043e fix two most annoying remaining bugs (incorrect hover in chats and
overflowing avatars in interactors section)
2024-03-25 13:08:30 +02:00
HJ
23edfe7b91 Merge branch 'non-expiring-polls' into 'develop'
Hide the expiry date indication if the poll never expires

Closes #961

See merge request pleroma/pleroma-fe!1889
2024-03-22 08:17:33 +00:00
HJ
698d608591 Merge branch 'renovate/autoprefixer-10.x' into 'develop'
Update dependency autoprefixer to v10.4.19

See merge request pleroma/pleroma-fe!1898
2024-03-21 09:30:02 +00:00
Pleroma Renovate Bot
fa7f6955a1 Update dependency autoprefixer to v10.4.19 2024-03-21 09:06:07 +00:00
HJ
6147f71977 Merge branch 'renovate/babel-loader-9.x' into 'develop'
Update dependency babel-loader to v9.1.3

See merge request pleroma/pleroma-fe!1895
2024-03-19 14:11:30 +00:00
Pleroma Renovate Bot
69a8ab7a03 Update dependency babel-loader to v9.1.3 2024-03-19 08:52:42 +00:00
HJ
90082a0d04 Merge branch 'renovate/autoprefixer-10.x' into 'develop'
Update dependency autoprefixer to v10.4.18

See merge request pleroma/pleroma-fe!1878
2024-03-18 13:36:18 +00:00
HJ
c0961a4420 Merge branch 'renovate/vue-babel-plugin-jsx-1.x' into 'develop'
Update dependency @vue/babel-plugin-jsx to v1.2.1

See merge request pleroma/pleroma-fe!1856
2024-03-18 13:35:56 +00:00
HJ
b252af872f Merge branch 'renovate/js-cookie-3.x' into 'develop'
Update dependency js-cookie to v3.0.5

See merge request pleroma/pleroma-fe!1818
2024-03-18 13:35:14 +00:00
HJ
539deb607f Merge branch 'renovate/ungap-event-target-0.x' into 'develop'
Update dependency @ungap/event-target to v0.2.4

See merge request pleroma/pleroma-fe!1813
2024-03-18 09:53:17 +00:00
HJ
7e05be9251 Merge branch 'renovate/nightwatch-2.x' into 'develop'
Update dependency nightwatch to v2.6.25

See merge request pleroma/pleroma-fe!1831
2024-03-18 09:52:05 +00:00
HJ
255512938c Merge branch 'renovate/ruffle-rs-ruffle-0.x' into 'develop'
Update dependency @ruffle-rs/ruffle to v0.1.0-nightly.2024.3.17

See merge request pleroma/pleroma-fe!1662
2024-03-18 09:51:42 +00:00
HJ
09da683d28 Merge branch 'renovate/css-loader-6.x' into 'develop'
Update dependency css-loader to v6.10.0

See merge request pleroma/pleroma-fe!1829
2024-03-18 09:51:24 +00:00
HJ
d8c50854b7 Merge branch 'renovate/vuelidate-validators-2.x' into 'develop'
Update dependency @vuelidate/validators to v2.0.4

See merge request pleroma/pleroma-fe!1805
2024-03-18 09:51:00 +00:00
Pleroma Renovate Bot
0daa824ec1 Update dependency @ruffle-rs/ruffle to v0.1.0-nightly.2024.3.17 2024-03-17 09:06:04 +00:00
Henry Jameson
472aad52e1 Use constructed stylesheet to prevent chrome from shitting itself when
you open element picker
2024-03-12 23:33:24 +02:00
tusooa
7ee55da4a3 Merge branch 'weblate' into 'develop'
Translations update from Pleroma Weblate

See merge request pleroma/pleroma-fe!1888
2024-03-07 01:59:09 +00:00
Henry Jameson
1e467ac6e1 update tests 2024-03-07 01:08:04 +02:00
Henry Jameson
afc94c6801 lint 2024-03-07 00:38:19 +02:00
Henry Jameson
34f23b992e fix conversations panels shadows 2024-03-07 00:37:21 +02:00
Henry Jameson
6d77bc2bd5 more transparent panels fixes 2024-03-07 00:28:16 +02:00
Henry Jameson
ce5552ae3c fix more transparent panels 2024-03-06 20:35:03 +02:00
Henry Jameson
1b391b6a69 fix dialogs not having styles at all 2024-03-06 20:27:05 +02:00
Henry Jameson
7d1e787f55 fix unstyled buttons focus+active+hover styles 2024-03-06 17:42:09 +02:00
Henry Jameson
7df207c9d4 emoji management fixes for themes3 2024-03-06 10:34:56 +02:00
Henry Jameson
962bce5ee3 Merge remote-tracking branch 'origin/develop' into themes3 2024-03-06 09:35:46 +02:00
Kian-ting Tan
e96487ffd5 Translated using Weblate (Chinese (Min Nan) (nan_TW))
Currently translated at 97.9% (1070 of 1092 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/nan_TW/
2024-03-05 16:29:29 +00:00
SyoBoN
016c69e466 Translated using Weblate (Japanese (ja_PEDANTIC))
Currently translated at 98.0% (1071 of 1092 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ja_PEDANTIC/
2024-03-05 16:29:29 +00:00
Phantasm
9c2046e6a7 Translated using Weblate (Czech)
Currently translated at 74.6% (815 of 1092 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/cs/
2024-03-05 16:29:29 +00:00
Phantasm
e22f571874 Translated using Weblate (Czech)
Currently translated at 71.2% (778 of 1092 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/cs/
2024-03-05 16:29:29 +00:00
SyoBoN
a104098467 Translated using Weblate (Japanese (ja_PEDANTIC))
Currently translated at 98.0% (1071 of 1092 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ja_PEDANTIC/
2024-03-05 16:29:29 +00:00
SyoBoN
c29c524033 Translated using Weblate (Japanese (ja_PEDANTIC))
Currently translated at 96.4% (1053 of 1092 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ja_PEDANTIC/
2024-03-05 16:29:29 +00:00
Phantasm
40fa9b6ae4 Translated using Weblate (Czech)
Currently translated at 67.3% (732 of 1087 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/cs/
2024-03-05 16:29:29 +00:00
HJ
943fee9fbc Merge branch 'admin-emoji-settings' into 'develop'
Admin emoji pack settings

See merge request pleroma/pleroma-fe!1886
2024-03-05 16:29:21 +00:00
Henry Jameson
3239bd34df fix poll options 2024-03-04 23:02:21 +02:00
Henry Jameson
7f38d7d474 fix popovers 2024-03-04 22:52:54 +02:00
Henry Jameson
e4f2741989 fix 2024-03-04 22:40:44 +02:00
Henry Jameson
dc631c68fd fix some mistakes 2024-03-04 22:31:40 +02:00
Henry Jameson
b10458e3a3 lint 2024-03-04 21:40:35 +02:00
Henry Jameson
8d99e2138a fix mentionsline buttons 2024-03-04 20:20:32 +02:00
Henry Jameson
7b1f70468b fix link preview text 2024-03-04 20:10:35 +02:00
Henry Jameson
5637e29d9c fix smol utf emoji in suggestor 2024-03-04 20:06:30 +02:00
Henry Jameson
f7cd801e69 fix mentions selection 2024-03-04 19:56:06 +02:00
Henry Jameson
7e01d2083d proper selection colors 2024-03-04 19:53:45 +02:00
Henry Jameson
075f2cb903 remove all "fallback variables" 2024-03-04 19:45:42 +02:00
Henry Jameson
50a9c077fb fix new chat window 2024-03-04 19:24:18 +02:00
Henry Jameson
7238b218f9 fix badgeNotification for themes2 2024-03-04 19:10:23 +02:00
Henry Jameson
545c875a85 process chunks strictly sequentially to avoid overloading the event
queue
2024-03-04 19:03:29 +02:00
Henry Jameson
a190389f3c panels/statuses are looking really good now even with transparency 2024-03-04 18:24:29 +02:00
Pleroma Renovate Bot
e91e12b4b6 Update dependency autoprefixer to v10.4.18 2024-03-02 09:06:02 +00:00
HJ
db33d58ba7 Merge branch 'revert-6391a6a4' into 'develop'
Reduce the timestamp pf videos so that they start at beginning

See merge request pleroma/pleroma-fe!1890
2024-02-29 20:08:03 +00:00
Henry Jameson
45a4b204c8 changelog 2024-02-29 22:04:10 +02:00
HJ
0f2c5fd972 Apply 1 suggestion(s) to 1 file(s) 2024-02-29 19:57:27 +00:00
Henry Jameson
a2f2a0e409 fix autocomplete 2024-02-29 20:15:41 +02:00
Henry Jameson
01f6f89c7d interactive lists & non-interactive lists 2024-02-29 19:54:25 +02:00
Henry Jameson
23a8bee053 fix more attachments issues 2024-02-29 19:30:54 +02:00
Henry Jameson
fb55c98483 fix polls options 2024-02-29 19:06:50 +02:00
Henry Jameson
e7c64e47c4 undo the removal of toggled state for unstyled button since it is used 2024-02-29 18:52:27 +02:00
Henry Jameson
54e3a99bc7 Merge remote-tracking branch 'origin/develop' into themes3 2024-02-29 18:49:23 +02:00
Henry Jameson
73f6ecb21e clean up some variables, fixing search footer 2024-02-29 18:07:15 +02:00
Henry Jameson
78dcc0423e improve popover shadows (to not overlap with border) 2024-02-29 17:50:11 +02:00
Henry Jameson
28c7fac9f0 implement list item styles 2024-02-29 17:49:56 +02:00
Henry Jameson
3f6b9fbf9c user cards looking nicer now 2024-02-28 22:56:15 +02:00
Henry Jameson
7575079da9 fix badge-notificaiton color in favicon and notifications 2024-02-28 22:28:15 +02:00
Henry Jameson
cf1345caca more scrollbars work 2024-02-28 15:04:01 +02:00
Henry Jameson
8e3637c059 improve scrollbars, add avatar to menu-item since it appears in
autocomplete, add wallpaper color
2024-02-28 14:57:19 +02:00
Henry Jameson
39eee4412f fix alerts in panels 2024-02-28 14:25:22 +02:00
Henry Jameson
528e7e4496 fix more annoying themes2->3 button states 2024-02-28 13:10:42 +02:00
Henry Jameson
15d8daa7ec somehow i missed this one 2024-02-28 12:51:22 +02:00
Henry Jameson
e2a675e3ae oops 2024-02-28 01:26:22 +02:00
Henry Jameson
fe93717d47 consistent menu-items 2024-02-28 01:23:43 +02:00
Henry Jameson
f4d48e401a fix reply link being faint (didn't work before, no reason to keep it
"faint" imo)
2024-02-27 22:20:41 +02:00
Henry Jameson
ec2afce97e improve performance a bit and use better "worst case" color 2024-02-27 22:02:44 +02:00
Henry Jameson
e2af986323 fix global notices 2024-02-27 22:02:25 +02:00
Henry Jameson
eab3bfaf0d remove fallbacks from shadow control 2024-02-27 21:43:25 +02:00
Henry Jameson
d134b691cc remove button-unstyled from video attachments 2024-02-27 17:04:56 +02:00
Henry Jameson
c83ddb0b2b better v1 detection, better menu-item consistency 2024-02-27 17:03:39 +02:00
Henry Jameson
d3b5f76486 fix mobile drawer menu items not being fullwidth 2024-02-27 01:09:27 +02:00
Henry Jameson
d8827932bc fix collapsed notifications incorrect styles 2024-02-27 01:08:04 +02:00
Henry Jameson
adc47ad38a no more side effects, virtual components have their own css rules
instead of updating lower level
2024-02-27 00:55:19 +02:00
Henry Jameson
9a24d21bbd fix mobile badge in timeline 2024-02-27 00:16:22 +02:00
Henry Jameson
ef2c8f077d refactor and optimize: now lazy rules are processed in chunks 2024-02-27 00:07:45 +02:00
Henry Jameson
dc22386599 optimization and refactoring, rules are first flattened and then
processed, letting us to set individual rules as "lazy"
2024-02-26 21:37:40 +02:00
Henry Jameson
ac85cdac68 fix themes v1 not working 2024-02-22 19:24:26 +02:00
Henry Jameson
c4d218cb3e fix anon view 2024-02-22 19:15:55 +02:00
Henry Jameson
9bbf2e70c2 lint 2024-02-22 18:39:52 +02:00
Henry Jameson
1640bb61e3 last remaining core tasks done 2024-02-22 18:38:45 +02:00
Henry Jameson
339ae3e95e disable debug stuff i left on by accident in last commit 2024-02-22 18:20:09 +02:00
Henry Jameson
abd1407a0b fix emoji inputs having odd paddings and line-height 2024-02-22 18:19:28 +02:00
Henry Jameson
6536fe229b fix change not being recognized 2024-02-22 18:10:30 +02:00
Henry Jameson
623a961141 changelog to make pipelines happy 2024-02-22 18:07:56 +02:00
Henry Jameson
7d2faccd4f fonts support, cleanup 2024-02-22 18:04:28 +02:00
Henry Jameson
779b3dc122 blur support, fix toggled buttons not working right 2024-02-22 15:15:08 +02:00
Henry Jameson
09e0e53ad6 opacity stuff, better debug mode 2024-02-22 14:36:56 +02:00
Henry Jameson
9e66c1184f fix notifications links 2024-02-22 01:32:52 +02:00
Henry Jameson
7f465cfdb1 fix mobile notifications 2024-02-22 01:11:47 +02:00
Henry Jameson
5e0ba2bcd9 initial work on mobile stuff 2024-02-22 01:10:24 +02:00
Henry Jameson
099a2eb27f proper polls support 2024-02-22 00:31:20 +02:00
Henry Jameson
4785c553ef small tabs improvements 2024-02-22 00:06:51 +02:00
Henry Jameson
879f520b75 tabs support + cleanup 2024-02-22 00:02:24 +02:00
Henry Jameson
8a21594dbc shadow slots work + minor fixes 2024-02-21 22:18:56 +02:00
Henry Jameson
7041d29ede add attachment to panel for post form compat 2024-02-21 14:15:25 +02:00
Henry Jameson
d2f4ce442a fix attachment inputs 2024-02-21 14:05:26 +02:00
Henry Jameson
f609aaba0c improve checkbox styles 2024-02-21 13:10:11 +02:00
Henry Jameson
8a47069cee improve default button styles 2024-02-21 12:33:43 +02:00
Henry Jameson
900eb34186 improve backwards compat for avatar shadows 2024-02-21 12:33:33 +02:00
Henry Jameson
da0db933d9 moved themes2 stuff into theme_data.service.js 2024-02-21 12:23:10 +02:00
Henry Jameson
c3e6e7c61d improvements to backcompat + fixes to topbar 2024-02-20 01:18:21 +02:00
Henry Jameson
2172529dd0 backwards compat WORKING 2024-02-20 01:05:17 +02:00
Henry Jameson
0285efadbb independence from themes3, converter/backwards compat WIP 2024-02-19 20:47:27 +02:00
Henry Jameson
23dc2d1a5b refactor ISS stuff into separate file 2024-02-19 20:05:49 +02:00
Henry Jameson
4a10417ed4 initial work on dynamic slots + move remaining css stuff into separate file 2024-02-19 19:59:38 +02:00
Henry Jameson
34aa9136db refactored most of the CSS stuff into separate file, refactored color
functions and added shadow functions, replaced JS functions in button
with PISS functions
2024-02-19 18:48:49 +02:00
Henry Jameson
11fd220734 chat styles + related improvements 2024-02-19 15:11:59 +02:00
Henry Jameson
ab63ec1471 make dynamic directives have a type 2024-02-19 00:25:28 +02:00
Henry Jameson
3b520a98ad fix panel borders 2024-02-19 00:22:31 +02:00
Henry Jameson
1bc1a83a1f fix borders in statuses and linear view 2024-02-19 00:21:44 +02:00
Henry Jameson
f4bf374509 cleanup and warn if there are collisions in .style.js files 2024-02-19 00:12:07 +02:00
Henry Jameson
6811191147 i'm stupid 2024-02-19 00:10:10 +02:00
Henry Jameson
f0bbb75df5 properly sort, properly do icon colors, some initial attachment buttons work 2024-02-19 00:00:43 +02:00
Henry Jameson
13a289ac74 fixed oot selectors not working, added support for (webkit) scrollbars 2024-02-18 20:11:06 +02:00
Henry Jameson
3e198526e6 dynamically load .style.js files; move the files closer to related components 2024-02-18 18:40:14 +02:00
Pleroma Renovate Bot
1be1bdfa41 Update dependency nightwatch to v2.6.25 2024-02-17 09:06:38 +00:00
Henry Jameson
7c77809ff9 badge, alert(dot) improvements 2024-02-16 00:29:16 +02:00
Henry Jameson
96e3a1593a more optimizations, execution is now split into eager (for main UI) and
lazy (for modals, popovers etc) parts
2024-02-15 20:20:27 +02:00
Henry Jameson
34e4dd0a79 fix last border of menu-item 2024-02-13 02:31:33 +02:00
Henry Jameson
c531391e87 fix post status form input 2024-02-13 02:31:11 +02:00
Henry Jameson
c16f1d4e35 more fixes 2024-02-13 02:27:53 +02:00
Henry Jameson
bcc5084409 add roundness, fix inputs 2024-02-13 02:09:43 +02:00
Henry Jameson
17b25ef0e0 avatar shadows 2024-02-12 19:58:42 +02:00
Henry Jameson
709ce1611a remove panel from popover since it's never used anywhere 2024-02-12 19:27:51 +02:00
Henry Jameson
48f106b438 separate greentext into "fun text" and make Post/Notification related components 2024-02-12 19:17:17 +02:00
Henry Jameson
ae345d2c45 buttons look great now, including unstyled ones menu items work too 2024-02-12 17:26:08 +02:00
Henry Jameson
1c5f156af0 better button styles, include popovers in root 2024-02-12 03:46:40 +02:00
Henry Jameson
98f972e557 menu-item improvements 2024-02-11 23:11:28 +02:00
Henry Jameson
9ec61d0f0a comments and cleanup 2024-02-09 19:37:22 +02:00
Henry Jameson
1af8ca29f3 optimize combinatorics and defaults, now it's twice as fast! 2024-02-09 16:04:45 +02:00
Henry Jameson
1cfdde819b don't use lodash (-~300ms speed) 2024-02-09 15:52:11 +02:00
Henry Jameson
79d2184afa more performance testing 2024-02-08 18:36:59 +02:00
Henry Jameson
6df28cde9d improvements & performance testing 2024-02-08 18:18:01 +02:00
Henry Jameson
a7d771e8c8 more dynamic vars, PROPER ICON COLORS 2024-02-07 18:54:00 +02:00
Henry Jameson
1229bbd855 don't use no-auto for icons for now 2024-02-07 16:17:53 +02:00
Henry Jameson
85d55c55e7 add directive to completely disable automatic text color creation 2024-02-07 16:15:25 +02:00
Henry Jameson
a9efbd2553 add directive to preserve or not the text color 2024-02-07 16:09:29 +02:00
Henry Jameson
d2a74ea1a2 add .input class to all inputs 2024-02-07 15:53:49 +02:00
Henry Jameson
c34590c439 update, should inherit stuff properly now. 2024-02-07 15:53:34 +02:00
Henry Jameson
d4795d2e3c moved default rules to component style.js files, added some basic text inheritance 2024-02-01 01:27:30 +02:00
Henry Jameson
53a4b1f9a6 better virtual components and stuff 2024-01-31 17:39:51 +02:00
Pleroma Renovate Bot
7c8b9610b9 Update dependency css-loader to v6.10.0 2024-01-31 08:55:58 +00:00
HJ
303bfa6e39 Revert "Merge branch 'video-poster' into 'develop'"
This reverts merge request !1879
2024-01-29 22:54:10 +00:00
Ekaterina Vaartis
70258a2176 Address the save and delete button bugs 2024-01-28 00:03:22 +03:00
SyoBoN
8562fd2da6
Add changelog
Signed-off-by: SyoBoN <syobon@syobon.net>
2024-01-26 17:57:00 +09:00
SyoBoN
062323c0d5
Hide the expiry date indication if the poll never expires
Signed-off-by: SyoBoN <syobon@syobon.net>
2024-01-26 17:57:00 +09:00
tusooa
9042792133 Merge branch 'tusooa/group-actor' into 'develop'
Support group actors

See merge request pleroma/pleroma-fe!1882
2024-01-24 01:50:45 +00:00
Henry Jameson
ff2db7a247 fix states 2024-01-23 20:39:52 +02:00
Henry Jameson
22b32f149d shit more or less works for the very basic stuff 2024-01-23 19:18:55 +02:00
Pleroma Renovate Bot
d8c22a9e42 Update dependency @vue/babel-plugin-jsx to v1.2.1 2024-01-23 08:56:34 +00:00
Henry Jameson
0729b529d7 some more stuff, generating CSS selectors from rules 2024-01-23 00:43:46 +02:00
Ekaterina Vaartis
d5a5b8e254 Fix typo, add warning on replacing local pack 2024-01-22 23:43:20 +03:00
Ekaterina Vaartis
4d7a915154 displayError event, 'emits', "Edit pack" label 2024-01-22 23:14:49 +03:00
Ekaterina Vaartis
8a030d935b Separate emoji editing and upload into a separate component
Handle all state in that component
2024-01-19 23:16:21 +03:00
Ekaterina Vaartis
aa49838355 Adjust h-element levels to be smaller 2024-01-19 19:24:36 +03:00
Ekaterina Vaartis
a2133f5283 Rearrange stuff in accordance with comments on the MR, mostly
Also, add support for a custom message to the modified indicator
2024-01-18 16:24:55 +03:00
Henry Jameson
521d308a6c themes 3 initial work 2024-01-18 14:35:25 +02:00
HJ
b0d0a3faf6 Merge branch 'upstream-hide-custom-emoji' into 'develop'
Add ability to hide custom emojis in picker

See merge request pleroma/pleroma-fe!1887
2024-01-17 13:23:33 +00:00
Phantasm
88a006eb1a Add ability to hide custom emojis in picker 2024-01-17 13:23:33 +00:00
HJ
ae4e360157 Merge branch 'tusooa/registration-notice' into 'develop'
Show a dedicated registration notice page when further action is required after registering

See merge request pleroma/pleroma-fe!1851
2024-01-13 23:44:06 +00:00
tusooa
9277a0cc0c Merge branch 'weblate' into 'develop'
Translations update from Pleroma Weblate

See merge request pleroma/pleroma-fe!1884
2024-01-13 23:07:20 +00:00
tusooa
209c0a8332
Remove empty else branch and detail the comments 2024-01-13 17:44:13 -05:00
tusooa
82c0044963
Show a dedicated registration notice page when further action is required after registering 2024-01-13 17:41:57 -05:00
tusooa
9ec61c07ef Translated using Weblate (Chinese (Simplified))
Currently translated at 98.3% (1068 of 1086 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/zh_Hans/
2024-01-13 22:37:29 +00:00
tusooa
f5b4b5f777 Merge branch 'public-favorites' into 'develop'
Display public favorites on user profiles if enabled

See merge request pleroma/pleroma-fe!1883
2024-01-13 22:37:22 +00:00
Ekaterina Vaartis
872dffe51b Implement pack pagination, more localization fixes 2024-01-07 16:41:17 +03:00
Ekaterina Vaartis
4eeb3e5f78 Update localization 2024-01-07 14:58:41 +03:00
Ekaterina Vaartis
c218f32f6b Add a changelog entry 2024-01-07 14:50:17 +03:00
Ekaterina Vaartis
f8e1d5e3e0 Remote pack download, localization 2024-01-07 14:28:34 +03:00
Ekaterina Vaartis
4451cccb3c Error handling, uploading/deleting new emojis, sorting 2024-01-07 12:26:40 +03:00
Ekaterina Vaartis
091532d577 Editing emojis in popover, pack creation/deletion
Also fixed some API calls since they weren't working apparently
2024-01-07 02:45:49 +03:00
tusooa
bdf46eca5a Merge branch 'weblate' into 'develop'
Translations update from Pleroma Weblate

See merge request pleroma/pleroma-fe!1881
2023-12-31 21:19:38 +00:00
SyoBoN
f3cdcaa172 Translated using Weblate (Japanese (ja_PEDANTIC))
Currently translated at 96.5% (1049 of 1086 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ja_PEDANTIC/
2023-12-31 13:01:33 +00:00
Xnuk Shuman
3c4eaaab2c Translated using Weblate (Korean)
Currently translated at 97.6% (1061 of 1086 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ko/
2023-12-30 05:01:33 +00:00
nixe neko
f177e0fe24 Translated using Weblate (Japanese (ja_EASY))
Currently translated at 91.8% (997 of 1086 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ja_EASY/
2023-12-28 15:01:33 +00:00
marcin mikołajczak
6f452d672f Display public favorites on user profiles
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
2023-12-28 10:43:06 +01:00
tusooa
16f326216a
Add changelog for group actors 2023-12-27 22:56:47 -05:00
tusooa
a709127a3c
Use actor type to determine whether a user is a bot 2023-12-27 22:55:58 -05:00
tusooa
cc4aaccf38
Implement indicator for groups 2023-12-27 22:54:44 -05:00
tusooa
fd77270564
Make user card group-aware 2023-12-27 22:40:07 -05:00
tusooa
4777bec85f
Add a description on what groups do 2023-12-27 22:36:13 -05:00
tusooa
0110fd86c2
Allow user to mark account as group 2023-12-27 22:30:19 -05:00
SyoBoN
b8a036ee64 Translated using Weblate (Japanese (ja_PEDANTIC))
Currently translated at 96.5% (1048 of 1086 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ja_PEDANTIC/
2023-12-24 06:01:31 +00:00
SyoBoN
9b0fb0f798 Translated using Weblate (Japanese (ja_PEDANTIC))
Currently translated at 95.3% (1036 of 1086 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ja_PEDANTIC/
2023-12-21 15:01:42 +00:00
Ekaterina Vaartis
bfdad56b0d Make the frontend config work somewhat even without DB config 2023-12-21 00:48:14 +03:00
Ekaterina Vaartis
f9c85c0c49 Initial incomplete admin emoji settings implementation 2023-12-21 00:18:02 +03:00
Pleroma Renovate Bot
89c94f97f6 Update dependency @vuelidate/validators to v2.0.4 2023-12-12 09:06:18 +00:00
Pleroma Renovate Bot
e1ef381162 Update dependency js-cookie to v3.0.5 2023-05-03 09:07:55 +00:00
Pleroma Renovate Bot
829ab46fdc Update dependency @ungap/event-target to v0.2.4 2023-04-12 09:11:09 +00:00
228 changed files with 7456 additions and 2749 deletions

View File

@ -0,0 +1 @@
Added emoji pack management to the admin panel

View File

@ -0,0 +1 @@
Support group actors

View File

@ -0,0 +1 @@
Allow hiding custom emojis in picker.

View File

@ -0,0 +1 @@
The expiry date indication won't be shown if the poll never expires

View File

@ -0,0 +1 @@
Display public favorites on user profiles

View File

@ -0,0 +1 @@
Show a dedicated registration notice page when further action is required after registering

View File

@ -0,0 +1 @@
fix color inputs and some in-development themes3 issues

View File

@ -0,0 +1 @@
Overhauled the way themes work, migrating to new Pleroma Interface Style Sheets system.

View File

@ -0,0 +1 @@
nothing

View File

@ -24,15 +24,15 @@
"@fortawesome/vue-fontawesome": "3.0.3", "@fortawesome/vue-fontawesome": "3.0.3",
"@kazvmoe-infra/pinch-zoom-element": "1.2.0", "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
"@kazvmoe-infra/unicode-emoji-json": "0.4.0", "@kazvmoe-infra/unicode-emoji-json": "0.4.0",
"@ruffle-rs/ruffle": "0.1.0-nightly.2022.7.12", "@ruffle-rs/ruffle": "0.1.0-nightly.2024.3.17",
"@vuelidate/core": "2.0.3", "@vuelidate/core": "2.0.3",
"@vuelidate/validators": "2.0.0", "@vuelidate/validators": "2.0.4",
"body-scroll-lock": "3.1.5", "body-scroll-lock": "3.1.5",
"chromatism": "3.0.0", "chromatism": "3.0.0",
"click-outside-vue3": "4.0.1", "click-outside-vue3": "4.0.1",
"cropperjs": "1.5.13", "cropperjs": "1.5.13",
"escape-html": "1.0.3", "escape-html": "1.0.3",
"js-cookie": "3.0.1", "js-cookie": "3.0.5",
"localforage": "1.10.0", "localforage": "1.10.0",
"parse-link-header": "2.0.0", "parse-link-header": "2.0.0",
"phoenix": "1.7.7", "phoenix": "1.7.7",
@ -55,13 +55,13 @@
"@babel/preset-env": "7.21.5", "@babel/preset-env": "7.21.5",
"@babel/register": "7.21.0", "@babel/register": "7.21.0",
"@intlify/vue-i18n-loader": "5.0.1", "@intlify/vue-i18n-loader": "5.0.1",
"@ungap/event-target": "0.2.3", "@ungap/event-target": "0.2.4",
"@vue/babel-helper-vue-jsx-merge-props": "1.4.0", "@vue/babel-helper-vue-jsx-merge-props": "1.4.0",
"@vue/babel-plugin-jsx": "1.1.1", "@vue/babel-plugin-jsx": "1.2.1",
"@vue/compiler-sfc": "3.2.45", "@vue/compiler-sfc": "3.2.45",
"@vue/test-utils": "2.2.8", "@vue/test-utils": "2.2.8",
"autoprefixer": "10.4.14", "autoprefixer": "10.4.19",
"babel-loader": "9.1.2", "babel-loader": "9.1.3",
"babel-plugin-lodash": "3.3.4", "babel-plugin-lodash": "3.3.4",
"chai": "4.3.7", "chai": "4.3.7",
"chalk": "1.1.3", "chalk": "1.1.3",
@ -69,7 +69,7 @@
"connect-history-api-fallback": "2.0.0", "connect-history-api-fallback": "2.0.0",
"copy-webpack-plugin": "11.0.0", "copy-webpack-plugin": "11.0.0",
"cross-spawn": "7.0.3", "cross-spawn": "7.0.3",
"css-loader": "6.7.3", "css-loader": "6.10.0",
"css-minimizer-webpack-plugin": "4.2.2", "css-minimizer-webpack-plugin": "4.2.2",
"custom-event-polyfill": "1.0.7", "custom-event-polyfill": "1.0.7",
"eslint": "8.33.0", "eslint": "8.33.0",
@ -99,7 +99,7 @@
"lodash": "4.17.21", "lodash": "4.17.21",
"mini-css-extract-plugin": "2.7.6", "mini-css-extract-plugin": "2.7.6",
"mocha": "10.2.0", "mocha": "10.2.0",
"nightwatch": "2.6.20", "nightwatch": "2.6.25",
"opn": "5.5.0", "opn": "5.5.0",
"ora": "0.4.1", "ora": "0.4.1",
"postcss": "8.4.23", "postcss": "8.4.23",

View File

@ -1,9 +1,10 @@
// stylelint-disable rscss/class-format // stylelint-disable rscss/class-format
/* stylelint-disable no-descending-specificity */ /* stylelint-disable no-descending-specificity */
@import "./variables";
@import "./panel"; @import "./panel";
:root { :root {
--font-size: 14px;
--status-margin: 0.75em;
--navbar-height: 3.5rem; --navbar-height: 3.5rem;
--post-line-height: 1.4; --post-line-height: 1.4;
// Z-Index stuff // Z-Index stuff
@ -13,19 +14,21 @@
--ZI_navbar_popovers: 7500; --ZI_navbar_popovers: 7500;
--ZI_navbar: 7000; --ZI_navbar: 7000;
--ZI_popovers: 6000; --ZI_popovers: 6000;
// Fallback for when stuff is loading
--background: var(--bg);
} }
html { html {
font-size: 14px; font-size: var(--font-size);
// overflow-x: clip causes my browser's tab to crash with SIGILL lul // overflow-x: clip causes my browser's tab to crash with SIGILL lul
} }
body { body {
font-family: sans-serif; font-family: sans-serif;
font-family: var(--interfaceFont, sans-serif); font-family: var(--font);
margin: 0; margin: 0;
color: $fallback--text; color: var(--text);
color: var(--text, $fallback--text);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
overscroll-behavior-y: none; overscroll-behavior-y: none;
@ -42,17 +45,35 @@ body {
// have a cursor/pointer to operate them // have a cursor/pointer to operate them
@media (any-pointer: fine) { @media (any-pointer: fine) {
* { * {
scrollbar-color: var(--btn) transparent; scrollbar-color: var(--fg) transparent;
&::-webkit-scrollbar { &::-webkit-scrollbar {
background: transparent; background: transparent;
} }
&::-webkit-scrollbar-corner {
background: transparent;
}
&::-webkit-resizer {
/* stylelint-disable-next-line declaration-no-important */
background-color: transparent !important;
background-image:
linear-gradient(
135deg,
transparent calc(50% - 1px),
var(--textFaint) 50%,
transparent calc(50% + 1px),
transparent calc(75% - 1px),
var(--textFaint) 75%,
transparent calc(75% + 1px),
);
}
&::-webkit-scrollbar-button, &::-webkit-scrollbar-button,
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: var(--btn); box-shadow: var(--shadow);
box-shadow: var(--buttonShadow); border-radius: var(--roundness);
border-radius: var(--btnRadius);
} }
// horizontal/vertical/increment/decrement are webkit-specific stuff // horizontal/vertical/increment/decrement are webkit-specific stuff
@ -61,7 +82,7 @@ body {
&::-webkit-scrollbar-button { &::-webkit-scrollbar-button {
--___bgPadding: 2px; --___bgPadding: 2px;
color: var(--btnText); color: var(--text);
background-repeat: no-repeat, no-repeat; background-repeat: no-repeat, no-repeat;
&:horizontal { &:horizontal {
@ -69,15 +90,15 @@ body {
&:increment { &:increment {
background-image: background-image:
linear-gradient(45deg, var(--btnText) 50%, transparent 51%), linear-gradient(45deg, var(--text) 50%, transparent 51%),
linear-gradient(-45deg, transparent 50%, var(--btnText) 51%); linear-gradient(-45deg, transparent 50%, var(--text) 51%);
background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding); background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
} }
&:decrement { &:decrement {
background-image: background-image:
linear-gradient(45deg, transparent 50%, var(--btnText) 51%), linear-gradient(45deg, transparent 50%, var(--text) calc(50% + 1px)),
linear-gradient(-45deg, var(--btnText) 50%, transparent 51%); linear-gradient(-45deg, var(--text) 50%, transparent 51%);
background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding); background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
} }
} }
@ -87,15 +108,15 @@ body {
&:increment { &:increment {
background-image: background-image:
linear-gradient(-45deg, transparent 50%, var(--btnText) 51%), linear-gradient(-45deg, transparent 50%, var(--text) 51%),
linear-gradient(45deg, transparent 50%, var(--btnText) 51%); linear-gradient(45deg, transparent 50%, var(--text) 51%);
background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%; background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
} }
&:decrement { &:decrement {
background-image: background-image:
linear-gradient(-45deg, var(--btnText) 50%, transparent 51%), linear-gradient(-45deg, var(--text) 50%, transparent 51%),
linear-gradient(45deg, var(--btnText) 50%, transparent 51%); linear-gradient(45deg, var(--text) 50%, transparent 51%);
background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%; background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
} }
} }
@ -104,15 +125,14 @@ body {
} }
// Body should have background to scrollbar otherwise it will use white (body color?) // Body should have background to scrollbar otherwise it will use white (body color?)
html { html {
scrollbar-color: var(--selectedMenu) var(--wallpaper); scrollbar-color: var(--fg) var(--wallpaper);
background: var(--wallpaper); background: var(--wallpaper);
} }
} }
a { a {
text-decoration: none; text-decoration: none;
color: $fallback--link; color: var(--link);
color: var(--link, $fallback--link);
} }
h4 { h4 {
@ -128,27 +148,12 @@ h4 {
i[class*="icon-"], i[class*="icon-"],
.svg-inline--fa, .svg-inline--fa,
.iconLetter { .iconLetter {
color: $fallback--icon; color: var(--icon);
color: var(--icon, $fallback--icon);
}
.button-unstyled:hover,
a:hover {
> i[class*="icon-"],
> .svg-inline--fa,
> .iconLetter {
color: var(--text);
}
} }
nav { nav {
z-index: var(--ZI_navbar); z-index: var(--ZI_navbar);
background-color: $fallback--fg; box-shadow: var(--shadow);
background-color: var(--topBar, $fallback--fg);
color: $fallback--faint;
color: var(--faint, $fallback--faint);
box-shadow: 0 0 4px rgb(0 0 0 / 60%);
box-shadow: var(--topBarShadow);
box-sizing: border-box; box-sizing: border-box;
height: var(--navbar-height); height: var(--navbar-height);
position: fixed; position: fixed;
@ -195,8 +200,7 @@ nav {
grid-column: 1 / span 3; grid-column: 1 / span 3;
grid-row: 1 / 1; grid-row: 1 / 1;
pointer-events: none; pointer-events: none;
background-color: rgb(0 0 0 / 15%); background-color: var(--underlay);
background-color: var(--underlay, rgb(0 0 0 / 15%));
z-index: -1000; z-index: -1000;
} }
@ -204,7 +208,6 @@ nav {
--miniColumn: 25rem; --miniColumn: 25rem;
--maxiColumn: 45rem; --maxiColumn: 45rem;
--columnGap: 1em; --columnGap: 1em;
--status-margin: 0.75em;
--effectiveSidebarColumnWidth: minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn))); --effectiveSidebarColumnWidth: minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn)));
--effectiveNotifsColumnWidth: minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn))); --effectiveNotifsColumnWidth: minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn)));
--effectiveContentColumnWidth: minmax(var(--miniColumn), var(--contentColumnWidth, var(--maxiColumn))); --effectiveContentColumnWidth: minmax(var(--miniColumn), var(--contentColumnWidth, var(--maxiColumn)));
@ -366,106 +369,113 @@ nav {
.button-default { .button-default {
user-select: none; user-select: none;
color: $fallback--text; color: var(--text);
color: var(--btnText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btn, $fallback--fg);
border: none; border: none;
border-radius: $fallback--btnRadius; border-radius: var(--roundness);
border-radius: var(--btnRadius, $fallback--btnRadius);
cursor: pointer; cursor: pointer;
box-shadow: $fallback--buttonShadow; background-color: var(--background);
box-shadow: var(--buttonShadow); box-shadow: var(--shadow);
font-size: 1em; font-size: 1em;
font-family: sans-serif; font-family: sans-serif;
font-family: var(--interfaceFont, sans-serif); font-family: var(--font);
&.-sublime {
background: transparent;
}
i[class*="icon-"],
.svg-inline--fa {
color: $fallback--text;
color: var(--btnText, $fallback--text);
}
&::-moz-focus-inner { &::-moz-focus-inner {
border: none; border: none;
} }
&:hover {
box-shadow: 0 0 4px rgb(255 255 255 / 30%);
box-shadow: var(--buttonHoverShadow);
}
&:active {
box-shadow:
0 0 4px 0 rgb(255 255 255 / 30%),
0 1px 0 0 rgb(0 0 0 / 20%) inset,
0 -1px 0 0 rgb(255 255 255 / 20%) inset;
box-shadow: var(--buttonPressedShadow);
color: $fallback--text;
color: var(--btnPressedText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btnPressed, $fallback--fg);
svg,
i {
color: $fallback--text;
color: var(--btnPressedText, $fallback--text);
}
}
&:disabled { &:disabled {
cursor: not-allowed; cursor: not-allowed;
color: $fallback--text; }
color: var(--btnDisabledText, $fallback--text); }
background-color: $fallback--fg;
background-color: var(--btnDisabled, $fallback--fg);
svg, .menu-item,
i { .list-item {
color: $fallback--text; display: block;
color: var(--btnDisabledText, $fallback--text); box-sizing: border-box;
} border: none;
outline: none;
text-align: initial;
font-size: inherit;
font-family: inherit;
font-weight: 400;
cursor: pointer;
color: inherit;
clear: both;
position: relative;
white-space: nowrap;
border-color: var(--border);
border-style: solid;
border-width: 0;
border-top-width: 1px;
width: 100%;
line-height: var(--__line-height);
padding: var(--__vertical-gap) var(--__horizontal-gap);
background: transparent;
--__line-height: 1.5em;
--__horizontal-gap: 0.75em;
--__vertical-gap: 0.5em;
&.-non-interactive {
cursor: auto;
} }
&.toggled { &.-active,
color: $fallback--text; &:hover {
color: var(--btnToggledText, $fallback--text); border-top-width: 1px;
background-color: $fallback--fg; border-bottom-width: 1px;
background-color: var(--btnToggled, $fallback--fg);
box-shadow:
0 0 4px 0 rgb(255 255 255 / 30%),
0 1px 0 0 rgb(0 0 0 / 20%) inset,
0 -1px 0 0 rgb(255 255 255 / 20%) inset;
box-shadow: var(--buttonPressedShadow);
svg,
i {
color: $fallback--text;
color: var(--btnToggledText, $fallback--text);
}
} }
&.danger { &.-active + &,
// TODO: add better color variable &:hover + & {
color: $fallback--text; border-top-width: 0;
color: var(--alertErrorPanelText, $fallback--text); }
background-color: $fallback--alertError;
background-color: var(--alertError, $fallback--alertError); &:hover + .menu-item-collapsible:not(.-expanded) + &,
&.-active + .menu-item-collapsible:not(.-expanded) + & {
border-top-width: 0;
}
&[aria-expanded="true"] {
border-bottom-width: 1px;
}
a,
button:not(.button-default) {
text-align: initial;
padding: 0;
background: none;
border: none;
outline: none;
display: inline;
font-size: 100%;
font-family: inherit;
line-height: unset;
color: var(--text);
}
&:first-child {
border-top-right-radius: var(--roundness);
border-top-left-radius: var(--roundness);
border-top-width: 0;
}
&:last-child {
border-bottom-right-radius: var(--roundness);
border-bottom-left-radius: var(--roundness);
border-bottom-width: 0;
} }
} }
.button-unstyled { .button-unstyled {
background: none;
border: none; border: none;
outline: none; outline: none;
display: inline; display: inline;
text-align: initial; text-align: initial;
font-size: 100%; font-size: 100%;
font-family: inherit; font-family: inherit;
box-shadow: var(--shadow);
background-color: transparent;
padding: 0; padding: 0;
line-height: unset; line-height: unset;
cursor: pointer; cursor: pointer;
@ -473,28 +483,23 @@ nav {
color: inherit; color: inherit;
&.-link { &.-link {
color: $fallback--link; /* stylelint-disable-next-line declaration-no-important */
color: var(--link, $fallback--link); color: var(--link) !important;
}
&.-fullwidth {
width: 100%;
}
&.-hover-highlight {
&:hover svg {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
} }
} }
input, input,
textarea, textarea {
border: none;
display: inline-block;
outline: none;
}
.input { .input {
&.unstyled { &.unstyled {
border-radius: 0; border-radius: 0;
background: none; /* stylelint-disable-next-line declaration-no-important */
background: none !important;
box-shadow: none; box-shadow: none;
height: unset; height: unset;
} }
@ -502,19 +507,11 @@ textarea,
--_padding: 0.5em; --_padding: 0.5em;
border: none; border: none;
border-radius: $fallback--inputRadius; border-radius: var(--roundness);
border-radius: var(--inputRadius, $fallback--inputRadius); background-color: var(--background);
box-shadow: color: var(--text);
0 1px 0 0 rgb(0 0 0 / 20%) inset, box-shadow: var(--shadow);
0 -1px 0 0 rgb(255 255 255 / 20%) inset, font-family: var(--font);
0 0 2px 0 rgb(0 0 0 / 100%) inset;
box-shadow: var(--inputShadow);
background-color: $fallback--fg;
background-color: var(--input, $fallback--fg);
color: $fallback--lightText;
color: var(--inputText, $fallback--lightText);
font-family: sans-serif;
font-family: var(--inputFont, sans-serif);
font-size: 1em; font-size: 1em;
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
@ -528,7 +525,6 @@ textarea,
&[disabled="disabled"], &[disabled="disabled"],
&.disabled { &.disabled {
cursor: not-allowed; cursor: not-allowed;
opacity: 0.5;
} }
&[type="range"] { &[type="range"] {
@ -543,9 +539,9 @@ textarea,
display: none; display: none;
&:checked + label::before { &:checked + label::before {
box-shadow: 0 0 2px black inset, 0 0 0 4px $fallback--fg inset; box-shadow: var(--shadow);
box-shadow: var(--inputShadow), 0 0 0 4px var(--fg, $fallback--fg) inset; background-color: var(--background);
background-color: var(--accent, $fallback--link); color: var(--text);
} }
&:disabled { &:disabled {
@ -559,16 +555,14 @@ textarea,
+ label::before { + label::before {
flex-shrink: 0; flex-shrink: 0;
display: inline-block; display: inline-block;
content: ""; content: "";
transition: box-shadow 200ms; transition: box-shadow 200ms;
width: 1.1em; width: 1.1em;
height: 1.1em; height: 1.1em;
border-radius: 100%; // Radio buttons should always be circle border-radius: 100%; // Radio buttons should always be circle
box-shadow: 0 0 2px black inset; background-color: var(--background);
box-shadow: var(--inputShadow); box-shadow: var(--shadow);
margin-right: 0.5em; margin-right: 0.5em;
background-color: $fallback--fg;
background-color: var(--input, $fallback--fg);
vertical-align: top; vertical-align: top;
text-align: center; text-align: center;
line-height: 1.1; line-height: 1.1;
@ -581,8 +575,9 @@ textarea,
&[type="checkbox"] { &[type="checkbox"] {
&:checked + label::before { &:checked + label::before {
color: $fallback--text; color: var(--text);
color: var(--inputText, $fallback--text); background-color: var(--background);
box-shadow: var(--shadow);
} }
&:disabled { &:disabled {
@ -600,13 +595,9 @@ textarea,
transition: color 200ms; transition: color 200ms;
width: 1.1em; width: 1.1em;
height: 1.1em; height: 1.1em;
border-radius: $fallback--checkboxRadius; border-radius: var(--roundness);
border-radius: var(--checkboxRadius, $fallback--checkboxRadius); box-shadow: var(--shadow);
box-shadow: 0 0 2px black inset;
box-shadow: var(--inputShadow);
margin-right: 0.5em; margin-right: 0.5em;
background-color: $fallback--fg;
background-color: var(--input, $fallback--fg);
vertical-align: top; vertical-align: top;
text-align: center; text-align: center;
line-height: 1.1; line-height: 1.1;
@ -623,16 +614,14 @@ textarea,
} }
// Textareas should have stock line-height + vertical padding instead of huge line-height // Textareas should have stock line-height + vertical padding instead of huge line-height
textarea { textarea.input {
padding: var(--_padding); padding: var(--_padding);
line-height: var(--post-line-height); line-height: var(--post-line-height);
} }
option { option {
color: $fallback--text; color: var(--text);
color: var(--text, $fallback--text); background-color: var(--background);
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
} }
.hide-number-spinner { .hide-number-spinner {
@ -653,7 +642,7 @@ option {
li { li {
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--inputRadius); border-radius: var(--roundness);
padding: 0.5em; padding: 0.5em;
margin: 0.25em; margin: 0.25em;
} }
@ -714,74 +703,58 @@ option {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
&.badge-notification { &.-dot,
background-color: $fallback--cRed; &.-counter {
background-color: var(--badgeNotification, $fallback--cRed); margin: 0;
color: white; position: absolute;
color: var(--badgeNotificationText, white); }
&.-dot {
min-height: 8px;
max-height: 8px;
min-width: 8px;
max-width: 8px;
padding: 0;
line-height: 0;
font-size: 0;
left: calc(50% - 4px);
top: calc(50% - 4px);
margin-left: 6px;
margin-top: -6px;
}
&.-counter {
border-radius: var(--roundness);
font-size: 0.75em;
line-height: 1;
text-align: right;
padding: 0.2em;
min-width: 0;
left: calc(50% - 0.5em);
top: calc(50% - 0.4em);
margin-left: 0.7em;
margin-top: -1em;
} }
} }
.alert { .alert {
margin: 0 0.35em; margin: 0 0.35em;
padding: 0 0.25em; padding: 0 0.25em;
border-radius: $fallback--tooltipRadius; border-radius: var(--roundness);
border-radius: var(--tooltipRadius, $fallback--tooltipRadius); border: 1px solid var(--border);
&.error {
background-color: $fallback--alertError;
background-color: var(--alertError, $fallback--alertError);
color: $fallback--text;
color: var(--alertErrorText, $fallback--text);
.panel-heading & {
color: $fallback--text;
color: var(--alertErrorPanelText, $fallback--text);
}
}
&.warning {
background-color: $fallback--alertWarning;
background-color: var(--alertWarning, $fallback--alertWarning);
color: $fallback--text;
color: var(--alertWarningText, $fallback--text);
.panel-heading & {
color: $fallback--text;
color: var(--alertWarningPanelText, $fallback--text);
}
}
&.success {
background-color: var(--alertSuccess, $fallback--alertWarning);
color: var(--alertSuccessText, $fallback--text);
.panel-heading & {
color: var(--alertSuccessPanelText, $fallback--text);
}
}
} }
.faint { .faint {
color: $fallback--faint; --text: var(--textFaint);
color: var(--faint, $fallback--faint); --link: var(--linkFaint);
}
.faint-link { color: var(--text);
color: $fallback--faint;
color: var(--faint, $fallback--faint);
&:hover {
text-decoration: underline;
}
} }
.visibility-notice { .visibility-notice {
padding: 0.5em; padding: 0.5em;
border: 1px solid $fallback--faint; border: 1px solid var(--textFaint);
border: 1px solid var(--faint, $fallback--faint); border-radius: var(--roundness);
border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius);
} }
.notice-dismissible { .notice-dismissible {
@ -802,6 +775,10 @@ option {
&.iconLetter { &.iconLetter {
font-size: 1.1em; font-size: 1.1em;
} }
&.svg-inline--fa {
vertical-align: -0.15em;
}
} }
.fa-old-padding { .fa-old-padding {
@ -816,6 +793,11 @@ option {
opacity: 0.25; opacity: 0.25;
} }
.timeago {
--link: var(--text);
--linkFaint: var(--textFaint);
}
.login-hint { .login-hint {
text-align: center; text-align: center;
@ -914,3 +896,8 @@ option {
padding: 0; padding: 0;
position: absolute; position: absolute;
} }
*::selection {
color: var(--selectionText);
background-color: var(--selectionBackground);
}

View File

@ -1,5 +1,6 @@
<template> <template>
<div <div
v-show="$store.state.interface.themeApplied"
id="app-loaded" id="app-loaded"
:style="bgStyle" :style="bgStyle"
> >

View File

@ -1,36 +0,0 @@
$main-color: #f58d2c;
$main-background: white;
$darkened-background: whitesmoke;
$fallback--bg: #121a24;
$fallback--fg: #182230;
$fallback--faint: rgb(185 185 186 / 50%);
$fallback--text: #b9b9ba;
$fallback--link: #d8a070;
$fallback--icon: #666;
$fallback--lightBg: rgb(21 30 42);
$fallback--lightText: #b9b9ba;
$fallback--border: #222;
$fallback--cRed: #f00;
$fallback--cBlue: #0095ff;
$fallback--cGreen: #0fa00f;
$fallback--cOrange: orange;
$fallback--alertError: rgb(211 16 20 / 50%);
$fallback--alertWarning: rgb(111 111 20 / 50%);
$fallback--panelRadius: 10px;
$fallback--checkboxRadius: 2px;
$fallback--btnRadius: 4px;
$fallback--inputRadius: 4px;
$fallback--tooltipRadius: 5px;
$fallback--avatarRadius: 4px;
$fallback--avatarAltRadius: 10px;
$fallback--attachmentRadius: 10px;
$fallback--chatMessageRadius: 10px;
$fallback--buttonShadow: 0 0 2px 0 rgb(0 0 0 / 100%),
0 1px 0 0 rgb(255 255 255 / 20%) inset,
0 -1px 0 0 rgb(0 0 0 / 20%) inset;
$status-margin: 0.75em;

View File

@ -261,6 +261,7 @@ const getNodeInfo = async ({ store }) => {
store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits }) store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits })
store.dispatch('setInstanceOption', { name: 'mailerEnabled', value: metadata.mailerEnabled }) store.dispatch('setInstanceOption', { name: 'mailerEnabled', value: metadata.mailerEnabled })
store.dispatch('setInstanceOption', { name: 'quotingAvailable', value: features.includes('quote_posting') }) store.dispatch('setInstanceOption', { name: 'quotingAvailable', value: features.includes('quote_posting') })
store.dispatch('setInstanceOption', { name: 'groupActorAvailable', value: features.includes('pleroma:group_actors') })
const uploadLimits = metadata.uploadLimits const uploadLimits = metadata.uploadLimits
store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadLimits.general) }) store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadLimits.general) })
@ -327,17 +328,14 @@ const setConfig = async ({ store }) => {
} }
const checkOAuthToken = async ({ store }) => { const checkOAuthToken = async ({ store }) => {
// eslint-disable-next-line no-async-promise-executor if (store.getters.getUserToken()) {
return new Promise(async (resolve, reject) => { try {
if (store.getters.getUserToken()) { await store.dispatch('loginUser', store.getters.getUserToken())
try { } catch (e) {
await store.dispatch('loginUser', store.getters.getUserToken()) console.error(e)
} catch (e) {
console.error(e)
}
} }
resolve() }
}) return Promise.resolve()
} }
const afterStoreSetup = async ({ store, i18n }) => { const afterStoreSetup = async ({ store, i18n }) => {
@ -365,6 +363,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
} else { } else {
applyTheme(customTheme) applyTheme(customTheme)
} }
store.commit('setThemeApplied')
} else if (theme) { } else if (theme) {
// do nothing, it will load asynchronously // do nothing, it will load asynchronously
} else { } else {

View File

@ -11,14 +11,14 @@
<template v-if="relationship.following"> <template v-if="relationship.following">
<button <button
v-if="relationship.showing_reblogs" v-if="relationship.showing_reblogs"
class="btn button-default dropdown-item" class="dropdown-item menu-item"
@click="hideRepeats" @click="hideRepeats"
> >
{{ $t('user_card.hide_repeats') }} {{ $t('user_card.hide_repeats') }}
</button> </button>
<button <button
v-if="!relationship.showing_reblogs" v-if="!relationship.showing_reblogs"
class="btn button-default dropdown-item" class="dropdown-item menu-item"
@click="showRepeats" @click="showRepeats"
> >
{{ $t('user_card.show_repeats') }} {{ $t('user_card.show_repeats') }}
@ -31,34 +31,34 @@
<UserListMenu :user="user" /> <UserListMenu :user="user" />
<button <button
v-if="relationship.followed_by" v-if="relationship.followed_by"
class="btn button-default btn-block dropdown-item" class="dropdown-item menu-item"
@click="removeUserFromFollowers" @click="removeUserFromFollowers"
> >
{{ $t('user_card.remove_follower') }} {{ $t('user_card.remove_follower') }}
</button> </button>
<button <button
v-if="relationship.blocking" v-if="relationship.blocking"
class="btn button-default btn-block dropdown-item" class="dropdown-item menu-item"
@click="unblockUser" @click="unblockUser"
> >
{{ $t('user_card.unblock') }} {{ $t('user_card.unblock') }}
</button> </button>
<button <button
v-else v-else
class="btn button-default btn-block dropdown-item" class="dropdown-item menu-item"
@click="blockUser" @click="blockUser"
> >
{{ $t('user_card.block') }} {{ $t('user_card.block') }}
</button> </button>
<button <button
class="btn button-default btn-block dropdown-item" class="dropdown-item menu-item"
@click="reportUser" @click="reportUser"
> >
{{ $t('user_card.report') }} {{ $t('user_card.report') }}
</button> </button>
<button <button
v-if="pleromaChatMessagesAvailable" v-if="pleromaChatMessagesAvailable"
class="btn button-default btn-block dropdown-item" class="dropdown-item menu-item"
@click="openChat" @click="openChat"
> >
{{ $t('user_card.message') }} {{ $t('user_card.message') }}
@ -122,19 +122,12 @@
<script src="./account_actions.js"></script> <script src="./account_actions.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.AccountActions { .AccountActions {
.ellipsis-button { .ellipsis-button {
width: 2.5em; width: 2.5em;
margin: -0.5em 0; margin: -0.5em 0;
padding: 0.5em 0; padding: 0.5em 0;
text-align: center; text-align: center;
&:not(:hover) .icon {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
} }
} }
</style> </style>

View File

@ -0,0 +1,51 @@
export default {
name: 'Alert',
selector: '.alert',
validInnerComponents: [
'Text',
'Icon',
'Link',
'Border',
'ButtonUnstyled'
],
variants: {
normal: '.neutral',
error: '.error',
warning: '.warning',
success: '.success'
},
defaultRules: [
{
directives: {
background: '--text',
opacity: 0.5,
blur: '9px'
}
},
{
parent: {
component: 'Alert'
},
component: 'Border',
textColor: '--parent'
},
{
variant: 'error',
directives: {
background: '--cRed'
}
},
{
variant: 'warning',
directives: {
background: '--cOrange'
}
},
{
variant: 'success',
directives: {
background: '--cGreen'
}
}
]
}

View File

@ -99,16 +99,14 @@
<script src="./announcement.js"></script> <script src="./announcement.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.announcement { .announcement {
border-bottom: 1px solid var(--border, $fallback--border); border-bottom: 1px solid var(--border);
border-radius: 0; border-radius: 0;
padding: var(--status-margin, $status-margin); padding: var(--status-margin);
.heading, .heading,
.body { .body {
margin-bottom: var(--status-margin, $status-margin); margin-bottom: var(--status-margin);
} }
.footer { .footer {

View File

@ -3,7 +3,7 @@
<textarea <textarea
ref="textarea" ref="textarea"
v-model="announcement.content" v-model="announcement.content"
class="post-textarea" class="input post-textarea"
rows="1" rows="1"
cols="1" cols="1"
:placeholder="$t('announcements.post_placeholder')" :placeholder="$t('announcements.post_placeholder')"
@ -14,6 +14,7 @@
<input <input
id="announcement-start-time" id="announcement-start-time"
v-model="announcement.startsAt" v-model="announcement.startsAt"
class="input"
:type="announcement.allDay ? 'date' : 'datetime-local'" :type="announcement.allDay ? 'date' : 'datetime-local'"
:disabled="disabled" :disabled="disabled"
> >
@ -23,6 +24,7 @@
<input <input
id="announcement-end-time" id="announcement-end-time"
v-model="announcement.endsAt" v-model="announcement.endsAt"
class="input"
:type="announcement.allDay ? 'date' : 'datetime-local'" :type="announcement.allDay ? 'date' : 'datetime-local'"
:disabled="disabled" :disabled="disabled"
> >

View File

@ -61,15 +61,13 @@
<script src="./announcements_page.js"></script> <script src="./announcements_page.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.announcements-page { .announcements-page {
.post-form { .post-form {
padding: var(--status-margin, $status-margin); padding: var(--status-margin);
.heading, .heading,
.body { .body {
margin-bottom: var(--status-margin, $status-margin); margin-bottom: var(--status-margin);
} }
.post-button { .post-button {

View File

@ -1,5 +1,3 @@
@import "../../variables";
.Attachment { .Attachment {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
@ -9,10 +7,8 @@
height: 100%; height: 100%;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-radius: $fallback--attachmentRadius; border-radius: var(--roundness);
border-radius: var(--attachmentRadius, $fallback--attachmentRadius); border-color: var(--border);
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
.attachment-wrapper { .attachment-wrapper {
flex: 1 1 auto; flex: 1 1 auto;
@ -84,6 +80,13 @@
} }
} }
.video-container {
border: none;
outline: none;
color: inherit;
background: transparent;
}
.audio-container { .audio-container {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
@ -126,23 +129,12 @@
.attachment-button { .attachment-button {
padding: 0; padding: 0;
border-radius: $fallback--tooltipRadius; border-radius: var(--roundness);
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
text-align: center; text-align: center;
width: 2em; width: 2em;
height: 2em; height: 2em;
margin-left: 0.5em; margin-left: 0.5em;
font-size: 1.25em; font-size: 1.25em;
// TODO: theming? hard to theme with unknown background image color
background: rgb(230 230 230 / 70%);
.svg-inline--fa {
color: rgb(0 0 0 / 60%);
}
&:hover .svg-inline--fa {
color: rgb(0 0 0 / 90%);
}
} }
} }
@ -217,8 +209,7 @@
&.-placeholder { &.-placeholder {
display: inline-block; display: inline-block;
color: $fallback--link; color: var(--link);
color: var(--postLink, $fallback--link);
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
height: auto; height: auto;

View File

@ -0,0 +1,24 @@
export default {
name: 'Attachment',
selector: '.Attachment',
validInnerComponents: [
'Border',
'ButtonUnstyled',
'Input'
],
defaultRules: [
{
directives: {
roundness: 3
}
},
{
component: 'ButtonUnstyled',
parent: { component: 'Attachment' },
directives: {
background: '#FFFFFF',
opacity: 0.5
}
}
]
}

View File

@ -38,7 +38,7 @@
v-if="edit" v-if="edit"
v-model="localDescription" v-model="localDescription"
type="text" type="text"
class="description-field" class="input description-field"
:placeholder="$t('post_status.media_description')" :placeholder="$t('post_status.media_description')"
@keydown.enter.prevent="" @keydown.enter.prevent=""
> >
@ -175,7 +175,6 @@
:is="videoTag" :is="videoTag"
v-if="type === 'video' && !hidden" v-if="type === 'video' && !hidden"
class="video-container" class="video-container"
:class="{ 'button-unstyled': 'isModal' }"
:href="attachment.url" :href="attachment.url"
@click.stop.prevent="openModal" @click.stop.prevent="openModal"
> >
@ -253,7 +252,7 @@
v-if="edit" v-if="edit"
v-model="localDescription" v-model="localDescription"
type="text" type="text"
class="description-field" class="input description-field"
:placeholder="$t('post_status.media_description')" :placeholder="$t('post_status.media_description')"
@keydown.enter.prevent="" @keydown.enter.prevent=""
> >

View File

@ -1,3 +1,4 @@
<!-- FIXME THIS NEEDS TO BE REFACTORED TO USE POPOVER -->
<template> <template>
<div <div
v-click-outside="onClickOutside" v-click-outside="onClickOutside"
@ -6,12 +7,12 @@
<input <input
v-model="term" v-model="term"
:placeholder="placeholder" :placeholder="placeholder"
class="autosuggest-input" class="input autosuggest-input"
@click="onInputClick" @click="onInputClick"
> >
<div <div
v-if="resultsVisible && filtered.length > 0" v-if="resultsVisible && filtered.length > 0"
class="autosuggest-results" class="panel autosuggest-results"
> >
<slot <slot
v-for="item in filtered" v-for="item in filtered"
@ -24,8 +25,6 @@
<script src="./autosuggest.js"></script> <script src="./autosuggest.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.autosuggest { .autosuggest {
position: relative; position: relative;
@ -40,18 +39,15 @@
top: 100%; top: 100%;
right: 0; right: 0;
max-height: 400px; max-height: 400px;
background-color: $fallback--bg; background-color: var(--bg);
background-color: var(--bg, $fallback--bg);
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-color: $fallback--border; border-color: var(--border);
border-color: var(--border, $fallback--border); border-radius: var(--roundness);
border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius);
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
box-shadow: 1px 1px 4px rgb(0 0 0 / 60%); box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
box-shadow: var(--panelShadow); box-shadow: var(--shadow);
overflow-y: auto; overflow-y: auto;
z-index: 1; z-index: 1;
} }

View File

@ -17,8 +17,6 @@
<script src="./avatar_list.js"></script> <script src="./avatar_list.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.avatars { .avatars {
display: flex; display: flex;
margin: 0; margin: 0;
@ -36,8 +34,7 @@
} }
.avatar-small { .avatar-small {
border-radius: $fallback--avatarAltRadius; border-radius: var(--roundness);
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
height: 24px; height: 24px;
width: 24px; width: 24px;
} }

View File

@ -0,0 +1,30 @@
export default {
name: 'Badge',
selector: '.badge',
validInnerComponents: [
'Text',
'Icon'
],
variants: {
notification: '.-notification'
},
defaultRules: [
{
component: 'Root',
directives: {
'--badgeNotification': 'color | --cRed'
}
},
{
directives: {
background: '--cGreen'
}
},
{
variant: 'notification',
directives: {
background: '--cRed'
}
}
]
}

View File

@ -47,7 +47,6 @@
display: flex; display: flex;
flex: 1 0; flex: 1 0;
margin: 0; margin: 0;
padding: 0.6em 1em;
--emoji-size: 14px; --emoji-size: 14px;

View File

@ -0,0 +1,13 @@
export default {
name: 'Border',
selector: '/*border*/',
virtual: true,
defaultRules: [
{
directives: {
textColor: '$mod(--parent, 10)',
textAuto: 'no-auto'
}
}
]
}

View File

@ -0,0 +1,101 @@
export default {
name: 'Button', // Name of the component
selector: '.button-default', // CSS selector/prefix
// outOfTreeSelector: '' // out-of-tree selector is used when other components are laid over it but it's not part of the tree, see Underlay component
// States, system witll calculate ALL possible combinations of those and prepend "normal" to them + standalone "normal" state
states: {
// States are a bit expensive - the amount of combinations generated is about (1/6)n^3+n, so adding more state increased number of combination by an order of magnitude!
// All states inherit from "normal" state, there is no other inheirtance, i.e. hover+disabled only inherits from "normal", not from hover nor disabled.
// However, cascading still works, so resulting state will be result of merging of all relevant states/variants
// normal: '' // normal state is implicitly added, it is always included
toggled: '.toggled',
pressed: ':active',
hover: ':hover:not(:disabled)',
focused: ':focus-within',
disabled: ':disabled'
},
// Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
variants: {
// Variants save on computation time since adding new variant just adds one more "set".
// normal: '', // you can override normal variant, it will be appenended to the main class
danger: '.danger'
// Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants.
// This (currently) is further multipled by number of places where component can exist.
},
// This lists all other components that can possibly exist within one. Recursion is currently not supported (and probably won't be supported ever).
validInnerComponents: [
'Text',
'Icon'
],
// Default rules, used as "default theme", essentially.
defaultRules: [
{
component: 'Root',
directives: {
'--defaultButtonHoverGlow': 'shadow | 0 0 4 --text',
'--defaultButtonShadow': 'shadow | 0 0 2 #000000',
'--defaultButtonBevel': 'shadow | $borderSide(#FFFFFF, top, 0.2) | $borderSide(#000000, bottom, 0.2)',
'--pressedButtonBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2)| $borderSide(#000000, top, 0.2)'
}
},
{
// component: 'Button', // no need to specify components every time unless you're specifying how other component should look
// like within it
directives: {
background: '--fg',
shadow: ['--defaultButtonShadow', '--defaultButtonBevel'],
roundness: 3
}
},
{
state: ['hover'],
directives: {
shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
}
},
{
state: ['pressed'],
directives: {
shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
}
},
{
state: ['hover', 'pressed'],
directives: {
shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
}
},
{
state: ['toggled'],
directives: {
background: '--inheritedBackground,-14.2',
shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
}
},
{
state: ['toggled', 'hover'],
directives: {
background: '--inheritedBackground,-14.2',
shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
}
},
{
state: ['disabled'],
directives: {
background: '$blend(--inheritedBackground, 0.25, --parent)',
shadow: ['--defaultButtonBevel']
}
},
{
component: 'Text',
parent: {
component: 'Button',
state: ['disabled']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
}
]
}

View File

@ -0,0 +1,96 @@
export default {
name: 'ButtonUnstyled',
selector: '.button-unstyled',
states: {
toggled: '.toggled',
disabled: ':disabled',
hover: ':hover:not(:disabled)',
focused: ':focus-within'
},
validInnerComponents: [
'Text',
'Icon',
'Badge'
],
defaultRules: [
{
directives: {
background: '#ffffff',
opacity: 0,
shadow: []
}
},
{
component: 'Icon',
parent: {
component: 'ButtonUnstyled',
state: ['hover']
},
directives: {
textColor: '--parent--text'
}
},
{
component: 'Icon',
parent: {
component: 'ButtonUnstyled',
state: ['toggled']
},
directives: {
textColor: '--parent--text'
}
},
{
component: 'Icon',
parent: {
component: 'ButtonUnstyled',
state: ['toggled', 'hover']
},
directives: {
textColor: '--parent--text'
}
},
{
component: 'Icon',
parent: {
component: 'ButtonUnstyled',
state: ['toggled', 'focused']
},
directives: {
textColor: '--parent--text'
}
},
{
component: 'Icon',
parent: {
component: 'ButtonUnstyled',
state: ['toggled', 'focused', 'hover']
},
directives: {
textColor: '--parent--text'
}
},
{
component: 'Text',
parent: {
component: 'ButtonUnstyled',
state: ['disabled']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
},
{
component: 'Icon',
parent: {
component: 'ButtonUnstyled',
state: ['disabled']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
}
]
}

View File

@ -11,15 +11,15 @@
.chat-view-body { .chat-view-body {
box-sizing: border-box; box-sizing: border-box;
background-color: var(--chatBg, $fallback--bg);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
overflow: visible; overflow: visible;
min-height: calc(100vh - var(--navbar-height)); min-height: calc(100vh - var(--navbar-height));
margin: 0; margin: 0;
border-radius: 10px 10px 0 0; border-radius: var(--roundness);
border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
&::after { &::after {
border-radius: 0; border-radius: 0;
@ -37,8 +37,6 @@
.footer { .footer {
position: sticky; position: sticky;
bottom: 0; bottom: 0;
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
z-index: 1; z-index: 1;
} }
@ -61,8 +59,6 @@
position: absolute; position: absolute;
right: 1.3em; right: 1.3em;
top: -3.2em; top: -3.2em;
background-color: $fallback--fg;
background-color: var(--btn, $fallback--fg);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -79,12 +75,6 @@
visibility: visible; visibility: visible;
} }
i {
font-size: 1em;
color: $fallback--text;
color: var(--text, $fallback--text);
}
.unread-message-count { .unread-message-count {
font-size: 0.8em; font-size: 0.8em;
left: 50%; left: 50%;

View File

@ -0,0 +1,19 @@
export default {
name: 'Chat',
selector: '.chat-message-list',
validInnerComponents: [
'Text',
'Link',
'Icon',
'Avatar',
'ChatMessage'
],
defaultRules: [
{
directives: {
background: '--bg',
blur: '5px'
}
}
]
}

View File

@ -26,7 +26,7 @@
</div> </div>
</div> </div>
<div <div
class="message-list" class="chat-message-list message-list"
:style="{ height: scrollableContainerHeight }" :style="{ height: scrollableContainerHeight }"
> >
<template v-if="!errorLoadingChat"> <template v-if="!errorLoadingChat">
@ -61,7 +61,7 @@
<FAIcon icon="chevron-down" /> <FAIcon icon="chevron-down" />
<div <div
v-if="newMessageCount" v-if="newMessageCount"
class="badge badge-notification unread-chat-count unread-message-count" class="badge -notification unread-chat-count unread-message-count"
> >
{{ newMessageCount }} {{ newMessageCount }}
</div> </div>
@ -95,6 +95,5 @@
<script src="./chat.js"></script> <script src="./chat.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
@import "./chat"; @import "./chat";
</style> </style>

View File

@ -45,8 +45,6 @@
<script src="./chat_list.js"></script> <script src="./chat_list.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.chat-list { .chat-list {
min-height: 25em; min-height: 25em;
margin-bottom: 0; margin-bottom: 0;
@ -57,8 +55,7 @@
font-size: 1.2em; font-size: 1.2em;
display: flex; display: flex;
justify-content: center; justify-content: center;
color: $fallback--text; color: var(--textFaint);
color: var(--faint, $fallback--text);
} }
</style> </style>

View File

@ -1,8 +1,6 @@
.chat-list-item { .chat-list-item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 0.75em;
height: 5em;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
@ -11,11 +9,6 @@
outline: none; outline: none;
} }
&:hover {
background-color: var(--selectedPost, $fallback--lightBg);
box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
}
.chat-list-item-left { .chat-list-item-left {
margin-right: 1em; margin-right: 1em;
} }
@ -29,7 +22,7 @@
.heading { .heading {
width: 100%; width: 100%;
display: inline-flex; display: flex;
justify-content: space-between; justify-content: space-between;
line-height: 1em; line-height: 1em;
} }
@ -47,18 +40,17 @@
} }
.chat-preview { .chat-preview {
display: inline-flex; display: flex;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
margin: 0.35em 0; margin: 0.35em 0;
color: $fallback--text; color: var(--textFaint);
color: var(--faint, $fallback--text);
width: 100%; width: 100%;
} }
a { a {
color: var(--faintLink, $fallback--link); color: var(--linkFaint);
text-decoration: none; text-decoration: none;
pointer-events: none; pointer-events: none;
} }
@ -73,11 +65,6 @@
} }
} }
.Avatar {
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
}
.chat-preview-body { .chat-preview-body {
--emoji-size: 1.4em; --emoji-size: 1.4em;

View File

@ -36,7 +36,7 @@
/> />
<div <div
v-if="chat.unread > 0" v-if="chat.unread > 0"
class="badge badge-notification unread-chat-count" class="badge -notification unread-chat-count"
> >
{{ chat.unread }} {{ chat.unread }}
</div> </div>
@ -48,6 +48,5 @@
<script src="./chat_list_item.js"></script> <script src="./chat_list_item.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
@import "./chat_list_item"; @import "./chat_list_item";
</style> </style>

View File

@ -1,5 +1,3 @@
@import "../../variables";
.chat-message-wrapper { .chat-message-wrapper {
&.hovered-message-chain { &.hovered-message-chain {
.animated.Avatar { .animated.Avatar {
@ -27,12 +25,6 @@
.menu-icon { .menu-icon {
cursor: pointer; cursor: pointer;
&:hover,
.extra-button-popover.open & {
color: $fallback--text;
color: var(--text, $fallback--text);
}
} }
.popover { .popover {
@ -61,10 +53,12 @@
} }
.status { .status {
border-radius: $fallback--chatMessageRadius; background-color: var(--background);
border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius); color: var(--text);
border-radius: var(--roundness);
display: flex; display: flex;
padding: 0.75em; padding: 0.75em;
border: 1px solid var(--border);
} }
.created-at { .created-at {
@ -97,8 +91,7 @@
.error { .error {
.status-content.media-body, .status-content.media-body,
.created-at { .created-at {
color: $fallback--cRed; color: var(--badgeNotification);
color: var(--badgeNotification, $fallback--cRed);
} }
} }
@ -117,16 +110,6 @@
align-content: end; align-content: end;
justify-content: flex-end; justify-content: flex-end;
a {
color: var(--chatMessageOutgoingLink, $fallback--link);
}
.status {
color: var(--chatMessageOutgoingText, $fallback--text);
background-color: var(--chatMessageOutgoingBg, $fallback--lightBg);
border: 1px solid var(--chatMessageOutgoingBorder, --lightBg);
}
.chat-message-inner { .chat-message-inner {
align-items: flex-end; align-items: flex-end;
} }
@ -137,22 +120,6 @@
} }
.incoming { .incoming {
a {
color: var(--chatMessageIncomingLink, $fallback--link);
}
.status {
color: var(--chatMessageIncomingText, $fallback--text);
background-color: var(--chatMessageIncomingBg, $fallback--bg);
border: 1px solid var(--chatMessageIncomingBorder, --border);
}
.created-at {
a {
color: var(--chatMessageIncomingText, $fallback--text);
}
}
.chat-message-menu { .chat-message-menu {
left: 0.4rem; left: 0.4rem;
} }
@ -176,6 +143,5 @@
margin: 1.4em 0; margin: 1.4em 0;
font-size: 0.9em; font-size: 0.9em;
user-select: none; user-select: none;
color: $fallback--text; color: var(--textFaint);
color: var(--faintedText, $fallback--text);
} }

View File

@ -0,0 +1,30 @@
export default {
name: 'ChatMessage',
selector: '.chat-message',
variants: {
outgoing: '.outgoing'
},
validInnerComponents: [
'Text',
'Icon',
'Border',
'Button',
'RichContent',
'Attachment',
'PollGraph'
],
defaultRules: [
{
directives: {
background: '--bg, 2',
backgroundNoCssColor: 'yes'
}
},
{
variant: 'outgoing',
directives: {
background: '--bg, 5'
}
}
]
}

View File

@ -53,7 +53,7 @@
<template #content> <template #content>
<div class="dropdown-menu"> <div class="dropdown-menu">
<button <button
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
@click="deleteMessage" @click="deleteMessage"
> >
<FAIcon icon="times" /> {{ $t("chats.delete") }} <FAIcon icon="times" /> {{ $t("chats.delete") }}

View File

@ -16,11 +16,6 @@
padding-bottom: 0.7rem; padding-bottom: 0.7rem;
} }
.basic-user-card:hover {
cursor: pointer;
background-color: var(--selectedPost, $fallback--lightBg);
}
.go-back-button { .go-back-button {
text-align: center; text-align: center;
line-height: 1; line-height: 1;

View File

@ -16,27 +16,29 @@
/> />
</button> </button>
</div> </div>
<div class="input-wrap"> <div class="panel-body">
<div class="input-search"> <div class="input-wrap">
<FAIcon <div class="input-search">
class="search-icon fa-scale-110 fa-old-padding" <FAIcon
icon="search" class="search-icon fa-scale-110 fa-old-padding"
/> icon="search"
/>
</div>
<input
ref="search"
v-model="query"
class="input"
placeholder="Search people"
@input="onInput"
>
</div> </div>
<input <div class="member-list">
ref="search" <div
v-model="query" v-for="user in availableUsers"
placeholder="Search people" :key="user.id"
@input="onInput" class="list-item"
> @click.capture.prevent="goToChat(user)"
</div> >
<div class="member-list">
<div
v-for="user in availableUsers"
:key="user.id"
class="member"
>
<div @click.capture.prevent="goToChat(user)">
<BasicUserCard :user="user" /> <BasicUserCard :user="user" />
</div> </div>
</div> </div>
@ -46,6 +48,5 @@
<script src="./chat_new.js"></script> <script src="./chat_new.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
@import "./chat_new"; @import "./chat_new";
</style> </style>

View File

@ -26,8 +26,6 @@
<script src="./chat_title.js"></script> <script src="./chat_title.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.chat-title { .chat-title {
display: flex; display: flex;
overflow: hidden; overflow: hidden;
@ -54,8 +52,7 @@
margin-right: 0.5em; margin-right: 0.5em;
height: 1.5em; height: 1.5em;
width: 1.5em; width: 1.5em;
border-radius: $fallback--avatarAltRadius; border-radius: var(--roundness);
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
&.animated::before { &.animated::before {
display: none; display: none;

View File

@ -12,7 +12,7 @@
@change="$emit('update:modelValue', $event.target.checked)" @change="$emit('update:modelValue', $event.target.checked)"
> >
<i <i
class="checkbox-indicator" class="input -checkbox checkbox-indicator"
:aria-hidden="true" :aria-hidden="true"
@transitionend.capture="onTransitionEnd" @transitionend.capture="onTransitionEnd"
/> />
@ -54,7 +54,6 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
@import "../../mixins"; @import "../../mixins";
.checkbox { .checkbox {
@ -62,9 +61,15 @@ export default {
display: inline-block; display: inline-block;
min-height: 1.2em; min-height: 1.2em;
&-indicator { & > &-indicator {
/* Reset .input stuff */
padding: 0;
margin: 0;
position: relative; position: relative;
line-height: inherit;
display: inline;
padding-left: 1.2em; padding-left: 1.2em;
box-shadow: none;
} }
&-indicator::before { &-indicator::before {
@ -76,12 +81,9 @@ export default {
transition: color 200ms; transition: color 200ms;
width: 1.1em; width: 1.1em;
height: 1.1em; height: 1.1em;
border-radius: $fallback--checkboxRadius; border-radius: var(--roundness);
border-radius: var(--checkboxRadius, $fallback--checkboxRadius); box-shadow: var(--shadow);
box-shadow: 0 0 2px black inset; background-color: var(--background);
box-shadow: var(--inputShadow);
background-color: $fallback--fg;
background-color: var(--input, $fallback--fg);
vertical-align: top; vertical-align: top;
text-align: center; text-align: center;
line-height: 1.1em; line-height: 1.1em;
@ -98,21 +100,18 @@ export default {
} }
.label { .label {
color: $fallback--faint; color: var(--text);
color: var(--faint, $fallback--faint);
} }
} }
input[type="checkbox"] { input[type="checkbox"] {
&:checked + .checkbox-indicator::before { &:checked + .checkbox-indicator::before {
color: $fallback--text; color: var(--text);
color: var(--inputText, $fallback--text);
} }
&:indeterminate + .checkbox-indicator::before { &:indeterminate + .checkbox-indicator::before {
content: ""; content: "";
color: $fallback--text; color: var(--text);
color: var(--inputText, $fallback--text);
} }
} }

View File

@ -1,5 +1,3 @@
@import "../../variables";
.color-input { .color-input {
display: inline-flex; display: inline-flex;
@ -11,9 +9,8 @@
padding: 0.2em 8px; padding: 0.2em 8px;
input { input {
color: var(--text);
background: none; background: none;
color: $fallback--lightText;
color: var(--inputText, $fallback--lightText);
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -23,21 +20,38 @@
min-width: 3em; min-width: 3em;
padding: 0; padding: 0;
} }
}
&.nativeColor { .nativeColor {
flex: 0 0 2em; cursor: pointer;
min-width: 2em; flex: 0 0 auto;
align-self: stretch;
min-height: 100%; input {
appearance: none;
max-width: 0;
min-width: 0;
max-height: 0;
/* stylelint-disable-next-line declaration-no-important */
opacity: 0 !important;
} }
} }
.computedIndicator, .computedIndicator,
.validIndicator,
.invalidIndicator,
.transparentIndicator { .transparentIndicator {
flex: 0 0 2em; flex: 0 0 2em;
margin: 0 0.5em;
min-width: 2em; min-width: 2em;
align-self: stretch; align-self: stretch;
min-height: 100%; min-height: 1.5em;
border-radius: var(--roundness);
}
.invalidIndicator {
background: transparent;
box-sizing: border-box;
border: 2px solid var(--cRed);
} }
.transparentIndicator { .transparentIndicator {
@ -58,11 +72,13 @@
&::after { &::after {
top: 0; top: 0;
left: 0; left: 0;
border-top-left-radius: var(--roundness);
} }
&::before { &::before {
bottom: 0; bottom: 0;
right: 0; right: 0;
border-bottom-right-radius: var(--roundness);
} }
} }
} }

View File

@ -25,30 +25,51 @@
:disabled="!present || disabled" :disabled="!present || disabled"
@input="$emit('update:modelValue', $event.target.value)" @input="$emit('update:modelValue', $event.target.value)"
> >
<input
v-if="validColor"
:id="name"
class="nativeColor unstyled"
type="color"
:value="modelValue || fallback"
:disabled="!present || disabled"
@input="$emit('update:modelValue', $event.target.value)"
>
<div <div
v-if="transparentColor" v-if="validColor"
class="validIndicator"
:style="{backgroundColor: modelValue || fallback}"
/>
<div
v-else-if="transparentColor"
class="transparentIndicator" class="transparentIndicator"
/> />
<div <div
v-if="computedColor" v-else-if="computedColor"
class="computedIndicator" class="computedIndicator"
:style="{backgroundColor: fallback}" :style="{backgroundColor: fallback}"
/> />
<div
v-else
class="invalidIndicator"
/>
<label class="nativeColor">
<FAIcon icon="eye-dropper" />
<input
:id="name"
class="unstyled"
type="color"
:value="modelValue || fallback"
:disabled="!present || disabled"
@input="$emit('update:modelValue', $event.target.value)"
>
</label>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Checkbox from '../checkbox/checkbox.vue' import Checkbox from '../checkbox/checkbox.vue'
import { hex2rgb } from '../../services/color_convert/color_convert.js' import { hex2rgb } from '../../services/color_convert/color_convert.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faEyeDropper
} from '@fortawesome/free-solid-svg-icons'
library.add(
faEyeDropper
)
export default { export default {
components: { components: {
Checkbox Checkbox
@ -108,12 +129,3 @@ export default {
} }
</script> </script>
<style lang="scss" src="./color_input.scss"></style> <style lang="scss" src="./color_input.scss"></style>
<style lang="scss">
.color-control {
input.text-input {
max-width: 7em;
flex: 1;
}
}
</style>

View File

@ -28,7 +28,10 @@
class="rightside-button" class="rightside-button"
/> />
</div> </div>
<div class="conversation-body panel-body"> <div
class="conversation-body"
:class="{ 'panel-body': isExpanded }"
>
<div <div
v-if="isTreeView" v-if="isTreeView"
class="thread-body" class="thread-body"
@ -203,6 +206,7 @@
</div> </div>
<div <div
v-else v-else
class="Conversation -hidden"
:style="hiddenStyle" :style="hiddenStyle"
/> />
</template> </template>
@ -210,14 +214,17 @@
<script src="./conversation.js"></script> <script src="./conversation.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.Conversation { .Conversation {
z-index: 1; z-index: 1;
&.-hidden {
background: var(--__panel-background);
backdrop-filter: var(--__panel-backdrop-filter);
}
.conversation-dive-to-top-level-box { .conversation-dive-to-top-level-box {
padding: var(--status-margin, $status-margin); padding: var(--status-margin);
border-bottom: 1px solid var(--border, $fallback--border); border-bottom: 1px solid var(--border);
border-radius: 0; border-radius: 0;
/* Make the button stretch along the whole row */ /* Make the button stretch along the whole row */
@ -227,20 +234,22 @@
} }
.thread-ancestors { .thread-ancestors {
margin-left: var(--status-margin, $status-margin); margin-left: var(--status-margin);
border-left: 2px solid var(--border, $fallback--border); border-left: 2px solid var(--border);
} }
.thread-ancestor.-faded .StatusContent { .thread-ancestor.-faded .RichContent {
--link: var(--faintLink); /* stylelint-disable declaration-no-important */
--text: var(--faint); --text: var(--textFaint) !important;
--link: var(--linkFaint) !important;
color: var(--text); --funtextGreentext: var(--funtextGreentextFaint) !important;
--funtextCyantext: var(--funtextCyantextFaint) !important;
/* stylelint-enable declaration-no-important */
} }
.thread-ancestor-dive-box { .thread-ancestor-dive-box {
padding-left: var(--status-margin, $status-margin); padding-left: var(--status-margin);
border-bottom: 1px solid var(--border, $fallback--border); border-bottom: 1px solid var(--border);
border-radius: 0; border-radius: 0;
/* Make the button stretch along the whole row */ /* Make the button stretch along the whole row */
@ -253,16 +262,17 @@
} }
.thread-ancestor-dive-box-inner { .thread-ancestor-dive-box-inner {
padding: var(--status-margin, $status-margin); padding: var(--status-margin);
} }
.conversation-status { .conversation-status {
border-bottom: 1px solid var(--border, $fallback--border); border-bottom: 1px solid var(--border);
border-radius: 0; border-radius: 0;
} }
.thread-ancestor-has-other-replies .conversation-status, .thread-ancestor-has-other-replies .conversation-status,
&:last-child .conversation-status, &:last-child:not(.-expanded) .conversation-status,
&.-expanded .conversation-status:last-child,
.thread-ancestor:last-child .conversation-status, .thread-ancestor:last-child .conversation-status,
.thread-ancestor:last-child .thread-ancestor-dive-box, .thread-ancestor:last-child .thread-ancestor-dive-box,
&.-expanded .thread-tree .conversation-status { &.-expanded .thread-tree .conversation-status {
@ -270,20 +280,36 @@
} }
.thread-ancestors + .thread-tree > .conversation-status { .thread-ancestors + .thread-tree > .conversation-status {
border-top: 1px solid var(--border, $fallback--border); border-top: 1px solid var(--border);
} }
/* expanded conversation in timeline */ /* expanded conversation in timeline */
&.status-fadein.-expanded .thread-body { &.status-fadein.-expanded .thread-body {
border-left: 4px solid $fallback--cRed; border-left: 4px solid var(--cRed);
border-left-color: var(--cRed, $fallback--cRed); border-radius: var(--roundness);
border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius; border-top-left-radius: 0;
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius); border-top-right-radius: 0;
border-bottom: 1px solid var(--border, $fallback--border); border-bottom: 1px solid var(--border);
} }
&.-expanded.status-fadein { &.-expanded.status-fadein {
margin: calc(var(--status-margin, $status-margin) / 2); --___margin: calc(var(--status-margin) / 2);
background: var(--background);
margin: var(--___margin);
&::before {
z-index: -1;
content: "";
display: block;
position: absolute;
top: calc(var(--___margin) * -1);
bottom: calc(var(--___margin) * -1);
left: calc(var(--___margin) * -1);
right: calc(var(--___margin) * -1);
background: var(--background);
backdrop-filter: var(--__panel-backdrop-filter);
}
} }
} }
</style> </style>

View File

@ -1,5 +1,3 @@
@import "../../variables";
.DesktopNav { .DesktopNav {
width: 100%; width: 100%;
z-index: var(--ZI_navbar); z-index: var(--ZI_navbar);
@ -9,7 +7,7 @@
} }
a { a {
color: var(--topBarLink, $fallback--link); color: var(--link);
} }
.inner-nav { .inner-nav {
@ -54,27 +52,7 @@
.button-default { .button-default {
&, &,
svg { svg {
color: $fallback--text; color: var(--text);
color: var(--btnTopBarText, $fallback--text);
}
&:active {
background-color: $fallback--fg;
background-color: var(--btnPressedTopBar, $fallback--fg);
color: $fallback--text;
color: var(--btnPressedTopBarText, $fallback--text);
}
&:disabled {
color: $fallback--text;
color: var(--btnDisabledTopBarText, $fallback--text);
}
&.toggled {
color: $fallback--text;
color: var(--btnToggledTopBarText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btnToggledTopBar, $fallback--fg);
} }
} }
@ -94,8 +72,7 @@
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
background-color: $fallback--fg; background-color: var(--text);
background-color: var(--topBarText, $fallback--fg);
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -116,8 +93,7 @@
text-align: center; text-align: center;
.svg-inline--fa { .svg-inline--fa {
color: $fallback--link; color: var(--link);
color: var(--topBarLink, $fallback--link);
} }
} }

View File

@ -12,7 +12,7 @@
<slot name="header" /> <slot name="header" />
</div> </div>
</div> </div>
<div class="dialog-modal-content"> <div class="panel-body dialog-modal-content">
<slot name="default" /> <slot name="default" />
</div> </div>
<div class="dialog-modal-footer user-interactions panel-footer"> <div class="dialog-modal-footer user-interactions panel-footer">
@ -25,8 +25,6 @@
<script src="./dialog_modal.js"></script> <script src="./dialog_modal.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
// TODO: unify with other modals. // TODO: unify with other modals.
.dark-overlay { .dark-overlay {
&::before { &::before {
@ -54,8 +52,6 @@
z-index: 2001; z-index: 2001;
cursor: default; cursor: default;
display: block; display: block;
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
.dialog-modal-heading { .dialog-modal-heading {
.title { .title {
@ -66,18 +62,13 @@
.dialog-modal-content { .dialog-modal-content {
margin: 0; margin: 0;
padding: 1rem; padding: 1rem;
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
white-space: normal; white-space: normal;
} }
.dialog-modal-footer { .dialog-modal-footer {
margin: 0; margin: 0;
padding: 0.5em; padding: 0.5em;
background-color: $fallback--bg; border-top: 1px solid var(--border);
background-color: var(--bg, $fallback--bg);
border-top: 1px solid $fallback--border;
border-top: 1px solid var(--border, $fallback--border);
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;

View File

@ -1,7 +1,7 @@
<template> <template>
<div <div
ref="root" ref="root"
class="emoji-input" class="input emoji-input"
:class="{ 'with-picker': !hideEmojiButton }" :class="{ 'with-picker': !hideEmojiButton }"
> >
<slot <slot
@ -68,9 +68,9 @@
v-for="(suggestion, index) in suggestions" v-for="(suggestion, index) in suggestions"
:id="suggestionItemId(index)" :id="suggestionItemId(index)"
:key="index" :key="index"
class="autocomplete-item" class="menu-item autocomplete-item"
role="option" role="option"
:class="{ highlighted: index === highlighted }" :class="{ '-active': index === highlighted }"
:aria-label="autoCompleteItemLabel(suggestion)" :aria-label="autoCompleteItemLabel(suggestion)"
:aria-selected="index === highlighted" :aria-selected="index === highlighted"
@click.stop.prevent="onClick($event, suggestion)" @click.stop.prevent="onClick($event, suggestion)"
@ -110,9 +110,8 @@
<script src="./emoji_input.js"></script> <script src="./emoji_input.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables"; .input.emoji-input {
padding: 0;
.emoji-input {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
@ -127,8 +126,7 @@
line-height: 24px; line-height: 24px;
&:hover i { &:hover i {
color: $fallback--text; color: var(--text);
color: var(--text, $fallback--text);
} }
} }
@ -145,6 +143,12 @@
input, input,
textarea { textarea {
flex: 1 0 auto; flex: 1 0 auto;
color: inherit;
/* stylelint-disable-next-line declaration-no-important */
background: none !important;
box-shadow: none;
border: none;
outline: none;
} }
&.with-picker input { &.with-picker input {
@ -179,26 +183,28 @@
position: absolute; position: absolute;
} }
&-item { &-item.menu-item {
display: flex; display: flex;
cursor: pointer; padding-top: 0;
padding: 0.2em 0.4em; padding-bottom: 0;
border-bottom: 1px solid rgb(0 0 0 / 40%);
height: 32px;
.image { .image {
width: 32px; width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
height: 32px; height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
line-height: 32px; line-height: var(--__line-height);
text-align: center; text-align: center;
font-size: 32px; margin-right: var(--__horizontal-gap);
margin-right: 4px;
img { img {
width: 32px; width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
height: 32px; height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
object-fit: contain; object-fit: contain;
} }
span {
font-size: var(--__line-height);
line-height: var(--__line-height);
}
} }
.label { .label {
@ -216,17 +222,6 @@
line-height: 9px; line-height: 9px;
} }
} }
&.highlighted {
background-color: $fallback--fg;
background-color: var(--selectedMenuPopover, $fallback--fg);
color: var(--selectedMenuPopoverText, $fallback--text);
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
}
} }
} }
</style> </style>

View File

@ -114,6 +114,7 @@ const EmojiPicker = {
groupsScrolledClass: 'scrolled-top', groupsScrolledClass: 'scrolled-top',
keepOpen: false, keepOpen: false,
customEmojiTimeout: null, customEmojiTimeout: null,
hideCustomEmojiInPicker: false,
// Lazy-load only after the first time `showing` becomes true. // Lazy-load only after the first time `showing` becomes true.
contentLoaded: false, contentLoaded: false,
groupRefs: {}, groupRefs: {},
@ -286,7 +287,7 @@ const EmojiPicker = {
return 0 return 0
}, },
allCustomGroups () { allCustomGroups () {
if (this.hideCustomEmoji) { if (this.hideCustomEmoji || this.hideCustomEmojiInPicker) {
return {} return {}
} }
const emojis = this.$store.getters.groupedCustomEmojis const emojis = this.$store.getters.groupedCustomEmojis

View File

@ -1,5 +1,3 @@
@import "../../variables";
$emoji-picker-header-height: 36px; $emoji-picker-header-height: 36px;
$emoji-picker-header-picture-width: 32px; $emoji-picker-header-picture-width: 32px;
$emoji-picker-header-picture-height: 32px; $emoji-picker-header-picture-height: 32px;
@ -10,15 +8,6 @@ $emoji-picker-emoji-size: 32px;
max-width: calc(100vw - 20px); // popover gives 10px margin from window edge max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: $fallback--bg;
background-color: var(--popover, $fallback--bg);
color: $fallback--link;
color: var(--popoverText, $fallback--link);
--faint: var(--popoverFaintText, $fallback--faint);
--faintLink: var(--popoverFaintLink, $fallback--faint);
--lightText: var(--popoverLightText, $fallback--lightText);
--icon: var(--popoverIcon, $fallback--icon);
&-header-image { &-header-image {
display: inline-flex; display: inline-flex;
@ -39,11 +28,16 @@ $emoji-picker-emoji-size: 32px;
} }
.keep-open, .keep-open,
.too-many-emoji { .too-many-emoji,
.hide-custom-emoji {
padding: 7px; padding: 7px;
line-height: normal; line-height: normal;
} }
.hide-custom-emoji {
padding-top: 0;
}
.too-many-emoji { .too-many-emoji {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -76,8 +70,7 @@ $emoji-picker-emoji-size: 32px;
.additional-tabs { .additional-tabs {
display: flex; display: flex;
border-left: 1px solid; border-left: 1px solid;
border-left-color: $fallback--icon; border-left-color: var(--border);
border-left-color: var(--icon, $fallback--icon);
padding-left: 7px; padding-left: 7px;
flex: 0 0 auto; flex: 0 0 auto;
} }
@ -104,13 +97,8 @@ $emoji-picker-emoji-size: 32px;
pointer-events: none; pointer-events: none;
} }
&.active { &.toggled {
border-bottom: 4px solid; border-bottom: 4px solid;
svg {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
} }
} }
} }

View File

@ -23,9 +23,9 @@
v-for="group in filteredEmojiGroups" v-for="group in filteredEmojiGroups"
:ref="setGroupRef('group-header-' + group.id)" :ref="setGroupRef('group-header-' + group.id)"
:key="group.id" :key="group.id"
class="emoji-tabs-item" class="button-unstyled emoji-tabs-item"
:class="{ :class="{
active: activeGroupView === group.id toggled: activeGroupView === group.id
}" }"
:title="group.text" :title="group.text"
role="button" role="button"
@ -52,8 +52,8 @@
class="additional-tabs" class="additional-tabs"
> >
<span <span
class="stickers-tab-icon additional-tabs-item" class="button-unstyled stickers-tab-icon additional-tabs-item"
:class="{active: showingStickers}" :class="{toggled: showingStickers}"
:title="$t('emoji.stickers')" :title="$t('emoji.stickers')"
@click.prevent="toggleStickers" @click.prevent="toggleStickers"
> >
@ -77,7 +77,7 @@
ref="search" ref="search"
v-model="keyword" v-model="keyword"
type="text" type="text"
class="form-control" class="input form-control"
:placeholder="$t('emoji.search_emoji')" :placeholder="$t('emoji.search_emoji')"
@input="$event.target.composing = false" @input="$event.target.composing = false"
> >
@ -142,6 +142,17 @@
{{ $t('emoji.keep_open') }} {{ $t('emoji.keep_open') }}
</Checkbox> </Checkbox>
</div> </div>
<div
v-if="!hideCustomEmoji"
class="hide-custom-emoji"
>
<Checkbox
v-model="hideCustomEmojiInPicker"
@change="onShowing"
>
{{ $t('emoji.hide_custom_emoji') }}
</Checkbox>
</div>
</div> </div>
<div <div
v-if="showingStickers" v-if="showingStickers"

View File

@ -72,7 +72,6 @@
<script src="./emoji_reactions.js"></script> <script src="./emoji_reactions.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
@import "../../mixins"; @import "../../mixins";
.EmojiReactions { .EmojiReactions {
@ -92,7 +91,6 @@
padding: 0; padding: 0;
.emoji-reaction-count-button { .emoji-reaction-count-button {
background-color: var(--btn);
margin: 0; margin: 0;
height: 100%; height: 100%;
border-top-left-radius: 0; border-top-left-radius: 0;
@ -102,11 +100,9 @@
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: $fallback--text;
color: var(--btnText, $fallback--text);
&.-picked-reaction { &.-picked-reaction {
border: 1px solid var(--accent, $fallback--link); border: 1px solid var(--accent);
margin-right: -1px; margin-right: -1px;
} }
} }
@ -149,18 +145,16 @@
} }
.svg-inline--fa { .svg-inline--fa {
color: $fallback--text; color: var(--text);
color: var(--btnText, $fallback--text);
} }
&.-picked-reaction { &.-picked-reaction {
border: 1px solid var(--accent, $fallback--link); border: 1px solid var(--accent);
margin-left: -1px; // offset the border, can't use inset shadows either margin-left: -1px; // offset the border, can't use inset shadows either
margin-right: -1px; margin-right: -1px;
.svg-inline--fa { .svg-inline--fa {
color: $fallback--link; color: var(--accent);
color: var(--accent, $fallback--link);
} }
} }
@ -176,8 +170,7 @@
@include focused-style { @include focused-style {
.svg-inline--fa { .svg-inline--fa {
color: $fallback--link; color: var(--accent);
color: var(--accent, $fallback--link);
} }
.focus-marker { .focus-marker {

View File

@ -12,13 +12,13 @@
> >
<template #content="{close}"> <template #content="{close}">
<div <div
:id="`popup-menu-${randomSeed}`"
class="dropdown-menu" class="dropdown-menu"
role="menu" role="menu"
:id="`popup-menu-${randomSeed}`"
> >
<button <button
v-if="canMute && !status.thread_muted" v-if="canMute && !status.thread_muted"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="muteConversation" @click.prevent="muteConversation"
> >
@ -29,7 +29,7 @@
</button> </button>
<button <button
v-if="canMute && status.thread_muted" v-if="canMute && status.thread_muted"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="unmuteConversation" @click.prevent="unmuteConversation"
> >
@ -40,7 +40,7 @@
</button> </button>
<button <button
v-if="!status.pinned && canPin" v-if="!status.pinned && canPin"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="pinStatus" @click.prevent="pinStatus"
@click="close" @click="close"
@ -52,7 +52,7 @@
</button> </button>
<button <button
v-if="status.pinned && canPin" v-if="status.pinned && canPin"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="unpinStatus" @click.prevent="unpinStatus"
@click="close" @click="close"
@ -65,7 +65,7 @@
<template v-if="canBookmark"> <template v-if="canBookmark">
<button <button
v-if="!status.bookmarked" v-if="!status.bookmarked"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="bookmarkStatus" @click.prevent="bookmarkStatus"
@click="close" @click="close"
@ -77,7 +77,7 @@
</button> </button>
<button <button
v-if="status.bookmarked" v-if="status.bookmarked"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="unbookmarkStatus" @click.prevent="unbookmarkStatus"
@click="close" @click="close"
@ -90,7 +90,7 @@
</template> </template>
<button <button
v-if="ownStatus && editingAvailable" v-if="ownStatus && editingAvailable"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="editStatus" @click.prevent="editStatus"
@click="close" @click="close"
@ -102,7 +102,7 @@
</button> </button>
<button <button
v-if="isEdited && editingAvailable" v-if="isEdited && editingAvailable"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="showStatusHistory" @click.prevent="showStatusHistory"
@click="close" @click="close"
@ -114,7 +114,7 @@
</button> </button>
<button <button
v-if="canDelete" v-if="canDelete"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="deleteStatus" @click.prevent="deleteStatus"
@click="close" @click="close"
@ -125,7 +125,7 @@
/><span>{{ $t("status.delete") }}</span> /><span>{{ $t("status.delete") }}</span>
</button> </button>
<button <button
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="copyLink" @click.prevent="copyLink"
@click="close" @click="close"
@ -137,7 +137,7 @@
</button> </button>
<a <a
v-if="!status.is_local" v-if="!status.is_local"
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
title="Source" title="Source"
:href="status.external_url" :href="status.external_url"
@ -149,7 +149,7 @@
/><span>{{ $t("status.external_source") }}</span> /><span>{{ $t("status.external_source") }}</span>
</a> </a>
<button <button
class="button-default dropdown-item dropdown-item-icon" class="menu-item dropdown-item dropdown-item-icon"
role="menuitem" role="menuitem"
@click.prevent="reportStatus" @click.prevent="reportStatus"
@click="close" @click="close"
@ -201,7 +201,6 @@
<script src="./extra_buttons.js"></script> <script src="./extra_buttons.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
@import "../../mixins"; @import "../../mixins";
.ExtraButtons { .ExtraButtons {
@ -211,8 +210,7 @@
margin: -10px; margin: -10px;
&:hover .svg-inline--fa { &:hover .svg-inline--fa {
color: $fallback--text; color: var(--text);
color: var(--text, $fallback--text);
} }
} }

View File

@ -80,8 +80,6 @@
<script src="./extra_notifications.js" /> <script src="./extra_notifications.js" />
<style lang="scss"> <style lang="scss">
@import "../../variables";
.ExtraNotifications { .ExtraNotifications {
width: 100%; width: 100%;
display: flex; display: flex;
@ -91,8 +89,7 @@
.notification { .notification {
width: 100%; width: 100%;
border-bottom: 1px solid; border-bottom: 1px solid;
border-color: $fallback--border; border-color: var(--border);
border-color: var(--border, $fallback--border);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;

View File

@ -65,7 +65,6 @@
<script src="./favorite_button.js"></script> <script src="./favorite_button.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
@import "../../mixins"; @import "../../mixins";
.FavoriteButton { .FavoriteButton {
@ -88,8 +87,7 @@
&:hover .svg-inline--fa, &:hover .svg-inline--fa,
&.-favorited .svg-inline--fa { &.-favorited .svg-inline--fa {
color: $fallback--cOrange; color: var(--cOrange);
color: var(--cOrange, $fallback--cOrange);
} }
@include unfocused-style { @include unfocused-style {

View File

@ -42,8 +42,6 @@
<script src="./flash.js"></script> <script src="./flash.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.Flash { .Flash {
display: inline-block; display: inline-block;
width: 100%; width: 100%;

View File

@ -14,7 +14,7 @@
v-if="typeof fallback !== 'undefined'" v-if="typeof fallback !== 'undefined'"
:id="name + '-o'" :id="name + '-o'"
:aria-labelledby="name + '-label'" :aria-labelledby="name + '-label'"
class="opt exlcude-disabled visible-for-screenreader-only" class="input -checkbox opt exlcude-disabled visible-for-screenreader-only"
type="checkbox" type="checkbox"
:checked="present" :checked="present"
@change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)" @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
@ -44,7 +44,7 @@
v-if="isCustom" v-if="isCustom"
:id="name" :id="name"
v-model="family" v-model="family"
class="custom-font" class="input custom-font"
type="text" type="text"
> >
</div> </div>
@ -53,8 +53,6 @@
<script src="./font_control.js"></script> <script src="./font_control.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.font-control { .font-control {
input.custom-font { input.custom-font {
min-width: 10em; min-width: 10em;

View File

@ -0,0 +1,40 @@
export default {
name: 'FunText',
selector: '/*fun-text*/',
virtual: true,
variants: {
greentext: '.greentext',
cyantext: '.cyantext'
},
states: {
faint: '.faint'
},
defaultRules: [
{
directives: {
textColor: '--text',
textAuto: 'preserve'
}
},
{
state: ['faint'],
directives: {
textOpacity: 0.5
}
},
{
variant: 'greentext',
directives: {
textColor: '--cGreen',
textAuto: 'preserve'
}
},
{
variant: 'cyantext',
directives: {
textColor: '--cBlue',
textAuto: 'preserve'
}
}
]
}

View File

@ -87,8 +87,6 @@
<script src='./gallery.js'></script> <script src='./gallery.js'></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.Gallery { .Gallery {
.gallery-rows { .gallery-rows {
display: flex; display: flex;

View File

@ -4,7 +4,7 @@
v-for="(notice, index) in notices" v-for="(notice, index) in notices"
:key="index" :key="index"
class="alert global-notice" class="alert global-notice"
:class="{ ['global-' + notice.level]: true }" :class="{ [notice.level]: true }"
> >
<div class="notice-message"> <div class="notice-message">
{{ $t(notice.messageKey, notice.messageArgs) }} {{ $t(notice.messageKey, notice.messageArgs) }}
@ -25,8 +25,6 @@
<script src="./global_notice_list.js"></script> <script src="./global_notice_list.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.global-notice-list { .global-notice-list {
position: fixed; position: fixed;
top: calc(var(--navbar-height) + 0.5em); top: calc(var(--navbar-height) + 0.5em);
@ -52,48 +50,8 @@
} }
} }
.global-error {
background-color: var(--alertPopupError, $fallback--cRed);
color: var(--alertPopupErrorText, $fallback--text);
.svg-inline--fa {
color: var(--alertPopupErrorText, $fallback--text);
}
}
.global-warning {
background-color: var(--alertPopupWarning, $fallback--cOrange);
color: var(--alertPopupWarningText, $fallback--text);
.svg-inline--fa {
color: var(--alertPopupWarningText, $fallback--text);
}
}
.global-success {
background-color: var(--alertPopupSuccess, $fallback--cGreen);
color: var(--alertPopupSuccessText, $fallback--text);
.svg-inline--fa {
color: var(--alertPopupSuccessText, $fallback--text);
}
}
.global-info {
background-color: var(--alertPopupNeutral, $fallback--fg);
color: var(--alertPopupNeutralText, $fallback--text);
.svg-inline--fa {
color: var(--alertPopupNeutralText, $fallback--text);
}
}
.close-notice { .close-notice {
padding-right: 0.2em; padding-right: 0.2em;
.svg-inline--fa:hover {
opacity: 0.6;
}
} }
} }
</style> </style>

View File

@ -0,0 +1,14 @@
export default {
name: 'Icon',
virtual: true,
selector: '.svg-inline--fa',
defaultRules: [
{
component: 'Icon',
directives: {
textColor: '$blend(--stack, 0.5, --parent--text)',
textAuto: 'no-auto'
}
}
]
}

View File

@ -41,7 +41,7 @@
<input <input
ref="input" ref="input"
type="file" type="file"
class="image-cropper-img-input" class="input image-cropper-img-input"
:accept="mimes" :accept="mimes"
> >
</div> </div>

View File

@ -3,6 +3,7 @@
<form> <form>
<input <input
ref="input" ref="input"
class="input"
type="file" type="file"
@change="change" @change="change"
> >

View File

@ -0,0 +1,60 @@
const hoverGlow = {
x: 0,
y: 0,
blur: 4,
spread: 0,
color: '--text',
alpha: 1
}
export default {
name: 'Input',
selector: '.input',
variant: {
checkbox: '.-checkbox',
radio: '.-radio'
},
states: {
disabled: ':disabled',
hover: ':hover:not(:disabled)',
focused: ':focus-within'
},
validInnerComponents: [
'Text'
],
defaultRules: [
{
component: 'Root',
directives: {
'--defaultInputBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2)| $borderSide(#000000, top, 0.2)'
}
},
{
variant: 'checkbox',
directives: {
roundness: 1
}
},
{
directives: {
'--font': 'generic | inherit',
background: '--fg, -5',
roundness: 3,
shadow: [{
x: 0,
y: 0,
blur: 2,
spread: 0,
color: '#000000',
alpha: 1
}, '--defaultInputBevel']
}
},
{
state: ['hover'],
directives: {
shadow: [hoverGlow, '--defaultInputBevel']
}
}
]
}

View File

@ -104,8 +104,6 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.interface-language-switcher { .interface-language-switcher {
.language-select { .language-select {
margin-right: 1em; margin-right: 1em;

View File

@ -33,8 +33,6 @@
<script src="./link-preview.js"></script> <script src="./link-preview.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.link-preview-card { .link-preview-card {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -51,8 +49,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
border-radius: $fallback--attachmentRadius; border-radius: var(--roundness);
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
} }
} }
@ -82,13 +79,10 @@
margin: 2em 0; margin: 2em 0;
} }
color: $fallback--text; color: var(--text);
color: var(--text, $fallback--text);
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-radius: $fallback--attachmentRadius; border-radius: var(--roundness);
border-radius: var(--attachmentRadius, $fallback--attachmentRadius); border-color: var(--border);
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
} }
</style> </style>

View File

@ -0,0 +1,24 @@
export default {
name: 'Link',
selector: 'a',
virtual: true,
states: {
faint: '.faint'
},
defaultRules: [
{
component: 'Link',
directives: {
textColor: '--link'
}
},
{
component: 'Link',
state: ['faint'],
directives: {
textOpacity: 0.5,
textOpacityMode: 'fake'
}
}
]
}

View File

@ -7,6 +7,7 @@
v-for="item in items" v-for="item in items"
:key="getKey(item)" :key="getKey(item)"
class="list-item" class="list-item"
:class="[getClass(item), nonInteractive ? '-non-interactive' : '']"
role="listitem" role="listitem"
> >
<slot <slot
@ -33,24 +34,15 @@ export default {
getKey: { getKey: {
type: Function, type: Function,
default: item => item.id default: item => item.id
},
getClass: {
type: Function,
default: item => ''
},
nonInteractive: {
type: Boolean,
default: false
} }
} }
} }
</script> </script>
<style lang="scss">
@import "../../variables";
.list {
&-item:not(:last-child) {
border-bottom: 1px solid;
border-bottom-color: $fallback--border;
border-bottom-color: var(--border, $fallback--border);
}
&-empty-content {
text-align: center;
padding: 10px;
}
}
</style>

View File

@ -0,0 +1,48 @@
export default {
name: 'ListItem',
selector: '.list-item',
states: {
active: '.-active',
hover: ':hover:not(.-non-interactive)'
},
validInnerComponents: [
'Text',
'Link',
'Icon',
'Border',
'Button',
'ButtonUnstyled',
'RichContent',
'Input',
'Avatar'
],
defaultRules: [
{
directives: {
background: '--bg',
opacity: 0
}
},
{
state: ['active'],
directives: {
background: '--inheritedBackground, 10',
opacity: 1
}
},
{
state: ['hover'],
directives: {
background: '--inheritedBackground, 10',
opacity: 1
}
},
{
state: ['hover', 'active'],
directives: {
background: '--inheritedBackground, 20',
opacity: 1
}
}
]
}

View File

@ -21,8 +21,6 @@
<script src="./lists_card.js"></script> <script src="./lists_card.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.list-card { .list-card {
display: flex; display: flex;
} }
@ -35,18 +33,6 @@
.button-list-edit { .button-list-edit {
margin: 0; margin: 0;
padding: 1em; padding: 1em;
color: $fallback--link; color: var(--link);
color: var(--link, $fallback--link);
&:hover {
background-color: $fallback--lightBg;
background-color: var(--selectedMenu, $fallback--lightBg);
color: $fallback--link;
color: var(--selectedMenuText, $fallback--link);
--faint: var(--selectedMenuFaintText, $fallback--faint);
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
--lightText: var(--selectedMenuLightText, $fallback--lightText);
}
} }
</style> </style>

View File

@ -36,6 +36,7 @@
id="list-edit-title" id="list-edit-title"
ref="title" ref="title"
v-model="titleDraft" v-model="titleDraft"
class="input"
> >
<button <button
v-if="id" v-if="id"
@ -164,8 +165,6 @@
<script src="./lists_edit.js"></script> <script src="./lists_edit.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.ListEdit { .ListEdit {
--panel-body-padding: 0.5em; --panel-body-padding: 0.5em;

View File

@ -10,6 +10,7 @@
<input <input
ref="search" ref="search"
v-model="query" v-model="query"
class="input"
:placeholder="$t('lists.search')" :placeholder="$t('lists.search')"
@input="onInput" @input="onInput"
> >
@ -27,8 +28,6 @@
<script src="./lists_user_search.js"></script> <script src="./lists_user_search.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.ListsUserSearch { .ListsUserSearch {
.input-wrap { .input-wrap {
display: flex; display: flex;

View File

@ -18,7 +18,7 @@
id="username" id="username"
v-model="user.username" v-model="user.username"
:disabled="loggingIn" :disabled="loggingIn"
class="form-control" class="input form-control"
:placeholder="$t('login.placeholder')" :placeholder="$t('login.placeholder')"
> >
</div> </div>
@ -29,7 +29,7 @@
ref="passwordInput" ref="passwordInput"
v-model="user.password" v-model="user.password"
:disabled="loggingIn" :disabled="loggingIn"
class="form-control" class="input form-control"
type="password" type="password"
> >
</div> </div>
@ -93,8 +93,6 @@
<script src="./login_form.js"></script> <script src="./login_form.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.login-form { .login-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

@ -36,8 +36,6 @@
<script src="./media_upload.js"></script> <script src="./media_upload.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.media-upload { .media-upload {
.hidden-input-file { .hidden-input-file {
display: none; display: none;

View File

@ -1,10 +1,7 @@
@import "../../variables";
.MentionLink { .MentionLink {
position: relative; position: relative;
white-space: normal; white-space: normal;
display: inline; display: inline;
color: var(--link);
word-break: normal; word-break: normal;
& .new, & .new,
@ -14,7 +11,7 @@
} }
.mention-avatar { .mention-avatar {
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); border-radius: var(--roundness);
width: 1.5em; width: 1.5em;
height: 1.5em; height: 1.5em;
vertical-align: middle; vertical-align: middle;
@ -61,8 +58,10 @@
} }
&.-has-selection { &.-has-selection {
color: var(--alertNeutralText, $fallback--text); --color: var(--selectionText);
background-color: var(--alertNeutral, $fallback--fg); --link: var(--selectionText);
background-color: var(--selectionBackground);
} }
.at { .at {
@ -102,7 +101,7 @@
} }
.serverName.-faded { .serverName.-faded {
color: var(--faintLink, $fallback--link); color: var(--linkFaint);
} }
} }

View File

@ -22,7 +22,7 @@
:class="classnames" :class="classnames"
> >
<a <a
class="short button-unstyled" class="short"
:class="{ '-with-tooltip': shouldShowTooltip }" :class="{ '-with-tooltip': shouldShowTooltip }"
:href="url" :href="url"
@click.prevent="onClick" @click.prevent="onClick"

View File

@ -22,13 +22,13 @@
/> />
</span><button </span><button
v-if="!expanded" v-if="!expanded"
class="button-unstyled showMoreLess" class="button-unstyled -link showMoreLess"
@click="toggleShowMore" @click="toggleShowMore"
> >
{{ $t('status.plus_more', { number: extraMentions.length }) }} {{ $t('status.plus_more', { number: extraMentions.length }) }}
</button><button </button><button
v-if="expanded" v-if="expanded"
class="button-unstyled showMoreLess" class="button-unstyled -link showMoreLess"
@click="toggleShowMore" @click="toggleShowMore"
> >
{{ $t('general.show_less') }} {{ $t('general.show_less') }}

View File

@ -0,0 +1,90 @@
export default {
name: 'MenuItem',
selector: '.menu-item',
validInnerComponents: [
'Text',
'Icon',
'Input',
'Border',
'ButtonUnstyled',
'Badge',
'Avatar'
],
states: {
hover: ':hover',
active: '.-active'
},
defaultRules: [
{
directives: {
background: '--bg',
opacity: 0
}
},
{
state: ['hover'],
directives: {
background: '$mod(--bg, 5)',
opacity: 1
}
},
{
state: ['active'],
directives: {
background: '$mod(--bg, 10)',
opacity: 1
}
},
{
state: ['active', 'hover'],
directives: {
background: '$mod(--bg, 15)',
opacity: 1
}
},
{
component: 'Text',
parent: {
component: 'MenuItem',
state: ['hover']
},
directives: {
textColor: '--link',
textAuto: 'no-preserve'
}
},
{
component: 'Text',
parent: {
component: 'MenuItem',
state: ['active']
},
directives: {
textColor: '--link',
textAuto: 'no-preserve'
}
},
{
component: 'Icon',
parent: {
component: 'MenuItem',
state: ['active']
},
directives: {
textColor: '--link',
textAuto: 'no-preserve'
}
},
{
component: 'Icon',
parent: {
component: 'MenuItem',
state: ['hover']
},
directives: {
textColor: '--link',
textAuto: 'no-preserve'
}
}
]
}

View File

@ -16,7 +16,7 @@
<input <input
id="code" id="code"
v-model="code" v-model="code"
class="form-control" class="input form-control"
> >
</div> </div>

View File

@ -18,7 +18,7 @@
<input <input
id="code" id="code"
v-model="code" v-model="code"
class="form-control" class="input form-control"
> >
</div> </div>

View File

@ -0,0 +1,41 @@
export default {
name: 'MobileDrawer',
selector: '.mobile-drawer',
validInnerComponents: [
'Text',
'Link',
'Icon',
'Border',
'Button',
'ButtonUnstyled',
'Input',
'PanelHeader',
'MenuItem',
'Notification',
'Alert',
'UserCard'
],
defaultRules: [
{
directives: {
background: '--bg',
backgroundNoCssColor: 'yes'
}
},
{
component: 'PanelHeader',
parent: { component: 'MobileDrawer' },
directives: {
background: '--fg',
shadow: [{
x: 0,
y: 0,
blur: 4,
spread: 0,
color: '#000000',
alpha: 0.6
}]
}
}
]
}

View File

@ -20,7 +20,7 @@
/> />
<div <div
v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount" v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount"
class="alert-dot" class="badge -dot -notification"
/> />
</button> </button>
<NavigationPins class="pins" /> <NavigationPins class="pins" />
@ -37,24 +37,24 @@
/> />
<div <div
v-if="unseenNotificationsCount" v-if="unseenNotificationsCount"
class="alert-dot" class="badge -dot -notification"
/> />
</button> </button>
</div> </div>
</nav> </nav>
<aside <aside
v-if="currentUser" v-if="currentUser"
class="mobile-notifications-drawer" class="mobile-notifications-drawer mobile-drawer"
:class="{ '-closed': !notificationsOpen }" :class="{ '-closed': !notificationsOpen }"
@touchstart.stop="notificationsTouchStart" @touchstart.stop="notificationsTouchStart"
@touchmove.stop="notificationsTouchMove" @touchmove.stop="notificationsTouchMove"
> >
<div class="mobile-notifications-header"> <div class="panel-heading mobile-notifications-header">
<span class="title"> <span class="title">
{{ $t('notifications.notifications') }} {{ $t('notifications.notifications') }}
<span <span
v-if="unseenCountBadgeText" v-if="unseenCountBadgeText"
class="badge badge-notification unseen-count" class="badge -notification unseen-count"
>{{ unseenCountBadgeText }}</span> >{{ unseenCountBadgeText }}</span>
</span> </span>
<span class="spacer" /> <span class="spacer" />
@ -123,8 +123,6 @@
<script src="./mobile_nav.js"></script> <script src="./mobile_nav.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.MobileNav { .MobileNav {
z-index: var(--ZI_navbar); z-index: var(--ZI_navbar);
@ -137,7 +135,7 @@
box-sizing: border-box; box-sizing: border-box;
a { a {
color: var(--topBarLink, $fallback--link); color: var(--link);
} }
} }
@ -165,19 +163,6 @@
display: flex; display: flex;
} }
.alert-dot {
border-radius: 100%;
height: 8px;
width: 8px;
position: absolute;
left: calc(50% - 4px);
top: calc(50% - 4px);
margin-left: 6px;
margin-top: -6px;
background-color: $fallback--cRed;
background-color: var(--badgeNotification, $fallback--cRed);
}
.mobile-notifications-drawer { .mobile-notifications-drawer {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
@ -185,13 +170,13 @@
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
box-shadow: 1px 1px 4px rgb(0 0 0 / 60%); box-shadow: var(--shadow);
box-shadow: var(--panelShadow);
transition-property: transform; transition-property: transform;
transition-duration: 0.25s; transition-duration: 0.25s;
transform: translateX(0); transform: translateX(0);
z-index: var(--ZI_navbar); z-index: var(--ZI_navbar);
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
background: var(--background);
&.-closed { &.-closed {
transform: translateX(100%); transform: translateX(100%);
@ -208,11 +193,7 @@
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
position: absolute; position: absolute;
color: var(--topBarText); box-shadow: var(--shadow);
background-color: $fallback--fg;
background-color: var(--topBar, $fallback--fg);
box-shadow: 0 0 4px rgb(0 0 0 / 60%);
box-shadow: var(--topBarShadow);
.spacer { .spacer {
flex: 1; flex: 1;
@ -238,10 +219,6 @@
height: calc(100vh - var(--navbar-height)); height: calc(100vh - var(--navbar-height));
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
color: $fallback--text;
color: var(--text, $fallback--text);
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
.notifications { .notifications {
padding: 0; padding: 0;

View File

@ -13,8 +13,6 @@
<script src="./mobile_post_status_button.js"></script> <script src="./mobile_post_status_button.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.MobilePostButton { .MobilePostButton {
&.button-default { &.button-default {
width: 5em; width: 5em;
@ -25,8 +23,6 @@
right: 1.5em; right: 1.5em;
// TODO: this needs its own color, it has to stand out enough and link color // TODO: this needs its own color, it has to stand out enough and link color
// is not very optimal for this particular use. // is not very optimal for this particular use.
background-color: $fallback--fg;
background-color: var(--btn, $fallback--fg);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -42,8 +38,7 @@
svg { svg {
font-size: 1.5em; font-size: 1.5em;
color: $fallback--text; color: var(--text);
color: var(--text, $fallback--text);
} }
} }

View File

@ -0,0 +1,9 @@
export default {
name: 'Modals',
selector: '.modal-view',
lazy: true,
validInnerComponents: [
'Panel'
],
defaultRules: []
}

View File

@ -12,13 +12,13 @@
<div class="dropdown-menu"> <div class="dropdown-menu">
<span v-if="canGrantRole"> <span v-if="canGrantRole">
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item menu-item"
@click="toggleRight(&quot;admin&quot;)" @click="toggleRight(&quot;admin&quot;)"
> >
{{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }} {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
</button> </button>
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item menu-item"
@click="toggleRight(&quot;moderator&quot;)" @click="toggleRight(&quot;moderator&quot;)"
> >
{{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }} {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
@ -31,14 +31,14 @@
</span> </span>
<button <button
v-if="canChangeActivationState" v-if="canChangeActivationState"
class="button-default dropdown-item" class="menu-item dropdown-item menu-item"
@click="toggleActivationStatus()" @click="toggleActivationStatus()"
> >
{{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }} {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
</button> </button>
<button <button
v-if="canDeleteAccount" v-if="canDeleteAccount"
class="button-default dropdown-item" class="menu-item dropdown-item menu-item"
@click="deleteUserDialog(true)" @click="deleteUserDialog(true)"
> >
{{ $t('user_card.admin_menu.delete_account') }} {{ $t('user_card.admin_menu.delete_account') }}
@ -50,74 +50,74 @@
/> />
<span v-if="canUseTagPolicy"> <span v-if="canUseTagPolicy">
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.FORCE_NSFW)" @click="toggleTag(tags.FORCE_NSFW)"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }" :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
/> />
{{ $t('user_card.admin_menu.force_nsfw') }} {{ $t('user_card.admin_menu.force_nsfw') }}
</button> </button>
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.STRIP_MEDIA)" @click="toggleTag(tags.STRIP_MEDIA)"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }" :class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
/> />
{{ $t('user_card.admin_menu.strip_media') }} {{ $t('user_card.admin_menu.strip_media') }}
</button> </button>
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.FORCE_UNLISTED)" @click="toggleTag(tags.FORCE_UNLISTED)"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }" :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
/> />
{{ $t('user_card.admin_menu.force_unlisted') }} {{ $t('user_card.admin_menu.force_unlisted') }}
</button> </button>
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.SANDBOX)" @click="toggleTag(tags.SANDBOX)"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }" :class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
/> />
{{ $t('user_card.admin_menu.sandbox') }} {{ $t('user_card.admin_menu.sandbox') }}
</button> </button>
<button <button
v-if="user.is_local" v-if="user.is_local"
class="button-default dropdown-item" class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)" @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }" :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
/> />
{{ $t('user_card.admin_menu.disable_remote_subscription') }} {{ $t('user_card.admin_menu.disable_remote_subscription') }}
</button> </button>
<button <button
v-if="user.is_local" v-if="user.is_local"
class="button-default dropdown-item" class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)" @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }" :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
/> />
{{ $t('user_card.admin_menu.disable_any_subscription') }} {{ $t('user_card.admin_menu.disable_any_subscription') }}
</button> </button>
<button <button
v-if="user.is_local" v-if="user.is_local"
class="button-default dropdown-item" class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.QUARANTINE)" @click="toggleTag(tags.QUARANTINE)"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }" :class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
/> />
{{ $t('user_card.admin_menu.quarantine') }} {{ $t('user_card.admin_menu.quarantine') }}
@ -166,8 +166,6 @@
<script src="./moderation_tools.js"></script> <script src="./moderation_tools.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.moderation-tools-popover { .moderation-tools-popover {
height: 100%; height: 100%;

View File

@ -227,6 +227,5 @@
<script src="./mrf_transparency_panel.js"></script> <script src="./mrf_transparency_panel.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
@import "./mrf_transparency_panel"; @import "./mrf_transparency_panel";
</style> </style>

View File

@ -37,7 +37,8 @@
</NavigationEntry> </NavigationEntry>
<div <div
v-show="showTimelines" v-show="showTimelines"
class="timelines-background" class="timelines-background menu-item-collapsible"
:class="{ '-expanded': showTimelines }"
> >
<div class="timelines"> <div class="timelines">
<NavigationEntry <NavigationEntry
@ -57,12 +58,11 @@
> >
<router-link <router-link
:title="$t('lists.manage_lists')" :title="$t('lists.manage_lists')"
class="extra-button" class="button-unstyled extra-button"
:to="{ name: 'lists' }" :to="{ name: 'lists' }"
@click.stop @click.stop
> >
<FAIcon <FAIcon
class="extra-button"
fixed-width fixed-width
icon="wrench" icon="wrench"
/> />
@ -75,7 +75,8 @@
</NavigationEntry> </NavigationEntry>
<div <div
v-show="showLists" v-show="showLists"
class="timelines-background" class="timelines-background menu-item-collapsible"
:class="{ '-expanded': showLists }"
> >
<ListsMenuContent <ListsMenuContent
:show-pin="editMode || forceEditMode" :show-pin="editMode || forceEditMode"
@ -102,12 +103,10 @@
<script src="./nav_panel.js"></script> <script src="./nav_panel.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.NavPanel { .NavPanel {
.panel { .panel {
overflow: hidden; overflow: hidden;
box-shadow: var(--panelShadow); box-shadow: var(--shadow);
} }
ul { ul {
@ -116,33 +115,6 @@
padding: 0; padding: 0;
} }
li {
position: relative;
border-bottom: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
}
> li {
&:first-child .menu-item {
border-top-right-radius: $fallback--panelRadius;
border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
border-top-left-radius: $fallback--panelRadius;
border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
}
&:last-child .menu-item {
border-bottom-right-radius: $fallback--panelRadius;
border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
border-bottom-left-radius: $fallback--panelRadius;
border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
}
}
li:last-child {
border: none;
}
.navigation-chevron { .navigation-chevron {
margin-left: 0.8em; margin-left: 0.8em;
margin-right: 0.8em; margin-right: 0.8em;
@ -156,16 +128,6 @@
.timelines-background { .timelines-background {
padding: 0 0 0 0.6em; padding: 0 0 0 0.6em;
background-color: $fallback--lightBg;
background-color: var(--selectedMenu, $fallback--lightBg);
border-bottom: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
}
.timelines {
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
} }
.nav-panel-heading { .nav-panel-heading {

View File

@ -1,7 +1,6 @@
<template> <template>
<OptionalRouterLink <OptionalRouterLink
v-slot="{ isActive, href, navigate } = {}" v-slot="{ isActive, href, navigate } = {}"
ass="ass"
:to="routeTo" :to="routeTo"
> >
<li <li
@ -11,7 +10,7 @@
> >
<component <component
:is="routeTo ? 'a' : 'button'" :is="routeTo ? 'a' : 'button'"
class="main-link button-unstyled" class="main-link"
:href="href" :href="href"
@click="navigate" @click="navigate"
> >
@ -35,7 +34,7 @@
<slot /> <slot />
<div <div
v-if="item.badgeGetter && getters[item.badgeGetter]" v-if="item.badgeGetter && getters[item.badgeGetter]"
class="badge badge-notification" class="badge -notification"
> >
{{ getters[item.badgeGetter] }} {{ getters[item.badgeGetter] }}
</div> </div>
@ -63,73 +62,53 @@
<script src="./navigation_entry.js"></script> <script src="./navigation_entry.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables"; .NavigationEntry.menu-item {
--__line-height: 2.5em;
--__horizontal-gap: 0.5em;
--__vertical-gap: 0.4em;
.NavigationEntry { padding: 0;
display: flex; display: flex;
box-sizing: border-box;
align-items: baseline; align-items: baseline;
height: 3.5em;
line-height: 3.5em;
padding: 0 1em;
width: 100%;
color: $fallback--link;
color: var(--link, $fallback--link);
.timelines-chevron { &[aria-expanded] {
margin-right: 0; padding-right: var(--__horizontal-gap);
} }
.main-link { .main-link {
line-height: var(--__line-height);
box-sizing: border-box;
flex: 1; flex: 1;
padding: var(--__vertical-gap) var(--__horizontal-gap);
} }
.menu-icon { .menu-icon {
margin-right: 0.8em; line-height: var(--__line-height);
padding: 0;
width: var(--__line-height);
margin-right: var(--__horizontal-gap);
}
.timelines-chevron {
line-height: var(--__line-height);
padding: 0;
width: var(--__line-height);
margin-right: 0;
} }
.extra-button { .extra-button {
width: 3em; line-height: var(--__line-height);
padding: 0;
width: var(--__line-height);
text-align: center; text-align: center;
&:last-child { &:last-child {
margin-right: -0.8em; margin-right: calc(-1 * var(--__horizontal-gap));
} }
} }
&:hover { .badge {
background-color: $fallback--lightBg; margin: 0 var(--__horizontal-gap);
background-color: var(--selectedMenu, $fallback--lightBg);
color: $fallback--link;
color: var(--selectedMenuText, $fallback--link);
--faint: var(--selectedMenuFaintText, $fallback--faint);
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
--lightText: var(--selectedMenuLightText, $fallback--lightText);
.menu-icon {
--icon: var(--text, $fallback--icon);
}
}
&.-active {
font-weight: bolder;
background-color: $fallback--lightBg;
background-color: var(--selectedMenu, $fallback--lightBg);
color: $fallback--text;
color: var(--selectedMenuText, $fallback--text);
--faint: var(--selectedMenuFaintText, $fallback--faint);
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
--lightText: var(--selectedMenuLightText, $fallback--lightText);
.menu-icon {
--icon: var(--text, $fallback--icon);
}
&:hover {
text-decoration: underline;
}
} }
} }
</style> </style>

View File

@ -3,7 +3,8 @@
<router-link <router-link
v-for="item in pinnedList" v-for="item in pinnedList"
:key="item.name" :key="item.name"
class="pinned-item" class="button-unstyled pinned-item"
active-class="toggled"
:to="getRouteTo(item)" :to="getRouteTo(item)"
:title="item.labelRaw || $t(item.label)" :title="item.labelRaw || $t(item.label)"
> >
@ -18,7 +19,7 @@
>{{ item.iconLetter }}</span> >{{ item.iconLetter }}</span>
<div <div
v-if="item.badgeGetter && getters[item.badgeGetter]" v-if="item.badgeGetter && getters[item.badgeGetter]"
class="alert-dot" class="badge -dot -notification"
/> />
</router-link> </router-link>
</span> </span>
@ -27,25 +28,12 @@
<script src="./navigation_pins.js"></script> <script src="./navigation_pins.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.NavigationPins { .NavigationPins {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
.alert-dot {
border-radius: 100%;
height: 0.5em;
width: 0.5em;
position: absolute;
right: calc(50% - 0.75em);
top: calc(50% - 0.5em);
background-color: $fallback--cRed;
background-color: var(--badgeNotification, $fallback--cRed);
}
.pinned-item { .pinned-item {
position: relative; position: relative;
flex: 1 0 3em; flex: 1 0 3em;
@ -60,15 +48,8 @@
margin: 0; margin: 0;
} }
&.router-link-active { &.toggled {
color: $fallback--text;
color: var(--panelText, $fallback--text);
border-bottom: 4px solid; border-bottom: 4px solid;
& .svg-inline--fa,
& .iconLetter {
color: inherit;
}
} }
} }
} }

View File

@ -1,13 +1,15 @@
@import "../../variables";
// TODO Copypaste from Status, should unify it somehow // TODO Copypaste from Status, should unify it somehow
.Notification { .Notification {
border-bottom: 1px solid; border-bottom: 1px solid;
border-color: $fallback--border; border-color: var(--border);
border-color: var(--border, $fallback--border);
word-wrap: break-word; word-wrap: break-word;
word-break: break-word; word-break: break-word;
&.Status {
/* stylelint-disable-next-line declaration-no-important */
background-color: transparent !important;
}
--emoji-size: 14px; --emoji-size: 14px;
&:hover { &:hover {
@ -71,28 +73,22 @@
} }
&.-type--repeat .type-icon { &.-type--repeat .type-icon {
color: $fallback--cGreen; color: var(--cGreen);
color: var(--cGreen, $fallback--cGreen);
} }
&.-type--follow .type-icon { &.-type--follow .type-icon {
color: $fallback--cBlue; color: var(--cBlue);
color: var(--cBlue, $fallback--cBlue);
} }
&.-type--follow-request .type-icon { &.-type--follow-request .type-icon {
color: $fallback--cBlue; color: var(--cBlue);
color: var(--cBlue, $fallback--cBlue);
} }
&.-type--like .type-icon { &.-type--like .type-icon {
color: orange; color: var(--cOrange);
color: $fallback--cOrange;
color: var(--cOrange, $fallback--cOrange);
} }
&.-type--move .type-icon { &.-type--move .type-icon {
color: $fallback--cBlue; color: var(--cBlue);
color: var(--cBlue, $fallback--cBlue);
} }
} }

View File

@ -0,0 +1,17 @@
export default {
name: 'Notification',
selector: '.Notification',
validInnerComponents: [
'Text',
'Link',
'Icon',
'Border',
'Button',
'ButtonUnstyled',
'RichContent',
'Input',
'Avatar',
'Attachment'
],
defaultRules: []
}

View File

@ -155,7 +155,7 @@
<router-link <router-link
v-if="notification.status" v-if="notification.status"
:to="{ name: 'conversation', params: { id: notification.status.id } }" :to="{ name: 'conversation', params: { id: notification.status.id } }"
class="timeago-link faint-link" class="timeago-link faint"
> >
<Timeago <Timeago
:time="notification.created_at" :time="notification.created_at"
@ -247,7 +247,6 @@
/> />
<template v-else> <template v-else>
<StatusContent <StatusContent
:class="{ faint: !statusExpanded }"
:compact="!statusExpanded" :compact="!statusExpanded"
:status="notification.status" :status="notification.status"
/> />

View File

@ -8,65 +8,65 @@
<template #content> <template #content>
<div class="dropdown-menu"> <div class="dropdown-menu">
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item"
@click="toggleNotificationFilter('likes')" @click="toggleNotificationFilter('likes')"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.likes }" :class="{ 'menu-checkbox-checked': filters.likes }"
/>{{ $t('settings.notification_visibility_likes') }} />{{ $t('settings.notification_visibility_likes') }}
</button> </button>
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item"
@click="toggleNotificationFilter('repeats')" @click="toggleNotificationFilter('repeats')"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.repeats }" :class="{ 'menu-checkbox-checked': filters.repeats }"
/>{{ $t('settings.notification_visibility_repeats') }} />{{ $t('settings.notification_visibility_repeats') }}
</button> </button>
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item"
@click="toggleNotificationFilter('follows')" @click="toggleNotificationFilter('follows')"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.follows }" :class="{ 'menu-checkbox-checked': filters.follows }"
/>{{ $t('settings.notification_visibility_follows') }} />{{ $t('settings.notification_visibility_follows') }}
</button> </button>
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item"
@click="toggleNotificationFilter('mentions')" @click="toggleNotificationFilter('mentions')"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.mentions }" :class="{ 'menu-checkbox-checked': filters.mentions }"
/>{{ $t('settings.notification_visibility_mentions') }} />{{ $t('settings.notification_visibility_mentions') }}
</button> </button>
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item"
@click="toggleNotificationFilter('emojiReactions')" @click="toggleNotificationFilter('emojiReactions')"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.emojiReactions }" :class="{ 'menu-checkbox-checked': filters.emojiReactions }"
/>{{ $t('settings.notification_visibility_emoji_reactions') }} />{{ $t('settings.notification_visibility_emoji_reactions') }}
</button> </button>
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item"
@click="toggleNotificationFilter('moves')" @click="toggleNotificationFilter('moves')"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.moves }" :class="{ 'menu-checkbox-checked': filters.moves }"
/>{{ $t('settings.notification_visibility_moves') }} />{{ $t('settings.notification_visibility_moves') }}
</button> </button>
<button <button
class="button-default dropdown-item" class="menu-item dropdown-item"
@click="toggleNotificationFilter('polls')" @click="toggleNotificationFilter('polls')"
> >
<span <span
class="menu-checkbox" class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.polls }" :class="{ 'menu-checkbox-checked': filters.polls }"
/>{{ $t('settings.notification_visibility_polls') }} />{{ $t('settings.notification_visibility_polls') }}
</button> </button>

View File

@ -1,5 +1,3 @@
@import "../../variables";
.Notifications { .Notifications {
&:not(.minimal) { &:not(.minimal) {
// a bit of a hack to allow scrolling below notifications // a bit of a hack to allow scrolling below notifications
@ -7,8 +5,7 @@
} }
.loadmore-error { .loadmore-error {
color: $fallback--text; color: var(--text);
color: var(--text, $fallback--text);
} }
.notification { .notification {
@ -25,7 +22,7 @@
&.unseen { &.unseen {
.notification-overlay { .notification-overlay {
background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px); background-image: linear-gradient(135deg, var(--badgeNotification) 4px, transparent 10px);
} }
} }
} }
@ -35,6 +32,11 @@
.notification { .notification {
box-sizing: border-box; box-sizing: border-box;
/* TODO cleanup this */
.Status {
flex: 1;
}
&:hover .animated.Avatar { &:hover .animated.Avatar {
canvas { canvas {
display: none; display: none;
@ -60,24 +62,17 @@
width: 32px; width: 32px;
height: 32px; height: 32px;
} }
.faint {
--link: var(--faintLink);
--text: var(--faint);
}
} }
.follow-request-accept { .follow-request-accept {
&:hover { &:hover {
color: $fallback--text; color: var(--text);
color: var(--text, $fallback--text);
} }
} }
.follow-request-reject { .follow-request-reject {
&:hover { &:hover {
color: $fallback--cRed; color: var(--cRed);
color: var(--cRed, $fallback--cRed);
} }
} }
@ -97,11 +92,6 @@
} }
} }
/* TODO cleanup this */
.Status {
flex: 1;
}
time { time {
white-space: nowrap; white-space: nowrap;
} }

View File

@ -18,7 +18,7 @@
{{ $t('notifications.notifications') }} {{ $t('notifications.notifications') }}
<span <span
v-if="unseenCountBadgeText" v-if="unseenCountBadgeText"
class="badge badge-notification unseen-count" class="badge -notification unseen-count"
>{{ unseenCountBadgeText }}</span> >{{ unseenCountBadgeText }}</span>
</div> </div>
<div <div
@ -85,7 +85,7 @@
</div> </div>
<button <button
v-else-if="!loading" v-else-if="!loading"
class="button-unstyled -link -fullwidth" class="button-unstyled -link text-center"
@click.prevent="fetchOlderNotifications()" @click.prevent="fetchOlderNotifications()"
> >
<div class="new-status-notification text-center"> <div class="new-status-notification text-center">

View File

@ -18,7 +18,7 @@
/> />
<input <input
:id="name" :id="name"
class="input-number" class="input input-number"
type="number" type="number"
:value="modelValue || fallback" :value="modelValue || fallback"
:disabled="!present || disabled" :disabled="!present || disabled"

View File

@ -0,0 +1,41 @@
export default {
name: 'Panel',
selector: '.panel',
validInnerComponents: [
'Text',
'Link',
'Icon',
'Border',
'Button',
'ButtonUnstyled',
'Input',
'PanelHeader',
'MenuItem',
'Post',
'Notification',
'Alert',
'UserCard',
'Chat',
'Attachment',
'Tab',
'ListItem'
],
defaultRules: [
{
directives: {
backgroundNoCssColor: 'yes',
background: '--bg',
roundness: 3,
blur: '5px',
shadow: [{
x: 1,
y: 1,
blur: 4,
spread: 0,
color: '#000000',
alpha: 0.6
}]
}
}
]
}

View File

@ -0,0 +1,24 @@
export default {
name: 'PanelHeader',
selector: '.panel-heading',
validInnerComponents: [
'Text',
'Link',
'Icon',
'Button',
'ButtonUnstyled',
'Badge',
'Alert',
'Avatar'
],
defaultRules: [
{
component: 'PanelHeader',
directives: {
backgroundNoCssColor: 'yes',
background: '--fg',
shadow: []
}
}
]
}

View File

@ -23,22 +23,18 @@ export default {}
</script> </script>
<style lang="scss"> <style lang="scss">
@import "src/variables";
.panel-loading { .panel-loading {
display: flex; display: flex;
height: 100%; height: 100%;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 2em; font-size: 2em;
color: $fallback--text; color: var(--text);
color: var(--text, $fallback--text);
.loading-text svg { .loading-text svg {
line-height: 0; line-height: 0;
vertical-align: middle; vertical-align: middle;
color: $fallback--text; color: var(--text);
color: var(--text, $fallback--text);
} }
} }
</style> </style>

View File

@ -30,7 +30,7 @@
<div v-else> <div v-else>
<p <p
v-if="passwordResetRequested" v-if="passwordResetRequested"
class="password-reset-required error" class="alert password-reset-required error"
> >
{{ $t('password_reset.password_reset_required') }} {{ $t('password_reset.password_reset_required') }}
</p> </p>
@ -43,7 +43,7 @@
v-model="user.email" v-model="user.email"
:disabled="isPending" :disabled="isPending"
:placeholder="$t('password_reset.placeholder')" :placeholder="$t('password_reset.placeholder')"
class="form-control" class="input form-control"
type="input" type="input"
> >
</div> </div>
@ -77,8 +77,6 @@
<script src="./password_reset.js"></script> <script src="./password_reset.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.password-reset-form { .password-reset-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -117,11 +115,6 @@
margin: 0.3em 0 1em; margin: 0.3em 0 1em;
} }
.password-reset-required {
background-color: var(--alertError, $fallback--alertError);
padding: 10px 0;
}
.notice-dismissible { .notice-dismissible {
padding-right: 2rem; padding-right: 2rem;
} }

Some files were not shown because too many files have changed in this diff Show More