violet-3 to black-title; added fomo-card colors; changed mbz-purple color/dark-background colour; changed body-background-color

This commit is contained in:
xcexec 2024-10-19 09:56:06 +02:00
parent ef890fb577
commit 7ec511a43a
19 changed files with 26 additions and 24 deletions

View file

@ -1,5 +1,5 @@
body {
@apply bg-body-background-color dark:bg-zinc-800 dark:text-white;
@apply bg-body-background-color dark:bg-gray-900 dark:text-white;
}
.out {

View file

@ -24,7 +24,7 @@
@layer components {
.mbz-card {
@apply block bg-mbz-yellow-alt-300 hover:bg-mbz-yellow-alt-200 text-violet-title dark:text-white dark:hover:text-white rounded-lg dark:border-violet-title shadow-md dark:bg-mbz-purple dark:hover:dark:bg-mbz-purple-400 dark:text-white dark:hover:text-white;
@apply block bg-white hover:bg-white text-black-title dark:text-white dark:hover:text-white rounded-lg dark:border-black-title shadow-md dark:bg-mbz-purple dark:hover:dark:bg-mbz-purple-800 dark:text-white dark:hover:text-white;
}
}

View file

@ -2,7 +2,7 @@
<article
:class="{ 'bg-white dark:bg-black mb-4 shadow-md rounded p-4': style }"
>
<p class="text-violet-3 text-4xl font-bold">{{ number }}</p>
<p class="text-black-title text-4xl font-bold">{{ number }}</p>
<slot name="subtitle">
{{ subtitle }}
</slot>

View file

@ -26,7 +26,7 @@
</div>
<div class="flex-1">
<div class="flex items-center">
<p class="text-violet-3 dark:text-white text-lg font-semibold flex-1">
<p class="text-black-title dark:text-white text-lg font-semibold flex-1">
{{ discussion.title }}
</p>
<span class="" :title="formatDateTimeString(actualDate)">

View file

@ -1,6 +1,6 @@
<template>
<div
class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white"
class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-black-title dark:text-white"
:class="{ small }"
:style="`--small: ${smallStyle}`"
>

View file

@ -18,7 +18,7 @@
</div>
<div class="p-2">
<h3
class="pb-2 text-lg leading-6 line-clamp-3 font-bold text-violet-title dark:text-white"
class="pb-2 text-lg leading-6 line-clamp-3 font-bold text-black-title dark:text-white"
:lang="event.language"
dir="auto"
>

View file

@ -3,7 +3,7 @@
class="bg-white dark:bg-mbz-purple dark:hover:bg-mbz-purple-400 mb-5 mt-4 pb-2 md:p-0 rounded-t-lg"
>
<div
class="bg-mbz-yellow-alt-100 flex p-2 text-violet-title rounded-t-lg"
class="bg-mbz-yellow-alt-100 flex p-2 text-black-title rounded-t-lg"
dir="auto"
>
<figure
@ -79,7 +79,7 @@
}"
>
<h3
class="line-clamp-3 font-bold mx-auto my-0 text-lg text-violet-title dark:text-white"
class="line-clamp-3 font-bold mx-auto my-0 text-lg text-black-title dark:text-white"
:lang="participation.event.language"
>
{{ participation.event.title }}

View file

@ -1,6 +1,6 @@
<template>
<div
class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white"
class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-black-title dark:text-white"
>
<div class="datetime-container-content">
<div class="ml-2 h-8 bg-slate-200 w-16"></div>

View file

@ -1,6 +1,6 @@
<template>
<div
class="starttime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white"
class="starttime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-black-title dark:text-white"
:class="{ small }"
:style="`--small: ${smallStyle}`"
>

View file

@ -2,7 +2,7 @@
<FullCalendar ref="calendarRef" :options="calendarOptions">
<template v-slot:eventContent="arg">
<span
class="text-violet-3 dark:text-white font-bold m-2"
class="text-black-title dark:text-white font-bold m-2"
:title="arg.event.title"
>
{{ arg.event.title }}

View file

@ -27,7 +27,7 @@
<div class="flex gap-1 mb-2">
<div class="overflow-hidden flex-auto">
<h3
class="text-2xl leading-5 line-clamp-3 font-bold text-violet-3 dark:text-white"
class="text-2xl leading-5 line-clamp-3 font-bold text-black-title dark:text-white"
dir="auto"
>
{{ displayName(group) }}

