mirror of
https://github.com/YunoHost/yunohost-portal.git
synced 2024-09-03 20:06:23 +02:00
Merge pull request #12 from YunoHost/enh-theming
Enh: misc styling improvements
This commit is contained in:
commit
eb8a2e4ec2
5 changed files with 140 additions and 42 deletions
3
app.vue
3
app.vue
|
@ -34,7 +34,8 @@ body {
|
||||||
/* GLOBAL */
|
/* GLOBAL */
|
||||||
.btn,
|
.btn,
|
||||||
.select,
|
.select,
|
||||||
.input {
|
.input.input,
|
||||||
|
.join-item.btn {
|
||||||
min-height: 2.5rem;
|
min-height: 2.5rem;
|
||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
|
@ -37,7 +37,7 @@ async function logout() {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container mx-auto p-10 min-h-screen flex flex-col">
|
<div class="container mx-auto p-6 md:p-10 min-h-screen flex flex-col">
|
||||||
<BaseAlert
|
<BaseAlert
|
||||||
v-if="queryMsg"
|
v-if="queryMsg"
|
||||||
variant="warning"
|
variant="warning"
|
||||||
|
|
|
@ -29,38 +29,22 @@ const localesAsOptions = computed(() => {
|
||||||
const themesAsOptions = [
|
const themesAsOptions = [
|
||||||
'auto',
|
'auto',
|
||||||
'system',
|
'system',
|
||||||
|
// Daisyui default themes
|
||||||
'light',
|
'light',
|
||||||
|
// Custom dark
|
||||||
'dark',
|
'dark',
|
||||||
'cupcake',
|
'omg',
|
||||||
'bumblebee',
|
'legacy',
|
||||||
'emerald',
|
// Daisyui dark
|
||||||
'corporate',
|
'black',
|
||||||
'synthwave',
|
'synthwave',
|
||||||
'retro',
|
'halloween',
|
||||||
|
'coffee',
|
||||||
|
// Daisyui light
|
||||||
|
'cupcake',
|
||||||
'cyberpunk',
|
'cyberpunk',
|
||||||
'valentine',
|
'valentine',
|
||||||
'halloween',
|
|
||||||
'garden',
|
|
||||||
'forest',
|
|
||||||
'aqua',
|
|
||||||
'lofi',
|
|
||||||
'pastel',
|
|
||||||
'fantasy',
|
|
||||||
'wireframe',
|
|
||||||
'black',
|
|
||||||
'luxury',
|
|
||||||
'dracula',
|
|
||||||
'cmyk',
|
|
||||||
'autumn',
|
|
||||||
'business',
|
|
||||||
'acid',
|
|
||||||
'lemonade',
|
|
||||||
'night',
|
|
||||||
'coffee',
|
|
||||||
'winter',
|
|
||||||
'dim',
|
|
||||||
'nord',
|
'nord',
|
||||||
'sunset',
|
|
||||||
].map((theme) => ({
|
].map((theme) => ({
|
||||||
text:
|
text:
|
||||||
theme !== 'auto'
|
theme !== 'auto'
|
||||||
|
@ -76,25 +60,31 @@ const themesAsOptions = [
|
||||||
|
|
||||||
<div class="lg:flex lg:justify-between">
|
<div class="lg:flex lg:justify-between">
|
||||||
<section
|
<section
|
||||||
class="lg:w-1/2 lg:me-20 h-full card card-body border border-neutral my-10"
|
class="lg:w-1/2 lg:me-20 h-full card card-bordered border-base-300 my-10"
|
||||||
>
|
>
|
||||||
<h2 class="text-3xl mb-3">{{ t('edit_personal_settings') }}</h2>
|
<div class="card-header bg-base-300 py-4 px-8">
|
||||||
|
<h2 class="text-3xl">{{ t('edit_personal_settings') }}</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
<UserInfoForm />
|
<UserInfoForm class="p-8" />
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="lg:w-1/2 card card-body border border-neutral my-10">
|
<section class="lg:w-1/2 card card-bordered border-base-300 my-10">
|
||||||
<h2 class="text-3xl mb-3">{{ $t('change_password') }}</h2>
|
<div class="card-header bg-base-300 py-4 px-8">
|
||||||
|
<h2 class="text-3xl">{{ $t('change_password') }}</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
<UserPasswordForm />
|
<UserPasswordForm class="p-8" />
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section class="card card-body border border-neutral my-10">
|
<section class="card card-bordered border-base-300 my-10">
|
||||||
<h2 class="text-3xl mb-3">{{ t('edit_browser_settings') }}</h2>
|
<div class="card-header bg-base-300 py-4 px-8">
|
||||||
|
<h2 class="text-3xl">{{ t('edit_browser_settings') }}</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
<form novalidate @submit.prevent>
|
<form class="p-8" novalidate @submit.prevent>
|
||||||
<div role="group" class="flex align mb-3">
|
<div role="group" class="flex flex-wrap align mb-3">
|
||||||
<!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
|
<!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
|
||||||
<label for="language" class="label me-3">{{ t('language') }}</label>
|
<label for="language" class="label me-3">{{ t('language') }}</label>
|
||||||
<select
|
<select
|
||||||
|
@ -113,7 +103,7 @@ const themesAsOptions = [
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div role="group" class="flex align">
|
<div role="group" class="flex flex-wrap align">
|
||||||
<!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
|
<!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
|
||||||
<label for="theme" class="label me-3">{{ t('theme') }}</label>
|
<label for="theme" class="label me-3">{{ t('theme') }}</label>
|
||||||
<select
|
<select
|
||||||
|
@ -135,3 +125,10 @@ const themesAsOptions = [
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.card .card-header {
|
||||||
|
border-top-left-radius: var(--rounded-box);
|
||||||
|
border-top-right-radius: var(--rounded-box);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -87,7 +87,7 @@ async function onSearchSubmit() {
|
||||||
<li
|
<li
|
||||||
v-for="app in apps"
|
v-for="app in apps"
|
||||||
:key="app.label"
|
:key="app.label"
|
||||||
class="flex flex-auto border border-neutral rounded p-4 relative hover:bg-neutral hover:text-neutral-content"
|
class="flex text-align flex-auto btn btn-outline btn-neutral !h-auto p-5 relative flex-nowrap items-start justify-normal text-left font-normal"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
v-if="app.logo"
|
v-if="app.logo"
|
||||||
|
|
|
@ -1,8 +1,108 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
// Safelisting some classes to avoid content purge
|
// Safelisting some classes to avoid content purge
|
||||||
plugins: [require('daisyui')],
|
plugins: [require('daisyui')],
|
||||||
safelist: ['safelisted'],
|
safelist: [
|
||||||
|
'safelisted',
|
||||||
|
'bg-primary',
|
||||||
|
'bg-secondary',
|
||||||
|
'bg-accent',
|
||||||
|
'bg-neutral',
|
||||||
|
'bg-base-100',
|
||||||
|
'bg-base-200',
|
||||||
|
'bg-base-300',
|
||||||
|
'bg-base-content',
|
||||||
|
'bg-info',
|
||||||
|
'bg-success',
|
||||||
|
'bg-warning',
|
||||||
|
'bg-error',
|
||||||
|
],
|
||||||
daisyui: {
|
daisyui: {
|
||||||
themes: true,
|
themes: [
|
||||||
|
{
|
||||||
|
legacy: {
|
||||||
|
primary: '#2980b9',
|
||||||
|
secondary: '#30333b',
|
||||||
|
accent: '#7028b8',
|
||||||
|
neutral: '#999',
|
||||||
|
info: '#2980b9',
|
||||||
|
success: '#27ae60',
|
||||||
|
warning: '#e67e22',
|
||||||
|
error: '#c0392b',
|
||||||
|
'base-100': '#41444f',
|
||||||
|
'base-200': '#999',
|
||||||
|
'base-300': '#30333b',
|
||||||
|
'base-content': '#fff',
|
||||||
|
'primary-content': '#fff',
|
||||||
|
'secondary-content': '#fff',
|
||||||
|
'accent-content': '#fff',
|
||||||
|
'neutral-content': '#fff',
|
||||||
|
'info-content': '#fff',
|
||||||
|
'success-content': '#fff',
|
||||||
|
'warning-content': '#fff',
|
||||||
|
'error-content': '#fff',
|
||||||
|
'--rounded-box': '0rem',
|
||||||
|
'--rounded-btn': '0rem',
|
||||||
|
},
|
||||||
|
dark: {
|
||||||
|
primary: '#53a5fb',
|
||||||
|
secondary: '#20cb98',
|
||||||
|
accent: '#b957ea',
|
||||||
|
neutral: '#EDEDED',
|
||||||
|
info: '#79e7f9',
|
||||||
|
success: '#70ea8d',
|
||||||
|
warning: '#ffd452',
|
||||||
|
error: '#ff5a5a',
|
||||||
|
'base-100': '#202020',
|
||||||
|
'base-200': '#3C3C3C',
|
||||||
|
'base-300': '#303030',
|
||||||
|
'base-content': '#fafafa',
|
||||||
|
'primary-content': '#000',
|
||||||
|
'secondary-content': '#000',
|
||||||
|
'accent-content': '#000',
|
||||||
|
'neutral-content': '#000',
|
||||||
|
'info-content': '#000',
|
||||||
|
'success-content': '#000',
|
||||||
|
'warning-content': '#000',
|
||||||
|
'error-content': '#000',
|
||||||
|
'--rounded-box': '0.1875rem',
|
||||||
|
'--rounded-btn': '0.1875rem',
|
||||||
|
'--border-btn': '1px',
|
||||||
|
},
|
||||||
|
omg: {
|
||||||
|
primary: '#ffe066',
|
||||||
|
secondary: '#eebefa',
|
||||||
|
accent: '#bac8ff',
|
||||||
|
neutral: '#e7ebf3',
|
||||||
|
info: '#a5d8ff',
|
||||||
|
success: '#63e6be',
|
||||||
|
warning: '#ff922b',
|
||||||
|
error: '#fcc2d7',
|
||||||
|
'base-100': '#343a40',
|
||||||
|
'base-200': '#6f7479',
|
||||||
|
'base-300': '#212529',
|
||||||
|
'base-content': '#f1f3f5',
|
||||||
|
'--rounded-box': '.13rem',
|
||||||
|
'--rounded-btn': '.3rem',
|
||||||
|
'--rounded-badge': '1.9rem',
|
||||||
|
'--animation-btn': '0.25s',
|
||||||
|
'--animation-input': '0.2s',
|
||||||
|
'--btn-focus-scale': '0.95',
|
||||||
|
'--border-btn': '1px',
|
||||||
|
'--tab-border': '1px',
|
||||||
|
'--tab-radius': '0.5rem',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'light',
|
||||||
|
// dark
|
||||||
|
'black', // to rework contrasts
|
||||||
|
'synthwave',
|
||||||
|
'halloween',
|
||||||
|
'coffee',
|
||||||
|
// light
|
||||||
|
'cupcake',
|
||||||
|
'cyberpunk',
|
||||||
|
'valentine',
|
||||||
|
'nord',
|
||||||
|
],
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue