undo the last 6 merges i fucked up
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
This commit is contained in:
parent
0afb269788
commit
323178af6b
14 changed files with 251 additions and 120 deletions
2
app.vue
2
app.vue
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ const props = defineProps<{
|
|||
background-color: var(--primary-color);
|
||||
color: var(--text-color);
|
||||
|
||||
padding: 0.7dvh 1.2dvw;
|
||||
padding: 0.4em 0.75em;
|
||||
font-size: 1.1em;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
|
|
|
|||
|
|
@ -23,14 +23,14 @@ const isCurrentChannel = props.uuid == props.currentUuid;
|
|||
.channel-list-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
padding-left: .5dvw;
|
||||
padding-right: .5dvw;
|
||||
padding-left: .25em;
|
||||
padding-right: .25em;
|
||||
}
|
||||
|
||||
.channel-list-link-container {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
height: 4dvh;
|
||||
height: 1.5em;
|
||||
white-space: nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -188,12 +188,12 @@ function getDayDifference(date1: Date, date2: Date) {
|
|||
|
||||
<style module>
|
||||
.message-text ul, h1, h2, h3, h4, h5, h6 {
|
||||
padding-top: 1dvh;
|
||||
padding-bottom: 1dvh;
|
||||
padding-top: .5em;
|
||||
padding-bottom: .5em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.message-text ul {
|
||||
padding-left: 2dvw;
|
||||
padding-left: 1em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,11 +9,28 @@
|
|||
</div>
|
||||
<div id="message-box" class="rounded-corners">
|
||||
<form id="message-form" @submit="sendMessage">
|
||||
<input v-model="messageInput" id="message-box-input" class="rounded-corners" type="text"
|
||||
name="message-input" autocomplete="off">
|
||||
<button id="submit-button" type="submit">
|
||||
<Icon name="lucide:send" />
|
||||
</button>
|
||||
<div id="message-box-left-elements">
|
||||
<span class="message-box-button">
|
||||
<Icon name="lucide:file-plus-2" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="message-textarea">
|
||||
<div id="message-textbox-input" class=""
|
||||
role="textbox" ref="messageTextboxInput"
|
||||
autocorrect="off" spellcheck="true" contenteditable="true"
|
||||
@keydown="handleTextboxKeyDown" @input="handleTextboxInput">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="message-box-right-elements">
|
||||
<button class="message-box-button" type="submit">
|
||||
<Icon name="lucide:send" />
|
||||
</button>
|
||||
<span class="message-box-button">
|
||||
<Icon name="lucide:image-play" />
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -106,11 +123,38 @@ function pushMessage(message: MessageResponse) {
|
|||
messages.value.push(message);
|
||||
}
|
||||
|
||||
function handleTextboxKeyDown(event: KeyboardEvent) {
|
||||
if (event.key === "Enter" && event.shiftKey && messageTextboxInput.value) {
|
||||
// this enters a newline, due to not preventing default
|
||||
} else if (event.key === "Enter") {
|
||||
event.preventDefault()
|
||||
sendMessage(event)
|
||||
}
|
||||
|
||||
adjustTextboxHeight()
|
||||
}
|
||||
|
||||
function handleTextboxInput() {
|
||||
if (messageTextboxInput.value) {
|
||||
messageInput.value = messageTextboxInput.value.innerText;
|
||||
}
|
||||
|
||||
adjustTextboxHeight()
|
||||
}
|
||||
|
||||
// this technically uses pixel units, but it's still set using dynamic units
|
||||
function adjustTextboxHeight() {
|
||||
if (messageTextboxInput.value && messageTextboxDisplay.value) {
|
||||
messageTextboxInput.value.style.height = "auto"
|
||||
messageTextboxInput.value.style.height = `${messageTextboxInput.value.scrollHeight}px`
|
||||
}
|
||||
}
|
||||
|
||||
const messages = ref<MessageResponse[]>([]);
|
||||
|
||||
const messageInput = ref<string>();
|
||||
|
||||
const messageInput = ref<string>("");
|
||||
const messagesElement = ref<HTMLDivElement>();
|
||||
const messageTextboxInput = ref<HTMLDivElement>();
|
||||
const messageTextboxDisplay = ref<HTMLDivElement>();
|
||||
|
||||
if (messagesRes) messages.value = messagesRes;
|
||||
|
||||
|
|
@ -158,14 +202,21 @@ if (accessToken && apiBase) {
|
|||
|
||||
function sendMessage(e: Event) {
|
||||
e.preventDefault();
|
||||
const message = {
|
||||
message: messageInput.value
|
||||
}
|
||||
console.log("message:", message);
|
||||
if (message.message) {
|
||||
if (messageInput.value && messageInput.value.trim() !== "") {
|
||||
const message = {
|
||||
message: messageInput.value.trim().replace(/\n/g, "<br>") // trim, and replace \n with <br>
|
||||
}
|
||||
|
||||
console.log("message:", message);
|
||||
ws.send(JSON.stringify(message));
|
||||
messageInput.value = "";
|
||||
console.log("MESSAGE SENT!!!");
|
||||
|
||||
// reset input field
|
||||
messageInput.value = ""
|
||||
if (messageTextboxInput.value) {
|
||||
messageTextboxInput.value.innerText = ""
|
||||
}
|
||||
|
||||
adjustTextboxHeight()
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -241,38 +292,63 @@ router.beforeEach((to, from, next) => {
|
|||
|
||||
<style scoped>
|
||||
#message-area {
|
||||
display: grid;
|
||||
grid-template-rows: 8fr 1fr;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 1dvw;
|
||||
padding-right: 1dvw;
|
||||
overflow: hidden;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#message-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
border: 1px solid var(--padding-color);
|
||||
padding-bottom: 1dvh;
|
||||
padding-top: 1dvh;
|
||||
margin-bottom: 1dvh;
|
||||
margin-bottom: 2dvh;
|
||||
margin-left: 1dvw;
|
||||
margin-right: 1dvw;
|
||||
|
||||
padding-left: 2%;
|
||||
padding-right: 2%;
|
||||
|
||||
align-items: center;
|
||||
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--padding-color);
|
||||
background-color: var(--chatbox-background-color);
|
||||
}
|
||||
|
||||
#message-form {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
gap: .55em;
|
||||
}
|
||||
|
||||
#message-box-input {
|
||||
width: 80%;
|
||||
background-color: var(--sidebar-background-color);
|
||||
#message-textarea {
|
||||
flex-grow: 1;
|
||||
min-height: 2.35em;
|
||||
}
|
||||
|
||||
#message-textbox-input {
|
||||
width: 100%;
|
||||
max-height: 50dvh;
|
||||
|
||||
padding: 0.5em 0;
|
||||
user-select: text;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: normal;
|
||||
border: none;
|
||||
color: inherit;
|
||||
padding-left: 1dvw;
|
||||
padding-right: 1dvw;
|
||||
background-color: #40404000; /* completely transparent colour */
|
||||
|
||||
text-align: left;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#message-box-left-elements, #message-box-right-elements {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#messages {
|
||||
|
|
@ -283,7 +359,7 @@ router.beforeEach((to, from, next) => {
|
|||
padding-right: 1dvw;
|
||||
}
|
||||
|
||||
#submit-button {
|
||||
.message-box-button {
|
||||
background-color: inherit;
|
||||
border: none;
|
||||
color: var(--primary-color);
|
||||
|
|
@ -291,7 +367,7 @@ router.beforeEach((to, from, next) => {
|
|||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
#submit-button:hover {
|
||||
.message-box-button:hover {
|
||||
color: var(--primary-highlighted-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,24 +3,28 @@
|
|||
<div :class="{ hidden: loading, visible: !loading }" id="client-root">
|
||||
<div id="homebar">
|
||||
<div class="homebar-item">
|
||||
main bar
|
||||
<marquee>
|
||||
gorb!!!!!
|
||||
</marquee>
|
||||
</div>
|
||||
</div>
|
||||
<div id="left-column">
|
||||
<NuxtLink id="home-button" href="/">
|
||||
<img class="sidebar-icon" src="/public/icon.svg"/>
|
||||
</NuxtLink>
|
||||
<div id="servers-list">
|
||||
<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
|
||||
<img v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
|
||||
<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
|
||||
<div id = "page-content">
|
||||
<div id="left-column">
|
||||
<NuxtLink id="home-button" href="/">
|
||||
<img class="sidebar-icon" src="/public/icon.svg"/>
|
||||
</NuxtLink>
|
||||
<div id="servers-list">
|
||||
<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
|
||||
<img v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
|
||||
<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<NuxtLink id="settings-menu" href="/settings">
|
||||
<Icon name="lucide:settings" class="sidebar-icon white" alt="Settings menu" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<NuxtLink id="settings-menu" href="/settings">
|
||||
<Icon name="lucide:settings" class="sidebar-icon white" alt="Settings menu" />
|
||||
</NuxtLink>
|
||||
<slot />
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -34,11 +38,10 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
|
|||
|
||||
<style>
|
||||
#client-root {
|
||||
/* border: 1px solid white; */
|
||||
height: 100dvh;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 4fr 18fr 4fr;
|
||||
grid-template-rows: 4dvh auto;
|
||||
width: 100dvw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -48,37 +51,59 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
|
|||
|
||||
.visible {
|
||||
opacity: 100%;
|
||||
transition-duration: 500ms;
|
||||
transition: opacity 500ms;
|
||||
}
|
||||
|
||||
#homebar {
|
||||
grid-row: 1;
|
||||
grid-column: 1 / -1;
|
||||
min-height: 4dvh;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
background: var(--optional-topbar-background);
|
||||
background-color: var(--topbar-background-color);
|
||||
border-bottom: 1px solid var(--padding-color);
|
||||
padding-left: 5dvw;
|
||||
padding-right: 5dvw;
|
||||
|
||||
}
|
||||
|
||||
#client-root>div:nth-child(-n+4) {
|
||||
border-bottom: 1px solid var(--padding-color);
|
||||
.homebar-item {
|
||||
width: 100dvw;
|
||||
}
|
||||
|
||||
#__nuxt {
|
||||
#page-content {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.grid-column {
|
||||
padding-top: 1dvh;
|
||||
#left-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .75em;
|
||||
padding-left: .25em;
|
||||
padding-right: .25em;
|
||||
border-right: 1px solid var(--padding-color);
|
||||
background: var(--optional-sidebar-background);
|
||||
background-color: var(--sidebar-background-color);
|
||||
padding-top: .5em;
|
||||
}
|
||||
|
||||
#home {
|
||||
padding-left: .5dvw;
|
||||
padding-right: .5dvw;
|
||||
#servers-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
width: 3.2rem;
|
||||
}
|
||||
|
||||
#middle-left-column {
|
||||
padding-left: .25em;
|
||||
padding-right: .25em;
|
||||
border-right: 1px solid var(--padding-color);
|
||||
min-width: 10em;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.sidebar-icon {
|
||||
|
|
@ -86,43 +111,14 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
|
|||
height: 3rem;
|
||||
}
|
||||
|
||||
#current-info {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
#left-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2dvh;
|
||||
padding-left: .5dvw;
|
||||
padding-right: .5dvw;
|
||||
border-right: 1px solid var(--padding-color);
|
||||
background: var(--optional-sidebar-background);
|
||||
background-color: var(--sidebar-background-color);
|
||||
padding-top: 1.5dvh;
|
||||
}
|
||||
|
||||
#middle-left-column {
|
||||
padding-left: 1dvw;
|
||||
padding-right: 1dvw;
|
||||
border-right: 1px solid var(--padding-color);
|
||||
}
|
||||
|
||||
#home-button {
|
||||
border-bottom: 1px solid var(--padding-color);
|
||||
padding-bottom: 1dvh;
|
||||
padding-bottom: .375em;
|
||||
}
|
||||
|
||||
#settings-menu {
|
||||
position: absolute;
|
||||
bottom: .25dvh
|
||||
}
|
||||
|
||||
#servers-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1dvh;
|
||||
bottom: .25em
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,6 +1,19 @@
|
|||
<template>
|
||||
<NuxtLayout>
|
||||
|
||||
<div id="left-bar">
|
||||
</div>
|
||||
<div id="middle-bar">
|
||||
<h1>
|
||||
Welcome to gorb :3
|
||||
</h1>
|
||||
<p>
|
||||
Click on a guild to the left to view a guild.
|
||||
<br>
|
||||
Or click the button in the bottom left to join a guild.
|
||||
</p>
|
||||
</div>
|
||||
<div id="right-bar">
|
||||
</div>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -83,36 +83,36 @@ function handleMemberClick(member: GuildMemberResponse) {
|
|||
<style>
|
||||
|
||||
#middle-left-column {
|
||||
padding-left: 1dvw;
|
||||
padding-right: 1dvw;
|
||||
padding-left: .5em;
|
||||
padding-right: .5em;
|
||||
border-right: 1px solid var(--padding-color);
|
||||
background: var(--optional-channel-list-background);
|
||||
background-color: var(--sidebar-background-color);
|
||||
}
|
||||
|
||||
#members-container {
|
||||
padding-top: 1dvh;
|
||||
padding-left: 1dvw;
|
||||
padding-right: 1dvw;
|
||||
width: 12rem;
|
||||
border-left: 1px solid var(--padding-color);
|
||||
background: var(--optional-member-list-background);
|
||||
}
|
||||
|
||||
#members-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
max-height: 92dvh;
|
||||
padding-left: 1dvw;
|
||||
padding-right: 1dvw;
|
||||
margin-top: 1dvh;
|
||||
padding-left: 1.25em;
|
||||
padding-right: 1.25em;
|
||||
padding-top: 0.75em;
|
||||
padding-bottom: 0.75em;
|
||||
max-height: calc(100% - 0.75em * 2); /* 100% - top and bottom */
|
||||
}
|
||||
|
||||
.member-item {
|
||||
display: grid;
|
||||
grid-template-columns: 2dvw 1fr;
|
||||
display: flex;
|
||||
margin-top: .5em;
|
||||
margin-bottom: .5em;
|
||||
gap: 1em;
|
||||
gap: .5em;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
|
|
@ -121,7 +121,7 @@ function handleMemberClick(member: GuildMemberResponse) {
|
|||
#channels-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1dvh;
|
||||
gap: .5em;
|
||||
}
|
||||
|
||||
.member-avatar {
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
<div id="sidebar">
|
||||
<ul>
|
||||
<p>
|
||||
<button @click="$router.go(-1)">
|
||||
<Icon name="lucide:circle-arrow-left" alt="Back"></Icon>
|
||||
</button>
|
||||
<span @click="$router.go(-1)">
|
||||
<Icon class="back-button" size="2em" name="lucide:circle-arrow-left" alt="Back"></Icon>
|
||||
</span>
|
||||
</p>
|
||||
<span class="spacer"></span>
|
||||
|
||||
|
|
@ -182,6 +182,16 @@ onMounted(() => {
|
|||
height: 100vh;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
cursor: pointer;
|
||||
color: var(--primary-color);
|
||||
transition: color 100ms;
|
||||
}
|
||||
|
||||
.back-button:hover{
|
||||
color: var(--primary-highlighted-color);
|
||||
}
|
||||
|
||||
#links-and-socials * {
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
--sidebar-background-color: #3e3a37;
|
||||
--sidebar-highlighted-background-color: #46423b;
|
||||
--topbar-background-color: #3a3733;
|
||||
--chatbox-background-color: #3a3733;
|
||||
|
||||
--padding-color: #e0e0e0;
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
--sidebar-background-color: #2e2a27;
|
||||
--sidebar-highlighted-background-color: #36322b;
|
||||
--topbar-background-color: #2a2723;
|
||||
--chatbox-background-color: #1a1713;
|
||||
|
||||
--padding-color: #484848;
|
||||
|
||||
|
|
|
|||
29
public/themes/description.css
Normal file
29
public/themes/description.css
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
/* 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;
|
||||
--chatbox-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 */
|
||||
}
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
--sidebar-background-color: #dbd8d4;
|
||||
--sidebar-highlighted-background-color: #d4d0ca;
|
||||
--topbar-background-color: #dfdbd6;
|
||||
--chatbox-background-color: #dfdbd6;
|
||||
|
||||
--padding-color: #484848;
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue