gorb/frontend
4
0
Fork 0
Code Issues 7 Pull requests 3 Projects Releases Packages 1 Wiki Activity Actions

feat: more theme styling options, and description.css
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details

Browse source
This commit is contained in:
Twig 2025-07-07 21:00:42 +02:00
parent 8f06f25efe
commit d0fe0db374
No known key found for this signature in database
8 changed files with 40 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app.vue
View file

@ -33,7 +33,7 @@ body {
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
color: var(--text-color);
background: var(--optional-chat-background);
background: var(--optional-body-background);
background-color: var(--chat-background-color);
margin: 0;
}

3
components/MessageArea.vue
View file

@ -259,6 +259,7 @@ router.beforeEach((to, from, next) => {
margin-bottom: 1dvh;
margin-left: 1dvw;
margin-right: 1dvw;
background: var(--optional-message-box-background);
}
#message-form {
@ -268,11 +269,11 @@ router.beforeEach((to, from, next) => {
#message-box-input {
width: 80%;
background-color: var(--sidebar-background-color);
border: none;
color: inherit;
padding-left: 1dvw;
padding-right: 1dvw;
background-color: var(--chatbox-background-color);
}
#messages {

1
pages/servers/[serverId]/channels/[channelId].vue
View file

@ -95,6 +95,7 @@ function handleMemberClick(member: GuildMemberResponse) {
padding-left: 1dvw;
padding-right: 1dvw;
border-left: 1px solid var(--padding-color);
background: var(--optional-member-list-background);
}
#members-list {

1
public/themes/ash.css
View file

@ -7,6 +7,7 @@
--sidebar-background-color: #3e3a37;
--sidebar-highlighted-background-color: #46423b;
--topbar-background-color: #3a3733;
--chatbox-background-color: #3a3733
--padding-color: #e0e0e0;

1
public/themes/dark.css
View file

@ -7,6 +7,7 @@
--sidebar-background-color: #2e2a27;
--sidebar-highlighted-background-color: #36322b;
--topbar-background-color: #2a2723;
--chatbox-background-color: #2a2723
--padding-color: #484848;

28
public/themes/description.css Normal file
View file

@ -0,0 +1,28 @@
/* this is not a real theme, but rather a template for themes */
:root {
--text-color: #161518;
--secondary-text-color: #2b2930;
--chat-background-color: #80808000;
--chat-highlighted-background-color: #ffffff20;
--sidebar-background-color: #80808000;
--sidebar-highlighted-background-color: #ffffff20;
--topbar-background-color: #80808000;
--padding-color: #80808000;
--primary-color: #21b1ff80;
--primary-highlighted-color: #18a0df80;
--secondary-color: #ffd80080;
--secondary-highlighted-color: #dfb80080;
--accent-color: #ff218c80;
--accent-highlighted-color: #df1b6f80;
--optional-body-background: ; /* background element for the body */
--optional-chat-background: ; /* background element for the chat box */
--optional-topbar-background: ; /* background element for the topbar */
--optional-sidebar-background: ; /* background element for left server sidebar */
--optional-channel-list-background: ; /* background element for channel list and settings list */
--optional-member-list-background: ; /* background element for member list */
--optional-message-box-background: ; /* background element for message box */
}

1
public/themes/light.css
View file

@ -7,6 +7,7 @@
--sidebar-background-color: #dbd8d4;
--sidebar-highlighted-background-color: #d4d0ca;
--topbar-background-color: #dfdbd6;
--chatbox-background-color: #dfdbd6
--padding-color: #484848;

6
public/themes/rainbow-capitalism.css
View file

@ -7,6 +7,7 @@
--sidebar-background-color: #80808000;
--sidebar-highlighted-background-color: #ffffff20;
--topbar-background-color: #80808000;
--chatbox-background-color: #80808040;
--padding-color: #80808000;
@ -17,8 +18,11 @@
--accent-color: #ff218c80;
--accent-highlighted-color: #df1b6f80;
--optional-chat-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80);
/* --optional-body-background: background */
--optional-body-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80);
--optional-topbar-background: linear-gradient(-12.5deg, cyan, pink, white, pink, cyan);
--optional-sidebar-background: linear-gradient(90deg, #55cdfcd0, #f7a8b8d0, #ffffffd0, #f7a8b8d0, #55cdfcd0);
--optional-channel-list-background: linear-gradient(82deg, #d52c00b0, #e29688b0, #ffffffb0, #d27fa4b0, #a20062b0);
--optional-member-list-background: linear-gradient(3deg, #ff0080, #c8259d, #8c4799, #442e9f, #0032a0);
--optional-message-box-background: linear-gradient(3deg, #ff0080, #c8259d, #8c4799, #442e9f, #0032a0);
}