View file

@ -6,7 +6,7 @@
'border-yellow-1': !privateSection,
}"
>
<div class="flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title">
<div class="flex items-stretch py-3 px-1 bg-yellow-1 text-black-title">
<div class="flex flex-1 gap-1">
<o-icon :icon="icon" custom-size="36" />
<h2 class="text-2xl font-medium mt-0">{{ title }}</h2>

View file

@ -52,7 +52,7 @@
class="flex h-full justify-between self-end flex-col p-2 pt-1 md:p-4 md:pt-2 leading-normal w-full"
>
<h2
class="mb-2 text-xl font-bold tracking-tight text-violet-title dark:text-white"
class="mb-2 text-xl font-bold tracking-tight text-black-title dark:text-white"
>
<slot name="default" />
</h2>

View file

@ -26,7 +26,7 @@ const typeClasses = computed(() => {
switch (props.variant) {
default:
case "light":
return "bg-purple-3 dark:text-violet-3";
return "bg-purple-3 dark:text-black-title";
case "info":
return "bg-mbz-info dark:text-black";
case "warning":

View file

@ -138,7 +138,7 @@
eventCategory
}}</tag>
<router-link
class="rounded-md truncate text-sm text-violet-title py-1 bg-purple-3 dark:text-violet-3 category"
class="rounded-md truncate text-sm text-black-title py-1 bg-purple-3 dark:text-black-title category"
v-for="tag in event?.tags ?? []"
:key="tag.title"
:to="{ name: RouteName.TAG, params: { tag: tag.title } }"

View file

@ -1,6 +1,6 @@
<template>
<div class="container mx-auto">
<h1 class="text-violet-3 dark:text-white">{{ t("Settings") }}</h1>
<h1 class="text-black-title dark:text-white">{{ t("Settings") }}</h1>
<div class="flex flex-wrap gap-4">
<SettingsMenu class="max-w-xs w-full" />
<div class="flex-1">

View file

@ -6,10 +6,12 @@ module.exports = {
colors: {
primary: "#1e7d97",
secondary: "#ffd599",
"violet-title": "#3c376e",
"black-title": "#000000",
tag: "rgb(var(--color-tag) / <alpha-value>)",
"frama-violet": "#725794",
"frama-orange": "#cc4e13",
"fomo-card-1": "#21bef3",
"fomo-card-2": "#9e9ef2",
"mbz-yellow": {
DEFAULT: "#FFD599",
50: "#FFFFFF",
@ -37,7 +39,7 @@ module.exports = {
900: "#452D02",
},
"mbz-purple": {
DEFAULT: "#424056",
DEFAULT: "#2a3646",
50: "#CAC9D7",
100: "#BEBDCE",
200: "#A8A6BC",
@ -46,7 +48,7 @@ module.exports = {
500: "#666385",
600: "#54516D",
700: "#424056",
800: "#292836",
800: "#1e293b",
900: "#111016",
},
"mbz-bluegreen": {
@ -67,7 +69,7 @@ module.exports = {
"violet-3": "#3c376e",
"yellow-1": "#ffd599",
"yellow-2": "#fff1de",
"body-background-color": "#efeef4",
"body-background-color": "#f0ecf4",
"purple-1": "#757199",
"purple-2": "#cdcaea",
"purple-3": "#e6e4f4",

View file

@ -2,7 +2,7 @@
exports[`GroupSection > renders group section with basic informations 1`] = `
"<section class=\\"flex flex-col mb-3 border-2 border-mbz-purple\\">
<div class=\\"flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title\\">
<div class=\\"flex items-stretch py-3 px-1 bg-yellow-1 text-black-title\\">
<div class=\\"flex flex-1 gap-1\\"><span class=\\"o-icon\\"><i class=\\"mdi mdi-bullhorn 36\\"></i></span>
<h2 class=\\"text-2xl font-medium mt-0\\">My group section</h2>
</div><a href=\\"/@my_group@remotedomain.net/p\\" class=\\"self-center\\">View all</a>
@ -16,7 +16,7 @@ exports[`GroupSection > renders group section with basic informations 1`] = `
exports[`GroupSection > renders public group section 1`] = `
"<section class=\\"flex flex-col mb-3 border-2 border-yellow-1\\">
<div class=\\"flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title\\">
<div class=\\"flex items-stretch py-3 px-1 bg-yellow-1 text-black-title\\">
<div class=\\"flex flex-1 gap-1\\"><span class=\\"o-icon\\"><i class=\\"mdi mdi-bullhorn 36\\"></i></span>
<h2 class=\\"text-2xl font-medium mt-0\\">My group section</h2>
</div><a href=\\"/@my_group@remotedomain.net/p\\" class=\\"self-center\\">View all</a>

View file

@ -32,7 +32,7 @@ exports[`PostListItem > renders post list item with tags 1`] = `
<div data-v-6ca7cc69=\\"\\" class=\\"flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1\\">
<h3 data-v-6ca7cc69=\\"\\" class=\\"text-xl color-violet-3 line-clamp-3 mb-2 font-bold\\" lang=\\"en\\">My Blog Post</h3>
<p data-v-6ca7cc69=\\"\\" class=\\"flex gap-2\\"><span data-v-6ca7cc69=\\"\\" aria-hidden=\\"true\\" class=\\"material-design-icon clock-icon\\" role=\\"img\\"><svg fill=\\"currentColor\\" class=\\"material-design-icon__svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z\\"><!--v-if--></path></svg></span><span data-v-6ca7cc69=\\"\\" dir=\\"auto\\" class=\\"\\">Dec 2, 2020</span></p>
<div data-v-6ca7cc69=\\"\\" class=\\"flex flex-wrap gap-y-0 gap-x-2\\"><span data-v-6ca7cc69=\\"\\" aria-hidden=\\"true\\" class=\\"material-design-icon tag-icon\\" role=\\"img\\"><svg fill=\\"currentColor\\" class=\\"material-design-icon__svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M5.5,7A1.5,1.5 0 0,1 4,5.5A1.5,1.5 0 0,1 5.5,4A1.5,1.5 0 0,1 7,5.5A1.5,1.5 0 0,1 5.5,7M21.41,11.58L12.41,2.58C12.05,2.22 11.55,2 11,2H4C2.89,2 2,2.89 2,4V11C2,11.55 2.22,12.05 2.59,12.41L11.58,21.41C11.95,21.77 12.45,22 13,22C13.55,22 14.05,21.77 14.41,21.41L21.41,14.41C21.78,14.05 22,13.55 22,13C22,12.44 21.77,11.94 21.41,11.58Z\\"><!--v-if--></path></svg></span><span data-v-6955ca87=\\"\\" data-v-6ca7cc69=\\"\\" class=\\"rounded-md truncate text-sm text-violet-title px-2 py-1 bg-purple-3 dark:text-violet-3\\">A tag</span></div>
<div data-v-6ca7cc69=\\"\\" class=\\"flex flex-wrap gap-y-0 gap-x-2\\"><span data-v-6ca7cc69=\\"\\" aria-hidden=\\"true\\" class=\\"material-design-icon tag-icon\\" role=\\"img\\"><svg fill=\\"currentColor\\" class=\\"material-design-icon__svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M5.5,7A1.5,1.5 0 0,1 4,5.5A1.5,1.5 0 0,1 5.5,4A1.5,1.5 0 0,1 7,5.5A1.5,1.5 0 0,1 5.5,7M21.41,11.58L12.41,2.58C12.05,2.22 11.55,2 11,2H4C2.89,2 2,2.89 2,4V11C2,11.55 2.22,12.05 2.59,12.41L11.58,21.41C11.95,21.77 12.45,22 13,22C13.55,22 14.05,21.77 14.41,21.41L21.41,14.41C21.78,14.05 22,13.55 22,13C22,12.44 21.77,11.94 21.41,11.58Z\\"><!--v-if--></path></svg></span><span data-v-6955ca87=\\"\\" data-v-6ca7cc69=\\"\\" class=\\"rounded-md truncate text-sm text-black-title px-2 py-1 bg-purple-3 dark:text-black-title\\">A tag</span></div>
<!--v-if-->
<!--v-if-->
</div>