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

feat: Add theming, no settings menu yet
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details
ci/woodpecker/pr/build-and-publish Pipeline was successful
Details

Browse source
This commit is contained in:
JustTemmie 2025-07-02 23:50:09 +02:00
parent cca2c5ffd9
commit 8033fd27e1
Signed by: justtemmie
SSH key fingerprint: SHA256:nBO+OwpTkd8LYhe38PIqdxmDvkIg9Vw2EbrRZM97dkU
13 changed files with 96 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

19
components/Button.vue
View file

@ -18,8 +18,8 @@ const props = defineProps<{
.button {
cursor: pointer;
background-color: #b35719;
color: #ffffff;
background-color: var(--primary-color);
color: var(--text-color);
padding: 0.7dvh 1.2dvw;
font-size: 1.1em;
@ -30,15 +30,22 @@ const props = defineProps<{
display: inline-block;
}
.button:hover {
background-color: var(--primary-highlighted-color);
}
.scary-button {
background-color: red;
}
.scary-button:hover {
background-color: red;
}
.neutral-button {
background-color: grey;
background-color: var(--accent-color);
}
.neutral-button:hover {
background-color: var(--accent-highlighted-color);
}
.button:hover {
background-color: #934410;
}
</style>

2
components/Channel.vue
View file

@ -36,6 +36,6 @@ const isCurrentChannel = props.uuid == props.currentUuid;
}
.current-channel {
background-color: rgb(70, 70, 70);
background-color: var(--sidebar-highlighted-background-color);
}
</style>

4
components/Message.vue
View file

@ -88,7 +88,7 @@ onMounted(async () => {
}
.message:hover {
background-color: rgb(20, 20, 20);
background-color: var(--chat-highlighted-background-color);
}
.normal-message {
@ -142,7 +142,7 @@ onMounted(async () => {
.message-date {
font-size: .7em;
color: rgb(150, 150, 150);
color: var(--secondary-text-color);
cursor: default;
}

10
components/MessageArea.vue
View file

@ -251,7 +251,7 @@ router.beforeEach((to, from, next) => {
flex-direction: column;
justify-content: center;
align-content: center;
border: 1px solid rgb(70, 70, 70);
border: 1px solid var(--padding-color);
padding-bottom: 1dvh;
padding-top: 1dvh;
margin-bottom: 1dvh;
@ -266,7 +266,7 @@ router.beforeEach((to, from, next) => {
#message-box-input {
width: 80%;
background-color: rgb(50, 50, 50);
background-color: var(--sidebar-background-color);
border: none;
color: inherit;
padding-left: 1dvw;
@ -284,11 +284,13 @@ router.beforeEach((to, from, next) => {
#submit-button {
background-color: inherit;
border: none;
color: rgb(200, 200, 200);
color: var(--primary-color);
transition: color 100ms;
font-size: 1.5em;
}
#submit-button:hover {
color: rgb(255, 255, 255);
color: var(--primary-highlighted-color);
cursor: pointer;
}
</style>

4
components/Settings/UserSettings/Account.vue
View file

@ -145,8 +145,8 @@ const deleteAccount = async () => {
font-size: 1em;
border-radius: 8px;
border: none;
color: white;
background-color: #54361b;
color: var(--text-color);
background-color: var(--accent-color);
}
.profile-popup {

10
components/UserPopup.vue
View file

@ -1,7 +1,7 @@
<template>
<div id="profile-popup">
<img v-if="props.user.avatar" id="avatar" :src="props.user.avatar" alt="profile avatar">
<div id="cover-colour"></div>
<div id="cover-color"></div>
<div id="main-body">
<p id="display-name">
<strong>{{ props.user.display_name }}</strong>
@ -38,17 +38,17 @@ const props = defineProps<{
flex-direction: column;
}
#cover-colour {
#cover-color {
border-radius: 12px 12px 0 0;
min-height: 60px;
background-color: #442505;
background-color: var(--primary-color);
}
#main-body {
border-radius: 0 0 12px 12px;
padding: 12px;
min-height: 280px;
background-color: #4b3018;
background-color: var(--accent-color);
overflow-wrap: break-word;
hyphens: manual;
}
@ -75,7 +75,7 @@ const props = defineProps<{
}
#about-me {
background-color: #34200f;
background-color: var(--secondary-color);
border-radius: 12px;
margin-top: 32px;