Ligtht mode updats
Cagatay Civici
parent
3ffd5adb52
commit
c30cd4e6dc
19
app.vue
19
app.vue
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<NuxtLayout :name="layout">
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
|
@ -12,23 +12,6 @@ export default {
|
|||
themeChangeListener: null,
|
||||
newsActivate: null,
|
||||
newsService: null,
|
||||
data() {
|
||||
return {
|
||||
layout: 'custom'
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
immediate: true,
|
||||
handler(to) {
|
||||
if (to.name === 'index') {
|
||||
this.layout = 'custom';
|
||||
} else {
|
||||
this.layout = 'default';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.newsActivate = () => {
|
||||
this.$appState.announcement = News;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.landing-dark {
|
||||
--home-highlight-color:#3B82F6;
|
||||
--home-highlight-darker-color:#3575dd;
|
||||
--home-highlight-color:#14B8A6;
|
||||
--home-highlight-darker-color:#0D9488;
|
||||
--home-highlight-fore-color:#ffffff;
|
||||
--home-bg:#030B17;
|
||||
--home-intro-bg:linear-gradient(180deg, #061730 0%, #030B17 100%);
|
||||
|
|
@ -20,7 +20,6 @@
|
|||
--home-herobox-shadow:0px 50px 100px rgba(0, 0, 0, 0.25);
|
||||
--home-herobox-strip-top-bg:linear-gradient(360deg, rgba(3, 11, 23, 0) 0%, rgba(11, 37, 73, 0.913125) 53.83%, rgba(7, 24, 48, 0) 101.32%);
|
||||
--home-herobox-strip-bottom-bg:linear-gradient(90deg, rgba(3, 11, 23, 0) 0%, #0C284E 50%, rgba(3, 11, 23, 0) 100%);
|
||||
--home-herobox-logo-shadow:0px 50px 100px 0px #000000;
|
||||
--home-components-strip-bg:linear-gradient(90deg, rgba(3, 11, 23, 0) 0%, #071934 100%);
|
||||
--home-blocks-bg:linear-gradient(180deg, #040B17 0%, #061B38 58.33%, #030B17 100%);
|
||||
--home-blocks-block-bg:#0B213F8C;
|
||||
|
|
|
|||
|
|
@ -156,12 +156,6 @@
|
|||
transform: scale(1);
|
||||
}
|
||||
|
||||
&.logo {
|
||||
&::before {
|
||||
box-shadow: var(--home-herobox-logo-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
.landing-light {
|
||||
--home-highlight-color:#4f8ff7;
|
||||
--home-highlight-darker-color:#3575dd;
|
||||
--home-highlight-color:#14B8A6;
|
||||
--home-highlight-darker-color:#0D9488;
|
||||
--home-highlight-fore-color:#ffffff;
|
||||
--home-bg:#EDF5FF;
|
||||
--home-intro-bg:#EDF5FF;
|
||||
--home-border-color:#C7E0FF;
|
||||
--home-bg:#F9FAFB;
|
||||
--home-intro-bg:#F9FAFB;
|
||||
--home-border-color:rgba(0,0,0,.1);
|
||||
--home-primary-text-color:#191919;
|
||||
--home-secondary-text-color:#73879E;
|
||||
--home-card-shadow:0px 30px 50px #D4E0EE;
|
||||
--home-card-shadow:0px 7px 15px 0px rgba(0, 0, 0, 0.02), 0px 28px 28px 0px rgba(0, 0, 0, 0.02), 0px 63px 38px 0px rgba(0, 0, 0, 0.01), 0px 111px 44px 0px rgba(0, 0, 0, 0.00), 0px 174px 49px 0px rgba(0, 0, 0, 0.00);
|
||||
--home-box-bg:#ffffff;
|
||||
--home-linkbox-bg:#ffffff;
|
||||
--home-linkbox-border:1px solid #C7E0FF;
|
||||
|
|
@ -18,45 +18,44 @@
|
|||
--home-menu-link-hover-bg:#e3f0ff;
|
||||
--home-herobox-bg:#ffffff;
|
||||
--home-herobox-shadow:0px 50px 100px rgba(212, 224, 238, 0.25);
|
||||
--home-herobox-strip-top-bg:linear-gradient(0deg, #EDF5FF 1.9%, #D9EAFF 50.44%, #EDF5FF 100%);
|
||||
--home-herobox-strip-bottom-bg:linear-gradient(90deg, #F2F8FF 0%, #EDF5FF 0.01%, #D9EAFF 50%, #EDF5FF 100%);
|
||||
--home-herobox-logo-shadow:00px 50px 100px #BACCE2;
|
||||
--home-components-strip-bg:linear-gradient(90deg, #EDF5FF 0.01%, #D9EAFF 100%);
|
||||
--home-blocks-bg:linear-gradient(180deg, rgba(237, 245, 255, 0) 0%, #D4E8FE 49.48%, #EDF5FF 100%);
|
||||
--home-blocks-block-bg:#FFFFFF8C;
|
||||
--home-blocks-block-shadow:-10px 4px 10px 0px #c5d3e782, -10px 4px 25px #a1c0eb91;
|
||||
--home-blocks-border-left:5px solid #D0E5FF;
|
||||
--home-blocks-border-bottom:7px solid #D0E5FF;
|
||||
--home-blocks-border:1px solid #D0E5FF;
|
||||
--home-blocks-sidebar-bg:#E4F0FF;
|
||||
--home-blocks-list-bg:#ECF5FF;
|
||||
--home-blocks-main-bg:none;
|
||||
--home-blocks-main-border:1px solid #D0E5FF;
|
||||
--home-blocks-item-bg:#E4F0FF;
|
||||
--home-blocks-image-bg:#C1DFFF;
|
||||
--home-blocks-text-color:#C1DFFF;
|
||||
--home-blocks-active-shadow:0px 30px 50px 0px #D9EAFF;
|
||||
--home-blocks-active-border-top:1px solid #D7E9FF;
|
||||
--home-blocks-active-border-right:1px solid #D7E9FF;
|
||||
--home-blocks-active-border-bottom:6px solid #D7E9FF;
|
||||
--home-blocks-active-border-left:4px solid #D7E9FF;
|
||||
--home-blocks-animation-shadow:0px 30px 50px 10px #2E7BBC61;
|
||||
--home-blocks-tablebar-bg:#C1DFFF;
|
||||
--home-blocks-bar-bg:#C1DFFF;
|
||||
--home-herobox-strip-top-bg:linear-gradient(0deg, #F9FAFB 1.9%, #edf0f3 50.44%, #F9FAFB 100%);
|
||||
--home-herobox-strip-bottom-bg:linear-gradient(90deg, #F9FAFB 1.9%, #edf0f3 50.44%, #F9FAFB 100%);
|
||||
--home-components-strip-bg:linear-gradient(90deg, #F9FAFB 0.01%, #edf0f3 100%);
|
||||
--home-blocks-bg:transparent;
|
||||
--home-blocks-block-bg:#ffffff;
|
||||
--home-blocks-block-shadow:-10px 4px 10px 0px rgba(0, 0, 0, .1), -10px 4px 25px rgba(0, 0, 0, .1);
|
||||
--home-blocks-border-left:5px solid rgba(0,0,0,.1);
|
||||
--home-blocks-border-bottom:7px solid rgba(0,0,0,.1);
|
||||
--home-blocks-border:1px solid rgba(0,0,0,.1);
|
||||
--home-blocks-sidebar-bg:#f9fafb;
|
||||
--home-blocks-list-bg:#f2f3f3;
|
||||
--home-blocks-main-bg:#ffffff;
|
||||
--home-blocks-main-border:1px solid rgba(0,0,0,.1);
|
||||
--home-blocks-item-bg:#f2f3f3;
|
||||
--home-blocks-image-bg:#a1e3db;
|
||||
--home-blocks-text-color:#b3b4b5;
|
||||
--home-blocks-active-shadow:0px 30px 50px 0px rgba(0, 0, 0, .1);
|
||||
--home-blocks-active-border-top:1px solid rgba(0,0,0,.1);
|
||||
--home-blocks-active-border-right:1px solid rgba(0,0,0,.1);
|
||||
--home-blocks-active-border-bottom:6px solid rgba(0,0,0,.1);
|
||||
--home-blocks-active-border-left:4px solid rgba(0,0,0,.1);
|
||||
--home-blocks-animation-shadow:0px 30px 50px 10px rgba(0, 0, 0, .2);
|
||||
--home-blocks-tablebar-bg:#a1e3db;
|
||||
--home-blocks-bar-bg:#a1e3db;
|
||||
--home-blocks-bar-button-bg:#ffffff;
|
||||
--home-blocks-circle-bg:#C1DFFF;
|
||||
--home-templates-bg:linear-gradient(180deg,#edf5ff 0%,#d4e8fe 49.48%,#edf5ff 100%);
|
||||
--home-templates-block-shadow:0px 4.787564754486084px 10px 0px #b9d2f0;
|
||||
--home-templates-block-border-left:5px solid #e9f3ff;
|
||||
--home-templates-block-border-bottom:7px solid #e9f3ff;
|
||||
--home-templates-line:linear-gradient(rgba(10, 35, 70, 0),#89b8f1 50%,rgba(10, 35, 70, 0));
|
||||
--home-templates-block-hover-bg:rgba(11, 33, 63, 0.699);
|
||||
--home-templates-btn-bg:rgb(11, 33, 63);
|
||||
--home-blocks-circle-bg:#a1e3db;
|
||||
--home-templates-bg:transparent;
|
||||
--home-templates-block-shadow:0px 4.787564754486084px 10px 0px rgba(0,0,0,.1);
|
||||
--home-templates-block-border-left:5px solid #edf0f3;
|
||||
--home-templates-block-border-bottom:7px solid#edf0f3;
|
||||
--home-templates-line:rgba(0,0,0,.1);
|
||||
--home-templates-block-hover-bg:rgba(0, 0, 0, 0.2);
|
||||
--home-templates-btn-bg:rgba(0, 0, 0, 0.5);
|
||||
--home-templates-btn-text-color:#ffffff;
|
||||
--home-templates-btn-shadow:0px 10px 15px 0px #00000040;
|
||||
--home-templates-btn-border-top:1px solid rgb(13, 40, 78);
|
||||
--home-templates-btn-border-right:1px solid rgb(13, 40, 78);
|
||||
--home-templates-btn-border-bottom:4px solid rgb(13, 40, 78);
|
||||
--home-templates-btn-border-left:3px solid rgb(13, 40, 78);
|
||||
--home-features-card-shadow: 0px 50px 100px rgba(212, 224, 238, 0.25);
|
||||
--home-templates-btn-shadow:0px 10px 15px 0px rgba(0, 0, 0, 0.5);
|
||||
--home-templates-btn-border-top:1px solid rgba(0,0,0,.1);
|
||||
--home-templates-btn-border-right:1px solid rgba(0,0,0,.1);
|
||||
--home-templates-btn-border-bottom:4px solid rgba(0,0,0,.1);
|
||||
--home-templates-btn-border-left:3px solid rgba(0,0,0,.1);
|
||||
--home-features-card-shadow: 0px 7px 15px 0px rgba(0, 0, 0, 0.02), 0px 28px 28px 0px rgba(0, 0, 0, 0.02), 0px 63px 38px 0px rgba(0, 0, 0, 0.01), 0px 111px 44px 0px rgba(0, 0, 0, 0.00), 0px 174px 49px 0px rgba(0, 0, 0, 0.00);
|
||||
}
|
||||
|
|
@ -13,6 +13,10 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
definePageMeta({
|
||||
layout: "custom",
|
||||
});
|
||||
|
||||
import EventBus from '@/layouts/AppEventBus';
|
||||
import BlockSection from './landing/BlockSection';
|
||||
import ComponentSection from './landing/ComponentSection';
|
||||
|
|
@ -25,6 +29,7 @@ import UsersSection from './landing/UsersSection';
|
|||
|
||||
const Intro = defineAsyncComponent(() => import('./landing/Intro.vue'));
|
||||
|
||||
|
||||
export default {
|
||||
props: {
|
||||
theme: {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<section class="landing-designer py-8">
|
||||
<div class="section-header">Theme Designer</div>
|
||||
<p class="section-detail">Designer is the ultimate tool to create your own PrimeVue experience powered by a SASS based theme engine with 500+ variables and a Visual Designer.</p>
|
||||
<div class="designer-main mt-7 justify-content-center px-5 lg:px-8" :style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark' : 'light'}.svg')`, backgroundSize: 'cover' }">
|
||||
<div class="designer-main mt-7 justify-content-center px-5 lg:px-8" :style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark' : 'light-gray'}.svg')`, backgroundSize: 'cover' }">
|
||||
<div class="box p-4 flex flex-column md:flex-row z-1 designer-editor">
|
||||
<div class="mr-0 md:mr-4 p-4 designer-controls box border-bottom-1 border-left-none border-right-none border-top-none md:border-bottom-none md:border-right-1" style="border-radius: '10px'">
|
||||
<div class="text-center mb-4">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<section class="landing-features py-8">
|
||||
<div class="section-header">Features</div>
|
||||
<p class="section-detail">PrimeVue is the most complete solution for your UI requirements.</p>
|
||||
<div class="mt-7 px-3 lg:px-8" :style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize: 'cover' }">
|
||||
<div class="mt-7 px-3 lg:px-8" :style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt-gray'}.svg')`, backgroundSize: 'cover' }">
|
||||
<div class="features-container">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</div>
|
||||
<div
|
||||
class="themes-main flex mt-7 justify-content-center px-5 lg:px-8"
|
||||
:style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize: 'cover' }"
|
||||
:style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt-gray'}.svg')`, backgroundSize: 'cover' }"
|
||||
>
|
||||
<div class="box overflow-hidden z-1 p-5 table-container">
|
||||
<DataTable
|
||||
|
|
|
|||
Loading…
Reference in New Issue