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:
Alexandre Aubin
GitHub
commit
eb8a2e4ec2
5 changed files with 140 additions and 42 deletions
3
app.vue
3
app.vue
|
|
@ -34,7 +34,8 @@ body {
|
|||
/* GLOBAL */
|
||||
.btn,
|
||||
.select,
|
||||
.input {
|
||||
.input.input,
|
||||
.join-item.btn {
|
||||
min-height: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ async function logout() {
|
|||
</script>
|
||||
|
||||
<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
|
||||
v-if="queryMsg"
|
||||
variant="warning"
|
||||
|
|
|
|||
|
|
@ -29,38 +29,22 @@ const localesAsOptions = computed(() => {
|
|||
const themesAsOptions = [
|
||||
'auto',
|
||||
'system',
|
||||
// Daisyui default themes
|
||||
'light',
|
||||
// Custom dark
|
||||
'dark',
|
||||
'cupcake',
|
||||
'bumblebee',
|
||||
'emerald',
|
||||
'corporate',
|
||||
'omg',
|
||||
'legacy',
|
||||
// Daisyui dark
|
||||
'black',
|
||||
'synthwave',
|
||||
'retro',
|
||||
'halloween',
|
||||
'coffee',
|
||||
// Daisyui light
|
||||
'cupcake',
|
||||
'cyberpunk',
|
||||
'valentine',
|
||||
'halloween',
|
||||
'garden',
|
||||
'forest',
|
||||
'aqua',
|
||||
'lofi',
|
||||
'pastel',
|
||||
'fantasy',
|
||||
'wireframe',
|
||||
'black',
|
||||
'luxury',
|
||||
'dracula',
|
||||
'cmyk',
|
||||
'autumn',
|
||||
'business',
|
||||
'acid',
|
||||
'lemonade',
|
||||
'night',
|
||||
'coffee',
|
||||
'winter',
|
||||
'dim',
|
||||
'nord',
|
||||
'sunset',
|
||||
].map((theme) => ({
|
||||
text:
|
||||
theme !== 'auto'
|
||||
|
|
@ -76,25 +60,31 @@ const themesAsOptions = [
|
|||
|
||||
<div class="lg:flex lg:justify-between">
|
||||
<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 class="lg:w-1/2 card card-body border border-neutral my-10">
|
||||
<h2 class="text-3xl mb-3">{{ $t('change_password') }}</h2>
|
||||
<section class="lg:w-1/2 card card-bordered border-base-300 my-10">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<section class="card card-body border border-neutral my-10">
|
||||
<h2 class="text-3xl mb-3">{{ t('edit_browser_settings') }}</h2>
|
||||
<section class="card card-bordered border-base-300 my-10">
|
||||
<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>
|
||||
<div role="group" class="flex align mb-3">
|
||||
<form class="p-8" novalidate @submit.prevent>
|
||||
<div role="group" class="flex flex-wrap align mb-3">
|
||||
<!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
|
||||
<label for="language" class="label me-3">{{ t('language') }}</label>
|
||||
<select
|
||||
|
|
@ -113,7 +103,7 @@ const themesAsOptions = [
|
|||
</select>
|
||||
</div>
|
||||
|
||||
<div role="group" class="flex align">
|
||||
<div role="group" class="flex flex-wrap align">
|
||||
<!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
|
||||
<label for="theme" class="label me-3">{{ t('theme') }}</label>
|
||||
<select
|
||||
|
|
@ -135,3 +125,10 @@ const themesAsOptions = [
|
|||
</section>
|
||||
</div>
|
||||
</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
|
||||
v-for="app in apps"
|
||||
: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
|
||||
v-if="app.logo"
|
||||
|
|
|
|||
|
|
@ -1,8 +1,108 @@
|
|||
module.exports = {
|
||||
// Safelisting some classes to avoid content purge
|
||||
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: {
|
||||
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