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>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="published-container" :class="{'has-navigation': layout?.layoutRef?.navigation ?? false}">
|
<div class="bg-light-0 dark:bg-dark-0">
|
||||||
<div class="site-nav-bar">
|
<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>
|
<div class="flex flex-auto items-stretch gap-12">
|
||||||
<div class="gapx-3 flex align-stretch">
|
<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="site-nav-bar-text" 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="site-nav-bar-text mobile-hidden" aria-label="Projets" :to="{ path: `/explorer`, force: true }" active-class="mod-active">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>
|
||||||
<NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Editeur" :to="{ path: '/editing', force: true }" active-class="mod-active">Editeur</NuxtLink>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="flex-auto"><SearchView /></div>
|
||||||
<div class="mobile-bigger"><SearchView /></div>
|
<div class="flex flex-auto align-center gap-6 justify-end">
|
||||||
<div class="ps-1 gapx-1 flex align-center">
|
<ThemeSwitch />
|
||||||
<ThemeSwitch class="mobile-hidden" />
|
<NuxtLink class="" :to="{ path: '/user/profile', force: true }"><ThemeIcon icon="user" :width=32 :height=32 /></NuxtLink>
|
||||||
<NuxtLink class="site-login" :to="{ path: '/user/profile', force: true }"><ThemeIcon icon="user" :width=32 :height=32 /></NuxtLink>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<NuxtLayout ref="layout">
|
<NuxtLayout ref="layout">
|
||||||
<template #mobile>
|
<template #mobile>
|
||||||
<div class="mobile-nav-bar">
|
<div class="">
|
||||||
<NuxtLink class="mobile-nav-bar-text" aria-label="Accueil" :to="{ path: '/', force: true }">Accueil</NuxtLink>
|
<NuxtLink class="" 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="" aria-label="Projets" :to="{ path: `/explorer`, force: true }" active-class="">Projets</NuxtLink>
|
||||||
<NuxtLink class="mobile-nav-bar-text" aria-label="Editeur" :to="{ path: '/editing', force: true }" active-class="mod-active">Editeur</NuxtLink>
|
<NuxtLink class="" aria-label="Editeur" :to="{ path: '/editing', force: true }" active-class="">Editeur</NuxtLink>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<NuxtPage/>
|
<NuxtPage/>
|
||||||
</NuxtLayout>
|
</NuxtLayout>
|
||||||
<div class="site-footer">
|
<div class="">
|
||||||
<p>Copyright Peaceultime - 2024</p>
|
<p>Copyright Peaceultime - 2024</p>
|
||||||
<NuxtLink :to="{ path: '/third-party', force: true }">Applications tierces et crédits</NuxtLink>
|
<NuxtLink :to="{ path: '/third-party', force: true }">Applications tierces et crédits</NuxtLink>
|
||||||
</div>
|
</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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="search-view-outer">
|
<div class="w-full border border-light-30 dark:border-dark-30">
|
||||||
<div class="search-view-container">
|
<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">
|
||||||
<span class="published-search-icon"></span>
|
|
||||||
<input class="search-bar" type="text" placeholder="Recherche" v-model="input" @input="search">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<Teleport to="#teleports" v-if="input !== '' && !!pos">
|
<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'}">
|
:style="{top: (pos.bottom + 4) + 'px', left: pos.left + 'px', width: pos.width + 'px'}">
|
||||||
<div class="loading" v-if="loading"></div>
|
<div class="loading" v-if="loading"></div>
|
||||||
<template v-else>
|
<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')"
|
@mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
|
||||||
@mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
|
@mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
|
||||||
@mousedown.prevent="navigateTo(`/explorer/${result.id}${result.home}`); input = ''">
|
@mousedown.prevent="navigateTo(`/explorer/${result.id}${result.home}`); input = ''">
|
||||||
<div class="suggestion-content">
|
<div class="">
|
||||||
<BoldContent class="suggestion-title" :text="result.name" :matched="input" />
|
<BoldContent class="" :text="result.name" :matched="input" />
|
||||||
<div class="suggestion-subtext">
|
<div class="">
|
||||||
<div class="suggestion-text">{{ result.username }}</div>
|
<div class="">{{ result.username }}</div>
|
||||||
<div class="suggestion-text">{{ result.pages }} pages</div>
|
<div class="">{{ result.pages }} pages</div>
|
||||||
</div>
|
</div>
|
||||||
</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')"
|
@mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
|
||||||
@mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
|
@mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
|
||||||
@mousedown.prevent="navigateTo(`/explorer/${result.project}${result.path}`); input = ''">
|
@mousedown.prevent="navigateTo(`/explorer/${result.project}${result.path}`); input = ''">
|
||||||
<div class="suggestion-content">
|
<div class="">
|
||||||
<BoldContent class="suggestion-title" :text="result.title" :matched="input" />
|
<BoldContent class="" :text="result.title" :matched="input" />
|
||||||
<div class="suggestion-subtext">
|
<div class="">
|
||||||
<div class="suggestion-text">{{ result.username }}</div>
|
<div class="">{{ result.username }}</div>
|
||||||
<div class="suggestion-text">{{ result.comments }} commentaires</div>
|
<div class="">{{ result.comments }} commentaires</div>
|
||||||
</div>
|
</div>
|
||||||
</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')"
|
@mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
|
||||||
@mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
|
@mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
|
||||||
@mousedown.prevent="navigateTo(`/user/${result.id}`); input = ''">
|
@mousedown.prevent="navigateTo(`/user/${result.id}`); input = ''">
|
||||||
<div class="suggestion-content">
|
<div class="">
|
||||||
<BoldContent class="suggestion-title" :text="result.username" :matched="input" />
|
<BoldContent class="" :text="result.username" :matched="input" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="suggestion-empty"
|
<div class=""
|
||||||
v-if="results.projects.length === 0 && results.files.length === 0 && results.users.length === 0">
|
v-if="results.projects.length === 0 && results.files.length === 0 && results.users.length === 0">
|
||||||
Aucun résultat
|
Aucun résultat
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ defineProps<Prop>();
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<span>
|
<span>
|
||||||
<img :src="`/icons/${icon}.light.svg`" class="dark-hidden light-block" :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 light-hidden" :width="width" :height="height" />
|
<img :src="`/icons/${icon}.dark.svg`" class="dark:block hidden" :width="width" :height="height" />
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -12,15 +12,18 @@ const isDark = computed({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="site-body-left-column-site-theme-toggle" :class="{'is-dark': isDark}" style="">
|
<div class="flex relative">
|
||||||
<span class="option mod-dark">
|
<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="svg-icon lucide-moon">
|
<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>
|
<path d="M12 3a6.364 6.364 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
<div class="checkbox-container" :class="{'is-enabled': isDark}" @click="isDark = !isDark"></div>
|
<div class="
|
||||||
<span class="option mod-light">
|
before:absolute before:top-0 before:left-0 before:right-0 before:bottom-0 before:opacity-0 before:block before:z-10
|
||||||
<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">
|
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>
|
<circle cx="12" cy="12" r="4"></circle>
|
||||||
<path d="M12 2v2"></path>
|
<path d="M12 2v2"></path>
|
||||||
<path d="M12 20v2"></path>
|
<path d="M12 20v2"></path>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,4 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import("~/assets/canvas.css")
|
|
||||||
|
|
||||||
import type { CanvasContent, CanvasNode } from '~/types/canvas';
|
import type { CanvasContent, CanvasNode } from '~/types/canvas';
|
||||||
|
|
||||||
interface Props
|
interface Props
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,73 @@
|
||||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||||
|
|
||||||
export default defineNuxtConfig({
|
export default defineNuxtConfig({
|
||||||
modules: ["@nuxtjs/color-mode", "nuxt-security"],
|
modules: ["@nuxtjs/color-mode", "nuxt-security", "@nuxtjs/tailwindcss"],
|
||||||
css: ['~/assets/common.css', '~/assets/global.css'],
|
|
||||||
runtimeConfig: {
|
runtimeConfig: {
|
||||||
dbFile: 'db.sqlite',
|
dbFile: 'db.sqlite',
|
||||||
session: {
|
session: {
|
||||||
password: '699c46bd-9aaa-4364-ad01-510ee4fe7013'
|
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: {
|
app: {
|
||||||
pageTransition: false,
|
pageTransition: false,
|
||||||
layoutTransition: false
|
layoutTransition: false
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
{
|
{
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@nuxtjs/color-mode": "^3.4.2",
|
"@nuxtjs/color-mode": "^3.4.2",
|
||||||
|
"@nuxtjs/tailwindcss": "^6.12.1",
|
||||||
"@types/bun": "^1.1.6",
|
"@types/bun": "^1.1.6",
|
||||||
"@types/diff": "^5.2.1",
|
"@types/diff": "^5.2.1",
|
||||||
"hast-util-to-html": "^9.0.1",
|
"hast-util-to-html": "^9.0.1",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue