Time to rework the website CS: Starting with TailwindCSS
This commit is contained in:
parent
cc095af0c4
commit
d1450a1c99
32
app.vue
32
app.vue
|
|
@ -4,32 +4,30 @@ const toggled = ref(false);
|
|||
|
||||
</script>
|
||||
<template>
|
||||
<div class="published-container" :class="{'has-navigation': layout?.layoutRef?.navigation ?? false}">
|
||||
<div class="site-nav-bar">
|
||||
<div>
|
||||
<div class="gapx-3 flex align-stretch">
|
||||
<NuxtLink class="site-nav-bar-text" aria-label="Accueil" :to="{ path: '/', force: true }"><ThemeIcon icon="logo" :width=40 :height=40 /></NuxtLink>
|
||||
<NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Projets" :to="{ path: `/explorer`, force: true }" active-class="mod-active">Projets</NuxtLink>
|
||||
<NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Editeur" :to="{ path: '/editing', force: true }" active-class="mod-active">Editeur</NuxtLink>
|
||||
<div class="bg-light-0 dark:bg-dark-0">
|
||||
<div class="bg-light-0 dark:bg-dark-0 px-12 py-3 sticky top-0 z-40 w-full flex align-middle justify-between lg:z-50 border-b gap-12 border-light-30 dark:border-dark-30">
|
||||
<div class="flex flex-auto items-stretch gap-12">
|
||||
<NuxtLink class="text-lg flex align-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Accueil" :to="{ path: '/', force: true }"><ThemeIcon icon="logo" :width=40 :height=40 /></NuxtLink>
|
||||
<NuxtLink class="text-lg flex align-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Projets" :to="{ path: `/explorer`, force: true }">Projets</NuxtLink>
|
||||
<NuxtLink class="text-lg flex align-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Editeur" :to="{ path: '/editing', force: true }">Editeur</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-bigger"><SearchView /></div>
|
||||
<div class="ps-1 gapx-1 flex align-center">
|
||||
<ThemeSwitch class="mobile-hidden" />
|
||||
<NuxtLink class="site-login" :to="{ path: '/user/profile', force: true }"><ThemeIcon icon="user" :width=32 :height=32 /></NuxtLink>
|
||||
<div class="flex-auto"><SearchView /></div>
|
||||
<div class="flex flex-auto align-center gap-6 justify-end">
|
||||
<ThemeSwitch />
|
||||
<NuxtLink class="" :to="{ path: '/user/profile', force: true }"><ThemeIcon icon="user" :width=32 :height=32 /></NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<NuxtLayout ref="layout">
|
||||
<template #mobile>
|
||||
<div class="mobile-nav-bar">
|
||||
<NuxtLink class="mobile-nav-bar-text" aria-label="Accueil" :to="{ path: '/', force: true }">Accueil</NuxtLink>
|
||||
<NuxtLink class="mobile-nav-bar-text" aria-label="Projets" :to="{ path: `/explorer`, force: true }" active-class="mod-active">Projets</NuxtLink>
|
||||
<NuxtLink class="mobile-nav-bar-text" aria-label="Editeur" :to="{ path: '/editing', force: true }" active-class="mod-active">Editeur</NuxtLink>
|
||||
<div class="">
|
||||
<NuxtLink class="" aria-label="Accueil" :to="{ path: '/', force: true }">Accueil</NuxtLink>
|
||||
<NuxtLink class="" aria-label="Projets" :to="{ path: `/explorer`, force: true }" active-class="">Projets</NuxtLink>
|
||||
<NuxtLink class="" aria-label="Editeur" :to="{ path: '/editing', force: true }" active-class="">Editeur</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
<NuxtPage/>
|
||||
</NuxtLayout>
|
||||
<div class="site-footer">
|
||||
<div class="">
|
||||
<p>Copyright Peaceultime - 2024</p>
|
||||
<NuxtLink :to="{ path: '/third-party', force: true }">Applications tierces et crédits</NuxtLink>
|
||||
</div>
|
||||
|
|
|
|||
1062
assets/canvas.css
1062
assets/canvas.css
File diff suppressed because it is too large
Load Diff
|
|
@ -1,400 +0,0 @@
|
|||
.ps-1
|
||||
{
|
||||
padding-left: 1em;
|
||||
}
|
||||
.pe-1
|
||||
{
|
||||
padding-right: 1em;
|
||||
}
|
||||
.pt-1
|
||||
{
|
||||
padding-top: 1em;
|
||||
}
|
||||
.pb-1
|
||||
{
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.ps-2
|
||||
{
|
||||
padding-left: 2em;
|
||||
}
|
||||
.pe-2
|
||||
{
|
||||
padding-right: 2em;
|
||||
}
|
||||
.pt-2
|
||||
{
|
||||
padding-top: 2em;
|
||||
}
|
||||
.pb-2
|
||||
{
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
.ps-3
|
||||
{
|
||||
padding-left: 3em;
|
||||
}
|
||||
.pe-3
|
||||
{
|
||||
padding-right: 3em;
|
||||
}
|
||||
.pt-3
|
||||
{
|
||||
padding-top: 3em;
|
||||
}
|
||||
.pb-3
|
||||
{
|
||||
padding-bottom: 3em;
|
||||
}
|
||||
|
||||
.flex
|
||||
{
|
||||
display: flex;
|
||||
}
|
||||
.block
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
.inline
|
||||
{
|
||||
display: inline;
|
||||
}
|
||||
.hidden
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
.row
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.column
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.gapx-1 > *
|
||||
{
|
||||
margin-left: .4em;
|
||||
margin-right: .4em;
|
||||
}
|
||||
.gapx-1 > *:first-child, .gapx-2 > *:first-child, .gapx-3 > *:first-child
|
||||
{
|
||||
margin-left: 0;
|
||||
}
|
||||
.gapx-1 > *:last-child, .gapx-2 > *:last-child, .gapx-3 > *:last-child
|
||||
{
|
||||
margin-right: 0;
|
||||
}
|
||||
.gapx-2 > *
|
||||
{
|
||||
margin-left: .8em;
|
||||
margin-right: .8em;
|
||||
}
|
||||
.gapx-3 > *
|
||||
{
|
||||
margin-left: 1.2em;
|
||||
margin-right: 1.2em;
|
||||
}
|
||||
.gapy-1 > *
|
||||
{
|
||||
margin-top: .4em;
|
||||
margin-bottom: .4em;
|
||||
}
|
||||
.gapy-1 > *:first-child, .gapy-2 > *:first-child, .gapy-3 > *:first-child
|
||||
{
|
||||
margin-top: 0;
|
||||
}
|
||||
.gapy-1 > *:last-child, .gapy-2 > *:last-child, .gapy-3 > *:last-child
|
||||
{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.gapy-2 > *
|
||||
{
|
||||
margin-top: .8em;
|
||||
margin-bottom: .8em;
|
||||
}
|
||||
.gapy-3 > *
|
||||
{
|
||||
margin-top: 1.2em;
|
||||
margin-bottom: 1.2em;
|
||||
}
|
||||
|
||||
html.dark-mode .dark-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html.dark-mode .dark-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
html.light-mode .light-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html.light-mode .light-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.align-baseline {
|
||||
align-items: baseline;
|
||||
}
|
||||
.align-center {
|
||||
align-items: center;
|
||||
}
|
||||
.align-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.justify-evenly {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.justify-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
.mobile-bigger {
|
||||
flex: 3 1 0 !important;
|
||||
}
|
||||
.mobile-smaller {
|
||||
flex: 1 3 0 !important;
|
||||
}
|
||||
.mobile-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
.mobile-block {
|
||||
display: inherit !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 750px) {
|
||||
.desktop-bigger {
|
||||
flex: 3 1 0 !important;
|
||||
}
|
||||
.desktop-smaller {
|
||||
flex: 1 3 0 !important;
|
||||
}
|
||||
.desktop-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
.desktop-block {
|
||||
display: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.input-form.input-form-wide {
|
||||
width: 600px;
|
||||
min-height: 300px;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.input-form {
|
||||
width: 400px;
|
||||
min-height: 200px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2em 2em 2em 2em;
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
.input-form h1 {
|
||||
margin-top: 0px;
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
.input-form button {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.input-group .input-label {
|
||||
padding: 4px 1em;
|
||||
}
|
||||
|
||||
.input-error {
|
||||
padding: .5em 1em 4px;
|
||||
color: var(--text-error);
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.input-group .input-input.input-has-error {
|
||||
border-color: var(--text-error);
|
||||
}
|
||||
|
||||
.password-validation-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: .5em 2em;
|
||||
}
|
||||
|
||||
.password-validation-title {
|
||||
font-style: italic;
|
||||
font-size: small;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.password-validation-item {
|
||||
font-size: small;
|
||||
padding-left: .5em;
|
||||
}
|
||||
|
||||
.password-validation-item pre {
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.password-validation-item.validation-error {
|
||||
color: var(--text-error);
|
||||
}
|
||||
|
||||
.loading {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loading:after {
|
||||
content: '';
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 4px solid var(--color-purple);
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
animation: rotate 1s linear infinite;
|
||||
}
|
||||
|
||||
.input-form a {
|
||||
padding: .5em;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
font-weight: var(--font-extrabold);
|
||||
}
|
||||
|
||||
.tree-item-self[data-type]:after {
|
||||
content: attr(data-type);
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
background-color: var(--background-primary-alt);
|
||||
padding: 0 4px;
|
||||
border-radius: 4px;
|
||||
font-size: var(--font-smaller);
|
||||
font-variant: all-petite-caps;
|
||||
}
|
||||
|
||||
.suggestion-subtext {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: var(--font-smaller);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.arrow-down {
|
||||
border: 2px solid var(--background-modifier-border-focus);
|
||||
border-top-color: transparent;
|
||||
border-left-color: transparent;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
transform: rotate(45deg);
|
||||
position: relative;
|
||||
left: 8px;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.projects-container {
|
||||
flex: 1 1;
|
||||
padding: 2em 4em;
|
||||
}
|
||||
|
||||
.project-list {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.project-item {
|
||||
margin: 1em;
|
||||
padding: .5em;
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.project-title {
|
||||
font-size: var(--font-ui-large);
|
||||
font-weight: var(--font-bold);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.project-user {
|
||||
font-size: var(--font-small);
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.project-pages {
|
||||
display: inline;
|
||||
float: inline-end;
|
||||
font-size: var(--font-small);
|
||||
}
|
||||
|
||||
.arrow-group {
|
||||
position: absolute;
|
||||
left: -1em;
|
||||
top: calc(100% + 7px);
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
background-color: var(--background-primary);
|
||||
z-index: 99;
|
||||
text-wrap: nowrap;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.arrow-down.active + .arrow-group {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.arrow-group .arrow-group-item {
|
||||
padding: 8px 1em;
|
||||
font-weight: var(--font-medium);
|
||||
color: var(--text-normal);
|
||||
border-bottom: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
|
||||
.arrow-group .arrow-group-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.arrow-group .arrow-group-item:hover {
|
||||
background-color: var(--background-primary-alt);
|
||||
}
|
||||
|
||||
.link-icon {
|
||||
display: inline-block;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
.mobile-nav-bar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
.mobile-nav-bar-text {
|
||||
padding: .25em;
|
||||
font-size: larger;
|
||||
color: var(--text-color);
|
||||
font-weight: bolder;
|
||||
}
|
||||
5008
assets/global.css
5008
assets/global.css
File diff suppressed because it is too large
Load Diff
|
|
@ -38,50 +38,47 @@ async function debounced()
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="search-view-outer">
|
||||
<div class="search-view-container">
|
||||
<span class="published-search-icon"></span>
|
||||
<input class="search-bar" type="text" placeholder="Recherche" v-model="input" @input="search">
|
||||
</div>
|
||||
<div class="w-full border border-light-30 dark:border-dark-30">
|
||||
<input class="caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 bg-light-20 dark:bg-dark-20 appearance-none w-full outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40" type="text" placeholder="Recherche" v-model="input" @input="search">
|
||||
</div>
|
||||
<Teleport to="#teleports" v-if="input !== '' && !!pos">
|
||||
<div class="search-results"
|
||||
<div class=""
|
||||
:style="{top: (pos.bottom + 4) + 'px', left: pos.left + 'px', width: pos.width + 'px'}">
|
||||
<div class="loading" v-if="loading"></div>
|
||||
<template v-else>
|
||||
<div class="suggestion-item suggestion-project" v-for="result of results.projects" :key="result.id"
|
||||
<div class="" v-for="result of results.projects" :key="result.id"
|
||||
@mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
|
||||
@mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
|
||||
@mousedown.prevent="navigateTo(`/explorer/${result.id}${result.home}`); input = ''">
|
||||
<div class="suggestion-content">
|
||||
<BoldContent class="suggestion-title" :text="result.name" :matched="input" />
|
||||
<div class="suggestion-subtext">
|
||||
<div class="suggestion-text">{{ result.username }}</div>
|
||||
<div class="suggestion-text">{{ result.pages }} pages</div>
|
||||
<div class="">
|
||||
<BoldContent class="" :text="result.name" :matched="input" />
|
||||
<div class="">
|
||||
<div class="">{{ result.username }}</div>
|
||||
<div class="">{{ result.pages }} pages</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="suggestion-item suggestion-file" v-for="result of results.files" :key="result.id"
|
||||
<div class="" v-for="result of results.files" :key="result.id"
|
||||
@mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
|
||||
@mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
|
||||
@mousedown.prevent="navigateTo(`/explorer/${result.project}${result.path}`); input = ''">
|
||||
<div class="suggestion-content">
|
||||
<BoldContent class="suggestion-title" :text="result.title" :matched="input" />
|
||||
<div class="suggestion-subtext">
|
||||
<div class="suggestion-text">{{ result.username }}</div>
|
||||
<div class="suggestion-text">{{ result.comments }} commentaires</div>
|
||||
<div class="">
|
||||
<BoldContent class="" :text="result.title" :matched="input" />
|
||||
<div class="">
|
||||
<div class="">{{ result.username }}</div>
|
||||
<div class="">{{ result.comments }} commentaires</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="suggestion-item suggestion-user" v-for="result of results.users" :key="result.id"
|
||||
<div class="" v-for="result of results.users" :key="result.id"
|
||||
@mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
|
||||
@mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
|
||||
@mousedown.prevent="navigateTo(`/user/${result.id}`); input = ''">
|
||||
<div class="suggestion-content">
|
||||
<BoldContent class="suggestion-title" :text="result.username" :matched="input" />
|
||||
<div class="">
|
||||
<BoldContent class="" :text="result.username" :matched="input" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="suggestion-empty"
|
||||
<div class=""
|
||||
v-if="results.projects.length === 0 && results.files.length === 0 && results.users.length === 0">
|
||||
Aucun résultat
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ defineProps<Prop>();
|
|||
|
||||
<template>
|
||||
<span>
|
||||
<img :src="`/icons/${icon}.light.svg`" class="dark-hidden light-block" :width="width" :height="height" />
|
||||
<img :src="`/icons/${icon}.dark.svg`" class="dark-block light-hidden" :width="width" :height="height" />
|
||||
<img :src="`/icons/${icon}.light.svg`" class="block dark:hidden" :width="width" :height="height" />
|
||||
<img :src="`/icons/${icon}.dark.svg`" class="dark:block hidden" :width="width" :height="height" />
|
||||
</span>
|
||||
</template>
|
||||
|
|
@ -12,15 +12,18 @@ const isDark = computed({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="site-body-left-column-site-theme-toggle" :class="{'is-dark': isDark}" style="">
|
||||
<span class="option mod-dark">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-moon">
|
||||
<div class="flex relative">
|
||||
<span class="hidden dark:block absolute top-[3px] left-[2px] z-[1] px-[5px]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 stroke-light-100 dark:stroke-dark-100">
|
||||
<path d="M12 3a6.364 6.364 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<div class="checkbox-container" :class="{'is-enabled': isDark}" @click="isDark = !isDark"></div>
|
||||
<span class="option mod-light">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-sun">
|
||||
<div class="
|
||||
before:absolute before:top-0 before:left-0 before:right-0 before:bottom-0 before:opacity-0 before:block before:z-10
|
||||
after:transition-all after:w-4 after:h-4 after:border after:border-light-30 dark:after:border-dark-30 after:block after:m-[3px] after:top-[-1px] after:pointer-events-none after:absolute after:left-0 after:bg-light-0 after:rounded-full after:translate-x-[1px] dark:after:translate-x-[26px]
|
||||
inline-block relative cursor-pointer w-[50px] h-[22px] select-none rounded-full border border-light-30 dark:border-dark-30 bg-light-0 dark:bg-dark-30 dark:hover:border-dark-35" @click="isDark = !isDark"></div>
|
||||
<span class="block dark:hidden absolute top-[3px] left-[22px] z-[1] px-[5px]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 stroke-light-100 dark:stroke-dark-100 ">
|
||||
<circle cx="12" cy="12" r="4"></circle>
|
||||
<path d="M12 2v2"></path>
|
||||
<path d="M12 20v2"></path>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
<script setup lang="ts">
|
||||
import("~/assets/canvas.css")
|
||||
|
||||
import type { CanvasContent, CanvasNode } from '~/types/canvas';
|
||||
|
||||
interface Props
|
||||
|
|
|
|||
|
|
@ -1,14 +1,73 @@
|
|||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
|
||||
export default defineNuxtConfig({
|
||||
modules: ["@nuxtjs/color-mode", "nuxt-security"],
|
||||
css: ['~/assets/common.css', '~/assets/global.css'],
|
||||
modules: ["@nuxtjs/color-mode", "nuxt-security", "@nuxtjs/tailwindcss"],
|
||||
runtimeConfig: {
|
||||
dbFile: 'db.sqlite',
|
||||
session: {
|
||||
password: '699c46bd-9aaa-4364-ad01-510ee4fe7013'
|
||||
}
|
||||
},
|
||||
tailwindcss: {
|
||||
config: {
|
||||
theme: {
|
||||
extend: {
|
||||
boxShadow: {
|
||||
raw: '0 0 0 4px var(--tw-shadow-color)'
|
||||
}
|
||||
},
|
||||
colors: {
|
||||
transparent: 'transparent',
|
||||
current: 'currentColor',
|
||||
accent: '#8a5cf5',
|
||||
light: {
|
||||
red: '#e93147',
|
||||
orange: '#ec7500',
|
||||
yellow: '#e0ac00',
|
||||
green: '#08b94e',
|
||||
cyan: '#00bfbc',
|
||||
blue: '#086ddd',
|
||||
purple: '#7852ee',
|
||||
pink: '#d53984',
|
||||
0: "#ffffff",
|
||||
5: "#fcfcfc",
|
||||
10: "#fafafa",
|
||||
20: "#f6f6f6",
|
||||
25: "#e3e3e3",
|
||||
30: "#e0e0e0",
|
||||
35: "#d4d4d4",
|
||||
40: "#bdbdbd",
|
||||
50: "#ababab",
|
||||
60: "#707070",
|
||||
70: "#5c5c5c",
|
||||
100: "#222222",
|
||||
},
|
||||
dark: {
|
||||
red: '#fb464c',
|
||||
orange: '#e9973f',
|
||||
yellow: '#e0de71',
|
||||
green: '#44cf6e',
|
||||
cyan: '#53dfdd',
|
||||
blue: '#027aff',
|
||||
purple: '#a882ff',
|
||||
pink: '#fa99cd',
|
||||
0: '#1e1e1e',
|
||||
5: '#212121',
|
||||
10: '#242424',
|
||||
20: '#262626',
|
||||
25: '#2a2a2a',
|
||||
30: '#363636',
|
||||
35: '#3f3f3f',
|
||||
40: '#555555',
|
||||
50: '#666666',
|
||||
60: '#999999',
|
||||
70: '#b3b3b3',
|
||||
100: '#dadada',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
app: {
|
||||
pageTransition: false,
|
||||
layoutTransition: false
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"devDependencies": {
|
||||
"@nuxtjs/color-mode": "^3.4.2",
|
||||
"@nuxtjs/tailwindcss": "^6.12.1",
|
||||
"@types/bun": "^1.1.6",
|
||||
"@types/diff": "^5.2.1",
|
||||
"hast-util-to-html": "^9.0.1",
|
||||
|
|
|
|||
Loading…
Reference in New Issue